高级表单优化

Ben Lin

2024-07-03 46c3d28c5633baaddad0da441185310b9360a45b

 src/views/tigerprojects/system/lowcode/high/dtl.vue

@@ -16,7 +16,6 @@
          <TableAction :actions="createActions(record, index, item.name)" />
        </template>
        <template #[item]="{ field }" v-for="item in colSlots" :key="item">
          <!-- <template #form-BAS_REASON3aadd="{ field }"> -->
          <a-button
            v-if="field"
            class="mt-1 ml-1"
@@ -38,9 +37,9 @@
  </div>
</template>
<script lang="ts" setup>
  import { Ref, inject, nextTick, onMounted, ref, watch } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Ref, inject, onMounted, ref, watch } from 'vue';
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useForm } from '/@/components/Form/index';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import normalDrawer from '../normalDrawer.vue';
  import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
@@ -60,27 +59,25 @@
    entityName: { type: String },
    crudColSlots: { type: Object as PropType<any> },
  });
  /* 主页面注入的变量 */
  const objParams = inject('objParams') as Ref<any>;
  const data = inject('data') as Ref<any>;
  const _useTables = inject('useTables') as Ref<any>;
  const useFormData = inject('useFormData') as Ref<{}>;
  const others = inject('others') as Ref<Recordable[]>;
  const keyFieldValues = inject('keyFieldValues') as Ref<Recordable[]>;

  const go = useGo();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
  const cType = ref('');
  const dtlSlots = ref([] as any[]);
  const selectVals = ref({});
  const baseCards = ref([] as any[]);
  const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
  const custImport = ref<any[]>([]);
  const EntityCustFunction = ref([
    {
      ActionItem(params, data, ...args) {},
      EditOperation(data, d, u, item) {},
      GetBaseColumns(type: string | undefined) {},
      GetSearchForm(type: string | undefined) {},
      GetCrudForm(type: string | undefined, ...args) {},
      OthersValues(val, id) {},
      KeyFieldValues(val, id) {},
      GetTitle(type: string | undefined) {},
      GetUseTables(data: Ref<Recordable[]>, ...args) {},
      GetUseDrawers() {},
@@ -94,10 +91,8 @@
    {
      ActionItem: nActionItem,
      EditOperation,
      GetBaseColumns,
      GetSearchForm,
      GetCrudForm,
      OthersValues,
      KeyFieldValues,
      GetTitle,
      GetUseTables,
      GetUseDrawers,
@@ -105,11 +100,11 @@
  ] = isNullOrUnDef(custImport.value['default'])
    ? EntityCustFunction.value
    : custImport.value['default']();
  others.value = OthersValues(objParams.value['CODE'], objParams.value['ID']);
  const drawers = ref<any[]>(objParams.value['drawers']);
  const useTables = GetUseTables(data, emit);
  const useDrawers = GetUseDrawers();
  _useTables.value = useTables;
  keyFieldValues.value = KeyFieldValues(objParams.value['CODE'], objParams.value['ID']); //获取一些其他有需要提供的值，这里是主页面跳转过来时带的关键字段值
  const drawers = ref<any[]>(objParams.value['drawers']); //是右侧边框列表，里面的name表示是哪一个实体，也就是高级表单中表格的名字，很多方法需要以这个名字为key
  const useTables = GetUseTables(data, emit); //高级表单中各个表格(Table)的useTable方法实现列表
  const useDrawers = GetUseDrawers(); //高级表单中各个表格(Table)的右侧边框(Drawer)的useDrawer方法实现列表
  _useTables.value = useTables; //把useTable的列表响应到从主页面注入的_useTables，这样主页面能拿到useTable的结果，从而可以使用各个表格的内置方法
  // watch(
  //   () => props.dataSource,
  //   (newVal, oldVal) => {
@@ -126,11 +121,15 @@
  //   { deep: true, immediate: true },
  // );

  /**
   * @description: 挂载组件完成时
   * @return {*}
   */  
  onMounted(async () => {
    for (const i in drawers.value) {
      let sqlcmd = ' 1 =1 ';
      if (!isNullOrEmpty(others.value[drawers.value[i].code])) {
        sqlcmd += ` And ${drawers.value[i].code} = '${others.value[drawers.value[i].code]}'`;
      if (!isNullOrEmpty(keyFieldValues.value[drawers.value[i].code])) {
        sqlcmd += ` And ${drawers.value[i].code} = '${keyFieldValues.value[drawers.value[i].code]}'`;
      }
      const list = await getEntity({
        sqlcmd: sqlcmd,
@@ -154,7 +153,7 @@
   * @param {*} record
   * @return {*}
   */
  function createActions(record,index, item) {
  function createActions(record, index, item) {
    const params = {
      record,
      isUpdate: true,
@@ -167,6 +166,7 @@
      useFormData,
      crudColSlots: props.crudColSlots,
      data,
      name: item, //drawers列表里面的name，表示是哪一个实体，也就是高级表单中表格的名字
    };
    const actionItem = [
      {
@@ -239,12 +239,18 @@
    return validates;
  }

  /**
   * @description: 新增按钮方法
   * @param {*} index
   * @param {*} item
   * @return {*}
   */  
  function handleCreate(index, item) {
    validate().then((res) => {
      const Keys = Object.getOwnPropertyNames(useFormData.value);
      let i;
      for (i = 0; i < Keys.length; i++) {
        others.value[objParams.value['pCode']] = objParams.value['IsID']
        keyFieldValues.value[objParams.value['pCode']] = objParams.value['IsID']
          ? res[Keys[i]]['ID']
          : res[Keys[i]][objParams.value['pCode']] == '0' ||
              isNullOrUnDef(res[Keys[i]][objParams.value['pCode']])
@@ -255,9 +261,9 @@
        isUpdate: false,
        ifSave: true,
        entityName: props.entityName,
        formJson: GetCrudForm(item, data), //getFormSchema(`${entityName.value}_Crud`),
        formJson: GetCrudForm(item, data), //获取增删改表单字段
        crudColSlots: props.crudColSlots,
        others: others.value,
        keyFieldValues: keyFieldValues.value,
      });
    });
  }
@@ -266,8 +272,9 @@
   * @description: 新增编辑返回成功方法
   * @param {*} d
   * @param {*} u
   * @param {*} item 页面上循环抽屉列表传入的实体名字，作为各表格相关方法的key，从而调用各表格相关的方法，如：useTables[item][1].setProps
   * @return {*}
   */
   */  
  function handleSuccess(d, u, item) {
    if (!isNullOrUnDef(custImport.value)) {
      /* 自定义编辑方法，根据实体名去调用 */
@@ -286,7 +293,7 @@
   * @description: 弹出选择框选择成功后事件
   * @param {*} d
   * @param {*} u
   * @param {*} item
   * @param {*} item 页面上循环抽屉列表传入的实体名字，作为各表格相关方法的key，从而调用各表格相关的方法，如：useTables[item][1].getForm()
   * @return {*}
   */
  function handleItemSuccess(d, u, item) {