detection-business/pages/manage/deviceAdd.vue

<!-- 发起订单 -->
<template>
	<view class="content">
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-title">新增文件</view>
			<view class=""></view>
		</view>
		<view class="dil">
			<view class="tinput" v-if="maneizhi=='2'">
					<view class="text1"> <text class="hong1">*</text> 文件路径</view>
								<view class="you"  >
									<ss-upload v-if="maneizhi==2"  ref="ssUpload" @getFile="getFile" @uploadSuccess="uploadSuccess" :uploadOptions="uploadOptions" :isUploadServer="isUploadServer" :webviewStyle="webviewStyle" :fileInput="fileInput" >
										<text>附件上传</text>
									</ss-upload>

								</view>
			</view>
			<view style="padding:24rpx;"  v-if="maneizhi=='2'">
				<!-- #ifdef MP-WEIXIN || H5 -->
				<view v-if="files.length">
					<view v-for="item in files">
						<view>名称：{{ item.name }}</view>
						<view>大小：{{ item.size }}</view>
						<view>类型：{{ item.type }}</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS-->
				 <view style="margin-top:40rpx">{{filesApp}}</view>
				<!-- #endif -->
			<!-- 	<view style="margin-top:40rpx;word-break: break-all;" v-if="result">
					上传服务器结果：{{result}}
				</view> -->
			</view>
			<view class="xinput" >
			 			<view class="text1"> <text class="hong1">*</text> 分类</view>
			 			<view class="xz">
			 				<view :class="{'xlan':maneizhi == item.id}" class="kuang" v-for="(item,index) in taplist" :key="index" @click="getzhi2(item.id,item.text)">
			 					<view class="">{{item.text}}</view>
			 				</view>
			 			</view>
			 </view>

		 <!-- 填空 -->
		 <view class="tinput">
			 <view class="text1" v-if="maneizhi=='1'"> <text class="hong1">*</text> 文件夹名称</view>
			  <view class="text1" v-else> <text class="hong1">*</text> 文件名称</view>
			 <view class="you">
				 <input type="text" placeholder="请输入名称" v-model="box.fileName">
			 </view>
		 </view>

		 <!-- style="height: 0px; overflow: hidden; display: none;" -->



		 <view class="tinput" v-if="maneizhi=='2'">
		 			 <view class="text1"> <text class="hong1">*</text> 提醒时间</view>
		 			 <view class="you" @click="show = true ">
						 <text>{{time|| ''}}</text>
		 			 </view>
		 </view>
		  <u-datetime-picker
		                :show="show"
		                v-model="value1"
						@cancel="cancels"
						@confirm="confirms"
		                mode="date"
						return-type='string'
		        ></u-datetime-picker>

			<view class="anniu" @click="getnewsadd()">
				<text>保存</text>
			</view>
			<view style="width: 100%; height: 60px;"></view>
		</view>


	</view>
</template>

<script>
	import request from '../../utils/request'
	import config from '@/config'
	import { getToken } from '@/utils/auth'
	import upload from '@/utils/upload.js'
	var wvCurrent;
	export default{
		data(){
			return{
				time:'请选择提醒时间',
				value1:'2023-10-10',
				baseUrl:this.$baseUrl,
				show:false,
				maneizhi:2,
				type:'add',
				fileId:null,
				id:1,

				taplist:[
					{text:'文件夹',id:1},
					{text:'文件',id:2},
				],
				box:{
					type:2,
					fatherId:'',
					filePath:'',
					fileName:'',
					warnTime:'',
				},
				fileLists: null,
				files: [],
				filesApp:'',
				isUploadServer:true,
				uploadOptions:{},
			webviewStyle:{
				height: '60px',
				width:'130px',
				position:'',
				background:'transparent',
				position: 'absolute',
				top:'95px',
				right:'20px',
			},
			fileInput:{//设置app端html里面input样式与内容
				fileStyle:{

					borderRadius: '10px',
					backgroundColor: '#000000',
					color: '#fff',
					fontSize: '20px',
				},
				fileTitle:''
			},
			fileInputs:{//设置app端html里面input样式与内容
				fileStyle:{

					borderRadius: '10px',
					backgroundColor: '#000000',
					color: '#fff',
					fontSize: '20px',
				},
				fileTitle:'上传附件'
			},
			result:''


			}
		},
		onLoad(option) {
			this.type = option.type
			this.fileId = option.fileId
			this.uploadOptions = {
					// 上传服务器地址，此地址需要替换为你的接口地址
					url:this.$baseUrl + '/common/upload', //仅为示例，非真实的接口地址,
					//请求方式，get,post
					type:'post',
					// 上传附件的key
					name: 'file',
					// 根据你接口需求自定义请求头
					header:{"Authorization": 'Bearer ' + getToken()},
					// 根据你接口需求自定义body参数
					formData: config.formData
				}
		},
		mounted() {
		},
		onShow() {
			if(this.type == 'edit') this.getDetail();
		},
		methods:{
			async getDetail(){

				let res = await request({
					url: '/inspectionFile/inspectionFile/'+this.fileId,
					method: 'get'
				})
				if(res.code == 200){
					this.box = res.data
					this.maneizhi = this.box.type
					this.time = this.box.warnTime
				}
			},
			cancels(){
				this.show = false
			},
			confirms(e){
				var timestamp = e.value;
				var date = new Date(timestamp);
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var day = ("0" + date.getDate()).slice(-2);
				var formattedDate = year + "-" + month + "-" + day;
				this.box.warnTime = formattedDate
				this.time = formattedDate
				this.show = false

			},
					//发布按钮
						async getnewsadd(){
							if(this.maneizhi =='2'){
								if(this.box.filePath==''||this.box.fileName==''||this.box.warnTime==''){
								uni.showToast({
									title:'必填项不能有空！',
									icon:'none'
								})
								return
								}
							}else{
								if(this.box.fileName==''){
								uni.showToast({
									title:'必填项不能有空！',
									icon:'none'
								})
								return
								}
							}
							if(this.type == 'add'){
								this.box.fatherId = this.fileId
								let res = await request({
									url: '/inspectionFile/inspectionFile/add',
									method: 'post',
									data:this.box
								})
								if(res.code == 200){
								uni.showToast({
									title:'发布成功'
								})
								setTimeout(() => {
								  uni.navigateBack({
									delta: 1
								  });
								}, 1000);
								}
							}
							if(this.type == 'edit'){
								let res = await request({
									url: '/inspectionFile/inspectionFile/edit',
									method: 'post',
									data:this.box
								})
								if(res.code == 200){
								uni.showToast({
									title:'发布成功'
								})
								setTimeout(() => {
								  uni.navigateBack({
									delta: 1
								  });
								}, 1000);

								}
							}

						},

			getback(){
			uni.navigateBack({
					delta:1,
				})
			},

			getzhi2(id,text){
				if(this.type == 'add'){
					this.maneizhi = id
					this.value =text
					this.box.type = id
				}

			},
		uploadFile(){
			setTimeout(()=>{
				this.$refs.ssUpload.uploadFile()
			})
		},
		//获取文件
		getFile(result){

			//#ifdef H5 || MP-WEIXIN
			this.files = result.tempFiles
			// #endif
			// #ifdef APP-PLUS
			this.filesApp = result
			// #endif
		},
		uploadSuccess(result){
			this.result = result
			this.box.filePath = result[0].fileName
		}

		}

	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		// padding-top: 45px;
	}

	.dil{
		box-sizing: border-box;
		background-color: #F6F6F6;
		padding: 0px 12px;

	}
	.top-icon{
		margin-bottom: 45px;
	}
	.c-top{
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
		padding-top: 40px;
	}
	.c-title{
		font-size: 18px;
		font-weight: bold
	}
	.top{
		box-sizing: border-box;
		padding: 0px 15px;
		width: 100%;
		background-color: white;
	}
	.top-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 20px 0px;
	}
	.tb-left{
		height: 100%;
		width: 80%;
		display: flex;
		align-items: center;
	}
	.uicon{
		width: 18px;
		height: 18px;
		border-radius: 4px;
		color: white;
		background: orangered;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		font-weight: bold;
		margin-right: 6px;

	}
	.tb-right{
		width: 20px;
		height: 26px;

		image{
			width: 100%;
			height: 100%;
		}
	}
	.text1{
		font-size: 16px;
		font-weight: bold;
		color: #363636;
	}
	.hong1{
		margin-top: 5px;
		font-size: 12px;
		font-weight: 400;
		color: #FF5453;
	}
	.hong2{
		margin-top: 5px;
		font-size: 12px;
		font-weight: 400;

	}
	.tinput{
		width: 100%;
		display: flex;
		background: white;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 16px;
		margin-top: 14px;
		margin-bottom: 14px;
	}
	.xinput{
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 16px;
		margin-top: 14px;
	}
	.you{
		text-align: right;

	}
	.xz{
		margin-top: 10px;
		display: flex;
		align-items: center;

	}
	.kuang{
		width: 80px;
		height: 23px;
		background: #ECECEC;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666666;
		font-size: 14px;
		margin-right: 15px;
	}
	.xlan{
		background: #CDE7FF !important;
		color: #1D62FF !important;
		border: 1px solid #2A96FE;
	}
	.anniu{
		width: 100%;
		background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
		border-radius: 50px ;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #542F0E;
		margin-top: 20px;
		color: white;

	}


	button::after {
	   border: none;
	}
</style>