tianheng-ui 0.1.10 → 0.1.11

package/packages/FormMaking/GenerateFormItemH5.vue

@@ -502,7 +502,7 @@
       </el-table>
     </template>
 
-    <template v-if="widget.type == 'table_h5'">
+    <template v-if="widget.type == 'tableH5'">
       <div class="tableH5">
         <div
           class="tableH5-item"
@@ -567,7 +567,7 @@
         :align="widget.options.align"
       >
         <el-col
-          v-for="(column, columnIndex) in widget.columns"
+          v-for="(column, columnIndex) in widget.options.columns"
           :key="columnIndex"
           :span="column.span"
         >
@@ -593,7 +593,7 @@
     <template v-if="widget.type == 'tabs'">
       <el-tabs v-model="widget.options.defaultValue">
         <el-tab-pane
-          v-for="(column, columnIndex) in widget.tabs"
+          v-for="(column, columnIndex) in widget.options.columns"
           :key="`tabs_${columnIndex}`"
           :label="column.label"
           :name="column.value"
@@ -750,8 +750,8 @@ export default {
       let dic = {};
       this.widget.list.forEach(item => {
         if (item.type === "grid") {
-          for (let i = 0; i < item.columns.length; i++) {
-            const element = item.columns[i];
+          for (let i = 0; i < item.options.columns.length; i++) {
+            const element = item.options.columns[i];
             for (let j = 0; j < element.list.length; j++) {
               const element2 = element.list[j];
               dic[element2.model] = element2.options.defaultValue;

package/packages/FormMaking/Upload/index.vue

@@ -201,7 +201,6 @@ export default {
   },
   methods: {
     handleChange() {
-      console.log(this.$refs.uploadInput.files);
       const files = this.$refs.uploadInput.files;
 
       for (let i = 0; i < files.length; i++) {

package/packages/FormMaking/WidgetConfig.vue

@@ -1,5 +1,33 @@
 <template>
   <div class="widgetConfig" v-if="show">
+    <div style="line-height: 30px;"></div>
+    <div class="flexView">
+      <div style="width:100px">类型切换</div>
+      <el-select
+        :value="data.type"
+        style="width:100%;"
+        size="small"
+        placeholder="请选择类型"
+        @change="handleTypeChange"
+      >
+        <el-option
+          v-for="item in Object.values(compsData)"
+          :key="item.type"
+          :label="item.name"
+          :value="item.type"
+        >
+        </el-option>
+      </el-select>
+      <el-tooltip
+        style="padding-left:10px;color:#F56C6C;"
+        effect="dark"
+        content="切换类型会导致该组件配置信息重置，请谨慎使用！"
+        placement="top"
+      >
+        <i class="el-icon-warning"></i>
+      </el-tooltip>
+    </div>
+
     <component
       :widget="data"
       :config="config"
@@ -108,10 +136,7 @@
 
 <script>
 import compsData from "./custom/register";
-import ThDialog from "ui/Dialog/index.vue";
-import ThCodeEditor from "ui/CodeEditor/index.vue";
 export default {
-  components: { ThDialog, ThCodeEditor },
   props: {
     data: {
       type: Object,
@@ -175,6 +200,34 @@ export default {
       ]
     };
   },
+  // watch: {
+  //   "data.options.isRange": function(val) {
+  //     if (typeof val !== "undefined") {
+  //       if (val) {
+  //         this.data.options.defaultValue = null;
+  //       } else {
+  //         if (Object.keys(this.data.options).indexOf("defaultValue") >= 0)
+  //           this.data.options.defaultValue = "";
+  //       }
+  //     }
+  //   },
+  //   "data.options.required": function(val) {
+  //     this.validateRequired(val);
+  //   },
+  //   "data.options.dataType": function(val) {
+  //     this.validateDataType(val);
+  //   },
+  //   "data.options.pattern": function(val) {
+  //     this.valiatePattern(val);
+  //   },
+  //   "data.name": function(val) {
+  //     if (this.data.options) {
+  //       this.validateRequired(this.data.options.required);
+  //       this.validateDataType(this.data.options.dataType);
+  //       this.valiatePattern(this.data.options.pattern);
+  //     }
+  //   }
+  // },
   computed: {
     show() {
       if (this.data && Object.keys(this.data).length > 0) {
@@ -310,34 +363,10 @@ export default {
           break;
         }
       }
-    }
-  },
-  watch: {
-    "data.options.isRange": function(val) {
-      if (typeof val !== "undefined") {
-        if (val) {
-          this.data.options.defaultValue = null;
-        } else {
-          if (Object.keys(this.data.options).indexOf("defaultValue") >= 0)
-            this.data.options.defaultValue = "";
-        }
-      }
     },
-    "data.options.required": function(val) {
-      this.validateRequired(val);
-    },
-    "data.options.dataType": function(val) {
-      this.validateDataType(val);
-    },
-    "data.options.pattern": function(val) {
-      this.valiatePattern(val);
-    },
-    "data.name": function(val) {
-      if (this.data.options) {
-        this.validateRequired(this.data.options.required);
-        this.validateDataType(this.data.options.dataType);
-        this.valiatePattern(this.data.options.pattern);
-      }
+    handleTypeChange(val) {
+      const config = JSON.parse(JSON.stringify(this.compsData[val].config));
+      this.$emit("update", config);
     }
   }
 };
@@ -464,5 +493,12 @@ export default {
       margin: 0 5px;
     }
   }
+  .flexView {
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #e1e1e1;
+  }
 }
 </style>

package/packages/FormMaking/WidgetForm.vue

@@ -1,8 +1,5 @@
 <template>
   <div class="widget-form-container" ref="formContainer">
-    <!-- <div v-if="data.list.length == 0" class="form-empty">
-      从左侧拖拽来添加字段
-    </div> -->
     <th-empty
       class="form-empty"
       v-if="data.list.length == 0"
@@ -10,7 +7,7 @@
       description="从左侧拖拽来添加字段"
     ></th-empty>
     <el-form
-      :class="{ 'form-hideLabel': data.config.hideLabel }"
+      :class="{ isHideFormLabel: data.config.hideLabel }"
       style="margin: 0 auto;padding:5px;height:100%;"
       :style="{ width: formWidth }"
       :size="data.config.size"
@@ -20,7 +17,7 @@
       :disabled="data.config.disabled"
     >
       <draggable
-        style="height:100%"
+        class="draggable"
         v-model="data.list"
         v-bind="{
           group: 'people',
@@ -28,16 +25,15 @@
           animation: 200,
           handle: '.drag-widget'
         }"
-        @end="handleMoveEnd"
         @add="handleWidgetAdd"
       >
-        <transition-group name="fade" tag="div" class="widget-form-list">
+        <transition-group name="fade" tag="div" class="draggable-list">
           <widget-form-item
             v-for="(element, elementIndex) in widgetList"
             :key="element.key"
             :widget="element"
+            :widgetArray="data.list"
             :widgetIndex="elementIndex"
-            :widgetArray="data"
             :config="data.config"
             :select.sync="selectWidget"
           ></widget-form-item>
@@ -49,11 +45,10 @@
 
 <script>
 import Draggable from "vuedraggable";
-import WidgetFormItem from "./WidgetFormItem";
-import ThEmpty from "ui/Empty/index.vue";
+import WidgetFormItem from "./WidgetFormItem.vue";
 
 export default {
-  components: { Draggable, WidgetFormItem, ThEmpty },
+  components: { Draggable, WidgetFormItem },
   props: ["data", "select", "client"],
   data() {
     return {
@@ -99,7 +94,6 @@ export default {
     };
   },
   methods: {
-    handleMoveEnd({ newIndex, oldIndex }) {},
     handleSelectWidget(index) {
       this.selectWidget = this.data.list[index];
     },
@@ -113,45 +107,10 @@ export default {
       let dic = JSON.parse(JSON.stringify(this.data.list[newIndex]));
       dic.key = key;
       dic.model = dic.type + "_" + key;
-      dic.rules = [];
+      // dic.rules = [{ id: new Date().getTime(), patternStr: "", pattern: "" }];
 
       this.$set(this.data.list, newIndex, dic);
 
-      // if (
-      //   this.data.list[newIndex].type === "radio" ||
-      //   this.data.list[newIndex].type === "checkbox" ||
-      //   this.data.list[newIndex].type === "select"
-      // ) {
-      //   this.$set(this.data.list, newIndex, {
-      //     ...this.data.list[newIndex],
-      //     options: {
-      //       ...this.data.list[newIndex].options,
-      //       options: this.data.list[newIndex].options.options.map(item => ({
-      //         ...item
-      //       }))
-      //     }
-      //   });
-      // }
-
-      // if (this.data.list[newIndex].type === "grid") {
-      // this.$set(
-      //   this.data.list,
-      //   newIndex,
-      //   JSON.parse(JSON.stringify(this.data.list[newIndex]))
-      // );
-      // }
-
-      // if (this.data.list[newIndex].type === "tabs") {
-      //   this.$set(this.data.list, newIndex, JSON.parse(JSON.stringify(this.data.list[newIndex])));
-      // }
-
-      // if (this.data.list[newIndex].type === "table") {
-      //   this.$set(this.data.list, newIndex, {
-      //     ...this.data.list[newIndex],
-      //     list: this.data.list[newIndex].list.map(item => ({ ...item }))
-      //   });
-      // }
-
       this.selectWidget = this.data.list[newIndex];
     }
   }

package/packages/FormMaking/WidgetFormItem.vue

@@ -1,11 +1,10 @@
 <template>
   <el-form-item
-    class="widget-view"
+    class="widgetFormItem"
     :class="{
       active: selectWidget.model == widget.model,
-      is_req: widget.options.required,
-      hideLabel: widget.options.hideLabel,
-      'widget-col': ['grid', 'tabs', 'table', 'table_h5', 'alliance'].includes(
+      isRequired: widget.options.required,
+      isLayout: ['grid', 'tabs', 'table', 'tableH5', 'alliance'].includes(
         widget.type
       ),
       [`widget-form-list-${widget.type}`]: true,
@@ -14,10 +13,11 @@
     :label="widget.options.hideLabel ? '' : widget.name"
     :label-width="labelWidth"
     :ref="widget.model"
-    @click.native.stop="handleSelectWidget"
+    @click.native.stop="selectWidget = widget"
   >
     <component
       :is="compsData[widget.type].content"
+      :value.sync="widget.options.defaultValue"
       :widget="widget"
       :config="config"
       :select.sync="selectWidget"
@@ -32,20 +32,14 @@
           'grid',
           'tabs',
           'table',
-          'table_h5',
+          'tableH5',
           'alliance'
         ].includes(widget.type)
       }"
     >
       <div class="actions">
-        <i
-          class="iconfont icon-icon_clone"
-          @click.stop="handleWidgetClone(widgetIndex)"
-        ></i>
-        <i
-          class="iconfont icon-trash"
-          @click.stop="handleWidgetDelete(widgetIndex)"
-        ></i>
+        <i class="iconfont icon-icon_clone" @click.stop="handleWidgetClone"></i>
+        <i class="iconfont icon-trash" @click.stop="handleWidgetDelete"></i>
       </div>
 
       <div class="drag">
@@ -90,59 +84,69 @@ export default {
     }
   },
   created() {
+    const devComponentsPath = {
+      grid: "grid_dev",
+      table: "table_dev",
+      tableH5: "tableH5_dev",
+      tabs: "tabs_dev",
+      blank: "blank_dev"
+    };
     const keys = Object.keys(this.compsData);
     for (const key of keys) {
-      this.compsData[key].content = require(`./custom/items/${key}`).default;
+      if (devComponentsPath[key])
+        this.compsData[
+          key
+        ].content = require(`./custom/items/${devComponentsPath[key]}`).default;
+      else
+        this.compsData[key].content = require(`./custom/items/${key}`).default;
     }
   },
   mounted() {},
   methods: {
-    handleSelectWidget() {
-      this.selectWidget = this.widget;
-    },
-    handleWidgetDelete(index) {
-      if (this.widgetArray.list.length - 1 === index) {
-        if (index === 0) {
+    handleWidgetDelete() {
+      if (this.widgetArray.length - 1 === this.widgetIndex) {
+        if (this.widgetIndex === 0) {
           this.selectWidget = {};
         } else {
-          this.selectWidget = this.widgetArray.list[index - 1];
+          this.selectWidget = this.widgetArray[this.widgetIndex - 1];
         }
       } else {
-        this.selectWidget = this.widgetArray.list[index + 1];
+        this.selectWidget = this.widgetArray[this.widgetIndex + 1];
       }
 
       this.$nextTick(() => {
-        this.widgetArray.list.splice(index, 1);
+        this.widgetArray.splice(this.widgetIndex, 1);
       });
     },
 
-    handleWidgetClone(index) {
-      const data = JSON.parse(JSON.stringify(this.widgetArray.list[index]));
+    handleWidgetClone() {
+      const data = JSON.parse(
+        JSON.stringify(this.widgetArray[this.widgetIndex])
+      );
 
       const initKey = item => {
-        const key =
-          Date.parse(new Date().toString()) +
-          "_" +
-          Math.ceil(Math.random() * 99999);
+        const key = `${Date.parse(new Date().toString())}_${Math.ceil(
+          Math.random() * 99999
+        )}`;
 
-        item.options.remoteFunc = `func__${key}`;
         item.key = key;
-        item.model = item.type + "_" + key;
+        item.options.remoteFunc = `func__${key}`;
+        item.model = `${item.type}_${key}`;
 
-        if (["table", "table_h5"].includes(item.type)) {
+        if (["table", "tableH5"].includes(item.type)) {
           item.list.forEach(element => {
             initKey(element);
           });
         }
         if (["tabs"].includes(item.type)) {
-          item.tabs.forEach(tab => {
+          item.options.columns.forEach(tab => {
             tab.forEach(element => {
               initKey(element);
             });
           });
         }
         if (["grid"].includes(item.type)) {
-          item.columns.forEach(column => {
+          item.options.columns.forEach(column => {
             column.list.forEach(element => {
               initKey(element);
             });
@@ -151,36 +155,8 @@ export default {
       };
       initKey(data);
 
-      // let cloneData = {
-      //   ...JSON.parse(JSON.stringify(this.widgetArray.list[index])),
-      //   options: {
-      //     ...this.widgetArray.list[index].options,
-      //     remoteFunc: "func_" + key
-      //   },
-      //   key,
-      //   model: this.widgetArray.list[index].type + "_" + key,
-      //   rules: this.widgetArray.list[index].rules || []
-      // };
-
-      // if (
-      //   this.widgetArray.list[index].type === "radio" ||
-      //   this.widgetArray.list[index].type === "checkbox" ||
-      //   this.widgetArray.list[index].type === "select"
-      // ) {
-      //   cloneData = {
-      //     ...cloneData,
-      //     options: {
-      //       ...cloneData.options,
-      //       options: cloneData.options.options.map(item => ({ ...item }))
-      //     }
-      //   };
-      // }
-
-      this.widgetArray.list.splice(index, 0, data);
-
-      this.$nextTick(() => {
-        this.selectWidget = this.widgetArray.list[index + 1];
-      });
+      this.widgetArray.splice(this.widgetIndex, 0, data);
+      this.selectWidget = data;
     }
   }
 };

package/packages/FormMaking/WidgetSelect.vue

@@ -0,0 +1,160 @@
+<template>
+  <div
+    v-if="selectWidget.model == widget.model"
+    class="widget-actions"
+    :class="{
+      'widget-actions_layout': [
+        'grid',
+        'tabs',
+        'table',
+        'tableH5',
+        'alliance'
+      ].includes(widget.type)
+    }"
+  >
+    <div class="actions">
+      <i class="iconfont icon-icon_clone" @click.stop="handleWidgetClone"></i>
+      <i class="iconfont icon-trash" @click.stop="handleWidgetDelete"></i>
+    </div>
+
+    <div class="drag">
+      <i class="iconfont icon-drag drag-widget"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["widgetArray", "widgetIndex", "widget", "select"],
+  data() {
+    return {
+      selectWidget: this.select
+    };
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit("update:select", val);
+      },
+      deep: true
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleWidgetDelete() {
+      if (this.widgetArray.length - 1 === this.widgetIndex) {
+        if (this.widgetIndex === 0) {
+          this.selectWidget = {};
+        } else {
+          this.selectWidget = this.widgetArray[this.widgetIndex - 1];
+        }
+      } else {
+        this.selectWidget = this.widgetArray[this.widgetIndex + 1];
+      }
+
+      this.$nextTick(() => {
+        this.widgetArray.splice(this.widgetIndex, 1);
+      });
+    },
+
+    handleWidgetClone() {
+      const data = JSON.parse(
+        JSON.stringify(this.widgetArray[this.widgetIndex])
+      );
+
+      const initKey = item => {
+        const key = `${Date.parse(new Date().toString())}_${Math.ceil(
+          Math.random() * 99999
+        )}`;
+
+        item.key = key;
+        item.options.remoteFunc = `func__${key}`;
+        item.model = `${item.type}_${key}`;
+
+        if (["table", "tableH5"].includes(item.type)) {
+          item.list.forEach(element => {
+            initKey(element);
+          });
+        }
+        if (["tabs"].includes(item.type)) {
+          item.options.columns.forEach(tab => {
+            tab.forEach(element => {
+              initKey(element);
+            });
+          });
+        }
+        if (["grid"].includes(item.type)) {
+          item.options.columns.forEach(column => {
+            column.list.forEach(element => {
+              initKey(element);
+            });
+          });
+        }
+      };
+      initKey(data);
+
+      this.widgetArray.splice(this.widgetIndex, 0, data);
+      this.selectWidget = data;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+$primary-color: #409eff;
+$primary-background-color: #ecf5ff;
+.widget-actions {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  .actions {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 28px;
+    line-height: 28px;
+    background: $primary-color;
+    z-index: 9;
+
+    i {
+      font-size: 14px;
+      color: #fff;
+      margin: 0 5px;
+      cursor: pointer;
+    }
+  }
+
+  .drag {
+    position: absolute;
+    left: -2px;
+    bottom: -2px;
+    height: 28px;
+    line-height: 28px;
+    background: $primary-color;
+    z-index: 9;
+
+    i {
+      font-size: 14px;
+      color: #fff;
+      margin: 0 5px;
+      cursor: move;
+    }
+  }
+}
+
+.widget-actions_layout {
+  .actions {
+    background: #e6a23c;
+  }
+
+  .drag {
+    background: #e6a23c;
+  }
+}
+</style>