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

<!--
 * @Author: ysh
 * @Date: 2024-03-07 13:44:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-03-08 17:15:18
-->

<template>
  <div>
    <h2 style="text-align: center;">设备申请表</h2>
    <div>
      <el-form ref="deviceForm" :model="form" label-width="100px" :rules="rules">
        <!-- 申请人填写 -->
        <el-row :gutter="20">
          <el-col :span="6" :xs="24">
            <el-form-item label="申请人：" prop="user">
              <!-- <el-input v-model="form.user"></el-input> -->
              {{ form.user }}
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="所在部门：" prop="deptName">
              <!-- <el-input v-model="form.deptName"></el-input> -->
              {{ form.deptName }}
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="申请时间：" prop="applyDate">
              <el-date-picker style="width:140px;" v-model="form.applyDate" value-format="yyyy-MM-dd" type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="项目编号：" prop="projectNumber">
          <el-select v-model="form.projectNumber" filterable allow-create placeholder="请选择"
            @change="handleSelectProject" 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.projectLeader
              }}</el-descriptions-item>
            <el-descriptions-item label="承担部门" label-class-name="my-label">
              <el-tag size="small">{{ chooseProject.undertakingDept }}</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">
          </el-input>
        </el-form-item>
        <el-row>
          <el-col :span="6" :xs="24">
            <el-form-item label="开始日期：" prop="beginDate">
              <el-date-picker style="width:140px;" v-model="form.beginDate" value-format="yyyy-MM-dd" type="date"
                placeholder="选择日期" @change="calculateDay">
              </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:140px;" v-model="form.endDate" value-format="yyyy-MM-dd" type="date"
                placeholder="选择日期" @change="calculateDay">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" :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="taskName == '部门审核' || taskName == '分管审核' || taskName == '安排设备'">
          <el-input type="textarea" :rows="2" placeholder="请输入部门审核意见" v-model="form.deptComment">
          </el-input>
        </el-form-item>
        <!-- 分管审核意见 -->
        <el-form-item label="分管审核意见：" prop="managerComment" label-width="120px"
          v-if="taskName == '分管审核' || taskName == '安排设备'">
          <el-input type="textarea" :rows="2" placeholder="请输入分管审核意见" v-model="form.managerComment">
          </el-input>
        </el-form-item>
      </el-form>
      <el-row style="text-align: center;" v-if="taskName == '设备申请'">
        <el-button type="primary" @click="submit">提交申请</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import { listProject, getProject } from "@/api/oa/project/project";
import { listDevice, getDevice } from "@/api/oa/device/device";
import { listDeviceApproval, getDeviceApproval, updateDeviceApproval, submitDeviceApproval, modifyDeviceApproval } from '@/api/oa/device/deviceApproval'
import {
  complete, rejectTask, returnList, returnTask, getNextFlowNode, delegate, flowTaskForm,
} from "@/api/flowable/todo";
export default {
  props: {
    taskName: {
      type: String,
      required: true
    },
    taskForm: {
      type: Object,
      required: true
    }
  },
  created() {
    this.form.user = this.$store.getters.name;
    this.form.deptName = this.$store.getters.deptName;
    this.getProjectList();
  },
  data() {
    return {
      form: {
        applyDate: new Date(),
        days: ""
      },
      projectList: [],
      chooseProject: {},
      isSelect: false,
      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' },
        ],
      },
    }
  },
  methods: {
    submit() {
      this.$refs['deviceForm'].validate((valid) => {
        if (valid) {
          this.form.formId = 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) {
            modifyDeviceApproval(formData);
          } else {
            submitDeviceApproval(formData);
          }
          // 获取下一个流程节点
          getNextFlowNode(params).then(res => {
            const data = res.data;
            this.taskForm.formData = formData;
            this.getNextFlowNodeApproval();
          })
        }
      })
    },
    // 查询项目列表
    getProjectList() {
      this.loading = true
      listProject({
        pageNum: 1,
        pageSize: 9999999999
      }).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
      }
    },
    // 计算天数
    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 = '';
          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;
    }
  },
}
</script>

<style lang="scss" scoped></style>