1. 添加数据产品目录

riku

2024-10-18 0906c54770971020cf2d243d06d57a2f6fbbc18c

 src/components/search-option/FYOptionLocation.vue

@@ -1,20 +1,18 @@
<template>
  <el-form-item :label="placeholder">
  <el-form-item :label="placeholder" :prop="prop">
    <el-cascader
      v-model="selectedOptions"
      :model-value="formatedValue"
      @change="handleChange"
      :options="locations"
      :placeholder="placeholder"
      :props="optionProps"
      style="width: 280px"
      style="width: 320px"
    />
  </el-form-item>
</template>

<script>
import { enumLocation } from '@/enum/location'

// 记录选项是否是自定义传入的
let customValue = true
import { enumLocation } from '@/enum/location';

export default {
  props: {
@@ -23,7 +21,7 @@
      type: Boolean,
      default: true
    },
    // 查询的行政级别，取值1，2，3，4
    // 查询的行政级别，取值1，2，3，4, 5, 6
    level: {
      type: Number,
      default: 4
@@ -39,58 +37,39 @@
    checkStrictly: {
      type: Boolean,
      default: true
    },
    prop: {
      type: String,
      default: '_locations'
    }
  },
  emits: ['update:value'],
  emits: ['update:value', 'change'],
  data() {
    return {
      locations: enumLocation(this.allOption, this.level),
      selectedOptions: [],
      optionProps: {
        checkStrictly: this.checkStrictly
      }
    }
    };
  },
  computed: {
    placeholder() {
      const list = '省/市/区/镇'.split('/')
      const p = []
      const list = '省/市/区/镇/集/物'.split('/');
      const p = [];
      for (let i = 0; i < this.level; i++) {
        p.push(list[i])
        p.push(list[i]);
      }
      return p.join('/')
    }
  },
  watch: {
    selectedOptions: {
      handler(nVal, oVal) {
        if (nVal != oVal) {
          const res = this.optionFormat(nVal)
          // 标明此时的value更新是组件内部触发
          customValue = false
          this.$emit('update:value', res)
        }
      },
      deep: true
      return p.join('/');
    },
    value: {
      handler(nVal, oVal) {
        // 只有当值是外部传入时，才触发更新
        if (!customValue) {
          customValue = true
          return
        }
        if (nVal != oVal) {
          if (nVal || nVal.length > 0) {
            this.selectedOptions = this.optionFormatReverse(nVal)
          }
        }
      },
      deep: true,
      immediate: true
    formatedValue() {
      return this.optionFormatReverse(this.value);
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('update:value', this.optionFormat(value));
      this.$emit('change', this.optionFormat(value));
    },
    /**
     * 地区选项结果格式化
     */
@@ -103,60 +82,80 @@
        dCode: null,
        dName: null,
        tCode: null,
        tName: null
      }
        tName: null,
        aCode: null,
        aName: null,
        mCode: null,
        mName: null,
      };
      if (val.length > 0) {
        res.pCode = val[0][0]
        res.pName = val[0][1]
        res.pCode = val[0][0];
        res.pName = val[0][1];
      }
      if (val.length > 1) {
        res.cCode = val[1][0]
        res.cName = val[1][1]
        res.cCode = val[1][0];
        res.cName = val[1][1];
      }
      if (val.length > 2) {
        res.dCode = val[2][0]
        res.dName = val[2][1]
        res.dCode = val[2][0];
        res.dName = val[2][1];
      }
      if (val.length > 3) {
        res.tCode = val[3][0]
        res.tName = val[3][1]
        res.tCode = val[3][0];
        res.tName = val[3][1];
      }
      return res
      if (val.length > 4) {
        res.aCode = val[4][0];
        res.aName = val[4][1];
      }
      if (val.length > 5) {
        res.mCode = val[5][0];
        res.mName = val[5][1];
      }
      return res;
    },
    optionFormatReverse(val) {
      const res = []
      if (val.pCode) {
        res.push([val.pCode, val.pName])
      const res = [];
      if (val) {
        if (val.pName) {
          res.push([val.pCode, val.pName]);
        }
        if (val.cName) {
          res.push([val.cCode, val.cName]);
        }
        if (val.dName) {
          res.push([val.dCode, val.dName]);
        }
        if (val.tName) {
          res.push([val.tCode, val.tName]);
        }
        if (val.aName) {
          res.push([val.aCode, val.aName]);
        }
        if (val.mName) {
          res.push([val.mCode, val.mName]);
        }
      }
      if (val.cCode) {
        res.push([val.cCode, val.cName])
      }
      if (val.dCode) {
        res.push([val.dCode, val.dName])
      }
      if (val.tCode) {
        res.push([val.tCode, val.tName])
      }
      return res
      return res;
    }
  },
  mounted() {
    if (this.initValue) {
      if (this.checkStrictly) {
        this.selectedOptions = [this.locations[0].value]
        this.handleChange([this.locations[0].value]);
      } else {
        const f = (location) => {
          if (location.children && location.children.length > 0) {
            const r = f(location.children[0])
            r.unshift(location.value)
            return r
            const r = f(location.children[0]);
            r.unshift(location.value);
            return r;
          } else {
            return [location.value]
            return [location.value];
          }
        }
        this.selectedOptions = f(this.locations[0])
        };
        this.handleChange(f(this.locations[0]));
      }
    }
  }
}
};
</script>