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

<template>
  <el-dialog :title="title" append-to-body :modelValue="openShow" width="30%" @close="closeDialog">
    <el-form :model="executeForm" :rules="executeRules" ref="executeForm" label-width="100">
      <el-form-item label="项目名称">
        <el-input disabled v-model="detailForm.projectName"></el-input>
      </el-form-item>
      <el-form-item label="项目负责人">
        <el-input disabled v-model="detailForm.projectHead.userName"></el-input>
      </el-form-item>
      <el-form-item label="里程碑计划">
        <el-input disabled v-model="executeForm.milestonePlan"></el-input>
      </el-form-item>
      <el-form-item label="里程碑负责人">
        <el-input disabled v-model="executeForm.milestoneMan.userName"></el-input>
      </el-form-item>
      <el-form-item label="项目目标">
        <el-input disabled v-model="executeForm.fmProjectApplication.projectTarget"></el-input>
      </el-form-item>
      <el-form-item label="预期效果">
        <el-input disabled v-model="executeForm.fmProjectApplication.desiredResult"></el-input>
      </el-form-item>
      <el-form-item label="项目背景">
        <el-input disabled v-model="executeForm.fmProjectApplication.projectBackcloth"></el-input>
      </el-form-item>
      <el-form-item label="里程碑节点">
        <el-input disabled v-model="executeForm.milestoneNode"></el-input>
      </el-form-item>
      <el-form-item label="执行类型" prop="executeResult">
        <el-select
          :disabled="subTitle == '核查' || subTitle == '核准'"
          v-model="executeForm.executeResult"
        >
          <el-option label="延期" :value="1"></el-option>
          <el-option label="终止" :value="2"></el-option>
          <el-option label="完成" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="延期时间" v-if="executeForm.executeResult == 1">
        <el-date-picker
          :disabled="subTitle == '核查' || subTitle == '核准'"
          style="width: 100%"
          v-model="executeForm.delayTime"
          type="datetime"
          placeholder="选择日期时间"
        />
      </el-form-item>
      <el-form-item label="里程碑描述" prop="milestoneMemo">
        <el-input
          :disabled="subTitle == '核查' || subTitle == '核准'"
          type="textarea"
          v-model="executeForm.milestoneMemo"
        ></el-input>
      </el-form-item>
      <el-form-item label="里程碑进展" prop="evolve">
        <el-input
          :disabled="subTitle == '核查' || subTitle == '核准'"
          type="textarea"
          v-model="executeForm.evolve"
        ></el-input>
      </el-form-item>
      <el-form-item label="下一步计划" prop="lastPlan">
        <el-input
          :disabled="subTitle == '核查' || subTitle == '核准'"
          type="textarea"
          v-model="executeForm.lastPlan"
        ></el-input>
      </el-form-item>
      <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-form-item label="核查人" v-if="subTitle == '执行'">
        <el-select v-model="executeForm.userId">
          <el-option v-for="item in memberList" :label="item.realName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="核查结果" v-if="subTitle == '核查'">
        <el-select v-model="executeForm.checkResult">
          <el-option label="通过" value="1"></el-option>
          <el-option label="不通过" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核人" v-if="subTitle == '核查' && executeForm.checkResult == 1">
        <el-select v-model="executeForm.userId">
          <el-option v-for="item in memberList" :label="item.realName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <div v-if="subTitle == '核准'" style="color: #ffc300; margin-bottom: 10px">
        评价等级分为:优(95以上，节点推进超前、完成质量高)、良(85-95分，节点推进正常、质量较好)、中(75-84，节点推进轻微拖期，完成质量一般)、差(75以下，进展滞后，完成质量较差)
      </div>
      <el-form-item v-if="subTitle == '核准'" label="评价分数">
        <el-input v-model="executeForm.score"></el-input>
      </el-form-item>
      <el-form-item v-if="subTitle == '核准'" label="评语">
        <el-input type="textarea" v-model="executeForm.evaluate"></el-input>
      </el-form-item>

      <el-form-item label="审核意见" prop="checkOpinion" label-width="80px">
        <el-input
          type="textarea"
          placeholder="请输入审核意见"
          v-model="checkForm.checkOpinion"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitExecute">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { getRoleUserList } from '@/api/processManagement/taskDispatch';
import { projectExecute, projectCheck, projectApprove } from '@/api/flowManagement/index';

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    rowItem: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      openShow: false,
      memberList: [],
      executeForm: {},
      executeRules: {
        executeResult: [{ required: true, message: '请选择执行类型', trigger: 'blur' }],
        milestoneMemo: [{ required: true, message: '请填写里程碑描述', trigger: 'blur' }],
        evolve: [{ required: true, message: '请填写里程碑进展', trigger: 'blur' }],
        lastPlan: [{ required: true, message: '请填写下一步计划', trigger: 'blur' }],
      },
    };
  },
  mounted() {
    this.openShow = this.showDialog;
    this.executeForm = this.rowItem;
    this.getRoleUserList();
  },
  methods: {
    // 获取人员
    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.executeDialog = false;
          if (this.title == '执行') {
            projectExecute(this.executeForm).then(res => {
              this.$message.success('执行成功');
              this.closeDialog();
            });
          }
          if (this.title == '核查') {
            projectCheck(this.executeForm).then(res => {
              this.$message.success('执行成功');
              this.closeDialog();
            });
          }
          if (this.title == '核准') {
            projectApprove(this.executeForm).then(res => {
              this.$message.success('执行成功');
              this.closeDialog();
            });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped></style>