devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

element-ui. 表单组件封装_element ui 表单组件

作者：我家自动化 | 2024-03-21 08:36:53

赞

踩

element ui 表单组件

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

<FormQueryList ref="baseFormRef" :is-handle="false" :search-data="baseData" :search-form="searchForm" :form-rules="baseFormRules"></FormQueryList>
  1.  baseFormRules: baseFormRulesVo, // 基本form表单校验 
  2. baseData: {
  3.         countersignType: 'B',
  4.         countersignName: '',
  5.         creatorName: '',
  6.         applyDepartment: '',
  7.         contact: '',
  8.         applicantTime: '',
  9.         settleCompanyName: ''
  10.       },
  11.       searchForm: [
  12.         { type: 'Select', label: '类型', prop: 'countersignType', options: [], props: [], focus: (n) => { }, change: (row) => { this.changeType(row) }, placeholder: '请选择', noneRows: true, disabled: false },
  13.         { type: 'Input', label: '会签名称', prop: 'countersignName', placeholder: '请输入', disabled: false },
  14.         { type: 'Input', label: '申请人', prop: 'creatorName', disabled: true },
  15.         { type: 'Input', label: '申请部门', prop: 'applyDepartment', disabled: true },
  16.         { type: 'Input', label: '联系方式', prop: 'contact', disabled: true },
  17.         { type: 'Input', label: '申请时间', prop: 'applicantTime', disabled: true },
  18.         { type: 'Input', label: '所属公司', prop: 'settleCompanyName', disabled: true }
  19.       ],

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

  1.      <div v-for="(item,index) in bussinessItemLists" :key="index" class="param-arr">
  2.         <div class="group-index">
  3.           <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>
  4.         </div>
  5.       </div>  
  6.  
  7.  
  8.  
  9. this.$refs.formRefOne.map(item => {
  10.           item.$refs.searchForm.validate((valid) => {
  11.             if (!valid) {
  12.               count++
  13.               return
  14.             }
  15.           })
  16.         })

1.Form组件封装

  1. <template>
  2.   <el-form ref="searchForm" :model="searchData" :rules="formRules" :disabled="isDisabled" size="mini" inline label-width="auto" class="search-forms" @submit.native.prevent>
  3.     <el-form-item v-for="(item, index) in searchForm" :key="item.prop" :label="item.label" :prop="item.prop" :class="setFormClasses(item)" :tabindex="index">
  4.       <!--自定义标题-->
  5.       <template v-if="item.label2" slot="label">
  6.         <div class="custom-label">
  7.           <span>{{ item.label }}</span>
  8.           <span class="label2" @click="labelToClickHandle(item, index)">{{ item.label2 }}</span>
  9.         </div>
  10.       </template>
  11.       <!-- 输入框 -->
  12.       <el-input
  13.         v-if="item.type==='Input'"
  14.         v-model="searchData[item.prop]"
  15.         :dbc="item.dbc"
  16.         :clearable="item.clearable"
  17.         :title="item.isHideTitle ? '':searchData[item.prop]"
  18.         :placeholder="item.placeholder"
  19.         :disabled="item.disabled"
  20.         :readonly="item.readingOnly"
  21.         :maxlength="item.maxLength"
  22.         :minlength="item.minLength"
  23.         :max="item.max"
  24.         :min="item.min"
  25.         :type="item.inputWay?item.inputWay:'text'"
  26.         :case="item.caseUpper?item.caseUpper:''"
  27.         :trim="item.trim?item.trim:'trim'"
  28.         @blur="setBlurHandle(item)"
  29.         @focus="item.focus?item.focus(searchData[item.prop]):{}"
  30.         @change="item.change?item.change(searchData[item.prop],itemIndex):{}"
  31.         @input="item.input?item.input(searchData[item.prop]):{}"
  32.       >
  33.         <template v-if="item.isUnit" slot="append">{{ item.isUnit }}</template>
  34.         <template v-if="item.hasIcons" slot="append">
  35.           <div class="main-icons" @click="onClickSvgHandle(item, index)">
  36.             <SvgIconFont :icon-class="item.hasIcons"></SvgIconFont>
  37.           </div>
  38.         </template>
  39.       </el-input>
  40.       <!-- 下拉框 -->
  41.       <el-select
  42.         v-if="item.type==='Select'&& item.customerDisplay === true"
  43.         v-model="searchData[item.prop]"
  44.         :clearable="!item.clearable"
  45.         filterable
  46.         :filter-method="item.dataFilter"
  47.         :multiple="item.multiselect||false"
  48.         :multiple-limit="item.multipleLimit||0"
  49.         :disabled="item.disabled"
  50.         allow-create
  51.         @change="item.change?item.change(searchData[item.prop]):{}"
  52.         @focus="item.focus?item.focus(index):{}"
  53.         @clear="item.clear?item.clear(searchData[item.prop],itemIndex):{}"
  54.       >
  55.         <el-option
  56.           v-for="op in item.options"
  57.           :key="op.value || op.dictCode"
  58.           :label="op.label || op.dictCode"
  59.           :value="setBackSelectValue(item, op)"
  60.         >
  61.           <span style="float: left">{{ op.label || op.dictName }}</span>
  62.           <span style="float: right; color: #8492a6; font-size: 13px">{{ op.value ||op.dictCode }}</span>
  63.         </el-option>
  64.       </el-select>
  65.       <!-- 下拉框，不允许自己创建， -->
  66.       <el-select
  67.         v-if="item.type==='Select'&& item.customerDisplay !== true &&item.allowCreate!==true"
  68.         v-model="searchData[item.prop]"
  69.         :clearable="!item.clearable"
  70.         filterable
  71.         :multiple="item.multiselect||false"
  72.         :multiple-limit="item.multipleLimit||0"
  73.         :disabled="item.disabled"
  74.         :placeholder="item.placeholder?item.placeholder:''"
  75.         @change="item.change?item.change(searchData[item.prop]):{}"
  76.         @focus="item.focus?item.focus(index):{}"
  77.         @clear="item.clear?item.clear(searchData[item.prop],itemIndex):{}"
  78.       >
  79.         <el-option
  80.           v-for="op in item.options"
  81.           :key="op.value || op.dictCode ||op.baseCustomerId"
  82.           :label="op.label || op.dictName||op.customerName"
  83.           :value="setBackSelectValue(item, op)"
  84.         >
  85.         </el-option>
  86.       </el-select>
  87.       <el-popover
  88.         v-if="item.label ==='企业分类' && showTips"
  89.         v-model="visible"
  90.         placement="bottom"
  91.         title=""
  92.         width="800"
  93.         trigger="click"
  94.         @show="showCustomerGroup"
  95.       >     <el-table
  96.               id="custmerGroupTable"
  97.               ref="singleClassTable"
  98.               :data="gridData"
  99.               height="350"
  100.               highlight-current-row
  101.               @current-change="handleCurrentChange"
  102.               @row-click="rowClick"
  103.             >
  104.               <el-table-column label="选择" width="50">
  105.                 <template slot-scope="scope">
  106.                   <el-radio v-model="radioIdSelect" :label="scope.row.id" @change.native="handleSelectionChange(scope.$index,scope.row)">&nbsp;</el-radio>
  107.                 </template>
  108.               </el-table-column>
  109.  
  110.               <el-table-column width="150" property="className" label="企业分类"></el-table-column>
  111.               <el-table-column property="classDes" label="描述"></el-table-column>
  112.  
  113.             </el-table>
  114.         <div id="btnGrop" class="linebuttons">
  115.           <el-button class="blue-border" @click="visible = false">取 消</el-button>
  116.           <el-button type="primary" @click="confirmSelet">确 定</el-button>
  117.         </div>
  118.         <span slot="reference" class="iconfont icon-a-icon41 "></span>
  119.       </el-popover>
  120.       <!-- 下拉允许创建 -->
  121.       <el-select
  122.         v-if="item.type==='Select'&& item.allowCreate===true"
  123.         v-model="searchData[item.prop]"
  124.         :clearable="!item.clearable"
  125.         filterable
  126.         allow-create
  127.         :multiple="item.multiselect||false"
  128.         :multiple-limit="item.multipleLimit||0"
  129.         :disabled="item.disabled"
  130.         @change="item.change?item.change(searchData[item.prop]):{}"
  131.         @focus="item.focus?item.focus(index):{}"
  132.         @clear="item.clear?item.clear(searchData[item.prop],itemIndex):{}"
  133.       >
  134.         <el-option
  135.           v-for="op in item.options"
  136.           :key="op.value || op.dictCode "
  137.           :label="op.label || op.dictName "
  138.           :value="setBackSelectValue(item, op)"
  139.         >
  140.         </el-option>
  141.       </el-select>
  142.       <!-- 下拉框含索引 -->
  143.       <el-select
  144.         v-if="item.type==='SelectHasIndex'"
  145.         v-model="searchData[item.prop]"
  146.         clearable
  147.         filterable
  148.         :multiple="item.multiselect||false"
  149.         :multiple-limit="item.multipleLimit||0"
  150.         :disabled="item.disabled"
  151.         @change="(val)=>setSelectChange(val,searchData[item.prop],itemIndex,item)"
  152.         @focus="item.focus?item.focus(index):{}"
  153.       >
  154.         <el-option
  155.           v-for="op in item.options"
  156.           :key="op.value || op.dictCode"
  157.           :label="op.label || op.dictName"
  158.           :value="setBackSelectValue(item, op)"
  159.         ></el-option>
  160.       </el-select>
  161.  
  162.       <!--联想控件-->
  163.       <el-associate
  164.         v-if="item.type==='Associate'"
  165.         v-model="searchData[item.prop]"
  166.         :popper-class="item.popperClass ? item.popperClass: ''"
  167.         :columns="item.columns"
  168.         :clearable="true"
  169.         :dbc="item.dbc===false?item.dbc:true"
  170.         :multiple="item.multiple"
  171.         :multiple-limit="item.multipleLimit||0"
  172.         :disabled="item.disabled"
  173.         :value-prop="item.valueProp"
  174.         :label-prop="item.labelProp"
  175.         :display-init="item.displayInit ?searchData[item.displayInit]:searchData[item.prop]"
  176.         :records-key="item.recordsKey"
  177.         :total-key="item.totalKey"
  178.         :keep-input-value="true"
  179.         :init-search-keep-value="true"
  180.         :query-method="item.queryMethod"
  181.         :placeholder="item.placeholder"
  182.         :popper-append-to-body="false"
  183.         :allow-create="item.allowCreate?item.allowCreate:false"
  184.         :allow-create-when-not-empty="item.allowCreateWhenNotEmpty?item.allowCreateWhenNotEmpty:false"
  185.         :title="searchData[item.title]||searchData[item.prop]"
  186.         :default-first-option="true"
  187.         @visible-change="(val)=>item.visibleChange?item.visibleChange(val):{}"
  188.         @change="(val,row)=>setAssociateChange(val,row,item,itemIndex)"
  189.         @blur="(val)=>item.blur?item.blur(val):{}"
  190.         @createMethod="(val)=>item.createMethod?item.createMethod(val):{}"
  191.       ></el-associate>
  192.       <!-- 单选 -->
  193.       <el-radio-group
  194.         v-if="item.type==='Radio'"
  195.         v-model="searchData[item.prop]"
  196.         @change="item.change && item.change(searchData[item.prop])"
  197.       >
  198.         <el-radio
  199.           v-for="ra in item.radios"
  200.           :key="ra.value"
  201.           :label="ra.value"
  202.           :disabled="item.disabled || ra.disabled"
  203.         >{{ ra.label }}</el-radio>
  204.       </el-radio-group>
  205.       <!-- 单选按钮 -->
  206.       <el-radio-group
  207.         v-if="item.type==='RadioButton'"
  208.         v-model="searchData[item.prop]"
  209.         @change="item.change && item.change(searchData[item.prop])"
  210.       >
  211.         <el-radio-button
  212.           v-for="ra in item.radios"
  213.           :key="ra.value"
  214.           :label="ra.value"
  215.           :disabled="item.disabled"
  216.         >{{ ra.label }}</el-radio-button>
  217.       </el-radio-group>
  218.       <!-- 复选框 -->
  219.       <el-checkbox-group
  220.         v-if="item.extraSingle"
  221.         v-model="searchData[item.extraSingle.prop]"
  222.         class="none-border"
  223.       >
  224.         <el-checkbox
  225.           v-for="ch in item.extraSingle.checkboxs"
  226.           :key="ch.value || ch.dictCode"
  227.           :label="ch.value || ch.dictCode"
  228.         >{{ ch.label || ch.dictName }}</el-checkbox>
  229.       </el-checkbox-group>
  230.       <el-checkbox-group
  231.         v-if="item.type==='Checkbox'"
  232.         v-model="searchData[item.prop]"
  233.       >
  234.         <el-checkbox
  235.           v-for="ch in item.checkboxs"
  236.           :key="ch.value || ch.dictCode||ch.uldCode"
  237.           :label="ch.value || ch.dictCode||ch.uldCode"
  238.           :disabled="item.disabled||ch.disabled"
  239.           @change="item.change ? item.change(searchData[item.prop]) : {}"
  240.         >{{ ch.label || ch.dictName ||ch.uldCode }}</el-checkbox>
  241.       </el-checkbox-group>
  242.       <!-- 日期-不带时分秒 -->
  243.       <el-date-picker
  244.         v-if="item.type==='Date'"
  245.         v-model="searchData[item.prop]"
  246.         :title="searchData[item.prop]"
  247.         style="width: 100%"
  248.         :value-format="setFormatDate(item.formatDate)"
  249.         :format="setFormatHandle(item.formatType)"
  250.         :disabled="item.disabled"
  251.         :placeholder="item.placeholder"
  252.         :picker-options="localPickerOptions(item)"
  253.         @change="item.change?item.change(searchData[item.prop]):{}"
  254.       ></el-date-picker>
  255.       <!-- 时间 -->
  256.       <el-time-select
  257.         v-if="item.type==='Time'"
  258.         v-model="searchData[item.prop]"
  259.         :title="searchData[item.prop]"
  260.         style="width: 100%"
  261.         type=""
  262.         :disabled="item.disabled"
  263.         @change="item.change?item.change(searchData[item.prop]):{}"
  264.       ></el-time-select>
  265.       <!-- 日期时间-带时分秒或时分 -->
  266.       <el-date-picker
  267.         v-if="item.type==='DateTime'"
  268.         v-model="searchData[item.prop]"
  269.         :title="searchData[item.prop]"
  270.         style="width: 100%"
  271.         type="datetime"
  272.         :value-format="setFormatDateTime(item.formatDate)"
  273.         :format="setFormatTimeHandle(item.formatType)"
  274.         :disabled="item.disabled"
  275.         placeholder="选择日期时间"
  276.         :picker-options="dateTimePickerOptions(item)"
  277.         @change="item.change?item.change(searchData[item.prop]):{}"
  278.         @onClick="item.onClick?item.change(searchData[item.prop]):{}"
  279.       ></el-date-picker>
  280.       <!--精确到分-->
  281.       <el-date-picker
  282.         v-if="item.type==='DateTimeMM'"
  283.         v-model="searchData[item.prop]"
  284.         style="width: 100%"
  285.         type="datetime"
  286.         :value-format="setFormatDateTimeMM(item.formatDate)"
  287.         :format="setFormatTimeMM(item.formatType)"
  288.         :disabled="item.disabled"
  289.         :picker-options="dateTimePickerOptions(item)"
  290.         placeholder="选择日期时间"
  291.         @change="item.change?item.change(searchData[item.prop]):{}"
  292.       ></el-date-picker>
  293.       <!-- 滑块 -->
  294.       <el-slider
  295.         v-if="item.type==='Slider'"
  296.         v-model="searchData[item.prop]"
  297.         :disabled="item.disabled"
  298.       ></el-slider>
  299.       <!-- 开关 -->
  300.       <el-switch
  301.         v-if="item.type==='Switch'"
  302.         v-model="searchData[item.prop]"
  303.         :disabled="item.disabled"
  304.       ></el-switch>
  305.       <!--textarea文本框-->
  306.       <el-input
  307.         v-if="item.type==='TextArea'"
  308.         v-model="searchData[item.prop]"
  309.         :title="searchData[item.prop]"
  310.         type="textarea"
  311.         resize="none"
  312.         :autosize="item.autosize || { minRows: 2, maxRows: 10}"
  313.         :placeholder="item.placeholder"
  314.         :maxlength="item.maxLength"
  315.         :minlength="item.minLength"
  316.         :disabled="item.disabled ? item.disabled : false"
  317.         :show-word-limit="item.showWordLimit ? item.showWordLimit : false"
  318.         @blur="setBlurHandle(item)"
  319.         @input="(val)=>textInput(val,searchData[item.prop],itemIndex,item)"
  320.       >
  321.       </el-input>
  322.       <!--按钮及icon-->
  323.       <SvgIconFont
  324.         v-if="item.type==='SvgIcon'"
  325.         :icon-class="item.svgIconFont"
  326.         class="form-svgicon"
  327.         @click.native="item.click?item.click(searchData[item.prop]):{}"
  328.       ></SvgIconFont>
  329.       <!--控件左上角图标-->
  330.       <SvgIconFont
  331.         v-if="item.SvgIcon"
  332.         :icon-class="item.svgIconFont"
  333.         class="item-svg-icon-font"
  334.         @click.native="item.svgIconClick?item.svgIconClick():{}"
  335.       ></SvgIconFont>
  336.     </el-form-item>
  337.     <template v-if=" isHandle || isHandle&&!hideHandleBtn&&(unLoadOrder||appendQuery||isPlat||unMblNo||unQuo||unBuyBoard) ">
  338.       <div class="btn-checkbox" :class="{ 'width-two' : isHandle&&!hideHandleBtn&&(unLoadOrder||appendQuery||isPlat||unMblNo||unQuo||unBuyBoard) }">
  339.         <!--追加查询,过滤退载订单-->
  340.         <el-form-item v-if="isHandle&&!hideHandleBtn&&(unLoadOrder||appendQuery||isPlat||unMblNo||unQuo||unBuyBoard)" label="none" class="form-checkbox operator-button">
  341.           <el-checkbox v-if="isPlat === true" v-model="searchData.isPlat">过滤自打板</el-checkbox>
  342.           <el-checkbox v-if="unLoadOrder === true" v-model="searchData.unLoadOrder" style="margin-right: 10px">过滤退载订单</el-checkbox>
  343.           <el-checkbox v-if="unMblNo === true" v-model="searchData.unMblNo">过滤空主单号</el-checkbox>
  344.           <el-checkbox v-if="appendQuery === true" v-model="searchData.appendQuery">追加查询</el-checkbox>
  345.           <el-checkbox v-if="unQuo === true" v-model="searchData.unQuotation">过滤作废报价单</el-checkbox>
  346.           <el-checkbox v-if="unBuyBoard === true" v-model="searchData.unBuyBoard">过滤作废临时买板</el-checkbox>
  347.         </el-form-item>
  348.         <!--查询按钮-->
  349.         <template v-if="isHandle">
  350.           <el-form-item v-show="!hideHandleBtn" label="none" class="form-button operator-button">
  351.             <el-button
  352.               v-for="item in searchHandle"
  353.               :key="item.label"
  354.               :type="item.type"
  355.               size="mini"
  356.               :class="item.class"
  357.               @click.native="item.handle({item,searchData})"
  358.             >{{ item.label }}</el-button>
  359.           </el-form-item>
  360.         </template>
  361.       </div>
  362.     </template>
  363.     <!--列表查询展开收缩icon-->
  364.     <template v-if="showIcon">
  365.       <div v-if="isHandle && (hideTwoRow || searchForm.length > 12)" class="more-icons" @click="dropdownHandles">
  366.         <img :src="setIconFontsSty" alt="more">
  367.       </div>
  368.     </template>
  369.   </el-form>
  370. </template>
  371.  
  372. <script>
  373. import { mapGetters } from 'vuex'
  374. import { trimHandle, formatDate } from '@/utils/commonss'
  375. import moment from 'moment'
  376. export default {
  377.   name: 'FormQueryList',
  378.   props: {
  379.     itemIndex: {
  380.       type: Number
  381.     },
  382.     isDisabled: {
  383.       type: Boolean,
  384.       default: false
  385.     }, // 整个表单禁用
  386.     isHandle: {
  387.       type: Boolean,
  388.       default: true
  389.     }, // 是否有查询按钮
  390.     unfoldHideHandle: {
  391.       type: Boolean,
  392.       default: false
  393.     }, // 自定义收缩时：是否隐藏查询按钮
  394.     labelWidth: {
  395.       type: String,
  396.       default: '100px'
  397.     },
  398.     size: {
  399.       type: String,
  400.       default: 'mini'
  401.     },
  402.     showTips: {
  403.       type: Boolean,
  404.       default: false
  405.     },
  406.     selectGroupId: {
  407.       type: String,
  408.       default: ''
  409.     },
  410.     searchForm: {
  411.       type: Array,
  412.       default: () => []
  413.     }, // 表单控件
  414.     searchHandle: {
  415.       type: Array,
  416.       default: () => []
  417.     }, // 操作按钮
  418.     searchData: {
  419.       type: Object,
  420.       default: () => {}
  421.     }, // 表单数据变量
  422.     formRules: {
  423.       type: Object,
  424.       default: () => {}
  425.     }, // 表单校验
  426.     appendQuery: {
  427.       type: Boolean,
  428.       default: false
  429.     },
  430.     unMblNo: {
  431.       type: Boolean,
  432.       default: false
  433.     },
  434.     unLoadOrder: {
  435.       type: Boolean,
  436.       default: false
  437.     },
  438.     isPlat: {
  439.       type: Boolean,
  440.       default: false
  441.     },
  442.     unQuo: {
  443.       type: Boolean,
  444.       default: false
  445.     },
  446.     unBuyBoard: {
  447.       type: Boolean,
  448.       default: false
  449.     },
  450.     showIcon: {
  451.       type: Boolean,
  452.       default: true
  453.     },
  454.     // hideHandleBtn: {
  455.     //   type: Boolean,
  456.     //   default: false
  457.     // },
  458.     hideTwoRow: {
  459.       type: Boolean,
  460.       default: false
  461.     },
  462.     unfoldForm: {
  463.       type: Boolean,
  464.       default: false
  465.     } // 自定义展开还是收缩
  466.   },
  467.   data() {
  468.     return {
  469.       currentRow: null,
  470.       visible: false,
  471.       radioIdSelect: '',
  472.       comboBox: {},
  473.       gridData: [],
  474.       // gridData: [{
  475.       //   id: 'A',
  476.       //   className: '民营企业',
  477.       //   classDes: '我国民营企业界定从广义上看，民营只与国有独资企业相对，而与任何非国有独资企业是相容的，包括国有持股和控股企业。因此，归纳民营企业的概念就是：非国有独资企业均为民营企业。从狭义的角度来看，“民营企业”仅指私营企业和以私营企业为主体的联营企业。'
  478.       // },
  479.       // {
  480.       //   id: 'B',
  481.       //   className: '政府机构',
  482.       //   classDes: '在广义上指中央和地方的全部立法、行政、司法和官僚机关。狭义的政府机构仅指中央和地方的行政机关、官僚机关，即依照国家法律设立并享有行政权力、担负行政管理职能的部分国家机构。'
  483.       // },
  484.       // {
  485.       //   id: 'C',
  486.       //   className: '外资企业',
  487.       //   classDes: '泛指依照我国有关法律规定，在我国境内设立的由外国投资者独自投资经营的企业。'
  488.       // },
  489.  
  490.       // {
  491.       //   id: 'D',
  492.       //   className: '境外企业',
  493.       //   classDes: '是指依照外国(地区)法律成立且实际管理机构不在中国境内，但在中国境内设立机构、场所的，或者在中国境内未设立机构、场所，但有来源于中国境内所得的企业。'
  494.       // },
  495.  
  496.       // {
  497.       //   id: 'E',
  498.       //   className: '国有企业及国有控股企业',
  499.       //   classDes: '1) 国有企业是指企业全部资产归国家所有，并按规定登记注册的非公司制的经济组织。不包括有限责任公司中的国有独资公司。\n2) 国有控股企业是指在企业的全部资本中，国家资本股本占较高比例，并且由国家实际控制的企业。包括绝对控股企业和相对控股企业。国有绝对控股企业是指国家资本比例大于50%(含50%)的企业，包含未经改制的国有企业。国有相对控股企业是指国家资本比例不足50%，但相对高于企业中的其他经济成分所占比例的企业(相对控股)，或者虽不大于其他经济成份，但根据协议规定，由国家拥有实际控制权的企业(协议控制)。对于企业由三方合资，其中两家为国有企业，国家资本之和超过50%的，在填报"国有经济控股"时，国家资本不能按两家之和来计算，而应按企业的实际控股或控制情况来填报。'
  500.       // },
  501.       // {
  502.       //   id: 'F',
  503.       //   className: '合资企业',
  504.       //   classDes: '合资企业是指以法人投资者的身份，由国家、企业、个人的名义进行投资组建的企业。'
  505.       // },
  506.       // {
  507.       //   id: 'G',
  508.       //   className: '事业单位',
  509.       //   classDes: '事业单位，是指国家为了社会公益目的，由国家机关举办或者其他组织利用国有资产举办的，从事教育、科技、文化、卫生等活动的社会服务组织。事业单位接受政府领导，表现形式为组织或机构的法人实体。'
  510.       // },
  511.       // {
  512.       //   id: 'H',
  513.       //   className: '东航物流内部关联',
  514.       //   classDes: '由东航物流公司直接或间接控股，或存在重大影响的公司关联企业。'
  515.       // },
  516.       // {
  517.       //   id: 'I',
  518.       //   className: '东航集团内部关联',
  519.       //   classDes: '由东航集团内物流集团外直接或间接控股，或存在重大影响的公司关联企业。'
  520.       // },
  521.       // {
  522.       //   id: 'J',
  523.       //   className: '其他关联方-国企',
  524.       //   classDes: '非东航物流内非东航集团内的直接或间接控股，或存在重大影响的国有企业及国有控股关联企业。'
  525.       // },
  526.       // {
  527.       //   id: 'K',
  528.       //   className: '其他关联方-民营',
  529.       //   classDes: '非东航物流内非东航集团内的直接或间接控股，或存在重大影响的民营关联企业。'
  530.       // },
  531.       // {
  532.       //   id: 'L',
  533.       //   className: '其他关联方-外资',
  534.       //   classDes: '非东航物流内非东航集团内的直接或间接控股，或存在重大影响的外资关联企业。'
  535.       // },
  536.       // {
  537.       //   id: 'M',
  538.       //   className: '其他',
  539.       //   classDes: '其他。'
  540.       // }
  541.  
  542.       // ],
  543.       showMoreForm: this.unfoldForm || false, // 默认收缩部分表单
  544.       hideHandleBtn: this.unfoldShowHandle || false, // 收缩时：默认不隐藏查询重置区域按钮
  545.       upMore: require('@/assets/systembac/up.svg'),
  546.       downMore: require('@/assets/systembac/down.svg')
  547.     }
  548.   },
  549.   computed: {
  550.     /*
  551.     // 查询条件列表（展开折叠)
  552.     showSearchList: {
  553.       get: function() {
  554.         if (!this.showMoreForm && this.isHandle) {
  555.           if (this.searchForm.length <= 12) {
  556.             return this.searchForm
  557.           }
  558.           const newArr = [] // 存储数据
  559.           const classList = [] // 存储两个合并一起
  560.           let maxLength = 11 // 默认11
  561.           for (let i = 0; i < maxLength; i++) {
  562.             const item = this.searchForm[i]
  563.             newArr.push(item)
  564.             // 当有合并之后显示处理
  565.             if (item.class) {
  566.               maxLength = 11
  567.               maxLength += (classList.length / 2)
  568.               classList.push(i)
  569.             }
  570.           }
  571.           return newArr
  572.         }
  573.         return this.searchForm
  574.       },
  575.       set: function(val) {
  576.         this.showSearchList = val
  577.       }
  578.     },
  579.     */
  580.     ...mapGetters(['autoTableHeights']),
  581.     // 设置收缩展开
  582.     setIconFontsSty() {
  583.       const self = this
  584.       if (self.showMoreForm) {
  585.         for (const i in this.searchForm) {
  586.           if (self.searchForm[i].showMoreForm === 'hidden') {
  587.             self.searchForm[i].showMoreForm = 'show'
  588.             self.$set(self.searchForm[i], 'showMoreForm', self.searchForm[i].showMoreForm)
  589.           }
  590.         }
  591.         return this.upMore
  592.       } else {
  593.         for (const j in self.searchForm) {
  594.           if (self.searchForm[j].showMoreForm === 'show') {
  595.             self.searchForm[j].showMoreForm = 'hidden'
  596.             self.$set(self.searchForm[j], 'showMoreForm', self.searchForm[j].showMoreForm)
  597.           }
  598.         }
  599.         return this.downMore
  600.       }
  601.     },
  602.     // 设置form表单样式
  603.     setFormClasses() {
  604.       return (item) => {
  605.         if (item.showMoreForm === 'hidden') {
  606.           return 'hiddenNoneItems'
  607.         }
  608.         if (item.label === 'empty') {
  609.           if (item.type === 'TextArea') {
  610.             return 'emptyLabel textareaStyles'
  611.           }
  612.           return 'emptyLabel'
  613.         }
  614.         if (item.label === 'none') {
  615.           if (item.type === 'TextArea') {
  616.             return 'noneLabel textareaStyles'
  617.           }
  618.           if (item.class === 'bubbleCheckbox') {
  619.             return 'noneLabel bubbleCheckbox'
  620.           }
  621.           return 'noneLabel'
  622.         }
  623.         if (item.class === 'harf') {
  624.           if (item.type === 'TextArea') {
  625.             return 'harfLabel textareaStyles'
  626.           }
  627.           if (item.bubbleInp === 'bubbleInp') {
  628.             return 'harfLabel bubbleInp'
  629.           }
  630.           return 'harfLabel'
  631.         }
  632.         if (item.label === 'check') {
  633.           if (item.type === 'TextArea') {
  634.             return 'checkLabel textareaStyles'
  635.           }
  636.           return 'checkLabel'
  637.         }
  638.         if (item.hasIcons) {
  639.           return 'hasIcons'
  640.         }
  641.         if (item.class) {
  642.           if (item.type === 'TextArea') {
  643.             return item.class + ' textareaStyles'
  644.           }
  645.           return item.class
  646.         }
  647.         if (item.type === 'TextArea') {
  648.           return 'textareaStyles'
  649.         }
  650.         return ''
  651.       }
  652.     },
  653.     // 设置时间格式-可传formatDate属性-所得值类型
  654.     setFormatDate() {
  655.       return (val) => {
  656.         if (val) {
  657.           return val
  658.         }
  659.         return 'yyyy-MM-dd'
  660.       }
  661.     },
  662.     // 设置时间格式-可传formatType属性
  663.     // 所显示类型,如显示yyyy/MM/dd
  664.     setFormatHandle() {
  665.       return (val) => {
  666.         if (val) {
  667.           return val
  668.         }
  669.         return 'yyyy-MM-dd'
  670.       }
  671.     },
  672.     // 设置时间格式-可传formatDate属性-所得值类型
  673.     setFormatDateTime() {
  674.       return (val) => {
  675.         if (val) {
  676.           return val
  677.         }
  678.         return 'yyyy-MM-dd HH:mm:ss'
  679.       }
  680.     },
  681.     // 设置时间格式-可传formatType属性
  682.     // 所显示类型,如显示yyyy/MM/dd
  683.     setFormatTimeHandle() {
  684.       return (val) => {
  685.         if (val) {
  686.           return val
  687.         }
  688.         return 'yyyy-MM-dd HH:mm:ss'
  689.       }
  690.     },
  691.     setFormatTimeMM() {
  692.       return (val) => {
  693.         if (val) {
  694.           return val
  695.         }
  696.         return 'yyyy-MM-dd HH:mm'
  697.       }
  698.     },
  699.     setFormatDateTimeMM() {
  700.       return (val) => {
  701.         if (val) {
  702.           return val
  703.         }
  704.         return 'yyyy-MM-dd HH:mm'
  705.       }
  706.     },
  707.     // 年月日-不带时分秒
  708.     // 设置时间控制-开始时间小于结束时间,结束时间大于开始时间
  709.     localPickerOptions() {
  710.       const self = this
  711.       return (item) => {
  712.         const shortcuts = [
  713.           {
  714.             text: '今天',
  715.             onClick(picker) {
  716.               picker.$emit('pick', new Date())
  717.             }
  718.           }, {
  719.             text: '昨天',
  720.             onClick(picker) {
  721.               const date = new Date()
  722.               date.setTime(date.getTime() - 3600 * 1000 * 24)
  723.               picker.$emit('pick', date)
  724.             }
  725.           }, {
  726.             text: '一周前',
  727.             onClick(picker) {
  728.               const date = new Date()
  729.               date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
  730.               picker.$emit('pick', date)
  731.             }
  732.           }
  733.         ]
  734.         // 禁用所有日期
  735.         if (item.timeType && item.timeType.disabledAllDate) {
  736.           return {
  737.             // 设置快捷选项
  738.             shortcuts,
  739.             // 设置不能选择的日期
  740.             disabledDate: (time) => {
  741.               return true
  742.             }
  743.           }
  744.         }
  745.         // 限制自定义区间
  746.         if (item.timeType && item.timeType.definedInterval) {
  747.           const { start, end } = item.timeType.definedInterval
  748.           return {
  749.             // 设置快捷选项
  750.             shortcuts,
  751.             // 设置不能选择的日期
  752.             disabledDate: (time) => {
  753.               const startTime = new Date(start).getTime()
  754.               const endTime = new Date(end).getTime()
  755.               return time.getTime() < startTime - 8.64e7 || time.getTime() > endTime
  756.             }
  757.           }
  758.         }
  759.         // 限制一个月30天时间内：limitMonth: true
  760.         if (item.timeType && item.timeType.limitMonth) {
  761.           return {
  762.             // 设置快捷选项
  763.             shortcuts,
  764.             // 设置不能选择的日期
  765.             onPick: ({ maxDate, minDate }) => {
  766.               self.searchData[item.timeType.time] = minDate.getTime()
  767.               if (maxDate) {
  768.                 self.searchData[item.timeType.time] = ''
  769.               }
  770.             },
  771.             disabledDate: (time) => {
  772.               const compareTime = self.searchData[item.timeType.time]
  773.               const choiceDateTime = new Date(compareTime)
  774.               if (compareTime) {
  775.                 if (item.timeType.way === 'start') {
  776.                   const preMonth = moment(choiceDateTime).subtract(1, 'months').format()
  777.                   const preMontDate = new Date(preMonth) - 8.64e7
  778.                   return time.getTime() < preMontDate || time.getTime() > choiceDateTime.getTime()
  779.                 } else {
  780.                   const nextMonth = moment(choiceDateTime).add(1, 'months').format()
  781.                   const nextMontDate = new Date(nextMonth)
  782.                   return time.getTime() < (choiceDateTime - 8.64e7) || time.getTime() > nextMontDate
  783.                 }
  784.               }
  785.             }
  786.           }
  787.         }
  788.         // 限制一周七天以内：limitWeek: true
  789.         if (item.timeType && item.timeType.limitWeek) {
  790.           return {
  791.             // 设置快捷选项
  792.             shortcuts,
  793.             // 设置不能选择的日期
  794.             onPick: ({ maxDate, minDate }) => {
  795.               self.searchData[item.timeType.time] = minDate.getTime()
  796.               if (maxDate) {
  797.                 self.searchData[item.timeType.time] = ''
  798.               }
  799.             },
  800.             disabledDate: (time) => {
  801.               const week = 7 * 24 * 60 * 60 * 1000
  802.               const choiceDateTime = new Date(self.searchData[item.timeType.time])
  803.               if (self.searchData[item.timeType.time]) {
  804.                 if (item.timeType.way === 'start') {
  805.                   return time.getTime() < (choiceDateTime.getTime() - week) || time.getTime() > choiceDateTime.getTime()
  806.                 } else {
  807.                   return time.getTime() < (choiceDateTime - 8.64e7) || time.getTime() > (choiceDateTime.getTime() + week - 8.64e7)
  808.                 }
  809.               }
  810.             }
  811.           }
  812.         }
  813.         // 限制两周14天以内：twoWeek: true
  814.         if (item.timeType && item.timeType.twoWeek) {
  815.           return {
  816.             // 设置快捷选项
  817.             shortcuts,
  818.             // 设置不能选择的日期
  819.             onPick: ({ maxDate, minDate }) => {
  820.               self.searchData[item.timeType.time] = minDate.getTime()
  821.               if (maxDate) {
  822.                 self.searchData[item.timeType.time] = ''
  823.               }
  824.             },
  825.             disabledDate: (time) => {
  826.               const week = 14 * 24 * 60 * 60 * 1000
  827.               const choiceDateTime = new Date(self.searchData[item.timeType.time])
  828.               if (self.searchData[item.timeType.time]) {
  829.                 if (item.timeType.way === 'start') {
  830.                   return time.getTime() < (choiceDateTime.getTime() - week) || time.getTime() > choiceDateTime.getTime()
  831.                 } else {
  832.                   return time.getTime() < (choiceDateTime - 8.64e7) || time.getTime() > (choiceDateTime.getTime() + week - 8.64e7)
  833.                 }
  834.               }
  835.             }
  836.           }
  837.         }
  838.         // 限制90天以内：limitMonthNine: true
  839.         if (item.timeType && item.timeType.limitMonthNine) {
  840.           return {
  841.             // 设置快捷选项
  842.             shortcuts,
  843.             // 设置不能选择的日期
  844.             onPick: ({ maxDate, minDate }) => {
  845.               self.searchData[item.timeType.time] = minDate.getTime()
  846.               if (maxDate) {
  847.                 self.searchData[item.timeType.time] = ''
  848.               }
  849.             },
  850.             disabledDate: (time) => {
  851.               const monthNine = 90 * 24 * 60 * 60 * 1000
  852.               const choiceDateTime = new Date(self.searchData[item.timeType.time])
  853.               if (self.searchData[item.timeType.time]) {
  854.                 if (item.timeType.way === 'start') {
  855.                   return time.getTime() < (choiceDateTime.getTime() - monthNine) || time.getTime() > choiceDateTime.getTime()
  856.                 } else {
  857.                   return time.getTime() < (choiceDateTime - 8.64e7) || time.getTime() > (choiceDateTime.getTime() + monthNine - 8.64e7)
  858.                 }
  859.               }
  860.             }
  861.           }
  862.         }
  863.         if (item.timeType && item.timeType.limit180Day) {
  864.           return {
  865.             // 设置快捷选项
  866.             shortcuts,
  867.             // 设置不能选择的日期
  868.             onPick: ({ maxDate, minDate }) => {
  869.               self.searchData[item.timeType.time] = minDate.getTime()
  870.               if (maxDate) {
  871.                 self.searchData[item.timeType.time] = ''
  872.               }
  873.             },
  874.             disabledDate: (time) => {
  875.               const monthNine = 180 * 24 * 60 * 60 * 1000
  876.               const choiceDateTime = new Date(self.searchData[item.timeType.time])
  877.               if (self.searchData[item.timeType.time]) {
  878.                 if (item.timeType.way === 'start') {
  879.                   return time.getTime() < (choiceDateTime.getTime() - monthNine) || time.getTime() > choiceDateTime.getTime()
  880.                 } else {
  881.                   return time.getTime() < (choiceDateTime - 8.64e7) || time.getTime() > (choiceDateTime.getTime() + monthNine - 8.64e7)
  882.                 }
  883.               }
  884.             }
  885.           }
  886.         }
  887.         // 限制大于等于当前时间且限制开始时间小于结束时间及结束时间大于开始时间：
  888.         // 参数限定：greaterNowTime: true
  889.         if (item.timeType && item.timeType.greaterNowTime) {
  890.           return {
  891.             // 设置快捷选项
  892.             shortcuts,
  893.             // 设置不能选择的日期
  894.             onPick: ({ maxDate, minDate }) => {
  895.               self.searchData[item.timeType.time] = minDate.getTime()
  896.               if (maxDate) {
  897.                 self.searchData[item.timeType.time] = ''
  898.               }
  899.             },
  900.             disabledDate: (time) => {
  901.               const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
  902.               const nowTimes = Date.now() - 8.64e7
  903.               if (self.searchData[item.timeType.time]) {
  904.                 if (item.timeType.way === 'start') {
  905.                   return (time.getTime() < nowTimes) || (time.getTime() >= choiceDateTime)
  906.                 } else {
  907.                   return (time.getTime() < nowTimes) || (time.getTime() < (choiceDateTime - 8.64e7))
  908.                 }
  909.               } else {
  910.                 return time.getTime() < nowTimes
  911.               }
  912.             }
  913.           }
  914.         }
  915.         // 限制开始时间小于结束时间，结束时间大于开始时间：
  916.         if (item.timeType) {
  917.           return {
  918.             // 设置快捷选项
  919.             shortcuts,
  920.             // 设置不能选择的日期
  921.             onPick: ({ maxDate, minDate }) => {
  922.               self.searchData[item.timeType.time] = minDate.getTime()
  923.               if (maxDate) {
  924.                 self.searchData[item.timeType.time] = ''
  925.               }
  926.             },
  927.             disabledDate: (time) => {
  928.               const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
  929.               if (self.searchData[item.timeType.time]) {
  930.                 if (item.timeType.way === 'start') {
  931.                   return time.getTime() >= choiceDateTime
  932.                 } else {
  933.                   return time.getTime() < (choiceDateTime - 8.64e7)
  934.                 }
  935.               }
  936.             }
  937.           }
  938.         } else {
  939.           return {
  940.             // 设置快捷选项
  941.             shortcuts
  942.           }
  943.         }
  944.       }
  945.     },
  946.     // 年月日 时分秒-带时分秒或时分
  947.     // 设置时间控制-开始时间小于结束时间,结束时间大于开始时间
  948.     dateTimePickerOptions(item) {
  949.       const self = this
  950.       return (item) => {
  951.         // 限制一个月30天时间内：limitMonth: true
  952.         if (item.timeType && item.timeType.limitMonth) {
  953.           return {
  954.             // 设置不能选择的日期
  955.             onPick: ({ maxDate, minDate }) => {
  956.               self.searchData[item.timeType.time] = minDate.getTime()
  957.               if (maxDate) {
  958.                 self.searchData[item.timeType.time] = ''
  959.               }
  960.             },
  961.             disabledDate: (time) => {
  962.               const month = 30 * 24 * 60 * 60 * 1000
  963.               const choiceDateTime = new Date(self.searchData[item.timeType.time])
  964.               if (self.searchData[item.timeType.time]) {
  965.                 if (item.timeType.way === 'start') {
  966.                   return time.getTime() < (choiceDateTime.getTime() - month) || time.getTime() > choiceDateTime.getTime()
  967.                 } else {
  968.                   return time.getTime() < choiceDateTime || time.getTime() > choiceDateTime.getTime() + month
  969.                 }
  970.               }
  971.             }
  972.           }
  973.         }
  974.         // 限制一周七天以内：limitWeek: true
  975.         if (item.timeType && item.timeType.limitWeek) {
  976.           return {
  977.             // 设置不能选择的日期
  978.             onPick: ({ maxDate, minDate }) => {
  979.               self.searchData[item.timeType.time] = minDate.getTime()
  980.               if (maxDate) {
  981.                 self.searchData[item.timeType.time] = ''
  982.               }
  983.             },
  984.             disabledDate: (time) => {
  985.               const week = 7 * 24 * 60 * 60 * 1000
  986.               const choiceDateTime = new Date(self.searchData[item.timeType.time])
  987.               if (self.searchData[item.timeType.time]) {
  988.                 if (item.timeType.way === 'start') {
  989.                   return time.getTime() < (choiceDateTime.getTime() - week) || time.getTime() > choiceDateTime.getTime()
  990.                 } else {
  991.                   return time.getTime() < (choiceDateTime - 8.64e7) || time.getTime() > (choiceDateTime.getTime() + week - 8.64e7)
  992.                 }
  993.               }
  994.             }
  995.           }
  996.         }
  997.         // 限制开始时间小于结束时间及结束时间大于开始时间：
  998.         // 参数限定：greaterFlightTime: true, 不限当前时间, 限航班日期
  999.         // 限制起飞时间大于等于航班日期，到达时间大于等于航班日期:hasFlightDate-航班日期
  1000.         if (item.timeType && item.timeType.greaterFlightTime && item.timeType.hasFlightDate) {
  1001.           return {
  1002.             // 设置不能选择的日期
  1003.             onPick: ({ maxDate, minDate }) => {
  1004.               self.searchData[item.timeType.time] = minDate.getTime()
  1005.               if (maxDate) {
  1006.                 self.searchData[item.timeType.time] = ''
  1007.               }
  1008.             },
  1009.             disabledDate: (time) => {
  1010.               const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
  1011.               const flightDt = formatDate(item.timeType.hasFlightDate)
  1012.               if (self.searchData[item.timeType.time]) {
  1013.                 if (item.timeType.way === 'start') {
  1014.                   return (time.getTime() < flightDt) || (time.getTime() > choiceDateTime)
  1015.                 } else {
  1016.                   return (time.getTime() < flightDt) || (time.getTime() < (choiceDateTime - 8.64e7))
  1017.                 }
  1018.               } else {
  1019.                 return time.getTime() < flightDt
  1020.               }
  1021.             }
  1022.           }
  1023.         }
  1024.         // 限制大于等于当前时间且限制开始时间小于结束时间及结束时间大于开始时间：
  1025.         // 参数限定：greaterNowTime: true, 限当前时间和航班日期
  1026.         // 限制起飞时间大于等于航班日期，到达时间大于等于航班日期:hasFlightDate-航班日期
  1027.         if (item.timeType && item.timeType.greaterNowTime && item.timeType.hasFlightDate) {
  1028.           return {
  1029.             // 设置不能选择的日期
  1030.             onPick: ({ maxDate, minDate }) => {
  1031.               self.searchData[item.timeType.time] = minDate.getTime()
  1032.               if (maxDate) {
  1033.                 self.searchData[item.timeType.time] = ''
  1034.               }
  1035.             },
  1036.             disabledDate: (time) => {
  1037.               const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
  1038.               let nowTimes = Date.now() - 8.64e7
  1039.               const flightDt = formatDate(item.timeType.hasFlightDate)
  1040.               if (nowTimes < flightDt) {
  1041.                 nowTimes = flightDt
  1042.               }
  1043.               if (self.searchData[item.timeType.time]) {
  1044.                 if (item.timeType.way === 'start') {
  1045.                   return (time.getTime() < nowTimes) || (time.getTime() > choiceDateTime)
  1046.                 } else {
  1047.                   return (time.getTime() < nowTimes) || (time.getTime() < (choiceDateTime - 8.64e7))
  1048.                 }
  1049.               } else {
  1050.                 return time.getTime() < nowTimes
  1051.               }
  1052.             }
  1053.           }
  1054.         }
  1055.         // 限制大于等于当前时间且限制开始时间小于结束时间及结束时间大于开始时间：
  1056.         // 参数限定：greaterNowTime: true
  1057.         if (item.timeType && item.timeType.greaterNowTime) {
  1058.           return {
  1059.             // 设置不能选择的日期
  1060.             onPick: ({ maxDate, minDate }) => {
  1061.               self.searchData[item.timeType.time] = minDate.getTime()
  1062.               if (maxDate) {
  1063.                 self.searchData[item.timeType.time] = ''
  1064.               }
  1065.             },
  1066.             disabledDate: (time) => {
  1067.               const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
  1068.               const nowTimes = Date.now() - 8.64e7
  1069.               if (self.searchData[item.timeType.time]) {
  1070.                 if (item.timeType.way === 'start') {
  1071.                   return (time.getTime() < nowTimes) || (time.getTime() >= choiceDateTime)
  1072.                 } else {
  1073.                   return (time.getTime() < nowTimes) || (time.getTime() < (choiceDateTime - 8.64e7))
  1074.                 }
  1075.               } else {
  1076.                 return time.getTime() < nowTimes
  1077.               }
  1078.             },
  1079.             selectableRange: item.startTimeRange ? item.startTimeRange : ''
  1080.           }
  1081.         }
  1082.         // 限制开始时间小于结束时间，结束时间大于开始时间：
  1083.         if (item.timeType) {
  1084.           if (item.timeType.way === 'start') {
  1085.             return {
  1086.               // 设置不能选择的日期
  1087.               onPick: ({ maxDate, minDate }) => {
  1088.                 self.searchData[item.timeType.time] = minDate.getTime()
  1089.                 if (maxDate) {
  1090.                   self.searchData[item.timeType.time] = ''
  1091.                 }
  1092.               },
  1093.               disabledDate: (time) => {
  1094.                 const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
  1095.                 if (self.searchData[item.timeType.time]) {
  1096.                   if (item.timeType.way === 'start') {
  1097.                     return time.getTime() >= choiceDateTime
  1098.                   } else {
  1099.                     return time.getTime() < (choiceDateTime - 8.64e7)
  1100.                   }
  1101.                 }
  1102.               },
  1103.               selectableRange: item.startTimeRange ? item.startTimeRange : ''
  1104.             }
  1105.           } else {
  1106.             return {
  1107.               // 设置不能选择的日期
  1108.               onPick: ({ maxDate, minDate }) => {
  1109.                 self.searchData[item.timeType.time] = minDate.getTime()
  1110.                 if (maxDate) {
  1111.                   self.searchData[item.timeType.time] = ''
  1112.                 }
  1113.               },
  1114.               disabledDate: (time) => {
  1115.                 const choiceDateTime = new Date(self.searchData[item.timeType.time]).getTime()
  1116.                 if (self.searchData[item.timeType.time]) {
  1117.                   if (item.timeType.way === 'beginning') {
  1118.                     return time.getTime() >= choiceDateTime
  1119.                   } else {
  1120.                     return time.getTime() <= (choiceDateTime - 8.64e7)
  1121.                   }
  1122.                 }
  1123.               },
  1124.               selectableRange: item.startTimeRange ? item.startTimeRange : ''
  1125.             }
  1126.           }
  1127.         } else {
  1128.           return {}
  1129.         }
  1130.       }
  1131.     },
  1132.     // 下拉框返回值逻辑处理:
  1133.     // noneRows为true时只是拿到当前code
  1134.     setBackSelectValue() {
  1135.       return (item, op) => {
  1136.         if (item.noneRows) {
  1137.           return op.value || op.dictCode || op.baseCustomerId
  1138.         }
  1139.         return { value: op.value || op.dictCode, label: op.label || op.dictName, rows: op }
  1140.       }
  1141.     },
  1142.     // 设置联想控件返回函数逻辑
  1143.     setAssociateChange() {
  1144.       return (val, row, item, itemIndex) => {
  1145.         // 得到valueProp的值
  1146.         if (item.noneRows) {
  1147.           return item.change(val)
  1148.         }
  1149.         // 得到labelProp的值
  1150.         if (item.onlyLable) {
  1151.           return item.change(row[item.labelProp])
  1152.         }
  1153.         // 同时返回valueProp的值和labelProp的值
  1154.         if (item.valAndLab) {
  1155.           return item.change(val, row[item.labelProp])
  1156.         }
  1157.         // 默认得到整行数据
  1158.         return item.change({ val, row, item, itemIndex })
  1159.       }
  1160.     },
  1161.     // 下拉框chang
  1162.     setSelectChange() {
  1163.       return (val, row, itemIndex, item) => {
  1164.         // 得到valueProp的值
  1165.         if (item.noneRows) {
  1166.           return item.change(val)
  1167.         }
  1168.         // 默认得到整行数据
  1169.         return item.change({ row, itemIndex })
  1170.       }
  1171.     },
  1172.     textInput() {
  1173.       return (val, row, itemIndex, item) => {
  1174.         // 得到valueProp的值
  1175.         if (item.noneRows) {
  1176.           return item.input(val)
  1177.         }
  1178.         // 默认得到整行数据
  1179.         return item.input({ row, itemIndex })
  1180.       }
  1181.     },
  1182.     // 设置输入框失焦事件-去除空格
  1183.     setBlurHandle() {
  1184.       return (item) => {
  1185.         const self = this
  1186.         if (!item.keepSpace) {
  1187.           self.searchData[item.prop] = trimHandle(self.searchData[item.prop])
  1188.         }
  1189.         if (item.keepNumber) {
  1190.           self.searchData[item.prop] = self.searchData[item.prop].replace(/[^0-9]/ig, '')
  1191.         }
  1192.         if (item.blur) {
  1193.           return item.blur(trimHandle(self.searchData[item.prop]))
  1194.         }
  1195.         return {}
  1196.       }
  1197.     }
  1198.   },
  1199.   created() {
  1200.     if (this.isHandle) {
  1201.       this.$nextTick(() => {
  1202.         const offsetTops = this.$refs.searchForm.$el.clientHeight
  1203.         this.$store.dispatch('wayTracking/setSearchForms', offsetTops)
  1204.       })
  1205.     }
  1206.     this.$dictionary.get(['CUSTOMER_GROUP'], true).then(res => {
  1207.       for (const i in res) {
  1208.         this.$set(this.comboBox, i, res[i])
  1209.       }
  1210.  
  1211.       this.customerGroupDict = this.comboBox['CUSTOMER_GROUP']
  1212.       this.customerGroupDict.forEach((item) => {
  1213.         if (item.isValid === true) {
  1214.           const data = {
  1215.             id: item.dictCode,
  1216.             className: item.dictName,
  1217.             classDes: item.remark
  1218.           }
  1219.           this.gridData.push(data)
  1220.         }
  1221.       })
  1222.     })
  1223.   },
  1224.  
  1225.   methods: {
  1226.  
  1227.     showCustomerGroup() {
  1228.       this.radioIdSelect = this.selectGroupId
  1229.       this.gridData.forEach((item) => {
  1230.         if (item.id === this.radioIdSelect) {
  1231.           this.setCurrent(item)
  1232.         }
  1233.       })
  1234.     },
  1235.     setCurrent(row) {
  1236.       this.$nextTick(() => {
  1237.         this.$refs.singleClassTable[0].setCurrentRow(row)
  1238.       })
  1239.     },
  1240.     handleCurrentChange(val) {
  1241.       this.currentRow = val
  1242.     },
  1243.     // 确定选择企业分类
  1244.     confirmSelet() {
  1245.       this.$emit('confirmCustomerGroup', this.radioIdSelect)
  1246.       this.visible = false
  1247.     },
  1248.     // 单选框
  1249.     handleSelectionChange(index, row) {
  1250.  
  1251.     },
  1252.     // // 企业分类下拉选择变化
  1253.     // custmerGroupChange() {
  1254.     //   // this.radioIdSelect = this.formEnterpriseInfo.custmerGroup
  1255.     //   this.setCurrent(this.gridData[parseInt(this.radioIdSelect) - 1])
  1256.     // },
  1257.     rowClick(row) {
  1258.       this.radioIdSelect = row.id
  1259.       this.setCurrent(row)
  1260.     },
  1261.     // 收缩展开
  1262.     dropdownHandles() {
  1263.       this.showMoreForm = !this.showMoreForm
  1264.       if (this.unfoldHideHandle) {
  1265.         this.hideHandleBtn = !this.hideHandleBtn
  1266.       }
  1267.       this.$store.dispatch('wayTracking/setMoreFormTables', !this.autoTableHeights)
  1268.       this.$nextTick(() => {
  1269.         const offsetTops = this.$refs.searchForm.$el.clientHeight
  1270.         this.$store.dispatch('wayTracking/setSearchForms', offsetTops)
  1271.         this.$store.dispatch('wayTracking/setShowFormBool', this.showMoreForm)
  1272.         // this.$emit('onDropClick', this.showMoreForm)
  1273.       })
  1274.     },
  1275.     // label2触发事件
  1276.     labelToClickHandle(item, index) {
  1277.       this.$emit('labelToSubmit', { item, index })
  1278.     },
  1279.     // 按钮触发事件
  1280.     onClickSvgHandle(item, index) {
  1281.       this.$emit('onFormSvgIconClick', { item, index })
  1282.     },
  1283.     // 重置清空查询条件
  1284.     resetForm() {
  1285.       this.$nextTick(() => {
  1286.         this.$refs.searchForm.resetFields()
  1287.       })
  1288.     }
  1289.   }
  1290. }
  1291. </script>
  1292.  
  1293. <style lang="scss">
  1294.   .search-forms {
  1295.     position: relative;
  1296.     .more-icons {
  1297.       position: absolute;
  1298.       left: 0;
  1299.       right: 0;
  1300.       bottom: -24px;
  1301.       margin: auto;
  1302.       z-index: 2;
  1303.       width: 100px;
  1304.       height: 30px;
  1305.       &:hover {
  1306.         cursor: pointer;
  1307.       }
  1308.       img {
  1309.         display: block;
  1310.         width: 100%;
  1311.         height: 100%;
  1312.         margin: auto;
  1313.       }
  1314.     }
  1315.     .form-svgicon {
  1316.       width: 25px !important;
  1317.       height: 25px !important;
  1318.       &:hover {
  1319.         cursor: pointer;
  1320.       }
  1321.     }
  1322.     .textareaStyles {
  1323.       .el-form-item__content {
  1324.         height: unset !important;
  1325.       }
  1326.     }
  1327.     .el-form-item{
  1328.       align-items: flex-end !important;
  1329.     }
  1330.   }
  1331. </style>
  1332.  
  1333. <style lang="scss" scoped>
  1334. // .making-task .search-forms .form-checkbox {
  1335. //   margin-left: auto !important;
  1336. // }
  1337. .form-checkbox {
  1338.   ::v-deep .el-form-item__label-wrap {
  1339.     visibility: hidden;
  1340.   }
  1341. }
  1342. .making-task .search-forms .form-checkbox ::v-deep .el-form-item__content {
  1343.   justify-content: flex-end;
  1344. }
  1345.  
  1346. .making-task .btn-checkbox {
  1347.   display: flex;
  1348.   margin-left: auto;
  1349.   width: 16.66%;
  1350.   padding-right: 10px;
  1351.   >.el-form-item {
  1352.     width: 100%;
  1353.   }
  1354. }
  1355. .making-task .width-two {
  1356.   width: 33.32%;
  1357.   >.el-form-item {
  1358.     width: 50%;
  1359.   }
  1360. }
  1361. .item-svg-icon-font {
  1362.   position: absolute;
  1363.   top: -21px;
  1364.   left: 30%;
  1365.   cursor: pointer;
  1366. }
  1367. #custmerGroupTable{
  1368.   height: 300px ;
  1369. }
  1370.  #custmerGroupTable ::v-deep th.is-leaf{
  1371.   text-align: left !important;
  1372.   background-color:#1C1D80  !important;
  1373.   padding:5px 0 !important;
  1374.   color:#fff;
  1375. }
  1376. #custmerGroupTable  ::v-deep .cell.el-tooltip {
  1377.   white-space: pre-wrap !important;
  1378.   text-align: left !important;
  1379. }
  1380. #custmerGroupTable  ::v-deep .el-radio__input.is-checked .el-radio__inner {
  1381.   border-color: #1C1D80  !important;;
  1382.   background: #1C1D80  !important;;
  1383. }
  1384. #btnGrop {
  1385.   text-align: center;
  1386.   padding-top: 10px;
  1387.   .el-button:hover{
  1388.     border-color: #1C1D80  !important;
  1389.     color:#1C1D80 ;
  1390.     background-color:#fff;
  1391.   }
  1392.   .el-button--primary{
  1393.     border-color: #1C1D80  !important;;
  1394.     background: #1C1D80  !important;;
  1395.   }
  1396.   .el-button--primary:hover{
  1397.     color:#fff
  1398.   }
  1399.  
  1400. }
  1401. .icon-a-icon41{
  1402.     color: #FF5806;
  1403.     margin-left: 4px;
  1404.   }
  1405. .el-form-item.is-error .none-border {
  1406.   border: 0px !important;
  1407. }
  1408. ::v-deep .selfAdaptionStyle {
  1409.   right: 0px !important;
  1410.   left: unset !important;
  1411.   .popper__arrow{
  1412.     left:unset !important;
  1413.     right: 100px !important;
  1414.   }
  1415. }
  1416. .making-task .search-forms {
  1417.   .left-half {
  1418.     width: 8.33%;
  1419.     padding-right: 0;
  1420.   }
  1421.   .right-half {
  1422.     width: 8.33%;
  1423.     ::v-deep .el-form-item__label-wrap {
  1424.       visibility: hidden;
  1425.     }
  1426.   }
  1427. }
  1428. .customer-item {
  1429.     width: 33.33% !important;
  1430.   }
  1431. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/279786
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号