123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308 |
- import {AddReq, DelReq, EditReq, dict, CreateCrudOptionsRet, CreateCrudOptionsProps} from '@fast-crud/fast-crud';
- import * as api from './api';
- import {auth} from '/@/utils/authFunction'
- import {request} from '/@/utils/service';
- import { successNotification } from '/@/utils/message';
- import { ElMessage } from 'element-plus';
- import { nextTick, ref } from 'vue';
- import XEUtils from 'xe-utils';
- //此处为crudOptions配置
- export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
- const pageRequest = async () => {
- if (context!.selectOptions.value.id) {
- return await api.GetList({menu: context!.selectOptions.value.id} as any);
- } else {
- return undefined;
- }
- };
- const editRequest = async ({form, row}: EditReq) => {
- return await api.UpdateObj({...form, menu: row.menu});
- };
- const delRequest = async ({row}: DelReq) => {
- return await api.DelObj(row.id);
- };
- const addRequest = async ({form}: AddReq) => {
- return await api.AddObj({...form, ...{menu: context!.selectOptions.value.id}});
- };
- // 记录选中的行
- const selectedRows = ref<any>([]);
- const onSelectionChange = (changed: any) => {
- const tableData = crudExpose.getTableData();
- const unChanged = tableData.filter((row: any) => !changed.includes(row));
- // 添加已选择的行
- XEUtils.arrayEach(changed, (item: any) => {
- const ids = XEUtils.pluck(selectedRows.value, 'id');
- if (!ids.includes(item.id)) {
- selectedRows.value = XEUtils.union(selectedRows.value, [item]);
- }
- });
- // 剔除未选择的行
- XEUtils.arrayEach(unChanged, (unItem: any) => {
- selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== unItem.id);
- });
- };
- const toggleRowSelection = () => {
- // 多选后,回显默认勾选
- const tableRef = crudExpose.getBaseTableRef();
- const tableData = crudExpose.getTableData();
- const selected = XEUtils.filter(tableData, (item: any) => {
- const ids = XEUtils.pluck(selectedRows.value, 'id');
- return ids.includes(item.id);
- });
- nextTick(() => {
- XEUtils.arrayEach(selected, (item) => {
- tableRef.toggleRowSelection(item, true);
- });
- });
- };
-
- return {
- selectedRows,
- crudOptions: {
- toolbar:{
- buttons:{
- search:{show:true},
- // 刷新按钮
- refresh:{
- show:true},
- // 紧凑模式
- compact:{show:false},
- // 导出按钮
- /* export:{
- text: '导出',
- type: 'primary',
- size: 'small',
- icon: 'upload',
- circle: false,
- display: true
- }, */
- // 列设置按钮
- columns:{
- show:false
- },
- }
- },
- pagination:{
- show:true
- },
- search: {
- container: {
- action: {
- //按钮栏配置
- col: {
- span: 8,
- },
- },
- },
- },
- actionbar: {
- buttons: {
- add: {
- show: auth('btn:Create')
- },
- batchAdd: {
- show: true,
- type: 'primary',
- text: '批量生成',
- click: async () => {
- if (context!.selectOptions.value.id == undefined) {
- ElMessage.error('请选择菜单');
- return;
- }
- const result = await api.BatchAdd({ menu: context!.selectOptions.value.id });
- if (result.code == 2000) {
- successNotification(result.msg);
- crudExpose.doRefresh();
- }
- },
- },
- },
- },
- rowHandle: {
- //固定右侧
- fixed: 'right',
- width: 200,
- buttons: {
- view: {
- show: false,
- },
- edit: {
- icon: '',
- type: 'primary',
- show: auth('btn:Update')
- },
- remove: {
- show: auth('btn:Delete')
- },
- },
- },
- request: {
- pageRequest,
- addRequest,
- editRequest,
- delRequest,
- },
- table: {
- rowKey: 'id', //设置你的主键id, 默认rowKey=id
- onSelectionChange,
- onRefreshed: () => toggleRowSelection(),
- },
- form: {
- col: {span: 24},
- labelWidth: '100px',
- wrapper: {
- is: 'el-dialog',
- width: '600px',
- },
- },
- columns: {
- $checked: {
- title: '选择',
- form: { show: false },
- column: {
- type: 'selection',
- align: 'center',
- width: '70px',
- columnSetDisabled: true, //禁止在列设置中选择
- },
- },
- _index: {
- title: '序号',
- form: {show: false},
- column: {
- type: 'index',
- align: 'center',
- width: '70px',
- columnSetDisabled: true, //禁止在列设置中选择
- },
- },
- search: {
- title: '关键词',
- column: {show: false},
- type: 'text',
- search: {show: true},
- form: {
- show: false,
- component: {
- placeholder: '输入关键词搜索',
- },
- },
- },
- id: {
- title: 'ID',
- type: 'text',
- column: {show: false},
- search: {show: false},
- form: {show: false},
- },
- name: {
- title: '权限名称',
- type: 'text',
- search: {show: true},
- column: {
- minWidth: 120,
- sortable: true,
- },
- form: {
- rules: [{required: true, message: '权限名称必填'}],
- component: {
- placeholder: '输入权限名称搜索',
- props: {
- clearable: true,
- allowCreate: true,
- filterable: true,
- },
- },
- helper: {
- render() {
- return <el-alert title="手动输入" type="warning"
- description="页面中按钮的名称或者自定义一个名称"/>;
- },
- },
- },
- },
- value: {
- title: '权限值',
- type: 'text',
- search: {show: false},
- column: {
- width: 200,
- sortable: true,
- },
- form: {
- rules: [{required: true, message: '权限标识必填'}],
- placeholder: '输入权限标识',
- helper: {
- render() {
- return <el-alert title="唯一值" type="warning"
- description="用于判断前端按钮权限或接口权限"/>;
- },
- },
- },
- },
- method: {
- title: '请求方式',
- search: {show: false},
- type: 'dict-select',
- column: {
- width: 120,
- sortable: true,
- },
- dict: dict({
- data: [
- {label: 'GET', value: 0},
- {label: 'POST', value: 1, color: 'success'},
- {label: 'PUT', value: 2, color: 'warning'},
- {label: 'DELETE', value: 3, color: 'danger'},
- ],
- }),
- form: {
- rules: [{required: true, message: '必填项'}],
- },
- },
- api: {
- title: '接口地址',
- search: {show: false},
- type: 'dict-select',
- dict: dict({
- /* getData() {
- return request({url: '/swagger.json'}).then((res: any) => {
- const ret = Object.keys(res.paths);
- const data = [];
- for (const item of ret) {
- const obj: any = {};
- obj.label = item;
- obj.value = item;
- data.push(obj);
- }
- return data;
- });
- }, */
- }),
- column: {
- minWidth: 250,
- sortable: true,
- },
- form: {
- rules: [{required: true, message: '必填项'}],
- component: {
- props: {
- allowCreate: true,
- filterable: true,
- clearable: true,
- },
- },
- helper: {
- render() {
- return <el-alert title="请正确填写,以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/"
- type="warning"/>;
- },
- },
- },
- },
- },
- },
- };
- };
|