tianheng-ui 0.0.73 → 0.0.74

package/packages/TableMaking/widgetTable.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="widgetTable">
+    <div class="table-title">查询字段</div>
+    <div class="searchList">
+      <div class="table-header">
+        <div>拖动</div>
+        <div>列名</div>
+        <div>字段</div>
+        <div>类型</div>
+      </div>
+      <draggable
+        class="table-content"
+        v-model="searchData"
+        v-bind="{
+          group: 'people',
+          ghostClass: 'ghost',
+          animation: 200,
+          handle: '.drag-widget'
+        }"
+        @end="handleSearchMoveEnd"
+      >
+        <div
+          v-for="item in searchData"
+          :key="item.key"
+          class="table-content-item"
+        >
+          <div class="drag">
+            <i class="iconfont icon-drag drag-widget"></i>
+          </div>
+          <div>{{ item.label }}</div>
+          <div>{{ item.prop }}</div>
+          <div>{{ item.type }}</div>
+        </div>
+      </draggable>
+    </div>
+    <div class="table-title">列表字段</div>
+    <div class="tableList">
+      <div class="table-header">
+        <div>拖动</div>
+        <div>列名</div>
+        <div>字段</div>
+        <div>排序</div>
+        <div>对齐</div>
+        <div>宽度</div>
+      </div>
+      <draggable
+        class="table-content"
+        v-model="tableData"
+        v-bind="{
+          group: 'people',
+          ghostClass: 'ghost',
+          animation: 200,
+          handle: '.drag-widget'
+        }"
+        @end="handleTableMoveEnd"
+      >
+        <div
+          v-for="item in tableData"
+          :key="item.key"
+          class="table-content-item"
+        >
+          <div class="drag">
+            <i class="iconfont icon-drag drag-widget"></i>
+          </div>
+          <div>{{ item.label }}</div>
+          <div>{{ item.prop }}</div>
+          <div><el-checkbox v-model="item.sortable"></el-checkbox></div>
+          <div>
+            <el-select v-model="item.align" placeholder="请选择" size="mini">
+              <el-option
+                v-for="item in ['left', 'center', 'right']"
+                :key="item"
+                :label="item"
+                :value="item"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div>
+            <el-input-number
+              v-model="item.width"
+              controls-position="right"
+              :min="0"
+              size="mini"
+            ></el-input-number>
+          </div>
+        </div>
+      </draggable>
+    </div>
+  </div>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+export default {
+  components: { Draggable },
+  props: {
+    searchFields: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    tableFields: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      searchData: this.searchFields,
+      tableData: this.tableFields
+    };
+  },
+  watch: {
+    searchData: {
+      handler(val) {
+        this.$emit("update:searchFields", val);
+      },
+      deep: true
+    },
+    searchFields(val) {
+      this.searchData = val;
+    },
+    tableData: {
+      handler(val) {
+        this.$emit("update:tableFields", val);
+      },
+      deep: true
+    },
+    tableFields(val) {
+      this.tableData = val;
+    }
+  },
+  mounted() {},
+  methods: {
+    handleSearchMoveEnd(val) {
+      this.$emit("move", { type: "search", data: val });
+    },
+    handleTableMoveEnd(val) {
+      this.$emit("move", { type: "table", data: val });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.widgetTable {
+  height: 100%;
+  padding: 10px;
+  background-color: white;
+  .table-title {
+    height: 25px;
+    line-height: 25px;
+  }
+  .searchList {
+    margin: 10px 0;
+    border: 1px solid #dcdfe6;
+    box-sizing: border-box;
+
+    .table-content {
+      height: 160px;
+      overflow-y: scroll;
+    }
+  }
+  .tableList {
+    margin-top: 10px;
+    height: calc(100% - 280px);
+    border: 1px solid #dcdfe6;
+
+    .table-header {
+      div:nth-child(4) {
+        flex: none;
+        width: 60px !important;
+      }
+    }
+    .table-content {
+      height: calc(100% - 40px);
+      overflow-y: scroll;
+    }
+    .table-content .table-content-item > div:nth-child(4) {
+      flex: none;
+      width: 60px !important;
+    }
+    .el-input-number--mini {
+      width: 100%;
+    }
+  }
+
+  .table-header {
+    display: flex;
+    align-items: center;
+    background-color: #f5f7f9;
+    div {
+      flex: 1;
+      padding: 0 10px;
+      height: 40px;
+      line-height: 40px;
+    }
+    div:nth-child(1) {
+      flex: none;
+      width: 60px;
+      text-align: center;
+    }
+  }
+  .table-content {
+    .table-content-item {
+      display: flex;
+      align-items: center;
+
+      .drag {
+        i {
+          font-size: 14px;
+          margin: 0 5px;
+          cursor: move;
+        }
+      }
+      > div {
+        flex: 1;
+        height: 40px;
+        line-height: 40px;
+        padding: 0 10px;
+      }
+      > div:nth-child(1) {
+        flex: none;
+        width: 60px;
+        text-align: center;
+      }
+    }
+  }
+  .table-content:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(69, 90, 100, 0.2);
+  }
+  .table-content:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(69, 90, 100, 0.2);
+  }
+}
+</style>

package/packages/index.js

@@ -41,6 +41,7 @@ import Col from "./Col/index.js";
 import Upload from "./Upload/index.js";
 import FormMaking from "./FormMaking/making.js";
 import FormGenerate from "./FormMaking/generate.js";
+import TableMaking from "./TableMaking/making.js";
 import Workflow from "../packages/Workflow/index.js";
 
 const components = [
@@ -65,6 +66,7 @@ const components = [
   Upload,
   FormMaking,
   FormGenerate,
+  TableMaking,
   Workflow
 ];
 
@@ -108,6 +110,7 @@ export default {
   Upload,
   FormMaking,
   FormGenerate,
+  TableMaking,
   Workflow
 };
 
@@ -134,5 +137,6 @@ export {
   Upload,
   FormMaking,
   FormGenerate,
+  TableMaking,
   Workflow
 };