460 lines
9.9 KiB
Vue
460 lines
9.9 KiB
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() {
|
||
console.log(getToken);
|
||
},
|
||
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){
|
||
console.log(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;
|
||
console.log(formattedDate);
|
||
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
|
||
}
|
||
}
|
||
console.log(this.box,'this.box');
|
||
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
|
||
console.log('结果结果结果',result)
|
||
this.filesApp = result
|
||
// #endif
|
||
},
|
||
uploadSuccess(result){
|
||
this.result = result
|
||
console.log('上传服务器后端返回结果',this.result)//后期取值可以在这里做操作
|
||
this.box.filePath = result[0].fileName
|
||
console.log(this.box.filePath ,'this.box.filePath ');
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
</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> |