销售话术详情

klp-ui/src/api/wms/productSalesScript.js

@@ -9,6 +9,15 @@ export function listProductSalesScript(query) {
   })
 }
 
+// 查询产品销售话术，只要标题和内容有一个配置就会被返回
+export function searchProductSalesScript(keyword) {
+  return request({
+    url: '/klp/productSalesScript/list',
+    method: 'get',
+    params: { keyword }
+  })
+}
+
 // 查询产品销售话术详细
 export function getProductSalesScript(scriptId) {
   return request({

klp-ui/src/components/MarkdownPreview.vue

@@ -0,0 +1,44 @@
+<template>
+  <div ref="preview" class="markdown-preview" style="min-height: 192px;"></div>
+</template>
+
+<script>
+import Vditor from 'vditor'
+
+export default {
+  name: 'MarkdownPreview',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  mounted() {
+    this.renderMarkdown();
+  },
+  watch: {
+    value() {
+      this.renderMarkdown();
+    }
+  },
+  methods: {
+    renderMarkdown() {
+      Vditor.preview(this.$refs.preview, this.value || '', {
+        anchor: 1,
+        hl: true,
+        math: { inlineDigit: true },
+        mermaid: true,
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.markdown-preview {
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 8px;
+  background: #fff;
+}
+</style>

klp-ui/src/components/VditorEditor.vue

@@ -12,6 +12,10 @@ export default {
     value: {
       type: String,
       default: ''
+    },
+    readonly: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -20,27 +24,40 @@ export default {
     }
   },
   mounted() {
-    this.vditor = new Vditor('vditor', {
+    const config = {
       value: this.value,
       height: 360,
-      toolbarConfig: {
-        pin: true,
-      },
-      cache: {
-        enable: false,
-      },
+      cache: { enable: false },
       after: () => {
         this.vditor.setValue(this.value || '')
       },
       input: (val) => {
         this.$emit('input', val)
       }
-    })
+    };
+    if (this.readonly) {
+      config.toolbar = []; // 不显示工具栏
+      config.editable = false;
+    } else {
+      config.toolbarConfig = { pin: true };
+      config.editable = true;
+    }
+    this.vditor = new Vditor('vditor', config);
+    if (this.readonly) {
+      console.log(this.vditor)
+      this.vditor.vditor.disabled()
+    }
   },
   watch: {
     value(val) {
       if (this.vditor && val !== this.vditor.getValue()) {
         this.vditor.setValue(val || '')
+        // 只读模式下内容变化时重新渲染mermaid
+        if (this.readonly && window.VditorPreview && typeof window.VditorPreview.mermaidRender === 'function') {
+          this.$nextTick(() => {
+            window.VditorPreview.mermaidRender(document);
+          });
+        }
       }
     }
   }

klp-ui/src/views/wms/productSalesScript/detail.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" style="margin-bottom: 16px;">
+      <el-col :span="16">
+        <el-select
+          v-model="selectedId"
+          filterable
+          remote
+          clearable
+          placeholder="搜索并选择文章"
+          :remote-method="remoteSearch"
+          :loading="loading"
+          style="width: 100%;"
+          @change="fetchDetail"
+        >
+          <el-option
+            v-for="item in articleList"
+            :key="item.scriptId"
+            :label="item.scriptTitle"
+            :value="item.scriptId"
+          >
+            <div>
+              <span v-html="highlight(item.scriptTitle)"></span>
+              <span style="color:#999; font-size:12px; margin-left:8px;">{{ item.featurePoint }}</span>
+            </div>
+          </el-option>
+        </el-select>
+      </el-col>
+    </el-row>
+
+    <el-card v-if="detail" shadow="hover">
+      <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
+        <div>
+          <strong>{{ detail.scriptTitle }}</strong>
+          <span style="margin-left: 8px; color: #999;">({{ detail.featurePoint }})</span>
+        </div>
+        <div>
+          <el-tag v-if="detail.isEnabled == 1 || detail.isEnabled === '1'" type="success">启用</el-tag>
+          <el-tag v-else type="info">禁用</el-tag>
+        </div>
+      </div>
+      <div style="margin: 8px 0;" v-loading="articleLoading">
+        <MarkdownPreview :value="detail.scriptContent" />
+      </div>
+      <div style="font-size: 13px; color: #888;">备注: {{ detail.remark }}</div>
+    </el-card>
+    <div v-else style="text-align:center; color:#999; margin-top:40px;">暂无数据</div>
+  </div>
+</template>
+
+<script>
+import { getProductSalesScript, searchProductSalesScript } from "@/api/wms/productSalesScript";
+import MarkdownPreview from '@/components/MarkdownPreview.vue';
+
+export default {
+  name: "ProductSalesScriptDetail",
+  components: { MarkdownPreview },
+  data() {
+    return {
+      searchKeyword: "",
+      articleList: [],
+      selectedId: undefined,
+      detail: null,
+      loading: false,
+      articleLoading: false,
+    };
+  },
+  created() {
+    // 获取路由参数scriptId，只查详情
+    const scriptId = this.$route?.params?.scriptId;
+    if (scriptId) {
+      this.fetchDetail(scriptId);
+    }
+  },
+  methods: {
+    // 初始化时带id只查详情，不查列表
+    fetchList(keyword = "") {
+      this.loading = true;
+      searchProductSalesScript(keyword).then(res => {
+        const rows = res.rows || res.data || [];
+        this.articleList = rows;
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    remoteSearch(query) {
+      this.searchKeyword = query;
+      this.fetchList(query);
+    },
+    highlight(text) {
+      if (!this.searchKeyword || !text) return text;
+      const reg = new RegExp(this.searchKeyword.replace(/[.*+?^${}()|[\]\\]/g, '\$&'), 'gi');
+      return text.replace(reg, match => `<span style='background:yellow;color:#d0021b;'>${match}</span>`);
+    },
+    fetchDetail(id) {
+      this.articleLoading = true;
+      getProductSalesScript(id).then(res => {
+        this.detail = res.data || null;
+      }).finally(() => {
+        this.articleLoading = false;
+      });
+    },
+  }
+};
+</script>
+
+<style scoped>
+.app-container {
+  max-width: 900px;
+  margin: 0 auto;
+}
+.card-header {
+  font-size: 20px;
+  margin-bottom: 8px;
+}
+</style>

klp-ui/src/views/wms/productSalesScript/index.vue

@@ -43,8 +43,8 @@
     </el-row>
 
     <div class="waterfall-list">
-      <div v-for="item in productSalesScriptList" :key="item.scriptId" class="waterfall-item">
-        <el-card shadow="hover">
+      <div v-for="item in productSalesScriptList" @click="goToDetail(item.scriptId)" :key="item.scriptId" class="waterfall-item">
+        <el-card shadow="hover" style="cursor:pointer;">
           <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
             <div>
               <strong>{{ item.scriptTitle }}</strong>
@@ -59,8 +59,8 @@
           <div style="font-size: 13px; color: #888;">产品ID: {{ item.productName }} ({{ item.productCode }})</div>
           <div style="font-size: 13px; color: #888;">备注: {{ item.remark }}</div>
           <div style="margin-top: 12px; text-align: right;">
-            <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleUpdate(item)">修改</el-button>
-            <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(item)">删除</el-button>
+            <el-button size="mini" type="primary" icon="el-icon-edit" @click.stop="handleUpdate(item)">修改</el-button>
+            <el-button size="mini" type="danger" icon="el-icon-delete" @click.stop="handleDelete(item)">删除</el-button>
           </div>
         </el-card>
       </div>
@@ -314,6 +314,10 @@ export default {
       this.download('system/productSalesScript/export', {
         ...this.queryParams
       }, `productSalesScript_${new Date().getTime()}.xlsx`)
+    },
+    // 跳转详情页
+    goToDetail(scriptId) {
+      this.$router.push({ path: `/shop/rich/${scriptId}` });
     }
   }
 }