Browse Source

价格查询 新增 查询条件 车架号

chenrui 3 years ago
parent
commit
94696b3a78

+ 16 - 0
src/api/sales.js

@@ -177,3 +177,19 @@ export const salesDetailTypeExcel = params => {
     responseType: 'blob'
   })
 }
+// 车架号
+export const supperCodeByVin = (params) => {
+  return axios({
+    url: `/vinIdentify/queryPartCodeByVin/${params.vin}`,
+    method: 'get'
+  })
+}
+// 车架号  识别图片内容
+export const vinCodeParse = params => {
+  return axios.request({
+    url: `/vinIdentify/ocr`,
+    method: 'post',
+    data: params,
+    responseType: 'blob'
+  })
+}

BIN
src/assets/def_img@2x.png


+ 119 - 0
src/views/salesManagement/priceInquiry/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="carInfoDetail-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>

+ 160 - 38
src/views/salesManagement/priceInquiry/list.vue

@@ -2,42 +2,56 @@
   <a-card size="small" :bordered="false" class="priceInquiryList-wrap">
     <!-- 搜索条件 -->
     <div ref="tableSearch" class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
+      <a-form-model
+        ref="ruleForm"
+        class="form-model-con"
+        layout="inline"
+        :rules="rules"
+        :model="queryParam"
+        @keyup.enter.native="$refs.table.refresh(true)" >
         <a-row :gutter="15">
           <a-col :md="6" :sm="24">
-            <a-form-item label="产品编码">
-              <a-input id="priceInquiryList-code" v-model.trim="queryParam.code" allowClear placeholder="请输入产品编码"/>
-            </a-form-item>
+            <a-form-model-item label="车架号(VIN)" prop="vinCode">
+              <a-input id="priceInquiryList-vinCode" v-model.trim="queryParam.vinCode" allowClear placeholder="请输入车架号(VIN)">
+                <a-icon @click="uploadFun" :type="vinLoading?'loading':'camera'" slot="addonAfter" :style="{ fontSize: '18px', verticalAlign: 'bottom' }" />
+              </a-input>
+              <input type="file" id="filed" hidden="" @change="filePreview">
+            </a-form-model-item>
           </a-col>
           <a-col :md="6" :sm="24">
-            <a-form-item label="产品名称">
-              <a-input id="priceInquiryList-name" v-model.trim="queryParam.name" allowClear placeholder="请输入产品名称"/>
-            </a-form-item>
+            <a-form-model-item label="产品编码">
+              <a-input id="priceInquiryList-code" v-model.trim="queryParam.code" allowClear placeholder="请输入产品编码"/>
+            </a-form-model-item>
           </a-col>
           <a-col :md="6" :sm="24">
-            <a-form-item label="产品分类">
-              <a-cascader
-                @change="changeProductType"
-                change-on-select
-                v-model="productType"
-                expand-trigger="hover"
-                :options="productTypeList"
-                :fieldNames="{ label: 'productTypeName', value: 'productTypeSn', children: 'children' }"
-                id="priceInquiryList-productType"
-                placeholder="请选择产品分类"
-                allowClear />
-            </a-form-item>
+            <a-form-model-item label="产品名称">
+              <a-input id="priceInquiryList-name" v-model.trim="queryParam.name" allowClear placeholder="请输入产品名称"/>
+            </a-form-model-item>
           </a-col>
           <template v-if="advanced">
             <a-col :md="6" :sm="24">
-              <a-form-item label="产品品牌">
+              <a-form-model-item label="产品分类">
+                <a-cascader
+                  @change="changeProductType"
+                  change-on-select
+                  v-model="productType"
+                  expand-trigger="hover"
+                  :options="productTypeList"
+                  :fieldNames="{ label: 'productTypeName', value: 'productTypeSn', children: 'children' }"
+                  id="priceInquiryList-productType"
+                  placeholder="请选择产品分类"
+                  allowClear />
+              </a-form-model-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-form-model-item label="产品品牌">
                 <ProductBrand id="priceInquiryList-productBrandSn" v-model="queryParam.productBrandSn"></ProductBrand>
-              </a-form-item>
+              </a-form-model-item>
             </a-col>
             <a-col :md="6" :sm="24">
-              <a-form-item label="产品状态">
+              <a-form-model-item label="产品状态">
                 <v-select code="PRODUCT_ONOFFLINE_STATUS" id="priceInquiryList-state" v-model="queryParam.state" allowClear placeholder="请选择状态"></v-select>
-              </a-form-item>
+              </a-form-model-item>
             </a-col>
           </template>
           <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
@@ -49,8 +63,24 @@
             </a>
           </a-col>
         </a-row>
-      </a-form>
+      </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 fixPagination"
@@ -76,31 +106,41 @@
         <span v-else>--</span>
       </template>
     </s-table>
+    <!-- 查看车辆信息 -->
+    <car-info-modal ref="carInfoModal" :openModal="openCarInfoModal" :infoData="vinInfoData&&vinInfoData.vinInfo" @close="openCarInfoModal=false" />
   </a-card>
 </template>
 
 <script>
 import { STable, VSelect } from '@/components'
+import carInfoModal from './carInfoModal.vue'
 import { productBrandQuery } from '@/api/productBrand'
 import { productTypeQuery } from '@/api/productType'
 import { productPriceList } from '@/api/product'
+import { supperCodeByVin, vinCodeParse } from '@/api/sales'
 import ProductBrand from '@/views/common/productBrand.js'
 export default {
-  components: { STable, VSelect, ProductBrand },
+  components: { STable, VSelect, ProductBrand, carInfoModal },
   data () {
     return {
       advanced: true, // 高级搜索 展开/关闭
+      vinLoading: false,
       tableHeight: 0,
       productType: [],
       queryParam: { //  查询条件
         code: '', //  产品编码
         name: '', //  产品名称
+        vinCode: '',
+        productCodeList: undefined, //  车架号
         productBrandSn: undefined, //  产品品牌
         productTypeSn1: '', //  产品一级分类
         productTypeSn2: '', //  产品二级分类
         productTypeSn3: '', //  产品三级分类
         state: 'ONLINE' //  产品状态
       },
+      rules: {
+        vinCode: [ { len: 17, message: '请输入正确的车架号(VIN)', trigger: 'change' } ]
+      },
       disabled: false, //  查询、重置按钮是否可操作
       columns: [
         { title: '产品编码', dataIndex: 'code', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
@@ -116,24 +156,70 @@ export default {
       ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
-        this.disabled = true
-        this.spinning = true
-        return productPriceList(Object.assign(parameter, this.queryParam)).then(res => {
-          const data = res.data
-          const no = (data.pageNo - 1) * data.pageSize
-          for (var i = 0; i < data.list.length; i++) {
-            data.list[i].no = no + i + 1
+        const _this = this
+        const params = Object.assign(parameter, _this.queryParam)
+        if (_this.queryParam.vinCode && _this.queryParam.vinCode.length == 17 && !this.onlyList) { //  输入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()
+            }
+          })
+        } else if (_this.queryParam.vinCode && _this.queryParam.vinCode.length < 17 && !this.onlyList) { // 输入vin,但vin码不符合标准,不查vin码信息,不请求列表数据
+          _this.$refs.table.localLoading = false
+          _this.$refs.table.clearTable()
+        } else if (this.onlyList) {
+          _this.disabled = true
+          if (_this.queryParam.vinCode && _this.vinInfoData) {
+            return _this.getList(Object.assign(params, { productCodeList: _this.vinInfoData.partCodeList }))
+          } else {
+            return _this.getList(params)
           }
-          this.disabled = false
-          this.spinning = false
-          return data
-        })
+        } else { //  未输入vin码信息,只查列表数据
+          _this.disabled = true
+          return _this.getList(params)
+        }
       },
+      vinInfoData: null,
       productBrandList: [], //  品牌下拉数据
-      productTypeList: [] //  分类下拉数据
+      productTypeList: [], //  分类下拉数据
+      openCarInfoModal: false,
+      onlyList: false
     }
   },
   methods: {
+    getList (params) {
+      const _this = this
+      return productPriceList(params).then(res => {
+        let data
+        this.onlyList = false
+        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
+          }
+          if (!params.vinCode) {
+            _this.vinInfoData = null
+          }
+        } else {
+          data = {
+            list: [],
+            pageNo: 1,
+            pageSize: 10
+          }
+        }
+        _this.disabled = false
+        return data
+      })
+    },
     inited (viewer) {
       if (viewer) {
         const imageUrl = []
@@ -155,7 +241,43 @@ export default {
       this.queryParam.productTypeSn3 = ''
       this.queryParam.state = 'ONLINE'
       this.productType = []
+      this.$refs.ruleForm.resetFields()
       this.$refs.table.refresh(true)
+      this.vinInfoData = null
+    },
+    uploadFun () {
+      document.getElementById('filed').click()
+    },
+    filePreview (e) {
+      const _this = this
+      var files = e.target.files[0]
+      const formData = new FormData()
+      formData.append('savePathType', 'local')
+      formData.append('file', files)
+      this.vinLoading = true
+      vinCodeParse(formData).then(res => {
+        if (res.type == 'application/json') {
+          var reader = new FileReader()
+          reader.addEventListener('loadend', function () {
+            const obj = JSON.parse(reader.result)
+            if (obj.status == 200) {
+              _this.queryParam.vinCode = obj.data || ''
+              // 移除表单项的校验结果
+              _this.$refs.ruleForm.clearValidate('vinCode')
+            } else {
+              _this.$notification.error({
+                message: '提示',
+                description: obj.message
+              })
+            }
+            _this.vinLoading = false
+            document.getElementById('filed').value = ''
+          })
+          reader.readAsText(res)
+        } else {
+          _this.vinLoading = false
+        }
+      })
     },
     //  产品分类  change
     changeProductType (val, opt) {
@@ -193,7 +315,7 @@ export default {
     },
     setTableH () {
       const tableSearchH = this.$refs.tableSearch.offsetHeight
-      this.tableHeight = window.innerHeight - tableSearchH - 195
+      this.tableHeight = window.innerHeight - tableSearchH - 243
     }
   },
   watch: {