石广澎
2023-11-29 20913c80c3f5fc8e533cb92b90e6f20bcd68e032
admin-web/src/components/mySearch/SearchItem.vue
@@ -4,7 +4,7 @@
    <el-input
      :type="item.inputType || 'text'"
      v-if="item.type === 'text'"
      :placeholder="item.placeholder || ''"
      :placeholder="item.placeholder || '请输入'"
      @change="(e) => inputChange(e)"
      :clearable="true"
      v-model="val"
@@ -15,9 +15,12 @@
    <el-cascader
      v-model="val"
      v-if="item.type === 'cascader'"
      :placeholder="item.placeholder || '请选择'"
      :options="item.options"
      :props="item.optionsConfig.props||{ checkStrictly: true,value: 'id' }"
      :clearable="true"
      :props="item.optionsConfig.props||{ checkStrictly: true,emitPath: false,value: 'id' }"
      :show-all-levels="false"
      filterable
      clearable
      style="width: 150px"
      @change="(v) => this.$emit('change', v)"
    >
@@ -25,9 +28,9 @@
    <!-- 下拉-->
    <el-select
      v-if="item.type === 'select'"
      :placeholder="item.placeholder || ''"
      :placeholder="item.placeholder || '请选择'"
      v-model="val"
      show-search
      filterable
      :multiple="item.multiple || false"
      :collapse-tags="item.collapseTags || false"
      :clearable="true"
@@ -53,7 +56,7 @@
    <!--时间-->
    <el-time-select
      v-if="item.type === 'time-picker'"
      :placeholder="item.placeholder || ''"
      :placeholder="item.placeholder || '请选择'"
      v-model="val"
      :clearable="true"
      style="width: 150px"
@@ -65,7 +68,9 @@
      v-model="val"
      type="year"
      :clearable="true"
      :placeholder="item.placeholder || '请选择'"
      style="width: 150px"
      :value-format="item.format?item.format:'yyyy'"
      @change="(v) => panelChange(v, 'yyyy')"
    />
    <!--月选择器-->
@@ -74,7 +79,9 @@
      v-model="val"
      type="month"
      :clearable="true"
      :placeholder="item.placeholder || '请选择'"
      style="width: 150px"
      :value-format="item.format?item.format:'yyyyMM'"
      @change="(v) => panelChange(v, 'yyyy-MM')"
    />
    <!--日选择器-->
@@ -83,7 +90,9 @@
      v-model="val"
      type="date"
      :clearable="true"
      :placeholder="item.placeholder || '请选择'"
      style="width: 150px"
      :value-format="item.format?item.format:'yyyyMMdd'"
      @change="(v) => panelChange(v, 'yyyy-MM-dd')"
    />
    <!--日期带时间选择器-->
@@ -92,6 +101,7 @@
      v-model="val"
      type="datetime"
      :clearable="true"
      :placeholder="item.placeholder || '请选择'"
      style="width: 150px"
      format="yyyy-MM-dd HH:mm:ss"
      value-format="yyyy-MM-dd HH:mm:ss"
@@ -102,7 +112,7 @@
      v-if="item.type === 'datetimerange-picker'"
      v-model="val"
      style="width: 378px"
      :placeholder="item.placeholder || ''"
      :placeholder="item.placeholder || '请选择'"
      type="datetimerange"
      :pickerOptions='pickerOptions'
      :disabled="item.disabled"
@@ -115,7 +125,6 @@
</template>
<script>
import {formatDates} from '@/utils/index';
import request from '@/utils/request';
function trim(str) {
@@ -132,54 +141,7 @@
    item: Object,
  },
  created() {
    if (this.item.type === 'select' && this.item.optionsConfig) {
      if (this.$axios === undefined) {
        console.error('请先配置this.$axios');
        return;
      }
      request({
        url: this.item.optionsConfig.url,
        method: 'get',
      }).then((res) => {
        const data = res || [];
        this.item.options = [];
        data.forEach((v) => {
          this.item.options.push({
            label: v[this.item.optionsConfig.label || 'label'],
            value: v[this.item.optionsConfig.value || 'value'],
          });
        });
      });
    }
    if (this.item.type === 'cascader' && this.item.optionsConfig) {
      if (this.$axios === undefined) {
        console.error('请先配置this.$axios');
        return;
      }
      request({
        url: this.item.optionsConfig.url,
        method: 'get',
      }).then((res) => {
        const data = res || [];
        this.item.options = [];
        this.item.options = data;
      });
    }
    if (this.item.type === 'tree-select' && this.item.optionsConfig) {
      if (this.$axios === undefined) {
        console.error('请先配置this.$axios');
        return;
      }
      if (this.item.asyncLoad) {
        this.asyncLoad({value: 0}).then((res) => {
          this.treeData = res;
        });
      } else {
        this.asyncLoad({}).then((res) => {
          this.treeData = res;
        });
      }
    }
    this.initData({})
  },
  watch: {
    value(v) {
@@ -230,15 +192,66 @@
    };
  },
  methods: {
    panelChange(v, type) {
      var info = null
      if (v && this.item.type !== 'date-time-picker') {
        info = formatDates(v, type)
      } else {
        info = v
    clearData() {
      this.item.options = []
      this.treeData = []
    },
    initData(params) {
      this.val = this.item.defaultValue
      if (this.item.type === 'select' && this.item.optionsConfig) {
        if (this.$axios === undefined) {
          console.error('请先配置this.$axios');
          return;
        }
        request({
          url: this.item.optionsConfig.url,
          method: 'get',
          params
        }).then((res) => {
          const data = res || [];
          this.item.options = [];
          data.forEach((v) => {
            this.item.options.push({
              label: v[this.item.optionsConfig.label || 'label'],
              value: v[this.item.optionsConfig.value || 'value'],
            });
          });
        });
      }
      this.val = info
      this.$emit('change', info)
      if (this.item.type === 'cascader' && this.item.optionsConfig) {
        if (this.$axios === undefined) {
          console.error('请先配置this.$axios');
          return;
        }
        request({
          url: this.item.optionsConfig.url,
          method: 'get',
          params
        }).then((res) => {
          const data = res || [];
          this.item.options = [];
          this.item.options = data;
        });
      }
      if (this.item.type === 'tree-select' && this.item.optionsConfig) {
        if (this.$axios === undefined) {
          console.error('请先配置this.$axios');
          return;
        }
        if (this.item.asyncLoad) {
          params.value = 0
          this.asyncLoad(params).then((res) => {
            this.treeData = res;
          });
        } else {
          this.asyncLoad(params).then((res) => {
            this.treeData = res;
          });
        }
      }
    },
    panelChange(v, type) {
      this.$emit('change', v)
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;