🐛 修复作品集图片裁剪问题

components/common/portfolio/list.vue

@@ -2,28 +2,15 @@
   <div class="wrapper">
     <el-row class="row-cards row-deck" :gutter="20">
       <el-col :xs="24" :sm="12" :md="12" v-for="portfolio in portfolios.list" :key="portfolio.idPortfolio">
-        <el-col v-if="portfolio.headImgUrl" style="margin-bottom: 20px;">
+        <el-col style="margin-bottom: 20px;">
-          <el-card :body-style="{ padding: '20px' }">
+          <el-card>
             <el-col :span="12">
-              <el-image :src="portfolio.headImgUrl" style="width:96px;height: 96px;border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;" fit="cover"
+              <el-image :src="portfolio.headImgUrl"
-                        :preview-src-list="[portfolio.headImgUrl]"></el-image>
+                        style="width:96px;height: 96px;border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;"
-            </el-col>
+                        fit="cover"
-            <el-col :span="12" style="padding-top: 30px;text-align: right;">
+                        :preview-src-list="[portfolio.headImgUrl]">
-              <el-button @click="onRouter('portfolio', portfolio.idPortfolio)" round>阅读</el-button>
+                <div v-if="portfolio.headImgUrl" slot="error"
-            </el-col>
+                     style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
-            <el-col style="padding-top: 20px;font-size: 16px;line-height: 22px;font-weight: 500;margin-bottom: 4px;">
-              <span v-html="portfolio.portfolioTitle"></span>
-            </el-col>
-            <el-col style="padding-bottom: 20px;font-size: 14px;">
-              <span>{{ portfolio.articleNumber || 0 }} 篇文章</span>
-            </el-col>
-          </el-card>
-        </el-col>
-        <el-col v-else style="margin-bottom: 20px;">
-          <el-card :body-style="{ padding: '20px' }">
-            <el-col :span="12">
-              <el-image style="width:96px;height: 96px;border-radius: 10px;border: #f5f7fa solid 2px;">
-                <div slot="error" style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;">
                   无图片
                 </div>
               </el-image>
@@ -32,7 +19,7 @@
               <el-button @click="onRouter('portfolio', portfolio.idPortfolio)" round>阅读</el-button>
             </el-col>
             <el-col style="padding-top: 20px;font-size: 16px;line-height: 22px;font-weight: 500;margin-bottom: 4px;">
-              <span v-html="portfolio.portfolioTitle"></span>
+              <span class="portTitle" v-html="portfolio.portfolioTitle"></span>
             </el-col>
             <el-col style="padding-bottom: 20px;font-size: 14px;">
               <span>{{ portfolio.articleNumber || 0 }} 篇文章</span>
@@ -198,4 +185,13 @@ h3, .h3 {
   padding-right: 0.75rem;
   padding-left: 0.75rem;
 }
+
+.portTitle {
+  display: block;
+  /*border: 1px solid red;*/
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>

pages/portfolio/manager/_portfolio_id.vue

@@ -26,12 +26,17 @@
       <el-col>
         <el-col style="text-align: right;">
           <el-col>
-            <el-link rel="nofollow" @click="onRouter('post-portfolio',portfolio.idPortfolio)" :underline="false" class="text-default"
+            <el-link rel="nofollow" @click="onRouter('post-portfolio',portfolio.idPortfolio)" :underline="false"
+                     class="text-default"
                      style="margin-right: 1rem;">编辑
             </el-link>
-            <el-link rel="nofollow" @click="showBindArticleDialog(portfolio.idPortfolio)" :underline="false" class="text-default"
+            <el-link rel="nofollow" @click="showBindArticleDialog(portfolio.idPortfolio)" :underline="false"
+                     class="text-default"
                      style="margin-right: 1rem;">添加文章
             </el-link>
+            <el-link rel="nofollow" @click="handleDel" :underline="false"
+                     type="danger" style="margin-right: 1rem;">删除作品集
+            </el-link>
           </el-col>
         </el-col>
         <el-col>
@@ -55,66 +60,104 @@
 </template>
 
 <script>
-  import {mapState} from 'vuex';
+import {mapState} from 'vuex';
-  import PortfolioManagerList from "~/components/common/portfolio/manager/list";
+import PortfolioManagerList from "~/components/common/portfolio/manager/list";
 
-  export default {
+export default {
-    name: "PortfolioManager",
+  name: "PortfolioManager",
-    components: {
+  components: {
-      PortfolioManagerList
+    PortfolioManagerList
-    },
+  },
-    validate({params, store}) {
+  validate({params, store}) {
-      return params.portfolio_id && !isNaN(Number(params.portfolio_id))
+    return params.portfolio_id && !isNaN(Number(params.portfolio_id))
-    },
+  },
-    fetch() {
+  fetch() {
-      let {store, params, error} = this.$nuxt.context
+    let {store, params, error} = this.$nuxt.context
-      return Promise.all([
+    return Promise.all([
-        store
+      store
-          .dispatch('portfolio/fetchDetail', params)
+        .dispatch('portfolio/fetchDetail', params)
-          .catch(err => error({statusCode: 404}))
+        .catch(err => error({statusCode: 404}))
-      ])
+    ])
-    },
+  },
-    computed: {
+  computed: {
-      ...mapState({
+    ...mapState({
-        portfolio: state => state.portfolio.detail.data
+      portfolio: state => state.portfolio.detail.data
-      }),
+    }),
-      isAuthor() {
+    isAuthor() {
-        let account = this.$store.state.auth.user?.nickname;
+      let account = this.$store.state.auth.user?.nickname;
-        if (account) {
+      if (account) {
-          if (account === this.portfolio.portfolioAuthorName) {
+        if (account === this.portfolio.portfolioAuthorName) {
-            return true;
+          return true;
-          }
         }
-        return false;
       }
+      return false;
     },
-    methods: {
+    idPortfolio() {
-      onRouter(name, data) {
+      return this.$route.params.portfolio_id ? this.$route.params.portfolio_id : 0
-        if (name === 'article') {
+    }
-          this.$router.push({
+  },
-            path: data
+  methods: {
-          })
+    onRouter(name, data) {
-        } else if (name === 'user') {
+      if (name === 'article') {
-          this.$router.push(
-            {
-              path: '/user/' + data
-            }
-          )
-        } else {
-          this.$router.push(
-            {
-              path: '/portfolio/post/' + data
-            }
-          )
-        }
-      },
-      showBindArticleDialog(idPortfolio) {
         this.$router.push({
-          path: `/portfolio/manager/bind/${idPortfolio}`
+          path: data
-        });
+        })
+      } else if (name === 'user') {
+        this.$router.push(
+          {
+            path: '/user/' + data
+          }
+        )
+      } else {
+        this.$router.push(
+          {
+            path: '/portfolio/post/' + data
+          }
+        )
       }
+    },
+    showBindArticleDialog(idPortfolio) {
+      this.$router.push({
+        path: `/portfolio/manager/bind/${idPortfolio}`
+      });
+    },
+    handleDel() {
+      let _ts = this;
+      _ts.$confirm(`确定删除【${_ts.portfolio.portfolioTitle}】该作品集合集吗?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log(_ts.portfolio.articleNumber)
+        if (Number(_ts.portfolio.articleNumber) === 0) {
+          _ts.$axios.$delete('/api/portfolio/delete', {
+            params: {
+              idPortfolio: _ts.idPortfolio
+            }
+          }).then(function (res) {
+            if (res) {
+              _ts.$set(_ts, 'notificationFlag', false);
+              _ts.$router.push({
+                path: '/user/' + _ts.$store.state.auth.user?.account
+              })
+            }
+          })
+        } else {
+          _ts.$message({
+            type: 'error',
+            message: '请先删除文章'
+          });
+        }
+
+      }).catch(() => {
+        _ts.$message({
+          type: 'info',
+          message: '已取消'
+        });
+      });
     }
   }
+}
 </script>
 
 <style scoped>

pages/portfolio/post/_portfolio_id.vue

@@ -24,7 +24,7 @@
               <el-form-item class="text-right">
                 <el-button :loading="loading" @click="deletePortfolio" v-if="isEdit">删除</el-button>
                 <el-button :loading="loading" @click="updatePortfolio" v-if="isEdit">更新</el-button>
-                <el-button @click="updatePortfolio" v-else>提交</el-button>
+                <el-button @click="submitData" v-else>提交</el-button>
               </el-form-item>
             </el-form>
           </el-card>
@@ -37,7 +37,8 @@
                   :aspect-ratio="1"
                   :autoCrop="autoCrop"
                   :autoCropArea="1"
-                  :fixedNumber="[1,2]"
+                  fixed
+                  :fixedNumber="[1,1]"
                   :checkCrossOrigin="false"
                   :checkOrientation="false"
                   :img="headImgUrl"
@@ -264,7 +265,6 @@ export default {
       if (res && res.data && res.data.url) {
         let portfolio = _ts.portfolio;
         portfolio.headImgUrl = res.data.url;
-        // portfolio.headImgType = '0';
         _ts.$set(_ts, 'portfolio', portfolio);
         _ts.$set(_ts, 'headImgUrl', res.data.url);
       } else {
@@ -295,25 +295,58 @@ export default {
         // _ts.$refs.cropper?.replace(this.result);
       }
     },
-    async updatePortfolio() {
+    handleSubmitData() {
-      //headImgUrl
       let _ts = this;
-      // this.cropImage()
       _ts.$set(_ts, 'loading', true);
-      let id = _ts.idPortfolio;
       let portfolioDescription = _ts.contentEditor.getValue();
       let portfolioDescriptionHtml = _ts.contentEditor.getHTML();
       let data = _ts.portfolio;
+      data.portfolioDescription = portfolioDescription;
+      data.portfolioDescriptionHtml = portfolioDescriptionHtml;
+      data.headImgType = 0
+      // if (_ts.isEdit) {
+
+      //
+      // } else {
+      //   data.headImgUrl = _ts.headImgUrl
+      // }
+      if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
+        this.$message.error('请输入必填信息');
+        return false
+      }
+      return data
+    },
+    async submitData() {
+      let _ts = this
+      let data = this.handleSubmitData()
+      let id = _ts.idPortfolio;
+
+      data.headImgUrl = _ts.headImgUrl
+      let title = id ? '更新' : '添加';
+      _ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
+        if (res && res.message) {
+          _ts.$message.error(res.message);
+        } else {
+          _ts.$message({
+            type: 'success',
+            message: title + '成功!'
+          });
+          _ts.$set(_ts, 'notificationFlag', false);
+          _ts.$router.push({
+            path: '/portfolio/' + res.idPortfolio
+          })
+        }
+        _ts.$set(_ts, 'loading', false)
+      }).catch(error => _ts.$set(_ts, 'loading', false))
+
+    },
+    async updatePortfolio() {
+      let _ts = this
+      let data = this.handleSubmitData()
+      let id = _ts.idPortfolio;
+
       this.$refs.cropper.getCropData(img => {
         data.headImgUrl = img
-        data.portfolioDescription = portfolioDescription;
-        data.portfolioDescriptionHtml = portfolioDescriptionHtml;
-        // data.headImgUrl = _ts.headImgUrl
-        data.headImgType = '0';
-        if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
-          this.$message.error('请输入必填信息');
-          return false
-        }
         let title = id ? '更新' : '添加';
         _ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
           if (res && res.message) {