feat: 修改框架

package.json

@@ -15,7 +15,7 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
-    "@zjlib/element-plugins": "^1.1.2",
+    "@zjlib/element-plugins": "^2.1.10",
     "axios": "0.18.1",
     "clipboard": "^2.0.8",
     "concurrent-tasks": "^1.0.7",

src/api/dataDictionary.js

@@ -0,0 +1,111 @@
+import request, { postBlob } from '@/utils/request'
+
+export function getNoticeList(params) {
+  return request({
+    url: `/notice/list?moduleId=${params.moduleId}`,
+    method: 'post',
+    data: params
+  })
+}
+
+export function getDataDictionary(data) {
+  return request({
+    url: `/dict/page?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function getDictRefPage(data) {
+  return request({
+    url: `/dict/ref/page?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function dictRefDel(params) {
+  return request({
+    url: '/dict/ref/del',
+    method: 'post',
+    params
+  })
+}
+
+export function getDataDictionaryExport(data, name) {
+  return postBlob({
+    url: '/dict/page/export',
+    data,
+    name
+  })
+}
+
+export function detailDictRef(params) {
+  return request({
+    url: `/dict/ref/detail`,
+    method: 'post',
+    params
+  })
+}
+
+export function updateDictRef(data) {
+  return request({
+    url: `/dict/ref/update`,
+    method: 'post',
+    data
+  })
+}
+export function addDictRef(data) {
+  return request({
+    url: `/dict/ref/add`,
+    method: 'post',
+    data
+  })
+}
+export function addDataDictionary(data) {
+  return request({
+    url: `/dict/add`,
+    method: 'post',
+    data
+  })
+}
+
+export function updateDataDictionary(data) {
+  return request({
+    url: `/dict/update`,
+    method: 'post',
+    data
+  })
+}
+
+export function delDataDictionary(params) {
+  return request({
+    url: `/dict/del`,
+    method: 'post',
+    params
+  })
+}
+
+export function dictDetail(params) {
+  return request({
+    url: `/dict/detail`,
+    method: 'post',
+    params
+  })
+}
+
+export function dictListDict(params) {
+  return request({
+    url: `/dict/listDict`,
+    method: 'post',
+    params
+  })
+}
+
+export function dictTypeList(data) {
+  return request({
+    url: `/dict/type/list`,
+    method: 'post',
+    data
+  })
+}

src/api/fieldMan.js

@@ -0,0 +1,17 @@
+import request, { postBlob } from '@/utils/request'
+
+export function zfireSave(data, moduleId) {
+  return request({
+    url: `/zfire/save?moduleId=${moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function zfireDel(data, adminUserId, moduleId) {
+  return request({
+    url: `/zfire/delete?adminUserId=${adminUserId}&moduleId=${moduleId}`,
+    method: 'post',
+    data
+  })
+}

src/components/template/add_callback_mixin.js

@@ -0,0 +1,42 @@
+export default {
+  created() {
+    this.addInit()
+  },
+  methods: {
+    addInit() {
+      var { type } = this.$route.query
+      if (type && this.callback[type]) {
+        this.callback[type]()
+      }
+    },
+    addOn(callback, typeStr = 'add') {
+      if (!this.callback) {
+        this.callback = {}
+      }
+      if (callback) {
+        this.callback[typeStr] = callback
+      }
+      return () => {
+        var { type, ...p } = this.$route.query
+        this.$router.push({
+          query: {
+            ...p,
+            type: typeStr
+          }
+        })
+        callback && callback()
+      }
+    },
+    addOff(callback) {
+      return (...pm) => {
+        var { type, ...p } = this.$route.query
+        this.$router.push({
+          query: {
+            ...p
+          }
+        })
+        callback && callback(...pm)
+      }
+    }
+  }
+}

src/components/template/import_mixin.js

@@ -1,17 +1,25 @@
 export default {
   methods: {
-    // 导入按钮
-    importButton(func, name = '导入') {
-      console.log(333);
+    //导入按钮
+    importButton(func, name = '导入', params, fun1, fun2) {
       return () => {
         return (
           <el-upload
             action={'_'}
             http-request={data => {
+              fun1 && fun1()
               var formdata = new FormData()
               formdata.append('file', data.file)
+              if (!!params) {
+                for (const key in params) {
+                  if (Object.hasOwnProperty.call(params, key)) {
+                    formdata.append(key, params[key])
+                  }
+                }
+              }
               func({ formdata })
                 .then(res => {
+                  fun2 && fun2()
                   this.$refs.pageRef.refreshList()
                   this.$message({
                     type: 'success',
@@ -19,7 +27,7 @@ export default {
                   })
                 })
                 .catch(err => {
-                  console.log(err,55);
+                  fun2 && fun2()
                   this.$message({
                     type: 'error',
                     message: err.message || '导入失败'

src/components/template/operation_mixin.js

@@ -10,7 +10,7 @@ export default {
                   size="mini"
                   type="primary"
                   onClick={() => {
-                    opt.view({ row, index, column });
+                    opt.view({ row, index, column })
                   }}
                 >
                   查看
@@ -21,7 +21,7 @@ export default {
                   size="mini"
                   type="primary"
                   onClick={() => {
-                    opt.editor({ row, index, column });
+                    opt.editor({ row, index, column })
                   }}
                 >
                   编辑
@@ -31,7 +31,7 @@ export default {
                 <el-popconfirm
                   title="这是一段内容确定删除吗？"
                   onConfirm={() => {
-                    opt.del({ row, index, column });
+                    opt.del({ row, index, column })
                   }}
                 >
                   <el-button size="mini" type="danger" slot="reference">
@@ -40,10 +40,10 @@ export default {
                 </el-popconfirm>
               ) : null}
             </div>
-          );
-        };
+          )
+        }
       }
-      return undefined;
+      return undefined
     }
   }
-};
+}

src/components/template/popu.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="populayview">
+    <div class="populayview-sl">
+      <div class="populayview-sl-shuiy">
+        <slot name="head" />
+        <br v-if="$slots.head" />
+        <slot />
+        <zj-watermark color="rgba(200,200,200,.3)" position="absolute" :str="str" zIndex="101" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    str() {
+      return this.$store.state?.user?.name
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.populayview {
+  min-width: 860px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  background: #fff;
+  overflow: hidden;
+  .populayview-sl {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    .populayview-sl-shuiy {
+      padding: 20px;
+      min-height: 100%;
+      position: relative;
+    }
+  }
+}
+</style>

src/components/template/sel-export-column-list.vue

@@ -2,6 +2,7 @@
   <el-dialog
     title="勾选导出列"
     :before-close="cancel"
+    :append-to-body="true"
     :visible.sync="dialogVisible"
     width="400px"
   >
@@ -25,7 +26,7 @@
         <template slot="header" slot-scope="scope">
           <div>
             <el-checkbox v-model="isExport"></el-checkbox>
-            <span style="margin-left:5px">导出</span>
+            <span style="margin-left: 5px">导出</span>
           </div>
         </template>
         <template slot-scope="scope">
@@ -65,54 +66,49 @@ export default {
       dialogVisible: false,
       isExport: true,
       exportColumnList: []
-    };
+    }
   },
   watch: {
     columnList: {
       handler() {
         if (this.columnList && this.columnList.length) {
           this.exportColumnList = this.columnList.map(item => {
-            return { ...item.exportField, isExport: true };
-          });
-          this.dialogVisible = true;
+            return { ...item.exportField, isExport: true }
+          })
+          this.dialogVisible = true
         } else {
-          this.exportColumnList = [];
-          this.dialogVisible = false;
+          this.exportColumnList = []
+          this.dialogVisible = false
         }
       },
       deep: true
     },
     exportColumnList: {
       handler() {
-        this.isExport = this.exportColumnList.every(
-          item => item.isExport === true
-        );
+        this.isExport = this.exportColumnList.every(item => item.isExport === true)
       },
       deep: true
     },
     isExport() {
-      if (
-        this.exportColumnList.every(item => item.isExport === true) !==
-        this.isExport
-      ) {
+      if (this.exportColumnList.every(item => item.isExport === true) !== this.isExport) {
         this.exportColumnList.map(item => {
-          item.isExport = this.isExport;
-        });
+          item.isExport = this.isExport
+        })
       }
     }
   },
   methods: {
     cancel() {
-      this.$emit("cancel");
+      this.$emit('cancel')
     },
     determine() {
       this.$emit(
-        "determine",
+        'determine',
         this.exportColumnList.filter(item => item.isExport)
-      );
+      )
     }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/template/template-page-1.vue

@@ -1,27 +1,46 @@
 <template>
-  <zj-page-template ref="zjpage" style="width: 100%;height: 100%;" :get-table-data="getTableData" :options-evens="evens"
-    :options-evens-group="selBtn(optionsEvensGroup)"
-    :table-attributes="{ ...defaultTableAttributes, ...tableAttributes }"
-    :table-events="{ ...defaultTableEvents, ...tableEvents }" :column-parsing="columnParsing" :reduction="reduction"
-    :plan="[...plan, ...morePlan]" :operation="operation" :operation-column-width="operationColumnWidth"
-    :show-table="showTable" :code-gather="codeGather" @columnWidthChange="columnWidthChange"
-    :lowerLine="true"
-    @columnListChange="columnListChange">
-    <sel-export-column-list :column-list="columnList" @determine="exportDetermine" @cancel="columnList = []" />
+  <div class="template-page-1">
+    <zj-page-template
+      ref="zjpage"
+      :getTableData="getTableData"
+      :optionsEvens="evens"
+      :optionsEvensGroup="selBtn(optionsEvensGroup)"
+      :tableAttributes="{ ...defaultTableAttributes, ...tableAttributes }"
+      :tableEvents="{ ...defaultTableEvents, ...tableEvents }"
+      :columnParsing="columnParsing"
+      :reduction="reduction"
+      :plan="[...defaultPlan, ...morePlan]"
+      :operation="operation"
+      :operationColumnWidth="operationColumnWidth"
+      :showTable="showTable"
+      :codeGather="codeGather"
+      :loading="loading"
+      :lowerLine="true"
+      @columnWidthChange="columnWidthChange"
+      @columnListChange="columnListChange"
+    >
+      <template slot="more-search">
+        <slot name="moreSearch"></slot>
+      </template>
+    </zj-page-template>
+    <sel-export-column-list :columnList="columnList" @determine="exportDetermine" @cancel="columnList = []" />
     <slot />
-  </zj-page-template>
+  </div>
 </template>
 
 <script>
-
-import { zfireSave, zfireDel, commonDict } from "@/api/user";
-import SelExportColumnList from './sel-export-column-list'
-
+import { zfireSave, zfireDel } from '@/api/fieldMan.js'
+import { dictListDict } from '@/api/dataDictionary.js'
+import SelExportColumnList from './sel-export-column-list.vue'
 export default {
   components: {
     SelExportColumnList
   },
   props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
     // 事件组合
     optionsEvensGroup: {
       type: Array,
@@ -56,9 +75,27 @@ export default {
     operation: {
       type: Function
     },
+    cstomClumn: {
+      type: Function
+    },
     operationColumnWidth: {
       type: Number,
       default: 140
+    },
+    customModuleName: {
+      type: String,
+      default: ''
+    },
+    defaultPlan: {
+      type: Array,
+      default: () => [
+        {
+          name: '默认方案',
+          paramCallback: () => {
+            return []
+          }
+        }
+      ]
     }
   },
   data() {
@@ -66,17 +103,9 @@ export default {
       // 菜单id
       moduleId: this.$route.meta.moduleId,
       // 菜单名
-      moduleName: this.$route.meta.title,
+      moduleName: this.customModuleName || this.$route.meta.title,
       // 搜索的参数
       parameter: {},
-      plan: [
-        {
-          name: '默认方案',
-          paramCallback: () => {
-            return []
-          }
-        }
-      ],
       // 按钮集合
       evens: [],
       // 表格属性
@@ -88,7 +117,8 @@ export default {
       // 导出弹窗
       columnList: [],
       showTable: false,
-      codeGather: {}
+      codeGather: {},
+      frontCodes: []
     }
   },
   computed: {
@@ -108,41 +138,36 @@ export default {
         ]
       ]
     }
-
   },
-
   methods: {
-    getDictCode(params) {
-      this.codeGather = {}
-      commonDict(params).then(res => {
-        if (res.data.length) {
-          res.data.map(item => {
-            if (!this.codeGather[params.code]) {
-              this.$set(this.codeGather,params.code,[])
-            }
-            this.$set(this.codeGather,params.code,[...this.codeGather[params.code],{
-              label: item.dictValue,
-              value: item.dictCode
-            }])
-          })
-        }
-      })
-    },
     selBtn(arr) {
       for (var i = 0; i < arr.length; i++) {
         if (Array.isArray(arr[i])) {
           this.selBtn(arr[i])
         }
-        if (
-          !(arr[i].isRole || arr[i].isRole === undefined) ||
-          arr[i].length == 0
-        ) {
+        if (!(arr[i].isRole || arr[i].isRole === undefined) || arr[i].length == 0) {
           arr.splice(i, 1)
           i--
         }
       }
       return arr
     },
+    // 获取下拉对应数据
+    getCodeGather() {
+      let codes = this.frontCodes.filter(key => (this.codeGather[key] ? false : true))
+      if (codes && codes.length) {
+        var codeGather = {}
+        Promise.all(codes.map(code => dictListDict({ dictType: code }))).then(resAll => {
+          codes.map((code, index) => {
+            var arr = resAll[index].data.map(item => {
+              return { value: item.dictCode, label: item.dictValue }
+            })
+            codeGather[code] = arr
+          })
+          this.codeGather = { ...this.codeGather, ...codeGather }
+        })
+      }
+    },
     // 获取列表数据函数
     async getTableData(data) {
       if (!this.getList) {
@@ -157,19 +182,21 @@ export default {
           moduleId: this.moduleId
         }
         var res = await this.getList(this.parameter)
-        // res.data.records = []
         if (res.code == 200) {
           if (!this.showTable) {
             this.$nextTick(() => {
               this.showTable = true
             })
           }
-          res.fieldBeans.forEach(k => {
-            if (k.frontCode) {
-              this.getDictCode({ code: k.frontCode })
+          for (var item of res.fieldBeans) {
+            if (item.frontCode && !~this.frontCodes.indexOf(item.frontCode)) {
+              this.frontCodes.push(item.frontCode)
             }
-          });
-
+            if (this.cstomClumn && item.label === 'cstomClumn') {
+              this.cstomClumn(item.jname, res.data.records, res.fieldBeans, this.parameter)
+            }
+          }
+          this.getCodeGather()
           return res
         }
       } catch (error) {
@@ -193,8 +220,7 @@ export default {
         }),
         this.moduleId
       )
-        .then(res => {
-        })
+        .then(res => {})
         .catch(err => {
           this.$message.error('保存失败')
         })
@@ -218,8 +244,7 @@ export default {
         }),
         this.moduleId
       )
-        .then(res => {
-        })
+        .then(res => {})
         .catch(err => {
           this.$message.error('保存失败')
         })
@@ -228,7 +253,7 @@ export default {
     reduction() {
       zfireDel({}, this.userid, this.moduleId)
         .then(res => {
-          this.$refs.zjpage.refresh()
+          this.refreshList(true)
         })
         .catch(err => {
           this.$message.error('操作失败')
@@ -242,6 +267,12 @@ export default {
       if (!this.exportList) {
         return
       }
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
       this.evens[0][0].loading = true
       this.exportList(
         {
@@ -258,32 +289,53 @@ export default {
           })
           this.columnList = []
           this.evens[0][0].loading = false
+          loading.close()
         })
-        .catch(() => {
+        .catch(err => {
           this.$message.error('导出失败')
           this.columnList = []
           this.evens[0][0].loading = false
+          loading.close()
         })
     },
-    refreshList() {
-      this.$refs.zjpage.refresh()
+    refreshList(bool) {
+      if (bool === true) {
+        this.showTable = false
+        this.$refs.zjpage.refresh()
+      } else {
+        this.$refs.zjpage.refresh()
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.template-page-1 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 860px;
+  overflow: auto;
+}
+.zj-page-template {
+  position: relative;
+  z-index: 0;
+}
 @font-face {
-  font-family: "aliyun_iconfont";
-  src: url("//at.alicdn.com/t/font_2075393_0cjq4n8ykvds.woff2?t=1647587689181") format("woff2"),
-    url("//at.alicdn.com/t/font_2075393_0cjq4n8ykvds.woff?t=1647587689181") format("woff"),
-    url("//at.alicdn.com/t/font_2075393_0cjq4n8ykvds.ttf?t=1647587689181") format("truetype");
+  font-family: 'aliyun_iconfont';
+  src: url('~@/components/template/font/font_2075393_0cjq4n8ykvds.woff2') format('woff2'),
+    url('~@/components/template/font/font_2075393_0cjq4n8ykvds.woff') format('woff'),
+    url('~@/components/template/font/font_2075393_0cjq4n8ykvds.ttf') format('truetype');
 }
-
 ::v-deep .el-table__cell {
   padding: 0 !important;
 }
-
+::v-deep .el-table--mini td,
+::v-deep .el-table--mini th {
+  padding: 0 !important;
+}
 ::v-deep .el-table__column-filter-trigger {
   .el-icon-arrow-down {
     font-family: aliyun_iconfont !important;
@@ -298,41 +350,52 @@ export default {
     -webkit-font-smoothing: antialiased;
     transform: translate(-2px, 1px);
     color: #c0c4cc;
+    width: 20px;
+    text-align: center;
   }
-
   .el-icon-arrow-down:before {
-    content: "\e64c" !important;
+    content: '\e64c' !important;
   }
 }
-
 ::v-deep .zj-buttons-group {
   .el-upload-list {
     display: none !important;
   }
 }
-
 ::v-deep .operation-btns {
   width: 100%;
-  height: 100%;
+  height: 35px;
   display: flex;
   flex-direction: row;
   align-items: center;
-
-  &>*:not(:last-child) {
+  & > *:not(:last-child) {
     margin-right: 5px;
   }
-
   .el-button {
     margin-left: 0 !important;
   }
 }
-
 ::v-deep .is-disabled {
-
   .el-textarea__inner,
-  .el-input__inner {
-    background-color: #fff;
-    color: #606266;
+  .el-input__inner,
+  .el-radio__label,
+  .el-radio__input {
+    background-color: #fff !important;
+    color: #606266 !important;
+    // border: none !important;
   }
 }
+::v-deep .el-checkbox.is-bordered.is-checked,
+::v-deep .el-radio.is-bordered.is-checked {
+  border-color: #409eff !important;
+}
+::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
+::v-deep .el-radio__input.is-checked .el-radio__inner {
+  border-color: #409eff !important;
+  background: #409eff !important;
+}
+::v-deep .el-checkbox.is-bordered {
+  margin-left: 0 !important;
+  margin-right: 10px !important;
+}
 </style>

src/layout/components/AppMain.vue

@@ -1,23 +1,32 @@
 <template>
-  <section class="app-main">
-    <transition name="fade-transform" mode="out-in">
-      <keep-alive v-if="$route.name">
-        <router-view :key="$route.name" />
-      </keep-alive>
-      <router-view v-else />
-    </transition>
+  <section class="app-main" :style="{ paddingTop: show ? '140px' : '80px' }">
+    <div class="app-main-view">
+      <transition name="fade-transform" mode="out-in">
+        <keep-alive v-if="$route.name">
+          <router-view :key="$route.name" />
+        </keep-alive>
+        <router-view v-else />
+      </transition>
+      <zj-watermark color="rgba(200,200,200,.3)" position="absolute" :str="str" zIndex="99" />
+    </div>
   </section>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'AppMain',
   computed: {
+    ...mapGetters(['show']),
     cachedViews() {
       return this.$store.state.tagsView.cachedViews
     },
     key() {
       return this.$route.path
+    },
+    str() {
+      return this.$store.state?.user?.name
     }
   }
 }
@@ -26,22 +35,20 @@ export default {
 <style scoped>
 .app-main {
   /*50 = navbar  */
-  min-height: calc(100vh - 50px);
+  height: 100vh;
   width: 100%;
   position: relative;
   overflow: hidden;
 }
 .fixed-header + .app-main {
   /* padding-top: 50px; */
-  padding-top: 80px;
+  /* padding-top: 80px; */
 }
-</style>
-
-<style lang="scss">
-// fix css style bug in open el-dialog
-.el-popup-parent--hidden {
-  .fixed-header {
-    padding-right: 15px;
-  }
+.app-main-view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 </style>