276 lines
7.0 KiB
Vue
276 lines
7.0 KiB
Vue
<template>
|
||
<view class="device-detail-page">
|
||
<!-- 顶部导航 -->
|
||
<view class="nav-bar">
|
||
<button class="back-btn" @click="goBack">← 返回</button>
|
||
<text class="nav-title">设备详情</text>
|
||
<button class="save-btn" @click="saveDevice">保存</button>
|
||
</view>
|
||
|
||
<!-- 基础信息编辑区 -->
|
||
<view class="base-info">
|
||
<text class="section-title">基础信息</text>
|
||
|
||
<!-- 设备图片编辑 -->
|
||
<view class="info-item">
|
||
<text class="label">设备图片：</text>
|
||
<view class="img-upload">
|
||
<image class="device-img" :src="currentDevice.image" mode="aspectFill"></image>
|
||
<button class="change-img-btn" @click="chooseImage">更换图片</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 设备名称编辑 -->
|
||
<view class="info-item">
|
||
<text class="label">设备名称：</text>
|
||
<input
|
||
class="input"
|
||
v-model="currentDevice.name"
|
||
placeholder="请输入设备名称"
|
||
/>
|
||
</view>
|
||
|
||
<!-- SN码（不可编辑） -->
|
||
<view class="info-item">
|
||
<text class="label">SN码：</text>
|
||
<text class="sn-text">{{ currentDevice.sn }}</text>
|
||
</view>
|
||
|
||
<!-- 设备类型（不可编辑） -->
|
||
<view class="info-item">
|
||
<text class="label">设备类型：</text>
|
||
<text class="type-text">
|
||
{{ deviceTabs.find(item => item.type === currentDevice.type).name || '未知类型' }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 使用者/团队管理区 -->
|
||
<view class="manager-info">
|
||
<text class="section-title">归属管理</text>
|
||
|
||
<!-- 使用者选择 -->
|
||
<view class="info-item">
|
||
<text class="label">使用者：</text>
|
||
<picker
|
||
mode="selector"
|
||
:range="userList"
|
||
@change="selectUser"
|
||
>
|
||
<view class="picker">
|
||
{{ currentDevice.user || '请选择使用者' }}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<!-- 所属团队选择 -->
|
||
<view class="info-item">
|
||
<text class="label">所属团队：</text>
|
||
<picker
|
||
mode="selector"
|
||
:range="teamList"
|
||
@change="selectTeam"
|
||
>
|
||
<view class="picker">
|
||
{{ currentDevice.team || '请选择所属团队' }}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
currentDevice: {}, // 当前编辑的设备信息
|
||
deviceTabs: [
|
||
{ name: '全部设备', type: '' },
|
||
{ name: '智能硬件', type: 'hardware' },
|
||
{ name: '传感器', type: 'sensor' },
|
||
{ name: '控制器', type: 'controller' }
|
||
],
|
||
// 模拟使用者列表
|
||
userList: ['张三', '李四', '王五', '赵六'],
|
||
// 模拟团队列表
|
||
teamList: ['研发部', '测试部', '运维部', '市场部']
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// 获取设备ID并从列表中匹配设备信息
|
||
const deviceId = Number(options.id);
|
||
// 从全局/本地存储获取设备列表（实际项目建议用vuex/本地存储）
|
||
const deviceList = getApp().globalData.deviceList || [];
|
||
this.currentDevice = JSON.parse(JSON.stringify(deviceList.find(item => item.id === deviceId)));
|
||
// 若未找到设备，返回上一页
|
||
if (!this.currentDevice) {
|
||
uni.showToast({ title: '设备不存在', icon: 'none' });
|
||
setTimeout(() => this.goBack(), 1500);
|
||
}
|
||
},
|
||
onShow() {
|
||
// 初始化全局设备列表（方便跨页面共享）
|
||
if (!getApp().globalData.deviceList) {
|
||
getApp().globalData.deviceList = [
|
||
{
|
||
id: 1,
|
||
name: '温湿度传感器',
|
||
sn: 'SN20260210001',
|
||
type: 'sensor',
|
||
image: '/static/device/sensor.png',
|
||
user: '张三',
|
||
team: '研发部'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '智能控制器',
|
||
sn: 'SN20260210002',
|
||
type: 'controller',
|
||
image: '/static/device/controller.png',
|
||
user: '李四',
|
||
team: '测试部'
|
||
}
|
||
];
|
||
}
|
||
},
|
||
methods: {
|
||
// 返回上一页
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
// 选择设备图片（uniapp上传图片API）
|
||
async chooseImage() {
|
||
try {
|
||
const res = await uni.chooseImage({
|
||
count: 1, // 仅选1张
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['album', 'camera'] // 相册/相机
|
||
});
|
||
// 模拟上传图片（实际项目需上传到服务器，替换为返回的图片URL）
|
||
this.currentDevice.image = res.tempFilePaths[0];
|
||
} catch (err) {
|
||
console.error('选择图片失败：', err);
|
||
uni.showToast({ title: '选择图片失败', icon: 'none' });
|
||
}
|
||
},
|
||
// 选择使用者
|
||
selectUser(e) {
|
||
this.currentDevice.user = this.userList[e.detail.value];
|
||
},
|
||
// 选择所属团队
|
||
selectTeam(e) {
|
||
this.currentDevice.team = this.teamList[e.detail.value];
|
||
},
|
||
// 保存设备信息
|
||
saveDevice() {
|
||
// 更新全局设备列表
|
||
const deviceList = getApp().globalData.deviceList;
|
||
const index = deviceList.findIndex(item => item.id === this.currentDevice.id);
|
||
if (index > -1) {
|
||
deviceList[index] = this.currentDevice;
|
||
getApp().globalData.deviceList = deviceList;
|
||
}
|
||
uni.showToast({ title: '保存成功', icon: 'success' });
|
||
setTimeout(() => this.goBack(), 1000);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面整体样式 */
|
||
.device-detail-page {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 导航栏 */
|
||
.nav-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 15px 20px;
|
||
background-color: #fff;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
.back-btn, .save-btn {
|
||
background-color: transparent;
|
||
border: none;
|
||
font-size: 14px;
|
||
}
|
||
.back-btn {
|
||
color: #666;
|
||
}
|
||
.save-btn {
|
||
color: #409eff;
|
||
}
|
||
.nav-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
/* 信息区块 */
|
||
.base-info, .manager-info {
|
||
background-color: #fff;
|
||
margin: 10px;
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||
}
|
||
.section-title {
|
||
display: block;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 5px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
/* 信息项 */
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
.label {
|
||
width: 80px;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
.input, .picker, .sn-text, .type-text {
|
||
flex: 1;
|
||
padding: 8px 10px;
|
||
font-size: 14px;
|
||
}
|
||
.input {
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 4px;
|
||
}
|
||
.sn-text, .type-text {
|
||
color: #999;
|
||
}
|
||
|
||
/* 图片上传区 */
|
||
.img-upload {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.device-img {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 8px;
|
||
}
|
||
.change-img-btn {
|
||
background-color: #e5e5e5;
|
||
color: #666;
|
||
border: none;
|
||
border-radius: 4px;
|
||
padding: 5px 10px;
|
||
font-size: 12px;
|
||
}
|
||
</style> |