事项配置重构

2023-04-07 11:35:09 +08:00
parent aebf16936c
commit 485a294fb4
3 changed files with 189 additions and 261 deletions
--- a/packages/work/processManagement/mattersConfig/AppMattersConfig.vue
+++ b/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>

@@ -33,37 +18,14 @@ export default {
    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>
--- a/packages/work/processManagement/mattersConfig/components/addConfig.vue
+++ b/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>
--- a/packages/work/processManagement/mattersConfig/components/configList.vue
+++ b/packages/work/processManagement/mattersConfig/components/configList.vue
@@ -1,25 +1,16 @@
 <template>
  <div class="config-list">
-    <ai-list isTabs>
-      <template #content>
+    <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>
-            <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>
+                  <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
@@ -34,7 +25,7 @@
              </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>
+                  <el-button type="primary" icon="iconfont iconAdd" @click="goPage()">添加{{ curTab == 'add' ? '事项' : '办事指南' }}</el-button>
                </template>
              </ai-search-bar>
              <ai-table
@@ -44,6 +35,7 @@
                  :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}">
@@ -58,19 +50,22 @@
                <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="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",
@@ -92,55 +87,31 @@
      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: '所属部门',
-            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>]
-      },
+        {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.tab.value==0 ? true : (e.prop!="timeLimit"))
+      ].filter(e => this.curTab == 'add' ? true : (e.prop != "timeLimit"))
    },
  },
  methods: {
-      goPage(comp, row = {}) {
-        this.$emit("goPage", {comp, row})
+    goPage(id) {
+      this.$router.push({query: {id}, hash: `#${this.curTab}`})
    },
    /**
     * 获取分类
@@ -158,18 +129,14 @@
        }
      })
    },
-      /**
-       * 删除
-       * */
+    @confirm("是否删除?")
    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()
        }
      })
-        })
    },
    /**
     * 启用，停用
@@ -190,7 +157,7 @@
        params: {
          ...this.page,
          ...this.search,
-            processType: this.tab.value
+          processType: this.currentTab.value
        },
      }).then(res => {
        if (res?.data) {