|
@@ -1,94 +1,77 @@
|
|
|
<template>
|
|
<template>
|
|
|
<a-cascader
|
|
<a-cascader
|
|
|
- v-model:value="innerValue"
|
|
|
|
|
- :options="options"
|
|
|
|
|
- :load-data="loadData"
|
|
|
|
|
|
|
+ :value="innerValue"
|
|
|
|
|
+ :options="getMineTree"
|
|
|
:placeholder="placeholder"
|
|
:placeholder="placeholder"
|
|
|
:field-names="{
|
|
:field-names="{
|
|
|
label: 'departName',
|
|
label: 'departName',
|
|
|
value: 'id',
|
|
value: 'id',
|
|
|
- children: 'children',
|
|
|
|
|
|
|
+ children: 'childDepart',
|
|
|
}"
|
|
}"
|
|
|
|
|
+ show-search
|
|
|
@change="handleChange"
|
|
@change="handleChange"
|
|
|
>
|
|
>
|
|
|
|
|
+ <template #displayRender="{ labels }">
|
|
|
|
|
+ {{ labels[labels.length - 1] }}
|
|
|
|
|
+ </template>
|
|
|
</a-cascader>
|
|
</a-cascader>
|
|
|
<!-- <a-input>{{ shownText }}</a-input> -->
|
|
<!-- <a-input>{{ shownText }}</a-input> -->
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
- import { CascaderProps } from 'ant-design-vue';
|
|
|
|
|
- import { last } from 'lodash';
|
|
|
|
|
- import { defineComponent, ref, onMounted, triggerRef } from 'vue';
|
|
|
|
|
- import { getSjmbStructData, getUserMinePermissionData } from './mineData.api';
|
|
|
|
|
|
|
+ import { get, last } from 'lodash';
|
|
|
|
|
+ import { defineComponent, onMounted, computed } from 'vue';
|
|
|
// import { useMessage } from '/@/hooks/web/useMessage';
|
|
// import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
import { propTypes } from '/@/utils/propTypes';
|
|
import { propTypes } from '/@/utils/propTypes';
|
|
|
|
|
+ import { useMineStore } from '/@/store/modules/mine';
|
|
|
|
|
+ import { storeToRefs } from 'pinia';
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
|
name: 'MineCascader',
|
|
name: 'MineCascader',
|
|
|
props: {
|
|
props: {
|
|
|
value: propTypes.string.def(''),
|
|
value: propTypes.string.def(''),
|
|
|
placeholder: propTypes.string.def('请选择矿名'),
|
|
placeholder: propTypes.string.def('请选择矿名'),
|
|
|
- // level: propTypes.number.def(3)
|
|
|
|
|
|
|
+ /** 选择器选择深度,1即执法处,2即区县,3即矿区 */
|
|
|
|
|
+ level: propTypes.number.def(3),
|
|
|
/** 最后一级矿名选择时传递出去的值对应的字段 */
|
|
/** 最后一级矿名选择时传递出去的值对应的字段 */
|
|
|
- valueField: propTypes.string.def('fax'),
|
|
|
|
|
|
|
+ valueField: propTypes.string,
|
|
|
},
|
|
},
|
|
|
emits: ['change', 'update:value'],
|
|
emits: ['change', 'update:value'],
|
|
|
setup(props, { emit }) {
|
|
setup(props, { emit }) {
|
|
|
// const { createMessage } = useMessage();
|
|
// const { createMessage } = useMessage();
|
|
|
|
|
+ const mineStore = useMineStore();
|
|
|
|
|
+ const { getMine, getMineCode, getMinePath, getMineTree } = storeToRefs(mineStore);
|
|
|
|
|
|
|
|
- const shownText = ref('');
|
|
|
|
|
- const innerValue = ref<string[]>([]);
|
|
|
|
|
- const options = ref<CascaderProps['options']>([]);
|
|
|
|
|
-
|
|
|
|
|
- const loadData: CascaderProps['loadData'] = async (selectedOptions) => {
|
|
|
|
|
- const targetOption = last(selectedOptions);
|
|
|
|
|
- if (!targetOption) return;
|
|
|
|
|
- if (targetOption.children) return;
|
|
|
|
|
-
|
|
|
|
|
- targetOption.loading = true;
|
|
|
|
|
-
|
|
|
|
|
- // load options lazily
|
|
|
|
|
- try {
|
|
|
|
|
- if (selectedOptions.length === 2) {
|
|
|
|
|
- const res = await getUserMinePermissionData({ departId: targetOption.id });
|
|
|
|
|
- res.forEach((r) => {
|
|
|
|
|
- r.id = r[props.valueField];
|
|
|
|
|
- });
|
|
|
|
|
- targetOption.children = res;
|
|
|
|
|
- } else {
|
|
|
|
|
- const res = await getSjmbStructData({ orgType: '3', parentId: targetOption.id });
|
|
|
|
|
- targetOption.children = res;
|
|
|
|
|
- targetOption.disabled = !res.length;
|
|
|
|
|
- }
|
|
|
|
|
- } finally {
|
|
|
|
|
- targetOption.loading = false;
|
|
|
|
|
- // trigger watcher
|
|
|
|
|
- triggerRef(options);
|
|
|
|
|
- // options.value = [...options.value];
|
|
|
|
|
- }
|
|
|
|
|
- };
|
|
|
|
|
|
|
+ // const shownText = computed(() => getMine.value.departName || '-');
|
|
|
|
|
+ const innerValue = computed(() => getMinePath.value.map((e) => e.id));
|
|
|
|
|
+ const options = getMineTree;
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* change事件
|
|
* change事件
|
|
|
* @param e
|
|
* @param e
|
|
|
*/
|
|
*/
|
|
|
- function handleChange(value, selectedOptions: CascaderProps['options']) {
|
|
|
|
|
- value = last(value);
|
|
|
|
|
- shownText.value = last(selectedOptions)?.label;
|
|
|
|
|
- emit('update:value', value);
|
|
|
|
|
- emit('change', value);
|
|
|
|
|
|
|
+ function handleChange(value: any[]) {
|
|
|
|
|
+ mineStore.setMineById(last(value));
|
|
|
|
|
+
|
|
|
|
|
+ let val;
|
|
|
|
|
+ if (props.valueField) {
|
|
|
|
|
+ val = get(getMine.value, props.valueField);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ val = getMineCode.value;
|
|
|
|
|
+ }
|
|
|
|
|
+ emit('update:value', val);
|
|
|
|
|
+ emit('change', val);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
- getSjmbStructData({ orgType: '2' }).then((res) => {
|
|
|
|
|
- options.value = res;
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ mineStore.fetchMineTree();
|
|
|
|
|
+ // mineStore.fetchMineTree(props.level);
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
return {
|
|
return {
|
|
|
innerValue,
|
|
innerValue,
|
|
|
options,
|
|
options,
|
|
|
- loadData,
|
|
|
|
|
|
|
+ getMineTree,
|
|
|
handleChange,
|
|
handleChange,
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|