index.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <template>
  2. <div class="com-formual">
  3. <el-button @click="searchEx">检索</el-button>
  4. <!-- 显示匹配到的结果 -->
  5. <div v-if="matchResults.length" class="match-results">
  6. <div
  7. v-for="(item, index) in matchResults"
  8. :key="index"
  9. class="match-item"
  10. >
  11. <div class="match-content">
  12. <span>原始值: {{ item }}</span>
  13. <span>替换后: {{ item + "1" }}</span>
  14. </div>
  15. <div class="actions">
  16. <el-button size="small" @click="replaceItem(item)">替换</el-button>
  17. </div>
  18. </div>
  19. <el-button type="primary" @click="replaceAll">批量替换</el-button>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import { searchSourceData, deleteSourceData } from "@/api/sourceData";
  25. /* import { search } from "core-js/fn/symbol"; */
  26. import LuckyExcel from "luckyexcel"; //引入LuckyExcel
  27. import axios from "axios";
  28. export default {
  29. name: "SourceEs",
  30. emits: ["onPicked"],
  31. props: {
  32. TemList: {
  33. type: Array,
  34. default: [],
  35. },
  36. },
  37. components: {},
  38. data() {
  39. return {
  40. tableCode: "",
  41. tableList: [],
  42. showConfirm: false,
  43. fileLoadStatus: false,
  44. showSearch: false,
  45. position: {
  46. tb: "",
  47. c: 0,
  48. r: 0,
  49. sheet: "",
  50. value: "",
  51. },
  52. dataIntro: "",
  53. textInfo: "",
  54. loading: false, // 增加 loading 状态
  55. searchResult: {},
  56. matchResults: [], // 存储匹配到的结果
  57. };
  58. },
  59. mounted() {
  60. this.initTableList();
  61. },
  62. methods: {
  63. searchEx() {
  64. let allMatches = [];
  65. this.TemList.forEach((el) => {
  66. const matches = el.content.match(
  67. /\[[A-Z0-9]+-[A-Z0-9]+-[0-9]+-[0-9]+\]/g
  68. );
  69. if (matches) {
  70. allMatches = [...allMatches, ...matches];
  71. }
  72. });
  73. // 去重
  74. this.matchResults = [...new Set(allMatches)];
  75. console.log("匹配到的结果:", this.matchResults);
  76. },
  77. // 单个替换
  78. replaceItem(item) {
  79. this.$confirm(`确认将 ${item} 替换为 ${item}1?`, "提示", {
  80. confirmButtonText: "确定",
  81. cancelButtonText: "取消",
  82. type: "warning",
  83. })
  84. .then(() => {
  85. // 这里添加替换逻辑
  86. this.$message.success("替换成功");
  87. })
  88. .catch(() => {
  89. // 取消操作
  90. });
  91. },
  92. // 批量替换
  93. replaceAll() {
  94. this.$confirm(
  95. `确认批量替换 ${this.matchResults.length} 项内容?`,
  96. "提示",
  97. {
  98. confirmButtonText: "确定",
  99. cancelButtonText: "取消",
  100. type: "warning",
  101. }
  102. )
  103. .then(() => {
  104. // 这里添加批量替换逻辑
  105. this.$message.success("批量替换成功");
  106. })
  107. .catch(() => {
  108. // 取消操作
  109. });
  110. },
  111. /* 检索当前模版的所有内容 */
  112. /* searchEx() {
  113. console.log("TemList", this.TemList);
  114. this.TemList.map((el) => {
  115. const matches = el.content.match(/\[[A-Z0-9]+-[A-Z0-9]+-[0-9]+-[0-9]+\]/g);
  116. console.log("matches",matches);
  117. return matches || []; // 如果没有匹配到返回空数组
  118. el.content = el.content.replace(
  119. /\[[A-Z0-9]+-[A-Z0-9]+-[0-9]+-[0-9]+\]/g,
  120. (match) => {
  121. // match 是匹配到的原始文本,例如 [FT7-RP-00-012]
  122. // 这里可以根据需求对 match 进行处理
  123. return `${match}1`; // 例如:替换后的[FT7-RP-00-012]
  124. // 或者返回其他处理结果
  125. }
  126. );
  127. return el;
  128. });
  129. }, */
  130. /* ai检索 */
  131. initTableList() {
  132. let _this = this;
  133. searchSourceData({ page: 1, pageSize: 999, status: 5 }).then((res) => {
  134. if (res.status != 200) return;
  135. _this.tableList = res.data.dataList;
  136. });
  137. },
  138. },
  139. };
  140. </script>
  141. <style lang="scss" scoped>
  142. .match-results {
  143. margin-top: 20px;
  144. .match-item {
  145. padding: 10px;
  146. border-bottom: 1px solid #eee;
  147. display: flex;
  148. justify-content: space-between;
  149. align-items: center;
  150. .match-content {
  151. flex: 1;
  152. display: flex;
  153. gap: 20px;
  154. }
  155. .actions {
  156. margin-left: 10px;
  157. }
  158. }
  159. }
  160. </style>