<template>
|
<view class="pages-task-add">
|
<uni-nav-bar :fixed="true" status-bar right-text="" left-text="" leftWidth="72rpx" rightWidth="72rpx"
|
:title="navigationBarTitle">
|
<view class="uni-navbar-container-inner">
|
<text class="uni-nav-bar-text">{{navigationBarTitle }}</text>
|
</view>
|
<template v-slot:right>
|
<view class="uni-navbar-btn-text">
|
<a @click="clickSave" class="uni-nav-bar-right-text">
|
保存
|
</a>
|
</view>
|
</template>
|
<template v-slot:left>
|
<view class="uni-navbar-btn-text">
|
<a @click="clickCancel" class="uni-nav-bar-left-text">
|
取消
|
</a>
|
</view>
|
|
</template>
|
</uni-nav-bar>
|
<view class="content">
|
<view class="header">任务属性</view>
|
<view class="group">
|
<view class="item">
|
<view>名称：</view>
|
<input class="right-input" placeholder="输入任务名称" v-model="info.taskGroupName" />
|
</view>
|
<view class="item">
|
<view>属性：</view>
|
<view class="right" v-if="info.tasktype > 0">{{info.tasktype ==1 ? '固定':'临时'}}</view>
|
<view class="right" v-else>选择属性</view>
|
<a @click="clickType">
|
<uni-icons class="icon" type="right" size="20"></uni-icons>
|
</a>
|
</view>
|
<view class="item" v-if="info.tasktype == 1">
|
<view>循环次数：</view>
|
<input class="right-input" type="number" :value="info.cycleTime" :maxlength="4"
|
@input="onInputCycleTime" />
|
</view>
|
<view class="item">
|
<view>按钮号：</view>
|
<view class="right">{{info.taskButton ?info.taskButton:""}}</view>
|
<a @click="clickTaskButton">
|
<uni-icons class="icon" type="right" size="20"></uni-icons>
|
</a>
|
</view>
|
</view>
|
<view class="header">任务路线</view>
|
<view class="group">
|
|
<uni-swipe-action class="list">
|
<uni-swipe-action-item class="list-item" v-for="(item,index) in pathwayList" :key="index"
|
:auto-close="true">
|
<view class="item">
|
<view>目标点{{index+1}}：</view>
|
<view class="right"></view>
|
<a @click.stop="(e)=>{ this.clickPathwayPoint(e,index,'stationID')}">
|
{{item.stationID ?stationName(item.stationID) : "目标点"}}
|
|
</a>
|
<a @click.stop="(e)=>{ clickPathwayPoint(e,index,'actionType')}">
|
{{actionTypeText(item.actionType)}}
|
</a>
|
<view v-if="item.actionType === 3">
|
<a @click.stop="()=>{item.wait = 0}" v-if="item.wait===undefined">
|
等待时间
|
</a>
|
<view v-else class="time"> <input class="input" type="number" v-model="item.wait"
|
:maxlength="4" />秒</view>
|
</view>
|
</view>
|
<template v-slot:right>
|
<view class="btn-del" @click="clickDelPathWay(index)">删除</view>
|
</template>
|
</uni-swipe-action-item>
|
</uni-swipe-action>
|
<view class="item">
|
<a-button class="button" @click="clickAddPathway">+ 添加目标点
|
</a-button>
|
</view>
|
</view>
|
</view>
|
<view>
|
<uni-popup ref="refPopupMenu" background-color="transparent" maskBackgroundColor="rgba(0, 0, 0, 0.2)">
|
<view class="popup-content" @click="closeMenu">
|
<picker-view class="popup-content-view"
|
:style="{'margin-top':pickerView.top +'px','margin-right': pickerView.right +'px'}"
|
:indicator-style="indicatorStyle" :value="pickerView.value" @change="bindPickerChange">
|
<picker-view-column>
|
<view class="item" v-for="(item,index) in pickerView.list" :key="index">{{item.name}}</view>
|
</picker-view-column>
|
|
</picker-view>
|
</view>
|
</uni-popup>
|
</view>
|
</view>
|
</template>
|
<script>
|
import {
|
showToast,
|
showModal
|
} from "@/comm/utils.js"
|
import {
|
Button
|
} from 'antd-mobile-vue-next'
|
import {
|
stations,
|
addTask,
|
delTask,
|
|
} from "@/api/vehicle.js"
|
import {
|
v4 as uuidv4
|
} from 'uuid';
|
export default {
|
name: "PagesTaskAdd",
|
components: {
|
'a-button': Button
|
},
|
data() {
|
return {
|
indicatorStyle: `height: 75rpx;`,
|
ip: '',
|
navigationBarTitle: '新增任务',
|
info: {
|
taskGroupName: "",
|
cycleTime: 1,
|
taskButton: 0,
|
},
|
pathwayList: [{}],
|
pickerView: {
|
type: "",
|
list: [],
|
value: []
|
},
|
stationList: [],
|
windowSize: {},
|
|
|
actionList: [{
|
name: "导航",
|
type: 1,
|
}, {
|
name: "取货",
|
type: 2,
|
}, {
|
name: "卸货",
|
type: 3,
|
}, {
|
name: "人工",
|
type: 4,
|
}]
|
}
|
},
|
computed: {
|
|
},
|
|
onLoad(option) {
|
const _this = this
|
this.navigationBarTitle = option.title || "新增任务"
|
this.ip = option.ip || ""
|
uni.getSystemInfo({
|
success(e) {
|
_this.windowSize = {
|
width: e.windowWidth,
|
height: e.windowHeight - (e.statusBarHeight || 0)
|
}
|
},
|
|
})
|
this.loadStations()
|
},
|
methods: {
|
setData(obj) {
|
let that = this;
|
let keys = [];
|
let val, data;
|
|
Object.keys(obj).forEach(function(key) {
|
keys = key.split(".");
|
val = obj[key];
|
data = that.$data;
|
keys.forEach(function(key2, index) {
|
if (index + 1 == keys.length) {
|
that.$set(data, key2, val);
|
} else {
|
if (!data[key2]) {
|
that.$set(data, key2, {});
|
}
|
}
|
data = data[key2];
|
});
|
});
|
},
|
async loadStations() {
|
try {
|
const info = await stations(this.ip)
|
this.stationList = info.station_list || []
|
} catch (ex) {
|
this.showError(ex)
|
}
|
},
|
async clickSave() {
|
try {
|
const name = this.info.taskGroupName.trim()
|
if (!name) {
|
showToast("未输入任务名称！")
|
return
|
}
|
if (!this.info.tasktype) {
|
showToast("未选择任务属性！")
|
return
|
}
|
const taskList = []
|
const task = {
|
taskGroupID: uuidv4(),
|
taskGroupName: name,
|
cycleTime: parseInt(this.info.cycleTime),
|
taskButton: this.info.taskButton,
|
tasktype: this.info.tasktype,
|
taskList: []
|
}
|
const taskStartTimeStamp = `${new Date().getTime()}`
|
|
this.pathwayList.forEach((item) => {
|
if (item.stationID) {
|
task.taskList.push({
|
stationID: item.stationID,
|
actionType: item.actionType || 0,
|
wait: parseInt(item.wait) || 0,
|
taskStartTimeStamp,
|
})
|
const dest = this.stationList.find((a) => a.stationID == item.stationID)
|
taskList.push({
|
stationID: item.stationID,
|
actionType: item.actionType || 0,
|
dest: dest || {},
|
taskStartTimeStamp,
|
|
})
|
}
|
})
|
if (taskList.length == 0) {
|
showToast("目标点未选择站台！")
|
return
|
}
|
await addTask(this.ip, task)
|
task.taskList = taskList
|
const eventChannel = this.getOpenerEventChannel();
|
eventChannel.emit('add_task', task);
|
uni.navigateBack({
|
delta: 1, //返回层数，2则上上页
|
})
|
} catch (ex) {
|
this.showError(ex)
|
}
|
},
|
clickCancel() {
|
let flag = false
|
if (this.info.taskGroupName.trim()) {
|
flag = true
|
} else if (this.info.taskButtonn) {
|
flag = true
|
} else if (this.info.tasktype) {
|
flag = true
|
} else if (this.info.cycleTime > 1) {
|
flag = true
|
} else if (this.pathwayList.length > 0) {
|
this.pathwayList.forEach((ele) => {
|
if (ele.stationID)
|
flag = true
|
})
|
|
}
|
if (flag) {
|
|
showModal(`当前编辑的内容将不会被保存`, "确定要退出编辑吗?").then((res) => {
|
if (res) {
|
uni.navigateBack({
|
delta: 1, //返回层数，2则上上页
|
})
|
}
|
})
|
} else {
|
uni.navigateBack({
|
delta: 1, //返回层数，2则上上页
|
})
|
}
|
|
|
},
|
stationLst(id) {
|
const list = []
|
|
const list3 = [...this.pathwayList]
|
|
this.stationList.forEach((item) => {
|
let curIndex
|
if (id) {
|
if (item.stationID != id) {
|
curIndex = list3.findIndex((a) => a.stationID == item.stationID)
|
} else {
|
curIndex = -1
|
}
|
} else {
|
curIndex = list3.findIndex((a) => a.stationID == item.stationID)
|
}
|
if (curIndex < 0) {
|
list.push(item)
|
}
|
})
|
return list
|
},
|
stationName(id) {
|
const curIndex = this.stationList.findIndex((a) => a.stationID == id)
|
if (curIndex > -1) {
|
return this.stationList[curIndex].name
|
}
|
return ""
|
|
},
|
actionTypeText(type) {
|
if (type > 0) {
|
const curIndex = this.actionList.findIndex((a) => a.type == type)
|
if (curIndex > -1) {
|
return this.actionList[curIndex].name
|
} else {
|
return "操作"
|
}
|
} else {
|
return "操作"
|
}
|
},
|
|
clickPathwayPoint(e, index, type) {
|
let top = e.target.offsetTop + 30
|
if (this.windowSize.height > 0) {
|
if (e.detail.y + 180 > this.windowSize.height) {
|
top = e.detail.y - 180
|
}
|
}
|
let right = 0
|
const item = this.pathwayList[index]
|
if (type == "stationID") {
|
|
const list = this.stationLst(item.stationID)
|
let index2 = 0
|
if (list.length > 0) {
|
if (item.stationID) {
|
index2 = list.findIndex((a) => a.stationID == item.stationID)
|
if (index2 < 0) {
|
item.stationID = list[0].stationID
|
index2 = 0
|
}
|
|
} else {
|
item.stationID = list[0].stationID
|
index2 = 0
|
}
|
}
|
if (this.windowSize.width > 0) {
|
right = this.windowSize.width - e.detail.x
|
}
|
this.pickerView = {
|
type: "pathwayPoint",
|
list,
|
value: [index2],
|
index,
|
top,
|
right,
|
}
|
this.$refs.refPopupMenu.open("right")
|
} else if (type == "actionType") {
|
if (this.windowSize.width > 0) {
|
right = this.windowSize.width - e.detail.x
|
}
|
|
let index2 = 0
|
if (item.actionType)
|
index2 = this.actionList.findIndex((a) => a.type == item.actionType)
|
if (index2 < 0)
|
index2 = 0
|
item.actionType = this.actionList[index2].type
|
this.pickerView = {
|
type: "pathwayPointActionType",
|
list: this.actionList,
|
value: [index2],
|
index,
|
top,
|
right,
|
}
|
this.$refs.refPopupMenu.open("right")
|
}
|
|
},
|
|
|
clickType(e) {
|
if (!this.info.tasktype) {
|
this.info.tasktype = 1
|
}
|
this.pickerView = {
|
type: "type",
|
list: [{
|
name: "固定"
|
}, {
|
name: "临时"
|
}],
|
value: [this.info.tasktype - 1],
|
top: e.target.offsetTop + 30,
|
right: 0,
|
}
|
this.$refs.refPopupMenu.open("right")
|
|
},
|
bindPickerChange(e) {
|
const val = e.detail.value
|
const val2 = val[0]
|
if (this.pickerView.type == "type") {
|
this.info.tasktype = val2 + 1
|
} else if (this.pickerView.type == "pathwayPoint") {
|
this.pathwayList[this.pickerView.index].stationID = this.pickerView.list[val2].stationID
|
} else if (this.pickerView.type == "pathwayPointActionType") {
|
this.pathwayList[this.pickerView.index].actionType = this.pickerView.list[val2].type
|
} else if (this.pickerView.type == "taskButton") {
|
this.info.taskButton = val2 + 1
|
}
|
},
|
clickAddPathway() {
|
this.pathwayList.push({})
|
},
|
clickDelPathWay(index) {
|
if (this.pathwayList.length > 1) {
|
this.pathwayList.splice(index, 1)
|
} else {
|
showToast("必须有一个目标点")
|
}
|
},
|
onInputCycleTime(event) {
|
this.info.cycleTime = event.detail.value;
|
},
|
clickTaskButton(e) {
|
const list = []
|
for (let i = 1; i < 100; i++) {
|
list.push({
|
name: i
|
})
|
}
|
if (!this.info.taskButton) {
|
this.info.taskButton = 1
|
}
|
this.pickerView = {
|
type: "taskButton",
|
list,
|
value: [this.info.taskButton - 1],
|
top: e.target.offsetTop + 30,
|
right: 0,
|
}
|
|
this.$refs.refPopupMenu.open("right")
|
},
|
closeMenu() {
|
this.$refs.refPopupMenu.close()
|
},
|
showError(ex) {
|
let exStr = JSON.stringify(ex)
|
if (exStr == "{}")
|
exStr = ex
|
let tip = typeof ex.msg == "string" ? ex.msg : exStr
|
showModal(tip, "错误", false)
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.pages-task-add {
|
display: flex;
|
width: 750rpx;
|
height: 100vh;
|
flex-direction: column;
|
background-color: #F8F8F8;
|
|
.content {
|
width: 750rpx;
|
display: flex;
|
flex-direction: column;
|
flex: 1;
|
}
|
|
.header {
|
margin: 10rpx 30rpx;
|
}
|
|
.group {
|
width: calc(100% - 60rpx);
|
// border: 1px solid #ccc;
|
border-radius: 20rpx;
|
margin: 10rpx 20rpx;
|
padding: 0 10rpx;
|
display: flex;
|
flex-direction: column;
|
background-color: #fff;
|
font-size: 30rpx;
|
|
.item {
|
width: calc(100% - 20rpx);
|
padding: 20rpx 10rpx;
|
display: flex;
|
flex-direction: row;
|
|
.right {
|
flex: 1;
|
text-align: right;
|
color: #888;
|
padding-right: 5px;
|
|
}
|
|
|
|
.right-input {
|
text-align: right;
|
flex: 1;
|
}
|
|
.text {
|
flex: 1;
|
color: #888;
|
|
}
|
|
.icon {
|
color: #888;
|
}
|
|
a {
|
margin-left: 20rpx;
|
}
|
|
.time {
|
display: flex;
|
flex-direction: row;
|
margin-left: 20rpx;
|
|
.input {
|
width: 75rpx;
|
}
|
}
|
}
|
|
.btn-del {
|
display: flex;
|
padding: 0 10rpx;
|
background-color: #FF4D4F;
|
font-weight: 700;
|
color: #fff;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.line {
|
border-bottom: 2rpx solid #ccc;
|
}
|
}
|
|
.button {
|
margin: auto;
|
width: 700rpx;
|
color: #1890FF;
|
}
|
|
.popup-content {
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
background-color: transparent;
|
}
|
|
.popup-content-view {
|
width: 150px;
|
height: 150px;
|
border-radius: 10rpx;
|
padding: 10rpx 20rpx;
|
background-color: #fff;
|
|
.item {
|
line-height: 75rpx;
|
text-align: center;
|
border: 0;
|
|
}
|
}
|
}
|
</style>
|
