628 lines
16 KiB
Vue
628 lines
16 KiB
Vue
<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="bgname"><u-input v-model="formxcjyListadd.bgname"
|
||
placeholder="{企业简称首字母}-{企业全名}-{年月日}-{序列号}" /></u-form-item>
|
||
|
||
<u-form-item label="检测机构名称" prop="jcjgname">
|
||
<!-- // page-meta 解决input聚焦时滑动穿透， 你有其他方案可以用自己的方案 -->
|
||
<!-- <page-meta :page-style="`overflow: ${ hidden ? 'hidden' : 'unset'}`"></page-meta> -->
|
||
|
||
<lx-input class="input" placeholder="请选择机构" v-model="formxcjyListadd.jcjgname" :list="testname"
|
||
:hidden.sync="hidden" @focus="showitemlist" @clickItem="confirm" @input="input"></lx-input>
|
||
<!-- <u-select v-model="showitem" mode="single-column" :list="testname" @confirm="confirm"
|
||
@cancel="cancel"></u-select>
|
||
|
||
<u-input v-model="formxcjyListadd.jcjgname" type="select" @tap="showitemlist" placeholder="请选择机构" /> -->
|
||
</u-form-item>
|
||
<view class="" @tap="showdays()">
|
||
<u-form-item label="报告时间" labelWidth="140" prop="bgtime">
|
||
<view class="button" v-if="button">请选择报告时间</view>
|
||
<u-calendar v-model="showday" :mode="mode" @change="changetime">
|
||
</u-calendar>
|
||
{{formxcjyListadd.bgtime | formatDate('-')}}
|
||
</u-form-item>
|
||
</view>
|
||
<!-- <u-form-item label="报告时间"><u-input v-model="form.intro" /></u-form-item> -->
|
||
<u-form-item label="下次时间" prop="nextjctime">
|
||
<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.nextjctime">
|
||
{{ formxcjyListadd.nextjctime }}
|
||
</view>
|
||
</u-radio-group>
|
||
|
||
</u-form-item>
|
||
<u-form-item label="工作场所职业病危害因素检测报告" labelWidth="250" prop="bgcontent">
|
||
<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.bgcontent" class="icon"></u-icon>
|
||
<!-- <u-icon name="checkbox-mark" v-if="formxcjyListadd.collectReport" class="icon"></u-icon>
|
||
<u-button type="primary" size="medium" @click="upload" class="up">文件上传</u-button> -->
|
||
</lsj-upload>
|
||
</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="reset()">重置</u-button>
|
||
|
||
</view>
|
||
</view>
|
||
<u-toast ref="uToast" />
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
pjjgListno,
|
||
insertJcxxno,
|
||
jcxxList,
|
||
deleteJcxx,
|
||
addqyjcxxRenew
|
||
} from "@/api/upload/upload.js";
|
||
import baseUrl from '@/api/baseurl.js'
|
||
|
||
import moment from 'moment'
|
||
export default {
|
||
data() {
|
||
return {
|
||
formxcjyListadd: {
|
||
id: '',
|
||
bgname: '',
|
||
jcjgname: '',
|
||
enterpriseName: '',
|
||
jcjgid: '',
|
||
enterpriseid: '',
|
||
jhysId: '',
|
||
bgtime: '',
|
||
nextjctime: '',
|
||
bgcontent: '',
|
||
reportPeriod: '',
|
||
},
|
||
|
||
|
||
showday: false, //报告时间
|
||
showitem: false,
|
||
mode: 'date',
|
||
value: '',
|
||
token: '',
|
||
tadytime: '',
|
||
jiansheadd: [],
|
||
testname: [
|
||
|
||
],
|
||
button: true,
|
||
list: [{
|
||
name: '半年',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: '一年',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: '两年',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: '三年',
|
||
disabled: false
|
||
}
|
||
],
|
||
rules: {
|
||
bgname: [{
|
||
required: true,
|
||
message: "请填写报告名称",
|
||
trigger: "blur"
|
||
}, ],
|
||
jcjgname: [{
|
||
required: true,
|
||
message: "请选择检测机构名称",
|
||
trigger: "blur"
|
||
}, ],
|
||
bgtime: [{
|
||
required: true,
|
||
message: "请选择报告时间",
|
||
trigger: "blur"
|
||
}, ],
|
||
nextjctime: [{
|
||
required: true,
|
||
message: "请选择下次时间",
|
||
trigger: "blur"
|
||
}, ],
|
||
bgcontent: [{
|
||
required: true,
|
||
message: "请上传文件",
|
||
trigger: "blur"
|
||
}, ]
|
||
},
|
||
|
||
|
||
|
||
value1: '',
|
||
value2: '',
|
||
value3: '',
|
||
list1: [
|
||
// {
|
||
// value: '1',
|
||
// label: '江'
|
||
// },
|
||
// {
|
||
// value: '2',
|
||
// label: '湖'
|
||
// }
|
||
|
||
],
|
||
list2: [],
|
||
list3: [],
|
||
|
||
hidden: false,
|
||
/////////////////////////////////////////////////////////////
|
||
// 上传接口参数
|
||
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()
|
||
|
||
},
|
||
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: {
|
||
// clear(e){
|
||
// console.log(e)
|
||
// },
|
||
/**
|
||
* 某文件上传结束回调(成功失败都回调)
|
||
* @param {Object} item 当前上传完成的文件
|
||
*/
|
||
onuploadEnd(item) {
|
||
// 更新当前窗口状态变化的文件
|
||
this.files.set(item.name, item);
|
||
if (item['responseText']) {
|
||
// console.log('演示服务器返回的字符串JSON转Object对象');
|
||
this.files.get(item.name).responseText = JSON.parse(item.responseText);
|
||
this.formxcjyListadd.bgcontent = this.files.get(item.name).responseText.data.src
|
||
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('当前选择的文件列表：', JSON.stringify([...files.values()]));
|
||
// 更新选择的文件
|
||
this.files = files;
|
||
// 强制更新视图
|
||
this.$forceUpdate();
|
||
// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
|
||
// #ifdef MP-WEIXIN
|
||
this.wxFiles = [...this.files.values()];
|
||
// #endif
|
||
|
||
},
|
||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||
|
||
// 报告时间
|
||
showdays() {
|
||
this.showday = true;
|
||
},
|
||
// 报告时间点击事件
|
||
changetime(e) {
|
||
// console.log(e)
|
||
this.formxcjyListadd.bgtime = 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.nextjctime = 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.nextjctime = newdate
|
||
|
||
} else if (this.formxcjyListadd.reportPeriod == '一年') {
|
||
this.tadytime = e.result
|
||
let newdate = moment(this.tadytime).subtract(-1, 'year').format('YYYY-MM-DD')
|
||
this.formxcjyListadd.nextjctime = newdate
|
||
|
||
} else if (this.formxcjyListadd.reportPeriod == '两年') {
|
||
this.tadytime = e.result
|
||
let newdate = moment(this.tadytime).subtract(-2, 'year').format('YYYY-MM-DD')
|
||
this.formxcjyListadd.nextjctime = newdate
|
||
|
||
}
|
||
// console.log(e);
|
||
// // console.log(this.formlist)
|
||
// this.formxcjyListadd.bgtime = e.result
|
||
},
|
||
// 检测机构名称
|
||
getlist() {
|
||
pjjgListno().then(res => {
|
||
this.jiansheadd = res
|
||
this.testname = []
|
||
this.jiansheadd.forEach((e) => {
|
||
var obj = {
|
||
label: e.companyName,
|
||
value: e.id
|
||
};
|
||
this.testname.push(obj);
|
||
})
|
||
})
|
||
},
|
||
showitemlist(e) {
|
||
// console.log("2222222", e)
|
||
this.showitem = true
|
||
},
|
||
// 检测机构名称确定
|
||
|
||
confirm(e) {
|
||
// console.log(e)
|
||
this.formxcjyListadd.jcjgname = e.label
|
||
this.formxcjyListadd.jcjgid = e.value
|
||
// console.log(e);
|
||
},
|
||
input(e) {
|
||
if(e){
|
||
this.formxcjyListadd.jcjgname = e
|
||
this.formxcjyListadd.jcjgid = ''
|
||
console.log(e)
|
||
|
||
}
|
||
|
||
|
||
},
|
||
cancel(e) {
|
||
|
||
},
|
||
actionSheetCallback(index) {
|
||
// console.log('111', index)
|
||
// uni.hideKeyboard();
|
||
// this.datalist.dwgm = this.jiansheadd[index].text;
|
||
// this.list= this.list[index].value;
|
||
|
||
},
|
||
halfChange(e) {
|
||
console.log(e)
|
||
this.formxcjyListadd.reportPeriod = e
|
||
if (this.formxcjyListadd.bgtime) {
|
||
let newdate = moment(this.formxcjyListadd.bgtime).subtract(-0.5, 'year').format('YYYY-MM-DD')
|
||
this.formxcjyListadd.nextjctime = newdate
|
||
}
|
||
},
|
||
// 一年
|
||
oneChange(e) {
|
||
this.formxcjyListadd.reportPeriod = e
|
||
if (this.formxcjyListadd.bgtime) {
|
||
let newdate = moment(this.formxcjyListadd.bgtime).subtract(-1, 'year').format('YYYY-MM-DD')
|
||
this.formxcjyListadd.nextjctime = newdate
|
||
}
|
||
|
||
},
|
||
// 两年
|
||
twoChange(e) {
|
||
this.formxcjyListadd.reportPeriod = e
|
||
if (this.formxcjyListadd.bgtime) {
|
||
let newdate = moment(this.formxcjyListadd.bgtime).subtract(-2, 'year').format('YYYY-MM-DD')
|
||
this.formxcjyListadd.nextjctime = newdate
|
||
}
|
||
},
|
||
// 三年
|
||
threeChange(e) {
|
||
this.formxcjyListadd.reportPeriod = e
|
||
if (this.formxcjyListadd.bgtime) {
|
||
let newdate = moment(this.formxcjyListadd.bgtime).subtract(-3, 'year').format('YYYY-MM-DD')
|
||
this.formxcjyListadd.nextjctime = newdate
|
||
}
|
||
},
|
||
// 选中任一radio时，由radio-group触发
|
||
radioGroupChange(e) {
|
||
// console.log(e);
|
||
|
||
},
|
||
|
||
// 重置
|
||
reset() {
|
||
// this.value='',
|
||
this.formxcjyListadd.reportPeriod = ''
|
||
this.button = true
|
||
this.formxcjyListadd = {
|
||
id: '',
|
||
bgname: '',
|
||
jcjgname: '',
|
||
enterpriseName: '',
|
||
jcjgid: '',
|
||
enterpriseid: '',
|
||
jhysId: '',
|
||
bgtime: '',
|
||
nextjctime: '',
|
||
bgcontent: '',
|
||
reportPeriod: '',
|
||
}
|
||
|
||
},
|
||
|
||
// 提交
|
||
submit() {
|
||
console.log(this.formxcjyListadd)
|
||
|
||
this.$refs.uForm.validate(valid => {
|
||
|
||
if (valid) {
|
||
insertJcxxno(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-icon__icon uicon-checkbox-mark u-iconfont {
|
||
left: tovmin(8);
|
||
}
|
||
|
||
::v-deep .srollViewBox .scrollView-item {
|
||
padding-left: 0 !important;
|
||
line-height: tovmin(50) !important;
|
||
color: #3C9CFF !important;
|
||
|
||
}
|
||
|
||
::v-deep .inputBox .focusBox .inputStyle {
|
||
width: 100% !important;
|
||
color: #000 !important;
|
||
|
||
}
|
||
|
||
::v-deep .uni-input-placeholder {
|
||
font-size: tovmin(27) !important;
|
||
color: #C0C4CC !important;
|
||
|
||
}
|
||
::v-deep .srollViewBox .scrollView{
|
||
height: tovmin(200) !important;
|
||
|
||
}
|
||
::v-deep .srollViewBox{
|
||
height: tovmin(220) !important;
|
||
|
||
}
|
||
::v-deep .uni-input-input{
|
||
font-size: tovmin(27) !important;
|
||
|
||
}
|
||
|
||
// 请选择机构
|
||
|
||
.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);
|
||
|
||
}
|
||
|
||
.button {
|
||
color: #C0C4CC;
|
||
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 0 tovmin(30);
|
||
|
||
.inputContent {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: tovmin(100);
|
||
|
||
.label {
|
||
font-size: tovmin(15);
|
||
font-weight: bold;
|
||
margin-right: tovmin(15);
|
||
}
|
||
|
||
.input {
|
||
flex: 1;
|
||
font-size: tovmin(10);
|
||
color: red;
|
||
}
|
||
}
|
||
}
|
||
</style> |