tianheng-ui 0.1.0 → 0.1.2

package/packages/TableMaking/widgetConfig.vue

@@ -0,0 +1,390 @@
+<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">
+          <el-collapse-item title="表格配置" name="1">
+            <el-form-item label="高级查询">
+              <el-switch v-model="tableConfig.search.show"> </el-switch>
+            </el-form-item>
+            <el-form-item label="排序类型">
+              <el-radio-group v-model="tableConfig.table.sort.type">
+                <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.table.sort.key"
+                placeholder="请选择"
+                clearable
+              >
+                <el-option
+                  v-for="item in fields"
+                  :key="item.prop"
+                  :label="item.label"
+                  :value="item.alias"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="序号">
+              <el-switch v-model="tableConfig.table.sequence"> </el-switch>
+            </el-form-item>
+            <el-form-item label="分页设置">
+              <el-switch v-model="tableConfig.table.pageInfo.show"> </el-switch>
+            </el-form-item>
+            <el-form-item
+              v-if="tableConfig.table.pageInfo.show"
+              label="分页条数"
+            >
+              <el-radio-group
+                v-model="tableConfig.table.pageInfo.options.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 name="3">
+            <template slot="title">
+              <div class="collapse-title">
+                <div>按钮配置</div>
+                <div
+                  class="collapse-title-action"
+                  @click.stop="handleActionConfig"
+                >
+                  配置
+                </div>
+              </div>
+            </template>
+            <el-form-item label-width="90px">
+              <el-checkbox v-model="tableConfig.tools.add.show" slot="label"
+                >新增</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.add.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px">
+              <el-checkbox v-model="tableConfig.tools.edit.show" slot="label"
+                >编辑</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.edit.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px">
+              <el-checkbox v-model="tableConfig.tools.detail.show" slot="label"
+                >详情</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.detail.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px">
+              <el-checkbox v-model="tableConfig.tools.delete.show" slot="label"
+                >删除</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.delete.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px">
+              <el-checkbox
+                v-model="tableConfig.tools.batchDelete.show"
+                slot="label"
+                >批量删除</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.batchDelete.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px">
+              <el-checkbox v-model="tableConfig.tools.export.show" slot="label"
+                >导出</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.export.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label-width="90px">
+              <el-checkbox v-model="tableConfig.tools.import.show" slot="label"
+                >导入</el-checkbox
+              >
+              <el-input
+                v-model="tableConfig.tools.import.name"
+                placeholder="请输入内容"
+              ></el-input>
+            </el-form-item>
+          </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", "3"],
+      tableConfig: {
+        search: {
+          show: true,
+          options: []
+        },
+        table: {
+          options: [],
+          pageInfo: {
+            show: true,
+            options: {
+              pageCount: 0, // 总页数
+              pageSize: 20, // 每页展示的条数
+              currentPage: 1, // 当前页码
+              total: 0, // 总条数
+              sizes: [10, 20, 30, 50, 100]
+            }
+          },
+          sort: { type: "1", key: "create_time" },
+          loading: { show: false, text: "加载中", image: "" },
+          empty: { show: true, text: "暂无数据", image: "" },
+          sequence: true //是否显示序号
+        },
+        tools: {
+          add: { show: true, name: "新增", position: 1 },
+          edit: { show: true, name: "编辑", position: 2 },
+          detail: { show: false, name: "查看", position: 2 },
+          delete: { show: true, name: "删除", position: 2 },
+          batchDelete: { show: false, name: "批量删除", position: 1 },
+          export: { show: false, name: "导出", position: 1 },
+          import: { show: false, name: "导入", position: 1 }
+        },
+        network: {}
+      }
+    };
+  },
+  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();
+    },
+    handleActionConfig() {},
+    getJson() {
+      return JSON.parse(JSON.stringify(this.tableConfig));
+    }
+  }
+};
+</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;
+      margin-right: 0;
+      line-height: 30px;
+    }
+
+    .el-checkbox {
+      padding: 0 10px;
+      margin-right: 0;
+      width: 100%;
+      height: 30px;
+      line-height: 30px;
+    }
+  }
+
+  .tableConfig {
+    height: calc(100% - 45px);
+
+    .collapse-title {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding-right: 10px;
+
+      .collapse-title-action {
+        transition: 0.25s;
+      }
+
+      .collapse-title-action:hover {
+        color: #409eff;
+      }
+    }
+  }
+}
+</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,305 @@
+<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>默认值</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>
+            <el-select
+              v-model="item.type"
+              placeholder="请选择"
+              size="mini"
+              disabled
+            >
+              <el-option
+                v-for="item in componentOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div>
+            <el-input
+              v-model="item.defaultValue"
+              placeholder="请输入内容"
+              size="mini"
+            ></el-input>
+          </div>
+          <div>
+            <template v-if="item.type === 'select'">
+              <el-button type="text" size="mini" @click="handleStaticData(item)"
+                >静态</el-button
+              >
+              <el-button type="text" size="mini" disabled>远端</el-button>
+            </template>
+          </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 alignOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </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>
+
+    <th-dialog
+      v-model="dialog.visible"
+      :title="dialog.title"
+      :modal-append-to-body="false"
+      @on-affirm="handleDialogAffirm"
+    >
+      <th-code-editor v-model="codeEditorValue"></th-code-editor>
+    </th-dialog>
+  </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,
+      componentOptions: [
+        { label: "输入框", value: "input" },
+        { label: "下拉框", value: "select" },
+        { label: "日期框", value: "date" }
+      ],
+      alignOptions: [
+        { label: "左对齐", value: "left" },
+        { label: "居中对齐", value: "center" },
+        { label: "右对齐", value: "right" }
+      ],
+      dialog: { visible: false, title: "", data: null },
+      codeEditorValue: ""
+    };
+  },
+  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 });
+    },
+    handleStaticData(val) {
+      this.dialog = {
+        visible: true,
+        title: `静态数据 - ${val.label}`,
+        data: val
+      };
+      this.codeEditorValue = val.staticData || "";
+    },
+    handleDialogAffirm() {
+      this.dialog.data.staticData = this.codeEditorValue;
+      this.dialog = { visible: false, title: "", data: null };
+    }
+  }
+};
+</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: 120px;
+      overflow-y: scroll;
+    }
+  }
+  .tableList {
+    margin-top: 10px;
+    height: calc(100% - 240px);
+    border: 1px solid #dcdfe6;
+
+    // .table-header {
+    //   div:nth-child(4) {
+    //     flex: none;
+    //     width: 70px !important;
+    //   }
+    // }
+    .table-content {
+      height: calc(100% - 40px);
+      overflow-y: scroll;
+    }
+    // .table-content .table-content-item > div:nth-child(4) {
+    //   flex: none;
+    //   width: 70px !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>