抽取公共的框选方式的组件
This commit is contained in:
joylink_zhaoerwei
parent
31e5048880
commit
68398f8f58
179
src/components/common/SelectConfigUtils.vue
Normal file
179
src/components/common/SelectConfigUtils.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<q-list bordered separator class="rounded-borders">
|
||||
<q-expansion-item
|
||||
bordered
|
||||
expand-separator
|
||||
v-for="(configItem, index) in selectConfig"
|
||||
:key="configItem"
|
||||
v-model="configItem.expanded"
|
||||
:label="configItem.code"
|
||||
@click="toggleItem(index)"
|
||||
>
|
||||
<q-card>
|
||||
<q-item no-wrap class="q-gutter-y-sm column">
|
||||
<q-input
|
||||
v-if="props.ableAdd"
|
||||
outlined
|
||||
v-model="configItem.code"
|
||||
label="配置项类型"
|
||||
lazy-rules
|
||||
/>
|
||||
<div class="q-gutter-sm row">
|
||||
<q-chip
|
||||
v-for="(item, selectIndex) in configItem.refDevicesCode"
|
||||
:key="item"
|
||||
square
|
||||
color="primary"
|
||||
text-color="white"
|
||||
removable
|
||||
@remove="removeSelect(selectIndex)"
|
||||
clickable
|
||||
@click="clickSelectCenter(selectIndex)"
|
||||
>
|
||||
{{ item }}
|
||||
</q-chip>
|
||||
</div>
|
||||
<div>
|
||||
<q-btn
|
||||
v-show="configItem.refDevicesCode.length > 0"
|
||||
style="width: 100px"
|
||||
label="清空选择"
|
||||
color="red"
|
||||
class="q-mr-md"
|
||||
@click="clearAllSelect(index)"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="props.ableAdd"
|
||||
label="删除配置项"
|
||||
color="secondary"
|
||||
@click="deleteCombinationtype(index)"
|
||||
/>
|
||||
</div>
|
||||
</q-item>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
<q-btn
|
||||
v-if="props.ableAdd"
|
||||
class="q-mt-md"
|
||||
label="增加配置项"
|
||||
color="secondary"
|
||||
@click="addCombinationtype"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { inject, ref, watch } from 'vue';
|
||||
import { IDrawApp, JlGraphic } from 'src/jl-graphic';
|
||||
import { Turnout } from 'src/graphics/turnout/Turnout';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
drawStore: {
|
||||
selectedGraphics: JlGraphic[];
|
||||
getDrawApp(): IDrawApp;
|
||||
};
|
||||
ableAdd?: boolean;
|
||||
}>(),
|
||||
{ ableAdd: false }
|
||||
);
|
||||
|
||||
const selectConfig = ref<
|
||||
{
|
||||
code: string;
|
||||
refDevices: string[];
|
||||
refDevicesCode: string[];
|
||||
expanded: boolean;
|
||||
}[]
|
||||
>([
|
||||
{
|
||||
code: '配置项模版',
|
||||
refDevices: [],
|
||||
refDevicesCode: [],
|
||||
expanded: false,
|
||||
},
|
||||
]);
|
||||
|
||||
let selectGraphic: JlGraphic[] = [];
|
||||
|
||||
defineExpose({
|
||||
selectConfig,
|
||||
selectGraphic,
|
||||
});
|
||||
|
||||
const filterSelect = inject('filter') as (g: JlGraphic) => boolean;
|
||||
watch(
|
||||
() => props.drawStore.selectedGraphics,
|
||||
(val) => {
|
||||
if (val && val.length > 0 && clickIndex !== null) {
|
||||
const selectFilter = props.drawStore.selectedGraphics?.filter(
|
||||
filterSelect
|
||||
) as JlGraphic[];
|
||||
selectGraphic.push(...selectFilter);
|
||||
selectGraphic = Array.from(new Set(selectGraphic));
|
||||
props.drawStore.getDrawApp().updateSelected(...selectGraphic);
|
||||
selectConfig.value[clickIndex].refDevicesCode = selectGraphic.map((g) =>
|
||||
(g as Turnout).datas.code == '' ? g.id : (g as Turnout).datas.code
|
||||
);
|
||||
selectConfig.value[clickIndex].refDevices = selectGraphic.map(
|
||||
(g) => g.id
|
||||
) as string[];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let clickIndex: null | number = null;
|
||||
function toggleItem(index: number) {
|
||||
const drawApp = props.drawStore.getDrawApp();
|
||||
selectGraphic = [];
|
||||
drawApp.updateSelected();
|
||||
if (selectConfig.value[index].expanded == true) {
|
||||
clickIndex = index;
|
||||
const select: JlGraphic[] = [];
|
||||
selectConfig.value[index].refDevices.forEach((id: string) => {
|
||||
const g = drawApp.queryStore.queryById(id);
|
||||
select.push(g);
|
||||
});
|
||||
drawApp.updateSelected(...select);
|
||||
} else {
|
||||
clickIndex = null;
|
||||
}
|
||||
}
|
||||
|
||||
function removeSelect(removeIndex: number) {
|
||||
const clickTarget = selectConfig.value[clickIndex as number];
|
||||
selectGraphic.splice(removeIndex, 1);
|
||||
clickTarget.refDevicesCode.splice(removeIndex, 1);
|
||||
clickTarget.refDevices.splice(removeIndex, 1);
|
||||
props.drawStore.getDrawApp().updateSelected(...selectGraphic);
|
||||
}
|
||||
|
||||
function clickSelectCenter(index: number) {
|
||||
const drawApp = props.drawStore.getDrawApp();
|
||||
const clickTarget = selectConfig.value[clickIndex as number];
|
||||
const turnout = drawApp.queryStore.queryById(clickTarget.refDevices[index]);
|
||||
drawApp.makeGraphicCenterShow(turnout);
|
||||
}
|
||||
|
||||
function clearAllSelect(index: number) {
|
||||
selectConfig.value[index].refDevices = [];
|
||||
selectConfig.value[index].refDevicesCode = [];
|
||||
selectGraphic = [];
|
||||
props.drawStore.getDrawApp().updateSelected();
|
||||
}
|
||||
|
||||
function addCombinationtype() {
|
||||
selectConfig.value.push({
|
||||
code: '配置项模版',
|
||||
refDevices: [],
|
||||
refDevicesCode: [],
|
||||
expanded: false,
|
||||
});
|
||||
}
|
||||
|
||||
function deleteCombinationtype(index: number) {
|
||||
selectConfig.value.splice(index, 1);
|
||||
selectGraphic = [];
|
||||
props.drawStore.getDrawApp().updateSelected();
|
||||
}
|
||||
</script>
|
||||
@ -3,51 +3,8 @@
|
||||
<q-card-section>
|
||||
<div class="text-h6">一键生成计轴配置</div>
|
||||
</q-card-section>
|
||||
<q-form ref="myForm" @submit="onSubmit">
|
||||
<q-list bordered separator class="rounded-borders">
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
v-for="(combinationtype, index) in axleCountingConfig.generate"
|
||||
:key="combinationtype"
|
||||
v-model="combinationtype.expanded"
|
||||
:label="combinationtype.code"
|
||||
@click="toggleItem(index)"
|
||||
>
|
||||
<q-card>
|
||||
<q-item>
|
||||
<q-item-section no-wrap class="q-gutter-y-sm column">
|
||||
<div class="q-gutter-sm row">
|
||||
<q-chip
|
||||
v-for="(
|
||||
item, selectIndex
|
||||
) in combinationtype.refTurnoutCode"
|
||||
:key="item"
|
||||
square
|
||||
color="primary"
|
||||
text-color="white"
|
||||
removable
|
||||
@remove="removeSelect(selectIndex)"
|
||||
clickable
|
||||
@click="clickSelectCenter(selectIndex)"
|
||||
>
|
||||
{{ item }}
|
||||
</q-chip>
|
||||
</div>
|
||||
<div>
|
||||
<q-btn
|
||||
v-show="combinationtype.refTurnoutCode.length > 0"
|
||||
style="width: 130px"
|
||||
label="清空选择的道岔"
|
||||
color="red"
|
||||
class="q-mr-md"
|
||||
@click="clearAllSelect(index)"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
<q-form ref="myForm">
|
||||
<selectConfig-utils ref="selectConfigUtils" :drawStore="drawStore" />
|
||||
<div class="q-mt-md">
|
||||
<q-btn
|
||||
label="确认修改"
|
||||
@ -62,7 +19,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { onMounted, ref, provide } from 'vue';
|
||||
import { QForm, useQuasar } from 'quasar';
|
||||
import { JlGraphic } from 'src/jl-graphic';
|
||||
import { useDrawStore } from 'src/stores/draw-store';
|
||||
@ -72,74 +29,58 @@ import {
|
||||
loadGenerateAxleCountingConfig,
|
||||
setGenerateAxleCountingConfig,
|
||||
} from 'src/drawApp/commonApp';
|
||||
import SelectConfigUtils from 'src/components/common/SelectConfigUtils.vue';
|
||||
|
||||
//供公共选择组件使用
|
||||
const filterSelect = (g: JlGraphic) => g instanceof Turnout;
|
||||
const selectConfigUtils = ref<InstanceType<typeof SelectConfigUtils> | null>(
|
||||
null
|
||||
);
|
||||
provide('filter', filterSelect);
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const drawStore = useDrawStore();
|
||||
const $q = useQuasar();
|
||||
const axleCountingConfig = ref<{
|
||||
generate: {
|
||||
code: string;
|
||||
refTurnout: string[];
|
||||
refTurnoutCode: string[];
|
||||
expanded: boolean;
|
||||
}[];
|
||||
}>({
|
||||
generate: [
|
||||
|
||||
onMounted(() => {
|
||||
selectConfigUtils.value.selectConfig = [
|
||||
{
|
||||
code: 'bb连接的道岔',
|
||||
refTurnout: [],
|
||||
refTurnoutCode: [],
|
||||
refDevices: [],
|
||||
refDevicesCode: [],
|
||||
expanded: false,
|
||||
},
|
||||
{
|
||||
code: '不生成计轴的道岔组',
|
||||
refTurnout: [],
|
||||
refTurnoutCode: [],
|
||||
refDevices: [],
|
||||
refDevicesCode: [],
|
||||
expanded: false,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
let selectGraphic: JlGraphic[] = [];
|
||||
watch(
|
||||
() => drawStore.selectedGraphics,
|
||||
(val) => {
|
||||
if (val && val.length > 0 && clickIndex !== null) {
|
||||
const selectFilter = drawStore.selectedGraphics?.filter(
|
||||
(g) => g.type == Turnout.Type
|
||||
) as JlGraphic[];
|
||||
selectGraphic.push(...selectFilter);
|
||||
selectGraphic = Array.from(new Set(selectGraphic));
|
||||
drawStore.getDrawApp().updateSelected(...selectGraphic);
|
||||
axleCountingConfig.value.generate[clickIndex].refTurnoutCode =
|
||||
selectGraphic.map((g) =>
|
||||
(g as Turnout).datas.code == '' ? g.id : (g as Turnout).datas.code
|
||||
);
|
||||
axleCountingConfig.value.generate[clickIndex].refTurnout =
|
||||
selectGraphic.map((g) => g.id) as string[];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
];
|
||||
const generateAxleCountingConfig = loadGenerateAxleCountingConfig();
|
||||
if (generateAxleCountingConfig !== undefined) {
|
||||
axleCountingConfig.value.generate.forEach((generate) => {
|
||||
if (generate.code == 'bb连接的道岔') {
|
||||
generate.refTurnout = generateAxleCountingConfig.bbConnect;
|
||||
generateAxleCountingConfig.bbConnect.forEach((id) => {
|
||||
const g = drawStore.getDrawApp().queryStore.queryById(id);
|
||||
generate.refTurnoutCode.push(g.code);
|
||||
});
|
||||
} else if (generate.code == '不生成计轴的道岔组') {
|
||||
generate.refTurnout = generateAxleCountingConfig.noGenerateGroup;
|
||||
generateAxleCountingConfig.noGenerateGroup.forEach((id) => {
|
||||
const g = drawStore.getDrawApp().queryStore.queryById(id);
|
||||
generate.refTurnoutCode.push(g.code);
|
||||
});
|
||||
selectConfigUtils.value.selectConfig.forEach(
|
||||
(generate: {
|
||||
code: string;
|
||||
refDevices: string[];
|
||||
refDevicesCode: string[];
|
||||
}) => {
|
||||
if (generate.code == 'bb连接的道岔') {
|
||||
generate.refDevices = generateAxleCountingConfig.bbConnect;
|
||||
generateAxleCountingConfig.bbConnect.forEach((id) => {
|
||||
const g = drawStore.getDrawApp().queryStore.queryById(id);
|
||||
generate.refDevicesCode.push(g.code);
|
||||
});
|
||||
} else if (generate.code == '不生成计轴的道岔组') {
|
||||
generate.refDevices = generateAxleCountingConfig.noGenerateGroup;
|
||||
generateAxleCountingConfig.noGenerateGroup.forEach((id) => {
|
||||
const g = drawStore.getDrawApp().queryStore.queryById(id);
|
||||
generate.refDevicesCode.push(g.code);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@ -150,13 +91,15 @@ async function onSubmit() {
|
||||
try {
|
||||
const generateAxleCountingConfig =
|
||||
new graphicData.GenerateAxleCountingConfig();
|
||||
axleCountingConfig.value.generate.forEach((generate) => {
|
||||
if (generate.code == 'bb连接的道岔') {
|
||||
generateAxleCountingConfig.bbConnect = generate.refTurnout;
|
||||
} else if (generate.code == '不生成计轴的道岔组') {
|
||||
generateAxleCountingConfig.noGenerateGroup = generate.refTurnout;
|
||||
selectConfigUtils.value.selectConfig.forEach(
|
||||
(generate: { code: string; refDevices: string[] }) => {
|
||||
if (generate.code == 'bb连接的道岔') {
|
||||
generateAxleCountingConfig.bbConnect = generate.refDevices;
|
||||
} else if (generate.code == '不生成计轴的道岔组') {
|
||||
generateAxleCountingConfig.noGenerateGroup = generate.refDevices;
|
||||
}
|
||||
}
|
||||
});
|
||||
);
|
||||
setGenerateAxleCountingConfig(generateAxleCountingConfig);
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
@ -172,47 +115,6 @@ async function onSubmit() {
|
||||
});
|
||||
}
|
||||
|
||||
let clickIndex: null | number = null;
|
||||
function toggleItem(index: number) {
|
||||
const drawApp = drawStore.getDrawApp();
|
||||
selectGraphic = [];
|
||||
drawApp.updateSelected();
|
||||
const generate = axleCountingConfig.value.generate;
|
||||
if (generate[index].expanded == true) {
|
||||
clickIndex = index;
|
||||
const select: JlGraphic[] = [];
|
||||
generate[index].refTurnout.forEach((id: string) => {
|
||||
const g = drawApp.queryStore.queryById(id);
|
||||
select.push(g);
|
||||
});
|
||||
drawApp.updateSelected(...select);
|
||||
} else {
|
||||
clickIndex = null;
|
||||
}
|
||||
}
|
||||
|
||||
function removeSelect(removeIndex: number) {
|
||||
const clickTarget = axleCountingConfig.value.generate[clickIndex as number];
|
||||
selectGraphic.splice(removeIndex, 1);
|
||||
clickTarget.refTurnoutCode.splice(removeIndex, 1);
|
||||
clickTarget.refTurnout.splice(removeIndex, 1);
|
||||
drawStore.getDrawApp().updateSelected(...selectGraphic);
|
||||
}
|
||||
|
||||
function clickSelectCenter(index: number) {
|
||||
const drawApp = drawStore.getDrawApp();
|
||||
const clickTarget = axleCountingConfig.value.generate[clickIndex as number];
|
||||
const turnout = drawApp.queryStore.queryById(clickTarget.refTurnout[index]);
|
||||
drawApp.makeGraphicCenterShow(turnout);
|
||||
}
|
||||
|
||||
function clearAllSelect(index: number) {
|
||||
axleCountingConfig.value.generate[index].refTurnout = [];
|
||||
axleCountingConfig.value.generate[index].refTurnoutCode = [];
|
||||
selectGraphic = [];
|
||||
drawStore.getDrawApp().updateSelected();
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
@ -61,6 +61,12 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
if (lineStore.selectedGraphics) {
|
||||
setNewRelayState(lineStore.selectedGraphics[0] as Relay);
|
||||
}
|
||||
});
|
||||
|
||||
function setNewRelayState(relay: Relay) {
|
||||
relayState.value = {
|
||||
id: relay.datas.id,
|
||||
@ -73,22 +79,12 @@ function setNewRelayState(relay: Relay) {
|
||||
subscribeState(relay);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (lineStore.selectedGraphics) {
|
||||
setNewRelayState(lineStore.selectedGraphics[0] as Relay);
|
||||
}
|
||||
});
|
||||
|
||||
function subscribeState(g: Relay) {
|
||||
if (g) {
|
||||
g.on('stateupdate', updateState);
|
||||
}
|
||||
g.on('stateupdate', updateState);
|
||||
}
|
||||
|
||||
function unSubscribeState(g: Relay) {
|
||||
if (g) {
|
||||
g.off('stateupdate', updateState);
|
||||
}
|
||||
g.off('stateupdate', updateState);
|
||||
}
|
||||
|
||||
function updateState(newVal: RelayState) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user