首页快速访问的手动设置显示项

src/store/UserContext.js

@@ -27,6 +27,9 @@ const UserContext={
             state.menu = []
             state.state = "LOGOUT"
             state.token = ""
+        },
+        setMenu(state, menu) {
+            state.menu = menu;
         }
     }
 }

src/views/Home/cells/CustomerAnalyse.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import CellHeaderVue from "./CellHeader.vue";
+import CellHeaderVue from "./common/CellHeader.vue";
 import * as echarts from "echarts";
 
 export default {

src/views/Home/cells/Hall.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import CellHeaderVue from "./CellHeader.vue";
+import CellHeaderVue from "./common/CellHeader.vue";
 
 export default {
   name: "Hall",

src/views/Home/cells/NoticeAnnouncement.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import CellHeaderVue from "./CellHeader.vue";
+import CellHeaderVue from "./common/CellHeader.vue";
 
 export default {
   name: "NoticeAnnouncement",

src/views/Home/cells/QuickSearch.vue

 <template>
   <div class="home-cell" id="quickSearch">
-    <CellHeaderVue title="快速查询"> </CellHeaderVue>
+    <CellHeaderVue title="快速查询">
+      <span class="el-icon-setting" title="设置" @click="openSetting"></span>
+    </CellHeaderVue>
 
-    <el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
-      <div class="cell-content">
-        <router-link
-          v-for="(item, index) in options"
-          :key="index"
-          :to="item.url"
-        >
-          <div
-            class="content-wrapper"
-            :style="{ height: Math.floor(cellScrollHeight * 0.3) + 'px' }"
-          >
-            <div class="search-item-wrapper">
-              <div class="search-item">
-                <img :src="item.icon" alt="" />
-                <span>{{ item.name }}</span>
-              </div>
-            </div>
-          </div>
-        </router-link>
-      </div>
-    </el-scrollbar>
+    <quick
+      ref="quick"
+      :cellScrollHeight="cellScrollHeight"
+      quickType="search"
+    ></quick>
   </div>
 </template>
 
 <script>
-import CellHeaderVue from "./CellHeader.vue";
+import CellHeaderVue from "./common/CellHeader.vue";
+import quick from "./common/quick.vue";
+
+import defaultQuickSearchItems from "./common/defaultQuickSearchItems.js";
 
 export default {
   name: "QuickSearch",
-  components: { CellHeaderVue },
+  components: { CellHeaderVue, quick },
   props: {
     cellScrollHeight: {
       type: Number,
       required: true,
     },
   },
-  data() {
-    return {
-      // options: [
-      //   {
-      //     name: "报文查询",
-      //     icon: require("~/assets/icons/报文查询.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "银行查询",
-      //     icon: require("~/assets/icons/银行查询.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "公司查询",
-      //     icon: require("~/assets/icons/公司查询.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "交易查询",
-      //     icon: require("~/assets/icons/交易查询.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "序号查询",
-      //     icon: require("~/assets/icons/序号查询.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "企业分类信息查询",
-      //     icon: require("~/assets/icons/企业分类信息查询.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "电子数据查询",
-      //     icon: require("~/assets/icons/电子数据查询.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "账务查看",
-      //     icon: require("~/assets/icons/账务查看.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "添加",
-      //     icon: require("~/assets/icons/添加.svg"),
-      //     url: "",
-      //   },
-      // ],
-      options: [],
-      all: {
-        admin: [
-          {
-            name: "买方信用证交易查询",
-            icon: require("~/assets/icons/交易查询.svg"),
-            url: "/business/infdid",
-          },
-          {
-            name: " 买方信用证单据查询",
-            icon: require("~/assets/icons/单据查询.svg"),
-            url: "/business/infbdd",
-          },
-          {
-            name: "卖方信用证交易查询",
-            icon: require("~/assets/icons/交易查询.svg"),
-            url: "/business/infdet",
-          },
-          {
-            name: "卖方信用证单据查询",
-            icon: require("~/assets/icons/单据查询.svg"),
-            url: "/business/infbfd",
-          },
-          {
-            name: "出口信用证查询",
-            icon: require("~/assets/icons/进出口查询.svg"),
-            url: "/business/letsel",
-          },
-          {
-            name: "出口信用证单据查询",
-            icon: require("~/assets/icons/单据查询.svg"),
-            url: "/business/infbed",
-          },
-          {
-            name: "进口信用证查询",
-            icon: require("~/assets/icons/进出口查询.svg"),
-            url: "/business/inflid",
-          },
-          {
-            name: "进口信用证单据查询",
-            icon: require("~/assets/icons/单据查询.svg"),
-            url: "/business/infbpd",
-          },
-          {
-            name: "进口代收查询",
-            icon: require("~/assets/icons/进口代收查询.svg"),
-            url: "/business/infbcd",
-          },
-        ],
-        normal: [
-          {
-            name: "买方信用证交易查询",
-            icon: require("~/assets/icons/交易查询.svg"),
-            url: "/business/infdid",
-          },
-          {
-            name: " 买方信用证单据查询",
-            icon: require("~/assets/icons/单据查询.svg"),
-            url: "/business/infbdd",
-          },
-          {
-            name: "卖方信用证交易查询",
-            icon: require("~/assets/icons/交易查询.svg"),
-            url: "/business/infdet",
-          },
-          {
-            name: "卖方信用证单据查询",
-            icon: require("~/assets/icons/单据查询.svg"),
-            url: "/business/infbfd",
-          },
-          {
-            name: "出口信用证查询",
-            icon: require("~/assets/icons/进出口查询.svg"),
-            url: "/business/letsel",
-          },
-          {
-            name: "进口信用证查询",
-            icon: require("~/assets/icons/进出口查询.svg"),
-            url: "/business/inflid",
-          },
-          {
-            name: "进口信用证单据查询",
-            icon: require("~/assets/icons/单据查询.svg"),
-            url: "/business/infbpd",
-          },
-        ],
-      },
-    };
-  },
-  mounted() {
-    this.genItems()
+  created() {
+    const admin = localStorage.getItem("quick-search-admin");
+    if (!admin) {
+      localStorage.setItem(
+        "quick-search-admin",
+        JSON.stringify(defaultQuickSearchItems.admin)
+      );
+    }
+    const normal = localStorage.getItem("quick-search-normal");
+    if (!normal) {
+      localStorage.setItem(
+        "quick-search-normal",
+        JSON.stringify(defaultQuickSearchItems.normal)
+      );
+    }
   },
   methods: {
-    genItems () {
-      const userId = this.$store.state.UserContext.userId;
-      if (userId.toLowerCase() === "zl") {
-        this.options = this.all.admin;
-      } else {
-        this.options = this.all.normal;
-      }
-    }
-  }
+    openSetting() {
+      this.$refs.quick.openSetting();
+    },
+  },
 };
 </script>
 
-<style scoped>
-#quickSearch .cell-content {
-  /* display: flex;
-  flex-wrap: wrap; */
-}
-#quickSearch .content-wrapper {
-  display: inline-block;
-  width: 33%;
-  height: 30%;
-  cursor: pointer;
-}
-#quickSearch .cell-content .search-item-wrapper {
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-}
-#quickSearch .cell-content .search-item {
-  /* padding-bottom: 16px; */
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  /* cursor: pointer; */
-}
-#quickSearch .cell-content .search-item i {
-  color: #0088ff;
-  font-size: 36px;
-}
-#quickSearch .cell-content .search-item span {
-  color: #303133;
-  font-size: 14px;
-  margin-top: 10px;
-}
-/* #quickSearch .cell-content .search-item:hover i {
-  color: var(--themecolor);
-} */
-/* #quickSearch .cell-content .search-item:hover span { */
-#quickSearch .cell-content .content-wrapper:hover span {
-  color: var(--themecolor);
-}
-</style>
+<style scoped></style>

src/views/Home/cells/QuickVisit.vue

 <template>
   <div class="home-cell" id="quickVisit">
-    <CellHeaderVue title="快速访问"> </CellHeaderVue>
+    <CellHeaderVue title="快速访问">
+      <span class="el-icon-setting" title="设置" @click="openSetting"></span>
+    </CellHeaderVue>
 
-    <el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
-      <div class="cell-content">
-        <router-link
-          v-for="(item, index) in quickVisitItem"
-          :key="index"
-          :to="item.url"
-        >
-          <div
-            class="content-wrapper"
-            :style="{ height: Math.floor(cellScrollHeight * 0.3) + 'px' }"
-          >
-            <div class="visit-item-wrapper">
-              <div class="visit-item">
-                <img :src="item.icon" alt="" />
-                <span>{{ item.name }}</span>
-              </div>
-            </div>
-          </div>
-        </router-link>
-      </div>
-    </el-scrollbar>
+    <quick
+      ref="quick"
+      :cellScrollHeight="cellScrollHeight"
+      quickType="visit"
+    ></quick>
   </div>
 </template>
 
 <script>
-import CellHeaderVue from "./CellHeader.vue";
+import CellHeaderVue from "./common/CellHeader.vue";
+import quick from "./common/quick.vue";
+
+import defaultVisitItems from "./common/defaultQuickVisitItems.js";
 
 export default {
   name: "QuickVisit",
-  components: { CellHeaderVue },
+  components: { CellHeaderVue, quick },
   props: {
     cellScrollHeight: {
       type: Number,
       required: true,
     },
   },
-  data() {
-    return {
-      // quickVisitItem: [
-      //   {
-      //     name: "用户权限",
-      //     icon: require("~/assets/icons/用户权限.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "银行信息管理",
-      //     icon: require("~/assets/icons/银行信息管理.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "财务费用管理",
-      //     icon: require("~/assets/icons/财务费用管理.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "风险提示参数",
-      //     icon: require("~/assets/icons/风险提示参数.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "业务公共参数",
-      //     icon: require("~/assets/icons/业务公共参数.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "国内证开立",
-      //     icon: require("~/assets/icons/国内证开立.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "进口信用证开立",
-      //     icon: require("~/assets/icons/进口信用证开立.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "转让信用证开立",
-      //     icon: require("~/assets/icons/转让信用证开立.svg"),
-      //     url: "",
-      //   },
-      //   {
-      //     name: "添加",
-      //     icon: require("~/assets/icons/添加.svg"),
-      //     url: "",
-      //   },
-      // ],
-      quickVisitItem: [],
-      all: {
-        admin: [
-          {
-            name: "汇款查询",
-            icon: require("~/assets/icons/汇款查询.svg"),
-            url: "/business/infcpd",
-          },
-          {
-            name: "汇出汇款",
-            icon: require("~/assets/icons/汇出汇款.svg"),
-            url: "/business/cptopn",
-          },
-          {
-            name: "汇入汇款",
-            icon: require("~/assets/icons/汇入汇款.svg"),
-            url: "/business/cptadv",
-          },
-          {
-            name: "买方信用证开立",
-            icon: require("~/assets/icons/信用证.svg"),
-            url: "/business/ditopn",
-          },
-          {
-            name: "买方信用证交易查询",
-            icon: require("~/assets/icons/交易查询.svg"),
-            url: "/business/infdid",
-          },
-          {
-            name: " 买方信用证单据查询",
-            icon: require("~/assets/icons/单据查询.svg"),
-            url: "/business/infbdd",
-          },
-          {
-            name: "卖方信用证通知",
-            icon: require("~/assets/icons/信用证通知.svg"),
-            url: "/business/detopn",
-          },
-          {
-            name: "卖方信用证交易查询",
-            icon: require("~/assets/icons/交易查询.svg"),
-            url: "/business/infdet",
-          },
-          {
-            name: "卖方信用证单据查询",
-            icon: require("~/assets/icons/单据查询.svg"),
-            url: "/business/infbfd",
-          },
-        ],
-        normal: [
-          {
-            name: "汇款查询",
-            icon: require("~/assets/icons/汇款查询.svg"),
-            url: "/business/infcpd",
-          },
-          {
-            name: "汇出汇款",
-            icon: require("~/assets/icons/汇出汇款.svg"),
-            url: "/business/cptopn",
-          },
-          {
-            name: "汇入汇款",
-            icon: require("~/assets/icons/汇入汇款.svg"),
-            url: "/business/cptadv",
-          },
-          {
-            name: "买方信用证开立",
-            icon: require("~/assets/icons/信用证.svg"),
-            url: "/business/ditopn",
-          },
-          {
-            name: "买方信用证交易查询",
-            icon: require("~/assets/icons/交易查询.svg"),
-            url: "/business/infdid",
-          },
-          {
-            name: "卖方信用证通知",
-            icon: require("~/assets/icons/信用证通知.svg"),
-            url: "/business/detopn",
-          },
-          {
-            name: "卖方信用证交易查询",
-            icon: require("~/assets/icons/交易查询.svg"),
-            url: "/business/infdet",
-          },
-        ],
-      },
-    };
-  },
-  mounted() {
-    this.genItems()
+  created() {
+    const admin = localStorage.getItem("quick-visit-admin");
+    if (!admin) {
+      localStorage.setItem(
+        "quick-visit-admin",
+        JSON.stringify(defaultVisitItems.admin)
+      );
+    }
+    const normal = localStorage.getItem("quick-visit-normal");
+    if (!normal) {
+      localStorage.setItem(
+        "quick-visit-normal",
+        JSON.stringify(defaultVisitItems.normal)
+      );
+    }
   },
   methods: {
-    genItems() {
-      const userId = this.$store.state.UserContext.userId;
-      if (userId.toLowerCase() === "zl") {
-        this.quickVisitItem = this.all.admin;
-      } else {
-        this.quickVisitItem = this.all.normal;
-      }
-    }
-  }
+    openSetting() {
+      this.$refs.quick.openSetting();
+    },
+  },
 };
 </script>
 
-<style scoped>
-/* 快速访问 */
-#quickVisit .cell-content {
-  /* display: flex;
-  flex-wrap: wrap; */
-}
-#quickVisit .content-wrapper {
-  display: inline-block;
-  width: 33%;
-  /* height: 30%; */
-}
-#quickVisit .cell-content .visit-item-wrapper {
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-}
-#quickVisit .cell-content .visit-item {
-  /* padding-bottom: 16px; */
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-}
-#quickVisit .cell-content .visit-item i {
-  color: #0088ff;
-  font-size: 36px;
-}
-#quickVisit .cell-content .visit-item span {
-  color: #303133;
-  font-size: 14px;
-  margin-top: 10px;
-}
-/* #quickVisit .cell-content .visit-item:hover i {
-  color: var(--themecolor);
-} */
-#quickVisit .cell-content .visit-item:hover span {
-  color: var(--themecolor);
-}
-</style>
+<style scoped></style>

src/views/Home/cells/TaskStatistics.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import CellHeaderVue from "./CellHeader.vue";
+import CellHeaderVue from "./common/CellHeader.vue";
 
 export default {
   name: "TaskStatistics",

src/views/Home/cells/common/defaultQuickSearchItems.js

+export default {
+  admin: [
+    "/business/infdid",
+    "/business/infbdd",
+    "/business/infdet",
+    "/business/infbfd",
+    "/business/letsel",
+    "/business/infbed",
+    "/business/inflid",
+    "/business/infbpd",
+    "/business/infbcd",
+  ],
+  normal: [
+    "/business/infdid",
+    "/business/infbdd",
+    "/business/infdet",
+    "/business/infbfd",
+    "/business/letsel",
+    "/business/inflid",
+    "/business/infbpd",
+  ],
+};

src/views/Home/cells/common/defaultQuickVisitItems.js

+export default {
+  admin: [
+    "/business/infcpd",
+    "/business/cptopn",
+    "/business/cptadv",
+    "/business/ditopn",
+    "/business/infdid",
+    "/business/infbdd",
+    "/business/detopn",
+    "/business/infdet",
+    "/business/infbfd",
+  ],
+  normal: [
+    "/business/infcpd",
+    "/business/cptopn",
+    "/business/cptadv",
+    "/business/ditopn",
+    "/business/infdid",
+    "/business/detopn",
+    "/business/infdet",
+  ],
+};

src/views/Home/cells/common/icons.js

+const icons = {
+  "/business/infcpd": require("~/assets/icons/汇款查询.svg"),
+  "/business/cptopn": require("~/assets/icons/汇出汇款.svg"),
+  "/business/cptadv": require("~/assets/icons/汇入汇款.svg"),
+  "/business/ditopn": require("~/assets/icons/信用证.svg"),
+  "/business/infdid": require("~/assets/icons/交易查询.svg"),
+  "/business/infbdd": require("~/assets/icons/单据查询.svg"),
+  "/business/detopn": require("~/assets/icons/信用证通知.svg"),
+  "/business/infdet": require("~/assets/icons/交易查询.svg"),
+  "/business/infbfd": require("~/assets/icons/单据查询.svg"),
+  "/business/letsel": require("~/assets/icons/进出口查询.svg"),
+  "/business/infbed": require("~/assets/icons/单据查询.svg"),
+  "/business/inflid": require("~/assets/icons/进出口查询.svg"),
+  "/business/infbpd": require("~/assets/icons/单据查询.svg"),
+  "/business/infbcd": require("~/assets/icons/进口代收查询.svg"),
+};
+
+export default icons;

src/views/Home/cells/common/quick.vue

+<template>
+  <el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
+      <div class="cell-content">
+        <router-link
+          v-for="(item, index) in quickVisitItem"
+          :key="index"
+          :to="item.path"
+        >
+          <div
+            class="content-wrapper"
+            :style="{ height: Math.floor(cellScrollHeight * 0.3) + 'px' }"
+          >
+            <div class="visit-item-wrapper">
+              <div class="visit-item">
+                <img :src="item.icon" alt="" />
+                <span>{{ item.name }}</span>
+              </div>
+            </div>
+          </div>
+        </router-link>
+      </div>
+
+			<el-dialog :visible="visible" title="设置" :before-close="handleClose">
+				<div style="text-align: center">
+					<el-transfer
+						style="text-align: left; display: inline-block"
+						v-model="selectedVals"
+						filterable
+						:titles="['未添加', '已添加']"
+						:button-texts="['移除', '添加']"
+						:format="{
+							noChecked: '${total}',
+							hasChecked: '${checked}/${total}',
+						}"
+						:data="transferData"
+					>
+					</el-transfer>
+				</div>
+				<span slot="footer" class="dialog-footer">
+					<c-button @click="cancel">取消</c-button>
+					<c-button type="primary" @click="save">保存</c-button>
+				</span>
+			</el-dialog>
+    </el-scrollbar>
+</template>
+
+<script>
+import icons from "./icons.js";
+
+export default {
+  props: {
+    cellScrollHeight: {
+      type: Number,
+      required: true,
+    },
+		quickType: {
+			type: String,
+      required: true,
+		}
+  },
+	data() {
+    return {
+      allAvailableItems: [],
+      quickVisitItem: [],
+      visible: false,
+      selectedVals: [],
+      transferData: [],
+    };
+  },
+	mounted() {
+    this.$nextTick(() => {
+      this.init();
+      this.generateVisitItems(this.getCachedVisitItems());
+    })
+  },
+  methods: {
+    init() {
+      const arr = [];
+      this.getAllAvailableItems(this.$store.state.UserContext.menu, arr);
+      this.allAvailableItems = arr;
+      this.transferData = arr.map((item) => {
+        const ps = item.path.split("/")
+        return {
+          key: item.path,
+          label: `${ps[ps.length - 1]} - ${item.name}` ,
+        };
+      });
+    },
+    getCachedVisitItems() {
+      const userId = this.$store.state.UserContext.userId;
+      const data = localStorage.getItem(
+        `quick-${this.quickType}-${userId.toLowerCase() === "zl" ? "admin" : "normal"}`
+      );
+      return JSON.parse(data);
+    },
+    setCachedVisitItems(data) {
+      const userId = this.$store.state.UserContext.userId;
+      localStorage.setItem(
+        `quick-${this.quickType}-${userId.toLowerCase() === "zl" ? "admin" : "normal"}`,
+        JSON.stringify(data)
+      );
+    },
+    generateVisitItems(keys) {
+      const res = [];
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        const f = this.allAvailableItems.find((item) => item.path === key);
+        if (f) {
+          res.push({
+            name: f.name,
+            path: f.path,
+            icon: icons[key]
+              ? icons[key]
+              : require("~/assets/icons/信用证.svg"),
+          });
+        }
+      }
+      this.quickVisitItem = res;
+    },
+    openSetting() {
+      this.selectedVals = this.quickVisitItem.map((item) => item.path);
+      this.visible = true;
+    },
+    cancel() {
+      this.visible = false;
+    },
+    save() {
+      this.setCachedVisitItems(this.selectedVals);
+      this.generateVisitItems(this.selectedVals);
+      this.visible = false;
+    },
+    handleClose(done) {
+      this.visible = false;
+      done();
+    },
+    getAllAvailableItems(source, arr) {
+      for (let i = 0; i < source.length; i++) {
+        const s = source[i];
+        if (s.children.length > 0) {
+          this.getAllAvailableItems(s.children, arr);
+        } else {
+          arr.push(s);
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+.cell-content {
+  /* display: flex;
+  flex-wrap: wrap; */
+}
+.content-wrapper {
+  display: inline-block;
+  width: 33%;
+  /* height: 30%; */
+}
+.cell-content .visit-item-wrapper {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+.cell-content .visit-item {
+  /* padding-bottom: 16px; */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+.cell-content .visit-item i {
+  color: #0088ff;
+  font-size: 36px;
+}
+.cell-content .visit-item span {
+  color: #303133;
+  font-size: 14px;
+  margin-top: 10px;
+}
+/* .cell-content .visit-item:hover i {
+  color: var(--themecolor);
+} */
+.cell-content .visit-item:hover span {
+  color: var(--themecolor);
+}
+.el-scrollbar >>> .el-transfer-panel {
+  width: 300px;
+  height: 600px;
+}
+.el-scrollbar >>> .el-checkbox-group.el-transfer-panel__list {
+  height: 500px;
+}
+</style>
\ No newline at end of file

src/views/Layout/SideMenu.vue

@@ -157,6 +157,7 @@ export default {
     const arr = [];
     this.generateMenuTree(arr);
     this.menus = arr;
+    this.$store.commit('UserContext/setMenu', arr)
     this.initOpenFlgIndex();
   },
   methods: {