From 745815f637e5385b2cbc23a6ae02401bb8b6c675 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期六, 08 三月 2025 14:22:36 +0800
Subject: [PATCH] 详情页面优化
---
src/views/tigerprojects/system/lowcode/detail/index.vue | 370 ++++++++++------------------------------------------
1 files changed, 73 insertions(+), 297 deletions(-)
diff --git a/src/views/tigerprojects/system/lowcode/detail/index.vue b/src/views/tigerprojects/system/lowcode/detail/index.vue
index 539aaff..0d23006 100644
--- a/src/views/tigerprojects/system/lowcode/detail/index.vue
+++ b/src/views/tigerprojects/system/lowcode/detail/index.vue
@@ -3,324 +3,100 @@
* @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-07-22 01:55:07
-->
<template>
<PageWrapper :title="pageTitle" :content="contentStr" contentBackground @back="goBack">
<template #footer>
<a-tabs default-active-key="detail" v-model:activeKey="currentKey" @tabClick="tabClkcallback">
- <a-tab-pane key="detailfirst" :tab="firstTabName" />
- <a-tab-pane key="detailsecond" :tab="secondTabName" />
+ <a-tab-pane v-for="t in TabList" :tab="t.name" :key="t.key" />
</a-tabs>
</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" />
- <NormalModal @register="registerItemAdd" @success="(d, u) => handleItemSuccess(d, u, item)" />
- </template>
- </BasicTable>
- </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" />
- <NormalModal @register="registerItemAdd" @success="(d, u) => handleItemSuccess(d, u, item)" />
- </template>
- </BasicTable>
+ <div v-for="t in TabList" :key="t.key">
+ <Suspense>
+ <detail :entityName="t.entityName" v-if="currentKey == t.key"/>
+ </Suspense>
</div>
</div>
- <normalDrawer @register="registerDrawer" @success="handleSuccess" />
- <CustModal @register="registerCust" @success="custSuccess" :type="cType" :detailSlots="dtlSlots">
- <!-- 鐢ㄦ彃妲借嚜瀹氫箟澶氳〃鍗� -->
- <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]" />
- <NormalModal @register="useModalData[name][0]" @success="(d, u) => handleEntSuccess(d, u, item.name)" />
- </template>
- </BasicForm>
- <!-- 鑷畾涔夊唴瀹� -->
- </template>
- </CustModal>
</PageWrapper>
</template>
<script lang="ts" setup>
-import { ref, reactive } 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 { GetSelectSuccess, OpenCustModal, OpenSelectItem, custOnChange, getHomeUrl } from '../data';
-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 NormalModal from '/@/views/components/NormalModal.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 { ref, reactive, provide, Ref, defineAsyncComponent } 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 { custOnChange } from '../data';
+ import { useI18n } from '/@/hooks/web/useI18n';
-const { t: bt } = useI18n('');
-const { createMessage } = useMessage();
-const route = useRoute();
-const objParams = ref(JSON.parse(decodeURI(route.params?.id as string)));
-const ATabs = ref(Tabs);
-const ATabPane = ref(Tabs.TabPane);
-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 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 [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: 80,
- 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,
-});
+ const { t } = useI18n();
+ const detail = defineAsyncComponent(() => import('./detail.vue'));
+ const route = useRoute();
+ // const objParams = ref(JSON.parse(decodeURI(route.params?.id as string)));
+ const routeParams = ref(JSON.parse(decodeURI(route.params?.id as string)));
+ // 浠巗essionStorage涓鍙栧弬鏁板苟杞崲鍥炲璞�
+ const savedParams = sessionStorage.getItem(`${routeParams.value.sName}_params`);
+ const objParams = savedParams ? ref(JSON.parse(decodeURI(savedParams))) : ref({});
+ const ATabs = ref(Tabs);
+ const ATabPane = ref(Tabs.TabPane);
+ var ITEM_CODE = ref('');
+ const go = useGo();
+ const pageTitle = ref(objParams.value.pageTitle);
+ const contentStr = ref(objParams.value.contentStr);
+ // const firstTabName = ref(objParams.value.firstTabName);
+ // const secondTabName = ref(objParams.value.secondTabName);
+ const TabList = reactive(objParams.value.Tabs);
+ const entityName = ref(routeParams.value.Name);
+ const detailName = ref(objParams.value.detailName);
+ const crudColSlots = ref<any>(objParams.value.colSlots);
+ const keyFieldValues = ref<any>(null);
+ provide<Ref<any>>('objParams', objParams.value);
+ provide<Ref<any>>('keyFieldValues', keyFieldValues);
-function handleCreate() {
- openDrawer(true, {
- isUpdate: false,
- entityName: objParams.value.ID,
- formJson: GetFormColumns(entityName.value, 'detailfirst'),
- crudColSlots,
- others: objParams.value.others,
- });
-}
+ var currentKey = ref(TabList[0].key);
+ const { setTitle } = useTabs();
-function secondCreate() {
- openDrawer(true, {
- isUpdate: false,
- entityName: objParams.value.ID,
- formJson: _crudFormSchema.value,
- crudColSlots,
- });
-}
+ // 璁剧疆Tab鐨勬爣棰橈紙涓嶄細褰卞搷椤甸潰鏍囬锛�
+ setTitle(`璇︽儏锛�${detailName.value}`);
-// 姝ゅ鍙互寰楀埌鐢ㄦ埛ID
-//const BILLCODE = ref(route.params?.BILLCODE.split(',')[1]);
-var currentKey = ref('detailfirst');
-const { setTitle } = useTabs();
-// TODO
-// 鏈〉浠ｇ爜浠呬綔婕旂ず锛屽疄闄呭簲褰撻�氳繃userId浠庢帴鍙ｈ幏寰楃敤鎴风殑鐩稿叧璧勬枡
-
-// 璁剧疆Tab鐨勬爣棰橈紙涓嶄細褰卞搷椤甸潰鏍囬锛�
-setTitle(`璇︽儏锛�${detailName.value}`);
-
-// 椤甸潰宸︿晶鐐瑰嚮杩斿洖閾炬帴鏃剁殑鎿嶄綔
-function goBack() {
- go(getHomeUrl(entityName.value));
-}
-const tabClkcallback = (val: string) => {
- if (val == 'detailfirst') {
- ITEM_CODE.value = '';
+ // 椤甸潰宸︿晶鐐瑰嚮杩斿洖閾炬帴鏃剁殑鎿嶄綔
+ function goBack() {
+ /* 鍔ㄦ�乮mport瀹炰綋鍚�.ts鐨勮嚜瀹氫箟鏂规硶 */
+ try {
+ import(`../entityts/${entityName.value}.ts`)
+ .then((m) => {
+ const [{ GetHomeUrl }] = m.default();
+ // 鏈緥鐨勬晥鏋滄椂鐐瑰嚮杩斿洖濮嬬粓璺宠浆鍒拌处鍙峰垪琛ㄩ〉锛屽疄闄呭簲鐢ㄦ椂鍙繑鍥炰笂涓�椤�
+ go(GetHomeUrl({ colSlots: crudColSlots.value }));
+ })
+ .catch(() => {});
+ } catch (e) {}
}
-};
-
-/**
- * @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();
+ const tabClkcallback = (val: string) => {
+ if (val == 'detailfirst') {
+ ITEM_CODE.value = '';
}
- });
-}
+ };
-/**
- * @description: detailfirst tab涓鍒犳敼鎴愬姛杩斿洖鏂规硶
- * @return {*}
- */
-function handleSuccess() {
- reloadFirst();
-}
-
-/**
- * @description: 寮瑰嚭閫夋嫨妗嗛�夋嫨鎴愬姛鍚庝簨浠�
- * @param {*} d
- * @param {*} u
- * @param {*} item
- * @return {*}
- */
-function handleItemSuccess(d, u, item) {
- getForm().setFieldsValue(GetSelectSuccess(d, u, getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]));
-}
-
-/**
- * @description: 寮瑰嚭閫夋嫨妗�
- * @param {*} item
- * @return {*}
- */
-function handleSelectItem(item) {
- OpenSelectItem(openItemModal, getForm().getFieldsValue()[`${item.replace(/form-/, '').replace(/add/, '')}PSelect_0`]);
-}
-
-/**
- * @description: Select 鑷畾涔塷nChange鏂规硶
- * @param {*} obj
- * @return {*}
- */
-function onChangeConfig(obj: any) {
- if (obj.component == 'Select') {
- var options = obj.componentProps.options;
- var onChange = obj.componentProps.onChange;
- obj.componentProps = ({ schema, tableAction, formActionType, formModel }) => {
- return {
- options: options,
- onChange: (e) => custOnChange(e, onChange, objParams.value.ID),
+ /**
+ * @description: Select 鑷畾涔塷nChange鏂规硶
+ * @param {*} obj
+ * @return {*}
+ */
+ function onChangeConfig(obj: any) {
+ if (obj.component == 'Select') {
+ var options = obj.componentProps.options;
+ var onChange = obj.componentProps.onChange;
+ obj.componentProps = ({ schema, tableAction, formActionType, formModel }) => {
+ return {
+ options: options,
+ onChange: (e) => custOnChange(e, onChange, objParams.value.ID),
+ };
};
- };
+ }
}
-}
-
-/**
- * @description: 鑷畾涔夊脊鍑烘纭畾杩斿洖
- * @param {*} d
- * @return {*}
- */
-function custSuccess(d) {
- reload();
-}
-
-/**
- * @description: 鍚勮〃鍗曞唴寮瑰嚭閫夋嫨妗嗛�夋嫨鎴愬姛鍚庢柟娉�
- * @param {*} d
- * @param {*} u
- * @param {*} item
- * @return {*}
- */
-function handleEntSuccess(d, u, item) {
- var values = GetSelectSuccess(d, u, cType.value);
- selectVals.value = values; //淇濆瓨寮瑰嚭妗嗛�夋嫨鐨勭粨鏋�
- let _val = {};
- _val[d.returnFieldName] = values[d.returnFieldName];
- useFormData.value[item][1].setFieldsValue(_val);
-}
-
-/**
- * @description: 鎵撳紑鑷畾涔夋ā鎬佹
- * @param {*} item
- * @return {*}
- */
-function handleCustClick(item) {
- OpenCustModal(
- useModalData.value[item][1].openModal, //甯﹀叆openModal鏂规硶
- cType.value,
- item,
- [],
- // selectVals.value['ROUTE_CODE'],
- ); //[openRvModal], selectVals.value['ID']杩欐槸鑷畾涔夊弬鏁帮紝鎸夊疄闄呴渶姹�
-}
</script>
--
Gitblit v1.9.3