spfm-market-front/src/pages/main/leader/demand/demandHomes.vue

<template>
  <div class="flex-box">
    <!-- 头部组件 -->
    <div :span="24" class="flex-header">
      <Tabs :tabList="tabList" @status="clickTabs">
        <!-- <UserIntegral slot="first" />
      <GrowthSystem slot="second" />
      <RuleConfiguration slot="third" /> -->
      </Tabs>
      <el-button
        type="primary"
        @click="clickNewTag"
        v-show="lable.name === 'first'"
        >+新建</el-button
      >
    </div>
    <div class="flex-count">
      <Table
        @clickDemand="clickDemand"
        :list="lable"
        ref="TableList"
        @num="getNum"
        @changeNum="changeNum"
      >
        <template v-slot:first>
          <Export
            :num="num"
            ref="export"
            :exportStatusList="exportStatus"
            @seachExportList="seachExportList"
            @export="batchExport"
            @clickApproval="clickApproval"
          ></Export>
        </template>
        <template v-slot:three>
          <Seach :list="filterData" @seachList="seachList"></Seach>
        </template>
      </Table>
    </div>
    <el-dialog
      :title="dialogTitle + '需求'"
      :visible.sync="dialogStatus"
      width="100%"
      :before-close="handleClose"
      :modal="false"
      v-if="dialogStatus"
      style="display: flex; flex-direction: column"
      :destroy-on-close="true"
    >
      <!-- 后期维护 -->
      <div style="position: fixed; z-index: 10000" v-if="buttonStatus">
        <el-button type="primary" v-if="startStatus" @click="clickHandles"
          >处理</el-button
        >
        <el-button type="primary" v-if="closeStatus" @click="handleClose"
          >关闭</el-button
        >
        <el-button
          type="primary"
          v-if="forwardStatus"
          @click="clickReassignment"
          >转需求管理平台</el-button
        >
        <el-button type="primary" v-if="exportBtnStatus" @click="clickExport"
          >导出</el-button
        >
        <el-button type="primary" v-if="saveStatus" @click="clickSave"
          >保存</el-button
        >
      </div>

      <FormTable
        :list="fromList"
        :disabled="disabled"
        class="flex-form"
        ref="formTable"
      />
      <div>
        <div class="table-title">流程追踪</div>
        <div v-if="abc == true">
          <Tables :list="lables"></Tables>
        </div>
      </div>
    </el-dialog>
    <div >
      <el-dialog
        title="处理操作"
        width="100%"
        :visible.sync="handleStatus"
        :before-close="handleCloses"
        :modal="false"
        v-if="handleStatus"
        :destroy-on-close="true"
      >
        <Workflow
          :list="fromList"
   
          @beforeClose="beforeClose"
          :requestForm="requestForm"
        />
        <!-- <WorkflowEntrance
          :list="fromList"
          v-else
          :lastManList="lastManList"
          @beforeClose="beforeClose"
          :requestForm="requestForm"
        /> -->

        <!-- 后期维护 -->
      </el-dialog>
    </div>

    <!-- <el-dialog
      title="修改常用意见"
      :visible.sync="editStatus"
      width="100%"
      :before-close="editCloses"
      :modal="false"
      :destroy-on-close="true"
    >
      <div style="overflow-y: scroll; overflow-x: hidden; height: 240px">
        <div
          v-for="(item, index) in commonlyList"
          :key="index"
          ref="common"
          class="flex-common"
        >
          {{ item.dataName
          }}<i class="el-icon-circle-close" @click="deleStatus(item)"></i>
        </div>
        <div class="flex-common">
          <i class="el-icon-circle-plus-outline" @click="addStatus()"></i>
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>
<script>
import Workflow from "../../../../components/workflow";
import WorkflowEntrance from "../../../../components/workflowEntrance";
import FormTable from "../components/formTable.vue";
import Seach from "../components/search.vue";
import Export from "../components/export.vue";
import Tabs from "../components/tabs.vue";
import Table from "../components/form.vue";
import Tables from "../components/formTrace.vue";
import deptTree from "../components/deptThree.vue";
import Qs from "qs";
export default {
  components: {
    Tabs,
    Table,
    Export,
    Seach,
    FormTable,
    deptTree,
    Workflow,
    WorkflowEntrance,
    Tables
  },
  data() {
    return {
      UserPermissionsList: [],
      isWorkflowStatus: true, //默认展示模式组件，为true时展示多人处理组件
      buttonStatus: true,
      copyStatus: false,
      dialogTitle: "",
      disabled: true,
      destroy: false,
      //分页数据
      totalPage: "1", //默认第一页
      currentPage: "1", //当前页数
      pageSize: "10", //每页显示十条
      currentPageList: ["1", "2"],
      startStatus: true,
      closeStatus: true, //关闭按钮状态
      forwardStatus: false, //转需求管理平台状态
      exportBtnStatus: false, //导出按钮状态
      saveStatus: false, //保存按钮状态
      fromList: {}, //表单数据
      rejectStatus: true,
      taskId: "", //工单taskID
      treeUser: {},
      formId: "",
      fileId: "", //工作流开启Id
      request_form: {
        userId: "",
        userName: "",
        path: this.$router.currentRoute.name,
        userCode: JSON.parse(window.sessionStorage.userInfo).loginNo,
        // path:this.$roter.options.routers,
        // nextDealMan:'',
        title: "title",
        businessKey: "288",
        processDefinitionKey: "request_form_process",
      },
      requestForm: {
        // fresourceId: "0d94de8a-0281-11ed-a302-4ae7da54db39", // 本地环境
        fresourceId: "bf79721c-33f3-11ed-ba0b-00505687dcd3", //测试环境
        processDefinitionKey: "request_form_process",
      },
      treeList: [], //候选人列表
      treeCopyList: [], //抄送人列表
      editStatus: false,
      querryList: [], //已选人员名单
      commonlyList: [
        //常用意见列表页
      ],
      textarea: "未填写意见",
      num: 0,
      dialogStatus: false, //新建dialog显示
      handleStatus: true, //处理按钮状态
      tabList: [
        {
          index: "first",
          label: "我的待办",
          number: 1,
          name: "prosss_key",
        },
        {
          index: "two",
          label: "我的已办",
          number: 2,
        },
        {
          index: "three",
          label: "我发起的",
          number: 3,
        },
        {
          index: "four",
          label: "待阅",
          number: 4,
        },
        {
          index: "five",
          label: "已阅",
          number: 5,
        },
      ],
      filterData: {
        timeSelect: false, //是否显示日期控件
        sreach: true,
        restet: false,
        elinput: [
          {
            name: "需求名称", //提示语275
            key: "needName", //字段名
            width: 275, //宽度
          },
        ],
        elselect: [
          {
            name: "状态",
            key: "taskName",
            width: 300,
            option: [
              {
                key: 1,
                value: "起草",
              },
              {
                key: 2,
                value: "部门人员审核",
              },
              {
                key: 3,
                value: "部门领导审核",
              },
              {
                key: 4,
                value: "市场需求管理员审核",
              },
              {
                key: 5,
                value: "起草人发送",
              },
              {
                key: 6,
                value: "送信息技术中心办理",
              },
              {
                key: 7,
                value: "业支人员办理",
              },
              {
                key: 8,
                value: "结束",
              },
            ],
          },
        ],
      },
      firstTable: {
        name: "first",
        titledata: [
          {
            label: "需求名称",
            prop: "needName",
            width: 300,
            color: "#0682CD",
          },
          {
            label: "需求类型",
            prop: "needType",
            width: 200,
          },
          {
            label: "发起部门",
            prop: "applyDept",
            width: 200,
          },
          {
            label: "发起科室",
            prop: "applyDepartment",
            width: 200,
          },
          {
            label: "发起人",
            prop: "proposer",
            width: 200,
          },
          {
            label: "发起时间",
            prop: "proposerTime",
            width: 250,
          },
          {
            label: "上一步处理人",
            prop: "predealman",
            width: 200,
          },
          {
            label: "状态",
            prop: "taskName",
            width: 200,
          },
        ], //表格头
        data: [], //内容数据
        loading: true,
        pageData: {
          total: 100, // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: true, // 表格有多选时设置
        isOperation: false, // 表格有操作列时设置
        isIndex: false, // 列表序号
        operation: {
          // 表格有操作列时设置
          label: "操作", // 列名
          width: "50", // 根据实际情况给宽度
          data: [
            {
              label: "操作", // 操作名称
              type: "", //按钮类型
              handleRow: (e, r, o) => {
                // this.disabled = true;
                // this.dialogTitle = "查看";
                // if (r.taskName === "起草") {
                //   this.disabled = false;
                // } else {
                //   this.disabled = true;
                // }
                // this.fromList = r;
                // this.clickForm(r);
                // this.getFromQuery(r);
                // this.dialogStatus = true;
                // setTimeout(() => {
                //   this.getBtnStatus(r);
                // }, 500);
                // this.formWorkId = r.id;
                // this.formId = r.taskId;
                // this.taskName = r.taskName;
                // this.getQuery()
              }, // 自定义事件
            },
          ],
        },
      },
      twoTable: {
        name: "two",
        disabled: true,
        titledata: [
          {
            label: "需求名称",
            prop: "needName",
            width: 300,
            color: "#0682CD",
          },
          {
            label: "发起部门",
            prop: "applyDept",
            width: 200,
          },
          {
            label: "发起科室",
            prop: "applyDepartment",
            width: 200,
          },
          {
            label: "发起人",
            prop: "proposer",
            width: 200,
          },
          {
            label: "发起时间",
            prop: "proposerTime",
            width: 250,
          },
          {
            label: "处理时间",
            prop: "endtime",
            width: 250,
          },
          {
            label: "状态",
            prop: "taskName",
            width: 200,
          },
        ], //表格头
        data: [], //内容数据
        loading: true,
        pageData: {
          total: 100, // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: false, // 表格有多选时设置
        isOperation: false, // 表格有操作列时设置
        isIndex: false, // 列表序号
        operation: {
          // 表格有操作列时设置
          label: "操作", // 列名
          width: "50", // 根据实际情况给宽度
          data: [
            {
              label: "操作", // 操作名称
              type: "", //按钮类型
              handleRow: function () {}, // 自定义事件
            },
          ],
        },
      },
      threeTable: {
        name: "three",
        titledata: [
          {
            label: "需求名称",
            prop: "needName",
            width: 300,
            color: "#0682CD",
          },
          {
            label: "需求类型",
            prop: "needType",
            width: 200,
          },
          {
            label: "发起部门",
            prop: "applyDept",
            width: 200,
          },
          {
            label: "发起科室",
            prop: "applyDepartment",
            width: 200,
          },
          {
            label: "发起人",
            prop: "proposer",
            width: 200,
          },
          {
            label: "发起时间",
            prop: "proposerTime",
            width: 250,
          },
          {
            label: "工单状态",
            prop: "taskName",
            width: 200,
          },
        ], //表格头
        data: [], //内容数据
        loading: true,
        pageData: {
          total: 100, // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: false, // 表格有多选时设置
        isOperation: true, // 表格有操作列时设置
        isIndex: false, // 列表序号
        operation: {
          // 表格有操作列时设置
          label: "支撑状态", // 列名
          width: "100", // 根据实际情况给宽度
          data: [
            {
              label: "查看", // 操作名称
              type: "", //按钮类型
              handleRow: (e, r, o) => {
                if (r.needNo !== null) {
                  this.$router.push({
                    path: "/supportState",
                    query: { id: r.needNo },
                  });
                  this.setabList(
                    "支撑状态查看",
                    "/supportState?id=" + r.needNo
                  );
                } else {
                  this.$message.error("暂无支撑状态可查看");
                }
                // this.getQuery()
              }, // 自定义事件
            },
          ],
        },
      },
      fourTable: {
        name: "four",
        titledata: [
          {
            label: "待阅需求",
            prop: "needName",
            width: 300,
            color: "#0682CD",
          },
          {
            label: "需求类型",
            prop: "needType",
            width: 200,
          },
          {
            label: "发起部门",
            prop: "applyDept",
            width: 200,
          },
          {
            label: "发起科室",
            prop: "applyDepartment",
            width: 200,
          },
          {
            label: "发起人",
            prop: "proposer",
            width: 200,
          },
          {
            label: "发起时间",
            prop: "proposerTime",
            width: 300,
          },
          {
            label: "状态",
            prop: "taskName",
            width: 200,
          },
        ], //表格头
        data: [], //内容数据
        loading: true,
        pageData: {
          total: 100, // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: false, // 表格有多选时设置
        isOperation: true, // 表格有操作列时设置
        isIndex: false, // 列表序号
        operation: {
          // 表格有操作列时设置
          label: "操作", // 列名
          width: "100", // 根据实际情况给宽度
          data: [
            {
              label: "查看", // 操作名称
              type: "", //按钮类型
              handleRow: (e, r, o) => {
                this.fromList = r;
                this.dialogStatus = true;
                this.disabled = true;
                this.buttonStatus = false;
                this.getReadList(r.copytaskid);
                this.clickForm(r)
              }, // 自定义事件
            },
          ],
        },
      },
      fiveTable: {
        name: "five",
        titledata: [
          {
            label: "需求名称",
            prop: "needName",
            width: 300,
            color: "#0682CD",
          },
          {
            label: "需求类型",
            prop: "needType",
            width: 200,
          },
          {
            label: "发起部门",
            prop: "applyDept",
            width: 200,
          },
          {
            label: "发起科室",
            prop: "applyDepartment",
            width: 200,
          },
          {
            label: "发起人",
            prop: "proposer",
            width: 200,
          },
          {
            label: "发起时间",
            prop: "proposerTime",
            width: 300,
          },
          // {
          //   label: "工单状态",
          //   prop: "taskName",
          //   width: 200,
          // },
        ], //表格头
        data: [], //内容数据
        loading: true,
        pageData: {
          total: 100, // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: false, // 表格有多选时设置
        isOperation: false, // 表格有操作列时设置
        isIndex: false, // 列表序号
        operation: {
          // 表格有操作列时设置
          label: "支撑状态", // 列名
          width: "100", // 根据实际情况给宽度
          data: [
            {
              label: "查看", // 操作名称
              type: "", //按钮类型
              handleRow: (e, r, o) => {
                this.getReadList(r.copytaskid);
                // if (r.needNo !== null) {
                //   this.$router.push({
                //     path: "/supportState",
                //     query: { id: r.needNo },
                //   });
                // } else {
                //   this.$message.error("暂无支撑状态可查看");
                // }
                // this.getQuery()
              }, // 自定义事件
            },
          ],
        },
      },
      abc: false,
      lable: {},
      copyUser: "", //抄送人
      backThree: [],
      backCopyThree: [], //抄送人数组
      lables: {
        height: "400",
        titledata: [
          {
            id: 1,
            label: "环节名称",
            prop: "taskName",
            width: 300,
          },
          {
            id: 2,
            label: "处理人",
            prop: "assignee",
            width: 300,
          },
          {
            id: 3,
            label: "到达时间",
            prop: "startTime",
            width: 300,
          },
          {
            id: 4,
            label: "处理时间",
            prop: "endTime",
            width: 300,
          },
          {
            id: 5,
            label: "回复意见",
            prop: "content",
            width: 300,
          },
        ], //表格头
        data: [], //内容数据
        loading: true,
        pageData: {
          total: 0, // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: false, // 表格有多选时设置
        isOperation: false, // 表格有操作列时设置
        isIndex: true, // 列表序号
        operation: {
          // 表格有操作列时设置
          label: "操作", // 列名
          width: "50", // 根据实际情况给宽度
          data: [
            {
              label: "操作", // 操作名称
              type: "", //按钮类型
              handleRow: function () {}, // 自定义事件
            },
          ],
        },
      },
      formWorkId: "",
      taskName: "", //工单是否为起草阶段
      clicknextName: "", //点击选择流程节点
      firstStatus: false,
      selectUser: "", //选择人userName
      isSync: "1", //什么yes no起草状态判断
      createdId: "", //获取表单创始人Id
      batchList: ["fanyan"], //多选数组
      exportStatus: false, //批量导出按钮权限控制
      userList: [
        //选择路径列表页
      ],
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
      },
      propsList: [],
      DepartmentName: "",
      seleIndex: 9,
      clickTagName: "first",
      value: "",
      nextPath: [],
      nextPaths: [],
      node: [],
      nodes: [],
      transferStatus: false,
      TransferStatus: false,
      CopyStatus: false,
      initialList: [],
      clickTaskName: "",
      seachLists: {},
      timeList: {},
      lastManList: [],
    };
  },
  created() {
    this.getUserIndex();
    // let A = [
    //   {
    //     id: 1,
    //     b: "456",
    //   },
    //   {
    //     id: 2,
    //     b: "456",
    //   },
    // ];
    // let B = [
    //   {
    //     a: 1,
    //     b: "4567",
    //   },
    //   {
    //     a: 1,
    //     b: "4568",
    //   },
    //   {
    //     a: 2,
    //     b: "4567",
    //   },
    // ];
    // A.map((item) => {
    //   item.c = [];
    //   let index = B.findIndex((items) => {
    //     if (items.a == item.id) {
    //       item.c.push(items);
    //     }
    //   });
    //   console.log(index);
    //  B.map((items,index) =>{
    //   if(item.id == items.a){
    //     item.c.push(items)
    //   }

    //  })
    // });
    // console.log(A);
    // function getUserDescribe(name) {
    //   const describeForNameMap = [
    //     [
    //       (name) => name.length > 3, // 判断条件
    //       () => console.log("名字太长"), // 执行函数
    //     ],
    //     [(name) => name.length < 2, () => console.log("名字太短")],
    //     [(name) => name[0] === "陈", () => console.log("小陈")],
    //     [(name) => name === "大鹏", () => console.log("管理员")],
    //     [
    //       (name) => name[0] === "李" && name !== "李鹏",
    //       () => console.log("小李"),
    //     ],
    //   ];
    //   // 获取符合条件的子数组
    //   const getDescribe = describeForNameMap.find((item) => item[0](name));
    //   // 子数组存在则运行子数组中的第二个元素（执行函数）
    //   getDescribe ? getDescribe[1]() : console.log("此人比较神秘！");
    // }
    // getUserDescribe('张元芳微软')
    // const func = (name, age = "fatfish") => {
    //   console.log(name);
    // };
    // func("123123123");

    //oa跳转回来显示
    let status = JSON.stringify(this.$route.query) == "{}";
    if (status) {
      this.getQueryList();
      this.getMeDone();
      this.getMeLaunch();
      this.getToBeRead();
      this.getBeReadList();
    } else {
      let { id, copy } = this.$route.query;
      let list = {
        taskId: id,
      };
      //待做
      if (copy == 0) {
        this.getQueryList(list, 0);
      }
      //待阅
      if (copy == 1) {
        this.clickTagName = "four";
        this.getToBeRead(list, 1);
      }
    }

    this.lable = this.firstTable;
  },
  methods: {
    //是否最后一个人
    async getLastName() {
      console.log(this.fromList);
      let list = {
        procinstid: this.fromList.processId,
        taskid: this.fromList.taskId,

        // taskId:e.taskId
      };
      let _this = this;
      let obj = {
        url: this.$url.formList.getLastName, //流程追踪接口
        data: list,
        // status: "form",
        headers: {
          "Content-Type": "application/json",
        },
      };

      let res = await this.common.httpPost(obj, success);
      function success(data) {
        _this.isWorkflowStatus = data.lastMan == false ? false : true;
        _this.lastManList = data;
        // console.log(_this.isWorkflowStatus);
      }
    },
    //添加面包屑
    setabList(n, p) {
      let params = {
        children: "",
        name: n,
        rountPath: p,
        target: "_self",
      };
      for (let i = 0; i < this.$store.state.tabList.length; i++) {
        if (this.$store.state.tabList[i].name === params.name) {
          this.$store.state.tabList[i] = params;
        }
      }
      let set = new Set([...this.$store.state.tabList, params]);
      set.add(params);
      this.$store.commit("setDefaultActive", params.rountPath);
      this.$store.commit("setTabList", Array.from(set));
    },
    beforeClose() {
      this.dialogStatus = false;
      this.handleCloses();
      this.getQueryList();
      this.getMeDone();
      this.getMeLaunch();
      this.getToBeRead();
      this.getBeReadList();
    },
    clickGetTree(e, index) {
      this.CopyStatus = false;
      this.TransferStatus = false;
      this.clickTaskName = e.properties.name;
      this.clicknextName = e.properties.name;
      this.seleIndex = index;
      this.getNextPath(e.resourceId); //1 为点击后获取线
    },
    //常用意见添加
    addStatus() {
      let newData = Date.parse(new Date());
      this.$prompt("请输入常用意见", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          let list = {
            dictCode: "approval",
            dataCode: newData,
            dataName: value,
            dictName: "审批意见",
          };
          this.geaddctType(list);
          this.$message({
            type: "success",
            message: "常用意见添加成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    //常用意见删除
    deleStatus(e) {
      this.$confirm("此操作将删除此常用意见, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let list = {
            dataCode: e.dataCode,
            dictCode: "approval",
          };
          this.geDelectType(list);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //转需求管理平台
    clickReassignment() {
      this.$http({
        url: "/market/waf/sync",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: this.$refs.formTable.form,
      }).then((res) => {
        this.$message.success("转需求管理平台成功！");
      });
    },
    //批量导出搜索
    seachExportList(e) {
      let timeList = {
        stime: e[0],
        etime: e[1],
      };
      this.timeList = timeList;

      this.getQueryList(this.timeList);
    },
    //点击工单状态跳转需求流程显示页面
    clickDemand(e, res) {
      if (e === "工单状态" || e === "需求名称") {
        if (this.clickTagName === "first") {
          this.disabled = true;
          this.dialogTitle = "查看";
          if (res.taskName === "起草") {
            this.disabled = false;
          } else {
            this.disabled = true;
          }
          // this.clickForm(res);
          // this.getFromQuery(res);
          setTimeout(() => {
            this.getBtnStatus(res);
          }, 500);
        }
        if (this.clickTagName === "two") {
          this.disabled = true;
          this.startStatus = false;
          this.saveStatus = false;
          this.forwardStatus = false;
          this.exportBtnStatus = false;
        }
        if (this.clickTagName === "three") {
          if (res.taskName === "起草") {
            this.startStatus = true;
            this.disabled = false;
            this.saveStatus = true;
          } else {
            this.startStatus = false;
            this.disabled = true;
            this.saveStatus = false;
          }
        }
        if (this.clickTagName === "four" || this.clickTagName === "five") {
          this.buttonStatus = false;
        }
        this.fromList = res;
        this.clickForm(res);
        this.getFromQuery(res);
      }
    },
    //批量导出
    batchExport() {
      this.downloadExcel(this.batchList);
    },
    clickExport() {
      let array = [];
      array.push(this.$refs.formTable.form);
      this.downloadExcel(array);
    },
    getNowTime() {
      let date = new Date();
      let year = date.getFullYear(); //获取当前年份
      let mon = date.getMonth() + 1; //获取当前月份
      let da = date.getDate(); //获取当前日
      let h = date.getHours(); //获取小时
      let m = date.getMinutes(); //获取分钟
      return year + "-" + mon + "-" + da + "-" + h + ":" + m;
    },
    //导出方法
    downloadExcel(e) {
      console.log(e.length);
      let res = this.getNowTime();
      this.$http({
        url: "/market/waf/exportAll",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        responseType: "blob",
        data: e,
      }).then((response) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let blob = new Blob([response.data.size], {
            type: "application/vnd.ms-excel;",
          });
          if (e.length > 1) {
            window.navigator.msSaveOrOpenBlob(
              blob,
              this.fromList.needName + ".zip"
            );
            // window.navigator.msSaveOrOpenBlob(blob, res + "需求申请单" + ".zip");
          } else {
            window.navigator.msSaveOrOpenBlob(
              blob,
              this.fromList.needName + ".zip"
            );
          }
          //window.navigator.msSaveOrOpenBlob(blob, t his.form.needName);
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          if (e.length > 1) {
            downloadElement.download = res + "需求申请单" + ".zip";
          } else {
            console.log(e);
            downloadElement.download = e[0].needName + ".zip";
          }

          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
      });
    },
    //驳回方法
    clickReject(res) {
      let e = "no";
      this.submitWork(e, res);
    },
    //我发起的接口
    getMeLaunch(e) {
      this.$http({
        url: "/market/waf/queryInitiate",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + this.totalPage + '","pageSize":"10"}',
        },
        data: e || {},
      }).then((res) => {
        // let size = this.isNaNStatus(res.data);
        this.tabList[2].number = res.data.totalRecord;
        this.threeTable.data = res.data.data;
        this.threeTable.pageData.total = res.data.totalRecord;
      });
    },
    //按钮权限方法
    getBtnStatus(e) {
      this.$refs.formTable.form = e;
    },
    //我的已办接口
    getMeDone() {
      this.$http({
        url: "/market/waf/queryDone",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + this.totalPage + '","pageSize":"10"}',
        },
        data: {},
      }).then((res) => {
        this.tabList[1].number = res.data.totalRecord;
        this.twoTable.data = res.data.data;
        this.twoTable.pageData.total = res.data.totalRecord;

        // let size = this.isNaNStatus(res.data);
        // this.tabList[1].number = size;
        // this.twoTable.pageData.total = res.data.totalRecord;
        // this.twoTable.pageData.total = res.data.size;
        // this.twoTable.data = res.data.list;
        // this.twoTable.data = this.getCurrentPageList(this.twoTable.data);
      });
    },
    isNaNStatus(e) {
      if (e.size === 0) {
        return "0";
      } else {
        return e.size;
      }
    },
    //选择树的回调
    changeTree(e) {
      console.log(e);
      // if (e.length > 1) {
      //   this.$message.error("只能选择一个人");
      //   return;
      // } else {
      //   this.backThree = e;
      //   if (e[0]) {
      //     this.selectUser = e[0].loginNameStr;
      //   } else {
      //     this.selectUser = "暂无选择";
      //   }
      // }
    },
    changeTreeCopy(e) {
      console.log(e);
      // if (e.length > 1) {
      //   this.$message.error("只能选择一个人");
      //   return;
      // } else {
      //   this.backCopyThree = e;
      //   if (e[0]) {
      //     this.copyUser = e[0].loginNameStr;
      //   } else {
      //     this.copyUser = "暂无选择";
      //   }
      // }
    },
    //查询form表单数据
    getFromQuery(e) {
      this.$http({
        url: "/market/waf/query",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: { id: e.id },
      }).then((res) => {
        // this.fromList = res.data;
        this.dialogStatus = true;
        // this.fromList = e;
        // console.log(this.$refs.formTable);
        // this.$refs.formTable.fileInfo.fileList = res.data.mkFileShareAttachList;
        this.fromList.mkFileShareAttachList = res.data.mkFileShareAttachList;
        this.taskId = res.data.taskId;
        if (res.data.taskName == "起草") {
          this.saveStatus = true;
        } else if (res.data.taskName === "部门人员审核") {
        } else if (res.data.taskName === "部门领导审核") {
        } else if (res.data.taskName === "市场需求管理员审核") {
          this.exportBtnStatus = true;
        } else if (res.data.taskName === "起草人发送") {
        } else if (res.data.taskName === "送信息技术中心办理") {
          this.exportBtnStatus = true;
        } else if (res.data.taskName === "业支人员办理") {
          this.exportBtnStatus = true;
          this.forwardStatus = true;
        } else if (res.data.taskName === "送起草人结束") {
        }
      });
    },
    //我发起的搜索内容
    seachList(e) {
      console.log(e);
      this.seachLists = e;
      this.getMeLaunch(e);
    },
    //点击修改
    clickEdit() {
      this.editStatus = true;
    },
    //点击职位显示右侧列表
    //常用意见点击选择
    clickCommonly(e) {
      this.textarea = e.currentTarget.innerHTML;
    },
    //保存按钮
    //获取自己idname
    getUserIds() {
      this.$http({
        url: "/market/waf/queryRoleByName",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          userCode: JSON.parse(window.sessionStorage.userInfo).loginNo,
        },
      }).then((res) => {
        this.request_form.userName = res.data.data.rows[0].name;
        this.request_form.userId = res.data.data.rows[0].userCode;
      });
    },
    getUserIndex() {
      this.$http({
        url: "/market/waf/queryRole",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          userCode: JSON.parse(window.sessionStorage.userInfo).loginNo,
        },
      }).then((res) => {
        console.log(res.data.data);
        let list = res.data.data.split(",");
        this.UserPermissionsList = list;
      });
    },
    async clickSave() {
      this.$refs.formTable.$refs.form.validate((valid) => {
        if (valid) {
          if (this.fromList.id) {
            this.setUpdate(this.$refs.formTable.form);
          } else {
            this.getUserIds();
            this.setForm();
          }
        } else {
          this.$message.error("请完善表单信息");
          return false;
        }
      });
    },
    //新建按钮
    async clickNewTag() {
      this.dialogTitle = "新建";
      this.lables.data = [];
      this.disabled = false;
      await this.getDepartmentName();
    },
    //获取用户部门名称
    getDepartmentName() {
      this.$http({
        url: "/market/waf/queryDept",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        let list = {
          applyDept: res.data,
          applyDepartment: JSON.parse(window.sessionStorage.userInfo).groupName,
          proposer: JSON.parse(window.sessionStorage.userInfo).loginName,
        };
        this.fromList = list;
        if (this.$refs.formTable) {
          this.$refs.formTable.form = list;
        }
        this.DepartmentName = res.data;

        this.dialogStatus = true;
        this.saveStatus = true;
      });
    },
    setForm(e) {
      this.request_form.title = this.$refs.formTable.form.needName;
      // this.$refs.formTable.form.taskId = e;
      this.$http({
        url: "/market/waf/add",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: this.$refs.formTable.form,
      }).then((res) => {
        this.request_form.businessKey = res.data.body;
        this.fromList.id = res.data.body;
        this.formWorkId = res.data.body;
        this.clickHandle(res.data.body);
      });
    },
    getNextPath(e) {
      let list = {
        // fresourceId: "bf79721c-33f3-11ed-ba0b-00505687dcd3", //测试环境
        fresourceId: this.requestForm.fresourceId, // 本地环境
        processId: this.requestForm.processDefinitionKey,
        // fresourceId: "0d94de8a-0281-11ed-a302-4ae7da54db39", // 本地环境
        // processId: "request_form_process",
        // resourceId: e,
      };
      if (e) {
        // this.propsList = [];
        list.resourceId = e;
      }
      this.$http({
        url: "/market/waf/queryPath",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: list,
      }).then((res) => {
        if (res.data.body.nextShapes[0].multi) {
          if (res.data.body.nextShapes[0].multi.multi === "true") {
            this.getLastName();
          }
        }
        if (this.fromList.taskId) {
          this.destroy = true;
          this.handleStatus = true;
          this.getMetirialType();
        } else {
          this.$message.error("请先点击保存按钮");
        }
      });
    },
    //处理按钮,开始工作流接口
    clickHandles() {
      console.log(this.fromList);
      this.getNextPath(this.fromList.resourceId || "");
    },

    //批量审批
    clickApproval(e) {
      this.fromList.taskName = this.batchList[0].taskName;
      let array = [];
      if (this.batchList.length > 1) {
        this.batchList.map((item, index) => {
          array.push(item.taskName);
        });
        let newArray = new Set(array);
        if (newArray.size > 1) {
          this.$message.error("需求申请单流程节点不一致");
        } else {
          this.handleStatus = true;
        }
      }
    },

    async clickForm(e) {
      let list = {
        processInstanceId: e.processId,
        // taskId:e.taskId
      };
      let _this = this;
      let obj = {
        url: this.$url.formList.getCommentsByProcessId, //流程追踪接口
        data: list,
        headers: {
          "Content-Type": "application/json",
        },
      };

      let res = await this.common.httpPost(obj, success);
      function success(data) {
        console.log('[ 接口返回值第一曾 ] >', data)
        let list = [];
        list = data.data.data;
        // list.map((item,index) => {
        //     item.startTime = _this.$util.datetimeFormat(item.startTime);
        //     item.endTime = _this.$util.datetimeFormat(item.endTime);
        //     item.id = index + 1;
        //   if (item.traceList) {
        //     if (item.traceList.length > 0) {
        //       item.children = item.traceList;
        //     }
        //   }
        // });
        // console.log(list);
        if (data.data.lastmandata.length != 0) {
          data.data.lastmandata.map((item, index) => {
            item.id = index + 22;
          });
        }
        list.map((item, index) => {
          item.startTime = _this.$util.datetimeFormat(item.startTime);
          item.endTime = _this.$util.datetimeFormat(item.endTime);
          item.id = index + 1;
          item.children = [];
          if (data.data.lastmandata.length != 0) {
            let indexs = data.data.lastmandata.findIndex((items) => {
              if (items.taskId == item.taskId) {
                item.children.push(items);
              }
            });
          }
        });
        console.log(list);

        _this.lables.data = list;
        console.log("[ _this.lables.data ] >", _this.lables.data);
        _this.abc = true;
      }
    },
    async clickHandle(e) {
      let _this = this;
      let obj = {
        url: this.$url.formList.startWork, //开始工作流接口
        data: _this.request_form,
        status: "form",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };

      let res = await this.common.httpPost(obj, success);
      function success(data) {
        _this.fromList.processId = data.data;
        _this.taskId = data.data;
        let list = {
          id: e,
          // taskId:_this.formId,
          processId: _this.fromList.processId,
          // resourceId: _this.nextPath.currentShape[0].resourceId,
        };
        _this.setUpdate(list);
      }
    },
    //更新工作流接口

    setUpdate(e) {
      this.$http({
        url: "/market/waf/update",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: e,
      }).then((res) => {
        this.$message.success("工单更新成功");
        this.fromList.taskId = res.data.body.taskId;
        this.fromList.taskName = res.data.body.taskName;
        this.fromList.processId = res.data.body.processId;
        if (res.data.body.taskName === "起草") {
          this.isSync = res.data.body.isSync;
        } else {
          this.isSync = "1";
        }
        // if (res.data.result === 0) {
        //   this.$message.success("工作流更新成功");
        // }
      });
    },
    //添加字典表常用意见
    geaddctType(e) {
      this.$http({
        url: "/market/cfgDataDict/add",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: e,
      }).then((res) => {
        this.getMetirialType();
      });
    },
    //删除字典表常用意见
    geDelectType(e) {
      this.$http({
        url: "/market/cfgDataDicts/del",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: e,
      }).then((res) => {
        this.getMetirialType();
      });
    },
    //获取字典表常用意见
    getMetirialType(e) {
      this.$http({
        url: "/market/cfgDataDict/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          dictCodePks: "approval",
        },
      }).then((res) => {
        this.commonlyList = res.data;
      });
    },
    //获取待阅接口
    getToBeRead(e, status) {
      this.$http({
        url: "/market/waf/queryReadList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + this.totalPage + '","pageSize":"10"}',
        },
        data: e || {},
      }).then((res) => {
        if (status === 1) {
          this.clickDemand("需求名称", res.data.data[0]);
          this.getReadList(res.data.data[0].copytaskid);
        }
        // let size = this.isNaNStatus(res.data);
        this.tabList[3].number = res.data.totalRecord;
        // this.fourTable.pageData.total = res.data.totalRecord;
        this.fourTable.pageData.total = res.data.totalRecord;
        this.fourTable.data = res.data.data;
        // this.lable.data = this.getCurrentPageList(this.fourTable.data);
      });
    },
    //获取已阅接口列表
    getBeReadList(e) {
      this.$http({
        url: "/market/waf/queryReadDone",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + this.totalPage + '","pageSize":"10"}',
        },
        data: e || {},
      }).then((res) => {
        // let size = this.isNaNStatus(res.data);
        this.tabList[4].number = res.data.totalRecord;
        // this.fourTable.pageData.total = res.data.totalRecord;
        this.fiveTable.pageData.total = res.data.totalRecord;
        this.fiveTable.data = res.data.data;
        // this.lable.data = this.getCurrentPageList(this.fiveTable.data);
      });
    },
    //点击查阅接口
    async getReadList(e) {
      let _this = this;
      let obj = {
        url: this.$url.formList.getReadList, //开始工作流接口
        data: { copytaskid: e },
        status: "form",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };

      let res = await this.common.httpPost(obj, success);
      function success(data) {
        console.log(data);
      }
    },
    //获取我的代办列表List
    getQueryList(e, status) {
      this.$http({
        url: "/market/waf/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
          page: '{"pageNo":"' + this.totalPage + '","pageSize":"10"}',
        },
        data: e || {},
      }).then((res) => {
        if (status === 0) {
          this.clickDemand("需求名称", res.data.data[0]);
        } else {
          this.tabList[0].number = res.data.totalRecord;
          // this.firstTable.data = res.data.data;
        }
        this.firstTable.data = res.data.data;
        this.firstTable.pageData.total = res.data.totalRecord;
        this.lable = this.firstTable;
      });
    },
    getCurrentPageList(e) {
      this.totalPage = Math.ceil(e.length / this.pageSize);
      this.totalPage = this.totalPage == 0 ? 1 : this.totalPage;
      let begin = (this.currentPage - 1) * this.pageSize;
      let end = this.currentPage * this.pageSize;
      this.currentPageList = e.slice(begin, end);
      return this.currentPageList;
    },
    getNum(e) {
      //多选数组
      this.batchList = e;
      console.log(e);
      if (e.length > 0) {
        let user = this.UserPermissionsList.findIndex(
          (item) => item === "市场需求管理员"
        );
        console.log(user);
        if (user != -1) {
          this.exportStatus = true;
        }
      } else {
        this.exportStatus = false;
      }
      this.num = e.length;
    },
    //获取页码
    changeNum(e) {
      this.totalPage = e;
      if (this.clickTagName === "first") {
        if (this.timeList) {
          this.getQueryList(this.timeList);
        } else {
          this.getQueryList();
        }
      } else if (this.clickTagName === "two") {
        this.getMeDone();
      } else if (this.clickTagName === "three") {
        console.log(this.seachLists);
        if (this.seachLists) {
          this.getMeLaunch(this.seachLists);
        } else {
          this.getMeLaunch();
        }
      } else if (this.clickTagName === "four") {
        this.getToBeRead();

        // this.fourTable.data = this.getCurrentPageList(this.fourTable.data);
      } else {
        this.getBeReadList();
      }
    },
    clickTabs(e) {
      this.buttonStatus = true;
      this.clickTagName = e;
      this.$refs.TableList.page = 1;
      this.totalPage = "1";
      // console.log(this.$refs.table);
      //重新网络请求
      if (this.firstTable.name == e) {
        this.lable = this.firstTable;
        this.getQueryList();
      } else if (this.twoTable.name == e) {
        this.lable = this.twoTable;
        this.getMeDone();
      } else if (this.threeTable.name === e) {
        this.lable = this.threeTable;
        this.getMeLaunch();
      } else if (this.fourTable.name === e) {
        this.lable = this.fourTable;
        this.getToBeRead();
      } else {
        this.lable = this.fiveTable;
        this.getBeReadList();
      }
      // console.log(this.lable);
    },

    handleClose() {
      this.dialogStatus = false;
      this.forwardStatus = false;
      this.exportBtnStatus = false;
      this.saveStatus = false;
      this.startStatus = true;
      this.closeStatus = true;
      this.abc = false;
      // this.fromList = {};
    },
    handleCloses() {
      this.treeList = [];
      this.textarea = "";
      this.handleStatus = false;
    },
    editCloses() {
      this.editStatus = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.copyClass {
  display: flex;
}
.flex-count {
  // overflow-y: auto;
  //     overflow-x: initial;

  // height: au;
}
.flex-header-text-tree {
  width: 50%;
  text-align: center;
}
.active {
  background-color: #f3faff;
}
.flex-common {
  padding: 10px 5%;
  font-size: 18px;
}
.flex-buttons {
  background-color: #cde4f6;
  border-color: #cde4f6;
  color: #606266;
}
.flex-button {
  margin-top: 10px;
  margin-bottom: 10px;
  ::v-deep .el-button--primary {
    width: 222px;
  }
}
.flex-left-header-text {
  height: 40px;
  line-height: 40px;
  color: black;
  padding-left: 10px;
  background-color: #cde4f6;
  font-size: 18px;
  font-weight: bold;
}
.flex-right-text {
  margin-right: 20px;
  width: 50%;
}
.flex-handle {
  width: 100%;
  padding: 30px;
  display: flex;
  .flex-right {
    width: 50%;
    border: 1px solid #e1e1e1;
    margin-left: 20px;
  }
  .flex-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    .flex-left-header {
      display: flex;
      justify-content: space-around;
    }
  }
}
.table-title {
  height: 50px;
  line-height: 50px;
  background-color: #f3faff;
  font-size: 18px;
  font-weight: bold;
}
::v-deep .el-dialog {
  margin-top: 0 !important;
}
// ::v-deep .el-table__fixed-body-wrapper {
//   top: 50px !important;
// }
.flex-box {
  display: flex;
  // overflow: auto;
  overflow-y: auto;
  overflow-x: hidden;
  width: calc(100% - 40px);
  border-radius: 20px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 20px;
  position: relative;
  flex-direction: column;
  // height: 100%;
  .flex-header {
    display: flex;
    width: 100%;
    position: relative;
    height: 60px;
    margin: 1%;
    border-bottom: 1px solid #e1e1e1;
    justify-content: space-between;
    .el-button {
      width: 150px;
      float: right;
      height: 40px !important;
      margin-right: 30px;
    }
  }
}
//设置子组件样式
::v-deep .el-tabs__item {
  padding: 0;
  margin-right: 20px;
  width: 166px;
  text-align: center;
  background-color: #d8eaf6;
  color: black;
}
::v-deep .is-active {
  color: #fff;
  background-color: #0583cd;
}
::v-deep .el-tabs__active-bar {
  display: none;
}
::v-deep .el-tabs__nav-wrap::after {
  display: none !important;
}
.flex-form {
  margin-top: 50px;
}
.flex-footer-botton {
  display: flex;
  justify-content: space-evenly;
}
</style>