<template>
|
<view>
|
|
<view class="card" v-for="item in form2">
|
<!-- head -->
|
<view class="card-head flex">
|
<view class="card-head-title">{{item.title}}</view>
|
</view>
|
<!-- body -->
|
<view class="card-body flex-column" v-for="subItem in item.info" v-show="!subItem.unshow">
|
<view class="flex"><text class="card-required" v-show="subItem.required">*</text>{{subItem.subTitle}}
|
</view>
|
<view class="flex">
|
<uni-combox :candidates="orderIds" placeholder="请选择项目" v-model="subItem.value"
|
@input="getOrderId(subItem.value)" v-show="subItem.inputType == 'chose'">
|
</uni-combox>
|
|
<view style="flex: 1;" v-show="subItem.inputType != 'chose'">
|
|
<input type="text" :placeholder="subItem.placeholder"
|
:placeholder-style="subItem.placeholderStyle" v-model="subItem.value"
|
:disabled="subItem.disabled" v-show="subItem.inputType != 'data'">
|
<uni-datetime-picker v-model="subItem.value" :border="false"
|
:red-color="subItem.placeholderStyle" v-if="subItem.inputType == 'data'" />
|
</view>
|
|
<view class="flex" style="width: 50rpx;" v-show="subItem.inputType == 'select'"
|
@click="showPicker(subItem.type)"><uni-icons type="right" color="#000"></uni-icons></view>
|
</view>
|
|
</view>
|
|
</view>
|
|
|
<u-picker :show="businessTransportationShow" :columns="businessTransportations"
|
@confirm="businessTransportationConfirm"></u-picker>
|
<u-picker :show="businessReturnShow" :columns="businessReturns" @confirm="businessReturnConfirm"></u-picker>
|
<u-picker :show="pcdShow" ref="uPicker" :columns="columns" @confirm="pcdStartConfirm" @change="changeHandler"
|
:defaultIndex="defaultIndex"></u-picker>
|
<u-picker :show="pcdEndShow" ref="uPicker" :columns="columns" @confirm="pcdEndConfirm" @change="changeHandler"
|
:defaultIndex="defaultIndex"></u-picker>
|
<u-picker :show="businessStartTimeDayShow" :columns="businessStartTimeDays"
|
@confirm="businessStartTimeDayConfirm"></u-picker>
|
<u-picker :show="businessEndTimeDayShow" :columns="businessEndTimeDays"
|
@confirm="businessEndTimeDayConfirm"></u-picker>
|
|
<view style="height: 120rpx;"></view>
|
|
<view class="floor">
|
<view class="default">重置</view>
|
<view class="primary" @click="submit()">提交</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import form from '../../../uni_modules/uview-ui/libs/config/props/form';
|
import data from '../../../static/js/citys-data.js'
|
export default {
|
data() {
|
return {
|
id: 0,
|
type: 'add',
|
orderIds: [],
|
orderId: '',
|
orderIdList: [],
|
year: '2021-5-3',
|
placeholderStyle: 'font-size:20rpx',
|
form: {
|
// businessTripReasons: ''
|
},
|
redColor: '',
|
columns: [],
|
defaultIndex: [],
|
citysData: data.citysData,
|
businessTransportationShow: false,
|
businessTransportations: [
|
['飞机', '高铁', '火车', '汽车', '摩托', '电车', '其他']
|
],
|
businessReturnShow: false,
|
businessReturns: [
|
['单程', '往返']
|
],
|
pcdShow: false,
|
pcdEndShow: false,
|
pcds: data.citysData,
|
businessStartTimeDayShow: false,
|
businessStartTimeDays: [
|
['上午', '下午']
|
],
|
businessEndTimeDayShow: false,
|
businessEndTimeDays: [
|
['上午', '下午']
|
],
|
form2: [{
|
title: '基本信息',
|
info: [{
|
subTitle: '项目名称',
|
placeholder: '请输入项目名称',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
submitVal: '',
|
type: 'orderId',
|
inputType: 'chose',
|
required: true,
|
unshow: false
|
},
|
{
|
subTitle: '出差事由',
|
placeholder: '请输入出差事由',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
submitVal: '出差事由',
|
type: 'businessTripReasons',
|
inputType: 'input',
|
required: true
|
},
|
]
|
},
|
{
|
title: '行程信息',
|
info: [{
|
subTitle: '交通工具',
|
placeholder: '请选择交通工具',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'businessTransportation',
|
inputType: 'select',
|
disabled: true,
|
required: true
|
},
|
{
|
subTitle: '单程往返',
|
placeholder: '请选择单程单程',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'businessReturn',
|
inputType: 'select',
|
disabled: true,
|
required: true
|
},
|
{
|
subTitle: '车牌号',
|
placeholder: '请输入车牌号',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'carNumber',
|
inputType: 'input',
|
required: true
|
},
|
{
|
subTitle: '行程明细及公里数',
|
placeholder: '请输入行程明细及公里数',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'kilometers',
|
inputType: 'input',
|
required: true
|
},
|
{
|
subTitle: '出发地',
|
placeholder: '请选择出发地',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'pcdStart',
|
inputType: 'select',
|
disabled: true,
|
required: true
|
},
|
{
|
subTitle: '出发地详细地址',
|
placeholder: '请输入出发地详细地址',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'businessStartAddr',
|
inputType: 'input',
|
required: true
|
},
|
{
|
subTitle: '目的地',
|
placeholder: '请选择目的地',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'pcdEnd',
|
inputType: 'select',
|
disabled: true,
|
required: true
|
},
|
{
|
subTitle: '目的地详细地址',
|
placeholder: '请输入目的地详细地址',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'businessEndAddr',
|
inputType: 'input',
|
required: true
|
},
|
]
|
},
|
{
|
title: '日期信息',
|
info: [{
|
subTitle: '出发日期',
|
placeholder: '请选择出发日期',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'businessStartTime',
|
inputType: 'data',
|
required: true
|
},
|
{
|
subTitle: '出发时辰',
|
placeholder: '请选择出发时辰',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'businessStartTimeDay',
|
inputType: 'select',
|
disabled: true,
|
required: true
|
},
|
{
|
subTitle: '结束日期',
|
placeholder: '请选择结束日期',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'businessEndTime',
|
inputType: 'data',
|
required: true
|
},
|
{
|
subTitle: '结束时辰',
|
placeholder: '请选择结束时辰',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'businessEndTimeDay',
|
inputType: 'select',
|
disabled: true,
|
required: true
|
}
|
]
|
},
|
{
|
title: '基本信息',
|
info: [{
|
subTitle: '同行人',
|
placeholder: '请输入同行人',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
type: 'businessPeers',
|
inputType: 'input',
|
required: true
|
},
|
{
|
subTitle: '备注',
|
placeholder: '备注信息',
|
placeholderStyle: 'font-size:20rpx',
|
value: '',
|
inputType: 'input',
|
type: 'businessNotes'
|
}
|
]
|
},
|
],
|
|
}
|
},
|
onLoad(option) {
|
let _this = this
|
const eventChannel = this.getOpenerEventChannel();
|
eventChannel.on('goBusinessDel', function(data) {
|
if (data.data == 'add') {
|
_this.getOrderId('')
|
}
|
})
|
// 项目跟踪传过来的
|
eventChannel.on('addType', function(data) {
|
if (data.data.comeFrom == 'saleManage') {
|
_this.form2[0].info[0].submitVal = data.data.orderId
|
_this.form2[0].info[0].unshow = true
|
_this.form2[0].info[0].required = false
|
}
|
})
|
// 修改页面回传
|
|
eventChannel.on('modiGoBusinessDetl', function(data) {
|
if (data.data == 'modi') {
|
_this.form2[0].info[0].unshow = true
|
_this.form2[0].info[0].required = false
|
_this.form2[0].info[0].submitVal = data.detl.orderId
|
_this.type = 'modi'
|
_this.id = data.detl.id
|
for (let item of _this.form2) {
|
for (let subItem of item.info) {
|
// 输入框直接赋值
|
if (subItem.inputType == 'input') {
|
subItem.value = data.detl[subItem.type]
|
} else if (subItem.inputType == 'select' || subItem.inputType == 'data') {
|
if (subItem.type == 'businessTransportation') {
|
subItem.value = _this.businessTransportations[0][data.detl[subItem.type] - 1]
|
subItem.submitVal = data.detl[subItem.type]
|
} else if (subItem.type == 'businessReturn') {
|
subItem.value = _this.businessReturns[0][data.detl[subItem.type]]
|
subItem.submitVal = data.detl[subItem.type]
|
} else if (subItem.type == 'businessStartTimeDay') {
|
subItem.value = _this.businessStartTimeDays[0][data.detl[subItem.type] - 1]
|
subItem.submitVal = data.detl[subItem.type]
|
} else if (subItem.type == 'businessEndTimeDay') {
|
subItem.value = _this.businessEndTimeDays[0][data.detl[subItem.type] - 1]
|
subItem.submitVal = data.detl[subItem.type]
|
} else if (subItem.type == 'pcdStart') {
|
subItem.value = data.detl.pcdStart$
|
subItem.submitVal = data.detl.pcdStart
|
} else if (subItem.type == 'pcdEnd') {
|
subItem.value = data.detl.pcdEnd$
|
subItem.submitVal = data.detl.pcdEnd
|
} else {
|
subItem.value = data.detl[subItem.type]
|
}
|
} else {
|
subItem.value = data.detl[subItem.type]
|
}
|
|
}
|
}
|
}
|
|
})
|
},
|
mounted() {
|
this.handlePcd();
|
},
|
methods: {
|
getOrderId(condition) {
|
let _this = this
|
uni.request({
|
url: `${_this.baseUrl}/orderQueryName/auth`,
|
sslVerify: false,
|
header: {
|
'token': uni.getStorageSync('token'),
|
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
|
},
|
method: 'POST',
|
data: {condition: condition},
|
success(res) {
|
res = res.data
|
_this.orderIds = []
|
_this.orderIdList = []
|
if (res.code === 200 && res.data) {
|
_this.orderIds2 = res.data
|
for (let k of res.data) {
|
_this.orderIds.push(k.value)
|
_this.orderIdList.push(k)
|
}
|
|
}
|
}
|
|
})
|
},
|
handlePcd() {
|
let sheng_s = '110000';
|
let shi_s = '110100';
|
let qu_s = '110101';
|
|
let sheng = [];
|
let shi = [];
|
let qu = [];
|
this.pcds.forEach((sheng_item, sheng_index) => {
|
if (sheng_item.value === sheng_s) {
|
this.defaultIndex[0] = sheng_index
|
sheng_item.children.forEach((shi_item, shi_index) => {
|
if (shi_item.value === shi_s) {
|
this.defaultIndex[1] = shi_index
|
shi_item.children.forEach((qu_item, qu_index) => {
|
if (qu_item.value === qu_s) {
|
this.defaultIndex[2] = qu_index
|
}
|
qu.push(qu_item.text);
|
})
|
}
|
shi.push(shi_item.text);
|
})
|
}
|
sheng.push(sheng_item.text);
|
});
|
this.columns.push(
|
JSON.parse(JSON.stringify(sheng)),
|
JSON.parse(JSON.stringify(shi)),
|
JSON.parse(JSON.stringify(qu))
|
);
|
},
|
changeHandler(e) {
|
const {
|
columnIndex,
|
value,
|
values, // values为当前变化列的数组内容
|
index,
|
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
picker = this.$refs.uPicker
|
} = e;
|
// console.log('测试数据', e);
|
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
if (columnIndex === 0) {
|
// console.log(value)
|
// picker为选择器this实例，变化第二列对应的选项
|
this.pcds.forEach(item => {
|
if (value[0] == item.text) {
|
let shi = [];
|
let flag = item.children[0].text;
|
item.children.forEach((val, ol) => {
|
shi.push(val.text);
|
if (shi[0] == flag) { //设置默认开关（选择省份后设置默认城市）
|
flag = '';
|
let qu = [];
|
val.children.forEach(vol => {
|
qu.push(vol.text);
|
});
|
picker.setColumnValues(2, qu);
|
}
|
});
|
picker.setColumnValues(1, shi);
|
}
|
});
|
}
|
//当第二列变化时，第三列对应变化
|
if (columnIndex === 1) {
|
this.pcds.forEach(item => {
|
if (value[0] == item.text) {
|
let shi = [];
|
item.children.forEach((val, ol) => {
|
shi.push(val.text);
|
if (value[1] == val.text) {
|
let qu = [];
|
val.children.forEach(vol => {
|
qu.push(vol.text);
|
});
|
picker.setColumnValues(2, qu);
|
}
|
});
|
}
|
});
|
}
|
},
|
submit() {
|
let subPass = true
|
for (let k of this.form2) {
|
for (let sub of k.info) {
|
console.log(sub);
|
if (sub.inputType == 'select') {
|
this.form[sub.type] = sub.submitVal
|
} else if (sub.inputType == 'chose') {
|
if (!sub.unshow) {
|
for (let odd of this.orderIdList) {
|
if (sub.value == odd.value) {
|
this.form[sub.type] = odd.id
|
}
|
}
|
} else {
|
this.form[sub.type] = sub.submitVal
|
}
|
} else {
|
this.form[sub.type] = sub.value
|
}
|
|
if (sub.required) {
|
sub.placeholderStyle = 'font-size:20rpx;'
|
if (sub.value == '' || (sub.submitVal == '' && sub.submitVal < 0)) {
|
sub.placeholderStyle = 'font-size:20rpx;color:red'
|
subPass = false
|
}
|
}
|
|
}
|
}
|
console.log(this.form);
|
// subPass 表单是否填写完成
|
if (subPass) {
|
if (this.type == 'add') {
|
this.formAdd(this.form)
|
} else {
|
this.form['id'] = this.id
|
this.formModi(this.form)
|
}
|
}
|
},
|
formAdd(form) {
|
let _this = this
|
uni.request({
|
url: `${_this.baseUrl}/businessTrip/add/auth`,
|
header: {
|
'token': uni.getStorageSync('token'),
|
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
},
|
sslVerify: false,
|
data: form,
|
method: 'POST',
|
success(res) {
|
res = res.data
|
if (res.code === 200) {
|
uni.showToast({title: '添加成功', icon: "none", position: 'top'})
|
setTimeout(()=>{
|
uni.navigateBack({})
|
},1000)
|
} else if (res.code === 500) {
|
uni.showToast({title: res.msg, icon: "none", position: 'top'})
|
} else {
|
|
}
|
}
|
|
|
})
|
},
|
formModi(form) {
|
let _this = this
|
uni.request({
|
url: `${_this.baseUrl}/businessTrip/update/auth`,
|
header: {
|
'token': uni.getStorageSync('token'),
|
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
|
},
|
sslVerify: false,
|
data: form,
|
method: 'POST',
|
success(res) {
|
res = res.data
|
if (res.code === 200) {
|
uni.showToast({title: '修改成功', icon: "none", position: 'top'})
|
setTimeout(()=>{
|
uni.navigateBack({delta:2})
|
},1000)
|
} else if (res.code === 500) {
|
uni.showToast({title: res.msg, icon: "none", position: 'top'})
|
} else {
|
|
}
|
}
|
|
|
})
|
},
|
showPicker(e) {
|
switch (e) {
|
case 'businessTransportation':
|
this.businessTransportationShow = true
|
break;
|
case 'businessReturn':
|
this.businessReturnShow = true
|
break
|
case 'pcdStart':
|
this.pcdShow = true
|
break
|
case 'pcdEnd':
|
this.pcdEndShow = true
|
break
|
case 'businessStartTimeDay':
|
this.businessStartTimeDayShow = true
|
break
|
case 'businessEndTimeDay':
|
this.businessEndTimeDayShow = true
|
break
|
}
|
},
|
businessTransportationConfirm(e) {
|
// console.log('confirm', e)
|
this.form2[1].info[0].value = e.value[0]
|
this.form2[1].info[0].submitVal = e.indexs[0] + 1
|
this.businessTransportationShow = false
|
},
|
businessReturnConfirm(e) {
|
// console.log('confirm', e)
|
this.form2[1].info[1].value = e.value[0]
|
this.form2[1].info[1].submitVal = e.indexs[0]
|
this.businessReturnShow = false
|
},
|
businessStartTimeDayConfirm(e) {
|
// console.log('confirm', e)
|
this.form2[2].info[1].value = e.value[0]
|
this.form2[2].info[1].submitVal = e.indexs[0] + 1
|
this.businessStartTimeDayShow = false
|
},
|
businessEndTimeDayConfirm(e) {
|
// console.log('confirm', e)
|
this.form2[2].info[3].value = e.value[0]
|
this.form2[2].info[3].submitVal = e.indexs[0] + 1
|
this.businessEndTimeDayShow = false
|
},
|
pcdChangeHandler(e) {
|
const {
|
columnIndex,
|
value,
|
values, // values为当前变化列的数组内容
|
index,
|
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
picker = this.$refs.uPicker
|
} = e
|
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
if (columnIndex === 0) {
|
// picker为选择器this实例，变化第二列对应的选项
|
picker.setColumnValues(1, this.columnData[index])
|
}
|
},
|
pcdStartConfirm(e) {
|
// console.log('confirm', e)
|
let pcd = data.citysData
|
pcd[e.indexs[0]]
|
// console.log(pcd[e.indexs[0]]);
|
this.pcdShow = false
|
|
// console.log(e.indexs)
|
let shen = data.citysData[e.indexs[0]]
|
// console.log(shen.value, shen.text)
|
let shi = shen.children[e.indexs[1]]
|
// console.log(shi.value, shi.code)
|
let qu = shi.children[e.indexs[2]]
|
// console.log(qu.value, qu.code)
|
// console.log(shen.value , shi.value, qu.value);
|
this.form2[1].info[4].value = e.value[0] + '/' + e.value[1] + '/' + e.value[2]
|
this.form2[1].info[4].submitVal = shen.value + ',' + shi.value + ',' + qu.value
|
// console.log(this.form2[1].info[4].value, this.form2[1].info[4].submitVal);
|
},
|
pcdEndConfirm(e) {
|
// console.log('confirm', e)
|
let pcd = data.citysData
|
pcd[e.indexs[0]]
|
// console.log(pcd[e.indexs[0]]);
|
this.pcdEndShow = false
|
|
// console.log(e.indexs)
|
let shen = data.citysData[e.indexs[0]]
|
// console.log(shen.value, shen.text)
|
let shi = shen.children[e.indexs[1]]
|
// console.log(shi.value, shi.code)
|
let qu = shi.children[e.indexs[2]]
|
// console.log(qu.value, qu.code)
|
// console.log(shen.value , shi.value, qu.value);
|
this.form2[1].info[6].value = e.value[0] + '/' + e.value[1] + '/' + e.value[2]
|
this.form2[1].info[6].submitVal = shen.value + ',' + shi.value + ',' + qu.value
|
// console.log(this.form2[1].info[6].value, this.form2[1].info[6].submitVal);
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.card {
|
min-height: 100rpx;
|
margin: 16rpx 20rpx 0 20rpx;
|
background-color: #fff;
|
}
|
|
.card-head {
|
min-height: 60rpx;
|
width: calc(100%-5px);
|
margin-left: 4px;
|
box-shadow: -4px 0 0px #2d8cf0;
|
}
|
|
.card-head-title {
|
/* background-color: #556655; */
|
padding-left: 6px;
|
}
|
|
.card-body {
|
margin: 8rpx 8rpx 0 8rpx;
|
}
|
|
.card-required {
|
color: red;
|
padding-right: 4rpx;
|
}
|
|
.flex {
|
display: flex;
|
align-items: center;
|
}
|
|
.flex-column {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.floor {
|
height: 100rpx;
|
line-height: 100rpx;
|
width: 100%;
|
background-color: #fff;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
display: flex;
|
align-items: center;
|
text-align: center;
|
letter-spacing: 10rpx;
|
}
|
|
.default {
|
flex: 2;
|
}
|
|
.default:active {
|
background-color: #eff0f1;
|
}
|
|
.primary {
|
flex: 3;
|
background-color: #2d8cf0;
|
color: #fff;
|
}
|
|
.primary:active {
|
background-color: #007dea;
|
}
|
</style>
|
