app-form-view 0.0.1 → 0.0.3

package/src/components/appForm/SearchApi.vue

@@ -31,7 +31,7 @@ export default {
             const { ...rest } = this.attrs;
             const { widget } = this.conf;
             rest.type = widget == 'password' ? 'password' : widget == 'inputNumber' ? 'number' : widget == 'textarea' ? 'textarea' : 'text'
-            if (this.mode == 'view') { rest.readonly = true; rest.disabled = true; rest.clearable = false }
+            if (this.mode == 'view') { rest.readonly = true; rest.clearable = false }
             if (rest.class == 'form-control') rest.class = ''
             return rest;
         }

package/src/components/appForm/Table.vue

@@ -139,14 +139,32 @@ export default {
         },
         onConfirm(rows) {
             this.showRPicker = false
-            this.tableData = [...rows.map(item => {
+            let rowArray = Array.isArray(rows) ? rows : [rows],
+                data = []
+            rowArray.forEach((row) => {
+                const emptyRow = {}
+                this.conf.columnsData.forEach((col) => {
+                    if (
+                        this.conf.referenceAddApi &&
+                        this.conf.referenceAddApi.mappings &&
+                        this.conf.referenceAddApi.mappings.filter((item) => item.name == col.name).length > 0
+                    ) {
+                        emptyRow[col.name] =
+                            row[this.conf.referenceAddApi.mappings.filter((item) => item.name == col.name)[0].field]
+                    } else {
+                        emptyRow[col.name] = col.defaultValue || ''
+                    }
+                })
+                JSON.stringify(emptyRow) !== '{}' && data.push(emptyRow)
+            })
+            this.innerValue = JSON.stringify(data)
+            this.tableData = [...data.map(item => {
                 return {
                     ...item,
                     checked: false
                 }
             })]
-            console.log(rows)
-            this.innerValue = JSON.stringify(this.tableData)
+            console.log(rows, 'onConfirm', this.tableData, this.tableColumns)
             this.$emit('input', this.innerValue)
             //this.updateCallback(rows)
             //this.$emit('input', this.innerValue);

package/src/components/appForm/select.vue

@@ -6,10 +6,10 @@
         <van-field v-model="innerValueLabel" :label="conf.hideLabel ? '' : conf.label" v-bind="filterAttrs"
             :rules="rules" @click-right-icon="showPicker = true" right-icon="arrow"></van-field>
         <van-popup v-model="showPicker" position="bottom" get-container="#myForm" class="select-popup" closeable
-            :style="{ height: '40%' }">
-            <div class="custom-picker-container">
-                <van-sticky>
-                    <van-nav-bar title="选择" :border="false" />
+            :style="{ height: attrs.multiple ? '40%' : 'auto' }">
+            <div class="custom-picker-container flex flex-column h100">
+                <van-sticky class="w100">
+                    <van-nav-bar :title="'选择' + conf.label" :border="false" />
                 </van-sticky>
 
                 <div class="popup-body scroll-wrap" v-if="attrs.multiple">
@@ -23,7 +23,7 @@
                     </div>
                 </div>
 
-                <van-picker :columns="selectOptions" value-key="label" class="flex-item" ref="myPicker" v-else>
+                <van-picker :columns="selectOptions" value-key="label" ref="myPicker" v-else>
                 </van-picker>
                 <div class="bottom-btn">
                     <van-button type="primary" round block @click="onConfirm" icon="checked">确认</van-button>

package/src/components/form/SearchSelect.vue

@@ -145,16 +145,16 @@ export default {
 </script>
 
 <style scoped>
-/deep/ .bs-suggest-ul {
+.bs-suggest-ul {
     max-height: 300px;
     overflow-y: auto;
 }
 
-/deep/ .bs-suggest-ul li {
+.bs-suggest-ul li {
     padding: 6px 12px;
 }
 
-/deep/ .bs-suggest-ul li.active {
+.bs-suggest-ul li.active {
     background-color: #337ab7;
     color: #fff;
 }

package/src/components/form/Table.vue

@@ -260,7 +260,7 @@ export default {
             if (data && data.length > 0 && this.uploadColumns.length > 0) {
                 data = this.convertFiles(data)
             }
-
+            console.log(columns, 'columns')
             this.tableOptions = {
                 id: this.tableId,
                 sidePagination: 'client',

package/src/index.js

@@ -16,7 +16,7 @@ import createStore from './store/index'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import Build from './views/build/index.vue'
-//import Build from './views/build/viewAppForm.vue'
+//import Build from './views/build/viewForm.vue'
 import FormItem from '@/components/form/FormItem.vue'
 import Form from '@/components/form/Form.vue'
 import SubRow from '@/components/form/SubRow.vue'

package/src/views/build/FieldMappingDialog.vue

@@ -178,8 +178,6 @@ export default {
 </script>
 
 <style scoped>
-.dialog-footer {}
-
 .el-select {
     margin: 0 auto;
 }
@@ -197,11 +195,6 @@ export default {
     color: #409eff;
 }
 
-.flex {
-    display: flex;
-    align-items: center;
-}
-
 .align-center {
     align-items: center;
 }

package/src/views/build/RightPanel.vue

@@ -1076,7 +1076,6 @@ export default {
       this.changeActiveData('allowedFileType')
     },
     changeActiveData(key) {
-      console.log(this.activeDataOptions[key])
       if (this.activeDataOptions[key] !== undefined && this.currentData[key] !== this.activeData[key]) {
         this.$emit('update', key, this.activeData[key])
       }

package/src/views/build/index.vue

@@ -1797,19 +1797,4 @@ $lighterBlue: #1e88e5;
   }
 
 }
-
-/* 全局美化滚动条（窄滚动条） */
-/deep/ ::-webkit-scrollbar {
-  width: 3px !important;
-  height: 3px !important;
-}
-
-/deep/ ::-webkit-scrollbar-thumb {
-  background: #ccc !important;
-  border-radius: 3px !important;
-}
-
-/deep/ ::-webkit-scrollbar-track {
-  background: transparent !important;
-}
 </style>

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;}
             }