需管渠道1

package.json

@@ -18,6 +18,7 @@
     "@fullcalendar/daygrid": "^5.10.1",
     "@fullcalendar/interaction": "^5.10.1",
     "@fullcalendar/vue": "^5.10.1",
+    "@onlyoffice/document-editor-vue": "^1.3.0",
     "@tinymce/tinymce-vue": "^3.0.1",
     "axios": "^0.19.0",
     "canvg": "^3.0.7",
@@ -33,8 +34,10 @@
     "jquery-ui": "^1.12.1",
     "js-audio-recorder": "^1.0.7",
     "jsplumb": "^2.15.5",
+    "lodash.merge": "^4.6.2",
     "luckyexcel": "^1.0.1",
     "moment": "^2.29.1",
+    "onlyoffice-vue": "^1.0.1",
     "qs": "^6.9.1",
     "sass": "^1.46.0",
     "tinymce": "^5.7.1",

src/assets/js/common.js

@@ -261,11 +261,12 @@ let common = {
         if (obj.type == 'post') {
             bus.$axios['post'](obj.url + '?t=' + Math.random(), obj.data, header)
                 .then(function (response) {
-                    // console.log(response.data)
+                    console.log(response)
                     if (!obj.disableLoading) {
                         loading.close()
                     }
                     if (process.env.VUE_APP_ENV == 'development' || process.env.VUE_APP_ENV == 'devs') {
+                        console.log(11111111111);
                         if (response.code === 1 || response.code == '1') {
                             bus.$message.success(response.message)
                             loading.close()

src/components/el-form.vue

@@ -1,56 +1,24 @@
 <template>
   <div>
     <slot :name="list.name"></slot>
-    <el-table
-      ref="table"
-      style="width: 100%"
-      :data="list.data"
-      :height="list.height + 'px'"
-      :max-height="list.height + 'px'"
-      @row-click="getRowData"
-      @selection-change="selectionChange"
-      empty-text="暂无数据"
-      @cell-click="getRowList"
-      :cell-style="columnbackgroundStyle"
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-    >
+    <el-table ref="table" style="width: 100%" :data="list.data" :height="list.height + 'px'"
+      :max-height="list.height + 'px'" @row-click="getRowData" @selection-change="selectionChange" empty-text="暂无数据"
+      @cell-click="getRowList" :cell-style="columnbackgroundStyle"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
       <!-- 是否多选 -->
-      <el-table-column
-        v-if="list.isSelection"
-        :selecttable="list"
-        type="selection"
-        :width="list.width || 50"
-        align="center"
-      />
+      <el-table-column v-if="list.isSelection" :selecttable="list" type="selection" :width="list.width || 50"
+        align="center" />
 
       <!-- 是否需要序号 -->
-      <el-table-column
-        v-if="list.isIndex"
-        type="index"
-        label="序号"
-        width="55"
-        align="center"
-      />
+      <el-table-column v-if="list.isIndex" type="index" label="序号" width="55" align="center" />
       <template v-for="item in list.titledata">
-        <el-table-column
-          :key="item.prop"
-          :prop="item.prop"
-          :label="item.label"
-          align="center"
-          show-overflow-tooltip
-          :width="item.width || 100"
-        />
+        <el-table-column :key="item.prop" :prop="item.prop" :label="item.label" align="center" show-overflow-tooltip
+          :width="item.width || 100" />
       </template>
       <!-- 操作列 -->
-      <el-table-column
-        v-if="list.isOperation"
-        v-bind="list.data && list.data.length ? { fixed: 'right' } : null"
-        style="margin-right: 20px"
-        class-name="handle-td"
-        label-class-name="tc"
-        :label="list.operation.label"
-        align="center"
-      >
+      <el-table-column v-if="list.isOperation" v-bind="list.data && list.data.length ? { fixed: 'right' } : null"
+        style="margin-right: 20px" class-name="handle-td" label-class-name="tc" :label="list.operation.label"
+        align="center">
         <!-- UI统一一排放3个，4个以上出现更多 -->
         <template slot-scope="scope">
           <!-- 三个一排的情况，去掉隐藏的按钮后的长度 -->
@@ -58,23 +26,15 @@
             <div class="btn">
               <div v-for="item in list.operation.data" :key="item.label">
                 <template v-if="item.type !== 'icon'">
-                  <el-button
-                    v-bind="item"
-                    :type="item.type ? item.type : ''"
-                    size="mini"
-                    @click.native.prevent="
-                      item.handleRow(scope.$index, scope.row, item.label)
-                    "
-                  >
+                  <el-button v-bind="item" :type="item.type ? item.type : ''" size="mini" @click.native.prevent="
+                    item.handleRow(scope.$index, scope.row, item.label)
+                  ">
                     {{ item.label }}
                   </el-button>
                 </template>
                 <template v-else>
-                  <i
-                    :class="[icon, item.icon]"
-                    v-bind="item"
-                    @click="item.handleRow(scope.$index, scope.row, item.label)"
-                  />
+                  <i :class="[icon, item.icon]" v-bind="item"
+                    @click="item.handleRow(scope.$index, scope.row, item.label)" />
                 </template>
               </div>
             </div>
@@ -83,28 +43,20 @@
       </el-table-column>
     </el-table>
     <div class="page">
-      <el-pagination
-        style="display: flex; flex-direction: row-reverse"
-        v-if="list.pageData.total > 0"
-        :current-page.sync="page"
-        :page-sizes="
+      <el-pagination style="display: flex; flex-direction: row-reverse" v-if="list.pageData.total > 0"
+        :current-page.sync="page" :page-sizes="
           list.pageData.pageSizes ? list.pageData.pageSizes : [5, 10, 15, 20]
-        "
-        :page-size="list.pageData.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="list.pageData.total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
+        " :page-size="list.pageData.pageSize" layout="total, sizes, prev, pager, next, jumper"
+        :total="list.pageData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  data(){
-    return{
-     page:1
+  data() {
+    return {
+      page: 1
     }
   },
   props: {
@@ -121,11 +73,11 @@ export default {
     columnbackgroundStyle({ row, column, rowIndex, columnIndex }) {
       if (column.type == "default") {
         if (column.type == "default") {
-        if (column.property === "need_name"||column.property === "needName"||column.property === "doc_title"||column.property === "document_title") {
-          return "color:#0682CD;";
+          if (column.property === "need_name" || column.property === "needName" || column.property === "doc_title" || column.property === "document_title" || column.property === "title") {
+            return "color:#0682CD;";
+          }
         }
       }
-      }
     },
     selectionChange(val) {
 
@@ -133,11 +85,11 @@ export default {
       this.$emit("num", val);
     },
     handleAdd(name) {
-     
+
       this.$emit("toolMsg", name);
     },
     handleRow(index, row, lable) {
-     
+
     },
     handleSizeChange(val) {
       this.$emit("changeSize", val);
@@ -159,7 +111,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.btn{
+.btn {
   display: flex;
   justify-content: center;
 }

src/components/index.js

@@ -0,0 +1,23 @@
+import OnlyofficeEditor from './onlyoffice-editor'
+
+const components = [
+  OnlyofficeEditor
+]
+
+const install = (Vue) => {
+  components.forEach((component) => {
+    Vue.component(component.name, component)
+  })
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export {
+  OnlyofficeEditor
+}
+export default {
+  install,
+  version: '1.0.1'
+}

src/components/onlyoffice-editor/index.js

@@ -0,0 +1,3 @@
+import OnlyofficeEditor from './onlyoffice-editor.vue'
+
+export default OnlyofficeEditor

src/components/onlyoffice-editor/onlyoffice-editor.vue

@@ -0,0 +1,140 @@
+
+<template>
+  <div :id="editorId"></div>
+</template>
+
+<script>
+import merge from 'lodash.merge'
+let script
+// 脚本标识
+const scriptId = 'onlyoffice-editor'
+// 异步加载 api.js
+const loadScript = src => new Promise((resolve, reject) => {
+  script = document.querySelector(`#${scriptId}`)
+  // 加载成功
+  const onLoad = () => {
+    resolve()
+    script.removeEventListener('load', onLoad)
+  }
+  // 加载失败
+  const onError = () => {
+    reject(new Error(`脚本 ${src} 加载失败`))
+    script.removeEventListener('error', onError)
+  }
+  if (!script) {
+    script = document.createElement('script')
+    script.id = scriptId
+    script.src = src
+    script.addEventListener('load', onLoad)
+    script.addEventListener('error', onError)
+    document.head.appendChild(script)
+  } else if (window.DocsAPI) {
+    resolve()
+  } else {
+    script.addEventListener('load', onLoad)
+    script.addEventListener('error', onError)
+  }
+})
+export default {
+  name: 'onlyoffice-editor',
+  props: {
+    /**
+     * Onlyoffice 配置项
+     */
+    config: {
+      type: Object,
+      required: true,
+      validator: value => value && Object.prototype.toString.call(value) === '[object Object]' && Object.keys(value).length > 0
+    },
+    /**
+     * Onlyoffice api.js 路径地址
+     */
+    src: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      // 编辑器配置项，完整配置项参见：https://api.onlyoffice.com/editors/config/
+      editorConfig: {
+        // 编辑器宽度
+        width: 1200,
+        // 编辑器高度
+        height: 600,
+        // 编辑器类型，支持 word、cell（表格）、slide（PPT）
+        documentType: 'word',
+        // 文档配置
+        document: {
+          // 权限
+          permissions: {
+            // 启用评论
+            comment: false,
+            // 启用下载
+            download: true,
+            // 启用编辑
+            edit: true,
+            // 启用导出
+            print: true,
+            // 启用预览
+            review: true
+          }
+        },
+        editorConfig: {
+          // 回调地址
+          callbackUrl: this.src,
+          // 设置语言
+          lang: 'zh-CN',
+          // customization 字段相关配置详解：https://api.onlyoffice.com/editors/config/editor/customization
+          customization: {
+            // 强制保存
+            forcesave: true,
+            features: {
+              // 关闭拼写检查
+              spellcheck: false
+            }
+          }
+        }
+      },
+      scriptId,
+      editorId: `editor-${new Date().getTime().toString('32')}`
+    }
+  },
+  watch: {
+    config: {
+      handler () {
+        this.initEditor()
+      },
+      deep: true
+    },
+    src () {
+      this.initEditor()
+    }
+  },
+  mounted () {
+    this.initEditor()
+  },
+  beforeDestroy () {
+    // 组件销毁前销毁编辑器
+    if (this.editor) {
+      this.editor.destroyEditor()
+      this.editor = null
+    }
+  },
+  methods: {
+    // 初始化编辑器
+    initEditor () {
+      loadScript(this.src).then(this.createEditor)
+    },
+    // 创建编辑器
+    createEditor () {
+      if (this.editor) {
+        this.editor.destroyEditor()
+        this.editor = null
+      }
+      this.editor = new window.DocsAPI.DocEditor(this.editorId, merge({}, this.editorConfig, this.config))
+      this.$emit('ready', this.editor)
+    }
+  }
+}
+</script>

src/components/workflowBase.vue

@@ -77,7 +77,7 @@
     </div>
     <div class="flex-footer-botton">
       <div class="flex-button">
-        <el-button type="primary" @click="submitWork()">提交</el-button>
+        <el-button type="primary" @click="submitWork()" :loading="buttonLoading">提交</el-button>
       </div>
     </div>
     <el-dialog title="修改常用意见" :visible.sync="editStatus" width="100%" :before-close="editCloses" :modal="false"
@@ -105,6 +105,7 @@ export default {
   data() {
     return {
       active: "",
+      buttonLoading: false, //按钮loadding
       manyPeopleStatus: false, //多人处理下发任务
       editStatus: false, //常用意见控制
       transferStatus: false, //转派按钮控制
@@ -212,6 +213,7 @@ export default {
       }
     },
     submitWork() {
+      this.buttonLoading = true
       //多人会签处理环节
       let list = {
         userId: JSON.parse(window.sessionStorage.userInfo).loginNo, //人员id
@@ -230,7 +232,7 @@ export default {
         content: this.textarea, //意见内容
       };
       if (this.manyPeopleStatus == true) {
-        list.procinstid = this.list.processId;
+        list.procinstid = this.list.process_id;
         // if (this.backThree.length <= 1) {
         // this.$message.error("请选择多人");
         // return;
@@ -316,6 +318,7 @@ export default {
       });
     },
     async nextWork(list) {
+      console.log(list);
       //e:yes||no,list：传入数组，title:结束标签，res:驳回标签,id:工单更新id
       let _this = this;
       let copylist = list
@@ -336,6 +339,7 @@ export default {
       await this.common.httpPost(obj, success);
       function success(data) {
         if (data != null) {
+          console.log(123);
           if (_this.TransferStatus === true) {
             let list = {
               taskId: data.taskid,
@@ -363,6 +367,9 @@ export default {
             _this.setUpdate(list);
           }
         } else {
+          console.log(_this.list.id);
+          console.log(_this.requestForm.processDefinitionKey);
+          console.log(456);
           let list = {
             taskName: "结束",
             id: _this.list.id,
@@ -382,6 +389,7 @@ export default {
         data: e,
       }).then((res) => {
         this.$emit("updateForm", true);
+        this.buttonLoading = false
       });
     },
     //查询路径接口
@@ -516,10 +524,11 @@ export default {
       this.$refs.defTree.userList = [];
       this.backThree = [];
       this.copyUser = [];
-      this.CopyStatus = false;
+      // this.CopyStatus = false;
       this.TransferStatus = false;
       //   this.clickTaskName = e.properties.name;
       this.clicknextName = e.properties.name;
+      console.log(this.clicknextName);
       this.seleIndex = index;
       this.getNextPath(e.resourceId, 3); //1 为点击后获取线
     },

src/components/workflowEntrance.vue

@@ -415,7 +415,6 @@ export default {
           //   this.initialList.nextShapes[0].multi?.multi &&
           //   res.data.body.nextShapes[0].multi.multi === "true"
           // ) {
-
           // }
         }
         if (status === 2) {

src/config/dev.js

@@ -25,6 +25,9 @@ let devs = {
     securityAudit: 'd7dd8e5e-b320-11ed-886f-d6cd97160e00',//安全审计
     userChange: 'c4624dbc-b322-11ed-886f-d6cd97160e00',//用户使用者变更
     bfsjList: '524e01f7-b25d-11ed-886f-d6cd97160e00',//备份数据
+    docAppr: '47b27979-b250-11ed-886f-d6cd97160e00',//文件审批流程
+    firewall: '9d7c2f92-b251-11ed-886f-d6cd97160e00',//防火墙
+    opcode: 'b79206a9-b258-11ed-886f-d6cd97160e00',//opcode
 }
 let dev = {
     TITLE: '本地环境',
@@ -52,6 +55,9 @@ let dev = {
     securityAudit: 'd7dd8e5e-b320-11ed-886f-d6cd97160e00',//安全审计
     userChange: 'c4624dbc-b322-11ed-886f-d6cd97160e00',//用户使用者变更
     bfsjList: '524e01f7-b25d-11ed-886f-d6cd97160e00',//备份数据
+    docAppr: '47b27979-b250-11ed-886f-d6cd97160e00',//文件审批流程
+    firewall: '9d7c2f92-b251-11ed-886f-d6cd97160e00',//防火墙
+    opcode: 'b79206a9-b258-11ed-886f-d6cd97160e00',//opcode
 }
 let test = {
     TITLE: '测试环境',
@@ -79,6 +85,9 @@ let test = {
     securityAudit: '93dc4075-b33f-11ed-be6b-00505687dcd3',//安全审计
     userChange: '3626d7d9-b33f-11ed-be6b-00505687dcd3',//用户使用者变更
     bfsjList: 'dbd83414-b25f-11ed-be6b-00505687dcd3',//备份数据
+    docAppr: '3b21cf73-b251-11ed-be6b-00505687dcd3',//文件审批流程
+    firewall: '86e7c09e-b256-11ed-be6b-00505687dcd3',//防火墙
+    opcode: '1245d300-b25a-11ed-be6b-00505687dcd3',//opcode
 }
 let prod = {
     TITLE: '线上环境',
@@ -96,6 +105,19 @@ let prod = {
     securityAudit: '99fa2bcc-d99f-11ed-8255-e00084564cce',//安全审计
     userChange: 'e6eaf005-d99e-11ed-8255-e00084564cce',//用户使用者变更
     bfsjList: 'f458d35a-d9a0-11ed-8255-e00084564cce',//备份数据
+    accountApplicationfresourceId: '27a9dbbf-d742-11ed-8255-e00084564cce',//账号申请流程
+    accountdelfresourceId: '8a519886-d742-11ed-8255-e00084564cce',//账号删除
+    accountPermissionsfresourceId: '2e508b91-d741-11ed-8255-e00084564cce',//账号权限申请流程
+    aqbgsyListfresourceId: '19bed1f4-d743-11ed-8255-e00084564cce',//安全报告审阅
+    klhfsqList: '9f3ab9d2-d743-11ed-8255-e00084564cce',//口令恢复申请流程
+    rltzjlList: 'd38ce419-d743-11ed-8255-e00084564cce',//容量调整记录流程
+    sjkdbList: 'd874ccdd-d742-11ed-8255-e00084564cce',//数据库导表流程
+    tyshList: '5b87cb0b-d743-11ed-8255-e00084564cce',//通用审核流程
+    userList: '81bc22d8-d741-11ed-8255-e00084564cce',//用户清单流程
+    internetAssessment: '433402bb-d52d-11ed-afb6-e00084564cce',//互联网电视
+    docAppr: '917d8bf9-d918-11ed-8255-e00084564cce',//文件审批流程
+    firewall: '3c3df7fb-d918-11ed-8255-e00084564cce',//防火墙
+    opcode: '6b9e1cb2-d918-11ed-8255-e00084564cce',//opcode
 }
 export const getConfig = () => {
     switch (process.env.VUE_APP_ENV) {

src/http/api.js

@@ -80,10 +80,10 @@ export function getNowdata(e) {
     let yy = new Date().getFullYear()
     let mm = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
     let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
-    let hh = new Date().getHours()< 10 ? '0' + new Date().getHours() : new Date().getHours()
+    let hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
     let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
     let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
     let time = yy + e.a + mm + e.a + dd + e.b + hh + e.c + mf + e.c + ss
     return time
 }
-export default { getTodoBase, getDoneBase, getInitiateBase, updateBase, getNowdata, queryReadBase,queryReadDoneBase };
+export default { getTodoBase, getDoneBase, getInitiateBase, updateBase, getNowdata, queryReadBase, queryReadDoneBase };

src/main.js

@@ -6,6 +6,7 @@ import './plugins';
 import router from './router'
 import store from './store'
 import VueCookie from 'vue-cookie';
+import OnlyofficeEditor from '@/components'
 import App from './App.vue';
 import './assets/mc-inconfont/iconfont.css'
 import fullscreen from 'vue-fullscreen'
@@ -31,6 +32,7 @@ Vue.prototype.common = common
 Vue.prototype.$axios = http //axios 设置
 Vue.use(fullscreen)
 Vue.use(VueCookie);
+Vue.use(OnlyofficeEditor)
 Vue.use(VueContextMenu)
 Vue.config.productionTip = false
 

src/pages/main/accountPermissions/accountApplication.vue

@@ -939,7 +939,8 @@ export default {
                             },
                             data: { delId: this.AccountdelId },
                         }).then((res) => {
-                            this.getAccountTable({}, this.pageSizeAccount)
+                            this.getAccountTable({}, 1)
+                            this.pageSizAccount = 1;
                             this.handleAccountStatus = false
                         })
                     })
@@ -962,7 +963,8 @@ export default {
                             },
                             data: { delId: this.HostdelId },
                         }).then((res) => {
-                            this.getHostTable({}, this.pageSizeHost)
+                            this.getHostTable({}, 1)
+                            this.pageSizeHost = 1;
                             this.handleHostStatus = false
                         })
                     })

src/pages/main/accountPermissions/accountdel.vue

@@ -593,7 +593,8 @@ export default {
                             },
                             data: { delId: this.HostdelId },
                         }).then((res) => {
-                            this.getHostTable({}, this.pageSizeHost)
+                            this.getHostTable({}, 1)
+                            this.pageSizeHost = 1;
                             this.handleHostStatus = false
                         })
                     })

src/pages/main/accountPermissions/klhfsqList.vue

@@ -516,7 +516,8 @@ export default {
                             },
                             data: { delId: this.AccountId },
                         }).then((res) => {
-                            this.getTableAccount({}, this.pageSizeAccount)
+                            this.getTableAccount({}, 1)
+                            this.pageSizeAccount = 1;
                             this.handleSjkdbOwnerStatus = false
                         })
                     })

src/pages/main/accountPermissions/sjkdbList.vue

@@ -637,7 +637,8 @@ export default {
                             },
                             data: { delId: this.SjkdbTableNamedelId },
                         }).then((res) => {
-                            this.getSjkdbTableNameTable({}, this.pageSizSjkdbTableName)
+                            this.getSjkdbTableNameTable({}, 1)
+                            this.pageSizSjkdbTableName = 1;
                             this.handleSjkdbTableNameStatus = false
                         })
                     })
@@ -660,7 +661,8 @@ export default {
                             },
                             data: { delId: this.SjkdbOwnerdelId },
                         }).then((res) => {
-                            this.getSjkdbOwnerTable({}, this.pageSizeSjkdbOwner)
+                            this.getSjkdbOwnerTable({}, 1)
+                            this.pageSizeSjkdbOwner = 1;
                             this.handleSjkdbOwnerStatus = false
                         })
                     })

src/pages/main/firewall/formTable.vue

@@ -0,0 +1,860 @@
+<template>
+    <div>
+        <div>
+            <div class="flex-title">防火墙策略申请流程</div>
+            <el-form ref="form" :model="form" :rules="rule" :disabled="disabled">
+                <el-row>
+                    <el-col :span="6">
+                        <el-form-item label="工号单:" prop="orderNumber">
+                            <el-input v-model="form.orderNumber" :disabled="true"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="标题:" prop="needName">
+                            <el-input v-model="form.needName"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="申请人:" prop="applicant">
+                            <el-input v-model="form.applicant" :disabled="true"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="申请时间:">
+                            <el-date-picker type="date" :disabled="true" placeholder="选择日期" v-model="form.applicationTime"
+                                :picker-options="pickerOptions" value-format="yyyy-MM-dd"
+                                style="width: 100%"></el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="6">
+                        <el-form-item label="有效期:" prop="validPeriod">
+                            <el-select v-model="form.validPeriod" placeholder="请选择">
+                                <el-option label="长期" value="长期"></el-option>
+                                <el-option label="限期" value="限期"></el-option>
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="开始时间:">
+                            <el-date-picker type="date" placeholder="选择日期" v-model="form.startTime"
+                                :picker-options="pickerOptions" value-format="yyyy-MM-dd"
+                                style="width: 100%"></el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="结束时间:">
+                            <el-date-picker type="date" placeholder="选择日期" v-model="form.endTime"
+                                :picker-options="pickerOptions" value-format="yyyy-MM-dd"
+                                style="width: 100%"></el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+
+                    <el-row>
+                        <el-form-item label="申请原因:" prop="applicationReason" label-width="110px">
+                            <el-input type="textarea" maxlength="300" show-word-limit
+                                v-model="form.applicationReason"></el-input>
+                        </el-form-item>
+                        <el-col :span="24">
+                            <el-form-item label="正文:" prop="content" label-width="110px">
+                                <el-input type="textarea" maxlength="300" show-word-limit v-model="form.content"></el-input>
+                            </el-form-item>
+
+                        </el-col>
+                        <el-col :span="24">
+                            <el-form-item label="备注:" prop="note" label-width="110px">
+                                <el-input type="textarea" maxlength="300" show-word-limit v-model="form.note"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="源IP地址:" prop="sourceIpAddress">
+                                <el-input v-model="form.sourceIpAddress"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="目标IP地址:" prop="destinationIpAddress">
+                                <el-input v-model="form.destinationIpAddress"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="源地址设备类型:" prop="sourceDeviceType">
+                                <el-select v-model="form.sourceDeviceType" placeholder="请选择">
+                                    <el-option label="路由器" value="路由器"></el-option>
+                                    <el-option label="交换机" value="交换机"></el-option>
+                                    <el-option label="防火墙" value="防火墙"></el-option>
+                                    <el-option label="主机" value="主机"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="目的地址设备类型:" prop="destinationDeviceType" label-width="140px">
+                                <el-select v-model="form.destinationDeviceType" placeholder="请选择">
+                                    <el-option label="路由器" value="路由器"></el-option>
+                                    <el-option label="交换机" value="交换机"></el-option>
+                                    <el-option label="防火墙" value="防火墙"></el-option>
+                                    <el-option label="主机" value="主机"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="协议:" prop="protocol">
+                                <el-select v-model="form.protocol" placeholder="请选择">
+                                    <el-option label="TCP" value="TCP"></el-option>
+                                    <el-option label="UDP" value="UDP"></el-option>
+                                    <el-option label="ICMP" value="ICMP"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="网络类型:" prop="networkType">
+                                <el-select v-model="form.networkType" placeholder="请选择">
+                                    <el-option label="内网" value="内网"></el-option>
+                                    <el-option label="互联网" value="互联网"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+
+
+                    <el-row>
+                        <el-col :span="2">
+                            <span>防火墙策略清单:</span>
+                        </el-col>
+                        <el-col :span="22">
+                            <div class="flex-table-header">
+                                <el-button type="primary" @click="newclick(1)">新建</el-button>
+                                <el-button type="danger" @click="fireDel()">删除</el-button>
+                                <span>记录总数({{ num }})</span>
+                            </div>
+
+                            <Table @clickDemand="clickDemand" :list="lable" ref="TableList" @changeNum="changeNum"
+                                @num="selectNum">
+                            </Table>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col :span="2">
+                            <span>端口信息:</span>
+
+                        </el-col>
+                        <el-col :span="22">
+                            <div class="flex-table-header">
+                                <el-button type="primary" @click="newclick(2)">新建</el-button>
+                                <el-button type="danger" @click="portDel()">删除</el-button>
+                                <span>记录总数({{ nums }})</span>
+                            </div>
+
+                            <Table @clickDemand="clickDemand2" @num="selectNums" :list="lables" ref="TableList"
+                                @changeNum="changeNums">
+                            </Table>
+                        </el-col>
+                    </el-row>
+                </el-row>
+                <el-row>
+                    <el-form-item label="附件：" prop="mkFileShareAttachList" label-width="120px">
+                        <my-upload ref="upload" @uploadBack="uploadBack" @delloadBack="delloadBack"
+                            @clickDownload="download" :fileInfo="fileInfo"
+                            :fileList="list.mkFileShareAttachList"></my-upload>
+                    </el-form-item>
+                </el-row>
+            </el-form>
+        </div>
+        <el-dialog v-if="firewallStatus" :before-close="clickClose(1)" title="新建" :visible.sync="firewallStatus"
+            width="100%" :modal="false" style="display: flex; flex-direction: column">
+            <el-button type="primary" @click="newFireAdd(firewallTit)">保存</el-button>
+            <el-form ref="form1" :model="fireList">
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="源地址设备类型:" prop="sourceDeviceType">
+                            <el-input v-model="fireList.sourceDeviceType"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="源地址:" prop="sourceAddress">
+                            <el-input v-model="fireList.sourceAddress"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="源端口:" prop="sourcePort">
+                            <el-input v-model="fireList.sourcePort"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="目标地址设备类型:" prop="destinationDeviceType">
+                            <el-input v-model="fireList.destinationDeviceType"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="目的地址:" prop="destinationAddress">
+                            <el-input v-model="fireList.destinationAddress"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="目的端口:" prop="destinationPort">
+                            <el-input v-model="fireList.destinationPort"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="协议:" prop="protocol">
+                            <el-input v-model="fireList.protocol"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="策略有效期:" prop="protocol">
+                            <el-date-picker type="date" placeholder="选择日期" v-model="fireList.policyValidPeriod"
+                                :picker-options="pickerOptions" value-format="yyyy-MM-dd"
+                                style="width: 100%"></el-date-picker>
+
+                        </el-form-item>
+                    </el-col>
+
+                </el-row>
+            </el-form>
+
+        </el-dialog>
+        <el-dialog v-if="protStatus" :before-close="clickClose(2)" title="新增" :visible.sync="protStatus" width="100%"
+            :modal="false" style="display: flex; flex-direction: column">
+            <el-button type="primary" @click="newPortAdd(protTit)">保存</el-button>
+
+            <el-form ref="form2" :model="portList">
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="源端口号:" prop="sourcePortnumber">
+                            <el-input v-model="portList.sourcePortNumber"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="目的端口号:" prop="destinationPortNumber">
+                            <el-input v-model="portList.destinationPortNumber"></el-input>
+                        </el-form-item>
+                    </el-col>
+
+                </el-row>
+
+            </el-form>
+        </el-dialog>
+    </div>
+</template>
+  
+<script>
+import myUpload from "../../../components/workflowUpload";
+import Table from "../../../components/el-form.vue";
+export default {
+    components: {
+        myUpload,
+        Table
+    },
+    data() {
+        return {
+            fireList: {},
+            portList: {},
+            fireSelectList: [],
+            portSelectList: [],
+            firewallStatus: false,
+            firewallTit: '新增',
+            protTit: '新增',
+            page: 1,
+            pages: 1,
+            protStatus: false,
+            num: '0',
+            nums: '0',
+            checkBoxNone: false,
+            checkBoxStatus: false,
+            fileInfo: {
+                type: "bt1n",
+                typename: "上传文件",
+                limit: 5,
+                url: "/market/waf/upload",
+                fileList: [],
+            },
+            postEdit: false,
+            newPostAge: false,
+            pickerOptions: {
+                disabledDate(time) {
+                    console.log(time);
+                    return time.getTime() < Date.now() - 8.64e7;
+                },
+            },
+            oneList: [],
+            lable: {
+                name: "first",
+                height: '200',
+                titledata: [
+                    {
+                        label: "源地址设备类型",
+                        prop: "sourceDeviceType",
+                        width: 300,
+                        color: "#0682CD",
+                    },
+                    {
+                        label: "源地址",
+                        prop: "sourceAddress",
+                        width: 200,
+                    },
+                    {
+                        label: "源端口",
+                        prop: "sourcePort",
+                        width: 200,
+                    },
+                    {
+                        label: "目标地址设备类型",
+                        prop: "destinationDeviceType",
+                        width: 200,
+                    },
+                    {
+                        label: "目的地址",
+                        prop: "destinationAddress",
+                        width: 200,
+                    },
+                    {
+                        label: "目的端口",
+                        prop: "destinationPort",
+                        width: 250,
+                    },
+                    {
+                        label: "协议",
+                        prop: "protocol",
+                        width: 200,
+                    },
+                    {
+                        label: "策略有效期",
+                        prop: "policyValidPeriod",
+                        width: 200,
+                    },
+                ], //表格头
+                data: [], //内容数据
+                loading: true,
+                pageData: {
+                    total: 100, // 总条数
+                    pageSizes: 10, // 每页数量
+                    pageNum: 1, // 页码
+                },
+                isSelection: true, // 表格有多选时设置
+                isOperation: false, // 表格有操作列时设置
+                isIndex: false, // 列表序号
+                operation: {
+                    // 表格有操作列时设置
+                    label: "操作", // 列名
+                    width: "50", // 根据实际情况给宽度
+                    data: [
+                        {
+                            label: "操作", // 操作名称
+                            type: "", //按钮类型
+                            handleRow: () => {
+
+                            }, // 自定义事件
+                        },
+                    ],
+                },
+            },
+            lables: {
+                name: "first",
+                height: "200",
+                titledata: [
+                    {
+                        label: "序号",
+                        prop: "index",
+                        width: 600,
+                    },
+                    {
+                        label: "源端口号",
+                        prop: "sourcePortNumber",
+                        width: 600,
+                    },
+                    {
+                        label: "目的端口号",
+                        prop: "destinationPortNumber",
+                        width: 600,
+                    },
+
+                ], //表格头
+                data: [], //内容数据
+                loading: true,
+                pageData: {
+                    total: 1, // 总条数
+                    pageSizes: 10, // 每页数量
+                    pageNum: 1, // 页码
+                },
+                isSelection: true, // 表格有多选时设置
+                isOperation: false, // 表格有操作列时设置
+                isIndex: false, // 列表序号
+                operation: {
+                    // 表格有操作列时设置
+                    label: "操作", // 列名
+                    width: "50", // 根据实际情况给宽度
+                    data: [
+                        {
+                            label: "操作", // 操作名称
+                            type: "", //按钮类型
+                            handleRow: () => {
+
+                            }, // 自定义事件
+                        },
+                    ],
+                },
+            },
+            childrenList: [],
+            twoList: [],
+            twoStatus: false,
+            threeList: [],
+            threeStatus: false,
+            fourList: [],
+            fourStatus: false,
+            fiveList: [],
+            fiveStatus: false,
+            isSensitiveDataStatus: false,
+            timeStatus: false,
+            functionStatus: false,
+            reportStatus: false,
+            Length: "",
+            form: {},
+            rules: {},
+            rule: {
+                needName: [
+                    { required: true, message: "请输入标题", trigger: "blur" },
+                ],
+                applicationReason: [
+                    { required: true, message: "请输入申请原因", trigger: "change" },
+                ]
+            },
+            copyRule: {},
+            isList: [],
+            remindMmsg: []
+        };
+    },
+    props: {
+        list: {
+            type: Object,
+            default: () => { },
+        },
+        disabled: {
+            type: Boolean,
+            default: () => { },
+        },
+    },
+    mounted() {
+        if (this.list.mkFileShareAttachList) {
+            this.$refs.upload.attList = this.list.mkFileShareAttachList;
+            this.list.mkFileShareAttachList.map((item) => {
+                item.name = item.fileName;
+            });
+        }
+        console.log(this.form.orderNumber);
+        this.getFromQuery(this.form.orderNumber)
+        this.getPortQuery(this.form.orderNumber)
+    },
+    created() {
+        this.form = this.list;
+        this.form.applicant = JSON.parse(window.sessionStorage.userInfo).loginName
+        this.form.applicationTime = new Date()
+        this.copyRule = this.rule;
+    },
+
+    methods: {
+        clickClose() {
+
+        },
+        fireDel() {
+            if (this.fireSelectList.length > 0) {
+                this.$confirm("即将删除数据, 是否删除?", "提示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                })
+                    .then(() => {
+                        this.$http({
+                            url: "/market/fhqProcessStrategy/delBatch",
+                            method: "post",
+                            headers: {
+                                "Content-Type": "application/json",
+                            },
+                            data: this.fireSelectList
+                        }).then((res) => {
+                            this.$message.success('删除成功')
+                            this.page = 1;
+                            this.getFromQuery(this.form.orderNumber)
+                        });
+                    })
+                    .catch(() => { });
+            }
+        },
+        portDel() {
+            if (this.portSelectList.length > 0) {
+                this.$confirm("即将删除数据, 是否删除?", "提示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                })
+                    .then(() => {
+                        this.$http({
+                            url: "/market/fhqProcessPort/delBatch",
+                            method: "post",
+                            headers: {
+                                "Content-Type": "application/json",
+                            },
+                            data: this.portSelectList
+                        }).then((res) => {
+                            this.$message.success('删除成功')
+                            this.pages = 1;
+                            this.getPortQuery(this.form.orderNumber)
+                        });
+                    })
+                    .catch(() => { });
+            }
+
+        },
+        newFireAdd(e) {
+            if (e == '新增') {
+                this.fireList.strategyId = this.form.orderNumber
+                this.$http({
+                    url: "/market/fhqProcessStrategy/add",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    data: this.fireList
+                }).then((res) => {
+                    this.firewallStatus = false;
+                    this.getFromQuery(this.form.orderNumber)
+                    this.$message.success('添加成功')
+                });
+            } else {
+                this.$http({
+                    url: "/market/fhqProcessStrategy/update",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    data: this.fireList
+                }).then((res) => {
+                    this.firewallStatus = false;
+                    this.getFromQuery(this.form.orderNumber)
+                    this.$message.success('添加成功')
+                });
+            }
+
+        },
+        newPortAdd(e) {
+            if (e == '新增') {
+                this.portList.portId = this.form.orderNumber
+                this.$http({
+                    url: "/market/fhqProcessPort/add",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    data: this.portList
+                }).then((res) => {
+                    this.protStatus = false;
+                    this.getPortQuery(this.form.orderNumber)
+                    this.$message.success('添加成功')
+                });
+            } else {
+                this.$http({
+                    url: "/market/fhqProcessPort/update",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    data: this.portList
+                }).then((res) => {
+                    this.protStatus = false;
+                    this.getPortQuery(this.form.orderNumber)
+                    this.$message.success('添加成功')
+                });
+            }
+
+        },
+        getPortQuery(e) {
+            this.$http({
+                url: "/market/fhqProcessPort/queryPage",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                    page: '{"pageNo":"' + this.pages + '","pageSize":"10"}',
+                },
+                data: { portId: e },
+            }).then((res) => {
+                this.lables.data = res.data.data
+                this.lables.pageData.total = res.data.totalRecord ? res.data.totalRecord : 1;
+                this.lables.data.map((item, index) => {
+                    item.index = (index + 1) + (res.data.pageNo - 1) * res.data.pageSize
+                })
+                this.nums = res.data.totalRecord
+            });
+        },
+        getFromQuery(e) {
+            this.$http({
+                url: "/market/fhqProcessStrategy/queryPage",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                    page: '{"pageNo":"' + this.page + '","pageSize":"10"}',
+                },
+                data: { strategyId: e },
+            }).then((res) => {
+                this.lable.data = res.data.data
+                this.lable.pageData.total = res.data.totalRecord ? res.data.totalRecord : 1;
+                this.num = res.data.totalRecord
+            });
+        },
+        newclick(e) {
+            this.fireList = {};
+            this.portList = {};
+            e === 1 ? this.firewallStatus = true : this.protStatus = true;
+            e === 1 ? this.firewallTit = '新增' : this.protTit = '新增';
+        },
+        //页码
+        changeNum(e) {
+            this.page = e;
+            this.getFromQuery(this.form.orderNumber)
+        },
+        changeNums(e) {
+            this.pages = e;
+            this.getPortQuery(this.form.orderNumber)
+        },
+        selectNum(e) {
+            this.fireSelectList = e;
+        },
+        selectNums(e) {
+            this.portSelectList = e
+        },
+        //点击工单
+        clickDemand(row, e) {
+            if (this.form.taskName === '需求发起人') {
+                console.log(e);
+                this.firewallTit = '修改'
+                this.fireList = e
+                this.firewallStatus = true
+            }
+        },
+        clickDemand2(row, e) {
+            if (this.form.taskName === '需求发起人') {
+                console.log(e);
+                this.protTit = '修改'
+                this.portList = e
+                this.protStatus = true
+            }
+        },
+        uploadBack(v) {
+            if (this.form.mkFileShareAttachList) {
+                this.form.mkFileShareAttachList = [];
+                this.form.mkFileShareAttachList = v;
+            } else {
+                let mkFileShareAttachList = [];
+                mkFileShareAttachList = v;
+                this.$set(this.form, "mkFileShareAttachList", mkFileShareAttachList);
+            }
+        },
+        delloadBack(v) {
+            this.form.mkFileShareAttachList = v;
+            this.$http({
+                url: "/market/zfpzProcess/update",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: this.form,
+            }).then((res) => {
+                console.log(res);
+                // if (res.data.result === 0) {
+                //   this.$message.success("工作流更新成功");
+                // }
+            });
+        },
+        download() {
+            console.log(123);
+            if (this.form.mkFileShareAttachList.length > 1) {
+                this.$http({
+                    url: "/market/waf/downAllFile",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    responseType: "blob",
+                    data: { mkFileShareAttachList: this.form.mkFileShareAttachList },
+                }).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.form.needName + ".zip";
+                        document.body.appendChild(downloadElement);
+                        downloadElement.click();
+                        document.body.removeChild(downloadElement);
+                        window.URL.revokeObjectURL(href);
+                    }
+                    if (this.infolist.authType === "3") {
+                        this.dialogCli(10);
+                    }
+                });
+            } else {
+                console.log(this.form.mkFileShareAttachList);
+                let list = {
+                    id: this.form.mkFileShareAttachList[0].fileCode,
+                    fileName: this.form.mkFileShareAttachList[0].name,
+                };
+                this.$http({
+                    url: "/market/waf/downFile",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    responseType: "blob",
+                    data: list,
+                }).then((response) => {
+                    console.log(response);
+                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+                        let blob = new Blob([response.data], {
+                            type: "application/vnd.ms-excel",
+                        });
+                        //window.navigator.msSaveOrOpenBlob(blob, this.form.needName);
+                        window.navigator.msSaveOrOpenBlob(
+                            blob,
+                            this.form.mkFileShareAttachList[0].name
+                        );
+                    } else {
+                        /* 火狐谷歌的文件下载方式 */
+                        var blob = new Blob([response.data]);
+                        var downloadElement = document.createElement("a");
+                        var href = window.URL.createObjectURL(blob);
+                        downloadElement.href = href;
+                        downloadElement.download = this.form.mkFileShareAttachList[0].name;
+                        document.body.appendChild(downloadElement);
+                        downloadElement.click();
+                        document.body.removeChild(downloadElement);
+                        window.URL.revokeObjectURL(href);
+                    }
+                });
+            }
+        },
+    },
+
+};
+</script>
+  
+<style lang="scss" scoped>
+.flex-table-header {
+    margin-bottom: 10px;
+
+    span {
+        margin-left: 20px;
+    }
+}
+
+::v-deep .el-row {
+    margin-top: 16px;
+}
+
+a {
+    text-decoration: none;
+}
+
+::v-deep .el-upload-list {
+    width: 23rem;
+}
+
+.flex-title {
+    text-align: center;
+    font-size: 24px;
+    line-height: 60px;
+
+    font-weight: bold;
+}
+
+.flex-header {
+    margin-top: 20px;
+    display: flex;
+    //   justify-content: space-between;
+
+    ::v-deep .el-form-item {
+        width: 20%;
+        margin-right: 60px;
+    }
+}
+
+.flex-upload {
+    ::v-deep .el-form-item {
+        width: 100%;
+    }
+}
+
+.flex-input-tare {
+    ::v-deep .el-form-item {
+        width: 100%;
+        margin-right: 5%;
+    }
+
+    ::v-deep .el-form-item__label {
+        width: 9rem !important;
+    }
+}
+
+.flex-textarea {
+    width: 70.5%;
+}
+
+.el-upload__tip {
+    color: red;
+}
+
+// ::v-deep .el-input--suffix .el-input__inner {
+//   width: 119% !important;
+// }
+::v-deep .el-input__inner {
+    color: black !important;
+}
+
+::v-deep .el-textarea.is-disabled .el-textarea__inner {
+    color: black !important;
+}
+
+::v-deep .el-form-item {
+    display: flex;
+}
+
+::v-deep .el-form-item__label {
+    // width:100%;
+    height: 50px;
+    line-height: 40px !important;
+    width: 130px;
+    font-size: 0.5rem;
+}
+
+::v-deep .el-form-item__content {
+    width: 100%;
+    margin-left: 0% !important;
+}
+
+.el-select,
+::v-deep.el-input_inner {
+    width: 100%;
+}
+
+::v-deep.el-form-item.foldLabel .el-form-item__label {
+    white-space: pre-line;
+    /*换行显示*/
+    height: 10px;
+    /*设置lable高度，input高度一样*/
+    line-height: 30px !important;
+}
+
+::v-deep .el-pagination {
+    display: block !important;
+    background-color: #fff !important;
+}
+</style>
+  

src/pages/main/firewall/index.vue

@@ -0,0 +1,983 @@
+<template>
+    <div class="flex-box">
+        <!-- v-show="lable.name === 'first'" -->
+        <div class="flex-header" :span="24">
+            <Tabs :tabList="tabList" @status="clickTabTops" />
+            <el-button type="primary" @click="clickNewTag" v-show="lableTable.name === 'first'">+新建</el-button>
+        </div>
+        <div class="flex-count">
+            <Table @clickDemand="clickDemand" :list="lableTable" ref="TableList" @changeNum="changeNum">
+            </Table>
+        </div>
+        <el-dialog v-if="dialogStatus" :before-close="clickClose" :title="dialogTitle + '需求'" :visible.sync="dialogStatus"
+            width="100%" :modal="false" style="display: flex; flex-direction: column">
+            <!-- 后期维护 -->
+            <div style="position: fixed; z-index: 99">
+                <el-button type="primary" v-if="startStatus" @click="clickHandles">处理</el-button>
+                <el-button type="primary" v-if="closeStatus" @click="clickClose">关闭</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 v-if="destroy">
+            <el-dialog title="处理操作" width="100%" :visible.sync="handleStatus" :before-close="handleCloses" :modal="false"
+                v-if="handleStatus" :destroy-on-close="true">
+                <Workflow ref="workflow" :list="fromList" v-if="isWorkflowStatus == true" @updateForm="beforeClose"
+                    :requestForm="requestForm" :adminResourceId="adminResourceId" />
+                <WorkflowEntrance :list="fromList" v-else :lastManList="lastManList" @beforeClose="beforeClose"
+                    :requestForm="requestForm" />
+            </el-dialog>
+        </div>
+
+    </div>
+</template>
+<script>
+import Workflow from "../../../components/workflowBase";
+import WorkflowEntrance from "../../../components/workflowEntrance";
+import Tabs from "../../../components/el-tabs.vue";
+import Table from "../../../components/el-form.vue";
+import Tables from "../../../components/el-forms.vue";
+import FormTable from "./formTable.vue";
+import { updateBase } from "../../../http/api.js";
+import getConfig from '../../../config/dev.js'
+import {
+    getTodoBase,
+    getDoneBase,
+    getInitiateBase,
+} from "../../../http/api.js";
+import { log } from "console";
+
+export default {
+    components: {
+        Tabs,
+        Table,
+        Tables,
+        FormTable,
+        Workflow,
+        WorkflowEntrance
+    },
+    created() {
+        let status = JSON.stringify(this.$route.query) == "{}";
+        if (status) {
+            this.lableTable = this.firstTable
+            this.getQueryList()
+            this.usernumber()
+        } else {
+            let { id, type } = this.$route.query;
+            let list = {
+                taskId: id,
+                tableName: this.request_form.processDefinitionKey
+            };
+            this.usernumber()
+            this.lableTable = this.firstTable
+            this.getQueryList(list, 0);//代办
+        }
+    },
+    data() {
+        return {
+            abc: false,
+            lableTable: {},
+            handleClose: false,
+            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: true, //保存按钮状态
+            fromList: {}, //表单数据
+            rejectStatus: true,
+            taskId: "", //工单taskID
+            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: "fhq_process",
+            },
+            requestForm: {
+                // fresourceId: "9d7c2f92-b251-11ed-886f-d6cd97160e00", // 本地环境
+                // fresourceId: "86e7c09e-b256-11ed-be6b-00505687dcd3", //测试环境
+                // fresourceId:'3c3df7fb-d918-11ed-8255-e00084564cce',//生产环境
+                fresourceId: getConfig().firewall,
+                processDefinitionKey: "fhq_process",
+            },
+            treeList: [], //候选人列表
+            treeCopyList: [], //抄送人列表
+            editStatus: false,
+            querryList: [], //已选人员名单
+            commonlyList: [
+                //常用意见列表页
+            ],
+            textarea: "未填写意见",
+            num: 0,
+            dialogStatus: false, //新建dialog显示
+            handleStatus: false, //处理按钮状态
+            tabList: [
+                {
+                    index: "first",
+                    label: "我的待办",
+                    number: 0,
+                    name: "prosss_key",
+                },
+                {
+                    index: "two",
+                    label: "我的已办",
+                    number: 0,
+                },
+                {
+                    index: "three",
+                    label: "我发起的",
+                    number: 0,
+                },
+
+            ],
+            firstTable: {
+                name: "first",
+                height: 500,
+                titledata: [
+                    {
+                        label: "标题",
+                        prop: "need_name",
+                        width: 300,
+                        color: "#0682CD",
+                    },
+                    {
+                        label: "申请人",
+                        prop: "predealman",
+                        width: 300,
+                    },
+                    {
+                        label: "申请时间",
+                        prop: "proposer_time",
+                        width: 400,
+                    },
+                    {
+                        label: "当前环节",
+                        prop: "taskName",
+                        width: 400,
+                    },
+                ], //表格头
+                data: [], //内容数据
+                loading: true,
+                pageData: {
+                    total: 100, // 总条数
+                    pageSize: 10, // 每页数量
+                    pageNum: 1, // 页码
+                },
+                isSelection: false, // 表格有多选时设置
+                isOperation: false, // 表格有操作列时设置
+                isIndex: false, // 列表序号
+                operation: {
+                    // 表格有操作列时设置
+                    label: "操作", // 列名
+                    width: "50", // 根据实际情况给宽度
+                    data: [
+                        {
+                            label: "操作", // 操作名称
+                            type: "", //按钮类型
+                            handleRow: (e, r, o) => {
+
+                            }, // 自定义事件
+                        },
+                    ],
+                },
+            },
+            twoTable: {
+                name: "two",
+                disabled: true,
+                titledata: [
+                    {
+                        label: "标题",
+                        prop: "need_name",
+                        width: 300,
+                        color: "#0682CD",
+                    },
+                    {
+                        label: "申请人",
+                        prop: "applicant",
+                        width: 300,
+                    },
+                    {
+                        label: "申请时间",
+                        prop: "proposer_time",
+                        width: 400,
+                    },
+                    {
+                        label: "当前环节",
+                        prop: "taskName",
+                        width: 400,
+                    },
+                ], //表格头
+                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: "need_name",
+                        width: 300,
+                        color: "#0682CD",
+                    },
+                    {
+                        label: "申请人",
+                        prop: "applicant",
+                        width: 300,
+                    },
+                    {
+                        label: "申请时间",
+                        prop: "proposer_time",
+                        width: 400,
+                    },
+                    {
+                        label: "当前环节",
+                        prop: "taskName",
+                        width: 400,
+                    },
+                    {
+                        label: "当前处理人",
+                        prop: "currentMan",
+                        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) => {
+
+                            }, // 自定义事件
+                        },
+                    ],
+                },
+            },
+            lable: {},
+            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 () { }, // 自定义事件
+                        },
+                    ],
+                },
+            },
+            clickTagName: "first",
+        };
+    },
+    methods: {
+        clickTabTops(e) {
+            this.$refs.TableList.page = 1;
+            this.totalPage = "1";
+            this.clickTagName = e;
+            console.log(e);
+            const options = {
+                first: {
+                    setTable: function () {
+                        this.lableTable = this.firstTable;
+                        this.getQueryList();
+                    }.bind(this)
+                },
+                two: {
+                    setTable: function () {
+                        this.lableTable = this.twoTable;
+                        this.getQueryDone();
+                    }.bind(this)
+                },
+                three: {
+                    setTable: function () {
+                        this.lableTable = this.threeTable;
+                        this.getMeLaunch();
+                    }.bind(this)
+                }
+            };
+            options[e]?.setTable?.();
+
+        },
+        //处理按钮,开始工作流接口
+        clickHandles() {
+            this.getNextPath(this.fromList.resourceId || "");
+        },
+        getNextPath(e) {
+            let list = {
+                fresourceId: this.requestForm.fresourceId, // 本地环境
+                processId: this.requestForm.processDefinitionKey,
+            };
+            if (e) {
+                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();
+                    } else {
+                        this.adminResourceId = "";
+                    }
+                } else {
+                    this.adminResourceId = "";
+
+                    // this.destroy = true;
+                    // this.handleStatus = true;
+                }
+                console.log(this.fromList);
+                if (this.fromList.processId || this.fromList.taskId) {
+                    this.destroy = true;
+                    this.handleStatus = true;
+                } else {
+                    this.$message.error("请先点击保存按钮");
+                }
+            });
+        },
+        getQueryList(e, status) {
+            let list = {
+                tableName: this.request_form.processDefinitionKey,
+            };
+            getTodoBase(this.totalPage, "", list).then((res) => {
+                if (status === 0) {
+                    this.clickDemand("标题", res.data.data[0]);
+                }
+                this.lableTable.data = res.data.data;
+                this.tabList[0].number = res.data.totalRecord;
+                this.lableTable.pageData.total = res.data.totalRecord;
+                this.loading = false;
+            });
+        },
+        getQueryDone() {
+            let list = {
+                tableName: this.request_form.processDefinitionKey,
+            };
+            getDoneBase(this.totalPage, "", list).then((res) => {
+                this.lableTable.data = res.data.data;
+                this.lableTable.pageData.total = res.data.totalRecord;
+                // this.tableData.map((item) => {
+                //   item.status = "2";
+                // });
+                this.tabList[1].number = res.data.totalRecord;
+                this.total = res.data.totalRecord;
+                this.loading = false;
+            });
+        },
+        getMeLaunch() {
+            let list = {
+                tableName: this.request_form.processDefinitionKey,
+            };
+            getInitiateBase(this.totalPage, "", list).then((res) => {
+                this.lableTable.data = res.data.data;
+                this.lableTable.pageData.total = res.data.totalRecord;
+                this.tabList[2].number = res.data.totalRecord;
+                this.lableTable.data.map((item) => {
+                    item.startTime = this.formatTimestamp(item.startTime)
+                })
+
+                // this.tableData.map((item) => {
+                //   if (item.taskName === "起草") {
+                //     item.status = "1";
+                //   } else {
+                //     item.status = "2";
+                //   }
+                // });
+                this.total = res.data.totalRecord;
+                this.loading = false;
+            });
+        },
+        formatTimestamp(timestamp) {
+            var date = new Date(timestamp);
+            var year = date.getFullYear();
+            var month = ('0' + (date.getMonth() + 1)).slice(-2);
+            var day = ('0' + date.getDate()).slice(-2);
+            var hours = ('0' + date.getHours()).slice(-2);
+            var minutes = ('0' + date.getMinutes()).slice(-2);
+            var seconds = ('0' + date.getSeconds()).slice(-2);
+            return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
+        },
+        //新建按钮
+        async clickNewTag() {
+            this.dialogTitle = "新建";
+            this.lables.data = [];
+            this.fromList = {}
+            this.disabled = false;
+            this.saveStatus = true
+            await this.getDepartmentName();
+            await this.getOrderNumber()
+
+        },
+        getOrderNumber() {
+            this.$http({
+                url: "/market/fhqProcess/getOrderNumber",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: {}
+            }).then((res) => {
+                this.dialogStatus = true;
+                console.log(this.$refs.formTable);
+                this.fromList.orderNumber = res.data.body
+                this.fromList.taskName = '需求发起人'
+            });
+        },
+        //获取用户部门名称
+        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;
+                }
+
+
+            });
+        },
+        clickDemand(e, res) {
+            if (e === "工单状态" || e === "标题") {
+                if (this.clickTagName === "first") {
+                    this.dialogTitle = "查看";
+                    if (res.taskName === "需求发起人") {
+                        this.disabled = false;
+                        this.saveStatus = true;
+                    } else {
+                        this.disabled = true;
+                        this.saveStatus = false;
+                    }
+                    // this.clickForm(res);
+                    // this.getFromQuery(res);
+                    // setTimeout(() => {
+                    //     this.getBtnStatus(res);
+                    // }, 500);
+                }
+                if (this.clickTagName === "two") {
+                    this.disabled = true;
+                    this.startStatus = false;
+                    this.saveStatus = 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;
+                    }
+                }
+                this.fromList = res;
+                this.clickForm(res);
+                this.getFromQuery(res);
+            }
+        },
+        //查询form表单数据
+        getFromQuery(e) {
+            this.$http({
+                url: "/market/fhqProcess/query",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: { id: e.id },
+            }).then((res) => {
+                console.log(e);
+                let list = this.convertObjKeys(e)
+                this.fromList = { ...res.data, ...list }
+                console.log(this.fromList);
+                this.dialogStatus = true;
+            });
+        },
+        async clickForm(e) {
+            let list = {
+                processInstanceId: e.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) {
+                let list = [];
+                list = data.data.data;
+                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);
+                            }
+                        });
+                    }
+                });
+
+                _this.lables.data = list;
+                _this.abc = true;
+            }
+        },
+        //获取页码
+        changeNum(e) {
+            this.totalPage = e;
+            const methodMapping = {
+                first: (timeList) => {
+                    if (timeList) {
+                        this.getQueryList(timeList);
+                    } else {
+                        this.getQueryList();
+                    }
+                },
+                two: () => {
+                    this.getMeDone();
+                },
+                three: (searchLists) => {
+                    if (searchLists) {
+                        this.getMeLaunch(searchLists);
+                    } else {
+                        this.getMeLaunch();
+                    }
+                },
+
+            }
+            const methodToExecute = methodMapping[this.clickTagName];
+
+            if (methodToExecute) {
+                methodToExecute(this.timeList || this.searchLists);
+            }
+            // this.totalPage = e;
+        },
+        clickSave() {
+            this.$refs.formTable.$refs.form.validate((valid) => {
+                if (valid) {
+                    if (this.fromList.id) {
+                        this.setUpdateCopy(this.$refs.formTable.form)
+                    } else {
+                        this.getUserIds();
+                    }
+                } else {
+                    this.$message.error("请完善表单信息");
+                    return false;
+                }
+            });
+
+            // if (this.fromList.id) {
+            //     this.setUpdateCopy(this.$refs.formTable.form)
+            // } else {
+            //     this.getUserIds();
+            //     this.setForm();
+            // }
+        },
+        getUserIds() {
+            this.$http({
+                url: "/market/api/user/info/queryNodePers?params=" + JSON.parse(window.sessionStorage.userInfo).loginNo,
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            }).then((res) => {
+                this.request_form.userName = res.data[0].children[0].loginNameStr;
+                this.request_form.userId = res.data[0].children[0].loginNoStr;
+                this.setForm();
+                console.log(this.request_form)
+            });
+        },
+        setForm(e) {
+            this.request_form.title = '[工作台]-防火墙策略-' + this.$refs.formTable.form.needName;
+            this.$http({
+                url: "/market/fhqProcess/add",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: this.$refs.formTable.form,
+            }).then((res) => {
+                this.request_form.businessKey = res.data.body;
+                this.clickHandle(res.data.body);
+            });
+        },
+        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) {
+                console.log(data);
+                // _this.fromList.processId = data.data;
+                // _this.taskId = data.data;
+                let list = {
+                    id: e,
+                    // taskId:_this.formId,
+                    tableName: _this.request_form.processDefinitionKey,
+                    processId: data.data,
+                    // resourceId: _this.nextPath.currentShape[0].resourceId,
+                };
+                _this.setUpdate(list);
+            }
+        },
+        convertObjKeys(obj) {
+            // 检查传入参数是否为对象
+            if (typeof obj !== "object" || obj === null) {
+                return obj;
+            }
+
+            // 对象遍历，使用 Object.keys() 获取所有属性名称
+            return Object.keys(obj).reduce((result, key) => {
+                // 下划线转驼峰命名
+                const newKey = key.replace(/_(\w)/g, (match, p1) => p1.toUpperCase());
+                // 将原有属性赋值到新属性中
+                result[newKey] = obj[key];
+                return result;
+            }, {});
+        },
+        async setUpdate(e) {
+            await updateBase(e).then((res) => {
+                let list = this.convertObjKeys(res.data.body[0])
+                console.log(list);
+                // console.log(res.data.body);
+                this.fromList = list
+                // console.log(this.formList);
+                // this.fromList.taskId = res.data.body[0].taskId;
+                // this.fromList.taskId = '1111111111';
+                // this.fromList.taskName = res.data.body[0].taskName;
+                // this.fromList = concat;
+            });
+        },
+        setUpdateCopy(e) {
+            this.$http({
+                url: "/market/fhqProcess/update",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: e
+            }).then((res) => {
+                console.log(res);
+                this.$message.success(res.data.desc)
+            });
+
+        },
+        usernumber() {
+            getInitiateBase(this.totalPage, "", { tableName: this.request_form.processDefinitionKey, }).then((res) => {
+                this.tabList[2].number = res.data.totalRecord
+            });
+            getDoneBase(this.totalPage, "", { tableName: this.request_form.processDefinitionKey, }).then((res) => {
+                this.tabList[1].number = res.data.totalRecord;
+            });
+            getTodoBase(this.totalPage, "", { tableName: this.request_form.processDefinitionKey, }).then((res) => {
+                this.tabList[0].number = res.data.totalRecord
+            });
+        },
+        clickClose() {
+            // this.$refs.formTable.form = {}
+            this.fromList = {}
+            this.dialogStatus = false;
+            this.treeList = [];
+            this.textarea = "";
+            this.handleStatus = false;
+            this.handleStatus = false;
+            this.destroy = false;
+            this.saveStatus = false;
+            this.startStatus = true;
+            this.usernumber()
+        },
+        handleCloses() {
+            this.beforeClose()
+
+        },
+        beforeClose(e) {
+            this.usernumber()
+            this.dialogStatus = false;
+            this.handleStatus = false;
+            // this.handleCloses();
+            this.getQueryList();
+
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+.copyClass {
+    display: flex;
+}
+
+.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>

src/pages/main/leader/components/formTable.vue

@@ -338,10 +338,7 @@
             <a
               target="_blank"
               href="./static/file/b.xlsx"
-              download="敏感信息范围说明.xlsx"
-              >《敏感信息范围说明.xlsx》、</a
             >
-            <a
               target="_blank"
               href="./static/file/d.pptx"
               download="关于系统开发需求的汇报（第十期）.pptx"

src/pages/main/onlineOffice/index.vue

@@ -0,0 +1,307 @@
+<template>
+    <div class="flex-count">
+        <div class="flex-header-count">
+            <el-popover placement="right-start" width="460" v-model="visible">
+                <el-form ref="form" :model="form" label-width="80px">
+                    <el-form-item label="文档名称">
+                        <el-input v-model="form.fileName"></el-input>
+                    </el-form-item>
+                    <el-form-item label="文档类型">
+                        <el-select v-model="form.docType" placeholder="请选择文档类型">
+                            <el-option label="word" value="word"></el-option>
+                            <el-option label="cell" value="cell"></el-option>
+                            <el-option label="slide" value="slide"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <div style="text-align: right; margin: 0">
+                    <el-button type="primary" @click="visible = false">取消</el-button>
+                    <el-button type="primary" @click="clickNewSave">确定</el-button>
+                </div>
+                <el-button size="medium" slot="reference" icon="el-icon-circle-plus-outline">新建</el-button>
+            </el-popover>
+            <myUpload style="margin-left:20px ;" @uploadBack="uploadBack" :fileInfo="fileInfo"
+                :fileList="fileInfo.fileList">
+            </myUpload>
+        </div>
+
+        <fromList @changeNum="changeNum" :list="firstTable" @clickDemand="clickDemand" />
+        <div>
+
+            <el-dialog :modal="false" title="提示" :visible.sync="officeStatus" style="height:100% ;" width="100%"
+                height="100%" center>
+                <div id="DocEditor" v-if="officeStatus">
+                    <onlyoffice-editor editorId="DocEditor" :src="src" :config="config" @ready="onReady" />
+                </div>
+            </el-dialog>
+
+
+        </div>
+    </div>
+</template>
+
+<script>
+import fromList from '../../../../src/components/el-form.vue'
+import { DocumentEditor } from "@onlyoffice/document-editor-vue";
+import myUpload from '../../../components/upload'
+import getConfig from '../../../config/dev'
+export default {
+    name: 'ExampleComponent',
+    components: {
+        DocumentEditor,
+        myUpload,
+        fromList
+        // DocumentEditor
+
+    },
+    data() {
+        return {
+            dataList: [],
+            page: 1,
+            searchData: '',
+            limit: 10,
+            form: {},
+            visible: false,
+            saveStatus: false,
+            officeStatus: false,
+            src: '',
+            config: {},
+            fileInfo: {
+                limit: 10,
+                type: 'btn',
+                typename: '导入',
+                urlType: 'office',
+                url: '/office/restfile/upload',
+                fileList: []
+            },
+            firstTable: {
+                height: '520',
+                name: "first",
+                titledata: [
+                    {
+                        label: "名称",
+                        prop: "fileName",
+                        width: 600,
+                    },
+                    {
+                        label: "最后修改时间",
+                        prop: "lastModifyTimeStr",
+                        width: 400,
+                    },
+                    {
+                        label: "文件大小",
+                        prop: "fileSizeStr",
+                        width: 400,
+                    },
+                ], //表格头
+                data: [], //内容数据
+                loading: true,
+                pageData: {
+                    total: 100, // 总条数
+                    pageSize: 10, // 每页数量
+                    pageNum: 1, // 页码
+                },
+                isSelection: false, // 表格有多选时设置
+                isOperation: false, // 表格有操作列时设置
+                isIndex: true, // 列表序号
+                operation: {
+                    // 表格有操作列时设置
+                    label: "操作", // 列名
+                    width: "50", // 根据实际情况给宽度
+                    data: [
+                        {
+                            label: "操作", // 操作名称
+                            type: "", //按钮类型
+                            handleRow: (e, r, o) => {
+                            }, // 自定义事件
+                        },
+                    ],
+                },
+            },
+        }
+    },
+    mounted() {
+        // this.getListEdit()
+        this.getLists()
+    },
+    methods: {
+        uploadBack(e) {
+            this.form = {};
+            this.getLists();
+        },
+
+        //新建在线编辑xxx
+        clickNewSave() {
+            let _this = this;
+            _this.$util.ajaxJson("正在加载", getConfig().OFFICE_URL + "/office/restfile/create", { data: this.form }, function (res) {
+                _this.page = 1;
+                _this.$message.success('新建成功')
+                _this.form = {}
+                _this.getLists();
+                _this.visible = false;
+
+
+            });
+            // this.saveStatus = true
+            // this.$http({
+            //     url: "/office/restfile/create",
+            //     method: "post",
+            //     type: 'office',
+            //     headers: {
+            //         "Content-Type": "application/json",
+            //     },
+            //     data: this.form
+            // }).then((res) => {
+            //     this.page = 1;
+            //     this.$message.success('新建成功')
+            //     this.form = {}
+            //     this.getLists();
+            //     this.visible = false;
+
+            // });
+        },
+        //点击工单状态跳转需求流程显示页面
+        clickDemand(e, res) {
+            if (e == '名称') {
+                this.getListEdit(res)
+            }
+        },
+
+        async getListEdit(e) {
+            let _this = this;
+            _this.$util.ajaxJson("正在加载", getConfig().OFFICE_URL + "/office/restfile/edit", {
+                id: e.id,
+                edit: true,
+                userId: JSON.parse(window.sessionStorage.userInfo).loginNo,
+                userName: JSON.parse(window.sessionStorage.userInfo).loginName
+            }, function (res) {
+                let { docType, fileType, id, fileName, downloadUrl, userId, userName, configCallback, api } = res.body
+                _this.src = api;
+                let config = {
+                    documentType: docType,
+                    height: '100%',
+                    width: '100%',
+                    document: {
+                        fileType: fileType,
+                        key: id,
+                        title: fileName,
+                        url: downloadUrl
+                    },
+                    editorConfig: {
+                        user: {
+                            id: userId,
+                            name: userName
+                        },
+                        callbackUrl: decodeURIComponent(configCallback)
+
+                    }
+                }
+                if (res.code == 0) {
+                    _this.config = config;
+                    _this.officeStatus = true;
+                    console.log(this.config);
+                }
+
+
+            });
+            // await this.$http({
+            //     url: "/office/restfile/edit",
+            //     method: "post",
+            //     type: 'office',
+            //     headers: {
+            //         "Content-Type": "application/json",
+            //     },
+            //     data: {
+            //         id: e.id,
+            //         edit: true,
+            //         userId: JSON.parse(window.sessionStorage.userInfo).loginNo,
+            //         userName: JSON.parse(window.sessionStorage.userInfo).loginName
+            //     },
+            // }).then((res) => {
+            //     // console.log('[ res ] >', res)
+                
+
+
+            // });
+        },
+        getLists() {
+            let _this = this;
+            _this.$util.ajaxJson("正在加载", getConfig().OFFICE_URL + "/office/restfile/list", {}, function (res) {
+                console.log(res);
+                _this.dataList = res.body;
+                _this.currentPage(res.body)
+                _this.firstTable.pageData.total = res.body.length;
+
+
+            });
+            // this.$http({
+            //     url: "/office/restfile/list",
+            //     method: "post",
+            //     type: 'office',
+            //     headers: {
+            //         "Content-Type": "application/json",
+            //     },
+            //     data: {
+
+            //     },
+            // }).then((res) => {
+            //     this.dataList = res.data.body;
+            //     this.currentPage(res.data.body)
+            //     this.firstTable.pageData.total = res.data.body.length;
+
+
+            // });
+        },
+        onReady(editor) {
+            console.log('[ editor ] >', editor)
+        },
+        currentPage(e) {
+            console.log(e);
+            let list = e.filter((item, index) =>
+                item.fileName.includes(this.searchData)
+            )
+            this.firstTable.data = list.filter((item, index) =>
+                index < this.page * this.limit && index >= this.limit * (this.page - 1)
+            )
+        },
+        changeNum(e) {
+            this.page = e;
+            this.currentPage(this.dataList)
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.flex-header-count {
+    padding: 20px;
+    display: flex;
+}
+
+.el-dropdown-link {
+    margin: 20px;
+    position: relative;
+}
+
+::v-deep .el-dialog--center {
+    height: 100%;
+    margin-top: 10px !important;
+}
+
+::v-deep .el-dialog__body {
+    height: 100%;
+}
+
+#DocEditor {
+    height: 100%;
+}
+
+.flex-count {
+    height: 100%;
+    background: #fff;
+}
+
+::v-deep .el-pagination {
+    background-color: #fff !important;
+}
+</style>

src/pages/main/opcode/formTables.vue

@@ -0,0 +1,629 @@
+<template>
+    <div>
+        <div>
+            <div class="flex-title">OP_CODE申请流程</div>
+            <el-form ref="form" :model="form" :rules="rule" :disabled="disabled">
+                <el-row>
+                    <el-col :span="6">
+                        <el-form-item label="工单编号:" prop="orderNumber">
+                            <el-input v-model="form.orderNumber" disabled></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="工单标题:" prop="needName">
+                            <el-input v-model="form.needName"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="申请人:" prop="applicant">
+                            <el-input v-model="form.applicant" :disabled="true"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="申请时间:">
+                            <el-date-picker type="date" :disabled="true" placeholder="选择日期" v-model="form.applicationTime"
+                                :picker-options="pickerOptions" value-format="yyyy-MM-dd"
+                                style="width: 100%"></el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="6">
+                        <el-form-item label="需求编号:" prop="demandNumber">
+                            <el-input v-model="form.demandNumber"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="需求名称:">
+                            <el-input v-model="form.demandName"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="需求上线时间:">
+                            <el-date-picker type="date" placeholder="选择日期" v-model="form.demandDeployTime"
+                                :picker-options="pickerOptions" value-format="yyyy-MM-dd"
+                                style="width: 100%"></el-date-picker>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="提出地市:" prop="submitCity">
+                            <el-select v-model="form.submitCity" placeholder="请选择">
+                                <el-option v-for="(item, index) in cityList" :label="item.ou" :value="item.ou"></el-option>
+                                <!-- <el-option label="路由器" value="路由器"></el-option>
+                                <el-option label="交换机" value="交换机"></el-option>
+                                <el-option label="防火墙" value="防火墙"></el-option>
+                                <el-option label="主机" value="主机"></el-option> -->
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="提出人:" prop="submitter">
+                            <el-input v-model="form.submitter"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+                <el-row>
+
+                    <el-col :span="24">
+                        <el-form-item label="备注:" prop="remark" label-width="110px">
+                            <el-input type="textarea" maxlength="300" show-word-limit v-model="form.remark"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+
+                <el-row>
+                    <el-col :span="2">
+                        <span>操作信息:</span>
+                    </el-col>
+                    <el-col :span="22">
+                        <div class="flex-table-header">
+                            <el-button type="primary" @click="newclick(1)">新建</el-button>
+                            <el-button type="danger" @click="fireDel()">删除</el-button>
+                            <span>记录总数({{ num }})</span>
+                        </div>
+
+                        <Table @clickDemand="clickDemand" :list="lable" ref="TableList" @changeNum="changeNum"
+                            @num="selectNum">
+                        </Table>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-form-item label="附件：" prop="mkFileShareAttachList" label-width="120px">
+                        <my-upload ref="upload" @uploadBack="uploadBack" @delloadBack="delloadBack"
+                            @clickDownload="download" :fileInfo="fileInfo"
+                            :fileList="list.mkFileShareAttachList"></my-upload>
+                    </el-form-item>
+                </el-row>
+            </el-form>
+        </div>
+        <el-dialog v-if="firewallStatus" :before-close="clickClose(1)" :title="OPTit" :visible.sync="firewallStatus"
+            width="100%" :modal="false" style="display: flex; flex-direction: column">
+            <el-button type="primary" @click="newFireAdd(OPTit)">保存</el-button>
+            <el-form ref="form1" :model="fireList">
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="操作代码:" prop="code">
+                            <el-input v-model="fireList.code"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="操作代码名称:" prop="name">
+                            <el-input v-model="fireList.name"></el-input>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="配置地市，部门:" prop="cityDept">
+                            <el-input v-model="fireList.cityDept"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+
+        </el-dialog>
+    </div>
+</template>
+  
+<script>
+import myUpload from "../../../components/workflowUpload";
+import Table from "../../../components/el-form.vue";
+export default {
+    components: {
+        myUpload,
+        Table
+    },
+    data() {
+        return {
+            cityList: [],
+            fireList: {},
+            portList: {},
+            fireSelectList: [],
+            portSelectList: [],
+            firewallStatus: false,
+            page: 1,
+            pages: 1,
+            protStatus: false,
+            OPTit: '新建',
+            num: '0',
+            nums: '0',
+            costPayWayInputRule: {
+                costPayWayInput: [
+                    { required: true, message: "请填写", trigger: "blur" },
+                ],
+            },
+            gratuityInputRule: {
+                gratuityInput: [
+                    { required: true, message: "请填写", trigger: "blur" },
+                ],
+            },
+            reportFormInputRule: {
+                reportFormInput: [
+                    { required: true, message: "请填写", trigger: "blur" },
+                ],
+            },
+            checkBoxNone: false,
+            checkBoxStatus: false,
+            fileInfo: {
+                type: "bt1n",
+                typename: "上传文件",
+                limit: 5,
+                url: "/market/waf/upload",
+                fileList: [],
+            },
+            postEdit: false,
+            newPostAge: false,
+            pickerOptions: {
+                disabledDate(time) {
+                    return time.getTime() < Date.now() - 8.64e7;
+                },
+            },
+            oneList: [],
+            lable: {
+                name: "first",
+                height: '200',
+                titledata: [
+                    {
+                        label: "序号",
+                        prop: "index",
+                        width: 300,
+                    },
+                    {
+                        label: "操作代码",
+                        prop: "code",
+                        width: 300,
+                        color: "#0682CD",
+                    },
+                    {
+                        label: "操作代码名称",
+                        prop: "name",
+                        width: 200,
+                    },
+                    {
+                        label: "配置地市部门",
+                        prop: "cityDept",
+                        width: 200,
+                    },
+
+                ], //表格头
+                data: [], //内容数据
+                loading: true,
+                pageData: {
+                    total: 1, // 总条数
+                    pageSizes: 10, // 每页数量
+                    pageNum: 1, // 页码
+                },
+                isSelection: true, // 表格有多选时设置
+                isOperation: false, // 表格有操作列时设置
+                isIndex: false, // 列表序号
+                operation: {
+                    // 表格有操作列时设置
+                    label: "操作", // 列名
+                    width: "50", // 根据实际情况给宽度
+                    data: [
+                        {
+                            label: "操作", // 操作名称
+                            type: "", //按钮类型
+                            handleRow: () => {
+
+                            }, // 自定义事件
+                        },
+                    ],
+                },
+            },
+            childrenList: [],
+            twoList: [],
+            twoStatus: false,
+            threeList: [],
+            threeStatus: false,
+            fourList: [],
+            fourStatus: false,
+            fiveList: [],
+            fiveStatus: false,
+            isSensitiveDataStatus: false,
+            timeStatus: false,
+            functionStatus: false,
+            reportStatus: false,
+            Length: "",
+            form: {},
+            rules: {},
+            rule: {
+                needName: [
+                    { required: true, message: "请输入工单标题", trigger: "blur" },
+                ],
+                operationType: [
+                    { required: true, message: "请选择操作类型", trigger: "change" },
+                ]
+            },
+            copyRule: {},
+            isList: [],
+            remindMmsg: []
+        };
+    },
+    props: {
+        list: {
+            type: Object,
+            default: () => { },
+        },
+        disabled: {
+            type: Boolean,
+            default: () => { },
+        },
+    },
+    mounted() {
+        if (this.list.mkFileShareAttachList) {
+            this.$refs.upload.attList = this.list.mkFileShareAttachList;
+            this.list.mkFileShareAttachList.map((item) => {
+                item.name = item.fileName;
+            });
+        }
+        if (this.form.orderNumber) {
+            this.getFromQuery(this.form.orderNumber)
+        }
+
+    },
+    created() {
+        this.form = this.list;
+        this.copyRule = this.rule;
+        this.form.applicant = JSON.parse(window.sessionStorage.userInfo).loginName
+        this.form.applicationTime = new Date();
+        this.getcityList()
+    },
+
+    methods: {
+        getcityList() {
+            this.$http({
+                url: "/sysmgr/csysdept/municipalProvincialDepartments",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: {}
+            }).then((res) => {
+                console.log(res);
+                this.cityList = res.data;
+            });
+        },
+        clickClose() {
+
+        },
+        fireDel() {
+            if (this.fireSelectList.length > 0) {
+                this.$confirm("即将删除数据, 是否删除?", "提示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                })
+                    .then(() => {
+                        this.$http({
+                            url: "/market/opProcessInfo/delBatch",
+                            method: "post",
+                            headers: {
+                                "Content-Type": "application/json",
+                            },
+                            data: this.fireSelectList
+                        }).then((res) => {
+                            this.$message.success('删除成功')
+                            this.page = 1;
+                            this.getFromQuery(this.form.orderNumber)
+                        });
+                    })
+                    .catch(() => { });
+            }
+
+        },
+
+        newFireAdd(e) {
+            if (e == '新增') {
+                this.fireList.infoId = this.form.orderNumber
+                this.$http({
+                    url: "/market/opProcessInfo/add",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    data: this.fireList
+                }).then((res) => {
+                    this.firewallStatus = false;
+                    this.getFromQuery(this.form.orderNumber)
+                    this.$message.success('添加成功')
+                });
+            } else if (e == '修改') {
+                this.$http({
+                    url: "/market/opProcessInfo/update",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    data: this.fireList
+                }).then((res) => {
+                    this.firewallStatus = false;
+                    this.getFromQuery(this.form.orderNumber)
+                    this.$message.success('修改成功')
+                });
+            }
+
+        },
+        getFromQuery(e) {
+            console.log(e);
+            this.$http({
+                url: "/market/opProcessInfo/queryPage",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                    page: '{"pageNo":"' + this.page + '","pageSize":"10"}',
+                },
+                data: { infoId: e },
+            }).then((res) => {
+                this.lable.data = res.data.data
+                this.lable.pageData.total = res.data.totalRecord ? res.data.totalRecord : 1;
+                this.lable.data.map((item, index) => {
+                    item.index = (index + 1) + (res.data.pageNo - 1) * res.data.pageSize
+                })
+                this.num = res.data.totalRecord
+            });
+        },
+        newclick(e) {
+            this.OPTit = '新增'
+            this.fireList = {};
+            this.portList = {};
+            e === 1 ? this.firewallStatus = true : this.protStatus = true;
+        },
+        //页码
+        changeNum(e) {
+            this.page = e;
+            this.getFromQuery(this.form.orderNumber)
+
+
+
+        },
+        selectNum(e) {
+            this.fireSelectList = e;
+        },
+        selectNums(e) {
+            this.portSelectList = e
+        },
+        //点击工单
+        clickDemand(row, e) {
+            if (this.form.taskName === "填写申请单") {
+                this.OPTit = '修改'
+                this.fireList = e
+                this.firewallStatus = true
+                console.log(e);
+            }
+        },
+        uploadBack(v) {
+            if (this.form.mkFileShareAttachList) {
+                this.form.mkFileShareAttachList = [];
+                this.form.mkFileShareAttachList = v;
+            } else {
+                let mkFileShareAttachList = [];
+                mkFileShareAttachList = v;
+                this.$set(this.form, "mkFileShareAttachList", mkFileShareAttachList);
+            }
+        },
+        delloadBack(v) {
+            this.form.mkFileShareAttachList = v;
+            this.$http({
+                url: "/market/zfpzProcess/update",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: this.form,
+            }).then((res) => {
+            });
+        },
+        download() {
+            console.log(123);
+            if (this.form.mkFileShareAttachList.length > 1) {
+                this.$http({
+                    url: "/market/waf/downAllFile",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    responseType: "blob",
+                    data: { mkFileShareAttachList: this.form.mkFileShareAttachList },
+                }).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.form.needName + ".zip";
+                        document.body.appendChild(downloadElement);
+                        downloadElement.click();
+                        document.body.removeChild(downloadElement);
+                        window.URL.revokeObjectURL(href);
+                    }
+                    if (this.infolist.authType === "3") {
+                        this.dialogCli(10);
+                    }
+                });
+            } else {
+                console.log(this.form.mkFileShareAttachList);
+                let list = {
+                    id: this.form.mkFileShareAttachList[0].fileCode,
+                    fileName: this.form.mkFileShareAttachList[0].name,
+                };
+                this.$http({
+                    url: "/market/waf/downFile",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    responseType: "blob",
+                    data: list,
+                }).then((response) => {
+                    console.log(response);
+                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+                        let blob = new Blob([response.data], {
+                            type: "application/vnd.ms-excel",
+                        });
+                        //window.navigator.msSaveOrOpenBlob(blob, this.form.needName);
+                        window.navigator.msSaveOrOpenBlob(
+                            blob,
+                            this.form.mkFileShareAttachList[0].name
+                        );
+                    } else {
+                        /* 火狐谷歌的文件下载方式 */
+                        var blob = new Blob([response.data]);
+                        var downloadElement = document.createElement("a");
+                        var href = window.URL.createObjectURL(blob);
+                        downloadElement.href = href;
+                        downloadElement.download = this.form.mkFileShareAttachList[0].name;
+                        document.body.appendChild(downloadElement);
+                        downloadElement.click();
+                        document.body.removeChild(downloadElement);
+                        window.URL.revokeObjectURL(href);
+                    }
+                });
+            }
+        },
+    },
+
+};
+</script>
+  
+<style lang="scss" scoped>
+.flex-table-header {
+    margin-bottom: 10px;
+
+    span {
+        margin-left: 20px;
+    }
+}
+
+::v-deep .el-row {
+    margin-top: 16px;
+}
+
+a {
+    text-decoration: none;
+}
+
+::v-deep .el-upload-list {
+    width: 23rem;
+}
+
+.flex-title {
+    text-align: center;
+    font-size: 24px;
+    line-height: 60px;
+
+    font-weight: bold;
+}
+
+.flex-header {
+    margin-top: 20px;
+    display: flex;
+    //   justify-content: space-between;
+
+    ::v-deep .el-form-item {
+        width: 20%;
+        margin-right: 60px;
+    }
+}
+
+.flex-upload {
+    ::v-deep .el-form-item {
+        width: 100%;
+    }
+}
+
+.flex-input-tare {
+    ::v-deep .el-form-item {
+        width: 100%;
+        margin-right: 5%;
+    }
+
+    ::v-deep .el-form-item__label {
+        width: 9rem !important;
+    }
+}
+
+.flex-textarea {
+    width: 70.5%;
+}
+
+.el-upload__tip {
+    color: red;
+}
+
+// ::v-deep .el-input--suffix .el-input__inner {
+//   width: 119% !important;
+// }
+::v-deep .el-input__inner {
+    color: black !important;
+}
+
+::v-deep .el-textarea.is-disabled .el-textarea__inner {
+    color: black !important;
+}
+
+::v-deep .el-form-item {
+    display: flex;
+}
+
+::v-deep .el-form-item__label {
+    // width:100%;
+    height: 50px;
+    line-height: 40px !important;
+    width: 130px;
+    font-size: 0.5rem;
+}
+
+::v-deep .el-form-item__content {
+    width: 100%;
+    margin-left: 0% !important;
+}
+
+.el-select,
+::v-deep.el-input_inner {
+    width: 100%;
+}
+
+::v-deep.el-form-item.foldLabel .el-form-item__label {
+    white-space: pre-line;
+    /*换行显示*/
+    height: 10px;
+    /*设置lable高度，input高度一样*/
+    line-height: 30px !important;
+}
+
+::v-deep .el-pagination {
+    display: block !important;
+    background-color: #fff !important;
+}
+</style>
+  

src/pages/main/opcode/index.vue

@@ -0,0 +1,957 @@
+<template>
+    <div class="flex-box">
+        <!-- v-show="lable.name === 'first'" -->
+        <div class="flex-header" :span="24">
+            <Tabs :tabList="tabList" @status="clickTabTops" />
+            <el-button type="primary" @click="clickNewTag" v-show="lableTable.name === 'first'">+新建</el-button>
+        </div>
+        <div class="flex-count">
+            <Table @clickDemand="clickDemand" :list="lableTable" ref="TableList" @changeNum="changeNum">
+            </Table>
+        </div>
+        <el-dialog v-if="dialogStatus" :before-close="clickClose" :title="dialogTitle + '需求'" :visible.sync="dialogStatus"
+            width="100%" :modal="false" style="display: flex; flex-direction: column">
+            <!-- 后期维护 -->
+            <div style="position: fixed; z-index: 99">
+                <el-button type="primary" v-if="startStatus" @click="clickHandles">处理</el-button>
+                <el-button type="primary" v-if="closeStatus" @click="clickClose">关闭</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 v-if="destroy">
+            <el-dialog title="处理操作" width="100%" :visible.sync="handleStatus" :before-close="handleCloses" :modal="false"
+                v-if="handleStatus" :destroy-on-close="true">
+                <Workflow ref="workflow" :list="fromList" v-if="isWorkflowStatus == true" @updateForm="beforeClose"
+                    :requestForm="requestForm" :adminResourceId="adminResourceId" />
+                <WorkflowEntrance :list="fromList" v-else :lastManList="lastManList" @beforeClose="beforeClose"
+                    :requestForm="requestForm" />
+            </el-dialog>
+        </div>
+
+    </div>
+</template>
+<script>
+import Workflow from "../../../components/workflowBase";
+import WorkflowEntrance from "../../../components/workflowEntrance";
+import Tabs from "../../../components/el-tabs.vue";
+import Table from "../../../components/el-form.vue";
+import Tables from "../../../components/el-forms.vue";
+import getConfig from '../../../config/dev.js'
+import FormTable from "./formTables.vue";
+import { updateBase } from "../../../http/api.js";
+import {
+    getTodoBase,
+    getDoneBase,
+    getInitiateBase,
+} from "../../../http/api.js";
+import { log } from "console";
+
+export default {
+    components: {
+        Tabs,
+        Table,
+        Tables,
+        FormTable,
+        Workflow,
+        WorkflowEntrance
+    },
+    created() {
+        let status = JSON.stringify(this.$route.query) == "{}";
+        if (status) {
+            this.lableTable = this.firstTable
+            this.getQueryList()
+            this.usernumber()
+        } else {
+            let { id, type } = this.$route.query;
+            let list = {
+                taskId: id,
+                tableName: this.request_form.processDefinitionKey
+            };
+            this.usernumber()
+            this.lableTable = this.firstTable
+            this.getQueryList(list, 0);//代办
+        }
+    },
+    data() {
+        return {
+            lableTable: {},
+            abc: false,
+            handleClose: false,
+            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: true, //保存按钮状态
+            fromList: {}, //表单数据
+            rejectStatus: true,
+            taskId: "", //工单taskID
+            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: "op_process",
+            },
+            requestForm: {
+                // fresourceId: "b79206a9-b258-11ed-886f-d6cd97160e00", // 本地环境
+                // fresourceId: "1245d300-b25a-11ed-be6b-00505687dcd3", //测试环境
+                // fresourceId:'6b9e1cb2-d918-11ed-8255-e00084564cce',//生产环境
+                fresourceId: getConfig().opcode,
+                processDefinitionKey: "op_process",
+            },
+            treeList: [], //候选人列表
+            treeCopyList: [], //抄送人列表
+            editStatus: false,
+            querryList: [], //已选人员名单
+            commonlyList: [
+                //常用意见列表页
+            ],
+            textarea: "未填写意见",
+            num: 0,
+            dialogStatus: false, //新建dialog显示
+            handleStatus: false, //处理按钮状态
+            tabList: [
+                {
+                    index: "first",
+                    label: "我的待办",
+                    number: 0,
+                    name: "prosss_key",
+                },
+                {
+                    index: "two",
+                    label: "我的已办",
+                    number: 0,
+                },
+                {
+                    index: "three",
+                    label: "我发起的",
+                    number: 0,
+                },
+
+            ],
+            firstTable: {
+                name: "first",
+                height: 500,
+                titledata: [
+                    {
+                        label: "工单标题",
+                        prop: "need_name",
+                        width: 300,
+                        color: "#0682CD",
+                    },
+                    {
+                        label: "申请人",
+                        prop: "predealman",
+                        width: 300,
+                    },
+                    {
+                        label: "申请时间",
+                        prop: "proposer_time",
+                        width: 400,
+                    },
+                    {
+                        label: "当前环节",
+                        prop: "taskName",
+                        width: 400,
+                    },
+                ], //表格头
+                data: [], //内容数据
+                loading: true,
+                pageData: {
+                    total: 100, // 总条数
+                    pageSize: 10, // 每页数量
+                    pageNum: 1, // 页码
+                },
+                isSelection: false, // 表格有多选时设置
+                isOperation: false, // 表格有操作列时设置
+                isIndex: false, // 列表序号
+                operation: {
+                    // 表格有操作列时设置
+                    label: "操作", // 列名
+                    width: "50", // 根据实际情况给宽度
+                    data: [
+                        {
+                            label: "操作", // 操作名称
+                            type: "", //按钮类型
+                            handleRow: (e, r, o) => {
+
+                            }, // 自定义事件
+                        },
+                    ],
+                },
+            },
+            twoTable: {
+                name: "two",
+                disabled: true,
+                titledata: [
+                    {
+                        label: "工单标题",
+                        prop: "need_name",
+                        width: 300,
+                        color: "#0682CD",
+                    },
+                    {
+                        label: "申请人",
+                        prop: "applicant",
+                        width: 300,
+                    },
+                    {
+                        label: "申请时间",
+                        prop: "proposer_time",
+                        width: 400,
+                    },
+                    {
+                        label: "当前环节",
+                        prop: "taskName",
+                        width: 400,
+                    },
+                ], //表格头
+                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: "need_name",
+                        width: 300,
+                        color: "#0682CD",
+                    },
+                    {
+                        label: "申请人",
+                        prop: "applicant",
+                        width: 300,
+                    },
+                    {
+                        label: "申请时间",
+                        prop: "proposer_time",
+                        width: 400,
+                    },
+                    {
+                        label: "当前环节",
+                        prop: "taskName",
+                        width: 400,
+                    },
+                    {
+                        label: "当前处理人",
+                        prop: "currentMan",
+                        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) => {
+
+                            }, // 自定义事件
+                        },
+                    ],
+                },
+            },
+            lable: {},
+            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 () { }, // 自定义事件
+                        },
+                    ],
+                },
+            },
+            clickTagName: "first",
+        };
+    },
+    methods: {
+        clickTabTops(e) {
+            console.log(e);
+            this.$refs.TableList.page = 1;
+            this.totalPage = "1";
+            this.clickTagName = e;
+            const options = {
+                first: {
+                    setTable: function () {
+                        this.lableTable = this.firstTable;
+                        this.getQueryList();
+                    }.bind(this)
+                },
+                two: {
+                    setTable: function () {
+                        this.lableTable = this.twoTable;
+                        this.getQueryDone();
+                    }.bind(this)
+                },
+                three: {
+                    setTable: function () {
+                        this.lableTable = this.threeTable;
+                        this.getMeLaunch();
+                    }.bind(this)
+                }
+            };
+            options[e]?.setTable?.();
+
+        },
+        //处理按钮,开始工作流接口
+        clickHandles() {
+            this.getNextPath(this.fromList.resourceId || "");
+        },
+        getNextPath(e) {
+            let list = {
+                fresourceId: this.requestForm.fresourceId, // 本地环境
+                processId: this.requestForm.processDefinitionKey,
+            };
+            if (e) {
+                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();
+                    } else {
+                        this.adminResourceId = "";
+                    }
+                } else {
+                    this.adminResourceId = "";
+
+                    // this.destroy = true;
+                    // this.handleStatus = true;
+                }
+                console.log(this.fromList);
+                if (this.fromList.processId || this.fromList.taskId) {
+                    this.destroy = true;
+                    this.handleStatus = true;
+                } else {
+                    this.$message.error("请先点击保存按钮");
+                }
+            });
+        },
+        usernumber() {
+            getInitiateBase(this.totalPage, "", { tableName: this.request_form.processDefinitionKey, }).then((res) => {
+                this.tabList[2].number = res.data.totalRecord
+            });
+            getDoneBase(this.totalPage, "", { tableName: this.request_form.processDefinitionKey, }).then((res) => {
+                this.tabList[1].number = res.data.totalRecord;
+            });
+            getTodoBase(this.totalPage, "", { tableName: this.request_form.processDefinitionKey, }).then((res) => {
+                this.tabList[0].number = res.data.totalRecord
+            });
+        },
+        getQueryList(e, status) {
+            let list = {
+                tableName: this.request_form.processDefinitionKey,
+            };
+            getTodoBase(this.totalPage, "", list).then((res) => {
+                if (status === 0) {
+                    this.clickDemand("工单标题", res.data.data[0]);
+                }
+                console.log(res);
+                this.lableTable.data = res.data.data;
+                this.tabList[0].number = res.data.totalRecord;
+                this.lableTable.pageData.total = res.data.totalRecord;
+                this.loading = false;
+            });
+        },
+        getQueryDone() {
+            let list = {
+                tableName: this.request_form.processDefinitionKey,
+            };
+            getDoneBase(this.totalPage, "", list).then((res) => {
+                this.lableTable.data = res.data.data;
+                this.lableTable.pageData.total = res.data.totalRecord;
+                this.tabList[1].number = res.data.totalRecord;
+                this.total = res.data.totalRecord;
+                this.loading = false;
+            });
+        },
+        getMeLaunch() {
+            let list = {
+                tableName: this.request_form.processDefinitionKey,
+            };
+            getInitiateBase(this.totalPage, "", list).then((res) => {
+                this.lableTable.data = res.data.data;
+                this.lableTable.pageData.total = res.data.totalRecord;
+                this.tabList[2].number = res.data.totalRecord;
+                this.total = res.data.totalRecord;
+                this.loading = false;
+            });
+        },
+        //新建按钮
+        async clickNewTag() {
+            this.dialogTitle = "新建";
+            this.fromList = {}
+            this.lables.data = [];
+            this.disabled = false;
+            this.saveStatus = true
+            await this.getOrderNumber();
+
+
+        },
+        getOrderNumber() {
+            this.$http({
+                url: "/market/opProcess/getOrderNumber",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: {}
+            }).then((res) => {
+                this.fromList.orderNumber = res.data.body
+                this.fromList.taskName = '填写申请单'
+                this.dialogStatus = true;
+            });
+        },
+        //获取用户部门名称
+        getDepartmentName() {
+            this.$http({
+                url: "/market/waf/queryDept",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: {},
+            }).then((res) => {
+
+
+
+            });
+        },
+        clickDemand(e, res) {
+            if (e === "工单状态" || e === "标题" || e === "工单标题") {
+                if (this.clickTagName === "first") {
+                    this.dialogTitle = "查看";
+                    if (res.taskName === "填写申请单") {
+                        this.disabled = false;
+                        this.saveStatus = true;
+                    } else {
+                        this.disabled = true;
+                        this.saveStatus = false;
+                    }
+                    // this.clickForm(res);
+                    // this.getFromQuery(res);
+                    // setTimeout(() => {
+                    //     this.getBtnStatus(res);
+                    // }, 500);
+                }
+                if (this.clickTagName === "two") {
+                    this.disabled = true;
+                    this.startStatus = false;
+                    this.saveStatus = 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;
+                    }
+                }
+                this.fromList = res;
+                this.clickForm(res);
+                this.getFromQuery(res);
+            }
+        },
+        //查询form表单数据
+        getFromQuery(e) {
+            this.$http({
+                url: "/market/opProcess/query",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: { id: e.id },
+            }).then((res) => {
+                console.log(e);
+                let list = this.convertObjKeys(e)
+                this.fromList = { ...res.data, ...list }
+                this.dialogStatus = true;
+            });
+        },
+        async clickForm(e) {
+            let list = {
+                processInstanceId: e.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;
+                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);
+                            }
+                        });
+                    }
+                });
+
+                _this.lables.data = list;
+                _this.abc = true;
+            }
+        },
+        //获取页码
+        changeNum(e) {
+
+            let _this = this
+            this.totalPage = e;
+            const methodMapping = {
+                first: (timeList) => {
+                    _this.firstTable.pageData.pageNum = e;
+                    if (timeList) {
+                        _this.getQueryList(timeList);
+                    } else {
+                        _this.getQueryList();
+                    }
+                },
+                two: () => {
+                    _this.twoTable.pageData.pageNum = e;
+                    _this.getQueryDone();
+                },
+                three: (searchLists) => {
+                    _this.threeTable.pageData.pageNum = e;
+                    if (searchLists) {
+                        _this.getMeLaunch(searchLists);
+                    } else {
+                        _this.getMeLaunch();
+                    }
+                },
+
+            }
+            const methodToExecute = methodMapping[this.clickTagName];
+
+            if (methodToExecute) {
+                methodToExecute(this.timeList || this.searchLists);
+            }
+            // this.totalPage = e;
+        },
+        clickSave() {
+            this.$refs.formTable.$refs.form.validate((valid) => {
+                if (valid) {
+                    if (this.fromList.id) {
+                        this.setUpdateCopy(this.$refs.formTable.form)
+                    } else {
+                        this.getUserIds();
+                    }
+                } else {
+                    this.$message.error("请完善表单信息");
+                    return false;
+                }
+            });
+            // if (this.fromList.id) {
+            //     this.setUpdateCopy(this.$refs.formTable.form)
+            // } else {
+            //     this.getUserIds();
+            //     this.setForm();
+            // }
+        },
+        getUserIds() {
+            this.$http({
+                url: "/market/api/user/info/queryNodePers?params=" + JSON.parse(window.sessionStorage.userInfo).loginNo,
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            }).then((res) => {
+                this.request_form.userName = res.data[0].children[0].loginNameStr;
+                this.request_form.userId = res.data[0].children[0].loginNoStr;
+                this.setForm();
+                console.log(this.request_form)
+            });
+        },
+        setForm(e) {
+            this.request_form.title = '[工作台]-Op_Code-' + this.$refs.formTable.form.needName;
+            this.$http({
+                url: "/market/opProcess/add",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: this.$refs.formTable.form,
+            }).then((res) => {
+                this.request_form.businessKey = res.data.body;
+                this.clickHandle(res.data.body);
+            });
+        },
+        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) {
+                console.log(data);
+                // _this.fromList.processId = data.data;
+                // _this.taskId = data.data;
+                let list = {
+                    id: e,
+                    // taskId:_this.formId,
+                    tableName: _this.request_form.processDefinitionKey,
+                    processId: data.data,
+                    // resourceId: _this.nextPath.currentShape[0].resourceId,
+                };
+                _this.setUpdate(list);
+            }
+        },
+        convertObjKeys(obj) {
+            // 检查传入参数是否为对象
+            if (typeof obj !== "object" || obj === null) {
+                return obj;
+            }
+
+            // 对象遍历，使用 Object.keys() 获取所有属性名称
+            return Object.keys(obj).reduce((result, key) => {
+                // 下划线转驼峰命名
+                const newKey = key.replace(/_(\w)/g, (match, p1) => p1.toUpperCase());
+                // 将原有属性赋值到新属性中
+                result[newKey] = obj[key];
+                return result;
+            }, {});
+        },
+        async setUpdate(e) {
+            await updateBase(e).then((res) => {
+                let list = this.convertObjKeys(res.data.body[0])
+                console.log(list);
+                // console.log(res.data.body);
+                this.fromList = list
+                // console.log(this.formList);
+                // this.fromList.taskId = res.data.body[0].taskId;
+                // this.fromList.taskId = '1111111111';
+                // this.fromList.taskName = res.data.body[0].taskName;
+                // this.fromList = concat;
+            });
+        },
+        setUpdateCopy(e) {
+            this.$http({
+                url: "/market/opProcess/update",
+                method: "post",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                data: e
+            }).then((res) => {
+                console.log(res);
+                this.$message.success(res.data.desc)
+            });
+
+        },
+        clickClose() {
+            // this.$refs.formTable.form = {}
+            this.fromList = {}
+            this.dialogStatus = false;
+            this.treeList = [];
+            this.textarea = "";
+            this.handleStatus = false;
+            this.handleStatus = false;
+            this.destroy = false;
+            this.dialogStatus = false;
+            this.saveStatus = false;
+            this.startStatus = true;
+            this.usernumber()
+        },
+        handleCloses() {
+            this.beforeClose()
+        },
+        beforeClose(e) {
+            console.log(e);
+            this.dialogStatus = false;
+            this.handleStatus = false;
+            this.usernumber()
+            // this.handleCloses();
+            this.getQueryList();
+            // this.getMeLaunch();
+            // this.getQueryDone();
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+.copyClass {
+    display: flex;
+}
+
+.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>

src/pages/main/workflowdef/index.vue

@@ -109,6 +109,7 @@ export default {
             }
             this.common.httpPost(obj, success)
             function success(data) {
+                console.log(data);
                 self.list = data.data.rows
                 self.total = data.data.total
             }

src/router/index.js

@@ -16,6 +16,12 @@ const routes = [{
             component: (resolve) => require( /* webpackChunkName: "system" */['../pages/main/infotech/index.vue'], resolve)
         },
         {
+            meta: { name: '在线onlineOffice', keepAlive: false },
+            path: '/onlineOffice',
+            name: 'onlineOffice',
+            component: (resolve) => require( /* webpackChunkName: "system" */['../pages/main/onlineOffice/index.vue'], resolve)
+        },
+        {
             meta: { name: '绩效', keepAlive: false },
             path: '/performance',
             name: 'performance',
@@ -208,14 +214,14 @@ const routes = [{
             component: (resolve) => require( /* webpackChunkName: "system" */['../pages/main/organizaStructure/roleManage.vue'], resolve)
         },
         {
-            meta: { name:  '收补预存款', keepAlive: false },
+            meta: { name: '收补预存款', keepAlive: false },
             path: '/closeFill',
             name: 'closeFill',
             component: (resolve) => require( /* webpackChunkName: "system" */
                 ['../pages/main/closeFill/advanceDeposit.vue'], resolve)
         },
         {
-            meta: { name:  '工号配置', keepAlive: false },
+            meta: { name: '工号配置', keepAlive: false },
             path: '/workingCon',
             name: 'workingCon',
             component: (resolve) => require( /* webpackChunkName: "system" */
@@ -2242,7 +2248,7 @@ const routes = [{
             name: 'riskMaterials',
             component: (resolve) => require( /* webpackChunkName: "system" */
                 ['../pages/main/leader/risk/riskMaterials.vue'], resolve)
-        },{
+        }, {
             meta: { name: '风险防控管理', keepAlive: false },
             path: '/riskManagement',
             name: 'riskManagement',
@@ -2250,6 +2256,18 @@ const routes = [{
                 ['../pages/main/leader/risk/riskManagement.vue'], resolve)
         },
         {
+            meta: { name: '防火墙', keepAlive: false },
+            path: '/firewall',
+            name: 'firewall',
+            component: (resolve) => require( /* webpackChunkName: "system" */['../pages/main/firewall/index.vue'], resolve)
+        },
+        {
+            meta: { name: 'OPCODE', keepAlive: false },
+            path: '/opcode',
+            name: 'opcode',
+            component: (resolve) => require( /* webpackChunkName: "system" */['../pages/main/opcode/index.vue'], resolve)
+        },
+        {
             meta: { name: '资费管理', keepAlive: false },
             path: '/postage',
             name: 'postage',
@@ -2264,8 +2282,8 @@ const routes = [{
             component: (resolve) => require( /* webpackChunkName: "system" */
                 ['../pages/main/documentCollection/home.vue'], resolve),
             children: [
-                { 
-                    
+                {
+
                     meta: { name: '文件收集与审批我接收的', keepAlive: false },
                     path: '/documentCollectionApproval',
                     name: 'documentCollectionApproval',
@@ -2370,6 +2388,13 @@ const routes = [{
                 ['../pages/main/applyFor/backupRequire.vue'], resolve)
         },
         {
+            meta: { name: '文件审批流程', keepAlive: false },
+            path: '/docAppr',
+            name: 'docAppr',
+            component: (resolve) => require( /* webpackChunkName: "system" */
+                ['../pages/main/userList/docAppr.vue'], resolve)
+        },
+        {
             meta: { name: '用户清单审核流程', keepAlive: false },
             path: '/userList',
             name: 'userList',

vue.config.js

@@ -102,15 +102,16 @@ module.exports = {
                     "^/market": "",
                 },
             },
-            "/market/mk": {
-                target: "http://192.168.2.124:9113",
+            "/aps": {
+                target: "http://192.168.2.124:7779",
                 ws: false,
                 changeOrigin: true,
+                logLevel:'debug',
                 pathRewrite: {
-                    "^/market": "",
+                    "^/aps": "",
                 },
             },
-            "/market/techcentergj": {
+            "/market/mk": {
                 target: "http://192.168.2.124:9113",
                 ws: false,
                 changeOrigin: true,
@@ -118,7 +119,7 @@ module.exports = {
                     "^/market": "",
                 },
             },
-            "/mkWangge": {
+            "/market/techcentergj": {
                 target: "http://192.168.2.124:9113",
                 ws: false,
                 changeOrigin: true,
@@ -148,9 +149,9 @@ module.exports = {
                 // target: "http://124.223.66.248:9600",
                 // target: "http://43.138.50.94:9600",
                 // target: 'http://192.168.2.44:9600/',
-                target: 'http://192.168.2.92:9600',
+                // target: 'http://192.168.2.124:9600',
                 // target: "http://124.223.66.248:9600",
-                // target: "http://43.138.50.94:9600",
+                target: "http://43.138.50.94:9600",
                 changeOrigin: true,
                 // logLevel:'debug',
             },

yarn.lock

@@ -1129,6 +1129,11 @@
   resolved "https://registry.npmmirror.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@onlyoffice/document-editor-vue@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@onlyoffice/document-editor-vue/-/document-editor-vue-1.3.0.tgz#3cddb371fc65bff4a65d5ef488c9c940107fbde3"
+  integrity sha512-nopUT3fPD6uM76IHBkn4QGCqwgqC/9zqyYJhQZGN9FS/Ii57KbEKEgueoTaF/P/TvcAPIa745zqlpFdRidbqQQ==
+
 "@socket.io/component-emitter@~3.1.0":
   version "3.1.0"
   resolved "https://registry.npmmirror.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
@@ -6385,6 +6390,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.npmmirror.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
 
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
 lodash.transform@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npmmirror.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -7088,6 +7098,11 @@ onetime@^5.1.0:
   dependencies:
     mimic-fn "^2.1.0"
 
+onlyoffice-vue@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/onlyoffice-vue/-/onlyoffice-vue-1.0.1.tgz#5d98e973d12e0e96608bb3784a1b848b874f827f"
+  integrity sha512-90L/oxfhVtUgTRHUCQmrb6Ye5sp/GsEEqAl8AWZeeS+IIe68yZrwAzcVhgOe+RtfRb37c2gp+wrs5HHbWxx1CQ==
+
 open@^6.3.0:
   version "6.4.0"
   resolved "https://registry.npmmirror.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"