msgForm.vue 3.54 KB
<template>
    <el-dialog
      :title="isDetail ? '通知详情' : '发布通知'"
      :close-on-click-modal="false"
      :visible.sync="visible"
      class="NCC-dialog NCC-dialog_center msg-dialog"
      lock-scroll
      width="50%"
    >
      <el-row :gutter="15" style="padding-top: 10px">
        <el-form
            ref="elForm"
            :model="dataForm"
            size="small"
            label-width="100px"
            label-position="right"
            :disabled="!!isDetail"
            :rules="rules">
            <el-col :span="24">
              <el-form-item label="通知标题" prop="title">
                <el-input v-model="dataForm.title"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="内容" prop="bodyContent">
                <NCC-Quill v-model="dataForm.bodyContent" placeholder="请输入内容..." :disabled="!!isDetail" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图片上传" prop="imgUrl">
                <NCC-UploadFz v-model="dataForm.imgUrl" :fileSize="5" sizeUnit="MB" :limit="9" buttonText="点击上传" />
              </el-form-item>
            </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button>
      </span>
    </el-dialog>
  </template>
  <script>
  import request from "@/utils/request";
  export default {
    components: {},
    props: [],
    data() {
      return {
        loading: false,
        visible: false,
        isDetail: false,
        dataForm: {
            id: '',
            title: '',
            bodyContent: '',
            imgUrl: [],
            categoryId: 'cc225c68421644f79037aaf624ccccc0',
            isType: '0',
        },
        rules: {
            title: [
                { required: true, message: '请输入标题', trigger: 'blur' },
            ],
            bodyContent: [
                { required: true, message: '请输入内容', trigger: 'blur' },
            ],
        },
      };
    },
    computed: {},
    watch: {},
    created() {
     
    },
    mounted() {},
    beforeDestroy() {
    },
    methods: {

      goBack() {
        this.$emit("refresh");
      },
      init(id, isDetail) {
        this.dataForm.id = id || 0;
        this.visible = true;
        this.isDetail = isDetail || false;
        this.$nextTick(() => {
            this.$refs["elForm"].resetFields();
            if(this.dataForm.id) {
                request({
                  url: `/SubDev/ZyOaArticle/${this.dataForm.id}`,
                  method: "GET",
                }).then((res) => {
                    this.dataForm = res.data;
                    console.log(this.dataForm);
                });
            }
        });
      },
      dataFormSubmit() {
        this.$refs['elForm'].validate((valid) => {
			if (valid) {
                request({
					url: `/SubDev/ZyOaArticle`,
					method: 'post',
					data: this.dataForm,
				}).then((res) => {
					this.$message({
						message: res.msg,
						type: 'success',
						duration: 1000,
						onClose: () => {
							this.visible = false, this.$emit('refresh', true)
						}
					})
				})
            }
        })
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .msg-dialog {
    :deep(.el-dialog__body) {
      max-height: 50vh;
      overflow-y: scroll;
    }
  }
  </style>