feat: 新增dev开发者模式

BoBoooooo · Dec 20, 2020 · 77ac94b · 77ac94b
1 parent be6457d
commit 77ac94b
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 11 deletions.
diff --git a/examples/main.ts b/examples/main.ts
@@ -14,7 +14,14 @@ Vue.use(plugin, {
   crud,
 });
 Vue.config.productionTip = false;
-
+// 开启dev编辑模式
+Vue.prototype.$store = {
+  getters: {
+    config: {
+      isDev: '1',
+    },
+  },
+};
 axios({
   url: '/users/login',
   method: 'post',

diff --git a/packages/crud-table/src/CrudTable.vue b/packages/crud-table/src/CrudTable.vue
@@ -14,6 +14,12 @@
         <!-- 表格标题 -->
         <h4>{{tableTitle}}</h4>
       </div>
+      <!--dev模式可直接编辑表格-->
+      <div v-if="$store.getters.config && $store.getters.config.isDev === '1'" class="dev-module">
+        <el-button type="text" @click="showTableDesignerDialog">当前表格: {{this.tableDesignerName || this.tableName}}  [点此修改]</el-button>
+        <TableDesignerDialog ref="tableDesignerDialog"
+                         @after-save="tableOnSave"/>
+      </div>
       <!-- table右上角按钮 -->
       <div class="btn-bar">
         <slot name="btnBarPrevBtn" />
@@ -233,6 +239,7 @@ export default class CrudTable extends Vue {
     table: HTMLFormElement;
     dialog: HTMLFormElement;
     searchForm: HTMLFormElement;
+    tableDesignerDialog: HTMLFormElement;
   };
 
   // 当前点击行
@@ -937,6 +944,32 @@ export default class CrudTable extends Vue {
   beforeDestroy() {
     window.removeEventListener('resize', this.resizeHandler);
   }
+
+  /**
+   * 下列为dev模式代码,不需要可自行删除
+   *
+   */
+  tableOnSave({ tableDesign }) {
+    this.tableConfig = tableDesign;
+    // 如果不显示操作列,则隐藏
+    if (!this.view.actionColumn) {
+      this.tableConfig.columns = this.tableConfig.columns.filter((item: any) => item.slotName !== 'actionColumn');
+    }
+    const { actionColumnWidth } = this;
+    // 如果显示指明了操作列列宽
+    if (actionColumnWidth) {
+      const actionColumn: any = this.tableConfig.columns.find((item: any) => item.slotName === 'actionColumn');
+      if (actionColumn) {
+        actionColumn.width = actionColumnWidth;
+        actionColumn.minWidth = actionColumnWidth;
+      }
+    }
+  }
+
+  async showTableDesignerDialog() {
+    const res = await this.$PROCRUD.getTableDetail(this.tableDesignerName || this.tableName);
+    this.$refs.tableDesignerDialog.showDialog({ id: res.data.id }, 1, res.data);
+  }
 }
 </script>
 
@@ -980,5 +1013,13 @@ export default class CrudTable extends Vue {
       float: right;
     }
   }
+  .dev-module{
+    display: inline-block;
+    margin-left: 20px;
+    line-height: 28px;
+    button{
+      padding:0;
+    }
+  }
 }
 </style>
diff --git a/packages/form-designer/src/FormDesignerDialog.vue b/packages/form-designer/src/FormDesignerDialog.vue
@@ -579,6 +579,9 @@ export default {
       this.$refs.generateDialogForm
         .getData()
         .then((formValue) => {
+          const value = JSON.parse(formValue.formJson);
+          value.config.name = formValue.tableName;
+          formValue.formJson = JSON.stringify(value);
           let type;
           let msg;
           // 根据对话框状态判断保存或编辑

diff --git a/packages/form-designer/src/GenerateForm.vue b/packages/form-designer/src/GenerateForm.vue
@@ -10,8 +10,15 @@
 -->
 <template>
   <div class="table-form-wrapper">
-    <el-form ref="generateForm"
-             :class='{"table-form": data.config && data.config.isTableClass}'
+      <!-- dev模式,支持直接修改表单,不需要可删除 -->
+      <div v-if="data.config && data.config.name && $store.getters.config && $store.getters.config.isDev === '1'" class="dev-module">
+        <el-button type="text" @click="showFormDesignerDialog">当前表单: {{data.config.name}} [点此修改]</el-button>
+        <FormDesignerDialog ref="formDesignerDialog"
+                        tableName="dynamictables"
+                        @after-save="formOnSave" />
+      </div>
+      <el-form ref="generateForm"
+             :class='{"table-form":data.config && data.config.isTableClass}'
              :model="models"
              :rules="rules"
              :label-position="data.config && data.config.labelPosition"
@@ -158,11 +165,14 @@ import GenerateFormItem from './GenerateFormItem.vue';
 export default class GenerateForm extends Vue {
   $refs!: {
     generateForm: HTMLFormElement;
+    formDesignerDialog: HTMLFormElement;
   };
 
   @Prop({
     type: Object,
-    default: () => ({}),
+    default: () => ({
+      config: {},
+    }),
   })
   data: any;
 
@@ -222,7 +232,6 @@ export default class GenerateForm extends Vue {
 
   rules: any = {};
 
-  // 子表表格选中数据
   tableSelections: any = {};
 
   created() {
@@ -315,6 +324,7 @@ export default class GenerateForm extends Vue {
         }
       }
     }
+    this.models = { ...this.value, ...this.models };
   }
 
   // 多选情况下数组转字符串
@@ -407,14 +417,11 @@ export default class GenerateForm extends Vue {
 
   @Watch('value', {
     deep: true,
-    immediate: true,
   })
   valueOnChange(val) {
-    this.$nextTick(() => {
-      if (this.$refs.generateForm) {
-        this.$refs.generateForm.clearValidate();
-      }
-    });
+    if (this.$refs.generateForm) {
+      this.$refs.generateForm.clearValidate();
+    }
     this.models = { ...this.models, ...val };
   }
 
@@ -425,8 +432,28 @@ export default class GenerateForm extends Vue {
   modelsOnChange(val) {
     this.$emit('update:entity', val);
   }
+
+
+  /**
+   * 下列为dev模式代码,不需要可自行删除
+   *
+   */
+  formOnSave({ formDesign }) {
+    this.data = formDesign;
+  }
+
+  async showFormDesignerDialog() {
+    const res = await this.$PROCRUD.getFormDetail(this.data.config.name);
+    this.$refs.formDesignerDialog.showDialog({ id: res.data.id }, 1, res.data);
+  }
 }
 </script>
 <style lang="scss" scoped>
 @import './styles/table-form.scss';
+.dev-module{
+  position: absolute;
+  left: 20px;
+  top: 30px;
+  z-index: 2;
+}
 </style>
diff --git a/packages/table-designer/src/TableDesignerDialog.vue b/packages/table-designer/src/TableDesignerDialog.vue
@@ -264,6 +264,7 @@ export default {
             this.$emit('after-save', {
               status: this.dialogStatus,
               dialogParams: this.dialogParams,
+              tableDesign: JSON.parse(formValue.formJson),
             });
           });
         })