| 提交 | 用户 | 时间 | ||
| 820397 | 1 | import { reactive } from 'vue' |
| H | 2 | import { AxiosPromise } from 'axios' |
| 3 | import { findIndex } from '@/utils' | |
| 4 | import { eachTree, filter, treeMap } from '@/utils/tree' | |
| 5 | import { getBoolDictOptions, getDictOptions, getIntDictOptions } from '@/utils/dict' | |
| 6 | ||
| 7 | import { FormSchema } from '@/types/form' | |
| 8 | import { TableColumn } from '@/types/table' | |
| 9 | import { DescriptionsSchema } from '@/types/descriptions' | |
| 10 | import { ComponentOptions, ComponentProps } from '@/types/components' | |
| 11 | import { DictTag } from '@/components/DictTag' | |
| 12 | import { cloneDeep, merge } from 'lodash-es' | |
| 13 | ||
| 14 | export type CrudSchema = Omit<TableColumn, 'children'> & { | |
| 15 | isSearch?: boolean // 是否在查询显示 | |
| 16 | search?: CrudSearchParams // 查询的详细配置 | |
| 17 | isTable?: boolean // 是否在列表显示 | |
| 18 | table?: CrudTableParams // 列表的详细配置 | |
| 19 | isForm?: boolean // 是否在表单显示 | |
| 20 | form?: CrudFormParams // 表单的详细配置 | |
| 21 | isDetail?: boolean // 是否在详情显示 | |
| 22 | detail?: CrudDescriptionsParams // 详情的详细配置 | |
| 23 | children?: CrudSchema[] | |
| 24 | dictType?: string // 字典类型 | |
| 25 | dictClass?: 'string' | 'number' | 'boolean' // 字典数据类型 string | number | boolean | |
| 26 | } | |
| 27 | ||
| 28 | type CrudSearchParams = { | |
| 29 | // 是否显示在查询项 | |
| 30 | show?: boolean | |
| 31 | // 接口 | |
| 32 | api?: () => Promise<any> | |
| 33 | // 搜索字段 | |
| 34 | field?: string | |
| 35 | } & Omit<FormSchema, 'field'> | |
| 36 | ||
| 37 | type CrudTableParams = { | |
| 38 | // 是否显示表头 | |
| 39 | show?: boolean | |
| 40 | // 列宽配置 | |
| 41 | width?: number | string | |
| 42 | // 列是否固定在左侧或者右侧 | |
| 43 | fixed?: 'left' | 'right' | |
| 44 | } & Omit<FormSchema, 'field'> | |
| 45 | type CrudFormParams = { | |
| 46 | // 是否显示表单项 | |
| 47 | show?: boolean | |
| 48 | // 接口 | |
| 49 | api?: () => Promise<any> | |
| 50 | } & Omit<FormSchema, 'field'> | |
| 51 | ||
| 52 | type CrudDescriptionsParams = { | |
| 53 | // 是否显示表单项 | |
| 54 | show?: boolean | |
| 55 | } & Omit<DescriptionsSchema, 'field'> | |
| 56 | ||
| 57 | interface AllSchemas { | |
| 58 | searchSchema: FormSchema[] | |
| 59 | tableColumns: TableColumn[] | |
| 60 | formSchema: FormSchema[] | |
| 61 | detailSchema: DescriptionsSchema[] | |
| 62 | } | |
| 63 | ||
| 64 | const { t } = useI18n() | |
| 65 | ||
| 66 | // 过滤所有结构 | |
| 67 | export const useCrudSchemas = ( | |
| 68 | crudSchema: CrudSchema[] | |
| 69 | ): { | |
| 70 | allSchemas: AllSchemas | |
| 71 | } => { | |
| 72 | // 所有结构数据 | |
| 73 | const allSchemas = reactive<AllSchemas>({ | |
| 74 | searchSchema: [], | |
| 75 | tableColumns: [], | |
| 76 | formSchema: [], | |
| 77 | detailSchema: [] | |
| 78 | }) | |
| 79 | ||
| 80 | const searchSchema = filterSearchSchema(crudSchema, allSchemas) | |
| 81 | allSchemas.searchSchema = searchSchema || [] | |
| 82 | ||
| 83 | const tableColumns = filterTableSchema(crudSchema) | |
| 84 | allSchemas.tableColumns = tableColumns || [] | |
| 85 | ||
| 86 | const formSchema = filterFormSchema(crudSchema, allSchemas) | |
| 87 | allSchemas.formSchema = formSchema | |
| 88 | ||
| 89 | const detailSchema = filterDescriptionsSchema(crudSchema) | |
| 90 | allSchemas.detailSchema = detailSchema | |
| 91 | ||
| 92 | return { | |
| 93 | allSchemas | |
| 94 | } | |
| 95 | } | |
| 96 | ||
| 97 | // 过滤 Search 结构 | |
| 98 | const filterSearchSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): FormSchema[] => { | |
| 99 | const searchSchema: FormSchema[] = [] | |
| 100 | ||
| 101 | // 获取字典列表队列 | |
| 102 | const searchRequestTask: Array<() => Promise<void>> = [] | |
| 103 | eachTree(crudSchema, (schemaItem: CrudSchema) => { | |
| 104 | // 判断是否显示 | |
| 105 | if (schemaItem?.isSearch || schemaItem.search?.show) { | |
| 106 | let component = schemaItem?.search?.component || 'Input' | |
| 107 | const options: ComponentOptions[] = [] | |
| 108 | let comonentProps: ComponentProps = {} | |
| 109 | if (schemaItem.dictType) { | |
| 110 | const allOptions: ComponentOptions = { label: '全部', value: '' } | |
| 111 | options.push(allOptions) | |
| 112 | getDictOptions(schemaItem.dictType).forEach((dict) => { | |
| 113 | options.push(dict) | |
| 114 | }) | |
| 115 | comonentProps = { | |
| 116 | options: options | |
| 117 | } | |
| 118 | if (!schemaItem.search?.component) component = 'Select' | |
| 119 | } | |
| 120 | ||
| 121 | // updated by AKing: 解决了当使用默认的dict选项时，form中事件不能触发的问题 | |
| 122 | const searchSchemaItem = merge( | |
| 123 | { | |
| 124 | // 默认为 input | |
| 125 | component, | |
| 126 | ...schemaItem.search, | |
| 127 | field: schemaItem.field, | |
| 128 | label: schemaItem.search?.label || schemaItem.label | |
| 129 | }, | |
| 130 | { componentProps: comonentProps } | |
| 131 | ) | |
| 132 | if (searchSchemaItem.api) { | |
| 133 | searchRequestTask.push(async () => { | |
| 134 | const res = await (searchSchemaItem.api as () => AxiosPromise)() | |
| 135 | if (res) { | |
| 136 | const index = findIndex(allSchemas.searchSchema, (v: FormSchema) => { | |
| 137 | return v.field === searchSchemaItem.field | |
| 138 | }) | |
| 139 | if (index !== -1) { | |
| 140 | allSchemas.searchSchema[index]!.componentProps!.options = filterOptions( | |
| 141 | res, | |
| 142 | searchSchemaItem.componentProps.optionsAlias?.labelField | |
| 143 | ) | |
| 144 | } | |
| 145 | } | |
| 146 | }) | |
| 147 | } | |
| 148 | // 删除不必要的字段 | |
| 149 | delete searchSchemaItem.show | |
| 150 | ||
| 151 | searchSchema.push(searchSchemaItem) | |
| 152 | } | |
| 153 | }) | |
| 154 | for (const task of searchRequestTask) { | |
| 155 | task() | |
| 156 | } | |
| 157 | return searchSchema | |
| 158 | } | |
| 159 | ||
| 160 | // 过滤 table 结构 | |
| 161 | const filterTableSchema = (crudSchema: CrudSchema[]): TableColumn[] => { | |
| 162 | const tableColumns = treeMap<CrudSchema>(crudSchema, { | |
| 163 | conversion: (schema: CrudSchema) => { | |
| 164 | if (schema?.isTable !== false && schema?.table?.show !== false) { | |
| 165 | // add by 芋艿：增加对 dict 字典数据的支持 | |
| 166 | if (!schema.formatter && schema.dictType) { | |
| 167 | schema.formatter = (_: Recordable, __: TableColumn, cellValue: any) => { | |
| 168 | return h(DictTag, { | |
| 169 | type: schema.dictType!, // ! 表示一定不为空 | |
| 170 | value: cellValue | |
| 171 | }) | |
| 172 | } | |
| 173 | } | |
| 174 | return { | |
| 175 | ...schema.table, | |
| 176 | ...schema | |
| 177 | } | |
| 178 | } | |
| 179 | } | |
| 180 | }) | |
| 181 | ||
| 182 | // 第一次过滤会有 undefined 所以需要二次过滤 | |
| 183 | return filter<TableColumn>(tableColumns as TableColumn[], (data) => { | |
| 184 | if (data.children === void 0) { | |
| 185 | delete data.children | |
| 186 | } | |
| 187 | return !!data.field | |
| 188 | }) | |
| 189 | } | |
| 190 | ||
| 191 | // 过滤 form 结构 | |
| 192 | const filterFormSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): FormSchema[] => { | |
| 193 | const formSchema: FormSchema[] = [] | |
| 194 | ||
| 195 | // 获取字典列表队列 | |
| 196 | const formRequestTask: Array<() => Promise<void>> = [] | |
| 197 | ||
| 198 | eachTree(crudSchema, (schemaItem: CrudSchema) => { | |
| 199 | // 判断是否显示 | |
| 200 | if (schemaItem?.isForm !== false && schemaItem?.form?.show !== false) { | |
| 201 | let component = schemaItem?.form?.component || 'Input' | |
| 202 | let defaultValue: any = '' | |
| 203 | if (schemaItem.form?.value) { | |
| 204 | defaultValue = schemaItem.form?.value | |
| 205 | } else { | |
| 206 | if (component === 'InputNumber') { | |
| 207 | defaultValue = 0 | |
| 208 | } | |
| 209 | } | |
| 210 | let comonentProps: ComponentProps = {} | |
| 211 | if (schemaItem.dictType) { | |
| 212 | const options: ComponentOptions[] = [] | |
| 213 | if (schemaItem.dictClass && schemaItem.dictClass === 'number') { | |
| 214 | getIntDictOptions(schemaItem.dictType).forEach((dict) => { | |
| 215 | options.push(dict) | |
| 216 | }) | |
| 217 | } else if (schemaItem.dictClass && schemaItem.dictClass === 'boolean') { | |
| 218 | getBoolDictOptions(schemaItem.dictType).forEach((dict) => { | |
| 219 | options.push(dict) | |
| 220 | }) | |
| 221 | } else { | |
| 222 | getDictOptions(schemaItem.dictType).forEach((dict) => { | |
| 223 | options.push(dict) | |
| 224 | }) | |
| 225 | } | |
| 226 | comonentProps = { | |
| 227 | options: options | |
| 228 | } | |
| 229 | if (!(schemaItem.form && schemaItem.form.component)) component = 'Select' | |
| 230 | } | |
| 231 | ||
| 232 | // updated by AKing: 解决了当使用默认的dict选项时，form中事件不能触发的问题 | |
| 233 | const formSchemaItem = merge( | |
| 234 | { | |
| 235 | // 默认为 input | |
| 236 | component, | |
| 237 | value: defaultValue, | |
| 238 | ...schemaItem.form, | |
| 239 | field: schemaItem.field, | |
| 240 | label: schemaItem.form?.label || schemaItem.label | |
| 241 | }, | |
| 242 | { componentProps: comonentProps } | |
| 243 | ) | |
| 244 | ||
| 245 | if (formSchemaItem.api) { | |
| 246 | formRequestTask.push(async () => { | |
| 247 | const res = await (formSchemaItem.api as () => AxiosPromise)() | |
| 248 | if (res) { | |
| 249 | const index = findIndex(allSchemas.formSchema, (v: FormSchema) => { | |
| 250 | return v.field === formSchemaItem.field | |
| 251 | }) | |
| 252 | if (index !== -1) { | |
| 253 | allSchemas.formSchema[index]!.componentProps!.options = filterOptions( | |
| 254 | res, | |
| 255 | formSchemaItem.componentProps.optionsAlias?.labelField | |
| 256 | ) | |
| 257 | } | |
| 258 | } | |
| 259 | }) | |
| 260 | } | |
| 261 | ||
| 262 | // 删除不必要的字段 | |
| 263 | delete formSchemaItem.show | |
| 264 | ||
| 265 | formSchema.push(formSchemaItem) | |
| 266 | } | |
| 267 | }) | |
| 268 | ||
| 269 | for (const task of formRequestTask) { | |
| 270 | task() | |
| 271 | } | |
| 272 | return formSchema | |
| 273 | } | |
| 274 | ||
| 275 | // 过滤 descriptions 结构 | |
| 276 | const filterDescriptionsSchema = (crudSchema: CrudSchema[]): DescriptionsSchema[] => { | |
| 277 | const descriptionsSchema: FormSchema[] = [] | |
| 278 | ||
| 279 | eachTree(crudSchema, (schemaItem: CrudSchema) => { | |
| 280 | // 判断是否显示 | |
| 281 | if (schemaItem?.isDetail !== false && schemaItem.detail?.show !== false) { | |
| 282 | const descriptionsSchemaItem = { | |
| 283 | ...schemaItem.detail, | |
| 284 | field: schemaItem.field, | |
| 285 | label: schemaItem.detail?.label || schemaItem.label | |
| 286 | } | |
| 287 | if (schemaItem.dictType) { | |
| 288 | descriptionsSchemaItem.dictType = schemaItem.dictType | |
| 289 | } | |
| 290 | if (schemaItem.detail?.dateFormat || schemaItem.formatter == 'formatDate') { | |
| 291 | // 优先使用 detail 下的配置，如果没有默认为 YYYY-MM-DD HH:mm:ss | |
| 292 | descriptionsSchemaItem.dateFormat = schemaItem?.detail?.dateFormat | |
| 293 | ? schemaItem?.detail?.dateFormat | |
| 294 | : 'YYYY-MM-DD HH:mm:ss' | |
| 295 | } | |
| 296 | ||
| 297 | // 删除不必要的字段 | |
| 298 | delete descriptionsSchemaItem.show | |
| 299 | ||
| 300 | descriptionsSchema.push(descriptionsSchemaItem) | |
| 301 | } | |
| 302 | }) | |
| 303 | ||
| 304 | return descriptionsSchema | |
| 305 | } | |
| 306 | ||
| 307 | // 给options添加国际化 | |
| 308 | const filterOptions = (options: Recordable, labelField?: string) => { | |
| 309 | return options?.map((v: Recordable) => { | |
| 310 | if (labelField) { | |
| 311 | v['labelField'] = t(v.labelField) | |
| 312 | } else { | |
| 313 | v['label'] = t(v.label) | |
| 314 | } | |
| 315 | return v | |
| 316 | }) | |
| 317 | } | |
| 318 | ||
| 319 | // 将 tableColumns 指定 fields 放到最前面 | |
| 320 | export const sortTableColumns = (tableColumns: TableColumn[], field: string) => { | |
| 321 | const fieldIndex = tableColumns.findIndex((item) => item.field === field) | |
| 322 | const fieldColumn = cloneDeep(tableColumns[fieldIndex]) | |
| 323 | tableColumns.splice(fieldIndex, 1) | |
| 324 | // 添加到开头 | |
| 325 | tableColumns.unshift(fieldColumn) | |
| 326 | } | |
