blog的后端代码
view | history | commit | commitdiff
inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 /* eslint-disable */
I 2 <template>
3   <div>
4     <x-card v-if="hasPerm('sysMenu:list')">
5       <div slot="content" class="table-page-search-wrapper">
6         <a-form layout="inline">
7           <a-row :gutter="48">
8             <a-col :md="8" :sm="24">
9               <a-form-item label="菜单名称">
10                 <a-input v-model="queryParam.name" allow-clear placeholder="请输入菜单名称"/>
11               </a-form-item>
12             </a-col>
13             <a-col :md="8" :sm="24">
14               <a-form-item label="选择应用">
15                 <a-select v-model="queryParam.application" placeholder="请选择选择应用" allow-clear>
16                   <a-select-option v-for="(item,index) in this.userInfo.apps" :key="index" :value="item.code" >{{ item.name }}</a-select-option>
17                 </a-select>
18               </a-form-item>
19             </a-col>
20             <a-col :md="8" :sm="24">
21               <span class="table-page-search-submitButtons">
22                 <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
23                 <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
24               </span>
25             </a-col>
26           </a-row>
27         </a-form>
28       </div>
29     </x-card>
30     <a-card :bordered="false">
31       <s-table
32         ref="table"
33         :rowKey="(record) => record.id"
34         :columns="columns"
35         :alert="false"
36         :data="loadData"
37         :showPagination="false"
38         :expandRowByClick="true"
39       >
40         <template slot="operator">
41           <a-button type="primary" v-if="hasPerm('sysMenu:add')" icon="plus" @click="$refs.addForm.add()">新增菜单</a-button>
42         </template>
43         <span slot="type" slot-scope="text">
44           <a-tag color="cyan" v-if="text === 0">
45             {{ 'menu_type' | dictType(text) }}
46           </a-tag>
47           <a-tag color="blue" v-if="text === 1">
48             {{ 'menu_type' | dictType(text) }}
49           </a-tag>
50           <a-tag color="purple" v-if="text === 2">
51             {{ 'menu_type' | dictType(text) }}
52           </a-tag>
53         </span>
54         <span slot="icon" slot-scope="text">
55           <div v-if="text != null && text != ''">
56             <a-icon :type="text"/>
57           </div>
58         </span>
59         <span slot="action" slot-scope="text, record">
60           <template>
61             <a v-if="hasPerm('sysMenu:edit')" @click="$refs.editForm.edit(record)">编辑</a>
62             <a-divider type="vertical" v-if="hasPerm('sysMenu:edit') & hasPerm('sysMenu:delete')"/>
63             <a-popconfirm v-if="hasPerm('sysMenu:delete')" placement="topRight" title="删除本菜单与下级？" @confirm="() => handleDel(record)">
64               <a>删除</a>
65             </a-popconfirm>
66           </template>
67         </span>
68       </s-table>
69       <add-form ref="addForm" @ok="handleOk"/>
70       <edit-form ref="editForm" @ok="handleOk"/>
71     </a-card>
72   </div>
73 </template>
74
75 <script>
76 import { STable, XCard } from '@/components'
77 import { getMenuList, sysMenuDelete } from '@/api/modular/system/menuManage'
78 import addForm from './addForm'
79 import editForm from './editForm'
80 import { mapGetters } from 'vuex'
81
82 export default {
83   components: {
84     STable,
85     XCard,
86     addForm,
87     editForm
88   },
89   data () {
90     return {
91       data: [],
92       queryParam: {},
93       loading: true,
94       columns: [
95         {
96           title: '菜单名称',
97           dataIndex: 'name',
98           width: '20%'
99         },
100         {
101           title: '菜单类型',
102           dataIndex: 'type',
103           scopedSlots: { customRender: 'type' }
104         },
105         {
106           title: '图标',
107           dataIndex: 'icon',
108           scopedSlots: { customRender: 'icon' }
109         },
110         {
111           title: '组件',
112           dataIndex: 'component',
113           width: '20%',
114           ellipsis: true
115         },
116         {
117           title: '路由地址',
118           dataIndex: 'router',
119           key: 'router',
120           ellipsis: true
121         },
122         {
123           title: '排序',
124           dataIndex: 'sort'
125         }
126       ],
127       loadData: parameter => {
128         return getMenuList(Object.assign(parameter, this.queryParam)).then((res) => {
129           this.removeEmptyChildren(res.data)
130           return res.data
131         })
132       }
133     }
134   },
135   computed: {
136     ...mapGetters(['userInfo'])
137   },
138   created () {
139     if (this.hasPerm('sysMenu:edit') || this.hasPerm('sysMenu:delete')) {
140       this.columns.push({
141         title: '操作',
142         dataIndex: 'action',
143         width: '150px',
144         scopedSlots: { customRender: 'action' }
145       })
146     }
147   },
148   methods: {
149     /**
150      * 去掉无用的支节点
151      */
152     removeEmptyChildren(data) {
153       if (data == null || data.length === 0) return
154       for (let i = 0; i < data.length; i++) {
155         const item = data[i]
156         if (item.children != null && item.children.length === 0) {
157           item.children = null
158         } else {
159           this.removeEmptyChildren(item.children)
160         }
161       }
162     },
163     handleDel (record) {
164       sysMenuDelete(record).then((res) => {
165         if (res.success) {
166           this.$message.success('删除成功')
167           this.$refs.table.refresh()
168         } else {
169           this.$message.error('删除失败：' + res.message)
170         }
171       })
172     },
173     handleOk () {
174       this.$refs.table.refresh()
175     }
176   }
177 }
178
179 </script>
180 <style scoped>
181 .table-operator {
182   margin-bottom: 18px;
183 }
184 button {
185   margin-right: 8px;
186 }
187 </style>