tianheng-ui 0.1.69 → 0.1.71

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.1.69",
+  "version": "0.1.71",
   "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
@@ -110,7 +110,7 @@ export default {
     this.showForm = true;
   },
   methods: {
-    generateModle(genList, modelObj, pModel) {
+    generateModle(genList, modelObj) {
       if (!genList) return;
       genList.map(item => {
         if (item.type === "grid") {
@@ -134,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);
         }
       });
@@ -172,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);
     },
     // 获取组件的远端数据
@@ -386,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>
@@ -477,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/custom/config.js

@@ -602,7 +602,7 @@ export const advanceComponents = [
     icon: "th-icon-insertrowabove",
     options: {
       height: "",
-      defaultValue: "",
+      defaultValue: [],
       columns: [],
       customClass: "",
       labelWidth: 100,
@@ -628,39 +628,10 @@ 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: [],
       columns: [],

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

@@ -25,12 +25,17 @@
       <el-form-item label-width="0">
         <div class="config-header">
           <span class="title">默认值</span>
-          <span class="value" @click="handleAddData">添加数据</span>
+          <div class="value">
+            <el-button type="text" @click="handleAddData">添加数据</el-button>
+            <el-button type="text" @click="widget.options.defaultValue = []"
+              >重置</el-button
+            >
+          </div>
         </div>
-        <code-editor
+        <th-code-editor
           v-model="widget.options.defaultValue"
           language="json"
-        ></code-editor>
+        ></th-code-editor>
       </el-form-item>
 
       <el-form-item label="新增按钮">
@@ -64,18 +69,15 @@
 <script>
 import Draggable from "vuedraggable";
 import { configComponent } from "../mixins";
-import CodeEditor from "ui/CodeEditor/index.vue";
 export default {
   components: {
-    Draggable,
-    CodeEditor
+    Draggable
   },
-  props: {},
   mixins: [configComponent],
+  props: {},
   mounted() {},
   methods: {
     handleAddData() {
-      let defaultValue = JSON.parse(this.widget.options.defaultValue || "[]");
       let dic = {};
       this.widget.options.columns.forEach(item => {
         if (item.type === "grid") {
@@ -90,11 +92,8 @@ export default {
           dic[item.model] = item.options.defaultValue;
         }
       });
-      defaultValue.push(dic);
-      this.widget.options.defaultValue = JSON.stringify(defaultValue, null, 2);
+      this.widget.options.defaultValue.push(dic);
     }
   }
 };
 </script>
-
-<style lang="scss" scoped></style>

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

@@ -76,15 +76,12 @@
           >
             <div slot="prepend">标签</div>
           </el-input>
-          <el-input
-            style="margin-bottom:5px;"
-            v-model="widget.options.remote.props.children"
-          >
+          <el-input v-model="widget.options.remote.props.children">
             <div slot="prepend">子选项</div>
           </el-input>
         </template>
         <template v-else>
-          <el-radio-group style="width: 100%;" v-model="widget.options.defaultValue">
+          <el-radio-group v-model="widget.options.defaultValue">
             <draggable
               :list="widget.options.options"
               v-bind="{

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

@@ -20,15 +20,20 @@
         </div>
       </el-form-item>
 
-      <el-form-item>
-        <div class="config-header" slot="label">
+      <el-form-item label-width="0">
+        <div class="config-header">
           <span class="title">默认值</span>
-          <span class="value" @click="handleAddData">新增一组</span>
+          <div class="value">
+            <el-button type="text" @click="handleAddData">添加数据</el-button>
+            <el-button type="text" @click="widget.options.defaultValue = []"
+              >重置</el-button
+            >
+          </div>
         </div>
-        <code-editor
+        <th-code-editor
           v-model="widget.options.defaultValue"
           language="json"
-        ></code-editor>
+        ></th-code-editor>
       </el-form-item>
 
       <!-- <el-form-item label="高度">
@@ -76,9 +81,8 @@ export default {
   mounted() {},
   methods: {
     handleAddData() {
-      let defaultValue = JSON.parse(this.widget.options.defaultValue || "[]");
       let dic = {};
-      this.widget.list.forEach(item => {
+      this.widget.options.columns.forEach(item => {
         if (item.type === "grid") {
           for (let i = 0; i < item.options.columns.length; i++) {
             const element = item.options.columns[i];
@@ -91,8 +95,7 @@ export default {
           dic[item.model] = item.options.defaultValue;
         }
       });
-      defaultValue.push(dic);
-      this.widget.options.defaultValue = JSON.stringify(defaultValue, null, 2);
+      this.widget.options.defaultValue.push(dic);
     }
   }
 };