MBS-FormItems组件常用类型

<template>
  <ta-border-layout style="height: 100%" :centerCfg="{showBorder:true}" :headerCfg="{showBorder:false}" :footerCfg="{showBorder:false}" :showBorder=true :showPadding=true layout-type="fixTop">
    <ta-card title="查询条件" :bordered="false" :showExpand="false" class='no-bd-bottom'>
      <Form :formItem="formItems" :autoFormCreate="(form)=>{this.queryForm=form}" :form-layout="true">
        <template slot="operation">
          <div style="text-align:right;margin-bottom:20px">
            <ta-button @click="reset">重置</ta-button>
            <ta-button type="primary" @click="queryAll">查询</ta-button>
          </div>
        </template>
      </Form>
    </ta-card>
    <ta-card title="医疗就诊信息列表" :bordered="false" :showExpand="false" class='no-bd-bottom'>
      <tables :scroll="{ x: 1850,y:480}" :columns="columns" :dataSource.sync="tableData" :total="pageParams.total" v-model="pageParams.pageNum" :pageSize.sync="pageParams.pageSize" @change="onPagePage" @showSizeChange="onPageSizeChange" ref="gridPager" />
    </ta-card>
  </ta-border-layout>
</template>
<script>
import Form from '@project/component/Form'
import tables from '@project/component/tables'
import moment from 'moment'
import dicMixin from '@common/js/mixins/dicMixin'
import mixins from './columns'
export default {
  name: 'N142307',
  provide: {
    limitAdmdvs: 54
  },
  mixins: [dicMixin, mixins],
  components: { Form, tables },
  data () {
    return {
      formItems: [
        {
          label: '开始时间',
          type: 'date',
          fieldDecoratorId: 'crteTimeBeginStr',
          require: true,
          params: {
            disabledDate: v => this.disabledStartDate(v)
          }
        },
        {
          label: '结束时间',
          type: 'date',
          fieldDecoratorId: 'crteTimeEndStr',
          require: true,
          params: {
            disabledDate: v => this.disabledEndDate(v)
          }
        },
        {
          label: '业务类型',
          fieldDecoratorId: 'type',
          type: 'select',
          align: 'center',
          options: [
            { label: '个人返还', value: '1' },
            { label: '个人清退', value: '2' }
          ]
        },
        {
          label: '人员编号',
          fieldDecoratorId: 'psnNo',
          type: 'component',
          currentView: 'personnel',
          required: true,
          params: { showPsnCertType: false },
          span: 8,
          func: (val) => {
            this.queryForm.setFieldsValue({
              psnNo: val.psnNo,
              ptcpNo: val.psnNo,
              psnName: val.psnName
            })
          }
        },
        {
          label: '单位编号',
          type: 'component',
          fieldDecoratorId: 'empNo',
          currentView: 'company',
          span: 8,
          func: (v) => {
            if (v) {
            }
          }
        }
      ],
      tableData: [],
      pageParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  async mounted () {
    const res = await this.$store.dispatch('getCanOptAdmdvs', this)
    this.$set(
      this.formItems.find((v) => v.fieldDecoratorId === 'insuAdmdvs'),
      'options',
      res.data.data
    )
  },
  methods: {
    //  开始时间校验
    disabledStartDate (startValue) {
      const endValue = this.queryForm.getFieldValue('crteTimeEndStr')
      return moment(startValue).isAfter(new Date()) || moment(startValue).isAfter(endValue)
    },
    //  结束时间校验
    disabledEndDate (endValue) {
      const startValue = this.queryForm.getFieldValue('crteTimeBeginStr')
      return moment(endValue).isAfter(new Date()) || moment(endValue).isBefore(startValue)
    },
    moment,
    onPagePage (cur) {
      this.pageParams.pageNum = cur
      this.queryAll()
    },
    onPageSizeChange (cur, pageSize) {
      this.pageParams.pageNum = 1
      this.pageParams.pageSize = pageSize
      this.queryAll()
    },
    queryAll () {
      const formData = this.queryForm.getFieldsValue()
      if (formData.insuAdmdvs) {
        formData.insuAdmdvs = formData.insuAdmdvs[formData.insuAdmdvs.length - 1]
      }
      this.queryForm.validateFields((err, val) => {
        if (err) return
        this.Base.pageMask({ show: true, isTop: false, text: '加载中' })
        Base.submit(null, {
          url: '/web/account/accountInfoManage/queryAcctUnifiedPage',
          data: { ...formData, ...this.pageParams },
          autoValid: true,
          autoQs: false
        }).then((res) => {
          if (res.code === 0) {
            this.pageParams.total = res.data.recordCounts
            this.tableData = res.data.data
            console.log(this.tableData)
          }
        }).finally(() => {
          this.Base.pageMask({ show: false, isTop: false, text: '加载中' })
        })
      })
    },
    reset () {
      this.queryForm.resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>