1.双重三元

1.使用场景：

传入后端的方式：

 

 

js文件中：
 {
    name: '创建日期',   // input框前的名称
    desc: 'createDateEq', // 传入后端的字段名称
    type: 'dated',  // 格式类型，本文使用ant desgin中的date ,自己又重新定义的dated
    childrenDesc: ['createTimeStart', 'createTimeEnd'] // 使用选择日期需求传入后端的字段名
  }

 

<template>
  <div>
    <a-row v-for="(row, index) in fieldList" :key="index">
      <!-- 作用：当为行字段数整倍数时占行，供展开收起查询、重置放置 -->
      <a-col v-if="row.placeholder">
        <a-row>
          <a-col><label></label></a-col>
        </a-row>
      </a-col>

      <a-col :span="24 / rowFieldNum" v-else v-for="(item, ind) in row.rowData" :key="ind">
        <a-row>
          <a-col :span="9">
            <label :class="[{ required: item.required }, { onlyread: isonlyread('state') }]">{{ item.name }}： </label>
          </a-col>
          <!-- 下拉框 多选状态-->
          <a-col :span="15" v-if="item.type === 'select'">
            <a-select
              allowClear
              showArrow
              v-model="item.sousuo.low"
              mode="multiple"
              placeholder="请下拉选择"
              :getPopupContainer="getPopupContainer"
              :disabled="item.isDisable"
              @change="emitSelectChange(item)"
              @dropdownVisibleChange="selectDropdownVisibleChange(item)"
            >
              <a-select-option :value="row.value" v-for="(row, ind) in item.options" :key="ind">
                {{ row.label }}
              </a-select-option>
            </a-select>
            <span v-if="!isonlyread(item.desc)">{{ item.sousuolist.name }}</span>
          </a-col>

          <!-- 下拉框 单选状态-->
          <!-- TODO: 应该radioclassList优化-->
          <a-col :span="15" v-else-if="item.type === 'raidoselect'">
            <a-select
              allowClear
              v-model="item.sousuo.low"
              placeholder="请下拉选择"
              :getPopupContainer="getPopupContainer"
              :disabled="item.isDisable"
              @change="emitSelectChange(item)"
              @dropdownVisibleChange="selectDropdownVisibleChange(item)"
            >
              <a-select-option
                :value="row.value"
                v-for="(row, ind) in item.scopedSlots.selected"
                :key="ind"
                style="max-width: 128px;"
              >
                {{ row.label }}
              </a-select-option>
            </a-select>
            <span v-if="!isonlyread(item.desc)">{{ item.sousuolist.name }}</span>
          </a-col>
          <a-col :span="15" v-else-if="item.type === 'radioSelect'">
            <a-select
              :allowClear="item.allowClear !== undefined ? item.allowClear : true"
              placeholder="请下拉选择"
              v-model="item.sousuo.low"
              :getPopupContainer="getPopupContainer"
              :disabled="item.isDisable"
              @change="emitSelectChange(item)"
              @dropdownVisibleChange="selectDropdownVisibleChange(item)"
            >
              <a-select-option
                :value="row.value"
                v-for="(row, ind) in item.options"
                :key="ind"
                style="max-width: 128px;"
              >
                {{ row.label }}
              </a-select-option>
            </a-select>
            <span v-if="!isonlyread(item.desc)">{{ item.sousuolist.name }}</span>
          </a-col>

          <!-- 下拉框 搜索与远程数据结合 未启用-无使用场景 -->
          <a-col :span="15" v-else-if="item.type === 'remoteSelect'">
            <a-select
              show-search
              :value="value"
              placeholder="input search text"
              style="width: 200px"
              :default-active-first-option="false"
              :show-arrow="false"
              :filter-option="false"
              :not-found-content="null"
              @search="handleSearch"
              @change="handleChange"
            >
              <a-select-option v-for="d in data" :key="d.value">
                {{ d.text }}
              </a-select-option>
            </a-select>
          </a-col>

          <!-- 下拉框 动态请求-单选状态-->
          <a-col :span="15" v-else-if="item.type === 'dynamicRadioSelectList'">
            <a-select
              :allowClear="item.allowClear !== undefined ? item.allowClear : true"
              v-model="item.sousuo.low"
              placeholder="请下拉选择"
              :getPopupContainer="getPopupContainer"
              :disabled="item.isDisable"
              :not-found-content="dynamicSelect.fetching ? undefined : null"
              @change="emitSelectChange(item, formatDynamicSelectList(dynamicSelect.list[item.desc]))"
              @dropdownVisibleChange="selectDropdownVisibleChange(item)"
            >
              <a-spin v-if="dynamicSelect.fetching" slot="notFoundContent" size="small" />
              <a-select-option
                :value="row.value"
                v-for="(row, ind) in formatDynamicSelectList(dynamicSelect.list[item.desc])"
                :key="ind"
              >
                {{ row.label }}
              </a-select-option>
            </a-select>
            <span v-if="!isonlyread(item.desc)">{{ item.sousuolist.name }}</span>
          </a-col>

          <!-- 输入框 单框-->
          <a-col :span="15" v-else-if="item.type === 'input'">
            <a-input
              ref="input"
              allowClear
              :disabled="item.isDisable"
              :read-only="!isonlyread(item.desc)"
              :maxLength="item.maxLength"
              v-model="item.sousuo.low"
              placeholder="请输入"
              @focus="emitFocusInput(item)"
              @blur="emitBlurInput(item)"
            >
            </a-input>
          </a-col>

          <!-- 输入框 自定义规则单框-->
          <a-col :span="15" v-else-if="item.type === 'customInput'">
            <a-input
              ref="input"
              allowClear
              v-if="isonlyread(item.desc)"
              :disabled="item.isDisable"
              @keyup="item.sousuo.low = item.sousuo.low.replace(/\D/g, '')"
              @afterpaste="item.sousuo.low = item.sousuo.low.replace(/\D/g, '')"
              v-model="item.sousuo.low"
              placeholder="请输入"
              @change="item.customFun(item.sousuo.low)"
            >
            </a-input>
          </a-col>

          <!-- 输入框 单选-->
          <a-col :span="15" v-else-if="item.type === 'texto'">
            <a-input
              allowClear
              ref="input"
              :disabled="item.isDisable"
              :read-only="!isonlyread(item.desc)"
              @change="emitInputChange($event, item, 'low', 'name1')"
              placeholder="请输入/请选择"
              :value="descName(item, 'low', 'name1')"
            >
              <a-icon
                slot="suffix"
                type="right"
                class="iconSize"
                @click.stop="emitOpenBox(item, ind, 'low', 'name1')"
              />
            </a-input>
          </a-col>

          <a-col :span="15" v-else-if="item.type === 'texto2'">
            <p class="mySelfInput">{{ item.sousuo.low }}</p>
          </a-col>

          <!-- 双输入框 -->
          <a-col :span="15" v-else-if="item.type === 'textd'">
            <a-input
              placeholder="请输入/请选择"
              :value="descName(item, 'low', 'name1')"
              @input="emitInputChange($event, item, 'low', 'name1')"
              :disabled="item.isDisable"
            >
              <a-icon slot="suffix" type="right" class="iconSize" @click="emitOpenBox(item, ind, 'low', 'name1')" />
            </a-input>
            至
            <a-input
              placeholder="请输入/请选择"
              :value="descName(item, 'high', 'name2')"
              @input="emitInputChange($event, item, 'high', 'name2')"
              :disabled="item.isDisable"
            >
              <a-icon slot="suffix" type="right" class="iconSize" @click="emitOpenBox(item, ind, 'high', 'name2')" />
            </a-input>
          </a-col>

          <!-- 起止时间 xx~xx-->
          <a-col :span="15" v-else-if="item.type === 'dated'">
            <a-range-picker
              :format="dateFormat"
              :disabled="item.isDisable"
              :value="
                item.sousuo.low === ''
                  ? []
                  : [moment(item.sousuo.low[0], dateFormat), moment(item.sousuo.low[1], dateFormat)]
              "
              @change="(date, dateString) => emitOnChange(date, dateString, item, 'low')"
            />
          </a-col>
          <!-- 时间 xx-->
          <a-col :span="15" v-else-if="item.type === 'dateo'">
            <a-date-picker
              :format="dateFormat"
              :disabled="item.isDisable"
              :value="item.sousuo.low == '' ? undefined : moment(item.sousuo.low, dateFormat)"
              @change="(date, dateString) => emitOnChange(date, dateString, item, 'low')"
              placeholder="请选择时间"
            />
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { Cfg } from '@/core/cfg/constant'
import moment from 'moment'

export default {
  name: 'SearchFormField',
  props: {
    rowFieldNum: { type: Number, required: true },
    recordState: {
      type: Number,
      default: 1
    },
    // 源字段
    fieldListSource: {
      type: Array,
      default() {
        return []
      }
    },
    // 列表字段
    fieldList: {
      type: Array,
      default() {
        return []
      }
    },
    // 只展示字段
    onlyread: {
      type: Array,
      default() {
        return []
      }
    },
    // 下拉改变数据
    dropdownVisibleChange: Function
  },

  data() {
    return {
      data: [],
      value: [],
      fetching: false,
      dateFormat: 'YYYY-MM-DD',
      // 动态列表
      dynamicSelect: {
        fetching: false,
        list: {}
      },
      getPopupContainer: triggerNode => {
        return triggerNode.parentNode || document.body
      }
    }
  },
  updated() {
    console.log('updated:', this.fieldList)
  },
  mounted() {
    console.log('saknr', this.saknr)
  },
  created() {
    console.log('fieldListSource', this.fieldListSource)

    // :recordState="recordState"
    if (this.recordState == 1) {
      if (this.fieldList && this.fieldList[0] && this.fieldList[0].rowData) {
        this.fieldList[0].rowData.forEach(item => {
          if (item.desc === 'zrpdart') {
            item.sousuo.low = 'RES'
          }
        })
      }
      if (this.fieldList && this.fieldList[1] && this.fieldList[1].rowData) {
        this.fieldList[1].rowData.forEach(item => {
          if (item.desc === 'category') {
            item.sousuo.low = '否'
          }
        })
      }
    }
    if (this.recordState == 2) {
      if (this.fieldList && this.fieldList[0] && this.fieldList[0].rowData) {
        this.fieldList[0].rowData.forEach(item => {
          if (item.desc === 'zrpdart') {
            item.sousuo.low = 'RES'
          }
        })
      }
      console.log(this.fieldList[0].rowData)
      if (this.fieldList && this.fieldList[1] && this.fieldList[1].rowData) {
        this.fieldList[1].rowData.forEach(item => {
          if (item.desc == 'category') {
            item.sousuo.low = '是'
          }
        })
      }
    }
  },
  methods: {
    handleChange(value) {
      Object.assign(this, {
        value,
        data: [],
        fetching: false
      })
    },
    moment,
    //符合只展示字段
    isonlyread(prop) {
      if (this.onlyread.indexOf(prop) != -1) {
        return false
      } else {
        return true
      }
    },
    // 输入框描述字段
    descName(item, desc, name) {
      console.log(item, desc, name)
      let descValue = '' //字段值
      let descName = '' //字段描述
      if (item.sousuo[desc] != '') {
        descValue = item.sousuo[desc]
      }

      if (item.sousuo[name] != '' && item.sousuo[name] != null) {
        descName = '  ' + item.sousuo[name]
      }

      return descValue + descName
    },
    selectDropdownVisibleChange(item) {
      this.$emit('dropdownVisibleChange', item)
      // TODO：需要单据类型
      if (item.desc === 'approvalNumber') {
        this.fieldListSource.forEach(field => {
          if (field.desc === 'approvalNode') {
            field.sousuo.low = ''
          }
        })
      }

      // 审批节点
      if (item.desc === 'approvalNode') {
        this.dynamicSelect.fetching = true
        const url = this.$interfaces.getOrgTemplate
        const _this = this
        let billsTypeCode = 'GLSH_XQJH_TB'
        this.fieldListSource.forEach(field => {
          if (field.desc === 'approvalNumber') {
            billsTypeCode = field.sousuo.low || 'GLSH_XQJH_TB'
          }
        })

        this.axios
          .get(url, {
            params: {
              categoryCode: billsTypeCode,
              organiseId: Cfg.FactoryId
            }
          })
          .then(data => {
            if (data.success) {
              _this.dynamicSelect.list['approvalNode'] = []
              data.data.forEach(item => {
                _this.dynamicSelect.list['approvalNode'].push({
                  label: item.detail,
                  value: item.code
                })
              })
            } else {
              this.$message.error(data.data)
            }
            _this.dynamicSelect.fetching = false
          })
          .catch(error => {
            // this.$message.error(this.$promptMsg.common.default_error, this.$promptMsg.hint_time.error_time)
          })
          .finally(() => {})
      }

      // 接口名称
      if (item.desc === 'contentLike') {
        this.dynamicSelect.fetching = true
        const url = this.$interfaces.getErpLogSelectFunctionList
        const _this = this
        this.axios
          .get(url, {
            params: {
              content: ''
            }
          })
          .then(data => {
            if (data.success) {
              _this.dynamicSelect.list['contentLike'] = []
              data.data.forEach(item => {
                _this.dynamicSelect.list['contentLike'].push({
                  label: item.content,
                  value: item.content
                })
              })
            } else {
              // this.$message.error(data.message, this.$promptMsg.hint_time.error_time)
            }
            _this.dynamicSelect.fetching = false
          })
          .catch(error => {
            // this.$message.error(this.$promptMsg.common.default_error, this.$promptMsg.hint_time.error_time)
          })
          .finally(() => {})
      }
    },
    // 格式化动态列表结构
    formatDynamicSelectList(list) {
      if (!list) {
        return []
      }
      return list
    },
    emitOpenBox(item, index, desc, name) {
      this.$emit('openBox', item, index, desc, name)
    },
    emitInputChange(e, item, type, name) {
      console.log('type field:', e.type)
      this.$emit('inputChange', e, item, type, name)
    },
    emitSelectChange(item, opts) {
      console.log(item)
      this.$emit('handleSelectChange', item, opts)
    },
    emitFocusInput(item) {
      this.$emit('focusInput', item)
    },
    emitBlurInput(item) {
      this.$emit('blurInput', item)
    },
    emitOnChange(date, dateString, item, desc) {
      this.$emit('onChange', date, dateString, item, desc)
    }
  },
  computed: {
    saknr() {
      return this.fieldListSource.filter(item => item.desc == 'saknr')
    }
  }
}
</script>

<style scoped>
label.required::before {
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
}
</style>

  getTransferQueryParams(arr) {
      const json = {}
      arr.forEach(item => {
        if (item.type === 'dated') {
          if (Array.isArray(item.sousuo.low)) {
            json[item.childrenDesc[0]] = item.sousuo.low[0]  //item.sousuo.low[0]如果存在就执行如下的3行，没有就是‘’ 2.紧接着判断是否js文件中是否定义了formatDate 定义了就以此为准，没有就会在后边添加了' 00:00:00'
              ? item.formatDate
                ? item.sousuo.low[0]
                : item.sousuo.low[0] + ' 00:00:00'
              : ''
            json[item.childrenDesc[1]] = item.sousuo.low[1]
              ? item.formatDate
                ? item.sousuo.low[1]
                : item.sousuo.low[1] + ' 23:59:59'
              : ''
          } else {
            json[item.childrenDesc[0]] = ''
            json[item.childrenDesc[1]] = ''
          }
        } else {
          json[item.desc] = item.sousuo.low
        }
      })
      return json
    },
    emitHandleSaveOk() {
      this.$emit('searchForm', this.getTransferQueryParams(this.searchList))
    },