app-form-view 0.0.1 → 0.0.2

package/src/views/build/viewAppForm.vue

@@ -22,7 +22,7 @@
 <script>
 import { baseComponents } from '@/utils/generator/config'
 import { mapActions, mapState } from 'vuex'
-import AppFormItem from './AppFormItem'
+import AppFormItem from './AppFormItem.vue'
 import { getFormData, getFormInitData, getViewData } from '@/api/form'
 import { findFirstNodeByNameAndSjbName } from '@/utils/index'
 export default {
@@ -30,6 +30,15 @@ export default {
         AppFormItem
     },
     props: {
+        formId: {
+            type: String,
+        },
+        buttonCode: {
+            type: String,
+        },
+        ywid: {
+            type: String,
+        },
         formData: {
             type: Object,
             default: () => { }
@@ -101,6 +110,15 @@ export default {
                 }
             },
             deep: true
+        },
+        formId() {
+            this.initData(this.formId, this.buttonCode, this.ywid)
+        },
+        buttonCode() {
+            this.initData(this.formId, this.buttonCode, this.ywid)
+        },
+        ywid() {
+            this.initData(this.formId, this.buttonCode, this.ywid)
         }
     },
     created() {
@@ -114,132 +132,153 @@ export default {
 
         // 调用修改后的方法，获取formId
         const { formId, buttonCode, ywid } = this.getFormParamsFromUrl();
-        if (!formId) {
+        if (formId) this.initData(formId, buttonCode, ywid)
+        if (this.formId) this.initData(this.formId, this.buttonCode, this.ywid)
+        if (!formId || !this.formId) {
             console.warn('未从URL中获取到表单ID');
             return; // 无ID时终止请求，避免接口报错
         }
-        // 原有接口请求逻辑不变
-        getFormData({ id: formId }).then(res => {
-            if (res.code == 0) {
-                const data = res.data;
-                const formCode = data.formCode
-                this.openType = data.openType
-                let formJson = JSON.parse(data.formJson);
 
-                let currentType = 'add'
-                if (formJson.sceneList && formJson.sceneList.length > 0 && buttonCode && formJson.sceneList.filter(item => item.sceneCode == buttonCode).length > 0) {
-                    currentType = formJson.sceneList.filter(item => item.sceneCode == buttonCode)[0].operationType
-                }
-                this.drawingList = JSON.parse(JSON.stringify(formJson.fields))
-                delete formJson.fields
-                this.formConf = formJson
-                this.formConf.mode = currentType == 'detail' ? 'view' : currentType
-                this.formConf.model = {}
-                if (this.formConf && this.formConf.buttons && this.formConf.buttons.length > 0) {
-                    if (this.$refs.detailBtns) {
-                        this.paddingBottom = this.$refs.detailBtns.offsetHeight + 'px';
-                    } else {
-                        this.paddingBottom = '60px'
-                        this.$nextTick(() => {
-                            if (this.$refs.detailBtns) this.paddingBottom = this.$refs.detailBtns.offsetHeight + 'px';
-                        })
-                    }
+    },
+    mounted() {
 
-                } else {
-                    this.paddingBottom = '0px';
-                }
-                if (this.formConf.mode == 'add') {
-                    if (formCode) getFormInitData({ formCode }).then(res => {
-                        if (res.code == 0) {
-                            this.formConf.model = res.data
+    },
+    methods: {
+        ...mapActions('user', ['fetchUserInfo']),
+        initData(formId, buttonCode, ywid) {
+            // 原有接口请求逻辑不变
+            getFormData({ id: formId }).then(res => {
+                if (res.code == 0) {
+                    const data = res.data;
+                    const formCode = data.formCode
+                    this.openType = data.openType
+                    let formJson = JSON.parse(data.formJson);
+
+                    let currentType = 'add'
+                    if (formJson.sceneList && formJson.sceneList.length > 0 && buttonCode && formJson.sceneList.filter(item => item.sceneCode == buttonCode).length > 0) {
+                        currentType = formJson.sceneList.filter(item => item.sceneCode == buttonCode)[0].operationType
+                    }
+                    this.drawingList = JSON.parse(JSON.stringify(formJson.fields))
+                    delete formJson.fields
+                    this.formConf = formJson
+                    this.formConf.mode = currentType == 'detail' ? 'view' : currentType
+                    this.formConf.model = {}
+                    if (this.formConf && this.formConf.buttons && this.formConf.buttons.length > 0) {
+                        if (this.$refs.detailBtns) {
+                            this.paddingBottom = this.$refs.detailBtns.offsetHeight + 'px';
+                        } else {
+                            this.paddingBottom = '60px'
+                            this.$nextTick(() => {
+                                if (this.$refs.detailBtns) this.paddingBottom = this.$refs.detailBtns.offsetHeight + 'px';
+                            })
                         }
-                    })
-                }
-                else if (this.formConf.mode == 'edit' || this.formConf.mode == 'view') {
-                    //编辑
-                    if (!ywid) {
-                        $.modal.confirm('编辑状态下未从URL中获取到表单ywid,是否返回?', () => {
-                            //关闭当前页面
-                            //根据页面打开方式
-                            if (this.openType == 'dialog') {
-                                var index = parent.layer.getFrameIndex(window.name); // 获取当前层的索引
-                                parent.layer.close(index);
-                            } else if (this.openType == 'blank') {
-                                window.close();
-                            } else {
-                                $.modal.closeTab();
-                            }
-                        })
-                    } else if (formCode && ywid) {
-                        //获取表单数据
-                        getViewData({ formCode, id: ywid }).then(res => {
+
+                    } else {
+                        this.paddingBottom = '0px';
+                    }
+                    if (this.formConf.mode == 'add') {
+                        if (formCode) getFormInitData({ formCode }).then(res => {
                             if (res.code == 0) {
                                 this.formConf.model = res.data
-                                let uploadData = {}
-                                for (let key in this.formConf.model) {
-                                    const keyMap = this.multiplyUploadList[key]
-                                    if (keyMap) {
-                                        const bizType = keyMap.bizType
-                                        this.formConf.model[key].forEach(item => {
-                                            if (!uploadData[key + '@' + item[bizType]]) {
-                                                uploadData[key + '@' + item[bizType]] = []
-                                            }
-                                            uploadData[key + '@' + item[bizType]].push({
-                                                [keyMap.path]: item.path.fileBase64,
-                                                [keyMap.name]: item.path.fileName,
-                                                [keyMap.type]: item.path.fileType,
-                                                [keyMap.size]: item.size,
-                                                [bizType]: item[bizType]
+                            }
+                        })
+                    }
+                    else if (this.formConf.mode == 'edit' || this.formConf.mode == 'view') {
+                        //编辑
+                        if (!ywid) {
+                            $.modal.confirm('编辑状态下未从URL中获取到表单ywid,是否返回?', () => {
+                                //关闭当前页面
+                                //根据页面打开方式
+                                if (this.openType == 'dialog') {
+                                    var index = parent.layer.getFrameIndex(window.name); // 获取当前层的索引
+                                    parent.layer.close(index);
+                                } else if (this.openType == 'blank') {
+                                    window.close();
+                                } else {
+                                    $.modal.closeTab();
+                                }
+                            })
+                        } else if (formCode && ywid) {
+                            //获取表单数据
+                            getViewData({ formCode, id: ywid }).then(res => {
+                                if (res.code == 0) {
+                                    this.formConf.model = res.data
+                                    let uploadData = {}
+                                    for (let key in this.formConf.model) {
+                                        const keyMap = this.multiplyUploadList[key]
+                                        if (keyMap) {
+                                            const bizType = keyMap.bizType
+                                            this.formConf.model[key].forEach(item => {
+                                                if (!uploadData[key + '@' + item[bizType]]) {
+                                                    uploadData[key + '@' + item[bizType]] = []
+                                                }
+                                                uploadData[key + '@' + item[bizType]].push({
+                                                    [keyMap.path]: item.path.fileBase64,
+                                                    [keyMap.name]: item.path.fileName,
+                                                    [keyMap.type]: item.path.fileType,
+                                                    [keyMap.size]: item.size,
+                                                    [bizType]: item[bizType]
+                                                })
                                             })
-                                        })
-                                        delete this.multiplyUploadList[key]
-                                        delete this.formConf.model[key]
-                                    }
-                                    const keyMap2 = this.multiplySingleUploadList[key]
-                                    if (keyMap2 && this.formConf.model[key]) {
-                                        this.formConf.model[key] = this.formConf.model[key].map(item => {
-                                            return {
-                                                [keyMap2.path]: item.path.fileBase64,
-                                                [keyMap2.name]: item.path.fileName,
-                                                [keyMap2.type]: item.path.fileType,
-                                                [keyMap2.size]: item.size,
-                                                [keyMap2.bizType]: item[keyMap2.bizType]
+                                            delete this.multiplyUploadList[key]
+                                            delete this.formConf.model[key]
+                                        }
+                                        const keyMap2 = this.multiplySingleUploadList[key]
+                                        if (keyMap2 && this.formConf.model[key]) {
+                                            this.formConf.model[key] = this.formConf.model[key].map(item => {
+                                                return {
+                                                    [keyMap2.path]: item.path.fileBase64,
+                                                    [keyMap2.name]: item.path.fileName,
+                                                    [keyMap2.type]: item.path.fileType,
+                                                    [keyMap2.size]: item.size,
+                                                    [keyMap2.bizType]: item[keyMap2.bizType]
+                                                }
                                             }
+                                            )
                                         }
-                                        )
-                                    }
-                                    const tableMap = this.tableList.filter(item => item.name == key)
+                                        const tableMap = this.tableList.filter(item => item.name == key)
 
-                                    if (tableMap && tableMap.length > 0) {
-                                        this.formConf.model[key] = JSON.stringify(this.formConf.model[key])
+                                        if (tableMap && tableMap.length > 0) {
+                                            this.formConf.model[key] = JSON.stringify(this.formConf.model[key])
+                                        }
                                     }
+                                    for (let key in uploadData) {
+                                        this.formConf.model[key] = uploadData[key]
+                                    }
+                                    console.log(this.formConf.model, '回显数据')
                                 }
-                                for (let key in uploadData) {
-                                    this.formConf.model[key] = uploadData[key]
-                                }
-                                console.log(this.formConf.model, '回显数据')
-                            }
-                        })
-                    }
-                } else {
+                            })
+                        }
+                    } else {
 
+                    }
                 }
-            }
-        }).catch(err => {
-            console.error('获取表单数据失败：', err);
-        })
-    },
-    mounted() {
-
-    },
-    methods: {
-        ...mapActions('user', ['fetchUserInfo']),
+            }).catch(err => {
+                console.error('获取表单数据失败：', err);
+            })
+        },
         onClickLeft() { },
         // 抽取方法：返回处理后的 fields 数组
         getDrawingList(fields) {
             const len = fields.length;
+
+            // 先深拷贝一份，避免修改原数组
+            const fieldList = [...fields];
+
+            // 第一步：遍历处理 subTitle 与 table 联动
+            for (let i = 0; i < len; i++) {
+                const current = fieldList[i];
+                const next = fieldList[i + 1];
+                // 当前是 subTitle 且下一个存在、并且是 table
+                if (current.widget === 'subTitle' && next && next.widget === 'table') {
+                    // subTitle 设为显示
+                    current.appVisible = false;
+                    // table 的 label 赋值为 subTitle 的 label
+                    next.label = current.label;
+                }
+            }
             // 直接 return map 结果
-            return fields.map((item, index) => {
+            return fieldList.map((item, index) => {
                 const { class: cls, ...rest } = item;
                 const isFirst = index === 0;
                 const isLast = index === len - 1;
@@ -247,8 +286,9 @@ export default {
 
                 let KClass = '';
                 // 最后一个
-                if (isLast && isInBase) {
-                    KClass = 'last-cell-child';
+                if (isLast) {
+                    if (isInBase)
+                        KClass = 'last-cell-child';
                 }
                 // 第一个
                 else if (isFirst) {
@@ -256,11 +296,10 @@ export default {
                         KClass = 'first-cell-child';
                     }
                 }
-
                 // 中间元素
                 else {
-                    const prev = fields[index - 1];
-                    const next = fields[index + 1];
+                    const prev = fieldList[index - 1];
+                    const next = fieldList[index + 1];
                     const prevIn = this.baseWidget.indexOf(prev.widget) > -1;
                     const nextIn = this.baseWidget.indexOf(next.widget) > -1;
                     const isPrevSubTitle = prev.widget === 'subTitle';

package/src/views/build/viewForm.vue

@@ -3,9 +3,9 @@
     <div class="gray-bg dialog-content" :style="{ 'padding-bottom': paddingBottom }">
         <c-form :conf="formConf" ref="cform" :model="formConf.model || {}" :openType="openType"
             :singleUploadList="singleUploadList" :multiplySingleUploadList="multiplySingleUploadList"
-            @updateItem="updateItem">
+            @updateItem="updateItem" class="h100">
             <div class="container-div animated fadeInRight">
-                <div class="row">
+                <div class="row" style="overflow:auto">
                     <div class="col-xs-12 col-lg-12 col-md-12 search-collapse">
                         <div class="detail-title" v-if="formConf.showName && formConf.name">{{ sceneName }}{{
                             formConf.name }}</div>

package/static/plugins/css/app-form.css

@@ -90,13 +90,15 @@ button[disabled] { opacity: 0.6; }
 
 .app-page { height: 100%; overflow: hidden; }
 
+.app-page .bottom-btns { gap: 15px; padding-left: 10px; padding-right: 10px; }
+
 .app-page .bottom-btns .widget-button { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #646566; }
 
 .app-page .bottom-btns .widget-button .van-icon { display: none; }
 
 .app-page .bottom-btns .widget-button .icon { margin: 0 auto 2px; font-size: 18px; }
 
-.app-page .bottom-btns .widget-button:last-child { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: white; border-radius: 15px; height: 40px; font-size: 14px; margin-right: 5px; background: -webkit-gradient(linear, left top, right top, from(var(--primary-color-60)), to(var(--primary-color))); background: -o-linear-gradient(left, var(--primary-color-60), var(--primary-color)); background: linear-gradient(to right, var(--primary-color-60), var(--primary-color)); }
+.app-page .bottom-btns .widget-button:last-child { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: white; border-radius: 15px; height: 40px; font-size: 14px; margin-right: 5px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: -webkit-gradient(linear, left top, right top, from(var(--primary-color-60)), to(var(--primary-color))); background: -o-linear-gradient(left, var(--primary-color-60), var(--primary-color)); background: linear-gradient(to right, var(--primary-color-60), var(--primary-color)); }
 
 .app-page .bottom-btns .widget-button:last-child .icon { color: #fff; margin: 0 5px 0 0; }
 

package/static/plugins/scss/app-form.scss

@@ -81,9 +81,13 @@ button[disabled]{
     height:100%;
     overflow:hidden;
     .bottom-btns{
+        gap:15px;
+        padding-left: 10px;
+        padding-right: 10px;
         .widget-button{
             display:flex;
             margin:0;
+           
             flex-direction: column;
             align-items: center;
             color: #646566;
@@ -101,6 +105,7 @@ button[disabled]{
                 height: 40px;
                 font-size: 14px;
                 margin-right: 5px;
+                flex:1;
   background: linear-gradient(to right, var(--primary-color-60), var(--primary-color));
                 .icon{color:#fff;margin:0 5px 0 0;}
             }