<template>
    <div class="ht-page-operate-modal2-demo">
        <ht-page-operate-modal
                v-model="modal1"
                :width="width"
                :form-data="formData"
                :footer-button="footerButton">
            <p slot="header" style="color:#f60;text-align:center">
                <ht-base-icon type='LiRa_plus'></ht-base-icon>
                <span>新增项目</span>
            </p>
        </ht-page-operate-modal>
        <ht-base-button @click="modal1=true">显示弹框二</ht-base-button>
    </div>
</template>

<script>
  export default {
      name: 'HtPageOperateModal2Demo',
      data(){
          return {
              modal1:false,
              width:'1000',
              formData:{
                  dataInfo: {
                      inquiryName: '12',
                      inquiryCode: '1111',
                      inquiryNumber:0,
                      professionalOrgId: '',
                      purchaseCategory: '',
                      quoteEndDateStart: '',
                      quoteEndDateEnd: '',
                      publishTimeStart: '',
                      publishTimeEnd: '',
                  },//搜索数据
                  labelWidth: '120',//标签的宽度
                  // inputWidth: '200',//栏位的宽度
                  serialNumCount:2,//显示几行
                  rowCount:3,//每行显示几个元素
                  // rowMargin:50,//行间距
                  buttonAlign:'right',
                  columns: [
                      {
                          componentType: 'HtBaseInput',
                          labelName: '采购单名称：',
                          placeholder: '请输入采购单名称',
                          prop: 'inquiryName',
                          rules:[
                              {
                                  required:true,
                                  message:'不能为空',
                                  trigger: 'blur'
                              }
                          ]
                      },
                      {
                          componentType: 'Label',
                          labelName: '采购单编号：',
                          placeholder: '请输入采购单编号',
                          prop: 'inquiryCode',
                      },
                      {
                          componentType: 'HtBaseRadio',
                          labelName: '采购单编号：',
                          placeholder: '请输入采购单编号',
                          prop: 'inquiryCode',
                          children:{
                              items:[
                                  {value:'q', label:'qq'},
                                  {value:'w', label:'ww'},
                                  {value:'e', label:'ee'}
                              ]
                          }
                      },
                      {
                          componentType: 'HtBaseInputNumber',
                          labelName: '采购数量：',
                          placeholder: '请输入采购单编号',
                          max:100,
                          min:0,
                          prop: 'inquiryNumber',
                      },
                      {
                          componentType: 'HtBaseSelect',
                          labelName: '采购机构：',
                          placeholder: '请输入采购机构：',
                          prop: 'professionalOrgId',
                          children:{
                              sytnax:'Option',
                              items:[
                                  {label: '物资类', value: '1'},
                                  {label: '施工类', value: '2'},
                                  {label: '服务类', value: '3'}
                              ]
                          },
                          rules:[
                              {
                                  required:true,
                                  message:'不能为空',
                                  trigger: 'change'
                              }
                          ]
                      },
                      {
                          componentType: 'HtBaseSelect',
                          labelName: '采购类别：',
                          placeholder: '请选择采购类别',
                          prop: 'purchaseCategory',
                          children:{
                              sytnax:'Option',
                              items:[
                                  {label: '物资类', value: '1'},
                                  {label: '施工类', value: '2'},
                                  {label: '服务类', value: '3'}
                              ]
                          }
                      },
                      {
                          componentType: 'HtBaseDatePicker',
                          labelName: '报价开始日期：',
                          placeholder: '请输入开始时间',
                          prop: 'quoteEndDateStart',
                          format: 'yyyy-MM-dd HH:mm:ss',
                          on:{
                              'on-change':param=>{
                                  this.formData.dataInfo['quoteEndDateStart'] = param;
                              }
                          },
                          rules:[
                              {
                                  required:true,
                                  message:'不能为空',
                                  trigger: 'change'
                              }
                          ]
                      },
                      {
                          componentType: 'HtBaseDatePicker',
                          labelName: '报价结束日期：',
                          placeholder: '请输入结束时间',
                          prop: 'quoteEndDateEnd',
                          format: 'yyyy-MM-dd HH:mm:ss',
                          on:{
                              'on-change':param=>{
                                  this.formData.dataInfo['quoteEndDateEnd'] = param;
                              }
                          }
                      },
                      {
                          componentType: 'HtBaseDatePicker',
                          labelName: '发布开始日期：',
                          placeholder: '请输入开始时间',
                          prop: 'publishTimeStart',
                          format: 'yyyy-MM-dd HH:mm:ss',
                          on:{
                              'on-change':param=>{
                                  this.formData.dataInfo['publishTimeStart'] = param;
                              }
                          }
                      },
                      {
                          componentType: 'HtBaseDatePicker',
                          labelName: '发布结束日期：',
                          placeholder: '请输入结束时间',
                          prop: 'publishTimeEnd',
                          format: 'yyyy-MM-dd HH:mm:ss',
                          on:{
                              'on-change':param=>{
                                  this.formData.dataInfo['publishTimeEnd'] = param;
                              }
                          }
                      }
                  ],//全部的栏位信息
              },
              footerButton:[
                  {label:'新增',type:'primary',action:'submit',click:this.submit,iconType:'LiRa_plus'},
                  {label:'重置',type:'info',action:'reset',click:this.reset,iconType:'LiRa_refresh'},
                  {label:'关闭',type:'warning',click:this.close}
              ]
          }
      },
      methods:{
          submit(data){
              if(data){
                  this.modal1 = false
              }else{
                  this.modal1 = true
              }
          },
          reset(){

          },
          close(){
              this.modal1 = false
          }
      }
  }
</script>
<style>
    .ht-page-operate-modal2-demo {

    }
</style>

