Selaa lähdekoodia

箭冠产品新增产品图片字段

chenrui 3 vuotta sitten
vanhempi
commit
383d7f42d9
4 muutettua tiedostoa jossa 60 lisäystä ja 15 poistoa
  1. 19 0
      package-lock.json
  2. 3 2
      package.json
  3. 7 1
      src/main.js
  4. 31 12
      src/views/productManagement/productInfoJg/list.vue

+ 19 - 0
package-lock.json

@@ -15840,6 +15840,11 @@
       "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -16366,6 +16371,15 @@
       "resolved": "https://registry.npmjs.org/v-runtime-template/-/v-runtime-template-1.10.0.tgz",
       "integrity": "sha512-WLlq9jUepSfUrMEenw3mn7FDXX6hhbl11JjC1OKhwLzifHzVrY5a696TUHDPyj9jke3GGnR7b+2T3od/RL5cww=="
     },
+    "v-viewer": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/v-viewer/-/v-viewer-1.6.4.tgz",
+      "integrity": "sha512-LVkiUHpmsbsZXebeNXnu8krRCi5i2n07FeLFxoIVGhw8lVvTBO0ffpbDC6mLEuacCjrIh09HjIqpciwUtWE8lQ==",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -16409,6 +16423,11 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "viewerjs": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/viewerjs/-/viewerjs-1.10.1.tgz",
+      "integrity": "sha512-Oyzd3JP9dDSd+bBulfnQ+UTfHoobFwkmcT/uKSnQXjmPz7rZU0HJIiKudxPaMsiv17dr4Sm1cHnASJcDlFw1PA=="
+    },
     "viser": {
       "version": "2.4.6",
       "resolved": "https://registry.npmjs.org/viser/-/viser-2.4.6.tgz",

+ 3 - 2
package.json

@@ -17,6 +17,7 @@
     "ant-design-vue": "^1.7.1",
     "axios": "^0.19.0",
     "core-js": "2.6.9",
+    "echarts": "^4.9.0",
     "enquire.js": "^2.1.6",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
@@ -25,6 +26,7 @@
     "moment": "^2.24.0",
     "nprogress": "^0.2.0",
     "v-runtime-template": "^1.10.0",
+    "v-viewer": "^1.6.4",
     "viser-vue": "^2.4.6",
     "vue": "^2.6.10",
     "vue-clipboard2": "^0.2.1",
@@ -35,8 +37,7 @@
     "vue-router": "^3.1.2",
     "vue-svg-component-runtime": "^1.0.1",
     "vuex": "^3.1.1",
-    "wangeditor": "^3.1.1",
-    "echarts": "^4.9.0"
+    "wangeditor": "^3.1.1"
   },
   "devDependencies": {
     "@ant-design/colors": "^3.2.1",

+ 7 - 1
src/main.js

@@ -6,6 +6,8 @@ import App from './App.vue'
 import router from './router'
 import store from './store/'
 import { VueAxios } from './utils/request'
+import Viewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
 
 // mock
 // import './mock'
@@ -15,7 +17,11 @@ import './core/use'
 import './permission' // permission control
 import './utils/filter'
 
-import VueCookies from 'vue-cookies' // global filter
+import VueCookies from 'vue-cookies'
+Vue.use(Viewer)
+Viewer.setDefaults({
+  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
+}) // global filter
 
 Vue.config.productionTip = false
 

+ 31 - 12
src/views/productManagement/productInfoJg/list.vue

@@ -80,8 +80,15 @@
       :rowKey="(record) => record.id"
       :columns="columns"
       :data="loadData"
-      :scroll="{ x: 1940, y: tableHeight }"
+      :scroll="{ x: 1510, y: tableHeight }"
       bordered>
+      <!-- 产品图片 -->
+      <template slot="imageUrl" slot-scope="text, record">
+        <div v-if="record.productPicList && record.productPicList.length>0">
+          <img :src="record.productPicList[0].imageUrl || ''" width="30" height="30" class="imageUrl" @click="inited(record.productPicList)" />
+        </div>
+        <span v-else>--</span>
+      </template>
       <!-- 产品分类 -->
       <template slot="productType" slot-scope="text, record">
         <span v-if="record.productTypeName2 || record.productTypeName3">{{ record.productTypeName2 }} {{ record.productTypeName3 ? '>' : '' }} {{ record.productTypeName3 }}</span>
@@ -142,6 +149,17 @@ export default {
     }
   },
   methods: {
+    inited (viewer) {
+      if (viewer) {
+        const imageUrl = []
+        viewer.map(item => {
+          imageUrl.push(item.imageUrl)
+        })
+        this.$viewerApi({
+          images: imageUrl
+        })
+      }
+    },
     //  重置
     resetSearchForm () {
       this.queryParam.code = ''
@@ -158,33 +176,34 @@ export default {
     // 设置表头
     getColumns () {
       this.columns = [
-        { title: '序号', dataIndex: 'no', width: 80, align: 'center', fixed: 'left' },
+        { title: '序号', dataIndex: 'no', width: 70, align: 'center', fixed: 'left' },
         { title: '产品编码', dataIndex: 'code', align: 'center', customRender: function (text) { return text || '--' } },
         { title: '产品名称', dataIndex: 'name', align: 'center', customRender: function (text) { return text || '--' } },
         { title: '原厂编码', dataIndex: 'origCode', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '产品品牌', dataIndex: 'productBrandName', width: 200, align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '产品分类', scopedSlots: { customRender: 'productType' }, width: 200, align: 'center' }
+        { title: '产品图片', scopedSlots: { customRender: 'imageUrl' }, width: 80, align: 'center' },
+        { title: '产品品牌', dataIndex: 'productBrandName', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '产品分类', scopedSlots: { customRender: 'productType' }, width: 100, align: 'center' }
       ]
       const cArr = [
-        { title: '终端价', dataIndex: 'terminalPrice', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
-        { title: '车主价', dataIndex: 'carOwnersPrice', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
-        { title: '创建时间', dataIndex: 'createDate', width: 160, align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '状态', dataIndex: 'onlineFalgDictValue', width: 140, align: 'center', customRender: function (text) { return text || '--' } }
+        { title: '终端价', dataIndex: 'terminalPrice', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
+        { title: '车主价', dataIndex: 'carOwnersPrice', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
+        { title: '创建时间', dataIndex: 'createDate', width: 140, align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '状态', dataIndex: 'onlineFalgDictValue', width: 80, align: 'center', customRender: function (text) { return text || '--' } }
       ]
       getCurrentDealer().then(res => {
         if (res.status == 200) {
           if (res.data.dealerLevel && res.data.dealerLevel == 'PROVINCE') { //  省级
             this.columns.push(
-              { title: '省级价', dataIndex: 'provincePrice', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
-              { title: '市级价', dataIndex: 'cityPrice', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
+              { title: '省级价', dataIndex: 'provincePrice', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
+              { title: '市级价', dataIndex: 'cityPrice', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
             )
           } else if (res.data.dealerLevel && res.data.dealerLevel == 'CITY') { //  市级
             this.columns.push(
-              { title: '市级价', dataIndex: 'cityPrice', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
+              { title: '市级价', dataIndex: 'cityPrice', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
             )
           }
           if (res.data.isShowSpecialPrice && res.data.isShowSpecialPrice == '1') { //  是否展示特约价
-            this.columns.push({ title: '特约价', dataIndex: 'specialPrice', width: 100, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } })
+            this.columns.push({ title: '特约价', dataIndex: 'specialPrice', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } })
           }
           this.columns = [...this.columns, ...cArr]
         }