feat：app发课、会员管理、sop任务等相关前端代码

package.json

@@ -89,6 +89,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@huaweicloud/huaweicloud-sdk-core": "^3.1.105",
     "@huaweicloud/huaweicloud-sdk-vod": "^3.1.105",
+    "@openim/wasm-client-sdk": "^3.8.3-patch.12",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.21.0",
     "chart.js": "^2.9.4",

src/api/app/article/index.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export function getArticleOptions(data) {
+  return request({
+    url: '/app/article/findOptions',
+    method: 'get',
+    params: data,
+  })
+}

src/api/app/course/courseFinishTemp.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request';
+
+export function findList(data) {
+  return request({
+    url: '/app/courseFinishTemp/findList',
+    method: 'get',
+    params: data
+  })
+}
+
+export function exportList(data) {
+  return request({
+    url: '/app/courseFinishTemp/export',
+    method: 'get',
+    params: data
+  })
+}
+
+export function getById(id) {
+  return request({
+    url: '/app/courseFinishTemp/getById/' + id,
+    method: 'get',
+  })
+}
+
+export function add(data) {
+  return request({
+    url: '/app/courseFinishTemp/add',
+    method: 'post',
+    data
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: '/app/courseFinishTemp/edit',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteByIds(ids) {
+  return request({
+    url: '/app/courseFinishTemp/deleteByIds/' + ids,
+    method: 'delete'
+  })
+}

src/api/app/course/index.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request';
+
+export function courseList(data) {
+  return request({
+    url: '/app/course/courseList',
+    method: 'get',
+    params: data
+  })
+}
+
+export function videoList(data) {
+  return request({
+    url: '/app/course/videoList',
+    method: 'get',
+    params: data
+  })
+}

src/api/app/cpsc/index.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+export function getList() {
+  return request({
+    url: '/app/cpsc/getList',
+    method: 'get'
+  })
+}
+
+

src/api/app/customerBind/index.js

@@ -0,0 +1,48 @@
+import request from '@/utils/request'
+
+// 查询绑定列表
+export function findList(query) {
+  return request({
+    url: '/app/comuserdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function getById(id) {
+  return request({
+    url: '/app/comuserdept/getById/' + id,
+    method: 'get',
+  })
+}
+
+export function deleteByIds(ids) {
+  return request({
+    url: '/app/comuserdept/deleteByIds/' + ids,
+    method: 'delete',
+  })
+}
+
+export function add(data) {
+  return request({
+    url: '/app/comuserdept/add',
+    method: 'post',
+    data: data
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: '/app/comuserdept/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+export function findCompanyUserOptions(data) {
+  return request({
+    url: '/company/companyUser/findOptions',
+    method: 'get',
+    params: data,
+  })
+}

src/api/app/groupChat/index.js

@@ -0,0 +1,63 @@
+import request from '@/utils/request'
+
+// 查询客户群详情列表
+export function listGroupChat(query) {
+  return request({
+    url: '/qw/groupChat/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function listGroupChatDeptList(query) {
+  return request({
+    url: '/qw/groupChat/deptList',
+    method: 'get',
+    params: query
+  })
+}
+export function listGroupChatMyList(query) {
+  return request({
+    url: '/qw/groupChat/myList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询客户群详情详细
+export function getGroupChat(chatId) {
+  return request({
+    url: '/qw/groupChat/' + chatId,
+    method: 'get'
+  })
+}
+export function allList(corpId) {
+  return request({
+    url: '/qw/groupChat/allList/' + corpId,
+    method: 'get'
+  })
+}
+
+// 同步客户群详情
+export function cogradientGroupChat(corpId) {
+  return request({
+    url: '/app/groupChat/cogradientGroupChat/'+corpId,
+    method: 'get',
+  })
+}
+
+export function cogradientMyGroupChat(corpId) {
+  return request({
+    url: '/qw/groupChat/cogradientMyGroupChat/'+corpId,
+    method: 'get',
+  })
+}
+
+
+
+export function listAll(qwUserIds, corpId, sopId, searchMsg) {
+  return request({
+    url: '/app/groupChat/listAll',
+    method: 'get',
+    params:{qwUserIds, corpId, sopId, searchMsg}
+  })
+}

src/api/app/invitationCode/index.js

@@ -0,0 +1,32 @@
+import request from '@/utils/request'
+
+export function findList(data) {
+  return request({
+    url: '/app/invCode/findList',
+    method: 'get',
+    params: data
+  })
+}
+
+export function save(data) {
+  return request({
+    url: '/app/invCode/save',
+    method: 'post',
+    data: data
+  })
+} 
+
+export function deleteByIds(ids) {
+  return request({
+    url: '/app/invCode/deleteByIds/' + ids,
+    method: 'delete'
+  })
+} 
+
+export function getById(data) {
+  return request({
+    url: '/app/invCode/getById',
+    method: 'get',
+    params: data
+  })
+} 

src/api/app/live/index.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request';
+
+export function getLiveOptions() {
+  return request({
+    url: '/live/live/getOptions',
+    method: 'get',
+  })
+}

src/api/app/medicines/index.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export function getMedicinesOptions(data) {
+  return request({
+    url: '/app/medicines/findOptions',
+    method: 'get',
+    params: data,
+  })
+}

src/api/app/openClassVideo/index.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export function getOpenClassVideoOptions(data) {
+  return request({
+    url: '/app/openClassVideo/findOptions',
+    method: 'get',
+    params: data,
+  })
+}

src/api/app/pkg/index.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export function getPackageOptions(data) {
+  return request({
+    url: '/his/package/getOptions',
+    method: 'get',
+    params: data
+  })
+}

src/api/app/product/index.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export function getProductOptions(data) {
+  return request({
+    url: '/app/civilianGoods/findOptions',
+    method: 'get',
+    params: data,
+  })
+}

src/api/app/shortVideo/index.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+
+export function getShortVideoOptions(data) {
+  return request({
+    url: '/app/shortVideo/findOptions',
+    method: 'get',
+    params: data,
+  })
+}

src/api/app/sop/info/index.js

@@ -0,0 +1,156 @@
+import request from '@/utils/request'
+
+// 查询企微sop列表
+export function listSop(query) {
+  return request({
+    url: '/app/sop/list',
+    method: 'get',
+    params: query
+  })
+}
+export function listMySop(query) {
+  return request({
+    url: '/app/sop/myList',
+    method: 'get',
+    params: query
+  })
+}
+export function getTempUserList(id) {
+  return request({
+    url: '/app/sop/getTempUserList',
+    method: 'get',
+    params: {id}
+  })
+}
+export function listDeptSop(query) {
+  return request({
+    url: '/app/sop/deptList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询企微sop模板列表
+export function listAiChatSop(query) {
+  return request({
+    url: '/app/sop/listAiChatSop',
+    method: 'get',
+    params: query
+  })
+}
+
+export function courseList(data) {
+  return request({
+    url: '/app/course/courseList',
+    method: 'get',
+    params: data
+  })
+}
+export function videoList(id,query) {
+
+  return request({
+    url: '/app/sop/videoList/' + id,
+    params: query,
+    method: 'get'
+  })
+}
+// 查询企微sop详细
+export function getSop(params) {
+  return request({
+    url: '/app/sop/getById',
+    method: 'get',
+    params: params
+  })
+}
+
+// 新增sop
+export function addSop(data) {
+  return request({
+    url: '/app/sop/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 新增企微sop
+export function updateTemp(data) {
+  return request({
+    url: '/app/sop/updateTemp',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改企微sop
+export function updateSop(data) {
+  return request({
+    url: '/app/sop/edit',
+    method: 'post',
+    data: data
+  })
+}
+//修改sop自动创建时间
+export function updateAutoSopTime(data) {
+  return request({
+    url: '/app/sop/updateAutoSopTime',
+    method: 'post',
+    data: data
+  })
+}
+
+//修改状态
+export function updateSopStatus(data) {
+  return request({
+    url: '/app/sop/updateSopStatus',
+    method: 'post',
+    data: data
+  })
+}
+// 删除sop
+export function delSop(id) {
+  return request({
+    url: '/app/sop/delete/' + id,
+    method: 'delete'
+  })
+}
+
+//批量执行sop
+export function executeSop(ids) {
+  return request({
+    url: '/app/sop/executeSop/' + ids,
+    method: 'put'
+  })
+}
+//批量执行企微sop先改状态
+export function updateStatus(ids) {
+  return request({
+    url: '/app/sop/updateStatus/' + ids,
+    method: 'get'
+  })
+}
+// 导出企微sop
+export function exportSop(query) {
+  return request({
+    url: '/app/sop/export',
+    method: 'get',
+    params: query
+  })
+}
+
+// 导出企微sop
+export function getSopVoiceList(params) {
+  return request({
+    url: '/app/sop/getSopVoiceList',
+    method: 'get',
+    params
+  })
+}
+
+
+// 修改企微sop
+export function updateSopQwUser(data) {
+  return request({
+    url: '/app/sop/updateSopQwUser',
+    method: 'post',
+    data: data
+  })
+}

src/api/app/sop/template/index.js

@@ -0,0 +1,150 @@
+import request from '@/utils/request'
+
+// 查询sop模板列表
+export function listSopTemp(query) {
+  return request({
+    url: '/app/sopTemp/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function listMySopTemp(query) {
+  return request({
+    url: '/app/sopTemp/myList',
+    method: 'get',
+    params: query
+  })
+}
+
+export function listDeptSopTemp(query) {
+  return request({
+    url: '/app/sopTemp/deptList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询sop模板详细
+export function getSopTemp(id) {
+  return request({
+    url: '/app/sopTemp/' + id,
+    method: 'get'
+  })
+}
+export function dayListFun(id) {
+  return request({
+    url: '/app/sopTemp/dayList',
+    method: 'get',
+    params: {id}
+  })
+}
+// 查询sop模板详细
+export function sortDay(list) {
+  return request({
+    url: '/app/sopTemp/sortDay',
+    method: 'post',
+    data: list
+  })
+}
+// 查询sop模板详细
+export function selectRulesInfo(id, name, dayNum) {
+  return request({
+    url: '/app/sopTemp/selectRulesInfo',
+    method: 'get',
+    params: {id, name, dayNum}
+  })
+}
+// 查询sop模板详细
+export function delRules(id, name, dayNum) {
+  return request({
+    url: '/app/sopTemp/delRules',
+    method: 'get',
+    params: {id, name, dayNum}
+  })
+}
+
+// 新增sop模板
+export function addSopTemp(data) {
+  return request({
+    url: '/app/sopTemp/sopTemp',
+    method: 'post',
+    data: data
+  })
+}
+// 新增sop模板
+export function addTemp(data) {
+  return request({
+    url: '/app/sopTemp/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 新增sop模板
+export function copyTemplate(data) {
+  return request({
+    url: '/app/sopTemp/copy',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改sop模板
+export function updateTemp(data) {
+  return request({
+    url: '/app/sopTemp/edit',
+    method: 'post',
+    data: data
+  })
+}
+// 修改sop模板
+export function addOrUpdateSetting(data) {
+  return request({
+    url: '/app/sopTemp/addOrUpdateSetting',
+    method: 'post',
+    data: data
+  })
+}
+// 修改sop模板
+export function updateSopTemp(data) {
+  return request({
+    url: '/app/sopTemp/sopTemp',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除sop模板
+export function delSopTemp(id) {
+  return request({
+    url: '/app/sopTemp/' + id,
+    method: 'delete'
+  })
+}
+// 删除sop模板
+export function updateImage(id) {
+  return request({
+    url: '/app/sopTemp/updateImage',
+    method: 'get',
+    params: {id}
+  })
+}
+
+
+export function shareSopTemp(data) {
+  return request({
+    url: '/app/sopTemp/shareTemp',
+    method: 'post',
+    data: data
+  })
+}
+
+// 导出sop模板
+export function exportSopTemp(query) {
+  return request({
+    url: '/app/sopTemp/export',
+    method: 'get',
+    params: query
+  })
+}

src/api/app/sopLogs/index.js

@@ -0,0 +1,74 @@
+import request from '@/utils/request'
+
+// 查询SOP  定时任务列表
+export function listQwSopLogs(query) {
+  return request({
+    url: '/qw/sopLogs/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询SOP  定时任务列表
+export function listSopLogsList(query) {
+  return request({
+    url: '/app/sopLogs/findList',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 查询SOP  定时任务详细
+export function getQwSopLogs(id) {
+  return request({
+    url: '/qw/sopLogs/' + id,
+    method: 'get'
+  })
+}
+
+// 新增SOP  定时任务
+export function addQwSopLogs(data) {
+  return request({
+    url: '/qw/sopLogs',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改SOP  定时任务
+export function updateQwSopLogs(data) {
+  return request({
+    url: '/qw/sopLogs',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除SOP  定时任务
+export function delSopLogs(ids) {
+  return request({
+    url: '/app/sopLogs/deleteByIds/' + ids,
+    method: 'delete'
+  })
+}
+
+//修改 执行记录为待发送
+export function editCourseSopLogs(id) {
+  return request({
+    url: '/app/sopLogs/editCourseSopLogs/' + id,
+    method: 'put'
+  })
+}
+
+
+
+// 导出SOP  定时任务
+export function exportSopLogs(query) {
+  return request({
+    url: '/app/sopLogs/export',
+    method: 'get',
+    params: query
+  })
+}

src/api/app/tag/bindTag.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+//
+export function bindTag(param) {
+  return request({
+    url: '/vip/userTag/bind',
+    method: 'post',
+    data: param
+  })
+}
+
+export function unbindTag(param) {
+  return request({
+    url: '/vip/userTag/unbind',
+    method: 'post',
+    data: param
+  })
+}
+
+export function bindTagV2(param) {
+  return request({
+    url: '/vip/userTag/bind/v2',
+    method: 'post',
+    data: param
+  })
+}
+
+export function unbindTagV2(param) {
+  return request({
+    url: '/vip/userTag/unbind/v2',
+    method: 'post',
+    data: param
+  })
+}

src/api/app/tag/tagGroup.js

@@ -0,0 +1,69 @@
+import request from '@/utils/request'
+
+// 查询会员标签组列表
+export function listTagGroup(query) {
+  return request({
+    url: '/vip/tagGroup/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function listTag(query) {
+  return request({
+    url: '/vip/tag/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询会员标签组列表
+export function listTagGroupForUserBindTag(query) {
+  return request({
+    url: '/vip/tagGroup/listForUserBindTag',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询会员标签组详细
+export function getTagGroup(id) {
+  return request({
+    url: '/vip/tagGroup/getById/' + id,
+    method: 'get'
+  })
+}
+
+// 批量查询会员标签组详细
+export function getTagByIds(ids) {
+  return request({
+    url: '/vip/tagGroup/getTagByIds/' + ids,
+    method: 'get'
+  })
+}
+
+// 新增会员标签组
+export function addTagGroup(data) {
+  return request({
+    url: '/vip/tagGroup/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改会员标签组
+export function updateTagGroup(data) {
+  return request({
+    url: '/vip/tagGroup/edit',
+    method: 'post',
+    data: data
+  })
+}
+
+export function searchTags(query) {
+  return request({
+    url: '/vip/tagGroup/listForUserBindTag',
+    method: 'get',
+    params: query
+  })
+}

src/api/app/urgentClass/index.js

@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+
+/**
+ * 查询催课任务看板列表
+ * @param {*} query
+ * @returns
+ */
+export function listUrgentClassTask(query) {
+  return request({
+    url: '/app/urgentClass/list',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 设置状态
+ * @param {*} query
+ * @returns
+ */
+export function setStatus(data) {
+  return request({
+    url: '/app/urgentClass/setStatus',
+    method: 'post',
+    data: data
+  })
+}
+/**
+ * 查询app-任务看板用户电话
+ * @param {*} fsUserId
+ * @returns
+ */
+export function getFsUserPhone(fsUserId) {
+  return request({
+    url: '/app/urgentClass/getFsUserPhone/' + fsUserId,
+    method: 'get'
+  })
+}

src/api/app/user/index.js

@@ -0,0 +1,64 @@
+import request from '@/utils/request'
+
+// 根据用户id列表获取用户信息
+export function getUserByIds(ids) {
+  return request({
+    url: '/app/user/getByIds/' + ids,
+    method: 'get',
+  })
+}
+
+// 给用户绑定客服
+export function bindUserCusByIds(data) {
+  return request({
+    url: '/vip/userCusRole/bind',
+    method: 'post',
+    data: data
+  })
+}
+
+// 给用户解绑客服
+export function unbindUserCusByIds(data) {
+  return request({
+    url: '/vip/userCusRole/unbind',
+    method: 'post',
+    data: data
+  })
+}
+
+// 给用户绑定客服v2
+export function bindUserCusByIdsV2(data) {
+  return request({
+    url: '/vip/userCusRole/bind/v2',
+    method: 'post',
+    data: data
+  })
+}
+
+// 给用户解绑客服v2
+export function unbindUserCusByIdsV2(data) {
+  return request({
+    url: '/vip/userCusRole/unbind/v2',
+    method: 'post',
+    data: data
+  })
+}
+
+// 用户获取列表
+export function listAppUser(data) {
+  return request({
+    url: '/app/user/findList',
+    method: 'get',
+    params: data
+  })
+}
+
+// 用户导出列表
+export function exportAppUser(data) {
+  return request({
+    url: '/app/user/export',
+    method: 'get',
+    params: data
+  })
+}
+

src/api/app/user/portrait.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 用户画像列表
+export function listUserPortrait(params) {
+  return request({
+    url: '/app/user/portrait/findList',
+    method: 'get',
+    params
+  })
+}
+
+// 获取用户疗法周期详情（cycleName: 具体周期名称）
+export function getUserTreatmentCycle(userId, cycleName) {
+  return request({
+    url: '/app/user/portrait/treatmentCycle/' + userId,
+    method: 'get',
+    params: cycleName ? { cycleName } : {}
+  })
+}
+
+// 批量绑定/撤销标签（contentId: 视频id集合, tagId: 标签id集合, contentType: 固定为1）
+export function bindUserTag(data) {
+  return request({
+    url: '/app/user/portrait/bind/tag',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改信息
+export function saveEdit(data) {
+  return request({
+    url: '/app/user/portrait/saveEdit',
+    method: 'post',
+    data: data
+  })
+}

src/api/app/user/userInfo.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 根据用户id列表获取用户信息
+export function getAIUserInfoByUserId(id) {
+  return request({
+    url: '/app/fsUserInfo/getByUserId/' + id,
+    method: 'get',
+  })
+}
+
+// 保存
+export function saveAiUserInfo(data) {
+  return request({
+    url: '/app/fsUserInfo/saveUserInfo',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 获取用户兴趣标签
+export function getUserTags(userId) {
+  return request({
+    url: '/app/fsUserInfo/getUserTags/' + userId,
+    method: 'get',
+  })
+}

src/api/app/user/userList.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+// 查询app用户列表
+export function listUser(query) {
+  return request({
+    url: '/app/user/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function listRole(query) {
+  return request({
+    url: '/app/cusrole/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function accountCheck(userId) {
+  return request({
+    url: '/app/cusrole/accountCheck',
+    method: 'post',
+    data: { userId: userId }
+  })
+}

src/api/app/userChatLogs/index.js

@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+//获取对话列表
+export function findList(data) {
+  return request({
+    url: '/app/userChatLogs/findList',
+    method: 'get',
+    params: data,
+  })
+}
+
+/**
+ * 
+ * 
+ * 获取对话聊天记录
+ * @param {*} data 
+ * @returns 
+ */
+export function findChatLogsByUserIdAndCustomerId(data) {
+  return request({
+    url: '/app/userChatLogs/findChatLogsByUserIdAndCustomerId',
+    method: 'get',
+    params: data,
+  })
+}
+
+/**
+ * 
+ * 
+ * 修改对话内容
+ * @param {*} data 
+ * @returns 
+ */
+export function editUserChatLogs(data) {
+  return request({
+    url: '/app/userChatLogs/edit',
+    method: 'post',
+    data: data,
+  })
+}

src/api/app/userLogs/index.js

@@ -0,0 +1,126 @@
+import request from '@/utils/request'
+
+// 查询sopUserLogs列表
+export function listSopUserLogs(query) {
+  return request({
+    url: '/app/userLogs/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询sopUserLogs详细
+export function getSopUserLogs(id) {
+  return request({
+    url: '/qwSop/sopUserLogs/' + id,
+    method: 'get'
+  })
+}
+
+// 新增sopUserLogs
+export function addSopUserLogs(data) {
+  return request({
+    url: '/qwSop/sopUserLogs',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改sopUserLogs
+export function updateSopUserLogs(data) {
+  return request({
+    url: '/qwSop/sopUserLogs',
+    method: 'put',
+    data: data
+  })
+}
+// 修改sopUserLogs
+export function updateLogDate(data) {
+  return request({
+    url: '/qwSop/sopUserLogs/updateLogDate',
+    method: 'post',
+    data: data
+  })
+}
+
+export function replaceUser(data) {
+  return request({
+    url: '/qwSop/sopUserLogs/replaceUser',
+    method: 'post',
+    data: data
+  })
+}
+// 修改sopUserLogs
+export function addGroupChat(data) {
+  return request({
+    url: '/qwSop/sopUserLogs/addGroupChat',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除sopUserLogs
+export function delSopUserLogs(id) {
+  return request({
+    url: '/app/userLogs/' + id,
+    method: 'delete'
+  })
+}
+
+export function updateTimeSopUserLogs(data) {
+  return request({
+    url: '/app/userLogs/batchUpdateSopUserLogsToTime',
+    method: 'post',
+    data: data
+  })
+}
+
+// 导出sopUserLogs
+export function exportSopUserLogs(query) {
+  return request({
+    url: '/qwSop/sopUserLogs/export',
+    method: 'get',
+    params: query
+  })
+}
+
+// 导出sopUserLogs
+export function getSelectChat(id) {
+  return request({
+    url: '/qwSop/sopUserLogs/getSelectChat',
+    method: 'get',
+    params: {id}
+  })
+}
+
+//修复营期
+export function repairSopUserLogs(data) {
+  return request({
+    url: '/qwSop/sopUserLogs/repairSopUserLogs',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getCompanyMiniAppList() {
+  return request({
+    url: '/company/companyConfig/getCompanyMiniAppList',
+    method: 'get'
+  })
+}
+export function getShortLink(data) {
+  return request({
+    url: '/qwSop/sopUserLogs/getShortLink',
+    method: 'get',
+    params: data
+  })
+}
+
+
+export function groupSendMessage(data) {
+  return request({
+    url: '/app/userLogs/groupSendMessage',
+    method: 'post',
+    data: data
+  })
+}

src/api/app/userLogsInfo/index.js

@@ -0,0 +1,79 @@
+import request from '@/utils/request'
+
+// 查询sopUserLogsInfo列表
+export function listSopUserLogsInfo(query) {
+  return request({
+    url: '/app/userLogsInfo/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询sopUserLogsInfo详细
+export function getSopUserLogsInfo(id) {
+  return request({
+    url: '/qwSop/sopUserLogsInfo/' + id,
+    method: 'get'
+  })
+}
+
+// 新增sopUserLogsInfo
+export function addSopUserLogsInfo(data) {
+  return request({
+    url: '/qwSop/sopUserLogsInfo',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改sopUserLogsInfo
+export function updateSopUserLogsInfo(data) {
+  return request({
+    url: '/qwSop/sopUserLogsInfo',
+    method: 'put',
+    data: data
+  })
+}
+
+export function batchUpdateSopUserLogsInfoToTime(data) {
+  return request({
+    url: '/app/userLogsInfo/batchUpdateSopUserLogsInfoToTime',
+    method: 'post',
+    data: data
+  })
+}
+
+// 删除sopUserLogsInfo
+export function delSopUserLogsInfo(id) {
+  return request({
+    url: '/app/userLogsInfo/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出sopUserLogsInfo
+export function exportSopUserLogsInfo(query) {
+  return request({
+    url: '/qwSop/sopUserLogsInfo/export',
+    method: 'get',
+    params: query
+  })
+}
+
+//一键群发
+export function sendMsgSop(data) {
+  return request({
+    url: '/qwSop/sopUserLogsInfo/sendUserLogsInfoMsg',
+    method: 'post',
+    data: data
+  })
+}
+
+//一键群发新版
+export function sendMsgSopType(data) {
+  return request({
+    url: '/qwSop/sopUserLogsInfo/sendUserLogsInfoMsgType',
+    method: 'post',
+    data: data
+  })
+}

src/api/app/welcome/index.js

@@ -0,0 +1,64 @@
+import request from '@/utils/request'
+
+/**
+ * 查询欢迎语列表
+ * @param {*} query 
+ * @returns 
+ */
+export function list(query) {
+    return request({
+        url: '/app/welcome/list',
+        method: 'get',
+        params: query
+    })
+}
+
+/**
+ * 保存欢迎语
+ * @param {*} data 
+ * @returns 
+ */
+export function save(data) {
+    return request({
+        url: '/app/welcome/save',
+        method: 'post',
+        data: data
+    })
+}
+
+/**
+ * 删除欢迎语
+ * @param {*} data 
+ * @returns 
+ */
+export function deleteByIds(ids) {
+    return request({
+        url: '/app/welcome/deleteByIds/' + ids,
+        method: 'delete'
+    })
+}
+
+/**
+ * 根据id获取欢迎语详情
+ * @param {*} data 
+ * @returns 
+ */
+export function getById(id) {
+    return request({
+        url: '/app/welcome/getById/' + id,
+        method: 'get'
+    })
+}
+
+/**
+ * 设置发送状态
+ * @param {*} data 
+ * @returns 
+ */
+export function setSendStatus(data) {
+    return request({
+        url: '/app/welcome/setSendStatus',
+        method: 'post',
+        data: data
+    })
+}

src/api/system/appDept.js

@@ -0,0 +1,77 @@
+import request from '@/utils/request'
+
+// 查询部门列表
+export function listDept(query) {
+  return request({
+    url: '/app/dept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（排除节点）
+export function listDeptExcludeChild(deptId) {
+  return request({
+    url: '/app/dept/list/exclude/' + deptId,
+    method: 'get'
+  })
+}
+
+// 查询部门详细
+export function getDept(deptId) {
+  return request({
+    url: '/app/dept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 查询部门下拉树结构
+export function treeselect() {
+  return request({
+    url: '/app/dept/treeselect',
+    method: 'get'
+  })
+}
+
+// 根据角色ID查询部门树结构
+export function roleDeptTreeselect(roleId) {
+  return request({
+    url: '/app/dept/roleDeptTreeselect/' + roleId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/app/dept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/app/dept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/app/dept/' + deptId,
+    method: 'delete'
+  })
+}
+
+
+export function companyOption(query) {
+  return request({
+    url: '/company/company/getCompanyList',
+    method: 'get',
+    params: query
+  })
+}

src/assets/callCenterPhoneBarSdk/ccPhoneBarSocket.js

@@ -0,0 +1,1926 @@
+/*
+ * 呼叫中心电话工具条
+ * author: easycallcenter365@126.com
+ * 2025-04-08
+*/
+
+// 导入 jQuery
+import $ from './jquery-1.11.0.js';
+
+function _phoneBarObserver(){
+	if(!(this instanceof _phoneBarObserver)){
+		return new _phoneBarObserver();
+	}
+	this.listeners = {}
+};
+_phoneBarObserver.prototype = {
+	on: function (key, callback) { this.addListener(key, callback); },
+	off: function (key, callback) { this.removeListener(key, callback); },
+	addListener: function (key, callback) {
+		if(!this.listeners[key]) {
+			this.listeners[key] = [];
+		}
+		this.listeners[key].push(callback);
+	},
+	removeListener: function (key, callback) {
+		if(this.listeners[key]) {
+			if(callback) {
+				const index = this.listeners[key].indexOf(callback);
+				if (index > -1) {
+					this.listeners[key].splice(index, 1);
+				}
+			}else {
+				this.listeners[key] = [];
+			}
+		}
+	},
+	notifyAll: function (key, info) {
+		if(!this.listeners[key]) return;
+		for (var i = 0; i < this.listeners[key].length; i++) {
+			if (typeof this.listeners[key][i] === 'function') {
+				this.listeners[key][i](info);
+			}
+		}
+	},
+	make: function (o) {
+		for (var i in this) {
+			o[i] = this[i];
+			o.listeners = {}
+		}
+	}
+};
+
+//呼叫中心websocket通信对象
+"use strict";
+function ccPhoneBarSocket() {
+	var observer = new _phoneBarObserver();
+	observer.make(this);
+	var _cc = this;
+	var ws = null;
+	var wsuri = null;
+	var isConnected = false;
+	/* 通话已建立 */
+	var callConnected = false;
+	/*
+	 *  是否可以发送视频通话邀请;
+	 */
+	var canSendVideoReInvite = false;
+	/**
+	 * 是否开启了坐席状态列表订阅
+	 * @type {boolean}
+	 */
+	this.subscribeAgentListStarted = false;
+	this.iframe = null;
+	this.callConfig = {
+		 // 使用默认的UI，还是使用自定义的UI
+		'useDefaultUi': false,
+		//呼叫控制服务器地址
+		'ipccServer': 'sip.ylrzcloud.com',
+		//是否启用websocket安全连接
+		'enableWss' : true,
+		//语音编码
+		'callCodec' : 'pcma',
+		//是否发送心跳数据
+		'enableHeartBeat' : true,
+		//送心跳数据的时间间隔; 秒;
+		'heartBeatIntervalSecs' : 16,
+		// 工具条外呼时： 软电话和外呼通话，使用相同的语音编码，避免转码，从而提高性能;
+		// 但是!： 如果客户端是网页电话，且外呼线路使用g729编码时，该参数需要设置为false，
+		// 因为网页电话不支持g729编码; [此时会产生语音编码的转码]
+		'useSameAudioCodeForOutbound' : true,
+		// 令牌
+		'loginToken' : '',
+
+		 // 网关列表, 如果是注册模式： 网关地址参数则填写为网关名称;
+		 // 安全起见，生产环境，需要把该参数加密为base64格式;
+		'gatewayList' : [
+			{
+				uuid         :  '01',
+				updateTime         :  1675953810492,
+				gatewayAddr  : '113.207.68.30:5543;external', // 网关地址 + 外呼环境[可选参数，默认为external];
+				callerNumber : '02386990208',    // 主叫号码
+				calleePrefix : '',       // 被叫前缀
+				priority     : 1,        // 优先级
+				concurrency  : 1000,       // 并发数
+				register     : false,    // 是否注册模式
+				audioCodec   : 'g711'    // 语音编码，可用选择项 g711、g729
+			}
+		],
+
+	    'gatewayEncrypted' : false,
+
+		 // 分机注册配置;
+		 //Freeswitch服务器地址
+		 'fsServer' : '129.28.164.235:5060',
+		 // 分机账户
+		 'extnum' : '1001',
+		 // 工号
+		 'opnum' : 'admin',
+		 //业务组编号
+		 'groupId' : '1',
+		 //全部业务组列表
+		 'groups' : null,
+		 //全部坐席人员列表
+		 'agentList' : null,
+		 'extPassword': '0406f9d44bb8fe195a1ee2557bbeebf7',  // 分机密码
+		 'phoneType': 'EyeBeam',         // 电话类型
+		 'webPhoneUrl' : 'None',
+
+		 // 客户端软电话代理配置信息
+		 'localHostProxyVersion' : 'v20221130_1736',  // 本地代理软件的版本信息
+		 'localHostProxyPort' : 8888    // 本地代理软件端口;
+	};
+
+	/**
+	 * 在指定html对象后追加新元素
+	 * @param newElement
+	 * @param targetElement
+	 */
+	this.insertAfter = function(newElement,targetElement)
+	{
+		var parent = targetElement.parentNode;
+		if(parent.lastChild === targetElement)
+		{
+			parent.appendChild(newElement);
+		}else{
+			parent.insertBefore(newElement,targetElement.nextSibling);
+		}
+	};
+
+	this.trim = function (str) {
+		return str.replace(/^\s\s*/,'').replace(/\s\s*$/, '');
+	};
+    this.getIsConnected = function(){
+    	return isConnected;
+    };
+    /**
+     *  获取通话状态
+     * @returns {boolean} true通话中，false通话未建立;
+     */
+    this.getCallConnected = function(){
+        return callConnected;
+    };
+    /**
+     *  设置通话状态;
+     * @param value true通话中，false通话未建立
+     * @returns {*}
+     */
+    this.setCallConnected = function(value){
+        callConnected = value;
+    };
+
+	/**
+	 *  设置一个标志，指示是否可以发起视频通话;
+	 * 仅限通话为音频通话且通话已经接通时方可允许发起视频邀请；
+	 * @param value
+	 */
+	this.setCanSendVideoReInvite = function(value){
+		canSendVideoReInvite = value;
+	};
+
+	/**
+	 *  设置一个标志，指示是否可以发起视频通话;
+	 * @param value
+	 */
+	this.getCanSendVideoReInvite = function(){
+	    return 	canSendVideoReInvite;
+	};
+
+	this.setHeartbeat = function()
+	{
+		setInterval(function(){
+			//如果启用了心跳，而且用户已经登录上线,则发送心跳数据
+			if(_cc.callConfig.enableHeartBeat && _cc.getIsConnected()){
+				console.debug("try to send heartbeat.");
+				var heartBeat = {};
+				heartBeat.action="setHearBeat";
+				heartBeat.body = "{}";
+				_cc.sendMsg(heartBeat);
+			}
+		}, _cc.callConfig.heartBeatIntervalSecs * 1000);
+	};
+
+	this.loadScript = function(destUrl, callbackFunc){
+		var script = document.createElement("script");
+        script.type = "text/javascript";
+        script.src = destUrl;
+		if(null != callbackFunc){
+		   script.onload=function(){callbackFunc();}
+		}
+		document.getElementsByTagName('head')[0].appendChild(script);
+	};
+
+    // 初始化websocket连接参数
+	this.initConfig = function(config) {
+		//把config中的属性全部拷贝到callConfig中;
+		for(var element in config) {
+			this.callConfig[element] = config[element];
+		}
+
+		var _loginToken = this.callConfig["loginToken"];
+		if(typeof(_loginToken) == "undefined" && _loginToken === "") {
+			alert("电话工具条：无法获取 loginToken!");
+			return;
+		}
+
+    console.log("callConfig:", JSON.stringify(this.callConfig));
+    //线上enableWss: true 本地调试为false
+    if(_cc.callConfig.enableWss){
+      wsuri = 'wss://' + this.callConfig.ipccServer +
+	    			'/call-center/websocketServer?' +
+			'&loginToken=' + this.callConfig.loginToken;
+    }else{
+      wsuri = 'ws://129.28.164.235:1081/call-center/websocketServer?' +
+        '&loginToken=' + this.callConfig.loginToken;
+    }
+    console.log("ipccServer url: " + wsuri);
+	    var ipccServerIpAddr = this.callConfig.ipccServer.split(":");
+	    if(this.callConfig.enableWss &&  this.checkIP(ipccServerIpAddr)){
+	    	var tipsError = "ERROR! 启用了wss之后，必须使用域名访问websocketServer! " + this.callConfig.ipccServer;
+	    	console.log(tipsError);
+	    	alert(tipsError);
+		}
+	    if(this.callConfig.enableHeartBeat) {
+			_cc.setHeartbeat();
+		}
+
+		//var downLoadUrl = "http://192.168.66.71:81/soft/callcenter-soft/LocalHostProxy/LocalHostProxy-" +
+							  _cc.callConfig["localHostProxyVersion"] + ".zip";
+		//console.log("客户端代理软件的下载地址:", downLoadUrl);
+        //this.createIframe("http://127.0.0.1:8888/getVersion");
+
+        if(_cc.callConfig["useDefaultUi"]){
+			this.initPhoneBarUI();
+		}
+	};
+
+	//检测ip地址是否合法;
+	this.checkIP = function (ip)
+	{
+	    var re =  /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/ ;
+	    return re.test(ip);
+	};
+
+	//断开到呼叫控制服务器的连接
+	this.disconnect = function(){
+		// 检查 WebSocket 是否存在且连接正常
+		if (!ws || ws.readyState !== WebSocket.OPEN) {
+			console.log('WebSocket 未连接或已关闭，无需发送断开指令');
+			return;
+		}
+		var cmdInfo = {};
+		cmdInfo.action="setAgentStatus";
+		cmdInfo.body = {"cmd" : "disconnect", "args" : { "msg" : "disconnection opt triggered by js client." } };
+		ws.send(JSON.stringify(cmdInfo));
+		// 立即关闭 WebSocket 连接
+		ws.close();
+	};
+
+	/**
+	 *  获取当前坐席登录的分机号码
+	 * @returns {string|*}
+	 */
+	this.getExtNum = function(){
+		return this.callConfig.extnum;
+	};
+
+	/**
+	 *  获取当前坐席登录的工号
+	 * @returns {string|*}
+	 */
+	this.getOpNum = function(){
+		return this.callConfig.opnum;
+	};
+
+	/**
+	 *  获取当前坐席的业务组编号
+	 * @returns {string|*}
+	 */
+	this.getGroupId = function(){
+		return this.callConfig.groupId;
+	};
+
+
+	/**
+	 *  获取全部业务组列表
+	 * @returns {string|*}
+	 */
+	this.getGroups = function(){
+		return  JSON.parse(JSON.stringify(this.callConfig.groups));
+	};
+
+    this.findAgentByOpNum  = function (opnum){
+    	if(_cc.callConfig.agentList == null) return null;
+
+		for (var key in _cc.callConfig.agentList) {
+			let item = _cc.callConfig.agentList[key];
+            if(item["opnum"] === opnum){
+            	//add _arrayIndex property to record index
+            	item["_arrayIndex"] = key;
+            	return item;
+			}
+		}
+		return null;
+	};
+
+	this.updateAgentList = function (agentList) {
+		for (var key in agentList) {
+			let item = agentList[key];
+            var existItem = this.findAgentByOpNum(item["opnum"]);
+            if(existItem != null){
+				var newStatus = item["agentStatus"];
+				var oldStatus = existItem["agentStatus"];
+				var logoutTime = item["logoutTime"];
+				if(logoutTime > 0){
+					//删除元素
+					console.info("delete offline user",item["opnum"], "index=", key);
+					_cc.callConfig.agentList.splice(existItem["_arrayIndex"], 1);
+					continue;
+				}
+				if(newStatus != oldStatus){
+					existItem["agentStatus"] = newStatus;
+				}
+			}else{
+				if(_cc.callConfig.agentList != null) {
+					_cc.callConfig.agentList.push(item);
+				}
+			}
+		}
+	};
+
+	//连接到呼叫控制服务器
+	this.connect = function() {
+		// 如果已经在连接中，直接返回
+		if (ws && ws.readyState === WebSocket.CONNECTING) {
+			console.log('[connect] WebSocket 正在连接中，请勿重复操作');
+			return;
+		}
+
+		// 先关闭旧的连接，避免重复登录
+		if (ws) {
+			console.log('[connect] 检测到旧连接存在，先关闭旧连接');
+			try {
+				ws.close();
+			} catch(e) {
+				console.error('[connect] 关闭旧连接失败:', e);
+			}
+			ws = null;
+		}
+
+		if ('WebSocket' in window)
+			ws = new WebSocket(wsuri);
+		else {
+			console.log('您的浏览器不支持 websocket，您无法使用本页面的功能!');
+			return;
+		}
+		//收到消息
+		ws.onmessage = function(evt) {
+			console.log("recv msg from websocket server: ", evt.data);
+			var msg = JSON.parse(evt.data);
+			console.log("parsed json data:", msg);
+			var resp_status = msg["status"];
+			switch(resp_status) {
+				case 200:
+					isConnected = true;
+					_cc.callConfig.extnum = msg.object["extnum"];
+					_cc.callConfig.opnum = msg.object["opnum"];
+					_cc.callConfig.groupId = msg.object["groupId"];
+					_cc.callConfig.groups = msg.object["groups"];
+					console.log('ipcc 连接成功.', 'connected_ipcc_server');
+					// WebSocket 连接成功后自动设置为置忙状态，以便可以外呼
+					_cc.setStatus(ccPhoneBarSocket.agentStatusEnum.busy);
+					_cc.notifyAll(ccPhoneBarSocket.eventList.ws_connected, msg);
+					break;
+				default:
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.caller_hangup) ||
+						parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.CONFERENCE_MODERATOR_HANGUP)) {
+						_cc.setCallConnected(false);
+						_cc.setCanSendVideoReInvite(false);
+						_cc.callConfig.agentList = null;
+						_cc.unSubscribeAgentList();
+						// 重置呼叫标志
+						_cc.isCalling = false;
+						console.log("caller_hangup")
+					}
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.callee_hangup)) {
+						// 重置呼叫标志
+						_cc.isCalling = false;
+					}
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.callee_answered)) {
+						_cc.setCallConnected(true);
+						console.log("callee_answered")
+					}
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.new_inbound_call)) {
+						_cc.setCallConnected(true);
+						console.log("new_inbound_call")
+					}
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.caller_answered) ||
+						parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.callee_answered)) {
+						if (msg["object"]["callType"] === "audio") {
+							_cc.setCanSendVideoReInvite(true);
+							_cc.notifyAll(ccPhoneBarSocket.eventList.on_audio_call_connected, "audio call connected.")
+							console.log("current callType is audio.")
+						}
+						if (msg["object"]["callType"] === "video") {
+							_cc.setCanSendVideoReInvite(false);
+							_cc.notifyAll(ccPhoneBarSocket.eventList.on_video_call_connected, "video call connected.")
+							console.log("current callType is video.")
+						}
+					}
+
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.customer_channel_hold)) {
+						_cc.changeUiOnHold();
+					}
+
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.customer_channel_unhold)) {
+						_cc.changeUiOnUnHold();
+					}
+
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.customer_on_hold_hangup)) {
+						_cc.changeUiOnUnHold();
+						$("#holdBtn").removeClass('on');
+						$("#callStatus").text("保持的通话已挂机.");
+					}
+
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.customer_channel_call_wait)) {
+						$("#stopCallWait").show();
+						$("#doConsultationBtn").hide();
+						$("#callStatus").text("客户电话等待中.");
+						_cc.showTransferAreaUI();
+					}
+
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.customer_channel_off_call_wait)) {
+						$("#stopCallWait").hide();
+                        $("#transferCallWait").hide();
+						_cc.hideTransferAreaUI();
+						$("#callStatus").text("等待的电话已接回.");
+					}
+
+                    if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.inner_consultation_start)) {
+                        $("#callStatus").text("咨询已开始.");
+                        $("#transferCallWait").show();
+                    }
+
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.inner_consultation_stop)) {
+						$("#callStatus").text("咨询已结束.");
+						$("#transferCallWait").hide();
+					}
+
+                    if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.customer_on_call_wait_hangup)) {
+						$("#stopCallWait").hide();
+                        $("#transferCallWait").hide();
+						$("#callStatus").text("等待的客户已挂机.");
+					}
+
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.inner_consultation_start)) {
+						$("#holdBtn").removeClass('on');
+						$("#hangUpBtn").removeClass('on');
+						$("#transferBtn").removeClass('on');
+					}
+
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.transfer_call_success)) {
+						var extNum = msg["object"]["callee"];
+						if(extNum === _cc.getExtNum()) {
+							$("#holdBtn").addClass('on');
+							$("#hangUpBtn").addClass('on');
+							$("#transferBtn").addClass('on');
+						}
+
+					}
+
+					if (parseInt(resp_status) === parseInt(ccPhoneBarSocket.eventList.agent_status_data_changed)) {
+						if(_cc.subscribeAgentListStarted) {
+							if (_cc.callConfig.agentList == null) {
+								_cc.callConfig.agentList = JSON.parse(msg.object);
+							}else{
+								// 更新列表;
+                                _cc.updateAgentList(JSON.parse(msg.object));
+							}
+						}
+					}
+					_cc.notifyAll(resp_status, msg);
+					break;
+			}
+		};
+		//关闭连接时触发
+		ws.onclose = function(evt) {
+			isConnected = false;
+			_cc.notifyAll(ccPhoneBarSocket.eventList.ws_disconnected, "ipccserver 连接断开.");
+			console.log("ipcc连接断开.", "disconnected");
+			console.log(evt);
+			ws.close();
+		};
+		ws.onopen = function(evt) {
+			console.log("ipccserver websocket onopen...");
+		};
+	};
+
+	//发送消息给呼叫控制服务器
+	this.sendMsg = function(jsonObject) {
+		console.debug("ws.send:", jsonObject);
+		ws.send(JSON.stringify(jsonObject));
+	};
+
+	this.changeUiOnHold = function() {
+		$("#holdBtnLi").hide();
+		$("#unHoldBtnLi").show();
+		$("#unHoldBtn").addClass('on');
+	};
+
+	this.changeUiOnUnHold = function() {
+		$("#holdBtnLi").show();
+		$("#holdBtn").addClass('on');
+		$("#unHoldBtnLi").hide();
+	};
+
+	this.hideTransferAreaUI = function(){
+		var transferArea = document.getElementById("transfer_area");
+		transferArea.style.display = "none";
+	};
+
+	this.showTransferAreaUI = function(){
+		var transferArea = document.getElementById("transfer_area");
+		transferArea.style.display = "block";
+	};
+
+	/**
+	 *  设置状态为空闲
+	 */
+	this.setStatusFree = function(){
+		this.setStatus(ccPhoneBarSocket.agentStatusEnum.free);
+	};
+
+	/**
+	 *  设置状态为忙碌
+	 */
+	this.setStatusBusy = function(){
+		this.setStatus(ccPhoneBarSocket.agentStatusEnum.busy);
+	};
+
+	ccPhoneBarSocket.utils = {
+
+		/**
+		 * 读取 URL 中的指定查询参数值
+		 * @param {string} paramName - 要获取的参数名称
+		 * @returns {string|null} 返回参数值，如果不存在则返回 null
+		 */
+		getQueryParam :	function (paramName) {
+			const url = window.location.href; // 获取当前页面 URL
+			const params = new URLSearchParams(new URL(url).search); // 创建 URLSearchParams 对象
+			return params.get(paramName); // 获取指定参数值
+		}
+	};
+
+	/**
+	 *  座席状态枚举;
+	 * @type {{rest: number, calling: number, busy: number, free: number, justLogin: number, meeting: number, train: number}}
+	 */
+	ccPhoneBarSocket.agentStatusEnum = {
+
+		/**
+		 *  刚刚上线，尚未就绪中;
+		 */
+		"justLogin" : 1,
+
+		/**
+		 * 空闲
+		 */
+		"free"  :  2,
+
+		/**
+		* 忙碌
+		*/
+		"busy"  :  3,
+
+		/**
+		 * 小休
+		 */
+		"busy_rest"  :  31,
+
+		/**
+		 * 线下会议
+		 */
+		"busy_meeting"  :  32,
+
+		/**
+		 * 培训
+		 */
+		"busy_training"  :  33,
+
+		/**
+		 * 通话中
+		 */
+		"incall" : 4,
+
+		/**
+		 * 话后处理，填写表单中
+		 */
+		"fill_form" : 5,
+
+		/**
+		 * 电话会议中
+		 */
+		"conference"  :  6
+	};
+
+	//定义视频level-id
+	ccPhoneBarSocket.videoLevels = {
+		"Smooth" :  { "levelId" : "42e00b",  "description" : "流畅"  },
+		"Smooth2" :  { "levelId" : "42e00c",  "description" : "流畅+"  },
+		"Smooth3" :  { "levelId" : "42e00d",  "description" : "流畅++"  },
+		"Clear" : { "levelId" : "42e014",  "description" : "清晰"  },
+		"Clear2" :  { "levelId" : "42e015",  "description" : "清晰+"  },
+		"Clear3" :  { "levelId" : "42e016",  "description" : "清晰++"  },
+		"HD" :   { "levelId" : "42e01e",  "description" : "高清"  },
+		"HD2" :  { "levelId" : "42e01f",  "description" : "高清+"  }
+	};
+
+
+	/**
+	 * 系统事件列表;
+	 * @type {{}}
+	 */
+	ccPhoneBarSocket.eventList = {
+		// 当音频通话已建立
+		"on_audio_call_connected" : "100",
+		"on_video_call_connected" : "101",
+
+		// websocketServer连接成功
+		"ws_connected": "200",
+		// 当前用户已在其他设备登录;
+		"user_login_on_other_device" : "201",
+		// 用户下线
+		"ws_disconnected" : "202",
+		// 通话状态发生改变 [监听的数据]
+		"call_session_status_data_changed" : "203",
+        // 坐席状态列表发生改变
+        "agent_status_data_changed" : "205",
+		//请求参数错误
+		"request_args_error" : "400",
+
+		// unauthorized
+		"unauthorized" : "401",
+
+		//服务器内部错误
+		"server_error" : "500",
+		// 语音编码不匹配
+		"server_error_audio_codec_not_match" : "501",
+		// 主叫接通
+		"caller_answered" : "600",
+		//  主叫挂断
+		"caller_hangup" : "601",
+		// 主叫忙; 上一通电话未挂机
+		"caller_busy" : "602",
+		//主叫未登录
+        "caller_not_login" : "603",
+		//主叫应答超时
+		"caller_respond_timeout" : "604",
+		// 被叫接通
+		"callee_answered" : "605",
+        // 被叫挂断
+		"callee_hangup" : "606",
+		//被叫振铃
+        "callee_ringing" : "607",
+		// 座席状态改变
+		"status_changed" : "608",
+		// 一个完整的外呼任务结束： [可能尝试了一个或多个网关]
+		"outbound_finished" : "611",
+
+		// 预测外呼，分配的来电;
+		"PREDICTIVE_CALL_INBOUND" : "612",
+
+         // ACD队列分配的新来电
+		"new_inbound_call" : "613",
+
+         // 当前业务组实时排队人数
+		"acd_group_queue_number" : "615",
+
+
+		/**
+		 * 收到转接的来电请求
+		 */
+		"transfer_call_recv" :  616,
+
+		/**
+		 * 锁定坐席失败
+		 */
+		"lock_agent_fail" :  617,
+
+		/**
+		 * 通话已经转接成功
+		 */
+		"transfer_call_success" :  618,
+
+		/**
+		 * 产生asr语音识别结果
+		 */
+		"asr_result_generate" :  619,
+
+		/**
+		 * ASR语音识别流程结束（坐席侧）
+		 */
+		"asr_process_end_agent" :  620,
+
+		/**
+		 * ASR语音识别流程结束（客户侧）
+		 */
+		"asr_process_end_customer" :  621,
+
+		"asr_process_started" : 622,
+
+		/**
+		 * customer call session hold.
+		 */
+		"customer_channel_hold" : 623,
+
+		/**
+		 * customer call session unHold.
+		 */
+		"customer_channel_unhold" : 624,
+
+		/**
+		 * customer call session on hold is hangup.
+		 */
+		"customer_on_hold_hangup" : 625,
+
+		"inner_consultation_request" : 626,
+
+		/**
+		 * customer call session on call-wait.
+		 */
+		"customer_channel_call_wait" : 627,
+
+		/**
+		 * customer call session off call-wait.
+		 */
+		"customer_channel_off_call_wait" : 628,
+
+		/**
+		 * customer call session on call-wait is hangup.
+		 */
+		"customer_on_call_wait_hangup" : 629,
+
+		/**
+		 *  extension on line event
+		 */
+		"extension_on_line" : 630,
+
+		/**
+		 * extension off line event
+		 */
+		"extension_off_line" : 631,
+
+        /**
+         * Notify the agent that the call consultation has started.
+         */
+        "inner_consultation_start" : 632,
+
+        /**
+         *  Notify the agent that the call consultation has stopped.
+         */
+        "inner_consultation_stop" : 633,
+
+
+	    /**
+		* 多人电话会议，重复的被叫 ,
+		*/
+		"conference_repeat_callee"  :  660 ,
+
+		 /**
+		 * 多人电话会议，呼叫成员超时 ,
+		 */
+		 "CONFERENCE_CALL_MODERATOR_TIMEOUT"  :  661 ,
+
+		/**
+		 * 多人电话会议，成员接通 ,
+		 */
+		"CONFERENCE_MEMBER_ANSWERED"  :  662 ,
+
+
+		/**
+		 * 多人电话会议，成员挂机 ,
+		 */
+		"CONFERENCE_MEMBER_HANGUP"  :  663 ,
+
+		/**
+		 * 多人电话会议，成员禁言成功 ,
+		 */
+		"CONFERENCE_MEMBER_MUTED_SUCCESS"  :  666 ,
+
+
+		/**
+		 * 多人电话会议，成员禁言失败 ,
+		 */
+		"CONFERENCE_MEMBER_MUTED_FAILED"  : 665  ,
+
+		/**
+		 * 多人电话会议，成员解除禁言成功 ,
+		 */
+		"CONFERENCE_MEMBER_UNMUTED_SUCCESS"  :  667 ,
+
+
+		/**
+		 * 多人电话会议，成员解除禁言失败 ,
+		 */
+		"CONFERENCE_MEMBER_UNMUTED_FAILED"  : 668  ,
+
+		/**
+		 * 多人电话会议，会议成员不存在，无法执行相关操作：
+		 */
+		"CONFERENCE_MEMBER_NOT_EXISTS"  : "669"  ,
+
+		/**
+		 * 多人电话会议，主持人重置会议 ,
+		 */
+		"CONFERENCE_MODERATOR_RESET"  : "670"  ,
+
+		/**
+		 * 多人电话会议，主持人接通 ,
+		 */
+		"CONFERENCE_MODERATOR_ANSWERED"  : "671"  ,
+
+
+		/**
+		 * 多人电话会议，主持人挂机，会议结束 ,
+		 */
+		"CONFERENCE_MODERATOR_HANGUP"  : "672",
+
+		/*
+		 * 成员视频禁用成功
+		 */
+		"CONFERENCE_MEMBER_VMUTED_SUCCESS" : "674",
+
+		/*
+		 * 成员解除视频禁用成功
+		 */
+		"CONFERENCE_MEMBER_UnVMUTED_SUCCESS" : "676",
+
+		/**
+		 * 多人电话会议，成员解除视频禁用失败;
+		 */
+		"CONFERENCE_MEMBER_UnVMUTED_FAILED"  : "677",
+
+		/**
+		 * 成功把通话转接到多人视频会议
+		 */
+		"CONFERENCE_TRANSFER_SUCCESS_FROM_EXISTED_CALL"  :  "678",
+
+		/**
+		 *  outbound start event
+		 */
+		"OUTBOUND_START" : "679"
+	};
+
+	this.createIframe = function(src){
+        var _iframe = document.createElement("iframe");
+        _iframe.style.width = '0';
+        _iframe.style.height = '0';
+        _iframe.style.margin = '0';
+        _iframe.style.padding = '0';
+        _iframe.style.overflow = 'hidden';
+        _iframe.style.border = 'none';
+        _iframe.src = src;
+        document.body.appendChild(_iframe);
+        _cc.iframe = _iframe;
+    };
+
+    this.openSoftPhone = function (){
+		//打开软电话
+		var softPhoneUrl = "http://127.0.0.1:" + _cc.callConfig["localHostProxyPort"] +
+		                   "/autoSetExtension?server=" + encodeURIComponent(_cc.callConfig["fsServer"].split(':')[0]) +
+						   "&port=" + _cc.callConfig["fsServer"].split(':')[1] +
+						   "&extnum=" + _cc.callConfig["extnum"] +
+						   "&pass=" + encodeURIComponent(_cc.callConfig["extPassword"]) +
+						   "&phoneType=" + _cc.callConfig["phoneType"] +
+						   "&version=" + encodeURIComponent(_cc.callConfig["localHostProxyVersion"]) +
+						   "&webPhoneUrl=" + encodeURIComponent(_cc.callConfig["webPhoneUrl"]) +
+						   "";
+	  console.log("softPhoneUrl:", softPhoneUrl);
+      _cc.iframe.src = softPhoneUrl;
+	};
+
+	/**
+	 * 设置座席状态
+	 * @param status  agentStatusEnum
+	 */
+	this.setStatus = function (status) {
+		var cmdInfo = {};
+		cmdInfo.action="setAgentStatus";
+		cmdInfo.body = {"cmd" : "setStatus", "args" : { "status" : status } };
+		ws.send(JSON.stringify(cmdInfo));
+	};
+
+	//注销登录;
+	this.logOff = function () {
+		var cmdInfo = {};
+		cmdInfo.action="setAgentStatus";
+		cmdInfo.body = {"cmd" : "disconnect", "args" : { "cause": "disconnect request from js client." }  };
+		ws.send(JSON.stringify(cmdInfo));
+	};
+
+	/**
+	 *  在咨询失败的情况下使用该按钮，接回处于等待中的电话
+	 */
+	this.stopCallWaitBtnClickUI = function () {
+		var cmd = {};
+		cmd.action="callWait";
+		cmd.body = {"cmd" : "stop", "args" : {} };
+		ws.send(JSON.stringify(cmd));
+	};
+
+    /**
+     * 在咨询成功的情况下使用该按钮，把电话转接给专家坐席。
+     */
+	this.transferCallWaitBtnClickUI = function () {
+        this.callControl("transferCallWait", {})
+    };
+
+	this.consultationBtnClickUI = function () {
+        let transferType = "outer";
+        let phoneNumber = $("#externalPhoneNumber").val().trim();
+        if (phoneNumber === "") {
+			transferType = "inner";
+            var groupId = $("#transfer_to_groupIds").val();
+            if ($.trim(groupId) == "") {
+                alert("请选择业务组!");
+                $("#transfer_to_groupIds").focus();
+                return;
+            }
+            var member = $("#transfer_to_member").val();
+            if ($.trim(member) == "") {
+                alert("请选择要咨询的坐席成员!");
+                $("#transfer_to_member").focus();
+                return;
+            }
+
+            var selectText = $('#transfer_to_member option:selected').text();
+            if (selectText.indexOf("空闲") == -1) {
+                alert("请选择空闲的坐席成员!");
+                $("#transfer_to_member").focus();
+                return;
+            }
+
+            if (member == this.getOpNum()) {
+                alert("不能咨询自己，请选择其他坐席成员!");
+                return;
+            }
+            phoneNumber = member;
+        }
+        this.callControl("consultation", {"to": phoneNumber, "transferType": transferType});
+
+    };
+
+	/**
+	 *  处理通话转接按钮点击事件
+	 */
+	this.transferBtnClickUI = function() {
+	    let transferType = "outer";
+	    let phoneNumber = $("#externalPhoneNumber").val().trim();
+        if(phoneNumber === "") {
+            transferType = "inner";
+            var groupId = $("#transfer_to_groupIds").val();
+            if ($.trim(groupId) === "") {
+                alert("请选择转接的业务组!");
+                $("#transfer_to_groupIds").focus();
+                return;
+            }
+            var member = $("#transfer_to_member").val();
+            if ($.trim(member) === "") {
+                alert("请选择转接的坐席成员!");
+                $("#transfer_to_member").focus();
+                return;
+            }
+
+            var selectText = $('#transfer_to_member option:selected').text();
+            if (selectText.indexOf("空闲") === -1) {
+                alert("请选择空闲的坐席成员!");
+                $("#transfer_to_member").focus();
+                return;
+            }
+            if (member === this.getOpNum()) {
+                alert("不能转给自己，请选择其他坐席成员!");
+                return;
+            }
+            phoneNumber = member;
+        }
+        this.transferCall(phoneNumber, transferType);
+	};
+
+	/**
+	 *  处理通话转接
+     *  @param userCodeOrPhone 工号或者电话号码
+     *  @param transferType 转接类型：工号还是外部号码（inner or outer）
+	 */
+	this.transferCall = function(userCodeOrPhone, transferType) {
+	    if(transferType === "inner") {
+            if (userCodeOrPhone !== this.getOpNum()) {
+                this.callControl("transferCall", {"to": userCodeOrPhone, "transferType" : "inner" })
+            } else {
+                console.error("cant not transfer call to yourself.")
+            }
+        }else{
+            this.callControl("transferCall", {"to": userCodeOrPhone, "transferType" : "outer" })
+        }
+	};
+
+	//挂机
+	this.hangup = function() {
+		this.callControl("endSession", {})
+	};
+
+	// 呼叫控制相关操作;
+	this.callControl = function(action, argsObject){
+		var sessionControl = {};
+		sessionControl.action="call";
+		sessionControl.body = {"cmd" : action, "args" : argsObject };
+		ws.send(JSON.stringify(sessionControl));
+	};
+
+	this.checkCallConfirmed = function () {
+		if(!_cc.getIsConnected()){
+			console.log('请先上线.');
+			return false;
+		}
+		if(!_cc.getCallConnected()){
+			console.log('当前没有通话.');
+			return false;
+		}
+		return true;
+	};
+
+	/**
+	 *  send and play mp4 video file.
+	 */
+	this.sendVideoFile = function (mp4FilePath) {
+		if(!_cc.checkCallConfirmed()){
+			return false;
+		}
+		if(typeof(mp4FilePath) == "undefined" || mp4FilePath.trim().length === 0){
+			console.log("Parameter mp4FilePath is missing!")
+			return false;
+		}
+		this.callControl(
+			"playMp4File",
+			{ "mp4FilePath" : mp4FilePath }
+		);
+		return true;
+	};
+
+	/**
+	 *  发起视频通话邀请
+	 */
+	this.reInviteVideoCall = function(){
+        if(!_cc.checkCallConfirmed()){
+        	return false;
+		}
+		if(!_cc.getCanSendVideoReInvite()){
+			console.log('cant not send video reInvite. ',
+				'Precondition is:  Call is connected and  callType is audio.');
+			return false;
+		}
+		this.callControl(
+			"reInviteVideo",
+			{}
+		);
+		return true;
+	};
+
+	/**
+	 *  发起外呼
+	 * @param phoneNumber 被叫号码
+	 * @param callType 通话类型:视频通话、音频通话
+	 * @param videoLevel 视频通话的profile-level-id
+	 */
+	this.call = function(phoneNumber, callType, videoLevel){
+		// 防止重复调用
+		if(_cc.isCalling) {
+			console.log('正在呼叫中，请勿重复操作');
+			return;
+		}
+
+		if(typeof(videoLevel) == "undefined" || videoLevel.trim().length === 0){
+			videoLevel = ccPhoneBarSocket.videoLevels.HD.levelId;
+			console.log("auto default set videoLevel=", videoLevel);
+		}
+		if(typeof(callType) == "undefined" || callType.trim().length === 0){
+			callType = "audio";
+			console.log("auto default set callType=", callType);
+		}
+
+		console.log("call config videoLevel=" + videoLevel + ", callType=" + callType);
+
+		if(phoneNumber==null || phoneNumber.length===0) {
+			console.log('请输入外呼号码！');
+			return;
+		}
+		if(phoneNumber.trim().length < 3){
+			alert('请输入正确格式的外呼号码！');
+			return;
+		}
+		if(!_cc.getIsConnected()){
+			console.log('请先上线.');
+			return;
+		}
+		let outboundInfo = {
+			"gatewayList": _cc.callConfig.gatewayList,
+			'destPhone': phoneNumber,
+			'gatewayEncrypted' : _cc.callConfig.gatewayEncrypted,
+			'useSameAudioCodeForOutbound' : _cc.callConfig.useSameAudioCodeForOutbound,
+			'callType' :  callType,
+			'videoLevel' : videoLevel
+		};
+		this.callControl(
+			"startSession",
+			outboundInfo
+		);
+		// 设置呼叫标志
+		_cc.isCalling = true;
+	};
+
+	this.callEx = function(phoneNumber){
+		if(phoneNumber == null || phoneNumber.length === 0) {
+			console.log('请输入外呼号码！');
+			return;
+		}
+		if(!_cc.getIsConnected()){
+			_cc.connect();
+			_cc.on(ccPhoneBarSocket.eventList.ws_connected, function(){
+				_cc.off(ccPhoneBarSocket.eventList.ws_connected); //取消事件订阅
+				_cc.call(phoneNumber);
+			});
+			return;
+		}
+		_cc.call(phoneNumber);
+	 };
+
+
+	/************************  以下是网页工具条ui代码   ************************/
+
+	/**
+	 *  根据服务器响应状态码去查找action
+	 * @param code
+	 * @returns {string}
+	 */
+	ccPhoneBarSocket.findItemByCode = function(code){
+		for(var item in ccPhoneBarSocket.eventListWithTextInfo ){
+			if(ccPhoneBarSocket.eventListWithTextInfo[item].code === code){
+				return ccPhoneBarSocket.eventListWithTextInfo[item];
+			}
+		}
+	};
+
+	/**
+	 *  服务器响应状态枚举值;
+	 */
+	  ccPhoneBarSocket.eventListWithTextInfo = {
+		"ws_connected": { "code": 200,  msg:"已签入",
+			btn_text:[{id:"#onLineBtn",name:"签出"}],
+			enabled_btn:['#setFree','#callBtn','#onLineBtn', '#consultationBtn']
+		},
+		"ws_disconnected": { "code" : 202, msg:"服务器连接断开",
+			btn_text:[{id:"#onLineBtn",name:"签入"}],
+			enabled_btn:['#onLineBtn']
+		},
+		"user_login_on_other_device": { "code" : 201, msg:"用户已在其他设备登录",
+			btn_text:[{id:"#onLineBtn",name:"签入"}],
+			enabled_btn:['#onLineBtn']
+		},
+		"request_args_error":{ "code" : 400, msg:"客户端请求参数错误",
+			btn_text:[],
+			enabled_btn:[]
+		},
+		"server_error":{ "code" : 500, msg:"服务器内部错误",
+			btn_text:[],
+			enabled_btn:[]
+		},
+		"caller_answered":{ "code" : 600, msg:"分机已接通",
+			btn_text:[],
+			enabled_btn:['#resetStatus', '#hangUpBtn', '#transferBtn', '#holdBtn', '#consultationBtn']
+		},
+		"caller_hangup":{ "code" : 601, msg:"分机已挂断",
+			btn_text:[],
+			enabled_btn:['#onLineBtn', '#resetStatus', '#callBtn', '#setFree', '#consultationBtn' ]
+		},
+		"caller_busy":{ "code" : 602, msg:"分机忙,上一通电话未挂断",
+			btn_text:[],
+			enabled_btn:['#onLineBtn', '#resetStatus', '#callBtn', '#setFree', '#consultationBtn']
+		},
+		"caller_not_login":{ "code" : 603, msg:"分机未登录，请检查",
+			btn_text:[],
+			enabled_btn:['#onLineBtn', '#resetStatus', '#callBtn', '#setFree', '#consultationBtn']
+		},
+		"caller_respond_timeout":{ "code" : 604, msg:"分机未应答超时，请重新打开分机",
+			btn_text:[],
+			enabled_btn:['#onLineBtn', '#resetStatus', '#callBtn', '#setFree', '#consultationBtn']
+		},
+		"callee_answered":{ "code" : 605, msg:"被叫已接通",
+			btn_text:[],
+			enabled_btn:['#resetStatus', '#hangUpBtn', '#transferBtn', '#holdBtn', '#consultationBtn' ]
+		},
+		"callee_hangup":{ "code" : 606, msg:"通话结束",
+			btn_text:[],
+			enabled_btn:['#onLineBtn', '#resetStatus', '#callBtn', '#setFree' , '#consultationBtn']
+		},
+		"callee_ringing":{ "code" : 607, msg:"被叫振铃中",
+			btn_text:[],
+			enabled_btn:['#resetStatus', '#hangUpBtn', '#transferBtn', '#consultationBtn']
+		},
+		"status_changed":{ "code" : 608, msg:"状态已改变",
+			btn_text:[],
+			enabled_btn:[ ]
+		},
+		"free":{ "code" : 0, msg:"空闲中",
+			btn_text:[],
+			enabled_btn:['#setBusy','#onLineBtn', '#consultationBtn']
+		},
+		"busy":{ "code" : 1, msg:"忙碌",
+			btn_text:[],
+			enabled_btn:['#setFree', '#onLineBtn',  '#callBtn', '#consultationBtn']  //  '#transferBtn'
+		},
+		"customer_channel_hold" : { "code" : 623, msg:"通话已保持.",
+			btn_text:[],
+			enabled_btn:['#setFree',  '#callBtn', '#unHoldBtn', '#consultationBtn' ]
+		},
+	   "customer_channel_unhold" : { "code" : 624, msg:"通话已接回.",
+			  btn_text:[],
+			  enabled_btn:[ '#hangUpBtn', '#holdBtn' ]
+		}
+	};
+
+	ccPhoneBarSocket.phone_buttons = ['#setFree', '#setBusy', '#callBtn','#hangUpBtn' , '#resetStatus' ,'#onLineBtn', '#transferBtn', '#holdBtn', '#unHoldBtn', '#consultationBtn'];
+
+	// 更新状态显示
+	this.updatePhoneBar = function (msg, status_key) {
+		if(!_cc.callConfig.useDefaultUi){
+			console.log("callConfig.useDefaultUi = false ， 已禁用默认ui工具条按钮.");
+			return;
+		}
+
+		if (msg) {
+			$("#callStatus").text(msg.msg);
+		}
+		var status_info = ccPhoneBarSocket.findItemByCode(status_key);
+		if (!status_info) {
+			return;
+		}
+
+		if(status_info.code === ccPhoneBarSocket.eventListWithTextInfo.status_changed.code){
+			if(msg.object.status === ccPhoneBarSocket.agentStatusEnum.free){
+				status_info = ccPhoneBarSocket.eventListWithTextInfo.free;
+			}else{
+				status_info = ccPhoneBarSocket.eventListWithTextInfo.busy;
+			}
+		}
+		// 判断当前是否为状态改变的事件;
+		// 显示预设的消息;
+		var msgSet = status_info.msg;
+
+		if(msgSet && msgSet.length > 0){
+			$("#callStatus").text(msgSet);
+		}
+
+		var btn_text = status_info.btn_text;
+		var enabled_btn = status_info.enabled_btn;
+		if (btn_text) {
+			$.each(btn_text, function (i, d) {
+				$(d.id).next().text(d.name);
+			});
+		}
+
+		if (enabled_btn.length === 0) {
+			return;
+		}
+
+		var all_btn = ccPhoneBarSocket.phone_buttons;
+		for (var i in all_btn) {
+			var idx = $.inArray(all_btn[i], enabled_btn);
+			if (idx < 0) {
+				$(all_btn[i]).removeClass('on');
+			} else {
+				$(enabled_btn[idx]).addClass('on');
+			}
+		}
+	};
+
+	/**
+	 *  初始化电话工具条ui按钮;
+	 */
+	this.initPhoneBarUI = function () {
+
+		window.onbeforeunload = function () {
+			if (!confirm('关闭网页将导致您无法接听电话，确定要关闭吗 ?')) return false;
+		};
+
+		$("#unHoldBtnLi").hide();
+
+		if(!_cc.callConfig.useDefaultUi){
+			console.log("callConfig.useDefaultUi = false ， 已禁用默认ui工具条按钮.");
+			return;
+		}
+
+        $('#conferenceBtn').on('click', function () {
+                if(!_cc.getIsConnected()){
+                    console.log('请先上线.');
+                    return;
+                }
+                var confObjId = document.getElementById("conference_area");
+                if(confObjId.style.display === "block"){
+					confObjId.style.display = "none";
+				}else{
+					confObjId.style.display = "block";
+				}
+
+        });
+
+		$('#callBtn').on('click', function () {
+			if ($(this).hasClass('on')) {
+				var destPhone = $.trim($("#ccphoneNumber").val());
+				var videoLevel = document.getElementById("videoLevelSelect").value;
+				var callType = document.forms[0].callType.value;
+				_cc.call(destPhone, callType,  videoLevel);
+			}
+		});
+		$('#setFree').on('click', function () {
+			if ($(this).hasClass('on')) {
+				_cc.setStatus(ccPhoneBarSocket.agentStatusEnum.free);
+			}
+		});
+		$('#setBusy').on('click', function () {
+			if ($(this).hasClass('on')) {
+				_cc.setStatus(ccPhoneBarSocket.agentStatusEnum.busy);
+			}
+		});
+
+		$('#setBusySubList').on('change', function () {
+			 let itemValue = $('#setBusySubList').val();
+			 console.log('set busy subStatus', itemValue);
+			 _cc.setStatus(itemValue);
+		});
+
+		$('#hangUpBtn').on('click', function () {
+			if ($(this).hasClass('on')) {
+				_cc.hangup();
+			}
+		});
+
+		$('#holdBtn').on('click', function () {
+			if ($(this).hasClass('on')) {
+				_cc.holdCall();
+			}
+		});
+
+		$('#unHoldBtn').on('click', function () {
+			if ($(this).hasClass('on')) {
+				_cc.unHoldCall();
+			}
+		});
+
+		$("#doTransferBtn").hide();
+
+		/**
+		 * 填充业务组选项
+		 * 注意：该函数仅用于原始 HTML 版本，Vue + Element UI 版本中由 Vue 组件自行处理
+		 */
+		function populateGroupIdOptions() {
+			var groups = _cc.callConfig.groups;
+			if (groups) {
+				var selectObj = document.getElementById("transfer_to_groupIds");
+				if (selectObj) {
+					// 检查是否为原生 select 元素
+					if (selectObj.tagName.toLowerCase() === 'select') {
+						// 清空现有选项（保留第一个"请选择"）
+						var firstOption = selectObj.options[0];
+						selectObj.innerHTML = '';
+						selectObj.add(firstOption);
+
+						// 添加业务组选项
+						for (var i = 0; i < groups.length; i++) {
+							var group = groups[i];
+							var option = document.createElement("option");
+							option.value = group.groupId;
+							option.text = group.bizGroupName;
+							selectObj.add(option);
+						}
+
+						// 默认选中第一个
+						if (groups.length > 0 && selectObj.options.length > 1) {
+							selectObj.selectedIndex = 1;
+						}
+					}
+					// 如果是 el-select 组件，则不处理，由 Vue 数据绑定自动更新
+				}
+			}
+		}
+
+		$('#transferBtn').on('click', function () {
+			if ($(this).hasClass('on')) {
+				if(!_cc.getIsConnected()){
+					console.log('请先上线.');
+					return;
+				}
+				var transferArea = document.getElementById("transfer_area");
+				if(transferArea.style.display === "block"){
+					transferArea.style.display = "none";
+					_cc.unSubscribeAgentList();
+					$("#doTransferBtn").hide();
+					$("#doConsultationBtn").hide();
+				}else{
+					transferArea.style.display = "block";
+					populateGroupIdOptions();
+					// 不再自动订阅坐席状态列表，由外部控制
+					// _cc.subscribeAgentList();
+					$("#doTransferBtn").show();
+					$("#doConsultationBtn").hide();
+				}
+			}
+		});
+
+        $("#stopCallWait").hide();
+        $("#transferCallWait").hide();
+		$("#doConsultationBtn").hide();
+		$('#consultationBtn').on('click', function () {
+			if ($(this).hasClass('on')) {
+				if(!_cc.getIsConnected()){
+					console.log('请先上线.');
+					return;
+				}
+				var transferArea = document.getElementById("transfer_area");
+				if(transferArea.style.display === "block"){
+					transferArea.style.display = "none";
+					_cc.unSubscribeAgentList();
+					$("#doConsultationBtn").hide();
+					$("#doTransferBtn").hide();
+				}else{
+					transferArea.style.display = "block";
+					populateGroupIdOptions();
+					// 不再自动订阅坐席状态列表，由外部控制
+					// _cc.subscribeAgentList();
+					$("#doConsultationBtn").show();
+					$("#doTransferBtn").hide();
+				}
+			}
+		});
+
+		$('#onLineBtn').on('click', function () {
+			if ($(this).hasClass('on')) {
+				if (_cc.getIsConnected()) {
+					_cc.disconnect();
+				} else {
+					_cc.connect();
+				}
+			}else {
+				alert('当前不允许签出!');
+			}
+		});
+
+		$('#resetStatus').on('click', function () {
+			window.onbeforeunload = null;
+			location.reload();
+		});
+
+		//拨号文本框;收到键盘回车事件之后立即拨号
+		$("#ccphoneNumber").keydown(function (e) {
+			var curKey = e.which;
+			if (curKey === 13) {
+				var destPhone = $.trim($("#ccphoneNumber").val());
+				var videoLevel = document.getElementById("videoLevelSelect").value;
+				var callType = document.forms[0].callType.value;
+				_cc.call(destPhone,callType, videoLevel);
+				return false;
+			}
+		});
+
+		//ESC按键挂机功能支持
+		$(document).keyup(function (e) {
+			var key = e.which;
+			if (key === 27) {
+				console.log('按下了ESC键, 即将发送挂机指令.');
+				if(_cc.getIsConnected()){
+					if(_cc.callConfig["useDefaultUi"]) {
+						if ($('#hangUpBtn').hasClass('on')) {
+							_cc.hangup();
+						}
+					}else{
+						_cc.hangup();
+					}
+				}
+			}
+		});
+	};
+
+	/**
+	 *  保持通话
+	 */
+	this.holdCall = function(){
+		var cmd = {};
+		cmd.action="callHold";
+		cmd.body = {"cmd" : "hold", "args" : {} };
+		ws.send(JSON.stringify(cmd));
+	};
+
+	/**
+	 *  接回保持的通话
+	 */
+	this.unHoldCall = function(){
+		var cmd = {};
+		cmd.action="callHold";
+		cmd.body = {"cmd" : "unhold", "args" : {} };
+		ws.send(JSON.stringify(cmd));
+	};
+
+	/**
+	 *  订阅坐席状态列表
+	 */
+	this.subscribeAgentList = function(){
+		var cmd = {};
+		cmd.action="pollAgentList";
+		cmd.body = {"cmd" : "subscribe", "args" : {} };
+		ws.send(JSON.stringify(cmd));
+		_cc.subscribeAgentListStarted = true;
+	};
+
+	/**
+	 *  取消订阅坐席状态列表
+	 */
+	this.unSubscribeAgentList = function(){
+		if(_cc.subscribeAgentListStarted) {
+			_cc.subscribeAgentListStarted = false;
+			_cc.callConfig.agentList = null;
+			var cmd = {};
+			cmd.action = "pollAgentList";
+			cmd.body = {"cmd": "unSubscribe", "args": {}};
+			ws.send(JSON.stringify(cmd));
+		}
+	};
+
+	/*************************  以下是电话会议相关  ***************************/
+
+	/**
+	 *  启动会议； 仅限使用默认UI场景下使用;
+	 */
+	this.conferenceStartBtnUI = function(customerName){
+		var callType = document.getElementById("conf_call_type").value;
+		var confTemplate = document.getElementById("conf_template").value;
+		var layOut = document.getElementById("conf_layout").value;
+
+		_cc.setStatusBusy();
+
+		// 禁用外呼按钮
+		$("#callBtn").removeClass('on');
+
+		// 禁用置闲按钮
+		$("#setFree").removeClass('on');
+
+		// 禁用签出按钮
+		$("#onLineBtn").removeClass('on');
+
+		document.getElementById("startConference").setAttribute("disabled", "true");
+
+		if(_cc.getCallConnected()) {
+			let tips = "是否把当前通话转换为会议 ?";
+			console.log(tips);
+			if(confirm(tips)) {
+				_cc.transferToConference(layOut, confTemplate, callType, customerName);
+			}else{
+				document.getElementById("startConference").removeAttribute("disabled");
+			}
+		}else {
+			_cc.conferenceStart(layOut, confTemplate, callType);
+		}
+	};
+
+	/**
+	 *  添加会议成员； 仅限使用默认UI场景下使用;
+	 */
+	this.conferenceAddMemberBtnUI = function (reInvite, memberPhoneParam,  memberNameParam) {
+		var memberName = "";
+		var memberPhone = "";
+		var memberCallType = $.trim(document.getElementById("member_call_type").value);
+		var memberVideoLevel = $.trim(document.getElementById("member_video_level").value);
+
+		if(reInvite === 0) {
+			memberName = $("#member_name").val();
+			memberPhone = $("#member_phone").val();
+			if (memberName.length === 0 || $.trim(memberName) === "") {
+				alert('请填写参会者姓名!');
+				return;
+			}
+			if (memberPhone.length === 0 || $.trim(memberPhone) === "") {
+				alert('请填写参会者手机号!');
+				return;
+			}
+
+			memberName = $.trim(memberName);
+			memberPhone = $.trim(memberPhone);
+			// 使用会员成员html模版添加新成员
+			var templateObj = document.getElementById("conf_member_template");
+
+			var existMember = document.getElementById("conf_member_" + memberPhone) != null;
+			if (existMember) {
+				alert('会议成员已经存在，请不要重复添加!');
+				return;
+			}
+
+			var memberHtmlItem = templateObj.innerHTML;
+			memberHtmlItem = memberHtmlItem.replace(new RegExp("{member_name}", "gm"), memberName);
+			memberHtmlItem = memberHtmlItem.replace(new RegExp("{member_phone}", "gm"), memberPhone);
+			memberHtmlItem = memberHtmlItem.replace(new RegExp("{member_status}", "gm"), "即将呼叫");
+
+			var li = document.createElement("li");
+			li.setAttribute("id", "conf_member_" + memberPhone);
+			li.setAttribute("class", "conf_member_item_row");
+			li.innerHTML = memberHtmlItem;
+
+			_cc.insertAfter(li, templateObj);
+
+			$("#member_name").val('');
+			$("#member_phone").val('');
+		}else{
+			memberName = memberNameParam;
+			memberPhone = memberPhoneParam;
+		}
+
+		// 隐藏 mute及 vmute按钮
+		var memberItemId = "#conf_member_" + memberPhone;
+		$(".conf_mute", $(memberItemId)).find("img").hide();
+		$(".conf_vmute", $(memberItemId)).find("img").hide();
+		$(".conf_re_invite", $(memberItemId)).hide();
+		$(".conf_status", $(memberItemId)).html("即将呼叫");
+
+		_cc.conferenceAddMembers( [
+			{"name": memberName, "phone": memberPhone, "callType" : memberCallType,  "videoLevel": memberVideoLevel}
+		]);
+	};
+
+	/**
+	 *  从现有通话添加会议成员；
+	 */
+	this.conferenceAddMemberFromExistCall = function (memberName, memberPhone) {
+		if (memberName.length === 0 || $.trim(memberName) === "") {
+			alert('请填写参会者姓名!');
+			return;
+		}
+		if (memberPhone.length === 0 || $.trim(memberPhone) === "") {
+			alert('请填写参会者手机号!');
+			return;
+		}
+		memberName = $.trim(memberName);
+		memberPhone = $.trim(memberPhone);
+
+		// 使用html模版添加新成员
+		var templateObj = document.getElementById("conf_member_template");
+		var existMember = document.getElementById("conf_member_" + memberPhone) != null;
+		if (existMember) {
+			alert('会议成员已经存在，请不要重复添加!');
+			return;
+		}
+
+		var memberHtmlItem = templateObj.innerHTML;
+		memberHtmlItem = memberHtmlItem.replace(new RegExp("{member_name}", "gm"), memberName);
+		memberHtmlItem = memberHtmlItem.replace(new RegExp("{member_phone}", "gm"), memberPhone);
+		memberHtmlItem = memberHtmlItem.replace(new RegExp("{member_status}", "gm"), "即将呼叫");
+		var li = document.createElement("li");
+		li.setAttribute("id", "conf_member_" + memberPhone);
+		li.setAttribute("class", "conf_member_item_row");
+		li.innerHTML = memberHtmlItem;
+		_cc.insertAfter(li, templateObj);
+
+		// 隐藏 mute及 vmute按钮
+		var memberItemId = "#conf_member_" + memberPhone;
+		$(".conf_mute", $(memberItemId)).find("img").show();
+		$(".conf_vmute", $(memberItemId)).find("img").show();
+		$(".conf_re_invite", $(memberItemId)).hide();
+		$(".conf_status", $(memberItemId)).html("通话中").css("color", "green");
+	};
+
+	/**
+	 *  通话转为会议
+	 * @param layOut
+	 * @param confTemplate
+	 * @param callType
+	 * @param customerName
+	 */
+	this.transferToConference = function (layOut, confTemplate, callType, customerName) {
+		console.log("try to transferToConference: ", layOut, confTemplate, callType, customerName);
+		_cc.callControl(
+			"transferToConference",
+			{
+				"layOut": layOut,
+				'callType': callType,
+				'confTemplate': confTemplate,
+				'customerName' : customerName
+			}
+		);
+	};
+
+
+	/**
+	 *  主持人启动电话会议
+	 * @param layOut 会议布局
+	 * @param confTemplate 会议模版
+	 * @param callType 会议类型
+	 */
+	this.conferenceStart = function(layOut, confTemplate, callType) {
+		console.log("正常发起多方通话");
+		var cmd = {};
+		cmd.action = "conference";
+		cmd.body = {"method": "startconf", "args": {
+				"layOut": layOut,
+				'callType': callType,
+				'confTemplate': confTemplate
+			}};
+		ws.send(JSON.stringify(cmd));
+	};
+
+
+	/**
+	 *  VMute会议成员（不显示视频）;
+	 **/
+	this.conferenceVMuteMember = function(members) {
+		// single phone
+		if(typeof(members) === "string") {
+			this.conferenceControl("vmute",
+				[
+					{"phone": members}
+				]
+			);
+		}else{
+			// multiple phones array, e.g.: [  {"phone": '15005600321'}, {"phone": '15005600323'} ]
+			this.conferenceControl("vmute", members);
+		}
+	};
+
+
+	/**
+	 *  UnVMute会议成员（显示视频）;
+	 **/
+	this.conferenceUnVMuteMember = function(members) {
+		// single phone
+		if(typeof(members) === "string") {
+			this.conferenceControl("unvmute",
+				[
+					{"phone": members}
+				]
+			);
+		}else{
+			// multiple phones array, e.g.: [  {"phone": '15005600321'}, {"phone": '15005600323'} ]
+			this.conferenceControl("unvmute", members);
+		}
+	};
+
+	/**
+	 *  禁言会议成员
+	 **/
+	this.conferenceMuteMember = function(members) {
+		// single phone
+		if(typeof(members) === "string") {
+			this.conferenceControl("mute",
+				[
+					{"phone": members}
+				]
+			);
+		}else{
+			// multiple phones array, e.g.: [  {"phone": '15005600321'}, {"phone": '15005600323'} ]
+			this.conferenceControl("mute", members);
+		}
+	};
+
+	/**
+	 *  解禁会议成员
+	 **/
+	this.conferenceUnMuteMember = function(members) {
+		// single phone
+		if(typeof(members) === "string") {
+			this.conferenceControl("unmute",
+				[
+					{"phone": members}
+				]
+			);
+		}else{
+			// multiple phones array, e.g.: [  {"phone": '15005600321'}, {"phone": '15005600323'} ]
+			this.conferenceControl("unmute", members);
+		}
+	};
+
+	/**
+	 *  增加会议成员
+	 **/
+	this.conferenceAddMembers = function(members) {
+		this.conferenceControl("add", members)
+	};
+
+
+	/**
+	 *  移除会议成员
+	 **/
+	this.conferenceRemoveMembers = function(members) {
+		// single phone
+		if(typeof(members) === "string") {
+			var memberItemObj = $("#conf_member_" + members);
+			if($(".conf_status", memberItemObj).text() === "通话中") {
+				this.conferenceControl("remove",
+					[
+						{"phone": members}
+					]
+				);
+			}
+			memberItemObj.remove();
+		}else{
+			// multiple phones array, e.g.: [  {"phone": '15005600321'}, {"phone": '15005600323'} ]
+			this.conferenceControl("remove", members);
+		}
+	};
+
+	/**
+	 *  结束电话会议
+	 **/
+	this.conferenceEnd = function() {
+		this.conferenceControl("endconf", [])
+	};
+
+
+	/**
+	 *  电话会议控制相关操作
+	 * @param action 操作
+	 * @param phoneList 会议成员
+	 */
+	this.conferenceControl = function (action, phoneList) {
+		var cmd = {};
+		cmd.action = "conference";
+		cmd.body = { "method": action, "memberList": phoneList };
+		ws.send(JSON.stringify(cmd));
+	};
+
+    /*************************  以下是通话监听相关  ***************************/
+
+    /**
+     *   拉取监听的通话列表
+     */
+    this.callMonitorDataPull = function (){
+        var cmd = {};
+        cmd.action = "monitorData";
+        cmd.body = {};
+        ws.send(JSON.stringify(cmd));
+    };
+
+	/**
+	 *   拉取排队中的电话列表
+	 */
+	this.inboundCallQueuePull = function (){
+		var cmd = {};
+		cmd.action = "inboundMonitorData";
+		cmd.body = {};
+		ws.send(JSON.stringify(cmd));
+	};
+
+    // 构造通话监听参数
+    this.monitorControl = function(action, argsObject){
+        var sessionControl = {};
+        sessionControl.action="callMonitor";
+        sessionControl.body = {"cmd" : action, "args" : argsObject };
+        ws.send(JSON.stringify(sessionControl));
+    };
+
+    /**
+     * 通话监听
+     * @param { 通话id } callId
+     * @returns
+     */
+    this.callMonitorStart = function(callId){
+        if(callId == null || callId.length === 0) {
+            console.log('请提供待监听电话的 callId ！');
+            return;
+        }
+
+        if(!_cc.getIsConnected()){
+            console.log('请先上线.');
+            return;
+        }
+
+        this.monitorControl(
+            "startMonitoring",
+            {
+                'callSpyId': callId
+            }
+        );
+    };
+
+
+    /**
+     * 结束监听
+     */
+    this.callMonitorEnd = function(){
+        if(!_cc.getIsConnected()){
+            console.log('请先上线.');
+            return;
+        }
+
+        this.monitorControl(
+            "endMonitoring",{}
+        );
+    };
+
+}
+
+export default ccPhoneBarSocket;
+

src/assets/callCenterPhoneBarSdk/constants.js

@@ -0,0 +1,367 @@
+/**
+ * 呼叫中心电话工具条常量定义
+ * author: easycallcenter365@126.com
+ * 2025-04-08
+ */
+
+/**
+ * 座席状态枚举
+ */
+export const AgentStatusEnum = {
+  /** 刚刚上线，尚未就绪中 */
+  JUST_LOGIN: 1,
+  /** 空闲 */
+  FREE: 2,
+  /** 忙碌 */
+  BUSY: 3,
+  /** 小休 */
+  BUSY_REST: 31,
+  /** 线下会议 */
+  BUSY_MEETING: 32,
+  /** 培训 */
+  BUSY_TRAINING: 33,
+  /** 通话中 */
+  INCALL: 4,
+  /** 话后处理，填写表单中 */
+  FILL_FORM: 5,
+  /** 电话会议中 */
+  CONFERENCE: 6
+};
+
+/**
+ * 视频级别配置
+ */
+export const VideoLevels = {
+  SMOOTH: { levelId: '42e00b', description: '流畅' },
+  SMOOTH2: { levelId: '42e00c', description: '流畅+' },
+  SMOOTH3: { levelId: '42e00d', description: '流畅++' },
+  CLEAR: { levelId: '42e014', description: '清晰' },
+  CLEAR2: { levelId: '42e015', description: '清晰+' },
+  CLEAR3: { levelId: '42e016', description: '清晰++' },
+  HD: { levelId: '42e01e', description: '高清' },
+  HD2: { levelId: '42e01f', description: '高清+' }
+};
+
+/**
+ * 系统事件列表 - 基础事件
+ */
+export const EventList = {
+  /** 当音频通话已建立 */
+  ON_AUDIO_CALL_CONNECTED: '100',
+  /** 当视频通话已建立 */
+  ON_VIDEO_CALL_CONNECTED: '101',
+  /** websocketServer 连接成功 */
+  WS_CONNECTED: '200',
+  /** 当前用户已在其他设备登录 */
+  USER_LOGIN_ON_OTHER_DEVICE: '201',
+  /** 用户下线 */
+  WS_DISCONNECTED: '202',
+  /** 通话状态发生改变 [监听的数据] */
+  CALL_SESSION_STATUS_DATA_CHANGED: '203',
+  /** 坐席状态列表发生改变 */
+  AGENT_STATUS_DATA_CHANGED: '205',
+  /** 请求参数错误 */
+  REQUEST_ARGS_ERROR: '400',
+  /** unauthorized */
+  UNAUTHORIZED: '401',
+  /** 服务器内部错误 */
+  SERVER_ERROR: '500',
+  /** 语音编码不匹配 */
+  SERVER_ERROR_AUDIO_CODEC_NOT_MATCH: '501',
+  /** 主叫接通 */
+  CALLER_ANSWERED: '600',
+  /** 主叫挂断 */
+  CALLER_HANGUP: '601',
+  /** 主叫忙; 上一通电话未挂机 */
+  CALLER_BUSY: '602',
+  /** 主叫未登录 */
+  CALLER_NOT_LOGIN: '603',
+  /** 主叫应答超时 */
+  CALLER_RESPOND_TIMEOUT: '604',
+  /** 被叫接通 */
+  CALLEE_ANSWERED: '605',
+  /** 被叫挂断 */
+  CALLEE_HANGUP: '606',
+  /** 被叫振铃 */
+  CALLEE_RINGING: '607',
+  /** 座席状态改变 */
+  STATUS_CHANGED: '608',
+  /** 一个完整的外呼任务结束：[可能尝试了一个或多个网关] */
+  OUTBOUND_FINISHED: '611',
+  /** 预测外呼，分配的来电 */
+  PREDICTIVE_CALL_INBOUND: '612',
+  /** ACD 队列分配的新来电 */
+  NEW_INBOUND_CALL: '613',
+  /** 当前业务组实时排队人数 */
+  ACD_GROUP_QUEUE_NUMBER: '615',
+  /** 收到转接的来电请求 */
+  TRANSFER_CALL_RECV: 616,
+  /** 锁定坐席失败 */
+  LOCK_AGENT_FAIL: 617,
+  /** 通话已经转接成功 */
+  TRANSFER_CALL_SUCCESS: 618,
+  /** 产生 asr 语音识别结果 */
+  ASR_RESULT_GENERATE: 619,
+  /** ASR 语音识别流程结束（坐席侧） */
+  ASR_PROCESS_END_AGENT: 620,
+  /** ASR 语音识别流程结束（客户侧） */
+  ASR_PROCESS_END_CUSTOMER: 621,
+  /** ASR 语音识别流程开始 */
+  ASR_PROCESS_STARTED: 622,
+  /** customer call session hold */
+  CUSTOMER_CHANNEL_HOLD: 623,
+  /** customer call session unHold */
+  CUSTOMER_CHANNEL_UNHOLD: 624,
+  /** customer call session on hold is hangup */
+  CUSTOMER_ON_HOLD_HANGUP: 625,
+  /** inner consultation request */
+  INNER_CONSULTATION_REQUEST: 626,
+  /** customer call session on call-wait */
+  CUSTOMER_CHANNEL_CALL_WAIT: 627,
+  /** customer call session off call-wait */
+  CUSTOMER_CHANNEL_OFF_CALL_WAIT: 628,
+  /** customer call session on call-wait is hangup */
+  CUSTOMER_ON_CALL_WAIT_HANGUP: 629,
+  /** extension on line event */
+  EXTENSION_ON_LINE: 630,
+  /** extension off line event */
+  EXTENSION_OFF_LINE: 631,
+  /** Notify the agent that the call consultation has started */
+  INNER_CONSULTATION_START: 632,
+  /** Notify the agent that the call consultation has stopped */
+  INNER_CONSULTATION_STOP: 633,
+  /** 多人电话会议，重复的被叫 */
+  CONFERENCE_REPEAT_CALEE: 660,
+  /** 多人电话会议，呼叫成员超时 */
+  CONFERENCE_CALL_MODERATOR_TIMEOUT: 661,
+  /** 多人电话会议，成员接通 */
+  CONFERENCE_MEMBER_ANSWERED: 662,
+  /** 多人电话会议，成员挂机 */
+  CONFERENCE_MEMBER_HANGUP: 663,
+  /** 多人电话会议，成员禁言成功 */
+  CONFERENCE_MEMBER_MUTED_SUCCESS: 666,
+  /** 多人电话会议，成员禁言失败 */
+  CONFERENCE_MEMBER_MUTED_FAILED: 665,
+  /** 多人电话会议，成员解除禁言成功 */
+  CONFERENCE_MEMBER_UNMUTED_SUCCESS: 667,
+  /** 多人电话会议，成员解除禁言失败 */
+  CONFERENCE_MEMBER_UNMUTED_FAILED: 668,
+  /** 多人电话会议，会议成员不存在，无法执行相关操作 */
+  CONFERENCE_MEMBER_NOT_EXISTS: '669',
+  /** 多人电话会议，主持人重置会议 */
+  CONFERENCE_MODERATOR_RESET: '670',
+  /** 多人电话会议，主持人接通 */
+  CONFERENCE_MODERATOR_ANSWERED: '671',
+  /** 多人电话会议，主持人挂机，会议结束 */
+  CONFERENCE_MODERATOR_HANGUP: '672',
+  /** 成员视频禁用成功 */
+  CONFERENCE_MEMBER_VMUTED_SUCCESS: '674',
+  /** 成员解除视频禁用成功 */
+  CONFERENCE_MEMBER_UNVMUTED_SUCCESS: '676',
+  /** 成员解除视频禁用失败 */
+  CONFERENCE_MEMBER_UNVMUTED_FAILED: '677',
+  /** 成功把通话转接到多人视频会议 */
+  CONFERENCE_TRANSFER_SUCCESS_FROM_EXISTED_CALL: '678',
+  /** outbound start event */
+  OUTBOUND_START: '679'
+};
+
+/**
+ * 系统事件列表 - 带文本信息的事件
+ */
+export const EventListWithTextInfo = {
+  WS_CONNECTED: {
+    code: 200,
+    msg: '已签入',
+    btn_text: [{ id: '#onLineBtn', name: '签出' }],
+    enabled_btn: ['#setFree', '#callBtn', '#onLineBtn', '#consultationBtn']
+  },
+  WS_DISCONNECTED: {
+    code: 202,
+    msg: '服务器连接断开',
+    btn_text: [{ id: '#onLineBtn', name: '签入' }],
+    enabled_btn: ['#onLineBtn']
+  },
+  USER_LOGIN_ON_OTHER_DEVICE: {
+    code: 201,
+    msg: '用户已在其他设备登录',
+    btn_text: [{ id: '#onLineBtn', name: '签入' }],
+    enabled_btn: ['#onLineBtn']
+  },
+  REQUEST_ARGS_ERROR: {
+    code: 400,
+    msg: '客户端请求参数错误',
+    btn_text: [],
+    enabled_btn: []
+  },
+  SERVER_ERROR: {
+    code: 500,
+    msg: '服务器内部错误',
+    btn_text: [],
+    enabled_btn: []
+  },
+  CALLER_ANSWERED: {
+    code: 600,
+    msg: '分机已接通',
+    btn_text: [],
+    enabled_btn: ['#resetStatus', '#hangUpBtn', '#transferBtn', '#holdBtn', '#consultationBtn']
+  },
+  CALLER_HANGUP: {
+    code: 601,
+    msg: '分机已挂断',
+    btn_text: [],
+    enabled_btn: ['#onLineBtn', '#resetStatus', '#callBtn', '#setFree', '#consultationBtn']
+  },
+  CALLER_BUSY: {
+    code: 602,
+    msg: '分机忙，上一通电话未挂断',
+    btn_text: [],
+    enabled_btn: ['#onLineBtn', '#resetStatus', '#callBtn', '#setFree', '#consultationBtn']
+  },
+  CALLER_NOT_LOGIN: {
+    code: 603,
+    msg: '分机未登录，请检查',
+    btn_text: [],
+    enabled_btn: ['#onLineBtn', '#resetStatus', '#callBtn', '#setFree', '#consultationBtn']
+  },
+  CALLER_RESPOND_TIMEOUT: {
+    code: 604,
+    msg: '分机未应答超时，请重新打开分机',
+    btn_text: [],
+    enabled_btn: ['#onLineBtn', '#resetStatus', '#callBtn', '#setFree', '#consultationBtn']
+  },
+  CALLEE_ANSWERED: {
+    code: 605,
+    msg: '被叫已接通',
+    btn_text: [],
+    enabled_btn: ['#resetStatus', '#hangUpBtn', '#transferBtn', '#holdBtn', '#consultationBtn']
+  },
+  CALLEE_HANGUP: {
+    code: 606,
+    msg: '通话结束',
+    btn_text: [],
+    enabled_btn: ['#onLineBtn', '#resetStatus', '#callBtn', '#setFree', '#consultationBtn']
+  },
+  CALLEE_RINGING: {
+    code: 607,
+    msg: '被叫振铃中',
+    btn_text: [],
+    enabled_btn: ['#resetStatus', '#hangUpBtn', '#transferBtn', '#consultationBtn']
+  },
+  STATUS_CHANGED: {
+    code: 608,
+    msg: '状态已改变',
+    btn_text: [],
+    enabled_btn: []
+  },
+  FREE: {
+    code: 0,
+    msg: '空闲',
+    btn_text: [],
+    enabled_btn: ['#setBusy', '#onLineBtn', '#consultationBtn']
+  },
+  BUSY: {
+    code: 1,
+    msg: '忙碌',
+    btn_text: [],
+    enabled_btn: ['#setFree', '#onLineBtn', '#callBtn', '#consultationBtn']
+  },
+  CUSTOMER_CHANNEL_HOLD: {
+    code: 623,
+    msg: '通话已保持.',
+    btn_text: [],
+    enabled_btn: ['#setFree', '#callBtn', '#unHoldBtn', '#consultationBtn']
+  },
+  CUSTOMER_CHANNEL_UNHOLD: {
+    code: 624,
+    msg: '通话已接回.',
+    btn_text: [],
+    enabled_btn: ['#hangUpBtn', '#holdBtn']
+  }
+};
+
+/**
+ * 电话工具条按钮列表
+ */
+export const PhoneButtons = [
+  '#setFree', '#setBusy', '#callBtn', '#hangUpBtn', '#resetStatus',
+  '#onLineBtn', '#transferBtn', '#holdBtn', '#unHoldBtn', '#consultationBtn'
+];
+
+/**
+ * 置忙子状态选项
+ */
+export const BusySubStatusOptions = [
+  { value: '3', label: '置忙' },
+  { value: '31', label: '小休' },
+  { value: '32', label: '会议' },
+  { value: '33', label: '培训' }
+];
+
+/**
+ * 视频文件列表
+ */
+export const VideoFileList = [
+  { value: '', label: '请选择视频' },
+  { value: '/usr/local/freeswitchvideo/share/freeswitch/sounds/bank.mp4', label: '客服实例视频' },
+  { value: '/usr/local/freeswitchvideo/share/freeswitch/sounds/conference.mp4', label: '多方会议视频' },
+  { value: '/usr/local/freeswitchvideo/share/freeswitch/sounds/15-seconds.mp4', label: '15-seconds-demo' }
+];
+
+/**
+ * 会议布局选项
+ */
+export const ConferenceLayouts = [
+  { value: '2x2', label: '2x2' },
+  { value: '3x3', label: '3x3' },
+  { value: '1up_top_left+3', label: '一主三从' }
+];
+
+/**
+ * 会议模板选项
+ */
+export const ConferenceTemplates = [
+  { value: '480p', label: '480x640' },
+  { value: '720p', label: '720x1080' },
+  { value: 'default', label: 'default' }
+];
+
+/**
+ * 会议类型选项
+ */
+export const ConferenceCallTypes = [
+  { value: 'audio', label: '音频' }
+];
+
+/**
+ * 默认配置
+ */
+export const DefaultConfig = {
+  //scriptServer: '129.28.164.235',
+  scriptServer: '127.0.0.1',
+  scriptServerPort: '8899',
+  extNum: '1001',//分机号
+  opNum: 'admin',//用户登录账号
+  userName: 'admin',//用户姓名
+  groupId: '1',// 业务组 id
+  extPassword: '0406f9d44bb8fe195a1ee2557bbeebf7',
+  skillLevel: 9,//技能等级
+  ipccServerUrl: 'sip.ylrzcloud.com',
+
+  // 功能开关配置
+  featureSwitches: {
+    //基础外呼
+    call: true,         // 外呼
+    hold: true,         // 保持
+    hangup: true,       // 挂机
+    reset: true,        // 强置
+    signInOut: true,     // 签出签入
+
+    //进阶功能
+    setBusy: false,      // 置忙-可外呼
+    setFree: false,      // 置闲-可接呼入的电话
+    transfer: false,     // 转接
+    consultation: false, // 咨询
+    conference: false,   // 会议
+  }
+};

src/assets/callCenterPhoneBarSdk/jquery-1.11.0.js

@@ -0,0 +1,9800 @@
+/*!
+* jQuery JavaScript Library v1.11.0
+* http://jquery.com/
+*
+* Includes Sizzle.js
+* http://sizzlejs.com/
+*
+* Copyright 2005, 2014m jQuery Foundation, Inc. and other contributors
+* Released under the MIT license
+* http://jquery.org/license
+*
+* Date: 2014-06-10T10:12Z
+*/
+(function( window, undefined ) {
+
+// Can't do this because several apps including ASP.NET trace
+// the stack via arguments.caller.callee and Firefox dies if
+// you try to trace through "use strict" call chains. (#13335)
+// Support: Firefox 18+
+//"use strict";
+var
+	// The deferred used on DOM ready
+	readyList,
+
+	// A central reference to the root jQuery(document)
+	rootjQuery,
+
+	// Support: IE<10
+	// For `typeof xmlNode.method` instead of `xmlNode.method !== undefined`
+	core_strundefined = typeof undefined,
+
+	// Use the correct document accordingly with window argument (sandbox)
+	location = window.location,
+	document = window.document,
+	docElem = document.documentElement,
+
+	// Map over jQuery in case of overwrite
+	_jQuery = window.jQuery,
+
+	// Map over the $ in case of overwrite
+	_$ = window.$,
+
+	// [[Class]] -> type pairs
+	class2type = {},
+
+	// List of deleted data cache ids, so we can reuse them
+	core_deletedIds = [],
+
+	core_version = "1.10.0",
+
+	// Save a reference to some core methods
+	core_concat = core_deletedIds.concat,
+	core_push = core_deletedIds.push,
+	core_slice = core_deletedIds.slice,
+	core_indexOf = core_deletedIds.indexOf,
+	core_toString = class2type.toString,
+	core_hasOwn = class2type.hasOwnProperty,
+	core_trim = core_version.trim,
+
+	// Define a local copy of jQuery
+	jQuery = function( selector, context ) {
+		// The jQuery object is actually just the init constructor 'enhanced'
+		return new jQuery.fn.init( selector, context, rootjQuery );
+	},
+
+	// Used for matching numbers
+	core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,
+
+	// Used for splitting on whitespace
+	core_rnotwhite = /\S+/g,
+
+	// Make sure we trim BOM and NBSP (here's looking at you, Safari 5.0 and IE)
+	rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
+
+	// A simple way to check for HTML strings
+	// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
+	// Strict HTML recognition (#11290: must start with <)
+	rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
+
+	// Match a standalone tag
+	rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
+
+	// JSON RegExp
+	rvalidchars = /^[\],:{}\s]*$/,
+	rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
+	rvalidescape = /\\(?:["\\\/bfnrt]|u[\da-fA-F]{4})/g,
+	rvalidtokens = /"[^"\\\r\n]*"|true|false|null|-?(?:\d+\.|)\d+(?:[eE][+-]?\d+|)/g,
+
+	// Matches dashed string for camelizing
+	rmsPrefix = /^-ms-/,
+	rdashAlpha = /-([\da-z])/gi,
+
+	// Used by jQuery.camelCase as callback to replace()
+	fcamelCase = function( all, letter ) {
+		return letter.toUpperCase();
+	},
+
+	// The ready event handler
+	completed = function( event ) {
+
+		// readyState === "complete" is good enough for us to call the dom ready in oldIE
+		if ( document.addEventListener || event.type === "load" || document.readyState === "complete" ) {
+			detach();
+			jQuery.ready();
+		}
+	},
+	// Clean-up method for dom ready events
+	detach = function() {
+		if ( document.addEventListener ) {
+			document.removeEventListener( "DOMContentLoaded", completed, false );
+			window.removeEventListener( "load", completed, false );
+
+		} else {
+			document.detachEvent( "onreadystatechange", completed );
+			window.detachEvent( "onload", completed );
+		}
+	};
+
+jQuery.fn = jQuery.prototype = {
+	// The current version of jQuery being used
+	jquery: core_version,
+
+	constructor: jQuery,
+	init: function( selector, context, rootjQuery ) {
+		var match, elem;
+
+		// HANDLE: $(""), $(null), $(undefined), $(false)
+		if ( !selector ) {
+			return this;
+		}
+
+		// Handle HTML strings
+		if ( typeof selector === "string" ) {
+			if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
+				// Assume that strings that start and end with <> are HTML and skip the regex check
+				match = [ null, selector, null ];
+
+			} else {
+				match = rquickExpr.exec( selector );
+			}
+
+			// Match html or make sure no context is specified for #id
+			if ( match && (match[1] || !context) ) {
+
+				// HANDLE: $(html) -> $(array)
+				if ( match[1] ) {
+					context = context instanceof jQuery ? context[0] : context;
+
+					// scripts is true for back-compat
+					jQuery.merge( this, jQuery.parseHTML(
+						match[1],
+						context && context.nodeType ? context.ownerDocument || context : document,
+						true
+					) );
+
+					// HANDLE: $(html, props)
+					if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
+						for ( match in context ) {
+							// Properties of context are called as methods if possible
+							if ( jQuery.isFunction( this[ match ] ) ) {
+								this[ match ]( context[ match ] );
+
+							// ...and otherwise set as attributes
+							} else {
+								this.attr( match, context[ match ] );
+							}
+						}
+					}
+
+					return this;
+
+				// HANDLE: $(#id)
+				} else {
+					elem = document.getElementById( match[2] );
+
+					// Check parentNode to catch when Blackberry 4.6 returns
+					// nodes that are no longer in the document #6963
+					if ( elem && elem.parentNode ) {
+						// Handle the case where IE and Opera return items
+						// by name instead of ID
+						if ( elem.id !== match[2] ) {
+							return rootjQuery.find( selector );
+						}
+
+						// Otherwise, we inject the element directly into the jQuery object
+						this.length = 1;
+						this[0] = elem;
+					}
+
+					this.context = document;
+					this.selector = selector;
+					return this;
+				}
+
+			// HANDLE: $(expr, $(...))
+			} else if ( !context || context.jquery ) {
+				return ( context || rootjQuery ).find( selector );
+
+			// HANDLE: $(expr, context)
+			// (which is just equivalent to: $(context).find(expr)
+			} else {
+				return this.constructor( context ).find( selector );
+			}
+
+		// HANDLE: $(DOMElement)
+		} else if ( selector.nodeType ) {
+			this.context = this[0] = selector;
+			this.length = 1;
+			return this;
+
+		// HANDLE: $(function)
+		// Shortcut for document ready
+		} else if ( jQuery.isFunction( selector ) ) {
+			return rootjQuery.ready( selector );
+		}
+
+		if ( selector.selector !== undefined ) {
+			this.selector = selector.selector;
+			this.context = selector.context;
+		}
+
+		return jQuery.makeArray( selector, this );
+	},
+
+	// Start with an empty selector
+	selector: "",
+
+	// The default length of a jQuery object is 0
+	length: 0,
+
+	toArray: function() {
+		return core_slice.call( this );
+	},
+
+	// Get the Nth element in the matched element set OR
+	// Get the whole matched element set as a clean array
+	get: function( num ) {
+		return num == null ?
+
+			// Return a 'clean' array
+			this.toArray() :
+
+			// Return just the object
+			( num < 0 ? this[ this.length + num ] : this[ num ] );
+	},
+
+	// Take an array of elements and push it onto the stack
+	// (returning the new matched element set)
+	pushStack: function( elems ) {
+
+		// Build a new jQuery matched element set
+		var ret = jQuery.merge( this.constructor(), elems );
+
+		// Add the old object onto the stack (as a reference)
+		ret.prevObject = this;
+		ret.context = this.context;
+
+		// Return the newly-formed element set
+		return ret;
+	},
+
+	// Execute a callback for every element in the matched set.
+	// (You can seed the arguments with an array of args, but this is
+	// only used internally.)
+	each: function( callback, args ) {
+		return jQuery.each( this, callback, args );
+	},
+
+	ready: function( fn ) {
+		// Add the callback
+		jQuery.ready.promise().done( fn );
+
+		return this;
+	},
+
+	slice: function() {
+		return this.pushStack( core_slice.apply( this, arguments ) );
+	},
+
+	first: function() {
+		return this.eq( 0 );
+	},
+
+	last: function() {
+		return this.eq( -1 );
+	},
+
+	eq: function( i ) {
+		var len = this.length,
+			j = +i + ( i < 0 ? len : 0 );
+		return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
+	},
+
+	map: function( callback ) {
+		return this.pushStack( jQuery.map(this, function( elem, i ) {
+			return callback.call( elem, i, elem );
+		}));
+	},
+
+	end: function() {
+		return this.prevObject || this.constructor(null);
+	},
+
+	// For internal use only.
+	// Behaves like an Array's method, not like a jQuery method.
+	push: core_push,
+	sort: [].sort,
+	splice: [].splice
+};
+
+// Give the init function the jQuery prototype for later instantiation
+jQuery.fn.init.prototype = jQuery.fn;
+
+jQuery.extend = jQuery.fn.extend = function() {
+	var src, copyIsArray, copy, name, options, clone,
+		target = arguments[0] || {},
+		i = 1,
+		length = arguments.length,
+		deep = false;
+
+	// Handle a deep copy situation
+	if ( typeof target === "boolean" ) {
+		deep = target;
+		target = arguments[1] || {};
+		// skip the boolean and the target
+		i = 2;
+	}
+
+	// Handle case when target is a string or something (possible in deep copy)
+	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
+		target = {};
+	}
+
+	// extend jQuery itself if only one argument is passed
+	if ( length === i ) {
+		target = this;
+		--i;
+	}
+
+	for ( ; i < length; i++ ) {
+		// Only deal with non-null/undefined values
+		if ( (options = arguments[ i ]) != null ) {
+			// Extend the base object
+			for ( name in options ) {
+				src = target[ name ];
+				copy = options[ name ];
+
+				// Prevent never-ending loop
+				if ( target === copy ) {
+					continue;
+				}
+
+				// Recurse if we're merging plain objects or arrays
+				if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
+					if ( copyIsArray ) {
+						copyIsArray = false;
+						clone = src && jQuery.isArray(src) ? src : [];
+
+					} else {
+						clone = src && jQuery.isPlainObject(src) ? src : {};
+					}
+
+					// Never move original objects, clone them
+					target[ name ] = jQuery.extend( deep, clone, copy );
+
+				// Don't bring in undefined values
+				} else if ( copy !== undefined ) {
+					target[ name ] = copy;
+				}
+			}
+		}
+	}
+
+	// Return the modified object
+	return target;
+};
+
+jQuery.extend({
+	// Unique for each copy of jQuery on the page
+	// Non-digits removed to match rinlinejQuery
+	expando: "jQuery" + ( core_version + Math.random() ).replace( /\D/g, "" ),
+
+	noConflict: function( deep ) {
+		if ( window.$ === jQuery ) {
+			window.$ = _$;
+		}
+
+		if ( deep && window.jQuery === jQuery ) {
+			window.jQuery = _jQuery;
+		}
+
+		return jQuery;
+	},
+
+	// Is the DOM ready to be used? Set to true once it occurs.
+	isReady: false,
+
+	// A counter to track how many items to wait for before
+	// the ready event fires. See #6781
+	readyWait: 1,
+
+	// Hold (or release) the ready event
+	holdReady: function( hold ) {
+		if ( hold ) {
+			jQuery.readyWait++;
+		} else {
+			jQuery.ready( true );
+		}
+	},
+
+	// Handle when the DOM is ready
+	ready: function( wait ) {
+
+		// Abort if there are pending holds or we're already ready
+		if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
+			return;
+		}
+
+		// Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
+		if ( !document.body ) {
+			return setTimeout( jQuery.ready );
+		}
+
+		// Remember that the DOM is ready
+		jQuery.isReady = true;
+
+		// If a normal DOM Ready event fired, decrement, and wait if need be
+		if ( wait !== true && --jQuery.readyWait > 0 ) {
+			return;
+		}
+
+		// If there are functions bound, to execute
+		readyList.resolveWith( document, [ jQuery ] );
+
+		// Trigger any bound ready events
+		if ( jQuery.fn.trigger ) {
+			jQuery( document ).trigger("ready").off("ready");
+		}
+	},
+
+	// See test/unit/core.js for details concerning isFunction.
+	// Since version 1.3, DOM methods and functions like alert
+	// aren't supported. They return false on IE (#2968).
+	isFunction: function( obj ) {
+		return jQuery.type(obj) === "function";
+	},
+
+	isArray: Array.isArray || function( obj ) {
+		return jQuery.type(obj) === "array";
+	},
+
+	isWindow: function( obj ) {
+		/* jshint eqeqeq: false */
+		return obj != null && obj == obj.window;
+	},
+
+	isNumeric: function( obj ) {
+		return !isNaN( parseFloat(obj) ) && isFinite( obj );
+	},
+
+	type: function( obj ) {
+		if ( obj == null ) {
+			return String( obj );
+		}
+		return typeof obj === "object" || typeof obj === "function" ?
+			class2type[ core_toString.call(obj) ] || "object" :
+			typeof obj;
+	},
+
+	isPlainObject: function( obj ) {
+		var key;
+
+		// Must be an Object.
+		// Because of IE, we also have to check the presence of the constructor property.
+		// Make sure that DOM nodes and window objects don't pass through, as well
+		if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
+			return false;
+		}
+
+		try {
+			// Not own constructor property must be Object
+			if ( obj.constructor &&
+				!core_hasOwn.call(obj, "constructor") &&
+				!core_hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
+				return false;
+			}
+		} catch ( e ) {
+			// IE8,9 Will throw exceptions on certain host objects #9897
+			return false;
+		}
+
+		// Support: IE<9
+		// Handle iteration over inherited properties before own properties.
+		if ( jQuery.support.ownLast ) {
+			for ( key in obj ) {
+				return core_hasOwn.call( obj, key );
+			}
+		}
+
+		// Own properties are enumerated firstly, so to speed up,
+		// if last one is own, then all properties are own.
+		for ( key in obj ) {}
+
+		return key === undefined || core_hasOwn.call( obj, key );
+	},
+
+	isEmptyObject: function( obj ) {
+		var name;
+		for ( name in obj ) {
+			return false;
+		}
+		return true;
+	},
+
+	error: function( msg ) {
+		throw new Error( msg );
+	},
+
+	// data: string of html
+	// context (optional): If specified, the fragment will be created in this context, defaults to document
+	// keepScripts (optional): If true, will include scripts passed in the html string
+	parseHTML: function( data, context, keepScripts ) {
+		if ( !data || typeof data !== "string" ) {
+			return null;
+		}
+		if ( typeof context === "boolean" ) {
+			keepScripts = context;
+			context = false;
+		}
+		context = context || document;
+
+		var parsed = rsingleTag.exec( data ),
+			scripts = !keepScripts && [];
+
+		// Single tag
+		if ( parsed ) {
+			return [ context.createElement( parsed[1] ) ];
+		}
+
+		parsed = jQuery.buildFragment( [ data ], context, scripts );
+		if ( scripts ) {
+			jQuery( scripts ).remove();
+		}
+		return jQuery.merge( [], parsed.childNodes );
+	},
+
+	parseJSON: function( data ) {
+		// Attempt to parse using the native JSON parser first
+		if ( window.JSON && window.JSON.parse ) {
+			return window.JSON.parse( data );
+		}
+
+		if ( data === null ) {
+			return data;
+		}
+
+		if ( typeof data === "string" ) {
+
+			// Make sure leading/trailing whitespace is removed (IE can't handle it)
+			data = jQuery.trim( data );
+
+			if ( data ) {
+				// Make sure the incoming data is actual JSON
+				// Logic borrowed from http://json.org/json2.js
+				if ( rvalidchars.test( data.replace( rvalidescape, "@" )
+					.replace( rvalidtokens, "]" )
+					.replace( rvalidbraces, "")) ) {
+
+					return ( new Function( "return " + data ) )();
+				}
+			}
+		}
+
+		jQuery.error( "Invalid JSON: " + data );
+	},
+
+	// Cross-browser xml parsing
+	parseXML: function( data ) {
+		var xml, tmp;
+		if ( !data || typeof data !== "string" ) {
+			return null;
+		}
+		try {
+			if ( window.DOMParser ) { // Standard
+				tmp = new DOMParser();
+				xml = tmp.parseFromString( data , "text/xml" );
+			} else { // IE
+				xml = new ActiveXObject( "Microsoft.XMLDOM" );
+				xml.async = "false";
+				xml.loadXML( data );
+			}
+		} catch( e ) {
+			xml = undefined;
+		}
+		if ( !xml || !xml.documentElement || xml.getElementsByTagName( "parsererror" ).length ) {
+			jQuery.error( "Invalid XML: " + data );
+		}
+		return xml;
+	},
+
+	noop: function() {},
+
+	// Evaluates a script in a global context
+	// Workarounds based on findings by Jim Driscoll
+	// http://weblogs.java.net/blog/driscoll/archive/2009/09/08/eval-javascript-global-context
+	globalEval: function( data ) {
+		if ( data && jQuery.trim( data ) ) {
+			// We use execScript on Internet Explorer
+			// We use an anonymous function so that context is window
+			// rather than jQuery in Firefox
+			( window.execScript || function( data ) {
+				window[ "eval" ].call( window, data );
+			} )( data );
+		}
+	},
+
+	// Convert dashed to camelCase; used by the css and data modules
+	// Microsoft forgot to hump their vendor prefix (#9572)
+	camelCase: function( string ) {
+		return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
+	},
+
+	nodeName: function( elem, name ) {
+		return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
+	},
+
+	// args is for internal usage only
+	each: function( obj, callback, args ) {
+		var value,
+			i = 0,
+			length = obj.length,
+			isArray = isArraylike( obj );
+
+		if ( args ) {
+			if ( isArray ) {
+				for ( ; i < length; i++ ) {
+					value = callback.apply( obj[ i ], args );
+
+					if ( value === false ) {
+						break;
+					}
+				}
+			} else {
+				for ( i in obj ) {
+					value = callback.apply( obj[ i ], args );
+
+					if ( value === false ) {
+						break;
+					}
+				}
+			}
+
+		// A special, fast, case for the most common use of each
+		} else {
+			if ( isArray ) {
+				for ( ; i < length; i++ ) {
+					value = callback.call( obj[ i ], i, obj[ i ] );
+
+					if ( value === false ) {
+						break;
+					}
+				}
+			} else {
+				for ( i in obj ) {
+					value = callback.call( obj[ i ], i, obj[ i ] );
+
+					if ( value === false ) {
+						break;
+					}
+				}
+			}
+		}
+
+		return obj;
+	},
+
+	// Use native String.trim function wherever possible
+	trim: core_trim && !core_trim.call("\uFEFF\xA0") ?
+		function( text ) {
+			return text == null ?
+				"" :
+				core_trim.call( text );
+		} :
+
+		// Otherwise use our own trimming functionality
+		function( text ) {
+			return text == null ?
+				"" :
+				( text + "" ).replace( rtrim, "" );
+		},
+
+	// results is for internal usage only
+	makeArray: function( arr, results ) {
+		var ret = results || [];
+
+		if ( arr != null ) {
+			if ( isArraylike( Object(arr) ) ) {
+				jQuery.merge( ret,
+					typeof arr === "string" ?
+					[ arr ] : arr
+				);
+			} else {
+				core_push.call( ret, arr );
+			}
+		}
+
+		return ret;
+	},
+
+	inArray: function( elem, arr, i ) {
+		var len;
+
+		if ( arr ) {
+			if ( core_indexOf ) {
+				return core_indexOf.call( arr, elem, i );
+			}
+
+			len = arr.length;
+			i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
+
+			for ( ; i < len; i++ ) {
+				// Skip accessing in sparse arrays
+				if ( i in arr && arr[ i ] === elem ) {
+					return i;
+				}
+			}
+		}
+
+		return -1;
+	},
+
+	merge: function( first, second ) {
+		var l = second.length,
+			i = first.length,
+			j = 0;
+
+		if ( typeof l === "number" ) {
+			for ( ; j < l; j++ ) {
+				first[ i++ ] = second[ j ];
+			}
+		} else {
+			while ( second[j] !== undefined ) {
+				first[ i++ ] = second[ j++ ];
+			}
+		}
+
+		first.length = i;
+
+		return first;
+	},
+
+	grep: function( elems, callback, inv ) {
+		var retVal,
+			ret = [],
+			i = 0,
+			length = elems.length;
+		inv = !!inv;
+
+		// Go through the array, only saving the items
+		// that pass the validator function
+		for ( ; i < length; i++ ) {
+			retVal = !!callback( elems[ i ], i );
+			if ( inv !== retVal ) {
+				ret.push( elems[ i ] );
+			}
+		}
+
+		return ret;
+	},
+
+	// arg is for internal usage only
+	map: function( elems, callback, arg ) {
+		var value,
+			i = 0,
+			length = elems.length,
+			isArray = isArraylike( elems ),
+			ret = [];
+
+		// Go through the array, translating each of the items to their
+		if ( isArray ) {
+			for ( ; i < length; i++ ) {
+				value = callback( elems[ i ], i, arg );
+
+				if ( value != null ) {
+					ret[ ret.length ] = value;
+				}
+			}
+
+		// Go through every key on the object,
+		} else {
+			for ( i in elems ) {
+				value = callback( elems[ i ], i, arg );
+
+				if ( value != null ) {
+					ret[ ret.length ] = value;
+				}
+			}
+		}
+
+		// Flatten any nested arrays
+		return core_concat.apply( [], ret );
+	},
+
+	// A global GUID counter for objects
+	guid: 1,
+
+	// Bind a function to a context, optionally partially applying any
+	// arguments.
+	proxy: function( fn, context ) {
+		var args, proxy, tmp;
+
+		if ( typeof context === "string" ) {
+			tmp = fn[ context ];
+			context = fn;
+			fn = tmp;
+		}
+
+		// Quick check to determine if target is callable, in the spec
+		// this throws a TypeError, but we will just return undefined.
+		if ( !jQuery.isFunction( fn ) ) {
+			return undefined;
+		}
+
+		// Simulated bind
+		args = core_slice.call( arguments, 2 );
+		proxy = function() {
+			return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );
+		};
+
+		// Set the guid of unique handler to the same of original handler, so it can be removed
+		proxy.guid = fn.guid = fn.guid || jQuery.guid++;
+
+		return proxy;
+	},
+
+	// Multifunctional method to get and set values of a collection
+	// The value/s can optionally be executed if it's a function
+	access: function( elems, fn, key, value, chainable, emptyGet, raw ) {
+		var i = 0,
+			length = elems.length,
+			bulk = key == null;
+
+		// Sets many values
+		if ( jQuery.type( key ) === "object" ) {
+			chainable = true;
+			for ( i in key ) {
+				jQuery.access( elems, fn, i, key[i], true, emptyGet, raw );
+			}
+
+		// Sets one value
+		} else if ( value !== undefined ) {
+			chainable = true;
+
+			if ( !jQuery.isFunction( value ) ) {
+				raw = true;
+			}
+
+			if ( bulk ) {
+				// Bulk operations run against the entire set
+				if ( raw ) {
+					fn.call( elems, value );
+					fn = null;
+
+				// ...except when executing function values
+				} else {
+					bulk = fn;
+					fn = function( elem, key, value ) {
+						return bulk.call( jQuery( elem ), value );
+					};
+				}
+			}
+
+			if ( fn ) {
+				for ( ; i < length; i++ ) {
+					fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) );
+				}
+			}
+		}
+
+		return chainable ?
+			elems :
+
+			// Gets
+			bulk ?
+				fn.call( elems ) :
+				length ? fn( elems[0], key ) : emptyGet;
+	},
+
+	now: function() {
+		return ( new Date() ).getTime();
+	},
+
+	// A method for quickly swapping in/out CSS properties to get correct calculations.
+	// Note: this method belongs to the css module but it's needed here for the support module.
+	// If support gets modularized, this method should be moved back to the css module.
+	swap: function( elem, options, callback, args ) {
+		var ret, name,
+			old = {};
+
+		// Remember the old values, and insert the new ones
+		for ( name in options ) {
+			old[ name ] = elem.style[ name ];
+			elem.style[ name ] = options[ name ];
+		}
+
+		ret = callback.apply( elem, args || [] );
+
+		// Revert the old values
+		for ( name in options ) {
+			elem.style[ name ] = old[ name ];
+		}
+
+		return ret;
+	}
+});
+
+jQuery.ready.promise = function( obj ) {
+	if ( !readyList ) {
+
+		readyList = jQuery.Deferred();
+
+		// Catch cases where $(document).ready() is called after the browser event has already occurred.
+		// we once tried to use readyState "interactive" here, but it caused issues like the one
+		// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
+		if ( document.readyState === "complete" ) {
+			// Handle it asynchronously to allow scripts the opportunity to delay ready
+			setTimeout( jQuery.ready );
+
+		// Standards-based browsers support DOMContentLoaded
+		} else if ( document.addEventListener ) {
+			// Use the handy event callback
+			document.addEventListener( "DOMContentLoaded", completed, false );
+
+			// A fallback to window.onload, that will always work
+			window.addEventListener( "load", completed, false );
+
+		// If IE event model is used
+		} else {
+			// Ensure firing before onload, maybe late but safe also for iframes
+			document.attachEvent( "onreadystatechange", completed );
+
+			// A fallback to window.onload, that will always work
+			window.attachEvent( "onload", completed );
+
+			// If IE and not a frame
+			// continually check to see if the document is ready
+			var top = false;
+
+			try {
+				top = window.frameElement == null && document.documentElement;
+			} catch(e) {}
+
+			if ( top && top.doScroll ) {
+				(function doScrollCheck() {
+					if ( !jQuery.isReady ) {
+
+						try {
+							// Use the trick by Diego Perini
+							// http://javascript.nwbox.com/IEContentLoaded/
+							top.doScroll("left");
+						} catch(e) {
+							return setTimeout( doScrollCheck, 50 );
+						}
+
+						// detach all dom ready events
+						detach();
+
+						// and execute any waiting functions
+						jQuery.ready();
+					}
+				})();
+			}
+		}
+	}
+	return readyList.promise( obj );
+};
+
+// Populate the class2type map
+jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
+	class2type[ "[object " + name + "]" ] = name.toLowerCase();
+});
+
+function isArraylike( obj ) {
+	var length = obj.length,
+		type = jQuery.type( obj );
+
+	if ( jQuery.isWindow( obj ) ) {
+		return false;
+	}
+
+	if ( obj.nodeType === 1 && length ) {
+		return true;
+	}
+
+	return type === "array" || type !== "function" &&
+		( length === 0 ||
+		typeof length === "number" && length > 0 && ( length - 1 ) in obj );
+}
+
+// All jQuery objects should point back to these
+rootjQuery = jQuery(document);
+/*!
+ * Sizzle CSS Selector Engine v1.9.4-pre
+ * http://sizzlejs.com/
+ *
+ * Copyright 2013 jQuery Foundation, Inc. and other contributors
+ * Released under the MIT license
+ * http://jquery.org/license
+ *
+ * Date: 2013-05-15
+ */
+(function( window, undefined ) {
+
+var i,
+	support,
+	cachedruns,
+	Expr,
+	getText,
+	isXML,
+	compile,
+	outermostContext,
+	sortInput,
+
+	// Local document vars
+	setDocument,
+	document,
+	docElem,
+	documentIsHTML,
+	rbuggyQSA,
+	rbuggyMatches,
+	matches,
+	contains,
+
+	// Instance-specific data
+	expando = "sizzle" + -(new Date()),
+	preferredDoc = window.document,
+	dirruns = 0,
+	done = 0,
+	classCache = createCache(),
+	tokenCache = createCache(),
+	compilerCache = createCache(),
+	hasDuplicate = false,
+	sortOrder = function() { return 0; },
+
+	// General-purpose constants
+	strundefined = typeof undefined,
+	MAX_NEGATIVE = 1 << 31,
+
+	// Instance methods
+	hasOwn = ({}).hasOwnProperty,
+	arr = [],
+	pop = arr.pop,
+	push_native = arr.push,
+	push = arr.push,
+	slice = arr.slice,
+	// Use a stripped-down indexOf if we can't use a native one
+	indexOf = arr.indexOf || function( elem ) {
+		var i = 0,
+			len = this.length;
+		for ( ; i < len; i++ ) {
+			if ( this[i] === elem ) {
+				return i;
+			}
+		}
+		return -1;
+	},
+
+	booleans = "checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",
+
+	// Regular expressions
+
+	// Whitespace characters http://www.w3.org/TR/css3-selectors/#whitespace
+	whitespace = "[\\x20\\t\\r\\n\\f]",
+	// http://www.w3.org/TR/css3-syntax/#characters
+	characterEncoding = "(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",
+
+	// Loosely modeled on CSS identifier characters
+	// An unquoted value should be a CSS identifier http://www.w3.org/TR/css3-selectors/#attribute-selectors
+	// Proper syntax: http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier
+	identifier = characterEncoding.replace( "w", "w#" ),
+
+	// Acceptable operators http://www.w3.org/TR/selectors/#attribute-selectors
+	attributes = "\\[" + whitespace + "*(" + characterEncoding + ")" + whitespace +
+		"*(?:([*^$|!~]?=)" + whitespace + "*(?:(['\"])((?:\\\\.|[^\\\\])*?)\\3|(" + identifier + ")|)|)" + whitespace + "*\\]",
+
+	// Prefer arguments quoted,
+	//   then not containing pseudos/brackets,
+	//   then attribute selectors/non-parenthetical expressions,
+	//   then anything else
+	// These preferences are here to reduce the number of selectors
+	//   needing tokenize in the PSEUDO preFilter
+	pseudos = ":(" + characterEncoding + ")(?:\\(((['\"])((?:\\\\.|[^\\\\])*?)\\3|((?:\\\\.|[^\\\\()[\\]]|" + attributes.replace( 3, 8 ) + ")*)|.*)\\)|)",
+
+	// Leading and non-escaped trailing whitespace, capturing some non-whitespace characters preceding the latter
+	rtrim = new RegExp( "^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$", "g" ),
+
+	rcomma = new RegExp( "^" + whitespace + "*," + whitespace + "*" ),
+	rcombinators = new RegExp( "^" + whitespace + "*([>+~]|" + whitespace + ")" + whitespace + "*" ),
+
+	rsibling = new RegExp( whitespace + "*[+~]" ),
+	rattributeQuotes = new RegExp( "=" + whitespace + "*([^\\]'\"]*)" + whitespace + "*\\]", "g" ),
+
+	rpseudo = new RegExp( pseudos ),
+	ridentifier = new RegExp( "^" + identifier + "$" ),
+
+	matchExpr = {
+		"ID": new RegExp( "^#(" + characterEncoding + ")" ),
+		"CLASS": new RegExp( "^\\.(" + characterEncoding + ")" ),
+		"TAG": new RegExp( "^(" + characterEncoding.replace( "w", "w*" ) + ")" ),
+		"ATTR": new RegExp( "^" + attributes ),
+		"PSEUDO": new RegExp( "^" + pseudos ),
+		"CHILD": new RegExp( "^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\(" + whitespace +
+			"*(even|odd|(([+-]|)(\\d*)n|)" + whitespace + "*(?:([+-]|)" + whitespace +
+			"*(\\d+)|))" + whitespace + "*\\)|)", "i" ),
+		"bool": new RegExp( "^(?:" + booleans + ")$", "i" ),
+		// For use in libraries implementing .is()
+		// We use this for POS matching in `select`
+		"needsContext": new RegExp( "^" + whitespace + "*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\(" +
+			whitespace + "*((?:-\\d)?\\d*)" + whitespace + "*\\)|)(?=[^-]|$)", "i" )
+	},
+
+	rnative = /^[^{]+\{\s*\[native \w/,
+
+	// Easily-parseable/retrievable ID or TAG or CLASS selectors
+	rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,
+
+	rinputs = /^(?:input|select|textarea|button)$/i,
+	rheader = /^h\d$/i,
+
+	rescape = /'|\\/g,
+
+	// CSS escapes http://www.w3.org/TR/CSS21/syndata.html#escaped-characters
+	runescape = new RegExp( "\\\\([\\da-f]{1,6}" + whitespace + "?|(" + whitespace + ")|.)", "ig" ),
+	funescape = function( _, escaped, escapedWhitespace ) {
+		var high = "0x" + escaped - 0x10000;
+		// NaN means non-codepoint
+		// Support: Firefox
+		// Workaround erroneous numeric interpretation of +"0x"
+		return high !== high || escapedWhitespace ?
+			escaped :
+			// BMP codepoint
+			high < 0 ?
+				String.fromCharCode( high + 0x10000 ) :
+				// Supplemental Plane codepoint (surrogate pair)
+				String.fromCharCode( high >> 10 | 0xD800, high & 0x3FF | 0xDC00 );
+	};
+
+// Optimize for push.apply( _, NodeList )
+try {
+	push.apply(
+		(arr = slice.call( preferredDoc.childNodes )),
+		preferredDoc.childNodes
+	);
+	// Support: Android<4.0
+	// Detect silently failing push.apply
+	arr[ preferredDoc.childNodes.length ].nodeType;
+} catch ( e ) {
+	push = { apply: arr.length ?
+
+		// Leverage slice if possible
+		function( target, els ) {
+			push_native.apply( target, slice.call(els) );
+		} :
+
+		// Support: IE<9
+		// Otherwise append directly
+		function( target, els ) {
+			var j = target.length,
+				i = 0;
+			// Can't trust NodeList.length
+			while ( (target[j++] = els[i++]) ) {}
+			target.length = j - 1;
+		}
+	};
+}
+
+function Sizzle( selector, context, results, seed ) {
+	var match, elem, m, nodeType,
+		// QSA vars
+		i, groups, old, nid, newContext, newSelector;
+
+	if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) {
+		setDocument( context );
+	}
+
+	context = context || document;
+	results = results || [];
+
+	if ( !selector || typeof selector !== "string" ) {
+		return results;
+	}
+
+	if ( (nodeType = context.nodeType) !== 1 && nodeType !== 9 ) {
+		return [];
+	}
+
+	if ( documentIsHTML && !seed ) {
+
+		// Shortcuts
+		if ( (match = rquickExpr.exec( selector )) ) {
+			// Speed-up: Sizzle("#ID")
+			if ( (m = match[1]) ) {
+				if ( nodeType === 9 ) {
+					elem = context.getElementById( m );
+					// Check parentNode to catch when Blackberry 4.6 returns
+					// nodes that are no longer in the document #6963
+					if ( elem && elem.parentNode ) {
+						// Handle the case where IE, Opera, and Webkit return items
+						// by name instead of ID
+						if ( elem.id === m ) {
+							results.push( elem );
+							return results;
+						}
+					} else {
+						return results;
+					}
+				} else {
+					// Context is not a document
+					if ( context.ownerDocument && (elem = context.ownerDocument.getElementById( m )) &&
+						contains( context, elem ) && elem.id === m ) {
+						results.push( elem );
+						return results;
+					}
+				}
+
+			// Speed-up: Sizzle("TAG")
+			} else if ( match[2] ) {
+				push.apply( results, context.getElementsByTagName( selector ) );
+				return results;
+
+			// Speed-up: Sizzle(".CLASS")
+			} else if ( (m = match[3]) && support.getElementsByClassName && context.getElementsByClassName ) {
+				push.apply( results, context.getElementsByClassName( m ) );
+				return results;
+			}
+		}
+
+		// QSA path
+		if ( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) {
+			nid = old = expando;
+			newContext = context;
+			newSelector = nodeType === 9 && selector;
+
+			// qSA works strangely on Element-rooted queries
+			// We can work around this by specifying an extra ID on the root
+			// and working up from there (Thanks to Andrew Dupont for the technique)
+			// IE 8 doesn't work on object elements
+			if ( nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) {
+				groups = tokenize( selector );
+
+				if ( (old = context.getAttribute("id")) ) {
+					nid = old.replace( rescape, "\\$&" );
+				} else {
+					context.setAttribute( "id", nid );
+				}
+				nid = "[id='" + nid + "'] ";
+
+				i = groups.length;
+				while ( i-- ) {
+					groups[i] = nid + toSelector( groups[i] );
+				}
+				newContext = rsibling.test( selector ) && context.parentNode || context;
+				newSelector = groups.join(",");
+			}
+
+			if ( newSelector ) {
+				try {
+					push.apply( results,
+						newContext.querySelectorAll( newSelector )
+					);
+					return results;
+				} catch(qsaError) {
+				} finally {
+					if ( !old ) {
+						context.removeAttribute("id");
+					}
+				}
+			}
+		}
+	}
+
+	// All others
+	return select( selector.replace( rtrim, "$1" ), context, results, seed );
+}
+
+/**
+ * For feature detection
+ * @param {Function} fn The function to test for native support
+ */
+function isNative( fn ) {
+	return rnative.test( fn + "" );
+}
+
+/**
+ * Create key-value caches of limited size
+ * @returns {Function(string, Object)} Returns the Object data after storing it on itself with
+ *	property name the (space-suffixed) string and (if the cache is larger than Expr.cacheLength)
+ *	deleting the oldest entry
+ */
+function createCache() {
+	var keys = [];
+
+	function cache( key, value ) {
+		// Use (key + " ") to avoid collision with native prototype properties (see Issue #157)
+		if ( keys.push( key += " " ) > Expr.cacheLength ) {
+			// Only keep the most recent entries
+			delete cache[ keys.shift() ];
+		}
+		return (cache[ key ] = value);
+	}
+	return cache;
+}
+
+/**
+ * Mark a function for special use by Sizzle
+ * @param {Function} fn The function to mark
+ */
+function markFunction( fn ) {
+	fn[ expando ] = true;
+	return fn;
+}
+
+/**
+ * Support testing using an element
+ * @param {Function} fn Passed the created div and expects a boolean result
+ */
+function assert( fn ) {
+	var div = document.createElement("div");
+
+	try {
+		return !!fn( div );
+	} catch (e) {
+		return false;
+	} finally {
+		// Remove from its parent by default
+		if ( div.parentNode ) {
+			div.parentNode.removeChild( div );
+		}
+		// release memory in IE
+		div = null;
+	}
+}
+
+/**
+ * Adds the same handler for all of the specified attrs
+ * @param {String} attrs Pipe-separated list of attributes
+ * @param {Function} handler The method that will be applied if the test fails
+ * @param {Boolean} test The result of a test. If true, null will be set as the handler in leiu of the specified handler
+ */
+function addHandle( attrs, handler, test ) {
+	attrs = attrs.split("|");
+	var current,
+		i = attrs.length,
+		setHandle = test ? null : handler;
+
+	while ( i-- ) {
+		// Don't override a user's handler
+		if ( !(current = Expr.attrHandle[ attrs[i] ]) || current === handler ) {
+			Expr.attrHandle[ attrs[i] ] = setHandle;
+		}
+	}
+}
+
+/**
+ * Fetches boolean attributes by node
+ * @param {Element} elem
+ * @param {String} name
+ */
+function boolHandler( elem, name ) {
+	// XML does not need to be checked as this will not be assigned for XML documents
+	var val = elem.getAttributeNode( name );
+	return val && val.specified ?
+		val.value :
+		elem[ name ] === true ? name.toLowerCase() : null;
+}
+
+/**
+ * Fetches attributes without interpolation
+ * http://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx
+ * @param {Element} elem
+ * @param {String} name
+ */
+function interpolationHandler( elem, name ) {
+	// XML does not need to be checked as this will not be assigned for XML documents
+	return elem.getAttribute( name, name.toLowerCase() === "type" ? 1 : 2 );
+}
+
+/**
+ * Uses defaultValue to retrieve value in IE6/7
+ * @param {Element} elem
+ * @param {String} name
+ */
+function valueHandler( elem ) {
+	// Ignore the value *property* on inputs by using defaultValue
+	// Fallback to Sizzle.attr by returning undefined where appropriate
+	// XML does not need to be checked as this will not be assigned for XML documents
+	if ( elem.nodeName.toLowerCase() === "input" ) {
+		return elem.defaultValue;
+	}
+}
+
+/**
+ * Checks document order of two siblings
+ * @param {Element} a
+ * @param {Element} b
+ * @returns Returns -1 if a precedes b, 1 if a follows b
+ */
+function siblingCheck( a, b ) {
+	var cur = b && a,
+		diff = cur && a.nodeType === 1 && b.nodeType === 1 &&
+			( ~b.sourceIndex || MAX_NEGATIVE ) -
+			( ~a.sourceIndex || MAX_NEGATIVE );
+
+	// Use IE sourceIndex if available on both nodes
+	if ( diff ) {
+		return diff;
+	}
+
+	// Check if b follows a
+	if ( cur ) {
+		while ( (cur = cur.nextSibling) ) {
+			if ( cur === b ) {
+				return -1;
+			}
+		}
+	}
+
+	return a ? 1 : -1;
+}
+
+/**
+ * Returns a function to use in pseudos for input types
+ * @param {String} type
+ */
+function createInputPseudo( type ) {
+	return function( elem ) {
+		var name = elem.nodeName.toLowerCase();
+		return name === "input" && elem.type === type;
+	};
+}
+
+/**
+ * Returns a function to use in pseudos for buttons
+ * @param {String} type
+ */
+function createButtonPseudo( type ) {
+	return function( elem ) {
+		var name = elem.nodeName.toLowerCase();
+		return (name === "input" || name === "button") && elem.type === type;
+	};
+}
+
+/**
+ * Returns a function to use in pseudos for positionals
+ * @param {Function} fn
+ */
+function createPositionalPseudo( fn ) {
+	return markFunction(function( argument ) {
+		argument = +argument;
+		return markFunction(function( seed, matches ) {
+			var j,
+				matchIndexes = fn( [], seed.length, argument ),
+				i = matchIndexes.length;
+
+			// Match elements found at the specified indexes
+			while ( i-- ) {
+				if ( seed[ (j = matchIndexes[i]) ] ) {
+					seed[j] = !(matches[j] = seed[j]);
+				}
+			}
+		});
+	});
+}
+
+/**
+ * Detect xml
+ * @param {Element|Object} elem An element or a document
+ */
+isXML = Sizzle.isXML = function( elem ) {
+	// documentElement is verified for cases where it doesn't yet exist
+	// (such as loading iframes in IE - #4833)
+	var documentElement = elem && (elem.ownerDocument || elem).documentElement;
+	return documentElement ? documentElement.nodeName !== "HTML" : false;
+};
+
+// Expose support vars for convenience
+support = Sizzle.support = {};
+
+/**
+ * Sets document-related variables once based on the current document
+ * @param {Element|Object} [doc] An element or document object to use to set the document
+ * @returns {Object} Returns the current document
+ */
+setDocument = Sizzle.setDocument = function( node ) {
+	var doc = node ? node.ownerDocument || node : preferredDoc;
+
+	// If no document and documentElement is available, return
+	if ( doc === document || doc.nodeType !== 9 || !doc.documentElement ) {
+		return document;
+	}
+
+	// Set our document
+	document = doc;
+	docElem = doc.documentElement;
+
+	// Support tests
+	documentIsHTML = !isXML( doc );
+
+	/* Attributes
+	---------------------------------------------------------------------- */
+
+	// Support: IE<8
+	// Verify that getAttribute really returns attributes and not properties (excepting IE8 booleans)
+	support.attributes = assert(function( div ) {
+
+		// Support: IE<8
+		// Prevent attribute/property "interpolation"
+		div.innerHTML = "<a href='#'></a>";
+		addHandle( "type|href|height|width", interpolationHandler, div.firstChild.getAttribute("href") === "#" );
+
+		// Support: IE<9
+		// Use getAttributeNode to fetch booleans when getAttribute lies
+		addHandle( booleans, boolHandler, div.getAttribute("disabled") == null );
+
+		div.className = "i";
+		return !div.getAttribute("className");
+	});
+
+	// Support: IE<9
+	// Retrieving value should defer to defaultValue
+	support.input = assert(function( div ) {
+		div.innerHTML = "<input>";
+		div.firstChild.setAttribute( "value", "" );
+		return div.firstChild.getAttribute( "value" ) === "";
+	});
+
+	// IE6/7 still return empty string for value,
+	// but are actually retrieving the property
+	addHandle( "value", valueHandler, support.attributes && support.input );
+
+	/* getElement(s)By*
+	---------------------------------------------------------------------- */
+
+	// Check if getElementsByTagName("*") returns only elements
+	support.getElementsByTagName = assert(function( div ) {
+		div.appendChild( doc.createComment("") );
+		return !div.getElementsByTagName("*").length;
+	});
+
+	// Check if getElementsByClassName can be trusted
+	support.getElementsByClassName = assert(function( div ) {
+		div.innerHTML = "<div class='a'></div><div class='a i'></div>";
+
+		// Support: Safari<4
+		// Catch class over-caching
+		div.firstChild.className = "i";
+		// Support: Opera<10
+		// Catch gEBCN failure to find non-leading classes
+		return div.getElementsByClassName("i").length === 2;
+	});
+
+	// Support: IE<10
+	// Check if getElementById returns elements by name
+	// The broken getElementById methods don't pick up programatically-set names,
+	// so use a roundabout getElementsByName test
+	support.getById = assert(function( div ) {
+		docElem.appendChild( div ).id = expando;
+		return !doc.getElementsByName || !doc.getElementsByName( expando ).length;
+	});
+
+	// ID find and filter
+	if ( support.getById ) {
+		Expr.find["ID"] = function( id, context ) {
+			if ( typeof context.getElementById !== strundefined && documentIsHTML ) {
+				var m = context.getElementById( id );
+				// Check parentNode to catch when Blackberry 4.6 returns
+				// nodes that are no longer in the document #6963
+				return m && m.parentNode ? [m] : [];
+			}
+		};
+		Expr.filter["ID"] = function( id ) {
+			var attrId = id.replace( runescape, funescape );
+			return function( elem ) {
+				return elem.getAttribute("id") === attrId;
+			};
+		};
+	} else {
+		// Support: IE6/7
+		// getElementById is not reliable as a find shortcut
+		delete Expr.find["ID"];
+
+		Expr.filter["ID"] =  function( id ) {
+			var attrId = id.replace( runescape, funescape );
+			return function( elem ) {
+				var node = typeof elem.getAttributeNode !== strundefined && elem.getAttributeNode("id");
+				return node && node.value === attrId;
+			};
+		};
+	}
+
+	// Tag
+	Expr.find["TAG"] = support.getElementsByTagName ?
+		function( tag, context ) {
+			if ( typeof context.getElementsByTagName !== strundefined ) {
+				return context.getElementsByTagName( tag );
+			}
+		} :
+		function( tag, context ) {
+			var elem,
+				tmp = [],
+				i = 0,
+				results = context.getElementsByTagName( tag );
+
+			// Filter out possible comments
+			if ( tag === "*" ) {
+				while ( (elem = results[i++]) ) {
+					if ( elem.nodeType === 1 ) {
+						tmp.push( elem );
+					}
+				}
+
+				return tmp;
+			}
+			return results;
+		};
+
+	// Class
+	Expr.find["CLASS"] = support.getElementsByClassName && function( className, context ) {
+		if ( typeof context.getElementsByClassName !== strundefined && documentIsHTML ) {
+			return context.getElementsByClassName( className );
+		}
+	};
+
+	/* QSA/matchesSelector
+	---------------------------------------------------------------------- */
+
+	// QSA and matchesSelector support
+
+	// matchesSelector(:active) reports false when true (IE9/Opera 11.5)
+	rbuggyMatches = [];
+
+	// qSa(:focus) reports false when true (Chrome 21)
+	// We allow this because of a bug in IE8/9 that throws an error
+	// whenever `document.activeElement` is accessed on an iframe
+	// So, we allow :focus to pass through QSA all the time to avoid the IE error
+	// See http://bugs.jquery.com/ticket/13378
+	rbuggyQSA = [];
+
+	if ( (support.qsa = isNative(doc.querySelectorAll)) ) {
+		// Build QSA regex
+		// Regex strategy adopted from Diego Perini
+		assert(function( div ) {
+			// Select is set to empty string on purpose
+			// This is to test IE's treatment of not explicitly
+			// setting a boolean content attribute,
+			// since its presence should be enough
+			// http://bugs.jquery.com/ticket/12359
+			div.innerHTML = "<select><option selected=''></option></select>";
+
+			// Support: IE8
+			// Boolean attributes and "value" are not treated correctly
+			if ( !div.querySelectorAll("[selected]").length ) {
+				rbuggyQSA.push( "\\[" + whitespace + "*(?:value|" + booleans + ")" );
+			}
+
+			// Webkit/Opera - :checked should return selected option elements
+			// http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked
+			// IE8 throws error here and will not see later tests
+			if ( !div.querySelectorAll(":checked").length ) {
+				rbuggyQSA.push(":checked");
+			}
+		});
+
+		assert(function( div ) {
+
+			// Support: Opera 10-12/IE8
+			// ^= $= *= and empty values
+			// Should not select anything
+			// Support: Windows 8 Native Apps
+			// The type attribute is restricted during .innerHTML assignment
+			var input = doc.createElement("input");
+			input.setAttribute( "type", "hidden" );
+			div.appendChild( input ).setAttribute( "t", "" );
+
+			if ( div.querySelectorAll("[t^='']").length ) {
+				rbuggyQSA.push( "[*^$]=" + whitespace + "*(?:''|\"\")" );
+			}
+
+			// FF 3.5 - :enabled/:disabled and hidden elements (hidden elements are still enabled)
+			// IE8 throws error here and will not see later tests
+			if ( !div.querySelectorAll(":enabled").length ) {
+				rbuggyQSA.push( ":enabled", ":disabled" );
+			}
+
+			// Opera 10-11 does not throw on post-comma invalid pseudos
+			div.querySelectorAll("*,:x");
+			rbuggyQSA.push(",.*:");
+		});
+	}
+
+	if ( (support.matchesSelector = isNative( (matches = docElem.webkitMatchesSelector ||
+		docElem.mozMatchesSelector ||
+		docElem.oMatchesSelector ||
+		docElem.msMatchesSelector) )) ) {
+
+		assert(function( div ) {
+			// Check to see if it's possible to do matchesSelector
+			// on a disconnected node (IE 9)
+			support.disconnectedMatch = matches.call( div, "div" );
+
+			// This should fail with an exception
+			// Gecko does not error, returns false instead
+			matches.call( div, "[s!='']:x" );
+			rbuggyMatches.push( "!=", pseudos );
+		});
+	}
+
+	rbuggyQSA = rbuggyQSA.length && new RegExp( rbuggyQSA.join("|") );
+	rbuggyMatches = rbuggyMatches.length && new RegExp( rbuggyMatches.join("|") );
+
+	/* Contains
+	---------------------------------------------------------------------- */
+
+	// Element contains another
+	// Purposefully does not implement inclusive descendent
+	// As in, an element does not contain itself
+	contains = isNative(docElem.contains) || docElem.compareDocumentPosition ?
+		function( a, b ) {
+			var adown = a.nodeType === 9 ? a.documentElement : a,
+				bup = b && b.parentNode;
+			return a === bup || !!( bup && bup.nodeType === 1 && (
+				adown.contains ?
+					adown.contains( bup ) :
+					a.compareDocumentPosition && a.compareDocumentPosition( bup ) & 16
+			));
+		} :
+		function( a, b ) {
+			if ( b ) {
+				while ( (b = b.parentNode) ) {
+					if ( b === a ) {
+						return true;
+					}
+				}
+			}
+			return false;
+		};
+
+	/* Sorting
+	---------------------------------------------------------------------- */
+
+	// Support: Webkit<537.32 - Safari 6.0.3/Chrome 25 (fixed in Chrome 27)
+	// Detached nodes confoundingly follow *each other*
+	support.sortDetached = assert(function( div1 ) {
+		// Should return 1, but returns 4 (following)
+		return div1.compareDocumentPosition( doc.createElement("div") ) & 1;
+	});
+
+	// Document order sorting
+	sortOrder = docElem.compareDocumentPosition ?
+	function( a, b ) {
+
+		// Flag for duplicate removal
+		if ( a === b ) {
+			hasDuplicate = true;
+			return 0;
+		}
+
+		var compare = b.compareDocumentPosition && a.compareDocumentPosition && a.compareDocumentPosition( b );
+
+		if ( compare ) {
+			// Disconnected nodes
+			if ( compare & 1 ||
+				(!support.sortDetached && b.compareDocumentPosition( a ) === compare) ) {
+
+				// Choose the first element that is related to our preferred document
+				if ( a === doc || contains(preferredDoc, a) ) {
+					return -1;
+				}
+				if ( b === doc || contains(preferredDoc, b) ) {
+					return 1;
+				}
+
+				// Maintain original order
+				return sortInput ?
+					( indexOf.call( sortInput, a ) - indexOf.call( sortInput, b ) ) :
+					0;
+			}
+
+			return compare & 4 ? -1 : 1;
+		}
+
+		// Not directly comparable, sort on existence of method
+		return a.compareDocumentPosition ? -1 : 1;
+	} :
+	function( a, b ) {
+		var cur,
+			i = 0,
+			aup = a.parentNode,
+			bup = b.parentNode,
+			ap = [ a ],
+			bp = [ b ];
+
+		// Exit early if the nodes are identical
+		if ( a === b ) {
+			hasDuplicate = true;
+			return 0;
+
+		// Parentless nodes are either documents or disconnected
+		} else if ( !aup || !bup ) {
+			return a === doc ? -1 :
+				b === doc ? 1 :
+				aup ? -1 :
+				bup ? 1 :
+				sortInput ?
+				( indexOf.call( sortInput, a ) - indexOf.call( sortInput, b ) ) :
+				0;
+
+		// If the nodes are siblings, we can do a quick check
+		} else if ( aup === bup ) {
+			return siblingCheck( a, b );
+		}
+
+		// Otherwise we need full lists of their ancestors for comparison
+		cur = a;
+		while ( (cur = cur.parentNode) ) {
+			ap.unshift( cur );
+		}
+		cur = b;
+		while ( (cur = cur.parentNode) ) {
+			bp.unshift( cur );
+		}
+
+		// Walk down the tree looking for a discrepancy
+		while ( ap[i] === bp[i] ) {
+			i++;
+		}
+
+		return i ?
+			// Do a sibling check if the nodes have a common ancestor
+			siblingCheck( ap[i], bp[i] ) :
+
+			// Otherwise nodes in our document sort first
+			ap[i] === preferredDoc ? -1 :
+			bp[i] === preferredDoc ? 1 :
+			0;
+	};
+
+	return doc;
+};
+
+Sizzle.matches = function( expr, elements ) {
+	return Sizzle( expr, null, null, elements );
+};
+
+Sizzle.matchesSelector = function( elem, expr ) {
+	// Set document vars if needed
+	if ( ( elem.ownerDocument || elem ) !== document ) {
+		setDocument( elem );
+	}
+
+	// Make sure that attribute selectors are quoted
+	expr = expr.replace( rattributeQuotes, "='$1']" );
+
+	if ( support.matchesSelector && documentIsHTML &&
+		( !rbuggyMatches || !rbuggyMatches.test( expr ) ) &&
+		( !rbuggyQSA     || !rbuggyQSA.test( expr ) ) ) {
+
+		try {
+			var ret = matches.call( elem, expr );
+
+			// IE 9's matchesSelector returns false on disconnected nodes
+			if ( ret || support.disconnectedMatch ||
+					// As well, disconnected nodes are said to be in a document
+					// fragment in IE 9
+					elem.document && elem.document.nodeType !== 11 ) {
+				return ret;
+			}
+		} catch(e) {}
+	}
+
+	return Sizzle( expr, document, null, [elem] ).length > 0;
+};
+
+Sizzle.contains = function( context, elem ) {
+	// Set document vars if needed
+	if ( ( context.ownerDocument || context ) !== document ) {
+		setDocument( context );
+	}
+	return contains( context, elem );
+};
+
+Sizzle.attr = function( elem, name ) {
+	// Set document vars if needed
+	if ( ( elem.ownerDocument || elem ) !== document ) {
+		setDocument( elem );
+	}
+
+	var fn = Expr.attrHandle[ name.toLowerCase() ],
+		// Don't get fooled by Object.prototype properties (jQuery #13807)
+		val = ( fn && hasOwn.call( Expr.attrHandle, name.toLowerCase() ) ?
+			fn( elem, name, !documentIsHTML ) :
+			undefined );
+
+	return val === undefined ?
+		support.attributes || !documentIsHTML ?
+			elem.getAttribute( name ) :
+			(val = elem.getAttributeNode(name)) && val.specified ?
+				val.value :
+				null :
+		val;
+};
+
+Sizzle.error = function( msg ) {
+	throw new Error( "Syntax error, unrecognized expression: " + msg );
+};
+
+/**
+ * Document sorting and removing duplicates
+ * @param {ArrayLike} results
+ */
+Sizzle.uniqueSort = function( results ) {
+	var elem,
+		duplicates = [],
+		j = 0,
+		i = 0;
+
+	// Unless we *know* we can detect duplicates, assume their presence
+	hasDuplicate = !support.detectDuplicates;
+	sortInput = !support.sortStable && results.slice( 0 );
+	results.sort( sortOrder );
+
+	if ( hasDuplicate ) {
+		while ( (elem = results[i++]) ) {
+			if ( elem === results[ i ] ) {
+				j = duplicates.push( i );
+			}
+		}
+		while ( j-- ) {
+			results.splice( duplicates[ j ], 1 );
+		}
+	}
+
+	return results;
+};
+
+/**
+ * Utility function for retrieving the text value of an array of DOM nodes
+ * @param {Array|Element} elem
+ */
+getText = Sizzle.getText = function( elem ) {
+	var node,
+		ret = "",
+		i = 0,
+		nodeType = elem.nodeType;
+
+	if ( !nodeType ) {
+		// If no nodeType, this is expected to be an array
+		for ( ; (node = elem[i]); i++ ) {
+			// Do not traverse comment nodes
+			ret += getText( node );
+		}
+	} else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
+		// Use textContent for elements
+		// innerText usage removed for consistency of new lines (see #11153)
+		if ( typeof elem.textContent === "string" ) {
+			return elem.textContent;
+		} else {
+			// Traverse its children
+			for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
+				ret += getText( elem );
+			}
+		}
+	} else if ( nodeType === 3 || nodeType === 4 ) {
+		return elem.nodeValue;
+	}
+	// Do not include comment or processing instruction nodes
+
+	return ret;
+};
+
+Expr = Sizzle.selectors = {
+
+	// Can be adjusted by the user
+	cacheLength: 50,
+
+	createPseudo: markFunction,
+
+	match: matchExpr,
+
+	attrHandle: {},
+
+	find: {},
+
+	relative: {
+		">": { dir: "parentNode", first: true },
+		" ": { dir: "parentNode" },
+		"+": { dir: "previousSibling", first: true },
+		"~": { dir: "previousSibling" }
+	},
+
+	preFilter: {
+		"ATTR": function( match ) {
+			match[1] = match[1].replace( runescape, funescape );
+
+			// Move the given value to match[3] whether quoted or unquoted
+			match[3] = ( match[4] || match[5] || "" ).replace( runescape, funescape );
+
+			if ( match[2] === "~=" ) {
+				match[3] = " " + match[3] + " ";
+			}
+
+			return match.slice( 0, 4 );
+		},
+
+		"CHILD": function( match ) {
+			/* matches from matchExpr["CHILD"]
+				1 type (only|nth|...)
+				2 what (child|of-type)
+				3 argument (even|odd|\d*|\d*n([+-]\d+)?|...)
+				4 xn-component of xn+y argument ([+-]?\d*n|)
+				5 sign of xn-component
+				6 x of xn-component
+				7 sign of y-component
+				8 y of y-component
+			*/
+			match[1] = match[1].toLowerCase();
+
+			if ( match[1].slice( 0, 3 ) === "nth" ) {
+				// nth-* requires argument
+				if ( !match[3] ) {
+					Sizzle.error( match[0] );
+				}
+
+				// numeric x and y parameters for Expr.filter.CHILD
+				// remember that false/true cast respectively to 0/1
+				match[4] = +( match[4] ? match[5] + (match[6] || 1) : 2 * ( match[3] === "even" || match[3] === "odd" ) );
+				match[5] = +( ( match[7] + match[8] ) || match[3] === "odd" );
+
+			// other types prohibit arguments
+			} else if ( match[3] ) {
+				Sizzle.error( match[0] );
+			}
+
+			return match;
+		},
+
+		"PSEUDO": function( match ) {
+			var excess,
+				unquoted = !match[5] && match[2];
+
+			if ( matchExpr["CHILD"].test( match[0] ) ) {
+				return null;
+			}
+
+			// Accept quoted arguments as-is
+			if ( match[3] && match[4] !== undefined ) {
+				match[2] = match[4];
+
+			// Strip excess characters from unquoted arguments
+			} else if ( unquoted && rpseudo.test( unquoted ) &&
+				// Get excess from tokenize (recursively)
+				(excess = tokenize( unquoted, true )) &&
+				// advance to the next closing parenthesis
+				(excess = unquoted.indexOf( ")", unquoted.length - excess ) - unquoted.length) ) {
+
+				// excess is a negative index
+				match[0] = match[0].slice( 0, excess );
+				match[2] = unquoted.slice( 0, excess );
+			}
+
+			// Return only captures needed by the pseudo filter method (type and argument)
+			return match.slice( 0, 3 );
+		}
+	},
+
+	filter: {
+
+		"TAG": function( nodeNameSelector ) {
+			var nodeName = nodeNameSelector.replace( runescape, funescape ).toLowerCase();
+			return nodeNameSelector === "*" ?
+				function() { return true; } :
+				function( elem ) {
+					return elem.nodeName && elem.nodeName.toLowerCase() === nodeName;
+				};
+		},
+
+		"CLASS": function( className ) {
+			var pattern = classCache[ className + " " ];
+
+			return pattern ||
+				(pattern = new RegExp( "(^|" + whitespace + ")" + className + "(" + whitespace + "|$)" )) &&
+				classCache( className, function( elem ) {
+					return pattern.test( typeof elem.className === "string" && elem.className || typeof elem.getAttribute !== strundefined && elem.getAttribute("class") || "" );
+				});
+		},
+
+		"ATTR": function( name, operator, check ) {
+			return function( elem ) {
+				var result = Sizzle.attr( elem, name );
+
+				if ( result == null ) {
+					return operator === "!=";
+				}
+				if ( !operator ) {
+					return true;
+				}
+
+				result += "";
+
+				return operator === "=" ? result === check :
+					operator === "!=" ? result !== check :
+					operator === "^=" ? check && result.indexOf( check ) === 0 :
+					operator === "*=" ? check && result.indexOf( check ) > -1 :
+					operator === "$=" ? check && result.slice( -check.length ) === check :
+					operator === "~=" ? ( " " + result + " " ).indexOf( check ) > -1 :
+					operator === "|=" ? result === check || result.slice( 0, check.length + 1 ) === check + "-" :
+					false;
+			};
+		},
+
+		"CHILD": function( type, what, argument, first, last ) {
+			var simple = type.slice( 0, 3 ) !== "nth",
+				forward = type.slice( -4 ) !== "last",
+				ofType = what === "of-type";
+
+			return first === 1 && last === 0 ?
+
+				// Shortcut for :nth-*(n)
+				function( elem ) {
+					return !!elem.parentNode;
+				} :
+
+				function( elem, context, xml ) {
+					var cache, outerCache, node, diff, nodeIndex, start,
+						dir = simple !== forward ? "nextSibling" : "previousSibling",
+						parent = elem.parentNode,
+						name = ofType && elem.nodeName.toLowerCase(),
+						useCache = !xml && !ofType;
+
+					if ( parent ) {
+
+						// :(first|last|only)-(child|of-type)
+						if ( simple ) {
+							while ( dir ) {
+								node = elem;
+								while ( (node = node[ dir ]) ) {
+									if ( ofType ? node.nodeName.toLowerCase() === name : node.nodeType === 1 ) {
+										return false;
+									}
+								}
+								// Reverse direction for :only-* (if we haven't yet done so)
+								start = dir = type === "only" && !start && "nextSibling";
+							}
+							return true;
+						}
+
+						start = [ forward ? parent.firstChild : parent.lastChild ];
+
+						// non-xml :nth-child(...) stores cache data on `parent`
+						if ( forward && useCache ) {
+							// Seek `elem` from a previously-cached index
+							outerCache = parent[ expando ] || (parent[ expando ] = {});
+							cache = outerCache[ type ] || [];
+							nodeIndex = cache[0] === dirruns && cache[1];
+							diff = cache[0] === dirruns && cache[2];
+							node = nodeIndex && parent.childNodes[ nodeIndex ];
+
+							while ( (node = ++nodeIndex && node && node[ dir ] ||
+
+								// Fallback to seeking `elem` from the start
+								(diff = nodeIndex = 0) || start.pop()) ) {
+
+								// When found, cache indexes on `parent` and break
+								if ( node.nodeType === 1 && ++diff && node === elem ) {
+									outerCache[ type ] = [ dirruns, nodeIndex, diff ];
+									break;
+								}
+							}
+
+						// Use previously-cached element index if available
+						} else if ( useCache && (cache = (elem[ expando ] || (elem[ expando ] = {}))[ type ]) && cache[0] === dirruns ) {
+							diff = cache[1];
+
+						// xml :nth-child(...) or :nth-last-child(...) or :nth(-last)?-of-type(...)
+						} else {
+							// Use the same loop as above to seek `elem` from the start
+							while ( (node = ++nodeIndex && node && node[ dir ] ||
+								(diff = nodeIndex = 0) || start.pop()) ) {
+
+								if ( ( ofType ? node.nodeName.toLowerCase() === name : node.nodeType === 1 ) && ++diff ) {
+									// Cache the index of each encountered element
+									if ( useCache ) {
+										(node[ expando ] || (node[ expando ] = {}))[ type ] = [ dirruns, diff ];
+									}
+
+									if ( node === elem ) {
+										break;
+									}
+								}
+							}
+						}
+
+						// Incorporate the offset, then check against cycle size
+						diff -= last;
+						return diff === first || ( diff % first === 0 && diff / first >= 0 );
+					}
+				};
+		},
+
+		"PSEUDO": function( pseudo, argument ) {
+			// pseudo-class names are case-insensitive
+			// http://www.w3.org/TR/selectors/#pseudo-classes
+			// Prioritize by case sensitivity in case custom pseudos are added with uppercase letters
+			// Remember that setFilters inherits from pseudos
+			var args,
+				fn = Expr.pseudos[ pseudo ] || Expr.setFilters[ pseudo.toLowerCase() ] ||
+					Sizzle.error( "unsupported pseudo: " + pseudo );
+
+			// The user may use createPseudo to indicate that
+			// arguments are needed to create the filter function
+			// just as Sizzle does
+			if ( fn[ expando ] ) {
+				return fn( argument );
+			}
+
+			// But maintain support for old signatures
+			if ( fn.length > 1 ) {
+				args = [ pseudo, pseudo, "", argument ];
+				return Expr.setFilters.hasOwnProperty( pseudo.toLowerCase() ) ?
+					markFunction(function( seed, matches ) {
+						var idx,
+							matched = fn( seed, argument ),
+							i = matched.length;
+						while ( i-- ) {
+							idx = indexOf.call( seed, matched[i] );
+							seed[ idx ] = !( matches[ idx ] = matched[i] );
+						}
+					}) :
+					function( elem ) {
+						return fn( elem, 0, args );
+					};
+			}
+
+			return fn;
+		}
+	},
+
+	pseudos: {
+		// Potentially complex pseudos
+		"not": markFunction(function( selector ) {
+			// Trim the selector passed to compile
+			// to avoid treating leading and trailing
+			// spaces as combinators
+			var input = [],
+				results = [],
+				matcher = compile( selector.replace( rtrim, "$1" ) );
+
+			return matcher[ expando ] ?
+				markFunction(function( seed, matches, context, xml ) {
+					var elem,
+						unmatched = matcher( seed, null, xml, [] ),
+						i = seed.length;
+
+					// Match elements unmatched by `matcher`
+					while ( i-- ) {
+						if ( (elem = unmatched[i]) ) {
+							seed[i] = !(matches[i] = elem);
+						}
+					}
+				}) :
+				function( elem, context, xml ) {
+					input[0] = elem;
+					matcher( input, null, xml, results );
+					return !results.pop();
+				};
+		}),
+
+		"has": markFunction(function( selector ) {
+			return function( elem ) {
+				return Sizzle( selector, elem ).length > 0;
+			};
+		}),
+
+		"contains": markFunction(function( text ) {
+			return function( elem ) {
+				return ( elem.textContent || elem.innerText || getText( elem ) ).indexOf( text ) > -1;
+			};
+		}),
+
+		// "Whether an element is represented by a :lang() selector
+		// is based solely on the element's language value
+		// being equal to the identifier C,
+		// or beginning with the identifier C immediately followed by "-".
+		// The matching of C against the element's language value is performed case-insensitively.
+		// The identifier C does not have to be a valid language name."
+		// http://www.w3.org/TR/selectors/#lang-pseudo
+		"lang": markFunction( function( lang ) {
+			// lang value must be a valid identifier
+			if ( !ridentifier.test(lang || "") ) {
+				Sizzle.error( "unsupported lang: " + lang );
+			}
+			lang = lang.replace( runescape, funescape ).toLowerCase();
+			return function( elem ) {
+				var elemLang;
+				do {
+					if ( (elemLang = documentIsHTML ?
+						elem.lang :
+						elem.getAttribute("xml:lang") || elem.getAttribute("lang")) ) {
+
+						elemLang = elemLang.toLowerCase();
+						return elemLang === lang || elemLang.indexOf( lang + "-" ) === 0;
+					}
+				} while ( (elem = elem.parentNode) && elem.nodeType === 1 );
+				return false;
+			};
+		}),
+
+		// Miscellaneous
+		"target": function( elem ) {
+			var hash = window.location && window.location.hash;
+			return hash && hash.slice( 1 ) === elem.id;
+		},
+
+		"root": function( elem ) {
+			return elem === docElem;
+		},
+
+		"focus": function( elem ) {
+			return elem === document.activeElement && (!document.hasFocus || document.hasFocus()) && !!(elem.type || elem.href || ~elem.tabIndex);
+		},
+
+		// Boolean properties
+		"enabled": function( elem ) {
+			return elem.disabled === false;
+		},
+
+		"disabled": function( elem ) {
+			return elem.disabled === true;
+		},
+
+		"checked": function( elem ) {
+			// In CSS3, :checked should return both checked and selected elements
+			// http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#checked
+			var nodeName = elem.nodeName.toLowerCase();
+			return (nodeName === "input" && !!elem.checked) || (nodeName === "option" && !!elem.selected);
+		},
+
+		"selected": function( elem ) {
+			// Accessing this property makes selected-by-default
+			// options in Safari work properly
+			if ( elem.parentNode ) {
+				elem.parentNode.selectedIndex;
+			}
+
+			return elem.selected === true;
+		},
+
+		// Contents
+		"empty": function( elem ) {
+			// http://www.w3.org/TR/selectors/#empty-pseudo
+			// :empty is only affected by element nodes and content nodes(including text(3), cdata(4)),
+			//   not comment, processing instructions, or others
+			// Thanks to Diego Perini for the nodeName shortcut
+			//   Greater than "@" means alpha characters (specifically not starting with "#" or "?")
+			for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
+				if ( elem.nodeName > "@" || elem.nodeType === 3 || elem.nodeType === 4 ) {
+					return false;
+				}
+			}
+			return true;
+		},
+
+		"parent": function( elem ) {
+			return !Expr.pseudos["empty"]( elem );
+		},
+
+		// Element/input types
+		"header": function( elem ) {
+			return rheader.test( elem.nodeName );
+		},
+
+		"input": function( elem ) {
+			return rinputs.test( elem.nodeName );
+		},
+
+		"button": function( elem ) {
+			var name = elem.nodeName.toLowerCase();
+			return name === "input" && elem.type === "button" || name === "button";
+		},
+
+		"text": function( elem ) {
+			var attr;
+			// IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc)
+			// use getAttribute instead to test this case
+			return elem.nodeName.toLowerCase() === "input" &&
+				elem.type === "text" &&
+				( (attr = elem.getAttribute("type")) == null || attr.toLowerCase() === elem.type );
+		},
+
+		// Position-in-collection
+		"first": createPositionalPseudo(function() {
+			return [ 0 ];
+		}),
+
+		"last": createPositionalPseudo(function( matchIndexes, length ) {
+			return [ length - 1 ];
+		}),
+
+		"eq": createPositionalPseudo(function( matchIndexes, length, argument ) {
+			return [ argument < 0 ? argument + length : argument ];
+		}),
+
+		"even": createPositionalPseudo(function( matchIndexes, length ) {
+			var i = 0;
+			for ( ; i < length; i += 2 ) {
+				matchIndexes.push( i );
+			}
+			return matchIndexes;
+		}),
+
+		"odd": createPositionalPseudo(function( matchIndexes, length ) {
+			var i = 1;
+			for ( ; i < length; i += 2 ) {
+				matchIndexes.push( i );
+			}
+			return matchIndexes;
+		}),
+
+		"lt": createPositionalPseudo(function( matchIndexes, length, argument ) {
+			var i = argument < 0 ? argument + length : argument;
+			for ( ; --i >= 0; ) {
+				matchIndexes.push( i );
+			}
+			return matchIndexes;
+		}),
+
+		"gt": createPositionalPseudo(function( matchIndexes, length, argument ) {
+			var i = argument < 0 ? argument + length : argument;
+			for ( ; ++i < length; ) {
+				matchIndexes.push( i );
+			}
+			return matchIndexes;
+		})
+	}
+};
+
+// Add button/input type pseudos
+for ( i in { radio: true, checkbox: true, file: true, password: true, image: true } ) {
+	Expr.pseudos[ i ] = createInputPseudo( i );
+}
+for ( i in { submit: true, reset: true } ) {
+	Expr.pseudos[ i ] = createButtonPseudo( i );
+}
+
+function tokenize( selector, parseOnly ) {
+	var matched, match, tokens, type,
+		soFar, groups, preFilters,
+		cached = tokenCache[ selector + " " ];
+
+	if ( cached ) {
+		return parseOnly ? 0 : cached.slice( 0 );
+	}
+
+	soFar = selector;
+	groups = [];
+	preFilters = Expr.preFilter;
+
+	while ( soFar ) {
+
+		// Comma and first run
+		if ( !matched || (match = rcomma.exec( soFar )) ) {
+			if ( match ) {
+				// Don't consume trailing commas as valid
+				soFar = soFar.slice( match[0].length ) || soFar;
+			}
+			groups.push( tokens = [] );
+		}
+
+		matched = false;
+
+		// Combinators
+		if ( (match = rcombinators.exec( soFar )) ) {
+			matched = match.shift();
+			tokens.push({
+				value: matched,
+				// Cast descendant combinators to space
+				type: match[0].replace( rtrim, " " )
+			});
+			soFar = soFar.slice( matched.length );
+		}
+
+		// Filters
+		for ( type in Expr.filter ) {
+			if ( (match = matchExpr[ type ].exec( soFar )) && (!preFilters[ type ] ||
+				(match = preFilters[ type ]( match ))) ) {
+				matched = match.shift();
+				tokens.push({
+					value: matched,
+					type: type,
+					matches: match
+				});
+				soFar = soFar.slice( matched.length );
+			}
+		}
+
+		if ( !matched ) {
+			break;
+		}
+	}
+
+	// Return the length of the invalid excess
+	// if we're just parsing
+	// Otherwise, throw an error or return tokens
+	return parseOnly ?
+		soFar.length :
+		soFar ?
+			Sizzle.error( selector ) :
+			// Cache the tokens
+			tokenCache( selector, groups ).slice( 0 );
+}
+
+function toSelector( tokens ) {
+	var i = 0,
+		len = tokens.length,
+		selector = "";
+	for ( ; i < len; i++ ) {
+		selector += tokens[i].value;
+	}
+	return selector;
+}
+
+function addCombinator( matcher, combinator, base ) {
+	var dir = combinator.dir,
+		checkNonElements = base && dir === "parentNode",
+		doneName = done++;
+
+	return combinator.first ?
+		// Check against closest ancestor/preceding element
+		function( elem, context, xml ) {
+			while ( (elem = elem[ dir ]) ) {
+				if ( elem.nodeType === 1 || checkNonElements ) {
+					return matcher( elem, context, xml );
+				}
+			}
+		} :
+
+		// Check against all ancestor/preceding elements
+		function( elem, context, xml ) {
+			var data, cache, outerCache,
+				dirkey = dirruns + " " + doneName;
+
+			// We can't set arbitrary data on XML nodes, so they don't benefit from dir caching
+			if ( xml ) {
+				while ( (elem = elem[ dir ]) ) {
+					if ( elem.nodeType === 1 || checkNonElements ) {
+						if ( matcher( elem, context, xml ) ) {
+							return true;
+						}
+					}
+				}
+			} else {
+				while ( (elem = elem[ dir ]) ) {
+					if ( elem.nodeType === 1 || checkNonElements ) {
+						outerCache = elem[ expando ] || (elem[ expando ] = {});
+						if ( (cache = outerCache[ dir ]) && cache[0] === dirkey ) {
+							if ( (data = cache[1]) === true || data === cachedruns ) {
+								return data === true;
+							}
+						} else {
+							cache = outerCache[ dir ] = [ dirkey ];
+							cache[1] = matcher( elem, context, xml ) || cachedruns;
+							if ( cache[1] === true ) {
+								return true;
+							}
+						}
+					}
+				}
+			}
+		};
+}
+
+function elementMatcher( matchers ) {
+	return matchers.length > 1 ?
+		function( elem, context, xml ) {
+			var i = matchers.length;
+			while ( i-- ) {
+				if ( !matchers[i]( elem, context, xml ) ) {
+					return false;
+				}
+			}
+			return true;
+		} :
+		matchers[0];
+}
+
+function condense( unmatched, map, filter, context, xml ) {
+	var elem,
+		newUnmatched = [],
+		i = 0,
+		len = unmatched.length,
+		mapped = map != null;
+
+	for ( ; i < len; i++ ) {
+		if ( (elem = unmatched[i]) ) {
+			if ( !filter || filter( elem, context, xml ) ) {
+				newUnmatched.push( elem );
+				if ( mapped ) {
+					map.push( i );
+				}
+			}
+		}
+	}
+
+	return newUnmatched;
+}
+
+function setMatcher( preFilter, selector, matcher, postFilter, postFinder, postSelector ) {
+	if ( postFilter && !postFilter[ expando ] ) {
+		postFilter = setMatcher( postFilter );
+	}
+	if ( postFinder && !postFinder[ expando ] ) {
+		postFinder = setMatcher( postFinder, postSelector );
+	}
+	return markFunction(function( seed, results, context, xml ) {
+		var temp, i, elem,
+			preMap = [],
+			postMap = [],
+			preexisting = results.length,
+
+			// Get initial elements from seed or context
+			elems = seed || multipleContexts( selector || "*", context.nodeType ? [ context ] : context, [] ),
+
+			// Prefilter to get matcher input, preserving a map for seed-results synchronization
+			matcherIn = preFilter && ( seed || !selector ) ?
+				condense( elems, preMap, preFilter, context, xml ) :
+				elems,
+
+			matcherOut = matcher ?
+				// If we have a postFinder, or filtered seed, or non-seed postFilter or preexisting results,
+				postFinder || ( seed ? preFilter : preexisting || postFilter ) ?
+
+					// ...intermediate processing is necessary
+					[] :
+
+					// ...otherwise use results directly
+					results :
+				matcherIn;
+
+		// Find primary matches
+		if ( matcher ) {
+			matcher( matcherIn, matcherOut, context, xml );
+		}
+
+		// Apply postFilter
+		if ( postFilter ) {
+			temp = condense( matcherOut, postMap );
+			postFilter( temp, [], context, xml );
+
+			// Un-match failing elements by moving them back to matcherIn
+			i = temp.length;
+			while ( i-- ) {
+				if ( (elem = temp[i]) ) {
+					matcherOut[ postMap[i] ] = !(matcherIn[ postMap[i] ] = elem);
+				}
+			}
+		}
+
+		if ( seed ) {
+			if ( postFinder || preFilter ) {
+				if ( postFinder ) {
+					// Get the final matcherOut by condensing this intermediate into postFinder contexts
+					temp = [];
+					i = matcherOut.length;
+					while ( i-- ) {
+						if ( (elem = matcherOut[i]) ) {
+							// Restore matcherIn since elem is not yet a final match
+							temp.push( (matcherIn[i] = elem) );
+						}
+					}
+					postFinder( null, (matcherOut = []), temp, xml );
+				}
+
+				// Move matched elements from seed to results to keep them synchronized
+				i = matcherOut.length;
+				while ( i-- ) {
+					if ( (elem = matcherOut[i]) &&
+						(temp = postFinder ? indexOf.call( seed, elem ) : preMap[i]) > -1 ) {
+
+						seed[temp] = !(results[temp] = elem);
+					}
+				}
+			}
+
+		// Add elements to results, through postFinder if defined
+		} else {
+			matcherOut = condense(
+				matcherOut === results ?
+					matcherOut.splice( preexisting, matcherOut.length ) :
+					matcherOut
+			);
+			if ( postFinder ) {
+				postFinder( null, results, matcherOut, xml );
+			} else {
+				push.apply( results, matcherOut );
+			}
+		}
+	});
+}
+
+function matcherFromTokens( tokens ) {
+	var checkContext, matcher, j,
+		len = tokens.length,
+		leadingRelative = Expr.relative[ tokens[0].type ],
+		implicitRelative = leadingRelative || Expr.relative[" "],
+		i = leadingRelative ? 1 : 0,
+
+		// The foundational matcher ensures that elements are reachable from top-level context(s)
+		matchContext = addCombinator( function( elem ) {
+			return elem === checkContext;
+		}, implicitRelative, true ),
+		matchAnyContext = addCombinator( function( elem ) {
+			return indexOf.call( checkContext, elem ) > -1;
+		}, implicitRelative, true ),
+		matchers = [ function( elem, context, xml ) {
+			return ( !leadingRelative && ( xml || context !== outermostContext ) ) || (
+				(checkContext = context).nodeType ?
+					matchContext( elem, context, xml ) :
+					matchAnyContext( elem, context, xml ) );
+		} ];
+
+	for ( ; i < len; i++ ) {
+		if ( (matcher = Expr.relative[ tokens[i].type ]) ) {
+			matchers = [ addCombinator(elementMatcher( matchers ), matcher) ];
+		} else {
+			matcher = Expr.filter[ tokens[i].type ].apply( null, tokens[i].matches );
+
+			// Return special upon seeing a positional matcher
+			if ( matcher[ expando ] ) {
+				// Find the next relative operator (if any) for proper handling
+				j = ++i;
+				for ( ; j < len; j++ ) {
+					if ( Expr.relative[ tokens[j].type ] ) {
+						break;
+					}
+				}
+				return setMatcher(
+					i > 1 && elementMatcher( matchers ),
+					i > 1 && toSelector(
+						// If the preceding token was a descendant combinator, insert an implicit any-element `*`
+						tokens.slice( 0, i - 1 ).concat({ value: tokens[ i - 2 ].type === " " ? "*" : "" })
+					).replace( rtrim, "$1" ),
+					matcher,
+					i < j && matcherFromTokens( tokens.slice( i, j ) ),
+					j < len && matcherFromTokens( (tokens = tokens.slice( j )) ),
+					j < len && toSelector( tokens )
+				);
+			}
+			matchers.push( matcher );
+		}
+	}
+
+	return elementMatcher( matchers );
+}
+
+function matcherFromGroupMatchers( elementMatchers, setMatchers ) {
+	// A counter to specify which element is currently being matched
+	var matcherCachedRuns = 0,
+		bySet = setMatchers.length > 0,
+		byElement = elementMatchers.length > 0,
+		superMatcher = function( seed, context, xml, results, expandContext ) {
+			var elem, j, matcher,
+				setMatched = [],
+				matchedCount = 0,
+				i = "0",
+				unmatched = seed && [],
+				outermost = expandContext != null,
+				contextBackup = outermostContext,
+				// We must always have either seed elements or context
+				elems = seed || byElement && Expr.find["TAG"]( "*", expandContext && context.parentNode || context ),
+				// Use integer dirruns iff this is the outermost matcher
+				dirrunsUnique = (dirruns += contextBackup == null ? 1 : Math.random() || 0.1);
+
+			if ( outermost ) {
+				outermostContext = context !== document && context;
+				cachedruns = matcherCachedRuns;
+			}
+
+			// Add elements passing elementMatchers directly to results
+			// Keep `i` a string if there are no elements so `matchedCount` will be "00" below
+			for ( ; (elem = elems[i]) != null; i++ ) {
+				if ( byElement && elem ) {
+					j = 0;
+					while ( (matcher = elementMatchers[j++]) ) {
+						if ( matcher( elem, context, xml ) ) {
+							results.push( elem );
+							break;
+						}
+					}
+					if ( outermost ) {
+						dirruns = dirrunsUnique;
+						cachedruns = ++matcherCachedRuns;
+					}
+				}
+
+				// Track unmatched elements for set filters
+				if ( bySet ) {
+					// They will have gone through all possible matchers
+					if ( (elem = !matcher && elem) ) {
+						matchedCount--;
+					}
+
+					// Lengthen the array for every element, matched or not
+					if ( seed ) {
+						unmatched.push( elem );
+					}
+				}
+			}
+
+			// Apply set filters to unmatched elements
+			matchedCount += i;
+			if ( bySet && i !== matchedCount ) {
+				j = 0;
+				while ( (matcher = setMatchers[j++]) ) {
+					matcher( unmatched, setMatched, context, xml );
+				}
+
+				if ( seed ) {
+					// Reintegrate element matches to eliminate the need for sorting
+					if ( matchedCount > 0 ) {
+						while ( i-- ) {
+							if ( !(unmatched[i] || setMatched[i]) ) {
+								setMatched[i] = pop.call( results );
+							}
+						}
+					}
+
+					// Discard index placeholder values to get only actual matches
+					setMatched = condense( setMatched );
+				}
+
+				// Add matches to results
+				push.apply( results, setMatched );
+
+				// Seedless set matches succeeding multiple successful matchers stipulate sorting
+				if ( outermost && !seed && setMatched.length > 0 &&
+					( matchedCount + setMatchers.length ) > 1 ) {
+
+					Sizzle.uniqueSort( results );
+				}
+			}
+
+			// Override manipulation of globals by nested matchers
+			if ( outermost ) {
+				dirruns = dirrunsUnique;
+				outermostContext = contextBackup;
+			}
+
+			return unmatched;
+		};
+
+	return bySet ?
+		markFunction( superMatcher ) :
+		superMatcher;
+}
+
+compile = Sizzle.compile = function( selector, group /* Internal Use Only */ ) {
+	var i,
+		setMatchers = [],
+		elementMatchers = [],
+		cached = compilerCache[ selector + " " ];
+
+	if ( !cached ) {
+		// Generate a function of recursive functions that can be used to check each element
+		if ( !group ) {
+			group = tokenize( selector );
+		}
+		i = group.length;
+		while ( i-- ) {
+			cached = matcherFromTokens( group[i] );
+			if ( cached[ expando ] ) {
+				setMatchers.push( cached );
+			} else {
+				elementMatchers.push( cached );
+			}
+		}
+
+		// Cache the compiled function
+		cached = compilerCache( selector, matcherFromGroupMatchers( elementMatchers, setMatchers ) );
+	}
+	return cached;
+};
+
+function multipleContexts( selector, contexts, results ) {
+	var i = 0,
+		len = contexts.length;
+	for ( ; i < len; i++ ) {
+		Sizzle( selector, contexts[i], results );
+	}
+	return results;
+}
+
+function select( selector, context, results, seed ) {
+	var i, tokens, token, type, find,
+		match = tokenize( selector );
+
+	if ( !seed ) {
+		// Try to minimize operations if there is only one group
+		if ( match.length === 1 ) {
+
+			// Take a shortcut and set the context if the root selector is an ID
+			tokens = match[0] = match[0].slice( 0 );
+			if ( tokens.length > 2 && (token = tokens[0]).type === "ID" &&
+					support.getById && context.nodeType === 9 && documentIsHTML &&
+					Expr.relative[ tokens[1].type ] ) {
+
+				context = ( Expr.find["ID"]( token.matches[0].replace(runescape, funescape), context ) || [] )[0];
+				if ( !context ) {
+					return results;
+				}
+				selector = selector.slice( tokens.shift().value.length );
+			}
+
+			// Fetch a seed set for right-to-left matching
+			i = matchExpr["needsContext"].test( selector ) ? 0 : tokens.length;
+			while ( i-- ) {
+				token = tokens[i];
+
+				// Abort if we hit a combinator
+				if ( Expr.relative[ (type = token.type) ] ) {
+					break;
+				}
+				if ( (find = Expr.find[ type ]) ) {
+					// Search, expanding context for leading sibling combinators
+					if ( (seed = find(
+						token.matches[0].replace( runescape, funescape ),
+						rsibling.test( tokens[0].type ) && context.parentNode || context
+					)) ) {
+
+						// If seed is empty or no tokens remain, we can return early
+						tokens.splice( i, 1 );
+						selector = seed.length && toSelector( tokens );
+						if ( !selector ) {
+							push.apply( results, seed );
+							return results;
+						}
+
+						break;
+					}
+				}
+			}
+		}
+	}
+
+	// Compile and execute a filtering function
+	// Provide `match` to avoid retokenization if we modified the selector above
+	compile( selector, match )(
+		seed,
+		context,
+		!documentIsHTML,
+		results,
+		rsibling.test( selector )
+	);
+	return results;
+}
+
+// Deprecated
+Expr.pseudos["nth"] = Expr.pseudos["eq"];
+
+// Easy API for creating new setFilters
+function setFilters() {}
+setFilters.prototype = Expr.filters = Expr.pseudos;
+Expr.setFilters = new setFilters();
+
+// One-time assignments
+
+// Sort stability
+support.sortStable = expando.split("").sort( sortOrder ).join("") === expando;
+
+// Initialize against the default document
+setDocument();
+
+// Support: Chrome<<14
+// Always assume duplicates if they aren't passed to the comparison function
+[0, 0].sort( sortOrder );
+support.detectDuplicates = hasDuplicate;
+
+jQuery.find = Sizzle;
+jQuery.expr = Sizzle.selectors;
+jQuery.expr[":"] = jQuery.expr.pseudos;
+jQuery.unique = Sizzle.uniqueSort;
+jQuery.text = Sizzle.getText;
+jQuery.isXMLDoc = Sizzle.isXML;
+jQuery.contains = Sizzle.contains;
+
+
+})( window );
+// String to Object options format cache
+var optionsCache = {};
+
+// Convert String-formatted options into Object-formatted ones and store in cache
+function createOptions( options ) {
+	var object = optionsCache[ options ] = {};
+	jQuery.each( options.match( core_rnotwhite ) || [], function( _, flag ) {
+		object[ flag ] = true;
+	});
+	return object;
+}
+
+/*
+ * Create a callback list using the following parameters:
+ *
+ *	options: an optional list of space-separated options that will change how
+ *			the callback list behaves or a more traditional option object
+ *
+ * By default a callback list will act like an event callback list and can be
+ * "fired" multiple times.
+ *
+ * Possible options:
+ *
+ *	once:			will ensure the callback list can only be fired once (like a Deferred)
+ *
+ *	memory:			will keep track of previous values and will call any callback added
+ *					after the list has been fired right away with the latest "memorized"
+ *					values (like a Deferred)
+ *
+ *	unique:			will ensure a callback can only be added once (no duplicate in the list)
+ *
+ *	stopOnFalse:	interrupt callings when a callback returns false
+ *
+ */
+jQuery.Callbacks = function( options ) {
+
+	// Convert options from String-formatted to Object-formatted if needed
+	// (we check in cache first)
+	options = typeof options === "string" ?
+		( optionsCache[ options ] || createOptions( options ) ) :
+		jQuery.extend( {}, options );
+
+	var // Flag to know if list is currently firing
+		firing,
+		// Last fire value (for non-forgettable lists)
+		memory,
+		// Flag to know if list was already fired
+		fired,
+		// End of the loop when firing
+		firingLength,
+		// Index of currently firing callback (modified by remove if needed)
+		firingIndex,
+		// First callback to fire (used internally by add and fireWith)
+		firingStart,
+		// Actual callback list
+		list = [],
+		// Stack of fire calls for repeatable lists
+		stack = !options.once && [],
+		// Fire callbacks
+		fire = function( data ) {
+			memory = options.memory && data;
+			fired = true;
+			firingIndex = firingStart || 0;
+			firingStart = 0;
+			firingLength = list.length;
+			firing = true;
+			for ( ; list && firingIndex < firingLength; firingIndex++ ) {
+				if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {
+					memory = false; // To prevent further calls using add
+					break;
+				}
+			}
+			firing = false;
+			if ( list ) {
+				if ( stack ) {
+					if ( stack.length ) {
+						fire( stack.shift() );
+					}
+				} else if ( memory ) {
+					list = [];
+				} else {
+					self.disable();
+				}
+			}
+		},
+		// Actual Callbacks object
+		self = {
+			// Add a callback or a collection of callbacks to the list
+			add: function() {
+				if ( list ) {
+					// First, we save the current length
+					var start = list.length;
+					(function add( args ) {
+						jQuery.each( args, function( _, arg ) {
+							var type = jQuery.type( arg );
+							if ( type === "function" ) {
+								if ( !options.unique || !self.has( arg ) ) {
+									list.push( arg );
+								}
+							} else if ( arg && arg.length && type !== "string" ) {
+								// Inspect recursively
+								add( arg );
+							}
+						});
+					})( arguments );
+					// Do we need to add the callbacks to the
+					// current firing batch?
+					if ( firing ) {
+						firingLength = list.length;
+					// With memory, if we're not firing then
+					// we should call right away
+					} else if ( memory ) {
+						firingStart = start;
+						fire( memory );
+					}
+				}
+				return this;
+			},
+			// Remove a callback from the list
+			remove: function() {
+				if ( list ) {
+					jQuery.each( arguments, function( _, arg ) {
+						var index;
+						while( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
+							list.splice( index, 1 );
+							// Handle firing indexes
+							if ( firing ) {
+								if ( index <= firingLength ) {
+									firingLength--;
+								}
+								if ( index <= firingIndex ) {
+									firingIndex--;
+								}
+							}
+						}
+					});
+				}
+				return this;
+			},
+			// Check if a given callback is in the list.
+			// If no argument is given, return whether or not list has callbacks attached.
+			has: function( fn ) {
+				return fn ? jQuery.inArray( fn, list ) > -1 : !!( list && list.length );
+			},
+			// Remove all callbacks from the list
+			empty: function() {
+				list = [];
+				firingLength = 0;
+				return this;
+			},
+			// Have the list do nothing anymore
+			disable: function() {
+				list = stack = memory = undefined;
+				return this;
+			},
+			// Is it disabled?
+			disabled: function() {
+				return !list;
+			},
+			// Lock the list in its current state
+			lock: function() {
+				stack = undefined;
+				if ( !memory ) {
+					self.disable();
+				}
+				return this;
+			},
+			// Is it locked?
+			locked: function() {
+				return !stack;
+			},
+			// Call all callbacks with the given context and arguments
+			fireWith: function( context, args ) {
+				args = args || [];
+				args = [ context, args.slice ? args.slice() : args ];
+				if ( list && ( !fired || stack ) ) {
+					if ( firing ) {
+						stack.push( args );
+					} else {
+						fire( args );
+					}
+				}
+				return this;
+			},
+			// Call all the callbacks with the given arguments
+			fire: function() {
+				self.fireWith( this, arguments );
+				return this;
+			},
+			// To know if the callbacks have already been called at least once
+			fired: function() {
+				return !!fired;
+			}
+		};
+
+	return self;
+};
+jQuery.extend({
+
+	Deferred: function( func ) {
+		var tuples = [
+				// action, add listener, listener list, final state
+				[ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
+				[ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
+				[ "notify", "progress", jQuery.Callbacks("memory") ]
+			],
+			state = "pending",
+			promise = {
+				state: function() {
+					return state;
+				},
+				always: function() {
+					deferred.done( arguments ).fail( arguments );
+					return this;
+				},
+				then: function( /* fnDone, fnFail, fnProgress */ ) {
+					var fns = arguments;
+					return jQuery.Deferred(function( newDefer ) {
+						jQuery.each( tuples, function( i, tuple ) {
+							var action = tuple[ 0 ],
+								fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
+							// deferred[ done | fail | progress ] for forwarding actions to newDefer
+							deferred[ tuple[1] ](function() {
+								var returned = fn && fn.apply( this, arguments );
+								if ( returned && jQuery.isFunction( returned.promise ) ) {
+									returned.promise()
+										.done( newDefer.resolve )
+										.fail( newDefer.reject )
+										.progress( newDefer.notify );
+								} else {
+									newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
+								}
+							});
+						});
+						fns = null;
+					}).promise();
+				},
+				// Get a promise for this deferred
+				// If obj is provided, the promise aspect is added to the object
+				promise: function( obj ) {
+					return obj != null ? jQuery.extend( obj, promise ) : promise;
+				}
+			},
+			deferred = {};
+
+		// Keep pipe for back-compat
+		promise.pipe = promise.then;
+
+		// Add list-specific methods
+		jQuery.each( tuples, function( i, tuple ) {
+			var list = tuple[ 2 ],
+				stateString = tuple[ 3 ];
+
+			// promise[ done | fail | progress ] = list.add
+			promise[ tuple[1] ] = list.add;
+
+			// Handle state
+			if ( stateString ) {
+				list.add(function() {
+					// state = [ resolved | rejected ]
+					state = stateString;
+
+				// [ reject_list | resolve_list ].disable; progress_list.lock
+				}, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );
+			}
+
+			// deferred[ resolve | reject | notify ]
+			deferred[ tuple[0] ] = function() {
+				deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );
+				return this;
+			};
+			deferred[ tuple[0] + "With" ] = list.fireWith;
+		});
+
+		// Make the deferred a promise
+		promise.promise( deferred );
+
+		// Call given func if any
+		if ( func ) {
+			func.call( deferred, deferred );
+		}
+
+		// All done!
+		return deferred;
+	},
+
+	// Deferred helper
+	when: function( subordinate /* , ..., subordinateN */ ) {
+		var i = 0,
+			resolveValues = core_slice.call( arguments ),
+			length = resolveValues.length,
+
+			// the count of uncompleted subordinates
+			remaining = length !== 1 || ( subordinate && jQuery.isFunction( subordinate.promise ) ) ? length : 0,
+
+			// the master Deferred. If resolveValues consist of only a single Deferred, just use that.
+			deferred = remaining === 1 ? subordinate : jQuery.Deferred(),
+
+			// Update function for both resolve and progress values
+			updateFunc = function( i, contexts, values ) {
+				return function( value ) {
+					contexts[ i ] = this;
+					values[ i ] = arguments.length > 1 ? core_slice.call( arguments ) : value;
+					if( values === progressValues ) {
+						deferred.notifyWith( contexts, values );
+					} else if ( !( --remaining ) ) {
+						deferred.resolveWith( contexts, values );
+					}
+				};
+			},
+
+			progressValues, progressContexts, resolveContexts;
+
+		// add listeners to Deferred subordinates; treat others as resolved
+		if ( length > 1 ) {
+			progressValues = new Array( length );
+			progressContexts = new Array( length );
+			resolveContexts = new Array( length );
+			for ( ; i < length; i++ ) {
+				if ( resolveValues[ i ] && jQuery.isFunction( resolveValues[ i ].promise ) ) {
+					resolveValues[ i ].promise()
+						.done( updateFunc( i, resolveContexts, resolveValues ) )
+						.fail( deferred.reject )
+						.progress( updateFunc( i, progressContexts, progressValues ) );
+				} else {
+					--remaining;
+				}
+			}
+		}
+
+		// if we're not waiting on anything, resolve the master
+		if ( !remaining ) {
+			deferred.resolveWith( resolveContexts, resolveValues );
+		}
+
+		return deferred.promise();
+	}
+});
+jQuery.support = (function( support ) {
+
+	var all, a, input, select, fragment, opt, eventName, isSupported, i,
+		div = document.createElement("div");
+
+	// Setup
+	div.setAttribute( "className", "t" );
+	div.innerHTML = "  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>";
+
+	// Finish early in limited (non-browser) environments
+	all = div.getElementsByTagName("*") || [];
+	a = div.getElementsByTagName("a")[ 0 ];
+	if ( !a || !a.style || !all.length ) {
+		return support;
+	}
+
+	// First batch of tests
+	select = document.createElement("select");
+	opt = select.appendChild( document.createElement("option") );
+	input = div.getElementsByTagName("input")[ 0 ];
+
+	a.style.cssText = "top:1px;float:left;opacity:.5";
+
+	// Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
+	support.getSetAttribute = div.className !== "t";
+
+	// IE strips leading whitespace when .innerHTML is used
+	support.leadingWhitespace = div.firstChild.nodeType === 3;
+
+	// Make sure that tbody elements aren't automatically inserted
+	// IE will insert them into empty tables
+	support.tbody = !div.getElementsByTagName("tbody").length;
+
+	// Make sure that link elements get serialized correctly by innerHTML
+	// This requires a wrapper element in IE
+	support.htmlSerialize = !!div.getElementsByTagName("link").length;
+
+	// Get the style information from getAttribute
+	// (IE uses .cssText instead)
+	support.style = /top/.test( a.getAttribute("style") );
+
+	// Make sure that URLs aren't manipulated
+	// (IE normalizes it by default)
+	support.hrefNormalized = a.getAttribute("href") === "/a";
+
+	// Make sure that element opacity exists
+	// (IE uses filter instead)
+	// Use a regex to work around a WebKit issue. See #5145
+	support.opacity = /^0.5/.test( a.style.opacity );
+
+	// Verify style float existence
+	// (IE uses styleFloat instead of cssFloat)
+	support.cssFloat = !!a.style.cssFloat;
+
+	// Check the default checkbox/radio value ("" on WebKit; "on" elsewhere)
+	support.checkOn = !!input.value;
+
+	// Make sure that a selected-by-default option has a working selected property.
+	// (WebKit defaults to false instead of true, IE too, if it's in an optgroup)
+	support.optSelected = opt.selected;
+
+	// Tests for enctype support on a form (#6743)
+	support.enctype = !!document.createElement("form").enctype;
+
+	// Makes sure cloning an html5 element does not cause problems
+	// Where outerHTML is undefined, this still works
+	support.html5Clone = document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>";
+
+	// Will be defined later
+	support.inlineBlockNeedsLayout = false;
+	support.shrinkWrapBlocks = false;
+	support.pixelPosition = false;
+	support.deleteExpando = true;
+	support.noCloneEvent = true;
+	support.reliableMarginRight = true;
+	support.boxSizingReliable = true;
+
+	// Make sure checked status is properly cloned
+	input.checked = true;
+	support.noCloneChecked = input.cloneNode( true ).checked;
+
+	// Make sure that the options inside disabled selects aren't marked as disabled
+	// (WebKit marks them as disabled)
+	select.disabled = true;
+	support.optDisabled = !opt.disabled;
+
+	// Support: IE<9
+	try {
+		delete div.test;
+	} catch( e ) {
+		support.deleteExpando = false;
+	}
+
+	// Check if we can trust getAttribute("value")
+	input = document.createElement("input");
+	input.setAttribute( "value", "" );
+	support.input = input.getAttribute( "value" ) === "";
+
+	// Check if an input maintains its value after becoming a radio
+	input.value = "t";
+	input.setAttribute( "type", "radio" );
+	support.radioValue = input.value === "t";
+
+	// #11217 - WebKit loses check when the name is after the checked attribute
+	input.setAttribute( "checked", "t" );
+	input.setAttribute( "name", "t" );
+
+	fragment = document.createDocumentFragment();
+	fragment.appendChild( input );
+
+	// Check if a disconnected checkbox will retain its checked
+	// value of true after appended to the DOM (IE6/7)
+	support.appendChecked = input.checked;
+
+	// WebKit doesn't clone checked state correctly in fragments
+	support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;
+
+	// Support: IE<9
+	// Opera does not clone events (and typeof div.attachEvent === undefined).
+	// IE9-10 clones events bound via attachEvent, but they don't trigger with .click()
+	if ( div.attachEvent ) {
+		div.attachEvent( "onclick", function() {
+			support.noCloneEvent = false;
+		});
+
+		div.cloneNode( true ).click();
+	}
+
+	// Support: IE<9 (lack submit/change bubble), Firefox 17+ (lack focusin event)
+	// Beware of CSP restrictions (https://developer.mozilla.org/en/Security/CSP)
+	for ( i in { submit: true, change: true, focusin: true }) {
+		div.setAttribute( eventName = "on" + i, "t" );
+
+		support[ i + "Bubbles" ] = eventName in window || div.attributes[ eventName ].expando === false;
+	}
+
+	div.style.backgroundClip = "content-box";
+	div.cloneNode( true ).style.backgroundClip = "";
+	support.clearCloneStyle = div.style.backgroundClip === "content-box";
+
+	// Support: IE<9
+	// Iteration over object's inherited properties before its own.
+	for ( i in jQuery( support ) ) {
+		break;
+	}
+	support.ownLast = i !== "0";
+
+	// Run tests that need a body at doc ready
+	jQuery(function() {
+		var container, marginDiv, tds,
+			divReset = "padding:0;margin:0;border:0;display:block;box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;",
+			body = document.getElementsByTagName("body")[0];
+
+		if ( !body ) {
+			// Return for frameset docs that don't have a body
+			return;
+		}
+
+		container = document.createElement("div");
+		container.style.cssText = "border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px";
+
+		body.appendChild( container ).appendChild( div );
+
+		// Support: IE8
+		// Check if table cells still have offsetWidth/Height when they are set
+		// to display:none and there are still other visible table cells in a
+		// table row; if so, offsetWidth/Height are not reliable for use when
+		// determining if an element has been hidden directly using
+		// display:none (it is still safe to use offsets if a parent element is
+		// hidden; don safety goggles and see bug #4512 for more information).
+		div.innerHTML = "<table><tr><td></td><td>t</td></tr></table>";
+		tds = div.getElementsByTagName("td");
+		tds[ 0 ].style.cssText = "padding:0;margin:0;border:0;display:none";
+		isSupported = ( tds[ 0 ].offsetHeight === 0 );
+
+		tds[ 0 ].style.display = "";
+		tds[ 1 ].style.display = "none";
+
+		// Support: IE8
+		// Check if empty table cells still have offsetWidth/Height
+		support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );
+
+		// Check box-sizing and margin behavior.
+		div.innerHTML = "";
+		div.style.cssText = "box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;";
+
+		// Workaround failing boxSizing test due to offsetWidth returning wrong value
+		// with some non-1 values of body zoom, ticket #13543
+		jQuery.swap( body, body.style.zoom != null ? { zoom: 1 } : {}, function() {
+			support.boxSizing = div.offsetWidth === 4;
+		});
+
+		// Use window.getComputedStyle because jsdom on node.js will break without it.
+		if ( window.getComputedStyle ) {
+			support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%";
+			support.boxSizingReliable = ( window.getComputedStyle( div, null ) || { width: "4px" } ).width === "4px";
+
+			// Check if div with explicit width and no margin-right incorrectly
+			// gets computed margin-right based on width of container. (#3333)
+			// Fails in WebKit before Feb 2011 nightlies
+			// WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
+			marginDiv = div.appendChild( document.createElement("div") );
+			marginDiv.style.cssText = div.style.cssText = divReset;
+			marginDiv.style.marginRight = marginDiv.style.width = "0";
+			div.style.width = "1px";
+
+			support.reliableMarginRight =
+				!parseFloat( ( window.getComputedStyle( marginDiv, null ) || {} ).marginRight );
+		}
+
+		if ( typeof div.style.zoom !== core_strundefined ) {
+			// Support: IE<8
+			// Check if natively block-level elements act like inline-block
+			// elements when setting their display to 'inline' and giving
+			// them layout
+			div.innerHTML = "";
+			div.style.cssText = divReset + "width:1px;padding:1px;display:inline;zoom:1";
+			support.inlineBlockNeedsLayout = ( div.offsetWidth === 3 );
+
+			// Support: IE6
+			// Check if elements with layout shrink-wrap their children
+			div.style.display = "block";
+			div.innerHTML = "<div></div>";
+			div.firstChild.style.width = "5px";
+			support.shrinkWrapBlocks = ( div.offsetWidth !== 3 );
+
+			if ( support.inlineBlockNeedsLayout ) {
+				// Prevent IE 6 from affecting layout for positioned elements #11048
+				// Prevent IE from shrinking the body in IE 7 mode #12869
+				// Support: IE<8
+				body.style.zoom = 1;
+			}
+		}
+
+		body.removeChild( container );
+
+		// Null elements to avoid leaks in IE
+		container = div = tds = marginDiv = null;
+	});
+
+	// Null elements to avoid leaks in IE
+	all = select = fragment = opt = a = input = null;
+
+	return support;
+})({});
+
+var rbrace = /(?:\{[\s\S]*\}|\[[\s\S]*\])$/,
+	rmultiDash = /([A-Z])/g;
+
+function internalData( elem, name, data, pvt /* Internal Use Only */ ){
+	if ( !jQuery.acceptData( elem ) ) {
+		return;
+	}
+
+	var ret, thisCache,
+		internalKey = jQuery.expando,
+
+		// We have to handle DOM nodes and JS objects differently because IE6-7
+		// can't GC object references properly across the DOM-JS boundary
+		isNode = elem.nodeType,
+
+		// Only DOM nodes need the global jQuery cache; JS object data is
+		// attached directly to the object so GC can occur automatically
+		cache = isNode ? jQuery.cache : elem,
+
+		// Only defining an ID for JS objects if its cache already exists allows
+		// the code to shortcut on the same path as a DOM node with no cache
+		id = isNode ? elem[ internalKey ] : elem[ internalKey ] && internalKey;
+
+	// Avoid doing any more work than we need to when trying to get data on an
+	// object that has no data at all
+	if ( (!id || !cache[id] || (!pvt && !cache[id].data)) && data === undefined && typeof name === "string" ) {
+		return;
+	}
+
+	if ( !id ) {
+		// Only DOM nodes need a new unique ID for each element since their data
+		// ends up in the global cache
+		if ( isNode ) {
+			id = elem[ internalKey ] = core_deletedIds.pop() || jQuery.guid++;
+		} else {
+			id = internalKey;
+		}
+	}
+
+	if ( !cache[ id ] ) {
+		// Avoid exposing jQuery metadata on plain JS objects when the object
+		// is serialized using JSON.stringify
+		cache[ id ] = isNode ? {} : { toJSON: jQuery.noop };
+	}
+
+	// An object can be passed to jQuery.data instead of a key/value pair; this gets
+	// shallow copied over onto the existing cache
+	if ( typeof name === "object" || typeof name === "function" ) {
+		if ( pvt ) {
+			cache[ id ] = jQuery.extend( cache[ id ], name );
+		} else {
+			cache[ id ].data = jQuery.extend( cache[ id ].data, name );
+		}
+	}
+
+	thisCache = cache[ id ];
+
+	// jQuery data() is stored in a separate object inside the object's internal data
+	// cache in order to avoid key collisions between internal data and user-defined
+	// data.
+	if ( !pvt ) {
+		if ( !thisCache.data ) {
+			thisCache.data = {};
+		}
+
+		thisCache = thisCache.data;
+	}
+
+	if ( data !== undefined ) {
+		thisCache[ jQuery.camelCase( name ) ] = data;
+	}
+
+	// Check for both converted-to-camel and non-converted data property names
+	// If a data property was specified
+	if ( typeof name === "string" ) {
+
+		// First Try to find as-is property data
+		ret = thisCache[ name ];
+
+		// Test for null|undefined property data
+		if ( ret == null ) {
+
+			// Try to find the camelCased property
+			ret = thisCache[ jQuery.camelCase( name ) ];
+		}
+	} else {
+		ret = thisCache;
+	}
+
+	return ret;
+}
+
+function internalRemoveData( elem, name, pvt ) {
+	if ( !jQuery.acceptData( elem ) ) {
+		return;
+	}
+
+	var thisCache, i,
+		isNode = elem.nodeType,
+
+		// See jQuery.data for more information
+		cache = isNode ? jQuery.cache : elem,
+		id = isNode ? elem[ jQuery.expando ] : jQuery.expando;
+
+	// If there is already no cache entry for this object, there is no
+	// purpose in continuing
+	if ( !cache[ id ] ) {
+		return;
+	}
+
+	if ( name ) {
+
+		thisCache = pvt ? cache[ id ] : cache[ id ].data;
+
+		if ( thisCache ) {
+
+			// Support array or space separated string names for data keys
+			if ( !jQuery.isArray( name ) ) {
+
+				// try the string as a key before any manipulation
+				if ( name in thisCache ) {
+					name = [ name ];
+				} else {
+
+					// split the camel cased version by spaces unless a key with the spaces exists
+					name = jQuery.camelCase( name );
+					if ( name in thisCache ) {
+						name = [ name ];
+					} else {
+						name = name.split(" ");
+					}
+				}
+			} else {
+				// If "name" is an array of keys...
+				// When data is initially created, via ("key", "val") signature,
+				// keys will be converted to camelCase.
+				// Since there is no way to tell _how_ a key was added, remove
+				// both plain key and camelCase key. #12786
+				// This will only penalize the array argument path.
+				name = name.concat( jQuery.map( name, jQuery.camelCase ) );
+			}
+
+			i = name.length;
+			while ( i-- ) {
+				delete thisCache[ name[i] ];
+			}
+
+			// If there is no data left in the cache, we want to continue
+			// and let the cache object itself get destroyed
+			if ( pvt ? !isEmptyDataObject(thisCache) : !jQuery.isEmptyObject(thisCache) ) {
+				return;
+			}
+		}
+	}
+
+	// See jQuery.data for more information
+	if ( !pvt ) {
+		delete cache[ id ].data;
+
+		// Don't destroy the parent cache unless the internal data object
+		// had been the only thing left in it
+		if ( !isEmptyDataObject( cache[ id ] ) ) {
+			return;
+		}
+	}
+
+	// Destroy the cache
+	if ( isNode ) {
+		jQuery.cleanData( [ elem ], true );
+
+	// Use delete when supported for expandos or `cache` is not a window per isWindow (#10080)
+	/* jshint eqeqeq: false */
+	} else if ( jQuery.support.deleteExpando || cache != cache.window ) {
+		/* jshint eqeqeq: true */
+		delete cache[ id ];
+
+	// When all else fails, null
+	} else {
+		cache[ id ] = null;
+	}
+}
+
+jQuery.extend({
+	cache: {},
+
+	// The following elements throw uncatchable exceptions if you
+	// attempt to add expando properties to them.
+	noData: {
+		"applet": true,
+		"embed": true,
+		// Ban all objects except for Flash (which handle expandos)
+		"object": "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+	},
+
+	hasData: function( elem ) {
+		elem = elem.nodeType ? jQuery.cache[ elem[jQuery.expando] ] : elem[ jQuery.expando ];
+		return !!elem && !isEmptyDataObject( elem );
+	},
+
+	data: function( elem, name, data ) {
+		return internalData( elem, name, data );
+	},
+
+	removeData: function( elem, name ) {
+		return internalRemoveData( elem, name );
+	},
+
+	// For internal use only.
+	_data: function( elem, name, data ) {
+		return internalData( elem, name, data, true );
+	},
+
+	_removeData: function( elem, name ) {
+		return internalRemoveData( elem, name, true );
+	},
+
+	// A method for determining if a DOM node can handle the data expando
+	acceptData: function( elem ) {
+		// Do not set data on non-element because it will not be cleared (#8335).
+		if ( elem.nodeType && elem.nodeType !== 1 && elem.nodeType !== 9 ) {
+			return false;
+		}
+
+		var noData = elem.nodeName && jQuery.noData[ elem.nodeName.toLowerCase() ];
+
+		// nodes accept data unless otherwise specified; rejection can be conditional
+		return !noData || noData !== true && elem.getAttribute("classid") === noData;
+	}
+});
+
+jQuery.fn.extend({
+	data: function( key, value ) {
+		var attrs, name,
+			data = null,
+			i = 0,
+			elem = this[0];
+
+		// Special expections of .data basically thwart jQuery.access,
+		// so implement the relevant behavior ourselves
+
+		// Gets all values
+		if ( key === undefined ) {
+			if ( this.length ) {
+				data = jQuery.data( elem );
+
+				if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {
+					attrs = elem.attributes;
+					for ( ; i < attrs.length; i++ ) {
+						name = attrs[i].name;
+
+						if ( name.indexOf("data-") === 0 ) {
+							name = jQuery.camelCase( name.slice(5) );
+
+							dataAttr( elem, name, data[ name ] );
+						}
+					}
+					jQuery._data( elem, "parsedAttrs", true );
+				}
+			}
+
+			return data;
+		}
+
+		// Sets multiple values
+		if ( typeof key === "object" ) {
+			return this.each(function() {
+				jQuery.data( this, key );
+			});
+		}
+
+		return arguments.length > 1 ?
+
+			// Sets one value
+			this.each(function() {
+				jQuery.data( this, key, value );
+			}) :
+
+			// Gets one value
+			// Try to fetch any internally stored data first
+			elem ? dataAttr( elem, key, jQuery.data( elem, key ) ) : null;
+	},
+
+	removeData: function( key ) {
+		return this.each(function() {
+			jQuery.removeData( this, key );
+		});
+	}
+});
+
+function dataAttr( elem, key, data ) {
+	// If nothing was found internally, try to fetch any
+	// data from the HTML5 data-* attribute
+	if ( data === undefined && elem.nodeType === 1 ) {
+
+		var name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
+
+		data = elem.getAttribute( name );
+
+		if ( typeof data === "string" ) {
+			try {
+				data = data === "true" ? true :
+					data === "false" ? false :
+					data === "null" ? null :
+					// Only convert to a number if it doesn't change the string
+					+data + "" === data ? +data :
+					rbrace.test( data ) ? jQuery.parseJSON( data ) :
+						data;
+			} catch( e ) {}
+
+			// Make sure we set the data so it isn't changed later
+			jQuery.data( elem, key, data );
+
+		} else {
+			data = undefined;
+		}
+	}
+
+	return data;
+}
+
+// checks a cache object for emptiness
+function isEmptyDataObject( obj ) {
+	var name;
+	for ( name in obj ) {
+
+		// if the public data object is empty, the private is still empty
+		if ( name === "data" && jQuery.isEmptyObject( obj[name] ) ) {
+			continue;
+		}
+		if ( name !== "toJSON" ) {
+			return false;
+		}
+	}
+
+	return true;
+}
+jQuery.extend({
+	queue: function( elem, type, data ) {
+		var queue;
+
+		if ( elem ) {
+			type = ( type || "fx" ) + "queue";
+			queue = jQuery._data( elem, type );
+
+			// Speed up dequeue by getting out quickly if this is just a lookup
+			if ( data ) {
+				if ( !queue || jQuery.isArray(data) ) {
+					queue = jQuery._data( elem, type, jQuery.makeArray(data) );
+				} else {
+					queue.push( data );
+				}
+			}
+			return queue || [];
+		}
+	},
+
+	dequeue: function( elem, type ) {
+		type = type || "fx";
+
+		var queue = jQuery.queue( elem, type ),
+			startLength = queue.length,
+			fn = queue.shift(),
+			hooks = jQuery._queueHooks( elem, type ),
+			next = function() {
+				jQuery.dequeue( elem, type );
+			};
+
+		// If the fx queue is dequeued, always remove the progress sentinel
+		if ( fn === "inprogress" ) {
+			fn = queue.shift();
+			startLength--;
+		}
+
+		hooks.cur = fn;
+		if ( fn ) {
+
+			// Add a progress sentinel to prevent the fx queue from being
+			// automatically dequeued
+			if ( type === "fx" ) {
+				queue.unshift( "inprogress" );
+			}
+
+			// clear up the last queue stop function
+			delete hooks.stop;
+			fn.call( elem, next, hooks );
+		}
+
+		if ( !startLength && hooks ) {
+			hooks.empty.fire();
+		}
+	},
+
+	// not intended for public consumption - generates a queueHooks object, or returns the current one
+	_queueHooks: function( elem, type ) {
+		var key = type + "queueHooks";
+		return jQuery._data( elem, key ) || jQuery._data( elem, key, {
+			empty: jQuery.Callbacks("once memory").add(function() {
+				jQuery._removeData( elem, type + "queue" );
+				jQuery._removeData( elem, key );
+			})
+		});
+	}
+});
+
+jQuery.fn.extend({
+	queue: function( type, data ) {
+		var setter = 2;
+
+		if ( typeof type !== "string" ) {
+			data = type;
+			type = "fx";
+			setter--;
+		}
+
+		if ( arguments.length < setter ) {
+			return jQuery.queue( this[0], type );
+		}
+
+		return data === undefined ?
+			this :
+			this.each(function() {
+				var queue = jQuery.queue( this, type, data );
+
+				// ensure a hooks for this queue
+				jQuery._queueHooks( this, type );
+
+				if ( type === "fx" && queue[0] !== "inprogress" ) {
+					jQuery.dequeue( this, type );
+				}
+			});
+	},
+	dequeue: function( type ) {
+		return this.each(function() {
+			jQuery.dequeue( this, type );
+		});
+	},
+	// Based off of the plugin by Clint Helfers, with permission.
+	// http://blindsignals.com/index.php/2009/07/jquery-delay/
+	delay: function( time, type ) {
+		time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
+		type = type || "fx";
+
+		return this.queue( type, function( next, hooks ) {
+			var timeout = setTimeout( next, time );
+			hooks.stop = function() {
+				clearTimeout( timeout );
+			};
+		});
+	},
+	clearQueue: function( type ) {
+		return this.queue( type || "fx", [] );
+	},
+	// Get a promise resolved when queues of a certain type
+	// are emptied (fx is the type by default)
+	promise: function( type, obj ) {
+		var tmp,
+			count = 1,
+			defer = jQuery.Deferred(),
+			elements = this,
+			i = this.length,
+			resolve = function() {
+				if ( !( --count ) ) {
+					defer.resolveWith( elements, [ elements ] );
+				}
+			};
+
+		if ( typeof type !== "string" ) {
+			obj = type;
+			type = undefined;
+		}
+		type = type || "fx";
+
+		while( i-- ) {
+			tmp = jQuery._data( elements[ i ], type + "queueHooks" );
+			if ( tmp && tmp.empty ) {
+				count++;
+				tmp.empty.add( resolve );
+			}
+		}
+		resolve();
+		return defer.promise( obj );
+	}
+});
+var nodeHook, boolHook,
+	rclass = /[\t\r\n\f]/g,
+	rreturn = /\r/g,
+	rfocusable = /^(?:input|select|textarea|button|object)$/i,
+	rclickable = /^(?:a|area)$/i,
+	ruseDefault = /^(?:checked|selected)$/i,
+	getSetAttribute = jQuery.support.getSetAttribute,
+	getSetInput = jQuery.support.input;
+
+jQuery.fn.extend({
+	attr: function( name, value ) {
+		return jQuery.access( this, jQuery.attr, name, value, arguments.length > 1 );
+	},
+
+	removeAttr: function( name ) {
+		return this.each(function() {
+			jQuery.removeAttr( this, name );
+		});
+	},
+
+	prop: function( name, value ) {
+		return jQuery.access( this, jQuery.prop, name, value, arguments.length > 1 );
+	},
+
+	removeProp: function( name ) {
+		name = jQuery.propFix[ name ] || name;
+		return this.each(function() {
+			// try/catch handles cases where IE balks (such as removing a property on window)
+			try {
+				this[ name ] = undefined;
+				delete this[ name ];
+			} catch( e ) {}
+		});
+	},
+
+	addClass: function( value ) {
+		var classes, elem, cur, clazz, j,
+			i = 0,
+			len = this.length,
+			proceed = typeof value === "string" && value;
+
+		if ( jQuery.isFunction( value ) ) {
+			return this.each(function( j ) {
+				jQuery( this ).addClass( value.call( this, j, this.className ) );
+			});
+		}
+
+		if ( proceed ) {
+			// The disjunction here is for better compressibility (see removeClass)
+			classes = ( value || "" ).match( core_rnotwhite ) || [];
+
+			for ( ; i < len; i++ ) {
+				elem = this[ i ];
+				cur = elem.nodeType === 1 && ( elem.className ?
+					( " " + elem.className + " " ).replace( rclass, " " ) :
+					" "
+				);
+
+				if ( cur ) {
+					j = 0;
+					while ( (clazz = classes[j++]) ) {
+						if ( cur.indexOf( " " + clazz + " " ) < 0 ) {
+							cur += clazz + " ";
+						}
+					}
+					elem.className = jQuery.trim( cur );
+
+				}
+			}
+		}
+
+		return this;
+	},
+
+	removeClass: function( value ) {
+		var classes, elem, cur, clazz, j,
+			i = 0,
+			len = this.length,
+			proceed = arguments.length === 0 || typeof value === "string" && value;
+
+		if ( jQuery.isFunction( value ) ) {
+			return this.each(function( j ) {
+				jQuery( this ).removeClass( value.call( this, j, this.className ) );
+			});
+		}
+		if ( proceed ) {
+			classes = ( value || "" ).match( core_rnotwhite ) || [];
+
+			for ( ; i < len; i++ ) {
+				elem = this[ i ];
+				// This expression is here for better compressibility (see addClass)
+				cur = elem.nodeType === 1 && ( elem.className ?
+					( " " + elem.className + " " ).replace( rclass, " " ) :
+					""
+				);
+
+				if ( cur ) {
+					j = 0;
+					while ( (clazz = classes[j++]) ) {
+						// Remove *all* instances
+						while ( cur.indexOf( " " + clazz + " " ) >= 0 ) {
+							cur = cur.replace( " " + clazz + " ", " " );
+						}
+					}
+					elem.className = value ? jQuery.trim( cur ) : "";
+				}
+			}
+		}
+
+		return this;
+	},
+
+	toggleClass: function( value, stateVal ) {
+		var type = typeof value,
+			isBool = typeof stateVal === "boolean";
+
+		if ( jQuery.isFunction( value ) ) {
+			return this.each(function( i ) {
+				jQuery( this ).toggleClass( value.call(this, i, this.className, stateVal), stateVal );
+			});
+		}
+
+		return this.each(function() {
+			if ( type === "string" ) {
+				// toggle individual class names
+				var className,
+					i = 0,
+					self = jQuery( this ),
+					state = stateVal,
+					classNames = value.match( core_rnotwhite ) || [];
+
+				while ( (className = classNames[ i++ ]) ) {
+					// check each className given, space separated list
+					state = isBool ? state : !self.hasClass( className );
+					self[ state ? "addClass" : "removeClass" ]( className );
+				}
+
+			// Toggle whole class name
+			} else if ( type === core_strundefined || type === "boolean" ) {
+				if ( this.className ) {
+					// store className if set
+					jQuery._data( this, "__className__", this.className );
+				}
+
+				// If the element has a class name or if we're passed "false",
+				// then remove the whole classname (if there was one, the above saved it).
+				// Otherwise bring back whatever was previously saved (if anything),
+				// falling back to the empty string if nothing was stored.
+				this.className = this.className || value === false ? "" : jQuery._data( this, "__className__" ) || "";
+			}
+		});
+	},
+
+	hasClass: function( selector ) {
+		var className = " " + selector + " ",
+			i = 0,
+			l = this.length;
+		for ( ; i < l; i++ ) {
+			if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) >= 0 ) {
+				return true;
+			}
+		}
+
+		return false;
+	},
+
+	val: function( value ) {
+		var ret, hooks, isFunction,
+			elem = this[0];
+
+		if ( !arguments.length ) {
+			if ( elem ) {
+				hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];
+
+				if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
+					return ret;
+				}
+
+				ret = elem.value;
+
+				return typeof ret === "string" ?
+					// handle most common string cases
+					ret.replace(rreturn, "") :
+					// handle cases where value is null/undef or number
+					ret == null ? "" : ret;
+			}
+
+			return;
+		}
+
+		isFunction = jQuery.isFunction( value );
+
+		return this.each(function( i ) {
+			var val;
+
+			if ( this.nodeType !== 1 ) {
+				return;
+			}
+
+			if ( isFunction ) {
+				val = value.call( this, i, jQuery( this ).val() );
+			} else {
+				val = value;
+			}
+
+			// Treat null/undefined as ""; convert numbers to string
+			if ( val == null ) {
+				val = "";
+			} else if ( typeof val === "number" ) {
+				val += "";
+			} else if ( jQuery.isArray( val ) ) {
+				val = jQuery.map(val, function ( value ) {
+					return value == null ? "" : value + "";
+				});
+			}
+
+			hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];
+
+			// If set returns undefined, fall back to normal setting
+			if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
+				this.value = val;
+			}
+		});
+	}
+});
+
+jQuery.extend({
+	valHooks: {
+		option: {
+			get: function( elem ) {
+				// Use proper attribute retrieval(#6932, #12072)
+				var val = jQuery.find.attr( elem, "value" );
+				return val != null ?
+					val :
+					elem.text;
+			}
+		},
+		select: {
+			get: function( elem ) {
+				var value, option,
+					options = elem.options,
+					index = elem.selectedIndex,
+					one = elem.type === "select-one" || index < 0,
+					values = one ? null : [],
+					max = one ? index + 1 : options.length,
+					i = index < 0 ?
+						max :
+						one ? index : 0;
+
+				// Loop through all the selected options
+				for ( ; i < max; i++ ) {
+					option = options[ i ];
+
+					// oldIE doesn't update selected after form reset (#2551)
+					if ( ( option.selected || i === index ) &&
+							// Don't return options that are disabled or in a disabled optgroup
+							( jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null ) &&
+							( !option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" ) ) ) {
+
+						// Get the specific value for the option
+						value = jQuery( option ).val();
+
+						// We don't need an array for one selects
+						if ( one ) {
+							return value;
+						}
+
+						// Multi-Selects return an array
+						values.push( value );
+					}
+				}
+
+				return values;
+			},
+
+			set: function( elem, value ) {
+				var optionSet, option,
+					options = elem.options,
+					values = jQuery.makeArray( value ),
+					i = options.length;
+
+				while ( i-- ) {
+					option = options[ i ];
+					if ( (option.selected = jQuery.inArray( jQuery(option).val(), values ) >= 0) ) {
+						optionSet = true;
+					}
+				}
+
+				// force browsers to behave consistently when non-matching value is set
+				if ( !optionSet ) {
+					elem.selectedIndex = -1;
+				}
+				return values;
+			}
+		}
+	},
+
+	attr: function( elem, name, value ) {
+		var hooks, ret,
+			nType = elem.nodeType;
+
+		// don't get/set attributes on text, comment and attribute nodes
+		if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
+			return;
+		}
+
+		// Fallback to prop when attributes are not supported
+		if ( typeof elem.getAttribute === core_strundefined ) {
+			return jQuery.prop( elem, name, value );
+		}
+
+		// All attributes are lowercase
+		// Grab necessary hook if one is defined
+		if ( nType !== 1 || !jQuery.isXMLDoc( elem ) ) {
+			name = name.toLowerCase();
+			hooks = jQuery.attrHooks[ name ] ||
+				( jQuery.expr.match.bool.test( name ) ? boolHook : nodeHook );
+		}
+
+		if ( value !== undefined ) {
+
+			if ( value === null ) {
+				jQuery.removeAttr( elem, name );
+
+			} else if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
+				return ret;
+
+			} else {
+				elem.setAttribute( name, value + "" );
+				return value;
+			}
+
+		} else if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {
+			return ret;
+
+		} else {
+			ret = jQuery.find.attr( elem, name );
+
+			// Non-existent attributes return null, we normalize to undefined
+			return ret == null ?
+				undefined :
+				ret;
+		}
+	},
+
+	removeAttr: function( elem, value ) {
+		var name, propName,
+			i = 0,
+			attrNames = value && value.match( core_rnotwhite );
+
+		if ( attrNames && elem.nodeType === 1 ) {
+			while ( (name = attrNames[i++]) ) {
+				propName = jQuery.propFix[ name ] || name;
+
+				// Boolean attributes get special treatment (#10870)
+				if ( jQuery.expr.match.bool.test( name ) ) {
+					// Set corresponding property to false
+					if ( getSetInput && getSetAttribute || !ruseDefault.test( name ) ) {
+						elem[ propName ] = false;
+					// Support: IE<9
+					// Also clear defaultChecked/defaultSelected (if appropriate)
+					} else {
+						elem[ jQuery.camelCase( "default-" + name ) ] =
+							elem[ propName ] = false;
+					}
+
+				// See #9699 for explanation of this approach (setting first, then removal)
+				} else {
+					jQuery.attr( elem, name, "" );
+				}
+
+				elem.removeAttribute( getSetAttribute ? name : propName );
+			}
+		}
+	},
+
+	attrHooks: {
+		type: {
+			set: function( elem, value ) {
+				if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {
+					// Setting the type on a radio button after the value resets the value in IE6-9
+					// Reset value to default in case type is set after value during creation
+					var val = elem.value;
+					elem.setAttribute( "type", value );
+					if ( val ) {
+						elem.value = val;
+					}
+					return value;
+				}
+			}
+		}
+	},
+
+	propFix: {
+		"for": "htmlFor",
+		"class": "className"
+	},
+
+	prop: function( elem, name, value ) {
+		var ret, hooks, notxml,
+			nType = elem.nodeType;
+
+		// don't get/set properties on text, comment and attribute nodes
+		if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
+			return;
+		}
+
+		notxml = nType !== 1 || !jQuery.isXMLDoc( elem );
+
+		if ( notxml ) {
+			// Fix name and attach hooks
+			name = jQuery.propFix[ name ] || name;
+			hooks = jQuery.propHooks[ name ];
+		}
+
+		if ( value !== undefined ) {
+			return hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ?
+				ret :
+				( elem[ name ] = value );
+
+		} else {
+			return hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ?
+				ret :
+				elem[ name ];
+		}
+	},
+
+	propHooks: {
+		tabIndex: {
+			get: function( elem ) {
+				// elem.tabIndex doesn't always return the correct value when it hasn't been explicitly set
+				// http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
+				// Use proper attribute retrieval(#12072)
+				var tabindex = jQuery.find.attr( elem, "tabindex" );
+
+				return tabindex ?
+					parseInt( tabindex, 10 ) :
+					rfocusable.test( elem.nodeName ) || rclickable.test( elem.nodeName ) && elem.href ?
+						0 :
+						-1;
+			}
+		}
+	}
+});
+
+// Hooks for boolean attributes
+boolHook = {
+	set: function( elem, value, name ) {
+		if ( value === false ) {
+			// Remove boolean attributes when set to false
+			jQuery.removeAttr( elem, name );
+		} else if ( getSetInput && getSetAttribute || !ruseDefault.test( name ) ) {
+			// IE<8 needs the *property* name
+			elem.setAttribute( !getSetAttribute && jQuery.propFix[ name ] || name, name );
+
+		// Use defaultChecked and defaultSelected for oldIE
+		} else {
+			elem[ jQuery.camelCase( "default-" + name ) ] = elem[ name ] = true;
+		}
+
+		return name;
+	}
+};
+jQuery.each( jQuery.expr.match.bool.source.match( /\w+/g ), function( i, name ) {
+	var getter = jQuery.expr.attrHandle[ name ] || jQuery.find.attr;
+
+	jQuery.expr.attrHandle[ name ] = getSetInput && getSetAttribute || !ruseDefault.test( name ) ?
+		function( elem, name, isXML ) {
+			var fn = jQuery.expr.attrHandle[ name ],
+				ret = isXML ?
+					undefined :
+					/* jshint eqeqeq: false */
+					(jQuery.expr.attrHandle[ name ] = undefined) !=
+						getter( elem, name, isXML ) ?
+
+						name.toLowerCase() :
+						null;
+			jQuery.expr.attrHandle[ name ] = fn;
+			return ret;
+		} :
+		function( elem, name, isXML ) {
+			return isXML ?
+				undefined :
+				elem[ jQuery.camelCase( "default-" + name ) ] ?
+					name.toLowerCase() :
+					null;
+		};
+});
+
+// fix oldIE attroperties
+if ( !getSetInput || !getSetAttribute ) {
+	jQuery.attrHooks.value = {
+		set: function( elem, value, name ) {
+			if ( jQuery.nodeName( elem, "input" ) ) {
+				// Does not return so that setAttribute is also used
+				elem.defaultValue = value;
+			} else {
+				// Use nodeHook if defined (#1954); otherwise setAttribute is fine
+				return nodeHook && nodeHook.set( elem, value, name );
+			}
+		}
+	};
+}
+
+// IE6/7 do not support getting/setting some attributes with get/setAttribute
+if ( !getSetAttribute ) {
+
+	// Use this for any attribute in IE6/7
+	// This fixes almost every IE6/7 issue
+	nodeHook = {
+		set: function( elem, value, name ) {
+			// Set the existing or create a new attribute node
+			var ret = elem.getAttributeNode( name );
+			if ( !ret ) {
+				elem.setAttributeNode(
+					(ret = elem.ownerDocument.createAttribute( name ))
+				);
+			}
+
+			ret.value = value += "";
+
+			// Break association with cloned elements by also using setAttribute (#9646)
+			return name === "value" || value === elem.getAttribute( name ) ?
+				value :
+				undefined;
+		}
+	};
+	jQuery.expr.attrHandle.id = jQuery.expr.attrHandle.name = jQuery.expr.attrHandle.coords =
+		// Some attributes are constructed with empty-string values when not defined
+		function( elem, name, isXML ) {
+			var ret;
+			return isXML ?
+				undefined :
+				(ret = elem.getAttributeNode( name )) && ret.value !== "" ?
+					ret.value :
+					null;
+		};
+	jQuery.valHooks.button = {
+		get: function( elem, name ) {
+			var ret = elem.getAttributeNode( name );
+			return ret && ret.specified ?
+				ret.value :
+				undefined;
+		},
+		set: nodeHook.set
+	};
+
+	// Set contenteditable to false on removals(#10429)
+	// Setting to empty string throws an error as an invalid value
+	jQuery.attrHooks.contenteditable = {
+		set: function( elem, value, name ) {
+			nodeHook.set( elem, value === "" ? false : value, name );
+		}
+	};
+
+	// Set width and height to auto instead of 0 on empty string( Bug #8150 )
+	// This is for removals
+	jQuery.each([ "width", "height" ], function( i, name ) {
+		jQuery.attrHooks[ name ] = {
+			set: function( elem, value ) {
+				if ( value === "" ) {
+					elem.setAttribute( name, "auto" );
+					return value;
+				}
+			}
+		};
+	});
+}
+
+
+// Some attributes require a special call on IE
+// http://msdn.microsoft.com/en-us/library/ms536429%28VS.85%29.aspx
+if ( !jQuery.support.hrefNormalized ) {
+	// href/src property should get the full normalized URL (#10299/#12915)
+	jQuery.each([ "href", "src" ], function( i, name ) {
+		jQuery.propHooks[ name ] = {
+			get: function( elem ) {
+				return elem.getAttribute( name, 4 );
+			}
+		};
+	});
+}
+
+if ( !jQuery.support.style ) {
+	jQuery.attrHooks.style = {
+		get: function( elem ) {
+			// Return undefined in the case of empty string
+			// Note: IE uppercases css property names, but if we were to .toLowerCase()
+			// .cssText, that would destroy case senstitivity in URL's, like in "background"
+			return elem.style.cssText || undefined;
+		},
+		set: function( elem, value ) {
+			return ( elem.style.cssText = value + "" );
+		}
+	};
+}
+
+// Safari mis-reports the default selected property of an option
+// Accessing the parent's selectedIndex property fixes it
+if ( !jQuery.support.optSelected ) {
+	jQuery.propHooks.selected = {
+		get: function( elem ) {
+			var parent = elem.parentNode;
+
+			if ( parent ) {
+				parent.selectedIndex;
+
+				// Make sure that it also works with optgroups, see #5701
+				if ( parent.parentNode ) {
+					parent.parentNode.selectedIndex;
+				}
+			}
+			return null;
+		}
+	};
+}
+
+jQuery.each([
+	"tabIndex",
+	"readOnly",
+	"maxLength",
+	"cellSpacing",
+	"cellPadding",
+	"rowSpan",
+	"colSpan",
+	"useMap",
+	"frameBorder",
+	"contentEditable"
+], function() {
+	jQuery.propFix[ this.toLowerCase() ] = this;
+});
+
+// IE6/7 call enctype encoding
+if ( !jQuery.support.enctype ) {
+	jQuery.propFix.enctype = "encoding";
+}
+
+// Radios and checkboxes getter/setter
+jQuery.each([ "radio", "checkbox" ], function() {
+	jQuery.valHooks[ this ] = {
+		set: function( elem, value ) {
+			if ( jQuery.isArray( value ) ) {
+				return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 );
+			}
+		}
+	};
+	if ( !jQuery.support.checkOn ) {
+		jQuery.valHooks[ this ].get = function( elem ) {
+			// Support: Webkit
+			// "" is returned instead of "on" if a value isn't specified
+			return elem.getAttribute("value") === null ? "on" : elem.value;
+		};
+	}
+});
+var rformElems = /^(?:input|select|textarea)$/i,
+	rkeyEvent = /^key/,
+	rmouseEvent = /^(?:mouse|contextmenu)|click/,
+	rfocusMorph = /^(?:focusinfocus|focusoutblur)$/,
+	rtypenamespace = /^([^.]*)(?:\.(.+)|)$/;
+
+function returnTrue() {
+	return true;
+}
+
+function returnFalse() {
+	return false;
+}
+
+function safeActiveElement() {
+	try {
+		return document.activeElement;
+	} catch ( err ) { }
+}
+
+/*
+ * Helper functions for managing events -- not part of the public interface.
+ * Props to Dean Edwards' addEvent library for many of the ideas.
+ */
+jQuery.event = {
+
+	global: {},
+
+	add: function( elem, types, handler, data, selector ) {
+		var tmp, events, t, handleObjIn,
+			special, eventHandle, handleObj,
+			handlers, type, namespaces, origType,
+			elemData = jQuery._data( elem );
+
+		// Don't attach events to noData or text/comment nodes (but allow plain objects)
+		if ( !elemData ) {
+			return;
+		}
+
+		// Caller can pass in an object of custom data in lieu of the handler
+		if ( handler.handler ) {
+			handleObjIn = handler;
+			handler = handleObjIn.handler;
+			selector = handleObjIn.selector;
+		}
+
+		// Make sure that the handler has a unique ID, used to find/remove it later
+		if ( !handler.guid ) {
+			handler.guid = jQuery.guid++;
+		}
+
+		// Init the element's event structure and main handler, if this is the first
+		if ( !(events = elemData.events) ) {
+			events = elemData.events = {};
+		}
+		if ( !(eventHandle = elemData.handle) ) {
+			eventHandle = elemData.handle = function( e ) {
+				// Discard the second event of a jQuery.event.trigger() and
+				// when an event is called after a page has unloaded
+				return typeof jQuery !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ?
+					jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
+					undefined;
+			};
+			// Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
+			eventHandle.elem = elem;
+		}
+
+		// Handle multiple events separated by a space
+		types = ( types || "" ).match( core_rnotwhite ) || [""];
+		t = types.length;
+		while ( t-- ) {
+			tmp = rtypenamespace.exec( types[t] ) || [];
+			type = origType = tmp[1];
+			namespaces = ( tmp[2] || "" ).split( "." ).sort();
+
+			// There *must* be a type, no attaching namespace-only handlers
+			if ( !type ) {
+				continue;
+			}
+
+			// If event changes its type, use the special event handlers for the changed type
+			special = jQuery.event.special[ type ] || {};
+
+			// If selector defined, determine special event api type, otherwise given type
+			type = ( selector ? special.delegateType : special.bindType ) || type;
+
+			// Update special based on newly reset type
+			special = jQuery.event.special[ type ] || {};
+
+			// handleObj is passed to all event handlers
+			handleObj = jQuery.extend({
+				type: type,
+				origType: origType,
+				data: data,
+				handler: handler,
+				guid: handler.guid,
+				selector: selector,
+				needsContext: selector && jQuery.expr.match.needsContext.test( selector ),
+				namespace: namespaces.join(".")
+			}, handleObjIn );
+
+			// Init the event handler queue if we're the first
+			if ( !(handlers = events[ type ]) ) {
+				handlers = events[ type ] = [];
+				handlers.delegateCount = 0;
+
+				// Only use addEventListener/attachEvent if the special events handler returns false
+				if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
+					// Bind the global event handler to the element
+					if ( elem.addEventListener ) {
+						elem.addEventListener( type, eventHandle, false );
+
+					} else if ( elem.attachEvent ) {
+						elem.attachEvent( "on" + type, eventHandle );
+					}
+				}
+			}
+
+			if ( special.add ) {
+				special.add.call( elem, handleObj );
+
+				if ( !handleObj.handler.guid ) {
+					handleObj.handler.guid = handler.guid;
+				}
+			}
+
+			// Add to the element's handler list, delegates in front
+			if ( selector ) {
+				handlers.splice( handlers.delegateCount++, 0, handleObj );
+			} else {
+				handlers.push( handleObj );
+			}
+
+			// Keep track of which events have ever been used, for event optimization
+			jQuery.event.global[ type ] = true;
+		}
+
+		// Nullify elem to prevent memory leaks in IE
+		elem = null;
+	},
+
+	// Detach an event or set of events from an element
+	remove: function( elem, types, handler, selector, mappedTypes ) {
+		var j, handleObj, tmp,
+			origCount, t, events,
+			special, handlers, type,
+			namespaces, origType,
+			elemData = jQuery.hasData( elem ) && jQuery._data( elem );
+
+		if ( !elemData || !(events = elemData.events) ) {
+			return;
+		}
+
+		// Once for each type.namespace in types; type may be omitted
+		types = ( types || "" ).match( core_rnotwhite ) || [""];
+		t = types.length;
+		while ( t-- ) {
+			tmp = rtypenamespace.exec( types[t] ) || [];
+			type = origType = tmp[1];
+			namespaces = ( tmp[2] || "" ).split( "." ).sort();
+
+			// Unbind all events (on this namespace, if provided) for the element
+			if ( !type ) {
+				for ( type in events ) {
+					jQuery.event.remove( elem, type + types[ t ], handler, selector, true );
+				}
+				continue;
+			}
+
+			special = jQuery.event.special[ type ] || {};
+			type = ( selector ? special.delegateType : special.bindType ) || type;
+			handlers = events[ type ] || [];
+			tmp = tmp[2] && new RegExp( "(^|\\.)" + namespaces.join("\\.(?:.*\\.|)") + "(\\.|$)" );
+
+			// Remove matching events
+			origCount = j = handlers.length;
+			while ( j-- ) {
+				handleObj = handlers[ j ];
+
+				if ( ( mappedTypes || origType === handleObj.origType ) &&
+					( !handler || handler.guid === handleObj.guid ) &&
+					( !tmp || tmp.test( handleObj.namespace ) ) &&
+					( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) ) {
+					handlers.splice( j, 1 );
+
+					if ( handleObj.selector ) {
+						handlers.delegateCount--;
+					}
+					if ( special.remove ) {
+						special.remove.call( elem, handleObj );
+					}
+				}
+			}
+
+			// Remove generic event handler if we removed something and no more handlers exist
+			// (avoids potential for endless recursion during removal of special event handlers)
+			if ( origCount && !handlers.length ) {
+				if ( !special.teardown || special.teardown.call( elem, namespaces, elemData.handle ) === false ) {
+					jQuery.removeEvent( elem, type, elemData.handle );
+				}
+
+				delete events[ type ];
+			}
+		}
+
+		// Remove the expando if it's no longer used
+		if ( jQuery.isEmptyObject( events ) ) {
+			delete elemData.handle;
+
+			// removeData also checks for emptiness and clears the expando if empty
+			// so use it instead of delete
+			jQuery._removeData( elem, "events" );
+		}
+	},
+
+	trigger: function( event, data, elem, onlyHandlers ) {
+		var handle, ontype, cur,
+			bubbleType, special, tmp, i,
+			eventPath = [ elem || document ],
+			type = core_hasOwn.call( event, "type" ) ? event.type : event,
+			namespaces = core_hasOwn.call( event, "namespace" ) ? event.namespace.split(".") : [];
+
+		cur = tmp = elem = elem || document;
+
+		// Don't do events on text and comment nodes
+		if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
+			return;
+		}
+
+		// focus/blur morphs to focusin/out; ensure we're not firing them right now
+		if ( rfocusMorph.test( type + jQuery.event.triggered ) ) {
+			return;
+		}
+
+		if ( type.indexOf(".") >= 0 ) {
+			// Namespaced trigger; create a regexp to match event type in handle()
+			namespaces = type.split(".");
+			type = namespaces.shift();
+			namespaces.sort();
+		}
+		ontype = type.indexOf(":") < 0 && "on" + type;
+
+		// Caller can pass in a jQuery.Event object, Object, or just an event type string
+		event = event[ jQuery.expando ] ?
+			event :
+			new jQuery.Event( type, typeof event === "object" && event );
+
+		// Trigger bitmask: & 1 for native handlers; & 2 for jQuery (always true)
+		event.isTrigger = onlyHandlers ? 2 : 3;
+		event.namespace = namespaces.join(".");
+		event.namespace_re = event.namespace ?
+			new RegExp( "(^|\\.)" + namespaces.join("\\.(?:.*\\.|)") + "(\\.|$)" ) :
+			null;
+
+		// Clean up the event in case it is being reused
+		event.result = undefined;
+		if ( !event.target ) {
+			event.target = elem;
+		}
+
+		// Clone any incoming data and prepend the event, creating the handler arg list
+		data = data == null ?
+			[ event ] :
+			jQuery.makeArray( data, [ event ] );
+
+		// Allow special events to draw outside the lines
+		special = jQuery.event.special[ type ] || {};
+		if ( !onlyHandlers && special.trigger && special.trigger.apply( elem, data ) === false ) {
+			return;
+		}
+
+		// Determine event propagation path in advance, per W3C events spec (#9951)
+		// Bubble up to document, then to window; watch for a global ownerDocument var (#9724)
+		if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) {
+
+			bubbleType = special.delegateType || type;
+			if ( !rfocusMorph.test( bubbleType + type ) ) {
+				cur = cur.parentNode;
+			}
+			for ( ; cur; cur = cur.parentNode ) {
+				eventPath.push( cur );
+				tmp = cur;
+			}
+
+			// Only add window if we got to document (e.g., not plain obj or detached DOM)
+			if ( tmp === (elem.ownerDocument || document) ) {
+				eventPath.push( tmp.defaultView || tmp.parentWindow || window );
+			}
+		}
+
+		// Fire handlers on the event path
+		i = 0;
+		while ( (cur = eventPath[i++]) && !event.isPropagationStopped() ) {
+
+			event.type = i > 1 ?
+				bubbleType :
+				special.bindType || type;
+
+			// jQuery handler
+			handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" );
+			if ( handle ) {
+				handle.apply( cur, data );
+			}
+
+			// Native handler
+			handle = ontype && cur[ ontype ];
+			if ( handle && jQuery.acceptData( cur ) && handle.apply && handle.apply( cur, data ) === false ) {
+				event.preventDefault();
+			}
+		}
+		event.type = type;
+
+		// If nobody prevented the default action, do it now
+		if ( !onlyHandlers && !event.isDefaultPrevented() ) {
+
+			if ( (!special._default || special._default.apply( eventPath.pop(), data ) === false) &&
+				jQuery.acceptData( elem ) ) {
+
+				// Call a native DOM method on the target with the same name name as the event.
+				// Can't use an .isFunction() check here because IE6/7 fails that test.
+				// Don't do default actions on window, that's where global variables be (#6170)
+				if ( ontype && elem[ type ] && !jQuery.isWindow( elem ) ) {
+
+					// Don't re-trigger an onFOO event when we call its FOO() method
+					tmp = elem[ ontype ];
+
+					if ( tmp ) {
+						elem[ ontype ] = null;
+					}
+
+					// Prevent re-triggering of the same event, since we already bubbled it above
+					jQuery.event.triggered = type;
+					try {
+						elem[ type ]();
+					} catch ( e ) {
+						// IE<9 dies on focus/blur to hidden element (#1486,#12518)
+						// only reproducible on winXP IE8 native, not IE9 in IE8 mode
+					}
+					jQuery.event.triggered = undefined;
+
+					if ( tmp ) {
+						elem[ ontype ] = tmp;
+					}
+				}
+			}
+		}
+
+		return event.result;
+	},
+
+	dispatch: function( event ) {
+
+		// Make a writable jQuery.Event from the native event object
+		event = jQuery.event.fix( event );
+
+		var i, ret, handleObj, matched, j,
+			handlerQueue = [],
+			args = core_slice.call( arguments ),
+			handlers = ( jQuery._data( this, "events" ) || {} )[ event.type ] || [],
+			special = jQuery.event.special[ event.type ] || {};
+
+		// Use the fix-ed jQuery.Event rather than the (read-only) native event
+		args[0] = event;
+		event.delegateTarget = this;
+
+		// Call the preDispatch hook for the mapped type, and let it bail if desired
+		if ( special.preDispatch && special.preDispatch.call( this, event ) === false ) {
+			return;
+		}
+
+		// Determine handlers
+		handlerQueue = jQuery.event.handlers.call( this, event, handlers );
+
+		// Run delegates first; they may want to stop propagation beneath us
+		i = 0;
+		while ( (matched = handlerQueue[ i++ ]) && !event.isPropagationStopped() ) {
+			event.currentTarget = matched.elem;
+
+			j = 0;
+			while ( (handleObj = matched.handlers[ j++ ]) && !event.isImmediatePropagationStopped() ) {
+
+				// Triggered event must either 1) have no namespace, or
+				// 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace).
+				if ( !event.namespace_re || event.namespace_re.test( handleObj.namespace ) ) {
+
+					event.handleObj = handleObj;
+					event.data = handleObj.data;
+
+					ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
+							.apply( matched.elem, args );
+
+					if ( ret !== undefined ) {
+						if ( (event.result = ret) === false ) {
+							event.preventDefault();
+							event.stopPropagation();
+						}
+					}
+				}
+			}
+		}
+
+		// Call the postDispatch hook for the mapped type
+		if ( special.postDispatch ) {
+			special.postDispatch.call( this, event );
+		}
+
+		return event.result;
+	},
+
+	handlers: function( event, handlers ) {
+		var sel, handleObj, matches, i,
+			handlerQueue = [],
+			delegateCount = handlers.delegateCount,
+			cur = event.target;
+
+		// Find delegate handlers
+		// Black-hole SVG <use> instance trees (#13180)
+		// Avoid non-left-click bubbling in Firefox (#3861)
+		if ( delegateCount && cur.nodeType && (!event.button || event.type !== "click") ) {
+
+			/* jshint eqeqeq: false */
+			for ( ; cur != this; cur = cur.parentNode || this ) {
+				/* jshint eqeqeq: true */
+
+				// Don't check non-elements (#13208)
+				// Don't process clicks on disabled elements (#6911, #8165, #11382, #11764)
+				if ( cur.nodeType === 1 && (cur.disabled !== true || event.type !== "click") ) {
+					matches = [];
+					for ( i = 0; i < delegateCount; i++ ) {
+						handleObj = handlers[ i ];
+
+						// Don't conflict with Object.prototype properties (#13203)
+						sel = handleObj.selector + " ";
+
+						if ( matches[ sel ] === undefined ) {
+							matches[ sel ] = handleObj.needsContext ?
+								jQuery( sel, this ).index( cur ) >= 0 :
+								jQuery.find( sel, this, null, [ cur ] ).length;
+						}
+						if ( matches[ sel ] ) {
+							matches.push( handleObj );
+						}
+					}
+					if ( matches.length ) {
+						handlerQueue.push({ elem: cur, handlers: matches });
+					}
+				}
+			}
+		}
+
+		// Add the remaining (directly-bound) handlers
+		if ( delegateCount < handlers.length ) {
+			handlerQueue.push({ elem: this, handlers: handlers.slice( delegateCount ) });
+		}
+
+		return handlerQueue;
+	},
+
+	fix: function( event ) {
+		if ( event[ jQuery.expando ] ) {
+			return event;
+		}
+
+		// Create a writable copy of the event object and normalize some properties
+		var i, prop, copy,
+			type = event.type,
+			originalEvent = event,
+			fixHook = this.fixHooks[ type ];
+
+		if ( !fixHook ) {
+			this.fixHooks[ type ] = fixHook =
+				rmouseEvent.test( type ) ? this.mouseHooks :
+				rkeyEvent.test( type ) ? this.keyHooks :
+				{};
+		}
+		copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props;
+
+		event = new jQuery.Event( originalEvent );
+
+		i = copy.length;
+		while ( i-- ) {
+			prop = copy[ i ];
+			event[ prop ] = originalEvent[ prop ];
+		}
+
+		// Support: IE<9
+		// Fix target property (#1925)
+		if ( !event.target ) {
+			event.target = originalEvent.srcElement || document;
+		}
+
+		// Support: Chrome 23+, Safari?
+		// Target should not be a text node (#504, #13143)
+		if ( event.target.nodeType === 3 ) {
+			event.target = event.target.parentNode;
+		}
+
+		// Support: IE<9
+		// For mouse/key events, metaKey==false if it's undefined (#3368, #11328)
+		event.metaKey = !!event.metaKey;
+
+		return fixHook.filter ? fixHook.filter( event, originalEvent ) : event;
+	},
+
+	// Includes some event props shared by KeyEvent and MouseEvent
+	props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),
+
+	fixHooks: {},
+
+	keyHooks: {
+		props: "char charCode key keyCode".split(" "),
+		filter: function( event, original ) {
+
+			// Add which for key events
+			if ( event.which == null ) {
+				event.which = original.charCode != null ? original.charCode : original.keyCode;
+			}
+
+			return event;
+		}
+	},
+
+	mouseHooks: {
+		props: "button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),
+		filter: function( event, original ) {
+			var body, eventDoc, doc,
+				button = original.button,
+				fromElement = original.fromElement;
+
+			// Calculate pageX/Y if missing and clientX/Y available
+			if ( event.pageX == null && original.clientX != null ) {
+				eventDoc = event.target.ownerDocument || document;
+				doc = eventDoc.documentElement;
+				body = eventDoc.body;
+
+				event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 );
+				event.pageY = original.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );
+			}
+
+			// Add relatedTarget, if necessary
+			if ( !event.relatedTarget && fromElement ) {
+				event.relatedTarget = fromElement === event.target ? original.toElement : fromElement;
+			}
+
+			// Add which for click: 1 === left; 2 === middle; 3 === right
+			// Note: button is not normalized, so don't use it
+			if ( !event.which && button !== undefined ) {
+				event.which = ( button & 1 ? 1 : ( button & 2 ? 3 : ( button & 4 ? 2 : 0 ) ) );
+			}
+
+			return event;
+		}
+	},
+
+	special: {
+		load: {
+			// Prevent triggered image.load events from bubbling to window.load
+			noBubble: true
+		},
+		focus: {
+			// Fire native event if possible so blur/focus sequence is correct
+			trigger: function() {
+				if ( this !== safeActiveElement() && this.focus ) {
+					try {
+						this.focus();
+						return false;
+					} catch ( e ) {
+						// Support: IE<9
+						// If we error on focus to hidden element (#1486, #12518),
+						// let .trigger() run the handlers
+					}
+				}
+			},
+			delegateType: "focusin"
+		},
+		blur: {
+			trigger: function() {
+				if ( this === safeActiveElement() && this.blur ) {
+					this.blur();
+					return false;
+				}
+			},
+			delegateType: "focusout"
+		},
+		click: {
+			// For checkbox, fire native event so checked state will be right
+			trigger: function() {
+				if ( jQuery.nodeName( this, "input" ) && this.type === "checkbox" && this.click ) {
+					this.click();
+					return false;
+				}
+			},
+
+			// For cross-browser consistency, don't fire native .click() on links
+			_default: function( event ) {
+				return jQuery.nodeName( event.target, "a" );
+			}
+		},
+
+		beforeunload: {
+			postDispatch: function( event ) {
+
+				// Even when returnValue equals to undefined Firefox will still show alert
+				if ( event.result !== undefined ) {
+					event.originalEvent.returnValue = event.result;
+				}
+			}
+		}
+	},
+
+	simulate: function( type, elem, event, bubble ) {
+		// Piggyback on a donor event to simulate a different one.
+		// Fake originalEvent to avoid donor's stopPropagation, but if the
+		// simulated event prevents default then we do the same on the donor.
+		var e = jQuery.extend(
+			new jQuery.Event(),
+			event,
+			{
+				type: type,
+				isSimulated: true,
+				originalEvent: {}
+			}
+		);
+		if ( bubble ) {
+			jQuery.event.trigger( e, null, elem );
+		} else {
+			jQuery.event.dispatch.call( elem, e );
+		}
+		if ( e.isDefaultPrevented() ) {
+			event.preventDefault();
+		}
+	}
+};
+
+jQuery.removeEvent = document.removeEventListener ?
+	function( elem, type, handle ) {
+		if ( elem.removeEventListener ) {
+			elem.removeEventListener( type, handle, false );
+		}
+	} :
+	function( elem, type, handle ) {
+		var name = "on" + type;
+
+		if ( elem.detachEvent ) {
+
+			// #8545, #7054, preventing memory leaks for custom events in IE6-8
+			// detachEvent needed property on element, by name of that event, to properly expose it to GC
+			if ( typeof elem[ name ] === core_strundefined ) {
+				elem[ name ] = null;
+			}
+
+			elem.detachEvent( name, handle );
+		}
+	};
+
+jQuery.Event = function( src, props ) {
+	// Allow instantiation without the 'new' keyword
+	if ( !(this instanceof jQuery.Event) ) {
+		return new jQuery.Event( src, props );
+	}
+
+	// Event object
+	if ( src && src.type ) {
+		this.originalEvent = src;
+		this.type = src.type;
+
+		// Events bubbling up the document may have been marked as prevented
+		// by a handler lower down the tree; reflect the correct value.
+		this.isDefaultPrevented = ( src.defaultPrevented || src.returnValue === false ||
+			src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse;
+
+	// Event type
+	} else {
+		this.type = src;
+	}
+
+	// Put explicitly provided properties onto the event object
+	if ( props ) {
+		jQuery.extend( this, props );
+	}
+
+	// Create a timestamp if incoming event doesn't have one
+	this.timeStamp = src && src.timeStamp || jQuery.now();
+
+	// Mark it as fixed
+	this[ jQuery.expando ] = true;
+};
+
+// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding
+// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
+jQuery.Event.prototype = {
+	isDefaultPrevented: returnFalse,
+	isPropagationStopped: returnFalse,
+	isImmediatePropagationStopped: returnFalse,
+
+	preventDefault: function() {
+		var e = this.originalEvent;
+
+		this.isDefaultPrevented = returnTrue;
+		if ( !e ) {
+			return;
+		}
+
+		// If preventDefault exists, run it on the original event
+		if ( e.preventDefault ) {
+			e.preventDefault();
+
+		// Support: IE
+		// Otherwise set the returnValue property of the original event to false
+		} else {
+			e.returnValue = false;
+		}
+	},
+	stopPropagation: function() {
+		var e = this.originalEvent;
+
+		this.isPropagationStopped = returnTrue;
+		if ( !e ) {
+			return;
+		}
+		// If stopPropagation exists, run it on the original event
+		if ( e.stopPropagation ) {
+			e.stopPropagation();
+		}
+
+		// Support: IE
+		// Set the cancelBubble property of the original event to true
+		e.cancelBubble = true;
+	},
+	stopImmediatePropagation: function() {
+		this.isImmediatePropagationStopped = returnTrue;
+		this.stopPropagation();
+	}
+};
+
+// Create mouseenter/leave events using mouseover/out and event-time checks
+jQuery.each({
+	mouseenter: "mouseover",
+	mouseleave: "mouseout"
+}, function( orig, fix ) {
+	jQuery.event.special[ orig ] = {
+		delegateType: fix,
+		bindType: fix,
+
+		handle: function( event ) {
+			var ret,
+				target = this,
+				related = event.relatedTarget,
+				handleObj = event.handleObj;
+
+			// For mousenter/leave call the handler if related is outside the target.
+			// NB: No relatedTarget if the mouse left/entered the browser window
+			if ( !related || (related !== target && !jQuery.contains( target, related )) ) {
+				event.type = handleObj.origType;
+				ret = handleObj.handler.apply( this, arguments );
+				event.type = fix;
+			}
+			return ret;
+		}
+	};
+});
+
+// IE submit delegation
+if ( !jQuery.support.submitBubbles ) {
+
+	jQuery.event.special.submit = {
+		setup: function() {
+			// Only need this for delegated form submit events
+			if ( jQuery.nodeName( this, "form" ) ) {
+				return false;
+			}
+
+			// Lazy-add a submit handler when a descendant form may potentially be submitted
+			jQuery.event.add( this, "click._submit keypress._submit", function( e ) {
+				// Node name check avoids a VML-related crash in IE (#9807)
+				var elem = e.target,
+					form = jQuery.nodeName( elem, "input" ) || jQuery.nodeName( elem, "button" ) ? elem.form : undefined;
+				if ( form && !jQuery._data( form, "submitBubbles" ) ) {
+					jQuery.event.add( form, "submit._submit", function( event ) {
+						event._submit_bubble = true;
+					});
+					jQuery._data( form, "submitBubbles", true );
+				}
+			});
+			// return undefined since we don't need an event listener
+		},
+
+		postDispatch: function( event ) {
+			// If form was submitted by the user, bubble the event up the tree
+			if ( event._submit_bubble ) {
+				delete event._submit_bubble;
+				if ( this.parentNode && !event.isTrigger ) {
+					jQuery.event.simulate( "submit", this.parentNode, event, true );
+				}
+			}
+		},
+
+		teardown: function() {
+			// Only need this for delegated form submit events
+			if ( jQuery.nodeName( this, "form" ) ) {
+				return false;
+			}
+
+			// Remove delegated handlers; cleanData eventually reaps submit handlers attached above
+			jQuery.event.remove( this, "._submit" );
+		}
+	};
+}
+
+// IE change delegation and checkbox/radio fix
+if ( !jQuery.support.changeBubbles ) {
+
+	jQuery.event.special.change = {
+
+		setup: function() {
+
+			if ( rformElems.test( this.nodeName ) ) {
+				// IE doesn't fire change on a check/radio until blur; trigger it on click
+				// after a propertychange. Eat the blur-change in special.change.handle.
+				// This still fires onchange a second time for check/radio after blur.
+				if ( this.type === "checkbox" || this.type === "radio" ) {
+					jQuery.event.add( this, "propertychange._change", function( event ) {
+						if ( event.originalEvent.propertyName === "checked" ) {
+							this._just_changed = true;
+						}
+					});
+					jQuery.event.add( this, "click._change", function( event ) {
+						if ( this._just_changed && !event.isTrigger ) {
+							this._just_changed = false;
+						}
+						// Allow triggered, simulated change events (#11500)
+						jQuery.event.simulate( "change", this, event, true );
+					});
+				}
+				return false;
+			}
+			// Delegated event; lazy-add a change handler on descendant inputs
+			jQuery.event.add( this, "beforeactivate._change", function( e ) {
+				var elem = e.target;
+
+				if ( rformElems.test( elem.nodeName ) && !jQuery._data( elem, "changeBubbles" ) ) {
+					jQuery.event.add( elem, "change._change", function( event ) {
+						if ( this.parentNode && !event.isSimulated && !event.isTrigger ) {
+							jQuery.event.simulate( "change", this.parentNode, event, true );
+						}
+					});
+					jQuery._data( elem, "changeBubbles", true );
+				}
+			});
+		},
+
+		handle: function( event ) {
+			var elem = event.target;
+
+			// Swallow native change events from checkbox/radio, we already triggered them above
+			if ( this !== elem || event.isSimulated || event.isTrigger || (elem.type !== "radio" && elem.type !== "checkbox") ) {
+				return event.handleObj.handler.apply( this, arguments );
+			}
+		},
+
+		teardown: function() {
+			jQuery.event.remove( this, "._change" );
+
+			return !rformElems.test( this.nodeName );
+		}
+	};
+}
+
+// Create "bubbling" focus and blur events
+if ( !jQuery.support.focusinBubbles ) {
+	jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {
+
+		// Attach a single capturing handler while someone wants focusin/focusout
+		var attaches = 0,
+			handler = function( event ) {
+				jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true );
+			};
+
+		jQuery.event.special[ fix ] = {
+			setup: function() {
+				if ( attaches++ === 0 ) {
+					document.addEventListener( orig, handler, true );
+				}
+			},
+			teardown: function() {
+				if ( --attaches === 0 ) {
+					document.removeEventListener( orig, handler, true );
+				}
+			}
+		};
+	});
+}
+
+jQuery.fn.extend({
+
+	on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
+		var type, origFn;
+
+		// Types can be a map of types/handlers
+		if ( typeof types === "object" ) {
+			// ( types-Object, selector, data )
+			if ( typeof selector !== "string" ) {
+				// ( types-Object, data )
+				data = data || selector;
+				selector = undefined;
+			}
+			for ( type in types ) {
+				this.on( type, selector, data, types[ type ], one );
+			}
+			return this;
+		}
+
+		if ( data == null && fn == null ) {
+			// ( types, fn )
+			fn = selector;
+			data = selector = undefined;
+		} else if ( fn == null ) {
+			if ( typeof selector === "string" ) {
+				// ( types, selector, fn )
+				fn = data;
+				data = undefined;
+			} else {
+				// ( types, data, fn )
+				fn = data;
+				data = selector;
+				selector = undefined;
+			}
+		}
+		if ( fn === false ) {
+			fn = returnFalse;
+		} else if ( !fn ) {
+			return this;
+		}
+
+		if ( one === 1 ) {
+			origFn = fn;
+			fn = function( event ) {
+				// Can use an empty set, since event contains the info
+				jQuery().off( event );
+				return origFn.apply( this, arguments );
+			};
+			// Use same guid so caller can remove using origFn
+			fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
+		}
+		return this.each( function() {
+			jQuery.event.add( this, types, fn, data, selector );
+		});
+	},
+	one: function( types, selector, data, fn ) {
+		return this.on( types, selector, data, fn, 1 );
+	},
+	off: function( types, selector, fn ) {
+		var handleObj, type;
+		if ( types && types.preventDefault && types.handleObj ) {
+			// ( event )  dispatched jQuery.Event
+			handleObj = types.handleObj;
+			jQuery( types.delegateTarget ).off(
+				handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,
+				handleObj.selector,
+				handleObj.handler
+			);
+			return this;
+		}
+		if ( typeof types === "object" ) {
+			// ( types-object [, selector] )
+			for ( type in types ) {
+				this.off( type, selector, types[ type ] );
+			}
+			return this;
+		}
+		if ( selector === false || typeof selector === "function" ) {
+			// ( types [, fn] )
+			fn = selector;
+			selector = undefined;
+		}
+		if ( fn === false ) {
+			fn = returnFalse;
+		}
+		return this.each(function() {
+			jQuery.event.remove( this, types, fn, selector );
+		});
+	},
+
+	trigger: function( type, data ) {
+		return this.each(function() {
+			jQuery.event.trigger( type, data, this );
+		});
+	},
+	triggerHandler: function( type, data ) {
+		var elem = this[0];
+		if ( elem ) {
+			return jQuery.event.trigger( type, data, elem, true );
+		}
+	}
+});
+var isSimple = /^.[^:#\[\.,]*$/,
+	rparentsprev = /^(?:parents|prev(?:Until|All))/,
+	rneedsContext = jQuery.expr.match.needsContext,
+	// methods guaranteed to produce a unique set when starting from a unique set
+	guaranteedUnique = {
+		children: true,
+		contents: true,
+		next: true,
+		prev: true
+	};
+
+jQuery.fn.extend({
+	find: function( selector ) {
+		var i,
+			ret = [],
+			self = this,
+			len = self.length;
+
+		if ( typeof selector !== "string" ) {
+			return this.pushStack( jQuery( selector ).filter(function() {
+				for ( i = 0; i < len; i++ ) {
+					if ( jQuery.contains( self[ i ], this ) ) {
+						return true;
+					}
+				}
+			}) );
+		}
+
+		for ( i = 0; i < len; i++ ) {
+			jQuery.find( selector, self[ i ], ret );
+		}
+
+		// Needed because $( selector, context ) becomes $( context ).find( selector )
+		ret = this.pushStack( len > 1 ? jQuery.unique( ret ) : ret );
+		ret.selector = this.selector ? this.selector + " " + selector : selector;
+		return ret;
+	},
+
+	has: function( target ) {
+		var i,
+			targets = jQuery( target, this ),
+			len = targets.length;
+
+		return this.filter(function() {
+			for ( i = 0; i < len; i++ ) {
+				if ( jQuery.contains( this, targets[i] ) ) {
+					return true;
+				}
+			}
+		});
+	},
+
+	not: function( selector ) {
+		return this.pushStack( winnow(this, selector || [], true) );
+	},
+
+	filter: function( selector ) {
+		return this.pushStack( winnow(this, selector || [], false) );
+	},
+
+	is: function( selector ) {
+		return !!winnow(
+			this,
+
+			// If this is a positional/relative selector, check membership in the returned set
+			// so $("p:first").is("p:last") won't return true for a doc with two "p".
+			typeof selector === "string" && rneedsContext.test( selector ) ?
+				jQuery( selector ) :
+				selector || [],
+			false
+		).length;
+	},
+
+	closest: function( selectors, context ) {
+		var cur,
+			i = 0,
+			l = this.length,
+			ret = [],
+			pos = rneedsContext.test( selectors ) || typeof selectors !== "string" ?
+				jQuery( selectors, context || this.context ) :
+				0;
+
+		for ( ; i < l; i++ ) {
+			for ( cur = this[i]; cur && cur !== context; cur = cur.parentNode ) {
+				// Always skip document fragments
+				if ( cur.nodeType < 11 && (pos ?
+					pos.index(cur) > -1 :
+
+					// Don't pass non-elements to Sizzle
+					cur.nodeType === 1 &&
+						jQuery.find.matchesSelector(cur, selectors)) ) {
+
+					cur = ret.push( cur );
+					break;
+				}
+			}
+		}
+
+		return this.pushStack( ret.length > 1 ? jQuery.unique( ret ) : ret );
+	},
+
+	// Determine the position of an element within
+	// the matched set of elements
+	index: function( elem ) {
+
+		// No argument, return index in parent
+		if ( !elem ) {
+			return ( this[0] && this[0].parentNode ) ? this.first().prevAll().length : -1;
+		}
+
+		// index in selector
+		if ( typeof elem === "string" ) {
+			return jQuery.inArray( this[0], jQuery( elem ) );
+		}
+
+		// Locate the position of the desired element
+		return jQuery.inArray(
+			// If it receives a jQuery object, the first element is used
+			elem.jquery ? elem[0] : elem, this );
+	},
+
+	add: function( selector, context ) {
+		var set = typeof selector === "string" ?
+				jQuery( selector, context ) :
+				jQuery.makeArray( selector && selector.nodeType ? [ selector ] : selector ),
+			all = jQuery.merge( this.get(), set );
+
+		return this.pushStack( jQuery.unique(all) );
+	},
+
+	addBack: function( selector ) {
+		return this.add( selector == null ?
+			this.prevObject : this.prevObject.filter(selector)
+		);
+	}
+});
+
+function sibling( cur, dir ) {
+	do {
+		cur = cur[ dir ];
+	} while ( cur && cur.nodeType !== 1 );
+
+	return cur;
+}
+
+jQuery.each({
+	parent: function( elem ) {
+		var parent = elem.parentNode;
+		return parent && parent.nodeType !== 11 ? parent : null;
+	},
+	parents: function( elem ) {
+		return jQuery.dir( elem, "parentNode" );
+	},
+	parentsUntil: function( elem, i, until ) {
+		return jQuery.dir( elem, "parentNode", until );
+	},
+	next: function( elem ) {
+		return sibling( elem, "nextSibling" );
+	},
+	prev: function( elem ) {
+		return sibling( elem, "previousSibling" );
+	},
+	nextAll: function( elem ) {
+		return jQuery.dir( elem, "nextSibling" );
+	},
+	prevAll: function( elem ) {
+		return jQuery.dir( elem, "previousSibling" );
+	},
+	nextUntil: function( elem, i, until ) {
+		return jQuery.dir( elem, "nextSibling", until );
+	},
+	prevUntil: function( elem, i, until ) {
+		return jQuery.dir( elem, "previousSibling", until );
+	},
+	siblings: function( elem ) {
+		return jQuery.sibling( ( elem.parentNode || {} ).firstChild, elem );
+	},
+	children: function( elem ) {
+		return jQuery.sibling( elem.firstChild );
+	},
+	contents: function( elem ) {
+		return jQuery.nodeName( elem, "iframe" ) ?
+			elem.contentDocument || elem.contentWindow.document :
+			jQuery.merge( [], elem.childNodes );
+	}
+}, function( name, fn ) {
+	jQuery.fn[ name ] = function( until, selector ) {
+		var ret = jQuery.map( this, fn, until );
+
+		if ( name.slice( -5 ) !== "Until" ) {
+			selector = until;
+		}
+
+		if ( selector && typeof selector === "string" ) {
+			ret = jQuery.filter( selector, ret );
+		}
+
+		if ( this.length > 1 ) {
+			// Remove duplicates
+			if ( !guaranteedUnique[ name ] ) {
+				ret = jQuery.unique( ret );
+			}
+
+			// Reverse order for parents* and prev-derivatives
+			if ( rparentsprev.test( name ) ) {
+				ret = ret.reverse();
+			}
+		}
+
+		return this.pushStack( ret );
+	};
+});
+
+jQuery.extend({
+	filter: function( expr, elems, not ) {
+		var elem = elems[ 0 ];
+
+		if ( not ) {
+			expr = ":not(" + expr + ")";
+		}
+
+		return elems.length === 1 && elem.nodeType === 1 ?
+			jQuery.find.matchesSelector( elem, expr ) ? [ elem ] : [] :
+			jQuery.find.matches( expr, jQuery.grep( elems, function( elem ) {
+				return elem.nodeType === 1;
+			}));
+	},
+
+	dir: function( elem, dir, until ) {
+		var matched = [],
+			cur = elem[ dir ];
+
+		while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) {
+			if ( cur.nodeType === 1 ) {
+				matched.push( cur );
+			}
+			cur = cur[dir];
+		}
+		return matched;
+	},
+
+	sibling: function( n, elem ) {
+		var r = [];
+
+		for ( ; n; n = n.nextSibling ) {
+			if ( n.nodeType === 1 && n !== elem ) {
+				r.push( n );
+			}
+		}
+
+		return r;
+	}
+});
+
+// Implement the identical functionality for filter and not
+function winnow( elements, qualifier, not ) {
+	if ( jQuery.isFunction( qualifier ) ) {
+		return jQuery.grep( elements, function( elem, i ) {
+			/* jshint -W018 */
+			return !!qualifier.call( elem, i, elem ) !== not;
+		});
+
+	}
+
+	if ( qualifier.nodeType ) {
+		return jQuery.grep( elements, function( elem ) {
+			return ( elem === qualifier ) !== not;
+		});
+
+	}
+
+	if ( typeof qualifier === "string" ) {
+		if ( isSimple.test( qualifier ) ) {
+			return jQuery.filter( qualifier, elements, not );
+		}
+
+		qualifier = jQuery.filter( qualifier, elements );
+	}
+
+	return jQuery.grep( elements, function( elem ) {
+		return ( jQuery.inArray( elem, qualifier ) >= 0 ) !== not;
+	});
+}
+function createSafeFragment( document ) {
+	var list = nodeNames.split( "|" ),
+		safeFrag = document.createDocumentFragment();
+
+	if ( safeFrag.createElement ) {
+		while ( list.length ) {
+			safeFrag.createElement(
+				list.pop()
+			);
+		}
+	}
+	return safeFrag;
+}
+
+var nodeNames = "abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|" +
+		"header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
+	rinlinejQuery = / jQuery\d+="(?:null|\d+)"/g,
+	rnoshimcache = new RegExp("<(?:" + nodeNames + ")[\\s/>]", "i"),
+	rleadingWhitespace = /^\s+/,
+	rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,
+	rtagName = /<([\w:]+)/,
+	rtbody = /<tbody/i,
+	rhtml = /<|&#?\w+;/,
+	rnoInnerhtml = /<(?:script|style|link)/i,
+	manipulation_rcheckableType = /^(?:checkbox|radio)$/i,
+	// checked="checked" or checked
+	rchecked = /checked\s*(?:[^=]|=\s*.checked.)/i,
+	rscriptType = /^$|\/(?:java|ecma)script/i,
+	rscriptTypeMasked = /^true\/(.*)/,
+	rcleanScript = /^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g,
+
+	// We have to close these tags to support XHTML (#13200)
+	wrapMap = {
+		option: [ 1, "<select multiple='multiple'>", "</select>" ],
+		legend: [ 1, "<fieldset>", "</fieldset>" ],
+		area: [ 1, "<map>", "</map>" ],
+		param: [ 1, "<object>", "</object>" ],
+		thead: [ 1, "<table>", "</table>" ],
+		tr: [ 2, "<table><tbody>", "</tbody></table>" ],
+		col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
+		td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
+
+		// IE6-8 can't serialize link, script, style, or any html5 (NoScope) tags,
+		// unless wrapped in a div with non-breaking characters in front of it.
+		_default: jQuery.support.htmlSerialize ? [ 0, "", "" ] : [ 1, "X<div>", "</div>"  ]
+	},
+	safeFragment = createSafeFragment( document ),
+	fragmentDiv = safeFragment.appendChild( document.createElement("div") );
+
+wrapMap.optgroup = wrapMap.option;
+wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
+wrapMap.th = wrapMap.td;
+
+jQuery.fn.extend({
+	text: function( value ) {
+		return jQuery.access( this, function( value ) {
+			return value === undefined ?
+				jQuery.text( this ) :
+				this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
+		}, null, value, arguments.length );
+	},
+
+	append: function() {
+		return this.domManip( arguments, function( elem ) {
+			if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
+				var target = manipulationTarget( this, elem );
+				target.appendChild( elem );
+			}
+		});
+	},
+
+	prepend: function() {
+		return this.domManip( arguments, function( elem ) {
+			if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
+				var target = manipulationTarget( this, elem );
+				target.insertBefore( elem, target.firstChild );
+			}
+		});
+	},
+
+	before: function() {
+		return this.domManip( arguments, function( elem ) {
+			if ( this.parentNode ) {
+				this.parentNode.insertBefore( elem, this );
+			}
+		});
+	},
+
+	after: function() {
+		return this.domManip( arguments, function( elem ) {
+			if ( this.parentNode ) {
+				this.parentNode.insertBefore( elem, this.nextSibling );
+			}
+		});
+	},
+
+	// keepData is for internal use only--do not document
+	remove: function( selector, keepData ) {
+		var elem,
+			elems = selector ? jQuery.filter( selector, this ) : this,
+			i = 0;
+
+		for ( ; (elem = elems[i]) != null; i++ ) {
+
+			if ( !keepData && elem.nodeType === 1 ) {
+				jQuery.cleanData( getAll( elem ) );
+			}
+
+			if ( elem.parentNode ) {
+				if ( keepData && jQuery.contains( elem.ownerDocument, elem ) ) {
+					setGlobalEval( getAll( elem, "script" ) );
+				}
+				elem.parentNode.removeChild( elem );
+			}
+		}
+
+		return this;
+	},
+
+	empty: function() {
+		var elem,
+			i = 0;
+
+		for ( ; (elem = this[i]) != null; i++ ) {
+			// Remove element nodes and prevent memory leaks
+			if ( elem.nodeType === 1 ) {
+				jQuery.cleanData( getAll( elem, false ) );
+			}
+
+			// Remove any remaining nodes
+			while ( elem.firstChild ) {
+				elem.removeChild( elem.firstChild );
+			}
+
+			// If this is a select, ensure that it displays empty (#12336)
+			// Support: IE<9
+			if ( elem.options && jQuery.nodeName( elem, "select" ) ) {
+				elem.options.length = 0;
+			}
+		}
+
+		return this;
+	},
+
+	clone: function( dataAndEvents, deepDataAndEvents ) {
+		dataAndEvents = dataAndEvents == null ? false : dataAndEvents;
+		deepDataAndEvents = deepDataAndEvents == null ? dataAndEvents : deepDataAndEvents;
+
+		return this.map( function () {
+			return jQuery.clone( this, dataAndEvents, deepDataAndEvents );
+		});
+	},
+
+	html: function( value ) {
+		return jQuery.access( this, function( value ) {
+			var elem = this[0] || {},
+				i = 0,
+				l = this.length;
+
+			if ( value === undefined ) {
+				return elem.nodeType === 1 ?
+					elem.innerHTML.replace( rinlinejQuery, "" ) :
+					undefined;
+			}
+
+			// See if we can take a shortcut and just use innerHTML
+			if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
+				( jQuery.support.htmlSerialize || !rnoshimcache.test( value )  ) &&
+				( jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value ) ) &&
+				!wrapMap[ ( rtagName.exec( value ) || ["", ""] )[1].toLowerCase() ] ) {
+
+				value = value.replace( rxhtmlTag, "<$1></$2>" );
+
+				try {
+					for (; i < l; i++ ) {
+						// Remove element nodes and prevent memory leaks
+						elem = this[i] || {};
+						if ( elem.nodeType === 1 ) {
+							jQuery.cleanData( getAll( elem, false ) );
+							elem.innerHTML = value;
+						}
+					}
+
+					elem = 0;
+
+				// If using innerHTML throws an exception, use the fallback method
+				} catch(e) {}
+			}
+
+			if ( elem ) {
+				this.empty().append( value );
+			}
+		}, null, value, arguments.length );
+	},
+
+	replaceWith: function() {
+		var
+			// Snapshot the DOM in case .domManip sweeps something relevant into its fragment
+			args = jQuery.map( this, function( elem ) {
+				return [ elem.nextSibling, elem.parentNode ];
+			}),
+			i = 0;
+
+		// Make the changes, replacing each context element with the new content
+		this.domManip( arguments, function( elem ) {
+			var next = args[ i++ ],
+				parent = args[ i++ ];
+
+			if ( parent ) {
+				// Don't use the snapshot next if it has moved (#13810)
+				if ( next && next.parentNode !== parent ) {
+					next = this.nextSibling;
+				}
+				jQuery( this ).remove();
+				parent.insertBefore( elem, next );
+			}
+		// Allow new content to include elements from the context set
+		}, true );
+
+		// Force removal if there was no new content (e.g., from empty arguments)
+		return i ? this : this.remove();
+	},
+
+	detach: function( selector ) {
+		return this.remove( selector, true );
+	},
+
+	domManip: function( args, callback, allowIntersection ) {
+
+		// Flatten any nested arrays
+		args = core_concat.apply( [], args );
+
+		var first, node, hasScripts,
+			scripts, doc, fragment,
+			i = 0,
+			l = this.length,
+			set = this,
+			iNoClone = l - 1,
+			value = args[0],
+			isFunction = jQuery.isFunction( value );
+
+		// We can't cloneNode fragments that contain checked, in WebKit
+		if ( isFunction || !( l <= 1 || typeof value !== "string" || jQuery.support.checkClone || !rchecked.test( value ) ) ) {
+			return this.each(function( index ) {
+				var self = set.eq( index );
+				if ( isFunction ) {
+					args[0] = value.call( this, index, self.html() );
+				}
+				self.domManip( args, callback, allowIntersection );
+			});
+		}
+
+		if ( l ) {
+			fragment = jQuery.buildFragment( args, this[ 0 ].ownerDocument, false, !allowIntersection && this );
+			first = fragment.firstChild;
+
+			if ( fragment.childNodes.length === 1 ) {
+				fragment = first;
+			}
+
+			if ( first ) {
+				scripts = jQuery.map( getAll( fragment, "script" ), disableScript );
+				hasScripts = scripts.length;
+
+				// Use the original fragment for the last item instead of the first because it can end up
+				// being emptied incorrectly in certain situations (#8070).
+				for ( ; i < l; i++ ) {
+					node = fragment;
+
+					if ( i !== iNoClone ) {
+						node = jQuery.clone( node, true, true );
+
+						// Keep references to cloned scripts for later restoration
+						if ( hasScripts ) {
+							jQuery.merge( scripts, getAll( node, "script" ) );
+						}
+					}
+
+					callback.call( this[i], node, i );
+				}
+
+				if ( hasScripts ) {
+					doc = scripts[ scripts.length - 1 ].ownerDocument;
+
+					// Reenable scripts
+					jQuery.map( scripts, restoreScript );
+
+					// Evaluate executable scripts on first document insertion
+					for ( i = 0; i < hasScripts; i++ ) {
+						node = scripts[ i ];
+						if ( rscriptType.test( node.type || "" ) &&
+							!jQuery._data( node, "globalEval" ) && jQuery.contains( doc, node ) ) {
+
+							if ( node.src ) {
+								// Hope ajax is available...
+								jQuery._evalUrl( node.src );
+							} else {
+								jQuery.globalEval( ( node.text || node.textContent || node.innerHTML || "" ).replace( rcleanScript, "" ) );
+							}
+						}
+					}
+				}
+
+				// Fix #11809: Avoid leaking memory
+				fragment = first = null;
+			}
+		}
+
+		return this;
+	}
+});
+
+// Support: IE<8
+// Manipulating tables requires a tbody
+function manipulationTarget( elem, content ) {
+	return jQuery.nodeName( elem, "table" ) &&
+		jQuery.nodeName( content.nodeType === 1 ? content : content.firstChild, "tr" ) ?
+
+		elem.getElementsByTagName("tbody")[0] ||
+			elem.appendChild( elem.ownerDocument.createElement("tbody") ) :
+		elem;
+}
+
+// Replace/restore the type attribute of script elements for safe DOM manipulation
+function disableScript( elem ) {
+	elem.type = (jQuery.find.attr( elem, "type" ) !== null) + "/" + elem.type;
+	return elem;
+}
+function restoreScript( elem ) {
+	var match = rscriptTypeMasked.exec( elem.type );
+	if ( match ) {
+		elem.type = match[1];
+	} else {
+		elem.removeAttribute("type");
+	}
+	return elem;
+}
+
+// Mark scripts as having already been evaluated
+function setGlobalEval( elems, refElements ) {
+	var elem,
+		i = 0;
+	for ( ; (elem = elems[i]) != null; i++ ) {
+		jQuery._data( elem, "globalEval", !refElements || jQuery._data( refElements[i], "globalEval" ) );
+	}
+}
+
+function cloneCopyEvent( src, dest ) {
+
+	if ( dest.nodeType !== 1 || !jQuery.hasData( src ) ) {
+		return;
+	}
+
+	var type, i, l,
+		oldData = jQuery._data( src ),
+		curData = jQuery._data( dest, oldData ),
+		events = oldData.events;
+
+	if ( events ) {
+		delete curData.handle;
+		curData.events = {};
+
+		for ( type in events ) {
+			for ( i = 0, l = events[ type ].length; i < l; i++ ) {
+				jQuery.event.add( dest, type, events[ type ][ i ] );
+			}
+		}
+	}
+
+	// make the cloned public data object a copy from the original
+	if ( curData.data ) {
+		curData.data = jQuery.extend( {}, curData.data );
+	}
+}
+
+function fixCloneNodeIssues( src, dest ) {
+	var nodeName, e, data;
+
+	// We do not need to do anything for non-Elements
+	if ( dest.nodeType !== 1 ) {
+		return;
+	}
+
+	nodeName = dest.nodeName.toLowerCase();
+
+	// IE6-8 copies events bound via attachEvent when using cloneNode.
+	if ( !jQuery.support.noCloneEvent && dest[ jQuery.expando ] ) {
+		data = jQuery._data( dest );
+
+		for ( e in data.events ) {
+			jQuery.removeEvent( dest, e, data.handle );
+		}
+
+		// Event data gets referenced instead of copied if the expando gets copied too
+		dest.removeAttribute( jQuery.expando );
+	}
+
+	// IE blanks contents when cloning scripts, and tries to evaluate newly-set text
+	if ( nodeName === "script" && dest.text !== src.text ) {
+		disableScript( dest ).text = src.text;
+		restoreScript( dest );
+
+	// IE6-10 improperly clones children of object elements using classid.
+	// IE10 throws NoModificationAllowedError if parent is null, #12132.
+	} else if ( nodeName === "object" ) {
+		if ( dest.parentNode ) {
+			dest.outerHTML = src.outerHTML;
+		}
+
+		// This path appears unavoidable for IE9. When cloning an object
+		// element in IE9, the outerHTML strategy above is not sufficient.
+		// If the src has innerHTML and the destination does not,
+		// copy the src.innerHTML into the dest.innerHTML. #10324
+		if ( jQuery.support.html5Clone && ( src.innerHTML && !jQuery.trim(dest.innerHTML) ) ) {
+			dest.innerHTML = src.innerHTML;
+		}
+
+	} else if ( nodeName === "input" && manipulation_rcheckableType.test( src.type ) ) {
+		// IE6-8 fails to persist the checked state of a cloned checkbox
+		// or radio button. Worse, IE6-7 fail to give the cloned element
+		// a checked appearance if the defaultChecked value isn't also set
+
+		dest.defaultChecked = dest.checked = src.checked;
+
+		// IE6-7 get confused and end up setting the value of a cloned
+		// checkbox/radio button to an empty string instead of "on"
+		if ( dest.value !== src.value ) {
+			dest.value = src.value;
+		}
+
+	// IE6-8 fails to return the selected option to the default selected
+	// state when cloning options
+	} else if ( nodeName === "option" ) {
+		dest.defaultSelected = dest.selected = src.defaultSelected;
+
+	// IE6-8 fails to set the defaultValue to the correct value when
+	// cloning other types of input fields
+	} else if ( nodeName === "input" || nodeName === "textarea" ) {
+		dest.defaultValue = src.defaultValue;
+	}
+}
+
+jQuery.each({
+	appendTo: "append",
+	prependTo: "prepend",
+	insertBefore: "before",
+	insertAfter: "after",
+	replaceAll: "replaceWith"
+}, function( name, original ) {
+	jQuery.fn[ name ] = function( selector ) {
+		var elems,
+			i = 0,
+			ret = [],
+			insert = jQuery( selector ),
+			last = insert.length - 1;
+
+		for ( ; i <= last; i++ ) {
+			elems = i === last ? this : this.clone(true);
+			jQuery( insert[i] )[ original ]( elems );
+
+			// Modern browsers can apply jQuery collections as arrays, but oldIE needs a .get()
+			core_push.apply( ret, elems.get() );
+		}
+
+		return this.pushStack( ret );
+	};
+});
+
+function getAll( context, tag ) {
+	var elems, elem,
+		i = 0,
+		found = typeof context.getElementsByTagName !== core_strundefined ? context.getElementsByTagName( tag || "*" ) :
+			typeof context.querySelectorAll !== core_strundefined ? context.querySelectorAll( tag || "*" ) :
+			undefined;
+
+	if ( !found ) {
+		for ( found = [], elems = context.childNodes || context; (elem = elems[i]) != null; i++ ) {
+			if ( !tag || jQuery.nodeName( elem, tag ) ) {
+				found.push( elem );
+			} else {
+				jQuery.merge( found, getAll( elem, tag ) );
+			}
+		}
+	}
+
+	return tag === undefined || tag && jQuery.nodeName( context, tag ) ?
+		jQuery.merge( [ context ], found ) :
+		found;
+}
+
+// Used in buildFragment, fixes the defaultChecked property
+function fixDefaultChecked( elem ) {
+	if ( manipulation_rcheckableType.test( elem.type ) ) {
+		elem.defaultChecked = elem.checked;
+	}
+}
+
+jQuery.extend({
+	clone: function( elem, dataAndEvents, deepDataAndEvents ) {
+		var destElements, node, clone, i, srcElements,
+			inPage = jQuery.contains( elem.ownerDocument, elem );
+
+		if ( jQuery.support.html5Clone || jQuery.isXMLDoc(elem) || !rnoshimcache.test( "<" + elem.nodeName + ">" ) ) {
+			clone = elem.cloneNode( true );
+
+		// IE<=8 does not properly clone detached, unknown element nodes
+		} else {
+			fragmentDiv.innerHTML = elem.outerHTML;
+			fragmentDiv.removeChild( clone = fragmentDiv.firstChild );
+		}
+
+		if ( (!jQuery.support.noCloneEvent || !jQuery.support.noCloneChecked) &&
+				(elem.nodeType === 1 || elem.nodeType === 11) && !jQuery.isXMLDoc(elem) ) {
+
+			// We eschew Sizzle here for performance reasons: http://jsperf.com/getall-vs-sizzle/2
+			destElements = getAll( clone );
+			srcElements = getAll( elem );
+
+			// Fix all IE cloning issues
+			for ( i = 0; (node = srcElements[i]) != null; ++i ) {
+				// Ensure that the destination node is not null; Fixes #9587
+				if ( destElements[i] ) {
+					fixCloneNodeIssues( node, destElements[i] );
+				}
+			}
+		}
+
+		// Copy the events from the original to the clone
+		if ( dataAndEvents ) {
+			if ( deepDataAndEvents ) {
+				srcElements = srcElements || getAll( elem );
+				destElements = destElements || getAll( clone );
+
+				for ( i = 0; (node = srcElements[i]) != null; i++ ) {
+					cloneCopyEvent( node, destElements[i] );
+				}
+			} else {
+				cloneCopyEvent( elem, clone );
+			}
+		}
+
+		// Preserve script evaluation history
+		destElements = getAll( clone, "script" );
+		if ( destElements.length > 0 ) {
+			setGlobalEval( destElements, !inPage && getAll( elem, "script" ) );
+		}
+
+		destElements = srcElements = node = null;
+
+		// Return the cloned set
+		return clone;
+	},
+
+	buildFragment: function( elems, context, scripts, selection ) {
+		var j, elem, contains,
+			tmp, tag, tbody, wrap,
+			l = elems.length,
+
+			// Ensure a safe fragment
+			safe = createSafeFragment( context ),
+
+			nodes = [],
+			i = 0;
+
+		for ( ; i < l; i++ ) {
+			elem = elems[ i ];
+
+			if ( elem || elem === 0 ) {
+
+				// Add nodes directly
+				if ( jQuery.type( elem ) === "object" ) {
+					jQuery.merge( nodes, elem.nodeType ? [ elem ] : elem );
+
+				// Convert non-html into a text node
+				} else if ( !rhtml.test( elem ) ) {
+					nodes.push( context.createTextNode( elem ) );
+
+				// Convert html into DOM nodes
+				} else {
+					tmp = tmp || safe.appendChild( context.createElement("div") );
+
+					// Deserialize a standard representation
+					tag = ( rtagName.exec( elem ) || ["", ""] )[1].toLowerCase();
+					wrap = wrapMap[ tag ] || wrapMap._default;
+
+					tmp.innerHTML = wrap[1] + elem.replace( rxhtmlTag, "<$1></$2>" ) + wrap[2];
+
+					// Descend through wrappers to the right content
+					j = wrap[0];
+					while ( j-- ) {
+						tmp = tmp.lastChild;
+					}
+
+					// Manually add leading whitespace removed by IE
+					if ( !jQuery.support.leadingWhitespace && rleadingWhitespace.test( elem ) ) {
+						nodes.push( context.createTextNode( rleadingWhitespace.exec( elem )[0] ) );
+					}
+
+					// Remove IE's autoinserted <tbody> from table fragments
+					if ( !jQuery.support.tbody ) {
+
+						// String was a <table>, *may* have spurious <tbody>
+						elem = tag === "table" && !rtbody.test( elem ) ?
+							tmp.firstChild :
+
+							// String was a bare <thead> or <tfoot>
+							wrap[1] === "<table>" && !rtbody.test( elem ) ?
+								tmp :
+								0;
+
+						j = elem && elem.childNodes.length;
+						while ( j-- ) {
+							if ( jQuery.nodeName( (tbody = elem.childNodes[j]), "tbody" ) && !tbody.childNodes.length ) {
+								elem.removeChild( tbody );
+							}
+						}
+					}
+
+					jQuery.merge( nodes, tmp.childNodes );
+
+					// Fix #12392 for WebKit and IE > 9
+					tmp.textContent = "";
+
+					// Fix #12392 for oldIE
+					while ( tmp.firstChild ) {
+						tmp.removeChild( tmp.firstChild );
+					}
+
+					// Remember the top-level container for proper cleanup
+					tmp = safe.lastChild;
+				}
+			}
+		}
+
+		// Fix #11356: Clear elements from fragment
+		if ( tmp ) {
+			safe.removeChild( tmp );
+		}
+
+		// Reset defaultChecked for any radios and checkboxes
+		// about to be appended to the DOM in IE 6/7 (#8060)
+		if ( !jQuery.support.appendChecked ) {
+			jQuery.grep( getAll( nodes, "input" ), fixDefaultChecked );
+		}
+
+		i = 0;
+		while ( (elem = nodes[ i++ ]) ) {
+
+			// #4087 - If origin and destination elements are the same, and this is
+			// that element, do not do anything
+			if ( selection && jQuery.inArray( elem, selection ) !== -1 ) {
+				continue;
+			}
+
+			contains = jQuery.contains( elem.ownerDocument, elem );
+
+			// Append to fragment
+			tmp = getAll( safe.appendChild( elem ), "script" );
+
+			// Preserve script evaluation history
+			if ( contains ) {
+				setGlobalEval( tmp );
+			}
+
+			// Capture executables
+			if ( scripts ) {
+				j = 0;
+				while ( (elem = tmp[ j++ ]) ) {
+					if ( rscriptType.test( elem.type || "" ) ) {
+						scripts.push( elem );
+					}
+				}
+			}
+		}
+
+		tmp = null;
+
+		return safe;
+	},
+
+	cleanData: function( elems, /* internal */ acceptData ) {
+		var elem, type, id, data,
+			i = 0,
+			internalKey = jQuery.expando,
+			cache = jQuery.cache,
+			deleteExpando = jQuery.support.deleteExpando,
+			special = jQuery.event.special;
+
+		for ( ; (elem = elems[i]) != null; i++ ) {
+
+			if ( acceptData || jQuery.acceptData( elem ) ) {
+
+				id = elem[ internalKey ];
+				data = id && cache[ id ];
+
+				if ( data ) {
+					if ( data.events ) {
+						for ( type in data.events ) {
+							if ( special[ type ] ) {
+								jQuery.event.remove( elem, type );
+
+							// This is a shortcut to avoid jQuery.event.remove's overhead
+							} else {
+								jQuery.removeEvent( elem, type, data.handle );
+							}
+						}
+					}
+
+					// Remove cache only if it was not already removed by jQuery.event.remove
+					if ( cache[ id ] ) {
+
+						delete cache[ id ];
+
+						// IE does not allow us to delete expando properties from nodes,
+						// nor does it have a removeAttribute function on Document nodes;
+						// we must handle all of these cases
+						if ( deleteExpando ) {
+							delete elem[ internalKey ];
+
+						} else if ( typeof elem.removeAttribute !== core_strundefined ) {
+							elem.removeAttribute( internalKey );
+
+						} else {
+							elem[ internalKey ] = null;
+						}
+
+						core_deletedIds.push( id );
+					}
+				}
+			}
+		}
+	},
+
+	_evalUrl: function( url ) {
+		return jQuery.ajax({
+			url: url,
+			type: "GET",
+			dataType: "script",
+			async: false,
+			global: false,
+			"throws": true
+		});
+	}
+});
+jQuery.fn.extend({
+	wrapAll: function( html ) {
+		if ( jQuery.isFunction( html ) ) {
+			return this.each(function(i) {
+				jQuery(this).wrapAll( html.call(this, i) );
+			});
+		}
+
+		if ( this[0] ) {
+			// The elements to wrap the target around
+			var wrap = jQuery( html, this[0].ownerDocument ).eq(0).clone(true);
+
+			if ( this[0].parentNode ) {
+				wrap.insertBefore( this[0] );
+			}
+
+			wrap.map(function() {
+				var elem = this;
+
+				while ( elem.firstChild && elem.firstChild.nodeType === 1 ) {
+					elem = elem.firstChild;
+				}
+
+				return elem;
+			}).append( this );
+		}
+
+		return this;
+	},
+
+	wrapInner: function( html ) {
+		if ( jQuery.isFunction( html ) ) {
+			return this.each(function(i) {
+				jQuery(this).wrapInner( html.call(this, i) );
+			});
+		}
+
+		return this.each(function() {
+			var self = jQuery( this ),
+				contents = self.contents();
+
+			if ( contents.length ) {
+				contents.wrapAll( html );
+
+			} else {
+				self.append( html );
+			}
+		});
+	},
+
+	wrap: function( html ) {
+		var isFunction = jQuery.isFunction( html );
+
+		return this.each(function(i) {
+			jQuery( this ).wrapAll( isFunction ? html.call(this, i) : html );
+		});
+	},
+
+	unwrap: function() {
+		return this.parent().each(function() {
+			if ( !jQuery.nodeName( this, "body" ) ) {
+				jQuery( this ).replaceWith( this.childNodes );
+			}
+		}).end();
+	}
+});
+var iframe, getStyles, curCSS,
+	ralpha = /alpha\([^)]*\)/i,
+	ropacity = /opacity\s*=\s*([^)]*)/,
+	rposition = /^(top|right|bottom|left)$/,
+	// swappable if display is none or starts with table except "table", "table-cell", or "table-caption"
+	// see here for display values: https://developer.mozilla.org/en-US/docs/CSS/display
+	rdisplayswap = /^(none|table(?!-c[ea]).+)/,
+	rmargin = /^margin/,
+	rnumsplit = new RegExp( "^(" + core_pnum + ")(.*)$", "i" ),
+	rnumnonpx = new RegExp( "^(" + core_pnum + ")(?!px)[a-z%]+$", "i" ),
+	rrelNum = new RegExp( "^([+-])=(" + core_pnum + ")", "i" ),
+	elemdisplay = { BODY: "block" },
+
+	cssShow = { position: "absolute", visibility: "hidden", display: "block" },
+	cssNormalTransform = {
+		letterSpacing: 0,
+		fontWeight: 400
+	},
+
+	cssExpand = [ "Top", "Right", "Bottom", "Left" ],
+	cssPrefixes = [ "Webkit", "O", "Moz", "ms" ];
+
+// return a css property mapped to a potentially vendor prefixed property
+function vendorPropName( style, name ) {
+
+	// shortcut for names that are not vendor prefixed
+	if ( name in style ) {
+		return name;
+	}
+
+	// check for vendor prefixed names
+	var capName = name.charAt(0).toUpperCase() + name.slice(1),
+		origName = name,
+		i = cssPrefixes.length;
+
+	while ( i-- ) {
+		name = cssPrefixes[ i ] + capName;
+		if ( name in style ) {
+			return name;
+		}
+	}
+
+	return origName;
+}
+
+function isHidden( elem, el ) {
+	// isHidden might be called from jQuery#filter function;
+	// in that case, element will be second argument
+	elem = el || elem;
+	return jQuery.css( elem, "display" ) === "none" || !jQuery.contains( elem.ownerDocument, elem );
+}
+
+function showHide( elements, show ) {
+	var display, elem, hidden,
+		values = [],
+		index = 0,
+		length = elements.length;
+
+	for ( ; index < length; index++ ) {
+		elem = elements[ index ];
+		if ( !elem.style ) {
+			continue;
+		}
+
+		values[ index ] = jQuery._data( elem, "olddisplay" );
+		display = elem.style.display;
+		if ( show ) {
+			// Reset the inline display of this element to learn if it is
+			// being hidden by cascaded rules or not
+			if ( !values[ index ] && display === "none" ) {
+				elem.style.display = "";
+			}
+
+			// Set elements which have been overridden with display: none
+			// in a stylesheet to whatever the default browser style is
+			// for such an element
+			if ( elem.style.display === "" && isHidden( elem ) ) {
+				values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
+			}
+		} else {
+
+			if ( !values[ index ] ) {
+				hidden = isHidden( elem );
+
+				if ( display && display !== "none" || !hidden ) {
+					jQuery._data( elem, "olddisplay", hidden ? display : jQuery.css( elem, "display" ) );
+				}
+			}
+		}
+	}
+
+	// Set the display of most of the elements in a second loop
+	// to avoid the constant reflow
+	for ( index = 0; index < length; index++ ) {
+		elem = elements[ index ];
+		if ( !elem.style ) {
+			continue;
+		}
+		if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
+			elem.style.display = show ? values[ index ] || "" : "none";
+		}
+	}
+
+	return elements;
+}
+
+jQuery.fn.extend({
+	css: function( name, value ) {
+		return jQuery.access( this, function( elem, name, value ) {
+			var len, styles,
+				map = {},
+				i = 0;
+
+			if ( jQuery.isArray( name ) ) {
+				styles = getStyles( elem );
+				len = name.length;
+
+				for ( ; i < len; i++ ) {
+					map[ name[ i ] ] = jQuery.css( elem, name[ i ], false, styles );
+				}
+
+				return map;
+			}
+
+			return value !== undefined ?
+				jQuery.style( elem, name, value ) :
+				jQuery.css( elem, name );
+		}, name, value, arguments.length > 1 );
+	},
+	show: function() {
+		return showHide( this, true );
+	},
+	hide: function() {
+		return showHide( this );
+	},
+	toggle: function( state ) {
+		var bool = typeof state === "boolean";
+
+		return this.each(function() {
+			if ( bool ? state : isHidden( this ) ) {
+				jQuery( this ).show();
+			} else {
+				jQuery( this ).hide();
+			}
+		});
+	}
+});
+
+jQuery.extend({
+	// Add in style property hooks for overriding the default
+	// behavior of getting and setting a style property
+	cssHooks: {
+		opacity: {
+			get: function( elem, computed ) {
+				if ( computed ) {
+					// We should always get a number back from opacity
+					var ret = curCSS( elem, "opacity" );
+					return ret === "" ? "1" : ret;
+				}
+			}
+		}
+	},
+
+	// Don't automatically add "px" to these possibly-unitless properties
+	cssNumber: {
+		"columnCount": true,
+		"fillOpacity": true,
+		"fontWeight": true,
+		"lineHeight": true,
+		"opacity": true,
+		"orphans": true,
+		"widows": true,
+		"zIndex": true,
+		"zoom": true
+	},
+
+	// Add in properties whose names you wish to fix before
+	// setting or getting the value
+	cssProps: {
+		// normalize float css property
+		"float": jQuery.support.cssFloat ? "cssFloat" : "styleFloat"
+	},
+
+	// Get and set the style property on a DOM Node
+	style: function( elem, name, value, extra ) {
+		// Don't set styles on text and comment nodes
+		if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !elem.style ) {
+			return;
+		}
+
+		// Make sure that we're working with the right name
+		var ret, type, hooks,
+			origName = jQuery.camelCase( name ),
+			style = elem.style;
+
+		name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( style, origName ) );
+
+		// gets hook for the prefixed version
+		// followed by the unprefixed version
+		hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];
+
+		// Check if we're setting a value
+		if ( value !== undefined ) {
+			type = typeof value;
+
+			// convert relative number strings (+= or -=) to relative numbers. #7345
+			if ( type === "string" && (ret = rrelNum.exec( value )) ) {
+				value = ( ret[1] + 1 ) * ret[2] + parseFloat( jQuery.css( elem, name ) );
+				// Fixes bug #9237
+				type = "number";
+			}
+
+			// Make sure that NaN and null values aren't set. See: #7116
+			if ( value == null || type === "number" && isNaN( value ) ) {
+				return;
+			}
+
+			// If a number was passed in, add 'px' to the (except for certain CSS properties)
+			if ( type === "number" && !jQuery.cssNumber[ origName ] ) {
+				value += "px";
+			}
+
+			// Fixes #8908, it can be done more correctly by specifing setters in cssHooks,
+			// but it would mean to define eight (for every problematic property) identical functions
+			if ( !jQuery.support.clearCloneStyle && value === "" && name.indexOf("background") === 0 ) {
+				style[ name ] = "inherit";
+			}
+
+			// If a hook was provided, use that value, otherwise just set the specified value
+			if ( !hooks || !("set" in hooks) || (value = hooks.set( elem, value, extra )) !== undefined ) {
+
+				// Wrapped to prevent IE from throwing errors when 'invalid' values are provided
+				// Fixes bug #5509
+				try {
+					style[ name ] = value;
+				} catch(e) {}
+			}
+
+		} else {
+			// If a hook was provided get the non-computed value from there
+			if ( hooks && "get" in hooks && (ret = hooks.get( elem, false, extra )) !== undefined ) {
+				return ret;
+			}
+
+			// Otherwise just get the value from the style object
+			return style[ name ];
+		}
+	},
+
+	css: function( elem, name, extra, styles ) {
+		var num, val, hooks,
+			origName = jQuery.camelCase( name );
+
+		// Make sure that we're working with the right name
+		name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) );
+
+		// gets hook for the prefixed version
+		// followed by the unprefixed version
+		hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];
+
+		// If a hook was provided get the computed value from there
+		if ( hooks && "get" in hooks ) {
+			val = hooks.get( elem, true, extra );
+		}
+
+		// Otherwise, if a way to get the computed value exists, use that
+		if ( val === undefined ) {
+			val = curCSS( elem, name, styles );
+		}
+
+		//convert "normal" to computed value
+		if ( val === "normal" && name in cssNormalTransform ) {
+			val = cssNormalTransform[ name ];
+		}
+
+		// Return, converting to number if forced or a qualifier was provided and val looks numeric
+		if ( extra === "" || extra ) {
+			num = parseFloat( val );
+			return extra === true || jQuery.isNumeric( num ) ? num || 0 : val;
+		}
+		return val;
+	}
+});
+
+// NOTE: we've included the "window" in window.getComputedStyle
+// because jsdom on node.js will break without it.
+if ( window.getComputedStyle ) {
+	getStyles = function( elem ) {
+		return window.getComputedStyle( elem, null );
+	};
+
+	curCSS = function( elem, name, _computed ) {
+		var width, minWidth, maxWidth,
+			computed = _computed || getStyles( elem ),
+
+			// getPropertyValue is only needed for .css('filter') in IE9, see #12537
+			ret = computed ? computed.getPropertyValue( name ) || computed[ name ] : undefined,
+			style = elem.style;
+
+		if ( computed ) {
+
+			if ( ret === "" && !jQuery.contains( elem.ownerDocument, elem ) ) {
+				ret = jQuery.style( elem, name );
+			}
+
+			// A tribute to the "awesome hack by Dean Edwards"
+			// Chrome < 17 and Safari 5.0 uses "computed value" instead of "used value" for margin-right
+			// Safari 5.1.7 (at least) returns percentage for a larger set of values, but width seems to be reliably pixels
+			// this is against the CSSOM draft spec: http://dev.w3.org/csswg/cssom/#resolved-values
+			if ( rnumnonpx.test( ret ) && rmargin.test( name ) ) {
+
+				// Remember the original values
+				width = style.width;
+				minWidth = style.minWidth;
+				maxWidth = style.maxWidth;
+
+				// Put in the new values to get a computed value out
+				style.minWidth = style.maxWidth = style.width = ret;
+				ret = computed.width;
+
+				// Revert the changed values
+				style.width = width;
+				style.minWidth = minWidth;
+				style.maxWidth = maxWidth;
+			}
+		}
+
+		return ret;
+	};
+} else if ( document.documentElement.currentStyle ) {
+	getStyles = function( elem ) {
+		return elem.currentStyle;
+	};
+
+	curCSS = function( elem, name, _computed ) {
+		var left, rs, rsLeft,
+			computed = _computed || getStyles( elem ),
+			ret = computed ? computed[ name ] : undefined,
+			style = elem.style;
+
+		// Avoid setting ret to empty string here
+		// so we don't default to auto
+		if ( ret == null && style && style[ name ] ) {
+			ret = style[ name ];
+		}
+
+		// From the awesome hack by Dean Edwards
+		// http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
+
+		// If we're not dealing with a regular pixel number
+		// but a number that has a weird ending, we need to convert it to pixels
+		// but not position css attributes, as those are proportional to the parent element instead
+		// and we can't measure the parent instead because it might trigger a "stacking dolls" problem
+		if ( rnumnonpx.test( ret ) && !rposition.test( name ) ) {
+
+			// Remember the original values
+			left = style.left;
+			rs = elem.runtimeStyle;
+			rsLeft = rs && rs.left;
+
+			// Put in the new values to get a computed value out
+			if ( rsLeft ) {
+				rs.left = elem.currentStyle.left;
+			}
+			style.left = name === "fontSize" ? "1em" : ret;
+			ret = style.pixelLeft + "px";
+
+			// Revert the changed values
+			style.left = left;
+			if ( rsLeft ) {
+				rs.left = rsLeft;
+			}
+		}
+
+		return ret === "" ? "auto" : ret;
+	};
+}
+
+function setPositiveNumber( elem, value, subtract ) {
+	var matches = rnumsplit.exec( value );
+	return matches ?
+		// Guard against undefined "subtract", e.g., when used as in cssHooks
+		Math.max( 0, matches[ 1 ] - ( subtract || 0 ) ) + ( matches[ 2 ] || "px" ) :
+		value;
+}
+
+function augmentWidthOrHeight( elem, name, extra, isBorderBox, styles ) {
+	var i = extra === ( isBorderBox ? "border" : "content" ) ?
+		// If we already have the right measurement, avoid augmentation
+		4 :
+		// Otherwise initialize for horizontal or vertical properties
+		name === "width" ? 1 : 0,
+
+		val = 0;
+
+	for ( ; i < 4; i += 2 ) {
+		// both box models exclude margin, so add it if we want it
+		if ( extra === "margin" ) {
+			val += jQuery.css( elem, extra + cssExpand[ i ], true, styles );
+		}
+
+		if ( isBorderBox ) {
+			// border-box includes padding, so remove it if we want content
+			if ( extra === "content" ) {
+				val -= jQuery.css( elem, "padding" + cssExpand[ i ], true, styles );
+			}
+
+			// at this point, extra isn't border nor margin, so remove border
+			if ( extra !== "margin" ) {
+				val -= jQuery.css( elem, "border" + cssExpand[ i ] + "Width", true, styles );
+			}
+		} else {
+			// at this point, extra isn't content, so add padding
+			val += jQuery.css( elem, "padding" + cssExpand[ i ], true, styles );
+
+			// at this point, extra isn't content nor padding, so add border
+			if ( extra !== "padding" ) {
+				val += jQuery.css( elem, "border" + cssExpand[ i ] + "Width", true, styles );
+			}
+		}
+	}
+
+	return val;
+}
+
+function getWidthOrHeight( elem, name, extra ) {
+
+	// Start with offset property, which is equivalent to the border-box value
+	var valueIsBorderBox = true,
+		val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
+		styles = getStyles( elem ),
+		isBorderBox = jQuery.support.boxSizing && jQuery.css( elem, "boxSizing", false, styles ) === "border-box";
+
+	// some non-html elements return undefined for offsetWidth, so check for null/undefined
+	// svg - https://bugzilla.mozilla.org/show_bug.cgi?id=649285
+	// MathML - https://bugzilla.mozilla.org/show_bug.cgi?id=491668
+	if ( val <= 0 || val == null ) {
+		// Fall back to computed then uncomputed css if necessary
+		val = curCSS( elem, name, styles );
+		if ( val < 0 || val == null ) {
+			val = elem.style[ name ];
+		}
+
+		// Computed unit is not pixels. Stop here and return.
+		if ( rnumnonpx.test(val) ) {
+			return val;
+		}
+
+		// we need the check for style in case a browser which returns unreliable values
+		// for getComputedStyle silently falls back to the reliable elem.style
+		valueIsBorderBox = isBorderBox && ( jQuery.support.boxSizingReliable || val === elem.style[ name ] );
+
+		// Normalize "", auto, and prepare for extra
+		val = parseFloat( val ) || 0;
+	}
+
+	// use the active box-sizing model to add/subtract irrelevant styles
+	return ( val +
+		augmentWidthOrHeight(
+			elem,
+			name,
+			extra || ( isBorderBox ? "border" : "content" ),
+			valueIsBorderBox,
+			styles
+		)
+	) + "px";
+}
+
+// Try to determine the default display value of an element
+function css_defaultDisplay( nodeName ) {
+	var doc = document,
+		display = elemdisplay[ nodeName ];
+
+	if ( !display ) {
+		display = actualDisplay( nodeName, doc );
+
+		// If the simple way fails, read from inside an iframe
+		if ( display === "none" || !display ) {
+			// Use the already-created iframe if possible
+			iframe = ( iframe ||
+				jQuery("<iframe frameborder='0' width='0' height='0'/>")
+				.css( "cssText", "display:block !important" )
+			).appendTo( doc.documentElement );
+
+			// Always write a new HTML skeleton so Webkit and Firefox don't choke on reuse
+			doc = ( iframe[0].contentWindow || iframe[0].contentDocument ).document;
+			doc.write("<!doctype html><html><body>");
+			doc.close();
+
+			display = actualDisplay( nodeName, doc );
+			iframe.detach();
+		}
+
+		// Store the correct default display
+		elemdisplay[ nodeName ] = display;
+	}
+
+	return display;
+}
+
+// Called ONLY from within css_defaultDisplay
+function actualDisplay( name, doc ) {
+	var elem = jQuery( doc.createElement( name ) ).appendTo( doc.body ),
+		display = jQuery.css( elem[0], "display" );
+	elem.remove();
+	return display;
+}
+
+jQuery.each([ "height", "width" ], function( i, name ) {
+	jQuery.cssHooks[ name ] = {
+		get: function( elem, computed, extra ) {
+			if ( computed ) {
+				// certain elements can have dimension info if we invisibly show them
+				// however, it must have a current display style that would benefit from this
+				return elem.offsetWidth === 0 && rdisplayswap.test( jQuery.css( elem, "display" ) ) ?
+					jQuery.swap( elem, cssShow, function() {
+						return getWidthOrHeight( elem, name, extra );
+					}) :
+					getWidthOrHeight( elem, name, extra );
+			}
+		},
+
+		set: function( elem, value, extra ) {
+			var styles = extra && getStyles( elem );
+			return setPositiveNumber( elem, value, extra ?
+				augmentWidthOrHeight(
+					elem,
+					name,
+					extra,
+					jQuery.support.boxSizing && jQuery.css( elem, "boxSizing", false, styles ) === "border-box",
+					styles
+				) : 0
+			);
+		}
+	};
+});
+
+if ( !jQuery.support.opacity ) {
+	jQuery.cssHooks.opacity = {
+		get: function( elem, computed ) {
+			// IE uses filters for opacity
+			return ropacity.test( (computed && elem.currentStyle ? elem.currentStyle.filter : elem.style.filter) || "" ) ?
+				( 0.01 * parseFloat( RegExp.$1 ) ) + "" :
+				computed ? "1" : "";
+		},
+
+		set: function( elem, value ) {
+			var style = elem.style,
+				currentStyle = elem.currentStyle,
+				opacity = jQuery.isNumeric( value ) ? "alpha(opacity=" + value * 100 + ")" : "",
+				filter = currentStyle && currentStyle.filter || style.filter || "";
+
+			// IE has trouble with opacity if it does not have layout
+			// Force it by setting the zoom level
+			style.zoom = 1;
+
+			// if setting opacity to 1, and no other filters exist - attempt to remove filter attribute #6652
+			// if value === "", then remove inline opacity #12685
+			if ( ( value >= 1 || value === "" ) &&
+					jQuery.trim( filter.replace( ralpha, "" ) ) === "" &&
+					style.removeAttribute ) {
+
+				// Setting style.filter to null, "" & " " still leave "filter:" in the cssText
+				// if "filter:" is present at all, clearType is disabled, we want to avoid this
+				// style.removeAttribute is IE Only, but so apparently is this code path...
+				style.removeAttribute( "filter" );
+
+				// if there is no filter style applied in a css rule or unset inline opacity, we are done
+				if ( value === "" || currentStyle && !currentStyle.filter ) {
+					return;
+				}
+			}
+
+			// otherwise, set new filter values
+			style.filter = ralpha.test( filter ) ?
+				filter.replace( ralpha, opacity ) :
+				filter + " " + opacity;
+		}
+	};
+}
+
+// These hooks cannot be added until DOM ready because the support test
+// for it is not run until after DOM ready
+jQuery(function() {
+	if ( !jQuery.support.reliableMarginRight ) {
+		jQuery.cssHooks.marginRight = {
+			get: function( elem, computed ) {
+				if ( computed ) {
+					// WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
+					// Work around by temporarily setting element display to inline-block
+					return jQuery.swap( elem, { "display": "inline-block" },
+						curCSS, [ elem, "marginRight" ] );
+				}
+			}
+		};
+	}
+
+	// Webkit bug: https://bugs.webkit.org/show_bug.cgi?id=29084
+	// getComputedStyle returns percent when specified for top/left/bottom/right
+	// rather than make the css module depend on the offset module, we just check for it here
+	if ( !jQuery.support.pixelPosition && jQuery.fn.position ) {
+		jQuery.each( [ "top", "left" ], function( i, prop ) {
+			jQuery.cssHooks[ prop ] = {
+				get: function( elem, computed ) {
+					if ( computed ) {
+						computed = curCSS( elem, prop );
+						// if curCSS returns percentage, fallback to offset
+						return rnumnonpx.test( computed ) ?
+							jQuery( elem ).position()[ prop ] + "px" :
+							computed;
+					}
+				}
+			};
+		});
+	}
+
+});
+
+if ( jQuery.expr && jQuery.expr.filters ) {
+	jQuery.expr.filters.hidden = function( elem ) {
+		// Support: Opera <= 12.12
+		// Opera reports offsetWidths and offsetHeights less than zero on some elements
+		return elem.offsetWidth <= 0 && elem.offsetHeight <= 0 ||
+			(!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
+	};
+
+	jQuery.expr.filters.visible = function( elem ) {
+		return !jQuery.expr.filters.hidden( elem );
+	};
+}
+
+// These hooks are used by animate to expand properties
+jQuery.each({
+	margin: "",
+	padding: "",
+	border: "Width"
+}, function( prefix, suffix ) {
+	jQuery.cssHooks[ prefix + suffix ] = {
+		expand: function( value ) {
+			var i = 0,
+				expanded = {},
+
+				// assumes a single number if not a string
+				parts = typeof value === "string" ? value.split(" ") : [ value ];
+
+			for ( ; i < 4; i++ ) {
+				expanded[ prefix + cssExpand[ i ] + suffix ] =
+					parts[ i ] || parts[ i - 2 ] || parts[ 0 ];
+			}
+
+			return expanded;
+		}
+	};
+
+	if ( !rmargin.test( prefix ) ) {
+		jQuery.cssHooks[ prefix + suffix ].set = setPositiveNumber;
+	}
+});
+var r20 = /%20/g,
+	rbracket = /\[\]$/,
+	rCRLF = /\r?\n/g,
+	rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
+	rsubmittable = /^(?:input|select|textarea|keygen)/i;
+
+jQuery.fn.extend({
+	serialize: function() {
+		return jQuery.param( this.serializeArray() );
+	},
+	serializeArray: function() {
+		return this.map(function(){
+			// Can add propHook for "elements" to filter or add form elements
+			var elements = jQuery.prop( this, "elements" );
+			return elements ? jQuery.makeArray( elements ) : this;
+		})
+		.filter(function(){
+			var type = this.type;
+			// Use .is(":disabled") so that fieldset[disabled] works
+			return this.name && !jQuery( this ).is( ":disabled" ) &&
+				rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
+				( this.checked || !manipulation_rcheckableType.test( type ) );
+		})
+		.map(function( i, elem ){
+			var val = jQuery( this ).val();
+
+			return val == null ?
+				null :
+				jQuery.isArray( val ) ?
+					jQuery.map( val, function( val ){
+						return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
+					}) :
+					{ name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
+		}).get();
+	}
+});
+
+//Serialize an array of form elements or a set of
+//key/values into a query string
+jQuery.param = function( a, traditional ) {
+	var prefix,
+		s = [],
+		add = function( key, value ) {
+			// If value is a function, invoke it and return its value
+			value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value );
+			s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
+		};
+
+	// Set traditional to true for jQuery <= 1.3.2 behavior.
+	if ( traditional === undefined ) {
+		traditional = jQuery.ajaxSettings && jQuery.ajaxSettings.traditional;
+	}
+
+	// If an array was passed in, assume that it is an array of form elements.
+	if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
+		// Serialize the form elements
+		jQuery.each( a, function() {
+			add( this.name, this.value );
+		});
+
+	} else {
+		// If traditional, encode the "old" way (the way 1.3.2 or older
+		// did it), otherwise encode params recursively.
+		for ( prefix in a ) {
+			buildParams( prefix, a[ prefix ], traditional, add );
+		}
+	}
+
+	// Return the resulting serialization
+	return s.join( "&" ).replace( r20, "+" );
+};
+
+function buildParams( prefix, obj, traditional, add ) {
+	var name;
+
+	if ( jQuery.isArray( obj ) ) {
+		// Serialize array item.
+		jQuery.each( obj, function( i, v ) {
+			if ( traditional || rbracket.test( prefix ) ) {
+				// Treat each array item as a scalar.
+				add( prefix, v );
+
+			} else {
+				// Item is non-scalar (array or object), encode its numeric index.
+				buildParams( prefix + "[" + ( typeof v === "object" ? i : "" ) + "]", v, traditional, add );
+			}
+		});
+
+	} else if ( !traditional && jQuery.type( obj ) === "object" ) {
+		// Serialize object item.
+		for ( name in obj ) {
+			buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add );
+		}
+
+	} else {
+		// Serialize scalar item.
+		add( prefix, obj );
+	}
+}
+jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
+	"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
+	"change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {
+
+	// Handle event binding
+	jQuery.fn[ name ] = function( data, fn ) {
+		return arguments.length > 0 ?
+			this.on( name, null, data, fn ) :
+			this.trigger( name );
+	};
+});
+
+jQuery.fn.extend({
+	hover: function( fnOver, fnOut ) {
+		return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
+	},
+
+	bind: function( types, data, fn ) {
+		return this.on( types, null, data, fn );
+	},
+	unbind: function( types, fn ) {
+		return this.off( types, null, fn );
+	},
+
+	delegate: function( selector, types, data, fn ) {
+		return this.on( types, selector, data, fn );
+	},
+	undelegate: function( selector, types, fn ) {
+		// ( namespace ) or ( selector, types [, fn] )
+		return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
+	}
+});
+var
+	// Document location
+	ajaxLocParts,
+	ajaxLocation,
+	ajax_nonce = jQuery.now(),
+
+	ajax_rquery = /\?/,
+	rhash = /#.*$/,
+	rts = /([?&])_=[^&]*/,
+	rheaders = /^(.*?):[ \t]*([^\r\n]*)\r?$/mg, // IE leaves an \r character at EOL
+	// #7653, #8125, #8152: local protocol detection
+	rlocalProtocol = /^(?:about|app|app-storage|.+-extension|file|res|widget):$/,
+	rnoContent = /^(?:GET|HEAD)$/,
+	rprotocol = /^\/\//,
+	rurl = /^([\w.+-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/,
+
+	// Keep a copy of the old load method
+	_load = jQuery.fn.load,
+
+	/* Prefilters
+	 * 1) They are useful to introduce custom dataTypes (see ajax/jsonp.js for an example)
+	 * 2) These are called:
+	 *    - BEFORE asking for a transport
+	 *    - AFTER param serialization (s.data is a string if s.processData is true)
+	 * 3) key is the dataType
+	 * 4) the catchall symbol "*" can be used
+	 * 5) execution will start with transport dataType and THEN continue down to "*" if needed
+	 */
+	prefilters = {},
+
+	/* Transports bindings
+	 * 1) key is the dataType
+	 * 2) the catchall symbol "*" can be used
+	 * 3) selection will start with transport dataType and THEN go to "*" if needed
+	 */
+	transports = {},
+
+	// Avoid comment-prolog char sequence (#10098); must appease lint and evade compression
+	allTypes = "*/".concat("*");
+
+// #8138, IE may throw an exception when accessing
+// a field from window.location if document.domain has been set
+try {
+	ajaxLocation = location.href;
+} catch( e ) {
+	// Use the href attribute of an A element
+	// since IE will modify it given document.location
+	ajaxLocation = document.createElement( "a" );
+	ajaxLocation.href = "";
+	ajaxLocation = ajaxLocation.href;
+}
+
+// Segment location into parts
+ajaxLocParts = rurl.exec( ajaxLocation.toLowerCase() ) || [];
+
+// Base "constructor" for jQuery.ajaxPrefilter and jQuery.ajaxTransport
+function addToPrefiltersOrTransports( structure ) {
+
+	// dataTypeExpression is optional and defaults to "*"
+	return function( dataTypeExpression, func ) {
+
+		if ( typeof dataTypeExpression !== "string" ) {
+			func = dataTypeExpression;
+			dataTypeExpression = "*";
+		}
+
+		var dataType,
+			i = 0,
+			dataTypes = dataTypeExpression.toLowerCase().match( core_rnotwhite ) || [];
+
+		if ( jQuery.isFunction( func ) ) {
+			// For each dataType in the dataTypeExpression
+			while ( (dataType = dataTypes[i++]) ) {
+				// Prepend if requested
+				if ( dataType[0] === "+" ) {
+					dataType = dataType.slice( 1 ) || "*";
+					(structure[ dataType ] = structure[ dataType ] || []).unshift( func );
+
+				// Otherwise append
+				} else {
+					(structure[ dataType ] = structure[ dataType ] || []).push( func );
+				}
+			}
+		}
+	};
+}
+
+// Base inspection function for prefilters and transports
+function inspectPrefiltersOrTransports( structure, options, originalOptions, jqXHR ) {
+
+	var inspected = {},
+		seekingTransport = ( structure === transports );
+
+	function inspect( dataType ) {
+		var selected;
+		inspected[ dataType ] = true;
+		jQuery.each( structure[ dataType ] || [], function( _, prefilterOrFactory ) {
+			var dataTypeOrTransport = prefilterOrFactory( options, originalOptions, jqXHR );
+			if( typeof dataTypeOrTransport === "string" && !seekingTransport && !inspected[ dataTypeOrTransport ] ) {
+				options.dataTypes.unshift( dataTypeOrTransport );
+				inspect( dataTypeOrTransport );
+				return false;
+			} else if ( seekingTransport ) {
+				return !( selected = dataTypeOrTransport );
+			}
+		});
+		return selected;
+	}
+
+	return inspect( options.dataTypes[ 0 ] ) || !inspected[ "*" ] && inspect( "*" );
+}
+
+// A special extend for ajax options
+// that takes "flat" options (not to be deep extended)
+// Fixes #9887
+function ajaxExtend( target, src ) {
+	var deep, key,
+		flatOptions = jQuery.ajaxSettings.flatOptions || {};
+
+	for ( key in src ) {
+		if ( src[ key ] !== undefined ) {
+			( flatOptions[ key ] ? target : ( deep || (deep = {}) ) )[ key ] = src[ key ];
+		}
+	}
+	if ( deep ) {
+		jQuery.extend( true, target, deep );
+	}
+
+	return target;
+}
+
+jQuery.fn.load = function( url, params, callback ) {
+	if ( typeof url !== "string" && _load ) {
+		return _load.apply( this, arguments );
+	}
+
+	var selector, response, type,
+		self = this,
+		off = url.indexOf(" ");
+
+	if ( off >= 0 ) {
+		selector = url.slice( off, url.length );
+		url = url.slice( 0, off );
+	}
+
+	// If it's a function
+	if ( jQuery.isFunction( params ) ) {
+
+		// We assume that it's the callback
+		callback = params;
+		params = undefined;
+
+	// Otherwise, build a param string
+	} else if ( params && typeof params === "object" ) {
+		type = "POST";
+	}
+
+	// If we have elements to modify, make the request
+	if ( self.length > 0 ) {
+		jQuery.ajax({
+			url: url,
+
+			// if "type" variable is undefined, then "GET" method will be used
+			type: type,
+			dataType: "html",
+			data: params
+		}).done(function( responseText ) {
+
+			// Save response for use in complete callback
+			response = arguments;
+
+			self.html( selector ?
+
+				// If a selector was specified, locate the right elements in a dummy div
+				// Exclude scripts to avoid IE 'Permission Denied' errors
+				jQuery("<div>").append( jQuery.parseHTML( responseText ) ).find( selector ) :
+
+				// Otherwise use the full result
+				responseText );
+
+		}).complete( callback && function( jqXHR, status ) {
+			self.each( callback, response || [ jqXHR.responseText, status, jqXHR ] );
+		});
+	}
+
+	return this;
+};
+
+// Attach a bunch of functions for handling common AJAX events
+jQuery.each( [ "ajaxStart", "ajaxStop", "ajaxComplete", "ajaxError", "ajaxSuccess", "ajaxSend" ], function( i, type ){
+	jQuery.fn[ type ] = function( fn ){
+		return this.on( type, fn );
+	};
+});
+
+jQuery.extend({
+
+	// Counter for holding the number of active queries
+	active: 0,
+
+	// Last-Modified header cache for next request
+	lastModified: {},
+	etag: {},
+
+	ajaxSettings: {
+		url: ajaxLocation,
+		type: "GET",
+		isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),
+		global: true,
+		processData: true,
+		async: true,
+		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
+		/*
+		timeout: 0,
+		data: null,
+		dataType: null,
+		username: null,
+		password: null,
+		cache: null,
+		throws: false,
+		traditional: false,
+		headers: {},
+		*/
+
+		accepts: {
+			"*": allTypes,
+			text: "text/plain",
+			html: "text/html",
+			xml: "application/xml, text/xml",
+			json: "application/json, text/javascript"
+		},
+
+		contents: {
+			xml: /xml/,
+			html: /html/,
+			json: /json/
+		},
+
+		responseFields: {
+			xml: "responseXML",
+			text: "responseText",
+			json: "responseJSON"
+		},
+
+		// Data converters
+		// Keys separate source (or catchall "*") and destination types with a single space
+		converters: {
+
+			// Convert anything to text
+			"* text": String,
+
+			// Text to html (true = no transformation)
+			"text html": true,
+
+			// Evaluate text as a json expression
+			"text json": jQuery.parseJSON,
+
+			// Parse text as xml
+			"text xml": jQuery.parseXML
+		},
+
+		// For options that shouldn't be deep extended:
+		// you can add your own custom options here if
+		// and when you create one that shouldn't be
+		// deep extended (see ajaxExtend)
+		flatOptions: {
+			url: true,
+			context: true
+		}
+	},
+
+	// Creates a full fledged settings object into target
+	// with both ajaxSettings and settings fields.
+	// If target is omitted, writes into ajaxSettings.
+	ajaxSetup: function( target, settings ) {
+		return settings ?
+
+			// Building a settings object
+			ajaxExtend( ajaxExtend( target, jQuery.ajaxSettings ), settings ) :
+
+			// Extending ajaxSettings
+			ajaxExtend( jQuery.ajaxSettings, target );
+	},
+
+	ajaxPrefilter: addToPrefiltersOrTransports( prefilters ),
+	ajaxTransport: addToPrefiltersOrTransports( transports ),
+
+	// Main method
+	ajax: function( url, options ) {
+
+		// If url is an object, simulate pre-1.5 signature
+		if ( typeof url === "object" ) {
+			options = url;
+			url = undefined;
+		}
+
+		// Force options to be an object
+		options = options || {};
+
+		var // Cross-domain detection vars
+			parts,
+			// Loop variable
+			i,
+			// URL without anti-cache param
+			cacheURL,
+			// Response headers as string
+			responseHeadersString,
+			// timeout handle
+			timeoutTimer,
+
+			// To know if global events are to be dispatched
+			fireGlobals,
+
+			transport,
+			// Response headers
+			responseHeaders,
+			// Create the final options object
+			s = jQuery.ajaxSetup( {}, options ),
+			// Callbacks context
+			callbackContext = s.context || s,
+			// Context for global events is callbackContext if it is a DOM node or jQuery collection
+			globalEventContext = s.context && ( callbackContext.nodeType || callbackContext.jquery ) ?
+				jQuery( callbackContext ) :
+				jQuery.event,
+			// Deferreds
+			deferred = jQuery.Deferred(),
+			completeDeferred = jQuery.Callbacks("once memory"),
+			// Status-dependent callbacks
+			statusCode = s.statusCode || {},
+			// Headers (they are sent all at once)
+			requestHeaders = {},
+			requestHeadersNames = {},
+			// The jqXHR state
+			state = 0,
+			// Default abort message
+			strAbort = "canceled",
+			// Fake xhr
+			jqXHR = {
+				readyState: 0,
+
+				// Builds headers hashtable if needed
+				getResponseHeader: function( key ) {
+					var match;
+					if ( state === 2 ) {
+						if ( !responseHeaders ) {
+							responseHeaders = {};
+							while ( (match = rheaders.exec( responseHeadersString )) ) {
+								responseHeaders[ match[1].toLowerCase() ] = match[ 2 ];
+							}
+						}
+						match = responseHeaders[ key.toLowerCase() ];
+					}
+					return match == null ? null : match;
+				},
+
+				// Raw string
+				getAllResponseHeaders: function() {
+					return state === 2 ? responseHeadersString : null;
+				},
+
+				// Caches the header
+				setRequestHeader: function( name, value ) {
+					var lname = name.toLowerCase();
+					if ( !state ) {
+						name = requestHeadersNames[ lname ] = requestHeadersNames[ lname ] || name;
+						requestHeaders[ name ] = value;
+					}
+					return this;
+				},
+
+				// Overrides response content-type header
+				overrideMimeType: function( type ) {
+					if ( !state ) {
+						s.mimeType = type;
+					}
+					return this;
+				},
+
+				// Status-dependent callbacks
+				statusCode: function( map ) {
+					var code;
+					if ( map ) {
+						if ( state < 2 ) {
+							for ( code in map ) {
+								// Lazy-add the new callback in a way that preserves old ones
+								statusCode[ code ] = [ statusCode[ code ], map[ code ] ];
+							}
+						} else {
+							// Execute the appropriate callbacks
+							jqXHR.always( map[ jqXHR.status ] );
+						}
+					}
+					return this;
+				},
+
+				// Cancel the request
+				abort: function( statusText ) {
+					var finalText = statusText || strAbort;
+					if ( transport ) {
+						transport.abort( finalText );
+					}
+					done( 0, finalText );
+					return this;
+				}
+			};
+
+		// Attach deferreds
+		deferred.promise( jqXHR ).complete = completeDeferred.add;
+		jqXHR.success = jqXHR.done;
+		jqXHR.error = jqXHR.fail;
+
+		// Remove hash character (#7531: and string promotion)
+		// Add protocol if not provided (#5866: IE7 issue with protocol-less urls)
+		// Handle falsy url in the settings object (#10093: consistency with old signature)
+		// We also use the url parameter if available
+		s.url = ( ( url || s.url || ajaxLocation ) + "" ).replace( rhash, "" ).replace( rprotocol, ajaxLocParts[ 1 ] + "//" );
+
+		// Alias method option to type as per ticket #12004
+		s.type = options.method || options.type || s.method || s.type;
+
+		// Extract dataTypes list
+		s.dataTypes = jQuery.trim( s.dataType || "*" ).toLowerCase().match( core_rnotwhite ) || [""];
+
+		// A cross-domain request is in order when we have a protocol:host:port mismatch
+		if ( s.crossDomain == null ) {
+			parts = rurl.exec( s.url.toLowerCase() );
+			s.crossDomain = !!( parts &&
+				( parts[ 1 ] !== ajaxLocParts[ 1 ] || parts[ 2 ] !== ajaxLocParts[ 2 ] ||
+					( parts[ 3 ] || ( parts[ 1 ] === "http:" ? "80" : "443" ) ) !==
+						( ajaxLocParts[ 3 ] || ( ajaxLocParts[ 1 ] === "http:" ? "80" : "443" ) ) )
+			);
+		}
+
+		// Convert data if not already a string
+		if ( s.data && s.processData && typeof s.data !== "string" ) {
+			s.data = jQuery.param( s.data, s.traditional );
+		}
+
+		// Apply prefilters
+		inspectPrefiltersOrTransports( prefilters, s, options, jqXHR );
+
+		// If request was aborted inside a prefilter, stop there
+		if ( state === 2 ) {
+			return jqXHR;
+		}
+
+		// We can fire global events as of now if asked to
+		fireGlobals = s.global;
+
+		// Watch for a new set of requests
+		if ( fireGlobals && jQuery.active++ === 0 ) {
+			jQuery.event.trigger("ajaxStart");
+		}
+
+		// Uppercase the type
+		s.type = s.type.toUpperCase();
+
+		// Determine if request has content
+		s.hasContent = !rnoContent.test( s.type );
+
+		// Save the URL in case we're toying with the If-Modified-Since
+		// and/or If-None-Match header later on
+		cacheURL = s.url;
+
+		// More options handling for requests with no content
+		if ( !s.hasContent ) {
+
+			// If data is available, append data to url
+			if ( s.data ) {
+				cacheURL = ( s.url += ( ajax_rquery.test( cacheURL ) ? "&" : "?" ) + s.data );
+				// #9682: remove data so that it's not used in an eventual retry
+				delete s.data;
+			}
+
+			// Add anti-cache in url if needed
+			if ( s.cache === false ) {
+				s.url = rts.test( cacheURL ) ?
+
+					// If there is already a '_' parameter, set its value
+					cacheURL.replace( rts, "$1_=" + ajax_nonce++ ) :
+
+					// Otherwise add one to the end
+					cacheURL + ( ajax_rquery.test( cacheURL ) ? "&" : "?" ) + "_=" + ajax_nonce++;
+			}
+		}
+
+		// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
+		if ( s.ifModified ) {
+			if ( jQuery.lastModified[ cacheURL ] ) {
+				jqXHR.setRequestHeader( "If-Modified-Since", jQuery.lastModified[ cacheURL ] );
+			}
+			if ( jQuery.etag[ cacheURL ] ) {
+				jqXHR.setRequestHeader( "If-None-Match", jQuery.etag[ cacheURL ] );
+			}
+		}
+
+		// Set the correct header, if data is being sent
+		if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
+			jqXHR.setRequestHeader( "Content-Type", s.contentType );
+		}
+
+		// Set the Accepts header for the server, depending on the dataType
+		jqXHR.setRequestHeader(
+			"Accept",
+			s.dataTypes[ 0 ] && s.accepts[ s.dataTypes[0] ] ?
+				s.accepts[ s.dataTypes[0] ] + ( s.dataTypes[ 0 ] !== "*" ? ", " + allTypes + "; q=0.01" : "" ) :
+				s.accepts[ "*" ]
+		);
+
+		// Check for headers option
+		for ( i in s.headers ) {
+			jqXHR.setRequestHeader( i, s.headers[ i ] );
+		}
+
+		// Allow custom headers/mimetypes and early abort
+		if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) {
+			// Abort if not done already and return
+			return jqXHR.abort();
+		}
+
+		// aborting is no longer a cancellation
+		strAbort = "abort";
+
+		// Install callbacks on deferreds
+		for ( i in { success: 1, error: 1, complete: 1 } ) {
+			jqXHR[ i ]( s[ i ] );
+		}
+
+		// Get transport
+		transport = inspectPrefiltersOrTransports( transports, s, options, jqXHR );
+
+		// If no transport, we auto-abort
+		if ( !transport ) {
+			done( -1, "No Transport" );
+		} else {
+			jqXHR.readyState = 1;
+
+			// Send global event
+			if ( fireGlobals ) {
+				globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );
+			}
+			// Timeout
+			if ( s.async && s.timeout > 0 ) {
+				timeoutTimer = setTimeout(function() {
+					jqXHR.abort("timeout");
+				}, s.timeout );
+			}
+
+			try {
+				state = 1;
+				transport.send( requestHeaders, done );
+			} catch ( e ) {
+				// Propagate exception as error if not done
+				if ( state < 2 ) {
+					done( -1, e );
+				// Simply rethrow otherwise
+				} else {
+					throw e;
+				}
+			}
+		}
+
+		// Callback for when everything is done
+		function done( status, nativeStatusText, responses, headers ) {
+			var isSuccess, success, error, response, modified,
+				statusText = nativeStatusText;
+
+			// Called once
+			if ( state === 2 ) {
+				return;
+			}
+
+			// State is "done" now
+			state = 2;
+
+			// Clear timeout if it exists
+			if ( timeoutTimer ) {
+				clearTimeout( timeoutTimer );
+			}
+
+			// Dereference transport for early garbage collection
+			// (no matter how long the jqXHR object will be used)
+			transport = undefined;
+
+			// Cache response headers
+			responseHeadersString = headers || "";
+
+			// Set readyState
+			jqXHR.readyState = status > 0 ? 4 : 0;
+
+			// Determine if successful
+			isSuccess = status >= 200 && status < 300 || status === 304;
+
+			// Get response data
+			if ( responses ) {
+				response = ajaxHandleResponses( s, jqXHR, responses );
+			}
+
+			// Convert no matter what (that way responseXXX fields are always set)
+			response = ajaxConvert( s, response, jqXHR, isSuccess );
+
+			// If successful, handle type chaining
+			if ( isSuccess ) {
+
+				// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
+				if ( s.ifModified ) {
+					modified = jqXHR.getResponseHeader("Last-Modified");
+					if ( modified ) {
+						jQuery.lastModified[ cacheURL ] = modified;
+					}
+					modified = jqXHR.getResponseHeader("etag");
+					if ( modified ) {
+						jQuery.etag[ cacheURL ] = modified;
+					}
+				}
+
+				// if no content
+				if ( status === 204 || s.type === "HEAD" ) {
+					statusText = "nocontent";
+
+				// if not modified
+				} else if ( status === 304 ) {
+					statusText = "notmodified";
+
+				// If we have data, let's convert it
+				} else {
+					statusText = response.state;
+					success = response.data;
+					error = response.error;
+					isSuccess = !error;
+				}
+			} else {
+				// We extract error from statusText
+				// then normalize statusText and status for non-aborts
+				error = statusText;
+				if ( status || !statusText ) {
+					statusText = "error";
+					if ( status < 0 ) {
+						status = 0;
+					}
+				}
+			}
+
+			// Set data for the fake xhr object
+			jqXHR.status = status;
+			jqXHR.statusText = ( nativeStatusText || statusText ) + "";
+
+			// Success/Error
+			if ( isSuccess ) {
+				deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
+			} else {
+				deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
+			}
+
+			// Status-dependent callbacks
+			jqXHR.statusCode( statusCode );
+			statusCode = undefined;
+
+			if ( fireGlobals ) {
+				globalEventContext.trigger( isSuccess ? "ajaxSuccess" : "ajaxError",
+					[ jqXHR, s, isSuccess ? success : error ] );
+			}
+
+			// Complete
+			completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );
+
+			if ( fireGlobals ) {
+				globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
+				// Handle the global AJAX counter
+				if ( !( --jQuery.active ) ) {
+					jQuery.event.trigger("ajaxStop");
+				}
+			}
+		}
+
+		return jqXHR;
+	},
+
+	getJSON: function( url, data, callback ) {
+		return jQuery.get( url, data, callback, "json" );
+	},
+
+	getScript: function( url, callback ) {
+		return jQuery.get( url, undefined, callback, "script" );
+	}
+});
+
+jQuery.each( [ "get", "post" ], function( i, method ) {
+	jQuery[ method ] = function( url, data, callback, type ) {
+		// shift arguments if data argument was omitted
+		if ( jQuery.isFunction( data ) ) {
+			type = type || callback;
+			callback = data;
+			data = undefined;
+		}
+
+		return jQuery.ajax({
+			url: url,
+			type: method,
+			dataType: type,
+			data: data,
+			success: callback
+		});
+	};
+});
+
+/* Handles responses to an ajax request:
+ * - finds the right dataType (mediates between content-type and expected dataType)
+ * - returns the corresponding response
+ */
+function ajaxHandleResponses( s, jqXHR, responses ) {
+	var firstDataType, ct, finalDataType, type,
+		contents = s.contents,
+		dataTypes = s.dataTypes;
+
+	// Remove auto dataType and get content-type in the process
+	while( dataTypes[ 0 ] === "*" ) {
+		dataTypes.shift();
+		if ( ct === undefined ) {
+			ct = s.mimeType || jqXHR.getResponseHeader("Content-Type");
+		}
+	}
+
+	// Check if we're dealing with a known content-type
+	if ( ct ) {
+		for ( type in contents ) {
+			if ( contents[ type ] && contents[ type ].test( ct ) ) {
+				dataTypes.unshift( type );
+				break;
+			}
+		}
+	}
+
+	// Check to see if we have a response for the expected dataType
+	if ( dataTypes[ 0 ] in responses ) {
+		finalDataType = dataTypes[ 0 ];
+	} else {
+		// Try convertible dataTypes
+		for ( type in responses ) {
+			if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[0] ] ) {
+				finalDataType = type;
+				break;
+			}
+			if ( !firstDataType ) {
+				firstDataType = type;
+			}
+		}
+		// Or just use first one
+		finalDataType = finalDataType || firstDataType;
+	}
+
+	// If we found a dataType
+	// We add the dataType to the list if needed
+	// and return the corresponding response
+	if ( finalDataType ) {
+		if ( finalDataType !== dataTypes[ 0 ] ) {
+			dataTypes.unshift( finalDataType );
+		}
+		return responses[ finalDataType ];
+	}
+}
+
+/* Chain conversions given the request and the original response
+ * Also sets the responseXXX fields on the jqXHR instance
+ */
+function ajaxConvert( s, response, jqXHR, isSuccess ) {
+	var conv2, current, conv, tmp, prev,
+		converters = {},
+		// Work with a copy of dataTypes in case we need to modify it for conversion
+		dataTypes = s.dataTypes.slice();
+
+	// Create converters map with lowercased keys
+	if ( dataTypes[ 1 ] ) {
+		for ( conv in s.converters ) {
+			converters[ conv.toLowerCase() ] = s.converters[ conv ];
+		}
+	}
+
+	current = dataTypes.shift();
+
+	// Convert to each sequential dataType
+	while ( current ) {
+
+		if ( s.responseFields[ current ] ) {
+			jqXHR[ s.responseFields[ current ] ] = response;
+		}
+
+		// Apply the dataFilter if provided
+		if ( !prev && isSuccess && s.dataFilter ) {
+			response = s.dataFilter( response, s.dataType );
+		}
+
+		prev = current;
+		current = dataTypes.shift();
+
+		if ( current ) {
+
+			// There's only work to do if current dataType is non-auto
+			if ( current === "*" ) {
+
+				current = prev;
+
+			// Convert response if prev dataType is non-auto and differs from current
+			} else if ( prev !== "*" && prev !== current ) {
+
+				// Seek a direct converter
+				conv = converters[ prev + " " + current ] || converters[ "* " + current ];
+
+				// If none found, seek a pair
+				if ( !conv ) {
+					for ( conv2 in converters ) {
+
+						// If conv2 outputs current
+						tmp = conv2.split( " " );
+						if ( tmp[ 1 ] === current ) {
+
+							// If prev can be converted to accepted input
+							conv = converters[ prev + " " + tmp[ 0 ] ] ||
+								converters[ "* " + tmp[ 0 ] ];
+							if ( conv ) {
+								// Condense equivalence converters
+								if ( conv === true ) {
+									conv = converters[ conv2 ];
+
+								// Otherwise, insert the intermediate dataType
+								} else if ( converters[ conv2 ] !== true ) {
+									current = tmp[ 0 ];
+									dataTypes.unshift( tmp[ 1 ] );
+								}
+								break;
+							}
+						}
+					}
+				}
+
+				// Apply converter (if not an equivalence)
+				if ( conv !== true ) {
+
+					// Unless errors are allowed to bubble, catch and return them
+					if ( conv && s[ "throws" ] ) {
+						response = conv( response );
+					} else {
+						try {
+							response = conv( response );
+						} catch ( e ) {
+							return { state: "parsererror", error: conv ? e : "No conversion from " + prev + " to " + current };
+						}
+					}
+				}
+			}
+		}
+	}
+
+	return { state: "success", data: response };
+}
+// Install script dataType
+jQuery.ajaxSetup({
+	accepts: {
+		script: "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"
+	},
+	contents: {
+		script: /(?:java|ecma)script/
+	},
+	converters: {
+		"text script": function( text ) {
+			jQuery.globalEval( text );
+			return text;
+		}
+	}
+});
+
+// Handle cache's special case and global
+jQuery.ajaxPrefilter( "script", function( s ) {
+	if ( s.cache === undefined ) {
+		s.cache = false;
+	}
+	if ( s.crossDomain ) {
+		s.type = "GET";
+		s.global = false;
+	}
+});
+
+// Bind script tag hack transport
+jQuery.ajaxTransport( "script", function(s) {
+
+	// This transport only deals with cross domain requests
+	if ( s.crossDomain ) {
+
+		var script,
+			head = document.head || jQuery("head")[0] || document.documentElement;
+
+		return {
+
+			send: function( _, callback ) {
+
+				script = document.createElement("script");
+
+				script.async = true;
+
+				if ( s.scriptCharset ) {
+					script.charset = s.scriptCharset;
+				}
+
+				script.src = s.url;
+
+				// Attach handlers for all browsers
+				script.onload = script.onreadystatechange = function( _, isAbort ) {
+
+					if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) {
+
+						// Handle memory leak in IE
+						script.onload = script.onreadystatechange = null;
+
+						// Remove the script
+						if ( script.parentNode ) {
+							script.parentNode.removeChild( script );
+						}
+
+						// Dereference the script
+						script = null;
+
+						// Callback if not abort
+						if ( !isAbort ) {
+							callback( 200, "success" );
+						}
+					}
+				};
+
+				// Circumvent IE6 bugs with base elements (#2709 and #4378) by prepending
+				// Use native DOM manipulation to avoid our domManip AJAX trickery
+				head.insertBefore( script, head.firstChild );
+			},
+
+			abort: function() {
+				if ( script ) {
+					script.onload( undefined, true );
+				}
+			}
+		};
+	}
+});
+var oldCallbacks = [],
+	rjsonp = /(=)\?(?=&|$)|\?\?/;
+
+// Default jsonp settings
+jQuery.ajaxSetup({
+	jsonp: "callback",
+	jsonpCallback: function() {
+		var callback = oldCallbacks.pop() || ( jQuery.expando + "_" + ( ajax_nonce++ ) );
+		this[ callback ] = true;
+		return callback;
+	}
+});
+
+// Detect, normalize options and install callbacks for jsonp requests
+jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR ) {
+
+	var callbackName, overwritten, responseContainer,
+		jsonProp = s.jsonp !== false && ( rjsonp.test( s.url ) ?
+			"url" :
+			typeof s.data === "string" && !( s.contentType || "" ).indexOf("application/x-www-form-urlencoded") && rjsonp.test( s.data ) && "data"
+		);
+
+	// Handle iff the expected data type is "jsonp" or we have a parameter to set
+	if ( jsonProp || s.dataTypes[ 0 ] === "jsonp" ) {
+
+		// Get callback name, remembering preexisting value associated with it
+		callbackName = s.jsonpCallback = jQuery.isFunction( s.jsonpCallback ) ?
+			s.jsonpCallback() :
+			s.jsonpCallback;
+
+		// Insert callback into url or form data
+		if ( jsonProp ) {
+			s[ jsonProp ] = s[ jsonProp ].replace( rjsonp, "$1" + callbackName );
+		} else if ( s.jsonp !== false ) {
+			s.url += ( ajax_rquery.test( s.url ) ? "&" : "?" ) + s.jsonp + "=" + callbackName;
+		}
+
+		// Use data converter to retrieve json after script execution
+		s.converters["script json"] = function() {
+			if ( !responseContainer ) {
+				jQuery.error( callbackName + " was not called" );
+			}
+			return responseContainer[ 0 ];
+		};
+
+		// force json dataType
+		s.dataTypes[ 0 ] = "json";
+
+		// Install callback
+		overwritten = window[ callbackName ];
+		window[ callbackName ] = function() {
+			responseContainer = arguments;
+		};
+
+		// Clean-up function (fires after converters)
+		jqXHR.always(function() {
+			// Restore preexisting value
+			window[ callbackName ] = overwritten;
+
+			// Save back as free
+			if ( s[ callbackName ] ) {
+				// make sure that re-using the options doesn't screw things around
+				s.jsonpCallback = originalSettings.jsonpCallback;
+
+				// save the callback name for future use
+				oldCallbacks.push( callbackName );
+			}
+
+			// Call if it was a function and we have a response
+			if ( responseContainer && jQuery.isFunction( overwritten ) ) {
+				overwritten( responseContainer[ 0 ] );
+			}
+
+			responseContainer = overwritten = undefined;
+		});
+
+		// Delegate to script
+		return "script";
+	}
+});
+var xhrCallbacks, xhrSupported,
+	xhrId = 0,
+	// #5280: Internet Explorer will keep connections alive if we don't abort on unload
+	xhrOnUnloadAbort = window.ActiveXObject && function() {
+		// Abort all pending requests
+		var key;
+		for ( key in xhrCallbacks ) {
+			xhrCallbacks[ key ]( undefined, true );
+		}
+	};
+
+// Functions to create xhrs
+function createStandardXHR() {
+	try {
+		return new window.XMLHttpRequest();
+	} catch( e ) {}
+}
+
+function createActiveXHR() {
+	try {
+		return new window.ActiveXObject("Microsoft.XMLHTTP");
+	} catch( e ) {}
+}
+
+// Create the request object
+// (This is still attached to ajaxSettings for backward compatibility)
+jQuery.ajaxSettings.xhr = window.ActiveXObject ?
+	/* Microsoft failed to properly
+	 * implement the XMLHttpRequest in IE7 (can't request local files),
+	 * so we use the ActiveXObject when it is available
+	 * Additionally XMLHttpRequest can be disabled in IE7/IE8 so
+	 * we need a fallback.
+	 */
+	function() {
+		return !this.isLocal && createStandardXHR() || createActiveXHR();
+	} :
+	// For all other browsers, use the standard XMLHttpRequest object
+	createStandardXHR;
+
+// Determine support properties
+xhrSupported = jQuery.ajaxSettings.xhr();
+jQuery.support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );
+xhrSupported = jQuery.support.ajax = !!xhrSupported;
+
+// Create transport if the browser can provide an xhr
+if ( xhrSupported ) {
+
+	jQuery.ajaxTransport(function( s ) {
+		// Cross domain only allowed if supported through XMLHttpRequest
+		if ( !s.crossDomain || jQuery.support.cors ) {
+
+			var callback;
+
+			return {
+				send: function( headers, complete ) {
+
+					// Get a new xhr
+					var handle, i,
+						xhr = s.xhr();
+
+					// Open the socket
+					// Passing null username, generates a login popup on Opera (#2865)
+					if ( s.username ) {
+						xhr.open( s.type, s.url, s.async, s.username, s.password );
+					} else {
+						xhr.open( s.type, s.url, s.async );
+					}
+
+					// Apply custom fields if provided
+					if ( s.xhrFields ) {
+						for ( i in s.xhrFields ) {
+							xhr[ i ] = s.xhrFields[ i ];
+						}
+					}
+
+					// Override mime type if needed
+					if ( s.mimeType && xhr.overrideMimeType ) {
+						xhr.overrideMimeType( s.mimeType );
+					}
+
+					// X-Requested-With header
+					// For cross-domain requests, seeing as conditions for a preflight are
+					// akin to a jigsaw puzzle, we simply never set it to be sure.
+					// (it can always be set on a per-request basis or even using ajaxSetup)
+					// For same-domain requests, won't change header if already provided.
+					if ( !s.crossDomain && !headers["X-Requested-With"] ) {
+						headers["X-Requested-With"] = "XMLHttpRequest";
+					}
+
+					// Need an extra try/catch for cross domain requests in Firefox 3
+					try {
+						for ( i in headers ) {
+							xhr.setRequestHeader( i, headers[ i ] );
+						}
+					} catch( err ) {}
+
+					// Do send the request
+					// This may raise an exception which is actually
+					// handled in jQuery.ajax (so no try/catch here)
+					xhr.send( ( s.hasContent && s.data ) || null );
+
+					// Listener
+					callback = function( _, isAbort ) {
+						var status, responseHeaders, statusText, responses;
+
+						// Firefox throws exceptions when accessing properties
+						// of an xhr when a network error occurred
+						// http://helpful.knobs-dials.com/index.php/Component_returned_failure_code:_0x80040111_(NS_ERROR_NOT_AVAILABLE)
+						try {
+
+							// Was never called and is aborted or complete
+							if ( callback && ( isAbort || xhr.readyState === 4 ) ) {
+
+								// Only called once
+								callback = undefined;
+
+								// Do not keep as active anymore
+								if ( handle ) {
+									xhr.onreadystatechange = jQuery.noop;
+									if ( xhrOnUnloadAbort ) {
+										delete xhrCallbacks[ handle ];
+									}
+								}
+
+								// If it's an abort
+								if ( isAbort ) {
+									// Abort it manually if needed
+									if ( xhr.readyState !== 4 ) {
+										xhr.abort();
+									}
+								} else {
+									responses = {};
+									status = xhr.status;
+									responseHeaders = xhr.getAllResponseHeaders();
+
+									// When requesting binary data, IE6-9 will throw an exception
+									// on any attempt to access responseText (#11426)
+									if ( typeof xhr.responseText === "string" ) {
+										responses.text = xhr.responseText;
+									}
+
+									// Firefox throws an exception when accessing
+									// statusText for faulty cross-domain requests
+									try {
+										statusText = xhr.statusText;
+									} catch( e ) {
+										// We normalize with Webkit giving an empty statusText
+										statusText = "";
+									}
+
+									// Filter status for non standard behaviors
+
+									// If the request is local and we have data: assume a success
+									// (success with no data won't get notified, that's the best we
+									// can do given current implementations)
+									if ( !status && s.isLocal && !s.crossDomain ) {
+										status = responses.text ? 200 : 404;
+									// IE - #1450: sometimes returns 1223 when it should be 204
+									} else if ( status === 1223 ) {
+										status = 204;
+									}
+								}
+							}
+						} catch( firefoxAccessException ) {
+							if ( !isAbort ) {
+								complete( -1, firefoxAccessException );
+							}
+						}
+
+						// Call complete if needed
+						if ( responses ) {
+							complete( status, statusText, responses, responseHeaders );
+						}
+					};
+
+					if ( !s.async ) {
+						// if we're in sync mode we fire the callback
+						callback();
+					} else if ( xhr.readyState === 4 ) {
+						// (IE6 & IE7) if it's in cache and has been
+						// retrieved directly we need to fire the callback
+						setTimeout( callback );
+					} else {
+						handle = ++xhrId;
+						if ( xhrOnUnloadAbort ) {
+							// Create the active xhrs callbacks list if needed
+							// and attach the unload handler
+							if ( !xhrCallbacks ) {
+								xhrCallbacks = {};
+								jQuery( window ).unload( xhrOnUnloadAbort );
+							}
+							// Add to list of active xhrs callbacks
+							xhrCallbacks[ handle ] = callback;
+						}
+						xhr.onreadystatechange = callback;
+					}
+				},
+
+				abort: function() {
+					if ( callback ) {
+						callback( undefined, true );
+					}
+				}
+			};
+		}
+	});
+}
+var fxNow, timerId,
+	rfxtypes = /^(?:toggle|show|hide)$/,
+	rfxnum = new RegExp( "^(?:([+-])=|)(" + core_pnum + ")([a-z%]*)$", "i" ),
+	rrun = /queueHooks$/,
+	animationPrefilters = [ defaultPrefilter ],
+	tweeners = {
+		"*": [function( prop, value ) {
+			var tween = this.createTween( prop, value ),
+				target = tween.cur(),
+				parts = rfxnum.exec( value ),
+				unit = parts && parts[ 3 ] || ( jQuery.cssNumber[ prop ] ? "" : "px" ),
+
+				// Starting value computation is required for potential unit mismatches
+				start = ( jQuery.cssNumber[ prop ] || unit !== "px" && +target ) &&
+					rfxnum.exec( jQuery.css( tween.elem, prop ) ),
+				scale = 1,
+				maxIterations = 20;
+
+			if ( start && start[ 3 ] !== unit ) {
+				// Trust units reported by jQuery.css
+				unit = unit || start[ 3 ];
+
+				// Make sure we update the tween properties later on
+				parts = parts || [];
+
+				// Iteratively approximate from a nonzero starting point
+				start = +target || 1;
+
+				do {
+					// If previous iteration zeroed out, double until we get *something*
+					// Use a string for doubling factor so we don't accidentally see scale as unchanged below
+					scale = scale || ".5";
+
+					// Adjust and apply
+					start = start / scale;
+					jQuery.style( tween.elem, prop, start + unit );
+
+				// Update scale, tolerating zero or NaN from tween.cur()
+				// And breaking the loop if scale is unchanged or perfect, or if we've just had enough
+				} while ( scale !== (scale = tween.cur() / target) && scale !== 1 && --maxIterations );
+			}
+
+			// Update tween properties
+			if ( parts ) {
+				tween.unit = unit;
+				tween.start = +start || +target || 0;
+				// If a +=/-= token was provided, we're doing a relative animation
+				tween.end = parts[ 1 ] ?
+					start + ( parts[ 1 ] + 1 ) * parts[ 2 ] :
+					+parts[ 2 ];
+			}
+
+			return tween;
+		}]
+	};
+
+// Animations created synchronously will run synchronously
+function createFxNow() {
+	setTimeout(function() {
+		fxNow = undefined;
+	});
+	return ( fxNow = jQuery.now() );
+}
+
+function createTween( value, prop, animation ) {
+	var tween,
+		collection = ( tweeners[ prop ] || [] ).concat( tweeners[ "*" ] ),
+		index = 0,
+		length = collection.length;
+	for ( ; index < length; index++ ) {
+		if ( (tween = collection[ index ].call( animation, prop, value )) ) {
+
+			// we're done with this property
+			return tween;
+		}
+	}
+}
+
+function Animation( elem, properties, options ) {
+	var result,
+		stopped,
+		index = 0,
+		length = animationPrefilters.length,
+		deferred = jQuery.Deferred().always( function() {
+			// don't match elem in the :animated selector
+			delete tick.elem;
+		}),
+		tick = function() {
+			if ( stopped ) {
+				return false;
+			}
+			var currentTime = fxNow || createFxNow(),
+				remaining = Math.max( 0, animation.startTime + animation.duration - currentTime ),
+				// archaic crash bug won't allow us to use 1 - ( 0.5 || 0 ) (#12497)
+				temp = remaining / animation.duration || 0,
+				percent = 1 - temp,
+				index = 0,
+				length = animation.tweens.length;
+
+			for ( ; index < length ; index++ ) {
+				animation.tweens[ index ].run( percent );
+			}
+
+			deferred.notifyWith( elem, [ animation, percent, remaining ]);
+
+			if ( percent < 1 && length ) {
+				return remaining;
+			} else {
+				deferred.resolveWith( elem, [ animation ] );
+				return false;
+			}
+		},
+		animation = deferred.promise({
+			elem: elem,
+			props: jQuery.extend( {}, properties ),
+			opts: jQuery.extend( true, { specialEasing: {} }, options ),
+			originalProperties: properties,
+			originalOptions: options,
+			startTime: fxNow || createFxNow(),
+			duration: options.duration,
+			tweens: [],
+			createTween: function( prop, end ) {
+				var tween = jQuery.Tween( elem, animation.opts, prop, end,
+						animation.opts.specialEasing[ prop ] || animation.opts.easing );
+				animation.tweens.push( tween );
+				return tween;
+			},
+			stop: function( gotoEnd ) {
+				var index = 0,
+					// if we are going to the end, we want to run all the tweens
+					// otherwise we skip this part
+					length = gotoEnd ? animation.tweens.length : 0;
+				if ( stopped ) {
+					return this;
+				}
+				stopped = true;
+				for ( ; index < length ; index++ ) {
+					animation.tweens[ index ].run( 1 );
+				}
+
+				// resolve when we played the last frame
+				// otherwise, reject
+				if ( gotoEnd ) {
+					deferred.resolveWith( elem, [ animation, gotoEnd ] );
+				} else {
+					deferred.rejectWith( elem, [ animation, gotoEnd ] );
+				}
+				return this;
+			}
+		}),
+		props = animation.props;
+
+	propFilter( props, animation.opts.specialEasing );
+
+	for ( ; index < length ; index++ ) {
+		result = animationPrefilters[ index ].call( animation, elem, props, animation.opts );
+		if ( result ) {
+			return result;
+		}
+	}
+
+	jQuery.map( props, createTween, animation );
+
+	if ( jQuery.isFunction( animation.opts.start ) ) {
+		animation.opts.start.call( elem, animation );
+	}
+
+	jQuery.fx.timer(
+		jQuery.extend( tick, {
+			elem: elem,
+			anim: animation,
+			queue: animation.opts.queue
+		})
+	);
+
+	// attach callbacks from options
+	return animation.progress( animation.opts.progress )
+		.done( animation.opts.done, animation.opts.complete )
+		.fail( animation.opts.fail )
+		.always( animation.opts.always );
+}
+
+function propFilter( props, specialEasing ) {
+	var index, name, easing, value, hooks;
+
+	// camelCase, specialEasing and expand cssHook pass
+	for ( index in props ) {
+		name = jQuery.camelCase( index );
+		easing = specialEasing[ name ];
+		value = props[ index ];
+		if ( jQuery.isArray( value ) ) {
+			easing = value[ 1 ];
+			value = props[ index ] = value[ 0 ];
+		}
+
+		if ( index !== name ) {
+			props[ name ] = value;
+			delete props[ index ];
+		}
+
+		hooks = jQuery.cssHooks[ name ];
+		if ( hooks && "expand" in hooks ) {
+			value = hooks.expand( value );
+			delete props[ name ];
+
+			// not quite $.extend, this wont overwrite keys already present.
+			// also - reusing 'index' from above because we have the correct "name"
+			for ( index in value ) {
+				if ( !( index in props ) ) {
+					props[ index ] = value[ index ];
+					specialEasing[ index ] = easing;
+				}
+			}
+		} else {
+			specialEasing[ name ] = easing;
+		}
+	}
+}
+
+jQuery.Animation = jQuery.extend( Animation, {
+
+	tweener: function( props, callback ) {
+		if ( jQuery.isFunction( props ) ) {
+			callback = props;
+			props = [ "*" ];
+		} else {
+			props = props.split(" ");
+		}
+
+		var prop,
+			index = 0,
+			length = props.length;
+
+		for ( ; index < length ; index++ ) {
+			prop = props[ index ];
+			tweeners[ prop ] = tweeners[ prop ] || [];
+			tweeners[ prop ].unshift( callback );
+		}
+	},
+
+	prefilter: function( callback, prepend ) {
+		if ( prepend ) {
+			animationPrefilters.unshift( callback );
+		} else {
+			animationPrefilters.push( callback );
+		}
+	}
+});
+
+function defaultPrefilter( elem, props, opts ) {
+	/* jshint validthis: true */
+	var prop, value, toggle, tween, hooks, oldfire,
+		anim = this,
+		orig = {},
+		style = elem.style,
+		hidden = elem.nodeType && isHidden( elem ),
+		dataShow = jQuery._data( elem, "fxshow" );
+
+	// handle queue: false promises
+	if ( !opts.queue ) {
+		hooks = jQuery._queueHooks( elem, "fx" );
+		if ( hooks.unqueued == null ) {
+			hooks.unqueued = 0;
+			oldfire = hooks.empty.fire;
+			hooks.empty.fire = function() {
+				if ( !hooks.unqueued ) {
+					oldfire();
+				}
+			};
+		}
+		hooks.unqueued++;
+
+		anim.always(function() {
+			// doing this makes sure that the complete handler will be called
+			// before this completes
+			anim.always(function() {
+				hooks.unqueued--;
+				if ( !jQuery.queue( elem, "fx" ).length ) {
+					hooks.empty.fire();
+				}
+			});
+		});
+	}
+
+	// height/width overflow pass
+	if ( elem.nodeType === 1 && ( "height" in props || "width" in props ) ) {
+		// Make sure that nothing sneaks out
+		// Record all 3 overflow attributes because IE does not
+		// change the overflow attribute when overflowX and
+		// overflowY are set to the same value
+		opts.overflow = [ style.overflow, style.overflowX, style.overflowY ];
+
+		// Set display property to inline-block for height/width
+		// animations on inline elements that are having width/height animated
+		if ( jQuery.css( elem, "display" ) === "inline" &&
+				jQuery.css( elem, "float" ) === "none" ) {
+
+			// inline-level elements accept inline-block;
+			// block-level elements need to be inline with layout
+			if ( !jQuery.support.inlineBlockNeedsLayout || css_defaultDisplay( elem.nodeName ) === "inline" ) {
+				style.display = "inline-block";
+
+			} else {
+				style.zoom = 1;
+			}
+		}
+	}
+
+	if ( opts.overflow ) {
+		style.overflow = "hidden";
+		if ( !jQuery.support.shrinkWrapBlocks ) {
+			anim.always(function() {
+				style.overflow = opts.overflow[ 0 ];
+				style.overflowX = opts.overflow[ 1 ];
+				style.overflowY = opts.overflow[ 2 ];
+			});
+		}
+	}
+
+
+	// show/hide pass
+	for ( prop in props ) {
+		value = props[ prop ];
+		if ( rfxtypes.exec( value ) ) {
+			delete props[ prop ];
+			toggle = toggle || value === "toggle";
+			if ( value === ( hidden ? "hide" : "show" ) ) {
+				continue;
+			}
+			orig[ prop ] = dataShow && dataShow[ prop ] || jQuery.style( elem, prop );
+		}
+	}
+
+	if ( !jQuery.isEmptyObject( orig ) ) {
+		if ( dataShow ) {
+			if ( "hidden" in dataShow ) {
+				hidden = dataShow.hidden;
+			}
+		} else {
+			dataShow = jQuery._data( elem, "fxshow", {} );
+		}
+
+		// store state if its toggle - enables .stop().toggle() to "reverse"
+		if ( toggle ) {
+			dataShow.hidden = !hidden;
+		}
+		if ( hidden ) {
+			jQuery( elem ).show();
+		} else {
+			anim.done(function() {
+				jQuery( elem ).hide();
+			});
+		}
+		anim.done(function() {
+			var prop;
+			jQuery._removeData( elem, "fxshow" );
+			for ( prop in orig ) {
+				jQuery.style( elem, prop, orig[ prop ] );
+			}
+		});
+		for ( prop in orig ) {
+			tween = createTween( hidden ? dataShow[ prop ] : 0, prop, anim );
+
+			if ( !( prop in dataShow ) ) {
+				dataShow[ prop ] = tween.start;
+				if ( hidden ) {
+					tween.end = tween.start;
+					tween.start = prop === "width" || prop === "height" ? 1 : 0;
+				}
+			}
+		}
+	}
+}
+
+function Tween( elem, options, prop, end, easing ) {
+	return new Tween.prototype.init( elem, options, prop, end, easing );
+}
+jQuery.Tween = Tween;
+
+Tween.prototype = {
+	constructor: Tween,
+	init: function( elem, options, prop, end, easing, unit ) {
+		this.elem = elem;
+		this.prop = prop;
+		this.easing = easing || "swing";
+		this.options = options;
+		this.start = this.now = this.cur();
+		this.end = end;
+		this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
+	},
+	cur: function() {
+		var hooks = Tween.propHooks[ this.prop ];
+
+		return hooks && hooks.get ?
+			hooks.get( this ) :
+			Tween.propHooks._default.get( this );
+	},
+	run: function( percent ) {
+		var eased,
+			hooks = Tween.propHooks[ this.prop ];
+
+		if ( this.options.duration ) {
+			this.pos = eased = jQuery.easing[ this.easing ](
+				percent, this.options.duration * percent, 0, 1, this.options.duration
+			);
+		} else {
+			this.pos = eased = percent;
+		}
+		this.now = ( this.end - this.start ) * eased + this.start;
+
+		if ( this.options.step ) {
+			this.options.step.call( this.elem, this.now, this );
+		}
+
+		if ( hooks && hooks.set ) {
+			hooks.set( this );
+		} else {
+			Tween.propHooks._default.set( this );
+		}
+		return this;
+	}
+};
+
+Tween.prototype.init.prototype = Tween.prototype;
+
+Tween.propHooks = {
+	_default: {
+		get: function( tween ) {
+			var result;
+
+			if ( tween.elem[ tween.prop ] != null &&
+				(!tween.elem.style || tween.elem.style[ tween.prop ] == null) ) {
+				return tween.elem[ tween.prop ];
+			}
+
+			// passing an empty string as a 3rd parameter to .css will automatically
+			// attempt a parseFloat and fallback to a string if the parse fails
+			// so, simple values such as "10px" are parsed to Float.
+			// complex values such as "rotate(1rad)" are returned as is.
+			result = jQuery.css( tween.elem, tween.prop, "" );
+			// Empty strings, null, undefined and "auto" are converted to 0.
+			return !result || result === "auto" ? 0 : result;
+		},
+		set: function( tween ) {
+			// use step hook for back compat - use cssHook if its there - use .style if its
+			// available and use plain properties where available
+			if ( jQuery.fx.step[ tween.prop ] ) {
+				jQuery.fx.step[ tween.prop ]( tween );
+			} else if ( tween.elem.style && ( tween.elem.style[ jQuery.cssProps[ tween.prop ] ] != null || jQuery.cssHooks[ tween.prop ] ) ) {
+				jQuery.style( tween.elem, tween.prop, tween.now + tween.unit );
+			} else {
+				tween.elem[ tween.prop ] = tween.now;
+			}
+		}
+	}
+};
+
+// Support: IE <=9
+// Panic based approach to setting things on disconnected nodes
+
+Tween.propHooks.scrollTop = Tween.propHooks.scrollLeft = {
+	set: function( tween ) {
+		if ( tween.elem.nodeType && tween.elem.parentNode ) {
+			tween.elem[ tween.prop ] = tween.now;
+		}
+	}
+};
+
+jQuery.each([ "toggle", "show", "hide" ], function( i, name ) {
+	var cssFn = jQuery.fn[ name ];
+	jQuery.fn[ name ] = function( speed, easing, callback ) {
+		return speed == null || typeof speed === "boolean" ?
+			cssFn.apply( this, arguments ) :
+			this.animate( genFx( name, true ), speed, easing, callback );
+	};
+});
+
+jQuery.fn.extend({
+	fadeTo: function( speed, to, easing, callback ) {
+
+		// show any hidden elements after setting opacity to 0
+		return this.filter( isHidden ).css( "opacity", 0 ).show()
+
+			// animate to the value specified
+			.end().animate({ opacity: to }, speed, easing, callback );
+	},
+	animate: function( prop, speed, easing, callback ) {
+		var empty = jQuery.isEmptyObject( prop ),
+			optall = jQuery.speed( speed, easing, callback ),
+			doAnimation = function() {
+				// Operate on a copy of prop so per-property easing won't be lost
+				var anim = Animation( this, jQuery.extend( {}, prop ), optall );
+				doAnimation.finish = function() {
+					anim.stop( true );
+				};
+				// Empty animations, or finishing resolves immediately
+				if ( empty || jQuery._data( this, "finish" ) ) {
+					anim.stop( true );
+				}
+			};
+			doAnimation.finish = doAnimation;
+
+		return empty || optall.queue === false ?
+			this.each( doAnimation ) :
+			this.queue( optall.queue, doAnimation );
+	},
+	stop: function( type, clearQueue, gotoEnd ) {
+		var stopQueue = function( hooks ) {
+			var stop = hooks.stop;
+			delete hooks.stop;
+			stop( gotoEnd );
+		};
+
+		if ( typeof type !== "string" ) {
+			gotoEnd = clearQueue;
+			clearQueue = type;
+			type = undefined;
+		}
+		if ( clearQueue && type !== false ) {
+			this.queue( type || "fx", [] );
+		}
+
+		return this.each(function() {
+			var dequeue = true,
+				index = type != null && type + "queueHooks",
+				timers = jQuery.timers,
+				data = jQuery._data( this );
+
+			if ( index ) {
+				if ( data[ index ] && data[ index ].stop ) {
+					stopQueue( data[ index ] );
+				}
+			} else {
+				for ( index in data ) {
+					if ( data[ index ] && data[ index ].stop && rrun.test( index ) ) {
+						stopQueue( data[ index ] );
+					}
+				}
+			}
+
+			for ( index = timers.length; index--; ) {
+				if ( timers[ index ].elem === this && (type == null || timers[ index ].queue === type) ) {
+					timers[ index ].anim.stop( gotoEnd );
+					dequeue = false;
+					timers.splice( index, 1 );
+				}
+			}
+
+			// start the next in the queue if the last step wasn't forced
+			// timers currently will call their complete callbacks, which will dequeue
+			// but only if they were gotoEnd
+			if ( dequeue || !gotoEnd ) {
+				jQuery.dequeue( this, type );
+			}
+		});
+	},
+	finish: function( type ) {
+		if ( type !== false ) {
+			type = type || "fx";
+		}
+		return this.each(function() {
+			var index,
+				data = jQuery._data( this ),
+				queue = data[ type + "queue" ],
+				hooks = data[ type + "queueHooks" ],
+				timers = jQuery.timers,
+				length = queue ? queue.length : 0;
+
+			// enable finishing flag on private data
+			data.finish = true;
+
+			// empty the queue first
+			jQuery.queue( this, type, [] );
+
+			if ( hooks && hooks.cur && hooks.cur.finish ) {
+				hooks.cur.finish.call( this );
+			}
+
+			// look for any active animations, and finish them
+			for ( index = timers.length; index--; ) {
+				if ( timers[ index ].elem === this && timers[ index ].queue === type ) {
+					timers[ index ].anim.stop( true );
+					timers.splice( index, 1 );
+				}
+			}
+
+			// look for any animations in the old queue and finish them
+			for ( index = 0; index < length; index++ ) {
+				if ( queue[ index ] && queue[ index ].finish ) {
+					queue[ index ].finish.call( this );
+				}
+			}
+
+			// turn off finishing flag
+			delete data.finish;
+		});
+	}
+});
+
+// Generate parameters to create a standard animation
+function genFx( type, includeWidth ) {
+	var which,
+		attrs = { height: type },
+		i = 0;
+
+	// if we include width, step value is 1 to do all cssExpand values,
+	// if we don't include width, step value is 2 to skip over Left and Right
+	includeWidth = includeWidth? 1 : 0;
+	for( ; i < 4 ; i += 2 - includeWidth ) {
+		which = cssExpand[ i ];
+		attrs[ "margin" + which ] = attrs[ "padding" + which ] = type;
+	}
+
+	if ( includeWidth ) {
+		attrs.opacity = attrs.width = type;
+	}
+
+	return attrs;
+}
+
+// Generate shortcuts for custom animations
+jQuery.each({
+	slideDown: genFx("show"),
+	slideUp: genFx("hide"),
+	slideToggle: genFx("toggle"),
+	fadeIn: { opacity: "show" },
+	fadeOut: { opacity: "hide" },
+	fadeToggle: { opacity: "toggle" }
+}, function( name, props ) {
+	jQuery.fn[ name ] = function( speed, easing, callback ) {
+		return this.animate( props, speed, easing, callback );
+	};
+});
+
+jQuery.speed = function( speed, easing, fn ) {
+	var opt = speed && typeof speed === "object" ? jQuery.extend( {}, speed ) : {
+		complete: fn || !fn && easing ||
+			jQuery.isFunction( speed ) && speed,
+		duration: speed,
+		easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing
+	};
+
+	opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
+		opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;
+
+	// normalize opt.queue - true/undefined/null -> "fx"
+	if ( opt.queue == null || opt.queue === true ) {
+		opt.queue = "fx";
+	}
+
+	// Queueing
+	opt.old = opt.complete;
+
+	opt.complete = function() {
+		if ( jQuery.isFunction( opt.old ) ) {
+			opt.old.call( this );
+		}
+
+		if ( opt.queue ) {
+			jQuery.dequeue( this, opt.queue );
+		}
+	};
+
+	return opt;
+};
+
+jQuery.easing = {
+	linear: function( p ) {
+		return p;
+	},
+	swing: function( p ) {
+		return 0.5 - Math.cos( p*Math.PI ) / 2;
+	}
+};
+
+jQuery.timers = [];
+jQuery.fx = Tween.prototype.init;
+jQuery.fx.tick = function() {
+	var timer,
+		timers = jQuery.timers,
+		i = 0;
+
+	fxNow = jQuery.now();
+
+	for ( ; i < timers.length; i++ ) {
+		timer = timers[ i ];
+		// Checks the timer has not already been removed
+		if ( !timer() && timers[ i ] === timer ) {
+			timers.splice( i--, 1 );
+		}
+	}
+
+	if ( !timers.length ) {
+		jQuery.fx.stop();
+	}
+	fxNow = undefined;
+};
+
+jQuery.fx.timer = function( timer ) {
+	if ( timer() && jQuery.timers.push( timer ) ) {
+		jQuery.fx.start();
+	}
+};
+
+jQuery.fx.interval = 13;
+
+jQuery.fx.start = function() {
+	if ( !timerId ) {
+		timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
+	}
+};
+
+jQuery.fx.stop = function() {
+	clearInterval( timerId );
+	timerId = null;
+};
+
+jQuery.fx.speeds = {
+	slow: 600,
+	fast: 200,
+	// Default speed
+	_default: 400
+};
+
+// Back Compat <1.8 extension point
+jQuery.fx.step = {};
+
+if ( jQuery.expr && jQuery.expr.filters ) {
+	jQuery.expr.filters.animated = function( elem ) {
+		return jQuery.grep(jQuery.timers, function( fn ) {
+			return elem === fn.elem;
+		}).length;
+	};
+}
+jQuery.fn.offset = function( options ) {
+	if ( arguments.length ) {
+		return options === undefined ?
+			this :
+			this.each(function( i ) {
+				jQuery.offset.setOffset( this, options, i );
+			});
+	}
+
+	var docElem, win,
+		box = { top: 0, left: 0 },
+		elem = this[ 0 ],
+		doc = elem && elem.ownerDocument;
+
+	if ( !doc ) {
+		return;
+	}
+
+	docElem = doc.documentElement;
+
+	// Make sure it's not a disconnected DOM node
+	if ( !jQuery.contains( docElem, elem ) ) {
+		return box;
+	}
+
+	// If we don't have gBCR, just use 0,0 rather than error
+	// BlackBerry 5, iOS 3 (original iPhone)
+	if ( typeof elem.getBoundingClientRect !== core_strundefined ) {
+		box = elem.getBoundingClientRect();
+	}
+	win = getWindow( doc );
+	return {
+		top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
+		left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
+	};
+};
+
+jQuery.offset = {
+
+	setOffset: function( elem, options, i ) {
+		var position = jQuery.css( elem, "position" );
+
+		// set position first, in-case top/left are set even on static elem
+		if ( position === "static" ) {
+			elem.style.position = "relative";
+		}
+
+		var curElem = jQuery( elem ),
+			curOffset = curElem.offset(),
+			curCSSTop = jQuery.css( elem, "top" ),
+			curCSSLeft = jQuery.css( elem, "left" ),
+			calculatePosition = ( position === "absolute" || position === "fixed" ) && jQuery.inArray("auto", [curCSSTop, curCSSLeft]) > -1,
+			props = {}, curPosition = {}, curTop, curLeft;
+
+		// need to be able to calculate position if either top or left is auto and position is either absolute or fixed
+		if ( calculatePosition ) {
+			curPosition = curElem.position();
+			curTop = curPosition.top;
+			curLeft = curPosition.left;
+		} else {
+			curTop = parseFloat( curCSSTop ) || 0;
+			curLeft = parseFloat( curCSSLeft ) || 0;
+		}
+
+		if ( jQuery.isFunction( options ) ) {
+			options = options.call( elem, i, curOffset );
+		}
+
+		if ( options.top != null ) {
+			props.top = ( options.top - curOffset.top ) + curTop;
+		}
+		if ( options.left != null ) {
+			props.left = ( options.left - curOffset.left ) + curLeft;
+		}
+
+		if ( "using" in options ) {
+			options.using.call( elem, props );
+		} else {
+			curElem.css( props );
+		}
+	}
+};
+
+
+jQuery.fn.extend({
+
+	position: function() {
+		if ( !this[ 0 ] ) {
+			return;
+		}
+
+		var offsetParent, offset,
+			parentOffset = { top: 0, left: 0 },
+			elem = this[ 0 ];
+
+		// fixed elements are offset from window (parentOffset = {top:0, left: 0}, because it is it's only offset parent
+		if ( jQuery.css( elem, "position" ) === "fixed" ) {
+			// we assume that getBoundingClientRect is available when computed position is fixed
+			offset = elem.getBoundingClientRect();
+		} else {
+			// Get *real* offsetParent
+			offsetParent = this.offsetParent();
+
+			// Get correct offsets
+			offset = this.offset();
+			if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) {
+				parentOffset = offsetParent.offset();
+			}
+
+			// Add offsetParent borders
+			parentOffset.top  += jQuery.css( offsetParent[ 0 ], "borderTopWidth", true );
+			parentOffset.left += jQuery.css( offsetParent[ 0 ], "borderLeftWidth", true );
+		}
+
+		// Subtract parent offsets and element margins
+		// note: when an element has margin: auto the offsetLeft and marginLeft
+		// are the same in Safari causing offset.left to incorrectly be 0
+		return {
+			top:  offset.top  - parentOffset.top - jQuery.css( elem, "marginTop", true ),
+			left: offset.left - parentOffset.left - jQuery.css( elem, "marginLeft", true)
+		};
+	},
+
+	offsetParent: function() {
+		return this.map(function() {
+			var offsetParent = this.offsetParent || docElem;
+			while ( offsetParent && ( !jQuery.nodeName( offsetParent, "html" ) && jQuery.css( offsetParent, "position") === "static" ) ) {
+				offsetParent = offsetParent.offsetParent;
+			}
+			return offsetParent || docElem;
+		});
+	}
+});
+
+
+// Create scrollLeft and scrollTop methods
+jQuery.each( {scrollLeft: "pageXOffset", scrollTop: "pageYOffset"}, function( method, prop ) {
+	var top = /Y/.test( prop );
+
+	jQuery.fn[ method ] = function( val ) {
+		return jQuery.access( this, function( elem, method, val ) {
+			var win = getWindow( elem );
+
+			if ( val === undefined ) {
+				return win ? (prop in win) ? win[ prop ] :
+					win.document.documentElement[ method ] :
+					elem[ method ];
+			}
+
+			if ( win ) {
+				win.scrollTo(
+					!top ? val : jQuery( win ).scrollLeft(),
+					top ? val : jQuery( win ).scrollTop()
+				);
+
+			} else {
+				elem[ method ] = val;
+			}
+		}, method, val, arguments.length, null );
+	};
+});
+
+function getWindow( elem ) {
+	return jQuery.isWindow( elem ) ?
+		elem :
+		elem.nodeType === 9 ?
+			elem.defaultView || elem.parentWindow :
+			false;
+}
+// Create innerHeight, innerWidth, height, width, outerHeight and outerWidth methods
+jQuery.each( { Height: "height", Width: "width" }, function( name, type ) {
+	jQuery.each( { padding: "inner" + name, content: type, "": "outer" + name }, function( defaultExtra, funcName ) {
+		// margin is only for outerHeight, outerWidth
+		jQuery.fn[ funcName ] = function( margin, value ) {
+			var chainable = arguments.length && ( defaultExtra || typeof margin !== "boolean" ),
+				extra = defaultExtra || ( margin === true || value === true ? "margin" : "border" );
+
+			return jQuery.access( this, function( elem, type, value ) {
+				var doc;
+
+				if ( jQuery.isWindow( elem ) ) {
+					// As of 5/8/2012 this will yield incorrect results for Mobile Safari, but there
+					// isn't a whole lot we can do. See pull request at this URL for discussion:
+					// https://github.com/jquery/jquery/pull/764
+					return elem.document.documentElement[ "client" + name ];
+				}
+
+				// Get document width or height
+				if ( elem.nodeType === 9 ) {
+					doc = elem.documentElement;
+
+					// Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height], whichever is greatest
+					// unfortunately, this causes bug #3838 in IE6/8 only, but there is currently no good, small way to fix it.
+					return Math.max(
+						elem.body[ "scroll" + name ], doc[ "scroll" + name ],
+						elem.body[ "offset" + name ], doc[ "offset" + name ],
+						doc[ "client" + name ]
+					);
+				}
+
+				return value === undefined ?
+					// Get width or height on the element, requesting but not forcing parseFloat
+					jQuery.css( elem, type, extra ) :
+
+					// Set width or height on the element
+					jQuery.style( elem, type, value, extra );
+			}, type, chainable ? margin : undefined, chainable, null );
+		};
+	});
+});
+// Limit scope pollution from any deprecated API
+// (function() {
+
+// The number of elements contained in the matched element set
+jQuery.fn.size = function() {
+	return this.length;
+};
+
+jQuery.fn.andSelf = jQuery.fn.addBack;
+
+// })();
+if ( typeof module === "object" && typeof module.exports === "object" ) {
+	// Expose jQuery as module.exports in loaders that implement the Node
+	// module pattern (including browserify). Do not create the global, since
+	// the user will be storing it themselves locally, and globals are frowned
+	// upon in the Node module world.
+	module.exports = jQuery;
+} else {
+	// Otherwise expose jQuery to the global object as usual
+	window.jQuery = window.$ = jQuery;
+
+	// Register as a named AMD module, since jQuery can be concatenated with other
+	// files that may use define, but not via a proper concatenation script that
+	// understands anonymous AMD modules. A named AMD is safest and most robust
+	// way to register. Lowercase jquery is used because AMD module names are
+	// derived from file names, and jQuery is normally delivered in a lowercase
+	// file name. Do this after creating the global so that if an AMD module wants
+	// to call noConflict to hide this version of jQuery, it will work.
+	if ( typeof define === "function" && define.amd ) {
+		define( "jquery", [], function () { return jQuery; } );
+	}
+}
+
+})( window );

src/assets/callCenterPhoneBarSdk/page.css

@@ -0,0 +1,246 @@
+/*@charset "utf-8";*/
+/*!* CSS Document *!*/
+/*body{ background:#eef3fa;}*/
+
+/*html,body,table,tr,td,div,ol,ul,li,dl,dt,dd,dir,h1,h2,h3,h4,h5,h6,p{text-align: left; margin: 0px;padding: 0px;border: 0px;list-style-type: none; font-size:12px; font-weight:normal;}*/
+/*div,select,textarea,table td,table td,table tr{font-family:myFirstFont;font-size:12px; color:#768595;}*/
+
+/*.main{ margin:0px 10px;}*/
+
+/*!***头部区***!*/
+/*.head_btn{ height:50px; margin-bottom:10px;}*/
+
+/*#navigation {font: bold 12px/18px "微软雅黑", Helvetica, Arial, sans-serif; text-transform: uppercase; color:#768595; position:absolute; top:10px;}  */
+/*#navigation:after { clear: both;content: "."; display: block; height: 0;visibility: hidden;}  */
+/*#navigation ul {float: left; border-radius: 5px;!* box-shadow: 0 2px 2px rgba(0, 0, 0, 0.07); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.07); *!overflow: hidden;}  */
+/*#navigation li {  */
+/*    float: left;  */
+/*    border-style: solid;   */
+/*    border-width: 1px;  */
+/*    border-color: #dfe5e7 #dfe5e7 #dfe5e7 #dfe5e7;  */
+/*    box-shadow: 0 1px rgba(255,255,255,1) inset;  */
+/*    -webkit-box-shadow: 0 1px rgba(255,255,255,1) inset;  */
+/*    background: #F7F7F7; !* Old browsers *!  */
+/*    background: -moz-linear-gradient(top, #F7F7F7 0%, #EDEDED 100%); !* FF3.6+ *!  */
+/*    background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#F7F7F7), color-stop(100%,#EDEDED)); !* Chrome,Safari4+ *!  */
+/*    background: -webkit-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); !* Chrome10+,Safari5.1+ *!  */
+/*    background: -o-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); !* Opera 11.10+ *!  */
+/*    background: -ms-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); !* IE10+ *!  */
+/*    background: linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); !* W3C *!  */
+/*    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#EDEDED',GradientType=0 ); !* IE6-9 *!      */
+/*}  */
+/*#navigation li:hover, #navigation li.current {  */
+/*    box-shadow: 0 1px rgba(255,255,255,0.2) inset;  */
+/*    -webkit-box-shadow: 0 1px rgba(255,255,255,0.2) inset;  */
+/*    border-color: #095db1 !important;  */
+/*    background: #095db1; !* Old browsers *!  */
+/*    background: -moz-linear-gradient(top, #095db1 0%, #095db1 100%); !* FF3.6+ *!  */
+/*    background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#095db1), color-stop(100%,#095db1)); !* Chrome,Safari4+ *!  */
+/*    background: -webkit-linear-gradient(top, #095db1 0%,#ff000 100%); !* Chrome10+,Safari5.1+ *!  */
+/*    background: -o-linear-gradient(top, #095db1 0%,#095db1 100%); !* Opera 11.10+ *!  */
+/*    background: -ms-linear-gradient(top, #095db1 0%,#095db1 100%); !* IE10+ *!  */
+/*    background: linear-gradient(top, #095db1 0%,#095db1 100%); !* W3C *!  */
+/*    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#095db1', endColorstr='#095db1',GradientType=0 ); !* IE6-9 *!  */
+/*}  */
+/*#navigation a {display: block;padding: 5px 15px;color: #444;text-decoration: none; text-shadow: 0 1px #FFF; }  */
+/*#navigation a:hover, #navigation li.current a { color: #FFF;text-shadow: 0 1px #000;}  */
+/*#navigation li:first-child {border-left-color: #BABABA; border-radius: 5px 0 0 5px;}  */
+/*#navigation li:last-child {border-radius: 0 5px 5px 0; } */
+
+/*#conference_member_list ul {float: left; overflow: hidden;  width: 100%;}*/
+/*#conference_member_list li  {*/
+/*    float: left;  */
+/*    border-style: solid;   */
+/*    border-width: 1px;  */
+/*    border-color: #dfe5e7 #dfe5e7 #eef3fa #dfe5e7;  */
+/*    width: 700px;*/
+/*    line-height: 35px;*/
+/*}*/
+
+
+/*.conf_name{*/
+/*   padding-left: 10px;*/
+/*   width: 100px;*/
+/*   display: inline-block*/
+/*}*/
+
+/*.conf_phone{*/
+/*   width: 120px;*/
+/*   display: inline-block;*/
+/*}*/
+
+/*.conf_call_type{*/
+/*    padding-left: 10px;*/
+/*    width: 50px;*/
+/*    display: inline-block*/
+/*}*/
+
+/*.conf_video_level{*/
+/*    padding-left: 10px;*/
+/*    padding-right: 10px;*/
+/*    width: 50px;*/
+/*    display: inline-block*/
+/*}*/
+
+/*.conf_status{*/
+/*    width: 120px;*/
+/*    display: inline-block;*/
+/*}*/
+
+/*.conf_mute{*/
+/*    width: 40px;*/
+/*    display: inline-block;*/
+/*    padding-top: 3px;*/
+/*}*/
+
+/*.conf_vmute{*/
+/*    width: 40px;*/
+/*    display: inline-block;*/
+/*    padding-top: 3px;*/
+/*}*/
+
+/*.conf_remove{*/
+/*   width: 35px;*/
+/*    display: inline-block;*/
+/*}*/
+/*.conf_re_invite{*/
+/*    width: 35px;*/
+/*    display: inline-block;*/
+/*}*/
+/* */
+/*.head_dial{ padding-top:2px;}*/
+/*.dial{ float:left;}*/
+/*.dial dt{ padding-bottom:2px;}*/
+/*.dial dt input{vertical-align:middle;}*/
+/*.tel_txt{ border:1px solid #dfe5e7; border-radius:3px;  height:35px; font-size:16px; background:#FFF; color:#768595; text-indent:5px; width:120px;}*/
+/*.keyboard{ background:url(./images/keyboard.png) no-repeat; border:0; width:25px; height:18px; cursor:pointer; margin:auto 10px auto 2px;}*/
+/*.next_btn{border-radius:5px; background: url(./images/created_next.png) no-repeat 10px 5px #8b9eb6; width:120px; height:25px; line-height:25px; border:0; color:#FFF;  text-align:center; cursor:pointer; text-indent:20px;}*/
+/*.dial dd input,.dial dd ul{ float:left;}*/
+/*.dial dd ul{border:1px solid #dfe5e7; background:#FFF; border-radius:3px;  height:auto; width:118px; margin-left:2px;}*/
+/*.dial dd ul li{height:auto; line-height:23px; margin-left:10px; padding-left:16px;}*/
+/*.dial dd ul li.status1{ color:#f39700;}*/
+/*.dial dd ul li.status2{ color:#98bf40;}*/
+/*.dial dd ul li.status3{ color:#98bf40;}*/
+/*.dial dd ul li.status4{ color:#23a9f6;}*/
+/*.dial dd ul li.status5{ color:#adadad;}*/
+/*.dial dd b{ line-height:23px; padding-left:1px;}*/
+
+/*.dial_btn{ float:left;}*/
+/*.dial_btn li{ float:left; margin-left:12px;text-align:center;}*/
+/*.dial_btn li a{ display:block; border-radius:10px; border:1px solid #dfe5e7; width:48px; height:48px; margin:4px auto;}*/
+/* */
+
+/*.dial_btn,.gj_btn,.zj_btn,.bc_btn,.zjie_btn,.myd_btn,.jt_btn,.qca_btn,.lj_btn,.qc_btn,.hy_btn,.sx_btn,.xx_btn,.wc_btn,.jy_btn,.xz_btn,.sm_btn,.qz_btn,.qiangjie_btn,.lanjie_btn{background:url(./images/created_dial_off.png) no-repeat;background-color:#FFF;}*/
+/*.wh_btn.on,.zj_btn.on,.gj_btn.on,.bc_btn.on,.zjie_btn.on,.myd_btn.on,.jt_btn.on,.qca_btn.on,.lj_btn.on,.qc_btn.on,.hy_btn.on,.sx_btn.on,.xx_btn.on,.wc_btn.on,.jy_btn.on,.xz_btn.on,.sm_btn.on{ background:url(./images/created_dial_on.png) no-repeat;}*/
+
+/*.wh_btn,.wh_btn.on{ background:url(./images/phonebar/call.png) no-repeat;  -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}!* 外呼 *!*/
+/*.wh_btn.on{ background:url(./images/phonebar/call.png) no-repeat;  -webkit-filter: grayscale(1%);-moz-filter: grayscale(1%);-ms-filter: grayscale(1%); -o-filter: grayscale(1%);filter: grayscale(1%);filter: gray;}   */
+/*.gj_btn,.gj_btn.on{background:url(./images/phonebar/hangup_enable.png) no-repeat; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}!* 挂机*!*/
+/*.gj_btn.on{ background:url(./images/phonebar/hangup_enable.png) no-repeat; -webkit-filter: grayscale(1%);-moz-filter: grayscale(1%);-ms-filter: grayscale(1%); -o-filter: grayscale(1%);filter: grayscale(1%);filter: gray;}   */
+/*.zj_btn,.zj_btn.on{ background-position:-61px -1px;}!* 摘机*!*/
+/*.zj_btn.on{background-color:#999999; border:1px solid #999999;}*/
+
+/*.bc_btn,.bc_btn.on{background:url(./images/phonebar/hold.png) no-repeat; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}!* 保持 *!*/
+/*.bc_btn.on{background:url(./images/phonebar/hold.png) no-repeat; -webkit-filter: grayscale(1%);-moz-filter: grayscale(1%);-ms-filter: grayscale(1%); -o-filter: grayscale(1%);filter: grayscale(1%);filter: gray;}*/
+
+/*.bc2_btn,.bc2_btn.on{background:url(./images/phonebar/unhold.png) no-repeat; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}!* 保持 *!*/
+/*.bc2_btn.on{background:url(./images/phonebar/unhold.png) no-repeat; -webkit-filter: grayscale(1%);-moz-filter: grayscale(1%);-ms-filter: grayscale(1%); -o-filter: grayscale(1%);filter: grayscale(1%);filter: gray;}*/
+
+/*.zjie_btn,.zjie_btn.on{background:url(./images/phonebar/transfer.png) no-repeat; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}!* 转接 *!*/
+/*.zjie_btn.on{background:url(./images/phonebar/transfer.png) no-repeat; -webkit-filter: grayscale(1%);-moz-filter: grayscale(1%);-ms-filter: grayscale(1%); -o-filter: grayscale(1%);filter: grayscale(1%);filter: gray;}*/
+
+/*.zixun_btn,.zixun_btn.on{background:url(./images/phonebar/consultation.png) no-repeat; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}!* 转接 *!*/
+/*.zixun_btn.on{background:url(./images/phonebar/consultation.png) no-repeat; -webkit-filter: grayscale(1%);-moz-filter: grayscale(1%);-ms-filter: grayscale(1%); -o-filter: grayscale(1%);filter: grayscale(1%);filter: gray;}*/
+
+/*.myd_btn,.myd_btn.on{background-position:-151px -2px; }!* 满意度 *!*/
+/*.myd_btn.on{ background-color:#f7ae2d; border:1px solid #f7ae2d;}*/
+/*.jt_btn,.jt_btn.on{background:url(./images/mute.jpg) no-repeat; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}!* 监听 *!*/
+/*.jt_btn.on{background:url(./images/mute.jpg) no-repeat;-webkit-filter: grayscale(1%);-moz-filter: grayscale(1%);-ms-filter: grayscale(1%); -o-filter: grayscale(1%);filter: grayscale(1%);filter: gray;}   */
+/*.qca_btn,.qca_btn.on{ background-position:-211px -1px;}!* 强插 *!*/
+/*.qca_btn.on{ background-color:#ed4e4e; border:1px solid #ed4e4e;}*/
+/*.lj_btn,.lj_btn.on{ background-position:-242px 0px;}!* 拦截 *!*/
+/*.lj_btn.on{ background-color:#999999; border:1px solid #999999;}*/
+/*.qc_btn,.qc_btn.on{ background-position:-271px -1px;}!* 强拆 *!*/
+/*.qc_btn.on{ background-color:#ed4e4e; border:1px solid #ed4e4e;}*/
+/*.hy_btn,.hy_btn.on{ background:url(./images/phonebar/conference.png) no-repeat;}!* 会议 *!*/
+/*.hy_btn.on{background:url(./images/phonebar/conference.png) no-repeat;-webkit-filter: grayscale(1%);-moz-filter: grayscale(1%);-ms-filter: grayscale(1%); -o-filter: grayscale(1%);filter: grayscale(1%);filter: gray;}   */
+/*.sx_btn,.sx_btn.on{  background:url(./images/phonebar/online.png) no-repeat;}!* 上线 *!*/
+/*.sx_btn.on{background:url(./images/phonebar/online.png) no-repeat; -webkit-filter: grayscale(1%);-moz-filter: grayscale(1%);-ms-filter: grayscale(1%); -o-filter: grayscale(1%);filter: grayscale(1%);filter: gray;}   */
+/*.xx_btn,.xx_btn.on{ background-position:-360px 0px;}!* 休息 *!*/
+/*.xx_btn.on{ background-color:#23a9f6; border:1px solid #23a9f6;}*/
+/*.wc_btn,.wc_btn.on{ background-position:-392px 0px;}!* 外出 *!*/
+/*.wc_btn.on{ background-color:#d51776; border:1px solid #d51776;}*/
+/*.jy_btn,.jy_btn.on{ background-position:-421px -1px;}!* 静音 *!*/
+/*.jy_btn.on{ background-color:#999999; border:1px solid #999999;}*/
+/*.xz_btn,.xz_btn.on{ background:url(./images/phonebar/setFree.png) no-repeat;  -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;} !* 置闲 *!*/
+/* .xz_btn.on{background:url(./images/phonebar/setFree.png) no-repeat; -webkit-filter: grayscale(1%);-moz-filter: grayscale(1%);-ms-filter: grayscale(1%); -o-filter: grayscale(1%);filter: grayscale(1%);filter: gray;}  */
+/*.sm_btn,.sm_btn.on{ background:url(./images/phonebar/busy_enable.png) no-repeat; -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;} !* 置忙 *!*/
+/*.sm_btn.on{background:url(./images/phonebar/busy_enable.png) no-repeat; -webkit-filter: grayscale(1%);-moz-filter: grayscale(1%);-ms-filter: grayscale(1%); -o-filter: grayscale(1%);filter: grayscale(1%);filter: gray;}   */
+/*.qz_btn,.qz_btn.on{background:url(./images/phonebar/reset.png) no-repeat;}!* 强置 *!*/
+/*.qz_btn.on{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}.lanjie_btn,.lanjie_btn.on{background:url(./images/phonebar/created_lanjie.png) no-repeat;}!* 拦截 *!*/
+/*.lanjie_btn.on{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}*/
+/*qiangjie_btn,.qiangjie_btn.on{background:url(./images/phonebar/created_qiangjie.png) no-repeat;}!* 抢接 *!*/
+/*.qiangjie_btn.on{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%); -o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}   */
+
+/*!* asr实时消息的对话框 *!*/
+/*#chat-container {*/
+/*    width: 90%;*/
+/*    max-width: 600px;*/
+/*    margin: 20px auto;*/
+/*    background: white;*/
+/*    border: 1px solid #ddd;*/
+/*    border-radius: 8px;*/
+/*    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
+/*    padding: 10px;*/
+/*}*/
+/*.message {*/
+/*    padding: 10px;*/
+/*    margin: 10px 0;*/
+/*    border-radius: 8px;*/
+/*}*/
+/*.customer {*/
+/*    background-color: #F5F5F5;*/
+/*    align-self: flex-start;*/
+/*}*/
+/*.agent {*/
+/*    background-color: #95EC69;*/
+/*    align-self: flex-end;*/
+/*}*/
+/*.system-message {*/
+/*    text-align: center;*/
+/*    color: gray;*/
+/*    font-style: italic;*/
+/*}*/
+/*.message-container {*/
+/*    display: flex;*/
+/*    flex-direction: column;*/
+/*}*/
+/*.message-header {*/
+/*    font-weight: bold;*/
+/*    margin-bottom: 5px;*/
+/*}*/
+
+/*!* 转接和咨询区域的下拉框样式 *!*/
+/*#transfer_to_groupIds,*/
+/*#transfer_to_member {*/
+/*    width: 150px;*/
+/*    max-height: 200px;*/
+/*    overflow-y: auto;*/
+/*    border: 1px solid #dfe5e7;*/
+/*    border-radius: 3px;*/
+/*    background: #FFF;*/
+/*    color: #768595;*/
+/*    font-size: 12px;*/
+/*    padding: 5px;*/
+/*}*/
+
+/*#transfer_to_groupIds option,*/
+/*#transfer_to_member option {*/
+/*    padding: 5px;*/
+/*    cursor: pointer;*/
+/*}*/
+
+/*#transfer_to_groupIds option:hover,*/
+/*#transfer_to_member option:hover {*/
+/*    background-color: #f0f0f0;*/
+/*}*/

src/assets/callCenterPhoneBarSdk/phone-bar-ex.html

@@ -0,0 +1,767 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>呼叫中心html客户端工具条</title>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="stylesheet" href="page.css" />
+    <script type="text/javascript" src="jquery-1.11.0.js"></script>
+    <script type="text/javascript" src="ccPhoneBarSocket.js"></script>
+	  
+    <script type="text/javascript">
+        var _phoneBar = new ccPhoneBarSocket();
+        var scriptServer = "192.168.67.217";
+        var  extnum = '1002'; //分机号
+        var opnum = '1002'; //工号
+        var skillLevel = 9; //技能等级
+        var groupId = 1; // 业务组id
+        if(window.location.href.toString().indexOf("?") != -1){
+            console.log( ccPhoneBarSocket.utils );
+            extnum = ccPhoneBarSocket.utils.getQueryParam("extNum");
+            opnum = ccPhoneBarSocket.utils.getQueryParam("opNum");
+            groupId = ccPhoneBarSocket.utils.getQueryParam("groupId");
+            console.log("extNum=", extnum, "opNum=", opnum);
+        }
+
+        function resetExtNumAndOpNum(ext, op, groupId) {
+            window.location.href = "?extNum=" + ext + "&opNum=" + op + "&groupId=" + groupId;
+        };
+
+		(function loadLoginToken(){
+
+             
+            var getTokenUrl = "http://"+ scriptServer +":8880/call-center/create-token";
+            var destUrl = getTokenUrl + "?extnum=" + extnum + "&opnum=" + opnum
+            + "&groupId=" + groupId +"&skillLevel=" + skillLevel
+            ;
+
+            var script = document.createElement("script");
+            script.type = "text/javascript";
+            script.src = destUrl;
+            document.getElementsByTagName('head')[0].appendChild(script);
+		})();
+
+        (function loadExtPassword(){
+            var  extPassword = '1234567';
+            var url = "http://"+ scriptServer +":8880/call-center/create-ext-password?pass=" + extPassword;
+            var script = document.createElement("script");
+            script.type = "text/javascript";
+            script.src = url;
+            document.getElementsByTagName('head')[0].appendChild(script);
+        })();
+
+        (function loadGatewayList(){
+            var url = "http://"+ scriptServer +":8880/call-center/create-gateway-list" ;
+            var script = document.createElement("script");
+            script.type = "text/javascript";
+            script.src = url;
+            document.getElementsByTagName('head')[0].appendChild(script);
+        })();
+
+        // 将视频级别填充到下拉列表中的函数
+        function populateVideoLevelDropdown(objId) {
+            let select = document.getElementById(objId);
+            if(select == null) return;
+            // 遍历视频级别数据
+            for (let key in ccPhoneBarSocket.videoLevels) {
+                if (ccPhoneBarSocket.videoLevels.hasOwnProperty(key)) {
+                    let level = ccPhoneBarSocket.videoLevels[key];
+                    let option = document.createElement('option');
+                    option.value = level.levelId; // 设置值为 levelId
+                    option.text = level.description; // 显示文本
+                    select.appendChild(option);
+                }
+            }
+            select.value = ccPhoneBarSocket.videoLevels.HD.levelId ;
+        }
+
+	</script>
+
+<script> 
+var _callConfig = null;
+
+window.onload = function(){
+
+    // 调用函数填充视频清晰度的下拉列表
+    populateVideoLevelDropdown('videoLevelSelect');
+    populateVideoLevelDropdown('member_video_level');
+
+	//工具条对象断开事件
+	// _phoneBar.on(ccPhoneBarSocket.eventList.ws_disconnected, function(msg){
+	// 	console.log(msg);
+	// });
+    //
+    // //工具条对象连接成功
+    // _phoneBar.on(ccPhoneBarSocket.eventList.ws_connected, function(msg){
+    //     console.log(msg);
+    // });
+    //
+	// _phoneBar.on(ccPhoneBarSocket.eventList.callee_ringing, function(msg){
+	// 	console.log(msg.content, "被叫振铃事件");
+	// });
+	// _phoneBar.on(ccPhoneBarSocket.eventList.caller_answered, function(msg){
+	// 	console.log(msg, "主叫接通" );
+	// });
+    // _phoneBar.on(ccPhoneBarSocket.eventList.caller_hangup, function(msg){
+    //     console.log(msg, "主叫挂断");
+    // });
+    //
+	// _phoneBar.on(ccPhoneBarSocket.eventList.callee_answered, function(msg){
+	// 	console.log(msg, "被叫接通");
+	// });
+	// _phoneBar.on(ccPhoneBarSocket.eventList.callee_hangup, function(msg){
+	// 	console.log(msg, "被叫挂断");
+	// });
+    //
+	// _phoneBar.on(ccPhoneBarSocket.eventList.status_changed, function(msg){
+	// 	console.log("座席状态改变: " ,msg);
+	// });
+    //
+    // // 一次外呼结束;
+    // _phoneBar.on(ccPhoneBarSocket.eventList.outbound_finished, function(msg){
+    // 	console.log('一次外呼结束', msg);
+    // });
+
+    // websocket通信对象断开事件;
+    _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.ws_disconnected.code, function(msg){
+        console.log(msg);
+        _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.ws_disconnected.code);
+        $("#transfer_area").hide();
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.OUTBOUND_START, function (msg) {
+        console.log('outbound_start',msg);
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.request_args_error.code, function(msg){
+        console.log(msg);
+        _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.request_args_error.code);
+    });
+
+    //用户已在其他设备登录
+    _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.user_login_on_other_device.code, function(msg){
+        _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.user_login_on_other_device.code);
+        alert(ccPhoneBarSocket.eventListWithTextInfo.user_login_on_other_device.msg);
+    });
+
+    //websocket连接成功
+    _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.ws_connected.code, function(msg){
+        console.log(msg);
+        $("#loginTime").text(new Date().toLocaleTimeString());
+        _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.ws_connected.code);
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.callee_ringing.code, function(msg){
+        console.log(msg.content, "被叫振铃事件");
+        _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.callee_ringing.code);
+    });
+    _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.caller_answered.code, function(msg){
+        console.log(msg, "主叫接通" );
+        $("#agentStatus").text("通话中");
+        _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.caller_answered.code);
+    });
+    _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.caller_hangup.code, function(msg){
+        console.log(msg, "主叫挂断");
+        $("#agentStatus").text("通话结束");
+        $("#reInviteVideoBtn").attr("disabled","disabled");
+        $("#sendVideoFileBtn").attr("disabled","disabled");
+        $("#transfer_area").hide();
+        _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.caller_hangup.code);
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.callee_answered.code, function(msg){
+        console.log(msg, "被叫接通");
+        _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.callee_answered.code);
+    });
+    _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.callee_hangup.code, function(msg){
+        console.log(msg, "被叫挂断");
+        $("#transfer_area").hide();
+        _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.callee_hangup.code);
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventListWithTextInfo.status_changed.code, function(msg){
+        console.log("座席状态改变: " ,msg);
+        $("#agentStatus").text(msg["object"]["text"]);
+        _phoneBar.updatePhoneBar(msg, ccPhoneBarSocket.eventListWithTextInfo.status_changed.code);
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.acd_group_queue_number, function(msg){
+        console.log("当前排队人数消息: " ,msg);
+        $("#queueStat").text(msg["object"]["queue_number"]);
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.on_audio_call_connected, function(msg){
+        console.log("音频通话已建立: " ,msg);
+        $("#reInviteVideoBtn").removeAttr("disabled");
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.customer_channel_hold, function (msg) {
+        console.log("客户通话已保持: " ,msg);
+        $("#callStatus").text("通话已保持");
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.customer_channel_unhold, function (msg) {
+        console.log("客户通话已接回." ,msg);
+        $("#callStatus").text("客户通话已接回");
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.on_video_call_connected, function(msg){
+        console.log("视频通话已建立: " ,msg);
+        $("#sendVideoFileBtn").removeAttr("disabled");
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.inner_consultation_start, function(msg){
+        $("#callStatus").text("咨询开始.");
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.inner_consultation_stop, function(msg){
+        $("#callStatus").text("咨询结束.");
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.transfer_call_success, function(msg){
+        $("#callStatus").text("电话转接成功.");
+        $("#externalPhoneNumber").val('');
+    });
+
+    // 订阅的坐席状态列表发生改变
+    _phoneBar.on(ccPhoneBarSocket.eventList.agent_status_data_changed, function (msg) {
+        console.log("agent_status_data_changed.");
+        // 当 transfer_to_groupId 值改变时更新 transfer_to_member
+        $(transferToGroupId).off("change");
+        $(transferToGroupId).on("change", function () {
+            refreshMemberIdList();
+        });
+        refreshMemberIdList();
+    });
+
+    /* conference related events  */
+    _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MEMBER_ANSWERED, function (msg) {
+        console.log("会议成员已经接通.", msg);
+        var memberPhone = $.trim(msg.object.phone);
+        var memberItemId = "#conf_member_" + memberPhone;
+
+        $(".conf_status", $(memberItemId)).text(msg.object.status);
+        $(".conf_status", $(memberItemId)).html("通话中").css("color", "green");
+
+        $(".conf_mute", $(memberItemId)).find("img").show();
+        $(".conf_vmute", $(memberItemId)).find("img").show();
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MEMBER_VMUTED_SUCCESS, function (msg) {
+        console.log("会议成员已被禁用视频.", msg);
+        var memberPhone = $.trim(msg.object.phone);
+        var muteObj = $(".conf_vmute", $("#conf_member_" + memberPhone));
+        muteObj.find("img")[0].src = "images/no_video.jpg";
+        muteObj.find("a").removeAttr("onclick");
+        muteObj.find("a").off("click");
+        muteObj.find("a").on("click", function () {
+            _phoneBar.conferenceUnVMuteMember(memberPhone);
+        } );
+    });
+    _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MEMBER_UnVMUTED_SUCCESS, function (msg) {
+        console.log("会议成员启用视频成功.", msg);
+        var memberPhone = $.trim(msg.object.phone);
+        var muteObj = $(".conf_vmute", $("#conf_member_" + memberPhone));
+        muteObj.find("img")[0].src = "images/video.jpg";
+        muteObj.find("a").removeAttr("onclick");
+        muteObj.find("a").off("click");
+        muteObj.find("a").on("click", function () {
+            _phoneBar.conferenceVMuteMember(memberPhone);
+        } );
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MEMBER_MUTED_SUCCESS, function (msg) {
+        console.log("会议成员已被禁言.", msg);
+        var memberPhone = $.trim(msg.object.phone);
+        var muteObj = $(".conf_mute", $("#conf_member_" + memberPhone));
+        muteObj.find("img")[0].src = "images/unmute.jpg";
+        muteObj.find("a").removeAttr("onclick");
+        muteObj.find("a").off("click");
+        muteObj.find("a").on("click", function () {
+            _phoneBar.conferenceUnMuteMember(memberPhone);
+        } );
+    });
+    _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MEMBER_UNMUTED_SUCCESS, function (msg) {
+        console.log("会议成员解除禁言成功.", msg);
+        var memberPhone = $.trim(msg.object.phone);
+        var muteObj = $(".conf_mute", $("#conf_member_" + memberPhone));
+        muteObj.find("img")[0].src = "images/mute.jpg";
+        muteObj.find("a").removeAttr("onclick");
+        muteObj.find("a").off("click");
+        muteObj.find("a").on("click", function () {
+            _phoneBar.conferenceMuteMember(memberPhone);
+        } );
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MEMBER_HANGUP, function (msg) {
+        console.log("会议成员已经挂机.", msg);
+        var memberPhone = $.trim(msg.object.phone);
+        var memberItemId = "#conf_member_" + memberPhone;
+
+        // 隐藏 mute及 vmute按钮
+        $(".conf_mute", $(memberItemId)).find("img").hide();
+        $(".conf_vmute", $(memberItemId)).find("img").hide();
+        $(".conf_re_invite", $(memberItemId)).show();
+
+        var answerStatus = ( msg.object.answeredTime === 0) ? "未接通" :  msg.object.hangupClause;
+        var color = ( msg.object.answeredTime === 0) ? "red" : "green";
+        $(".conf_status", $(memberItemId)).html("已挂机("+ answerStatus  +")").css("color", color);
+        $(".conf_status", $(memberItemId)).fadeTo('fast', 0.1).fadeTo('fast', 1.0);
+        var blinkText = setInterval(function () {
+            $(".conf_status", $(memberItemId)).fadeTo('fast', 0.1).fadeTo('fast', 1.0);
+        }, 700); // 每0.5秒闪烁一次
+
+        setTimeout(function () {
+            console.log("memberItemId=", memberItemId);
+            clearInterval(blinkText);
+            // $(memberItemId).remove(); //暂不自动移除参会者，由主持人手动操作处理;
+        }, 5000);
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MODERATOR_ANSWERED, function (msg) {
+        console.log("电话会议开始，主持人已接通.", msg);
+        onConferenceStart();
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_MODERATOR_HANGUP, function (msg) {
+        console.log("电话会议结束，主持人已挂机.", msg);
+        onConferenceEnd();
+    });
+
+    _phoneBar.on(ccPhoneBarSocket.eventList.CONFERENCE_TRANSFER_SUCCESS_FROM_EXISTED_CALL, function (msg) {
+        console.log("成功把通话转接到多人视频会议.", msg);
+        onTransferToConferenceSuccess(msg);
+    });
+
+    var _gatewayList = [{"gatewayAddr":"192.168.67.217:5080","callProfile":"internal","authUsername":"1002","callerNumber":"13195510173\r\n13195510174\r\n13195510188","updateTime":1769767068989,"calleePrefix":"","priority":1,"audioCodec":"pcma","uuid":"3","concurrency":2,"register":0}];
+
+    // 电话工具条参数配置;
+	_callConfig = {
+        'useDefaultUi' : true,
+        // loginToken 信息是加密的字符串， 包含以下字段信息：extnum[分机号]、opnum[工号]、groupId[业务组]、skillLevel[技能等级]
+        'loginToken': '',
+
+         // 电话工具条服务器端的地址; 端口默认是1081
+        'ipccServer': scriptServer + ':1081',
+
+        // 网关列表， 默认需要加密后在在通过客户端向呼叫系统传递;
+        // 注意在注册模式下，网关参数更改之后，必须重启语音服务 [docker restart freeswitch] 方可生效，不支持热更新;
+        // 支持多个网关同时使用，按照优先级依次使用, 支持网关负载容错溢出 [第一条网关外呼出错后，自动使用第二条网关重试，直至外呼不出错] ;
+        'gatewayList':  _gatewayList,
+
+        // 网关列表信息是否为加密模式;
+        'gatewayEncrypted': false
+    };
+
+    // 使用工具条之前需要先初始化 _callConfig 参数， 填充各个字段的值： 合计7个字段，必须填写正确 ；
+	//********************************************************************************************
+    // 以下代码设置加密的参数： loginToken、extPassword、gatewayList；   在本页面的demo演示中需要调用服务器端接口获取密文字符串;
+
+	console.log('loginToken = ',loginToken);
+	if(typeof(loginToken) != "undefined") {
+        _callConfig["loginToken"] = loginToken;
+    } else{
+	    alert("电话工具条：无法获取 loginToken!");
+	    return;
+    }
+
+    console.log('_phoneEncryptPassword = ',_phoneEncryptPassword);
+    if(typeof(_phoneEncryptPassword) != "undefined") {
+        _callConfig["extPassword"] = _phoneEncryptPassword;
+    } else{
+        alert("电话工具条：无法获取 _phoneEncryptPassword!");
+        return;
+    }
+
+    console.log('_configGatewayList = ', _configGatewayList);
+    if(typeof(_configGatewayList) != "undefined" && _callConfig["gatewayEncrypted"]) {
+        //_callConfig["gatewayList"] = _configGatewayList;
+    } else{
+       //  alert("电话工具条：无法获取 _configGatewayList!");
+    }
+
+    _phoneBar.initConfig(_callConfig);
+};
+
+function onConferenceEnd() {
+    document.getElementById("endConference").setAttribute("disabled", "true");
+    document.getElementById("startConference").removeAttribute("disabled");
+    document.getElementById("conference_member_list").style.display = "none";
+    // 启用外呼按钮
+    $("#callBtn").addClass('on');
+    // 启用置闲按钮
+    $("#setFree").addClass('on');
+    // 启用签出按钮
+    $("#onLineBtn").addClass('on');
+    //移除所有的参会成员
+    $(".conf_member_item_row").remove();
+
+    let tips = "多方通话结束";
+    $("#callStatus").text(tips);
+    $("#agentStatus").text(tips);
+}
+
+function onConferenceStart() {
+    document.getElementById("endConference").removeAttribute("disabled");
+    document.getElementById("conference_member_list").style.display = "block";
+    let tips = "多方通话进行中";
+    $("#callStatus").text(tips);
+    $("#agentStatus").text(tips);
+}
+
+/**
+ *  成功把电话转接到多人视频会议
+ */
+function onTransferToConferenceSuccess(msg) {
+    $("#callStatus").text("已接入多方会议");
+    $("#setFree").removeClass("on");
+    $("#setBusy").removeClass("on");
+    $("#callBtn").removeClass("on");
+
+    //界面显示成功转接到视频会议电话
+    var phone = msg.object.phone;
+    var name = msg.object.phone;
+    console.log("onTransferToConferenceSuccess:", msg);
+    _phoneBar.conferenceAddMemberFromExistCall(name, phone);
+}
+
+
+</script>
+
+</head>
+<body>
+
+<form>
+
+<table width="1224">
+<tr>
+  <td width="70%" colspan="2" height="35" style="text-indent: 20px;">
+      <b>签入时间：</b> <span id="loginTime" title="" class="status4">00:00:00</span> &nbsp;&nbsp;
+      <b>状态：</b> <span id="agentStatus" title="" class="status4">空闲</span> &nbsp;&nbsp;
+      <b>当前排队人数：</b><span id="queueStat" title="" class="status4">0</span>
+
+  </td>
+</tr>
+<tr>
+<td width="70%">
+<div>
+    <div class="head_dial" style="padding-left: 10px; ">
+	     
+        <dl class="dial">
+            <dt>
+                <label for="ccphoneNumber"></label><input type="text" name="ccphoneNumber" id="ccphoneNumber" placeholder="输入电话号码" class="tel_txt" />
+            </dt>
+            <dd>
+                <ul><li id="callStatus" title="" class="status4">没有连接</li></ul>
+                <span id="showCallLen" style="display:none"><b>00:00</b></span>
+            </dd>
+        </dl>
+
+        <ul class="dial_btn">
+            <li><a href="#" id="setFree" class="xz_btn off"></a><span>置闲</span></li>
+            <li><a href="#" id="setBusy" class="sm_btn off"></a>
+                <select style="width: 50px;" id="setBusySubList">
+                    <option value="3">置忙</option>
+                    <option value="31">小休</option>
+                    <option value="32">会议</option>
+                    <option value="33">培训</option>
+                </select>
+            </li>
+            <li><a href="#" id="callBtn" class="wh_btn"></a><span>外呼</span></li>
+            <li id="holdBtnLi"><a href="#" id="holdBtn" class="bc_btn off"></a><span>保 持</span></li>
+            <li id="unHoldBtnLi"><a href="#" id="unHoldBtn" class="bc2_btn off"></a><span>取消保持</span></li>
+            <li><a href="#" id="transferBtn" class="zjie_btn"></a><span>转接</span></li>
+            <li><a href="#" id="consultationBtn" class="zixun_btn"></a><span>咨询</span></li>
+            <li><a href="#" id="conferenceBtn" class="hy_btn"></a><span>会议</span></li>
+            <li><a href="#" id="hangUpBtn" class="gj_btn"></a><span>挂机</span></li>
+            <li><a href="#" id="resetStatus" class="qz_btn"></a><span>强置</span></li>
+            <li><a href="#" id="onLineBtn" class="sx_btn on"></a><span>签入</span></li>
+        </ul>
+    </div>
+</div>
+</td>
+<td width="30%" style="display: none;">
+<div>
+    <div  style="padding-left: 10px; ">
+        &nbsp; &nbsp;  外呼设置：
+        <label for="videoCallBtn"> <input type="radio" value="video" name="callType" id="videoCallBtn" />视频外呼</label>  &nbsp;&nbsp;
+        <label for="audioCallBtn"> <input type="radio" value="audio"  name="callType" checked="checked" id="audioCallBtn"  />语音外呼</label>  <br />
+
+        &nbsp; &nbsp; 视频清晰度:
+        <label for="videoLevelSelect"></label><select id="videoLevelSelect">
+        </select>
+        <input type="button" id="reInviteVideoBtn" title="发送视频邀请，可把音频通话转换为视频通话。"
+         onclick="_phoneBar.reInviteVideoCall();"       value="视频邀请" disabled="disabled" >
+
+        &nbsp;&nbsp;&nbsp;&nbsp;
+        <label for="videoListSelect"></label>
+         <select id="videoListSelect">
+             <option value="">请选择视频</option>
+             <option value="/usr/local/freeswitchvideo/share/freeswitch/sounds/bank.mp4">客服实例视频</option>
+             <option value="/usr/local/freeswitchvideo/share/freeswitch/sounds/conference.mp4">多方会议视频</option>
+             <option value="/usr/local/freeswitchvideo/share/freeswitch/sounds/15-seconds.mp4">15-seconds-demo</option>
+
+         </select>
+        <input type="button" id="sendVideoFileBtn" title="推送视频给对方，以便结束当前通话。"
+               onclick="_phoneBar.sendVideoFile($('#videoListSelect').val());"   value="推送视频" disabled="disabled" >
+
+    </div>
+</div>
+</td>
+</tr>
+
+    <tr id="conference_area" style="display: none">
+
+        <td colspan="2" style="padding-left: 130px; padding-top: 30px;">
+            <div>
+                <div>
+                    <div id="conference_start" style="display: block">
+                        <!-- 会议布局: &nbsp; -->
+                        <select id="conf_layout" name="conf_layout" style="display: none">
+                            <option value="2x2">2x2</option>
+                            <option value="3x3">3x3</option>
+                            <option value="1up_top_left+3">一主三从</option>
+                        </select>
+                        &nbsp;
+                        <!-- 画布尺寸: -->
+                        <select id="conf_template" name="conf_template" style="display: none">
+                            <option value="480p" selected="selected">480x640</option>
+                            <option value="720p">720x1080</option>
+                            <option value="default">default</option>
+                        </select>
+                        &nbsp;
+                         会议类型:
+                        <select id="conf_call_type2" name="conf_call_type2"  >
+                           <!-- <option value="video">视频</option> -->
+                            <option value="audio">音频</option>
+                        </select>
+                        <input type="hidden" value="audio" id="conf_call_type" name="conf_call_type" />
+                        &nbsp;
+                        <input type="button" name="startConference" id="startConference"
+                               onclick="_phoneBar.conferenceStartBtnUI('')"
+                               style="width: 70px;" value="启动会议">
+                        &nbsp;
+                        <input type="button" name="endConference" id="endConference"
+                               onclick="_phoneBar.conferenceEnd()"
+                               disabled="disabled"
+                               style="width: 70px;" value="结束会议">
+                    </div>
+
+                    <div style="width: 100%;"> &nbsp; </div>
+
+                    <div id="conference_member_list" style="display: none">
+                        <ul>
+                            <li id="conference_header">
+                                <span class="conf_name"> <input id="member_name" name="member_name" placeholder="姓名" style="width: 60px;" /> </span> &nbsp;
+                                <span class="conf_phone"> <input id="member_phone" name="member_phone" placeholder="手机号" style="width: 110px;" /> </span> &nbsp;
+                                <span class="conf_call_type">
+                                <select id="member_call_type" name="member_call_type" style="display: none">
+                                   <option value="video">视频</option>
+                                   <option value="audio" selected>音频</option>
+                               </select>
+                            </span>
+                                <span class="conf_video_level" style="display: none">
+                                <select id="member_video_level" name="member_video_level">
+                               </select>
+                            </span>
+
+                                <span class="conf_name">
+                               <input type="button" name="addConfMember" id="addConfMember"
+                                      onclick="_phoneBar.conferenceAddMemberBtnUI(0)"
+                                      style="width: 70px;" value="加入会议">
+                           </span>
+                            </li>
+
+                            <!-- 会议成员展示模版html  -->
+                            <li id="conf_member_template"  style="display: none;">
+                                <span class="conf_name">{member_name}</span>
+                                <span class="conf_phone">{member_phone}</span>
+                                <span class="conf_mute"><a href="javascript:void(0)" onclick="_phoneBar.conferenceMuteMember('{member_phone}')"><img alt="禁言该成员。" src="images/mute.jpg" width="15" height="17" /> </a> </span>
+                                <span class="conf_vmute" style="display: none"><a href="javascript:void(0)" onclick="_phoneBar.conferenceVMuteMember('{member_phone}')"><img alt="关闭该成员的视频。" src="images/video.jpg" /> </a></span>
+                                <span class="conf_remove"><a href="javascript:void(0)" onclick="_phoneBar.conferenceRemoveMembers('{member_phone}')" title="踢除会议成员。">移除</a></span>
+                                <span class="conf_re_invite"><a href="javascript:void(0)" onclick="_phoneBar.conferenceAddMemberBtnUI(1, '{member_phone}', '{member_name}')" title="重新呼叫。">重呼</a></span>
+                                <span class="conf_status">{member_status}</span>
+                            </li>
+
+
+                            <li></li>
+                        </ul>
+                    </div>
+
+
+                </div>
+            </div>
+        </td>
+
+    </tr>
+
+<tr id="transfer_area" width="100%" style="display: none">
+
+        <td colspan="2" width="100%" style="padding-left: 140px; padding-top: 30px;">
+            <table width="100%">
+                 <tr>
+                       <td width="90">业务组   </td>
+                       <td width="90">坐席成员</td>
+                       <td>&nbsp; </td>
+                 </tr>
+                <tr>
+                    <td>
+                        <select size="10" id="transfer_to_groupIds" name="transfer_to_groupIds">
+                            <option value="">请选择</option>
+                        </select>
+                    </td>
+
+                    <td>
+                        <select size="10" id="transfer_to_member" name="transfer_to_member">
+                            <option value="">请选择</option>
+                        </select>
+                    </td>
+                    <td valign="middle">
+
+
+                        &nbsp;&nbsp; <input type="text" name="externalPhoneNumber" id="externalPhoneNumber" placeholder="电话号码"
+                               title="可以把当前通话转接到外线号码上。 如果该文本框留空，则忽略处理。"
+                               class="tel_txt" />
+                        <br /> <br />
+
+                        &nbsp;&nbsp; <input type="button" name="doTransferBtn" id="doTransferBtn"
+                               onclick="_phoneBar.transferBtnClickUI()"
+                               style="width: 70px;" value="转接电话" title="把当前电话转接给他/她处理。" /> &nbsp;
+
+                        &nbsp;&nbsp; <input type="button" name="stopCallWait" id="stopCallWait"
+                               onclick="_phoneBar.stopCallWaitBtnClickUI()"
+                               style="width: 70px;" value="接回客户" title="在咨询失败的情况下使用该按钮，接回处于等待中的电话。" /> &nbsp;
+
+                        &nbsp;&nbsp; <input type="button" name="transferCallWait" id="transferCallWait"
+                               onclick="_phoneBar.transferCallWaitBtnClickUI()"
+                               style="width: 70px;" value="转接客户" title="在咨询成功的情况下使用该按钮，把电话转接给专家坐席。" /> &nbsp;
+
+                       <input type="button" name="doConsultationBtn" id="doConsultationBtn"
+                               onclick="_phoneBar.consultationBtnClickUI()"
+                               style="width: 70px;" value="拨号咨询" title="" />
+
+                    </td>
+                </tr>
+            </table>
+        </td>
+
+</tr>
+
+</table>
+</form>
+
+<div id="chat-container">
+    <div id="chat-messages" class="message-container"></div>
+</div>
+
+<script>
+    // 以下是通话转接操作界面的功能
+    const transferToGroupId = document.getElementById("transfer_to_groupIds");
+    const transferToMember = document.getElementById("transfer_to_member");
+
+    // 填充 transfer_to_groupId 数据
+    function populateGroupIdOptions() {
+        transferToGroupId.length = 0; //清除所有选项
+        let groups = _phoneBar.callConfig.groups;
+        groups.forEach(group => {
+            const option = document.createElement("option");
+            option.value = group.groupId;
+            option.textContent = group.bizGroupName;
+            transferToGroupId.appendChild(option);
+        });
+        if(transferToGroupId.selectedIndex == -1){
+            transferToGroupId.selectedIndex = 0;
+        }
+    };
+
+    // 根据选中的 groupId 填充 transfer_to_member 数据
+    function populateMemberIdOptions(members, selectedGroupId) {
+        if (!Array.isArray(members)) {
+            console.error("populateMemberOptions: members is not a Array.", members);
+            return;
+        }
+        transferToMember.innerHTML = '<option value="">请选择</option>';
+        members
+            .filter(member => member.groupId === selectedGroupId)
+       .forEach(member => {
+            const option = document.createElement("option");
+        const statusMap = { 1 : "刚签入", 2: "空闲", 3: "忙碌", 4: "通话中", 5: "事后处理" };
+        option.value = member.opnum;
+        option.textContent = `${member.opnum}(${statusMap[member.agentStatus] || ""})`;
+        transferToMember.appendChild(option);
+      });
+    };
+
+    function refreshMemberIdList() {
+        const selectedGroupId = transferToGroupId.value;
+        if(selectedGroupId != "") {
+            let origValue = transferToMember.value;
+            populateMemberIdOptions(_phoneBar.callConfig.agentList, selectedGroupId);
+            //判断原始选择项是否还存在，存在则重新赋值;
+            let hasValue = transferToMember.querySelector(`option[value="${origValue}"]`) !== null;
+            if(hasValue) {
+                transferToMember.value = origValue;
+            }
+        }
+    }
+
+    /* asr实时对话文本框的功能 */
+    _phoneBar.on(ccPhoneBarSocket.eventList.asr_process_started, function (msg) {
+        $(chatMessages).html("");
+    });
+    _phoneBar.on(ccPhoneBarSocket.eventList.asr_result_generate, function (msg) {
+        handleAsrMessage(msg);
+    });
+    _phoneBar.on(ccPhoneBarSocket.eventList.asr_process_end_customer, function (msg) {
+        handleAsrMessage(msg);
+    });
+    _phoneBar.on(ccPhoneBarSocket.eventList.asr_process_end_agent, function (msg) {
+        handleAsrMessage(msg);
+    });
+    const chatMessages = document.getElementById('chat-messages');
+    $("#chat-container").hide();
+    function handleAsrMessage(data) {
+        $("#chat-container").show();
+        const { status, object } = data;
+        if (status === 619 && object) {
+            const { role, text, vadType } = object;
+            if(vadType == 1) {
+                addMessageToChat(role, text);
+            }
+        } else if (status === 620 || status === 621) {
+            addSystemMessage("对话已结束。");
+        }
+    }
+    function addMessageToChat(role, text) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'message ' + (role === 1 ? 'customer' : 'agent');
+
+        // 添加角色名称
+        const roleHeader = document.createElement('div');
+        roleHeader.className = 'message-header';
+        roleHeader.textContent = role === 1 ? '客户' : '我';
+
+        const messageContent = document.createElement('div');
+        messageContent.textContent = text;
+
+        // messageDiv.appendChild(roleHeader);
+        messageDiv.appendChild(messageContent);
+        chatMessages.appendChild(messageDiv);
+        scrollToBottom();
+    }
+    function addSystemMessage(text) {
+        const systemMessage = document.createElement('div');
+        systemMessage.className = 'system-message';
+        systemMessage.textContent = text;
+        chatMessages.appendChild(systemMessage);
+        scrollToBottom();
+    }
+    function scrollToBottom() {
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+
+</script>
+
+</body>
+</html>

src/utils/openIM.js

@@ -0,0 +1,37 @@
+import { getSDK, CbEvents } from '@openim/wasm-client-sdk';
+
+let sdkInstance = null;
+let cbEvents = null;
+export function getOpenIM() {
+  if (!sdkInstance) {
+    sdkInstance = getSDK({ debug: true })
+  }
+  return sdkInstance
+}
+export const getCbEvents = () => {
+  if (!cbEvents) {
+    cbEvents = CbEvents;
+  }
+  return cbEvents;
+};
+
+// 设置全局监听（只需一次）
+/*export const setupListeners = (store) => {
+  if (isListenersSetup) return;
+
+  const im = getOpenIM();
+
+  im.on(CbEvents.OnConnectSuccess, () => {
+    store.commit('im/setReadyState', true);
+    console.log('[OpenIM] 连接成功');
+  });
+
+  im.on(CbEvents.OnConnectFailed, (error) => {
+    store.commit('im/setError', error.message);
+    console.error('[OpenIM] 连接失败:', error);
+  });
+
+  // 其他必要的事件监听...
+  isListenersSetup = true;
+  console.log('[OpenIM] 全局监听器已设置');
+};*/

src/views/app/appDept/index.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索区域 -->
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+      <el-form-item label="部门名称" prop="deptName">
+        <el-input
+          v-model="queryParams.deptName"
+          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-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:dept:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          icon="el-icon-sort"
+          size="mini"
+          @click="toggleExpandAll"
+        >展开/折叠</el-button>
+      </el-col>
+    </el-row>
+
+    <!-- 部门树形表格 -->
+    <el-table
+      v-if="refreshTable"
+      v-loading="loading"
+      :data="deptList"
+      row-key="deptId"
+      :default-expand-all="isExpandAll"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+    >
+      <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dept:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['system:dept:add']"
+          >新增子部门</el-button>
+          <el-button
+            v-if="scope.row.parentId != 0"
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:dept:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 新增/修改部门弹窗 -->
+    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="上级部门" prop="parentId">
+          <treeselect
+            v-model="form.parentId"
+            :options="deptOptions"
+            :normalizer="normalizer"
+            placeholder="选择上级部门"
+            :disable-nodes="form.deptId ? [form.deptId] : []"
+          />
+        </el-form-item>
+        <el-form-item label="部门名称" prop="deptName">
+          <el-input v-model="form.deptName" placeholder="请输入部门名称" />
+        </el-form-item>
+      </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 { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/appDept";
+// 树形选择器组件
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  name: "SimpleDept",
+  components: { Treeselect },
+  data() {
+    return {
+      // 加载状态
+      loading: true,
+      // 是否显示搜索
+      showSearch: true,
+      // 部门树形列表数据
+      deptList: [],
+      // 部门树形选择器选项
+      deptOptions: [],
+      // 弹窗标题
+      title: "",
+      // 弹窗显示状态
+      open: false,
+      // 是否全部展开树形表格
+      isExpandAll: true,
+      // 表格重新渲染标识（用于展开/折叠）
+      refreshTable: true,
+      // 查询参数（仅保留部门名称）
+      queryParams: {
+        deptName: undefined
+      },
+      // 表单数据
+      form: {
+        deptId: undefined,    // 部门ID（修改时用）
+        parentId: 0,          // 上级部门ID（默认顶级）
+        deptName: undefined   // 部门名称
+      },
+      // 表单校验规则（仅保留必填项）
+      rules: {
+        parentId: [
+          { required: true, message: "上级部门不能为空", trigger: "blur" }
+        ],
+        deptName: [
+          { required: true, message: "部门名称不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    // 初始化加载部门列表
+    this.getList();
+  },
+  methods: {
+    /**
+     * 查询部门列表
+     */
+    getList() {
+      this.loading = true;
+      listDept(this.queryParams).then(response => {
+        // 转换为树形结构（handleTree是全局方法，和原代码一致）
+        this.deptList = this.handleTree(response.data, "deptId");
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
+
+    /**
+     * 树形选择器数据格式化
+     */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.deptId,
+        label: node.deptName,
+        children: node.children
+      };
+    },
+
+    /**
+     * 取消弹窗
+     */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+
+    /**
+     * 重置表单
+     */
+    reset() {
+      this.form = {
+        deptId: undefined,
+        parentId: 0,
+        deptName: undefined
+      };
+      this.resetForm("form");
+    },
+
+    /**
+     * 搜索
+     */
+    handleQuery() {
+      this.getList();
+    },
+
+    /**
+     * 重置搜索
+     */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams = { deptName: undefined };
+      this.handleQuery();
+    },
+
+    /**
+     * 新增部门
+     */
+    handleAdd(row) {
+      this.reset();
+      // 如果是新增子部门，默认选中当前部门作为上级
+      if (row) {
+        this.form.parentId = row.deptId;
+      }
+      this.open = true;
+      this.title = "添加部门";
+      // 加载部门树形选择器数据
+      listDept().then(response => {
+        this.deptOptions = this.handleTree(response.data, "deptId");
+      });
+    },
+
+    /**
+     * 展开/折叠全部
+     */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+
+    /**
+     * 修改部门
+     */
+    handleUpdate(row) {
+      this.reset();
+      // 获取部门详情
+      getDept(row.deptId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改部门";
+      });
+      // 加载排除当前部门的树形数据（防止修改时选择自己作为上级）
+      listDeptExcludeChild(row.deptId).then(response => {
+        this.deptOptions = this.handleTree(response.data, "deptId");
+      });
+    },
+
+    /**
+     * 提交表单（新增/修改）
+     */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          // 修改操作
+          if (this.form.deptId) {
+            updateDept(this.form).then(() => {
+              this.$message.success("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            // 新增操作
+            addDept(this.form).then(() => {
+              this.$message.success("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+
+    /**
+     * 删除部门
+     */
+    handleDelete(row) {
+      this.$confirm(`是否确认删除【${row.deptName}】部门?`, "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        return delDept(row.deptId);
+      }).then(() => {
+        this.getList();
+        this.$message.success("删除成功");
+      }).catch(() => {});
+    }
+  }
+};
+</script>
+
+<style scoped>
+.mb8 {
+  margin-bottom: 8px;
+}
+.dialog-footer {
+  text-align: center;
+}
+</style>

src/views/app/courseFinishTemp/index.vue

@@ -0,0 +1,1206 @@
+<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="status">
+                <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+                    <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
+                        :value="dict.dictValue" />
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="科普" prop="courseId">
+                <el-select
+                    v-model="queryParams.courseId"
+                    placeholder="默认50条，可输入关键字检索"
+                    style=" margin-right: 10px;"
+                    size="mini"
+                    filterable
+                    clearable
+                    :loading="courseLoading"
+                    remote
+                    :remote-method="(keyword) => handleCourseRemoteSearch(keyword, 0)"
+                    @change="courseChangeUpdate(0)"
+                    @keyup.enter.native="handleQuery"
+                >
+                    <el-option
+                        v-for="dict in queryCourseList"
+                        :key="dict.dictValue"
+                        :label="dict.dictLabel"
+                        :value="parseInt(dict.dictValue)"
+                    />
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="小节" prop="videoId">
+                <el-select
+                    v-model="queryParams.videoId"
+                    placeholder="请选择小节"
+                    size="mini"
+                    style=" margin-right: 10px;"
+                    filterable
+                    clearable
+                    :disabled="!queryParams.courseId"
+                    @change="videoIdChange(0)"
+                    @keyup.enter.native="handleQuery"
+                >
+                    <el-option
+                        v-for="dict in queryVideoList"
+                        :key="dict.dictValue"
+                        :label="dict.dictLabel"
+                        :value="parseInt(dict.dictValue)"
+                    >
+                        <div :style="{ color: dict.isPause == 1 ? '#f56c6c' : 'inherit', display: 'flex', alignItems: 'center' }">
+                            <span>{{ dict.dictLabel }}</span>
+                            <span v-if="dict.isPause == 1" style="font-size: 12px; margin-left: 8px; color: #f56c6c;">
+                                (该科普已被关闭)
+                            </span>
+                        </div>
+                    </el-option>
+                </el-select>
+            </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-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button
+                    type="primary"
+                    plain
+                    icon="el-icon-plus"
+                    size="mini"
+                    @click="handleAdd"
+                    v-hasPermi="['app:finishTemp:add']"
+                >
+                    新增
+                </el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button
+                    type="danger"
+                    plain
+                    icon="el-icon-delete"
+                    size="mini"
+                    @click="handleDelete"
+                    :disabled="multiple"
+                    v-hasPermi="['app:finishTemp:delete']"
+                >
+                    删除
+                </el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table border v-loading="loading" :data="courseFinishTempList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="模板ID" align="center" prop="id" />
+            <el-table-column label="模板名称" align="center" prop="name" />
+            <el-table-column label="状态" align="center" prop="status">
+                <template slot-scope="scope">
+                    <dict-tag :options="statusOptions" :value="scope.row.status" />
+                </template>
+            </el-table-column>
+            <el-table-column label="科普名称" align="center" prop="courseName" />
+            <el-table-column label="小节名称" align="center" prop="videoName" />
+            <el-table-column label="创建时间" align="center" prop="createTime" />
+            <el-table-column label="修改时间" align="center" prop="updateTime" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-edit"
+                        @click="handleUpdate(scope.row, true)"
+                        v-hasPermi="['app:finishTemp:edit']"
+                    >
+                        修改
+                    </el-button>
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-s-promotion"
+                        @click="handleUpdate(scope.row, false)"
+                    >
+                        详情
+                    </el-button>
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-delete"
+                        @click="handleDelete(scope.row)"
+                        v-hasPermi="['app:finishTemp:delete']"
+                    >
+                        删除
+                    </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="addForm.title"
+            :visible.sync="addForm.visible"
+            width="1000px"
+            v-loading="addForm.loading"
+            append-to-body
+            :close-on-click-modal="false"
+        >
+            <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
+
+                <el-form-item label="模板名称" prop="name">
+                    <el-input v-model="addForm.name" :disabled="!addForm.canOp" placeholder="请输入模板名称" />
+                </el-form-item>
+
+                <el-form-item label="状态">
+                    <el-radio-group v-model="addForm.status">
+                        <el-radio v-for="dict in statusOptions"
+                            :key="dict.dictValue"
+                            :disabled="!addForm.canOp"
+                            :label="parseInt(dict.dictValue)"
+                        >
+                            {{ dict.dictLabel }}
+                        </el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <el-form-item label="科普"
+                    style="margin-bottom: 15px;"
+                    prop="videoId"
+                >
+                
+                    <el-select
+                        v-model="addForm.courseId"
+                        placeholder="默认50条，可输入关键字检索"
+                        style=" margin-right: 10px;"
+                        size="mini"
+                        filterable
+                        clearable
+                        :loading="courseLoading"
+                        remote
+                        :disabled="!addForm.canOp"
+                        :remote-method="(keyword) => handleCourseRemoteSearch(keyword, 1)"
+                        @change="courseChangeUpdate(1)"
+                    >
+                        <el-option
+                            v-for="dict in courseList"
+                            :key="dict.dictValue"
+                            :label="dict.dictLabel"
+                            :value="parseInt(dict.dictValue)"
+                        />
+                    </el-select>
+
+                    <el-select
+                        v-model="addForm.videoId"
+                        placeholder="请选择小节"
+                        size="mini"
+                        style=" margin-right: 10px;"
+                        filterable
+                        clearable
+                        :disabled="!addForm.canOp"
+                        @change="videoIdChange(1)"
+                    >
+                        <el-option
+                            v-for="dict in videoList"
+                            :key="dict.dictValue"
+                            :label="dict.dictLabel"
+                            :value="parseInt(dict.dictValue)"
+                        >
+                            <div :style="{ color: dict.isPause == 1 ? '#f56c6c' : 'inherit', display: 'flex', alignItems: 'center' }">
+                                <span>{{ dict.dictLabel }}</span>
+                                <span v-if="dict.isPause == 1" style="font-size: 12px; margin-left: 8px; color: #f56c6c;">
+                                    (该科普已被关闭，无法正常发送)
+                                </span>
+                            </div>
+                        </el-option>
+                    </el-select>
+
+                    <!-- 默认完课消息 -->
+                    <el-select
+                        v-model="addForm.courseType"
+                        placeholder="请选择消息类型"
+                        size="mini"
+                        style=" margin-right: 10px;"
+                        disabled
+                    >
+                        <el-option
+                            v-for="dict in sysFsSopWatchStatus"
+                            :key="dict.dictValue"
+                            :label="dict.dictLabel"
+                            :value="Number(dict.dictValue)"
+                        />
+                    </el-select>
+
+                </el-form-item>
+
+                <el-form-item label="规则" style="height: 500px; overflow: auto;">
+                    <!-- 遍历规则 所有内容【存在多个】 -->
+                    <div
+                        v-for="(content, contentIndex) in addForm.setting"
+                        :key="contentIndex"
+                        style="
+                            background-color: #fdfdfd;
+                            border: 1px solid #e6e6e6;
+                            margin-bottom: 20px;
+                        "
+                    >
+                        <el-row style="padding-bottom: 20px">
+                            <el-col :span="22">
+                                <el-form 
+                                    :model="content"
+                                    label-width="70px"
+                                >
+                                    <el-form-item label="内容类别"
+                                        style="margin: 2%"
+                                    >
+                                        <div>
+                                            <el-radio-group 
+                                                v-model="content.contentType"
+                                                @change="handleContentTypeChange()"
+                                            >
+                                                <el-radio
+                                                    :disabled="!addForm.canOp || !['11', '20'].includes(item.dictValue)"
+                                                    :key="item.dictValue"
+                                                    :label="item.dictValue"
+                                                    v-for="item in sysQwSopAiContentType"
+                                                >{{ item.dictLabel }}
+                                                </el-radio>
+                                            </el-radio-group>
+                                        </div>
+
+                                    </el-form-item>
+
+                                    <!-- 科普 -->
+                                    <el-form-item label="内容" v-if="[9].includes(Number(content.contentType))">
+                                        
+                                        <div>
+                                            <el-card class="box-card">
+                                                <el-form-item 
+                                                    label="链接标题:"
+                                                    label-width="100px"
+                                                    required
+                                                >
+                                                    <el-input
+                                                        v-model="content.linkTitle"
+                                                        placeholder="请输入链接标题"
+                                                        style="width: 90%;"
+                                                        :disabled="!addForm.canOp"
+                                                    />
+                                                </el-form-item>
+                                                <el-form-item 
+                                                    label="链接描述:"
+                                                    label-width="100px"
+                                                    required
+                                                >
+                                                    <el-input
+                                                        type="textarea"
+                                                        :rows="3"
+                                                        :disabled="!addForm.canOp"
+                                                        v-model="content.linkDescribe"
+                                                        placeholder="请输入链接描述"
+                                                        style="width: 90%;margin-top: 1%;"
+                                                    />
+                                                </el-form-item>
+                                                <el-form-item 
+                                                    label="链接封面:"
+                                                    label-width="100px"
+                                                    required
+                                                >
+                                                    <ImageUpload
+                                                        v-model="content.linkImageUrl"
+                                                        type="image"
+                                                        :num="1"
+                                                        :file-size="1"
+                                                        :width="150"
+                                                        :height="150"
+                                                        style="margin-top: 1%;"
+                                                    />
+                                                </el-form-item>
+                                                <div>
+                                                    <el-form-item 
+                                                        label="链接地址:"
+                                                        label-width="100px"
+                                                    >
+                                                        <el-tag 
+                                                            type="warning"
+                                                            v-model="content.isBindUrl"
+                                                        >选择的科普小节
+                                                            即为卡片链接地址
+                                                        </el-tag>
+                                                    </el-form-item>
+                                                </div>
+                                                <el-form-item 
+                                                    label="课节过期时间"
+                                                >
+                                                    <el-row>
+                                                        <el-input 
+                                                        type="number"
+                                                        v-model="content.expiresDays"
+                                                        style="width: 200px"
+                                                        >
+                                                        <template slot="append">天</template>
+                                                        </el-input>
+                                                    </el-row>
+                                                    <el-row>
+                                                        <span class="tip">填写0或不填时，默认为系统配置的默认时间</span>
+                                                    </el-row>
+                                                </el-form-item>
+                                            </el-card>
+                                        </div>
+
+                                    </el-form-item>
+
+                                    <!-- 文本 -->
+                                    <el-form-item label="内容" v-else-if="[11].includes(Number(content.contentType))">
+                                        <el-input
+                                            v-model="content.value"
+                                            type="textarea"
+                                            :rows="3"
+                                            placeholder="内容"
+                                            :disabled="!addForm.canOp"
+                                            style="width: 90%; margin-top: 10px;"
+                                            @keydown.native="handleKeydown($event, contentIndex)"
+                                            :ref="`textarea-${contentIndex}`"
+                                        />
+
+                                    </el-form-item>
+
+                                    <!-- 语音 -->
+                                    <el-form-item label="内容" v-else-if="[12].includes(Number(content.contentType))">
+
+                                        <div >
+                                            <el-input
+                                                v-model="content.value"
+                                                type="textarea"
+                                                :rows="3"
+                                                :disabled="!addForm.canOp"
+                                                maxlength="66"
+                                                show-word-limit
+                                                placeholder="输入要转为语音的内容"
+                                                style="width: 90%;margin-top: 10px;"
+                                                @input="handleInputVoiceText(content.value, content)"
+                                            />
+
+                                        </div>
+
+                                    </el-form-item>
+
+                                    <!-- 图片 -->
+                                    <el-form-item label="内容" v-else-if="[2].includes(Number(content.contentType))">
+
+                                        <ImageUpload
+                                            v-model="content.imgUrl"
+                                            type="image"
+                                            :num="1"
+                                            :width="150"
+                                            :height="150"
+                                        />
+
+                                    </el-form-item>
+
+                                    <!-- 视频 -->
+                                    <el-form-item label="内容" v-else-if="[6].includes(Number(content.contentType))">
+
+                                        <div>
+                                            <el-form-item 
+                                                label="上传视频："
+                                                prop="videoUrl"
+                                                label-width="100px"
+                                            >
+                                            <el-upload
+                                                v-model="content.videoUrl"
+                                                class="avatar-uploader"
+                                                :action="uploadUrl"
+                                                :show-file-list="false"
+                                                :disabled="!addForm.canOp"
+                                                :on-success="(res, file) => handleSuccessVideo(res, file, content)"
+                                                :before-upload="beforeUploadVideo"
+                                            >
+                                                <i class="el-icon-plus avatar-uploader-icon"></i>
+                                            </el-upload>
+                                            <video 
+                                                v-if="content.videoUrl"
+                                                :src="content.videoUrl"
+                                                controls
+                                                style="width: 200px;height: 100px"
+                                            >
+                                            </video>
+                                            </el-form-item>
+                                        </div>
+
+                                    </el-form-item>
+
+                                    <!-- 疗法 -->
+                                    <el-form-item label="内容" v-else-if="[20].includes(Number(content.contentType))">
+                                        
+                                        <el-card class="box-card">
+                                            <el-form-item 
+                                                label="选择疗法:"
+                                                label-width="100px"
+                                                required
+                                            >
+                                                <el-select
+                                                    :disabled="!addForm.canOp"
+                                                    v-model="content.packageId"
+                                                    placeholder="默认50条，可输入关键字检索"
+                                                    style=" margin-right: 10px; width: 230px;"
+                                                    size="mini"
+                                                    filterable
+                                                    clearable
+                                                    :loading="content.pkgLoading"
+                                                    remote
+                                                    :remote-method="(keyword) => handlePkgRemoteSearch(keyword, content)"
+                                                    @change="pkgChangeUpdate(content)"
+                                                >
+                                                <el-option
+                                                    v-for="dict in (content.meta && content.meta.pkgList ? content.meta.pkgList : [])"
+                                                    :key="dict.packageId"
+                                                    :label="`${dict.packageName}(${dict.packageId})`"
+                                                    :value="parseInt(dict.packageId)"
+                                                />
+                                                </el-select>
+                                            </el-form-item>
+                                            <el-form-item 
+                                                label="疗法名称:"
+                                                label-width="100px"
+                                            >
+                                                <el-input
+                                                    disabled
+                                                    :rows="3"
+                                                    v-model="content.packageName"
+                                                    style="width: 90%;margin-top: 1%;"
+                                                />
+                                            </el-form-item>
+                                            <el-form-item 
+                                                label="疗法封面:"
+                                                label-width="100px"
+                                            >
+                                                <ImageUpload 
+                                                    :disabled="true"
+                                                    v-model="content.packageImgUrl"
+                                                    type="image"
+                                                    :num="1"
+                                                    :file-size="1"
+                                                    :width="150"
+                                                    :height="150"
+                                                    style="margin-top: 1%;"
+                                                />
+                                            </el-form-item>
+                                        </el-card>
+
+                                    </el-form-item>
+
+                                </el-form>
+                            </el-col>
+
+                            <el-col 
+                                :span="1"
+                                :offset="1"
+                            >
+                                <!-- 删除内容节点 -->
+                                <i 
+                                    class="el-icon-delete"
+                                    @click="delContentNode(contentIndex)"
+                                    style="margin-top: 20px;"
+                                    v-if="addForm.setting.length > 1 && addForm.canOp"
+                                ></i>
+                            </el-col>
+                        </el-row>
+
+                    </div>
+                    <el-link type="primary" class="el-icon-plus" :disabled="!addForm.canOp" :underline="false" @click='addContent()'>添加内容</el-link>
+                </el-form-item>
+
+                <el-form-item label="所属客服" prop="appCustomerIds" label-width="100px">
+                    <div>
+                        <el-button size="medium" icon="el-icon-circle-plus-outline" plain :disabled="!addForm.canOp"
+                            @click="openSelectCustomerPage">请选择客服</el-button>
+                    </div>
+                    <div>
+                        <el-tag style="margin-left: 5px" size="medium" :key="s.id" v-for="s in customerConfig.selected" closable
+                            :disable-transitions="false" @close="handleCloseCustomer(s)">
+                            <span>{{ s.roleName }}</span>
+                        </el-tag>
+                    </div>
+                    <div style="
+                        color: #999;
+                        font-size: 14px;
+                        display: flex;
+                        align-items: center;
+                    ">
+                        <i class="el-icon-info"></i>
+                        选择了客服之后,此科普小节的完课 消息
+                        只作用于此客服
+                    </div>
+                </el-form-item>
+            
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" v-if="addForm.canOp" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 选择app客服角色 -->
+        <el-dialog title="选择客服" :visible.sync="customerConfig.visible" width="1300px" append-to-body>
+            <CusRoleList
+                :selected="customerConfig.selected"
+                @confirm="customerSelectedConfirmCallForBind"
+                @selectionChange="customerSelectionChangeCallForBind"
+            />
+        </el-dialog>
+
+    </div>
+</template>
+
+<script>
+import {
+    findList,
+    // exportList,
+    add,
+    edit,
+    getById,
+    deleteByIds,
+} from "@/api/app/course/courseFinishTemp";
+import { courseList, videoList } from "@/api/app/course";
+import { getPackageOptions,} from "@/api/app/pkg";
+import ImageUpload from "@/views/qw/sop/ImageUpload.vue";
+import CusRoleList from '@/views/app/user/CusRoleList.vue';
+import {listRole} from '@/api/app/user/userList';
+
+export default {
+    name: "CourseFinishTemp",
+    components: { ImageUpload, CusRoleList, },
+    data() {
+        return {
+            //上传语音的遮罩层
+            voiceLoading: false,
+            uploadUrl: process.env.VUE_APP_BASE_API + "/app/common/uploadOSS2",
+            uploadUrlByVoice: process.env.VUE_APP_BASE_API + "/app/common/uploadOSSByHOOKVoice",
+            videoLoading: false,
+            videoOptionsLoading: false,
+            courseLoading: false,
+            videoOptions: [],
+            sysFsSopWatchStatus: [],
+            // 状态字典
+            statusOptions: [],
+            courseList: [],
+            videoList: [],
+            pkgList: [],
+            queryCourseList: [],
+            queryVideoList: [],
+            // 遮罩层
+            loading: true,
+            // 导出遮罩层
+            exportLoading: false,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            formType: 1,
+            // 总条数
+            total: 0,
+            // 完课模板表格数据
+            courseFinishTempList: [],
+            //插件版
+            sysQwSopAiContentType: [],
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                name: null,
+                status: null,
+                courseId: null,
+                videoId: null
+            },
+            // 表单校验
+            rules: {
+                name: [
+                    { required: true, message: '模板名称不能为空', trigger: 'submit' }
+                ],
+                status: [
+                    { required: true, message: '状态不能为空', trigger: 'submit' }
+                ],
+                courseId: [
+                    { required: true, message: '科普/课节/类型不能为空', trigger: 'submit' }
+                ],
+                videoId: [
+                    { required: true, message: '科普/课节/类型不能为空', trigger: 'submit' }
+                ],
+                courseType: [
+                    { required: true, message: '科普/课节/类型不能为空', trigger: 'submit' }
+                ],
+            },
+            finishTempList: [],
+            //用来记录上次选择部门的数组
+            addForm: {
+                visible: false,
+                title: '',
+                canOp: true,
+                id: null,
+                name: null,
+                status: 1,
+                courseId: null,
+                videoId: null,
+                courseType: 3,//指定是完课消息
+                setting: [],
+                loading: false,
+            },
+            //选择客服对话框
+            customerConfig: {
+                visible: false,
+                selected: [],
+            },
+        };
+    },
+    async created() {
+        this.getList();
+        this.getDicts("app_normal_disabled_status").then((response) => {
+            this.statusOptions = response.data;
+        });
+        this.getDicts("app_sop_plugin_settingType").then(response => {
+            this.sysQwSopAiContentType = response.data;
+        });
+        this.getDicts("app_sop_watch_status").then(response => {
+            this.sysFsSopWatchStatus = response.data;
+        });
+        let courseList = await this.getCourseList(null, null);
+        this.queryCourseList = courseList.list;
+        let defaultPkg = await this.getPkgList(null, null);
+        this.pkgList = defaultPkg.data;
+    },
+    methods: {
+        //--------------------------------------------------------------列表 begin---------------------------------------------------------
+        /**
+         * 查询完课模板列表
+         */
+        getList() {
+            this.loading = true;
+            findList(this.queryParams).then((response) => {
+                this.courseFinishTempList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        /**
+         * 搜索按钮操作
+         */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /**
+         * 重置按钮操作
+         */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        /**
+         * 多选框选中数据
+         * @param selection 
+         */
+        handleSelectionChange(selection) {
+            this.ids = selection.map((item) => item.id);
+            this.single = selection.length !== 1;
+            this.multiple = !selection.length;
+        },
+        /**
+         * 新增按钮操作
+         */
+        async handleAdd() {
+            this.reset();
+            this.addContent();
+            this.addForm.title = "添加完课模板";
+            this.addForm.loading = true;
+            this.addForm.visible = true;
+            let courseList = await this.getCourseList(null, null);
+            this.courseList = courseList.list;
+            this.addForm.loading = false;
+        },
+        /**
+         * 修改按钮操作
+         * @param row 
+         */
+        async handleUpdate(row, canOp) {
+            this.reset();
+            const id = row.id;
+            this.addForm.title = canOp ? "修改完课模板" : "完课模板详情";
+            this.addForm.canOp = canOp;
+            this.addForm.loading = true;
+            this.addForm.visible = true;
+            let info = await getById(id);
+            for (let key in this.addForm) {
+                if (info.data.hasOwnProperty(key) && key !== 'setting') {
+                    this.addForm[key] = (key === 'status' ? parseInt(info.data.status) : info.data[key]);
+                }
+            }
+            this.addForm.setting = JSON.parse(info.data.setting);
+            this.addForm.setting.forEach(async st => {
+                if (st.contentType == 20) {
+                    if (!st.packageId) {
+                        this.$set(st, 'meta', {
+                            pkgLoading: false,
+                            pkgList: []
+                        });
+                    } else {
+                        let pkgList = await this.getPkgList(null, st.packageId);
+                        this.$set(st, 'meta', {
+                            pkgLoading: false,
+                            pkgList: pkgList.data,
+                        });
+                    }
+                }
+                
+            })
+            if (info.data.appCustomerIds) {
+                let userInfo = await listRole({ids: info.data.appCustomerIds});
+                this.customerConfig.selected = userInfo.rows;
+            }
+            if (this.addForm.courseId) {
+                let courseList = await this.getCourseList(null, this.addForm.courseId);
+                this.courseList = courseList.list;
+                let videoList = await this.getVideoList(this.addForm.courseId, null);
+                this.videoList = videoList.list;
+            }
+            this.addForm.loading = false;
+        },
+        /**
+         * 删除按钮操作
+         * @param row 
+         */
+        handleDelete(row) {
+            const ids = row.id || this.ids;
+            this.$confirm(
+                '是否确认删除完课模板ID为"' + ids + '"的数据项?',
+                "警告",
+                {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                }
+            )
+                .then(async () => {
+                    await deleteByIds(ids);
+                    this.getList();
+                    this.msgSuccess("删除成功");
+                })
+                .catch(() => { });
+        },
+        //--------------------------------------------------------------新增/编辑 begin---------------------------------------------------------
+        customerSelectedConfirmCallForBind() {
+            this.customerConfig.visible = false;
+        },
+        /**
+         * 选中的用户列表
+         * @param list 
+         */
+        customerSelectionChangeCallForBind(config) {
+            let selected = config.selected;
+            //单行操作
+            if (config.mode === 0) {
+                let row = config.row;
+                if (selected) {
+                    if (!this.customerConfig.selected.some(s => s.id == row.id)) {
+                        this.customerConfig.selected.push(row)
+                    }
+                } else {
+                    this.customerConfig.selected = this.customerConfig.selected.filter(m => m.id != row.id);
+                }
+            }
+            //操作当前页所有行
+            else {
+                let list = config.rows;
+                if (selected) {
+                    list.map(l => {
+                        if (!this.customerConfig.selected.some(s => s.id == l.id)) {
+                            this.customerConfig.selected.push(l)
+                        }
+                    });
+                } else {
+                    list.map(l => {
+                        for (let i = 0; i < this.customerConfig.selected.length; i++) {
+                            if (l.id == this.customerConfig.selected[i].id) {
+                                this.customerConfig.selected.splice(i, 1);
+                            }
+                        }
+                    })
+                }
+            }
+        },
+        /**
+         * 提交按钮
+         */
+        submitForm() {
+            this.$refs["addForm"].validate(async (valid) => {
+                if (valid) {
+                    if (this.checkData(this.addForm)) {
+                        let data = JSON.parse(JSON.stringify(this.addForm));
+                        data.setting.forEach(ele => {
+                            delete ele.meta;
+                        });
+                        data['appCustomerIds'] = this.customerConfig.selected.map(s => s.id).join(',');
+                        data['contentType'] = data.type;
+                        data['setting'] = JSON.stringify(data.setting);
+                        if (data.id != null) {
+                            await edit(data);
+                            this.msgSuccess("修改成功");
+                            this.reset();
+                            this.getList();
+                        } else {
+                            await add(data);
+                            this.msgSuccess("新增成功");
+                            this.reset();
+                            this.getList();
+                        }
+                    }
+                }
+            });
+        },
+        /**
+         * 校验数据
+         * @param data 
+         */
+        checkData(data) {
+
+            if (this.isEmpty(data.name)) {
+                this.$message.error("模板名称不能为空")
+                return false;
+            }
+            if (this.isEmpty(data.status)) {
+                this.$message.error("状态不能为空")
+                return false;
+            }
+            if (this.isEmpty(data.courseId)) {
+                this.$message.error("请选择科普")
+                return false;
+            }
+            if (this.isEmpty(data.videoId)) {
+                this.$message.error("请选择课节")
+                return false;
+            }
+            if (this.isEmpty(data.courseType)) {
+                this.$message.error("消息类型不能为空")
+                return false;
+            }
+
+            if (data.setting.length == 0) {
+                this.$message.error("请添加规则！")
+                return false;
+            }
+
+            for (let i = 0; i < data.setting.length; i++) {
+                let setting = data.setting[i];
+                if (setting.contentType == 11 && this.isEmpty(setting.value)) {
+                    this.$message.error("内容不能为空")
+                    return false;
+                }
+                if (setting.contentType == 12 && this.isEmpty(setting.value)) {
+                    this.$message.error("语音文本不能为空")
+                    return false;
+                }
+                if (setting.contentType == 2 && this.isEmpty(setting.imgUrl)) {
+                    this.$message.error("图片不能为空")
+                    return false;
+                }
+                if (9 == setting.contentType && this.isEmpty(setting.linkTitle)) {
+                    this.$message.error("链接标题不能为空")
+                    return false;
+                }
+                if (9 == setting.contentType && this.isEmpty(setting.linkDescribe)) {
+                    this.$message.error("链接描述不能为空")
+                    return false;
+                }
+                if (9 == setting.contentType && this.isEmpty(setting.linkImageUrl)) {
+                    this.$message.error("链接图片不能为空")
+                    return false;
+                }
+                if (20 == setting.contentType && this.isEmpty(setting.packageId)) {
+                    this.$message.error("疗法不能为空")
+                    return false;
+                }
+            }
+    
+            return true;
+        },
+        /**
+         * 取消按钮
+         */
+        cancel() {
+            this.reset();
+        },
+        /**
+         * 表单重置
+         */
+        reset() {
+            this.addForm = {
+                visible: false,
+                title: '',
+                canOp: true,
+                id: null,
+                name: null,
+                status: 1,
+                courseId: null,
+                videoId: null,
+                courseType: 3,
+                setting: [],
+                loading: false,
+            };
+            this.customerConfig.selected = [];
+            this.resetForm("addForm");
+        },
+        /**
+         * 科普小节变化
+         * @param mode 模式，0-查询列表，1-新增编辑页 
+         */
+        videoIdChange(mode) {
+            if (mode == 1) {
+                //选择了科普小节则 默认绑上
+                let selectedVideo;
+                // 查找选中的科普对应的 label
+                if (this.addForm.videoId) {
+                    selectedVideo = this.videoList.find(course => parseInt(course.dictValue) == this.addForm.videoId);
+                }
+                for (let i = 0; i < this.addForm.setting.length; i++) {
+                    let contentItem = this.addForm.setting[i];
+                    //科普消息-文本内容
+                    if (contentItem == 11) {
+                        this.$set(contentItem, 'isBindUrl', '2');
+                    }
+                    //如果是科普的才上
+                    if (selectedVideo && this.addForm.videoId != null) {
+
+                        if (contentItem.contentType == 9) {
+                            this.$set(contentItem, 'linkDescribe', selectedVideo.dictLabel);
+                        }
+                    }
+                }
+            }
+        },
+        /**
+         * 疗法下拉搜索
+         * @param keyword 
+         * @param content 
+         */
+        async handlePkgRemoteSearch(keyword, content) {
+            content.meta.pkgLoading = true;
+            // 模拟远程接口请求（替换为你的真实接口）
+            let cl = await this.getPkgList(this.isEmpty(keyword) ? null : keyword, null);
+            content.meta.pkgLoading = false;
+            content.meta.pkgList = cl.data;
+        },
+        /**
+         * 删除内容节点
+         * @param index 
+         */
+        delContentNode(index){
+            this.addForm.setting.splice(index, 1)
+        },
+        /**
+         * 添加规则内容
+         */
+        addContent() {
+            let content = {
+                contentType: '11',//默认文本类型，其余类型暂时禁用
+                value: '',
+            };
+            this.addForm.setting.push(content);
+            this.handleContentTypeChange();
+        },
+        /**
+         * 内容类别切换
+         */
+        handleContentTypeChange() {
+            //获取选中的科普
+            const selectedCourse = this.addForm.courseId != null
+                ? this.courseList.find(course => parseInt(course.dictValue) == this.addForm.courseId)
+                : null;
+                //获取选中的视频
+            const selectedVideo = this.addForm.videoId != null
+                ? this.videoList.find(course => parseInt(course.dictValue) === this.addForm.videoId)
+                : null;
+            for (let i = 0; i < this.addForm.setting.length; i++) {
+                let contentItem = this.addForm.setting[i];
+                
+                // 科普
+                if (Number(contentItem.contentType) === 9) {
+                    // 处理科普链接标题/封面
+                    if (selectedCourse) {
+                        this.$set(contentItem, 'linkTitle', selectedCourse.dictLabel);
+                        this.$set(contentItem, 'linkImageUrl', selectedCourse.dictImgUrl);
+                    }
+                    // 处理视频链接描述
+                    if (selectedVideo) {
+                        this.$set(contentItem, 'linkDescribe', selectedVideo.dictLabel);
+                    }
+                }
+                // 疗法
+                else if (Number(contentItem.contentType) === 20) {
+                    if (!contentItem.packageId) {
+                        this.$set(contentItem, 'meta', {
+                            pkgLoading: false,
+                            pkgList: this.pkgList,
+                        });
+                    } else {
+                        let pkgList = this.getPkgList(null, contentItem.packageId);
+                        this.$set(contentItem, 'meta', {
+                            pkgLoading: false,
+                            pkgList: pkgList.data,
+                        });
+                    }
+                }
+            }
+        },
+        /**
+         * 疗法变动处理
+         * @param content 
+         */
+        async pkgChangeUpdate(content) {
+            //将当前规则已选中的视频小节清空
+            this.$set(content, 'packageName', null);
+            this.$set(content, 'packageImgUrl', null);
+            if (content.packageId) {
+                // 查找选中疗法的信息
+                const selectedPkg = content.meta.pkgList.find(pkg => parseInt(pkg.packageId) === content.packageId);
+                this.$set(content, 'packageName', selectedPkg.packageName);
+                this.$set(content, 'packageImgUrl', selectedPkg.imgUrl);
+            }
+        },
+        /**
+         * 打开选择客服的对话框
+         */
+        openSelectCustomerPage() {
+            this.customerConfig.visible = true;
+        },
+        /**
+         * 删除客服
+         * @param list 
+         */
+        handleCloseCustomer(node) {
+            const index = this.customerConfig.selected.findIndex(t => t == node);
+            if (index !== -1) {
+                this.customerConfig.selected.splice(index, 1);
+            }
+        },
+        //--------------------------------------------------------------公共 begin---------------------------------------------------------
+        /**
+         * 获取科普信息
+         */
+        async getCourseList(keyword, selectedId) {
+            let data = {
+                keyword: keyword,
+                selectedId: selectedId,
+                pageNum: 1,
+                pageSize: 50,
+            };
+            return await courseList(data);
+        },
+        /**
+         * 科普变动处理
+         * @param mode 模式，0-查询列表，1-新增编辑页
+         */
+        async courseChangeUpdate(mode) {
+            if (mode == 1) {
+                //将当前规则已选中的视频小节清空
+                this.addForm.videoId = null;
+                this.videoList = [];
+                // 查找选中的科普的信息
+                const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) == this.addForm.courseId);
+                for (let i = 0; i < this.addForm.setting.length; i++) {
+                    let contentItem = this.addForm.setting[i];
+                    this.$set(contentItem, 'linkTitle', null);
+                    this.$set(contentItem, 'linkDescribe', null);
+                    this.$set(contentItem, 'linkImageUrl', null);
+
+                    //如果是科普才上
+                    if (selectedCourse && this.addForm.courseId) {
+                        //响应式直接给链接的标题/封面上值
+                        if (contentItem.contentType == 9) {
+                            this.$set(contentItem, 'linkTitle', selectedCourse.dictLabel);
+                            this.$set(contentItem, 'linkImageUrl', selectedCourse.dictImgUrl);
+                        }
+                    }
+                }
+                if (this.addForm.courseId) {
+                    let vl = await this.getVideoList(this.addForm.courseId, null);
+                    this.videoList = vl.list;
+                } else {
+                    let cl = await this.getCourseList(null, null);
+                    this.courseList = cl.list;
+                }
+            } else {
+                if (this.queryParams.courseId) {
+                    let vl = await this.getVideoList(this.queryParams.courseId, null);
+                    this.queryVideoList = vl.list;
+                } else {
+                    this.queryParams.videoId = null;
+                    let cl = await this.getCourseList(null, null);
+                    this.queryCourseList = cl.list;
+                    let vl = await this.getVideoList(null, null);
+                    this.queryVideoList = vl.list;
+                }
+            }
+        },
+        /**
+         * 科普下拉远程搜索
+         * @param {*} keyword 搜索关键字
+         * @param {*} mode    模式，0-查询列表，1-新增编辑页
+         */
+        async handleCourseRemoteSearch(keyword, mode) {
+            this.courseLoading = true;
+            // 模拟远程接口请求（替换为你的真实接口）
+            let cl = await this.getCourseList(this.isEmpty(keyword) ? null : keyword, null);
+            this.courseLoading = false;
+            if (1 == mode) {
+                this.courseList = cl.list;
+            } else {
+                this.queryCourseList = cl.list;
+            }
+        },
+        /**
+         * 根据科普获取视频小节
+         * @param courseId 
+         * @param title 
+         */
+        async getVideoList(courseId, title) {
+            return await videoList({
+                courseId: courseId,
+                title: title
+            });
+        },
+        /**
+         * 获取疗信息
+         */
+        async getPkgList(keyword, selectedId) {
+            let data = {
+                keyword: keyword,
+                metaId: selectedId,
+                limit: 50
+            };
+            return await getPackageOptions(data);
+        },
+        /**
+         * 空校验
+         * @param obj 
+         */
+        isEmpty(obj) {
+            return obj === null || obj === undefined || obj.length === 0;
+        },
+    },
+};
+</script>

src/views/app/customerBind/index.vue

@@ -0,0 +1,356 @@
+<template>
+    <div class="app-container">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+            <el-form-item label="销售" prop="companyUserId">
+                <el-select
+                    v-model="queryParams.companyUserId"
+                    placeholder="请输入销售id或名称筛选，默认100条"
+                    clearable
+                    filterable
+                    remote
+                    :remote-method="(keyword) => companyUserRemoteSearch(keyword, queryParams.companyUserId)"
+                    style="width: 290px;"
+                >
+                    <el-option
+                        v-for="item in companyUserOptions"
+                        :key="item.dictValue"
+                        :label="`${item.dictLabel}(${item.dictValue})`"
+                        :value="item.dictValue"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="部门" prop="deptId">
+                <treeselect
+                    v-model="queryParams.deptId"
+                    :options="deptOptions"
+                    :normalizer="normalizer"
+                    placeholder="选择部门"
+                    style="width: 220px"
+                />
+            </el-form-item>
+            <el-form-item label="含子部门" prop="includeChild">
+                <el-switch v-model="queryParams.includeChild"/>
+            </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-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button
+                    type="primary"
+                    plain
+                    icon="el-icon-plus"
+                    size="mini"
+                    v-hasPermi="['app:comuserdept:add']"
+                    @click="handleAdd"
+                >
+                    新增
+                </el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button
+                    type="danger"
+                    plain
+                    icon="el-icon-delete"
+                    size="mini"
+                    :disabled="ids.length === 0"
+                    v-hasPermi="['app:comuserdept:delete']"
+                    @click="handleDelete"
+                >
+                    删除
+                </el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="customerBindList" @selection-change="handleSelectionChange" border>
+            <el-table-column type="selection" width="55" align="center"/>
+            <el-table-column label="销售ID" align="center" prop="companyUserId" min-width="100"/>
+            <el-table-column label="销售名称" align="center" prop="companyUserName" min-width="150"/>
+            <el-table-column label="销售账号" align="center" prop="companyUserAccount" min-width="150"/>
+            <el-table-column label="部门" align="center" prop="deptName" min-width="120"/>
+            <el-table-column label="创建时间" align="center" prop="createTime" min-width="120"/>
+            <el-table-column label="修改时间" align="center" prop="updateTime" min-width="120"/>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" min-width="120">
+                <template slot-scope="scope">
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-edit"
+                        v-hasPermi="['app:comuserdept:edit']"
+                        @click="handleUpdate(scope.row)"
+                    >修改</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="bindDialog.title"
+            :visible.sync="bindDialog.visible"
+            width="500px"
+            append-to-body
+            :close-on-click-modal="false"
+        >
+            <el-form ref="bindForm" :model="bindForm" :rules="rules" label-width="80px">
+                <el-form-item label="销售" prop="companyUserId">
+                    <el-select
+                        v-model="bindForm.companyUserId"
+                        placeholder="请输入销售id或名称筛选，默认100条"
+                        clearable
+                        filterable
+                        remote
+                        style="width: 290px;"
+                        :remote-method="(keyword) => companyUserRemoteSearch(keyword, bindForm.companyUserId)"
+                    >
+                        <el-option
+                            v-for="item in companyUserOptions"
+                            :key="item.dictValue"
+                            :label="`${item.dictLabel}(${item.dictValue})`"
+                            :value="item.dictValue"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="部门" prop="deptId">
+                    <treeselect
+                        v-model="bindForm.deptId"
+                        :options="deptOptions"
+                        :normalizer="normalizer"
+                        placeholder="选择部门"
+                        style="width: 290px;"
+                    />
+                </el-form-item>
+            </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 { findList, getById, deleteByIds, add, edit, findCompanyUserOptions, } from "@/api/app/customerBind";
+import { listDept } from '@/api/system/appDept';
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+    name: "CustomerBind",
+    components: { Treeselect },
+    data() {
+        return {
+            // 部门树形选择器选项
+            deptOptions: [],
+            companyUserOptions: [],
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 客服/销售绑定部门表格数据
+            customerBindList: [],
+            bindDialog: {
+                visible: false,
+                loading: false,
+                title: null,
+            },
+            // 表单参数
+            bindForm: {
+                id: null,
+                companyUserId: null,
+                deptId: null
+            },
+            // 表单校验
+            rules: {
+                companyUserId: [
+                    { required: true, message: "销售不可为空", trigger: "blur" },
+                ],
+                deptId: [
+                    { required: true, message: "部门不可为空", trigger: "blur" },
+                ],
+            },
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                companyUserId: null,
+                deptId: null,
+                includeChild: false,
+            },
+        };
+    },
+    created() {
+        this.getList();
+        this.getDeptList();
+        this.getCompanyUserOptions(null);
+    },
+    methods: {
+        /** 列表查询 */
+        getList() {
+            this.loading = true;
+            findList(this.queryParams).then(response => {
+                this.customerBindList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        /**
+         * 获取部门树形数据
+         */
+        getDeptList() {
+            listDept().then(response => {
+                if (response.code === 200) {
+                    // 转换为树形结构
+                    this.deptOptions = this.handleTree(response.data, "deptId");
+                } else {
+                    this.deptOptions = [];
+                }
+            }).catch(() => {
+                this.deptOptions = [];
+            });
+        },
+        /**
+         * 获取销售列表
+         */
+        async getCompanyUserOptions(keyword, selectedId) {
+            let res = await findCompanyUserOptions({keyword: keyword, selectedId: selectedId, pageNumber: 1, pageSize: 100});
+            this.companyUserOptions = res.data;
+        },
+        companyUserRemoteSearch(keyword, selectedId) {
+            this.getCompanyUserOptions(keyword, selectedId);
+        },
+        /**
+         * 树形结构转换
+         */
+        handleTree(data, id, parentId, children) {
+            id = id || 'id';
+            parentId = parentId || 'parentId';
+            children = children || 'children';
+            var tree = [];
+            var map = {};
+            data.forEach(function(item) {
+                map[item[id]] = item;
+            });
+            data.forEach(function(item) {
+                var parent = map[item[parentId]];
+                if (parent) {
+                    (parent[children] || (parent[children] = [])).push(item);
+                } else {
+                    tree.push(item);
+                }
+            });
+            return tree;
+        },
+         /**
+         * 树形选择器数据格式化
+         */
+        normalizer(node) {
+            if (node.children && !node.children.length) {
+                delete node.children;
+            }
+            return {
+                id: node.deptId,
+                label: node.deptName,
+                children: node.children
+            };
+        },
+        // 取消按钮
+        cancel() {
+            this.bindDialog.visible = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.bindForm = {
+                id: null,
+                companyUserId: null,
+                deptId: null,
+            };
+            this.resetForm("bindForm");
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.queryParams = {
+                pageNum: 1,
+                pageSize: 10,
+                companyUserId: null,
+                deptId: null,
+                includeChild: false,
+            };
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.id);
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.bindDialog.title = "添加绑定关系";
+            this.bindDialog.visible = true;
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            getById(row.id ).then(response => {
+                for (let key in this.bindForm) {
+                    this.bindForm[key] = response.data[key] || null;
+                }
+                this.bindDialog.title = "修改绑定关系";
+                this.bindDialog.visible = true;
+            });
+        },
+        handleDelete() {
+            this.$confirm('是否确认删除?', "警告", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            }).then(async () => {
+                await deleteByIds(this.ids);
+                this.getList();
+                this.msgSuccess("删除成功");
+            });
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["bindForm"].validate(valid => {
+                if (valid) {
+                    if (this.bindForm.id != null) {
+                        edit(this.bindForm).then(response => {
+                            this.msgSuccess("修改成功");
+                            this.bindDialog.visible = false;
+                            this.getList();
+                        });
+                    } else {
+                        add(this.bindForm).then(response => {
+                            this.msgSuccess("新增成功");
+                            this.bindDialog.visible = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+    }
+};
+</script>

src/views/app/invitationCode/index.vue

@@ -0,0 +1,858 @@
+<template>
+  <div class="app-container">
+    <!-- 搜索区域 -->
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+      <el-form-item label="邀请码" prop="invitationCode">
+        <el-input
+          v-model="queryParams.invitationCode"
+          placeholder="请输入邀请码"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="标签" prop="tagIds">
+        <div
+          @click="openTagSearchPage(false)"
+          style="
+            cursor: pointer;
+            border: 1px solid #e6e6e6;
+            background-color: white;
+            overflow: hidden;
+            flex-grow: 1;
+            width: 250px;
+          "
+          >
+          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+            <el-tag type="success"
+              closable
+              :disable-transitions="false"
+              v-for="list in this.dialog.selectTagForQuery.selected"
+              :key="list.id"
+              @close="handleCloseTagsForQuery(list)"
+              style="margin: 3px;"
+            >
+              {{ list.name }}
+            </el-tag>
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item label="客服" prop="customerIds">
+        <div
+          @click="openCusSearchPage(false)"
+          style="
+            cursor: pointer;
+            border: 1px solid #e6e6e6;
+            background-color: white;
+            overflow: hidden;
+            flex-grow: 1;
+            width: 250px;
+          "
+        >
+          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+            <el-tag type="success"
+              closable
+              :disable-transitions="false"
+              v-for="list in this.dialog.selectCustomerForQuery.selected"
+              :key="list.id"
+              @close="handleCloseCusForQuery(list)"
+              style="margin: 3px;"
+            >
+              {{ list.roleName }}
+            </el-tag>
+          </div>
+        </div>
+      </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-row :gutter="10" class="mb8">
+      <div v-if="activeName === 'person'">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['app:invite:add']"
+          >新增</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="error"
+            plain
+            icon="el-icon-delete"
+            size="mini"
+            @click="handleDelete"
+            v-hasPermi="['app:invite:delete']"
+          >删除</el-button>
+        </el-col>
+      </div>
+      <div v-else style="height: 28px;">
+
+      </div>
+    </el-row>
+
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="个人码" name="person">
+        <!-- 个人邀请码表格 -->
+        <el-table
+          v-loading="loading"
+          :data="tableInfo.list"
+          @selection-change="handleSelectionChange"
+          border
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="邀请码" align="center" prop="invitationCode" min-width="150"/>
+          <el-table-column label="部门" align="left" prop="deptName" min-width="150"/>
+          <el-table-column label="备注" align="center" prop="remark"/>
+          <el-table-column label="创建时间" align="center" prop="createTime" min-width="150" />
+          <el-table-column label="修改时间" align="center" prop="createTime" min-width="150" />
+          <el-table-column label="客服" align="center" min-width="200px" prop="customerNames">
+            <template slot-scope="scope">
+              <div v-for="i in (scope.row.customerNames ? scope.row.customerNames.split(',') : [])" :key="i" style="display: inline;">
+                <el-tag type="primary" style="margin: 3px;">{{i}}</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="标签" align="center" min-width="200" prop="tagsName">
+            <template slot-scope="scope">
+              <div v-for="i in (scope.row.tagNames ? scope.row.tagNames.split(',') : [])" :key="i" style="display: inline;">
+                <el-tag type="success" style="margin: 3px;">{{i}}</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="190">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['app:invite:edit']"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['app:invite:delete']"
+                style="color: red;"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="公司码" name="company">
+        <!-- 公司邀请码表格 -->
+        <el-table
+          v-loading="loading"
+          :data="tableInfo.list"
+          @selection-change="handleSelectionChange"
+          border
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="邀请码" align="center" prop="invitationCode" min-width="150"/>
+          <el-table-column label="公司" align="left" prop="companyName" min-width="150"/>
+          <el-table-column label="备注" align="center" prop="remark"/>
+          <el-table-column label="创建时间" align="center" prop="createTime" min-width="150" />
+          <el-table-column label="修改时间" align="center" prop="createTime" min-width="150" />
+          <el-table-column label="客服" align="center" min-width="200px" prop="customerNames">
+            <template slot-scope="scope">
+              <div v-for="i in (scope.row.customerNames ? scope.row.customerNames.split(',') : [])" :key="i" style="display: inline;">
+                <el-tag type="primary" style="margin: 3px;">{{i}}</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="标签" align="center" min-width="200" prop="tagsName">
+            <template slot-scope="scope">
+              <div v-for="i in (scope.row.tagNames ? scope.row.tagNames.split(',') : [])" :key="i" style="display: inline;">
+                <el-tag type="success" style="margin: 3px;">{{i}}</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="190">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit"
+                @click="handleUpdate(scope.row)"
+                v-hasPermi="['app:invite:edit']"
+              >
+                修改
+              </el-button>
+              <!-- 公司码不需要删除 -->
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- 分页 -->
+    <pagination
+      v-show="tableInfo.total > 0"
+      :total="tableInfo.total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="handleQuery"
+    />
+
+    <!-- 新增/修改邀请码弹窗 -->
+    <el-dialog :title="dialog.title" :visible.sync="dialog.open" v-loading="dialog.loading" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="所属部门" prop="deptId" v-if="activeName === 'person'">
+          <treeselect
+            v-model="form.deptId"
+            :options="deptOptions"
+            :normalizer="normalizer"
+            placeholder="选择部门"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="邀请码" prop="invitationCode">
+          <el-input v-model="form.invitationCode" placeholder="请输入邀请码" :disabled="activeName === 'company'"/>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark" >
+          <el-input v-model="form.remark" placeholder="请输入备注" type="textarea"/>
+        </el-form-item>
+        <el-form-item label="选择的标签" prop="tags">
+          <div @click="openTagSearchPage(true)"
+               style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 351px">
+            <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+              <el-tag type="success" closable :disable-transitions="false"
+                v-for="list in this.dialog.selectTagForEdit.selected" :key="list.id" @close="handleCloseTagsForEdit(list)"
+                style="margin: 3px;">{{ list.name }}
+              </el-tag>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="选择客服" prop="customerIds" style="margin-top: 2%">
+          <div>
+            <el-button size="medium" icon="el-icon-circle-plus-outline" plain
+                       @click="openCusSearchPage(true)">请选择客服</el-button>
+          </div>
+          <div>
+            <el-tag style="margin-left: 5px" size="medium" :key="s.id" v-for="s in dialog.selectCustomerForEdit.selected" closable
+                   :disable-transitions="false" @close="handleCloseCusForEdit(s)">
+              <span>{{ s.roleName }}</span>
+            </el-tag>
+          </div>
+        </el-form-item>
+      </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>
+
+    <!-- 标签搜索弹窗 -->
+    <el-dialog title="标签搜索"
+      :visible.sync="dialog.selectTagForQuery.visible"
+      width="1000px"
+      custom-class="search-tag-dialog"
+      append-to-body
+    >
+      <select-tag
+        :tagSelected="dialog.selectTagForQuery.selected"
+        @tagSubmit="tagSubmitForm(false)"
+        @tagCancel="tagCancel(false)"
+        @tagSelection="tagSelectionForQuery"
+      />
+    </el-dialog>
+
+    <!-- 新增/编辑页：搜索标签 -->
+    <el-dialog title="标签搜索"
+      :visible.sync="dialog.selectTagForEdit.visible"
+      width="1000px"
+      custom-class="search-tag-dialog"
+      append-to-body
+    >
+      <select-tag
+        :tagSelected="dialog.selectTagForEdit.selected"
+        @tagSubmit="tagSubmitForm(true)"
+        @tagCancel="tagCancel(true)"
+        @tagSelection="tagSelectionForEdit"
+      />
+    </el-dialog>
+
+    <!-- 列表页：搜索客服 -->
+    <el-dialog title="客服搜索"
+      :visible.sync="dialog.selectCustomerForQuery.visible"
+      width="1000px"
+      append-to-body
+    >
+      <CusRoleList
+        @confirm="customerSubmitCallForQuery"
+        @selectionChange="customerSelectionChangeCallForQuery"
+        :selected="dialog.selectCustomerForQuery.selected"
+      />
+    </el-dialog>
+
+    <!-- 新增/编辑页：搜索客服 -->
+    <el-dialog title="客服搜索"
+      :visible.sync="dialog.selectCustomerForEdit.visible"
+      width="1000px"
+      append-to-body
+    >
+      <CusRoleList
+        @confirm="customerSubmitCallForEdit"
+        @selectionChange="customerSelectionChangeCallForEdit"
+        :selected="dialog.selectCustomerForEdit.selected"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { findList, save, deleteByIds, getById } from "@/api/app/invitationCode";
+import { listRole } from '@/api/app/user/userList';
+import { getTagByIds } from "@/api/app/tag/tagGroup";
+import { listDept } from '@/api/system/appDept';
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import CusRoleList from '@/views/app/user/CusRoleList.vue';
+import selectTag from "@/views/app/tagGroup/selectTag.vue";
+
+export default {
+  name: "invitationCode",
+  components: { CusRoleList, selectTag, Treeselect },
+  data() {
+    return {
+      // 加载状态
+      loading: false,
+      // 是否显示搜索
+      showSearch: true,
+      // 部门树形选择器选项
+      deptOptions: [],
+      // 表格数据
+      tableInfo: {
+        ids: [],
+        list: [],
+        total: 0,
+      },
+      activeName: 'person',
+      // 查询参数
+      queryParams: {
+        pageSize: 10,
+        pageNum: 1,
+        id: null,
+        invitationCode: null,
+        tagIds: null,
+        customerIds: null,
+      },
+      // 表单数据
+      form: {
+        id: null,
+        invitationCode: null,
+        remark: null,
+        deptId: null,
+        tagIds: null,
+        customerIds: null,
+      },
+      // 表单校验规则
+      rules: {
+        invitationCode: [
+          {
+            trigger: 'blur',
+            required: true,
+            message: '邀请码不可为空！'
+          }
+        ],
+        deptId: [
+          {
+            trigger: 'blur',
+            required: true,
+            message: '所属部门不可为空！'
+          }
+        ],
+      },
+      // 弹窗配置
+      dialog: {
+        title: '',
+        open: false,
+        loading: false,
+        selectTagForQuery: {
+          visible: false,
+          selected: [],
+        },
+        selectTagForEdit: {
+          visible: false,
+          selected: [],
+        },
+        selectCustomerForQuery: {
+          visible: false,
+          selected: [],
+        },
+        selectCustomerForEdit: {
+          visible: false,
+          selected: [],
+        },
+      },
+    };
+  },
+  created() {
+    this.getList();
+    this.getDeptList();
+  },
+  methods: {
+    /**
+     * 查询邀请码列表
+     */
+    getList() {
+      this.loading = true;
+      let qp = {...this.queryParams};
+      qp['tagIds'] = this.dialog.selectTagForQuery.selected.map(s => s.id);
+      qp['customerIds'] = this.dialog.selectCustomerForQuery.selected.map(s => s.id);
+      qp['activeName'] = this.activeName;
+      findList(qp).then(response => {
+        this.tableInfo.list = response.rows;
+        this.tableInfo.total = response.total;
+        this.loading = false;
+      }).catch(() => {
+        this.loading = false;
+      });
+    },
+
+    /**
+     * 获取部门树形数据
+     */
+    getDeptList() {
+      listDept().then(response => {
+        if (response.code === 200) {
+          // 转换为树形结构
+          this.deptOptions = this.handleTree(response.data, "deptId");
+        } else {
+          this.deptOptions = [];
+        }
+      }).catch(() => {
+        this.deptOptions = [];
+      });
+    },
+
+    /**
+     * 树形选择器数据格式化
+     */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.deptId,
+        label: node.deptName,
+        children: node.children
+      };
+    },
+
+    /**
+     * 搜索
+     */
+    handleQuery() {
+      this.getList();
+    },
+
+    /**
+     * 重置搜索
+     */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams = {
+        pageSize: 10,
+        pageNum: 1,
+        id: null,
+        invitationCode: null,
+        tagIds: null,
+        customerIds: null,
+      };
+      this.dialog.selectTagForQuery.selected = [];
+      this.dialog.selectCustomerForQuery.selected = [];
+      this.handleQuery();
+    },
+
+    /**
+     * 多选框选中数据
+     */
+    handleSelectionChange(selection) {
+      this.tableInfo.ids = selection.map(item => item.id);
+    },
+
+    /**
+     * 新增邀请码
+     */
+    handleAdd() {
+      this.reset();
+      this.dialog.title = "新增邀请码";
+      this.dialog.open = true;
+    },
+
+    /**
+     * 修改邀请码
+     */
+    async handleUpdate(row) {
+      this.reset();
+      this.dialog.title = "修改邀请码";
+      this.dialog.open = true;
+      this.dialog.loading = true;
+      // 先加载部门数据，确保下拉框有数据
+      this.getDeptList();
+      let response = await getById({id: row.id, activeName: this.activeName});
+      this.form = response.data;
+      // 加载标签数据
+      if (response.data.tagIds && response.data.tagIds.length > 0) {
+        getTagByIds(response.data.tagIds.split(',')).then(tagsRes => {
+          this.dialog.selectTagForEdit.selected = tagsRes.data;
+        });
+      }
+      // 加载客服数据
+      if (response.data.customerIds && response.data.customerIds.length > 0) {
+        listRole({ids: response.data.customerIds.split(',')}).then(customerRes => {
+          this.dialog.selectCustomerForEdit.selected = customerRes.rows;
+        });
+      }
+      this.dialog.loading = false;
+    },
+
+    /**
+     * 删除邀请码
+     */
+    handleDelete(row) {
+      let ids = [];
+      if (row) {
+        ids = [row.id];
+      } else {
+        ids = this.tableInfo.ids;
+      }
+      if (!ids || ids.length === 0) {
+        return this.$message.error('请选中需要删除的记录！');
+      }
+      this.$confirm('是否确认删除？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteByIds(ids).then(() => {
+          this.getList();
+          this.$message.success('删除成功');
+        });
+      });
+    },
+    /**
+     * tab切换
+     * @param tab 
+     * @param event 
+     */
+    handleClick(tab, event) {
+      this.handleQuery();
+    },
+
+    /**
+     * 提交表单（新增/修改）
+     */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          let submitData = {...this.form};
+          // 组装标签数据
+          if (this.dialog.selectTagForEdit.selected.length > 0) {
+            submitData['tagIds'] = this.dialog.selectTagForEdit.selected.map(s => s.id);
+          }
+          // 组装客服数据
+          if (this.dialog.selectCustomerForEdit.selected.length > 0) {
+            submitData['customerIds'] = this.dialog.selectCustomerForEdit.selected.map(s => s.id);
+          }
+          submitData['activeName'] = this.activeName;
+          save(submitData).then(response => {
+            if (response.code === 200) {
+              this.$message.success('保存成功');
+              this.dialog.open = false;
+              this.getList();
+            } else {
+              this.$message.error(response.msg);
+            }
+          });
+        }
+      });
+    },
+
+    /**
+     * 取消弹窗
+     */
+    cancel() {
+      this.dialog.open = false;
+      this.reset();
+    },
+
+    /**
+     * 重置表单
+     */
+    reset() {
+      this.form = {
+        id: null,
+        invitationCode: null,
+        remark: null,
+        deptId: null,
+        tagIds: null,
+        customerIds: null,
+      };
+      this.dialog.selectCustomerForEdit.selected = [];
+      this.dialog.selectTagForEdit.selected = [];
+      this.resetForm("form");
+    },
+
+    /**
+     * 打开标签搜索页面
+     */
+    openTagSearchPage(isEdit) {
+      if (isEdit) {
+        this.dialog.selectTagForEdit.visible = true;
+      } else {
+        this.dialog.selectTagForQuery.visible = true;
+      }
+    },
+
+    /**
+     * 确定选择标签
+     */
+    tagSubmitForm(isEdit) {
+      if (isEdit) {
+        this.dialog.selectTagForEdit.visible = false;
+      } else {
+        this.dialog.selectTagForQuery.visible = false;
+      }
+    },
+
+    /**
+     * 取消选择标签
+     */
+    tagCancel(isEdit) {
+      if (isEdit) {
+        this.dialog.selectTagForEdit.visible = false;
+      } else {
+        this.dialog.selectTagForQuery.visible = false;
+      }
+    },
+
+    /**
+     * 列表查询-标签选中切换回调
+     */
+    tagSelectionForQuery(group, tag) {
+      if (!tag.isSelected) {
+        this.dialog.selectTagForQuery.selected = this.dialog.selectTagForQuery.selected.filter(item => tag.id != item.id);
+      } else {
+        if (!this.dialog.selectTagForQuery.selected.some(st => st.id == tag.id)) {
+          this.dialog.selectTagForQuery.selected.push(tag);
+        }
+      }
+      this.queryParams.tagIds = this.dialog.selectTagForQuery.selected.map(st => st.id);
+    },
+
+    /**
+     * 编辑页-标签选中切换回调
+     */
+    tagSelectionForEdit(group, tag) {
+      if (!tag.isSelected) {
+        this.dialog.selectTagForEdit.selected = this.dialog.selectTagForEdit.selected.filter(item => tag.id != item.id);
+      } else {
+        if (!this.dialog.selectTagForEdit.selected.some(st => st.id == tag.id)) {
+          this.dialog.selectTagForEdit.selected.push(tag);
+        }
+      }
+    },
+
+    /**
+     * 列表查询-删除一些选择的标签回调
+     */
+    handleCloseTagsForQuery(tagItem) {
+      this.dialog.selectTagForQuery.selected = this.dialog.selectTagForQuery.selected.filter(t => t.id != tagItem.id);
+    },
+
+    /**
+     * 编辑页-删除一些选择的标签回调
+     */
+    handleCloseTagsForEdit(tagItem) {
+      this.dialog.selectTagForEdit.selected = this.dialog.selectTagForEdit.selected.filter(t => t.id != tagItem.id);
+    },
+
+    /**
+     * 打开客服搜索页面
+     */
+    openCusSearchPage(isEdit) {
+      if (isEdit) {
+        this.dialog.selectCustomerForEdit.visible = true;
+      } else {
+        this.dialog.selectCustomerForQuery.visible = true;
+      }
+    },
+
+    /**
+     * 查询选中客服
+     */
+    customerSubmitCallForQuery(selected) {
+      this.dialog.selectCustomerForQuery.visible = false;
+    },
+
+    /**
+     * 查询选中客服
+     */
+    customerSelectionChangeCallForQuery(config) {
+      let selected = config.selected;
+      if (config.mode === 0) {
+        let row = config.row;
+        if (selected) {
+          if (!this.dialog.selectCustomerForQuery.selected.some(s => s.id == row.id)) {
+            this.dialog.selectCustomerForQuery.selected.push(row);
+          }
+        } else {
+          this.dialog.selectCustomerForQuery.selected = this.dialog.selectCustomerForQuery.selected.filter(m => m.id != row.id);
+        }
+      } else {
+        let list = config.rows;
+        if (selected) {
+          list.map(l => {
+            if (!this.dialog.selectCustomerForQuery.selected.some(s => s.id == l.id)) {
+              this.dialog.selectCustomerForQuery.selected.push(l);
+            }
+          });
+        } else {
+          list.map(l => {
+            for (let i = 0; i < this.dialog.selectCustomerForQuery.selected.length; i++) {
+              if (l.id == this.dialog.selectCustomerForQuery.selected[i].id) {
+                this.dialog.selectCustomerForQuery.selected.splice(i, 1);
+              }
+            }
+          });
+        }
+      }
+    },
+
+    /**
+     * 编辑页选中客服
+     */
+    customerSubmitCallForEdit() {
+      this.dialog.selectCustomerForEdit.visible = false;
+    },
+
+    /**
+     * 编辑页选中客服回调
+     */
+    customerSelectionChangeCallForEdit(config) {
+      let selected = config.selected;
+      if (config.mode === 0) {
+        let row = config.row;
+        if (selected) {
+          if (!this.dialog.selectCustomerForEdit.selected.some(s => s.id == row.id)) {
+            this.dialog.selectCustomerForEdit.selected.push(row);
+          }
+        } else {
+          this.dialog.selectCustomerForEdit.selected = this.dialog.selectCustomerForEdit.selected.filter(m => m.id != row.id);
+        }
+      } else {
+        let list = config.rows;
+        if (selected) {
+          list.map(l => {
+            if (!this.dialog.selectCustomerForEdit.selected.some(s => s.id == l.id)) {
+              this.dialog.selectCustomerForEdit.selected.push(l);
+            }
+          });
+        } else {
+          list.map(l => {
+            for (let i = 0; i < this.dialog.selectCustomerForEdit.selected.length; i++) {
+              if (l.id == this.dialog.selectCustomerForEdit.selected[i].id) {
+                this.dialog.selectCustomerForEdit.selected.splice(i, 1);
+              }
+            }
+          });
+        }
+      }
+    },
+
+    /**
+     * 列表查询-删除选择的客服回调
+     */
+    handleCloseCusForQuery(item) {
+      this.dialog.selectCustomerForQuery.selected = this.dialog.selectCustomerForQuery.selected.filter(m => m.id != item.id);
+    },
+
+    /**
+     * 编辑页-删除选择的客服回调
+     */
+    handleCloseCusForEdit(item) {
+      this.dialog.selectCustomerForEdit.selected = this.dialog.selectCustomerForEdit.selected.filter(m => m.id != item.id);
+    },
+
+    /**
+     * 树形结构转换
+     */
+    handleTree(data, id, parentId, children) {
+      id = id || 'id';
+      parentId = parentId || 'parentId';
+      children = children || 'children';
+      var tree = [];
+      var map = {};
+      data.forEach(function(item) {
+        map[item[id]] = item;
+      });
+      data.forEach(function(item) {
+        var parent = map[item[parentId]];
+        if (parent) {
+          (parent[children] || (parent[children] = [])).push(item);
+        } else {
+          tree.push(item);
+        }
+      });
+      return tree;
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.mb8 {
+  margin-bottom: 8px;
+}
+
+.dialog-footer {
+  text-align: center;
+}
+
+.dialog-body {
+  height: 400px;
+  overflow: auto;
+}
+
+.tag-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.name-background {
+  display: inline-block;
+  background-color: #abece6;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.tag-box {
+  padding: 8px 12px;
+  border: 1px solid #989797;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.tag-selected {
+  background-color: #00bc98;
+  color: #fff;
+  border-color: #00bc98;
+}
+
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+</style>

src/views/app/sop/info/GroupChatSelector.vue

@@ -0,0 +1,309 @@
+<template>
+  <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
+    <div class="group-chat-selector">
+      <!-- 左侧搜索选择区域 -->
+      <div class="left-panel">
+        <div class="search-box">
+          <el-input
+            v-model="searchMsg"
+            placeholder="请输入群聊名称搜索"
+            clearable
+            @input="handleSearch"
+          >
+            <el-button slot="append" icon="el-icon-search"></el-button>
+          </el-input>
+        </div>
+        <div class="group-list">
+          <el-checkbox-group v-model="selectedChatIds">
+            <div v-for="item in filteredGroupList" :key="item.chatId" class="group-item">
+              <el-checkbox :label="item.chatId" @change="handleCheckboxChange">
+                <div class="group-info">
+                  <span class="group-name">{{ item.name }}</span>
+                </div>
+              </el-checkbox>
+            </div>
+          </el-checkbox-group>
+        </div>
+      </div>
+      
+      <!-- 分隔线 -->
+      <div class="divider"></div>
+      
+      <!-- 右侧结果展示区域 -->
+      <div class="right-panel">
+        <div class="selected-header">
+          <span>已选择群聊 ({{ selectedChatIds.length }})</span>
+          <el-button type="text" @click="clearSelection">清空</el-button>
+        </div>
+        <div class="selected-list">
+          <div v-for="chatId in selectedChatIds" :key="chatId" class="selected-item">
+            <span class="selected-name">{{ getGroupNameById(chatId) }}</span>
+            <el-button 
+              type="text" 
+              icon="el-icon-close" 
+              @click="removeSelected(chatId)"
+              class="remove-btn"
+            ></el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="cancel">取 消</el-button>
+      <el-button type="primary" @click="confirmSelection">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+// import { listAll as chatListAll } from '@/api/qw/groupChat'
+
+export default {
+  name: "GroupChatSelector",
+  props: {
+    title: {
+      type: String,
+      default: "选择群聊"
+    },
+    qwUserIds: {
+      type: Array,
+      default: () => []
+    },
+    corpId: {
+      type: String,
+      default: ""
+    },
+    sopId: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      open: false,
+      searchMsg: "",
+      groupList: [],
+      selectedChatIds: [],
+      initialSelectedChatIds: [], // 用于存储初始选中的群聊ID
+      groupNameCache: {} // 用于缓存群聊名称
+    };
+  },
+  computed: {
+    filteredGroupList() {
+      if (!this.searchMsg) {
+        return this.groupList;
+      }
+      return this.groupList.filter(item => 
+        item.name.toLowerCase().includes(this.searchMsg.toLowerCase())
+      );
+    }
+  },
+  methods: {
+    // 获取群聊列表
+    getGroupChatList() {
+      const qwUserIdsStr = this.qwUserIds.join();
+      // chatListAll(qwUserIdsStr, this.corpId, this.sopId, this.searchMsg).then(res => {
+      //   this.groupList = res.data || [];
+      //   // 更新缓存
+      //   this.updateGroupNameCache();
+      // });
+    },
+    
+    // 更新群聊名称缓存
+    updateGroupNameCache() {
+      if (!this.groupNameCache) {
+        this.groupNameCache = {};
+      }
+      
+      // 将所有群聊信息添加到缓存中
+      this.groupList.forEach(group => {
+        if (group.chatId && group.name) {
+          this.groupNameCache[group.chatId] = group.name;
+        }
+      });
+    },
+    
+    // 处理搜索
+    handleSearch() {
+      this.getGroupChatList();
+    },
+    
+    // 根据ID获取群聊名称
+    getGroupNameById(chatId) {
+      // 先从缓存中查找
+      if (this.groupNameCache && this.groupNameCache[chatId]) {
+        return this.groupNameCache[chatId];
+      }
+      
+      // 如果缓存中没有，则从当前列表中查找
+      const group = this.groupList.find(item => item.chatId === chatId);
+      if (group && group.name) {
+        // 找到后保存到缓存
+        if (!this.groupNameCache) {
+          this.groupNameCache = {};
+        }
+        this.groupNameCache[chatId] = group.name;
+        return group.name;
+      }
+      
+      return chatId || '';
+    },
+    
+    // 处理复选框变化
+    handleCheckboxChange() {
+      // 复选框变化时立即通知父组件更新
+      this.$emit('selectGroupChats', this.selectedChatIds);
+    },
+    
+    // 从右侧移除选中项
+    removeSelected(chatId) {
+      const index = this.selectedChatIds.indexOf(chatId);
+      if (index !== -1) {
+        this.selectedChatIds.splice(index, 1);
+        // 移除选中项时立即通知父组件更新
+        this.$emit('selectGroupChats', this.selectedChatIds);
+      }
+    },
+    
+    // 清空选择
+    clearSelection() {
+      this.selectedChatIds = [];
+    },
+    
+    // 确认选择
+    confirmSelection() {
+      this.$emit('selectGroupChats', this.selectedChatIds);
+      this.cancel();
+    },
+    
+    // 取消选择
+    cancel() {
+      this.open = false;
+      this.searchMsg = "";
+      // 恢复到初始选中状态
+      this.selectedChatIds = [...this.initialSelectedChatIds];
+    },
+    
+    // 打开弹窗并初始化数据
+    show(selectedChatIds = []) {
+      this.open = true;
+      this.selectedChatIds = [...selectedChatIds];
+      this.initialSelectedChatIds = [...selectedChatIds];
+      this.getGroupChatList();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.group-chat-selector {
+  display: flex;
+  height: 500px;
+}
+
+.left-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-right: 10px;
+}
+
+.search-box {
+  margin-bottom: 15px;
+}
+
+.group-list {
+  flex: 1;
+  overflow-y: auto;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+}
+
+.group-item {
+  padding: 10px;
+  transition: background-color 0.3s;
+}
+
+.group-item:hover {
+  background-color: #f5f7fa;
+}
+
+.group-info {
+  display: flex;
+  align-items: center;
+}
+
+.group-name {
+  margin-left: 5px;
+  font-size: 14px;
+}
+
+.divider {
+  width: 1px;
+  background-color: #e6e6e6;
+  margin: 0 15px;
+}
+
+.right-panel {
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.selected-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding: 0 10px;
+}
+
+.selected-list {
+  flex: 1;
+  overflow-y: auto;
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+}
+
+.selected-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.3s;
+}
+
+.selected-item:hover {
+  background-color: #f5f7fa;
+}
+
+.selected-item {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.selected-name {
+  flex: 1;
+}
+
+.remove-btn {
+  padding: 2px;
+}
+
+.remove-btn:hover {
+  color: #f56c6c;
+  transform: scale(1.2);
+  transition: transform 0.2s;
+}
+</style>

src/views/app/sop/info/ImageUpload.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="component-upload-image">
+    <el-upload
+      :action="uploadUrl"
+      list-type="picture-card"
+      :on-success="handleUploadSuccess"
+      :before-upload="handleBeforeUpload"
+      :limit="limit"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      name="file"
+      :on-remove="handleRemove"
+      :show-file-list="true"
+      :file-list="fileList"
+      :on-preview="handlePictureCardPreview"
+      :class="{hide: this.fileList.length >= this.limit}"
+    >
+      <i class="el-icon-plus"></i>
+    </el-upload>
+
+    <el-dialog
+      :visible.sync="dialogVisible"
+      title="预览"
+      width="800"
+      append-to-body
+    >
+      <img
+        :src="dialogImageUrl"
+        style="display: block; max-width: 100%; margin: 0 auto"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+
+export default {
+  name: "ImageUpload",
+  props: {
+    value: [String, Object, Array],
+    // 图片数量限制
+    limit: {
+      type: Number,
+      default: 1,
+    },
+    // 大小限制(MB)
+    fileSize: {
+       type: Number,
+       default: 1,
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["png", "jpg", "jpeg"],
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      hideUpload: false,
+      baseUrl:"",
+      uploadUrl:process.env.VUE_APP_BASE_API+"/app/common/uploadOSSByHOOKImage",
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: []
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',');
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            if (typeof item === "string") {
+              if (item.indexOf(this.baseUrl) === -1) {
+                  item = { name: item, url: item };
+              } else {
+                  item = { name: item, url: item };
+              }
+            }
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+  },
+  methods: {
+    // 删除图片
+    handleRemove(file, fileList) {
+      const findex = this.fileList.map(f => f.name).indexOf(file.name);
+      if(findex > -1) {
+        this.fileList.splice(findex, 1);
+        this.$emit("input", this.listToString(this.fileList));
+      }
+    },
+    // 上传成功回调
+    handleUploadSuccess(res,file) {
+      this.fileList.push({ name: res.url, url: res.url });
+      this.$emit("input", this.listToString(this.fileList));
+      this.loading.close();
+    },
+    // 上传前loading加载
+    handleBeforeUpload(file) {
+      let isImg = false;
+      if (this.fileType.length) {
+        let fileExtension = "";
+        if (file.name.lastIndexOf(".") > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+        }
+        isImg = this.fileType.some(type => {
+          if (file.type.indexOf(type) > -1) return true;
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+          return false;
+        });
+      } else {
+        isImg = file.type.indexOf("image") > -1;
+      }
+
+      if (!isImg) {
+        this.$message.error(
+          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
+        );
+        return false;
+      }
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      this.loading = this.$loading({
+        lock: true,
+        text: "上传中",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 上传失败
+    handleUploadError() {
+      this.$message({
+        type: "error",
+        message: "上传失败",
+      });
+      this.loading.close();
+    },
+    // 预览
+    handlePictureCardPreview(file) {
+      console.log(file)
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].url.replace(this.baseUrl, "") + separator;
+      }
+      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+// .el-upload--picture-card 控制加号部分
+::v-deep.hide .el-upload--picture-card {
+    display: none;
+}
+// 去掉动画效果
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+    transition: all 0s;
+}
+
+::v-deep .el-list-enter, .el-list-leave-active {
+    opacity: 0;
+    transform: translateY(0);
+}
+</style>
+

src/views/app/sop/info/TimeRangePicker.vue

@@ -0,0 +1,542 @@
+<template>
+  <div>
+    <!-- 可选的标题区 -->
+    <template v-if="showHeader">
+      <h2>日期 → 弹窗精确到分钟的时间范围选择器</h2>
+    </template>
+
+    <div class="row">
+      <el-date-picker
+        v-model="selectedDate"
+        type="date"
+        placeholder="选择日期"
+        value-format="yyyy-MM-dd"
+      />
+      <el-button type="primary" @click="openPicker">
+        选择时间范围
+      </el-button>
+
+    </div>
+
+    <template v-if="showHeader">
+      <h3 style="margin-top:20px;">已保存的范围</h3>
+    </template>
+    <ul>
+      <li v-for="(r, i) in ranges" :key="i">
+        日期 <b>{{ r.date }}</b>：
+        <code>{{ fmt(r.startMs) }}</code> ~ <code>{{ fmt(r.endMs) }}</code>
+        <el-button type="text" size="mini" @click="removeRange(i)" style="color:red;">删除</el-button>
+      </li>
+      <li v-if="!ranges.length" class="hint">暂无数据</li>
+
+    </ul>
+
+    <!-- 弹窗 -->
+    <el-dialog
+      :title="'为 ' + selectedDate + ' 选择时间范围（分钟级禁用，秒补 00）'"
+      :visible.sync="show"
+      width="980px"
+      :close-on-click-modal="false"
+      append-to-body
+    >
+      <div class="modal-body">
+        <!-- 左侧主区域 -->
+        <div>
+          <div class="day-bar-wrap">
+            <div class="day-bar-header">
+              <div class="row">
+                <el-button @click="shiftDay(-1)" size="mini">← 上一天</el-button>
+                <el-date-picker
+                  v-model="viewDay"
+                  type="date"
+                  size="mini"
+                  value-format="yyyy-MM-dd"
+                />
+                <el-button @click="shiftDay(+1)" size="mini">下一天 →</el-button>
+              </div>
+              <div class="bar-legend">
+                <span><i class="dot dot-free"></i>可选</span>
+                <span><i class="dot dot-busy"></i>已占用</span>
+                <span><i class="dot dot-range"></i>当前选择</span>
+              </div>
+            </div>
+
+            <canvas ref="canvas"
+                    @mousemove="onHover"
+                    @mouseleave="hoverSec=null"
+                    @click="onClick"></canvas>
+            <div class="ticks">
+              <span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span>
+            </div>
+          </div>
+
+          <div style="margin-top:12px;" class="kv">
+            <div>当前在选：<span class="chip">{{ selectingLabel }}</span>
+              <span v-if="hoverSec !== null" class="hint">光标：{{ secToHMS(hoverSec) }}</span>
+            </div>
+            <div>开始：<b v-if="draft.startMs">{{ fmt(draft.startMs) }}</b><span v-else class="hint">未设置</span></div>
+            <div>结束：<b v-if="draft.endMs">{{ fmt(draft.endMs) }}</b><span v-else class="hint">未设置</span></div>
+            <div v-if="conflictMsg" class="danger">{{ conflictMsg }}</div>
+            <div v-else-if="draft.startMs && draft.endMs" class="ok">选择有效 ✅</div>
+          </div>
+        </div>
+
+        <!-- 右侧辅助输入 -->
+        <div class="aside">
+          <div class="kv">
+            <div><b>辅助输入（分钟级）</b></div>
+            <div style="margin:6px 0 10px" class="hint">秒数会自动补 00</div>
+            <div class="row">
+              <el-date-picker
+                v-model="startStr"
+                type="datetime"
+                value-format="yyyy-MM-ddTHH:mm"
+                format="yyyy-MM-dd HH:mm"
+                placeholder="开始时间"
+                :picker-options="{ selectableRange: '00:00:00 - 23:59:00' }"
+                @change="applyStartStr"
+              />
+              <el-button size="mini" @click="selecting='end'">下一步：选结束</el-button>
+            </div>
+            <div class="row" style="margin-top:8px;">
+              <el-date-picker
+                v-model="endStr"
+                type="datetime"
+                value-format="yyyy-MM-ddTHH:mm"
+                format="yyyy-MM-dd HH:mm"
+                placeholder="结束时间"
+                :picker-options="{ selectableRange: '00:00:00 - 23:59:00' }"
+                @change="applyEndStr"
+              />
+              <el-button size="mini" @click="selecting='start'">切回：选开始</el-button>
+            </div>
+            <div class="hint" style="margin-top:8px;">已占用区间会被自动挡住或剪齐到边界。</div>
+
+            <div style="margin-top:18px;"><b>当天禁用切片（分钟）</b></div>
+            <ul style="max-height:140px; overflow:auto; border:1px dashed #e5e7eb; border-radius:8px; padding:8px;">
+              <li v-for="(seg, i) in daySegments" :key="i" class="hint">
+                {{ secToHMS(seg[0]) }} ~ {{ secToHMS(seg[1]) }}
+              </li>
+              <li v-if="!daySegments.length" class="hint">无</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="show=false">关闭</el-button>
+        <el-button type="primary" :disabled="!canSave" @click="save">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TimeRangePicker",
+  props: {
+    showHeader: { type: Boolean, default: false },
+    emitOnSave: { type: Boolean, default: true }, // 保存时向父组件通知
+    value: { type: Array, default: () => [] } // 新增，用来接收外部 ranges
+  },
+  data() {
+    return {
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone || "Local",
+      selectedDate: new Date().toISOString().split("T")[0],
+      show: false,
+
+      ranges: [], // [{date,startMs,endMs}]
+      draft: { startMs: null, endMs: null },
+
+      viewDay: "",
+      hoverSec: null,
+      daySegments: [],
+
+      selecting: "start",
+      startStr: "",
+      endStr: "",
+      conflictMsg: "",
+    };
+  },
+  computed: {
+    canSave() {
+      return (
+        this.draft.startMs &&
+        this.draft.endMs &&
+        this.draft.startMs < this.draft.endMs &&
+        !this.conflictMsg
+      );
+    },
+    selectingLabel() {
+      return this.selecting === "start"
+        ? "正在选择：开始时间"
+        : "正在选择：结束时间";
+    },
+  },
+  methods: {
+
+    removeRange(index) {
+      this.ranges.splice(index, 1);
+      // 同步更新到父组件
+      this.$emit("input", JSON.parse(JSON.stringify(this.ranges)));
+      this.$emit("saved", JSON.parse(JSON.stringify(this.ranges)));
+    },
+
+    pad(n){ return String(n).padStart(2,'0'); },
+    fmt(ms) {
+      const d = new Date(ms);
+      return `${d.getFullYear()}-${this.pad(d.getMonth()+1)}-${this.pad(d.getDate())} ${this.pad(d.getHours())}:${this.pad(d.getMinutes())}:00`;
+    },
+    toMs(str) {
+      const [d,t] = str.split(' ');
+      const [y,M,D] = d.split('-').map(Number);
+      const [h,m,s] = t.split(':').map(Number);
+      const dt = new Date(y, M-1, D, h, m, s);
+      dt.setSeconds(0,0);
+      return dt.getTime();
+    },
+    dayStartMs(dayStr){ const [y,M,D]=dayStr.split('-').map(Number); const dt=new Date(y,M-1,D,0,0,0); dt.setSeconds(0,0); return dt.getTime(); },
+    dayEndMs(dayStr){ const [y,M,D]=dayStr.split('-').map(Number); return new Date(y,M-1,D,23,59,59).getTime(); },
+    secToHMS(min){ const h=Math.floor(min/60),m=min%60; return `${this.pad(h)}:${this.pad(m)}:00`; },
+
+    refreshRanges() {
+      // 优先来源：props.value（父组件可能在任何时刻更新）
+      // 如果父组件没给，则保留已有 this.ranges
+      const source = (Array.isArray(this.value) && this.value.length) ? this.value : this.ranges;
+      // 规范化（使用你已有 normalizeRanges 实现）
+      this.ranges = this.normalizeRanges(source || []);
+      // 如果当前 viewDay 没有占用段，优先切到第一个有占用的日期
+      if (!this.viewDay && this.ranges.length) {
+        this.viewDay = this.ranges[0].date;
+      }
+      const hasOnView = this.viewDay && this.ranges.some(r => r.date === this.viewDay);
+      if (!hasOnView && this.ranges.length) {
+        // 切换到第一个有占用的日期，便于查看
+        this.viewDay = this.ranges[0].date;
+      }
+      // 强制重算并重绘
+      this.computeDaySegments();
+      this.$nextTick(this.drawCanvas);
+    },
+
+// 放在 methods: { ... } 里
+    normalizeRanges(arr) {
+      if (!Array.isArray(arr)) return [];
+      const pad = (n) => String(n).padStart(2,'0');
+
+      // 把各种可能的值解析为毫秒（返回 null 表示无法解析）
+      const parseToMs = (v, dateForHHmm) => {
+        if (v == null) return null;
+        if (typeof v === 'number') return v;
+        if (v instanceof Date) return v.getTime();
+        if (typeof v !== 'string') return null;
+
+        // 纯数字字符串（时间戳毫秒）
+        if (/^\d+$/.test(v)) return Number(v);
+
+        // ISO 或带 T 的 datetime
+        if (v.includes('T')) {
+          const dt = new Date(v);
+          return isNaN(dt.getTime()) ? null : dt.getTime();
+        }
+
+        // "yyyy-MM-dd HH:mm" 或 "yyyy-MM-dd HH:mm:ss"
+        if (/^\d{4}-\d{2}-\d{2} /.test(v)) {
+          const iso = v.replace(' ', 'T');
+          const dt = new Date(iso);
+          if (!isNaN(dt.getTime())) return dt.getTime();
+          // fallback 手动解析
+          const [d, t] = v.split(' ');
+          const [y, mo, da] = d.split('-').map(Number);
+          const [hh = 0, mm = 0] = (t || '00:00').split(':').map(Number);
+          const dt2 = new Date(y, mo - 1, da, hh, mm, 0);
+          return isNaN(dt2.getTime()) ? null : dt2.getTime();
+        }
+
+        // 只有 "HH:mm" 且同时提供 dateForHHmm（'yyyy-MM-dd'）
+        if (/^\d{1,2}:\d{2}$/.test(v) && dateForHHmm) {
+          const [y, mo, da] = dateForHHmm.split('-').map(Number);
+          const [hh, mm] = v.split(':').map(Number);
+          const dt = new Date(y, mo - 1, da, hh, mm, 0);
+          return isNaN(dt.getTime()) ? null : dt.getTime();
+        }
+
+        // 最后尝试 new Date()
+        const dtry = new Date(v);
+        return isNaN(dtry.getTime()) ? null : dtry.getTime();
+      };
+
+      const getDateStrFromMs = (ms) => {
+        const d = new Date(ms);
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+      };
+      const getTimePartsFromMs = (ms) => {
+        const d = new Date(ms);
+        return { h: d.getHours(), m: d.getMinutes(), s: d.getSeconds() };
+      };
+
+      const out = [];
+      for (const raw of arr) {
+        if (!raw) continue;
+        const r = Object.assign({}, raw);
+
+        // 尝试从各种命名拿到 start/end
+        let startMs = parseToMs(r.startMs ?? r.start ?? r.startTime ?? r.startAt, r.date);
+        let endMs = parseToMs(r.endMs ?? r.end ?? r.endTime ?? r.endAt, r.date);
+
+        // 支持 timeRange 字段 "09:00-10:00"
+        if ((startMs == null || endMs == null) && typeof r.timeRange === 'string' && r.date) {
+          const parts = r.timeRange.split('-').map(s => s.trim());
+          if (parts.length === 2) {
+            const sMs = parseToMs(parts[0], r.date);
+            const eMs = parseToMs(parts[1], r.date);
+            if (sMs != null && eMs != null) {
+              startMs = startMs ?? sMs;
+              endMs = endMs ?? eMs;
+            }
+          }
+        }
+
+        // 仍解析失败则跳过并打印 warn（便于调试）
+        if (typeof startMs !== 'number' || typeof endMs !== 'number' || isNaN(startMs) || isNaN(endMs)) {
+          console.warn('[TimeRangePicker] normalizeRanges 跳过无法解析的 range：', raw);
+          continue;
+        }
+
+        // 若有 r.date，但 startMs/endMs 对应的本地日期与 r.date 不一致，
+        // 则把 startMs/endMs 的 时分秒“贴到” r.date 上进行修正（这是为了解决你传入 date 与 timestamp 不对应的问题）
+        if (r.date) {
+          const sDateStr = getDateStrFromMs(startMs);
+          const eDateStr = getDateStrFromMs(endMs);
+          if (sDateStr !== r.date) {
+            const tp = getTimePartsFromMs(startMs);
+            const [y, mo, da] = r.date.split('-').map(Number);
+            const fixed = new Date(y, mo - 1, da, tp.h, tp.m, tp.s || 0);
+            console.warn('[TimeRangePicker] 修正 startMs 日期不匹配：', sDateStr, '-> 贴到', r.date, '（new:', fixed.toString(), '）');
+            startMs = fixed.getTime();
+          }
+          if (eDateStr !== r.date) {
+            const tp = getTimePartsFromMs(endMs);
+            const [y, mo, da] = r.date.split('-').map(Number);
+            const fixed = new Date(y, mo - 1, da, tp.h, tp.m, tp.s || 0);
+            console.warn('[TimeRangePicker] 修正 endMs 日期不匹配：', eDateStr, '-> 贴到', r.date, '（new:', fixed.toString(), '）');
+            endMs = fixed.getTime();
+          }
+        }
+
+        // 保证 start <= end
+        if (startMs > endMs) {
+          const t = startMs; startMs = endMs; endMs = t;
+        }
+
+        r.startMs = Math.floor(startMs);
+        r.endMs = Math.floor(endMs);
+
+        // 如果没有 date 字段则根据 startMs 补上（本地日期）
+        if (!r.date) {
+          const d = new Date(r.startMs);
+          r.date = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+        }
+
+        out.push(r);
+      }
+
+      return out;
+    },
+
+    // 自带按钮打开弹窗（父组件无需 $refs）
+    openPicker(){
+      if (!this.selectedDate) {
+        this.$message.warning("请先选择日期");
+        return;
+      }
+
+      // 规范并刷新 ranges（从 props.value 或内部 ranges）
+      this.refreshRanges();
+
+      // 选择视图日期：优先显示 selectedDate（如果有占用），否则显示 first busy date
+      const hasOnSelected = this.ranges.some(r => r.date === this.selectedDate);
+      if (hasOnSelected) this.viewDay = this.selectedDate;
+      else if (this.ranges.length) this.viewDay = this.ranges[0].date || this.selectedDate;
+      else this.viewDay = this.selectedDate;
+
+      this.show=true;
+      this.viewDay=this.selectedDate;
+      this.draft={startMs:null,endMs:null};
+      this.startStr='';this.endStr='';
+      this.selecting='start';
+      this.computeDaySegments();
+      this.$nextTick(this.drawCanvas);
+    },
+    shiftDay(delta){
+      const base=this.dayStartMs(this.viewDay);
+      const next=new Date(base+delta*24*3600*1000);
+      this.viewDay=`${next.getFullYear()}-${this.pad(next.getMonth()+1)}-${this.pad(next.getDate())}`;
+      this.computeDaySegments();
+      this.drawCanvas();
+    },
+    computeDaySegments(){
+      const ds=this.dayStartMs(this.viewDay),de=this.dayEndMs(this.viewDay);
+      let segs=[];
+      for(const r of this.ranges){
+        const s=Math.max(r.startMs,ds),e=Math.min(r.endMs,de);
+        if(s<=e){
+          const from=Math.floor((s-ds)/60000);
+          const to=Math.floor((e-ds)/60000);
+          segs.push([Math.max(0,from),Math.min(1439,to)]);
+        }
+      }
+      segs.sort((a,b)=>a[0]-b[0]);
+      const merged=[];
+      for(const seg of segs){
+        if(!merged.length||seg[0]>merged[merged.length-1][1]+1) merged.push(seg);
+        else merged[merged.length-1][1]=Math.max(merged[merged.length-1][1],seg[1]);
+      }
+      this.daySegments=merged;
+      this.validateConflict();
+    },
+    validateConflict(){
+      this.conflictMsg='';
+      const {startMs,endMs}=this.draft;
+      if(!startMs||!endMs||startMs>=endMs) return;
+      for(const r of this.ranges){
+        if(!(endMs<r.startMs||startMs>r.endMs)){
+          const touchStart=startMs===r.endMs+60000;
+          const touchEnd=endMs===r.startMs-60000;
+          if(touchStart||touchEnd) continue;
+          this.conflictMsg='所选范围与已占用区间发生重叠，请重新选择或使用辅助输入自动剪齐。';
+          this.$message.warning("所选范围与已占用区间发生重叠，请重新选择或使用辅助输入自动剪齐")
+          break;
+        }
+      }
+    },
+    dateOfMs(ms){ const d=new Date(ms); return `${d.getFullYear()}-${this.pad(d.getMonth()+1)}-${this.pad(d.getDate())}`; },
+    drawCanvas(){
+      const el=this.$refs.canvas;if(!el)return;
+      const dpr=window.devicePixelRatio||1;
+      const cssW=el.clientWidth,cssH=el.clientHeight;
+      el.width=Math.floor(cssW*dpr);el.height=Math.floor(cssH*dpr);
+      const ctx=el.getContext('2d');ctx.scale(dpr,dpr);
+      ctx.clearRect(0,0,cssW,cssH);
+      const W=cssW,H=cssH;
+      const minToX=(min)=>min/1439*(W-2)+1;
+      ctx.fillStyle='#e5e7eb';ctx.strokeStyle='#d1d5db';ctx.lineWidth=1;
+      for(const [a,b] of this.daySegments){const x=minToX(a),w=minToX(b)-x;ctx.fillRect(x,1,w,H-2);ctx.strokeRect(x,1,Math.max(1,w),H-2);}
+      ctx.strokeStyle='#f3f4f6';
+      for(let h=0;h<=24;h++){const min=h*60;const x=Math.floor(minToX(min));ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,H);ctx.stroke();}
+      const {startMs,endMs}=this.draft;
+      if(startMs){const s=Math.floor((startMs-this.dayStartMs(this.viewDay))/60000);if(this.dateOfMs(startMs)===this.viewDay){ctx.fillStyle='#93c5fd';ctx.fillRect(minToX(s)-1,0,2,H);}}
+      if(startMs&&endMs){const ds=this.dayStartMs(this.viewDay),de=this.dayEndMs(this.viewDay);const visS=Math.max(startMs,ds),visE=Math.min(endMs,de);if(visS<=visE){const a=Math.floor((visS-ds)/60000);const b=Math.floor((visE-ds)/60000);ctx.fillStyle='#60a5fa';const x=minToX(a),w=minToX(b)-x;ctx.fillRect(x,6,Math.max(2,w),H-12);}}
+      if(this.hoverSec!==null){ctx.fillStyle='#111827';const x=Math.floor(minToX(this.hoverSec));ctx.fillRect(x,0,1,H);}
+    },
+    pxToSec(evt){const el=this.$refs.canvas;const rect=el.getBoundingClientRect();const x=evt.clientX-rect.left;const w=el.clientWidth;let min=Math.round(x/w*1439);return Math.max(0,Math.min(1439,min));},
+    onHover(evt){this.hoverSec=this.pxToSec(evt);this.drawCanvas();},
+    onClick(evt){
+      const min=this.pxToSec(evt);
+      if(this.isSecDisabled(min)) return;
+      const ms=this.dayStartMs(this.viewDay)+min*60000;
+      if(this.selecting==='start'){this.draft.startMs=ms;if(this.draft.endMs&&this.draft.endMs<=ms)this.draft.endMs=null;this.startStr=this.msToLocalInput(ms);this.selecting='end';}
+      else{const fixed=this.clipEndAuto(ms);this.draft.endMs=fixed;this.endStr=this.msToLocalInput(fixed);}
+      this.computeDaySegments();this.validateConflict();this.drawCanvas();
+    },
+    isSecDisabled(min){
+      for(const [a,b] of this.daySegments){if(min>=a&&min<=b)return true;}
+      if(this.selecting==='end'&&this.draft.startMs){const minMs=this.draft.startMs+60000;const candidate=this.dayStartMs(this.viewDay)+min*60000;if(candidate<minMs)return true;}
+      return false;
+    },
+    clipEndAuto(endMs){
+      const startMs=this.draft.startMs;if(!startMs)return endMs;if(endMs<=startMs)return startMs+60000;
+      for(const r of this.ranges){if(!(endMs<=r.startMs||startMs>=r.endMs)){if(r.startMs>startMs){return Math.min(endMs,r.startMs-60000);}}}
+      return endMs;
+    },
+    msToLocalInput(ms){const d=new Date(ms);const Y=d.getFullYear(),M=this.pad(d.getMonth()+1),D=this.pad(d.getDate());const h=this.pad(d.getHours()),m=this.pad(d.getMinutes());return `${Y}-${M}-${D}T${h}:${m}`;},
+    parseLocalInput(str){if(!str)return null;const [date,time]=str.split('T');if(!time)return null;const [y,M,D]=date.split('-').map(Number);const parts=time.split(':').map(Number);const h=parts[0]||0;const m=parts[1]||0;return new Date(y,M-1,D,h,m,0).getTime();},
+    applyStartStr(){
+      const ms=this.parseLocalInput(this.startStr);if(!ms)return;
+      if(this.isMsInBusy(ms)){const next=this.snapOut(ms,+1);this.draft.startMs=next;this.startStr=this.msToLocalInput(next);}
+      else{this.draft.startMs=ms;}
+      if(this.draft.endMs&&this.draft.endMs<=this.draft.startMs)this.draft.endMs=null;
+      this.selecting='end';this.computeDaySegments();this.validateConflict();this.drawCanvas();
+    },
+    applyEndStr(){
+      let ms=this.parseLocalInput(this.endStr);if(!ms)return;
+      if(!this.draft.startMs){this.$message.warning('请先设置开始时间');this.endStr='';return;}
+      if(ms<=this.draft.startMs) ms=this.draft.startMs+60000;
+      if(this.isMsRangeOverBusy(this.draft.startMs,ms)){ms=this.clipEndAuto(ms);}
+      this.draft.endMs=ms;this.selecting='start';this.computeDaySegments();this.validateConflict();this.drawCanvas();
+    },
+    isMsInBusy(ms){for(const r of this.ranges){if(!(ms<r.startMs||ms>r.endMs))return true;}return false;},
+    isMsRangeOverBusy(s,e){for(const r of this.ranges){if(!(e<=r.startMs||s>=r.endMs))return true;}return false;},
+    snapOut(ms,dir){if(dir===0)return ms;let cur=ms;const step=60000*Math.sign(dir);for(let i=0;i<1440;i++){let inside=false;for(const r of this.ranges){if(!(cur<r.startMs||cur>r.endMs)){inside=true;break;}}if(!inside)return cur;cur+=step;}return ms;},
+    save() {
+      if (!this.canSave) return;
+
+      const start = new Date(this.draft.startMs);
+      start.setSeconds(0, 0);
+      const end = new Date(this.draft.endMs);
+      end.setSeconds(0, 0);
+
+      const pad = (n) => String(n).padStart(2, '0');
+      const dateStr = `${start.getFullYear()}-${pad(start.getMonth() + 1)}-${pad(start.getDate())}`;
+
+      const rec = {
+        date: dateStr,
+        startMs: start.getTime(),
+        endMs: end.getTime()
+      };
+
+      // 直接 push
+      this.ranges.push(rec);
+
+      // emit 给父组件，让它来驱动
+      const out = JSON.parse(JSON.stringify(this.ranges));
+      if (this.emitOnSave) {
+        this.$emit('saved', out);
+        this.$emit('input', out);
+      }
+
+      // 更新界面状态
+      this.selectedDate = dateStr;
+      this.viewDay = dateStr;
+      this.show = false;
+    }
+
+
+  },
+  watch:{
+    viewDay(){this.computeDaySegments();this.$nextTick(this.drawCanvas);},
+    daySegments(){this.$nextTick(this.drawCanvas);},
+    draft:{deep:true,handler(){this.validateConflict();this.$nextTick(this.drawCanvas);}},
+    value: {
+      deep: true,
+      handler(val) {
+        this.ranges = JSON.parse(JSON.stringify(val));
+      }
+    }
+  },
+  mounted() {
+    this.ranges = JSON.parse(JSON.stringify(this.value));
+  },
+};
+</script>
+
+<style scoped>
+/* 复用你的样式（略有精简） */
+.row { display:flex; gap:12px; align-items:center; flex-wrap: wrap; }
+.hint { font-size:12px; color:#6b7280; }
+.chip { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; margin-left:6px; }
+.day-bar-wrap { border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
+.day-bar-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
+.bar-legend { font-size:12px; color:#6b7280; display:flex; gap:12px; align-items:center; }
+.dot { width:10px; height:10px; border-radius:2px; display:inline-block; vertical-align:middle; margin-right:6px; }
+.dot-free { background:#10b981; }
+.dot-busy { background:#e5e7eb; border:1px solid #d1d5db; }
+.dot-range { background:#60a5fa; }
+canvas { width:100%; height:52px; border-radius:8px; display:block; background:linear-gradient(180deg, #fafafa, #fff); border:1px solid #e5e7eb; }
+.ticks { font-size:12px; color:#9ca3af; display:flex; justify-content:space-between; margin-top:6px; }
+.kv { font-size:14px; line-height:1.8; }
+.kv b { color:#111827; }
+.danger { color:#b91c1c; font-size: 20px;background-color: wheat }
+.ok { color:#065f46; }
+.aside { border-left:1px dashed #e5e7eb; padding-left:16px; }
+</style>

src/views/app/sop/info/addSop.vue

@@ -0,0 +1,969 @@
+<template>
+ <div class="app-container">
+  
+    <div v-if="opType == 0" style="margin: 30px;"> 添加自动化任务</div>
+    <div v-else-if="opType == 1" style="margin: 30px;"> 修改自动化任务</div>
+    <div v-else style="margin: 30px;"> 查看自动化任务</div>
+
+    <div style="margin-top: 10px;margin-left: 50px;margin-right: 100px;margin-bottom: 30px;">
+
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="规则名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入规则名称" />
+        </el-form-item>
+
+        <el-form-item label="状态" prop="status">
+          <dict-tag :options="statusOptions" :value="form.status"></dict-tag>
+        </el-form-item>
+
+        <el-form-item label="筛选方式" prop="filterMode">
+          <el-radio-group v-model="form.filterMode">
+            <el-radio :label="1">标签
+            </el-radio>
+            <el-radio :label="2" v-show="false">群聊
+            </el-radio>
+          </el-radio-group>
+          <div style="color: #999;font-size: 14px;display: flex;align-items: center;" v-if="form.filterMode == 1">
+            <i class="el-icon-info"></i>
+            标签：根据客户的标签筛选客户进入自动化
+          </div>
+          <div style="color: #999;font-size: 14px;display: flex;align-items: center;" v-if="form.filterMode == 2">
+            <i class="el-icon-info"></i>
+            群聊：选择用户所属的群聊，并且只能选择科普模板，科普模板里面第一条规则是发送到群聊，其他规则提醒会发送到群里面的个人
+          </div>
+        </el-form-item>
+  
+
+        <el-form-item label="次要节点天数" prop="minConversionDay" v-if="/*form.type != 3 && */form.filterMode == 1">
+          <!-- <el-input-number v-model="form.minConversionDay" :min="1" :max="100"></el-input-number> -->
+          <el-input style="width: 220px;" v-model="form.minConversionDay" placeholder="请输入次要节点天数" />
+          <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+            <i class="el-icon-info"></i>
+            第一次提醒客服，去联系客户，在【提醒看板】处显示，哪些需要联系的客户,多个使用英文逗号隔开
+          </div>
+        </el-form-item>
+
+        <el-form-item label="重要节点天数" prop="maxConversionDay" v-if="/*form.type != 3 && */form.filterMode == 1">
+          <el-input style="width: 220px;" v-model="form.maxConversionDay" placeholder="请输入重要节点天数" />
+          <!-- <el-input-number v-model="form.maxConversionDay" :min="1" :max="100"></el-input-number> -->
+          <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+            <i class="el-icon-info"></i>
+            第二次提醒客服，去联系客户，在【提醒看板】处显示，哪些需要联系的客户,多个使用英文逗号隔开
+          </div>
+        </el-form-item>
+
+        <div v-if="form.filterMode == 1">
+
+          <el-form-item label="推送方式 ">
+            <el-radio-group v-model="form.sendType" @input="handleSendTypeChange">
+              <el-radio v-for="dict in sopSendTypeOptions" :key="dict.dictValue"
+                :label="parseInt(dict.dictValue)">{{ dict.dictLabel }}</el-radio>
+            </el-radio-group>
+            <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+              <i class="el-icon-info"></i>
+              群发助手 则是正常的自动化任务，新客对话 是客户进线当天，根据【新客对话模板】的内容，给客户发送相应的消息
+            </div>
+          </el-form-item>
+          <el-form-item label="选择客服" prop="appCustomerId" style="margin-top: 2%">
+            <div>
+              <el-button size="medium" icon="el-icon-circle-plus-outline" plain
+                @click="openSelectCustomerPage(form.type, form.sendType)">请选择客服</el-button>
+            </div>
+            <div>
+              <el-tag style="margin-left: 5px" size="medium" :key="s.id" v-for="s in selected" closable
+                :disable-transitions="false" @close="handleCloseCustomer(s)">
+                <span>{{ s.roleName }}</span>
+              </el-tag>
+            </div>
+          </el-form-item>
+
+          <el-form-item label="标签规则" prop="filterType">
+            <el-radio-group v-model="form.filterType">
+              <el-radio :label="1">含全部标签</el-radio>
+              <el-radio :label="2">含任意标签</el-radio>
+            </el-radio-group>
+            <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+              <i class="el-icon-info"></i>
+              【含全部标签】:客户要完全一对一匹配上选择标签，ps:多一个少一个都不行
+              【含任意标签】:客户只要有一个标签匹配上即可
+            </div>
+          </el-form-item>
+
+          <el-form-item label="选择的标签" prop="tags">
+            <div @click="hangleChangeTags()"
+              style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 390px">
+              <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+                <el-tag type="success" closable :disable-transitions="false"
+                  v-for="list in selectTagDialog.selected" :key="list.id" @close="handleCloseTags(list)"
+                  style="margin: 3px;">{{ list.name }}
+                </el-tag>
+              </div>
+            </div>
+            <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+              <i class="el-icon-info"></i>
+              选择创建的自动化任务的标签
+            </div>
+          </el-form-item>
+        </div>
+
+        <el-form-item label="开始时间" prop="startTime">
+          <el-date-picker clearable size="small" v-model="form.startTime" type="date" value-format="yyyy-MM-dd"
+            placeholder="选择开始时间" @change="clearAutoDatesIfNeeded">
+          </el-date-picker>
+          <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+            <i class="el-icon-info"></i>
+            任务的开始时间,客户进线在开始时间之前就符合此自动化任务的，都会进入到开始时间的营期里
+          </div>
+        </el-form-item>
+
+        <el-form-item label="任务过期时间" prop="expiryTime">
+          <el-row>
+            <el-input-number v-model="form.expiryTime" :min="3" :max="100"></el-input-number>
+            （小时）
+          </el-row>
+          <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+            <i class="el-icon-info"></i>
+            发送自动化任务消息的过期时间,超过这个时间，消息将不再发送(作废)，比如：9点的消息，设置3个小时过期，12点之后还未发送 则这条消息将过期且不再发送
+          </div>
+        </el-form-item>
+
+        <el-form-item v-if="form.sendType == 2 && form.sendType != 4 && form.type != 3 && form.filterMode == 1"
+          label="自动添加自动化" prop="autoSopTime.autoSopType">
+          <el-radio-group v-model="form.autoSopTime.autoSopType">
+            <el-radio :label="Number(dict.dictValue)" v-for="dict in autoSopTypeOptions">{{ dict.dictLabel }}</el-radio>
+          </el-radio-group>
+          <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+            <i class="el-icon-info"></i>
+            这个选项仅作用于【新客户】进线时或【给客户打标签时】，是进入当日的营期 还是 次日的营期或者分营期
+          </div>
+        </el-form-item>
+
+        <div style="display: flex; align-items: center; flex-wrap: nowrap;">
+          <div v-if="form.autoSopTime.autoSopType == 1 && form.filterMode == 1"
+            style="display: flex; align-items: center">
+            <el-form-item label="起始时间" prop="autoStartTime" label-width="100px"
+              style="margin: 2% 0;align-items: center;">
+              <el-time-select style="width: 120px;" placeholder="起始时间" v-model="form.autoSopTime.autoStartTime"
+                :picker-options="{
+                  start: '00:00',
+                  step: '00:15',
+                  end: '24:00'
+                }">
+              </el-time-select>
+            </el-form-item>
+            <el-form-item label="结束时间" prop="autoEndTime" label-width="100px"
+              style="margin: 2% 0; align-items: center; ">
+              <el-time-select style="width: 120px;" placeholder="结束时间" v-model="form.autoSopTime.autoEndTime"
+                :picker-options="{
+                  start: '00:00',
+                  step: '00:15',
+                  end: '24:00',
+                  minTime: form.autoSopTime.autoEndTime
+                }">
+              </el-time-select>
+            </el-form-item>
+          </div>
+        </div>
+        
+        <el-form-item v-if="form.autoSopTime.autoSopType == 1" label="过期消息是否发送" prop="autoSopSend" label-width="130px">
+          <el-radio-group v-model="form.autoSopTime.autoSopSend">
+            <el-radio :label="1">是</el-radio>
+            <el-radio :label="2">否</el-radio>
+          </el-radio-group>
+          <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+            <i class="el-icon-info"></i>
+            起始时间-结束时间之内的进线客户，进入【当日营期】，时间之外的，进入【次日营期】
+          </div>
+        </el-form-item>
+
+        <div style="display: flex; align-items: center; flex-wrap: nowrap;"
+          v-if="form.autoSopTime.autoSopType == 3 || form.autoSopTime.autoSopType == 4">
+          <el-form-item label="选择一个或多个日期" prop="autoDateTime" label-width="150px">
+            <el-date-picker size="large" type="dates" style="width: 600px" v-model="form.autoSopTime.autoDateTime"
+              value-format="yyyy-MM-dd" placeholder="选择一个或多个日期【ps:请先选择开始时间，不得小于任务开始时间】"
+              @change="sortSelectedDates(form.autoSopTime.autoDateTime)" :disabled="!form.startTime">
+            </el-date-picker>
+          </el-form-item>
+        </div>
+
+        <el-form-item label="模板" prop="tempId">
+          <div @click="selectListSopTemp(form.sendType)"
+            style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;">
+            <el-tag v-if="form.tempId" type="success" style="margin: 3px;">
+              {{ form.tempName }}
+            </el-tag>
+            <span v-else style="margin: 3px; color: #999;">请点我选择模板</span>
+          </div>
+          <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+            <i class="el-icon-info"></i>
+            在左边的菜单【任务模板】板块设置好每天要发送的内容
+          </div>
+        </el-form-item>
+        <el-alert v-if="form.autoSopTime.autoSopType == 3" type="warning" :closable="false" show-icon>
+          <template #title>
+            <span style="font-size: 23px; line-height: 1.5;">
+              此功能用于正课区分营期，可以选择你想要开始营期的具体时间，选择后在此期间添加的用户将会自动进入对应营期。
+              例如今天1月1日，选择时间是1月1日，1月5日，1月10日。
+              用户1月1日-1月4日添加（添加上对应标签）则会进入1月5日的营期，1月5日-1月9日添加则会进入1月10日营期，1月5日自动给用户发送第一节科普
+            </span>
+          </template>
+        </el-alert>
+        <el-alert v-if="form.autoSopTime.autoSopType == 4" title="" type="warning" :closable="false" show-icon>
+          <template #title>
+            <span style="font-size: 23px; line-height: 1.5;">
+              此功能用于先导课区分营期，可以选择先导课开始营期的具体时间，选择后在此期间添加的用户将会自动进入对应营期。
+              例如今天1月1日，选择时间是1月1日，1月5日，1月10日。
+              用户1月1日-1月4日添加（添加上对应标签）则会进入1月1日的营期，1月5日-1月9日添加则会进入1月5日营期，自动给用户匹配上对应应该听到天数的时间节点
+            </span>
+          </template>
+        </el-alert>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;">
+        <el-button type="primary" v-if="opType != 2" @click="submitForm">确 定</el-button>
+        <el-button v-if="opType != 2" @click="cancel">取 消</el-button>
+      </div>
+
+      <!-- 选择app客服角色 -->
+      <el-dialog :title="customerConfig.title" :visible.sync="customerConfig.visible" width="1300px" append-to-body>
+        <CusRoleList
+          ref="QwUserList"
+          :selected="selected"
+          @confirm="customerSelectedConfirmCallForBind"
+          @selectionChange="customerSelectionChangeCallForBind"
+        />
+      </el-dialog>
+
+      <!-- 选择模板 -->
+      <el-dialog title="选择模板" :visible.sync="tempOpen" append-to-body>
+        <sop-temp ref="SopTempComments" @sopTemp="sopTemp"></sop-temp>
+      </el-dialog>
+
+      <!-- 标签 -->
+      <el-dialog title="选择标签"
+        :visible.sync="selectTagDialog.visible"
+        width="1000px"
+        append-to-body
+      >
+        <select-tag
+          :tagSelected="selectTagDialog.selected"
+          @tagSubmit="tagSubmitForBind"
+          @tagCancel="tagCancelForBind"
+          @tagSelection="tagSelectionChangeCallForBind"
+        />
+      </el-dialog>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import {addSop, courseList, updateSop, getSop} from "@/api/app/sop/info";
+import {getList} from "@/api/app/cpsc";
+import {getSopTemp} from '@/api/app/sop/template';
+import CusRoleList from '@/views/app/user/CusRoleList.vue';
+import {listRole} from '@/api/app/user/userList';
+import ImageUpload from "@/views/app/sop/info/ImageUpload";
+import selectTag from "@/views/app/tagGroup/selectTag.vue";
+import { getTagByIds,  listTagGroupForUserBindTag as searchTags, } from "@/api/app/tag/tagGroup";
+import SopTemp from "@/views/app/sop/template/sopTemp.vue";
+
+export default {
+  name: "addSop",
+  components: { SopTemp, CusRoleList, ImageUpload, selectTag },
+  data() {
+    return {
+      miniAppList: [],
+      changeDate: '2025-08-20',
+      changeRange: null,
+      changeBusy: [
+        { startMs: new Date('2025-08-20 12:00').getTime(), endMs: new Date('2025-08-20 13:30').getTime() }
+      ],
+      autoSopTypeOptions: [],
+      //模板遮罩
+      tempOpen: false,
+      // 选中数组
+      ids: [],
+      courseList: [],
+      tags: null,
+      setting: [],
+      //标签
+      changeTagDialog: {
+        title: "",
+        open: false,
+        type: null,
+      },
+      //选择的标签
+      tagsIdsChangeSelectList: null,
+      queryTagParams: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+        name: null,
+      },
+      // 总条数
+      total: 0,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 状态字典
+      statusOptions: [],
+      //SOP发送类型
+      sopSendTypeOptions: [],
+      // 表单参数
+      form: {
+        status: 1,
+        filterMode: 1,
+        sendType: 2,
+        type: 2,
+        filterType: 2,
+        expiryTime: 3,
+        autoGroup: 0,
+        isAutoSop: 1,
+        tempId: null,
+        tempName: null,
+        autoSopTime: { autoSopType: 2, autoStartTime: '00:00', autoEndTime: '24:00', autoSopSend: 2, autoDateTime: [] },
+      },
+      selected: [],
+      //选择客服对话框
+      customerConfig: {
+        title: "",
+        visible: false
+      },
+      // 表单校验
+      rules: {
+        name: [{ required: true, message: "名称不能为空", trigger: "submit" }],
+        type: [{ required: true, message: "不能为空", trigger: "submit" }],
+        sendType: [{ required: true, message: "不能为空", trigger: "submit" }],
+        startTime: [{ required: true, message: "开始时间不能为空", trigger: "submit" }],
+        tempId: [{ required: true, message: "模板不能为空", trigger: "submit" }],
+        tags: [
+          {
+            validator: this.validateGroupLevelOrTags,
+            trigger: ["blur", "change"]
+          }
+        ],
+      },
+      opType: 0,//操作类型，0-新增(默认),1-编辑，2-查看
+      formId: null,
+      selectTagDialog: {
+        visible: false,
+        selected: [],
+      },
+    };
+  },
+  created() {
+    this.getDicts("app_sop_status").then(response => {
+      this.statusOptions = response.data;
+    });
+    this.getDicts("app_sop_type").then(response => {
+      this.sopSendTypeOptions = response.data;
+    });
+    this.getDicts("app_sop_autoType").then(response => {
+      this.autoSopTypeOptions = response.data;
+    });
+
+    //操作类型
+    let opType = this.$route.params && this.$route.params.type;
+    if (opType) {
+      this.opType = opType;
+    }
+
+    //编辑/查看时有效
+    let id = this.$route.params && this.$route.params.id;
+    if (id) {
+      this.formId = id;
+      this.handleUpdate(id);
+    }
+
+    courseList().then(response => {
+      this.courseList = response.list;
+    });
+
+    getList().then(response => {
+    });
+  },
+  watch: {
+    selected(newList) {
+      this.form.appCustomerId = newList.map(item => item.id);
+    }
+  },
+  methods: {
+
+    validateGroupLevelOrTags(rule, value, callback) {
+      // 检查是否是群聊筛选方式且自动创建群为1
+      if (this.form.filterMode == 2 && this.form.autoGroup == 1) {
+        // 检查评级数组和标签数组是否都为空
+        const hasLevel = this.form.autoGroupLevelArray && this.form.autoGroupLevelArray.length > 0;
+        const hasTags = this.tagsIdsChangeSelectList && this.tagsIdsChangeSelectList.length > 0;
+
+        if (!hasLevel && !hasTags) {
+          callback(new Error('创建群聊评级和企微标签必须至少选择一项'));
+        } else {
+          callback();
+        }
+      } else {
+        // 如果不满足条件，验证通过
+        callback();
+      }
+    },
+
+    /** 打开子组件的选择器 */
+    openPicker() {
+      this.$refs.timePicker.openPicker();
+    },
+    fmt(ms) {
+      if (!ms) return "-";
+      const d = new Date(ms);
+      return d.toLocaleTimeString("zh-CN", { hour12: false });
+    },
+    /**
+     * 取消选择标签
+     */
+    tagCancel() {
+      this.resetSearchQueryTag();
+      this.changeTagDialog.open = false;
+    },
+    /**
+     * 选择标签
+     */
+    hangleChangeTags() {
+      this.selectTagDialog.visible = true;
+    },
+    /**
+     * 绑定标签取消
+     */
+    tagCancelForBind() {
+      this.selectTagDialog.visible = false;
+    },
+    /**
+     * 绑定标签确认
+     */
+    tagSubmitForBind() {
+      this.selectTagDialog.visible = false;
+    },
+    /**
+     * 选中的绑定标签列表
+     * @param group 标签所属组
+     * @param tag 具体操作的标签
+     */
+    tagSelectionChangeCallForBind(group, tag) {
+      if (!tag.isSelected) {
+        this.selectTagDialog.selected = this.selectTagDialog.selected.filter(item => tag.id != item.id);
+      } else {
+        if (!this.selectTagDialog.selected.some(st => st.id == tag.id)) {
+          this.selectTagDialog.selected.push(tag);
+        }
+      }
+    },
+    /**
+     * 删除一些选择的标签
+     * @param list 
+     */
+    handleCloseTags(ruleItem) {
+      const index = this.selectTagDialog.selected.findIndex(t => t === ruleItem);
+        if (index !== -1) {
+          this.selectTagDialog.selected.splice(index, 1);
+        }
+    },
+    /**
+     * 开始时间发生变化
+     */
+    clearAutoDatesIfNeeded() {
+      if (this.form.autoSopTime.autoDateTime.length > 0 && (this.form.autoSopTime.autoSopType == 3 || this.form.autoSopTime.autoSopType == 4)) {
+        // 1. 过滤掉 < startTime 的日期
+        const validDates = this.form.autoSopTime.autoDateTime.filter(date => new Date(date) >= new Date(this.form.startTime));
+        // 2. 如果有被过滤掉的日期，提示用户
+        if (validDates.length < this.form.autoSopTime.autoDateTime.length) {
+          this.$message.warning(`已自动移除小于 ${this.form.startTime} 的日期！`);
+        }
+        // 3. 升序排序
+        validDates.sort((a, b) => new Date(a) - new Date(b));
+        // 4. 更新数据
+        this.form.autoSopTime.autoDateTime = validDates;
+      }
+    },
+    /**
+     * 开始时间，任务开始时间排序
+     * @param dates 
+     */
+    sortSelectedDates(dates) {
+
+      if (!this.form.startTime) {
+        this.$message.error("请先选择开始时间！不得小于任务开始时间");
+        this.form.autoSopTime.autoDateTime = [];
+        return;
+      }
+      // 1. 过滤掉 < startTime 的日期
+      const validDates = dates.filter(date => new Date(date) >= new Date(this.form.startTime));
+      // 2. 如果有被过滤掉的日期，提示用户
+      if (validDates.length < dates.length) {
+        this.$message.warning(`已自动移除小于 ${this.form.startTime} 的日期！`);
+      }
+      // 3. 升序排序
+      validDates.sort((a, b) => new Date(a) - new Date(b));
+      // 4. 更新数据
+      this.form.autoSopTime.autoDateTime = validDates;
+    },
+    /**
+     * 查询模板
+     * @param type 
+     */
+    selectListSopTemp(type) {
+      this.tempOpen = true;
+      setTimeout(() => {
+        this.$refs.SopTempComments.getList(type);
+      }, 200);
+    },
+    sopTemp(val) {
+      this.$set(this.form, 'tempId', val.id);
+      this.$set(this.form, 'tempName', val.name);
+      this.tempOpen = false;
+    },
+    //选择app用户时
+    openSelectCustomerPage(type, sendType) {
+      this.customerConfig.title = "选择客服"
+      this.customerConfig.visible = true;
+    },
+    /**
+     * 切换类别时 ，清除选择的成员
+     */
+    clearUser() {
+      this.selected = [];
+      this.tags = null;
+    },
+    /**
+     * 编辑/查看获取任务信息
+     * @param sopId
+     */
+    handleUpdate(sopId) {
+      this.reset();
+      getSop({id: sopId}).then(async (response) => {
+        this.form = response.data;
+        this.form.autoSopTime = JSON.parse(response.data.autoSopTime)
+        if (this.form.filterMode != 1) {
+          this.form.sendType = 2;
+        }
+        if (!this.isEmpty(this.form.tags)) {
+          let tagInfo = await getTagByIds(this.form.tags);
+          this.selectTagDialog.selected = tagInfo.data || [];
+        }
+        this.form.status = response.data.status.toString();
+        if (this.form.setting != null) {
+          this.setting = JSON.parse(this.form.setting);
+        }
+        if (this.form.autoGroupLevel != null) {
+          this.form.autoGroupLevelArray = this.form.autoGroupLevel.split(",").map(Number)
+            .filter(item => item !== 0);
+        }
+        if (!this.isEmpty(this.form.appCustomerId)) {
+          let userInfo = await listRole({ids: this.form.appCustomerId});
+          this.selected = userInfo.rows;
+        }
+        let tempInfo = await getSopTemp(this.form.tempId);
+        this.$set(this.form, 'tempName', tempInfo.data.name);
+      });
+
+    },
+    isEmpty(obj) {
+        if (null === obj || undefined === obj || 0 === obj.length) {
+            return true;
+        }
+        return false;
+    },
+    customerSelectedConfirmCallForBind() {
+      this.customerConfig.visible = false;
+    },
+    /**
+     * 选中的用户列表
+     * @param list 
+     */
+    customerSelectionChangeCallForBind(config) {
+      let selected = config.selected;
+      //单行操作
+      if (config.mode === 0) {
+        let row = config.row;
+        if (selected) {
+          if (!this.selected.some(s => s.id == row.id)) {
+            this.selected.push(row)
+          }
+        } else {
+          this.selected = this.selected.filter(m => m.id != row.id);
+        }
+      }
+      //操作当前页所有行
+      else {
+        let list = config.rows;
+        if (selected) {
+          list.map(l => {
+            if (!this.selected.some(s => s.id == l.id)) {
+              this.selected.push(l)
+            }
+          });
+        } else {
+          list.map(l => {
+            for (let i = 0; i < this.selected.length; i++) {
+              if (l.id == this.selected[i].id) {
+                this.selected.splice(i, 1);
+              }
+            }
+          })
+        }
+      }
+    },
+
+    //选择变动时的变动
+    
+    /**
+     * 推送方式修改
+     * @param val 
+     */
+    handleSendTypeChange(val) {
+      this.selected = [];
+      this.form.tempId = null;
+      this.form.tempName = null;
+      if (val == 1) {
+        // 遍历 this.setting 数组并清空每个对象的 content 属性
+        this.setting.forEach(item => {
+          if (item.content.length > 9) {
+            item.content = item.content.slice(0, 9); // 保留前 9 个元素
+          }
+        });
+      }
+    },
+    handleCloseCustomer(list) {
+      const index = this.selected.findIndex(t => t === list);
+      if (index !== -1) {
+        this.selected.splice(index, 1);
+      }
+    },
+    /**
+     * 取消按钮
+     */
+    cancel() {
+      //删除当前打开的菜单tab
+      this.$store.dispatch("tagsView/delView", this.$route);
+      //替换浏览器路由
+      this.$router.replace('/app/sop')
+      this.reset();
+    },
+    /**
+     * 清空搜索标签条件
+     */
+    resetSearchQueryTag() {
+      this.queryTagParams = {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+        name: null,
+      };
+    },
+
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        filterMode: 1,
+        name: null,
+        status: 1,
+        sendType: 2,
+        filterType: 2,
+        expiryTime: 3,
+        appCustomerId: null,
+        setting: null,
+        createBy: null,
+        createTime: null,
+        autoSopTime: { autoSopType: 2, autoStartTime: '00:00', autoEndTime: '24:00', autoSopSend: 2, autoDateTime: [] },
+      };
+      this.resetForm("form");
+      this.tags = null;
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    formatDateTo24HourString(date) {
+      let year = date.getFullYear();
+      let month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份需要加 1 并补零
+      let day = ('0' + date.getDate()).slice(-2); // 日需要补零
+      let hours = ('0' + date.getHours()).slice(-2); // 小时需要补零
+      let minutes = ('0' + date.getMinutes()).slice(-2); // 分钟需要补零
+      let seconds = ('0' + date.getSeconds()).slice(-2); // 秒需要补零
+
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    },
+
+    // 打开群聊选择器
+    openGroupChatSelector() {
+      this.$refs.groupChatSelector.show(this.form.chatIds);
+    },
+
+    // 处理群聊选择结果
+    handleSelectGroupChats(selectedChatIds) {
+      this.form.chatIds = selectedChatIds;
+      // 强制更新视图
+      this.$forceUpdate();
+    },
+    /**
+     * 保存sop任务
+     */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.selected.length <= 0) {
+            return this.$message.error("请选择客服")
+          }
+          this.form.appCustomerId = this.selected.map(s => s.id).join(",");
+          if (this.selectTagDialog.selected != null && this.selectTagDialog.selected.length > 0) {
+            this.form.tags = this.selectTagDialog.selected?.map(item => item.id).join(",");
+          } else {
+            return this.$message.error("选择的标签不能为空！！请选择筛选的标签")
+          }
+          if (this.form.autoSopTime.autoSopType == 3 || this.form.autoSopTime.autoSopType == 4) {
+            if (this.form.autoSopTime.autoDateTime == null || this.form.autoSopTime.autoDateTime == "") {
+              return this.$message.error("选择的日期不能为空！！请选择日期")
+            }
+          }
+          this.form.appCustomerId = this.selected.map(s => s.id).join(",");
+          this.form.setting = JSON.stringify(this.setting)
+          this.form.autoSopTime.createTime = this.formatDateTo24HourString(new Date());
+          this.form.autoSopTime = JSON.stringify(this.form.autoSopTime)
+          if (this.form.id != null) {
+            updateSop(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.$store.dispatch("tagsView/delView", this.$route);
+              window.location.replace('/app/sop')
+              this.reset();
+            });
+          } else {
+            addSop(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.$store.dispatch("tagsView/delView", this.$route);
+              window.location.replace('/app/sop')
+              this.reset();
+            });
+          }
+        }
+      });
+    },
+
+  }
+};
+</script>
+<style scoped lang="scss">
+.custom-input /deep/ .el-input__inner {
+  height: 20px;
+  padding: 0 4px;
+  text-align:center;
+  display: block;
+}
+.custom-input /deep/ .el-input__icon {
+  line-height: 20px;
+}
+.user-box {
+  width: 50px;           /* 盒子宽度 */
+  height: 30px;           /* 盒子高度 */
+  padding: 5px 10px;          /* 内边距 */
+  border: 1px solid #d5d1d1;/* 边框 */
+  margin: 3px;            /* 外边距 */
+  background-color: #f9f9f9;/* 背景颜色 */
+  color: #333;            /* 文本颜色 */
+  font-size: 14px;        /* 字体大小 */
+  text-align: center;     /* 文本居中 */
+}
+.elFormItemClass{
+  margin: 20px 0px
+
+}
+
+.message-stayle{
+  display: flex;
+  justify-content: normal;
+  align-items: center;
+  margin-top: 10px;
+}
+.message-stayle .el-link {
+  white-space: normal; /* 允许换行 */
+  word-break: break-all; /* 单词中间断行 */
+  overflow-wrap: break-word; /* 允许在单词内换行 */
+}
+.message-stayle span {
+  word-break: break-all;
+}
+.container {
+  position: relative; /* 使 phone div 的 absolute 定位基于这个容器 */
+  width: 100%;
+  height: 100%;
+}
+.phone {
+  position: absolute; /* 定位到容器内 */
+  top: 5%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 375px;
+  height: 100%;
+  max-height: 90%;
+  border: 8px solid #ccc;
+  border-radius: 36px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  overflow: hidden;
+}
+
+.phone::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 60px;
+  height: 5px;
+  background-color: #ccc;
+  border-radius: 10px;
+  transform: translateX(-50%);
+}
+
+.chat-interface {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: #fff;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  padding: 0 15px;
+  background-color: #fff;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.header .back,
+.header .menu {
+  height: 25px;
+  width: 25px;
+}
+.header .title{
+  font-size: 16px;
+  margin: auto;
+}
+
+.message-area {
+  flex: 1;
+  background-color: rgb(240, 242, 245);
+  padding: 10px;
+  overflow-y: auto;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background-color: #fff;
+  border-top: 1px solid #e0e0e0;
+}
+
+.footer .voice-button,
+.footer .emoji-button,
+.footer .add-button {
+  width: 25px;
+  height: 25px;
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0; /* 不允许缩小 */
+}
+.footer .emoji-button,
+.footer .add-button {
+  margin: 0px 5px;
+}
+
+
+.footer .input-box {
+  flex: 1;
+  border: 1px solid #e0e0e0;
+  margin-left: 5px;
+}
+
+.text-container {
+  max-height: 7.5em; /* 设置最大高度为6行，根据字体大小调整 */
+  overflow-y: auto; /* 内容超出时显示滚动条 */
+  line-height: 1.5em; /* 行高设置，确保每行高度一致 */
+}
+.el-form-item {
+  margin-bottom: 30px;
+}
+
+.custom-span {
+  display: block; /* 确保元素是块级元素 */
+  height: 110px; /* 设置固定高度 */
+  overflow-y: auto; /* 超出高度时显示滚动条 */
+  word-wrap: break-word; /* 自动换行 */
+  word-break: break-all; /* 在必要时进行换行 */
+}
+.custom-span-description{
+  display: block; /* 确保元素是块级元素 */
+  height: 110px; /* 设置固定高度 */
+  overflow-y: auto; /* 超出高度时显示滚动条 */
+  word-wrap: break-word; /* 自动换行 */
+  word-break: break-all; /* 在必要时进行换行 */
+}
+.custom-span-title {
+  display: block; /* 确保元素是块级元素 */
+  height: 45px; /* 设置固定高度 */
+  overflow-y: auto; /* 超出高度时显示滚动条 */
+  word-wrap: break-word; /* 自动换行 */
+  word-break: break-all; /* 在必要时进行换行 */
+}
+
+/* CSS 样式 */
+.tag-container {
+  display: flex;
+  flex-wrap: wrap; /* 超出宽度时自动换行 */
+  gap: 8px; /* 设置标签之间的间距 */
+}
+.name-background {
+  display: inline-block;
+  background-color: #abece6; /* 背景颜色 */
+  padding: 4px 8px; /* 调整内边距，让背景包裹文字 */
+  border-radius: 4px; /* 可选：设置圆角 */
+}
+.tag-box {
+  padding: 8px 12px;
+  border: 1px solid #989797;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.tag-selected {
+  background-color: #00bc98;
+  color: #fff;
+  border-color: #00bc98;
+}
+
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+.button-new-tag {
+  margin-left: 10px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.input-new-tag {
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+.text-container {
+  max-height: 5em; /* 设置最大高度为6行，根据字体大小调整 */
+  overflow-y: auto; /* 内容超出时显示滚动条 */
+  line-height: 1.5em; /* 行高设置，确保每行高度一致 */
+}
+</style>

src/views/app/sop/info/index.vue

@@ -0,0 +1,1603 @@
+<template>
+   <div class="app-container">
+        <!-- 过滤条件 -->
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+
+            <el-form-item label="规则编号" prop="id">
+                <el-input v-model="queryParams.id" placeholder="请输入规则名称" clearable size="small"
+                    @keyup.enter.native="handleQuery" />
+            </el-form-item>
+
+            <el-form-item label="规则状态 " prop="status">
+                <el-select v-model="queryParams.status" placeholder="请选择规则状态" clearable size="small"
+                    @change="updateCorpId()">
+                    <el-option v-for="dict in sysSopStatus" :key="dict.dictValue" :label="dict.dictLabel"
+                        :value="dict.dictValue" />
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="发送方式 " prop="sendType">
+                <el-select v-model="queryParams.sendType" placeholder="请选择发送方式状态" clearable size="small"
+                    @change="updateCorpId()">
+                    <el-option v-for="dict in appSopType" :key="dict.dictValue" :label="dict.dictLabel"
+                        :value="dict.dictValue" />
+                </el-select>
+            </el-form-item>
+
+            <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="createTime">
+                <el-date-picker clearable size="small" v-model="queryParams.createTime" type="date"
+                    value-format="yyyy-MM-dd" placeholder="选择创建时间">
+                </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="标签" prop="tagIds">
+                <div @click="hangleChangeTags()"
+                    style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 250px">
+                    <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+                        <el-tag type="success" closable :disable-transitions="false" v-for="list in this.selectTags"
+                            :key="list.id" @close="handleCloseTags(list)" style="margin: 3px;">{{ list.name }}
+                        </el-tag>
+                    </div>
+                </div>
+            </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-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button
+                    type="primary"
+                    plain
+                    icon="el-icon-plus"
+                    size="mini"
+                    @click="handleAdd"
+                    v-hasPermi="['app:sop:add']"
+                >
+                    新增
+                </el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button
+                    type="danger"
+                    plain
+                    icon="el-icon-delete"
+                    size="mini"
+                    :disabled="multiple"
+                    @click="handleDelete"
+                    v-hasPermi="['app:sop:delete']"
+                >
+                    删除
+                </el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button
+                    type="success"
+                    plain
+                    icon="el-icon-download"
+                    size="mini"
+                    :loading="exportLoading"
+                    @click="handleExport"
+                    v-hasPermi="['app:sop:export']"
+                >
+                    导出
+                </el-button>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button
+                    size="mini"
+                    plain
+                    type="warning"
+                    icon="el-icon-edit"
+                    :disabled="multiple"
+                    @click="handleExecute"
+                    v-hasPermi="['app:sop:exec']"
+                >
+                    批量执行自动化
+                </el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <!-- 数据表格 -->
+        <el-table v-loading="loading" border :data="sopList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="规则编号" align="center" prop="id" min-width="160" />
+            <el-table-column label="规则名称" align="center" prop="name" min-width="150" />
+            <el-table-column label="规则状态" align="center" prop="status" min-width="150">
+                <template slot-scope="scope">
+                    <dict-tag :options="sysSopStatus" :value="scope.row.status"></dict-tag>
+                </template>
+            </el-table-column>
+            <el-table-column label="发送方式" align="center" prop="sendType">
+                <template slot-scope="scope">
+                    <dict-tag :options="appSopType" :value="scope.row.sendType" />
+                </template>
+            </el-table-column>
+
+            <el-table-column label="模板" align="center" prop="tempId">
+                <template slot-scope="scope">
+                    <div v-for="id in tempList" v-if="id.id == scope.row.tempId">{{ id.name }}</div>
+                </template>
+            </el-table-column>
+
+            <el-table-column label="新客户自动创建自动化" align="center" prop="isAutoSop" min-width="180">
+                <template slot-scope="scope">
+                    <el-switch v-if="scope.row.sendType == 2 || scope.row.sendType != 4" v-model="scope.row.isAutoSop"
+                        active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="2"
+                        @change="switchAutoSopChange(scope.row, scope.row.isAutoSop)">
+                    </el-switch>
+                    <span v-if="scope.row.sendType != 1 && scope.row.sendType != 4 && scope.row.isAutoSop == '1'"
+                        style="margin-left: 10px;color: #13ce66">已开启</span>
+                    <span v-if="scope.row.sendType != 1 && scope.row.sendType != 4 && scope.row.isAutoSop == '2'"
+                        style="margin-left: 10px;color: #ff4949">已关闭</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="过期时间" align="center" prop="expiryTime">
+                <template slot-scope="scope">
+                    {{ scope.row.expiryTime }} 小时
+                </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
+            <el-table-column label="修改规则状态时间" align="center" prop="stopTime" min-width="180" />
+            <el-table-column label="查看操作" align="center" class-name="small-padding fixed-width" min-width="200"
+                fixed="right">
+                <!-- 任务状态为 非待执行 则有以下操作-->
+                <template slot-scope="scope">
+                    <el-button
+                        v-if="[0, 2, 3, 4].includes(Number(scope.row.status)) && scope.row.sendType != 4"
+                        size="mini" type="text" @click="selectSchedule(scope.row)">营期
+                    </el-button>
+                    <el-button
+                        v-if="[0, 2, 3, 4].includes(Number(scope.row.status)) || scope.row.sendType == 4"
+                        size="mini" type="text" style="color: green;" @click="handleScheduleDetail(scope.row)">执行详情
+                    </el-button>
+                    <el-button
+                        v-if="[0, 2, 3, 4].includes(Number(scope.row.status))"
+                        size="mini" type="text" @click="handleUpdate(scope.row, 2)">查看规则
+                    </el-button>
+                    <el-button
+                        v-if="[0, 2, 3, 4].includes(Number(scope.row.status))"
+                        size="mini" type="text" style="color: green;" @click="handleQueryDetails(scope.row)">查看模板
+                    </el-button>
+
+                </template>
+            </el-table-column>
+            <el-table-column label="修改操作" align="center" class-name="small-padding fixed-width" min-width="100"
+                fixed="right">
+                <template slot-scope="scope">
+                    <el-button
+                        v-if="scope.row.sendType != 4"
+                        size="mini"
+                        type="text"
+                        @click="handleUpdateOutTime(scope.row)"
+                        v-hasPermi="['app:sop:edit']"
+                    >
+                        修改规则
+                    </el-button>
+                    <el-button
+                        v-if="scope.row.status == 1"
+                        size="mini"
+                        type="text"
+                        @click="handleUpdate(scope.row, 1)"
+                        v-hasPermi="['app:sop:edit']"
+                    >
+                        修改任务
+                    </el-button>
+                    <el-button
+                        size="mini"
+                        type="text"
+                        style="color: red;"
+                        @click="handleDelete(scope.row)"
+                        v-hasPermi="['app:sop:delete']"
+                    >删除
+                    </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" />
+
+        <!-- 添加或修改sop对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+                <el-form-item label="规则名称" prop="name">
+                    <el-input v-model="form.name" placeholder="请输入规则名称" />
+                </el-form-item>
+                <el-form-item label="状态">
+                    <el-radio-group v-model="form.status">
+                        <el-radio v-for="dict in statusOptions" :key="dict.dictValue"
+                            :label="parseInt(dict.dictValue)">{{ dict.dictLabel }}
+                        </el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <el-form-item label="开始时间" prop="startTime">
+                    <el-date-picker clearable size="small" v-model="form.startTime" type="date"
+                        value-format="yyyy-MM-dd" placeholder="选择开始时间">
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item label="模板" prop="tempId">
+                    <el-select v-model="form.tempId" @focus="selectListSopTemp(form.sendType)" placeholder="请选择模板"
+                        v-loading="tempListLoading">
+                        <el-option v-for="dict in tempList" :label="dict.name" :value="dict.id">
+                        </el-option>
+                        <div v-if="tempListLoading" slot="prefix" class="select-prefix">正在查询相应模板...</div>
+                    </el-select>
+                </el-form-item>
+            </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>
+
+        <el-dialog :title="changeTagDialog.title" :visible.sync="changeTagDialog.open" width="1000px" append-to-body>
+            <div>搜索标签：
+                <el-input v-model="queryTagParams.name" placeholder="请输入标签名称" clearable size="small"
+                    style="width: 200px;margin-right: 10px" />
+                <el-button type="primary" icon="el-icon-search" size="mini"
+                    @click="handleSearchTags(queryTagParams.name)">
+                    搜索
+                </el-button>
+                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="cancelSearchTags">重置</el-button>
+            </div>
+            <div v-for="item in tagGroupList" :key="item.id">
+                <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
+                    <span class="name-background">{{ item.name }}</span>
+                </div>
+                <div class="tag-container">
+                    <a v-for="tagItem in item.tags" class="tag-box" @click="tagSelection(tagItem)"
+                        :class="{ 'tag-selected': tagItem.isSelected || (selectTags && selectTags.some(tg => tg.id == tagItem.id)) }">
+                        {{ tagItem.name }}
+                    </a>
+                </div>
+            </div>
+            <pagination v-show="tagTotal > 0" :total="tagTotal" :page.sync="queryTagParams.pageNum"
+                :limit.sync="queryTagParams.pageSize" @pagination="getPageListTagGroup" />
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="tagSubmitForm()">确 定</el-button>
+                <el-button @click="tagCancel()">取消</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 单独的修改时间 -->
+        <el-dialog :title="outTimeOpen.title" :visible.sync="outTimeOpen.open" width="800px">
+
+            <el-card class="box-card">
+                <el-row>
+
+                    <el-col style="margin-top: 3%; display: flex;">
+                        <span style="font-size: 16px;font-weight: bold; width: 120px; display: flex; align-items: center; justify-content: end;">过期时间：</span>
+                        <el-input-number v-model="outTimeOpen.expiryTime" :min="1" :max="100"/>
+                        <span style="font-size: 16px;font-weight: bold; display: flex; align-items: center; justify-content: end;">（小时）</span>
+                    </el-col>
+
+                    <el-col style="margin-top: 3%; display: flex;">
+                        <span style="font-size: 16px;font-weight: bold; width: 120px; display: flex; align-items: center; justify-content: end;">次要节点天数：</span>
+                        <el-input v-model="outTimeOpen.minConversionDay" style="width: 200px;"/>
+                        <span style="font-size: 16px;font-weight: bold; display: flex; align-items: center; justify-content: end;">（天）</span>
+                    </el-col>
+
+                    <el-col style="margin-top: 3%; display: flex;">
+                        <span style="font-size: 16px;font-weight: bold; width: 120px; display: flex; align-items: center; justify-content: end;">重要节点天数：</span>
+                        <el-input v-model="outTimeOpen.maxConversionDay" style="width: 200px;"/>
+                        <span style="font-size: 16px;font-weight: bold; display: flex; align-items: center; justify-content: end;">（天）</span>
+                    </el-col>
+
+                    <el-col style="margin-top: 3%;">
+                        <span style="font-size: 16px;font-weight: bold;">发课开始天数：</span>
+                        <el-input-number v-model="outTimeOpen.courseDay" :min="1" :max="100"></el-input-number>
+                        （天）
+                        <div style="color: #999;font-size: 14px;display: flex;align-items: center;margin-top: 2%">
+                            <i class="el-icon-info"></i>
+                            作用于【提醒看板】和【学习记录】的统计，由多少天开始计算。比如 模板里
+                            第一天是先导课，第二天是正课，此处设置天数为2，则统计从第二天开始。如果无视模板天数，此处设置几天，则统计面板就从第几天开始统计
+                        </div>
+                    </el-col>
+
+                    <el-col style="margin: 3% ">
+
+                        <div style="float: right;margin-right: 3%">
+                            <el-button type="primary" icon="el-icon-search" size="mini"
+                                @click="handleUpdateExpiryTime">确定修改
+                            </el-button>
+                            <el-button icon="el-icon-refresh" size="mini" @click="resetUpdateExpiryTime">取消</el-button>
+                        </div>
+                    </el-col>
+
+                </el-row>
+            </el-card>
+        </el-dialog>
+
+        <!--  -->
+        <el-dialog :title="autoSopOpen.title" :visible.sync="autoSopOpen.open" width="1300px" append-to-body>
+            <el-form ref="autoSopTimeFrom" :model="form.autoSopTime" :rules="autoSopTimeRules">
+                <el-form-item label="自动类型" prop="type" style="margin: 2%; display: flex; align-items: center;">
+                    <el-radio-group v-model="form.autoSopTime.autoSopType">
+                        <el-radio :label="Number(dict.dictValue)" v-for="dict in autoSopTypeOptions">{{ dict.dictLabel }}</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <div style="display: flex; align-items: center; flex-wrap: nowrap;">
+                    <div v-if="form.autoSopTime.autoSopType == 1" style="display: flex; align-items: center">
+                        <el-form-item label="起始时间" prop="autoStartTime" label-width="100px"
+                            style="margin: 2% 0;align-items: center;">
+                            <el-time-select style="width: 120px;" placeholder="起始时间"
+                                v-model="form.autoSopTime.autoStartTime" :picker-options="{
+                                    start: '00:00',
+                                    step: '00:15',
+                                    end: '24:00'
+                                }">
+                            </el-time-select>
+                        </el-form-item>
+                        <el-form-item label="结束时间" prop="autoEndTime" label-width="100px"
+                            style="margin: 2% 0; align-items: center; ">
+                            <el-time-select style="width: 120px;" placeholder="结束时间"
+                                v-model="form.autoSopTime.autoEndTime" :picker-options="{
+                                    start: '00:00',
+                                    step: '00:15',
+                                    end: '24:00',
+                                    minTime: form.autoSopTime.autoEndTime
+                                }">
+                            </el-time-select>
+                        </el-form-item>
+                    </div>
+                </div>
+                <el-form-item v-if="form.autoSopTime.autoSopType == 1" label="过期消息是否发送" prop="autoSopSend"
+                    style="margin: 2%; display: flex; align-items: center;">
+                    <el-radio-group v-model="form.autoSopTime.autoSopSend">
+                        <el-radio :label="1">是
+                        </el-radio>
+                        <el-radio :label="2">否
+                        </el-radio>
+                    </el-radio-group>
+                </el-form-item>
+
+                <div style="display: flex; align-items: center; flex-wrap: nowrap;"
+                    v-if="form.autoSopTime.autoSopType == 3 || form.autoSopTime.autoSopType == 4">
+                    <el-form-item label="选择一个或多个日期" prop="autoDateTime" label-width="150px">
+                        <el-date-picker size="large" type="dates" style="width: 600px"
+                            v-model="form.autoSopTime.autoDateTime" value-format="yyyy-MM-dd"
+                            placeholder="选择一个或多个日期【ps:请先选择开始时间，不得小于任务开始时间】"
+                            @change="sortSelectedDates(form.autoSopTime.autoDateTime)" :disabled="!form.startTime">
+                        </el-date-picker>
+                    </el-form-item>
+                </div>
+
+
+                <el-alert v-if="form.autoSopTime.autoSopType == 1" title="起始时间-结束时间之内的，当天立即创建自动化，时间之外的 次日创建自动化"
+                    type="warning" style="font-size: 30px; margin-top: 3%;" :closable="false" show-icon>
+                </el-alert>
+                <el-alert v-if="form.autoSopTime.autoSopType == 3" type="warning" style="margin-top: 3%;"
+                    :closable="false" show-icon>
+                    <template #title>
+                        <span style="font-size: 23px; line-height: 1.5;">
+                            此功能用于正课区分营期，可以选择你想要开始营期的具体时间，选择后在此期间添加的用户将会自动进入对应营期。
+                            例如今天1月1日，选择时间是1月1日，1月5日，1月10日。
+                            用户1月1日-1月4日添加（添加上对应标签）则会进入1月5日的营期，1月5日-1月9日添加则会进入1月10日营期，1月5日自动给用户发送第一节科普
+                        </span>
+                    </template>
+                </el-alert>
+                <el-alert v-if="form.autoSopTime.autoSopType == 4" title="" type="warning"
+                    style="font-size: 30px; margin-top: 3%;" :closable="false" show-icon>
+                    <template #title>
+                        <span style="font-size: 23px; line-height: 1.5;">
+                            此功能用于先导课区分营期，可以选择先导课开始营期的具体时间，选择后在此期间添加的用户将会自动进入对应营期。
+                            例如今天1月1日，选择时间是1月1日，1月5日，1月10日。
+                            用户1月1日-1月4日添加（添加上对应标签）则会进入1月1日的营期，1月5日-1月9日添加则会进入1月5日营期，自动给用户匹配上对应应该听到天数的时间节点
+                        </span>
+                    </template>
+                </el-alert>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitAutoSopTimeFrom">确 定</el-button>
+                <el-button @click="cancelAutoSopTime">取 消</el-button>
+            </div>
+        </el-dialog>
+
+        <!--  执行详情  -->
+        <el-drawer :title="sopLogsDialog.title" :visible.sync="sopLogsDialog.open" size="85%"
+            style="font-weight: bolder">
+            <sopLogsDetails ref="sopLogsDetails" :rowDetailFrom="sopLogsDialog.sopLogsForm"></sopLogsDetails>
+        </el-drawer>
+    </div>
+</template>
+
+<script>
+import {
+  addSop,
+  courseList,
+  videoList,
+  delSop,
+  exportSop,
+  getSopVoiceList,
+  listSop,
+  updateAutoSopTime,
+  getTempUserList,
+  updateTemp,
+  updateSop,
+  updateSopStatus,
+  updateStatus
+} from "@/api/app/sop/info";
+import {listSopTemp} from "@/api/app/sop/template";
+import ImageUpload from "@/views/app/sop/info/ImageUpload";
+import sopLogsDetails from '@/views/app/sop/userLogs/sopLogsList.vue'
+import { listTagGroupForUserBindTag, } from "@/api/app/tag/tagGroup";
+
+export default {
+    name: "Sop",
+    components: { ImageUpload, sopLogsDetails },
+    data() {
+        return {
+            miniAppList: [],
+            // 添加以下字段
+            selectTags: [], // 已选择的标签
+            tagGroupList: [], // 标签组列表
+            tagTotal: 0, // 标签总数
+            autoSopTypeOptions: [],
+            // 标签弹窗相关
+            changeTagDialog: {
+                title: "",
+                open: false,
+            },
+            queryTagParams: {
+                pageNum: 1,
+                pageSize: 10,
+                total: 0,
+                name: null,
+                corpId: null,
+            },
+            luckyBagList: [],
+            luckyBag: null,
+            liveList: [],
+            // 存储每一行的展开状态
+            expandedRows: {},
+            //模板查询
+            tempListLoading: false,
+            // 遮罩层
+            loading: false,
+            // 导出遮罩层
+            exportLoading: false,
+            // 选中数组
+            ids: [],
+            //选中的map
+            selectionMap: {},
+            myQwCompanyList: [],
+            tempUser: {
+                open: false,
+                id: null,
+                updateOpen: false,
+                loading: true,
+                list: [],
+                form: {
+                    id: null,
+                    liveTempId: null,
+                    liveTempSendTime: null,
+                },
+            },
+            //客服员工列表
+            companyUserLists: [],
+            videoList: [],
+            uploadUrl: process.env.VUE_APP_BASE_API + "/app/common/uploadOSS",
+            uploadUrlByVoice: process.env.VUE_APP_BASE_API + "/app/common/uploadOSSByHOOKVoice",
+            msgForm: {
+                videoId: null,
+                courseId: null,
+                courseType: null,
+                userIdParam: null,
+                sendType: 1,
+                setting: null,
+                ids: null,
+                sopId: null,
+                startTime: null,
+                chatIds: [],
+                isRegister: 2
+            },
+            msgRules: {},
+            courseList: [],
+            // videoList:[],
+            tags: null,
+            excludeTags: null,
+            // 非单个禁用
+            single: true,
+            setting: [],
+            tagList: [],
+            tempList: [],
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            // 企微sop表格数据
+            sopList: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            companyUserList: [],
+            // 状态字典
+            statusOptions: [],
+            //sop状态
+            sysSopStatus: [],
+
+            autoSopOpen: {
+                title: '',
+                open: false,
+                id: null,
+                isAutoSop: null,
+            },
+            outTimeOpen: {
+                title: '',
+                open: false,
+                id: null,
+                tempId: null,
+                expiryTime: null,
+                minConversionDay: null,
+                maxConversionDay: null,
+                isLiveMgs: 0,
+                liveTempId: null,
+                liveTempSendTime: null,
+                appId: null
+            },
+            voiceForm: {
+                list: [],
+                open: false,
+                total: 0,
+                queryParams: {
+                    pageNum: 1,
+                    pageSize: 10,
+                    id: null,
+                },
+            },
+
+            //SOP发送类型
+            appSopType: [],
+            chatList: [],
+
+            //SOP科普观看状态
+            sysFsSopWatchStatus: [],
+            //插件版
+            sysQwSopAiContentType: [],
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                id: null,
+                name: null,
+                status: null,
+                sendType: null,
+                createTime: null,
+                tagIds: null,
+            },
+            sopLogsDialog: {
+                title: '',
+                open: false,
+                sopLogsForm: [],
+            },
+            // 表单参数
+            form: {
+                autoSopTime: { autoSopType: 2, autoStartTime: '00:00', autoEndTime: '24:00', autoSopSend: 2, autoDateTime: [] },
+            },
+            courseLiveTempOption: [],
+            userSelectList: [],
+            listUser: {
+                title: "",
+                open: false
+            },
+            // 表单校验
+            rules: {
+                name: [{ required: true, message: "名称不能为空", trigger: "submit" }],
+                type: [{ required: true, message: "不能为空", trigger: "submit" }],
+                sendType: [{ required: true, message: "不能为空", trigger: "submit" }],
+                startTime: [{ required: true, message: "开始时间不能为空", trigger: "submit" }],
+                tempId: [{ required: true, message: "模板不能为空", trigger: "submit" }],
+            },
+            autoSopTimeRules: {
+                autoSopType: [{ required: true, message: "选项不能为空", trigger: "submit" }],
+                autoStartTime: [{ required: true, message: "起始时间不能为空", trigger: "submit" }],
+                autoEndTime: [{ required: true, message: "结束时间不能为空", trigger: "submit" }],
+                autoDateTime: [{ required: true, message: "日期不能为空", trigger: "submit" }],
+            }
+        };
+    },
+    created() {
+        this.init();
+    },
+    watch: {
+        userSelectList(newList) {
+            this.form.qwUserIds = newList.map(item => item.id);
+        }
+    },
+    methods: {
+        /**
+         * 初始化加载
+         */
+        async init() {
+            this.getDicts("app_sop_status").then(response => {
+                this.sysSopStatus = response.data;
+            });
+            this.getDicts("app_sop_plugin_settingType").then(response => {
+                this.sysQwSopAiContentType = response.data;
+            });
+            this.getDicts("app_sop_watch_status").then(response => {
+                this.sysFsSopWatchStatus = response.data;
+            });
+            this.getDicts("app_normal_disabled_status").then(response => {
+                this.statusOptions = response.data;
+            });
+            this.getDicts("app_sop_autoType").then(response => {
+                this.autoSopTypeOptions = response.data;
+            });
+            this.getDicts("app_sop_type").then(response => {
+                this.appSopType = response.data;
+            });
+            let cl = this.getCourseList(null);
+            this.courseList = cl.list;
+            this.getList();
+        },
+        /**
+         * 获取科普列表
+         * @param keyword 
+         */
+        async getCourseList(keyword) {
+            let query = {
+                keyword: keyword,
+                pageNum: 1,
+                pageSize: 50,
+            };
+            return await courseList(query);
+        },
+        // 搜索的标签
+        hangleChangeTags() {
+            this.changeTagDialog.title = "搜索的标签"
+            this.changeTagDialog.open = true;
+            this.queryTagParams.name = null;
+            this.getPageListTagGroup();
+        },
+
+        // 删除一些选择的标签
+        handleCloseTags(list) {
+            const ls = this.selectTags.findIndex(t => t.id === list.id);
+            if (ls !== -1) {
+                this.selectTags.splice(ls, 1);
+                this.selectTags = [...this.selectTags];
+            }
+
+            if (this.selectTags != null && this.selectTags.length > 0) {
+                // 确保 this.form.tags 是数组
+                if (!this.queryParams.tagIds) {
+                    this.queryParams.tagIds = []; // 如果未定义，初始化
+                } else {
+                    this.queryParams.tagIds = []; // 清空已有数据
+                }
+
+                // 遍历并添加 tagId
+                this.selectTags.forEach(tag => {
+                    if (tag.id) { // 确保 tagId 存在
+                        this.queryParams.tagIds.push(tag.id);
+                    }
+                });
+                this.queryParams.tagIds = this.queryParams.tagIds.join(",");
+            } else {
+                this.queryParams.tagIds = null;
+            }
+        },
+
+        // 选择/取消选择标签
+        tagSelection(row) {
+            row.isSelected = !row.isSelected;
+            this.$forceUpdate();
+        },
+
+        // 确定选择标签
+        tagSubmitForm() {
+            for (let i = 0; i < this.tagGroupList.length; i++) {
+                for (let x = 0; x < this.tagGroupList[i].tags.length; x++) {
+                    if (this.tagGroupList[i].tags[x].isSelected === true) {
+                        if (!this.selectTags) {
+                            this.selectTags = [];
+                        }
+
+                        // 检查当前 tag 是否已经存在于 tagListFormIndex[index] 中
+                        let tagExists = this.selectTags.some(
+                            tag => tag.id === this.tagGroupList[i].tags[x].id
+                        );
+
+                        // 如果 tag 不存在于 tagListFormIndex[index] 中，则新增
+                        if (!tagExists) {
+                            this.selectTags.push(this.tagGroupList[i].tags[x]);
+                        }
+                    }
+                }
+            }
+            if (!this.selectTags || this.selectTags.length === 0) {
+                return this.$message('请选择标签');
+            }
+
+            this.changeTagDialog.open = false;
+        },
+
+        // 取消选择标签
+        tagCancel() {
+            this.changeTagDialog.open = false;
+        },
+
+        // 获取标签组列表
+        getPageListTagGroup() {
+            //   this.queryTagParams.corpId = this.queryParams.corpId
+            let qp = {...this.queryTagParams, groupName: this.queryTagParams.name}
+            listTagGroupForUserBindTag(qp).then(response => {
+                let rows = response.rows;
+                this.tagGroupList = rows;
+                this.tagTotal = response.total;
+            });
+        },
+
+        // 搜索标签
+        handleSearchTags(name) {
+            this.getPageListTagGroup();
+        },
+
+        // 重置标签搜索
+        cancelSearchTags() {
+            this.resetSearchQueryTag()
+            this.getPageListTagGroup();
+        },
+
+        // 重置标签查询参数
+        resetSearchQueryTag() {
+            this.queryTagParams = {
+                pageNum: 1,
+                pageSize: 10,
+                total: 0,
+                name: null,
+            };
+        },
+
+        // 在组件销毁前保存当前选择
+        beforeDestroy() {
+            // if (this.queryParams.corpId) {
+            //     localStorage.setItem('selectedCorpId', this.queryParams.corpId);
+            // }
+        },
+        getLuckyBagStatus(content) {
+            const selectedLuckyBag = this.luckyBagList.find(item => item.id === content.luckyBagId);
+            if (selectedLuckyBag) {
+                content.luckyBagDataStatus = selectedLuckyBag.dataStatus; // 自动填充标题
+            } else {
+                // 若未找到对应直播间，清空标题和封面（可选）
+                content.luckyBagDataStatus = null;
+            }
+        },
+        checkLiveMiniprogramTitle(item) {
+            this.$forceUpdate();
+        },
+        liveChange(content) {
+            // content.liveId 是选中的直播间 ID（liveId）
+            const selectedLive = this.liveList.find(live => live.liveId === content.liveId);
+            if (selectedLive) {
+                // 从选中的直播间对象中提取标题和封面，赋值给当前内容的对应字段
+                // 假设直播间对象中标题字段为 liveTitle，封面字段为 coverImg（根据实际接口字段调整）
+                content.miniprogramTitle = selectedLive.liveName || ''; // 自动填充标题
+                content.miniprogramPicUrl = selectedLive.liveImgUrl || ''; // 自动填充封面
+            } else {
+                // 若未找到对应直播间，清空标题和封面（可选）
+                content.miniprogramTitle = '';
+                content.miniprogramPicUrl = '';
+            }
+        },
+        voice(id) {
+            this.voiceForm.queryParams.id = id;
+            getSopVoiceList(this.voiceForm.queryParams).then(res => {
+                this.voiceForm.list = res.rows;
+                this.voiceForm.total = res.total;
+                this.voiceForm.open = true;
+            })
+        },
+        // 单元格点击事件
+        handleCellClick(row, column, cell, event) {
+            // 判断是否为规则编号列
+            if (column.property === 'id') {
+                this.handleRowClick(row); // 触发规则编号点击事件
+            }
+        },
+        // handleUpdateTags(){
+        //
+        // },
+        // handleUpdateQwUser(){
+        //
+        // },
+        // handleUpdateSopTemp(){
+        //
+        // },
+        handleRowClick(row, column, event) {
+            // 判断状态是否符合条件
+            if (row.status == 2 || row.status == 0 || row.status == 3 || row.status == 4) {
+                this.handleUpdate(row, 2);
+            }
+        },
+        // 切换某一行的展开状态
+        toggleRow(row) {
+            this.$set(this.expandedRows, row.id, !this.expandedRows[row.id]);
+        },
+        getSwitchVal(status) {
+            return [2, 3, 4].includes(status) ? 2 : 0;
+        },
+
+        onSwitchChange(row, val) {
+            this.loading = true;
+            // ① 调用接口更新后端
+            updateSopStatus({ id: row.id, status: val })
+                .then(() => {
+                    row.status = val;
+                    this.loading = false;
+                    this.$message.success("切换成功！");
+                })
+                .catch(() => {
+                    this.loading = false;
+                    this.$message.error("操作失败，请重试");
+                });
+        },
+
+        switchSopStatusChange(row, checked) {
+
+            let loadingRock = this.$loading({
+                lock: true,
+                text: '暂停中-请勿刷新页面-重复点击',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+
+
+            updateSopStatus({ id: row, status: checked }).then(response => {
+                this.$message.success("修改成功");
+                this.getList();
+            }).finally(res => {
+                loadingRock.close();
+            })
+        },
+        /**
+         * 新客户自动创建sop
+         * @param row 
+         * @param checked 
+         */
+        switchAutoSopChange(row, checked) {
+            this.form.startTime = row.startTime;
+            this.form.autoSopTime = JSON.parse(row.autoSopTime);
+            if (checked == 1) {
+                this.autoSopOpen.title = '请设置相应时间段'
+                this.autoSopOpen.open = true;
+                this.autoSopOpen.id = row.id;
+                this.autoSopOpen.isAutoSop = 1;
+            } else {
+                this.form.autoSopTime.createTime = this.formatDateTo24HourString(new Date());
+                updateAutoSopTime({
+                    id: row.id,
+                    isAutoSop: checked,
+                    autoSopTime: JSON.stringify(this.form.autoSopTime)
+                }).then(response => {
+                    this.getList();
+                })
+            }
+        },
+        updateCorpId() {
+            if (this.queryParams.corpId) {
+                localStorage.setItem('selectedCorpId', this.queryParams.corpId);
+            }
+            this.reset();
+            this.refreshData(this.queryParams.corpId);
+            this.queryParams.qwUserId = null;
+            this.getList();
+        },
+
+        //刷新部分数据
+        refreshData(row) {
+            //   getQwAllUserList(row).then(response => {
+            //     this.companyUserList = response.data;
+            //   });
+
+            //   listTag({corpId: row}).then(response => {
+            //     this.tagList = response.rows;
+            //   });
+
+            if (row != null) {
+                // allList(row).then(e => {
+                //   this.chatList = e.data;
+                // })
+            }
+        },
+
+        //查询模板
+        selectListSopTemp(type) {
+            this.tempListLoading = true; // 开始查询，显示加载提示
+            listSopTemp({ sendType: type }).then(response => {
+                this.tempList = response.rows;
+                this.tempListLoading = false;
+            });
+        },
+        handlelistUser(type, sendType) {
+
+            setTimeout(() => {
+                this.$refs.QwUserList.getDetails(this.queryParams.corpId, type, sendType);
+            }, 1);
+            this.listUser.title = "选择企业成员"
+            this.listUser.open = true;
+
+        },
+        selectUserList(list) {
+            this.listUser.open = false;
+            list.forEach(obj => {
+                if (!this.userSelectList.some(item => item == obj.id)) {
+                    this.userSelectList.push(obj.id);
+                }
+            });
+
+        },
+
+        //修改过期时间
+        handleUpdateTemp(val) {
+            this.tempUser.updateOpen = true;
+            this.tempUser.form = {
+                id: val.id,
+                qwId: val.qwId,
+                liveTempId: val.tempId,
+                liveTempSendTime: val.sendTime,
+            }
+        },
+        //修改过期时间
+        submitTemp() {
+            if (this.tempUser.form.liveTempId == null) {
+                return this.$message.error("请选择直播模板")
+            }
+            if (this.tempUser.form.liveTempSendTime == null) {
+                return this.$message.error("请选择发送时间")
+            }
+            updateTemp({ id: this.tempUser.form.id, sopId: this.tempUser.id, tempId: this.tempUser.form.liveTempId, sendTime: this.tempUser.form.liveTempSendTime, qwId: this.tempUser.form.qwId }).then(response => {
+                this.msgSuccess("修改成功");
+                this.tempUser.updateOpen = false;
+                this.listTemp();
+            });
+        },
+        handleUpdateOutTime(val) {
+            this.outTimeOpen.title = "修改过期时间/评级";
+            this.outTimeOpen.id = val.id;
+            this.outTimeOpen.tempId = val.tempId;
+            this.outTimeOpen.expiryTime = val.expiryTime;
+            this.outTimeOpen.isRating = val.isRating;
+            this.outTimeOpen.minConversionDay = val.minConversionDay;
+            this.outTimeOpen.maxConversionDay = val.maxConversionDay;
+            this.outTimeOpen.courseDay = val.courseDay;
+            this.outTimeOpen.isSampSend = val.isSampSend;
+            this.outTimeOpen.isLiveMgs = val.isLiveMgs;
+            this.outTimeOpen.liveTempId = val.liveTempId;
+            this.outTimeOpen.liveTempSendTime = val.liveTempSendTime;
+            this.outTimeOpen.appId = val.appId;
+            this.outTimeOpen.open = true;
+        },
+
+        handleUpdateExpiryTime() {
+            updateSop({
+                id: this.outTimeOpen.id,
+                tempId: this.outTimeOpen.tempId,
+                expiryTime: this.outTimeOpen.expiryTime,
+                isRating: this.outTimeOpen.isRating,
+                minConversionDay: this.outTimeOpen.minConversionDay,
+                maxConversionDay: this.outTimeOpen.maxConversionDay,
+                courseDay: this.outTimeOpen.courseDay,
+                isLiveMgs: this.outTimeOpen.isLiveMgs,
+                liveTempId: this.outTimeOpen.liveTempId,
+                liveTempSendTime: this.outTimeOpen.liveTempSendTime,
+                isSampSend: this.outTimeOpen.isSampSend,
+                appId: this.outTimeOpen.appId,
+            }).then(response => {
+                this.msgSuccess("修改成功");
+                this.resetUpdateExpiryTime()
+                this.getList();
+            });
+        },
+        resetUpdateExpiryTime() {
+            this.outTimeOpen = {
+                title: '',
+                open: false,
+                id: null,
+                expiryTime: null,
+                courseDay: null,
+                isLiveMgs: 0,
+                liveTempId: null,
+                liveTempSendTime: null,
+                minConversionDay: null,
+                maxConversionDay: null,
+                isRating: null,
+                isSampSend: null,
+                appId: null
+            }
+        },
+        addContent(index) {
+            // this.setting[index].content.push({type:1})
+            if (this.form.sendType == 2) {
+                this.setting[index].content.push({ type: 1 });
+            } else {
+                if (this.setting[index].content.length < 9) {
+                    this.setting[index].content.push({ type: 1 });
+                } else {
+                    this.$message({
+                        message: '最多只能添加 9 个内容',
+                        type: 'warning'
+                    });
+                }
+            }
+
+        },
+
+        //选择变动时的变动
+        handleSendTypeChange(val) {
+            this.tempList = [];
+            this.form.tempId = null;
+            if (val == 1) {
+                // 遍历 this.setting 数组并清空每个对象的 content 属性
+                this.setting.forEach(item => {
+                    if (item.content.length > 9) {
+                        item.content = item.content.slice(0, 9); // 保留前 9 个元素
+                    }
+                });
+            }
+        },
+        delContent(index, contentIndex) {
+            this.setting[index].content.splice(contentIndex, 1)
+        },
+
+        //添加SOP规则类型
+        handleCommand(command) {
+            this.setting.push({
+                sopType: command,
+                ruleType: null,
+                name: null,
+                type: 1,
+                content: [],
+                isBindUrl: 1,
+                url: null,
+                day: "0",
+                hour: "0",
+                minute: "0",
+                time: ""
+            })
+        },
+
+        //添加科普SOP
+        handleCrouseCommand(command, val) {
+            console.log("command", command)
+            console.log("val", val)
+        },
+
+        delSetting(index) {
+            this.setting.splice(index, 1)
+        },
+        handleClosegroupUser(list) {
+            const index = this.userSelectList.findIndex(t => t === list);
+            if (index !== -1) {
+                this.userSelectList.splice(index, 1);
+            }
+        },
+        /**
+         * 查询sop列表
+         */
+        getList() {
+            this.loading = true;
+            listSop(this.queryParams).then(response => {
+                this.sopList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+                listSopTemp().then(res => {
+                    this.tempList = res.rows;
+                });
+
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                id: null,
+                name: null,
+                status: 1,
+                sendType: 2,
+                type: 2,
+                filterType: 2,
+                isLiveMgs: 0,
+                qwUserIds: null,
+                liveTempId: null,
+                liveTempSendTime: null,
+                corpId: null,
+                setting: null,
+                createBy: null,
+                createTime: null,
+                isAutoSop: null,
+                autoSopTime: { autoSopType: 2, autoStartTime: '00:00', autoEndTime: '24:00', autoSopSend: 2, autoDateTime: [] },
+            };
+            this.resetForm("form");
+            this.tags = null;
+            this.excludeTags = null;
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            // 处理标签ID参数
+            if (this.selectTags != null && this.selectTags.length > 0) {
+                this.queryParams.tagIds = this.selectTags.map(tag => tag.id).join(",");
+            } else {
+                this.queryParams.tagIds = null;
+            }
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            // this.queryParams.corpId = this.myQwCompanyList[0].dictValue;
+            this.selectTags = null;
+            this.refreshData(this.queryParams.corpId);
+            this.handleQuery();
+        },
+        // 多选框选中数据
+        handleSelectionChange(selection) {
+            this.ids = selection.map(item => item.id)
+            this.selectionMap = selection;
+            this.single = selection.length !== 1
+            this.multiple = !selection.length
+        },
+        // 新增按钮操作
+        handleAdd() {
+            this.reset();
+            this.$router.push('/app/sop/addSop')
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row, type) {
+            this.$router.push('/app/sop/updateSop/' + row.id + '/' + type)
+        },
+        handleTemp(id) {
+            this.tempUser.open = true;
+            this.tempUser.id = id;
+            this.listTemp();
+        },
+        listTemp() {
+            this.tempUser.loading = true;
+            getTempUserList(this.tempUser.id).then(e => {
+                this.tempUser.list = e.data;
+                this.tempUser.loading = false;
+            })
+        },
+
+        /**
+         * 查看SOP任务内营期
+         */
+        selectSchedule(row) {
+            // type 2：我的sop 1：部门sop/客服公司sop
+            const query = {
+                id: row.id,
+                name: row.name,
+                tempId: row.tempId,
+                filterMode: row.filterMode,
+                // corpId: row.corpId,
+                type: 1,
+            }
+            // 使用 params 传递参数
+            this.$router.push({
+                path: `/app/sop/sopUserLogsSchedule/${query.id}`,
+                query // 如果需要传递更多参数，可以使用 query
+            });
+        },
+
+
+        /**
+         * 查看营期内详情
+         */
+        handleScheduleDetail(row) {
+            this.sopLogsDialog.title = '规则执行详情7';
+            this.sopLogsDialog.open = true;
+            this.sopLogsDialog.sopLogsForm = row;
+            // 使用Vue.set或this.$set添加新字段
+            this.$set(this.sopLogsDialog.sopLogsForm, 'filterSopType', 1);
+        },
+
+        /**
+         * 查看模板
+         */
+        handleQueryDetails(row) {
+            this.$router.push(`/user/sopTemp/updateSopTemp/${row.tempId}/3`)
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.userSelectList.length <= 0) {
+                        return this.$message("请选择员工")
+                    }
+                    this.form.qwUserIds = this.userSelectList.join(",");
+                    if (this.tags != null && this.tags.length > 0) {
+                        this.form.tags = (this.tags).toString()
+                    } else {
+                        return this.$message.error("选择的标签不能为空！！请选择筛选的标签")
+                    }
+                    if (this.excludeTags != null) {
+                        this.form.excludeTags = (this.excludeTags).toString()
+                    }
+
+                    this.form.setting = JSON.stringify(this.setting)
+                    if (this.form.id != null) {
+                        updateSop(this.form).then(response => {
+                            this.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addSop(this.form).then(response => {
+                            this.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        sortSelectedDates(dates) {
+
+            if (!this.form.startTime) {
+                this.$message.error("请先选择开始时间！不得小于任务开始时间");
+                this.form.autoSopTime.autoDateTime = [];
+                return;
+            }
+
+            // 1. 过滤掉 < startTime 的日期
+            const validDates = dates.filter(date => new Date(date) >= new Date(this.form.startTime));
+
+            // 2. 如果有被过滤掉的日期，提示用户
+            if (validDates.length < dates.length) {
+                this.$message.warning(`已自动移除小于 ${this.form.startTime} 的日期！`);
+            }
+
+            // 3. 升序排序
+            validDates.sort((a, b) => new Date(a) - new Date(b));
+
+            // 4. 更新数据
+            this.form.autoSopTime.autoDateTime = validDates;
+        },
+
+        submitAutoSopTimeFrom() {
+
+            if (this.form.autoSopTime.autoSopType == 3 || this.form.autoSopTime.autoSopType == 4) {
+                if (this.form.autoSopTime.autoDateTime == null || this.form.autoSopTime.autoDateTime == "") {
+                    return this.$message.error("选择的日期不能为空！！请选择日期")
+                }
+            }
+
+            this.$refs["autoSopTimeFrom"].validate(valid => {
+                if (valid) {
+                    this.autoSopOpen.open = false
+                    this.form.autoSopTime.createTime = this.formatDateTo24HourString(new Date());
+                    updateAutoSopTime({
+                        id: this.autoSopOpen.id,
+                        isAutoSop: this.autoSopOpen.isAutoSop,
+                        autoSopTime: JSON.stringify(this.form.autoSopTime)
+                    }).then(response => {
+                        this.msgSuccess("修改成功");
+                    });
+                }
+                this.getList();
+                this.reset();
+            });
+        },
+
+        formatDateTo24HourString(date) {
+            let year = date.getFullYear();
+            let month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份需要加 1 并补零
+            let day = ('0' + date.getDate()).slice(-2); // 日需要补零
+            let hours = ('0' + date.getHours()).slice(-2); // 小时需要补零
+            let minutes = ('0' + date.getMinutes()).slice(-2); // 分钟需要补零
+            let seconds = ('0' + date.getSeconds()).slice(-2); // 秒需要补零
+
+            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+        },
+        cancelAutoSopTime() {
+            this.autoSopOpen.open = false
+            this.getList();
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const ids = row.id || this.ids;
+            this.$confirm('是否确认删除企微自动化编号为"' + ids + '"的数据项?', "警告", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            }).then(function () {
+                return delSop(ids);
+            }).then(() => {
+                this.getList();
+                this.msgSuccess("删除成功");
+            }).catch(() => {
+            });
+        },
+        /**
+         * 批量执行SOP任务
+         */
+        handleExecute() {
+            const ids = this.selectionMap
+                .filter(item => item.status === 1)
+                .map(item => item.id);
+            if (ids.length === 0) {
+                this.msgError("选择的任务已经执行或正在执行，请选择待执行的任务");
+                return;
+            }
+            this.$confirm('是否确认立即执行自动化编号为"' + ids + '"的数据项?', "警告【只能立即执行（待执行的）】", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            }).then(() => {
+                this.loading = true;
+                // 执行更新操作
+                return updateStatus(ids); // 返回一个Promise，直接在此链式调用
+            }).then(res => {
+                let msg = "";
+
+                // 判断成功和失败的任务，并显示消息
+                if (res.suc.length > 0) {
+                    msg += "执行成功的自动化任务【" + res.suc.join(", ") + "】。<br>"; // 优化：将数组转换为字符串
+                }
+                if (res.err.length > 0) {
+                    msg += "失败的自动化任务【" + res.err.join(", ") + "】，原因是已经执行或正在执行。<br>";
+                }
+
+                // 显示确认框，显示成功与失败信息
+                return this.$confirm(msg, "提示", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning",
+                    dangerouslyUseHTMLString: true // 允许HTML标签
+                });
+
+            }).then(() => {
+                // 操作完成后刷新列表，并显示成功信息
+                this.getList();
+                this.msgSuccess("执行完成");
+            }).catch(() => {
+                // 处理任何异常，操作取消或者失败时显示提示信息
+                this.msgError("操作失败，请重试");
+            }).finally(() => {
+                this.loading = false; // 操作完成后关闭加载状态
+            });
+
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            const queryParams = this.queryParams;
+            this.$confirm('是否确认导出所有企微自动化数据项?', "警告", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            }).then(() => {
+                this.exportLoading = true;
+                return exportSop(queryParams);
+            }).then(response => {
+                this.download(response.msg);
+                this.exportLoading = false;
+            }).catch(() => {
+            });
+        },
+        courseChange() {
+            if (this.msgForm.courseId != null) {
+                const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === this.msgForm.courseId);
+                for (let i = 0; i < this.setting.length; i++) {
+                    //响应式直接给链接的标题/封面上值
+                    if (selectedCourse && this.setting[i].contentType == 3 && this.msgForm.courseId != null) {
+                        this.$set(this.setting[i], 'linkTitle', selectedCourse.dictLabel);
+                        this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
+                    }
+
+                }
+
+            }
+            videoList(this.msgForm.courseId).then(response => {
+                this.videoList = response.list;
+            });
+        },
+        handleContentTypeChange() {
+
+            //如果是链接的才上
+            if (this.msgForm.courseId != null) {
+                const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === this.msgForm.courseId);
+                for (let i = 0; i < this.setting.length; i++) {
+                    //响应式直接给链接的标题/封面上值
+                    if (selectedCourse && this.msgForm.courseId != null) {
+                        console.log(1, this.setting[i].contentType)
+                        if (this.setting[i].contentType == 3 || this.setting[i].contentType == 9) {
+                            this.$set(this.setting[i], 'linkTitle', selectedCourse.dictLabel);
+                            this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
+                        }
+                        if (this.setting[i].contentType == 4) {
+                            this.$set(this.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
+                        }
+
+
+                    }
+
+                }
+
+            }
+            if (this.msgForm.videoId != null) {
+                // 查找选中的课节对应的 label
+                const selectedVideo = this.videoList.find(course => parseInt(course.dictValue) === this.msgForm.videoId);
+
+                for (let i = 0; i < this.setting.length; i++) {
+                    //响应式直接给链接的描述上值
+                    if (selectedVideo && this.msgForm.videoId != null) {
+                        console.log(2, this.setting[i].contentType)
+                        if (this.setting[i].contentType == 3 || this.setting[i].contentType == 9) {
+                            this.$set(this.setting[i], 'linkDescribe', selectedVideo.dictLabel);
+                        }
+                        if (this.setting[i].contentType == 4) {
+                            this.$set(this.setting[i], 'miniprogramTitle', selectedVideo.dictLabel);
+                        }
+
+                    }
+                }
+            }
+
+
+        },
+        handleAvatarSuccessFile(res, file, item) {
+            if (res.code === 200) {
+                // 使用 $set 确保响应式更新
+                this.$set(item, 'fileUrl', res.url);
+            } else {
+                this.msgError(res.msg);
+            }
+        },
+        beforeAvatarUploadFile(file) {
+            const isLt1M = file.size / 1024 / 1024 < 10;
+            if (!isLt1M) {
+                this.$message.error('上传大小不能超过 10MB!');
+            }
+            return isLt1M;
+        },
+        //下载文件
+        downloadUrl(materialUrl) {
+            // 直接返回文件 URL
+            return materialUrl;
+        },
+
+        handleAvatarSuccessVideo(res, file, item) {
+            if (res.code == 200) {
+                // 使用 $set 确保响应式更新
+                this.$set(item, 'videoUrl', res.url);
+            } else {
+                this.msgError(res.msg);
+            }
+        },
+
+        beforeAvatarUploadVideo(file) {
+            const isLt30M = file.size / 1024 / 1024 < 10;
+            const isMP4 = file.type === 'video/mp4';
+
+            if (!isMP4) {
+                this.$message.error('仅支持上传 MP4 格式的视频文件!');
+                return false;
+            }
+
+            if (!isLt30M) {
+                this.$message.error('上传大小不能超过 10MB!');
+                return false;
+            }
+
+            return true;
+        },
+
+        handleInputVideoText(value, content) {
+            // 允许的字符：中文、英文（大小写）、数字和指定标点符号（，。！？）
+            const regex = /^[\u4e00-\u9fa5，。！？,!?]+$/;
+
+            // 删除不符合条件的字符
+            const filteredValue = value.split('').filter(char => regex.test(char)).join('');
+
+            this.$set(content, 'value', filteredValue);
+
+        },
+        delSetList(index) {
+            this.setting.splice(index, 1)
+        },
+        addSetList() {
+            const newSetting = {
+                contentType: '1',
+                value: '',
+            };
+            // 将新设置项添加到 content.setting 数组中
+            this.setting.push(newSetting);
+
+        },
+        isEmpty(obj) {
+            if (null === obj || undefined === obj || 0 === obj.length) {
+                return true;
+            }
+            return false;
+        },
+        videoIdChange() {
+            if (this.msgForm.videoId != null) {
+                // 查找选中的课节对应的 label
+                const selectedVideo = this.videoList.find(course => parseInt(course.dictValue) === this.msgForm.videoId);
+
+                for (let i = 0; i < this.setting.length; i++) {
+                    //响应式直接给链接的描述上值
+                    if (selectedVideo && this.msgForm.videoId != null) {
+                        if (this.setting[i].contentType == 3 || this.setting[i].contentType == 9) {
+                            this.$set(this.setting[i], 'linkDescribe', selectedVideo.dictLabel);
+                        }
+
+                        if (this.setting[i].contentType == 4) {
+                            this.$set(this.setting[i], 'miniprogramTitle', selectedVideo.dictLabel);
+                        }
+
+
+                    }
+                }
+            }
+        },
+    }
+}
+;
+</script>
+<style scoped>
+.custom-input /deep/ .el-input__inner {
+  height: 20px;
+  padding: 0 4px;
+  text-align: center;
+  display: block;
+}
+
+.custom-input /deep/ .el-input__icon {
+  line-height: 20px;
+}
+
+.el-button--text {
+  cursor: pointer;
+}
+
+/* CSS 样式 */
+.tag-container {
+  display: flex;
+  flex-wrap: wrap; /* 超出宽度时自动换行 */
+  gap: 8px; /* 设置标签之间的间距 */
+}
+
+.name-background {
+  display: inline-block;
+  background-color: #abece6; /* 背景颜色 */
+  padding: 4px 8px; /* 调整内边距，让背景包裹文字 */
+  border-radius: 4px; /* 可选：设置圆角 */
+}
+
+.tag-box {
+  padding: 8px 12px;
+  border: 1px solid #989797;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.tag-selected {
+  background-color: #00bc98;
+  color: #fff;
+  border-color: #00bc98;
+}
+</style>

src/views/app/sop/logs/index.vue

@@ -0,0 +1,624 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
+      <el-form-item label="企微员工账号" prop="qwUserid" v-if="queryParams.type==2">
+        <el-input
+          v-model="queryParams.qwUserid"
+          placeholder="请输入企微员工账号"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="企微员工昵称" prop="qwUserName" v-if="queryParams.type==2">
+        <el-input
+          v-model="queryParams.qwUserName"
+          placeholder="请输入企微员工昵称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="客服昵称" prop="qwUserName" v-if="queryParams.type==1">
+        <el-input
+          v-model="queryParams.qwUserName"
+          placeholder="请输入客服昵称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="客户昵称" prop="externalUserName">
+        <el-input
+          v-model="queryParams.externalUserName"
+          placeholder="请输入客户昵称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="发送类型" prop="sendType" >
+        <el-select v-model="queryParams.sendType" placeholder="请选择发送类型" clearable size="small"   @change="handleQuery">
+          <el-option
+            v-for="dict in sysQwSopType"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="发送(成员)状态" prop="sendStatus">
+        <el-select v-model="queryParams.sendStatus" placeholder="请选择发送(成员)状态" clearable size="small">
+          <el-option
+            v-for="dict in sysQwSopLogsStatus"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="预计发送时间" prop="scheduleTime">
+<!--        <el-date-picker clearable size="small"-->
+<!--          v-model="queryParams.sendTime"-->
+<!--          type="datetime"-->
+<!--          value-format="yyyy-MM-dd HH:mm:ss"-->
+<!--          placeholder="选择预计发送时间">-->
+<!--        </el-date-picker>-->
+        <el-date-picker
+          clearable size="small"
+          v-model="scheduleTime"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          placeholder="选择预计发送时间"
+          @change="handleScheduleTimeChange"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="接收(客户)状态" prop="receivingStatus">
+        <el-select v-model="queryParams.receivingStatus" placeholder="请选择接收(客户)状态" clearable size="small">
+          <el-option
+            v-for="dict in groupMsgSendStatusOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </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-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          :loading="exportLoading"
+          @click="handleExport"
+          v-hasPermi="['qw:sopLogs:export']"
+        >导出</el-button>
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['qw:sopLogs:remove']"
+        >批量删除</el-button>
+
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="multiple"
+          @click="handleEditCourse"
+          v-hasPermi="['qw:sopLogs:editCourse']"
+        >再次发送记录</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="qwSopLogsList"  @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="发送类型" align="center" prop="sendType" width="80">
+        <template slot-scope="scope">
+          <dict-tag :options="sysQwSopType" :value="scope.row.sendType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="企微成员账号" align="center" prop="qwUserid" />
+      <el-table-column label="企微成员昵称" align="center" prop="qwUserName" v-if="queryParams.type==2" />
+<!--      <el-table-column label="系统后台昵称" align="center" prop="userName" />-->
+      <el-table-column label="客户昵称" align="center" prop="externalUserName" />
+      <el-table-column label="发送的消息" align="center" prop="contentJson" >
+        <template slot-scope="scope">
+          <el-button type="text" @click="showContentDialog(scope.row.contentJson)">
+            查看详情
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="成员状态" align="center" prop="sendStatus" >
+        <template slot-scope="scope">
+          <dict-tag :options="sysQwSopLogsStatus" :value="scope.row.sendStatus"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="预计发送时间" align="center" prop="sendTime" width="180"/>
+      <el-table-column label="实际发送时间" align="center" prop="realSendTime" width="180"/>
+<!--      <el-table-column label="获取记录" align="center" prop="takeRecords" width="180">-->
+<!--        <template slot-scope="scope">-->
+<!--          <span v-if="scope.row.takeRecords == 0" :style="{ color: 'red' }" >未获取</span>-->
+<!--          <span v-else-if="scope.row.takeRecords == 1" :style="{ color: 'green' }" >已获取</span>-->
+<!--          <span v-else :style="{ color: 'gray' }" >未知状态</span>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+      <el-table-column label="客户" align="center" prop="receivingStatus" >
+        <template slot-scope="scope">
+          <dict-tag :options="groupMsgSendStatusOptions" :value="scope.row.receivingStatus"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="生成时间" align="createTime" prop="createTime" width="180" />
+      <el-table-column label="消息ID" align="center" prop="msgId" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="APP备注" align="center" prop="appSendRemark" />
+    </el-table>
+
+    <el-dialog :visible.sync="contentDialog.isDialogVisible" title="消息详情" width="30%" append-to-body>
+      <div>
+        <span>课节：{{contentDialog.videoId}}</span>
+        <div v-for="(item, index) in contentDialog.json || []" :key="index">
+          <el-card class="box-card" style="margin-top: 2%">
+            <div slot="header" class="clearfix" style="display: flex;justify-content: space-between;align-items: center;">
+              <div>
+                <span>类型：</span>
+                <span v-if="item.contentType == 1">文本</span>
+                <span v-if="item.contentType == 2">图片</span>
+                <span v-if="item.contentType == 3">卡片</span>
+                <span v-if="item.contentType == 4">小程序</span>
+                <span v-if="item.contentType == 5">文件</span>
+                <span v-if="item.contentType == 6">视频</span>
+                <span v-if="item.contentType == 7">语音</span>
+                <span v-if="item.contentType == 8">视频号</span>
+                <span v-if="item.contentType == 9">APP</span>
+                <span v-if="item.contentType == 11">APP文本</span>
+                <span v-if="item.contentType == 12">APP语音</span>
+                <span v-if="item.contentType == 13">注册</span>
+                <span v-if="item.contentType == 14">福袋</span>
+                <span v-if="item.contentType == 15">浏览器学习</span>
+              </div>
+              <div v-if="item.sendStatus">
+                <span>发送状态：</span>
+                <el-tag type="success" v-if="item.sendStatus == 1">发送成功</el-tag>
+                <el-tag type="danger" v-if="item.sendStatus == 2">发送失败</el-tag>
+              </div>
+            </div>
+            <div v-if="item.sendStatus && item.sendStatus == 2">发送失败原因：<span style="color: #ff4949">{{item.sendRemarks}}</span></div>
+            <div v-if="item.contentType == 1" v-html="item.value"></div>
+            <div v-if="item.contentType == 2">
+              <el-image
+                style="width: 100px; height: 100px"
+                :src="item.imgUrl"
+                fit="contain"
+                @click.prevent="openImageViewer(item.imgUrl)" />
+            </div>
+            <div v-if="item.contentType == 3 || item.contentType == 9" class="message-style">
+              <div
+                style="background-color: white; padding: 10px; width: 100%"
+                @click="openLink(item.linkUrl)">
+                <span>{{ item.linkTitle }}</span>
+                <div style="display: flex; justify-content: space-between; width: 100%">
+                  <span style="font-size: 13px; flex: 1">{{ item.linkDescribe }}</span>
+                  <!-- 点击图片时停止事件冒泡 -->
+                  <el-image
+                    style="width: 50px; height: 50px; flex-shrink: 0"
+                    :src="item.linkImageUrl"
+                    fit="contain"
+                    @click.stop="openImageViewer(item.linkImageUrl)" />
+                </div>
+              </div>
+            </div>
+            <div v-if="item.contentType == 4 || item.contentType == 15" class="message-style">
+                <div style="display: flex; justify-content: space-between; width: 100%">
+                  <span style="font-size: 13px; flex: 1">{{ item.miniprogramTitle }}</span>
+                  <el-image
+                    style="width: 50px; height: 50px; flex-shrink: 0"
+                    :src="item.miniprogramPicUrl"
+                    fit="contain"
+                    @click.stop="openImageViewer(item.miniprogramPicUrl)" />
+                </div>
+            </div>
+            <div v-if="item.contentType == 5" class="message-style">
+              <el-link type="primary" :href="item.fileUrl" download style="padding: 10px">
+                {{ item.fileUrl }}
+              </el-link>
+            </div>
+            <div v-if="item.contentType == 6" class="message-style">
+              <video
+                :src="item.videoUrl"
+                controls
+                style="width: 200px; height: 100px">
+              </video>
+            </div>
+            <div v-if="item.contentType == 7">
+              <span>
+                {{ item.value }}
+              </span>
+              <div v-if="!item.voiceUrl" style="margin-top: 3px"  >
+                <span style="color: red">无语音地址</span>
+              </div>
+            </div>
+
+            <div v-if="item.contentType == 8" class="message-style">
+              <el-card class="box-card" v-if="item.coverUrl">
+                <el-form-item label="封面标题:"  label-width="100px">
+                  <el-input v-model="item.nickname" style="width: 90%;margin-bottom: 1%" disabled/>
+                </el-form-item>
+                <el-form-item label="头像:"   label-width="100px" >
+                  <el-image
+                    v-if="item.avatar != null"
+                    :src="item.avatar"
+                    :preview-src-list="[item.avatar]"
+                    :style="{ width: '50px', height: '50px' }"
+                  ></el-image>
+                </el-form-item>
+                <el-form-item label="封面:"   label-width="100px" >
+                  <el-image
+                    v-if="item.coverUrl != null"
+                    :src="item.coverUrl"
+                    :preview-src-list="[item.coverUrl]"
+                    :style="{ width: '200px', height: '200px' }"
+                  ></el-image>
+                </el-form-item>
+                <el-form-item label="简介:"   label-width="100px" >
+                  <el-input type="textarea" :rows="3" v-model="item.desc"  style="width: 90%;margin-top: 1%;" disabled />
+                </el-form-item>
+                <el-form-item label="视频地址:"  label-width="100px" style="margin-top: 1%" >
+                  <el-input v-model="item.url" style="width: 90%;" disabled />
+                </el-form-item >
+              </el-card>
+            </div>
+
+          </el-card>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="contentDialog.isDialogVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 大图预览对话框 -->
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :modal="false"
+      width="500"
+      append-to-body>
+      <img
+        :src="this.dialogImageUrl"
+        style="display: block; max-width: 100%; margin: 0 auto"
+      />
+    </el-dialog>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import {listQwSopLogs, exportQwSopLogs, listQwSopLogsList, delQwSopLogs, editCourseQwSopLogs} from '@/api/qw/sopLogs'
+import {delSopUserLogsInfo} from "@/api/qw/sopUserLogsInfo";
+
+export default {
+  name: "sopLogsList",
+  props:{
+    rowDetailFrom:{},
+  },
+
+  watch:{
+    rowDetailFrom:{
+      handler(newVal){
+        // 当formData变化时重新查询
+        this.getList(newVal);
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+
+      //图片放大
+      dialogVisible: false,
+      dialogImageUrl:null,
+      //时间选择
+      scheduleTime: null,
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 企业微信SOP  定时任务表格数据
+      qwSopLogsList: [],
+
+      //成员状态
+      sysQwSopLogsStatus:[],
+
+      //客户接收状态
+      groupMsgSendStatusOptions:[],
+
+      //企微SOP发送类型
+      sysQwSopType: [],
+
+      //发送的消息
+      contentDialog:{
+        isDialogVisible:false,
+        json: [],
+        videoId:null,
+      },
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        qwUserName: null,
+        qwUserid: null,
+        externalUserName: null,
+        sendStatus: null,
+        sendTime: null,
+        corpId:null,
+        receivingStatus: null,
+        sendType: null,
+        type:null,
+        scheduleEndTime:null,
+        scheduleStartTime:null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList(this.rowDetailFrom);
+
+    //成员状态
+    this.getDicts("sys_qw_sopLogs_status").then(response => {
+      this.sysQwSopLogsStatus = response.data;
+    });
+
+    //客户接收状态
+    this.getDicts("sys_qw_groupMsg_SendStatus").then(response => {
+      this.groupMsgSendStatusOptions = response.data;
+    });
+
+    //发送消息类型
+    this.getDicts("sys_qw_sop_course_type").then(response => {
+      this.sysQwSopType = response.data;
+    });
+
+
+  },
+  methods: {
+    /** 查询企业微信SOP  定时任务列表 */
+    getList(val) {
+
+      this.queryParams.sopId = val.id || this.rowDetailFrom.id;
+      this.queryParams.corpId= val.corpId || this.rowDetailFrom.corpId;
+      this.queryParams.type= val.type || this.rowDetailFrom.type;
+      this.queryParams.filterSopType=val.filterSopType || this.rowDetailFrom.filterSopType;
+      this.loading = true;
+
+      listQwSopLogsList(this.queryParams).then(response => {
+
+        this.qwSopLogsList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+
+    handleScheduleTimeChange(val) {
+      if (val) {
+        this.queryParams.scheduleStartTime = this.formatDateTime(val[0]);
+        this.queryParams.scheduleEndTime = this.formatDateTime(val[1]);
+      } else {
+        this.queryParams.scheduleStartTime = null;
+        this.queryParams.scheduleEndTime = null;
+      }
+    },
+
+    // 格式化日期为 yyyy-MM-dd HH:mm:ss 的北京时间
+    formatDateTime(date) {
+      if (!date) return null;
+
+      // 创建国际化时间格式，指定为 Asia/Shanghai 时区
+      const options = {
+        timeZone: 'Asia/Shanghai',
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false, // 24小时制
+      };
+
+      // 获取格式化的日期字符串（如 2025-01-23, 16:00:00）
+      const formattedDate = new Intl.DateTimeFormat('zh-CN', options).format(new Date(date));
+
+      // 转换为 yyyy-MM-dd HH:mm:ss 格式
+      const [datePart, timePart] = formattedDate.replace(',', '').split(' ');
+      return `${datePart} ${timePart}`;
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        qwUserName: null,
+        externalUserName: null,
+        logType: null,
+        contentJson: null,
+        sendStatus: null,
+        sendTime: null,
+        companyId: null,
+        receivingStatus: null,
+        msgId: null,
+        sendType: null,
+        sopId: null
+      };
+      this.resetForm("form");
+    },
+
+    openImageViewer(url) {
+      // 打开大图预览对话框
+      this.dialogImageUrl=url
+      this.dialogVisible = true;
+    },
+    openLink(url){
+      // 使用 window.open 打开链接
+      window.open(url, '_blank');
+    },
+    //查看发送的消息体
+    showContentDialog(contentJson) {
+
+      // 解析 JSON 字符串为 JavaScript 对象
+      // 替换非法换行符等控制字符
+      const sanitizedJson = contentJson.replace(/[\u0000-\u001F\u007F]/g, '');
+      const parsedData = JSON.parse(sanitizedJson);
+      console.log(parsedData);
+      this.contentDialog.json = parsedData.setting;
+      this.contentDialog.videoId = parsedData.videoId;
+
+      this.contentDialog.isDialogVisible = true;
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList(this.rowDetailFrom);
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.scheduleStartTime=null;
+      this.queryParams.scheduleEndTime=null;
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除【执行详情】编号为"【' + ids + '】"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        return delQwSopLogs(ids);
+      }).then(() => {
+        this.getList(this.rowDetailFrom);
+        this.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+
+    /**
+    * 批量修改完课的发送
+    */
+    handleEditCourse(row){
+
+      // 获取原始ids（确保是数组）
+      let ids = row.id || this.ids;
+      if (!Array.isArray(ids)) {
+        ids = [ids];
+      }
+
+      // 过滤掉remark为'E级客户不发送'的项
+      const filteredIds = ids.filter(id => {
+        const item = this.qwSopLogsList.find(item => item.id === id);
+        return item?.remark !== 'E级客户不发送';
+      });
+
+      // 如果没有可发送的记录
+      if (filteredIds.length === 0) {
+        this.msgWarning("没有可发送的记录（E级客户已自动排除）");
+        return;
+      }
+
+      this.$confirm('确认要再次发送【执行详情】编号为"【' + filteredIds.join(',') + '】"的【完课】记录?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        return editCourseQwSopLogs(filteredIds);
+      }).then(() => {
+        this.getList(this.rowDetailFrom);
+        this.msgSuccess("已经 修改记录为 待发送~");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有企业微信自动化  定时任务数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.exportLoading = true;
+          return exportQwSopLogs(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>
+<style scoped>
+.message-stayle{
+  display: flex;
+  justify-content: normal;
+  align-items: center;
+  margin-top: 10px;
+}
+.message-stayle .el-link {
+  white-space: normal; /* 允许换行 */
+  word-break: break-all; /* 单词中间断行 */
+  overflow-wrap: break-word; /* 允许在单词内换行 */
+}
+.message-stayle span {
+  word-break: break-all;
+}
+</style>

src/views/app/sop/template/index.vue

@@ -0,0 +1,579 @@
+<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="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="模板类型" prop="sendType">
+        <el-select v-model="queryParams.sendType" placeholder="请选择类型" clearable size="small">
+          <el-option
+            v-for="dict in sysQwSopType"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input
+          v-model="queryParams.sort"
+          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-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+
+        <el-dropdown
+          @command="handleCommand"
+          trigger="click"
+          placement="bottom-start"
+        >
+          <el-dropdown-menu slot="dropdown" style="width: 140px;">
+            <el-dropdown-item
+              v-for="option in sysQwSopType"
+              :key="option.dictValue"
+              :command="option.dictValue"
+            >
+              <i :class="option.iconClass" style="margin-right: 10px;"></i>
+              {{ option.dictLabel }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+          <span class="el-dropdown-link" >
+              <el-button 
+                type="primary"
+                icon="el-icon-plus"
+                plain
+                size="mini"
+                v-hasPermi="['app:template:add']"
+              >
+                新增模板
+              </el-button>
+            </span>
+        </el-dropdown>
+      </el-col>
+
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['app:template:delete']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          :loading="exportLoading"
+          @click="handleExport"
+          v-hasPermi="['app:template:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" border :data="sopTempList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="模板编号" align="center" prop="id" />
+      <el-table-column label="模板标题" align="center" prop="name" />
+      <el-table-column label="模板类型" align="center" prop="sendType" >
+        <template slot-scope="scope">
+          <dict-tag :options="sysQwSopType" :value="scope.row.sendType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="间隔天数" align="center" prop="gap" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="statusOptions" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" />
+      <el-table-column label="修改时间" align="center" prop="updateTime" />
+      <el-table-column label="排序" align="center" prop="sort" />
+
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-connection"
+            @click="copyTemplate(scope.row)"
+            v-hasPermi="['app:template:copy']"
+          >复制模板</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-share"
+            @click="shareTemplate(scope.row)"
+            v-hasPermi="['app:template:share']"
+          >分享模板</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-s-promotion"
+            @click="handleQueryDetails(scope.row)"
+          >详情</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['app:template:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate2(scope.row)"
+            v-hasPermi="['app:template:rule']"
+          >管理规则</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="updateImageFun(scope.row.id)"
+            v-hasPermi="['app:template:updateImage']"
+          >更新图片</el-button>
+          <el-button
+            :disabled="scope.row.status == 0"
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['app:template:stop']"
+          >停用</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="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入模板标题" />
+        </el-form-item>
+
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in statusOptions"
+              :key="dict.dictValue"
+              :label="dict.dictValue"
+            >{{dict.dictLabel}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="间隔天数" prop="gap" v-show="false">
+          <el-input-number v-model="form.gap"  :min="1" label="间隔天数"></el-input-number>
+          <div style="color: #999;font-size: 14px;display: flex;align-items: center;">
+            <i class="el-icon-info"></i>
+            设置间隔几天发送sop任务模板内容。比如 设置间隔2天。则第一天，第三天，第五天时 才发送科普模板中的第一天，第二天，第三天的内容。（默认建议1天,好精准匹配不迷糊）
+          </div>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort" v-show="false">
+          <el-input-number v-model="form.sort"  :min="0" label="排序"></el-input-number>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer" style="float: right;">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    
+  </div>
+</template>
+
+<script>
+import {
+  listSopTemp,
+  getSopTemp,
+  delSopTemp,
+  updateTemp,
+  copyTemplate,
+  addTemp,
+  updateImage,
+  exportSopTemp,
+  shareSopTemp
+} from "@/api/app/sop/template";
+export default {
+  name: "sopTemplate",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      companysloading: false,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      //选中的公司
+      companys:[],
+      deptOptions: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      companyTotal: 0,
+      total:0,
+      sendType:0,
+      // sop模板表格数据
+      sopTempList: [],
+      sysQwSopType:[],
+      companyList:[],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      command: 0,
+      // 状态字典
+      statusOptions: [],
+
+      shareOptions:{
+        title:'分享模板',
+        open:false,
+        templateId:null,
+      },
+      queryCompanyParams: {
+        pageNum: 1,
+        pageSize: 10,
+        companyName: null,
+        status: null,
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        setting: null,
+        status: '1',
+        sort: null,
+        companyId: null
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: '名称不能为空', trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: '状态不能为空', trigger: 'blur' }
+        ],
+        sort: [
+          { required: true, message: '排序不能为空', trigger: 'blur' }
+        ],
+        gap: [
+          { required: true, message: '间隔天数不能为空', trigger: 'blur' }
+        ],
+        // createByDept:[
+        //   { required: true, message: '归属部门不能为空', trigger: 'blur' }
+        // ]
+      },
+      contentRules:{
+        time:[{ required: true, message: '时间不能为空', trigger: 'blur' }],
+      }
+    };
+  },
+  created() {
+    this.getList();
+
+    // this.getDeptTreeSelect();
+    this.getDicts("app_normal_disabled_status").then(response => {
+      this.statusOptions = response.data;
+    });
+
+    // this.getCompanyList();
+
+    this.getDicts("app_sop_type").then(response => {
+      this.sysQwSopType = response.data;
+    });
+  },
+  methods: {
+    updateImage,
+    handleCompanyQuery(){
+      this.queryCompanyParams.pageNum = 1;
+      this.getCompanyList();
+    },
+    resetCompanyQuery(){
+      this.resetForm("queryCompanyForm");
+      this.handleCompanyQuery();
+    },
+
+    getDeptTreeSelect() {
+      treeselect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+
+    /** 查询企业列表 */
+    getCompanyList() {
+      this.companysloading = true;
+      listCompany(this.queryCompanyParams).then(response => {
+        this.companyList = response.rows;
+        this.companyTotal = response.total;
+        this.companysloading = false;
+      });
+    },
+    /** 查询sop模板列表 */
+    getList() {
+      this.loading = true;
+      listSopTemp(this.queryParams).then(response => {
+        this.sopTempList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        gap: 1,
+        sendType: this.sendType,
+        sort: 0,
+        status: "1",
+        createByDept:null,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    updateImageFun(id){
+
+      let loadingRock = this.$loading({
+        lock: true,
+        text: '正在执行中请稍后~~请不要刷新页面！！',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+
+      updateImage(id).then(response => {
+        this.getList();
+        this.$message.success("更新图片 完成！");
+      }).finally(res=>{
+        loadingRock.close();
+      })
+
+
+    },
+    handleCommand(command){
+      // if (command==4) {
+      //   this.$router.push('/qw/sopTemp/addAiChatTemp')
+      // }else{
+        this.sendType = command;
+        this.title = "新增";
+        this.reset();
+        this.open = true;
+        // this.$router.push('/qw/sopTemp/addTemp/'+command)
+      // }
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    //客服公司多选
+    handleSelectionCompany(selection){
+      this.companys=selection.map(item => item.companyId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    // handleAdd() {
+    //   this.$router.push('/qw/sopTemp/addSopTemp')
+    // },
+    /**
+    * 查看详情
+    */
+    handleQueryDetails(row){
+      // if (row.sendType==4) {
+      //   this.$router.push(`/qw/sopTemp/updateAiChatTemp/${row.id}/3`)
+      // }else{
+        this.$router.push(`/user/sopTemp/updateSopTemp/${row.id}/3`)
+      // }
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+        // if (row.sendType==4) {
+        //   this.$router.push(`/qw/sopTemp/updateAiChatTemp/${row.id}/1`)
+        // }else{
+          this.getInfo(row.id, 1);
+          // this.$router.push(`/qw/sopTemp/updateTemp/${row.id}/1`)
+        // }
+
+    },
+    /** 修改按钮操作 */
+    handleUpdate2(row) {
+        // if (row.sendType==4) {
+        //   this.$router.push(`/qw/sopTemp/updateAiChatTemp/${row.id}/1`)
+        // }else{
+          this.$router.push(`/user/sopTemp/updateSopTemp/${row.id}/1`)
+        // }
+
+    },
+
+    /** 分享模板 */
+    shareTemplate(row) {
+      return this.msgError('该功能暂未开通！');
+      // this.shareOptions.open=true;
+      // this.shareOptions.templateId=row.id;
+    },
+    /**
+    * 复制模板
+    */
+    copyTemplate(row){
+        // if(row.sendType==4){
+        //   this.$router.push(`/qw/sopTemp/updateAiChatTemp/${row.id}/2`)
+        // }else{
+          this.getInfo(row.id, 2);
+          // this.$router.push(`/qw/sopTemp/updateSopTemp/${row.id}/2`)
+        // }
+    },
+    getInfo(id, command){
+      getSopTemp(id).then(response => {
+        this.command = command;
+        if(command == 2){
+          this.title = "复制";
+        }
+        if(command == 1){
+          this.title = "修改";
+        }
+        this.form = response.data;
+        this.open = true;
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      delete this.form.rules
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if(this.command == 2){
+            copyTemplate(this.form).then(response => {
+              this.msgSuccess("复制成功");
+              this.open = false;
+              this.getList();
+            });
+          }else{
+            if (this.form.id != null) {
+              updateTemp(this.form).then(response => {
+                this.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              });
+            } else {
+              addTemp(this.form).then(response => {
+                this.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              });
+            }
+          }
+        }
+      });
+    },
+
+    handleShareTemplate() {
+      const companyIds = this.companys;
+      let templateId = this.shareOptions.templateId;
+      this.$confirm("确定将模板分享给 公司编号为：" + companyIds + "的公司？", "提醒", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return shareSopTemp({companyIds: companyIds, templeId: templateId});
+      }).then(() => {
+        this.companys=[];
+        this.shareOptions.open=false;
+        this.getList();
+        this.msgSuccess("分享成功");
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除sop模板编号为"' + ids + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return delSopTemp(ids);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有sop模板数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.exportLoading = true;
+          return exportSopTemp(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+  /deep/ .el-dialog__footer {
+    height: 55px;
+  }
+</style>

src/views/app/sop/template/sopTemp.vue

@@ -0,0 +1,171 @@
+<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>
+        <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="sopTempList" ref="sopTempList" >
+      <el-table-column label="id" align="center" prop="id" />
+      <el-table-column label="模板标题" align="center" prop="name" />
+      <el-table-column label="模板状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
+          <el-tag v-else type="danger">停用</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="medium"
+            type="primary"
+            plain
+            icon="el-icon-edit"
+            @click="handleSopTemp(scope.row)"
+          >选择此模板</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getResetList"
+    />
+  </div>
+</template>
+
+<script>
+import { listSopTemp } from "@/api/app/sop/template";
+
+export default {
+  name: "SopTempComments",
+  data() {
+    return {
+      isUpdateSop:null,
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // sop模板表格数据
+      sopTempList: [],
+      sysQwSopType:[],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 状态字典
+      statusOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        sendType:null,
+        status:1,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+
+    this.getDicts("app_normal_disabled_status").then(response => {
+      this.statusOptions = response.data;
+    });
+
+    this.getDicts("app_sop_type").then(response => {
+      this.sysQwSopType = response.data;
+    });
+  },
+  methods: {
+    /** 查询sop模板列表 */
+    getList(sendType,isUpdate) {
+
+      this.isUpdateSop = isUpdate;
+      this.loading = true;
+      this.queryParams.sendType= sendType;
+      this.queryParams.status=1;
+      listSopTemp(this.queryParams).then(response => {
+        this.sopTempList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+
+    getResetList(){
+      this.loading = true;
+      listSopTemp(this.queryParams).then(response => {
+        this.sopTempList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    handleSopTemp(val){
+      if (this.isUpdateSop === 1){
+
+        this.$emit("submitUpdateTemp",val)
+        this.$refs.sopTempList.clearSelection();
+      }else {
+
+        this.$emit("sopTemp",val)
+        this.$refs.sopTempList.clearSelection();
+        this.open=false;
+      }
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        status:1,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getResetList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+
+  }
+};
+</script>

src/views/app/sop/template/updateSopTemp.vue

@@ -0,0 +1,2986 @@
+<template>
+  <div class="app-container">
+
+    <div style="margin: 30px;">模板编号：【{{this.form.id}}】</div>
+
+    <div 
+      style="
+        margin-top: 10px;
+        margin-left: 50px;
+        margin-right: 100px;
+        margin-bottom: 60px;
+      "
+    >
+      <el-form 
+        ref="form"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item 
+          label="名称"
+          prop="name"
+        >
+          {{ form.name }}
+        </el-form-item>
+
+        <el-form-item label="状态">
+          <dict-tag 
+            :options="statusOptions"
+            :value="form.status"
+          />
+        </el-form-item>
+          
+        <el-form-item label="间隔天数"
+          prop="gap"
+        >
+          {{ form.gap }}天
+        </el-form-item>
+
+        <el-form-item label="规则"
+          prop="setting"
+        >
+          <!-- 操作条件：表单类型不为查看且(模板类型不为新客对话或没有天数) -->
+          <el-link 
+            type="primary"
+            class="el-icon-plus"
+            :underline="false"
+            @click='addDay()'
+            v-if="formType != 3 && (form.sendType != 4 || days.length < 1)"
+          >
+            添加天数
+          </el-link>
+
+          <!-- 操作条件：不为新客对话且表单类型属于查看 -->
+          <el-link 
+            type="primary"
+            class="el-icon-sort"
+            :underline="false"
+            @click='openUpdateDaySorts()'
+            style="margin-left: 20px"
+            v-if="form.sendType != 4 && formType != 3"
+          >
+            修改天数排序
+          </el-link>
+
+          <!-- 操作条件：不为新客对话且表单类型属于查看 -->
+          <el-link 
+            type="primary"
+            class="el-icon-sort"
+            :underline="false"
+            @click='openUpdateSorts()'
+            style="margin-left: 20px"
+            v-if="form.sendType != 4 && formType != 3"
+          >
+            修改规则排序
+          </el-link>
+
+          <!-- 具体规则维护 -->
+          <el-tabs 
+            v-model="tabIndex"
+            type="card"
+            @tab-remove="delDay"
+            v-if="days && days.length > 0"
+            :before-leave="leave"
+            @tab-click="tabClick"
+          >
+            <el-tab-pane 
+              v-for="(item, dayIndex) in days"
+              :closable="formType != 3"
+              :key="dayIndex"
+              :name="dayIndex + ''"
+            >
+              <el-badge 
+                slot="label"
+                :is-dot="!item.id"
+                class="item"
+                style="display: inline-block"
+              >
+                <span>{{ '第' + item.dayNum + '天' }}</span>
+              </el-badge>
+
+              <el-row v-loading="loading">
+                <el-col :span="22">
+                  <div
+                    style="
+                      background-color: #fbfbfb;
+                      padding: 15px;
+                      border: 1px solid #e6e6e6;
+                      margin-bottom: 20px;
+                    "
+                  >
+                    <el-form 
+                      :model="item"
+                      label-width="80px"
+                    >
+                      <el-form-item label="内容名称"
+                        v-if="form.sendType != 4"
+                        style="height: 50px;"
+                      >
+                        <el-input 
+                          :disabled="formType == 3"
+                          v-model="item.name"
+                          placeholder="内容名称,仅内部可见"
+                        />
+                      </el-form-item>
+
+                      <!-- 具体规则 -->
+                      <el-form-item label="规则">
+                        <div 
+                          v-for="(ruleItem, ruleIndex) in item.rules"
+                          :key="ruleIndex"
+                          style="
+                            background-color: #fdfdfd;
+                            padding: 15px;
+                            border: 1px solid #e6e6e6;
+                            margin-bottom: 20px;
+                          "
+                        >
+                          <el-row>
+                            <el-col
+                              :span="22"
+                            >
+                              <el-form
+                                :model="ruleItem"
+                                label-width="70px"
+                              >
+                                <!-- 第一天 -->
+                                <div v-if="item.dayNum == 1">
+                                  <el-form-item 
+                                    label="时间"
+                                  >
+                                    <el-time-picker
+                                      :disabled="formType == 3"
+                                      class="custom-input"
+                                      v-model="ruleItem.time"
+                                      value-format="HH:mm"
+                                      format="HH:mm"
+                                      :picker-options="{ selectableRange: ['01:00:00 - 01:30:00','05:00:00 - 23:59:59'] }"
+                                      placeholder="时间"
+                                      style="width: 100px;height: 20px;"
+                                    />
+                                  </el-form-item>
+                                </div>
+
+                                <!-- 其他天 -->
+                                <div v-else>
+                                  <el-form-item 
+                                    label="时间"
+                                  >
+                                    <el-time-picker
+                                      :disabled="formType == 3"
+                                      class="custom-input"
+                                      v-model="ruleItem.time"
+                                      value-format="HH:mm"
+                                      format="HH:mm"
+                                      :picker-options="{ selectableRange: ['00:01:00 - 00:30:00','05:00:00 - 23:59:59']}"
+                                      placeholder="时间"
+                                      style="width: 100px;height: 20px;"
+                                    />
+                                  </el-form-item>
+                                </div>
+
+                                <!-- 填写条件：第一条，且消息类型为科普 -->
+                                <el-form-item label="官方群发"
+                                  v-if="ruleIndex == 0 && ruleItem.type == 2"
+                                >
+                                  <el-switch
+                                    v-model="ruleItem.isOfficial"
+                                    active-color="#13ce66"
+                                    inactive-color="#DCDFE6"
+                                    :active-value="ruleIndex === 0 ? 1 : 0"
+                                    :inactive-value="0"
+                                    @change="isOfficialChange(ruleItem)"
+                                    :disabled="ruleIndex !== 0"
+                                  >
+                                  </el-switch>
+                                  <div 
+                                    style="
+                                      color: #999;
+                                      font-size: 14px;
+                                      display: flex;
+                                      align-items: center;
+                                      margin-bottom: 5px
+                                    "
+                                  >
+                                    <i class="el-icon-info"></i>
+                                      请注意：官方群发 【第1天】 只能设置1点-1点30 的时间，【其他天数时间】 只能设置0点-0点30。此处仅为生成发送记录时间！<!-- 实际发送可由 客服在公司规定的【暂早上7点】，在企业微信的【群发助手】处点击发送 -->
+                                  </div>
+                                </el-form-item>
+
+                                <!-- 禁用条件：操作为查看或内容为官方群发 -->
+                                <el-form-item label="消息类别">
+                                  <el-radio-group 
+                                    v-model="ruleItem.type"
+                                    :disabled="formType == 3 || ruleItem.isOfficial == '1'"
+                                  >
+                                    <div>
+                                      <el-radio
+                                        v-for="dict in msgTypeOptions" 
+                                        :key="dict.dictValue"
+                                        :label="Number(dict.dictValue)"
+                                      >
+                                        {{ dict.dictLabel }}
+                                      </el-radio>
+                                    </div>
+                                  </el-radio-group>
+                                </el-form-item>
+
+                                <el-form-item label="科普"
+                                  v-if="ruleItem.type == 2"
+                                  required
+                                >
+                                  <!-- 禁用条件：操作类型为查看 -->
+                                  <el-select 
+                                    :disabled="formType == 3"
+                                    v-model="ruleItem.courseId"
+                                    placeholder="默认50条，可输入关键字检索"
+                                    style=" margin-right: 10px; width: 230px;"
+                                    size="mini"
+                                    filterable
+                                    clearable
+                                    :loading="ruleItem.courseLoading"
+                                    remote
+                                    :remote-method="(keyword) => handleCourseRemoteSearch(keyword, ruleItem)"
+                                    @change="courseChangeUpdate(ruleItem, dayIndex, ruleIndex)"
+                                  >
+                                    <el-option
+                                      v-for="dict in (ruleItem.meta && ruleItem.meta.courseList ? ruleItem.meta.courseList : [])"
+                                      :key="dict.dictValue"
+                                      :label="dict.dictLabel"
+                                      :value="parseInt(dict.dictValue)"
+                                    />
+                                  </el-select>
+
+                                  <el-select 
+                                    :disabled="formType == 3"
+                                    v-model="ruleItem.videoId"
+                                    placeholder="请选择小节"
+                                    size="mini"
+                                    style=" margin-right: 10px;"
+                                    filterable
+                                    clearable
+                                    @change="videoIdChange(ruleItem, dayIndex, ruleIndex)"
+                                  >
+                                    <el-option
+                                      v-for="dict in (ruleItem.meta && ruleItem.meta.videoList ? ruleItem.meta.videoList : [])"
+                                      :key="dict.dictValue"
+                                      :label="dict.dictLabel"
+                                      :value="parseInt(dict.dictValue)"
+                                    >
+                                      <div :style="{ color: dict.isPause == 1 ? '#f56c6c' : 'inherit', display: 'flex', alignItems: 'center' }">
+                                        <span>{{ dict.dictLabel }}</span>
+                                        <span v-if="dict.isPause == 1" style="font-size: 12px; margin-left: 8px; color: #f56c6c;">
+                                            (该科普已被关闭，无法正常发送)
+                                        </span>
+                                      </div>
+                                    </el-option>
+                                  </el-select>
+
+                                  <!-- 禁用条件：操作类型为查看 -->
+                                  <!-- 渲染条件：消息类型不为AI触达 -->
+                                  <el-select 
+                                    :disabled="formType == 3"
+                                    v-model="ruleItem.courseType"
+                                    placeholder="请选择消息类型"
+                                    size="mini"
+                                    style=" margin-right: 10px;"
+                                    v-if="ruleItem.type != 4 "
+                                  >
+                                    <el-option
+                                      v-for="dict in sysFsSopWatchStatus"
+                                      :key="dict.dictValue"
+                                      :label="dict.dictLabel"
+                                      :value="Number(dict.dictValue)"
+                                    />
+                                  </el-select>
+
+                                </el-form-item>
+
+                                <!-- 科普相关填写项 -->
+                                <div v-if="ruleItem.type == 2"
+                                  v-for="(content, contentIndex) in ruleItem.setting"
+                                  :key="contentIndex"
+                                  style="
+                                    background-color: #fdfdfd;
+                                    border: 1px solid #e6e6e6;
+                                    margin-bottom: 20px;
+                                  "
+                                >
+                                  <el-row style="padding-bottom: 20px">
+                                    <el-col :span="22">
+                                      <el-form 
+                                        :model="content"
+                                        label-width="100px"
+                                      >
+                                        <el-form-item label="内容类别"
+                                          style="margin: 2%"
+                                        >
+                                        
+                                          <div v-if="form.sendType == 2">
+                                            <el-radio-group 
+                                              v-model="content.contentType"
+                                              :disabled="formType == 3"
+                                              @change="handleContentTypeChange(ruleItem)"
+                                            >
+                                              <el-radio
+                                                :key="item.dictValue"
+                                                :label="item.dictValue"
+                                                :disabled="(ruleItem.type != 2  && [9].includes(Number(item.dictValue)) 
+                                                || (ruleItem.isOfficial == 1 && [6, 9, 12].includes(Number(item.dictValue))))"
+                                                v-for="item in sysQwSopAiContentType"
+                                              >{{ item.dictLabel }}
+                                              </el-radio>
+                                            </el-radio-group>
+                                          </div>
+
+                                        </el-form-item>
+
+                                        <!-- 科普 -->
+                                        <el-form-item label="内容" v-if="content.contentType == 9">
+                                          <div>
+                                            <el-card class="box-card">
+                                              <el-form-item 
+                                                label="链接标题:"
+                                                label-width="100px"
+                                                required
+                                              >
+                                                <el-input 
+                                                  :disabled="formType == 3"
+                                                  v-model="content.linkTitle"
+                                                  placeholder="请输入链接标题"
+                                                  style="width: 90%;"
+                                                />
+                                              </el-form-item>
+                                              <el-form-item 
+                                                label="链接描述:"
+                                                label-width="100px"
+                                                required
+                                              >
+                                                <el-input 
+                                                  :disabled="formType == 3"
+                                                  type="textarea"
+                                                  :rows="3"
+                                                  v-model="content.linkDescribe"
+                                                  placeholder="请输入链接描述"
+                                                  style="width: 90%;margin-top: 1%;"
+                                                />
+                                              </el-form-item>
+                                              <el-form-item 
+                                                label="链接封面:"
+                                                label-width="100px"
+                                                required
+                                              >
+                                                <ImageUpload 
+                                                  :disabled="formType == 3"
+                                                  v-model="content.linkImageUrl"
+                                                  type="image"
+                                                  :num="1"
+                                                  :file-size="1"
+                                                  :width="150"
+                                                  :height="150"
+                                                  style="margin-top: 1%;"
+                                                />
+                                              </el-form-item>
+                                              <div v-if="ruleItem.type != 2 " style="margin-top: 1%">
+                                                <el-form-item 
+                                                  label="链接地址:"
+                                                  label-width="100px"
+                                                  required
+                                                >
+                                                  <el-input 
+                                                    :disabled="formType == 3"
+                                                    v-model="content.linkUrl"
+                                                    placeholder="请输入链接地址"
+                                                    style="width: 90%;"
+                                                  />
+                                                </el-form-item>
+                                              </div>
+                                              <div v-if="ruleItem.type == 2 ">
+                                                <el-form-item 
+                                                  label="链接地址:"
+                                                  label-width="100px"
+                                                >
+                                                  <el-tag 
+                                                    type="warning"
+                                                    v-model="content.isBindUrl = 1 "
+                                                  >选择的科普小节
+                                                    即为卡片链接地址
+                                                  </el-tag>
+                                                </el-form-item>
+                                              </div>
+                                              <el-form-item label="课节过期时间">
+                                                <el-row>
+                                                  <el-input 
+                                                    type="number"
+                                                    v-model="content.expiresDays"
+                                                    style="width: 200px"
+                                                  >
+                                                    <template slot="append">天</template>
+                                                  </el-input>
+                                                </el-row>
+                                                <el-row>
+                                                  <span class="tip">填写0或不填时，默认为系统配置的默认时间</span>
+                                                </el-row>
+                                              </el-form-item>
+                                            </el-card>
+                                          </div>
+                                        </el-form-item>
+
+                                        <!-- 文本 -->
+                                        <el-form-item label="内容" v-else-if="content.contentType == 11">
+                                          <div
+                                            style="
+                                              color: #999;
+                                              font-size: 14px;
+                                              display: flex;
+                                              align-items: center;
+                                            "
+                                          >
+                                            <i class="el-icon-info"></i>
+                                            多语句分割符：|&| 例如：'语句1|&|语句2'
+                                          </div>
+                                          <el-input 
+                                            :disabled="formType == 3"
+                                            v-model="content.value"
+                                            type="textarea"
+                                            :rows="3"
+                                            placeholder="内容"
+                                            style="width: 90%;margin-top: 10px;"
+                                            @keydown.native="handleKeydown($event, dayIndex, ruleIndex, contentIndex)"
+                                            :ref="`textarea-${dayIndex}-${ruleIndex}-${contentIndex}`"
+                                          />
+                                          <!-- 修改按钮部分 -->
+                                          <el-link
+                                            type="primary"
+                                            @click="toggleSalesCall(dayIndex, ruleIndex, contentIndex)"
+                                            style="margin-top: 10px;"
+                                            >
+                                              {{ content.isSalesCallAdded ? '移除#客服称呼#' : '添加#客服称呼#' }}
+                                          </el-link>
+                                          <el-link
+                                            type="primary"
+                                            style="margin-top: 10px;margin-left:10px"
+                                            @click="showOpenContent(dayIndex, ruleIndex, contentIndex)"
+                                          >
+                                            查看分割内容
+                                          </el-link>
+                                          <el-link
+                                            type="primary"
+                                            style="margin-top: 10px;margin-left:10px"
+                                            @click="cppySpliter()"
+                                          >
+                                            复制分隔符
+                                          </el-link>
+                                        </el-form-item>
+
+                                        <!-- 语音 -->
+                                        <el-form-item label="内容" v-else-if="content.contentType == 12">
+                                          <div>
+                                            <el-input
+                                              :disabled="formType == 3"
+                                              v-model="content.value"
+                                              type="textarea"
+                                              :rows="3"
+                                              maxlength="66"
+                                              show-word-limit
+                                              placeholder="输入要转为语音的内容"
+                                              style="width: 90%;margin-top: 10px;"
+                                              @input="handleInputVideoText(content.value, content)"
+                                            />
+                                          </div>
+                                        </el-form-item>
+
+                                        <!-- 图片 -->
+                                        <el-form-item label="内容" v-else-if="content.contentType == 2">
+                                          <ImageUpload 
+                                            :disabled="formType == 3"
+                                            v-model="content.imgUrl"
+                                            type="image"
+                                            :num="1"
+                                            :width="150"
+                                            :height="150"
+                                          />
+                                        </el-form-item>
+
+                                        <!-- 视频 -->
+                                        <el-form-item label="内容" v-else-if="content.contentType == 6">
+                                          <div>
+                                            <el-upload
+                                              :disabled="formType == 3"
+                                              v-model="content.videoUrl"
+                                              class="avatar-uploader"
+                                              :action="uploadUrl"
+                                              :show-file-list="false"
+                                              :on-success="(res, file) => handleAvatarSuccessVideo(res, file, content)"
+                                              :before-upload="beforeAvatarUploadVideo"
+                                            >
+                                              <i class="el-icon-plus avatar-uploader-icon"></i>
+                                            </el-upload>
+                                            <video 
+                                              v-if="content.videoUrl"
+                                              :src="content.videoUrl"
+                                              controls
+                                              style="width: 200px;height: 100px"
+                                            >
+                                            </video>
+                                          </div>
+                                        </el-form-item>
+
+                                        <!-- 疗法 -->
+                                        <el-form-item label="内容" v-else-if="content.contentType == 20">
+                                          
+                                          <el-card class="box-card">
+                                            <el-form-item 
+                                              label="选择疗法:"
+                                              label-width="100px"
+                                              required
+                                            >
+                                              <el-select
+                                                :disabled="formType == 3"
+                                                v-model="content.packageId"
+                                                placeholder="默认50条，可输入关键字检索"
+                                                style=" margin-right: 10px; width: 230px;"
+                                                size="mini"
+                                                filterable
+                                                clearable
+                                                :loading="content.meta.pkgLoading"
+                                                remote
+                                                :remote-method="(keyword) => handlePkgRemoteSearch(keyword, content)"
+                                                @change="pkgChangeUpdate(content)"
+                                              >
+                                                <el-option
+                                                  v-for="dict in (content.meta && content.meta.pkgList ? content.meta.pkgList : [])"
+                                                  :key="dict.packageId"
+                                                  :label="`${dict.packageName}(${dict.packageId})`"
+                                                  :value="parseInt(dict.packageId)"
+                                                />
+                                              </el-select>
+                                            </el-form-item>
+                                            <el-form-item 
+                                              label="疗法名称:"
+                                              label-width="100px"
+                                            >
+                                              <el-input
+                                                disabled
+                                                :rows="3"
+                                                v-model="content.packageName"
+                                                style="width: 90%;margin-top: 1%;"
+                                              />
+                                            </el-form-item>
+                                            <el-form-item 
+                                              label="疗法封面:"
+                                              label-width="100px"
+                                            >
+                                              <ImageUpload 
+                                                :disabled="true"
+                                                v-model="content.packageImgUrl"
+                                                type="image"
+                                                :num="1"
+                                                :file-size="1"
+                                                :width="150"
+                                                :height="150"
+                                                style="margin-top: 1%;"
+                                              />
+                                            </el-form-item>
+                                          </el-card>
+
+                                        </el-form-item>
+
+                                        <!-- 直播 -->
+                                        <el-form-item label="内容" v-else-if="content.contentType == 21">
+                                          <div>
+                                            <el-card class="box-card">
+                                              <el-form-item label="直播间"
+                                                required
+                                              >
+                                                <el-select
+                                                  v-model="content.liveId"
+                                                  placeholder="请选择直播间"
+                                                  size="mini"
+                                                  filterable
+                                                  @change="liveChange(content)"
+                                                >
+                                                  <el-option
+                                                    v-for="dict in liveList"
+                                                    :key="dict.liveId"
+                                                    :label="dict.liveName"
+                                                    :value="parseInt(dict.liveId)"
+                                                  />
+                                                </el-select>
+                                              </el-form-item>
+                                              <el-form-item label="标题"
+                                                prop="liveTitle"
+                                                style="margin-bottom: 5px;"
+                                              >
+                                                <el-input
+                                                  v-model="content.liveTitle"
+                                                  placeholder="请输入消息标题，最长为64字节"
+                                                  :rows="2"
+                                                  maxlength="64"
+                                                  type="textarea"
+                                                  disabled
+                                                  @input="checkByteLength(content.contentType, 'liveTitle')"
+                                                />
+                                              </el-form-item>
+                                              <el-form-item label="封面"
+                                                prop="liveImgUrl"
+                                              >
+                                                <ImageUpload
+                                                  v-model="content.liveImgUrl"
+                                                  type="image"
+                                                  :num="10"
+                                                  :width="150"
+                                                  :height="150"
+                                                  disabled
+                                                />
+                                              </el-form-item>
+                                            </el-card>
+                                          </div>
+                                        </el-form-item>
+
+                                        <!-- 民品 -->
+                                        <el-form-item label="内容" v-else-if="22 == content.contentType">
+                                          <div>
+                                            <el-card class="box-card">
+                                              <el-form-item 
+                                                label="选择民品:"
+                                                label-width="100px"
+                                                required
+                                              >
+                                                <el-select
+                                                  v-model="content.productId"
+                                                  placeholder="默认50条，可输入关键字检索"
+                                                  style=" margin-right: 10px; width: 230px;"
+                                                  size="mini"
+                                                  filterable
+                                                  clearable
+                                                  :loading="content.meta.productLoading"
+                                                  remote
+                                                  :remote-method="(keyword) => handleProductRemoteSearch(keyword, content)"
+                                                  @change="productChangeUpdate(content)"
+                                                >
+                                                  <el-option
+                                                    v-for="dict in (content.meta && content.meta.productList ? content.meta.productList : [])"
+                                                    :key="dict.productId"
+                                                    :label="`${dict.productName}(${dict.productId})`"
+                                                    :value="parseInt(dict.productId)"
+                                                  />
+                                                </el-select>
+                                              </el-form-item>
+                                              <el-form-item 
+                                                label="民品名称:"
+                                                label-width="100px"
+                                              >
+                                                <el-input
+                                                  disabled
+                                                  :rows="3"
+                                                  v-model="content.productName"
+                                                  style="width: 90%;margin-top: 1%;"
+                                                />
+                                              </el-form-item>
+                                              <el-form-item 
+                                                label="民品封面:"
+                                                label-width="100px"
+                                              >
+                                                <ImageUpload 
+                                                  :disabled="true"
+                                                  v-model="content.productImgUrl"
+                                                  type="image"
+                                                  :num="1"
+                                                  :file-size="1"
+                                                  :width="150"
+                                                  :height="150"
+                                                  style="margin-top: 1%;"
+                                                />
+                                              </el-form-item>
+                                            </el-card>
+                                          </div>
+                                        </el-form-item>
+
+                                        <!-- 药品 -->
+                                        <el-form-item label="内容" v-else-if="23 == content.contentType">
+                                          <div>
+                                            <el-card class="box-card">
+                                              <el-form-item 
+                                                label="选择药品:"
+                                                label-width="100px"
+                                                required
+                                              >
+                                                <el-select
+                                                  v-model="content.medicinesId"
+                                                  placeholder="默认50条，可输入关键字检索"
+                                                  style=" margin-right: 10px; width: 230px;"
+                                                  size="mini"
+                                                  filterable
+                                                  clearable
+                                                  :loading="content.meta.medicinesLoading"
+                                                  remote
+                                                  :remote-method="(keyword) => handleMedicinesRemoteSearch(keyword, content)"
+                                                  @change="medicinesChangeUpdate(content)"
+                                                >
+                                                  <el-option
+                                                    v-for="dict in (content.meta && content.meta.medicinesList ? content.meta.medicinesList : [])"
+                                                    :key="dict.productId"
+                                                    :label="`${dict.productName}(${dict.productId})`"
+                                                    :value="parseInt(dict.productId)"
+                                                  />
+                                                </el-select>
+                                              </el-form-item>
+                                              <el-form-item 
+                                                label="药品名称:"
+                                                label-width="100px"
+                                              >
+                                                <el-input
+                                                  disabled
+                                                  :rows="3"
+                                                  v-model="content.medicinesName"
+                                                  style="width: 90%;margin-top: 1%;"
+                                                />
+                                              </el-form-item>
+                                              <el-form-item 
+                                                label="药品封面:"
+                                                label-width="100px"
+                                              >
+                                                <ImageUpload 
+                                                  :disabled="true"
+                                                  v-model="content.medicinesImgUrl"
+                                                  type="image"
+                                                  :num="1"
+                                                  :file-size="1"
+                                                  :width="150"
+                                                  :height="150"
+                                                  style="margin-top: 1%;"
+                                                />
+                                              </el-form-item>
+                                            </el-card>
+                                          </div>
+                                        </el-form-item>
+
+                                        <!-- 短视频 -->
+                                        <el-form-item label="内容" v-else-if="24 == content.contentType">
+                                          <div>
+                                            <el-card class="box-card">
+                                              <el-form-item 
+                                                label="选择短视频:"
+                                                label-width="100px"
+                                                required
+                                              >
+                                                <el-select
+                                                  v-model="content.shortVideoId"
+                                                  placeholder="默认50条，可输入关键字检索"
+                                                  style=" margin-right: 10px; width: 230px;"
+                                                  size="mini"
+                                                  filterable
+                                                  clearable
+                                                  :loading="content.meta.shortVideoLoading"
+                                                  remote
+                                                  :remote-method="(keyword) => handleShortVideoRemoteSearch(keyword, content)"
+                                                  @change="shortVideoChangeUpdate(content)"
+                                                >
+                                                  <el-option
+                                                    v-for="dict in (content.meta && content.meta.shortVideoList ? content.meta.shortVideoList : [])"
+                                                    :key="dict.videoId"
+                                                    :label="`${dict.title}(${dict.videoId})`"
+                                                    :value="parseInt(dict.videoId)"
+                                                  />
+                                                </el-select>
+                                              </el-form-item>
+                                              <el-form-item 
+                                                label="短视频名称:"
+                                                label-width="100px"
+                                              >
+                                                <el-input
+                                                  disabled
+                                                  :rows="3"
+                                                  v-model="content.shortVideoName"
+                                                  style="width: 90%;margin-top: 1%;"
+                                                />
+                                              </el-form-item>
+                                              <el-form-item 
+                                                label="短视频封面:"
+                                                label-width="100px"
+                                              >
+                                                <ImageUpload 
+                                                  :disabled="true"
+                                                  v-model="content.shortVideoImgUrl"
+                                                  type="image"
+                                                  :num="1"
+                                                  :file-size="1"
+                                                  :width="150"
+                                                  :height="150"
+                                                  style="margin-top: 1%;"
+                                                />
+                                              </el-form-item>
+                                            </el-card>
+                                          </div>
+                                        </el-form-item>
+
+                                        <!-- 文章 -->
+                                        <el-form-item label="内容" v-else-if="25 == content.contentType">
+                                          <div>
+                                            <el-card class="box-card">
+                                              <el-form-item 
+                                                label="选择文章:"
+                                                label-width="100px"
+                                                required
+                                              >
+                                                <el-select
+                                                  v-model="content.articleId"
+                                                  placeholder="默认50条，可输入关键字检索"
+                                                  style=" margin-right: 10px; width: 230px;"
+                                                  size="mini"
+                                                  filterable
+                                                  clearable
+                                                  :loading="content.meta.articleLoading"
+                                                  remote
+                                                  :remote-method="(keyword) => handleArticleRemoteSearch(keyword, content)"
+                                                  @change="articleChangeUpdate(content)"
+                                                >
+                                                  <el-option
+                                                    v-for="dict in (content.meta && content.meta.articleList ? content.meta.articleList : [])"
+                                                    :key="dict.articleId"
+                                                    :label="`${dict.title}(${dict.articleId})`"
+                                                    :value="parseInt(dict.articleId)"
+                                                  />
+                                                </el-select>
+                                              </el-form-item>
+                                              <el-form-item 
+                                                label="文章名称:"
+                                                label-width="100px"
+                                              >
+                                                <el-input
+                                                  disabled
+                                                  :rows="3"
+                                                  v-model="content.articleName"
+                                                  style="width: 90%;margin-top: 1%;"
+                                                />
+                                              </el-form-item>
+                                              <el-form-item 
+                                                label="文章封面:"
+                                                label-width="100px"
+                                              >
+                                                <ImageUpload 
+                                                  :disabled="true"
+                                                  v-model="content.articleImgUrl"
+                                                  type="image"
+                                                  :num="1"
+                                                  :file-size="1"
+                                                  :width="150"
+                                                  :height="150"
+                                                  style="margin-top: 1%;"
+                                                />
+                                              </el-form-item>
+                                            </el-card>
+                                          </div>
+                                        </el-form-item>
+
+                                        <!-- 公开课 -->
+                                        <el-form-item label="内容" v-else-if="26 == content.contentType">
+                                          <div>
+                                            <el-card class="box-card">
+                                              <el-form-item 
+                                                label="选择公开课:"
+                                                label-width="100px"
+                                                required
+                                              >
+                                                <el-select
+                                                  v-model="content.openClassVideoId"
+                                                  placeholder="默认50条，可输入关键字检索"
+                                                  style=" margin-right: 10px; width: 230px;"
+                                                  size="mini"
+                                                  filterable
+                                                  clearable
+                                                  :loading="content.meta.openClassVideoLoading"
+                                                  remote
+                                                  :remote-method="(keyword) => handleOpenClassVideoRemoteSearch(keyword, content)"
+                                                  @change="openClassVideoChangeUpdate(content)"
+                                                >
+                                                  <el-option
+                                                    v-for="dict in (content.meta && content.meta.openClassVideoList ? content.meta.openClassVideoList : [])"
+                                                    :key="dict.videoId"
+                                                    :label="`${dict.title}(${dict.videoId})`"
+                                                    :value="parseInt(dict.videoId)"
+                                                  />
+                                                </el-select>
+                                              </el-form-item>
+                                              <el-form-item 
+                                                label="公开课名称:"
+                                                label-width="100px"
+                                              >
+                                                <el-input
+                                                  disabled
+                                                  :rows="3"
+                                                  v-model="content.openClassVideoName"
+                                                  style="width: 90%;margin-top: 1%;"
+                                                />
+                                              </el-form-item>
+                                              <el-form-item 
+                                                label="公开课封面:"
+                                                label-width="100px"
+                                              >
+                                                <ImageUpload 
+                                                  :disabled="true"
+                                                  v-model="content.openClassVideoImgUrl"
+                                                  type="image"
+                                                  :num="1"
+                                                  :file-size="1"
+                                                  :width="150"
+                                                  :height="150"
+                                                  style="margin-top: 1%;"
+                                                />
+                                              </el-form-item>
+                                            </el-card>
+                                          </div>
+                                        </el-form-item>
+
+                                      </el-form>
+
+                                    </el-col>
+
+                                    <el-col 
+                                      :span="1"
+                                      :offset="1"
+                                    >
+                                      <!-- 删除内容节点 -->
+                                      <i 
+                                        class="el-icon-delete"
+                                        @click="delContentNode(dayIndex, ruleIndex, contentIndex)"
+                                        style="margin-top: 20px;"
+                                        v-if="ruleItem.setting.length > 1 && (formType != 3)"
+                                      ></i>
+                                    </el-col>
+                                  </el-row>
+                                </div>
+
+                                <!-- 改状态 -->
+                                <div v-if="ruleItem.type == 5"
+                                  style="
+                                    background-color: #fdfdfd;
+                                    border: 1px solid #e6e6e6;
+                                    margin-bottom: 20px;
+                                    padding: 8px;
+                                  "
+                                >
+
+                                  <el-form-item label="添加标签" style="padding: 5px;">
+                                    <div>
+                                      <el-button size="medium" icon="el-icon-circle-plus-outline" plain
+                                        @click="openTagPage(ruleItem, 0)">添加标签</el-button>
+                                    </div>
+                                    <div style="padding-left: 5px;">
+                                      <el-tag style="margin-left: 5px" size="medium" :key="s.id" v-for="s in ruleItem.addTag" closable
+                                        :disable-transitions="false" @close="handleCloseTag(ruleItem, 0, s)">
+                                        <span>{{ s.name }}</span>
+                                      </el-tag>
+                                    </div>
+                                  </el-form-item>
+
+                                  <el-form-item label="移除标签" style="padding: 5px;">
+                                    <div>
+                                      <el-button size="medium" icon="el-icon-circle-plus-outline" plain
+                                        @click="openTagPage(ruleItem, 1)">移除标签</el-button>
+                                    </div>
+                                    <div style="padding-left: 5px;">
+                                      <el-tag style="margin-left: 5px" size="medium" :key="s.id" v-for="s in ruleItem.delTag" closable
+                                        :disable-transitions="false" @close="handleCloseTag(ruleItem, 1, s)">
+                                        <span>{{ s.name }}</span>
+                                      </el-tag>
+                                    </div>
+
+                                  </el-form-item>
+
+                                  <el-form-item label="绑定客服" style="padding: 5px;">
+                                    <div>
+                                      <el-button size="medium" icon="el-icon-circle-plus-outline" plain
+                                        @click="openCustomerPage(ruleItem, 0)">绑定客服</el-button>
+                                    </div>
+                                    <div style="padding-left: 5px;">
+                                      <el-tag style="margin-left: 5px" size="medium" :key="s.id" v-for="s in ruleItem.addCustomer" closable
+                                        :disable-transitions="false" @close="handleCloseCustomer(ruleItem, 0, s)">
+                                        <span>{{ s.roleName }}</span>
+                                      </el-tag>
+                                    </div>
+                                  </el-form-item>
+
+                                  <el-form-item label="解绑客服" style="padding: 5px;">
+                                    <div>
+                                      <el-button size="medium" icon="el-icon-circle-plus-outline" plain
+                                        @click="openCustomerPage(ruleItem, 1)">解绑客服</el-button>
+                                    </div>
+                                    <div style="padding-left: 5px;">
+                                      <el-tag style="margin-left: 5px" size="medium" :key="s.id" v-for="s in ruleItem.delCustomer" closable
+                                        :disable-transitions="false" @close="handleCloseCustomer(ruleItem, 1, s)">
+                                        <span>{{ s.roleName }}</span>
+                                      </el-tag>
+                                    </div>
+                                  </el-form-item>
+
+                                </div>
+                                
+                                <!-- 添加内容节点 -->
+                                <el-link 
+                                  type="primary"
+                                  class="el-icon-plus"
+                                  :underline="false"
+                                  @click='addContentNode(ruleItem)'
+                                  v-if="formType != 3 && [2].includes(Number(ruleItem.type))"
+                                >添加内容
+                                </el-link>
+
+                              </el-form>
+                            </el-col>
+
+                            <el-col 
+                              :span="1"
+                              :offset="1"
+                            >
+                              <i 
+                                class="el-icon-delete"
+                                @click="delRuleNode(dayIndex, ruleIndex)"
+                                style="margin-top: 20px;"
+                                v-if="item.rules.length > 1 && formType != 3"
+                              ></i>
+                            </el-col>
+                          </el-row>
+                        </div>
+
+                        <!-- 操作为非查看，且模板类型不为 新客对话和群聊则可以添加规则 -->
+                        <el-link 
+                          type="primary"
+                          class="el-icon-plus"
+                          :underline="false"
+                          @click='addRuleNode(dayIndex)'
+                          v-if="formType != 3 && form.sendType != 4 && form.sendType != 5"
+                        >
+                          添加规则
+                        </el-link>
+                      </el-form-item>
+                    </el-form>
+
+                  </div>
+
+                  <!-- 操作为非查看 -->
+                  <div
+                    v-if="formType != 3"
+                    style="float: right;" 
+                  >
+                    <el-button 
+                      type="primary"
+                      @click="saveDay"
+                      v-if="!item.voice || item.voice == 0"
+                    >
+                      保存（{{ '第' + (1 + (form.gap * dayIndex)) + '天' }}）
+                    </el-button>
+                    <el-button 
+                      type="primary"
+                      disabled
+                      v-if="item.voice == 1"
+                    >
+                      语言生成中
+                    </el-button>
+                    <el-button 
+                      type="primary"
+                      @click="leave(tabIndex)"
+                      v-if="item.voice == 1"
+                    >
+                      刷新状态
+                    </el-button>
+                  </div>
+
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+          </el-tabs>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-dialog 
+      title="修改天数排序"
+      :visible.sync="openSort"
+      width="1500px"
+      append-to-body
+    >
+      <draggable 
+        v-model="dayList"
+        @end="onDragEndDay"
+        style="padding: 20px"
+      >
+        <el-button 
+          v-for="(item, dayIndex) in dayList"
+          :class="item.newDay != item.dayNum ? 'red':''"
+        >第{{
+            item.newDay
+          }}天（第{{ item.dayNum }}天）
+        </el-button>
+      </draggable>
+
+      <div style="float: right;" slot="footer">
+        <el-button 
+          type="primary"
+          @click="saveSorts"
+        >保存</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog 
+      title="修改规则排序"
+      :visible.sync="openSort2"
+      width="1500px"
+      append-to-body
+    >
+      <draggable 
+        v-model="ruleList"
+        @end="onDragEnd"
+        style="padding: 20px"
+      >
+        <el-button v-for="(item, ruleIndex) in ruleList">{{ item.time }}</el-button>
+      </draggable>
+
+      <div style="float: right;" slot="footer">
+        <el-button @click="autoSortsRules">自动排序</el-button>
+        <el-button 
+          type="primary"
+          @click="saveSortsRules"
+        >保存</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog 
+      title="查看分割后内容"
+      :visible.sync="openShowContent"
+      width="800px"
+      append-to-body
+    >
+         <el-table
+         stripe
+          :data="contentListData"
+          style="width: 100%"
+         >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="50"
+            >
+            </el-table-column>
+
+          <el-table-column
+            prop="content"
+            label="内容"
+            width="700"
+          >
+             <template #default="{ row }">
+        <div v-html="row.content.replace(/\n/g, '<br>')"></div>
+      </template>
+          </el-table-column>
+        </el-table>
+
+      <div style="float: right;">
+        <el-button 
+          type="primary"
+          @click="comfirmContent"
+        >确定</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 绑定app客服角色 -->
+    <el-dialog title="选择绑定的客服"
+      :visible.sync="customerConfigForBind.visible"
+      width="1300px"
+      append-to-body
+    >
+      <CusRoleList
+        :selected="customerConfigForBind.selected"
+        @confirm="customerConfirmCallForBind"
+        @selectionChange="customerSelectionChangeCallForBind"
+      />
+    </el-dialog>
+
+    <!-- 解绑app客服角色 -->
+    <el-dialog title="选择解绑的客服"
+      :visible.sync="customerConfigForUnbind.visible"
+      width="1300px"
+      append-to-body
+    >
+      <CusRoleList
+        :selected="customerConfigForUnbind.selected"
+        @confirm="customerConfirmCallForUnbind"
+        @selectionChange="customerSelectionChangeCallForUnbind"
+      />
+    </el-dialog>
+
+    <!-- 绑定标签 -->
+    <el-dialog title="选择绑定的标签"
+      :visible.sync="tagConfigForBind.visible"
+      width="1000px"
+      append-to-body
+    >
+      <select-tag
+        :tagSelected="tagConfigForBind.selected"
+        @tagSubmit="tagSubmitForBind"
+        @tagCancel="tagCancelForBind"
+        @tagSelection="tagSelectionChangeCallForBind"
+      />
+    </el-dialog>
+
+    <!-- 解绑标签 -->
+    <el-dialog title="选择解绑的标签"
+      :visible.sync="tagConfigForUnbind.visible"
+      width="1000px"
+      append-to-body
+    >
+      <select-tag
+        :tagSelected="tagConfigForUnbind.selected"
+        @tagSubmit="tagSubmitForUnbind"
+        @tagCancel="tagCancelForUnbind"
+        @tagSelection="tagSelectionChangeCallForUnbind"
+      />
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+import draggable from 'vuedraggable';
+import {
+  listSopTemp,
+  getSopTemp,
+  sortDay,
+  dayListFun,
+  addOrUpdateSetting,
+  selectRulesInfo,
+  delRules
+} from "@/api/app/sop/template";
+import {courseList, videoList} from "@/api/app/course";
+import { getPackageOptions,} from "@/api/app/pkg";
+import { getLiveOptions,} from "@/api/app/live";
+import { listRole } from '@/api/app/user/userList';
+import { getTagByIds } from "@/api/app/tag/tagGroup";
+import ImageUpload from "@/views/qw/sop/ImageUpload";
+import { getMedicinesOptions, } from "@/api/app/medicines";
+import { getProductOptions, } from "@/api/app/product";
+import { getShortVideoOptions, } from "@/api/app/shortVideo";
+import { getArticleOptions } from "@/api/app/article";
+import { getOpenClassVideoOptions, } from "@/api/app/openClassVideo";
+
+import selectTag from "@/views/app/tagGroup/selectTag.vue";
+import CusRoleList from '@/views/app/user/CusRoleList.vue';
+
+export default {
+  name: "UpdateSopTemp",
+  components: { ImageUpload, draggable, selectTag, CusRoleList, },
+  data() {
+    return {
+      uploadUrl: process.env.VUE_APP_BASE_API + "/app/common/uploadOSS2",
+      uploadUrlByVoice: process.env.VUE_APP_BASE_API + "/app/common/uploadOSSByHOOKVoice",
+      //上传语音的遮罩层
+      voiceLoading: false,
+      openSort: false,
+      openSort2: false,
+      openShowContent: false,
+      contentList: [],
+      contentListData: [],
+      // 遮罩层
+      loading: false,
+      loading2: false,
+      loading3: false,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      dayList: [],
+      ruleList: [],
+      ids: [],
+      sysFsSopWatchStatus: [],
+      //插件版
+      sysQwSopAiContentType: [],
+      msgTypeOptions: [],//消息类别选项
+      courseList: [],//默认科普
+      pkgList: [],//默认疗法
+      liveList: [],//默认直播间
+      productList: [],//默认民品列表
+      medicinesList: [],//默认药品列表
+      shortVideoList: [],//默认短视频列表
+      articleList: [],//默认文章列表
+      openClassVideoList: [],//默认公开课列表
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      id: "",
+      total: 0,
+      tabIndex: null,
+      // sop模板天数列表
+      days: [],
+      data: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 状态字典
+      statusOptions: [],
+      videoNumOptions: {
+        title: '选择视频号',
+        open: false,
+        content: null,
+        rulesIndex: null,
+        contentIndex: null,
+      },
+      //1 修改 2 复制 3 查看
+      formType: null,
+      queryParams1: {
+        pageNum: 1,
+        pageSize: 100,
+        dataStatus: '1',
+        name: null,
+        type: null
+      },
+      // 查询参数
+      form: {
+        name: null,
+        setting: null,
+        status: "1",
+        sort: 1,
+        companyId: null,
+        gap: 1,
+      },
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: '名称不能为空', trigger: 'blur' }
+        ],
+        status: [
+          { required: true, message: '状态不能为空', trigger: 'blur' }
+        ],
+        sort: [
+          { required: true, message: '排序不能为空', trigger: 'blur' }
+        ],
+        gap: [
+          { required: true, message: '间隔天数不能为空', trigger: 'blur' }
+        ],
+      },
+      customerConfigForBind: {
+        visible: false,
+        selected: [],
+        currentRuleItem: null,
+      },
+      customerConfigForUnbind: {
+        visible: false,
+        selected: [],
+        currentRuleItem: null,
+      },
+      tagConfigForBind: {
+        visible: false,
+        selected: [],
+        currentRuleItem: null,
+      },
+      tagConfigForUnbind: {
+        visible: false,
+        selected: [],
+        currentRuleItem: null,
+      },
+    };
+  },
+  created() {
+    this.init();
+    //模板id
+    const id = this.$route.params && this.$route.params.id;
+    this.id = id;
+    //表单操作类型，1 修改 2 复制 3 查看
+    this.formType = this.$route.params && this.$route.params.type;
+    this.initTempInfo(id);
+  },
+  methods: {
+    async init() {
+      this.getDicts("app_sop_plugin_settingType").then(response => {
+        this.sysQwSopAiContentType = response.data;
+      });
+      this.getDicts("app_sop_watch_status").then(response => {
+        this.sysFsSopWatchStatus = response.data;
+      });
+      this.getDicts("app_sop_msg_type").then(response => {
+        this.msgTypeOptions = response.data;
+      });
+      this.getDicts("app_normal_disabled_status").then(response => {
+        this.statusOptions = response.data;
+      });
+      const [
+        courseInfo,
+        defaultPkg,
+        defaultLive,
+        defaultProduct,
+        defaultMedicines,
+        defaultShortVideo,
+        defaultArticle,
+        defaultOpenClassVideo,
+      ] = await Promise.all([
+        this.getCourseList(null, null),
+        this.getPkgList(null, null),
+        this.getLiveList(),
+        this.getProductList(null, null),
+        this.getMedicinesList(null, null),
+        this.getShortVideoList(null, null),
+        this.getArticleList(null, null),
+        this.getOpenClassVideoList(null, null),
+      ]);
+      this.courseList = courseInfo.list;
+      this.pkgList = defaultPkg.data;
+      this.liveList = defaultLive.data;
+      this.productList = defaultProduct.data;
+      this.medicinesList = defaultMedicines.data;
+      this.shortVideoList = defaultShortVideo.data;
+      this.articleList = defaultArticle.data;
+      this.openClassVideoList = defaultOpenClassVideo.data;
+    },
+    /**
+     * 获取科普信息
+     */
+    async getCourseList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        selectedId: selectedId,
+        pageNum: 1,
+        pageSize: 50,
+      };
+      return await courseList(data);
+    },
+    /**
+     * 获取疗法信息
+     */
+    async getPkgList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        metaId: selectedId,
+        limit: 50
+      };
+      return await getPackageOptions(data);
+    },
+    /**
+     * 获取直播间下拉
+     */
+    async getLiveList() {
+      return await getLiveOptions();
+    },
+    /**
+     * 获取民品列表
+     * @param keyword 
+     * @param selectedId 
+     */
+    async getProductList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        metaId: selectedId,
+        limit: 50
+      };
+      return await getProductOptions(data);
+    },
+    /**
+     * 获取药品列表
+     * @param keyword 
+     * @param selectedId 
+     */
+    async getMedicinesList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        metaId: selectedId,
+        limit: 50
+      };
+      return await getMedicinesOptions(data);
+    },
+    /**
+     * 获取短视频列表
+     * @param keyword 
+     * @param selectedId 
+     */
+    async getShortVideoList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        metaId: selectedId,
+        limit: 50
+      };
+      return await getShortVideoOptions(data);
+    },
+    /**
+     * 获取文章列表
+     * @param keyword 
+     * @param selectedId 
+     */
+    async getArticleList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        metaId: selectedId,
+        limit: 50
+      };
+      return await getArticleOptions(data);
+    },
+    /**
+     * 获取公开课列表
+     * @param keyword 
+     * @param selectedId 
+     */
+    async getOpenClassVideoList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        metaId: selectedId,
+        limit: 50
+      };
+      return await getOpenClassVideoOptions(data);
+    },
+    /**
+     * 处理输入值不为5的倍数
+     * @param content 
+     */
+    handleIntervalTimeInput(content) {
+      // 确保输入值为5的倍数
+      if (content.intervalTime % 5 !== 0) {
+        // 四舍五入到最近的5的倍数
+        content.intervalTime = Math.round(content.intervalTime / 5) * 5;
+      }
+    },
+    /**
+     * 检查字节长度
+     * @param content 
+     * @param key 
+     */
+    checkByteLength(content, key) {
+      let cont = content[key];
+      if (cont) {
+        const byteLength = this.getByteLength(cont); // 获取当前字节数
+        // 如果字节数超过64，截断输入内容
+        if (byteLength > 64) {
+          this.$set(content, key, this.truncateTextByByteLength(cont, 60));
+        }
+      }
+    },
+    // 计算字符串的字节数
+    getByteLength(text) {
+      return new Blob([text]).size; // 使用 Blob 计算字节数
+    },
+    // 根据字节数截断字符串
+    truncateTextByByteLength(text, maxByteLength) {
+      let byteLength = 0;
+      let result = "";
+
+      for (let i = 0; i < text.length; i++) {
+        const char = text[i];
+        const charByteLength = this.getByteLength(char); // 获取当前字符的字节数
+
+        // 如果加上当前字符的字节数后不超过限制，则添加到结果中
+        if (byteLength + charByteLength <= maxByteLength) {
+          result += char;
+          byteLength += charByteLength;
+        } else {
+          break; // 超过限制时停止
+        }
+      }
+      return result;
+    },
+    /**
+     * 保存排序
+     */
+    saveSorts() {
+      let list = this.dayList.filter(e => e.dayNum != e.newDay).map(e => {
+        return { dayNum: e.newDay, id: e.id }
+      })
+      this.loading3 = true;
+      if (!list || list.length == 0) {
+        this.$message.closeAll();
+        return this.msgError('请修改排序！');
+      }
+      sortDay(list).then(e => {
+        window.location.reload();
+      })
+    },
+    /**
+     * 
+     */
+    saveSortsRules() {
+      this.$set(this.days[this.tabIndex], 'rules', this.ruleList);
+      this.openSort2 = false;
+    },
+    /**
+     * 自动排序
+     */
+    autoSortsRules() {
+      this.ruleList = this.ruleList.sort((a, b) => {
+        // 将 time 字段转换为 Date 对象进行比较
+        const timeA = new Date(`1970-01-01T${a.time}Z`);
+        const timeB = new Date(`1970-01-01T${b.time}Z`);
+
+        // 比较时间顺序
+        return timeA - timeB; // 升序排序
+      });
+    },
+    openUpdateDaySorts() {
+      dayListFun(this.id).then(response => {
+        response.data.forEach((item) => item.newDay = item.dayNum);
+        this.dayList = response.data;
+        if (this.dayList == null || this.dayList.length == 0) {
+          this.$message.error("暂无天数")
+        } else {
+          this.openSort = true;
+        }
+      })
+    },
+    openUpdateSorts() {
+      this.ruleList = JSON.parse(JSON.stringify(this.days[this.tabIndex].rules));
+      if (this.ruleList == null || this.ruleList.length == 0) {
+        this.$message.error("暂无规则")
+      } else {
+        this.openSort2 = true;
+      }
+    },
+    onDragEndDay() {
+      this.dayList.forEach((item, dayIndex) => {
+        item.newDay = (this.form.gap * dayIndex) + 1;
+      })
+      this.$forceUpdate()
+    },
+    onDragEnd() {
+    },
+    /**
+     * 切换标签保存数据，默认打开会触发一次
+     * @param tabIndex 
+     * @param oldIndex 
+     */
+    async leave(tabIndex, oldIndex) {
+      const newData = this.days[tabIndex];
+      if (newData.dayNum && newData.id) {
+        this.loading = true;
+        let rd = await selectRulesInfo(newData.id);
+        this.$nextTick(async () => {
+          let defaultRule = { 
+            type: 2,//默认消息类别为科普
+            contentType: 1,
+            courseId: null,
+            videoId: null,
+            meta: {
+              courseList: this.courseList,
+              courseLoading: false,
+              videoList: [],
+            },
+            addTag: [],
+            delTag: [],
+            addCustomer: [],
+            delCustomer: [],
+            setting: [{ contentType: '9', value: "", }]//默认是文本
+          }
+          this.$set(this.days, tabIndex, {
+            ...newData,
+            voice: rd.data.voice,
+            rules: rd.data.list || [defaultRule] //为空默认普通消息，内容为文本
+          });
+
+            //遍历当天所有规则
+          for (let j = 0; j < this.days[tabIndex].rules.length; j++) {
+            let ruleItem = this.days[tabIndex].rules[j];
+            //消息类别为科普,动态加载科普下拉
+            if (ruleItem.type == 2) {
+              if (ruleItem.courseId) {
+                //获取科普下拉
+                let cl = await this.getCourseList(null, ruleItem.courseId);
+                //根据科普获取视频小节下拉
+                let vl = await this.getVideoList(ruleItem.courseId);
+                this.$set(ruleItem, 'meta', {
+                  courseList: cl.list,
+                  courseLoading: false,
+                  videoList: vl.list,
+                });
+              }
+              //初始遍历当前规则的所有内容
+              for (let i = 0; i < ruleItem.setting.length; i++) {
+                let setting = ruleItem.setting[i];
+                let contentType = Number(setting.contentType);
+                //疗法
+                if (contentType === 20) {
+                  if (setting.packageId) {
+                    let pkgList = await this.getPkgList(null, setting.packageId);
+                    this.$set(setting, 'meta', {
+                      pkgLoading: false,
+                      pkgList: pkgList.data,
+                    })
+                  } else {
+                    this.$set(setting, 'meta', {
+                      pkgLoading: false,
+                      pkgList: this.pkgList,
+                    })
+                  }
+                }
+                //民品
+                else if(contentType === 22) {
+                  if (!setting.productId) {
+                    this.$set(setting, 'meta', {
+                      productLoading: false,
+                      productList: this.productList,
+                    });
+                  } else {
+                    let productList = await this.getProductList(null, setting.productId);
+                    this.$set(setting, 'meta', {
+                      productLoading: false,
+                      productList: productList.data,
+                    });
+                  }
+                }
+                //药品
+                else if(contentType === 23) {
+                  if (!setting.medicinesId) {
+                    this.$set(setting, 'meta', {
+                      medicinesLoading: false,
+                      medicinesList: this.medicinesList,
+                    });
+                  } else {
+                    let medicinesList = await this.getMedicinesList(null, setting.medicinesId);
+                    this.$set(setting, 'meta', {
+                      medicinesLoading: false,
+                      medicinesList: medicinesList.data,
+                    });
+                  }
+                }
+                //短视频
+                else if(contentType === 24) {
+                  if (!setting.shortVideoId) {
+                    this.$set(setting, 'meta', {
+                      shortVideoLoading: false,
+                      shortVideoList: this.shortVideoList,
+                    });
+                  } else {
+                    let shortVideoList = await this.getShortVideoList(null, setting.shortVideoId);
+                    this.$set(setting, 'meta', {
+                      shortVideoLoading: false,
+                      shortVideoList: shortVideoList.data,
+                    });
+                  }
+                }
+                //文章
+                else if(contentType === 25) {
+                  if (!setting.articleId) {
+                    this.$set(setting, 'meta', {
+                      articleLoading: false,
+                      articleList: this.articleList,
+                    });
+                  } else {
+                    let articleList = await this.getArticleList(null, setting.articleId);
+                    this.$set(setting, 'meta', {
+                      articleLoading: false,
+                      articleList: articleList.data,
+                    });
+                  }
+                }
+                //公开课
+                else if(contentType === 26) {
+                  if (!setting.openClassVideoId) {
+                    this.$set(setting, 'meta', {
+                      openClassVideoLoading: false,
+                      openClassVideoList: this.openClassVideoList,
+                    });
+                  } else {
+                    let openClassVideoList = await this.getOpenClassVideoList(null, setting.openClassVideoId);
+                    this.$set(setting, 'meta', {
+                      openClassVideoLoading: false,
+                      openClassVideoList: openClassVideoList.data,
+                    });
+                  }
+                }
+              }
+            }
+            //动态加载绑定/解绑 标签和客服
+            if (ruleItem.addTag) {
+              getTagByIds(ruleItem.addTag.split(',')).then(tagsRes => {
+                ruleItem.addTag = tagsRes.data;
+                this.tagConfigForBind.selected = tagsRes.data;
+              });
+            } else {
+              ruleItem.addTag = [];
+              this.tagConfigForBind.selected = [];
+            }
+            if (ruleItem.delTag) {
+              getTagByIds(ruleItem.delTag.split(',')).then(tagsRes => {
+                ruleItem.delTag = tagsRes.data;
+                this.tagConfigForUnbind.selected = tagsRes.data;
+              });
+            } else {
+              ruleItem.delTag = [];
+              this.tagConfigForUnbind.selected = [];
+            }
+            if (ruleItem.addCustomer) {
+              listRole({ids: ruleItem.addCustomer.split(',')}).then(customerRes => {
+                ruleItem.addCustomer = customerRes.rows;
+                this.customerConfigForBind.selected = customerRes.rows;
+              });
+            } else {
+              ruleItem.addCustomer = [];
+              this.customerConfigForBind.selected = [];
+            }
+            if (ruleItem.delCustomer) {
+              listRole({ids: ruleItem.delCustomer.split(',')}).then(customerRes => {
+                ruleItem.delCustomer = customerRes.rows;
+                this.customerConfigForUnbind.selected = customerRes.rows;
+              });
+            } else {
+              ruleItem.delCustomer = [];
+              this.customerConfigForUnbind.selected = [];
+            }
+          }
+          this.loading = false;
+        })
+      }
+    },
+    /**
+     * 保存天
+     */
+    saveDay() {
+      let data = JSON.parse(JSON.stringify(this.days[this.tabIndex]));
+      let check = this.checkData(data);
+      if (!check) {
+        return;
+      }
+
+      for (let j = 0; j < data.rules.length; j++) {
+        let e = data.rules[j];
+        //如果不是每天第一条,全刷为非官方
+        if (j !== 0) {
+          e.isOfficial = 0;
+        }
+        e.name = data.name;
+        e.tempId = this.id;
+        e.sorts = Number(this.tabIndex);
+        e.dayNum = (this.form.gap * e.sorts) + 1;
+        e.sorts = j;
+        data.dayNum = e.dayNum;
+        e.contentType = e.type;
+        delete e.meta;
+        e.setting.forEach(item => delete item.meta);
+        e.settingList = e.setting;
+        e.settingList.forEach(e => e.content = JSON.stringify(e));
+        e.addTag = e?.addTag?.map(tag => tag.id).join(',') || null;
+        e.delTag = e?.delTag?.map(tag => tag.id).join(',') || null;
+        e.addCustomer = e?.addCustomer?.map(cus => cus.id).join(',') || null;
+        e.delCustomer = e?.delCustomer?.map(cus => cus.id).join(',') || null;
+      }
+      data.tempId = this.id;
+      data.list = data.rules;
+      this.loading = true;
+      addOrUpdateSetting(data).then(e => {
+        this.loading = false;
+        // 使用Vue.set确保响应式更新
+        this.$set(this.days, this.tabIndex, {
+          ...this.days[this.tabIndex],
+          id: e.data.id,
+        });
+      });
+    },
+    isEmpty(obj) {
+      if (null === obj || undefined === obj || 0 === obj.length) {
+        return true;
+      }
+      return false;
+    },
+    /**
+     * 校验数据
+     * @param data 
+     */
+    checkData(data) {
+      this.$message.closeAll();
+      if (this.isEmpty(data.name)) {
+        this.$message.error("内容名称不能为空")
+        return false;
+      }
+      for (let j = 0; j < data.rules.length; j++) {
+        let dc = data.rules[j];
+        if (this.isEmpty(dc.time)) {
+          this.$message.error("时间不能为空")
+          return false;
+        }
+        //规则消息类别-科普
+        if (dc.type == 2) {
+          if (this.isEmpty(dc.courseId)) {
+            this.$message.error("请选择科普")
+            return false;
+          }
+          if (this.isEmpty(dc.videoId)) {
+            this.$message.error("请选择课节")
+            return false;
+          }
+          if (this.isEmpty(dc.courseType)) {
+            this.$message.error("请选择消息类型")
+            return false;
+          }
+
+          for (let k = 0; k < dc.setting.length; k++) {
+            let dcs = data.rules[j].setting[k];
+            if (dcs.contentType == 11 && this.isEmpty(dcs.value)) {
+              this.$message.error("内容不能为空")
+              return false;
+            }
+            if (dcs.contentType == 12 && this.isEmpty(dcs.value)) {
+              this.$message.error("语音文本不能为空")
+              return false;
+            }
+            if (dcs.contentType == 2 && this.isEmpty(dcs.imgUrl)) {
+              this.$message.error("图片不能为空")
+              return false;
+            }
+            if ([9].includes(Number(dcs.contentType)) && this.isEmpty(dcs.linkTitle)) {
+              this.$message.error("链接标题不能为空")
+              return false;
+            }
+            if ([9].includes(Number(dcs.contentType)) && this.isEmpty(dcs.linkDescribe)) {
+              this.$message.error("链接描述不能为空")
+              return false;
+            }
+            if ([9].includes(Number(dcs.contentType)) && this.isEmpty(dcs.linkImageUrl)) {
+              this.$message.error("链接图片不能为空")
+              return false;
+            }
+            if ([20].includes(Number(dcs.contentType)) && this.isEmpty(dcs.packageId)) {
+              this.$message.error("疗法不能为空")
+              return false;
+            }
+            if ([21].includes(Number(dcs.contentType)) && this.isEmpty(dcs.liveId)) {
+              this.$message.error("直播间不能为空")
+              return false;
+            }
+          }
+        }
+        //规则消息类别-改状态（绑定/解绑-标签/客服）
+        else if (dc.type == 5) {
+          if (this.isEmpty(dc.addTag) && this.isEmpty(dc.delTag)
+            && this.isEmpty(dc?.addCustomer) && this.isEmpty(dc?.delCustomer)) {
+            this.$message.error(`第${j + 1}条规则配置错误，未改动任何状态`);
+            return false;
+          }
+        }
+      }
+      return true;
+    },
+    /**
+     * 天数选项卡点击
+     * @param obj 
+     */
+    tabClick(obj) {
+
+    },
+    /**
+     * 新增内容节点
+     * @param ruleItem 
+     */
+    addContentNode(ruleItem) {
+      const newSetting = {
+        contentType: '9',//默认内容类型为科普
+        value: '',
+      };
+      // 将新设置项添加到 rules.setting 数组中
+      ruleItem.setting.push(newSetting);
+      this.handleContentTypeChange(ruleItem);
+    },
+    /**
+     * 删除内容节点
+     * @param dayIndex 
+     * @param ruleIndex 
+     * @param contentIndex 
+     */
+    delContentNode(dayIndex, ruleIndex, contentIndex) {
+      this.days[dayIndex].rules[ruleIndex].setting.splice(contentIndex, 1)
+    },
+    /**
+     * 添加规则节点
+     * @param dayIndex 
+     */
+    addRuleNode(dayIndex) {
+      this.days[dayIndex].rules.push(
+        { 
+          type: 2,//默认消息类别为科普
+          contentType: 2,
+          courseId: null,
+          videoId: null,
+          meta: {
+            courseList: this.courseList,
+            courseLoading: false,
+            videoList: [],
+          },
+          setting: [{ contentType: '9', value: "", }]//默认内容类型为科普
+        }
+      )
+    },
+    /**
+     * 删除规则节点
+     * @param dayIndex 
+     * @param rulesIndex 
+     */
+    delRuleNode(dayIndex, rulesIndex) {
+      this.days[dayIndex].rules.splice(rulesIndex, 1);
+    },
+    /**
+     * 添加天数
+     */
+    addDay() {
+      let rules = [
+        {
+          contentType: '1',
+          setting: [{ contentType: '9', value: "", }],//默认内容类型为科普
+          meta: {
+            courseList: this.courseList,
+            courseLoading: false,
+            videoList: [],
+          }
+        }
+      ];
+      rules[0]['type'] = 2;//默认消息类别为科普
+      this.days.push({
+        name: null,
+        dayNum: (this.form.gap * this.days.length) + 1,
+        rules
+      })
+    },
+    /**
+     * 删除天数
+     * @param dayIndex 
+     */
+    delDay(dayIndex) {
+      const newData = this.days[dayIndex];
+      if (newData.id && newData.dayNum) {
+        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          delRules(newData.id, newData.name, newData.dayNum).then(res => {
+            this.del(dayIndex);
+          });
+        });
+      } else {
+        this.del(dayIndex);
+      }
+    },
+    del(dayIndex) {
+      if (dayIndex == 0) {
+        this.tabIndex = "0";
+      } else {
+        this.tabIndex = (dayIndex - 1) + "";
+      }
+      this.days.splice(dayIndex, 1);
+
+    },
+
+    /**
+     * 选择视频号
+     * @param content 
+     * @param dayIndex 
+     * @param rulesIndex 
+     * @param contentIndex 
+     */
+    hanldeSelectVideoNum(content, dayIndex, rulesIndex, contentIndex) {
+      this.videoNumOptions.content = content;
+      this.videoNumOptions.rulesIndex = rulesIndex;
+      this.videoNumOptions.contentIndex = contentIndex;
+      this.videoNumOptions.open = true;
+    },
+    /**
+     * 科普下拉搜索
+     */
+    async handleCourseRemoteSearch(keyword, ruleItem) {
+      ruleItem.meta.courseLoading = true;
+      // 模拟远程接口请求（替换为你的真实接口）
+      let cl = await this.getCourseList(this.isEmpty(keyword) ? null : keyword, null);
+      ruleItem.meta.courseLoading = false;
+      ruleItem.meta.courseList = cl.list;
+    },
+    /**
+     * 疗法下拉搜索
+     * @param keyword 
+     * @param content 
+     */
+    async handlePkgRemoteSearch(keyword, content) {
+      content.meta.pkgLoading = true;
+      // 模拟远程接口请求（替换为你的真实接口）
+      let cl = await this.getPkgList(this.isEmpty(keyword) ? null : keyword, null);
+      content.meta.pkgLoading = false;
+      content.meta.pkgList = cl.data;
+    },
+
+    /**
+     * 民品下拉搜索
+     * @param keyword 
+     * @param content 
+     */
+    async handleProductRemoteSearch(keyword, content) {
+      content.meta.productLoading = true;
+      let cl = await this.getProductList(this.isEmpty(keyword) ? null : keyword, null);
+      content.meta.productLoading = false;
+      content.meta.productList = cl.data;
+    },
+    /**
+     * 民品变动处理
+     * @param content 
+     */
+    async productChangeUpdate(content) {
+      this.$set(content, 'productName', null);
+      this.$set(content, 'productImgUrl', null);
+      if (content.productId) {
+        // 查找选中民品的信息
+        const selected = content.meta.productList.find(pro => parseInt(pro.productId) === content.productId);
+        this.$set(content, 'productName', selected.productName);
+        this.$set(content, 'productImgUrl', selected.image);
+      }
+    },
+    /**
+     * 药品下拉搜索
+     * @param keyword 
+     * @param content 
+     */
+    async handleMedicinesRemoteSearch(keyword, content) {
+      content.meta.medicinesLoading = true;
+      let cl = await this.getMedicinesList(this.isEmpty(keyword) ? null : keyword, null);
+      content.meta.medicinesLoading = false;
+      content.meta.medicinesList = cl.data;
+    },
+    /**
+     * 药品变动处理
+     * @param content 
+     */
+    async medicinesChangeUpdate(content) {
+      this.$set(content, 'medicinesName', null);
+      this.$set(content, 'medicinesImgUrl', null);
+      if (content.medicinesId) {
+        // 查找选中药品的信息
+        const selected = content.meta.medicinesList.find(pro => parseInt(pro.productId) === content.medicinesId);
+        this.$set(content, 'medicinesName', selected.productName);
+        this.$set(content, 'medicinesImgUrl', selected.image);
+      }
+    },
+    /**
+     * 短视频下拉搜索
+     * @param keyword 
+     * @param content 
+     */
+    async handleShortVideoRemoteSearch(keyword, content) {
+      content.meta.shortVideoLoading = true;
+      let cl = await this.getShortVideoList(this.isEmpty(keyword) ? null : keyword, null);
+      content.meta.shortVideoLoading = false;
+      content.meta.shortVideoList = cl.data;
+    },
+    /**
+     * 短视频变动处理
+     * @param content 
+     */
+    async shortVideoChangeUpdate(content) {
+      this.$set(content, 'shortVideoName', null);
+      this.$set(content, 'shortVideoImgUrl', null);
+      if (content.shortVideoId) {
+        // 查找选中短视频的信息
+        const selected = content.meta.shortVideoList.find(pro => parseInt(pro.videoId) === content.shortVideoId);
+        this.$set(content, 'shortVideoName', selected.title);
+        this.$set(content, 'shortVideoImgUrl', selected.thumbnail);
+      }
+    },
+    /**
+     * 文章下拉搜索
+     * @param keyword 
+     * @param content 
+     */
+    async handleArticleRemoteSearch(keyword, content) {
+      content.meta.articleLoading = true;
+      let cl = await this.getArticleList(this.isEmpty(keyword) ? null : keyword, null);
+      content.meta.articleLoading = false;
+      content.meta.articleList = cl.data;
+    },
+    /**
+     * 文章变动处理
+     * @param content 
+     */
+    async articleChangeUpdate(content) {
+      this.$set(content, 'articleName', null);
+      this.$set(content, 'articleImgUrl', null);
+      if (content.articleId) {
+        // 查找选中文章的信息
+        const selected = content.meta.articleList.find(pro => parseInt(pro.articleId) === content.articleId);
+        this.$set(content, 'articleName', selected.title);
+        this.$set(content, 'articleImgUrl', selected.imageUrl);
+      }
+    },
+    /**
+     * 公开课下拉搜索
+     * @param keyword 
+     * @param content 
+     */
+    async handleOpenClassVideoRemoteSearch(keyword, content) {
+      content.meta.openClassVideoLoading = true;
+      let cl = await this.getOpenClassVideoList(this.isEmpty(keyword) ? null : keyword, null);
+      content.meta.openClassVideoLoading = false;
+      content.meta.openClassVideoList = cl.data;
+    },
+    /**
+     * 公开课变动处理
+     * @param content 
+     */
+    async openClassVideoChangeUpdate(content) {
+      this.$set(content, 'openClassVideoName', null);
+      this.$set(content, 'openClassVideoImgUrl', null);
+      if (content.openClassVideoId) {
+        // 查找选中文章的信息
+        const selected = content.meta.openClassVideoList.find(pro => parseInt(pro.videoId) === content.openClassVideoId);
+        this.$set(content, 'openClassVideoName', selected.title);
+        this.$set(content, 'openClassVideoImgUrl', selected.thumbnail);
+      }
+    },
+    /**
+     * 科普变动处理
+     * @param ruleItem 
+     * @param dayIndex 
+     * @param ruleIndex 
+     */
+    async courseChangeUpdate(ruleItem, dayIndex, ruleIndex) {
+      //将当前规则已选中的视频小节清空
+      this.$set(ruleItem, 'videoId', null);
+      this.$set(ruleItem.meta, 'videoList', []);
+      // 查找选中的科普的信息
+      const selectedCourse = ruleItem.meta.courseList.find(course => parseInt(course.dictValue) === ruleItem.courseId);
+      for (let i = 0; i < ruleItem.setting.length; i++) {
+        this.$set(ruleItem.setting[i], 'linkTitle', null);
+        this.$set(ruleItem.setting[i], 'linkDescribe', null);
+        this.$set(ruleItem.setting[i], 'linkImageUrl', null);
+
+        //如果是科普才上
+        if (selectedCourse && ruleItem.type == 2 && !this.isEmpty(ruleItem.courseId)) {
+          //响应式直接给链接的标题/封面上值
+
+          if ([9].includes(Number(ruleItem.setting[i].contentType))) {
+            this.$set(ruleItem.setting[i], 'linkTitle', selectedCourse.dictLabel);
+            this.$set(ruleItem.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
+          }
+        }
+      }
+      if (!this.isEmpty(ruleItem.courseId)) {
+        let vl = await this.getVideoList(ruleItem.courseId, null);
+        ruleItem.meta.videoList = vl.list;
+      } else {
+        let cl = await this.getCourseList(null, null);
+        ruleItem.meta.courseList = cl.list;
+      }
+    },
+    /**
+     * 疗法变动处理
+     * @param content 
+     */
+    async pkgChangeUpdate(content) {
+      //将当前规则已选中的视频小节清空
+      this.$set(content, 'packageName', null);
+      this.$set(content, 'packageImgUrl', null);
+      if (content.packageId) {
+        // 查找选中疗法的信息
+        const selectedPkg = content.meta.pkgList.find(pkg => parseInt(pkg.packageId) === content.packageId);
+        this.$set(content, 'packageName', selectedPkg.packageName);
+        this.$set(content, 'packageImgUrl', selectedPkg.imgUrl);
+      }
+    },
+    /**
+     * 直播间切换
+     * @param content 
+     */
+    liveChange(content) {
+      content.liveTitle = null;
+      content.liveImgUrl = null;
+      const selectedLive = this.liveList.find(live => live.liveId === content.liveId);
+      if (selectedLive) {
+        content.liveTitle = selectedLive.liveName; // 自动填充标题
+        content.liveImgUrl = selectedLive.liveImgUrl; // 自动填充封面
+      }
+    },
+    /**
+     * 处理输入内容
+     * @param value 
+     * @param content 
+     */
+    handleInputVideoText(value, content) {
+      // 允许的字符：中文、英文（大小写）、数字和指定标点符号（，。！？）
+      const regex = /^[\u4e00-\u9fa5，。！？,!?]+$/;
+      // 删除不符合条件的字符
+      const filteredValue = value.split('').filter(char => regex.test(char)).join('');
+      this.$set(content, 'value', filteredValue);
+    },
+    courseUpdate(ruleItem, dayIndex, ruleIndex) {
+      videoList(ruleItem.courseId).then(response => {
+        ruleItem.meta.videoList = response.list;
+      });
+    },
+    /**
+     * 根据科普获取视频小节
+     * @param courseId 
+     * @param title 
+     */
+    async getVideoList(courseId, title) {
+      return await videoList({
+        courseId: courseId,
+        title: title
+      });
+    },
+    toggleSalesCall(dayIndex, rulesIndex, contentIndex) {
+      // 获取目标对象
+      const setItem = this.days[dayIndex].rules[rulesIndex].setting[contentIndex];
+      const salesCall = '#客服称呼#';
+      const refKey = `textarea-${dayIndex}-${rulesIndex}-${contentIndex}`;
+      const textarea = this.$refs[refKey][0]?.$refs?.textarea;
+
+      if (!textarea) return;
+
+      // 获取光标位置
+      const cursorPosition = textarea.selectionStart;
+
+      if (setItem.isSalesCallAdded) {
+        // 移除所有标签
+        setItem.value = setItem.value.replace(new RegExp(salesCall, 'g'), '');
+      } else {
+        // 插入到光标位置
+        setItem.value =
+          setItem.value.slice(0, cursorPosition) +
+          salesCall +
+          setItem.value.slice(cursorPosition);
+      }
+
+      // 切换状态
+      setItem.isSalesCallAdded = !setItem.isSalesCallAdded;
+
+      // 保持光标位置
+      this.$nextTick(() => {
+        const newCursorPos = cursorPosition + (setItem.isSalesCallAdded ? salesCall.length : 0);
+        textarea.setSelectionRange(newCursorPos, newCursorPos);
+      });
+    },
+    handleKeydown(event, dayIndex, rulesIndex, contentIndex) {
+
+      const setItem = this.days[dayIndex].rules[rulesIndex].setting[contentIndex];
+      const refKey = `textarea-${dayIndex}-${rulesIndex}-${contentIndex}`;
+      const textarea = this.$refs[refKey][0]?.$refs?.textarea;
+
+      if (!textarea) return;
+
+      const tags = ['#客服称呼#', '#客户称呼#'];
+      const key = event.key;
+      const value = setItem.value;
+      const cursorPosition = textarea.selectionStart;
+
+      if (key === 'Backspace' || key === 'Delete') {
+        tags.forEach(tag => {
+          let start, end;
+
+          // Backspace 处理
+          if (key === 'Backspace' && cursorPosition >= tag.length) {
+            start = cursorPosition - tag.length;
+            if (value.slice(start, cursorPosition) === tag) {
+              event.preventDefault();
+              setItem.value = value.slice(0, start) + value.slice(cursorPosition);
+              if (tag === '#客服称呼#') setItem.isSalesCallAdded = false;
+              this.$nextTick(() => textarea.setSelectionRange(start, start));
+            }
+          }
+
+          // Delete 处理
+          if (key === 'Delete') {
+            end = cursorPosition + tag.length;
+            if (value.slice(cursorPosition, end) === tag) {
+              event.preventDefault();
+              setItem.value = value.slice(0, cursorPosition) + value.slice(end);
+              if (tag === '#客服称呼#') setItem.isSalesCallAdded = false;
+            }
+          }
+        });
+      }
+    },
+    /**
+     * 内容类型切换
+     * @param ruleItem 
+     */
+    handleContentTypeChange(ruleItem) {
+      if (ruleItem.type === 2) {
+        const selectedCourse = ruleItem.courseId != null 
+          ? this.courseList.find(course => parseInt(course.dictValue) === ruleItem.courseId) 
+          : null;
+        const selectedVideo = ruleItem.videoId != null 
+          ? ruleItem.meta.videoList.find(course => parseInt(course.dictValue) === ruleItem.videoId) 
+          : null;
+        ruleItem.setting.forEach(async setting => {
+          const contentType = Number(setting.contentType);
+          // 科普相关赋值（contentType=9）
+          if (selectedCourse && contentType === 9) {
+            this.$set(setting, 'linkTitle', selectedCourse.dictLabel);
+            this.$set(setting, 'linkImageUrl', selectedCourse.dictImgUrl);
+          }
+          // 视频相关赋值（contentType=9）
+          if (selectedVideo && contentType === 9) {
+            this.$set(setting, 'linkDescribe', selectedVideo.dictLabel);
+          }
+          //疗法相关赋值（contentType=20）
+          if (contentType === 20) {
+            if (!setting.packageId) {
+              this.$set(setting, 'meta', {
+                pkgLoading: false,
+                pkgList: this.pkgList,
+              });
+            } else {
+              let pkgList = await this.getPkgList(null, setting.packageId);
+              this.$set(setting, 'meta', {
+                pkgLoading: false,
+                pkgList: pkgList.data,
+              });
+            }
+          }
+          //民品
+          else if(contentType === 22) {
+            if (!setting.productId) {
+              this.$set(setting, 'meta', {
+                productLoading: false,
+                productList: this.productList,
+              });
+            } else {
+              let productList = await this.getProductList(null, setting.productId);
+              this.$set(setting, 'meta', {
+                productLoading: false,
+                productList: productList.data,
+              });
+            }
+          }
+          //药品
+          else if(contentType === 23) {
+            if (!setting.medicinesId) {
+              this.$set(setting, 'meta', {
+                medicinesLoading: false,
+                medicinesList: this.medicinesList,
+              });
+            } else {
+              let medicinesList = await this.getMedicinesList(null, setting.medicinesId);
+              this.$set(setting, 'meta', {
+                medicinesLoading: false,
+                medicinesList: medicinesList.data,
+              });
+            }
+          }
+          //短视频
+          else if(contentType === 24) {
+            if (!setting.shortVideoId) {
+              this.$set(setting, 'meta', {
+                shortVideoLoading: false,
+                shortVideoList: this.shortVideoList,
+              });
+            } else {
+              let shortVideoList = await this.getShortVideoList(null, setting.shortVideoId);
+              this.$set(setting, 'meta', {
+                shortVideoLoading: false,
+                shortVideoList: shortVideoList.data,
+              });
+            }
+          }
+          //文章
+          else if(contentType === 25) {
+            if (!setting.articleId) {
+              this.$set(setting, 'meta', {
+                articleLoading: false,
+                articleList: this.articleList,
+              });
+            } else {
+              let articleList = await this.getArticleList(null, setting.articleId);
+              this.$set(setting, 'meta', {
+                articleLoading: false,
+                articleList: articleList.data,
+              });
+            }
+          }
+          //公开课
+          else if(contentType === 26) {
+            if (!setting.openClassVideoId) {
+              this.$set(setting, 'meta', {
+                openClassVideoLoading: false,
+                openClassVideoList: this.openClassVideoList,
+              });
+            } else {
+              let openClassVideoList = await this.getOpenClassVideoList(null, setting.openClassVideoId);
+              this.$set(setting, 'meta', {
+                openClassVideoLoading: false,
+                openClassVideoList: openClassVideoList.data,
+              });
+            }
+          }
+        });
+      }
+    },
+    /**
+     * 科普小节变化
+     * @param ruleItem 
+     * @param dayIndex 
+     * @param ruleIndex 
+     */
+    videoIdChange(ruleItem, dayIndex, ruleIndex) {
+      //选择了科普小节则 默认绑上
+      let selectedVideo;
+      // 查找选中的科普对应的 label
+      if (ruleItem.videoId != null) {
+        selectedVideo = ruleItem.meta.videoList.find(course => parseInt(course.dictValue) === ruleItem.videoId);
+      }
+      for (let i = 0; i < ruleItem.setting.length; i++) {
+        //科普消息-文本内容
+        if (ruleItem.setting[i].contentType == 11 && ruleItem.type == 2) {
+          this.$set(ruleItem.setting[i], 'isBindUrl', '2');
+        }
+        //如果是科普的才上
+        if (selectedVideo && ruleItem.type == 2 && ruleItem.videoId != null) {
+
+          if (ruleItem.setting[i].contentType == 9) {
+            this.$set(ruleItem.setting[i], 'linkDescribe', selectedVideo.dictLabel);
+          }
+        }
+      }
+    },
+    /**
+     * 打开选择标签的页面
+     * @param ruleItem 
+     * @param type 0-绑定 1-解绑
+     */
+    openTagPage(ruleItem, type) {
+      if (type === 0) {
+        this.tagConfigForBind.visible = true;
+        this.tagConfigForBind.currentRuleItem = ruleItem;
+        this.tagConfigForBind.selected = ruleItem.addTag || [];
+      } 
+      //解绑
+      else {
+        this.tagConfigForUnbind.visible = true;
+        this.tagConfigForUnbind.currentRuleItem = ruleItem;
+        this.tagConfigForUnbind.selected = ruleItem.delTag || [];
+      }
+    },
+    /**
+     * 绑定标签取消
+     */
+    tagCancelForBind() {
+      this.tagConfigForBind.visible = false;
+    },
+    /**
+     * 绑定标签确认
+     */
+    tagSubmitForBind() {
+      this.tagConfigForBind.visible = false;
+    },
+    /**
+     * 解绑标签取消
+     */
+    tagCancelForUnbind() {
+      this.tagConfigForUnbind.visible = false;
+    },
+    /**
+     * 解绑标签确认
+     */
+    tagSubmitForUnbind() {
+      this.tagConfigForUnbind.visible = false;
+    },
+    /**
+     * 删除标签操作
+     * @param ruleItem 
+     * @param type 0-绑定 1-解绑
+     * @param tag 标签
+     */
+    handleCloseTag(ruleItem, type, tag) {
+      //绑定
+      if (type === 0) {
+        const index = this.tagConfigForBind.selected.findIndex(t => t === tag);
+        if (index !== -1) {
+          this.tagConfigForBind.selected.splice(index, 1);
+          ruleItem.addTag = this.tagConfigForBind.selected;
+        }
+      } 
+      //解绑
+      else {
+        const index = this.tagConfigForUnbind.selected.findIndex(t => t === tag);
+        if (index !== -1) {
+          this.tagConfigForUnbind.selected.splice(index, 1);
+          ruleItem.delTag = this.tagConfigForUnbind.selected;
+        }
+      }
+    },
+    /**
+     * 选中的绑定标签列表
+     * @param group 标签所属组
+     * @param tag 具体操作的标签
+     */
+    tagSelectionChangeCallForBind(group, tag) {
+      if (!tag.isSelected) {
+        this.tagConfigForBind.selected = this.tagConfigForBind.selected.filter(item => tag.id != item.id);
+      } else {
+        if (!this.tagConfigForBind.selected.some(st => st.id == tag.id)) {
+          this.tagConfigForBind.selected.push(tag);
+        }
+      }
+      this.$set(this.tagConfigForBind.currentRuleItem, 'addTag', this.tagConfigForBind.selected);
+    },
+    /**
+     * 选中的解绑标签列表
+     * @param group 标签所属组
+     * @param tag 具体操作的标签
+     */
+    tagSelectionChangeCallForUnbind(group, tag) {
+      if (!tag.isSelected) {
+        this.tagConfigForUnbind.selected = this.tagConfigForUnbind.selected.filter(item => tag.id != item.id);
+      } else {
+        if (!this.tagConfigForUnbind.selected.some(st => st.id == tag.id)) {
+          this.tagConfigForUnbind.selected.push(tag);
+        }
+      }
+      this.$set(this.tagConfigForUnbind.currentRuleItem, 'delTag', this.tagConfigForUnbind.selected);
+    },
+    /**
+     * 打开选择客服的页面
+     * @param ruleItem 
+     * @param type 0-绑定 1-解绑
+     */
+    openCustomerPage(ruleItem, type) {
+      if (type === 0) {
+        this.customerConfigForBind.visible = true;
+        this.customerConfigForBind.currentRuleItem = ruleItem;
+        this.customerConfigForBind.selected = ruleItem.addCustomer || [];
+      } 
+      //解绑
+      else {
+        this.customerConfigForUnbind.visible = true;
+        this.customerConfigForUnbind.currentRuleItem = ruleItem;
+        this.customerConfigForUnbind.selected = ruleItem.delCustomer || [];
+      }
+    },
+    /**
+     * 确定绑定客服
+     */
+    customerConfirmCallForBind() {
+      this.customerConfigForBind.visible = false;
+    },
+    /**
+     * 确定解绑客服
+     */
+    customerConfirmCallForUnbind() {
+      this.customerConfigForUnbind.visible = false;
+    },
+    /**
+     * 删除客服操作
+     * @param ruleItem 
+     * @param type 0-绑定 1-解绑
+     * @param customer 客服
+     */
+    handleCloseCustomer(ruleItem, type, customer) {
+      //绑定
+      if (type === 0) {
+        const index = this.customerConfigForBind.selected.findIndex(t => t === customer);
+        if (index !== -1) {
+          this.customerConfigForBind.selected.splice(index, 1);
+          ruleItem.addCustomer = this.customerConfigForBind.selected;
+        }
+      } 
+      //解绑
+      else {
+        const index = this.customerConfigForUnbind.selected.findIndex(t => t === customer);
+        if (index !== -1) {
+          this.customerConfigForUnbind.selected.splice(index, 1);
+          ruleItem.delCustomer = this.customerConfigForUnbind.selected;
+        }
+      }
+    },
+    /**
+     * 选中的绑定客服列表
+     * @param list 
+     */
+    customerSelectionChangeCallForBind(config) {
+      let selected = config.selected;
+      //单行操作
+      if (config.mode === 0) {
+        let row = config.row;
+        if (selected) {
+          if (!this.customerConfigForBind.selected.some(s => s.id == row.id)) {
+            this.customerConfigForBind.selected.push(row)
+          }
+        } else {
+          this.customerConfigForBind.selected = this.customerConfigForBind.selected.filter(m => m.id != row.id);
+        }
+      }
+      //操作当前页所有行
+      else {
+        let list = config.rows;
+        if (selected) {
+          list.map(l => {
+            if (!this.customerConfigForBind.selected.some(s => s.id == l.id)) {
+              this.customerConfigForBind.selected.push(l);
+            }
+          });
+        } else {
+          list.map(l => {
+            for (let i = 0; i < this.customerConfigForBind.selected.length; i++) {
+              if (l.id == this.customerConfigForBind.selected[i].id) {
+                this.customerConfigForBind.selected.splice(i, 1);
+              }
+            }
+          })
+        }
+      }
+      this.$set(this.customerConfigForBind.currentRuleItem, 'addCustomer', this.customerConfigForBind.selected);
+    },
+    /**
+     * 选中的解绑客服列表
+     * @param list 
+     */
+    customerSelectionChangeCallForUnbind(config) {
+      let selected = config.selected;
+      //单行操作
+      if (config.mode === 0) {
+        let row = config.row;
+        if (selected) {
+          if (!this.customerConfigForUnbind.selected.some(s => s.id == row.id)) {
+            this.customerConfigForUnbind.selected.push(row)
+          }
+        } else {
+          this.customerConfigForUnbind.selected = this.customerConfigForUnbind.selected.filter(m => m.id != row.id);
+        }
+      }
+      //操作当前页所有行
+      else {
+        let list = config.rows;
+        if (selected) {
+          list.map(l => {
+            if (!this.customerConfigForUnbind.selected.some(s => s.id == l.id)) {
+              this.customerConfigForUnbind.selected.push(l)
+            }
+          });
+        } else {
+          list.map(l => {
+            for (let i = 0; i < this.customerConfigForUnbind.selected.length; i++) {
+              if (l.id == this.customerConfigForUnbind.selected[i].id) {
+                this.customerConfigForUnbind.selected.splice(i, 1);
+              }
+            }
+          })
+        }
+      }
+      this.$set(this.customerConfigForUnbind.currentRuleItem, 'delCustomer', this.customerConfigForUnbind.selected);
+    },
+    /**
+     * 上传文件前置处理
+     * @param file 
+     */
+    beforeAvatarUploadFile(file) {
+      const isLt1M = file.size / 1024 / 1024 < 10;
+      if (!isLt1M) {
+        this.$message.error('上传大小不能超过 10MB!');
+      }
+      return isLt1M;
+    },
+    /**
+     * 上传文件成功回调
+     * @param res 
+     * @param file 
+     * @param content 
+     */
+    handleAvatarSuccessFile(res, file, content) {
+      if (res.code === 200) {
+        // 使用 $set 确保响应式更新
+        this.$set(content, 'fileUrl', res.url);
+      } else {
+        this.msgError(res.msg);
+      }
+    },
+
+    //下载文件
+    downloadUrl(materialUrl) {
+      // 直接返回文件 URL
+      return materialUrl;
+    },
+    /**
+     * 上传视频
+     * @param file 
+     */
+    beforeAvatarUploadVideo(file) {
+      const isLt30M = file.size / 1024 / 1024 < 10;
+      const isMP4 = file.type === 'video/mp4';
+
+      if (!isMP4) {
+        this.$message.error('仅支持上传 MP4 格式的视频文件!');
+        return false;
+      }
+
+      if (!isLt30M) {
+        this.$message.error('上传大小不能超过 10MB!');
+        return false;
+      }
+
+      return true;
+    },
+        /**
+     * 上传视频成功回调
+     * @param res 
+     * @param file 
+     * @param rules 
+     */
+    handleAvatarSuccessVideo(res, file, rules) {
+      if (res.code == 200) {
+        // 使用 $set 确保响应式更新
+        this.$set(rules, 'videoUrl', res.url);
+      } else {
+        this.msgError(res.msg);
+      }
+    },
+    /**
+     * 查询sop模板列表
+     */
+    getList() {
+      this.loading = true;
+      listSopTemp(this.queryParams).then(response => {
+        this.sopTempList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /**
+     * 表单重置
+     */
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        setting: null,
+        status: "0",
+        sort: null,
+        createTime: null,
+        createBy: null,
+        companyId: null
+      };
+      this.resetForm("form");
+    },
+    /**
+     * 初始化操作
+     * @param id 
+     */
+    async initTempInfo(id) {
+      getSopTemp(id).then(response => {
+        this.form = response.data;
+        //获取当前模板已维护天数
+        this.days = this.form.days || [];
+        //解释
+        //days：一共多少天
+        //days[dayIndex].rules[ruleIndex]：消息(包含时间:time，消息类别:contentType，具体内容:setting【可能存在多个】)
+        //days[dayIndex].rules[ruleIndex].isOfficial,0-非官方，1-官方
+        if (Array.isArray(this.days)) {
+          //遍历所有天
+          this.days.forEach(day => {
+            if (day && Array.isArray(day.rules)) {
+              //遍历当天的所有规则
+              day.rules.forEach(ruleItem => {
+                this.$set(ruleItem, 'meta', {courseList: [], videoList: []});
+                if (ruleItem && Array.isArray(ruleItem.setting)) {
+                  ruleItem.addTag = [];
+                  ruleItem.delTag = [];
+                  ruleItem.addCustomer = [];
+                  ruleItem.delCustomer = [];
+                  //遍历当前规则的所有内容
+                  ruleItem.setting.forEach(content => {
+                    this.$set(content, 'meta', {
+                      pkgLoading: false,
+                      pkgList: this.pkgList,
+                    });
+                    if (content && !Object.hasOwn(content, 'isSalesCallAdded')) {
+                      this.$set(content, 'isSalesCallAdded', false);
+                    }
+                  });
+                }
+              });
+            }
+          });
+        }
+        this.form.days.forEach(e => e.newDay = e.dayNum);
+        this.dayList = JSON.parse(JSON.stringify(this.form.days));
+      });
+    },
+    isOfficialChange(rules) {
+      this.$set(rules, 'time', '00:30');
+    },
+    /**
+     * 确认分割后的内容
+     */
+    comfirmContent() {
+      this.openShowContent = false;
+    },
+    showOpenContent(dayIndex, rulesIndex, contentIndex) {
+      let setItem = this.days[dayIndex].rules[rulesIndex].setting[contentIndex];
+      let refKey = `textarea-${dayIndex}-${rulesIndex}-${contentIndex}`;
+      let textarea = this.$refs[refKey][0]?.$refs?.textarea;
+      if (!textarea) return;
+      this.openShowContent = true;
+      this.contentList = [];
+      this.contentListData = [];
+      let str = setItem.value;
+      this.contentList = str.split("|&|");
+      let idx = 1;
+      this.contentList.forEach(a => {
+        this.contentListData.push({ index: idx++, content: a });
+      })
+    },
+    /**
+     * 复制分隔符
+     */
+    cppySpliter() {
+      navigator.clipboard.writeText("|&|").then(() => {
+        this.$message({
+          message: '复制成功',
+          type: 'success'
+        });
+      }).catch(err => {
+        this.$message({
+          message: '复制失败',
+          type: 'warning'
+        });
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+.el-button {
+  margin-left: 10px;
+}
+
+.red:hover {
+  color: #dbdbdb !important;
+}
+
+.red {
+  background-color: #F56C6C !important;
+  color: #fff !important;
+}
+
+/deep/ .el-dialog__footer {
+  height: 55px;
+}
+
+.custom-input /deep/ .el-input__inner {
+  height: 20px;
+  text-align: center;
+}
+
+.custom-input /deep/ .el-input__icon {
+  line-height: 10px;
+}
+
+.el-icon-delete {
+  cursor: pointer;
+}
+
+/deep/ .el-badge__content.is-fixed {
+  top: 10px !important;
+  right: 0 !important;
+  width: 8px;
+}
+
+.tip {
+  color: #909399;
+  font-size: 12px;
+  margin-left: 10px;
+}
+
+.sortable-ghost {
+  background: rgb(26, 164, 255) !important;
+  color: #FFF !important;
+}
+</style>

src/views/app/sop/userLogs/sopLogsList.vue

@@ -0,0 +1,1207 @@
+<template>
+  <!-- 执行详情 -->
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
+      <el-form-item label="会员ID" prop="fsUserId">
+        <el-input
+          v-model="queryParams.fsUserId"
+          placeholder="请输入会员ID"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户昵称" prop="fsUserName">
+        <el-input
+          v-model="queryParams.fsUserName"
+          placeholder="请输入用户昵称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="加密号码" prop="phone">
+        <el-input
+          v-model="queryParams.phone"
+          placeholder="请输入手机号码"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="标签" prop="tagIds">
+        <div @click="openTagSearchPage"
+             style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 250px">
+          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+            <el-tag type="success"
+                closable
+                :disable-transitions="false"
+                v-for="list in this.tagSearchConfig.selected"
+                :key="list.tagId"
+                @close="handleCloseTags(list)"
+                style="margin: 3px;"
+            >{{ list.tagName }}
+            </el-tag>
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item label="客服" prop="customerRoles">
+        <div @click="openCusSearchPage"
+             style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 250px">
+          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+            <el-tag type="success"
+                closable
+                :disable-transitions="false"
+                v-for="list in this.bindAISearch.selected"
+                :key="list.id"
+                @close="handleCloseCus(list)"
+                style="margin: 3px;"
+            >{{ list.roleName }}
+            </el-tag>
+          </div>
+        </div>
+      </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-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          :loading="exportLoading"
+          @click="handleExport"
+        >导出</el-button>
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+        >批量删除</el-button>
+
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="multiple"
+          @click="handleEditCourse"
+        >再次发送记录</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="sopLogsList"  @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="ID" align="center" prop="id" />
+      <el-table-column label="消息来源" align="center" prop="sourceFrom" min-width="120">
+        <template slot-scope="scope">
+          <dict-tag :options="appMessageSendSourceFromOptions" :value="scope.row.sourceFrom + ''"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="用户id" align="center" prop="fsUserId" min-width="170"/>
+      <el-table-column label="用户昵称" align="center" prop="fsUserName"min-width="140"/>
+      <el-table-column label="客服昵称" align="center" prop="customerName" min-width="150"/>
+      <el-table-column label="发送的消息" align="center" prop="contentJson" >
+        <template slot-scope="scope">
+          <el-button type="text" @click="showContentDialog(scope.row)">
+            查看详情
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="发送状态" align="center" prop="appSendStatus" min-width="120">
+        <template slot-scope="scope">
+          <dict-tag :options="sopLogsStatus" :value="scope.row.appSendStatus + ''"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="预计发送时间" align="center" prop="sendTime" min-width="180"/>
+      <el-table-column label="实际发送时间" align="center" prop="realSendTime" min-width="180"/>
+      <el-table-column label="生成时间" align="createTime" prop="createTime" min-width="180"/>
+      <el-table-column label="备注" align="center" prop="appSendRemark" min-width="180"/>
+    </el-table>
+
+    <el-dialog :visible.sync="contentDialog.isDialogVisible" title="消息详情" width="30%" append-to-body>
+      <div>
+        <span>课节：{{contentDialog.videoId}}</span>
+        <!-- 已发送 -->
+        <template v-if="contentDialog.row.appSendStatus !== '0'">
+          <div v-for="(item, index) in contentDialog.json || []" :key="index">
+            <el-card class="box-card" style="margin-top: 2%">
+              <div slot="header" class="clearfix" style="display: flex;justify-content: space-between;align-items: center;">
+                <div>
+                  <span>类型：</span>
+                  <el-tag
+                    type="primary"
+                    v-for="op in contentTypeOptions" 
+                    :key="op.dictValue"
+                    v-if="item.contentType == op.dictValue"
+                  >
+                    {{ op.dictLabel }}
+                </el-tag>
+                </div>
+                <div>
+                  发送状态：<el-tag :type="item.success ? 'success' : 'danger'" v-text="item.success ? '成功' : '失败'"/>
+                </div>
+              </div>
+              <div v-if="!item.success">失败原因：<span style="color: #ff4949">{{item.message}}</span></div>
+              
+              <!-- 文本 -->
+              <div v-if="item.contentType == 11" v-html="item.value"></div>
+              
+              <!-- 图片 -->
+              <div v-else-if="item.contentType == 2" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: end; width: 100%">
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.imgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 视频 -->
+              <div v-else-if="item.contentType == 6" class="message-style">
+                <video
+                  :src="item.videoUrl"
+                  controls
+                  style="width: 200px; height: 100px">
+                </video>
+              </div>
+
+              <!-- 语音 -->
+              <div v-else-if="item.contentType == 12" class="message-style">
+                <span>
+                  {{ item.value }}
+                </span>
+                <div v-if="!item.voiceUrl" style="margin-top: 3px"  >
+                  <span style="color: red">无语音地址</span>
+                </div>
+              </div>
+
+              <!-- 科普 -->
+              <div v-else-if="item.contentType == 9" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%"
+                  @click="openLink(item.linkUrl)">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.linkTitle }}</br>
+                      {{ item.linkDescribe }}
+                    </div>
+                    <!-- 点击图片时停止事件冒泡 -->
+                    <el-image
+                      style="width: 50px; height: 50px; flex-shrink: 0"
+                      :src="item.linkImageUrl"
+                      fit="contain"
+                      @click.stop="openImageViewer(item.linkImageUrl)" />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 疗法 -->
+              <div v-else-if="item.contentType == 20" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.packageName }}
+                    </div>
+                    <ImageUpload 
+                      :disabled="true"
+                      v-model="item.packageImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 直播 -->
+              <div v-else-if="item.contentType == 21" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.liveTitle }}
+                    </div>
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.liveImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 民品 -->
+              <div v-else-if="item.contentType == 22" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.productName }}
+                    </div>
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.productImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 药品 -->
+              <div v-else-if="item.contentType == 23" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.medicinesName }}
+                    </div>
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.medicinesImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 短视频 -->
+              <div v-else-if="item.contentType == 24" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.shortVideoName }}
+                    </div>
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.shortVideoImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 文章 -->
+              <div v-else-if="item.contentType == 25" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.articleName }}
+                    </div>
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.articleImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 公开课 -->
+              <div v-else-if="item.contentType == 26" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.openClassVideoName }}
+                    </div>
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.openClassVideoImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+            </el-card>
+          </div>
+        </template>
+        <!-- 待发送 -->
+        <template v-else>
+          <div v-for="(item, index) in contentDialog.contentJson.setting || []" :key="index">
+            <el-card class="box-card" style="margin-top: 2%">
+
+              <div slot="header" class="clearfix" style="display: flex;justify-content: space-between; align-items: center;">
+                <div>
+                  <span>类型：</span>
+                  <el-tag
+                    type="primary"
+                    v-for="op in contentTypeOptions" 
+                    :key="op.dictValue"
+                    v-if="item.contentType == op.dictValue"
+                  >
+                    {{ op.dictLabel }}
+                </el-tag>
+                </div>
+                <div>
+                  发送状态：<el-tag type="primary" v-text="'待发送'"/>
+                </div>
+              </div>
+              
+              <!-- 文本 -->
+              <div v-if="item.contentType == 11" v-html="item.value"></div>
+              
+              <!-- 图片 -->
+              <div v-else-if="item.contentType == 2" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: end; width: 100%">
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.imgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 视频 -->
+              <div v-else-if="item.contentType == 6" class="message-style">
+                <video
+                  :src="item.videoUrl"
+                  controls
+                  style="width: 200px; height: 100px">
+                </video>
+              </div>
+
+              <!-- 语音 -->
+              <div v-else-if="item.contentType == 12" class="message-style">
+                <span>
+                  {{ item.value }}
+                </span>
+                <div v-if="!item.voiceUrl" style="margin-top: 3px"  >
+                  <span style="color: red">无语音地址</span>
+                </div>
+              </div>
+
+              <!-- 科普 -->
+              <div v-else-if="item.contentType == 9" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%"
+                  @click="openLink(item.linkUrl)">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.linkTitle }}</br>
+                      {{ item.linkDescribe }}
+                    </div>
+                    <!-- 点击图片时停止事件冒泡 -->
+                    <el-image
+                      style="width: 50px; height: 50px; flex-shrink: 0"
+                      :src="item.linkImageUrl"
+                      fit="contain"
+                      @click.stop="openImageViewer(item.linkImageUrl)" />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 疗法 -->
+              <div v-else-if="item.contentType == 20" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.packageName }}
+                    </div>
+                    <ImageUpload 
+                      :disabled="true"
+                      v-model="item.packageImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 直播 -->
+              <div v-else-if="item.contentType == 21" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.liveTitle }}
+                    </div>
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.liveImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 民品 -->
+              <div v-else-if="item.contentType == 22" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.productName }}
+                    </div>
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.productImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 药品 -->
+              <div v-else-if="item.contentType == 23" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.medicinesName }}
+                    </div>
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.medicinesImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 短视频 -->
+              <div v-else-if="item.contentType == 24" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.shortVideoName }}
+                    </div>
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.shortVideoImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 文章 -->
+              <div v-else-if="item.contentType == 25" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.articleName }}
+                    </div>
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.articleImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- 公开课 -->
+              <div v-else-if="item.contentType == 26" class="message-style">
+                <div
+                  style="background-color: white; padding: 10px; width: 100%">
+                  <div style="display: flex; justify-content: space-between; width: 100%">
+                    <div style="font-size: 13px; flex: 1; display: flex; align-items: center;">
+                      {{ item.openClassVideoName }}
+                    </div>
+                    <ImageUpload
+                      :disabled="true"
+                      v-model="item.openClassVideoImgUrl"
+                      type="image"
+                      :num="1"
+                      :file-size="1"
+                      :width="80"
+                      :height="80"
+                      style="margin-top: 1%;"
+                    />
+                  </div>
+                </div>
+              </div>
+
+            </el-card>
+          </div>
+        </template>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="contentDialog.isDialogVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 大图预览对话框 -->
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :modal="false"
+      width="500"
+      append-to-body>
+      <img
+        :src="this.dialogImageUrl"
+        style="display: block; max-width: 100%; margin: 0 auto"
+      />
+    </el-dialog>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <el-dialog 
+      title="标签搜索" 
+      :visible.sync="tagSearchConfig.visible" 
+      custom-class="dialog-search-tag" 
+      append-to-body
+    >
+      <div>搜索标签：
+        <el-input v-model="tagSearchConfig.queryParams.groupName" placeholder="请输入标签名称" clearable size="small"
+          style="width: 200px;margin-right: 10px" />
+        <el-button type="primary" icon="el-icon-search" size="mini"
+          @click="handleSearchTags()">
+          搜索
+        </el-button>
+        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="cancelSearchTags">重置</el-button>
+      </div>
+      <div class="dialog_body_tag">
+        <div v-for="item in tagSearchConfig.tagGroupList" :key="item.id">
+          <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
+            <span class="name-background">{{ item.name }}</span>
+          </div>
+          <div class="tag-container">
+            <a v-for="tagItem in item.tags" class="tag-box" @click="tagSelection(tagItem)"
+                :class="{ 'tag-selected': tagItem.isSelected || (tagSearchConfig.selectTags && tagSearchConfig.selectTags.some(tg => tg.id == tagItem.id)) }">
+                {{ tagItem.name }}
+            </a>
+          </div>
+        </div>
+      </div>
+      
+      <pagination 
+        v-show="tagSearchConfig.total > 0" 
+        :total="tagSearchConfig.total" 
+        :page.sync="tagSearchConfig.queryParams.pageNum"
+        :limit.sync="tagSearchConfig.queryParams.pageSize" 
+        @pagination="getSearchTagGroupList"
+      />
+      <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="tagSearchConfig.visible = false">确 定</el-button>
+          <el-button @click="tagSearchConfig.visible = false">取消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="客服搜索" :visible.sync="bindAISearch.visible" width="1000px" append-to-body>
+      <CusRoleList 
+        ref="QwUserList"
+        @confirm="customerSelectedConfirmCallForBind"
+        @selectionChange="customerSelectionChangeCallForBind" 
+        :selected="bindAISearch.selected"
+        :ids="customerIds"
+      />
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { exportSopLogs, listSopLogsList, delSopLogs, editCourseSopLogs} from '@/api/app/sopLogs';
+
+import { listTagGroupForUserBindTag } from "@/api/app/tag/tagGroup";
+import { getLiveOptions,} from "@/api/app/live";
+
+
+import CusRoleList from '@/views/app/user/CusRoleList.vue';
+import ImageUpload from "@/views/qw/sop/ImageUpload.vue";
+
+export default {
+  name: "sopLogsList",
+  components: {CusRoleList, ImageUpload},
+  props:{
+    rowDetailFrom:{},
+  },
+
+  watch:{
+    rowDetailFrom:{
+      handler(newVal){
+        // 当formData变化时重新查询
+        this.getList(newVal);
+      },
+      deep: true
+    }
+  },
+  computed: {
+    customerIds() {
+      return this.rowDetailFrom.qwUserIds ? this.rowDetailFrom.qwUserIds.split(',') : []
+    },
+  },
+  data() {
+    return {
+      //图片放大
+      dialogVisible: false,
+      dialogImageUrl:null,
+      //时间选择
+      scheduleTime: null,
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // SOP  定时任务表格数据
+      sopLogsList: [],
+
+      //成员状态
+      sopLogsStatus:[],
+      //消息来源
+      appMessageSendSourceFromOptions: [],
+
+      //SOP发送类型
+      sysQwSopType: [],
+
+      //发送的消息
+      contentDialog:{
+        isDialogVisible:false,
+        json: [],
+        videoId: null,
+        row: {},
+      },
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        fsUserId: null,
+        fsUserName: null,
+        phone: null,
+        tagIds: [],
+        customerIds: [],
+        sopId: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
+      tagSearchConfig: {
+        visible: false,//对话框是否展示
+        queryParams: {
+          groupName: null,
+          pageNum: 1,
+          pageSize: 10,
+        },
+        total: 0,
+        tagGroupList: [],
+        selected: [],
+      },
+      bindAISearch: {
+        visible: false,
+        selected: [],
+      },
+      contentTypeOptions: [],//发送消息的内容类型
+    };
+  },
+  created() {
+    this.getList(this.rowDetailFrom);
+
+    //发送状态
+    this.getDicts("app_sopLogs_status").then(response => {
+      this.sopLogsStatus = response.data;
+    });
+
+    //消息来源
+    this.getDicts("app_message_send_source_from").then(response => {
+      this.appMessageSendSourceFromOptions = response.data;
+    });
+
+    this.getDicts("app_sop_plugin_settingType").then(response => {
+      this.contentTypeOptions = response.data;
+    });
+
+  },
+  methods: {
+    async getLiveList() {
+      return await getLiveOptions();
+    },
+    getList(val) {
+      let qp = {...this.queryParams};
+      qp['sopId'] = val.id || this.rowDetailFrom.id;
+      qp['tagIds'] = this.tagSearchConfig.selected.map(tag => tag.tagId);
+      qp['customerIds'] = this.bindAISearch.selected.map(s => s.id);
+      this.loading = true;
+      listSopLogsList(qp).then(response => {
+        this.sopLogsList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        qwUserName: null,
+        externalUserName: null,
+        logType: null,
+        contentJson: null,
+        sendStatus: null,
+        sendTime: null,
+        companyId: null,
+        receivingStatus: null,
+        msgId: null,
+        sendType: null,
+        sopId: null
+      };
+      this.resetForm("form");
+    },
+
+    openImageViewer(url) {
+      // 打开大图预览对话框
+      this.dialogImageUrl=url
+      this.dialogVisible = true;
+    },
+    openLink(url){
+      // 使用 window.open 打开链接
+      window.open(url, '_blank');
+    },
+    //查看发送的消息体
+    showContentDialog(row) {
+      this.contentDialog.row = row;
+      const sanitizedJson = row.contentJson.replace(/[\u0000-\u001F\u007F]/g, '');
+      const parsedData = JSON.parse(sanitizedJson);
+      if (row.appSendStatus !== '0') {
+        const remarkDetailStr = row.remarkDetail.replace(/[\u0000-\u001F\u007F]/g, '');
+        const remarkDetailArray = JSON.parse(remarkDetailStr);
+        remarkDetailArray.map(item => {
+          if (item.meta) {
+            let metaSource = item.meta.replace(/[\u0000-\u001F\u007F]/g, '');
+            let targetMeta = JSON.parse(metaSource);
+            parsedData.setting.map(async s => {
+              if (targetMeta.contentType == s.contentType) {
+                let flag = false;
+                //科普
+                if (s.contentType == 9 && s.appLinkUrl == targetMeta.appLinkUrl) {
+                  flag = true;
+                }
+                //文本
+                else if (s.contentType == 11 && s.value == targetMeta.value) {
+                  flag = true;
+                }
+                //图片
+                else if (s.contentType == 2 && s.imgUrl == targetMeta.imgUrl) {
+                  flag = true;
+                }
+                //视频
+                else if (s.contentType == 6 && s.videoUrl == targetMeta.videoUrl) {
+                  flag = true;
+                }
+                //语音
+                else if (s.contentType == 12 && s.voiceUrl == targetMeta.voiceUrl) {
+                  flag = true;
+                }
+                //疗法
+                else if (s.contentType == 20 && s.packageId == targetMeta.packageId) {
+                  flag = true;
+                }
+                //直播
+                else if (s.contentType == 21 && s.liveId == targetMeta.liveId) {
+                  flag = true;
+                  let defaultLive = await this.getLiveList();
+                  let liveInfo = defaultLive.data.find(tmp => tmp.liveId == s.liveId);
+                  if (liveInfo && liveInfo.liveName) {
+                    s['liveTitle'] = liveInfo.liveName;
+                  } else {
+                    s['liveTitle'] = '--';
+                  }
+                }
+                //民品
+                else if (s.contentType == 22 && s.productId == targetMeta.productId) {
+                  flag = true;
+                }
+                //药品
+                else if (s.contentType == 23 && s.medicinesId == targetMeta.medicinesId) {
+                  flag = true;
+                }
+                //短视频
+                else if (s.contentType == 24 && s.shortVideoId == targetMeta.shortVideoId) {
+                  flag = true;
+                }
+                //文章
+                else if (s.contentType == 25 && s.articleId == targetMeta.articleId) {
+                  flag = true;
+                }
+                //公开课
+                else if (s.contentType == 26 && s.openClassVideoId == targetMeta.openClassVideoId) {
+                  flag = true;
+                }
+                if (flag) {
+                  // 把源对象所有key 赋值给目标响应式对象，不破坏代理
+                  Object.keys(s).forEach(key => {
+                    this.$set(item, key, s[key]);
+                  })
+                }
+              }
+            })
+          }
+        })
+        this.contentDialog.json = remarkDetailArray;
+      }
+      this.contentDialog.contentJson = parsedData;
+      this.contentDialog.videoId = parsedData.videoId;
+      this.contentDialog.isDialogVisible = true;
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList(this.rowDetailFrom);
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.tagSearchConfig.selected = [];
+      this.bindAISearch.selected = [];
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        userId: null,
+        nickName: null,
+        phone: null,
+        tagsId: [],
+        customerIds: [],
+      };
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除【执行详情】id为"【' + ids + '】"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        return delSopLogs(ids);
+      }).then(() => {
+        this.getList(this.rowDetailFrom);
+        this.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+
+    /**
+    * 批量修改完课的发送
+    */
+    handleEditCourse(row){
+
+      // 获取原始ids（确保是数组）
+      let ids = row.id || this.ids;
+      if (!Array.isArray(ids)) {
+        ids = [ids];
+      }
+
+      // 过滤掉remark为'E级客户不发送'的项
+      const filteredIds = ids.filter(id => {
+        const item = this.sopLogsList.find(item => item.id === id);
+        return item?.remark !== 'E级客户不发送';
+      });
+
+      // 如果没有可发送的记录
+      if (filteredIds.length === 0) {
+        this.msgWarning("没有可发送的记录（E级客户已自动排除）");
+        return;
+      }
+
+      this.$confirm('确认要再次发送【执行详情】编号为"【' + filteredIds.join(',') + '】"的【完课】记录?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        return editCourseSopLogs(filteredIds);
+      }).then(() => {
+        this.getList(this.rowDetailFrom);
+        this.msgSuccess("已经 修改记录为 待发送~");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      let qp = {...this.queryParams};
+      qp['sopId'] = val.id || this.rowDetailFrom.id;
+      qp['tagIds'] = this.tagSearchConfig.selected.map(tag => tag.tagId);
+      qp['customerIds'] = this.bindAISearch.selected;
+      this.$confirm('是否确认导出所有自动化  定时任务数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.exportLoading = true;
+          return exportSopLogs(qp);
+        }).then(response => {
+          this.download(response.msg);
+          this.exportLoading = false;
+        }).catch(() => {});
+    },
+    openTagSearchPage() {
+      this.getSearchTagGroupList();
+      this.tagSearchConfig.visible = true;
+    },
+    getSearchTagGroupList() {
+      listTagGroupForUserBindTag(this.tagSearchConfig.queryParams).then(response => {
+        let tRows = response.rows;
+        if (tRows && tRows.length > 0) {
+          tRows.forEach(group => {
+            group.tags.forEach(tag => {
+              if (this.tagSearchConfig.selected.some(item => item.tagId === tag.id)) {
+                tag.isSelected = true;
+              } else {
+                tag.isSelected = false;
+              }
+            })
+          });
+        }
+        this.tagSearchConfig.tagGroupList = tRows;
+        this.tagSearchConfig.total = response.total;
+      });
+    },
+    getTagGroupList() {
+      listTagGroupForUserBindTag(this.tagSearchConfig.queryParams).then(response => {
+        this.tagSearchConfig.tagGroupList = response.rows;
+        this.tagSearchConfig.total = response.total;
+      });
+    },
+    openCusSearchPage() {
+      this.bindAISearch.visible = true;
+    },
+    cancelSearchTags() {
+      this.tagSearchConfig.queryParams = {
+        groupName: null,
+        pageNum: 1,
+        pageSize: 10,
+      }
+      this.getSearchTagGroupList();
+    },
+    handleSearchTags() {
+      this.tagSearchConfig.queryParams.pageNum = 1;
+      this.getSearchTagGroupList();
+    },
+    tagSelection(row) {
+      row.isSelected = !row.isSelected;
+      if (row.isSelected) {
+        this.tagSearchConfig.selected.push({tagId: row.id, tagName: row.name});
+      } 
+      //
+      else {
+        this.tagSearchConfig.selected = this.tagSearchConfig.selected.filter(item => item.tagId !== row.id);
+      }
+      this.$forceUpdate();
+    },
+    /**
+     * 客服选中
+     */
+    customerSelectionChangeCallForBind(config) {
+      let selected = config.selected;
+      //单行操作
+      if (config.mode === 0) {
+        let row = config.row;
+        if (selected) {
+          if (!this.bindAISearch.selected.some(s => s.id == row.id)) {
+            this.bindAISearch.selected.push(row)
+          }
+        } else {
+          this.bindAISearch.selected = this.bindAISearch.selected.filter(m => m.id != row.id);
+        }
+      }
+      //操作当前页所有行
+      else {
+        let list = config.rows;
+        if (selected) {
+          list.map(l => {
+            if (!this.bindAISearch.selected.some(s => s.id == l.id)) {
+              this.bindAISearch.selected.push(l)
+            }
+          });
+        } else {
+          list.map(l => {
+            for (let i = 0; i < this.bindAISearch.selected.length; i++) {
+              if (l.id == this.bindAISearch.selected[i].id) {
+                this.bindAISearch.selected.splice(i, 1);
+              }
+            }
+          })
+        }
+      }
+    },
+    /**
+     * 确认客服
+     * @param list 
+     */
+    customerSelectedConfirmCallForBind() {
+      this.bindAISearch.visible = false;
+    },
+    handleCloseCus(cus) {
+      this.bindAISearch.selected = this.bindAISearch.selected.filter(item => item.id != cus.id);
+    },
+    handleCloseTags(tag) {
+      this.tagSearchConfig.selected = this.tagSearchConfig.selected.filter(item => item.tagId != tag.tagId);
+    },
+  }
+};
+</script>
+<style scoped>
+.message-stayle{
+  display: flex;
+  justify-content: normal;
+  align-items: center;
+  margin-top: 10px;
+}
+.message-stayle .el-link {
+  white-space: normal; /* 允许换行 */
+  word-break: break-all; /* 单词中间断行 */
+  overflow-wrap: break-word; /* 允许在单词内换行 */
+}
+.message-stayle span {
+  word-break: break-all;
+}
+
+.tag-container {
+  display: flex;
+  flex-wrap: wrap; /* 超出宽度时自动换行 */
+  gap: 8px; /* 设置标签之间的间距 */
+}
+
+.name-background {
+  display: inline-block;
+  background-color: #abece6; /* 背景颜色 */
+  padding: 4px 8px; /* 调整内边距，让背景包裹文字 */
+  border-radius: 4px; /* 可选：设置圆角 */
+}
+
+.tag-box {
+  padding: 8px 12px;
+  border: 1px solid #989797;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.tag-selected {
+  background-color: #00bc98;
+  color: #fff;
+  border-color: #00bc98;
+}
+
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+
+.dialog_body_tag {
+  height: 450px;
+  overflow: auto;
+}
+</style>

src/views/app/sop/userLogs/sopUserLogsSchedule.vue

@@ -0,0 +1,613 @@
+<template>
+  <div class="app-container">
+    <div style="margin-bottom: 10px">
+      <el-card>
+        <span class="custom-style" style="display: block; margin-bottom: 10px">自动化规则名称：{{ sopName }}</span>
+        <span class="custom-style" style="display: block; margin-bottom: 10px">自动化规则编号：{{ queryParams.sopId }}</span>
+        <span class="custom-style" style="display: block;">模板编号：{{ tempId }}</span>
+      </el-card>
+    </div>
+
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+      <el-form-item label="客服id" prop="customerId">
+        <el-input
+          v-model="queryParams.customerId"
+          @input="queryParams.customerId = queryParams.customerId.replace(/[^\d]/g, '')"
+          placeholder="请输入客服id"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="客服名称" prop="customerName">
+        <el-input v-model="queryParams.customerName" placeholder="请输入客服名称" clearable size="small"
+          @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="会员id" prop="userId">
+        <el-input
+          v-model="queryParams.userId"
+          @input="queryParams.userId = queryParams.userId.replace(/[^\d]/g, '')"
+          placeholder="请输入会员id"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="营期时间" prop="startTime">
+        <el-date-picker clearable size="small" v-model="queryParams.startTime" type="date" value-format="yyyy-MM-dd"
+          placeholder="选择营期时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
+          <el-option v-for="dict in sopUserLogsDelStatus" :key="dict.dictValue" :label="dict.dictLabel"
+            :value="dict.dictValue" />
+        </el-select>
+      </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-row :gutter="10" class="mb8">
+
+      <el-col :span="1.5">
+        <el-tooltip class="item" effect="dark"
+            content="此功能用于给 选中的 营期 内【所有的】客户发送消息" placement="top">
+          <el-button
+            type="warning"
+            icon="el-icon-s-promotion"
+            size="medium"
+            :disabled="multiple"
+            @click="openGroupSendMessagePage"
+          >一键群发
+          </el-button>
+        </el-tooltip>
+      </el-col>
+
+      <el-col :span="1.5">
+        <el-tooltip class="item" effect="dark" content="删除营期之后,将不会在给原营期的客户发送消息，ps:删除之后不可恢复" placement="top">
+          <el-button type="danger" icon="el-icon-s-promotion" size="medium" :disabled="multiple"
+            @click="handleDeleteUserLogs">批量删除营期
+          </el-button>
+
+        </el-tooltip>
+      </el-col>
+      <el-col :span="1.5">
+        <el-tooltip class="item" effect="dark" content="批量修改营期之后,将不会在给原营期的客户发送消息，ps:修改日期之后原日期不可恢复" placement="top">
+          <el-button type="info" icon="el-icon-s-promotion" size="medium" :disabled="multiple"
+            @click="handleUpdateTimeUserLogs">批量修改营期时间
+          </el-button>
+        </el-tooltip>
+      </el-col>
+    </el-row>
+
+    <div style="color: #999;font-size: 14px;display: flex;align-items: center;margin-bottom: 5px">
+      <i class="el-icon-info"></i>
+      【营期一键群发】：此功能用于给 选中的 营期 内【所有的】客户发送 消息
+    </div>
+
+    <div style="color: #999;font-size: 14px;display: flex;align-items: center;margin-bottom: 5px">
+      <i class="el-icon-info"></i>
+      【批量删除营期】：此功能用于删除选中的【整个营期】,删除之后将不会在给原营期的客户发送消息，ps:删除之后不可恢复
+    </div>
+
+    <div style="color: #999;font-size: 14px;display: flex;align-items: center;margin-bottom: 5px">
+      <i class="el-icon-info"></i>
+      【批量修改营期时间】：此功能用于修改选中的【整个营期时间】,修改之后将不会在给原营期时间的客户发送消息，ps:修改之后不可恢复
+    </div>
+
+    <div style="color: #999;font-size: 14px;display: flex;align-items: center;margin-bottom: 5px">
+      <i class="el-icon-info"></i>
+      【天数】：【列表：营期时间】对应列表中的天数是几 就代表着 插件助手 会发送【任务模板】里的第几天的消息
+    </div>
+    
+    <el-table border v-loading="loading" :data="sopUserLogsList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="营期编号" align="center" prop="id" />
+      <el-table-column label="客服id" align="center" prop="customerId" />
+      <el-table-column label="客服名称" align="center" prop="customerName" />
+      <el-table-column label="营期时间" align="center" prop="startTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="待发天数" align="center" prop="countDays"/>
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <div v-if="scope.row.userId && scope.row.userId.includes('null')">
+            <span style="color: orange;">营期异常</span>
+          </div>
+          <div v-else>
+            <dict-tag :options="sopUserLogsDelStatus" :value="scope.row.status" />
+          </div>
+
+        </template>
+      </el-table-column>
+
+      <!-- 过滤模式是根据标签 -->
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.status == 1" size="mini" type="text" icon="el-icon-edit"
+            @click="handleSelect(scope.row)">营期详情
+          </el-button>
+          <el-button v-if="scope.row.userId && scope.row.userId.includes('null')" size="mini" type="text"
+            icon="el-icon-s-check" @click="handleRepairLogs(scope.row)">修复营期
+          </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-drawer :title="sopUserLogsInfoDialog.title" :visible.sync="sopUserLogsInfoDialog.visible" size="88%"
+      style="font-weight: bolder">
+      <sop-user-logs-info-details
+        :refreshCount="sopUserLogsInfoDialog.refreshCount"
+        :params="sopUserLogsInfoDialog.params"
+      />
+    </el-drawer>
+  
+    <el-dialog title="批量修改客户营期" :visible.sync="updateLogsForm.visible" width="500px" append-to-body>
+      <el-form ref="updateLogsForm" :model="updateLogsForm" :rules="updateLogsForm.rules" label-width="120px">
+        <el-form-item label="选择营期时间" prop="paramTime">
+          <el-date-picker clearable size="small"
+            v-model="updateLogsForm.pTime"
+            type="date"
+            value-format="yyyy-MM-dd"
+            placeholder="选择营期时间">
+          </el-date-picker>
+        </el-form-item>
+      </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>
+
+    <el-dialog title="一键群发"
+      :visible.sync="groupSendMessageForm.visible" width="1000px" append-to-body :close-on-click-modal="false">
+      <group-send-message
+        :visible="groupSendMessageForm.visible"
+        :ids="groupSendMessageForm.ids"
+        :sourceType="0"
+        @changeGroupSendMessageVisible="changeGroupSendMessageVisible"
+      />
+    </el-dialog>
+
+  </div>
+
+</template>
+
+<script>
+import {
+  delSopUserLogs,
+  exportSopUserLogs,
+  listSopUserLogs,
+  repairSopUserLogs,
+  addGroupChat,
+  updateLogDate,
+  updateTimeSopUserLogs
+} from "@/api/app/userLogs";
+import SopUserLogsInfoDetails from "@/views/app/sop/userLogsInfo/sopUserLogsInfoDetails.vue";
+import groupSendMessage from "@/views/app/sop/userLogsInfo/groupSendMessage.vue";
+
+export default {
+  name: "sopUserLogsSchedule",
+  components: {
+    SopUserLogsInfoDetails,
+    groupSendMessage,
+  },
+  props: {
+    rowDetailFrom: {},
+  },
+  data() {
+    return {
+      groupSendMessageForm: {
+        ids: [],
+        visible: false,
+      },
+      qwUserIds: [],
+      sopUserLogId: null,
+      companyUserLists: [],
+      sopName: '',
+      tempId: '',
+      listUser: {
+        title: '选择发送人',
+        open: false
+      },
+      updateLogsForm: {
+        visible: false,
+        pTime: null,
+        rules: {
+          pTime: { required: true, message: '选择的时间不能为空', trigger: 'blur' }
+        }
+      },
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      filterMode: 1,
+      // 选中数组
+      ids: [],
+      chatNames: [],
+      statusOptions: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      sysQwSopAiContentType: [],
+      userSelectList: [],
+      // sopUserLogs表格数据
+      sopUserLogsList: [],
+      sopUserLogsDelStatus: [],
+      // 弹出层标题
+      title: "",
+      mini: {
+        open: false,
+        loading: false,
+        row: {},
+      },
+      // 是否显示弹出层
+      open: false,
+      // 一键发群相关数据
+      uploadUrl: process.env.VUE_APP_BASE_API + "/app/common/uploadOSS",
+      uploadUrlByVoice: process.env.VUE_APP_BASE_API + "/app/common/uploadOSSByHOOKVoice",
+      msgForm: {
+        videoId: null,
+        courseId: null,
+        courseType: null,
+        userIdParam: null,
+        sendType: 1,
+        setting: null,
+        ids: null,
+        sopId: null,
+        startTime: null,
+        chatIds: [],
+        filterMode: 2,
+        sendTime: null,
+        sendTimeType: 1, // 添加字段：1-当天发送，2-次日发送
+      },
+      sendMsgOpen: {
+        title: '一键批量群发',
+        open: false,
+        row: {},
+        ids: null,
+        chatIds: [],
+      },
+      msgRules: {},
+      videoList: [],
+      chatList: [],
+      setting: [],
+      // SOP科普观看状态
+      sysFsSopWatchStatus: [],
+      // 查询参数
+      addGroupData: {
+        open: false,
+        userOpen: false,
+        selectChat: [],
+        form: {
+          chatIds: [],
+        },
+      },
+      updateTimeData: {
+        open: false,
+        form: {
+          date: null,
+        },
+      },
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        sopId: null,
+        userLogsId: null,
+        sopTempId: null,
+        useId: null,
+        customerId: null,
+        customerName: null,
+        startTime: null,
+        status: null,
+        type: null,
+        chatName: null,
+      },
+      // 表单参数
+      form: {},
+      tempForm: {
+        setting: null,
+        videoIdSet: null,
+        courseIdSet: null,
+      },
+      // 表单校验
+      rules: {},
+      sopUserLogsInfoDialog: {
+        title: null,
+        visible: false,
+        refreshCount: 1,
+        params: null,
+      },
+    };
+  },
+  created() {
+    this.queryParams.sopId = this.$route.params.id;
+    this.sopName = this.$route.query.name;
+    this.filterMode = this.$route.query.filterMode;
+    this.tempId = this.$route.query.tempId;
+    this.queryParams.type = this.$route.query.type;
+    this.getDicts("app_normal_disabled_status").then(response => {
+      this.statusOptions = response.data;
+    });
+
+    this.getDicts("app_normal_del_status").then(response => {
+      this.sopUserLogsDelStatus = response.data;
+    });
+    this.getDicts("app_sop_plugin_settingType").then(response => {
+      this.sysQwSopAiContentType = response.data;
+    });
+    this.getDicts("app_sop_watch_status").then(response => {
+      this.sysFsSopWatchStatus = response.data;
+    });
+
+    this.queryParams.sopId = this.$route.params.id;
+    this.sopName = this.$route.query.name;
+    this.filterMode = this.$route.query.filterMode;
+    this.tempId = this.$route.query.tempId;
+    this.queryParams.type = this.$route.query.type;
+    this.getList()
+  },
+  methods: {
+
+    /** 查询sopUserLogs列表 */
+    getList() {
+      this.loading = true;
+      listSopUserLogs(this.queryParams).then(response => {
+        this.sopUserLogsList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+
+    addSetList() {
+      const newSetting = {
+        contentType: '1',
+        value: '',
+        sendTimeType: 1, // 为每个规则项添加发送时间类型
+      };
+      this.setting.push(newSetting);
+    },
+
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        sopId: null,
+        sopTempId: null,
+        qwUserId: null,
+        externalId: null,
+        corpId: null,
+        startTime: null,
+        status: 0,
+        userId: null
+      };
+      this.resetForm("form");
+    },
+
+    /**
+     * 营期一键群发
+     */
+    openGroupSendMessagePage() {
+      if (this.ids.length === 0) {
+        return this.$message.error('请勾选具体群发记录！');
+      }
+      this.groupSendMessageForm.ids = this.ids;
+      this.groupSendMessageForm.visible = true;
+    },
+    changeGroupSendMessageVisible(visible) {
+      this.groupSendMessageForm.visible = visible;
+    },
+    /**
+     *  批量修改营期
+     */
+    handleUpdateTimeUserLogs() {
+      this.updateLogsForm.visible = true;
+    },
+
+    /**
+     *  删除营期
+     */
+    handleDeleteUserLogs() {
+      const ids = this.ids;
+      this.$confirm('是否确认删除编号为"' + ids + '"的数据项【注意！！删除后不可恢复，请谨慎操作】?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return delSopUserLogs(ids);
+      }).then(() => {
+        this.getList();
+        this.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    flashNotify() {
+      this.getList();
+    },
+
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      if (this.filterMode == 2) {
+        this.chatNames = selection.map(item => item.chatName);
+      }
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+
+    handleSelect(val) {
+      val.filterMode = this.filterMode;
+      this.sopUserLogsInfoDialog.title = '【客服id/名称】：' + val.customerId + '/' + val.customerName + ',  ' + '【营期时间】：' + val.startTime + '  ' + '【天数】：' + val.countDays;
+      this.sopUserLogsInfoDialog.params = val;
+      this.sopUserLogsInfoDialog.refreshCount = this.sopUserLogsInfoDialog.refreshCount + 1;
+      this.sopUserLogsInfoDialog.visible = true;
+    },
+
+    handleRepairLogs(val) {
+      this.loading = true;
+      let loadingRock = this.$loading({
+        lock: true,
+        text: '正在修复中请稍后~~！！',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+
+      repairSopUserLogs(val).then(res => {
+        this.msgSuccess("修复成功成功");
+      }).catch(res => {
+      }).finally(res => {
+        loadingRock.close();
+        this.loading = false;
+        this.getList();
+      })
+    },
+
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有sopUserLogs数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.exportLoading = true;
+        return exportSopUserLogs(queryParams);
+      }).then(response => {
+        this.download(response.msg);
+        this.exportLoading = false;
+      }).catch(() => {
+      });
+    },
+
+    updateGroupTime() {
+      this.updateTimeData.open = true;
+      this.updateTimeData.form = { date: new Date() };
+    },
+
+    submitUpdateTimeForm() {
+      let form = {
+        date: this.updateTimeData.form.date,
+        ids: this.ids,
+      }
+      updateLogDate(form).then(e => {
+        this.updateTimeData.open = false;
+        this.getList();
+      });
+    },
+
+    submitAddGroupForm() {
+      let form = {
+        id: this.queryParams.sopId,
+        qwUserIds: this.userSelectList.join(),
+        chatIds: this.addGroupData.form.chatIds.join(),
+        date: this.addGroupData.form.date,
+      }
+      addGroupChat(form).then(e => {
+        this.addGroupData.open = false;
+        this.getList();
+      });
+    },
+
+    handleCompanyUser() {
+      setTimeout(() => {
+        this.$refs.QwUserList.getDetails(this.queryParams.corpId, this.queryParams.type, 2);
+      }, 1);
+      this.addGroupData.userOpen = true;
+    },
+
+    handleClosegroupUser(list) {
+      const index = this.userSelectList.findIndex(t => t === list);
+      if (index !== -1) {
+        this.userSelectList.splice(index, 1);
+        this.qwUserIds.splice(index, 1);
+        this.loadChatList()
+      }
+    },
+
+    loadChatList() {
+      // chatListAll(this.qwUserIds.join(), this.queryParams.corpId, this.queryParams.sopId).then(e => {
+      //   this.addGroupData.selectChat = e.data;
+      // })
+    },
+
+    selectUserList(list) {
+      this.addGroupData.userOpen = false;
+      list.forEach(obj => {
+        if (!this.userSelectList.some(item => item == obj.id)) {
+          this.userSelectList.push(obj.id);
+          this.qwUserIds.push(obj.qwUserId);
+        }
+      });
+      this.loadChatList()
+    },
+    submitForm() {
+      this.$refs["updateLogsForm"].validate(valid => {
+        if (valid) {
+
+          this.updateLogsForm.ids = this.ids;
+          this.updateLogsForm.sopId= this.queryParams.sopId;
+
+          let loadingRock = this.$loading({
+            lock: true,
+            text: '正在执行中请稍后~~请不要刷新页面！！',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)'
+          });
+          updateTimeSopUserLogs(this.updateLogsForm).then(response => {
+            this.msgSuccess("修改成功");
+            loadingRock.close();
+          }).finally(res=>{
+            loadingRock.close();
+          })
+        }
+      });
+    },
+    cancel() {
+      this.resetBatch();
+    },
+    resetBatch() {
+      this.updateLogsForm.visible = false;
+      this.updateLogsForm.pTime = null;
+    },
+  }
+};
+</script>
+
+<style>
+.custom-style {
+  font-weight: bold; /* 加粗 */
+}
+</style>

src/views/app/sop/userLogsInfo/groupSendMessage.vue

@@ -0,0 +1,1731 @@
+<template>
+  <div class="app-container">
+
+    <el-alert type="warning" :closable="false" show-icon>
+      <template #title>
+        <span style="font-size: 25px; line-height: 1.5;">
+          此功能用于给 选中的 营期 内【所有的】客户发送 消息
+        </span>
+      </template>
+    </el-alert>
+
+    <el-form 
+      ref="groupSendMessageForm"
+      :model="groupSendMessageForm"
+      :rules="groupSendRules"
+      label-width="100px"
+      style="margin-top: 8px;"
+      :loading="loading"
+    >
+      <el-form-item label="科普"
+        style="margin-bottom: 15px;"
+        prop="videoId"
+      >
+        <!-- 禁用条件：操作类型为查看 -->
+        <el-select
+          v-model="groupSendMessageForm.courseId"
+          placeholder="默认50条，可输入关键字检索"
+          style=" margin-right: 10px;"
+          size="mini"
+          filterable
+          clearable
+          :loading="courseLoading"
+          remote
+          :remote-method="(keyword) => handleCourseRemoteSearch(keyword)"
+          @change="courseChangeUpdate()"
+        >
+          <el-option
+            v-for="dict in courseList"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="parseInt(dict.dictValue)"
+          />
+        </el-select>
+
+        <el-select
+          v-model="groupSendMessageForm.videoId"
+          placeholder="请选择小节"
+          size="mini"
+          style=" margin-right: 10px;"
+          filterable
+          clearable
+          @change="videoIdChange()"
+        >
+          <el-option
+            v-for="dict in videoList"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="parseInt(dict.dictValue)"
+          >
+            <div :style="{ color: dict.isPause == 1 ? '#f56c6c' : 'inherit', display: 'flex', alignItems: 'center' }">
+              <span>{{ dict.dictLabel }}</span>
+              <span v-if="dict.isPause == 1" style="font-size: 12px; margin-left: 8px; color: #f56c6c;">
+                  (该科普已被关闭，无法正常发送)
+              </span>
+            </div>
+          </el-option>
+        </el-select>
+
+        <!-- 禁用条件：操作类型为查看 -->
+        <!-- 渲染条件：消息类型不为AI触达 -->
+        <el-select
+          v-model="groupSendMessageForm.courseType"
+          placeholder="请选择消息类型"
+          size="mini"
+          style=" margin-right: 10px;"
+        >
+          <el-option
+            v-for="dict in sysFsSopWatchStatus"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="Number(dict.dictValue)"
+          />
+        </el-select>
+
+      </el-form-item>
+
+      <el-form-item label="规则" style="height: 500px; overflow: auto;">
+        <!-- 遍历规则 所有内容【存在多个】 -->
+        <div
+          v-for="(content, contentIndex) in groupSendMessageForm.setting"
+          :key="contentIndex"
+          style="
+            background-color: #fdfdfd;
+            border: 1px solid #e6e6e6;
+            margin-bottom: 20px;
+          "
+        >
+          <el-row style="padding-bottom: 20px">
+            <el-col :span="22">
+              <el-form 
+                :model="content"
+                label-width="100px"
+              >
+                <el-form-item label="内容类别"
+                  style="margin: 2%"
+                >
+                  <div>
+                    <el-radio-group 
+                      v-model="content.contentType"
+                      @change="handleContentTypeChange()"
+                    >
+                      <el-radio
+                        :key="item.dictValue"
+                        :label="item.dictValue"
+                        v-for="item in sysQwSopAiContentType"
+                      >{{ item.dictLabel }}
+                      </el-radio>
+                    </el-radio-group>
+                  </div>
+
+                </el-form-item>
+
+                <!-- 科普 -->
+                <el-form-item label="内容" v-if="9 == content.contentType">
+
+                  <div>
+                    <el-card class="box-card">
+                      <el-form-item label="链接标题:"
+                        label-width="100px"
+                        required
+                      >
+                        <el-input
+                          v-model="content.linkTitle"
+                          placeholder="请输入链接标题"
+                          style="width: 90%;"
+                        />
+                      </el-form-item>
+                      <el-form-item label="链接描述:"
+                        label-width="100px"
+                        required
+                      >
+                        <el-input
+                          type="textarea"
+                          :rows="3"
+                          v-model="content.linkDescribe"
+                          placeholder="请输入链接描述"
+                          style="width: 90%;margin-top: 1%;"
+                        />
+                      </el-form-item>
+                      <el-form-item label="链接封面:"
+                        label-width="100px"
+                        required
+                      >
+                        <ImageUpload
+                          v-model="content.linkImageUrl"
+                          type="image"
+                          :num="1"
+                          :file-size="1"
+                          :width="150"
+                          :height="150"
+                          style="margin-top: 1%;"
+                        />
+                      </el-form-item>
+                      <el-form-item label="链接地址:"
+                        label-width="100px"
+                      >
+                        <el-tag 
+                          type="warning"
+                          v-model="content.isBindUrl"
+                        >选择的科普小节
+                          即为卡片链接地址
+                        </el-tag>
+                      </el-form-item>
+                      <el-form-item label="课节过期时间">
+                        <el-row>
+                          <el-input 
+                            type="number"
+                            v-model="content.expiresDays"
+                            style="width: 200px"
+                          >
+                            <template slot="append">天</template>
+                          </el-input>
+                        </el-row>
+                        <el-row>
+                          <span class="tip">填写0或不填时，默认为系统配置的默认时间</span>
+                        </el-row>
+                      </el-form-item>
+                    </el-card>
+                  </div>
+
+                </el-form-item>
+
+                <!-- 文本 -->
+                 <el-form-item label="内容" v-else-if="11 == content.contentType">
+                  <div
+                    style="
+                      color: #999;
+                      font-size: 14px;
+                      display: flex;
+                      align-items: center;
+                    "
+                  >
+                    <i class="el-icon-info"></i>
+                    多语句分割符：|&| 例如：'语句1|&|语句2'
+                  </div>
+                  <el-input
+                    v-model="content.value"
+                    type="textarea"
+                    :rows="3"
+                    placeholder="内容"
+                    style="width: 90%; margin-top: 10px;"
+                    @keydown.native="handleKeydown($event, contentIndex)"
+                    :ref="`textarea-${contentIndex}`"
+                  />
+
+                  <!-- 修改按钮部分 -->
+                  <el-link
+                    type="primary"
+                    @click="toggleSalesCall(contentIndex)"
+                    style="margin-top: 10px;"
+                    >
+                      {{ content.isSalesCallAdded ? '移除#客服称呼#' : '添加#客服称呼#' }}
+                  </el-link>
+
+                  <el-link
+                    type="primary"
+                    style="margin-top: 10px;margin-left:10px"
+                    @click="showOpenContent(contentIndex)"
+                  >
+                    查看分割内容
+                  </el-link>
+
+                  <el-link
+                    type="primary"
+                    style="margin-top: 10px;margin-left:10px"
+                    @click="copySpliter()"
+                  >
+                    复制分隔符
+                  </el-link>
+
+                </el-form-item>
+
+                <!-- 语音 -->
+                <el-form-item label="内容" v-else-if="12 == content.contentType">
+                  
+                  <div>
+                    <el-input
+                      v-model="content.value"
+                      type="textarea"
+                      :rows="3"
+                      maxlength="66"
+                      show-word-limit
+                      placeholder="输入要转为语音的内容"
+                      style="width: 90%;margin-top: 10px;"
+                      @input="handleInputVoiceText(content.value, content)"
+                    />
+                  </div>
+
+                </el-form-item>
+
+                <!-- 图片 -->
+                <el-form-item label="内容" v-else-if="2 == content.contentType">
+                  
+                  <ImageUpload
+                    v-model="content.imgUrl"
+                    type="image"
+                    :num="1"
+                    :width="150"
+                    :height="150"
+                  />
+
+                </el-form-item>
+
+                <!-- 视频 -->
+                <el-form-item label="内容" v-else-if="6 == content.contentType">
+                
+                  <div>
+                    <el-form-item 
+                      label="上传视频："
+                      prop="videoUrl"
+                      label-width="100px"
+                    >
+                      <el-upload
+                        v-model="content.videoUrl"
+                        class="avatar-uploader"
+                        :action="uploadUrl"
+                        :show-file-list="false"
+                        :on-success="(res, file) => handleSuccessVideo(res, file, content)"
+                        :before-upload="beforeUploadVideo"
+                      >
+                        <i class="el-icon-plus avatar-uploader-icon"></i>
+                      </el-upload>
+                      <video 
+                        v-if="content.videoUrl"
+                        :src="content.videoUrl"
+                        controls
+                        style="width: 200px;height: 100px"
+                      >
+                      </video>
+                    </el-form-item>
+                  </div>
+
+                </el-form-item>
+
+                <!-- 疗法 -->
+                <el-form-item label="内容" v-else-if="20 == content.contentType">
+                    
+                  <el-card class="box-card">
+                    <el-form-item 
+                      label="选择疗法:"
+                      label-width="100px"
+                      required
+                    >
+                      <el-select
+                        v-model="content.packageId"
+                        placeholder="默认50条，可输入关键字检索"
+                        style=" margin-right: 10px; width: 230px;"
+                        size="mini"
+                        filterable
+                        clearable
+                        :loading="content.meta.pkgLoading"
+                        remote
+                        :remote-method="(keyword) => handlePkgRemoteSearch(keyword, content)"
+                        @change="pkgChangeUpdate(content)"
+                      >
+                        <el-option
+                          v-for="dict in (content.meta && content.meta.pkgList ? content.meta.pkgList : [])"
+                          :key="dict.packageId"
+                          :label="`${dict.packageName}(${dict.packageId})`"
+                          :value="parseInt(dict.packageId)"
+                        />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item 
+                      label="疗法名称:"
+                      label-width="100px"
+                    >
+                      <el-input
+                        disabled
+                        :rows="3"
+                        v-model="content.packageName"
+                        style="width: 90%;margin-top: 1%;"
+                      />
+                    </el-form-item>
+                    <el-form-item 
+                      label="疗法封面:"
+                      label-width="100px"
+                    >
+                      <ImageUpload 
+                        :disabled="true"
+                        v-model="content.packageImgUrl"
+                        type="image"
+                        :num="1"
+                        :file-size="1"
+                        :width="150"
+                        :height="150"
+                        style="margin-top: 1%;"
+                      />
+                    </el-form-item>
+                  </el-card>
+
+                </el-form-item>
+
+                <!-- 直播 -->
+                <el-form-item label="内容" v-else-if="21 == content.contentType">
+                  <div>
+                    <el-card class="box-card">
+                      <el-form-item label="直播间"
+                        required
+                      >
+                        <el-select
+                          v-model="content.liveId"
+                          placeholder="请选择直播间"
+                          size="mini"
+                          filterable
+                          @change="liveChange(content)"
+                        >
+                          <el-option
+                            v-for="dict in liveList"
+                            :key="dict.liveId"
+                            :label="dict.liveName"
+                            :value="parseInt(dict.liveId)"
+                          />
+                        </el-select>
+                      </el-form-item>
+                      <el-form-item label="标题"
+                        prop="liveTitle"
+                        style="margin-bottom: 5px;"
+                      >
+                        <el-input
+                          v-model="content.liveTitle"
+                          placeholder="请输入消息标题，最长为64字节"
+                          :rows="2"
+                          maxlength="64"
+                          type="textarea"
+                          disabled
+                          @input="checkByteLength(content.contentType, 'liveTitle')"
+                        />
+                      </el-form-item>
+                      <el-form-item label="封面"
+                        prop="liveImgUrl"
+                      >
+                        <ImageUpload
+                          v-model="content.liveImgUrl"
+                          type="image"
+                          :num="10"
+                          :width="150"
+                          :height="150"
+                          disabled
+                        />
+                      </el-form-item>
+                    </el-card>
+                  </div>
+                </el-form-item>
+
+                <!-- 民品 -->
+                <el-form-item label="内容" v-else-if="22 == content.contentType">
+                  <div>
+                    <el-card class="box-card">
+                      <el-form-item 
+                        label="选择民品:"
+                        label-width="100px"
+                        required
+                      >
+                        <el-select
+                          v-model="content.productId"
+                          placeholder="默认50条，可输入关键字检索"
+                          style=" margin-right: 10px; width: 230px;"
+                          size="mini"
+                          filterable
+                          clearable
+                          :loading="content.meta.productLoading"
+                          remote
+                          :remote-method="(keyword) => handleProductRemoteSearch(keyword, content)"
+                          @change="productChangeUpdate(content)"
+                        >
+                          <el-option
+                            v-for="dict in (content.meta && content.meta.productList ? content.meta.productList : [])"
+                            :key="dict.productId"
+                            :label="`${dict.productName}(${dict.productId})`"
+                            :value="parseInt(dict.productId)"
+                          />
+                        </el-select>
+                      </el-form-item>
+                      <el-form-item 
+                        label="民品名称:"
+                        label-width="100px"
+                      >
+                        <el-input
+                          disabled
+                          :rows="3"
+                          v-model="content.productName"
+                          style="width: 90%;margin-top: 1%;"
+                        />
+                      </el-form-item>
+                      <el-form-item 
+                        label="民品封面:"
+                        label-width="100px"
+                      >
+                        <ImageUpload 
+                          :disabled="true"
+                          v-model="content.productImgUrl"
+                          type="image"
+                          :num="1"
+                          :file-size="1"
+                          :width="150"
+                          :height="150"
+                          style="margin-top: 1%;"
+                        />
+                      </el-form-item>
+                    </el-card>
+                  </div>
+                </el-form-item>
+
+                <!-- 药品 -->
+                <el-form-item label="内容" v-else-if="23 == content.contentType">
+                  <div>
+                    <el-card class="box-card">
+                      <el-form-item 
+                        label="选择药品:"
+                        label-width="100px"
+                        required
+                      >
+                        <el-select
+                          v-model="content.medicinesId"
+                          placeholder="默认50条，可输入关键字检索"
+                          style=" margin-right: 10px; width: 230px;"
+                          size="mini"
+                          filterable
+                          clearable
+                          :loading="content.meta.medicinesLoading"
+                          remote
+                          :remote-method="(keyword) => handleMedicinesRemoteSearch(keyword, content)"
+                          @change="medicinesChangeUpdate(content)"
+                        >
+                          <el-option
+                            v-for="dict in (content.meta && content.meta.medicinesList ? content.meta.medicinesList : [])"
+                            :key="dict.productId"
+                            :label="`${dict.productName}(${dict.productId})`"
+                            :value="parseInt(dict.productId)"
+                          />
+                        </el-select>
+                      </el-form-item>
+                      <el-form-item 
+                        label="药品名称:"
+                        label-width="100px"
+                      >
+                        <el-input
+                          disabled
+                          :rows="3"
+                          v-model="content.medicinesName"
+                          style="width: 90%;margin-top: 1%;"
+                        />
+                      </el-form-item>
+                      <el-form-item 
+                        label="药品封面:"
+                        label-width="100px"
+                      >
+                        <ImageUpload 
+                          :disabled="true"
+                          v-model="content.medicinesImgUrl"
+                          type="image"
+                          :num="1"
+                          :file-size="1"
+                          :width="150"
+                          :height="150"
+                          style="margin-top: 1%;"
+                        />
+                      </el-form-item>
+                    </el-card>
+                  </div>
+                </el-form-item>
+
+                <!-- 短视频 -->
+                <el-form-item label="内容" v-else-if="24 == content.contentType">
+                  <div>
+                    <el-card class="box-card">
+                      <el-form-item 
+                        label="选择短视频:"
+                        label-width="100px"
+                        required
+                      >
+                        <el-select
+                          v-model="content.shortVideoId"
+                          placeholder="默认50条，可输入关键字检索"
+                          style=" margin-right: 10px; width: 230px;"
+                          size="mini"
+                          filterable
+                          clearable
+                          :loading="content.meta.shortVideoLoading"
+                          remote
+                          :remote-method="(keyword) => handleShortVideoRemoteSearch(keyword, content)"
+                          @change="shortVideoChangeUpdate(content)"
+                        >
+                          <el-option
+                            v-for="dict in (content.meta && content.meta.shortVideoList ? content.meta.shortVideoList : [])"
+                            :key="dict.videoId"
+                            :label="`${dict.title}(${dict.videoId})`"
+                            :value="parseInt(dict.videoId)"
+                          />
+                        </el-select>
+                      </el-form-item>
+                      <el-form-item 
+                        label="短视频名称:"
+                        label-width="100px"
+                      >
+                        <el-input
+                          disabled
+                          :rows="3"
+                          v-model="content.shortVideoName"
+                          style="width: 90%;margin-top: 1%;"
+                        />
+                      </el-form-item>
+                      <el-form-item 
+                        label="短视频封面:"
+                        label-width="100px"
+                      >
+                        <ImageUpload 
+                          :disabled="true"
+                          v-model="content.shortVideoImgUrl"
+                          type="image"
+                          :num="1"
+                          :file-size="1"
+                          :width="150"
+                          :height="150"
+                          style="margin-top: 1%;"
+                        />
+                      </el-form-item>
+                    </el-card>
+                  </div>
+                </el-form-item>
+
+                <!-- 文章 -->
+                <el-form-item label="内容" v-else-if="25 == content.contentType">
+                  <div>
+                    <el-card class="box-card">
+                      <el-form-item 
+                        label="选择文章:"
+                        label-width="100px"
+                        required
+                      >
+                        <el-select
+                          v-model="content.articleId"
+                          placeholder="默认50条，可输入关键字检索"
+                          style=" margin-right: 10px; width: 230px;"
+                          size="mini"
+                          filterable
+                          clearable
+                          :loading="content.meta.articleLoading"
+                          remote
+                          :remote-method="(keyword) => handleArticleRemoteSearch(keyword, content)"
+                          @change="articleChangeUpdate(content)"
+                        >
+                          <el-option
+                            v-for="dict in (content.meta && content.meta.articleList ? content.meta.articleList : [])"
+                            :key="dict.articleId"
+                            :label="`${dict.title}(${dict.articleId})`"
+                            :value="parseInt(dict.articleId)"
+                          />
+                        </el-select>
+                      </el-form-item>
+                      <el-form-item 
+                        label="文章名称:"
+                        label-width="100px"
+                      >
+                        <el-input
+                          disabled
+                          :rows="3"
+                          v-model="content.articleName"
+                          style="width: 90%;margin-top: 1%;"
+                        />
+                      </el-form-item>
+                      <el-form-item 
+                        label="文章封面:"
+                        label-width="100px"
+                      >
+                        <ImageUpload 
+                          :disabled="true"
+                          v-model="content.articleImgUrl"
+                          type="image"
+                          :num="1"
+                          :file-size="1"
+                          :width="150"
+                          :height="150"
+                          style="margin-top: 1%;"
+                        />
+                      </el-form-item>
+                    </el-card>
+                  </div>
+                </el-form-item>
+
+                <!-- 公开课 -->
+                <el-form-item label="内容" v-else-if="26 == content.contentType">
+                  <div>
+                    <el-card class="box-card">
+                      <el-form-item 
+                        label="选择公开课:"
+                        label-width="100px"
+                        required
+                      >
+                        <el-select
+                          v-model="content.openClassVideoId"
+                          placeholder="默认50条，可输入关键字检索"
+                          style=" margin-right: 10px; width: 230px;"
+                          size="mini"
+                          filterable
+                          clearable
+                          :loading="content.meta.openClassVideoLoading"
+                          remote
+                          :remote-method="(keyword) => handleOpenClassVideoRemoteSearch(keyword, content)"
+                          @change="openClassVideoChangeUpdate(content)"
+                        >
+                          <el-option
+                            v-for="dict in (content.meta && content.meta.openClassVideoList ? content.meta.openClassVideoList : [])"
+                            :key="dict.videoId"
+                            :label="`${dict.title}(${dict.videoId})`"
+                            :value="parseInt(dict.videoId)"
+                          />
+                        </el-select>
+                      </el-form-item>
+                      <el-form-item 
+                        label="公开课名称:"
+                        label-width="100px"
+                      >
+                        <el-input
+                          disabled
+                          :rows="3"
+                          v-model="content.openClassVideoName"
+                          style="width: 90%;margin-top: 1%;"
+                        />
+                      </el-form-item>
+                      <el-form-item 
+                        label="公开课封面:"
+                        label-width="100px"
+                      >
+                        <ImageUpload 
+                          :disabled="true"
+                          v-model="content.openClassVideoImgUrl"
+                          type="image"
+                          :num="1"
+                          :file-size="1"
+                          :width="150"
+                          :height="150"
+                          style="margin-top: 1%;"
+                        />
+                      </el-form-item>
+                    </el-card>
+                  </div>
+                </el-form-item>
+
+                <!-- 舌诊：无实际内容 -->
+                <!-- <el-form-item label="内容" v-else-if="27 == content.contentType">
+                  <div>
+                    <el-card class="box-card">
+                      
+                    </el-card>
+                  </div>
+                </el-form-item> -->
+
+                <!-- 健康周报：无实际内容 -->
+                <!-- <el-form-item label="内容" v-else-if="28 == content.contentType">
+                  <div>
+                    <el-card class="box-card">
+                      
+                    </el-card>
+                  </div>
+                </el-form-item> -->
+
+              </el-form>
+            </el-col>
+
+            <el-col 
+              :span="1"
+              :offset="1"
+            >
+              <!-- 删除内容节点 -->
+              <i 
+                class="el-icon-delete"
+                @click="delContentNode(contentIndex)"
+                style="margin-top: 20px;"
+                v-if="groupSendMessageForm.setting.length > 1"
+              ></i>
+            </el-col>
+          </el-row>
+
+        </div>
+        <el-link type="primary" class="el-icon-plus" :underline="false" @click='addContent()'>添加内容</el-link>
+      </el-form-item>
+
+      <el-form-item label="发送时间类型" prop="sendTimeType">
+        <el-radio-group v-model="groupSendMessageForm.sendTimeType">
+          <el-radio :label="1">当天发送</el-radio>
+          <el-radio :label="2">次日发送</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="发送时间" prop="time">
+        <el-time-picker class="custom-input" v-model="groupSendMessageForm.time" value-format="HH:mm" format="HH:mm"
+          placeholder="时间" style="width: 100px;height: 20px;">
+        </el-time-picker>
+        <span class="tip" style="margin-left: 2%"> 不填时，默认为系统当前时间(立即发送)</span>
+      </el-form-item>
+
+    </el-form>
+
+    <div slot="footer" class="dialog-footer" style="text-align: right;">
+      <el-button type="primary" @click="submitGroupSendMessage" :disabled="loading">确 定</el-button>
+      <el-button @click="cancelGroupSendMessage">取 消</el-button>
+    </div>
+
+    <el-dialog 
+      title="查看分割后内容"
+      :visible.sync="openShowContent"
+      width="800px"
+      append-to-body
+    >
+      <el-table
+        stripe
+        :data="contentListData"
+        style="width: 100%"
+        >
+          <el-table-column
+            type="index"
+            label="序号"
+            width="50"
+          />
+
+          <el-table-column
+            prop="content"
+            label="内容"
+            width="700"
+          >
+            <template #default="{ row }">
+              <div v-html="row.content.replace(/\n/g, '<br>')"></div>
+            </template>
+        </el-table-column>
+      </el-table>
+
+      <div slot="footer" class="dialog-footer" style="text-align: right;">
+        <el-button 
+          type="primary"
+          @click="comfirmContent"
+        >确定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import ImageUpload from "@/views/qw/sop/ImageUpload.vue";
+import {courseList, videoList} from "@/api/app/course";
+import { getPackageOptions,} from "@/api/app/pkg";
+import { groupSendMessage, } from '@/api/app/userLogs'
+import { getLiveOptions,} from "@/api/app/live";
+import { getMedicinesOptions, } from "@/api/app/medicines";
+import { getProductOptions, } from "@/api/app/product";
+import { getShortVideoOptions, } from "@/api/app/shortVideo";
+import { getArticleOptions } from "@/api/app/article";
+import { getOpenClassVideoOptions, } from "@/api/app/openClassVideo";
+
+export default {
+  name: "sendMsgOpenTool",
+  components: { ImageUpload },
+  data() {
+    return {
+      uploadUrl: process.env.VUE_APP_BASE_API + "/app/common/uploadOSS2",
+      uploadUrlByVoice: process.env.VUE_APP_BASE_API + "/app/common/uploadOSSByHOOKVoice",
+      // 遮罩层
+      loading: false,
+      courseLoading: false,
+      sysFsSopWatchStatus: [],
+      isSalesCallAdded:false,
+      isSalesCallCustomerAdded:false,
+      courseList:[],
+      videoList:[],
+      pkgList: [],//默认疗法列表
+      liveList: [],//默认直播列表
+      productList: [],//默认民品列表
+      medicinesList: [],//默认药品列表
+      shortVideoList: [],//默认短视频列表
+      articleList: [],//默认文章列表
+      openClassVideoList: [],//默认公开课列表
+      sysQwSopAiContentType:[],
+      groupSendMessageForm: {
+        courseId: null,
+        videoId: null,
+        courseType: null,
+        sendTimeType: 1,
+        time: null,
+        setting: [],
+      },
+      groupSendRules: {
+        courseId: [
+          { required: true, message: '科普/课节不能为空', trigger: 'blur' }
+        ],
+        videoId: [
+          { required: true, message: '科普/课节不能为空', trigger: 'blur' }
+        ],
+        courseType: [
+          { required: true, message: '消息类型', trigger: 'blur' }
+        ]
+      },
+      openShowContent: false,
+      contentList: [],
+      contentListData: [],
+    };
+  },
+  props: {
+    visible: {
+      default: false,
+      type: Boolean,
+    },
+    ids: {
+      default: () => [],
+      type: Array,
+    },
+    sourceType: {
+      default: 0,//0-营期的一键群发，1-营期详情的一键群发
+      type: Number,
+    },
+  },
+  async created() {
+    this.getDicts("app_sop_plugin_settingType").then(response => {
+      this.sysQwSopAiContentType = response.data;
+    });
+    this.getDicts("app_sop_watch_status").then(response => {
+      this.sysFsSopWatchStatus = response.data;
+    });
+    const [
+      courseInfo,
+      defaultPkg,
+      defaultLive,
+      defaultProduct,
+      defaultMedicines,
+      defaultShortVideo,
+      defaultArticle,
+      defaultOpenClassVideo,
+    ] = await Promise.all([
+      courseList(),
+      this.getPkgList(null, null),
+      this.getLiveList(),
+      this.getProductList(null, null),
+      this.getMedicinesList(null, null),
+      this.getShortVideoList(null, null),
+      this.getArticleList(null, null),
+      this.getOpenClassVideoList(null, null),
+    ]);
+    this.courseList = courseInfo.list;
+    this.pkgList = defaultPkg.data;
+    this.liveList = defaultLive.data;
+    this.productList = defaultProduct.data;
+    this.medicinesList = defaultMedicines.data;
+    this.shortVideoList = defaultShortVideo.data;
+    this.articleList = defaultArticle.data;
+    this.openClassVideoList = defaultOpenClassVideo.data;
+  },
+  watch: {
+    visible: {
+      handler(n, o) {
+        //打开新建
+        if (n) {
+          this.addContent();
+        } 
+        //关闭销毁
+        else {
+          this.resetForm();
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    /**
+     * 获取科普信息
+     */
+    async getCourseList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        selectedId: selectedId,
+        pageNum: 1,
+        pageSize: 50,
+      };
+      return await courseList(data);
+    },
+    /**
+     * 根据科普获取视频小节
+     * @param courseId 
+     * @param title 
+     */
+    async getVideoList(courseId, title) {
+      return await videoList({
+        courseId: courseId,
+        title: title
+      });
+    },
+    /**
+     * 获取疗法信息
+     */
+    async getPkgList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        metaId: selectedId,
+        limit: 50
+      };
+      return await getPackageOptions(data);
+    },
+    /**
+     * 获取直播间信息
+     */
+    async getLiveList() {
+      return await getLiveOptions();
+    },
+    /**
+     * 获取民品列表
+     * @param keyword 
+     * @param selectedId 
+     */
+    async getProductList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        metaId: selectedId,
+        limit: 50
+      };
+      return await getProductOptions(data);
+    },
+    /**
+     * 获取药品列表
+     * @param keyword 
+     * @param selectedId 
+     */
+    async getMedicinesList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        metaId: selectedId,
+        limit: 50
+      };
+      return await getMedicinesOptions(data);
+    },
+    /**
+     * 获取短视频列表
+     * @param keyword 
+     * @param selectedId 
+     */
+    async getShortVideoList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        metaId: selectedId,
+        limit: 50
+      };
+      return await getShortVideoOptions(data);
+    },
+    /**
+     * 获取文章列表
+     * @param keyword 
+     * @param selectedId 
+     */
+    async getArticleList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        metaId: selectedId,
+        limit: 50
+      };
+      return await getArticleOptions(data);
+    },
+    /**
+     * 获取公开课列表
+     * @param keyword 
+     * @param selectedId 
+     */
+    async getOpenClassVideoList(keyword, selectedId) {
+      let data = {
+        keyword: keyword,
+        metaId: selectedId,
+        limit: 50
+      };
+      return await getOpenClassVideoOptions(data);
+    },
+    /**
+     * 科普变动处理
+     * @param ruleItem 
+     * @param dayIndex 
+     * @param ruleIndex 
+     */
+    async courseChangeUpdate() {
+      //将当前规则已选中的视频小节清空
+      this.groupSendMessageForm.videoId = null;
+      this.videoList = [];
+      // 查找选中的科普的信息
+      const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) == this.groupSendMessageForm.courseId);
+      for (let i = 0; i < this.groupSendMessageForm.setting.length; i++) {
+        let contentItem = this.groupSendMessageForm.setting[i];
+        this.$set(contentItem, 'linkTitle', null);
+        this.$set(contentItem, 'linkDescribe', null);
+        this.$set(contentItem, 'linkImageUrl', null);
+
+        //如果是科普才上
+        if (selectedCourse && this.groupSendMessageForm.courseId) {
+          //响应式直接给链接的标题/封面上值
+          if (contentItem.contentType == 9) {
+            this.$set(contentItem, 'linkTitle', selectedCourse.dictLabel);
+            this.$set(contentItem, 'linkImageUrl', selectedCourse.dictImgUrl);
+          }
+        }
+      }
+      if (this.groupSendMessageForm.courseId) {
+        let vl = await this.getVideoList(this.groupSendMessageForm.courseId, null);
+        this.videoList = vl.list;
+      } else {
+        let cl = await this.getCourseList(null, null);
+        this.courseList = cl.list;
+      }
+    },
+    /**
+     * 课程远程搜索
+     */
+    async handleCourseRemoteSearch(keyword) {
+      this.courseLoading = true;
+      // 模拟远程接口请求（替换为你的真实接口）
+      let cl = await this.getCourseList(this.isEmpty(keyword) ? null : keyword, null);
+      this.courseLoading = false;
+      this.courseList = cl.list;
+    },
+    /**
+     * 疗法下拉搜索
+     * @param keyword 
+     * @param content 
+     */
+    async handlePkgRemoteSearch(keyword, content) {
+      content.meta.pkgLoading = true;
+      let cl = await this.getPkgList(this.isEmpty(keyword) ? null : keyword, null);
+      content.meta.pkgLoading = false;
+      content.meta.pkgList = cl.data;
+    },
+    /**
+     * 疗法变动处理
+     * @param content 
+     */
+    async pkgChangeUpdate(content) {
+      //将当前规则已选中的视频小节清空
+      this.$set(content, 'packageName', null);
+      this.$set(content, 'packageImgUrl', null);
+      if (content.packageId) {
+        // 查找选中疗法的信息
+        const selectedPkg = content.meta.pkgList.find(pkg => parseInt(pkg.packageId) === content.packageId);
+        this.$set(content, 'packageName', selectedPkg.packageName);
+        this.$set(content, 'packageImgUrl', selectedPkg.imgUrl);
+      }
+    },
+    /**
+     * 民品下拉搜索
+     * @param keyword 
+     * @param content 
+     */
+    async handleProductRemoteSearch(keyword, content) {
+      content.meta.productLoading = true;
+      let cl = await this.getProductList(this.isEmpty(keyword) ? null : keyword, null);
+      content.meta.productLoading = false;
+      content.meta.productList = cl.data;
+    },
+    /**
+     * 民品变动处理
+     * @param content 
+     */
+    async productChangeUpdate(content) {
+      this.$set(content, 'productName', null);
+      this.$set(content, 'productImgUrl', null);
+      if (content.productId) {
+        // 查找选中民品的信息
+        const selected = content.meta.productList.find(pro => parseInt(pro.productId) === content.productId);
+        this.$set(content, 'productName', selected.productName);
+        this.$set(content, 'productImgUrl', selected.image);
+      }
+    },
+    /**
+     * 药品下拉搜索
+     * @param keyword 
+     * @param content 
+     */
+    async handleMedicinesRemoteSearch(keyword, content) {
+      content.meta.medicinesLoading = true;
+      let cl = await this.getMedicinesList(this.isEmpty(keyword) ? null : keyword, null);
+      content.meta.medicinesLoading = false;
+      content.meta.medicinesList = cl.data;
+    },
+    /**
+     * 药品变动处理
+     * @param content 
+     */
+    async medicinesChangeUpdate(content) {
+      this.$set(content, 'medicinesName', null);
+      this.$set(content, 'medicinesImgUrl', null);
+      if (content.medicinesId) {
+        // 查找选中药品的信息
+        const selected = content.meta.medicinesList.find(pro => parseInt(pro.productId) === content.medicinesId);
+        this.$set(content, 'medicinesName', selected.productName);
+        this.$set(content, 'medicinesImgUrl', selected.image);
+      }
+    },
+    /**
+     * 短视频下拉搜索
+     * @param keyword 
+     * @param content 
+     */
+    async handleShortVideoRemoteSearch(keyword, content) {
+      content.meta.shortVideoLoading = true;
+      let cl = await this.getShortVideoList(this.isEmpty(keyword) ? null : keyword, null);
+      content.meta.shortVideoLoading = false;
+      content.meta.shortVideoList = cl.data;
+    },
+    /**
+     * 短视频变动处理
+     * @param content 
+     */
+    async shortVideoChangeUpdate(content) {
+      this.$set(content, 'shortVideoName', null);
+      this.$set(content, 'shortVideoImgUrl', null);
+      if (content.shortVideoId) {
+        // 查找选中短视频的信息
+        const selected = content.meta.shortVideoList.find(pro => parseInt(pro.videoId) === content.shortVideoId);
+        this.$set(content, 'shortVideoName', selected.title);
+        this.$set(content, 'shortVideoImgUrl', selected.thumbnail);
+      }
+    },
+    /**
+     * 文章下拉搜索
+     * @param keyword 
+     * @param content 
+     */
+    async handleArticleRemoteSearch(keyword, content) {
+      content.meta.articleLoading = true;
+      let cl = await this.getArticleList(this.isEmpty(keyword) ? null : keyword, null);
+      content.meta.articleLoading = false;
+      content.meta.articleList = cl.data;
+    },
+    /**
+     * 文章变动处理
+     * @param content 
+     */
+    async articleChangeUpdate(content) {
+      this.$set(content, 'articleName', null);
+      this.$set(content, 'articleImgUrl', null);
+      if (content.articleId) {
+        // 查找选中文章的信息
+        const selected = content.meta.articleList.find(pro => parseInt(pro.articleId) === content.articleId);
+        this.$set(content, 'articleName', selected.title);
+        this.$set(content, 'articleImgUrl', selected.imageUrl);
+      }
+    },
+    /**
+     * 公开课下拉搜索
+     * @param keyword 
+     * @param content 
+     */
+    async handleOpenClassVideoRemoteSearch(keyword, content) {
+      content.meta.openClassVideoLoading = true;
+      let cl = await this.getOpenClassVideoList(this.isEmpty(keyword) ? null : keyword, null);
+      content.meta.openClassVideoLoading = false;
+      content.meta.openClassVideoList = cl.data;
+    },
+    /**
+     * 公开课变动处理
+     * @param content 
+     */
+    async openClassVideoChangeUpdate(content) {
+      this.$set(content, 'openClassVideoName', null);
+      this.$set(content, 'openClassVideoImgUrl', null);
+      if (content.openClassVideoId) {
+        // 查找选中文章的信息
+        const selected = content.meta.openClassVideoList.find(pro => parseInt(pro.videoId) === content.openClassVideoId);
+        this.$set(content, 'openClassVideoName', selected.title);
+        this.$set(content, 'openClassVideoImgUrl', selected.thumbnail);
+      }
+    },
+    /**
+     * 直播间切换
+     * @param content 
+     */
+    liveChange(content) {
+      content.liveTitle = null;
+      content.liveImgUrl = null;
+      const selectedLive = this.liveList.find(live => live.liveId === content.liveId);
+      if (selectedLive) {
+        content.liveTitle = selectedLive.liveName; // 自动填充标题
+        content.liveImgUrl = selectedLive.liveImgUrl; // 自动填充封面
+      }
+    },
+    /**
+     * 科普小节变化
+     * @param ruleItem 
+     * @param dayIndex 
+     * @param ruleIndex 
+     */
+    videoIdChange() {
+      //选择了科普小节则 默认绑上
+      let selectedVideo;
+      // 查找选中的科普对应的 label
+      if (this.groupSendMessageForm.videoId) {
+        selectedVideo = this.videoList.find(course => parseInt(course.dictValue) == this.groupSendMessageForm.videoId);
+      }
+      for (let i = 0; i < this.groupSendMessageForm.setting.length; i++) {
+        let contentItem = this.groupSendMessageForm.setting[i];
+        //科普消息-文本内容
+        if (contentItem == 11) {
+          this.$set(contentItem, 'isBindUrl', '2');
+        }
+        //如果是科普的才上
+        if (selectedVideo && this.groupSendMessageForm.videoId != null) {
+
+          if (contentItem.contentType == 9) {
+            this.$set(contentItem, 'linkDescribe', selectedVideo.dictLabel);
+          }
+        }
+      }
+    },
+    /**
+     * 上传视频成功处理
+     * @param res 
+     * @param file 
+     * @param item 
+     */
+    handleSuccessVideo(res, file, item) {
+      if(res.code == 200) {
+        // 使用 $set 确保响应式更新
+        this.$set(item, 'videoUrl', res.url);
+      }
+      else{
+        this.msgError(res.msg);
+      }
+    },
+    /**
+     * 上传视频前置处理
+     * @param file 
+     */
+    beforeUploadVideo(file){
+      const isLt30M = file.size / 1024 / 1024 < 10;
+      const isMP4 = file.type === 'video/mp4';
+      if (!isMP4) {
+        this.$message.error('仅支持上传 MP4 格式的视频文件!');
+        return false;
+      }
+      if (!isLt30M) {
+        this.$message.error('上传大小不能超过 10MB!');
+        return false;
+      }
+      return true;
+    },
+    /**
+     * 语音文本录入
+     * @param value 
+     * @param content 
+     */
+    handleInputVoiceText(value,content){
+      // 允许的字符：中文、英文（大小写）、数字和指定标点符号（，。！？）
+      const regex = /^[\u4e00-\u9fa5，。！？,!?]+$/;
+      // 删除不符合条件的字符
+      const filteredValue = value.split('').filter(char => regex.test(char)).join('');
+      this.$set(content, 'value', filteredValue);
+    },
+    /**
+     * 删除内容节点
+     * @param index 
+     */
+    delContentNode(index){
+      this.groupSendMessageForm.setting.splice(index, 1)
+    },
+    /**
+     * 添加规则内容
+     */
+    addContent() {
+      let content = {
+        contentType: '9',//默认科普类型
+        value: '',
+      };
+      this.groupSendMessageForm.setting.push(content);
+      this.handleContentTypeChange();
+    },
+    /**
+     * 
+     * @param event 
+     * @param index 
+     */
+    handleKeydown(event, index) {
+      const item = this.groupSendMessageForm.setting[index];
+      const textarea = this.$refs[`textarea-${index}`][0].$refs.textarea;
+      const cursorPosition = textarea.selectionStart;
+      // 检查是否按下了 Backspace 或 Delete 键
+      if (event.key === 'Backspace' || event.key === 'Delete') {
+        const tags = ['#客服称呼#', '#客户称呼#']; // 需要检查的标签
+        const value = item.value;
+        // 遍历标签，检查是否需要删除
+        for (const tag of tags) {
+          let start, end;
+          if (event.key === 'Backspace') {
+            // 检查光标前是否是当前标签的一部分
+            start = cursorPosition - tag.length;
+            if (start >= 0 && value.slice(start, cursorPosition) === tag) {
+              // 删除整个标签
+              item.value = value.slice(0, start) + value.slice(cursorPosition);
+              // 更新光标位置
+              this.$nextTick(() => {
+                textarea.setSelectionRange(start, start);
+              });
+              // 更新状态
+              if (tag === '#客服称呼#') {
+                item.isSalesCallAdded = false;
+              }
+              if (tag === '#客户称呼#') {
+                item.isSalesCallCustomerAdded = false;
+              }
+              event.preventDefault(); // 阻止默认删除行为
+              break; // 找到匹配的标签后退出循环
+            }
+          } else if (event.key === 'Delete') {
+            // 检查光标后是否是当前标签的一部分
+            end = cursorPosition + tag.length;
+            if (end <= value.length && value.slice(cursorPosition, end) === tag) {
+              // 删除整个标签
+              item.value = value.slice(0, cursorPosition) + value.slice(end);
+              // 更新状态
+              if (tag === '#客服称呼#') {
+                item.isSalesCallAdded = false;
+              }
+              if (tag === '#客户称呼#') {
+                item.isSalesCallCustomerAdded = false;
+              }
+              event.preventDefault(); // 阻止默认删除行为
+              break; // 找到匹配的标签后退出循环
+            }
+          }
+          // 检查光标是否位于标签的中间
+          for (let i = 0; i <= tag.length; i++) {
+            const tagStart = cursorPosition - i;
+            const tagEnd = tagStart + tag.length;
+            if (
+              tagStart >= 0 &&
+              tagEnd <= value.length &&
+              value.slice(tagStart, tagEnd) === tag
+            ) {
+              // 删除整个标签
+              item.value = value.slice(0, tagStart) + value.slice(tagEnd);
+              // 更新光标位置
+              this.$nextTick(() => {
+                textarea.setSelectionRange(tagStart, tagStart);
+              });
+              // 更新状态
+              if (tag === '#客服称呼#') {
+                item.isSalesCallAdded = false;
+              }
+              if (tag === '#客户称呼#') {
+                item.isSalesCallCustomerAdded = false;
+              }
+              event.preventDefault(); // 阻止默认删除行为
+              break; // 找到匹配的标签后退出循环
+            }
+          }
+        }
+      }
+    },
+    /**
+     * 切换添加客服称呼按钮点击事件
+     * @param index 
+     */
+    toggleSalesCall(index) {
+      const item = this.groupSendMessageForm.setting[index];
+      const salesCall = '#客服称呼#';
+      const textarea = this.$refs[`textarea-${index}`][0].$refs.textarea;
+
+      // 获取当前光标位置
+      const cursorPosition = textarea.selectionStart;
+
+      if (item && !Object.hasOwn(item, 'isSalesCallAdded')) {
+        this.$set(item, 'isSalesCallAdded', false);
+      }
+
+      if (item.isSalesCallAdded) {
+        // 移除所有的 #客服称呼#
+        item.value = item.value.replace(new RegExp(salesCall, 'g'), '');
+      } else {
+        // 添加 #客服称呼#
+        item.value = item.value.slice(0, cursorPosition) + salesCall + item.value.slice(cursorPosition);
+      }
+
+      // 切换状态
+      item.isSalesCallAdded = !item.isSalesCallAdded;
+
+      // 保持光标位置
+      this.$nextTick(() => {
+        textarea.setSelectionRange(cursorPosition, cursorPosition);
+      });
+    },
+    /**
+     * 修改内容类别，避免万一，把所有的content刷一遍
+     */
+    handleContentTypeChange() {
+      const form = this.groupSendMessageForm;
+      //科普
+      const course = this.courseList.find(c => parseInt(c.dictValue) == form.courseId);
+      //课节
+      const video = this.videoList.find(v => parseInt(v.dictValue) == form.videoId);
+      form.setting.forEach(async item => {
+        //科普
+        if (item.contentType == 9) {
+          course && this.$set(item, 'linkTitle', course.dictLabel);
+          course && this.$set(item, 'linkImageUrl', course.dictImgUrl);
+          video && this.$set(item, 'linkDescribe', video.dictLabel);
+        }
+        //疗法
+        else if(item.contentType == 20) {
+          if (!item.packageId) {
+            this.$set(item, 'meta', {
+              pkgLoading: false,
+              pkgList: this.pkgList,
+            });
+          } else {
+            let pkgList = await this.getPkgList(null, item.packageId);
+            this.$set(item, 'meta', {
+              pkgLoading: false,
+              pkgList: pkgList.data,
+            });
+          }
+        }
+        //民品
+        else if(item.contentType == 22) {
+          if (!item.productId) {
+            this.$set(item, 'meta', {
+              productLoading: false,
+              productList: this.productList,
+            });
+          } else {
+            let productList = await this.getProductList(null, item.productId);
+            this.$set(item, 'meta', {
+              productLoading: false,
+              productList: productList.data,
+            });
+          }
+        }
+        //药品
+        else if(item.contentType == 23) {
+          if (!item.medicinesId) {
+            this.$set(item, 'meta', {
+              medicinesLoading: false,
+              medicinesList: this.medicinesList,
+            });
+          } else {
+            let medicinesList = await this.getMedicinesList(null, item.medicinesId);
+            this.$set(item, 'meta', {
+              medicinesLoading: false,
+              medicinesList: medicinesList.data,
+            });
+          }
+        }
+        //短视频
+        else if(item.contentType == 24) {
+          if (!item.shortVideoId) {
+            this.$set(item, 'meta', {
+              shortVideoLoading: false,
+              shortVideoList: this.shortVideoList,
+            });
+          } else {
+            let shortVideoList = await this.getShortVideoList(null, item.shortVideoId);
+            this.$set(item, 'meta', {
+              shortVideoLoading: false,
+              shortVideoList: shortVideoList.data,
+            });
+          }
+        }
+        //文章
+        else if(item.contentType == 25) {
+          if (!item.articleId) {
+            this.$set(item, 'meta', {
+              articleLoading: false,
+              articleList: this.articleList,
+            });
+          } else {
+            let articleList = await this.getArticleList(null, item.articleId);
+            this.$set(item, 'meta', {
+              articleLoading: false,
+              articleList: articleList.data,
+            });
+          }
+        }
+        //公开课
+        else if(item.contentType == 26) {
+          if (!item.openClassVideoId) {
+            this.$set(item, 'meta', {
+              openClassVideoLoading: false,
+              openClassVideoList: this.openClassVideoList,
+            });
+          } else {
+            let openClassVideoList = await this.getOpenClassVideoList(null, item.openClassVideoId);
+            this.$set(item, 'meta', {
+              openClassVideoLoading: false,
+              openClassVideoList: openClassVideoList.data,
+            });
+          }
+        }
+        //舌诊
+        else if(item.contentType == 27) {
+          
+        }
+        //健康周报
+        else if(item.contentType == 28) {
+          
+        }
+      })
+    },
+    /**
+     * 检查数据
+     */
+    checkData() {
+      if (this.isEmpty(this.groupSendMessageForm.courseId)) {
+        return this.$message.error("科普不能为空")
+      }
+      if (this.isEmpty(this.groupSendMessageForm.videoId)) {
+        return this.$message.error("课节不能为空")
+      }
+      if (this.isEmpty(this.groupSendMessageForm.courseType)) {
+        return this.$message.error("消息类型不能为空")
+      }
+      let contentList = this.groupSendMessageForm.setting;
+      if (contentList.length === 0) {
+        return this.$message.error("请添加规则")
+      }
+      for (let k = 0; k < contentList.length; k++) {
+        let dcs = contentList[k];
+        if (dcs.contentType == 11 && this.isEmpty(dcs.value)) {
+          return this.$message.error("内容不能为空");
+        }
+        if (dcs.contentType == 12 && this.isEmpty(dcs.value)) {
+          return this.$message.error("语音文本不能为空");
+        }
+        if (dcs.contentType == 2 && this.isEmpty(dcs.imgUrl)) {
+          return this.$message.error("图片不能为空");
+        }
+        if ([9].includes(Number(dcs.contentType)) && this.isEmpty(dcs.linkTitle)) {
+          return this.$message.error("链接标题不能为空");
+        }
+        if ([9].includes(Number(dcs.contentType)) && this.isEmpty(dcs.linkDescribe)) {
+          return this.$message.error("链接描述不能为空");
+        }
+        if ([9].includes(Number(dcs.contentType)) && this.isEmpty(dcs.linkImageUrl)) {
+          return this.$message.error("链接图片不能为空");
+        }
+        if ([20].includes(Number(dcs.contentType)) && this.isEmpty(dcs.packageId)) {
+          return this.$message.error("疗法不能为空");
+        }
+        if ([21].includes(Number(dcs.contentType)) && this.isEmpty(dcs.liveId)) {
+          return this.$message.error("直播间不能为空");
+        }
+        if ([22].includes(Number(dcs.contentType)) && this.isEmpty(dcs.productId)) {
+          return this.$message.error("民品不能为空");
+        }
+        if ([23].includes(Number(dcs.contentType)) && this.isEmpty(dcs.medicinesId)) {
+          return this.$message.error("药品不能为空");
+        }
+        if ([24].includes(Number(dcs.contentType)) && this.isEmpty(dcs.shortVideoId)) {
+          return this.$message.error("短视频不能为空");
+        }
+        if ([25].includes(Number(dcs.contentType)) && this.isEmpty(dcs.articleId)) {
+          return this.$message.error("文章不能为空");
+        }
+        if ([26].includes(Number(dcs.contentType)) && this.isEmpty(dcs.openClassVideoId)) {
+          return this.$message.error("公开课不能为空");
+        }
+      }
+      if (this.groupSendMessageForm.sendTimeType == 2 && this.isEmpty(this.groupSendMessageForm.time)) {
+        return this.$message.error("请指定次日发送时间")
+      }
+      return 1;
+    },
+    /**
+     * 空校验
+     * @param obj 
+     */
+    isEmpty(obj) {
+      return obj === null || obj === undefined || obj.length === 0;
+    },
+    /**
+     * 确认一键群发
+     */
+    submitGroupSendMessage() {
+      // 表单验证
+      this.loading = true;
+      this.$refs["groupSendMessageForm"].validate(async valid => {
+        if (valid) {
+          if (this.checkData() !== 1) {
+            this.loading = false;
+            return;
+          }
+          let params = {...this.groupSendMessageForm, ids: this.ids};
+          params['sourceType'] = this.sourceType;
+          let res = await groupSendMessage(params);
+          this.msgSuccess("一键群发成功");
+          this.$emit('changeGroupSendMessageVisible', false);
+        }
+        this.loading = false;
+      });
+    },
+    /**
+     * 取消一键群发
+     */
+    cancelGroupSendMessage() {
+      this.$emit('changeGroupSendMessageVisible', false);
+    },
+    /**
+     * 重置表单
+     */
+    resetForm() {
+      this.groupSendMessageForm = {
+        courseId: null,
+        videoId: null,
+        courseType: null,
+        sendTimeType: 1,
+        time: null,
+        setting: [],
+      };
+    },
+    /**
+     * 确认分割后的内容
+     */
+    comfirmContent() {
+      this.openShowContent = false;
+    },
+    /**
+     * 显示分割后的内容
+     * @param contentIndex 
+     */
+    showOpenContent(contentIndex) {
+      let setItem = this.groupSendMessageForm.setting[contentIndex];
+      let refKey = `textarea-${contentIndex}`;
+      let textarea = this.$refs[refKey][0]?.$refs?.textarea;
+      if (!textarea) return;
+      this.openShowContent = true;
+      this.contentList = [];
+      this.contentListData = [];
+      let str = setItem.value;
+      this.contentList = str.split("|&|");
+      let idx = 1;
+      this.contentList.forEach(a => {
+        this.contentListData.push({ index: idx++, content: a });
+      })
+    },
+    /**
+     * 复制分隔符
+     */
+    copySpliter() {
+      navigator.clipboard.writeText("|&|").then(() => {
+        this.$message({
+          message: '复制成功',
+          type: 'success'
+        });
+      }).catch(err => {
+        this.$message({
+          message: '复制失败',
+          type: 'warning'
+        });
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  padding: 8px;
+
+  .el-alert {
+    padding: 5px 16px;
+  }
+}
+</style>

src/views/app/sop/userLogsInfo/sendMsgOpenTool.vue

@@ -0,0 +1,1210 @@
+<template>
+  <div class="app-container">
+    <el-dialog :title="sendMsgOpen.title" :visible.sync="sendMsgOpen.open"  width="1000px" append-to-body>
+        <el-alert
+          type="error"
+          :closable="false"
+          show-icon>
+          <template #title>
+                <span style="font-size: 25px; line-height: 1.5;">
+                    此功能用于给 选中的 营期 内【所有的】客户发送 消息
+                </span>
+          </template>
+        </el-alert>
+        <el-form ref="msgForm" :model="msgForm" :rules="msgRules" label-width="100px">
+          <el-form-item label="策略" prop="draftStrategy">
+            <el-radio-group v-model="msgForm.draftStrategy">
+              <el-radio :label="1">正常群发</el-radio>
+              <el-radio :label="2">清除草稿</el-radio>
+              <el-radio :label="3">发送草稿</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="选择科普" v-if="msgForm.draftStrategy==1" >
+            <el-select  v-model="msgForm.courseId" placeholder="请选择科普" style=" margin-right: 10px;" size="mini"  @change="courseChange()">
+              <el-option
+                v-for="dict in courseList"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="parseInt(dict.dictValue)"
+              />
+            </el-select>
+            <el-select  v-model="msgForm.videoId" placeholder="请选择小节" size="mini" style=" margin-right: 10px;" @change="videoIdChange()"  >
+              <el-option
+                v-for="dict in videoList"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="parseInt(dict.dictValue)"
+                :disabled="dict.isPause == 1"
+              >
+                <div :style="{ color: dict.isPause == 1 ? '#f56c6c' : 'inherit', display: 'flex', alignItems: 'center' }">
+                  <span>{{ dict.dictLabel }}</span>
+                  <span v-if="dict.isPause == 1" style="font-size: 12px; margin-left: 8px; color: #f56c6c;">
+                      (该科普已被关闭，无法正常发送)
+                  </span>
+                </div>
+              </el-option>
+            </el-select>
+            <el-select  v-model="msgForm.courseType" placeholder="请选择消息类型" size="mini" style=" margin-right: 10px;">
+              <el-option
+                v-for="dict in sysFsSopWatchStatus"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="parseInt(dict.dictValue)"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="规则" prop="setting" v-if="msgForm.draftStrategy==1"  >
+            <div v-for="(item, index) in setting" :key="index" style="background-color: #fdfdfd; border: 1px solid #e6e6e6; margin-bottom: 20px;">
+              <el-row>
+                <el-col :span="22">
+                  <el-form :model="item" label-width="70px">
+                    <el-form-item label="内容类别" style="margin: 2%">
+                      <el-radio-group  v-model="item.contentType">
+                        <el-radio   :label="items.dictValue" v-for="items in sysQwSopAiContentType" v-if="items.dictValue !== '19' || (items.dictValue === '19' && item.openClass=== 1)"   @change="handleContentTypeChange()">{{items.dictLabel}}</el-radio>
+                      </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label="内容" style="margin-bottom: 2%" >
+                      <el-input
+                        v-if="item.contentType == 1 || item.contentType == 11|| item.contentType == 13"
+                        v-model="item.value"
+                        type="textarea"
+                        :rows="3"
+                        placeholder="内容"
+                        style="width: 90%; margin-top: 10px;"
+                        @keydown.native="handleKeydown($event, index)"
+                        :ref="`textarea-${index}`"
+                      >
+                      </el-input>
+                      <el-link
+                        v-if="item.contentType == 1 || item.contentType == 11 || item.contentType == 13"
+                        type="primary"
+                        @click="toggleSalesCall(index)"
+                        style="margin-top: 10px;"
+                      >
+                        {{ item.isSalesCallAdded ? '移除#客服称呼#' : '添加#客服称呼#' }}
+                      </el-link>
+                      <el-link
+                        v-if="item.contentType == 1 || item.contentType == 11|| item.contentType == 13"
+                        type="primary"
+                        @click="toggleSalesCallCustomer(index)"
+                        style="margin-top: 10px;margin-left: 2%"
+                      >
+                        {{ item.isSalesCallCustomerAdded ? '移除#客户称呼#' : '添加#客户称呼#' }}
+                      </el-link>
+
+
+                      <ImageUpload v-if="item.contentType == 2 " v-model="item.imgUrl" type="image" :num="1"  :width="150" :height="150" />
+
+                      <div v-if="item.contentType == 3 || item.contentType ==9 ">
+                        <el-card class="box-card">
+                          <el-form-item label="链接标题:"  label-width="100px">
+                            <el-input v-model="item.linkTitle" placeholder="请输入链接标题" style="width: 90%;"/>
+                          </el-form-item>
+                          <el-form-item label="链接描述:"   label-width="100px" >
+                            <el-input type="textarea" :rows="3" v-model="item.linkDescribe" placeholder="请输入链接描述" style="width: 90%;margin-top: 1%;"/>
+                          </el-form-item>
+                          <el-form-item label="链接封面:"   label-width="100px">
+                            <ImageUpload v-model="item.linkImageUrl" type="image" :num="1" :file-size="2" :width="150" :height="150" style="margin-top: 1%;" />
+                          </el-form-item>
+                          <el-form-item label="链接地址:"  label-width="100px" >
+                            <el-tag type="warning" v-model="item.isBindUrl" value = "1">选择的科普小节 即为卡片链接地址</el-tag>
+                          </el-form-item>
+                        </el-card>
+                      </div>
+                      <div v-if="item.contentType == 4 || item.contentType == 15|| item.contentType == 19">
+                        <el-card class="box-card">
+                          <el-form-item label="标题" prop="miniprogramTitle">
+                            <el-input v-model="item.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字"  />
+                          </el-form-item>
+                          <el-form-item label="封面" prop="miniprogramPicUrl">
+                            <ImageUpload v-model="item.miniprogramPicUrl"  type="image" :num="10" :width="150" :height="150" />
+                          </el-form-item>
+                          <el-form-item label="appid" prop="miniprogramAppid" v-show="false" >
+                            <el-input v-model="item.miniprogramAppid" value = 'wx73f85f8d62769119' disabled />
+                          </el-form-item>
+                          <el-form-item label="page路径" prop="miniprogramPage" v-show="false" label-width="100px" style="margin-left: -30px" >
+                            <el-input v-model="item.miniprogramPage" placeholder="小程序消息打开后的路径"  disabled />
+                          </el-form-item>
+                        </el-card>
+                      </div>
+                      <div v-if="item.contentType == 5 ">
+
+                        <el-form-item label="上传文件:" prop="fileUrl" label-width="100px">
+                          <el-upload
+                            v-model="item.fileUrl"
+                            class="avatar-uploader"
+                            :action="uploadUrl"
+                            :show-file-list="false"
+                            :on-success="(res, file) => handleAvatarSuccessFile(res, file, item)"
+                            :before-upload="beforeAvatarUploadFile">
+                            <i class="el-icon-plus avatar-uploader-icon"></i>
+                          </el-upload>
+                          <el-link v-if="item.fileUrl" type="primary" :href="downloadUrl(item.fileUrl)" download>
+                            {{item.fileUrl}}
+                          </el-link>
+                        </el-form-item>
+
+                      </div>
+
+                      <div v-if="item.contentType == 6 ">
+                        <el-form-item label="上传视频：" prop="videoUrl" label-width="100px">
+                          <el-upload
+                            v-model="item.videoUrl"
+                            class="avatar-uploader"
+                            :action="uploadUrl"
+                            :show-file-list="false"
+                            :on-success="(res, file) => handleAvatarSuccessVideo(res, file, item)"
+                            :before-upload="beforeAvatarUploadVideo">
+                            <i class="el-icon-plus avatar-uploader-icon"></i>
+                          </el-upload>
+                          <video v-if="item.videoUrl"
+                                 :src="item.videoUrl"
+                                 controls style="width: 200px;height: 100px">
+                          </video>
+                        </el-form-item>
+                      </div>
+                      <div v-if="item.contentType == 7 || item.contentType == 12">
+                        <el-input
+                          v-model="item.value"
+                          type="textarea" :rows="3" maxlength="66" show-word-limit
+                          placeholder="输入要转为语音的内容" style="width: 90%;margin-top: 10px;"
+                          @input="handleInputVideoText(item.value,item)"/>
+                      </div>
+                      <div v-if="item.contentType == 8">
+                          <el-button type="primary"
+                                     style="margin-bottom: 1%"
+                                     @click="hanldeSelectVideoNum(setting,index)">
+                            选择视频号
+                          </el-button>
+                          <el-card class="box-card" v-if="item.coverUrl">
+                            <el-form-item label="封面标题:" label-width="100px">
+                              <el-input v-model="item.nickname"
+                                        style="width: 90%;margin-bottom: 1%" disabled/>
+                            </el-form-item>
+                            <el-form-item label="头像:" label-width="100px">
+                              <el-image
+                                v-if="item.avatar != null"
+                                :src="item.avatar"
+                                :preview-src-list="[item.avatar]"
+                                :style="{ width: '50px', height: '50px' }"
+                              ></el-image>
+                            </el-form-item>
+                            <el-form-item label="封面:" label-width="100px">
+                              <el-image
+                                v-if="item.coverUrl != null"
+                                :src="item.coverUrl"
+                                :preview-src-list="[item.coverUrl]"
+                                :style="{ width: '200px', height: '200px' }"
+                              ></el-image>
+
+                            </el-form-item>
+                            <el-form-item label="简介:" label-width="100px">
+                              <el-input type="textarea" :rows="3"
+                                        v-model="item.desc"
+                                        style="width: 90%;margin-top: 1%;" disabled/>
+                            </el-form-item>
+                            <el-form-item label="视频地址:" label-width="100px"
+                                          style="margin-top: 1%">
+                              <el-input v-model="item.url"
+                                        style="width: 90%;" disabled/>
+                            </el-form-item>
+                          </el-card>
+                      </div>
+
+                      <div v-if="item.contentType == 14">
+                        <el-card class="box-card">
+                          <el-form-item label="福袋名称" >
+                            <el-select  v-model="item.luckyBagId"
+                                        placeholder="请选择福袋" size="mini"
+                                        @change="getLuckyBagStatus(item)" >
+                              <el-option
+                                v-for="dict in luckyBagList"
+                                :key="dict.id"
+                                :label="dict.name"
+                                :value="dict.id"
+                              />
+                            </el-select>
+                          </el-form-item>
+                          <el-form-item label="福袋状态" >
+                            <el-tag :type="item.luckyBagDataStatus == 1 ? 'success' : 'danger'">
+                              {{ item.luckyBagDataStatus == 1 ? '启用' : '禁用' }}
+                            </el-tag>
+                          </el-form-item>
+                        </el-card>
+                      </div>
+
+                      <div v-if="item.contentType == 17">
+                        <el-card class="box-card">
+                          <el-form-item label="短信模板" >
+                            <el-select v-model="item.smsTemplateId"
+                                       placeholder="请选择短信模板" size="mini"
+                                       @change="getSmsTemplateInfo(item)" >
+                              <el-option
+                                v-for="template in smsTemplateList"
+                                :key="template.tempId"
+                                :label="template.title"
+                                :value="template.tempId"
+                              />
+                            </el-select>
+                          </el-form-item>
+                          <el-form-item label="内容预览" v-if="item.smsTemplateContent">
+                            <div style="color: #666; font-size: 12px; padding: 8px; border: 1px solid #eee; border-radius: 4px; background-color: #f9f9f9; max-height: 100px; overflow-y: auto;">
+                              {{ item.smsTemplateContent }}
+                            </div>
+                          </el-form-item>
+                        </el-card>
+                      </div>
+
+                    </el-form-item>
+                    <div v-if="item.contentType == 10">
+                      <!--                                           <div >-->
+                      <el-card class="box-card">
+                        <el-form-item label="直播间" >
+                          <el-select  v-model="item.liveId"
+                                      placeholder="请选择直播间" size="mini"
+                                      @change="liveChange(item)" >
+                            <el-option
+                              v-for="dict in liveList"
+                              :key="dict.liveId"
+                              :label="dict.liveName"
+                              :value="dict.liveId"
+                            />
+                          </el-select>
+                        </el-form-item>
+
+                        <el-form-item label="标题" prop="miniprogramTitle">
+                          <el-input v-model="item.miniprogramTitle" placeholder="请输入小程序消息标题，最长为64字节" :rows="2" maxlength="64"
+                                    type="textarea"   @input="checkLiveMiniprogramTitle(item)"/>
+                        </el-form-item>
+                        <el-form-item label="封面" prop="miniprogramPicUrl">
+                          <ImageUpload v-model="item.miniprogramPicUrl" type="image" :num="10" :width="150" :height="150" />
+                        </el-form-item>
+                        <el-form-item label="appid" prop="miniprogramAppid" v-show="false">
+                          <el-input v-model="item.miniprogramAppid" value = 'wx776d6bd6848eec49' disabled />
+                        </el-form-item>
+                        <el-form-item label="page路径" prop="miniprogramPage"  v-show="false" label-width="100px" style="margin-left: -30px">
+                          <el-input v-model="item.miniprogramPage" placeholder="小程序消息打开后的路径"  disabled />
+                        </el-form-item>
+                      </el-card>
+                    </div>
+
+                    <el-form-item label="添加短链" v-if="item.contentType == 1 || item.contentType == 11"  >
+                      <el-tooltip content="请先根据科普选定科普小节之后再添加" effect="dark" :disabled="!!msgForm.videoId">
+                        <el-switch
+                          v-model="item.isBindUrl"
+                          :disabled="!msgForm.videoId"
+                          active-color="#13ce66"
+                          inactive-color="#DCDFE6"
+                          active-value="1"
+                          inactive-value="2">
+                        </el-switch>
+                      </el-tooltip>
+
+                      <span v-if="item.isBindUrl == '1'" style="margin-left: 10px; color: #13ce66">添加URL</span>
+                      <span v-if="item.isBindUrl == '2'" style="margin-left: 10px; color: #b1b4ba">不加URL</span>
+                    </el-form-item>
+
+                    <el-form-item label="程序类型" v-if="item.contentType == 4"  >
+                      <el-tooltip content="请先根据科普选定科普小节之后再添加" effect="dark" :disabled="!!msgForm.videoId">
+                        <el-radio-group v-model="item.isSortUrl" :disabled="!msgForm.videoId">
+                          <el-radio :label="1">发小程序卡片</el-radio>
+                          <el-radio :label="2">发微信的短链</el-radio>
+                        </el-radio-group>
+                      </el-tooltip>
+
+                    </el-form-item>
+                    <span v-if="item.contentType == 4" >不选默认【发小程序卡片】</span>
+
+                    <el-form-item label="课节过期时间" v-if="item.isBindUrl == '1'
+                                                          && item.contentType != 2
+                                                          && item.contentType != 5
+                                                          && item.contentType != 6
+                                                          && item.contentType != 8"
+                                  style="margin-top: 1%" label-width="100px">
+                      <el-row>
+                        <el-input-number  v-model="item.expiresDays"  :min="1" :max="100" ></el-input-number>
+                        （天）
+                      </el-row>
+                      <el-row>
+                        <span class="tip">填写0或不填时，默认为系统配置的默认时间</span>
+                      </el-row>
+                    </el-form-item>
+                  </el-form>
+                </el-col>
+                <el-col :span="1" :offset="1">
+                  <i class="el-icon-delete" @click="delSetList(index)" style="margin-top: 20px;" v-if="setting.length>1"></i>
+                </el-col>
+              </el-row>
+            </div>
+            <el-link type="primary" class="el-icon-plus" :underline="false" @click='addSetList()'  >添加内容</el-link>
+
+          </el-form-item>
+
+          <el-form-item label="发送时间类型" prop="sendTimeType" v-if="msgForm.draftStrategy==1" >
+            <el-radio-group v-model="msgForm.sendTimeType">
+              <el-radio :label="1">当天发送</el-radio>
+              <el-radio :label="2">次日发送</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="发送时间" prop="sendTime" v-if="msgForm.draftStrategy==1" >
+            <el-time-picker
+              class="custom-input"
+              v-model="msgForm.sendTime"
+              value-format="HH:mm"
+              format="HH:mm"
+              placeholder="时间"
+              style="width: 100px;height: 20px;">
+            </el-time-picker>
+            <span class="tip" style="margin-left: 2%"> 不填时，默认为系统当前时间(立即发送)</span>
+          </el-form-item>
+
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitMsgForm">确 定</el-button>
+          <el-button @click="cancelMsgForm">取 消</el-button>
+        </div>
+    </el-dialog>
+
+    <!-- 添加或修改sopUserLogsInfo对话框 -->
+    <el-dialog title="批量修改客户营期" :visible.sync="updateMsgOpen.updateOpen" width="500px" append-to-body>
+      <el-form ref="updateLogsInfoFrom" :model="updateLogsInfoFrom" :rules="batchRules" label-width="120px">
+        <el-form-item label="选择营期时间" prop="paramTime">
+          <el-date-picker clearable size="small"
+                          v-model="updateLogsInfoFrom.paramTime"
+                          type="date"
+                          value-format="yyyy-MM-dd"
+                          placeholder="选择营期时间">
+          </el-date-picker>
+        </el-form-item>
+      </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>
+
+
+
+    <!-- <el-dialog :title="videoNumOptions.title" :visible.sync="videoNumOptions.open" width="1500px" append-to-body>
+      <userVideo ref="QwUserVideo" @videoResult="qwUserVideoResult"></userVideo>
+    </el-dialog> -->
+  </div>
+</template>
+
+<script>
+import { sendMsgSopType,} from "@/api/app/userLogsInfo";
+import ImageUpload from "@/views/qw/sop/ImageUpload.vue";
+import {courseList, videoList} from "@/api/qw/sop";
+import {updateTimeSopUserLogs} from "@/api/qw/sopUserLogs";
+
+
+export default {
+  name: "sendMsgOpenTool",
+  components: { ImageUpload},
+  data() {
+    return {
+      //上传语音的遮罩层
+      voiceLoading :false,
+      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS2",
+      uploadUrlByVoice:process.env.VUE_APP_BASE_API+"/common/uploadOSSByHOOKVoice",
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // sopUserLogsInfo表格数据
+      sopUserLogsInfoList: [],
+      sysFsSopWatchStatus: [],
+      isSalesCallAdded:false,
+      videoNumOptions: {
+        title: '选择视频号',
+        open: false,
+        content: null,
+        contentIndex: null,
+      },
+      isSalesCallCustomerAdded:false,
+      tagList:[],
+      selectTags:[],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      updateOpen:false,
+
+      //修改营期
+      updateLogsInfoFrom:{},
+      queryParams1: {
+        pageNum: 1,
+        pageSize: 100,
+        dataStatus: '1',
+        name: null,
+        type: null
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        tagIds:null,
+        remark:null,
+        sopId: null,
+        userLogsId: null,
+        userIdParam:null,
+        startTimeParam:null,
+        externalContactId: null,
+        qwUserId: null,
+        corpId: null,
+        externalId: null,
+        fsUserId: null,
+        externalUserName: null,
+        createTime: null,
+      },
+
+      courseList:[],
+      videoList:[],
+      //插件版
+      sysQwSopAiContentType:[],
+
+      sendMsgOpen:{
+        title:'一键批量群发',
+        open:false,
+        ids:null,
+      },
+      updateMsgOpen:{
+        title:'批量修改客户营期',
+        updateOpen:false,
+        ids:null,
+      },
+
+      smsTemplateList: [],
+      // 表单参数
+      form: {},
+      setting:[{contentType:'1', value: '',}],
+      msgForm:{
+        videoId:null,
+        courseId:null,
+        courseType:null,
+        userIdParam:null,
+        setting:null,
+        ids:null,
+        type:null,
+        corpId:null,
+        sopId: null,
+        startTime: null,
+        sendTime: null,
+        qwUserId: null,
+        draftStrategy:1,
+        sendTimeType: 1, // 添加字段：1-当天发送，2-次日发送
+      },
+      // 表单校验
+      rules: {},
+      batchRules:{
+        paramTime: [
+          { required: true, message: '选择的时间不能为空', trigger: 'blur' }
+        ],
+      },
+      msgRules:{},
+    };
+  },
+
+  created() {
+    this.getDicts("sys_qwSopAi_contentType").then(response => {
+      this.sysQwSopAiContentType = response.data;
+    });
+    this.getDicts("sys_fs_sop_watch_status").then(response => {
+      this.sysFsSopWatchStatus = response.data;
+    });
+
+    courseList().then(response => {
+      this.courseList = response.list;
+    });
+
+    this.loadSmsTemplates();
+  },
+  methods: {
+    getLuckyBagStatus(content) {
+      const selectedLuckyBag = this.luckyBagList.find(item => item.id === content.luckyBagId);
+      if (selectedLuckyBag) {
+        content.luckyBagDataStatus = selectedLuckyBag.dataStatus; // 自动填充标题
+      } else {
+        // 若未找到对应直播间，清空标题和封面（可选）
+        content.luckyBagDataStatus = null;
+      }
+    },
+    checkLiveMiniprogramTitle(item) {
+      this.$forceUpdate();
+    },
+    liveChange(content) {
+      // content.liveId 是选中的直播间 ID（liveId）
+      const selectedLive = this.liveList.find(live => live.liveId === content.liveId);
+      if (selectedLive) {
+        // 从选中的直播间对象中提取标题和封面，赋值给当前内容的对应字段
+        // 假设直播间对象中标题字段为 liveTitle，封面字段为 coverImg（根据实际接口字段调整）
+        content.miniprogramTitle = selectedLive.liveName || ''; // 自动填充标题
+        content.miniprogramPicUrl = selectedLive.liveImgUrl || ''; // 自动填充封面
+      } else {
+        // 若未找到对应直播间，清空标题和封面（可选）
+        content.miniprogramTitle = '';
+        content.miniprogramPicUrl = '';
+      }
+    },
+    oneClickGroupSending(val,type,corpId){
+
+      this.sendMsgOpen.open= true;
+      this.msgForm.ids = val;
+      this.msgForm.type = type;
+      this.msgForm.corpId = corpId;
+
+    },
+    updateTimeUserLogs(val,type,corpId,sopId){
+
+      this.updateMsgOpen.updateOpen= true;
+      this.msgForm.ids = val;
+      this.msgForm.type = type;
+      this.msgForm.corpId = corpId;
+      this.msgForm.sopId = sopId;
+
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["updateLogsInfoFrom"].validate(valid => {
+        if (valid) {
+
+          this.updateLogsInfoFrom.ids=this.msgForm.ids;
+          this.updateLogsInfoFrom.sopId= this.msgForm.sopId
+          this.updateLogsInfoFrom.corpId= this.msgForm.corpId
+
+          let loadingRock = this.$loading({
+            lock: true,
+            text: '正在执行中请稍后~~请不要刷新页面！！',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)'
+          });
+
+          updateTimeSopUserLogs(this.updateLogsInfoFrom).then(response => {
+            this.msgSuccess("修改成功");
+            this.open = false;
+            this.updateMsgOpen.updateOpen=false;
+
+            this.$emit('flashNotify')
+            loadingRock.close();
+          }).finally(res=>{
+            loadingRock.close();
+          })
+
+        }
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.updateMsgOpen.updateOpen = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        sopId: null,
+        userLogsId: null,
+        externalContactId: null,
+        qwUserId: null,
+        corpId: null,
+        externalId: null,
+        fsUserId: null,
+        externalUserName: null,
+        createTime: null,
+        crtTime: null,
+        updateTime: null
+      };
+      this.resetForm("form");
+    },
+    courseChange() {
+      if (this.msgForm.courseId != null ) {
+        const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === this.msgForm.courseId);
+        for (let i = 0; i < this.setting.length; i++) {
+          //响应式直接给链接的标题/封面上值
+          if (selectedCourse && this.msgForm.courseId != null) {
+            if ( this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ){
+              this.$set(this.setting[i], 'linkTitle', selectedCourse.dictLabel);
+              this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
+            }
+
+            if ( this.setting[i].contentType == 4 || this.setting[i].contentType == 15|| this.setting[i].contentType == 19){
+              this.$set(this.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
+            }
+          }
+
+        }
+
+      }
+      videoList(this.msgForm.courseId).then(response => {
+        this.videoList=response.list;
+      });
+    },
+
+    videoIdChange() {
+      if (this.msgForm.videoId != null ) {
+        // 查找选中的课节对应的 label
+        const selectedVideo = this.videoList.find(course => parseInt(course.dictValue) === this.msgForm.videoId);
+        if (selectedVideo) {
+          console.log("selectedVideo={}", selectedVideo)
+
+          // 重新获取内容类型字典数据
+          this.getDicts("sys_qwSopAi_contentType").then(response => {
+            let contentTypeList = response.data;
+
+            if (!selectedVideo || selectedVideo.openClass != 1) {
+              contentTypeList = contentTypeList.filter(item => item.dictValue !== '19');
+            }
+
+            // 使用 Vue.set 确保响应式
+            this.$set(this, 'sysQwSopAiContentType', contentTypeList);
+
+            // 强制更新每个 setting 项
+            this.setting.forEach((item, index) => {
+              if (item.contentType === '19' && (!selectedVideo || selectedVideo.openClass != 1)) {
+                // 将 contentType 重置为默认值（比如1）
+                this.$set(item, 'contentType', '1');
+              }
+              this.$set(this.setting[index], 'openClass', selectedVideo.openClass);
+            });
+
+            // 强制整个组件更新
+            this.$forceUpdate();
+          });
+        }
+        for (let i = 0; i < this.setting.length; i++) {
+          //响应式直接给链接的描述上值
+          if (selectedVideo && this.msgForm.videoId != null) {
+            if (this.setting[i].contentType == 3 || this.setting[i].contentType == 9 ){
+              this.$set(this.setting[i], 'linkDescribe', selectedVideo.dictLabel);
+            }
+
+            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 15|| this.setting[i].contentType == 19){
+              this.$set(this.setting[i], 'miniprogramTitle', selectedVideo.dictLabel);
+            }
+
+
+          }
+        }
+      }
+    },
+    handleAvatarSuccessFile(res, file, item) {
+      if (res.code === 200) {
+        // 使用 $set 确保响应式更新
+        this.$set(item, 'fileUrl', res.url);
+      } else {
+        this.msgError(res.msg);
+      }
+    },
+    beforeAvatarUploadFile(file){
+      const isLt1M = file.size / 1024 / 1024 < 10;
+      if (!isLt1M) {
+        this.$message.error('上传大小不能超过 10MB!');
+      }
+      return isLt1M;
+    },
+    //下载文件
+    downloadUrl(materialUrl) {
+      // 直接返回文件 URL
+      return materialUrl;
+    },
+
+    handleAvatarSuccessVideo(res, file, item) {
+      if(res.code==200){
+        // 使用 $set 确保响应式更新
+        this.$set(item, 'videoUrl', res.url);
+      }
+      else{
+        this.msgError(res.msg);
+      }
+    },
+
+    beforeAvatarUploadVideo(file){
+      const isLt30M = file.size / 1024 / 1024 < 10;
+      const isMP4 = file.type === 'video/mp4';
+
+      if (!isMP4) {
+        this.$message.error('仅支持上传 MP4 格式的视频文件!');
+        return false;
+      }
+
+      if (!isLt30M) {
+        this.$message.error('上传大小不能超过 10MB!');
+        return false;
+      }
+
+      return true;
+    },
+
+    handleInputVideoText(value,content){
+      // 允许的字符：中文、英文（大小写）、数字和指定标点符号（，。！？）
+      const regex = /^[\u4e00-\u9fa5，。！？,!?]+$/;
+
+      // 删除不符合条件的字符
+      const filteredValue = value.split('').filter(char => regex.test(char)).join('');
+
+      this.$set(content, 'value', filteredValue);
+
+    },
+
+    delSetList(index){
+      this.setting.splice(index,1)
+    },
+    addSetList(){
+      const newSetting = {
+        contentType:'1',
+        value: '',
+        sendTimeType: 1, // 为每个规则项添加发送时间类型
+      };
+      // 将新设置项添加到 content.setting 数组中
+      this.setting.push(newSetting);
+
+    },
+
+
+    handleKeydown(event, index) {
+      const item = this.setting[index];
+      const textarea = this.$refs[`textarea-${index}`][0].$refs.textarea;
+      const cursorPosition = textarea.selectionStart;
+
+      // 检查是否按下了 Backspace 或 Delete 键
+      if (event.key === 'Backspace' || event.key === 'Delete') {
+        const tags = ['#客服称呼#', '#客户称呼#']; // 需要检查的标签
+        const value = item.value;
+
+        // 遍历标签，检查是否需要删除
+        for (const tag of tags) {
+          let start, end;
+
+          if (event.key === 'Backspace') {
+            // 检查光标前是否是当前标签的一部分
+            start = cursorPosition - tag.length;
+            if (start >= 0 && value.slice(start, cursorPosition) === tag) {
+              // 删除整个标签
+              item.value = value.slice(0, start) + value.slice(cursorPosition);
+              // 更新光标位置
+              this.$nextTick(() => {
+                textarea.setSelectionRange(start, start);
+              });
+              // 更新状态
+              if (tag === '#客服称呼#') item.isSalesCallAdded = false;
+              if (tag === '#客户称呼#') item.isSalesCallCustomerAdded = false;
+              event.preventDefault(); // 阻止默认删除行为
+              break; // 找到匹配的标签后退出循环
+            }
+          } else if (event.key === 'Delete') {
+            // 检查光标后是否是当前标签的一部分
+            end = cursorPosition + tag.length;
+            if (end <= value.length && value.slice(cursorPosition, end) === tag) {
+              // 删除整个标签
+              item.value = value.slice(0, cursorPosition) + value.slice(end);
+              // 更新状态
+              if (tag === '#客服称呼#') item.isSalesCallAdded = false;
+              if (tag === '#客户称呼#') item.isSalesCallCustomerAdded = false;
+              event.preventDefault(); // 阻止默认删除行为
+              break; // 找到匹配的标签后退出循环
+            }
+          }
+
+          // 检查光标是否位于标签的中间
+          for (let i = 0; i <= tag.length; i++) {
+            const tagStart = cursorPosition - i;
+            const tagEnd = tagStart + tag.length;
+            if (
+              tagStart >= 0 &&
+              tagEnd <= value.length &&
+              value.slice(tagStart, tagEnd) === tag
+            ) {
+              // 删除整个标签
+              item.value = value.slice(0, tagStart) + value.slice(tagEnd);
+              // 更新光标位置
+              this.$nextTick(() => {
+                textarea.setSelectionRange(tagStart, tagStart);
+              });
+              // 更新状态
+              if (tag === '#客服称呼#') item.isSalesCallAdded = false;
+              if (tag === '#客户称呼#') item.isSalesCallCustomerAdded = false;
+              event.preventDefault(); // 阻止默认删除行为
+              break; // 找到匹配的标签后退出循环
+            }
+          }
+        }
+      }
+    },
+
+    // 切换添加客服称呼按钮点击事件
+    toggleSalesCall(index) {
+      const item = this.setting[index];
+      const salesCall = '#客服称呼#';
+      const textarea = this.$refs[`textarea-${index}`][0].$refs.textarea;
+
+      // 获取当前光标位置
+      const cursorPosition = textarea.selectionStart;
+
+      if (item.isSalesCallAdded) {
+        // 移除所有的 #客服称呼#
+        item.value = item.value.replace(new RegExp(salesCall, 'g'), '');
+      } else {
+        // 添加 #客服称呼#
+        item.value = item.value.slice(0, cursorPosition) + salesCall + item.value.slice(cursorPosition);
+      }
+
+      // 切换状态
+      item.isSalesCallAdded = !item.isSalesCallAdded;
+
+      // 保持光标位置
+      this.$nextTick(() => {
+        textarea.setSelectionRange(cursorPosition, cursorPosition);
+      });
+    },
+    toggleSalesCallCustomer(index) {
+      const item = this.setting[index];
+      const salesCall = '#客户称呼#';
+      const textarea = this.$refs[`textarea-${index}`][0].$refs.textarea;
+
+      // 获取当前光标位置
+      const cursorPosition = textarea.selectionStart;
+
+      if (item.isSalesCallCustomerAdded) {
+        // 移除所有的 #客服称呼#
+        item.value = item.value.replace(new RegExp(salesCall, 'g'), '');
+      } else {
+        // 添加 #客户称呼#
+        item.value = item.value.slice(0, cursorPosition) + salesCall + item.value.slice(cursorPosition);
+      }
+
+      // 切换状态
+      item.isSalesCallCustomerAdded = !item.isSalesCallCustomerAdded;
+
+      // 保持光标位置
+      this.$nextTick(() => {
+        textarea.setSelectionRange(cursorPosition, cursorPosition);
+      });
+    },
+
+    handleContentTypeChange() {
+
+      //如果是链接的才上
+      if (this.msgForm.courseId != null ) {
+        const selectedCourse = this.courseList.find(course => parseInt(course.dictValue) === this.msgForm.courseId);
+        for (let i = 0; i < this.setting.length; i++) {
+          //响应式直接给链接的标题/封面上值
+          if (selectedCourse  && this.msgForm.courseId != null) {
+
+            if (this.setting[i].contentType == 3 || this.setting[i].contentType == 9){
+              this.$set(this.setting[i], 'linkTitle', selectedCourse.dictLabel);
+              this.$set(this.setting[i], 'linkImageUrl', selectedCourse.dictImgUrl);
+            }
+            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 15|| this.setting[i].contentType == 19){
+              this.$set(this.setting[i], 'miniprogramPicUrl', selectedCourse.dictImgUrl);
+            }
+
+
+          }
+
+        }
+
+      }
+      if (this.msgForm.videoId != null ) {
+        // 查找选中的课节对应的 label
+        const selectedVideo = this.videoList.find(course => parseInt(course.dictValue) === this.msgForm.videoId);
+
+        for (let i = 0; i < this.setting.length; i++) {
+          //响应式直接给链接的描述上值
+          if (selectedVideo  && this.msgForm.videoId != null) {
+
+            if (this.setting[i].contentType == 3 || this.setting[i].contentType == 9){
+              this.$set(this.setting[i], 'linkDescribe', selectedVideo.dictLabel);
+            }
+            if (this.setting[i].contentType == 4 || this.setting[i].contentType == 15|| this.setting[i].contentType == 19){
+              this.$set(this.setting[i], 'miniprogramTitle', selectedVideo.dictLabel);
+            }
+
+          }
+        }
+      }
+
+
+    },
+
+    resetSendMsgSop() {
+      this.msgForm = {
+        videoId:null,
+        courseId:null,
+        courseType:null,
+        corpId:null,
+        setting:null,
+        sendTime:null,
+        draftStrategy:1,
+        sendTimeType: 1, // 添加默认值
+      };
+      this.resetForm("msgForm");
+    },
+
+    // 获取短信模板信息（类似福袋的处理方式）
+    getSmsTemplateInfo(content) {
+      // 如果短信模板列表为空，先加载数据
+      if (this.smsTemplateList.length === 0) {
+        getSmsTempList().then(response => {
+          this.smsTemplateList = response.rows || response.data || [];
+          // 加载完成后再次调用自身来处理选中项
+          this.processSelectedSmsTemplate(content);
+        }).catch(error => {
+          console.error('加载短信模板失败:', error);
+          this.$message.error('加载短信模板失败');
+        });
+      } else {
+        // 直接处理选中项
+        this.processSelectedSmsTemplate(content);
+      }
+    },
+
+    // 处理选中的短信模板
+    processSelectedSmsTemplate(content) {
+      const selectedTemplate = this.smsTemplateList.find(item => item.tempId === content.smsTemplateId);
+      if (selectedTemplate) {
+        // 自动填充模板内容预览
+        this.$set(content, 'smsTemplateContent', selectedTemplate.content || selectedTemplate.templateContent || '');
+      } else {
+        // 清空相关内容
+        this.$set(content, 'smsTemplateContent', '');
+      }
+    },
+
+    // 加载短信模板列表
+    loadSmsTemplates() {
+      if (this.smsTemplateList.length > 0) {
+        return; // 如果已经有数据，不再重复加载
+      }
+
+      getSmsTempList().then(response => {
+        this.smsTemplateList = response.rows || response.data || [];
+        if (this.smsTemplateList.length === 0) {
+          this.$message.info('暂无可用的短信模板');
+        }
+      }).catch(error => {
+        console.error('加载短信模板失败:', error);
+        this.$message.error('加载短信模板失败');
+      });
+    },
+
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+
+// 修改后的方法：在原有的基础上增加一条消息
+    processContentType13(settings) {
+      const result = [];
+
+      settings.forEach(item => {
+        // 如果 contentType 是 13 且 value 不为空，则额外添加一条 contentType 为 1 的消息
+        if (item.contentType == 13 && item.value && item.value.trim() !== '') {
+          // 按换行符分割内容，取第一部分
+          const contentParts = item.value.split('\n')
+            .map(part => part.trim())
+            .filter(part => part !== '');
+
+          if (contentParts.length > 0) {
+            // 创建一条额外的消息，使用第一部分内容
+            const additionalMessage = {
+              ...item,
+              contentType: 1, // 改为文本类型
+              value: contentParts[0]
+            };
+            result.push(additionalMessage);
+          }
+        }
+        if (item.contentType == 10) {
+          item.miniprogramAppid = 'wx776d6bd6848eec49'
+        }
+        result.push(item);
+      });
+
+      return result;
+    },
+    submitMsgForm() {
+      // 表单验证
+      this.$refs["msgForm"].validate(valid => {
+        if (valid) {
+          // 确保发送时间类型被传递
+          this.msgForm.sendTimeType = this.msgForm.sendTimeType;
+          if (this.msgForm.draftStrategy == 1) {
+            // 处理 contentType 13 的拆分逻辑
+            const processedSetting = this.processContentType13(this.setting);
+            this.msgForm.setting = JSON.stringify(processedSetting);
+
+            // 基础验证
+            if (processedSetting.length <= 0) {
+              return this.$message.error("请添加规则")
+            }
+            if (this.msgForm.courseId === null || this.msgForm.courseId === '') {
+              return this.$message.error("科普不能为空")
+            }
+            if (this.msgForm.videoId === null || this.msgForm.videoId === '') {
+              return this.$message.error("课节不能为空")
+            }
+            if (this.msgForm.courseType === null || this.msgForm.courseType === '') {
+              return this.$message.error("消息类型不能为空")
+            }
+
+            // 内容类型验证
+            for (let i = 0; i < processedSetting.length; i++) {
+              const item = processedSetting[i];
+
+              // 文本内容验证
+              if (item.contentType == 1 && (item.value == null || item.value == "")) {
+                return this.$message.error("内容不能为空")
+              }
+              // 图片内容验证
+              if (item.contentType == 2 && (item.imgUrl == null || item.imgUrl == "")) {
+                return this.$message.error("图片不能为空")
+              }
+              // 链接内容验证
+              if ((item.contentType == 3 || item.contentType == 9) && (item.linkTitle == null || item.linkTitle == "")) {
+                return this.$message.error("链接标题不能为空")
+              }
+              if ((item.contentType == 3 || item.contentType == 9) && (item.linkDescribe == null || item.linkDescribe == "")) {
+                return this.$message.error("链接描述不能为空")
+              }
+              if ((item.contentType == 3 || item.contentType == 9) && (item.linkImageUrl == null || item.linkImageUrl == "")) {
+                return this.$message.error("链接图片不能为空")
+              }
+              if ((item.contentType == 3 || item.contentType == 9) && item.type == 1 && (item.linkUrl == null || item.linkUrl == "")) {
+                return this.$message.error("链接地址不能为空")
+              }
+              // 小程序内容验证
+              if ((item.contentType == 4 || item.contentType == 15  || item.contentType == 19) && (item.miniprogramTitle == null || item.miniprogramTitle == "")) {
+                return this.$message.error("小程序消息标题不能为空")
+              }
+              if ((item.contentType == 4 || item.contentType == 15 || item.contentType == 19) && (item.miniprogramPicUrl == null || item.miniprogramPicUrl == "")) {
+                return this.$message.error("小程序封面地址不能为空")
+              }
+              // 文件内容验证
+              if (item.contentType == 5 && (item.fileUrl == null || item.fileUrl == "")) {
+                return this.$message.error("文件不能为空")
+              }
+              // 视频内容验证
+              if (item.contentType == 6 && (item.videoUrl == null || item.videoUrl == "")) {
+                return this.$message.error("视频不能为空")
+              }
+              // 语音内容验证
+              if (item.contentType == 7 && (item.value == null || item.value == "")) {
+                return this.$message.error("语音不能为空")
+              }
+              // 直播间内容验证
+              if (item.contentType == 10 && (item.liveId == null || item.liveId == "")) {
+                this.$message.error("直播间不能为空")
+                return false;
+              }
+              if (item.contentType == 10 && (item.miniprogramTitle == null || item.miniprogramTitle == "")) {
+                this.$message.error("标题不能为空")
+                return false;
+              }
+              if (item.contentType == 10 && (item.miniprogramPicUrl == null || item.miniprogramPicUrl == "")) {
+                this.$message.error("封面不能为空")
+                return false;
+              }
+              // 福袋内容验证
+              if (item.contentType == 14 && (item.luckyBagId == null || item.luckyBagId === "")) {
+                return this.$message.error("福袋不能为空")
+              }
+              // 短信模板验证
+              if (item.contentType == 17 && (item.smsTemplateId == null || item.smsTemplateId === "")) {
+                return this.$message.error("短信模板不能为空")
+              }
+            }
+
+            // 短信模板数据映射
+            for (let j = 0; j < processedSetting.length; j++) {
+              const item = processedSetting[j];
+              if (item.contentType == 17 && item.smsTemplateId) {
+                // 根据选中的短信模板ID查找对应的模板信息
+                const selectedTemplate = this.smsTemplateList.find(template => template.tempId === item.smsTemplateId);
+                if (selectedTemplate) {
+                  // 设置短信模板的相关字段
+                  this.$set(item, 'smsTemplateCode', selectedTemplate.tempCode || '');
+                  this.$set(item, 'smsTemplateTitle', selectedTemplate.title || '');
+                }
+              }
+            }
+
+            // 重新序列化处理后的数据
+            this.msgForm.setting = JSON.stringify(processedSetting);
+
+            // 关闭弹窗
+            this.sendMsgOpen.open = false;
+
+            // 显示加载状态
+            const loading = this.$loading({
+              lock: true,
+              text: '正在执行中请稍后~~请不要刷新页面！！',
+              spinner: 'el-icon-loading',
+              background: 'rgba(0, 0, 0, 0.7)'
+            });
+
+            // 发送消息
+            sendMsgSopType(this.msgForm).then(response => {
+              this.msgSuccess("一键群发成功");
+              loading.close();
+              this.setting = [{ contentType: '1', value: '' }];
+              this.resetSendMsgSop();
+            }).catch(error => {
+              loading.close();
+              this.msgError("发送失败：" + (error.message || '未知错误'));
+            });
+            // 测试用 - 查看处理后的数据
+          /*  console.log('原始setting:', this.setting);
+            console.log('处理后的setting:', processedSetting);
+            console.log('最终提交的数据:', this.msgForm);
+            loading.close();*/
+          }
+        }
+      });
+    },
+    cancelMsgForm(){
+      this.sendMsgOpen.open = false;
+      this.resetSendMsgSop();
+    },
+
+    //选择视频号
+    hanldeSelectVideoNum(content, index) {
+      this.videoNumOptions.content = content;
+      this.videoNumOptions.contentIndex = index;
+      this.videoNumOptions.open = true;
+    },
+
+    qwUserVideoResult(val) {
+
+      // 根据选中的内容，将返回的数据更新到相应的表单项
+      const content = this.videoNumOptions.content;
+      const setList = content[this.videoNumOptions.contentIndex];
+      setList.nickname = val.nickname;
+      setList.avatar = val.avatar;
+      setList.coverUrl = val.coverUrl;
+      setList.thumbUrl = val.thumbUrl;
+      setList.desc = val.desc;
+      setList.url = val.url;
+      setList.extras = val.extras;
+      setList.videoId = val.id;
+      console.info(setList)
+
+      this.videoNumOptions.open = false;
+
+    },
+  }
+};
+</script>

src/views/app/sop/userLogsInfo/sopUserLogsInfoDetails.vue

@@ -0,0 +1,689 @@
+<template>
+    <div class="app-container">
+
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+            <el-form-item label="会员id" prop="fsUserId">
+                <el-input
+                    v-model="queryParams.fsUserId"
+                    @input="queryParams.fsUserId = queryParams.fsUserId.replace(/[^\d]/g, '')"
+                    placeholder="请输入会员id"
+                    clearable
+                    size="small"
+                    @keyup.enter.native="handleQuery"
+                />
+            </el-form-item>
+            <el-form-item label="会员名称" prop="fsUserName">
+                <el-input v-model="queryParams.fsUserName" placeholder="请输入会员名称" clearable size="small"
+                    @keyup.enter.native="handleQuery" />
+            </el-form-item>
+
+            <el-form-item label="进线时间" prop="inComTime">
+                <el-date-picker clearable size="small" v-model="queryParams.inComTime" type="date"
+                    value-format="yyyy-MM-dd" placeholder="选择进线时间">
+                </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="标签" prop="tagIds">
+                <div @click="hangleChangeTags()"
+                    style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 250px">
+                    <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+                        <el-tag type="success" closable :disable-transitions="false" v-for="list in this.selectTags"
+                            :key="list.id" @close="handleCloseTags(list)" style="margin: 3px;">{{ list.name }}
+                        </el-tag>
+                    </div>
+                </div>
+
+            </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-row :gutter="10" class="mb8" v-if="queryParams.filterMode == 1">
+            <el-col :span="1.5">
+                <el-tooltip class="item" effect="dark"
+                    content="此功能用于给 选中的 营期 内【所有的】客户发送消息" placement="top">
+                    <el-button
+                        type="warning"
+                        icon="el-icon-s-promotion"
+                        size="medium"
+                        :disabled="multiple"
+                        @click="openGroupSendMessagePage"
+                    >一键群发
+                    </el-button>
+                </el-tooltip>
+            </el-col>
+            <el-col :span="1.5">
+                <el-button type="danger" plain icon="el-icon-edit" size="medium" :disabled="multiple"
+                    @click="handleUpdate">批量修改客户营期</el-button>
+            </el-col>
+        </el-row>
+
+        <div style="color: #999;font-size: 14px;display: flex;align-items: center;margin-bottom: 5px">
+            <i class="el-icon-info"></i>
+            【营期一键群发】：此功能用于给 选中的 营期 内【所有的】客户发送 消息
+        </div>
+        <div style="color: #999;font-size: 14px;display: flex;align-items: center;margin-bottom: 5px">
+            <i class="el-icon-info"></i>
+            【批量修改客户营期】：选中 相应的客户 修改到 想进的相应的营期
+        </div>
+        <el-table border v-loading="loading" :data="sopUserLogsInfoList" @selection-change="handleSelectionChange"
+            v-if="queryParams.filterMode == 1">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="编号" align="center" prop="id" min-width="180" />
+            <el-table-column label="会员id" align="center" prop="fsUserId" min-width="150"/>
+            <el-table-column label="会员名称" align="center" prop="fsUserName" min-width="150"/>
+            <el-table-column label="会员标签" align="center" prop="tagsName" min-width="250">
+                <template slot-scope="scope">
+                    <div v-for="name in (scope.row.tagsName ? scope.row.tagsName.split(',') : [])" style="display: inline;">
+                        <el-tag type="success">{{ name }}</el-tag>
+                    </div>
+                </template>
+            </el-table-column>
+
+            <el-table-column label="进线时间" align="center" prop="createTime" min-width="180" />
+            <el-table-column label="修改时间" align="center" prop="updateTime" min-width="180" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="120" fixed="right">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除客户营期</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.startIndex"
+            :limit.sync="queryParams.pageLimit" @pagination="getList" />
+
+        <!-- 添加或修改sopUserLogsInfo对话框 -->
+        <el-dialog title="批量修改客户营期" :visible.sync="updateOpen" width="500px" height="300px" append-to-body>
+            <el-form ref="updateLogsInfoFrom" :model="updateLogsInfoFrom" :rules="batchRules" label-width="120px">
+                <el-form-item label="选择营期时间" prop="paramTime">
+                    <el-date-picker clearable size="small" v-model="updateLogsInfoFrom.pTime" type="date"
+                        value-format="yyyy-MM-dd" placeholder="选择营期时间">
+                    </el-date-picker>
+                </el-form-item>
+            </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>
+
+
+        <!--  搜索标签   -->
+        <el-dialog :title="changeTagDialog.title" :visible.sync="changeTagDialog.open" width="1000px" custom-class="search-tag-dialog"
+            append-to-body>
+            <select-tag 
+                :tagSelected="selectTags"
+                @tagSubmit="tagSubmitForm"
+                @tagCancel="tagCancel" 
+                @tagSelection="tagSelection"
+            />
+        </el-dialog>
+
+        <el-dialog title="一键群发"
+            :visible.sync="groupSendMessageForm.visible" width="1000px" append-to-body :close-on-click-modal="false">
+        <group-send-message
+            :visible="groupSendMessageForm.visible"
+            :ids="groupSendMessageForm.ids"
+            :sourceType="1"
+            @changeGroupSendMessageVisible="changeGroupSendMessageVisible"
+        />
+        </el-dialog>
+
+    </div>
+</template>
+
+<script>
+import {
+    listSopUserLogsInfo,
+    delSopUserLogsInfo,
+    exportSopUserLogsInfo,
+    sendMsgSop, batchUpdateSopUserLogsInfoToTime
+} from "@/api/app/userLogsInfo";
+import ImageUpload from "@/views/app/sop/info/ImageUpload";
+import selectTag from "@/views/app/tagGroup/selectTag.vue";
+import groupSendMessage from "@/views/app/sop/userLogsInfo/groupSendMessage.vue";
+
+export default {
+    name: "sopUserLogsInfoDetails",
+    components: { ImageUpload, selectTag, groupSendMessage, },
+    data() {
+        return {
+            groupSendMessageForm: {
+                ids: [],
+                visible: false,
+            },
+            luckyBagList: [],
+            luckyBag: null,
+            liveList: [],
+            //上传语音的遮罩层
+            voiceLoading: false,
+            uploadUrl: process.env.VUE_APP_BASE_API + "/app/common/uploadOSS2",
+            uploadUrlByVoice: process.env.VUE_APP_BASE_API + "/app/common/uploadOSSByHOOKVoice",
+            // 遮罩层
+            loading: true,
+            // 导出遮罩层
+            exportLoading: false,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            videoNumOptions: {
+                title: '选择视频号',
+                open: false,
+                content: null,
+                contentIndex: null,
+            },
+            // sopUserLogsInfo表格数据
+            sopUserLogsInfoList: [],
+            isSalesCallAdded: false,
+            isSalesCallCustomerAdded: false,
+            selectTags: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            updateOpen: false,
+            // 查询参数
+            queryParams: {
+                startIndex: 1,
+                pageLimit: 10,
+                tagIds: null,
+                remark: null,
+                sopId: null,
+                userLogsId: null,
+                userIdParam: null,
+                startTimeParam: null,
+                fsUserId: null,
+                fsUserName: null,
+                inComTime: null,
+                createTime: null,
+                entryTime: null,
+                fsUserIdStatus: null,
+            },
+            tagTotal: 0,
+
+            //标签
+            changeTagDialog: {
+                title: "",
+                open: false,
+            },
+
+            courseList: [],
+            videoList: [],
+
+            sendMsgOpen: {
+                title: '一键批量群发',
+                open: false,
+                ids: null,
+            },
+            // 表单参数
+            form: {},
+            updateLogsInfoFrom: {},
+            setting: [{ contentType: '1', value: '', }],
+            msgForm: {
+                videoId: null,
+                courseId: null,
+                courseType: null,
+                userIdParam: null,
+                setting: null,
+                ids: null,
+                sopId: null,
+                startTime: null,
+            },
+            // 表单校验
+            rules: {},
+            batchRules: {
+                pTime: [
+                    { required: true, message: '选择的时间不能为空', trigger: 'blur' }
+                ],
+            },
+            msgRules: {},
+        };
+    },
+    props: {
+        refreshCount: {
+            default: 1,
+            type: Number,
+        },
+        params: {
+            default: {},
+            type: Object,
+        }
+    },
+    watch: {
+        refreshCount: {
+            handler(o, n) {
+                this.getList();
+            },
+            immediate: true
+        },
+    },
+    methods: {
+
+        hangleChangeTags() {
+            this.changeTagDialog.open = true;
+        },
+        tagSelection(group, tag) {
+            if (!tag.isSelected) {
+                this.selectTags = this.selectTags.filter(item => tag.id != item.id);
+            } else {
+                if (!this.selectTags.some(st => st.id == tag.id)) {
+                    this.selectTags.push(tag);
+                }
+            }
+            this.queryParams.tagIds = this.selectTags.map(st => st.id);
+        },
+
+        //确定选择标签
+        tagSubmitForm() {
+            this.updateLogsInfoFrom.pTime = null;
+            this.changeTagDialog.open = false;
+        },
+        //取消选择标签
+        tagCancel() {
+            this.updateLogsInfoFrom.pTime = null;
+            this.changeTagDialog.open = false;
+        },
+
+        //删除一些选择的标签
+        handleCloseTags(tagItem) {
+            this.selectTags = this.selectTags.filter(t => t.id != tagItem.id);
+            if (this.selectTags != null && this.selectTags.length > 0) {
+                // 确保 this.form.tags 是数组
+                if (!this.queryParams.tagIds) {
+                    this.queryParams.tagIds = []; // 如果未定义，初始化
+                } else {
+                    this.queryParams.tagIds = []; // 清空已有数据
+                }
+                // 遍历并添加 tagId
+                this.selectTags.forEach(tag => {
+                    if (tag.tagId) { // 确保 tagId 存在
+                        this.queryParams.tagIds.push(tag.id);
+                    }
+                });
+                this.queryParams.tagIds = this.queryParams.tagIds.join(",");
+            } else {
+                this.queryParams.tagIds = null;
+            }
+        },
+        /** 查询sopUserLogsInfo列表 */
+        getList() {
+            this.loading = true;
+            this.queryParams.sopId = this.params.sopId;
+            this.queryParams.filterMode = this.params.filterMode;
+            this.queryParams.userLogsId = this.params.id;
+            let qp = {...this.queryParams};
+            listSopUserLogsInfo(qp).then(response => {
+                this.sopUserLogsInfoList = response.rows;
+                this.total = response.total;
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.updateOpen = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                id: null,
+                sopId: null,
+                userLogsId: null,
+                externalContactId: null,
+                qwUserId: null,
+                corpId: null,
+                externalId: null,
+                fsUserId: null,
+                externalUserName: null,
+                createTime: null,
+                crtTime: null,
+                updateTime: null
+            };
+            this.resetForm("form");
+        },
+
+
+        resetSendMsgSop() {
+            this.msgForm = {
+                corpId: null,
+                videoId: null,
+                courseId: null,
+                courseType: null,
+                setting: null,
+                ids: null,
+            };
+            this.resetForm("msgForm");
+        },
+
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.selectTags = [];
+            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 = "添加客户营期";
+        },
+
+        /**
+         * 一键群发
+         */
+        handleSendMsg() {
+            this.sendMsgOpen.open = true;
+            this.sendMsgOpen.ids = this.ids;
+        },
+
+        /** 修改按钮操作 */
+        handleUpdate() {
+            this.updateOpen = true;
+        },
+
+        // 修改后的方法：在原有的基础上增加一条消息
+        processContentType13(settings) {
+            const result = [];
+
+            settings.forEach(item => {
+                // 如果 contentType 是 13 且 value 不为空，则额外添加一条 contentType 为 1 的消息
+                if (item.contentType == 13 && item.value && item.value.trim() !== '') {
+                    // 按换行符分割内容，取第一部分
+                    const contentParts = item.value.split('\n')
+                        .map(part => part.trim())
+                        .filter(part => part !== '');
+
+                    if (contentParts.length > 0) {
+                        // 创建一条额外的消息，使用第一部分内容
+                        const additionalMessage = {
+                            ...item,
+                            contentType: 1, // 改为文本类型
+                            value: contentParts[0]
+                        };
+                        result.push(additionalMessage);
+                    }
+                }
+                if (item.contentType == 10) {
+                    item.miniprogramAppid = 'wx4d225cc86cc7885d'
+                }
+                result.push(item);
+            });
+
+            return result;
+        },
+
+        submitMsgForm() {
+            this.$refs["msgForm"].validate(valid => {
+                if (valid) {
+
+                    // 处理 contentType 13 的拆分逻辑
+                    const processedSetting = this.processContentType13(this.setting);
+                    console.log(processedSetting)
+                    this.msgForm.setting = JSON.stringify(processedSetting);
+                    this.msgForm.ids = this.ids;
+                    this.msgForm.sopId = this.queryParams.sopId;
+                    this.msgForm.userIdParam = this.queryParams.userIdParam;
+                    this.msgForm.startTime = this.queryParams.startTimeParam;
+                    this.msgForm.corpId = this.queryParams.corpIdParam;
+                    this.msgForm.filterMode = this.queryParams.filterMode;
+
+                    if (processedSetting.length <= 0) {
+                        return this.$message.error("请添加规则")
+                    }
+                    if (this.msgForm.courseId === null || this.msgForm.courseId === '') {
+                        return this.$message.error("科普不能为空")
+                    }
+
+                    if (this.msgForm.videoId === null || this.msgForm.videoId === '') {
+                        return this.$message.error("课节不能为空")
+                    }
+
+                    if (this.msgForm.courseType === null || this.msgForm.courseType === '') {
+                        return this.$message.error("消息类型不能为空")
+                    }
+
+                    for (let i = 0; i < processedSetting.length; i++) {
+                        const item = processedSetting[i];
+                        if (item.contentType == 1 && (item.value == null || item.value == "")) {
+                            return this.$message.error("内容不能为空")
+                        }
+                        if (item.contentType == 2 && (item.imgUrl == null || item.imgUrl == "")) {
+                            return this.$message.error("图片不能为空")
+                        }
+                        if ((item.contentType == 3 || item.contentType == 9) && (item.linkTitle == null || item.linkTitle == "")) {
+                            return this.$message.error("链接标题不能为空")
+                        }
+                        if ((item.contentType == 3 || item.contentType == 9) && (item.linkDescribe == null || item.linkDescribe == "")) {
+                            return this.$message.error("链接描述不能为空")
+                        }
+                        if ((item.contentType == 3 || item.contentType == 9) && (item.linkImageUrl == null || item.linkImageUrl == "")) {
+                            return this.$message.error("链接图片不能为空")
+                        }
+                        if ((item.contentType == 3 || item.contentType == 9) && item.type == 1 && (item.linkUrl == null || item.linkUrl == "")) {
+                            return this.$message.error("链接地址不能为空")
+                        }
+                        if ((item.contentType == 4 || item.contentType == 15) && (item.miniprogramTitle == null || item.miniprogramTitle == "")) {
+                            return this.$message.error("小程序消息标题不能为空")
+                        }
+                        if ((item.contentType == 4 || item.contentType == 15) && (item.miniprogramPicUrl == null || item.miniprogramPicUrl == "")) {
+                            return this.$message.error("小程序封面地址不能为空")
+                        }
+                        if (item.contentType == 5 && (item.fileUrl == null || item.fileUrl == "")) {
+                            return this.$message.error("文件不能为空")
+                        }
+                        if (item.contentType == 6 && (item.videoUrl == null || item.videoUrl == "")) {
+                            return this.$message.error("视频不能为空")
+                        }
+                        if (item.contentType == 7 && (item.value == null || item.value == "")) {
+                            return this.$message.error("语音不能为空")
+                        }
+                        if (item.contentType == 14 && (item.luckyBagId == null || item.luckyBagId == "")) {
+                            return this.$message.error("福袋不能为空")
+                        }
+                    }
+
+                    this.sendMsgOpen.open = false;
+
+                    const loading = this.$loading({
+                        lock: true,
+                        text: '正在执行中请稍后~~请不要刷新页面！！',
+                        spinner: 'el-icon-loading',
+                        background: 'rgba(0, 0, 0, 0.7)'
+                    });
+                    sendMsgSop(this.msgForm).then(response => {
+                        this.msgSuccess("一键群发成功");
+                        loading.close();
+                        this.setting = [];
+                        this.msgForm = {
+                            videoId: null,
+                            courseId: null,
+                            courseType: null,
+                            setting: null,
+                        }
+                        this.getList();
+                    }).finally(() => {
+                        loading.close();
+                    });
+
+                }
+            });
+        },
+        cancelMsgForm() {
+            this.sendMsgOpen.open = false;
+            this.resetSendMsgSop();
+        },
+        /** 提交按钮 */
+        submitForm() {
+            this.$refs["updateLogsInfoFrom"].validate(valid => {
+                if (valid) {
+                    this.updateLogsInfoFrom.ids = this.ids;
+                    this.updateLogsInfoFrom.sopId = this.queryParams.sopId;
+                    this.updateLogsInfoFrom.uTime = this.updateLogsInfoFrom.pTime;
+                    let loadingRock = this.$loading({
+                        lock: true,
+                        text: '正在执行中请稍后~~请不要刷新页面！！',
+                        spinner: 'el-icon-loading',
+                        background: 'rgba(0, 0, 0, 0.7)'
+                    });
+                    
+                    batchUpdateSopUserLogsInfoToTime(this.updateLogsInfoFrom).then(response => {
+                        this.msgSuccess("修改成功");
+                        this.open = false;
+                        this.updateOpen = false;
+                        this.getList();
+                        loadingRock.close();
+                    }).finally(res => {
+                        loadingRock.close();
+                    })
+                }
+            });
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            const ids = row.id || this.ids;
+            this.$confirm('是否确认删除sopUserLogsInfo编号为"' + ids + '"的数据项?', "警告", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            }).then(function () {
+                return delSopUserLogsInfo(ids);
+            }).then(() => {
+                this.getList();
+                this.msgSuccess("删除成功");
+            }).catch(() => { });
+        },
+        /** 导出按钮操作 */
+        handleExport() {
+            const queryParams = this.queryParams;
+            this.$confirm('是否确认导出所有营期数据项?', "警告", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            }).then(() => {
+                this.exportLoading = true;
+                return exportSopUserLogsInfo(queryParams);
+            }).then(response => {
+                this.download(response.msg);
+                this.exportLoading = false;
+            }).catch(() => { });
+        },
+        //选择视频号
+        hanldeSelectVideoNum(content, index) {
+            this.videoNumOptions.content = content;
+            this.videoNumOptions.contentIndex = index;
+            this.videoNumOptions.open = true;
+        },
+
+        qwUserVideoResult(val) {
+
+            // 根据选中的内容，将返回的数据更新到相应的表单项
+            const content = this.videoNumOptions.content;
+            const setList = content[this.videoNumOptions.contentIndex];
+            setList.nickname = val.nickname;
+            setList.avatar = val.avatar;
+            setList.coverUrl = val.coverUrl;
+            setList.thumbUrl = val.thumbUrl;
+            setList.desc = val.desc;
+            setList.url = val.url;
+            setList.extras = val.extras;
+            setList.videoId = val.id;
+            console.info(setList)
+
+            this.videoNumOptions.open = false;
+
+        },
+        /**
+         * 营期一键群发
+         */
+        openGroupSendMessagePage() {
+            if (this.ids.length === 0) {
+                return this.$message.error('请勾选具体群发记录！');
+            }
+            this.groupSendMessageForm.ids = this.ids;
+            this.groupSendMessageForm.visible = true;
+        },
+        changeGroupSendMessageVisible(visible) {
+            this.groupSendMessageForm.visible = visible;
+        },
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+/deep/ .search-tag-dialog {
+    height: 800px !important;
+    overflow: auto !important;
+}
+
+/* CSS 样式 */
+.tag-container {
+    display: flex;
+    flex-wrap: wrap;
+    /* 超出宽度时自动换行 */
+    gap: 8px;
+    /* 设置标签之间的间距 */
+}
+
+.name-background {
+    display: inline-block;
+    background-color: #abece6;
+    /* 背景颜色 */
+    padding: 4px 8px;
+    /* 调整内边距，让背景包裹文字 */
+    border-radius: 4px;
+    /* 可选：设置圆角 */
+}
+
+.tag-box {
+    padding: 8px 12px;
+    border: 1px solid #989797;
+    border-radius: 4px;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.tag-selected {
+    background-color: #00bc98;
+    color: #fff;
+    border-color: #00bc98;
+}
+
+.el-tag+.el-tag {
+    margin-left: 10px;
+}
+
+
+.button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+}
+</style>

src/views/app/tagGroup/index.vue

@@ -0,0 +1,269 @@
+<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.groupName"
+          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-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          v-hasPermi="['vip:tagGroup:add']"
+          @click="handleAdd"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          v-hasPermi="['vip:tagGroup:edit']"
+          @click="handleUpdate"
+        >修改</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="tagGroupList" @selection-change="handleSelectionChange" border>
+      <el-table-column type="selection" width="55" align="center" />
+
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="排序" align="center" prop="sortOrder" />
+      <el-table-column label="标签" align="center" prop="tags" >
+        <template slot-scope="scope" >
+            <el-tag type="success" v-for="i in scope.row.tags" :key="i.id" style="margin: 2px 5px 0 0;">{{i.name}}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            v-hasPermi="['vip:tagGroup:edit']"
+            @click="handleUpdate(scope.row)"
+          >修改</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="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入名称"  />
+        </el-form-item>
+        <el-form-item label="排序" prop="sortOrder">
+          <el-input-number v-model="form.sortOrder" placeholder="请输入排序" />
+        </el-form-item>
+        <el-row>
+          <el-col :span="3"><div style="margin-top: 9px;font-weight: bold;float: right; margin-right: 10px;">标签</div></el-col>
+          <el-col :span="21">
+            <el-table :data="form.tags">
+              <el-table-column label="名称" prop="name" align="center" >
+                <template slot-scope="scope">
+                  <el-input v-model="scope.row.name"   ></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column label="排序" prop="sortOrder" align="center" >
+                <template slot-scope="scope">
+                  <el-input-number v-model="scope.row.sortOrder"  ></el-input-number>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="150px" align="center">
+                <template slot-scope="scope" >
+                    <el-button @click="addRow" size="mini" type="text" >新增</el-button>
+                    <el-button @click="deleteRow(scope.$index,scope.row)"   size="mini" type="text" v-if="form.tags.length>1">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </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 { listTagGroup, addTagGroup, getTagGroup, updateTagGroup } from "@/api/app/tag/tagGroup";
+export default {
+  name: "TagGroup",
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 会员标签组表格数据
+      tagGroupList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        groupName: null,
+      },
+      tagJson:[],
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "名称不能为空", trigger: "blur" }
+        ],
+      }
+    };
+  },
+  mounted() {
+    this.handleQuery();
+  },
+  methods: {
+    /** 查询会员标签组列表 */
+    getList() {
+      this.loading = true;
+      listTagGroup(this.queryParams).then(response => {
+        this.tagGroupList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        groupId: null,
+        name: null,
+        sortOrder: null,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    addRow() {
+      this.form.tags.push({ name: "标签", sortOrder: 0},);
+    },
+    deleteRow(index,row) {
+      this.form.tags.splice(index, 1);
+      //存在groupId则是数据库中元数据，删除时需标记
+      if (row.groupId) {
+        if (!this.form.removeTagIds) {
+          this.form.removeTagIds = [row.id];
+        } else {
+          this.form.removeTagIds.push(row.id);
+        }
+      }
+    },
+
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        groupName: null,
+      };
+      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.form.tags= [
+        { name: "标签", sortOrder: 0},
+      ];
+      this.title = "添加会员标签组";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getTagGroup(id).then(response => {
+        let td = response.data;
+        if (!td.tags || td.tags.length === 0) {
+          td.tags = [{ name: "标签", sortOrder: 0}]
+        }
+        this.form = td;
+        this.open = true;
+        this.title = "修改会员标签组";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateTagGroup(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addTagGroup(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+  }
+};
+</script>

src/views/app/tagGroup/selectTag.vue

@@ -0,0 +1,163 @@
+<template>
+    <div>
+        <div>搜索标签：
+            <el-input v-model="queryParams.name" placeholder="请输入标签名称" clearable size="small"
+                style="width: 200px;margin-right: 10px" />
+            <el-button type="primary" icon="el-icon-search" size="mini"
+                @click="search">
+                搜索
+            </el-button>
+            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
+        </div>
+        <div v-for="item in tagGroupList" :key="item.id">
+            <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
+                <span class="name-background">{{ item.name }}</span>
+            </div>
+            <div class="tag-container">
+                <a v-for="tagItem in item.tags" class="tag-box" @click="tagSelection(item, tagItem)"
+                    :class="{ 'tag-selected': tagItem.isSelected || (tagSelected && tagSelected.some(tg => tg.id == tagItem.id)) }">
+                    {{ tagItem.name }}
+                </a>
+            </div>
+        </div>
+        <pagination v-show="tagTotal > 0" :total="tagTotal" :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize" @pagination="search"/>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="tagSubmit">确 定</el-button>
+            <el-button @click="tagCancel">取消</el-button>
+        </div>
+    </div>
+</template>
+<script>
+
+import { searchTags, } from "@/api/app/tag/tagGroup";
+export default {
+    name: "searchTags",
+    props: {
+        defaultPageNum: {
+            type: Number,
+            default: 1
+        },
+        defaultPageSize: {
+            type: Number,
+            default: 10
+        },
+        tagSelected: {
+            type: Array,
+            default: () => [],
+        }
+    },
+    data() {
+        return {
+            queryParams: {
+                name: null,//标签搜索名称
+                pageNum: 1,//页码
+                pageSize: 10,//页记录数
+            },
+            tagGroupList: [],//标签组
+            tagTotal: 0,//总数
+        }
+    },
+    created() {
+        this.reset();
+        //默认查询一次
+        this.search();
+    },
+    watch: {
+        tagSelected: {
+            handler(n) {
+                this.setDefaultSelected();
+            },
+            deep: true,
+        }
+    },
+    methods: {
+        setDefaultSelected() {
+            this.tagGroupList.map(tg => {
+                tg.tags.map(t => {
+                    if (this.tagSelected.some(ts => ts.id == t.id)) {
+                        t.isSelected = true;
+                    } else {
+                        t.isSelected = false;
+                    }
+                })
+            })
+        },
+        async search() {
+            let qp = {...this.queryParams, groupName: this.queryParams.name}
+            let dd = await searchTags(qp);
+            let rows = dd.rows;
+            rows.map(tg => {
+                tg.tags.map(t => {
+                    if (this.tagSelected.some(ts => ts.id == t.id)) {
+                        t.isSelected = true;
+                    } else {
+                        t.isSelected = false;
+                    }
+                })
+            })
+            this.tagGroupList = rows;
+            this.tagTotal = dd.total;
+        },
+        reset() {
+            this.queryParams.pageNum = this.defaultPageNum;
+            this.queryParams.pageSize = this.defaultPageSize;
+            this.queryParams.name = null;
+            this.search();
+        },
+        tagSubmit() {
+            try {
+                this.$emit('tagSubmit');
+            } catch (e) {
+                console.warn('执行提交失败！');
+            }
+        },
+        tagCancel() {
+            try {
+                this.$emit('tagCancel');
+            } catch (e) {
+                this.warn('执行取消失败！')
+            }
+        },
+        tagSelection(groupItem, tagItem) {
+            this.$set(tagItem, 'isSelected', !tagItem.isSelected)
+            this.$forceUpdate();
+            try {
+                this.$emit('tagSelection', groupItem, tagItem);
+            } catch (e) {
+
+            }
+        },
+    }
+}
+</script>
+<style lang="scss">
+    
+/* CSS 样式 */
+.tag-container {
+  display: flex;
+  flex-wrap: wrap; /* 超出宽度时自动换行 */
+  gap: 8px; /* 设置标签之间的间距 */
+}
+
+.name-background {
+  display: inline-block;
+  background-color: #abece6; /* 背景颜色 */
+  padding: 4px 8px; /* 调整内边距，让背景包裹文字 */
+  border-radius: 4px; /* 可选：设置圆角 */
+}
+
+.tag-box {
+  padding: 8px 12px;
+  border: 1px solid #989797;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.tag-selected {
+  background-color: #00bc98;
+  color: #fff;
+  border-color: #00bc98;
+}
+</style>

src/views/app/urgentClass/CustomerDetail.vue

@@ -0,0 +1,2068 @@
+<template>
+    <div class="customer-container">
+
+        <div class="main-grid-three-columns">
+
+            <div class="left-column">
+                <!-- 用户信息 -->
+                <div class="card">
+                    <div class="card-header">
+                        <h3><i class="fas fa-id-card"></i>用户信息</h3>
+                    </div>
+                    <div class="profile-grid">
+                        <template v-if="Object.keys(customerPortraitData).length > 0">
+                            <div
+                                v-if="customerPortraitData[key]"
+                                v-for="(value, key) in userFieldComments"
+                                :key="key"
+                                class="profile-item"
+                                :class="key === 'name' ? 'profile-item-main' : ''"
+                            >
+                                <template
+                                    v-if="key === 'name'"
+                                >
+                                    <span class="label"><i class="fas fa-user"></i> 姓名：</span>
+                                    <span class="value highlight">{{ customerPortraitData[key] }}</span>
+                                </template>
+                                <template
+                                    v-else
+                                >
+                                    <span class="label" :title="value">
+                                        <i class="fas fa-info-circle"></i> {{ value }}：
+                                    </span>
+                                    <span class="value">{{ customerPortraitData[key] }}</span>
+                                </template>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div style="width: 100%; text-align: center;">
+                                暂无数据
+                            </div>
+                        </template>
+                        
+                    </div>
+                </div>
+                <!-- 标签 -->
+                <div class="card">
+                    <div class="card-header">
+                        <h3>
+                            <i class="fas fa-tags"></i> 用户画像标签
+                        </h3>
+                    </div>
+                    <div class="tags-container">
+                        <div v-if="userTags.length > 0" class="tags-list">
+                            <div
+                                v-for="(item, index) in userTags"
+                                :key="index"
+                                class="tag-item tag-highlight"
+                            >
+                                <span class="tag-key">{{ item.name }}</span>
+                                <span class="tag-separator">:</span>
+                                <span class="tag-value">{{ item.weight }}</span>
+                            </div>
+                        </div>
+                        <div v-else class="empty-tags">
+                            <i class="fas fa-inbox"></i>
+                            <span>暂无标签</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="middle-column">
+                <!-- 沟通摘要 -->
+                <div class="card">
+                    <div class="card-header">
+                        <h3><i class="fas fa-comment-dots"></i>客户信息汇总</h3>
+                    </div>
+                    <div class="summary-text compact">
+                        {{ getSummaryInfo() }}
+                    </div>
+                </div>
+                <!-- AI 本次沟通建议 -->
+                <div class="card">
+                    <div class="card-header">
+                        <h3><i class="fas fa-robot"></i>本次沟通建议</h3>
+                    </div>
+                    <div class="summary-text compact">
+                        {{ getCommunicationSuggestion() }}
+                    </div>
+                </div>
+                <!-- 沟通记录 -->
+                <div class="card card-table">
+                    <div class="card-header">
+                        <h3><i class="fas fa-history"></i> 沟通记录</h3>
+                    </div>
+                    <div class="records-table-wrapper">
+                        <table class="records-table">
+                            <thead>
+                            <tr>
+                                <th><i class="fas fa-user"></i> 客户名称</th>
+                                <th><i class="fas fa-chart-line"></i> 流失等级</th>
+                                <th><i class="fas fa-heart"></i> 外呼人员</th>
+                                <th><i class="far fa-clock"></i> 创建时间</th>
+                                <th><i class="fas fa-cog"></i> 操作</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr v-for="record in communicationRecords" :key="record.id" class="record-row">
+                                <td class="record-cell">{{ 'customerData.customerName' }}</td>
+                                <td class="record-cell">
+                                        <span class="risk-level-tag" :class="getRecordRiskLevelClass(record)">
+                                            {{ getRecordRiskLevelLabel(record) }}
+                                        </span>
+                                </td>
+                                <td class="record-cell">
+                                        <span class="intention-degree">
+                                            {{ getIntentionDegreeFromRecord(record) }}
+                                        </span>
+                                </td>
+                                <td class="record-cell">{{ parseTime(record.createTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</td>
+                                <td class="record-cell">
+                                    <button @click="viewChat(record)" class="btn-view-chat">
+                                        <i class="fas fa-comments"></i> 聊天详情
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr v-if="!communicationRecords.length">
+                                <td colspan="5" class="empty-tip">
+                                    <i class="fas fa-inbox"></i> 暂无沟通记录
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
+
+                        <!-- 分页组件 -->
+                        <div class="pagination-container" v-if="communicationRecordsTotal > 0">
+                            <el-pagination
+                                @current-change="handleCommunicationRecordsPageChange"
+                                @size-change="handleCommunicationRecordsSizeChange"
+                                :current-page="communicationRecordsPageNum"
+                                :page-sizes="[4, 10, 20, 50]"
+                                :page-size="communicationRecordsPageSize"
+                                layout="total, sizes, prev, pager, next, jumper"
+                                :total="communicationRecordsTotal"
+                            />
+                        </div>
+                    </div>
+                </div>
+                <!-- 微信风格聊天弹窗 -->
+                <div v-if="chatDialogVisible" class="chat-dialog-overlay" @click.self="closeChatDialog">
+                    <div class="chat-dialog">
+                        <div class="chat-dialog-header">
+                            <div class="chat-title">
+                                <i class="fas fa-comments"></i>
+                                <span>{{
+                                        (currentChatRecord && currentChatRecord.customerName) || ('customerData && customerData.customerName')
+                                    }} - 历史聊天记录</span>
+                            </div>
+                            <button @click="closeChatDialog" class="btn-close">
+                                ×
+                            </button>
+                        </div>
+                        <div class="chat-dialog-body">
+                            <div class="chat-messages">
+                                <!-- 根据 aiChatRecord 数组循环显示聊天记录 -->
+                                <div
+                                    v-for="(msg, index) in parseChatMessages(currentChatRecord && currentChatRecord.aiChatRecord)"
+                                    :key="index"
+                                    class="message-item"
+                                    :class="msg.type === 'ai' ? 'message-left' : 'message-right'"
+                                >
+                                    <!-- AI 消息：头像在左，名称在聊天内容上方靠左 -->
+                                    <div v-if="msg.type === 'ai'" class="message-wrapper message-wrapper-left">
+                                        <div class="message-avatar message-avatar-ai">
+                                            <img src="/static/images/ai-avatar.svg" alt="AI"
+                                                 @error="handleAvatarError($event, 'ai')"/>
+                                        </div>
+                                        <div class="message-content">
+                                            <div class="message-name message-name-ai">AI</div>
+                                            <div class="message-bubble">
+                                                {{ msg.content }}
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!-- 客户消息：强制头像在右侧 -->
+                                    <div v-else class="message-item message-item-customer">
+                                        <div class="message-content-right">
+                                            <div class="message-bubble message-bubble-right">
+                                                {{ msg.content }}
+                                            </div>
+                                        </div>
+                                        <div class="message-avatar message-avatar-customer">
+                                            <img src="/static/images/customer-avatar.svg" alt="客户"
+                                                 @error="handleAvatarError($event, 'customer')"/>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- 空数据提示 -->
+                                <div
+                                    v-if="!parseChatMessages(currentChatRecord && currentChatRecord.aiChatRecord).length"
+                                    class="empty-chat-tip">
+                                    <i class="fas fa-inbox"></i> 暂无聊天内容
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="right-column">
+                <div class="card card-focus">
+                    <div class="card-header">
+                        <h3><i class="fas fa-lightbulb"></i>操作</h3>
+                    </div>
+                    <div class="focus-points">
+                        <el-button type="primary" plain @click="toggleStatus">点击处理</el-button>
+                        <el-button
+                            type="success"
+                            plain
+                            @click="doChat"
+                            :loading="imLoading"
+                            :disabled="imLoading"
+                        >
+                            聊天
+                        </el-button>
+                    </div>
+                </div>
+                <div class="card card-focus">
+                    <div class="card-header">
+                        <h3><i class="fas fa-lightbulb"></i>活跃度 & 注册时间</h3>
+                    </div>
+                    <div class="focus-points">
+                        <div class="focus-title">
+                            <i class="fas fa-search"></i>活跃度
+                        </div>
+                        <ul class="focus-list">
+                            <li class="focus-item">
+                                <i class="fas fa-dot-circle"></i>{{ activityLevel }}
+                            </li>
+                        </ul>
+                        <div class="focus-title">
+                            <i class="fas fa-search"></i>注册时间
+                        </div>
+                        <ul class="focus-list">
+                            <li class="focus-item">
+                                <i class="fas fa-dot-circle"></i> {{ registerTime }}
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="intention-section">
+                        <div class="card-header" style="justify-content: left;">
+                            <h3><i class="fas fa-lightbulb"></i>客户消费等级</h3>
+                        </div>
+                        <div class="intention-watermark"
+                             v-if="consumptionLevel != '--'"
+                             :class="getIntentionColorClass(consumptionLevel)">
+                            {{ consumptionLevel }}
+                        </div>
+                        <div class="no-intention-tip" v-else>
+                            暂无评级
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+
+import { getAIUserInfoByUserId, getUserTags, } from "@/api/app/user/userInfo";
+
+export default {
+    props: {
+        userInfo: {
+            type: Object,
+            default: null,
+        },
+        refreshCount: {
+            type: Number,
+            default: 0,
+        },
+        imLoading: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            // 聊天记录分页相关
+            communicationRecords: [],
+            communicationRecordsTotal: 0,
+            communicationRecordsPageNum: 1,
+            communicationRecordsPageSize: 4,
+            // 聊天弹窗相关
+            chatDialogVisible: false, // 聊天弹窗是否显示
+            currentChatRecord: null, // 当前查看的聊天记录
+            customerPortraitData: {},//用户信息
+            userFieldComments: {},//用户信息字段描述
+            //标签信息
+            userTags: [],
+            comsumptionLevelMapper: {
+                'S+': 'S+',
+                'S': 'S',
+                'A': 'A',
+                'B': 'B',
+                'C': 'C',
+                'D': 'D',
+                'E': 'E',
+                'F': '代客下单'
+            },
+        }
+    },
+    computed: {
+        // 根据是否展开控制显示的标签数量
+        visibleTags() {
+            if (this.isExpanded) {
+                return this.allAiTags;
+            } else {
+                // 未展开时只显示前 3 条
+                return this.allAiTags.slice(0, this.tagsPageSize);
+            }
+        },
+        //活跃度
+        activityLevel() {
+            return !this.isEmpty(this.customerPortraitData) && !this.isEmpty(this.customerPortraitData.activityLevel) ? this.customerPortraitData.activityLevel : "--";
+        },
+        //注册时间
+        registerTime() {
+            return !this.isEmpty(this.customerPortraitData) && !this.isEmpty(this.customerPortraitData.registerTime) ? this.customerPortraitData.registerTime : "--";
+        },
+        //消费等级
+        consumptionLevel() {
+            return !this.isEmpty(this.customerPortraitData) && !this.isEmpty(this.customerPortraitData.consumptionLevel) ? this.comsumptionLevelMapper[this.customerPortraitData.consumptionLevel] : "--";
+        },
+    },
+    created() {
+        this.init();
+    },
+    watch: {
+        refreshCount: {
+            immediate: true,
+            async handler(n, o) {
+                //获取用户信息，注册时间，消费等级，活跃度
+                this.getUserInfo();
+                //获取用户标签
+                this.getUserTags();
+                //客户信息汇总
+                //todo
+                //本次沟通建议
+                //todo
+                //沟通记录
+                //todo
+            }
+        },
+    },
+    methods: {
+        /**
+         * 初始化
+         */
+        async init() {
+            //初始化用户字段信息描述
+            let userFieldComments = {
+                name: "姓名",
+                sex: "性别",
+                age: "年龄",
+                address: "地区",
+                habits: "行为习惯",
+                illnessTime: "患病时间",
+                body: "身体状态",
+                disease: "疾病",
+                family: "提及的家人",
+                isLine: "是否线下就诊",
+                familyDisease: "家人的疾病",
+                userType: "用户分类",
+                isSelf: "是否本人会诊",
+                intensify: "什么情况加重或缓解",
+                isCold: "是否怕热或者怕冷",
+                coldBody: "怕冷或怕热的部位",
+                sweat: "出汗情况",
+                other: "其他情况",
+                toilet: "大小便情况",
+                eat: "饮食情况",
+                menses: "经期如何",
+                medicine: "现在使用的药品",
+                constitution: "体质",
+                recommendMedicine: "推荐用药",
+                consultProduct: "咨询产品",
+                isBuy: "是否已经购买产品",
+                buyProduct: "已经购买的产品",
+                productTalk: "产品交流",
+                diseaseTalk: "疾病交流",
+                channelType: "渠道类型"
+            };
+            this.$set(this, 'userFieldComments', userFieldComments);
+        },
+        /**
+         * 获取用户信息
+         */
+        async getUserInfo() {
+            let fsUser = await getAIUserInfoByUserId(this.userInfo.fsUserId);
+            if (fsUser.data) {
+                this.customerPortraitData = fsUser.data;
+            }
+        },
+        isEmpty(value) {
+            return value === null || value === undefined || value.length === 0;
+        },
+        /**
+         * 获取用户兴趣标签
+         */
+        async getUserTags() {
+            let userTag = await getUserTags(this.userInfo.fsUserId);
+            if (userTag.data) {
+                this.userTags = userTag.data;
+            }
+        },
+        toggleStatus() {
+            this.$emit('toggleStatus', this.userInfo, 1);
+        },
+        doChat() {
+            this.$emit('chat', this.userInfo);
+        },
+        // 查看聊天内容
+        viewChat(record) {
+            this.currentChatRecord = record;
+            this.chatDialogVisible = true;
+        },
+        // 关闭聊天弹窗
+        closeChatDialog() {
+            this.chatDialogVisible = false;
+            this.currentChatRecord = null;
+        },
+        // 解析聊天消息数组
+        parseChatMessages(content) {
+            if (!content) {
+                return [];
+            }
+            // 如果 content 是字符串，尝试解析为 JSON 数组
+            if (typeof content === 'string') {
+                try {
+                    const parsed = JSON.parse(content);
+                    // 如果是数组，直接返回
+                    if (Array.isArray(parsed)) {
+                        return parsed.map(item => ({
+                            content: item.ai || item.user,
+                            type: item.ai ? 'ai' : 'user'
+                        }));
+                    }
+                    // 如果是对象，转换为数组
+                    return [{content: parsed.content, type: parsed.type || 'ai'}];
+                } catch (e) {
+                    // 解析失败，返回空数组
+                    console.error('解析聊天记录失败:', e);
+                    return [];
+                }
+            }
+            // 如果已经是数组，直接返回
+            if (Array.isArray(content)) {
+                return content;
+            }
+            // 如果是对象，转换为数组
+            return [content];
+        },
+        // 处理头像加载失败
+        handleAvatarError(event, type) {
+            const img = event.target;
+            if (type === 'ai') {
+                // AI 头像加载失败时，使用渐变色背景 + 机器人图标
+                img.style.display = 'none';
+                img.parentElement.innerHTML = '<i class="fas fa-robot" style="font-size: 24px; color: white;"></i>';
+            } else {
+                // 客户头像加载失败时，使用渐变色背景 + 用户图标
+                img.style.display = 'none';
+                img.parentElement.innerHTML = '<i class="fas fa-user" style="font-size: 24px; color: white;"></i>';
+            }
+        },
+        // 分页改变事件
+        handleCommunicationRecordsPageChange(pageNum) {
+            this.communicationRecordsPageNum = pageNum;
+            this.getCustomerInfoList();
+        },
+        // 每页条数改变事件
+        handleCommunicationRecordsSizeChange(pageSize) {
+            this.communicationRecordsPageSize = pageSize;
+            this.communicationRecordsPageNum = 1; // 重置为第一页
+            this.getCustomerInfoList();
+        },
+        // 获取汇总信息
+        getSummaryInfo() {
+            //todo
+            return '暂无汇总信息';
+        },
+        // 获取 AI 沟通建议
+        getCommunicationSuggestion() {
+            //todo
+            return '暂无沟通建议';
+        },
+        // 根据意向度等级获取颜色样式类
+        getIntentionColorClass(grade) {
+            if (!grade) return '';
+            const gradeUpper = grade.toUpperCase();
+            const colorMap = {
+                'S+': 'intention-grade-s0',
+                'S': 'intention-grade-s',
+                '代客下单': 'intention-grade-f',
+                'A': 'intention-grade-a',
+                'B': 'intention-grade-b',
+                'C': 'intention-grade-c',
+                'D': 'intention-grade-d',
+                'E': 'intention-grade-e'
+            };
+            return colorMap[gradeUpper] || '';
+        },
+        // 获取单条记录的风险等级数值
+        getRecordAttritionLevel(record) {
+            if (!record) return 0;
+            return parseInt(record.attritionLevel) || 0;
+        },
+        // 获取单条记录的风险等级标签
+        getRecordRiskLevelLabel(record) {
+            const level = this.getRecordAttritionLevel(record);
+            const labels = ['未知', '无风险', '低风险', '中风险', '高风险'];
+            return labels[level] || '未知';
+        },
+        // 获取单条记录的风险等级样式类
+        getRecordRiskLevelClass(record) {
+            const level = this.getRecordAttritionLevel(record);
+            const classes = ['risk-unknown', 'risk-none', 'risk-low', 'risk-medium', 'risk-high'];
+            return classes[level] || 'risk-unknown';
+        },
+        // 获取单条记录的客户意向度
+        getIntentionDegreeFromRecord(record) {
+            if (!record) return 0;
+            return record.intentionDegree;
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+* {
+    box-sizing: border-box;
+}
+
+.left-column {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.middle-column {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.right-column {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.customer-container {
+    max-width: 1600px;
+    margin: 0 auto;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    padding: 8px;
+    min-height: calc(100vh - 50px);
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+}
+
+.toolbar {
+    padding: 5px 0px;
+    text-align: right;
+}
+
+.main-grid-three-columns {
+    display: grid;
+    grid-template-columns: 380px 1fr 340px;
+    gap: 12px;
+    animation: fadeIn 0.6s ease-in-out;
+    align-items: stretch;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@media (max-width: 1400px) {
+    .main-grid-three-columns {
+        grid-template-columns: 360px 1fr 320px;
+        gap: 24px;
+    }
+}
+
+@media (max-width: 1200px) {
+    .main-grid-three-columns {
+        grid-template-columns: 1fr;
+    }
+}
+
+.card {
+    background: white;
+    border-radius: 12px;
+    padding: 12px;
+    margin-bottom: 12px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid rgba(226, 232, 240, 0.5);
+    position: relative;
+    overflow: hidden;
+}
+
+.card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    transform: scaleX(0);
+    transition: transform 0.4s ease;
+}
+
+.card:hover::before {
+    transform: scaleX(1);
+}
+
+.card:hover {
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
+    transform: translateY(-4px);
+    border-color: rgba(102, 126, 234, 0.3);
+}
+
+/* 高亮卡片（AI 总结） */
+.card-highlight {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
+    position: relative;
+    overflow: hidden;
+}
+
+.card-highlight::after {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+    animation: shimmer 3s infinite;
+}
+
+@keyframes shimmer {
+    0%, 100% {
+        transform: translate(0, 0);
+    }
+    50% {
+        transform: translate(-30%, -30%);
+    }
+}
+
+.card-highlight .card-header h3 {
+    color: white;
+}
+
+.card-highlight .summary-text {
+    color: white;
+    font-size: 17px;
+    line-height: 1.6;
+    max-height: 120px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 4px;
+}
+
+.card-highlight .summary-text::-webkit-scrollbar {
+    width: 6px;
+}
+
+.card-highlight .summary-text::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+}
+
+.card-highlight .summary-text::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 3px;
+}
+
+.card-highlight .summary-text::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.6);
+}
+
+.card-highlight .summary-meta span {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+/* 表格卡片 */
+.card-table {
+    background: white;
+}
+
+/* 风险卡片 */
+.risk-card {
+    border-left: 4px solid #10b981;
+    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.risk-card.risk-unknown {
+    border-left-color: #6b7280;
+    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+}
+
+.risk-card.risk-unknown::before {
+    background: linear-gradient(90deg, #6b7280 0%, #4b5563 100%);
+}
+
+.risk-card::before {
+    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
+}
+
+/* 徽章改为“标签”风格（类似 AI 标签） */
+.risk-unknown .risk-badge {
+    background: #f8fafc;
+    border-color: #e5eaf1;
+    color: #64748b;
+}
+
+.risk-none .risk-badge {
+    background: #f0fdf4;
+    border-color: #bbf7d0;
+    color: #16a34a;
+}
+
+.risk-low .risk-badge {
+    background: #eff6ff;
+    border-color: #bfdbfe;
+    color: #2563eb;
+}
+
+.risk-medium .risk-badge {
+    background: #fffbeb;
+    border-color: #fde68a;
+    color: #d97706;
+}
+
+.risk-high .risk-badge {
+    background: #fef2f2;
+    border-color: #fecaca;
+    color: #dc2626;
+}
+
+.risk-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
+}
+
+/* 风险等级标签 */
+.risk-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 10px;
+    border-radius: 10px;
+    font-size: 13px;
+    font-weight: 600;
+    border: 1px solid #e5eaf1;
+    box-shadow: none;
+    transition: all 0.2s ease;
+}
+
+.risk-badge::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 3px;
+    background: currentColor;
+    opacity: 0.35;
+}
+
+.risk-card:hover .risk-badge {
+    transform: translateY(-1px);
+}
+
+/* 风险分析内容 */
+.risk-analysis {
+    margin-top: 10px;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 10px;
+    backdrop-filter: blur(10px);
+    max-height: 180px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 4px;
+}
+
+.risk-analysis::-webkit-scrollbar {
+    width: 6px;
+}
+
+.risk-analysis::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 3px;
+}
+
+.risk-analysis::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
+    border-radius: 3px;
+}
+
+.risk-analysis::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
+}
+
+.risk-text {
+    font-size: 16px;
+    line-height: 1.7;
+    color: #475569;
+    margin: 0;
+}
+
+.risk-tip {
+    margin-top: 8px;
+    padding: 8px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
+    border-left: 3px solid #f59e0b;
+    border-radius: 6px;
+    font-size: 15px;
+    color: #92400e;
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+}
+
+.risk-tip i {
+    font-size: 12px;
+    margin-top: 1px;
+    color: #f59e0b;
+}
+
+/* 关注点卡片 */
+.card-focus {
+    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+    border: 2px solid #bae6fd;
+    box-shadow: 0 4px 16px rgba(186, 230, 253, 0.3);
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #eef2ff;
+    padding-bottom: 6px;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+}
+
+.card-header h3 {
+    font-size: 19px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #0f172a;
+    letter-spacing: -0.02em;
+}
+
+.records-table-wrapper {
+    overflow-x: auto;
+}
+
+/* 分页容器样式 */
+.pagination-container {
+    padding: 16px 0 12px;
+    display: flex;
+    justify-content: center;
+    background: white;
+    border-top: 1px solid #f1f5f9;
+    margin-top: 12px;
+}
+
+/* Element UI 分页样式覆盖 */
+
+.pagination-container .el-pagination li {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.pagination-container .el-pagination li:hover {
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+    border-color: #667eea;
+}
+
+.records-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 15px;
+}
+
+.records-table thead {
+    background: transparent;
+    color: #475569;
+}
+
+.records-table th {
+    padding: 12px 16px;
+    text-align: center !important;
+    font-weight: 600;
+    font-size: 14px;
+    border-bottom: 2px solid #e2e8f0;
+    color: #64748b;
+}
+
+.records-table th i {
+    margin-right: 6px;
+    opacity: 0.8;
+}
+
+.records-table tbody tr {
+    border-bottom: 1px solid #f1f5f9;
+    transition: all 0.2s ease;
+}
+
+.records-table tbody tr:hover {
+    background-color: #f8fafc;
+    transform: none;
+    box-shadow: none;
+}
+
+.records-table td {
+    padding: 12px 16px;
+    vertical-align: middle;
+}
+
+.record-cell {
+    font-size: 15px;
+    color: #334155;
+    text-align: center !important;
+}
+
+/* 风险等级标签 */
+.risk-level-tag {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    border: 1px solid;
+}
+
+/* 客户意向度 */
+.intention-degree {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #6366f1;
+    background: rgba(99, 102, 241, 0.08);
+    border: 1px solid rgba(99, 102, 241, 0.2);
+}
+
+.btn-view-chat {
+    background: transparent;
+    color: #667eea;
+    border: 1px solid #667eea;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    transition: all 0.2s ease;
+}
+
+.btn-view-chat:hover {
+    background: #f0f4ff;
+}
+
+.empty-tip {
+    color: #94a3b8;
+    font-size: 16px;
+    text-align: center;
+    padding: 40px 20px;
+    background: transparent;
+    border: none;
+}
+
+/* 沟通摘要样式 */
+.summary-text.compact {
+    max-height: 100px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    line-height: 1.6;
+    font-size: 16px;
+    color: #475569;
+    padding-right: 4px;
+}
+
+.summary-text.compact::-webkit-scrollbar {
+    width: 6px;
+}
+
+.summary-text.compact::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 3px;
+}
+
+.summary-text.compact::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
+    border-radius: 3px;
+}
+
+.summary-text.compact::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
+}
+
+/* AI 标签美化样式 */
+.tags-container {
+    padding: 0;
+    min-height: calc(16px * 5 + 6px * 4 + 12px * 2);
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.tags-container::-webkit-scrollbar {
+    width: 6px;
+}
+
+.tags-container::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 3px;
+}
+
+.tags-container::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
+    border-radius: 3px;
+}
+
+.tags-container::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
+}
+
+/* 标签列表 - 每行一个 */
+.tags-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 6px;
+}
+
+.tag-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    font-size: 15px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: default;
+    position: relative;
+    overflow: hidden;
+}
+
+.tag-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
+    transition: width 0.3s ease;
+}
+
+.tag-item:hover {
+    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+    border-color: #cbd5e1;
+    transform: translateX(6px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.tag-item:hover::before {
+    width: 5px;
+    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
+}
+
+.tag-highlight {
+    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+    border-color: #bfdbfe;
+}
+
+.tag-highlight::before {
+    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
+}
+
+.tag-key {
+    font-weight: 600;
+    color: #475569;
+    white-space: nowrap;
+    flex-shrink: 0;
+    font-size: 15px;
+}
+
+.tag-separator {
+    color: #94a3b8;
+    font-weight: 300;
+    flex-shrink: 0;
+    font-size: 15px;
+}
+
+.tag-value {
+    color: #1e293b;
+    font-weight: 500;
+    word-break: break-word;
+    flex: 1;
+    min-width: 0;
+    font-size: 15px;
+}
+
+.empty-tags {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    color: #94a3b8;
+    font-size: 17px;
+    background: linear-gradient(135deg, rgba(248, 250, 252, 0.5) 0%, rgba(241, 245, 249, 0.5) 100%);
+    border-radius: 12px;
+    border: 2px dashed #e2e8f0;
+}
+
+.empty-tags i {
+    font-size: 32px;
+    margin-bottom: 12px;
+    opacity: 0.5;
+}
+
+.tags-actions {
+    display: flex;
+    justify-content: center;
+    padding: 16px 0;
+    border-top: 1px solid #f1f5f9;
+    margin-top: auto;
+    background: white;
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+}
+
+.btn-expand-tags,
+.btn-collapse-tags {
+    background: transparent;
+    color: #667eea;
+    border: 1px solid #667eea;
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-size: 16px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: all 0.2s ease;
+}
+
+.btn-expand-tags:hover,
+.btn-collapse-tags:hover {
+    background: rgba(102, 126, 234, 0.05);
+    border-color: #5a67d8;
+    color: #5a67d8;
+}
+
+.btn-expand-tags:active,
+.btn-collapse-tags:active {
+    transform: scale(0.98);
+}
+
+/* 微信风格聊天弹窗 */
+.chat-dialog-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    backdrop-filter: blur(4px);
+}
+
+.chat-dialog {
+    background: white;
+    border-radius: 16px;
+    width: 90%;
+    max-width: 800px;
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    animation: slideIn 0.3s ease-out;
+    position: relative;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.chat-dialog-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid #eef2ff;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 16px 16px 0 0;
+    color: white;
+}
+
+.chat-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 16px;
+    font-weight: 700;
+}
+
+.btn-close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    background: white;
+    border: 2px solid #e2e8f0;
+    color: #1a202c;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 1;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    z-index: 10;
+}
+
+.btn-close:hover {
+    background: #ef4444;
+    border-color: #ef4444;
+    color: white;
+    transform: rotate(90deg) scale(1.1);
+    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
+}
+
+.chat-dialog-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    background: #f5f7fa;
+}
+
+.chat-messages {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.message-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 8px;
+}
+
+.message-left {
+    justify-content: flex-start;
+}
+
+.message-right {
+    justify-content: flex-end;
+}
+
+/* 客户消息强制布局：头像在右 */
+.message-item-customer {
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: flex-end !important;
+    gap: 10px !important;
+}
+
+.message-wrapper {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    max-width: 75%;
+}
+
+.message-wrapper-left {
+    flex-direction: row;
+}
+
+.message-name {
+    font-size: 12px;
+    color: #94a3b8;
+    white-space: nowrap;
+    text-align: left;
+    margin-bottom: 4px;
+    line-height: 1.2;
+}
+
+.message-name-ai {
+    color: #667eea;
+    font-weight: 500;
+}
+
+.message-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    overflow: hidden;
+    flex-shrink: 0;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+    background: #f0f0f0;
+}
+
+.message-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.message-avatar:hover img {
+    transform: scale(1.1);
+}
+
+.message-wrapper-left .message-avatar {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.message-wrapper-right .message-avatar {
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.message-content {
+    display: flex;
+    flex-direction: column;
+    max-width: calc(100% - 42px);
+}
+
+.message-wrapper-left .message-content {
+    align-items: flex-start;
+    margin-left: 4px;
+}
+
+.message-wrapper-right .message-content {
+    align-items: flex-end !important;
+    margin-right: 4px;
+}
+
+/* 客户聊天内容容器 */
+.message-content-right {
+    flex: 0 0 auto !important;
+    max-width: calc(100% - 42px) !important;
+    display: flex;
+    align-items: flex-start !important;
+}
+
+.message-bubble {
+    background: white;
+    padding: 9px 13px;
+    border-radius: 6px;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #0f172a;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    word-break: break-word;
+    position: relative;
+    max-width: 500px;
+}
+
+.message-bubble::before {
+    content: '';
+    position: absolute;
+    left: -6px;
+    top: 12px;
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-right: 6px solid white;
+}
+
+.message-bubble-right {
+    background: #d9fdd3;
+    color: #0f172a;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    display: inline-block;
+    position: relative;
+}
+
+.message-bubble-right::before {
+    content: '';
+    position: absolute;
+    right: -6px;
+    left: auto;
+    top: 16px !important;
+    transform: none !important;
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 6px solid #d9fdd3;
+    border-right: none;
+}
+
+.empty-chat-tip {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    color: #94a3b8;
+    font-size: 14px;
+}
+
+.empty-chat-tip i {
+    font-size: 48px;
+    margin-bottom: 12px;
+    opacity: 0.5;
+}
+
+/* 客户画像样式 */
+.profile-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-height: 350px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 4px;
+    padding-top: 0;
+}
+
+.profile-grid::-webkit-scrollbar {
+    width: 6px;
+}
+
+.profile-grid::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 3px;
+}
+
+.profile-grid::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
+    border-radius: 3px;
+}
+
+.profile-grid::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
+}
+
+.profile-item {
+    display: grid;
+    grid-template-columns: 35% 65%;
+    align-items: flex-start;
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: 6px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    border: 1px solid #e2e8f0;
+    word-break: break-word;
+}
+
+.profile-item:hover {
+    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+    transform: translateX(4px);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+    border-color: #cbd5e1;
+}
+
+.profile-item-main {
+    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+    border-color: #bfdbfe;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.profile-item-main:hover {
+    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+}
+
+.profile-item-full {
+    grid-template-columns: 35% 65%;
+}
+
+.profile-item .label {
+    font-size: 15px;
+    color: #64748b;
+    font-weight: 600;
+    white-space: normal;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    line-height: 1.4;
+    min-width: 0;
+}
+
+.profile-item .label i {
+    color: #94a3b8;
+    font-size: 12px;
+    width: 14px;
+    text-align: center;
+    flex-shrink: 0;
+}
+
+.profile-item .value {
+    font-size: 16px;
+    color: #0f172a;
+    font-weight: 500;
+    word-break: break-word;
+    line-height: 1.4;
+    min-width: 0;
+}
+
+.profile-item .value.highlight {
+    color: #0369a1;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.profile-item .value.long-text {
+    color: #334155;
+    font-weight: 400;
+}
+
+.update-time-corner {
+    position: absolute;
+    bottom: 12px;
+    right: 16px;
+    font-size: 12px;
+    color: #94a3b8;
+    font-style: italic;
+}
+
+/* 客户关注点 & 意向度样式 */
+.focus-points {
+    padding: 0;
+    margin-bottom: 10px;
+}
+
+.focus-title {
+    font-size: 17px;
+    color: #64748b;
+    font-weight: 600;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.focus-title i {
+    color: #3b82f6;
+    font-size: 14px;
+}
+
+.focus-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    max-height: 200px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 4px;
+}
+
+.focus-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.focus-list::-webkit-scrollbar-track {
+    background: #f1f5f9;
+    border-radius: 3px;
+}
+
+.focus-list::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
+    border-radius: 3px;
+}
+
+.focus-list::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
+}
+
+.focus-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    padding: 6px 10px;
+    margin-bottom: 6px;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    border-radius: 6px;
+    border: 1px solid #e2e8f0;
+    transition: all 0.3s ease;
+    font-size: 15px;
+    color: #334155;
+    line-height: 1.5;
+}
+
+.focus-item:hover {
+    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+    border-color: #bfdbfe;
+    transform: translateX(4px);
+    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.1);
+}
+
+.focus-item i {
+    color: #3b82f6;
+    font-size: 10px;
+    margin-top: 1px;
+    flex-shrink: 0;
+}
+
+/* 意向度样式 - 水印风格 */
+.intention-section {
+    margin-top: 10px;
+    padding-top: 8px;
+    border-top: 1px solid #e2e8f0;
+}
+
+.intention-header {
+    margin-bottom: 6px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.intention-info-icon {
+    color: #94a3b8;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.intention-info-icon:hover {
+    color: #3b82f6;
+}
+
+/* 意向度提示框样式 */
+.intention-tooltip {
+    line-height: 1.8;
+    font-size: 13px;
+}
+
+.intention-tooltip div {
+    padding: 2px 0;
+}
+
+.intention-tooltip strong {
+    color: #1e293b;
+    font-weight: 600;
+}
+
+.intention-label {
+    font-size: 16px;
+    font-weight: 600;
+    color: #64748b;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.intention-label::before {
+    content: '';
+    width: 3px;
+    height: 14px;
+    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
+    border-radius: 2px;
+}
+
+.intention-label i {
+    width: 20px;
+    height: 20px;
+    border-radius: 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: #fff;
+    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
+}
+
+/* 水印风格意向度显示 - 按等级着色 */
+.intention-watermark {
+    font-size: 59px;
+    font-weight: 800;
+    text-align: center;
+    padding: 18px 12px;
+    border-radius: 10px;
+    border: 2px solid;
+    position: relative;
+    overflow: hidden;
+    letter-spacing: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+}
+
+/* S/S+ 级 - 金色/绿色，最高级别 */
+
+.intention-grade-s {
+    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fef3c7 100%);
+    border-color: #f59e0b;
+    color: #92400e;
+    text-shadow: 0 2px 4px rgba(146, 64, 14, 0.2);
+}
+
+.intention-grade-s::after {
+    content: 'S';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-25deg);
+    font-size: 90px;
+    font-weight: 900;
+    color: rgba(245, 158, 11, 0.08);
+    z-index: 0;
+    pointer-events: none;
+}
+
+.intention-grade-s0 {
+    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fef3c7 100%);
+    border-color: #f59e0b;
+    color: #92400e;
+    text-shadow: 0 2px 4px rgba(146, 64, 14, 0.2);
+}
+
+.intention-grade-s0::after {
+    content: 'S+';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-25deg);
+    font-size: 90px;
+    font-weight: 900;
+    color: rgba(245, 158, 11, 0.08);
+    z-index: 0;
+    pointer-events: none;
+}
+
+/* A 级 - 蓝色 */
+.intention-grade-a {
+    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #dbeafe 100%);
+    border-color: #3b82f6;
+    color: #1e40af;
+    text-shadow: 0 2px 4px rgba(30, 64, 175, 0.2);
+}
+
+.intention-grade-a::after {
+    content: 'A';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-25deg);
+    font-size: 90px;
+    font-weight: 900;
+    color: rgba(59, 130, 246, 0.08);
+    z-index: 0;
+    pointer-events: none;
+}
+
+/* F 级 - 蓝色 */
+.intention-grade-f {
+    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #dbeafe 100%);
+    border-color: #3b82f6;
+    color: #1e40af;
+    text-shadow: 0 2px 4px rgba(30, 64, 175, 0.2);
+    font-size: 40px !important;
+}
+
+.intention-grade-f::after {
+    content: '代客下单';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-25deg);
+    font-size: 30px;
+    font-weight: 800;
+    color: rgba(59, 130, 246, 0.08);
+    z-index: 0;
+    pointer-events: none;
+}
+
+/* B 级 - 紫色 */
+.intention-grade-b {
+    background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 50%, #e9d5ff 100%);
+    border-color: #a855f7;
+    color: #6b21a8;
+    text-shadow: 0 2px 4px rgba(107, 33, 168, 0.2);
+}
+
+.intention-grade-b::after {
+    content: 'B';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-25deg);
+    font-size: 90px;
+    font-weight: 900;
+    color: rgba(168, 85, 247, 0.08);
+    z-index: 0;
+    pointer-events: none;
+}
+
+/* C 级 - 橙色 */
+.intention-grade-c {
+    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 50%, #fed7aa 100%);
+    border-color: #f97316;
+    color: #9a3412;
+    text-shadow: 0 2px 4px rgba(154, 52, 18, 0.2);
+}
+
+.intention-grade-c::after {
+    content: 'C';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-25deg);
+    font-size: 90px;
+    font-weight: 900;
+    color: rgba(249, 115, 22, 0.08);
+    z-index: 0;
+    pointer-events: none;
+}
+
+/* D 级 - 粉红色 */
+.intention-grade-d {
+    background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 50%, #fbcfe8 100%);
+    border-color: #ec4899;
+    color: #9d174d;
+    text-shadow: 0 2px 4px rgba(157, 23, 77, 0.2);
+}
+
+.intention-grade-d::after {
+    content: 'D';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-25deg);
+    font-size: 90px;
+    font-weight: 900;
+    color: rgba(236, 72, 153, 0.08);
+    z-index: 0;
+    pointer-events: none;
+}
+
+/* E 级 - 红色，最低级别 */
+.intention-grade-e {
+    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 50%, #fecaca 100%);
+    border-color: #ef4444;
+    color: #991b1b;
+    text-shadow: 0 2px 4px rgba(153, 27, 27, 0.2);
+}
+
+.intention-grade-e::after {
+    content: 'E';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-25deg);
+    font-size: 90px;
+    font-weight: 900;
+    color: rgba(239, 68, 68, 0.08);
+    z-index: 0;
+    pointer-events: none;
+}
+
+.intention-watermark span {
+    position: relative;
+    z-index: 1;
+}
+
+/* 暂无评级提示 */
+.no-intention-tip {
+    text-align: center;
+    padding: 18px 12px;
+    font-size: 16px;
+    color: #94a3b8;
+    font-style: italic;
+    background: linear-gradient(135deg, rgba(248, 250, 252, 0.5) 0%, rgba(241, 245, 249, 0.5) 100%);
+    border-radius: 10px;
+    border: 2px dashed #e2e8f0;
+}
+
+.card-header h3 i {
+    width: 24px;
+    height: 24px;
+    border-radius: 7px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    color: #fff;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.35);
+    -webkit-text-fill-color: #fff;
+}
+
+.card-highlight .card-header h3 i {
+    color: white;
+    background: none;
+    -webkit-text-fill-color: white;
+}
+
+/* 模仿参考图的企业微信分析台风格（覆盖） */
+.customer-container {
+    max-width: 100%;
+    padding: 12px;
+    background: #f4f6fa;
+}
+
+.main-grid-three-columns {
+    grid-template-columns: 300px minmax(640px, 1fr) 320px;
+    gap: 12px;
+    align-items: start;
+}
+
+.card {
+    border-radius: 10px;
+    border: 1px solid #e6ebf2;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
+    margin-bottom: 10px;
+    padding: 12px;
+    background: #fff;
+}
+
+.card::before {
+    display: none;
+}
+
+.card:hover {
+    transform: none;
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+    border-color: #dbe4f0;
+}
+
+.card-header {
+    border-bottom: 1px solid #edf1f7;
+    margin-bottom: 10px;
+    padding-bottom: 8px;
+}
+
+.card-header h3 {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1f2937;
+}
+
+.card-header h3 i {
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    font-size: 10px;
+    background: #4f7cff;
+    box-shadow: none;
+}
+
+.summary-text.compact {
+    font-size: 14px;
+    line-height: 1.75;
+    color: #334155;
+    max-height: 132px;
+}
+
+.risk-card,
+.card-focus {
+    background: #fff;
+    border: 1px solid #e6ebf2;
+}
+
+.risk-analysis {
+    background: #f8fafc;
+    border: 1px solid #edf2f7;
+}
+
+.tag-item,
+.focus-item,
+.profile-item {
+    background: #f8fafc;
+    border-color: #e5eaf1;
+}
+
+.intention-label i {
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    font-size: 10px;
+    background: #4f7cff;
+    box-shadow: none;
+}
+
+.records-table th {
+    background: #f8fafc;
+    color: #475569;
+}
+
+.records-table tbody tr:hover {
+    background: #f8fbff;
+}
+
+
+</style>

src/views/app/urgentClass/index.vue

@@ -0,0 +1,1236 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="用户ID" prop="fsUserId">
+        <el-input
+          v-model="queryParams.fsUserId"
+          @input="queryParams.fsUserId = queryParams.fsUserId.replace(/[^\d]/g, '')"
+          placeholder="请输入用户ID"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="客服" prop="customerRoles">
+        <div @click="openCusSearchPage"
+             style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 250px">
+          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+            <el-tag type="success"
+                    closable
+                    :disable-transitions="false"
+                    v-for="list in this.customerRoleSearch.selected"
+                    :key="list.id"
+                    @close="handleCloseCus(list)"
+                    style="margin: 3px;"
+            >{{ list.roleName }}
+            </el-tag>
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item label="类别" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择类别" clearable size="small">
+          <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel"
+                     :value="dict.dictValue" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="处理状态" prop="trackType">
+        <el-select v-model="queryParams.trackType" placeholder="处理状态" clearable size="small">
+          <el-option v-for="dict in trackTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
+                     :value="dict.dictValue" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="sop编号" prop="sopId">
+        <el-input v-model="queryParams.sopId" placeholder="请输入sopid" clearable size="small"
+                  @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="标题" prop="title">
+        <el-input v-model="queryParams.title" placeholder="请输入标题" clearable size="small"
+                  @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="创建日期" prop="crtTime">
+        <el-date-picker size="small" v-model="queryParams.crtTime"  type="date" placeholder="选择日期"
+                        value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="handleQuery">
+        </el-date-picker>
+      </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-button icon="el-icon-refresh" size="mini" @click="isSM = !isSM">色盲模式</el-button>
+      </el-form-item>
+    </el-form>
+
+    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"/>
+
+    <el-tabs type="card" v-model="actName" @tab-click="toggleTab">
+      <el-tab-pane v-for="(item, index) in statusOptions" :label="item.dictLabel"
+                   :name="item.dictValue"></el-tab-pane>
+    </el-tabs>
+
+    <el-table border v-loading="loading" :data="urgentClassTaskList">
+      <el-table-column label="用户ID" align="center" prop="fsUserId" min-width="120"/>
+      <el-table-column label="用户名称" align="center" prop="userName" min-width="120"/>
+      <el-table-column label="客服名称" align="center" prop="customerRoleName" min-width="180">
+        <template slot-scope="scope">
+          <el-tag type="primary" style="margin: 3px;">{{ scope.row.customerRoleName }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status" min-width="120">
+        <template slot-scope="scope">
+          <dict-tag :options="statusOptions" :value="scope.row.status != null ? scope.row.status.toString() : null" />
+        </template>
+      </el-table-column>
+      <el-table-column label="类别" align="center" prop="type" min-width="120">
+        <template slot-scope="scope">
+          <dict-tag :options="typeOptions" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="处理状态" align="center" prop="trackType" min-width="120">
+        <template slot-scope="scope">
+          <dict-tag :options="trackTypeOptions" :value="scope.row.trackType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="标题" align="center" prop="title" min-width="150"/>
+      <el-table-column label="描述" align="center" prop="remark" />
+      <el-table-column label="分值" align="center" prop="score" min-width="150">
+        <template slot-scope="scope">
+          <span :style="getScoreStyle(scope.row.score)">{{ scope.row.score }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="用户过往学习记录" align="center" min-width="200">
+        <template slot-scope="scope">
+          <div v-if="isSM" style="display: flex; gap: 4px; justify-content: center;">
+                        <span v-for="(log, index) in scope.row.userWatchLogs" :key="index" :style="{
+                            display: 'inline-block',
+                            width: '16px',
+                            height: '16px',
+                            borderRadius: log == 2 ? '50%' : log == 4 ? '2px 8px' : '2px',
+                            backgroundColor: log == 3 ? 'transparent' : '#f0f0f0',
+                            border: log == 3 ? '2px solid #666' : '1px solid #ddd',
+                            position: 'relative',
+                            transform: log == 4 ? 'rotate(45deg)' : 'none'
+                        }">
+                            <!-- 已完成 - 圆形 + 对勾 -->
+                            <span v-if="log == 2" style="
+                                position: absolute;
+                                top: 45%;
+                                left: 50%;
+                                width: 6px;
+                                height: 3px;
+                                border: solid #333;
+                                border-width: 0 0 2px 2px;
+                                transform: translate(-50%, -50%) rotate(-45deg);
+                            "></span>
+
+                          <!-- 未完成 - 方框 + 叉 -->
+                            <span v-if="log == 3" style="
+                                position: absolute;
+                                top: 50%;
+                                left: 50%;
+                                width: 8px;
+                                height: 2px;
+                                background: #666;
+                                transform: translate(-50%, -50%) rotate(45deg);">
+                            </span>
+
+
+                            <span v-if="log == 1" style="
+                                position: absolute;
+                                top: 50%;
+                                left: 50%;
+                                width: 8px;
+                                height: 2px;
+                                background: #666;
+                                transform: translate(-50%, -10%) rotate(-15deg);
+                            "></span>
+
+                          <!-- 部分完成 - 菱形 -->
+                            <span v-if="log == 4" style="
+                                position: absolute;
+                                top: 50%;
+                                left: 50%;
+                                width: 6px;
+                                height: 6px;
+                                border: 2px solid #333;
+                                transform: translate(-50%, -50%) rotate(-45deg);
+                            "></span>
+
+                          <!-- 未开始 - 减号 -->
+                            <span v-if="!log" style="
+                                position: absolute;
+                                top: 50%;
+                                left: 50%;
+                                width: 8px;
+                                height: 2px;
+                                background: #999;
+                                transform: translate(-50%, -50%);
+                            "></span>
+
+                          <!-- 图像 - 使用img标签 -->
+                            <img v-if="log == 5" src="/path/to/your-image.png" alt="Custom icon" style="
+                                position: absolute;
+                                top: 50%;
+                                left: 50%;
+                                width: 12px;
+                                height: 12px;
+                                transform: translate(-50%, -50%);
+                            ">
+                        </span>
+          </div>
+
+          <div v-else style="display: flex; gap: 4px; justify-content: center;">
+                        <span v-for="(log, index) in scope.row.userWatchLogs" :key="index" :style="{
+                            display: 'inline-block',
+                            width: '16px',
+                            height: '16px',
+                            borderRadius: '2px',
+                            backgroundColor:
+                                log == 2 ? '#67C23A' :
+                                    log == 3 ? '#f55a4f' :
+                                        log == 4 ? '#FFD700' :
+                                            log == 1 ? '#0bc6ff' :
+                                                '#909399'
+                        }"></span>
+          </div>
+
+        </template>
+      </el-table-column>
+      <el-table-column label="最近章节" align="center" min-width="150">
+        <template slot-scope="scope">
+          {{ scope.row.latestCourseName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="最晚学习时间" align="center" min-width="150">
+        <template slot-scope="scope">
+          {{ formatTime(scope.row.lastWatchDate) }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="sopId" align="center" prop="sopId" min-width="160"/>
+      <el-table-column label="创建时间" align="center" prop="createTime" min-width="150"/>
+      <el-table-column label="修改时间" align="center" prop="updateTime" min-width="150"/>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="scope">
+          <el-button
+            v-if="scope.row.status == 0"
+            size="mini"
+            type="text"
+            @click="toggleStatus(scope.row, 1)"
+            v-hasPermi="['app:urgentClass:handle']"
+          >
+            点击处理
+          </el-button>
+          <el-button
+            v-if="scope.row.status == 0"
+            size="mini"
+            type="text"
+            @click="quickReply(scope.row)"
+            v-hasPermi="['app:urgentClass:quickReply']"
+          >
+            快速回复
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            :loading="imLoading && loadingRowId === scope.row.customerRoleId"
+            :disabled="imLoading"
+            @click="loginIm(scope.row)"
+            v-hasPermi="['app:urgentClass:talk']"
+          >
+            聊天
+          </el-button>
+          <el-button
+            v-if="scope.row.fsUserId && scope.row.fsUserId !== ''"
+            size="mini"
+            type="text"
+            @click="handleCallPhone(scope.row)"
+            v-hasPermi="['app:urgentClass:getFsUserPhone']"
+          >
+            外呼
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            @click="handledetails(scope.row)"
+          >详情</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 v-if="isSM" style="margin-top: 20px; padding: 12px; background: #f8f8f8; border-radius: 4px;">
+      <div style="display: flex; gap: 20px; flex-wrap: wrap;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+                    <span style="
+                        display: inline-block;
+                        width: 16px;
+                        height: 16px;
+                        border-radius: 50%;
+                        background-color: #f0f0f0;
+                        position: relative;
+                    ">
+                        <span style="
+                            position: absolute;
+                            top: 45%;
+                            left: 50%;
+                            width: 6px;
+                            height: 3px;
+                            border: solid #333;
+                            border-width: 0 0 2px 2px;
+                            transform: translate(-50%, -50%) rotate(-45deg);
+                        "></span>
+                    </span>
+          <span>完课</span>
+        </div>
+
+        <div style="display: flex; align-items: center; gap: 8px;">
+                    <span style="
+                        display: inline-block;
+                        width: 16px;
+                        height: 16px;
+                        border-radius: 2px;
+                        border: 2px solid #666;
+                        background-color: transparent;
+                        position: relative;
+                    ">
+                        <span style="
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            width: 8px;
+                            height: 2px;
+                            background: #666;
+                            transform: translate(-50%, -50%) rotate(45deg);
+                        "></span>
+                        <span style="
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            width: 8px;
+                            height: 2px;
+                            background: #666;
+                            transform: translate(-50%, -50%) rotate(-45deg);
+                        "></span>
+                    </span>
+          <span>待学习</span>
+        </div>
+
+        <div style="display: flex; align-items: center; gap: 8px;">
+                    <span style="
+                        display: inline-block;
+                        width: 16px;
+                        height: 16px;
+                        border-radius: 2px 8px;
+                        background-color: #f0f0f0;
+                        border: 1px solid #ddd;
+                        position: relative;
+                        transform: rotate(45deg);
+                    ">
+                        <span style="
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            width: 6px;
+                            height: 6px;
+                            border: 2px solid #333;
+                            transform: translate(-50%, -50%) rotate(-45deg);
+                        "></span>
+                    </span>
+          <span>学习中断</span>
+        </div>
+
+        <div style="display: flex; align-items: center; gap: 8px;">
+                    <span style="
+                        display: inline-block;
+                        width: 16px;
+                        height: 16px;
+                        border-radius: 2px;
+                        background-color: #f0f0f0;
+                        border: 1px solid #ddd;
+                        position: relative;
+	                ">
+                        <span style="
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            width: 8px;
+                            height: 2px;
+                            background: #999;
+                            transform: translate(-50%, -50%);
+	                    "></span>
+                    </span>
+          <span>没发课</span>
+        </div>
+
+        <div style="display: flex; align-items: center; gap: 8px;">
+                    <span style="
+                        display: inline-block;
+                        width: 16px;
+                        height: 16px;
+                        border-radius: 2px;
+                        background-color: #f0f0f0;
+                        border: 1px solid #ddd;
+                        position: relative;
+                    ">
+                        <span style="
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            width: 8px;
+                            height: 2px;
+                            background: #666;
+                            transform: translate(-50%, -10%) rotate(-15deg);
+                        "></span>
+                    </span>
+          <span>学习中</span>
+        </div>
+
+      </div>
+    </div>
+
+    <div v-else style="margin-top: 20px; padding: 12px; background: #f8f8f8; border-radius: 4px;">
+      <div style="display: flex; gap: 20px; flex-wrap: wrap;">
+        <div style="display: flex; align-items: center; gap: 8px;">
+                    <span
+                      style="display: inline-block; width: 16px; height: 16px; border-radius: 2px; background-color: #67C23A;"></span>
+          <span>完课</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 4px;">
+                    <span
+                      style="display: inline-block; width: 16px; height: 16px; border-radius: 2px; background-color: #f55a4f;"></span>
+          <span>待学习</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 4px;">
+                    <span
+                      style="display: inline-block; width: 16px; height: 16px; border-radius: 2px; background-color: #FFD700;"></span>
+          <span>学习中断</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 4px;">
+                    <span
+                      style="display: inline-block; width: 16px; height: 16px; border-radius: 2px; background-color: #909399;"></span>
+          <span>没发课</span>
+        </div>
+        <div style="display: flex; align-items: center; gap: 4px;">
+                    <span
+                      style="display: inline-block; width: 16px; height: 16px; border-radius: 2px; background-color: #0bc6ff;"></span>
+          <span>学习中</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- app客服搜索 -->
+    <el-dialog title="客服搜索" :visible.sync="customerRoleSearch.visible" width="1000px" append-to-body>
+      <CusRoleList ref="customerSearchRef"
+                   @confirm="customerSelectedConfirmCall"
+                   @selectionChange="customerSelectionChangeCall"
+                   :selected="customerRoleSearch.selected"
+      />
+    </el-dialog>
+
+    <!--  -->
+    <el-drawer
+      :with-header="false"
+      size="75%"
+      title="用户详情"
+      :visible.sync="userDetails.visible"
+    >
+      <userDetails
+        ref="userDetails"
+        :userInfo="userDetails.rowInfo"
+        :refreshCount="userDetails.count"
+        @chat="login"
+        @toggleStatus="toggleStatus"
+        :imLoading="imLoading"
+      />
+    </el-drawer>
+
+    <!-- AI外呼对话框 -->
+    <ai-sip-call-dialog
+      :visible.sync="callDialogVisible"
+      :phone-number="currentCallPhone"
+      :dial-mode="currentDialMode"
+      :record-id="currentRecordId"
+      @close="handleCallDialogClose"
+      @call-ended="handleCallEnded"
+    />
+
+    <!-- 查看详情 -->
+    <el-dialog
+      :title="quickReplyDialog.title"
+      :visible.sync="quickReplyDialog.visible"
+      width="1000px"
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="closeQuickReply"
+    >
+      <div v-loading="quickReplyDialog.loading">
+        <div style="height: 600px; overflow: auto;" ref="scrollWrap">
+          <el-timeline>
+            <el-timeline-item
+              v-for="(chatLog, idx) in quickReplyDialog.chatLogs"
+              :timestamp="chatLog.sendTime"
+              placement="top"
+              :type="chatLog.userType === 0 ? 'success' : 'primary'"
+              :key="idx"
+            >
+              <el-card shadow="hover" :body-style="{'padding': '8px', 'background': (chatLog.userType === 0 ? '#9df29f' : 'eeeef0'), 'color': '#161616'}">
+                  <div
+                    :class="chatLog.userType === 0 ? '' : 'no-copy1'"
+                    v-html="chatLog.sendContent || '--'"
+                  >
+                  </div>
+              </el-card>
+            </el-timeline-item>
+          </el-timeline>
+        </div>
+
+        <div style="padding: 5px 0 0 44px;">
+          <div class="quick-reply">
+            <el-input type="textarea"
+              :autosize="{ minRows: 3, maxRows: 3}"
+              :resize="'none'"
+              placeholder="请输入快捷回复"
+              v-model="quickReplyDialog.replyContent"
+              @keydown.native="handleKeyDown"
+            />
+            <div style="text-align: right;">
+              <el-tooltip class="item" effect="dark" content="Enter发送，Ctrl+Enter换行" placement="top-start">
+                <el-button
+                  :type="quickReplyDialog.replyContent.trim() ? 'success' : 'info'"
+                  :disabled="!quickReplyDialog.replyContent.trim() || quickReplyDialog.loading"
+                  size="mini"
+                  @click="sendReplyContent"
+                >
+                  发送
+                </el-button>
+              </el-tooltip>
+            </div>
+          </div>
+        </div>
+
+        <div slot="footer" class="dialog-footer" style="text-align: center">
+          <el-button @click="closeQuickReplyDialog">关 闭</el-button>
+        </div>
+      </div>
+
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listUrgentClassTask, setStatus,getFsUserPhone } from "@/api/app/urgentClass";
+import CusRoleList from '@/views/app/user/CusRoleList.vue';
+import { getOpenIM, getCbEvents } from '@/utils/openIM';
+import { debounce } from '@/utils';
+import { accountCheck } from '@/api/app/user/userList.js';
+import { findChatLogsByUserIdAndCustomerId, editUserChatLogs, } from "@/api/app/userChatLogs";
+import userDetails from './CustomerDetail.vue';
+import {mapGetters, mapState} from "vuex";
+// import AiSipCallDialog from '@/components/AiSipCallDialog.vue';
+export default {
+  name: "UrgentClass",
+  components: { CusRoleList, userDetails
+    // , AiSipCallDialog
+  },
+  data() {
+    return {
+      hasBindReadyEvent : false,
+      imLoading: false,
+      isSDKReady: false,
+      OpenIM: null,
+      tokenCache: {},
+      loadingRowId: null,
+      actName: "0",
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      companyUserOptionsParams: {
+        name: undefined,
+        hasNextPage: false,
+        pageNum: 1,
+        pageSize: 10
+      },
+      isSM: false,//是否色盲模式
+      companyUserOptionsLoading: false,
+      companyUserOptions: [],
+      myQwUserList: [],
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 提醒任务看板表格数据
+      urgentClassTaskList: [],
+      // 状态 0 待处理 1 已处理 3 过期字典
+      statusOptions: [],
+      // 类别 1先导 2 科普 3 节点 4 转人工字典
+      typeOptions: [],
+      trackTypeOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        fsUserId: null,
+        customerRoles: null,
+        crtTime: this.formatDateToYMD(new Date()),
+        status: 0,
+        type: null,
+        title: null,
+        score: null,
+        sopId: null,
+      },
+      customerRoleSearch: {
+        visible: false,
+        selected: [],
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+      userDetails: {
+        visible: false,
+        rowInfo: null,
+        count: 0,
+      },
+      // AI外呼相关
+      callDialogVisible: false,
+      currentCallPhone: '',
+      currentDialMode: 'encrypted', // plaintext-明文, encrypted-密文
+      currentRecordId: '', // 当前外呼的记录ID
+      quickReplyDialog: {
+        visible: false,
+        rowInfo: null,
+        loading: false,
+        chatInfo: {},
+        chatLogs: [],
+        title: '',
+        replyContent: '',
+      },
+    };
+  },
+  computed: {
+    ...mapState({
+      userID: state => state.imuser.userID,
+      applicationUnreadCount: state => state.friend.unreadCount,
+      fsUserId: state => state.imuser.fsUserId,
+      currentConversation: state => state.conversation.currentConversation
+    }),
+  },
+  watch: {
+    '$store.state.imuser.isLogin'(val) {
+      if (!val) this.hasBindReadyEvent = false; // 退出后允许下次登录重新绑定 OnConnectSuccess
+    }
+  },
+  created() {
+
+    this.getDicts("app_urgent_class_task_status").then(response => {
+      this.statusOptions = response.data;
+    });
+    this.getDicts("app_urgent_class_task_type").then(response => {
+      this.typeOptions = response.data;
+    });
+    this.getDicts("app_urgent_class_task_track_type").then(response => {
+      this.trackTypeOptions = response.data;
+    });
+    this.getList();
+    this.OpenIM = getOpenIM();
+    this.initListener();
+    // 防抖：收到新消息时避免频繁调用 getOneConversation，减少 SDK 日志与请求
+    this._debouncedRefreshConversation = debounce(() => {
+      if (this.fsUserId) {
+        this.OpenIM.getOneConversation({ sourceID: this.fsUserId, sessionType: 1 })
+          .then(({ data }) => this.$store.commit('updateConversationList', data))
+          .catch(() => {})
+      }
+    }, 500)
+
+  },
+  methods: {
+    handleCloseCus(cus) {
+      this.customerRoleSearch.selected = this.customerRoleSearch.selected.filter(item => item.id != cus.id);
+    },
+    loginIm(row) {
+      this.login(row)
+    },
+    initListener() {
+      // 登录成功后会触发 SDK_READY 事件，该事件触发后，可正常使用 SDK 接口
+      this.OpenIM.on(getCbEvents().OnConnectSuccess, () => {
+        console.log("OnConnectSuccess 事件触发！"); // 调试日志
+        this.$store.commit('toggleIsSDKReady', true);
+      });
+      this.OpenIM.on(getCbEvents().OnConnectFailed, this.onError);
+      this.OpenIM.on(getCbEvents().OnKickedOffline, this.onKickOut);
+      this.OpenIM.on(getCbEvents().OnSelfInfoUpdated, this.onSelfInfoUpdated);
+      /*this.OpenIM.on(getCbEvents().OnRecvNewMessage, (message) => {
+        console.log("收到单条消息", message);
+        this.onReceiveMessage({data: [message]}); // 包装成数组形式
+      });*/
+
+      this.OpenIM.on(getCbEvents().OnRecvNewMessages, (data) => {
+        console.log("收到多条消息", data);
+        const msgList = []
+        data.data.forEach(msg =>{
+          if (msg.contentType!==113){
+            msgList.push(msg)
+          }
+        })
+        if (msgList.length>0){
+          this.onReceiveMessage({data: msgList});
+
+        }
+      });
+    },
+    login(row) {
+      this.imLoading = true;
+      this.loadingRowId = row.customerRoleId;
+      const cacheKey = 'C' + row.customerRoleId;
+      const cached = this.tokenCache?.[cacheKey];
+      const tokenPromise = cached && (Date.now() - cached.ts) < 5 * 60 * 1000
+        ? Promise.resolve({ token: cached.token })
+        : accountCheck(cacheKey).then(res => {
+          if (!this.tokenCache) this.tokenCache = {};
+          this.tokenCache[cacheKey] = { token: res.token, ts: Date.now() };
+          return res;
+        });
+      tokenPromise.then(response => {
+        const userToken = response.token;
+        const config = {
+          userID: cacheKey,
+          token:userToken,
+          logLevel: 6,
+          platformID: 5,
+          apiAddr: 'https://web.im.cdwjyyh.com/api',
+          wsAddr: 'wss://web.im.cdwjyyh.com/msg_gateway',
+          dataDir: '/imdata'
+        };
+        this.checkSDKReadyState(row.fsUserId);
+        this.doLogin(config, row);
+      }).catch(err => {
+        this.imLoading = false;
+        this.loadingRowId = null;
+        this.$store.commit('showMessage', { message: `获取 IM Token 失败：${err?.message || '未知错误'}`, type: 'error' });
+      });
+    },
+    doLogin(config, row, isRetry = false) {
+      // 登录前先设置 fsUserId、cacheFsUserName，确保 OnConnectSuccess 回调时能拿到当前用户
+      this.$store.commit('setUserId', 'C'+row.customerRoleId);
+      this.$store.commit('setFsUserId', 'U'+row.fsUserId);
+      this.$store.commit('setCacheFsUserName', row.userName || '');
+      this.OpenIM.login(config).then(() => {
+        this.imLoading = false;
+        this.loadingRowId = null;
+        this.$store.commit('setImChatVisible', true)
+        this.$store.commit('toggleIsLogin', true);
+        this.$store.commit('startComputeCurrent');
+        this.$store.commit('showMessage', { type: 'success', message: 'IM 登录成功' });
+      }).catch(async (error) => {
+        const is10102 = error?.errCode === 10102 || String(error?.errMsg || '').includes('10102')
+        if (is10102 && !isRetry) {
+          try {
+            await this.OpenIM.logout()
+            await new Promise(r => setTimeout(r, 300))
+            this.doLogin(config, row, true)
+          } catch (e) {
+            this.imLoading = false;
+            this.loadingRowId = null;
+            this.$store.commit('showMessage', { message: `IM 登录失败：${error.message || error.errMsg || '未知错误'}`, type: 'error' })
+          }
+        } else {
+          this.imLoading = false;
+          this.loadingRowId = null;
+          console.error('登录失败:', error)
+          this.$store.commit('showMessage', {
+            message: `IM 登录失败：${error.message || error.errMsg || '未知错误'}`,
+            type: 'error',
+          })
+        }
+      })
+    },
+    // 添加SDK就绪状态检查
+    checkSDKReadyState(fsUserId) {
+      if (this.hasBindReadyEvent) return;
+      this.hasBindReadyEvent = true;
+
+      let isReady = false;
+
+      const timeout = setTimeout(() => {
+        if (!isReady) {
+          this.imLoading = false;
+          this.loadingRowId = null;
+          this.$store.commit('toggleIsSDKReady', false);
+          // this.$store.commit('showMessage', { message: 'SDK初始化超时', type: 'error' });
+        }
+      }, 10000);
+
+      this.OpenIM.on(getCbEvents().OnConnectSuccess, () => {
+        console.log("WebSocket连接成功");
+        clearTimeout(timeout);
+        isReady = true;
+        this.OpenIM.getSelfUserInfo().then(({ data }) => {
+          console.log("当前登录用户基本信息",data)
+          this.$store.commit('updateCurrentUserProfile', data)
+        })
+        this.$store.commit('toggleIsSDKReady', true);
+        this.isSDKReady = true
+        // 已关闭 SDK 初始化成功提示，避免重复弹窗
+        // 触发获取用户信息等操作，使用 store 中的 fsUserId（避免切换用户时 closure 仍为旧值）
+        console.log("开始加载用户数据，获取会话列表")
+        const currentFsUserId = this.$store.state.imuser.fsUserId;
+        if (currentFsUserId) {
+          const fsUserIdRaw = String(currentFsUserId).replace(/^U/, '');
+          this.loadUserData(fsUserIdRaw);
+        }
+        console.log("结束加载用户数据，获取会话列表")
+      });
+
+      this.OpenIM.on(getCbEvents().OnConnectFailed, (error) => {
+        clearTimeout(timeout);
+        this.imLoading = false;
+        this.loadingRowId = null;
+        this.$store.commit('toggleIsSDKReady', false);
+        this.$store.commit('showMessage', { message: `SDK 连接失败: ${error.message}`, type: 'error' });
+      });
+    },
+    onKickOut(event) {
+      // event.data.type 是踢出原因
+      //const reason = this.kickedOutReason(event.data.type);
+
+      // 弹窗提示用户
+      this.$alert(`即时通账号在其他设备登录，请重新登录。`, '提示', {
+        confirmButtonText: '确定',
+        type: 'error',
+        callback: () => {
+          // 用户确认后执行退出操作
+          this.$store.commit('toggleIsLogin', false);
+          this.$store.commit('reset');
+        }
+      });
+    },
+
+    // 返回踢出原因
+    kickedOutReason(type) {
+      switch(type) {
+        case 1: return '被管理员踢出';
+        case 2: return '账号在其他设备登录';
+        default: return '未知原因';
+      }
+    },
+    onReceiveMessage({ data: messageList }) {
+      const fsUserId = this.$store.state.imuser.fsUserId
+      const isCurrentSessionMsg = fsUserId && messageList.some(
+        m => m.sendID === fsUserId || m.recvID === fsUserId
+      )
+      if (isCurrentSessionMsg) {
+        this._debouncedRefreshConversation?.()
+      }
+      this.$store.commit('pushCurrentMessageList', messageList)
+      // this.$store.commit('pushAvChatRoomMessageList', messageList)
+    },
+
+    // 添加加载用户数据方法（获取单个会话）
+    loadUserData(fsUserId) {
+      if (this._loadUserDataGuard === fsUserId) return
+      this._loadUserDataGuard = fsUserId
+      // 切换用户时先清空会话列表，避免展示上一用户的数据
+      this.$store.commit('updateConversationList', [])
+      this.$store.commit('setConversationListLoading', true)
+      this.OpenIM.getOneConversation({
+        sourceID: 'U' + fsUserId,
+        sessionType: 1,
+      })
+        .then(({ data }) => {
+          console.log("获取到会话", data)
+          this.conversationList = data ? [data] : []
+          this.$store.commit('updateConversationList', data)
+          if (data) {
+            this.$store.dispatch('checkoutConversation', {
+              conversation: data,
+              skipRefreshConversationList: true
+            })
+          }
+        })
+        .catch(({ errCode, errMsg }) => {
+          // 调用失败
+        })
+        .finally(() => {
+          this.$store.commit('setConversationListLoading', false)
+          this._loadUserDataGuard = null
+        })
+      //查询好友列表
+      // this.OpenIM.getFriendListPage({ offset:0, count:100 })
+      //   .then(({ data }) => {
+      //     // 调用成功
+      //     console.log("获取到好友列表",data)
+      //     //this.conversationList= data
+      //     this.$store.commit('updateFriendList', data)
+      //   })
+      //   .catch(({ errCode, errMsg }) => {
+      //     // 调用失败
+      //   })
+      // //查询群列表
+      // this.OpenIM.getJoinedGroupList()
+      //   .then(({ data }) => {
+      //     // 调用成功
+      //     console.log("获取到群聊列表",data)
+      //     //this.conversationList= data
+      //     this.$store.commit('updateGroupList', data)
+      //   })
+      //   .catch(({ errCode, errMsg }) => {
+      //     // 调用失败
+      //   });
+    },
+    /**
+     * 分数对应背景颜色
+     * @param score
+     */
+    getScoreStyle(score) {
+      let backgroundColor = '';
+      if (score >= 15) {
+        backgroundColor = '#ff4d4f';    // 红色
+      } else if (score >= 9) {
+        backgroundColor = '#ff7d45';    // 橘红
+      } else if (score >= 4) {
+        backgroundColor = '#ffec3d';    // 黄色
+      } else {
+        backgroundColor = '#ffffff';    // 白色
+      }
+      return {
+        'background-color': backgroundColor,
+        'padding': '5px 10px',
+        'border-radius': '4px'
+      };
+    },
+    openCusSearchPage() {
+      this.customerRoleSearch.visible = true;
+    },
+    customerSelectedConfirmCall() {
+      this.customerRoleSearch.visible = false;
+    },
+    /**
+     * 选中元素改变回调
+     * @param selected
+     */
+    customerSelectionChangeCall(config) {
+      let selected = config.selected;
+      //单行操作
+      if (config.mode === 0) {
+        let row = config.row;
+        if (selected) {
+          this.customerRoleSearch.selected.push(row)
+        } else {
+          this.customerRoleSearch.selected = this.customerRoleSearch.selected.filter(m => m.id != row.id);
+        }
+      }
+      //操作当前页所有行
+      else {
+        let list = config.rows;
+        if (selected) {
+          list.map(l => this.customerRoleSearch.selected.push(l));
+        } else {
+          list.map(l => {
+            for (let i = 0; i < this.customerRoleSearch.selected.length; i++) {
+              if (l.id == this.customerRoleSearch.selected[i].id) {
+                this.customerRoleSearch.selected.splice(i, 1);
+              }
+            }
+          })
+        }
+      }
+    },
+    formatTime(timeStr) {
+      if (!timeStr && timeStr !== 0) return '';
+      // 处理数字和字符串输入
+      const str = String(timeStr).padStart(4, '0');
+      // 提取有效部分
+      const hours = str.substring(0, 2);
+      const minutes = str.substring(2, 4);
+      // 简单验证
+      if (hours > 23 || minutes > 59) return '无效时间';
+      return `${hours}:${minutes}`;
+    },
+    /**
+     * 查询任务看板列表
+     */
+    async getList() {
+      this.loading = true;
+      let rp = JSON.parse(JSON.stringify(this.queryParams));
+      rp['customerRoleIds'] = this.customerRoleSearch.selected.map(s => s.id);
+      let res = await listUrgentClassTask(rp);
+      // console.log(res.rows)
+      this.urgentClassTaskList = res.rows;
+      this.total = res.total;
+      this.loading = false;
+    },
+    formatDateToYMD(date) {
+      const year = date.getFullYear(); // 年（4位，如 2026）
+      const month = date.getMonth() + 1; // 月（+1 修正 0 开始的问题）
+      const day = date.getDate(); // 日
+      const formattedMonth = month.toString().padStart(2, '0');
+      const formattedDay = day.toString().padStart(2, '0');
+      return `${year}-${formattedMonth}-${formattedDay}`;
+    },
+    /**
+     * 切换选项卡
+     * @param tab
+     * @param event
+     */
+    toggleTab(tab, event) {
+      this.queryParams.status = tab.name;
+      this.handleQuery();
+    },
+    /**
+     * 搜索按钮操作
+     */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /**
+     * 重置按钮操作
+     */
+    resetQuery() {
+      this.customerRoleSearch.selected = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /**
+     * 切换状态
+     * @param row
+     */
+    toggleStatus(row, status) {
+      let ids = [row.id];
+      this.$confirm('是否确认切换状态?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(async () => {
+        let res = await setStatus({ids, status});
+        this.msgSuccess('切换状态成功！');
+        this.getList();
+      }).catch(() => { });
+    },
+    /**
+     * 快速回复
+     */
+    async quickReply(row) {
+      this.quickReplyDialog.visible = true;
+      this.quickReplyDialog.loading = true;
+      this.quickReplyDialog.rowInfo = row;
+      if (!(row.customerRoleId && row.fsUserId)) {
+        this.quickReplyDialog.loading = false;
+        return this.$message.error('当前记录不满足快速回复条件，用户或客服为空！');
+      }
+      this.quickReplyDialog.title = `对话详情(${row.fsUserId}-${row.customerRoleId})`;
+      let info = await findChatLogsByUserIdAndCustomerId({
+        userId: row.fsUserId,
+        customerId: row.customerRoleId,
+      });
+      if (!this.isEmpty(info.data)) {
+        this.quickReplyDialog.chatInfo = info.data;
+        let data = info.data;
+        let chatLogs = [];
+        chatLogs.push({
+          userType: 0,
+          sendTime: data.userAskTime,
+          sendContent: !this.isEmpty(data.userAskFullContent) ? data.userAskFullContent.replace(/\n+/g, '\n').replace(/\n/g, '<br>') : '--',
+        });
+        chatLogs.push({
+          userType: 1,
+          sendTime: data.customerReplyTime,
+          sendContent: !this.isEmpty(data.customerReplyFullContent) ? data.customerReplyFullContent.replace(/\n+/g, '\n').replace(/\n/g, '<br>') : '--',
+        });
+        if (!this.isEmpty(data.extend)) {
+          let extend = JSON.parse(data.extend);
+          if (!this.isEmpty(extend.chats)) {
+            chatLogs.push(...extend.chats);
+          }
+        }
+        this.quickReplyDialog.chatLogs = chatLogs;
+      }
+      this.quickReplyDialog.loading = false;
+    },
+    isEmpty(value) {
+      return value === null || value === undefined || value.length === 0;
+    },
+    /**
+     * 关闭快速回复对话框
+     */
+    closeQuickReplyDialog() {
+      this.quickReplyDialog.visible = false;
+      this.quickReplyDialog.rowInfo = null;
+      this.quickReplyDialog.loading = false;
+      this.quickReplyDialog.chatInfo = false;
+      this.quickReplyDialog.title = '';
+      this.quickReplyDialog.chatLogs = [];
+      this.quickReplyDialog.replyContent = '';
+    },
+    handledetails(row) {
+      this.userDetails.visible = true;
+      this.userDetails.rowInfo = row;
+      this.userDetails.count++;
+    },
+
+    /**
+     * 外呼电话
+     */
+    handleCallPhone(row) {
+      if (!row.fsUserId) {
+        this.$message.warning('该记录无fsUserId');
+        return;
+      }
+      getFsUserPhone(row.fsUserId).then(response => {
+        if(response.code === 200){
+          // 设置当前拨打的电话号码
+          this.currentCallPhone = response.data;
+          // 默认使用明文模式plaintext，如果需要密文模式可以改为 'encrypted'
+          this.currentDialMode = 'encrypted';
+          // 保存当前外呼的记录ID
+          this.currentRecordId = row.id;
+
+          // 显示外呼对话框，会自动拨号
+          this.callDialogVisible = true;
+        }else{
+          this.$message.warning(response.message);
+        }
+      });
+    },
+    /**
+     * 外呼对话框关闭处理
+     */
+    handleCallDialogClose() {
+      console.log('[外呼] 对话框已关闭');
+      this.callDialogVisible = false;
+      this.currentCallPhone = '';
+      this.currentRecordId = '';
+    },
+    /**
+     * 外呼结束处理
+     */
+    handleCallEnded(recordId) {
+
+      if (!recordId) {
+        console.warn('[外呼] 未收到recordId，无法更新状态');
+        return;
+      }
+
+      // 查找当前列表中对应的记录
+      const row = this.urgentClassTaskList.find(item => item.id === recordId);
+
+      if (!row) {
+        console.warn('[外呼] 未找到对应的记录，recordId:', recordId);
+        return;
+      }
+
+      // 只有当status为0时才更新为1
+      if (row.status === 0) {
+
+        let ids = [row.id];
+        setStatus({ids, status: 1}).then(res => {
+          this.msgSuccess('外呼结束，状态已更新为已处理！');
+          this.getList(); // 刷新列表
+        }).catch(err => {
+          this.$message.error('状态更新失败：' + (err.message || '未知错误'));
+        });
+      } else {
+        this.msgSuccess('外呼结束，当前状态无需更新！');
+      }
+    },
+    handleKeyDown(e) {
+       // 只处理回车键
+      if (e.keyCode !== 13) {
+        return;
+      }
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        // 手动在光标位置插入换行符
+        let textarea = e.target;
+        let start = textarea.selectionStart;
+        let end = textarea.selectionEnd;
+        // 插入换行
+        this.quickReplyDialog.replyContent =
+          this.quickReplyDialog.replyContent.substring(0, start) +
+          "\n" +
+          this.quickReplyDialog.replyContent.substring(end);
+
+        // 光标定位到换行后
+        this.$nextTick(() => {
+          textarea.selectionStart = textarea.selectionEnd = start + 1;
+        });
+        return;
+      }
+      e.preventDefault();
+      this.sendReplyContent();
+    },
+    /**
+     * 发送回复内容
+     */
+    async sendReplyContent() {
+      this.quickReplyDialog.loading = true;
+      if (this.isEmpty(this.quickReplyDialog.replyContent.trim())) {
+        this.quickReplyDialog.loading = false;
+        return this.$message.error('请输入回复内容！');
+      }
+      let res = await editUserChatLogs({
+        id: this.quickReplyDialog.chatInfo.id,
+        replyContent: this.quickReplyDialog.replyContent,
+      });
+      if (res.code == 200) {
+        this.quickReplyDialog.chatLogs.push({
+          userType: 1,
+          sendTime: res.data,
+          sendContent: this.quickReplyDialog.replyContent,
+        });
+        this.quickReplyDialog.replyContent = '';
+        const el = this.$refs.scrollWrap;
+        if (el) {
+          el.scrollTo({
+            top: el.scrollHeight + 50,
+            behavior: 'auto'
+          });
+        }
+        this.$message.success('发送成功！');
+      } else {
+        this.$message.error('发送失败：' + res.msg);
+      }
+      this.quickReplyDialog.loading = false;
+    },
+    closeQuickReply() {
+      this.quickReplyDialog.visible = false;
+      this.quickReplyDialog.rowInfo = null;
+      this.quickReplyDialog.loading = false;
+      this.quickReplyDialog.chatInfo = false;
+      this.quickReplyDialog.chatLogs = [];
+      this.quickReplyDialog.title = '';
+      this.quickReplyDialog.replyContent = '';
+    },
+  }
+};
+</script>
+<style scoped lang="scss">
+::v-deep .el-card .is-always-shadow {
+    padding: 8px;
+}
+
+.no-copy {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+/deep/ .quick-reply {
+  height: 115px;
+  border: 1px solid #DCDFE6;
+  padding: 5px;
+  border-radius: 10px;
+
+   .el-textarea__inner {
+    border: none !important;
+  }
+}
+</style>

src/views/app/user/CusRoleList.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px"
+      @submit.prevent="handleQuery">
+
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input v-model="queryParams.roleName" placeholder="请输入角色名称" clearable size="small"
+          @keydown.enter.native="handleQueryEnter" />
+      </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="roleList" 
+      ref="roleList"
+      :row-key="row => String(row.id)"
+      @select="singleSelectHandler"
+      @select-all="allSelectHandler"
+     >
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="角色id" align="center" prop="id"/>
+      <el-table-column label="角色名称" align="center" prop="roleName"/>
+      <el-table-column label="角色备注" align="center" prop="remark"/>
+    </el-table>
+
+    <div style="margin-top: 30px;display: flex;justify-content: center">
+      <el-button type="warning" icon="el-icon-search" @click="confirmSelect">确定选择</el-button>
+    </div>
+
+    <pagination 
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { listRole } from "@/api/app/user/userList";
+export default {
+  name: "SelectedCustomer",
+  props: {
+    defaultPageNum: {
+      type: Number,
+      default: 1
+    },
+    defaultPageSize: {
+      type: Number,
+      default: 10
+    },
+    selected: {
+      type: Array,
+      default: () => [],
+    },
+    ignoreIds: {
+      type: Array,
+      default: () => [],
+    },
+    ids: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 客服角色表格数据
+      roleList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        roleName: null
+      },
+    };
+  },
+  created() {
+    this.queryParams.pageNum = this.defaultPageNum;
+    this.queryParams.pageSize = this.defaultPageSize;
+    this.getList();
+  },
+  watch: {
+    selected: {
+      immediate: true,
+      handler(nv) {
+        this.setSelectionStatus();
+      }
+    }
+  },
+  methods: {
+    /**
+     * 查询用户列表
+     */
+    getList() {
+      this.loading = true;
+      let qp = this.queryParams;
+      if (this.ignoreIds) {
+        qp['ignoreIds'] = this.ignoreIds;
+      }
+       if (this.ids) {
+        qp['ids'] = this.ids;
+      }
+      listRole(qp).then(response => {
+        this.roleList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+        this.setSelectionStatus();
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.reset();
+      try {
+        this.$emit("cancel", this.selected);
+      } catch (e) {
+        console.warn('暂未指定确认选择回调');
+      }
+    },
+    setSelectionStatus() {
+      if (this.roleList.length == 0) {
+        return;
+      }
+      this.$nextTick(() => {
+        this.roleList.forEach(row => {
+          // 判断当前行ID是否在全局选中集合中
+          const isSelected = this.selected.some(si => row.id == si.id);
+          this.$refs.roleList.toggleRowSelection(row, isSelected);
+        });
+      });
+    },
+    /**
+     * 表单重置
+     */
+    reset() {
+      this.queryParams = {
+        pageNum: this.defaultPageNum,
+        pageSize: this.defaultPageSize,
+        roleName: null,
+      }
+      this.resetForm("form");
+    },
+    /**
+     * 确定选择
+     */
+    confirmSelect() {
+      try {
+        this.$emit("confirm", this.selected);
+      } catch (e) {
+        console.warn('暂未指定确认选择回调');
+      }
+    },
+    /**
+     * 搜索按钮操作
+     */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    handleQueryEnter(event) {
+      // 确保事件对象存在
+      if (event && event.preventDefault) {
+        event.preventDefault(); // 阻止默认提交行为
+      }
+      this.handleQuery();
+    },
+    /**
+     * 重置按钮操作
+     */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /**
+     * 单选
+     * @param selection 
+     * @param row 
+     */
+    singleSelectHandler(selection, row) {
+      let pm = {
+        mode: 0,//0-单行选，1-全选
+        row,//操作的行
+      }
+      //列表中找不到当前行数据，则说明是取消选中
+      if (!selection.some(l => l.id == row.id)) {
+        pm['selected'] = false;//设置取消选中
+      } else {
+        pm['selected'] = true;//设置选中
+      }
+      try {
+        this.$emit("selectionChange", pm);
+      } catch (e) {
+        console.warn('当前组件暂未指定selection回调');
+      }
+    },
+    /**
+     * 全选
+     * @param selection 
+     */
+    allSelectHandler(selection) {
+      let pm = {
+        mode: 1,//0-单行选，1-全选
+        rows: this.roleList,//操作的所有行
+        selected: selection.length > 0 ? true : false,
+      }
+      try {
+        this.$emit("selectionChange", pm);
+      } catch (e) {
+        console.warn('当前组件暂未指定selection回调');
+      }
+    },
+  }
+};
+</script>

src/views/app/user/UserList.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px"
+      @submit.prevent="handleQuery">
+
+      <el-form-item label="用户昵称" prop="nickName">
+        <el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable size="small"
+          @keydown.enter.native="handleQueryEnter" />
+      </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="userList" ref="userList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="用户id" align="center" prop="userId"/>
+      <!-- <el-table-column label="用户账户" align="center" prop="username"/> -->
+      <el-table-column label="用户昵称" align="center" prop="nickName"/>
+
+    </el-table>
+    <div style="margin-top: 30px;display: flex;justify-content: center">
+      <el-button type="warning" icon="el-icon-search" @click="confirmSelect">确定选择</el-button>
+    </div>
+
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.startIndex" :limit.sync="queryParams.pageLimit"
+      @pagination="handlePaginationChange" />
+  </div>
+</template>
+
+<script>
+import { listUser } from "@/api/app/user/userList";
+export default {
+  name: "userList",
+  data() {
+    return {
+      type: null,
+      sendType: null,
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      selectUsers: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 企微用户表格数据
+      userList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        startIndex: 1,
+        pageLimit: 5,
+        nickName: null
+      },
+
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      listUser(this.queryParams).then(response => {
+        // 如果 companyUserId 为 null，移除列
+        this.userList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    handlePaginationChange(row) {
+      this.queryParams.startIndex = row.page;
+      this.queryParams.pageLimit = row.limit;
+      this.getList();
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.queryParams = {
+        startIndex: 1,
+        pageLimit: 5,
+        nickName: null,
+      }
+      this.resetForm("form");
+    },
+    //确定选择
+    confirmSelect() {
+      this.$emit("selectUserList", this.selectUsers);
+      this.resetSelect();
+    },
+    //重置选择
+    resetSelect() {
+      this.$refs.userList.clearSelection();
+      this.selectUsers = [];
+      this.reset();
+      this.getList();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.startIndex = 1;
+      this.getList();
+    },
+    handleQueryEnter(event) {
+      // 确保事件对象存在
+      if (event && event.preventDefault) {
+        event.preventDefault(); // 阻止默认提交行为
+      }
+      this.handleQuery();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      // 保存当前页的选中项
+      const currentPageSelections = selection.map(item => item.userId);
+      // 合并选中项
+      this.selectUsers = this.selectUsers.filter(item =>
+        this.userList.some(tag => tag.userId === item.id) ? currentPageSelections.includes(item.userId) : true
+      ).concat(selection.filter(item => !this.selectUsers.some(selected => selected.userId === item.userId)));
+      // 更新 single 和 multiple
+      this.single = this.selectUsers.length !== 1;
+      this.multiple = !this.selectUsers.length;
+    },
+  }
+};
+</script>

src/views/app/user/index.vue

@@ -0,0 +1,1437 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+      <el-form-item label="会员ID" prop="userId">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入会员ID"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <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 label="加密号码" prop="phone">
+        <el-input
+          v-model="queryParams.phone"
+          placeholder="请输入手机号码"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="邀请码" prop="invitationCode">
+        <el-input
+          v-model="queryParams.invitationCode"
+          placeholder="请输入邀请码"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="所属部门" prop="deptId">
+        <treeselect
+          v-model="queryParams.deptId"
+          :options="deptOptions"
+          :normalizer="normalizer"
+          placeholder="选择部门"
+          style="width: 250px"
+        />
+      </el-form-item>
+
+      <el-form-item label="所属公司" prop="companyId">
+        <el-select
+          v-model="queryParams.companyId"
+          placeholder="选择公司"
+          clearable
+          filterable
+        >
+          <el-option 
+            v-for="company in companyOptions"
+            :value="company.companyId"
+            :label="company.companyName"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="邀请日期" prop="inviteDate">
+        <el-date-picker clearable size="small" v-model="queryParams.inviteDate" type="daterange" value-format="yyyy-MM-dd"
+          placeholder="选择邀请日期">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="标签" prop="tagIds">
+        <div @click="openTagSearchPage"
+             style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 250px">
+          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+            <el-tag type="success"
+                closable
+                :disable-transitions="false"
+                v-for="list in this.tagSearchConfig.selected"
+                :key="list.tagId"
+                @close="handleCloseTags(list)"
+                style="margin: 3px;"
+            >{{ list.tagName }}
+            </el-tag>
+          </div>
+        </div>
+      </el-form-item>
+
+      <el-form-item label="客服" prop="customerRoles">
+        <div @click="openCusSearchPage"
+             style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 250px">
+          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+            <el-tag type="success"
+                closable
+                :disable-transitions="false"
+                v-for="list in this.bindAISearch.selected"
+                :key="list.id"
+                @close="handleCloseCus(list)"
+                style="margin: 3px;"
+            >{{ list.roleName }}
+            </el-tag>
+          </div>
+        </div>
+      </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-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          :loading="exportLoading"
+          v-hasPermi="['app:user:export']"
+          @click="handleExport"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          size="mini"
+          v-hasPermi="['app:user:bindTag']"
+          @click="openBindTagPage(false, 0)"
+        > 批量添加标签
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          size="mini"
+          v-hasPermi="['app:user:unbindTag']"
+          @click="openUnbindTagPage(false, 1)"
+        >批量移除标签
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          size="mini"
+          v-hasPermi="['app:user:bindCustomer']"
+          @click="openbindAIPage(false, 0)"
+        >批量绑定客服
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          size="mini"
+          v-hasPermi="['app:user:unbindCustomer']"
+          @click="openbindAIPage(false, 1)"
+        >批量解绑客服
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          size="mini"
+          v-hasPermi="['app:user:batchBindTag']"
+          @click="openBindTagPage(true, 0)"
+        >批量添加标签(筛选条件)
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          size="mini"
+          v-hasPermi="['app:user:batchUnbindTag']"
+          @click="openUnbindTagPage(true, 1)"
+        >批量移除标签(筛选条件)
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          size="mini"
+          v-hasPermi="['app:user:batchBindCustomer']"
+          @click="openbindAIPage(true, 0)"
+        >批量绑定客服(筛选条件)
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="info"
+          plain
+          size="mini"
+          v-hasPermi="['app:user:batchUnbindCustomer']"
+          @click="openbindAIPage(true, 1)"
+        >批量解绑客服(筛选条件)
+        </el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table height="660" v-loading="loading" border :data="userList" @selection-change="handleSelectionChange" >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="用户ID" align="center" prop="userId" width="150px"/>
+      <el-table-column label="用户昵称" align="center" prop="nickName" width="150px"/>
+      <el-table-column label="用户头像" align="center" prop="avatar" >
+         <template slot-scope="scope">
+            <el-image v-if="scope.row.avatar!=null"
+                style="width: 50px;"
+                :src="scope.row.avatar"
+              >
+            </el-image>
+         </template>
+      </el-table-column>
+      <el-table-column label="手机号码" align="center" prop="phone" min-width="150px"/>
+      <el-table-column label="部门 / 公司" align="center" prop="deptName" min-width="150px"/>
+      <el-table-column label="用户状态" align="center" prop="status">
+         <template slot-scope="scope">
+              <dict-tag :options="userOptions" :value="scope.row.status"/>
+              <p v-if="scope.row.status == 0 && scope.row.remark">{{scope.row.remark}}</p>
+         </template>
+      </el-table-column>
+      <el-table-column label="注册时间" align="center" prop="createTime" min-width="150px"/>
+       <el-table-column label="邀请码" align="center" prop="invitationCode" min-width="150px"/>
+       <el-table-column label="邀请时间" align="center" prop="inviteTime" min-width="150px"/>
+       <el-table-column label="客服" align="center" min-width="200px" prop="customerRoles">
+        <template slot-scope="scope">
+          <div v-for="(item, idx) in (scope.row.customerRoles ? scope.row.customerRoles.split(',') : [])" :key="idx" style="display: inline;">
+            <el-tag type="primary" style="margin: 3px;">{{item}}</el-tag>
+          </div>
+        </template>
+       </el-table-column>
+       <el-table-column label="标签" align="center" min-width="200px" prop="tagsName">
+        <template slot-scope="scope">
+          <div v-for="(item, idx) in (scope.row.tagsName ? scope.row.tagsName.split(',') : [])" :key="idx" style="display: inline;">
+            <el-tag type="success" style="margin: 3px;">{{item}}</el-tag>
+          </div>
+        </template>
+       </el-table-column>
+
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="190px">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleAIUserInfo(scope.row)"
+          >AI获取用户信息</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            @click="handledetails(scope.row)"
+          >详情</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.startIndex"
+      :limit.sync="queryParams.pageLimit"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改用户对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="用户昵称" prop="nickName">
+          <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
+        </el-form-item>
+        <el-form-item label="用户状态" prop="status">
+            <el-select v-model="form.status" placeholder="请选择状态" clearable size="small">
+                  <el-option
+                    v-for="dict in userOptions"
+                    :key="dict.dictValue"
+                    :label="dict.dictLabel"
+                    :value="dict.dictValue"
+                  />
+                </el-select>
+        </el-form-item>
+        <el-form-item label="用户备注" prop="remark" >
+          <el-input v-model="form.remark" placeholder="请输入用户备注" type="textarea"/>
+        </el-form-item>
+      </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>
+
+    <el-dialog :title="tagConfig.title" :visible.sync="tagConfig.visible" width="800px" append-to-body>
+      <div>搜索标签：
+        <el-input v-model="tagConfig.queryParams.groupName" placeholder="请输入标签名称" clearable size="small"
+          style="width: 200px;margin-right: 10px"/>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchTags(false)">搜索</el-button>
+        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="cancelSearchTags(false)">重置</el-button>
+      </div>
+      <div class="dialog-body">
+        <div v-for="groupItem in tagConfig.tagGroupList" :key="groupItem.id">
+          <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
+            <span class="name-background">{{ groupItem.name }}</span>
+          </div>
+          <div class="tag-container">
+            <a
+              v-for="tagItem in groupItem.tags"
+              class="tag-box"
+              @click="tagSelection(tagItem)"
+              :class="{ 'tag-selected': tagItem.isSelected }"
+            >
+              {{ tagItem.name }}
+            </a>
+          </div>
+        </div>
+      </div>
+      <pagination
+        v-show="tagConfig.total > 0"
+        :total="tagConfig.total"
+        :page.sync="tagConfig.queryParams.pageNum"
+        :limit.sync="tagConfig.queryParams.pageSize"
+        @pagination="getTagGroupList"
+      />
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="bindOrUnbindTagSubmit">确 定</el-button>
+        <el-button @click="bindTagCancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="搜索标签" :visible.sync="tagSearchConfig.visible" width="800px" append-to-body>
+      <div>搜索标签：
+        <el-input v-model="tagSearchConfig.queryParams.groupName" placeholder="请输入标签名称" clearable size="small"
+          style="width: 200px;margin-right: 10px"/>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchTags(true)">搜索</el-button>
+        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="cancelSearchTags(true)">重置</el-button>
+      </div>
+      <div class="dialog-body">
+        <div v-for="groupItem in tagSearchConfig.tagGroupList" :key="groupItem.id">
+          <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
+            <span class="name-background">{{ groupItem.name }}</span>
+          </div>
+          <div class="tag-container">
+            <a
+              v-for="tagItem in groupItem.tags"
+              class="tag-box"
+              @click="searchTagSelection(tagItem)"
+              :class="{ 'tag-selected': tagItem.isSelected }"
+            >
+              {{ tagItem.name }}
+            </a>
+          </div>
+        </div>
+      </div>
+      <pagination
+        v-show="tagSearchConfig.total > 0"
+        :total="tagSearchConfig.total"
+        :page.sync="tagSearchConfig.queryParams.pageNum"
+        :limit.sync="tagSearchConfig.queryParams.pageSize"
+        @pagination="getSearchTagGroupList"
+      />
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="searchTagSubmit">确 定</el-button>
+        <el-button @click="searchTagCancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-drawer
+      :with-header="false"
+      size="75%"
+      :title="show.title"
+      :visible.sync="show.open"
+    >
+      <userDetails  ref="userDetails" />
+    </el-drawer>
+
+      <!-- 选择app客服角色 -->
+    <el-dialog :title="bindAIConfig.title" :visible.sync="bindAIConfig.visible" width="1000px" append-to-body :close-on-click-modal="false">
+      <CusRoleList
+        ref="customerBindRef"
+        @confirm="customerSelectedConfirmCallForBind"
+        @selectionChange="customerSelectionChangeCallForBind"
+        :selected="bindAIConfig.selected"
+      />
+    </el-dialog>
+
+    <!-- app客服搜索 -->
+    <el-dialog title="客服搜索" :visible.sync="bindAISearch.visible" width="1000px" append-to-body>
+      <CusRoleList ref="customerSearchRef"
+        @confirm="customerSelectedConfirmCall"
+        @selectionChange="customerSelectionChangeCall"
+        :selected="bindAISearch.selected"
+      />
+    </el-dialog>
+
+    <!-- ai获取用户信息 -->
+    <el-dialog title="AI获取用户信息" :visible.sync="aiUserInfoDialog.visible" width="700px" append-to-body :close-on-click-modal="false">
+      <el-form ref="form" :model="aiUserInfoDialog.userInfo" :rules="aiUserInfoDialog.rules" label-width="140px" v-loading="aiUserInfoDialog.loading">
+        <div style="height: 500px; overflow: auto;" class="ai-user-info">
+          <el-form-item label="姓名" prop="name">
+            <el-input v-model="aiUserInfoDialog.userInfo.name" placeholder="请输入姓名" />
+          </el-form-item>
+          <el-form-item label="性别" prop="sex">
+            <el-input v-model="aiUserInfoDialog.userInfo.sex" placeholder="请输入性别" />
+          </el-form-item>
+          <el-form-item label="年龄" prop="age">
+            <el-input v-model="aiUserInfoDialog.userInfo.age" placeholder="请输入年龄" />
+          </el-form-item>
+          <el-form-item label="地区" prop="address">
+            <el-input v-model="aiUserInfoDialog.userInfo.address" placeholder="请输入地区" />
+          </el-form-item>
+          <el-form-item label="行为习惯" prop="habits">
+            <el-input v-model="aiUserInfoDialog.userInfo.habits" placeholder="请输入行为习惯" />
+          </el-form-item>
+          <el-form-item label="患病时间" prop="illnessTime">
+            <el-input v-model="aiUserInfoDialog.userInfo.illnessTime" placeholder="请输入患病时间" />
+          </el-form-item>
+          <el-form-item label="身体状态" prop="body">
+            <el-input v-model="aiUserInfoDialog.userInfo.body" placeholder="请输入身体状态" />
+          </el-form-item>
+          <el-form-item label="疾病" prop="disease">
+            <el-input v-model="aiUserInfoDialog.userInfo.disease" placeholder="请输入疾病" />
+          </el-form-item>
+          <el-form-item label="提及的家人" prop="family">
+            <el-input v-model="aiUserInfoDialog.userInfo.family" placeholder="请输入提及的家人" />
+          </el-form-item>
+          <el-form-item label="是否线下就诊" prop="isLine">
+            <el-input v-model="aiUserInfoDialog.userInfo.isLine" placeholder="是否线下就诊" />
+          </el-form-item>
+          <el-form-item label="家人的疾病" prop="familyDisease">
+            <el-input v-model="aiUserInfoDialog.userInfo.familyDisease" placeholder="请输入家人的疾病" />
+          </el-form-item>
+          <el-form-item label="用户分类" prop="userType">
+          <el-input v-model="aiUserInfoDialog.userInfo.userType" placeholder="用户分类" />
+          </el-form-item>
+          <el-form-item label="是否本人会诊" prop="isSelf">
+            <el-input v-model="aiUserInfoDialog.userInfo.isSelf" placeholder="请输入是否本人会诊" />
+          </el-form-item>
+          <el-form-item label="什么情况加重或缓解" prop="intensify">
+            <el-input v-model="aiUserInfoDialog.userInfo.intensify" placeholder="请输入什么情况加重或缓解" />
+          </el-form-item>
+          <el-form-item label="是否怕热或者怕冷" prop="isCold">
+            <el-input v-model="aiUserInfoDialog.userInfo.isCold" placeholder="请输入是否怕热或者怕冷" />
+          </el-form-item>
+          <el-form-item label="怕冷或怕热的部位" prop="coldBody">
+            <el-input v-model="aiUserInfoDialog.userInfo.coldBody" placeholder="请输入怕冷或怕热的部位" />
+          </el-form-item>
+          <el-form-item label="出汗情况" prop="sweat">
+            <el-input v-model="aiUserInfoDialog.userInfo.sweat" placeholder="请输入出汗情况" />
+          </el-form-item>
+          <el-form-item label="其他情况" prop="other">
+            <el-input v-model="aiUserInfoDialog.userInfo.other" placeholder="请输入其他情况" />
+          </el-form-item>
+          <el-form-item label="大小便情况" prop="toilet">
+            <el-input v-model="aiUserInfoDialog.userInfo.toilet" placeholder="请输入大小便情况" />
+          </el-form-item>
+          <el-form-item label="饮食情况" prop="eat">
+            <el-input v-model="aiUserInfoDialog.userInfo.eat" placeholder="请输入饮食情况" />
+          </el-form-item>
+          <el-form-item label="经期如何" prop="menses">
+            <el-input v-model="aiUserInfoDialog.userInfo.menses" placeholder="请输入经期如何 女 55岁以下" />
+          </el-form-item>
+          <el-form-item label="现在使用的药品" prop="medicine">
+            <el-input v-model="aiUserInfoDialog.userInfo.medicine" placeholder="请输入现在使用的药品" />
+          </el-form-item>
+          <el-form-item label="体质" prop="constitution">
+            <el-input v-model="aiUserInfoDialog.userInfo.constitution" placeholder="请输入体质" />
+          </el-form-item>
+          <el-form-item label="推荐用药" prop="recommendMedicine">
+            <el-input v-model="aiUserInfoDialog.userInfo.recommendMedicine" placeholder="请输入推荐用药" />
+          </el-form-item>
+          <el-form-item label="咨询产品" prop="consultProduct">
+            <el-input v-model="aiUserInfoDialog.userInfo.consultProduct" placeholder="请输入咨询产品" />
+          </el-form-item>
+          <el-form-item label="是否已经购买产品" prop="isBuy">
+            <el-input v-model="aiUserInfoDialog.userInfo.isBuy" placeholder="请输入是否已经购买产品" />
+          </el-form-item>
+          <el-form-item label="已经购买的产品" prop="buyProduct">
+            <el-input v-model="aiUserInfoDialog.userInfo.buyProduct" placeholder="请输入已经购买的产品" />
+          </el-form-item>
+          <el-form-item label="产品交流" prop="productTalk">
+            <el-input v-model="aiUserInfoDialog.userInfo.productTalk" placeholder="请输入产品交流信息" />
+          </el-form-item>
+          <el-form-item label="疾病交流" prop="diseaseTalk">
+            <el-input v-model="aiUserInfoDialog.userInfo.diseaseTalk" placeholder="请输入疾病交流信息" />
+          </el-form-item>
+          <el-form-item label="渠道类型" prop="channelType">
+            <el-input v-model="aiUserInfoDialog.userInfo.channelType" placeholder="请输入渠道类型信息" />
+          </el-form-item>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAiUserInfo" :disabled="aiUserInfoDialog.loading">确 定</el-button>
+        <el-button @click="closeAIUserInfoDialog">取 消</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getUser, delUser, addUser, updateUser } from "@/api/his/user";
+import {
+  bindUserCusByIdsV2,
+  unbindUserCusByIdsV2,
+  listAppUser,
+  exportAppUser
+} from '@/api/app/user';
+import { listTagGroupForUserBindTag } from "@/api/app/tag/tagGroup";
+import {
+  bindTagV2,
+  unbindTagV2,
+} from "@/api/app/tag/bindTag";
+import { getAIUserInfoByUserId, saveAiUserInfo, } from '@/api/app/user/userInfo';
+import { listDept, companyOption, } from '@/api/system/appDept';
+
+import CusRoleList from '@/views/app/user/CusRoleList.vue';
+import userDetails from '../../components/his/userDetails.vue';
+import Treeselect from '@riophae/vue-treeselect'
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  name: "UserTag",
+  components: { Treeselect, userDetails, CusRoleList},
+  data() {
+    return {
+      show:{
+        title:"用户详情",
+        open:false,
+      },
+      userOptions: [],
+      // 遮罩层
+      loading: false,
+      // 导出遮罩层
+      exportLoading: false,
+      // 选中数组
+      ids: [],
+      orOptions:[],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: [],
+      // app部门下拉选项
+      deptOptions: [],
+      // 销售公司下拉
+      companyOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      createTime:null,
+      firstLoginTime:null,
+      // 查询参数
+      queryParams: {
+        startIndex: 1,
+        pageLimit: 10,
+        nickName: null,
+        phone: null,
+        phoneMk: null,
+        status: null,
+        invitationCode: null,
+        deptId: null,
+        companyId: null,
+        inviteDate: null,
+        customerRoles: [],
+        tagIds: [],
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        nickName: [
+          { required: true, message: "昵称不能为空", trigger: "blur" }
+        ],
+        status: [
+          { required: true, message: "用户状态不能为空", trigger: "blur" }
+        ],
+        integral: [
+          { required: true, message: "用户积分不能为空", trigger: "blur" }
+        ],
+      },
+      tagConfig: {
+        visible: false,//对话框是否展示
+        enableFilter: false,//是否开启过滤模式，开启则是引用外部条件，针对外部条件过滤的所有数据做 绑定/解绑 标签，否则根据针对外部勾选的用户做 绑定/解绑 标签操作
+        title: null,
+        opType: 0,//0-添加，1-移除，2-搜索
+        queryParams: {
+          groupName: null,
+          pageNum: 1,
+          pageSize: 10,
+        },
+        total: 0,
+        tagGroupList: [],
+        selected: [],
+      },
+      tagSearchConfig: {
+        visible: false,//对话框是否展示
+        queryParams: {
+          groupName: null,
+          pageNum: 1,
+          pageSize: 10,
+        },
+        total: 0,
+        tagGroupList: [],
+        selected: [],
+      },
+      bindAIConfig: {
+        title: null,
+        type: null,
+        visible: false,
+        enableFilter: false,
+        selected: [],
+      },
+      bindAISearch: {
+        visible: false,
+        selected: [],
+        // 缓存子组件实例
+        cusRoleListRef: null,
+      },
+      aiUserInfoDialog: {
+        visible: false,
+        loading: false,
+        rules: {},
+        userId: null,
+        userInfo: {
+          id: null,
+          name: null,
+          sex: null,
+          age: null,
+          address: null,
+          habits: null,
+          illnessTime: null,
+          body: null,
+          family: null, 
+          familyDisease: null,
+          disease: null,
+          isLine: null,
+          userType: null,
+          isSelf: null,
+          intensify: null,
+          isCold: null,
+          coldBody: null,
+          sweat: null,
+          other: null,
+          toilet: null,
+          eat: null,
+          menses: null,
+          medicine: null,
+          constitution: null,
+          recommendMedicine: null,
+          consultProduct: null,
+          isBuy: null,
+          buyProduct: null,
+          productTalk: null,
+          diseaseTalk: null,
+          channelType: null,
+        },
+      },
+      userDetails: {
+        visible: false,
+        rowInfo: null,
+        count: 0,
+      },
+    };
+  },
+  created() {
+    this.getDicts("sys_user_status").then(response => {
+      this.userOptions = response.data;
+    });
+    this.getDicts("sys_company_or").then(response => {
+      this.orOptions = response.data;
+    });
+    this.getDeptList();
+  },
+  watch: {
+    'queryParams.companyId': {
+      handler(n) {
+        if (!this.isEmpty(n)) {
+          this.queryParams.deptId = null;
+        }
+      },
+    },
+    'queryParams.deptId': {
+      handler(n) {
+        if (!this.isEmpty(n)) {
+          this.queryParams.companyId = null;
+        }
+      },
+    },
+  },
+  methods: {
+    getDeptList() {
+      //app个人部门
+      listDept().then(response => {
+        if (response.code === 200) {
+          this.deptOptions = this.handleTree(response.data, "deptId");
+        } else {
+          this.deptOptions = [];
+        }
+      }).catch(() => {
+        this.deptOptions = [];
+      });
+      //公司（通过公司码进线的用户）
+      companyOption().then(response => {
+        if (response.code === 200) {
+          this.companyOptions = response.data;
+        } else {
+          this.companyOptions = [];
+        }
+      })
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.deptId,
+        label: node.deptName,
+        children: node.children
+      };
+    },
+    handleTree(data, id, parentId, children) {
+      id = id || 'id';
+      parentId = parentId || 'parentId';
+      children = children || 'children';
+      var tree = [];
+      var map = {};
+      data.forEach(function(item) {
+        map[item[id]] = item;
+      });
+      data.forEach(function(item) {
+        var parent = map[item[parentId]];
+        if (parent) {
+          (parent[children] || (parent[children] = [])).push(item);
+        } else {
+          tree.push(item);
+        }
+      });
+      return tree;
+    },
+    change() {
+      if (this.createTime != null) {
+        this.queryParams.sTime = this.createTime[0];
+        this.queryParams.eTime = this.createTime[1];
+      } else {
+        this.queryParams.sTime = null;
+        this.queryParams.eTime = null;
+      }
+    },
+    changeLoginTime() {
+      if (this.firstLoginTime != null) {
+        this.queryParams.startLoginTime = this.firstLoginTime[0];
+        this.queryParams.endLoginTime = this.firstLoginTime[1];
+      } else {
+        this.queryParams.startLoginTime = null;
+        this.queryParams.endLoginTime = null;
+      }
+    },
+    handledetails(row) {
+      this.show.open = true;
+      setTimeout(() => {
+        this.$refs.userDetails.getDetails(row.userId);
+      }, 1);
+    },
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true;
+      let query = JSON.parse(JSON.stringify(this.queryParams));
+      query['tagIds'] = this.tagSearchConfig.selected.map(item => item.tagId);
+      query['customerRoles'] = this.bindAISearch.selected.map(item => item.id);
+      if (!this.isEmpty(query.inviteDate)) {
+        let dateRange = query.inviteDate;
+        query['inviteStartDate'] = dateRange[0] + ' 00:00:00';
+        query['inviteEndDate'] = dateRange[1] + ' 23:59:59';
+        delete query['inviteDate']
+      }
+      listAppUser(query).then(response => {
+        this.userList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /**
+     * 确认选中回调
+     * @param selected
+     */
+    customerSelectedConfirmCall(selected) {
+      this.bindAISearch.visible = false;
+    },
+    /**
+     * 选中元素改变回调
+     * @param selected
+     */
+    customerSelectionChangeCall(config) {
+      let selected = config.selected;
+      //单行操作
+      if (config.mode === 0) {
+        let row = config.row;
+        if (selected) {
+          this.bindAISearch.selected.push(row)
+        } else {
+          this.bindAISearch.selected = this.bindAISearch.selected.filter(m => m.id != row.id);
+        }
+      }
+      //操作当前页所有行
+      else {
+        let list = config.rows;
+        if (selected) {
+          list.map(l => this.bindAISearch.selected.push(l));
+        } else {
+          list.map(l => {
+            for (let i = 0; i < this.bindAISearch.selected.length; i++) {
+              if (l.id == this.bindAISearch.selected[i].id) {
+                this.bindAISearch.selected.splice(i, 1);
+              }
+            }
+          })
+        }
+      }
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        userId: null,
+        nickName: null,
+        avatar: null,
+        phone: null,
+        integral: null,
+        status: null,
+        tuiUserId: null,
+        tuiTime: null,
+        tuiUserCount: null,
+        maOpenId: null,
+        mpOpenId: null,
+        unionId: null,
+        isDel: null,
+        userCode: null,
+        remark: null,
+        createTime: null,
+        updateTime: null,
+        lastIp: null,
+        balance: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.startIndex = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    async resetQuery() {
+      this.resetForm("queryForm");
+      this.resetTagSearchConfig();
+      this.resetCusSearch();
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.userId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加用户";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const userId = row.userId || this.ids
+      getUser(userId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改用户";
+        this.form.status = String(this.form.status)
+      });
+    },
+    /**
+     * ai获取用户信息
+     */
+    handleAIUserInfo(row) {
+      this.aiUserInfoDialog.visible = true;
+      this.aiUserInfoDialog.userId = row.userId;
+      this.getAIUserInfo(row.userId);
+    },
+    closeAIUserInfoDialog() {
+      this.aiUserInfoDialog.visible = false;
+      this.resetAIUserInfo();
+    },
+    /**
+     * 重置AI用户信息
+     */
+    resetAIUserInfo() {
+      this.aiUserInfoDialog.userInfo = {
+          name: null,
+          sex: null,
+          age: null,
+          address: null,
+          habits: null,
+          illnessTime: null,
+          body: null,
+          familyDisease: null,
+          disease: null,
+          isLine: null,
+          userType: null,
+          isSelf: null,
+          intensify: null,
+          isCold: null,
+          coldBody: null,
+          sweat: null,
+          other: null,
+          toilet: null,
+          eat: null,
+          menses: null,
+          medicine: null,
+          constitution: null,
+          recommendMedicine: null,
+          consultProduct: null,
+          isBuy: null,
+          buyProduct: null,
+          productTalk: null,
+          diseaseTalk: null,
+          channelType: null,
+        }
+    },
+    /**
+     * 获取ai用户信息
+     */
+    async getAIUserInfo(userId) {
+      this.aiUserInfoDialog.loading = true;
+      let userInfo = await getAIUserInfoByUserId(userId);
+      let userInfoData = userInfo.data;
+      if (userInfoData) {
+        this.aiUserInfoDialog.userInfo = userInfoData;
+      }
+      this.aiUserInfoDialog.loading = false;
+    },
+    /**
+     * 提交ai用户信息
+     */
+    async submitAiUserInfo() {
+      this.aiUserInfoDialog.loading = true;
+      let realInfo = JSON.parse(JSON.stringify(this.aiUserInfoDialog.userInfo));
+      try {
+        for (let key in realInfo) {
+          let source = realInfo[key];
+          realInfo[key] = this.isEmpty(source) ? null : this.isString(source) ? source.trim() : source;
+        }
+        realInfo['fsUserId'] = this.aiUserInfoDialog.userId;
+        let save = await saveAiUserInfo(realInfo);
+        if (save.data) {
+          this.msgSuccess("修改成功");
+          this.aiUserInfoDialog.visible = false;
+          this.resetAIUserInfo();
+        } else {
+          this.msgError("修改失败");
+        }
+      } catch (e) {
+        console.warn(e);
+        this.msgError("修改失败");
+      } finally {
+        this.aiUserInfoDialog.loading = false;
+      }
+    },
+    isEmpty(value) {
+      return value === null || value === undefined || value.length === 0;
+    },
+    isString(val) {
+      return Object.prototype.toString.call(val) === '[object String]';
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.userId != null) {
+            updateUser(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addUser(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const userIds = row.userId || this.ids;
+      this.$confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return delUser(userIds);
+      }).then(() => {
+        this.getList();
+        this.msgSuccess("删除成功");
+      }).catch(() => { });
+    },
+    /** 导出按钮操作 */
+    /** 导出按钮操作 */
+    handleExport() {
+      // 空值保护：深拷贝前先判断
+      if (!this.queryParams) return this.$message.warning("查询参数异常");
+
+      const queryParams = JSON.parse(JSON.stringify(this.queryParams));
+      delete queryParams['startIndex'];
+      delete queryParams['pageLimit'];
+
+      // 空值判断：避免map空数组报错
+      queryParams['tagIds'] = this.tagSearchConfig.selected?.map(item => item.tagId) || [];
+      queryParams['customerRoles'] = this.bindAISearch.selected?.map(item => item.id) || [];
+
+      // 日期参数空值保护
+      if (!this.isEmpty(queryParams.inviteDate)) {
+        let dateRange = queryParams.inviteDate;
+        queryParams['inviteStartDate'] = dateRange[0] + ' 00:00:00';
+        queryParams['inviteEndDate'] = dateRange[1] + ' 23:59:59';
+        delete queryParams['inviteDate'];
+      } else {
+        delete queryParams['inviteDate']; // 空值时直接删除
+      }
+
+      this.$confirm('是否确认导出所有用户数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        this.exportLoading = true;
+        return exportAppUser(queryParams);
+      }).then(response => {
+        // 接口返回码判断（适配常见的后端返回格式）
+        if (response.code === 200) {
+          this.download(response.msg);
+          this.msgSuccess("导出成功");
+        } else {
+          this.msgError("导出失败：" + response.msg);
+        }
+        this.exportLoading = false;
+      }).catch(() => {
+        this.exportLoading = false; // 取消/失败时重置加载状态
+        this.msgError("导出取消或失败");
+      });
+    },
+    openTagSearchPage() {
+      this.getSearchTagGroupList();
+      this.tagSearchConfig.visible = true;
+    },
+    openCusSearchPage() {
+      this.bindAISearch.visible = true;
+    },
+    searchTagSubmit() {
+      this.tagSearchConfig.visible = false;
+    },
+    searchTagCancel() {
+      this.tagSearchConfig.visible = false;
+    },
+    async resetTagSearchConfig() {
+      this.tagSearchConfig = {
+        visible: false,//对话框是否展示
+        queryParams: {
+          groupName: null,
+          pageNum: 1,
+          pageSize: 10,
+        },
+        total: 0,
+        tagGroupList: [],
+        selected: [],
+      }
+    },
+    async resetCusSearch() {
+      this.bindAISearch = {
+        visible: false,
+        selected: [],
+      }
+    },
+    /**
+     * 用户绑定标签页面
+     */
+    openBindTagPage(enableFilter = false, opType = 0) {
+      this.tagConfig.enableFilter = enableFilter;
+      this.tagConfig.opType = opType;
+      if (!enableFilter && (this.ids === null || this.ids.length === 0)) {
+        this.$message.closeAll();
+        return this.$message('请选择需要添加标签的用户');
+      }
+      this.getTagGroupList();
+      this.tagConfig.title = '批量添加标签' + (enableFilter ? '(筛选条件)' : '');
+      this.tagConfig.visible = true;
+    },
+    /**
+     * 用户解绑标签页面
+     */
+    openUnbindTagPage(enableFilter = false, opType = 1) {
+      this.tagConfig.enableFilter = enableFilter;
+      this.tagConfig.opType = opType;
+      if (!enableFilter && (this.ids === null || this.ids.length === 0)) {
+        this.$message.closeAll();
+        return this.$message('请选择需要移除标签的用户');
+      }
+      this.getTagGroupList();
+      this.tagConfig.title = '批量移除标签' + (enableFilter ? '(筛选条件)' : '');
+      this.tagConfig.visible = true;
+    },
+    handleCloseTags(tag) {
+      this.tagSearchConfig.selected = this.tagSearchConfig.selected.filter(item => item.tagId != tag.tagId);
+    },
+    handleCloseCus(cus) {
+      this.bindAISearch.selected = this.bindAISearch.selected.filter(item => item.id != cus.id);
+    },
+    /**
+     * 绑定/解绑 标签页面搜索
+     */
+    handleSearchTags(isSearch = false) {
+      if (isSearch) {
+        this.tagSearchConfig.queryParams.pageNum = 1;
+        this.getSearchTagGroupList();
+      } else {
+        this.tagConfig.queryParams.pageNum = 1;
+        this.getTagGroupList();
+      }
+    },
+    /**
+     * 绑定/解绑 标签页面重置
+     */
+    cancelSearchTags(isSearch = false) {
+      if (isSearch) {
+        this.tagSearchConfig.queryParams = {
+          groupName: null,
+          pagenum: 1,
+          pagesize: 10,
+        }
+        this.getSearchTagGroupList();
+      } else {
+        this.tagConfig.queryParams = {
+          groupName: null,
+          pagenum: 1,
+          pagesize: 10,
+        }
+        this.getTagGroupList();
+      }
+    },
+    /**
+     * 切换选中状态
+     * @param row
+     */
+    tagSelection(row) {
+      row.isSelected = !row.isSelected;
+      if (row.isSelected) {
+        this.tagConfig.selected.push({ tagId: row.id, tagName: row.name });
+      }
+      //
+      else {
+        this.tagConfig.selected = this.tagConfig.selected.filter(item => item.tagId !== row.id);
+      }
+      this.$forceUpdate();
+    },
+    searchTagSelection(row) {
+      row.isSelected = !row.isSelected;
+      if (row.isSelected) {
+        this.tagSearchConfig.selected.push({ tagId: row.id, tagName: row.name });
+      }
+      //
+      else {
+        this.tagSearchConfig.selected = this.tagSearchConfig.selected.filter(item => item.tagId !== row.id);
+      }
+      this.$forceUpdate();
+    },
+    /**
+     * 重置 绑定/解绑 标签参数
+     */
+    resetBindTag() {
+      this.tagConfig = {
+        visible: false,
+        enableFilter: false,
+        title: null,
+        opType: 0,
+        queryParams: {
+          groupName: null,
+          pageNum: 1,
+          pagesize: 10,
+        },
+        total: 0,
+        tagGroupList: [],
+        selected: [],
+      }
+    },
+    /**
+     * 绑定/解绑 标签-提交
+     */
+    bindOrUnbindTagSubmit() {
+      let opType = this.tagConfig.opType;
+      let tmpParam = {};
+      if (!this.tagConfig.selected || this.tagConfig.selected.length === 0) {
+        return this.$message('请选择标签');
+      }
+      tmpParam['enableFilter'] = this.tagConfig.enableFilter;
+      tmpParam['tagId'] = this.tagConfig.selected.map(item => item.tagId);
+      tmpParam['userId'] = this.ids;
+      const queryParams = JSON.parse(JSON.stringify(this.queryParams));
+      delete queryParams['startIndex'];
+      delete queryParams['pageLimit'];
+      queryParams['tagIds'] = this.tagSearchConfig.selected.map(item => item.tagId);
+      queryParams['customerRoles'] = this.bindAISearch.selected.map(item => item.id);
+      if (queryParams.inviteDate) {
+        let dateRange = queryParams.inviteDate;
+        queryParams['inviteStartDate'] = dateRange[0] + ' 00:00:00';
+        queryParams['inviteEndDate'] = dateRange[1] + ' 23:59:59';
+        delete queryParams['inviteDate']
+      }
+      tmpParam['fsUserParam'] = queryParams;
+      //绑定标签
+      if (opType === 0) {
+        bindTagV2(tmpParam)
+          .then(res => {
+            this.tagConfig.visible = false;
+            this.resetBindTag();
+            this.msgSuccess("正在添加中!");
+            setTimeout(() => {
+              this.getList();
+            }, 500);
+          })
+          .catch(err => {
+            this.msgError("添加标签失败！");
+          })
+      }
+      //解绑标签
+      else {
+        unbindTagV2(tmpParam)
+          .then(res => {
+            this.tagConfig.visible = false;
+            this.msgSuccess("正在移除中!");
+            this.resetBindTag();
+            setTimeout(() => {
+              this.getList();
+            }, 500);
+          })
+          .catch(err => {
+            this.msgError("移除标签失败！");
+          })
+      }
+    },
+    /**
+     * 绑定/解绑 标签-取消
+     */
+    bindTagCancel() {
+      this.resetBindTag();
+    },
+    /**
+     * 查询标签列表
+     */
+    getTagGroupList() {
+      listTagGroupForUserBindTag(this.tagConfig.queryParams).then(response => {
+        this.tagConfig.tagGroupList = response.rows;
+        this.tagConfig.total = response.total;
+      });
+    },
+    getSearchTagGroupList() {
+      listTagGroupForUserBindTag(this.tagSearchConfig.queryParams).then(response => {
+        let tRows = response.rows;
+        if (tRows && tRows.length > 0) {
+          tRows.forEach(group => {
+            group.tags.forEach(tag => {
+              if (this.tagSearchConfig.selected.some(item => item.tagId === tag.id)) {
+                tag.isSelected = true;
+              } else {
+                tag.isSelected = false;
+              }
+            })
+          });
+        }
+        this.tagSearchConfig.tagGroupList = tRows;
+        this.tagSearchConfig.total = response.total;
+      });
+    },
+    /**
+     * 打开绑定客服页面
+     * @param enableFilter 是否开启过滤模式
+     * @param type 0-绑定，1-解绑
+     */
+    openbindAIPage(enableFilter = false, type = 1) {
+      this.bindAIConfig.enableFilter = enableFilter;
+      if (!enableFilter && (this.ids === null || this.ids.length === 0)) {
+        this.$message.closeAll();
+        return this.$message('请选择需要设置客服的用户');
+      }
+      this.bindAIConfig.title = type == 0 ? '绑定客服' : '解绑客服';
+      this.bindAIConfig.type = type;
+      this.bindAIConfig.visible = true;
+    },
+    /**
+     * 绑定客服页面-选中客服
+     */
+    customerSelectionChangeCallForBind(config) {
+      let selected = config.selected;
+      //单行操作
+      if (config.mode === 0) {
+        let row = config.row;
+        if (selected) {
+          if (!this.bindAIConfig.selected.some(s => s.id == row.id)) {
+            this.bindAIConfig.selected.push(row);
+          }
+        } else {
+          this.bindAIConfig.selected = this.bindAIConfig.selected.filter(m => m.id != row.id);
+        }
+      }
+      //操作当前页所有行
+      else {
+        let list = config.rows;
+        if (selected) {
+          list.map(l => {
+            if (!this.bindAIConfig.selected.some(s => s.id == l.id)) {
+              this.bindAIConfig.selected.push(l);
+            }
+          });
+        } else {
+          list.map(l => {
+            for (let i = 0; i < this.bindAIConfig.selected.length; i++) {
+              if (l.id == this.bindAIConfig.selected[i].id) {
+                this.bindAIConfig.selected.splice(i, 1);
+              }
+            }
+          })
+        }
+      }
+    },
+    /**
+     * 保存绑定的客服
+     */
+    async customerSelectedConfirmCallForBind() {
+      let tmpParam = {};
+      tmpParam['enableFilter'] = this.bindAIConfig.enableFilter;
+      tmpParam['roleId'] = this.bindAIConfig.selected.map(item => item.id) || [];
+      tmpParam['userId'] = this.ids;
+      const queryParams = JSON.parse(JSON.stringify(this.queryParams));
+      delete queryParams['startIndex'];
+      delete queryParams['pageLimit'];
+      queryParams['tagIds'] = this.tagSearchConfig.selected.map(item => item.tagId);
+      queryParams['customerRoles'] = this.bindAISearch.selected.map(item => item.id);
+      if (queryParams.inviteDate) {
+        let dateRange = queryParams.inviteDate;
+        queryParams['inviteStartDate'] = dateRange[0] + ' 00:00:00';
+        queryParams['inviteEndDate'] = dateRange[1] + ' 23:59:59';
+        delete queryParams['inviteDate']
+      }
+      tmpParam['fsUserParam'] = queryParams;
+      let res;
+      if (this.bindAIConfig.type == 0) {
+        res = await bindUserCusByIdsV2(tmpParam);
+        this.msgSuccess("正在绑定中!");
+      } else {
+        res = await unbindUserCusByIdsV2(tmpParam);
+        this.msgSuccess("正在解绑中!");
+      }
+      this.getList();
+      this.bindAIConfig.visible = false;
+      this.bindAIConfig.selected = [];
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.dialog-body {
+  height: 400px;
+  overflow: auto;
+}
+
+.tag-container {
+  display: flex;
+  flex-wrap: wrap; /* 超出宽度时自动换行 */
+  gap: 8px; /* 设置标签之间的间距 */
+}
+
+.name-background {
+  display: inline-block;
+  background-color: #abece6; /* 背景颜色 */
+  padding: 4px 8px; /* 调整内边距，让背景包裹文字 */
+  border-radius: 4px; /* 可选：设置圆角 */
+}
+
+.tag-box {
+  padding: 8px 12px;
+  border: 1px solid #989797;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.tag-selected {
+  background-color: #00bc98;
+  color: #fff;
+  border-color: #00bc98;
+}
+
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+
+/deep/ .ai-user-info .el-form-item__label {
+  text-align: right !important;
+}
+</style>

src/views/app/userChatLogs/index.vue

@@ -0,0 +1,248 @@
+<template>
+    <div class="app-container">
+        <el-form
+            :model="queryParams"
+            ref="queryForm"
+            :inline="true"
+            v-show="showSearch"
+            label-width="120px"
+        >
+            <el-form-item label="会员ID" prop="userId">
+                <el-input
+                    v-model="queryParams.userId"
+                    placeholder="请输入会员ID"
+                    clearable
+                    size="small"
+                    @keyup.enter.native="handleQuery"
+                    @input="queryParams.userId = queryParams.userId.replace(/[^0-9]/g, '')"
+                />
+            </el-form-item>
+            <el-form-item label="发送日期" prop="userAskDate">
+                <el-date-picker
+                    clearable
+                    size="small"
+                    v-model="queryParams.userAskDate"
+                    type="date"
+                    value-format="yyyy-MM-dd"
+                    placeholder="请选择发送日期"
+                    @change="handleQuery"
+                />
+            </el-form-item>
+            <el-form-item label="客服ID" prop="appCustomerId">
+                <el-input
+                    v-model="queryParams.appCustomerId"
+                    placeholder="请输入客服ID"
+                    clearable
+                    size="small"
+                    @keyup.enter.native="handleQuery"
+                    @input="queryParams.appCustomerId = queryParams.appCustomerId.replace(/[^0-9]/g, '')"
+                />
+            </el-form-item>
+            <el-form-item label="回复日期" prop="customerReplyDate">
+                <el-date-picker
+                    clearable
+                    size="small"
+                    v-model="queryParams.customerReplyDate"
+                    type="date"
+                    value-format="yyyy-MM-dd"
+                    placeholder="请选择回复日期"
+                    @change="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-row :gutter="10" class="mb8">
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getFindList"/>
+        </el-row>
+
+        <el-table v-loading="loading" :data="userChatLogs" border>
+            <el-table-column type="index" label="序号" align="center" width="80"/>
+            <el-table-column label="会员ID" align="center" prop="userId" min-width="130"/>
+            <el-table-column label="会员名称" align="left" prop="userName" min-width="100"/>
+            <el-table-column label="客服ID" align="left" prop="appCustomerId" min-width="100"/>
+            <el-table-column label="客服名称" align="center" prop="appCustomerName" min-width="150">
+                <template slot-scope="scope">
+                    <el-tag
+                        v-if="scope.row.appCustomerName"
+                        v-text="scope.row.appCustomerName"
+                    />
+                </template>
+            </el-table-column>
+            <el-table-column label="会员对话" align="left" prop="userAskShortContent" min-width="250"/>
+            <el-table-column label="对话时间" align="center" prop="userAskTime" min-width="120"/>
+            <el-table-column label="客服回复" align="left" prop="customerReplyShortContent" min-width="250">
+                <template slot-scope="scope">
+                    {{ scope.row.customerReplyShortContent || '--' }}
+                </template>
+            </el-table-column>
+            <el-table-column label="回复时间" align="center" prop="customerReplyTime" min-width="120"/>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="180"
+                fixed="right">
+                <template slot-scope="scope">
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-edit"
+                        @click="openChatPage(scope.row)"
+                    >
+                        查看详情
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+            @pagination="getFindList" />
+
+        <!-- 查看详情 -->
+        <el-dialog 
+            title="对话详情"
+            :visible.sync="dialog.visible"
+            v-loading="dialog.loading"
+            width="1000px"
+            append-to-body
+            :close-on-click-modal="false"
+        >
+            <div style="height: 600px; overflow: auto;">
+                <el-timeline>
+                    <el-timeline-item 
+                        :timestamp="dialog.chatInfo.userAskTime"
+                        placement="top"
+                        type="success"
+                    >
+                        <el-card shadow="hover" :body-style="{'padding': '8px', 'background': '#9df29f', 'color': '#161616'}">
+                            <div
+                                class="no-copy1"
+                                v-html="dialog.chatInfo.userAskFullContentFmt || '--'"
+                            >
+                            </div>
+                        </el-card>
+                    </el-timeline-item>
+                    <el-timeline-item
+                        :timestamp="dialog.chatInfo.customerReplyTime"
+                        placement="top"
+                        type="primary"
+                    >
+                        <el-card shadow="hover" :body-style="{'padding': '8px', 'background': '#eeeef0', 'color': '#161616'}">
+                            <div
+                                class="no-copy1"
+                                v-html="dialog.chatInfo.customerReplyFullContentFmt || '--'"
+                                oncontextmenu="return false"
+                                @selectstart.prevent
+                                @contextmenu.prevent
+                            >
+                            </div>
+                        </el-card>
+                    </el-timeline-item>
+                </el-timeline>
+            </div>
+
+            <div slot="footer" class="dialog-footer" style="text-align: center">
+                <el-button @click="cancel">关 闭</el-button>
+            </div>
+        </el-dialog>
+        
+    </div>
+</template>
+
+<script>
+import { findList, } from "@/api/app/userChatLogs";
+
+export default {
+    name: "UserChatLogs",
+    data() {
+        return {
+            loading: true,
+            showSearch: true,
+            userChatLogs: [],
+            total: 0,
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                userId: null,
+                userAskDate: null,
+                appCustomerId: null,
+                customerReplyDate: null,
+            },
+            dialog: {
+                visible: false,
+                loading: false,
+                chatInfo: {},
+            },
+        };
+    },
+    created() {
+        this.getFindList();
+    },
+    methods: {
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getFindList();
+        },
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.getFindList();
+        },
+        async getFindList() {
+            this.loading = true;
+            let tableInfo = await findList(this.queryParams);
+            this.userChatLogs = tableInfo.rows;
+            this.total = tableInfo.total;
+            this.loading = false;
+        },
+        /**
+         * 打开详情页面
+         */
+        openChatPage(row) {
+            this.dialog.visible = true;
+            this.dialog.loading = true;
+            this.dialog.chatInfo = row;
+            let userAskFullContentFmt = !this.isEmpty(this.dialog.chatInfo.userAskFullContent) ? this.dialog.chatInfo.userAskFullContent.replace(/\n+/g, '\n').replace(/\n/g, '<br>') : '--';
+            this.dialog.chatInfo['userAskFullContentFmt'] = userAskFullContentFmt;
+            let customerReplyFullContentFmt = !this.isEmpty(this.dialog.chatInfo.customerReplyFullContent) ? this.dialog.chatInfo.customerReplyFullContent.replace(/\n+/g, '\n').replace(/\n/g, '<br>') : '--';
+            this.dialog.chatInfo['customerReplyFullContentFmt'] = customerReplyFullContentFmt;
+            this.dialog.loading = false;
+        },
+        cancel() {
+            this.dialog.visible = false;
+        },
+        isEmpty(value) {
+            return value === null || value === undefined || value.length === 0;
+        },
+        /**
+         * 删除
+         * @param row 
+         */
+        handleDelete(row) {
+            const ids = row.id || this.ids;
+            this.$confirm('是否确认删除欢迎语：编号为"' + ids + '"的数据项?', "警告", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            }).then(function () {
+                return deleteByIds(ids);
+            }).then(() => {
+                this.getList();
+                this.msgSuccess("删除成功");
+            }).catch(() => { });
+        },
+    }
+};
+</script>
+
+<style scoped>
+::v-deep .el-card .is-always-shadow {
+    padding: 8px;
+}
+
+.no-copy {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+</style>

src/views/app/userPortrait/index.vue

@@ -0,0 +1,545 @@
+<template>
+  <div class="app-container portrait-container">
+
+    <!-- 搜索栏 -->
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">
+      <el-form-item label="用户ID" prop="userId">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入用户ID"
+          clearable
+          size="small"
+          style="width: 160px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="手机号" prop="phone">
+        <el-input
+          v-model="queryParams.phone"
+          placeholder="请输入手机号"
+          clearable
+          size="small"
+          style="width: 160px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户昵称" prop="nickName">
+        <el-input
+          v-model="queryParams.nickName"
+          placeholder="请输入用户昵称"
+          clearable
+          size="small"
+          style="width: 160px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="消费等级" prop="consumptionLevel">
+        <el-select
+          v-model="queryParams.consumptionLevel"
+          placeholder="请选择消费等级"
+          clearable
+          size="small"
+          style="width: 130px"
+        >
+          <el-option label="S+" value="S+" />
+          <el-option label="S"  value="S" />
+          <el-option label="A"  value="A" />
+          <el-option label="B"  value="B" />
+          <el-option label="C"  value="C" />
+          <el-option label="D"  value="D" />
+          <el-option label="E"  value="E" />
+          <el-option label="代客下单"  value="F" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="活跃度" prop="activityLevel">
+        <el-select
+          v-model="queryParams.activityLevel"
+          placeholder="请选择活跃度"
+          clearable
+          size="small"
+          style="width: 130px"
+        >
+          <el-option label="高活跃" value="高活跃" />
+          <el-option label="中活跃" value="中活跃" />
+          <el-option label="低活跃" value="低活跃" />
+          <el-option label="沉默"   value="沉默" />
+          <el-option label="流失"   value="流失" />
+        </el-select>
+      </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-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="portraitList" border stripe style="width: 100%">
+      <el-table-column label="用户ID" align="center" prop="userId" min-width="130" />
+
+      <el-table-column label="头像" align="center" width="80">
+        <template slot-scope="scope">
+          <el-avatar
+            v-if="scope.row.avatar"
+            :src="scope.row.avatar"
+            :size="40"
+          />
+          <el-avatar v-else icon="el-icon-user-solid" :size="40" style="background:#c0c4cc" />
+        </template>
+      </el-table-column>
+
+      <el-table-column label="昵称" align="center" prop="nickName" min-width="120" show-overflow-tooltip />
+      <el-table-column label="手机号" align="center" prop="phone" min-width="160" />
+
+      <el-table-column label="活跃度" align="center" prop="activityLevel" width="110">
+        <template slot-scope="scope">
+          <el-tag
+            v-if="scope.row.activityLevel"
+            :type="activityTagType(scope.row.activityLevel)"
+            size="small"
+          >{{ scope.row.activityLevel }}</el-tag>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="消费等级" align="center" prop="consumptionLevel" width="100">
+        <template slot-scope="scope">
+          <span v-if="scope.row.consumptionLevel" :class="consumptionClass(scope.row.consumptionLevel)" class="level-badge">
+            {{ comsumptionLevelMapper[scope.row.consumptionLevel] }}
+          </span>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="兴趣标签" align="center" prop="interestTags" min-width="230">
+        <template slot-scope="scope">
+          <template v-if="scope.row.interestTags">
+            <el-tag
+              v-for="(tag, idx) in splitTags(scope.row.interestTags)"
+              :key="idx"
+              type="success"
+              size="mini"
+              style="margin: 2px;"
+            >{{ tag }}</el-tag>
+          </template>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="城市" align="center" prop="location" width="110" show-overflow-tooltip />
+
+      <el-table-column label="疗法周期" align="center" min-width="160">
+        <template slot-scope="scope">
+          <template v-if="scope.row.treatmentCycle">
+            <el-button
+              v-for="(cycle, idx) in splitTags(scope.row.treatmentCycle)"
+              :key="idx"
+              size="mini"
+              type="primary"
+              plain
+              style="margin: 2px;"
+              @click="openTreatmentDialog(scope.row, cycle)"
+            >{{ cycle }}</el-button>
+          </template>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="160">
+        <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              plain
+              style="margin: 2px;"
+              @click="openEditDialog(scope.row)"
+            />
+        </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="疗法周期详情"
+      :visible.sync="treatmentDialog.visible"
+      width="620px"
+      append-to-body
+      custom-class="treatment-dialog"
+      @close="closeTreatmentDialog"
+    >
+      <div v-loading="treatmentDialog.loading" class="treatment-content">
+        <!-- 用户信息头部 -->
+        <div class="treatment-user-header">
+          <el-avatar
+            v-if="treatmentDialog.row && treatmentDialog.row.avatar"
+            :src="treatmentDialog.row && treatmentDialog.row.avatar"
+            :size="48"
+          />
+          <el-avatar v-else icon="el-icon-user-solid" :size="48" style="background:#909399" />
+          <div class="treatment-user-info">
+            <div class="user-name">{{ treatmentDialog.row && (treatmentDialog.row.nickName || '—') }}</div>
+            <div class="user-phone">{{ treatmentDialog.row && (treatmentDialog.row.phone || '—') }}</div>
+          </div>
+          <el-tag v-if="treatmentDialog.cycleName" type="warning" style="margin-left: auto;">
+            {{ treatmentDialog.cycleName }}
+          </el-tag>
+        </div>
+
+        <!-- 详情字段 -->
+        <el-descriptions
+          class="treatment-desc"
+          :column="2"
+          border
+          size="small"
+        >
+          <el-descriptions-item label="购买时间">
+            <span>{{ treatmentDialog.detail.buyTime || '—' }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="购买量">
+            <span>{{ treatmentDialog.detail.buyQuantity || '—' }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="建议单日服用量">
+            <span>{{ treatmentDialog.detail.dailyDosage || '—' }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="回访时间">
+            <span>{{ treatmentDialog.detail.visitTime || '—' }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="提醒复购时间">
+            <span>{{ treatmentDialog.detail.repurchaseRemindTime || '—' }}</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="推测余量">
+            <span>{{ treatmentDialog.detail.estimatedRemaining || '—' }}</span>
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <!-- 空状态 -->
+        <div v-if="!treatmentDialog.loading && !hasTreatmentData" class="treatment-empty">
+          <i class="el-icon-warning-outline" style="font-size:36px;color:#c0c4cc"></i>
+          <p>暂无疗法周期数据</p>
+        </div>
+      </div>
+
+      <div slot="footer">
+        <el-button @click="treatmentDialog.visible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      title="编辑画像"
+      :visible.sync="editDialog.visible"
+      width="350px"
+      append-to-body
+      :close-on-click-modal="false"
+      custom-class="user-portrait-dialog"
+    >
+      <div v-loading="editDialog.loading">
+        <el-form :model="editDialog.editForm" ref="editForm" :rules="editDialog.rules" :inline="true" label-width="80px">
+          <el-row>
+            <el-form-item label="用户ID">
+              <el-input v-model="editDialog.editForm.userId" :disabled="true"/>
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item label="昵称">
+              <el-input v-model="editDialog.editForm.nickName" :disabled="true"/>
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item label="消费等级" prop="consumptionLevel">
+              <el-select
+                v-model="editDialog.editForm.consumptionLevel"
+                placeholder="请选择消费等级"
+                clearable
+                style="width: 205px;"
+              >
+                <el-option label="S+" value="S+" />
+                <el-option label="S"  value="S" />
+                <el-option label="A"  value="A" />
+                <el-option label="B"  value="B" />
+                <el-option label="C"  value="C" />
+                <el-option label="D"  value="D" />
+                <el-option label="E"  value="E" />
+                <el-option label="代客下单"  value="F" />
+              </el-select>
+            </el-form-item>
+          </el-row>
+        </el-form>
+      </div>
+      <div slot="footer">
+        <el-button type="primary" size="small" :disabled="editDialog.loading" @click="submitEditInfo">确 认</el-button>
+        <el-button size="small" @click="editDialog.visible = false">关 闭</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { listUserPortrait, getUserTreatmentCycle, saveEdit, } from '@/api/app/user/portrait'
+
+export default {
+  name: 'UserPortrait',
+  data() {
+    return {
+      loading: false,
+      showSearch: true,
+      total: 0,
+      portraitList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        userId: null,
+        phone: null,
+        nickName: null,
+        consumptionLevel: null,
+        activityLevel: null
+      },
+      treatmentDialog: {
+        visible: false,
+        loading: false,
+        row: null,
+        cycleName: null,
+        detail: {
+          buyTime: null,
+          buyQuantity: null,
+          dailyDosage: null,
+          visitTime: null,
+          repurchaseRemindTime: null,
+          estimatedRemaining: null
+        }
+      },
+      comsumptionLevelMapper: {
+        'S+': 'S+',
+        'S': 'S',
+        'A': 'A',
+        'B': 'B',
+        'C': 'C',
+        'D': 'D',
+        'E': 'E',
+        'F': '代客下单'
+      },
+      editDialog: {
+        loading: false,
+        visible: false,
+        id: null,
+        editForm: {
+          id: null,
+          userId: null,
+          nickName: null,
+          consumptionLevel: null,
+        },
+        rules: {
+          consumptionLevel: [
+            { required: true, message: '请选择消费等级', trigger: 'change' }
+          ]
+        },
+      },
+    }
+  },
+  computed: {
+    hasTreatmentData() {
+      const d = this.treatmentDialog.detail
+      return Object.values(d).some(v => v !== null && v !== '' && v !== undefined)
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 获取列表 */
+    getList() {
+      this.loading = true
+      const params = {}
+      if (this.queryParams.pageNum) params.pageNum = this.queryParams.pageNum
+      if (this.queryParams.pageSize) params.pageSize = this.queryParams.pageSize
+      if (this.queryParams.userId) params.userId = this.queryParams.userId
+      if (this.queryParams.phone) params.phone = this.queryParams.phone
+      if (this.queryParams.nickName) params.nickName = this.queryParams.nickName
+      if (this.queryParams.consumptionLevel) params.consumptionLevel = this.queryParams.consumptionLevel
+      if (this.queryParams.activityLevel) params.activityLevel = this.queryParams.activityLevel
+      listUserPortrait(params).then(response => {
+        this.portraitList = response.rows || []
+        this.total = response.total || 0
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    /** 搜索 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置 */
+    resetQuery() {
+      this.$refs.queryForm.resetFields()
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 拆分兴趣标签 */
+    splitTags(str) {
+      if (!str) return []
+      return str.split(/[,，]/).map(t => t.trim()).filter(t => t)
+    },
+    /** 活跃度 tag 颜色 */
+    activityTagType(level) {
+      const map = {
+        '高活跃': 'success',
+        '中活跃': '',
+        '低活跃': 'warning',
+        '沉默': 'info',
+        '流失': 'danger'
+      }
+      for (const key in map) {
+        if (level && level.includes(key)) return map[key]
+      }
+      return 'info'
+    },
+    /** 消费等级样式 */
+    consumptionClass(level) {
+      const map = { 'S+': 'level-splus', 'S': 'level-s', 'A': 'level-a', 'F': 'level-a', 'B': 'level-b', 'C': 'level-c' }
+      return map[level] || 'level-default'
+    },
+    /** 打开疗法周期详情（row: 当前行数据，cycleName: 点击的具体周期名称） */
+    openTreatmentDialog(row, cycleName) {
+      this.treatmentDialog.visible = true
+      this.treatmentDialog.row = row
+      this.treatmentDialog.cycleName = cycleName || null
+      this.treatmentDialog.detail = {
+        buyTime: null,
+        buyQuantity: null,
+        dailyDosage: null,
+        visitTime: null,
+        repurchaseRemindTime: null,
+        estimatedRemaining: null
+      }
+      if (row.userId) {
+        this.treatmentDialog.loading = true
+        getUserTreatmentCycle(row.userId, cycleName).then(res => {
+          const data = res.data || {}
+          this.treatmentDialog.detail = {
+            buyTime: data.buyTime || null,
+            buyQuantity: data.buyQuantity || null,
+            dailyDosage: data.dailyDosage || null,
+            visitTime: data.visitTime || null,
+            repurchaseRemindTime: data.repurchaseRemindTime || null,
+            estimatedRemaining: data.estimatedRemaining || null
+          }
+        }).catch(() => {
+          // 接口暂未对接时不报错
+        }).finally(() => {
+          this.treatmentDialog.loading = false
+        })
+      }
+    },
+    /** 关闭疗法周期弹窗 */
+    closeTreatmentDialog() {
+      this.treatmentDialog.row = null
+      this.treatmentDialog.cycleName = null
+    },
+    openEditDialog(row) {
+      this.editDialog.visible = true;
+      this.editDialog.id = row.id;
+      this.editDialog.loading = true;
+      this.editDialog.editForm['id'] = row.id;
+      this.editDialog.editForm['userId'] = row.userId;
+      this.editDialog.editForm['nickName'] = row.nickName;
+      this.editDialog.editForm['consumptionLevel'] = row.consumptionLevel;
+      this.editDialog.loading = false;
+    },
+    submitEditInfo() {
+      this.$refs["editForm"].validate(async (valid) => {
+        this.editDialog.visible = true;
+        if (valid) {
+          await saveEdit(this.editDialog.editForm);
+          this.$message.success("修改成功");
+          this.$refs['editForm'].resetFields();
+          this.$refs['editForm'].clearValidate();
+          this.editDialog.visible = false;
+          this.getList();
+        }
+        this.editDialog.visible = false;
+      });
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.portrait-container {
+  padding: 20px;
+}
+
+/* 消费等级徽标 */
+.level-badge {
+  display: inline-block;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+.level-splus { background: #8b0000; color: #fff; }
+.level-s     { background: #c0392b; color: #fff; }
+.level-a     { background: #e05555; color: #fff; }
+.level-b     { background: #f0908a; color: #fff; }
+.level-c     { background: #fad4d1; color: #c0392b; }
+.level-default { background: #f0f0f0; color: #606266; }
+
+/* 疗法周期弹窗 */
+.treatment-content {
+  min-height: 120px;
+}
+.treatment-user-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 16px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  margin-bottom: 18px;
+  border: 1px solid #ebeef5;
+}
+.treatment-user-info .user-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+}
+.treatment-user-info .user-phone {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+.treatment-desc {
+  margin-top: 4px;
+}
+.treatment-empty {
+  text-align: center;
+  padding: 30px 0 10px;
+  color: #c0c4cc;
+}
+.treatment-empty p {
+  margin-top: 8px;
+  font-size: 13px;
+}
+
+/deep/ .user-portrait-dialog {
+
+  .el-form-item__label {
+    text-align: right !important;
+  }
+
+}
+</style>