From 2718e47db2df7710326d97a06e7b8efff404804a Mon Sep 17 00:00:00 2001
From: caoyizhong <1270296080@qq.com>
Date: Fri, 13 May 2022 12:01:03 +0800
Subject: [PATCH] =?UTF-8?q?PC=E5=85=AC=E5=8F=B8=E5=85=B3=E4=BA=8E=E6=88=91?=
 =?UTF-8?q?=E4=BB=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/wjnft/brand/index.vue |  50 ++++-
 src/views/wjnft/us/index.vue    | 372 +++++++++++++++++++++++++-------
 2 files changed, 330 insertions(+), 92 deletions(-)

diff --git a/src/views/wjnft/brand/index.vue b/src/views/wjnft/brand/index.vue
index b9d1f08..e59b3f8 100644
--- a/src/views/wjnft/brand/index.vue
+++ b/src/views/wjnft/brand/index.vue
@@ -446,7 +446,6 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
-            console.log(this.pictureUrl);
             let url = "";
             if(this.pictureUrl.length > 0){
               this.imgList.forEach(item =>{
@@ -455,16 +454,36 @@ export default {
                 }else{
                   url = url + item.url+',';
                 }
-
-              })
+              });
               if(this.pictureUrl.length > 1 ){
                 url = url + this.pictureUrl.join(",")
+              }else{
+                url = url + this.pictureUrl[0];
               }
-              url = url + this.pictureUrl[0];
+              this.form.picture = url;
+            }else {
+              this.imgList.forEach(item =>{
+                if(url === ""){
+                  if(this.imgList.length > 0){
+                    url = item.url+',';
+                  }else{
+                    url = item.url;
+                  }
+                }else{
+                  let c = this.imgList[this.imgList.length-1];
+                  //console.log(c);
+                  if(c.url === item.url){
+                    //console.log(c.url === item.url)
+                    url = url + item.url;
+                  }else{
+                    url = url + item.url+',';
+                  }
+
+                }
+              });
               this.form.picture = url;
             }
-            console.log(this.imgList);
-            console.log(this.form)
+            console.log(this.form);
             updateBrand(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
@@ -531,12 +550,21 @@ export default {
       this.pictureUrl.push( res.url);
       return this.imgList;
     },
+    //删除图片
     handleRemove(file) {
-      console.log(file);
-      //this.$refs.upload.clearFiles()
-      const findex = this.imgList.map(f => f.url).indexOf(file.url);
-      if(findex > -1) {
-        this.imgList.splice(findex, 1);
+      if(file.name !== undefined){
+        console.log(this.$refs.upload.uploadFiles);
+        // this.$refs.upload.clearFiles()
+        let n =  this.$refs.upload.uploadFiles;
+        const finde = n.map(f => f.name).indexOf(file.name);
+        if(finde > -1) {
+          n.splice(finde, 1);
+        }
+      }else{
+        const findex = this.imgList.map(f => f.url).indexOf(file.url);
+        if(findex > -1) {
+          this.imgList.splice(findex, 1);
+        }
       }
 
     },
diff --git a/src/views/wjnft/us/index.vue b/src/views/wjnft/us/index.vue
index 50c9cdd..f3371ba 100644
--- a/src/views/wjnft/us/index.vue
+++ b/src/views/wjnft/us/index.vue
@@ -10,39 +10,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="简介" prop="introduce">
-        <el-input
-          v-model="queryParams.introduce"
-          placeholder="请输入简介"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createdTime">
-        <el-date-picker clearable size="small"
-          v-model="queryParams.createdTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="选择创建时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="修改时间" prop="updatedTime">
-        <el-date-picker clearable size="small"
-          v-model="queryParams.updatedTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="选择修改时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="删除时间" prop="deletedTime">
-        <el-date-picker clearable size="small"
-          v-model="queryParams.deletedTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="选择删除时间">
-        </el-date-picker>
-      </el-form-item>
+
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -82,25 +50,51 @@
           v-hasPermi="['wjnft:us:remove']"
         >删除</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['wjnft:us:export']"
-        >导出</el-button>
-      </el-col>
+<!--      <el-col :span="1.5">-->
+<!--        <el-button-->
+<!--          type="warning"-->
+<!--          plain-->
+<!--          icon="el-icon-download"-->
+<!--          size="mini"-->
+<!--          @click="handleExport"-->
+<!--          v-hasPermi="['wjnft:us:export']"-->
+<!--        >导出</el-button>-->
+<!--      </el-col>-->
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="usList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" align="center" type="index" width="50"/>
       <el-table-column label="标题" align="center" prop="title" />
       <el-table-column label="简介" align="center" prop="introduce" />
-      <el-table-column label="内容" align="center" prop="content" />
-      <el-table-column label="图片路径" align="center" prop="pictureUrl" />
+      <el-table-column label="内容" align="center" prop="content" >
+        <template slot-scope="scope">
+          <div class="ql-container ql-snow">
+            <div class="ql-editor" v-html="scope.row.content" style="height:100px;width:100%;overflow:auto" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="图片" align="center" prop="pictureUrl" >
+        <template slot-scope="scope">
+          <div class="demo-image">
+            <div class="block">
+              <el-image
+                  style="
+            width: 50px;
+            height: 51px;
+            border-radius: 6px;
+            z-index: 2;
+          "
+                  :src="scope.row.pictureUrl"
+                  :preview-src-list="srcList"
+              >
+              </el-image>
+            </div>
+          </div>
+        </template>
+
+      </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createdTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
@@ -111,11 +105,7 @@
           <span>{{ parseTime(scope.row.updatedTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="删除时间" align="center" prop="deletedTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.deletedTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
+
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -135,7 +125,7 @@
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -147,9 +137,6 @@
     <!-- 添加或修改关于我们对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="id" prop="id">
-          <el-input v-model="form.id" placeholder="请输入id" />
-        </el-form-item>
         <el-form-item label="标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入标题" />
         </el-form-item>
@@ -159,33 +146,61 @@
         <el-form-item label="内容">
           <editor v-model="form.content" :min-height="192"/>
         </el-form-item>
-        <el-form-item label="图片路径">
-          <imageUpload v-model="form.pictureUrl"/>
-        </el-form-item>
-        <el-form-item label="创建时间" prop="createdTime">
-          <el-date-picker clearable size="small"
-            v-model="form.createdTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择创建时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="修改时间" prop="updatedTime">
-          <el-date-picker clearable size="small"
-            v-model="form.updatedTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择修改时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="删除时间" prop="deletedTime">
-          <el-date-picker clearable size="small"
-            v-model="form.deletedTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="选择删除时间">
-          </el-date-picker>
+        <el-form-item label="选择图片">
+<!--          <imageUpload v-model="form.pictureUrl"/>-->
+          <div>
+            <el-upload
+                ref="upload"
+                :action="action"
+                :headers="headers"
+                :limit="3"
+                :on-exceed="handleExceed"
+                list-type="picture-card"
+                :on-success="handleSuccess"
+                :auto-upload="true"
+                :before-upload="beforeUpload"
+                :file-list="imgList"
+            >
+
+              <i slot="default" class="el-icon-plus"></i>
+              <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"></i>
+                  </span>
+                  <span
+                      v-if="!disabled"
+                      class="el-upload-list__item-delete"
+                      @click="handleDownload(file)"
+                  >
+                    <i class="el-icon-download"></i>
+                  </span>
+                  <span
+                      v-if="!disabled"
+                      class="el-upload-list__item-delete"
+                      @click="handleRemove(file)"
+                  >
+                    <i class="el-icon-delete"></i>
+                  </span>
+              </span>
+              </div>
+            </el-upload>
+
+          </div>
+          <span> 上传文件只能是<b style="color: #C03639">png，jpeg，jpg</b >格式,大小不能超过<b style="color: #C03639">3M</b> </span>
+          <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="">
+          </el-dialog>
+
         </el-form-item>
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -197,11 +212,42 @@
 
 <script>
 import { listUs, getUs, delUs, addUs, updateUs } from "@/api/wjnft/us";
+import {getToken} from "@/utils/auth";
 
+const client = 1;
 export default {
   name: "Us",
+  props:{
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 3,
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["png", "jpg", "jpeg"],
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    },
+
+
+  },
   data() {
     return {
+      pictures:[],
+      //文件上传
+      srcList: [],
+      pictureUrl:[],
+      dialogImageUrl: '',
+      dialogVisible: false,
+      //
+      disabled: false,
+      imgList:[],
+
       // 遮罩层
       loading: true,
       // 选中数组
@@ -242,11 +288,49 @@ export default {
   created() {
     this.getList();
   },
+  computed: {
+    headers() {
+      return {
+        Authorization: "Bearer " + getToken()
+      }
+    },
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+    action() {
+      return process.env.VUE_APP_BASE_API + "/wjnft/oss/upload/" + client
+    }
+  },
   methods: {
     /** 查询关于我们列表 */
     getList() {
       this.loading = true;
       listUs(this.queryParams).then(response => {
+
+        response.rows.forEach(item =>{
+          let picture = item.pictureUrl;
+
+          if(picture.search(",") != -1){
+           // console.log(item.pictureUrl)
+            let e = picture.split(",");
+            console.log(e)
+            e.forEach( items => {
+              console.log(items)
+              if(items !== undefined || items !== ' '){
+                item.pictureUrl = items;
+                this.srcList.push(items);
+              }
+
+             // console.log(this.srcList)
+            })
+          }else{
+            item.pictureUrl = picture;
+            this.srcList.push(picture);
+          }
+
+        });
+
         this.usList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -259,6 +343,7 @@ export default {
     },
     // 表单重置
     reset() {
+      this.imgList = [];
       this.form = {
         id: null,
         title: null,
@@ -295,10 +380,27 @@ export default {
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
+      this.imgList = [];
       this.reset();
+      console.log(row)
       const id = row.id || this.ids
       getUs(id).then(response => {
         this.form = response.data;
+
+        let picture = this.form.pictureUrl;
+        if(picture.search(",") != -1){
+          let  e = picture.split(",");
+          e.forEach( items => {
+            let obj = {}
+            obj.url = items
+            this.imgList.push(obj)
+          })
+        }else{
+          let t = this.form.pictureUrl
+          let obj = {}
+          obj.url = t
+          this.imgList.push(obj)
+        }
         this.open = true;
         this.title = "修改关于我们";
       });
@@ -308,12 +410,58 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
+            //console.log(this.pictureUrl);
+            let url = "";
+            if(this.pictureUrl.length > 0){
+              this.imgList.forEach(item =>{
+                if(url === ""){
+                    url = item.url+',';
+                }else{
+                  url = url + item.url+',';
+                }
+              });
+              if(this.pictureUrl.length > 1 ){
+                url = url + this.pictureUrl.join(",")
+              }else{
+                url = url + this.pictureUrl[0];
+              }
+              this.form.pictureUrl = url;
+            }else {
+              this.imgList.forEach(item =>{
+                if(url === ""){
+                  if(this.imgList.length > 0){
+                    url = item.url+',';
+                  }else{
+                    url = item.url;
+                  }
+                }else{
+                  let c = this.imgList[this.imgList.length-1];
+                  //console.log(c);
+                  if(c.url === item.url){
+                    //console.log(c.url === item.url)
+                    url = url + item.url;
+                  }else{
+                    url = url + item.url+',';
+                  }
+
+                }
+              });
+              this.form.pictureUrl = url;
+            }
+            console.log(this.form);
             updateUs(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
+
+              if(this.pictureUrl.length > 1){
+                this.form.pictureUrl = this.pictureUrl.join(",");
+              }else{
+                this.form.pictureUrl = this.pictureUrl[0];
+              }
+            //console.log(this.form);
             addUs(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -338,7 +486,69 @@ export default {
       this.download('wjnft/us/export', {
         ...this.queryParams
       }, `us_${new Date().getTime()}.xlsx`)
-    }
+    },
+    //  上传文件时触发
+    beforeUpload(file) {
+      //console.log(file)
+      let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
+      const extension = testmsg === "png";
+      const extension1 = testmsg === "jpg";
+      const extension2 = testmsg === "jpeg";
+      const isLt32M = file.size / 1024 / 1024 < 3;
+      if (!extension && !extension2 && !extension1) {
+        this.$message.warning('上传文件只能是png,jpeg,jpg格式！');
+      }
+      if (!isLt32M) {
+        this.$message.warning('上传文件大小不能超过3MB！');
+      }
+      return (extension || extension2 || extension1) && isLt32M;
+
+    },
+    // 上传的提示
+    handleExceed(files, fileList) {
+      this.$message.warning('当前只允许上传三个文件');
+    },
+    //上传成功
+    handleSuccess(res, file) {
+
+      console.log( res,file );
+      //图片路径返回给父组件
+      // console.log(res);
+      this.pictureUrl.push( res.url);
+      //this.imgList.push({name:file.name,url:res.url });
+       return  this.imgList;
+    },
+    //删除照片
+    handleRemove(file) {
+      if(file.name !== undefined){
+        console.log(this.$refs.upload.uploadFiles);
+        // this.$refs.upload.clearFiles()
+        let n =  this.$refs.upload.uploadFiles;
+        const finde = n.map(f => f.name).indexOf(file.name);
+        if(finde > -1) {
+          n.splice(finde, 1);
+        }
+      }else{
+        const findex = this.imgList.map(f => f.url).indexOf(file.url);
+        if(findex > -1) {
+          this.imgList.splice(findex, 1);
+        }
+      }
+      //this.$refs.upload.clearFiles()
+
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    handleDownload(file) {
+      console.log(file);
+    },
+
+
+
+
+
   }
 };
 </script>