opms_frontend/src/views/customer/components/Merge.vue

<!--
 * @Author: wanglj 471442253@qq.com
 * @Date: 2022-12-27 09:33:48
 * @LastEditors: wanglj
 * @LastEditTime: 2023-01-05 09:15:31
 * @Description: file content
 * @FilePath: \opms_frontend\src\views\customer\components\Merge.vue
-->
<template>
  <el-dialog title="合并客户" :visible.sync="visible" :width="width" @close="handleClose">
    <el-alert :closable="false" show-icon type="warning">
      <div slot="title">
        <h3>特别提示</h3>
        <p>1、合并后系统只保留目标客户，同时将另一个客户的联系人、商机、订单、附件、销售动态等迁移到目标客户。</p>
        <p>2、红色字段表示两个客户该字段值不同。</p>
      </div>
    </el-alert>
    <div class="merge">
      <ul class="title">
        <li :class="{ differ: flag.custName }">目标客户</li>
        <li :class="{ differ: flag.abbrName }">助记名</li>
        <li :class="{ differ: flag.custIndustry }">客户行业</li>
        <li :class="{ differ: flag.custLevel }">客户级别</li>
        <li :class="{ differ: flag.source }">客户来源</li>
        <li :class="{ differ: flag.followUpDate }">下次联系时间</li>
        <li :class="{ differ: flag.custLocation }">所在地区</li>
        <li :class="{ differ: flag.custAddress }">详细地址</li>
        <li :class="{ differ: flag.remark }">备注</li>
      </ul>
      <ul v-for="(item, index) in list" :key="index" class="each">
        <li>
          <el-radio v-model="form.custName" :label="item.custName" @change="targetChange(item)" />
        </li>
        <li>
          <el-radio v-model="form.abbrName" :label="item.abbrName" />
        </li>
        <li>
          <el-radio v-model="form.custIndustry" :label="item.custIndustry" />
        </li>
        <li>
          <el-radio v-model="form.custLevel" :label="item.custLevel" />
        </li>
        <li>
          <el-radio v-model="form.source" :label="item.source" />
        </li>
        <li>
          <el-radio v-model="form.followUpDate" :label="item.followUpDate" />
        </li>
        <li>
          <el-radio v-model="form.custLocation" :label="item.custLocation" />
        </li>
        <li>
          <el-radio v-model="form.custAddress" :label="item.custAddress" />
        </li>
        <li>
          <el-radio v-model="form.remark" :label="item.remark" />
        </li>
      </ul>
    </div>
    <span slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleConfirm">合并</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import api from '@/api/customer'
  import to from 'await-to-js'
  export default {
    data() {
      return {
        visible: false,
        ids: [],
        form: {
          id: '',
          custName: '', // 客户名称
          abbrName: '', // 助记名
          custLocation: '', // 所在地区
          custAddress: '', // 详细地址
          custStatus: '', // 客户状态(10正常20)
          followUpDate: '', // 最后跟进时间
          custIndustry: '', // 客户行业  (没数据)
          custLevel: '', // 客户级别  (没数据)
          source: '', //客户来源
        },
        flag: {
          custName: false, // 客户名称
          abbrName: false, // 助记名
          custLocation: false, // 所在地区
          custAddress: false, // 详细地址
          custStatus: false, // 客户状态(10正常20)
          followUpDate: false, // 最后跟进时间
          custIndustry: false, // 客户行业  (没数据)
          custLevel: false, // 客户级别  (没数据)
          source: false, //客户来源
        },
        list: [],
        width: '60%',
      }
    },
    mounted() {},
    methods: {
      init(res, ids) {
        this.list = res.data.list
        if (this.list.length > 4) this.width = '100%'
        else this.width = '60%'
        this.ids = ids
        this.form = { ...res.data.list[0] }
        this.form.ChooseId = this.ids.filter((item) => item != this.form.id)
        for (const key in this.form) {
          const arr = this.list.filter((it) => it[key] == this.form[key])
          if (arr.length !== this.list.length) this.flag[key] = true
        }
        this.visible = true
      },
      targetChange(row) {
        this.form.id = row.id
        this.form.ChooseId = this.ids.filter((item) => item != row.id)
      },
      handleClose() {},
      async handleConfirm() {
        let params = { ...this.form }
        const [err, res] = await to(api.mergeCustomer(params))
        if (err) return
        this.$message.success(res.msg)
        this.visible = false
        this.$emit('refresh')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .differ {
    color: #f56c6c;
  }
  ::v-deep .el-alert {
    p {
      margin: 0;
      font-weight: normal;
    }
    .el-alert__icon {
      font-size: 28px;
      width: 28px;
    }
  }
  .merge {
    height: 361px;
    overflow-y: auto;
    display: flex;
    ul {
      border: 1px solid #dcdfe6;
      & + ul {
        border-left: none;
      }
    }
    li {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #dcdfe6;
    }
    .title {
      width: 100px;
      text-align: center;
    }
    .each {
      flex: 1;
      li {
        padding-left: 10px;
      }
    }
  }
</style>