tianheng-ui 0.1.39 → 0.1.41

package/package.json

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

package/packages/Dialog/index.vue

@@ -2,7 +2,6 @@
   <el-dialog
     class="th-dialog"
     :class="[customClass]"
-    :style="{'z-index':zIndex}"
     :visible.sync="visible"
     :width="width"
     :top="top"
@@ -88,9 +87,7 @@ export default {
     showFullscreen: { type: Boolean, default: true },
     fullscreenIcon: { type: String, default: "el-icon-full-screen" },
 
-    showFooter: { type: Boolean, default: true },
-
-    zIndex: Number
+    showFooter: { type: Boolean, default: true }
   },
   data() {
     return {

package/packages/FormMaking/GenerateForm.vue

@@ -230,7 +230,7 @@ export default {
       }
 
       this.axios({
-        url: `/api/lc/api/${remoteFunc.url}`,
+        url: remoteFunc.url,
         method: remoteFunc.method,
         headers: remoteFunc.headers,
         data: remoteFunc.params

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,10 +3,10 @@
     <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 }"
-        @click="handleTabsChange(item)"
+        :key="index"
+        @click="activeTab = item"
       >
         {{ item.title }}
       </div>
@@ -14,6 +14,7 @@
 
     <div v-if="activeTab.value === 'field'">
       <el-form
+        v-if="data.model"
         :model="data"
         label-position="left"
         label-width="80px"
@@ -132,6 +133,7 @@
           </el-collapse-item>
         </el-collapse>
       </el-form>
+      <th-empty v-else description="请从左侧拖拽来添加字段"></th-empty>
     </div>
     <div v-if="activeTab.value === 'form'">
       <el-form
@@ -264,17 +266,32 @@
         </el-collapse>
       </el-form>
     </div>
-    <div v-if="activeTab.value === 'css'"></div>
+    <div v-if="activeTab.value === 'css'">
+      <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="dialog.show"
       title="动作设置"
-      v-model="eventsDialog.visible"
       :modal-append-to-body="false"
       @on-fullscreen="$refs.codeEditor && $refs.codeEditor.resize()"
     >
-      <div class="eventsSetting">
-        <div class="list">
-          <div class="list-header">
+      <div class="eventsSetting th-flex_box th-is_border">
+        <div class="list th-flex_aside">
+          <div class="events-header">
             <div>动作库</div>
             <el-button
               type="text"
@@ -285,10 +302,14 @@
             >
           </div>
           <div
-            class="list-item"
-            v-for="(item, index) in eventsDialog.eventScript"
+            v-for="(item, index) in dialog.data"
+            class="list-item th-is_hover"
+            :class="{
+              'th-is_active':
+                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>
@@ -302,16 +323,16 @@
             </el-popconfirm>
           </div>
         </div>
-        <div class="detail" 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>
@@ -319,8 +340,8 @@
             <div>
               function(
               {{
-                eventsDialog.active.label !== "mounted" &&
-                eventsDialog.active.label !== "refresh"
+                dialog.active.label !== "mounted" &&
+                dialog.active.label !== "refresh"
                   ? "item,value"
                   : ""
               }}
@@ -351,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>
@@ -360,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"
@@ -400,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: [
         {
@@ -444,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" }
@@ -474,17 +489,10 @@ export default {
     }
   },
   methods: {
-    handleTabsChange(item) {
-      if (!this.data.model)
-        return this.$message.warning("请从左侧拖拽来添加组件");
-
-      this.activeTab = item;
-    },
-
     handleEventDialogShow() {
-      this.eventsDialog = {
-        visible: true,
-        eventScript: deepClone(this.config.eventScript),
+      this.dialog = {
+        show: true,
+        data: deepClone(this.config.eventScript),
         active: null
       };
     },
@@ -495,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;
@@ -577,6 +585,7 @@ export default {
     display: flex;
     align-items: center;
     height: 45px;
+    z-index: 10;
 
     .tabs-item {
       flex: 1;
@@ -599,8 +608,18 @@ export default {
 
   .eventsSetting {
     height: 100%;
-    display: flex;
-    border: 1px solid #eee;
+
+    .events-header {
+      position: sticky;
+      top: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 5px;
+      line-height: 30px;
+      border-bottom: 1px solid #eee;
+      background: #f2f6fc;
+    }
 
     .list {
       width: 270px;
@@ -608,18 +627,6 @@ export default {
       overflow-y: overlay;
       border-right: 1px solid #eee;
 
-      .list-header {
-        position: sticky;
-        top: 0;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 5px;
-        line-height: 30px;
-        border-bottom: 1px solid #eee;
-        background: #f2f6fc;
-      }
-
       .list-item {
         display: flex;
         // align-items: center;
@@ -640,14 +647,9 @@ export default {
           cursor: pointer;
         }
       }
-
-      .list-item:hover {
-        background-color: #f2f6fc;
-      }
     }
 
     .detail {
-      flex: 1;
       padding: 10px;
 
       > div:nth-child(1) {

package/packages/FormMaking/WidgetForm.vue

@@ -121,6 +121,7 @@ export default {
   position: relative;
   width: 100%;
   height: calc(100% - 45px);
+  overflow-y: scroll;
 
   .form-empty {
     position: absolute;

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/WidgetTools.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="widgetTools th-sticky_top">
+  <div class="widgetTools">
     <div class="left">
       <slot> </slot>
     </div>
@@ -215,7 +215,6 @@
       title="获取数据"
       :modal-append-to-body="false"
       :showFooter="false"
-      :z-index="99999"
       @on-close="dialogResultData.show = false"
       @on-fullscreen="$refs.dataCodeEditor.resize()"
     >
@@ -506,7 +505,7 @@ export default {
   width: 100%;
   height: 45px;
   padding: 0 15px;
-  z-index: 999;
+  border-bottom: solid 1px #e4e7ed;
 
   .left {
   }

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>