<template>
|
<div :class="prefixCls">
|
<a-select
|
v-if="query"
|
v-model:value="state"
|
:options="selectOptions"
|
:disabled="disabled"
|
style="width: 100%"
|
v-bind="attrs"
|
@change="onSelectChange"
|
/>
|
<a-switch v-else v-model:checked="checked" :disabled="disabled" v-bind="attrs" @change="onSwitchChange" />
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { computed, ref, watch } from 'vue';
|
import { propTypes } from '/@/utils/propTypes';
|
import { useAttrs } from '/@/hooks/core/useAttrs';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
|
const { prefixCls } = useDesign('j-switch');
|
const props = defineProps({
|
// v-model:value
|
value: propTypes.oneOfType([propTypes.string, propTypes.number]),
|
// 取值 options
|
options: propTypes.array.def(() => ['Y', 'N']),
|
// 文本 options
|
labelOptions: propTypes.array.def(() => ['是', '否']),
|
// 是否使用下拉
|
query: propTypes.bool.def(false),
|
// 是否禁用
|
disabled: propTypes.bool.def(false),
|
});
|
const attrs = useAttrs();
|
const emit = defineEmits(['change', 'update:value']);
|
|
const checked = ref<boolean>(false);
|
const [state] = useRuleFormItem(props, 'value', 'change');
|
watch(
|
() => props.value,
|
(val) => {
|
if (!props.query) {
|
if (!val) {
|
checked.value = false;
|
emitValue(props.options[1]);
|
} else {
|
checked.value = props.options[0] == val;
|
}
|
}
|
},
|
{ immediate: true }
|
);
|
|
const selectOptions = computed(() => {
|
let options: any[] = [];
|
options.push({ value: props.options[0], label: props.labelOptions[0] });
|
options.push({ value: props.options[1], label: props.labelOptions[1] });
|
return options;
|
});
|
|
function onSwitchChange(checked) {
|
let flag = checked === false ? props.options[1] : props.options[0];
|
emitValue(flag);
|
}
|
|
function onSelectChange(value) {
|
emitValue(value);
|
}
|
|
function emitValue(value) {
|
emit('change', value);
|
emit('update:value', value);
|
}
|
</script>
|
|
<style lang="less">
|
//noinspection LessUnresolvedVariable
|
@prefix-cls: ~'@{namespace}-j-switch';
|
|
.@{prefix-cls} {
|
}
|
</style>
|
