From 0ae83a895e80a4b9777a27f613d721a7e5e2ac18 Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期二, 03 九月 2024 10:18:27 +0800
Subject: [PATCH] 整体样式修改

---
 energy_management_ui/src/views/system/menu/index.vue |  310 +++++++++++++++++++++++++++++++++++----------------
 1 files changed, 211 insertions(+), 99 deletions(-)

diff --git a/energy_management_ui/src/views/system/menu/index.vue b/energy_management_ui/src/views/system/menu/index.vue
index e6248c8..ced75e8 100644
--- a/energy_management_ui/src/views/system/menu/index.vue
+++ b/energy_management_ui/src/views/system/menu/index.vue
@@ -1,35 +1,58 @@
 <template>
   <div>
     <basic-container>
-      <el-form class="special-form" label-width="73px" :model="queryParams" ref="queryForm">
+      <el-form
+        class="special-form"
+        label-width="73px"
+        :model="queryParams"
+        ref="queryForm"
+      >
         <el-row :gutter="24">
           <el-col :span="6">
             <el-form-item label="鑿滃崟鍚嶇О">
               <el-input
-                  v-model="queryParams.menuName"
-                  placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�"
-                  clearable
-                  size="small"
-                  @keyup.enter.native="handleQuery"
+                v-model="queryParams.menuName"
+                placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�"
+                clearable
+                size="small"
+                @keyup.enter.native="handleQuery"
               />
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="鐘舵��">
-              <el-select v-model="queryParams.visible" placeholder="鑿滃崟鐘舵��" clearable size="small" style="width: 100%">
+              <el-select
+                v-model="queryParams.visible"
+                placeholder="鑿滃崟鐘舵��"
+                clearable
+                size="small"
+                style="width: 100%"
+              >
                 <el-option
-                    v-for="dict in visibleOptions"
-                    :key="dict.dictValue"
-                    :label="dict.dictLabel"
-                    :value="dict.dictValue"
+                  v-for="dict in visibleOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
                 />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="12">
             <el-form-item class="operation">
-              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">鎼滅储</el-button>
-              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:menu:add']">
+              <el-button
+                type="primary"
+                icon="el-icon-search"
+                size="mini"
+                @click="handleQuery"
+                >鎼滅储</el-button
+              >
+              <el-button
+                type="primary"
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                v-hasPermi="['system:menu:add']"
+              >
                 鏂板
               </el-button>
             </el-form-item>
@@ -39,51 +62,86 @@
     </basic-container>
     <basic-container :bodyStyle="bodyStyle" style="margin-top: 16px">
       <el-table
-          v-loading="loading"
-          :data="menuList"
-          row-key="menuId"
-          :height="height"
-          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        v-loading="loading"
+        :data="menuList"
+        row-key="menuId"
+        :height="height"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
       >
-        <el-table-column prop="menuName" label="鑿滃崟鍚嶇О" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column
+          prop="menuName"
+          label="鑿滃崟鍚嶇О"
+          align="left"
+          min-width="180"
+        ></el-table-column>
         <el-table-column prop="icon" label="鍥炬爣" align="center" width="100px">
           <template slot-scope="scope">
-            <svg-icon :icon-class="scope.row.icon"/>
+            <svg-icon :icon-class="scope.row.icon" />
           </template>
         </el-table-column>
-        <el-table-column prop="orderNum" label="鎺掑簭" width="60px"></el-table-column>
-        <el-table-column prop="perms" label="鏉冮檺鏍囪瘑" width="130px" :show-overflow-tooltip="true"></el-table-column>
-        <el-table-column prop="component" label="缁勪欢璺緞" width="180px" :show-overflow-tooltip="true"></el-table-column>
-        <el-table-column prop="visible" label="鍙" :formatter="visibleFormat" width="80px"></el-table-column>
-        <el-table-column label="鍒涘缓鏃堕棿" align="center" prop="createTime" width="180">
+        <el-table-column
+          prop="orderNum"
+          label="鎺掑簭"
+          width="60px"
+        ></el-table-column>
+        <el-table-column
+          prop="perms"
+          label="鏉冮檺鏍囪瘑"
+          width="130px"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="component"
+          label="缁勪欢璺緞"
+          width="180px"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="visible"
+          label="鍙"
+          :formatter="visibleFormat"
+          width="80px"
+        ></el-table-column>
+        <el-table-column
+          label="鍒涘缓鏃堕棿"
+          align="center"
+          prop="createTime"
+          width="180"
+        >
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.createTime) }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="鎿嶄綔" align="center" width="180" class-name="small-padding fixed-width">
+        <el-table-column
+          label="鎿嶄綔"
+          align="center"
+          width="240"
+          class-name="small-padding fixed-width"
+        >
           <template slot-scope="scope">
-            <el-button size="mini"
-                       type="text"
-                       icon="el-icon-edit"
-                       @click="handleUpdate(scope.row)"
-                       v-hasPermi="['system:menu:edit']"
-            >淇敼
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['system:menu:edit']"
+              >淇敼
             </el-button>
             <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-plus"
-                @click="handleAdd(scope.row)"
-                v-hasPermi="['system:menu:add']"
-            >鏂板
+              size="mini"
+              type="text"
+              icon="el-icon-plus"
+              @click="handleAdd(scope.row)"
+              v-hasPermi="['system:menu:add']"
+              >鏂板
             </el-button>
             <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-                v-hasPermi="['system:menu:remove']"
-            >鍒犻櫎
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['system:menu:remove']"
+              >鍒犻櫎
             </el-button>
           </template>
         </el-table-column>
@@ -95,10 +153,10 @@
             <el-col :span="24">
               <el-form-item label="涓婄骇鑿滃崟">
                 <treeselect
-                    v-model="form.parentId"
-                    :options="menuOptions"
-                    :show-count="true"
-                    placeholder="閫夋嫨涓婄骇鑿滃崟"
+                  v-model="form.parentId"
+                  :options="menuOptions"
+                  :show-count="true"
+                  placeholder="閫夋嫨涓婄骇鑿滃崟"
                 />
               </el-form-item>
             </el-col>
@@ -114,33 +172,49 @@
             <el-col :span="24">
               <el-form-item v-if="form.menuType != 'F'" label="鑿滃崟鍥炬爣">
                 <el-popover
-                    placement="bottom-start"
-                    width="460"
-                    trigger="click"
-                    @show="$refs['iconSelect'].reset()"
+                  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>
+                  <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;"
+                      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"/>
+                    <i
+                      v-else
+                      slot="prefix"
+                      class="el-icon-search el-input__icon"
+                    />
                   </el-input>
                 </el-popover>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="鑿滃崟鍚嶇О" prop="menuName">
-                <el-input v-model="form.menuName" placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�"/>
+                <el-input
+                  v-model="form.menuName"
+                  placeholder="璇疯緭鍏ヨ彍鍗曞悕绉�"
+                />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="鏄剧ず鎺掑簭" prop="orderNum">
-                <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
+                <el-input-number
+                  v-model="form.orderNum"
+                  controls-position="right"
+                  :min="0"
+                />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -152,35 +226,53 @@
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item v-if="form.menuType != 'F'" label="璺敱鍦板潃" prop="path">
-                <el-input v-model="form.path" placeholder="璇疯緭鍏ヨ矾鐢卞湴鍧�"/>
+              <el-form-item
+                v-if="form.menuType != 'F'"
+                label="璺敱鍦板潃"
+                prop="path"
+              >
+                <el-input v-model="form.path" placeholder="璇疯緭鍏ヨ矾鐢卞湴鍧�" />
               </el-form-item>
             </el-col>
             <el-col :span="12" v-if="form.menuType == 'C'">
               <el-form-item label="缁勪欢璺緞" prop="component">
-                <el-input v-model="form.component" placeholder="璇疯緭鍏ョ粍浠惰矾寰�"/>
+                <el-input
+                  v-model="form.component"
+                  placeholder="璇疯緭鍏ョ粍浠惰矾寰�"
+                />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item v-if="form.menuType != 'M'" label="鏉冮檺鏍囪瘑">
-                <el-input v-model="form.perms" placeholder="璇锋潈闄愭爣璇�" maxlength="50"/>
+                <el-input
+                  v-model="form.perms"
+                  placeholder="璇锋潈闄愭爣璇�"
+                  maxlength="50"
+                />
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item v-if="form.menuType != 'F'" label="鑿滃崟鐘舵��">
                 <el-radio-group v-model="form.visible">
                   <el-radio
-                      v-for="dict in visibleOptions"
-                      :key="dict.dictValue"
-                      :label="dict.dictValue"
-                  >{{ dict.dictLabel }}
+                    v-for="dict in visibleOptions"
+                    :key="dict.dictValue"
+                    :label="dict.dictValue"
+                    >{{ dict.dictLabel }}
                   </el-radio>
                 </el-radio-group>
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item v-if="form.menuType != 'F'" label="椤甸潰鍙傛暟" prop="parameter">
-                <el-input v-model="form.parameter" placeholder="璇疯緭鍏ラ〉闈㈠弬鏁�"/>
+              <el-form-item
+                v-if="form.menuType != 'F'"
+                label="椤甸潰鍙傛暟"
+                prop="parameter"
+              >
+                <el-input
+                  v-model="form.parameter"
+                  placeholder="璇疯緭鍏ラ〉闈㈠弬鏁�"
+                />
               </el-form-item>
             </el-col>
           </el-row>
@@ -195,16 +287,23 @@
 </template>
 
 <script>
-import {listMenu, getMenu, treeselect, delMenu, addMenu, updateMenu} from "@/api/system/menu";
+import {
+  listMenu,
+  getMenu,
+  treeselect,
+  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 mixins from '@/layout/mixin/getHeight';
+import mixins from "@/layout/mixin/getHeight";
 
 export default {
   name: "Menu",
   mixins: [mixins],
-  components: {Treeselect, IconSelect},
+  components: { Treeselect, IconSelect },
   data() {
     return {
       // 閬僵灞�
@@ -229,10 +328,10 @@
       // 琛ㄥ崟鏍¢獙
       rules: {
         menuName: [
-          {required: true, message: "鑿滃崟鍚嶇О涓嶈兘涓虹┖", trigger: "blur"}
+          { required: true, message: "鑿滃崟鍚嶇О涓嶈兘涓虹┖", trigger: "blur" }
         ],
         orderNum: [
-          {required: true, message: "鑿滃崟椤哄簭涓嶈兘涓虹┖", trigger: "blur"}
+          { required: true, message: "鑿滃崟椤哄簭涓嶈兘涓虹┖", trigger: "blur" }
         ]
       },
       height: null
@@ -246,11 +345,11 @@
   },
   methods: {
     setCharts() {
-      this.bodyStyle ={
-        height:window.innerHeight - 210+ 'px',
-        overflow: 'hidden'
-      }
-      this.height = window.innerHeight - 270
+      this.bodyStyle = {
+        height: window.innerHeight - 210 + "px",
+        overflow: "hidden"
+      };
+      this.height = window.innerHeight - 270;
     },
     // 閫夋嫨鍥炬爣
     selected(name) {
@@ -268,7 +367,7 @@
     getTreeselect() {
       treeselect().then(response => {
         this.menuOptions = [];
-        const menu = {id: 0, label: '涓荤被鐩�', children: []};
+        const menu = { id: 0, label: "涓荤被鐩�", children: [] };
         menu.children = response.data;
         this.menuOptions.push(menu);
       });
@@ -324,7 +423,7 @@
       });
     },
     /** 鎻愪氦鎸夐挳 */
-    submitForm: function () {
+    submitForm: function() {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.menuId != undefined) {
@@ -353,30 +452,43 @@
     },
     /** 鍒犻櫎鎸夐挳鎿嶄綔 */
     handleDelete(row) {
-      this.$confirm('鏄惁纭鍒犻櫎鍚嶇О涓�"' + row.menuName + '"鐨勬暟鎹」?', "璀﹀憡", {
-        confirmButtonText: "纭畾",
-        cancelButtonText: "鍙栨秷",
-        type: "warning"
-      }).then(function () {
-        return delMenu(row.menuId);
-      }).then(() => {
-        this.getList();
-        this.msgSuccess("鍒犻櫎鎴愬姛");
-      }).catch(function () {
-      });
+      this.$confirm(
+        '鏄惁纭鍒犻櫎鍚嶇О涓�"' + row.menuName + '"鐨勬暟鎹」?',
+        "璀﹀憡",
+        {
+          confirmButtonText: "纭畾",
+          cancelButtonText: "鍙栨秷",
+          type: "warning"
+        }
+      )
+        .then(function() {
+          return delMenu(row.menuId);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess("鍒犻櫎鎴愬姛");
+        })
+        .catch(function() {});
     }
   }
 };
 </script>
 <style lang="scss" scoped>
-.el-table td, .el-table th {
+.el-table td,
+.el-table th {
   text-align: left !important;
 }
 
-.el-form-item {
-  margin-bottom: 0;
-}
 .special-form {
   @import "~@/assets/styles/common-table-form.scss";
 }
+
+::v-deep {
+  .vue-treeselect__control {
+    background: rgb(54, 108, 185, 0.2);
+    background-color: rgb(54, 108, 185, 0.2);
+    border: 1px solid #366cb9;
+    color: #fff;
+  }
+}
 </style>

--
Gitblit v1.9.3