cd-work-flow-web/src/views/oa/modules/ConferenceApplyModal.vue

<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>
        <a-col span="24">
          <a-form-item label="会议议题" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
            <a-input v-decorator="[ 'conferenceTitle', validatorRules.conferenceTitle]" placeholder="请输入会议议题"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    <a-row>
        <a-col span="8">
          <a-form-item label="会议信息发布人" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <j-popup
              v-decorator="['postedPerson', validatorRules.postedPerson]"
              :trigger-change="true"
              org-fields="realname,depart_name"
              dest-fields="postedPerson,postedDept"
              code="user_dept"
              @callback="popupCallback"/>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item label="发布部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="[ 'postedDept', validatorRules.postedDept]" :disabled="true" placeholder="请输入发布部门"></a-input>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item label="发布日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <j-date placeholder="请选择发布日期" v-decorator="[ 'postedDate', validatorRules.postedDate]" :trigger-change="true" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>
    <a-row>
        <a-col span="8">
          <a-form-item label="会议日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <j-date placeholder="请选择会议日期" v-decorator="[ 'conferenceDate', validatorRules.conferenceDate]" :trigger-change="true" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <j-date placeholder="请选择开始时间" @change="changeStartTime" v-decorator="[ 'startTime', validatorRules.startTime]" :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <j-date placeholder="请选择结束时间" @change="changeEndTime" v-decorator="[ 'endTime', validatorRules.endTime]" :trigger-change="true" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"/>
          </a-form-item>
        </a-col>
      </a-row>
    <a-row>
        <a-col span="8">
          <a-form-item label="会议地点" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <j-popup
                v-decorator="['conferenceAddress', validatorRules.conferenceAddress]"
                :trigger-change="true"
                org-fields="name"
                dest-fields="conferenceAddress"
                code="meeting_room"
                @callback="popupCallback"/>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item label="出席人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-search
              v-model="userNames"
              placeholder="请先选择用户"
              disabled
              @search="onSearchDepUser">
              <a-button slot="enterButton" :disabled="disabled">选择用户</a-button>
            </a-input-search>
            <j-select-user-by-dep-modal ref="selectModal" :customReturnField="customReturnField" :modal-width="modalWidth" :multi="multi" @ok="selectOK" :user-ids="value" @initComp="initComp"/>
          </a-form-item>
        </a-col>
        <a-col span="8">
          <a-form-item label="出席部门" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-model="orgCode" :disabled="true" placeholder="请输入出席部门"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col span="8">
          <a-form-item label="会议类别" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-select v-decorator="['conferenceType', validatorRules.conferenceType]" 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>
    <a-row>
        <a-col span="24">
          <a-form-item label="其他参会人" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
            <a-input v-decorator="[ 'otherPerson', validatorRules.otherPerson]" placeholder="请输入其他参会人"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    <a-row>
        <a-col span="24">
          <a-form-item label="会议内容" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
            <a-textarea v-decorator="['conferenceContent', validatorRules.conferenceContent]" rows="1" placeholder="请输入会议内容"/>
          </a-form-item>
        </a-col>
      </a-row>
    <a-row>
        <a-col span="24">
          <a-form-item label="附件" :labelCol="labelCol1" :wrapperCol="wrapperCol1">
            <j-upload v-decorator="['file', validatorRules.file]" :trigger-change="true"></j-upload>
          </a-form-item>
        </a-col>
      </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>

  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JDate from '@/components/jeecg/JDate'
  import JUpload from '@/components/jeecg/JUpload'
  import JSelectUserByDepModal from '@/components/jeecgbiz/modal/JSelectUserByDepModal'
  export default {
    name: "ConferenceApplyModal",
    components: {
      JDate,
      JUpload,
      JSelectUserByDepModal,
    },
    props: {
      modalWidth: {
        type: Number,
        default: 1250,
        required: false
      },
      value: {
        type: String,
        required: false
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      multi: {
        type: Boolean,
        default: true,
        required: false
      },
      // 自定义返回字段，默认返回 username
      customReturnField: {
        type: String,
        default: 'username'
      }
    },
    data () {
      return {
        userIds: "",
        userNames: "",
        orgCode: "",
        form: this.$form.createForm(this),
        title:"操作",
        width:1400,
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 },
        },
        labelCol1: {
          xs: { span: 24 },
          sm: { span: 2 },
        },
        wrapperCol1: {
          xs: { span: 24 },
          sm: { span: 21 },
        },
        confirmLoading: false,
        validatorRules: {
          conferenceTitle: {rules: [
            {required: true, message: '请输入会议议题!'},
          ]},
          postedPerson: {rules: [
            {required: true, message: '请输入会议信息发布人!'},
          ]},
          postedDept: {rules: [
          ]},
          postedDate: {rules: [
            {required: true, message: '请输入发布日期!'},
          ]},
          conferenceDate: {rules: [
            {required: true, message: '请输入会议日期!'},
          ]},
          startTime: {rules: [
            {required: true, message: '请输入开始时间!'},
          ]},
          endTime: {rules: [
          ]},
          conferenceAddress: {rules: [
          ]},
          attendPerson: {rules: [
            {required: true, message: '请输入出席人员!'},
          ]},
          attendDept: {rules: [
          ]},
          otherPerson: {rules: [
          ]},
          conferenceContent: {rules: [
            {required: true, message: '请输入会议内容!'},
          ]},
          conferenceType:{rules: [
            {required: true, message: '请选择会议类别!'},
          ]},
          file: {rules: [
          ]},
        },
        url: {
          add: "/conferenceApply/conferenceApply/add",
          edit: "/conferenceApply/conferenceApply/edit",
        }
      }
    },
    created () {
    },
    mounted() {
      this.userIds = this.value
    },
    methods: {
      initComp(userNames) {
        this.userNames = userNames
      },
      onSearchDepUser() {
        this.$refs.selectModal.showModal()
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        console.log("this.model",this.model)
        this.userIds = this.model.attendPerson;
        this.userNames = this.model.attendPerson;
        this.orgCode = this.model.attendDept;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'conferenceTitle','postedPerson','postedDept','postedDate','conferenceDate','startTime','endTime','conferenceAddress','attendPerson','attendDept','otherPerson','conferenceContent','file'))
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values);
            formData.attendPerson = this.userNames;
            formData.attendDept = this.orgCode;
            console.log("表单提交数据",formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
      changeStartTime(data){   
      var end = (this.form.getFieldValue('endTime'))?new Date((this.form.getFieldValue('endTime')).replace(/\-/g, "\/")):new Date(''.replace(/\-/g, "\/"));
      var start = new Date(data.replace(/\-/g, "\/"));
      if(this.form.getFieldValue('endTime')!=""&&data!=""&&start >=end)  
       {  
        this.$nextTick(() => {
          this.form.setFieldsValue({startTime: '' })
           this.$forceUpdate()
         })
        this.$message.error("合同开始时间不能大于合同结束时间！")     
        return false;  
        }
     },
     changeEndTime(data){
      var start = (this.form.getFieldValue('startTime'))?new Date((this.form.getFieldValue('startTime')).replace(/\-/g, "\/")):new Date(''.replace(/\-/g, "\/"));
      var end = new Date(data.replace(/\-/g, "\/"));
      if(this.form.getFieldValue('startTime')!=""&&data!=""&&start >=end)  
       {  
        this.$nextTick(() => {
          this.form.setFieldsValue({endTime: '' })
           this.$forceUpdate()
         })
        this.$message.error("合同开始时间不能大于合同结束时间！")     
        return false;  
        }
     },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'conferenceTitle','postedPerson','postedDept','postedDate','conferenceDate','startTime','endTime','conferenceAddress','attendPerson','attendDept','otherPerson','conferenceContent','file'))
      },
      selectOK(rows, idstr) {
        if (!rows) {
          this.userNames = ''
          this.userIds = ''
        } else {
          let temp = ''
          let temp1 = ''
          for (let item of rows) {
            temp += ',' + item.realname
            if(temp1.indexOf(item.orgCode)==-1){
              temp1 += ',' + item.orgCode
            }
          }
          this.userNames = temp.substring(1)
          this.orgCode = temp1.substring(1)
          this.userIds = idstr
        }
      }
    }
  }
</script>
<style scoped lang="less">

/deep/ .ant-form-item-control {
      height: 40px;
      display: contents;
} 
</style>