import { useCrud, useForm } from '@cool-vue/crud';
|
import { cloneDeep, isEmpty, isFunction, isString } from 'lodash-es';
|
import {
|
computed,
|
defineComponent,
|
onActivated,
|
onMounted,
|
type PropType,
|
ref,
|
type Ref,
|
toValue,
|
useModel
|
} from 'vue';
|
import { deepTree, parsePx } from '/@/cool/utils';
|
import { useI18n } from 'vue-i18n';
|
import { useCool } from '/@/cool';
|
import { CrudProps } from '../../comm';
|
|
export default defineComponent({
|
name: 'cl-select',
|
|
props: {
|
...CrudProps,
|
modelValue: [String, Number, Array],
|
options: {
|
type: [Array, Object] as PropType<any[] | Ref<any[]>>,
|
default: () => []
|
},
|
prop: String,
|
labelKey: {
|
type: String,
|
default: 'label'
|
},
|
valueKey: {
|
type: String,
|
default: 'value'
|
},
|
width: [String, Number],
|
|
// 是否树形
|
tree: Boolean,
|
// 是否返回选中层级下的所有值
|
allLevelsId: Boolean,
|
// 是否父子不互相关联
|
checkStrictly: Boolean,
|
// 默认展开所有
|
defaultExpandAll: Boolean,
|
// 顶级标签
|
topLabel: String,
|
// 是否选择当前表格数据，如果是，则不能选择自身及其下级
|
current: Boolean,
|
|
// 请求接口，如果是字符串，则使用 crud 下的方法
|
api: [String, Function],
|
|
// 值变化刷新
|
refreshOnChange: {
|
type: Boolean,
|
default: true
|
},
|
// 是否在激活时刷新
|
refreshOnActivated: {
|
type: Boolean,
|
default: true
|
}
|
},
|
|
emits: ['update:modelValue', 'change'],
|
|
setup(props, { emit, expose }) {
|
const { refs, setRefs, route } = useCool();
|
const { t } = useI18n();
|
|
// cl-crud
|
const Crud = useCrud();
|
|
// cl-form
|
const Form = useForm();
|
|
// 是否用于搜索
|
const isSearch = computed(() => !Form.value || Form.value?.name === 'search');
|
|
// 选项
|
const options = ref<Dict.Item[]>();
|
|
// 选中值
|
const value = useModel(props, 'modelValue');
|
|
// 列表
|
const list = computed(() => {
|
let data: any[] = [];
|
|
if (props.current) {
|
data = cloneDeep(toValue(Crud.value?.['cl-table']?.data));
|
|
// 禁用自身及其下级
|
function deep(d: any, f: boolean) {
|
if (d.id && d.id == Form.value?.getForm('id')) {
|
f = true;
|
}
|
|
if (f) {
|
d.disabled = true;
|
}
|
|
if (d.children) {
|
d.children.forEach((e: any) => {
|
deep(e, f);
|
});
|
}
|
}
|
|
deep({ children: data }, false);
|
} else {
|
data = toValue(options.value || props.options) || [];
|
}
|
|
// 如果存在顶级标签
|
if (props.topLabel) {
|
return [
|
{
|
[props.labelKey]: props.topLabel,
|
[props.valueKey]: 0,
|
children: data
|
}
|
];
|
}
|
|
return data;
|
});
|
|
// 获取值
|
function getValue(val: any): any | any[] {
|
if (props.allLevelsId) {
|
const ids: any[] = [];
|
|
// 获取所有的值
|
const deep = (arr: Dict.Item[], f: boolean) => {
|
arr.forEach(e => {
|
const f2 = e[props.valueKey] == val;
|
|
if (f || f2) {
|
ids.push(e[props.valueKey]);
|
}
|
|
if (e.children) {
|
deep(e.children, f || f2);
|
}
|
});
|
};
|
|
deep(list.value, false);
|
|
return isEmpty(ids) ? undefined : ids;
|
} else {
|
return val === '' ? undefined : val;
|
}
|
}
|
|
// 值改变
|
function onChange(val: any) {
|
const v = getValue(val);
|
|
emit('update:modelValue', v);
|
emit('change', v);
|
|
if (isSearch.value) {
|
if (props.prop && props.refreshOnChange) {
|
Crud.value?.refresh({ page: 1, [props.prop]: v });
|
}
|
}
|
}
|
|
// 聚焦
|
function focus() {
|
refs.select?.focus();
|
}
|
|
// 获取选项数据
|
function refresh() {
|
let req: Promise<any> | null = null;
|
|
if (isString(props.api)) {
|
req = Crud.value?.service[props.api]();
|
}
|
|
if (isFunction(props.api)) {
|
req = props.api();
|
}
|
|
if (req) {
|
req.then(res => {
|
options.value = deepTree(res);
|
});
|
}
|
}
|
|
onMounted(() => {
|
if (props.api) {
|
refresh();
|
|
onActivated(() => {
|
if (props.refreshOnActivated) {
|
if (!Form.value || Form.value?.name == 'search') {
|
refresh();
|
}
|
}
|
});
|
}
|
});
|
|
expose({
|
focus
|
});
|
|
return () => {
|
// 样式
|
const style = {
|
width: parsePx(props.width!)
|
};
|
|
// 占位符
|
const placeholder = isSearch.value ? t('全部') : t('请选择');
|
|
// 树形下拉框
|
const TreeSelect = (
|
<el-tree-select
|
v-model={value.value}
|
clearable
|
filterable
|
placeholder={placeholder}
|
disabled={props.disabled}
|
data={list.value}
|
checkStrictly={props.allLevelsId || props.checkStrictly}
|
defaultExpandAll={props.defaultExpandAll}
|
props={{
|
label: props.labelKey,
|
value: props.valueKey
|
}}
|
style={style}
|
onChange={onChange}
|
ref={setRefs('select')}
|
/>
|
);
|
|
// 普通下拉框
|
const Select = (
|
<el-select
|
v-model={value.value}
|
clearable
|
filterable
|
disabled={props.disabled}
|
placeholder={placeholder}
|
style={style}
|
onChange={onChange}
|
ref={setRefs('select')}
|
>
|
{list.value?.map(e => {
|
return isString(e) ? (
|
<el-option label={e} value={e} />
|
) : (
|
<el-option
|
disabled={e.disabled}
|
label={e[props.labelKey]}
|
value={e[props.valueKey]}
|
/>
|
);
|
})}
|
</el-select>
|
);
|
|
return props.tree ? TreeSelect : Select;
|
};
|
}
|
});
|
