浏览代码

修改bug

chenrui 9 月之前
父节点
当前提交
609bb9e8f5

+ 78 - 0
src/views/easyPassManagement/shoppingManagement/imgShowModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <a-modal
+    centered
+    class="imgShow-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="预览"
+    v-model="isShow"
+    @cancel="isShow=false"
+    :width="500">
+    <div class="imgShow-con">
+      <img :src="mainContent" alt="图片走丢了" />
+    </div>
+    <div class="btn-cont">
+      <a-button id="imgShow-modal-back" @click="isShow = false">关闭</a-button>
+    </div>
+  </a-modal>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+export default {
+  name: 'ImgShowModal',
+  mixins: [commonMixin],
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      mainContent: '' // 主要显示内容
+    }
+  },
+  methods: {
+    // 初始化
+    pageInit (url) {
+      this.mainContent = url
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .imgShow-modal{
+    .imgShow-con{
+      width:90%;
+      margin:0 auto;
+      max-height:700px;
+      overflow-y:scroll;
+      scrollbar-width: none;
+      img{
+         width:100%;
+         height:auto;
+         object-fit:cover;
+       }
+    }
+
+    .btn-cont {
+      text-align: center;
+      margin: 30px 0 0px;
+    }
+  }
+</style>

+ 26 - 8
src/views/easyPassManagement/shoppingManagement/list.vue

@@ -23,7 +23,13 @@
         <!-- 图片 -->
         <template slot="imgs" slot-scope="text, record">
           <div class="addType-img">
-            <img :src="record.iconUrl" alt="图片走丢啦" width="60" height="60" :id="'shoppingManagementList-img-'+record.id"/>
+            <img
+              :src="record.iconUrl"
+              alt="图片走丢啦"
+              width="40"
+              height="40"
+              @click="handleImg(record)"
+              :id="'shoppingManagementList-img-'+record.id"/>
           </div>
         </template>
         <!-- 状态 -->
@@ -79,6 +85,8 @@
       :parentData="parentData"
       @ok="handleCategoryOk"
       @close="closeCategory"></addCategoryModal>
+    <!-- 查看图片 -->
+    <imgShowModal v-drag ref="checkedImg" :openModal="openCheckedImgModal" @close="openCheckedImgModal=false"></imgShowModal>
   </a-card>
 </template>
 
@@ -87,12 +95,13 @@ import { commonMixin } from '@/utils/mixin'
 // 组件
 import { VSelect } from '@/components'
 import addCategoryModal from './addCategoryModal.vue'
+import imgShowModal from './imgShowModal.vue'
 // 接口
 import { shopCategoryList, getChildList, shopCategoryUpdateStatus, shopCategoryDel } from '@/api/shopCategory'
 export default {
   name: 'ShoppingManagementList',
   mixins: [commonMixin],
-  components: { VSelect, addCategoryModal },
+  components: { VSelect, addCategoryModal, imgShowModal },
   data () {
     return {
       spinning: false,
@@ -100,17 +109,18 @@ export default {
       openCategoryModal: false, // 打开新增类目弹窗
       // 表头
       columns: [
-        { title: '类目名称', dataIndex: 'categoryName', width: '20%', align: 'left', customRender: function (text) { return text || '--' } },
-        { title: '图片', scopedSlots: { customRender: 'imgs' }, width: '15%', align: 'center' },
-        { title: '易码通优先级', dataIndex: 'sort', width: '15%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' }, ellipsis: true },
-        { title: '创建时间', dataIndex: 'createDate', width: '15%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '类目名称', dataIndex: 'categoryName', width: '23%', align: 'left', customRender: function (text) { return text || '--' } },
+        { title: '图片', scopedSlots: { customRender: 'imgs' }, width: '10%', align: 'center' },
+        { title: '易码通优先级', dataIndex: 'sort', width: '10%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' }, ellipsis: true },
+        { title: '创建时间', dataIndex: 'createDate', width: '20%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
         { title: '状态', scopedSlots: { customRender: 'enabledFlag' }, width: '15%', align: 'center' },
-        { title: '操作', scopedSlots: { customRender: 'action' }, width: '20%', align: 'center' }
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: '23%', align: 'center' }
       ],
       parentData: null, // 父级类目一行数据
       loadDataList: [], // 表格数据
       pageType: null, // 按钮类型
-      expandedRowKeys: []// 展开的类目sn合集
+      expandedRowKeys: [], // 展开的类目sn合集
+      openCheckedImgModal: false// 查看图片弹窗
     }
   },
   methods: {
@@ -176,6 +186,14 @@ export default {
     handleAddProduct (row) {
       this.$router.push({ name: 'chooseProductList', params: { sn: row.categorySn } })
     },
+    // 查看图片
+    handleImg (row) {
+      this.openCheckedImgModal = true
+      const _this = this
+      _this.$nextTick(() => {
+        _this.$refs.checkedImg.pageInit(row.iconUrl)
+      })
+    },
     // 删除
     handleDel (row) {
       const _this = this

+ 1 - 1
src/views/easyPassManagement/shoppingProducts/list.vue

@@ -376,7 +376,7 @@ export default {
     // 编辑成功
     hanldeEditOk () {
       this.itemProductSn = null
-      this.$refs.table.refresh(true)
+      this.$refs.table.refresh()
     },
     //  产品分类  change
     changeProductType (val, opt) {