---初始化后台管理web页面项目
This commit is contained in:
@ -0,0 +1,169 @@
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user