tianheng-ui 0.0.72 → 0.0.74

package/packages/TableMaking/widgetConfig.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="widgetConfig">
+    <div class="tabs">
+      <div
+        v-for="(item, index) in tabsMenus"
+        :key="index"
+        class="tabs-item"
+        :class="{ 'tabs-item__active': activeTab.value === item.value }"
+        @click="handleTabsSelect(item)"
+      >
+        {{ item.title }}
+      </div>
+    </div>
+    <div v-if="activeTab.value === 0" class="fields">
+      <el-checkbox
+        :indeterminate="search.isIndeterminate"
+        v-model="search.isCheckAll"
+        @change="handleSearchCheckAllChange"
+        >全选</el-checkbox
+      >
+      <el-checkbox-group v-model="search.fields" @change="handleChange">
+        <el-checkbox
+          v-for="(item, index) in fields"
+          :label="index"
+          :key="index"
+          >{{ item.label }}</el-checkbox
+        >
+      </el-checkbox-group>
+    </div>
+    <div v-if="activeTab.value === 1" class="fields">
+      <el-checkbox
+        :indeterminate="table.isIndeterminate"
+        v-model="table.isCheckAll"
+        @change="handleTableCheckAllChange"
+        >全选</el-checkbox
+      >
+      <el-checkbox-group v-model="table.fields" @change="handleChange">
+        <el-checkbox
+          v-for="(item, index) in fields"
+          :label="index"
+          :key="index"
+          >{{ item.label }}</el-checkbox
+        >
+      </el-checkbox-group>
+    </div>
+    <div v-if="activeTab.value === 2" class="tableConfig">
+      <el-form
+        :model="tableConfig"
+        label-position="left"
+        label-width="80px"
+        size="mini"
+      >
+        <el-collapse v-model="tableCollapse" @change="handleChange">
+          <el-collapse-item title="表格配置" name="1">
+            <el-form-item label="高级查询">
+              <el-switch v-model="tableConfig.search"> </el-switch>
+            </el-form-item>
+            <el-form-item label="排序类型">
+              <el-radio-group v-model="tableConfig.sortType">
+                <el-radio-button label="1">降序</el-radio-button>
+                <el-radio-button label="2">升序</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="排序字段">
+              <el-select v-model="tableConfig.sortField" placeholder="请选择">
+                <el-option
+                  v-for="item in []"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="分页设置">
+              <el-switch v-model="tableConfig.openPaging"> </el-switch>
+            </el-form-item>
+            <el-form-item label="分页条数">
+              <el-radio-group v-model="tableConfig.pageSize">
+                <el-radio-button :label="20">20条</el-radio-button>
+                <el-radio-button :label="50">50条</el-radio-button>
+                <el-radio-button :label="100">100条</el-radio-button>
+                <el-radio-button :label="500">500条</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-collapse-item>
+          <el-collapse-item title="子表配置" name="2">
+            <el-form-item label="子表样式">
+              <el-select v-model="tableConfig.sortField" placeholder="请选择">
+                <el-option
+                  v-for="item in []"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-collapse-item>
+          <el-collapse-item title="按钮配置" name="3">
+            <div>
+              与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+            </div>
+          </el-collapse-item>
+          <el-collapse-item title="权限设置" name="4">
+            <div>
+              与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
+            </div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    fields: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      tabsMenus: [
+        { title: "查询字段", value: 0 },
+        { title: "列表字段", value: 1 },
+        { title: "列表属性", value: 2 }
+      ],
+      activeTab: { title: "查询字段", value: 0 },
+      search: {
+        fields: [],
+        isCheckAll: false,
+        isIndeterminate: false
+      },
+      table: {
+        fields: [],
+        isCheckAll: false,
+        isIndeterminate: false
+      },
+      tableCollapse: ["1"],
+      tableConfig: {
+        search: true,
+        sortType: "1",
+        sortField: "",
+        openPaging: true,
+        pageSize: 20
+      }
+    };
+  },
+  mounted() {},
+  methods: {
+    handleTabsSelect(val) {
+      this.activeTab = val;
+    },
+    handleChange() {
+      if (this.activeTab.value === 0) {
+        const count = this.search.fields.length;
+        this.search.isCheckAll = count === this.fields.length;
+        this.search.isIndeterminate = count > 0 && count < this.fields.length;
+        this.$emit("fields-change", {
+          type: this.activeTab.value,
+          data: this.search.fields
+        });
+      } else {
+        const count = this.table.fields.length;
+        this.table.isCheckAll = count === this.fields.length;
+        this.table.isIndeterminate = count > 0 && count < this.fields.length;
+        this.$emit("fields-change", {
+          type: this.activeTab.value,
+          data: this.table.fields
+        });
+      }
+    },
+    handleSearchCheckAllChange(val) {
+      const list = [];
+      if (val) {
+        for (let i = 0; i < this.fields.length; i++) {
+          list.push(i);
+        }
+      }
+      this.search.fields = list;
+      this.search.isIndeterminate = false;
+      this.handleChange();
+    },
+    handleTableCheckAllChange(val) {
+      const list = [];
+      if (val) {
+        for (let i = 0; i < this.fields.length; i++) {
+          list.push(i);
+        }
+      }
+      this.table.fields = list;
+      this.table.isIndeterminate = false;
+      this.handleChange();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.widgetConfig {
+  height: 100%;
+  background-color: white;
+  .tabs {
+    display: flex;
+    align-items: center;
+    height: 45px;
+    border-bottom: 1px solid #dcdfe6;
+    box-sizing: border-box;
+
+    .tabs-item {
+      flex: 1;
+      text-align: center;
+      line-height: 44px;
+      cursor: pointer;
+    }
+    .tabs-item__active {
+      border-bottom: 2px solid #409eff;
+    }
+  }
+
+  .fields {
+    height: calc(100% - 45px);
+    .fields-item {
+      padding: 0 10px;
+      height: 30px;
+      line-height: 30px;
+    }
+
+    .el-checkbox {
+      padding: 0 10px;
+      width: 100%;
+      height: 30px;
+      line-height: 30px;
+    }
+  }
+
+  .tableConfig {
+    height: calc(100% - 45px);
+  }
+}
+</style>
+
+<style lang="scss">
+.tableConfig {
+  .el-collapse-item__header {
+    padding: 0 10px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #f5f7f9;
+  }
+  .el-collapse-item__wrap {
+    padding: 10px;
+  }
+  .el-radio-button__inner {
+    padding: 7px;
+  }
+}
+</style>

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
 };