app-form-view 0.0.1 → 0.0.2

package/src/assets/scss/_flex.scss

@@ -12,14 +12,14 @@
 }
 
 .flex-row {
-    -webkit-box-orient: vertical;
+    -webkit-box-orient: horizontal;
     -ms-flex-direction: row;
     -webkit-flex-direction: row;
     flex-direction: row;
 }
 
 .flex-row-reverse {
-    -webkit-box-orient: vertical;
+    -webkit-box-orient: horizontal;
     -ms-flex-direction: row-reverse;
     -webkit-flex-direction: row-reverse;
     flex-direction: row-reverse;
@@ -61,8 +61,8 @@
 }
 
 .justify-content-space-around {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
+    -webkit-box-pack: space-around;
+    -ms-flex-pack: space-around;
     -webkit-justify-content: space-around;
     justify-content: space-around;
 }
@@ -96,66 +96,63 @@
 }
 
 .flex-wrap-nowrap {
-    -webkit-box-wrap: nowrap;
     -ms-flex-wrap: nowrap;
     -webkit-flex-wrap: nowrap;
     flex-wrap: nowrap;
 }
 
 .flex-wrap-wrap {
-    -webkit-box-wrap: wrap;
     -ms-flex-wrap: wrap;
     -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
 }
 
 .flex-wrap-reverse {
-    -webkit-box-wrap: reverse;
-    -ms-flex-wrap: reverse;
-    -webkit-flex-wrap: reverse;
-    flex-wrap: reverse;
+    -ms-flex-wrap: wrap-reverse;
+    -webkit-flex-wrap: wrap-reverse;
+    flex-wrap: wrap-reverse;
 }
 
 .align-content-start {
-    -webkit-box-align: flex-start;
-    -ms-flex-align: flex-start;
-    -webkit-align-conten: flex-start;
-    justify-content: flex-start;
+    -webkit-box-lines: start;
+    -ms-flex-line-pack: start;
+    -webkit-align-content: flex-start;
+    align-content: flex-start;
 }
 
 .align-content-end {
-    -webkit-box-align: flex-end;
-    -ms-flex-align: flex-end;
-    -webkit-align-conten: flex-end;
-    justify-content: flex-end;
+    -webkit-box-lines: end;
+    -ms-flex-line-pack: end;
+    -webkit-align-content: flex-end;
+    align-content: flex-end;
 }
 
 .align-content-center {
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -webkit-align-conten: center;
-    justify-content: center;
+    -webkit-box-lines: center;
+    -ms-flex-line-pack: center;
+    -webkit-align-content: center;
+    align-content: center;
 }
 
 .align-content-between {
-    -webkit-box-align: space-between;
-    -ms-flex-align: space-between;
-    -webkit-align-conten: space-between;
-    justify-content: space-between;
+    -webkit-box-lines: justify;
+    -ms-flex-line-pack: justify;
+    -webkit-align-content: space-between;
+    align-content: space-between;
 }
 
 .align-content-around {
-    -webkit-box-align: space-around;
-    -ms-flex-align: space-around;
-    -webkit-align-conten: space-around;
-    justify-content: space-around;
+    -webkit-box-lines: space-around;
+    -ms-flex-line-pack: space-around;
+    -webkit-align-content: space-around;
+    align-content: space-around;
 }
 
 .align-content-stretch {
-    -webkit-box-align: stretch;
-    -ms-flex-align: stretch;
-    -webkit-align-conten: stretch;
-    justify-content: stretch;
+    -webkit-box-lines: stretch;
+    -ms-flex-line-pack: stretch;
+    -webkit-align-content: stretch;
+    align-content: stretch;
 }
 
 .flex-item-auto {

package/src/assets/scss/app-form.scss

@@ -1,4 +1,182 @@
-@import '_flex.scss';
+.flex {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.inline-flex {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: -webkit-inline-flex;
+    display: inline-flex;
+}
+
+.flex-row {
+    -webkit-box-orient: horizontal;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+}
+
+.flex-row-reverse {
+    -webkit-box-orient: horizontal;
+    -ms-flex-direction: row-reverse;
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+}
+
+.flex-column {
+    -webkit-box-orient: vertical;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+
+.flex-column-reverse {
+    -webkit-box-orient: vertical;
+    -ms-flex-direction: column-reverse;
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+}
+
+.justify-content-center {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+
+.justify-content-end {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+}
+
+.justify-content-space-between {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+}
+
+.justify-content-space-around {
+    -webkit-box-pack: space-around;
+    -ms-flex-pack: space-around;
+    -webkit-justify-content: space-around;
+    justify-content: space-around;
+}
+
+.align-items-start {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+}
+
+.align-items-end {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+}
+
+.align-items-center {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.align-items-baseline {
+    -webkit-box-align: baseline;
+    -ms-flex-align: baseline;
+    -webkit-align-items: baseline;
+    align-items: baseline;
+}
+
+.flex-wrap-nowrap {
+    -ms-flex-wrap: nowrap;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+
+.flex-wrap-wrap {
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+.flex-wrap-reverse {
+    -ms-flex-wrap: wrap-reverse;
+    -webkit-flex-wrap: wrap-reverse;
+    flex-wrap: wrap-reverse;
+}
+
+.align-content-start {
+    -webkit-box-lines: start;
+    -ms-flex-line-pack: start;
+    -webkit-align-content: flex-start;
+    align-content: flex-start;
+}
+
+.align-content-end {
+    -webkit-box-lines: end;
+    -ms-flex-line-pack: end;
+    -webkit-align-content: flex-end;
+    align-content: flex-end;
+}
+
+.align-content-center {
+    -webkit-box-lines: center;
+    -ms-flex-line-pack: center;
+    -webkit-align-content: center;
+    align-content: center;
+}
+
+.align-content-between {
+    -webkit-box-lines: justify;
+    -ms-flex-line-pack: justify;
+    -webkit-align-content: space-between;
+    align-content: space-between;
+}
+
+.align-content-around {
+    -webkit-box-lines: space-around;
+    -ms-flex-line-pack: space-around;
+    -webkit-align-content: space-around;
+    align-content: space-around;
+}
+
+.align-content-stretch {
+    -webkit-box-lines: stretch;
+    -ms-flex-line-pack: stretch;
+    -webkit-align-content: stretch;
+    align-content: stretch;
+}
+
+.flex-item-auto {
+    flex: auto;
+}
+
+.flex-item {
+    flex: 1;
+    overflow: hidden;
+}
+
+.flex-item-overflowX {
+    flex: 1;
+    overflow: hidden;
+    width: 0;
+    min-width: 0;
+}
+
+.flex-item-overflowY {
+    flex: 1;
+    overflow: hidden;
+    height: 0;
+    min-height: 0;
+}
 :root {
     /* 主色调 */
     --primary-color: #1989fa;
@@ -81,9 +259,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 +283,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;}
             }

package/src/assets/scss/global.scss

@@ -1,4 +1,182 @@
-@import './_flex.scss';
+.flex {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
+.inline-flex {
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: -webkit-inline-flex;
+    display: inline-flex;
+}
+
+.flex-row {
+    -webkit-box-orient: horizontal;
+    -ms-flex-direction: row;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+}
+
+.flex-row-reverse {
+    -webkit-box-orient: horizontal;
+    -ms-flex-direction: row-reverse;
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+}
+
+.flex-column {
+    -webkit-box-orient: vertical;
+    -ms-flex-direction: column;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+
+.flex-column-reverse {
+    -webkit-box-orient: vertical;
+    -ms-flex-direction: column-reverse;
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+}
+
+.justify-content-center {
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+}
+
+.justify-content-end {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+}
+
+.justify-content-space-between {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    -webkit-justify-content: space-between;
+    justify-content: space-between;
+}
+
+.justify-content-space-around {
+    -webkit-box-pack: space-around;
+    -ms-flex-pack: space-around;
+    -webkit-justify-content: space-around;
+    justify-content: space-around;
+}
+
+.align-items-start {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    -webkit-align-items: flex-start;
+    align-items: flex-start;
+}
+
+.align-items-end {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+}
+
+.align-items-center {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.align-items-baseline {
+    -webkit-box-align: baseline;
+    -ms-flex-align: baseline;
+    -webkit-align-items: baseline;
+    align-items: baseline;
+}
+
+.flex-wrap-nowrap {
+    -ms-flex-wrap: nowrap;
+    -webkit-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+}
+
+.flex-wrap-wrap {
+    -ms-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+
+.flex-wrap-reverse {
+    -ms-flex-wrap: wrap-reverse;
+    -webkit-flex-wrap: wrap-reverse;
+    flex-wrap: wrap-reverse;
+}
+
+.align-content-start {
+    -webkit-box-lines: start;
+    -ms-flex-line-pack: start;
+    -webkit-align-content: flex-start;
+    align-content: flex-start;
+}
+
+.align-content-end {
+    -webkit-box-lines: end;
+    -ms-flex-line-pack: end;
+    -webkit-align-content: flex-end;
+    align-content: flex-end;
+}
+
+.align-content-center {
+    -webkit-box-lines: center;
+    -ms-flex-line-pack: center;
+    -webkit-align-content: center;
+    align-content: center;
+}
+
+.align-content-between {
+    -webkit-box-lines: justify;
+    -ms-flex-line-pack: justify;
+    -webkit-align-content: space-between;
+    align-content: space-between;
+}
+
+.align-content-around {
+    -webkit-box-lines: space-around;
+    -ms-flex-line-pack: space-around;
+    -webkit-align-content: space-around;
+    align-content: space-around;
+}
+
+.align-content-stretch {
+    -webkit-box-lines: stretch;
+    -ms-flex-line-pack: stretch;
+    -webkit-align-content: stretch;
+    align-content: stretch;
+}
+
+.flex-item-auto {
+    flex: auto;
+}
+
+.flex-item {
+    flex: 1;
+    overflow: hidden;
+}
+
+.flex-item-overflowX {
+    flex: 1;
+    overflow: hidden;
+    width: 0;
+    min-width: 0;
+}
+
+.flex-item-overflowY {
+    flex: 1;
+    overflow: hidden;
+    height: 0;
+    min-height: 0;
+}
 body,
 html {
     width: 100%;

package/src/components/appForm/Checkbox.vue

@@ -70,3 +70,8 @@ export default {
     }
 }
 </script>
+<style scoped>
+.van-checkbox--horizontal {
+    margin-bottom: 15px;
+}
+</style>

package/src/components/appForm/Input.vue

@@ -1,6 +1,6 @@
 <template>
-    <van-field v-model="innerValue" :label="conf.hideLabel ? '' : conf.label" v-bind="filterAttrs" :rules="rules"
-        @input="handleChange" @clear="handleClear" />
+    <van-field v-model="innerValue" :label="conf.hideLabel ? '' : conf.label" v-bind="filterAttrs"
+        :rules="mode == 'view' ? [] : rules" @input="handleChange" @clear="handleClear" />
 </template>
 
 <script>

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>