yudao-ui-saas/src/views/oa/turnover/edit.vue

<template>
  <div class="contents">
    <el-form :model="form" label-position="top" :rules="rules" ref="form" label-width="80px">
      <el-form-item label="离职人" prop="employeeName">
        <el-input v-model="form.employeeName" placeholder='点击选择' readonly @click.native="openSingle"></el-input>
      </el-form-item>
      <el-form-item label="离职人Id" style="display: none;">
        <el-input v-model="form.employeeId" placeholder='离职人Id' disabled></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-input v-model="form.deptName" placeholder='部门' disabled></el-input>
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="form.position" placeholder='职位' disabled></el-input>
      </el-form-item>
       <el-form-item label="手机号">
        <el-input v-model="form.employeePhone" placeholder='手机号' disabled></el-input>
      </el-form-item>
      <el-form-item label="入职日期">
        <el-input v-model="form.entryDate" placeholder='入职日期' disabled></el-input>

      </el-form-item>
      <el-form-item label="离职日期" prop="turnoverDate">
        <el-date-picker value-format="yyyy-MM-dd" v-model="form.turnoverDate" type="date" placeholder="请选择日期"
          style="width: 100%;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="离职原因" prop="turnoverReason">
        <el-select v-model="form.turnoverReason" filterable allow-create default-first-option placeholder="请选择离职原因"
          style="width: 100%;">
          <el-option v-for="dict in turnoverReasonListOpen" :key="dict.value" :label="dict.label" :value="dict.value"/>
        </el-select>
      </el-form-item>

      <el-form-item label="附件">
        <el-upload :action="fileUrl" :headers="headers" :file-list="files" :on-success="handleFileSuccessCite"
          :before-upload="beforeUploadFile" :on-remove="handleRemove">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="备注">
        <el-input maxlength="200" rows="4" show-word-limit type="textarea" v-model="form.remarks" placeholder="请填写备注" />
      </el-form-item>
      <el-form-item label="审批人" prop="peopleList">
        <el-input type="textarea" v-model="form.peopleList" style="display: none;" />
        <el-button class="button-new-tag" @click="openMultiple">+ 添加</el-button>
        <span :key="tag" v-for="tag in nikeNamelist">
          <i class="el-icon-arrow-right"></i>
          <el-tag type="info" closable :disable-transitions="false" @close="handleClose(tag)">
            <span class="user-avatar">{{ tag.substring(0, 1) || 'U' }}</span>
            {{ tag }}
          </el-tag>
        </span>

      </el-form-item>
      <el-form-item label="流程动态" v-if="tasks.length > 0">
        <el-timeline>
          <el-timeline-item v-for="(item, index) in tasks" :key="index" :icon="getTimelineItemIcon(item)"
            :type="getTimelineItemType(item)">
            <p style="font-weight: 700">任务：{{ item.name }}</p>
            <el-card :body-style="{ padding: '10px' }">
              <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px;">
                审批人：{{ item.assigneeUser.nickname }}
                <el-tag type="info" size="mini">{{ item.assigneeUser.deptName }}</el-tag>
              </label>
              <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
              <label style="color:#8a909c; font-weight: normal">{{ parseTime(item.createTime) }}</label>
              <label v-if="item.endTime" style="margin-left: 30px;font-weight: normal">审批时间：</label>
              <label v-if="item.endTime" style="color:#8a909c;font-weight: normal"> {{
                parseTime(item.endTime)
                }}</label>
              <!-- <label v-if="item.durationInMillis" style="margin-left: 30px;font-weight: normal">耗时：</label>
              <label v-if="item.durationInMillis" style="color:#8a909c;font-weight: normal">
                {{ getDateStar(item.durationInMillis) }} </label> -->
              <p v-if="item.reason">
                <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-form-item>
      <el-form-item>
        <div v-if="name=='todo'">
          <el-button type="primary" @click="onReCommit()" v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
          <el-button type="warning" @click="onClose()" v-loading.fullscreen.lock="fullscreenLoading">关闭</el-button>
        </div>
       <div v-else>
        <el-button type="primary" @click="onSubmit()" v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
        <el-button @click="onSave()" v-loading.fullscreen.lock="fullscreenLoading">暂存</el-button>
        <el-button v-if="form.auditStatus==0" type="danger" @click="onDelete()" v-loading.fullscreen.lock="fullscreenLoading">删除</el-button>
       </div>
      </el-form-item>
    </el-form>
    <PeopleSelect ref="peopleSelect" type="multiple" :isCheck="true" :open="multiplePeopleOpen"
      @cancel="multiplePeopleOpen = false" @submit="submitMultiple"></PeopleSelect>
    <PeopleSelect ref="peopleSelect" type="single" :isCheck="true" :open="singlePeopleOpen"
      @cancel="singlePeopleOpen = false" @submit="submitSingle"></PeopleSelect>

  </div>

</template>

<script>
import { getOpenDicts } from "@/api/system/tenantDict/data";
import { getDetail, create,reCommit, save, deleteById,closeById } from "@/api/oa/turnover"
import {getDate} from "@/utils/dateUtils";
import { getEmployeeInfo } from "@/api/system/user";
import { listDept } from "@/api/system/dept";
import PeopleSelect from "@/components/PeopleSelect/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getBaseHeader } from "@/utils/request";
export default {
  name: 'Index',
  components: {
    PeopleSelect,
    Treeselect,
  },
  props: {
    id: {
      type: [String, Number],
      default: undefined
    },
    name: {
      type: String,
      default: undefined
    },
  },
  data() {
    return {
      turnoverReasonListOpen:[],
      fullscreenLoading:false,
      tasks:[],
      loading:false,
      files: [],
      // 设置上传的请求头部
      headers: getBaseHeader(),
      // 上传的地址
      fileUrl: process.env.VUE_APP_BASE_API + '/admin-api/infra/file/uploaData',
      // fileUrl: 'http://192.168.100.249:48080/admin-api/infra/file/uploaData',
      // 部门树选项
      postOptions: [],
      deptOptions: [],
      nikeNamelist: [],
      options: [{
        value: '个人原因',
        label: '个人原因'
      }, {
        value: '家庭原因',
        label: '家庭原因'
      }, {
        value: '其他',
        label: '其他'
      }],
      form: {
        employeeName: undefined,
        employeeId: undefined,
        deptName: undefined,
        position: undefined,
        employeePhone:undefined,
        entryDate: undefined,

        turnoverDate: undefined,
        turnoverReason: undefined,
        files: undefined,
        remarks: undefined,
        peopleList: '',
      },


      rules: {
        employeeName: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        turnoverDate: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],

        turnoverReason: [
          { required: true, trigger: "blur", message: "请选择离职原因" }
        ],
        peopleList: [
          { required: true, message: '请选择审批人', }
        ]
      },
      status: true,
      //是否打开选人组件，默认不打开
      multiplePeopleOpen: false,
      singlePeopleOpen: false,
      queryParams: {
        name: undefined,
        status: undefined
      },
    }
  },

  created() {
    this.getDeptList();
  },
  watch: {
    id: {
      immediate: true,
      handler(val) {
        if(val){
          this.getDetail(val);
        }else{
          // this.getUser();
        }
      }
    }
  },
  methods: {
    getDateStar(ms) {
      return getDate(ms);
    },
    getEmployee() {
      getEmployeeInfo(this.form.employeeId).then(response => {
        let employeeInfo = response.data;
        this.form.deptName = employeeInfo.deptName;
        this.form.position = employeeInfo.position;
        this.form.employeePhone = employeeInfo.phone;
        this.form.entryDate = employeeInfo.entryDate;
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      let fileIds = [];
      for (let i in fileList) {
        let id = fileList[i].response.data.id;
        fileIds.push(id);
      }
      this.form.fileIdList = fileIds;
    },
    beforeUploadFile(file) {
      console.log(file);
      const size = file.size / 1024 / 1024;
      console.log(size);
      if (size > 5) {
        this.$message.error("文件大小不能超过5MB！");
        return false;
      }
    },
    handleFileSuccessCite(res, file, fileList) {
      console.log(file, fileList);
      console.log("------", "==========");
      console.log("res = ", res);

      let fileIds = [];
      for (let i in fileList) {
        let response = fileList[i].response;
        if (response.errno && response.errno != "0") {
          this.$message.error("该文件上传失败,已被移除,请重新上传!");
          // 上传失败移除该 file 对象
          fileList.splice(i, 1);
        } else {
          let id = fileList[i].response.data.id;
          fileIds.push(id);
        }
      }
      this.form.fileIdList = fileIds;
    },
    /** 获得表单信息 */
    getDetail(val) {
      this.$parent.$parent.detailLoading = true;
      getDetail(val).then(response => {
        this.$parent.$parent.detailLoading = false;
        this.form = response.data;
        let files = response.data.fileList;
        if (files) {
          this.files = [];
          for (let i in files) {
            let url = files[i].url;
            let name = files[i].name;
            let id = files[i].id;

            this.files.push({
              name: name,
              url: url,
              response: { error: "0", data: { url: url, id: id } },
            });
          }
        }
       
        if(response.data.auditUserList){
          let auditUserList = response.data.auditUserList;
          let peopleList = [];
          let nikeNamelist = [];
          auditUserList.map(item => {
            peopleList.push(item.id);
            nikeNamelist.push(item.nickname)
          });
          this.$set(this.form, 'peopleList', peopleList.join(','));
          this.nikeNamelist = nikeNamelist;
        } else{
          this.$set(this.form, 'peopleList', '');
          this.nikeNamelist = [];
        }
        this.tasks = response.data.auditRecordList?response.data.auditRecordList:[];
        
      });
    },
    /** 查询部门列表 */
    getDeptList() {
      listDept(this.queryParams).then(response => {
        this.deptOptions = this.handleTree(response.data, "id");
      });
      getOpenDicts('tenant_turnover_reason').then(response => {
        this.turnoverReasonListOpen = response.data;
      })
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    //提交
    onSubmit() {
      console.log(this.form);
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log(this.form);
          this.form.startUserSelectAssignees = this.form.peopleList.split(',');
          this.form.auditPass = true;
          this.fullscreenLoading = true;
          create(this.form).then(response => {
            this.fullscreenLoading = false;
            this.$modal.msgSuccess("提交成功");
            if(this.id){
              this.$parent.$parent.closeEdit();
            }else{
              this.$parent.$parent.setStatus(2);
            }
          }).catch(() => {
            this.fullscreenLoading = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
     //驳回或撤回后再次提交通用用事项审批流程信息
     onReCommit() {
      console.log(this.form);
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log(this.form);
          this.form.startUserSelectAssignees = this.form.peopleList.split(',');
          this.form.auditPass = true;
          this.fullscreenLoading = true;
          reCommit(this.form).then(response => {
            this.fullscreenLoading = false;
            this.$modal.msgSuccess("提交成功");
            if(this.id){
              this.$parent.$parent.closeEdit();
            }else{
              this.$parent.$parent.setStatus(2);
            }
          }).catch(() => {
            this.fullscreenLoading = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //暂存
    onSave() {
          if(this.form.peopleList){
            this.form.startUserSelectAssignees = this.form.peopleList.split(',');
          }
          this.form.auditPass = false;
          this.fullscreenLoading = true;
          save(this.form).then(response => {
            this.fullscreenLoading = false;
            this.$modal.msgSuccess("暂存成功");
            if(this.id){
              this.$parent.$parent.closeEdit();
            }else{
              this.$parent.$parent.setStatus(2);
            }
          }).catch(() => {
            this.fullscreenLoading = false;
          });
    },
    //暂存删除
    async onDelete() {
      this.$modal.confirm('是否确认删除?').then(() => {
        this.fullscreenLoading = true;
        deleteById(this.id).then(response => {
          this.fullscreenLoading = false;
          this.$modal.msgSuccess("删除成功");
          this.$parent.$parent.closeEdit();
        })
      }).catch(() => { });
    },
     //暂存删除
     async onClose() {
      this.$modal.confirm('是否确认关闭?').then(() => {
        this.fullscreenLoading = true;
        closeById(this.id).then(response => {
          this.fullscreenLoading = false;
          this.$modal.msgSuccess("流程已关闭");
          this.$parent.$parent.closeEdit();
        })
      }).catch(() => { });
    },

     // 关闭标签
     handleClose(index) {
      this.nikeNamelist.splice(index, 1);
      let peopleList = this.form.peopleList.split(',');
      peopleList.splice(index, 1);
      this.form.peopleList = peopleList.join(',');
    },
    //打开选人弹窗
    openSingle() {
      this.singlePeopleOpen = true;
    },
    openMultiple() {
      this.multiplePeopleOpen = true;
    },
    //选择人的确定按钮事件 submitPeople(nikeNamelist)方法传参一个默认接收用户昵称数组   submitPeople(peopleList,nikeNamelist)方法传参两个则是接收用户昵称数组和用户账号数组
    submitMultiple(userNamelist, nikeNamelist,userIdList) {
      console.log(userNamelist);
      this.nikeNamelist = nikeNamelist;
      this.form.peopleList = userIdList.join(',');
      this.multiplePeopleOpen = false;
    },
    submitSingle(userNamelist, nikeNamelist,userIdList) {
      console.log(userNamelist);
      this.form.employeeName = nikeNamelist.join();
      this.form.employeeId = userIdList.join();
      this.getEmployee();
      this.singlePeopleOpen = false;
    },
    getTimelineItemIcon(item) {
      if (item.result === 1) {
        return 'el-icon-time';
      }
      if (item.result === 2) {
        return 'el-icon-check';
      }
      if (item.result === 3) {
        return 'el-icon-close';
      }
      if (item.result === 4) {
        return 'el-icon-remove-outline';
      }
      if (item.result === 5) {
        return 'el-icon-back'
      }
      return '';
    },
    getTimelineItemType(item) {
      if (item.result === 1) {
        return 'primary';
      }
      if (item.result === 2) {
        return 'success';
      }
      if (item.result === 3) {
        return 'danger';
      }
      if (item.result === 4) {
        return 'info';
      }
      if (item.result === 5) {
        return 'warning';
      }
      if (item.result === 6) {
        return 'default'
      }
      return '';
    },
  }
}
</script>
<style lang="scss" scoped>
.user-avatar {
  width: 22px;
  height: 22px;
  line-height: 19px;
  font-size: 12px;
  background: #46c26f;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #fff;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 2px;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-right: 10px;
  height: 30px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

ul {
  padding-left: 0px !important;
}

.el-tag+.el-tag {
  margin-left: 10px;
}
</style>