<!--
|
* __----~~~~~~~~~~~------___
|
* . . ~~//====...... __--~ ~~
|
* -. \_|// |||\\ ~~~~~~::::... /~
|
* ___-==_ _-~o~ \/ ||| \\ _/~~-
|
* __---~~~.==~||\=_ -_--~/_-~|- |\\ \\ _/~
|
* _-~~ .=~ | \\-_ '-~7 /- / || \ /
|
* .~ .~ | \\ -_ / /- / || \ /
|
* / ____ / | \\ ~-_/ /|- _/ .|| \ /
|
* |~~ ~~|--~~~~--_ \ ~==-/ | \~--===~~ .\
|
* ' ~-| /| |-~\~~ __--~~
|
* |-~~-_/ | | ~\_ _-~ /\
|
* / \ \__ \/~ \__
|
* _--~ _/ | .-~~____--~-/ ~~==.
|
* ((->/~ '.|||' -_| ~~-/ , . _||
|
* -_ ~\ ~~---l__i__i__i--~~_/
|
* _-~-__ ~) \--______________--~~
|
* //.-~~~-~_--~- |-------~~~~~~~~
|
* //.-~~~--\
|
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
*
|
* 神兽保佑 永无BUG
|
-->
|
|
<!--
|
* @Description: 通用侧边框
|
* @Author: Ben Lin
|
* @version:
|
* @Date: 2024-05-30 13:28:20
|
* @LastEditors: Ben Lin
|
* @LastEditTime: 2024-06-14 09:14:35
|
-->
|
<template>
|
<BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="600px" @ok="handleSubmit">
|
<BasicForm @register="registerForm">
|
<template #[item]="{ field }" v-for="item in crudColSlots" :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>
|
</BasicForm>
|
</BasicDrawer>
|
</template>
|
<script lang="ts" setup>
|
import { ref, computed, unref, onMounted } from 'vue';
|
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
|
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
import { useGlobSetting } from '/@/hooks/setting';
|
import NormalModal from '/@/views/components/NormalModal.vue';
|
import { SaveEntity, fetchJson, formatValues } from '/@/api/tigerapi/system';
|
import { useModal } from '/@/components/Modal';
|
import { GetSelectSuccess, OpenSelectItem } from './data';
|
import { isArray, isNullOrEmpty } from '/@/utils/is';
|
|
const emit = defineEmits(['success', 'register']);
|
const globSetting = useGlobSetting();
|
const isUpdate = ref(true);
|
const entityName = ref('');
|
const formSchema = ref([]);
|
const crudColSlots = ref<any>([]);
|
const [registerItemAdd, { openModal: openItemModal }] = useModal();
|
const [registerForm, { resetFields, setFieldsValue, getFieldsValue, validate }] = useForm({
|
labelWidth: 140,
|
schemas: formSchema as unknown as FormSchema[],
|
actionColOptions: {
|
span: 24,
|
},
|
showActionButtonGroup: false,
|
});
|
|
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
isUpdate.value = !!data?.isUpdate;
|
entityName.value = data?.entityName;
|
// formSchema.value = await fetchJson(
|
// `${globSetting.downloadUrl}/LowCode/${unref(entityName)}/${
|
// entityName.value
|
// }_addEditform.json`,
|
// );
|
formSchema.value = data?.formJson;
|
crudColSlots.value = data?.crudColSlots;
|
resetFields();
|
setDrawerProps({ confirmLoading: false });
|
|
if (unref(isUpdate)) {
|
setFieldsValue({
|
...data.record,
|
});
|
}else{
|
if(!isNullOrEmpty(data?.others)){}
|
setFieldsValue(data?.others);
|
}
|
});
|
|
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
|
|
onMounted(async () => { });
|
async function handleSubmit() {
|
try {
|
let values = await validate();
|
//判断保存的值如果是[]数组的，就直接取[0]第一个值，一般针对上传模板的地址
|
values = formatValues(values);
|
setDrawerProps({ confirmLoading: true });
|
// TODO custom api
|
//保存
|
SaveEntity(values, unref(isUpdate), unref(entityName)).then((action) => {
|
if (action.IsSuccessed) {
|
closeDrawer();
|
emit('success');
|
}
|
});
|
} finally {
|
setDrawerProps({ confirmLoading: false });
|
}
|
}
|
|
/**
|
* @description: 弹出选择框选择成功后事件
|
* @param {*} d
|
* @param {*} u
|
* @param {*} item
|
* @return {*}
|
*/
|
function handleItemSuccess(d, u, item) {
|
setFieldsValue(GetSelectSuccess(d, u, getFieldsValue()[`${item.replace(/add/, '')}PSelect_0`]));
|
}
|
|
/**
|
* @description: 弹出选择框
|
* @param {*} item
|
* @return {*}
|
*/
|
function handleSelectItem(item) {
|
OpenSelectItem(openItemModal, getFieldsValue()[`${item.replace(/add/, '')}PSelect_0`]);
|
}
|
</script>
|
