lanan-system-vue/src/views/company/staff/form/StaffChangeForm.vue

<template>
  <div class="app-container">
    <!-- 对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="40%" v-dialogDrag append-to-body>
      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="120px">
        <el-form-item label="交出方" prop="name">
          <el-input disabled v-model="oldStaff.name"/>
        </el-form-item>
        <el-form-item label="接收方" prop="newUserId">
          <el-select
            v-model="formData.newUserId"
            placeholder="请选择接收方"
            filterable
            style="width: 100%"
            clearable
            :filter-method="searchOption"
          >
            <el-option
              v-for="item in options"
              :key="item.userId"
              :label="item.name"
              :value="item.userId"
            >
              <div class="options">
                <span>姓名:{{ item.name }}</span>
                <span>工号:{{ item.workNo }}</span>
                <span>手机:{{ item.tel }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交接时间" prop="changeTime">
          <el-date-picker clearable v-model="formData.changeTime" type="date" value-format="timestamp"
                          placeholder="选择交接时间"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formData.remark"/>
        </el-form-item>
        <el-form-item label="附件" prop="fileUrls">
          <file-upload v-model="formData.fileUrls"></file-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as StaffApi from '@/api/company/staff'
import FileUpload from '@/components/FileUpload'
import * as StaffChangeApi from '@/api/company/staffChange'

export default {
  name: 'StaffChangeForm',
  components: {
    FileUpload
  },
  data() {
    return {
      // 弹出层标题
      dialogTitle: '一键交接员工',
      // 是否显示弹出层
      dialogVisible: false,
      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
      formLoading: false,
      // 表单参数
      formData: {
        fileUrls: undefined,
        remark: undefined,
        oldUserId: undefined,
        newUserId: undefined,
        changeTime: undefined
      },
      // 表单校验
      formRules: {
        newUserId: [{ required: true, message: '接收方不能为空', trigger: 'blur' }],
        changeTime: [{ required: true, message: '交接时间不能为空', trigger: 'blur' }]
      },
      oldStaff: {
        name: '',
        userId: ''
      },
      newStaff: [],
      staffChangList: [],
      options: [],
    }
  },
  methods: {
    /** 获取所有的员工 */
    async listStaff() {
      const res = await StaffApi.getStaffList()
      this.newStaff = res.data.filter(item => item.userId !== this.oldStaff.userId)
      this.options = this.newStaff
    },
    /** 打开弹窗 */
    async open(id) {
      this.reset()
      const res = await StaffApi.getStaff(id)
      this.oldStaff = res.data
      this.formData.oldUserId = this.oldStaff.userId
      this.formData.changeTime = new Date()
      await this.listStaff()
      this.dialogVisible = true
    },
    /** 提交按钮 */
    async submitForm() {
      // // 校验主表
      await this.$refs['formRef'].validate()
      this.formLoading = true
      try {
        await StaffChangeApi.createStaffChange(this.formData)
        this.$modal.msgSuccess('交接成功')
        this.dialogVisible = false
        this.$emit('success')
      } finally {
        this.formLoading = false
      }
    },
    /** 表单重置 */
    reset() {
      this.formData = {
        fileUrls: undefined,
        remark: undefined,
        oldUserId: undefined,
        newUserId: undefined,
        changeTime: undefined
      }
      this.resetForm('formRef')
    },
    searchOption(val) {
      this.options = this.newStaff.filter(item => (
        item.name.toLowerCase().includes(val.toLowerCase()) ||
            item.workNo.includes(val) ||
            item.tel.includes(val)
      ))
    }
  }
}
</script>

<style scoped lang="scss">
.options {
  display: flex;
  justify-content: space-between;
}
</style>