143 lines
3.6 KiB
Vue
143 lines
3.6 KiB
Vue
<template>
|
|
<view>
|
|
<click-input
|
|
preIcon="map-pin-ellipse"
|
|
:disabled="readonly"
|
|
:placeholder="formProps.placeholder || '请选择'"
|
|
@click="chooseLocation"
|
|
:value="_value"
|
|
>
|
|
</click-input>
|
|
<!-- <cc-selectDity :province="area.province" :city="area.city" :area="area.area" :show="show"
|
|
@sureSelectArea="selectOk" @hideShow="show = false" @changeClick="change"></cc-selectDity> -->
|
|
<Popup v-model:show="show" position="bottom">
|
|
<Cascader
|
|
title="请选择"
|
|
:value="cascaderValue"
|
|
:field-names="{
|
|
text: 'label',
|
|
value: 'value',
|
|
children: 'children',
|
|
}"
|
|
:options="dataOptions"
|
|
@close="show = false"
|
|
@finish="selectOk"
|
|
/>
|
|
</Popup>
|
|
<!-- <tki-tree ref="locationTree" idKey='value' :range="dataOptions"
|
|
rangeKey="label" confirmColor="#4e8af7" :selectParent="true" /> -->
|
|
</view>
|
|
</template>
|
|
x
|
|
<script setup>
|
|
import { ref, computed, reactive, onMounted } from "vue";
|
|
import ClickInput from "@/components/ClickInput.vue";
|
|
import { Cascader, Popup } from "vant";
|
|
import "vant/lib/index.css";
|
|
|
|
const props = defineProps({
|
|
formProps: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
},
|
|
},
|
|
modelValue: String,
|
|
readonly: Boolean,
|
|
});
|
|
const cascaderValue = ref("");
|
|
const locationTree = ref(null);
|
|
|
|
// const province = ref('广东省')
|
|
// const city = ref('广州市')
|
|
// const area = ref('天河区')
|
|
|
|
const dataOptions = ref([]);
|
|
const classifyListUp = ref([]);
|
|
|
|
function loadOptionsData() {
|
|
try {
|
|
dataOptions.value = props.formProps.options;
|
|
classifyListUp.value = classifyListFn(dataOptions.value);
|
|
// console.log(55555, JSON.stringify(props.formProps.options));
|
|
console.log(2222, props.formProps.checkStrictly);
|
|
console.log(2222, props.formProps.showAllLevels);
|
|
console.log(2222, props.formProps.disabled);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
const classifyListFn = (dataList, reduceList = []) => {
|
|
dataList.forEach((item) => {
|
|
reduceList.push(item);
|
|
if (item.children) {
|
|
classifyListFn(item.children, reduceList);
|
|
} else if (item.itemList) {
|
|
classifyListFn(item.itemList, reduceList);
|
|
}
|
|
});
|
|
return reduceList;
|
|
};
|
|
onMounted(() => {
|
|
console.log(1111, JSON.stringify(props.formProps.placeholder));
|
|
loadOptionsData();
|
|
});
|
|
|
|
const area = reactive({
|
|
province: "江西省",
|
|
city: "南昌市",
|
|
area: "南昌县",
|
|
});
|
|
const setData = (dataList, id, str) => {
|
|
return dataList
|
|
.filter((item) => id.includes(item.value))
|
|
.map((item) => item.label)
|
|
.join(str);
|
|
};
|
|
const _value = computed({
|
|
get() {
|
|
if ((props.modelValue || "").trim() === "") {
|
|
return null;
|
|
} else {
|
|
let v = props.modelValue.split("-");
|
|
// console.log(111111, v, JSON.stringify(classifyListUp.value));
|
|
v = props.formProps.showAllLevels ? v : v[v.length - 1];
|
|
return setData(classifyListUp.value, v, "-");
|
|
}
|
|
},
|
|
set(val) {
|
|
emits("update:modelValue", val);
|
|
},
|
|
});
|
|
|
|
const emits = defineEmits(["update:modelValue"]);
|
|
|
|
const show = ref(false);
|
|
|
|
function chooseLocation() {
|
|
if (props.formProps.disabled) return;
|
|
if (!props.readonly) {
|
|
show.value = true;
|
|
}
|
|
}
|
|
|
|
function selectOk({ selectedOptions }) {
|
|
console.log(JSON.stringify(selectedOptions));
|
|
if (props.formProps.showAllLevels) {
|
|
_value.value = selectedOptions.map((option) => option.label).join("/");
|
|
} else {
|
|
_value.value = selectedOptions[selectedOptions.length - 1].label;
|
|
}
|
|
|
|
show.value = false;
|
|
}
|
|
|
|
function change(p, c, a) {
|
|
area.province = p;
|
|
area.city = c;
|
|
area.area = a;
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped></style>
|