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