事项配置重构

packages/work/processManagement/mattersConfig/AppMattersConfig.vue

@@ -1,21 +1,6 @@
 <template>
   <section class="matters-config">
-    <ai-list v-if="!showDetail">
-      <template #title>
-        <ai-title title="事项配置" :isShowBottomBorder="false"></ai-title>
-      </template>
-      <template slot="tabs">
-        <el-tabs class="tabs-page" v-model="currIndex">
-          <el-tab-pane v-for="(tab,i) in tabs" :key="i" :label="tab.label" :name="String(i)">
-            <component :is="tab.comp" v-if="currIndex==i" :ref="currIndex" :instance="instance" :dict="dict"
-                       :permissions="permissions" @goPage="goPage" :tab="currentTab"/>
-          </el-tab-pane>
-        </el-tabs>
-      </template>
-    </ai-list>
-    <component v-else :is="currentComp" :instance="instance" :dict="dict"
-               :processType="currentTab.value" :row="row"></component>
-
+    <component :is="currentPage" v-bind="$props"/>
   </section>
 </template>
 
@@ -27,43 +12,20 @@ import guidance from "./components/guidance";
 export default {
   name: "AppMattersConfig",
   label: '事项配置',
-  components: {addConfig,guidance},
+  components: {addConfig, guidance},
   props: {
     instance: Function,
     dict: Object,
     permissions: Function
   },
-  data() {
-    return {
-      currIndex: "0",
-      row: {},
-      currentComp: "",
-    }
-  },
   computed: {
-    tabs() {
-      return [
-        {label: "网上办事", name: "configList", value: "0", comp: configList, detail: addConfig, permission: ""},
-        {label: "办事指南", name: "configList", value: "2", comp: configList, detail: guidance, permission: ""},
-      ]
+    currentPage() {
+      const {hash} = this.$route
+      return hash == "#add" ? addConfig : hash == "#guidance" ? guidance : configList
     },
-    currentTab() {
-      return this.tabs?.[this.currIndex] || {}
-    },
-    showDetail() {
-      return !!this.$route.query?.id || !!this.$route.query?.processType
-    }
-  },
-  methods: {
-    goPage(params) {
-      this.row = params.row
-      this.currentComp = params.comp
-      this.$router.push({query: {processType: this.currentTab.value}})
-    }
   },
   created() {
-    this.$router.push({query: {}});
-    this.$dict.load("hbDepartment", 'sex', 'nation', 'marital', 'native_place', 'education', 'candidateApproverType', 'scopeCandidates', 'nodeType')
+    this.dict.load("hbDepartment", 'sex', 'nation', 'marital', 'native_place', 'education', 'candidateApproverType', 'scopeCandidates', 'nodeType')
   }
 }
 </script>

packages/work/processManagement/mattersConfig/components/addConfig.vue

@@ -27,6 +27,7 @@
 </template>
 
 <script>
+import {mapActions} from "vuex";
 import {applyForm, attachmentMaterial, baseInfo, processApproval} from './index'
 
 export default {
@@ -39,8 +40,6 @@ export default {
   props: {
     instance: Function,
     dict: Object,
-    row: Object,
-    processType: String
   },
   components: {baseInfo, applyForm, attachmentMaterial, processApproval},
   data() {
@@ -69,11 +68,11 @@ export default {
         {title: '审批流程', activeIndex: 3}
       ]
     },
-    detailTitle() {
-      return this.detailObj?.id ? "编辑事项" : "添加事项"
-    }
+    detailTitle: v => v.detailObj?.id ? "编辑事项" : "添加事项",
+    processType: v => v.$route.hash == "#add" ? 0 : 2
   },
   methods: {
+    ...mapActions(['closePage']),
     /**
      * 上一步
      * */
@@ -110,7 +109,6 @@ export default {
     handleBaseInfo() {
       this.$refs['baseInfo'].banseInfoForm().then(res => {
         if (res) {
-          // this.$refs['applyForm'].getFormList()
           this.baseInfo = res
           this.activeStep++
         }
@@ -121,6 +119,7 @@ export default {
      */
     save() {
       this.$refs['processApproval'].handleProcessApproval().then(res => {
+        const {processType} = this
         this.instance.post(`/app/approval-process-def/add-update`, {
           ...this.detailObj,
           ...this.baseInfo,
@@ -132,18 +131,19 @@ export default {
           tableType: 0,
           processAnnexDefs: this.annexs.map(e => ({...e, mustFill: Number(e.mustFill)})),
           processNodeList: res.processNodeList,
-          processType: this.processType
+          processType
         }).then(res => {
           if (res.code == 0) {
             this.$message.success("保存成功")
-            this.$router.push({query:{}})
+            this.handleBack()
           }
         })
       }).catch(err => {
         console.error(err);
       })
     },
-    getDetail(id) {
+    getDetail() {
+      const {id} = this.$route.query
       this.instance.post(`/app/approval-process-def/info-id`, null, {params: {id}}).then(res => {
         if (res?.data) {
           this.detailObj = res.data
@@ -163,12 +163,11 @@ export default {
     },
     handleBack() {
       this.$router.push({query: {}})
+      this.closePage()
     }
   },
   created() {
-    if (this.row?.id) {
-      this.getDetail(this.row?.id)
-    }
+    this.getDetail()
   }
 }
 </script>
@@ -178,11 +177,11 @@ export default {
   height: 100%;
 
   &.formLayout {
-    :deep( .ai-detail__content--wrapper ){
+    :deep( .ai-detail__content--wrapper ) {
       max-width: 100%;
-      height: calc(100%)!important;
-      padding: 0!important;
-      overflow: hidden!important;
+      height: calc(100%) !important;
+      padding: 0 !important;
+      overflow: hidden !important;
     }
   }
 
@@ -198,10 +197,10 @@ export default {
       padding: 0 calc(50% - 380px);
 
 
-      :deep( .el-step ){
+      :deep( .el-step ) {
         font-weight: bold;
 
-        :deep( .el-step__icon ){
+        :deep( .el-step__icon ) {
           width: 24px;
           height: 24px;
           background: #fff;
@@ -211,7 +210,7 @@ export default {
           }
         }
 
-        :deep( .el-step__main ){
+        :deep( .el-step__main ) {
           display: flex;
           align-items: center;
 

packages/work/processManagement/mattersConfig/components/configList.vue

@@ -1,214 +1,181 @@
 <template>
   <div class="config-list">
-    <ai-list isTabs>
-      <template #content>
-        <ai-search-bar>
-          <template #left>
-            <el-select v-model="search.department" placeholder="请选择所属部门" @change="page.current=1,getList()"
-                       size="small" clearable>
-              <el-option
-                v-for="(item,i) in dict.getDict('hbDepartment')" :key="i"
-                :label="item.dictName"
-                :value="item.dictValue">
-              </el-option>
-            </el-select>
-            <el-select v-model="search.classificationId" placeholder="请选择所属分类" @change="page.current=1,getList()"
-                       size="small" clearable>
-              <el-option
-                v-for="(item,i) in classList" :key="i"
-                :label="item.name"
-                :value="item.id">
-              </el-option>
-            </el-select>
-          </template>
-          <template #right>
-            <el-input
-              v-model="search.processName"
-              size="small"
-              placeholder="事项名称/创建人"
-              @clear="search={},page.current=1,getList()"
-              v-throttle="() => {page.current = 1, getList()}"
-              clearable
-              suffix-icon="iconfont iconSearch"/>
-          </template>
-        </ai-search-bar>
-        <ai-search-bar>
-          <template #left>
-            <el-button type="primary" icon="iconfont iconAdd" @click="goPage(tab.value==0 ? 'addConfig':'guidance')">添加{{tab.value==0?'事项':'办事指南'}}</el-button>
-          </template>
-        </ai-search-bar>
-        <ai-table
-          :tableData="tableData"
-          :col-configs="colConfigs"
-          :header-cell-style="{fontWeight:'bold',color:'#333'}"
-          :total="page.total"
-          :current.sync="page.current"
-          :size.sync="page.size"
-          @getList="getList">
-          <el-table-column label="是否启用" slot="processDefStatus" align="center" width="150">
-            <template v-slot="{row}">
-              <el-switch
-                v-model="row.processDefStatus"
-                @change="onChange(row)" active-value="1" inactive-value="0"
-                active-color="#5088FF"
-                inactive-color="#D0D4DC">
-              </el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" slot="options" align="center" width="150">
-            <template v-slot="{row}">
-              <div class="table-options">
-                <el-button type="text" title="编辑" @click="goPage(tab.value==0 ? 'addConfig':'guidance',row)">编辑</el-button>
-                <el-button type="text" title="删除" @click="delInfo(row)">删除</el-button>
-              </div>
-            </template>
-          </el-table-column>
-        </ai-table>
+    <ai-list>
+      <ai-title slot="title" title="事项配置"/>
+      <template #tabs>
+        <el-tabs v-model="curTab">
+          <el-tab-pane v-for="tab in tabs" :key="tab.name" v-bind="tab" lazy>
+            <ai-card class="mar-t16" panel v-if="curTab==tab.name">
+              <ai-search-bar>
+                <template #left>
+                  <ai-select v-model="search.department" placeholder="请选择所属部门" @change="page.current=1,getList()" dict="hbDepartment"/>
+                  <ai-select v-model="search.department" placeholder="请选择所属分类" @change="page.current=1,getList()" :selectList="classList"
+                             :prop="{label:'name'}"/>
+                </template>
+                <template #right>
+                  <el-input
+                      v-model="search.processName"
+                      size="small"
+                      placeholder="事项名称/创建人"
+                      @clear="search={},page.current=1,getList()"
+                      v-throttle="() => {page.current = 1, getList()}"
+                      clearable
+                      suffix-icon="iconfont iconSearch"/>
+                </template>
+              </ai-search-bar>
+              <ai-search-bar>
+                <template #left>
+                  <el-button type="primary" icon="iconfont iconAdd" @click="goPage()">添加{{ curTab == 'add' ? '事项' : '办事指南' }}</el-button>
+                </template>
+              </ai-search-bar>
+              <ai-table
+                  :tableData="tableData"
+                  :col-configs="colConfigs"
+                  :header-cell-style="{fontWeight:'bold',color:'#333'}"
+                  :total="page.total"
+                  :current.sync="page.current"
+                  :size.sync="page.size"
+                  :dict="dict"
+                  @getList="getList">
+                <el-table-column label="是否启用" slot="processDefStatus" align="center" width="150">
+                  <template v-slot="{row}">
+                    <el-switch
+                        v-model="row.processDefStatus"
+                        @change="onChange(row)" active-value="1" inactive-value="0"
+                        active-color="#5088FF"
+                        inactive-color="#D0D4DC">
+                    </el-switch>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" slot="options" align="center" width="150">
+                  <template v-slot="{row}">
+                    <div class="table-options">
+                      <el-button type="text" title="编辑" @click="goPage(row.id)">编辑</el-button>
+                      <el-button type="text" title="删除" @click="delInfo(row)">删除</el-button>
+                    </div>
+                  </template>
+                </el-table-column>
+              </ai-table>
+            </ai-card>
+          </el-tab-pane>
+        </el-tabs>
       </template>
     </ai-list>
   </div>
 </template>
 
 <script>
-  import day from 'dayjs'
+import {confirm} from "dui/lib/js/decorator";
 
-  export default {
-    name: "configList",
-    props: {
-      instance: Function,
-      dict: Object,
-      permissions: Function,
-      tab: Object,
+export default {
+  name: "configList",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+    tab: Object,
+  },
+  data() {
+    return {
+      search: {
+        department: "",
+        classificationId: "",
+        processName: "",
+      },
+      page: {current: 1, size: 10},
+      total: 0,
+      row: {},
+      tableData: [],
+      classList: [],
+      curTab: "add",
+      tabs: [
+        {label: "网上办事", value: "0", name: "add"},
+        {label: "办事指南", value: "2", name: "guidance"},
+      ]
+    }
+  },
+  computed: {
+    currentTab: v => v.tabs.find(e => e.name == v.curTab),
+    colConfigs() {
+      return [
+        {prop: 'processName', align: 'left', label: '事项名称'},
+        {prop: 'department', align: 'left', label: '所属部门', dict: "hbDepartment"},
+        {prop: 'classificationName', align: 'center', label: '所属分类',},
+        {prop: 'timeLimit', align: 'center', label: '办结时限（日）',},
+        {prop: 'createUserName', align: 'center', label: '创建人',},
+        {prop: 'createTime', align: 'center', label: '最后修改时间', format: 'YYYY-MM-DD HH:mm'},
+        {slot: 'processDefStatus', align: 'center', label: '是否启用',},
+        {slot: 'options', align: 'center', label: '操作',},
+      ].filter(e => this.curTab == 'add' ? true : (e.prop != "timeLimit"))
     },
-    data() {
-      return {
-        search: {
-          department: "",
-          classificationId: "",
-          processName: "",
+  },
+  methods: {
+    goPage(id) {
+      this.$router.push({query: {id}, hash: `#${this.curTab}`})
+    },
+    /**
+     * 获取分类
+     */
+    getClassification() {
+      this.instance.post(`/app/zwspapprovalclassification/list`, null, {
+        params: {
+          current: 1,
+          status: 1,
+          size: 9999
+        }
+      }).then(res => {
+        if (res && res.data) {
+          this.classList = res.data.records
+        }
+      })
+    },
+    @confirm("是否删除?")
+    delInfo({id}) {
+      this.instance.post(`/app/approval-process-def/delete?id=${id}`).then(res => {
+        if (res.code == 0) {
+          this.$message.success("删除成功")
+          this.getList()
+        }
+      })
+    },
+    /**
+     * 启用，停用
+     */
+    onChange({id, processDefStatus}) {
+      this.instance.post(`/app/approval-process-def/enable-disable`, null, {
+        params: {id}
+      }).then(res => {
+        if (res.code == 0) {
+          this.$message.success(processDefStatus == 0 ? "不启用" : "已启用")
+          this.getList()
+        }
+      })
+    },
+
+    getList() {
+      this.instance.post(`/app/approval-process-def/list`, null, {
+        params: {
+          ...this.page,
+          ...this.search,
+          processType: this.currentTab.value
         },
-        page: {current: 1, size: 10},
-        total: 0,
-        row: {},
-        tableData: [],
-        classList: [],
-      }
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data.records
+          this.page.total = res.data.total;
+        }
+      })
     },
-    computed: {
-      colConfigs() {
-        return [
-          {
-            prop: 'processName',
-            align: 'left',
-            label: '事项名称',
-          },
-          {
-            prop: 'department',
-            align: 'left',
-            label: '所属部门',
-            render: (h, {row}) => [ < span > {this.dict.getLabel('hbDepartment', row.department)} < /span>]
-          },
-          {
-            prop: 'classificationName',
-            align: 'center',
-            label: '所属分类',
-          },
-          {
-            prop: 'timeLimit',
-            align: 'center',
-            label: '办结时限（日）',
-          },
-          {
-            prop: 'createUserName',
-            align: 'center',
-            label: '创建人',
-          },
-          {
-            prop: 'createTime',
-            align: 'center',
-            label: '最后修改时间',
-            render: (h, {row}) => [ < span > {day(row.createTime
-      ).
-        format("YYYY-MM-DD HH:mm")
-      }<
-        /span>]
-      },
-        {slot: 'processDefStatus', align:'center', label:'是否启用',},
-        { slot: 'options',align:'center',label:'操作',},
-      ].filter(e=>this.tab.value==0 ? true : (e.prop!="timeLimit"))
-      },
-    },
-    methods: {
-      goPage(comp, row = {}) {
-        this.$emit("goPage", {comp, row})
-      },
-      /**
-       * 获取分类
-       */
-      getClassification() {
-        this.instance.post(`/app/zwspapprovalclassification/list`, null, {
-          params:{
-            current: 1,
-            status: 1,
-            size: 9999
-          }
-        }).then(res => {
-          if (res && res.data) {
-            this.classList = res.data.records
-          }
-        })
-      },
-      /**
-       * 删除
-       * */
-      delInfo({id}) {
-        this.$confirm("是否删除").then(() => {
-          this.instance.post(`/app/approval-process-def/delete?id=${id}`).then(res => {
-            if (res.code == 0) {
-              this.$message.success("删除成功")
-              this.getList()
-            }
-          })
-        })
-      },
-      /**
-       * 启用，停用
-       */
-      onChange({id, processDefStatus}) {
-        this.instance.post(`/app/approval-process-def/enable-disable`, null, {
-          params: {id}
-        }).then(res => {
-          if (res.code == 0) {
-            this.$message.success(processDefStatus == 0 ? "不启用" : "已启用")
-            this.getList()
-          }
-        })
-      },
-
-      getList() {
-        this.instance.post(`/app/approval-process-def/list`, null, {
-          params: {
-            ...this.page,
-            ...this.search,
-            processType: this.tab.value
-          },
-        }).then(res => {
-          if (res?.data) {
-            this.tableData = res.data.records
-            this.page.total = res.data.total;
-          }
-        })
-      },
-    },
-    mounted() {
-      this.getList()
-      this.getClassification()
-    },
-  }
+  },
+  mounted() {
+    this.getList()
+    this.getClassification()
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-  .config-list {
-    height: 100%;
-  }
+.config-list {
+  height: 100%;
+}
 </style>