tianheng-ui 0.1.40 → 0.1.41

package/package.json

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

package/packages/FormMaking/GenerateFormItem.vue

@@ -85,17 +85,16 @@ export default {
       grid: "grid_pro",
       table: "table_pro",
       tableH5: "tableH5_pro",
+      list: "list_pro",
       tabs: "tabs_pro",
       blank: "blank_pro"
     };
     const keys = Object.keys(this.compsData);
     for (const key of keys) {
+      const element = this.compsData[key];
       if (proComponentsPath[key])
-        this.compsData[
-          key
-        ].content = require(`./custom/items/${proComponentsPath[key]}`).default;
-      else
-        this.compsData[key].content = require(`./custom/items/${key}`).default;
+        element.content = require(`./custom/items/${proComponentsPath[key]}`).default;
+      else element.content = require(`./custom/items/${key}`).default;
     }
   },
   mounted() {

package/packages/FormMaking/GenerateFormItemH5.vue

@@ -507,11 +507,11 @@
         <div
           class="tableH5-item"
           v-for="(column, columnIndex) in dataModel"
-          :key="`table_h5_${columnIndex}`"
+          :key="`tableH5_${columnIndex}`"
         >
           <div
             v-for="(element, elementIndex) in widget.list"
-            :key="`table_h5_${columnIndex}_${element.key}`"
+            :key="`tableH5_${columnIndex}_${element.key}`"
           >
             <genetate-form-item
               style="flex:1;"

package/packages/FormMaking/WidgetConfig.vue

@@ -3,9 +3,9 @@
     <div class="tabs th-sticky_top">
       <div
         v-for="(item, index) in tabsMenus"
-        :key="index"
         class="tabs-item"
         :class="{ 'tabs-item__active': activeTab.value === item.value }"
+        :key="index"
         @click="activeTab = item"
       >
         {{ item.title }}
@@ -133,7 +133,7 @@
           </el-collapse-item>
         </el-collapse>
       </el-form>
-      <th-empty v-else description="请左侧拖拽来添加字段"></th-empty>
+      <th-empty v-else description="请从左侧拖拽来添加字段"></th-empty>
     </div>
     <div v-if="activeTab.value === 'form'">
       <el-form
@@ -267,11 +267,24 @@
       </el-form>
     </div>
     <div v-if="activeTab.value === 'css'">
-      <th-empty description="开发中，敬请期待..."></th-empty>
+      <el-form
+        :model="config"
+        label-position="left"
+        label-width="80px"
+        size="small"
+        :rules="formRules"
+        ref="formRef"
+      >
+        <el-collapse v-model="collapseValue">
+          <el-collapse-item title="form 样式" name="group-style_form">
+          </el-collapse-item>
+        </el-collapse>
+      </el-form>
+      <!-- <th-empty description="开发中，敬请期待..."></th-empty> -->
     </div>
 
     <th-dialog
-      v-model="eventsDialog.visible"
+      v-model="dialog.show"
       title="动作设置"
       :modal-append-to-body="false"
       @on-fullscreen="$refs.codeEditor && $refs.codeEditor.resize()"
@@ -289,14 +302,14 @@
             >
           </div>
           <div
-            v-for="(item, index) in eventsDialog.eventScript"
+            v-for="(item, index) in dialog.data"
             class="list-item th-is_hover"
             :class="{
               'th-is_active':
-                eventsDialog.active && eventsDialog.active.label === item.label
+                dialog.active && dialog.active.label === item.label
             }"
             :key="item.key"
-            @click="eventsDialog.active = item"
+            @click="dialog.active = item"
           >
             <div class="list-item-title">Function</div>
             <div class="list-item-value">{{ item.label }}</div>
@@ -310,16 +323,16 @@
             </el-popconfirm>
           </div>
         </div>
-        <div class="detail th-fiex_content" v-if="eventsDialog.active">
+        <div class="detail th-fiex_content" v-if="dialog.active">
           <div>
             <span>Function Name</span>
             <el-input
-              v-model="eventsDialog.active.label"
+              v-model="dialog.active.label"
               placeholder="请输入动作名称"
               size="small"
               :disabled="
-                eventsDialog.active.label === 'mounted' ||
-                  eventsDialog.active.label === 'refresh'
+                dialog.active.label === 'mounted' ||
+                  dialog.active.label === 'refresh'
               "
             ></el-input>
           </div>
@@ -327,8 +340,8 @@
             <div>
               function(
               {{
-                eventsDialog.active.label !== "mounted" &&
-                eventsDialog.active.label !== "refresh"
+                dialog.active.label !== "mounted" &&
+                dialog.active.label !== "refresh"
                   ? "item,value"
                   : ""
               }}
@@ -359,7 +372,7 @@
             </div>
             <th-code-editor
               style="height:calc(100% - 48px)"
-              v-model="eventsDialog.active.value"
+              v-model="dialog.active.value"
               :completions="aceCompletions"
               ref="codeEditor"
             ></th-code-editor>
@@ -368,7 +381,7 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button size="small" @click="eventsDialog.visible = false"
+        <el-button size="small" @click="dialog.show = false"
           >取 消</el-button
         >
         <el-button type="primary" size="small" @click="handleEventDialogAffirm"
@@ -408,17 +421,20 @@ export default {
         { title: "样式设置", value: "css" }
       ],
       activeTab: {},
-      validator: {
-        type: null,
-        required: null,
-        pattern: null,
-        range: null,
-        length: null
-      },
-      eventsDialog: {
-        visible: false,
-        eventScript: [],
-        active: null
+      collapseValue: [
+        "group-general",
+        "group-element",
+        "group-action",
+        "group-form",
+        "group-resultData",
+        "group-label",
+        "group-attributes",
+        "group-style_form"
+      ],
+      dialog: {
+        show: false,
+        data: [],
+        action: null
       },
       aceCompletions: [
         {
@@ -452,15 +468,6 @@ export default {
           score: 1
         }
       ],
-      collapseValue: [
-        "group-general",
-        "group-element",
-        "group-action",
-        "group-form",
-        "group-resultData",
-        "group-label",
-        "group-attributes"
-      ],
       formRules: {
         model: [
           { required: true, message: "请填选组件字段", trigger: "change" }
@@ -483,9 +490,9 @@ export default {
   },
   methods: {
     handleEventDialogShow() {
-      this.eventsDialog = {
-        visible: true,
-        eventScript: deepClone(this.config.eventScript),
+      this.dialog = {
+        show: true,
+        data: deepClone(this.config.eventScript),
         active: null
       };
     },
@@ -496,34 +503,34 @@ export default {
         label: key,
         value: ""
       };
-      this.eventsDialog.eventScript.push(dic);
-      this.eventsDialog.active = dic;
+      this.dialog.data.push(dic);
+      this.dialog.active = dic;
     },
     handleEventDialogAffirm() {
-      this.config.eventScript = this.eventsDialog.eventScript;
-      this.eventsDialog = {
-        visible: false,
-        eventScript: [],
+      this.config.eventScript = this.dialog.data;
+      this.dialog = {
+        show: false,
+        data: [],
         active: null
       };
     },
     handleEventDialogDelete(item, index) {
       if (
-        this.eventsDialog.active &&
-        item.key === this.eventsDialog.active.key
+        this.dialog.active &&
+        item.key === this.dialog.active.key
       ) {
-        this.eventsDialog.active = null;
+        this.dialog.active = null;
       }
-      this.eventsDialog.eventScript.splice(index, 1);
+      this.dialog.data.splice(index, 1);
     },
     handleEventsCollapseClick(eventKey) {
       const eventScript = deepClone(this.config.eventScript);
       for (let i = 0; i < eventScript.length; i++) {
         const event = eventScript[i];
-        if (event.key === eventKey) {
-          this.eventsDialog = {
-            visible: true,
-            eventScript: eventScript,
+        if (event.id === eventKey) {
+          this.dialog = {
+            show: true,
+            data: eventScript,
             active: event
           };
           break;

package/packages/FormMaking/WidgetFormItem.vue

@@ -4,9 +4,7 @@
     :class="{
       active: selectWidget.model == widget.model,
       isRequired: widget.options.required,
-      isLayout: ['grid', 'tabs', 'table', 'tableH5', 'alliance'].includes(
-        widget.type
-      ),
+      isLayout: layoutElements.includes(widget.type),
       [`widget-form-list-${widget.type}`]: true,
       [widget.model]: true
     }"
@@ -28,13 +26,7 @@
       v-if="selectWidget.model == widget.model"
       class="widget-actions"
       :class="{
-        'widget-actions-col': [
-          'grid',
-          'tabs',
-          'table',
-          'tableH5',
-          'alliance'
-        ].includes(widget.type)
+        'widget-actions-col': layoutElements.includes(widget.type)
       }"
     >
       <div class="actions">
@@ -61,7 +53,8 @@ export default {
   data() {
     return {
       compsData: deepClone(compsData),
-      selectWidget: this.select
+      selectWidget: this.select,
+      layoutElements: ["grid", "tabs", "table", "tableH5", "list", "alliance"]
     };
   },
   watch: {
@@ -89,17 +82,16 @@ export default {
       grid: "grid_dev",
       table: "table_dev",
       tableH5: "tableH5_dev",
+      list: "list_dev",
       tabs: "tabs_dev",
       blank: "blank_dev"
     };
     const keys = Object.keys(this.compsData);
     for (const key of keys) {
+      const element = this.compsData[key];
       if (devComponentsPath[key])
-        this.compsData[
-          key
-        ].content = require(`./custom/items/${devComponentsPath[key]}`).default;
-      else
-        this.compsData[key].content = require(`./custom/items/${key}`).default;
+        element.content = require(`./custom/items/${devComponentsPath[key]}`).default;
+      else element.content = require(`./custom/items/${key}`).default;
     }
   },
   mounted() {},

package/packages/FormMaking/custom/config.js

@@ -489,7 +489,7 @@ export const basicComponents = [
   {
     name: "文件",
     type: "upload",
-    icon: "icon-tupian",
+    icon: "th-icon-upload",
     options: {
       width: "",
       labelWidth: 100,
@@ -583,7 +583,7 @@ export const advanceComponents = [
   {
     name: "子表单",
     type: "table",
-    icon: "icon-table",
+    icon: "th-icon-insertrowabove",
     options: {
       height: "",
       defaultValue: "",
@@ -615,7 +615,36 @@ export const advanceComponents = [
   {
     name: "子表单H5",
     type: "tableH5",
-    icon: "icon-table",
+    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",
     options: {
       defaultValue: "",
       columns: [],
@@ -677,7 +706,7 @@ export const advanceComponents = [
   {
     name: "自定义区域",
     type: "blank",
-    icon: "icon-zidingyishuju",
+    icon: "th-icon-code",
     options: {
       defaultType: "String",
       required: false
@@ -691,7 +720,7 @@ export const layoutComponents = [
   {
     name: "栅格布局",
     type: "grid",
-    icon: "icon-grid-",
+    icon: "th-icon-layout",
     options: {
       gutter: 0,
       justify: "start",

package/packages/FormMaking/custom/index.js

@@ -20,7 +20,7 @@ const basicComponents = [
   "editor",
   "cascader"
 ];
-const advanceComponents = ["table", "tableH5", "tabs", "blank"];
+const advanceComponents = ["table", "tableH5", "list", "tabs", "blank"];
 const layoutComponents = ["grid", "alliance", "filler", "divider"];
 
 module.exports = {

package/packages/FormMaking/custom/items/list_dev.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="list">
+    <draggable
+      v-model="widget.options.columns"
+      :no-transition-on-drag="true"
+      v-bind="{
+        group: 'people',
+        ghostClass: 'ghost',
+        animation: 200,
+        handle: '.drag-widget'
+      }"
+      @add="handleWidgetAdd($event)"
+    >
+      <transition-group name="fade" tag="div" class="list">
+        <div
+          v-for="(element, elementIndex) in widget.options.columns"
+          class="list-item"
+          :key="element.key"
+          @click.stop="selectWidget = element"
+        >
+          <widget-form-item
+            :widget="element"
+            :widgetArray="widget.options.columns"
+            :widgetIndex="elementIndex"
+            :select.sync="selectWidget"
+            :config="config"
+          >
+          </widget-form-item>
+        </div>
+      </transition-group>
+    </draggable>
+    <div v-if="widget.options.isDelete" class="tools">
+      <el-button type="danger">{{ widget.options.deleteButtonText }}</el-button>
+    </div>
+    <div v-if="widget.options.isAdd" class="footer">
+      <el-button type="text" :disabled="widget.options.disabled">{{
+        widget.options.addButtonText
+      }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { itemsComponent } from "../mixins/index";
+import Draggable from "vuedraggable";
+import WidgetFormItem from "../../WidgetFormItem.vue";
+export default {
+  components: { Draggable, WidgetFormItem },
+  mixins: [itemsComponent],
+  data() {
+    return {
+      selectWidget: {}
+    };
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget: {
+      handler(val) {
+        this.$emit("update:select", val);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    handleWidgetAdd($event) {
+      const newIndex = $event.newIndex;
+      const oldIndex = $event.oldIndex;
+      const newComponent = JSON.parse(
+        JSON.stringify(this.widget.options.columns[newIndex])
+      );
+      const item = $event.item;
+      // 防止布局元素的嵌套拖拽
+      if (item.className.indexOf("no-put") >= 0) {
+        // 如果是列表中拖拽的元素需要还原到原来位置
+        item.tagName === "DIV" &&
+          this.widgetArray.splice(oldIndex, 0, newComponent);
+
+        this.widget.options.columns.splice(newIndex, 1);
+        return false;
+      }
+
+      if (!newComponent.key) {
+        const key =
+          Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
+        newComponent.key = key;
+        newComponent.model = `${newComponent.type}_${key}`;
+      }
+      this.$set(this.widget.options.columns, newIndex, newComponent);
+      this.selectWidget = newComponent;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.list {
+  background: #fff;
+
+  .list {
+    min-height: 50px;
+    border: 1px dashed #ccc;
+    .list-item {
+      width: 100%;
+    }
+    .list-item:nth-child(1) {
+      display: flex;
+      > div:first-child {
+        flex: 1;
+      }
+    }
+  }
+
+  .tools {
+    text-align: right;
+  }
+  .footer {
+    text-align: center;
+  }
+}
+</style>

package/packages/FormMaking/custom/items/list_pro.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+     
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

package/packages/FormMaking/custom/items/tableH5_pro.vue

@@ -69,13 +69,12 @@ export default {
   methods: {
     handleTableAdd() {
       let dic = {};
-      this.widget.options.columns.forEach(item => {
+      this.widget.options.columns.map(item => {
         if (item.type === "grid") {
           for (let i = 0; i < item.options.columns.length; i++) {
-            const element = item.options.columns[i];
-            for (let j = 0; j < element.options.columns.length; j++) {
-              const element2 = element.options.columns[j];
-              dic[element2.model] = element2.options.defaultValue;
+            const column = item.options.columns[i];
+            for (const element of column.list) {
+              dic[element.model] = element.options.defaultValue;
             }
           }
         } else {

package/packages/FormMaking/index.vue

@@ -55,7 +55,9 @@
               v-for="(item, index) in getAdvanceComponents"
               class="fields-label"
               :class="{
-                'no-put': ['table', 'tableH5', 'tabs'].includes(item.type),
+                'no-put': ['table', 'tableH5', 'list', 'tabs'].includes(
+                  item.type
+                ),
                 [item.type]: true
               }"
               :key="index"
@@ -212,7 +214,7 @@ export default {
     },
     advanceFields: {
       type: Array,
-      default: () => ["table", "tableH5", "tabs", "blank"]
+      default: () => ["table", "tableH5", "list", "tabs", "blank"]
     },
     layoutFields: {
       type: Array,
@@ -263,7 +265,7 @@ export default {
     },
     config(val) {
       this.setConfig(val);
-      this.initApiConfig()
+      this.initApiConfig();
     },
     apiOptions(val) {
       this.initApiConfig();

package/packages/FormMaking/styles/index.scss

@@ -69,25 +69,25 @@ $primary-background-color: #ecf5ff;
       //   background-color: rgba(69, 90, 100, 0.2);
       // }
 
-      .tableH5 {
-        min-height: 50px;
-        border: 1px dashed #ccc;
-        background: #fff;
-        white-space: nowrap;
-        overflow-x: scroll;
-
-        .tableH5-item:nth-child(1) {
-          display: flex;
+      // .tableH5 {
+      //   min-height: 50px;
+      //   border: 1px dashed #ccc;
+      //   background: #fff;
+      //   white-space: nowrap;
+      //   overflow-x: scroll;
+
+      //   .tableH5-item:nth-child(1) {
+      //     display: flex;
 
-          .actions {
-            align-items: center;
-            justify-content: right;
-          }
-        }
-        .tableH5-item-widget {
-          width: calc(100% - 5px);
-        }
-      }
+      //     .actions {
+      //       align-items: center;
+      //       justify-content: right;
+      //     }
+      //   }
+      //   .tableH5-item-widget {
+      //     width: calc(100% - 5px);
+      //   }
+      // }
 
       .widgetFormItem {
         min-width: 100px;