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

<!--
 * @Author: ysh
 * @Date: 2024-04-15 09:35:41
 * @LastEditors: wrh
 * @LastEditTime: 2024-05-08 16:01:53
-->
<!--
 * @Author: ysh
 * @Date: 2024-04-08 13:56:14
 * @LastEditors: wrh
 * @LastEditTime: 2024-04-29 14:33:39
-->
<template>
  <div>
    <!-- <el-skeleton animated :rows="20" v-if="loading" class="app-container" /> -->
    <div class="app-container">
      <h2 style="text-align: center">项目运作情况</h2>
      <div class="headers">
        基本作业情况记录
        <div class="line"></div>
      </div>
      <el-form ref="progress" :model="form" :disabled="disabled" label-width="100px">
        <el-row :gutter="20" v-if="!noBudget">
          <el-col :span="11">
            <el-form-item label="使用车辆（车牌号）：" label-width="153px">
              {{ form.licensePlate }}
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="驾驶员：">
              <el-select v-model="form.driver" filterable multiple clearable style="width:220px">
                <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId"
                  v-if="item.nickName != 'admin'">
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
        </el-row>
        <el-form-item label="参与人员：" v-if="!noBudget">
          {{ form.staff }}
        </el-form-item>
        <div v-if="noBudget" class="mb20">
          <el-alert title="项目未做预算表，请先编制预算表" type="warning" :closable="false">
          </el-alert>
        </div>
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="进场时间：">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.entryTime"
                value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="撤场时间：">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.exitTime"
                value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="项目进度：">
          <table border="1">
            <tr>
              <td style="width: 80px">序号</td>
              <td>截止日期</td>
              <td>累计总进度（%）</td>
              <td style="width: 300px">情况说明</td>
            </tr>
            <tr v-for="(progress, index) in progressList" :key="index">
              <td>
                {{ index + 1 }}
              </td>
              <td>
                <el-date-picker type="date" placeholder="选择日期" v-model="progress.date"
                  value-format="yyyy-MM-dd"></el-date-picker>
              </td>
              <td>
                <el-input-number v-model="progress.percentage" :controls="false" style="width: 120px"></el-input-number>%
              </td>
              <td>
                <el-input v-model="progress.situation" type="textarea"></el-input>
              </td>
              <td>
                <el-button type="danger" icon="el-icon-minus" size="mini" circle
                  @click="deleProgressItem(index)"></el-button>
              </td>
            </tr>
          </table>
          <el-button icon="el-icon-plus" size="mini" @click="addProgressList()" type="primary" plain></el-button>
        </el-form-item>
      </el-form>
      <div class="headers">
        项目借款
        <div class="line"></div>
        <borrow-data :taskForm="taskForm"></borrow-data>
      </div>

      <div class="headers">
        成果汇交
        <div class="line"></div>
      </div>
      <div class="headers">
        产值结算（内部）
        <div class="line"></div>
        <settle-data :taskForm="taskForm"></settle-data>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="preserve()" :disabled="disabled" type="warning">保 存</el-button>
        <el-button type="primary" @click="submitNextFlow()" :disabled="disabled">提交下一个流程</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { parseTime } from "@/utils/ruoyi";
import {
  complete,
  rejectTask,
  returnList,
  returnTask,
  getNextFlowNode,
  delegate,
  flowTaskForm,
} from "@/api/flowable/todo";
import {
  getProjectComment,
  addProjectComment,
  updateProjectComment,
} from "@/api/oa/project/projectComment";
import { getUsersDeptLeaderByDept } from "@/api/system/post";
import {
  listProjectProgress,
  addProjectProgress,
  delProjectProgress,
} from "@/api/oa/project/projectProgress";
import { listBudgetCar } from "@/api/oa/budget/budgetCar";
import { listBudgetDevice } from "@/api/oa/budget/budgetDevice";
import { listBudgetSettle } from "@/api/oa/budget/budgetSettle";
import { listBudgetStaff } from "@/api/oa/budget/budgetStaff";
import { listBudget } from "@/api/oa/budget/budget";
import { getProject, updateProject } from "@/api/oa/project/project";
import { getCar } from "@/api/oa/car/car";
import { listUser } from '@/api/system/user';
import borrowData from '../borrow/borrowData.vue';
import SettleData from '../settle/settleData.vue';
export default {
  components: {
    borrowData,
    SettleData
  },
  computed: {
    ...mapGetters(["name", "userId"]),
  },
  props: {
    disabled: {
      type: Boolean,
      require: true,
    },
    taskForm: {
      type: Object,
      required: true,
    },
    taskName: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      loading: true,
      form: {
        licensePlate: "",
        driver: [],
        staff: "",
        entryTime: "",
        exitTime: "",
      },
      rules: {
        manageComment: [{ required: true, message: "请输入审核意见", trigger: "blur" }],
      },
      progressList: [
        {
          date: "",
          percentage: "",
          situation: "",
        },
      ],
      oldProgressList: [],
      noBudget: true,
      budgetId: "",
      userList: []
    };
  },
  watch: {
    taskName(newval, oldval) {
      if (newval == "项目生产") {
        this.doesItExistBudget(this.taskForm.formId);
      }
    },
  },
  created() {
    if (this.taskName == "项目生产") {
      this.doesItExistBudget(this.taskForm.formId);
      this.initProgress();
      this.getUserList();
    }
  },
  methods: {
    initProgress() {
      getProject(this.taskForm.formId).then(res => {
        if (res.data) {
          this.form.entryTime = res.data.entryTime;
          this.form.exitTime = res.data.exitTime;
        }
      });
      listProjectProgress({ projectId: this.taskForm.formId }).then(res => {
        this.oldProgressList = res.rows
        if (res.rows.length != 0) {
          this.progressList = res.rows;
        }
      });
    },
    // 查询是否有预算表
    doesItExistBudget(projectId) {
      listBudget({ projectId }).then(res => {
        this.loading = false;
        if (res.total == 0) {
        } else {
          this.noBudget = false;
          this.budgetId = res.rows[0].budgetId;
          listBudgetCar({ budgetId: this.budgetId }).then(res => {
            let carArr = [];
            let carDriverList = [];
            for (let i of res.rows) {
              carArr.push(i.car.licensePlate);
              getCar(i.carId).then(res => {
                carDriverList.push(res.rows.driverUser.nickName);
                // this.form.driver = carDriverList.join("、");
              });
            }
            this.form.licensePlate = carArr.join("、");
          });
          listBudgetStaff({ budgetId: this.budgetId }).then(res => {
            let userArr = [];
            for (let u of res.rows) {
              userArr.push(u.user.nickName);
            }
            this.form.staff = userArr.join("、");
          });
        }
      });
    },
    addProgressList() {
      this.progressList.push({
        date: "",
        percentage: "",
        situation: "",
      });
    },
    deleProgressItem(index) {
      let arr = this.progressList;
      if (arr.length == 1) {
        return;
      }
      if (index >= 0 && index < arr.length) {
        arr.splice(index, 1);
      }
    },
    handleAddProgress(form) {
      addProjectProgress(form);
    },
    // 暂存数据
    preserve() {
      if (this.oldProgressList.length != 0) {
        delProjectProgress([this.taskForm.formId]).then(res => {
          for (let progress of this.progressList) {
            progress.projectId = this.taskForm.formId;
            addProjectProgress(progress);
          }
        });
      } else {
        for (let progress of this.progressList) {
          progress.projectId = this.taskForm.formId;
          addProjectProgress(progress);
        }
      }
      updateProject({
        projectId: this.taskForm.formId,
        entryTime: this.form.entryTime,
        exitTime: this.form.exitTime,
      }).then(res => {
        this.$message.success("保存成功");
      });
    },
    // 查询用户列表
    getUserList() {
      listUser(this.addDateRange({ pageSize: 9999, pageNum: 1, deptId: undefined }, [])).then(res => {
        this.userList = res.rows
      })
    },
    submitNextFlow() {
      const params = { taskId: this.taskForm.taskId };
      // 获取下一个流程节点
      getNextFlowNode(params).then(res => {
        getProject(this.taskForm.formId).then(res => {
          if (res.data) {
            this.$set(this.taskForm.variables, "formId", this.taskForm.formId);
            this.$set(this.taskForm.variables, "archiveInitiator", res.data.projectLeader);
            this.$set(this.taskForm.variables, "settleInitiator", res.data.projectLeader);
            complete(this.taskForm).then(response => {
              this.$modal.msgSuccess(response.msg);
              this.$emit('goBack');
            });
          }
        })
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.auditor {
  font-family: "华文行楷";
  font-size: 20px;
}

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

.headers {
  position: relative;
  font-weight: bold;
  font-size: 18px;
  padding-left: 40px;
  padding-bottom: 40px;

  .line {
    position: absolute;
    left: 22px;
    top: 5px;
    width: 5px;
    height: 14px;
    border-radius: 10px;
    background-color: #2893e5;
  }
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #121212 !important;
}
</style>