element-ui. 表单组件封装

1.使用封装的from组件。组件见底部。

<FormQueryList ref="baseFormRef" :is-handle="false" :search-data="baseData" :search-form="searchForm" :form-rules="baseFormRules"></FormQueryList>

 baseFormRules: baseFormRulesVo, // 基本form表单校验 
baseData: {
        countersignType: 'B',
        countersignName: '',
        creatorName: '',
        applyDepartment: '',
        contact: '',
        applicantTime: '',
        settleCompanyName: ''
      },
      searchForm: [
        { type: 'Select', label: '类型', prop: 'countersignType', options: [], props: [], focus: (n) => { }, change: (row) => { this.changeType(row) }, placeholder: '请选择', noneRows: true, disabled: false },
        { type: 'Input', label: '会签名称', prop: 'countersignName', placeholder: '请输入', disabled: false },
        { type: 'Input', label: '申请人', prop: 'creatorName', disabled: true },
        { type: 'Input', label: '申请部门', prop: 'applyDepartment', disabled: true },
        { type: 'Input', label: '联系方式', prop: 'contact', disabled: true },
        { type: 'Input', label: '申请时间', prop: 'applicantTime', disabled: true },
        { type: 'Input', label: '所属公司', prop: 'settleCompanyName', disabled: true }
      ],

2.如果是循环的表单。验证必填

     <div v-for="(item,index) in bussinessItemLists" :key="index" class="param-arr">
        <div class="group-index">
          <FormQueryList ref="formRefOne" :is-handle="false" class="order-form" :search-data="item.businessData" :search-form="item.businessForm(item, index)" :form-rules="item.bussinessFormRules" :is-disabled="isDisabled"></FormQueryList>
        </div>
      </div>  



this.$refs.formRefOne.map(item => {
          item.$refs.searchForm.validate((valid) => {
            if (!valid) {
              count++
              return
            }
          })
        })

1.Form组件封装

<template>
  <el-form ref="searchForm" :model="searchData" :rules="formRules" :disabled="isDisabled" size="mini" inline label-width="auto" class="search-forms" @submit.native.prevent>
    <el-form-item v-for="(item, index) in searchForm" :key="item.prop" :label="item.label" :prop="item.prop" :class="setFormClasses(item)" :tabindex="index">
      <!--自定义标题-->
      <template v-if="item.label2" slot="label">
        <div class="custom-label">
          <span>{{ item.label }}</span>
          <span class="label2" @click="labelToClickHandle(item, index)">{{ item.label2 }}</span>
        </div>
      </template>
      <!-- 输入框 -->
      <el-input
        v-if="item.type==='Input'"
        v-model="searchData[item.prop]"
        :dbc="item.dbc"
        :clearable="item.clearable"
        :title="item.isHideTitle ? '':searchData[item.prop]"
        :placeholder="item.placeholder"
        :disabled="item.disabled"
        :readonly="item.readingOnly"
        :maxlength="item.maxLength"
        :minlength="item.minLength"
        :max="item.max"
        :min="item.min"
        :type="item.inputWay?item.inputWay:'text'"
        :case="item.caseUpper?item.caseUpper:''"
        :trim="item.trim?item.trim:'trim'"
        @blur="setBlurHandle(item)"
        @focus="item.focus?item.focus(searchData[item.prop]):{}"
        @change="item.change?item.change(searchData[item.prop],itemIndex):{}"
        @input="item.input?item.input(searchData[item.prop]):{}"
      >
        <template v-if="item.isUnit" slot="append">{{ item.isUnit }}</template>
        <template v-if="item.hasIcons" slot="append">
          <div class="main-icons" @click="onClickSvgHandle(item, index)">
            <SvgIconFont :icon-class="item.hasIcons"></SvgIconFont>
          </div>
        </template>
      </el-input>
      <!-- 下拉框 -->
      <el-select
        v-if="item.type==='Select'&& item.customerDisplay === true"
        v-model="searchData[item.prop]"
        :clearable="!item.clearable"
        filterable
        :filter-method="item.dataFilter"
        :multiple="item.multiselect||false"
        :multiple-limit="item.multipleLimit||0"
        :disabled="item.disabled"
        allow-create
        @change="item.change?item.change(searchData[item.prop]):{}"
        @focus="item.focus?item.focus(index):{}"
        @clear="item.clear?item.clear(searchData[item.prop],itemIndex):{}"
      >
        <el-option
          v-for="op in item.options"
          :key="op.value || op.dictCode"
          :label="op.label || op.dictCode"
          :value="setBackSelectValue(item, op)"
        >
          <span style="float: left">{{ op.label || op.dictName }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ op.value ||op.dictCode }}</span>
        </el-option>
      </el-select>
      <!-- 下拉框，不允许自己创建， -->
      <el-select
        v-if="item.type==='Select'&& item.customerDisplay !== true &&item.allowCreate!==true"
        v-model="searchData[item.prop]"
        :clearable="!item.clearable"
        filterable
        :multiple="item.multiselect||false"
        :multiple-limit="item.multipleLimit||0"
        :disabled="item.disabled"
        :placeholder="item.placeholder?item.placeholder:''"
        @change="item.change?item.change(searchData[item.prop]):{}"
        @focus="item.focus?item.focus(index):{}"
        @clear="item.clear?item.clear(searchData[item.prop],itemIndex):{}"
      >
        <el-option
          v-for="op in item.options"
          :key="op.value || op.dictCode ||op.baseCustomerId"
          :label="op.label || op.dictName||op.customerName"
          :value="setBackSelectValue(item, op)"
        >
        </el-option>
      </el-select>
      <el-popover
        v-if="item.label ==='企业分类' && showTips"
        v-model="visible"
        placement="bottom"
        title=""
        width="800"
        trigger="click"
        @show="showCustomerGroup"
      >     <el-table
              id="custmerGroupTable"
              ref="singleClassTable"
              :data="gridData"
              height="350"
              highlight-current-row
              @current-change="handleCurrentChange"
              @row-click="rowClick"
            >
              <el-table-column label="选择" width="50">
                <template slot-scope="scope">
                  <el-radio v-model="radioIdSelect" :label="scope.row.id" @change.native="handleSelectionChange(scope.$index,scope.row)">&nbsp;</el-radio>
                </template>
              </el-table-column>

              <el-table-column width="150" property="className" label="企业分类"></el-table-column>
              <el-table-column property="classDes" label="描述"></el-table-column>

            </el-table>
        <div id="btnGrop" class="linebuttons">
          <el-button class="blue-border" @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="confirmSelet">确 定</el-button>
        </div>
        <span slot="reference" class="iconfont icon-a-icon41 "></span>
      </el-popover>
      <!-- 下拉允许创建 -->
      <el-select
        v-if="item.type==='Select'&& item.allowCreate===true"
        v-model="searchData[item.prop]"
        :clearable="!item.clearable"
        filterable
        allow-create
        :multiple="item.multiselect||false"
        :multiple-limit="item.multipleLimit||0"
        :disabled="item.disabled"
        @change="item.change?item.change(searchData[item.prop]):{}"
        @focus="item.focus?item.focus(index):{}"
        @clear="item.clear?item.clear(searchData[item.prop],itemIndex):{}"
      >
        <el-option
          v-for="op in item.options"
          :key="op.value || op.dictCode "
          :label="op.label || op.dictName "
          :value="setBackSelectValue(item, op)"
        >
        </el-option>
      </el-select>
      <!-- 下拉框含索引 -->
      <el-select
        v-if="item.type==='SelectHasIndex'"
        v-model="searchData[item.prop]"
        clearable
        filterable
        :multiple="item.multiselect||false"
        :multiple-limit="item.multipleLimit||0"
        :disabled="item.disabled"
        @change="(val)=>setSelectChange(val,searchData[item.prop],itemIndex,item)"
        @focus="item.focus?item.focus(index):{}"
      >
        <el-option
          v-for="op in item.options"
          :key="op.value || op.dictCode"
          :label="op.label || op.dictName"
          :value="setBackSelectValue(item, op)"
        ></el-option>
      </el-select>

      <!--联想控件-->
      <el-associate
        v-if="item.type==='Associate'"
        v-model="searchData[item.prop]"
        :popper-class="item.popperClass ? item.popperClass: ''"
        :columns="item.columns"
        :clearable="true"
        :dbc="item.dbc===false?item.dbc:true"
        :multiple="item.multiple"
        :multiple-limit="item.multipleLimit||0"
        :disabled="item.disabled"
        :value-prop="item.valueProp"
        :label-prop="item.labelProp"
        :display-init="item.displayInit ?searchData[item.displayInit]:searchData[item.prop]"
        :records-key="item.recordsKey"
        :total-key="item.totalKey"
        :keep-input-value="true"
        :init-search-keep-value="true"
        :query-method="item.queryMethod"
        :placeholder="item.placeholder"
        :popper-append-to-body="false"
        :allow-create="item.allowCreate?item.allowCreate:false"
        :allow-create-when-not-empty="item.allowCreateWhenNotEmpty?item.allowCreateWhenNotEmpty:false"
        :title="searchData[item.title]||searchData[item.prop]"
        :default-first-option="true"
        @visible-change="(val)=>item.visibleChange?item.visibleChange(val):{}"
        @change="(val,row)=>setAssociateChange(val,row,item,itemIndex)"
        @blur="(val)=>item.blur?item.blur(val):{}"
        @createMethod="(val)=>item.createMethod?item.createMethod(val):{}"
      ></el-associate>
      <!-- 单选 -->
      <el-radio-group
        v-if="item.type==='Radio'"
        v-model="searchData[item.prop]"
        @change="item.change && item.change(searchData[item.prop])"
      >
        <el-radio
          v-for="ra in item.radios"
          :key="ra.value"
          :label="ra.value"
          :disabled="item.disabled || ra.disabled"
        >{{ ra.label }}</el-radio>
      </el-radio-group>
      <!-- 单选按钮 -->
      <el-radio-group
        v-if="item.type==='RadioButton'"
        v-model="searchData[item.prop]"
        @change="item.change && item.change(searchData[item.prop])"
      >
        <el-radio-button
          v-for="ra in item.radios"
          :key="ra.value"
          :label="ra.value"
          :disabled="item.disabled"
        >{{ ra.label }}</el-radio-button>
      </el-radio-group>
      <!-- 复选框 -->
      <el-checkbox-group
        v-if="item.extraSingle"
        v-model="searchData[item.extraSingle.prop]"
        class="none-border"
      >
        <el-checkbox
          v-for="ch in item.extraSingle.checkboxs"
          :key="ch.value || ch.dictCode"
          :label="ch.value || ch.dictCode"
        >{{ ch.label || ch.dictName }}</el-checkbox>
      </el-checkbox-group>
      <el-checkbox-group
        v-if="item.type==='Checkbox'"
        v-model="searchData[item.prop]"
      >
        <el-checkbox
          v-for="ch in item.checkboxs"
          :key="ch.value || ch.dictCode||ch.uldCode"
          :label="ch.value || ch.dictCode||ch.uldCode"
          :disabled="item.disabled||ch.disabled"
          @change="item.change ? item.change(searchData[item.prop]) : {}"
        >{{ ch.label || ch.dictName ||ch.uldCode }}</el-checkbox>
      </el-checkbox-group>
      <!-- 日期-不带时分秒 -->
      <el-date-picker
        v-if="item.type==='Date'"
        v-model="searchData[item.prop]"
        :title="searchData[item.prop]"
        style="width: 100%"
        :value-format="setFormatDate(item.formatDate)"
        :format="setFormatHandle(item.formatType)"
        :disabled="item.disabled"
        :placeholder="item.placeholder"
        :picker-options="localPickerOptions(item)"
        @change="item.change?item.change(searchData[item.prop]):{}"
      ></el-date-picker>
      <!-- 时间 -->
      <el-time-select
        v-if="item.type==='Time'"
        v-model="searchData[item.prop]"
        :title="searchData[item.prop]"
        style="width: 100%"
        type=""
        :disabled="item.disabled"
        @change="item.change?item.change(searchData[item.prop]):{}"
      ></el-time-select>
      <!-- 日期时间-带时分秒或时分 -->
      <el-date-picker
        v-if="item.type==='DateTime'"
        v-model="searchData[item.prop]"
        :title="searchData[item.prop]"
        style="width: 100%"
        type="datetime"
        :value-format="setFormatDateTime(item.formatDate)"
        :format="setFormatTimeHandle(item.formatType)"
        :disabled="item.disabled"
        placeholder="选择日期时间"
        :picker-options="dateTimePickerOptions(item)"
        @change="item.change?item.change(searchData[item.prop]):{}"
        @onClick="item.onClick?item.change(searchData[item.prop]):{}"
      ></el-date-picker>
      <!--精确到分-->
      <el-date-picker
        v-if="item.type==='DateTimeMM'"
        v-model="searchData[item.prop]"
        style="width: 100%"
        type="datetime"
        :value-format="setFormatDateTimeMM(item.formatDate)"
        :format="setFormatTimeMM(item.formatType)"
        :disabled="item.disabled"
        :picker-options="dateTimePickerOptions(item)"
        placeholder="选择日期时间"
        @change="item.change?item.change(searchData[item.prop]):{}"
      ></el-date-picker>
      <!-- 滑块 -->
      <el-slider
        v-if="item.type==='Slider'"
        v-model="searchData[item.prop]"
        :disabled="item.disabled"
      ></el-slider>
      <!-- 开关 -->
      <el-switch
        v-if="item.type==='Switch'"
        v-model="searchData[item.prop]"
        :disabled="item.disabled"
      ></el-switch>
      <!--textarea文本框-->
      <el-input
        v-if="item.type==='TextArea'"
        v-model="searchData[item.prop]"
        :title="searchData[item.prop]"
        type="textarea"
        resize="none"
        :autosize="item.autosize || { minRows: 2, maxRows: 10}"
        :placeholder="item.placeholder"
        :maxlength="item.maxLength"
        :minlength="item.minLength"
        :disabled="item.disabled ? item.disabled : false"
        :show-word-limit="item.showWordLimit ? item.showWordLimit : false"
        @blur="setBlurHandle(item)"
        @input="(val)=>textInput(val,searchData[item.prop],itemIndex,item)"
      >
      </el-input>
      <!--按钮及icon-->
      <SvgIconFont
        v-if="item.type==='SvgIcon'"
        :icon-class="item.svgIconFont"
        class="form-svgicon"
        @click.native="item.click?item.click(searchData[item.prop]):{}"
      ></SvgIconFont>
      <!--控件左上角图标-->
      <SvgIconFont
        v-if="item.SvgIcon"
        :icon-class="item.svgIconFont"
        class="item-svg-icon-font"
        @click.native="item.svgIconClick?item.svgIconClick():{}"
      ></SvgIconFont>
    </el-form-item>
    <template v-if=" isHandle || isHandle&&!hideHandleBtn&&(unLoadOrder||appendQuery||isPlat||unMblNo||unQuo||unBuyBoard) ">
      <div class="btn-checkbox" :class="{ 'width-two' : isHandle&&!hideHandleBtn&&(unLoadOrder||appendQuery||isPlat||unMblNo||unQuo||unBuyBoard) }">
        <!--追加查询,过滤退载订单-->
        <el-form-item v-if="isHandle&&!hideHandleBtn&&(unLoadOrder||appendQuery||isPlat||unMblNo||unQuo||unBuyBoard)" label="none" class="form-checkbox operator-button">
          <el-checkbox v-if="isPlat === true" v-model="searchData.isPlat">过滤自打板</el-checkbox>
          <el-checkbox v-if="unLoadOrder === true" v-model="searchData.unLoadOrder" style="margin-right: 10px">过滤退载订单</el-checkbox>
          <el-checkbox v-if="unMblNo === true" v-model="searchData.unMblNo">过滤空主单号</el-checkbox>
          <el-checkbox v-if="appendQuery === true" v-model="searchData.appendQuery">追加查询</el-checkbox>
          <el-checkbox v-if="unQuo === true" v-model="searchData.unQuotation">过滤作废报价单</el-checkbox>
          <el-checkbox v-if="unBuyBoard === true" v-model="searchData.unBuyBoard">过滤作废临时买板</el-checkbox>
        </el-form-item>
        <!--查询按钮-->
        <template v-if="isHandle">
          <el-form-item v-show="!hideHandleBtn" label="none" class="form-button operator-button">
            <el-button
              v-for="item in searchHandle"
              :key="item.label"
              :type="item.type"
              size="mini"
              :class="item.class"
              @click.native="item.handle({item,searchData})"
            >{{ item.label }}</el-button>
          </el-form-item>
        </template>
      </div>
    </template>
    <!--列表查询展开收缩icon-->
    <template v-if="showIcon">
      <div v-if="isHandle && (hideTwoRow || searchForm.length > 12)" class="more-icons" @click="dropdownHandles">
        <img :src="setIconFontsSty" alt="more">
      </div>
    </template>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
import { trimHandle, formatDate } from '@/utils/commonss'
import moment from 'moment'
export default {
  name: 'FormQueryList',
  props: {
    itemIndex: {
      type: Number
    },
    isDisabled: {
      type: Boolean,
      default: false
    }, // 整个表单禁用
    isHandle: {
      type: Boolean,
      default: true
    }, // 是否有查询按钮
    unfoldHideHandle: {
      type: Boolean,
      default: false
    }, // 自定义收缩时：是否隐藏查询按钮
    labelWidth: {
      type: String,
      default: '100px'
    },
    size: {
      type: String,
      default: 'mini'
    },
    showTips: {
      type: Boolean,
      default: false
    },
    selectGroupId: {
      type: String,
      default: ''
    },
    searchForm: {
      type: Array,
      default: () => []
    }, // 表单控件
    searchHandle: {
      type: Array,
      default: () => []
    }, // 操作按钮
    searchData: {
      type: Object,
      default: () => {}
    }, // 表单数据变量
    formRules: {
      type: Object,
      default: () => {}
    }, // 表单校验
    appendQuery: {
      type: Boolean,
      default: false
    },
    unMblNo: {
      type: Boolean,
      default: false
    },
    unLoadOrder: {
      type: Boolean,
      default: false
    },
    isPlat: {
      type: Boolean,
      default: false
    },
    unQuo: {
      type: Boolean,
      default: false
    },
    unBuyBoard: {
      type: Boolean,
      default: false
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    // hideHandleBtn: {
    //   type: Boolean,
    //   default: false
    // },
    hideTwoRow: {
      type: Boolean,
      default: false
    },
    unfoldForm: {
      type: Boolean,
      default: false
    } // 自定义展开还是收缩
  },
  data() {
    return {
      currentRow: null,
      visible: false,
      radioIdSelect: '',
      comboBox: {},
      gridData: [],
      // gridData: [{
      //   id: 'A',
      //   className: '民营企业',
      //   classDes: '我国民营企业界定从广义上看，民营只与国有独资企业相对，而与任何非国有独资企业是相容的，包括国有持股和控股企业。因此，归纳民营企业的概念就是：非国有独资企业均为民营企业。从狭义的角度来看，“民营企业”仅指私营企业和以私营企业为主体的联营企业。'
      // },
      // {
      //   id: 'B',
      //   className: '政府机构',
      //   classDes: '在广义上指中央和地方的全部立法、行政、司法和官僚机关。狭义的政府机构仅指中央和地方的行政机关、官僚机关，即依照国家法律设立并享有行政权力、担负行政管理职能的部分国家机构。'
      // },
      // {
      //   id: 'C',
      //   className: '外资企业',
      //   classDes: '泛指依照我国有关法律规定，在我国境内设立的由外国投资者独自投资经营的企业。'
      // },

      // {
      //   id: 'D',
      //   className: '境外企业',
      //   classDes: '是指依照外国(地区)法律成立且实际管理机构不在中国境内，但在中国境内设立机构、场所的，或者在中国境内未设立机构、场所，但有来源于中国境内所得的企业。'
      // },

      // {
      //   id: 'E',
      //   className: '国有企业及国有控股企业',
      //   classDes: '1) 国有企业是指企业全部资产归国家所有，并按规定登记注册的非公司制的经济组织。不包括有限责任公司中的国有独资公司。\n2) 国有控股企业是指在企业的全部资本中，国家资本股本占较高比例，并且由国家实际控制的企业。包括绝对控股企业和相对控股企业。国有绝对控股企业是指国家资本比例大于50%(含50%)的企业，包含未经改制的国有企业。国有相对控股企业是指国家资本比例不足50%，但相对高于企业中的其他经济成分所占比例的企业(相对控股)，或者虽不大于其他经济成份，但根据协议规定，由国家拥有实际控制权的企业(协议控制)。对于企业由三方合资，其中两家为国有企业，国家资本之和超过50%的，在填报"国有经济控股"时，国家资本不能按两家之和来计算，而应按企业的实际控股或控制情况来填报。'
      // },
      // {
      //   id: 'F',
      //   className: '合资企业',
      //   classDes: '合资企业是指以法人投资者的身份，由国家、企业、个人的名义进行投资组建的企业。'
      // },
      // {
      //   id: 'G',
      //   className: '事业单位',
      //   classDes: '事业单位，是指国家为了社会公益目的，由国家机关举办或者其他组织利用国有资产举办的，从事教育、科技、文化、卫生等活动的社会服务组织。事业单位接受政府领导，表现形式为组织或机构的法人实体。'
      // },
      // {
      //   id: 'H',
      //   className: '东航物流内部关联',
      //   classDes: '由东航物流公司直接或间接控股，或存在重大影响的公司关联企业。'
      // },
      // {
      //   id: 'I',
      //   className: '东航集团内部关联',
      //   classDes: '由东航集团内物流集团外直接或间接控股，或存在重大影响的公司关联企业。'
      // },
      // {
      //   id: 'J',
      //   className: '其他关联方-国企',
      //   classDes: '非东航物流内非东航集团内的直接或间接控股，或存在重大影响的国有企业及国有控股关联企业。'
      // },
      // {
      //   id: 'K',
      //   className: '其他关联方-民营',
      //   classDes: '非东航物流内非东航集团内的直接或间接控股，或存在重大影响的民营关联企业。'
      // },
      // {
      //   id: 'L',
      //   className: '其他关联方-外资',
      //   classDes: '非东航物流内非东航集团内的直接或间接控股，或存在重大影响的外资关联企业。'
      // },
      // {
      //   id: 'M',
      //   className: '其他',
      //   classDes: '其他。'
      // }

      // ],
      showMoreForm: this.unfoldForm || false, // 默认收缩部分表单
      hideHandleBtn: this.unfoldShowHandle || false, // 收缩时：默认不隐藏查询重置区域按钮
      upMore: require('@/assets/systembac/up.svg'),
      downMore: require('@/assets/systembac/down.svg')
    }
  },
  computed: {
    /*
    // 查询条件列表（展开折叠)
    showSearchList: {
      get: function() {
        if (!this.showMoreForm && this.isHandle) {
          if (this.searchForm.length <= 12) {
            return this.searchForm
          }
          const newArr = [] // 存储数据
          const classList = [] // 存储两个合并一起
          let maxLength = 11 // 默认11
          for (let i = 0; i < maxLength; i++) {
            const item = this.searchForm[i]
            newArr.push(item)
            // 当有合并之后显示处理
            if (item.class) {
              maxLength = 11
              maxLength += (classList.length / 2)
              classList.push(i)
            }
          }
          return newArr
        }
        return this.searchForm
      },
      set: function(val) {
        this.showSearchList = val
      }
    },
    */
    ...mapGetters(['autoTableHeights']),
    // 设置收缩展开
    setIconFontsSty() {
      const self = this
      if (self.showMoreForm) {
        for (const i in this.searchForm) {
          if (self.searchForm[i].showMoreForm === 'hidden') {
            self.searchForm[i].showMoreForm = 'show'
            self.$set(self.searchForm[i], 'showMoreForm', self.searchForm[i].showMoreForm)
          }
        }
        return this.upMore
      } else {
        for (const j in self.searchForm) {
          if (self.searchForm[j].showMoreForm === 'show') {
            self.searchForm[j].showMoreForm = 'hidden'
            self.$set(self.searchForm[j], 'showMoreForm', self.searchForm[j].showMoreForm)
          }
        }
        return this.downMore
      }
    },
    // 设置form表单样式
    setFormClasses() {
      return (item) => {
        if (item.showMoreForm === 'hidden') {
          return 'hiddenNoneItems'
        }
        if (item.label === 'empty') {
          if (item.type === 'TextArea') {
            return 'emptyLabel textareaStyles'
          }
          return 'emptyLabel'
        }
        if (item.label === 'none') {
          if (item.type === 'TextArea') {
            return 'noneLabel textareaStyles'
          }
          if (item.class === 'bubbleCheckbox') {
            return 'noneLabel bubbleCheckbox'
          }
          return 'noneLabel'
        }
        if (item.class === 'harf') {
          if (item.type === 'TextArea') {
            return 'harfLabel textareaStyles'
          }
          if (item.bubbleInp === 'bubbleInp') {
            return 'harfLabel bubbleInp'
          }
          return 'harfLabel'
        }
        if (item.label === 'check') {
          if (item.type === 'TextArea') {
            return 'checkLabel textareaStyles'
          }
          return 'checkLabel'
        }
        if (item.hasIcons) {
          return 'hasIcons'
        }
        if (item.class) {
          if (item.type === 'TextArea') {
            return item.class + ' textareaStyles'
          }
          return item.class
        }
        if (item.type === 'TextArea') {
          return 'textareaStyles'
        }
        return ''
      }
    },
    // 设置时间格式-可传formatDate属性-所得值类型
    setFormatDate() {
      return (val) => {
        if (val) {
          return val
        }
        return 'yyyy-MM-dd'
      }
    },
    // 设置时间格式-可传formatType属性
    // 所显示类型,如显示yyyy/MM/dd
    setFormatHandle() {
      return (val) => {
        if (val) {
          return val
        }
        return 'yyyy-MM-dd'
      }
    },
    // 设置时间格式-可传formatDate属性-所得值类型
    setFormatDateTime() {
      return (val) => {
        if (val) {
          return val
        }
        return 'yyyy-MM-dd HH:mm:ss'
      }
    },
    // 设置时间格式-可传formatType属性
    // 所显示类型,如显示yyyy/MM/dd
    setFormatTimeHandle() {
      return (val) => {
        if (val) {
          return val
        }
        return 'yyyy-MM-dd HH:mm:ss'
      }
    },
    setFormatTimeMM() {
      return (val) => {
        if (val) {
          return val
        }
        return 'yyyy-MM-dd HH:mm'
      }
    },
    setFormatDateTimeMM() {
      return (val) => {
        if (val) {
          return val
        }
        return 'yyyy-MM-dd HH:mm'
      }
    },
    // 年月日-不带时分秒
    // 设置时间控制-开始时间小于结束时间,结束时间大于开始时间
    localPickerOptions() {
      const self = this
      return (item) => {
        const shortcuts = [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
        // 禁用所有日期
        if (item.timeType && item.timeType.disabledAllDate) {
          return {
            // 设置快捷选项
            shortcuts,
            // 设置不能选择的日期
            disabledDate: (time) => {
              return true
            }
          }
        }
        // 限制自定义区间
        if (item.timeType && item.timeType.definedInterval) {
          const { start, end } = item.timeType.definedInterval
          return {
            // 设置快捷选项
            shortcuts,
            // 设置不能选择的日期
            disabledDate: (time) => {
              const startTime = new Date(start).getTime()
              const endTime = new Date(end).getTime()
              return time.getTime() < startTime - 8.64e7 || time.getTime() > endTime
            }
          }
        }
        // 限制一个月30天时间内：limitMonth: true
        if (item.timeType && item.timeType.limitMonth) {
          return {
            // 设置快捷选项
            shortcuts,
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              self.searchData[item.timeType.time] = minDate.getTime()
              if (maxDate) {
                self.searchData[item.timeType.time] = ''
              }
            },
            disabledDate: (time) => {
              const compareTime = self.searchData[item.timeType.time]
              const choiceDateTime = new Date(compareTime)
              if (compareTime) {
                if (item.timeType.way === 'start') {
                  const preMonth = moment(choiceDateTime).subtract(1, 'months').format()
                  const preMontDate = new Date(preMonth) - 8.64e7
                  return time.getTime() < preMontDate || time.getTime() > choiceDateTime.getTime()
                } else {
                  const nextMonth = moment(choiceDateTime).add(1, 'months').format()
                  const nextMontDate = new Date(nextMonth)
                  return time.getTime() < (choiceDateTime - 8.64e7) || time.getTime() > nextMontDate
                }
              }
            }
          }
        }
        // 限制一周七天以内：limitWeek: true
        if (item.timeType && item.timeType.limitWeek) {
          return {
            // 设置快捷选项
            shortcuts,
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              self.searchData[item.timeType.time] = minDate.getTime()
              if (maxDate) {
                self.searchData[item.timeType.time] = ''
              }
            },
            disabledDate: (time) => {
              const week = 7 * 24 * 60 * 60 * 1000
              const choiceDateTime = new Date(self.searchData[item.timeType.time])
              if (self.searchData[item.timeType.time]) {
                if (item.timeType.way === 'start') {
                  return time.getTime() < (choiceDateTime.getTime() - week) || time.getTime() > choiceDateTime.getTime()
                } else {
                  return time.getTime() < (choiceDateTime - 8.64e7) || time.getTime() > (choiceDateTime.getTime() + week - 8.64e7)
                }
              }
            }
          }
        }
        // 限制两周14天以内：twoWeek: true
        if (item.timeType && item.timeType.twoWeek) {
          return {
            // 设置快捷选项
            shortcuts,
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              self.searchData[item.timeType.time] = minDate.getTime()
              if (maxDate) {
                self.searchData[item.timeType.time] = ''
              }
            },
            disabledDate: (time) => {
              const week = 14 * 24 * 60 * 60 * 1000
              const choiceDateTime = new Date(self.searchData[item.timeType.time])
              if (self.searchData[item.timeType.time]) {
                if (item.timeType.way === 'start') {
                  return time.getTime() < (choiceDateTime.getTime() - week) || time.getTime() > choiceDateTime.getTime()
                } else {
                  return time.getTime() < (choiceDateTime - 8.64e7) || time.getTime() > (choiceDateTime.getTime() + week - 8.64e7)
                }
              }
            }
          }
        }
        // 限制90天以内：limitMonthNine: true
        if (item.timeType && item.timeType.limitMonthNine) {
          return {
            // 设置快捷选项
            shortcuts,
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              self.searchData[item.timeType.time] = minDate.getTime()
              if (maxDate) {
                self.searchData[item.timeType.time] = ''
              }
            },
            disabledDate: (time) => {
              const monthNine = 90 * 24 * 60 * 60 * 1000
              const choiceDateTime = new Date(self.searchData[item.timeType.time])
              if (self.searchData[item.timeType.time]) {
                if (item.timeType.way === 'start') {
                  return time.getTime() < (choiceDateTime.getTime() - monthNine) || time.getTime() > choiceDateTime.getTime()
                } else {
                  return time.getTime() < (choiceDateTime - 8.64e7) || time.getTime() > (choiceDateTime.getTime() + monthNine - 8.64e7)
                }
              }
            }
          }
        }
        if (item.timeType && item.timeType.limit180Day) {
          return {
            // 设置快捷选项
            shortcuts,
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              self.searchData[item.timeType.time] = minDate.getTime()
              if (maxDate) {
                self.searchData[item.timeType.time] = ''
              }
            },
            disabledDate: (time) => {
              const monthNine = 180 * 24 * 60 * 60 * 1000
              const choiceDateTime = new Date(self.searchData[item.timeType.time])
              if (self.searchData[item.timeType.time]) {
                if (item.timeType.way === 'start') {
                  return time.getTime() < (choiceDateTime.getTime() - monthNine) || time.getTime() > choiceDateTime.getTime()
                } else {
                  return time.getTime() < (choiceDateTime - 8.64e7) || time.getTime() > (choiceDateTime.getTime() + monthNine - 8.64e7)
                }
              }
            }
          }
        }
        // 限制大于等于当前时间且限制开始时间小于结束时间及结束时间大于开始时间：
        // 参数限定：greaterNowTime: true
        if (item.timeType && item.timeType.greaterNowTime) {
          return {
            // 设置快捷选项
            shortcuts,
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              self.searchData[item.timeType.time] = minDate.getTime()
              if (maxDate) {
                self.searchData[item.timeType.time] = ''
              }
            },
            disabledDate: (time) => {
              const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
              const nowTimes = Date.now() - 8.64e7
              if (self.searchData[item.timeType.time]) {
                if (item.timeType.way === 'start') {
                  return (time.getTime() < nowTimes) || (time.getTime() >= choiceDateTime)
                } else {
                  return (time.getTime() < nowTimes) || (time.getTime() < (choiceDateTime - 8.64e7))
                }
              } else {
                return time.getTime() < nowTimes
              }
            }
          }
        }
        // 限制开始时间小于结束时间，结束时间大于开始时间：
        if (item.timeType) {
          return {
            // 设置快捷选项
            shortcuts,
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              self.searchData[item.timeType.time] = minDate.getTime()
              if (maxDate) {
                self.searchData[item.timeType.time] = ''
              }
            },
            disabledDate: (time) => {
              const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
              if (self.searchData[item.timeType.time]) {
                if (item.timeType.way === 'start') {
                  return time.getTime() >= choiceDateTime
                } else {
                  return time.getTime() < (choiceDateTime - 8.64e7)
                }
              }
            }
          }
        } else {
          return {
            // 设置快捷选项
            shortcuts
          }
        }
      }
    },
    // 年月日 时分秒-带时分秒或时分
    // 设置时间控制-开始时间小于结束时间,结束时间大于开始时间
    dateTimePickerOptions(item) {
      const self = this
      return (item) => {
        // 限制一个月30天时间内：limitMonth: true
        if (item.timeType && item.timeType.limitMonth) {
          return {
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              self.searchData[item.timeType.time] = minDate.getTime()
              if (maxDate) {
                self.searchData[item.timeType.time] = ''
              }
            },
            disabledDate: (time) => {
              const month = 30 * 24 * 60 * 60 * 1000
              const choiceDateTime = new Date(self.searchData[item.timeType.time])
              if (self.searchData[item.timeType.time]) {
                if (item.timeType.way === 'start') {
                  return time.getTime() < (choiceDateTime.getTime() - month) || time.getTime() > choiceDateTime.getTime()
                } else {
                  return time.getTime() < choiceDateTime || time.getTime() > choiceDateTime.getTime() + month
                }
              }
            }
          }
        }
        // 限制一周七天以内：limitWeek: true
        if (item.timeType && item.timeType.limitWeek) {
          return {
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              self.searchData[item.timeType.time] = minDate.getTime()
              if (maxDate) {
                self.searchData[item.timeType.time] = ''
              }
            },
            disabledDate: (time) => {
              const week = 7 * 24 * 60 * 60 * 1000
              const choiceDateTime = new Date(self.searchData[item.timeType.time])
              if (self.searchData[item.timeType.time]) {
                if (item.timeType.way === 'start') {
                  return time.getTime() < (choiceDateTime.getTime() - week) || time.getTime() > choiceDateTime.getTime()
                } else {
                  return time.getTime() < (choiceDateTime - 8.64e7) || time.getTime() > (choiceDateTime.getTime() + week - 8.64e7)
                }
              }
            }
          }
        }
        // 限制开始时间小于结束时间及结束时间大于开始时间：
        // 参数限定：greaterFlightTime: true, 不限当前时间, 限航班日期
        // 限制起飞时间大于等于航班日期，到达时间大于等于航班日期:hasFlightDate-航班日期
        if (item.timeType && item.timeType.greaterFlightTime && item.timeType.hasFlightDate) {
          return {
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              self.searchData[item.timeType.time] = minDate.getTime()
              if (maxDate) {
                self.searchData[item.timeType.time] = ''
              }
            },
            disabledDate: (time) => {
              const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
              const flightDt = formatDate(item.timeType.hasFlightDate)
              if (self.searchData[item.timeType.time]) {
                if (item.timeType.way === 'start') {
                  return (time.getTime() < flightDt) || (time.getTime() > choiceDateTime)
                } else {
                  return (time.getTime() < flightDt) || (time.getTime() < (choiceDateTime - 8.64e7))
                }
              } else {
                return time.getTime() < flightDt
              }
            }
          }
        }
        // 限制大于等于当前时间且限制开始时间小于结束时间及结束时间大于开始时间：
        // 参数限定：greaterNowTime: true, 限当前时间和航班日期
        // 限制起飞时间大于等于航班日期，到达时间大于等于航班日期:hasFlightDate-航班日期
        if (item.timeType && item.timeType.greaterNowTime && item.timeType.hasFlightDate) {
          return {
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              self.searchData[item.timeType.time] = minDate.getTime()
              if (maxDate) {
                self.searchData[item.timeType.time] = ''
              }
            },
            disabledDate: (time) => {
              const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
              let nowTimes = Date.now() - 8.64e7
              const flightDt = formatDate(item.timeType.hasFlightDate)
              if (nowTimes < flightDt) {
                nowTimes = flightDt
              }
              if (self.searchData[item.timeType.time]) {
                if (item.timeType.way === 'start') {
                  return (time.getTime() < nowTimes) || (time.getTime() > choiceDateTime)
                } else {
                  return (time.getTime() < nowTimes) || (time.getTime() < (choiceDateTime - 8.64e7))
                }
              } else {
                return time.getTime() < nowTimes
              }
            }
          }
        }
        // 限制大于等于当前时间且限制开始时间小于结束时间及结束时间大于开始时间：
        // 参数限定：greaterNowTime: true
        if (item.timeType && item.timeType.greaterNowTime) {
          return {
            // 设置不能选择的日期
            onPick: ({ maxDate, minDate }) => {
              self.searchData[item.timeType.time] = minDate.getTime()
              if (maxDate) {
                self.searchData[item.timeType.time] = ''
              }
            },
            disabledDate: (time) => {
              const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
              const nowTimes = Date.now() - 8.64e7
              if (self.searchData[item.timeType.time]) {
                if (item.timeType.way === 'start') {
                  return (time.getTime() < nowTimes) || (time.getTime() >= choiceDateTime)
                } else {
                  return (time.getTime() < nowTimes) || (time.getTime() < (choiceDateTime - 8.64e7))
                }
              } else {
                return time.getTime() < nowTimes
              }
            },
            selectableRange: item.startTimeRange ? item.startTimeRange : ''
          }
        }
        // 限制开始时间小于结束时间，结束时间大于开始时间：
        if (item.timeType) {
          if (item.timeType.way === 'start') {
            return {
              // 设置不能选择的日期
              onPick: ({ maxDate, minDate }) => {
                self.searchData[item.timeType.time] = minDate.getTime()
                if (maxDate) {
                  self.searchData[item.timeType.time] = ''
                }
              },
              disabledDate: (time) => {
                const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
                if (self.searchData[item.timeType.time]) {
                  if (item.timeType.way === 'start') {
                    return time.getTime() >= choiceDateTime
                  } else {
                    return time.getTime() < (choiceDateTime - 8.64e7)
                  }
                }
              },
              selectableRange: item.startTimeRange ? item.startTimeRange : ''
            }
          } else {
            return {
              // 设置不能选择的日期
              onPick: ({ maxDate, minDate }) => {
                self.searchData[item.timeType.time] = minDate.getTime()
                if (maxDate) {
                  self.searchData[item.timeType.time] = ''
                }
              },
              disabledDate: (time) => {
                const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
                if (self.searchData[item.timeType.time]) {
                  if (item.timeType.way === 'beginning') {
                    return time.getTime() >= choiceDateTime
                  } else {
                    return time.getTime() <= (choiceDateTime - 8.64e7)
                  }
                }
              },
              selectableRange: item.startTimeRange ? item.startTimeRange : ''
            }
          }
        } else {
          return {}
        }
      }
    },
    // 下拉框返回值逻辑处理:
    // noneRows为true时只是拿到当前code
    setBackSelectValue() {
      return (item, op) => {
        if (item.noneRows) {
          return op.value || op.dictCode || op.baseCustomerId
        }
        return { value: op.value || op.dictCode, label: op.label || op.dictName, rows: op }
      }
    },
    // 设置联想控件返回函数逻辑
    setAssociateChange() {
      return (val, row, item, itemIndex) => {
        // 得到valueProp的值
        if (item.noneRows) {
          return item.change(val)
        }
        // 得到labelProp的值
        if (item.onlyLable) {
          return item.change(row[item.labelProp])
        }
        // 同时返回valueProp的值和labelProp的值
        if (item.valAndLab) {
          return item.change(val, row[item.labelProp])
        }
        // 默认得到整行数据
        return item.change({ val, row, item, itemIndex })
      }
    },
    // 下拉框chang
    setSelectChange() {
      return (val, row, itemIndex, item) => {
        // 得到valueProp的值
        if (item.noneRows) {
          return item.change(val)
        }
        // 默认得到整行数据
        return item.change({ row, itemIndex })
      }
    },
    textInput() {
      return (val, row, itemIndex, item) => {
        // 得到valueProp的值
        if (item.noneRows) {
          return item.input(val)
        }
        // 默认得到整行数据
        return item.input({ row, itemIndex })
      }
    },
    // 设置输入框失焦事件-去除空格
    setBlurHandle() {
      return (item) => {
        const self = this
        if (!item.keepSpace) {
          self.searchData[item.prop] = trimHandle(self.searchData[item.prop])
        }
        if (item.keepNumber) {
          self.searchData[item.prop] = self.searchData[item.prop].replace(/[^0-9]/ig, '')
        }
        if (item.blur) {
          return item.blur(trimHandle(self.searchData[item.prop]))
        }
        return {}
      }
    }
  },
  created() {
    if (this.isHandle) {
      this.$nextTick(() => {
        const offsetTops = this.$refs.searchForm.$el.clientHeight
        this.$store.dispatch('wayTracking/setSearchForms', offsetTops)
      })
    }
    this.$dictionary.get(['CUSTOMER_GROUP'], true).then(res => {
      for (const i in res) {
        this.$set(this.comboBox, i, res[i])
      }

      this.customerGroupDict = this.comboBox['CUSTOMER_GROUP']
      this.customerGroupDict.forEach((item) => {
        if (item.isValid === true) {
          const data = {
            id: item.dictCode,
            className: item.dictName,
            classDes: item.remark
          }
          this.gridData.push(data)
        }
      })
    })
  },

  methods: {

    showCustomerGroup() {
      this.radioIdSelect = this.selectGroupId
      this.gridData.forEach((item) => {
        if (item.id === this.radioIdSelect) {
          this.setCurrent(item)
        }
      })
    },
    setCurrent(row) {
      this.$nextTick(() => {
        this.$refs.singleClassTable[0].setCurrentRow(row)
      })
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    // 确定选择企业分类
    confirmSelet() {
      this.$emit('confirmCustomerGroup', this.radioIdSelect)
      this.visible = false
    },
    // 单选框
    handleSelectionChange(index, row) {

    },
    // // 企业分类下拉选择变化
    // custmerGroupChange() {
    //   // this.radioIdSelect = this.formEnterpriseInfo.custmerGroup
    //   this.setCurrent(this.gridData[parseInt(this.radioIdSelect) - 1])
    // },
    rowClick(row) {
      this.radioIdSelect = row.id
      this.setCurrent(row)
    },
    // 收缩展开
    dropdownHandles() {
      this.showMoreForm = !this.showMoreForm
      if (this.unfoldHideHandle) {
        this.hideHandleBtn = !this.hideHandleBtn
      }
      this.$store.dispatch('wayTracking/setMoreFormTables', !this.autoTableHeights)
      this.$nextTick(() => {
        const offsetTops = this.$refs.searchForm.$el.clientHeight
        this.$store.dispatch('wayTracking/setSearchForms', offsetTops)
        this.$store.dispatch('wayTracking/setShowFormBool', this.showMoreForm)
        // this.$emit('onDropClick', this.showMoreForm)
      })
    },
    // label2触发事件
    labelToClickHandle(item, index) {
      this.$emit('labelToSubmit', { item, index })
    },
    // 按钮触发事件
    onClickSvgHandle(item, index) {
      this.$emit('onFormSvgIconClick', { item, index })
    },
    // 重置清空查询条件
    resetForm() {
      this.$nextTick(() => {
        this.$refs.searchForm.resetFields()
      })
    }
  }
}
</script>

<style lang="scss">
  .search-forms {
    position: relative;
    .more-icons {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -24px;
      margin: auto;
      z-index: 2;
      width: 100px;
      height: 30px;
      &:hover {
        cursor: pointer;
      }
      img {
        display: block;
        width: 100%;
        height: 100%;
        margin: auto;
      }
    }
    .form-svgicon {
      width: 25px !important;
      height: 25px !important;
      &:hover {
        cursor: pointer;
      }
    }
    .textareaStyles {
      .el-form-item__content {
        height: unset !important;
      }
    }
    .el-form-item{
      align-items: flex-end !important;
    }
  }
</style>

<style lang="scss" scoped>
// .making-task .search-forms .form-checkbox {
//   margin-left: auto !important;
// }
.form-checkbox {
  ::v-deep .el-form-item__label-wrap {
    visibility: hidden;
  }
}
.making-task .search-forms .form-checkbox ::v-deep .el-form-item__content {
  justify-content: flex-end;
}

.making-task .btn-checkbox {
  display: flex;
  margin-left: auto;
  width: 16.66%;
  padding-right: 10px;
  >.el-form-item {
    width: 100%;
  }
}
.making-task .width-two {
  width: 33.32%;
  >.el-form-item {
    width: 50%;
  }
}
.item-svg-icon-font {
  position: absolute;
  top: -21px;
  left: 30%;
  cursor: pointer;
}
#custmerGroupTable{
  height: 300px ;
}
 #custmerGroupTable ::v-deep th.is-leaf{
  text-align: left !important;
  background-color:#1C1D80  !important;
  padding:5px 0 !important;
  color:#fff;
}
#custmerGroupTable  ::v-deep .cell.el-tooltip {
  white-space: pre-wrap !important;
  text-align: left !important;
}
#custmerGroupTable  ::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #1C1D80  !important;;
  background: #1C1D80  !important;;
}
#btnGrop {
  text-align: center;
  padding-top: 10px;
  .el-button:hover{
    border-color: #1C1D80  !important;
    color:#1C1D80 ;
    background-color:#fff;
  }
  .el-button--primary{
    border-color: #1C1D80  !important;;
    background: #1C1D80  !important;;
  }
  .el-button--primary:hover{
    color:#fff
  }

}
.icon-a-icon41{
    color: #FF5806;
    margin-left: 4px;
  }
.el-form-item.is-error .none-border {
  border: 0px !important;
}
::v-deep .selfAdaptionStyle {
  right: 0px !important;
  left: unset !important;
  .popper__arrow{
    left:unset !important;
    right: 100px !important;
  }
}
.making-task .search-forms {
  .left-half {
    width: 8.33%;
    padding-right: 0;
  }
  .right-half {
    width: 8.33%;
    ::v-deep .el-form-item__label-wrap {
      visibility: hidden;
    }
  }
}
.customer-item {
    width: 33.33% !important;
  }
</style>