|
| 1 | +<template> |
| 2 | + <KoalaRender :render="render"> |
| 3 | + <!-- 扩展查询操作 --> |
| 4 | + <template #queryActionsExtend> |
| 5 | + <ElButton type="primary" @click="doExport">导出</ElButton> |
| 6 | + <ElButton type="primary" @click="doBatch">批量</ElButton> |
| 7 | + </template> |
| 8 | + <template #tableActionsExtend="{ row }"> |
| 9 | + <ElButton type="primary" link @click="doPass(row)">审核</ElButton> |
| 10 | + <ElButton type="primary" link :disabled="row.id === '2'" @click="openModal('update', { row })">更新</ElButton> |
| 11 | + </template> |
| 12 | + </KoalaRender> |
| 13 | +</template> |
| 14 | + |
| 15 | +<script setup> |
| 16 | +import { ComponentType, KoalaRender, doGetFormData, useSceneContext } from '@koala-form/core'; |
| 17 | +import { useCurd, mapTableFields, componentPlugin } from '@koala-form/element-plugin'; |
| 18 | +import { computed } from 'vue'; |
| 19 | +import { ElButton, ElMessage } from 'element-plus'; |
| 20 | +const sexOptions = [ |
| 21 | + { value: '0', label: '女' }, |
| 22 | + { value: '1', label: '男' }, |
| 23 | +]; |
| 24 | +
|
| 25 | +const educationOptions = [ |
| 26 | + { value: '1', label: '高中以下' }, |
| 27 | + { value: '2', label: '大专' }, |
| 28 | + { value: '3', label: '大学本科' }, |
| 29 | + { value: '4', label: '研究生' }, |
| 30 | + { value: '5', label: '其他' }, |
| 31 | +]; |
| 32 | +
|
| 33 | +const hobbyOptions = [ |
| 34 | + { value: '1', label: '唱' }, |
| 35 | + { value: '2', label: '跳' }, |
| 36 | + { value: '3', label: 'rap' }, |
| 37 | + { value: '4', label: '篮球' }, |
| 38 | +]; |
| 39 | +
|
| 40 | +const FIELDS = { |
| 41 | + id: { name: 'id', label: '编号', format: (model, value) => value }, |
| 42 | + name: { name: 'name', label: '姓名', components: { name: ComponentType.Input } }, |
| 43 | + age: { name: 'age', label: '年龄', components: { name: ComponentType.InputNumber } }, |
| 44 | + sex: { name: 'sex', label: '性别', options: sexOptions, components: { name: ComponentType.Select } }, |
| 45 | + hobby: { name: 'hobby', type: 'array', label: '爱好', options: hobbyOptions, components: { name: ComponentType.CheckboxGroup } }, |
| 46 | + birthday: { name: 'birthday', label: '出生日期', components: { name: ComponentType.DatePicker, props: { type: 'daterange' } } }, |
| 47 | + idCard: { name: 'idCard', label: '身份证', components: { name: ComponentType.Input } }, |
| 48 | + education: { name: 'education', label: '学历', options: educationOptions, components: { name: ComponentType.Select } }, |
| 49 | + degree: { name: 'degree', label: '学位', components: { name: ComponentType.Input } }, |
| 50 | + address: { name: 'address', label: '住址', components: { name: ComponentType.Input, props: { type: 'textarea' } } }, |
| 51 | +}; |
| 52 | +
|
| 53 | +const { |
| 54 | + ctxs: [query, table, pager, modal, edit], |
| 55 | +} = useSceneContext(['query', 'table', 'pager', 'modal', 'edit'], [componentPlugin]); |
| 56 | +
|
| 57 | +const showDegree = computed(() => ['2', '3', '4'].includes(edit.modelRef.value.education)); |
| 58 | +
|
| 59 | +const { render, editTypeRef, selectedRows, openModal } = useCurd({ |
| 60 | + name: '用户', |
| 61 | + query: { |
| 62 | + ctx: query, |
| 63 | + fields: [FIELDS.name, FIELDS.sex, FIELDS.birthday], |
| 64 | + }, |
| 65 | + table: { |
| 66 | + ctx: table, |
| 67 | + rowKey: 'id', |
| 68 | + selection: { props: { fixed: true, width: 50 } }, |
| 69 | + actionField: { props: { fixed: 'right', width: 320 } }, |
| 70 | + fields: mapTableFields( |
| 71 | + [ |
| 72 | + { ...FIELDS.id, props: { fixed: true, width: 80 } }, |
| 73 | + FIELDS.name, |
| 74 | + FIELDS.age, |
| 75 | + FIELDS.sex, |
| 76 | + FIELDS.hobby, |
| 77 | + { ...FIELDS.idCard, format: (model, value) => value && '****' + value.slice(14) }, |
| 78 | + FIELDS.birthday, |
| 79 | + FIELDS.education, |
| 80 | + { ...FIELDS.address, props: { width: 300 } }, |
| 81 | + ], |
| 82 | + { props: { width: 150 } }, |
| 83 | + ), |
| 84 | + }, |
| 85 | + pager: { ctx: pager }, |
| 86 | + edit: { |
| 87 | + ctx: edit, |
| 88 | + fields: [ |
| 89 | + { ...FIELDS.id, vIf: computed(() => editTypeRef.value !== 'create') }, |
| 90 | + { ...FIELDS.name, required: true }, |
| 91 | + FIELDS.age, |
| 92 | + FIELDS.sex, |
| 93 | + FIELDS.education, |
| 94 | + FIELDS.hobby, |
| 95 | + FIELDS.idCard, |
| 96 | + { ...FIELDS.birthday, components: { name: ComponentType.DatePicker } }, |
| 97 | + { ...FIELDS.degree, vIf: showDegree }, |
| 98 | + FIELDS.address, |
| 99 | + ], |
| 100 | + }, |
| 101 | + modal: { ctx: modal }, |
| 102 | + actions: { |
| 103 | + query: { |
| 104 | + api: '/user.json', |
| 105 | + }, |
| 106 | + create: { |
| 107 | + api: '/success.json', |
| 108 | + }, |
| 109 | + reset: {}, |
| 110 | + update: { |
| 111 | + hidden: true, // 更新按钮修改行数据判断时，可以隐藏默认更新按钮，在template实现 |
| 112 | + api: '/error.json', |
| 113 | + }, |
| 114 | + delete: { |
| 115 | + api: '/success.json', |
| 116 | + }, |
| 117 | + view: {}, |
| 118 | + }, |
| 119 | +}); |
| 120 | +
|
| 121 | +// 插件局部安装 |
| 122 | +query.use(componentPlugin); |
| 123 | +table.use(componentPlugin); |
| 124 | +pager.use(componentPlugin); |
| 125 | +modal.use(componentPlugin); |
| 126 | +edit.use(componentPlugin); |
| 127 | +
|
| 128 | +const doExport = () => { |
| 129 | + ElMessage.success('导出'); |
| 130 | + console.log('导出', doGetFormData(query)); |
| 131 | +}; |
| 132 | +
|
| 133 | +const doBatch = () => { |
| 134 | + if (!selectedRows.value?.length) { |
| 135 | + ElMessage.error('至少选择一条记录'); |
| 136 | + return; |
| 137 | + } |
| 138 | + ElMessage.success('批量操作 ==> ids: ' + selectedRows.value); |
| 139 | + console.log('批量操作', selectedRows.value); |
| 140 | +}; |
| 141 | +
|
| 142 | +const doPass = (record) => { |
| 143 | + ElMessage.success('审核 ===> ' + record.name); |
| 144 | + console.log(record); |
| 145 | +}; |
| 146 | +</script> |
0 commit comments