瀏覽代碼

完善产品品牌

chenrui 4 年之前
父節點
當前提交
d50ab37b9e

+ 7 - 6
src/views/productManagement/productBrand/detailModal.vue

@@ -10,12 +10,12 @@
     width="80%">
     <div v-if="detailsData">
       <a-descriptions bordered size="default" :column="1">
-        <a-descriptions-item label="品牌图片:">
-          <img :src="detailsData.imageUrl" title="点击查看大图" class="productPic" @click="getPreview(item.url)" />
-        </a-descriptions-item>
         <a-descriptions-item label="品牌名称:">{{ detailsData.brandName || '--' }}</a-descriptions-item>
         <a-descriptions-item label="品牌类别:">{{ detailsData.brandType || '--' }}</a-descriptions-item>
         <a-descriptions-item label="排序字母:">{{ detailsData.sortChar || '--' }}</a-descriptions-item>
+        <a-descriptions-item label="品牌图片:">
+          <img :src="detailsData.imageUrl" title="点击查看大图" class="productPic" @click="getPreview(detailsData.imageUrl)" />
+        </a-descriptions-item>
         <a-descriptions-item label="品牌介绍:">
           <div v-if="detailsData.brandIntroduce" v-html="detailsData.brandIntroduce"></div>
           <span v-else>--</span>
@@ -23,8 +23,8 @@
       </a-descriptions>
       <div class="btn-cont"><a-button id="productBrandDetail-modal-back" @click="isShow = false">返回列表</a-button></div>
     </div>
-    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible=false">
-      <img alt="example" style="width: 100%" :src="previewImage" />
+    <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @cancel="previewVisible=false">
+      <img alt="example" style="width: 100%;" :src="previewImage" />
     </a-modal>
   </a-modal>
 </template>
@@ -95,7 +95,8 @@ export default {
     }
     .productPic{
       cursor: pointer;
-      width: 100px;
+      max-width: 200px;
+      max-height: 200px;
       margin-right: 10px;
     }
     .btn-cont {

+ 11 - 2
src/views/productManagement/productBrand/editModal.vue

@@ -40,7 +40,6 @@
             id="productBrandEdit-imageUrl"
             v-model="form.imageUrl"
             ref="imageUrl"
-            :fileSize="0.25"
             @change="changeHomeImage"
             listType="picture-card" ></Upload>
           <span class="upload-desc">说明:图片比例1:1,尺寸为120*120px,可上传1张。</span>
@@ -81,7 +80,7 @@ export default {
   },
   computed: {
     modalTit () {
-      return (this.itemId ? '编辑' : '新增') + '产品品牌'
+      return (this.itemSn ? '编辑' : '新增') + '产品品牌'
     }
   },
   data () {
@@ -122,6 +121,7 @@ export default {
         if (res.status == 200) {
           const data = res.data
           this.form = Object.assign(this.form, data)
+          this.$refs.imageUrl.setFileList(data.imageUrl)
           this.$refs.editor.setHtml(res.data.brandIntroduce)
         } else {
           this.$refs.ruleForm.resetFields()
@@ -134,6 +134,7 @@ export default {
       _this.$refs.ruleForm.validate(valid => {
         if (valid) {
           const formData = JSON.parse(JSON.stringify(_this.form))
+          formData.id = undefined
           formData.brandSn = _this.itemSn ? _this.itemSn : undefined
           productBrandSave(formData).then(res => {
             if (res.status == 200) {
@@ -165,6 +166,14 @@ export default {
     isShow (newValue, oldValue) {
       if (!newValue) {
         this.$emit('close')
+        this.$refs.imageUrl.setFileList('')
+        this.$refs.editor.setHtml('')
+        this.$refs.ruleForm.resetFields()
+      }
+    },
+    itemSn (newValue, oldValue) {
+      if (this.isShow && newValue) {
+        this.getDetail()
       }
     }
   }

+ 9 - 3
src/views/productManagement/productBrand/list.vue

@@ -40,10 +40,11 @@
       :rowKey="(record) => record.id"
       :columns="columns"
       :data="loadData"
+      :scroll="{ y: tableHeight }"
       bordered>
       <!-- 产品图片 -->
-      <template slot="productPic" slot-scope="text, record">
-        <img :src="record.productPic" width="30" height="30" class="productPic" @click="lookPic(record.productPic)" />
+      <template slot="imageUrl" slot-scope="text, record">
+        <img :src="record.imageUrl" width="30" height="30" class="imageUrl" @click="lookPic(record.imageUrl)" />
       </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
@@ -87,6 +88,7 @@ export default {
   data () {
     return {
       sortCharList: dataList.sortCharList,
+      tableHeight: 0,
       queryParam: { //  查询条件
         brandName: '', //  品牌名称
         brandType: undefined,
@@ -96,7 +98,7 @@ export default {
       columns: [
         { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
         { title: '创建时间', dataIndex: 'createDate', width: 160, align: 'center' },
-        { title: '品牌图片', scopedSlots: { customRender: 'productPic' }, width: 140, align: 'center' },
+        { title: '品牌图片', scopedSlots: { customRender: 'imageUrl' }, width: 140, align: 'center' },
         { title: '品牌名称', dataIndex: 'brandName', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
         { title: '品牌分类', dataIndex: 'brandType', align: 'center', customRender: function (text) { return text || '--' } },
         { title: '排序字母', dataIndex: 'sortChar', width: 100, align: 'center', customRender: function (text) { return text || '--' } },
@@ -105,6 +107,9 @@ export default {
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
         this.disabled = true
+        if (this.tableHeight == 0) {
+          this.tableHeight = window.innerHeight - 380
+        }
         return productBrandList(Object.assign(parameter, this.queryParam)).then(res => {
           const data = res.data
           const no = (data.pageNo - 1) * data.pageSize
@@ -145,6 +150,7 @@ export default {
     // 查看图片
     lookPic (url) {
       this.nowPic = url
+      this.openPicModal = true
     },
     //  关闭弹框
     closeModal () {