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

<template>
  <!-- 会议申请 -->
  <div class="content-container">
    <div class="right-box">
      <div class="top">
        <el-form
          ref="form"
          :inline="true"
          :model="form"
          style="float: left; height: 45px"
        >
          <el-form-item label="关键字:">
            <el-input
              v-model="form.content"
              size="small"
              placeholder="请输入会议单号、会议名称"
              style="width: 220px"
            ></el-input>
          </el-form-item>

          <el-form-item label="申请部门:">
            <el-select
              v-model="form.registerDept"
              filterable
              clearable
              collapse-tags
              placeholder="请选择申请部门"
              size="small"
            >
              <el-option
                v-for="item in allDept"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="申请时间:">
            <el-date-picker
              v-model="form.purchaseTime"
              type="daterange"
              align="right"
              value-format="yyyy-MM-dd"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              size="small"
              style="width: 240px"
            />
          </el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="queryProcess"
            style="margin-top: 4px"
            >查询</el-button
          >
        </el-form>

        <el-button
          type="primary"
          @click="orderRegister"
          icon="el-icon-plus"
          size="small"
          >会议申请</el-button
        >
      </div>
      <div class="table-div">
        <el-table
          :data="tableData"
          style="width: 100%"
          :style="{ width: '100%' }"
          height="100%"
          :header-cell-style="{
            background: 'rgba(250,250,250)',
            color: 'rgb(50,59,65)',
            height: '38px',
            textAlign: 'center',
          }"
        >
          <template slot="empty">
            <img src="@/assets/icon/null.png" alt="" />
            <p class="empty-p">暂无数据</p>
          </template>
          <el-table-column type="selection" align="center"></el-table-column>
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60px"
          ></el-table-column>
          <el-table-column
            prop="processNumber"
            label="会议单号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="会议名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="roomName"
            label="地点"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="startTime"
            label="开始时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="registerDeptName"
            label="申请部门"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ getDeptName(row.registerDept) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="registerStaffName"
            label="申请人"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{
                getUserName(row.registerDept, row.registerStaff)
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="registerTime"
            label="申请时间"
            align="center"
          ></el-table-column>
          <el-table-column prop="processState" label="流程状态" align="center">
            <template slot-scope="{ row }">
              <span>{{ getOrderStateNameById(row.processState) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click="queryOrderProcessById(scope.row, false)"
                icon="el-icon-tickets"
                title="查看"
                type="text"
                size="small"
                style="font-size: 16px"
              ></el-button>
              <el-button
                v-if="scope.row.processState == 1"
                @click="queryOrderProcessById(scope.row, true)"
                icon="el-icon-edit"
                title="修改"
                type="text"
                size="small"
                style="font-size: 16px"
              ></el-button>
              <el-button
                v-if="scope.row.processState == 1"
                @click="delOrderProcessById(scope.row)"
                icon="el-icon-delete"
                title="删除"
                type="text"
                size="small"
                style="font-size: 16px; color: red"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        :current-page="pagination.current"
        :page-sizes="[20, 30, 50, 100, 200]"
        :page-size="pagination.size"
        :total="pagination.total"
        @size-change="changePaginationSize"
        @current-change="changePaginationCurrent"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
    <!-- 详情 -->
    <el-dialog
      class="tf-dialog"
      :title="title"
      :visible.sync="dialogFormVisible"
      width="1200px"
      top="60px"
      style="padding: 10px"
    >
      <process-order
        v-if="dialogFormVisible"
        ref="merge"
        :orderName="orderName"
        :orderCode="orderCode"
        :businessType="businessType"
        :proId="processId"
        :optionType="optionType"
        :editData="editData"
        :comps="compts"
        @remind="remind"
      ></process-order>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small"
          >取 消</el-button
        >
        <el-button
          v-if="optionType != 0"
          @click="preserveHandler(0)"
          size="small"
          >保 存</el-button
        >
        <el-button
          v-if="optionType != 0"
          type="primary"
          @click="preserveHandler(1)"
          size="small"
          >提 交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAllUserInfo } from "@/api/base";
import {
  getTypetree,
  getProcessPageList,
  queryProcessPage,
  getProcessList2,
  qOrderProcessById,
  addOrderProcess,
  delOrderProcess,
  querySupervisePage,
} from "@/api/process/process";
import { config } from "../../../components/cfgOrderProcess";
import processOrder from "@/views/mbsys/publicOrder/orderProcess/detail";
import { publicComponents } from "../processForm/config";
export default {
  components: { processOrder },
  data() {
    return {
      // form
      config: config,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      allDept: [], //所有部门
      curUser: null, //当前登录人
      orderName: "会议申请单", //工单名称
      orderCode: "", //工单编号
      form: {
        content: "", //关键字
        supplierId: "", //供应商
      },
      tableData: [],
      title: "",
      pagination: { current: 1, size: 20, total: 0 },
      dialogFormVisible: false,
      curProcess: null,
      businessType: 0, //业务类型
      optionType: 0, //操作类型 0：查看，1：新增，2：修改
      editData: {}, //操作数据
      processId: 0, //流程ID
      compts: publicComponents,
      curEditRow: null, //当前操作数据
    };
  },
  watch: {},
  created() {
    this.curUser = this.$store.state.user;
    //获取业务类别
    getTypetree({ datatypes: 0, id: "" })
      .then((res) => {
        if (res.code === 1) {
          if (res.result.length > 0)
            if (res.result[0].vos.length > 1)
              this.businessTypes = res.result[0].vos[0].vos;
        }
      })
      .catch((ex) => {
        this.$message.error("获取数据出错！");
      });
    /**
     * 查询所有用户所有部门和所有人
     */
    getAllUserInfo().then((res) => {
      if (res.code == 1) {
        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.allDept = data;
      }
    });
    this.getProcess();
  },
  methods: {
    /**
     * 根据部门ID获取部门名称
     */
    getDeptName(deptId) {
      if (this.allDept.length > 0) {
        const dept = this.allDept.find((item) => item.id == deptId);
        if (dept) return dept.name;
        else deptId;
      } else return deptId;
    },
    /**
     * 根据部门ID和人员id获取人员名称
     */
    getUserName(deptId, userId) {
      if (this.allDept.length > 0) {
        const dept = this.allDept.find((item) => item.id == deptId);
        if (dept) {
          const user = dept.users.find((p) => p.id == userId);
          if (user) return user.realName;
          else return userId;
        } else return userId;
      } else return userId;
    },
    changePaginationSize(value) {
      this.pagination.size = value;
      this.queryProcess();
    },

    changePaginationCurrent(value) {
      this.pagination.current = value;
      this.queryProcess();
    },

    /**
     * 获取催办消息
     */
    async getUrgeInfo(data) {
      // this.tableData.forEach((row) => {

      // });
      let tableList = data;
      for (let i = 0; i < tableList.length; i++) {
        tableList[i]["urgeInfo"] = "";
        if (tableList[i].urgeNumber > 0) {
          let data = {
            processId: tableList[i].id, //流程ID
            nodeBranch: tableList[i].nodeBranch, //流程节点分支
            processNode: tableList[i].processNode, //流程节点
            superviseDept: parseInt(this.curUser.departmentId), //督办部门
            superviseStaff: this.curUser.userId, //督办人
          };
          const res = await this.querySupervisePage(data);

          let result = [];
          if (res) {
            res.result.records.forEach((item) => {
              const dept = this.getDeptName(item.handleDept);
              result.push(
                item.createTime +
                  " " +
                  dept +
                  " " +
                  item.createUserName +
                  " " +
                  item.remark
              );
            });
          }

          tableList[i]["urgeInfo"] = result;
        }
      }
      this.tableData = tableList;
    },

    /**
     * 查询工单列表
     */
    queryProcess() {
      //带入当前登录人查询
      //ywType 业务类型，基础类型
      //configId 流程类型
      //registerStaff 登记人
      //processState 工单状态：1草稿、2处理、3终止、4处理完成
      let map = {
        // processType: 94,
        configId: this.processId,
        registerStaff: Number(this.curUser.userId),
      };
      let params = {
        id: 3,
        map,
      };
      let { current, size, total } = this.pagination;
      let url = `current=${current}&size=${size}&total=${total}`;

      if (this.form.content != "")
        Object.assign(map, { content: this.form.content });
      if (this.form.registerDept != "")
        Object.assign(map, { registerDept: this.form.registerDept });
      if (this.form.purchaseTime) {
        Object.assign(map, {
          stratTime: this.form.purchaseTime[0] + " 00:00:00",
          endTime: this.form.purchaseTime[1] + " 23:59:59",
        });
      }
      getProcessList2(params, url).then((res) => {
        if (res.code == 1) {
          //this.tableData = res.result.records;
          this.getUrgeInfo(res.result.records);
          this.pagination.total = res.result.total;
        }
      });
    },

    /**
     * 查询列表数据
     */
    getProcess() {
      let data = {
        current: 1,
        size: 999,
      };
      getProcessPageList(data)
        .then((res) => {
          this.curProcess = res.result.records.find(
            (item) => item.processNumber === "HYLC"
          );
          if (this.curProcess) {
            this.processId = this.curProcess.id;
            this.businessType = this.curProcess.hasOwnProperty("processType")
              ? this.curProcess.processType
              : null;
          }
          this.queryProcess();
        })
        .catch((ex) => {
          this.$message.error("获取流程列表失败！");
        });
    },

    // 提示
    remind(data) {
      this.dialogFormVisible = false;
      //设置初始操作类型
      this.optionType = 1;
      this.queryProcess();
    },

    orderRegister() {
      this.title = "会议申请-新增";
      this.optionType = 1; //操作类型 0：查看，1：新增，2：修改
      this.editData = {};
      this.curEditRow = null;
      this.dialogFormVisible = true;
    },
    /**
     * 根据id获取工单状态
     */
    getOrderStateNameById(id) {
      if (this.config && this.config.hasOwnProperty("orderState")) {
        const obj = this.config.orderState.find((item) => item.key === id);
        if (obj) return obj.value;
        else return id;
      } else {
        return id;
      }
    },
    /**
     * 通过id查询工单流程信息
     * @row 查询数据
     * @type 操作类型 false：查看，true：修改
     */
    queryOrderProcessById(row, type) {
      this.curEditRow = type ? row : null;
      qOrderProcessById(row.id).then((res) => {
        if (res.code == 1) {
          this.title = type ? "会议申请-修改" : "会议申请-详情";
          this.optionType = type ? 2 : 0;
          this.editData = res.result;
          this.dialogFormVisible = true;
        }
      });
    },

    /**
     * 删除工单流程
     */
    delOrderProcessById(row) {
      this.$confirm(
        `此操作将永久删除单号为【${row.processNumber}】名称为【${row.name}】的单, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteOrder(row.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /***
     * 删除工单流程
     */
    deleteOrder(id) {
      delOrderProcess(id).then((res) => {
        if (res.code == 1) {
          this.queryProcess();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        } else {
          this.$message({
            type: "error",
            message: "删除失败",
          });
        }
      });
    },
    /**
     * 新增工单流程信息
     */
    addOrder(param) {
      addOrderProcess(param).then((res) => {
        if (res.code == 1) {
          this.dialogFormVisible = false;
          this.queryProcess();
          this.$message.success("编辑成功!");
        }
      });
    },

    /**
     * 提交数据
     * @state 操作状态  保存为0，提交为1
     */
    preserveHandler(state) {
      let params = this.$refs.merge.submitForm();
      console.log("提交数据", params);
      if (params == null) return;
      //处理提交参数到接口参数映射
      let data = this.formParamMapping(params, state);
      if (data) this.addOrder(data);
    },

    /**
     * 表单参数映射到提交参数
     */
    formParamMapping(data, state) {
      let params = {
        operateState: 0, //	表单类型：0、其它； 1、采购入库（关联采购工单）；2、余料退库（关联出库工单）；3、工程出库（关联工程工单）；4其它出库；5、维修出库（关联维修工单）
      };
      let formData = new FormData();
      if (this.curEditRow != null)
        Object.assign(params, { id: this.curEditRow.id }); //流程ID
      //表单字段
      if (data.hasOwnProperty("configId")) {
        params = Object.assign(params, { configId: data.configId }); //流程配置ID
      }
      let documentDto = {
        content: data.form.content, //会议内容
        theme: data.form.name, //主题
      };
      // 关联设施字段
      let prdtos = [];
      prdtos.push({
        relationId: data.form.relationId, //会议地址
        tableId: 1, //会议地址
      });
      let processNode = {
        //第一步
        handleResults: 0, //处理结果0:不处理；1:同意；2:不同意；
        saveState: state, //0保存，1提交
        annex: data.hasOwnProperty("existsFilesId") ? data.existsFilesId : "", //附件id
        remark: data.hasOwnProperty("examine") ? data.examine.remarks : "",
        typeOne: data.form.typeOne, //是否发送通知
        documentDto,
        prdtos,
        staffDtos: data.form.staffDtos,
      };
      if (data.hasOwnProperty("form")) {
        Object.assign(params, {
          name: data.form.name, //	表单名称
          registerTime: data.form.registerTime, //登记时间
          startTime:
            data.form.startTime.length > 11
              ? data.form.startTime
              : data.form.startTime + " 00:00:00", // 时间
          endTime:
            data.form.endTime.length > 11
              ? data.form.endTime
              : data.form.endTime + " 00:00:00", // 时间
          remark: data.form.remark, //备注
          totalPrice: data.form.totalPrice, // 人数
        });
      }
      Object.assign(params, { ywType: this.businessType }); //业务类型
      //审核信息
      if (data.hasOwnProperty("examine")) {
        //下一步审核
        let nextStep = {
          dept: data.examine.hasOwnProperty("dept") ? data.examine.dept : "", //部门
          deptStaff: data.examine.hasOwnProperty("deptStaff")
            ? data.examine.deptStaff
            : "", //人员
          processStep: data.examine.hasOwnProperty("processStep")
            ? data.examine.processStep
            : 1, //流程步骤
          stepNode: data.examine.hasOwnProperty("stepNode")
            ? data.examine.stepNode
            : 1, //步骤节点
        };

        Object.assign(processNode, {
          headleState: data.examine.headleState, //处理状态：1提交;2:驳回;3:转派;4:终止;
          nextStep: nextStep, //下一步信息,下一步，驳回，转派
          processStep: 1, //流程步骤(当前)
          stepNode: 1, //步骤节点(当前)
        });
        if (
          state == 1 &&
          data.examine.headleState == 1 &&
          (nextStep.deptStaff == "" || nextStep.deptStaff == null)
        ) {
          this.$message.warning("提交请选择下一步审核人");
          return null;
        }
      }
      //	步骤节点 stepNode
      Object.assign(params, { stepNode: 1 });

      Object.assign(params, { processNode: processNode }); //业务类型
      const json = JSON.stringify(params);
      // 将 json 字符串转化为 Blob 对象
      const blob = new Blob([json], {
        type: "application/json",
      });
      formData.append("dto", blob);
      //文件
      if (data.hasOwnProperty("files")) {
        let files = [];
        data.files.forEach((file, index) => {
          formData.append("fileList", file.file);
        });
      }
      return formData;
    },
    // 详细
    newPlanForMonthDia(bool, e) {},
    // 新增页面确定按钮
    applicationFn() {
      if (!this.sizeForm.name) return this.$message.error("请输入会议名称");
      if (!this.sizeForm.address) return this.$message.error("请输入地点");
      if (!this.sizeForm.startDate)
        return this.$message.error("请输入会议时间");
      if (!this.sizeForm.people) return this.$message.error("请输入参会人员");
      if (!this.sizeForm.department)
        return this.$message.error("请输入申请部门");
      if (!this.sizeForm.name2) return this.$message.error("请输入申请人");
      if (!this.sizeForm.value1) return this.$message.error("请输入申请时间");
    },
  },
};
</script>
<style lang="scss" scoped>
.content-container {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  position: absolute;
  top: 43px;
  bottom: 0;

  .right-box {
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;

    .top {
      height: 33px;
      text-align: right;

      .upload-demo {
        display: inline-block;
      }
    }
    // /deep/.el-form-item__content {
    //   display: flex;
    //   align-items: center;
    // }

    .table-div {
      height: calc(100% - 81px);
    }

    .el-pagination {
      margin-top: 16px;
    }
  }
}
.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;
        }
      }
    }
  }
}

.tf-dialog {
  >>> .el-dialog__header {
    background: #2d74e7;
    .el-dialog__title {
      color: aliceblue !important;
    }
    .el-dialog__close {
      color: aliceblue !important;
    }
  }
}
</style>