dvcp_v2_webapp/project/sass/apps/Announce/AppAnnounce/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="name" style="width: 100%;" :rules="[{ required: true, message: '请输入任务名称', trigger: 'blur' }]">
                  <el-input size="small" placeholder="请输入任务名称" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="发送范围" style="width: 100%;" prop="gender">
                  <el-radio-group v-model="form.gender">
                    <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="选择群主" 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>
        </el-form>
        <div class="right"></div>
      </div>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: 'Add',

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

    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: '',
          status: false
        },
        id: '',
        tagsList: []
      }
    },

    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: {
      getInfo (id) {
        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(',')
            }
          }
        })
      },

      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 = ''
        }
      },

      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) {
        this.$emit('change', {
          type: 'list',
          isRefresh: !!isRefresh
        })
      }
    }
  }
</script>

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

  .AppAnnounceAdd {
    .ai-detail__content {
      .ai-detail__content--wrapper {
        position: relative;
        max-width: 100%;
        margin: 0;
        height: 100%;
        overflow: hidden;
      }
    }

    .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;
      height: 100%;
      padding: 0 20px;
      overflow-y: overlay;

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

      .right {
        position: sticky;
        top: 0;
        width: 400px;
        height: 688px;
        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;
      }
    }
  }
</style>