dy-admin-manager/src/views/groupChatManager/model/eidtPostMsg.vue

<template>
  <div>
    <el-dialog
      width="500px"
      title="消息发送"
      :visible.sync="lookVisible"
      :before-close="onClose"
    >
      <el-form :model="formes" label-width="120px" ref="eidtPostMsg">
        <el-form-item
          label="发送方式"
          :rules="[{ required: true, message: '请选择发送方式' }]"
          prop="postType"
        >
          <el-radio-group
            v-model="formes.postType"
            @change="
              () => {
                formes.sendTime = '';
              }
            "
          >
            <el-radio label="0">即时发送</el-radio>
            <el-radio label="1">定时发送</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="发送时间"
          v-if="formes.postType == '1'"
          :rules="[{ required: true, message: '请选择发送时间' }]"
          prop="sendTime"
        >
          <el-date-picker
            v-model="formes.sendTime"
            type="datetime"
            placeholder="请选择发送时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="payDate()"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="发送内容"
          :rules="[{ required: true, message: '请输入发送内容' }]"
          prop="messageContent"
        >
          <el-input
            class="w100"
            v-model="formes.messageContent"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item label="消息类型" prop="messageType">
          <el-radio-group
            v-model="formes.messageType"
            @change="
              () => {
                formes.fileUrl = '';
                formes.fileName = '';
                formes.fileSize = 0;
              }
            "
          >
            <el-radio label="IMG">图片消息</el-radio>
            <el-radio label="FILE">文件消息</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="附件(图片)"
          prop="fileUrl"
          v-if="formes.messageType === 'IMG'"
          :rules="[{ required: true, message: '请上传图片' }]"
        >
          <singe-file-upload
            tips="仅支持上传 PNG/JPG"
            accept=".png, .jpg"
            v-model="formes.fileUrl"
            @success="onFileSuccess"
          />
        </el-form-item>
        <el-form-item
          label="附件(PDF)"
          prop="fileUrl"
          v-if="formes.messageType === 'FILE'"
          :rules="[{ required: true, message: '请上传文件' }]"
        >
          <singe-file-upload
            tips="仅支持上传PDF文件"
            accept=".pdf"
            v-model="formes.fileUrl"
            @success="onFileSuccess"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="submitMsg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { sendGroupMsg, resetGroupMessageList } from "../api";
export default {
  name: "eidtPostMsg",
  data() {
    return {
      formes: {
        id: "",
        postType: "0",
        sendTime: "",
        messageContent: "",
        messageType: "TXT",
        fileName: "",
        fileSize: 0
      },
      lookVisible: false,
      chioseIdList: null,
      activeRow: null,
      type: ""
    };
  },

  mounted() {
    this.init();
  },
  methods: {
    init() {},
    openDioag(chioseIdList, type) {
      this.chioseIdList = chioseIdList;

      this.type = type;

      this.lookVisible = true;
    },
    openResetDioag(row, type) {
      if (row.sendTime) {
        row.postType = "1";
      }
      this.activeRow = row;
      this.type = type;
      this.formes = { ...row };
      this.lookVisible = true;
    },
    onClose() {
      this.formes = {
        id: "",
        postType: "0",
        sendTime: "",
        messageContent: "",
        messageType: "",
        fileName: "",
        fileSize: 0
      };
      this.$refs["eidtPostMsg"].resetFields();
      this.lookVisible = false;
    },
    submitMsg() {
      this.$refs.eidtPostMsg.validate(async flag => {
        if (flag) {
          try {
            if (this.activeRow && this.activeRow.id) {
              let obj = { ...this.formes };
              console.log(this.type, "type");
              if (this.type) {
                obj.isIncludeSender = 0;
              }
              const res = await resetGroupMessageList({ ...obj });
              this.$message.success("修改成功");
              this.$emit("clear");
              this.onClose();
            } else {
              let idList = this.chioseIdList
                .map(group => {
                  return group.id;
                })
                .join(",");
              let obj = { ...this.formes, targetIds: idList };
              if (this.type) {
                obj.isIncludeSender = 0;
              }
              const res = await sendGroupMsg({ ...obj });
              this.$message.success("发送成功");
              this.$emit("clear");
              this.onClose();
            }
          } catch (e) {
            console.log(e);
          }
        }
      });
    },
    // getName(val) {
    //   this.formes.fileName = val.data.name;
    //   console.log(val, "fileName");
    // },
    onFileSuccess(val) {
      this.formes.fileName = val.fileName;
      this.formes.fileSize = val.fileSize;
    },
    payDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 < new Date().getTime();
        }
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.w100 {
  width: 100%;
}
</style>