tianheng-ui 0.1.0 → 0.1.1

package/packages/TableMaking/index.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="th-table-making">
+    <el-container>
+      <el-container>
+        <el-header>
+          <div class="client">
+            <el-button
+              :class="{ active: client === 'monitor' }"
+              type="text"
+              size="medium"
+              icon="el-icon-monitor"
+              @click="client = 'monitor'"
+            >
+              桌面端
+            </el-button>
+            <!-- <el-button
+              :class="{ active: client === 'mobile' }"
+              type="text"
+              size="medium"
+              icon="el-icon-mobile"
+              @click="client = 'mobile'"
+            >
+              移动端
+            </el-button> -->
+          </div>
+          <slot name="action"></slot>
+        </el-header>
+        <el-main>
+          <widget-table
+            :searchFields="searchFields"
+            :tableFields="tableFields"
+            @move="handleMoveChange"
+          ></widget-table>
+        </el-main>
+      </el-container>
+      <el-aside width="300px">
+        <widget-config
+          :fields="fields"
+          ref="configRef"
+          @fields-change="handleFieldsChange"
+        ></widget-config>
+      </el-aside>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import WidgetTable from "./widgetTable.vue";
+import WidgetConfig from "./widgetConfig.vue";
+export default {
+  name: "ThTableMaking",
+  components: { WidgetTable, WidgetConfig },
+  props: {
+    fields: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      searchFields: [],
+      tableFields: [],
+      client: "monitor"
+    };
+  },
+  watch: {
+    fields: {
+      handler(val, oldVal) {
+        console.log("watch fields =>", val);
+        if (oldVal.length === 0) {
+          this.initConfig();
+        }
+      },
+      deep: true
+    },
+    config(val) {
+      console.log("watch config =>", val);
+      this.initConfig();
+    }
+  },
+  mounted() {
+    console.log("mounted =>", this.config, this.fields);
+    this.initConfig();
+  },
+  methods: {
+    initConfig() {
+      console.log("initConfig =>", this.config, this.fields);
+
+      if (!this.config || Object.keys(this.config).length === 0) return;
+
+      this.$refs.configRef.tableConfig = this.config;
+
+      const searchFields = [];
+      const searchFieldsIndexs = [];
+      if (this.config.search) {
+        const searchOptions = this.config.search.options;
+        for (const item of searchOptions) {
+          for (let i = 0; i < this.fields.length; i++) {
+            const element = this.fields[i];
+            if (element.alias === item.prop) {
+              searchFields.push(item);
+              searchFieldsIndexs.push(i);
+            }
+          }
+        }
+        this.searchFields = searchFields;
+        this.$refs.configRef.search = {
+          fields: searchFieldsIndexs,
+          isCheckAll: searchFieldsIndexs.length === this.fields.length,
+          isIndeterminate:
+            searchFieldsIndexs.length > 0 &&
+            searchFieldsIndexs.length < this.fields.length
+        };
+      }
+
+      const tableFields = [];
+      const tableFieldsIndexs = [];
+      if (this.config.table) {
+        const tableOptions = this.config.table.options;
+        for (const item of tableOptions) {
+          for (let i = 0; i < this.fields.length; i++) {
+            const element = this.fields[i];
+            if (element.alias === item.prop) {
+              tableFields.push(item);
+              tableFieldsIndexs.push(i);
+            }
+          }
+        }
+        this.tableFields = tableFields;
+        this.$refs.configRef.table = {
+          fields: tableFieldsIndexs,
+          isCheckAll: tableFieldsIndexs.length === this.fields.length,
+          isIndeterminate:
+            tableFieldsIndexs.length > 0 &&
+            tableFieldsIndexs.length < this.fields.length
+        };
+      }
+    },
+    handleFieldsChange(val) {
+      const type = val.type;
+      const data = val.data;
+      const list = [];
+      data.forEach(i => {
+        list.push(this.fields[i]);
+      });
+      if (type === 0) {
+        this.searchFields = list;
+      } else {
+        this.tableFields = list;
+      }
+    },
+    handleMoveChange(val) {
+      const type = val.type;
+      const data = val.data;
+      const newIndex = data.newIndex;
+      const oldIndex = data.oldIndex;
+      if (type === "search") {
+        let list = this.$refs.configRef.search.fields;
+        list = this.mobile(list, oldIndex, newIndex);
+        this.$refs.configRef.search.fields = list;
+        this.searchFields = this.mobile(this.searchFields, oldIndex, newIndex);
+      } else {
+        let list = this.$refs.configRef.table.fields;
+        list = this.mobile(list, oldIndex, newIndex);
+        this.$refs.configRef.table.fields = list;
+        this.tableFields = this.mobile(this.tableFields, oldIndex, newIndex);
+      }
+    },
+    mobile(list, oldIndex, newIndex) {
+      const item = JSON.parse(JSON.stringify(list[oldIndex]));
+      if (oldIndex < newIndex) {
+        list.splice(newIndex + 1, 0, item);
+        list.splice(oldIndex, 1);
+      }
+      if (oldIndex > newIndex) {
+        list.splice(newIndex, 0, item);
+        list.splice(oldIndex + 1, 1);
+      }
+      return list;
+    },
+    getJson() {
+      const tableConfig = this.$refs.configRef.getJson();
+      tableConfig.search.options = this.searchFields;
+      tableConfig.table.options = this.tableFields;
+      return tableConfig;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.th-table-making {
+  height: 100%;
+  background-color: white;
+  border: 1px solid #dcdfe6;
+
+  .client {
+    flex: 1;
+    .el-button {
+      color: #333;
+    }
+    .active {
+      color: #409eff;
+    }
+  }
+
+  .el-container {
+    height: 100%;
+  }
+  .el-header {
+    display: flex;
+    align-items: center;
+    height: 45px !important;
+    line-height: 45px;
+    border-bottom: 1px solid #dcdfe6;
+  }
+  .el-main {
+    padding: 5px;
+    background-color: #fafafa;
+  }
+  .el-aside {
+    border-left: 1px solid #dcdfe6;
+    box-sizing: border-box;
+  }
+}
+</style>

package/packages/TableMaking/making.js

@@ -0,0 +1,5 @@
+import TableMaking from "./index.vue";
+TableMaking.install = function(Vue) {
+  Vue.component(TableMaking.name, TableMaking);
+};
+export default TableMaking;

package/packages/TableMaking/util/index.js

@@ -0,0 +1,433 @@
+const toolsConfig = {
+  add: {
+    act: "add",
+    name: "",
+    type: "primary",
+    icon: "el-icon-plus",
+    disabled: false,
+    loading: false
+  },
+  edit: {
+    act: "edit",
+    name: "",
+    type: "text",
+    icon: "el-icon-edit",
+    disabled: false,
+    loading: false
+  },
+  detail: {
+    act: "detail",
+    name: "",
+    type: "text",
+    icon: "el-icon-view",
+    disabled: false,
+    loading: false
+  },
+  delete: {
+    act: "delete",
+    name: "",
+    type: "text",
+    icon: "el-icon-delete",
+    style: "color:#ff4949;",
+    disabled: false,
+    loading: false
+  },
+  batchDelete: {
+    act: "batchDelete",
+    name: "",
+    type: "danger",
+    icon: "el-icon-delete",
+    disabled: false,
+    loading: false
+  },
+  export: {
+    act: "export",
+    name: "",
+    type: "primary",
+    icon: "el-icon-download",
+    disabled: false,
+    loading: false
+  },
+  import: {
+    act: "import",
+    name: "",
+    type: "primary",
+    icon: "el-icon-upload2",
+    disabled: false,
+    loading: false
+  }
+};
+
+export const toolsItemConfig = (key, data) => {
+  let config = toolsConfig[key] || {};
+  config = JSON.parse(JSON.stringify(config));
+  config.name = data.name;
+  return config;
+};
+
+const formConfig = {
+  "1": {
+    list: [
+      {
+        name: "平台名称",
+        type: "input",
+        icon: "icon-input",
+        options: {
+          width: "100%",
+          labelWidth: 100,
+          isLabelWidth: false,
+          defaultValue: "",
+          dataType: "string",
+          pattern: "",
+          placeholder: "",
+          maxlength: -1,
+          required: true,
+          disabled: false,
+          readonly: false,
+          clearable: false,
+          showWordLimit: false,
+          showPassword: false,
+          prefixIcon: "",
+          suffixIcon: "",
+          prepend: "",
+          append: "",
+          hidden: false,
+          hideLabel: false
+        },
+        events: {
+          onChange: "",
+          onFocus: "",
+          onBlur: ""
+        },
+        rules: [
+          {
+            type: "string",
+            message: "平台名称格式不正确"
+          },
+          {
+            required: true,
+            message: "平台名称必须填写"
+          }
+        ],
+        key: "1669859814000_5209",
+        model: "name"
+      },
+      {
+        name: "平台分类",
+        type: "select",
+        icon: "icon-select",
+        options: {
+          width: "100%",
+          labelWidth: 100,
+          isLabelWidth: false,
+          defaultValue: "",
+          multiple: false,
+          disabled: false,
+          clearable: false,
+          placeholder: "",
+          required: false,
+          showLabel: false,
+          collapseTags: false,
+          allowCreate: false,
+          options: [
+            {
+              value: "Option 1"
+            },
+            {
+              value: "Option 2"
+            },
+            {
+              value: "Option 3"
+            }
+          ],
+          remote: true,
+          filterable: false,
+          remoteOptions: [],
+          props: {
+            value: "id",
+            label: "name"
+          },
+          remoteFunc: "getUserList",
+          hidden: false,
+          hideLabel: false
+        },
+        events: {
+          onChange: "",
+          onFocus: "",
+          onBlur: ""
+        },
+        key: "1669859824000_68681",
+        model: "projectTypeId",
+        rules: []
+      },
+      {
+        name: "访问地址",
+        type: "input",
+        icon: "icon-input",
+        options: {
+          width: "100%",
+          labelWidth: 100,
+          isLabelWidth: false,
+          defaultValue: "",
+          dataType: "url",
+          pattern: "",
+          placeholder: "",
+          maxlength: -1,
+          required: false,
+          disabled: false,
+          readonly: false,
+          clearable: false,
+          showWordLimit: false,
+          showPassword: false,
+          prefixIcon: "",
+          suffixIcon: "",
+          prepend: "",
+          append: "",
+          hidden: false,
+          hideLabel: false
+        },
+        events: {
+          onChange: "",
+          onFocus: "",
+          onBlur: ""
+        },
+        rules: [
+          {
+            type: "url",
+            message: "访问地址格式不正确"
+          }
+        ],
+        key: "1669859816000_814",
+        model: "targetUrl"
+      }
+    ],
+    config: {
+      ui: "element",
+      title: "",
+      width: "",
+      labelWidth: 100,
+      labelPosition: "right",
+      labelSuffix: ":",
+      size: "small",
+      disabled: false,
+      hideLabel: false,
+      eventScript: [
+        {
+          key: "mounted",
+          name: "mounted",
+          func: ""
+        },
+        {
+          key: "refresh",
+          name: "refresh",
+          func: ""
+        }
+      ]
+    }
+  },
+  "2": {}
+};
+
+export const formItemConfig = key => {
+  const config = formConfig[key] || {};
+  return JSON.parse(JSON.stringify(config));
+};
+
+const tableConfig = {
+  "1": {
+    search: {
+      show: true,
+      options: [
+        {
+          type: "input",
+          label: "平台名称",
+          prop: "name",
+          defaultValue: "",
+          align: "left",
+          width: 0
+        }
+      ]
+    },
+    table: {
+      options: [
+        {
+          label: "平台名称",
+          type: "input",
+          prop: "name",
+          align: "left"
+        },
+        {
+          label: "平台分类",
+          type: "select",
+          prop: "projectTypeName",
+          align: "left",
+          width: 0
+        },
+        {
+          label: "访问地址",
+          type: "input",
+          prop: "targetUrl",
+          align: "left",
+          width: 0
+        },
+        {
+          label: "编辑人",
+          type: "input",
+          prop: "user",
+          sortable: true,
+          align: "left",
+          width: 0
+        }
+      ],
+      pageInfo: {
+        show: false,
+        options: {
+          pageCount: 0, // 总页数
+          pageSize: 20, // 每页展示的条数
+          currentPage: 1, // 当前页码
+          total: 0, // 总条数
+          sizes: [10, 20, 30, 50, 100]
+        }
+      },
+      sort: { type: "1", key: "createTime" },
+      loading: { show: false, text: "加载中", image: "" },
+      empty: { show: true, text: "暂无数据", image: "" },
+      sequence: true
+    },
+    tools: {
+      add: { show: true, name: "新增", position: 1, form: { id: "1" } },
+      edit: { show: true, name: "编辑", position: 2, form: { id: "1" } },
+      detail: { show: false, name: "查看", position: 2, form: { id: "1" } },
+      delete: { show: true, name: "删除", position: 2 },
+      batchDelete: { show: true, name: "批量删除", position: 1 },
+      export: { show: true, name: "导出", position: 1 },
+      import: { show: true, name: "导入", position: 1 },
+      key_123456: {}
+    },
+    network: {
+      mounted: {
+        name: "获取列表",
+        api: "tenant/project/list",
+        method: "post"
+      },
+      add: {
+        name: "新增",
+        api: "tenant/project/add",
+        method: "post"
+      },
+      edit: {
+        name: "编辑",
+        api: "tenant/project/edit",
+        method: "post"
+      },
+      delete: {
+        name: "删除",
+        api: "tenant/project/delete",
+        method: "post"
+      },
+      key_123456: {
+        name: "获取列表",
+        url: "https://"
+      }
+    }
+  },
+  "2": {
+    search: {
+      show: false,
+      options: []
+    },
+    table: {
+      options: [
+        {
+          label: "平台名称",
+          type: "input",
+          prop: "name",
+          align: "left"
+        },
+        {
+          label: "平台分类",
+          type: "select",
+          prop: "projectTypeName",
+          align: "left",
+          width: 0
+        },
+        {
+          label: "访问地址",
+          type: "input",
+          prop: "targetUrl",
+          align: "left",
+          width: 0
+        },
+        {
+          label: "编辑人",
+          type: "input",
+          prop: "user",
+          sortable: true,
+          align: "left",
+          width: 0
+        },
+        {
+          label: "编辑时间",
+          type: "input",
+          prop: "updateTime",
+          align: "left",
+          width: 0
+        }
+      ],
+      pageInfo: {
+        show: true,
+        options: {
+          pageCount: 0, // 总页数
+          pageSize: 20, // 每页展示的条数
+          currentPage: 1, // 当前页码
+          total: 0, // 总条数
+          sizes: [10, 20, 30, 50, 100]
+        }
+      },
+      sort: { type: "1", key: "createTime" },
+      loading: { show: false, text: "加载中", image: "" },
+      empty: { show: true, text: "暂无数据", image: "" },
+      sequence: true
+    },
+    tools: {
+      add: { show: true, name: "新增", position: 1, form: { id: "1" } },
+      edit: { show: true, name: "编辑", position: 2, form: { id: "1" } },
+      detail: { show: false, name: "查看", position: 2, form: { id: "1" } },
+      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: {
+        name: "获取列表",
+        api: "tenant/project/list",
+        method: "post"
+      },
+      add: {
+        name: "新增",
+        api: "tenant/project/add",
+        method: "post"
+      },
+      edit: {
+        name: "编辑",
+        api: "tenant/project/edit",
+        method: "post"
+      },
+      delete: {
+        name: "删除",
+        api: "tenant/project/delete",
+        method: "post"
+      },
+      key_123456: {
+        name: "获取列表",
+        url: "https://"
+      }
+    }
+  }
+}; 
+
+export const tableItemConfig = key => {
+  const config = tableConfig[key] || null;
+  return JSON.parse(JSON.stringify(config));
+};