cmc-oa/oa-ui/src/views/flowable/form/oa/carForm.vue

<!--
 * @Author: ysh
 * @Date: 2024-02-29 11:44:28
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-04-25 13:52:22
-->

<template>
  <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
    <el-row :gutter="20">
      <el-col :span="18" :xs="24">
        <el-card>
          <h2 style="text-align: center;">用车申请表</h2>
          <div>
            <el-form ref="carForm" :model="form" label-width="100px" :rules="rules">
              <!-- 申请人填写 -->
              <el-divider></el-divider>
              <el-row :gutter="20">
                <el-col :span="6" :xs="24">
                  <el-form-item label="申请人：" prop="user.nickName">
                    <!-- <el-input v-model="form.user"></el-input> -->
                    {{ form.applierUser ? form.applierUser.nickName : form.user.nickName }}
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="所在部门：" prop="dept.deptName">
                    <!-- <el-input v-model="form.deptName"></el-input> -->
                    {{ form.dept.deptName }}
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="申请时间：" prop="date">
                    <el-date-picker style="width:170px;" v-model="form.applyDate" value-format="yyyy-MM-dd" type="date"
                      placeholder="选择日期" :disabled="taskName != '用车申请'">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="申请用途：" prop="carUsage">
                <el-radio-group v-model="form.carUsage" @change="useChange" size="small" :disabled="taskName != '用车申请'">
                  <el-radio label="0">项目用车</el-radio>
                  <el-radio label="1">非项目用车</el-radio>
                  <el-radio label="2">工会用车</el-radio>
                  <el-radio label="3">党委用车</el-radio>
                  <el-radio label="4">团委用车</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="项目编号：" prop="projectId" v-if="form.carUsage == '0'">
                <el-select v-model="form.projectId" filterable placeholder="请选择" @change="handleSelectProject"
                  :disabled="taskName != '用车申请'" clearable>
                  <el-option v-for="item in projectList" :key="item.value" :label="item.projectNumber"
                    :value="item.projectId">
                  </el-option>
                </el-select>
                <el-descriptions border v-if="isSelect" style="margin-top: 10px;" :column="1">
                  <el-descriptions-item label="项目编号" label-class-name="my-label">{{ chooseProject.projectNumber
                    }}</el-descriptions-item>
                  <el-descriptions-item label="项目名称" label-class-name="my-label">{{ chooseProject.projectName
                    }}</el-descriptions-item>
                  <el-descriptions-item label="项目负责人" label-class-name="my-label">{{ chooseProject.projectLeaderUser ?
    chooseProject.projectLeaderUser.nickName : ''
                    }}</el-descriptions-item>
                  <el-descriptions-item label="承担部门" label-class-name="my-label">
                    <el-tag size="small">{{ chooseProject.undertakingDeptName }}</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="项目类型" label-class-name="my-label">{{ chooseProject.projectType
                    }}</el-descriptions-item>
                </el-descriptions>
              </el-form-item>
              <el-form-item label="用车事由：" prop="applyReason">
                <el-input type="textarea" :rows="2" placeholder="请输入用车事由" v-model="form.applyReason"
                  :disabled="taskName != '用车申请'">
                </el-input>
              </el-form-item>
              <el-row>
                <el-col :span="6" :xs="24">
                  <el-form-item label="乘车人数：" prop="passengers">
                    <el-input-number v-model="form.passengers" :min="1"
                      :disabled="taskName != '用车申请'"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="开始日期：" prop="beginDate">
                    <el-date-picker style="width:170px;" v-model="form.beginDate" value-format="yyyy-MM-dd" type="date"
                      placeholder="选择日期" @change="calculateDay" :disabled="taskName != '用车申请'">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="结束日期：" prop="endDate">
                    <el-date-picker style="width:170px;" v-model="form.endDate" value-format="yyyy-MM-dd" type="date"
                      placeholder="选择日期" @change="calculateDay" :disabled="taskName != '用车申请'">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="共计:">
                    {{ form.days + '天' }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <!-- 部门审核意见 -->
              <el-form-item label="部门审核意见：" prop="deptComment" label-width="120px" v-if="showFormItem('部门审核')">
                <el-input type="textarea" :rows="2" placeholder="请输入部门审核意见" v-model="form.deptComment"
                  :disabled="taskName != '部门审核'">
                </el-input>
              </el-form-item>
              <el-row>
                <el-col :span="6" :xs="24" :offset="12">
                  <el-form-item label="签名：" label-width="120px" v-if="showFormItem('部门审核签名')">
                    <span class="auditor"> {{ form.deptUser ? form.deptUser.nickName : deptUser }} </span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="日期：" label-width="120px" v-if="showFormItem('部门审核签名')">
                    <span> {{ form.deptTime ? form.deptTime : deptTime }} </span>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 分管审核意见 -->
              <el-form-item label="分管审核意见：" prop="managerComment" label-width="120px" v-if="showFormItem('分管审核')">
                <el-input type="textarea" :rows="2" placeholder="请输入分管审核意见" v-model="form.managerComment"
                  :disabled="taskName != '分管审核'">
                </el-input>
              </el-form-item>
              <el-row>
                <el-col :span="6" :xs="24" :offset="12">
                  <el-form-item label="签名：" label-width="120px" v-if="showFormItem('分管审核签名')">
                    <span class="auditor"> {{ form.managerUser ? form.managerUser.nickName : managerUser }} </span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="日期：" label-width="120px" v-if="showFormItem('分管审核签名')">
                    <span> {{ form.managerTime ? form.managerTime : managerTime }} </span>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 党工团审核意见 -->
              <el-form-item :label="dgtAdvice" prop="unionComment" label-width="120px" v-if="showFormItem('党工团审核')">
                <el-input type="textarea" :rows="2" placeholder="请输入审核意见" v-model="form.unionComment"
                  :disabled="taskName != '党工团审核'">
                </el-input>
              </el-form-item>
              <el-row>
                <el-col :span="6" :xs="24" :offset="12">
                  <el-form-item label="签名：" label-width="120px" v-if="showFormItem('党工团审核签名')">
                    <span class="auditor"> {{ form.unionUser ? form.unionUser.nickName : unionUser }} </span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="日期：" label-width="120px" v-if="showFormItem('党工团审核签名')">
                    <span> {{ form.unionTime ? form.unionTime : unionTime }} </span>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 总经理审核意见 -->
              <el-form-item label="总经理审核意见" prop="gmComment" label-width="120px" v-if="showFormItem('总经理审核')">
                <el-input type="textarea" :rows="2" placeholder="请输入总经理审核意见" v-model="form.gmComment"
                  :disabled="taskName != '总经理审核'">
                </el-input>
              </el-form-item>
              <el-row>
                <el-col :span="6" :xs="24" :offset="12">
                  <el-form-item label="签名：" label-width="120px" v-if="showFormItem('总经理审核签名')">
                    <span class="auditor"> {{ form.gmUser ? form.gmUser.nickName : gmUser }} </span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="日期：" label-width="120px" v-if="showFormItem('总经理审核签名')">
                    <span> {{ form.gmTime ? form.gmTime : gmTime }} </span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-divider></el-divider>
              <!-- 安排用车意见 -->
              <el-form-item label="安排用车意见：" prop="dispatchComment" label-width="120px">
                <el-input type="textarea" :rows="2" placeholder="请输入安排用车意见" v-model="form.dispatchComment"
                  :disabled="taskName != '安排用车'">
                </el-input>
              </el-form-item>
              <el-row>
                <el-col :span="6" :xs="24" :offset="12">
                  <el-form-item label="签名：" label-width="120px" v-if="taskName == '安排用车' || taskName == '申请确认'">
                    <span class="auditor"> {{ form.dispatchUser ? form.dispatchUser.nickName : dispatchUser }} </span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="日期：" label-width="120px" v-if="taskName == '安排用车' || taskName == '申请确认'">
                    <span> {{ form.dispatchTime ? form.dispatchTime : dispatchTime }} </span>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 综合事务部管理人员填写 -->
              <el-form-item label="车牌号：">
                <el-checkbox-group v-model="form.cars" :disabled="taskName != '安排用车'">
                  <el-checkbox :label="item.carId" v-for="item in carList" :key="item.carId" :value="item.carId"
                    v-if="item.remark == null">
                    {{ item.licensePlate }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="驾驶员：">
                <!-- <el-checkbox-group v-model="form.drivers" :disabled="taskName != '安排用车'"
                  v-if="chooseOtherDrivers == false">
                  <el-checkbox :label="item.userId" v-for="item in driverList" :key="item.userId" :value="item.userId">
                    {{ item.nickName }}
                  </el-checkbox>
                </el-checkbox-group> -->
                <el-select v-model="form.drivers" filterable multiple clearable style="width:220px" :disabled="taskName != '安排用车'">
                  <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-form>
            <el-row style="text-align: center;" v-if="taskName == '用车申请'">
              <el-button type="primary" @click="submit">提交申请</el-button>
            </el-row>
            <el-row style="text-align: center;" v-else>
              <el-button type="primary" :disabled="taskName == ''" @click="completeApply">{{ taskName == '申请确认' ? "确认" : "完成审批" }}</el-button>
            </el-row>
          </div>
        </el-card>

      </el-col>
      <el-col :span="6" :xs="24">
        <el-card>
          <h2 style="text-align: center;">流程进度</h2>
          <div>
            <flow :flowData="flowData" />
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { parseTime } from "@/utils/ruoyi";
import { listProject, getProject } from "@/api/oa/project/project";
import { listCar, getCar } from "@/api/oa/car/car";
import { listCarApproval, getCarApproval, updateCarApproval, addCarApproval, modifyCarApproval } from '@/api/oa/car/carApproval'
import { listDriver } from "@/api/system/post";
import { complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate, flowTaskForm, } from "@/api/flowable/todo";
import { getUsersDeptLeader, getUsersManageLeader } from '@/api/system/post.js'
import flow from '@/views/flowable/task/todo/detail/flow'
import { flowXmlAndNode } from "@/api/flowable/definition";
import { listUser } from '@/api/system/user';
export default {
  components: {
    flow
  },
  props: {
    taskName: {
      type: String,
      required: true
    },
    taskForm: {
      type: Object,
      required: true
    }
  },
  created() {
    this.getUserList();
    if (this.taskName == '部门审核') {
      this.deptUser = this.$store.getters.name;
      this.deptTime = parseTime(new Date(), '{y}-{m}-{d}')
    }
    if (this.taskName == '分管审核') {
      this.managerUser = this.$store.getters.name;
      this.managerTime = parseTime(new Date(), '{y}-{m}-{d}')
    }
    if (this.taskName == '党工团审核') {
      this.unionUser = this.$store.getters.name;
      this.unionTime = parseTime(new Date(), '{y}-{m}-{d}')
    }
    if (this.taskName == '总经理审核') {
      this.gmUser = this.$store.getters.name;
      this.gmTime = parseTime(new Date(), '{y}-{m}-{d}')
    }
    if (this.taskName == '安排用车') {
      this.dispatchUser = this.$store.getters.name;
      this.dispatchTime = parseTime(new Date(), '{y}-{m}-{d}')
    }
    this.dept = this.$store.getters.deptId;
    this.getProjectList();
    this.getCarList();
    this.getDriverList();
    flowXmlAndNode({ procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId }).then(res => {
      this.flowData = res.data;
    })
  },
  data() {
    return {
      loading: true,
      deptUser: '',
      managerUser: '',
      unionUser: '',
      gmUser: '',
      dispatchUser: '',
      deptTime: undefined,
      managerTime: undefined,
      unionTime: undefined,
      gmTime: undefined,
      dispatchTime: undefined,
      form: {
        carUsage: '0',
        days: '',
        drivers: [],
        user: {
          nickName: '',
        },
        dept: {
          deptId: '',
          deptName: '',
        },
        applyDate: undefined,
        applier: '',
        cars: []
      },
      rules: {
        projectNumber: [
          { required: true, message: '请选择项目编号', trigger: 'change' },
        ],
        passengers: [
          { required: true, message: '请选择输入乘车人数', trigger: 'change' },
        ],
        beginDate: [
          { required: true, message: '请选择开始日期', trigger: 'change' },
        ],
        endDate: [
          { required: true, message: '请选择结束日期', trigger: 'change' },
        ],
        applyReason: [
          { required: true, message: '请输入用车理由', trigger: 'blur' },
        ],
      },
      projectList: [],
      carList: [],
      driverList: [],
      chooseProject: {},
      isSelect: false,
      formTotal: 0,
      flowData: {},
      dept: 0,
      dgtAdvice: '审核意见',//党工团审核意见的label
      userList: []
    }
  },
  mounted() {
    this.initForm();
  },
  methods: {
    // 初始化表单
    initForm() {
      getCarApproval(this.taskForm.formId).then(res => {
        if (this.isEmptyObject(res.data)) {
          this.formTotal = 0;
          this.form.user.nickName = this.$store.getters.name;
          this.form.applier = this.$store.getters.userId;
          this.dept = this.$store.getters.deptId;
          this.form.dept.deptName = this.$store.getters.deptName;
          this.form.applyDate = new Date();
          this.loading = false
        }
        else {
          this.formTotal = 1;
          let data = res.data;
          // 初始化党工团审核意见的label
          if (data.carUsage == '2') {
            this.dgtAdvice = '工会审核意见'
          } else if (data.carUsage == '3') {
            this.dgtAdvice = '党委审核意见'
          } else {
            this.dgtAdvice = '团委审核意见'
          }
          if (res.data.drivers == null || res.data.drivers == undefined || res.data.drivers == "") {
            data.drivers = []
          } else {
            let arr = []
            data.drivers = data.drivers.split(',');
            for (let driver of data.drivers) {
              arr.push(parseInt(driver))
            }
            data.drivers = arr
          }
          if (res.data.cars == null || res.data.cars == undefined || res.data.cars == "") {
            data.cars = []
          } else {
            data.cars = data.cars.split(',');
            let arr = []
            for (let d of data.cars) {
              arr.push(parseInt(d))
            }
            data.cars = arr;
          }
          this.form = data;
          if (data.projectId) {
            getProject(data.projectId).then(response => {
              this.chooseProject = response.data;
              this.isSelect = true
            })
          }
          this.loading = false
        }
      })
    },
    submit() {
      this.$refs['carForm'].validate((valid) => {
        if (valid) {
          this.form.carApplyId = this.taskForm.formId;
          let formData = new FormData();
          let jsonForm = JSON.stringify(this.form);
          formData.append("form", jsonForm);
          const params = { taskId: this.taskForm.taskId };
          if (this.formTotal != 0) {
            modifyCarApproval(formData);
          } else {
            this.form.cars = '';
            this.form.drivers = '';
            addCarApproval(this.form);
          }
          // 获取下一个流程节点
          getNextFlowNode(params).then(res => {
            const data = res.data;
            this.taskForm.formData = formData;
            this.getNextFlowNodeApproval();
          })
        }
      })
    },
    completeApply() {
      this.form.formId = this.taskForm.formId;
      this.form.carApplyId = this.taskForm.formId;
      let formData = new FormData();
      let jsonForm = JSON.stringify(this.form);
      formData.append("form", jsonForm);
      modifyCarApproval(formData);
      const params = { taskId: this.taskForm.taskId };
      // 获取下一个流程节点
      getNextFlowNode(params).then(res => {
        const data = res.data;
        this.taskForm.formData = formData;
        this.getNextFlowNodeApproval();
      })
    },
    // 获取下一个审批人
    getNextFlowNodeApproval() {
      if (this.taskName == '用车申请') {
        getUsersDeptLeader({ userId: this.$store.getters.userId }).then(res => {
          this.$set(this.taskForm.variables, "dept", this.dept);
          if (res.data && this.dept != 0) {
            this.$set(this.taskForm.variables, "approval", res.data.userId);
          } else {
            let userId = this.getChooseType()
            this.$set(this.taskForm.variables, "approval", userId);
          }

          complete(this.taskForm).then(response => {
            this.$modal.msgSuccess(response.msg);
            this.$emit('goBack')
          });
        })
      } else if (this.taskName == '部门审核') {
        getUsersManageLeader({ userId: this.$store.getters.userId }).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')
          });
        })
      } else if (this.taskName == '分管审核' || this.taskName == '党工团审核' || this.taskName == '总经理审核') {
        this.$set(this.taskForm.variables, "approvalList", [8, 16]);
        complete(this.taskForm).then(response => {
          this.$modal.msgSuccess(response.msg);
          this.$emit('goBack')
        });
      } else if (this.taskName == '安排用车' || this.taskName == '申请确认') {
        complete(this.taskForm).then(response => {
          this.$modal.msgSuccess(response.msg);
          this.$emit('goBack')
        });
      }
    },
    getChooseType() {
      if (this.form.carUsage == '2' || this.form.carUsage == '3') {
        return 4 // 4为党委书记
      } else {
        return 142  //142为团委书记
      }
    },
    // 查询项目列表
    getProjectList() {
      this.loading = true
      listProject({
        pageNum: 1,
        pageSize: 99999999
      }).then(response => {
        this.projectList = response.rows;
      })
    },
    // 选择项目
    handleSelectProject(val) {
      if (val != "" && val != undefined && val != null) {
        getProject(val).then(res => {
          this.chooseProject = res.data;
          this.isSelect = true
        })
      } else {
        this.isSelect = false
      }

    },
    // 查询车辆列表
    getCarList() {
      listCar({
        pageNum: 1,
        pageSize: 99999999
      }).then(response => {
        this.carList = response.rows;
      })
    },

    // 查询驾驶员列表
    getDriverList() {
      listDriver({
        pageNum: 1,
        pageSize: 99999999
      }).then(response => {
        this.driverList = response.rows;
      })
    },
    // 查询用户列表
    getUserList() {
      listUser({ pageSize: 9999, pageNum: 1 }).then(res => {
        this.userList = res.rows
      })
    },
    calculateDay() {
      if (this.form.beginDate && this.form.endDate) {
        let y1 = new Date(this.form.beginDate);
        let y2 = new Date(this.form.endDate);
        if (y2 < y1) {
          this.form.days = '';
          this.$message.error('开始时期和结束日期选择错误');
          return
        }
        let sub = Math.abs(y2 - y1);
        let days = Math.floor(sub / (1000 * 60 * 60 * 24)) + 1;
        this.form.days = days;
      } else {
        this.form.days = '';
      }

    },
    isEmptyObject(obj) {
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          return false;
        }
      }
      return true;
    },
    useChange(val) {
      if (val == '2' || val == '3' || val == '4') {
        this.dept = 0;
      }
      else
        this.dept = this.$store.getters.deptId;
    },
    showFormItem(name) {
      let isShow = false;
      if (name == '部门审核')
        isShow = (this.dept > 102 && this.taskName == '用车申请') || (this.taskName == '部门审核' || this.taskName == '分管审核') || ((this.taskName == '安排用车' || this.taskName == '申请确认') && this.form.deptUserId != null);
      else if (name == '分管审核')
        isShow = (this.dept > 102 && this.taskName == '用车申请') || (this.taskName == '部门审核' || this.taskName == '分管审核') || ((this.taskName == '安排用车' || this.taskName == '申请确认') && this.form.managerUserId != null);
      else if (name == '党工团审核')
        isShow = (this.dept == 0 && this.taskName == '用车申请') || this.taskName == '党工团审核' || ((this.taskName == '安排用车' || this.taskName == '申请确认') && this.form.unionUserId != null);
      else if (name == '总经理审核')
        isShow = (this.dept == 102 && this.taskName == '用车申请') || this.taskName == '总经理审核' || ((this.taskName == '安排用车' || this.taskName == '申请确认') && this.form.gmUserId != null);
      else if (name == '部门审核签名')
        isShow = (this.taskName == '部门审核' || this.taskName == '分管审核') || ((this.taskName == '安排用车' || this.taskName == '申请确认') && this.form.deptUserId != null);
      else if (name == '分管审核签名')
        isShow = this.taskName == '分管审核' || ((this.taskName == '安排用车' || this.taskName == '申请确认') && this.form.managerUserId != null);
      else if (name == '党工团审核签名')
        isShow = this.taskName == '党工团审核' || ((this.taskName == '安排用车' || this.taskName == '申请确认') && this.form.unionUserId != null);
      else if (name == '总经理审核签名')
        isShow = this.taskName == '总经理审核' || ((this.taskName == '安排用车' || this.taskName == '申请确认') && this.form.gmUserId != null);
      return isShow;
    },
  },
}
</script>

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

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

.my-label {
  width: 100px;
  background: #E1F3D8;
}
</style>