thoth-frontend-test/src/components/searchHeader/searchForm.vue

<template>
  <div class="searchForm">
    <div v-for="l in data" :key="l.key" class="Layout" style="display: inline-flex;padding-left: 15px; width:270px;" :style="l.styles">
      <div class="name" :style="l.nameStyles">{{ l.name }}</div>
      <el-select
        v-if="l.type === 'select'"
        v-model="l.value"
        size="small"
        :multiple="l.multiple"
        clearable
        filterable
        :placeholder="l.placeholder"
        class="chooseItem"
        @change="(e) => $emit('change', l.key, e)"
      >
        <el-option v-for="o in l.option" :key="o.value" :label="o.label" :value="o.value" />
      </el-select>
      <el-select
        v-else-if="l.type === 'remoteSelect'"
        v-model="l.value"
        filterable
        remote
        clearable
        :placeholder="l.placeholder"
        :remote-method="(q) => $emit('getOption', l.key, q, l.utilName)"
        :loading="loading"
        size="small"
        class="chooseItem"
        @change="(e) => $emit('change', l.key, e)"
      >
        <!-- <slot v-if="hasSlot" name="option" /> -->
        <div v-if="l.hasSlot">
          <el-option v-for="o in l.option" :key="o.idap" :label="o.name" :value="o.idap">
            <div class="item-style">
              <div class="item-detail">{{ o.deptName }}</div>
              <div style="min-width:80px">{{ o.name }}</div>
              <div class="item-detail">{{ o.idap }}</div>
            </div>
          </el-option>
        </div>
        <el-option v-for="o in l.option" v-else :key="o.value" :label="o.label" :value="o.value" />
      </el-select>
      <el-select
        v-else-if="l.type === 'selectGroup'"
        v-model="l.value"
        placeholder="请选择"
        size="small"
        clearable
        filterable
        multiple
      >
        <el-option-group
          v-for="group in l.option"
          :key="group.label"
          :label="group.label"
        >
          <el-option
            v-for="item in group.options"
            :key="item.teamId"
            :label="item.teamName"
            :value="item.teamId"
          />
        </el-option-group>
      </el-select>
      <div v-else-if="l.type === 'showItemDataPicker'" class="showItemDataPicker">
        <div class="inlineBlock item">
          <span
            v-for="item in dateSelect"
            :key="item.key"
            :value="item.key"
            :class="item.key === showItemDataPickerItem && 'active'"
            @click="setDate(item.key, l.type)"
          >{{ item.label }}</span>
        </div>
        <el-date-picker
          v-model="l.value"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00','23:59:59']"
          @change="(e) => $emit('change', l.key, e)"
        />
      </div>
      <el-date-picker
        v-else-if="l.type === 'dateStartAndEnd'"
        v-model="l.value"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small"
        class="chooseItem"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00','23:59:59']"
        :picker-options="pickerOptions"
        @change="(e) => $emit('change', l.key, e)"
      />
      <!-- <el-cascader
        v-else-if="l.type === 'cascader'"
        v-model="l.value"
        :options="l.option"
        size="small"
        @change="(e) => $emit('change', l.key, e)"
      /> -->
      <a-tree-select
        v-else-if="l.type === 'cascader'"
        v-model="l.value"
        show-search
        allow-clear
        style="width: 100%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        placeholder="请选择"
        tree-node-filter-prop="title"
        tree-default-expand-all
        :tree-data="l.option"
        @change="(e) => test(l, e)"
      />
      <el-input
        v-else
        v-model="l.value"
        style="width: 100% !important"
        size="small"
        class="chooseItem"
        clearable
        :placeholder="l.placeholder"
        @change="(e) => $emit('change', l.key, e)"
      />
    </div>
  </div>
</template>
<script>
import moment from 'moment'
moment.locale('zh-cn')
export default {
  props: {
    data: {
      type: Array,
      required: false,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false,
      required: true
    },
    styles: {
      type: Object,
      default: () => {},
      required: false
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      dateSelect: [
        {
          key: 'week',
          label: '本周'
        },
        {
          key: 'month',
          label: '本月'
        },
        {
          key: 'year',
          label: '本年'
        }
      ],
      showItemDataPickerItem: 'week'
    }
  },
  mounted() {
    console.log()
    this.setDate(this.showItemDataPickerItem, 'showItemDataPicker')
  },
  methods: {
    test(l, v) {
      console.log(v || '')
      this.$emit('change', l.key, v || '')
    },
    setDate(type, key) { // 日期筛选
      let startDate = null
      let endDate = null
      switch (type) {
        case 'week':
          startDate = moment().startOf('week').format('YYYY-MM-DD HH:mm:ss')
          endDate = moment().endOf('week').format('YYYY-MM-DD HH:mm:ss')
          // this.bugCountTimeType = this.timeTypeList[0].code
          break
        case 'month':
          startDate = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
          endDate = moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')
          // this.bugCountTimeType = this.timeTypeList[1].code
          break
        case 'year':
          startDate = moment().startOf('year').format('YYYY-MM-DD HH:mm:ss')
          endDate = moment().endOf('year').format('YYYY-MM-DD HH:mm:ss')
          // this.bugCountTimeType = this.timeTypeList[2].code
          break
      }
      console.log(startDate, endDate)
      this.showItemDataPickerItem = type
      this.data.map(g => {
        // data[g.key] = g.value
        if (g.type === key) g.value = [startDate, endDate]
      })
      console.log(startDate, endDate)
      this.showItemDataPickerStratAndEnd = [startDate, endDate]
      this.$emit('change', key, [startDate, endDate])
    }
  }
}
</script>
<style scoped lang="less">
.searchForm {
  .name {
    min-width: 80px;
  }
  .chooseItem {
    flex: 1;
    /deep/.el-range-separator {
      width: auto;
    }
  }
  .showItemDataPicker {
    .item {
      span {
        color: #666;
        background: #fff;
        display: inline-block;
        width: 40px;
        text-align: center;
        cursor: pointer;
        border-radius: 2px;
        margin-right: 5px;
      }
      .active {
        background: #409EFF;
        color: #fff;
      }
    }
  }
}
.item-style {
  display: flex;
  justify-content: flex-start;
  .item-detail {
    min-width:100px;
    color: #8492a6;
    font-size: 13px;
    overflow:hidden
  }
}
</style>