feat：看课记录添加sop搜索

src/api/qw/sop.js

@@ -9,6 +9,15 @@ export function listSop(query) {
   })
 }
 
+// 查询所有的企微sop列表信息
+export function infoSop(query) {
+  return request({
+    url: '/qw/sop/info',
+    method: 'get',
+    params: query
+  })
+}
+
 export function listMySop(query) {
   return request({
     url: '/qw/sop/myList',

src/views/course/courseWatchLog/index.vue

@@ -67,6 +67,27 @@
           />
         </el-select>
       </el-form-item>
+    <!-- sop名称 -->
+    <el-form-item label="SOP名称" prop="sopId" v-if="queryParams.sendType == 2">
+      <el-autocomplete
+        v-model="sopSearchText"
+        :fetch-suggestions="querySopAsync"
+        placeholder="请输入SOP名称"
+        clearable
+        size="small"
+        style="width: 200px"
+        @select="handleSopSelect"
+        @clear="handleSopClear"
+        :trigger-on-focus="false"
+      >
+        <template slot-scope="{ item }">
+          <div class="sop-item">
+            <span class="sop-name">{{ item.name }}</span>
+          </div>
+        </template>
+      </el-autocomplete>
+    </el-form-item>
+
       <!-- 营期时间 -->
       <el-form-item label="营期时间" prop="scheduleTime">
         <el-input
@@ -465,6 +486,7 @@ import {searchTags} from "../../../api/qw/tag";
 import {addTagByWatch, delTagByWatch} from "../../../api/qw/externalContact";
 import Vue from 'vue'
 import Calendar from 'vue-mobile-calendar'
+import {infoSop} from "@/api/qw/sop";
 Vue.use(Calendar)
 
 export default {
@@ -592,6 +614,10 @@ export default {
         { dictLabel: '是', dictValue: 1 },
         { dictLabel: '否', dictValue: 0 }
       ],
+
+      // SOP搜索相关
+      sopSearchText: '', // SOP搜索框显示的文本
+      selectedSopId: null, // 选中的SOP ID
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -617,6 +643,7 @@ export default {
         scheduleEndTime: null,
         sendType:process.env.VUE_APP_COURSE_DEFAULT,
         isVip: null,
+        sopId: null, // sopId
       },
       // 表单参数
       form: {},
@@ -818,6 +845,10 @@ export default {
       this.queryParams.qecETime = null;
       this.queryParams.scheduleStartTime = null;
       this.queryParams.scheduleEndTime = null;
+      this.queryParams.sopId = null; // 重置SOP ID
+
+      // 重置SOP搜索
+      this.handleSopClear();
 
       // 统一重置日历组件
       this.resetCalendars();
@@ -1125,6 +1156,53 @@ export default {
       };
     },
 
+    /**
+     * 异步查询SOP列表
+     * @param {string} queryString - 查询字符串
+     * @param {function} callback - 回调函数
+     */
+    querySopAsync(queryString, callback) {
+      if (!queryString) {
+        callback([]);
+        return;
+      }
+
+      infoSop({ name: queryString }).then(response => {
+        if (response && response.rows) {
+          const suggestions = response.rows.map(item => ({
+            value: item.name,
+            id: item.id,
+            name: item.name
+          }));
+          callback(suggestions);
+        } else {
+          callback([]);
+        }
+      }).catch(error => {
+        console.error('通过sop查询失败:', error);
+        callback([]);
+      });
+    },
+
+    /**
+     * 选择SOP
+     * @param {object} item - 选中的SOP项
+     */
+    handleSopSelect(item) {
+      this.selectedSopId = item.id;
+      this.queryParams.sopId = item.id;
+      this.sopSearchText = item.name;
+    },
+
+    /**
+     * 清空SOP选择
+     */
+    handleSopClear() {
+      this.selectedSopId = null;
+      this.queryParams.sopId = null;
+      this.sopSearchText = '';
+    },
+
   }
 };
 </script>
@@ -1171,6 +1249,17 @@ export default {
   margin-left: 10px;
 }
 
+/* SOP搜索框样式 */
+.sop-item {
+  display: flex;
+  align-items: center;
+}
+
+.sop-name {
+  font-size: 14px;
+  color: #606266;
+}
+
 
 
 .button-new-tag {

src/views/course/courseWatchLog/watchLog.vue

@@ -79,6 +79,27 @@
           />
         </el-select>
       </el-form-item>
+
+      <!-- sop名称 -->
+      <el-form-item label="SOP名称" prop="sopId" v-if="queryParams.sendType == 2">
+        <el-autocomplete
+          v-model="sopSearchText"
+          :fetch-suggestions="querySopAsync"
+          placeholder="请输入SOP名称"
+          clearable
+          size="small"
+          style="width: 200px"
+          @select="handleSopSelect"
+          @clear="handleSopClear"
+          :trigger-on-focus="false"
+        >
+          <template slot-scope="{ item }">
+            <div class="sop-item">
+              <span class="sop-name">{{ item.name }}</span>
+            </div>
+          </template>
+        </el-autocomplete>
+      </el-form-item>
       <!-- 营期时间 -->
       <el-form-item label="营期时间" prop="scheduleTime">
         <el-input
@@ -207,7 +228,7 @@
       <el-table-column label="记录编号" align="center" prop="logId"/>
      <el-table-column label="客户昵称" align="center" prop="externalUserName" v-if="queryParams.sendType == 2"/>
 
-      &lt;!&ndash;      
+      &lt;!&ndash;
       <el-table-column label="会员ID" align="center" prop="userId" v-if="queryParams.sendType == 1"/>
       &ndash;&gt;
      <el-table-column label="客户头像" align="center" prop="externalUserAvatar" v-if="queryParams.sendType == 2">
@@ -477,6 +498,7 @@ import {addTagByWatch, delTagByWatch} from "../../../api/qw/externalContact";
 import {allListTagGroup} from "../../../api/qw/tagGroup";
 import Vue from 'vue'
 import Calendar from 'vue-mobile-calendar'
+import {infoSop} from "@/api/qw/sop";
 Vue.use(Calendar)
 
 export default {
@@ -606,6 +628,10 @@ export default {
         { dictLabel: '是', dictValue: 1 },
         { dictLabel: '否', dictValue: 0 }
       ],
+
+      // SOP搜索相关
+      sopSearchText: '', // SOP搜索框显示的文本
+      selectedSopId: null, // 选中的SOP ID
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -631,6 +657,7 @@ export default {
         scheduleEndTime: null,
         sendType:process.env.VUE_APP_COURSE_DEFAULT,
         isVip: null,
+        sopId: null, // sopId
       },
       // 表单参数
       form: {},
@@ -845,6 +872,10 @@ export default {
       this.queryParams.qecETime = null;
       this.queryParams.scheduleStartTime = null;
       this.queryParams.scheduleEndTime = null;
+      this.queryParams.sopId = null; // 重置SOP ID
+
+      // 重置SOP搜索
+      this.handleSopClear();
       // 统一重置日历组件
       this.resetCalendars();
 
@@ -1145,6 +1176,53 @@ export default {
         tagIds:[]
       };
     },
+
+    /**
+     * 异步查询SOP列表
+     * @param {string} queryString - 查询字符串
+     * @param {function} callback - 回调函数
+     */
+    querySopAsync(queryString, callback) {
+      if (!queryString) {
+        callback([]);
+        return;
+      }
+
+      infoSop({ name: queryString }).then(response => {
+        if (response && response.rows) {
+          const suggestions = response.rows.map(item => ({
+            value: item.name,
+            id: item.id,
+            name: item.name
+          }));
+          callback(suggestions);
+        } else {
+          callback([]);
+        }
+      }).catch(error => {
+        console.error('通过sop查询失败:', error);
+        callback([]);
+      });
+    },
+
+    /**
+     * 选择SOP
+     * @param {object} item - 选中的SOP项
+     */
+    handleSopSelect(item) {
+      this.selectedSopId = item.id;
+      this.queryParams.sopId = item.id;
+      this.sopSearchText = item.name;
+    },
+
+    /**
+     * 清空SOP选择
+     */
+    handleSopClear() {
+      this.selectedSopId = null;
+      this.queryParams.sopId = null;
+      this.sopSearchText = '';
+    },
   }
 };
 </script>
@@ -1220,4 +1298,15 @@ export default {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 3px;
 }
+
+/* SOP搜索框样式 */
+.sop-item {
+  display: flex;
+  align-items: center;
+}
+
+.sop-name {
+  font-size: 14px;
+  color: #606266;
+}
 </style>