n20-common-lib 1.2.1 → 1.2.4

package/src/plugins/SetMenuTree/setmenutree.vue

@@ -1,427 +1,427 @@
-<template>
-  <div class="flex-box" style="height: 420px">
-    <div class="flex-column bd-r" style="width: 300px; height: 100%">
-      <div class="flex-box flex-v">
-        <span>导航菜单树</span>
-        <el-button
-          class="m-l-auto"
-          type="primary"
-          size="mini"
-          @click="saveMenuTree"
-          >保存菜单树</el-button
-        >
-        <el-button class="m-r-s" plain size="mini" @click="addFF"
-          >新建目录</el-button
-        >
-      </div>
-      <el-tree
-        ref="menu-tree"
-        class="flex-item p-t p-b"
-        :data="menuTree"
-        :props="{
-          children: 'children',
-          label: 'label'
-        }"
-        node-key="menuid"
-        highlight-current
-        draggable
-        style="overflow: auto"
-        @node-click="clickMenu"
-      >
-        <span
-          slot-scope="{ node, data }"
-          class="menu-item flex-item flex-box flex-lr flex-v"
-        >
-          <span>
-            <logoIcon
-              v-if="data.logo"
-              :logo="data.logo"
-              width="14px"
-              style="vertical-align: bottom"
-            />
-            {{ node.label || '未命名...' }}</span
-          >
-          <span class="menu-item-btn m-r">
-            <el-button
-              v-title="'新增下级'"
-              icon="el-icon-document-add"
-              plain
-              onlyicon
-              size="mini"
-              @click.stop="() => appendMenu(data)"
-            />
-            <el-button
-              v-title="'删除本级和下级'"
-              icon="el-icon-document-delete"
-              plain
-              onlyicon
-              size="mini"
-              @click.stop="() => removeMenu(node, data)"
-            />
-          </span>
-        </span>
-      </el-tree>
-    </div>
-    <div class="flex-item p-l flex-column" style="height: 100%">
-      <div style="line-height: 28px">菜单/按钮详情</div>
-      <div class="flex-item p-t p-b flex-box flex-c">
-        <el-form
-          v-if="activeMenu.menuid"
-          ref="menu-form"
-          label-width="6em"
-          label-position="right"
-          :model="activeMenu"
-        >
-          <el-form-item
-            label="名称:"
-            prop="label"
-            :rules="[
-              { required: true, message: '请输入名称', trigger: 'blur' }
-            ]"
-          >
-            <el-input v-model="activeMenu.label" class="w-224" />
-          </el-form-item>
-          <el-form-item label="属性:">
-            <el-select v-model="activeMenu.resType" class="w-224">
-              <el-option value="1" label="左边栏菜单" />
-              <el-option value="2" label="隐藏菜单" />
-              <el-option value="3" label="权限按钮" />
-            </el-select>
-          </el-form-item>
-
-          <el-form-item
-            v-if="activeMenu.resType === '1'"
-            label="所属模块"
-            prop="appNo"
-            :rules="[
-              { required: true, message: '请输入所属模块', trigger: 'blur' }
-            ]"
-          >
-            <el-input
-              v-model="activeMenu.appNo"
-              class="w-224"
-              @change="(val) => setAppNo(val, activeMenu)"
-            />
-          </el-form-item>
-
-          <template v-if="['1', '2'].includes(activeMenu.resType)">
-            <el-form-item
-              label="访问路径:"
-              prop="pageurl"
-              :rules="[
-                { required: true, message: '请输入访问路径', trigger: 'blur' }
-              ]"
-            >
-              <el-input v-model="activeMenu.pageurl" class="w-224" />
-            </el-form-item>
-            <el-form-item label="图标:">
-              <div class="flex-box">
-                <logoIcon :logo="activeMenu.logo" />
-                <div class="m-r-s">
-                  <el-button plain size="mini" @click="sltLogoV = true"
-                    >选择图标</el-button
-                  >
-                </div>
-                <el-upload
-                  action="http://nstc.com.cn"
-                  accept="image/*"
-                  :show-file-list="false"
-                  :http-request="(req) => uploadFile(req, activeMenu)"
-                >
-                  <el-button slot="trigger" plain size="mini"
-                    >上传图标</el-button
-                  >
-                </el-upload>
-              </div>
-            </el-form-item>
-            <el-form-item label="快捷菜单: ">
-              <template slot="label">
-                <span>快捷菜单:</span>
-              </template>
-              <el-switch
-                v-model="activeMenu.isDisplay"
-                v-title="'是否作为门户首页的快捷入口的备选项'"
-                active-value="1"
-                inactive-value="0"
-                active-text="是"
-                inactive-text="否"
-                inline
-                :width="46"
-              />
-            </el-form-item>
-          </template>
-          <el-form-item v-if="activeMenu.treeno" label="权限编码:">
-            <div class="w-224 flex-box">
-              <el-input class="flex-item" :value="activeMenu.treeno" readonly />
-            </div>
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
-    <el-dialog
-      title="选择图标"
-      :visible.sync="sltLogoV"
-      width="714px"
-      append-to-body
-    >
-      <div class="overflow">
-        <div
-          v-for="(item, i) in logosClass"
-          :key="i"
-          class="m-icon-item flex-column left m-l m-r"
-          :class="{ active: sltIcon === item }"
-          style="width: 80px; height: 120px"
-          @click="sltIcon = item"
-        >
-          <div class="text-c" style="font-size: 32px">
-            <i :class="item"></i>
-          </div>
-          <div class="m-t text-c">{{ item }}</div>
-        </div>
-      </div>
-      <div class="dialog-footer">
-        <el-button type="primary" @click="sltLogo">确认</el-button>
-        <el-button @click="closeSltLogo">取消</el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-unused-vars */
-
-import { nanoid } from 'nanoid'
-import forEachs from '../../utils/forEachs'
-import list2tree from '../../utils/list2tree'
-import { treeSource2menutree, menutree2treeSource } from './utils'
-import logoIcon from './logoIcon.vue'
-
-export default {
-  components: {
-    logoIcon
-  },
-  filters: {
-    typeF(v) {}
-  },
-  props: {
-    setNew: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    this.menuidMax = 0
-    return {
-      menuTree: [],
-      activeMenu: {},
-      exKeys: [],
-      sltLogoV: false,
-      sltIcon: undefined,
-      logosClass: [
-        'el-icon-s-home',
-        'el-icon-s-cooperation',
-        'el-icon-s-order',
-        'el-icon-s-management',
-        'el-icon-s-marketing',
-        'el-icon-s-comment',
-        'el-icon-menu',
-        'el-icon-s-grid',
-        'el-icon-s-data',
-        'el-icon-date',
-        'el-icon-pie-chart',
-        'el-icon-loading'
-      ]
-    }
-  },
-  created() {
-    if (this.setNew) {
-      this.getMenuTree()
-    } else {
-      this.getTreeSource()
-    }
-  },
-  methods: {
-    getMenuTree() {
-      this.$axios
-        .get('/server-assets/menutree.json', null, { noMsg: true })
-        .then((res) => {
-          this.menuTree = res.map((c) => c)
-        })
-        .catch(this.getTreeSource())
-    },
-    getTreeSource() {
-      this.$axios.get('/json/treeSource.json').then((res) => {
-        this.menuTree = treeSource2menutree(res)
-      })
-    },
-    saveMenuTree() {
-      this.$msgboxPor({
-        title: '保存菜单树',
-        message: '保存菜单树会覆盖原有的菜单树, 确定要保存吗?',
-        type: 'warning',
-        confirmButtonText: '确定',
-        cancelButtonText: '取消'
-      }).then(() => {
-        this.saveMenuTreeAs()
-      })
-    },
-    saveMenuTreeAs() {
-      let menuTree = JSON.parse(JSON.stringify(this.menuTree))
-      forEachs(menuTree, (item, i, arr) => {
-        item.status = '1'
-        item.sortnum = (i + 1).toString()
-        item.path = null
-
-        item?.children?.forEach((c) => {
-          c.pmid = item.menuid
-          c.parentTreeNo = item.treeno
-        })
-
-        if (['1', '2'].includes(item.resType)) {
-          item.isSearch = '1'
-        } else {
-          item.isSearch = '0'
-          item.pageurl = null
-        }
-      })
-
-      if (this.setNew) {
-        this.setMenuTree(menuTree)
-      } else {
-        this.setTreeSource(menuTree)
-      }
-    },
-    setMenuTree(menuTree) {
-      this.$axios.post('/set-file', {
-        fileName: 'server-assets/menutree.json',
-        fileContent: JSON.stringify(menuTree, null, 2)
-      })
-    },
-    setTreeSource(menuTree) {
-      let treeSource = menutree2treeSource(menuTree)
-      this.$axios.post('/set-file', {
-        fileName: 'json/treeSource.json',
-        fileContent: JSON.stringify(treeSource, null, 2)
-      })
-    },
-    addFF() {
-      this.menuidMax = this.menuidMax + 1
-      let menu = {
-        menuid: this.menuidMax /* * -1 */,
-        appNo: '',
-        label: '',
-        treeno: '',
-        pageurl: '',
-        sortnum: 0,
-        resType: '1',
-        isDisplay: '1',
-        children: []
-      }
-      this.menuTree.unshift(menu)
-
-      this.$nextTick(() => {
-        this.activeMenu = menu
-        this.$refs['menu-tree'].setCurrentKey(menu.menuid)
-      })
-    },
-    appendMenu(data) {
-      this.menuidMax = this.menuidMax + 1
-      let appNo = data.appNo
-
-      let menu = {
-        menuid: this.menuidMax /* * -1 */,
-        appNo: appNo,
-        label: '',
-        treeno: appNo + '-' + nanoid(8),
-        pageurl: '',
-        sortnum: undefined,
-        resType: '3',
-        isDisplay: '0'
-      }
-
-      data.children || this.$set(data, 'children', [])
-
-      if (data.children.length === 0) {
-        menu.sortnum = '1'
-        data.children.push(menu)
-      } else {
-        let lastC = data.children[data.children.length - 1]
-        let sortnum = Number(lastC.sortnum) + 1
-        menu.sortnum = sortnum.toString()
-
-        data.children.push(menu)
-      }
-
-      this.$nextTick(() => {
-        this.activeMenu = menu
-        this.$refs['menu-tree'].setCurrentKey(menu.menuid)
-      })
-    },
-    removeMenu(node, data) {
-      this.$msgboxPor({
-        title: '删除菜单/按钮',
-        message: '确定要删除吗?',
-        type: 'warning',
-        confirmButtonText: '确定',
-        cancelButtonText: '取消'
-      }).then(() => {
-        let children = node.parent.data.children || node.parent.data
-        let index = children.findIndex((d) => d.menuid === data.menuid)
-        index !== -1 && children.splice(index, 1)
-      })
-    },
-    clickMenu(data) {
-      this.activeMenu = data
-    },
-    setAppNo(val, menu) {
-      if (val && !menu.treeno) {
-        menu.treeno = val + '-' + nanoid(8)
-      }
-    },
-    uploadFile(req, menu) {
-      let fR = new FileReader()
-      fR.onload = (e) => {
-        menu.logo = e.target.result
-      }
-      fR.readAsDataURL(req.file)
-    },
-    closeSltLogo() {
-      this.sltIcon = undefined
-      this.sltLogoV = false
-    },
-    sltLogo() {
-      this.activeMenu.logo = this.sltIcon
-      this.sltLogoV = false
-    },
-    submitForm() {
-      this.$refs['menu-form'].validate((valid) => {
-        if (valid) {
-          Object.assign(this.activeMenu, this.activeMenu)
-        }
-      })
-    }
-  }
-}
-</script>
-<style scoped>
-.menu-item .menu-item-btn {
-  display: none;
-}
-.menu-item:hover .menu-item-btn {
-  display: block;
-}
-
-.m-icon-item {
-  cursor: pointer;
-}
-.m-icon-item:hover {
-  color: var(--color-primary);
-}
-.m-icon-item.active {
-  color: var(--color-primary);
-}
-
-.hint {
-  color: var(--color-text-placeholder);
-}
-</style>
+<template>
+  <div class="flex-box" style="height: 420px">
+    <div class="flex-column bd-r" style="width: 300px; height: 100%">
+      <div class="flex-box flex-v">
+        <span>导航菜单树</span>
+        <el-button
+          class="m-l-auto"
+          type="primary"
+          size="mini"
+          @click="saveMenuTree"
+          >保存菜单树</el-button
+        >
+        <el-button class="m-r-s" plain size="mini" @click="addFF"
+          >新建目录</el-button
+        >
+      </div>
+      <el-tree
+        ref="menu-tree"
+        class="flex-item p-t p-b"
+        :data="menuTree"
+        :props="{
+          children: 'children',
+          label: 'label'
+        }"
+        node-key="menuid"
+        highlight-current
+        draggable
+        style="overflow: auto"
+        @node-click="clickMenu"
+      >
+        <span
+          slot-scope="{ node, data }"
+          class="menu-item flex-item flex-box flex-lr flex-v"
+        >
+          <span>
+            <logoIcon
+              v-if="data.logo"
+              :logo="data.logo"
+              width="14px"
+              style="vertical-align: bottom"
+            />
+            {{ node.label || '未命名...' }}</span
+          >
+          <span class="menu-item-btn m-r">
+            <el-button
+              v-title="'新增下级'"
+              icon="el-icon-document-add"
+              plain
+              onlyicon
+              size="mini"
+              @click.stop="() => appendMenu(data)"
+            />
+            <el-button
+              v-title="'删除本级和下级'"
+              icon="el-icon-document-delete"
+              plain
+              onlyicon
+              size="mini"
+              @click.stop="() => removeMenu(node, data)"
+            />
+          </span>
+        </span>
+      </el-tree>
+    </div>
+    <div class="flex-item p-l flex-column" style="height: 100%">
+      <div style="line-height: 28px">菜单/按钮详情</div>
+      <div class="flex-item p-t p-b flex-box flex-c">
+        <el-form
+          v-if="activeMenu.menuid"
+          ref="menu-form"
+          label-width="6em"
+          label-position="right"
+          :model="activeMenu"
+        >
+          <el-form-item
+            label="名称:"
+            prop="label"
+            :rules="[
+              { required: true, message: '请输入名称', trigger: 'blur' }
+            ]"
+          >
+            <el-input v-model="activeMenu.label" class="w-224" />
+          </el-form-item>
+          <el-form-item label="属性:">
+            <el-select v-model="activeMenu.resType" class="w-224">
+              <el-option value="1" label="左边栏菜单" />
+              <el-option value="2" label="隐藏菜单" />
+              <el-option value="3" label="权限按钮" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item
+            v-if="activeMenu.resType === '1'"
+            label="所属模块"
+            prop="appNo"
+            :rules="[
+              { required: true, message: '请输入所属模块', trigger: 'blur' }
+            ]"
+          >
+            <el-input
+              v-model="activeMenu.appNo"
+              class="w-224"
+              @change="(val) => setAppNo(val, activeMenu)"
+            />
+          </el-form-item>
+
+          <template v-if="['1', '2'].includes(activeMenu.resType)">
+            <el-form-item
+              label="访问路径:"
+              prop="pageurl"
+              :rules="[
+                { required: true, message: '请输入访问路径', trigger: 'blur' }
+              ]"
+            >
+              <el-input v-model="activeMenu.pageurl" class="w-224" />
+            </el-form-item>
+            <el-form-item label="图标:">
+              <div class="flex-box">
+                <logoIcon :logo="activeMenu.logo" />
+                <div class="m-r-s">
+                  <el-button plain size="mini" @click="sltLogoV = true"
+                    >选择图标</el-button
+                  >
+                </div>
+                <el-upload
+                  action="http://nstc.com.cn"
+                  accept="image/*"
+                  :show-file-list="false"
+                  :http-request="(req) => uploadFile(req, activeMenu)"
+                >
+                  <el-button slot="trigger" plain size="mini"
+                    >上传图标</el-button
+                  >
+                </el-upload>
+              </div>
+            </el-form-item>
+            <el-form-item label="快捷菜单: ">
+              <template slot="label">
+                <span>快捷菜单:</span>
+              </template>
+              <el-switch
+                v-model="activeMenu.isDisplay"
+                v-title="'是否作为门户首页的快捷入口的备选项'"
+                active-value="1"
+                inactive-value="0"
+                active-text="是"
+                inactive-text="否"
+                inline
+                :width="46"
+              />
+            </el-form-item>
+          </template>
+          <el-form-item v-if="activeMenu.treeno" label="权限编码:">
+            <div class="w-224 flex-box">
+              <el-input class="flex-item" :value="activeMenu.treeno" readonly />
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <el-dialog
+      title="选择图标"
+      :visible.sync="sltLogoV"
+      width="714px"
+      append-to-body
+    >
+      <div class="overflow">
+        <div
+          v-for="(item, i) in logosClass"
+          :key="i"
+          class="m-icon-item flex-column left m-l m-r"
+          :class="{ active: sltIcon === item }"
+          style="width: 80px; height: 120px"
+          @click="sltIcon = item"
+        >
+          <div class="text-c" style="font-size: 32px">
+            <i :class="item"></i>
+          </div>
+          <div class="m-t text-c">{{ item }}</div>
+        </div>
+      </div>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="sltLogo">确认</el-button>
+        <el-button @click="closeSltLogo">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-unused-vars */
+
+import { nanoid } from 'nanoid'
+import forEachs from '../../utils/forEachs'
+import list2tree from '../../utils/list2tree'
+import { treeSource2menutree, menutree2treeSource } from './utils'
+import logoIcon from './logoIcon.vue'
+
+export default {
+  components: {
+    logoIcon
+  },
+  filters: {
+    typeF(v) {}
+  },
+  props: {
+    setNew: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    this.menuidMax = 0
+    return {
+      menuTree: [],
+      activeMenu: {},
+      exKeys: [],
+      sltLogoV: false,
+      sltIcon: undefined,
+      logosClass: [
+        'el-icon-s-home',
+        'el-icon-s-cooperation',
+        'el-icon-s-order',
+        'el-icon-s-management',
+        'el-icon-s-marketing',
+        'el-icon-s-comment',
+        'el-icon-menu',
+        'el-icon-s-grid',
+        'el-icon-s-data',
+        'el-icon-date',
+        'el-icon-pie-chart',
+        'el-icon-loading'
+      ]
+    }
+  },
+  created() {
+    if (this.setNew) {
+      this.getMenuTree()
+    } else {
+      this.getTreeSource()
+    }
+  },
+  methods: {
+    getMenuTree() {
+      this.$axios
+        .get('/server-assets/menutree.json', null, { noMsg: true })
+        .then((res) => {
+          this.menuTree = res.map((c) => c)
+        })
+        .catch(this.getTreeSource())
+    },
+    getTreeSource() {
+      this.$axios.get('/json/treeSource.json').then((res) => {
+        this.menuTree = treeSource2menutree(res)
+      })
+    },
+    saveMenuTree() {
+      this.$msgboxPor({
+        title: '保存菜单树',
+        message: '保存菜单树会覆盖原有的菜单树, 确定要保存吗?',
+        type: 'warning',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消'
+      }).then(() => {
+        this.saveMenuTreeAs()
+      })
+    },
+    saveMenuTreeAs() {
+      let menuTree = JSON.parse(JSON.stringify(this.menuTree))
+      forEachs(menuTree, (item, i, arr) => {
+        item.status = '1'
+        item.sortnum = (i + 1).toString()
+        item.path = null
+
+        item?.children?.forEach((c) => {
+          c.pmid = item.menuid
+          c.parentTreeNo = item.treeno
+        })
+
+        if (['1', '2'].includes(item.resType)) {
+          item.isSearch = '1'
+        } else {
+          item.isSearch = '0'
+          item.pageurl = null
+        }
+      })
+
+      if (this.setNew) {
+        this.setMenuTree(menuTree)
+      } else {
+        this.setTreeSource(menuTree)
+      }
+    },
+    setMenuTree(menuTree) {
+      this.$axios.post('/set-file', {
+        fileName: 'server-assets/menutree.json',
+        fileContent: JSON.stringify(menuTree, null, 2)
+      })
+    },
+    setTreeSource(menuTree) {
+      let treeSource = menutree2treeSource(menuTree)
+      this.$axios.post('/set-file', {
+        fileName: 'json/treeSource.json',
+        fileContent: JSON.stringify(treeSource, null, 2)
+      })
+    },
+    addFF() {
+      this.menuidMax = this.menuidMax + 1
+      let menu = {
+        menuid: this.menuidMax /* * -1 */,
+        appNo: '',
+        label: '',
+        treeno: '',
+        pageurl: '',
+        sortnum: 0,
+        resType: '1',
+        isDisplay: '1',
+        children: []
+      }
+      this.menuTree.unshift(menu)
+
+      this.$nextTick(() => {
+        this.activeMenu = menu
+        this.$refs['menu-tree'].setCurrentKey(menu.menuid)
+      })
+    },
+    appendMenu(data) {
+      this.menuidMax = this.menuidMax + 1
+      let appNo = data.appNo
+
+      let menu = {
+        menuid: this.menuidMax /* * -1 */,
+        appNo: appNo,
+        label: '',
+        treeno: appNo + '-' + nanoid(8),
+        pageurl: '',
+        sortnum: undefined,
+        resType: '3',
+        isDisplay: '0'
+      }
+
+      data.children || this.$set(data, 'children', [])
+
+      if (data.children.length === 0) {
+        menu.sortnum = '1'
+        data.children.push(menu)
+      } else {
+        let lastC = data.children[data.children.length - 1]
+        let sortnum = Number(lastC.sortnum) + 1
+        menu.sortnum = sortnum.toString()
+
+        data.children.push(menu)
+      }
+
+      this.$nextTick(() => {
+        this.activeMenu = menu
+        this.$refs['menu-tree'].setCurrentKey(menu.menuid)
+      })
+    },
+    removeMenu(node, data) {
+      this.$msgboxPor({
+        title: '删除菜单/按钮',
+        message: '确定要删除吗?',
+        type: 'warning',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消'
+      }).then(() => {
+        let children = node.parent.data.children || node.parent.data
+        let index = children.findIndex((d) => d.menuid === data.menuid)
+        index !== -1 && children.splice(index, 1)
+      })
+    },
+    clickMenu(data) {
+      this.activeMenu = data
+    },
+    setAppNo(val, menu) {
+      if (val && !menu.treeno) {
+        menu.treeno = val + '-' + nanoid(8)
+      }
+    },
+    uploadFile(req, menu) {
+      let fR = new FileReader()
+      fR.onload = (e) => {
+        menu.logo = e.target.result
+      }
+      fR.readAsDataURL(req.file)
+    },
+    closeSltLogo() {
+      this.sltIcon = undefined
+      this.sltLogoV = false
+    },
+    sltLogo() {
+      this.activeMenu.logo = this.sltIcon
+      this.sltLogoV = false
+    },
+    submitForm() {
+      this.$refs['menu-form'].validate((valid) => {
+        if (valid) {
+          Object.assign(this.activeMenu, this.activeMenu)
+        }
+      })
+    }
+  }
+}
+</script>
+<style scoped>
+.menu-item .menu-item-btn {
+  display: none;
+}
+.menu-item:hover .menu-item-btn {
+  display: block;
+}
+
+.m-icon-item {
+  cursor: pointer;
+}
+.m-icon-item:hover {
+  color: var(--color-primary);
+}
+.m-icon-item.active {
+  color: var(--color-primary);
+}
+
+.hint {
+  color: var(--color-text-placeholder);
+}
+</style>