Merge branch 'dev' of http://114.132.189.42:9002/r/lims-ruoyi-before into dev

spring

2025-02-28 dc3af0cbb4a6d105bdff497b510cc0a87b3e8d0a

 src/views/CNAS/personnel/personnelInfo/tabs/job-responsibilities.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,395 @@
<!-- å²—位职责 -->
<template>
  <div class="view">
    <div style="display: flex;justify-content: space-between;">
      <el-form ref="page" size="small" :inline="true">
        <el-form-item label="员工">
          <el-input v-model="userName" clearable placeholder="请输入员工" size="small" style="width: 20vh;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="refreshTable">查询</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button size="small" type="primary" @click="addPost">新增</el-button>
        <!--        <el-button size="small" type="primary">导出excel</el-button>-->
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" v-loading="tableLoading" height="66.5vh" style="width: 100%">
        <el-table-column label="序号" type="index" width="60"></el-table-column>
        <el-table-column label="员工编号" min-width="120" prop="account"></el-table-column>
        <el-table-column label="岗位名称" min-width="180" prop="postName"></el-table-column>
        <el-table-column label="所属部门" min-width="180" prop="departLimsName"></el-table-column>
        <el-table-column label="工作目标" min-width="180" prop="jobObjective"></el-table-column>
        <el-table-column label="岗位职责" min-width="180" prop="jobResponsibilities"></el-table-column>
        <el-table-column label="任职人" min-width="180" prop="incumbentName"></el-table-column>
        <el-table-column label="任职人审核日期" min-width="180" prop="incumbentDate"></el-table-column>
        <el-table-column label="主管" min-width="180" prop="supervisorName"></el-table-column>
        <el-table-column label="主管审核日期" min-width="180" prop="supervisorDate"></el-table-column>
        <el-table-column fixed="right" label="操作" width="140" align="center">
          <template v-slot="scope">
            <el-button v-if="!isDepartment || scope.row.currentState === '关闭'" size="small" type="text"
                       @click="handleViewClick(scope.row, 'view')">查看
            </el-button>
            <el-button v-if="isDepartment && scope.row.currentState !== '关闭'" size="small" type="text"
                       @click="handleViewClick(scope.row, 'edit')">编辑
            </el-button>
            <el-button size="small" type="text" @click="downLoadPost(scope.row)">导出</el-button>
            <el-button v-if="isDepartment" size="small" style="color: #f56c6c" type="text" @click="deletePost(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
                     :total="search.total" layout="->,total, sizes, prev, pager, next, jumper"
                     background
                     style="margin-top: 10px"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <!-- æ–°å¢žå²—位职责 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible"
               title="新增岗位职责"
               width="50%" @close="resetForm">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step v-for="(v, i) in steps" :key="i" :title="v" style="cursor:pointer"
                 @click.native="choiceStep(i)"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <div>
          <el-card style="margin-top: 1em; height: 40vh; overflow-y: scroll;">
            <!-- æ–°å¢žè®¾å¤‡äº‹è®°å½•å¡ç‰‡ -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="岗位名称：" prop="postName">
                  <el-input v-model="form.postName" :disabled="currentStep !== 0 || operationType === 'view'"
                            size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="工作目标：" prop="jobObjective">
                  <el-input v-model="form.jobObjective" :disabled="currentStep !== 0 || operationType === 'view'"
                            size="small"
                            type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="岗位职责：" prop="jobResponsibilities">
                  <el-input v-model="form.jobResponsibilities" :disabled="currentStep !== 0 || operationType === 'view'"
                            size="small"
                            type="textarea"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="currentStep === 0 || operationType === 'view'" :span="12">
                <el-form-item
                  :rules="[{ required: currentStep === 0, message: '请选择任职人', trigger: 'change' }]"
                  label="任职人："
                  prop="incumbentId">
                  <el-select v-model="form.incumbentId" :disabled="operationType === 'view'" clearable
                             filterable
                             placeholder="请选择任职人" size="small" style="width: 100%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="currentStep === 1 || operationType === 'view'" :span="12">
                <el-form-item
                  :rules="[{ required: currentStep === 1, message: '请选择主管', trigger: 'blur' }]"
                  label="主管："
                  prop="supervisorId">
                  <el-select v-model="form.supervisorId" :disabled="currentStep !== 1 || operationType === 'view'"
                             clearable filterable
                             placeholder="请选择主管" size="small" style="width: 100%;">
                    <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-row style="margin-top: 1em;">
            <el-col :span="4">
              æ“ä½œäººï¼š{{ form.submitPerson }}
            </el-col>
            <el-col :span="6">
              æ—¥æœŸï¼š{{ form.submitDate }}
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="currentStep !== 0 && currentStep !== 3" @click="submitForm('3reject')">驳回</el-button>
        <el-button v-if="currentStep === 0" @click="submitForm('2save')">保存</el-button>
        <el-button v-if="currentStep !== 3" type="primary"
                   @click="submitForm('1submit')">{{ currentStep === 0 ? '提交' : '通过' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from '@/utils/date'
import {
  exportPersonJobResponsibilities, personJobResponsibilitiesDelete,
  personJobResponsibilitiesSave,
  personJobResponsibilitiesSelect
} from "@/api/cnas/personal/personJobResponsibilities";
import {selectUserCondition} from "@/api/cnas/resourceDemand/facilitiesEnvironment/facilitiesAndEnvironment";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      userName: '',
      tableData: [],
      tableLoading: false,
      responsibleOptions: [],
      search: {
        size: 20,
        current: 1,
        total: 0
      },
      dialogVisible: false,
      currentStep: 0, // æ­¥éª¤æ¡æ˜¾ç¤ºç¬¬å‡ æ­¥
      currentStepClick: 0, // ç‚¹å‡»æ­¥éª¤æ¡å˜åŒ–
      operationType: '',
      steps: ['提交', '任职人确认', '主管确认'],
      form: {
        postName: '', // å²—位名称
        jobObjective: '', // å·¥ä½œç›®æ ‡
        jobResponsibilities: '', // å²—位职责
        incumbentId: '', // ä»»èŒäºº
        supervisorId: '' // ä¸»ç®¡
      },
      rules: {
        postName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
        jobObjective: [{ required: true, message: '请输入工作目标', trigger: 'blur' }],
        jobResponsibilities: [{ required: true, message: '请输入岗位职责', trigger: 'blur' }],
        incumbentId: [{ required: true, message: '请选择任职人', trigger: 'change' }],
        supervisorId: [{ required: true, message: '请选择主管', trigger: 'change' }]
      }
      // departId: 0
    };
  },
  props: {
    departId: {
      type: Number,
      default: () => {
        return null;
      }
    },
    isDepartment: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.getPostList(this.departId);
  },
  methods: {
    addPost() {
      this.dialogVisible = true;
      this.form = {
        postName: '', // å²—位名称
        jobObjective: '', // å·¥ä½œç›®æ ‡
        jobResponsibilities: '', // å²—位职责
        incumbentId: '', // ä»»èŒäºº
        supervisorId: '', // æ“ä½œäºº
        submitPerson: '', // ä¸»ç®¡
        submitDate: '', // æ—¥æœŸ
        currentStep: 0 // æ—¥æœŸ
      };
      this.currentStep = 0;
      this.getUserList();
    },
    // æŸ¥è¯¢åˆ—表信息
    getPostList(userId) {
      this.search.userId = userId;
      const params = this.isDepartment ? {
        userName: this.userName,
        departmentId: this.search.userId,
        size: this.search.size,
        current: this.search.current,
      }: {
        userName: this.userName,
        userId: this.search.userId,
        size: this.search.size,
        current: this.search.current,
      }
      this.tableLoading = true
      personJobResponsibilitiesSelect(params).then(res => {
        this.tableLoading = false
        this.tableData = res.data.records;
        this.search.total = res.data.total;
      }).catch(err => {
        this.tableLoading = false
      })
    },
    //提交表单
    async submitForm(saveState) {
      this.$refs.form.validate((valid) => {
        if (valid === true || saveState !== '1submit') {
          // ç»™å½“前环节设置创建人与时间
          let user = this.nickName;
          const dateTime = dateFormat(new Date());
          // èŽ·å–当前环节操作人与日期
          switch (this.currentStep) {
            case 0:
              this.form.submittingOperator = user.name;
              this.form.submittingDate = dateTime;
              break;
            case 1:
              this.form.incumbentOperator = user.name;
              this.form.incumbentDate = dateTime;
              break;
            case 2:
              this.form.supervisorOperator = user.name;
              this.form.supervisorDate = dateTime;
              break;
            default:
              break;
          }
          // èŽ·å–当前环节负责人
          switch (saveState === '3reject' ? this.currentStep - 1 : this.currentStep) {
            case 1:
              this.form.currentResponsible = this.form.submittingOperator;
              break;
            case 2:
              this.form.currentResponsible = this.form.incumbentOperator;
              break;
            default:
              break;
          }
          let currentStepAction;
          // è®¾ç½®è¯¥æ“ä½œåˆ¤æ–­æ˜¯å¦ä¸ºæäº¤ï¼Œä¿å­˜ï¼Œé©³å›žï¼Œé€šè¿‡
          switch (saveState) {
            // æäº¤ï¼Œé€šè¿‡
            case '1submit':
              currentStepAction = this.currentStep + 1;
              break;
            // ä¿å­˜
            case '2save':
              currentStepAction = this.currentStep;
              break;
            // é©³å›ž
            case '3reject':
              currentStepAction = this.currentStep - 1;
              break;
            default:
              break;
          }
          // èŽ·å–当前状态
          this.form.currentState = currentStepAction === 3 ? '关闭' : this.steps[currentStepAction];
          personJobResponsibilitiesSave(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success('提交成功');
              this.getPostList(this.departId);
              this.dialogVisible = false;
            }
          });
        } else {
          let step = this.steps[this.currentStep];
          this.$message.warning(step + '  æµç¨‹ä¸­æœ‰å¿…填项未填！');
        }
      });
    },
    // ç¼–辑
    handleViewClick(row, type) {
      this.operationType = type;
      this.getUserList();
      row.incumbentId = Number(row.incumbentId);
      this.form = { ...row };
      switch (row.currentState) {
        case '提交':
          this.currentStep = 0;
          break;
        case '任职人确认':
          this.currentStep = 1;
          this.form.submitPerson = row.submittingOperator;
          this.form.submitDate = row.submittingDate;
          break;
        case '主管确认':
          this.currentStep = 2;
          this.form.submitPerson = row.incumbentOperator;
          this.form.submitDate = row.incumbentDate;
          break;
        case '关闭':
          this.currentStep = 3;
          this.form.submitPerson = row.supervisorOperator;
          this.form.submitDate = row.supervisorDate;
          break;
        default:
          break;
      }
      this.form.currentState = this.currentStep;
      this.currentStepClick = this.currentStep === 3 ? 0 : this.currentStep
      console.log('this.form---', this.form);
      this.dialogVisible = true;
    },
    // ä¸‹è½½å²—位职责
    downLoadPost(row) {
      exportPersonJobResponsibilities({id:row.id}).then(res => {
        const blob = new Blob([res],{ type: 'application/octet-stream' });
        this.$download.saveAs(blob, row.incumbentName+'-岗位职责'+'.docx');
        this.$message.success('导出成功')
      })
    },
    // åˆ é™¤å²—位职责
    deletePost(row) {
      this.$confirm('此操作将永久删除此数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        personJobResponsibilitiesDelete({id: row.id}).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功');
            this.getPostList(this.departId);
          }
        });
      }).catch(() => {
        this.$message.error('删除失败');
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    refreshTable() {
      this.getPostList(this.departId);
    },
    // èŽ·å–负责人信息接口
    getUserList() {
      selectUserCondition().then(res => {
        if (res.code == 200) {
          this.responsibleOptions = res.data
        }
      })
    },
    choiceStep(index) {
      this.currentStepClick = index;
    },
    handleSizeChange(val) {
      this.search.size = val;
      this.getPostList(this.departId);
    },
    handleCurrentChange(val) {
      this.search.current = val;
      this.getPostList(this.departId);
    }
  },
  watch: {
    departId: {
      handler(newId, oldId) {
        this.getPostList(newId);
      }
    }
  },
  computed: {
    ...mapGetters(['nickName'])
  },
};
</script>
<style scoped>
</style>