225 lines
11 KiB
Vue
225 lines
11 KiB
Vue
<template>
|
||
<div ref="formWrap">
|
||
<Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
|
||
<!-- 主表id -->
|
||
|
||
<Col v-if="getIfShow2('1f7a5fa213f549748f3d00e177d86b1b')" v-show="getIsShow2('1f7a5fa213f549748f3d00e177d86b1b')" :span="getColWidth(schemaMap['1f7a5fa213f549748f3d00e177d86b1b'])">
|
||
<template v-if="showComponent(schemaMap['1f7a5fa213f549748f3d00e177d86b1b'])">
|
||
<SimpleFormItem
|
||
v-model:value="formModel[schemaMap['1f7a5fa213f549748f3d00e177d86b1b'].field]"
|
||
:form-api="formApi"
|
||
:isWorkFlow="isWorkFlow"
|
||
:refreshFieldObj="refreshFieldObj"
|
||
:schema="schemaMap['1f7a5fa213f549748f3d00e177d86b1b']"
|
||
/>
|
||
</template>
|
||
</Col>
|
||
<!-- 表单类型 -->
|
||
|
||
<Col v-if="getIfShow2('524a5c581073419d8e8daff9e461695a')" v-show="getIsShow2('524a5c581073419d8e8daff9e461695a')" :span="getColWidth(schemaMap['524a5c581073419d8e8daff9e461695a'])">
|
||
<template v-if="showComponent(schemaMap['524a5c581073419d8e8daff9e461695a'])">
|
||
<SimpleFormItem
|
||
v-model:value="formModel[schemaMap['524a5c581073419d8e8daff9e461695a'].field]"
|
||
:form-api="formApi"
|
||
:isWorkFlow="isWorkFlow"
|
||
:refreshFieldObj="refreshFieldObj"
|
||
:schema="schemaMap['524a5c581073419d8e8daff9e461695a']"
|
||
/>
|
||
</template>
|
||
</Col>
|
||
<!-- 表单编码 -->
|
||
|
||
<Col v-if="getIfShow2('d74b7a7bede24820a6c85677a6cdb5fe')" v-show="getIsShow2('d74b7a7bede24820a6c85677a6cdb5fe')" :span="getColWidth(schemaMap['d74b7a7bede24820a6c85677a6cdb5fe'])">
|
||
<template v-if="showComponent(schemaMap['d74b7a7bede24820a6c85677a6cdb5fe'])">
|
||
<SimpleFormItem
|
||
v-model:value="formModel[schemaMap['d74b7a7bede24820a6c85677a6cdb5fe'].field]"
|
||
:form-api="formApi"
|
||
:isWorkFlow="isWorkFlow"
|
||
:refreshFieldObj="refreshFieldObj"
|
||
:schema="schemaMap['d74b7a7bede24820a6c85677a6cdb5fe']"
|
||
/>
|
||
</template>
|
||
</Col>
|
||
<!-- 主表或子表的id -->
|
||
|
||
<Col v-if="getIfShow2('3d499852001044c0a6230e5ce18532d2')" v-show="getIsShow2('3d499852001044c0a6230e5ce18532d2')" :span="getColWidth(schemaMap['3d499852001044c0a6230e5ce18532d2'])">
|
||
<template v-if="showComponent(schemaMap['3d499852001044c0a6230e5ce18532d2'])">
|
||
<SimpleFormItem
|
||
v-model:value="formModel[schemaMap['3d499852001044c0a6230e5ce18532d2'].field]"
|
||
:form-api="formApi"
|
||
:isWorkFlow="isWorkFlow"
|
||
:refreshFieldObj="refreshFieldObj"
|
||
:schema="schemaMap['3d499852001044c0a6230e5ce18532d2']"
|
||
/>
|
||
</template>
|
||
</Col>
|
||
<!-- 变更字段编码 -->
|
||
|
||
<Col v-if="getIfShow2('32b4ed61b5504f74943ead2cdc770baf')" v-show="getIsShow2('32b4ed61b5504f74943ead2cdc770baf')" :span="getColWidth(schemaMap['32b4ed61b5504f74943ead2cdc770baf'])">
|
||
<template v-if="showComponent(schemaMap['32b4ed61b5504f74943ead2cdc770baf'])">
|
||
<SimpleFormItem
|
||
v-model:value="formModel[schemaMap['32b4ed61b5504f74943ead2cdc770baf'].field]"
|
||
:form-api="formApi"
|
||
:isWorkFlow="isWorkFlow"
|
||
:refreshFieldObj="refreshFieldObj"
|
||
:schema="schemaMap['32b4ed61b5504f74943ead2cdc770baf']"
|
||
/>
|
||
</template>
|
||
</Col>
|
||
<!-- 变更字段名 -->
|
||
|
||
<Col v-if="getIfShow2('f08ff059b6db43608e6ecf5f195f92bb')" v-show="getIsShow2('f08ff059b6db43608e6ecf5f195f92bb')" :span="getColWidth(schemaMap['f08ff059b6db43608e6ecf5f195f92bb'])">
|
||
<template v-if="showComponent(schemaMap['f08ff059b6db43608e6ecf5f195f92bb'])">
|
||
<SimpleFormItem
|
||
v-model:value="formModel[schemaMap['f08ff059b6db43608e6ecf5f195f92bb'].field]"
|
||
:form-api="formApi"
|
||
:isWorkFlow="isWorkFlow"
|
||
:refreshFieldObj="refreshFieldObj"
|
||
:schema="schemaMap['f08ff059b6db43608e6ecf5f195f92bb']"
|
||
/>
|
||
</template>
|
||
</Col>
|
||
<!-- 变更字段类型 -->
|
||
|
||
<Col v-if="getIfShow2('4f11bf8e79484cc7a694b52c9524c371')" v-show="getIsShow2('4f11bf8e79484cc7a694b52c9524c371')" :span="getColWidth(schemaMap['4f11bf8e79484cc7a694b52c9524c371'])">
|
||
<template v-if="showComponent(schemaMap['4f11bf8e79484cc7a694b52c9524c371'])">
|
||
<SimpleFormItem
|
||
v-model:value="formModel[schemaMap['4f11bf8e79484cc7a694b52c9524c371'].field]"
|
||
:form-api="formApi"
|
||
:isWorkFlow="isWorkFlow"
|
||
:refreshFieldObj="refreshFieldObj"
|
||
:schema="schemaMap['4f11bf8e79484cc7a694b52c9524c371']"
|
||
/>
|
||
</template>
|
||
</Col>
|
||
<!-- 变更前的值 -->
|
||
|
||
<Col v-if="getIfShow2('5aa4b801a16d41e88b8ef61a0a93f2f7')" v-show="getIsShow2('5aa4b801a16d41e88b8ef61a0a93f2f7')" :span="getColWidth(schemaMap['5aa4b801a16d41e88b8ef61a0a93f2f7'])">
|
||
<template v-if="showComponent(schemaMap['5aa4b801a16d41e88b8ef61a0a93f2f7'])">
|
||
<SimpleFormItem
|
||
v-model:value="formModel[schemaMap['5aa4b801a16d41e88b8ef61a0a93f2f7'].field]"
|
||
:form-api="formApi"
|
||
:isWorkFlow="isWorkFlow"
|
||
:refreshFieldObj="refreshFieldObj"
|
||
:schema="schemaMap['5aa4b801a16d41e88b8ef61a0a93f2f7']"
|
||
/>
|
||
</template>
|
||
</Col>
|
||
<!-- 变更后的值 -->
|
||
|
||
<Col v-if="getIfShow2('870896f3810543bc83a1510ff141bfb8')" v-show="getIsShow2('870896f3810543bc83a1510ff141bfb8')" :span="getColWidth(schemaMap['870896f3810543bc83a1510ff141bfb8'])">
|
||
<template v-if="showComponent(schemaMap['870896f3810543bc83a1510ff141bfb8'])">
|
||
<SimpleFormItem
|
||
v-model:value="formModel[schemaMap['870896f3810543bc83a1510ff141bfb8'].field]"
|
||
:form-api="formApi"
|
||
:isWorkFlow="isWorkFlow"
|
||
:refreshFieldObj="refreshFieldObj"
|
||
:schema="schemaMap['870896f3810543bc83a1510ff141bfb8']"
|
||
/>
|
||
</template>
|
||
</Col>
|
||
<!-- 变更类型 -->
|
||
|
||
<Col v-if="getIfShow2('52ef4d91155f4666b697b5aab1adb2c7')" v-show="getIsShow2('52ef4d91155f4666b697b5aab1adb2c7')" :span="getColWidth(schemaMap['52ef4d91155f4666b697b5aab1adb2c7'])">
|
||
<template v-if="showComponent(schemaMap['52ef4d91155f4666b697b5aab1adb2c7'])">
|
||
<SimpleFormItem
|
||
v-model:value="formModel[schemaMap['52ef4d91155f4666b697b5aab1adb2c7'].field]"
|
||
:form-api="formApi"
|
||
:isWorkFlow="isWorkFlow"
|
||
:refreshFieldObj="refreshFieldObj"
|
||
:schema="schemaMap['52ef4d91155f4666b697b5aab1adb2c7']"
|
||
/>
|
||
</template>
|
||
</Col>
|
||
|
||
<div :style="{ textAlign: getProps.buttonLocation }">
|
||
<slot name="buttonBefore"></slot>
|
||
<a-button v-if="getProps.showSubmitButton" type="primary" @click="handleSubmit">
|
||
{{ t('提交') }}
|
||
</a-button>
|
||
<a-button v-if="getProps.showResetButton" style="margin-left: 10px" @click="handleReset">
|
||
{{ t('重置') }}
|
||
</a-button>
|
||
<slot name="buttonAfter"></slot>
|
||
</div>
|
||
</Form>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本
|
||
import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.vue';
|
||
import { Col, Form, Row } from 'ant-design-vue';
|
||
import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
|
||
import { ref } from 'vue';
|
||
import { CheckCircleOutlined } from '@ant-design/icons-vue';
|
||
|
||
const FormItem = Form.Item;
|
||
|
||
export default {
|
||
components: {
|
||
CheckCircleOutlined,
|
||
Form,
|
||
Col,
|
||
SimpleFormItem,
|
||
Row,
|
||
FormItem
|
||
},
|
||
mixins: [SimpleFormSetup],
|
||
setup(props, ctx) {
|
||
const ret = SimpleFormSetup.setup(props, ctx);
|
||
const expose = ctx.expose;
|
||
|
||
return {
|
||
...ret
|
||
};
|
||
},
|
||
computed: {
|
||
// 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
|
||
schemaMap() {
|
||
const schemaMap = {};
|
||
this.getSchemas.forEach((schema) => {
|
||
schemaMap[schema.key] = schema;
|
||
if (schema.children) {
|
||
schema.children.forEach((sChild) => {
|
||
if (sChild.list) {
|
||
sChild.list.forEach((lChild) => {
|
||
schemaMap[lChild.key] = lChild;
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
return schemaMap;
|
||
}
|
||
},
|
||
methods: {
|
||
getIfShow2: function (key) {
|
||
return this.getIfShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
|
||
},
|
||
|
||
getIsShow2: function (key) {
|
||
return this.getIsShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
|
||
},
|
||
|
||
getTabProps(key) {
|
||
const schema = this.schemaMap[key];
|
||
return {
|
||
size: schema.componentProps.tabSize,
|
||
tabPosition: schema.componentProps.tabPosition,
|
||
type: schema.componentProps.type
|
||
};
|
||
},
|
||
|
||
getTdStyle(tdElement) {
|
||
return {
|
||
height: tdElement.height ? tdElement.height + 'px' : '',
|
||
minHeight: (tdElement.height || '42') + 'px',
|
||
overflow: 'hidden',
|
||
padding: '10px'
|
||
};
|
||
}
|
||
}
|
||
};
|
||
</script>
|