| | |
|---|
| | | * @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))); |
|---|
| | | // 从sessionStorage中读取参数并转换回对象 |
|---|
| | | 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() { |
|---|
| | | /* 动态import实体名.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 自定义onChange方法 |
|---|
| | | * @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 自定义onChange方法 |
|---|
| | | * @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> |
|---|
