feat：线下销售单增加旧机信息（列表、新增、编辑、详情）

src/api/order.js

@@ -415,4 +415,22 @@ export function getOrderCodeList(params) {
     method: 'post',
     params
   })
+}
+
+// 获取类别列表
+export function getCategoryList(params) {
+  return request({
+    url: '/trade/list',
+    method: 'get',
+    params
+  })
+}
+
+// 获取规格/属性列表
+export function getAttrList(data) {
+  return request({
+    url: `/trade/list/page`,
+    method: 'post',
+    data
+  })
 }

src/views/mallManagement/order/offline_order_list/index.vue

@@ -143,11 +143,15 @@
               </el-form-item>
             </el-col>
           </el-row>
+        </el-form>
 
-          <div style="font-weight: 500;">商品信息</div>
-          <el-divider></el-divider>
+        <el-tabs v-model="formTabs">
+          <el-tab-pane label="商品信息" name="a"></el-tab-pane>
+          <el-tab-pane label="旧机信息" name="b"></el-tab-pane>
+        </el-tabs>
 
-          <div>
+        <div v-show="formTabs == 'a'">
+          <div style="margin-top: 30px;">
             <el-button type="primary" size="small" @click="addGoods(1)">添加商品</el-button>
             <el-button type="primary" size="small" @click="addGoods(2)">添加物料</el-button>
           </div>
@@ -281,17 +285,122 @@
               </template>
             </el-table-column>
 
-            <el-table-column align="center" label="操作" min-width="120">
+            <el-table-column align="center" label="操作" min-width="120" fixed="right">
               <template slot-scope="scope">
                 <!-- <el-button type="text" @click="edit('theory', scope.$index)">编辑</el-button> -->
-                <el-popconfirm title="确定删除吗？" @confirm="deleteGoods(scope.$index)" style="margin-left: 10px;">
+                <el-popconfirm title="确定删除吗？" @confirm="deleteGoods(scope.$index)">
                   <el-button slot="reference" type="text">删除</el-button>
                 </el-popconfirm>
               </template>
             </el-table-column>
           </el-table>
-          
-        </el-form>
+        </div>
+
+        <div v-show="formTabs == 'b'">
+          <div style="margin-top: 30px;">
+            <el-button type="primary" size="small" :disabled="oldList.length > 0" @click="addOld()">添加旧机</el-button>
+          </div>
+
+          <el-table
+            class="specTable"
+            :data="oldList"
+            element-loading-text="Loading"
+            border
+            highlight-current-row
+            stripe
+            style="margin-top: 20px">
+            <el-table-column align="center" label="大类" prop="mainId" min-width="160">
+              <template slot-scope="scope">
+                <el-select
+                  size="small"
+                  v-model="scope.row.mainId"
+                  filterable
+                  placeholder="请选择"
+                  @change="changeMain(scope.$index, scope.row)">
+                  <el-option
+                    v-for="item in categoryList"
+                    :key="item.categoryId"
+                    :label="item.name"
+                    :value="item.categoryId">
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="小类" prop="smallId" min-width="160">
+              <template slot-scope="scope">
+                <el-select
+                  size="small"
+                  v-model="scope.row.smallId"
+                  filterable
+                  placeholder="请选择"
+                  @change="changeSmall(scope.$index, scope.row)">
+                  <el-option
+                    v-for="item in scope.row.mainId ? categoryList.find(o => o.categoryId == scope.row.mainId).children : []"
+                    :key="item.categoryId"
+                    :label="item.name"
+                    :value="item.categoryId">
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="规格型号" prop="specId" min-width="160">
+              <template slot-scope="scope">
+                <el-select
+                  size="small"
+                  v-model="scope.row.specId"
+                  placeholder="请选择">
+                  <el-option
+                    v-for="item in specList"
+                    :key="item.id"
+                    :label="item.dictName"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="属性" prop="attrId" min-width="160">
+              <template slot-scope="scope">
+                <el-select
+                  size="small"
+                  v-model="scope.row.attrId"
+                  multiple
+                  placeholder="请选择">
+                  <el-option
+                    v-for="item in attrList"
+                    :key="item.id"
+                    :label="item.dictName"
+                    :value="item.id"
+                    :disabled="panduanduoxuandanxuan(attrList, item, scope.row.attrId) && !~scope.row.attrId.indexOf(item.id)">
+                    {{ `${item.categoryName} - ${item.dictName}` }}
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="单位" min-width="120">
+              <template>台</template>
+            </el-table-column>
+            <el-table-column align="center" label="数量" prop="num" min-width="120">
+              <template slot-scope="scope">
+                <el-input size="small" v-model="scope.row.num"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="金额" prop="price" min-width="120">
+              <template slot-scope="scope">
+                <el-input size="small" v-model="scope.row.price"></el-input>
+              </template>
+            </el-table-column>
+
+            <el-table-column align="center" label="操作" min-width="120" fixed="right">
+              <template slot-scope="scope">
+                <!-- <el-button type="text" @click="edit('theory', scope.$index)">编辑</el-button> -->
+                <el-popconfirm title="确定删除吗？" @confirm="deleteOld(scope.$index)">
+                  <el-button slot="reference" type="text">删除</el-button>
+                </el-popconfirm>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        
 				<div slot="footer" class="dialog-footer" style="margin-top: 20px;">
 				  <el-button size="mini" @click="data.removeTab()">取 消</el-button>
 				  <el-button size="mini" @click="formConfirm(data.removeTab)" type="primary">确 定</el-button>
@@ -381,43 +490,72 @@
           </el-descriptions-item>
         </el-descriptions>
 
-        <div style="font-weight: 500; margin-top: 20px;">商品信息</div>
-        <el-divider></el-divider>
+        <el-tabs v-model="detailTabs" style="margin-top: 30px;">
+          <el-tab-pane label="商品信息" name="a"></el-tab-pane>
+          <el-tab-pane label="旧机信息" name="b"></el-tab-pane>
+        </el-tabs>
 
-        <el-table
-          class="specTable"
-          :data="detailData.orderDetails"
-          element-loading-text="Loading"
-          border
-          highlight-current-row
-          stripe
-          style="margin-top: 20px">
-          <el-table-column align="center" label="品牌" prop="brandName" min-width="120"></el-table-column>
-          <el-table-column align="center" label="大类" prop="mainName" min-width="120"></el-table-column>
-          <el-table-column align="center" label="小类" prop="smallName" min-width="120"></el-table-column>
-          <el-table-column align="center" label="商品名称" prop="goodsName" min-width="120"></el-table-column>
-          <el-table-column align="center" label="规格型号" prop="goodsSpecName" min-width="120"></el-table-column>
-          <el-table-column align="center" label="单位" prop="goodsMaterialUnit" min-width="120">
-            <template slot-scope="scope">
-              {{scope.row.goodsMaterialUnit | unitFilter}}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="采购数量" prop="num" min-width="120"></el-table-column>
-          <el-table-column align="center" label="内机数量" prop="insideNum" min-width="120"></el-table-column>
-          <el-table-column align="center" label="外机数量" prop="outNum" min-width="120"></el-table-column>
-          <el-table-column align="center" label="配件数量" prop="partNum" min-width="120"></el-table-column>
-          <el-table-column align="center" label="单价" prop="price" min-width="120"></el-table-column>
-          <el-table-column align="center" label="金额" min-width="120">
-            <template slot-scope="scope">
-              {{scope.row.num * scope.row.price * 100 / 100}}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="库存数量" prop="goodsMaterialStock" min-width="120">
-            <template slot-scope="scope">
-              {{scope.row.flag == 1 ? scope.row.stockQty : scope.row.goodsMaterialStock}}
-            </template>
-          </el-table-column>
-        </el-table>
+        <div v-show="detailTabs == 'a'">
+          <el-table
+            class="specTable"
+            :data="detailData.orderDetails"
+            element-loading-text="Loading"
+            border
+            highlight-current-row
+            stripe
+            style="margin-top: 20px">
+            <el-table-column align="center" label="品牌" prop="brandName" min-width="120"></el-table-column>
+            <el-table-column align="center" label="大类" prop="mainName" min-width="120"></el-table-column>
+            <el-table-column align="center" label="小类" prop="smallName" min-width="120"></el-table-column>
+            <el-table-column align="center" label="商品名称" prop="goodsName" min-width="120"></el-table-column>
+            <el-table-column align="center" label="规格型号" prop="goodsSpecName" min-width="120"></el-table-column>
+            <el-table-column align="center" label="单位" prop="goodsMaterialUnit" min-width="120">
+              <template slot-scope="scope">
+                {{scope.row.goodsMaterialUnit | unitFilter}}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="采购数量" prop="num" min-width="120"></el-table-column>
+            <el-table-column align="center" label="内机数量" prop="insideNum" min-width="120"></el-table-column>
+            <el-table-column align="center" label="外机数量" prop="outNum" min-width="120"></el-table-column>
+            <el-table-column align="center" label="配件数量" prop="partNum" min-width="120"></el-table-column>
+            <el-table-column align="center" label="单价" prop="price" min-width="120"></el-table-column>
+            <el-table-column align="center" label="金额" min-width="120">
+              <template slot-scope="scope">
+                {{scope.row.num * scope.row.price * 100 / 100}}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="库存数量" prop="goodsMaterialStock" min-width="120">
+              <template slot-scope="scope">
+                {{scope.row.flag == 1 ? scope.row.stockQty : scope.row.goodsMaterialStock}}
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+
+        <div v-show="detailTabs == 'b'">
+          <el-table
+            class="specTable"
+            :data="detailData.orderOldProductDTOList"
+            element-loading-text="Loading"
+            border
+            highlight-current-row
+            stripe
+            style="margin-top: 20px">
+            <el-table-column align="center" label="大类" prop="mainName" min-width="160"></el-table-column>
+            <el-table-column align="center" label="小类" prop="smallName" min-width="160"></el-table-column>
+            <el-table-column align="center" label="规格型号" prop="specName" min-width="160"></el-table-column>
+            <el-table-column align="center" label="属性" prop="attrId" min-width="160">
+              <template slot-scope="scope">
+                {{scope.row.itemList.map(o => o.dictName).join('、')}}
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="单位" min-width="120">
+              <template>台</template>
+            </el-table-column>
+            <el-table-column align="center" label="数量" prop="num" min-width="120"></el-table-column>
+            <el-table-column align="center" label="金额" prop="payAmount" min-width="120"></el-table-column>
+          </el-table>
+        </div>
 
         <div v-if="activeKey == 'examine'">
           <div style="font-weight: 500; margin-top: 20px;">审批信息</div>
@@ -470,7 +608,15 @@ import { lbsAmapRegion } from '@/api/common.js'
 import TemplatePage from '@/components/template/template-page-1.vue'
 import import_mixin from '@/components/template/import_mixin.js'
 import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
-import { getOfflineOrderList, offlineOrderListExport, offlineOrderSave, getOfflineOrderDetail, offlineOrderExamine, getOrderTypeList } from "@/api/order";
+import {getOfflineOrderList,
+        offlineOrderListExport,
+        offlineOrderSave,
+        getOfflineOrderDetail,
+        offlineOrderExamine,
+        getOrderTypeList,
+        getCategoryList,
+        getAttrList,
+      } from "@/api/order";
 import { getGoodsSpecList, getGoodsList } from '@/api/goods'
 import operation_mixin from '@/components/template/operation_mixin.js'
 import geographicalPosi from '@/components/geographicalPosi/index.vue'
@@ -595,6 +741,15 @@ export default {
 			timer: '',
 
       pageType: '',
+
+      formTabs: 'a',
+      detailTabs: 'a',
+
+      oldList: [], // 旧机列表
+      categoryList: [],
+      specList: [],
+      attrList: [],
+
     }
   },
   computed: {
@@ -708,6 +863,7 @@ export default {
             this.getOrderTypeList();
             this.getGoodsSpecList();
             this.getGoodsList();
+            this.getCategoryList();
       			this.formType = type
       			this.formVisible = true
             if (type == 'add') {
@@ -722,6 +878,21 @@ export default {
                   item.unit = item.goodsMaterialUnit;
                 })
                 this.goodsList = res.data.orderDetails;
+
+                if(res.data.orderOldProductDTOList?.length > 0) {
+                  this.oldList = res.data.orderOldProductDTOList.map(item => {
+                    return {
+                      mainId: item.mainId,
+                      smallId: item.smallId,
+                      specId: item.specId,
+                      attrId: item.itemList.map(o => o.id),
+                      num: item.num,
+                      price: item.payAmount,
+                    }
+                  })
+                  this.getAttrList(res.data.orderOldProductDTOList[0].smallId);
+                }
+                
       				  Object.assign(this.formData, res.data)
                 this.getinitlbslist();
       				})
@@ -749,13 +920,23 @@ export default {
       this.formData.orderId = '';
       this.formData.fileUrl = '';
       this.goodsList = [];
+      this.oldList = [];
       this.$data.formRef = this.$options.data().formRef
     },
     formConfirm(cancel) {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
           let orderSmallTypeText = this.orderTypeList.find(o => o.id == this.formData.orderSmallType).orderSmallTypeText;
-          offlineOrderSave({...this.formData, orderSmallTypeText, orderDetails: this.goodsList}).then(res => {
+          let oldList = this.oldList.map(item => {
+            return {
+              id: item.specId,
+              itemIds: item.attrId,
+              num: item.num,
+              payAmount: item.price
+            }
+          })
+
+          offlineOrderSave({...this.formData, orderSmallTypeText, orderDetails: this.goodsList, orderOldProductAdds: oldList}).then(res => {
             if(this.formData.payType == 'WECHAT' && this.formDialogType == 0) {
               offlineOrderExamine({
                 orderId: res.data,
@@ -1168,6 +1349,7 @@ export default {
       }else{
         this.clear()
         this.$refs.tabPage.removeTab(this.pageType);
+        this.$refs.pageRef.refreshList()
         return 
       }
       getOfflineOrderDetail({orderId}).then(res => {
@@ -1192,6 +1374,75 @@ export default {
       clearTimeout(this.timer)
     },
 
+
+
+    // 获取类目列表
+    getCategoryList() {
+      getCategoryList().then(res => {
+        this.categoryList = res.data;
+      })
+    },
+
+    // 获取规格/属性列表
+    getAttrList(smallId) {
+      getAttrList({
+        pageNum: 1,
+        pageSize: -1,
+        params: [
+          {param: 'small_id', compare: '=', value: smallId},
+          // {param: 'type_attribute', compare: '=', value: 'SPEC'}
+        ]
+      }).then(res => {
+        this.specList = res.data.records.filter(o => o.typeAttribute == 'SPEC');
+        this.attrList = res.data.records.filter(o => o.typeAttribute == 'OTHER');
+      })
+    },
+
+    panduanduoxuandanxuan(list, data, vals) {
+      if (data.typeOption === "SINGLE") {
+        return !!list.filter(item => !!~vals.indexOf(item.id) && item.serviceCategoryId === data.serviceCategoryId).length
+      } else {
+        return false
+      }
+    },
+
+    // 添加旧机
+    addOld() {
+      let obj = {
+        mainId: '',
+        smallId: '',
+        specId: '',
+        attrId: [],
+        num: '',
+        price: '',
+      }
+      let item = JSON.parse(JSON.stringify(obj));
+      this.oldList.push(item);
+    },
+
+    // 删除规格
+    deleteOld(index) {
+      this.oldList.splice(index, 1);
+    },
+
+    // 切换大类
+    changeMain(index, row) {
+      this.oldList[index].smallId = '';
+      this.oldList[index].specId = '';
+      this.oldList[index].attrId = [];
+      this.specList = [];
+      this.attrList = [];
+    },
+
+    // 切换小类
+    changeSmall(index, row) {
+      this.oldList[index].specId = '';
+      this.oldList[index].attrId = [];
+      this.specList = [];
+      this.attrList = [];
+      this.getAttrList(row.smallId);
+    },
+
   }
 }
 </script>