优化图片页面

package.json

@@ -45,6 +45,7 @@
     "jsencrypt": "3.2.1",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
+    "save": "^2.5.0",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",

src/views/wjnft/brand/index.vue

@@ -162,7 +162,7 @@
     />
 
     <!-- 添加或修改入驻品牌对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body @close='handleCanCle'>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="标题" prop="name">
           <el-input v-model="form.name" placeholder="请输入公司名称" />
@@ -356,6 +356,10 @@ export default {
     this.getList();
   },
   methods: {
+    handleCanCle () {
+      this.cancel();
+    },
+
     /** 查询入驻品牌列表 */
     getList() {
       this.loading = true;
@@ -426,6 +430,7 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.imgList = [];
+      console.log(this.imgList);
       this.reset();
       const id = row.id || this.ids
       getBrand(id).then(response => {
@@ -437,6 +442,7 @@ export default {
             let obj = {}
             obj.url = items
             this.imgList.push(obj)
+            console.log(this.imgList);
           })
         }else{
           let t = this.form.picture
@@ -444,6 +450,7 @@ export default {
           obj.url = t
           this.imgList.push(obj)
         }
+
         this.open = true;
         this.title = "修改入驻品牌";
       });

src/views/wjnft/company/index.vue

@@ -145,7 +145,7 @@
     />
 
     <!-- 添加或修改公司对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body  @close='handleCanCle'>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入标题" />
@@ -232,6 +232,10 @@ export default {
     this.getList();
   },
   methods: {
+    handleCanCle () {
+     this.cancel();
+    },
+
     /** 查询公司列表 */
     getList() {
       this.loading = true;
@@ -308,16 +312,18 @@ export default {
         if (valid) {
           if (this.form.id != null) {
             console.log(this.form);
-            if(this.global.apiUrl === null){
-              this.$message.warning("请上传图片")
-            }else {
-
-              this.form.picture = this.global.apiUrl;
+            if(this.form.picture === null){
+              this.$message.warning("请上传图片");
+            } else {
+              if(this.global.apiUrl !== null){
+                this.form.picture = this.global.apiUrl;
+              }
               updateCompany(this.form).then(response => {
                 this.$modal.msgSuccess("修改成功");
                 this.open = false;
                 this.echo = false;
                 this.getList();
+                this.global.apiUrl = null;
               });
             }
           } else {

src/views/wjnft/shop/index.vue

@@ -158,7 +158,7 @@
           prop="identifier"
           align="center"
           label="标识">
-        <template scope="scope">
+        <template slot-scope="scope">
           {{ scope.row.identifier === 1 ?  '创作者': '' }}
           {{ scope.row.identifier === 2 ?  '商家': '' }}
         </template>

src/views/wjnft/us/index.vue

@@ -107,17 +107,17 @@
       </el-table-column>
       <el-table-column label="选择原因一" align="center" prop="choiceOne" min-width="120">
         <template slot-scope="scope">
-          <a :href="scope.row.choiceOne">{{scope.row.choiceOne}}</a>
+          <a :href="scope.row.choiceOne">{{scope.row.choiceOne | ellipsis }}</a>
         </template>
       </el-table-column>
       <el-table-column label="选择原因二" align="center" prop="choiceTwo" min-width="120">
         <template slot-scope="scope">
-          <a :href="scope.row.choiceTwo">{{scope.row.choiceTwo}}</a>
+          <a :href="scope.row.choiceTwo">{{scope.row.choiceTwo | ellipsis }}</a>
         </template>
       </el-table-column>
       <el-table-column label="选择原因三" align="center" prop="choiceThree" min-width="120">
         <template slot-scope="scope">
-          <a :href="scope.row.choiceThree">{{scope.row.choiceThree}}</a>
+          <a :href="scope.row.choiceThree">{{scope.row.choiceThree | ellipsis}}</a>
         </template>
       </el-table-column>
 <!--      <el-table-column label="创建时间" align="center" prop="createdTime" width="50">-->
@@ -160,7 +160,7 @@
     />
 
     <!-- 添加或修改关于我们对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body @close="handleCanCle">
       <el-form ref="form" :model="form" :rules="rules" label-width="130px">
         <el-form-item label="标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入标题" />
@@ -234,13 +234,20 @@
         </el-form-item>
 
         <el-form-item label="选择我们原因一" prop="choiceOne">
-          <el-input v-model="form.choiceOne" placeholder="请输入选择我们原因"/>
+          <el-input v-model="form.choiceOne" placeholder="请输入选择我们原因" type="textarea"
+                    resize="none"
+                    :autosize="{ minRows: 4, maxRows: 4 }"
+          />
         </el-form-item>
         <el-form-item label="选择我们原因二" prop="choiceTwo">
-          <el-input v-model="form.choiceTwo" placeholder="请输入选择我们原因"/>
+          <el-input v-model="form.choiceTwo" placeholder="请输入选择我们原因" type="textarea"
+                    resize="none"
+                    :autosize="{ minRows: 4, maxRows: 4 }"/>
         </el-form-item>
         <el-form-item label="选择我们原因三" prop="choiceThree">
-          <el-input v-model="form.choiceThree" placeholder="请输入选择我们原因"/>
+          <el-input v-model="form.choiceThree" placeholder="请输入选择我们原因" type="textarea"
+                    resize="none"
+                    :autosize="{ minRows: 4, maxRows: 4 }"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -346,6 +353,16 @@ export default {
   created() {
     this.getList();
   },
+  filters:{
+    ellipsis(value){
+      if (!value) return '';
+      if (value.length > 10) {
+        return value.slice(0,40) + '...'
+      }
+      return value
+    }
+  },
+
   computed: {
     headers() {
       return {
@@ -361,11 +378,17 @@ export default {
     }
   },
   methods: {
+    handleCanCle () {
+      this.srcList = [];
+      this.$refs.upload.clearFiles()
+      console.log(this.$refs.upload.clearFiles())
+      this.cancel();
+    },
     /** 查询关于我们列表 */
     getList() {
       this.loading = true;
       listUs(this.queryParams).then(response => {
-
+        console.log( response.rows);
         response.rows.forEach(item =>{
           let picture = item.pictureUrl;
 
@@ -396,6 +419,7 @@ export default {
     },
     // 取消按钮
     cancel() {
+      this.imgList = [];
       this.open = false;
       this.reset();
     },
@@ -438,7 +462,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
-      //console.log(this.usList )
+      console.log(this.usList )
       if(this.usList.length > 0){
         this.$message.warning("当前内容已添加，请修改需要改动的消息！");
       }else{
@@ -446,12 +470,16 @@ export default {
         this.title = "添加关于我们";
       }
 
+        // this.open = true;
+        // this.title = "添加关于我们";
+
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.imgList = [];
-      this.reset();
-      console.log(row)
+     // this.imgList = [];
+    //  console.log(this.imgList);
+     // this.reset();
+     // console.log(row)
       const id = row.id || this.ids
       getUs(id).then(response => {
         this.form = response.data;
@@ -469,6 +497,7 @@ export default {
           let obj = {}
           obj.url = t
           this.imgList.push(obj)
+          console.log(this.imgList);
         }
         this.open = true;
         this.title = "修改关于我们";