详情页面优化

Ben Lin

2024-06-23 f1d47feeee1ddb5751847b71f789f2c3b822ec32

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

@@ -1,18 +1,10 @@
<!--
 * @Description: file content
 * @Author: Ben Lin
 * @version: 
 * @Date: 2024-06-18 15:09:48
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-23 00:31:33
-->
<!--
 * @Description: 低代码详情呈现页面
 * @Author: Ben Lin
 * @version: 
 * @Date: 2024-05-30 13:28:20
 * @LastEditors: your name
 * @LastEditTime: 2024-06-17 11:29:54
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-23 22:58:33
-->
<template>
  <PageWrapper :title="pageTitle" :content="contentStr" contentBackground @back="goBack">
@@ -24,66 +16,14 @@
    </template>
    <div>
      <div v-if="currentKey == 'detailfirst'">
        <BasicTable @register="detailTable">
          <template #toolbar>
            <a-button type="primary" @click="handleCreate" preIcon="add_02|svg"> 新增 </a-button>
          </template>
          <template #action="{ record }">
            <TableAction
              :actions="[
                {
                  icon: 'clarity:note-edit-line',
                  onClick: handleEdit.bind(null, record),
                },
                {
                  icon: 'ant-design:delete-outlined',
                  color: 'error',
                  popConfirm: {
                    title: '是否确认删除?',
                    placement: 'left',
                    confirm: handleDelete.bind(null, record),
                  },
                },
              ]"
            />
          </template>
          <template #[item]="{ field }" v-for="item in colSlots" :key="item">
            <a-button
              v-if="field"
              class="mt-1 ml-1"
              size="small"
              @click="handleSelectItem(item)"
              preIcon="search|svg"
            />
            <GeneralModal
              @register="registerItemAdd"
              @success="(d, u) => handleItemSuccess(d, u, item)"
            />
          </template>
        </BasicTable>
        <Suspense>
          <detail :entityName="entityName" />
        </Suspense>
      </div>
      <div v-if="currentKey == 'detailsecond'">
        <BasicTable @register="detailsecondTable">
          <template #toolbar>
            <a-button type="primary" @click="secondCreate" preIcon="add_02|svg"> 新增 </a-button>
          </template>
          <template #[item]="{ field }" v-for="item in secondColSlots" :key="item">
            <a-button
              v-if="field"
              class="mt-1 ml-1"
              size="small"
              @click="handleSelectItem(item)"
              preIcon="search|svg"
            />
            <GeneralModal
              @register="registerItemAdd"
              @success="(d, u) => handleItemSuccess(d, u, item)"
            />
          </template>
        </BasicTable>
        <Suspense></Suspense>
      </div>
    </div>
    <normalDrawer @register="registerDrawer" @success="handleSuccess" />
    <CustModal
      @register="registerCust"
      @success="custSuccess"
@@ -114,31 +54,24 @@
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { ref, provide, Ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { PageWrapper } from '/@/components/Page';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { Tabs } from 'ant-design-vue';
  import { useGo } from '/@/hooks/web/usePage';
  //详情列表
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { OpenCustModal, custOnChange } from '../data';
  import detail from './detail.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { DeleteEntity, getListByPage } from '/@/api/tigerapi/system';
  import { useDrawer } from '/@/components/Drawer';
  import normalDrawer from '../normalDrawer.vue';
  import GeneralModal from '/@/views/components/GeneralModal.vue';
  import CustModal from '/@/views/components/CustModal.vue';
  import { BasicForm } from '/@/components/Form/index';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useModal } from '/@/components/Modal';
  import { GetBaseColumns, GetFormColumns, GetSearchFormColumns } from './data';
  import { isNullOrUnDef } from '/@/utils/is';

  const { t } = useI18n();

  const { t: bt } = useI18n('');
  const { createMessage } = useMessage();
  const route = useRoute();
  const objParams = ref(JSON.parse(decodeURI(route.params?.id as string)));
@@ -147,96 +80,27 @@
  var ITEM_CODE = ref('');
  const go = useGo();
  const pageTitle = ref(objParams.value.pageTitle);
  const firstTitle = ref(objParams.value.firstTitle);
  const secondTitle = ref(objParams.value.secondTitle);
  const contentStr = ref(objParams.value.contentStr);
  const firstTabName = ref(objParams.value.firstTabName);
  const secondTabName = ref(objParams.value.secondTabName);
  const entityName = ref(objParams.value.ID);
  const entityName = ref(objParams.value.Name);
  const detailName = ref(objParams.value.detailName);
  const globSetting = useGlobSetting();
  const _columns = ref([]);
  const _searchFormSchema = ref([]);
  const _crudFormSchema = ref([]);
  const formSchemas = ref({}); //弹出框多表单结构
  const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法
  const useFormData = ref({});
  const colSlots = ref<any>(objParams.value.colSlots); //按钮插槽
  const secondColSlots = ref<any>(objParams.value.secondColSlots); //按钮插槽
  const crudColSlots = ref<any>(objParams.value.colSlots);
  const cType = ref('');
  const dtlSlots = ref([] as any[]);
  const selectVals = ref({});
  //获取JobId
  const BILLCODE = ref(route.params?.BillCode);
  const others = ref<any>(null);
  provide<Ref<any>>('objParams', objParams.value);
  provide<Ref<any>>('others', others);
  const [registerCust] = useModal();
  const [registerItemAdd, { openModal: openItemModal }] = useModal();
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [detailTable, { reload: reloadFirst }] = useTable({
    title: `${firstTitle.value}列表`,
    api: getListByPage,
    searchInfo: { TABLE_NAME: entityName.value, ...objParams.value.others },
    columns: GetBaseColumns(entityName.value, 'detailfirst'),
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    canResize: true,
    showIndexColumn: false,
    formConfig: {
      labelWidth: 120,
      schemas: GetSearchFormColumns(entityName.value, 'detailfirst'),
    },
    actionColumn: {
      width: 130,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right', //undefined,
    },
    // searchInfo: { BILLCODE },
  });
  const [detailsecondTable, { getForm, reload }] = useTable({
    title: `${secondTitle.value}列表`,
    api: getListByPage,
    columns: GetBaseColumns(entityName.value, 'detailsecond'),
    formConfig: {
      labelWidth: 120,
      schemas: GetFormColumns(entityName.value, 'detailsecond'),
      model: { ITEM_CODE: ITEM_CODE },
    },
    useSearchForm: true,
    // searchInfo: { BILLCODE },
    showTableSetting: false,
    bordered: true,
    canResize: true,
    showIndexColumn: false,
  });

  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
      entityName: objParams.value.ID,
      formJson: GetFormColumns(entityName.value, 'detailfirst'),
      crudColSlots,
      others: objParams.value.others,
    });
  }

  function secondCreate() {
    openDrawer(true, {
      isUpdate: false,
      entityName: objParams.value.ID,
      formJson: _crudFormSchema.value,
      crudColSlots,
    });
  }

  // 此处可以得到用户ID
  //const BILLCODE = ref(route.params?.BILLCODE.split(',')[1]);
  var currentKey = ref('detailfirst');
  const { setTitle } = useTabs();
  // TODO
  // 本页代码仅作演示，实际应当通过userId从接口获得用户的相关资料

  // 设置Tab的标题（不会影响页面标题）
  setTitle(`详情：${detailName.value}`);
@@ -259,121 +123,6 @@
      ITEM_CODE.value = '';
    }
  };

  /**
   * @description: detailfirst tab中的表格编辑记录弹出侧边框方法
   * @param {*} record
   * @return {*}
   */
  function handleEdit(record: Recordable) {
    openDrawer(true, {
      record,
      isUpdate: true,
      entityName: objParams.value.ID,
      formJson: GetFormColumns(entityName.value, 'detailfirst'),
      crudColSlots,
    });
  }

  /**
   * @description: detailfirst tab中的表格删除记录方法
   * @param {*} record
   * @return {*}
   */
  function handleDelete(record: Recordable) {
    console.log(record);
    //删除
    DeleteEntity(record, entityName.value).then((action) => {
      if (action.IsSuccessed) {
        reloadFirst();
      }
    });
  }

  /**
   * @description: detailfirst tab中增删改成功返回方法
   * @return {*}
   */
  function handleSuccess() {
    reloadFirst();
  }

  /**
   * @description: 弹出选择框选择成功后事件
   * @param {*} d
   * @param {*} u
   * @param {*} item
   * @return {*}
   */
  function handleItemSuccess(d, u, item) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      import(
        /* @vite-ignore */ `../entityts/${getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}`
      )
        .then((m) => {
          const [{ GetSelectSuccess }] = m.default();
          getForm().setFieldsValue(GetSelectSuccess(d, u));
        })
        .catch(() => {
          getForm().setFieldsValue({
            ITEM_CODE: d.values['val'],
          });
        });
    } catch (e) {}
  }

  /**
   * @description: 弹出选择框
   * @param {*} item
   * @return {*}
   */
  function handleSelectItem(item) {
    /* 动态import实体名.ts的自定义方法 */
    try {
      import(
        /* @vite-ignore */ `../entityts/${getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]}`
      )
        .then((m) => {
          const [{ OpenSelectItem }] = m.default();
          OpenSelectItem(openItemModal);
        })
        .catch(() => {
          openItemModal(true, {
            title: '物料列表',
            schemas: [
              {
                field: 'ITEM_CODE',
                component: 'Input',
                label: '物料编码',
                colProps: {
                  span: 12,
                },
              },
            ],
            ItemColumns: [
              {
                title: t('物料编码'),
                dataIndex: 'ITEM_CODE',
                resizable: true,
                sorter: true,
                width: 200,
              },
              {
                title: t('物料名称'),
                dataIndex: 'ITEM_NAME',
                resizable: true,
                sorter: true,
                width: 180,
              },
            ],
            tableName: 'BAS_ITEM',
            rowKey: 'ITEM_CODE',
            searchInfo: { TABLE_NAME: 'BAS_ITEM' },
          });
        });
    } catch (e) {}
  }

  /**
   * @description: Select 自定义onChange方法
@@ -399,7 +148,7 @@
   * @return {*}
   */
  function custSuccess(d) {
    reload();
    // reload();
  }

  /**