一、需求
前端勾选checkbox后点击按钮打开对话框选择值并将该值通过保存传递给后端
应用场景:
代码展示:
<template>
<div v-model="order">
<el-button
type="primary"
@click="codeVisible = true"
>
{
{
t('actions.code') }}
</el-button>
</div>
<el-dialog
v-model="codeVisible"
title="标题"
draggable
width="480px"
>
<el-form label-width="100px" :model="codeValue">
<el-form-item :label="t('actions.code')" prop="code">
<el-select
v-model="codeValue"
clearable
style="width: 340px"
@change="codeValueChange"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="codeVisible = false">
{
{
t('global.action.close') }}</el-button
>
<el-button @click="saveCode" type="primary">
{
{
t('global.action.save') }}</el-button
>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import {
computed,
defineComponent,
h,
onMounted,
reactive,
ref,
toRefs,
} from 'vue';
import {
useI18n } from 'vue-i18n';
import {
ElMessage } from 'element-plus';
import {
updatedCode } from '@/services';
interface ViewState {
codeVisible: boolean;
order: string[];
selectedOrders: OrderVO[];
}
export default defineComponent({
name: 'order',
setup() {
const state = reactive<ViewState>({
order: "",
codeVisible: false,
selectedOrders: [],
});
const codeValue = ref('');
const options = [
{
value: '12',
label: '12',
},
{
value: '13',
label: '13',
},
];
// 所勾选的checkbox
const selectedIds = computed<string[]>(() => {
return state.selectedOrders.map(item => item.id as string);
});
const codeValueChange = computed<string>(() => {
return codeValue.value;
});
function saveCode() {
updatedCode(selectedIds.value, codeValueChange.value)
.then(() => {
ElMessage({
type: 'success',
message: t('messages.codeSuccess'),
});
})
.finally(() => {
state.codeVisible = false;
searchOrders();
});
}
return {
t,state, codeValue, options, saveCode };
},
});
</script>
<i18n>
{
"zh": {
"actions": {
"code": "代码",
},
"messages": {
"codeSuccess": "代码保存成功",
},
}
}
</i18n>