| | |
|---|
| | | * @version: |
|---|
| | | * @Date: 2024-05-30 13:28:20 |
|---|
| | | * @LastEditors: Ben Lin |
|---|
| | | * @LastEditTime: 2024-07-14 00:58:50 |
|---|
| | | * @LastEditTime: 2024-08-06 19:57:41 |
|---|
| | | --> |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <Suspense> |
|---|
| | | <mainTable /> |
|---|
| | | </Suspense> |
|---|
| | | <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]" |
|---|
| | | /> |
|---|
| | | <GeneralModal |
|---|
| | | @register="useModalData[name][0]" |
|---|
| | | @success="(d, u) => handleEntSuccess(d, u, item.name)" |
|---|
| | | /> |
|---|
| | | </template> |
|---|
| | | </BasicForm> |
|---|
| | | <!-- 自定义内容 --> |
|---|
| | | </template> |
|---|
| | | </CustModal> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | <script lang="ts" setup> |
|---|
| | | import { Ref, h, onMounted, provide, ref, unref } from 'vue'; |
|---|
| | | import { Ref, h, onMounted, provide, ref, unref, watch } from 'vue'; |
|---|
| | | import mainTable from './mainTable.vue'; |
|---|
| | | import GeneralModal from '/@/views/components/GeneralModal.vue'; |
|---|
| | | import { DeleteEntity, GetEnum, getEntity, getListByPage } from '/@/api/tigerapi/system'; |
|---|
| | | import { GetEnum, getEntity, getListByPage } from '/@/api/tigerapi/system'; |
|---|
| | | import { useRoute, useRouter } from 'vue-router'; |
|---|
| | | import { Tag, Tooltip } from 'ant-design-vue'; |
|---|
| | | import CustModal from '/@/views/components/CustModal.vue'; |
|---|
| | | import { BasicForm, useForm } from '/@/components/Form/index'; |
|---|
| | | import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is'; |
|---|
| | | import { custOnChange, OpenCustModal, GetUseModalData } from '../data'; |
|---|
| | | import { useModal } from '/@/components/Modal'; |
|---|
| | | import { custOnChange, OpenCustModal, GetUseModalData, initRoute } from '../data'; |
|---|
| | | import { useLocale } from '/@/locales/useLocale'; |
|---|
| | | import { uploadApi } from '/@/api/sys/upload'; |
|---|
| | | import { useGo } from '/@/hooks/web/usePage'; |
|---|
| | | import { useI18n } from '/@/hooks/web/useI18n'; |
|---|
| | | import { getRoleButtons } from '/@/api/sys/menu'; |
|---|
| | | import { EntityCustFunctionType } from '/@/api/tigerapi/model/basModel'; |
|---|
| | | import { isFunction } from 'xe-utils'; |
|---|
| | | |
|---|
| | | const { getLocale } = useLocale(); |
|---|
| | | const { t } = useI18n(); |
|---|
| | |
|---|
| | | const { currentRoute } = useRouter(); |
|---|
| | | const go = useGo(); |
|---|
| | | const objParams = ref(JSON.parse(decodeURI(route.params?.id as string))); |
|---|
| | | const _columns = ref([]); |
|---|
| | | const _searchFormSchema = ref([]); |
|---|
| | | const _crudFormSchema = ref([]); |
|---|
| | | const entityName = ref(objParams.value.ID); |
|---|
| | | const _columns = ref<any[]>([]); |
|---|
| | | const _searchFormSchema = ref<any[]>([]); |
|---|
| | | const _crudFormSchema = ref<any[]>([]); |
|---|
| | | const useModalData = ref({}); //表单中插槽渲染按钮打开模态框useModal方法 |
|---|
| | | const useFormData = ref({}); |
|---|
| | | const cType = ref(''); |
|---|
| | | const dtlSlots = ref([] as any[]); |
|---|
| | | const selectVals = ref({}); |
|---|
| | | const isExistSql = ref(''); |
|---|
| | | const custImport = ref<any>(null); |
|---|
| | | const custImport = ref<any[]>([]); |
|---|
| | | const isMounted = ref(false); |
|---|
| | | const buttons = ref([]); |
|---|
| | | const AuthOption = ref({ |
|---|
| | | BY_ORG: '', |
|---|
| | | BY_PROD: '', |
|---|
| | | BY_WH: '', |
|---|
| | | }); |
|---|
| | | const keyFieldValues = ref<any>(null); |
|---|
| | | provide<Ref<any>>('objParams', objParams.value); |
|---|
| | | provide<Ref<any>>('objParams', objParams); |
|---|
| | | provide<Ref<any[]>>('_columns', _columns); |
|---|
| | | provide<Ref<any[]>>('_searchFormSchema', _searchFormSchema); |
|---|
| | | provide<Ref<any[]>>('_crudFormSchema', _crudFormSchema); |
|---|
| | | provide<Ref<string>>('isExistSql', isExistSql); |
|---|
| | | provide<Ref<{}>>('AuthOption', AuthOption); |
|---|
| | | provide<Ref<any>>('keyFieldValues', keyFieldValues); |
|---|
| | | |
|---|
| | | const [registerCust, { openModal: openCustomModal, closeModal }] = useModal(); |
|---|
| | | |
|---|
| | | onMounted(async () => { |
|---|
| | | /* 用json获取列 */ |
|---|
| | | // _searchFormSchema.value = await fetchJson( |
|---|
| | |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | // _columns.value = objs; |
|---|
| | | |
|---|
| | | isMounted.value = false; |
|---|
| | | const EntityCustFunction = ref([ |
|---|
| | | { |
|---|
| | | ActionItem(params: Recordable<any>, data, ...args) {}, |
|---|
| | | } as EntityCustFunctionType, |
|---|
| | | ]); |
|---|
| | | /* 动态import实体名.ts的自定义方法 */ |
|---|
| | | try { |
|---|
| | | custImport.value = await import(`../entityts/${objParams.value.ID}.ts`); |
|---|
| | | } catch (e) {} |
|---|
| | | const [{ InitCrudFormSchema }] = isNullOrUnDef(custImport.value['default']) |
|---|
| | | ? EntityCustFunction.value |
|---|
| | | : custImport.value['default'](); |
|---|
| | | isMounted.value = true; |
|---|
| | | |
|---|
| | | //获取表单中插槽渲染的按钮点击弹出模态窗口的实例 |
|---|
| | |
|---|
| | | const data = await getEntity({ |
|---|
| | | sqlcmd: "ASSEMBLY_NAME ='" + objParams.value.ID + "'", |
|---|
| | | entityName: 'SYS_LOW_CODE', |
|---|
| | | order: '' |
|---|
| | | order: '', |
|---|
| | | }); |
|---|
| | | AuthOption.value.BY_ORG = data.Data.Items[0].BY_ORG; |
|---|
| | | AuthOption.value.BY_PROD = data.Data.Items[0].BY_PROD; |
|---|
| | | AuthOption.value.BY_WH = data.Data.Items[0].BY_WH; |
|---|
| | | var searchForms = JSON.parse(data.Data.Items[0].SEARCH_FORM_JSON); |
|---|
| | | for (const i in searchForms) { |
|---|
| | | if ( |
|---|
| | |
|---|
| | | onChangeConfig(searchForms[i]); |
|---|
| | | } |
|---|
| | | _searchFormSchema.value = searchForms; |
|---|
| | | var _cruds = JSON.parse(data.Data.Items[0].FORM_JSON); |
|---|
| | | var _cruds: any[] = []; |
|---|
| | | /* 如果有初始化增删改页面结构的方法，则进入 */ |
|---|
| | | if (InitCrudFormSchema && isFunction(InitCrudFormSchema)) { |
|---|
| | | _cruds = InitCrudFormSchema(objParams.value.ID); |
|---|
| | | } else { |
|---|
| | | /* 没有初始化增删改页面结构的方法时进入 */ |
|---|
| | | _cruds = JSON.parse(data.Data.Items[0].FORM_JSON); |
|---|
| | | } |
|---|
| | | for (const i in _cruds) { |
|---|
| | | if ( |
|---|
| | | !isNullOrEmpty(_cruds[i].componentProps) && |
|---|
| | |
|---|
| | | _cruds[i].componentProps.api = uploadApi; |
|---|
| | | _cruds[i].componentProps.multiple = false; |
|---|
| | | _cruds[i].componentProps.maxNumber = 1; |
|---|
| | | _cruds[i].componentProps.uploadParams = {entityName: objParams.value.ID}; |
|---|
| | | _cruds[i].componentProps.uploadParams = { entityName: objParams.value.ID }; |
|---|
| | | _cruds[i].rules = [{ required: true, message: '请选择上传文件' }]; |
|---|
| | | } |
|---|
| | | if (_cruds[i].isexist == 'Y') { |
|---|
| | |
|---|
| | | }; |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | //弹出框确定返回 |
|---|
| | | function custSuccess(d) { |
|---|
| | | // reload(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @description: 各表单内弹出选择框选择成功后方法 |
|---|
| | | * @param {*} d |
|---|
| | | * @param {*} u |
|---|
| | | * @param {*} item |
|---|
| | | * @return {*} |
|---|
| | | */ |
|---|
| | | function handleEntSuccess(d, u, item) { |
|---|
| | | /* 动态import实体名.ts的自定义方法 */ |
|---|
| | | try { |
|---|
| | | import(`../entityts/${cType.value}.ts`).then((m) => { |
|---|
| | | const [{ GetSelectSuccess }] = m.default(); |
|---|
| | | var values = GetSelectSuccess(d, u); |
|---|
| | | selectVals.value = values; //保存弹出框选择的结果 |
|---|
| | | let _val = {}; |
|---|
| | | _val[d.returnFieldName] = values[d.returnFieldName]; |
|---|
| | | useFormData.value[item][1].setFieldsValue(_val); |
|---|
| | | }); |
|---|
| | | } catch (e) {} |
|---|
| | | } |
|---|
| | | |
|---|
| | | /** |
|---|
| | | * @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> |
|---|
