Selaa lähdekoodia

对接菜单模板

chenrui 3 vuotta sitten
vanhempi
commit
52fb6580bf

+ 30 - 0
src/api/mould.js

@@ -0,0 +1,30 @@
+import { axios } from '@/utils/request'
+
+//  菜单模板 列表  分页
+export const mouldList = (params) => {
+  const url = `/mould/queryPage/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+//  菜单模板 保存
+export const findMouldMenuSave = (params) => {
+  return axios({
+    url: '/mould/saveMouldMenu',
+    data: params,
+    method: 'post'
+  })
+}
+//  菜单模板 详情
+export const findMouldMenuDetail = (params) => {
+  const url = `/mould/findMouldMenu/${params.id}/${params.appType}`
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}

+ 10 - 0
src/config/router.config.js

@@ -125,6 +125,16 @@ export const asyncRouterMap = [
               icon: 'profile',
               permission: 'M_menusAuth_menu'
             }
+          },
+          {
+            path: '/menusAuth/menuMould',
+            name: 'MenuMould',
+            component: () => import(/* webpackChunkName: "auth" */ '@/views/power/menuMould/list.vue'),
+            meta: {
+              title: '菜单模板',
+              icon: 'profile'
+              // permission: 'M_menusAuth_menu'
+            }
           }
         ]
       },

+ 71 - 0
src/views/power/menuMould/list.vue

@@ -0,0 +1,71 @@
+<template>
+  <a-card size="small" :bordered="false" class="customerTypeList-wrap">
+    <!-- 列表 -->
+    <s-table
+      class="sTable"
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      :scroll="{ y: 300 }"
+      bordered>
+      <!-- 操作 -->
+      <template slot="action" slot-scope="text, record">
+        <a-icon type="setting" v-if="record.scopeType=='dz'" title="菜单权限" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" @click="handleSet(record)" />
+        <span v-else>--</span>
+      </template>
+    </s-table>
+    <!-- 新增/编辑 -->
+    <menu-mould-set-modal :openModal="openModal" :nowData="nowData" :itemId="itemId" @close="closeModal" />
+  </a-card>
+</template>
+
+<script>
+import { mouldList } from '@/api/mould'
+import { STable, VSelect } from '@/components'
+import menuMouldSetModal from './setModal.vue'
+export default {
+  components: { STable, VSelect, menuMouldSetModal },
+  data () {
+    return {
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
+        { title: '模板名称', dataIndex: 'name', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '模板权限类型', dataIndex: 'ruletype', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '备注', dataIndex: 'remarks', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: 200, align: 'center' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return mouldList(Object.assign(parameter, {})).then(res => {
+          const data = res.data
+          const no = (data.pageNo - 1) * data.pageSize
+          for (var i = 0; i < data.list.length; i++) {
+            data.list[i].no = no + i + 1
+            data.list[i].ruletype = data.list[i].scopeType == 'all' ? '全部权限' : '定制权限'
+          }
+          return data
+        })
+      },
+      openModal: false, //  新增编辑客户类型  弹框
+      itemId: '', //  当前id
+      nowData: null //  当前记录数据
+    }
+  },
+  methods: {
+    // 菜单权限设置
+    handleSet (row) {
+      this.itemId = row ? row.id : null
+      this.nowData = row || null
+      this.openModal = true
+    },
+    //  关闭弹框
+    closeModal () {
+      this.itemId = ''
+      this.nowData = null
+      this.openModal = false
+    }
+  }
+}
+</script>

+ 174 - 0
src/views/power/menuMould/setModal.vue

@@ -0,0 +1,174 @@
+<template>
+  <a-modal
+    centered
+    class="customerTypeEdit-modal"
+    :footer="null"
+    :maskClosable="false"
+    :title="modalTit"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="800">
+    <!-- 表单 -->
+    <div>
+      <a-form-model
+        id="customerTypeEdit-form"
+        ref="ruleForm"
+        :model="form"
+        :rules="rules"
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+      >
+        <a-tree
+          checkable
+          @check="onCheck"
+          @expand="onExpand"
+          :expandedKeys="expandedKeys"
+          :autoExpandParent="autoExpandParent"
+          v-model="checkedKeys"
+          :treeData="treeData"
+        />
+      </a-form-model>
+      <div class="btn-cont">
+        <a-button type="primary" id="customer-type-edit-modal-save" @click="handleSave">保存</a-button>
+        <a-button id="customer-type-edit-modal-back" @click="isShow = false" style="margin-left: 15px;">返回列表</a-button>
+      </div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { findMouldMenuDetail, findMouldMenuSave } from '@/api/mould'
+export default {
+  name: 'MenuMouldSetModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemId: {
+      type: [Number, String],
+      default: ''
+    },
+    nowData: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    modalTit () {
+      return '分配权限(' + (this.nowData && this.nowData.name ? this.nowData.name : '--') + ')'
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      detailData: null, //  数据
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 16 }
+      },
+      form: {},
+      rules: {},
+      treeData: [],
+      expandedKeys: [],
+      autoExpandParent: true,
+      checkedKeys: [],
+      checkedData: []
+    }
+  },
+  methods: {
+    onExpand (expandedKeys) {
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },
+    onCheck (checkedKeys, info) {
+      this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
+      this.checkedKeys = checkedKeys
+    },
+    //  保存
+    handleSave () {
+      const _this = this
+      if (this.checkedData.length == 0) {
+        return this.$message.warning('请先选择菜单')
+      }
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const arr = _this.checkedData.join(',')
+          findMouldMenuSave({ id: _this.itemId, menuIds: arr }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.isShow = false
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 详情
+    getDetail () {
+      findMouldMenuDetail({ id: this.itemId, appType: 2 }).then(res => {
+        if (res.status == 200) {
+          this.treeData = res.data.menuList
+          if (res.data.mould.menuIds) {
+            const arr = res.data.mould.menuIds.split(',')
+            this.checkedData = arr
+            // 找出叶子节点
+            this.findLeaf(this.treeData, arr)
+          }
+        }
+      })
+    },
+    // 查找叶子节点
+    findLeaf (data, arr) {
+      for (let i = 0; i < data.length; i++) {
+        const node = data[i]
+        if (node.children) {
+          this.findLeaf(node.children, arr)
+        } else {
+          const hasNode = arr.find(item => {
+            return item == node.id
+          })
+          if (hasNode) {
+            this.expandedKeys.push(node.id)
+            this.checkedKeys.push(node.id)
+          }
+        }
+      }
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.$refs.ruleForm.resetFields()
+        this.checkedKeys = []
+        this.expandedKeys = []
+      }
+    },
+    itemId (newValue, oldValue) {
+      if (this.isShow && newValue) {
+        this.getDetail()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .customerTypeEdit-modal{
+    .ant-modal-body {
+      padding: 40px 40px 24px;
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+  }
+</style>