CURD 开发指南

117 阅读1分钟

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()