From 9ccc8b44b358a4f5c2135230eccc1bf5510d4d85 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Thu, 2 Feb 2023 17:03:28 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E8=AE=BE=E5=A4=87=E8=A1=A8=E3=80=81?=
 =?UTF-8?q?=E4=BA=A7=E5=93=81=E8=A1=A8=20&=20=E5=90=8C=E6=AD=A5DialogJustF?=
 =?UTF-8?q?orm=E5=88=B0DialogWithMenu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DialogJustForm.vue         |   2 -
 src/components/DialogWithMenu.vue         | 791 +++++++++++-----------
 src/views/modules/pms/equipment/config.js | 140 ++++
 src/views/modules/pms/equipment/index.vue |  32 +
 src/views/modules/pms/product/config.js   | 149 ++++
 src/views/modules/pms/product/index.vue   |  32 +
 6 files changed, 747 insertions(+), 399 deletions(-)
 create mode 100644 src/views/modules/pms/equipment/config.js
 create mode 100644 src/views/modules/pms/equipment/index.vue
 create mode 100644 src/views/modules/pms/product/config.js
 create mode 100644 src/views/modules/pms/product/index.vue

diff --git a/src/components/DialogJustForm.vue b/src/components/DialogJustForm.vue
index 867a514..d06821c 100644
--- a/src/components/DialogJustForm.vue
+++ b/src/components/DialogJustForm.vue
@@ -162,8 +162,6 @@ export default {
             } else {
               col.options.splice(0);
             }
-
-            return col;
           });
         }
       });
diff --git a/src/components/DialogWithMenu.vue b/src/components/DialogWithMenu.vue
index 46fdf2a..fb46f76 100644
--- a/src/components/DialogWithMenu.vue
+++ b/src/components/DialogWithMenu.vue
@@ -1,130 +1,82 @@
 <template>
-	<el-dialog
-		class="dialog-with-menu"
-		:visible="selfVisible"
-		@close="handleClose"
-		:distory-on-close="true"
-	>
-		<!-- title  -->
-		<div slot="title" class="dialog-title">
-			<h1 class="">
-				{{ detailMode ? "查看详情" : dataForm.id ? "编辑" : "新增" }}
-			</h1>
-		</div>
-		<!-- menu  -->
-		<el-tabs v-model="activeMenu" type="card" @tab-click="handleTabClick">
-			<!-- <el-tab-pane v-for="(tab, index) in configs.menu" :key="index" :label="tab.name" :name="tab.name"> -->
-			<el-tab-pane
-				v-for="(tab, index) in actualMenus"
-				:key="index"
-				:label="tab.name"
-				:name="tab.name"
-			>
-				<div v-if="index === 0">
-					<!-- form  -->
-					<el-form ref="dataForm" :model="dataForm">
-						<el-row
-							v-for="(row, rowIndex) in configs.form.rows"
-							:key="'row_' + rowIndex"
-							:gutter="20"
-						>
-							<el-col
-								v-for="(col, colIndex) in row"
-								:key="colIndex"
-								:span="24 / row.length"
-							>
-								<el-form-item
-									:label="col.label"
-									:prop="col.prop"
-									:rules="col.rules || null"
-								>
-									<el-input
-										v-if="col.input"
-										v-model="dataForm[col.prop]"
-										clearable
-										:disabled="detailMode"
-										v-bind="col.elparams"
-									/>
-									<el-select
-										v-if="col.select"
-										v-model="dataForm[col.prop]"
-										clearable
-										:disabled="detailMode"
-										v-bind="col.elparams"
-										@change="handleSelectChange(col, $event)"
-									>
-										<el-option
-											v-for="(opt, optIdx) in col.options"
-											:key="'option_' + optIdx"
-											:label="opt.label"
-											:value="opt.value"
-										/>
-									</el-select>
-									<el-switch
-										v-if="col.switch"
-										v-model="dataForm[col.prop]"
-										:active-value="1"
-										:inactive-value="0"
-										@change="handleSwitchChange"
-										:disabled="detailMode"
-									/>
-									<el-input
-										v-if="col.textarea"
-										type="textarea"
-										v-model="dataForm[col.prop]"
-										:disabled="detailMode"
-										v-bind="col.elparams"
-									/>
-									<!-- add more...  -->
-								</el-form-item>
-							</el-col>
-						</el-row>
-					</el-form>
-				</div>
-				<div v-if="dataForm.id && index === 1">
-					<el-button
-						v-if="!detailMode"
-						type="primary"
-						style="margin-bottom: 16px"
-						@click="handleAddParam()"
-						>添加</el-button
-					>
-					<BaseListTable
-						:table-config="null"
-						:column-config="filteredTableProps"
-						:table-data="subList"
-						@operate-event="handleTableRowOperate"
-					/>
-					<!-- paginator  -->
-				</div>
-			</el-tab-pane>
-		</el-tabs>
+  <el-dialog
+    class="dialog-with-menu"
+    :visible="selfVisible"
+    @closed="resetForm"
+    :distory-on-close="true"
+    :close-on-click-modal="configs.clickModalToClose ?? true"
+  >
+    <!-- title  -->
+    <div slot="title" class="dialog-title">
+      <h1 class="">
+        {{ detailMode ? "查看详情" : dataForm.id ? "编辑" : "新增" }}
+      </h1>
+    </div>
+    <!-- menu  -->
+    <el-tabs v-model="activeMenu" type="card" @tab-click="handleTabClick">
+      <!-- <el-tab-pane v-for="(tab, index) in configs.menu" :key="index" :label="tab.name" :name="tab.name"> -->
+      <el-tab-pane v-for="(tab, index) in actualMenus" :key="index" :label="tab.name" :name="tab.name">
+        <div v-if="index === 0">
+          <!-- form  -->
+          <el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus">
+            <el-row v-for="(row, rowIndex) in configs.form.rows" :key="'row_' + rowIndex" :gutter="20">
+              <el-col v-for="(col, colIndex) in row" :key="colIndex" :span="24 / row.length">
+                <el-form-item :label="col.label" :prop="col.prop" :rules="col.rules || null">
+                  <el-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams" />
+                  <el-select
+                    v-if="col.select"
+                    v-model="dataForm[col.prop]"
+                    clearable
+                    :disabled="detailMode"
+                    v-bind="col.elparams"
+                    @change="handleSelectChange(col, $event)"
+                  >
+                    <el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label" :value="opt.value" />
+                  </el-select>
+                  <el-switch
+                    v-if="col.switch"
+                    v-model="dataForm[col.prop]"
+                    :active-value="1"
+                    :inactive-value="0"
+                    @change="handleSwitchChange"
+                    :disabled="detailMode"
+                  />
+                  <el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
+                  <!-- add more...  -->
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <div v-if="dataForm.id && index === 1">
+          <el-button v-if="!detailMode" type="primary" style="margin-bottom: 16px" @click="handleAddParam()">添加</el-button>
+          <BaseListTable :table-config="null" :column-config="filteredTableProps" :table-data="subList" @operate-event="handleTableRowOperate" />
+          <!-- paginator  -->
+        </div>
+      </el-tab-pane>
+    </el-tabs>
 
-		<!-- sub dialog  -->
-		<small-dialog
-			:append-to-body="true"
-			v-if="showSubDialog"
-			ref="subDialog"
-			:url="urls.subase"
-			:configs="configs.subDialog"
-			:related-id="dataForm.id"
-			@refreshDataList="getSubList"
-		></small-dialog>
+    <!-- sub dialog  -->
+    <small-dialog
+      :append-to-body="true"
+      v-if="showSubDialog"
+      ref="subDialog"
+      :url="urls.subase"
+      :configs="configs.subDialog"
+      :related-id="dataForm.id"
+      @refreshDataList="getSubList"
+    ></small-dialog>
 
-		<!-- footer  -->
-		<div slot="footer">
-			<template v-for="(operate, index) in configs.form.operations">
-				<el-button
-					v-if="showButton(operate)"
-					:key="'operation_' + index"
-					:type="operate.type"
-					@click="handleBtnClick(operate)"
-					>{{ operate.label }}</el-button
-				>
-			</template>
-			<el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
-		</div>
-	</el-dialog>
+    <!-- footer  -->
+    <div slot="footer">
+      <template v-for="(operate, index) in configs.form.operations">
+        <el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{
+          operate.label
+        }}</el-button>
+      </template>
+      <el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
+    </div>
+  </el-dialog>
 </template>
 
 <script>
@@ -133,293 +85,338 @@ import SmallDialog from "@/components/SmallDialog.vue";
 import BaseListTable from "@/components/BaseListTable.vue";
 
 export default {
-	name: "DialogWithMenu",
-	components: { SmallDialog, BaseListTable },
-	props: {
-		configs: {
-			type: Object,
-			default: () => ({}),
-		},
-	},
-	inject: ["urls"],
-	data() {
-		const dataForm = {};
-		this.configs.form.rows.forEach((row) => {
-			row.forEach((col) => {
-				dataForm[col.prop] = col.default ?? "";
-				console.log("==========>", col.prop, dataForm[col.prop]);
-			});
-		});
-		return {
-			// configs,
-			activeMenu: this.configs.menu[0].name,
-			dataForm,
-			detailMode: false,
-			selfVisible: false,
-			showBaseDialog: false,
-			baseDialogConfig: null,
-			subList: [],
-			showSubDialog: false,
-		};
-	},
-	computed: {
-		actualMenus() {
-			return this.configs.menu.filter((m) => {
-				if (m.onlyEditMode && !this.dataForm.id) {
-					return false;
-				}
-				return true;
-			});
-		},
-		filteredTableProps() {
-			return this.detailMode
-				? this.configs.table.props.filter((v) => v.prop !== "operations")
-				: this.configs.table.props;
-		},
-	},
-	methods: {
-		/** utitilities */
-		showButton(operate) {
-			const notDetailMode = !this.detailMode;
-			const showAlways = operate.showAlways ?? false;
-			const editMode = operate.showOnEdit && this.dataForm.id;
-			const addMode = !operate.showOnEdit && !this.dataForm.id;
-			const permission = operate.permission
-				? this.$hasPermission(operate.permission)
-				: true;
-			return (
-				notDetailMode && (showAlways || ((editMode || addMode) && permission))
-			);
-		},
-		resetForm(excludeId = false) {
-			setTimeout(() => {
-				Object.keys(this.dataForm).forEach((key) => {
-					if (excludeId && key === "id") return;
-					this.dataForm[key] = null;
-				});
-				this.activeMenu = this.configs.menu[0].name;
-			}, 500);
-		},
+  name: "DialogWithMenu",
+  components: { SmallDialog, BaseListTable },
+  props: {
+    configs: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  inject: ["urls"],
+  data() {
+    const dataForm = {};
 
-		/** init **/
-		init(id, detailMode) {
-			if (this.$refs.dataForm && this.$refs.dataForm.length) {
-				// 当不是首次渲染dialog的时候，一开始就清空验证信息，本组件的循环里只有一个 dataForm 所以只用取 [0] 即可
-				this.$refs.dataForm[0].clearValidate()
-			}
-			console.log("[dialog] DialogWithHead init():", id, detailMode);
+    this.configs.form.rows.forEach((row) => {
+      row.forEach((col) => {
+        if (col.upload) dataForm[col.prop] = col.default ?? [];
+        else dataForm[col.prop] = col.default ?? null;
 
-			this.detailMode = detailMode ?? false;
-			this.$nextTick(() => {
-				// this.$refs['dataForm'].resetFields();
+        if (col.fetchData)
+          col.fetchData().then(({ data: res }) => {
+            console.log("[Fetch Data]", res.data.list);
+            if (res.code === 0 && res.data.list) {
+              this.$set(
+                col,
+                "options",
+                res.data.list.map((i) => ({ label: i.name, value: i.id }))
+              );
+              // col.options = res.data.list;
+            } else {
+              col.options.splice(0);
+            }
+            // dataForm[col.prop] = col.default ?? null; // not perfect!
+          });
+        else if (col.fetchTreeData) {
+          // 获取设备类型时触发的，用于前端构建属性结构，约定，parentId 为0时是顶级节点
+          col.fetchTreeData().then(({ data: res }) => {
+            console.log("[Fetch Tree Data]", res.data.list);
+            if (res.code === 0 && res.data.list) {
+              // 先把数据先重构成一个对象
+              const obj = {};
+              res.data.list.map((item) => {
+                obj[item.id] = item;
+              });
+              // 再过滤这个对象
+              let filteredList = reConstructTreeData(obj);
+              console.log("** filteredList **", filteredList);
+              // 最后设置 options
+              this.$set(col, "options", filteredList);
+            } else {
+              col.options.splice(0);
+            }
+          });
+        }
+      });
+    });
 
-				this.dataForm.id = id || null;
-				if (this.dataForm.id) {
-					// 如果是编辑
-					this.$http
-						.get(this.urls.base + `/${this.dataForm.id}`)
-						.then(({ data: res }) => {
-							// dev env:
-							// if (LOCAL) res.data.id = res.data._id;
-							// end dev env
-							console.log("[base dialog init] ", res);
-							if (res && res.code === 0) {
-								const dataFormKeys = Object.keys(this.dataForm);
-								console.log("keys ===> ", dataFormKeys);
-								// console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
-								this.dataForm = __pick(res.data, dataFormKeys);
-								console.log(
-									"pick(res.data, dataFormKeys) ===> ",
-									__pick(res.data, dataFormKeys)
-								);
-								// LABEL: FILE_RELATED
-								/** 对文件下载进行分流 */
-								// this.fileList = {};
-								// if (this.dataForm.files) {
-								// 	// console.log('files: ', this.dataForm.files)
-								// 	this.dataForm.files.forEach((file) => {
-								// 		// const fileName = file.fileurls.split('/').pop()
-								// 		/** [1] 处理 fileList */
-								// 		// if (Object.hasOwn(this.fileList, file.typeCode)) {
-								// 		if (this.fileList.hasOwnProperty(file.typeCode)) {
-								// 			/** 已存在 */
-								// 			// this.fileList[file.typeCode].push({ id: file.id, name: fileName, typeCode: file.typeCode })
-								// 			this.fileList[file.typeCode].push(file);
-								// 		} else {
-								// 			// this.fileList[file.typeCode] = [{ id: file.id, name: fileName, typeCode: file.typeCode }]
-								// 			this.fileList[file.typeCode] = [file];
-								// 		}
+    return {
+      // configs,
+      loadingStatus: false,
+      activeMenu: this.configs.menu[0].name,
+      dataForm,
+      detailMode: false,
+      selfVisible: false,
+      showBaseDialog: false,
+      baseDialogConfig: null,
+      subList: [],
+      showSubDialog: false,
+    };
+  },
+  computed: {
+    actualMenus() {
+      return this.configs.menu.filter((m) => {
+        if (m.onlyEditMode && !this.dataForm.id) {
+          return false;
+        }
+        return true;
+      });
+    },
+    filteredTableProps() {
+      return this.detailMode ? this.configs.table.props.filter((v) => v.prop !== "operations") : this.configs.table.props;
+    },
+  },
+  methods: {
+    /** utitilities */
+    showButton(operate) {
+      const notDetailMode = !this.detailMode;
+      const showAlways = operate.showAlways ?? false;
+      const editMode = operate.showOnEdit && this.dataForm.id;
+      const addMode = !operate.showOnEdit && !this.dataForm.id;
+      const permission = operate.permission ? this.$hasPermission(operate.permission) : true;
+      return notDetailMode && (showAlways || ((editMode || addMode) && permission));
+    },
+    resetForm(excludeId = false, immediate = false) {
+      setTimeout(
+        () => {
+          Object.keys(this.dataForm).forEach((key) => {
+            if (excludeId && key === "id") return;
+            this.dataForm[key] = null;
+          });
+          this.activeMenu = this.configs.menu[0].name;
+          this.$refs.dataForm[0].clearValidate();
+          this.$emit("dialog-closed"); // 触发父组件销毁自己
+        },
+        immediate ? 0 : 100
+      );
+    },
 
-								// 		/** [2] 处理 fileForm */
-								// 		// if (Object.hasOwn(this.fileForm, file.typeCode)) {
-								// 		if (this.fileForm.hasOwnProperty(file.typeCode)) {
-								// 			this.fileForm[file.typeCode].push(file.id);
-								// 		} else {
-								// 			this.fileForm[file.typeCode] = [file.id];
-								// 		}
-								// 	});
-								// }
-							}
-							this.selfVisible = true;
-						});
-				} else {
-					// 如果不是编辑
-					this.selfVisible = true;
-				}
-			});
-		},
+    /** init **/
+    init(id, detailMode) {
+      this.selfVisible = true;
+      if (this.$refs.dataForm && this.$refs.dataForm.length) {
+        // 当不是首次渲染dialog的时候，一开始就清空验证信息，本组件的循环里只有一个 dataForm 所以只用取 [0] 即可
+        this.$refs.dataForm[0].clearValidate();
+      }
+      console.log("[dialog] DialogWithHead init():", id, detailMode);
 
-		/** handlers */
-		handleSelectChange(col, eventValue) {
-			console.log("[dialog] select change: ", col, eventValue);
-		},
-		handleSwitchChange(val) {
-			console.log("[dialog] switch change: ", val, this.dataForm);
-		},
-		handleBtnClick(payload) {
-			console.log("btn click payload: ", payload);
+      this.detailMode = detailMode ?? false;
+      this.$nextTick(() => {
+        // this.$refs['dataForm'].resetFields();
 
-			if ("name" in payload) {
-				switch (payload.name) {
-					case "cancel":
-						this.handleClose();
-						break;
-					case "reset":
-						this.resetForm(true); // true means exclude id
-						break;
-					case "add":
-					case "update": {
-						const method = payload.name === "add" ? "POST" : "PUT";
-						this.$http({
-							url: this.urls.base,
-							method,
-							data: this.dataForm,
-						}).then(({ data: res }) => {
-							console.log("[add&update] res is: ", res);
-							this.$message.success(
-								payload.name === "add" ? "添加成功" : "更新成功"
-							);
-							this.$emit("refreshDataList");
-							this.handleClose();
-						});
-					}
-				}
-			} else {
-				console.log("[x] 不是这么用的! 缺少name属性");
-			}
-		},
-		handleTabClick(payload) {
-			console.log("tab click payload: ", this.activeMenu);
-			if (this.activeMenu === this.configs.menu[1].name) {
-				// 获取数据
-				this.getSubList();
-			}
-		},
+        this.dataForm.id = id || null;
+        if (this.dataForm.id) {
+          // 如果是编辑
+          this.loadingStatus = true;
+          this.$http.get(this.urls.base + `/${this.dataForm.id}`).then(({ data: res }) => {
+            if (res && res.code === 0) {
+              const dataFormKeys = Object.keys(this.dataForm);
+              console.log("keys ===> ", dataFormKeys);
+              // console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
+              this.dataForm = __pick(res.data, dataFormKeys);
+              console.log("pick(res.data, dataFormKeys) ===> ", __pick(res.data, dataFormKeys));
+              // LABEL: FILE_RELATED
+              /** 对文件下载进行分流 */
+              // this.fileList = {};
+              // if (this.dataForm.files) {
+              // 	// console.log('files: ', this.dataForm.files)
+              // 	this.dataForm.files.forEach((file) => {
+              // 		// const fileName = file.fileurls.split('/').pop()
+              // 		/** [1] 处理 fileList */
+              // 		// if (Object.hasOwn(this.fileList, file.typeCode)) {
+              // 		if (this.fileList.hasOwnProperty(file.typeCode)) {
+              // 			/** 已存在 */
+              // 			// this.fileList[file.typeCode].push({ id: file.id, name: fileName, typeCode: file.typeCode })
+              // 			this.fileList[file.typeCode].push(file);
+              // 		} else {
+              // 			// this.fileList[file.typeCode] = [{ id: file.id, name: fileName, typeCode: file.typeCode }]
+              // 			this.fileList[file.typeCode] = [file];
+              // 		}
 
-		getSubList(page = 1, size = 20) {
-			const params = {};
-			params.page = page;
-			params.limit = size;
+              // 		/** [2] 处理 fileForm */
+              // 		// if (Object.hasOwn(this.fileForm, file.typeCode)) {
+              // 		if (this.fileForm.hasOwnProperty(file.typeCode)) {
+              // 			this.fileForm[file.typeCode].push(file.id);
+              // 		} else {
+              // 			this.fileForm[file.typeCode] = [file.id];
+              // 		}
+              // 	});
+              // }
+            }
+            this.loadingStatus = false;
+          });
+        } else {
+          // 如果不是编辑
+          this.selfVisible = true;
+        }
+      });
+    },
 
-			const requiredParams = this.configs.table.extraParams;
-			if (requiredParams) {
-				if (Array.isArray(requiredParams)) {
-					requiredParams.forEach((str) => {
-						if (/id/i.test(str)) {
-							params[str] = this.dataForm.id;
-						} else {
-							params[str] = "";
-						}
-					});
-				} else if (typeof requiredParams === "string") {
-					// 如果需要额外参数，一般肯定需要
-					params[this.configs.table.extraParams] = this.dataForm.id;
-					// 此时 dataForm.id 一定是存在的
-				}
-			}
-			this.$http.get(this.urls.subpage, { params }).then(({ data: res }) => {
-				console.log("[subList] getSubList:", res);
-				if (res.code === 0 && res.data?.list) {
-					// 有数据
-					this.subList = res.data.list;
-				} else {
-					this.subList.splice(0);
-				}
-			});
-		},
+    /** handlers */
+    handleSelectChange(col, eventValue) {
+      console.log("[dialog] select change: ", col, eventValue);
+    },
+    handleSwitchChange(val) {
+      console.log("[dialog] switch change: ", val, this.dataForm);
+    },
+    handleBtnClick(payload) {
+      console.log("btn click payload: ", payload);
 
-		handleAddParam(id) {
-			this.showSubDialog = true;
-			this.$nextTick(() => {
-				this.$refs.subDialog.init(id ?? null);
-			});
-		},
+      if ("name" in payload) {
+        switch (payload.name) {
+          case "cancel":
+            this.handleClose();
+            break;
+          case "reset":
+            this.resetForm(true, true); // true means exclude id
+            break;
+          case "add":
+          case "update": {
+            this.$refs.dataForm[0].validate((passed, result) => {
+              if (passed) {
+                // 如果通过验证
+                this.loadingStatus = true;
+                const method = payload.name === "add" ? "POST" : "PUT";
+                this.$http({
+                  url: this.urls.base,
+                  method,
+                  data: this.dataForm,
+                })
+                  .then(({ data: res }) => {
+                    console.log("[add&update] res is: ", res);
+                    this.$message.success(payload.name === "add" ? "添加成功" : "更新成功");
+                    this.$emit("refreshDataList");
+                    this.loadingStatus = false;
+                    this.handleClose();
+                  })
+                  .catch((errMsg) => {
+                    this.$message.error("参数错误：" + errMsg);
+                    if (this.loadingStatus) this.loadingStatus = false;
+                  });
+              } else {
+                // 没有通过验证
+                // this.$message.error(JSON.stringify(result));
+                this.$message.error("请核查字段信息");
+              }
+            });
+          }
+        }
+      } else {
+        console.log("[x] 不是这么用的! 缺少name属性");
+      }
+    },
+    handleTabClick(payload) {
+      console.log("tab click payload: ", this.activeMenu);
+      if (this.activeMenu === this.configs.menu[1].name) {
+        // 获取数据
+        this.getSubList();
+      }
+    },
 
-		handleClose() {
-			this.resetForm();
-			this.selfVisible = false;
-		},
+    getSubList(page = 1, size = 20) {
+      const params = {};
+      params.page = page;
+      params.limit = size;
 
-		/** 列表handlers */
-		handleAddItem() {
-			// console.log('[dialog] handleAddItem ot list...');
-			this.showBaseDialog = true;
-			this.$nextTick(() => {
-				console.log("[sub-dialog] ", this.$refs["sub-dialog"].init());
-			});
-		},
-		handleTableRowOperate({ type, data }) {
-			console.log("handleTableRowOperate", type, data);
+      const requiredParams = this.configs.table.extraParams;
+      if (requiredParams) {
+        if (Array.isArray(requiredParams)) {
+          requiredParams.forEach((str) => {
+            if (/id/i.test(str)) {
+              params[str] = this.dataForm.id;
+            } else {
+              params[str] = "";
+            }
+          });
+        } else if (typeof requiredParams === "string") {
+          // 如果需要额外参数，一般肯定需要
+          params[this.configs.table.extraParams] = this.dataForm.id;
+          // 此时 dataForm.id 一定是存在的
+        }
+      }
+      this.$http.get(this.urls.subpage, { params }).then(({ data: res }) => {
+        console.log("[subList] getSubList:", res);
+        if (res.code === 0 && res.data?.list) {
+          // 有数据
+          this.subList = res.data.list;
+        } else {
+          this.subList.splice(0);
+        }
+      });
+    },
 
-			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.subase,
-								method: "DELETE",
-								data: [`${data}`],
-							}).then(({ data: res }) => {
-								if (res.code === 0) {
-									this.$message.success({
-										message: "删除成功!",
-										duration: 1000,
-										onClose: () => {
-											this.getSubList(1, 20);
-										},
-									});
-								}
-							});
-						})
-						.catch((err) => {});
-				}
-				case "edit": {
-					this.handleAddParam(data); /** data is ==> id */
-					break;
-				}
-				// case 'view-detail-action':
-				// 	this.openDialog(data, true);
-				// 	break;
-			}
-		},
-	},
+    handleAddParam(id) {
+      this.showSubDialog = true;
+      this.$nextTick(() => {
+        this.$refs.subDialog.init(id ?? null);
+      });
+    },
+
+    handleClose() {
+      // this.resetForm();
+      this.selfVisible = false;
+    },
+
+    /** 列表handlers */
+    handleAddItem() {
+      // console.log('[dialog] handleAddItem ot list...');
+      this.showBaseDialog = true;
+      this.$nextTick(() => {
+        console.log("[sub-dialog] ", this.$refs["sub-dialog"].init());
+      });
+    },
+    handleTableRowOperate({ type, data }) {
+      console.log("handleTableRowOperate", type, data);
+
+      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.subase,
+                method: "DELETE",
+                data: [`${data}`],
+              }).then(({ data: res }) => {
+                if (res.code === 0) {
+                  this.$message.success({
+                    message: "删除成功!",
+                    duration: 1000,
+                    onClose: () => {
+                      this.getSubList(1, 20);
+                    },
+                  });
+                }
+              });
+            })
+            .catch((err) => {});
+        }
+        case "edit": {
+          this.handleAddParam(data); /** data is ==> id */
+          break;
+        }
+        // case 'view-detail-action':
+        // 	this.openDialog(data, true);
+        // 	break;
+      }
+    },
+  },
 };
 </script>
 
 <style scoped>
 .el-menu {
-	margin: 16px 0 !important;
+  margin: 16px 0 !important;
 }
 
 .el-menu.el-menu--horizontal {
-	border: none !important;
-	/* background: #0f02 !important; */
+  border: none !important;
+  /* background: #0f02 !important; */
 }
 
 /* .el-menu--horizontal > .el-menu-item.is-active { */
@@ -427,18 +424,18 @@ export default {
 /* } */
 
 .dialog-with-menu >>> .el-dialog__body {
-	/* padding-top: 16px !important;
+  /* padding-top: 16px !important;
   padding-bottom: 16px !important; */
-	padding-top: 0 !important;
-	padding-bottom: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
 }
 
 .el-select {
-	width: 100% !important;
+  width: 100% !important;
 }
 
 .dialog-with-menu >>> .el-dialog__header {
-	padding: 10px 20px 10px;
-	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white);
+  padding: 10px 20px 10px;
+  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
 }
 </style>
diff --git a/src/views/modules/pms/equipment/config.js b/src/views/modules/pms/equipment/config.js
new file mode 100644
index 0000000..a2af785
--- /dev/null
+++ b/src/views/modules/pms/equipment/config.js
@@ -0,0 +1,140 @@
+import TableOperaionComponent from '@/components/noTemplateComponents/operationComponent'
+import TableTextComponent from '@/components/noTemplateComponents/detailComponent'
+import switchBtn from '@/components/noTemplateComponents/switchBtn'
+
+export default function () {
+
+  const tableProps = [
+    { prop: 'name', label: '设备名称' },
+    { prop: 'code', label: '设备编码' },
+    { prop: 'equipmentType', label: '设备类型' },
+    { prop: 'enabled', label: '状态', subcomponent: switchBtn }, // subcomponent
+    { prop: 'remark', label: '备注' },
+    { prop: 'description', label: '查看详情', subcomponent: TableTextComponent },
+    {
+      prop: 'operations',
+      name: '操作',
+      fixed: 'right',
+      width: 120,
+      subcomponent: TableOperaionComponent,
+      options: ['edit', { name: 'delete', permission: 'pms:equipment:delete' }]
+    }
+  ]
+
+
+  const headFormFields = [
+    {
+      label: '设备名称',
+      prop: 'name',
+      input: true,
+      default: { value: '' },
+      bind: { placeholder: '请输入设备名称' }
+    },
+    {
+      button: {
+        type: 'primary',
+        name: '查询'
+      }
+    },
+    {
+      button: {
+        type: 'plain',
+        name: '新增',
+        permission: 'pms:equipment:save'
+      }
+    }
+  ]
+
+
+  const dialogConfigs = {
+    menu: [{ name: '设备信息' }, { name: '设备属性信息', onlyEditMode: false }],
+    form: {
+      rows: [
+        [
+          { input: true, label: '设备名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入设备名称' } },
+          { input: true, label: '设备名称编码', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入设备名称编码' } },
+          // { input: true, label: '版本号', prop: 'version', elparams: { placeholder: '请输入版本号' } },
+          {
+            select: true,
+            label: '设备类型',
+            prop: 'equipmentTypeId',
+            options: [
+              // { label: '1', value: 1 },
+              // { label: '2', value: 2 },
+              // { label: '3', value: 3 },
+            ],
+            fetchData: () => {
+              return this.$http.get('/pms/equipmentType/page', { params: { page: 1, limit: 999, key: '' } })
+            },
+            elparams: { placeholder: '选择一个设备类型' }
+          },
+        ],
+        [{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }],
+      ],
+      operations: [
+        { name: 'add', label: '保存', type: 'primary', permission: 'pms:equipment:save', showOnEdit: false },
+        { name: 'update', label: '更新', type: 'primary', permission: 'pms:equipment:update', showOnEdit: true },
+        { name: 'reset', label: '重置', type: 'warning', showAlways: true },
+        // { name: 'cancel', label: '取消', showAlways: true },
+      ],
+    },
+    table: {
+      // extraParams: ['stepId'],
+      extraParams: 'stepId',
+      props: [
+        { prop: 'createTime', label: '创建时间' },
+        { prop: 'equipmentId', label: '所属设备id' },
+        { prop: 'attrName', label: '属性名称', isEditField: true },
+        { prop: 'attrValue', label: '属性值', isEditField: true },
+        {
+          prop: 'operations',
+          name: '操作',
+          fixed: 'right',
+          width: 120,
+          subcomponent: TableOperaionComponent,
+          options: [
+            { name: 'edit', permission: 'pms:equipment:update' },
+            { name: 'delete', permission: 'pms:equipment:delete' },
+          ]
+        }
+      ],
+      data: [
+        // TOOD 暂时用不到，但获取可以考虑把拉取接口数据的函数迁移到此文件（没有太大必要）
+      ],
+    },
+
+    subDialog: {
+      extraParam: 'equipmentId',
+      rows: [
+        [
+          { input: true, label: '属性名称', prop: 'attrName', elparams: { placeholder: '请输入属性名称' } },
+          { input: true, label: '属性值', prop: 'attrValue', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性值' } },
+        ],
+        [
+          { textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '添加备注' } },
+        ]
+      ],
+      operations: [
+        { name: 'add', label: '保存', type: 'primary', permission: 'pms:equipment:save', showOnEdit: false },
+        { name: 'update', label: '更新', type: 'primary', permission: 'pms:equipment:update', showOnEdit: true },
+      ],
+    },
+  };
+
+
+  return {
+    dialogConfigs,
+    tableConfig: {
+      table: null, // 此处可省略，el-table 上的配置项
+      column: tableProps, // el-column-item 上的配置项
+    },
+    headFormConfigs: {
+      rules: null, // 名称是由 BaseSearchForm.vue 组件固定的
+      fields: headFormFields // 名称是由 BaseSearchForm.vue 组件固定的
+    },
+    urls: {
+      base: '/pms/equipment',
+      page: '/pms/equipment/page'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/modules/pms/equipment/index.vue b/src/views/modules/pms/equipment/index.vue
new file mode 100644
index 0000000..490466a
--- /dev/null
+++ b/src/views/modules/pms/equipment/index.vue
@@ -0,0 +1,32 @@
+<template>
+	<ListViewWithHead :table-config="tableConfig" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" :listQueryExtra="['name']" />
+</template>
+
+<script>
+import initConfig from './config';
+import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue';
+
+export default {
+	name: 'BlenderView',
+	components: { ListViewWithHead },
+	provide() {
+		return {
+			urls: this.allUrls
+		}
+	},
+	data() {
+		const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
+		return {
+			tableConfig,
+			headFormConfigs,
+			allUrls: urls,
+			dialogConfigs,
+		};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>
diff --git a/src/views/modules/pms/product/config.js b/src/views/modules/pms/product/config.js
new file mode 100644
index 0000000..9dc3970
--- /dev/null
+++ b/src/views/modules/pms/product/config.js
@@ -0,0 +1,149 @@
+import TableOperaionComponent from '@/components/noTemplateComponents/operationComponent'
+import TableTextComponent from '@/components/noTemplateComponents/detailComponent'
+import StatusComponent from '@/components/noTemplateComponents/statusComponent'
+import { timeFilter, dictFilter } from '@/utils/filters'
+
+export default function () {
+
+  const tableProps = [
+    { prop: 'createTime', label: '添加时间', filter: timeFilter },
+    { prop: 'name', label: '产品名称' },
+    { prop: 'code', label: '产品编码' },
+    { prop: 'typeDictValue', label: '产品类型', filter: dictFilter('product_type') },
+    { prop: 'specifications', label: '规格' },
+    { prop: 'unitDictValue', label: '单位', filter: dictFilter('unit') },
+    { prop: 'weight', label: '重量(kg)' },
+    { prop: 'remark', label: '备注' },
+    { prop: 'description', label: '附件信息', subcomponent: TableTextComponent, buttonContent: '查看附件' },
+    {
+      prop: 'operations',
+      name: '操作',
+      fixed: 'right',
+      width: 120,
+      subcomponent: TableOperaionComponent,
+      options: ['edit', { name: 'delete', permission: 'pms:product:delete' }]
+    }
+  ]
+
+
+  const headFormFields = [
+    {
+      label: '关键字',
+      prop: 'key',
+      input: true,
+      default: { value: '' },
+      bind: { placeholder: '请输入产品名称或编码' }
+    },
+    {
+      button: {
+        type: 'primary',
+        name: '查询'
+      }
+    },
+    {
+      button: {
+        type: 'plain',
+        name: '新增',
+        permission: 'pms:product:save'
+      }
+    }
+  ]
+
+
+  const dictList = JSON.parse(localStorage.getItem('dictList') || {})
+  const dialogConfigs = {
+    menu: [{ name: '产品信息' }, { name: '产品属性信息', onlyEditMode: false }],
+    form: {
+      rows: [
+        [
+          { input: true, label: '产品名称/砖型名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入设备名称' } },
+          { input: true, label: '产品编码/砖型编码', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入设备名称编码' } },
+          // { input: true, label: '版本号', prop: 'version', elparams: { placeholder: '请输入版本号' } },
+          {
+            select: true,
+            label: '产品类型',
+            prop: 'typeDictValue',
+            options: 'product_type' in dictList ? dictList['product_type'].map(item => ({ value: item.dictValue, label: item.dictLabel })) : [],
+            elparams: { placeholder: '选择一个产品类型' }
+          },
+        ],
+        [
+          { input: true, label: '规格', prop: 'specifications', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入设备名称编码' } },
+          { input: true, label: '单位平方数', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入设备名称编码' } },
+          {
+            select: true,
+            label: '单位',
+            prop: 'unitDictValue',
+            options: 'unit' in dictList ? dictList['unit'].map(item => ({ value: item.dictValue, label: item.dictLabel })) : [],
+            elparams: { placeholder: '选择一个产品类型' }
+          },
+        ],
+        [{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }],
+      ],
+      operations: [
+        { name: 'add', label: '保存', type: 'primary', permission: 'pms:product:save', showOnEdit: false },
+        { name: 'update', label: '更新', type: 'primary', permission: 'pms:product:update', showOnEdit: true },
+        { name: 'reset', label: '重置', type: 'warning', showAlways: true },
+        // { name: 'cancel', label: '取消', showAlways: true },
+      ],
+    },
+    table: {
+      // extraParams: ['stepId'],
+      extraParams: 'productId',
+      props: [
+        { prop: 'createTime', label: '创建时间' },
+        { prop: 'productId', label: '产品ID' },
+        { prop: 'attrName', label: '属性名称', isEditField: true },
+        { prop: 'attrValue', label: '属性值', isEditField: true },
+        {
+          prop: 'operations',
+          name: '操作',
+          fixed: 'right',
+          width: 120,
+          subcomponent: TableOperaionComponent,
+          options: [
+            { name: 'edit', permission: 'pms:product:update' },
+            { name: 'delete', permission: 'pms:product:delete' },
+          ]
+        }
+      ],
+      data: [
+        // TOOD 暂时用不到，但获取可以考虑把拉取接口数据的函数迁移到此文件（没有太大必要）
+      ],
+    },
+
+    subDialog: {
+      extraParam: 'productId',
+      rows: [
+        [
+          { input: true, label: '属性名称', prop: 'attrName', elparams: { placeholder: '请输入属性名称' } },
+          { input: true, label: '属性值', prop: 'attrValue', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性值' } },
+        ],
+        [
+          { textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '添加备注' } },
+        ]
+      ],
+      operations: [
+        { name: 'add', label: '保存', type: 'primary', permission: 'pms:product:save', showOnEdit: false },
+        { name: 'update', label: '更新', type: 'primary', permission: 'pms:product:update', showOnEdit: true },
+      ],
+    },
+  };
+
+
+  return {
+    dialogConfigs,
+    tableConfig: {
+      table: null, // 此处可省略，el-table 上的配置项
+      column: tableProps, // el-column-item 上的配置项
+    },
+    headFormConfigs: {
+      rules: null, // 名称是由 BaseSearchForm.vue 组件固定的
+      fields: headFormFields // 名称是由 BaseSearchForm.vue 组件固定的
+    },
+    urls: {
+      base: '/pms/product',
+      page: '/pms/product/page'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/modules/pms/product/index.vue b/src/views/modules/pms/product/index.vue
new file mode 100644
index 0000000..52a946c
--- /dev/null
+++ b/src/views/modules/pms/product/index.vue
@@ -0,0 +1,32 @@
+<template>
+	<ListViewWithHead :table-config="tableConfig" :head-config="headFormConfigs" :dialog-configs="dialogConfigs" :listQueryExtra="['key']" />
+</template>
+
+<script>
+import initConfig from './config';
+import ListViewWithHead from '@/views/atomViews/ListViewWithHead.vue';
+
+export default {
+	name: 'BlenderView',
+	components: { ListViewWithHead },
+	provide() {
+		return {
+			urls: this.allUrls
+		}
+	},
+	data() {
+		const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
+		return {
+			tableConfig,
+			headFormConfigs,
+			allUrls: urls,
+			dialogConfigs,
+		};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>