新增跳转功能

src/views/bpm/message/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="ele-body">
-
     <el-card shadow="never">
       <div class="filter-container">
         <el-form
@@ -24,8 +23,7 @@
               </el-form-item>
             </el-col>
 
-            <el-col
-              v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
+            <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
               <el-form-item label="发送时间：" prop="createTime">
                 <el-date-picker
                   v-model="params.createTime"
@@ -39,7 +37,9 @@
                 />
               </el-form-item>
             </el-col>
-            <el-col v-bind="styleResponsive ? { lg: 12, md: 24 } : { span: 12 }">
+            <el-col
+              v-bind="styleResponsive ? { lg: 12, md: 24 } : { span: 12 }"
+            >
               <div class="ele-form-actions">
                 <el-button
                   type="primary"
@@ -56,9 +56,14 @@
         </el-form>
       </div>
       <ele-pro-table ref="table" :columns="columns" :datasource="datasource">
+        <template v-slot:templateContent="{ row }">
+          <el-link type="primary" :underline="false" @click="goDetail(row)">
+            {{ row.templateContent }}
+          </el-link>
+        </template>
+
         <!-- 操作列 -->
         <template v-slot:action="{ row }">
-
           <el-link
             type="primary"
             :underline="false"
@@ -72,151 +77,156 @@
             type="primary"
             :underline="false"
             icon="el-icon-view"
-            v-if="row.formPath"            
-            @click="handleAddOrEdit(row,row.formPath)"
+            v-if="row.formPath"
+            @click="handleAddOrEdit(row, row.formPath)"
           >
             处理
           </el-link>
-        
         </template>
-        <template v-slot:readStatus="{row}">
+        <template v-slot:readStatus="{ row }">
           <el-tag v-if="row.readStatus" type="success">{{ '已读' }}</el-tag>
           <el-tag v-else type="danger">{{ '未读' }}</el-tag>
-
         </template>
       </ele-pro-table>
     </el-card>
   </div>
 </template>
 <script>
+  import {
+    notifyMessagePageAPI,
+    updateNotifyMessageReadByIdAPI
+  } from '@/api/bpm/task';
+  import { mapGetters } from 'vuex';
 
-import {notifyMessagePageAPI, updateNotifyMessageReadByIdAPI} from "@/api/bpm/task";
-import {mapGetters} from "vuex";
-
-
-export default {
-  data() {
-    return {
-      addOrEditDialogFlag: false,
-      params: {
-        createTime: null,
-        readStatus: null,
-      },
-      columns: [
-        {
-          columnKey: 'index',
-          label: '序号',
-          type: 'index',
-          width: 55,
-          align: 'center',
-          showOverflowTooltip: true,
-          fixed: 'left'
+  export default {
+    data() {
+      return {
+        addOrEditDialogFlag: false,
+        params: {
+          createTime: null,
+          readStatus: null
         },
+        columns: [
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
 
-        {
-          prop: 'templateContent',
-          label: '消息',
-          minWidth: '250',
-        },
-        {
-          prop: 'readStatus',
-          label: '状态',
-          width: '80',
-          align: "center",
-          slot:'readStatus',
-        },
-        {
-          prop: 'readTime',
-          label: '阅读时间',
-          width: '180',
-          align: "center",
-          showOverflowTooltip: true,
-        },
-        {
-          prop: 'templateNickname',
-          label: '发送人',
-          width: '150',
-          align: "center",
-        },
-        {
-          prop: 'createTime',
-          label: '发送时间',
-         width: '180',
-          align: "center",
-          showOverflowTooltip: true,
-        },
-        {
-          columnKey: 'action',
-          label: '操作',
-          width: 150,
-          align: 'center',
-          slot: 'action',
-          fixed: 'right'
-        }
-      ],
-      searchForm: {},
-      tableData: [],
-      size: 10,
-      page: 1,
-      total: 0
-    };
-  },
-  computed: {
-    ...mapGetters(['user']),
-    // 是否开启响应式布局
-    styleResponsive() {
-      return this.$store.state.theme.styleResponsive;
-    }
-  },
-  methods: {
-    //新增或修改模板
-    async handleAddOrEdit(row,formPath) {
-      await updateNotifyMessageReadByIdAPI([row.id]);
-      if(formPath){
-        window.history.pushState(null, '', formPath);
+          {
+            prop: 'templateContent',
+            label: '消息',
+            minWidth: '250',
+            slot: 'templateContent'
+          },
+          {
+            prop: 'readStatus',
+            label: '状态',
+            width: '80',
+            align: 'center',
+            slot: 'readStatus'
+          },
+          {
+            prop: 'readTime',
+            label: '阅读时间',
+            width: '180',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            prop: 'templateNickname',
+            label: '发送人',
+            width: '150',
+            align: 'center'
+          },
+          {
+            prop: 'createTime',
+            label: '发送时间',
+            width: '180',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 150,
+            align: 'center',
+            slot: 'action',
+            fixed: 'right'
+          }
+        ],
+        searchForm: {},
+        tableData: [],
+        size: 10,
+        page: 1,
+        total: 0
+      };
+    },
+    computed: {
+      ...mapGetters(['user']),
+      // 是否开启响应式布局
+      styleResponsive() {
+        return this.$store.state.theme.styleResponsive;
       }
-      this.$refs.table.reload()
     },
-    reload(type) {
-      if (type == 'reset') {
-        this.params = {
-          createTime: null,
-          readStatus: null,
-
+    methods: {
+      //新增或修改模板
+      async handleAddOrEdit(row, formPath) {
+        await updateNotifyMessageReadByIdAPI([row.id]);
+        if (formPath) {
+          window.history.pushState(null, '', formPath);
         }
+        this.$refs.table.reload();
+      },
+      reload(type) {
+        if (type == 'reset') {
+          this.params = {
+            createTime: null,
+            readStatus: null
+          };
+        }
+        this.$refs.table.reload({ page: 1, where: this.params });
+      },
+
+      goDetail(row) {
+        console.log('row', row.formPath);
+        this.$router.push(`${row.formPath}`);
+      },
+
+      datasource({ page, where, limit, ...row }) {
+        return notifyMessagePageAPI({
+          ...where,
+          pageNum: page,
+          size: limit,
+          userId: this.user.info.userId
+        });
       }
-      this.$refs.table.reload({page: 1, where: this.params});
-    },
-    datasource({page, where, limit, ...row}) {
-      return notifyMessagePageAPI({
-        ...where,
-        pageNum: page,
-        size: limit,
-        userId: this.user.info.userId
-      });
-    },
-  }
-};
+    }
+  };
 </script>
 <style lang="scss" scoped>
-.app-container {
-  background: #f0f3f3;
-  min-height: calc(100vh - 84px);
-}
+  .app-container {
+    background: #f0f3f3;
+    min-height: calc(100vh - 84px);
+  }
 
-.zw-page-table {
-  background: #ffffff;
-  padding-top: 20px;
-}
+  .zw-page-table {
+    background: #ffffff;
+    padding-top: 20px;
+  }
 
-.pagination-wrap {
-  display: flex;
-  justify-content: flex-end;
-  padding: 10px 0;
-}
+  .pagination-wrap {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 0;
+  }
 
-.table {
-  width: 100%;
-  margin-top: 10px;
-}
+  .table {
+    width: 100%;
+    margin-top: 10px;
+  }
 </style>