n20-common-lib 1.1.98

package/src/plugins/SetMenuTree/logoIcon.vue

@@ -0,0 +1,37 @@
+<template>
+  <img
+    v-if="/^\/|data:/.test(logo)"
+    :src="logo"
+    class="m-r-s"
+    :style="{
+      width: width,
+      height: width
+    }"
+  />
+  <span
+    v-else
+    class="m-r-s bd-a"
+    :class="logo"
+    :style="{
+      display: 'inline-block',
+      width: width,
+      height: width,
+      fontSize: width
+    }"
+  ></span>
+</template>
+
+<script>
+export default {
+  props: {
+    logo: {
+      type: String,
+      default: undefined
+    },
+    width: {
+      type: String,
+      default: '30px'
+    }
+  }
+}
+</script>

package/src/plugins/SetMenuTree/setmenutree.vue

@@ -0,0 +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>

package/src/plugins/SetMenuTree/utils.js

@@ -0,0 +1,74 @@
+import forEachs from '../../utils/forEachs'
+
+export function treeSource2menutree(obj) {
+  let appNo = obj.appNo
+  let version = obj.version
+  let menuTree = obj.initResInfo || []
+  let menuid = 0
+  let rE = new RegExp('^/' + appNo)
+
+  forEachs(menuTree, (item, i, arr, arrp) => {
+    menuid = menuid + 1
+    let resType = item.resType
+    if (item.resType === '3' && rE.test(item.relaUrl)) {
+      resType = '1'
+    }
+    Object.assign(item, {
+      menuid: menuid,
+      appNo: appNo,
+      label: item.relaName,
+      treeno: item.relaNo,
+      pageurl: item.relaUrl,
+      sortnum: i + '',
+      resType: resType,
+      isDisplay: '1',
+      logo: item.logo || '',
+      pmid: arrp.menuid,
+      parentTreeNo: arrp.treeno,
+      status: '1',
+      isSearch: ['1', '2'].includes(resType) ? '1' : '0',
+      version: version
+    })
+    delete item.relaName
+    delete item.relaNo
+    delete item.relaUrl
+  })
+
+  return menuTree
+}
+
+export function menutree2treeSource(menuTree) {
+  let omenu = menuTree[0]
+  let appNo = omenu.appNo
+  let version = omenu.version
+  forEachs(menuTree, (item) => {
+    Object.assign(item, {
+      relaName: item.label,
+      relaNo: item.treeno,
+      relaUrl: item.pageurl,
+      displayOrder: item.displayOrder,
+      resType: item.resType
+    })
+    delete item.menuid
+    delete item.appNo
+    delete item.label
+    delete item.pageurl
+    delete item.sortnum
+    delete item.isDisplay
+    delete item.status
+    delete item.path
+    delete item.isSearch
+    delete item.parentTreeNo
+    delete item.pmid
+    delete item.treeno
+    delete item.version
+  })
+
+  let _version = window.prompt(`请输入应用[${appNo}]的版本号`, version)
+
+  return {
+    appNo: appNo,
+    version: _version || version,
+    initResInfo: menuTree
+  }
+}