MrShi
2 天以前 39fc2d6754953e41a7334a2166347baacfcfb40a
admin/src/components/common/QueryForm/queryForm.vue
@@ -2,15 +2,13 @@
  <div class="doumee-filter">
    <el-form inline label-suffix=":" @submit.native.prevent>
      <template v-for="(item, index) in queryFormConfig.formItems">
        <el-form-item v-if="item.type === 'input' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label">
        <el-form-item v-if="item.type === 'input' && (showZk || index < listLength)" :key="item.filed">
          <el-input v-model="searchForm[item.filed]"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :placeholder="item.placeholder ? item.placeholder : '请输入' + item.label" class="w200"
            @change="changeForm(item.filed)" @keyup.enter.native="handlekeyup(item.keyup || false)" />
            :placeholder="item.label" class="w200" @change="changeForm(item.filed)"
            @keyup.enter.native="handlekeyup(item.keyup || false)" />
        </el-form-item>
        <el-form-item v-if="item.type === 'moneySelect' && (showZk || index < listLength)" :key="item.label"
          :label="item.label">
        <el-form-item v-if="item.type === 'moneySelect' && (showZk || index < listLength)" :key="item.label">
          <el-input v-model="searchForm[item.filedStrt]"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :placeholder="item.start" style="width: 150px" />
@@ -19,49 +17,52 @@
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :placeholder="item.end" style="width: 150px" />
        </el-form-item>
        <el-form-item v-if="item.type === 'select' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label">
        <el-form-item v-if="item.type === 'select' && (showZk || index < listLength)" :key="item.filed">
          <el-select v-model="searchForm[item.filed]" :filterable="item.filterable || true"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :placeholder="item.placeholder ? item.placeholder : '请选择' + item.label" class="w200"
            @change="changeForm(item.filed)">
            :placeholder="item.label" class="w200" @change="changeForm(item.filed)">
            <el-option v-for="opt, i in item.options" :key="i" :value="item.valueCode ? opt[item.valueCode] : opt.value"
              :label="item.labelCode ? opt[item.labelCode] : opt.label" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="item.type === 'date' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label || '日期'">
        <el-form-item v-if="item.type === 'date' && (showZk || index < listLength)" :key="item.filed">
          <el-date-picker v-model="searchForm[item.filed]" type="date" value-format="yyyy-MM-dd" class="w200"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :placeholder="item.placeholder || '请选择日期'" :picker-options="item.pickerOptions || {}"
            @change="changeForm(item.filed)" />
            :placeholder="item.label" :picker-options="item.pickerOptions || {}" @change="changeForm(item.filed)" />
        </el-form-item>
        <el-form-item v-if="item.type === 'daterange' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label || ''">
        <el-form-item :label="item.label ? item.label : '起止时间'"
          v-if="item.type === 'datetime' && (showZk || index < listLength)" :key="item.filed1">
          <el-date-picker v-model="searchForm[item.filed1]" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            class="w200"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            placeholder="开始时间" @change="changeForm(item.filed)" />
          <el-date-picker v-model="searchForm[item.filed2]" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
            class="w200"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            placeholder="结束时间" @change="changeForm(item.filed)" />
        </el-form-item>
        <el-form-item v-if="item.type === 'daterange' && (showZk || index < listLength)" :key="item.filed">
          <el-date-picker v-model="searchForm[item.filed]" value-format="yyyy-MM-dd" type="daterange"
            range-separator="至"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :start-placeholder="item.start || ''" :end-placeholder="item.end || ''"
            :picker-options="item.pickerOptions || {}" class="w400" @change="changeForm(item.filed)" />
        </el-form-item>
        <el-form-item v-if="item.type === 'timePicker' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label || '选择时间'">
        <el-form-item v-if="item.type === 'timePicker' && (showZk || index < listLength)" :key="item.filed">
          <el-time-picker v-model="searchForm[item.filed]" is-range range-separator="至" format="HH:mm"
            value-format="HH:mm" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" class="w400"
            @change="changeForm(item.filed)" />
        </el-form-item>
        <el-form-item v-if="item.type === 'datetimerange' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label || '选择日期'">
        <el-form-item v-if="item.type === 'datetimerange' && (showZk || index < listLength)" :key="item.filed">
          <el-date-picker v-model="searchForm[item.filed]" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :default-time="['00:00:00', '23:59:59']"
            :picker-options="item.pickerOptions || pickerOptions" range-separator="至"
            :clearable="(item.clearable !== null && item.clearable !== undefined && item.clearable !== '') ? item.clearable : true"
            :start-placeholder="item.start || '开始时间'" :end-placeholder="item.end || '结束时间'" class="w400"
            @change="changeForm(item.filed)" />
        </el-form-item>
        <el-form-item v-if="item.type === 'slot' && (showZk || index < listLength)" :key="item.filed"
          :label="item.label">
        <el-form-item :label="item.label ? item.label : ''"
          v-if="item.type === 'slot' && (showZk || index < listLength)" :key="item.filed">
          <slot :name="item.filed" />
        </el-form-item>
      </template>
@@ -100,13 +101,13 @@
      default: () => { }
    }
  },
  data () {
  data() {
    return {
      showZk: false,
      pickerOptions: {
        shortcuts: [{
          text: '近7天',
          onClick (picker) {
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 6)
@@ -115,7 +116,7 @@
        },
        {
          text: '近30天',
          onClick (picker) {
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 29)
@@ -124,7 +125,7 @@
        },
        {
          text: '近60天',
          onClick (picker) {
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 59)
@@ -133,14 +134,14 @@
        },
        {
          text: '近90天',
          onClick (picker) {
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(end.getTime() - 3600 * 1000 * 24 * 89)
            picker.$emit('pick', [start, end])
          }
        }],
        disabledDate (time) {
        disabledDate(time) {
          var curDate = new Date(new Date().toLocaleDateString()).getTime()
          var preDate = new Date(curDate + 24 * 60 * 60 * 1000 - 1)
          return time.getTime() > preDate
@@ -151,31 +152,31 @@
  emits: ['input', 'handleQuery', 'clear'],
  computed: {
    searchForm: {
      get () {
      get() {
        return this.value
      },
      set (value) {
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    handleQuery () {
    handleQuery() {
      this.$emit('handleQuery')
    },
    handlekeyup (pd) {
    handlekeyup(pd) {
      if (pd) {
        this.$emit('handleQuery')
      }
    },
    changeForm (filed) {
    changeForm(filed) {
      this.$emit('changeForm', filed)
    },
    zkBtn () {
    zkBtn() {
      this.showZk = !this.showZk
      this.$emit('zkBtn', this.zk)
    },
    clear () {
    clear() {
      this.$emit('clear')
    }
  }