From 83171370685f620f0d30020ef567b0a6749a887c Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 15 Jul 2022 10:40:02 +0800
Subject: [PATCH] 1

---
 .../apps/Announce/AppAnnounce/AppAnnounce.vue |   5 +
 .../Announce/AppAnnounce/components/Add.vue   |   4 +-
 .../AppAnnounce/components/Detail.vue         | 495 +++++++++++++-----
 .../Announce/AppAnnounce/components/List.vue  |  21 +-
 4 files changed, 381 insertions(+), 144 deletions(-)

diff --git a/project/sass/apps/Announce/AppAnnounce/AppAnnounce.vue b/project/sass/apps/Announce/AppAnnounce/AppAnnounce.vue
index aef4e713..0019b70e 100644
--- a/project/sass/apps/Announce/AppAnnounce/AppAnnounce.vue
+++ b/project/sass/apps/Announce/AppAnnounce/AppAnnounce.vue
@@ -45,6 +45,11 @@
           this.params = data.params
         }
 
+        if (data.type === 'Detail') {
+          this.component = 'Detail'
+          this.params = data.params
+        }
+
         if (data.type === 'list') {
           this.component = 'List'
           this.params = data.params
diff --git a/project/sass/apps/Announce/AppAnnounce/components/Add.vue b/project/sass/apps/Announce/AppAnnounce/components/Add.vue
index e587b0fc..e5b13b0f 100644
--- a/project/sass/apps/Announce/AppAnnounce/components/Add.vue
+++ b/project/sass/apps/Announce/AppAnnounce/components/Add.vue
@@ -1,5 +1,5 @@
 <template>
-  <ai-detail class="AppAnnounceDetail">
+  <ai-detail class="AppAnnounceAdd">
     <template slot="title">
       <ai-title :title="id ? '编辑居民群发' : '添加居民群发'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
       </ai-title>
@@ -263,7 +263,7 @@
     }
   }
 
-  .AppAnnounceDetail {
+  .AppAnnounceAdd {
     .ai-detail__content {
       .ai-detail__content--wrapper {
         position: relative;
diff --git a/project/sass/apps/Announce/AppAnnounce/components/Detail.vue b/project/sass/apps/Announce/AppAnnounce/components/Detail.vue
index af3d4758..069ca474 100644
--- a/project/sass/apps/Announce/AppAnnounce/components/Detail.vue
+++ b/project/sass/apps/Announce/AppAnnounce/components/Detail.vue
@@ -1,66 +1,181 @@
 <template>
-  <ai-detail>
+  <ai-detail class="AppAnnounceDetail">
     <template slot="title">
-      <ai-title :title="id ? '编辑成员' : '添加成员'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
+      <ai-title title="群发详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
       </ai-title>
     </template>
     <template slot="content">
-      <el-form ref="form" :model="form" label-width="110px" label-position="right">
-      <ai-card title="个人信息">
+      <ai-card title="基础信息">
+        <template #right>
+          <div class="right-tips">
+            <el-tooltip
+              placement="top"
+              content="任务开始后，3天内15分钟更新1次，3天后访问页面时触发更新，1时间最多刷新1次">
+              <i class="iconfont iconDetails"></i>
+            </el-tooltip>
+            <span>数据更新于2022-07-06 09:23</span>
+          </div>
+        </template>
         <template #content>
-          <div class="ai-form">
-            <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
-              <el-input size="small" placeholder="请输入姓名" v-model="form.name"></el-input>
-            </el-form-item>
-            <el-form-item label="账号" prop="id" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
-              <el-input size="small" :disabled="!!id" placeholder="成员唯一标识，设定以后不支持修改" v-model="form.id"></el-input>
-            </el-form-item>
-            <el-form-item label="手机号" prop="mobile" :rules="[{ required: true, validator: validatorPhone, trigger: 'blur' }]">
-              <el-input size="small" placeholder="请输入手机号" v-model="form.mobile"></el-input>
-            </el-form-item>
-            <el-form-item label="性别" prop="gender">
-              <el-radio-group v-model="form.gender">
-                <el-radio label="1">男</el-radio>
-                <el-radio label="2">女</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="座机" prop="telephone">
-              <el-input size="small" placeholder="请输入座机" v-model="form.telephone"></el-input>
-            </el-form-item>
-            <el-form-item label="邮箱" prop="email">
-              <el-input size="small" placeholder="请输入邮箱" v-model="form.email"></el-input>
-            </el-form-item>
-            <el-form-item label="地址" style="width: 100%;" prop="address">
-              <el-input size="small" style="width: 100%;" placeholder="请输入地址" v-model="form.address"></el-input>
-            </el-form-item>
+          <ai-wrapper>
+            <ai-info-item label="任务名称" isLine value="群发的任务名称群发的任务名称群发的任务名称群发的任务名称"></ai-info-item>
+            <ai-info-item label="任务状态" isLine>
+              <span>进行中</span>
+            </ai-info-item>
+            <ai-info-item label="创建人">
+              <div class="user">
+                <img src="https://cdn.cunwuyun.cn/dvcp/announce/user.png" />
+                <span>陈沐</span>
+              </div>
+            </ai-info-item>
+            <ai-info-item label="审批人">
+              <div class="user">
+                <img src="https://cdn.cunwuyun.cn/dvcp/announce/user.png" />
+                <span>陈沐</span>
+              </div>
+            </ai-info-item>
+            <ai-info-item label="创建时间" value="2021-05-12 18:00"></ai-info-item>
+            <ai-info-item label="群发时间" value="2021-05-12 18:00"></ai-info-item>
+            <ai-info-item label="群发范围" isLine>
+              <div>
+                <span>按条件筛选的</span>
+                <i>222</i>
+                <span>个客户群</span>
+                <em>详情</em>
+              </div>
+            </ai-info-item>
+            <ai-info-item label="消息内容" isLine>
+              <div class="msg">
+                <p>样眼专系要反决十听社养天车度命部对思工美议不想率化和想由然同油能务养也只也布我情点教包江经面队号都今先把层变水口较到个是族连界...</p>
+                <div class="msg-bottom">
+                  <div class="left">
+                    <img src="https://cdn.cunwuyun.cn/dvcp/announce/img.png" />
+                    <span>图片附件235325346.jpg 等</span>
+                    <i>3</i>
+                    <span>个附近</span>
+                  </div>
+                  <div class="right">预览消息</div>
+                </div>
+              </div>
+            </ai-info-item>
+          </ai-wrapper>
+        </template>
+      </ai-card>
+      <ai-card>
+        <template #title>
+          <div class="AppAnnounceDetail-title">
+            <span :class="[currIndex === 0 ? 'active' : '']" @click="currIndex = 0">成员统计</span>
+            <span :class="[currIndex === 1 ? 'active' : '']" @click="currIndex = 1">居民群统计</span>
+          </div>
+        </template>
+        <template #content>
+          <div class="content-item" v-if="currIndex === 0">
+            <div class="top">
+              <div class="top-item">
+                <div class="top-item__title">
+                  <h3>计划执行成员</h3>
+                </div>
+                <p>3,324</p>
+              </div>
+              <div class="top-item">
+                <div class="top-item__title">
+                  <h3>未执行成员</h3>
+                </div>
+                <p>3,324</p>
+              </div>
+              <div class="top-item">
+                <div class="top-item__title">
+                  <h3>已执行成员</h3>
+                </div>
+                <p>3,324</p>
+              </div>
+              <div class="top-item">
+                <div class="top-item__title">
+                  <h3>无法执行成员</h3>
+                  <el-tooltip
+                    placement="top"
+                    content="由于员工不在可见范围、离职、客户群接收已达到上限等原因，无法执行群发任务的成员总数">
+                    <i class="iconfont iconDetails"></i>
+                  </el-tooltip>
+                </div>
+                <p>3,324</p>
+              </div>
+            </div>
+            <div class="bottom">
+              <div class="bottom-search">
+                <div class="left">
+                  <el-radio-group v-model="radio1" size="small">
+                    <el-radio-button size="small" label="未执行"></el-radio-button>
+                    <el-radio-button size="small" label="已执行"></el-radio-button>
+                    <el-radio-button size="small" label="无法执行"></el-radio-button>
+                  </el-radio-group>
+                </div>
+                <el-button type="primary">提醒成员发送</el-button>
+              </div>
+              <ai-table
+                :tableData="tableData"
+                :col-configs="colConfigs"
+                :total="total"
+                border
+                tableSize="small"
+                :current.sync="search.current"
+                :size.sync="search.size"
+                @getList="getList">
+              </ai-table>
+            </div>
+          </div>
+          <div class="content-item" v-if="currIndex === 1">
+            <div class="top">
+              <div class="top-item">
+                <div class="top-item__title">
+                  <h3>计划送达居民群</h3>
+                </div>
+                <p>3,324</p>
+              </div>
+              <div class="top-item">
+                <div class="top-item__title">
+                  <h3>未送达居民群</h3>
+                </div>
+                <p>3,324</p>
+              </div>
+              <div class="top-item">
+                <div class="top-item__title">
+                  <h3>已送达居民群</h3>
+                </div>
+                <p>3,324</p>
+              </div>
+              <div class="top-item">
+                <div class="top-item__title">
+                  <h3>无法送达居民群</h3>
+                </div>
+                <p>3,324</p>
+              </div>
+            </div>
+            <div class="bottom">
+              <div class="bottom-search">
+                <div class="left">
+                  <el-radio-group v-model="radio1" size="small">
+                    <el-radio-button size="small" label="未执行"></el-radio-button>
+                    <el-radio-button size="small" label="已执行"></el-radio-button>
+                    <el-radio-button size="small" label="无法执行"></el-radio-button>
+                  </el-radio-group>
+                </div>
+                <el-button type="primary">提醒成员发送</el-button>
+              </div>
+              <ai-table
+                :tableData="tableData"
+                :col-configs="colConfigs"
+                :total="total"
+                border
+                tableSize="small"
+                :current.sync="search.current"
+                :size.sync="search.size"
+                @getList="getList">
+              </ai-table>
+            </div>
           </div>
         </template>
       </ai-card>
-      <ai-card title="组织信息">
-        <template #content>
-          <el-form-item label="部门" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
-            <el-input size="small" placeholder="请选择..." disabled v-model="form.departmentName">
-              <ai-user-get slot="append" isStrictly :instance="instance" @change="onChange" v-model="department" isChooseUnit>
-                <el-button type="info">选择</el-button>
-              </ai-user-get>
-            </el-input>
-          </el-form-item>
-          <el-form-item label="标签" style="width: 100%;" prop="tags">
-            <el-select size="small" v-model="form.tagIds" multiple placeholder="请选择标签">
-              <el-option
-                v-for="item in tagsList"
-                :key="item.id"
-                :label="item.tagname"
-                :value="item.id">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="职务" prop="position">
-            <el-input size="small" placeholder="请输入职务" v-model="form.position"></el-input>
-          </el-form-item>
-        </template>
-      </ai-card>
-      </el-form>
     </template>
     <template #footer>
       <el-button @click="cancel">取消</el-button>
@@ -80,52 +195,27 @@
     },
 
     data () {
-      const validatorPhone = function (rule, value, callback) {
-        if (value === '') {
-          callback(new Error('请输入手机号'))
-        } else if (!/^1\d{10}$/.test(value)) {
-          callback(new Error('手机号格式错误'))
-        } else {
-          callback()
-        }
-      }
       return {
-        info: {},
-        department: [],
-        validatorPhone: validatorPhone,
-        form: {
-          position: '',
-          name: '',
-          email: '',
-          telephone: '',
-          gender: '',
-          mobile: '',
-          departmentName: '',
-          departmentIds: [],
-          tagIds: [],
-          id: ''
+        total: 0,
+        radio1: '未执行',
+        search: {
+          current: 1,
+          size: 10
         },
-        id: '',
-        tagsList: []
+        tableData: [],
+        currIndex: 0,
+        colConfigs: [
+          { prop: 'position', label: '任务名称' },
+          { prop: 'mobile', label: '群发类型' },
+          { prop: 'position', label: '创建人' },
+          { prop: 'mobile', label: '群发时间' },
+          { prop: 'position', label: '状态' },
+          { prop: 'mobile', label: '任务完成率' }
+        ]
       }
     },
 
     created () {
-      this.getTags()
-
-      if (this.params && this.params.departmentId && !this.params.id) {
-        this.department = [{
-          id: String(this.params.departmentId),
-          name: this.params.departmentName
-        }]
-        this.form.departmentIds = [this.params.departmentId]
-        this.form.departmentName = this.params.departmentName
-      }
-
-      if (this.params && this.params.id) {
-        this.id = this.params.id
-        this.getInfo(this.params.id)
-      }
     },
 
     methods: {
@@ -133,53 +223,14 @@
         this.instance.post(`/app/wxcp/wxuser/queryDetailById?id=${id}`).then(res => {
           if (res.code === 0) {
             this.form = {
-              ...res.data,
-              departmentName: res.data.departmentNames,
-              tagIds: res.data.tags.map(v => v.id),
-              departmentIds: res.data.departmentIdsStr.split(',')
+              ...res.data
             }
           }
         })
       },
 
-      onChange (e) {
-        if (e.length) {
-          this.form.departmentIds = e.map(v => v.id)
-          this.form.departmentName = e.map(v => v.name).join(',')
-        } else {
-          this.form.departmentIds = ''
-          this.form.departmentName = ''
-        }
-      },
+      getList () {
 
-      getTags () {
-        this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => {
-          if (res.code == 0) {
-            this.tagsList = res.data
-          }
-        })
-      },
-
-      onClose () {
-        this.form.explain = ''
-      },
-
-      confirm () {
-        this.$refs.form.validate((valid) => {
-          if (valid) {
-            const api = this.id ? '/app/wxcp/wxuser/update' : '/app/wxcp/wxuser/add'
-            this.instance.post(api, {
-              ...this.form
-            }).then(res => {
-              if (res.code == 0) {
-                this.$message.success('提交成功')
-                setTimeout(() => {
-                  this.cancel(true)
-                }, 600)
-              }
-            })
-          }
-        })
       },
 
       cancel (isRefresh) {
@@ -193,4 +244,178 @@
 </script>
 
 <style scoped lang="scss">
+  .AppAnnounceDetail {
+    .user {
+      display: flex;
+      align-items: center;
+      line-height: 1;
+
+      img {
+        width: 16px;
+        height: 16px;
+        margin-right: 2px;
+      }
+
+      span {
+        position: relative;
+        top: 2px;
+        color: #222222;
+        font-size: 12px;
+      }
+    }
+
+    .msg {
+      background: #F9F9F9;
+      border-radius: 2px;
+      border: 1px solid #D0D4DC;
+
+      p {
+        line-height: 1.3;
+        padding: 8px 12px;
+        border-bottom: 1px solid #D0D4DC;
+      }
+
+      .msg-bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 38px;
+        padding: 0 16px;
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          img {
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+          }
+
+          span {
+            color: #222222;
+            font-size: 14px;
+          }
+
+          i {
+            color: #2266FF;
+            font-size: 14px;
+            font-style: normal;
+          }
+        }
+
+        .right {
+          color: #2266FF;
+          font-size: 12px;
+          cursor: pointer;
+
+          &:hover {
+            opacity: 0.6;
+          }
+        }
+      }
+    }
+
+    ::v-deep .AppAnnounceDetail-title {
+      display: flex;
+      align-items: center;
+
+      span {
+        height: 100%;
+        line-height: 56px;
+        margin-right: 32px;
+        color: #888888;
+        font-size: 16px;
+        font-weight: 600;
+        transition: all ease 0.3s;
+        border-bottom: 3px solid transparent;
+        cursor: pointer;
+        user-select: none;
+
+        &:hover {
+          color: #222;
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        &.active {
+          color: #222222;
+          border-bottom: 3px solid #2266FF;
+        }
+      }
+    }
+
+    .content-item {
+      .top {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .top-item {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          flex: 1;
+          height: 90px;
+          margin-right: 16px;
+          padding: 0 16px;
+          background: #F9F9F9;
+          border-radius: 2px;
+
+          &:last-child {
+            margin-right: 0;
+          }
+
+          .top-item__title {
+            display: flex;
+            align-items: center;
+            margin-bottom: 8px;
+
+            i {
+              margin-left: 4px;
+              color: #8899bb;
+              font-size: 16px;
+            }
+          }
+
+          h3 {
+            color: #222222;
+            font-size: 14px;
+            font-weight: 700;
+          }
+
+          p {
+            color: #2266FF;
+            font-size: 24px;
+            font-weight: 700;
+          }
+        }
+      }
+
+      .bottom-search {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 16px;
+      }
+    }
+
+    ::v-deep .right-tips {
+      display: flex;
+      align-items: center;
+
+      i {
+        margin-right: 4px;
+        color: #8899bb;
+        font-size: 16px;
+      }
+
+      span {
+        color: #888888;
+        font-size: 12px;
+      }
+    }
+  }
 </style>
diff --git a/project/sass/apps/Announce/AppAnnounce/components/List.vue b/project/sass/apps/Announce/AppAnnounce/components/List.vue
index b865315f..962bec08 100644
--- a/project/sass/apps/Announce/AppAnnounce/components/List.vue
+++ b/project/sass/apps/Announce/AppAnnounce/components/List.vue
@@ -56,12 +56,12 @@
             <ai-open-data style="height: 20px" type="userName" :openid="row.name"/>
           </template>
         </el-table-column>
-        <el-table-column slot="options" width="120px" fixed="right" label="操作" align="center">
+        <el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
           <template slot-scope="{ row }">
             <div class="table-options">
-              <el-button type="text" @click="toAdd(row.id)" v-show="tabIndex === 0">编辑</el-button>
-              <el-button type="text" @click="remove(row.id)" v-show="tabIndex === 0">删除</el-button>
-              <el-button type="text" @click="removeTags(row.id)" v-show="tabIndex === 1">移除</el-button>
+              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
+              <el-button type="text" @click="toDetail(row.id)">详情</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
             </div>
           </template>
         </el-table-column>
@@ -164,9 +164,16 @@ export default {
       this.$emit('change', {
         type: 'Add',
         params: {
-          id: id || '',
-          departmentId: this.search.departmentId || '',
-          departmentName: this.departmentName || ''
+          id
+        }
+      })
+    },
+
+    toDetail (id) {
+      this.$emit('change', {
+        type: 'Detail',
+        params: {
+          id
         }
       })
     }