feat 图片更换

src/components/settings/sensorConfig.vue

@@ -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">
+    <wd-table :data="sensorList" :border="true" :ellipsis="false" custom-style="width: 100%">
-      <!-- 表头 -->
+      <!-- 名称列 -->
-      <view class="table-header">
+      <wd-table-column prop="name" label="名称" width="200px">
-        <text class="col-name">
+        <template #value="{ row, index }">
-          名称
+          <uni-section :title="row.name || '请选择'" type="line">
-        </text>
+            <uni-data-select
-        <text class="col-id">
+              :value="row.name"
-          ID
+              :localdata="sensorOptions"
-        </text>
+              placeholder="请选择"
-        <text class="col-position">
+              @onchange="(val: string) => onNameChange(index, val)"
-          安装位置
+            />
-        </text>
+          </uni-section>
-        <text class="col-action">
+        </template>
-          操作
+      </wd-table-column>
-        </text>
-      </view>
 
-      <!-- 表格内容 -->
+      <!-- ID列 -->
-      <view v-for="(sensor, index) in sensorList" :key="index" class="table-row">
+      <wd-table-column prop="id" label="ID" width="120rpx" align="center" />
-        <view class="col-name">
+
-          <uni-easyinput v-model="sensor.name" placeholder="请输入名称" />
+      <!-- 安装位置列 -->
-        </view>
+      <wd-table-column prop="position" label="安装位置" width="240rpx">
-        <text class="col-id">
+        <template #value="{ row, index }">
-          {{ sensor.id }}
+          <uni-section :title="row.position || '请选择'" type="line">
-        </text>
+            <uni-data-select
-        <view class="col-position">
+              :value="row.position"
-          <uni-easyinput v-model="sensor.position" placeholder="请输入安装位置" />
+              :localdata="positionOptions"
-        </view>
+              placeholder="请选择"
-        <view class="col-action">
+              @onchange="(val: string) => onPosChange(index, val)"
-          <view v-if="index === sensorList.length - 1" class="action-btn add" @tap="handleAdd">
+            />
-            <wd-icon name="add" size="16px" color="#fff" />
+          </uni-section>
-          </view>
+        </template>
-          <view v-else class="action-btn delete" @tap="handleDelete(index)">
+      </wd-table-column>
-            <wd-icon name="close" size="16px" color="#fff" />
+
-          </view>
+      <!-- 操作列 -->
+      <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>
+        </template>
+      </wd-table-column>
+    </wd-table>
   </view>
 </template>
 
@@ -75,68 +107,10 @@ function handleDelete(index: number) {
   display: block;
 }
 
-.sensor-table {
+.action-cell {
-  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;
   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 {
+.action-icon {
-  background-color: #1890ff;
+  width: 32px;
-}
+  height: 32px;
-
-.action-btn.delete {
-  background-color: #ff4d4f;
 }
 </style>