factory_mp_old/pages/workSpace/newWork/addViolation.vue

815 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="qingjia-apply">
<uni-nav-bar @clickLeft="goBack()" class="nav-bar" height="110rpx" leftWidth="200rpx" leftText="新增违章"
leftIcon="left" border backgroundColor="#2cade8" color="#fff" fixed statusBar shadow></uni-nav-bar>
<view class="apply-info">
<view class="form-content ">
<view class="form-item border-bottom">
<view class="form-left">
<text class="star">*</text>
<text class="form-left-text">发生时间</text>
</view>
<view class="form-right form-date">
<uni-datetime-picker v-model="formData.time" :border="false" />
</view>
</view>
<view class="form-item border-bottom">
<view class="form-left">
<text class="star">*</text>
<text class="form-left-text">人员类型</text>
</view>
<view class="form-right">
<uni-data-select v-model="formData.type" :localdata="personnelRange" @change="purposeChange">
</uni-data-select>
</view>
</view>
<view class="form-item border-bottom">
<view class="form-left">
<text class="star">*</text>
<text class="form-left-text">所在区域</text>
</view>
<view class="form-right">
<uni-data-select v-model="formData.area" :localdata="areaRange">
</uni-data-select>
</view>
</view>
<view class="form-item border-bottom">
<view class="form-left">
<text class="star">*</text>
<text class="form-left-text">当事人</text>
</view>
<view class="form-right">
<input type="text" v-model="formData.user" maxlength="50" placeholder="请输入" />
</view>
</view>
<view class="form-item border-bottom">
<view class="form-left">
<text class="star">*</text>
<text class="form-left-text">所在部门</text>
</view>
<view class="form-right" style="position: relative;">
<ba-tree-picker ref="dept_Picker" :multiple='false' @select-change="dept_Change" title="请选择所在部门"
:localdata="depRange" valueKey="id" textKey="name" childrenKey="children" />
<text type="text">{{dept_name}}</text>
<uni-icons style="position: absolute; right: 0;" @click="showPicker" type="arrowright" color="#999999"/>
</view>
</view>
<view class="form-item border-bottom">
<view class="form-left">
<text class="star">*</text>
<text class="form-left-text">具体地点</text>
</view>
<view class="form-right">
<input type="text" v-model="formData.place" maxlength="50" placeholder="请输入" />
</view>
</view>
</view>
<view class="form-content ">
<view class="form-item border-bottom" style="height: 300rpx;" v-if="formData.purpose!==50">
<view class="form-left">
<text class="form-left-text">违规详述</text>
</view>
<view class="form-right">
<textarea class="apply-reason-text" v-model="formData.description" maxlength="250"
placeholder="请输入" />
</view>
</view>
<view class="item item_bottom_border" style="height: fit-content;" >
<view class="title">照片</view>
<view style="flex: 3;">
<u-upload :action="vuex_apifile" :header="header" ref="uUpload" :file-list="fileList" max-count="9" @on-success="imgUpSuccess" @on-remove="imgRemove"></u-upload>
<!-- <imgUpload :count="9" :header="header" :url="vuex_apifile" @obtain_img="imgUpdata" :list="fileList"></imgUpload> -->
</view>
</view>
<view class="btn" v-if="showBtns">
<button type="primary" class="save-btn" @click="handleClick">提交</button>
</view>
</view>
</view>
</view>
</template>
<script>
import imgUpload from '@/components/linzq-imgUpload/linzq-imgUpload.vue';
import baTreePicker from "../../comm/ba-tree-picker/ba-tree-picker.vue";
import nonNullCheck from '../../../utils/nonNullCheck.js';
import resetData from '../../../utils/common.js';
export default {
name: "visit",
components: {
baTreePicker,
imgUpload
},
data() {
return {
formData: {
time: '', //来访概述
type: 'employee', //来访事由
area: '', //接待人
user: '', //来访时间
dept: '', //离开时间
description: '', //来访详述
place: '', //来访单位
imgs:[],
},
head: {
Authorization: "Bearer " + this.vuex_token
},
fileList:[],
publishRangeCon: '',
menuId: "",
itemId: "",
detail: false,
showBtns:false,
visitItem: {},
type: '',
visitId: '',
personnelRange:[
{text:"公司员工",value:'employee'},
{text:"访客",value:'visitor'},
{text:"相关方",value:'remployee'},
{text:"司机",value:'driver'},
],
depRange: [],
areaRange: [],
dept_name:'请选所在部门',
}
},
onLoad(params) {
if (params.visit) {
this.visitId = params.visit;
this.type = params.type;
this.getVisitItem();
if(this.type === 'show'){
this.showBtns = false;
}else{
this.showBtns = true;
}
} else {
this.showBtns = true;
}
},
onShow() {
this.getHeader();
this.getDate();
this.getdept();
this.getAreaRange();
},
methods: {
imgRemove(index,list,inde){
// debugger;
// console.log(index)
this.formData.imgs.splice(index,1);
console.log(this.formData.imgs)
},
imgUpSuccess(data,index,list){
// debugger;
// console.log(data);
// console.log(index);
// console.log(list);
this.formData.imgs.push(data.id);
},
showPicker() {
this.$refs.dept_Picker._show();
},
cancel(){
this.$refs.dept_Picker._hide();
},
//监听选择ids为数组
dept_Change(ids, names) {
// debugger;
// console.log(ids, names);
this.formData.dept = ids[0];
this.dept_name = names;
},
getHeader() {
this.header = {
Authorization: "Bearer " + this.vuex_token
}
},
//获取dept
getdept() {
let that = this;
that.$u.api.deptList({page: 0}).then(res => {
that.depRange = resetData(res);
})
},
//获取作业区域
getAreaRange() {
this.$u.api.areaLists({page: 0}).then(res => {
let range = [];
let obj = {};
res.forEach(item => {
obj = {value: null,text: ''};
obj.value = item.id;
obj.text = item.name;
range.push(obj);
})
this.areaRange = range
})
},
getVisitItem() {
this.$u.api.visitItem(this.visitId).then(res => {
this.formData = res;
})
},
getDate() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
this.formData.time=year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds;
},
bindStartDateChange: function(e) {
this.formData.start_time = e.detail.value
},
bindEndDateChange: function(e) {
this.formData.end_time = e.detail.value
},
nextHandle(type) {
let that = this;
if (!that.paramsCheck()) {
return;
} else {
debugger;
if (that.formData.id) {
that.$u.api.visitUpdate(that.formData.id, that.formData).then(res => {
if (res.err_msg) {
} else {
let params = `?visit=${that.formData.id}`;
uni.navigateTo({
url: '/pages/workSpace/visit/vpeopleList'+params
})
}
})
} else {
that.$u.api.visitCreate(that.formData).then(res => {
if (res.err_msg) {
} else {
let params = `?visit=${res.id}`;
uni.navigateTo({
url: '/pages/workSpace/visit/vpeopleList'+params
})
}
})
}
}
},
purposeChange(item){
let that = this;
debugger;
console.log(item)
if(item===50){
that.formData.receptionist = '';
that.formData.company = '';
that.formData.description = '';
that.formData.name = '货车司机出入';
that.formData.level = 10;
}else{
that.formData.name = '';
}
},
/* 参数验证 */
paramsCheck() {
if (!nonNullCheck(this.formData.purpose)) {
uni.showToast({
title: '请输入来访事由',
icon: "none"
})
return false;
}
if (!nonNullCheck(this.formData.name)) {
uni.showToast({
title: '请输入来访概述',
icon: "none"
})
return false;
}
if (!nonNullCheck(this.formData.visit_time)) {
uni.showToast({
title: '请选择来访时间',
icon: "none"
})
return false;
}
if (!nonNullCheck(this.formData.leave_time)) {
uni.showToast({
title: '请选择离开时间',
icon: "none"
})
return false;
}
if (!nonNullCheck(this.formData.receptionist)) {
uni.showToast({
title: '请选择接待人人',
icon: "none"
})
return false;
}
if (!nonNullCheck(this.formData.level)) {
uni.showToast({
title: '请选择访问级别',
icon: "none"
})
return false;
}
if (!nonNullCheck(this.formData.count_people)) {
uni.showToast({
title: '请填写来访人数',
icon: "none"
})
return false;
}
return true;
},
goBack() {
uni.navigateBack({
delta: 1
})
},
handleClick(){
this.goBack();
},
}
}
</script>
<style scoped>
.qingjia-apply {
background-color: #f3fbff;
padding-bottom: 227rpx;
}
/* >>>.uni-status-bar {
height: 0 !important;
} */
>>>.uni-navbar-btn-text text {
font-size: 32rpx !important;
}
.apply-info {
width: 720rpx;
margin: 0 auto;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 25rpx 32rpx;
box-sizing: border-box;
margin-top: 24rpx;
}
.border-bottom {
border-bottom: 1rpx solid #eeeeee;
}
.star {
color: red;
}
.top-title-text {
padding-left: 24rpx;
position: relative;
font-family: PingFang-SC-Medium;
font-size: 34rpx;
line-height: 72rpx;
color: #383838;
}
.top-title-text::before {
content: "";
width: 6rpx;
height: 29rpx;
background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%);
border-radius: 3rpx;
display: block;
position: absolute;
left: -4rpx;
top: 22rpx;
}
.form-item {
/* display: flex; */
font-family: PingFang-SC-Medium;
font-size: 30rpx;
/* line-height: 97rpx; */
height: 200rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.form-left-text {
color: #212121;
margin-bottom: 33rpx;
}
.form-left {
/* min-width: 160rpx; */
width: 100%;
}
.form-right {
margin-left: 20rpx;
flex: 1;
color: #414141;
}
.form-right input {
/* height: 100%; */
/* height: 60rpx; */
font-size: 30rpx;
}
.form-date>>>.uni-date__x-input {
height: 97rpx;
font-size: 30rpx;
}
.form-date>>>.uni-icons {
display: none;
}
.qingjia-apply>>>uni-input {
/* height: 100%; */
font-size: 30rpx;
}
.apply-reason-text {
width: 653rpx;
height: 179rpx;
background-color: #f6f8fc;
border: solid 1rpx #e5e5e5;
margin-top: 21rpx;
padding: 14rpx 24rpx;
font-size: 26rpx;
box-sizing: border-box;
}
.apply_require {
margin-top: 0rpx !important;
}
.file-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding-top: 13rpx;
}
.file-wrap {
margin-top: 20rpx;
margin-right: 20rpx;
}
.file-item {
width: 155rpx;
height: 155rpx;
border: solid 1rpx #e5e5e5;
text-align: center;
display: flex;
align-items: center;
position: relative;
}
.file-content {
width: 100%;
}
.file-item .file-icon {
width: 37rpx;
height: 37rpx;
}
.file-item .file-name {
font-family: PingFang-SC-Regular;
font-size: 20rpx;
line-height: 17rpx;
color: #313131;
margin-top: 11rpx;
padding: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-item>>>.uni-icons {
width: 26rpx;
height: 26rpx;
position: absolute;
right: -8rpx;
top: -22rpx;
/*
background-color: #d81e06;
border-radius: 50%;
font-size: 20rpx !important;
padding: 5rpx;
*/
box-sizing: border-box;
}
.form-right {
flex: 1;
color: #414141;
}
/*部门*/
uni-data-picker {
width: 100%;
border: none !important;
}
.my-data-picker>>>.input-value-border {
border: none !important;
}
>>>.input-value {
font-size: 30rpx !important;
;
}
.my-data-picker uni-data-picker {
width: 100% !important;
}
.my-data-picker {
width: 100%;
display: flex;
align-items: center;
margin-left: -10rpx;
}
/* 主体 */
>>>.uni-navbar__header,
>>>.uni-status-bar {
background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#e60012, #e60012) !important;
}
hongtouwenjian-top {
box-sizing: border-box;
padding-top: 24rpx;
padding-right: 15rpx;
padding-bottom: 20rpx;
padding-left: 15rpx;
}
.hongtouwenjian-top-c {
background-color: #ffffff;
border-radius: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
display: flex;
flex-direction: column;
}
.hongtouwenjian-top-c-title {
display: flex;
align-items: center;
height: 85rpx;
border-bottom: 1px solid #eeeeee;
}
.hongtouwenjian-top-c-title-mark {
width: 6rpx;
height: 29rpx;
background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#f3fbff, #f3fbff);
background-blend-mode: normal, normal;
border-radius: 3rpx;
}
.hongtouwenjian-top-c-title-txt {
font-size: 34rpx;
color: #383838;
}
.hongtouwenjian-top-c-item {
/* display: flex; */
align-items: center;
/* height: 100rpx; */
border-bottom: 1px solid #EEEEEE;
box-sizing: border-box;
padding-left: 3rpx;
padding-right: 12rpx;
width: 100%;
line-height: 97rpx;
}
.hongtouwenjian-top-c-item:last-child {
border-bottom: none;
}
.hongtouwenjian-top-c-item-left {
display: flex;
align-items: center;
width: 164rpx;
}
.hongtouwenjian-top-c-item-left-mark {
font-size: 30rpx;
color: #f00808;
}
.hongtouwenjian-top-c-item-left-txt {
font-size: 30rpx;
color: #212121;
}
.hongtouwenjian-top-c-item-middle {
margin-left: 20rpx;
flex: 1;
display: flex;
align-items: center;
height: 100%;
}
.hongtouwenjian-top-c-item-middle-txt {
font-size: 30rpx;
color: #414141;
}
.hongtouwenjian-top-c-item-middle-input {
padding: 0;
margin: 0;
outline: none;
border: none;
background-color: transparent;
width: 100%;
/* height: 100%; */
height: 60rpx;
font-size: 30rpx;
color: #414141;
display: flex;
align-items: center;
}
.hongtouwenjian-top-c-item-right {
width: 22rpx;
height: 25rpx;
}
.hongtouwenjian-addbtn {
display: flex;
justify-content: flex-end;
box-sizing: border-box;
padding-right: 19rpx;
}
.hongtouwenjian-addbtn-w {
padding: 0;
margin: 0;
outline: none;
background-color: transparent;
width: 90rpx;
height: 46rpx;
line-height: 46rpx;
text-align: center;
background-color: #0075ff;
border-radius: 10rpx;
font-size: 26rpx;
color: #f3fbff;
}
/* 物品列表 */
.fixed-assets-listBig {
width: 100%;
padding: 0 20rpx;
box-sizing: border-box;
margin-bottom: 20rpx;
}
.fixed-assets-list {
width: 100%;
background-color: #FFFFFF;
padding: 0 20rpx;
box-sizing: border-box;
}
.fixed-assets-list .apply-info {
padding-top: 0rpx;
}
.fixed-assets-list .top {
height: 108rpx;
line-height: 108rpx;
border-bottom: 1rpx solid #eeeeee;
display: flex;
justify-content: space-between;
align-items: center;
}
.fixed-assets-list .top-left-text {
flex: 1;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
font-size: 30rpx;
color: #212121;
}
.fixed-assets-list .top-right image {
width: 26rpx;
height: 28rpx;
vertical-align: middle;
}
.fixed-assets-list .top-right view {
height: auto;
padding-left: 10rpx;
font-size: 26rpx;
color: #8b8b8b;
}
/* .fixed-assets-list .bottomBig{
width: 100%;
} */
.fixed-assets-list .bottom {
/* display: flex;
justify-content: space-between;
align-items: center; */
padding-top: 25rpx;
font-size: 28rpx;
color: #616161;
line-height: 72rpx;
}
.fixed-assets-list .bottom-left+.bottom-right {
width: 50%;
}
/* 文件上传进度样式*/
.u-progress-content {
display: flex;
align-items: center;
justify-content: center;
}
.u-progress-dot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background-color: #fb9126;
}
.u-progress-info {
font-size: 24rpx;
padding-left: 10rpx;
letter-spacing: 2rpx
}
.is-hidden {
visibility: hidden;
}
.title {
font-size: 14px;
font-weight: bold;
margin: 20px 0 5px 0;
}
.data-pickerview {
height: 400px;
border: 1px #e5e5e5 solid;
}
.popper__arrow {
top: -6px;
left: 50%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
.popper__arrow {
top: -6px;
left: 50%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #EBEEF5;
}
</style>