1

src/views/BidSystem/ContractList/edit.vue

@@ -63,7 +63,7 @@
             style="width: 200px"
           />
         </FormItem>
-        <FormItem label="客户名称:">
+        <FormItem label="客户姓名:">
           <Select
             clearable
             filterable
@@ -236,6 +236,7 @@
         <Button
           @click="handleAreaAdd(formData.list, areaIndex)"
           :disabled="isChecked"
+          size="small"
           type="primary"
           style="margin-right: 10px"
           >新增区域</Button
@@ -243,6 +244,7 @@
         <Button
           @click="handleAreaDele(areaIndex)"
           type="error"
+          size="small"
           v-show="areaIndex != 0"
           :disabled="isChecked"
           style="margin-right: 10px"
@@ -251,9 +253,24 @@
         <Button
           @click="handleAreaAddPDT(areaItem, areaIndex)"
           :disabled="isChecked"
+          size="small"
+          style="margin-right: 10px"
+          v-show="
+            type == 1 ||
+              (type == 2 && !areaItem.id) ||
+              (type == 2 && areaItem.isCurrencyArea)
+          "
           type="primary"
-          >新增产品</Button
-        >
+          >新增产品
+        </Button>
+        <Button
+          @click="handleShowCurrencyArea(areaItem, areaIndex)"
+          ghost
+          size="small"
+          v-show="type != 1 && areaItem.id && !areaItem.isCurrencyArea"
+          type="primary"
+          >展示产品
+        </Button>
       </div>
       <div class="addAreaForm">
         <Form :label-width="100" :model="areaItem" style="width: 60%">
@@ -510,7 +527,7 @@
               type="text"
               size="small"
               v-model="tempItem.price"
-              placeholder="请输入备注"
+              placeholder="请输入价格"
               style="width: 120px"
             />
           </FormItem>
@@ -711,21 +728,15 @@
               >
             </Select>
           </FormItem>
-          <div style="display: contents">
-            <!-- <FormItem :label="_item.title"
-                      v-for="(_item) in PDTEdit.measures"
-                      :key="_item.id">
-              <Input type="text"
-                     size="small"
-                     v-model="PDTEdit[_item.e_title]"
-                     placeholder="请输入"
-                     style="width: 120px" />
-            </FormItem> -->
-          </div>
-          <div style="display: contents">
+          <div
+            style="display: contents"
+            v-for="el in PDTEdit.tempPDTTypeList"
+            :key="el"
+          >
             <FormItem
               :label="_item.title"
               v-for="_item in PDTEdit.tempMeasureList"
+              v-show="el == _item.id"
               :key="_item.id"
             >
               <Input
@@ -737,12 +748,27 @@
               />
             </FormItem>
           </div>
+          <!-- <div style="display: contents">
+            <FormItem
+              :label="_item.title"
+              v-for="_item in PDTEdit.tempMeasureList"
+              :key="_item.id"
+            >
+              <Input
+                type="text"
+                size="small"
+                v-model="PDTEdit[_item.e_title]"
+                placeholder="请输入"
+                style="width: 120px"
+              />
+            </FormItem>
+          </div> -->
           <FormItem label="价格:">
             <Input
               type="text"
               size="small"
               v-model="PDTEdit.price"
-              placeholder="请输入备注"
+              placeholder="请输入价格"
               style="width: 120px"
             />
           </FormItem>
@@ -1047,7 +1073,7 @@ export default {
                   "max-width:50px;max-height:50px;position:relative;top:3px;",
               },
               on: {
-                click: (e) => {
+                click: () => {
                   // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
                   // row.imgs = res.data
                   let list = [];
@@ -1146,11 +1172,12 @@ export default {
       warningList: [],
       clientList: [],
       clientDetailList: [],
+      type: this.$route.query.type,
     };
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    //2编辑  3详情  0新增
+    //2编辑  3详情  1新增
     this.$route.query.type == 3 ? (this.isChecked = true) : "";
     this.$route.query.order_no
       ? (this.formData.order_no = this.$route.query.order_no)
@@ -1210,207 +1237,276 @@ export default {
         params: {
           order_no,
         },
-      })
-        .then((res) => {
-          this.formData = res.data;
-          if (this.formData.list.length == 0) {
-            this.formData.list.push({
-              areaIndex: 1,
-              num: "",
-              title: "",
-              unit: "",
-              quantity: "",
-              house_type: "",
-              remark: "",
-              order_no: "",
-              special: [],
-              head: [],
-              product: [
-                {
-                  title: "",
-                  num: "",
-                  measure: "",
-                  process_property: "",
-                  special: [],
-                  url: [],
-                  url_number: "",
-                  remark: "",
-                },
-              ],
-            });
-          }
-          this.formData.start_time = this.func.replaceDateNoHMS(
-            this.formData.start_time
-          );
-          this.formData.end_time = this.func.replaceDateNoHMS(
-            this.formData.end_time
-          );
-          this.formData.list.forEach((element) => {});
-          // 产品特殊字段→ 弹窗窗口，table表头
-          let arr = [];
-          res.data.head[3] &&
-            res.data.head[3].forEach((item) => {
-              // ele[key] = item.key
-              arr.push({
-                title: item.key,
-                key: item.key,
-                align: "center",
-                minWidth: 80,
-              });
-            });
-          this.tableColumns = [
-            { title: "序号", key: "index", align: "center", minWidth: 80 },
-            {
-              title: "产品名称",
-              key: "title",
-              align: "center",
-              tooltip: true,
-              minWidth: 100,
-            },
-            { title: "数量", key: "num", align: "center", minWidth: 80 },
-            { title: "价格", key: "price", align: "center", minWidth: 80 },
-            {
-              title: "规格",
-              key: "measure",
-              align: "center",
-              tooltip: true,
-              minWidth: 140,
-            },
-            {
-              title: "工艺属性",
-              key: "process_property",
-              align: "center",
-              tooltip: true,
-              minWidth: 120,
-            },
-            {
-              title: "图纸",
-              align: "center",
-              key: "url",
-              minWidth: 100,
-              render: (h, params) => {
-                const { row } = params;
-                let url = row.url ? row.url : [];
-                return h("img", {
-                  attrs: {
-                    src: this.$store.state.ip + url[0],
-                    style:
-                      "max-width:50px;max-height:50px;position:relative;top:3px;",
-                  },
-                  on: {
-                    click: (e) => {
-                      // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
-                      // row.imgs = res.data
-                      let list = [];
-                      row.url.forEach((el) => {
-                        list.push({ img_url: el });
-                      });
-                      this.$previewImg({
-                        list,
-                        baseUrl: this.$store.state.ip,
-                        baseImgField: "img_url",
-                        baseTitleField: "",
-                      });
-                      // })
-                    },
-                  },
-                });
-              },
-            },
-            {
-              title: "图号",
-              key: "url_number",
+      }).then((res) => {
+        this.formData = res.data;
+        if (this.formData.list.length == 0) {
+          this.formData.list.push({
+            areaIndex: 1,
+            num: "",
+            title: "",
+            unit: "",
+            quantity: "",
+            house_type: "",
+            remark: "",
+            order_no: "",
+            special: [],
+            head: [],
+            // product: [
+            //   {
+            //     title: "",
+            //     num: "",
+            //     measure: "",
+            //     process_property: "",
+            //     special: [],
+            //     url: [],
+            //     url_number: "",
+            //     remark: "",
+            //   },
+            // ],
+          });
+        }
+        this.formData.start_time = this.func.replaceDateNoHMS(
+          this.formData.start_time
+        );
+        this.formData.end_time = this.func.replaceDateNoHMS(
+          this.formData.end_time
+        );
+        // 产品特殊字段→ 弹窗窗口，table表头
+        let arr = [];
+        res.data.head[3] &&
+          res.data.head[3].length > 0 &&
+          res.data.head[3].forEach((item) => {
+            // ele[key] = item.key
+            arr.push({
+              title: item.key,
+              key: item.key,
               align: "center",
-              tooltip: true,
               minWidth: 80,
+            });
+          });
+        this.tableColumns = [
+          { title: "序号", key: "index", align: "center", minWidth: 80 },
+          {
+            title: "产品名称",
+            key: "title",
+            align: "center",
+            tooltip: true,
+            minWidth: 100,
+          },
+          { title: "数量", key: "num", align: "center", minWidth: 80 },
+          { title: "价格", key: "price", align: "center", minWidth: 80 },
+          {
+            title: "规格",
+            key: "measure",
+            align: "center",
+            tooltip: true,
+            minWidth: 140,
+          },
+          {
+            title: "工艺属性",
+            key: "process_property",
+            align: "center",
+            tooltip: true,
+            minWidth: 120,
+          },
+          {
+            title: "图纸",
+            align: "center",
+            key: "url",
+            minWidth: 100,
+            render: (h, params) => {
+              const { row } = params;
+              let url = row.url ? row.url : [];
+              return h("img", {
+                attrs: {
+                  src: this.$store.state.ip + url[0],
+                  style:
+                    "max-width:50px;max-height:50px;position:relative;top:3px;",
+                },
+                on: {
+                  click: () => {
+                    // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
+                    // row.imgs = res.data
+                    let list = [];
+                    row.url.forEach((el) => {
+                      list.push({ img_url: el });
+                    });
+                    this.$previewImg({
+                      list,
+                      baseUrl: this.$store.state.ip,
+                      baseImgField: "img_url",
+                      baseTitleField: "",
+                    });
+                    // })
+                  },
+                },
+              });
             },
-            ...arr,
-            { title: "备注", key: "remark", align: "center", minWidth: 80 },
-            {
-              title: "操作",
-              key: "remark",
-              align: "center",
-              slot: "Set",
-              minWidth: 120,
-            },
-          ];
-          // 订单特殊字段
-          this.formData.special &&
-            this.formData.special.forEach((element) => {
-              this.formData.head[1].forEach((item) => {
-                if (element.head_id == item.id) {
-                  element = Object.assign(element, item);
-                  this.contactSpecValueList.push(element);
+          },
+          {
+            title: "图号",
+            key: "url_number",
+            align: "center",
+            tooltip: true,
+            minWidth: 80,
+          },
+          ...arr,
+          { title: "备注", key: "remark", align: "center", minWidth: 80 },
+          {
+            title: "操作",
+            key: "remark",
+            align: "center",
+            slot: "Set",
+            minWidth: 120,
+          },
+        ];
+        // 订单特殊字段
+        this.formData.special &&
+          this.formData.special.length > 0 &&
+          this.formData.special.forEach((element) => {
+            this.formData.head[1].forEach((item) => {
+              if (element.head_id == item.id) {
+                element = Object.assign(element, item);
+                this.contactSpecValueList.push(element);
+              }
+            });
+          });
+        this.contactForm = this.formData.head[1] ? this.formData.head[1] : [];
+        // 区域特殊字段
+        this.formData.list.forEach((element, index) => {
+          element.special &&
+            element.special.length > 0 &&
+            element.special.forEach((ele) => {
+              this.formData.head[2].forEach((item) => {
+                if (ele.head_id == item.id) {
+                  ele = Object.assign(ele, item);
+                  this.areaSpecValueList.push(ele);
                 }
               });
             });
-          this.contactForm = this.formData.head[1]
-            ? this.formData.head[1]
-            : [{ key: "", value: "" }];
-          // 区域特殊字段
-          this.formData.list.forEach((element) => {
-            element.special &&
-              element.special.forEach((ele) => {
-                this.formData.head[2].forEach((item) => {
-                  if (ele.head_id == item.id) {
-                    ele = Object.assign(ele, item);
-                    this.areaSpecValueList.push(ele);
-                  }
-                });
-              });
-          });
-          this.areaSpecValueList = this.formData.head[2]
-            ? this.formData.head[2]
-            : [{ key: "", value: "" }];
-          // 产品特殊字段→ 弹窗窗口，table表头
-          this.formData.list.forEach((area) => {
-            area.product.forEach((pdt, index) => {
-              pdt.index = index + 1;
-              pdt.special &&
-                pdt.special.forEach((element) => {
-                  this.formData.head[3].forEach((item) => {
-                    if (element.head_id == item.id) {
-                      element = Object.assign(element, item);
-                      pdt[element.key] = element.value;
-                      this.productSpecValueList.push(element);
+          if (index == 0) {
+            element.isCurrencyArea = true;
+            //编辑进入页面是展示第一条区域的产品
+            element.id &&
+              this.axios
+                .get("/api/order_area_list_product", {
+                  params: {
+                    order_no: this.$route.query.order_no,
+                    area_id: element.id,
+                  },
+                })
+                .then((res) => {
+                  if (res.code == 200) {
+                    if (!element.product) {
+                      element.product = [];
                     }
-                  });
+                    element.product = res.data;
+                    element.product.forEach((pdt, index) => {
+                      if (!pdt.url) {
+                        pdt.url = [];
+                      }
+                      pdt.index = index + 1;
+                      pdt.special &&
+                        pdt.special.length > 0 &&
+                        pdt.special.forEach((_pdt) => {
+                          this.formData.head[3].forEach((element) => {
+                            if (_pdt.head_id == element.id) {
+                              _pdt = Object.assign(_pdt, element);
+                              pdt[_pdt.key] = _pdt.value;
+                              this.productSpecValueList.push(_pdt);
+                            }
+                          });
+                        });
+                    });
+                    this.$forceUpdate();
+                  }
                 });
-            });
+          } else {
+            element.isCurrencyArea = false;
+          }
+        });
+        this.areaSpecValueList = this.formData.head[2]
+          ? this.formData.head[2]
+          : [];
+        this.productSpecValueList = this.formData.head[3]
+          ? this.formData.head[3]
+          : [];
+        //获取客户信息
+        this.axios
+          .get("/api/custom_detail", { params: { id: res.data.custom_id } })
+          .then((res) => {
+            this.clientDetailList = res.data.list;
+            // this.fax = res.data.detail.fax;
           });
-          this.productSpecValueList = this.formData.head[3]
-            ? this.formData.head[3]
-            : [{ key: "", value: "" }];
-        })
-        .catch((err) => {});
+      });
     },
     postData() {
       //1新增 2编辑
       let ip;
-      this.$route.query.type == 1
-        ? (ip = "order_area_add")
-        : (ip = "order_area_edit");
-      this.axios({
-        method: "post",
-        url: "/api/" + ip,
-        data: {
-          ...this.formData,
-          supTableData: this.supTableData,
-        },
-      })
-        .then((res) => {
-          this.$Message.success(res.msg);
-          // this.initData(this.$route.query.order_no)
-          this.goback();
-        })
-        .catch((err) => {});
+      if (this.type == 1) {
+        ip = "order_area_add";
+        this.axios({
+          method: "post",
+          url: "/api/" + ip,
+          data: {
+            ...this.formData,
+            supTableData: this.supTableData,
+          },
+        }).then((res) => {
+          if (res.code == 200) {
+            this.$Message.success(res.msg);
+            this.goback();
+          }
+        });
+      } else if (this.type == 2) {
+        ip = "order_area_edit";
+        // const curObj = this.formData.list.filter((item) => item.isCurrencyArea);
+        let curObj;
+        //去当前展开项区域
+        this.formData.list.forEach((element) => {
+          if (element.isCurrencyArea) {
+            curObj = element;
+          }
+        });
+        curObj.product.forEach((element) => {
+          if (!element.url) {
+            element.url = [];
+          }
+        });
+        this.axios
+          .post("/api/order_area_product_edit", {
+            order_no: this.$route.query.order_no,
+            area_id: curObj.id || "",
+            // num:curObj.num,
+            // title:curObj.title,
+            // unit:curObj.unit,
+            // quantity:curObj.quantity,
+            // house_type:curObj.house_type,
+            product: curObj.product,
+          })
+          .then((res) => {
+            if (res.code == 200) {
+              curObj.id = res.data.area_id;
+              this.axios
+                .post("/api/" + ip, {
+                  ...this.formData,
+                  supTableData: this.supTableData,
+                })
+                .then((re) => {
+                  if (re.code == 200) {
+                    this.$Message.success(re.msg);
+                    this.goback();
+                  }
+                });
+            }
+          });
+      }
     },
     // 操作table数据 3编辑 4删除
     handleSet(row, index, type, table, areaIndex) {
       switch (type) {
         case 3:
           this.PDTEdit = row;
-          console.log("this.PDTEdit :>> ", this.PDTEdit);
           if (!this.PDTEdit.url) {
             this.PDTEdit.url = [];
           }
@@ -1422,52 +1518,50 @@ export default {
                 element.process_detail = element.showId * 1;
               })
             : (this.PDTEdit.addPDTProcessAttrList = []);
-          this.PDTEdit.tempPDTTypeList = [];
-          // if (this.PDTEdit.measures.length > 0) {
-          //   this.PDTEdit.measures.forEach(el => {
-          //     this.PDTEdit[el.e_title] = el.value
-          //   });
-          // }
           this.$route.query.type == 2 &&
-            (this.PDTEdit.tempMeasureList = this.PDTEdit.measures);
-          // console.log('this.PDTEdit.measures :>> ', this.PDTEdit.measures);
-          // for (const key in this.PDTEdit.measures) {
-          //   this.PDTEdit.tempMeasureList.forEach(el => {
-          //     // console.log('el.e_title :>> ', el.e_title);
-          //     this.PDTEdit[el.e_title] = el.value
-          //       console.log('key :>> ', key);
-          //     if (key == el.e_title) {
-          //       if (this.PDTEdit[key] == '') {
-          //         this.PDTEdit.tempMeasureList.splice(this.PDTEdit.tempMeasureList.indexOf(el), 1)
-          //       }
-          //     }
-          //   });
-          // }
-          console.log(
-            "this.PDTEdit.tempMeasureList :>> ",
-            this.PDTEdit.tempMeasureList
-          );
+            (this.PDTEdit.tempMeasureList = JSON.parse(
+              JSON.stringify(this.measureList)
+            ));
+
           //获取属性
           let newmeasureList = row.measure.split("*");
-          for (let i in newmeasureList) {
-            for (let j in this.measureList) {
-              if (
-                newmeasureList[i].indexOf(this.measureList[j].e_title) != -1
-              ) {
-                this.PDTEdit[this.measureList[j].e_title] =
-                  newmeasureList[i].substring(1);
+          // for (let i in newmeasureList) {
+          //   for (let j in this.measureList) {
+          //     if (
+          //       newmeasureList[i].indexOf(this.measureList[j].e_title) != -1
+          //     ) {
+          //       this.PDTEdit[this.measureList[j].e_title] = newmeasureList[
+          //         i
+          //       ].substring(1);
+          //     }
+          //   }
+          // }
+          this.axios("/api/basics_product_index", {
+            params: { type_id: this.PDTEdit.type_id },
+          }).then((res) => {
+            this.PDTEdit.tempPDTTypeList = res.data.data[0].measure_id.split(
+              ","
+            );
+            this.PDTEdit.tempMeasureList = JSON.parse(
+              JSON.stringify(this.measureList)
+            );
+            this.PDTEdit.tempMeasureList.forEach((el) => {
+              for (const i in newmeasureList) {
+                const item = newmeasureList[i];
+                if (item.indexOf(el.e_title) != -1) {
+                  this.PDTEdit[el.e_title] = item.substring(1);
+                }
               }
-            }
-          }
-          // this.axios('/api/basics_product_index', { params: { type_id: this.PDTEdit.type_id } }).then(res => {
-          //   this.PDTEdit.tempMeasureList = res.data.data;
-          // })
-          // this.hanndleAddPDTTypeChange(this.PDTEdit,this.PDTEdit.type_id)
-          this.PDTEdit = JSON.parse(JSON.stringify(this.PDTEdit));
+              // this.PDTEdit[el.e_title] = "";
+            });
+            this.PDTEdit = JSON.parse(JSON.stringify(this.PDTEdit));
+            this.$forceUpdate();
+          });
           this.showPDTEditModal = true;
           break;
         case 4:
           table.splice(index, 1);
+          this.$forceUpdate();
           break;
       }
     },
@@ -1511,8 +1605,9 @@ export default {
           element.measure.length - 1
         );
       });
-      // console.log('this.formData.list[this.tempPDTIndex].product :>> ', this.formData.list[this.tempPDTIndex].product);
-      // console.log('this.tempPDTList :>> ', this.tempPDTList);
+      if (!this.formData.list[this.tempPDTIndex].product) {
+        this.formData.list[this.tempPDTIndex].product = [];
+      }
       this.formData.list[this.tempPDTIndex].product.push(...this.tempPDTList);
       this.$nextTick(() => {
         //开辟新栈空间，更改指针
@@ -1557,28 +1652,24 @@ export default {
         0,
         this.PDTEdit.process_property.length - 1
       );
-      this.PDTEdit.process_properties =
-        this.PDTEdit.process_properties.substring(
-          0,
-          this.PDTEdit.process_properties.length - 1
-        );
+      this.PDTEdit.process_properties = this.PDTEdit.process_properties.substring(
+        0,
+        this.PDTEdit.process_properties.length - 1
+      );
       this.PDTEdit.tempMeasureList.forEach((el) => {
-        this.PDTEdit.measure += `${el.e_title}${this.PDTEdit[el.e_title]}*`;
+        this.PDTEdit[el.e_title] &&
+          (this.PDTEdit.measure += `${el.e_title}${this.PDTEdit[el.e_title]}*`);
       });
       this.PDTEdit.measure = this.PDTEdit.measure.substring(
         0,
         this.PDTEdit.measure.length - 1
       );
-      this.$nextTick(() => {
-        // this.formData.list[this.PDTEditAreaIndex].product[this.PDTEditIndex] = this.PDTEdit
-        this.showPDTEditModal = false;
-        this.formData.list[this.PDTEditAreaIndex].product.splice(
-          this.PDTEditIndex,
-          1,
-          this.PDTEdit
-        );
-        this.$forceUpdate();
-      });
+      this.formData.list[this.PDTEditAreaIndex].product[
+        this.PDTEditIndex
+      ] = this.PDTEdit;
+      //强制更新视图
+      this.formData.list = JSON.parse(JSON.stringify(this.formData.list));
+      this.showPDTEditModal = false;
     },
     //添加工艺属性
     handleProcessAdd(item, index) {
@@ -1653,7 +1744,6 @@ export default {
         house_type: "",
         remark: "",
         order_no: "",
-        product: [],
         special: [...this.areaSpecValueList],
       };
       // target.push(obj)
@@ -1664,6 +1754,95 @@ export default {
     handleAreaDele(index) {
       this.formData.list.splice(index, 1);
     },
+    // 展示区域产品
+    handleShowCurrencyArea(item, index) {
+      const preObj = this.formData.list.filter((item) => item.isCurrencyArea);
+      // 判断当前打开是否与上一个是否一致
+      if (preObj[0].id != item.id) {
+        // 1.保存上一个展开的区域及产品
+        this.axios
+          .post("/api/order_area_product_edit", {
+            order_no: this.$route.query.order_no,
+            area_id: preObj[0].id || "",
+            product: preObj[0].product,
+          })
+          .then((result) => {
+            if (result.code == 200) {
+              preObj[0].id = result.data.area_id;
+              // 1.1移除上一个展开区域及产品
+              this.formData.list.forEach((element) => {
+                element.product = [];
+                if (element.id == preObj[0].id) {
+                  element.isCurrencyArea = false;
+                }
+              });
+
+              // 2.获取当前展开区域及产品
+              item.isCurrencyArea = true;
+              this.axios
+                .get("/api/order_area_list_product", {
+                  params: {
+                    order_no: this.$route.query.order_no,
+                    area_id: item.id,
+                  },
+                })
+                .then((res) => {
+                  if (res.code == 200) {
+                    if (!item.product) {
+                      item.product = [];
+                    }
+                    item.product = res.data;
+                    item.product.forEach((pdt, index) => {
+                      pdt.index = index + 1;
+                      pdt.special &&
+                        pdt.special.length > 0 &&
+                        pdt.special.forEach((element) => {
+                          this.formData.head[3].forEach((item) => {
+                            if (element.head_id == item.id) {
+                              element = Object.assign(element, item);
+                              pdt[element.key] = element.value;
+                              this.productSpecValueList.push(element);
+                            }
+                          });
+                        });
+                    });
+                    this.$forceUpdate();
+                  }
+                });
+            }
+          });
+      } else {
+        // 2.获取当前展开区域及产品
+        item.isCurrencyArea = true;
+        this.axios
+          .get("/api/order_area_list_product", {
+            params: { order_no: this.$route.query.order_no, area_id: item.id },
+          })
+          .then((res) => {
+            if (res.code == 200) {
+              if (!item.product) {
+                item.product = [];
+              }
+              item.product = res.data;
+              item.product.forEach((pdt, index) => {
+                pdt.index = index + 1;
+                pdt.special &&
+                  pdt.special.length > 0 &&
+                  pdt.special.forEach((element) => {
+                    this.formData.head[3].forEach((item) => {
+                      if (element.head_id == item.id) {
+                        element = Object.assign(element, item);
+                        pdt[element.key] = element.value;
+                        this.productSpecValueList.push(element);
+                      }
+                    });
+                  });
+              });
+              this.$forceUpdate();
+            }
+          });
+      }
+    },
     handleClientChange(id) {
       id &&
         this.axios({
@@ -1736,13 +1915,11 @@ export default {
           params: { type_id: e },
         }).then((res) => {
           item.tempPDTTypeList = res.data.data[0].measure_id.split(",");
-          this.measureList.forEach((el) => {
+          item.tempMeasureList = JSON.parse(JSON.stringify(this.measureList));
+          item.tempMeasureList.forEach((el) => {
             item[el.e_title] = "";
           });
-          this.$nextTick(() => {
-            item.tempMeasureList = this.measureList;
-            this.$forceUpdate();
-          });
+          this.$forceUpdate();
         });
       // basics_measure_index
     },
@@ -1806,7 +1983,7 @@ export default {
                   "max-width:50px;max-height:50px;position:relative;top:3px;",
               },
               on: {
-                click: (e) => {
+                click: () => {
                   // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
                   // row.imgs = res.data
                   let list = [];
@@ -1887,7 +2064,7 @@ export default {
 };
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .BidSystemContractEdit {
   overflow: hidden;
   overflow-y: auto;

src/views/BidSystem/ContractList/info.vue

@@ -125,6 +125,15 @@
           v-for="(areaItem, areaIndex) in formData.list"
           :key="areaItem.areaIndex"
         >
+          <div class="addAreaBtn">
+            <Button
+              @click="handleShowCurrencyArea(areaItem, areaIndex)"
+              ghost
+              size="small"
+              type="primary"
+              >展示产品</Button
+            >
+          </div>
           <div class="addAreaForm">
             <Form :label-width="100" :model="areaItem" style="width: 60%">
               <FormItem label="区域编码:">
@@ -646,12 +655,13 @@ export default {
             let url = row.url ? row.url : [];
             return h("img", {
               attrs: {
-                src: this.$store.state.ip + url[0].img_url,
+                src:
+                  url.length > 0 ? this.$store.state.ip + url[0].img_url : "",
                 style:
                   "max-width:50px;max-height:50px;position:relative;top:3px;",
               },
               on: {
-                click: (e) => {
+                click: () => {
                   // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
                   // row.imgs = res.data
                   let list = [];
@@ -797,7 +807,6 @@ export default {
           this.formData.end_time = this.func.replaceDateNoHMS(
             this.formData.end_time
           );
-          this.formData.list.forEach((element) => {});
           // 产品特殊字段→ 弹窗窗口，table表头
           let arr = [];
           res.data.head[3] &&
@@ -889,11 +898,9 @@ export default {
                 }
               });
             });
-          this.contactForm = this.formData.head[1]
-            ? this.formData.head[1]
-            : [{ key: "", value: "" }];
+          this.contactForm = this.formData.head[1] ? this.formData.head[1] : [];
           // 区域特殊字段
-          this.formData.list.forEach((element) => {
+          this.formData.list.forEach((element, index) => {
             element.special &&
               element.special.forEach((ele) => {
                 this.formData.head[2].forEach((item) => {
@@ -903,31 +910,53 @@ export default {
                   }
                 });
               });
-          });
-          this.areaSpecValueList = this.formData.head[2]
-            ? this.formData.head[2]
-            : [{ key: "", value: "" }];
-          // 产品特殊字段→ 弹窗窗口，table表头
-          this.formData.list.forEach((area) => {
-            area.product &&
-              // 要把这一块拆分到点击选择查看产品之后   todo
-              area.product.forEach((pdt, index) => {
-                pdt.index = index + 1;
-                pdt.special &&
-                  pdt.special.forEach((element) => {
-                    this.formData.head[3].forEach((item) => {
-                      if (element.head_id == item.id) {
-                        element = Object.assign(element, item);
-                        pdt[element.key] = element.value;
-                        this.productSpecValueList.push(element);
+            if (index == 0) {
+              element.isCurrencyArea = true;
+              //编辑进入页面是展示第一条区域的产品
+              element.id &&
+                this.axios
+                  .get("/api/order_area_list_product", {
+                    params: {
+                      order_no: this.$route.query.order_no,
+                      area_id: element.id,
+                    },
+                  })
+                  .then((res) => {
+                    if (res.code == 200) {
+                      if (!element.product) {
+                        element.product = [];
                       }
-                    });
+                      element.product = res.data;
+                      element.product.forEach((pdt, index) => {
+                        if (!pdt.url) {
+                          pdt.url = [];
+                        }
+                        pdt.index = index + 1;
+                        pdt.special &&
+                          pdt.special.length > 0 &&
+                          pdt.special.forEach((_pdt) => {
+                            this.formData.head[3].forEach((element) => {
+                              if (_pdt.head_id == element.id) {
+                                _pdt = Object.assign(_pdt, element);
+                                pdt[_pdt.key] = _pdt.value;
+                                this.productSpecValueList.push(_pdt);
+                              }
+                            });
+                          });
+                      });
+                      this.$forceUpdate();
+                    }
                   });
-              });
+            } else {
+              element.isCurrencyArea = false;
+            }
           });
+          this.areaSpecValueList = this.formData.head[2]
+            ? this.formData.head[2]
+            : [];
           this.productSpecValueList = this.formData.head[3]
             ? this.formData.head[3]
-            : [{ key: "", value: "" }];
+            : [];
         }
       });
     },
@@ -1093,7 +1122,6 @@ export default {
           params: { order_no: this.$route.query.order_no },
         })
         .then((res) => {
-          console.log(res);
           this.listTableData = res.data.data;
           this.listTableData.map((item) => {
             !item.url && (item.url = []);
@@ -1104,8 +1132,7 @@ export default {
             });
           });
           this.total = res.data.total;
-          console.log('this.listTableData :>> ', this.listTableData);
-          this.$forceUpdate()
+          this.$forceUpdate();
         });
     },
     handleCurTabChange(name) {
@@ -1125,34 +1152,128 @@ export default {
       }
     },
     handleProcess() {
+      const order_area_product_id = this.selected.map(
+        (item) => item.order_area_product_id
+      );
       this.axios({
         method: "get",
-        url: "/api/order_area_pull",
+        url: "/api/order_area_detail_pull",
         params: {
           order_no: this.order_no,
-          sub_status: 1,
+          type: 1,
+          order_area_product_id,
           process_man: this.process_man,
-          process_start_time: this.func.replaceDateNoHMS(
-            this.process_start_time
-          ),
-          process_end_time: this.func.replaceDateNoHMS(this.process_end_time),
+          process_start_time: this.process_start_time
+            ? this.func.replaceDateNoHMS(this.process_start_time)
+            : "",
+          process_end_time: this.process_end_time
+            ? this.func.replaceDateNoHMS(this.process_end_time)
+            : "",
         },
       }).then((res) => {
         if (res.code == 200) {
           this.$Message.success(res.msg);
+          this.getListData();
         }
       });
     },
     changePage(e) {
-      this.pageIndex = e;
-      this.page_index = this.pageIndex;
+      this.page_index = e;
       this.getListData();
     },
     changeSize(e) {
-      this.pageSize = e;
-      this.page_size = this.pageSize;
+      this.page_size = e;
       this.getListData();
     },
+    // 展示区域产品
+    handleShowCurrencyArea(item, index) {
+      const preObj = this.formData.list.filter((item) => item.isCurrencyArea);
+      // 判断当前打开是否与上一个是否一致
+      if (preObj[0].id != item.id) {
+        // 1.保存上一个展开的区域及产品
+        this.axios
+          .post("/api/order_area_product_edit", {
+            order_no: this.$route.query.order_no,
+            area_id: preObj[0].id || "",
+            product: preObj[0].product,
+          })
+          .then((result) => {
+            if (result.code == 200) {
+              preObj[0].id = result.data.area_id;
+              // 1.1移除上一个展开区域及产品
+              this.formData.list.forEach((element) => {
+                element.product = [];
+                if (element.id == preObj[0].id) {
+                  element.isCurrencyArea = false;
+                }
+              });
+
+              // 2.获取当前展开区域及产品
+              item.isCurrencyArea = true;
+              this.axios
+                .get("/api/order_area_list_product", {
+                  params: {
+                    order_no: this.$route.query.order_no,
+                    area_id: item.id,
+                  },
+                })
+                .then((res) => {
+                  if (res.code == 200) {
+                    if (!item.product) {
+                      item.product = [];
+                    }
+                    item.product = res.data;
+                    item.product.forEach((pdt, index) => {
+                      pdt.index = index + 1;
+                      pdt.special &&
+                        pdt.special.length > 0 &&
+                        pdt.special.forEach((element) => {
+                          this.formData.head[3].forEach((item) => {
+                            if (element.head_id == item.id) {
+                              element = Object.assign(element, item);
+                              pdt[element.key] = element.value;
+                              this.productSpecValueList.push(element);
+                            }
+                          });
+                        });
+                    });
+                    this.$forceUpdate();
+                  }
+                });
+            }
+          });
+      } else {
+        // 2.获取当前展开区域及产品
+        item.isCurrencyArea = true;
+        this.axios
+          .get("/api/order_area_list_product", {
+            params: { order_no: this.$route.query.order_no, area_id: item.id },
+          })
+          .then((res) => {
+            if (res.code == 200) {
+              if (!item.product) {
+                item.product = [];
+              }
+              item.product = res.data;
+              item.product.forEach((pdt, index) => {
+                pdt.index = index + 1;
+                pdt.special &&
+                  pdt.special.length > 0 &&
+                  pdt.special.forEach((element) => {
+                    this.formData.head[3].forEach((item) => {
+                      if (element.head_id == item.id) {
+                        element = Object.assign(element, item);
+                        pdt[element.key] = element.value;
+                        this.productSpecValueList.push(element);
+                      }
+                    });
+                  });
+              });
+              this.$forceUpdate();
+            }
+          });
+      }
+    },
   },
   // 监听属性 类似于data概念
   computed: {},
@@ -1168,7 +1289,7 @@ export default {
 };
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .BidSystemContractInfo {
   overflow: hidden;
   overflow-y: auto;

src/views/BidSystem/DeepeningOrder/info.vue

@@ -35,29 +35,55 @@
         style="overflow: hidden; overflow-y: auto"
       >
         <div class="top_search">
-          <div><span>订单号:</span>{{ formData.order_no }}</div>
-          <div><span>小区名称:</span>{{ formData.residential_name }}</div>
-          <div><span>客户姓名:</span>{{ formData.client_name }}</div>
+          <div>
+            <span>订单号:</span
+            ><span style="font-weight:bold">{{ formData.order_no }}</span>
+          </div>
+          <div>
+            <span>小区名称:</span
+            ><span style="font-weight:bold">{{
+              formData.residential_name
+            }}</span>
+          </div>
+          <div>
+            <span>客户姓名:</span
+            ><span style="font-weight:bold">{{ formData.client_name }}</span>
+          </div>
           <div>
             <span>紧急程度:</span
             ><span
               v-for="_item in warningList"
               :key="_item.id"
               v-show="_item.id == formData.warning_state"
+              style="font-weight:bold"
               >{{ _item.title }}</span
             >
           </div>
           <div>
             <span>收款:</span
-            >{{ formData.pay_state == 1 ? "已收款" : "未收款" }}
+            ><span style="font-weight:bold">{{
+              formData.pay_state == 1 ? "已收款" : "未收款"
+            }}</span>
           </div>
-          <div><span>详细地址:</span>{{ formData.address }}</div>
-          <div><span>手机号:</span>{{ formData.mobile }}</div>
           <div>
-            <span>开始日期:</span>{{ func.replaceDate(formData.start_time) }}
+            <span>详细地址:</span
+            ><span style="font-weight:bold">{{ formData.address }}</span>
           </div>
           <div>
-            <span>交付日期:</span>{{ func.replaceDate(formData.end_time) }}
+            <span>手机号:</span
+            ><span style="font-weight:bold">{{ formData.mobile }}</span>
+          </div>
+          <div>
+            <span>开始日期:</span
+            ><span style="font-weight:bold">{{
+              func.replaceDateNoHMS(formData.start_time)
+            }}</span>
+          </div>
+          <div>
+            <span>交付日期:</span
+            ><span style="font-weight:bold">{{
+              func.replaceDateNoHMS(formData.end_time)
+            }}</span>
           </div>
           <div>
             <span>业务员:</span>
@@ -65,24 +91,40 @@
               v-for="item in salesmanList"
               :key="item.id"
               v-show="formData.salesman == item.id"
+              style="font-weight:bold"
               >{{ item.nickname }}</span
             >
           </div>
           <div>
             <span>订单类型:</span
-            >{{ formData.renovation_type == 1 ? "工装" : "家装" }}
+            ><span style="font-weight:bold">{{
+              formData.renovation_type == 1 ? "工装" : "家装"
+            }}</span>
           </div>
           <div v-for="item in formData.special" :key="item.id">
             <span>{{ item.key + ":" }}</span>
-            {{ item.value }}
+            <span style="font-weight:bold">{{ item.value }}</span>
+          </div>
+          <div>
+            <span>备注:</span
+            ><span style="font-weight:bold">{{ formData.remark }}</span>
           </div>
-          <div><span>备注:</span>{{ formData.remark }}</div>
         </div>
         <div
           class="table-data"
           v-for="(item, index) in formData.list"
           :key="item.id"
         >
+          <div class="addBtn">
+            <Button
+              @click="handleShowCurrencyArea(item, index)"
+              ghost
+              size="small"
+              v-show="type != 1 && item.id && !item.isCurrencyArea"
+              type="primary"
+              >展示产品
+            </Button>
+          </div>
           <div class="addAreaForm">
             <div class="addFormInfo">
               <div><span>区域编码:</span>{{ item.num }}</div>
@@ -227,6 +269,19 @@
           >
           </Table>
         </div>
+        <div ref="footercenter" class="footer-center">
+          <Page
+            :total="total"
+            :current.sync="page_index"
+            :show-total="true"
+            :page-size="page_size"
+            :show-sizer="true"
+            :show-elevator="true"
+            @on-change="changePage"
+            @on-page-size-change="changeSize"
+          >
+          </Page>
+        </div>
       </TabPane>
     </Tabs>
     <!-- 项目辅料弹窗 -->
@@ -684,10 +739,10 @@ export default {
       ],
       listTableColumns: [
         { type: "selection", align: "center", minWidth: 100 },
-        { title: "区域编码", key: "num", align: "center", minWidth: 100 },
-        { title: "区域名称", key: "title", align: "center", minWidth: 100 },
-        { title: "单位", key: "unit", align: "center", minWidth: 100 },
-        { title: "工程量", key: "quantity", align: "center", minWidth: 100 },
+        { title: "区域编码", key: "area_num", align: "center", minWidth: 100 },
+        { title: "区域名称", key: "area_title", align: "center", minWidth: 100 },
+        { title: "单位", key: "area_unit", align: "center", minWidth: 100 },
+        { title: "工程量", key: "area_quantity", align: "center", minWidth: 100 },
         { title: "户型", key: "house_type", align: "center", minWidth: 100 },
         { title: "备注", key: "remark", align: "center", minWidth: 100 },
         { title: "产品名称", key: "title", align: "center", minWidth: 100 },
@@ -738,7 +793,7 @@ export default {
         { title: "图号", key: "url_number", align: "center", minWidth: 100 },
         { title: "备注", key: "remark", align: "center", minWidth: 100 },
       ],
-      listTableData: [{}, {}, {}, {}, {}, {}, {}],
+      listTableData: [],
       //是否查看
       isChecked: false,
       PDTProcessAttrList: [],
@@ -760,6 +815,10 @@ export default {
       selected: [],
       processModal: false,
       currencyTab: "",
+      type: this.$route.query.type,
+      page_index: 1,
+      page_size: 10,
+      total: 0,
     };
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -820,153 +879,167 @@ export default {
         params: {
           order_no,
         },
-      })
-        .then((res) => {
-          this.formData = res.data;
-          this.formData.list.forEach((element, index) => {
-            element.product.forEach((el, i) => {
-              el.index = i + 1;
-              el.measures.forEach((item) => {
-                el[item.e_title] = item.value;
-              });
+      }).then((res) => {
+        this.formData = res.data;
+        // 产品特殊字段→ 弹窗窗口，table表头
+        let arr = [];
+        res.data.head[3] &&
+          res.data.head[3].length > 0 &&
+          res.data.head[3].forEach((item) => {
+            arr.push({
+              title: item.key,
+              key: item.key,
+              align: "center",
+              minWidth: 80,
             });
           });
-
-          this.formData.list.forEach((element) => {
-            // 产品特殊字段→ 弹窗窗口，table表头
-            let arr = [];
-            res.data.head[3].length > 0 &&
-              res.data.head[3].forEach((item) => {
-                arr.push({
-                  title: item.key,
-                  key: item.key,
-                  align: "center",
-                  minWidth: 80,
-                });
-              });
-            this.tableColumns = [
-              { title: "序号", key: "index", align: "center", minWidth: 80 },
-              {
-                title: "产品名称",
-                key: "title",
-                align: "center",
-                tooltip: true,
-                minWidth: 100,
-              },
-              { title: "数量", key: "num", align: "center", minWidth: 80 },
-              { title: "价格", key: "price", align: "center", minWidth: 80 },
-              {
-                title: "规格",
-                key: "measure",
-                align: "center",
-                tooltip: true,
-                minWidth: 140,
-              },
-              {
-                title: "工艺属性",
-                key: "process_property",
-                align: "center",
-                tooltip: true,
-                minWidth: 120,
-              },
-              {
-                title: "图纸",
-                align: "center",
-                key: "url",
-                minWidth: 100,
-                render: (h, params) => {
-                  const { row } = params;
-                  let url = row.url ? row.url : [];
-                  return h("img", {
-                    attrs: {
-                      src: this.$store.state.ip + url[0],
-                      style:
-                        "max-width:50px;max-height:50px;position:relative;top:3px;",
-                    },
-                    on: {
-                      click: (e) => {
-                        // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
-                        // row.imgs = res.data
-                        let list = [];
-                        row.url.forEach((el) => {
-                          list.push({ img_url: el });
-                        });
-                        this.$previewImg({
-                          list,
-                          baseUrl: this.$store.state.ip,
-                          baseImgField: "img_url",
-                          baseTitleField: "",
-                        });
-                        // })
-                      },
-                    },
-                  });
+        this.tableColumns = [
+          { title: "序号", key: "index", align: "center", minWidth: 80 },
+          {
+            title: "产品名称",
+            key: "title",
+            align: "center",
+            tooltip: true,
+            minWidth: 100,
+          },
+          { title: "数量", key: "num", align: "center", minWidth: 80 },
+          { title: "价格", key: "price", align: "center", minWidth: 80 },
+          {
+            title: "规格",
+            key: "measure",
+            align: "center",
+            tooltip: true,
+            minWidth: 140,
+          },
+          {
+            title: "工艺属性",
+            key: "process_property",
+            align: "center",
+            tooltip: true,
+            minWidth: 120,
+          },
+          {
+            title: "图纸",
+            align: "center",
+            key: "url",
+            minWidth: 100,
+            render: (h, params) => {
+              const { row } = params;
+              let url = row.url ? row.url : [];
+              return h("img", {
+                attrs: {
+                  src: this.$store.state.ip + url[0],
+                  style:
+                    "max-width:50px;max-height:50px;position:relative;top:3px;",
                 },
-              },
-              {
-                title: "图号",
-                key: "url_number",
-                align: "center",
-                tooltip: true,
-                minWidth: 80,
-              },
-              ...arr,
-              { title: "备注", key: "remark", align: "center", minWidth: 80 },
-              {
-                title: "操作",
-                key: "remark",
-                align: "center",
-                slot: "set",
-                minWidth: 120,
-                fixed: "right",
-              },
-            ];
+                on: {
+                  click: (e) => {
+                    // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
+                    // row.imgs = res.data
+                    let list = [];
+                    row.url.forEach((el) => {
+                      list.push({ img_url: el });
+                    });
+                    this.$previewImg({
+                      list,
+                      baseUrl: this.$store.state.ip,
+                      baseImgField: "img_url",
+                      baseTitleField: "",
+                    });
+                    // })
+                  },
+                },
+              });
+            },
+          },
+          {
+            title: "图号",
+            key: "url_number",
+            align: "center",
+            tooltip: true,
+            minWidth: 80,
+          },
+          ...arr,
+          { title: "备注", key: "remark", align: "center", minWidth: 80 },
+          {
+            title: "操作",
+            key: "remark",
+            align: "center",
+            slot: "set",
+            minWidth: 120,
+          },
+        ];
+        // 订单特殊字段
+        this.formData.special &&
+          this.formData.special.length > 0 &&
+          this.formData.special.forEach((element) => {
+            this.formData.head[1].forEach((item) => {
+              if (element.head_id == item.id) {
+                element = Object.assign(element, item);
+                this.contactSpecValueList.push(element);
+              }
+            });
           });
-          // 订单特殊字段
-          this.formData.special &&
-            this.formData.special.forEach((element) => {
-              this.formData.head[1].forEach((item) => {
-                if (element.head_id == item.id) {
-                  element = Object.assign(element, item);
+        this.contactForm = this.formData.head[1] ? this.formData.head[1] : [];
+        // 区域特殊字段
+        this.formData.list.forEach((element, index) => {
+          element.special &&
+            element.special.length > 0 &&
+            element.special.forEach((ele) => {
+              this.formData.head[2].forEach((item) => {
+                if (ele.head_id == item.id) {
+                  ele = Object.assign(ele, item);
                 }
               });
             });
-          this.contactForm = this.formData.head[1]
-            ? this.formData.head[1]
-            : [{ key: "", value: "" }];
-          // 区域特殊字段
-          this.formData.list.forEach((element) => {
-            element.special &&
-              element.special.forEach((ele) => {
-                this.formData.head[2].forEach((item) => {
-                  if (ele.head_id == item.id) {
-                    ele = Object.assign(ele, item);
-                  }
-                });
-              });
-          });
-          this.areaSpecValueList = this.formData.head[2]
-            ? this.formData.head[2]
-            : [{ key: "", value: "" }];
-          // 产品特殊字段→ 弹窗窗口，table表头
-          this.formData.list.forEach((area) => {
-            area.product.forEach((pdt) => {
-              pdt.special &&
-                pdt.special.forEach((element) => {
-                  this.formData.head[3].forEach((item) => {
-                    if (element.head_id == item.id) {
-                      element = Object.assign(element, item);
-                      pdt[element.key] = element.value;
+          if (index == 0) {
+            element.isCurrencyArea = true;
+            //编辑进入页面是展示第一条区域的产品
+            element.id &&
+              this.axios
+                .get("/api/order_area_list_product", {
+                  params: {
+                    order_no: this.$route.query.order_no,
+                    area_id: element.id,
+                  },
+                })
+                .then((res) => {
+                  if (res.code == 200) {
+                    if (!element.product) {
+                      element.product = [];
                     }
-                  });
+                    element.product = res.data;
+                    element.product.forEach((pdt, index) => {
+                      if (!pdt.url) {
+                        pdt.url = [];
+                      }
+                      pdt.index = index + 1;
+                      pdt.special &&
+                        pdt.special.length > 0 &&
+                        pdt.special.forEach((_pdt) => {
+                          this.formData.head[3].forEach((element) => {
+                            if (_pdt.head_id == element.id) {
+                              _pdt = Object.assign(_pdt, element);
+                              pdt[_pdt.key] = _pdt.value;
+                              this.productSpecValueList.push(_pdt);
+                            }
+                          });
+                        });
+                    });
+                    this.$forceUpdate();
+                  }
                 });
-            });
-          });
-          this.productSpecValueList = this.formData.head[3]
-            ? this.formData.head[3]
-            : [{ key: "", value: "" }];
-        })
-        .catch((err) => {});
+          } else {
+            element.isCurrencyArea = false;
+          }
+        });
+        this.areaSpecValueList = this.formData.head[2]
+          ? this.formData.head[2]
+          : [];
+        this.productSpecValueList = this.formData.head[3]
+          ? this.formData.head[3]
+          : [];
+      });
     },
     goback() {
       this.$router.go(-1);
@@ -1173,22 +1246,28 @@ export default {
       }
     },
     handleProcess() {
+      const order_area_product_id = this.selected.map(
+        (item) => item.order_area_product_id
+      );
       this.axios({
         method: "get",
-        url: "/api/order_area_pull",
+        url: "/api/order_area_detail_pull",
         params: {
           order_no: this.order_no,
-          sub_status: 1,
+          type: 2,
+          order_area_product_id,
           process_man: this.process_man,
-          process_start_time: this.func.replaceDateNoHMS(
-            this.process_start_time
-          ),
-          process_end_time: this.func.replaceDateNoHMS(this.process_end_time),
+          process_start_time: this.process_start_time
+            ? this.func.replaceDateNoHMS(this.process_start_time)
+            : "",
+          process_end_time: this.process_end_time
+            ? this.func.replaceDateNoHMS(this.process_end_time)
+            : "",
         },
       }).then((res) => {
         if (res.code == 200) {
           this.$Message.success(res.msg);
-          this.getData(this.proxyObj);
+          this.getListData();
         }
       });
     },
@@ -1202,12 +1281,122 @@ export default {
     handleCurTabChange(name) {
       this.currencyTab = name;
       if (name == "name2" && this.listTableData.length < 1) {
+        this.getListData();
+      }
+    },
+    getListData() {
+      this.axios
+        .get("/api/order_area_detail_list", {
+          params: { order_no: this.$route.query.order_no },
+        })
+        .then((res) => {
+          this.listTableData = res.data.data;
+          this.listTableData.map((item) => {
+            !item.url && (item.url = []);
+            res.data.imgs.map((element) => {
+              if (item.sign_id == element.sign_id) {
+                item.url.push({ img_url: element.img_url });
+              }
+            });
+          });
+          this.total = res.data.total;
+          this.$forceUpdate();
+        });
+    },
+    changePage(e) {
+      this.page_index = e;
+      this.getListData();
+    },
+    changeSize(e) {
+      this.page_size = e;
+      this.getListData();
+    },
+    // 展示区域产品
+    handleShowCurrencyArea(item, index) {
+      const preObj = this.formData.list.filter((item) => item.isCurrencyArea);
+      // 判断当前打开是否与上一个是否一致
+      if (preObj[0].id != item.id) {
+        // 1.保存上一个展开的区域及产品
+        this.axios
+          .post("/api/order_area_product_edit", {
+            order_no: this.$route.query.order_no,
+            area_id: preObj[0].id || "",
+            product: preObj[0].product,
+          })
+          .then((result) => {
+            if (result.code == 200) {
+              preObj[0].id = result.data.area_id;
+              // 1.1移除上一个展开区域及产品
+              this.formData.list.forEach((element) => {
+                element.product = [];
+                if (element.id == preObj[0].id) {
+                  element.isCurrencyArea = false;
+                }
+              });
+
+              // 2.获取当前展开区域及产品
+              item.isCurrencyArea = true;
+              this.axios
+                .get("/api/order_area_list_product", {
+                  params: {
+                    order_no: this.$route.query.order_no,
+                    area_id: item.id,
+                  },
+                })
+                .then((res) => {
+                  if (res.code == 200) {
+                    if (!item.product) {
+                      item.product = [];
+                    }
+                    item.product = res.data;
+                    item.product.forEach((pdt, index) => {
+                      pdt.index = index + 1;
+                      pdt.special &&
+                        pdt.special.length > 0 &&
+                        pdt.special.forEach((element) => {
+                          this.formData.head[3].forEach((item) => {
+                            if (element.head_id == item.id) {
+                              element = Object.assign(element, item);
+                              pdt[element.key] = element.value;
+                              this.productSpecValueList.push(element);
+                            }
+                          });
+                        });
+                    });
+                    this.$forceUpdate();
+                  }
+                });
+            }
+          });
+      } else {
+        // 2.获取当前展开区域及产品
+        item.isCurrencyArea = true;
         this.axios
-          .get("/api/order_area_deep_detail_list?", {
-            params: { order_no: this.$route.query.order_no },
+          .get("/api/order_area_list_product", {
+            params: { order_no: this.$route.query.order_no, area_id: item.id },
           })
           .then((res) => {
-            console.log(res);
+            if (res.code == 200) {
+              if (!item.product) {
+                item.product = [];
+              }
+              item.product = res.data;
+              item.product.forEach((pdt, index) => {
+                pdt.index = index + 1;
+                pdt.special &&
+                  pdt.special.length > 0 &&
+                  pdt.special.forEach((element) => {
+                    this.formData.head[3].forEach((item) => {
+                      if (element.head_id == item.id) {
+                        element = Object.assign(element, item);
+                        pdt[element.key] = element.value;
+                        this.productSpecValueList.push(element);
+                      }
+                    });
+                  });
+              });
+              this.$forceUpdate();
+            }
           });
       }
     },
@@ -1226,7 +1415,7 @@ export default {
 };
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .BidSystemDeepeningOrderDetail {
   overflow: hidden;
   overflow-y: auto;
@@ -1289,6 +1478,11 @@ export default {
     }
   }
 }
+.footer-center {
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+}
 .addPDTFormModal {
   /deep/ .ivu-modal-body {
     height: 400px;

src/views/OrderMannage/BusinessOrderlist/edit.vue

@@ -513,8 +513,8 @@
           <TabPane
             :label="
               (item.position == '' ? '位置' : item.position) +
-              '-' +
-              item.type_name
+                '-' +
+                item.type_name
             "
             v-for="(item, index) in modalArray"
             :key="item.id"
@@ -701,8 +701,8 @@
                     <Input
                       v-if="
                         outh.key != 'img' &&
-                        outh.key != 'url' &&
-                        outh.key != 'lock'
+                          outh.key != 'url' &&
+                          outh.key != 'lock'
                       "
                       disabled
                       placeholder="自动生成"
@@ -767,7 +767,7 @@
                       size="small"
                       @on-change="handlePartChange(element, item.measure)"
                       v-model="element.change_id"
-                      style="width: 80px"
+                      style="width: 180px"
                     >
                       <Option
                         v-for="item of element.change"
@@ -865,42 +865,42 @@
                     <FormItem>
                       <div v-for="ele in element.part_detail" :key="ele.id">
                         <Form :model="ele">
-                          <FormItem label="零部件名称:" :label-width="90">
-                            <div style="width: 300px">
-                              <Tooltip
+                          <FormItem>
+                            <div style="width: 200px">
+                              <!-- <Tooltip
                                 :content="
                                   ele.title || ele.part_detail_title || '请选择'
                                 "
-                              >
+                              > -->
                                 {{ ele.title || ele.part_detail_title }}
-                              </Tooltip>
+                              <!-- </Tooltip> -->
                             </div>
                           </FormItem>
-                          <FormItem label="长" :label-width="40">
+                          <!-- <FormItem label="长" :label-width="40">
                             <Input
                               size="small"
                               v-model="ele.long"
                               style="width: 80px"
                               placeholder="请输入长"
                             />
-                          </FormItem>
-                          <FormItem label="宽" :label-width="40">
+                          </FormItem> -->
+                          <!-- <FormItem label="宽" :label-width="40">
                             <Input
                               size="small"
                               v-model="ele.wide"
                               style="width: 80px"
                               placeholder="请输入宽"
                             />
-                          </FormItem>
-                          <FormItem label="高" :label-width="40">
+                          </FormItem> -->
+                          <!-- <FormItem label="高" :label-width="40">
                             <Input
                               size="small"
                               v-model="ele.high"
                               style="width: 80px"
                               placeholder="请输入高"
                             />
-                          </FormItem>
-                          <FormItem label="数量" :label-width="40">
+                          </FormItem> -->
+                          <!-- <FormItem label="数量" :label-width="40">
                             <Input
                               size="small"
                               v-model="ele.num"
@@ -908,18 +908,18 @@
                               style="width: 80px"
                               placeholder="请输入数量"
                             />
-                          </FormItem>
+                          </FormItem> -->
                           <!-- 原材料 -->
                           <Form>
-                            <FormItem label="原材料:" :label-width="90">
-                              <div style="width: 300px">
-                                <Tooltip
+                            <FormItem>
+                              <div style="width: 200px">
+                                <!-- <Tooltip
                                   :content="
                                     ele.material_detail_title || '请选择'
                                   "
-                                >
+                                > -->
                                   {{ ele.material_detail_title || "请选择" }}
-                                </Tooltip>
+                                <!-- </Tooltip> -->
                               </div>
                             </FormItem>
                             <FormItem label="长" :label-width="40">
@@ -1198,7 +1198,7 @@ export default {
     }
   },
   data() {
-    const validateMobile = function (rule, value, fn) {
+    const validateMobile = function(rule, value, fn) {
       if (!/^1[3456789]\d{9}$/.test(value)) {
         fn(new Error(" "));
         return false;
@@ -1304,7 +1304,6 @@ export default {
           return date && date.valueOf() < Date.now() - 86400000;
         },
       },
-      headers: { Authorization: localStorage.getItem("token") },
       editForm: {},
       is_material_show: false,
       currencyForm: {},
@@ -1324,7 +1323,7 @@ export default {
           align: "center",
           key: "specifications",
           render: (h, params) => {
-            const { row, index } = params;
+            const { row } = params;
             let text = "";
             row.long ? (text += "L" + row.long + "*") : "";
             row.wide ? (text += "W" + row.wide + "*") : "";
@@ -1463,7 +1462,9 @@ export default {
         sendData.end_time = new Date(sendData.end_time)
           .toLocaleDateString()
           .replace(/\//g, "-");
-      } catch (e) {}
+      } catch (e) {
+        console.log(e);
+      }
       let params = { ...sendData, product: this.tableData, renovation_type: 2 };
       this.axios.post("/api/order_save_new", params).then((res) => {
         if (res.code == 200) {
@@ -1637,8 +1638,7 @@ export default {
         this.tableData = [...this.tableData, ...this.modalArray];
         this.currencyIndex = null;
       } else {
-        this.modalArray[0].order_product_id =
-          this.currencyForm.order_product_id;
+        this.modalArray[0].order_product_id = this.currencyForm.order_product_id;
         this.modalArray[0].process_str = this.currencyForm.process_str;
         this.modalArray[0].title = this.currencyForm.title;
         this.tableData.splice(this.currencyIndex, 1, this.modalArray[0]);
@@ -2902,7 +2902,7 @@ export default {
 };
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .product-img {
   padding-top: 10px;
 }
@@ -3157,4 +3157,4 @@ export default {
 .hide_part_detail {
   display: none;
 }
-</style>
+</style>

src/views/OrderMannage/BusinessOrderlist/list.vue

@@ -732,8 +732,6 @@ export default {
     );
     // this.$store.state.navgationData[0].sub[0].sub[0]
     this.currencyPageId = this.$store.state.navgationData[0].sub[0].sub[0].id;
-    // console.log('this.persimissionData :>> ', this.persimissionData);
-    // console.log('this.$store.state.navgationData :>> ', this.$store.state.navgationData[0].sub[0].sub[0]);
   },
   beforeRouteLeave(to, from, next) {
     if (to.path != "/cms/ordermannage/businessorderlist/edit") {