| | |
| | | * @version: |
| | | * @Date: 2024-06-24 23:44:31 |
| | | * @LastEditors: Ben Lin |
| | | * @LastEditTime: 2024-08-04 01:21:43 |
| | | * @LastEditTime: 2024-08-09 16:49:10 |
| | | --> |
| | | <template> |
| | | <Card :title="GetTitle(props.configType)['configTitle']"> |
| | |
| | | v-if="field" |
| | | class="mt-1 ml-1" |
| | | size="small" |
| | | @click="handleSelectItem(item)" |
| | | @click="SelectItemInForm(item)" |
| | | preIcon="search|svg" |
| | | /> |
| | | <GeneralModal |
| | | @register="useModalData[item][0]" |
| | | @success="(d, u) => handleItemSuccess(d, u, item)" |
| | | @success="(d, u) => SelectInFormSuccess(d, u, item)" |
| | | /> |
| | | </template> |
| | | </BasicForm> |
| | | </Card> |
| | | <Card |
| | | :title="GetTitle(props.configType)['tableTitle']" |
| | | :title="GetTitle(props.configType, item)['tableTitle']" |
| | | :bordered="false" |
| | | class="!mt-5" |
| | | v-if="showOtherTable" |
| | | > |
| | | <BasicTable @register="useTables['Table']"> |
| | | v-for="item in OtherTables" |
| | | :key="item" |
| | | v-show="showOtherTable[item]"> |
| | | <BasicTable @register="useTables[item][0]" |
| | | v-if="showOtherTable[item]"> |
| | | <template #action="{ record }"> |
| | | <TableAction :actions="createActions(record)" /> |
| | | <TableAction :actions="createActions(record, item)" /> |
| | | </template> |
| | | </BasicTable> |
| | | <normalDrawer @register="useDrawers[item][0]" @success="(d,u) => EditSuccess(d, u, item)" /> |
| | | </Card> |
| | | <normalDrawer @register="registerDrawer" @success="handleSuccess" /> |
| | | </template> |
| | | <script lang="ts" setup> |
| | | import { Ref, inject, nextTick, onMounted, ref, unref, watch } from 'vue'; |
| | |
| | | const emit = defineEmits(['success', 'register']); |
| | | const props = defineProps({ |
| | | configType: { type: String }, |
| | | OtherTableName: { type: String }, |
| | | }); |
| | | const showOtherTable = ref(false); |
| | | const showOtherTable = ref<any>({}); //显示表格布尔对象 |
| | | const objParams = inject('objParams') as Ref<any>; |
| | | const custImport = ref<any[]>([]); |
| | | const EntityCustFunction = ref([ |
| | |
| | | ? EntityCustFunction.value |
| | | : custImport.value['default'](); |
| | | |
| | | const [registerDrawer, { openDrawer }] = useDrawer(); |
| | | const useModalData = ref(GetUseModals()); |
| | | const data = ref({}); |
| | | const useTables = ref(GetUseTables(data, emit)); |
| | | const useForms = ref(GetUseForm()); |
| | | const useDrawers = ref({}); |
| | | const OtherTables = ref(objParams.value['OtherTableName']); |
| | | /* 循环自定义表格名列表,初始化显示表格布尔对象 */ |
| | | objParams.value['OtherTableName'].forEach((x) => { |
| | | showOtherTable.value[x] = false; |
| | | useDrawers.value[x] = useDrawer(); |
| | | }); |
| | | |
| | | /* 注入选中节点数据 */ |
| | | const selectedNodes = inject('selectedNodes') as Ref<any>; |
| | |
| | | setProps({ |
| | | schemas: GetCrudForm(newVal[0].type), |
| | | }); |
| | | showOtherTable.value = result.isShow; |
| | | /* 显示其他表格 */ |
| | | if (showOtherTable.value) { |
| | | showOtherTable.value = false; |
| | | data.value['Table'] = result['Table']; |
| | | setTimeout(() => { |
| | | showOtherTable.value = true; |
| | | }, 10); |
| | | const name = result['name']; |
| | | if (showOtherTable.value[name]) { |
| | | showOtherTable.value[name] = false; |
| | | data.value[name] = result[name]; |
| | | data.value['Action'] = result['Action']; |
| | | useTables.value = GetUseTables(data, emit); |
| | | setTimeout(() => { |
| | | // useTables.value['Table'][1].setProps({ |
| | | showOtherTable.value[name] = true; |
| | | }, 10); |
| | | setTimeout(() => { |
| | | if (!isNullOrUnDef(name)) { |
| | | // useTables.value[name][1].setProps({ |
| | | // dataSource: [], |
| | | // }); |
| | | // useTables.value['Table'][1].setProps({ |
| | | // dataSource: data.value['Table'], |
| | | // useTables.value[name][1].setProps({ |
| | | // dataSource: data.value[name], |
| | | // }); |
| | | useTables.value['Table'][1].reload(); |
| | | }, 10); |
| | | useTables.value[name][1].reload(); |
| | | } |
| | | }, 1000); |
| | | } |
| | | }); |
| | | } |
| | |
| | | const nodes = selectedNodes.value; |
| | | nodeChange({ useForms, objParams, selectedNodes: nodes }).then((result) => { |
| | | showOtherTable.value = result.isShow; |
| | | if (showOtherTable.value) { |
| | | useTables.value['Table'][1].setProps({ |
| | | dataSource: [], |
| | | }); |
| | | useTables.value['Table'][1].setProps({ |
| | | dataSource: result['Table'], |
| | | }); |
| | | useTables.value['Table'][1].reload(); |
| | | data.value['Action'] = result['Action']; |
| | | useTables.value = GetUseTables(data, emit); |
| | | if (showOtherTable.value[result['name']]) { |
| | | data.value[result['name']] = result[result['name']]; |
| | | // useTables.value[result['name']][1].setProps({ |
| | | // dataSource: [], |
| | | // }); |
| | | // useTables.value[result['name']][1].setProps({ |
| | | // dataSource: result[result['name']], |
| | | // }); |
| | | if (!isNullOrUnDef(result['name'])) { |
| | | useTables.value[result['name']][1].reload(); |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | /** |
| | | * @description: 自定义提交方法 |
| | | * @param {*} values |
| | | * @return {*} |
| | | */ |
| | | async function customSubmitFunc(values) { |
| | | try { |
| | | SubmitFunc(values, props.configType, emit); |
| | |
| | | // }); |
| | | } catch (e) {} |
| | | } |
| | | |
| | | /** |
| | | * @description: 生成列表中操作项的按钮 |
| | | * @param {*} record |
| | | * @return {*} |
| | | */ |
| | | function createActions(record) { |
| | | function createActions(record, name) { |
| | | const params = { |
| | | record, |
| | | isUpdate: true, |
| | | entityName: objParams.value['OtherTableName'], |
| | | formJson: GetCrudForm(props.OtherTableName), |
| | | ifSave: true, |
| | | entityName: name, |
| | | formJson: GetCrudForm(name), |
| | | ifSave: objParams.value['ifSave'], |
| | | // cType, |
| | | // dtlSlots, |
| | | // formSchemas, |
| | | // useModalData, |
| | | // useFormData, |
| | | crudColSlots: objParams.value['crudColSlots'], |
| | | crudColSlots: objParams.value['crudColSlots'][name], |
| | | }; |
| | | |
| | | const actionItem = [ |
| | | { |
| | | icon: 'clarity:note-edit-line', |
| | | onClick: editRecord.bind(null, openDrawer, params), |
| | | onClick: editRecord.bind(null, useDrawers.value[name][1].openDrawer, params), |
| | | name: undefined, |
| | | }, |
| | | ]; |
| | |
| | | * @param {*} u |
| | | * @return {*} |
| | | */ |
| | | function handleSuccess(d, u) { |
| | | function EditSuccess(d, u, item) { |
| | | if (CustFunc && isFunction(CustFunc)) { |
| | | CustFunc( |
| | | { |
| | | ctype: objParams.value['OtherTableName'], |
| | | values: d, |
| | | data: data, |
| | | }, |
| | | useTables, |
| | | ).then(() => { |
| | | CustFunc({ |
| | | ctype: item, |
| | | values: d, |
| | | data: data, |
| | | }).then(() => { |
| | | /* 显示其他表格 */ |
| | | if (showOtherTable.value) { |
| | | showOtherTable.value = false; |
| | | if (showOtherTable.value[item]) { |
| | | showOtherTable.value[item] = false; |
| | | setTimeout(() => { |
| | | showOtherTable.value = true; |
| | | showOtherTable.value[item] = true; |
| | | }, 10); |
| | | useTables.value = GetUseTables(data, emit); |
| | | setTimeout(() => { |
| | | useTables.value['Table'][1].reload(); |
| | | useTables.value[item][1].reload(); |
| | | useForms.value['Action'][1].resetFields(); |
| | | useForms.value['Action'][1].setFieldsValue(data.value['Action'][0]); |
| | | }, 10); |
| | | } |
| | | }); |
| | | } |
| | | useTables.value['Table'][1].reload(); |
| | | useTables.value[item][1].reload(); |
| | | } |
| | | |
| | | /** |
| | |
| | | * @param {*} item |
| | | * @return {*} |
| | | */ |
| | | function handleSelectItem(item) { |
| | | function SelectItemInForm(item) { |
| | | OpenSelectItem(useModalData.value[item][1].openModal, item); |
| | | } |
| | | |
| | |
| | | * @param {*} item |
| | | * @return {*} |
| | | */ |
| | | function handleItemSuccess(d, u, item) { |
| | | function SelectInFormSuccess(d, u, item) { |
| | | GetSelectSuccess(d, u, item).then((result) => { |
| | | useForms.value[props.configType][1].setFieldsValue(result['value']); |
| | | data.value[props.configType as string].map((x) => { |
| | | Object.getOwnPropertyNames(result['value']).forEach(key => { |
| | | x[key] = result['value'][key]; |
| | | }); |
| | | }); |
| | | showOtherTable.value = result['isShow']; |
| | | if (showOtherTable.value) { |
| | | useTables.value['Table'][1].setProps({ |
| | | dataSource: [], |
| | | }); |
| | | useTables.value['Table'][1].setProps({ |
| | | dataSource: result['data'], |
| | | }); |
| | | useTables.value['Table'][1].reload(); |
| | | data.value[result.name] = result['data'] |
| | | /* 重新useTable,否则数据不刷新 */ |
| | | useTables.value = GetUseTables(data, emit); |
| | | if (showOtherTable.value[result.name]) { |
| | | showOtherTable.value[result.name] = false; |
| | | setTimeout(() => { |
| | | showOtherTable.value[result.name] = true; |
| | | }, 10); |
| | | useTables.value[result.name][1].reload(); |
| | | } |
| | | }); |
| | | } |