@wakaka1/adaptive-page 2.0.0 → 2.0.1

package/README.md

@@ -1,6 +1,10 @@
-adaptive-page，
 表格数组展示控件，
 在 umy-ui 基础上进行扩展。
+包括两个页面和一个组件：
+
+- 主子表页面`main-sub-table`
+- 简单表格`simple-table`
+- 表格组件`adaptive-page`
 
 ## 使用
 
@@ -44,9 +48,436 @@ Vue.use(AdaptivePage);
     shrink: "收起",
     unfold: "展开",
   },
+  global: {
+    add: "新建",
+    edit: "编辑",
+    delete: "删除",
+    import: "导入",
+    export: "导出"
+  }
 ```
 
-## 列设置
+## simple-table
+
+简单表格页面提供展示表格数据的页面，
+以及导入、导出、新增、编辑、删除操作。
+
+**示例**：
+
+```
+<template>
+  <simple-table
+    :tableTitle="tableTitle"
+    :columns="computedColumns"
+    :toolbar-opts="toolbarOpts"
+    :apiList="getList"
+    :importBtn="importBtn"
+    :exportBtn="exportBtn"
+    :addBtn="addBtn"
+    @searchChange="onSearchChange"
+    ref="simpleTable"
+    class="mall-product"
+  >
+    <template #header-operator-pre>
+      <el-button
+        size="mini"
+        class="btn-title"
+        type="primary"
+        @click="navTo(true)"
+        :disabled="!canEdit"
+        v-permission="['accounts:explosion-pile:list:edit']"
+        >{{ $t("global.edit") }}</el-button
+      >
+    </template>
+  </simple-table>
+</template>
+<script>
+import { columns, toolbarOpts } from "./crud";
+import {
+  getExplosionPileList,
+  exportExplosivePile,
+} from "@/api/account-explosion";
+import dayjs from "dayjs";
+export default {
+  data() {
+    return {
+      dynamicColumns: [],
+      columns,
+      exportBtn: {
+        permission: ["accounts:explosion-pile:list:export"],
+        api: exportExplosivePile,
+      },
+      importBtn: {
+        permission: ["accounts:explosion-pile:list:import"],
+        importType: "explosionPile",
+      },
+      addBtn: {
+        permission: ["accounts:explosion-pile:list:add"],
+        func: () => {
+          this.navTo(false);
+        },
+      },
+      toolbarOpts,
+      canEdit: false,
+      tableTitle: `${this.$t("accounts.explosion.Explosion_Title")} ${this.$t(
+        "accounts.explosion.Current_Check"
+      )}  --`,
+    };
+  },
+  computed: {
+    computedColumns() {
+      let cols = this.columns.slice(0);
+      let dynamicColumns = this.dynamicColumns.slice(0);
+      const list = dynamicColumns.map((item) => ({
+        prop: item.prop,
+        label: item.label,
+      }));
+      console.log([...cols, ...list], "computedColumns");
+      return [...cols, ...list];
+    },
+  },
+  methods: {
+    onSearchChange(newVal) {
+      this.tableTitle = `${this.$t(
+        "accounts.explosion.Explosion_Title"
+      )} ${this.$t("accounts.explosion.Current_Check")}  ${
+        newVal.explosivePileDate || "--"
+      }`;
+    },
+    navTo(data) {
+      const date = data
+        ? this.$refs.simpleTable.search.explosivePileDate
+        : dayjs().format("YYYY-MM-DD");
+      this.$router.push({
+        path: data
+          ? "/accounts/explosion-pile/edit"
+          : "/accounts/explosion-pile/add",
+        query: {
+          date,
+        },
+      });
+    },
+    getList(param) {
+      return getExplosionPileList(param).then((res) => {
+        this.canEdit = res.data?.data?.length > 0 || false;
+        this.dynamicColumns = res.data?.dynamicHeaders || [];
+        return res;
+      });
+    },
+  },
+  mounted() {
+    this.$refs.simpleTable.search.explosivePileDate =
+      dayjs().format("YYYY-MM-DD");
+    this.$refs.simpleTable.table.pageShow = false;
+  },
+};
+</script>
+<style lang="scss" scoped>
+.btn-title {
+  color: #ffffff;
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  margin-left: 10px;
+  margin-bottom: 1px;
+  padding: 5px 15px;
+}
+::v-deep .el-date-editor .el-input__inner {
+  padding-left: 25px !important;
+}
+</style>
+```
+
+**attributes**:
+
+```
+  props: {
+    /**
+     * 获取数据的接口
+     */
+    apiList: {
+      type: Function,
+    },
+    /**
+     * 格式化搜索选项
+     */
+    formatSearch: {
+      type: Function,
+    },
+    /**
+     * 导入按钮的相关配置，包括hidden（未提供时默认显示），permission, func(提供时优先执行该方法，否则跳转导入页面), importType(默认跳转行为的导入类型)
+     */
+    importBtn: Object,
+    /**
+     * 导出按钮的相关配置，包括hidden（未提供时默认显示），permission, func(提供时优先执行该方法，否则使用apiExport执行默认导出), api
+     */
+    exportBtn: Object,
+    /**
+     * 添加按钮的相关配置，包括hidden（未提供时默认显示），permission, func(提供时优先执行该方法，否则跳转添加页面), route(默认跳转的路由)
+     */
+    addBtn: Object,
+    /**
+     * 编辑按钮的相关配置，包括hidden（未提供时默认显示），permission, func(提供时优先执行该方法，否则用route执行默认跳转), route
+     */
+    editBtn: Object,
+    /**
+     * 删除按钮的相关配置，包括hidden（未提供时默认显示），permission, func(提供时优先执行该方法，否则用api执行默认删除), api
+     */
+    deleteBtn: Object,
+  },
+```
+
+**Events**:
+
+- `searchChange`: 查询控件的 Input 事件时触发
+
+**Slots**:
+
+- `header-operator-pre`: 标题栏搜索控件后、导入导出按钮前的插槽
+- `header-operator-post`: 标题栏导入导出按钮后的插槽
+- `row-operator-pre`: 行操作编辑、删除之前的插槽
+- `row-operator-post`: 行操作编辑、删除之后的插槽
+
+## main-sub-table
+
+主子表格页面提供展示左侧主表概览，右上主数据描述，右下子表的页面。
+以及导入、导出、新增、编辑、删除操作。
+
+**示例**:
+
+```
+<template>
+  <main-sub-table
+    title="穿孔记录"
+    :mainColumns="mainColumns"
+    :subColumns="subColumns"
+    :apiMainList="apiMainList"
+    :apiSubList="apiSubList"
+    :importBtn="importBtn"
+    :exportBtn="exportBtn"
+    :addBtn="addBtn"
+    :editBtn="editBtn"
+    :deleteBtn="deleteBtn"
+    :formatSearch="formatSearch"
+  >
+  </main-sub-table>
+</template>
+
+<script>
+import { mainColumns, subColumns } from "./adCrud.js";
+import { getUnit } from "@/utils";
+import {
+  apiGetPuncherList,
+  apiDeletePuncher,
+  apiExportPuncher,
+  detailPuncherLoadItemList,
+} from "@/api/account-puncher";
+import { getDeviceList } from "@/api/auxiliary";
+
+import { Equipment_Classify_Puncher } from "@/const/index";
+
+export default {
+  name: "accounts-puncher-list",
+  data() {
+    return {
+      deviceList: [],
+      currentRoute: null,
+      totalDepthLabel: "",
+      totalVolumeLabel: "",
+      itemDepthLabel: "",
+      itemVolumnLabel: "",
+      importBtn: {
+        permission: ["accounts:puncher:list:import"],
+        importType: "puncher",
+      },
+      exportBtn: {
+        permission: ["accounts:puncher:list:export"],
+        api: apiExportPuncher,
+      },
+      addBtn: {
+        permission: ["accounts:puncher:list:add"],
+        route: "/accounts/puncher/add",
+      },
+      apiMainList: apiGetPuncherList,
+      apiSubList: detailPuncherLoadItemList,
+      editBtn: {
+        permission: ["accounts:puncher:list:edit"],
+        route: "/accounts/puncher/edit",
+      },
+      deleteBtn: {
+        permission: ["accounts:puncher:list:delete"],
+        api: apiDeletePuncher,
+      },
+    };
+  },
+  computed: {
+    mainColumns() {
+      let res = [...mainColumns];
+      for (let i = 0, len = res.length; i < len; i++) {
+        let col = res[i];
+        if (col.prop === "deviceName") {
+          col.search.bind.optionSource = this.deviceList;
+        }
+        if (col.prop === "totalPenetrationDepth") {
+          col.label = this.totalDepthLabel;
+        }
+        if (col.prop === "totalPenetrationVolume") {
+          col.label = this.totalVolumeLabel;
+        }
+      }
+      return res;
+    },
+    subColumns() {
+      let res = [...subColumns];
+      for (let i = 0, len = res.length; i < len; i++) {
+        let col = res[i];
+        if (col.prop === "penetrationDepth") {
+          col.label = this.itemDepthLabel;
+        }
+        if (col.prop === "penetrationVolume") {
+          col.label = this.itemVolumnLabel;
+        }
+      }
+      return res;
+    },
+  },
+  methods: {
+    formatSearch(example) {
+      if (!!example.workDate && example.workDate.length > 0) {
+        example.workDateStart = example.workDate[0];
+        example.workDateEnd = example.workDate[1];
+      } else {
+        delete example.workDateStart;
+        delete example.workDateEnd;
+      }
+      return example;
+    },
+    initLabelWithUnit() {
+      this.totalDepthLabel = this.$t("accounts.puncher.Total_Puncher_Depth");
+      this.totalVolumeLabel = this.$t("accounts.puncher.Total_Puncher_Volume");
+      this.itemDepthLabel = this.$t("accounts.puncher.Puncher_Depth");
+      this.itemVolumnLabel = this.$t("accounts.puncher.Puncher_Volume");
+      this.currentRoute = this.$route.path;
+      let tmpData = JSON.parse(localStorage.getItem("unitConfigs"));
+      if (Object.keys(tmpData).length !== 0) {
+        const mainDepthConfig =
+          tmpData[this.currentRoute]["/mmes/punchingBook/list"][
+            "data.totalPenetrationDepth"
+          ];
+        const mainVolumeConfig =
+          tmpData[this.currentRoute]["/mmes/punchingBook/list"][
+            "data.totalPenetrationVolume"
+          ];
+        if (mainDepthConfig?.category) {
+          this.totalDepthLabel += `(${mainDepthConfig.symbol})`;
+        }
+        if (mainVolumeConfig?.category) {
+          this.totalVolumeLabel += `(${mainVolumeConfig.symbol})`;
+        }
+        const subDepthConfig =
+          tmpData[this.currentRoute]["/mmes/punchingBook/listByParent"][
+            "penetrationDepth"
+          ];
+
+        const subVolumeConfig =
+          tmpData[this.currentRoute]["/mmes/punchingBook/listByParent"][
+            "penetrationVolume"
+          ];
+
+        if (subDepthConfig?.category) {
+          this.itemDepthLabel += `(${subDepthConfig.symbol})`;
+          this.itemVolumnLabel += `(${subVolumeConfig.symbol})`;
+        }
+      } else {
+        this.totalDepthLabel += `(${getUnit("length")})`;
+        this.totalVolumeLabel += `(${getUnit("volume")})`;
+        this.itemDepthLabel += `(${getUnit("length")})`;
+        this.itemVolumnLabel += `(${getUnit("volume")})`;
+      }
+    },
+  },
+  mounted() {
+    this.initLabelWithUnit();
+    getDeviceList({ deviceClassifyIds: [Equipment_Classify_Puncher] }).then(
+      (res) => {
+        this.deviceList = res.data.map((x) => ({
+          id: x.id,
+          name: x.assetName || x.deviceCode,
+        }));
+      }
+    );
+  },
+};
+</script>
+```
+
+**attributes**
+
+```
+  props: {
+    /**
+     * 标题
+     */
+    title: String,
+    /**
+     * 访问主列表的api
+     */
+    apiMainList: {
+      type: Function,
+    },
+    /**
+     * 访问子列表的api
+     */
+    apiSubList: {
+      type: Function,
+    },
+    /**
+     * 导入按钮的相关配置，包括hidden（未提供时默认显示），permission, func(提供时优先执行该方法，否则跳转导入页面), importType(默认跳转的参数)
+     */
+    importBtn: Object,
+    /**
+     * 导出按钮的相关配置，包括hidden（未提供时默认显示），permission, func(提供时优先执行该方法，否则使用apiExport执行默认导出), api
+     */
+    exportBtn: Object,
+    /**
+     * 添加按钮的相关配置，包括hidden（未提供时默认显示），permission, func(提供时优先执行该方法，否则跳转添加页面), route(默认跳转的路由)
+     */
+    addBtn: Object,
+    /**
+     * 格式化搜索选项
+     */
+    formatSearch: {
+      type: Function,
+    },
+    /**
+     * 主列表的配置
+     */
+    mainColumns: {
+      type: Array,
+    },
+    /**
+     * 子列表的配置
+     */
+    subColumns: { type: Array },
+    /**
+     * 编辑按钮的相关配置，包括hidden（未提供时默认显示），permission, func(提供时优先执行该方法，否则用route执行默认跳转), route
+     */
+    editBtn: Object,
+    /**
+     * 删除按钮的相关配置，包括hidden（未提供时默认显示），permission, func(提供时优先执行该方法，否则用api执行默认删除), api
+     */
+    deleteBtn: Object,
+  },
+```
+
+## adaptive-page
+
+和之前的 adaptive-page 兼容。
+
+增加 toolbarOpts 属性，
+toolbarOpts 中提供的内容与 opts 一致，
+但 toolbarOpts 提供的搜索会与标题栏出现在同一行。
+
+### 列设置
 
 在 adaptive-page 组件上，
 打开 columnSetting 开关。