spfm-market-front/src/pages/main/applyFor/internetAccess.vue

<template>
  <div class="container">
    <div class="titbox">
      <div class="titbox-flex">
        <eltabs :tabList="tabList" @status="clickTabs"></eltabs>
        <el-button type="primary" @click="newMake()" style="width: 150px; height: 40px; margin: 10px 15px 0 0"
          v-if="editstatus">+新建</el-button>
      </div>
      <tableList :list="Table" ref="TableList" @clickDemand="clickDemand" @changeNum="changeNum"></tableList>
      <el-dialog :title="dialogTitle + '工单'" :visible.sync="dialogVisible" v-if="dialogVisible"
        :before-close="handleClose" width="100%" height="500vh" class="dialogClass" top="0" :modal="false"
        :modal-append-to-body="true">
        <span class="dialog-body">
          <div>
            <el-button type="primary" @click="newFormgong" v-if="baocun">保存</el-button>
            <el-button type="primary" v-if="deal" @click="dealwith()">处理</el-button>
            <el-button type="primary" @click="close()">关闭</el-button>
          </div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!--dialogVisible1 = true -->
            <div class="flex-title">互联网访问端口开放</div>
            <div class="flex-header">
              <el-form-item label="文件标题" prop="needName" style="width: 33%">
                <el-input v-model="ruleForm.needName" :disabled="isdisabled"></el-input>
              </el-form-item>
              <el-form-item label="发起人" prop="proposer" style="width: 33%">
                <el-input v-model="ruleForm.proposer" disabled></el-input>
              </el-form-item>
              <el-form-item label="工单流水号" prop="workOrderNo" style="width: 33%">
                <el-input v-model="ruleForm.workOrderNo" disabled></el-input>
              </el-form-item>

            </div>
            <div class="flex-header">
              <el-form-item label="内网IP" prop="intranetIp" style="width: 33%">
                <el-input v-model="ruleForm.intranetIp" :disabled="isdisabled"></el-input>
              </el-form-item>
              <el-form-item label="内网端口" prop="intranetPort" style="width: 33%">
                <el-input v-model="ruleForm.intranetPort" :disabled="isdisabled"></el-input>
              </el-form-item>
              <el-form-item label="发起时间" prop="proposerTime" style="width: 33%">
                <el-input v-model="ruleForm.proposerTime" disabled></el-input>
              </el-form-item>

            </div>
            <!-- @change="changeDeptValue" -->
            <div class="flex-header">
              <el-form-item label="公网IP" prop="publicNetworkIp" style="width: 33%">
                <el-input v-model="ruleForm.publicNetworkIp" :disabled="isdisabled"></el-input>
              </el-form-item>
              <el-form-item label="公网端口" prop="publicNetworkPort" style="width: 33%">
                <el-input v-model="ruleForm.publicNetworkPort" :disabled="isdisabled"></el-input>
              </el-form-item>
            </div>
            <div class="flex-header">
              <el-form-item label="域名" prop="realmName" style="width: 33%">
                <el-input v-model="ruleForm.realmName" :disabled="isdisabled"></el-input>
              </el-form-item>
              <el-form-item label="业务用途" prop="businessPurpose" style="width: 33%">
                <el-input v-model="ruleForm.businessPurpose" :disabled="isdisabled"></el-input>
              </el-form-item>
            </div>
            <div class="flex-header-upload flex-upload" style="display: flex; flex-direction: column">
              <el-form-item label="附件:" prop="mkFileShareAttachList" label-width="68px">
                <my-upload @uploadBack="uploadBack" @clickDownload="download" :disabled="updisabled" :fileInfo="fileInfo"
                  :fileList="fileInfo.fileList" ref="myupload" style="width: 15% ; heigth: 120% !important">

                </my-upload>
              </el-form-item>
            </div>
          </el-form>
          <div class="table-title">
            <h2>流程追踪</h2>
          </div>
          <div class="flex-header-process">
            <!-- <tableList :list="processTable" ref="el-form" @clickDemand = "clickDemand"></tableList> -->
            <el-table :data="tableData" row-key="id" :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
              style="width: 100%" max-height="350">
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="taskName" label="环节名称" width="280" class="is-center">
              </el-table-column>
              <el-table-column prop="assignee" label="处理人" width="280">
              </el-table-column>
              <el-table-column prop="startTime" label="到达时间" width="280">
              </el-table-column>
              <el-table-column prop="endTime" label="处理时间" width="280">
              </el-table-column>
              <el-table-column prop="content" label="回复意见" width="280">
              </el-table-column>

            </el-table>
          </div>
        </span>
      </el-dialog>
    </div>
    <div class="containtbox">
      <el-dialog title="处理操作" :visible.sync="dialogVisible1" v-if="dialogVisible1" :before-close="handleCloses"
        width="100%" height="100vh" class="dialogClass" top="0" :modal="false" :modal-append-to-body="true"
        :destroy-on-close="true">
        <!--  -->
        <!-- <Workflow :list="ruleForm" :requestForm="requestForm" @dialogVisible1 = "Visible1"/> -->
        <Workflow :list="ruleForm" @updateForm="updateForm" :requestForm="requestForm"
          :request_formTitle="request_form.title" />
        <!-- @dialogVisible1 = "Visible1" -->
        <!-- <WorkflowEntrance
          :list="ruleForm"
          v-else
          :lastManList="lastManList"
          
         @beforeClose = "beforeClose"
          :requestForm="requestForm"
        /> -->
        <span slot="footer" class="dialog-footer">
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import eltabs from "../../../components/el-tabs";
import tableList from "../../../components/el-form";
import myUpload from "../../../components/uploadfour";
import Workflow from "../../../components/workflowBase";
// import Workflow from "../../../components/workflow";
import WorkflowEntrance from "../../../components/workflowEntrance";
import getConfig from '../../../config/dev.js'
import {
  getTodoBase,
  getDoneBase,
  getInitiateBase,
} from "../../../http/api.js";
export default {
  components: {
    eltabs,
    tableList,
    myUpload,
    Workflow,
    WorkflowEntrance,
  },
  data() {
    return {
      editstatus: true,
      dialogVisible: false,
      deal: true,
      baocun: true,
      isdisabled: false,
      xiaohu: false,
      dialogVisible1: false,
      updisabled: false,
      xinzeng: true,
      shanchu: true,
      isWorkflowStatus: true, //默认展示模式组件，为true时展示多人处理组件
      childname: 'first',
      dialogTitle: "",
      page: "1",
      currentPage: "1", //当前页数
      pageSize: "10", //每页显示十条
      fileInfo: {
        type: "bt1n",
        typename: "上传文件",
        limit: 50,
        url: "/market/waf/uploadByMinio",
        fileList: [],
      },
      tableData: [],
      optionList: [],
      mkFileShareAttachList: [],
      requestForm: {
        // fresourceId: "2c4fd13a-b32a-11ed-886f-d6cd97160e00",
        // fresourceId: "094631e4-b33f-11ed-be6b-00505687dcd3",
        fresourceId: getConfig().internetAccess,
        processDefinitionKey: "HLW_process",
        taskId: "",
      },
      request_form: {
        userId: "",
        userName: "",
        path: this.$router.currentRoute.name,
        userCode: JSON.parse(window.sessionStorage.userInfo).loginNo,
        title: "",
        businessKey: "",
        processDefinitionKey: "HLW_process",
      },
      lastManList: [],
      fufujian: [],
      fuback: [],
      ruleForm: {
        //      domains: [{
        //         value: ''
        //       }],
        //    attId:[],
        //     bsAccount: [],
        //     bsAmount: [],
        //     tzOutNo: [],
        //     tzInNo: [],
      },
      tabList: [
        {
          index: "first",
          label: "我的待办",
          number: "",
          name: "prosss_key",
        },
        {
          index: "two",
          label: "我的已办",
          number: "",
        },
        {
          index: "three",
          label: "我发起的",
          number: "",
        },
      ],

      Table: {},
      firstTable: {
        name: "first",
        height: "500",
        titledata: [
          {
            label: "文件标题",
            prop: "need_name",
            width: 310,
          },
          {
            label: "发起人",
            prop: "proposer",
            width: 310,
          },
          {
            label: "发起时间",
            prop: "proposer_time",
            width: 310,
          },
          {
            label: "当前环节",
            prop: "taskName",
            width: 310,
          },
        ], //表格头
        data: [
          {
            label: "文件标题", // 操作名
            handleRow: (e, r, o) => {

              this.operationZuo(r);
            }
          }
        ], //内容数据
        loading: true,
        pageData: {
          total: 100, // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: false, // 表格有多选时设置
        isOperation: false, // 表格有操作列时设置
        isIndex: false, // 列表序号
        operation: {
          // 表格有操作列时设置
          label: "操作", // 列名
          width: "50", // 根据实际情况给宽度

          data: [],
        },
      },
      twoTable: {
        name: "two",

        titledata: [
          {
            label: "文件标题",
            prop: "need_name",
            width: 310,
          },
          {
            label: "发起人",
            prop: "proposer",
            width: 310,
          },
          {
            label: "发起时间",
            prop: "proposer_time",
            width: 310,
          },
          {
            label: "当前环节",
            prop: "taskName",
            width: 310,
          },
        ],
        data: [], //内容数据
        loading: true,
        pageData: {
          total: 100, // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: false,
      },
      threeTable: {
        name: "three",

        titledata: [
          {
            label: "文件标题",
            prop: "need_name",
            width: 250,
          },
          {
            label: "发起人",
            prop: "proposer",
            width: 250,
          },
          {
            label: "发起时间",
            prop: "proposer_time",
            width: 300,
          },
          {
            label: "当前环节",
            prop: "taskName",
            width: 250,
          },
          {
            label: "当前处理人",
            prop: "currentMan",
            width: 250,
          },
        ],
        data: [], //内容数据
        loading: true,
        pageData: {
          total: 100, // 总条数
          pageSize: 10, // 每页数量
          pageNum: 1, // 页码
        },
        isSelection: false,
      },
      rules: {
        needName: [{ required: true, message: "请输入文件标题", trigger: "blur" },],
        proposer: [{ required: true, message: "请输入发起人", trigger: "blur" }],
        workOrderNo: [{ required: true, message: "请输入文件流水号", trigger: "blur" }],
        proposerType: [{ required: true, message: "请选择申请类别", trigger: "change" }],
        dealMan: [{ required: true, message: "请选择处理部门接收人", trigger: "change" }],
        proposerTime: [{ required: true, message: "请输入拟稿时间", trigger: "blur" }],
        proposerContent: [{ required: true, message: "请输入申请内容", trigger: "blur" }],

      },
    };
  },
  watch: {

    "ruleForm.taskName1": {
      handler(e) {

        if (e != "外网访问端口申请") {

          this.disshan = true;
          this.disxin = true;
        } else {

        }
      }
    },
  },
  methods: {
    download(u) {


      // if (this.ruleForm.wfFileShareAttachList.length > 1) {
      this.$http({
        url: "/market/waf/downAllFileByMinio",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        responseType: "blob",
        data: { wfFileShareAttachList: this.fileInfo.fileList },
      }).then((response) => {
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          let blob = new Blob([response.data], {
            type: "application/vnd.ms-excel",
          });
          window.navigator.msSaveOrOpenBlob(
            blob,
            new Date().getTime().toString() + ".zip"
          );
        } else {
          /* 火狐谷歌的文件下载方式 */
          var blob = new Blob([response.data]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          // downloadElement.download = this.ruleForm.fileName + ".zip";
          downloadElement.download = "附件.zip";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        }
        if (this.infolist.authType === "3") {
          this.dialogCli(10);
        }
      });

    },
    handleClose() {
      this.ruleForm = {};
      this.backlogTodo();
      this.haveDone();
      this.iniTiate();
      this.getneedNo();
      this.dialogVisible = false;
      this.tableData = [];
      this.fileInfo.fileList = [];
    },
    handleCloses() {
      this.treeList = [];
      this.textarea = "";
      this.dialogVisible1 = false;

    },
    clickTabs(name) {


      this.$refs.TableList.page = 1;
      this.childname = name;

      this.page = 1;
      this.baocun = false;
      if (name == "first") {
        this.Table = this.firstTable;
        this.backlogTodo();
        this.deal = true;
        this.baocun = false;
        this.editstatus = true;
      } else {
        this.editstatus = false;
      }
      if (name == "two") {
        this.Table = this.twoTable;
        this.haveDone();
        this.deal = false;
        this.baocun = false;
      }
      if (name == "three") {
        this.Table = this.threeTable;
        this.iniTiate();
        this.baocun = false;
      }
    },
    clickDemand(e, r) {

      if (e === "文件标题") {
        if (this.childname == "first") {
          if (r.taskName == "外网访问端口申请") {
            this.isdisabled = false;
            this.deal = true;
            this.baocun = true;
            this.shanchu = true;
            this.xinzeng = true;
          } else {
            this.isdisabled = true;
            this.deal = true;
            this.baocun = false;
            this.shanchu = false;
            this.xinzeng = false;
          }
        }
        if (this.childname == "two") {
          this.isdisabled = true;
          this.deal = false;
          this.baocun = false;
          this.shanchu = false;
          this.xinzeng = false;
        }
        if (this.childname == "three") {
          this.shanchu = false;
          this.xinzeng = false;
          this.isdisabled = true;
          if (r.taskName == "外网访问端口申请") {
            this.isdisabled = false;
            this.deal = true;
            this.baocun = true;
          } else {
            this.deal = false;
            this.baocun = false;
          }
        }
        this.operationZuo(r);
        this.clickForm(r);

      }
    },
    operationZuo(r) {

      let list = {}
      list.id = r.id,

        this.$http({
          url: "/market/HlwProcess/query",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: list,
        }).then((res) => {
          this.dialogTitle = "查看";
          this.dialogVisible = true;
          this.ruleForm = res.data;
          this.ruleForm.taskId = r.taskId;
          this.ruleForm.resourceId = r.resourceId;
          this.ruleForm.createId = r.createId;

          this.ruleForm.taskName1 = r.taskName;
          this.fileInfo.fileList = res.data.mkFileShareAttachList;
          if (r.taskName == "外网访问端口申请") {
            this.ruleForm.tableName1 = "外网访问端口申请"
          } else {

            this.baocun = false;
          }
          if (r.taskName != "外网访问端口申请") {
            this.updisabled = true;
          } else {
            this.updisabled = false;
          }
          this.handleCloses();
        });
    },
    changeNum(val) {
      this.page = val;

      switch (this.childname) {
        case "first":
          this.backlogTodo();
          // this.iniTiate();

          break;
        case "two":
          this.haveDone();

          break;
        case "three":

          this.iniTiate();
        // this.Table = this.thirdTable;
      }
    },
    uploadBack(u) {

      this.attList = u;

    },
    close() {
      this.handleClose();
    },
    newMake() {
      this.dialogTitle = "新建";
      this.baocun = true;
      this.dialogVisible = true;
      // this.ruleForm = {}
      this.isdisabled = false;
      this.getUser();
      this.time();
    },
    getUser() {
      this.userInfo = JSON.parse(window.sessionStorage.userInfo);
      // this.ruleForm.docId = this.userInfo.loginNo;
      this.ruleForm.proposer = this.userInfo.loginName;

    },
    time() {
      // this.ruleForm.createTime = this.formatDateTime;
      this.ruleForm.proposerTime = this.$formatDate(new Date(), "YYYY-MM-DD");
      // this.ruleForm.docId = this.$formatDate(new Date(), "YYYYMMDDHHmmss");
    },
    changeSelect(e) { },
    newFormgong() {
      this.submitForm();


    },
    submitForm(formName) {

      this.$refs.ruleForm.validate((valid) => {

        if (valid) {
          this.$message.success("保存成功");

          this.getUserIds();
          // this.iniTiate();
          // this.newForm();
          //  if(this.ruleForm.tableName1 == "外网访问端口申请" || this.ruleForm.id){

          //   this.newUpdate();
          // }else{
          //   this.newForm();
          // }

        } else {

          this.$message.error("请完善表单信息");
          return false;
        }
      });
    },
    newForm() {
      //         for(let i = 0; i<this.fuback.length; i++){

      //     this.ruleForm.attId.push(this.fuback[i].id);

      //   }
      this.ruleForm.mkFileShareAttachList = this.attList;
      this.$http({
        url: "/market/HlwProcess/add",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: this.ruleForm,
      }).then((res) => {

        this.ruleForm.id = res.data.body;
        this.request_form.businessKey = res.data.body;
        this.request_form.title = '[IT工作台]-' + '互联网访问端口开放-' + this.$refs.ruleForm.model.needName;

        this.clickHandle(this.ruleForm);
        if (res.data.body == null) {
          this.$message.error("请先点保存");
        }

      });

    },
    newUpdate() {
      //         for(let i = 0; i<this.fuback.length; i++){

      //     this.ruleForm.attId.push(this.fuback[i].id);

      //   }
      if (this.attList == null) {
        this.ruleForm.mkFileShareAttachList = this.fileInfo.fileList
      } else {
        this.ruleForm.mkFileShareAttachList = this.attList;
      }
      this.request_form.title = '[IT工作台]-' + '互联网访问端口开放-' + this.$refs.ruleForm.model.needName;
      this.$http({
        url: "/market/HlwProcess/update",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: this.ruleForm,
      }).then((res) => {

      });
    },
    //获取userID
    getUserIds() {
      let id = JSON.parse(window.sessionStorage.userInfo).loginNo
      this.$http({
        url: "/market//api/user/info/queryNodePers?params=" + id,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          // params: JSON.parse(window.sessionStorage.userInfo).loginNo,
        },
      }).then((res) => {
        this.request_form.userName = res.data[0].children[0].loginNameStr;
        this.request_form.userId = res.data[0].children[0].loginNoStr;
        this.request_form.title = '[IT工作台]-' + '互联网访问端口开放-' + this.$refs.ruleForm.model.needName;

        if (this.ruleForm.tableName1 == "外网访问端口申请" || this.ruleForm.id) {

          this.newUpdate();
        } else {
          this.newForm();
        }
      });
    },
    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.ruleForm.taskId = _this.ruleForm.taskId;
        // a = a 
        //         _this.taskId = data.data;

        _this.ruleForm.processId = data.data;
        let list = {
          id: e.id,
          // taskId:_this.formId,
          processId: data.data,
          tableName: _this.requestForm.processDefinitionKey,

          // resourceId: _this.nextPath.currentShape[0].resourceId,
        };

        _this.setUpdate(list);
      }
    },
    //更新工作流接口

    setUpdate(e) {

      this.$http({
        url: "/market/waf/updateBase",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: e,
      }).then((res) => {
        this.ruleForm.taskId = res.data.body[0].taskId;

      });
    },
    async clickForm(r) {
      let list = {
        processInstanceId: r.process_id,
        // 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) {
        _this.tableData = data.data.data;
        data.data.data.map((item) => {
          item.startTime = _this.$util.datetimeFormat(item.startTime);
          item.endTime = _this.$util.datetimeFormat(item.endTime);
        });
        // _this.getProcess(e, data.data);
        _this.tableData = data.data.data;
      }
    },

    //   async clickForm(r) {
    //   let list = {
    //     processInstanceId: r.process_id,
    //     // 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(item.children);
    //     });
    //     console.log(list);

    //     // _this.lables.data = list;
    //     _this.tableData = list;
    //     // console.log("[ _this.lables.data ] >", _this.lables.data);
    //     // _this.abc = true;
    //   }
    // },


    //处理按钮,开始工作流接口
    dealwith() {
      if (this.ruleForm.id) {
        this.dialogVisible1 = true;
        this.request_form.title = '[IT工作台]-' + '互联网访问端口开放-' + this.$refs.ruleForm.model.needName;
      } else {
        this.$message.error("请先点保存按钮");
      }
    },
    //需求编号
    getneedNo() {
      this.$http({
        url: "/market/HlwProcess/getNeedNo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },

      }).then((res) => {

        // this.ruleForm.applyNew = res.data;
        this.ruleForm.workOrderNo = res.data.body;
      });
    },
    getdealMan() {
      let id = "itcThird"
      this.$http({
        url: "/market//api/user/info/queryNodePers?params=" + id,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },

      }).then((res) => {

        for (let i = 0; i < res.data.length; i++) {

          for (let j = 0; j < res.data[i].children.length; j++) {

            this.optionList.push({
              name: res.data[i].children[j].label
            })
          }
        }

      });
    },

    backlogTodo(e, status) {
      let list = {
        tableName: this.requestForm.processDefinitionKey,
      };
      // getInitiateBase   getTodoBase
      getTodoBase(this.page, "", e || list).then((res) => {
        if (status === 0) {
          this.clickDemand("文件标题", res.data.data[0]);
        }
        this.firstTable.data = res.data.data;
        this.firstTable.pageData.total = res.data.totalRecord;
        // this.Table = this.firstTable;
        this.tabList[0].number = res.data.totalRecord;
      })

    },
    iniTiate() {
      let list = {
        tableName: this.requestForm.processDefinitionKey
      };
      getInitiateBase(this.page, "", list).then((res) => {
        this.threeTable.data = res.data.data;
        this.threeTable.pageData.total = res.data.totalRecord;

        this.tabList[2].number = res.data.totalRecord;



      })

    },
    //我的已办
    haveDone() {
      //  let list = {}
      // list.tableName = this.requestForm.processDefinitionKey,
      //  this.$http({
      //   url: "/market/waf/queryDoneBase",
      //   method: "post",
      //   headers: {
      //     "Content-Type": "application/json",
      //     page: '{"pageNo":"' + this.totalPage + '","pageSize":"10"}',
      //   },
      //   data: list,
      // }).then((res) => {
      //   this.tabList[1].number = res.data.totalRecord;
      //   this.twoTable.data = res.data.data;
      //   this.twoTable.pageData.total = res.data.totalRecord;
      //   this.Table = this.twoTable;

      // });
      let list = {
        tableName: this.requestForm.processDefinitionKey
      }
      getDoneBase(this.page, "", list).then((res) => {
        this.twoTable.data = res.data.data;
        this.twoTable.pageData.total = res.data.totalRecord;

        this.tabList[1].number = res.data.totalRecord;
      })

    },
    updateForm() {
      this.handleClose();
      this.iniTiate();
      this.haveDone();
      this.handleCloses();

    },

  },
  mounted() {

  },
  created() {
    let status = JSON.stringify(this.$route.query) == "{}";
    if (status) {
      this.Table = this.firstTable;
      this.haveDone();
      this.iniTiate();
      this.backlogTodo();
      this.getneedNo();
      this.getdealMan();
    } else {
      let { id, type } = this.$route.query;
      let list = {
        taskId: id,
        tableName: this.requestForm.processDefinitionKey,
      };
      this.Table = this.firstTable;
      this.haveDone();
      this.iniTiate();
      this.backlogTodo(list, 0);
      this.getneedNo();
      this.getdealMan();
    }
  },
};
</script>

<style scoped lang="scss">
.container {
  height: 650px;
}

.titbox {
  width: 100%;
}

.titbox-flex {
  width: 100%;
  height: 75px;

  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e1e1e1;
}

::v-deep .el-tabs__nav {
  margin: 12px 0 0 12px;
}

::v-deep .el-tabs__nav-wrap::after {
  display: none;
}

::v-deep .el-tabs__active-bar {
  display: none;
}

::v-deep .el-tabs .is-active {
  color: #fff;
  background-color: #0583cd;
}

::v-deep .el-tabs__item {
  padding: 0;
  margin-right: 20px;
  width: 166px;
  text-align: center;
  background-color: #d8eaf6;
  color: #000;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  position: relative;
}

::v-deep .el-form-item__content {
  display: flex;
}

// ::v-deep .el-input__inner{
//   width:162px;
// }
::v-deep .container .el-upload-dragger {
  width: 192px !important;
  height: 116px !important;
}

.containtbox {
  ::v-deep .el-dialog.import-dialog {
    height: auto;
    max-height: 80vh;
  }
}

// ::v-deep .el-dialog {
//   height: auto;
//   max-height: 1500vh;
// }
.flex-title {
  width: 100%;
  height: 63px;
  margin-top: 10px;
  text-align: center;
  font-size: 24px;
  line-height: 60px;
  // border-bottom: 1px solid #e1e1e1;
  font-weight: 700;
}

.flex-header {
  width: 100%;
  height: 63px;
  margin-top: 20px;
  display: flex;
  border-bottom: 1px solid #e1e1e1;

  span {
    margin: 10px 0 0 22px;
  }

  .el-input {
    width: 162px;
  }

  ::v-deep .el-input__inner {
    width: 162px;
  }
}

.flex-header-dongtai {
  margin-top: 20px;
  display: flex;

  // border-bottom: 1px solid #e1e1e1;
  span {
    margin: 10px 0 0 22px;
  }

  .el-input {
    width: 162px;
  }

  ::v-deep .el-input__inner {
    width: 162px;
  }
}

.flex-header-input {
  width: 100%;
  height: 63px;
  margin-top: 20px;
  display: flex;
  border-bottom: 1px solid #e1e1e1;

  ::v-deep .el-form-item {
    width: 100%;
    // margin-right: 5%;
  }

  .el-input {
    width: 100%;
  }
}

.flex-header-upload {
  width: 100%;
  height: 200px;
  margin-top: 20px;
  display: flex;
  border-bottom: 1px solid #e1e1e1;
  overflow: auto;

  span {
    margin: 10px 0 0 25px;
  }

  ::v-deep .el-form-item__content {
    line-height: 25px;
  }

  ::v-deep .container .el-upload {
    width: 200%;
  }

  //  ::v-deep .el-form-item {
  //   width: 150%;
  // }
}

.flex-upload {
  ::v-deep .el-form-item {
    width: 100%;
  }

  ::v-deep .container__el-upload {
    width: 200%;
  }
}

.table-title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: rgb(243, 250, 255);
  // font-size: 18px;
  font-weight: 700;
}

.flex-header-process {
  width: 100%;
  // height: 242px;
  display: flex;
}

.flex-header-process .el-table .el-table__cell .is-center {
  text-align: center;

}

// .el-upload__tip{

// }
</style>