初始代码
This commit is contained in:
wangmingwei
231
src/views/mdm/mdmproject/Detail.vue
Normal file
231
src/views/mdm/mdmproject/Detail.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user