Kaynağa Gözat

Merge branch 'master' of http://1.14.104.71:10880/root/ylrz_his_scrm_adminUI

wjj 1 hafta önce
ebeveyn
işleme
87796c329e

+ 1 - 1
package.json

@@ -137,8 +137,8 @@
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
     "lint-staged": "10.5.3",
-    "node-sass": "4.14.1",
     "runjs": "4.4.2",
+    "sass": "^1.98.0",
     "sass-loader": "8.0.2",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",

+ 18 - 0
src/api/course/userCourseComment.js

@@ -83,4 +83,22 @@ export function listFeaturedComments(courseId, videoId, query) {
     method: 'get',
     params: { videoId: videoId || undefined, ...query }
   })
+}
+
+// 查询指定小节下的用户留言(排除精选留言)
+export function listSectionUserComments(query) {
+  return request({
+    url: '/course/userCourseComment/sectionUserComments',
+    method: 'get',
+    params: query
+  })
+}
+
+// 修改用户留言可见范围:visibleAll 0自己可见 1全部人可见
+export function updateCommentVisibleAll(data) {
+  return request({
+    url: '/course/userCourseComment/updateVisibleAll',
+    method: 'put',
+    data: data
+  })
 }

+ 78 - 0
src/api/crm/customerProperty.js

@@ -0,0 +1,78 @@
+import request from '@/utils/request'
+
+export function listByCustomerId(customerId) {
+  return request({
+    url: '/crm/customerProperty/list/' + customerId,
+    method: 'get'
+  })
+}
+
+export function getById(id) {
+  return request({
+    url: '/crm/customerProperty/' + id,
+    method: 'get'
+  })
+}
+
+export function add(data) {
+  return request({
+    url: '/crm/customerProperty/add',
+    method: 'post',
+    data: data
+  })
+}
+
+export function addOrUpdate(data) {
+  return request({
+    url: '/crm/customerProperty/addOrUpdate',
+    method: 'post',
+    data: data
+  })
+}
+
+export function addByTemplateId(customerId, templateId, propertyValue) {
+  return request({
+    url: '/crm/customerProperty/addByTemplateId',
+    method: 'post',
+    params: { customerId, templateId, propertyValue }
+  })
+}
+
+export function addOrUpdateByTemplateId(customerId, templateId, propertyValue) {
+  return request({
+    url: '/crm/customerProperty/addOrUpdateByTemplateId',
+    method: 'post',
+    params: { customerId, templateId, propertyValue }
+  })
+}
+
+export function batchAddByTemplateIds(customerId, propertyMap) {
+  return request({
+    url: '/crm/customerProperty/batchAddByTemplateIds/' + customerId,
+    method: 'post',
+    data: propertyMap
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/crm/customerProperty',
+    method: 'put',
+    data: data
+  })
+}
+
+export function del(ids) {
+  return request({
+    url: '/crm/customerProperty/' + ids,
+    method: 'delete'
+  })
+}
+
+export function deleteByPropertyId(customerId, propertyId) {
+  return request({
+    url: '/crm/customerProperty/deleteByPropertyId',
+    method: 'delete',
+    params: { customerId, propertyId }
+  })
+}

+ 47 - 0
src/api/crm/propertyTemplate.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+
+export function listPropertyTemplate(query) {
+  return request({
+    url: '/crm/customerPropertyTemplate/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getPropertyTemplate(id) {
+  return request({
+    url: '/crm/customerPropertyTemplate/' + id,
+    method: 'get'
+  })
+}
+
+export function addPropertyTemplate(data) {
+  return request({
+    url: '/crm/customerPropertyTemplate',
+    method: 'post',
+    data: data
+  })
+}
+
+export function updatePropertyTemplate(data) {
+  return request({
+    url: '/crm/customerPropertyTemplate',
+    method: 'put',
+    data: data
+  })
+}
+
+export function delPropertyTemplate(id) {
+  return request({
+    url: '/crm/customerPropertyTemplate/' + id,
+    method: 'delete'
+  })
+}
+
+export function exportPropertyTemplate(query) {
+  return request({
+    url: '/crm/customerPropertyTemplate/export',
+    method: 'get',
+    params: query
+  })
+}

+ 35 - 1
src/views/components/course/userCourseCatalogDetails.vue

@@ -424,6 +424,7 @@
         </el-form-item>
         <el-form-item label="精选留言">
           <el-button size="small" type="primary" @click="openCommentImportDialog">导入留言</el-button>
+          <el-button size="small" style="margin-left: 8px;" @click="openUserCommentDialog">用户留言</el-button>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -611,6 +612,15 @@
                             v-if="commentDialog.open">
       </course-watch-comment>
     </el-dialog>
+    <el-dialog :title="userCommentDialog.title" :visible.sync="userCommentDialog.open" width="1000px" append-to-body
+               :close-on-click-modal="false" @opened="onUserCommentDialogOpened">
+      <user-course-section-comment
+        v-if="userCommentDialog.open"
+        ref="userCourseSectionComment"
+        :course-id="userCommentDialog.courseId"
+        :video-id="userCommentDialog.videoId"
+      />
+    </el-dialog>
 
 
     <el-dialog title="修改课节排序" :visible.sync="openVideoSort" style="width: 1600px;" append-to-body>
@@ -699,6 +709,7 @@ import VideoUpload from "@/components/VideoUpload/index.vue";
 import {listVideoResource, listPublicVideoResource} from '@/api/course/videoResource';
 import {getByIds} from '@/api/course/courseQuestionBank'
 import CourseWatchComment from "./courseWatchComment.vue";
+import UserCourseSectionComment from "./userCourseSectionComment.vue";
 import {getCateListByPid, getCatePidList, getPublicCateListByPid, getPublicCatePidList} from '@/api/course/userCourseCategory'
 import {downloadCommentImportTemplate, importComments, listFeaturedComments, delUserCourseComment} from '@/api/course/userCourseComment'
 import draggable from 'vuedraggable'
@@ -707,7 +718,7 @@ import { options as courserCouponOptions} from "@/api/his/courserCoupon";
 
 export default {
   name: "userCourseCatalog",
-  components: {VideoUpload, QuestionBank, CourseWatchComment, CourseProduct, draggable},
+  components: {VideoUpload, QuestionBank, CourseWatchComment, UserCourseSectionComment, CourseProduct, draggable},
   props: {
     /** 为 true 时「视频库选择」使用公域分类 + 公域素材接口;默认 false 走原 list / 原分类下拉 */
     usePublicVideoLibrary: {
@@ -863,6 +874,12 @@ export default {
         videoId: null,
         title: ""
       },
+      userCommentDialog: {
+        open: false,
+        courseId: null,
+        videoId: null,
+        title: ""
+      },
       enableRandomRedPacket:false,
       // 批量修改封面
       batchEditCoverDialog: {
@@ -1758,6 +1775,23 @@ export default {
       return isLt10M && isImage;
     },
     // 打开精选留言导入弹窗
+    openUserCommentDialog() {
+      if (!this.form.courseId || !this.form.videoId) {
+        this.$message.warning('请先保存课节后再查看用户留言')
+        return
+      }
+      this.userCommentDialog.courseId = this.form.courseId
+      this.userCommentDialog.videoId = this.form.videoId
+      this.userCommentDialog.title = `用户留言 - ${this.form.title || ''}`
+      this.userCommentDialog.open = true
+    },
+    onUserCommentDialogOpened() {
+      this.$nextTick(() => {
+        if (this.$refs.userCourseSectionComment) {
+          this.$refs.userCourseSectionComment.handleQuery()
+        }
+      })
+    },
     openCommentImportDialog() {
       this.commentImportDialog.visible = true;
       this.commentImportDialog.file = null;

+ 97 - 3
src/views/components/course/userCourseCatalogDetailsZM.vue

@@ -389,11 +389,25 @@
                 ></el-time-picker>
               </template>
             </el-table-column>
-            <el-table-column label="操作" align="center" width="100px" fixed="right">
+            <el-table-column label="热卖标签" align="center" prop="hotSaleTags" min-width="140">
+              <template slot-scope="scope">
+                <el-tag
+                  v-for="(tag, tagIdx) in getHotSaleTagList(scope.row)"
+                  :key="tagIdx"
+                  size="mini"
+                  type="danger"
+                  style="margin: 2px;"
+                >{{ tag }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="160px" fixed="right">
               <template slot-scope="scope">
                 <el-button size="mini" type="text" icon="el-icon-delete"
                            @click="handleCourseProductDelete(scope.row)">删除
                 </el-button>
+                <el-button size="mini" type="text" icon="el-icon-price-tag"
+                           @click="handleOpenHotSaleTagDialog(scope.row, scope.$index)">添加热卖标签
+                </el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -426,6 +440,7 @@
         </el-form-item>
         <el-form-item label="精选留言">
           <el-button size="small" type="primary" @click="openCommentImportDialog">导入留言</el-button>
+          <el-button size="small" style="margin-left: 8px;" @click="openUserCommentDialog">用户留言</el-button>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -492,6 +507,21 @@
     <el-dialog :title="courseProduct.title" :visible.sync="courseProduct.open" width="1000px" append-to-body>
       <course-product ref="courseProduct" @courseProductResult="courseProductResult"></course-product>
     </el-dialog>
+    <el-dialog title="热卖标签" :visible.sync="hotSaleTagDialog.visible" width="480px" append-to-body>
+      <p v-if="hotSaleTagDialog.productName" style="margin-bottom: 10px; color: #606266;">
+        商品:{{ hotSaleTagDialog.productName }}
+      </p>
+      <el-input
+        v-model="hotSaleTagDialog.tagInput"
+        type="textarea"
+        :rows="3"
+        placeholder="多个标签用逗号分隔;留空表示清除标签"
+      />
+      <template slot="footer">
+        <el-button @click="hotSaleTagDialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmHotSaleTag">确 定</el-button>
+      </template>
+    </el-dialog>
     <el-dialog title="视频库选择" :visible.sync="addBatchData.open" width="900px" append-to-body>
       <!-- 搜索条件 -->
       <el-form :inline="true" :model="addBatchData.queryParams" class="library-search">
@@ -581,6 +611,15 @@
                             v-if="commentDialog.open">
       </course-watch-comment>
     </el-dialog>
+    <el-dialog :title="userCommentDialog.title" :visible.sync="userCommentDialog.open" width="1000px" append-to-body
+               :close-on-click-modal="false" @opened="onUserCommentDialogOpened">
+      <user-course-section-comment
+        v-if="userCommentDialog.open"
+        ref="userCourseSectionComment"
+        :course-id="userCommentDialog.courseId"
+        :video-id="userCommentDialog.videoId"
+      />
+    </el-dialog>
 
 
     <el-dialog title="修改课节排序" :visible.sync="openVideoSort" style="width: 1600px;" append-to-body>
@@ -645,6 +684,7 @@ import VideoUpload from "@/components/VideoUpload/index.vue";
 import {listVideoResource} from '@/api/course/videoResource';
 import {getByIds} from '@/api/course/courseQuestionBank'
 import CourseWatchComment from "./courseWatchComment.vue";
+import UserCourseSectionComment from "./userCourseSectionComment.vue";
 import {getCateListByPid, getCatePidList} from '@/api/course/userCourseCategory'
 import {downloadCommentImportTemplate, importComments, listFeaturedComments, delUserCourseComment} from '@/api/course/userCourseComment'
 import draggable from 'vuedraggable'
@@ -652,7 +692,7 @@ import { getConfigByKey } from '@/api/system/config'
 
 export default {
   name: "userCourseCatalog",
-  components: {VideoUpload, QuestionBank, CourseWatchComment, CourseProduct, draggable},
+  components: {VideoUpload, QuestionBank, CourseWatchComment, UserCourseSectionComment, CourseProduct, draggable},
   props: {
     usePublicVideoLibrary: {
       type: Boolean,
@@ -688,6 +728,12 @@ export default {
         title: '',
         open: false,
       },
+      hotSaleTagDialog: {
+        visible: false,
+        index: -1,
+        productName: '',
+        tagInput: ''
+      },
       isPrivate: null,
       videoUrl: "",
       uploadTypeOptions: [
@@ -798,6 +844,12 @@ export default {
         videoId: null,
         title: ""
       },
+      userCommentDialog: {
+        open: false,
+        courseId: null,
+        videoId: null,
+        title: ""
+      },
       enableRandomRedPacket:false,
       // 精选留言导入弹窗
       commentImportDialog: {
@@ -929,6 +981,7 @@ export default {
         cardPopupTime: val.cardPopupTime || '00:00:00',  // 卡片弹出时间,默认 00:00:00
         cardCloseTime: val.cardCloseTime || '00:00:00',  // 卡片关闭时间,默认 00:00:00
         offShelfTime: val.offShelfTime || '00:00:00',  // 下架时间,默认 00:00:00
+        hotSaleTags: val.hotSaleTags || '',
       };
       // 检查商品是否已存在
       const exists = this.form.courseProducts.some(item => item.productId === val.productId);
@@ -1122,6 +1175,29 @@ export default {
       this.form.questionBankList.splice(this.form.questionBankList.findIndex(item => item.id === row.id), 1)
     },
 
+    getHotSaleTagList(row) {
+      if (!row || !row.hotSaleTags) {
+        return [];
+      }
+      return row.hotSaleTags.split(/[,,]/).map(t => t.trim()).filter(t => t);
+    },
+    handleOpenHotSaleTagDialog(row, index) {
+      this.hotSaleTagDialog.index = index;
+      this.hotSaleTagDialog.productName = row.productName || '';
+      this.hotSaleTagDialog.tagInput = row.hotSaleTags || '';
+      this.hotSaleTagDialog.visible = true;
+    },
+    confirmHotSaleTag() {
+      const tags = (this.hotSaleTagDialog.tagInput || '')
+        .split(/[,,]/)
+        .map(t => t.trim())
+        .filter(t => t);
+      const index = this.hotSaleTagDialog.index;
+      if (index >= 0 && this.form.courseProducts[index]) {
+        this.$set(this.form.courseProducts[index], 'hotSaleTags', tags.length ? tags.join(',') : '');
+      }
+      this.hotSaleTagDialog.visible = false;
+    },
     //删除商品
     handleCourseProductDelete(row) {
       // 优先使用 productId 查找
@@ -1376,7 +1452,8 @@ export default {
                 onShelfTime: product.onShelfTime || '00:00:00',
                 cardPopupTime: product.cardPopupTime || '00:00:00',
                 cardCloseTime: product.cardCloseTime || '00:00:00',
-                offShelfTime: product.offShelfTime || '00:00:00'
+                offShelfTime: product.offShelfTime || '00:00:00',
+                hotSaleTags: product.hotSaleTags || ''
               }));
             } else {
               // 否则按照原有逻辑设置到 packageList
@@ -1825,6 +1902,23 @@ export default {
       }
       return isLt10M && isImage;
     },
+    openUserCommentDialog() {
+      if (!this.form.courseId || !this.form.videoId) {
+        this.$message.warning('请先保存课节后再查看用户留言')
+        return
+      }
+      this.userCommentDialog.courseId = this.form.courseId
+      this.userCommentDialog.videoId = this.form.videoId
+      this.userCommentDialog.title = `用户留言 - ${this.form.title || ''}`
+      this.userCommentDialog.open = true
+    },
+    onUserCommentDialogOpened() {
+      this.$nextTick(() => {
+        if (this.$refs.userCourseSectionComment) {
+          this.$refs.userCourseSectionComment.handleQuery()
+        }
+      })
+    },
     // 打开精选留言导入弹窗
     openCommentImportDialog() {
       this.commentImportDialog.visible = true;

+ 246 - 0
src/views/components/course/userCourseSectionComment.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="app-container user-section-comment">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="72px">
+      <el-form-item label="用户昵称" prop="nickName">
+        <el-input
+          v-model="queryParams.nickName"
+          placeholder="请输入用户昵称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="commentList" border>
+      <el-table-column label="用户昵称" prop="nickName" width="120" show-overflow-tooltip />
+      <el-table-column label="类型" width="72" align="center">
+        <template slot-scope="scope">
+          <el-tag size="mini" :type="scope.row.type === 2 ? 'info' : ''">
+            {{ scope.row.type === 2 ? '回复' : '评论' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="留言内容" min-width="360">
+        <template slot-scope="scope">
+          <div class="comment-content-cell">
+            <template v-for="(part, idx) in parseCommentContent(scope.row.content)">
+              <p v-if="part.kind === 'text'" :key="'t-' + scope.row.commentId + '-' + idx" class="comment-text">
+                {{ part.value }}
+              </p>
+              <el-image
+                v-else-if="part.kind === 'image'"
+                :key="'i-' + scope.row.commentId + '-' + idx"
+                class="comment-media comment-image"
+                :src="part.value"
+                :preview-src-list="[part.value]"
+                fit="contain"
+              />
+              <video
+                v-else-if="part.kind === 'video'"
+                :key="'v-' + scope.row.commentId + '-' + idx"
+                class="comment-media comment-video"
+                :src="part.value"
+                controls
+                preload="metadata"
+              />
+              <a
+                v-else-if="part.kind === 'link'"
+                :key="'l-' + scope.row.commentId + '-' + idx"
+                :href="part.value"
+                target="_blank"
+                rel="noopener"
+                class="comment-link"
+              >{{ part.value }}</a>
+            </template>
+            <span v-if="!scope.row.content" class="comment-empty">—</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="点赞" prop="likes" width="70" align="center" />
+      <el-table-column label="可见范围" width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag size="mini" :type="scope.row.visibleAll === 1 ? 'success' : 'info'">
+            {{ scope.row.visibleAll === 1 ? '全部人可见' : '自己可见' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="留言时间" prop="createTime" width="160" align="center" />
+      <el-table-column label="操作" width="180" align="center" fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="mini"
+            :disabled="scope.row.visibleAll === 1"
+            @click="handleUpdateVisible(scope.row, 1)"
+          >全部人可见</el-button>
+          <el-button
+            type="text"
+            size="mini"
+            :disabled="scope.row.visibleAll === 0 || scope.row.visibleAll == null"
+            @click="handleUpdateVisible(scope.row, 0)"
+          >自己可见</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listSectionUserComments, updateCommentVisibleAll } from '@/api/course/userCourseComment'
+
+const IMAGE_EXT = /\.(png|jpe?g|gif|webp|bmp|svg)(\?.*)?$/i
+const VIDEO_EXT = /\.(mp4|webm|ogg|mov|m4v|m3u8)(\?.*)?$/i
+
+export default {
+  name: 'UserCourseSectionComment',
+  props: {
+    courseId: {
+      type: [String, Number],
+      required: true
+    },
+    videoId: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      total: 0,
+      commentList: [],
+      visibleUpdatingId: null,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        courseId: null,
+        videoId: null,
+        nickName: null
+      }
+    }
+  },
+  watch: {
+    courseId: {
+      immediate: true,
+      handler(val) {
+        this.queryParams.courseId = val
+      }
+    },
+    videoId: {
+      immediate: true,
+      handler(val) {
+        this.queryParams.videoId = val
+      }
+    }
+  },
+  methods: {
+    getList() {
+      if (!this.queryParams.courseId || !this.queryParams.videoId) {
+        return
+      }
+      this.loading = true
+      listSectionUserComments(this.queryParams).then(response => {
+        this.commentList = response.rows || []
+        this.total = response.total || 0
+        this.loading = false
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    resetQuery() {
+      this.queryParams.nickName = null
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    handleUpdateVisible(row, visibleAll) {
+      const label = visibleAll === 1 ? '全部人可见' : '自己可见'
+      this.$confirm(`确认将该留言设置为「${label}」?`, '提示', { type: 'warning' }).then(() => {
+        this.visibleUpdatingId = row.commentId
+        updateCommentVisibleAll({
+          commentId: row.commentId,
+          visibleAll: visibleAll
+        }).then(() => {
+          this.$message.success('修改成功')
+          this.getList()
+        }).finally(() => {
+          this.visibleUpdatingId = null
+        })
+      }).catch(() => {})
+    },
+    parseCommentContent(content) {
+      if (!content || !String(content).trim()) {
+        return []
+      }
+      const lines = String(content).split(/\r?\n/).map(s => s.trim()).filter(Boolean)
+      const parts = []
+      lines.forEach(line => {
+        if (!/^https?:\/\//i.test(line)) {
+          parts.push({ kind: 'text', value: line })
+          return
+        }
+        if (VIDEO_EXT.test(line) || /\/comment\/video\//i.test(line)) {
+          parts.push({ kind: 'video', value: line })
+        } else if (IMAGE_EXT.test(line) || /\/comment\/image\//i.test(line)) {
+          parts.push({ kind: 'image', value: line })
+        } else {
+          parts.push({ kind: 'link', value: line })
+        }
+      })
+      return parts
+    }
+  }
+}
+</script>
+
+<style scoped>
+.user-section-comment {
+  padding: 0;
+}
+.comment-content-cell {
+  text-align: left;
+  line-height: 1.6;
+}
+.comment-text {
+  margin: 0 0 6px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.comment-media {
+  display: block;
+  margin: 6px 0;
+  max-width: 280px;
+  border-radius: 4px;
+}
+.comment-image {
+  max-height: 160px;
+}
+.comment-video {
+  max-height: 200px;
+  background: #000;
+}
+.comment-link {
+  display: block;
+  margin: 4px 0;
+  color: #409eff;
+  word-break: break-all;
+}
+.comment-empty {
+  color: #909399;
+}
+</style>

+ 388 - 0
src/views/crm/components/AiTagPanel.vue

@@ -0,0 +1,388 @@
+<template>
+  <div class="ai-tag-container">
+    <div class="ai-tag-header">
+      <div class="header-left">
+        <i class="el-icon-magic-sticker" style="color: #6b5fff; font-size: 18px; margin-right: 6px;"></i>
+        <span class="tag-title">AI 标签</span>
+        <el-tooltip content="AI 自动打标签" placement="bottom">
+          <span class="tag-subtitle">(AI 自动打标签)</span>
+        </el-tooltip>
+      </div>
+      <div class="header-right">
+        <el-button type="text" icon="el-icon-plus" size="mini" @click="handleAddTag" style="color: #ff9800;">
+          点击增加 AI 标签维度
+        </el-button>
+        <el-button type="text" icon="el-icon-view" size="mini" @click="toggleView" style="margin-left: 10px;">
+          <i class="el-icon-view"></i>
+        </el-button>
+      </div>
+    </div>
+
+    <div class="ai-tag-content" v-loading="loading">
+      <div v-if="tagList.length === 0" class="empty-tips">
+        <i class="el-icon-info"></i>
+        <span>暂无标签,点击"添加标签"开始设置</span>
+      </div>
+
+      <div v-else class="tag-list">
+        <div v-for="(tag, index) in tagList" :key="tag.id" class="tag-item">
+          <div class="tag-name">
+            <i class="el-icon-more"></i>
+            <span>{{ tag.propertyName }}</span>
+          </div>
+          <div class="tag-values">
+            <el-tag
+              v-if="tag.propertyValue"
+              size="small"
+              closable
+              @close="handleDeleteTag(tag)"
+              @click="handleEditTag(tag)"
+              style="cursor: pointer; margin-right: 8px; margin-bottom: 8px;"
+            >
+              {{ tag.propertyValue }}
+            </el-tag>
+            <span v-else class="no-value">未设置</span>
+            <el-button
+              v-if="!tag.propertyValue"
+              type="text"
+              size="mini"
+              icon="el-icon-edit"
+              @click="handleEditTag(tag)"
+            >
+              批注
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加/编辑标签弹窗 -->
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="600px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="标签维度" prop="propertyId">
+          <el-select
+            v-model="form.propertyId"
+            placeholder="请选择标签维度"
+            style="width: 100%"
+            :disabled="isEdit"
+            @change="handlePropertyChange"
+          >
+            <el-option
+              v-for="item in propertyTemplateList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+              <span style="float: left">{{ item.name }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{ getValueTypeText(item.valueType) }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="标签值" prop="propertyValue">
+          <el-input
+            v-if="currentValueType === 'text'"
+            v-model="form.propertyValue"
+            placeholder="请输入标签值"
+            maxlength="100"
+            show-word-limit
+          />
+          <el-select
+            v-else-if="currentValueType === 'select'"
+            v-model="form.propertyValue"
+            placeholder="请选择标签值"
+            style="width: 100%"
+            clearable
+          >
+            <el-option label="是" value="是" />
+            <el-option label="否" value="否" />
+          </el-select>
+          <el-input
+            v-else-if="currentValueType === 'number'"
+            v-model="form.propertyValue"
+            placeholder="请输入数字"
+            maxlength="20"
+          />
+          <el-input
+            v-else-if="currentValueType === 'date'"
+            v-model="form.propertyValue"
+            type="date"
+            placeholder="选择日期"
+            style="width: 100%"
+          />
+          <span v-else class="unknown-type">未知的属性类型</span>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入备注"
+            maxlength="200"
+            show-word-limit
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="dialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listPropertyTemplate } from "@/api/crm/propertyTemplate";
+import { listByCustomerId, addOrUpdateByTemplateId, deleteByPropertyId } from "@/api/crm/customerProperty";
+
+export default {
+  name: "AiTagPanel",
+  props: {
+    customerId: {
+      type: Number,
+      required: true,
+      default: null
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      tagList: [],
+      propertyTemplateList: [],
+      dialogVisible: false,
+      dialogTitle: "",
+      isEdit: false,
+      currentValueType: "text",
+      form: {
+        customerId: null,
+        propertyId: null,
+        propertyName: null,
+        propertyValue: null,
+        propertyValueType: null,
+        tradeType: null,
+        remark: null
+      },
+      rules: {
+        propertyId: [
+          { required: true, message: "请选择标签维度", trigger: "change" }
+        ],
+        propertyValue: [
+          { required: true, message: "请输入标签值", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    if (this.customerId) {
+      this.loadTags();
+    }
+  },
+  watch: {
+    customerId(newVal) {
+      if (newVal) {
+        this.loadTags();
+      }
+    }
+  },
+  methods: {
+    loadTags() {
+      this.loading = true;
+      listByCustomerId(this.customerId).then(response => {
+        this.tagList = response.data || [];
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
+    loadPropertyTemplates() {
+      listPropertyTemplate({ pageNum: 1, pageSize: 100 }).then(response => {
+        this.propertyTemplateList = response.rows || [];
+      });
+    },
+    toggleView() {
+      this.$emit("toggle-view");
+    },
+    handleAddTag() {
+      this.loadPropertyTemplates();
+      this.reset();
+      this.dialogTitle = "添加标签";
+      this.isEdit = false;
+      this.dialogVisible = true;
+    },
+    handleEditTag(tag) {
+      this.loadPropertyTemplates();
+      this.form = {
+        customerId: tag.customerId,
+        propertyId: tag.propertyId,
+        propertyName: tag.propertyName,
+        propertyValue: tag.propertyValue,
+        propertyValueType: tag.propertyValueType,
+        tradeType: tag.tradeType,
+        remark: tag.remark
+      };
+      this.currentValueType = tag.propertyValueType || "text";
+      this.dialogTitle = "编辑标签";
+      this.isEdit = true;
+      this.dialogVisible = true;
+    },
+    handleDeleteTag(tag) {
+      this.$confirm(`确认删除标签"${tag.propertyName}"吗?`, "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        return deleteByPropertyId(this.customerId, tag.propertyId);
+      }).then(() => {
+        this.msgSuccess("删除成功");
+        this.loadTags();
+        this.$emit("tag-change");
+      }).catch(() => {});
+    },
+    handlePropertyChange(propertyId) {
+      const template = this.propertyTemplateList.find(item => item.id === propertyId);
+      if (template) {
+        this.form.propertyName = template.name;
+        this.form.propertyValueType = template.valueType;
+        this.form.tradeType = template.tradeType;
+        this.currentValueType = template.valueType;
+      }
+    },
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.form.customerId = this.customerId;
+          addOrUpdateByTemplateId(
+            this.customerId,
+            this.form.propertyId,
+            this.form.propertyValue
+          ).then(response => {
+            this.msgSuccess("保存成功");
+            this.dialogVisible = false;
+            this.loadTags();
+            this.$emit("tag-change");
+          });
+        }
+      });
+    },
+    reset() {
+      this.form = {
+        customerId: this.customerId,
+        propertyId: null,
+        propertyName: null,
+        propertyValue: null,
+        propertyValueType: null,
+        tradeType: null,
+        remark: null
+      };
+      this.currentValueType = "text";
+      this.isEdit = false;
+      if (this.$refs.form) {
+        this.$refs.form.clearValidate();
+      }
+    },
+    getValueTypeText(valueType) {
+      const typeMap = {
+        text: "文本",
+        number: "数字",
+        date: "日期",
+        select: "单选",
+        multiSelect: "多选"
+      };
+      return typeMap[valueType] || valueType;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ai-tag-container {
+  padding: 16px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+  .ai-tag-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid #ebeef5;
+
+    .header-left {
+      display: flex;
+      align-items: center;
+
+      .tag-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+      }
+
+      .tag-subtitle {
+        font-size: 12px;
+        color: #909399;
+        margin-left: 8px;
+      }
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .ai-tag-content {
+    min-height: 200px;
+
+    .empty-tips {
+      text-align: center;
+      color: #909399;
+      padding: 40px 0;
+
+      i {
+        font-size: 40px;
+        display: block;
+        margin-bottom: 8px;
+      }
+    }
+
+    .tag-list {
+      .tag-item {
+        margin-bottom: 16px;
+
+        .tag-name {
+          display: flex;
+          align-items: center;
+          margin-bottom: 8px;
+          font-size: 14px;
+          font-weight: 500;
+          color: #303133;
+
+          i {
+            color: #409eff;
+            margin-right: 6px;
+            font-size: 12px;
+          }
+        }
+
+        .tag-values {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+
+          .no-value {
+            color: #c0c4cc;
+            font-size: 13px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

+ 19 - 6
src/views/crm/components/customerDetails.vue

@@ -107,6 +107,14 @@
             </el-descriptions-item>
         </el-descriptions>
 
+        <!-- AI 标签模块 -->
+        <div style="margin-top: 20px;" v-if="item && item.customerId">
+            <ai-tag-panel ref="aiTagPanel" :customer-id="item.customerId" @tag-change="handleTagChange"></ai-tag-panel>
+        </div>
+        <div v-else style="margin-top: 20px; color: #999; text-align: center;">
+            客户信息加载中...
+        </div>
+
         <el-tabs style="margin-top:20px;"  z-index = "99" type="border-card" v-model="activeName" @tab-click="handleClick">
             <el-tab-pane label="联系人" name="contacts">
                 <customer-contacts ref="contacts"></customer-contacts>
@@ -139,10 +147,11 @@
     import customerVoiceLogsList from '../components/customerVoiceLogsList.vue';
     import customerStoreOrderList from '../components/customerStoreOrderList.vue';
     import customerContacts from './customerContacts.vue';
+    import AiTagPanel from './AiTagPanel.vue';
     import { getCustomer } from "@/api/crm/customer";
     export default {
         name: "customer",
-        components: { customerContacts,customerVisitList,customerLogsList,customerVoiceLogsList,customerStoreOrderList,customerSmsLogsList },
+        components: { customerContacts,customerVisitList,customerLogsList,customerVoiceLogsList,customerStoreOrderList,customerSmsLogsList,AiTagPanel },
         data() {
             return {
                 customerExts:[],
@@ -222,12 +231,16 @@
                         });
                     }
                     this.activeName="contacts"
-                    setTimeout(() => {
-                        that.$refs.contacts.getData(this.item.customerId);
-                    }, 500);
+            setTimeout(() => {
+                that.$refs.contacts.getData(this.item.customerId);
+            }, 500);
 
-                });
-            },
+        });
+    },
+    handleTagChange() {
+      // 标签变化时的回调
+      console.log("标签发生变化");
+    }
         }
     };
 </script>

+ 392 - 0
src/views/crm/propertyTemplate/index.vue

@@ -0,0 +1,392 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="属性名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入属性名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="属性类型" prop="valueType">
+        <el-select v-model="queryParams.valueType" placeholder="请选择属性类型" clearable size="small">
+          <el-option label="文本" value="text" />
+          <el-option label="数字" value="number" />
+          <el-option label="日期" value="date" />
+          <el-option label="单选" value="select" />
+          <el-option label="多选" value="multiSelect" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="行业类型" prop="tradeType">
+        <el-select v-model="queryParams.tradeType" placeholder="请选择行业类型" clearable size="small">
+          <el-option
+            v-for="dict in tradeTypeOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['crm:customerPropertyTemplate:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['crm:customerPropertyTemplate:remove']"
+        >删除</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="templateList" @selection-change="handleSelectionChange" border stripe>
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="index" label="序号" width="60" align="center" />
+      <el-table-column label="属性名称" align="center" prop="name" min-width="120">
+        <template slot-scope="scope">
+          <span class="property-name">{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="属性类型" align="center" prop="valueType" width="100">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.valueType === 'text'" type="info" size="small">文本</el-tag>
+          <el-tag v-else-if="scope.row.valueType === 'number'" type="warning" size="small">数字</el-tag>
+          <el-tag v-else-if="scope.row.valueType === 'date'" type="success" size="small">日期</el-tag>
+          <el-tag v-else-if="scope.row.valueType === 'select'" type="primary" size="small">单选</el-tag>
+          <el-tag v-else-if="scope.row.valueType === 'multiSelect'" type="danger" size="small">多选</el-tag>
+          <span v-else>{{ scope.row.valueType }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="行业类型" align="center" prop="tradeType" width="120">
+        <template slot-scope="scope">
+          <dict-tag v-if="scope.row.tradeType" :options="tradeTypeOptions" :value="scope.row.tradeType"/>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="AI提取提示" align="left" prop="aiHint" min-width="200" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <span class="ai-hint-text">{{ scope.row.aiHint || '-' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="意向开关" align="center" prop="intention" width="120">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.intention === 1 || scope.row.intention === '1'" type="success" size="small">开启</el-tag>
+          <el-tag v-else-if="scope.row.intention === 0 || scope.row.intention === '0'" type="info" size="small">关闭</el-tag>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
+        <template slot-scope="scope">
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 5px">{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150" fixed="right">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['crm:customerPropertyTemplate:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            style="color: #f56c6c"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['crm:customerPropertyTemplate:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body :close-on-click-modal="false">
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px" class="property-form">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="属性名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入属性名称" maxlength="50" show-word-limit />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="属性类型" prop="valueType">
+              <el-select v-model="form.valueType" placeholder="请选择属性类型" style="width: 100%">
+                <el-option label="文本" value="text" />
+                <el-option label="数字" value="number" />
+                <el-option label="日期" value="date" />
+                <el-option label="单选" value="select" />
+                <el-option label="多选" value="multiSelect" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="行业类型" prop="tradeType">
+              <el-select v-model="form.tradeType" placeholder="请选择行业类型" style="width: 100%" clearable>
+                <el-option
+                  v-for="dict in tradeTypeOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-divider content-position="left">AI配置</el-divider>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="AI提取提示" prop="aiHint">
+              <el-input 
+                v-model="form.aiHint" 
+                type="textarea" 
+                :rows="4" 
+                placeholder="请输入AI属性提取提示,用于指导AI从对话中提取该属性的值。例如:请从对话中提取患者的年龄信息,注意识别数字和单位" 
+                maxlength="500"
+                show-word-limit
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-divider content-position="left">其他信息</el-divider>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="意向开关" prop="intention">
+              <el-switch v-model="form.intention" active-value="1" inactive-value="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注信息" maxlength="200" show-word-limit />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listPropertyTemplate, getPropertyTemplate, delPropertyTemplate, addPropertyTemplate, updatePropertyTemplate, exportPropertyTemplate } from "@/api/crm/propertyTemplate";
+
+export default {
+  name: "PropertyTemplate",
+  data() {
+    return {
+      loading: true,
+      ids: [],
+      single: true,
+      multiple: true,
+      showSearch: true,
+      total: 0,
+      templateList: [],
+      title: "",
+      open: false,
+      tradeTypeOptions: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        valueType: null,
+        tradeType: null
+      },
+      form: {},
+      rules: {
+        name: [
+          { required: true, message: "属性名称不能为空", trigger: "blur" }
+        ],
+        valueType: [
+          { required: true, message: "属性类型不能为空", trigger: "change" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+    this.getDicts("trade_type").then(response => {
+      this.tradeTypeOptions = response.data;
+    });
+  },
+  methods: {
+    getList() {
+      this.loading = true;
+      listPropertyTemplate(this.queryParams).then(response => {
+        this.templateList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        valueType: null,
+        aiHint: null,
+        tradeType: null,
+        intention: null,
+        remark: null
+      };
+      this.resetForm("form");
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加客户属性模板";
+    },
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getPropertyTemplate(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改客户属性模板";
+      });
+    },
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updatePropertyTemplate(this.form).then(response => {
+              if (response.code === 200) {
+                this.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              }
+            });
+          } else {
+            addPropertyTemplate(this.form).then(response => {
+              if (response.code === 200) {
+                this.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              }
+            });
+          }
+        }
+      });
+    },
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除客户属性模板编号为"' + ids + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return delPropertyTemplate(ids);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        }).catch(function() {});
+    },
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有客户属性模板数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return exportPropertyTemplate(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+        }).catch(function() {});
+    }
+  }
+};
+</script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+}
+
+.property-form {
+  padding: 10px 20px;
+}
+
+.property-form .el-divider {
+  margin: 15px 0;
+}
+
+.property-form .el-divider__text {
+  font-weight: 500;
+  color: #606266;
+}
+
+.property-form .el-form-item {
+  margin-bottom: 18px;
+}
+
+.property-form .el-textarea ::v-deep .el-textarea__inner {
+  resize: none;
+}
+
+.property-name {
+  font-weight: 500;
+  color: #303133;
+}
+
+.ai-hint-text {
+  color: #606266;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.el-table ::v-deep .el-table__row {
+  height: 50px;
+}
+
+.el-table ::v-deep .el-tag {
+  border-radius: 4px;
+}
+</style>