新建定向推送页面查看详消息模板详情

src/assets/css/index.css

@@ -718,7 +718,7 @@ width: 620px!important;
   width: 100%;
   height: calc(100% - 64px);
   border-bottom: 1px solid #f4f7fc;
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 .apaas_steps .apaas_step .apaas_step_action {
   position: absolute;

src/components/message-steps/select-service.vue

@@ -139,6 +139,16 @@ export default {
 }
 .service_fliter {
   padding: 15px 0;
+  border: none;
+  position: relative;
+}
+.service_fliter::after {
+  content: "";
+  position: absolute;
+  right: -20px;
+  bottom: 0;
+  left: -20px;
+  border-bottom: 1px solid #e9ecf3;
 }
 .service_list {
   flex-grow: 1;

src/components/message-steps/select-template.vue

@@ -38,6 +38,7 @@
         :header="listHeader"
         :data="listData"
         :padding-left="0"
+        :row-class-name="rowClassName"
         @row-click="selectTemplate"
       ></list-table>
 
@@ -51,6 +52,59 @@
         style="margin-top: 20px;"
       ></list-pagination>
     </div>
+
+    <apass-dialog
+      ref="dialog"
+      width="800"
+      title="预览"
+      @cancel="cancelAction"
+      @submit="submitAction"
+    >
+      <div class="detail_dialog apaas_detail_form" slot="content">
+        <div class="detail_item">
+          <p class="item_title">
+            消息模板名称：
+          </p>
+          <div class="item_content">
+            <el-input v-model="detail.name" :disabled="true"></el-input>
+          </div>
+        </div>
+        <div class="detail_item">
+          <p class="item_title">
+            模板类型：
+          </p>
+          <div class="item_content">
+            <el-select v-model="detail.tpl_type" :disabled="true">
+              <el-option
+                v-for="item in types"
+                :label="item.name"
+                :value="item.value"
+                :key="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="detail_item full_line">
+          <p class="item_title">
+            消息详情：
+          </p>
+          <div class="item_content">
+            <el-input
+              v-model="detail.content"
+              type="textarea"
+              placeholder="请输入消息详情，最多可以输入500字。"
+              maxlength="500"
+              :disabled="true"
+            ></el-input>
+            <p
+              class="textarea_count"
+              v-text="`还可以输入${500 - detail.content.length}字`"
+            ></p>
+          </div>
+        </div>
+      </div>
+    </apass-dialog>
   </div>
 </template>
 
@@ -59,12 +113,14 @@ import helper from "@/services/helper.js";
 import listTable from "@/components/apass-table";
 import ListPagination from "@/components/comments-pagination";
 import showMoreFilter from "@/components/show-more-filter";
+import apassDialog from "@/components/apass-dialog";
 
 export default {
   components: {
     listTable,
     ListPagination,
     showMoreFilter,
+    apassDialog,
   },
   data() {
     return {
@@ -99,6 +155,11 @@ export default {
           value: 4,
         },
       ],
+      detail: {
+        name: "",
+        tpl_type: "",
+        content: "",
+      },
     };
   },
   created() {
@@ -217,9 +278,6 @@ export default {
 
       this.getTemplateList();
     },
-    detailAction(item) {
-      console.log(item);
-    },
     selectTemplate(item) {
       this.listData.forEach((v) => {
         if (v.id === item.id) {
@@ -237,6 +295,47 @@ export default {
 
       this.$emit("change", this.selected);
     },
+    rowClassName({ row }) {
+      return row.selected ? "border-active" : "";
+    },
+    detailAction(item) {
+      this.$http
+        .get("/apaas/service/v3/msg/manage/tpl/info", {
+          params: {
+            id: item.id,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success == 1) {
+            let detail = data.data;
+
+            this.detail.name = detail.name;
+            this.detail.tpl_type = detail.tpl_type;
+            this.detail.content = detail.content;
+
+            this.$refs.dialog.show();
+          } else {
+            this.$message({
+              message: data.errMsg || "获取详情失败",
+              type: "warning",
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+
+          this.$message({
+            message: "获取详情失败",
+            type: "warning",
+          });
+        });
+    },
+    cancelAction() {
+      this.$refs.dialog.hide();
+    },
+    submitAction() {
+      this.$refs.dialog.hide();
+    },
   },
 };
 </script>
@@ -249,7 +348,15 @@ export default {
   align-items: stretch;
 }
 .template_fliter {
-  padding: 0 0 14px;
+  padding: 0 0 15px;
+  position: relative;
+}
+.template_fliter::after {
+  content: "";
+  position: absolute;
+  right: -20px;
+  bottom: 0;
+  left: -20px;
   border-bottom: 1px solid #e9ecf3;
 }
 .template_list {
@@ -261,10 +368,36 @@ export default {
 .selected_table {
   min-height: calc(100% - 60px);
 }
+.detail_dialog {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  text-align: left;
+}
+.detail_dialog .detail_item {
+  flex-shrink: 0;
+  width: calc(50% - 20px);
+  margin-top: 20px;
+}
+.detail_dialog .detail_item.full_line {
+  width: 100%;
+}
+.detail_dialog .detail_item p {
+  padding: 0 15px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #8890a7;
+}
+.detail_dialog .detail_item .item_content {
+  margin-top: 10px;
+}
 </style>
 
 <style>
 .selected_table .el-table__body-wrapper .el-table__row {
   cursor: pointer;
 }
+.select_template .detail_dialog .el-textarea.is-disabled .el-textarea__inner {
+  height: 194px;
+}
 </style>