木易华康-新增欢迎语详情

src/api/qw/friendWelcome.js

@@ -8,3 +8,11 @@ export function listFriendWelcome(query) {
     params: query
   })
 }
+
+// 查询好友欢迎语详细
+export function getFriendWelcome(id) {
+  return request({
+    url: '/qw/friendWelcome/' + id,
+    method: 'get'
+  })
+}

src/views/qw/friendWelcome/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="120px">
       <el-form-item label="销售公司" prop="companyId">
-        <el-select v-model="queryParams.companyId" clearable placeholder="销售公司" @change="changeCorpOrCompany()" size="small">
+        <el-select v-model="queryParams.companyId" placeholder="销售公司" @change="changeCorpOrCompany()" size="small">
           <el-option
             v-for="dict in companyList"
             :key="dict.dictValue"
@@ -12,7 +12,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="企微主体" prop="corpId">
-        <el-select v-model="queryParams.corpId" clearable placeholder="企微主体" @change="changeCorpOrCompany()" size="small">
+        <el-select v-model="queryParams.corpId" placeholder="企微主体" @change="changeCorpOrCompany()" size="small">
           <el-option
             v-for="dict in myQwCompanyList"
             :key="dict.dictValue"
@@ -101,6 +101,15 @@
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
       <el-table-column label="更新时间" align="center" prop="updateTime" width="180"/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleDetail(scope.row)"
+          >详情</el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
     <pagination
@@ -110,11 +119,175 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <!-- 添加或修改好友欢迎语对话框 -->
+    <el-dialog :title="friendWelcomeDialog.title" :visible.sync="friendWelcomeDialog.visible" v-loading="friendWelcomeDialog.loading" width="1200px" append-to-body>
+      <div style="width: 1130px" class="app-container">
+        <div>
+          <span style="font-size: 15px">基础信息</span>
+          <el-divider></el-divider>
+        </div>
+        <el-form ref="form" :model="friendWelcomeDialog.friendWelcomeInfo" :disabled="true" label-width="120px">
+          <el-form-item label="使用成员：" style="margin-top: 2%">
+            <div>
+              <el-tag
+                style="margin-left: 5px"
+                size="medium"
+                :key="list.id"
+                v-for="list in userSelectList"
+                closable
+                :disable-transitions="false">
+                {{list.qwUserName}}({{list.nickName}})
+              </el-tag>
+            </div>
+          </el-form-item>
+          <!-- 新增整体标题 -->
+          <el-form-item label="标题：" prop="welcomeTitle">
+            <el-input v-model="friendWelcomeDialog.friendWelcomeInfo.welcomeTitle" placeholder="请输入欢迎语标题"/>
+            <el-alert style="margin-top: 8px;height: 30px"
+                      title="此标题仅用于欢迎语的用途区分"
+                      type="info"
+                      :closable="false"
+                      show-icon>
+            </el-alert>
+          </el-form-item>
+          <el-form-item label="是否发送欢迎语">
+            <el-switch
+              v-model="friendWelcomeDialog.friendWelcomeInfo.isSendMsg"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              active-value="1"
+              inactive-value="2">
+            </el-switch>
+            <span v-if="friendWelcomeDialog.friendWelcomeInfo.isSendMsg == '1'" style="margin-left: 10px;color: #13ce66">允许</span>
+            <span v-if="friendWelcomeDialog.friendWelcomeInfo.isSendMsg == '2'" style="margin-left: 10px;color: #ff4949">不允许</span>
+
+          </el-form-item>
+          <div>
+            <span style="font-size: 15px">发送欢迎语</span>
+            <el-divider></el-divider>
+          </div>
+          <el-form-item label="默认欢迎语：" prop="welcomeText">
+            <el-input v-model="friendWelcomeDialog.friendWelcomeInfo.welcomeText" type="textarea"  :rows="12" maxlength="1300" show-word-limit placeholder="请输入消息内容"/>
+            <!-- 附件和链接列表 -->
+            <el-row>
+              <el-col>
+                <div v-for="(item, index) in friendWelcomeDialog.friendWelcomeInfo.attachments" :key="index" style="background-color: #f5f7fa;padding: 5px;border: 1px solid  #d9d9d9;">
+                  <div slot="header" style="display: flex;justify-content: space-between;align-items: center; ">
+                    <div style="flex: 1;">
+                      <span v-if="item.msgtype === 'image'">【图片】: {{ item.image.pic_url }}</span>
+                      <span v-if="item.msgtype === 'video'">【视频】: {{ item.video.url }}</span>
+                      <span v-if="item.msgtype === 'link'">【链接】: {{ item.link.title }}-{{item.link.desc}}</span>
+                      <span v-if="item.msgtype === 'miniprogram'">【小程序】: {{ item.miniprogram.title }}</span>
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </el-form-item>
+
+          <el-form-item label="分时段欢迎语">
+            <el-switch
+              v-model="friendWelcomeDialog.friendWelcomeInfo.isDayparting"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              active-value="1"
+              inactive-value="2">
+            </el-switch>
+            <span v-if="friendWelcomeDialog.friendWelcomeInfo.isDayparting == '1'" style="margin-left: 10px;color: #13ce66">已启用</span>
+            <span v-if="friendWelcomeDialog.friendWelcomeInfo.isDayparting == '2'" style="margin-left: 10px;color: #ff4949">已禁用</span>
+          </el-form-item>
+
+          <el-form-item v-if="friendWelcomeDialog.friendWelcomeInfo.isDayparting == '1'" >
+            <div style="background-color:#ecf8fe;width: 100%;border: 1px solid #dcdfe6">
+              <span style="margin-left:20px;font-size: 15px;display: block" >注意：1、员工上下班不同时间段可设置不同欢迎语;</span>
+              <span style="margin-left:65px;font-size: 15px;display: block" >2、分时段之外的时间将发送已允许的默认欢迎语。</span>
+              <span style="margin-left:65px;font-size: 15px;display: block" >3、不设置分时段欢迎语则使用已允许的默认欢迎语</span>
+              <span style="margin-left:65px;font-size: 15px;display: block" >4、若员工没有设置过欢迎语则不会发送</span>
+            </div>
+          </el-form-item>
+          <el-form-item v-if="friendWelcomeDialog.friendWelcomeInfo.isDayparting == '2'">
+            <div style="background-color:#ecf8fe;width: 100%;border: 1px solid #dcdfe6">
+              <span style="margin-left:20px;font-size: 15px;display: block" >注意：1、新建欢迎语最多可发送1条文字消息和9个附件;</span>
+              <span style="margin-left:65px;font-size: 15px;display: block" >2、文字消息和附件不能同时为空，当两者均填写时用户会收到多条消息;</span>
+              <span style="margin-left:65px;font-size: 15px;display: block" >3、欢迎语将在客户加为好友后20秒内下发，因网络延迟可能造成发送不成功</span>
+            </div>
+          </el-form-item>
+          <div  v-if="friendWelcomeDialog.friendWelcomeInfo.isDayparting == '1'"  v-for="(item, index) in friendWelcomeDialog.friendWelcomeInfo.daypartingItemlist"    :key="index" >
+            <el-form-item :label="`时段 ${index + 1}：`">
+              <el-row>
+                <el-col style="width: 965px">
+                  <div style="background-color: #fbfbfb;padding: 10px;  border: 1px solid #e6e6e6; margin-bottom: 20px;">
+                    <el-form ref="friendWelcomeItemForm" :disabled="true" :model="item">
+                      <div style="display: flex; gap: 10px;">
+                        <el-form-item label="发起时间:" prop="week" style="flex: 8;">
+                          <el-select v-model="item.week" remote multiple placeholder="请选择" filterable style="width: 580px">
+                            <el-option
+                              v-for="dict in weekOptions"
+                              :key="dict.value"
+                              :label="dict.label"
+                              :value="dict.value">
+                            </el-option>
+                          </el-select>
+                        </el-form-item>
+                        <el-form-item prop="startTime" style="flex: 1;">
+                          <el-time-select style="width: 120px;"
+                                          placeholder="起始时间"
+                                          v-model="item.startTime"
+                                          :picker-options="{
+                                            start: '00:00',
+                                            step: '00:15',
+                                            end: '24:00'
+                                          }">
+                          </el-time-select>
+                        </el-form-item>
+                        <el-form-item prop="endTime" style="flex: 1;">
+                          <el-time-select style="width: 120px;"
+                                          placeholder="结束时间"
+                                          v-model="item.endTime"
+                                          :picker-options="{
+                                            start: '00:00',
+                                            step: '00:15',
+                                            end: '24:00',
+                                            minTime: item.startTime
+                                          }">
+                          </el-time-select>
+                        </el-form-item>
+                      </div>
+
+                      <el-form-item style="margin-top: 20px" prop="welcomeText">
+                        <el-input v-model="item.welcomeText" type="textarea" :rows="12" maxlength="1300" show-word-limit placeholder="请输入消息内容"/>
+                        <!-- 附件和链接列表 -->
+                        <el-row>
+                          <el-col>
+                            <div v-for="(attachment, attachIndex) in item.attachments" :key="attachIndex" style="background-color: #f5f7fa;padding: 5px;border: 1px solid  #d9d9d9;">
+                              <div slot="header" style="  display: flex;justify-content: space-between;align-items: center; ">
+                                <div style="flex: 1;">
+                                  <span v-if="attachment.msgtype === 'image'">【图片】: {{ attachment.image.pic_url }}</span>
+                                  <span v-if="attachment.msgtype === 'video'">【视频】: {{ attachment.video.url }}</span>
+                                  <span v-if="attachment.msgtype === 'link'">【链接】: {{ attachment.link.title }}-{{attachment.link.desc}}</span>
+                                  <span v-if="attachment.msgtype === 'miniprogram'">【小程序】: {{ attachment.miniprogram.title }}</span>
+                                </div>
+                              </div>
+                            </div>
+                          </el-col>
+                        </el-row>
+                      </el-form-item>
+                    </el-form>
+                  </div>
+                </el-col>
+              </el-row>
+            </el-form-item>
+          </div>
+
+        </el-form>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listFriendWelcome } from '@/api/qw/friendWelcome'
+import { getFriendWelcome, listFriendWelcome } from '@/api/qw/friendWelcome'
 import { allList } from '@/api/company/company'
 import { getMyQwCompanyList, getQwAllUserList } from '@/api/qw/user'
 
@@ -145,18 +318,40 @@ export default {
         updateTime: null,
         isSendMsg: null,
       },
+      userSelectList: [],
+      friendWelcomeDialog: {
+        visible: false,
+        loading: false,
+        title: "详情",
+        friendWelcomeInfo: {},
+      },
+      weekOptions: [
+        { value: 1, label: '星期一' },
+        { value: 2, label: '星期二' },
+        { value: 3, label: '星期三' },
+        { value: 4, label: '星期四' },
+        { value: 5, label: '星期五' },
+        { value: 6, label: '星期六' },
+        { value: 7, label: '星期天' }
+      ],
     }
   },
-  created() {
+  async created() {
     this.getDicts("sys_qw_allow_select").then(response => {
       this.allowSelectOptions = response.data;
     });
-    allList().then(response => {
-      this.companyList = response.rows;
-    });
-    getMyQwCompanyList().then(response => {
-      this.myQwCompanyList = response.data;
-    });
+    const [allRes, myRes] = await Promise.all([
+      allList(),
+      getMyQwCompanyList()
+    ]);
+
+    this.companyList = allRes.rows;
+    this.myQwCompanyList = myRes.data;
+
+    this.queryParams.companyId = this.companyList[0].dictValue
+    this.queryParams.corpId = this.myQwCompanyList[0].dictValue
+
+    this.changeCorpOrCompany()
     this.getList();
   },
   methods: {
@@ -167,6 +362,10 @@ export default {
     resetQuery() {
       this.resetForm("queryForm");
       this.companyUserList = []
+
+      this.queryParams.companyId = this.companyList[0].dictValue
+      this.queryParams.corpId = this.myQwCompanyList[0].dictValue
+      this.changeCorpOrCompany()
       this.handleQuery();
     },
     getList() {
@@ -187,7 +386,45 @@ export default {
           this.companyUserList = response.data;
         });
       }
-    }
+    },
+    handleDetail(row) {
+      getFriendWelcome(row.id).then(response => {
+        let data = response.row
+
+        const params = {
+          companyId: data.companyId,
+          corpId: data.corpId
+        }
+        getQwAllUserList(params).then(res => {
+          this.userSelectList = res.data.filter(item => {
+            return data.qwUserIds.includes(item.id)
+          })
+        })
+
+        // 转换 attachments
+        if (typeof data.attachments === 'string') {
+          data.attachments = JSON.parse(data.attachments);
+        }
+
+        // 转换 daypartingItemlist
+        if (typeof data.daypartingItemlist === 'string') {
+          data.daypartingItemlist = JSON.parse(data.daypartingItemlist);
+        }
+
+        // 转换 daypartingItemlist 中的每个项目的 attachments 和 week
+        if (Array.isArray(data.daypartingItemlist)) {
+          data.daypartingItemlist = data.daypartingItemlist.map(item => {
+            return {
+              ...item,
+              attachments: typeof item.attachments === 'string' ? JSON.parse(item.attachments) : item.attachments,
+              week: typeof item.week === 'string' ? JSON.parse(item.week) : item.week
+            };
+          });
+        }
+        this.friendWelcomeDialog.friendWelcomeInfo = data
+        this.friendWelcomeDialog.visible = true
+      })
+    },
   },
 }
 </script>