From a45dea9b944660a28550da065734a349afd005d3 Mon Sep 17 00:00:00 2001
From: xiaofajia <1665375861@qq.com>
Date: Thu, 10 Oct 2024 16:41:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=85=AC=E5=91=8A-=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../truncatedText/TruncatedText.vue           | 59 +++++++++++++++++++
 src/views/base/notice/BaseNotice.vue          | 54 ++++++++++-------
 2 files changed, 91 insertions(+), 22 deletions(-)
 create mode 100644 src/components/truncatedText/TruncatedText.vue

diff --git a/src/components/truncatedText/TruncatedText.vue b/src/components/truncatedText/TruncatedText.vue
new file mode 100644
index 0000000..f594ddf
--- /dev/null
+++ b/src/components/truncatedText/TruncatedText.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="long-text">
+    <div>{{ truncatedText }}</div>
+    <el-button type="text" @click="toggleShowAll" v-if="isExpanded">{{showAll?'收起':'展开'}}</el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    maxLength: {
+      type: Number,
+      default: 20
+    }
+  },
+  data() {
+    return {
+      showAll: false,
+      localMaxLength: this.maxLength,
+    }
+  },
+  computed: {
+    truncatedText() {
+      if (this.text.length <= this.localMaxLength) {
+        return this.text;
+      }
+      return `${this.text.substring(0, this.maxLength)}...`;
+    },
+    isExpanded() {
+      return this.text.length > this.maxLength;
+    }
+  },
+  methods: {
+    toggleShowAll() {
+      if (this.showAll) {   //true->false
+        this.localMaxLength = this.maxLength;
+        ;
+      }
+      if (!this.showAll) {
+        this.localMaxLength = Infinity;
+      }
+      this.showAll = !this.showAll
+    }
+  }
+}
+</script>
+
+<style scoped>
+.long-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+</style>
diff --git a/src/views/base/notice/BaseNotice.vue b/src/views/base/notice/BaseNotice.vue
index f041058..9bc5b9a 100644
--- a/src/views/base/notice/BaseNotice.vue
+++ b/src/views/base/notice/BaseNotice.vue
@@ -6,7 +6,8 @@
       </el-form-item>
       <el-form-item label="公告状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="公告状态" clearable>
-          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="parseInt(dict.value)" :label="dict.label"
+          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="parseInt(dict.value)"
+                     :label="dict.label"
                      :value="parseInt(dict.value)"/>
         </el-select>
       </el-form-item>
@@ -19,14 +20,18 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleUpdate"
-                   >新增
+        >新增
         </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="noticeList">
-      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="序号" align="center" width="80">
+        <template scope="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="公告标题" align="center" prop="title" :show-overflow-tooltip="true"/>
       <el-table-column label="公告类型" align="center" prop="type" width="100">
         <template v-slot="scope">
@@ -38,18 +43,22 @@
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
         </template>
       </el-table-column>
-      <el-table-column label="内容" align="center" prop="content" :show-overflow-tooltip="true" />
+      <el-table-column label="内容" align="center" prop="content">
+        <template slot-scope="scope">
+          <TruncatedText :text="scope.row.content"/>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template v-slot="scope">
           <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     >修改
+          >修改
           </el-button>
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     >删除
+          >删除
           </el-button>
-<!--          <el-button size="mini" type="text" @click="handlePush(scope.row.id)"-->
-<!--                     >推送-->
-<!--          </el-button>-->
+          <!--          <el-button size="mini" type="text" @click="handlePush(scope.row.id)"-->
+          <!--                     >推送-->
+          <!--          </el-button>-->
         </template>
       </el-table-column>
     </el-table>
@@ -63,24 +72,25 @@
 <script>
 import {pageNotice, removeNotice} from '@/api/base/notice'
 import BaseNoticeForm from "@/views/base/notice/form/BaseNoticeForm.vue";
+import TruncatedText from "@/components/truncatedText/TruncatedText.vue";
 
 export default {
   name: "BaseNotice",
-  components: {BaseNoticeForm},
-  props:{
-    parentServer:{
+  components: {TruncatedText, BaseNoticeForm},
+  props: {
+    parentServer: {
       type: String,
       default: null,
       required: true,
     },
-    server:{
+    server: {
       type: String,
       default: null,
       required: true
     }
   },
-  data(){
-    return{
+  data() {
+    return {
       queryParams: {
         pageNo: 1,
         pageSize: 10,
@@ -98,20 +108,20 @@ export default {
   mounted() {
     this.getList();
   },
-  methods:{
+  methods: {
     /** 查询公告列表 */
-    async getList(){
+    async getList() {
       this.loading = true
       try {
         const res = await pageNotice(this.queryParams)
         this.noticeList = res.data.records
         this.total = res.data.total
-      }finally {
+      } finally {
         this.loading = false
       }
     },
     /** 搜索按钮操作 */
-    handleQuery(){
+    handleQuery() {
       this.queryParams.pageNo = 1
       this.getList();
     },
@@ -132,10 +142,11 @@ export default {
         await removeNotice(ids)
         await this.getList()
         this.$modal.msgSuccess("删除成功")
-      }catch {}
+      } catch {
+      }
     },
     /** 推送按钮操作 */
-    handlePush(id){
+    handlePush(id) {
 
     }
   }
@@ -143,5 +154,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
 </style>