表格快速构建完善，去掉本地缓存，才能实现把option带过去

src/api/bank/autostruct.js

@@ -48,3 +48,16 @@ export const update = (row) => {
   })
 }
 
+export const opStr2opObj = (optionStr) => {
+  optionStr = optionStr.replace(/(s*?{s*?|s*?,s*?)(['"])?([a-zA-Z0-9]+)(['"])?:/g, '$1"$3":').replaceAll('\'', '\"');
+  optionStr = optionStr.replace('>', '>')
+  optionStr = optionStr.replace(/\s*/g, '')
+  // str.replace(/\s*/g,"")
+  let optionObj = JSON.parse(optionStr, (k,v)=>{
+    if(k == 'change'){
+      return eval('"' + v + '"')
+    }
+    return v
+  })
+  return optionObj;
+}

src/components/common/cy-form-design.vue

@@ -1,28 +1,122 @@
 <template>
   <basic-container>
-    <avue-form-design :options="options"
-                      :aside-left-width="270"
-                      :aside-right-width="380"
-                      storage
-                      @submit="handleSubmit">
-    </avue-form-design>
+    <div v-if="designVisible">
+
+      <avue-form-design :options="options"
+                        :aside-left-width="270"
+                        :aside-right-width="380"
+                        @submit="handleSubmit">
+      </avue-form-design>
+
+    </div>
   </basic-container>
 </template>
 
 <script>
-    export default {
+  import {opStr2opObj} from "../../api/bank/autostruct";
+
+  export default {
       name: "cy-form-design",
       props: {
         callback: {
           type: Function
+        },
+        option: {
+          type: Object
         }
       },
       data(){
         return {
+          designVisible: false,
           options: {
+            column: [
+              {
+                type: 'input',
+                label: '姓名',
+                span: 12,
+                display: true,
+                prop: 'name',
+                required: true,
+                rules: [
+                  {
+                    required: true,
+                    message: '姓名必须填写'
+                  }
+                ],
+                size: 'small'
+              },
+              {
+                type: 'input',
+                label: '年齡',
+                span: 12,
+                display: true,
+                prop: 'age',
+                size: 'small'
+              },
+              {
+                type: 'input',
+                label: '手機號',
+                span: 12,
+                display: true,
+                prop: 'phone',
+                maxlength: 11,
+                size: 'small'
+              },
+              {
+                type: 'input',
+                label: '住址',
+                span: 12,
+                display: true,
+                prop: 'address',
+                size: 'small'
+              },
+              {
+                type: 'select',
+                label: '業務類型',
+                span: 24,
+                display: true,
+                size: 'small',
+                prop: 'businessType',
+                dicUrl: '/api/blade-system/dict/dictionary?code=business_type',
+                props: {
+                  label: 'dictValue',
+                  value: 'dictKey'
+                },
+                dicMethod: 'get'
+              },
+              {
+                type: 'select',
+                label: '印章類型',
+                cascaderItem: [],
+                span: 24,
+                display: true,
+                props: {
+                  label: 'dictValue',
+                  value: 'dictKey'
+                },
+                prop: 'sealTypeSearch',
+                dicUrl: '/api/blade-system/dict/dictionary?code=seal_type'
+              }
+            ],
+            labelPosition: 'right',
+            labelSuffix: '：',
+            labelWidth: 120,
+            gutter: 0,
+            menuBtn: true,
+            submitBtn: true,
+            submitText: '提交',
+            emptyBtn: true,
+            emptyText: '清空',
+            menuPosition: 'center'
           },
         }
       },
+      mounted() {
+        if (this.option){
+          this.options = opStr2opObj(this.option);
+        }
+        this.designVisible = true;
+      },
       methods: {
         handleSubmit(value){
           let jsonStr = JSON.stringify(value, (k,v) => {

src/views/bank/autodata.vue

@@ -1,13 +1,16 @@
 <template>
   <basic-container>
-    <el-select v-model="value" filterable placeholder="请选择" @change="selectTable">
-      <el-option
-        v-for="(item, idx) in tableList"
-        :key="idx"
-        :label="item.name"
-        :value="item.id">
-      </el-option>
-    </el-select>
+    <basic-container>
+      <el-select v-model="value" filterable placeholder="请选择" @change="selectTable">
+        <el-option
+          v-for="(item, idx) in tableList"
+          :key="idx"
+          :label="item.name"
+          :value="item.id">
+        </el-option>
+      </el-select>
+    </basic-container>
+
     <div v-if="value">
       <avue-crud :option="option"
                  :table-loading="loading"
@@ -45,6 +48,7 @@
   import {getList, getDetail, add, update, remove} from "@/api/bank/autodata";
   import {mapGetters} from "vuex";
   import {getList as getTables} from "@/api/bank/autostruct";
+  import {opStr2opObj} from "../../api/bank/autostruct";
 
   export default {
     data() {
@@ -111,16 +115,19 @@
       },
       selectTable(value){
         let table = this.getItemById(value);
-        let optionStr = table.columns.replace(/(s*?{s*?|s*?,s*?)(['"])?([a-zA-Z0-9]+)(['"])?:/g, '$1"$3":').replaceAll('\'', '\"');
+        /*let optionStr = table.columns.replace(/(s*?{s*?|s*?,s*?)(['"])?([a-zA-Z0-9]+)(['"])?:/g, '$1"$3":').replaceAll('\'', '\"');
         optionStr = optionStr.replace('&gt;', '>')
-        optionStr = optionStr.replace(/\s*/g, '')
-        // str.replace(/\s*/g,"")
+        optionStr = optionStr.replace(/\s*!/g, '')
+        // str.replace(/\s*!/g,"")
         this.option = JSON.parse(optionStr, (k,v)=>{
           if(k == 'change'){
             return eval('"' + v + '"')
           }
           return v
         })
+*/
+        this.option = opStr2opObj(table.columns);
+
         this.onLoad(this.page)
       },
       getItemById(id){

src/views/bank/autostruct.vue

@@ -33,13 +33,15 @@
                    size="small"
                    icon="el-icon-design"
                    plain
-                   @click="designVisible = true">設計
+                   @click="designOption = row.columns, designVisible = true">設計
         </el-button>
       </template>
     </avue-crud>
 
     <el-dialog :append-to-body="true" :modal-append-to-body="false" :destroy-on-close="true" :fullscreen="true" :visible.sync="designVisible" title="表單設計">
-      <cy-form-design :callback="testCallback"></cy-form-design>
+      <div v-if="designVisible">
+        <cy-form-design :callback="designCallback" :option="designOption"></cy-form-design>
+      </div>
     </el-dialog>
 
   </basic-container>
@@ -55,6 +57,7 @@
     data() {
       return {
         designVisible: false,
+        designOption: {},
 
         form: {},
         query: {},
@@ -141,7 +144,7 @@
       }
     },
     methods: {
-      testCallback(value){
+      designCallback(value){
         this.designVisible = false;
         this.form.columns = value;
       },