低代码前端完成

examples/router/axios.js

@@ -9,7 +9,7 @@ let baseURLs = {
 instance.defaults.baseURL = baseURLs[process.env.NODE_ENV]
 instance.interceptors.request.use(config => {
   if (config.url.startsWith("/node")) {
-    config.baseURL = "/ns"
+    config.baseURL = "/lns"
   } else if (/\/project\/beta/.test(location.pathname)) {
     config.baseURL = "/wg"
   } else if (/\/project\/sass/.test(location.pathname)) {

project/oms/apps/develop/AppAiCode/acAdd.vue

@@ -4,7 +4,7 @@
       <ai-title slot="title" :title="pageTitle"/>
       <template #content>
         <el-form ref="AcForm" :model="form" size="small" label-width="120px" :rules="rules">
-          <el-tabs tab-position="left">
+          <el-tabs tab-position="left" @tab-click="handleSyncProps">
             <el-tab-pane label="基本信息" lazy>
               <ai-card title="基本信息">
                 <template #content>
@@ -42,6 +42,7 @@
               </ai-card>
               <ai-card title="字段设置">
                 <template #right>
+                  <el-button type="text" @click="handleAddProps">批量添加</el-button>
                   <el-button type="text" @click="form.props.push({})">添加</el-button>
                 </template>
                 <template #content>
@@ -49,7 +50,7 @@
                     <el-table-column v-for="col in colConfigs" :key="col.slot" v-bind="col">
                       <template slot-scope="{row}">
                         <el-checkbox v-if="col.type=='checkBox'" v-model="row[col.slot]"/>
-                        <span v-else-if="col.type=='chbShow'" v-text="row[col.slot]==1?'√':''"/>
+                        <span v-else-if="col.type=='chbShow'" v-text="row[col.slot]==true?'✔':''"/>
                         <el-input v-else size="small" v-model="row[col.slot]" placeholder="请输入" clearable/>
                       </template>
                     </el-table-column>
@@ -63,7 +64,7 @@
               </ai-card>
             </el-tab-pane>
             <el-tab-pane label="详情设计" lazy>
-              <detail-layout v-bind="$props" :form="form" v-model="form.props"/>
+              <detail-layout v-bind="$props" :form="form" v-model="form.detailConfig"/>
             </el-tab-pane>
           </el-tabs>
         </el-form>
@@ -116,7 +117,7 @@ export default {
       }).then(res => {
         if (res?.data) {
           this.form = res.data
-          this.form.props.map(e => ({...e, isDetail: !!e.groupName}))
+          this.handleSyncProps()
         }
       })
     },
@@ -135,6 +136,35 @@ export default {
         }
       })
     },
+    handleSyncProps() {
+      let detailPorps = this.form.detailConfig?.map(e => e.column)?.flat()?.map(e => e.prop)
+      this.form.props = this.form.props.map(e => ({...e, isDetail: !!detailPorps?.includes(e.prop)}))
+    },
+    handleAddProps() {
+      this.$prompt("请输入swagger示例JSON字符串", {
+        type: 'warning',
+        title: "批量添加字段",
+        dangerouslyUseHTMLString: true,
+        center: true,
+      }).then(({value}) => {
+        if (this.$checkJson(value)) {
+          Object.keys(JSON.parse(value)).map(prop => {
+            this.form.props.push({prop})
+          })
+        }
+      }).catch(() => 0)
+    },
+    $checkJson(str) {
+      if (typeof str == 'string') {
+        try {
+          let obj = JSON.parse(str);
+          return !!(typeof obj == 'object' && obj);
+        } catch (e) {
+          return false;
+        }
+      }
+      return false;
+    }
   },
   created() {
     this.getDetail()

project/oms/apps/develop/AppAiCode/detailLayout.vue

@@ -183,7 +183,6 @@
           </div>
         </div>
       </template>
-
       <div class="right-item" v-if="['select', 'date', 'time', 'input', 'datetime', 'textarea', 'rtf'].includes(currTarget.type)">
         <div class="right-item__title no-solid">
           <h2>占位符</h2>
@@ -425,6 +424,12 @@ export default {
       } else if (this.groupIndex > -1 && this.isGroup) {
         this.currTarget = this.targetList[this.groupIndex]
       } else this.currTarget = {}
+    },
+    targetList: {
+      deep: true,
+      handler(v) {
+        this.$emit('change', v)
+      }
     }
   },
   computed: {
@@ -432,43 +437,17 @@ export default {
       return '表单设置'
     },
     propOps: v => v.form.props?.map(e => ({dictValue: e.prop, dictName: e.label})),
-    detailProps: {
-      set(v) {
-        let props = [v.map((e, i) => e.column.map((item, index) => ({
-          ...e,
-          groupIndex: i,
-          groupName: e.groupName,
-          fieldDbName: item.isInit ? item.fieldDbName : (this.isUnique(item.type) ? item.type : `${item.type}${i}${index}`),
-          defaultValue: item.type === 'checkbox' && item.defaultValue ? item.defaultValue.join('`') : item.defaultValue,
-          selectValues: item.options ? item.options.map(o => o.label).join('`') : ''
-        })))].flat()
-        console.log(props)
-        this.$emit('change', props)
-      },
-      get() {
-        const init = {
-          type: 'group',
-          fieldName: '卡片',
-          fixedLabel: '卡片',
-          icon: 'iconpic',
-          groupName: '基础信息',
-          column: []
-        }
-        let arr = this.$copy(this.value),
-            groups = [...new Set(arr?.map(e => e.groupName))].filter(e => !!e)
-        this.targetList = groups?.length > 0 ? groups.map(groupName => ({
-          type: 'group',
-          fieldName: '卡片',
-          fixedLabel: '卡片',
-          icon: 'iconpic',
-          groupName,
-          column: arr.filter(e => e.groupName == groupName)
-        })) : [init]
-        return this.targetList
-      }
-    },
   },
   methods: {
+    initValue() {
+      let unwatch = this.$watch('value', (v) => {
+        if (this.targetList.length > 0) unwatch && unwatch()
+        else if (!!v) {
+          this.targetList = this.$copy(v)
+          unwatch && unwatch()
+        }
+      }, {immediate: true})
+    },
     removeItem(j, i) {
       this.groupIndex = -1
       this.activeIndex = -1
@@ -502,7 +481,6 @@ export default {
         value: ''
       })
     },
-
     removeOptions(index) {
       const len = this.targetList[this.groupIndex].column[this.activeIndex].options.length
 
@@ -511,14 +489,12 @@ export default {
       }
       this.targetList[this.groupIndex].column[this.activeIndex].options.splice(index, 1)
     },
-
     onEnd(e) {
       const el = e.to.parentElement.parentElement
       this.isGroup = false
       this.activeIndex = e.newIndex
       this.groupIndex = Number(el.getAttribute('data-index'))
     },
-
     onElEnd(e) {
       if (this.isGroup) {
         this.groupIndex = e.newIndex
@@ -526,7 +502,6 @@ export default {
         this.activeIndex = e.newIndex
       }
     },
-
     clone(e) {
       if (e.type === 'group') {
         this.targetList.push(JSON.parse(JSON.stringify(e)))
@@ -563,7 +538,6 @@ export default {
         this.activeIndex = this.targetList[0].column.length - 1
       })
     },
-
     onMove(e) {
       const el = e.draggedContext.element
       if (el.type === 'group') {
@@ -577,7 +551,6 @@ export default {
       })
       return !(list.indexOf(el.type) > -1 && ['name', 'idNumber', 'phone', 'area'].includes(el.type));
     },
-
     cloneComponent(e) {
       if (e.type === 'group') {
         this.targetList.push(JSON.parse(JSON.stringify(e)))
@@ -599,7 +572,9 @@ export default {
       return JSON.parse(JSON.stringify(e))
     }
   },
-
+  created() {
+    this.initValue()
+  }
 }
 </script>