群发

project/sass/apps/Announce/AppAnnounce/components/Add.vue

@@ -20,12 +20,71 @@
                     <el-radio label="3">按网格选择</el-radio>
                   </el-radio-group>
                 </el-form-item>
+                <el-form-item label="选择群主" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
+                  <el-input size="small" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请选择..." disabled v-model="form.departmentName">
+                    <ai-user-get slot="append" isStrictly :instance="instance" isChooseUnit>
+                      <el-button type="info">选择</el-button>
+                    </ai-user-get>
+                  </el-input>
+                  <div class="tips">
+                    <p>消息预计送达居民群数：</p>
+                    <span>215</span>
+                    <i class="iconfont iconModal_Warning"></i>
+                  </div>
+                </el-form-item>
                 <el-form-item label="消息提醒" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
                   <el-switch
                     v-model="form.status"
                     active-text="开启后，创建的群发任务需要审批人进行审批">
                   </el-switch>
                 </el-form-item>
+                <el-form-item label="审批人员" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
+                  <el-input size="small" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请选择..." disabled v-model="form.departmentName">
+                    <ai-user-get slot="append" isStrictly :instance="instance" isChooseUnit>
+                      <el-button type="info">选择</el-button>
+                    </ai-user-get>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="发送内容" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
+                  <el-input size="small" type="textarea" :rows="6" placeholder="请输入文本内容..." v-model="form.departmentName"></el-input>
+                  <div class="add">
+                    <el-popover
+                      placement="top"
+                      width="340"
+                      offset="0"
+                      trigger="hover">
+                      <div class="add-item" slot="reference" style="width: max-content;">
+                        <img src="https://cdn.cunwuyun.cn/dvcp/announce/add.png" />
+                        <span style="color: #2266FF; font-size: 12px;">添加附件类型</span>
+                      </div>
+                      <div class="AppAnnounceDetail-content-wrapper">
+                        <div class="content-item">
+                          <img src="https://cdn.cunwuyun.cn/dvcp/announce/big-img.png" />
+                          <p>图片</p>
+                        </div>
+                        <div class="content-item">
+                          <img src="https://cdn.cunwuyun.cn/dvcp/announce/big-video.png" />
+                          <p>视频</p>
+                        </div>
+                        <div class="content-item">
+                          <img src="https://cdn.cunwuyun.cn/dvcp/announce/folder.png" />
+                          <p>文件</p>
+                        </div>
+                        <div class="content-item">
+                          <img src="https://cdn.cunwuyun.cn/dvcp/announce/site.png" />
+                          <p>网页</p>
+                        </div>
+                        <div class="content-item">
+                          <img src="https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png" />
+                          <p>小程序</p>
+                        </div>
+                      </div>
+                    </el-popover>
+                  </div>
+                  <div class="tips">
+                    <em>从本地上传，图片最大支持10MB，支持JPG,PNG格式；视频最大支持10MB，支持MP4格式；文件最大支持20MB</em>
+                  </div>
+                </el-form-item>
               </div>
             </template>
           </ai-card>
@@ -164,9 +223,48 @@
   }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
+  .AppAnnounceDetail-content-wrapper {
+    display: flex;
+    align-items: center;
+
+    .content-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      width: 64px;
+      height: 64px;
+      line-height: 1;
+      margin-right: 4px;
+      text-align: center;
+      background: #F9F9F9;
+      border-radius: 2px;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.6;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      img {
+        width: 32px;
+        height: 32px;
+        margin-bottom: 4px;
+      }
+
+      p {
+        color: #222;
+        font-size: 12px;
+      }
+    }
+  }
+
   .AppAnnounceDetail {
-    ::v-deep  .ai-detail__content {
+    .ai-detail__content {
       .ai-detail__content--wrapper {
         position: relative;
         max-width: 100%;
@@ -176,6 +274,38 @@
       }
     }
 
+    .add {
+      display: flex;
+      flex-direction: column;
+      padding: 14px 16px;
+      background: #F9F9F9;
+      border-radius: 0px 0px 2px 2px;
+      border: 1px solid #D0D4DC;
+      border-top: none;
+
+      .add-item {
+        display: flex;
+        align-items: center;
+        line-height: 1;
+        cursor: pointer;
+
+        &:hover {
+          opacity: 0.6;
+        }
+
+        img {
+          width: 20px;
+          height: 20px;
+          margin-right: 2px;
+        }
+
+        span {
+          color: #222;
+          font-size: 14px;
+        }
+      }
+    }
+
     .AppAnnounceDetail-container {
       display: flex;
       position: relative;
@@ -192,8 +322,33 @@
         position: sticky;
         top: 0;
         width: 400px;
-        height: 90%;
+        height: 688px;
-        background: red;
+        background: url(https://cdn.cunwuyun.cn/dvcp/announce/phone.png);
+        background-size: 400px 100%;
+      }
+    }
+
+    .tips {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      color: #222222;
+
+      span {
+        margin: 0 3px;
+        color: #2266FF;
+      }
+
+      i {
+        color: #c0c9db;
+      }
+
+      em {
+        line-height: 20px;
+        margin-top: 8px;
+        color: #888888;
+        font-size: 12px;
+        font-style: normal;
       }
     }
   }