zhihuixiaoyuan2-ui/mine/pages/payslip/format.vue

<template>
  <view class="format">
	  <view v-if="pagetype==0">
		  <view class="box mb20">
		  	<view class="tit">文档示例图：</view>
		  	<image :src="example" class="examimg" mode="widthFix"></image>
		  	<view class="rebtn mt20" style="height: 80rpx;" @click="getDownFn">下载模板示例</view>
		  </view>
		 <view class="box mb20">
		 	<view class="tit">具体格式说明</view>
		 	<view class="txt"><text class="cir"></text>仅支持文件后缀为【.xlsx】和【.xls】</view>
		 	<view class="txt"><text class="cir"></text>一个文件只包含一个sheet页，请删除其他sheet (也不可隐藏)</view>
		 	<view class="txt"><text class="cir"></text>表中不支持多列姓名，只支持一列姓名</view>
			<view class="txt"><text class="cir"></text>日期格式为yy-mm-dd,类似2001-03-07</view>
		 	<view class="txt"><text class="cir"></text>姓名在第一列</view>
		 	<view class="txt"><text class="cir"></text>一种信息占一列</view>
		 	<view class="txt"><text class="cir"></text>不支持合并单元格</view>
		 	<view class="txt"><text class="cir"></text>不得使用筛选、冻结、公式、宏等功能</view>
		 	<!-- <image :src="example" class="examimg" mode="widthFix"></image>
		 	<view class="ttxt">图例参考</view> -->
		 </view>
		 <view class="rebtn" @click="pagetype=1">下一步</view>
		 <view class="txc f14 co6 fw5 mt12" @click="getKnow">我已知晓，不再提示</view> 
	  </view>
	  
	  <!-- 下一步 -->
	  <view v-if="pagetype==1">
		  <view class="box mb20" >
		  		<view class="tit">选取文件</view>
		  		<view class="txt"><text class="cir"></text>将文件发送至文件传输助手或好友</view>
		  		<view class="txt"><text class="cir"></text>点击下方按钮进行选取</view>
		  </view>
			<view v-show="filelist.length<1">
				<lsj-upload
				  	    ref="lsjUpload"
				  	    childId="upload1"
				  	    :width="width"
				  	    :height="height"
				  	    :option="option"
				  	    :size="size"
				  	    :count="count"
				  	    :formats="formats"
				  	    :debug="debug"
				  	    :instantly="instantly"
						@change="change"
				  		@uploadEnd="onuploadEnd" 
						>
				  	     <view class="rebtn" :style="{width: width,height: height}">去微信聊天中选取</view>
				</lsj-upload>
			</view>
			<view class="rebtn btn1" v-if="filelist.length>0">去微信聊天中选取</view>
		  <!-- 文件上传位置 -->
		  <view class="excbox flext" v-for="(ite,idx) in filelist" :key='idx'>
		  	<view class="flext flex1 excl" @click="getDown(ite.path)">
		  		<image :src="excimg" class="limg"></image>
		  		{{ite.name}}
			</view>
		  	<view class="excr" @click.stop="getDelFj(ite.name,idx)">删除文件</view>
		  </view>
		  <view class="fbtn" v-if="filelist.length">
		  	<view class="fbtnr flexcc" @click="getFinsh">完成导入</view>
		  </view>
	  </view>
	  
  </view>
</template>

<script>
	import config from '@/config'
    const baseUrl = config.baseUrl
    const clientid = config.Clientid
	import { getToken } from '@/utils/auth'
	// import tabSearch from "@/components/toptab/search.vue"
  export default {
	data(){
		return{
			example:require("@/mine/static/score/expay.png"),
			pagetype:0,
			option: {
			        // 上传服务器地址，需要替换为你的接口地址
			        url: baseUrl+'/xiaoYuan/pay/importData', // 该地址非真实路径，需替换为你项目自己的接口地址
			        // 上传附件的key
			        name: 'file',
			        // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
			        header: {
			            // 示例参数可删除
			            'Authorization':  'Bearer ' + getToken(),
						"Clientid":clientid
			        },
			        // 根据你接口需求自定义body参数
			        formData: {
			        }
			    },
			// 选择文件后是否立即自动上传，true=选择后立即上传
			instantly: false,
			// 必传宽高且宽高应与slot宽高保持一致
			width: '678rpx',
			height: '98rpx',
			// 限制允许上传的格式，空串=不限制，默认为空
			formats: 'xls,xlsx',
			// 文件上传大小限制
			size: 100,
			// 文件数量限制 默认10
			count: 1,
			// 文件回显列表
			files: new Map(),
			// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
			wxFiles: [],
			// 是否打印日志
			debug: false,
			filelist:[], 
			excimg: require("@/mine/static/score/exc.png"),
			downimg: require("@/mine/static/score/down.png"),
			tabIndex:0,
			scorknow:0,
		}
	},
	onLoad: function(e) {
		if(e.type&&e.type=='look'){
			 var data = JSON.parse(uni.getStorageSync('filelist'))//取出缓存数据
			this.filelist=data.item
			this.files=data.files
		}
		var scorknow=this.$store.state.user.scorknow||0;
		this.scorknow=scorknow;
		if(scorknow==2||scorknow==3){
			this.pagetype=1
		}
	},
	methods:{
		onuploadEnd(item) {
			var that=this;
			var responseText=JSON.parse(item.responseText)
			if(responseText.code==200){
				that.$toast('导入成功')
				setTimeout(function(){
					uni.$emit("refreshpayfile")
					uni.navigateBack({
						delta: 1 //返回层数，2则上上页
					});
				},1200)
				
			}else{
				that.$toast(responseText.msg)
			}
		},
		onprogre(e){
			console.log(e,3)
		},
		change(files){
			var newarr=[...files.values()];
			this.files = files;
			this.filelist=JSON.parse(JSON.stringify(newarr))
			// console.log(this.filelist)
		},
		getFinsh(){
			var name=this.filelist[0].name;
			var files=this.files
			this.$refs['lsjUpload'].setData('formData.updateSupport',0); 
			this.$refs['lsjUpload'].uploadimp(name,files);
		},
		getKnow(){
			var s=this.scorknow;
			var a=2;
			if(s==1){a=3;}
			this.$store.dispatch('checkKnow', a).then(() => {
				this.pagetype=1
			}).catch(() => {
			 
			})
		},
		getDelFj(name,idx){
			this.filelist.splice(idx,1)
			this.$refs['lsjUpload'].clear(name);
			var obj={
				file:this.filelist,
				files:new Map(),
			}
			uni.$emit("refreshscorefile",obj)
		},
		// 下载文件
		getDownFn(e){
			var aurl='/profile/upload/template/工资.xls'
			uni.showLoading({
				title: '加载中'
			});
			var url=baseUrl+aurl;
			uni.downloadFile({
				url: url,//文件的下载路径
				success(result) {
						uni.hideLoading()
					var filePath = result.tempFilePath;
					   uni.openDocument({
					     filePath: filePath,
					     showMenu: true,
					     success: function (res) {
					     }
					   });
				},
				fail(res) {uni.hideLoading()}
			})
		},
		getDown(e){
			var filePath = e;
			 uni.openDocument({
			     filePath: filePath,
			     showMenu: true,
			     success: function (res) {
			     }
			});
		},
	},
	
  }
</script>

<style lang="scss" scoped>
.format{padding: 40rpx 36rpx;
	.box{width: 100%;background: #ffffff;padding:40rpx 26rpx 26rpx ;box-sizing: border-box;border-radius: 18rpx;
		.tit{font-size: 32rpx;font-weight: bold;color: #161616;}
		.txt{font-size: 30rpx;color: #161616;margin-top: 24rpx;display: flex;align-items: flex-start;
			.cir{width: 16rpx;height: 16rpx;background: #1f57e6;border-radius: 50%;margin-right: 24rpx;display:inline-block;flex: 0 0 auto;margin-top: 12rpx;}
		}
		.examimg{width: 540rpx;margin: 34rpx auto 0;}
		.ttxt{font-size: 28rpx;color: #AAAAAA;margin-top: 36rpx;text-align: center;}
	}
	.excbox{margin-top: 60rpx;background: #FFFFFF;
border-radius: 18rpx;padding: 32rpx 40rpx;box-sizing: border-box;
		.excl{font-size: 30rpx;font-weight: 500;
	color: #161616;
			.limg{width: 36rpx;height: 38rpx;margin-right:36rpx ;flex: 0 0 auto;}
		}
					
		.excr{font-size: 30rpx;font-weight: 500;color: #FE5A0E;display: flex;align-items: center;flex: 0 0 auto;margin-left: 20rpx;
		}
					
	}
}
.fbtn{display: flex;align-items: center;position: fixed;left: 0;right: 0;bottom: 0;background-color: #f1f1f1;padding: 34rpx;
		.fbtnl{padding: 0 16rpx;flex: 0 0 auto;
			image{width: 42rpx;height: 42rpx;margin-bottom: 8rpx;}
		}
		.fbtnr{height: 98rpx;background: #1f57e6;border-radius: 48rpx;font-size: 34rpx;font-weight: 500;
color: #FFFFFF;flex: 1;}
	}
</style>