update 物料

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

@@ -0,0 +1,255 @@
+<!-- 
+/**
+ * 说明：表格页加上搜索条件 - <物料管理>模块的定制化版本
+ * 
+ **/ 
+-->
+<template>
+  <div class="list-view-with-head">
+    <!-- <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"
+    />
+
+    <el-pagination
+      class="mt-5 flex justify-end"
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"
+      :current-page.sync="page"
+      :page-sizes="[1, 5, 10, 20, 50, 100]"
+      :page-size="size"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper"
+    ></el-pagination>
+    <!-- :current-page.sync="currentPage"
+			:page-size.sync="pageSize" -->
+
+    <DialogWithMenu ref="edit-dialog" v-if="dialogType === DIALOG_WITH_MENU && dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" />
+    <DialogJustForm ref="edit-dialog" v-if="dialogType === DIALOG_JUST_FORM && dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" />
+  </div>
+</template>
+
+<script>
+import BaseListTable from "@/components/BaseListTable.vue";
+import BaseSearchForm from "@/components/BaseSearchForm.vue";
+import DialogWithMenu from "@/components/DialogWithMenu.vue";
+import DialogJustForm from "@/components/DialogJustForm.vue";
+
+const DIALOG_WITH_MENU = "DialogWithMenu";
+const DIALOG_JUST_FORM = "DialogJustForm";
+
+export default {
+  name: "ListViewWithHead",
+  components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm },
+  props: {
+    tableConfig: {
+      type: Object,
+      default: () => ({
+        /** 列配置, 即 props **/ columnConfig: [],
+        /** 表格整体配置 */ tableConfig: undefined,
+      }),
+    },
+    headConfig: {
+      type: Object,
+      default: () => ({}),
+    },
+    /** 请求page接口的时候有些字段是必填的，没有会报500，把相关字段名传入这个prop: */
+    listQueryExtra: {
+      type: Array,
+      default: () => ["key"],
+    },
+    initDataWhenLoad: { type: Boolean, default: true },
+    /** dialog configs 或许可以从 tableConfig 计算出来 computed... */
+    dialogConfigs: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    dialogType() {
+      return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM;
+    },
+  },
+  data() {
+    return {
+      DIALOG_WITH_MENU,
+      DIALOG_JUST_FORM,
+      dialogVisible: false,
+      topBtnConfig: null,
+      totalPage: 100,
+      page: 1,
+      size: 20, // 默认20
+      dataList: [],
+      tableLoading: false,
+    };
+  },
+  inject: ["urls"],
+  mounted() {
+    this.initDataWhenLoad && this.getList();
+  },
+  methods: {
+    /**
+     * 转换服务器数据的中间层
+     * 为了抹平真实服务器数据和我本地的测试服务器数据的差异
+     **/
+    prehandle_data(list) {
+      /** 根据具体情况修改 */
+      list.forEach((data) => {
+        data.id = data._id;
+        delete data._id;
+      });
+      return list;
+    },
+
+    /** 获取 列表数据 */
+    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.length) {
+        this.listQueryExtra.map((name) => {
+          params[name] = "";
+        });
+      }
+
+      this.$http
+        .get(this.urls.page, {
+          params,
+        })
+        .then(({ data: res }) => {
+          console.log("[http response] res is: ", res);
+
+          // page 场景:
+          if ("list" in res.data) {
+            // real env:
+            this.dataList = res.data.list.map((item) => ({
+              ...item,
+              id: item._id ?? item.id,
+            }));
+            // this.dataList = res.data.records;
+            this.totalPage = res.data.total;
+          } else if ("records" in res.data) {
+            // dev env:
+            this.dataList = res.data.records.map((item) => ({
+              ...item,
+              id: item._id ?? item.id,
+            }));
+            // this.dataList = res.data.records;
+            this.totalPage = res.data.total;
+          } else {
+            this.dataList.splice(0);
+            this.totalPage = 0;
+          }
+          this.tableLoading = false;
+        });
+    },
+
+    /** 处理 HeadForm 的操作 */
+    handleHeadformOperate(payload) {
+      // 查询，导出，导入，等等
+      console.log("headform operate: ", payload);
+    },
+
+    /** 处理 表格操作 */
+    handleOperate({ type, data }) {
+      console.log("payload", type, data);
+      // 编辑、删除、跳转路由、打开弹窗（动态component）都可以在配置里加上 url
+      // payload: { type: string, data: string | number | object }
+      switch (type) {
+        case "delete": {
+          // 确认是否删除
+          return this.$confirm(`是否删除条目: ${data}`, "提示", {
+            confirmButtonText: "确认",
+            cancelButtonText: "我再想想",
+            type: "warning",
+          })
+            .then(() => {
+              // this.$http.delete(this.urls.base + `/${data}`).then((res) => {
+              this.$http({
+                url: this.urls.base,
+                method: "DELETE",
+                data: [`${data}`],
+              }).then(({ data: res }) => {
+                if (res.code === 0) {
+                  this.$message.success("删除成功!");
+
+                  this.page = 1;
+                  this.size = 10;
+                  this.getList();
+                }
+              });
+            })
+            .catch((err) => {});
+        }
+        case "edit": {
+          this.openDialog(data); /** data is ==> id */
+          break;
+        }
+        case "view":
+        case "view-detail-action": {
+          this.openDialog(data, true);
+          break;
+        }
+      }
+    },
+
+    handleBtnClick({ btnName, payload }) {
+      console.log("[search] form handleBtnClick", btnName, payload);
+      switch (btnName) {
+        case "新增":
+          this.openDialog();
+          break;
+        case "查询": {
+          this.getList(payload);
+          break;
+        }
+      }
+    },
+
+    /** 导航器的操作 */
+    handleSizeChange(val) {
+      // val 是新值
+      this.page = 1;
+      this.size = val;
+      this.getList();
+    },
+
+    handlePageChange(val) {
+      // val 是新值
+      this.getList();
+    },
+
+    /** 打开对话框 */
+    openDialog(row_id, detail_mode) {
+      this.dialogVisible = true;
+
+      this.$nextTick(() => {
+        this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode);
+      });
+    },
+  },
+};
+</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/material/index.vue

@@ -4,31 +4,16 @@
 
 <script>
 import initConfig from './config';
-import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue';
+import ListViewWithHead from './components/ListViewWithHead.vue';
 
 export default {
-	name: 'BlenderView',
+	name: 'MaterialView',
 	components: { ListViewWithHead },
 	provide() {
 		return {
 			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 {