update SmallDialog

2023-02-03 15:14:07 +08:00
parent 0c1252467e
commit 70243b527f
3 changed files with 173 additions and 210 deletions
--- a/src/components/DialogWithMenu.vue
+++ b/src/components/DialogWithMenu.vue
@@ -205,9 +205,6 @@ export default {
    },
  },
  methods: {
-    k() {
-      console.log("[DialogWithMenu] closed");
-    },
    /** utitilities */
    showButton(operate) {
      const notDetailMode = !this.detailMode;
--- a/src/components/SmallDialog.vue
+++ b/src/components/SmallDialog.vue
@@ -1,93 +1,60 @@
 <template>
-	<!-- :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" -->
-	<el-dialog
-		class="a-small-dialog"
-		:visible.sync="visible"
-		@close="handleClose"
-		:distory-on-close="true"
-		:close-on-click-modal="false"
-		v-bind="$attrs"
-		:width="'30%'"
-		:modal="false"
-		:fullscreen="false"
-		:top="'10vh'"
-	>
-		<!-- :append-to-body="appendToBody"> -->
-		<div>
-			<el-form ref="dataForm" :model="dataForm">
-				<el-row
-					v-for="(row, rowIndex) in configs.rows"
-					:key="'row_' + rowIndex"
-					:gutter="20"
-				>
-					<el-col
-						v-for="(col, colIndex) in row"
-						:key="colIndex"
-						:span="col.span ?? 24 / row.length"
-					>
-						<el-form-item
-							:prop="col.prop"
-							:rules="col.rules || null"
-							:label="col.label"
-						>
-							<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>
+  <!-- :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" -->
+  <el-dialog
+    class="a-small-dialog"
+    :visible.sync="visible"
+    @close="handleClose"
+    :distory-on-close="true"
+    :close-on-click-modal="false"
+    v-bind="$attrs"
+    :width="'30%'"
+    :modal="false"
+    :fullscreen="false"
+    :top="'10vh'"
+  >
+    <!-- :append-to-body="appendToBody"> -->
+    <div>
+      <el-form ref="dataForm" :model="dataForm">
+        <el-row v-for="(row, rowIndex) in configs.rows" :key="'row_' + rowIndex" :gutter="20">
+          <el-col v-for="(col, colIndex) in row" :key="colIndex" :span="col.span ?? 24 / row.length">
+            <el-form-item :prop="col.prop" :rules="col.rules || null" :label="col.label">
+              <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>

-		<!-- footer  -->
-		<div slot="footer">
-			<template v-for="(operate, index) in configs.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.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>
@@ -98,136 +65,134 @@ import { pick as __pick } from "@/utils/filters";
 // import i18n from '@/i18n'

 export default {
-	name: "SmallDialog",
-	props: {
-		configs: {
-			type: Object,
-			default: () => ({}),
-		},
-		relatedId: {
-			type: String,
-			default: "",
-		},
-	},
-	inject: ["urls"],
-	data() {
-		const dataForm = {};
-		this.configs.rows.forEach((row) => {
-			row.forEach((col) => {
-				dataForm[col.prop] = col.default ?? "";
-				console.log("[small dialog]==========>", col.prop, dataForm[col.prop]);
-			});
-		});
+  name: "SmallDialog",
+  props: {
+    configs: {
+      type: Object,
+      default: () => ({}),
+    },
+    relatedId: {
+      type: String,
+      default: "",
+    },
+  },
+  inject: ["urls"],
+  data() {
+    const dataForm = {};
+    this.configs.rows.forEach((row) => {
+      row.forEach((col) => {
+        dataForm[col.prop] = col.default ?? "";
+        console.log("[small dialog]==========>", col.prop, dataForm[col.prop]);
+      });
+    });

-		return {
-			visible: false,
-			detailMode: false,
-			dataForm,
-			dataFormRules: {},
-			tempForm: [], // 临时保存自动生成的code，或其他数据
-		};
-	},
-	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) => {
-					console.log(">>> clearing key: ", key);
-					if (excludeId && key === "id") return;
-					this.dataForm[key] = null;
-				});
-				this.detailMode = false;
-			}, 500);
-		},
+    return {
+      visible: false,
+      detailMode: false,
+      dataForm,
+      dataFormRules: {},
+      tempForm: [], // 临时保存自动生成的code，或其他数据
+    };
+  },
+  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) => {
+          console.log(">>> clearing key: ", key);
+          if (excludeId && key === "id") return;
+          this.dataForm[key] = null;
+        });
+        this.detailMode = false;
+      }, 500);
+    },

-		init(id, isdetail = false) {
-			console.log("[small dialog] init", id, isdetail);
-			
-			this.detailMode = isdetail;
-			if (this.$refs.dataForm) this.$refs.dataForm.clearValidate()
+    init(id, isdetail = false) {
+      console.log("[small dialog] init", id, isdetail);

-			this.$nextTick(() => {
-				// this.$refs['dataForm'].resetFields();
-				this.dataForm.id = id || null;
+      this.detailMode = isdetail;
+      if (this.$refs.dataForm) this.$refs.dataForm.clearValidate();

-				if (this.dataForm.id) {
-					// 如果是编辑
-					this.$http
-						.get(this.urls.subase + `/${this.dataForm.id}`)
-						.then(({ data: res }) => {
-							if (res && res.code === 0) {
-								const dataFormKeys = Object.keys(this.dataForm);
-								this.dataForm = __pick(res.data, dataFormKeys);
-							}
-							this.visible = true;
-						});
-				} else {
-					// 如果不是编辑
-					this.visible = true
-				}
-			});
-		},
+      this.$nextTick(() => {
+        // this.$refs['dataForm'].resetFields();
+        this.dataForm.id = id || null;

-		handleSelectChange(col, event) {},
-		handleSwitchChange() {},
+        if (this.dataForm.id) {
+          // 如果是编辑
+          this.$http.get(this.urls.subase + `/${this.dataForm.id}`).then(({ data: res }) => {
+            if (res && res.code === 0) {
+              const dataFormKeys = Object.keys(this.dataForm);
+              this.dataForm = __pick(res.data, dataFormKeys);
+            }
+            this.visible = true;
+          });
+        } else {
+          // 如果不是编辑
+          this.visible = true;
+        }
+      });
+    },

-		handleBtnClick(payload) {
-			console.log("btn click payload: ", payload);
-			console.log("configs", this.configs);
-			if ("name" in payload) {
-				switch (payload.name) {
-					case "cancel":
-						this.handleClose();
-						break;
-					case "add":
-					case "update": {
-						console.log('update extraParam: ', this.configs.extraParam)
-						const method = payload.name === "add" ? "POST" : "PUT";
-						this.$http({
-							url: this.urls.subase,
-							method,
-							data: {
-								...this.dataForm,
-								[this.configs.extraParam]: this.relatedId,  // this.configs.extraParam 只能是字符串
-							},
-						}).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属性");
-			}
-		},
+    handleSelectChange(col, event) {},
+    handleSwitchChange() {},

-		handleClose() {
-			this.resetForm();
-			this.visible = false;
-		},
-	},
+    handleBtnClick(payload) {
+      console.log("btn click payload: ", payload);
+      console.log("configs", this.configs);
+      if ("name" in payload) {
+        switch (payload.name) {
+          case "cancel":
+            this.handleClose();
+            break;
+          case "add":
+          case "update": {
+            console.log("update extraParam: ", this.configs.extraParam);
+            const method = payload.name === "add" ? "POST" : "PUT";
+
+            const fields = {};
+            fields[this.configs.extraParam] = this.relatedId;
+            // [this.configs.extraParam]: this.relatedId,  // this.configs.extraParam 只能是字符串
+            if (this.configs.forceAttachCode) fields["code"] = "";
+
+            this.$http({
+              url: this.urls.subase,
+              method,
+              data: {
+                ...this.dataForm,
+								...fields
+              },
+            }).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属性");
+      }
+    },
+
+    handleClose() {
+      this.resetForm();
+      this.visible = false;
+    },
+  },
 };
 </script>

 <style scoped>
 .a-small-dialog >>> .el-dialog {
-	border-radius: 8px;
-	box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
 }
 </style>
--- a/src/views/modules/pms/product/config.js
+++ b/src/views/modules/pms/product/config.js
@@ -117,6 +117,7 @@ export default function () {

    subDialog: {
      extraParam: 'productId',
+      forceAttachCode: true, // 产品属性新增必填 code 字段......
      rows: [
        [
          { input: true, label: '属性名称', prop: 'name',  rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性名称' } },