260 lines
9.2 KiB
TypeScript
260 lines
9.2 KiB
TypeScript
import {dict} from "@fast-crud/fast-crud";
|
||
import {shallowRef} from 'vue'
|
||
import deptFormat from "/@/components/dept-format/index.vue";
|
||
|
||
export const commonCrudConfig = (options = {
|
||
create_datetime: {
|
||
form: false,
|
||
table: false,
|
||
search: false
|
||
},
|
||
update_datetime: {
|
||
form: false,
|
||
table: false,
|
||
search: false
|
||
},
|
||
creator_name: {
|
||
form: false,
|
||
table: false,
|
||
search: false
|
||
},
|
||
modifier_name: {
|
||
form: false,
|
||
table: false,
|
||
search: false
|
||
},
|
||
dept_belong_id: {
|
||
form: false,
|
||
table: false,
|
||
search: false
|
||
},
|
||
description: {
|
||
form: false,
|
||
table: false,
|
||
search: false
|
||
},
|
||
}) => {
|
||
return {
|
||
dept_belong_id: {
|
||
title: '所属部门',
|
||
type: 'dict-tree',
|
||
search: {
|
||
show: options.dept_belong_id?.search || false
|
||
},
|
||
dict: dict({
|
||
url: '/api/system/dept/all_dept/',
|
||
isTree: true,
|
||
value: 'id',
|
||
label: 'name',
|
||
children: 'children',
|
||
}),
|
||
column: {
|
||
align: 'center',
|
||
width: 300,
|
||
show: options.dept_belong_id?.table || false,
|
||
component: {
|
||
name: shallowRef(deptFormat),
|
||
vModel: "modelValue",
|
||
}
|
||
},
|
||
form: {
|
||
show: options.dept_belong_id?.form || false,
|
||
component: {
|
||
multiple: false,
|
||
clearable: true,
|
||
props: {
|
||
checkStrictly: true,
|
||
props: {
|
||
// 为什么这里要写两层props
|
||
// 因为props属性名与fs的动态渲染的props命名冲突，所以要多写一层
|
||
label: "name",
|
||
value: "id",
|
||
}
|
||
}
|
||
},
|
||
helper: "默认不填则为当前创建用户的部门ID"
|
||
}
|
||
},
|
||
description: {
|
||
title: '备注',
|
||
search: {
|
||
show: options.description?.search || false
|
||
},
|
||
type: 'textarea',
|
||
column: {
|
||
width: 100,
|
||
show: options.description?.table || false,
|
||
},
|
||
form: {
|
||
show: options.description?.form || false,
|
||
component: {
|
||
placeholder: '请输入内容',
|
||
showWordLimit: true,
|
||
maxlength: '200',
|
||
}
|
||
},
|
||
viewForm: {
|
||
show: true
|
||
}
|
||
},
|
||
modifier_name: {
|
||
title: '修改人',
|
||
search: {
|
||
show: options.modifier_name?.search || false
|
||
},
|
||
column: {
|
||
width: 100,
|
||
show: options.modifier_name?.table || false,
|
||
},
|
||
form: {
|
||
show: false,
|
||
},
|
||
viewForm: {
|
||
show: true
|
||
}
|
||
},
|
||
creator_name: {
|
||
title: '创建人',
|
||
search: {
|
||
show: options.creator_name?.search || false
|
||
},
|
||
column: {
|
||
width: 100,
|
||
show: options.creator_name?.table || false,
|
||
},
|
||
form: {
|
||
show: false,
|
||
},
|
||
viewForm: {
|
||
show: true
|
||
}
|
||
},
|
||
update_datetime: {
|
||
title: '更新时间',
|
||
type: 'datetime',
|
||
search: {
|
||
show: options.update_datetime?.search || false,
|
||
col: {span: 8},
|
||
component: {
|
||
type: 'datetimerange',
|
||
props: {
|
||
'start-placeholder': '开始时间',
|
||
'end-placeholder': '结束时间',
|
||
'value-format': 'YYYY-MM-DD HH:mm:ss',
|
||
'picker-options': {
|
||
shortcuts: [{
|
||
text: '最近一周',
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}, {
|
||
text: '最近一个月',
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}, {
|
||
text: '最近三个月',
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}]
|
||
}
|
||
}
|
||
},
|
||
valueResolve(context: any) {
|
||
const {key, value} = context
|
||
//value解析，就是把组件的值转化为后台所需要的值
|
||
//在form表单点击保存按钮后，提交到后台之前执行转化
|
||
if (value) {
|
||
context.form.update_datetime_after = value[0]
|
||
context.form.update_datetime_before = value[1]
|
||
}
|
||
// ↑↑↑↑↑ 注意这里是form，不是row
|
||
}
|
||
},
|
||
column: {
|
||
width: 160,
|
||
show: options.update_datetime?.table || false,
|
||
},
|
||
form: {
|
||
show: false,
|
||
},
|
||
viewForm: {
|
||
show: true
|
||
}
|
||
},
|
||
create_datetime: {
|
||
title: '创建时间',
|
||
type: 'datetime',
|
||
search: {
|
||
show: options.create_datetime?.search || false,
|
||
col: {span: 8},
|
||
component: {
|
||
type: 'datetimerange',
|
||
props: {
|
||
'start-placeholder': '开始时间',
|
||
'end-placeholder': '结束时间',
|
||
'value-format': 'YYYY-MM-DD HH:mm:ss',
|
||
'picker-options': {
|
||
shortcuts: [{
|
||
text: '最近一周',
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}, {
|
||
text: '最近一个月',
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}, {
|
||
text: '最近三个月',
|
||
onClick(picker) {
|
||
const end = new Date();
|
||
const start = new Date();
|
||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||
picker.$emit('pick', [start, end]);
|
||
}
|
||
}]
|
||
}
|
||
}
|
||
},
|
||
valueResolve(context: any) {
|
||
const {key, value} = context
|
||
//value解析，就是把组件的值转化为后台所需要的值
|
||
//在form表单点击保存按钮后，提交到后台之前执行转化
|
||
if (value) {
|
||
context.form.create_datetime_after = value[0]
|
||
context.form.create_datetime_before = value[1]
|
||
}
|
||
// ↑↑↑↑↑ 注意这里是form，不是row
|
||
}
|
||
},
|
||
column: {
|
||
width: 160,
|
||
show: options.create_datetime?.table || false,
|
||
},
|
||
form: {
|
||
show: false
|
||
},
|
||
viewForm: {
|
||
show: true
|
||
}
|
||
}
|
||
}
|
||
}
|