NoticeForm.vue 5.8 KB
Newer Older
宋雄's avatar
宋雄 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156
<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="noticeTitle">
              <a-input v-model="model.noticeTitle" placeholder="请输入标题" style="width:70%"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="紧急程度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="urgentDegree">
              <a-select style="width: 50%" v-model="model.urgentDegree" placeholder="请选择紧急程度">
                <a-select-option v-for="item in urgentDegreeList" :key="item.value" :value="item.value">{{item.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="noticeContent">
              <j-editor placeholder="请输入内容" v-model="model.noticeContent"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="封面图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="noticeImg">
              <j-image-upload bizPath="scott/pic" v-model="model.noticeImg"></j-image-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="是否定时发布" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isScheduledRelease">
              <a-radio-group name="radioGroup" v-model="model.isScheduledRelease" style="max-width:350px">
                <a-radio v-for="item in scheduledReleaseList" :key="item.value" :value="item.value">{{item.label}}</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" v-if="model.isScheduledRelease === 1">
            <a-form-model-item label="发布时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="releaseTime">
              <j-date placeholder="请选择发布日期" v-model="model.releaseTime" :showTime="true" dateFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%;max-width:350px" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
  import Vue from 'vue'
  import { TENANT_ID } from "@/store/mutation-types"
  import { httpAction, getAction } from '@/api/manage'
  import { formatDate } from '@/utils/util'
  import {URGENT_DEGREE, SCHEDULED_RELEASE} from '@/assets/static.js'

  export default {
    name: 'PropertyChargruleForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        urgentDegreeList: URGENT_DEGREE,
        scheduledReleaseList: SCHEDULED_RELEASE,
        model:{
          noticeTitle: '',
          urgentDegree: 'usual',
          noticeRange: 'POINT',
          noticeContent: '',
          noticeImg: '',
          isScheduledRelease: 0,
          releaseTime: ''
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
        confirmLoading: false,
        validatorRules: {
          noticeTitle: [{ required: true, message: '请输入标题', trigger: 'blur' }],
          noticeContent: [{ required: true, message: '请输入内容', trigger: 'blur' }],
          releaseTime: [{ required: true, message: '请选择发布日期', trigger: 'change' }],
          noticeImg: [{ required: true, message: '请上传封面', trigger: 'change' }]
        },
        url: {
          add: "/property-company/notice/companyNotice/add",
          edit: "/property-company/notice/companyNotice/edit",
          queryById: "/property-company/notice/companyNotice/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
              if(this.model.isScheduledRelease === 0) {
                this.model.releaseTime = formatDate(new Date().getTime(), 'yyyy-MM-dd hh:mm:ss')
              }
            }else{
              httpurl+=this.url.edit;
              method = 'put';
            }
            this.model['noticeCommunityRefList'] = [
              {
                communityCode: Vue.ls.get(TENANT_ID)
              }
            ]
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
    }
  }
</script>