liuhaodong
/
laic-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 设备相关弹窗切换到 t-dialog

main
xiaosi 3 weeks ago
parent
6c5c830bc3
commit
756ee6c872
2 changed files with 113 additions and 87 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      src/components/DockEditModal.vue
  2. 62
      src/views/DevicesView/DevicesView.vue

44
src/components/DockEditModal.vue
View File

@ -1,10 +1,16 @@
<template>
<div class="modal-backdrop" :class="{ open: visible }" @click.self="close">
<div class="modal add-dock-dialog" role="dialog" aria-modal="true" aria-label="编辑机巢">
<header>
<div><span>设备管理</span><h3>编辑机巢</h3></div>
<button class="icon-button" type="button" :disabled="saving" @click="close"><svg><use href="#i-x" /></svg></button>
</header>
<t-dialog
:visible="visible"
header="编辑机巢"
width="520px"
dialog-class-name="add-dock-dialog"
placement="center"
:close-on-overlay-click="!saving"
:close-on-esc-keydown="!saving"
:close-btn="!saving"
@update:visible="onVisibleUpdate"
@close="close"
>
<form novalidate @submit.prevent="submit">
<label><span>机巢名称<b>*</b></span><t-input v-model="form.name" :maxlength="64" placeholder="例如：青山湖 03 号机巢" /></label>
<label><span>机巢 SN</span><t-input :model-value="dock?.sn || ''" readonly /></label>
@ -15,13 +21,12 @@
</div>
<label><span>设备位置<em>选填</em></span><t-input v-model="form.location" :maxlength="128" placeholder="例如：青山湖科技城 C 区" /></label>
<div class="form-error">{{ error }}</div>
<footer>
<button class="plain-command" type="button" :disabled="saving" @click="close">取消</button>
<button class="primary-command" type="submit" :disabled="saving">{{ saving ? '保存中…' : '保存修改' }}</button>
</footer>
</form>
</div>
</div>
<template #footer>
<button class="plain-command" type="button" :disabled="saving" @click="close">取消</button>
<button class="primary-command" type="button" :disabled="saving" @click="submit">{{ saving ? '保存中…' : '保存修改' }}</button>
</template>
</t-dialog>
</template>
<script setup>
@ -54,6 +59,10 @@ function close() {
if (!saving.value) emit('close')
}
function onVisibleUpdate(next) {
if (!next) close()
}
async function submit() {
const name = form.name.trim()
const longitude = Number(form.longitude)
@ -91,9 +100,14 @@ async function submit() {
}
</script>
<style scoped>
.add-dock-dialog :deep(.t-input),
.add-dock-dialog :deep(.t-input-number) {
<style>
.add-dock-dialog .t-input,
.add-dock-dialog .t-input-number {
width: 100%;
}
.add-dock-dialog .t-dialog__footer {
display: flex;
justify-content: flex-end;
gap: 8px;
}
</style>

62
src/views/DevicesView/DevicesView.vue
View File

@ -185,12 +185,13 @@
</template>
</aside>
<div class="modal-backdrop" :class="{ open: addDockVisible }" @click.self="addDockVisible = false">
<div class="modal add-dock-dialog" role="dialog" aria-modal="true" aria-label="添加机巢">
<header>
<div><span>设备管理</span><h3>添加机巢</h3></div>
<button class="icon-button" type="button" @click="addDockVisible = false"><svg><use href="#i-x" /></svg></button>
</header>
<t-dialog
v-model:visible="addDockVisible"
header="添加机巢"
width="520px"
dialog-class-name="add-dock-dialog"
placement="center"
>
<form novalidate @submit.prevent="submitAddDock">
<label><span>机巢名称<b>*</b></span><t-input v-model="dockForm.name" :maxlength="30" placeholder="例如：青山湖 03 号机巢" /></label>
<label><span>机巢 SN<b>*</b></span><t-input v-model="dockForm.sn" :maxlength="40" placeholder="请输入机身铭牌 SN" /></label>
@ -201,22 +202,22 @@
</div>
<label><span>设备位置<em>选填</em></span><t-input v-model="dockForm.location" :maxlength="50" placeholder="例如：青山湖科技城 C 区" /></label>
<div class="form-error">{{ addDockError }}</div>
<footer>
<button class="plain-command" type="button" @click="addDockVisible = false">取消</button>
<button class="primary-command" type="submit">确认添加</button>
</footer>
</form>
</div>
</div>
<template #footer>
<button class="plain-command" type="button" @click="addDockVisible = false">取消</button>
<button class="primary-command" type="button" @click="submitAddDock">确认添加</button>
</template>
</t-dialog>
<DockEditModal :visible="editDockVisible" :dock="editDockRecord" @close="editDockVisible = false" @saved="handleDockSaved" />
<div class="modal-backdrop" :class="{ open: firmwareVisible }" @click.self="firmwareVisible = false">
<div class="modal add-dock-dialog firmware-dialog" role="dialog" aria-modal="true" aria-label="固件升级">
<header>
<div><span>设备管理 · 固件维护</span><h3>固件升级</h3></div>
<button class="icon-button" type="button" @click="firmwareVisible = false"><svg><use href="#i-x" /></svg></button>
</header>
<t-dialog
v-model:visible="firmwareVisible"
header="固件升级"
width="500px"
dialog-class-name="firmware-dialog"
placement="center"
>
<div class="firmware-content" v-if="firmwareRecord">
<div class="firmware-device">
<span class="table-asset-icon"><svg><use href="#i-home" /></svg></span>
@ -243,12 +244,11 @@
<p class="firmware-note">升级期间机巢将暂时停止远程控制和视频服务，请确认当前没有飞行任务。升级完成后设备会自动重启并恢复连接。</p>
<div class="form-error">{{ firmwareError }}</div>
</div>
<footer class="firmware-footer">
<template #footer>
<button class="plain-command" type="button" @click="firmwareVisible = false">取消</button>
<button class="primary-command" type="button" :disabled="!upgradeFirmwareId || upgrading" @click="doUpgrade">{{ upgrading ? '下发中…' : '开始升级' }}</button>
</footer>
</div>
</div>
</template>
</t-dialog>
</section>
</template>
@ -552,9 +552,21 @@ async function doUpgrade() {
.toolbar-group :deep(.t-select) {
flex-shrink: 0;
}
.add-dock-dialog :deep(.t-input),
.add-dock-dialog :deep(.t-input-number),
.firmware-dialog :deep(.t-select) {
</style>
<style>
.add-dock-dialog .t-input,
.add-dock-dialog .t-input-number,
.firmware-dialog .t-select {
width: 100%;
}
.add-dock-dialog .t-dialog__footer,
.firmware-dialog .t-dialog__footer {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.firmware-dialog .firmware-content {
padding: 0;
}
</style>

Write Preview
Loading…
Cancel
Save