import { useCrud } from '@cool-vue/crud';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { defineComponent, ref, watch } from 'vue';
|
import { isBoolean, isFunction } from 'lodash-es';
|
import { CrudProps } from '../../comm';
|
import { useI18n } from 'vue-i18n';
|
|
export default defineComponent({
|
name: 'cl-switch',
|
|
props: {
|
...CrudProps,
|
modelValue: [Number, String, Boolean],
|
activeValue: {
|
type: [Number, String, Boolean],
|
default: 1
|
},
|
inactiveValue: {
|
type: [Number, String, Boolean],
|
default: 0
|
},
|
api: Function,
|
isCheck: Boolean
|
},
|
|
emits: ['update:modelValue', 'change'],
|
|
setup(props, { emit }) {
|
const { t } = useI18n();
|
|
// cl-crud
|
const Crud = useCrud();
|
|
// 状态
|
const status = ref<boolean | number | string>();
|
|
// 选中值类型
|
const activeValue = ref();
|
const inactiveValue = ref();
|
|
// 监听值
|
watch(
|
() => props.modelValue,
|
val => {
|
status.value = val;
|
|
if (val !== undefined) {
|
if (isBoolean(val)) {
|
activeValue.value = true;
|
inactiveValue.value = false;
|
|
return true;
|
}
|
}
|
|
activeValue.value = props.activeValue;
|
inactiveValue.value = props.inactiveValue;
|
},
|
{
|
immediate: true
|
}
|
);
|
|
// 监听改变
|
function onChange(val: boolean | string | number) {
|
const next = () => {
|
if (props.column && props.scope) {
|
if (val !== undefined) {
|
if (
|
status.value === activeValue.value ||
|
status.value === inactiveValue.value
|
) {
|
const params = {
|
id: props.scope.id,
|
[props.column.property]: val
|
};
|
|
const req: Promise<any> = isFunction(props.api)
|
? props.api(params)
|
: Crud.value?.service.update(params);
|
|
if (req) {
|
req.then(() => {
|
emit('update:modelValue', val);
|
emit('change', val);
|
ElMessage.success(t('更新成功'));
|
}).catch(err => {
|
ElMessage.error(err.message);
|
});
|
}
|
}
|
}
|
} else {
|
emit('update:modelValue', val);
|
emit('change', val);
|
}
|
};
|
|
if (props.isCheck) {
|
ElMessageBox.confirm(val ? t('确定要开启吗？') : t('确定要关闭吗？'), t('提示'), {
|
type: 'warning'
|
})
|
.then(() => {
|
next();
|
})
|
.catch(() => null);
|
} else {
|
next();
|
}
|
}
|
|
// 点击事件, 阻止冒泡
|
function onClick(event: MouseEvent) {
|
event.stopPropagation();
|
}
|
|
return () => {
|
return (
|
<el-switch
|
model-value={status.value}
|
active-value={activeValue.value}
|
inactive-value={inactiveValue.value}
|
disabled={props.disabled}
|
onChange={onChange}
|
onClick={onClick}
|
/>
|
);
|
};
|
}
|
});
|
