wkjp-list-page 1.0.0

package/README.md

@@ -0,0 +1,55 @@
+# wkjp-common-list-page
+
+基于 Vue2 + ElementUI 的通用列表组件，支持：
+- 配置化搜索区
+- 配置化表格列（含 slot）
+- 托管请求模式（api/buildParams/apiAdapter）
+- 列配置弹窗（显隐 + 拖拽排序）
+
+## 安装
+
+```bash
+npm i wkjp-common-list-page
+```
+
+## 使用
+
+```js
+import Vue from "vue";
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+import CommonListPage from "wkjp-common-list-page";
+
+Vue.use(ElementUI);
+Vue.use(CommonListPage);
+```
+
+或按需引入：
+
+```js
+import { CommonListPage } from "wkjp-common-list-page";
+
+export default {
+  components: { CommonListPage }
+};
+```
+
+## 基础示例
+
+```vue
+<template>
+  <common-list-page
+    :filters="filters"
+    :search-option="searchOption"
+    :columns="columns"
+    :api="apiFn"
+    :enable-column-config="true"
+  />
+</template>
+```
+
+## 发布
+
+1. 修改 `package.json` 中 `name` 和 `version`
+2. 登录 npm：`npm login`
+3. 发布：`npm publish`

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "wkjp-list-page",
+  "version": "1.0.0",
+  "description": "Vue2 + ElementUI CommonListPage component",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "vue2",
+    "element-ui",
+    "table",
+    "list"
+  ],
+  "peerDependencies": {
+    "vue": "^2.6.14",
+    "element-ui": "^2.15.14"
+  },
+  "license": "MIT"
+}

package/src/components/CommonListPage.vue

@@ -0,0 +1,365 @@
+<template>
+  <section>
+    <el-form inline :model="filters">
+      <el-form-item v-for="(item, index) in searchOption" :key="`search-${index}`">
+        <slot v-if="item.type === 'slot'" :name="item.slot" :item="item" :filters="filters"></slot>
+        <el-input
+          v-else-if="item.type === 'input'"
+          v-model="filters[item.prop]"
+          :style="{ width: `${item.width || 150}px` }"
+          :placeholder="item.placeholder || ''"
+          :clearable="item.clearable"
+          @keyup.enter.native="emitQuery"
+        ></el-input>
+        <el-select
+          v-else-if="item.type === 'select'"
+          :value="resolveValue(item)"
+          :multiple="item.multiple === true"
+          :clearable="item.clearable !== false"
+          :style="{ width: `${item.width || 150}px` }"
+          :placeholder="item.placeholder || ''"
+          @change="(val) => handleFieldChange(item, val)"
+        >
+          <el-option
+            v-for="option in item.options || []"
+            :key="`${item.prop}-${option.value}`"
+            :label="option.label"
+            :value="option.value"
+          ></el-option>
+        </el-select>
+        <el-date-picker
+          v-else-if="isDatePicker(item.type)"
+          :value="resolveValue(item)"
+          :type="item.type || 'date'"
+          :unlink-panels="item.unlinkPanels !== false"
+          :editable="item.editable === true"
+          :range-separator="item.rangeSeparator || '至'"
+          :style="{ width: `${item.width || (item.type === 'daterange' ? 220 : 150)}px` }"
+          :placeholder="item.placeholder || ''"
+          :end-placeholder="item.endPlaceholder || ''"
+          :start-placeholder="item.startPlaceholder || ''"
+          :value-format="item.valueFormat || 'yyyy-MM-dd'"
+          @change="(val) => handleFieldChange(item, val)"
+        ></el-date-picker>
+      </el-form-item>
+      <slot name="search-extra"></slot>
+      <el-form-item v-if="enableColumnConfig" style="float: right; margin-left: 12px">
+        <el-button type="primary" plain @click="openColumnConfig">配置表单</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="resolvedTableData" v-loading="resolvedLoading" v-bind="tableAttrs">
+      <template v-for="(col, idx) in visibleColumns">
+        <el-table-column
+          v-if="col.type !== 'slot'"
+          :key="`col-${idx}-${col.prop || col.label}`"
+          v-bind="col"
+        >
+          <template slot-scope="scope">
+            <span>{{ resolveCellText(col, scope.row, scope.$index) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-else
+          :key="`slot-col-${idx}-${col.slot}`"
+          v-bind="omitSlotType(col)"
+        >
+          <template slot-scope="scope">
+            <slot :name="col.slot" :row="scope.row" :scope="scope"></slot>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <el-pagination
+      v-if="resolvedPagination"
+      background
+      :total="resolvedPagination.total"
+      :current-page="resolvedPagination.page"
+      :page-size="resolvedPagination.pageSize"
+      :page-sizes="resolvedPagination.pSizes || [10, 50, 100, 200]"
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"
+      layout="total, sizes, prev, pager, next, jumper"
+    ></el-pagination>
+
+    <el-dialog
+      title="配置表单"
+      :visible.sync="columnConfigVisible"
+      width="900px"
+      :close-on-click-modal="false"
+    >
+      <div class="column-config-desc">拖动调整列顺序，勾选控制是否显示</div>
+      <ul class="column-config-list">
+        <li
+          v-for="(col, index) in configColumns"
+          :key="col._configKey"
+          :draggable="!isFixedColumn(col)"
+          class="column-config-item"
+          :class="{ 'column-config-item--fixed': isFixedColumn(col) }"
+          @dragstart="onDragStart(index)"
+          @dragover.prevent
+          @drop="onDrop(index)"
+        >
+          <i class="el-icon-rank"></i>
+          <el-checkbox v-model="col._visible">{{ col.label || col.prop || col.slot }}</el-checkbox>
+          <el-tag v-if="isFixedColumn(col)" type="info" size="mini">固定</el-tag>
+        </li>
+      </ul>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="columnConfigVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmColumnConfig">确 定</el-button>
+      </span>
+    </el-dialog>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "CommonListPage",
+  props: {
+    filters: { type: Object, required: true },
+    searchOption: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] },
+    tableData: { type: Array, default: () => [] },
+    loading: { type: Boolean, default: false },
+    pagination: { type: Object, default: null },
+    tableAttrs: { type: Object, default: () => ({}) },
+    api: { type: Function, default: null },
+    buildParams: { type: Function, default: null },
+    apiAdapter: { type: Function, default: null },
+    autoRequest: { type: Boolean, default: true },
+    enableColumnConfig: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      innerLoading: false,
+      innerTableData: [],
+      innerPagination: {
+        total: 0,
+        page: 1,
+        pageSize: 10,
+        pSizes: [10, 50, 100, 200]
+      },
+      columnConfigVisible: false,
+      draggingIndex: -1,
+      configColumns: [],
+      appliedColumns: []
+    };
+  },
+  computed: {
+    visibleColumns() {
+      const source = this.enableColumnConfig ? this.appliedColumns : this.columns;
+      return source.filter((item) => item && item.hidden !== true && item._visible !== false);
+    },
+    useInnerApi() {
+      return typeof this.api === "function";
+    },
+    resolvedTableData() {
+      return this.useInnerApi ? this.innerTableData : this.tableData;
+    },
+    resolvedLoading() {
+      return this.useInnerApi ? this.innerLoading : this.loading;
+    },
+    resolvedPagination() {
+      return this.useInnerApi ? this.innerPagination : this.pagination;
+    }
+  },
+  watch: {
+    columns: {
+      immediate: true,
+      deep: true,
+      handler(cols) {
+        this.initColumnConfig(cols || []);
+      }
+    },
+    pagination: {
+      deep: true,
+      immediate: true,
+      handler(v) {
+        if (!this.useInnerApi || !v) return;
+        this.innerPagination = { ...this.innerPagination, ...v };
+      }
+    }
+  },
+  created() {
+    if (this.useInnerApi && this.autoRequest) this.fetchList();
+  },
+  methods: {
+    emitQuery() {
+      this.$emit("query");
+    },
+    resolveValue(item) {
+      if (Object.prototype.hasOwnProperty.call(item, "value")) return item.value;
+      return this.filters[item.prop];
+    },
+    handleFieldChange(item, value) {
+      if (item.prop) this.$set(this.filters, item.prop, value);
+      if (typeof item.onChange === "function") item.onChange(value);
+      if (item.autoQuery !== false) {
+        if (this.useInnerApi) this.fetchList({ resetPage: true });
+        else this.emitQuery();
+      }
+    },
+    isDatePicker(type) {
+      return ["date", "daterange", "datetime", "datetimerange", "month", "year"].includes(type);
+    },
+    resolveCellText(col, row, index) {
+      const value = typeof col.valueGetter === "function" ? col.valueGetter(row, index) : row[col.prop];
+      if (typeof col.textFormatter === "function") return col.textFormatter(value, row, index);
+      if (value === null || value === undefined || value === "") return col.defaultText !== undefined ? col.defaultText : "--";
+      return value;
+    },
+    omitSlotType(col) {
+      const { type, slot, ...rest } = col;
+      return rest;
+    },
+    handleSizeChange(size) {
+      if (this.useInnerApi) {
+        this.innerPagination.pageSize = size;
+        this.innerPagination.page = 1;
+        this.fetchList();
+      }
+      this.$emit("size-change", size);
+    },
+    handlePageChange(page) {
+      if (this.useInnerApi) {
+        this.innerPagination.page = page;
+        this.fetchList();
+      }
+      this.$emit("page-change", page);
+    },
+    buildRequestParams() {
+      const page = this.innerPagination.page;
+      const pageSize = this.innerPagination.pageSize;
+      if (typeof this.buildParams === "function") return this.buildParams(this.filters, { page, pageSize });
+      return {
+        ...this.filters,
+        currentPage: page,
+        pageSize
+      };
+    },
+    normalizeApiResult(res) {
+      if (typeof this.apiAdapter === "function") return this.apiAdapter(res) || { list: [], total: 0 };
+      if (res && res.object) {
+        return {
+          list: res.object.list || [],
+          total: res.object.num || 0
+        };
+      }
+      return { list: [], total: 0 };
+    },
+    fetchList({ resetPage = false } = {}) {
+      if (!this.useInnerApi) return Promise.resolve();
+      if (resetPage) this.innerPagination.page = 1;
+      const params = this.buildRequestParams();
+      this.innerLoading = true;
+      return this.api(params)
+        .then((res) => {
+          const { list, total } = this.normalizeApiResult(res);
+          this.innerTableData = list;
+          this.innerPagination.total = total;
+          this.$emit("fetched", {
+            list,
+            total,
+            page: this.innerPagination.page,
+            pageSize: this.innerPagination.pageSize,
+            raw: res
+          });
+        })
+        .finally(() => {
+          this.innerLoading = false;
+        });
+    },
+    buildConfigKey(col, index) {
+      return `${col.prop || col.slot || col.label || "col"}-${index}`;
+    },
+    initColumnConfig(cols) {
+      const mapped = cols.map((col, index) => ({
+        ...col,
+        _configKey: this.buildConfigKey(col, index),
+        _visible: col.hidden !== true
+      }));
+      const sorted = this.sortConfigColumns(mapped);
+      this.appliedColumns = sorted.map((col) => ({ ...col }));
+      this.configColumns = sorted.map((col) => ({ ...col }));
+    },
+    openColumnConfig() {
+      this.configColumns = this.sortConfigColumns(this.appliedColumns.map((col) => ({ ...col })));
+      this.columnConfigVisible = true;
+    },
+    confirmColumnConfig() {
+      this.appliedColumns = this.configColumns.map((col) => ({
+        ...col,
+        hidden: col._visible === false
+      }));
+      this.columnConfigVisible = false;
+      this.$emit("columns-change", this.appliedColumns);
+    },
+    onDragStart(index) {
+      if (this.isFixedColumn(this.configColumns[index])) return;
+      this.draggingIndex = index;
+    },
+    onDrop(targetIndex) {
+      if (this.draggingIndex < 0 || this.draggingIndex === targetIndex) return;
+      const target = this.configColumns[targetIndex];
+      const moving = this.configColumns[this.draggingIndex];
+      if (this.isFixedColumn(target) || this.isFixedColumn(moving)) {
+        this.draggingIndex = -1;
+        return;
+      }
+      const next = [...this.configColumns];
+      next[this.draggingIndex] = target;
+      next[targetIndex] = moving;
+      this.configColumns = next;
+      this.draggingIndex = -1;
+    },
+    isFixedColumn(col) {
+      return col && (col.fixed === "left" || col.fixed === "right" || col.configFixed === true);
+    },
+    isRightFixedColumn(col) {
+      return col && col.fixed === "right";
+    },
+    isLeftFixedColumn(col) {
+      return col && (col.fixed === "left" || (col.configFixed === true && col.fixed !== "right"));
+    },
+    sortConfigColumns(cols) {
+      const leftFixedCols = cols.filter((item) => this.isLeftFixedColumn(item));
+      const normalCols = cols.filter((item) => !this.isFixedColumn(item));
+      const rightFixedCols = cols.filter((item) => this.isRightFixedColumn(item));
+      return [...leftFixedCols, ...normalCols, ...rightFixedCols];
+    }
+  }
+};
+</script>
+
+<style scoped>
+.column-config-desc {
+  margin-bottom: 10px;
+  color: #909399;
+}
+.column-config-list {
+  max-height: 420px;
+  overflow: auto;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+.column-config-item {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  padding: 8px 10px;
+  cursor: move;
+  min-width: 0;
+}
+.column-config-item--fixed {
+  background: #f5f7fa;
+  cursor: not-allowed;
+}
+</style>

package/src/index.js

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