信息公告-完善

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>

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>