tianheng-ui 0.1.10 → 0.1.12

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;
@@ -774,7 +774,7 @@ export default {
       for (let i = 0; i < eventScript.length; i++) {
         const element = eventScript[i];
         if (element.key === key) {
-          const func = `(item,value)=>{${element.func}}`;
+          const func = `(item,value)=>{${element.value}}`;
           eval(func)(this.widget, this.dataModel);
         }
       }

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,9 +1,36 @@
 <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"
-      :remoteApis="remoteApis"
       :is="compsData[data.type].content"
       @events-show="handleEventDialogShow"
       @events-edit="handleEventsCollapseClick"
@@ -17,9 +44,13 @@
     >
       <div class="eventsSetting">
         <div class="list">
-          <div class="list-header" @click="handleAddEvent">
+          <div class="list-header">
             <div>动作库</div>
-            <el-button type="text" icon="el-icon-plus" size="mini"
+            <el-button
+              type="text"
+              icon="el-icon-plus"
+              size="mini"
+              @click="handleAddEvent"
               >添加</el-button
             >
           </div>
@@ -30,9 +61,9 @@
             @click="eventsDialog.active = item"
           >
             <div class="list-item-title">Function</div>
-            <div class="list-item-value">{{ item.name }}</div>
+            <div class="list-item-value">{{ item.label }}</div>
             <el-popconfirm
-              :title="`是否确定删除方法 ${item.name}`"
+              :title="`是否确定删除方法 ${item.label}`"
               confirm-button-text="删除"
               confirm-button-type="danger"
               @confirm="handleEventDialogDelete(item, index)"
@@ -45,12 +76,12 @@
           <div>
             <span>Function Name</span>
             <el-input
-              v-model="eventsDialog.active.name"
+              v-model="eventsDialog.active.label"
               placeholder="请输入动作名称"
               size="small"
               :disabled="
-                eventsDialog.active.name === 'mounted' ||
-                  eventsDialog.active.name === 'refresh'
+                eventsDialog.active.label === 'mounted' ||
+                  eventsDialog.active.label === 'refresh'
               "
             ></el-input>
           </div>
@@ -58,8 +89,8 @@
             <div>
               function(
               {{
-                eventsDialog.active.name !== "mounted" &&
-                eventsDialog.active.name !== "refresh"
+                eventsDialog.active.label !== "mounted" &&
+                eventsDialog.active.label !== "refresh"
                   ? "item,value"
                   : ""
               }}
@@ -76,17 +107,21 @@
                   slot="reference"
                   class="el-icon-question"
                 ></i>
-                <div class="functions">
-                  <div>setData</div>
-                  <div>getData</div>
-                  <div>display</div>
-                  <div>hide</div>
+                <div>
+                  <div
+                    style="display: flex;justify-content: space-between;"
+                    v-for="item in aceCompletions"
+                    :key="item.caption"
+                  >
+                    <div>{{ item.caption }}</div>
+                    <div>{{ item.meta }}</div>
+                  </div>
                 </div>
               </el-popover>
             </div>
             <th-code-editor
               style="height:calc(100% - 48px)"
-              v-model="eventsDialog.active.func"
+              v-model="eventsDialog.active.value"
               :completions="aceCompletions"
               ref="codeEditor"
             ></th-code-editor>
@@ -108,10 +143,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,
@@ -119,12 +151,6 @@ export default {
         return {};
       }
     },
-    remoteApis: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    },
     config: {
       type: Object,
       default: () => {
@@ -171,10 +197,44 @@ export default {
           caption: "hide",
           value: "hide([ ])",
           score: 1
+        },
+        {
+          meta: "跳转页面",
+          caption: "goPage",
+          value: "goPage({path:'',query:{}})",
+          score: 1
         }
       ]
     };
   },
+  // 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) {
@@ -271,9 +331,9 @@ export default {
     handleAddEvent() {
       const key = new Date().getTime();
       const dic = {
-        key: key,
-        name: key,
-        func: ""
+        id: key,
+        label: key,
+        value: ""
       };
       this.eventsDialog.eventScript.push(dic);
       this.eventsDialog.active = dic;
@@ -310,56 +370,17 @@ 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);
     }
   }
 };
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .widgetConfig {
-  .remoteApis {
-    width: 100%;
-    margin-bottom: 6px;
-
-    /deep/ .el-input--prefix .el-input__inner {
-      padding-left: 85px;
-    }
-
-    /deep/ .el-input__prefix {
-      left: 0;
-      width: 75px;
-      color: #999;
-    }
-  }
-
   .el-dialog__body {
     padding: 20px;
   }
@@ -424,7 +445,7 @@ export default {
         margin-bottom: 20px;
         padding-left: 10px;
 
-        /deep/ .el-input {
+        .el-input {
           flex: 1;
           margin-left: 10px;
         }
@@ -454,15 +475,17 @@ export default {
   .selectableRange {
     width: 100%;
 
-    /deep/ .el-range-separator {
+    .el-range-separator {
       width: 20px;
     }
   }
 
-  .functions {
-    span {
-      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;
     }
   }
 };