Merge remote-tracking branch 'origin/master'

src/components/MultUpload.vue

@@ -0,0 +1,189 @@
+<template>
+  <div>
+    <el-upload
+      v-loading.fullscreen.lock="mark"
+      ref="upload"
+      :action="newUrl"
+      :headers="myHeaders"
+      list-type="picture-card"
+      :multiple="true"
+      :auto-upload="false"
+      :limit="limit"
+      :file-list="imgList"
+      :on-success="handleAvatarSuccess"
+      :on-error="handleError"
+      :on-progress="onProgress"
+      :disabled="limit <= value.length"
+    >
+      <i slot="default" class="el-icon-plus" />
+      <div slot="file" slot-scope="{ file }">
+        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+        <span class="el-upload-list__item-actions">
+          <span
+            class="el-upload-list__item-preview"
+            @click="handlePictureCardPreview(file)"
+          >
+            <i class="el-icon-zoom-in" />
+          </span>
+          <!-- <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="handleDownload(file)"
+          >
+            <i class="el-icon-download" />
+          </span> -->
+          <span
+            v-if="!disabled"
+            class="el-upload-list__item-delete"
+            @click="handleRemove(file)"
+          >
+            <i class="el-icon-delete" />
+          </span>
+        </span>
+      </div>
+    </el-upload>
+      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
+
+    <el-dialog :visible.sync="dialogVisible" :modal="false">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+    <!-- <el-button type="primary" >
+      指令方式
+    </el-button> -->
+  </div>
+</template>
+
+<script>
+import { UPLOAD_URL } from '@/const/urlKey';
+import { getToken } from '@/utils/auth';
+
+export default {
+  name: 'Upload',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    limit: {
+      type: Number,
+      default: 1
+    },
+    params: {
+      type: String,
+      default: ''
+    },
+    uploadUrl: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      mark: false,
+      url: UPLOAD_URL,
+      dialogImageUrl: '',
+      dialogVisible: false,
+      disabled: false,
+      myHeaders: {
+        authorization: 'Bearer swagger-ui',
+        token: getToken()
+      },
+      imgList: this.value,
+      tmp: []
+    };
+  },
+
+  computed: {
+    newUrl() {
+      const params = this.params;
+      const url = this.uploadUrl;
+      let baseUrl = UPLOAD_URL;
+      if (url !== '') {
+        baseUrl = url;
+      }
+      if (params === '') {
+        return baseUrl;
+      } else {
+        return baseUrl + `?${params}`;
+      }
+    }
+  },
+
+  watch: {
+    value: {
+      handler(val) {
+        // if (this.imgList.length < val.length) {
+        this.imgList = val;
+        console.log(this.imgList);
+        // }
+      },
+      immediate: true
+    }
+  },
+
+  methods: {
+    submitUpload() {
+      this.$refs.upload.submit();
+    },
+    onProgress() {
+      // this.moduleark = true;
+    },
+    handleError() {
+      this.mark = false;
+      this.$error('上传失败，请稍后重试...');
+    },
+    handleAvatarSuccess(res, file, fileList) {
+      if (file.response.code !== 200) {
+        this.$refs.upload.clearFiles();
+        this.$message.error('上传失败，请稍后再试~');
+        this.$emit('input', []);
+        return false;
+      }
+      const result =
+        fileList.length > 0
+          ? fileList.map(x => ({
+              name: x.response ? x.response.data.filename : x.name,
+              url: x.response ? x.response.data.fullPath : x.url,
+              size: x.response ? x.response.data.size : x.size
+            }))
+          : [];
+      this.$nextTick(() => {
+        this.$emit('input', result);
+        this.mark = false;
+      });
+    },
+    // handleChange(file, fileList) {
+    //   if (file.response) {
+    //     // this.imgList = this.tmp
+    //   }
+    //   console.log(file)
+    //   console.log(fileList)
+    //   // const result = fileList.length > 0 ? fileList.map(x => ({
+    //   //   name: x.name,
+    //   //   url: x.response.data.path
+    //   //   // url: x.url
+    //   // })) : []
+    //   // this.imgList = result
+    //   // const result = this.tmp
+    //   // this.imgList = JSON.parse(JSON.stringify(this.tmp))
+    // },
+    handleRemove(file, fileList) {
+      const result = this.imgList.filter(x => x.name !== file.name);
+      this.$emit('input', result);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page-select {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 20px;
+}
+</style>

src/components/index.js

@@ -7,6 +7,7 @@ import BaseTooltip from './BaseTooltip.vue';
 import Breadcrumb from './Breadcrumb.vue';
 import DataSelect from './DataSelect.vue';
 import Hamburger from './Hamburger.vue';
+import MultUpload from './MultUpload.vue';
 import RichText from './RichText.vue';
 import SvgIcon from './SvgIcon.vue';
 import Upload from './Upload.vue';
@@ -19,6 +20,7 @@ Vue.component('BaseTooltip', BaseTooltip);
 Vue.component('Breadcrumb', Breadcrumb);
 Vue.component('DataSelect', DataSelect);
 Vue.component('Hamburger', Hamburger);
+Vue.component('MultUpload', MultUpload);
 Vue.component('RichText', RichText);
 Vue.component('SvgIcon', SvgIcon);
 Vue.component('Upload', Upload);

src/views/baseManagement/bannerManagement/modal/ItemModal.vue

@@ -64,6 +64,14 @@ export default {
   },
 
   data() {
+   const checkurl = (rule, value, callback) => {
+        const pattern = /http[s]{0,1}:\/\/([\w.]+\/?)\S*/
+        if (pattern.test(value)) {
+          callback();
+        }
+        callback(new Error('请以http://或者https://'))
+      };
+
     return {
       modal: true,
 
@@ -87,8 +95,8 @@ export default {
             message: '请上传图片',
             trigger: 'change'
           }
-        ]
-        // link: [{ required: true, message: '请输入链接地址', trigger: 'change' }]
+        ],
+        link: [{ required: true, message: '请输入链接地址', trigger: 'change' },{ validator: checkUrl, trigger: 'blur' }]
       },
 
       typeOptions: []

src/views/photoManagement/imageGoodsManagement/index.vue

@@ -48,7 +48,7 @@ export default {
         },
         {
           key: 'listPreview',
-          name: '图片',
+          name: '列表缩略图',
           minWidth: this.$col.b,
           render: (h, { row }) => {
             if (!row.listPreview) {
@@ -73,6 +73,32 @@ export default {
           }
         },
         {
+          key: 'detailPreview',
+          name: '详情缩略图',
+          minWidth: this.$col.b,
+          render: (h, { row }) => {
+            if (!row.detailPreview) {
+              return h('span', '图片正在处理中请稍等...');
+            }
+            return h('img', {
+              style: {
+                width: '160px',
+                height: '90px'
+              },
+              class: 'pre-img',
+              attrs: {
+                src: row.detailPreview
+              },
+              on: {
+                click: () =>
+                  this.$AdvanceViewImageModal({
+                    items: [{ src: row.detailPreview }]
+                  })
+              }
+            });
+          }
+        },
+        {
           key: 'createAt',
           name: '上传时间',
           width: this.$col.b

src/views/photoManagement/photoVerifyManagement/index.vue

@@ -43,9 +43,10 @@ export default {
               }`
             )
         },
+        
         {
           key: 'listPreview',
-          name: '图片',
+          name: '列表缩略图',
           minWidth: this.$col.b,
           render: (h, { row }) => {
             if (!row.listPreview) {
@@ -70,6 +71,32 @@ export default {
           }
         },
         {
+          key: 'detailPreview',
+          name: '详情缩略图',
+          minWidth: this.$col.b,
+          render: (h, { row }) => {
+            if (!row.detailPreview) {
+              return h('span', '图片正在处理中请稍等...');
+            }
+            return h('img', {
+              style: {
+                width: '160px',
+                height: '90px'
+              },
+              class: 'pre-img',
+              attrs: {
+                src: row.detailPreview
+              },
+              on: {
+                click: () =>
+                  this.$AdvanceViewImageModal({
+                    items: [{ src: row.detailPreview }]
+                  })
+              }
+            });
+          }
+        },
+        {
           key: 'createAt',
           name: '上传时间',
           width: this.$col.b

src/views/photographerManagement/photoVerify/index.vue

@@ -47,20 +47,21 @@ export default {
               }`
             )
         },
+        
         {
           key: 'listPreview',
-          name: '图片',
+          name: '列表缩略图',
           minWidth: this.$col.b,
           render: (h, { row }) => {
             if (!row.listPreview) {
               return h('span', '图片正在处理中请稍等...');
             }
             return h('img', {
-              class: 'pre-img',
               style: {
                 width: '160px',
                 height: '90px'
               },
+              class: 'pre-img',
               attrs: {
                 src: row.listPreview
               },
@@ -74,6 +75,32 @@ export default {
           }
         },
         {
+          key: 'detailPreview',
+          name: '详情缩略图',
+          minWidth: this.$col.b,
+          render: (h, { row }) => {
+            if (!row.detailPreview) {
+              return h('span', '图片正在处理中请稍等...');
+            }
+            return h('img', {
+              style: {
+                width: '160px',
+                height: '90px'
+              },
+              class: 'pre-img',
+              attrs: {
+                src: row.detailPreview
+              },
+              on: {
+                click: () =>
+                  this.$AdvanceViewImageModal({
+                    items: [{ src: row.detailPreview }]
+                  })
+              }
+            });
+          }
+        },
+        {
           key: 'createAt',
           name: '上传时间',
           width: this.$col.b

src/views/photographerManagement/photoVerify/modal/ItemModal.vue

@@ -11,13 +11,19 @@
     "
   >
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-      <el-form-item label="图片" prop="urls">
+      <el-form-item label="图片" prop="urls" required>
+        <!-- <mult-upload
+          v-model="form.urls"
+          :uploadUrl="$upload('/yxl-back-end/framework/oss/minio/upload')"
+          :limit="10"
+          params="prefix="
+        /> -->
         <upload
           v-model="form.urls"
           :uploadUrl="$upload('/yxl-back-end/framework/oss/minio/upload')"
           :limit="10"
           params="prefix="
-        />
+        />        
       </el-form-item>
       <el-form-item label="关联场景" prop="kindergartenId">
         <SceneSelect v-model="form.kindergartenId" />