Skip to content

Commit d2b78d7

Browse files
betterdancingbetterdancing
authored
Create ModelSelect.vue
1 parent 75c50c5 commit d2b78d7

1 file changed

Lines changed: 305 additions & 0 deletions

File tree

‎designer-demo/src/configurators/ModelSelect.vue‎

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
<template>
2+
<div class="model-select-wrap">
3+
<tiny-select
4+
v-model="appId"
5+
:options="applicationsList"
6+
placeholder="选择应用"
7+
filterable
8+
clearable
9+
value-key="value"
10+
value-field="id"
11+
@change="applicationChange"
12+
></tiny-select>
13+
<tiny-search
14+
class="search"
15+
v-model="searchWords"
16+
placeholder="按模型名称搜索"
17+
clearable
18+
@search="search"
19+
@clear="search"
20+
>
21+
<template #prefix>
22+
<tiny-icon-search />
23+
</template>
24+
</tiny-search>
25+
</div>
26+
<div class="model-table-wrap">
27+
<tiny-grid
28+
ref="modelListRef"
29+
:data="modelList"
30+
:loading="gridLoading"
31+
@radio-change="selectModel"
32+
>
33+
<tiny-grid-column type="radio" width="30"></tiny-grid-column>
34+
<tiny-grid-column
35+
field="name"
36+
title="模型名称"
37+
width="170"
38+
show-overflow
39+
></tiny-grid-column>
40+
<tiny-grid-column
41+
field="description"
42+
title="模型描述"
43+
show-overflow
44+
></tiny-grid-column>
45+
<tiny-grid-column
46+
field="modelVersion"
47+
title="版本"
48+
width="90"
49+
show-overflow
50+
>
51+
<template #default="data">
52+
<tiny-dropdown
53+
:title="data.row.modelVersion"
54+
trigger="click"
55+
@visible-change="showVersions($event, data.row)"
56+
@item-click="changeVersion($event, data)"
57+
>
58+
<template #dropdown>
59+
<tiny-dropdown-menu popper-class="dropdown-menu-list">
60+
<tiny-dropdown-item
61+
v-for="item in data.row?.versions || []"
62+
:key="data.row.id + '-' + item.modelVersion"
63+
:itemData="item.modelVersion"
64+
>
65+
{{ item.modelVersion }}
66+
</tiny-dropdown-item>
67+
</tiny-dropdown-menu>
68+
</template>
69+
</tiny-dropdown>
70+
</template>
71+
</tiny-grid-column>
72+
</tiny-grid>
73+
<tiny-pager
74+
:current-page="pagerState.currentPage"
75+
:page-size="modelPageSize"
76+
pager-count="3"
77+
:total="pagerState.total"
78+
hide-on-single-page
79+
layout="total, prev, pager, next"
80+
@current-change="pageChange"
81+
></tiny-pager>
82+
</div>
83+
</template>
84+
<script setup>
85+
import {
86+
ref,
87+
reactive,
88+
watch,
89+
defineProps,
90+
defineEmits,
91+
computed,
92+
} from "vue";
93+
import {
94+
Search as TinySearch,
95+
Select as TinySelect,
96+
Grid as TinyGrid,
97+
GridColumn as TinyGridColumn,
98+
Pager as TinyPager,
99+
Dropdown as TinyDropdown,
100+
DropdownMenu as TinyDropdownMenu,
101+
DropdownItem as TinyDropdownItem,
102+
} from "@opentiny/vue";
103+
import { iconSearch } from "@opentiny/vue-icon";
104+
import { HttpService } from "../../composable";
105+
106+
const props = defineProps({
107+
meta: {
108+
type: Object,
109+
default: () => ({}),
110+
},
111+
modelPageSize: {
112+
type: Number,
113+
default: 10,
114+
},
115+
isShow: {
116+
type: Boolean,
117+
default: false,
118+
},
119+
});
120+
const emit = defineEmits(["modelSelect"]);
121+
const TinyIconSearch = iconSearch();
122+
const gridLoading = ref(false);
123+
// 应用列表
124+
const appId = ref("");
125+
const applicationsList = ref([]);
126+
const modelListRef = ref(null);
127+
// 已选中的模型
128+
const modelContent = computed(() => {
129+
return props.meta.widget.props.modelValue;
130+
});
131+
// 模型列表
132+
const modelList = ref([]);
133+
// 分页配置
134+
const pagerState = reactive({
135+
currentPage: 1,
136+
total: 0,
137+
});
138+
// 已选中的模型
139+
const currentSelectedModel = ref();
140+
// 搜索
141+
const searchWords = ref("");
142+
143+
const getApplications = () => {
144+
HttpService.apis
145+
.get(
146+
"http://10.159.227.31:9091/baseUiEngine/basic/xdm/module/getApplications"
147+
)
148+
.then((res) => {
149+
applicationsList.value = res || [];
150+
if (modelContent.value) {
151+
appId.value = modelContent.value.config?.modelApplicationId;
152+
searchWords.value = modelContent.value.name;
153+
getModelsByGroup();
154+
}
155+
});
156+
};
157+
158+
const getModelsByGroup = () => {
159+
if (!appId.value) {
160+
return;
161+
}
162+
gridLoading.value = true;
163+
HttpService.apis
164+
.get(
165+
`http://10.159.227.31:9091/baseUiEngine/basic/xdm/module/getModules/${appId.value}/${props.modelPageSize}/${pagerState.currentPage}?name=${searchWords.value}`
166+
)
167+
.then((res) => {
168+
if (res.code === 200) {
169+
modelList.value = res.data || [];
170+
pagerState.total = res.pageVo?.totalRows || 0;
171+
modelList.value.forEach((item) => {
172+
if (modelContent.value && modelContent.value.id === item.id) {
173+
item.modelVersion = modelContent.value.config.modelVersion;
174+
modelListRef.value.setRadioRow(item);
175+
selectModel({ row: item });
176+
}
177+
});
178+
}
179+
gridLoading.value = false;
180+
})
181+
.catch(() => (gridLoading.value = false));
182+
};
183+
184+
const search = () => {
185+
getModelsByGroup();
186+
};
187+
188+
const getModelVersionsByName = async (modelName) => {
189+
if (!appId.value) {
190+
return null;
191+
}
192+
return await HttpService.apis.get(
193+
`http://10.159.227.31:9091/baseUiEngine/basic/xdm/module/getModuleVersion/${appId.value}?name=${modelName}`
194+
);
195+
};
196+
197+
const applicationChange = () => {
198+
pagerState.currentPage = 1;
199+
getModelsByGroup();
200+
};
201+
202+
const pageChange = (curPage) => {
203+
pagerState.currentPage = curPage;
204+
getModelsByGroup();
205+
};
206+
207+
const showVersions = async (openStatus, row) => {
208+
if (!openStatus) {
209+
return;
210+
}
211+
const versions = await getModelVersionsByName(row.nameEn);
212+
if (versions) {
213+
row.versions = versions.map((item) => ({
214+
name: item.name,
215+
nameEn: item.nameEn,
216+
modelVersion: item.modelVersion,
217+
}));
218+
}
219+
};
220+
221+
const selectModel = (data) => {
222+
currentSelectedModel.value = data.row;
223+
const emitData = {
224+
appId: appId.value,
225+
modelData: data.row,
226+
};
227+
emit("modelSelect", emitData);
228+
};
229+
230+
const changeVersion = ({ itemData }, data) => {
231+
// 如果当前切换的版本为变化，则不做处理
232+
if (data.row.modelVersion === itemData) {
233+
return;
234+
}
235+
data.row.modelVersion = itemData;
236+
// 如果当前选中的模型是正在切换版本的模型，则调用接口查询字段详情
237+
if (
238+
currentSelectedModel.value &&
239+
currentSelectedModel.value?.id === data.row.id
240+
) {
241+
selectModel(data);
242+
}
243+
};
244+
245+
watch(
246+
() => props.isShow,
247+
(value) => {
248+
if (value) {
249+
getApplications();
250+
}
251+
}
252+
);
253+
</script>
254+
255+
<style lang="less" scoped>
256+
.model-select-wrap {
257+
display: flex;
258+
:deep(.tiny-select) {
259+
.tiny-input__inner {
260+
border-radius: 4px 0 0 4px;
261+
}
262+
}
263+
:deep(.tiny-search) {
264+
.tiny-search__line {
265+
border-left: none;
266+
border-radius: 0 4px 4px 0;
267+
}
268+
}
269+
}
270+
.model-table-wrap {
271+
display: flex;
272+
flex-direction: column;
273+
gap: 10px;
274+
margin-top: 10px;
275+
276+
:deep(.tiny-dropdown__trigger) {
277+
.tiny-dropdown__suffix-inner {
278+
display: flex;
279+
justify-content: center;
280+
}
281+
}
282+
283+
.tiny-pager {
284+
padding-top: 0;
285+
}
286+
}
287+
.dropdown-menu-list.tiny-popper.tiny-dropdown-menu {
288+
margin-top: 4px;
289+
}
290+
.dropdown-menu-list {
291+
padding: 8px 0;
292+
margin-left: 16px;
293+
border-radius: 4px;
294+
z-index: 9999;
295+
296+
:deep(.tiny-dropdown-item__wrap) {
297+
width: 70px;
298+
display: flex;
299+
align-items: center;
300+
justify-content: center;
301+
height: 24px;
302+
line-height: 24px;
303+
}
304+
}
305+
</style>

0 commit comments

Comments
 (0)