mbWaterService/src/views/mbsys/collaborative/meetingmanage/meetingapplication/registerForm.vue

<template>
  <!-- 会议申请详情 -->
  <div class="form-container">
    <el-form :model="form" :rules="rules" ref="form" label-width="auto">
      <blocks title="基本信息">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="会议名称：" prop="name" style="height: 45px">
              <el-input
                v-model="form.name"
                size="small"
                maxlength="15"
                :disabled="isOpt ? (optionType == 0 ? true : false) : true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会议内容：" style="height: 45px">
              <el-input
                v-model="form.content"
                size="small"
                maxlength="50"
                :disabled="isOpt ? (optionType == 0 ? true : false) : true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地点：" style="height: 45px" prop="relationId">
              <el-select
                v-model="form.relationId"
                clearable
                placeholder="请选择会议室列表"
                size="small"
                style="width: 100%"
                :disabled="isOpt ? (optionType == 0 ? true : false) : true"
              >
                <el-option
                  v-for="item in meetRooms"
                  :key="item.id"
                  :label="item.roomName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="会议开始时间："
              style="height: 45px"
              prop="startTime"
            >
              <el-date-picker
                v-model="form.startTime"
                type="datetime"
                size="small"
                placeholder="年/月/日"
                style="width: 100%"
                @change="startTimeChange"
                :disabled="isOpt ? (optionType == 0 ? true : false) : true"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="会议结束时间："
              style="height: 45px; width: 100%"
              prop="endTime"
            >
              <el-date-picker
                v-model="form.endTime"
                type="datetime"
                size="small"
                placeholder="年/月/日"
                style="width: 100%"
                @change="endTimeChange"
                :disabled="isOpt ? (optionType == 0 ? true : false) : true"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="5">
            <el-form-item label="会议时长：">
              <span>3小时</span>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item label="参会人员：" required>
              <el-input
                v-model="form.deptStaff"
                size="small"
                :disabled="isOpt ? (optionType == 0 ? true : false) : true"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="参会部门：" prop="dept" style="height: 45px">
              <el-select
                v-model="form.dept"
                multiple
                collapse-tags
                filterable
                placeholder="请选择参会部门"
                style="width: 100%"
                size="mini"
                :disabled="isOpt ? (optionType == 0 ? true : false) : true"
                @change="superviseDeptChange"
              >
                <el-option
                  v-for="item in option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="参会人员："
              prop="deptStaff"
              style="height: 45px"
            >
              <el-select
                v-model="form.deptStaff"
                multiple
                filterable
                collapse-tags
                :disabled="isOpt ? (optionType == 0 ? true : false) : true"
                placeholder="请选择参会人员"
                style="width: 100%"
                size="mini"
                @change="superviseUserChange"
              >
                <el-option-group
                  v-for="group in superviseUsers"
                  :key="group.id"
                  :label="group.label"
                >
                  <el-option
                    v-for="item in group.users"
                    :key="item.id"
                    :label="item.realName"
                    :value="item.id"
                  >
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="参会人数：" style="height: 45px">
              <el-input
                v-model="form.totalPrice"
                size="small"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="申请部门："
              prop="useDept"
              style="height: 45px"
            >
              <el-select
                v-model="form.useDept"
                filterable
                collapse-tags
                placeholder="请选择申请部门"
                size="small"
                style="width: 100%"
                disabled
              >
                <el-option
                  v-for="item in departments"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="申请人："
              prop="personLiable"
              style="height: 45px"
            >
              <el-input
                v-model="form.personLiable"
                size="small"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="申请时间："
              prop="registerTime"
              style="height: 45px"
            >
              <el-date-picker
                v-model="form.registerTime"
                type="datetime"
                placeholder="选择日期时间"
                style="width: 100%"
                size="small"
                disabled
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发送通知：" style="height: 45px">
              <el-select
                v-model="form.typeOne"
                size="small"
                style="width: 100%"
                clearable
                :disabled="isOpt ? (optionType == 0 ? true : false) : true"
              >
                <el-option
                  v-for="item in optionMes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </blocks>

      <blocks title="附件">
        <el-row :gutter="24">
          <el-col
            v-for="(file, index) in existsFiles"
            :key="index"
            class="tf-col"
            :span="8"
          >
            <div class="file">
              <div
                class="file-name"
                @click="downloadFile(file)"
                :style="isOpt && optionType != 0 ? '' : 'width:100%;'"
              >
                {{ file.fileName }}
              </div>
              <div
                v-if="isOpt ? optionType != 0 : false"
                class="btn-file"
                @click="deleteFile(file)"
              >
                x
              </div>
            </div>
          </el-col>
        </el-row>
        <upload
          ref="upload"
          :files="files"
          v-if="isOpt ? (optionType == 0 ? false : true) : false"
        ></upload>
      </blocks>

      <blocks title="处理信息">
        <examineForm
          ref="examine"
          :cfgParam="{ isOpt, optionType }"
          :step="step"
          :steps="steps"
          :process="process"
          :editData="editData"
          :allDeptAndUser="allDeptAndUser"
        ></examineForm>
      </blocks>
    </el-form>
    <!-- 详情 -->
    <el-dialog
      class="tf-dialog"
      :title="title"
      :visible.sync="dialogFormVisible"
      width="1200px"
      top="60px"
      style="padding: 10px"
      append-to-body
    >
      <vehicle-transfer
        v-if="dialogFormVisible"
        ref="transfer"
        :currSelects="tableData"
      ></vehicle-transfer>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancelSubmit" size="small">取 消</el-button>
        <el-button type="primary" @click="submitData" size="small"
          >提 交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import blocks from "@/views/mbsys/components/Blocks.vue";
import examineForm from "@/views/mbsys/components/examineForm.vue";
import vehicleTransfer from "@/views/mbsys/components/vehicleTransfer.vue";
import upload from "@/views/mbsys/components/upload.vue";
import { getCompanyAll, getFiles, getAllUserInfo } from "@/api/base";
import { getMatterTypes, getSupplier } from "@/api/mbsys/materialmanage";
import { getconferenceroom } from "@/api/mbsys/collaborative.js";
import { config } from "../../../components/cfgOrderProcess";
import { parseTime } from "@/utils/index";

export default {
  components: { blocks, examineForm, upload, vehicleTransfer },
  props: {
    /**
     * 是否为当前状态
     */
    isOpt: {
      type: Boolean,
      required: true,
    },
    /**
     * 当前状态操作方式0：查看，1：新增，2：修改
     */
    optionType: {
      type: Number,
      required: true,
    },
    /**
     * 当前步骤
     */
    step: {
      type: Object,
      required: true,
    },
    /**
     * 流程所有
     */
    steps: {
      type: Array,
      required: true,
    },

    /**
     * 流程配置信息
     */
    process: {
      type: Object,
      required: true,
    },

    /**
     * 编辑\查询数据
     */
    editData: {
      type: Object,
      required: true,
    },
    /**
     * 所有部门和用户
     */
    allDeptAndUser: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      // pickerOptions0: {
      //   disabledDate: (time) => {
      //     //如果已经已知结束日期，就把结束日期之后的日期禁用
      //     if (this.form.endTime) {
      //       return time.getTime() > new Date(this.form.endTime).getTime();
      //     } else {
      //       //否则 就把当前日期之后的日期禁用掉
      //       return time.getTime() > Date.now();
      //     }
      //   },
      // },
      // pickerOptions1: {
      //   disabledDate: (time) => {
      //     //如果已知开始日期，就把开始日期之前的日期禁用掉
      //     if (this.form.startTime) {
      //       return time.getTime() < new Date(this.form.startTime).getTime();
      //     }
      //   },
      // },
      config: config,
      curUser: null,
      optionMes: [
        {
          label: "是",
          value: 0,
        },
        {
          label: "否",
          value: 1,
        },
      ],
      title: "添加物资类型",
      categoryType: [],
      form: {
        name: "", //采购名称
        content: "",
        useDept: "",
        relationId: "", //申请时间
        startTime: "", //开始时间
        endTime: "", //结束时间
        dept: "",
        deptStaff: "",
        dept: "", //督办部门
        totalPrice: "", //督办人员
        typeOne: "",
      },

      files: [], //上传附件
      allDept: [], //所有部门
      existsFiles: [], //已上传附件
      param: {},
      dialogFormVisible: false,
      departments: [],
      meetRooms: [],
      tableData: [],
      Materials: [],
      otherCost: [], //其他费用
      option: [],
      superviseUsers: [], //督办人员
      allSuperviseUsers: [], //所有督办人员
      itemKey: 1,
      rules: {
        name: [{ required: true, message: "填写会议名称" }],
        relationId: [{ required: true, message: "请选择会议室" }],
        dept: [{ required: true, message: "请选择参会部门" }],
        deptStaff: [{ required: true, message: "请选择参会人员" }],
        useDept: [{ required: true, message: "请选择申请部门" }],
        personLiable: [{ required: true, message: "请选择申请人" }],
        startTime: [{ required: true, message: "请选择会议开始时间" }],
        endTime: [{ required: true, message: "请选择会议结束时间" }],
      },
    };
  },

  async created() {
    if (this.config && this.config.hasOwnProperty("metrialCategories"))
      this.categoryType = this.config.metrialCategories;
    //获取部门
    getCompanyAll().then((res) => {
      if (res.code == 1) {
        this.departments = res.result;
      }
    });
    //获取会议室列表
    getconferenceroom().then((res) => {
      if (res.code === 1) {
        this.meetRooms = res.result.records;
      }
    });

    /**
     * 查询所有用户所有部门和所有人
     */
    getAllUserInfo().then((res) => {
      const data = res.result;
      for (const i in data) {
        data[i].value = data[i].id;
        data[i].label = data[i].name;
        if (data[i].users) {
          data[i].children = data[i].users;
          for (const j in data[i].children) {
            data[i].children[j].value = data[i].children[j].id;
            data[i].children[j].label = data[i].children[j].realName;
          }
        }
      }
      this.option = data;
    });

    //如果当前状态为可编辑状态获取当前申购部门和申购人
    if (this.isOpt && JSON.stringify(this.editData) === "{}") {
      this.curUser = this.$store.state.user;
      this.form.personLiable = this.curUser.realName;
      this.form.useDept = parseInt(this.curUser.departmentId);
      this.form.registerTime = parseTime(new Date(), "{y}-{m}-{d} {h}:{i}:{s}");
    } else {
      this.paramMappingToFrom();
    }
  },
  mounted() {},
  methods: {
    /**
     * 映射出表单参数
     */
    paramMappingToFrom() {
      if (!(JSON.stringify(this.editData) === "{}")) {
        this.form["name"] = this.editData.name; //采购单名称
        this.form["useDept"] = this.editData.registerDept; //申购部门
        this.form["personLiable"] = this.editData.registerStaffName; //申购人
        this.form["totalPrice"] = this.editData.totalPrice; //申购人
        this.form["remark"] = this.editData.remark; //备注
        this.form["registerTime"] = parseTime(
          new Date(this.editData.registerTime),
          "{y}-{m}-{d} {h}:{i}:{s}"
        ); //申购时间
        this.form["startTime"] = parseTime(
          new Date(this.editData.startTime),
          "{y}-{m}-{d} {h}:{i}:{s}"
        ); //开始时间
        this.form["endTime"] = parseTime(
          new Date(this.editData.endTime),
          "{y}-{m}-{d} {h}:{i}:{s}"
        ); //结束时间

        if (this.editData.hasOwnProperty("processNodeVos")) {
          //找到步骤相关数据
          let processNodeVos = this.editData.processNodeVos.filter(
            (pn) => pn.processStep == this.step.stepOrder
          );
          if (processNodeVos.length > 0) {
            this.form["typeOne"] = processNodeVos[0].typeOne; //通知
            this.form["content"] = processNodeVos[0].documentVo.content; //会议内容
            this.form["relationId"] =
              processNodeVos[0].relationInfoVo[0].relationId; //会议室地址
            let dept = [];
            let deptStaff = [];
            processNodeVos[0].processStaffVos.forEach((item) => {
              dept.push(item.dept);
              deptStaff.push(item.deptStaffName);
            });
            this.form["dept"] = this.unique(dept);
            this.form["deptStaff"] = deptStaff;
            //附件
            if (processNodeVos[0].hasOwnProperty("files")) {
              const files = processNodeVos[0].files;
              if (files) {
                this.existsFiles = [];
                files.forEach((file) => {
                  this.existsFiles.push(file);
                });
              }
            }
          }
        }
      }
    },
    unique(arr) {
      return Array.from(new Set(arr));
    },
    /**
     * 申购时间改变
     */
    startTimeChange(value) {
      this.form.startTime = parseTime(
        new Date(value),
        "{y}-{m}-{d} {h}:{i}:{s}"
      ); //申购时间
    },
    /**
     * 申购时间改变
     */
    endTimeChange(value) {
      this.form.endTime = parseTime(new Date(value), "{y}-{m}-{d} {h}:{i}:{s}"); //申购时间
    },

    //监督部门改变
    superviseDeptChange(value) {
      this.superviseUsers = [];
      this.allSuperviseUsers = [];
      //情况督办人员
      this.form.deptStaff = [];
      value.forEach((item) => {
        const obj = this.option.find((it) => it.id == item);
        if (obj && obj.hasOwnProperty("users") && obj.users.length > 0)
          this.allSuperviseUsers = this.allSuperviseUsers.concat(obj.users);
      });
      this.superviseUsers = this.option.filter(
        (item) => value.indexOf(item.id) > -1
      );
      this.form.staffDtos = [];
      //设置督办人为空
      this.superviseUsers.forEach((item) => {
        this.form.staffDtos.push({
          dept: item.id,
          staffType: 1,
          deptStaff: "",
        });
      });
      this.form.totalPrice = this.form.deptStaff.length;
    },

    //督办人员改变
    superviseUserChange(value) {
      this.form.staffDtos = [];
      value.forEach((item) => {
        const obj = this.allSuperviseUsers.find((p) => p.id == item);
        if (obj)
          this.form.staffDtos.push({
            dept: obj.departmentId,
            staffType: 1,
            deptStaff: obj.id,
          });
      });
      this.form.totalPrice = this.form.deptStaff.length;
    },

    /**
     * 下载文件
     * @file 文件信息
     */
    downloadFile(file) {
      if (
        file &&
        file.hasOwnProperty("filePath") &&
        file.hasOwnProperty("fileName")
      ) {
        const token = this.$store.state.user.token;
        const fileName = file.fileName;
        getFiles({
          access_token: token,
          fileName: fileName,
          remotePath: file.filePath,
        }).then((src) => {
          const reader = new FileReader();
          reader.readAsDataURL(src);
          reader.onload = (e) => {
            const a = document.createElement("a");
            a.download = fileName;
            // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
            a.href = e.target.result;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          };
        });
      }
    },

    /**
     * 删除文件
     * @file 文件信息
     */
    deleteFile(file) {
      this.$confirm(
        "此操作将永久删除【" + file.fileName + "】文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.existsFiles = this.existsFiles.filter(
            (item) => item.id != file.id
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    /**
     * 根据物资类别编号获取物资类别名称
     */
    getCategoryName(code) {
      const obj = this.categoryType.find((item) => item.code == code);
      return obj.name;
    },

    /***
     * 删除物料信息
     */
    delMaterial(row) {
      this.tableData = this.tableData.filter((item) => item.id != row.id);
    },

    /**
     * 获取上传的审核信息
     */
    getExamineInfo() {
      return this.$refs["examine"].submitForm();
    },
    submitData() {
      this.dialogFormVisible = false;
      this.tableData = this.$refs.transfer.submitData();
    },

    /**
     * 取消按钮事件
     */
    cancelSubmit() {
      this.dialogFormVisible = false;
    },

    /**
     * 提交表单数据
     */
    submitForm() {
      let flag = false;
      this.$refs["form"].validate((valid) => {
        flag = valid;
        if (valid) {
          return true;
        } else {
          return false;
        }
      });
      const files = this.$refs["upload"].submitFiles();
      let existsFilesId = "";
      this.existsFiles.forEach((item, index) => {
        existsFilesId =
          existsFilesId +
          (index < this.existsFiles - 1 ? item.id + "," : item.id);
      });
      if (flag) {
        const examine = this.$refs["examine"].submitForm();
        // this.form.startTime = parseTime(
        //   new Date(this.form.startTime),
        //   "{y}-{m}-{d} {h}:{i}:{s}"
        // );
        // this.form.endTime = parseTime(
        //   new Date(this.form.endTime),
        //   "{y}-{m}-{d} {h}:{i}:{s}"
        // );
        return {
          form: this.form,
          vehicles: this.tableData,
          examine: examine,
          existsFilesId: existsFilesId,
          files: files,
        };
      } else return null;
    },
  },
};
</script>

<style lang="scss" scoped>
.form-container {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  bottom: 0;

  .el-pagination {
    margin-top: 16px;
  }

  .addBtn {
    height: 30px;
    font-size: 22px;
    color: #409eff;
    font-weight: bold;
    text-align: center;
    border: 1px solid #ebeef5;
    border-top: 0px;
    cursor: pointer;
  }
  .addBtn:hover {
    background: #ebeef5;
  }
  .tf-input-table {
    >>> .el-table__body-wrapper {
      max-height: 110px;
      overflow-y: auto !important;
    }
  }

  .tf-input-border {
    >>> input {
      border: 0 solid;
    }
  }

  .tf-col {
    .file {
      border: 1px solid #ebeef5;
      height: 40px;
      width: calc(100% - 20px);
      .file-name {
        width: calc(100% - 40px);
        float: left;
        padding: 0 10px;
        height: 40px;
        line-height: 40px;
      }
      .file-name:hover {
        background-color: #ebeef5;
        cursor: pointer;
      }
      .btn-file {
        width: 40px;
        float: left;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #ebeef5;
      }
      .btn-file:hover {
        color: #abbac7;
        cursor: pointer;
      }
    }
  }
}
.el-table {
  >>> .el-table__body {
    tr {
      &:nth-child(2n) {
        background-color: #f0f9eb;
      }
      td {
        height: 23px;
        line-height: 23px;
        padding: 2px 1px !important;
        .el-button {
          padding: 0;
        }
      }
    }
  }
}
.el-dialog__wrapper {
  >>> .el-form-item {
    margin-bottom: 15px !important;
  }
  .item-title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
    font-weight: 600;
    &::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 18px;
      vertical-align: text-bottom;
      background-color: #2d74e7;
      margin-right: 5px;
    }
  }
}
.tf-dialog {
  >>> .el-dialog__header {
    background: #2d74e7;
    .el-dialog__title {
      color: aliceblue !important;
    }
    .el-dialog__close {
      color: aliceblue !important;
    }
  }
  >>> .el-dialog__body {
    padding: 10px;
  }
}
>>> .el-form-item__error {
  margin-top: -7px;
}
</style>