tianheng-ui 0.1.25 → 0.1.28

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.1.25",
+  "version": "0.1.28",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/FormMaking/FormConfig.vue

@@ -5,10 +5,12 @@
       label-position="left"
       label-width="80px"
       size="small"
+      :rules="formRules"
+      ref="formRef"
     >
       <el-collapse v-model="collapseValue">
         <el-collapse-item title="表单配置" name="group-form">
-          <el-form-item required>
+          <el-form-item prop="fieldsType" required>
             <el-tooltip
               slot="label"
               effect="dark"
@@ -22,7 +24,11 @@
               <el-radio-button label="fieldsApi">接口导入</el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-if="config.fieldsType === 'fieldsApi'" required>
+          <el-form-item
+            v-if="config.fieldsType === 'fieldsApi'"
+            prop="fieldsApi"
+            required
+          >
             <el-tooltip
               slot="label"
               effect="dark"
@@ -40,7 +46,7 @@
               @change="handleFieldsApiChange"
             >
               <el-option
-                v-for="item in config.network"
+                v-for="item in apiOptions"
                 :key="item.id"
                 :label="item.label"
                 :value="item.id"
@@ -48,7 +54,7 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="表单标题" required>
+          <el-form-item label="表单标题" prop="title" required>
             <el-input
               v-model="config.title"
               placeholder="请输入"
@@ -121,7 +127,7 @@
 
 <script>
 export default {
-  props: ["config"],
+  props: ["config", "apiOptions"],
   data() {
     return {
       collapseValue: [
@@ -129,26 +135,30 @@ export default {
         "group-resultData",
         "group-label",
         "group-attributes"
-      ]
+      ],
+      formRules: {
+        fieldsType: [
+          { required: true, message: "请选择字段类型", trigger: "change" }
+        ],
+        fieldsApi: [
+          { required: true, message: "请选择字段类型", trigger: "change" }
+        ],
+        title: [
+          { required: true, message: "请选择字段类型", trigger: "change" }
+        ]
+      }
     };
   },
   methods: {
-    handleFieldsApiChange(val) {
-      const dataArr = this.config.network.filter(item => {
-        return item.id === val;
-      });
-      if (dataArr.length && dataArr[0].paramsOut) {
-        const fields = dataArr[0].paramsOut.map(item => {
-          return {
-            label: item.note || item.name,
-            alias: item.name,
-            prop: item.name,
-            type: "input",
-            align: "left"
-          };
+    handleFieldsApiChange() {
+      this.$emit("fieldsChange");
+    },
+    formValidate() {
+      return new Promise((resolve, reject) => {
+        this.$refs.formRef.validate(valid => {
+          resolve(valid);
         });
-        this.$emit("fieldsChange", fields);
-      } else this.$emit("fieldsChange", []);
+      });
     }
   }
 };

package/packages/FormMaking/GenerateForm.vue

@@ -117,7 +117,7 @@ export default {
   },
   watch: {
     config(val) {
-      this.setJSON(val);
+      this.setConfig(val);
     },
     formJson: {
       handler(val) {
@@ -262,7 +262,7 @@ export default {
     onInputChange(value, field) {
       this.$emit("on-change", field, value, this.models);
     },
-    setJSON(json) {
+    setConfig(json) {
       this.formJson = json;
       this.generateModle(this.formJson.list);
     }

package/packages/FormMaking/WidgetConfig.vue

@@ -66,12 +66,12 @@
             <el-tooltip
               slot="label"
               effect="dark"
-              content="表单提交时的入参名，对应数据表中的字段"
+              content="表单提交时的入参名，对应数据表中的字段，非必要不修改！"
               placement="top"
             >
               <span style="color: #409EFF;">字段标识</span>
             </el-tooltip>
-            <el-input v-model="data.model" readonly></el-input>
+            <el-input v-model="data.model"></el-input>
           </el-form-item>
         </el-collapse-item>
 

package/packages/FormMaking/WidgetForm.vue

@@ -3,7 +3,7 @@
     <th-empty
       class="form-empty"
       v-if="data.list.length == 0"
-      :image="require('@/assets/images/notData.png')"
+      :image="require('../../lib/theme-chalk/images/notData.png')"
       description="从左侧拖拽来添加字段"
     ></th-empty>
     <el-form

package/packages/FormMaking/custom/config.js

@@ -772,29 +772,32 @@ export const layoutComponents = [
 export const templateComponents = [];
 
 export const baseConfig = {
-  fieldsType: "fieldsApi",
-  fieldsApi: "",
-  ui: "element",
-  title: "",
-  width: "",
-  labelWidth: 100,
-  labelPosition: "right",
-  labelSuffix: ":",
-  size: "small",
-  disabled: false,
-  hideLabel: false,
-  mounted: { api: "" },
-  eventScript: [
-    {
-      id: "mounted",
-      label: "mounted",
-      value: ""
-    },
-    {
-      id: "refresh",
-      label: "refresh",
-      value: ""
-    }
-  ],
-  network: []
+  list: [],
+  config: {
+    fieldsType: "fieldsApi",
+    fieldsApi: "",
+    ui: "element",
+    title: "",
+    width: "",
+    labelWidth: 100,
+    labelPosition: "right",
+    labelSuffix: ":",
+    size: "small",
+    disabled: false,
+    hideLabel: false,
+    mounted: { api: "" },
+    eventScript: [
+      {
+        id: "mounted",
+        label: "mounted",
+        value: ""
+      },
+      {
+        id: "refresh",
+        label: "refresh",
+        value: ""
+      }
+    ],
+    network: []
+  }
 };

package/packages/FormMaking/index.vue

@@ -158,7 +158,9 @@
                 <form-config
                   v-if="configTab == 'form'"
                   :config="formConfig.config"
+                  :apiOptions="apiOptions"
                   @fieldsChange="handleFieldsChange"
+                  ref="formConfigRef"
                 ></form-config>
               </el-main>
             </el-container>
@@ -196,12 +198,7 @@ export default {
     GenerateForm
   },
   props: {
-    config: {
-      type: Object,
-      default: () => {
-        return { config: {}, list: [] };
-      }
-    },
+    config: Object,
     oauthConfig: {
       type: Object,
       default: () => {
@@ -260,7 +257,7 @@ export default {
     this.layoutComponents = layoutComponents;
     this.baseConfig = deepClone(baseConfig);
     return {
-      formConfig: this.config,
+      formConfig: this.baseConfig,
       widgetFormSelect: {},
       widgetValue: {},
       configTab: "form",
@@ -293,27 +290,18 @@ export default {
       deep: true,
       handler: function(val) {
         this.$emit("update:config", val);
-        // this.$emit("on-change", val);
       }
     },
     config(val) {
-      if (val && val.config) {
-        val.config = Object.assign(this.baseConfig, val.config);
-      }
-      this.setJSON(val);
+      this.setConfig(val);
     },
-    apiOptions(val) {
-      if (val) {
-        this.formConfig.config.network = val;
-      }
+    apiOptions() {
+      this.handleFieldsChange();
     }
   },
   created() {
     this.initConfig();
-    this.formConfig.config = Object.assign(
-      this.baseConfig,
-      this.formConfig.config
-    );
+    this.formConfig = Object.assign(this.baseConfig, this.config);
 
     if (this.formConfig.list && this.formConfig.list.length) {
       this.widgetFormSelect = this.formConfig.list[0];
@@ -371,7 +359,7 @@ export default {
         case "import-excel":
         case "import-json":
         case "import-template":
-          this.setJSON(data);
+          this.setConfig(data);
           break;
         case "clear":
           this.handleClear();
@@ -384,24 +372,69 @@ export default {
     handleWidgetConfigUpdate(val) {
       this.widgetFormSelect = Object.assign(this.widgetFormSelect, val);
     },
-    handleFieldsChange(val) {
-      this.fields = val;
+    handleFieldsChange() {
+      const dataArr = this.apiOptions.filter(item => {
+        return item.id === this.formConfig.config.fieldsApi;
+      });
+      if (dataArr.length && dataArr[0].paramsOut) {
+        this.fields = dataArr[0].paramsOut.map(item => {
+          return {
+            label: item.note || item.name,
+            alias: item.name,
+            prop: item.name,
+            type: "input",
+            align: "left"
+          };
+        });
+      } else this.fields = [];
     },
     clear() {
       this.handleClear();
     },
-    getJSON() {
-      return this.formConfig;
+    getConfig() {
+      if (this.$refs.formConfigRef) {
+        return new Promise((resolve, reject) =>
+          this.$refs.formConfigRef.formValidate().then(res => {
+            if (res) {
+              const data = deepClone(this.formConfig);
+              data.config.network = this.apiOptions;
+              resolve(data);
+            } else {
+              reject();
+            }
+          })
+        );
+      } else {
+        return new Promise((resolve, reject) => {
+          if (!this.formConfig.config.fieldsType) {
+            this.$message.warning("请选择字段类型");
+            return reject();
+          }
+          if (!this.formConfig.config.fieldsApi) {
+            this.$message.warning("请选择字段接口");
+            return reject();
+          }
+          if (!this.formConfig.config.title) {
+            this.$message.warning("请填写表单标题");
+            return reject();
+          }
+          const data = deepClone(this.formConfig);
+          data.config.network = this.apiOptions;
+          resolve(data);
+        });
+      }
     },
     getHtml() {
       return generateCode(JSON.stringify(this.formConfig));
     },
-    setJSON(json) {
-      this.formConfig = json;
+    setConfig(val) {
+      this.formConfig = Object.assign(this.baseConfig, val);
 
-      if (json.list.length > 0) {
-        this.widgetFormSelect = json.list[0];
+      if (this.formConfig.list.length > 0) {
+        this.widgetFormSelect = this.formConfig.list[0];
       }
+
+      this.handleFieldsChange();
     }
   }
 };

package/packages/TableMaking/WidgetTools.vue

@@ -35,7 +35,6 @@
         type="text"
         size="medium"
         icon="el-icon-view"
-        disabled
         @click="handleDialogOpen('preview')"
         >预览
       </el-button>
@@ -129,7 +128,9 @@
       @on-close="handleDialogClose"
       @on-affirm="handleDialogAffirm"
     >
-      <template v-if="dialog.action === 'preview'"></template>
+      <template v-if="dialog.action === 'preview'">
+        <th-table-generate :config="config"> </th-table-generate>
+      </template>
       <template v-else-if="dialog.action === 'importJson'">
         <el-alert
           type="info"

package/packages/TableMaking/generateTable.vue

@@ -94,6 +94,7 @@ export default {
   name: "thTableGenerate",
   components: { Search, Tools },
   props: {
+    config: Object,
     oauthConfig: {
       type: Object,
       default: () => {
@@ -144,17 +145,25 @@ export default {
       errorMessage: ""
     };
   },
-  created() {
-    this.axios = Axios.init(this.oauthConfig);
-    const code = this.$route.path.split("/").pop();
-    this.id = code;
+  watch: {
+    config(val) {
+      this.tableJson = val;
+      this.initConfig();
+    },
+    oauthConfig(val) {
+      this.initAxios();
+    }
+  },
+  created() {},
+  mounted() {
+    this.tableJson = this.config;
+    this.initAxios();
     this.initConfig();
   },
-  mounted() {},
   methods: {
-    // 初始化组件配置
-    initConfig() {
-      this.initData();
+    // 初始组件网络
+    initAxios() {
+      this.axios = Axios.init(this.oauthConfig);
 
       if (this.oauthConfig.token) {
         const oauthInfo = {
@@ -162,11 +171,6 @@ export default {
           baseUrl: this.oauthConfig.baseUrl
         };
         sessionStorage.setItem("th_oauth_info", JSON.stringify(oauthInfo));
-      }
-
-      const info = sessionStorage.getItem("th_oauth_info");
-      if (info) {
-        this.requestConfigData();
       } else if (this.oauthConfig.oauth) {
         // 模拟授权认证流程
         this.axios({
@@ -181,93 +185,67 @@ export default {
           };
           sessionStorage.setItem("th_oauth_info", JSON.stringify(oauthInfo));
           // this.axios.defaults.baseURL = this.oauthConfig.baseUrl;
-          this.requestConfigData();
         });
-      } else {
-        this.requestConfigData();
       }
     },
-    initData() {
-      this.tableJson = {};
-      this.errorMessage = "";
-    },
-    // 获取配置信息
-    requestConfigData() {
-      this.axios({
-        url: this.network.page.url,
-        method: this.network.page.method,
-        headers: this.network.page.headers,
-        data: { ...this.network.page.params, moduleId: this.id }
-      })
-        .then(res => {
-          const resultData = res.data;
-          if (!resultData) {
-            this.tableJson = null;
-            return;
-          }
-          this.tableJson = JSON.parse(resultData.pageConfig);
-          // 网络请求
-          this.networkConfig = this.tableJson.network;
+    // 处理配置信息
+    initConfig() {
+      // 网络请求
+      this.networkConfig = this.tableJson.network;
 
-          // 搜索栏
-          this.searchConfig = this.tableJson.search;
-          if (this.searchConfig.show) {
-            this.searchConfig.options.map(item => {
-              this.$set(this.searchData, item.prop, item.defaultValue || "");
-            });
-          }
+      // 搜索栏
+      this.searchConfig = this.tableJson.search;
+      if (this.searchConfig.show) {
+        this.searchConfig.options.map(item => {
+          this.$set(this.searchData, item.prop, item.defaultValue || "");
+        });
+      }
 
-          // table
-          for (let i = 0; i < this.tableJson.table.options.length; i++) {
-            const element = this.tableJson.table.options[i];
-            delete element.type;
-          }
-          if (this.tableJson.table.sequence) {
+      // table
+      for (let i = 0; i < this.tableJson.table.options.length; i++) {
+        const element = this.tableJson.table.options[i];
+        delete element.type;
+      }
+      if (this.tableJson.table.sequence) {
+        this.tableJson.table.options.unshift({
+          type: "index",
+          label: "序号"
+        });
+      }
+      const action = {
+        label: "操作",
+        hide: true,
+        slot: "action",
+        fixed: "right",
+        actions: []
+      };
+
+      // 按position处理按钮，1：公共区，2：行内区
+      for (const key in this.tableJson.tools) {
+        if (Object.hasOwnProperty.call(this.tableJson.tools, key)) {
+          const element = this.tableJson.tools[key];
+          if (!element.show) continue;
+          if (key === "batchDelete") {
             this.tableJson.table.options.unshift({
-              type: "index",
-              label: "序号"
+              type: "selection"
             });
           }
-          const action = {
-            label: "操作",
-            hide: true,
-            slot: "action",
-            fixed: "right",
-            actions: []
-          };
-
-          // 按position处理按钮，1：公共区，2：行内区
-          for (const key in this.tableJson.tools) {
-            if (Object.hasOwnProperty.call(this.tableJson.tools, key)) {
-              const element = this.tableJson.tools[key];
-              if (!element.show) continue;
-              if (key === "batchDelete") {
-                this.tableJson.table.options.unshift({
-                  type: "selection"
-                });
-              }
-              const dic = toolsItemConfig(key, element);
-              dic.form = element.form;
-              if (element.position === 1 || element.position === 'header') {
-                this.toolsConfig.show = true;
-                this.toolsConfig.options.push(dic);
-              } else if (element.position === 2 || element.position === 'row') {
-                action.hide = false;
-                action.actions.push(dic);
-              }
-            }
+          const dic = toolsItemConfig(key, element);
+          dic.form = element.form;
+          if (element.position === 1 || element.position === "header") {
+            this.toolsConfig.show = true;
+            this.toolsConfig.options.push(dic);
+          } else if (element.position === 2 || element.position === "row") {
+            action.hide = false;
+            action.actions.push(dic);
           }
-          action.width = action.actions.length * 60 + 20;
-          this.tableJson.table.options.push(action);
+        }
+      }
+      action.width = action.actions.length * 60 + 20;
+      this.tableJson.table.options.push(action);
 
-          this.tableConfig = this.tableJson.table;
-          this.requestListData();
-        })
-        .catch(err => {
-          this.errorMessage = err.message;
-          this.tableJson = null;
-          this.$emit("error");
-        });
+      this.tableConfig = this.tableJson.table;
+      this.requestListData();
     },
     requestListData() {
       if (!this.networkConfig.mounted) return;

package/packages/TableMaking/index.vue

@@ -30,18 +30,13 @@
 import WidgetTools from "./WidgetTools.vue";
 import WidgetTable from "./widgetTable.vue";
 import WidgetConfig from "./widgetConfig.vue";
-import { deepClone, deepMerge } from "./util/index";
+import { deepClone } from "./util/index";
 import { baseConfig } from "./custom/config";
 export default {
   name: "ThTableMaking",
   components: { WidgetTools, WidgetTable, WidgetConfig },
   props: {
-    config: {
-      type: Object,
-      default: () => {
-        return deepClone(baseConfig);
-      }
-    },
+    config: Object,
 
     /**
      * 表单配置列表。
@@ -86,8 +81,9 @@ export default {
     }
   },
   data() {
+    this.baseConfig = deepClone(baseConfig);
     return {
-      tableConfig: this.config,
+      tableConfig: this.baseConfig,
       client: "monitor"
     };
   },
@@ -99,14 +95,16 @@ export default {
       }
     },
     config(val) {
-      this.tableConfig = val;
+      this.tableConfig = Object.assign(this.baseConfig, val);
       this.handleNetwork();
     },
     apiOptions(val) {
       this.handleNetwork();
     }
   },
-  mounted() {},
+  mounted() {
+    this.tableConfig = Object.assign(this.baseConfig, this.config);
+  },
   methods: {
     handleNetwork() {
       const network = {};
@@ -129,10 +127,10 @@ export default {
           break;
       }
     },
-    getJson() {
+    getConfig() {
       return new Promise((resolve, reject) =>
         this.$refs.configRef
-          .handleFormValidate()
+          .formValidate()
           .then(res => {
             if (res) {
               const data = deepClone(this.tableConfig);

package/packages/TableMaking/widgetConfig.vue

@@ -490,10 +490,14 @@ export default {
   },
   watch: {
     config(val) {
+      this.handleFieldsApiChange(val.table.mounted.api)
       this.handleFields();
     },
     fields(val) {
       this.handleFields();
+    },
+    apiOptions(){
+      this.handleFieldsApiChange(this.config.table.mounted.api)
     }
   },
   computed: {
@@ -609,7 +613,7 @@ export default {
         this.fields = fields;
       } else this.fields = [];
     },
-    handleFormValidate() {
+    formValidate() {
       return new Promise((resolve, reject) => {
         if (this.$refs.formRef) {
           this.$refs.formRef.validate(valid => {