add DialogJustForm & update factory, productLine

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 150
+}

src/components/BaseSearchForm.vue

@@ -8,17 +8,17 @@
 				:key="opt.prop"
 				:label="opt.label ? opt.label : null"
 				:prop="'' + index"
-				:rules="opt.elconfig?.rules ? opt.elconfig.rules : undefined"
+				:rules="opt.bind?.rules ? opt.bind.rules : undefined"
 			>
 				<el-input
 					v-if="opt.input"
 					v-model="searchForm[index]"
-					v-bind="opt.elconfig"
+					v-bind="opt.bind"
 				/>
 				<el-select
 					v-if="opt.select"
 					v-model="searchForm[index]"
-					v-bind="opt.elconfig"
+					v-bind="opt.bind"
 				>
 					<el-option
 						v-for="item in opt.select"
@@ -30,7 +30,7 @@
 				<el-date-picker
 					v-if="opt.timerange"
 					v-model="searchForm[index]"
-					v-bind="opt.elconfig"
+					v-bind="opt.bind"
 				/>
 				<el-upload
 					v-if="opt.upload"

src/components/DialogJustForm.vue

@@ -0,0 +1,290 @@
+<template>
+	<el-dialog
+		class="dialog-just-form"
+		:visible.sync="selfVisible"
+		@closed="resetForm"
+		:distory-on-close="true"
+	>
+		<!-- title  -->
+		<div slot="title" class="dialog-title">
+			<h1 class="">
+				{{ detailMode ? "查看详情" : dataForm.id ? "编辑" : "新增" }}
+			</h1>
+		</div>
+
+		<!-- 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"
+				>
+					<!-- 通过多个 col === null 可以控制更灵活的 span 大小 -->
+					<el-form-item
+						v-if="col !== null"
+						: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="col.activeValue ?? 1"
+							:inactive-value="col.activeValue ?? 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>
+
+		<!-- 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>
+import { pick as __pick } from "@/utils/filters";
+
+export default {
+	name: "DialogJustForm",
+	props: {
+		configs: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	inject: ["urls"],
+	data() {
+		const dataForm = {};
+		this.configs.form.rows.forEach((row) => {
+			row.forEach((col) => {
+				dataForm[col.prop] = col.default ?? null;
+				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!
+					});
+			});
+		});
+		return {
+			loadingStatus: false,
+			dataForm,
+			detailMode: false,
+			selfVisible: false,
+			baseDialogConfig: null,
+		};
+	},
+	created() {
+		// console.log('[dialog] created!!! wouldn\'t create again...')
+	},
+	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(
+				() => {
+					console.log("[Dialog Just Form] clearing form...");
+					Object.keys(this.dataForm).forEach((key) => {
+						if (excludeId && key === "id") return;
+						this.dataForm[key] = null;
+					});
+					this.$refs.dataForm.clearValidate();
+				},
+				immediate ? 0 : 100
+			);
+		},
+
+		/** init **/
+		init(id, detailMode) {
+			this.selfVisible = true;
+
+			if (this.$refs.dataForm) {
+				console.log("[dialog REUSE] clearing form validation...");
+				// 当不是首次渲染dialog的时候，一开始就清空验证信息，本组件的循环里只有一个 dataForm 所以只用取 [0] 即可
+				this.$refs.dataForm.clearValidate();
+			}
+
+			console.log("[Dialog Just Form] init():", id, detailMode);
+
+			this.detailMode = detailMode ?? false;
+			this.$nextTick(() => {
+				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)
+								);
+							}
+							this.loadingStatus = false;
+						});
+				} else {
+					// 如果不是编辑
+					this.selfVisible = true;
+				}
+			});
+		},
+
+		/** handlers */
+		handleSelectChange(col, eventValue) {
+			// console.log("[dialog] select change: ", col, eventValue);
+			this.$forceUpdate();
+		},
+		handleSwitchChange(val) {
+			console.log("[dialog] switch change: ", val, this.dataForm);
+		},
+		handleBtnClick(payload) {
+			console.log("btn click payload: ", payload);
+
+			if ("name" in payload) {
+				switch (payload.name) {
+					case "cancel":
+						this.handleClose();
+						break;
+					case "reset":
+						this.resetForm(true, true); // true means exclude id, immediate execution
+						break;
+					case "add":
+					case "update": {
+						this.$refs.dataForm.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);
+										if (res.code === 0) {
+											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属性");
+			}
+		},
+
+		handleClose() {
+			// this.resetForm();
+			this.selfVisible = false;
+		},
+	},
+};
+</script>
+
+<style scoped>
+.dialog-just-form >>> .el-dialog__body {
+	/* padding-top: 16px !important;
+  padding-bottom: 16px !important; */
+	padding-top: 0 !important;
+	padding-bottom: 0 !important;
+}
+
+.el-select {
+	width: 100% !important;
+}
+
+.dialog-just-form >>> .el-dialog__header {
+	padding: 10px 20px 10px;
+	/* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
+}
+</style>

src/components/noTemplateComponents/operationComponent.js

@@ -36,6 +36,7 @@ export default {
         delete: '删除',
         viewAttr: '查看属性',
         preview: '预览',
+        view: '查看',
         design: '设计',
         'view-trend': '查看趋势'
         // add more...

src/utils/request.js

@@ -58,8 +58,8 @@ http.interceptors.response.use(response => {
   }
   return response
 }, error => {
-  console.error(error)
+  console.error('[response interceptor]: ', error)
-  return Promise.reject(error)
+  return Promise.reject(error.message)
 })
 
 export default http

src/views/atomViews/ListViewWithHead.vue

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

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

@@ -10,22 +10,26 @@ export default function () {
     { prop: 'code', label: '工厂编码' },
     { prop: 'address', label: '地址' },
     { prop: 'description', label: '描述' },
-    // {
+    {
-    //   prop: 'operations',
+      prop: 'operations',
-    //   name: '操作',
+      name: '操作',
-    //   fixed: 'right',
+      fixed: 'right',
-    //   width: 120,
+      width: 120,
-    //   subcomponent: TableOperaionComponent,
+      subcomponent: TableOperaionComponent,
-    //   options: ['edit', { name: 'delete', permission: 'pms:blenderStep:delete' }]
+      // options: ['edit', { name: 'delete', permission: 'pms:blenderStep:delete' }]
-    // }
+      options: ['view']
+    }
   ]
 
 
   const headFormFields = [
     {
-      label: '名称',
+      label: '工厂名称',
       input: true,
-      default: { value: '' }
+      default: { value: '' },
+      bind: {
+        placeholder: '请输入工厂名称'
+      }
     },
     {
       button: {
@@ -42,97 +46,35 @@ export default function () {
     // }
   ]
 
-
+  /**
-  const dialogConfigs = {
+   * dialog config 有两个版本，一个适用于 DialogWithMenu 组件，另一个适用于 DialogJustForm 组件
-    menu: [{ name: '混料程序' }, { name: '参数明细', onlyEditMode: true }],
+   * 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
+   * 此为后者的配置:
+   */
+  const dialogJustFormConfigs = {
     form: {
-      url: '/pms/blenderStep',
       rows: [
         [
-          { input: true, label: '混料程序名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入混料程序名称' } },
+          { 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: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入工厂编码' } },
-          { input: true, label: '版本号', prop: 'version', elparams: { placeholder: '请输入版本号' } },
         ],
         [
-          // {
+          { input: true, label: '地址', prop: 'address', elparams: { placeholder: '' } }, // '请输入工厂所在地' } },
-          //   select: true,
+          { input: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }
-          //   label: '城市',
-          //   prop: 'city',
-          //   options: [
-          //     { label: '1', value: 1 },
-          //     { label: '2', value: 2 },
-          //     { label: '3', value: 3 },
-          //   ],
-          //   elparams: { placeholder: '请选择城市' }
-          // },
-          // { input: true, label: '程序号', prop: '', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入混料程序号' } },
         ],
-        // [{ switch: true, label: '状态', prop: 'enabled', default: 0 }],
-        [{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }],
-      ],
-      operations: [
-        { name: 'add', label: '保存', type: 'primary', permission: 'pms:blenderStep:save', showOnEdit: false },
-        { name: 'update', label: '更新', type: 'primary', permission: 'pms:blenderStep:update', showOnEdit: true },
-        { name: 'reset', label: '重置', type: 'warning', showAlways: true },
-        // { name: 'cancel', label: '取消', showAlways: true },
-      ],
-    },
-    table: {
-      // extraParams: ['stepId'],
-      extraParams: 'stepId',
-      props: [
-        { prop: 'sort', label: '步骤', isEditField: true },
-        { prop: 'name', label: '参数名称', isEditField: true },
-        { prop: 'description', label: '描述', isEditField: true },
-        { prop: 'value', label: '设定值', isEditField: true },
-        { prop: 'valueFloor', label: '值下限', isEditField: true },
-        { prop: 'valueTop', label: '值上限', isEditField: true },
-        {
-          prop: 'operations',
-          name: '操作',
-          fixed: 'right',
-          width: 120,
-          subcomponent: TableOperaionComponent,
-          options: [
-            { name: 'edit', permission: 'pms:blenderStepParam:update' },
-            { name: 'delete', permission: 'pms:blenderStepParam:delete' },
-          ]
-        }
-      ],
-      data: [
-        // TOOD 暂时用不到，但获取可以考虑把拉取接口数据的函数迁移到此文件（没有太大必要）
-      ],
-    },
-
-    subDialog: {
-      extraParam: 'stepId',
-      rows: [
-        [
-          { input: true, label: '步骤', prop: 'sort', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入步骤' } },
-          { input: true, label: '步骤描述', prop: 'description', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入描述' } },
-        ], [
-          { input: true, label: '参数名称', prop: 'name', elparams: { placeholder: '请输入参数名称' } },
-          { input: true, label: '参数编码', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入描述' } },
-        ], [
-          { input: true, label: '参数值上限', prop: 'valueTop', elparams: { placeholder: '请输入参数值上限' } },
-          { input: true, label: '参数值下限', prop: 'valueFloor', elparams: { placeholder: '请输入参数值下限' } },
-        ],
-        [
-          { input: true, label: '参数值', prop: 'value', elparams: { placeholder: '请输入参数值' } },
-        ]
-      ],
-      operations: [
-        { name: 'add', label: '保存', type: 'primary', permission: 'pms:blenderStepParam:save', showOnEdit: false },
-        { name: 'update', label: '更新', type: 'primary', permission: 'pms:blenderStepParam:update', showOnEdit: true },
-        //  { name: 'reset', label: '重置', type: 'warning', showAlways: true },
-        // { name: 'cancel', label: '取消', showAlways: true },
       ],
+      // operations: [
+      // { name: 'add', label: '保存', type: 'primary', permission: 'pms:blenderStep:save', showOnEdit: false },
+      // { name: 'update', label: '更新', type: 'primary', permission: 'pms:blenderStep:update', showOnEdit: true },
+      // { name: 'reset', label: '重置', type: 'warning', showAlways: true },
+      // { name: 'cancel', label: '取消', showAlways: true },
+      // ],
     },
   };
 
 
   return {
-    dialogConfigs,
+    dialogConfigs: dialogJustFormConfigs,
     tableConfig: {
       table: null, // 此处可省略，el-table 上的配置项
       column: tableProps, // el-column-item 上的配置项
@@ -144,9 +86,6 @@ export default function () {
     urls: {
       base: '/pms/factory',
       page: '/pms/factory/page',
-      // subase: '/pms/blenderStepParam',
-      // subpage: '/pms/blenderStepParam/page',
-      // more...
     }
   }
 }

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

@@ -50,6 +50,11 @@ export default function () {
   ]
 
 
+  /**
+   * dialog config 有两个版本，一个适用于 DialogWithMenu 组件，另一个适用于 DialogJustForm 组件
+   * 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
+   * 此为后者的配置:
+   */
   const dialogConfigs = {
     menu: [{ name: '混料程序' }, { name: '参数明细', onlyEditMode: true }],
     form: {
@@ -60,21 +65,6 @@ export default function () {
           { 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: 'city',
-          //   options: [
-          //     { label: '1', value: 1 },
-          //     { label: '2', value: 2 },
-          //     { label: '3', value: 3 },
-          //   ],
-          //   elparams: { placeholder: '请选择城市' }
-          // },
-          // { input: true, label: '程序号', prop: '', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入混料程序号' } },
-        ],
-        // [{ switch: true, label: '状态', prop: 'enabled', default: 0 }],
         [{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }],
       ],
       operations: [

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

@@ -1,155 +1,124 @@
-import TableOperaionComponent from '@/components/noTemplateComponents/operationComponent'
+import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
-import TableTextComponent from '@/components/noTemplateComponents/detailComponent'
+import TableTextComponent from "@/components/noTemplateComponents/detailComponent";
-import StatusComponent from '@/components/noTemplateComponents/statusComponent'
+import StatusComponent from "@/components/noTemplateComponents/statusComponent";
-import InputArea from 'code-brick-zj'
+import request from "@/utils/request";
 
 export default function () {
-
   const tableProps = [
-    { prop: 'name', label: '产线名称' },
+    { prop: "name", label: "产线名称" },
-    { prop: 'code', label: '产线编码' },
+    { prop: "code", label: "产线编码" },
-    { prop: 'factory', label: '所属工厂' },
+    { prop: "factory", label: "所属工厂" },
-    { prop: 'status', label: '产线状态', subcomponent: StatusComponent }, // subcomponent
+    { prop: "status", label: "产线状态", subcomponent: StatusComponent }, // subcomponent
-    { prop: 'tvalue', label: '每小时下片数量', },
+    { prop: "tvalue", label: "每小时下片数量" },
-    { prop: 'description', label: '描述', },
+    { prop: "description", label: "描述" },
-    { prop: 'remark', label: '备注' },
+    { prop: "remark", label: "备注" },
     {
-      prop: 'operations',
+      prop: "operations",
-      name: '操作',
+      name: "操作",
-      fixed: 'right',
+      fixed: "right",
       width: 120,
       subcomponent: TableOperaionComponent,
-      options: ['edit', { name: 'delete', permission: '' }]
+      options: ["edit", { name: "delete", permission: "pms:productionLine:delete" }],
-    }
+    },
-  ]
+  ];
-
 
   const headFormFields = [
     {
-      label: '产线名称/编码',
+      label: "产线名称/编码",
       input: true,
-      default: { value: '' }
+      default: { value: "" },
-    },
+      bind: {
-    {
+        placeholder: '请输入产线名称或编码'
-      button: {
-        type: 'primary',
-        name: '查询'
       }
     },
     {
       button: {
-        type: 'plain',
+        type: "primary",
-        name: '新增',
+        name: "查询",
-        permission: ''
+      },
-      }
+    },
-    }
+    {
-  ]
+      button: {
+        type: "plain",
+        name: "新增",
+        permission: "",
+      },
+    },
+  ];
 
-
+  /**
-  const dialogConfigs = {
+   * dialog config 有两个版本，一个适用于 DialogWithMenu 组件，另一个适用于 DialogJustForm 组件
-    menu: [{ name: '混料程序' }, { name: '参数明细', onlyEditMode: true }],
+   * 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
+   * 此为后者的配置:
+   */
+  const dialogJustFormConfigs = {
     form: {
-      url: '/pms/blenderStep',
       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,
-          { input: true, label: '版本号', prop: 'version', elparams: { placeholder: '请输入版本号' } },
+            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: "请输入产线编码" },
+          },
         ],
         [
-          // {
+          {
-          //   select: true,
+            select: true,
-          //   label: '城市',
+            label: "所属工厂",
-          //   prop: 'city',
+            prop: "factoryId",
-          //   options: [
+            fetchData: () => this.$http.get("/pms/factory/page", { params: { limit: 999, page: 1 } }),
-          //     { label: '1', value: 1 },
+            option: [],
-          //     { label: '2', value: 2 },
+            rules: { required: true, message: "not empty", trigger: "change" },
-          //     { label: '3', value: 3 },
+          },
-          //   ],
+          {
-          //   elparams: { placeholder: '请选择城市' }
+            input: true,
-          // },
+            label: "产线TT值",
-          // { input: true, label: '程序号', prop: '', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入混料程序号' } },
+            prop: "tvalue",
+            rules: [
+              { required: true, message: "not empty", trigger: "blur" },
+              { type: "number", message: "数字", trigger: "blur", transform: (val) => Number(val) },
+            ],
+            elparams: { placeholder: "设定TT值（每小时下片数量）" },
+          },
         ],
-        // [{ switch: true, label: '状态', prop: 'enabled', default: 0 }],
+        [{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
-        [{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }],
+        [{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
       ],
       operations: [
-        { name: 'add', label: '保存', type: 'primary', permission: 'pms:blenderStep:save', showOnEdit: false },
+        { name: "add", label: "保存", type: "primary", permission: "pms:productionLine:save", showOnEdit: false },
-        { name: 'update', label: '更新', type: 'primary', permission: 'pms:blenderStep:update', showOnEdit: true },
+        { name: "update", label: "更新", type: "primary", permission: "pms:productionLine:update", showOnEdit: true },
-        { name: 'reset', label: '重置', type: 'warning', showAlways: true },
+        { name: "reset", label: "重置", type: "warning", showAlways: true },
-        // { name: 'cancel', label: '取消', showAlways: true },
-      ],
-    },
-    table: {
-      // extraParams: ['stepId'],
-      extraParams: 'stepId',
-      props: [
-        { prop: 'sort', label: '步骤', isEditField: true },
-        { prop: 'name', label: '参数名称', isEditField: true },
-        { prop: 'description', label: '描述', isEditField: true },
-        { prop: 'value', label: '设定值', isEditField: true },
-        { prop: 'valueFloor', label: '值下限', isEditField: true },
-        { prop: 'valueTop', label: '值上限', isEditField: true },
-        {
-          prop: 'operations',
-          name: '操作',
-          fixed: 'right',
-          width: 120,
-          subcomponent: TableOperaionComponent,
-          options: [
-            { name: 'edit', permission: 'pms:blenderStepParam:update' },
-            { name: 'delete', permission: 'pms:blenderStepParam:delete' },
-          ]
-        }
-      ],
-      data: [
-        // TOOD 暂时用不到，但获取可以考虑把拉取接口数据的函数迁移到此文件（没有太大必要）
-      ],
-    },
-
-    subDialog: {
-      extraParam: 'stepId',
-      rows: [
-        [
-          { input: true, label: '步骤', prop: 'sort', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入步骤' } },
-          { input: true, label: '步骤描述', prop: 'description', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入描述' } },
-        ], [
-          { input: true, label: '参数名称', prop: 'name', elparams: { placeholder: '请输入参数名称' } },
-          { input: true, label: '参数编码', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入描述' } },
-        ], [
-          { input: true, label: '参数值上限', prop: 'valueTop', elparams: { placeholder: '请输入参数值上限' } },
-          { input: true, label: '参数值下限', prop: 'valueFloor', elparams: { placeholder: '请输入参数值下限' } },
-        ],
-        [
-          { input: true, label: '参数值', prop: 'value', elparams: { placeholder: '请输入参数值' } },
-        ]
-      ],
-      operations: [
-        { name: 'add', label: '保存', type: 'primary', permission: 'pms:blenderStepParam:save', showOnEdit: false },
-        { name: 'update', label: '更新', type: 'primary', permission: 'pms:blenderStepParam:update', showOnEdit: true },
-        //  { name: 'reset', label: '重置', type: 'warning', showAlways: true },
         // { name: 'cancel', label: '取消', showAlways: true },
       ],
     },
   };
-
+  // 备注：弹窗弹出的时间和网速有关......
 
   return {
-    dialogConfigs,
+    dialogConfigs: dialogJustFormConfigs,
     tableConfig: {
       table: null, // 此处可省略，el-table 上的配置项
       column: tableProps, // el-column-item 上的配置项
     },
     headFormConfigs: {
       rules: null, // 名称是由 BaseSearchForm.vue 组件固定的
-      fields: headFormFields // 名称是由 BaseSearchForm.vue 组件固定的
+      fields: headFormFields, // 名称是由 BaseSearchForm.vue 组件固定的
     },
     urls: {
-      base: '/pms/productionLine',
+      base: "/pms/productionLine",
-      page: '/pms/productionLine/page',
+      page: "/pms/productionLine/page",
       // subase: '/pms/blenderStepParam',
       // subpage: '/pms/blenderStepParam/page',
       // more...
-    }
+    },
-  }
+  };
 }