dvcp_v2_webapp/project/sass/apps/AppNotification/components/add.vue

<template>
  <ai-detail>
    <template slot="title">
      <ai-title :title="detail.id ? '编辑公告' : '创建公告'" isShowBack isShowBottomBorder @onBackClick="$parent.goBack"></ai-title>
    </template>
    <template #content>
      <ai-card title="基本信息">
        <template #content>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="公告标题" prop="title">
              <el-input v-model="form.title" size="small" placeholder="请输入" show-word-limit maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="公告内容" prop="content">
              <ai-editor v-model="form.content" :instance="instance"/>
            </el-form-item>
            <el-form-item label="附件">
              <ai-uploader :instance="instance" v-model="form.files" fileType="file" isShowTip></ai-uploader>
            </el-form-item>
            <el-form-item label="发送对象" prop="persons">
              <el-row type="flex" align="middle">
                <div class="text-area" v-if="foo">
                   <ai-open-data type="userName" :openid="item.name" :class="persons.length==1 ? 'point' : ''"  v-for="(item,index) in persons.slice(0,2)" :key="index"></ai-open-data>
                   <span v-if="persons.length">等{{persons.length}}人</span>
                </div>
                <ai-user-get v-model="form.persons" :instance="instance" @change="onChange" sass>
                  <el-button type="info">选择</el-button>
                </ai-user-get>
              </el-row>
            </el-form-item>
            <el-row type="flex">
              <el-form-item label="发送时间" prop="type">
                <el-radio-group v-model="form.type" @change="form.releaseTime = null">
                  <el-radio :label="0">立即发送</el-radio>
                  <el-radio :label="1">定时发送</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="releaseTime" class="picker" v-if="form.type==1">
                <el-date-picker
                  v-model="form.releaseTime"
                  style="margin-left: 10px;"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="small"
                  type="datetime"
                  placeholder="请选择">
                </el-date-picker>
              </el-form-item>
            </el-row>
          </el-form>
        </template>
      </ai-card>
    </template>
    <template #footer>
      <el-button @click="$parent.goBack">取消</el-button>
      <el-button type="primary" @click="confim(0)">保存</el-button>
      <el-button type="primary" @click="confim(1)">发布</el-button>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: "add",
    props: {
      instance: Function,
      dict: Object,
      detail: Object,
    },
    data() {
      return {
        form: {
          id: null,
          title: "",
          content: "",
          files: [],
          persons: [],
          type: 0,
          releaseTime: null,
        },
        persons:[],
        foo:true,
      }
    },
    computed: {
      rules() {
        return {
          title: [
            {required: true, message: '请输入公告标题'},
          ],
          content: [
            {required: true, message: '请输入公告内容'},
          ],
          persons: [
            {required: true, message: '请选择发送对象'},
          ],
          type: [
            {required: true},
          ],
          releaseTime: [
            {required: true, message: '请选择发送时间'},
          ],
        };
      }
    },
    methods: {
      onChange(e){
        this.foo = false;
        this.form.persons = e;
        this.persons = e;
        setTimeout(() => {
          this.foo = true
        },500)
        this.$refs["form"].validateField("persons");
      },
      confim(e) {
        this.$refs["form"].validate(v => {
          if (v) {
            if(this.form.releaseTime && (new Date(this.form.releaseTime).getTime() <= Date.now())){
              return this.$message.error("发送时间要大于当前时间")
            }
            this.instance.post("/app/appannouncement/addOrUpdateWeb", {
              ...this.form,
              status: e
            }).then(res => {
              if (res.code == 0) {
                this.$message.success(e==0?"保存成功":"发布成功");
                this.$parent.goBack();
              }
            })
          }
        })
      },
      getDetail(){
        this.instance.post("/app/appannouncement/detail",null,{
          params:{
            id:this.detail.id
          }
        }).then(res=>{
          if(res && res.data){
            Object.keys(this.form).map(e=>this.form[e] = res.data[e]);
            this.form.type = res.data.releaseTime ? 1 : 0;
            this.$initWxOpenData()
          }
        })
      },
    },
    mounted(){
      if(this.detail?.id){
        this.getDetail();
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .picker {
    width: 300px;

    .el-form-item__content {
      margin-left: 0 !important;
    }
  }

  .text-area{
    width:995px;
    height:32px;
    background-color:#F5F5F5;
    border: 1px solid #d0d4dc;
    border-radius: 2px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding:0 6px;
    color: #666666;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  ::v-deep .AiOpenData{
    height:auto !important;
    &:after{
      content:"、";
    }
    &:nth-child(2):after{
      content:"";
    }
  }

  ::v-deep .point{
    &:after{
      content:"" !important;
    }
  }

</style>