tianheng-ui 0.1.81 → 0.1.84

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

@@ -0,0 +1,146 @@
+<template>
+  <div class="component-config">
+    <el-collapse-item title="组件配置" name="group-element">
+      <el-form-item label="标题">
+        <el-input v-model="widget.name"></el-input>
+      </el-form-item>
+    </el-collapse-item>
+
+    <el-collapse-item title="树选择" name="group-tree">
+      <el-form-item label="是否显示">
+        <el-switch v-model="widget.options.columns.tree.show"> </el-switch>
+      </el-form-item>
+      <el-form-item label="默认数据">
+        <code-editor
+          v-model="widget.options.columns.tree.props.data"
+          language="json"
+          :fontSize="12"
+          :height="200"
+          :showGutter="false"
+        ></code-editor>
+      </el-form-item>
+      <el-form-item label="自定义字段">
+        <code-editor
+          v-model="widget.options.columns.tree.props.fieldNames"
+          language="json"
+          :fontSize="12"
+          :height="80"
+          :showGutter="false"
+        ></code-editor>
+      </el-form-item>
+      <el-form-item label="默认展开">
+        <el-switch v-model="widget.options.columns.tree.props.defaultExpandAll">
+        </el-switch>
+      </el-form-item>
+      <!-- <el-form-item label="默认选中">
+        <code-editor
+          v-model="widget.options.columns.tree.props.selectedKeys"
+          language="json"
+          :fontSize="12"
+          :height="50"
+          :showGutter="false"
+        ></code-editor>
+      </el-form-item> -->
+      <el-form-item label="节点是否可被选择">
+        <el-switch v-model="widget.options.columns.tree.props.checkable">
+        </el-switch>
+      </el-form-item>
+    </el-collapse-item>
+
+    <el-collapse-item title="搜索" name="group-search">
+      <el-form-item label="是否显示">
+        <el-switch v-model="widget.options.columns.search.show"> </el-switch>
+      </el-form-item>
+      <el-form-item label="栅格列宽">
+        <el-input-number
+          v-model="widget.options.columns.search.props.grid.span"
+          :min="1"
+          :max="24"
+        ></el-input-number>
+      </el-form-item>
+      <el-form-item label="栅格间距">
+        <el-input-number
+          v-model="widget.options.columns.search.props.grid.gutter"
+          :min="0"
+          :max="100"
+        ></el-input-number>
+      </el-form-item>
+    </el-collapse-item>
+
+    <el-collapse-item title="功能栏" name="group-tools">
+      <el-form-item label="是否显示">
+        <el-switch v-model="widget.options.columns.tools.show"> </el-switch>
+      </el-form-item>
+      <el-form-item label="间距">
+        <el-input-number
+          v-model="widget.options.columns.tools.props.space.size"
+          :min="0"
+          :max="100"
+        ></el-input-number>
+      </el-form-item>
+    </el-collapse-item>
+
+    <el-collapse-item title="列表" name="group-table">
+      <el-form-item label="默认数据">
+        <code-editor
+          v-model="widget.options.columns.table.data"
+          language="json"
+          :fontSize="12"
+          :height="200"
+          :showGutter="false"
+        ></code-editor>
+      </el-form-item>
+      <el-form-item label="表头配置">
+        <code-editor
+          v-model="widget.options.columns.table.columns"
+          language="json"
+          :fontSize="12"
+          :height="200"
+          :showGutter="false"
+        ></code-editor>
+      </el-form-item>
+      <el-form-item label="分页配置">
+        <el-switch
+          v-model="widget.options.columns.table.pagination.show"
+          active-text="开启分页"
+          inactive-text="关闭分页"
+        >
+        </el-switch>
+        <code-editor
+          v-if="widget.options.columns.table.pagination.show"
+          v-model="widget.options.columns.table.pagination.options"
+          language="json"
+          :fontSize="12"
+          :height="120"
+          :showGutter="false"
+        ></code-editor>
+      </el-form-item>
+      <el-form-item label="边框">
+        <el-switch v-model="widget.options.columns.table.border"> </el-switch>
+      </el-form-item>
+      <el-form-item label="边框">
+        <el-radio-group v-model="widget.options.columns.table.size" size="mini">
+          <el-radio-button label="medium"></el-radio-button>
+          <el-radio-button label="small"></el-radio-button>
+          <el-radio-button label="mini"></el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+    </el-collapse-item>
+  </div>
+</template>
+
+<script>
+import { configComponent } from "../mixins";
+import CodeEditor from "ui/CodeEditor/index.vue";
+export default {
+  components: {
+    CodeEditor
+  },
+  mixins: [configComponent],
+  created() {},
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped></style>

package/packages/FormMaking/custom/index.js

@@ -22,7 +22,7 @@ const basicComponents = [
 ];
 const advanceComponents = ["table", "list", "tabs"];
 const layoutComponents = ["grid", "alliance", "filler", "divider"];
-const businessComponents = ["blank", "descriptions"];
+const businessComponents = ["blank", "descriptions", "page-table"];
 
 module.exports = {
   basicComponents,

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/custom/register.js

@@ -1,43 +1,43 @@
-//在此注册组件
-import {
-  basicComponents,
-  advanceComponents,
-  layoutComponents,
-  businessComponents
-} from "./config";
-
-let compsData = {};
-for (const config of basicComponents) {
-  compsData[config.type] = {
-    name: config.name,
-    type: config.type,
-    config: config,
-    content: null
-  };
-}
-for (const config of advanceComponents) {
-  compsData[config.type] = {
-    name: config.name,
-    type: config.type,
-    config: config,
-    content: null
-  };
-}
-for (const config of layoutComponents) {
-  compsData[config.type] = {
-    name: config.name,
-    type: config.type,
-    config: config,
-    content: null
-  };
-}
-for (const config of businessComponents) {
-  compsData[config.type] = {
-    name: config.name,
-    type: config.type,
-    config: config,
-    content: null
-  };
-}
-
-export default compsData;
+//在此注册组件
+import {
+  basicComponents,
+  advanceComponents,
+  layoutComponents,
+  businessComponents
+} from "./config";
+
+let compsData = {};
+for (const config of basicComponents) {
+  compsData[config.type] = {
+    name: config.name,
+    type: config.type,
+    config: config,
+    content: null
+  };
+}
+for (const config of advanceComponents) {
+  compsData[config.type] = {
+    name: config.name,
+    type: config.type,
+    config: config,
+    content: null
+  };
+}
+for (const config of layoutComponents) {
+  compsData[config.type] = {
+    name: config.name,
+    type: config.type,
+    config: config,
+    content: null
+  };
+}
+for (const config of businessComponents) {
+  compsData[config.type] = {
+    name: config.name,
+    type: config.type,
+    config: config,
+    content: null
+  };
+}
+
+export default compsData;