chenrui 3 лет назад
Родитель
Сommit
dd029dc278

+ 119 - 0
src/views/salesManagement/salesQuery/carInfoModal.vue

@@ -0,0 +1,119 @@
+<template>
+  <a-modal
+    centered
+    class="carInfoDetail-modal"
+    :footer="null"
+    :maskClosable="false"
+    v-model="isShow"
+    @cancle="isShow=false"
+    :width="800">
+    <div>
+      <div class="head-info-con">
+        <p class="head-info-title">车型信息</p>
+        <a-divider style="margin: 12px 0;" />
+      </div>
+      <a-descriptions bordered :column="2" size="small" class="head-info-main">
+        <a-descriptions-item label="车型信息:">{{ infoData&&infoData.text || '--' }}</a-descriptions-item>
+        <a-descriptions-item label="品牌:">{{ infoData&&infoData.brand_name || '--' }}</a-descriptions-item>
+        <a-descriptions-item label="车型:">{{ infoData&&infoData.model_name || '--' }}</a-descriptions-item>
+        <a-descriptions-item label="品牌LOGO:">
+          <img :src="infoData&&infoData.icon?infoData.icon:defImg" width="30" height="30" style="border-radius: 50%;" />
+        </a-descriptions-item>
+        <a-descriptions-item label="排量:">{{ infoData&&infoData.sub_name || '--' }}</a-descriptions-item>
+        <a-descriptions-item label="年款:">{{ infoData&&infoData.year || '--' }}</a-descriptions-item>
+        <a-descriptions-item label="车型图:">
+          <div v-if="infoData&&infoData.images.length>0">
+            <img :src="infoData.images[0] || defImg" width="30" height="30" class="imageUrl" @click="inited(infoData.images)" />
+          </div>
+          <span v-else>--</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="车系:">{{ infoData&&infoData.series_name || '--' }}</a-descriptions-item>
+      </a-descriptions>
+      <div class="head-info-con" v-if="infoData&&infoData.params">
+        <p class="head-info-title">配置信息</p>
+        <a-divider style="margin: 12px 0;" />
+      </div>
+      <a-descriptions bordered :column="2" size="small" v-if="infoData&&infoData.params" class="head-info-main">
+        <a-descriptions-item v-for="item in infoData.params" :label="item.type_name+':'">{{ item.value || '--' }}</a-descriptions-item>
+      </a-descriptions>
+      <div class="btn-cont"><a-button id="product-management-detail-modal-back" @click="isShow = false">返回列表</a-button></div>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import defImg from '@/assets/def_img@2x.png'
+export default {
+  name: 'CarInfoDetailModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    infoData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      defImg
+    }
+  },
+  methods: {
+    inited (viewer) {
+      if (viewer) {
+        const imageUrl = []
+        viewer.map(item => {
+          imageUrl.push(item)
+        })
+        this.$viewerApi({
+          images: imageUrl
+        })
+      }
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .carInfoDetail-modal{
+    .ant-modal-body {
+      padding: 40px 40px 24px;
+    }
+    .ant-descriptions-item-label.ant-descriptions-item-colon{
+      width: 117px;
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+    .head-info-con{
+      .head-info-title{
+        font-size: 16px;
+        margin: 0;
+      }
+    }
+    .head-info-main{
+      margin-bottom: 20px;
+    }
+    .imageUrl{
+      cursor: pointer;
+    }
+  }
+</style>

+ 73 - 26
src/views/salesManagement/salesQuery/queryPart.vue

@@ -90,6 +90,22 @@
         </a-row>
       </a-form-model>
     </div>
+    <a-alert type="error" style="margin-bottom: 10px;" v-if="vinInfoData&&!vinInfoData.vinInfo">
+      <template slot="message"><a-icon type="exclamation-circle" theme="filled" :style="{ color: '#E70012', fontSize: '15px', verticalAlign: 'sub', marginRight: '3px' }" />抱歉!暂未找到匹配VIN码的车型!</template>
+    </a-alert>
+    <a-alert type="warning" style="margin-bottom: 10px;cursor: pointer;" v-if="vinInfoData&&vinInfoData.vinInfo" @click="openCarInfoModal=true">
+      <template slot="message">
+        <div style="display: flex;justify-content: space-between;align-items: center;" @click="openCarInfoModal=true">
+          <div>
+            <img :src="vinInfoData.vinInfo && vinInfoData.vinInfo.icon?(vinInfoData.vinInfo.icon+'?x-oss-process=image/resize,h_30,m_lfit'):defImg" width="30" height="30" class="imageUrl" style="border-radius: 50%;vertical-align: middle;margin-right: 3px;" />
+            <span style="vertical-align: middle;">{{ vinInfoData.vinInfo.text }}</span>
+          </div>
+          <div style="color: #f90;">
+            <span>查看更多</span> >
+          </div>
+        </div>
+      </template>
+    </a-alert>
     <!-- 列表 -->
     <s-table
       class="sTable"
@@ -147,6 +163,8 @@
     </s-table>
     <!-- 销售记录 -->
     <product-salesRecord-modal ref="salseRecord" :openModal="openModal" @close="closeModal" />
+    <!-- 查看车辆信息 -->
+    <car-info-modal ref="carInfoModal" :openModal="openCarInfoModal" :infoData="vinInfoData&&vinInfoData.vinInfo" @close="openCarInfoModal=false" />
   </div>
 </template>
 
@@ -156,11 +174,13 @@ import { dealerProductTypeList } from '@/api/dealerProductType'
 import { querySumByProductLocation } from '@/api/stock'
 import { warehouseAllList } from '@/api/warehouse'
 import productSalesRecordModal from './productSalesRecordModal.vue'
+import carInfoModal from './carInfoModal.vue'
 import { STable, VSelect, Upload } from '@/components'
 import { supperCodeByVin, vinCodeParse } from '@/api/sales'
+import defImg from '@/assets/def_img@2x.png'
 export default {
   name: 'QueryPart',
-  components: { STable, VSelect, Upload, productSalesRecordModal },
+  components: { STable, VSelect, Upload, productSalesRecordModal, carInfoModal },
   props: {
     // buyerSn: {
     //   type: [Number, String],
@@ -177,6 +197,7 @@ export default {
       advanced: false, // 高级搜索 展开/关闭
       vinLoading: false,
       productType: [],
+      defImg,
       queryParam: { //  查询条件
         customerSn: '',
         salePriceType: '',
@@ -200,11 +221,12 @@ export default {
       productBrandList: [], //  下拉数据
       productTypeList: [], //  产品分类  下拉数据
       warehouseList: [], // 仓库列表
+      vinInfoData: null,
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
-        this.disabled = true
-        this.queryParam.salePriceType = this.priceType
-        this.queryParam.customerSn = this.buyerSn
+        const _this = this
+        _this.queryParam.salePriceType = _this.priceType
+        _this.queryParam.customerSn = _this.buyerSn
         // 排序
         if (parameter.sortField == 'productCode') {
           parameter.sortField = 'code'
@@ -218,31 +240,32 @@ export default {
           parameter.sortField = 'warehouseSn'
           parameter.sortAlias = 'sd'
         }
-        return querySumByProductLocation(Object.assign(parameter, this.queryParam)).then(res => {
-          let data
-          if (res.status == 200) {
-            data = res.data
-            data.list = data.list.filter(item => item != null)
-            const no = (data.pageNo - 1) * data.pageSize
-            for (var i = 0; i < data.list.length; i++) {
-              data.list[i].no = no + i + 1
-              data.list[i].salesNums = 1
-              data.list[i].currentQty = data.list[i].currentQty || 0
-            }
-          } else {
-            data = {
-              list: [],
-              pageNo: 1,
-              pageSize: 20
+        const params = Object.assign(parameter, _this.queryParam)
+        if (_this.queryParam.vinCode && _this.queryParam.vinCode.length == 17) { //  输入vin,查出vin码信息后请求列表数据
+          _this.disabled = true
+          return supperCodeByVin({ vin: _this.queryParam.vinCode }).then(res => {
+            if (res.status == 200) {
+              _this.vinInfoData = res.data
+              params.productCodeList = res.data.partCodeList || []
+              return _this.getList(params)
+            } else {
+              _this.vinInfoData = null
+              _this.$refs.table.localLoading = false
+              _this.$refs.table.clearTable()
             }
-          }
-          this.disabled = false
-          return data
-        })
+          })
+        } else if (_this.queryParam.vinCode && _this.queryParam.vinCode.length < 17) { // 输入vin,但vin码不符合标准,不查vin码信息,不请求列表数据
+          _this.$refs.table.localLoading = false
+          _this.$refs.table.clearTable()
+        } else { //  未输入vin码信息,只查列表数据
+          _this.disabled = true
+          return _this.getList(params)
+        }
       },
       openModal: false, //  查看客户详情  弹框
       cost: false,
-      cityPrice: false
+      cityPrice: false,
+      openCarInfoModal: false
     }
   },
   computed: {
@@ -282,6 +305,30 @@ export default {
     }
   },
   methods: {
+    getList (params) {
+      const _this = this
+      return querySumByProductLocation(params).then(res => {
+        let data
+        if (res.status == 200) {
+          data = res.data
+          data.list = data.list.filter(item => item != null)
+          const no = (data.pageNo - 1) * data.pageSize
+          for (var i = 0; i < data.list.length; i++) {
+            data.list[i].no = no + i + 1
+            data.list[i].salesNums = 1
+            data.list[i].currentQty = data.list[i].currentQty || 0
+          }
+        } else {
+          data = {
+            list: [],
+            pageNo: 1,
+            pageSize: 20
+          }
+        }
+        _this.disabled = false
+        return data
+      })
+    },
     // vin  change
     vinCodeChange (e) {
       if (e.target.value.length == 17) {
@@ -323,9 +370,9 @@ export default {
       this.productType = []
       this.$refs.ruleForm.resetFields()
       this.$refs.table.refresh(true)
+      this.vinInfoData = null
     },
     pageInit (buyerSn, priceType) {
-      console.log(buyerSn, priceType)
       this.priceType = priceType
       this.buyerSn = buyerSn
       this.resetSearchForm()