dvcp_v2_webapp/packages/wxwork/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">
                  <span v-text="item.name"/>
                  <span v-if="persons.length">等{{ persons.length }}人</span>
                </div>
                <ai-wechat-selecter v-model="form.persons" :instance="instance" @change="onChange">
                  <el-button type="info">选择</el-button>
                </ai-wechat-selecter>
              </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: [],
    }
  },
  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.form.persons = e;
      this.persons = e;
      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/addOrUpdate", {
            ...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;

        }
      })
    },
  },
  mounted() {
    if (this.detail?.id) {
      this.getDetail();
    }
  }
}
</script>

<style lang="scss" scoped>
: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;
}

:deep( .AiOpenData ){
  height: auto !important;

  &:after {
    content: "、";
  }

  &:nth-child(2):after {
    content: "";
  }
}
</style>