tianheng-ui 0.1.80 → 0.1.82

package/packages/FormMaking/custom/items/page-table.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="pageTable">
+    <div v-if="widget.options.columns.tree.show" class="pageTable-tree">
+      <el-tree
+        :data="widget.options.columns.tree.props.data"
+        :current-node-key="widget.options.columns.tree.props.selectedKeys[0]"
+        :show-checkbox="widget.options.columns.tree.props.checkable"
+        :default-expanded-keys="widget.options.columns.tree.props.expandedKeys"
+        :default-checked-keys="widget.options.columns.tree.props.checkedKeys"
+        :props="widget.options.columns.tree.props.fieldNames"
+        :default-expand-all="widget.options.columns.tree.props.defaultExpandAll"
+        :node-key="widget.options.columns.tree.props.fieldNames.key"
+      >
+      </el-tree>
+    </div>
+    <div class="pageTable-content">
+      <div v-if="widget.options.columns.search.show" class="pageTable-search">
+        <draggable
+          v-model="widget.options.columns.search.list"
+          v-bind="{
+            group: 'people',
+            ghostClass: 'draggable-ghost',
+            animation: 200,
+            handle: '.drag-widget'
+          }"
+          :no-transition-on-drag="true"
+          @add="handleWidgetAdd($event, widget, 'search')"
+        >
+          <transition-group name="fade" tag="div" class="draggable-list">
+            <widget-form-item
+              v-for="(element,
+              elementIndex) in widget.options.columns.search.list.filter(
+                item => {
+                  return item.key;
+                }
+              )"
+              :key="element.key"
+              :widget="element"
+              :widgetArray="widget.options.columns.search.list"
+              :widgetIndex="elementIndex"
+              :config="config"
+              :select.sync="selectWidget"
+            ></widget-form-item>
+          </transition-group>
+        </draggable>
+        <th-empty
+          v-if="widget.options.columns.search.list.length == 0"
+          class="pageTable-empty"
+          description="从左侧拖拽来添加搜索字段"
+        ></th-empty>
+      </div>
+      <div v-if="widget.options.columns.tools.show" class="pageTable-tools">
+        <draggable
+          v-model="widget.options.columns.tools.list"
+          v-bind="{
+            group: 'people',
+            ghostClass: 'draggable-ghost',
+            animation: 200,
+            handle: '.drag-widget'
+          }"
+          :no-transition-on-drag="true"
+          @add="handleWidgetAdd($event, widget, 'tools')"
+        >
+          <transition-group name="fade" tag="div" class="draggable-list">
+            <widget-form-item
+              v-for="(element,
+              elementIndex) in widget.options.columns.tools.list.filter(
+                item => {
+                  return item.key;
+                }
+              )"
+              :key="element.key"
+              :widget="element"
+              :widgetArray="widget.options.columns.tools.list"
+              :widgetIndex="elementIndex"
+              :config="config"
+              :select.sync="selectWidget"
+            ></widget-form-item>
+          </transition-group>
+        </draggable>
+        <th-empty
+          v-if="widget.options.columns.tools.list.length == 0"
+          class="pageTable-empty"
+          description="从左侧拖拽来添加功能按钮"
+        ></th-empty>
+      </div>
+      <div class="pageTable-table">
+        <el-table
+          :data="widget.options.columns.table.data"
+          :size="widget.options.columns.table.size"
+          :border="widget.options.columns.table.border"
+        >
+          <el-table-column
+            v-for="column in widget.options.columns.table.columns"
+            :key="column.dataIndex"
+            :prop="column.dataIndex"
+            :label="column.title"
+          >
+            <template slot-scope="scope">
+              <template v-if="column.dataIndex === 'action'">
+                <el-button type="text" size="small">查看</el-button>
+                <el-button type="text" size="small">编辑</el-button>
+              </template>
+              <template v-else>{{ scope.row[column.dataIndex] }}</template>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div
+        v-if="widget.options.columns.table.pagination.show"
+        class="pageTable-pagination"
+      >
+        <el-pagination
+          :current-page="
+            widget.options.columns.table.pagination.options.current
+          "
+          :page-sizes="
+            widget.options.columns.table.pagination.options.pageSizes
+          "
+          :page-size="widget.options.columns.table.pagination.options.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="widget.options.columns.table.data.length"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { deepClone } from "../../util/index";
+import { itemsComponent, eventMixin } from "../mixins/index";
+import Draggable from "vuedraggable";
+import WidgetFormItem from "../../WidgetFormItem.vue";
+import compsData from "../register";
+export default {
+  components: { Draggable, WidgetFormItem },
+  mixins: [itemsComponent, eventMixin],
+  data() {
+    return {
+      compsData: deepClone(compsData),
+      selectWidget: this.select
+    };
+  },
+  watch: {
+    select(val) {
+      this.selectWidget = val;
+    },
+    selectWidget(val) {
+      this.$emit("update:select", val);
+    }
+  },
+  created() {
+    const devComponentsPath = {
+      grid: "grid_dev",
+      table: "table_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])
+        element.content = require(`./${devComponentsPath[key]}`).default;
+      else element.content = require(`./${key}`).default;
+    }
+  },
+  mounted() {},
+  methods: {
+    handleWidgetAdd($event, row, colIndex) {
+      const newIndex = $event.newIndex;
+      const oldIndex = $event.oldIndex;
+      const item = $event.item;
+      const newComponent = JSON.parse(
+        JSON.stringify(row.options.columns[colIndex].list[newIndex])
+      );
+
+      // 防止布局元素的嵌套拖拽
+      if (item.className.indexOf("grid") >= 0) {
+        // 如果是列表中拖拽的元素需要还原到原来位置
+        item.tagName === "DIV" &&
+          this.widgetArray.splice(oldIndex, 0, newComponent);
+
+        row.options.columns[colIndex].list.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}`;
+        if (colIndex === "tools") newComponent.options.hideLabel = true;
+      }
+      this.$set(row.options.columns[colIndex].list, newIndex, newComponent);
+      this.selectWidget = newComponent;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.pageTable {
+  display: flex;
+  padding: 10px;
+
+  .pageTable-tree {
+    margin-right: 10px;
+    width: 200px;
+  }
+
+  .pageTable-content {
+    flex: 1;
+    width: 0;
+    .pageTable-search {
+      position: relative;
+      margin-bottom: 10px;
+    }
+    .pageTable-tools {
+      position: relative;
+      // margin-bottom: 10px;
+    }
+    .pageTable-table {
+      margin-bottom: 10px;
+    }
+    .pageTable-pagination {
+      text-align: right;
+    }
+  }
+  .draggable-list {
+    display: flex;
+  }
+
+  .pageTable-empty {
+    position: absolute;
+    margin-left: -200px;
+    padding: 0;
+    width: 400px;
+    top: 0;
+    left: 50%;
+    text-align: center;
+    color: #ccc;
+
+    .th-empty-description {
+      font-size: 20px;
+    }
+  }
+}
+</style>

package/packages/FormMaking/index.vue

@@ -125,6 +125,9 @@
         ref="widgetForm"
       >
       </widget-form>
+      <widget-footer>
+        <slot name="footer"></slot>
+      </widget-footer>
     </div>
 
     <!-- 右侧配置区 -->
@@ -155,6 +158,7 @@ import Draggable from "vuedraggable";
 import WidgetConfig from "./WidgetConfig";
 import WidgetTools from "./WidgetTools";
 import WidgetForm from "./WidgetForm";
+import WidgetFooter from "./WidgetFooter";
 import GenerateForm from "./GenerateForm";
 import WidgetGuide from "./WidgetGuide.vue";
 import {
@@ -175,6 +179,7 @@ export default {
     WidgetConfig,
     WidgetTools,
     WidgetForm,
+    WidgetFooter,
     GenerateForm,
     WidgetGuide
   },
@@ -232,7 +237,7 @@ export default {
     },
     businessFields: {
       type: Array,
-      default: () => ["blank", "descriptions", "workflow"]
+      default: () => ["blank", "descriptions", "workflow", "page-table"]
     },
     guide: Boolean
   },