cmc-oa/oa-ui/src/views/flowable/form/projectProcess/addproject.vue

<!--
 * @Author: ysh
 * @Date: 2024-02-27 14:49:15
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-05-20 16:15:23
-->

<template>
  <div class="project-wrapper">
    <!-- 项目登记 -->
    <h2 style="text-align: center">项目登记</h2>
    <el-form :model="addForm" :rules="rules" label-width="100px" :disabled="disabled">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="项目编号：" prop="projectNumber">
            <el-input v-model="addForm.projectNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同编码：">
            <el-input v-model="contractCode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12"><el-form-item label="项目名称：" prop="projectName">
            <el-input v-model="addForm.projectName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同编号：">
            <el-input v-model="contractNumber" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="项目类型：" prop="projectType">
        <el-input v-model="addForm.projectType"></el-input>
      </el-form-item>
      <el-form-item label="项目级别：" prop="projectLevel">
        <el-radio v-model="addForm.projectLevel" label="0">一般项目</el-radio>
        <el-radio v-model="addForm.projectLevel" label="1">重大项目</el-radio>
      </el-form-item>
      <el-form-item label="项目来源：" prop="projectSource">
        <el-radio v-model="addForm.projectSource" label="0">院内</el-radio>
        <el-radio v-model="addForm.projectSource" label="1">院外</el-radio>
      </el-form-item>
      <el-form-item label="甲方单位：" prop="partyA">
        <el-autocomplete class="inline-input" v-model="addForm.partyA" :fetch-suggestions="querySearch"
          placeholder="请输入内容" style="width: 100%"></el-autocomplete>
        <!-- <el-input v-model="addForm.partyA"></el-input> -->
      </el-form-item>
      <el-form-item label="联系人：" prop="contactPerson">
        <el-input v-model="addForm.contactPerson"></el-input>
      </el-form-item>
      <el-form-item label="联系电话：" prop="telephone">
        <el-input v-model="addForm.telephone"></el-input>
      </el-form-item>
      <el-form-item label="项目概况：">
        <table border="1">
          <tr>
            <td style="width: 180px">工作内容</td>
            <td>等级或比例尺</td>
            <td>单位</td>
            <td>工作量</td>
            <td style="width: 100px">要求完成时间</td>
            <td>备注</td>
          </tr>
          <tr v-for="(work, index) in workList" :key="index">
            <td>
              <el-input v-model="work.content" type="textarea" clearable
                :autosize="{ minRows: 4, maxRows: 10 }"></el-input>
            </td>
            <td>
              <el-select v-model="work.scale" placeholder="请选择" clearable>
                <el-option v-for="dict in dict.type.cmc_scale_grade" :key="dict.value" :label="dict.label"
                  :value="dict.label" />
              </el-select>
            </td>
            <td>
              <el-select v-model="work.unit" placeholder="请选择" clearable>
                <el-option v-for="dict in dict.type.cmc_unit" :key="dict.value" :label="dict.label"
                  :value="dict.label" />
              </el-select>
            </td>
            <td>
              <el-input v-model="work.workload" clearable></el-input>
            </td>
            <td>
              <el-date-picker style="width: 140px" v-model="work.deadline" value-format="yyyy-MM-dd" type="date"
                placeholder="选择日期">
              </el-date-picker>
            </td>
            <td>
              <el-input v-model="work.remark" type="textarea" clearable
                :autosize="{ minRows: 4, maxRows: 10 }"></el-input>
            </td>
            <td>
              <el-button type="danger" icon="el-icon-minus" size="mini" circle
                @click="deletWorkItem(index)"></el-button>
            </td>
          </tr>
        </table>

        <el-button icon="el-icon-plus" size="mini" @click="addWorkList"></el-button>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="addForm.remark" type="textarea" rows="3"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="6" :xs="24" :offset="12">
          <el-form-item label="项目登记人：" prop="registrantUser">
            <span class="auditor"> {{ addForm.projectRegistrantUser ? addForm.projectRegistrantUser.nickName :
      registrantUser }} </span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="登记日期：" label-width="120px">
            <span> {{ addForm.registerTime ? addForm.registerTime : registerTime }} </span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="confirmAddForm" :disabled="disabled">提 交</el-button>
      <!-- <el-button @click="cancel" :disabled="disabled">取 消</el-button> -->
    </div>
  </div>
</template>

<script>
import { parseTime } from "@/utils/ruoyi";
import { mapGetters } from "vuex";
import { listProject, getProject, addProject, delProject } from "@/api/oa/project/project";
import { getUser } from "@/api/system/user";
import { getUsersDeptLeaderByDept } from "@/api/system/post";
import { complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate, flowTaskForm } from "@/api/flowable/todo";
import { listProjectWork, addProjectWork } from "@/api/oa/project/projectWork";
import { listProjectContract, addProjectContract } from "@/api/oa/contract/projectContract";
import { listContract, getContract, delContract, addContract, updateContract } from "@/api/oa/contract/contract";
export default {
  dicts: ['cmc_scale_grade', 'cmc_unit'],
  props: {
    disabled: {
      type: Boolean,
      require: true,
    },
    taskForm: {
      type: Object,
      required: true,
    },
  },
  computed: {
    ...mapGetters(["userId", "name"]),
  },
  data() {
    return {
      registerTime: undefined,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectNumber: "",
        projectLeader: "",
        projectLeaderName: undefined,
        projectName: "",
      },
      projectList: [],
      total: 0,
      loading: true,
      modifyOpen: false,
      addForm: {
        registerTime: undefined,
        projectRegistrant: "",
      },
      contractCode: "",
      contractNumber: "",
      rules: {
        projectNumber: [{ required: true, message: "请输入项目编号", trigger: "blur" }],
        projectName: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
      },
      workList: [
        {
          content: "",
          scale: "",
          unit: "",
          workload: "",
          deadline: undefined,
          remark: "",
        },
      ],
      restaurants: [{ value: "中国电建集团成都勘测设计研究院有限公司勘测设计分公司" }],
      registrantUser: ''
    };
  },
  created() {
    this.registerTime = parseTime(new Date(), '{y}-{m}-{d}')
    if (this.$route.query.taskName != '项目登记') {
      this.getProjectInfo();
      this.getProjectWorkList();
    } else {
      this.addForm.projectRegistrant = this.userId;
      this.registrantUser = this.name;
    }

    this.getContractDataList();
    // this.getList();
  },
  mounted() {
  },
  methods: {
    // 查询项目列表
    getList() {
      this.loading = true;
      listProject(this.queryParams).then(response => {
        this.projectList = [];
        for (let p of response.rows) {
          if (p.projectLeader != null) {
            getUser(Number(p.projectLeader)).then(res => {
              p.projectLeaderName = res.data.nickName;
            });
          }
          this.projectList.push(p);
        }
        this.total = response.total;
        this.loading = false;
      });
    },
    getProjectInfo() {
      getProject(this.taskForm.formId).then(res => {
        this.addForm = res.data;
      })
    },
    getProjectWorkList() {
      listProjectWork({ projectId: this.taskForm.formId }).then(res => {
        this.workList = res.rows;
      })
    },
    getContractDataList() {
      listProjectContract({ projectId: this.taskForm.formId }).then(res => {
        if (res.rows) {
          for (let row of res.rows) {
            getContract(row.contractId).then(res => {
              if (res.data) {
                if (this.contractCode != '') {
                  this.contractCode = this.contractCode + '、' + res.data.contractCode;
                } else {
                  this.contractCode = res.data.contractCode;
                }
                if (this.contractNumber != '') {
                  this.contractNumber = this.contractNumber + '、' + res.data.contractNumber;
                } else {
                  this.contractNumber = res.data.contractNumber;
                }
              }
            })
          }
        }
      })
    },
    confirmAddForm() {
      this.addForm.projectId = this.taskForm.formId;
      for (let work of this.workList) {
        work.projectId = this.taskForm.formId;
        addProjectWork(work);
      }
      addProject(this.addForm).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.getList();
      });
      const params = { taskId: this.taskForm.taskId };
      // 获取下一个流程节点
      getNextFlowNode(params).then(res => {
        getUsersDeptLeaderByDept({ deptId: 107 }).then(res => {
          let userId = res.data.userId;
          this.$set(this.taskForm.variables, "approval", userId);
          complete(this.taskForm).then(response => {
            this.$modal.msgSuccess(response.msg);
            this.$emit("goBack");
          });
        });
      });
    },
    cancel() {
      this.addForm = {};
    },
    addWorkList() {
      this.workList.push({
        content: "",
        scale: "",
        unit: "",
        workload: "",
        deadline: undefined,
        remark: "",
      });
    },
    deletWorkItem(index) {
      let arr = this.workList;
      if (arr.length == 1) {
        return;
      }
      if (index >= 0 && index < arr.length) {
        arr.splice(index, 1);
      }
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/element-reset.scss";

.project-wrapper {
  padding: 25px;
}

.table-header {
  background-color: #f5f5f5;
}

.card-header {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

table {
  /*居中*/
  margin: 0 auto;
  /*边框*/
  /* border: 1px solid black; */
  text-align: center;
  border-collapse: collapse;
  /*设置背景颜色*/
  /* background-color: #bfa; */
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: #686a6e;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner,
.el-radio__input.is-disabled+span.el-radio__label {
  color: #686a6e;
}

::v-deep .el-radio__input.is-disabled+span.el-radio__label {
  color: #686a6e;
}

::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: var(--current-color);
  width: 6px;
  height: 6px;
}

::v-deep .el-radio__input.is-disabled .el-radio__inner,
.el-radio__input.is-disabled.is-checked .el-radio__inner {
  border-color: var(--current-color);
}

.auditor {
  font-family: '华文行楷';
  font-size: 20px;
}
</style>