ASN单

Ben Lin

2025-03-08 697c405ac874da346e74df40266763370355154d

 src/views/tigerprojects/system/lowcode/detail/detail.vue

@@ -2,7 +2,15 @@
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate" preIcon="add_02|svg"> 新增 </a-button>
        <a-button
          type="primary"
          v-for="item in buttons.filter((m) => m['BUTTON_TYPE'] == 0)"
          @click="handleCreate(item['DO_METHOD'])"
          :preIcon="item['ICON_URL']"
          :key="item"
        >
          {{ item['FUNC_NAME'] }}
        </a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="createActions(record)" />
@@ -22,49 +30,83 @@
        />
      </template>
    </BasicTable>
    <Suspense>
      <CustModal
        @register="registerCust"
        @success="custSuccess"
        @cancel="custCancel"
        :type="cType"
        :entityName="entityName"
        @modalInner="getdtlSlots"
      >
        <!-- 用插槽自定义多表单 -->
        <template #[item.name] v-for="item in dtlSlots" :key="item.name">
          <BasicForm @register="useFormData[item.name][0]" v-if="useFormData[item.name]">
            <!-- 用插槽自定义弹出选择框 -->
            <template #[name]="{ field }" v-for="name in item.slots" :key="name">
              <a-button
                class="mt-1 ml-1"
                size="small"
                @click="handleCustClick(field)"
                :preIcon="item.preIcons[name]"
              />
              <GeneralModal
                @register="useModalData[name][0]"
                @success="(d, u) => handleEntSuccess(d, u, item.name)"
              />
            </template>
          </BasicForm>
          <!-- 自定义内容 -->
        </template>
      </CustModal>
    </Suspense>
    <normalDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { Ref, inject, onMounted, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useForm } from '/@/components/Form/index';
  import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { useDrawer } from '/@/components/Drawer';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import normalDrawer from '../normalDrawer.vue';
  import { isNullOrUnDef } from '/@/utils/is';
  import CustModal from '/@/views/components/CustModal.vue';
  import { isFunction, isNullOrUnDef } from '/@/utils/is';
  import { useModal } from '/@/components/Modal';
  import { useGo } from '/@/hooks/web/usePage';
  import { DeleteEntity, getListByPage } from '/@/api/tigerapi/system';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { EntityCustFunctionType } from '/@/api/tigerapi/model/basModel';
  import { GenerateActionButton } from '../data';
  import { getRoleButtons } from '/@/api/sys/menu';
  import { useRouter } from 'vue-router';

  const { t } = useI18n();

  const { currentRoute } = useRouter();
  const props = defineProps({
    useTableData: { type: Object as PropType<{}>, default: { table: [] } },
    entityName: { type: String },
  });
  const objParams = inject('objParams') as Ref<any>;
  const data = inject('data') as Ref<Recordable[]>;
  const others = inject('others') as Ref<Recordable[]>;
  const keyFieldValues = inject('keyFieldValues') as Ref<Recordable[]>;
  const go = useGo();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
  const [registerCust, { openModal: openCustModal }] = useModal();
  const cType = ref('');
  const selectVals = ref({});
  const colSlots = ref<any>(objParams['colSlots']); //按钮插槽
  const dtlSlots = ref([] as any[]);
  const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
  const useFormData = ref({});
  const custImport = ref<any[]>([]);
  const EntityCustFunction = ref([
    {
      ActionItem(params, data, ...args) {},
      EditOperation(data, d, u) {},
      GetBaseColumns() {},
      GetSearchForm() {},
      GetCrudForm() {},
      OthersValues(val, id) {},
      EditOperation(data, d, u, item) {},
      GetBaseColumns(type: string | undefined) {},
      GetSearchForm(type: string | undefined) {},
      GetCrudForm(type: string | undefined, ...args) {},
      KeyFieldValues(val, id) {},
      GetSelectSuccess(d, u, ...args) {},
      OpenSelectItem(openItemModal: Fn, ...args) {},
    } as EntityCustFunctionType,
@@ -80,35 +122,55 @@
      GetBaseColumns,
      GetSearchForm,
      GetCrudForm,
      OthersValues,
      KeyFieldValues,
      GetSelectSuccess,
      OpenSelectItem,
      GetUseForm,
      GetUseModals,
    },
    ActionColumn,
  ] = isNullOrUnDef(custImport.value['default'])
    ? EntityCustFunction.value
    : custImport.value['default']();
  others.value = OthersValues(objParams['CODE'], objParams['ID']);
  const buttons = ref<[]>(await getRoleButtons(currentRoute.value.meta.menuCode as string));
  keyFieldValues.value =
    KeyFieldValues && isFunction(KeyFieldValues)
      ? KeyFieldValues(objParams['CODE'], objParams['ID'])
      : [];
  const useformdata = GetUseForm && isFunction(GetUseForm) ? GetUseForm() : {};
  const useFormData = ref<any>(useformdata);
  /* 表单中插槽渲染按钮打开模态框useModal方法 */
  const modals = GetUseModals && isFunction(GetUseModals) ? GetUseModals() : { useModalData: {} };
  const useModalData = ref(modals['useModalData']);
  /* 页签信息，表格需要根据页签信息中对应的实体名来查询对应表的数据 */
  const CurrTabInfo = objParams['Tabs'].filter((q) => q.entityName == props.entityName)[0];
  const [registerTable, { getForm, reload, setProps }] = useTable({
    title: `${objParams['firstTitle']}列表`,
    api: getListByPage,
    searchInfo: { TABLE_NAME: objParams['Name'], ...objParams['others'] },
    columns: GetBaseColumns(),
    title: `${CurrTabInfo.tableTitle}列表`,
    api: getListByPage, //通用查询方法
    searchInfo: {
      TABLE_NAME: CurrTabInfo.entityName,
      NeedInclude: CurrTabInfo.NeedInclude,
      ...objParams['keyFieldValues'],
    }, //查询条件中的TABLE_NAME传入页签信息中对应的实体名CurrTabInfo.entityName
    columns: GetBaseColumns(CurrTabInfo.entityName), //传入页签信息中对应的实体名CurrTabInfo.entityName获取表格字段信息
    formConfig: {
      labelWidth: 140,
      schemas: GetSearchForm(),
      schemas: GetSearchForm(CurrTabInfo.entityName), //传入页签信息中对应的实体名CurrTabInfo.entityName获取查询表单的字段信息
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    canResize: true,
    showIndexColumn: false,
    actionColumn: {
      width: 130,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
    }, //自定义操作列
    actionColumn: ActionColumn
      ? ActionColumn
      : {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
        }, //自定义操作列
  });

  onMounted(() => {});
@@ -122,7 +184,7 @@
    const params = {
      record,
      isUpdate: true,
      ifSave: false,
      ifSave: objParams['ifSave'],
      entityName: props.entityName,
      formJson: GetCrudForm(), //getFormSchema(`${entityName.value}_Crud`),
      cType,
@@ -131,23 +193,12 @@
      useFormData,
      crudColSlots: colSlots.value,
      data,
      selectVals,
      colSlots,
    };
    const actionItem = [
      {
        icon: 'clarity:note-edit-line',
        onClick: editRecord.bind(null, openDrawer, params),
      },
      {
        icon: 'ant-design:delete-outlined',
        color: 'error',
        popConfirm: {
          title: '是否确认删除?',
          placement: 'left',
          confirm: deleteRecord.bind(null, reload, params),
        },
      },
    ];
    if (isNullOrUnDef(custImport.value)) {
    const _actionItem: ActionItem[] = [];
    const actionItem = GenerateActionButton(params, buttons, openDrawer, reload, _actionItem);
    if (isNullOrUnDef(custImport.value['default'])) {
      return actionItem;
    }
    return nActionItem(
@@ -160,36 +211,11 @@
      useModal,
      go,
      setProps,
      openCustModal,
    );
  }

  /**
   * @description: 公用编辑方法
   * @param {Fn} fn
   * @param {*} params
   * @return {*}
   */
  function editRecord(fn: Fn, params: {}) {
    fn(true, params);
  }

  /**
   * @description: 公用删除方法
   * @param {Fn} fn
   * @param {*} params
   * @return {*}
   */
  function deleteRecord(fn: Fn, params: {}) {
    console.log(params['record']);
    //删除
    DeleteEntity(params['record'], params['entityName']).then((action) => {
      if (action.IsSuccessed) {
        fn();
      }
    });
  }

  function handleCreate() {
  function handleCreate(fnName: string) {
    const _cruds = GetCrudForm();
    let isExistSql = '';
    for (const i in _cruds) {
@@ -197,15 +223,45 @@
        isExistSql = _cruds[i].field;
      }
    }
    openDrawer(true, {
      isUpdate: false,
      ifSave: false,
      entityName: props.entityName,
      formJson: GetCrudForm(), //getFormSchema(`${entityName.value}_Crud`),
      crudColSlots: colSlots.value,
      others: others.value,
      isExistSql: isExistSql,
    });

    if (isNullOrUnDef(custImport.value['default'])) {
      openDrawer(true, {
        isUpdate: false,
        ifSave: objParams.value['ifSave'],
        entityName: props.entityName,
        formJson: _cruds, //getFormSchema(`${entityName.value}_Crud`),
        crudColSlots: colSlots.value,
        keyFieldValues: keyFieldValues.value,
        isExistSql: isExistSql,
      });
    } else {
      const [{ CreateAction }] = custImport.value['default']();
      const result = CreateAction(props.entityName);
      switch (result.action) {
        case 'go':
          sessionStorage.removeItem(`${result.params.Name}_update_params`);
          // 将对象转换为JSON字符串并保存到sessionStorage
          sessionStorage.setItem(
            `${result.params.Name}_update_params`,
            encodeURI(JSON.stringify(result.params)),
          );
          go(
            `/${result.url}/${encodeURI(JSON.stringify({ sName: `${result.params.Name}_update`, Name: result.params.Name }))}`,
          );
          break;
        case 'drawer':
          openDrawer(true, {
            isUpdate: false,
            ifSave: objParams.value['ifSave'],
            entityName: props.entityName,
            formJson: _cruds, //getFormSchema(`${entityName.value}_Crud`),
            crudColSlots: colSlots.value,
            keyFieldValues: keyFieldValues.value,
            isExistSql: isExistSql,
          });
          break;
      }
    }
  }

  /**
@@ -237,4 +293,69 @@
  function handleSelectItem(item) {
    OpenSelectItem(openItemModal);
  }

  /**
   * @description: 弹出框确定返回
   * @param {*} d
   * @return {*}
   */
  function custSuccess(d) {
    reload();
  }

  /**
   * @description: 弹出框取消返回
   * @param {*} reload
   * @return {*}
   */
  function custCancel() {
    reload();
  }

  /**
   * @description: 各表单内弹出选择框选择成功后方法
   * @param {*} d
   * @param {*} u
   * @param {*} item
   * @return {*}
   */
  function handleEntSuccess(d, u, item) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      var values = GetSelectSuccess(d, u);
      selectVals.value = values; //保存弹出框选择的结果
      let _val = {};
      d.returnFieldName.map((x) => {
        _val[x] = values[x];
      });
      useFormData.value[item][1].setFieldsValue(_val);
    } catch (e) {}
  }

  /**
   * @description: 打开表单中的模态框
   * @param {*} item
   * @return {*}
   */
  function handleCustClick(item) {
    OpenSelectItem(
      useModalData.value[item][1].openModal, //带入openModal方法
      item,
      null,
      selectVals,
    );
  }

  /**
   * @description: 获取多表单插槽列表
   * @param {*} d
   * @return {*}
   */
  function getdtlSlots(d, callback) {
    dtlSlots.value = d;
    callback();
    // setTimeout(() => {
    //   callback();
    // }, 100);
  }
</script>