opms_frontend/src/views/contract/components/Transfer.vue

<!--
 * @Author: liuzl 461480418@qq.com
 * @Date: 2023-01-07 15:44:08
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-01-07 16:11:45
 * @Description: file content
 * @FilePath: \订单全流程管理系统\src\views\contract\components\Transfer.vue
-->
<template>
  <el-dialog append-to-body title="选择转移销售工程师" :visible.sync="innerVisible" width="40%" @close="handleClose">
    <el-form ref="userForm" :model="userForm" :rules="userRules">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="销售工程师" prop="inchargeName">
            <el-select
              v-model="userForm.inchargeName"
              placeholder="请选择销售工程师"
              readonly
              style="width: 100%"
              @focus="openUser(false, 'inchargeId', 'inchargeName')" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button size="mini" type="primary" @click="save">确认</el-button>
      <el-button size="mini" @click="handleClose">取消</el-button>
    </span>
    <!-- 选择用户 -->
    <select-user ref="user" :label="label" :multiple="multiple" :property="property" @save="getUser" />
  </el-dialog>
</template>

<script>
  import to from 'await-to-js'
  import contractApi from '@/api/contract'
  import SelectUser from '@/components/select/SelectUser'

  export default {
    components: {
      SelectUser,
    },
    props: {
      contractId: {
        type: Number,
        default: 0,
      },
      usersList: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        userForm: {
          inchargeId: 0,
          inchargeName: '',
        },
        innerVisible: false,
        userRules: {
          inchargeId: [{ required: true, trigger: 'change', message: '请选择销售工程师' }],
        },
        multiple: false,
        property: '',
        label: '',
      }
    },
    mounted() {},
    methods: {
      // 打开选择公司签约人
      openUser(multiple, property, label) {
        this.multiple = multiple
        this.property = property
        this.label = label
        if (this.userForm[property].length) {
          this.$refs.user.ids = this.userForm[property]
        } else if (this.userForm[property]) {
          this.$refs.user.ids = [this.userForm[property]]
        } else {
          this.$refs.user.ids = []
        }
        this.$refs.user.open()
      },
      // 获取签约人信息
      getUser(userList, property, label) {
        this.userForm[label] = userList.map((item) => item.nickName).join()
        if (this.multiple) {
          this.userForm[property] = userList.map((item) => item.id)
        } else {
          this.userForm[property] = userList[0] ? userList[0].id : ''
        }
        this.$forceUpdate()
      },
      open() {
        this.innerVisible = true
      },
      async save() {
        let params = { ...this.userForm, id: this.contractId }
        const [valid] = await to(this.$refs.userForm.validate())
        if (valid == false) return
        const [err, res] = await to(contractApi.transferContract(params))
        if (err) return
        if (res.code == 200) this.$message.success(res.msg)
        else return
        this.handleClose()
      },
      handleClose() {
        this.innerVisible = false
        this.$emit('transferSave')
        this.userForm = {
          inchargeId: 0,
          inchargeName: '',
        }
        this.$refs.userForm.resetFields()
      },
    },
  }
</script>

<style lang="scss" scoped></style>