232 lines
7.7 KiB
Vue
232 lines
7.7 KiB
Vue
<template>
|
||
<BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="title" width="800px" showFooter :showOkBtn="false">
|
||
<template #insertFooter> </template>
|
||
<a-row class="p-10px dynamic-form">
|
||
<!-- 表单 -->
|
||
<a-form :colon="false" size="middle" layout="horizontal" labelAlign="right" :labelCol="{ style: { width: '100px' } }" :model="dataForm" ref="formRef">
|
||
<a-row :gutter="15">
|
||
<!-- 具体表单 -->
|
||
<a-col :span="24" class="ant-col-item">
|
||
<a-form-item name="project_code">
|
||
<template #label>项目编码： </template>
|
||
<YunzhupaasInput
|
||
v-model:value="dataForm.project_code"
|
||
placeholder="请输入项目编码"
|
||
:maxlength="30"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.project_code">
|
||
</YunzhupaasInput>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item">
|
||
<a-form-item name="project_name">
|
||
<template #label>项目名称： </template>
|
||
<YunzhupaasInput
|
||
v-model:value="dataForm.project_name"
|
||
placeholder="请输入项目名称"
|
||
:maxlength="50"
|
||
disabled
|
||
detailed
|
||
allowClear
|
||
:style="{ width: '100%' }"
|
||
:maskConfig="maskConfig.project_name">
|
||
</YunzhupaasInput>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item">
|
||
<a-form-item name="parent_project_id">
|
||
<template #label>上级项目： </template> <p>{{ dataForm.parent_project_id }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item">
|
||
<a-form-item name="org_id">
|
||
<template #label>归属组织： </template> <p>{{ dataForm.org_id }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item">
|
||
<a-form-item name="project_type">
|
||
<template #label>项目类型： </template> <p>{{ dataForm.project_type }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item">
|
||
<a-form-item name="project_start_date">
|
||
<template #label>启动日期： </template> <p>{{ dataForm.project_start_date }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item">
|
||
<a-form-item name="project_state_id">
|
||
<template #label>项目状态： </template> <p>{{ dataForm.project_state_id }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item">
|
||
<a-form-item name="seq_num">
|
||
<template #label>顺序号： </template>
|
||
<YunzhupaasInputNumber
|
||
v-model:value="dataForm.seq_num"
|
||
placeholder="请输入顺序号"
|
||
disabled
|
||
detailed
|
||
:style="{ width: '100%' }"
|
||
:step="1"
|
||
:controls="false">
|
||
</YunzhupaasInputNumber>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="24" class="ant-col-item">
|
||
<a-form-item name="remark">
|
||
<template #label>备注： </template> <p>{{ dataForm.remark }}</p>
|
||
</a-form-item>
|
||
</a-col>
|
||
<!-- 表单结束 -->
|
||
</a-row>
|
||
</a-form>
|
||
</a-row>
|
||
</BasicDrawer>
|
||
<!-- 有关联表单详情：开始 -->
|
||
<RelationDetail ref="relationDetailRef" />
|
||
<!-- 有关联表单详情：结束 -->
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { getDetailInfo } from './helper/api';
|
||
import { getConfigData } from '@/api/onlineDev/visualDev';
|
||
import { reactive, toRefs, nextTick, ref, computed, unref, toRaw } from 'vue';
|
||
import { BasicModal, useModal } from '@/components/Modal';
|
||
import { BasicDrawer, useDrawer } from '@/components/Drawer';
|
||
// 有关联表单详情
|
||
import RelationDetail from '@/views/common/dynamicModel/list/detail/index.vue';
|
||
// 表单权限
|
||
import { usePermission } from '@/hooks/web/usePermission';
|
||
import { useMessage } from '@/hooks/web/useMessage';
|
||
import { CaretRightOutlined } from '@ant-design/icons-vue';
|
||
import { buildUUID } from '@/utils/uuid';
|
||
import { useI18n } from '@/hooks/web/useI18n';
|
||
import { getDataChange } from '@/api/onlineDev/visualDev';
|
||
import { getDataInterfaceDataInfoByIds } from '@/api/systemData/dataInterface';
|
||
import ExtraRelationInfo from '@/components/yunzhupaas/RelationForm/src/ExtraRelationInfo.vue';
|
||
|
||
interface State {
|
||
dataForm: any;
|
||
title: string;
|
||
maskConfig: any;
|
||
interfaceRes: any;
|
||
locationScope: any;
|
||
extraOptions: any;
|
||
extraData: any;
|
||
}
|
||
|
||
defineOptions({ name: 'Detail' });
|
||
const { createMessage, createConfirm } = useMessage();
|
||
const [registerDrawer, { openDrawer, setDrawerProps, closeDrawer }] = useDrawer();
|
||
|
||
const { t } = useI18n();
|
||
const relationDetailRef = ref<any>(null);
|
||
const state = reactive<State>({
|
||
dataForm: {},
|
||
title: t('common.detailText', '详情'),
|
||
maskConfig: {
|
||
project_code: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
project_name: {
|
||
prefixType: 1,
|
||
useUnrealMask: false,
|
||
maskType: 1,
|
||
unrealMaskLength: 1,
|
||
prefixLimit: 0,
|
||
suffixLimit: 0,
|
||
filler: '*',
|
||
prefixSpecifyChar: '',
|
||
suffixType: 1,
|
||
ignoreChar: '',
|
||
suffixSpecifyChar: '',
|
||
},
|
||
},
|
||
interfaceRes: {
|
||
project_type: [],
|
||
org_id: [],
|
||
project_state_id: [],
|
||
project_code: [],
|
||
remark: [],
|
||
project_name: [],
|
||
parent_project_id: [],
|
||
seq_num: [],
|
||
project_start_date: [],
|
||
},
|
||
locationScope: {},
|
||
extraOptions: {},
|
||
extraData: {},
|
||
});
|
||
const { title, dataForm, maskConfig } = toRefs(state);
|
||
// 表单权限
|
||
const { hasFormP } = usePermission();
|
||
|
||
defineExpose({ init });
|
||
|
||
function init(data) {
|
||
state.dataForm.id = data.id;
|
||
openDrawer();
|
||
nextTick(() => {
|
||
setTimeout(initData, 0);
|
||
});
|
||
}
|
||
function initData() {
|
||
changeLoading(true);
|
||
if (state.dataForm.id) {
|
||
getData(state.dataForm.id);
|
||
} else {
|
||
closeDrawer();
|
||
}
|
||
}
|
||
function getData(id) {
|
||
getDetailInfo(id).then(res => {
|
||
state.dataForm = res.data || {};
|
||
nextTick(() => {
|
||
changeLoading(false);
|
||
});
|
||
});
|
||
}
|
||
|
||
function toDetail(modelId, id, propsValue) {
|
||
if (!id) return;
|
||
getConfigData(modelId).then(res => {
|
||
if (!res.data || !res.data.formData) return;
|
||
const formConf = JSON.parse(res.data.formData);
|
||
formConf.popupType = 'general';
|
||
formConf.hasPrintBtn = false;
|
||
formConf.customBtns = [];
|
||
const data = { id, formConf, modelId, propsValue };
|
||
relationDetailRef.value?.init(data);
|
||
});
|
||
}
|
||
function setFormProps(data) {
|
||
setDrawerProps(data);
|
||
}
|
||
function changeLoading(loading) {
|
||
setFormProps({ loading });
|
||
}
|
||
|
||
function getParamList(key) {
|
||
let templateJson: any[] = state.interfaceRes[key];
|
||
if (!templateJson || !templateJson.length || !state.dataForm) return templateJson;
|
||
for (let i = 0; i < templateJson.length; i++) {
|
||
if (templateJson[i].relationField && templateJson[i].sourceType == 1) {
|
||
templateJson[i].defaultValue = state.dataForm[templateJson[i].relationField + '_id'] || '';
|
||
}
|
||
}
|
||
return templateJson;
|
||
}
|
||
</script>
|