.env.dev

@@ -1,7 +1,7 @@
 ###
  # @Author: zhp
  # @Date: 2024-04-28 13:42:51
- # @LastEditTime: 2024-05-22 16:29:35
+ # @LastEditTime: 2024-05-20 14:56:40
  # @LastEditors: DY
  # @Description:
 ###
@@ -12,9 +12,9 @@ ENV = 'development'
 VUE_APP_TITLE = 芋道管理系统
 
 # 芋道管理系统/开发环境
-# VUE_APP_BASE_API = 'http://192.168.1.70:30307'
-VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
-
+VUE_APP_BASE_API = 'http://192.168.1.61:48080'
+# VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com'
+#
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
 

src/api/produceData/index.js

@@ -1,7 +1,7 @@
 /*
  * @Author: zhp
  * @Date: 2024-05-07 08:54:59
- * @LastEditTime: 2024-05-22 16:31:08
+ * @LastEditTime: 2024-05-20 14:56:56
  * @LastEditors: DY
  * @Description:
  */
@@ -105,24 +105,6 @@ export function delTarget(id) {
   })
 }
 
-// 导入铜铟镓硒工厂
-export function importToTarget(data) {
-  return request({
-    url: '/ip/prod-target/to-target-import-excel',
-    method: 'post',
-    data
-  })
-}
-
-// 导入碲化镉工厂
-export function importDiTarget(data) {
-  return request({
-    url: '/ip/prod-target/di-target-import-excel',
-    method: 'post',
-    data
-  })
-}
-
 // export function cockpitDataMonitor(data) {
 //   return request({
 //     url: '/ip/prod-output/cockpitDataMonitor',
@@ -131,10 +113,10 @@ export function importDiTarget(data) {
 //   })
 // }
 
-export function cockpitDataMonitor(data) {
+export function cockpitDataMonitor(query) {
   return request({
-    url: '/ip/prod-output/cockpitDataMonitor',
-    method: 'post',
-    data: data
+    url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=95bdbdc1c387a170105f84cd416c4c9f&city=110108',
+    method: 'get',
+    query: query
   })
 }

src/assets/icons/svg/orgTreeIcon.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>菜单</title>
-    <g id="10系统管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="用户管理" transform="translate(-284.000000, -164.000000)" fill-rule="nonzero">
-            <g id="编组-7" transform="translate(284.000000, 162.000000)">
-                <g id="菜单" transform="translate(0.000000, 2.000000)">
-                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
-                    <path d="M3.00057813,4.49926562 L13.0025156,4.49926562 C13.2786563,4.49926562 13.5025156,4.27540625 13.5025156,3.99926563 C13.5025156,3.723125 13.2786563,3.49926563 13.0025156,3.49926563 L3.00057813,3.49926563 C2.7244375,3.49926563 2.50057813,3.723125 2.50057813,3.99926563 C2.50057813,4.27540625 2.7244375,4.49926562 3.00057813,4.49926562 Z M3.0004375,8.48703125 L12.9786875,8.48703125 C13.2548281,8.48703125 13.4786875,8.26317187 13.4786875,7.98703125 C13.4786875,7.71089062 13.2548281,7.48703125 12.9786875,7.48703125 L3.0004375,7.48703125 C2.72429687,7.48703125 2.5004375,7.71089062 2.5004375,7.98703125 C2.5004375,8.26317187 2.72429687,8.48703125 3.0004375,8.48703125 Z M13.0025156,11.4969063 L3.00057813,11.4969063 C2.7244375,11.4969063 2.50057813,11.7207656 2.50057813,11.9969063 C2.50057813,12.2730469 2.7244375,12.4969063 3.00057813,12.4969063 L13.0025156,12.4969063 C13.2786563,12.4969063 13.5025156,12.2730469 13.5025156,11.9969063 C13.5025156,11.7207656 13.2786563,11.4969063 13.0025156,11.4969063 L13.0025156,11.4969063 Z" id="形状" fill="#373738"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/assets/icons/svg/orgTreeIcon2.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="127.000000pt" height="127.000000pt" viewBox="0 0 127.000000 127.000000"
- preserveAspectRatio="xMidYMid meet">
-
-<g transform="translate(0.000000,127.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M520 831 c-19 -10 -48 -35 -64 -55 -25 -30 -31 -48 -34 -100 -8 -122
-69 -206 188 -206 119 0 196 84 188 205 -5 74 -36 123 -98 155 -51 26 -133 26
--180 1z m137 -32 c67 -25 111 -99 98 -165 -8 -45 -57 -100 -101 -114 -100 -33
--209 62 -190 165 12 62 82 124 143 125 12 0 34 -5 50 -11z"/>
-</g>
-</svg>

src/assets/styles/index.scss

@@ -123,7 +123,7 @@ aside {
 
 //main-container全局样式
 .app-container {
-  // padding: 16px;
+  padding: 16px;
 }
 
 .components-container {

src/layout/components/AppMain.vue

@@ -17,20 +17,20 @@
 </template>
 
 <script>
-import iframeToggle from "./IframeToggle/index";
+import iframeToggle from "./IframeToggle/index"
 
 export default {
-  name: "AppMain",
+  name: 'AppMain',
   components: { iframeToggle },
   computed: {
     cachedViews() {
-      return this.$store.state.tagsView.cachedViews;
+      return this.$store.state.tagsView.cachedViews
     },
     key() {
-      return this.$route.path;
-    },
-  },
-};
+      return this.$route.path
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -45,7 +45,7 @@ export default {
   // background-color: #fff;
 }
 
-.fixed-header + .app-main {
+.fixed-header+.app-main {
   padding-top: 56px;
 }
 
@@ -57,7 +57,7 @@ export default {
     flex-direction: column;
   }
 
-  .fixed-header + .app-main {
+  .fixed-header+.app-main {
     padding-top: 90px;
   }
 }

src/main.js

@@ -56,9 +56,6 @@ Vue.prototype.DICT_TYPE = DICT_TYPE;
 Vue.prototype.handleTree = handleTree;
 Vue.prototype.addBeginAndEndTime = addBeginAndEndTime;
 Vue.prototype.divide = divide;
-Vue.prototype.tableHeight = function (n) {
-	return window.innerHeight - n;
-};
 
 // 全局组件挂载
 Vue.component("DictTag", DictTag);

src/mixins/tableHeightMixin.js

@@ -1,20 +0,0 @@
-export default {
-	data() {
-		return {
-			tableH: this.tableHeight(260),
-		};
-	},
-	created() {
-		this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
-		window.addEventListener('resize', this._setTableHeight);
-	},
-	destroyed() {
-		window.removeEventListener('resize', this._setTableHeight);
-	},
-	methods: {
-		_setTableHeight() {
-			this.tableH = this?.heightNum ? this.tableHeight(this.heightNum) : this.tableHeight(260);
-			// this.tableH = this.tableHeight(260);
-		},
-	},
-};

src/views/copilot/components/FactoryDataHeader.vue

@@ -9,11 +9,11 @@
     </section>
     <section class="menu2">
       <CopilotButton
-        v-for="i in dataList"
-        :key="i.id"
-        :label="i.name"
-        :active="i.id === period"
-        @click="() => $emit('update:period', i.id)"
+        v-for="i in ['日', '周', '月', '年']"
+        :key="i"
+        :label="i"
+        :active="i === period"
+        @click="() => $emit('update:period', i)"
       />
       <div class="btn-group">
         <button type="button" class="export-btn" />
@@ -42,21 +42,15 @@ export default {
       type: String,
     },
     companyId: {
-      type: Number,
+      type: String,
     },
     period: {
-      type: Number,
+      type: String,
     },
   },
   data() {
     return {
       isFullscreen: false,
-      dataList: [
-        { id: 1, name: "日" },
-        { id: 2, name: "周" },
-        { id: 3, name: "月" },
-        { id: 4, name: "年" },
-      ],
     };
   },
   computed: {},

src/views/copilot/components/FactorySelect.vue

@@ -26,20 +26,20 @@ export default {
       type: String,
     },
     companyId: {
-      type: Number,
+      type: String,
     },
   },
   data() {
     return {
       isOpen: false,
       company: [
-        { id: 0, name: "瑞昌中建材光电材料有限公司" },
-        { id: 1, name: "邯郸中建材光电材料有限公司" },
-        { id: 2, name: "株洲中建材光电材料有限公司" },
-        { id: 3, name: "佳木斯中建材光电材料有限公司" },
-        { id: 4, name: "成都中建材光电材料有限公司" },
-        { id: 5, name: "凯盛中建材光电材料有限公司" },
-        { id: 6, name: "蚌埠中建材光电材料有限公司" },
+        { id: "1", name: "瑞昌中建材光电材料有限公司" },
+        { id: "2", name: "邯郸中建材光电材料有限公司" },
+        { id: "3", name: "株洲中建材光电材料有限公司" },
+        { id: "4", name: "佳木斯中建材光电材料有限公司" },
+        { id: "5", name: "成都中建材光电材料有限公司" },
+        { id: "6", name: "凯盛中建材光电材料有限公司" },
+        { id: "7", name: "蚌埠中建材光电材料有限公司" },
       ],
     };
   },

src/views/copilot/components/NotMsg.vue

@@ -1,27 +0,0 @@
-<template>
-	<div class="notmsg">暂无数据</div>
-</template>
-
-<script>
-export default {
-	name: 'NotMsg',
-	components: {},
-	data() {
-		return {
-		};
-	},
-	computed: {
-	},
-	methods: {
-	},
-};
-</script>
-
-<style scoped lang="scss">
-.notmsg {
-	padding-top: 72px;
-	color: rgba(255, 255, 255, 0.4);
-	text-align: center;
-	font-size: 24px;
-}
-</style>

src/views/copilot/factoryData/components/Energy.vue

@@ -18,11 +18,19 @@ import * as echarts from "echarts";
 export default {
   name: "Energy",
   props: {
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
     legend: {
       type: Array,
       required: true,
     },
-    energyCockpits: {
+    xAxis: {
+      type: Array,
+      required: true,
+    },
+    series: {
       type: Array,
       required: true,
     },
@@ -35,10 +43,11 @@ export default {
       options: {
         color: ["#FFD160", "#2760FF", "#12FFF5"],
         grid: {
-          left: "7%",
-          right: "7%",
-          bottom: "8%",
+          left: "3%",
+          right: "4%",
+          bottom: "0",
           top: "15%",
+          containLabel: true,
         },
         tooltip: {
           trigger: "axis",
@@ -56,7 +65,7 @@ export default {
             color: "rgba(255, 255, 255, 0.7)",
             fontSize: 12,
           },
-          data: [],
+          data: this.xAxis,
         },
         yAxis: [
           {
@@ -181,11 +190,6 @@ export default {
       },
     };
   },
-  computed: {
-    isOpen() {
-      return this.$store.getters.sidebar.opened;
-    },
-  },
   watch: {
     /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
     // isFullscreen(val) {
@@ -212,12 +216,6 @@ export default {
     //   this.actualOptions = actualOptions;
     //   this.initOptions(actualOptions);
     // },
-    energyCockpits() {
-      this.initChart();
-    },
-    isOpen(val) {
-      this.canvasReset();
-    },
   },
   mounted() {
     // if (screenfull.isEnabled) {
@@ -243,60 +241,17 @@ export default {
       }, 500)();
     },
     initChart() {
-      let energyxAxis = [];
-      let n = 0;
-      let seriesArr = [
-        {
-          name: "水",
-          energyType: 1,
-          data: [],
-        },
-        {
-          name: "电",
-          energyType: 2,
-          data: [],
-        },
-        {
-          name: "气",
-          energyType: 3,
-          data: [],
-        },
-      ];
-      if (this.energyCockpits.length > 0) {
-        let dataArr = this.energyCockpits.map((item) => {
-          return item.groupName;
-        });
-        energyxAxis = Array.from(new Set(dataArr));
-        n = energyxAxis.length;
-        seriesArr[0].data = Array.from({ length: n }, () => 0);
-        seriesArr[1].data = Array.from({ length: n }, () => 0);
-        seriesArr[2].data = Array.from({ length: n }, () => 0);
-        for (let i = 0; i < this.energyCockpits.length; i++) {
-          for (let j = 0; j < energyxAxis.length; j++) {
-            if (this.energyCockpits[i].groupName === energyxAxis[j]) {
-              if (this.energyCockpits[i].energyType === 1) {
-                seriesArr[0].data[j] = this.energyCockpits[i].totalEnergyValue;
-              } else if (this.energyCockpits[i].energyType === 2) {
-                seriesArr[1].data[j] = this.energyCockpits[i].totalEnergyValue;
-              } else if (this.energyCockpits[i].energyType === 3) {
-                seriesArr[2].data[j] = this.energyCockpits[i].totalEnergyValue;
-              }
-            }
-          }
-        }
-      }
       if (this.chart) {
         this.chart.dispose();
       }
       this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
       const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.xAxis.data = energyxAxis;
-      actualOptions.series[0].data = seriesArr[0].data;
-      actualOptions.series[0].name = seriesArr[0].name;
-      actualOptions.series[1].data = seriesArr[1].data;
-      actualOptions.series[1].name = seriesArr[1].name;
-      actualOptions.series[2].data = seriesArr[2].data;
-      actualOptions.series[2].name = seriesArr[2].name;
+      actualOptions.series[0].data = this.series[0].data;
+      actualOptions.series[0].name = this.series[0].name;
+      actualOptions.series[1].data = this.series[1].data;
+      actualOptions.series[1].name = this.series[1].name;
+      actualOptions.series[2].data = this.series[2].data;
+      actualOptions.series[2].name = this.series[2].name;
       this.actualOptions = actualOptions;
       this.chart.setOption(actualOptions);
     },

src/views/copilot/factoryData/components/Order.vue

@@ -1,9 +1,8 @@
 <template>
   <dv-scroll-board
-    v-if="showTable"
+    v-if="aa"
     :config="config"
     style="width: 100%; height: 100%"
-    ref="orderScrollBoard"
   />
 </template>
 <script>
@@ -12,7 +11,7 @@ export default {
   name: "Order",
   data() {
     return {
-      showTable: true,
+      aa: true,
       config: {
         header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
         headerBGC: "rgba(0, 106, 205, 0.22)",
@@ -27,87 +26,51 @@ export default {
       },
     };
   },
-  props: {
-    prodOrder: {
-      type: Array,
-      default: [],
-    },
-  },
-  computed: {
-    isOpen() {
-      return this.$store.getters.sidebar.opened;
-    },
-  },
-  watch: {
-    isOpen(val) {
-      this.tableReset();
-    },
-    prodOrder() {
-      this.getTableList();
-    },
-  },
   mounted() {
+    this.getTableList();
+    this.tableReset();
     window.addEventListener("resize", this.tableReset);
   },
   methods: {
     tableReset() {
-      this.showTable = false;
+      this.aa = false;
       debounce(() => {
         this.initTable();
       }, 500)();
     },
     initTable() {
-      this.showTable = true;
+      this.aa = true;
     },
     getTableList() {
-      let outArr = [];
-      if (this.prodOrder.length > 0) {
-        for (let i = 0; i < this.prodOrder.length; i++) {
-          let arr = [];
-          arr.push(i + 1);
-          arr.push(
-            `<span title=${this.prodOrder[i].customerName || ""}>${
-              this.prodOrder[i].customerName || ""
-            }</span>`
-          );
-          arr.push(
-            `<span title=${this.prodOrder[i].productName || ""}>${
-              this.prodOrder[i].productName || ""
-            }</span>`
-          );
-          arr.push(
-            `<span title=${this.prodOrder[i].plannedProductionQuantity || ""}>${
-              this.prodOrder[i].plannedProductionQuantity || ""
-            }</span>`
-          );
-          arr.push(`<span style="display:inline-block;width:45px;">${
-            this.prodOrder[i].productionProgress
-              ? this.prodOrder[i].productionProgress.toFixed(0) + "%"
-              : "0%"
-          }</span>
-            <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
-            <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
-              <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
-              <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${
-                this.prodOrder[i].productionProgress
-                  ? this.prodOrder[i].productionProgress.toFixed(0) *
-                      37.68 *
-                      0.01 +
-                    "," +
-                    (1 -
-                      this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
-                      37.68
-                  : 0 + "," + 37.68
-              }"/>
-            </svg>
-          </div>`);
-          outArr.push(arr);
-        }
-        this.config.data = outArr;
-      } else {
-        this.config.data = [];
-      }
-      this.$refs["orderScrollBoard"].updateRows(outArr);
+      let _this = this;
+      setTimeout(
+        (function name() {
+          _this.config.data = [
+            ["1", "行1列1", "行1列2", "行1列3", "50%"],
+            ["2", "行2列1", "行2列2", "行2列3", "50%"],
+            ["3", "行3列1", "行3列2", "行3列3", "50%"],
+            ["4", "行4列1", "行4列2", "行4列3", "50%"],
+            ["5", "行5列1", "行5列2", "行5列3", "50%"],
+            ["6", "行6列1", "行6列2", "行6列3", "50%"],
+            ["7", "行7列1", "行7列2", "行7列3", "50%"],
+            ["8", "行8列1", "行8列2", "行8列3", "50%"],
+            ["9", "行9列1", "行9列2", "行9列3", "50%"],
+            ["10", "行10列1", "行10列2", "行10列3", "50%"],
+            ["11", "行11列1", "行11列2", "行11列3", "50%"],
+            ["12", "行12列1", "行12列2", "行12列3", "50%"],
+            ["13", "行13列1", "行13列2", "行13列3", "50%"],
+            ["14", "行14列1", "行14列2", "行14列3", "50%"],
+            ["15", "行15列1", "行15列2", "行15列3", "50%"],
+            ["16", "行16列1", "行16列2", "行16列3", "50%"],
+            ["17", "行17列1", "行17列2", "行17列3", "50%"],
+            ["18", "行18列1", "行18列2", "行18列3", "50%"],
+            ["19", "行19列1", "行19列2", "行19列3", "50%"],
+            ["20", "行20列1", "行20列2", "行20列3", "50%"],
+          ];
+        })(),
+        2000
+      );
+      this.initTable();
     },
   },
 };

src/views/copilot/factoryData/components/ProdMonitor.vue

@@ -14,7 +14,7 @@
       </div>
       <div class="right-box">
         <span class="type">投入数量</span>
-        <span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 0 }}</span>
+        <span class="num">8391222</span>
       </div>
     </div>
     <div class="std-box">
@@ -33,9 +33,7 @@
           </div>
           <div>
             <span class="type">良品数量</span>
-            <span class="type-name">{{
-              msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
-            }}</span>
+            <span class="type-name">740</span>
           </div>
         </div>
       </div>
@@ -43,15 +41,11 @@
         <div class="separate">
           <div>
             <span class="type">生产数量</span>
-            <span class="num">{{
-              msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
-            }}</span>
+            <span class="num">783</span>
           </div>
           <div>
             <span class="type1">良品率</span>
-            <span class="num"
-              >{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span
-            >
+            <span class="num">96%</span>
           </div>
         </div>
       </div>
@@ -72,9 +66,7 @@
           </div>
           <div>
             <span class="type">良品数量</span>
-            <span class="type-name">{{
-              msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
-            }}</span>
+            <span class="type-name">740</span>
           </div>
         </div>
       </div>
@@ -82,15 +74,11 @@
         <div class="separate">
           <div>
             <span class="type">生产数量</span>
-            <span class="num">{{
-              msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
-            }}</span>
+            <span class="num">783</span>
           </div>
           <div>
             <span class="type1">良品率</span>
-            <span class="num"
-              >{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span
-            >
+            <span class="num">96%</span>
           </div>
         </div>
       </div>
@@ -111,9 +99,7 @@
           </div>
           <div>
             <span class="type">良品数量</span>
-            <span class="type-name">{{
-              msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
-            }}</span>
+            <span class="type-name">740</span>
           </div>
         </div>
       </div>
@@ -121,15 +107,11 @@
         <div class="separate">
           <div>
             <span class="type">生产数量</span>
-            <span class="num">{{
-              msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
-            }}</span>
+            <span class="num">783</span>
           </div>
           <div>
             <span class="type1">良品率</span>
-            <span class="num"
-              >{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span
-            >
+            <span class="num">96%</span>
           </div>
         </div>
       </div>
@@ -139,51 +121,6 @@
 <script>
 export default {
   name: "ProdMonitor",
-  data() {
-    return {
-      msgObj: {
-        stand: {},
-        chip: {},
-        bipv: {},
-      },
-    };
-  },
-  props: {
-    prodOutPut: {
-      type: Array,
-      default: [],
-    },
-    prodFto: {
-      type: Array,
-      default: [],
-    },
-  },
-  watch: {
-    prodOutPut() {
-      this.makeData();
-    },
-  },
-  mounted() {
-    this.makeData();
-  },
-  methods: {
-    makeData() {
-      this.msgObj.chip = {};
-      this.msgObj.stand = {};
-      this.msgObj.bipv = {};
-      if (this.prodOutPut.length > 0) {
-        this.prodOutPut.map((item) => {
-          if (item.glassType === 0) {
-            this.msgObj.chip = item;
-          } else if (item.glassType === 1) {
-            this.msgObj.stand = item;
-          } else if (item.glassType === 2) {
-            this.msgObj.bipv = item;
-          }
-        });
-      }
-    },
-  },
 };
 </script>
 <style lang="scss" scoped>

src/views/copilot/factoryData/components/Store.vue

@@ -7,14 +7,17 @@ import * as echarts from "echarts";
 export default {
   name: "Store",
   props: {
-    stock: {
-      type: Object,
+    vHeight: {
+      type: Number,
+      default: 34,
+    },
+    xAxis: {
+      type: Array,
       required: true,
     },
-  },
-  computed: {
-    isOpen() {
-      return this.$store.getters.sidebar.opened;
+    series: {
+      type: Array,
+      required: true,
     },
   },
   data() {
@@ -24,10 +27,11 @@ export default {
       chart: "",
       options: {
         grid: {
-          left: "8%",
+          left: "3%",
           right: "1%",
-          bottom: "8%",
-          top: "15%",
+          bottom: "0",
+          top: "10%",
+          containLabel: true,
         },
         tooltip: {},
         xAxis: {
@@ -43,7 +47,7 @@ export default {
             color: "rgba(255, 255, 255, 0.7)",
             fontSize: 12,
           },
-          data: [],
+          data: this.xAxis,
         },
         yAxis: {
           name: "单位/片",
@@ -112,11 +116,18 @@ export default {
     };
   },
   watch: {
-    stock(val) {
-      this.initChart();
-    },
-    isOpen(val) {
-      this.canvasReset();
+    series(val) {
+      if (!val) {
+        this.initOptions(this.options);
+        return;
+      }
+      const actualOptions = JSON.parse(JSON.stringify(this.options));
+      actualOptions.series[0].data = val[0].data;
+      actualOptions.series[0].name = val[0].name;
+      actualOptions.series[1].data = val[1].data;
+      actualOptions.series[1].name = val[1].name;
+      this.actualOptions = actualOptions;
+      this.initOptions(actualOptions);
     },
   },
   mounted() {
@@ -143,20 +154,13 @@ export default {
       }, 500)();
     },
     initChart() {
-      let xAxis = Object.keys(this.stock) || [];
-      let data = [];
-      if (xAxis.length > 0) {
-        data = xAxis.map((item) => {
-          return this.stock[item].total;
-        });
-      }
       if (this.chart) {
         this.chart.dispose();
       }
       this.chart = echarts.init(document.getElementById("factoryStoreChart"));
       const actualOptions = JSON.parse(JSON.stringify(this.options));
-      actualOptions.xAxis.data = xAxis;
-      actualOptions.series[0].data = data;
+      actualOptions.series[0].data = this.series[0].data;
+      actualOptions.series[0].name = this.series[0].name;
       this.actualOptions = actualOptions;
       this.chart.setOption(actualOptions);
     },

src/views/copilot/factoryData/index.vue

@@ -5,23 +5,27 @@
       :companyId="companyId"
       :period="period"
       @updateCompany="updateCompany"
-      @update:period="updatePeriod"
+      @update:period="period = $event"
     />
     <div class="factory-section">
       <section class="top flex">
         <db-container title="生产监控" icon="prod">
-          <prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" />
+          <prod-monitor />
         </db-container>
         <db-container title="仓库监控.当前" icon="store">
-          <store :stock="stock" />
+          <store :series="series" :xAxis="xAxis" />
         </db-container>
       </section>
       <section class="bottom flex">
         <db-container title="能源监控" icon="energy">
-          <energy :legend="energyLegend" :energyCockpits="energyCockpits" />
+          <energy
+            :legend="energyLegend"
+            :series="energySeries"
+            :xAxis="energyxAxis"
+          />
         </db-container>
         <db-container title="订单监控" icon="order">
-          <order :prodOrder="prodOrder" />
+          <order />
         </db-container>
       </section>
     </div>
@@ -37,7 +41,7 @@ import Energy from "./components/Energy.vue";
 import Order from "./components/Order.vue";
 import { cockpitDataMonitor } from "@/api/produceData";
 export default {
-  name: "factoryData",
+  name: "FactoryData",
   components: {
     FactoryDataHeader,
     DbContainer: Container,
@@ -47,48 +51,91 @@ export default {
     Order,
   },
   data() {
+    const year = new Date().getFullYear();
+    const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
     return {
-      companyId: 0,
+      companyId: "1",
       companyName: "瑞昌中建材光电材料有限公司",
-      period: 1,
-      // 接口获取的数据
-      prodOutPut: [], //生产
-      prodFto: [], //生产
-      stock: {}, //仓库
-      energyCockpits: [], //能源
-      prodOrder: [], //订单
+      period: "日",
+
       energyLegend: [
         { label: "电", color: "#FFD160" },
         { label: "水", color: "#2760FF" },
         { label: "气", color: "#12FFF5" },
       ],
+      energyxAxis: [3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7],
+
+      legend: [
+        { label: `${year - 1}年`, color: "#12f7f1" },
+        // { label: `${year}年`, color: "#58adfa" },
+      ],
+      xAxis: cities,
     };
   },
+  computed: {
+    energySeries() {
+      return [
+        {
+          name: "电",
+          data: Array.from({ length: 7 }, () =>
+            Math.floor(Math.random() * 1000)
+          ),
+        },
+        {
+          name: "水",
+          data: Array.from({ length: 7 }, () =>
+            Math.floor(Math.random() * 1000)
+          ),
+        },
+        {
+          name: "气",
+          data: Array.from({ length: 7 }, () =>
+            Math.floor(Math.random() * 1000)
+          ),
+        },
+      ];
+    },
+    series() {
+      // const ftoInvest = this.$store.getters.home.ftoInvest;
+      // if (!ftoInvest || !ftoInvest.current || !ftoInvest.previous) {
+      return [
+        {
+          name: "2023年",
+          data: Array.from({ length: 7 }, () =>
+            Math.floor(Math.random() * 1000)
+          ),
+        },
+      ];
+      // }
+
+      // return [
+      //   {
+      //     name: `${new Date().getFullYear() - 1}年`,
+      //     data: ftoInvest.previous,
+      //   },
+      //   {
+      //     name: `${new Date().getFullYear()}年`,
+      //     data: ftoInvest.current,
+      //   },
+      // ];
+    },
+  },
   mounted() {
-    this.getMes();
+    this.getMes1();
   },
   methods: {
     updateCompany(obj) {
       this.companyId = obj.companyId;
       this.companyName = obj.companyName;
-      this.getMes();
     },
-    updatePeriod(val) {
-      this.period = val;
-      this.getMes();
-    },
-    getMes() {
-      cockpitDataMonitor({
-        factorys: [this.companyId],
-        date: this.period,
-      }).then((res) => {
-        console.log(res);
-        this.prodOutPut = res.data.prodOutputMonitorShDO || [];
-        this.prodFto = res.data.prodOutputFtoDO || [];
-        this.stock = res.data.stockDO || {};
-        this.energyCockpits = res.data.energyCockpitsDO || [];
-        this.prodOrder = res.data.prodOrderMonitorDO || [];
-      });
+    getMes1() {
+      // cockpitDataMonitor({
+      //   factorys: ["1"],
+      //   date: 4,
+      // }).then((res) => {
+      //   console.log(res);
+      // });
+      cockpitDataMonitor().then((res) => {});
     },
   },
 };

src/views/produce/data/add-or-updata.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-05-20 18:02:10
+ * @LastEditTime: 2024-05-13 15:43:45
  * @LastEditors: DY
  * @Description:
 -->
@@ -111,7 +111,7 @@
           <!-- <p class="text">{{ dataForm.productName }}</p> -->
         </el-col>
         <el-col :span="6">
-          <p class="title">标准组件平均功率</p>
+          <p class="title">标准组件人均产量</p>
           <!-- <p class="text">{{ dataForm.productName }}</p> -->
         </el-col>
       </el-row>

src/views/produce/data/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-05-22 15:25:11
+ * @LastEditTime: 2024-05-16 14:15:46
  * @LastEditors: DY
  * @Description:
 -->
@@ -15,7 +15,7 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item v-show="listQuery.date === 0 || listQuery.date === ''" label="时间范围" prop="reportTime">
+        <el-form-item v-show="listQuery.date === 0" label="时间范围" prop="reportTime">
           <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
             start-placeholder="开始日期" value-format="timestamp" @change="changeDayTime" end-placeholder="结束日期">
           </el-date-picker>
@@ -38,11 +38,11 @@
           </el-date-picker>
         </el-form-item>
         <el-form-item v-show="listQuery.date === 3" label="时间范围" prop="reportTime">
-          <el-date-picker size="small" clearable v-model="listQuery.start" format="yyyy-MM-dd" value-format="timestamp" type="year"
+          <el-date-picker size="small" clearable v-model="listQuery.start" value-format="timestamp" type="year"
             placeholder="开始时间">
           </el-date-picker>
           ~
-          <el-date-picker size="small" clearable v-model="listQuery.end" format="yyyy-MM-dd" value-format="timestamp" type="year" placeholder="结束时间"
+          <el-date-picker size="small" clearable v-model="listQuery.end" value-format="timestamp" type="year" placeholder="结束时间"
             @change="getYear">
           </el-date-picker>
         </el-form-item>
@@ -132,9 +132,7 @@ export default {
         // reportType: 2,
         beginTime: undefined,
         endTime:undefined,
-        reportTime: [],
-        start: undefined,
-        end: undefined
+        reportTime: []
       },
       detailOrUpdateVisible:false,
       date1: undefined,
@@ -285,18 +283,19 @@ export default {
         },
       ],
       tableData: [],
-      xAxis: []
 			// proLineList: [],
 			// all: {}
 		};
   },
   computed: {
     weekNum() {
-      return Math.round((this.listQuery.end - this.listQuery.start) / (24 * 60 * 60 * 1000 * 7)) + 1
+      return Math.round((this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 60 * 60 * 1000 * 7)) + 1
     },
   },
 	mounted() {
-    this.getDataList()
+    this.getDict()
+    // this.getCurrentYearFirst()
+    // this.getDataList()
 	},
   methods: {
     otherMethods(val) {
@@ -310,27 +309,25 @@ export default {
 
     // },
     getYear(e) {
-      if (this.listQuery.end - this.listQuery.start > 10*365*24*60*60*1000) {
+      if (this.listQuery.reportTime[1] - this.listQuery.reportTime[0] > 10*365*24*60*60*1000) {
         this.$message({
           message: '年份起止时间不能超过十年',
           type: 'warning'
         });
         this.listQuery.reportTime = []
-        this.listQuery.start = undefined
-        this.listQuery.end = undefined
         // console.log();
       } else {
-        this.listQuery.beginTime = this.listQuery.start
-        this.listQuery.endTime = this.listQuery.end
+        this.listQuery.beginTime = this.listQuery.reportTime[0]
+        this.listQuery.endTime = this.listQuery.reportTime[1]
       }
       // console.log(e);
     },
     onValueChange(picker, k) { // 选中近k周后触发的操作
       // console.log(this.listQuery.reportTime[0], this.listQuery.reportTime[1])
-      if (this.listQuery.start && this.listQuery.end) {
+      if (this.listQuery.reportTime[0] && this.listQuery.reportTime[1]) {
         console.log(this.listQuery.reportTime)
-        this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
-        this.date2 = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
+        this.date1 = moment(this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
+        this.date2 = moment(this.listQuery.reportTime[1].getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
         const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
         if (numDays > 168) {
           console.log(numDays)
@@ -339,8 +336,8 @@ export default {
             type: 'warning'
           });
         } else {
-          this.listQuery.beginTime = this.listQuery.start.getTime() - 24 * 60 * 60 * 1000
-          this.listQuery.endTime = this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000
+          this.listQuery.beginTime = this.listQuery.reportTime[0].getTime() - 24 * 60 * 60 * 1000
+          this.listQuery.endTime = this.listQuery.reportTime[1].getTime() + 5 * 24 * 60 * 60 * 1000
         }
       }
     },
@@ -380,11 +377,12 @@ export default {
         console.log(this.listQuery.reportTime[0])
       }
     },
-    // async getDict() {
+    async getDict() {
+      this.$refs.lineChart.initChart()
 			// 产线列表
 			// const res = await getCorePLList();
 			// this.proLineList = res.data;
-		// },
+		},
     // 获取数据列表
     multipliedByHundred(str) {
       console.log(str);
@@ -413,43 +411,33 @@ export default {
       console.log(res)
       this.tableData = res.data.records
       this.tableData.forEach(item => {
-        item.tableTime = item?.reportDate?.length > 0 ? item.reportDate[0] + '-' + item.reportDate[1] + '-' + item.reportDate[2] : '--'
+        item.tableTime = item?.reportDate?.length > 0 ? item.reportDate[0] + '年' + item.reportDate[1] + '月' + item.reportDate[2] + '日' : '--'
       })
       this.listQuery.total = res.data.total
-      this.buildChart(this.tableData)
     },
-    buildChart(list) {
-      const chartList = Object.groupBy(list, (item) => item.tableTime)
-      this.xAxis = []
-      this.seriesList = []
-      for (const keyIndex in chartList) {
-        // X坐标轴数据
-        this.xAxis.push(keyIndex)
-      }
-      // y轴数据
-      for (const y of this.factoryList) {
-        // y: {name: , id: }
-        const seriesItem = {
-          name: y.name,
-            type: 'bar',
-            emphasis: {
-              focus: 'series'
-            },
-          data: Array(this.xAxis.length).fill(0)
-        }
-        for (const a in chartList) {
-          for (const z of chartList[a]) {
-            this.xAxis.forEach((item, index) => {
-              if (z.factory === y.id && a === item) {
-                seriesItem.data[index] = z.goodNumber
-              }
-            })
-          }
-        }
-        this.seriesList.push(seriesItem)
-      }
-      this.$refs.lineChart.initChart(this.xAxis, this.seriesList)
+    add0(m) {
+      return m < 10 ? '0' + m : m
     },
+    format(shijianchuo) {
+      //shijianchuo是整数，否则要parseInt转换
+      var time = moment(new Date(shijianchuo)).format('YYYY-MM-DD HH:mm:ss')
+      // console.log(time)
+      // var y = time.getFullYear();
+      // var m = time.getMonth() + 1;
+      // var d = time.getDate();
+      // var h = time.getHours();
+      // var mm = time.getMinutes();
+      // var s = time.getSeconds();
+      return time
+    },
+		//时间戳转为yy-mm-dd hh:mm:ss
+		timeFun(unixtimestamp) {
+				var unixtimestamp = new Date(unixtimestamp);
+				var year = 1900 + unixtimestamp.getYear();
+				var month = "0" + (unixtimestamp.getMonth() + 1);
+				var date = "0" + unixtimestamp.getDate();
+				return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length)
+		},
 		buttonClick(val) {
 			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
 			switch (val.btnName) {

src/views/produce/data/lineChart.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: zwq
  * @Date: 2022-01-21 14:43:06
- * @LastEditors: DY
- * @LastEditTime: 2024-05-22 13:48:58
+ * @LastEditors: zhp
+ * @LastEditTime: 2024-04-17 10:03:39
  * @Description:
 -->
 <template>
@@ -58,11 +58,11 @@ export default {
       chart: null
     }
   },
-  // mounted() {
-  //   this.$nextTick(() => {
-  //     this.initChart()
-  //   })
-  // },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
   beforeDestroy() {
     if (!this.chart) {
       return
@@ -71,7 +71,8 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart(xAxis, seriesList) {
+    initChart() {
+      console.log(1111)
       this.chart = echarts.init(document.getElementById(this.id))
       console.log(this.$parent);
       this.chart.setOption({
@@ -84,7 +85,7 @@ export default {
         },
         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
         legend: {
-          // data: ['工厂1', '工厂2'],
+          data: ['工厂1', '工厂2'],
           right: '90px',
           top: '0%',
           icon: 'rect',
@@ -106,7 +107,7 @@ export default {
           {
             type: 'category',
             // prettier-ignore
-            data: xAxis
+            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
           }
         ],
         yAxis: [
@@ -121,8 +122,39 @@ export default {
           bottom: "1%",
           containLabel: true
         },
-        series: seriesList
-      }, true)
+        series: [
+          {
+            name: '工厂1',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: 'rgba(99, 189, 255, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(99, 189, 255, 1)' //改变折线颜色
+                }
+              }
+            },
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+            ],
+          },
+          {
+            name: '工厂2',
+            type: 'bar',
+            itemStyle: {
+              normal: {
+                color: 'rgba(142, 240, 171, 1)', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(142, 240, 171, 1)' //改变折线颜色
+                }
+              }
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+            ],
+          },
+        ]
+      })
     }
   }
 }

src/views/produce/target/add-or-updata.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-17 16:31:51
- * @LastEditTime: 2024-05-20 18:09:09
+ * @LastEditTime: 2024-05-17 14:48:57
  * @LastEditors: DY
  * @Description:
 -->
@@ -75,20 +75,14 @@
         </el-row>
         <el-row :gutter="24" style="padding: 0 32px;">
           <el-col :span="6">
-            <el-form-item v-if="ftype === 0" label="FTO投入量" prop="ftoInput">
+            <el-form-item label="FTO投入量" prop="ftoInput">
               <el-input-number v-model="dataForm.ftoInput" :precision="0" controls-position="right" placeholder="请输入FTO投入量" style="width: 100%" />
             </el-form-item>
-            <el-form-item v-else label="钼电极投入量" prop="molybdenumElectrodeInput">
-              <el-input-number v-model="dataForm.molybdenumElectrodeInput" :precision="0" controls-position="right" placeholder="请输入钼电极投入量" style="width: 100%" />
-            </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item v-if="ftype === 0" label="CSS稼动率" prop="chipCssMarriageRate">
+            <el-form-item label="CSS稼动率" prop="chipCssMarriageRate">
               <el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入CSS稼动率" style="width: 100%" />
             </el-form-item>
-            <el-form-item v-else label="PID6稼动率" prop="chipCssMarriageRate">
-              <el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入PID6稼动率" style="width: 100%" />
-            </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="芯片段OEE" prop="chipOee">
@@ -322,8 +316,7 @@ export default {
         bipvChipUtilizationRate: undefined,
         bipvInsideMaterialCost: undefined,
         bipvOeeMaterialCost: undefined,
-        bipvComprehensiveMaterialCost: undefined,
-        molybdenumElectrodeInput: undefined
+        bipvComprehensiveMaterialCost: undefined
       },
       // materialList: [],
       dataRule: {
@@ -337,6 +330,7 @@ export default {
     };
   },
   mounted() {
+    this.dataForm.factoryType = this.ftype
     // this.getCurrentTime()
   },
   methods: {
@@ -394,7 +388,6 @@ export default {
     },
     init(id) {
       this.dataForm.id = id || undefined
-      this.dataForm.factoryType = this.ftype
       this.visible = true
       if (this.dataForm.id) {
         getProduceTargetDetail(this.dataForm.id).then(res => {

src/views/produce/target/detail-or-updata.vue

@@ -1,28 +1,28 @@
 <!--
  * @Author: zhp
  * @Date: 2023-11-06 15:15:30
- * @LastEditTime: 2024-05-22 15:29:18
- * @LastEditors: DY
+ * @LastEditTime: 2024-04-17 16:40:01
+ * @LastEditors: zhp
  * @Description:
 -->
 <template>
-  <el-drawer class="drawer" :visible.sync="visible" size="58%" @closed="$emit('destroy')">
+  <el-drawer class="drawer" :visible.sync="visible" size="50%">
     <small-title slot="title" :no-padding="true">
-      {{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }}
+      {{ '碲化镉工厂生产数据详情' }}
     </small-title>
     <div class="detailBox">
       <el-row :gutter="24">
         <el-col :span="8">
           <p class="title">工厂名称</p>
-          <p class="text">{{ factoryList[dataForm.factory] }}</p>
+          <p class="text">{{ }}</p>
         </el-col>
         <el-col :span="8">
           <p class="title">时间维度</p>
-          <p class="text">{{ dataForm.targetType === 0 ? '月' : '年' }}</p>
+          <p class="text">{{ dataForm.code }}</p>
         </el-col>
         <el-col :span="8">
           <p class="title">时间</p>
-          <p class="text">{{ dataForm.targetType === 1 ? dataForm.targetYear + '年' : dataForm.targetYear + '年' + dataForm.targetMonth + '月'}}</p>
+          <p class="text">{{ dataForm.productName }}</p>
         </el-col>
       </el-row>
       <el-divider></el-divider>
@@ -32,47 +32,47 @@
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">芯片产量</p>
-          <p class="text">{{ dataForm.chipYield }}</p>
+          <p class="text">{{ }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片良率</p>
-          <p class="text">{{ dataForm.chipYieldRate }}</p>
+          <p class="text">{{ dataForm.code }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片BOM</p>
-          <p class="text">{{ dataForm.chipBom }}</p>
+          <p class="title">芯片良率</p>
+          <p class="text">{{ dataForm.productName }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片总功率</p>
-          <p class="text">{{ dataForm.chipTotalPower }}</p>
+          <p class="text">{{ dataForm.productName }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
-          <p class="title">{{ ftype === 0 ? 'FTO投入量' : '钼电极投入量' }}</p>
-          <p class="text">{{ ftype === 0 ? dataForm.ftoInput : dataForm.molybdenumElectrodeInput }}</p>
+          <p class="title">FTO投入量</p>
+          <p class="text">{{ }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">{{ ftype === 0 ? 'CSS稼动率' : 'PID6稼动率' }}</p>
-          <p class="text">{{ dataForm.chipCssMarriageRate }}</p>
+          <p class="title">CSS稼动率</p>
+          <p class="text">{{ dataForm.code }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片段OEE</p>
-          <p class="text">{{ dataForm.chipOee }}</p>
+          <p class="text">{{ dataForm.productName }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片平均功率</p>
-          <p class="text">{{ dataForm.chipAveragePower }}</p>
+          <p class="text">{{ dataForm.productName }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">芯片人均产量</p>
-          <p class="text">{{ dataForm.chipAnnualAverageProduction }}</p>
+          <p class="text">{{ }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片产能利用率</p>
-          <p class="text">{{ dataForm.chipCapacityUtilizationRate }}</p>
+          <p class="text">{{ dataForm.code }}</p>
         </el-col>
       </el-row>
       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
@@ -81,37 +81,37 @@
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">封装BOM</p>
-          <p class="text">{{ dataForm.componentBom }}</p>
+          <p class="text">{{ }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">封装线OEE</p>
-          <p class="text">{{ dataForm.componentOee }}</p>
+          <p class="text">{{ dataForm.code }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">标准组件良率</p>
-          <p class="text">{{ dataForm.componentYieldRate }}</p>
+          <p class="text">{{ dataForm.productName }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">标准组件产量</p>
-          <p class="text">{{ dataForm.componentYield }}</p>
+          <p class="text">{{ dataForm.productName }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">标准组件总功率</p>
-          <p class="text">{{ dataForm.componentTotalPower }}</p>
+          <p class="text">{{ }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">封装产能利用率</p>
-          <p class="text">{{ dataForm.componentCapacityUtilizationRate }}</p>
+          <p class="text">{{ dataForm.code }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">标准组件人均产量</p>
-          <p class="text">{{ dataForm.componentAnnualAverageProduction }}</p>
+          <p class="text">{{ dataForm.productName }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">标准组件平均功率</p>
-          <p class="text">{{ dataForm.componentAveragePower }}</p>
+          <p class="title">标准组件人均产量</p>
+          <p class="text">{{ dataForm.productName }}</p>
         </el-col>
       </el-row>
       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
@@ -120,33 +120,33 @@
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">产品产量</p>
-          <p class="text">{{ dataForm.bipvProductOutput }}</p>
+          <p class="text">{{ }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">人均产量</p>
-          <p class="text">{{ dataForm.bipvAnnualAverageProduction }}</p>
+          <p class="text">{{ dataForm.code }}</p>
         </el-col>
         <el-col :span="6">
           <p class="title">芯片使用量</p>
-          <p class="text">{{ dataForm.bipvChipUsage }}</p>
+          <p class="text">{{ dataForm.productName }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">芯片利用率</p>
-          <p class="text">{{ dataForm.bipvChipUtilizationRate }}</p>
+          <p class="title">芯片使用量</p>
+          <p class="text">{{ dataForm.productName }}</p>
         </el-col>
       </el-row>
       <el-row :gutter="24">
         <el-col :span="6">
           <p class="title">内部材料成本</p>
-          <p class="text">{{ dataForm.bipvInsideMaterialCost }}</p>
+          <p class="text">{{ }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">OEM及委外材料成本</p>
-          <p class="text">{{ dataForm.bipvOeeMaterialCost }}</p>
+          <p class="title">内部材料成本</p>
+          <p class="text">{{ dataForm.code }}</p>
         </el-col>
         <el-col :span="6">
-          <p class="title">综合材料成本</p>
-          <p class="text">{{ dataForm.bipvComprehensiveMaterialCost }}</p>
+          <p class="title">内部材料成本</p>
+          <p class="text">{{ dataForm.productName }}</p>
         </el-col>
       </el-row>
     </div>
@@ -155,24 +155,20 @@
 </template>
 
 <script>
-import { getProduceTargetDetail } from '@/api/produceData';
+// import basicAdd from './basic-add';
+// import {
+//   createQualityScrapLog, updateQualityScrapLog, getQualityScrapLog, getWorkOrderList,
+//   getTeamList, getDetList, getLineList
+// } from "@/api/base/qualityScrapLog";
+// import { getList, } from "@/api/base/qualityScrapType";
 import SmallTitle from './SmallTitle';
-import { factoryList } from "@/utils/constants";
-
 export default {
   components: {
     SmallTitle,
   },
-  props: {
-    ftype: {
-      type: Number,
-      default: 0
-    }
-  },
   // mixins: [basicAdd],
   data() {
     return {
-      factoryList,
       urlOptions: {
         isGetCode: false,
         // codeURL: getCode,
@@ -227,14 +223,8 @@ export default {
     // this.getCurrentTime()
   },
   methods: {
-    init(id) {
+    init() {
       this.visible = true
-      console.log('打印', id)
-      if (id) {
-        getProduceTargetDetail(id).then(res => {
-          this.dataForm = res.data
-        })
-      }
     },
     // getCurrentTime() {
     //   // new Date().Format("yyyy-MM-dd HH:mm:ss")

src/views/produce/target/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhp
  * @Date: 2024-04-15 10:49:13
- * @LastEditTime: 2024-05-22 16:22:57
+ * @LastEditTime: 2024-05-17 17:54:54
  * @LastEditors: DY
  * @Description:
 -->
@@ -92,38 +92,26 @@
         :total="listQuery.total"
         @pagination="getDataList"
       />
-      <detail-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :ftype="facType" @destroy="detailOrUpdateVisible = false" />
+      <detail-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @destroy="detailOrUpdateVisible = false" />
       <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :ftype="facType" @refreshDataList="getDataList" @destroy="addOrUpdateVisible = false" />
 
     </div>
 
     <!-- 用户导入对话框 -->
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls"
-        :headers="upload.headers"
-        :action="upload.url"
-        :file-list="fileList"
-        :disabled="upload.isUploading"
-        :on-success="handleFileSuccess"
-        :on-progress="handleFileUploadProgress"
-        :auto-upload="false" drag>
+      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+        :action="upload.url" :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip text-center" slot="tip">
+          <!-- <div class="el-upload__tip" slot="tip">
+            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
+          </div> -->
           <span>仅允许导入xls、xlsx格式文件。</span>
+          <!-- <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link> -->
         </div>
       </el-upload>
-      <!-- <el-upload
-        ref="upload"
-        class="upload-demo"
-        action="#"
-        :limit="1"
-        :file-list="fileList"
-        :auto-upload="false"
-        :http-request="handleFileSuccess"> -->
-        <!-- <el-button size="small" type="primary">点击上传</el-button>
-        <div slot="tip" class="el-upload__tip">只能上传.xlsx, .xls文件，且不超过500kb</div>
-      </el-upload> -->
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitFileForm">确 定</el-button>
         <el-button @click="upload.open = false">取 消</el-button>
@@ -142,7 +130,7 @@
 
 <script>
 import { parseTime } from '@/utils/ruoyi';
-import { prodTargetDiPage, prodTargetToPage, exportDiTargetExcel, exportToTargetExcel, delTarget, importToTarget, importDiTarget } from '@/api/produceData';
+import { prodTargetDiPage, prodTargetToPage, exportDiTargetExcel, exportToTargetExcel, delTarget } from '@/api/produceData';
 // import inputTable from './inputTable.vue';
 import lineChart from './lineChart';
 import moment from 'moment'
@@ -165,7 +153,6 @@ export default {
       dhgfactoryList,
       tyjxfactoryList,
       currentMenu: '碲化镉工厂',
-      fileList: [],
       start: undefined,
       end: undefined,
       listQuery: {
@@ -195,7 +182,7 @@ export default {
         // 设置上传的请求头部
         headers: getBaseHeader(),
         // 上传的地址
-        url: process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/di-target-import-excel'
+        url: process.env.VUE_APP_BASE_API + '/ip/prod-target/di-target-import-excel'
       },
       tableBtn: [
         {
@@ -345,8 +332,8 @@ export default {
           showOverflowtooltip: true
         },
         {
-          prop: 'ftoInput',
-          label: 'FTO投入量(片)',
+          prop: 'molybdenumElectrodeInput',
+          label: '钼电极投入量(片)',
           minWidth: 150,
           showOverflowtooltip: true
         },
@@ -418,85 +405,26 @@ export default {
 			// all: {}
 		};
   },
-  // computed: {
-  //   weekNum() {
-  //     return Math.round((this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 60 * 60 * 1000 * 7)) + 1
-  //   },
-  // },
-  watch: {
-    facType(value) {
-      if (value === 0) {
-        this.$set(this.tableProps, 3, {
-          prop: 'ftoInput',
-          label: 'FTO投入量(片)',
-          minWidth: 150,
-          showOverflowtooltip: true
-        })
-        this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/di-target-import-excel'
-      } else {
-        this.$set(this.tableProps, 3, {
-          prop: 'molybdenumElectrodeInput',
-          label: '钼电极投入量(片)',
-          minWidth: 150,
-          showOverflowtooltip: true
-        })
-        this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/to-target-import-excel'
-      }
-      console.log(112, this.tableProps)
-    }
+  computed: {
+    weekNum() {
+      return Math.round((this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 60 * 60 * 1000 * 7)) + 1
+    },
   },
 	mounted() {
     // this.getDict()
     // this.getCurrentYearFirst()
-    this.getDataList()
+    // this.getDataList()
 	},
   methods: {
     handleImport() {
       this.upload.title = "生产目标导入";
       this.upload.open = true;
-      this.fileList = []
     },
     // 文件上传中处理
     handleFileUploadProgress(event, file, fileList) {
       this.upload.isUploading = true;
     },
     // 文件上传成功处理
-    // handleFileSuccess(param, type) {
-    //   console.log('带的', param.file)
-    //   const formData = new FormData()
-    //   formData.append('multipartFile', param.file)
-    //   console.log('送送', param)
-    //   importDiTarget(formData).then(res => {
-    //     console.log(res)
-    //     if (res.code !== 0) {
-    //       this.$modal.msgError(response.msg)
-    //       return;
-    //     }
-    //     this.upload.open = false;
-    //     this.upload.isUploading = false;
-    //     this.$refs.upload.clearFiles();
-    //   }).catch(() => {
-    //     this.upload.open = false
-    //     this.upload.isUploading = false
-    //   })
-    //   // 拼接提示语
-    //   // let data = response.data;
-    //   // let text = '创建成功数量：' + data.createUsernames.length;
-    //   // for (const username of data.createUsernames) {
-    //   //   text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
-    //   // }
-    //   // text += '<br />更新成功数量：' + data.updateUsernames.length;
-    //   // for (const username of data.updateUsernames) {
-    //   //   text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
-    //   // }
-    //   // text += '<br />更新失败数量：' + Object.keys(data.failureUsernames).length;
-    //   // for (const username in data.failureUsernames) {
-    //   //   text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username + '：' + data.failureUsernames[username];
-    //   // }
-    //   this.$message.success('导入成功！');
-    //   this.getDataList();
-    // },
-        // 文件上传成功处理
     handleFileSuccess(response, file, fileList) {
       if (response.code !== 0) {
         this.$modal.msgError(response.msg)
@@ -505,8 +433,22 @@ export default {
       this.upload.open = false;
       this.upload.isUploading = false;
       this.$refs.upload.clearFiles();
-      this.$message.success('导入成功！')
-      this.getDataList()
+      // 拼接提示语
+      // let data = response.data;
+      // let text = '创建成功数量：' + data.createUsernames.length;
+      // for (const username of data.createUsernames) {
+      //   text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
+      // }
+      // text += '<br />更新成功数量：' + data.updateUsernames.length;
+      // for (const username of data.updateUsernames) {
+      //   text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
+      // }
+      // text += '<br />更新失败数量：' + Object.keys(data.failureUsernames).length;
+      // for (const username in data.failureUsernames) {
+      //   text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username + '：' + data.failureUsernames[username];
+      // }
+      this.$message.success('导入成功！');
+      this.getDataList();
     },
     // 提交上传文件
     submitFileForm() {
@@ -521,11 +463,6 @@ export default {
     changeFactory($event) {
       this.currentMenu = $event
       this.facType = this.currentMenu === '碲化镉工厂' ? 0 : 1
-      // if (this.facType === 0) {
-      //   this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/di-target-import-excel'
-      // } else {
-      //   this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/to-target-import-excel'
-      // }
       this.getDataList()
     },
     handleClick(val) {

src/views/system/components/statusBtn.vue

@@ -1,38 +0,0 @@
-<template>
-  <div>
-    <span class="dot" :class="injectData.status === 1 ? 'red' : 'green'"></span>
-    <span>{{ state }}</span>
-  </div>
-</template>
-<script>
-export default {
-  name: "StatusBtn",
-  props: {
-    injectData: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  computed: {
-    state() {
-      return this.injectData.status === 1 ? "停用" : "启用";
-    },
-  },
-};
-</script>
-<style scoped>
-.dot {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 3px;
-  vertical-align: middle;
-  margin-right: 8px;
-}
-.green {
-  background: #10dc76;
-}
-.red {
-  background: #ff5656;
-}
-</style>

src/views/system/loginlog/index.vue

@@ -2,138 +2,63 @@
   <div class="app-container">
     <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
     <!-- 搜索工作栏 -->
-    <el-form
-      :model="queryParams"
-      ref="queryForm"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-      label-width="68px"
-    >
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="登录地址" prop="userIp">
-        <el-input
-          v-model="queryParams.userIp"
-          placeholder="请输入登录地址"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.userIp" placeholder="请输入登录地址" clearable style="width: 240px;"
+                  @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="用户名称" prop="username">
-        <el-input
-          v-model="queryParams.username"
-          placeholder="请输入用户名称"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 240px;"
+                  @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="结果"
-          clearable
-          style="width: 240px"
-        >
-          <el-option :key="true" label="成功" :value="true" />
-          <el-option :key="false" label="失败" :value="false" />
+        <el-select v-model="queryParams.status" placeholder="结果" clearable style="width: 240px">
+          <el-option :key="true" label="成功" :value="true"/>
+          <el-option :key="false" label="失败" :value="false"/>
         </el-select>
       </el-form-item>
       <el-form-item label="登录时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          style="width: 240px"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']"
-        />
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
-          >搜索</el-button
-        >
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['system:login-log:export']"
-          >导出</el-button
-        >
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:login-log:export']">导出</el-button>
       </el-col>
-      <right-toolbar
-        :showSearch.sync="showSearch"
-        @queryTable="getList"
-      ></right-toolbar>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="list">
       <el-table-column label="访问编号" align="center" prop="id" />
-      <el-table-column
-        label="日志类型"
-        align="center"
-        prop="logType"
-        width="120"
-      >
+      <el-table-column label="日志类型" align="center" prop="logType" width="120">
         <template v-slot="scope">
-          <dict-tag
-            :type="DICT_TYPE.SYSTEM_LOGIN_TYPE"
-            :value="scope.row.logType"
-          />
+          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_TYPE" :value="scope.row.logType" />
         </template>
       </el-table-column>
       <el-table-column label="用户名称" align="center" prop="username" />
-      <el-table-column
-        label="登录地址"
-        align="center"
-        prop="userIp"
-        width="130"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column
-        label="userAgent"
-        align="center"
-        prop="userAgent"
-        width="400"
-        :show-overflow-tooltip="true"
-      />
+      <el-table-column label="登录地址" align="center" prop="userIp" width="130" :show-overflow-tooltip="true" />
+      <el-table-column label="userAgent" align="center" prop="userAgent" width="400" :show-overflow-tooltip="true" />
       <el-table-column label="结果" align="center" prop="status">
         <template v-slot="scope">
-          <dict-tag
-            :type="DICT_TYPE.SYSTEM_LOGIN_RESULT"
-            :value="scope.row.result"
-          />
+          <dict-tag :type="DICT_TYPE.SYSTEM_LOGIN_RESULT" :value="scope.row.result" />
         </template>
       </el-table-column>
-      <el-table-column
-        label="登录日期"
-        align="center"
-        prop="loginTime"
-        width="180"
-      >
+      <el-table-column label="登录日期" align="center" prop="loginTime" width="180">
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNo"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
   </div>
 </template>
 
@@ -161,8 +86,8 @@ export default {
         userIp: undefined,
         username: undefined,
         status: undefined,
-        createTime: [],
-      },
+        createTime: []
+      }
     };
   },
   created() {
@@ -172,11 +97,12 @@ export default {
     /** 查询登录日志列表 */
     getList() {
       this.loading = true;
-      list(this.queryParams).then((response) => {
-        this.list = response.data.list;
-        this.total = response.data.total;
-        this.loading = false;
-      });
+      list(this.queryParams).then(response => {
+          this.list = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -190,31 +116,19 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.$modal
-        .confirm("是否确认导出所有操作日志数据项?")
-        .then(() => {
+      this.$modal.confirm('是否确认导出所有操作日志数据项?').then(() => {
           // 处理查询参数
-          let params = { ...this.queryParams };
+          let params = {...this.queryParams};
           params.pageNo = undefined;
           params.pageSize = undefined;
           this.exportLoading = true;
           return exportLoginLog(params);
-        })
-        .then((response) => {
-          this.$download.excel(response, "登录日志.xls");
+        }).then(response => {
+          this.$download.excel(response, '登录日志.xls');
           this.exportLoading = false;
-        })
-        .catch(() => {});
-    },
-  },
+      }).catch(() => {});
+    }
+  }
 };
 </script>
-<style lang="scss" scoped>
-.app-container {
-  width: 100%;
-  height: calc(100vh - 120px - 8px);
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 8px;
-}
-</style>
+

src/views/system/menu/index.vue

@@ -1,146 +1,59 @@
 <template>
   <div class="app-container">
-    <doc-alert
-      title="功能权限"
-      url="https://doc.iocoder.cn/resource-permission"
-    />
+    <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
     <doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue2/route/" />
     <!-- 搜索工作栏 -->
-    <el-form
-      :model="queryParams"
-      ref="queryForm"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-    >
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
       <el-form-item label="菜单名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入菜单名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.name" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="菜单状态"
-          clearable
-        >
-          <el-option
-            v-for="dict in statusDictDatas"
-            :key="parseInt(dict.value)"
-            :label="dict.label"
-            :value="parseInt(dict.value)"
-          />
+        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
-          >搜索</el-button
-        >
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:menu:create']"
-          >新增</el-button
-        >
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:menu:create']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="info"
-          plain
-          icon="el-icon-sort"
-          size="mini"
-          @click="toggleExpandAll"
-          >展开/折叠</el-button
-        >
+        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
       </el-col>
-      <right-toolbar
-        :showSearch.sync="showSearch"
-        @queryTable="getList"
-      ></right-toolbar>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table
-      v-if="refreshTable"
-      v-loading="loading"
-      :data="menuList"
-      row-key="id"
-      :default-expand-all="isExpandAll"
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-    >
-      <el-table-column
-        prop="name"
-        label="菜单名称"
-        :show-overflow-tooltip="true"
-        width="250"
-      ></el-table-column>
+    <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="id" :default-expand-all="isExpandAll"
+              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      <el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="250"></el-table-column>
       <el-table-column prop="icon" label="图标" align="center" width="100">
         <template v-slot="scope">
           <svg-icon :icon-class="scope.row.icon" />
         </template>
       </el-table-column>
       <el-table-column prop="sort" label="排序" width="60"></el-table-column>
-      <el-table-column
-        prop="permission"
-        label="权限标识"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column
-        prop="component"
-        label="组件路径"
-        :show-overflow-tooltip="true"
-      />
-      <el-table-column
-        prop="componentName"
-        label="组件名称"
-        :show-overflow-tooltip="true"
-      />
+      <el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true" />
+      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true" />
+      <el-table-column prop="componentName" label="组件名称" :show-overflow-tooltip="true" />
       <el-table-column prop="status" label="状态" width="80">
         <template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
         </template>
       </el-table-column>
-      <el-table-column
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-      >
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:menu:update']"
-            >修改</el-button
-          >
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-plus"
-            @click="handleAdd(scope.row)"
-            v-hasPermi="['system:menu:create']"
-            >新增</el-button
-          >
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:menu:delete']"
-            >删除</el-button
-          >
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:menu:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
+                     v-hasPermi="['system:menu:create']">新增</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:menu:delete']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -151,55 +64,26 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="上级菜单">
-              <treeselect
-                v-model="form.parentId"
-                :options="menuOptions"
-                :normalizer="normalizer"
-                :show-count="true"
-                placeholder="选择上级菜单"
-              />
+              <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true"
+                          placeholder="选择上级菜单"/>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="菜单类型" prop="type">
               <el-radio-group v-model="form.type">
-                <el-radio
-                  v-for="dict in menuTypeDictDatas"
-                  :key="parseInt(dict.value)"
-                  :label="parseInt(dict.value)"
-                >
-                  {{ dict.label }}</el-radio
-                >
+                <el-radio v-for="dict in menuTypeDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
+                  {{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item v-if="form.type !== 3" label="菜单图标">
-              <el-popover
-                placement="bottom-start"
-                width="460"
-                trigger="click"
-                @show="$refs['iconSelect'].reset()"
-              >
+              <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
                 <IconSelect ref="iconSelect" @selected="selected" />
-                <el-input
-                  slot="reference"
-                  v-model="form.icon"
-                  placeholder="点击选择图标"
-                  readonly
-                >
-                  <svg-icon
-                    v-if="form.icon"
-                    slot="prefix"
-                    :icon-class="form.icon"
-                    class="el-input__icon"
-                    style="height: 32px; width: 16px"
-                  />
-                  <i
-                    v-else
-                    slot="prefix"
-                    class="el-icon-search el-input__icon"
-                  />
+                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
+                  <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon"
+                            style="height: 32px;width: 16px;"/>
+                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                 </el-input>
               </el-popover>
             </el-form-item>
@@ -211,89 +95,59 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="显示排序" prop="sort">
-              <el-input-number
-                v-model="form.sort"
-                controls-position="right"
-                :min="0"
-              />
+              <el-input-number v-model="form.sort" controls-position="right" :min="0" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.type !== 3" label="路由地址" prop="path">
               <span slot="label">
-                <el-tooltip
-                  content="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头"
-                  placement="top"
-                >
-                  <i class="el-icon-question" />
+                <el-tooltip content="访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头" placement="top">
+                <i class="el-icon-question" />
                 </el-tooltip>
                 路由地址
               </span>
               <el-input v-model="form.path" placeholder="请输入路由地址" />
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item v-if="form.type !== 1" label="权限标识">
+					<el-col :span="12">
+						<el-form-item v-if="form.type !== 1" label="权限标识">
               <span slot="label">
-                <el-tooltip
-                  content="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
-                  placement="top"
-                >
+                <el-tooltip content="Controller 方法上的权限字符，如：@PreAuthorize(`@ss.hasPermission('system:user:list')`)" placement="top">
                   <i class="el-icon-question" />
                 </el-tooltip>
                 权限字符
               </span>
-              <el-input
-                v-model="form.permission"
-                placeholder="请权限标识"
-                maxlength="50"
-              />
-            </el-form-item>
-          </el-col>
+							<el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
+						</el-form-item>
+					</el-col>
           <el-col :span="12" v-if="form.type === 2">
             <el-form-item label="组件路径" prop="component">
-              <el-input
-                v-model="form.component"
-                placeholder="例如说：system/user/index"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12" v-if="form.type === 2">
-            <el-form-item label="组件名称" prop="componentName">
-              <el-input
-                v-model="form.componentName"
-                placeholder="例如说：SystemUser"
-              />
+              <el-input v-model="form.component" placeholder="例如说：system/user/index" />
             </el-form-item>
           </el-col>
+					<el-col :span="12" v-if="form.type === 2">
+						<el-form-item label="组件名称" prop="componentName">
+							<el-input v-model="form.componentName" placeholder="例如说：SystemUser" />
+						</el-form-item>
+					</el-col>
           <el-col :span="12">
             <el-form-item label="菜单状态" prop="status">
               <span slot="label">
-                <el-tooltip
-                  content="选择停用时，路由将不会出现在侧边栏，也不能被访问"
-                  placement="top"
-                >
+                <el-tooltip content="选择停用时，路由将不会出现在侧边栏，也不能被访问" placement="top">
                   <i class="el-icon-question" />
                 </el-tooltip>
                 菜单状态
               </span>
               <el-radio-group v-model="form.status">
-                <el-radio
-                  v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
-                  :key="dict.value"
-                  :label="parseInt(dict.value)"
-                  >{{ dict.label }}</el-radio
-                >
+                <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                          :key="dict.value" :label="parseInt(dict.value)">{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item v-if="form.type !== 3" label="显示状态">
               <span slot="label">
-                <el-tooltip
-                  content="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问"
-                  placement="top"
-                >
+                <el-tooltip content="选择隐藏时，路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                   <i class="el-icon-question" />
                 </el-tooltip>
                 是否显示
@@ -307,13 +161,10 @@
           <el-col :span="12">
             <el-form-item v-if="form.type !== 3" label="总是显示">
               <span slot="label">
-                <el-tooltip
-                  content="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单"
-                  placement="top"
-                >
+                <el-tooltip content="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单" placement="top">
                   <i class="el-icon-question" />
                 </el-tooltip>
-                总是显示
+                 总是显示
               </span>
               <el-radio-group v-model="form.alwaysShow">
                 <el-radio :key="true" :label="true">总是</el-radio>
@@ -321,23 +172,20 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item v-if="form.type === 2" label="是否缓存">
+					<el-col :span="12">
+						<el-form-item v-if="form.type === 2" label="是否缓存">
               <span slot="label">
-                <el-tooltip
-                  content="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段"
-                  placement="top"
-                >
+                <el-tooltip content="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段" placement="top">
                   <i class="el-icon-question" />
                 </el-tooltip>
-                是否缓存
+                 是否缓存
               </span>
-              <el-radio-group v-model="form.keepAlive">
-                <el-radio :key="true" :label="true">缓存</el-radio>
-                <el-radio :key="false" :label="false">不缓存</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
+							<el-radio-group v-model="form.keepAlive">
+								<el-radio :key="true" :label="true">缓存</el-radio>
+								<el-radio :key="false" :label="false">不缓存</el-radio>
+							</el-radio-group>
+						</el-form-item>
+					</el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -349,20 +197,14 @@
 </template>
 
 <script>
-import {
-  listMenu,
-  getMenu,
-  delMenu,
-  addMenu,
-  updateMenu,
-} from "@/api/system/menu";
+import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import IconSelect from "@/components/IconSelect";
 
-import { SystemMenuTypeEnum, CommonStatusEnum } from "@/utils/constants";
-import { getDictDatas, DICT_TYPE } from "@/utils/dict";
-import { isExternal } from "@/utils/validate";
+import { SystemMenuTypeEnum, CommonStatusEnum } from '@/utils/constants'
+import { getDictDatas, DICT_TYPE } from '@/utils/dict'
+import {isExternal} from "@/utils/validate";
 
 export default {
   name: "SystemMenu",
@@ -388,22 +230,24 @@ export default {
       // 查询参数
       queryParams: {
         name: undefined,
-        visible: undefined,
+        visible: undefined
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         name: [
-          { required: true, message: "菜单名称不能为空", trigger: "blur" },
+          { required: true, message: "菜单名称不能为空", trigger: "blur" }
         ],
         sort: [
-          { required: true, message: "菜单顺序不能为空", trigger: "blur" },
+          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
         ],
         path: [
-          { required: true, message: "路由地址不能为空", trigger: "blur" },
+          { required: true, message: "路由地址不能为空", trigger: "blur" }
         ],
-        status: [{ required: true, message: "状态不能为空", trigger: "blur" }],
+        status: [
+          { required: true, message: "状态不能为空", trigger: "blur" }
+        ]
       },
 
       // 枚举
@@ -411,7 +255,7 @@ export default {
       CommonStatusEnum: CommonStatusEnum,
       // 数据字典
       menuTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_MENU_TYPE),
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
     };
   },
   created() {
@@ -425,7 +269,7 @@ export default {
     /** 查询菜单列表 */
     getList() {
       this.loading = true;
-      listMenu(this.queryParams).then((response) => {
+      listMenu(this.queryParams).then(response => {
         this.menuList = this.handleTree(response.data, "id");
         this.loading = false;
       });
@@ -438,14 +282,14 @@ export default {
       return {
         id: node.id,
         label: node.name,
-        children: node.children,
+        children: node.children
       };
     },
     /** 查询菜单下拉树结构 */
     getTreeselect() {
-      listMenu().then((response) => {
+      listMenu().then(response => {
         this.menuOptions = [];
-        const menu = { id: 0, name: "主类目", children: [] };
+        const menu = { id: 0, name: '主类目', children: [] };
         menu.children = this.handleTree(response.data, "id");
         this.menuOptions.push(menu);
       });
@@ -504,44 +348,42 @@ export default {
     handleUpdate(row) {
       this.reset();
       this.getTreeselect();
-      getMenu(row.id).then((response) => {
+      getMenu(row.id).then(response => {
         this.form = response.data;
         this.open = true;
         this.title = "修改菜单";
       });
     },
     /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate((valid) => {
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
         if (valid) {
           // 若权限类型为目录或者菜单时，进行 path 的校验，避免后续拼接出来的路由无法跳转
-          if (
-            this.form.type === SystemMenuTypeEnum.DIR ||
-            this.form.type === SystemMenuTypeEnum.MENU
-          ) {
+          if (this.form.type === SystemMenuTypeEnum.DIR
+            || this.form.type === SystemMenuTypeEnum.MENU) {
             // 如果是外链，则不进行校验
-            const path = this.form.path;
+            const path = this.form.path
             if (!isExternal(path)) {
               // 父权限为根节点，path 必须以 / 开头
-              if (this.form.parentId === 0 && path.charAt(0) !== "/") {
-                this.$modal.msgSuccess("前端必须以 / 开头");
-                return;
-              } else if (this.form.parentId !== 0 && path.charAt(0) === "/") {
-                this.$modal.msgSuccess("前端不能以 / 开头");
-                return;
+              if (this.form.parentId === 0 && path.charAt(0) !== '/') {
+                this.$modal.msgSuccess('前端必须以 / 开头')
+                return
+              } else if (this.form.parentId !== 0 && path.charAt(0) === '/') {
+                this.$modal.msgSuccess('前端不能以 / 开头')
+                return
               }
             }
           }
 
           // 提交
           if (this.form.id !== undefined) {
-            updateMenu(this.form).then((response) => {
+            updateMenu(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addMenu(this.form).then((response) => {
+            addMenu(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -552,26 +394,13 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal
-        .confirm('是否确认删除名称为"' + row.name + '"的数据项?')
-        .then(function () {
+      this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function() {
           return delMenu(row.id);
-        })
-        .then(() => {
+        }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
-        })
-        .catch(() => {});
-    },
-  },
+      }).catch(() => {});
+    }
+  }
 };
 </script>
-<style lang="scss" scoped>
-.app-container {
-  width: 100%;
-  height: calc(100vh - 120px - 8px);
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 8px;
-}
-</style>

src/views/system/operatelog/index.vue

@@ -1,184 +1,84 @@
 <template>
   <div class="app-container">
-    <!-- <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" /> -->
+    <doc-alert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
     <!-- 搜索工作栏 -->
-    <search-bar
-      :formConfigs="formConfig"
-      ref="searchBarForm"
-      @headBtnClick="buttonClick"
-    />
-    <!-- <el-form
-      :model="queryParams"
-      ref="queryForm"
-      size="small"
-      :inline="true"
-      v-show="showSearch"
-      label-width="68px"
-    >
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="系统模块" prop="module">
-        <el-input
-          v-model="queryParams.module"
-          placeholder="请输入系统模块"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.module" placeholder="请输入系统模块" clearable style="width: 240px;"
+                  @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="操作人员" prop="userNickname">
-        <el-input
-          v-model="queryParams.userNickname"
-          placeholder="请输入操作人员"
-          clearable
-          style="width: 240px"
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.userNickname" placeholder="请输入操作人员" clearable style="width: 240px;"
+                  @keyup.enter.native="handleQuery"/>
       </el-form-item>
       <el-form-item label="类型" prop="type">
-        <el-select
-          v-model="queryParams.type"
-          placeholder="操作类型"
-          clearable
-          style="width: 240px"
-        >
-          <el-option
-            v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_OPERATE_TYPE)"
-            :key="parseInt(dict.value)"
-            :label="dict.label"
-            :value="parseInt(dict.value)"
-          />
+        <el-select v-model="queryParams.type" placeholder="操作类型" clearable style="width: 240px">
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_OPERATE_TYPE)" :key="parseInt(dict.value)"
+                     :label="dict.label" :value="parseInt(dict.value)"/>
         </el-select>
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.success"
-          placeholder="操作状态"
-          clearable
-          style="width: 240px"
-        >
-          <el-option :key="true" label="成功" :value="true" />
-          <el-option :key="false" label="失败" :value="false" />
+        <el-select v-model="queryParams.success" placeholder="操作状态" clearable style="width: 240px">
+          <el-option :key="true" label="成功" :value="true"/>
+          <el-option :key="false" label="失败" :value="false"/>
         </el-select>
       </el-form-item>
       <el-form-item label="操作时间" prop="startTime">
-        <el-date-picker
-          v-model="queryParams.startTime"
-          style="width: 240px"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="['00:00:00', '23:59:59']"
-        />
+        <el-date-picker v-model="queryParams.startTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
-          >搜索</el-button
-        >
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
-    </el-form> -->
+    </el-form>
 
-    <!-- <el-row :gutter="10" class="mb8">
+    <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['system:operate-log:export']"
-          >导出</el-button
-        >
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:operate-log:export']">导出</el-button>
       </el-col>
-      <right-toolbar
-        :showSearch.sync="showSearch"
-        @queryTable="getList"
-      ></right-toolbar>
-    </el-row> -->
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
 
-    <!-- 列表 -->
-    <base-table
-      :page="queryParams.pageNo"
-      :limit="queryParams.pageSize"
-      :table-props="tableProps"
-      :table-data="list"
-      :max-height="tableH"
-    >
-      <method-btn
-        v-if="tableBtn.length"
-        slot="handleBtn"
-        :width="230"
-        label="操作"
-        :method-list="tableBtn"
-        @clickBtn="handleClick"
-      />
-    </base-table>
-    <!-- <el-table v-loading="loading" :data="list">
+    <el-table v-loading="loading" :data="list">
       <el-table-column label="日志编号" align="center" prop="id" />
       <el-table-column label="操作模块" align="center" prop="module" />
       <el-table-column label="操作名" align="center" prop="name" width="180" />
       <el-table-column label="操作类型" align="center" prop="type">
         <template v-slot="scope">
-          <dict-tag
-            :type="DICT_TYPE.SYSTEM_OPERATE_TYPE"
-            :value="scope.row.type"
-          />
+          <dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="scope.row.type"/>
         </template>
       </el-table-column>
       <el-table-column label="操作人" align="center" prop="userNickname" />
       <el-table-column label="操作结果" align="center" prop="status">
         <template v-slot="scope">
-          <span>{{ scope.row.resultCode === 0 ? "成功" : "失败" }}</span>
+          <span>{{ scope.row.resultCode === 0 ? '成功' : '失败' }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        label="操作日期"
-        align="center"
-        prop="startTime"
-        width="180"
-      >
+      <el-table-column label="操作日期" align="center" prop="startTime" width="180">
         <template v-slot="scope">
           <span>{{ parseTime(scope.row.startTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="执行时长" align="center" prop="startTime">
         <template v-slot="scope">
-          <span>{{ scope.row.duration }} ms</span>
+          <span>{{ scope.row.duration }}  ms</span>
         </template>
       </el-table-column>
-      <el-table-column
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-      >
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-view"
-            @click="handleView(scope.row, scope.index)"
-            v-hasPermi="['system:operate-log:query']"
-            >详细</el-button
-          >
+          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row,scope.index)"
+                     v-hasPermi="['system:operate-log:query']">详细</el-button>
         </template>
       </el-table-column>
-    </el-table> -->
+    </el-table>
 
-    <pagination
-      :page.sync="queryParams.pageNo"
-      :limit.sync="queryParams.pageSize"
-      :total="total"
-      @pagination="getList"
-    />
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList" />
 
     <!-- 操作日志详细 -->
-    <el-dialog
-      title="访问日志详细"
-      :visible.sync="open"
-      width="700px"
-      append-to-body
-    >
+    <el-dialog title="访问日志详细" :visible.sync="open" width="700px" append-to-body>
       <el-form ref="form" :model="form" label-width="100px" size="mini">
         <el-row>
           <el-col :span="24">
@@ -188,35 +88,24 @@
             <el-form-item label="链路追踪：">{{ form.traceId }}</el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="用户信息："
-              >{{ form.userId }} | {{ form.userNickname }} | {{ form.userIp }} |
-              {{ form.userAgent }}
-            </el-form-item>
+            <el-form-item label="用户信息：">{{ form.userId }} | {{ form.userNickname }} | {{ form.userIp }} | {{ form.userAgent}} </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="操作信息：">
               {{ form.module }} | {{ form.name }}
-              <dict-tag
-                :type="DICT_TYPE.SYSTEM_OPERATE_TYPE"
-                :value="form.type"
-              />
-              <br />
-              {{ form.content }} <br />
-              {{ form.exts }}
+              <dict-tag :type="DICT_TYPE.SYSTEM_OPERATE_TYPE" :value="form.type"/>
+              <br /> {{ form.content }}
+              <br /> {{ form.exts }}
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="请求信息："
-              >{{ form.requestMethod }} | {{ form.requestUrl }}
-            </el-form-item>
+            <el-form-item label="请求信息：">{{ form.requestMethod }} | {{ form.requestUrl }} </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="方法名：">{{ form.javaMethod }}</el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="方法参数：">{{
-              form.javaMethodArgs
-            }}</el-form-item>
+            <el-form-item label="方法参数：">{{ form.javaMethodArgs }}</el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item label="开始时间：">
@@ -225,12 +114,8 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="操作结果：">
-              <div v-if="form.resultCode === 0">
-                正常 | {{ form.resultData }}
-              </div>
-              <div v-else-if="form.resultCode > 0">
-                失败 | {{ form.resultCode }} || {{ form.resultMsg }}
-              </div>
+              <div v-if="form.resultCode === 0">正常 | {{ form.resultData}} </div>
+              <div v-else-if="form.resultCode > 0">失败 | {{ form.resultCode }} || {{ form.resultMsg}}</div>
             </el-form-item>
           </el-col>
         </el-row>
@@ -244,100 +129,11 @@
 
 <script>
 import { listOperateLog, exportOperateLog } from "@/api/system/operatelog";
-import tableHeightMixin from "@/mixins/tableHeightMixin";
-const tableProps = [
-  {
-    prop: "code",
-    label: "角色编码",
-    minWidth: 140,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "name",
-    label: "角色名称",
-    minWidth: 140,
-    showOverflowtooltip: true,
-  },
-  // {
-  //   prop: "status",
-  //   label: "状态",
-  //   minWidth: 100,
-  //   subcomponent: statusBtn,
-  // },
-  {
-    prop: "remark",
-    label: "角色描述",
-    minWidth: 140,
-    showOverflowtooltip: true,
-  },
-];
+
 export default {
   name: "SystemOperateLog",
-  mixins: [tableHeightMixin],
   data() {
     return {
-      formConfig: [
-        {
-          type: "input",
-          label: "系统模块",
-          placeholder: "系统模块",
-          param: "module",
-        },
-        {
-          type: "input",
-          label: "操作人员",
-          placeholder: "操作人员",
-          param: "userNickname",
-        },
-        {
-          type: "select",
-          label: "类型",
-          selectOptions: this.getDictDatas(this.DICT_TYPE.SYSTEM_OPERATE_TYPE),
-          labelField: "label",
-          valueField: "value",
-          param: "type",
-        },
-        {
-          type: "select",
-          label: "状态",
-          selectOptions: [
-            { id: true, name: "成功" },
-            { id: false, name: "失败" },
-          ],
-          param: "success",
-        },
-        {
-          type: "datePicker",
-          label: "操作时间",
-          dateType: "daterange",
-          format: "yyyy-MM-dd",
-          valueFormat: "yyyy-MM-dd HH:mm:ss",
-          rangeSeparator: "-",
-          startPlaceholder: "开始日期",
-          endPlaceholder: "结束日期",
-          param: "startTime",
-          defaultSelect: [],
-          defaultTime: ["00:00:00", "23:59:59"],
-          width: 250,
-        },
-        {
-          type: "button",
-          btnName: "查询",
-          name: "search",
-          color: "primary",
-        },
-        {
-          type: "separate",
-        },
-        {
-          type: "button",
-          btnName: "导出",
-          name: "export",
-          color: "primary",
-          plain: true,
-        },
-      ],
-      tableProps,
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -348,12 +144,6 @@ export default {
       total: 0,
       // 表格数据
       list: [],
-      tableBtn: [
-        {
-          type: "detail",
-          btnName: "详情",
-        },
-      ],
       // 是否显示弹出层
       open: false,
       // 类型数据字典
@@ -363,12 +153,12 @@ export default {
       // 查询参数
       queryParams: {
         pageNo: 1,
-        pageSize: 20,
+        pageSize: 10,
         module: undefined,
         userNickname: undefined,
         businessType: undefined,
-        success: undefined,
-        startTime: [],
+        status: undefined,
+        startTime: []
       },
     };
   },
@@ -379,11 +169,12 @@ export default {
     /** 查询登录日志 */
     getList() {
       this.loading = true;
-      listOperateLog(this.queryParams).then((response) => {
-        this.list = response.data.list;
-        this.total = response.data.total;
-        this.loading = false;
-      });
+      listOperateLog(this.queryParams).then( response => {
+          this.list = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -402,46 +193,19 @@ export default {
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.$modal
-        .confirm("是否确认导出所有操作日志数据项?")
-        .then(() => {
+      this.$modal.confirm('是否确认导出所有操作日志数据项?').then(() => {
           // 处理查询参数
-          let params = { ...this.queryParams };
+          let params = {...this.queryParams};
           params.pageNo = undefined;
           params.pageSize = undefined;
           this.exportLoading = true;
           return exportOperateLog(params);
-        })
-        .then((response) => {
-          this.$download.excel(response, "操作日志.xls");
+        }).then(response => {
+          this.$download.excel(response, '操作日志.xls');
           this.exportLoading = false;
-        })
-        .catch(() => {});
-    },
-    buttonClick(val) {
-      if (val.btnName === "search") {
-        this.queryParams.module = val.module;
-        this.queryParams.userNickname = val.userNickname;
-        this.queryParams.type = val.type;
-        this.queryParams.success = val.success;
-        this.queryParams.startTime = val.startTime;
-        this.getList();
-      } else {
-        this.handleExport();
-      }
-    },
-    handleClick(val) {
-      this.handleView(val.data);
-    },
-  },
+      }).catch(() => {});
+    }
+  }
 };
 </script>
-<style lang="scss" scoped>
-.app-container {
-  width: 100%;
-  height: calc(100vh - 120px - 8px);
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 8px;
-}
-</style>
+

src/views/system/post/components/InPageLeftNav.vue

@@ -1,445 +0,0 @@
-<template>
-  <div class="in-page-left-nav" style="overflow: hidden">
-    <div
-      class="factory-list__selector"
-      style="margin: 20px 12px"
-      title="株洲中建材光电材料有限公司"
-      @mouseenter="factoryListOpen = true"
-      @mouseleave="factoryListOpen = false"
-    >
-      <img src="./../assets/images/arrow.png" class="arrow" alt="" />
-      <div class="factory-list__content">{{ currentFactory.label }}</div>
-      <div class="factory-list__wrapper" :class="{ open: factoryListOpen }">
-        <ul
-          class="factory-list"
-          v-if="sidebarContent.length"
-          @click.capture="factoryClickHandler"
-        >
-          <li
-            v-for="fc in sidebarContent"
-            :key="fc.id"
-            class="factory-list__item"
-            :class="{ 'is-current': fc.id == currentFactory?.id }"
-          >
-            <span :data-value="fc.id">
-              {{ fc.label }}
-            </span>
-            <svg-icon
-              v-if="fc.id == currentFactory?.id"
-              icon-class="Confirm"
-              style="height: 14px; width: 14px"
-            />
-          </li>
-        </ul>
-        <div v-else style="color: #0008; width: 128px; text-align: center">
-          - 无 -
-        </div>
-      </div>
-    </div>
-    <!-- side bar  -->
-    <div class="side-bar__left" style="width: 100%; height: 100%">
-      <!-- <el-tree
-        class="custom-tree-class"
-        :data="currentFactory?.children"
-        :props="treeProps"
-        :empty-text="''"
-        icon-class="custom-icon-class"
-        @node-click="handleSidebarItemClick"
-      >
-      </el-tree> -->
-      <el-menu
-        default-active="2"
-        class="el-menu-vertical-demo"
-        @open="handleOpen"
-        @close="handleClose"
-      >
-        <el-submenu index="1">
-          <template slot="title">
-            <svg-icon
-              style="
-                font-size: 18px;
-                margin-right: 10px;
-                vertical-align: middle;
-              "
-              icon-class="orgTreeIcon"
-            />
-            <span>导航一</span>
-          </template>
-          <el-menu-item index="1-1"
-            ><svg-icon
-              style="
-                font-size: 18px;
-                margin-right: 10px;
-                vertical-align: middle;
-              "
-              icon-class="orgTreeIcon2"
-            />选项1</el-menu-item
-          >
-          <el-menu-item index="1-2"
-            ><svg-icon
-              style="
-                font-size: 18px;
-                margin-right: 10px;
-                vertical-align: middle;
-              "
-              icon-class="orgTreeIcon2"
-            />选项2</el-menu-item
-          >
-          <el-menu-item index="1-3"
-            ><svg-icon
-              style="
-                font-size: 18px;
-                margin-right: 10px;
-                vertical-align: middle;
-              "
-              icon-class="orgTreeIcon2"
-            />选项3</el-menu-item
-          >
-          <el-submenu index="1-4">
-            <template slot="title">
-              <svg-icon
-                style="
-                  font-size: 18px;
-                  margin-right: 10px;
-                  vertical-align: middle;
-                "
-                icon-class="orgTreeIcon"
-              />选项4</template
-            >
-            <el-menu-item index="1-4-1">
-              <svg-icon
-                style="
-                  font-size: 18px;
-                  margin-right: 10px;
-                  vertical-align: middle;
-                "
-                icon-class="orgTreeIcon2"
-              />选项1</el-menu-item
-            >
-          </el-submenu>
-        </el-submenu>
-        <el-menu-item index="2">
-          <svg-icon
-            style="font-size: 18px; margin-right: 10px; vertical-align: middle"
-            icon-class="orgTreeIcon"
-          />
-          <span slot="title">导航二</span>
-        </el-menu-item>
-      </el-menu>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "InpageLeftNav",
-  components: {},
-  props: {},
-  data() {
-    return {
-      factoryListOpen: false,
-      currentFactory: {
-        label: "点我选择设备",
-        id: null,
-        children: [],
-      },
-      treeProps: {
-        children: "children",
-        label: "label",
-      },
-      sidebarContent: [
-        {
-          id: 1,
-          label: "招商局",
-          children: [
-            {
-              label: "招商局地产",
-              children: [
-                {
-                  label: 1,
-                },
-              ],
-            },
-            {
-              label: "招商局商业",
-            },
-            {
-              label: "招商局物流",
-            },
-          ],
-        },
-        {
-          id: 2,
-          label: "株洲中建材光电材料有限公司",
-          children: [
-            {
-              label: "保利地产",
-            },
-            {
-              label: "保利投资",
-            },
-          ],
-        },
-        {
-          id: 3,
-          label: "中国建材集团",
-          children: [
-            {
-              label: "凯盛集团",
-            },
-            {
-              label: "蚌埠研究院",
-            },
-          ],
-        },
-      ],
-      queryParams: {
-        equipmentId: null,
-        lineId: null,
-        sectionId: null,
-        productId: null,
-      },
-    };
-  },
-  computed: {},
-  methods: {
-    /** 暴露给外部，用于更新sidebarContent */
-    async updateSidebarContent(id, url) {
-      // TODO
-      const { code, data } = await this.$axios({
-        url: (url || "/api/quality/deviceParameters") + `/${id}`,
-        method: "get",
-      });
-      if (code === 0) {
-        this.getTree(data);
-      }
-    },
-    /** 点击工厂名称 */
-    factoryClickHandler(event) {
-      this.currentFactory = {
-        label: "加载中...",
-        id: null,
-        children: [],
-      };
-      this.factoryListOpen = false;
-      const fcId = event.target.dataset.value;
-      this.handleSidebarItemClick({ id: fcId, type: "工厂" });
-      this.currentFactory = this.sidebarContent.find((item) => item.id == fcId);
-    },
-    /** 点击某一具体工厂或产线，或工段或设备 */
-    handleSidebarItemClick({ label, id, type }) {
-      this.equipmentId = id;
-      console.log("label clicked!", label, id, type);
-      switch (type) {
-        case "设备":
-          this.queryParams.equipmentId = id;
-          break;
-        case "工段":
-          this.queryParams.equipmentId = null;
-          this.queryParams.sectionId = id;
-          break;
-        case "产线":
-          this.queryParams.equipmentId = null;
-          this.queryParams.sectionId = null;
-          this.queryParams.lineId = id;
-          break;
-        case "工厂":
-          this.queryParams.equipmentId = null;
-          this.queryParams.sectionId = null;
-          this.queryParams.lineId = null;
-          break;
-      }
-    },
-    buildTree(data) {
-      data.forEach((factory) => {
-        this.$set(factory, "label", factory.name);
-        this.$set(factory, "type", "工厂");
-        delete factory.name;
-        factory.children?.forEach((line) => {
-          this.$set(line, "label", line.name);
-          this.$set(line, "type", "产线");
-          delete line.name;
-          line.children?.forEach((ws) => {
-            this.$set(ws, "label", ws.name);
-            this.$set(ws, "type", "工段");
-            delete ws.name;
-            ws.children?.forEach((eq) => {
-              this.$set(eq, "label", eq.name);
-              this.$set(eq, "type", "设备");
-              delete eq.name;
-            });
-          });
-        });
-      });
-    },
-
-    async getTree(data) {
-      // '@/api/quality/deviceParameters'
-      // const res = await getTreeData({ id: id });
-      this.buildTree(data);
-      this.sidebarContent = data;
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.in-page-left-nav {
-  display: inline-block;
-  background: #fff;
-  height: calc(100vh - 120px - 8px);
-  width: 256px;
-  border-radius: 8px;
-  padding: 0;
-  vertical-align: top;
-}
-
-.factory-list__selector {
-  position: relative;
-  height: 36px;
-  font-size: 16px;
-  line-height: 36px;
-  padding-left: 28px;
-  background: url(../assets/images/factory-icon.png) 0px 4px no-repeat;
-  background-size: 26px 26px;
-  padding-right: 16px;
-  .arrow {
-    position: absolute;
-    right: 0;
-    top: 13px;
-  }
-}
-
-.factory-list__selector:hover {
-  cursor: pointer;
-  color: #0008;
-}
-
-.factory-list__selector::after {
-  /* content: ''; */
-  position: absolute;
-  top: 16px;
-  right: 12px;
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  /* background: #5c5c5c; */
-  border-color: #000;
-  border-width: 4px;
-  border-style: solid;
-  border-top-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-}
-
-.factory-list__selector:hover::after {
-  /* cursor: pointer; */
-  border-left-color: #0008;
-}
-.factory-list__content {
-  height: 36px;
-  overflow: hidden; /* 确保超出容器的内容会被隐藏 */
-  white-space: nowrap; /* 防止文本自动换行 */
-  text-overflow: ellipsis; /* 使用省略号表示文本被截断 */
-}
-.factory-list__wrapper {
-  visibility: hidden;
-  position: absolute;
-  background: #fff;
-  box-shadow: 0 0 32px 10px #0002;
-  border-radius: 8px;
-  top: 36px;
-  // left: 90px;
-  /* max-width: 128px; */
-  height: auto;
-  width: 200px;
-  white-space: nowrap;
-  overflow: hidden;
-  /* transition: all 0.3s ease-out; */
-  z-index: 1000;
-}
-
-.factory-list__wrapper.open {
-  visibility: visible;
-}
-
-ul,
-li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.factory-list {
-  color: #0008;
-  max-height: 240px;
-  overflow-y: auto;
-}
-
-.factory-list__item {
-  font-size: 16px;
-  line-height: 1;
-  padding: 8px 16px 8px 16px;
-  min-width: 128px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.factory-list__item:hover,
-.factory-list__item.is-current {
-  background: #e3efff;
-  color: #0b58ff;
-}
-
-/* .factory-list__item.is-current::after {
-	content: '√';
-	position: absolute;
-	top: 8px;
-	right: 16px;
-	font-weight: bold;
-} */
-</style>
-
-<style>
-.custom-tree-class .el-tree-node__content {
-  width: 100%;
-  height: auto !important;
-  padding: 8px 12px !important;
-}
-
-.custom-tree-class .el-tree-node__content:hover {
-  background: #e3efff;
-}
-
-.custom-tree-class .el-tree-node__children .el-tree-node__content {
-  padding: 8px 18px !important;
-}
-
-.custom-tree-class
-  .el-tree-node__children
-  .el-tree-node__children
-  .el-tree-node__content {
-  padding: 8px 24px !important;
-}
-
-.custom-icon-class {
-  margin-right: 8px;
-  width: 20px;
-  height: 20px;
-  background: url("../assets/images/Qian.png") center center / contain no-repeat;
-}
-
-.custom-icon-class.el-tree-node__expand-icon.expanded {
-  transform: unset;
-}
-
-.el-tree-node__children .custom-icon-class {
-  background: url("../assets/images/tree-icon-2.png") 100% / contain no-repeat;
-}
-
-.el-tree-node__children .el-tree-node__children .custom-icon-class {
-  background: unset;
-}
-</style>

src/views/system/post/components/SearchBarTop.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="search-bar-top">
-    <el-form :inline="true">
-      <span class="blue-block"></span>
-      <span class="org-name">组织名称</span>
-      <el-form-item label="用户名">
-        <el-input placeholder="用户名" size="small"></el-input>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" size="small" @click="onSearch"
-          >查询</el-button
-        >
-        <span class="separateStyle"></span>
-        <el-button type="success" size="small" plain @click="addNew"
-          >新增</el-button
-        >
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-<script>
-export default {
-  name: "SearchBarTop",
-  data() {
-    return {
-      userName: "",
-    };
-  },
-  mounted() {},
-  methods: {
-    onSearch() {
-      console.log("查询");
-      this.$emit("emitFun", { btn: "onSearch", userName: this.userName });
-    },
-    addNew() {
-      console.log("新增");
-      this.$emit("emitFun", { btn: "addNew" });
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.search-bar-top {
-  font-size: 14px;
-  .blue-block {
-    display: inline-block;
-    width: 4px;
-    height: 15px;
-    background-color: #0b58ff;
-    border-radius: 1px;
-    margin-right: 8px;
-    vertical-align: middle;
-  }
-  .org-name {
-    display: inline-block;
-    height: 36px;
-    line-height: 36px;
-    margin-right: 10px;
-    font-size: 14px;
-    color: #606266;
-    font-weight: 700;
-  }
-  .el-form--inline .el-form-item {
-    display: inline-block;
-    margin-right: 10px;
-    vertical-align: top;
-    margin-bottom: 16px;
-  }
-  .separateStyle {
-    display: inline-block;
-    width: 1px;
-    height: 24px;
-    background: #e8e8e8;
-    vertical-align: middle;
-    margin: 0 8px;
-  }
-}
-</style>

src/views/system/post/index2.vue

@@ -1,162 +0,0 @@
-<template>
-  <div class="user-manager">
-    <InPageLeftNav />
-    <div
-      class="table-area"
-      :class="{
-        'table-area-w': sidebar.opened,
-        'table-area-ws': !sidebar.opened,
-      }"
-    >
-      <SearchBarTop @emitFun="emitFun" />
-      <!-- 列表 -->
-      <base-table
-        :page="queryParams.pageNo"
-        :limit="queryParams.pageSize"
-        :table-props="tableProps"
-        :table-data="list"
-        :max-height="tableH"
-      >
-        <method-btn
-          v-if="tableBtn.length"
-          slot="handleBtn"
-          :width="120"
-          label="操作"
-          :method-list="tableBtn"
-          @clickBtn="handleClick"
-        />
-      </base-table>
-      <pagination
-        :page.sync="queryParams.pageNo"
-        :limit.sync="queryParams.pageSize"
-        :total="total"
-        @pagination="getList"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-import InPageLeftNav from "./components/InPageLeftNav";
-import SearchBarTop from "./components/SearchBarTop";
-import tableHeightMixin from "@/mixins/tableHeightMixin";
-import { listUser } from "@/api/system/user";
-const tableProps = [
-  {
-    prop: "username",
-    label: "用户名",
-    minWidth: 120,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "email",
-    label: "邮箱",
-    minWidth: 150,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "mobile",
-    label: "手机号",
-    minWidth: 120,
-  },
-  {
-    prop: "deptName",
-    label: "组织",
-    minWidth: 120,
-  },
-  {
-    prop: "role",
-    label: "角色名称",
-  },
-  {
-    prop: "workno",
-    label: "工号",
-  },
-  {
-    prop: "status",
-    label: "状态",
-  },
-  {
-    prop: "remark",
-    label: "备注",
-    showOverflowtooltip: true,
-  },
-];
-export default {
-  name: "SystemPost",
-  components: { InPageLeftNav, SearchBarTop },
-  mixins: [tableHeightMixin],
-  computed: {
-    ...mapGetters(["sidebar"]),
-  },
-  data() {
-    return {
-      // 查询参数
-      queryParams: {
-        pageNo: 1,
-        pageSize: 20,
-        name: null,
-        status: null,
-        planFinishTime: [],
-      },
-      total: 0,
-      tableProps,
-      list: [{ username: "111" }],
-      tableBtn: [
-        {
-          type: "authorization",
-          btnName: "授权",
-        },
-        {
-          type: "edit",
-          btnName: "编辑",
-        },
-        {
-          type: "delete",
-          btnName: "删除",
-        },
-      ],
-    };
-  },
-  created() {
-    this.getList();
-  },
-  methods: {
-    /** 查询用户列表 */
-    getList() {
-      listUser(this.queryParams).then((response) => {
-        this.list = response.data.list;
-        this.total = response.data.total;
-      });
-    },
-    emitFun(val) {
-      if (val.btn === "onSearch") {
-        this.queryParams.pageNo = 1;
-        this.getList();
-      } else {
-      }
-    },
-    handleClick() {},
-  },
-};
-</script>
-<style lang="scss" scoped>
-.user-manager {
-  display: flex;
-  .table-area {
-    display: inline-block;
-    height: calc(100vh - 120px - 8px);
-    background-color: #fff;
-    margin-left: 8px;
-    border-radius: 8px;
-    padding: 8px;
-  }
-  .table-area-w {
-    width: calc(100vw - 542px);
-  }
-  .table-area-ws {
-    width: calc(100vw - 348px);
-  }
-}
-</style>

src/views/system/role/components/dataAuth.vue

@@ -1,162 +0,0 @@
-<template>
-  <el-form :model="form" label-width="80px">
-    <el-form-item label="角色名称">
-      <el-input v-model="form.name" :disabled="true" />
-    </el-form-item>
-    <el-form-item label="角色标识">
-      <el-input v-model="form.code" :disabled="true" />
-    </el-form-item>
-    <el-form-item label="权限范围">
-      <el-select v-model="form.dataScope" style="width: 100%">
-        <el-option
-          v-for="item in dataScopeDictDatas"
-          :key="parseInt(item.value)"
-          :label="item.label"
-          :value="parseInt(item.value)"
-        ></el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item
-      label="数据权限"
-      v-show="form.dataScope === SysDataScopeEnum.DEPT_CUSTOM"
-    >
-      <el-checkbox
-        :checked="!form.deptCheckStrictly"
-        @change="handleCheckedTreeConnect($event, 'dept')"
-        >父子联动(选中父节点，自动选择子节点)</el-checkbox
-      >
-      <el-checkbox
-        v-model="deptExpand"
-        @change="handleCheckedTreeExpand($event, 'dept')"
-        >展开/折叠</el-checkbox
-      >
-      <el-checkbox
-        v-model="deptNodeAll"
-        @change="handleCheckedTreeNodeAll($event, 'dept')"
-        >全选/全不选</el-checkbox
-      >
-      <el-tree
-        class="tree-border"
-        :data="deptOptions"
-        show-checkbox
-        default-expand-all
-        ref="dept"
-        node-key="id"
-        :check-strictly="form.deptCheckStrictly"
-        empty-text="加载中，请稍后"
-        :props="defaultProps"
-      ></el-tree>
-    </el-form-item>
-  </el-form>
-</template>
-<script>
-import { SystemDataScopeEnum } from "@/utils/constants";
-import { getRole } from "@/api/system/role";
-import { listSimpleDepts } from "@/api/system/dept";
-import { DICT_TYPE, getDictDatas } from "@/utils/dict";
-import { assignRoleDataScope } from "@/api/system/permission";
-export default {
-  name: "DataAuth",
-  data() {
-    return {
-      form: {
-        id: undefined,
-        name: undefined,
-        code: undefined,
-        deptIds: [],
-        dataScope: undefined,
-        deptCheckStrictly: false,
-      },
-      deptExpand: true,
-      deptNodeAll: false,
-      // 部门列表
-      deptOptions: [], // 部门属性结构
-      depts: [], // 部门列表
-      defaultProps: {
-        label: "name",
-        children: "children",
-      },
-      // 枚举
-      SysDataScopeEnum: SystemDataScopeEnum,
-      // 数据字典
-      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE),
-    };
-  },
-  methods: {
-    init(id) {
-      this.form.id = id;
-      getRole(id).then((res) => {
-        this.form.name = res.data.name;
-        this.form.code = res.data.code;
-        this.form.dataScope = res.data.dataScope;
-        // 获得部门列表
-        listSimpleDepts().then((response) => {
-          // 处理 deptOptions 参数
-          this.deptOptions = [];
-          this.deptOptions.push(...this.handleTree(response.data, "id"));
-          this.depts = response.data;
-          this.$refs.dept.setCheckedKeys(res.data.dataScopeDeptIds, false);
-        });
-      });
-    },
-    submitForm() {
-      if (this.form.id !== undefined) {
-        assignRoleDataScope({
-          roleId: this.form.id,
-          dataScope: this.form.dataScope,
-          dataScopeDeptIds:
-            this.form.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM
-              ? []
-              : this.$refs.dept.getCheckedKeys(),
-        }).then((response) => {
-          this.$modal.msgSuccess("修改成功");
-          this.$emit("successSubmitd");
-        });
-      }
-    },
-    formClear() {
-      this.deptExpand = true;
-      this.deptNodeAll = false;
-      this.form = {
-        id: undefined,
-        name: undefined,
-        code: undefined,
-        deptIds: [],
-        dataScope: undefined,
-        deptCheckStrictly: false,
-      };
-    },
-    // 树权限（父子联动）
-    handleCheckedTreeConnect(value, type) {
-      if (type === "menu") {
-        this.form.menuCheckStrictly = value;
-      } else if (type === "dept") {
-        this.form.deptCheckStrictly = !value;
-      }
-    },
-    // 树权限（展开/折叠）
-    handleCheckedTreeExpand(value, type) {
-      if (type === "menu") {
-        let treeList = this.menuOptions;
-        for (let i = 0; i < treeList.length; i++) {
-          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
-        }
-      } else if (type === "dept") {
-        let treeList = this.deptOptions;
-        for (let i = 0; i < treeList.length; i++) {
-          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
-        }
-      }
-    },
-    // 树权限（全选/全不选）
-    handleCheckedTreeNodeAll(value, type) {
-      if (type === "menu") {
-        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
-      } else if (type === "dept") {
-        // this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
-        this.$refs.dept.setCheckedNodes(value ? this.depts : []);
-      }
-    },
-  },
-};
-</script>

src/views/system/role/components/menuAuth.vue

@@ -1,146 +0,0 @@
-<template>
-  <el-form :model="form" label-width="80px">
-    <el-form-item label="角色名称">
-      <el-input v-model="form.name" :disabled="true" />
-    </el-form-item>
-    <el-form-item label="角色标识">
-      <el-input v-model="form.code" :disabled="true" />
-    </el-form-item>
-    <el-form-item label="菜单权限">
-      <el-checkbox
-        v-model="menuExpand"
-        @change="handleCheckedTreeExpand($event, 'menu')"
-        >展开/折叠</el-checkbox
-      >
-      <el-checkbox
-        v-model="menuNodeAll"
-        @change="handleCheckedTreeNodeAll($event, 'menu')"
-        >全选/全不选</el-checkbox
-      >
-      <el-tree
-        class="tree-border"
-        :data="menuOptions"
-        show-checkbox
-        ref="menu"
-        node-key="id"
-        :check-strictly="form.menuCheckStrictly"
-        empty-text="加载中，请稍后"
-        :props="defaultProps"
-      ></el-tree>
-    </el-form-item>
-  </el-form>
-</template>
-<script>
-import { getRole } from "@/api/system/role";
-import { SystemDataScopeEnum } from "@/utils/constants";
-import { assignRoleMenu, listRoleMenus } from "@/api/system/permission";
-import { DICT_TYPE, getDictDatas } from "@/utils/dict";
-import { listSimpleMenus } from "@/api/system/menu";
-export default {
-  name: "MenuAuth",
-  data() {
-    return {
-      form: {
-        id: undefined,
-        name: undefined,
-        code: undefined,
-        menuIds: [],
-        menuCheckStrictly: true,
-      },
-      // 菜单列表
-      menuOptions: [],
-      menuExpand: false,
-      menuNodeAll: false,
-      SysDataScopeEnum: SystemDataScopeEnum,
-      // 数据字典
-      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE),
-      defaultProps: {
-        label: "name",
-        children: "children",
-      },
-    };
-  },
-  methods: {
-    init(id) {
-      this.form.id = id;
-      getRole(id).then((res) => {
-        this.form.name = res.data.name;
-        this.form.code = res.data.code;
-        listSimpleMenus().then((response) => {
-          // 处理 menuOptions 参数
-          this.menuOptions = [];
-          this.menuOptions.push(...this.handleTree(response.data, "id"));
-          // 获取角色拥有的菜单权限
-          listRoleMenus(id).then((response) => {
-            // 设置为严格，避免设置父节点自动选中子节点，解决半选中问题
-            this.form.menuCheckStrictly = true;
-            // 设置选中
-            this.$refs.menu.setCheckedKeys(response.data);
-            // 设置为非严格，继续使用半选中
-            this.form.menuCheckStrictly = false;
-          });
-        });
-      });
-    },
-    submitForm() {
-      if (this.form.id !== undefined) {
-        assignRoleMenu({
-          roleId: this.form.id,
-          menuIds: [
-            ...this.$refs.menu.getCheckedKeys(),
-            ...this.$refs.menu.getHalfCheckedKeys(),
-          ],
-        }).then((response) => {
-          this.$modal.msgSuccess("修改成功");
-          this.$emit("successSubmitm");
-        });
-      }
-    },
-    formClear() {
-      if (this.$refs.menu !== undefined) {
-        this.$refs.menu.setCheckedKeys([]);
-      }
-      this.menuExpand = false;
-      this.menuNodeAll = false;
-      this.form = {
-        id: undefined,
-        name: undefined,
-        code: undefined,
-        menuIds: [],
-        menuCheckStrictly: true,
-      };
-    },
-    // 树权限（父子联动）
-    handleCheckedTreeConnect(value, type) {
-      if (type === "menu") {
-        this.form.menuCheckStrictly = value;
-      } else if (type === "dept") {
-        this.form.deptCheckStrictly = !value;
-      }
-    },
-    // 树权限（展开/折叠）
-    handleCheckedTreeExpand(value, type) {
-      if (type === "menu") {
-        let treeList = this.menuOptions;
-        for (let i = 0; i < treeList.length; i++) {
-          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
-        }
-      } else if (type === "dept") {
-        let treeList = this.deptOptions;
-        for (let i = 0; i < treeList.length; i++) {
-          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
-        }
-      }
-    },
-    // 树权限（全选/全不选）
-    handleCheckedTreeNodeAll(value, type) {
-      if (type === "menu") {
-        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : []);
-      } else if (type === "dept") {
-        // this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
-        this.$refs.dept.setCheckedNodes(value ? this.depts : []);
-      }
-    },
-  },
-};
-</script>

src/views/system/role/components/roleAdd.vue

@@ -1,129 +0,0 @@
-<template>
-  <el-form ref="form" :rules="rules" label-width="100px" :model="form">
-    <el-row>
-      <el-col :span="24">
-        <el-form-item label="角色编码" prop="code">
-          <el-input v-model="form.code"></el-input>
-        </el-form-item>
-      </el-col>
-      <el-col :span="24">
-        <el-form-item label="角色名称" prop="name">
-          <el-input v-model="form.name"></el-input>
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="12">
-        <el-form-item label="角色顺序" prop="sort">
-          <el-input-number
-            v-model="form.sort"
-            controls-position="right"
-            :min="1"
-            :max="999999999"
-            style="width: 100%"
-          ></el-input-number>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="状态" prop="status" v-if="isEdit">
-          <el-switch v-model="form.status"> </el-switch>
-        </el-form-item>
-      </el-col>
-      <el-col :span="24">
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark"></el-input>
-        </el-form-item>
-      </el-col>
-    </el-row>
-  </el-form>
-</template>
-<script>
-import { addRole, getRole, updateRole } from "@/api/system/role";
-export default {
-  name: "RoleAdd",
-  data() {
-    return {
-      form: {
-        id: "",
-        code: "",
-        name: "",
-        sort: 1,
-        status: 0,
-        remark: "",
-      },
-      isEdit: false, //是否是编辑
-      rules: {
-        code: [
-          { required: true, message: "角色编码不能为空", trigger: "blur" },
-        ],
-        name: [
-          { required: true, message: "角色名称不能为空", trigger: "blur" },
-        ],
-        sort: [{ required: true }],
-      },
-    };
-  },
-  methods: {
-    init(id) {
-      if (id) {
-        this.isEdit = true;
-        this.form.id = id;
-        getRole(id).then((res) => {
-          if (res.code === 0) {
-            this.form.id = res.data.id;
-            this.form.code = res.data.code;
-            this.form.name = res.data.name;
-            this.form.sort = res.data.sort;
-            this.form.remark = res.data.remark;
-            this.form.status = res.data.status ? false : true;
-          }
-        });
-      } else {
-        this.isEdit = false;
-        this.form.id = "";
-      }
-    },
-    submitForm() {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          if (this.isEdit) {
-            //编辑
-            updateRole({
-              id: this.form.id,
-              code: this.form.code,
-              name: this.form.name,
-              sort: this.form.sort,
-              remark: this.form.remark,
-              status: this.form.status ? 0 : 1,
-            }).then((res) => {
-              if (res.code === 0) {
-                this.$modal.msgSuccess("操作成功");
-                this.$emit("successSubmit");
-              }
-            });
-          } else {
-            addRole({
-              code: this.form.code,
-              name: this.form.name,
-              sort: this.form.sort,
-              remark: this.form.remark,
-              status: 0,
-            }).then((res) => {
-              if (res.code === 0) {
-                this.$modal.msgSuccess("操作成功");
-                this.$emit("successSubmit");
-              }
-            });
-          }
-        } else {
-          return false;
-        }
-      });
-    },
-    formClear() {
-      this.$refs.form.resetFields();
-      this.isEdit = false;
-    },
-  },
-};
-</script>

src/views/system/role/index.vue

@@ -1,174 +1,250 @@
 <template>
   <div class="app-container">
-    <!-- <doc-alert
-      title="功能权限"
-      url="https://doc.iocoder.cn/resource-permission"
-    />
-    <doc-alert title="数据权限" url="https://doc.iocoder.cn/data-permission" /> -->
-    <!-- 搜索工作栏 -->
-    <search-bar
-      :formConfigs="formConfig"
-      ref="searchBarForm"
-      @headBtnClick="buttonClick"
-    />
-    <!-- 列表 -->
-    <base-table
-      :page="queryParams.pageNo"
-      :limit="queryParams.pageSize"
-      :table-props="tableProps"
-      :table-data="list"
-      :max-height="tableH"
-    >
-      <method-btn
-        v-if="tableBtn.length"
-        slot="handleBtn"
-        :width="230"
-        label="操作"
-        :method-list="tableBtn"
-        @clickBtn="handleClick"
-      />
-    </base-table>
-    <pagination
-      :page.sync="queryParams.pageNo"
-      :limit.sync="queryParams.pageSize"
-      :total="total"
-      @pagination="getList"
-    />
+    <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission" />
+    <doc-alert title="数据权限" url="https://doc.iocoder.cn/data-permission" />
+    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
+      <el-form-item label="角色名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入角色名称" clearable size="small" style="width: 240px"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="角色标识" prop="code">
+        <el-input v-model="queryParams.code" placeholder="请输入角色标识" clearable size="small" style="width: 240px"
+                  @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="角色状态" clearable size="small" style="width: 240px">
+          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
 
-    <!-- 新增&编辑 -->
-    <base-dialog
-      :dialogTitle="addOrEditTitle"
-      :dialogVisible="centervisible"
-      @cancel="handleCancel"
-      @confirm="handleConfirm"
-      :before-close="handleCancel"
-      width="50%"
-    >
-      <role-add ref="roleAdd" @successSubmit="successSubmit" />
-    </base-dialog>
-    <!-- 菜单权限 -->
-    <base-dialog
-      dialogTitle="分配菜单权限"
-      :dialogVisible="menuVisible"
-      @cancel="handleCancelm"
-      @confirm="handleConfirmm"
-      :before-close="handleCancelm"
-      width="50%"
-    >
-      <menu-auth ref="menuAuth" @successSubmitm="successSubmitm" />
-    </base-dialog>
-    <!-- 数据权限 -->
-    <base-dialog
-      dialogTitle="分配数据权限"
-      :dialogVisible="dataVisible"
-      @cancel="handleCanceld"
-      @confirm="handleConfirmd"
-      :before-close="handleCanceld"
-      width="50%"
-    >
-      <data-auth ref="dataAuth" @successSubmitd="successSubmitd" />
-    </base-dialog>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                   v-hasPermi="['system:role:create']">新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                   v-hasPermi="['system:role:export']">导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="roleList">
+      <el-table-column label="角色编号" prop="id" width="120" />
+      <el-table-column label="角色名称" prop="name" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="角色标识" prop="code" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="角色类型" prop="type" width="80">
+        <template v-slot="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_ROLE_TYPE" :value="scope.row.type"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="显示顺序" prop="sort" width="100" />
+      <el-table-column label="状态" align="center" width="100">
+        <template v-slot="scope">
+          <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template v-slot="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                     v-hasPermi="['system:role:update']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleMenu(scope.row)"
+                     v-hasPermi="['system:permission:assign-role-menu']">菜单权限</el-button>
+          <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleDataScope(scope.row)"
+                     v-hasPermi="['system:permission:assign-role-data-scope']">数据权限</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+                     v-hasPermi="['system:role:delete']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                @pagination="getList"/>
+
+    <!-- 添加或修改角色配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入角色名称" />
+        </el-form-item>
+        <el-form-item label="角色标识" prop="code">
+          <el-input v-model="form.code" placeholder="请输入角色标识" />
+        </el-form-item>
+        <el-form-item label="角色顺序" prop="sort">
+          <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 分配角色的数据权限对话框 -->
+    <el-dialog title="分配数据权限" :visible.sync="openDataScope" width="500px" append-to-body>
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="角色名称">
+          <el-input v-model="form.name" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="角色标识">
+          <el-input v-model="form.code" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="权限范围">
+          <el-select v-model="form.dataScope">
+            <el-option
+              v-for="item in dataScopeDictDatas"
+              :key="parseInt(item.value)"
+              :label="item.label"
+              :value="parseInt(item.value)"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据权限" v-show="form.dataScope === SysDataScopeEnum.DEPT_CUSTOM">
+          <el-checkbox :checked="!form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动(选中父节点，自动选择子节点)</el-checkbox>
+          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+          <el-tree
+            class="tree-border"
+            :data="deptOptions"
+            show-checkbox
+            default-expand-all
+            ref="dept"
+            node-key="id"
+            :check-strictly="form.deptCheckStrictly"
+            empty-text="加载中，请稍后"
+            :props="defaultProps"
+          ></el-tree>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitDataScope">确 定</el-button>
+        <el-button @click="cancelDataScope">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 分配角色的菜单权限对话框 -->
+    <el-dialog :title="title" :visible.sync="openMenu" width="500px" append-to-body>
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="角色名称">
+          <el-input v-model="form.name" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="角色标识">
+          <el-input v-model="form.code" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="菜单权限">
+          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+          <el-tree class="tree-border" :data="menuOptions" show-checkbox ref="menu" node-key="id"
+              :check-strictly="form.menuCheckStrictly" empty-text="加载中，请稍后" :props="defaultProps"></el-tree>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitMenu">确 定</el-button>
+        <el-button @click="cancelMenu">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { delRole, listRole } from "@/api/system/role";
-import tableHeightMixin from "@/mixins/tableHeightMixin";
-import RoleAdd from "./components/roleAdd";
-import MenuAuth from "./components/menuAuth";
-import DataAuth from "./components/dataAuth";
-import statusBtn from "./../components/statusBtn.vue";
-const tableProps = [
-  {
-    prop: "code",
-    label: "角色编码",
-    minWidth: 140,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "name",
-    label: "角色名称",
-    minWidth: 140,
-    showOverflowtooltip: true,
-  },
-  {
-    prop: "status",
-    label: "状态",
-    minWidth: 100,
-    subcomponent: statusBtn,
-  },
-  {
-    prop: "remark",
-    label: "角色描述",
-    minWidth: 140,
-    showOverflowtooltip: true,
-  },
-];
+import {
+  addRole,
+  changeRoleStatus,
+  delRole,
+  exportRole,
+  getRole,
+  listRole,
+  updateRole
+} from "@/api/system/role";
+import {listSimpleMenus} from "@/api/system/menu";
+import {assignRoleMenu, listRoleMenus, assignRoleDataScope} from "@/api/system/permission";
+import {listSimpleDepts} from "@/api/system/dept";
+import {CommonStatusEnum, SystemDataScopeEnum} from "@/utils/constants";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+
 export default {
   name: "SystemRole",
-  mixins: [tableHeightMixin],
-  components: { RoleAdd, MenuAuth, DataAuth },
   data() {
     return {
-      formConfig: [
-        {
-          type: "input",
-          label: "角色名称",
-          placeholder: "角色名称",
-          param: "name",
-        },
-        {
-          type: "button",
-          btnName: "查询",
-          name: "search",
-          color: "primary",
-        },
-        {
-          type: "separate",
-        },
-        {
-          type: "button",
-          btnName: "新增",
-          name: "add",
-          color: "success",
-          plain: true,
-        },
-      ],
-      queryParams: {
-        pageNo: 1,
-        pageSize: 20,
-        name: "",
-      },
-      tableProps,
-      list: [],
-      tableBtn: [
-        {
-          type: "menuAuth",
-          btnName: "菜单权限",
-          // showTip: "新增工单",
-        },
-        {
-          type: "dataAuth",
-          btnName: "数据权限",
-          // showTip: "新增工单",
-        },
-        {
-          type: "edit",
-          btnName: "编辑",
-        },
-        {
-          type: "delete",
-          btnName: "删除",
-        },
-      ],
-      addOrEditTitle: "",
-      centervisible: false,
-      // 菜单权限
-      menuVisible: false,
-      // 数据权限
-      dataVisible: false,
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 显示搜索条件
+      showSearch: true,
       // 总条数
       total: 0,
+      // 角色表格数据
+      roleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否显示弹出层（数据权限）
+      openDataScope: false,
+      // 是否显示弹出层（菜单权限）
+      openMenu: false,
+      menuExpand: false,
+      menuNodeAll: false,
+      deptExpand: true,
+      deptNodeAll: false,
+      // 菜单列表
+      menuOptions: [],
+      // 部门列表
+      deptOptions: [], // 部门属性结构
+      depts: [], // 部门列表
+      // 查询参数
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+        name: undefined,
+        code: undefined,
+        status: undefined,
+        createTime: []
+      },
+      // 表单参数
+      form: {},
+      defaultProps: {
+        label: "name",
+        children: "children"
+      },
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "角色名称不能为空", trigger: "blur" }
+        ],
+        code: [
+          { required: true, message: "角色标识不能为空", trigger: "blur" }
+        ],
+        sort: [
+          { required: true, message: "角色顺序不能为空", trigger: "blur" }
+        ]
+      },
+
+      // 枚举
+      SysCommonStatusEnum: CommonStatusEnum,
+      SysDataScopeEnum: SystemDataScopeEnum,
+      // 数据字典
+      roleTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_ROLE_TYPE),
+      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
+      dataScopeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_DATA_SCOPE)
     };
   },
   created() {
@@ -177,109 +253,243 @@ export default {
   methods: {
     /** 查询角色列表 */
     getList() {
-      listRole(this.queryParams).then((response) => {
-        this.list = response.data.list;
-        this.total = response.data.total;
+      this.loading = true;
+      listRole(this.queryParams).then(
+        response => {
+          this.roleList = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 角色状态修改
+    handleStatusChange(row) {
+      // 此时，row 已经变成目标状态了，所以可以直接提交请求和提示
+      let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
+      this.$modal.confirm('确认要"' + text + '""' + row.name + '"角色吗?').then(function() {
+          return changeRoleStatus(row.id, row.status);
+        }).then(() => {
+          this.$modal.msgSuccess(text + "成功");
+        }).catch(function() {
+          // 异常时，需要将 row.status 状态重置回之前的
+          row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
+              : CommonStatusEnum.ENABLE;
+        });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 取消按钮（数据权限）
+    cancelDataScope() {
+      this.openDataScope = false;
+      this.reset();
+    },
+    // 取消按钮（菜单权限）
+    cancelMenu() {
+      this.openMenu = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      if (this.$refs.menu !== undefined) {
+        this.$refs.menu.setCheckedKeys([]);
+      }
+      this.menuExpand = false;
+      this.menuNodeAll = false;
+      this.deptExpand = true;
+      this.deptNodeAll = false;
+      this.form = {
+        id: undefined,
+        name: undefined,
+        code: undefined,
+        sort: 0,
+        deptIds: [],
+        menuIds: [],
+        dataScope: undefined,
+        deptCheckStrictly: false,
+        menuCheckStrictly: true,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type === 'menu') {
+        let treeList = this.menuOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      } else if (type === 'dept') {
+        let treeList = this.deptOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type === 'menu') {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
+      } else if (type === 'dept') {
+        // this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+        this.$refs.dept.setCheckedNodes(value ? this.depts: []);
+      }
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value, type) {
+      if (type === 'menu') {
+        this.form.menuCheckStrictly = value;
+      } else if (type === 'dept') {
+        this.form.deptCheckStrictly = !value;
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加角色";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id
+      getRole(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改角色";
       });
     },
-    buttonClick(val) {
-      console.log(val);
-      if (val.btnName === "search") {
-        this.queryParams.pageNo = 1;
-        this.getList();
-      } else {
-        this.addOrEditTitle = "新增";
-        this.centervisible = true;
-        this.$nextTick(() => {
-          this.$refs.roleAdd.init();
+    /** 分配菜单权限操作 */
+    handleMenu(row) {
+      this.reset();
+      const id = row.id
+      // 处理了 form 的角色 name 和 code 的展示
+      this.form.id = id;
+      this.form.name = row.name;
+      this.form.code = row.code;
+      // 打开弹窗
+      this.openMenu = true;
+      // 获得菜单列表
+      listSimpleMenus().then(response => {
+        // 处理 menuOptions 参数
+        this.menuOptions = [];
+        this.menuOptions.push(...this.handleTree(response.data, "id"));
+        // 获取角色拥有的菜单权限
+        listRoleMenus(id).then(response => {
+          // 设置为严格，避免设置父节点自动选中子节点，解决半选中问题
+          this.form.menuCheckStrictly = true
+          // 设置选中
+          this.$refs.menu.setCheckedKeys(response.data);
+          // 设置为非严格，继续使用半选中
+          this.form.menuCheckStrictly = false
+        })
+      });
+
+    },
+    /** 分配数据权限操作 */
+    handleDataScope(row) {
+      this.reset();
+      // 处理了 form 的角色 name 和 code 的展示
+      this.form.id = row.id;
+      this.form.name = row.name;
+      this.form.code = row.code;
+      // 打开弹窗
+      this.openDataScope = true;
+      // 获得部门列表
+      listSimpleDepts().then(response => {
+        // 处理 deptOptions 参数
+        this.deptOptions = [];
+        this.deptOptions.push(...this.handleTree(response.data, "id"));
+        this.depts = response.data;
+        // this.deptIds = response.data.map(x => x.id);
+        // 获得角色拥有的数据权限
+        getRole(row.id).then(response => {
+          this.form.dataScope = response.data.dataScope;
+          this.$refs.dept.setCheckedKeys(response.data.dataScopeDeptIds, false);
+        });
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id !== undefined) {
+            updateRole(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addRole(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 提交按钮（数据权限） */
+    submitDataScope: function() {
+      if (this.form.id !== undefined) {
+        assignRoleDataScope({
+          roleId: this.form.id,
+          dataScope: this.form.dataScope,
+          dataScopeDeptIds: this.form.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM ? [] :
+              this.$refs.dept.getCheckedKeys()
+        }).then(response => {
+          this.$modal.msgSuccess("修改成功");
+          this.openDataScope = false;
+          this.getList();
         });
       }
     },
-    handleClick(val) {
-      switch (val.type) {
-        case "edit":
-          this.addOrEditTitle = "编辑";
-          this.centervisible = true;
-          this.$nextTick(() => {
-            this.$refs.roleAdd.init(val.data.id);
-          });
-          break;
-        case "delete":
-          this.handleDelete(val.data);
-          break;
-        case "menuAuth":
-          this.menuVisible = true;
-          this.$nextTick(() => {
-            this.$refs.menuAuth.init(val.data.id);
-          });
-          break;
-        default:
-          this.dataVisible = true;
-          this.$nextTick(() => {
-            this.$refs.dataAuth.init(val.data.id);
-          });
+    /** 提交按钮（菜单权限） */
+    submitMenu: function() {
+      if (this.form.id !== undefined) {
+        assignRoleMenu({
+          roleId: this.form.id,
+          menuIds: [...this.$refs.menu.getCheckedKeys(), ...this.$refs.menu.getHalfCheckedKeys()]
+        }).then(response => {
+          this.$modal.msgSuccess("修改成功");
+          this.openMenu = false;
+          this.getList();
+        });
       }
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal
-        .confirm('是否确认删除角色名称为"' + row.name + '"的数据项?')
-        .then(function () {
-          return delRole(row.id);
-        })
-        .then(() => {
-          this.queryParams.pageNo = 1;
+      const ids = row.id || this.ids;
+      this.$modal.confirm('是否确认删除角色编号为"' + ids + '"的数据项?').then(function() {
+          return delRole(ids);
+        }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
-        })
-        .catch(() => {});
+      }).catch(() => {});
     },
-    // 新增取消
-    handleCancel() {
-      this.$refs.roleAdd.formClear();
-      this.centervisible = false;
-      this.addOrEditTitle = "";
-    },
-    handleConfirm() {
-      this.$refs.roleAdd.submitForm();
-    },
-    successSubmit() {
-      this.handleCancel();
-      this.getList();
-    },
-    // 菜单权限
-    handleCancelm() {
-      this.$refs.menuAuth.formClear();
-      this.menuVisible = false;
-    },
-    handleConfirmm() {
-      this.$refs.menuAuth.submitForm();
-    },
-    successSubmitm() {
-      this.handleCancelm();
-      this.getList();
-    },
-    // 数据权限
-    handleCanceld() {
-      this.$refs.dataAuth.formClear();
-      this.dataVisible = false;
-    },
-    handleConfirmd() {
-      this.$refs.dataAuth.submitForm();
-    },
-    successSubmitd() {
-      this.handleCanceld();
-      this.getList();
-    },
-  },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$modal.confirm('是否确认导出所有角色数据项?').then(function() {
+          this.exportLoading = true;
+          return exportRole(queryParams);
+        }).then(response => {
+          this.$download.excel(response, '角色数据.xls');
+          this.exportLoading = false;
+      }).catch(() => {});
+    }
+  }
 };
 </script>
-<style lang="scss" scoped>
-.app-container {
-  width: 100%;
-  height: calc(100vh - 120px - 8px);
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 8px;
-}
-</style>

src/views/system/user/index.vue

@@ -2,275 +2,99 @@
   <div class="app-container">
     <doc-alert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
     <doc-alert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
-    <doc-alert
-      title="Excel 导入导出"
-      url="https://doc.iocoder.cn/excel-import-and-export/"
-    />
+    <doc-alert title="Excel 导入导出" url="https://doc.iocoder.cn/excel-import-and-export/" />
     <!-- 搜索工作栏 -->
     <el-row :gutter="20">
       <!--部门数据-->
       <el-col :span="4" :xs="24">
         <div class="head-container">
-          <el-input
-            v-model="deptName"
-            placeholder="请输入部门名称"
-            clearable
-            size="small"
-            prefix-icon="el-icon-search"
-            style="margin-bottom: 20px"
-          />
+          <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px"/>
         </div>
         <div class="head-container">
-          <el-tree
-            :data="deptOptions"
-            :props="defaultProps"
-            :expand-on-click-node="false"
-            :filter-node-method="filterNode"
-            ref="tree"
-            default-expand-all
-            highlight-current
-            @node-click="handleNodeClick"
-          />
+          <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
+                   ref="tree" default-expand-all highlight-current @node-click="handleNodeClick"/>
         </div>
       </el-col>
       <!--用户数据-->
       <el-col :span="20" :xs="24">
-        <el-form
-          :model="queryParams"
-          ref="queryForm"
-          size="small"
-          :inline="true"
-          v-show="showSearch"
-          label-width="68px"
-        >
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
           <el-form-item label="用户名称" prop="username">
-            <el-input
-              v-model="queryParams.username"
-              placeholder="请输入用户名称"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
+            <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 240px"
+                      @keyup.enter.native="handleQuery"/>
           </el-form-item>
           <el-form-item label="手机号码" prop="mobile">
-            <el-input
-              v-model="queryParams.mobile"
-              placeholder="请输入手机号码"
-              clearable
-              style="width: 240px"
-              @keyup.enter.native="handleQuery"
-            />
+            <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 240px"
+                      @keyup.enter.native="handleQuery"/>
           </el-form-item>
           <el-form-item label="状态" prop="status">
-            <el-select
-              v-model="queryParams.status"
-              placeholder="用户状态"
-              clearable
-              style="width: 240px"
-            >
-              <el-option
-                v-for="dict in statusDictDatas"
-                :key="parseInt(dict.value)"
-                :label="dict.label"
-                :value="parseInt(dict.value)"
-              />
+            <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
+              <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
             </el-select>
           </el-form-item>
           <el-form-item label="创建时间" prop="createTime">
-            <el-date-picker
-              v-model="queryParams.createTime"
-              style="width: 240px"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              :default-time="['00:00:00', '23:59:59']"
-            />
+            <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
+              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" />
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" icon="el-icon-search" @click="handleQuery"
-              >搜索</el-button
-            >
-            <el-button icon="el-icon-refresh" @click="resetQuery"
-              >重置</el-button
-            >
+            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
 
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-              v-hasPermi="['system:user:create']"
-              >新增</el-button
-            >
+            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+                       v-hasPermi="['system:user:create']">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button
-              type="info"
-              icon="el-icon-upload2"
-              size="mini"
-              @click="handleImport"
-              v-hasPermi="['system:user:import']"
-              >导入</el-button
-            >
+            <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
+                       v-hasPermi="['system:user:import']">导入</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button
-              type="warning"
-              icon="el-icon-download"
-              size="mini"
-              @click="handleExport"
-              :loading="exportLoading"
-              v-hasPermi="['system:user:export']"
-              >导出</el-button
-            >
+            <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
+                       v-hasPermi="['system:user:export']">导出</el-button>
           </el-col>
-          <right-toolbar
-            :showSearch.sync="showSearch"
-            @queryTable="getList"
-            :columns="columns"
-          ></right-toolbar>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
         </el-row>
 
         <el-table v-loading="loading" :data="userList">
-          <el-table-column
-            label="用户编号"
-            align="center"
-            key="id"
-            prop="id"
-            v-if="columns[0].visible"
-          />
-          <el-table-column
-            label="用户名称"
-            align="center"
-            key="username"
-            prop="username"
-            v-if="columns[1].visible"
-            :show-overflow-tooltip="true"
-          />
-          <el-table-column
-            label="用户昵称"
-            align="center"
-            key="nickname"
-            prop="nickname"
-            v-if="columns[2].visible"
-            :show-overflow-tooltip="true"
-          />
-          <el-table-column
-            label="部门"
-            align="center"
-            key="deptName"
-            prop="dept.name"
-            v-if="columns[3].visible"
-            :show-overflow-tooltip="true"
-          />
-          <el-table-column
-            label="手机号码"
-            align="center"
-            key="mobile"
-            prop="mobile"
-            v-if="columns[4].visible"
-            width="120"
-          />
-          <el-table-column
-            label="状态"
-            key="status"
-            v-if="columns[5].visible"
-            align="center"
-          >
+          <el-table-column label="用户编号" align="center" key="id" prop="id" v-if="columns[0].visible" />
+          <el-table-column label="用户名称" align="center" key="username" prop="username" v-if="columns[1].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="用户昵称" align="center" key="nickname" prop="nickname" v-if="columns[2].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="部门" align="center" key="deptName" prop="dept.name" v-if="columns[3].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="手机号码" align="center" key="mobile" prop="mobile" v-if="columns[4].visible" width="120" />
+          <el-table-column label="状态" key="status" v-if="columns[5].visible" align="center">
             <template v-slot="scope">
-              <el-switch
-                v-model="scope.row.status"
-                :active-value="0"
-                :inactive-value="1"
-                @change="handleStatusChange(scope.row)"
-              />
+              <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)" />
             </template>
           </el-table-column>
-          <el-table-column
-            label="创建时间"
-            align="center"
-            prop="createTime"
-            v-if="columns[6].visible"
-            width="160"
-          >
+          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
             <template v-slot="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
             </template>
           </el-table-column>
-          <el-table-column
-            label="操作"
-            align="center"
-            width="160"
-            class-name="small-padding fixed-width"
-          >
+          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
             <template v-slot="scope">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-                v-hasPermi="['system:user:update']"
-                >修改</el-button
-              >
-              <el-dropdown
-                @command="
-                  (command) => handleCommand(command, scope.$index, scope.row)
-                "
-                v-hasPermi="[
-                  'system:user:delete',
-                  'system:user:update-password',
-                  'system:permission:assign-user-role',
-                ]"
-              >
-                <el-button size="mini" type="text" icon="el-icon-d-arrow-right"
-                  >更多</el-button
-                >
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+                         v-hasPermi="['system:user:update']">修改</el-button>
+              <el-dropdown  @command="(command) => handleCommand(command, scope.$index, scope.row)"
+                            v-hasPermi="['system:user:delete', 'system:user:update-password', 'system:permission:assign-user-role']">
+                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item
-                    command="handleDelete"
-                    v-if="scope.row.id !== 1"
-                    size="mini"
-                    type="text"
-                    icon="el-icon-delete"
-                    v-hasPermi="['system:user:delete']"
-                    >删除</el-dropdown-item
-                  >
-                  <el-dropdown-item
-                    command="handleResetPwd"
-                    size="mini"
-                    type="text"
-                    icon="el-icon-key"
-                    v-hasPermi="['system:user:update-password']"
-                    >重置密码</el-dropdown-item
-                  >
-                  <el-dropdown-item
-                    command="handleRole"
-                    size="mini"
-                    type="text"
-                    icon="el-icon-circle-check"
-                    v-hasPermi="['system:permission:assign-user-role']"
-                    >分配角色</el-dropdown-item
-                  >
+                  <el-dropdown-item command="handleDelete" v-if="scope.row.id !== 1" size="mini" type="text" icon="el-icon-delete"
+                                    v-hasPermi="['system:user:delete']">删除</el-dropdown-item>
+                  <el-dropdown-item command="handleResetPwd" size="mini" type="text" icon="el-icon-key"
+                                    v-hasPermi="['system:user:update-password']">重置密码</el-dropdown-item>
+                  <el-dropdown-item command="handleRole" size="mini" type="text" icon="el-icon-circle-check"
+                                    v-hasPermi="['system:permission:assign-user-role']">分配角色</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
             </template>
           </el-table-column>
         </el-table>
 
-        <pagination
-          v-show="total > 0"
-          :total="total"
-          :page.sync="queryParams.pageNo"
-          :limit.sync="queryParams.pageSize"
-          @pagination="getList"
-        />
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
+                    @pagination="getList"/>
       </el-col>
     </el-row>
 
@@ -285,59 +109,32 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="归属部门" prop="deptId">
-              <treeselect
-                v-model="form.deptId"
-                :options="deptOptions"
-                :show-count="true"
-                :clearable="false"
-                placeholder="请选择归属部门"
-                :normalizer="normalizer"
-              />
+              <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" :clearable="false"
+                          placeholder="请选择归属部门" :normalizer="normalizer"/>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item label="手机号码" prop="mobile">
-              <el-input
-                v-model="form.mobile"
-                placeholder="请输入手机号码"
-                maxlength="11"
-              />
+              <el-input v-model="form.mobile" placeholder="请输入手机号码" maxlength="11" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item label="邮箱" prop="email">
-              <el-input
-                v-model="form.email"
-                placeholder="请输入邮箱"
-                maxlength="50"
-              />
+              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="12">
-            <el-form-item
-              v-if="form.id === undefined"
-              label="用户名称"
-              prop="username"
-            >
+            <el-form-item v-if="form.id === undefined" label="用户名称" prop="username">
               <el-input v-model="form.username" placeholder="请输入用户名称" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item
-              v-if="form.id === undefined"
-              label="用户密码"
-              prop="password"
-            >
-              <el-input
-                v-model="form.password"
-                placeholder="请输入用户密码"
-                type="password"
-                show-password
-              />
+            <el-form-item v-if="form.id === undefined" label="用户密码" prop="password">
+              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" show-password />
             </el-form-item>
           </el-col>
         </el-row>
@@ -345,12 +142,7 @@
           <el-col :span="12">
             <el-form-item label="用户性别">
               <el-select v-model="form.sex" placeholder="请选择">
-                <el-option
-                  v-for="dict in sexDictDatas"
-                  :key="parseInt(dict.value)"
-                  :label="dict.label"
-                  :value="parseInt(dict.value)"
-                />
+                <el-option v-for="dict in sexDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
               </el-select>
             </el-form-item>
           </el-col>
@@ -358,10 +150,10 @@
             <el-form-item label="岗位">
               <el-select v-model="form.postIds" multiple placeholder="请选择">
                 <el-option
-                  v-for="item in postOptions"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
+                    v-for="item in postOptions"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
                 ></el-option>
               </el-select>
             </el-form-item>
@@ -370,11 +162,7 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="备注">
-              <el-input
-                v-model="form.remark"
-                type="textarea"
-                placeholder="请输入内容"
-              ></el-input>
+              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -386,39 +174,18 @@
     </el-dialog>
 
     <!-- 用户导入对话框 -->
-    <el-dialog
-      :title="upload.title"
-      :visible.sync="upload.open"
-      width="400px"
-      append-to-body
-    >
-      <el-upload
-        ref="upload"
-        :limit="1"
-        accept=".xlsx, .xls"
-        :headers="upload.headers"
-        :action="upload.url + '?updateSupport=' + upload.updateSupport"
-        :disabled="upload.isUploading"
-        :on-progress="handleFileUploadProgress"
-        :on-success="handleFileSuccess"
-        :auto-upload="false"
-        drag
-      >
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip text-center" slot="tip">
           <div class="el-upload__tip" slot="tip">
-            <el-checkbox v-model="upload.updateSupport" />
-            是否更新已经存在的用户数据
+            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
           </div>
           <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link
-            type="primary"
-            :underline="false"
-            style="font-size: 12px; vertical-align: baseline"
-            @click="importTemplate"
-            >下载模板</el-link
-          >
+          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
         </div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
@@ -428,12 +195,7 @@
     </el-dialog>
 
     <!-- 分配角色 -->
-    <el-dialog
-      title="分配角色"
-      :visible.sync="openRole"
-      width="500px"
-      append-to-body
-    >
+    <el-dialog title="分配角色" :visible.sync="openRole" width="500px" append-to-body>
       <el-form :model="form" label-width="80px">
         <el-form-item label="用户名称">
           <el-input v-model="form.username" :disabled="true" />
@@ -444,10 +206,10 @@
         <el-form-item label="角色">
           <el-select v-model="form.roleIds" multiple placeholder="请选择">
             <el-option
-              v-for="item in roleOptions"
-              :key="parseInt(item.id)"
-              :label="item.name"
-              :value="parseInt(item.id)"
+                v-for="item in roleOptions"
+                :key="parseInt(item.id)"
+                :label="item.name"
+                :value="parseInt(item.id)"
             ></el-option>
           </el-select>
         </el-form-item>
@@ -457,6 +219,7 @@
         <el-button @click="cancelRole">取 消</el-button>
       </div>
     </el-dialog>
+
   </div>
 </template>
 
@@ -470,19 +233,19 @@ import {
   importTemplate,
   listUser,
   resetUserPwd,
-  updateUser,
+  updateUser
 } from "@/api/system/user";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
-import { listSimpleDepts } from "@/api/system/dept";
-import { listSimplePosts } from "@/api/system/post";
+import {listSimpleDepts} from "@/api/system/dept";
+import {listSimplePosts} from "@/api/system/post";
 
-import { CommonStatusEnum } from "@/utils/constants";
-import { DICT_TYPE, getDictDatas } from "@/utils/dict";
-import { assignUserRole, listUserRoles } from "@/api/system/permission";
-import { listSimpleRoles } from "@/api/system/role";
-import { getBaseHeader } from "@/utils/request";
+import {CommonStatusEnum} from "@/utils/constants";
+import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import {assignUserRole, listUserRoles} from "@/api/system/permission";
+import {listSimpleRoles} from "@/api/system/role";
+import {getBaseHeader} from "@/utils/request";
 
 export default {
   name: "SystemUser",
@@ -519,7 +282,7 @@ export default {
       form: {},
       defaultProps: {
         children: "children",
-        label: "name",
+        label: "name"
       },
       // 用户导入参数
       upload: {
@@ -534,7 +297,7 @@ export default {
         // 设置上传的请求头部
         headers: getBaseHeader(),
         // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "/admin-api/system/user/import",
+        url: process.env.VUE_APP_BASE_API + '/admin-api/system/user/import'
       },
       // 查询参数
       queryParams: {
@@ -544,7 +307,7 @@ export default {
         mobile: undefined,
         status: undefined,
         deptId: undefined,
-        createTime: [],
+        createTime: []
       },
       // 列信息
       columns: [
@@ -554,34 +317,33 @@ export default {
         { key: 3, label: `部门`, visible: true },
         { key: 4, label: `手机号码`, visible: true },
         { key: 5, label: `状态`, visible: true },
-        { key: 6, label: `创建时间`, visible: true },
+        { key: 6, label: `创建时间`, visible: true }
       ],
       // 表单校验
       rules: {
         username: [
-          { required: true, message: "用户名称不能为空", trigger: "blur" },
+          { required: true, message: "用户名称不能为空", trigger: "blur" }
         ],
         nickname: [
-          { required: true, message: "用户昵称不能为空", trigger: "blur" },
+          { required: true, message: "用户昵称不能为空", trigger: "blur" }
         ],
         password: [
-          { required: true, message: "用户密码不能为空", trigger: "blur" },
+          { required: true, message: "用户密码不能为空", trigger: "blur" }
         ],
         email: [
           {
             type: "email",
             message: "'请输入正确的邮箱地址",
-            trigger: ["blur", "change"],
-          },
+            trigger: ["blur", "change"]
+          }
         ],
         mobile: [
           {
-            pattern:
-              /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
+            pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
             message: "请输入正确的手机号码",
-            trigger: "blur",
-          },
-        ],
+            trigger: "blur"
+          }
+        ]
       },
       // 是否显示弹出层（角色权限）
       openRole: false,
@@ -597,7 +359,7 @@ export default {
     // 根据名称筛选部门树
     deptName(val) {
       this.$refs.tree.filter(val);
-    },
+    }
   },
   created() {
     this.getList();
@@ -610,16 +372,16 @@ export default {
     // 更多操作
     handleCommand(command, index, row) {
       switch (command) {
-        case "handleUpdate":
-          this.handleUpdate(row); //修改客户信息
+        case 'handleUpdate':
+          this.handleUpdate(row);//修改客户信息
           break;
-        case "handleDelete":
-          this.handleDelete(row); //红号变更
+        case 'handleDelete':
+          this.handleDelete(row);//红号变更
           break;
-        case "handleResetPwd":
+        case 'handleResetPwd':
           this.handleResetPwd(row);
           break;
-        case "handleRole":
+        case 'handleRole':
           this.handleRole(row);
           break;
         default:
@@ -629,20 +391,21 @@ export default {
     /** 查询用户列表 */
     getList() {
       this.loading = true;
-      listUser(this.queryParams).then((response) => {
-        this.userList = response.data.list;
-        this.total = response.data.total;
-        this.loading = false;
-      });
+      listUser(this.queryParams).then(response => {
+          this.userList = response.data.list;
+          this.total = response.data.total;
+          this.loading = false;
+        }
+      );
     },
     /** 查询部门下拉树结构 + 岗位下拉 */
     getTreeselect() {
-      listSimpleDepts().then((response) => {
+      listSimpleDepts().then(response => {
         // 处理 deptOptions 参数
         this.deptOptions = [];
         this.deptOptions.push(...this.handleTree(response.data, "id"));
       });
-      listSimplePosts().then((response) => {
+      listSimplePosts().then(response => {
         // 处理 postOptions 参数
         this.postOptions = [];
         this.postOptions.push(...response.data);
@@ -661,18 +424,12 @@ export default {
     // 用户状态修改
     handleStatusChange(row) {
       let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
-      this.$modal
-        .confirm('确认要"' + text + '""' + row.username + '"用户吗?')
-        .then(function () {
+      this.$modal.confirm('确认要"' + text + '""' + row.username + '"用户吗?').then(function() {
           return changeUserStatus(row.id, row.status);
-        })
-        .then(() => {
+        }).then(() => {
           this.$modal.msgSuccess(text + "成功");
-        })
-        .catch(function () {
-          row.status =
-            row.status === CommonStatusEnum.ENABLE
-              ? CommonStatusEnum.DISABLE
+        }).catch(function() {
+          row.status = row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE
               : CommonStatusEnum.ENABLE;
         });
     },
@@ -700,7 +457,7 @@ export default {
         status: "0",
         remark: undefined,
         postIds: [],
-        roleIds: [],
+        roleIds: []
       };
       this.resetForm("form");
     },
@@ -729,7 +486,7 @@ export default {
       this.reset();
       this.getTreeselect();
       const id = row.id;
-      getUser(id).then((response) => {
+      getUser(id).then(response => {
         this.form = response.data;
         this.open = true;
         this.title = "修改用户";
@@ -739,19 +496,17 @@ export default {
     handleResetPwd(row) {
       this.$prompt('请输入"' + row.username + '"的新密码', "提示", {
         confirmButtonText: "确定",
-        cancelButtonText: "取消",
-      })
-        .then(({ value }) => {
-          resetUserPwd(row.id, value).then((response) => {
+        cancelButtonText: "取消"
+      }).then(({ value }) => {
+          resetUserPwd(row.id, value).then(response => {
             this.$modal.msgSuccess("修改成功，新密码是：" + value);
           });
-        })
-        .catch(() => {});
+        }).catch(() => {});
     },
     /** 分配用户角色操作 */
     handleRole(row) {
       this.reset();
-      const id = row.id;
+      const id = row.id
       // 处理了 form 的用户 username 和 nickname 的展示
       this.form.id = id;
       this.form.username = row.username;
@@ -759,29 +514,29 @@ export default {
       // 打开弹窗
       this.openRole = true;
       // 获得角色列表
-      listSimpleRoles().then((response) => {
+      listSimpleRoles().then(response => {
         // 处理 roleOptions 参数
         this.roleOptions = [];
         this.roleOptions.push(...response.data);
       });
       // 获得角色拥有的菜单集合
-      listUserRoles(id).then((response) => {
+      listUserRoles(id).then(response => {
         // 设置选中
         this.form.roleIds = response.data;
-      });
+      })
     },
     /** 提交按钮 */
-    submitForm: function () {
-      this.$refs["form"].validate((valid) => {
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id !== undefined) {
-            updateUser(this.form).then((response) => {
+            updateUser(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addUser(this.form).then((response) => {
+            addUser(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -791,12 +546,12 @@ export default {
       });
     },
     /** 提交按钮（角色权限） */
-    submitRole: function () {
+    submitRole: function() {
       if (this.form.id !== undefined) {
         assignUserRole({
           userId: this.form.id,
           roleIds: this.form.roleIds,
-        }).then((response) => {
+        }).then(response => {
           this.$modal.msgSuccess("分配角色成功");
           this.openRole = false;
           this.getList();
@@ -806,34 +561,26 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal
-        .confirm('是否确认删除用户编号为"' + ids + '"的数据项?')
-        .then(function () {
+      this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项?').then(function() {
           return delUser(ids);
-        })
-        .then(() => {
+        }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
-        })
-        .catch(() => {});
+      }).catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.$modal
-        .confirm("是否确认导出所有用户数据项?")
-        .then(() => {
+      this.$modal.confirm('是否确认导出所有用户数据项?').then(() => {
           // 处理查询参数
-          let params = { ...this.queryParams };
+          let params = {...this.queryParams};
           params.pageNo = undefined;
           params.pageSize = undefined;
           this.exportLoading = true;
           return exportUser(params);
-        })
-        .then((response) => {
-          this.$download.excel(response, "用户数据.xls");
+        }).then(response => {
+          this.$download.excel(response, '用户数据.xls');
           this.exportLoading = false;
-        })
-        .catch(() => {});
+      }).catch(() => {});
     },
     /** 导入按钮操作 */
     handleImport() {
@@ -842,8 +589,8 @@ export default {
     },
     /** 下载模板操作 */
     importTemplate() {
-      importTemplate().then((response) => {
-        this.$download.excel(response, "用户导入模板.xls");
+      importTemplate().then(response => {
+        this.$download.excel(response, '用户导入模板.xls');
       });
     },
     // 文件上传中处理
@@ -853,7 +600,7 @@ export default {
     // 文件上传成功处理
     handleFileSuccess(response, file, fileList) {
       if (response.code !== 0) {
-        this.$modal.msgError(response.msg);
+        this.$modal.msgError(response.msg)
         return;
       }
       this.upload.open = false;
@@ -861,22 +608,17 @@ export default {
       this.$refs.upload.clearFiles();
       // 拼接提示语
       let data = response.data;
-      let text = "创建成功数量：" + data.createUsernames.length;
+      let text = '创建成功数量：' + data.createUsernames.length;
       for (const username of data.createUsernames) {
-        text += "<br />&nbsp;&nbsp;&nbsp;&nbsp;" + username;
+        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
       }
-      text += "<br />更新成功数量：" + data.updateUsernames.length;
+      text += '<br />更新成功数量：' + data.updateUsernames.length;
       for (const username of data.updateUsernames) {
-        text += "<br />&nbsp;&nbsp;&nbsp;&nbsp;" + username;
+        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
       }
-      text +=
-        "<br />更新失败数量：" + Object.keys(data.failureUsernames).length;
+      text += '<br />更新失败数量：' + Object.keys(data.failureUsernames).length;
       for (const username in data.failureUsernames) {
-        text +=
-          "<br />&nbsp;&nbsp;&nbsp;&nbsp;" +
-          username +
-          "：" +
-          data.failureUsernames[username];
+        text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username + '：' + data.failureUsernames[username];
       }
       this.$alert(text, "导入结果", { dangerouslyUseHTMLString: true });
       this.getList();
@@ -890,18 +632,9 @@ export default {
       return {
         id: node.id,
         label: node.name,
-        children: node.children,
-      };
-    },
-  },
+        children: node.children
+      }
+    }
+  }
 };
 </script>
-<style lang="scss" scoped>
-.app-container {
-  width: 100%;
-  height: calc(100vh - 120px - 8px);
-  background-color: #fff;
-  border-radius: 8px;
-  padding: 8px;
-}
-</style>

yarn.lock

@@ -975,13 +975,20 @@
   "resolved" "https://registry.npmmirror.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz"
   "version" "0.8.0"
 
-"@babel/runtime@^7.11.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.11.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.8.4":
   "integrity" "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ=="
   "resolved" "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.1.tgz"
   "version" "7.24.1"
   dependencies:
     "regenerator-runtime" "^0.14.0"
 
+"@babel/runtime@^7.5.5":
+  version "7.24.5"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
+  integrity sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.23.9", "@babel/template@^7.24.0":
   "integrity" "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA=="
   "resolved" "https://registry.npmmirror.com/@babel/template/-/template-7.24.0.tgz"
@@ -1075,16 +1082,16 @@
     "wrap-ansi-cjs" "npm:wrap-ansi@^7.0.0"
 
 "@jiaminghi/bezier-curve@*":
-  "integrity" "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw=="
-  "resolved" "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz"
-  "version" "0.0.9"
+  version "0.0.9"
+  resolved "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz#5196aca93c8b061a612b4c3eabcedf9490cef6ee"
+  integrity sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw==
   dependencies:
     "@babel/runtime" "^7.5.5"
 
 "@jiaminghi/c-render@^0.4.3":
-  "integrity" "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q=="
-  "resolved" "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz"
-  "version" "0.4.3"
+  version "0.4.3"
+  resolved "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz#982ebd8f71b443bb9507834227834973ebd9b6d8"
+  integrity sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q==
   dependencies:
     "@babel/runtime" "^7.5.5"
     "@jiaminghi/bezier-curve" "*"
@@ -1092,30 +1099,30 @@
     "@jiaminghi/transition" "*"
 
 "@jiaminghi/charts@*":
-  "integrity" "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA=="
-  "resolved" "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz"
-  "version" "0.2.18"
+  version "0.2.18"
+  resolved "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz#63ded95200789fc1a1fd04b7fd9e56f58d22d90f"
+  integrity sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA==
   dependencies:
     "@babel/runtime" "^7.5.5"
     "@jiaminghi/c-render" "^0.4.3"
 
 "@jiaminghi/color@*":
-  "integrity" "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
-  "resolved" "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz"
-  "version" "1.1.3"
+  version "1.1.3"
+  resolved "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz#a2336750d1266155ffe80375c58c26fdec495611"
+  integrity sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg==
 
 "@jiaminghi/data-view@^2.10.0":
-  "integrity" "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA=="
-  "resolved" "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz"
-  "version" "2.10.0"
+  version "2.10.0"
+  resolved "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz#2146d8fc71b9f24be808238ca050ddb7a4c8949f"
+  integrity sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==
   dependencies:
     "@babel/runtime" "^7.5.5"
     "@jiaminghi/charts" "*"
 
 "@jiaminghi/transition@*":
-  "integrity" "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg=="
-  "resolved" "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz"
-  "version" "1.1.11"
+  version "1.1.11"
+  resolved "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz#576d8af092434b34201eba5eaecc79dd33c8ad8c"
+  integrity sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==
   dependencies:
     "@babel/runtime" "^7.5.5"