refactor: ♻️ 更新优化精简fast-crud结构
This commit is contained in:
H0nGzA1
@@ -1,331 +1,345 @@
|
||||
import * as api from "./api";
|
||||
import {dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions,} from "@fast-crud/fast-crud";
|
||||
import tableSelector from "/@/components/tableSelector/index.vue"
|
||||
import {shallowRef, computed, ref} from "vue";
|
||||
import manyToMany from "/@/components/manyToMany/index.vue"
|
||||
import * as api from './api';
|
||||
import { dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
|
||||
import tableSelector from '/@/components/tableSelector/index.vue';
|
||||
import { shallowRef, computed, ref } from 'vue';
|
||||
import manyToMany from '/@/components/manyToMany/index.vue';
|
||||
|
||||
const {compute} = useCompute()
|
||||
const { compute } = useCompute();
|
||||
|
||||
interface CreateCrudOptionsTypes {
|
||||
crudOptions: CrudOptions;
|
||||
crudOptions: CrudOptions;
|
||||
}
|
||||
|
||||
export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudExpose: CrudExpose; tabActivted: any }): CreateCrudOptionsTypes {
|
||||
const pageRequest = async (query: PageQuery) => {
|
||||
if (tabActivted.value === 'receive') {
|
||||
return await api.GetSelfReceive(query);
|
||||
}
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({ row }: DelReq) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
const addRequest = async ({ form }: AddReq) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
|
||||
export const createCrudOptions = function ({
|
||||
crudExpose,
|
||||
tabActivted
|
||||
}: { crudExpose: CrudExpose, tabActivted: any }): CreateCrudOptionsTypes {
|
||||
const pageRequest = async (query: PageQuery) => {
|
||||
if (tabActivted.value === 'receive') {
|
||||
return await api.GetSelfReceive(query);
|
||||
}
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async ({form, row}: EditReq) => {
|
||||
form.id = row.id;
|
||||
return await api.UpdateObj(form);
|
||||
};
|
||||
const delRequest = async ({row}: DelReq) => {
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
const addRequest = async ({form}: AddReq) => {
|
||||
return await api.AddObj(form);
|
||||
};
|
||||
const viewRequest = async ({ row }: { row: any }) => {
|
||||
return await api.GetObj(row.id);
|
||||
};
|
||||
|
||||
const viewRequest = async ({row}: { row: any }) => {
|
||||
return await api.GetObj(row.id);
|
||||
}
|
||||
const IsReadFunc = computed(() => {
|
||||
return tabActivted.value === 'receive';
|
||||
});
|
||||
|
||||
const IsReadFunc = computed(() => {
|
||||
return tabActivted.value === 'receive'
|
||||
})
|
||||
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest
|
||||
},
|
||||
rowHandle: {
|
||||
buttons: {
|
||||
edit: {
|
||||
show: false
|
||||
},
|
||||
view: {
|
||||
click({index,row}) {
|
||||
crudExpose.openView({index,row})
|
||||
if(tabActivted.value === 'receive'){
|
||||
viewRequest({row})
|
||||
crudExpose.doRefresh()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: 'id',
|
||||
form: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
title: {
|
||||
title: '标题',
|
||||
search: {
|
||||
show: true,
|
||||
},
|
||||
type: ["text", "colspan"],
|
||||
form: {
|
||||
rules: [ // 表单校验规则
|
||||
{
|
||||
required: true,
|
||||
message: '必填项'
|
||||
}
|
||||
],
|
||||
component: {span: 24, placeholder: '请输入标题'}
|
||||
}
|
||||
},
|
||||
is_read: {
|
||||
title: '是否已读',
|
||||
type: 'dict-select',
|
||||
column: {
|
||||
show: IsReadFunc,
|
||||
},
|
||||
dict: dict({
|
||||
data: [
|
||||
{label: '已读', value: true, color: 'success'},
|
||||
{label: '未读', value: false, color: 'danger'}
|
||||
]
|
||||
}),
|
||||
form: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
target_type: {
|
||||
title: '目标类型',
|
||||
type: ['dict-radio', 'colspan'],
|
||||
width: 120,
|
||||
dict: dict({
|
||||
data: [{value: 0, label: '按用户'}, {value: 1, label: '按角色'}, {
|
||||
value: 2,
|
||||
label: '按部门'
|
||||
}, {value: 3, label: '通知公告'}]
|
||||
}),
|
||||
form: {
|
||||
component: {
|
||||
optionName: "el-radio-button"
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '必选项',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
target_user: {
|
||||
title: '目标用户',
|
||||
search: {
|
||||
disabled: true
|
||||
},
|
||||
width: 130,
|
||||
form: {
|
||||
component: {
|
||||
name: shallowRef(tableSelector),
|
||||
vModel: "modelValue",
|
||||
displayLabel: compute(({row}) => {
|
||||
if (row) {
|
||||
return row.user_info;
|
||||
}
|
||||
return null
|
||||
}),
|
||||
tableConfig: {
|
||||
url: '/api/system/user/',
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
isMultiple: true,
|
||||
columns: [{
|
||||
prop: 'name',
|
||||
label: '用户名称',
|
||||
width: 120
|
||||
}, {
|
||||
prop: 'phone',
|
||||
label: '用户电话',
|
||||
width: 120
|
||||
}]
|
||||
}
|
||||
},
|
||||
show: compute(({form}) => {
|
||||
return form.target_type === 0
|
||||
}),
|
||||
rules: [ // 表单校验规则
|
||||
{
|
||||
required: true,
|
||||
message: '必填项'
|
||||
}
|
||||
]
|
||||
},
|
||||
column: {
|
||||
show: false,
|
||||
component: {
|
||||
name: shallowRef(manyToMany),
|
||||
vModel: "modelValue",
|
||||
bindValue: compute(({row}) => {
|
||||
return row.user_info
|
||||
}),
|
||||
displayLabel: 'name'
|
||||
}
|
||||
}
|
||||
},
|
||||
target_role: {
|
||||
title: '目标角色',
|
||||
search: {
|
||||
disabled: true
|
||||
},
|
||||
width: 130,
|
||||
form: {
|
||||
component: {
|
||||
name: shallowRef(tableSelector),
|
||||
vModel: "modelValue",
|
||||
displayLabel: compute(({row}) => {
|
||||
if (row) {
|
||||
return row.role_info;
|
||||
}
|
||||
return null
|
||||
}),
|
||||
tableConfig: {
|
||||
url: '/api/system/role/',
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
isMultiple: true,
|
||||
columns: [{
|
||||
prop: 'name',
|
||||
label: '角色名称'
|
||||
},
|
||||
{
|
||||
prop: 'key',
|
||||
label: '权限标识'
|
||||
}]
|
||||
}
|
||||
},
|
||||
show: compute(({form}) => {
|
||||
return form.target_type === 1
|
||||
}),
|
||||
rules: [ // 表单校验规则
|
||||
{
|
||||
required: true,
|
||||
message: '必填项'
|
||||
}
|
||||
]
|
||||
},
|
||||
column: {
|
||||
show: false,
|
||||
component: {
|
||||
name: shallowRef(manyToMany),
|
||||
vModel: "modelValue",
|
||||
bindValue: compute(({row}) => {
|
||||
return row.role_info
|
||||
}),
|
||||
displayLabel: 'name'
|
||||
}
|
||||
}
|
||||
},
|
||||
target_dept: {
|
||||
title: '目标部门',
|
||||
search: {
|
||||
disabled: true
|
||||
},
|
||||
width: 130,
|
||||
type: 'table-selector',
|
||||
form: {
|
||||
component: {
|
||||
name: shallowRef(tableSelector),
|
||||
vModel: "modelValue",
|
||||
displayLabel: compute(({form}) => {
|
||||
return form.target_dept_name;
|
||||
}),
|
||||
tableConfig: {
|
||||
url: '/api/system/dept/all_dept/',
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
isTree: true,
|
||||
isMultiple: true,
|
||||
columns: [{
|
||||
prop: 'name',
|
||||
label: '部门名称'
|
||||
},
|
||||
{
|
||||
prop: 'status_label',
|
||||
label: '状态'
|
||||
},
|
||||
{
|
||||
prop: 'parent_name',
|
||||
label: '父级部门'
|
||||
}]
|
||||
}
|
||||
},
|
||||
show: compute(({form}) => {
|
||||
return form.target_type === 2
|
||||
}),
|
||||
rules: [ // 表单校验规则
|
||||
{
|
||||
required: true,
|
||||
message: '必填项'
|
||||
}
|
||||
]
|
||||
},
|
||||
column: {
|
||||
show: false,
|
||||
component: {
|
||||
name: shallowRef(manyToMany),
|
||||
vModel: "modelValue",
|
||||
bindValue: compute(({row}) => {
|
||||
return row.dept_info
|
||||
}),
|
||||
displayLabel: 'name'
|
||||
}
|
||||
}
|
||||
},
|
||||
content: {
|
||||
title: '内容',
|
||||
column: {
|
||||
width: 300,
|
||||
show: false
|
||||
},
|
||||
type: ["editor-wang5", "colspan"],
|
||||
form: {
|
||||
rules: [ // 表单校验规则
|
||||
{
|
||||
required: true,
|
||||
message: '必填项'
|
||||
}
|
||||
],
|
||||
component: {
|
||||
disabled: true,
|
||||
id: "1", // 当同一个页面有多个editor时，需要配置不同的id
|
||||
editorConfig: {
|
||||
// 是否只读
|
||||
readOnly: compute((context) => {
|
||||
const {mode} = context
|
||||
if (mode === 'add') {
|
||||
return false
|
||||
}
|
||||
return true;
|
||||
}),
|
||||
},
|
||||
uploader: {
|
||||
type: "form",
|
||||
buildUrl(res: any) {
|
||||
return res.url;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest,
|
||||
},
|
||||
rowHandle: {
|
||||
buttons: {
|
||||
edit: {
|
||||
show: false,
|
||||
},
|
||||
view: {
|
||||
click({ index, row }) {
|
||||
crudExpose.openView({ index, row });
|
||||
if (tabActivted.value === 'receive') {
|
||||
viewRequest({ row });
|
||||
crudExpose.doRefresh();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: 'id',
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
title: {
|
||||
title: '标题',
|
||||
search: {
|
||||
show: true,
|
||||
},
|
||||
type: ['text', 'colspan'],
|
||||
form: {
|
||||
rules: [
|
||||
// 表单校验规则
|
||||
{
|
||||
required: true,
|
||||
message: '必填项',
|
||||
},
|
||||
],
|
||||
component: { span: 24, placeholder: '请输入标题' },
|
||||
},
|
||||
},
|
||||
is_read: {
|
||||
title: '是否已读',
|
||||
type: 'dict-select',
|
||||
column: {
|
||||
show: IsReadFunc.value,
|
||||
},
|
||||
dict: dict({
|
||||
data: [
|
||||
{ label: '已读', value: true, color: 'success' },
|
||||
{ label: '未读', value: false, color: 'danger' },
|
||||
],
|
||||
}),
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
target_type: {
|
||||
title: '目标类型',
|
||||
type: ['dict-radio', 'colspan'],
|
||||
width: 120,
|
||||
dict: dict({
|
||||
data: [
|
||||
{ value: 0, label: '按用户' },
|
||||
{ value: 1, label: '按角色' },
|
||||
{
|
||||
value: 2,
|
||||
label: '按部门',
|
||||
},
|
||||
{ value: 3, label: '通知公告' },
|
||||
],
|
||||
}),
|
||||
form: {
|
||||
component: {
|
||||
optionName: 'el-radio-button',
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '必选项',
|
||||
// @ts-ignore
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
target_user: {
|
||||
title: '目标用户',
|
||||
search: {
|
||||
disabled: true,
|
||||
},
|
||||
width: 130,
|
||||
form: {
|
||||
component: {
|
||||
name: shallowRef(tableSelector),
|
||||
vModel: 'modelValue',
|
||||
displayLabel: compute(({ row }) => {
|
||||
if (row) {
|
||||
return row.user_info;
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
tableConfig: {
|
||||
url: '/api/system/user/',
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
isMultiple: true,
|
||||
columns: [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '用户名称',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
prop: 'phone',
|
||||
label: '用户电话',
|
||||
width: 120,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
show: compute(({ form }) => {
|
||||
return form.target_type === 0;
|
||||
}),
|
||||
rules: [
|
||||
// 表单校验规则
|
||||
{
|
||||
required: true,
|
||||
message: '必填项',
|
||||
},
|
||||
],
|
||||
},
|
||||
column: {
|
||||
show: false,
|
||||
component: {
|
||||
name: shallowRef(manyToMany),
|
||||
vModel: 'modelValue',
|
||||
bindValue: compute(({ row }) => {
|
||||
return row.user_info;
|
||||
}),
|
||||
displayLabel: 'name',
|
||||
},
|
||||
},
|
||||
},
|
||||
target_role: {
|
||||
title: '目标角色',
|
||||
search: {
|
||||
disabled: true,
|
||||
},
|
||||
width: 130,
|
||||
form: {
|
||||
component: {
|
||||
name: shallowRef(tableSelector),
|
||||
vModel: 'modelValue',
|
||||
displayLabel: compute(({ row }) => {
|
||||
if (row) {
|
||||
return row.role_info;
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
tableConfig: {
|
||||
url: '/api/system/role/',
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
isMultiple: true,
|
||||
columns: [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '角色名称',
|
||||
},
|
||||
{
|
||||
prop: 'key',
|
||||
label: '权限标识',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
show: compute(({ form }) => {
|
||||
return form.target_type === 1;
|
||||
}),
|
||||
rules: [
|
||||
// 表单校验规则
|
||||
{
|
||||
required: true,
|
||||
message: '必填项',
|
||||
},
|
||||
],
|
||||
},
|
||||
column: {
|
||||
show: false,
|
||||
component: {
|
||||
name: shallowRef(manyToMany),
|
||||
vModel: 'modelValue',
|
||||
bindValue: compute(({ row }) => {
|
||||
return row.role_info;
|
||||
}),
|
||||
displayLabel: 'name',
|
||||
},
|
||||
},
|
||||
},
|
||||
target_dept: {
|
||||
title: '目标部门',
|
||||
search: {
|
||||
disabled: true,
|
||||
},
|
||||
width: 130,
|
||||
type: 'table-selector',
|
||||
form: {
|
||||
component: {
|
||||
name: shallowRef(tableSelector),
|
||||
vModel: 'modelValue',
|
||||
displayLabel: compute(({ form }) => {
|
||||
return form.target_dept_name;
|
||||
}),
|
||||
tableConfig: {
|
||||
url: '/api/system/dept/all_dept/',
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
isTree: true,
|
||||
isMultiple: true,
|
||||
columns: [
|
||||
{
|
||||
prop: 'name',
|
||||
label: '部门名称',
|
||||
},
|
||||
{
|
||||
prop: 'status_label',
|
||||
label: '状态',
|
||||
},
|
||||
{
|
||||
prop: 'parent_name',
|
||||
label: '父级部门',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
show: compute(({ form }) => {
|
||||
return form.target_type === 2;
|
||||
}),
|
||||
rules: [
|
||||
// 表单校验规则
|
||||
{
|
||||
required: true,
|
||||
message: '必填项',
|
||||
},
|
||||
],
|
||||
},
|
||||
column: {
|
||||
show: false,
|
||||
component: {
|
||||
name: shallowRef(manyToMany),
|
||||
vModel: 'modelValue',
|
||||
bindValue: compute(({ row }) => {
|
||||
return row.dept_info;
|
||||
}),
|
||||
displayLabel: 'name',
|
||||
},
|
||||
},
|
||||
},
|
||||
content: {
|
||||
title: '内容',
|
||||
column: {
|
||||
width: 300,
|
||||
show: false,
|
||||
},
|
||||
type: ['editor-wang5', 'colspan'],
|
||||
form: {
|
||||
rules: [
|
||||
// 表单校验规则
|
||||
{
|
||||
required: true,
|
||||
message: '必填项',
|
||||
},
|
||||
],
|
||||
component: {
|
||||
disabled: true,
|
||||
id: '1', // 当同一个页面有多个editor时，需要配置不同的id
|
||||
editorConfig: {
|
||||
// 是否只读
|
||||
readOnly: compute((context) => {
|
||||
const { mode } = context;
|
||||
if (mode === 'add') {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}),
|
||||
},
|
||||
uploader: {
|
||||
type: 'form',
|
||||
buildUrl(res: any) {
|
||||
return res.url;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user