dvcp_v2_webapp/packages/wxwork/AnnounceWeChat/AppAnnounceWeChat/components/Add.vue

<template>
  <ai-detail class="AppAnnounceAdd">
    <template slot="title">
      <ai-title :title="id ? '编辑群发朋友圈' : '添加群发朋友圈'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
      </ai-title>
    </template>
    <template slot="content">
      <div class="AppAnnounceDetail-container">
        <el-form ref="form" class="left" :model="form" label-width="110px" label-position="right">
          <ai-card title="基本信息">
            <template #content>
              <div class="ai-form">
                <el-form-item label="任务名称" prop="taskTitle" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
                  <el-input size="small" placeholder="请输入任务名称" v-model="form.taskTitle" :maxlength="15" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="发送范围" style="width: 100%;" prop="sendScope" :rules="[{ required: true, message: '请选择发送范围', trigger: 'change' }]">
                  <el-radio-group v-model="form.sendScope" @input="onScopeChange">
                    <el-radio label="0">全部居民群</el-radio>
                    <el-radio label="1">按部门选择</el-radio>
                    <el-radio label="2">按网格选择</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="发送成员" v-if="form.sendScope !== '0'" prop="wxGroupsName" style="width: 100%;" :rules="[{ required: true, message: '请选择发送居民', trigger: 'change' }]">
                  <ai-picker
                    :instance="instance"
                    multiple
                    :dialogTitle="form.sendScope === '2' ? '选择网格' : '选择部门'"
                    :ops="{label: form.sendScope === '2' ? 'girdName' : 'name'}"
                    :pageTitle="form.sendScope === '2' ? '网格' : '部门'"
                    :action="form.sendScope === '1' ? '/app/wxcp/wxdepartment/departList' : '/app/appgirdinfo/girdList'"
                    v-model="form.filterCriteria"
                    @pick="onPick"
                    @change="onSelcetChange">
                    <div class="AppAnnounceDetail-select">
                      <el-input size="small" class="AppAnnounceDetail-select__input" placeholder="请选择..." disabled v-model="form.wxGroupsName"></el-input>
                      <div class="select-left" v-if="form.executorList.length">
                        <span v-for="(item, index) in form.executorList" :key="index" v-if="index < 9">{{ item.executorName }}</span>
                        <em v-if="form.executorList.length > 9">等{{ form.executorList.length }}个</em>
                      </div>
                      <i v-if="!form.executorList.length">请选择</i>
                      <div class="select-right">{{ form.filterCriteria.length ? '重新选择' : '选择' }}</div>
                    </div>
                  </ai-picker>
                  <div class="filter-item">
                    <label>居民标签</label>
                    <div class="AppAnnounceDetail-select" @click="isShowTags = true">
                      <el-input class="AppAnnounceDetail-select__input" size="small" placeholder="请选择..." v-model="form.filterTagsName"></el-input>
                      <div class="select-left" v-if="form.filterTags.length">
                        <span v-for="(item, index) in form.filterTags" :key="index">{{ item.name }}</span>
                      </div>
                      <i v-if="!form.filterTags.length">请选择</i>
                      <div class="select-right">{{ form.filterTags.length ? '重新选择' : '选择' }}</div>
                    </div>
                  </div>
                  <div class="tips">
                    <p>消息预计可见居民数：</p>
                    <span>{{ groupLen }}</span>
                    <el-tooltip
                        placement="top"
                        content="将由指定人员发送给TA添加的且符合所有筛选条件的居民，当多个人员添加同一个居民时，该居民只可看见第1个完成发表的人员的朋友圈">
                      <i class="iconfont iconModal_Warning"></i>
                    </el-tooltip>
                  </div>
                </el-form-item>
                <el-form-item label="发送内容" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入发送内容', trigger: 'blur' }]">
                  <el-input size="small" type="textarea" :rows="6" maxlength="1300" show-word-limit placeholder="请输入文本内容..." v-model="form.content"></el-input>
                  <div class="add">
                    <div class="fileList" v-if="fileList.length">
                      <div class="add-item" v-for="(item, index) in fileList" :key="index">
                        <div class="left">
                          <img :src="mapIcon(item.msgType)"/>
                          <span>{{ item.mpTitle || item.name || item.linkTitle }}</span>
                        </div>
                        <i @click="removeFile(index)">删除</i>
                      </div>
                    </div>
                    <el-popover
                      placement="top"
                      width="200"
                      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">
                        <el-upload
                          ref="upload"
                          multiple
                          :file-list="fileList"
                          :show-file-list="false"
                          :before-upload="v => handleChange(v, 10, '.jpg,.png,.jpeg')"
                          :limit="9"
                          action="/app/wxcp/upload/uploadFile"
                          accept=".jpg,.png,.jpeg"
                          :on-exceed="onExceed"
                          :http-request="v => submitUpload(v, '1')">
                          <div class="content-item" trigger>
                            <img src="https://cdn.cunwuyun.cn/dvcp/announce/big-img.png"/>
                            <p>图片</p>
                          </div>
                        </el-upload>
                        <el-upload
                          ref="upload"
                          multiple
                          :file-list="fileList"
                          :show-file-list="false"
                          :before-upload="v => handleChange(v, 10, '.mp4')"
                          :limit="9"
                          action="/app/wxcp/upload/uploadFile"
                          accept=".mp4"
                          :on-exceed="onExceed"
                          :http-request="v => submitUpload(v, '2')">
                          <div class="content-item" trigger>
                            <img src="https://cdn.cunwuyun.cn/dvcp/announce/big-video.png"/>
                            <p>视频</p>
                          </div>
                        </el-upload>
                        <div class="content-item" @click="isShowAddLink = true">
                          <img src="https://cdn.cunwuyun.cn/dvcp/announce/site.png"/>
                          <p>网页</p>
                        </div>
                      </div>
                    </el-popover>
                    <!-- <div class="add-material add-item" @click="$refs.ChooseMaterial.open()">
                      <img src="https://cdn.cunwuyun.cn/dvcp/announce/add.png"/>
                      <span style="color: #2266FF; font-size: 12px;">从素材库选择</span>
                    </div> -->
                  </div>
                  <div class="tips">
                    <em>从本地上传，图片最大支持10MB，支持JPG,PNG格式；视频最大支持10MB，支持MP4格式；文件最大支持20MB</em>
                  </div>
                </el-form-item>
                <el-form-item label="任务结束时间" style="width: 100%;" prop="taskEndTime" :rules="[{ required: true, message: '请选择任务结束时间', trigger: 'change' }]">
                  <el-date-picker
                    style="width: 100%;"
                    v-model="form.taskEndTime"
                    type="datetime"
                    size="small"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择任务结束时间">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="宣发审批" prop="enableExamine" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
                  <el-switch
                    v-model="form.enableExamine"
                    active-value="1"
                    inactive-value="0"
                    active-text="开启后，创建的群发任务需要审批人进行审批">
                  </el-switch>
                </el-form-item>
                <el-form-item v-if="form.enableExamine === '1'" label="审批人员" prop="examines" style="width: 100%;" :rules="[{ required: true, message: '请选择审批人员', trigger: 'change' }]">
                  <ai-user-selecter :instance="instance" v-model="form.examines" @change="onUserChange">
                    <div class="AppAnnounceDetail-select">
                      <el-input class="AppAnnounceDetail-select__input" size="small" placeholder="请选择..." v-model="form.examinesName"></el-input>
                      <div class="select-left" v-if="form.examines.length">
                        <span v-for="(item, index) in form.examines" :key="index">{{ item.name }}</span>
                      </div>
                      <i v-if="!form.examines.length">请选择</i>
                        <div class="select-right">{{ form.examines.length ? '重新选择' : '选择' }}</div>
                    </div>
                  </ai-user-selecter>
                </el-form-item>``
              </div>
            </template>
          </ai-card>
        </el-form>
        <div class="right">
          <Phone :avatar="user.info.avatar" @close="isShowPhone = false" :isShowClose="false" :content="form.content" :fileList="fileList"></Phone>
        </div>
        <ai-dialog
          :visible.sync="isShowAddLink"
          width="920px"
          title="链接消息"
          @close="onClose"
          @onConfirm="onLinkConfirm">
          <el-form ref="linkForm" :model="linkForm" label-width="110px" label-position="right">
            <div class="ai-form">
              <el-form-item label="标题" style="width: 100%;" prop="linkTitle" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
                <el-input
                  size="small"
                  placeholder="请输入标题"
                  maxlength="42"
                  show-word-limit
                  v-model="linkForm.linkTitle">
                </el-input>
              </el-form-item>
              <el-form-item label="链接" style="width: 100%;" prop="linkUrl" :rules="[{ required: true, message: '请输入链接', trigger: 'blur' }]">
                <el-input
                  size="small"
                  placeholder="请输入链接"
                  maxlength="682"
                  show-word-limit
                  v-model="linkForm.linkUrl">
                </el-input>
              </el-form-item>
              <el-form-item label="描述" style="width: 100%;" prop="linkDesc">
                <el-input
                  size="small"
                  placeholder="请输入描述"
                  maxlength="170"
                  show-word-limit
                  v-model="linkForm.linkDesc">
                </el-input>
              </el-form-item>
              <el-form-item label="封面图" prop="linkPicUrl" style="width: 100%;">
                <ai-uploader :instance="instance" v-model="linkForm.linkPicUrl" :limit="1"></ai-uploader>
              </el-form-item>
            </div>
          </el-form>
        </ai-dialog>
        <ai-dialog
          :visible.sync="isShowDate"
          width="590px"
          title="定时发送"
          customFooter>
          <el-form ref="dateForm" :model="dateForm" label-width="130px" label-position="right">
            <div class="ai-form">
              <el-form-item label="定时发送时间" style="width: 100%;" prop="choiceTime" :rules="[{ required: true, message: '请选择定时发送时间', trigger: 'change' }]">
                <el-date-picker
                  style="width: 100%;"
                  v-model="dateForm.choiceTime"
                  type="datetime"
                  size="small"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="请选择定时发送时间">
                </el-date-picker>
              </el-form-item>
            </div>
          </el-form>
          <div class="dialog-footer" slot="footer">
            <el-button @click="onClose">取消</el-button>
            <el-button @click="onDateForm" type="primary" :loading="isLoading2" style="width: 92px;">确认</el-button>
          </div>
        </ai-dialog>
        <ai-dialog
          :visible.sync="isShowTags"
          width="800px"
          title="选择标签"
          @close="onClose"
          @onConfirm="onTagsConfirm">
          <div class="tags">
            <div class="tag-item" v-for="(item, index) in tags" :key="index">
              <h2>{{ item.name }}</h2>
              <div class="tag-item__right">
                <el-button
                  :type="chooseTags.map(v => v.id).indexOf(item.id) === -1 ? '' : 'primary'"
                  v-for="(item, index) in item.tagList"
                  @click="choose(item)"
                  :key="index">
                  {{ item.name }}
                </el-button>
              </div>
            </div>
          </div>
        </ai-dialog>
        <!-- <ChooseMaterial ref="ChooseMaterial" :instance="instance" @change="onChooseChange"></ChooseMaterial> -->
      </div>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm(0)" :loading="isLoading1" style="width: 120px;">通知成员发送</el-button>
      <el-button type="primary" @click="confirm(1)">定时发送</el-button>
    </template>
  </ai-detail>
</template>

<script>
import Phone from './Phone'
import ChooseMaterial from './ChooseMaterial.vue'
import {mapActions, mapState} from 'vuex'

export default {
  name: 'Add',

  props: {
    instance: Function,
    dict: Object,
    params: Object
  },

  components: {
    Phone,
    ChooseMaterial
  },

  data() {
    return {
      info: {},
      department: [],
      isLoading1: false,
      isLoading2: false,
      isShowTags: false,
      fileList: [],
      isShowAddLink: false,
      isShowAddMiniapp: false,
      isShowDate: false,
      isLoading: false,
      linkForm: {
        linkPicUrl: [],
        linkDesc: '',
        linkTitle: '',
        linkUrl: ''
      },
      dateForm: {
        choiceTime: ''
      },
      form: {
        content: '',
        choiceTime: '',
        contents: [],
        enableExamine: '0',
        examines: [],
        executorList: [],
        wxGroupsName: '',
        sendScope: '0',
        sendType: 0,
        taskEndTime: '',
        name: '',
        filterTags: [],
        filterTagsName: '',
        filterCriteria: [],
        taskTitle: '',
        examinesName: ''
      },
      girdNames: '',
      id: '',
      tagsList: [],
      tags: [],
      chooseTags: [],
      pickerOptions: {
        disabledDate: e => {
          return e.getTime() < (Date.now() - 60 * 1000 * 60 * 24)
        }
      }
    }
  },

  computed: {
    ...mapState(['user']),

    groupLen() {
      return this.form.executorList.map(v => v.customerCount).reduce((prev, cur) => {
        return prev + cur
      }, 0)
    }
  },

  created() {
    if (this.params && this.params.id) {
      this.id = this.params.id
      this.getInfo(this.params.id)
    } else {
      this.getWxGroups()
    }

    this.getTags()
  },

  methods: {
    ...mapActions(['initOpenData', 'transCanvas']),

    onChooseChange (e) {
      this.form.content = e.filter(v => v.msgType === '0').map(v => v.content).join(' ') || this.form.content

      this.fileList = this.fileList.concat(e.filter(v => v.msgType !== '0'))
    },

    choose (e) {
      const index = this.chooseTags.map(v => v.id).indexOf(e.id)
      if (index === -1) {
        this.chooseTags.push(e)
      } else {
        this.chooseTags.splice(index, 1)
      }
    },

    getTags () {
      this.instance.post(`/app/wxcp/wxcorptag/listAll?size=100`).then(res => {
        if (res.code == 0) {
          this.tags = res.data.records
        }
      })
    },

    onTagsConfirm () {
      this.form.filterTagsName = this.chooseTags.map(v => v.name).join(',')
      this.form.filterTags = [...this.chooseTags]
      this.getWxGroups()

      this.isShowTags = false
    },

    getInfo(id) {
      this.instance.post(`/app/whchatmomentstask/queryDetailById?id=${id}`).then(res => {
        if (res.code === 0) {
          this.form = {
            ...this.form,
            ...res.data,
            filterTags: res.data.filterTags ? res.data.filterTags.split(',') : [],
            filterCriteria: res.data.filterCriteria.split(',')
          }

          if (res.data.girdNames) {
            this.girdNames = res.data.girdNames.split(',')
          }

          this.dateForm.choiceTime = ''

          if (res.data.examines && res.data.examines.length) {
            this.form.examines = res.data.examines.map(v => {
              return {
                ...v,
                wxOpenUserId: v.examineUserId,
                id: v.examineUserId,
                name: v.examineUserName
              }
            })
            this.form.examinesName = '1'
          }


          const content = res.data.contents.filter(v => v.msgType === '0')

          if (content.length) {
            this.$set(this.form, 'content', content[0].content)
          }

          this.fileList = res.data.contents.filter(v => v.msgType !== '0').map(v => {
            return {
              ...v,
              ...v.sysFile
            }
          })
        }
      })
    },

    onUserChange(e) {
      if (e.length) {
        this.form.examinesName = '1'
      } else {
        this.form.examinesName = ''
      }
    },

    onScopeChange(e) {
      this.form.filterCriteria = []
      this.form.executorList = []
      this.girdNames = ''

      if (e === '0') {
        this.getWxGroups()
      } else {
        this.form.filterCriteria = []
      }
    },

    onPick(e) {
      if (this.form.sendScope === '2' && e.length) {
        this.girdNames = e.map(v => v.girdName)
      }
    },

    onSelcetChange(e) {
      if (e.length) {
        this.form.wxGroupsName = '1'

        this.$nextTick(() => {
          this.getWxGroups()
        })
      } else {
        this.form.wxGroupsName = ''
        this.form.executorList = []
      }
    },

    getWxGroups() {
      this.instance.post(`/app/whchatmomentstask/getSendScope`, {
        sendScope: this.form.sendScope,
        tags: this.form.filterTags.map(v => v.id).join(','),
        filterCriteria: this.form.filterCriteria.join(','),
        taskType: 0
      }).then(res => {
        if (res.code === 0) {
          this.form.executorList = res.data
        }
      })
    },

    onLinkConfirm() {
      this.$refs.linkForm.validate((valid) => {
        if (valid) {
          if (this.fileList.length) {
            this.$message.error('最多支持9张图片，或1个视频，或1个链接')
            return false
          }

          this.fileList.push({
            ...this.linkForm,
            linkPicUrl: this.linkForm.linkPicUrl.length ? this.linkForm.linkPicUrl[0].url : '',
            msgType: '4'
          })

          this.isShowAddLink = false
        }
      })
    },

    onClose() {
      this.linkForm.linkPicUrl = []
      this.linkForm.linkDesc = ''
      this.linkForm.linkTitle = ''
      this.linkForm.linkUrl = ''
      this.dateForm.choiceTime = ''

      this.isShowDate = false
    },

    removeFile(index) {
      this.fileList.splice(index, 1)
    },

    mapIcon(type) {
      return {
        1: 'https://cdn.cunwuyun.cn/dvcp/announce/img.png',
        2: 'https://cdn.cunwuyun.cn/dvcp/announce/video.png',
        3: 'https://cdn.cunwuyun.cn/dvcp/announce/folder.png',
        4: 'https://cdn.cunwuyun.cn/dvcp/announce/site.png',
        5: 'https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png'
      }[type]
    },

    onBeforeUpload(event) {
      return this.onOverSize(event)
    },

    getExtension(name) {
      return name.substring(name.lastIndexOf('.'))
    },

    handleChange(e, size, accept) {
      if (accept === '.mp4' && this.fileList.length) {
        this.$message.error('最多支持9张图片，或1个视频，或1个链接')
        return false
      }

      if (accept !== '.mp4' && (this.fileList.map(v => v.msgType).indexOf('2') !== -1 || this.fileList.map(v => v.msgType).indexOf('4') !== -1) ) {
        this.$message.error('最多支持9张图片，或1个视频，或1个链接')
        return false
      }

      const isLt10M = e.size / 1024 / 1024 < size
      const suffixName = this.getExtension(e.name)
      const suffixNameList = accept.split(',')

      if (suffixNameList.indexOf(`${suffixName.toLowerCase()}`) === -1) {
        this.$message.error(`不支持该格式`)
        return false
      }

      if (!isLt10M) {
        this.$message.error(`大小不超过${10}MB!`)
        return false
      }

      return true
    },

    onExceed() {
      this.$message.error(`最多上传9个附件`)
    },

    submitUpload(file, type) {
      const fileType = {
        '1': 'image',
        '2': 'video',
        '3': 'file'
      }[type]
      let formData = new FormData()
      formData.append('file', file.file)
      formData.append('attachmentType', 1)
      formData.append('mediaType', fileType)
      let loading = this.$loading()
      this.instance.post(`/app/wxcp/upload/uploadAttachment`, formData, {
        withCredentials: false
      }).then(res => {
        if (res.code == 0) {
          this.fileList.push({
            ...res.data.file,
            media: res.data.media,
            msgType: type,
            sysFileId: res.data.file.id,
            imgPicUrl: res.data.file.url,
            mediaId: res.data.media.mediaId
          })

          this.$message.success('上传成功')
        }
      }).finally(() => loading.close())
    },

    onDateForm() {
      this.$refs.dateForm.validate((valid) => {
        if (valid) {
          if (new Date(this.dateForm.choiceTime).getTime() < Date.now()) {
            return this.$message.error('定时发送时间不得早于当前时间')
          } else {
            this.confirm(1)
          }
        }
      })
    },

    confirm(sendType) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.form.executorList.length) {
            return this.$message.error('居民数量不能为0')
          }

          if (sendType === 1 && !this.dateForm.choiceTime) {
            this.isShowDate = true
            return false
          }

          const contents = [
            {
              content: this.form.content,
              msgType: '0'
            },
            ...this.fileList
          ]

          if (sendType === 0) {
            this.isLoading1 = true
          } else {
            this.isLoading2 = true
          }

          this.instance.post(`/app/whchatmomentstask/addOrUpdate`, {
            ...this.form,
            id: this.params.id,
            executorList: this.form.executorList,
            contents,
            sendType,
            taskType: 0,
            filterTags: this.form.filterTags.map(v => v.id).join(','),
            choiceTime: this.dateForm.choiceTime,
            filterCriteria: this.form.filterCriteria.join(','),
            examines: this.form.examines.length ? this.form.examines.map(v => {
              return {
                ...v,
                examineUserId: v.id,
                examineUserName: v.name
              }
            }) : []
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('提交成功')
              setTimeout(() => {
                this.cancel(true)
              }, 600)
            } else {
              this.isLoading1 = false
              this.isLoading2 = false
            }

          }).catch(() => {
            this.isLoading1 = false
            this.isLoading2 = false
          })
        }
      })
    },

    cancel(isRefresh) {
      this.$emit('change', {
        type: 'List',
        isRefresh: !!isRefresh
      })
    }
  }
}
</script>

<style lang="scss">
.el-tooltip__popper.is-dark {
  max-width: 240px;
}
.tags {
  .tag-item {
    display: flex;
    align-items: center;
    padding-bottom: 30px;
    padding-top: 30px;
    border-bottom: 1px solid #EEEEEE;

    &:first-child {
      padding-top: 0;
    }

    .el-tag {
      margin-right: 8px;
      color: #222222;
    }

    h2 {
      width: 88px;
      margin-right: 40px;
      text-align: right;
      color: #888888;
      font-size: 14px;
    }
  }
}
.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;
    }
  }
}

.AppAnnounceAdd {
  .ai-detail__content {
    .ai-detail__content--wrapper {
      position: relative;
      max-width: 100%;
      margin: 0;
      height: 100%;
      overflow: hidden;
    }
  }
  .filter-item {
    display: flex;
    align-items: center;
    margin-top: 20px;

    .AppAnnounceDetail-select {
      flex: 1;
    }

    label {
      width: 60px;
      margin-right: 20px;
      color: #666;
    }
  }

  .ai-form {
    textarea {
      border-radius: 4px 4px 0 0!important;
    }
  }

  * {
    box-sizing: border-box;
  }

  .add {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 14px 16px;
    background: #F9F9F9;
    border-radius: 0px 0px 4px 4px;
    border: 1px solid #D0D4DC;
    border-top: none;

    .add-material {
      position: absolute;
      bottom: 14px;
      left: 16px;
      transform: translateX(120%);
    }

    .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;
      }
    }

    .fileList {
      margin-bottom: 12px;

      .add-item {
        justify-content: space-between;
        margin-bottom: 8px;

        .left {
          display: flex;
          align-items: center;
        }

        i {
          font-size: 14px;
          cursor: pointer;
          font-style: normal;
          color: red;

          &:hover {
            opacity: 0.6;
          }
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .AppAnnounceDetail-container {
    display: flex;
    position: relative;
    height: 100%;
    padding: 0 20px;
    overflow: auto;
    overflow: overlay;

    .left {
      flex: 1;
      margin-right: 20px;
    }

    .right {
      position: sticky;
      top: 0;
    }

    .AppAnnounceDetail-select {
      display: flex;
      align-items: center;
      min-height: 32px;
      line-height: 1;
      background: #F5F5F5;
      border-radius: 4px;
      border: 1px solid #D0D4DC;
      cursor: pointer;
      overflow: hidden;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

      &:hover {
        border-color: #26f;
      }

      & > i {
        flex: 1;
        height: 100%;
        line-height: 32px;
        padding: 0 12px;
        color: #888888;
        font-size: 14px;
        font-style: normal;
        border-right: 1px solid #D0D4DC;
        background: #fff;
      }

      .AppAnnounceDetail-select__input {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        opacity: 0;
        height: 100%;
      }

      .select-right {
        height: 100%;
        padding: 0 12px;
        color: #222222;
        font-size: 12px;
        cursor: pointer;
        transition: all ease 0.3s;

        &:hover {
          opacity: 0.5;
        }
      }

      .select-left {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        padding: 5px 0 0px 12px;
        border-right: 1px solid #D0D4DC;
        border-radius: 4px 0 0 4px;
        background: #fff;

        em {
          height: 22px;
          line-height: 22px;
          margin: 0 4px 5px 0;
          color: #222222;
          font-size: 12px;
          font-style: normal;
        }

        span {
          height: 22px;
          line-height: 22px;
          margin: 0 4px 5px 0;
          padding: 0 8px;
          font-size: 12px;
          color: #222222;
          background: #F3F4F7;
          border-radius: 2px;
          border: 1px solid #D0D4DC;
        }
      }
    }
  }

  .tips {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #222222;

    span {
      margin: 0 3px;
      color: #2266FF;
    }

    i {
      color: #8899bb;
    }

    em {
      line-height: 20px;
      margin-top: 8px;
      color: #888888;
      font-size: 12px;
      font-style: normal;
    }
  }
}
</style>