update shapeStep

src/views/modules/pms/shapeStep/components/ListViewWithHead.vue

@@ -0,0 +1,523 @@
+<!-- 表格页加上搜索条件 -->
+<template>
+  <div class="list-view-with-head" ref="pointer-loading-ref">
+    <!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> -->
+    <BaseSearchForm :head-config="headConfig" @btn-click="handleBtnClick" />
+
+    <BaseListTable
+      v-loading="tableLoading"
+      :table-config="tableConfig.table"
+      :column-config="tableConfig.column"
+      :table-data="dataList"
+      @operate-event="handleOperate"
+      :current-page="page"
+      :current-size="size"
+      :refresh-layout-key="refreshLayoutKey" />
+
+    <el-pagination
+      v-if="navigator"
+      class="mt-5 flex justify-end"
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"
+      :current-page.sync="page"
+      :page-size.sync="size"
+      :page-sizes="[10, 20, 50, 100]"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+
+    <DialogWithMenu
+      ref="edit-dialog"
+      v-if="!!dialogConfigs && dialogType === DIALOG_WITH_MENU && dialogVisible"
+      :configs="dialogConfigs"
+      @refreshDataList="getList"
+      @destroy="dialogVisible = false" />
+    <DialogJustForm
+      ref="edit-dialog"
+      v-if="!!dialogConfigs && dialogType === DIALOG_JUST_FORM"
+      :dialog-visible.sync="dialogVisible"
+      :configs="dialogConfigs"
+      @refreshDataList="getList"
+      @emit-data="handleOperate" />
+  </div>
+</template>
+
+<script>
+import BaseListTable from "@/components/BaseListTable.vue";
+import BaseSearchForm from "@/components/BaseSearchForm.vue";
+import DialogWithMenu from "./DialogWithMenu.vue";
+import DialogJustForm from "@/components/DialogJustForm.vue";
+import moment from "moment";
+
+const DIALOG_WITH_MENU = "DialogWithMenu";
+const DIALOG_JUST_FORM = "DialogJustForm";
+const DIALOG_CARPAYLOAD = "DialogCarPayload";
+
+export default {
+  name: "ListViewWithHead",
+  components: {
+    BaseSearchForm,
+    BaseListTable,
+    DialogWithMenu,
+    DialogJustForm,
+  },
+  props: {
+    navigator: {
+      type: Boolean,
+      default: true,
+    },
+    tableConfig: {
+      type: Object,
+      default: () => ({
+        /** 列配置, 即 props **/ column: [],
+        /** 表格整体配置 */ table: undefined,
+      }),
+    },
+    headConfig: {
+      type: Object,
+      default: () => ({}),
+    },
+    /** 请求page接口的时候有些字段是必填的，没有会报500，把相关字段名传入这个prop: */
+    listQueryExtra: {
+      type: Array,
+      default: () => ["key"],
+    },
+    attachListQueryExtra: {
+      // 新增时，附带 listQueryExtra 里的哪些键和对应值
+      type: String,
+      default: "",
+    },
+    initDataWhenLoad: { type: Boolean, default: true },
+    /** dialog configs 或许可以从 tableConfig 计算出来 computed... */
+    dialogConfigs: {
+      type: Object,
+      default: () => null,
+    },
+    triggerUpdate: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    dialogType() {
+      return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM;
+    },
+  },
+  activated() {
+    this.refreshLayoutKey = this.layoutTable();
+  },
+  watch: {
+    page: (val) => {
+      console.log("page changed:", val);
+    },
+    size: (val) => {
+      console.log("size changed:", val);
+    },
+    triggerUpdate(val, oldVal) {
+      if (val && val !== oldVal) {
+        // get list
+        this.page = 1;
+        this.size = "defaultPageSize" in this.tableConfig.column ? this.tableConfig.column.defaultPageSize : 20;
+        this.getList();
+      }
+    },
+  },
+  data() {
+    return {
+      DIALOG_WITH_MENU,
+      DIALOG_JUST_FORM,
+      DIALOG_CARPAYLOAD,
+      dialogVisible: false,
+      topBtnConfig: null,
+      totalPage: 0,
+      page: 1,
+      size: 20, // 默认20
+      dataList: [],
+      tableLoading: false,
+      refreshLayoutKey: null,
+      uploadDialogVisible: false,
+      overlayVisible: false,
+      cachedSearchCondition: {},
+      needAttachmentDialog: false,
+    };
+  },
+  inject: ["urls"],
+  mounted() {
+    // 更新页面默认 size
+    const size = "defaultPageSize" in this.tableConfig.column ? this.tableConfig.column.defaultPageSize : 20;
+    this.size = size;
+
+    this.initDataWhenLoad && this.getList();
+  },
+  methods: {
+    /** 获取 列表数据 */
+    getList(queryParams) {
+      this.tableLoading = true;
+
+      const params = queryParams
+        ? { ...queryParams, page: this.page, limit: this.size }
+        : {
+            page: this.page,
+            limit: this.size,
+          };
+
+      if (!queryParams && this.listQueryExtra && this.listQueryExtra.length) {
+        this.listQueryExtra.map((nameOrObj) => {
+          if (typeof nameOrObj === "string") params[nameOrObj] = "";
+          else if (typeof nameOrObj === "object") {
+            Object.keys(nameOrObj).forEach((key) => {
+              params[key] = nameOrObj[key];
+            });
+          }
+        });
+        this.cachedSearchCondition = Object.assign({}, params);
+      }
+
+      this.$http[this.urls.pageIsPostApi ? "post" : "get"](
+        this.urls.page,
+        this.urls.pageIsPostApi
+          ? {
+              ...params,
+            }
+          : {
+              params,
+            }
+      )
+        .then(({ data: res }) => {
+          console.log("[http response] res is: ", res);
+
+          if (res.code === 0) {
+            // page 场景:
+            if ("list" in res.data) {
+              // if (res.data.list.length == 0 && res.data.total != 0) {
+              //   // refresh list
+              //   if (this.page > 1) {
+              //     this.page -= 1
+              //     this.getList()
+              //     return
+              //   } else return
+              // }
+              /** 破碎记录的特殊需求：数据要结合单位 material + materialUnitDictValue */
+              if ("attachDictValue" in this.tableConfig.column) {
+                this.dataList = res.data.list.map((row) => {
+                  this.tableConfig.column.attachDictValue(row, "unit", "qty", "materialUnitDictValue");
+                  return row;
+                });
+              } else this.dataList = res.data.list;
+
+              this.totalPage = res.data.total;
+            } else if ("records" in res.data) {
+              this.dataList = res.data.records.map((item) => ({
+                ...item,
+                id: item._id ?? item.id,
+              }));
+              this.totalPage = res.data.total;
+            } else if (Array.isArray(res.data)) {
+              this.dataList = res.data;
+            } else {
+              this.dataList.splice(0);
+              this.totalPage = 0;
+            }
+          } else {
+            this.$message({
+              message: `${res.code}: ${res.msg}`,
+              type: "error",
+              duration: 2000,
+            });
+          }
+          this.tableLoading = false;
+        })
+        .catch((err) => {
+          this.$message({
+            message: `${err}`,
+            type: "error",
+            duration: 2000,
+          });
+          this.tableLoading = false;
+        });
+      // }
+    },
+
+    layoutTable() {
+      return Math.random();
+    },
+
+    /** 处理 表格操作 */
+    handleOperate({ type, data }) {
+      console.log("payload", type, data);
+      // 编辑、删除、跳转路由、打开弹窗（动态component）都可以在配置里加上 url
+      // payload: { type: string, data: string | number | object }
+      switch (type) {
+        case "delete": {
+          // 找到删除的 prompt 字段
+          const deleteConfig = data.head?.options?.find((item) => item.name === "delete");
+          let promptName = data.name ?? data.id;
+          if (deleteConfig && "promptField" in deleteConfig) {
+            promptName = data[deleteConfig.promptField];
+          }
+
+          let hintMsg = `确定要删除记录 "${promptName}" 吗?`;
+          if (promptName == data.id) {
+            // 如果 promptName 计算出来是 data.id 就以'该记录'代称
+            hintMsg = "确定删除该记录?";
+          }
+
+          let currenPageListLength = this.dataList.length;
+          // 确认是否删除
+          return this.$confirm(hintMsg, "提示", {
+            confirmButtonText: "确认",
+            cancelButtonText: "我再想想",
+            type: "warning",
+          })
+            .then(() => {
+              // this.$http.delete(this.urls.base + `/${data}`).then((res) => {
+              this.$http({
+                url: this.urls.base,
+                method: "DELETE",
+                // data: data.id,
+                data: [`${data.id}`],
+                // headers: {
+                //   "Content-Type": "application/json"
+                // }
+              }).then(({ data: res }) => {
+                if (res.code === 0) {
+                  this.$message.success("删除成功!");
+                  // this.page = 1;
+                  // this.size =
+                  //   "defaultPageSize" in this.tableConfig.column ? this.tableConfig.column.defaultPageSize : 20;
+                  if (currenPageListLength == 1) this.page = this.page > 1 ? this.page - 1 : 1;
+
+                  this.getList();
+                } else {
+                  this.$message({
+                    message: `${res.code}: ${res.msg}`,
+                    type: "error",
+                    duration: 1500,
+                  });
+                }
+              });
+            })
+            .catch((err) => {});
+        }
+        case "edit": {
+          console.log("[edit] ", data);
+          this.openDialog(data); /** data is ==> id */
+          break;
+        }
+        case "view":
+        case "view-detail-action": {
+          this.openDialog(data, true);
+          break;
+        }
+        case "view-attachment": {
+          this.openDialog(data, false, { key: "attachment" });
+          break;
+        }
+        case "copy": {
+          let shouldShowOverlay = false;
+          this.$confirm("是否复制该记录?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          })
+            .then(() => {
+              //
+              let payload = "";
+              console.log("copying...", type, data);
+              if (typeof data === "object") {
+                const head = data.head;
+                const copyOpt =
+                  ("options" in head &&
+                    Array.isArray(head.options) &&
+                    head.options.find((item) => item.name === "copy")) ||
+                  null;
+                if (copyOpt && "showOverlay" in copyOpt && copyOpt.showOverlay) {
+                  this.overlayVisible = true;
+                  shouldShowOverlay = true;
+                  payload = data.id;
+                }
+              } else payload = data;
+
+              return this.$http.post(this.urls.copyUrl, payload, {
+                headers: {
+                  "Content-Type": "application/json",
+                },
+              });
+            })
+            .then(({ data: res }) => {
+              if (res.code === 0) {
+                this.$message({
+                  message: "复制成功!",
+                  type: "success",
+                  duration: 1500,
+                });
+                this.getList();
+              } else {
+                this.$message({
+                  message: `${res.code}: ${res.msg}`,
+                  type: "error",
+                  duration: 1500,
+                });
+              }
+              if (shouldShowOverlay) this.overlayVisible = false;
+            })
+            .catch((errMsg) => {
+              errMsg !== "cancel" &&
+                this.$message({
+                  message: errMsg,
+                  type: "error",
+                  duration: 1500,
+                });
+              if (shouldShowOverlay) this.overlayVisible = false;
+            });
+          break;
+        }
+
+        case "sync": {
+          let shouldShowOverlay = false;
+          let payload = "";
+          console.log("sync...", type, data);
+          if (typeof data === "object") {
+            const head = data.head;
+            const syncOpt =
+              ("options" in head && Array.isArray(head.options) && head.options.find((item) => item.name === "sync")) ||
+              null;
+            if (syncOpt && "showOverlay" in syncOpt && syncOpt.showOverlay) {
+              this.overlayVisible = true;
+              shouldShowOverlay = true;
+              payload = data.id;
+            }
+          } else payload = data;
+
+          this.$message({
+            message: "正在发起同步...",
+            type: "success",
+          });
+
+          // 同步单个料仓数据
+          this.$http
+            .post(this.urls.syncSingleUrl, payload, {
+              headers: {
+                "Content-Type": "application/json",
+              },
+            })
+            .then(({ data: res }) => {
+              this.$message({
+                message: res.msg,
+                type: res.code === 0 ? "success" : "error",
+              });
+              this.getList();
+              if (shouldShowOverlay) this.overlayVisible = false;
+            });
+        }
+      }
+    },
+
+    handleBtnClick({ btnName, payload }) {
+      console.log("[search] form handleBtnClick", btnName, payload);
+      switch (btnName) {
+        case "新增":
+          this.openDialog();
+          break;
+        case "导入":
+          this.openUploadDialog();
+          break;
+        case "手动添加": {
+          this.openDialog();
+          return;
+        }
+        case "查询": {
+          if (typeof payload === "object") {
+            // BaseSearchForm 给这个组件传递了数据
+            Object.assign(this.cachedSearchCondition, payload);
+            if ("timerange" in payload) {
+              if (!!payload.timerange) {
+                const [startTime, endTime] = payload["timerange"];
+                this.cachedSearchCondition.startTime = moment(startTime).format("YYYY-MM-DDTHH:mm:ss");
+                this.cachedSearchCondition.endTime = moment(endTime).format("YYYY-MM-DDTHH:mm:ss");
+              } else {
+                delete this.cachedSearchCondition.startTime;
+                delete this.cachedSearchCondition.endTime;
+              }
+              delete this.cachedSearchCondition.timerange;
+            }
+          }
+
+          /** 处理 listQueryExtra 里的数据 */
+          this.listQueryExtra?.map((cond) => {
+            if (typeof cond === "string") {
+              if (!!payload[cond]) {
+                this.cachedSearchCondition[cond] = payload[cond];
+              } else {
+                this.cachedSearchCondition[cond] = "";
+              }
+            } else if (typeof cond === "object") {
+              Object.keys(cond).forEach((key) => {
+                this.cachedSearchCondition[key] = cond[key];
+              });
+            }
+          });
+          console.log("查询", this.cachedSearchCondition);
+          this.getList(this.cachedSearchCondition);
+          break;
+        }
+        case "同步":
+        case "全部同步":
+          this.$http.post(this.urls.syncUrl).then(({ data: res }) => {
+            console.log("同步", res);
+            this.$message({ message: res.msg, type: res.code === 0 ? "success" : "error" });
+            this.getList();
+          });
+          break;
+      }
+    },
+
+    /** 导航器的操作 */
+    handleSizeChange(val) {
+      // val 是新值
+      this.page = 1;
+      this.size = val;
+      this.getList(this.cachedSearchCondition);
+    },
+
+    handlePageChange(val) {
+      // val 是新值
+      this.getList(this.cachedSearchCondition);
+    },
+
+    /** 打开对话框 */
+    openDialog(row_id, detail_mode, tag_info) {
+      this.dialogVisible = true;
+      let extraParams = null;
+      if (this.attachListQueryExtra && this.listQueryExtra.length) {
+        this.listQueryExtra.forEach((item) => {
+          let found = item[this.attachListQueryExtra];
+          if (found !== null && found !== undefined) extraParams = item;
+        });
+      }
+      this.$nextTick(() => {
+        console.log(`[edit-dialog] extraParams: ${extraParams}`);
+        this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode, tag_info, extraParams);
+      });
+    },
+
+    openUploadDialog() {
+      this.uploadDialogVisible = true;
+
+      this.$nextTick(() => {
+        this.$refs["upload-dialog"].init();
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.list-view-with-head {
+  background: white;
+  /* height: 100%; */
+  min-height: inherit;
+  border-radius: 6px;
+  padding: 16px;
+  box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125);
+}
+</style>

src/views/modules/pms/shapeStep/config.js

@@ -94,6 +94,7 @@ export default function () {
             rules: { required: true, message: "必填项不能为空", trigger: "blur" },
             elparams: { clearable: true, filterable: true, placeholder: "请选择砖型" },
             fetchData: (techId = -1) => this.$http.get("/pms/shape/listUnR", { params: { wsId: 2, key: '', techId } }),
+            fetchDataNeedsId: true,
             cacheFetchedData: true,
             changeReflects: {
               fromKey: 'code',

src/views/modules/pms/shapeStep/index.vue

@@ -9,7 +9,8 @@
 
 <script>
 import initConfig from "./config";
-import ListViewWithHead from "@/views/atomViews/ListViewWithHead.vue";
+// import ListViewWithHead from "@/views/atomViews/ListViewWithHead.vue";
+import ListViewWithHead from "./components/ListViewWithHead.vue";
 
 export default {
   name: "ShapeStepView",
@@ -19,20 +20,6 @@ export default {
       urls: this.allUrls,
     };
   },
-  // urls: {
-  // 	type: Object,
-  // 	required: true,
-  // 	default: () => ({
-  // 		/** 列表 url **/ list: null,
-  // 		/** 分页 url **/ page: null,
-  // 		/** 编辑保存 url **/ edit: null,
-  // 		/** 删除条目 url **/ delete: null,
-  // 		/** 详情 url **/ detail: null,
-  // 		/** 导出 url **/ export: null,
-  // 		/** 导入 url **/ import: null,
-  // 		/** 其他 url **/ other: null,
-  // 	}),
-  // },
   data() {
     const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
     return {

src/views/modules/pms/testingStep/components/DialogWithMenu.vue

@@ -1,3 +1,11 @@
+<!-- 
+  filename: DialogWithMenu.vue
+  author: liubin
+  date: 2023-07-25 09:04:16
+  description: v2.0 (trimmed)
+  last version: @/src/components/DialogWithMenu.vue
+-->
+
 <template>
   <el-dialog
     class="dialog-with-menu"
@@ -378,8 +386,9 @@ export default {
             console.log("[DWM doRequests]", opt.fetchData);
             promiseList.push(async () => {
               this.optionsLoading = true;
-              // const { data: res } = await opt.fetchData(this.dataForm.id ? this.dataForm.id : -1);
-              const { data: res } = await opt.fetchData();
+              const { data: res } = await opt.fetchData(
+                opt.fetchDataNeedsId ? this.dataForm.id : undefined
+              );
               if (opt.cacheFetchedData) this.cached[opt.prop] = "list" in res.data ? res.data.list : res.data || [];
               console.log("[DWM doRequests] res", res);
               if (res.code === 0) {

src/views/modules/pms/testingStep/config.js

@@ -95,6 +95,8 @@ export default function () {
             elparams: { clearable: true, filterable: true, placeholder: "请选择砖型" },
             // 下面参数的 techId 是为 /pms/xxx/listUnR 接口定制的，默认为 -1，新增时使用，编辑时传对应的 工艺id
             fetchData: (techId = -1) => this.$http.get("/pms/shape/listUnR", { params: { wsId: 4, key: '', techId } }),
+            // 当 fetchData 需要额外参数时，需要加上下面这项配置
+            fetchDataNeedsId: true,
             cacheFetchedData: true,
             changeReflects: {
               fromKey: 'code',