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

feat: 设备管理表单控件切换到 TDesign

main
xiaosi 3 weeks ago
parent
e064422b4a
commit
76e90a8b9e
2 changed files with 76 additions and 37 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. 27
      src/components/DockEditModal.vue
  2. 86
      src/views/DevicesView/DevicesView.vue

27
src/components/DockEditModal.vue
View File

@ -6,14 +6,14 @@
<button class="icon-button" type="button" :disabled="saving" @click="close"><svg><use href="#i-x" /></svg></button>
</header>
<form novalidate @submit.prevent="submit">
<label><span>机巢名称<b>*</b></span><input v-model="form.name" type="text" maxlength="64" placeholder="例如：青山湖 03 号机巢" /></label>
<label><span>机巢 SN</span><input :value="dock?.sn || ''" type="text" readonly /></label>
<label><span>通信卡 ICCID</span><input :value="dock?.iccid || ''" type="text" readonly /></label>
<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>
<label><span>通信卡 ICCID</span><t-input :model-value="dock?.iccid || ''" readonly /></label>
<div class="form-row">
<label><span>经度<b>*</b></span><input v-model="form.longitude" type="number" min="-180" max="180" step="any" placeholder="例如：120.219375" /></label>
<label><span>纬度<b>*</b></span><input v-model="form.latitude" type="number" min="-90" max="90" step="any" placeholder="例如：30.259244" /></label>
<label><span>经度<b>*</b></span><t-input-number v-model="form.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
<label><span>纬度<b>*</b></span><t-input-number v-model="form.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
</div>
<label><span>设备位置<em>选填</em></span><input v-model="form.location" type="text" maxlength="128" placeholder="例如：青山湖科技城 C 区" /></label>
<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>
@ -35,7 +35,7 @@ const props = defineProps({
})
const emit = defineEmits(['close', 'saved'])
const form = reactive({ name: '', longitude: '', latitude: '', location: '' })
const form = reactive({ name: '', longitude: undefined, latitude: undefined, location: '' })
const error = ref('')
const saving = ref(false)
@ -43,8 +43,8 @@ watch(() => props.visible, (visible) => {
if (!visible || !props.dock) return
Object.assign(form, {
name: props.dock.name || '',
longitude: props.dock.longitude ?? '',
latitude: props.dock.latitude ?? '',
longitude: props.dock.longitude == null || props.dock.longitude === '' ? undefined : Number(props.dock.longitude),
latitude: props.dock.latitude == null || props.dock.latitude === '' ? undefined : Number(props.dock.latitude),
location: props.dock.location === '--' ? '' : props.dock.location || ''
})
error.value = ''
@ -60,7 +60,7 @@ async function submit() {
const latitude = Number(form.latitude)
error.value = ''
if (!name || form.longitude === '' || form.latitude === '') {
if (!name || form.longitude === '' || form.longitude == null || form.latitude === '' || form.latitude == null) {
error.value = '请填写机巢名称、经度和纬度。'
return
}
@ -90,3 +90,10 @@ async function submit() {
}
}
</script>
<style scoped>
.add-dock-dialog :deep(.t-input),
.add-dock-dialog :deep(.t-input-number) {
width: 100%;
}
</style>

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

@ -26,21 +26,14 @@
</div>
<div class="asset-toolbar">
<div class="asset-search"><svg><use href="#i-search" /></svg><input v-model="search" type="text" placeholder="搜索设备名称、编号或 SN" /></div>
<div class="asset-search">
<t-input v-model="search" clearable placeholder="搜索设备名称、编号或 SN">
<template #prefix-icon><t-icon name="search" /></template>
</t-input>
</div>
<div class="toolbar-group">
<select v-model="statusFilter" aria-label="设备状态">
<option value="">全部状态</option>
<option value="online">在线</option>
<option value="mission">任务中</option>
<option value="alarm">告警</option>
<option value="offline">离线</option>
<option value="pending">待连接</option>
</select>
<select v-model="bindingFilter" aria-label="绑定状态">
<option value="">全部绑定状态</option>
<option value="bound">已绑定</option>
<option value="unbound">未绑定</option>
</select>
<t-select v-model="statusFilter" :options="statusOptions" placeholder="全部状态" style="width: 140px" />
<t-select v-model="bindingFilter" :options="bindingOptions" placeholder="全部绑定状态" style="width: 160px" />
<button class="plain-command" type="button" @click="resetFilters">重置</button>
</div>
</div>
@ -199,14 +192,14 @@
<button class="icon-button" type="button" @click="addDockVisible = false"><svg><use href="#i-x" /></svg></button>
</header>
<form novalidate @submit.prevent="submitAddDock">
<label><span>机巢名称<b>*</b></span><input v-model="dockForm.name" type="text" maxlength="30" placeholder="例如：青山湖 03 号机巢" /></label>
<label><span>机巢 SN<b>*</b></span><input v-model="dockForm.sn" type="text" maxlength="40" placeholder="请输入机身铭牌 SN" /></label>
<label><span>通信卡 ICCID<b>*</b></span><input v-model="dockForm.iccid" type="text" maxlength="22" inputmode="numeric" placeholder="请输入通信卡 ICCID" /></label>
<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>
<label><span>通信卡 ICCID<b>*</b></span><t-input v-model="dockForm.iccid" :maxlength="22" placeholder="请输入通信卡 ICCID" /></label>
<div class="form-row">
<label><span>经度<b>*</b></span><input v-model.number="dockForm.longitude" type="number" min="-180" max="180" step="any" placeholder="例如：120.219375" /></label>
<label><span>纬度<b>*</b></span><input v-model.number="dockForm.latitude" type="number" min="-90" max="90" step="any" placeholder="例如：30.259244" /></label>
<label><span>经度<b>*</b></span><t-input-number v-model="dockForm.longitude" theme="normal" :min="-180" :max="180" :step="0.000001" placeholder="例如：120.219375" style="width: 100%" /></label>
<label><span>纬度<b>*</b></span><t-input-number v-model="dockForm.latitude" theme="normal" :min="-90" :max="90" :step="0.000001" placeholder="例如：30.259244" style="width: 100%" /></label>
</div>
<label><span>设备位置<em>选填</em></span><input v-model="dockForm.location" type="text" maxlength="50" placeholder="例如：青山湖科技城 C 区" /></label>
<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>
@ -235,10 +228,14 @@
</div>
<label>
<span>目标固件版本</span>
<select v-model="upgradeFirmwareId">
<option :value="null" disabled>{{ firmwareList.length ? '选择目标版本' : '暂无已发布固件' }}</option>
<option v-for="f in firmwareList" :key="f.id" :value="f.id">{{ firmwareOptionLabel(f) }}</option>
</select>
<t-select
v-model="upgradeFirmwareId"
:options="upgradeFirmwareOptions"
:placeholder="firmwareList.length ? '选择目标版本' : '暂无已发布固件'"
:disabled="!firmwareList.length"
clearable
style="width: 100%"
/>
</label>
<div class="firmware-checks">
<span>升级前请确认设备状态</span>
@ -285,6 +282,19 @@ onMounted(async () => {
const search = ref('')
const statusFilter = ref('')
const bindingFilter = ref('')
const statusOptions = [
{ label: '全部状态', value: '' },
{ label: '在线', value: 'online' },
{ label: '任务中', value: 'mission' },
{ label: '告警', value: 'alarm' },
{ label: '离线', value: 'offline' },
{ label: '待连接', value: 'pending' }
]
const bindingOptions = [
{ label: '全部绑定状态', value: '' },
{ label: '已绑定', value: 'bound' },
{ label: '未绑定', value: 'unbound' }
]
const loadedAt = ref('')
const drawerOpen = ref(false)
const drawerId = ref(null)
@ -292,13 +302,16 @@ const addDockVisible = ref(false)
const editDockVisible = ref(false)
const editDockRecord = ref(null)
const addDockError = ref('')
const dockForm = reactive({ name: '', sn: '', iccid: '', longitude: '', latitude: '', location: '' })
const dockForm = reactive({ name: '', sn: '', iccid: '', longitude: undefined, latitude: undefined, location: '' })
const firmwareList = ref([])
const upgradeFirmwareId = ref(null)
const upgrading = ref(false)
const firmwareVisible = ref(false)
const firmwareError = ref('')
const firmwareRecord = computed(() => (drawerId.value ? devices.record(drawerId.value) : null))
const upgradeFirmwareOptions = computed(() =>
firmwareList.value.map((f) => ({ label: firmwareOptionLabel(f), value: f.id }))
)
const drawerRecord = computed(() => (drawerId.value ? devices.record(drawerId.value) : null))
@ -430,7 +443,7 @@ async function handleDockSaved() {
}
function openAddDock() {
Object.assign(dockForm, { name: '', sn: '', iccid: '', longitude: '', latitude: '', location: '' })
Object.assign(dockForm, { name: '', sn: '', iccid: '', longitude: undefined, latitude: undefined, location: '' })
addDockError.value = ''
addDockVisible.value = true
}
@ -443,7 +456,7 @@ async function submitAddDock() {
const longitude = Number(dockForm.longitude)
const latitude = Number(dockForm.latitude)
if (!name || !sn || !iccid || dockForm.longitude === '' || dockForm.latitude === '') {
if (!name || !sn || !iccid || dockForm.longitude === '' || dockForm.longitude == null || dockForm.latitude === '' || dockForm.latitude == null) {
addDockError.value = '请填写机巢名称、机巢 SN、通信卡 ICCID、经度和纬度。'
return
}
@ -526,3 +539,22 @@ async function doUpgrade() {
}
}
</script>
<style scoped>
.asset-search :deep(.t-input) {
width: 100%;
}
.asset-search {
border: 0;
padding: 0;
height: auto;
}
.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) {
width: 100%;
}
</style>

Write Preview
Loading…
Cancel
Save