cd-work-flow-web/src/views/oa/enter-ann/add/addAnnModal.vue

<template>
  <a-modal
    :title="title"
    v-model="addModalVisible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    width="86%"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="addAnnForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <!-- 标题 类型 -->
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="标题">
              <a-input
                v-decorator="['title', { rules: [{ required: true, message: '请输入标题' }] }]"
                placeholder="请输入标题"
              />
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item label="类型">
              <a-select
                v-decorator="['type', { rules: [{ required: true, message: '请选择类型' }] }]"
                placeholder="请选择类型"
              >
                <a-select-option value="规章制度">规章制度</a-select-option>
                <a-select-option value="党建学习">党建学习</a-select-option>
                <a-select-option value="公告信息">公告信息</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 创建人创建日期>>>>新增弹框-->
        <div v-if="title == '新增馆内公告'">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="创建人">
                <a-input
                  v-decorator="['createBy', { rules: [{ required: false, message: '请输入创建人' }] }]"
                  placeholder="系统回显"
                  disabled
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="创建日期">
                <a-date-picker
                  disabled
                  style="width:100%"
                  showTime
                  format="YYYY-MM-DD HH:mm"
                  placeholder="系统回显"
                  @change="createTimeChange"
                  @ok="createTimeOk"
                  v-decorator="['createTime', { rules: [{ required: false, message: '请选择紧创建日期' }] }]"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <!-- 创建人创建日期>>>>编辑弹框 -->
        <div v-if="title == '编辑馆内公告'">
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item label="创建人">
                <a-input
                  v-decorator="['createBy', { rules: [{ required: false, message: '请输入创建人' }] }]"
                  disabled
                />
              </a-form-item>
            </a-col>

            <a-col :span="12">
              <a-form-item label="创建日期">
                <a-date-picker
                  disabled
                  style="width:100%"
                  showTime
                  format="YYYY-MM-DD HH:mm:ss"
                  @change="createTimeChange"
                  @ok="createTimeOk"
                  v-decorator="['createTime', { rules: [{ required: false, message: '请选择紧创建日期' }] }]"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <!-- 发布 -->
        <!-- <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="是否发布:">
              <a-radio-group v-decorator="['isRelease', { rules: [{ required: true, message: '请选择是否发布' }] }]">
                <a-radio value="0">
                  仅存稿
                </a-radio>
                <a-radio value="1">
                  发布
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row> -->

        <!-- 公告富文本 -->
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="公告内容:"></a-form-item>
          </a-col>
          <a-col :span="24">
            <JEditor ref="JEditor" :value="smallText" style="margin:0 170px 0 130px;"></JEditor>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import moment from 'moment'
import 'moment/locale/zh-cn'
import JEditor from '@/components/jeecg/JEditor'
import { enterpriseEAdd, enterpriseEUpdate } from '@api/oa/cd-enterprise-announcement'
export default {
    name: 'AddAnnModal',
    components: {
        JEditor // 富文本组件
    },
    data () {
        return {
            addAnnForm: this.$form.createForm(this),
            confirmLoading: false,
            addModalVisible: false,
            smallText: '', // 弹框内 富文本的内容
            annInfo: {}, // 表单数据(回显)
            title: ''
        }
    },
    // 接收父组件查询公告的方法
    props: {
        fatherGetList: {
            type: Function,
            default: null
        }
    },
    created () {},

    methods: {
    // 回显表单
        getAnnFormInfo (e) {
            this.$nextTick(() => {
                // 判断是否回显(创建人、创建日期)
                if (this.title == '新增馆内公告') {
                    this.addAnnForm.setFieldsValue({
                        title: this.annInfo.title,
                        type: this.annInfo.type,
                        isRelease: this.annInfo.isRelease
                    })
                } else {
                    this.addAnnForm.setFieldsValue({
                        title: this.annInfo.title,
                        type: this.annInfo.type,
                        isRelease: this.annInfo.isRelease,
                        // --编辑  回显时间
                        createBy: this.annInfo.createBy,
                        createTime: moment(this.annInfo.createTime, 'YYYY-MM-DD HH:mm:ss')
                    })
                }
                this.$refs.JEditor.myValue = this.annInfo.content
            })
        },

        // 弹框 保存
        handleOk () {
            this.addAnnForm.validateFields((err, vals) => {
                if (!err && this.$refs.JEditor.myValue !== '') {
                    console.log('>>>>>>', vals)
                    var news = {}
                    news.title = vals.title
                    news.type = vals.type
                    news.createBy = vals.createBy
                    news.isRelease = vals.isRelease
                    news.content = this.$refs.JEditor.myValue
                    // 编辑--------------------------------------
                    if (this.annInfo.id) {
                        news.id = this.annInfo.id
                        console.log('这是修改')
                        enterpriseEUpdate(news).then(res => {
                            if (res.success) {
                                this.$message.success('修改成功')
                                this.addModalVisible = false
                                this.addAnnForm.resetFields() // 清空表单
                                this.$refs.JEditor.myValue = '' // 清空富文本
                                this.fatherGetList() // 调用父组件的查询方法
                            }
                        })
                    } else {
                        // 新增--------------------------------------
                        enterpriseEAdd(news).then(res => {
                            if (res.success) {
                                // console.log(res)
                                this.addModalVisible = false
                                this.$message.success('新增成功')
                                this.addAnnForm.resetFields() // 清空
                                this.$refs.JEditor.myValue = '' // 清空富文本
                                this.fatherGetList()
                            }
                        })
                    }
                } else {
                    this.addAnnForm.resetFields() // 清空表单
                    this.$refs.JEditor.myValue = '' // 清空富文
                    this.$message.error('请填写馆内公告必要信息')
                }
            })
        },

        handleCancel () {
            this.$emit('close')
            this.visible = false
            this.$refs.JEditor.myValue = '' // 清空富文
            this.addAnnForm.resetFields() // 清空表单
        },
        createTimeChange (value, dateString) {
            console.log('选择的时间:', value)
            console.log('格式化选择的时间:', dateString)
        },
        createTimeOk (value) {
            console.log('createTimeOk:', value)
        }
    }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
</style>