1. 副作用封装
所有副作用钩子函数,函数汇总
export function useEffects({ domain, draft, options }: any) {
console.log(domain, draft, options);
async function updateField(field: number | string, value: number | string) {
draft[field] = value;
await runSideEffects(field, value);
}
async function runSideEffects(field: number | string, value: any) {
console.log(value);
if (field === "appointType") {
draft.appointNumber = "";
}
if (field === "appointGoProvince") {
draft.appointGoCity = null;
options.appointCityList = [{ label: "武汉", value: 12345 }];
}
}
return {
updateField,
};
}
2. stateView汇总
更改视图的选项,全部写在这里
export const useComputed = ({ draft }: any) => {
const isAppointUrlShow = computed(() => draft.appointType === 1);
const isAppointPlaceShow = computed(() => draft.appointType === 2);
return {
isAppointPlaceShow,
isAppointUrlShow,
};
};
curd 骨架
任何一个 curd 场景,均需要建立以下骨架
// 1. 类型
type RowId = string
interface DraftRow {}
interface DomainRow {}
// 2. 数据源
const draftRows = ref<DraftRow[]>([])
// 3. 工厂函数
function createEmptyDraftRow(): DraftRow {}
// 4. 适配
function normalizeRawToDraft(raw: any): DraftRow {}
// 5. 业务派生
function toDomainRow(draft: DraftRow): DomainRow {}
// 6. 副作用
function updateField(rowId, field, value) {}
// 7. 显影/禁用
function getRowViewState(domain, draft) {}
// 8. 提交
function buildPayload()