From c020f31a67fc5aa5644511bddff075f7ecc85234 Mon Sep 17 00:00:00 2001
From: qinchulong <qinchulong@hnkhzn.com>
Date: 星期二, 27 五月 2025 15:35:27 +0800
Subject: [PATCH] Merge branch 'master' of http://115.159.85.185:8098/r/HuaYiZhongHeng/ZhongHeLiTiKu
---
代码管理/WMS/WIDESEA_WMSClient/src/views/system/Sys_Menu.vue | 672 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 672 insertions(+), 0 deletions(-)
diff --git "a/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WIDESEA_WMSClient/src/views/system/Sys_Menu.vue" "b/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WIDESEA_WMSClient/src/views/system/Sys_Menu.vue"
new file mode 100644
index 0000000..4eee23d
--- /dev/null
+++ "b/\344\273\243\347\240\201\347\256\241\347\220\206/WMS/WIDESEA_WMSClient/src/views/system/Sys_Menu.vue"
@@ -0,0 +1,672 @@
+<template>
+ <div class="menu-container">
+ <!-- <el-input/> -->
+ <vol-box
+ :width="940"
+ :mask="true"
+ :height="500"
+ title="鍥炬爣鍒楄〃"
+ v-model="model"
+ >
+ <Icons :onSelect="onSelect"></Icons>
+ <template #footer>
+ <el-button type="primary" size="mini" @click="model = false"
+ >纭� 璁�</el-button
+ >
+ </template>
+ </vol-box>
+ <vol-box
+ :width="600"
+ :mask="true"
+ :height="270"
+ title="鍏朵粬鏉冮檺"
+ v-model="actionModel"
+ >
+ <vol-form
+ ref="actionForm"
+ :formRules="actionOptions"
+ :formFields="actionFields"
+ >
+ <template #header>
+ <div>
+ <el-alert show-icon type="success">
+ 閰嶇疆鐨勫叾浠栨潈闄�
+ <br />1銆佹坊鍔犳柊鐨勬潈闄愬悗璇峰湪vue椤圭洰涓璫onfig鏂囦欢澶逛笅buttns.js娣诲姞姝ゆ潈闄愮殑鎸夐挳銆�
+ <br />2銆佸鏋滄潈闄愬彧鍦ㄦ煇灏戞暟鍑犱釜鍔熻兘涓娇鐢�,鍦╲ue鐨勫搴旈〉闈㈡墿灞昬xtension鏂囦欢鎵惧埌瀵瑰簲js,娣诲姞鍒癳l-buttons瀵硅薄涓�,鏍煎紡鍚宑onfig鏂囦欢澶逛笅buttns.js涓�鏍枫��
+ </el-alert>
+ </div>
+ </template>
+ </vol-form>
+ <template #footer>
+ <el-button type="primary" size="mini" @click="otherAction"
+ >纭� 璁�</el-button
+ >
+ </template>
+ </vol-box>
+
+ <!-- v-if="tree.length" -->
+ <div class="menu-left">
+ <div class="m-title"><i class="el-icon-warning-outline"></i>鑿滃崟鍒楄〃</div>
+ <el-scrollbar style="height: 100%; width: 200px">
+ <VolMenu
+ :onSelect="getTreeItem"
+ :list="tree"
+ :isCollapse="false"
+ ></VolMenu>
+ </el-scrollbar>
+ </div>
+ <div class="menu-right">
+ <el-scrollbar style="height: 100%">
+ <el-alert
+ title="鑿滃崟閰嶇疆璇存槑"
+ type="warning"
+ :closable="false"
+ show-icon
+ >
+ <div>
+ 1銆佸鏋滄槸鐢ㄤ唬鐮佺敓鍣ㄧ敓鎴愮殑Vue椤甸潰,Url涓篤ue椤圭洰涓璼rc->router->viewGrid.js瀵瑰簲琛ㄥ悕鐨刾ath灞炴��
+ </div>
+ <div style="padding-top: 5px">
+ 2銆� 濡傛灉鍙槸寤轰竴绾ц彍鍗曟垨绌鸿彍鍗晆rl涓嶇敤濉啓,銆愯鍥�/琛ㄥ悕銆戝～鍐�.鎴栬��/
+ </div>
+ </el-alert>
+ <div style="padding: 0px 30px 0 20px">
+ <vol-form
+ class="form-content"
+ ref="form"
+ :formRules="options"
+ :formFields="fields"
+ >
+ </vol-form>
+ <div>
+ <div class="auth-group">
+ <label style="width: 100px">鏉冮檺鎸夐挳锛�</label>
+ <div class="ck">
+ <el-checkbox-group v-model="actions">
+ <el-checkbox
+ v-for="(item, index) in action"
+ :key="index"
+ :label="item.value"
+ >{{ item.text + "(" + item.value + ")" }}</el-checkbox
+ >
+ </el-checkbox-group>
+ </div>
+ </div>
+ </div>
+ <div style="padding-left: 100px">
+ <el-button @click="handleCheckAll" size="mini" type="success" plain
+ ><i class="el-icon-check"></i>鍏� 閫�</el-button
+ >
+ <el-button
+ @click="actionModel = true"
+ size="mini"
+ type="primary"
+ plain
+ ><i class="el-icon-plus"></i>鍏朵粬鏉冮檺</el-button
+ >
+ </div>
+ <div class="m-btn">
+ <el-button type="primary" @click="save"
+ ><i class="el-icon-check"></i>淇濆瓨</el-button
+ >
+ <el-button type="success" @click="add"
+ ><i class="el-icon-plus"></i>鏂板缓</el-button
+ >
+ <el-button type="warning" @click="addChild"
+ ><i class="el-icon-plus"></i>娣诲姞瀛愮骇</el-button
+ >
+ <el-button type="primary" plain @click="addBrother"
+ ><i class="el-icon-circle-plus"></i> 娣诲姞鍚岀骇</el-button
+ >
+ <el-button type="warning" plain @click="delMenu"
+ ><i class="el-icon-delete"></i> 鍒犻櫎鑿滃崟</el-button
+ >
+ </div>
+ </div>
+ </el-scrollbar>
+ </div>
+ </div>
+</template>
+<script>
+import VolForm from "@/components/basic/VolForm.vue";
+import VolBox from "@/components/basic/VolBox.vue";
+import Icons from "@/components/basic/Icons.vue";
+import VolMenu from "@/components/basic/VolElementMenu.vue";
+import {
+ defineComponent,
+ reactive,
+ ref,
+ toRefs,
+ onMounted,
+ h,
+ resolveComponent,
+} from "vue";
+
+import http from "@/api/http";
+export default defineComponent({
+ components: {
+ VolForm: VolForm,
+ VolBox: VolBox,
+ Icons: Icons,
+ VolMenu,
+ },
+ methods: {
+ otherAction() {
+ this.$refs.actionForm.validate(() => {
+ let exist = this.action.some((x) => {
+ return (
+ x.text == this.actionFields.name ||
+ x.value == this.actionFields.value
+ );
+ });
+ if (exist) {
+ return this.$message.error("鏉冮檺鍚嶇О鎴栨潈闄愬�煎凡瀛樺湪");
+ }
+ this.actionModel = false;
+ this.action.push({
+ text: this.actionFields.name,
+ value: this.actionFields.value,
+ });
+ });
+ },
+ handleCheckAll() {
+ if (this.actions == this.action.length) {
+ this.checkAll = false;
+ } else {
+ this.checkAll = !this.checkAll;
+ }
+ if (this.checkAll) {
+ this.actions = this.action.map((x) => {
+ return x.value;
+ });
+ } else {
+ this.actions = [];
+ }
+ },
+ checkAllGroupChange(data) {
+ if (data.length === this.action.length) {
+ this.checkAll = true;
+ } else if (data.length > 0) {
+ this.checkAll = false;
+ } else {
+ this.checkAll = false;
+ }
+ },
+ add(obj) {
+ this.$refs.form.reset(
+ Object.assign({ enable: 1 }, obj || { parentId: 0 })
+ );
+ this.icon = "";
+ // this.actions = [];
+ //2020.08.07鏂板缓鑿滃崟鏃讹紝榛樿閫変腑鏌ヨ鎸夐挳鏉冮檺
+ this.actions = ["Search"];
+ },
+ addChild() {
+ if (!this.isSelect()) return;
+ this.add({ parentId: this.fields.menuId });
+ },
+ addBrother() {
+ if (!this.isSelect()) return;
+ this.add({ parentId: this.fields.parentId });
+ },
+ delMenu() {
+ //2020.08.07澧炲姞鑿滃崟鍒犻櫎鍔熻兘
+ if (this.fields.menuId == 0) {
+ return this.$Message.error("璇烽�夋嫨鑿滃崟");
+ }
+
+ let tigger = false;
+ this.$confirm(
+ "纭瑕佸垹闄ゃ��" + this.fields.menuName + "銆戣彍鍗曞悧锛�",
+ "璀﹀憡",
+ {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ center: true,
+ }
+ ).then(() => {
+ if (tigger) return;
+ tigger = true;
+ let menuId = this.fields.menuId;
+ this.http
+ .post(
+ "/api/Sys_Menu/delMenu?menuId=" + menuId,
+ {},
+ "姝ｅ湪鍒犻櫎鏁版嵁...."
+ )
+ .then((x) => {
+ if (!x.status) return this.$Message.error(x.message);
+ this.$refs.form.reset();
+ this.$Message.info(x.message);
+ this.initTree();
+ });
+ });
+ },
+ save() {
+ this.$refs.form.validate(() => {
+ this.fields.auth = "";
+ if (this.actions) {
+ this.fields.auth = this.action.filter((x) => {
+ return this.actions.indexOf(x.value) != -1;
+ });
+ }
+ if (
+ this.fields.auth &&
+ this.fields.auth instanceof Array &&
+ this.fields.auth.length > 0
+ ) {
+ this.fields.auth = JSON.stringify(this.fields.auth);
+ } else {
+ this.fields.auth = "";
+ }
+ this.http.post("/api/Sys_Menu/save", this.fields, true).then((x) => {
+ if (!x.status) {
+ this.$Message.error(x.message);
+ return;
+ }
+
+ this.$Message.info(x.message);
+ if (this.fields.menuId) {
+ this.tree.forEach((t) => {
+ if (t.id == this.fields.menuId) {
+ t.name = this.fields.menuName;
+ t.orderNo = this.fields.orderNo;
+ t.parentId = this.fields.parentId;
+ }
+ });
+ return;
+ }
+ this.fields.menuId = x.data.menuId;
+ this.fields.createDate = x.data.createDate;
+ this.tree.push({
+ id: x.data.menuId,
+ name: this.fields.menuName,
+ orderNo: this.fields.orderNo,
+ parentId: this.fields.parentId,
+ });
+ console.log(this.tree);
+ });
+ });
+ },
+ isSelect() {
+ let id = this.fields.menuId;
+ if (!id) {
+ this.$message.error("璇烽�夋嫨鑺傜偣");
+ return false;
+ }
+ return true;
+ },
+ onSelect(icon) {
+ this.fields.icon = icon;
+ this.$message.info(icon);
+ },
+ onOpenChange(node) {
+ if (node.length == 0) return;
+ this.getTreeItem(node[node.length > 1 ? node.length - 1 : 0]);
+ },
+ },
+ created() {},
+ setup() {
+ const tree = ref([]);
+ const actionValues = ref([]);
+ const action = ref([
+ { text: "鏌ヨ", value: "Search" },
+ { text: "鏂板缓", value: "Add" },
+ { text: "鍒犻櫎", value: "Delete" },
+ { text: "缂栬緫", value: "Update" },
+ { text: "瀵煎叆", value: "Import" },
+ { text: "瀵煎嚭", value: "Export" },
+ // { text: "涓婁紶", value: "Upload" },
+ // { text: "瀹℃牳", value: "Audit" },
+ ]);
+ const actions = ref([]);
+ actionValues.value = action.value.map((x) => {
+ return x.value;
+ });
+ const initTree = () => {
+ http.post("/api/Sys_Menu/getMenu", {}, true).then((x) => {
+ x.forEach((item) => {
+ item.icon = "el-icon-menu";
+ });
+
+ tree.value = x;
+ });
+ };
+ onMounted(() => {
+ initTree();
+ });
+ const actionModel = ref(false);
+ const checkAll = ref(false);
+ const model = ref(false);
+
+ const fields = ref({
+ menuId: 0,
+ parentId: 0,
+ menuName: "",
+ tableName: "",
+ url: "",
+ auth: "",
+ icon: "",
+ orderNo: "",
+ enable: 1,
+ menuType: 0,
+ });
+
+ const actionFields = ref({
+ name: "",
+ value: "",
+ });
+ const actionOptions = ref([
+ [
+ {
+ title: "鏉冮檺鍚嶇О",
+ field: "name",
+ placeholder: "鏉冮檺鍚嶇О,濡傦細鏂板",
+ required: true,
+ },
+ ],
+ [
+ {
+ title: "鏉� 闄� 鍊�",
+ field: "value",
+ placeholder: "鏉冮檺鍊�,濡傦細Add",
+ required: true,
+ },
+ ],
+ ]);
+
+ const options = ref([
+ [
+ {
+ title: "鑿� 鍗� ID",
+ field: "menuId",
+ placeholder: "鑿滃崟ID",
+ min: 0,
+ disabled: true,
+ },
+ {
+ title: "鐖� 绾� ID",
+ required: true,
+ type: "number",
+ min: 0,
+ field: "parentId",
+ // min: 0, max: 50
+ },
+ {
+ title: "鑿滃崟鍚嶇О",
+ field: "menuName",
+ required: true,
+ },
+ ],
+ [
+ {
+ title: "瑙嗗浘/琛ㄥ悕",
+ field: "tableName",
+ placeholder: "涓庝唬鐮佺敓鎴愬櫒浣跨敤鐨勫悕绉扮浉鍚�",
+ required: true,
+ },
+ {
+ title: "(璺敱)Url",
+ field: "url",
+ placeholder: "瑙�:涓婇潰鑿滃崟閰嶇疆璇存槑",
+ },
+ {
+ title: "鎺掑簭鍙�",
+ field: "orderNo",
+ type: "number",
+ min: 0,
+ placeholder: "鍊艰秺澶ф樉绀鸿秺闈犲墠",
+ required: true,
+ },
+ ],
+ [
+ {
+ title: "鏄惁鍚敤",
+ field: "enable",
+ required: true,
+ type: "select",
+ colSize: 4,
+ data: [
+ { key: 1, value: "鍚敤" },
+ { key: 2, value: "鍚敤涓嶆樉绀�" },
+ { key: 0, value: "绂佺敤" },
+ ],
+ },
+ {
+ title: "鑿滃崟绫诲瀷",
+ field: "menuType",
+ required: true,
+ type: "select",
+ colSize: 4,
+ data: [
+ { key: 0, value: "PC绔彍鍗�" },
+ { key: 1, value: "绉诲姩绔彍鍗�" },
+ ],
+ },
+ {
+ title: "鍥炬爣Icon",
+ field: "icon",
+ render: (h) => {
+ return h("div", {}, [
+ h("i", {
+ style: {
+ "font-size": "25px",
+ margin: "0px 9px",
+ position: "relative",
+ top: "4px",
+ },
+ class: [fields.value.icon],
+ }),
+ h(
+ resolveComponent("el-button"),
+ {
+ size: "small",
+ style: { padding: "0px 9px" },
+ type: "primary",
+ plain: true,
+ onClick: () => {
+ model.value = true;
+ },
+ },
+ "閫夋嫨鍥炬爣"
+ ),
+ ]);
+ },
+ },
+ ],
+ ]);
+ const refForm = ref();
+ const getTreeItem = (node) => {
+ http
+ .post("api/Sys_Menu/getTreeItem?menuId=" + node, {}, true)
+ .then((x) => {
+ try {
+ fields.value.icon = x.icon;
+ if (x.auth) {
+ x.auth = JSON.parse(x.auth);
+ action.value.splice(8, action.value.length);
+
+ actions.value = x.auth.map((element) => {
+ if (actionValues.value.indexOf(element.value) == -1) {
+ action.value.push(element);
+ }
+ return element.value;
+ });
+ } else {
+ action.value.splice(8, action.value.length);
+ x.auth = [];
+ fields.value.icon = "";
+ actions.value = [];
+ }
+ } catch (error) {
+ console.log("鑿滃崟鍔熻兘鏉冮檺杞崲鎴怞SON澶辫触:" + x.auth);
+ x.auth = [];
+ // this.icon = "";
+ actions.value = [];
+ }
+ refForm.value.reset(x);
+ });
+ };
+ return {
+ tree,
+ initTree,
+ action,
+ actions,
+ actionValues,
+ actionModel,
+ checkAll,
+ model,
+ fields,
+ actionFields,
+ actionOptions,
+ options,
+ form: refForm,
+ getTreeItem,
+ };
+ },
+ data() {
+ return {};
+ },
+});
+</script>
+
+<style lang="less" scoped>
+.on-icon {
+ line-height: 20px;
+ position: relative;
+
+ .remove {
+ display: none;
+ color: red;
+ right: 7px;
+ position: absolute;
+ top: -14px;
+ font-size: 13px;
+ }
+}
+
+.on-icon:hover {
+ cursor: pointer;
+
+ .remove {
+ display: block;
+ }
+}
+
+.action {
+ width: 100%;
+ display: flex;
+
+ margin-bottom: 15px;
+
+ .ivu-checkbox-wrapper {
+ margin-right: 20px;
+ }
+
+ .ck {
+ line-height: 33px;
+ display: inline-block;
+ display: flex;
+
+ label:first-child {
+ min-width: 58px;
+ float: left;
+ margin-top: 1px;
+ }
+
+ > div {
+ float: left;
+ }
+ }
+}
+
+.menu-container {
+ display: flex;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ padding: 8px;
+ background: #f7f7f7;
+
+ .menu-left {
+ height: 100%;
+ width: 201px;
+ border: 1px solid #eee;
+ display: flex;
+ background: white;
+ flex-direction: column;
+
+ .module-name {
+ border-radius: 0px;
+ /* height: 5%; */
+ line-height: 21px;
+ margin-bottom: 0;
+ }
+ }
+
+ .menu-right {
+ flex: 1;
+ border-radius: 3px;
+ border: 1px solid #eee;
+ background: white;
+ margin-left: 9px;
+ margin-right: 3px;
+ }
+}
+
+.m-btn {
+ margin-top: 20px;
+ text-align: center;
+}
+
+.m-title {
+ line-height: 40px;
+ font-size: 15px;
+ background: #66b1ff0f;
+ font-weight: bold;
+ padding: 6px 16px;
+ border-bottom: 1px solid #eee;
+
+ i {
+ padding-right: 5px;
+ }
+}
+
+.form-content {
+ margin-top: 30px;
+}
+
+.menu-left ::v-deep(.el-scrollbar__bar.is-vertical) {
+ width: 2px;
+}
+
+.auth-group {
+ display: flex;
+
+ label {
+ display: inline-block;
+ width: 100px;
+ text-align: right;
+ color: #797979;
+ font-size: 14px;
+ }
+
+ .ck {
+ flex: 1;
+ }
+
+ .el-checkbox {
+ min-width: 105px;
+ width: auto !important;
+ margin-right: 5px;
+ display: inline-block;
+ padding-bottom: 10px;
+ }
+}
+
+.auth-group ::v-deep(.el-checkbox__label) {
+ padding-left: 4px;
+}
+</style>
+
--
Gitblit v1.9.3