jonhon-mes-web/src/views/flowManagement/milestoneDialog.vue

<template>
  <el-dialog :title="title" append-to-body :modelValue="openShow" width="45%" @close="closeDialog">
    <el-form :model="detailForm" :rules="executeRules" ref="executeForm" label-width="100">
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目名称：">
            <el-input disabled v-model="executeForm.projectName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目负责人：">
            <el-input disabled v-model="executeForm.projectHead"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目背景：">
            <el-input disabled v-model="executeForm.projectBackcloth"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目目标：">
            <el-input disabled v-model="executeForm.projectTarget"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预期效果:">
            <el-input disabled v-model="executeForm.desiredResult"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="里程碑计划:">
            <el-input disabled v-model="detailForm.milestonePlan"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="里程碑负责人:">
            <el-input disabled v-model="detailForm.milestoneMan"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="里程碑节点:">
            <el-input disabled v-model="detailForm.milestoneNode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="执行类型:" prop="executeType">
            <el-select
              :disabled="subTitle == '核查' || subTitle == '核准'"
              v-model="detailForm.executeType"
              @change="executeTypeChange"
            >
              <el-option
                v-for="(item, index) in executeResultList"
                :label="item.dictValue"
                :value="item.dictKey"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="延期时间:" v-if="detailForm.executeType == 1">
            <el-date-picker
              :disabled="subTitle == '核查' || subTitle == '核准'"
              style="width: 100%"
              v-model="detailForm.delayTime"
              type="date"
              placeholder="选择日期时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="里程碑描述:" prop="milestoneMemo">
            <el-input
              :disabled="subTitle == '核查' || subTitle == '核准'"
              type="textarea"
              v-model="detailForm.milestoneMemo"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="里程碑进展:" prop="evolve">
            <el-input
              :disabled="subTitle == '核查' || subTitle == '核准'"
              type="textarea"
              v-model="detailForm.evolve"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="下一步计划:" prop="lastPlan">
            <el-input
              :disabled="subTitle == '核查' || subTitle == '核准'"
              type="textarea"
              v-model="detailForm.lastPlan"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="附件:"
            v-if="subTitle == '执行' || subTitle == '核查' || subTitle == '核准'"
          >
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">不能上传 exe 附件，且不超过 20M</div>
            </el-upload>
            <div v-if="subTitle == '核查' || subTitle == '核准'" class="attachment-list">
              <h4>附件下载</h4>
              <ul>
                <li v-for="(file, index) in existingFiles" :key="index">
                  <a href="javascript:void(0)" @click="downloadFile(file)">{{ file.name }}</a>
                  <el-button type="text" size="small" @click="removeExistingFile(index)"
                    >删除</el-button
                  >
                </li>
              </ul>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="核查人:" v-if="subTitle == '执行'">
            <el-select v-model="detailForm.userId" clearable filterable @change="handleUserChange">
              <el-option
                v-for="item in memberList"
                :label="item.realName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="核查结果:" v-if="subTitle == '核查'">
            <el-select v-model="detailForm.checkResult" clearable filterable>
              <el-option label="通过" value="2"></el-option>
              <el-option label="不通过" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="审核人:" v-if="subTitle == '核查' && detailForm.checkResult == 1">
            <el-select v-model="detailForm.userId" clearable filterable>
              <el-option
                v-for="item in memberList"
                :label="item.realName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <div v-if="subTitle == '核准'" style="color: #ffc300; margin-bottom: 10px">
          评价等级分为:优(95以上，节点推进超前、完成质量高)、良(85-95分，节点推进正常、质量较好)、中(75-84，节点推进轻微拖期，完成质量一般)、差(75以下，进展滞后，完成质量较差)
        </div>
        <el-col :span="24">
          <el-form-item v-if="subTitle == '核准'" label="评价分数:">
            <el-input v-model="detailForm.score"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="subTitle == '核准'" label="评语:">
            <el-input type="textarea" v-model="detailForm.evaluate"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="审核意见:"
            prop="checkOpinion"
            label-width="80px"
            v-if="subTitle == '核准'"
          >
            <el-input
              type="textarea"
              placeholder="请输入审核意见"
              v-model="detailForm.checkOpinion"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog" :loading="loadingShow">取 消</el-button>
        <el-button type="primary" @click="submit" :loading="loadingShow">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { getRoleUserList } from '@/api/processManagement/taskDispatch';
import { projectExecute, projectCheck, projectApprove } from '@/api/flowManagement/index';
import { getDictionary } from '@/api/system/dict';

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    rowItem: {
      type: Object,
      default: () => ({}),
    },
    detailForm: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loadingShow: false,
      openShow: false,
      memberList: [],
      executeForm: {},
      executeRules: {
        executeType: [{ required: true, message: '请选择执行类型', trigger: 'blur' }],
        milestoneMemo: [{ required: true, message: '请填写里程碑描述', trigger: 'blur' }],
        evolve: [{ required: true, message: '请填写里程碑进展', trigger: 'blur' }],
        lastPlan: [{ required: true, message: '请填写下一步计划', trigger: 'blur' }],
      },
      subTitle: '',
      executeResultList: [],
    };
  },
  mounted() {
    this.openShow = this.showDialog;
    this.executeForm = this.rowItem;
    console.log(this.detailForm, 'title');
    this.detailForm.checkResult = null;
    this.subTitle = this.title;
    console.log(this.rowItem, 'rowItem');
    this.getRoleUserList();
    this.getExecuteResult();
  },
  methods: {
    executeTypeChange() {
      this.detailForm.delayTime = '';
    },
    handleUserChange() {
      this.detailForm.checkMan =
        this.memberList.find(item => item.id === this.detailForm.userId)?.realName || '';
    },
    getExecuteResult() {
      getDictionary({ code: 'flow_project_executeResult' }).then(res => {
        this.executeResultList = res.data.data;
      });
    },
    // 获取人员
    getRoleUserList() {
      getRoleUserList({ size: 999999, current: 1 }).then(res => {
        this.memberList = res.data.data.records;
      });
    },
    closeDialog() {
      this.openShow = false;
      this.$emit('closeDialog');
    },
    submit() {
      this.$refs.executeForm.validate(valid => {
        if (valid) {
          this.loadingShow = true;
          //   this.executeDialog = false;
          if (this.title == '执行') {
            let query_ = {
              ...this.detailForm,
              fmProjectApplication: {
                ...this.executeForm,
              },
              attachList: this.existingFiles,
            };
            query_.checkResult = 1;
            query_.fmProjectApplication.approvalStatus = 4;
            query_.fmProjectApplication.delayTime =
              query_.fmProjectApplication.delayTime + ' 00:00:00';
            projectExecute(query_)
              .then(res => {
                this.$message.success('操作成功！');
                this.closeDialog();
                this.loadingShow = false;
              })
              .catch(err => {
                this.loadingShow = false;
              });
          }
          if (this.title == '核查') {
            let query_ = {
              ...this.detailForm,
              fmProjectApplication: {
                ...this.executeForm,
              },
              // attachList: this.existingFiles,
            };
            // if (query_.checkResult == 2) {
            //   query_.fmProjectApplication.approvalStatus = 6;
            // }
            // if (query_.checkResult == 3) {
            //   query_.fmProjectApplication.approvalStatus = 5;
            // }
            console.log(query_, '核查query_');
            projectCheck(query_)
              .then(res => {
                this.$message.success('操作成功！');
                this.closeDialog();
                this.loadingShow = false;
              })
              .catch(err => {
                this.loadingShow = false;
              });
          }
          if (this.title == '核准') {
            let query_ = {
              ...this.detailForm,
              fmProjectApplication: {
                ...this.executeForm,
              },
              // attachList: this.existingFiles,
            };
            if (this.detailForm.score < 75) {
              this.$confirm('评价分数小于75，需要打回待审核状态，确认是否继续?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              })
                .then(() => {
                  // return removePersonAbility(row.id);
                  // query_.fmProjectApplication.approvalStatus = 7;
                  projectApprove(query_)
                    .then(res => {
                      this.$message.success('操作成功！');
                      this.closeDialog();
                      this.loadingShow = false;
                    })
                    .catch(err => {
                      this.loadingShow = false;
                    });
                })
                .catch(() => {
                  this.loadingShow = false;
                });
            } else {
              // query_.fmProjectApplication.approvalStatus = 8;
              projectApprove(query_)
                .then(res => {
                  this.$message.success('操作成功！');
                  this.closeDialog();
                  this.loadingShow = false;
                })
                .catch(err => {
                  this.loadingShow = false;
                });
            }
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>