From 7f7e9d3b854ed4a0a782918baacfbc91f12948c2 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Fri, 28 Jul 2023 14:49:51 +0800
Subject: [PATCH] update order--edit

---
 .../order/components/ListSectionWithHead.vue  |  26 +-
 .../pms/order/components/order--edit.vue      | 585 ++++++++++--------
 2 files changed, 341 insertions(+), 270 deletions(-)

diff --git a/src/views/modules/pms/order/components/ListSectionWithHead.vue b/src/views/modules/pms/order/components/ListSectionWithHead.vue
index 4b02408..fd6fcb8 100644
--- a/src/views/modules/pms/order/components/ListSectionWithHead.vue
+++ b/src/views/modules/pms/order/components/ListSectionWithHead.vue
@@ -37,17 +37,7 @@
       ref="order-dialog"
       v-if="renderDialog"
       fullscreen
-      :configs="dialogConfig"
-      @destroy-dialog="renderDialog = false"
-      @refreshDataList="getAList(Object.assign({}, listQuery, extraSearchConditions, params))" />
-
-    <DialogWithMenu
-      modal-append-to-body
-      ref="menu-dialog"
-      v-if="renderMenuDialog"
-      fullscreen
-      :configs="dialogConfig"
-      @destroy-dialog="renderMenuDialog = false"
+      @destroy="renderDialog = false"
       @refreshDataList="getAList(Object.assign({}, listQuery, extraSearchConditions, params))" />
 
     <DialogUpload
@@ -69,16 +59,15 @@
 import BaseListTable from "./BaseListTable.vue";
 import BaseSearchForm from "./BaseSearchForm.vue";
 import DialogJustForm from "./DialogJustForm.vue";
-import DialogWithMenu from "./DialogWithMenu.vue";
 import DialogUpload from "@/components/DialogUpload.vue";
 import moment from "moment";
 import Overlay from "@/components/Overlay.vue";
-import OrderEditDialog from './order--edit.vue'
+import OrderEditDialog from "./order--edit.vue";
 
 // const dictList = JSON.parse(localStorage.getItem("dictList"));
 export default {
   name: "ListSectionWithHead",
-  components: { OrderEditDialog, BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogUpload, Overlay },
+  components: { OrderEditDialog, BaseSearchForm, BaseListTable, DialogJustForm, DialogUpload, Overlay },
   props: {
     headConfig: {
       type: Object,
@@ -94,10 +83,6 @@ export default {
         column: null,
       }),
     },
-    dialogConfig: {
-      type: Object,
-      default: null,
-    },
     pageUrl: {
       type: String,
       default: "#",
@@ -112,11 +97,6 @@ export default {
       required: true,
     },
   },
-  computed: {
-    dialogType() {
-      return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM;
-    },
-  },
   watch: {
     refreshKey(newVal) {
       // 外部触发更新列表
diff --git a/src/views/modules/pms/order/components/order--edit.vue b/src/views/modules/pms/order/components/order--edit.vue
index 3e1a4b7..810e444 100644
--- a/src/views/modules/pms/order/components/order--edit.vue
+++ b/src/views/modules/pms/order/components/order--edit.vue
@@ -4,23 +4,23 @@
     :fullscreen="fullscreen"
     :visible="visible"
     @close="handleClose"
-    :destroy-on-close="false"
-    :close-on-click-modal="false">
-    <!-- title  -->
+    @closed="$emit('destroy')"
+    :close-on-click-modal="false"
+    v-loading="optionsLoading || formLoading">
     <div slot="title" class="dialog-title">
       <h2 class="">
-        {{ detailMode ? "查看详情" : dataForm.id ? "修改订单" : "新增订单" }}
+        {{ mode.includes("detail") ? "查看详情" : dataForm.id ? "修改订单" : "新增订单" }}
       </h2>
     </div>
 
     <!-- form  -->
 
-    <el-form ref="dataForm" :model="dataForm" v-loading="formLoading" size="small">
+    <el-form ref="dataForm" :model="dataForm" size="small">
       <InputsArea title="生产订单">
         <el-row :gutter="20">
           <el-col :span="6">
             <el-form-item label="订单状态" prop="statusDictValue" :rules="null">
-              <span style="display: block; margin-top: 0">{{ dataForm.statusDictValue }}</span>
+              <span style="display: block; margin-top: 32px">{{ dataForm.statusDictValue }}</span>
             </el-form-item>
           </el-col>
           <el-col :span="6">
@@ -41,7 +41,7 @@
                   type: 'number',
                   message: '输入正确的数字类型',
                   trigger: 'blur',
-                  transform: '<<(val) => Number(val)>>',
+                  transform: (val) => Number(val),
                 },
               ]">
               <el-input v-model="dataForm.cate" v-bind="{ placeholder: '输入订单子号' }"></el-input>
@@ -76,9 +76,15 @@
                 filterable
                 clearable
                 v-bind="{ placeholder: '选择压机', filterable: true }">
-                <el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
+                <el-option
+                  v-for="opt in pressOptions"
+                  :key="opt.label + opt.value"
+                  :label="opt.label"
+                  :value="opt.value">
                   <span>{{ opt.label }}</span>
-                  <span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
+                  <span
+                    v-if="requestList[0].extraLabel"
+                    style="display: inline-block; margin-left: 12px; font-size: 0.9em">
                     {{ opt.code }}
                   </span>
                 </el-option>
@@ -95,9 +101,15 @@
                 filterable
                 clearable
                 v-bind="{ placeholder: '选择混料机', filterable: true }">
-                <el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
+                <el-option
+                  v-for="opt in blenderOptions"
+                  :key="opt.label + opt.value"
+                  :label="opt.label"
+                  :value="opt.value">
                   <span>{{ opt.label }}</span>
-                  <span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
+                  <span
+                    v-if="requestList[1].extraLabel"
+                    style="display: inline-block; margin-left: 12px; font-size: 0.9em">
                     {{ opt.code }}
                   </span>
                 </el-option>
@@ -111,9 +123,15 @@
                 filterable
                 clearable
                 v-bind="{ placeholder: '选择隧道窑', filterable: true }">
-                <el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
+                <el-option
+                  v-for="opt in kilnOptions"
+                  :key="opt.label + opt.value"
+                  :label="opt.label"
+                  :value="opt.value">
                   <span>{{ opt.label }}</span>
-                  <span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
+                  <span
+                    v-if="requestList[2].extraLabel"
+                    style="display: inline-block; margin-left: 12px; font-size: 0.9em">
                     {{ opt.code }}
                   </span>
                 </el-option>
@@ -128,29 +146,51 @@
         </el-row>
         <el-row :gutter="20">
           <el-col :span="6">
-            <el-form-item label="牌号" prop="bomId" :rules="null">
+            <el-form-item label="配方号" prop="bomId" :rules="null">
               <el-select
                 v-model="dataForm.bomId"
                 filterable
                 clearable
-                v-bind="{ placeholder: '选择牌号', filterable: true }">
-                <el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
-                  <span>{{ opt.label }}</span>
-                  <span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
-                    {{ opt.undefined }}
+                @change="handleBomChange"
+                v-bind="{ placeholder: '选择配方号', filterable: true }">
+                <el-option
+                  v-for="opt in bomOptions"
+                  :key="opt.label + opt.value"
+                  :label="opt.label"
+                  :value="opt.value"
+                  style="display: flex; align-items: center">
+                  <span style="display: inline-block; width: 128px; text-overflow: ellipsis">{{ opt.label }}</span>
+                  <span
+                    v-if="requestList[3].extraLabel"
+                    style="display: inline-block; margin-left: 12px; font-size: 0.9em">
+                    {{ opt.name }}
                   </span>
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="6">
-            <el-form-item label="配方号" prop="bomCode" :rules="null">
-              <span style="display: block; margin-top: 0">{{ dataForm.bomCode }}</span>
+            <el-form-item label="牌号" prop="brand" :rules="null">
+              <span style="display: block; margin-top: 32px">{{ dataForm.brand }}</span>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="版本号" prop="ai" :rules="null">
-              <span style="display: block; margin-top: 0">{{ dataForm.ai }}</span>
+              <!-- <span style="display: block; margin-top: 32px">{{ dataForm.ai }}</span> -->
+              <el-select
+                v-model="dataForm.ai"
+                filterable
+                clearable
+                v-bind="{ placeholder: '请选择版本' }"
+                @change="handleVersionChange">
+                <el-option
+                  v-for="opt in versionList"
+                  :key="opt.label + opt.value"
+                  :label="opt.label"
+                  :value="opt.value">
+                  <span>{{ opt.label }}</span>
+                </el-option>
+              </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="6">
@@ -160,9 +200,15 @@
                 filterable
                 clearable
                 v-bind="{ placeholder: '选择包装代码', filterable: true }">
-                <el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
+                <el-option
+                  v-for="opt in packOptions"
+                  :key="opt.label + opt.value"
+                  :label="opt.label"
+                  :value="opt.value">
                   <span>{{ opt.label }}</span>
-                  <span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
+                  <span
+                    v-if="requestList[4].extraLabel"
+                    style="display: inline-block; margin-left: 12px; font-size: 0.9em">
                     {{ opt.code }}
                   </span>
                 </el-option>
@@ -178,9 +224,15 @@
                 filterable
                 clearable
                 v-bind="{ placeholder: '选择物料', filterable: true }">
-                <el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
+                <el-option
+                  v-for="opt in productOptions"
+                  :key="opt.label + opt.value"
+                  :label="opt.label"
+                  :value="opt.value">
                   <span>{{ opt.label }}</span>
-                  <span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
+                  <span
+                    v-if="requestList[5].extraLabel"
+                    style="display: inline-block; margin-left: 12px; font-size: 0.9em">
                     {{ opt.code }}
                   </span>
                 </el-option>
@@ -194,9 +246,15 @@
                 filterable
                 clearable
                 v-bind="{ placeholder: '选择砖型', filterable: true }">
-                <el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
+                <el-option
+                  v-for="opt in shapeOptions"
+                  :key="opt.label + opt.value"
+                  :label="opt.label"
+                  :value="opt.value">
                   <span>{{ opt.label }}</span>
-                  <span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
+                  <span
+                    v-if="requestList[6].extraLabel"
+                    style="display: inline-block; margin-left: 12px; font-size: 0.9em">
                     {{ opt.code }}
                   </span>
                 </el-option>
@@ -213,7 +271,7 @@
                   type: 'number',
                   message: '输入正确的数字类型',
                   trigger: 'blur',
-                  transform: '<<(val) => Number(val)>>',
+                  transform: (val) => Number(val),
                 },
               ]">
               <el-input v-model="dataForm.sapParam6" v-bind="{ placeholder: '输入烧成温度' }"></el-input>
@@ -229,7 +287,7 @@
                   type: 'number',
                   message: '输入正确的数字类型',
                   trigger: 'blur',
-                  transform: '<<(val) => Number(val)>>',
+                  transform: (val) => Number(val),
                 },
               ]">
               <el-input v-model="dataForm.sapParam7" v-bind="{ placeholder: '输入烧成时间' }"></el-input>
@@ -255,7 +313,7 @@
                   type: 'number',
                   message: '输入正确的数字类型',
                   trigger: 'blur',
-                  transform: '<<(val) => Number(val)>>',
+                  transform: (val) => Number(val),
                 },
               ]">
               <el-input v-model="dataForm.prodqty" v-bind="{ placeholder: '输入要求生产的数量' }"></el-input>
@@ -270,7 +328,7 @@
                   type: 'number',
                   message: '输入正确的数字类型',
                   trigger: 'blur',
-                  transform: '<<(val) => Number(val)>>',
+                  transform: (val) => Number(val),
                 },
               ]">
               <el-input v-model="dataForm.yieldqty" v-bind="{ placeholder: '输入已经生产的数量' }"></el-input>
@@ -286,7 +344,7 @@
                   type: 'number',
                   message: '输入正确的数字类型',
                   trigger: 'blur',
-                  transform: '<<(val) => Number(val)>>',
+                  transform: (val) => Number(val),
                 },
               ]">
               <el-input v-model="dataForm.pcsKilnCar" v-bind="{ placeholder: '输入托盘码放砖数' }"></el-input>
@@ -317,7 +375,7 @@
                   type: 'number',
                   message: '输入正确的数字类型',
                   trigger: 'blur',
-                  transform: '<<(val) => Number(val)>>',
+                  transform: (val) => Number(val),
                 },
               ]">
               <el-input v-model="dataForm.soqty" v-bind="{ placeholder: '输入销售订单砖数' }"></el-input>
@@ -339,9 +397,15 @@
               prop="customerId"
               :rules="{ required: true, message: '必填项不能为空', trigger: 'blur' }">
               <el-select v-model="dataForm.customerId" filterable clearable v-bind="{ placeholder: '选择客户' }">
-                <el-option v-for="opt in options" :key="opt.label" :label="opt.label" :value="opt.value">
+                <el-option
+                  v-for="opt in clientOptions"
+                  :key="opt.label + opt.value"
+                  :label="opt.label"
+                  :value="opt.value">
                   <span>{{ opt.label }}</span>
-                  <span v-if="col.extraLabel" style="display: inline-block; margin-left: 12px; font-size: 0.9em">
+                  <span
+                    v-if="requestList[7].extraLabel"
+                    style="display: inline-block; margin-left: 12px; font-size: 0.9em">
                     {{ opt.name }}
                   </span>
                 </el-option>
@@ -350,7 +414,7 @@
           </el-col>
           <el-col :span="6">
             <el-form-item label="物料号销售文本" prop="shortDesc" :rules="null">
-              <span style="display: block; margin-top: 0">{{ dataForm.shortDesc }}</span>
+              <span style="display: block; margin-top: 32px">{{ dataForm.shortDesc }}</span>
             </el-form-item>
           </el-col>
           <el-col :span="6"></el-col>
@@ -368,23 +432,17 @@
 
     <!-- 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>
+      <!-- TODO: permission 相关内容 未添加  -->
+      <el-button v-if="mode.includes('create')" type="primary" @click="handleSave">保存</el-button>
+      <el-button v-if="mode.includes('edit')" type="primary" @click="handleUpdate">更新</el-button>
+      <el-button v-if="mode.includes('reset')" type="warning" @click="handleReset">重置</el-button>
+      <el-button @click="handleClose">取消</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script>
 import { pick as __pick } from "@/utils/filters";
-import Cookies from "js-cookie";
 import moment from "moment";
 import InputsArea from "./InputsArea.vue";
 
@@ -392,13 +450,6 @@ export default {
   name: "DialogJustForm",
   components: { InputsArea },
   props: {
-    configs: {
-      type: Object,
-      default: () => ({
-        clickModalToClose: false,
-        forms: null,
-      }),
-    },
     fullscreen: {
       type: Boolean,
       default: false,
@@ -406,172 +457,257 @@ export default {
   },
   inject: ["urls"],
   data() {
-    const dataForm = {};
-    const watchList = [];
-    const cachedList = {};
-
-    this.configs.form.field.forEach((field) => {
-      field.rows.forEach((row) => {
-        row.forEach((col) => {
-          if (!col.prop) return;
-
-          dataForm[col.prop] = col.default ?? null;
-
-          if (col.fetchData)
-            col.fetchData().then(({ data: res }) => {
-              if (res.code === 0) {
-                if (typeof res.data === "object" && "list" in res.data) {
-                  if ("injectTo" in col) {
-                    // 保存完整的数据列表，用于自动更新关联字段
-                    cachedList[col.prop] = res.data.list;
-                  }
-                  this.$set(
-                    col,
-                    "options",
-                    res.data.list.map((i) => ({
-                      label: col.optionLabel ? i[col.optionLabel] : i.name,
-                      value: col.optionValue ? i[col.optionValue] : i.id,
-                    }))
-                  );
-                } else if (Array.isArray(res.data)) {
-                  this.$set(
-                    col,
-                    "options",
-                    res.data.map((i) => ({
-                      label: col.optionLabel ? i[col.optionLabel] : i.name,
-                      value: col.optionValue ? i[col.optionValue] : i.id,
-                    }))
-                  );
-                }
-              } else {
-                // error 静默失败
-                col.options.splice(0);
-              }
-            });
-          else if (col.fetchTreeData) {
-            // 获取设备类型时触发的，用于前端构建属性结构，约定，parentId 为0时是顶级节点
-            col.fetchTreeData().then(({ data: res }) => {
-              // console.log("[DialogJustForm fetchTreeData -->]", res.data);
-              if (res.code === 0 && res.data) {
-                if ("list" in res.data) {
-                  this.$set(col, "options", res.data.list);
-                } else if (Array.isArray(res.data)) {
-                  this.$set(col, "options", res.data);
-                }
-              } else {
-                col.options.splice(0);
-              }
-            });
-          }
-        });
-      });
-    });
-
     return {
+      mode: "#edit#reset",
       formLoading: false,
-      dataForm,
-      watchList,
-      cachedList,
-      detailMode: false,
-      baseDialogConfig: null,
+      optionsLoading: false,
+      pressOptions: [], // 压机列表
+      blenderOptions: [], // 混料机列表
+      kilnOptions: [], // 窑炉列表
+      bomOptions: [], // 牌号列表
+      packOptions: [], // 包装代码列表
+      productOptions: [], // 物料代码
+      shapeOptions: [], // 砖型代码
+      clientOptions: [], // 客户礼拜
+      versionList: [], // 版本列表
+      cachedList: {}, // 用来缓存请求回来的原始列表数据
+      dataForm: {
+        statusDictValue: null,
+        code: null,
+        cate: null,
+        planStartTime: null,
+        press: null,
+        blender: null,
+        kiln: null,
+        sapParam1: null,
+        bomId: null,
+        brand: null, // 牌号
+        ai: null, // 版本号
+        packTech: null,
+        productId: null,
+        shape: null,
+        sapParam6: null,
+        sapParam7: null,
+        specifications: null,
+        prodqty: null,
+        yieldqty: null,
+        pcsKilnCar: null,
+        saleNo: null,
+        saleOrderItem: null,
+        soqty: null,
+        deliveryTime: null,
+        customerId: null,
+        shortDesc: null,
+        remark: null,
+      },
       visible: false,
+      requestList: [
+        {
+          url: "/pms/equipment/search",
+          params: {
+            equipmentTypeCode: "Press",
+          },
+          method: "get",
+          target: "pressOptions",
+          label: "code",
+        },
+        {
+          url: "/pms/equipment/search",
+          params: {
+            equipmentTypeCode: "Mix",
+          },
+          method: "get",
+          target: "blenderOptions",
+          label: "code",
+        },
+        {
+          url: "/pms/equipment/search",
+          params: {
+            equipmentTypeCode: "Kiln",
+          },
+          method: "get",
+          target: "kilnOptions",
+          label: "code",
+        },
+        {
+          url: "/pms/bom/page",
+          params: {
+            limit: 999,
+            page: 1,
+            key: "",
+            externalCode: "",
+          },
+          method: "get",
+          target: "bomOptions",
+          label: "code",
+          extraLabel: "name",
+          cache: true,
+        },
+        {
+          url: "/pms/equipmentTech/pageView",
+          params: {
+            limit: 999,
+            page: 1,
+            key: "",
+            shape: "",
+            wsId: 5,
+          },
+          method: "post",
+          target: "packOptions",
+          label: "code",
+        },
+        {
+          url: "/pms/product/page",
+          params: {
+            limit: 999,
+            page: 1,
+            key: "",
+          },
+          method: "get",
+          target: "productOptions",
+          label: "code",
+        },
+        {
+          url: "/pms/shape/page",
+          params: {
+            limit: 999,
+            page: 1,
+            key: "",
+          },
+          method: "get",
+          target: "shapeOptions",
+          label: "code",
+        },
+        {
+          url: "/pms/customer/page",
+          params: {
+            limit: 999,
+            page: 1,
+            name: "",
+          },
+          method: "get",
+          target: "clientOptions",
+          label: "name",
+        },
+      ],
+      promiseList: [],
+      bomId: null,
     };
   },
-  mounted() {
-    /** 处理 injectTo 选项 */
-    this.configs.form.field.forEach((field) => {
-      field.rows.forEach((row) => {
-        row.forEach((col) => {
-          if (!col.prop) return;
-          if ("injectTo" in col && Array.isArray(col.injectTo)) {
-            // console.log("watching options ..... ", col);
-            col.injectTo.map((item) => {
-              const unwatch = this.$watch(
-                () => this.dataForm[col.prop],
-                (newVal) => {
-                  const chosenObject = this.cachedList[col.prop].find((i) => i.id === newVal);
-                  if (chosenObject) {
-                    // 如果找到了
-                    this.$set(this.dataForm, item[0], chosenObject[item[1]]);
-                  }
-                },
-                {
-                  immediate: false,
-                }
+
+  methods: {
+    /**
+     * 打开弹窗后，准备下拉选项数据
+     * 复用方式：
+     * 1. 在 data 里定义 requestList
+     * 2. 复制本方法到组件中去
+     * 3. requestList 参考上面的 data
+     */
+    async prepareSelectOptions() {
+      this.optionsLoading = true;
+
+      this.requestList.forEach((req) => {
+        this.promiseList.push(async () => {
+          const { data: res } = await this.$http[req.method](
+            req.url,
+            req.method.toLowerCase() == "post" ? req.params : { params: req.params }
+          );
+          if (res.code == 0) {
+            if ("list" in res.data) {
+              // 从 target 中抽取缓存名称
+              if (req.cache) this.cachedList[req.target.replace(/options/i, "")] = res.data.list;
+              this[req.target] = res.data.list.map((item) =>
+                req.extraLabel
+                  ? {
+                      [req.extraLabel]: item[req.extraLabel],
+                      label: item[req.label],
+                      value: item.id,
+                    }
+                  : {
+                      label: item[req.label],
+                      value: item.id,
+                    }
               );
-              this.watchList.push(unwatch);
-            });
+            } else if (Array.isArray(res.data)) {
+              if (req.cache) this.cachedList[req.target.replace(/options/i, "")] = res.data;
+              this[req.target] = res.data.map((item) =>
+                req.extraLabel
+                  ? {
+                      [req.extraLabel]: item[req.extraLabel],
+                      label: item[req.label],
+                      value: item.id,
+                    }
+                  : {
+                      label: item[req.label],
+                      value: item.id,
+                    }
+              );
+            }
           }
         });
       });
-    });
-  },
-  computed: {
-    uploadHeaders() {
-      return {
-        token: Cookies.get("token") || "",
-      };
+
+      try {
+        await Promise.all(this.promiseList.map((fn) => fn()));
+      } catch (err) {
+        this.$message.error("获取数据失败，请刷新页面重试");
+        this.optionsLoading = false;
+      }
+
+      this.optionsLoading = false;
     },
-  },
-  methods: {
-    handleFilelistUpdate(newFilelist) {
-      // TODO: 直接访问 .files 可能不太合适
-      this.dataForm.files = newFilelist.map((file) => ({
-        id: file.id,
-        name: file.name,
-        url: file.url,
-        typeCode: file.typeCode,
-      }));
-      // 更新请求
-      if ("id" in this.dataForm && this.dataForm.id !== null && this.dataForm.id !== undefined) this.addOrUpdate("PUT");
-      else
-        this.$notify({
-          title: "等待保存",
-          message: "已添加文件，请手动点击保存！",
-          type: "warning",
-          duration: 2500,
-        });
+
+    /**
+     * 向这种select上的监听事件
+     * 不自动生成
+     * 因为每个页面也许有独立的需求链
+     */
+    handleBomChange(bomID) {
+      console.log("[handleBomChange] val is: ", bomID);
+      const target = this.cachedList.bom.find((item) => item.id === bomID);
+      // 这个单独的 bomId 是个极其特殊的需求，所以不放在 dataForm 里
+      this.bomId = bomID;
+      this.getBomVersionList(target);
+      this.$set(this.dataForm, "brand", target.name);
+      this.$set(this.dataForm, "ai", target.version);
     },
 
-    /** 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));
+    async getBomVersionList(bom) {
+      try {
+        const { data: res } = await this.$http.get("/pms/bom/pageVersion", { params: { key: bom.code } });
+        console.log("[bom version list]", res.data.list);
+        this.versionList = res.data.list.map((item) => ({
+          label: item.version,
+          value: item.version,
+          id: item.id,
+        }));
+      } catch (err) {
+        this.$message.error("获取数据失败，请刷新页面重试");
+      }
     },
 
-    resetForm(excludeId = false, immediate = false) {
-      setTimeout(
-        () => {
-          Object.keys(this.dataForm).forEach((key) => {
-            if (excludeId && key === "id") return;
-            this.dataForm[key] = null;
-          });
-          // console.log("[DialogJustForm resetForm()] clearing form...");
-          this.$refs.dataForm.clearValidate();
-          this.$emit("dialog-closed"); // 触发父组件销毁自己
-          this.watchList.map((unwatch) => unwatch());
-          this.cachedList = {};
-        },
-        immediate ? 0 : 200
-      );
+    /**
+     * 版本 变化，更新 bomList
+     * @param {*} v
+     */
+    handleVersionChange(v) {
+      const targetBom = this.versionList.find((item) => item.value === v);
+      // this.bomId 用于在提交的时候置换 this.dataForm.bomId
+      this.bomId = targetBom.id;
     },
 
-    /** init **/
-    init(id, detailMode) {
+    async init(id) {
       this.visible = true;
-      return;
-      // console.log("[DialogJustForm] init", this.dataForm, id, detailMode);
+      await this.prepareSelectOptions();
+
       if (this.$refs.dataForm) {
         // console.log("[DialogJustForm] clearing form validation...");
         // 当不是首次渲染dialog的时候，一开始就清空验证信息，本组件的循环里只有一个 dataForm 所以只用取 [0] 即可
         this.$refs.dataForm.clearValidate();
       }
 
-      this.detailMode = detailMode ?? false;
+      if (id) this.mode = "#edit#reset";
+
       this.$nextTick(() => {
         this.dataForm.id = id || null;
         if (this.dataForm.id) {
@@ -584,16 +720,6 @@ export default {
             .then(({ data: res }) => {
               if (res && res.code === 0) {
                 this.dataForm = __pick(res.data, Object.keys(this.dataForm));
-                /** 格式化文件上传列表 */
-                if (Array.isArray(this.dataForm.files)) {
-                  this.dataForm.files = this.dataForm.files.map((file) => ({
-                    id: file.id,
-                    name: file.fileUrl.split("/").pop(),
-                    typeCode: file.typeCode,
-                    url: file.fileUrl,
-                  }));
-                }
-                // console.log("[DialogJustForm] init():", this.dataForm);
               } else {
                 this.$message({
                   message: `${res.code}: ${res.msg}`,
@@ -620,19 +746,9 @@ export default {
 
     /** handlers */
     handleSelectChange(col, eventValue) {
-      // console.log("[dialog] select change: ", col, eventValue);
       this.$forceUpdate();
     },
 
-    handleSwitchChange(val) {
-      // console.log("[dialog] switch change: ", val, this.dataForm);
-    },
-
-    handleComponentModelUpdate(propName, { subject, payload: { data } }) {
-      this.dataForm[propName] = JSON.stringify(data);
-      // console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
-    },
-
     addOrUpdate(method = "POST") {
       if ("parentId" in this.dataForm) {
         // console.log("[DialogJustForm parentId]", this.dataForm.parentId);
@@ -724,39 +840,14 @@ export default {
       });
     },
 
-    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.addOrUpdate(payload.name === "add" ? "POST" : "PUT");
-            break;
-        }
-      } else {
-        console.log("[x] 不是这么用的! 缺少name属性");
-      }
-    },
+    handleSave() {},
 
-    handleUploadChange(file, fileList) {
-      // console.log("[Upload] handleUploadChange...", file, fileList);
-    },
+    handleUpdate() {},
+
+    handleReset() {},
 
     handleClose() {
       this.visible = false;
-
-      setTimeout(() => {
-        this.$emit("destroy-dialog");
-        // this.resetForm();
-        // this.$emit("update:dialogVisible", false);
-      }, 200);
     },
   },
 };