diff --git a/kicc-ui/src/components/AMap/src/TaskModal.vue b/kicc-ui/src/components/AMap/src/TaskModal.vue index d4302ff8..212443a4 100644 --- a/kicc-ui/src/components/AMap/src/TaskModal.vue +++ b/kicc-ui/src/components/AMap/src/TaskModal.vue @@ -8,9 +8,12 @@ + ({ - tag: '', modelRef: { id: undefined!, smallHospital: undefined!, @@ -77,7 +79,8 @@ largeHospital: [ { required: true, whitespace: true, message: '上级医院不能为空', validateTrigger: 'blur' } ] - } + }, + currentEditKeyRef: '' }); const emit = defineEmits(['success', 'register']); const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => { @@ -108,18 +111,68 @@ showTableSetting: false, bordered: true, showIndexColumn: false, - canResize: false + canResize: false, + actionColumn: { + width: 160, + title: '操作', + dataIndex: 'action', + slots: { customRender: 'action' }, + } }); /** 处理新增 */ - function handleAdd() { + function handleTaskAdd() { getDataSource().push({ - id: '1', - smallHospitalId: '1', - largeHospitalId: '1' + id: '', + smallHospitalId: '', + largeHospitalId: '' }); } + /** 创建操作列 */ + function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] { + if (!record.editable) { + return [ + { + label: '编辑', + disabled: state.currentEditKeyRef ? state.currentEditKeyRef !== record.key : false, + onClick: handleEdit.bind(null, record), + } + ]; + } + return [ + { + label: '保存', + onClick: handleSave.bind(null, record, column), + }, + { + label: '取消', + popConfirm: { + title: '是否取消编辑', + confirm: handleCancel.bind(null, record, column), + }, + }, + ]; + } + + function handleEdit(record: EditRecordRow) { + state.currentEditKeyRef = record.key; + record.onEdit?.(true); + } + + function handleCancel(record: EditRecordRow) { + state.currentEditKeyRef = ''; + record.onEdit?.(false, false); + } + + async function handleSave(record: EditRecordRow) { + const valid = await record.onValid?.(); + if (valid) { + const pass = await record.onEdit?.(false, true); + pass && (currentEditKeyRef.value = ''); + } + } + /** 处理弹出框提交 */ async function handleSubmit() { console.log(getDataSource()); diff --git a/kicc-ui/src/components/AMap/src/map.data.ts b/kicc-ui/src/components/AMap/src/map.data.ts index 8994bb51..872d17b1 100644 --- a/kicc-ui/src/components/AMap/src/map.data.ts +++ b/kicc-ui/src/components/AMap/src/map.data.ts @@ -45,8 +45,8 @@ export const formColumns: BasicColumn[] = [ { title: '下级医院', dataIndex: 'smallHospitalId', - edit: true, editRow: true, + editRule: true, editComponent: 'Select', editComponentProps: { options: [ @@ -67,25 +67,25 @@ export const formColumns: BasicColumn[] = [ }, { title: '上级医院', - dataIndex: '0', - edit: true, + dataIndex: 'largeHospitalId', editRow: true, + editRule: true, editComponent: 'Select', editComponentProps: { options: [ { label: 'Option1', - value: '1', + value: '1' }, { label: 'Option2', - value: '2', + value: '2' }, { label: 'Option3', - value: '3', - }, - ], + value: '3' + } + ] } } ]; diff --git a/kicc-ui/src/components/Table/src/components/editable/EditableCell.vue b/kicc-ui/src/components/Table/src/components/editable/EditableCell.vue index 1bb75125..574a8c75 100644 --- a/kicc-ui/src/components/Table/src/components/editable/EditableCell.vue +++ b/kicc-ui/src/components/Table/src/components/editable/EditableCell.vue @@ -324,13 +324,7 @@ /* eslint-disable */ props.record.onSubmitEdit = async () => { if (isArray(props.record?.submitCbs)) { - const validFns = (props.record?.validCbs || []).map((fn) => fn()); - - const res = await Promise.all(validFns); - - const pass = res.every((item) => !!item); - - if (!pass) return; + if (!props.record?.onValid?.()) return; const submitFns = props.record?.submitCbs || []; submitFns.forEach((fn) => fn(false, false)); table.emit?.('edit-row-end'); diff --git a/kicc-ui/src/components/Table/src/components/editable/index.ts b/kicc-ui/src/components/Table/src/components/editable/index.ts index 4ea515b5..bfaff50c 100644 --- a/kicc-ui/src/components/Table/src/components/editable/index.ts +++ b/kicc-ui/src/components/Table/src/components/editable/index.ts @@ -1,7 +1,7 @@ import type { BasicColumn } from '/@/components/Table/src/types/table'; import { h, Ref } from 'vue'; - +import { isArray } from '/@/utils/is'; import EditableCell from './EditableCell.vue'; interface Params { @@ -12,12 +12,23 @@ interface Params { export function renderEditCell(column: BasicColumn) { return ({ text: value, record, index }: Params) => { + record.onValid = async () => { + if (isArray(record?.validCbs)) { + const validFns = (record?.validCbs || []).map((fn) => fn()); + const res = await Promise.all(validFns); + return res.every((item) => !!item); + } else { + return false; + } + }; + record.onEdit = async (edit: boolean, submit = false) => { if (!submit) { record.editable = edit; } if (!edit && submit) { + if (!(await record.onValid())) return false; const res = await record.onSubmitEdit?.(); if (res) { record.editable = false; @@ -44,6 +55,7 @@ export function renderEditCell(column: BasicColumn) { export type EditRecordRow = Partial< { onEdit: (editable: boolean, submit?: boolean) => Promise; + onValid: () => Promise; editable: boolean; onCancel: Fn; onSubmit: Fn; diff --git a/kicc-ui/src/views/map/EditRowTable.vue b/kicc-ui/src/views/map/EditRowTable.vue new file mode 100644 index 00000000..da7e65c3 --- /dev/null +++ b/kicc-ui/src/views/map/EditRowTable.vue @@ -0,0 +1,262 @@ + +