vue-insagent-pc/src/views/PeopleManage/Agent/QuoteCountManagement.vue

<template>
  <div class="QuoteCountManagement">
    <el-row style="height: 100%">
      <el-col :span="4" style="height: 100%; overflow-y: auto; background: rgba(244, 246, 248, 1);">
        <div class="menu-item" :class="{'active': menuIndex === index}" v-for="(item, index) in leftTree" :key="item.id" @click="handleSelect(item, index)">{{ item.namesimple }}</div>
      </el-col>
      <el-col :span="20">
        <el-row :gutter="20" align="middle" style="display: flex; align-items: center; width: 100%; overflow: hidden; margin: 0">
          <el-col :span="18" style="padding-left: 20px">报价限制</el-col>
          <el-col :span="6">
            <el-button type="primary" @click="handleSync" :disabled="!isEdit">同步配置到其他保司</el-button>
            <el-button type="primary" @click="handleEdit" v-if="!isEdit">编辑</el-button>
            <el-button type="primary" @click="handleSave" v-else>保存</el-button>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-form :model="quoteForm" ref="QuoteFormRef" :rules="quoteRules" style="padding-left: 30px;" label-width="120px">
          <el-form-item prop="isEnabled" label="报价次数限制">
            <el-switch v-model="quoteForm.isEnabled" :disabled="!isEdit"></el-switch>
            <p class="tips">开启后，代理人的报价次数将受到限制，超出设置的报价次数后将停止代理人的报价功能</p>
          </el-form-item>
          <el-form-item prop="authorize" label="代理人限制">
            <div>
              <el-radio-group v-model="quoteForm.authorize" :disabled="!isEdit">
                <el-radio :label="0">限制全部代理人</el-radio>
                <el-radio :label="1">限制部分代理人</el-radio>
              </el-radio-group>
              <kt-button v-if="quoteForm.authorize" type="text" label="选择代理人" :disabled="!isEdit" icon="el-icon-plus" style="color: #2D4D89; margin-left: 30px" @click="selectAgent" />
            </div>
            <el-table
              :data="selectList"
            >
              <el-table-column prop="deptId" label="部门编码"></el-table-column>
<!--              <el-table-column prop="organization" label="机构名称"></el-table-column>-->
              <el-table-column prop="deptName" label="部门名称"></el-table-column>
              <el-table-column prop="id" label="工号"></el-table-column>
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="mobile" label="联系电话"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-popconfirm
                    confirm-button-text='确定'
                    cancel-button-text='取消'
                    icon="el-icon-info"
                    icon-color="red"
                    :ref="`popconfirm-${scope.row.id}`"
                    title="确定删除吗？"
                    @confirm="handleDelete(scope.row)"
                  >
                    <kt-button slot="reference" :disabled="!isEdit" type="text" label="删除" style="color: #2D4D89;" />
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item prop="quoteLimit" label="报价限制">
            <el-checkbox-group v-model="quoteForm.quoteLimit" @change="checkChange">
              <div>
                <el-checkbox label="1" :disabled="!isEdit">
                  <div style="display: flex; align-items: center">
                    单日报价，出单比不满<el-input size="small" maxlength="2" v-model="quoteForm.orderRatio" :disabled="!isEdit" style="width: 150px; margin: 0 20px;">
                    <template slot="append">%</template>
                  </el-input>后，锁定代理人报价次数
                  </div>
                </el-checkbox>
              </div>
              <p style="font-size: 12px; color: #999; margin: 0">报价出单比=承保单数/报价单数*100% （四舍五入到小数点后两位）</p>
              <div>
                <el-checkbox label="2" :disabled="!isEdit">
                  <div>单日最大报价次数</div>
                  <div style="display: flex; align-items: center">
                    单日代理人报价满<el-input size="small" maxlength="4" v-model="quoteForm.dayMaxQuoteNum" :disabled="!isEdit" style="width: 150px; margin: 0 20px;">
                    <template slot="append">次</template>
                  </el-input>后，锁定代理人报价次数
                  </div>
                </el-checkbox>
              </div>
              <div>
                <el-checkbox label="3" :disabled="!isEdit">
                  <div>单日单车限制</div>
                  <div style="display: flex; align-items: center">
                    单日代理人单车最多报价<el-input size="small" maxlength="4" :disabled="!isEdit" v-model="quoteForm.carMaxQuoteNum" style="width: 150px; margin: 0 20px;">
                    <template slot="append">次</template>
                  </el-input>后，锁定代理人报价次数
                  </div>
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="syncShow"
      width="30%"
    >
      <template slot="title">
        <i class="el-icon-warning" style="color: red"></i><span>是否同步配置到其它保险公司</span>
      </template>
      <span>同步后，所有保险公司的报价限制配置都将变为该保险公司相同配置，是否确认同步</span>
      <template slot="footer">
        <el-button @click="syncShow = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog
      title="选择代理人"
      :visible.sync="agentTableShow"
      width="80%"
    >
      <el-form ref="CountDetailForm" v-model="countDetailForm" :inline="true" label-width="130px">
        <el-form-item style="width: 30%;" label="代理人">
          <el-input size="small" v-model="countDetailForm.orderNumber" placeholder="请输入工号、姓名查找" @change="() => {
            pageNum = 1
          }"></el-input>
        </el-form-item>
        <el-form-item style="width: 30%;" label="所属机构">
          <el-cascader size="small" v-model="countDetailForm.organization" :options="areaOptions" style="width: 100%;"
                       :props="{ label: 'name', value: 'id', children: 'children', checkStrictly: true, expandTrigger: 'hover' }" clearable
                       ref="area" @change="() => {
            pageNum = 1
          }"></el-cascader>
        </el-form-item>
        <el-form-item style="width: 30%;">
          <el-button type="primary" size="small" @click="initAgentUser" style="margin-left: 150px;">查询</el-button>
          <el-button size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-select class="select-box" size="small" v-model="checkType" placeholder="全选" style="width: 130px; border: none;" @change="selectTypeChange">
          <el-option label="选中所有数据" value="all"></el-option>
          <el-option label="选中本页数据" value="cur"></el-option>
        </el-select>
        <el-divider direction="vertical"></el-divider>
        <span>已经选择了{{ selectedLength }}条</span>
      </div>
      <el-table
        :data="agentDataList"
        ref="multipleTable"
        row-key="id"
        :reserve-selection="true"
        style="width: 100%"
        @select-all="handleSelectAll"
        @select="handleSelectChange"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="deptId" label="部门编码"></el-table-column>
<!--        <el-table-column prop="organization" label="机构名称"></el-table-column>-->
        <el-table-column prop="deptName" label="部门名称"></el-table-column>
        <el-table-column prop="id" label="工号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="mobile" label="联系电话"></el-table-column>
      </el-table>
      <div class="pagination-box">
        <el-pagination
          @current-change="handlePageNumChange"
          background
          :page-size="5"
          :current-page="pageNum"
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
      <template slot="footer">
        <kt-button label="取消" size="small" type="text" @click="handleCancel" />
        <kt-button label="确认" size="small" type="primary" @click="handleOk" />
      </template>
    </el-dialog>
  </div>
</template>

<script>
import KtButton from "../../Core/KtButton.vue";
import {getAgentUser, getQuoteConfigInfo, setQuoteInfo, syncQuoteInfo} from "../../../http/moudules/quote";
import {findTree} from "../../../http/moudules/insCompany";

export default {
  components: {
    KtButton
  },
  data() {
    return {
      leftTree: [], // 保险公司list
      menuIndex: 0, // 保险公司item下标
      syncShow: false, // 同步设置弹框
      quoteForm: {
        id: '',
        isEnabled: false,
        authorize: '',
        quoteLimit: []
      }, // 报价form
      quoteRules: {
        isEnabled: [
          {
            required: true, message: '', trigger: 'change'
          }
        ],
        authorize: [
          {
            required: true, message: '请选择代理人限制', trigger: 'change'
          }
        ],
        quoteLimit: [
          {
            type: 'array',required: true, message: '请选择报价限制', trigger: 'change'
          }
        ]
      }, // 报价form规则
      isEdit: false, // 是否可编辑
      checkType: '', // 全选类型
      agentTableShow: false, // 控制选择代理人弹框
      agentDataList: [],
      myList: [], // 记录每个保险公司接口返回的已经选好的代理人
      selectList: [], // 勾选的数据
      selectedList: [], // 勾选的数据（格式为平铺后）
      pageList: [1], // 记录点击了的页码
      selectedLength: 0, // 选择（包括全选后）的数据数量
      total: 0,
      countDetailForm: {},
      pageNum: 1,
      areaOptions: [], // 机构树
    }
  },
  methods: {
    checkChange() {
      if(!this.quoteForm.quoteLimit.includes('1')) {
        this.$set(this.quoteForm, 'orderRatio', '')
      }
      if(!this.quoteForm.quoteLimit.includes('2')) {
        this.$set(this.quoteForm, 'dayMaxQuoteNum', '')
      }
      if(!this.quoteForm.quoteLimit.includes('3')) {
        this.$set(this.quoteForm, 'carMaxQuoteNum', '')
      }
    },
    // 获取保险公司
    initCompany() {
      this.$api.quote.getCompany().then(res => {
        if(res.code == 200) {
          this.leftTree = res.data
          this.initQuoteDetails(res.data[0].id)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取机构
    initOrganization() {
      this.$api.dept.findTree().then(res => {
        this.areaOptions = res.data
      })
    },
    // 获取代理人
    initAgentUser() {
      let that = this
      that.$api.quote.getAgentUser({
        pageNum: this.pageNum,
        pageSize: 5,
        columnFilters: {
          name: {
            value: that.countDetailForm.orderNumber?that.countDetailForm.orderNumber: ''
          },
          deptId: {
            value: that.countDetailForm.organization?that.countDetailForm.organization[that.countDetailForm.organization.length-1]: ''
          }
        }
      }).then(res => {
        if(res.code == 200) {
          that.agentDataList = res.data.content
          that.total = res.data.totalSize
          that.$nextTick(() => {
            if(that.checkType === 'all') {
              that.selectedLength = res.data.totalSize
              if(that.agentDataList.length>0) {
                that.agentDataList.forEach(item => {
                  that.$refs.multipleTable.toggleRowSelection(item, true)
                })
              }
            } else {
              let list = [...that.selectedList]
              if(list&&list.length>0) {
                list.forEach(item => {
                  let arrayItem = that.agentDataList.find(sub => sub.id === item.id)
                  if(arrayItem) {
                    that.$refs.multipleTable.toggleRowSelection(arrayItem, true)
                  }
                })
              }
            }
          })
        }
      })
    },
    // 代理人搜索条件重置
    reset() {
      this.countDetailForm = {}
      this.pageNum = 1
      this.initAgentUser()
    },
    // 代理人分页页数变化函数
    handlePageNumChange(page) {
      this.pageNum = page
      if(this.checkType === 'cur') {
        this.checkType = ''
      }
      this.initAgentUser()
    },
    // 选择代理人确认
    handleOk() {
      if(this.checkType === 'all') {
        this.quoteForm.authorize = 0
        this.selectList = []
      } else {
        this.selectList = [...this.selectedList]
      }
      this.agentTableShow = false
    },
    // 选择代理人取消
    handleCancel() {
      // this.selectList = [...this.myList]
      this.selectedList = [...this.selectList]
      this.selectedLength = this.selectedList.length
      this.agentTableShow = false
    },
    // 代理选择
    handleSelectChange(rows) {
      if(this.checkType === 'all') {
        this.selectedLength = this.total
        return;
      }
      let list = [...this.selectedList]
      if(list.length>0){
        if(rows.length>0) {
          let arr = list.filter(item1 => !this.agentDataList.some(item2 => item1.id === item2.id))
          this.selectedList = this.uniqueItems([...arr, ...rows])
        } else {
          this.selectedList = this.uniqueItems([...list])
        }
        this.selectedLength = this.selectedList.length
      } else {
        if(rows.length>0) {
          this.selectedList = [...rows]
        } else {
          this.selectedList = []
        }
        this.selectedLength = this.selectedList.length
      }
    },
    // 手动点击全选
    handleSelectAll(rows) {
      let list = [...this.selectedList]
      if(rows.length===0) {
        if(list.length>0){
          let arr = list.filter(item1 => !this.agentDataList.some(item2 => item1.id === item2.id))
          this.selectedList = this.uniqueItems([...arr])
          this.selectedLength = this.selectedList.length
        } else {
          this.selectedList = [...rows]
        }
      } else {
        let arr = [...rows], brr = [...list], crr = brr.concat(arr)
        this.selectedList = this.uniqueItems([...crr])
        this.selectedLength = this.selectedList.length
      }
    },
    // 数组去重
    uniqueItems(arr) {
      const unique = [];
      arr.forEach(item => {
        const exists = unique.some(el => el.id === item.id);
        if (!exists) {
          unique.push(item);
        }
      });
      return unique;
    },
    // 保险公司切换
    handleSelect(item, index) {
      this.menuIndex = index
      this.quoteForm = {
        id: '',
        isEnabled: false,
        authorize: '',
        quoteLimit: []
      }
      this.isEdit = false
      this.initQuoteDetails(item.id)
    },
    // 获取详情
    initQuoteDetails(id) {
      this.selectList = []
      this.selectedList = []
      this.myList = []
      this.$api.quote.getQuoteConfigInfo(id).then(res => {
        if(res.code === 200) {
          this.quoteForm = {...res.data}
          this.quoteForm.isEnabled = res.data.isEnabled?true:false
          let list = []
          if(res.data.orderRatio){
            list.push('1')
          }
          if(res.data.dayMaxQuoteNum){
            list.push('2')
          }
          if(res.data.carMaxQuoteNum){
            list.push('3')
          }
          this.$set(this.quoteForm, 'quoteLimit', list)
          this.selectedList = [...res.data.proxyList]
          this.selectedLength = res.data.proxyList.length
          this.selectList = [...res.data.proxyList]
          this.myList = [...res.data.proxyList]
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 同步到其他
    handleSync() {
      this.syncShow = true
    },
    // 编辑
    handleEdit() {
      this.isEdit = true
    },
    // 保存
    handleSave() {
      this.$refs["QuoteFormRef"].validate((valid) => {
        if(valid) {
          this.$api.quote.setQuoteInfo({
            companyId: this.leftTree[this.menuIndex].id,
            isEnabled: this.quoteForm.isEnabled?1:0,
            id: this.quoteForm.id,
            authorize: this.quoteForm.authorize,
            proxyList: this.selectedList,
            orderRatio: this.quoteForm.orderRatio,
            dayMaxQuoteNum: this.quoteForm.dayMaxQuoteNum,
            carMaxQuoteNum: this.quoteForm.carMaxQuoteNum
          }).then(res => {
            if(res.code == 200) {
              this.$message.success(res.msg)
              this.initQuoteDetails(this.leftTree[this.menuIndex].id)
              this.quoteForm = {}
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('请填写或选择必要数据！')
        }
        this.isEdit = false
      })
    },
    // 同步到其他确定
    handleSubmit() {
      this.$api.quote.syncQuoteInfo({
        companyId: this.leftTree[this.menuIndex].id,
        isEnabled: this.quoteForm.isEnabled?1:0,
        id: this.quoteForm.id,
        authorize: this.quoteForm.authorize,
        proxyList: this.selectedList,
        orderRatio: this.quoteForm.orderRatio,
        dayMaxQuoteNum: this.quoteForm.dayMaxQuoteNum,
        carMaxQuoteNum: this.quoteForm.carMaxQuoteNum
      }).then(res => {
        if(res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        this.syncShow = false
      })
    },
    // 选择代理人
    selectAgent() {
      this.agentTableShow = true
      this.countDetailForm = {}
      this.pageNum = 1
      this.checkType = ''
      this.selectedLength = 0
      this.initAgentUser()
      this.initOrganization()
    },
    // 全选类型切换
    selectTypeChange() {
      if(this.agentDataList.length>0) {
        this.agentDataList.forEach(item => {
          this.$refs.multipleTable.toggleRowSelection(item, true)
        })
      }
      if(this.checkType === 'all') {
        this.selectedLength = this.total
        this.selectedList = []
      }
      if(this.checkType === 'cur') {
        let list = [...this.selectedList], arr = [...this.agentDataList]
        this.selectedList = this.uniqueItems(list.concat(arr))
        this.selectedLength = this.selectedList.length
      }
    },
    // 监听浏览器刷新
    handleBeforeUnload(event) {
      if(this.isEdit) {
        event.preventDefault();
        event.returnValue = '';
      }
    },
    // 删除选择的代理人
    handleDelete(row) {
      let list = []
      list = this.selectList.filter((item) => {
        return item.id != row.id
      })
      this.selectList = [...list]
      this.selectedList = [...list]
      this.selectedLength = this.selectedList.length
      this.myList = [...list]
    }
  },
  mounted() {
    this.initCompany();
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  },
  beforeDestroy() {
    window.removeEventListener('beforeunload', this.handleBeforeUnload)
  }
}
</script>

<style scoped>
.QuoteCountManagement{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .tips{
    font-size: 12px;
    color: #999;
  }
}
.menu-item{
  line-height: 38px;
  padding: 8px 0 8px 10px;
  color: #333333;
  cursor: pointer;
}
.active{
  background: rgba(24, 144, 255, 0.2);
  color: #1890FF;
  font-weight: 700;
}
.pagination-box{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}
/deep/.el-divider--horizontal{
  margin: 12px 0;
}
/deep/.el-input__inner{
  padding-left: 34px !important;
}
/deep/.select-box .el-input__inner{
  border: none !important;
}
</style>