低代码前端完成

2022-06-22 11:08:55 +08:00
parent 98762e996c
commit 834132fec2
3 changed files with 53 additions and 48 deletions
--- a/examples/router/axios.js
+++ b/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)) {
--- a/project/oms/apps/develop/AppAiCode/acAdd.vue
+++ b/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()
--- a/project/oms/apps/develop/AppAiCode/detailLayout.vue
+++ b/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>