310 lines
7.1 KiB
Vue
310 lines
7.1 KiB
Vue
<template>
|
||
<view class="content">
|
||
<VNavigationBar style="position: relative;z-index: 99;" homeHeaderPaddingTop="0" backgroundColor="#fff"
|
||
title-color="#000" title="设备管理"></VNavigationBar>
|
||
|
||
<!-- 固定部分：搜索框 -->
|
||
<view class="search_box">
|
||
<u-search placeholder="请输入设备名称..." @clear="getlistindex()" @search="getlistindex()" :showAction="false"
|
||
v-model="equName" searchIconColor="#427FFE"></u-search>
|
||
</view>
|
||
|
||
<!-- 固定部分：新增按钮 -->
|
||
<view class="add-btn" @click="goadd('add')">
|
||
<text>+ 新增设备</text>
|
||
</view>
|
||
|
||
<!-- 固定部分：Tab切换（横向滚动） -->
|
||
<view class="tab-scroll-container">
|
||
<scroll-view class="tab-scroll-view" scroll-x="true" shows-horizontal-scroll-indicator="false">
|
||
<view class="tap-box" v-for="(item,index) in tabList" :key="index" @click="gettap(item.value)">
|
||
<view :class="{'lan' : tapindex == item.value}">{{ item.label }}</view>
|
||
<view class="gang" v-if="tapindex == item.value"></view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 滚动部分：设备列表 -->
|
||
<view class="list-container">
|
||
<!-- 有数据时显示列表 -->
|
||
<view class="c-box" v-for="(item,index) in arrlist" :key="index" v-if="arrlist.length > 0">
|
||
<view class="box-top">
|
||
<view>{{ item.equName || '设备名称' }}</view>
|
||
<view style="display: flex;align-items: center; justify-content: space-between; width: 25%;">
|
||
<view style="color: #43A045;" @click="goadd('edit',item.id)">编辑</view>
|
||
<view style="color: #FF7272;" @click="dialogToggle(item.id)">删除</view>
|
||
</view>
|
||
</view>
|
||
<view class="box-hui">
|
||
<view class="box-left">设备型号:</view>
|
||
<view>{{ item.equModel || '' }}</view>
|
||
</view>
|
||
<view class="box-hui">
|
||
<view class="box-left">设备编号:</view>
|
||
<view>{{ item.equNumber || '' }}</view>
|
||
</view>
|
||
<view class="box-hui">
|
||
<view class="box-left">检定/校准周期:</view>
|
||
<view>{{ item.equZq || '' }}</view>
|
||
</view>
|
||
<view class="box-hui">
|
||
<view class="box-left">有效期:</view>
|
||
<view>{{ item.validTime || '' }}</view>
|
||
</view>
|
||
<view class="box-hui">
|
||
<view class="box-left">检定单位:</view>
|
||
<view>{{ item.lastUnit || '' }}</view>
|
||
</view>
|
||
<view class="box-hui">
|
||
<view class="box-left">计划检定时间:</view>
|
||
<view>{{ item.nextCheckTime || '' }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 无数据时显示提示 -->
|
||
<view class="empty-tips" v-if="arrlist.length === 0">
|
||
<image src="/static/internal/empty.png" class="empty-img"></image>
|
||
<!-- <text>暂无设备</text> -->
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="alertDialog" type="dialog">
|
||
<uni-popup-dialog cancelText="关闭" confirmText="同意" title="通知" content="您确认要删除吗" @confirm="dialogConfirm"
|
||
@close="dialogClose"></uni-popup-dialog>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '@/config'
|
||
import request from '../../utils/request';
|
||
import VNavigationBar from "@/components/VNavigationBar.vue";
|
||
import {
|
||
getDictByCode
|
||
} from "../../utils/utils";
|
||
|
||
export default {
|
||
components: {
|
||
VNavigationBar
|
||
},
|
||
data() {
|
||
return {
|
||
partnerId: '',
|
||
arrlist: [],
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
totalPages: 0,
|
||
deleteid: '',
|
||
equName: null,
|
||
tabList: [{
|
||
label: "全部",
|
||
value: "0"
|
||
}],
|
||
tapindex: 0,
|
||
type: null
|
||
}
|
||
},
|
||
onLoad(data) {
|
||
this.partnerId = uni.getStorageSync('partnerId')
|
||
if (data.value) {
|
||
this.tapindex = parseInt(data.value)
|
||
this.type = data.value === '0' ? null : data.value
|
||
}
|
||
this.getlistindex()
|
||
this.getTab()
|
||
},
|
||
onShow() {
|
||
// this.getlistindex()
|
||
},
|
||
onReachBottom() {
|
||
if (this.pageNum >= this.totalPages) {
|
||
uni.showToast({
|
||
title: '没有下一页数据',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
this.pageNum++
|
||
this.getlistindex()
|
||
}
|
||
},
|
||
methods: {
|
||
gettap(value) {
|
||
this.tapindex = value
|
||
this.type = value === '0' ? null : value
|
||
this.getlistindex()
|
||
},
|
||
async getTab() {
|
||
const data = await getDictByCode("repair_equ_type");
|
||
console.log('data123', data)
|
||
this.tabList = [...this.tabList, ...data];
|
||
console.log('this.tabList', this.tabList)
|
||
},
|
||
dialogToggle(id) {
|
||
this.deleteid = id
|
||
this.$refs.alertDialog.open()
|
||
},
|
||
async dialogConfirm() {
|
||
let res = await request({
|
||
url: '/admin-api/system/equInfo/' + this.deleteid,
|
||
method: 'delete',
|
||
})
|
||
if (res.code == 200) {
|
||
this.$refs.alertDialog.close()
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '删除成功'
|
||
})
|
||
this.getlistindex()
|
||
}
|
||
},
|
||
dialogClose() {
|
||
this.$refs.alertDialog.close()
|
||
},
|
||
goadd(type, id) {
|
||
uni.navigateTo({
|
||
url: '/pages-internal/deviceManagement/informationAdd?type=' + type + '&id=' + id
|
||
})
|
||
},
|
||
async getlistindex() {
|
||
let res = await request({
|
||
url: '/admin-api/system/equInfo/list',
|
||
method: 'get',
|
||
data: {
|
||
pageSize: this.pageSize,
|
||
pageNum: this.pageNum,
|
||
equName: this.equName,
|
||
type: this.type,
|
||
servicePackageId: 'weixiu'
|
||
}
|
||
})
|
||
if (this.pageNum != 1) {
|
||
this.arrlist = this.arrlist.concat(res.rows)
|
||
} else {
|
||
this.arrlist = res.rows
|
||
}
|
||
let total = res.total
|
||
this.totalPages = Math.ceil(total / this.pageSize);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 固定搜索框 */
|
||
.search_box {
|
||
padding: 10px 15px;
|
||
background: white;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
/* 固定新增按钮 */
|
||
.add-btn {
|
||
width: 100%;
|
||
color: #0174F6;
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
font-weight: bold;
|
||
border-radius: 8px;
|
||
margin: 10px 15px;
|
||
width: calc(100% - 30px);
|
||
border: 1px solid #0174F6;
|
||
position: sticky;
|
||
top: 50px;
|
||
z-index: 9;
|
||
}
|
||
|
||
/* Tab横向滚动容器 */
|
||
.tab-scroll-container {
|
||
background: white;
|
||
position: sticky;
|
||
top: 100px;
|
||
z-index: 8;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.tab-scroll-view {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
height: 40px;
|
||
}
|
||
|
||
.tap-box {
|
||
display: inline-block;
|
||
min-width: 80px;
|
||
text-align: center;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.gang {
|
||
height: 4px;
|
||
background: #327DFB;
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.lan {
|
||
color: #0D2E8D;
|
||
}
|
||
|
||
/* 滚动列表容器 */
|
||
.list-container {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
/* 列表项样式 */
|
||
.c-box {
|
||
background: #F7F8FC;
|
||
border-radius: 10px;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.box-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #eee;
|
||
margin-bottom: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.box-hui {
|
||
display: flex;
|
||
margin-bottom: 5px;
|
||
color: #999;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.box-left {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
/* 空列表提示 */
|
||
.empty-tips {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40px 0;
|
||
color: #999;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.empty-img {
|
||
width: 240px;
|
||
height: 200px;
|
||
margin-bottom: 10px;
|
||
}
|
||
</style> |