设置动态列表抽取到顶部 2022年12月13日 sxm

src/api/table.js

@@ -25,6 +25,9 @@ export const updateTableUser = data => createAPI(`gridTableUser/updateTableUser`
 // 删除
 export const removerUser = data => createAPI(`gridTableUser/removerUser`,'post',data)
 
+// 获取功能对应下的所有表格
+export const getMenuTableList = data => createAPI(`gridTableDefault/getMenuTableList`,'post',data)
+
 
 
 

src/icons/svg/icon-editTable.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1670914070507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2012" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M895.9 288.5v62.4h2.8c21.9 0 42.9 5.8 61.3 16.7v-79.1h-64.1z m-211.2 164v-164h-64.1v164H404.4v-164h-64.1v164H129.1v-164H65v388h-1v64h1v219h279.1l60.2-119.3v-99.7h49.9l30.4-60.8 17.6 17.5 20.7-20.7H404.4v-160h216.2V579l108.3-108.1 18.4-18.4h-62.6z m-344.4 443H129.1v-155h211.2v155z m0-219H129.1v-160h211.2v160zM898.7 640.7v-0.1l-2.8 2.8v33.1h-33.1l-64.1 64h97.2v155H684.7v-8.6l-145.3 72.6H960V579.4z" fill="#17b3a3" p-id="2013"></path><path d="M684.7 879.3v-24.9l-12.5 12.5z" fill="#17b3a3" p-id="2014"></path><path d="M896 288.5v62.4h1.8c22.3 0 43.6 6 62.2 17.3v-79.7h-64z m-767 0H65v608h-1v63h280.3l31.5-63H129v-608z m768.8 352.1l-1.8 1.8v254.1H664.9l-126 63H960V578.4l-62.2 62.2z" fill="#17b3a3" p-id="2015"></path><path d="M937.4 431.3c-21.9-21.9-57.3-21.9-79.2 0l-39.6 39.6 39.1 39.1c0.2 0.2 0.4 0.4 0.5 0.6 0.2 0.2 0.4 0.4 0.6 0.5l39 39.1 39.6-39.6c21.9-22 21.9-57.4 0-79.3zM541.4 748.105l237.586-237.586 79.195 79.196L620.595 827.3zM422.6 946.1L581 866.9l-79.2-79.2z" fill="#17b3a3" p-id="2016"></path><path d="M65 64.5h895v224H65z" fill="#17b3a3" p-id="2017"></path></svg>

src/views/main-navbar.vue

@@ -10,8 +10,8 @@
             <icon-svg name="zhedie"></icon-svg>
           </el-menu-item>
         </el-menu>
-        <a class="site-navbar__brand-lg" href="javascript:;">{{pageLanguage.XjSysManage}}</a>
-        <a class="site-navbar__brand-mini" href="javascript:;">{{pageLanguage.abbreviation}}</a>
+        <a class="site-navbar__brand-lg" href="javascript:;">{{ pageLanguage.XjSysManage }}</a>
+        <a class="site-navbar__brand-mini" href="javascript:;">{{ pageLanguage.abbreviation }}</a>
       </h1>
 
     </div>
@@ -21,6 +21,11 @@
       <el-menu
         class="site-navbar__menu site-navbar__menu--right"
         mode="horizontal">
+        <el-menu-item class="site-navbar__avatar" index="1">
+         <span class="el-dropdown-link" @click="userSetting">
+            <icon-svg name="editTable"  style="width: 25px;height: 25px;margin-top: 5px"></icon-svg>
+          </span>
+        </el-menu-item>
         <el-menu-item v-if="isAuth('review:show')" class="site-navbar__avatar" index="1">
          <span class="el-dropdown-link">
             <router-link :to="{path:'purchaseorder-procurementReview',query:{'': ''}}">
@@ -38,16 +43,16 @@
         <el-submenu index="3">
           <template slot="title">{{ pageLanguage.setting }}</template>
           <el-submenu index="2-1">
-            <template slot="title">{{pageLanguage.languageSetting}}</template>
+            <template slot="title">{{ pageLanguage.languageSetting }}</template>
             <el-menu-item index="2-1-1" :key="index" :value="item.languageCode" v-for="(item,index) in languageList "
-                          @click.native="switch_the_language(item.languageCode)">{{item.languageName}}
+                          @click.native="switch_the_language(item.languageCode)">{{ item.languageName }}
             </el-menu-item>
           </el-submenu>
           <el-submenu index="2-2">
             <template slot="title">{{ pageLanguage.userSetting }}</template>
             <el-menu-item index="2-2-1" @click.native="updatePasswordHandle()">{{ pageLanguage.updatePassword }}
             </el-menu-item>
-            <el-menu-item index="2-2-2" @click.native="updateLanguageHandle()">{{pageLanguage.updateDefaultLanguage}}
+            <el-menu-item index="2-2-2" @click.native="updateLanguageHandle()">{{ pageLanguage.updateDefaultLanguage }}
             </el-menu-item>
           </el-submenu>
           <el-menu-item index="2-3" @click="$router.push({ name: 'theme' })">{{ pageLanguage.cssSetting }}
@@ -75,29 +80,34 @@
     <FileListView ref="fileListView" v-if="helpFileVisible"></FileListView>
     <!-- 打印机列表 -->
     <UserPrintList ref="userPrintList" v-if="printListVisible"></UserPrintList>
+
+    <!-- 动态列    -->
+    <column v-if="visible" ref="column" @refreshData="getTableUserColumn" v-drag></column>
   </nav>
 </template>
 
 <script>
-  import UpdatePassword from './main-navbar-update-password'
-  import UpdateLanguage from './main-navbar-update-language'
-  import {clearLoginInfo} from '@/utils'
-  import FileListView from './modules/common/file-list-view'
-  import UserPrintList from './modules/common/user-print-list'
-  import {
+import UpdatePassword from './main-navbar-update-password'
+import UpdateLanguage from './main-navbar-update-language'
+import {clearLoginInfo} from '@/utils'
+import FileListView from './modules/common/file-list-view'
+import UserPrintList from './modules/common/user-print-list'
+import column from "./modules/common/column";
+import {
   searchFunctionButtonList,
   saveButtonList,
   searchSysLanguage,
-  } from "@/api/sysLanguage.js"
+} from "@/api/sysLanguage.js"
 
-  import {
+import {
   getReviewToolCount
 
-  } from '@/api/purchaseorder/procurementReview.js'
+} from '@/api/purchaseorder/procurementReview.js'
 
-  export default {
+export default {
   data() {
     return {
+      visible: false,
       updatePassowrdVisible: false,
       updateLanguageVisible: false,
       helpFileVisible: false,
@@ -212,7 +222,8 @@
     UpdatePassword,
     UpdateLanguage,
     FileListView,
-      UserPrintList
+    UserPrintList,
+    column,
   },
   computed: {
     navbarLayoutType: {
@@ -246,12 +257,30 @@
 
   },
   mounted() {
-      this.toolReviewTimer = setInterval( this.getReviewToolCount, 1000*60);
+    this.toolReviewTimer = setInterval(this.getReviewToolCount, 1000 * 60);
   },
   beforeDestroy() {
     clearInterval(this.toolReviewTimer);
   },
   methods: {
+    // 打开页面设置
+    userSetting() {
+      this.visible = true;
+      let queryTable = {
+        userId: this.$store.state.user.name,
+        functionId: this.$route.meta.menuId,
+        languageCode: this.$i18n.locale,
+        tableId: '',
+      }
+      this.$nextTick(() => {
+        this.$refs.column.init(queryTable);
+      })
+    },
+    getTableUserColumn() {
+      this.$nextTick(() => {
+        this.$router.go(0)
+      })
+    },
     // 获取待审核的是工具申请单数量
     getReviewToolCount() {
       getReviewToolCount(this.queryToolReview).then(({data}) => {
@@ -346,27 +375,27 @@
     this.getFunctionButtonList()
     this.getReviewToolCount()
   }
-  }
+}
 </script>
 
 <style lang="scss">
-  .icon-svg {
+.icon-svg {
   width: 2em;
-  }
+}
 
-  .el-menu--collapse .el-menu .el-submenu, .el-menu--popup, .el-menu-item {
+.el-menu--collapse .el-menu .el-submenu, .el-menu--popup, .el-menu-item {
   min-width: 50px !important;
-  }
+}
 
-  .site-navbar__brand-lg, .site-navbar__brand-mini {
+.site-navbar__brand-lg, .site-navbar__brand-mini {
   margin: 0 5px;
   color: #fff;
   margin-left: -45px;
-  }
+}
 
-  .el-menu--horizontal > .el-menu-item {
+.el-menu--horizontal > .el-menu-item {
   color: #3b4249;
-  }
+}
 
 </style>
 

src/views/modules/common/column.vue

@@ -1,8 +1,14 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" title="设置表格栏位"
+  <el-dialog :modal-append-to-body="false"
+             :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" title="设置表格栏位"
              :visible.sync="visible"
              class="cl"
              width="958px" v-drag>
+    <el-select v-model="this.queryTable.tableId">
+      <el-option @change="getTableUserList" :value="item.tableId" :label="item.tableName" v-for="(item,index) in tableList" :key="index">
+
+      </el-option>
+    </el-select>
     <el-table
       :height="height"
       :data="userColumnList"
@@ -15,14 +21,14 @@
         width="120"
         label="栏位名称">
         <template slot-scope="scope">
-          <el-input readonly v-model="scope.row.columnLabel"  ></el-input>
+          <el-input readonly v-model="scope.row.columnLabel"></el-input>
         </template>
       </el-table-column>
       <el-table-column
         width="80"
         label="显示顺序">
         <template slot-scope="scope">
-          <el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="scope.row.sortLv"  :min="0" ></el-input>
+          <el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="scope.row.sortLv" :min="0"></el-input>
         </template>
       </el-table-column>
       <el-table-column
@@ -62,14 +68,14 @@
         width="100"
         label="宽度">
         <template slot-scope="scope">
-          <el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="scope.row.columnWidth"  :min="0" ></el-input>
+          <el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="scope.row.columnWidth" :min="0"></el-input>
         </template>
       </el-table-column>
       <el-table-column
         width="100"
         label="类型">
         <template slot-scope="scope">
-          <el-select v-model="scope.row.columnType" >
+          <el-select v-model="scope.row.columnType">
             <el-option value="string" label="string"></el-option>
             <el-option value="number" label="number"></el-option>
             <el-option value="date" label="date"></el-option>
@@ -80,7 +86,7 @@
         width="100"
         label="位置">
         <template slot-scope="scope">
-          <el-select v-model="scope.row.align" >
+          <el-select v-model="scope.row.align">
             <el-option value="left" label="居左"></el-option>
             <el-option value="center" label="居中"></el-option>
             <el-option value="right" label="居右"></el-option>
@@ -90,9 +96,8 @@
     </el-table>
 
 
-
     <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="updateColumnList()"  >确定</el-button>
+      <el-button type="primary" @click="updateColumnList()">确定</el-button>
       <el-button @click="visible = false" type="primary">取消</el-button>
     </span>
   </el-dialog>
@@ -102,13 +107,14 @@
 <script>
 
 
-  import {
+import {
   saveTableUser,
   getTableDefaultListLanguage,
-    getTableUserListLanguage
-  } from "@/api/table.js"
+  getTableUserListLanguage,
+  getMenuTableList
+} from "@/api/table.js"
 
-  export default {
+export default {
   data() {
     return {
       height: 400,
@@ -214,6 +220,7 @@
         },
 
       ],
+      tableList: [],
       dataList: [],
       // 用户table 配置集合
       userColumnList: [],
@@ -225,20 +232,33 @@
   methods: {
 
     // 获取 用户的配置
-      init(queryTable) {
+    async init(queryTable) {
+      if (!queryTable.functionId) return;
       this.visible = true
       this.queryTable = queryTable
-        getTableUserListLanguage(queryTable).then(({data}) => {
+      this.dataListLoading = true
+
+      // 先获取功能下的所有tableId 和tableName
+      await getMenuTableList(queryTable).then(({data}) => {
+        if (data && data.code == 0) {
+          this.tableList = data.data
+          this.queryTable.tableId = data.data.length>0?data.data[0].tableId:'-1'
+        }
+      })
+      await this.getTableUserList()
+    },
+    async getTableUserList(){
+      await getTableUserListLanguage(this.queryTable).then(({data}) => {
          if (data.code == 0) {
+           this.dataListLoading = false
            this.userColumnList = data.rows
            if (data.rows.length <= 0) {
-              getTableDefaultListLanguage(queryTable).then(({data}) => {
+             getTableDefaultListLanguage(this.queryTable).then(({data}) => {
                this.userColumnList = data.rows
              })
            }
          }
        })
-
      },
     // 修改 table 列
     updateColumnList() {
@@ -268,7 +288,7 @@
           status: column.status,
           fixed: column.fixed,
           serialNumber: column.serialNumber,
-            columnType:column.columnType
+          columnType: column.columnType
         }
         userColumns.push(userColumn)
         this.$emit("refreshData");
@@ -278,26 +298,26 @@
           this.$message.success(data.msg)
           loading.close();
           this.visible = false
-            this.$emit("refreshData",this.queryTable.tableId);
+          this.$emit("refreshData", this.queryTable.tableId);
         } else {
           this.$message.error(data.msg)
         }
       })
     },
   }
-  }
+}
 </script>
-<style >
-  .cl .el-table .cell {
+<style>
+.cl .el-table .cell {
   line-height: 20px;
   font-size: 12px;
   height: 20px;
-  }
+}
 
-  .cl .el-switch__label * {
+.cl .el-switch__label * {
   line-height: 1;
   font-size: 12px;
   display: inline-block;
-  }
+}
 
 </style>