tianheng-ui 0.1.68 → 0.1.70

package/package.json

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

package/packages/Dialog/index.vue

@@ -1,7 +1,8 @@
 <template>
   <el-dialog
-    class="th-dialog"
-    :class="[customClass]"
+    :class="
+      `th-dialog ${customClass} ${showFooter ? '' : 'th-dialog_hideFooter'}`
+    "
     :visible.sync="visible"
     :width="width"
     :top="top"
@@ -15,18 +16,24 @@
     :before-close="handleBeforeClose"
     :destroy-on-close="destroyOnClose"
   >
-    <div slot="title" class="th-dialog__header">
-      <div class="th-dialog__title">{{ title }}</div>
-      <div class="th-dialog__action">
+    <div slot="title" class="th-dialog_header">
+      <div
+        :class="
+          `th-dialog_title ${titleCenter ? 'th-dialog_title__center' : ''}`
+        "
+      >
+        {{ title }}
+      </div>
+      <div class="th-dialog_action">
         <i
           v-if="showFullscreen"
-          class="th-dialog__action_item"
+          class="th-dialog_action_item fullscreen th-animation_button__hover"
           :class="fullscreenIcon"
           @click="handleFullscreenChange"
         ></i>
         <i
           v-if="showClose"
-          class="th-dialog__action_item "
+          class="th-dialog_action_item close th-animation_button__hover"
           :class="closeIcon"
           @click="handleBeforeClose"
         ></i>
@@ -41,11 +48,12 @@
       <el-button
         v-if="showAffirm"
         type="primary"
+        size="small"
         :loading="affirmLoading"
         @click="handleAffirm"
         >{{ affirmText }}</el-button
       >
-      <el-button v-if="showCancel" @click="handleClose">{{
+      <el-button v-if="showCancel" size="small" @click="handleClose">{{
         cancelText
       }}</el-button>
     </template>
@@ -61,8 +69,9 @@ export default {
   },
   props: {
     visible: Boolean,
-    title: { type: String, default: "" },
     width: { type: String, default: "800px" },
+    title: { type: String, default: "" },
+    titleCenter: { type: Boolean, default: false },
     fullscreen: { type: Boolean, default: false },
     top: { type: String, default: "15vh" },
     modal: { type: Boolean, default: true },

package/packages/FormMaking/GenerateForm.vue

@@ -4,11 +4,11 @@
       class="generateForm"
       :class="{ isHideLabel: formConfig.config.hideLabel }"
       :style="{ width: formConfig.config.width }"
-      :label-suffix="formConfig.config.labelSuffix"
-      :size="formConfig.config.size"
       :model="models"
+      :label-suffix="formConfig.config.labelSuffix"
       :label-position="formConfig.config.labelPosition"
       :label-width="formConfig.config.labelWidth + 'px'"
+      :size="formConfig.config.size"
       ref="generateForm"
     >
       <genetate-form-item
@@ -36,9 +36,10 @@
 </template>
 
 <script>
-import * as Axios from "lib/theme-chalk/js/axios";
-import { deepClone, getProperty, setProperty } from "./util/index";
 import GenetateFormItem from "./GenerateFormItem";
+import * as Axios from "./network/axios";
+import appConfig from "./config/index";
+import { deepClone, getProperty, setProperty } from "./util/index";
 
 export default {
   name: "thFormGenerate",
@@ -95,18 +96,21 @@ export default {
       console.log("watch models =>", this.models);
     }
   },
-  created() {
-    localStorage.setItem("_TH_OauthConfig", JSON.stringify(this.oauthConfig));
-    this.axios = Axios.init(this.oauthConfig);
-  },
+  created() {},
   mounted() {
+    sessionStorage.setItem(
+      appConfig.storageKeys.oauthConfig,
+      JSON.stringify(this.oauthConfig)
+    );
+    this.axios = Axios.init(this.oauthConfig);
+
     this.generateModle(this.formConfig.list, this.models);
     console.log("mounted models =>", this.models);
     this.handleMountedRemotData();
     this.showForm = true;
   },
   methods: {
-    generateModle(genList, modelObj, pModel) {
+    generateModle(genList, modelObj) {
       if (!genList) return;
       genList.map(item => {
         if (item.type === "grid") {
@@ -130,28 +134,25 @@ export default {
             dic[item2.value] = {};
             this.generateModle(item2.list, dic[item2.value]);
           });
-        } else if (item.type === "table" || item.type === "tableH5") {
-          const arr = item.options.defaultValue
-            ? JSON.parse(item.options.defaultValue)
-            : "";
-          const dic = {};
-          modelObj[item.model] = arr || [dic];
-
-          this.generateModle(item.options.columns, dic);
-        } else if (item.type === "blank") {
-          const value = eval(`this.value.${item.model}`);
-          const defaultValue = { String: "", Object: {}, Array: [] }[
-            item.options.defaultType
-          ];
-          modelObj[item.model] = value || defaultValue;
+        } else if (item.type === "table" || item.type === "list") {
+          !item.options.defaultValue && (item.options.defaultValue = []);
+          modelObj[item.model] = deepClone(item.options.defaultValue);
+          this.generateModle(item.options.columns);
+        } else if (item.type === "blank" && modelObj) {
+          const value =
+            getProperty(this.value, item.model) ||
+            { String: "", Object: {}, Array: [] }[item.options.defaultType];
+          // setProperty(modelObj, item.model, value);
+          this.$set(modelObj, item.model, value);
+          this.generateRules(item);
+        } else if (modelObj) {
+          const value =
+            getProperty(this.value, item.model) ||
+            JSON.parse(JSON.stringify(item.options.defaultValue));
+          // setProperty(modelObj, item.model, value);
+          this.$set(modelObj, item.model, value);
           this.generateRules(item);
         } else {
-          // const value = this.value ? eval(`this.value.${item.model}`) : "";
-          const value = this.value[item.model];
-          const defaultValue = JSON.parse(
-            JSON.stringify(item.options.defaultValue)
-          );
-          this.$set(modelObj, item.model, value || defaultValue);
           this.generateRules(item);
         }
       });
@@ -168,13 +169,13 @@ export default {
         item.rules = [];
       }
       // 配置必填项校验
-      if (item.options.required) {
-        item.rules.push({
-          required: true,
-          message: "必需项",
-          trigger: "change"
-        });
-      }
+      // if (item.options.required) {
+      //   item.rules.push({
+      //     required: true,
+      //     message: "必需项",
+      //     trigger: "change"
+      //   });
+      // }
       this.hendleElementRemoteData(item);
     },
     // 获取组件的远端数据
@@ -298,7 +299,9 @@ export default {
             initParams(item.children);
           } else {
             const value =
-            item.defaultValue || getProperty(this.models, item.pAlias) || null;
+              item.defaultValue ||
+              getProperty(this.models, item.pAlias) ||
+              null;
             setProperty(params, item.pAlias, value);
           }
         });
@@ -380,17 +383,5 @@ export default {
       margin-left: 0 !important;
     }
   }
-
-  .tableH5 {
-    // 操作按钮布局
-    .tableH5-item > div {
-      display: flex;
-
-      .actions {
-        align-items: center;
-        justify-content: right;
-      }
-    }
-  }
 }
 </style>

package/packages/FormMaking/GenerateFormItem.vue

@@ -8,7 +8,7 @@
     :label="widget.options.hideLabel ? '' : widget.name"
     :label-width="labelWidth"
     :prop="pModel ? `${pModel}.${widget.model}` : widget.model"
-    :rules="widget.rules"
+    :rules="getRules"
     :ref="widget.model"
   >
     <component
@@ -31,9 +31,7 @@
 
 <script>
 import { deepClone } from "./util/index";
-import { VueEditor } from "vue2-editor";
 import compsData from "./custom/register";
-import FmUpload from "./Upload";
 
 export default {
   name: "generate-form-item",
@@ -46,12 +44,10 @@ export default {
     "config",
     "componentsData"
   ],
-  components: { FmUpload, VueEditor },
   data() {
     return {
       compsData: deepClone(compsData),
       dataModel: this.model
-      // dataModel: this.models[this.widget.model]
     };
   },
   watch: {
@@ -60,26 +56,7 @@ export default {
     },
     dataModel(val) {
       this.$emit("update:model", val);
-    },
-    // dataModel: {
-    //   deep: true,
-    //   handler(val) {
-    //     console.log("watch dataModel =>", val);
-    //     this.models[this.widget.model] = val;
-    //     this.$emit("update:models", {
-    //       ...this.models,
-    //       [this.widget.model]: val
-    //     });
-    //     this.$emit("input-change", val, this.widget.model);
-    //   }
-    // },
-    // models: {
-    //   deep: true,
-    //   handler(val) {
-    //     console.log("watch models =>", val);
-    //     this.dataModel = val[this.widget.model];
-    //   }
-    // }
+    }
   },
   computed: {
     labelWidth() {
@@ -88,13 +65,20 @@ export default {
         return `${this.widget.options.labelWidth}px`;
 
       return "";
+    },
+    getRules() {
+      return this.widget.options.required
+        ? [
+            ...this.widget.rules,
+            { required: true, message: "必需项", trigger: "change" }
+          ]
+        : this.widget.rules;
     }
   },
   created() {
     const proComponentsPath = {
       grid: "grid_pro",
       table: "table_pro",
-      tableH5: "tableH5_pro",
       list: "list_pro",
       tabs: "tabs_pro",
       blank: "blank_pro"

package/packages/FormMaking/WidgetFormItem.vue

@@ -61,7 +61,7 @@ export default {
     return {
       compsData: deepClone(compsData),
       selectWidget: this.select,
-      layoutElements: ["grid", "tabs", "table", "tableH5", "list", "alliance"]
+      layoutElements: ["grid", "tabs", "table", "list", "alliance"]
     };
   },
   watch: {
@@ -88,7 +88,6 @@ export default {
     const devComponentsPath = {
       grid: "grid_dev",
       table: "table_dev",
-      tableH5: "tableH5_dev",
       list: "list_dev",
       tabs: "tabs_dev",
       blank: "blank_dev"
@@ -128,12 +127,11 @@ export default {
         const key = `${Date.parse(new Date().toString())}_${Math.ceil(
           Math.random() * 99999
         )}`;
-
         item.key = key;
         item.model = `${item.type}_${key}`;
 
-        if (["table", "tableH5"].includes(item.type)) {
-          item.list.forEach(element => {
+        if (["table", "list"].includes(item.type)) {
+          item.options.columns.forEach(element => {
             initKey(element);
           });
         }
@@ -154,8 +152,12 @@ export default {
       };
       initKey(data);
 
-      this.widgetArray.splice(this.widgetIndex, 0, data);
-      this.selectWidget = data;
+      // 追加在最后
+      this.widgetArray.push(data);
+
+      // 追加在当前组件前
+      // this.widgetArray.splice(this.widgetIndex, 0, data);
+      // this.selectWidget = data;
     }
   }
 };

package/packages/FormMaking/WidgetGuide.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="widgetGuide">
+    <el-steps :active="step" finish-status="success" simple>
+      <el-step title="表单配置" icon="el-icon-s-operation" description="">
+      </el-step>
+      <el-step title="按钮配置" icon="el-icon-set-up" description=""></el-step>
+    </el-steps>
+    <div class="content">
+      <div v-show="step === 0">
+        <div>你好</div>
+        <div>让我们来了解一些基本信息</div>
+      </div>
+      <div v-show="step === 1"></div>
+    </div>
+    <div class="footer">
+      <div></div>
+      <div class="stepView">
+        <el-button
+          type="primary"
+          icon="el-icon-back"
+          size="small"
+          :disabled="step === 0"
+          @click="handleBack"
+          >上一步</el-button
+        >
+        <el-button type="primary" size="small" @click="handleNext"
+          >下一步<i class="el-icon-right el-icon--right"></i
+        ></el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: { visible: { type: Boolean, default: true } },
+  data() {
+    return {
+      show: this.visible,
+      step: 0
+    };
+  },
+  watch: {
+    visible(val) {
+      this.show = val;
+    },
+    show(val) {
+      this.$emit("update:visible", val);
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleBack() {
+      this.step--;
+    },
+    handleNext() {
+      this.step++;
+    },
+    handleClose() {
+      this.show = !this.show;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.widgetGuide {
+  width: 100%;
+  height: 100%;
+
+  .content {
+    height: calc(100% - 50px);
+  }
+  .footer {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+
+    .stepView {
+    }
+  }
+}
+</style>

package/packages/FormMaking/WidgetSelect.vue

@@ -7,7 +7,7 @@
         'grid',
         'tabs',
         'table',
-        'tableH5',
+        'list',
         'alliance'
       ].includes(widget.type)
     }"
@@ -74,7 +74,7 @@ export default {
         item.key = key;
         item.model = `${item.type}_${key}`;
 
-        if (["table", "tableH5"].includes(item.type)) {
+        if (["table", "list"].includes(item.type)) {
           item.list.forEach(element => {
             initKey(element);
           });

package/packages/FormMaking/WidgetTools.vue

@@ -176,8 +176,10 @@
           </div>
         </generate-form>
         <template slot="footer">
-          <el-button type="primary" @click="handleGetData">获取数据</el-button>
-          <el-button @click="handleReset">重置</el-button>
+          <el-button type="primary" size="small" @click="handleGetData"
+            >获取数据</el-button
+          >
+          <el-button size="small" @click="handleReset">重置</el-button>
         </template>
       </template>
       <template v-if="dialog.action === 'previewH5'">
@@ -198,8 +200,10 @@
           </generate-form>
         </div>
         <template slot="footer">
-          <el-button type="primary" @click="handleGetData">获取数据</el-button>
-          <el-button @click="handleReset">重置</el-button>
+          <el-button type="primary" size="small" @click="handleGetData"
+            >获取数据</el-button
+          >
+          <el-button size="small" @click="handleReset">重置</el-button>
         </template>
       </template>
     </th-dialog>
@@ -224,7 +228,6 @@
 <script>
 import { deepClone } from "./util/index";
 import * as XLSX from "xlsx/xlsx.mjs";
-import request from "./util/request";
 import generateCode from "./util/generateCode.js";
 import GenerateForm from "./GenerateForm";
 export default {
@@ -478,11 +481,11 @@ export default {
             item.options.columns.forEach(e => {
               initList(e.list);
             });
-          } else if (item.type === "table" || item.type === "tableH5") {
+          } else if (item.type === "table" || item.type === "list") {
             initList(item.options.columns);
           } else if (item.type === "workflow") {
             initList(item.options.buttons);
-          }  else if (item.options.remote?.open || item.options.remote?.api) {
+          } else if (item.options.remote?.open || item.options.remote?.api) {
             fieldsApi[item.model || item.name] = item.options.remote.api;
           }
         }

package/packages/FormMaking/config/index.js

@@ -1,4 +1,6 @@
 export default {
+  title: "FormMaking",
+  logo: '',
   version: "1.0.0",
   storageKeys: {
     oauthConfig: "_TH_OauthConfig"

package/packages/FormMaking/custom/config.js

@@ -254,7 +254,7 @@ export const basicComponents = [
     rules: []
   },
   {
-    name: "下拉选择框",
+    name: "下拉选择器",
     type: "select",
     icon: "icon-select",
     options: {
@@ -597,12 +597,12 @@ export const basicComponents = [
 
 export const advanceComponents = [
   {
-    name: "子表单",
+    name: "子表格",
     type: "table",
     icon: "th-icon-insertrowabove",
     options: {
       height: "",
-      defaultValue: "",
+      defaultValue: [],
       columns: [],
       customClass: "",
       labelWidth: 100,
@@ -628,41 +628,12 @@ export const advanceComponents = [
     events: {},
     rules: []
   },
-  {
-    name: "子表单H5",
-    type: "tableH5",
-    icon: "th-icon-insertrowleft",
-    options: {
-      defaultValue: "",
-      columns: [],
-      customClass: "",
-      labelWidth: 100,
-      isLabelWidth: false,
-      dataBind: true,
-      validatorCheck: false,
-      validator: "",
-      paging: false,
-      pageSize: 5,
-      tableColumn: false,
-      hidden: false,
-      hideLabel: false,
-      disabled: false,
-      required: false,
-      isAdd: true,
-      addButtonText: "新增",
-      isDelete: true,
-      deleteButtonText: "删除",
-      deleteIndex: 0 //  可删除的最小索引
-    },
-    events: {},
-    rules: []
-  },
   {
     name: "子列表",
     type: "list",
-    icon: "th-icon-orderedlist",
+    icon: "th-icon-insertrowleft",
     options: {
-      defaultValue: "",
+      defaultValue: [],
       columns: [],
       customClass: "",
       labelWidth: 100,
@@ -825,7 +796,7 @@ export const businessComponents = [
   {
     name: "描述列表",
     type: "descriptions",
-    icon: "th-icon-layout",
+    icon: "th-icon-detail",
     options: {
       border: false,
       column: 1,
@@ -925,7 +896,7 @@ export const businessComponents = [
   {
     name: "流程节点",
     type: "workflow",
-    icon: "th-icon-layout",
+    icon: "th-icon-apartment",
     options: {
       reverse: false,
       placement: "right",

package/packages/FormMaking/custom/configs/grid.vue

@@ -6,10 +6,12 @@
       </el-form-item>
 
       <el-form-item label="栅格间隔">
-        <el-input
-          type="number"
-          v-model.number="widget.options.gutter"
-        ></el-input>
+        <el-input-number
+          style="width:100%"
+          v-model="widget.options.gutter"
+          controls-position="right"
+          :min="0"
+        ></el-input-number>
       </el-form-item>
 
       <el-form-item label="列配置项">
@@ -28,7 +30,13 @@
             :key="index"
           >
             <i class="drag"><i class="iconfont icon-icon_bars"></i></i>
-            <el-input v-model.number="item.span" type="number"> </el-input>
+            <el-input-number
+              style="width:100%"
+              v-model="item.span"
+              controls-position="right"
+              :min="0"
+              :max="24"
+            ></el-input-number>
             <el-button
               class="delete"
               circle
@@ -39,12 +47,12 @@
             ></el-button>
           </div>
         </draggable>
-        <div style="margin-left: 22px;text-align: right;">
+        <div style="margin-left: 22px;">
           <el-button type="text" @click="handleAddOption">添加列</el-button>
         </div>
       </el-form-item>
 
-      <el-form-item label="水平排列方式">
+      <el-form-item label="水平排列">
         <el-select v-model="widget.options.justify">
           <el-option value="start" label="左对齐"></el-option>
           <el-option value="end" label="右对齐"></el-option>
@@ -54,7 +62,7 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="垂直排列方式">
+      <el-form-item label="垂直排列">
         <el-select v-model="widget.options.align">
           <el-option value="top" label="顶部对齐"></el-option>
           <el-option value="middle" label="居中"></el-option>
@@ -107,7 +115,7 @@ export default {
   display: flex;
   align-items: center;
 
-  .el-input {
+  .el-input-number {
     margin: 0 5px;
   }