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