12

manifest.json

@@ -8,7 +8,7 @@
     /* 5+App特有相关 */
     "app-plus" : {
         "usingComponents" : true,
-        "nvueStyleCompiler" : "uni-app",
+        "nvueStyleCompiler" : "磁盘监控",
         "compilerVersion" : 3,
         "splashscreen" : {
             "alwaysShowBeforeRender" : true,

pages/dir/index.vue

@@ -2,20 +2,45 @@
 	<mobile-frame>
 		<view class="main">
 			<view class="one">
-				<view class="list" v-for="(item,index) in list" :key="index">
-					<view class="other">
-						<view class="other_1">
-							<text>磁盘名称：</text>
-							<text>{{item.mounted}}</text>
-						</view>
-						<view class="other_1">
-							<text>磁盘所占空间：</text>
-							<text>{{item.capacity}}</text>
+				<button type="default" size="mini" v-if="route&&route.length>0" @click="toBack()">上一层</button>
+				<button type="default" size="mini" v-if="is_file==true" @click="dialogOpen('dialogShow')">时间范围删除</button>
+			</view>
+			<view class="two">
+				<scroll-view scroll-y="true" class="scroll-view">
+					<view class="list-scroll-view">
+						<view class="list" v-for="(item,index) in list" :key="index">
+							<view class="name">
+								{{item.name}}
+							</view>
+							<view class="other">
+								<view class="other_1">
+									<text>创建时间：</text>
+									<text>{{item.create_time}}</text>
+								</view>
+								<view class="other_1">
+									<text>文件类型：</text>
+									<text>{{item.type=='file'?'文件':item.type=='dir'?'目录':'未知'}}</text>
+								</view>
+								<view class="other_1">
+									<text>文件大小(KB)：</text>
+									<text>{{item.size}}</text>
+								</view>
+							</view>
+							<view class="btn">
+								<button type="default" size="mini" v-if="item.type=='dir'" @click="toDir(item)">进入目录</button>
+								<button class="del" type="default" size="mini" @click="toDel(item)">删除文件</button>
+							</view>
 						</view>
 					</view>
-				</view>
+				</scroll-view>
+
 			</view>
 		</view>
+		<uni-popup background-color="#ffffff" ref="dialogShow" type="dialog">
+			<uni-popup-dialog title="时间选择" mode="base" @confirm="dialogFirm">
+				<uni-datetime-picker v-model="dateArray" type="daterange" @change="dateChange" />
+			</uni-popup-dialog>
+		</uni-popup>
 	</mobile-frame>
 </template>
 
@@ -23,31 +48,143 @@
 	export default {
 		data() {
 			return {
-				list: []
+				list: [],
+				route: [],
+				is_file: false,
+				dateArray: [],
+				times: {}
 			};
 		},
 		onShow: function() {
 			const that = this;
-			that.searc();
+			that.search();
 		},
 		methods: {
-			async searc() {
+			dialogOpen(e) {
 				const that = this;
-				let res = await that.$api(`/dir`, 'GET');
+				that.$refs[e].open();
+			},
+			async search() {
+				const that = this;
+				let res = await that.$api(`/dir`, 'POST', {
+					route: that.route,
+				});
 				if (res.errcode == '0') {
-					console.log(res);
-					// that.$set(that, `list`, res.data)  
+					let is_file = res.data.every(function(item) {
+						return item.type == 'file'
+					});
+					that.$set(that, `is_file`, is_file)
+					that.$set(that, `list`, res.data)
 				}
 			},
+			// 进入目录
+			async toDir(e) {
+				const that = this;
+				let route = [...that.route, e.name];
+				that.$set(that, `route`, route);
+				that.search();
+			},
+			// 时间范围选择
+			dateChange(e) {
+				const that = this;
+				that.$set(that, `dateArray`, e)
+			},
+			// 确认选择
+			dialogFirm() {
+				const that = this;
+				let date = that.dateArray;
+				that.$set(that, `times`, {
+					start_time: date[0],
+					end_time: date[1]
+				})
+				that.toDel()
+			},
+			// 删除文件
+			async toDel(e) {
+				const that = this;
+				let route = that.route;
+				// 文件
+				let file = e;
+				// 时间范围
+				let times = that.times;
+				uni.showModal({
+					title: '温馨提示',
+					content: '数据删除后不可恢复，您确认吗？',
+					success: async function(res) {
+						if (res.confirm) {
+							let arr;
+							if (file && file.name) {
+								arr = await that.$api(`/delFile`, 'POST', {
+									route,
+									target: file.name
+								})
+							} else {
+								arr = await that.$api(`/delFile`, 'POST', {
+									route,
+									times
+								})
+							}
+							if (arr.errcode == '0') {
+								uni.showToast({
+									title: '删除成功',
+									icon: 'error',
+									duration: 2000
+								});
+								that.search();
+							} else {
+								uni.showToast({
+									title: arr.errmsg,
+									icon: 'error',
+									duration: 2000
+								});
+							}
+						} else if (res.cancel) {
+							console.log('用户点击取消');
+						}
+					}
+				});
+			},
+			// 上一层
+			toBack() {
+				const that = this;
+				let route = that.route;
+				route.pop();
+				that.$set(that, `route`, route);
+				that.search()
+
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
 	.main {
-		padding: 2vw 0;
+		display: flex;
+		flex-direction: column;
+		width: 96vw;
+		height: 100vh;
+		margin: 0 2vw;
 
 		.one {
+			text-align: center;
+			margin: 2vw 0 2vw 0;
+
+			button {
+				margin: 0 2vw;
+				background-color: var(--f35BColor);
+				color: var(--fffColor);
+				font-size: var(--font14Size);
+			}
+
+			button:nth-child(2) {
+				background-color: var(--ff0Color);
+				color: var(--fffColor)
+			}
+		}
+
+		.two {
+			position: relative;
+			flex-grow: 1;
 			padding: 0 2vw;
 			margin: 0 0 2vw 0;
 
@@ -57,12 +194,18 @@
 				margin: 0 0 2vw 0;
 				border-radius: 5px;
 
+				.name {
+					font-size: var(--font16Size);
+					font-weight: bold;
+					margin: 0 0 2vw 0;
+				}
+
 				.other {
 					margin: 0 0 2vw 0;
 
 					.other_1 {
 						margin: 0 0 1vw 0;
-						font-size: var(--font16Size);
+						font-size: var(--font14Size);
 						color: var(--f85Color);
 
 						text:last-child {
@@ -71,8 +214,46 @@
 						}
 					}
 				}
+
+				.btn {
+					text-align: center;
+
+					button {
+						margin: 0 2vw;
+						background-color: var(--f35BColor);
+						color: var(--fffColor);
+						font-size: var(--font14Size);
+					}
+
+					.del {
+						background-color: var(--ff0Color);
+					}
+
+				}
+
+
 			}
 		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+
+	.uni-dialog-content {
+		padding: 2vw !important;
+	}
 
+	.uni-forms {
+		width: 100vw !important;
 	}
 </style>