opms_frontend/src/views/proj/business/components/DetailsContact.vue

<template>
  <div style="height: 100%">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-input
          v-model="queryForm.cuctName"
          placeholder="请输入姓名"
          prefix-icon="el-icon-search"
          style="width: 50%"
          @keyup.enter.native="fetchData" />
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-button icon="el-icon-plus" @click="handleAddContact">新建联系人</el-button>
        <el-button @click="handleSelectContact">关联</el-button>
        <el-button type="danger" @click="handleDisassociation">解除关联</el-button>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table v-loading="listLoading" :data="contactList" height="calc(100% - 42px)" @selection-change="setSelectRows">
      <el-table-column align="center" type="selection" />
      <el-table-column align="center" label="姓名" prop="cuctName" show-overflow-tooltip />
      <el-table-column align="center" label="岗位" prop="postion" show-overflow-tooltip />
      <el-table-column align="center" label="电话" prop="telephone" show-overflow-tooltip />
      <el-table-column align="center" label="微信" prop="wechat" show-overflow-tooltip />
      <el-table-column align="center" label="办公地点" prop="officeLocation" show-overflow-tooltip />
      <!--      <el-table-column align="center" label="邮箱" prop="email" show-overflow-tooltip />-->
      <!--      <el-table-column align="center" label="是否决策人">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-switch v-model="scope.row.isDecision" active-value="10" disabled inactive-value="20" />-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column align="center" label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button v-if="scope.row.contactId !== primacyContactId" type="text" @click="setPrimacyContact(scope.row)">
            设为首要联系人
          </el-button>
          <span v-else>首要联系人</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 选择客户联系人弹窗 -->
    <select-contact
      ref="selectContact"
      :default-customer="customerInfo"
      :query-params="queryContact"
      @save="selectContact" />
    <!-- 新建联系人弹窗 -->
    <customer-contact ref="contact" @contactSave="handleSelectContact" />
  </div>
</template>

<script>
  import businessApi from '@/api/proj/business'
  import businessContactApi from '@/api/proj/businessContact'
  import SelectContact from '@/components/select/SelectCustomerContact'
  import CustomerContact from '@/views/customer/components/Contact'

  export default {
    name: 'Records',
    components: { SelectContact, CustomerContact },
    props: {
      // 项目Id
      busId: {
        type: Number,
        default: 0,
      },
      // 主要联系人Id
      primacyContactId: {
        type: Number,
        default: 0,
      },
      // 客户信息{ custId: id, custName: custName}
      customerInfo: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    data() {
      return {
        queryForm: {
          cuctName: undefined,
          pageNum: 1,
          pageSize: 9999,
        },
        listLoading: false,
        selectRows: [],
        contactList: [],
        queryContact: {},
      }
    },
    mounted() {
      // this.fetchData()
    },
    methods: {
      handleAddContact() {
        this.$refs.contact.contactForm.custId = this.customerInfo.custId
        this.$refs.contact.contactForm.custName = this.customerInfo.custName
        this.$refs.contact.contactVisible = true
      },
      handleSelectContact() {
        this.queryContact.custId = this.customerInfo.custId
        if (!this.queryContact.custId) {
          this.$message.warning('请先选择客户')
          return
        }
        this.$refs.selectContact.open()
      },
      async selectContact(val) {
        if (val && val.length > 0) {
          let form = {
            busId: this.busId,
            contactIds: val.map((item) => item.id),
          }
          const { msg } = await businessContactApi.doAdd(form)
          this.$baseMessage(msg, 'success')
          await this.fetchData()
          this.$emit('fetch-data')
        }
      },
      handleDisassociation() {
        if (this.selectRows.length > 0) {
          const ids = this.selectRows.map((item) => item.id)
          this.$baseConfirm('你确定要解除关联选中项吗', null, async () => {
            const { msg } = await businessContactApi.doDelete({ ids })
            this.$baseMessage(msg, 'success')
            await this.fetchData()
            this.$emit('fetch-data')
          })
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      },
      async setPrimacyContact(row) {
        let form = {
          id: this.busId,
          contactId: row.contactId,
          contactName: row.cuctName,
          contactPostion: row.telephone,
          contactTelephone: row.cuctName,
        }
        const { msg } = await businessApi.setPrimacyContact(form)
        this.$baseMessage(msg, 'success')
        this.$emit('fetch-data')
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      async fetchData() {
        this.listLoading = true
        this.queryForm.busId = this.busId
        const {
          data: { list },
        } = await businessContactApi.getList(this.queryForm)
        this.contactList = list
        this.listLoading = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .follow {
    height: 100%;
    padding: 10px 20px;
    overflow: auto;

    > li {
      display: flex;

      + li {
        margin-top: 10px;
      }
    }

    .date {
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;

      h2,
      h3 {
        margin: 0;
      }

      h2 {
        font-size: 26px;
        line-height: 32px;
      }
    }

    .content {
      flex: 1;
      list-style: none;

      > li {
        border: 1px solid rgb(215, 232, 244);
        background: rgb(247, 251, 254);
        border-radius: 4px;
        padding: 8px;
        overflow: hidden;

        .text-container {
          display: flex;
        }

        .comments {
          padding-left: 60px;
          margin-top: 10px;
          max-height: 190px;
          overflow: auto;

          li {
            display: flex;
            border-top: 1px solid #e3e5e7;

            .text {
              flex: 1;
              padding: 0 10px;

              p {
                font-weight: 500;
                margin: 0;
                line-height: 32px;
              }

              p:first-child {
                line-height: 30px;
                font-weight: bold;
              }

              p:last-child {
                font-size: 12px;
                color: #9499a0;
                text-align: right;
              }
            }
          }
        }

        + li {
          margin-top: 10px;
        }
      }

      .user-avatar {
        font-size: 40px;
      }

      .text {
        flex: 1;
        padding-left: 20px;
        padding-right: 10px;

        p {
          font-weight: 500;
          margin: 0;
          line-height: 32px;

          span {
            color: #1d66dc;
          }
        }

        .action {
          display: flex;
          justify-content: space-between;

          span:first-child {
            font-weight: bold;
            color: #333;
          }
        }

        .footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }

  .no-follow {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.65);
  }
</style>