front-end/admin-code/src/sass/manage/auth.vue

<template>
	<div class="app-list-content">
		<cl-crud @load="onLoad">
			<template #table-column-icon="{scope}">
				<icon-svg :name="scope.row.icon" size="20px"></icon-svg>
			</template>

			<!-- <template #table-column-perms="{scope}">
				<el-tag
					size="medium"
					v-for="(item, index) in scope.row.permList"
					:key="index"
					style="margin: 2px"
					>{{ item }}</el-tag
				>
			</template> -->
			<!-- 
			<template #table-column-router="{scope}">
				<el-link type="primary" :href="scope.row.router" v-if="scope.row.type == 1">{{
					scope.row.router
				}}</el-link>
				<span v-else>{{ scope.row.router }}</span>
			</template>

			<template #table-column-keepAlive="{scope}">
				<template v-if="scope.row.type == 1">
					<i class="el-icon-check" v-if="scope.row.keepAlive"></i>
					<i class="el-icon-close" v-else></i>
				</template>
			</template> -->

			<template #slot-column-op="{scope}">
				<el-button
					type="text"
					size="mini"
					@click="upsertAppend(scope.row)"
					v-if="scope.row.type != 2"
					>新增</el-button
				>
			</template>
		</cl-crud>

		<cl-context-menu ref="context-menu"></cl-context-menu>
	</div>
</template>

<script>
import { deepTree } from '@/cool/utils/index';

export default {
	data() {
		return {
			crud: null,
			parentArr: []
		};
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.sassAuth)
				.set('dict', {
					api: {
						page: 'authList',
						add: 'authAdd',
						update: 'authUpdate',
						delete: 'authDel'
					}
				})
				.set('table', {
					columns: [
						{
							prop: 'authName',
							label: '名称',
							width: 200
						},
						{
							prop: 'parentId',
							label: '父级ID',
							align: 'center',
							'min-width': 160
						},
						{
							prop: 'frontUrl',
							label: '前端路由',
							align: 'center',
							'min-width': 160
						},
						{
							prop: 'backUrl',
							label: '后端路由',
							align: 'center',
							'min-width': 160
						}
						// {
						// 	prop: 'addTime',
						// 	label: '时间',
						// 	align: 'center',
						// 	sortable: true,
						// 	width: 180
						// }
					],
					props: {
						'row-key': 'id'
					},
					on: {
						'row-click': (row, column) => {
							if (column.property && row.children) {
								app.refs('table').toggleRowExpansion(row);
							}
						},

						'row-contextmenu': (row, column, event) => {
							let list = [
								{
									label: '编辑',
									callback: (e, close) => {
										app.edit(row);
										close();
									}
								},
								{
									label: '删除',
									callback: (e, close) => {
										app.delete(row);
										close();
									}
								}
							];

							// if (row.type != 2) {
							// 	list.unshift({
							// 		label: '新增',
							// 		callback: (e, close) => {
							// 			this.upsertAppend(row);
							// 			close();
							// 		}
							// 	});
							// }

							this.$refs['context-menu'].open(event, {
								list
							});

							event.preventDefault();
						}
					},
					op: {
						props: {
							width: '200'
						},

						layout: ['slot-column-op', 'edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						width: '600px'
					},
					items: [
						{
							prop: 'parentId',
							label: '父权限',
							span: 24,
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择'
								},
								options: this.parentArr
							}
							// rules: {
							// 	required: true,
							// 	message: '级别不能为空'
							// }
						},
						{
							prop: 'name',
							label: '权限名',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入名称'
								}
							},
							rules: {
								required: true,
								message: '名称不能为空'
							}
						},
						{
							prop: 'frontUrl',
							label: '前端路由',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入'
								}
							},
							rules: {
								required: true,
								message: '前端路由不能为空'
							}
						},
						{
							prop: 'backUrl',
							label: '后端路由',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入'
								}
							}
						},
						{
							prop: 'endId',
							label: 'endId',
							span: 24,
							value: '1',
							hidden: true,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入'
								}
							}
						}
					]
				})
				.set('layout', [['refresh-btn', 'add-btn'], ['data-table']])
				.on('refresh', async (params, { next, render }) => {
					let { list } = await next(params);
					list = JSON.parse(JSON.stringify(list));
					list = list.map(e => {
						e.label = e.authName;
						e.value = e.id;
						return e;
					});
					this.crud.setData('upsert.items[prop:parentId].component.options', list);
					console.log(this.parentArr);
				})
				.done();

			app.refresh();
		},

		upsertAppend({ type, id }) {
			this.crud.append({
				parentId: id,
				type: type + 1
			});
		},

		setPermission({ id }) {
			this.crud.append({
				parentId: id,
				type: 2
			});
		},

		toUrl(url) {
			this.$router.push(url);
		}
	}
};
</script>