feat 图片更换
This commit is contained in:
Ironsp
@@ -1,15 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
const sensorOptions = [
|
||||
{ value: '压实度', text: '压实度' },
|
||||
{ value: '行驶速度', text: '行驶速度' },
|
||||
{ value: 'GNSS定位', text: 'GNSS定位' },
|
||||
]
|
||||
|
||||
const positionOptions = [
|
||||
{ value: '前轮侧边', text: '前轮侧边' },
|
||||
{ value: '后轮侧边', text: '后轮侧边' },
|
||||
{ value: '车身中部', text: '车身中部' },
|
||||
]
|
||||
|
||||
const sensorList = ref([
|
||||
{ name: '压实度', id: 0, position: '前轮侧边' },
|
||||
{ name: '振动频率', id: 1, position: '前轮侧边' },
|
||||
{ name: '行驶速度', id: 1, position: '前轮侧边' },
|
||||
])
|
||||
|
||||
function onNameChange(index: number, value: string) {
|
||||
sensorList.value[index].name = value
|
||||
}
|
||||
|
||||
function onPosChange(index: number, value: string) {
|
||||
sensorList.value[index].position = value
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
console.log('添加传感器')
|
||||
sensorList.value.push({
|
||||
name: '',
|
||||
id: sensorList.value.length,
|
||||
position: '',
|
||||
})
|
||||
}
|
||||
|
||||
function handleDelete(index: number) {
|
||||
console.log('删除传感器', index)
|
||||
sensorList.value.splice(index, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -19,44 +43,52 @@ function handleDelete(index: number) {
|
||||
传感器
|
||||
</text>
|
||||
|
||||
<view class="sensor-table">
|
||||
<!-- 表头 -->
|
||||
<view class="table-header">
|
||||
<text class="col-name">
|
||||
名称
|
||||
</text>
|
||||
<text class="col-id">
|
||||
ID
|
||||
</text>
|
||||
<text class="col-position">
|
||||
安装位置
|
||||
</text>
|
||||
<text class="col-action">
|
||||
操作
|
||||
</text>
|
||||
</view>
|
||||
<wd-table :data="sensorList" :border="true" :ellipsis="false" custom-style="width: 100%">
|
||||
<!-- 名称列 -->
|
||||
<wd-table-column prop="name" label="名称" width="200px">
|
||||
<template #value="{ row, index }">
|
||||
<uni-section :title="row.name || '请选择'" type="line">
|
||||
<uni-data-select
|
||||
:value="row.name"
|
||||
:localdata="sensorOptions"
|
||||
placeholder="请选择"
|
||||
@onchange="(val: string) => onNameChange(index, val)"
|
||||
/>
|
||||
</uni-section>
|
||||
</template>
|
||||
</wd-table-column>
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<view v-for="(sensor, index) in sensorList" :key="index" class="table-row">
|
||||
<view class="col-name">
|
||||
<uni-easyinput v-model="sensor.name" placeholder="请输入名称" />
|
||||
</view>
|
||||
<text class="col-id">
|
||||
{{ sensor.id }}
|
||||
</text>
|
||||
<view class="col-position">
|
||||
<uni-easyinput v-model="sensor.position" placeholder="请输入安装位置" />
|
||||
</view>
|
||||
<view class="col-action">
|
||||
<view v-if="index === sensorList.length - 1" class="action-btn add" @tap="handleAdd">
|
||||
<wd-icon name="add" size="16px" color="#fff" />
|
||||
<!-- ID列 -->
|
||||
<wd-table-column prop="id" label="ID" width="120rpx" align="center" />
|
||||
|
||||
<!-- 安装位置列 -->
|
||||
<wd-table-column prop="position" label="安装位置" width="240rpx">
|
||||
<template #value="{ row, index }">
|
||||
<uni-section :title="row.position || '请选择'" type="line">
|
||||
<uni-data-select
|
||||
:value="row.position"
|
||||
:localdata="positionOptions"
|
||||
placeholder="请选择"
|
||||
@onchange="(val: string) => onPosChange(index, val)"
|
||||
/>
|
||||
</uni-section>
|
||||
</template>
|
||||
</wd-table-column>
|
||||
|
||||
<!-- 操作列 -->
|
||||
<wd-table-column label="操作" width="120rpx" align="center">
|
||||
<template #value="{ index }">
|
||||
<view class="action-cell">
|
||||
<view v-if="index === sensorList.length - 1" class="action-btn add" @tap.stop="handleAdd">
|
||||
<image class="action-icon" src="/static/add.png" mode="aspectFit" />
|
||||
</view>
|
||||
<view v-else class="action-btn delete" @tap.stop="handleDelete(index)">
|
||||
<image class="action-icon" src="/static/reduce.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="action-btn delete" @tap="handleDelete(index)">
|
||||
<wd-icon name="close" size="16px" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-table-column>
|
||||
</wd-table>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -75,68 +107,10 @@ function handleDelete(index: number) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sensor-table {
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
background-color: #fafafa;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.table-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.col-name {
|
||||
flex: 2;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.col-id {
|
||||
flex: 1;
|
||||
padding: 0 12px;
|
||||
.action-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.col-position {
|
||||
flex: 2;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.col-action {
|
||||
flex: 1;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table-header .col-name,
|
||||
.table-header .col-id,
|
||||
.table-header .col-position,
|
||||
.table-header .col-action {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
@@ -146,14 +120,10 @@ function handleDelete(index: number) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-btn.add {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.action-btn.delete {
|
||||
background-color: #ff4d4f;
|
||||
.action-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user