xiaoshi_system/src/views/components/dialog/examine.vue

<template>
  <!-- 审核任务弹窗 -->
  <div>
    <el-dialog :title="title" :visible.sync="showTask" width="500px" @close="handleCloseTask" :append-to-body="true"
      :close-on-click-modal="false">
      <el-form :model="form" :rules="TaskRules" ref="form" label-width="120px">
        <el-form-item label="任务名称：" prop="name">
          <el-input v-model="form.name" type="text" placeholder="请输入任务名称" />
        </el-form-item>
        <el-form-item v-if="isShow" :label="handlerLabel + '：'" prop="handlerName">
          <el-autocomplete v-model="form.handlerName" value-key="name" v-SelectLazyLoading="personnelLoad"
              :fetch-suggestions="querySearchPersonnel" :placeholder="handPlaceholder" :trigger-on-focus="false"
              @select="handleSelectPersonnel" @blur="handleBlur(form.handlerName)" style="width: 100%;"></el-autocomplete>
        </el-form-item>
        <el-form-item label="截止日期：" prop="deadLineTime">
          <el-date-picker style="width:100%" v-model="form.deadLineTime" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注：" prop="description">
          <el-input v-model="form.description" type="textarea" placeholder="输入备注" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseTask">取 消</el-button>
        <el-button type="primary" @click="submitTask">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default:'添加审核任务'
    },
    isShow:{
      type: Boolean,
      default:true,
    },
    handlerLabel: {
      type: String,
      default:'审核人'
    },
    handPlaceholder: {
      type: String,
      default:'请输入审核人（外部审核人请直接输入邮箱）'
    },
  },
  data() {
    const isTime = (rule, value, callback) => {
      if (this.isEndTime) {
        this.isEndTimes = Date.parse(new Date)
      }

      let b = Date.parse(value)
      if (value) {
        if (b < this.isEndTimes) {
          callback(new Error('禁止选择现在及以前时间，请重新选择'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请选择时间'))
      }
    }
    return {
      isEndTime: true,
      isEndTimes: null,
      // 审核任务表单数据
      form: {},
      showTask: false,
      // 任务表单校验
      TaskRules: {
        name: [{ required: true, message: '请输入任务名称', trigger: 'blur' },],
        handlerName: [{ required: true, message: '请选择审核人', trigger: 'change' },],
        deadLineTime: [{ required: true, validator: isTime, trigger: 'change' }],
      },
      //人员列表懒加载
      personnelList: {
        queryParams: {
          current: 1,
          size: 10
        },
        loading: false,
        name: '',
        data: [],
      },
    }
  },
  computed: {},
  mounted() {

  },
  methods: {
    open(name) {
      if (name) {
        this.form.name = `${name}-审核任务`
      }
      // 任务类型
      this.showTask = true
    },
    // 确定
    submitTask() {
      this.isEndTime = false
      this.$refs.form.validate((valid) => {
        if (valid) {
          /**类型
           * 0标引任务
           * 1项目开卷审核任务
           * 2检索条件任务
           * 3对比任务
           * 4协同任务
           * 5任务审核任务
           * 6文件分配任务审核
           * 7文件列表审核
           */
          if (this.isShow) {
            if (this.form.handlerName.includes('@')) {//是邮箱为1
              this.form.handlerType = 1
            } else {//是id为0
              this.form.handlerType = 0
            }
          }
          this.$emit('save',this.form)
        }
      })
    },


    // 取消
    handleCloseTask() {
      this.$refs.form.resetFields()
      this.form = {}
      this.showTask = false
      this.isEndTime = true
    },
    /**
    * 人员
    */
    // 懒加载人员方法
    personnelLoad() {
      if (this.personnelList.queryParams.current * this.personnelList.queryParams.size >= this.personnelList.queryParams.total) {
        return false
      }
      this.personnelList.queryParams.current++
      this.questionPersonnel()
    },
    // 查询人员
    async questionPersonnel() {
      let params = {
        ...this.personnelList.queryParams,
        name:this.personnelList.name
      }
      await this.$api.getPermissionPersonnel(params).then(res => {
        if (res.code == 200) {
          this.personnelList.data.push(...res.data)
          this.personnelList.queryParams.total = res.pageColumn.total
          this.personnelList.cb(this.personnelList.data);
        }
      })
    },
    //获取下拉建议人员数据
    async querySearchPersonnel(queryString, cb) {
      this.personnelList.queryParams.current = 1
      this.personnelList.name = queryString
      this.personnelList.data = []
      this.personnelList.cb = cb
      await this.questionPersonnel()
    },
    // 人员输入框失焦
    handleBlur(val) {
      if (this.form.handlerName.includes('@')) {
        this.form.handler = val
      }
    },
    // 人员输入框选择
    handleSelectPersonnel(val) {
      this.form.handler=val.id
    },

  },
}
</script>

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