ZhiYeJianKang_QiYe_APP/pages/purchase/purchase.vue

624 lines
16 KiB
Vue
Raw Permalink Normal View History

2025-02-20 15:38:43 +08:00
<template>
<view class="app">
<view class="body">
<u-form :model="formxcjyListadd" ref="uForm" :label-width='200' :rules="rules">
<u-form-item label="报告名称 " labelWidth="130" prop="reportname"><u-input
v-model="formxcjyListadd.reportname" placeholder="请输入报告名称" /></u-form-item>
<u-form-item label="有无文件" prop="isFile" v-if="formxcjyListadd.typeid=='6'">
<u-radio-group v-model="formxcjyListadd.isFile">
<u-radio shape="circle" name="有" @change="FileChange"></u-radio>
<u-radio shape="circle" name="无" @change="FilefalseChange"></u-radio>
</u-radio-group>
</u-form-item>
<view class="" v-if="showisFile">
<u-form-item label="文件名" labelWidth="130" prop="filename"><u-input v-model="formxcjyListadd.filename"
placeholder="文件名" :disabled="true" /></u-form-item>
<u-form-item label="文件" labelWidth="250" prop="filecontent">
<lsj-upload ref="lsjUpload" childId="upload1" :option="option" :size="size" :formats="formats"
:debug="debug" :instantly="instantly" @uploadEnd="onuploadEnd" @progress="onprogre"
@change="change">
<u-button type="primary" size="medium" class="up">文件上传</u-button>
<u-icon name="checkbox-mark" v-if="formxcjyListadd.filecontent" class="icon"></u-icon>
</lsj-upload>
</u-form-item>
</view>
<view class="" @tap="showdays()">
<u-form-item label="报告时间" labelWidth="140" prop="reporttime">
<view class="button" v-if="button">请选择报告时间</view>
<u-calendar v-model="showday" :mode="mode" @change="changetime">
</u-calendar>
{{formxcjyListadd.reporttime | formatDate('-')}}
</u-form-item>
</view>
<view>
<u-form-item label="下次时间" prop="reportnexttime"
v-if="formxcjyListadd.typeid=='4' || formxcjyListadd.typeid=='10' || formxcjyListadd.typeid=='5'">
<u-radio-group v-model="formxcjyListadd.reportPeriod">
<u-radio name="半年" @change="halfChange">半年</u-radio>
<u-radio shape="circle" name="一年" @change="oneChange">一年</u-radio>
<u-radio shape="circle" name="两年" @change="twoChange">两年</u-radio>
<u-radio shape="circle" name="三年" @change="threeChange">三年</u-radio>
<view class="time" v-if="formxcjyListadd.reportnexttime">
{{ formxcjyListadd.reportnexttime }}
</view>
</u-radio-group>
</u-form-item>
</view>
<u-form-item label="下次时间" prop="reportnexttime" v-if="formxcjyListadd.typeid=='1'">
<u-radio-group v-model="formxcjyListadd.reportPeriod">
<u-radio shape="circle" name="一年" @change="oneChange">一年</u-radio>
<view class="time" v-if="formxcjyListadd.reportnexttime">
{{ formxcjyListadd.reportnexttime }}
</view>
</u-radio-group>
</u-form-item>
</u-form>
<view class="but">
<view class="sub">
<u-button type="primary" text="确定" @tap="submit()">提交</u-button>
</view>
<view class="res">
<u-button type="primary" text="确定" @tap="resetreport()"
v-if="this.formxcjyListadd.typeid=='6'">重置</u-button>
<u-button type="primary" text="确定" @tap="resetreport4()"
v-else-if="this.formxcjyListadd.typeid=='4'">重置</u-button>
<u-button type="primary" text="确定" @tap="resetreport10()"
v-else-if="this.formxcjyListadd.typeid=='10'">重置</u-button>
<u-button type="primary" text="确定" @tap="resetreport5()"
v-else-if="this.formxcjyListadd.typeid=='5'">重置</u-button>
<u-button type="primary" text="确定" @tap="resetreport1()"
v-else-if="this.formxcjyListadd.typeid=='1'">重置</u-button>
<u-button type="primary" text="确定" @tap="reset()" v-else>重置</u-button>
</view>
<!-- <view class="res" v-if="this.formxcjyListadd.typeid=='6'">
<u-button type="primary" text="确定" @tap="reset()">重置11</u-button>
</view> -->
</view>
<u-toast ref="uToast" />
</view>
</view>
</template>
<script>
import {
pjjgListno,
add
} from "@/api/purchase/purchase.js";
import baseUrl from '@/api/baseurl.js'
import moment from 'moment'
export default {
data() {
return {
formxcjyListadd: {
id: '',
typeid: '',
reportname: '',
filename: '',
filecontent: '',
reporttime: '',
reportPeriod: '一年',
reportnexttime: '',
isFile: '有'
},
showday: false, //报告时间
showitem: false,
showisFile: true, //有无文件
nexttime: '', //下次报告时间
mode: 'date',
value: '',
token: '',
tadytime: '',
jiansheadd: [],
testname: [],
button:true,
rules: {
reportname: [{
required: true,
message: "请填写报告名称",
trigger: "blur"
}, ],
jcjgname: [{
required: true,
message: "请选择检测机构名称",
trigger: "blur"
}, ],
reporttime: [{
required: true,
message: "请选择报告时间",
trigger: "blur"
}, ],
reportnexttime: [{
required: true,
message: "请选择下次报告时间",
trigger: "blur"
}, ],
filecontent: [{
required: true,
message: "请上传文件",
trigger: "blur"
}, ]
},
typeid: '',
/////////////////////////////////////////////////////////////
// 上传接口参数
option: {
// 上传服务器地址,需要替换为你的接口地址
url: baseUrl + `/dzzyb/a/zyb/ar/uploadFile`, // 该地址非真实路径,需替换为你项目自己的接口地址
// 上传附件的key
name: 'file',
// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
header: {
// 示例参数可删除
token: '',
},
// 根据你接口需求自定义body参数
formData: {
// 'orderId': 1000
}
},
// 选择文件后是否立即自动上传true=选择后立即上传
instantly: true,
// 必传宽高且宽高应与slot宽高保持一致
// width: '300rpx',
// height: '120rpx',
// 限制允许上传的格式,空串=不限制,默认为空
formats: '',
// 文件上传大小限制
size: 30,
// 文件数量限制
count: 1,
// 文件回显列表
files: new Map(),
// 微信小程序Map对象for循环不显示所以转成普通数组不要问为什么我也不知道
wxFiles: [],
// 是否打印日志
debug: true,
// 演示用
tabIndex: 0,
list: [],
}
},
created() {
this.token = uni.getStorageSync("token")
console.log(this.token)
console.log(moment().format("YYYY-MM-DD HH:mm"))
// this.getlist()
},
onLoad(options) {
console.log(options.purchasetypeid)
if (options.purchasetypeid) {
this.formxcjyListadd.typeid = options.purchasetypeid
this.typeid = options.purchasetypeid
}
if (options.purchasetypeid == '1') {
this.formxcjyListadd.reportPeriod = '一年'
}
// this.type = options.type
// if (options.exampleObject ) {
// this.exampleObject = JSON.parse(decodeURIComponent(options.exampleObject));
// }
},
filters: {
// 时间戳处理
formatDate: function(value, spe = '/') {
if (value) {
value = value
let data = new Date(value);
let year = data.getFullYear();
let month = data.getMonth() + 1;
let day = data.getDate();
// let h = data.getHours();
// let mm = data.getMinutes();
// let s = data.getSeconds();
month = month >= 10 ? month : "0" + month;
day = day >= 10 ? day : "0" + day;
// h = h >= 10 ? h : "0" + h;
// mm = mm >= 10 ? mm : "0" + mm;
// s = s >= 10 ? s : "0" + s;
return `${year}${spe}${month}${spe}${day}`;
}
}
},
//如果是封装的组件需要在mounted调用不然校验有时会不生效
//不是的话在onReady调用也可
// mounted() {
// this.$refs.uForm.setRules(this.rules)
// },
onReady() {
this.$refs.uForm.setRules(this.rules);
},
methods: {
/**
* 某文件上传结束回调(成功失败都回调)
* @param {Object} item 当前上传完成的文件
*/
onuploadEnd(item) {
// 更新当前窗口状态变化的文件
this.files.set(item.name, item);
if (item['responseText']) {
this.files.get(item.name).responseText = JSON.parse(item.responseText);
console.log('演示服务器', this.files.get(item.name).responseText);
this.formxcjyListadd.filecontent = this.files.get(item.name).responseText.data.src
this.formxcjyListadd.filename = this.files.get(item.name).responseText.fileName
this.$refs.uToast.show({
title: '上传成功',
type: 'success',
duration: 1500
})
uni.hideLoading();
}
// #ifdef MP-WEIXIN
this.wxFiles = [...this.files.values()];
// #endif
// 强制更新视图
this.$forceUpdate();
},
/**
* 上传进度回调
* 如果网页上md文档没有渲染出事件名称onprogre请复制代码的小伙伴自行添加上哈没有哪个事件是只(item)
* @param {Object} item 当前正在上传的文件
*/
onprogre(item) {
// uni.showLoading({
// title: '文件上传中'
// });
// 更新当前状态变化的文件
this.files.set(item.name, item);
// console.log('打印对象', JSON.parse(JSON.stringify(this.files.get(item.name))));
// #ifdef MP-WEIXIN
this.wxFiles = [...this.files.values()];
// #endif
// 强制更新视图
this.$forceUpdate();
},
/**
* 文件选择回调
* @param {Object} files 已选择的所有文件Map集合
*/
change(files) {
console.log(files,'000')
// console.log('当前选择的文件列表:', JSON.stringify([...files.values()]));
// 更新选择的文件
this.files = files;
// 强制更新视图
this.$forceUpdate();
// 微信小程序Map对象for循环不显示所以转成普通数组不要问为什么我也不知道
// #ifdef MP-WEIXIN
this.wxFiles = [...this.files.values()];
// #endif
},
// 有无文件
FilefalseChange() {
this.showisFile = false;
},
FileChange() {
this.showisFile = true;
},
// 必须要在onReady生命周期因为onLoad生命周期组件可能尚未创建完毕
// 报告时间
showdays() {
this.showday = true;
},
// 报告时间点击事件
changetime(e) {
// console.log(e)
this.formxcjyListadd.reporttime = e.result
this.button=false
// 获取当前时间
// 获取半年后时间
console.log(this.formxcjyListadd.reportPeriod)
if (this.formxcjyListadd.reportPeriod == '三年') {
// 赋值给新值
this.tadytime = e.result
let newdate = moment(this.tadytime).subtract(-3, 'year').format('YYYY-MM-DD') // 三年
this.formxcjyListadd.reportnexttime = newdate
} else if (this.formxcjyListadd.reportPeriod == '半年') {
this.tadytime = e.result
let newdate = moment(this.tadytime).subtract(-0.5, 'year').format('YYYY-MM-DD')
this.formxcjyListadd.reportnexttime = newdate
} else if (this.formxcjyListadd.reportPeriod == '一年') {
this.tadytime = e.result
let newdate = moment(this.tadytime).subtract(-1, 'year').format('YYYY-MM-DD')
this.formxcjyListadd.reportnexttime = newdate
} else if (this.formxcjyListadd.reportPeriod == '两年') {
this.tadytime = e.result
let newdate = moment(this.tadytime).subtract(-2, 'year').format('YYYY-MM-DD')
this.formxcjyListadd.reportnexttime = newdate
}
},
showitemlist() {
this.testname = [],
this.showitem = true
this.jiansheadd.forEach((e) => {
var obj = {
label: e.companyName,
value: e.id
};
this.testname.push(obj);
})
},
// 半年
halfChange(e) {
console.log(e)
this.formxcjyListadd.reportPeriod = e
if (this.formxcjyListadd.reporttime) {
let newdate = moment(this.formxcjyListadd.reporttime).subtract(-0.5, 'year').format('YYYY-MM-DD')
this.formxcjyListadd.reportnexttime = newdate
}
},
// 一年
oneChange(e) {
this.formxcjyListadd.reportPeriod = e
if (this.formxcjyListadd.reporttime) {
let newdate = moment(this.formxcjyListadd.reporttime).subtract(-1, 'year').format('YYYY-MM-DD')
this.formxcjyListadd.reportnexttime = newdate
}
},
// 两年
twoChange(e) {
this.formxcjyListadd.reportPeriod = e
if (this.formxcjyListadd.reporttime) {
let newdate = moment(this.formxcjyListadd.reporttime).subtract(-2, 'year').format('YYYY-MM-DD')
this.formxcjyListadd.reportnexttime = newdate
}
},
// 三年
threeChange(e) {
this.formxcjyListadd.reportPeriod = e
if (this.formxcjyListadd.reporttime) {
let newdate = moment(this.formxcjyListadd.reporttime).subtract(-3, 'year').format('YYYY-MM-DD')
this.formxcjyListadd.reportnexttime = newdate
}
},
// 选中任一radio时由radio-group触发
radioGroupChange(e) {
// console.log(e);
},
// 重置
reset() {
this.nexttime = '';
this.button=true
this.formxcjyListadd = {
id: '',
typeid: '',
reportname: '',
filename: '',
filecontent: '',
reporttime: '',
reportPeriod: '一年',
reportnexttime: '',
isFile: '有',
}
},
resetreport1() {
this.formxcjyListadd = {
id: '',
typeid: '1',
reportname: '',
filename: '',
filecontent: '',
reporttime: '',
reportPeriod: '一年',
reportnexttime: '',
isFile: '有',
}
this.button=true
},
resetreport() {
this.showisFile = true;
this.formxcjyListadd = {
id: '',
typeid: '6',
reportname: '',
filename: '',
filecontent: '',
reporttime: '',
reportPeriod: '',
reportnexttime: '',
isFile: '有',
}
this.button=true
},
resetreport4() {
this.button=true
this.formxcjyListadd = {
id: '',
typeid: '4',
reportname: '',
filename: '',
filecontent: '',
reporttime: '',
reportPeriod: '一年',
reportnexttime: '',
isFile: '有',
}
},
resetreport10() {
this.button=true
this.formxcjyListadd = {
id: '',
typeid: '10',
reportname: '',
filename: '',
filecontent: '',
reporttime: '',
reportPeriod: '一年',
reportnexttime: '',
isFile: '有',
}
},
resetreport5() {
this.button=true
this.formxcjyListadd = {
id: '',
typeid: '5',
reportname: '',
filename: '',
filecontent: '',
reporttime: '',
reportPeriod: '一年',
reportnexttime: '',
isFile: '有',
}
},
// 提交
submit() {
this.formxcjyListadd.typeid = this.typeid
console.log(this.formxcjyListadd)
this.$refs.uForm.validate(valid => {
if (valid) {
add(this.formxcjyListadd).then(response => {
if (response.code == '0' && response.mess == '下次报告时间重复!') {
this.$refs.uToast.show({
title: response.mess,
type: 'error',
duration: 1500
})
} else {
this.$refs.uToast.show({
title: '新增成功',
type: 'success',
duration: 1500
})
uni.$emit('update', '1')
setTimeout(function() {
uni.switchTab({
url: '/pages/homepage/homepage'
});
}, 2000);
}
});
}
});
}
},
}
</script>
<style lang="scss">
//css函数 声明函数
@function tovmin($rpx) {
//$rpx为需要转换的字号
@return #{$rpx * 100 / 750}vmin;
}
::v-deep .u-form-item {
padding-left: tovmin(50) !important;
}
// ::v-deep .u-iconfont {
// margin-right: tovmin(30);
// }
::v-deep .u-icon__icon uicon-checkbox-mark u-iconfont {
left: 8px
}
.app {
color: #C3C1C1;
font-weight: 400;
height: 100vh;
.body {
margin-top: tovmin(30);
.but {
display: flex;
justify-content: space-around;
margin-top: tovmin(50);
.res {
width: tovmin(170);
height: tovmin(70);
line-height: tovmin(70);
text-align: center;
color: #fff;
background-color: #3C9CFF;
border-radius: tovmin(10);
}
.sub {
width: tovmin(170);
height: tovmin(70);
line-height: tovmin(70);
text-align: center;
color: #fff;
background-color: #3C9CFF;
border-radius: tovmin(10);
}
}
}
.up {
// background-color: red;
position: absolute;
// right: tovmin(120);
}
.icon {
position: absolute;
right: tovmin(60);
top: tovmin(20);
}
.button{
color:#C0C4CC;
}
}
</style>