Merge branch 'dev' of http://122.51.230.86:3000/dianliang/lanan-system-vue into dev

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>
@@ -26,7 +27,11 @@
     </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,7 +43,11 @@
           <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)"
@@ -63,10 +72,11 @@
 <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},
+  components: {TruncatedText, BaseNoticeForm},
   props: {
     parentServer: {
       type: String,
@@ -132,7 +142,8 @@ export default {
         await removeNotice(ids)
         await this.getList()
         this.$modal.msgSuccess("删除成功")
-      }catch {}
+      } catch {
+      }
     },
     /** 推送按钮操作 */
     handlePush(id) {
@@ -143,5 +154,4 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
 </style>