114 lines
2.5 KiB
Vue
114 lines
2.5 KiB
Vue
<script setup>
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
loading: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: 'account',
|
||
},
|
||
platform: {
|
||
type: String,
|
||
default: 'local',
|
||
},
|
||
remark: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
platformMap: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits(['update:modelValue', 'update:platform', 'update:remark', 'confirm']);
|
||
|
||
function typeText(type) {
|
||
if (type === 'account') return '账号密码';
|
||
if (type === 'account_tk') return '账号密码+Token';
|
||
return 'Token';
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<el-dialog
|
||
class="pool-extract-dialog"
|
||
:model-value="modelValue"
|
||
title="提取账号"
|
||
width="90%"
|
||
@update:model-value="(v) => emit('update:modelValue', v)"
|
||
>
|
||
<el-form label-width="84px">
|
||
<el-form-item label="提取类型">
|
||
<el-input :model-value="typeText(type)" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="提取平台">
|
||
<el-select
|
||
:model-value="platform"
|
||
style="width: 100%"
|
||
@update:model-value="(v) => emit('update:platform', v)"
|
||
>
|
||
<el-option
|
||
v-for="(v, k) in platformMap"
|
||
:key="k"
|
||
:value="k"
|
||
:label="v.label"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="备注">
|
||
<el-input
|
||
:model-value="remark"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="提取备注（可选）"
|
||
@update:model-value="(v) => emit('update:remark', v)"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="emit('update:modelValue', false)">取消</el-button>
|
||
<el-button type="primary" :loading="loading" @click="emit('confirm')">
|
||
确认提取
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
:deep(.pool-extract-dialog) {
|
||
max-width: 420px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
:deep(.pool-extract-dialog) {
|
||
width: calc(100vw - 24px) !important;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
:deep(.pool-extract-dialog .el-dialog__body) {
|
||
padding: 12px;
|
||
}
|
||
|
||
:deep(.pool-extract-dialog .el-form-item__label) {
|
||
width: 74px !important;
|
||
}
|
||
|
||
:deep(.pool-extract-dialog .el-dialog__footer .el-button) {
|
||
width: calc(50% - 6px);
|
||
margin: 0;
|
||
}
|
||
|
||
:deep(.pool-extract-dialog .el-dialog__footer) {
|
||
display: flex;
|
||
gap: 12px;
|
||
padding: 8px 12px 12px;
|
||
}
|
||
}
|
||
</style>
|