575 lines
14 KiB
Vue
575 lines
14 KiB
Vue
<template>
|
||
<view class="operation-body">
|
||
<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="form-info">
|
||
<view class="form-left-text">
|
||
<text class="star">*</text>
|
||
<text>作业简介</text>
|
||
</view>
|
||
<textarea class="apply-reason-text" v-model="formData.name" maxlength="250" placeholder="请输入" />
|
||
</view>
|
||
<view class="form-info">
|
||
<view class="form-content ">
|
||
<view class="form-item border-bottom">
|
||
<view class="form-left">
|
||
<text class="form-left-text">具体地点</text>
|
||
</view>
|
||
<view class="form-right">
|
||
<input type="text" v-model="formData.place" 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 form-date">
|
||
<view class="form-right form-date">
|
||
<uni-datetime-picker
|
||
v-model="datetimerange"
|
||
type="datetimerange"
|
||
rangeSeparator="至"
|
||
:hide-second="true"
|
||
/>
|
||
</view>
|
||
</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.state_work" :localdata="stateRange">
|
||
</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="range" @change="areaChange">
|
||
</uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="form-item border-bottom">
|
||
<view class="form-left">
|
||
<text class="form-left-text">监控相机</text>
|
||
</view>
|
||
<view class="form-right">
|
||
<uni-data-select v-model="formData.vchannel" :localdata="vchannelOptions">
|
||
</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">
|
||
<ba-tree-picker ref="dept_ter_Picker" :multiple='false' @select-change="select_dept_ter_Change" title="请选择属地部门"
|
||
:localdata="depRange" valueKey="id" textKey="name" childrenKey="children" />
|
||
<view @click="showDeptTerPicker" style="position: relative;display: flex;">
|
||
<text type="text">{{dept_ter_name}}</text>
|
||
<uni-icons style="position: absolute; right: 0;" type="arrowright" color="#999999"/>
|
||
</view>
|
||
</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">
|
||
<ba-tree-picker ref="treePicker" :multiple='false' @select-change="selectChange" title="选择业务部门"
|
||
:localdata="depRange" valueKey="id" textKey="name" childrenKey="children"/>
|
||
<view @click="showPicker" style="position: relative;display: flex;">
|
||
<text type="text">{{dept_bus_name}}</text>
|
||
<uni-icons style="position: absolute; right: 0;" @click="showPicker" type="arrowright" color="#999999"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="form-item border-bottom">
|
||
<view class="form-left" @click="selectUser">
|
||
<text class="star">*</text>
|
||
<text class="form-left-text">部门协调员</text>
|
||
</view>
|
||
<view class="form-right">
|
||
<ba-tree-picker ref="dcoordinator_Picker" :multiple='false' @select-change="select_coordinator_Change" title="选择部门协调员"
|
||
:localdata="vuex_userRange" valueKey="id" textKey="name" childrenKey="children" :selectParent='false'/>
|
||
<view @click="showDcoordinatorPicker" style="position: relative;display: flex;">
|
||
<text type="text">{{dcoordinator_name}}</text>
|
||
<uni-icons style="position: absolute; right: 0;" @click="showDcoordinatorPicker" type="arrowright" color="#999999"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btn" v-if="showBtns">
|
||
<button type="primary" class="save-btn" @click="saveSubmit">下一步</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
var that;
|
||
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: "operation",
|
||
components: {
|
||
baTreePicker
|
||
},
|
||
data() {
|
||
return {
|
||
formData: {
|
||
name: '', //作业简述
|
||
// state: '', //作业状态
|
||
place: '', //具体地点
|
||
start_time: '', //作业开始时间
|
||
end_time: '', //作业结束时间
|
||
state_work: '', //生产状态
|
||
area: null, //作业区域
|
||
dept_ter: '', //属地部门
|
||
dept_bus: '', //业务部门
|
||
coordinator: '', //业务部门协调员
|
||
},
|
||
dept_bus_name:'请选择业务部门',
|
||
dept_ter_name:'请选择属地部门',
|
||
dcoordinator_name:'请选择部门协调员',
|
||
datetimerange: [],
|
||
userRange: [],
|
||
vchannelOptions: [],
|
||
//作业区域
|
||
range: [],
|
||
//生产状态
|
||
stateRange: [{
|
||
value: '运行',
|
||
text: "运行"
|
||
},
|
||
{
|
||
value: '停机',
|
||
text: "停机"
|
||
},
|
||
{
|
||
value: '检修',
|
||
text: "检修"
|
||
},
|
||
],
|
||
//部门
|
||
depRange: [],
|
||
}
|
||
},
|
||
watch: {
|
||
datetimerange(newval) {
|
||
this.formData.start_time = this.datetimerange[0]
|
||
this.formData.end_time = this.datetimerange[1]
|
||
},
|
||
},
|
||
onLoad(params) {
|
||
if(params.operationId){
|
||
this.operationId = params.operationId;
|
||
this.type = params.type;
|
||
this.getOperation();
|
||
if(params.type==='edit'){
|
||
this.showBtns = true;
|
||
}else{
|
||
this.showBtns = false;
|
||
}
|
||
}else{
|
||
this.showBtns = true;
|
||
}
|
||
},
|
||
onShow() {
|
||
this.range = [];
|
||
this.getdept();
|
||
this.getRange();
|
||
},
|
||
methods: {
|
||
showPicker() {
|
||
this.$refs.treePicker._show();
|
||
},
|
||
showDeptTerPicker(){
|
||
this.$refs.dept_ter_Picker._show();
|
||
},
|
||
showDcoordinatorPicker(){
|
||
this.$refs.dcoordinator_Picker._show();
|
||
},
|
||
cancel(){
|
||
this.$refs.treePicker._hide();
|
||
},
|
||
//监听选择（ids为数组）
|
||
selectChange(ids, names) {
|
||
// debugger;
|
||
// console.log(ids, names);
|
||
this.formData.dept_bus = ids[0];
|
||
this.dept_bus_name = names;
|
||
},
|
||
select_coordinator_Change(ids, names){
|
||
this.formData.coordinator = ids[0];
|
||
this.dcoordinator_name = names;
|
||
},
|
||
select_dept_ter_Change(ids, names){
|
||
this.formData.dept_ter = ids[0];
|
||
this.dept_ter_name = names;
|
||
},
|
||
areaChange(val) {
|
||
this.getVchannelOptions(val)
|
||
this.getAreaDept(val)
|
||
},
|
||
getVchannelOptions(val) {
|
||
if(val==null || val==''){
|
||
return
|
||
}
|
||
this.$u.api.tdevice({area: val, type: 60, page: 0}).then(res=>{
|
||
let vchannelOptions = [];
|
||
let obj = {};
|
||
res.forEach(item => {
|
||
obj = {
|
||
value: null,
|
||
text: ''
|
||
};
|
||
obj.value = item.id;
|
||
obj.text = item.name;
|
||
vchannelOptions.push(obj);
|
||
})
|
||
this.vchannelOptions = vchannelOptions
|
||
})
|
||
},
|
||
getAreaDept(val){
|
||
if(val==null || val==''){
|
||
return
|
||
}
|
||
this.$u.api.areaDetail(val).then(res=>{
|
||
this.formData.dept_ter = res.belong_dept
|
||
})
|
||
},
|
||
//获取工作operation
|
||
getOperation() {
|
||
// debugger;
|
||
let that = this;
|
||
that.$u.api.operationItem(that.operationId).then((res) => {
|
||
that.formData.id = res.id; //
|
||
that.formData.state = res.state;
|
||
that.formData.name = res.name; //
|
||
that.formData.place = res.place; //
|
||
that.formData.state_work = res.state_work; //
|
||
that.formData.area = res.area; //
|
||
that.getVchannelOptions(res.area)
|
||
that.formData.dept_bus = res.dept_bus; //
|
||
that.formData.coordinator = res.coordinator; //
|
||
that.formData.dept_ter = res.dept_ter; //
|
||
that.formData.start_time = res.start_time; //作业开始时间
|
||
that.formData.end_time = res.end_time; //作业结束时间
|
||
if(res.vchannels){
|
||
that.formData.vchannel = res.vchannels[0]
|
||
}
|
||
that.operationName = res.name; //作业
|
||
that.dept_ter_name = res.dept_ter_.name; //属地部门
|
||
that.dept_bus_name = res.dept_bus_.name; //业务部门
|
||
that.dcoordinator_name = res.coordinator_name; //部门协调员
|
||
that.datetimerange = [res.start_time, res.end_time]
|
||
});
|
||
},
|
||
saveSubmit() {
|
||
let that = this;
|
||
if (!that.paramsCheck()) {
|
||
return;
|
||
} else {
|
||
if(this.formData.vchannel){
|
||
this.formData.vchannels = [this.formData.vchannel]
|
||
}
|
||
if(this.formData.id){
|
||
if(this.formData.state!=10){
|
||
uni.navigateTo({
|
||
url: '/pages/workSpace/operation/oplCate?operationId='+this.formData.id
|
||
})
|
||
}else{
|
||
|
||
this.$u.api.operationUpdate(this.formData.id,this.formData).then(res => {
|
||
let params = `?operationId=${res.id}`;
|
||
uni.navigateTo({
|
||
url: '/pages/workSpace/operation/oplCate'+params
|
||
})
|
||
})
|
||
}
|
||
}else{
|
||
this.$u.api.operationCreat(this.formData).then(res => {
|
||
let params = `?operationId=${res.id}`;
|
||
uni.navigateTo({
|
||
url: '/pages/workSpace/operation/oplCate'+params
|
||
})
|
||
})
|
||
}
|
||
|
||
}
|
||
},
|
||
//获取dept
|
||
getdept() {
|
||
let that = this;
|
||
that.$u.api.deptList({page: 0}).then(res => {
|
||
that.depRange = resetData(res);
|
||
})
|
||
},
|
||
//获取作业区域
|
||
getRange() {
|
||
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.range = range
|
||
})
|
||
},
|
||
/* 参数验证 */
|
||
paramsCheck() {
|
||
if (!nonNullCheck(this.formData.name)) {
|
||
uni.showToast({
|
||
title: '请填写作业简介',
|
||
icon: "none"
|
||
})
|
||
return false;
|
||
}
|
||
if (!nonNullCheck(this.formData.start_time)) {
|
||
uni.showToast({
|
||
title: '请选择开始时间',
|
||
icon: "none"
|
||
})
|
||
return false;
|
||
}
|
||
|
||
if (!nonNullCheck(this.formData.end_time)) {
|
||
uni.showToast({
|
||
title: '请选择结束时间',
|
||
icon: "none"
|
||
})
|
||
return false;
|
||
}
|
||
|
||
if (!nonNullCheck(this.formData.state_work)) {
|
||
uni.showToast({
|
||
title: '请选择生产状态',
|
||
icon: "none"
|
||
})
|
||
return false;
|
||
}
|
||
if (!nonNullCheck(this.formData.area)) {
|
||
uni.showToast({
|
||
title: '请选择作业区域',
|
||
icon: "none"
|
||
})
|
||
return false;
|
||
}
|
||
if (!nonNullCheck(this.formData.dept_bus)) {
|
||
uni.showToast({
|
||
title: '请选择业务部门',
|
||
icon: "none"
|
||
})
|
||
return false;
|
||
}
|
||
if (!nonNullCheck(this.formData.coordinator)) {
|
||
uni.showToast({
|
||
title: '请选择部门协调员',
|
||
icon: "none"
|
||
})
|
||
return false;
|
||
}
|
||
if (!nonNullCheck(this.formData.dept_ter)) {
|
||
uni.showToast({
|
||
title: '请选择属地部门',
|
||
icon: "none"
|
||
})
|
||
return false;
|
||
}
|
||
/* if (phoneRegular.test(this.formData.contactNumber) === false) {
|
||
uni.showToast({
|
||
title: '联系电话格式不对，请重新填写',
|
||
icon: "none"
|
||
})
|
||
return false;
|
||
} */
|
||
return true;
|
||
},
|
||
goBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
selectUser(){
|
||
uni.navigateTo({
|
||
url: '/pages/home/employeeSelect'
|
||
})
|
||
},
|
||
onnodeclick(e) {
|
||
console.log(e);
|
||
},
|
||
onpopupopened(e) {
|
||
console.log('popupopened');
|
||
},
|
||
onpopupclosed(e) {
|
||
console.log('popupclosed');
|
||
},
|
||
onchange(e) {
|
||
console.log('onchange:', e);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 主体 */
|
||
>>>.uni-navbar__header,
|
||
>>>.uni-status-bar {
|
||
background-image: linear-gradient(90deg, #164cc3 0%, #2c6fd9 100%), linear-gradient(#e60012, #e60012) !important;
|
||
}
|
||
.operation-body {
|
||
background-color: #f3fbff;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
.operation-body>>>uni-input {
|
||
/* height: 100%; */
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
>>>.uni-navbar-btn-text text {
|
||
font-size: 32rpx !important;
|
||
}
|
||
|
||
.form-info {
|
||
width: 720upx;
|
||
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;
|
||
}
|
||
|
||
.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 {
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 30rpx;
|
||
height: 200rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
.form-left-text {
|
||
color: #212121;
|
||
margin-bottom: 33rpx;
|
||
}
|
||
|
||
.form-left {
|
||
width: 100%;
|
||
}
|
||
|
||
.form-right {
|
||
margin-left: 20rpx;
|
||
flex: 1;
|
||
color: #414141;
|
||
}
|
||
|
||
.form-right input {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.form-date>>>.uni-date__x-input {
|
||
height: 97rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.form-date>>>.uni-icons {
|
||
display: none;
|
||
}
|
||
|
||
|
||
.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;
|
||
}
|
||
|
||
.form-right {
|
||
flex: 1;
|
||
color: #414141;
|
||
}
|
||
|
||
/*部门*/
|
||
uni-data-picker {
|
||
width: 100%;
|
||
border: none !important;
|
||
}
|
||
|
||
|
||
.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>
|