115 lines
2.1 KiB
Vue
115 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<cl-select-popup
|
||
|
|
ref="popup"
|
||
|
|
title="选择节点"
|
||
|
|
:max-height="maxHeight"
|
||
|
|
:show-picker="showPicker"
|
||
|
|
@close="onClose"
|
||
|
|
>
|
||
|
|
<template #list>
|
||
|
|
<view class="cl-tree-select">
|
||
|
|
<cl-tree
|
||
|
|
v-if="visible"
|
||
|
|
v-model="value"
|
||
|
|
:data="data"
|
||
|
|
:row-height="rowHeight"
|
||
|
|
:check-strictly="checkStrictly"
|
||
|
|
:default-expand-all="defaultExpandAll"
|
||
|
|
:auto-expand="autoExpand"
|
||
|
|
:accordion="accordion"
|
||
|
|
:multiple="multiple"
|
||
|
|
:keys="keys"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template #confirm>
|
||
|
|
<cl-button round fill type="primary" size="large" :disabled="!isChecked" @tap="save"
|
||
|
|
>确定</cl-button
|
||
|
|
>
|
||
|
|
</template>
|
||
|
|
</cl-select-popup>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { computed, defineComponent, ref } from "vue";
|
||
|
|
import { TreeProps, useTree } from "../cl-tree/helper";
|
||
|
|
import { parseRpx } from "/@/cool/utils";
|
||
|
|
import { cloneDeep, isEmpty } from "lodash-es";
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: "cl-tree-select",
|
||
|
|
|
||
|
|
props: {
|
||
|
|
maxHeight: {
|
||
|
|
type: [String, Number],
|
||
|
|
default: 800,
|
||
|
|
},
|
||
|
|
showPicker: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
...TreeProps,
|
||
|
|
},
|
||
|
|
|
||
|
|
emits: ["update:modelValue", "change"],
|
||
|
|
|
||
|
|
setup(props, { emit }) {
|
||
|
|
const { label } = useTree({ props });
|
||
|
|
|
||
|
|
// 选择弹框
|
||
|
|
const popup = ref();
|
||
|
|
|
||
|
|
// 是否可见
|
||
|
|
const visible = ref(false);
|
||
|
|
|
||
|
|
// 绑定值
|
||
|
|
const value = ref();
|
||
|
|
|
||
|
|
// 是否选择了
|
||
|
|
const isChecked = computed(() => {
|
||
|
|
return !(props.multiple
|
||
|
|
? isEmpty(value.value)
|
||
|
|
: value.value === undefined || value.value === null || value.value === "");
|
||
|
|
});
|
||
|
|
|
||
|
|
// 打开
|
||
|
|
function open() {
|
||
|
|
visible.value = true;
|
||
|
|
value.value = cloneDeep(props.modelValue);
|
||
|
|
popup.value?.open();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 关闭
|
||
|
|
function close() {
|
||
|
|
popup.value?.close();
|
||
|
|
}
|
||
|
|
|
||
|
|
// 关闭事件
|
||
|
|
function onClose() {
|
||
|
|
visible.value = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 保存
|
||
|
|
function save() {
|
||
|
|
emit("update:modelValue", value.value);
|
||
|
|
emit("change", value.value);
|
||
|
|
close();
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
popup,
|
||
|
|
visible,
|
||
|
|
value,
|
||
|
|
label,
|
||
|
|
open,
|
||
|
|
close,
|
||
|
|
save,
|
||
|
|
onClose,
|
||
|
|
parseRpx,
|
||
|
|
isChecked,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|