New file |
| | |
| | | <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: '', |
| | | 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 |
| | | }, |
| | | { |
| | | subTitle: '预估金额', |
| | | placeholder: '请输入预估金额', |
| | | placeholderStyle: 'font-size:20rpx', |
| | | value: '', |
| | | submitVal: '预估金额', |
| | | type: 'amountOfMoney', |
| | | inputType: 'input', |
| | | required: true |
| | | }, |
| | | ] |
| | | }, |
| | | { |
| | | title: '其他信息', |
| | | info: [{ |
| | | subTitle: '备注', |
| | | placeholder: '备注信息', |
| | | placeholderStyle: 'font-size:20rpx', |
| | | value: '', |
| | | inputType: 'input', |
| | | type: 'businessNotes' |
| | | }] |
| | | }, |
| | | ], |
| | | |
| | | } |
| | | }, |
| | | onLoad(option) { |
| | | let _this = this |
| | | const eventChannel = this.getOpenerEventChannel(); |
| | | eventChannel.on('businessTripOtherDetl', 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 |
| | | _this.orderId$ = data.detl.orderId$ |
| | | 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.form['orderId$'] = this.orderId$ |
| | | this.formModi(this.form) |
| | | } |
| | | } |
| | | }, |
| | | formAdd(form) { |
| | | let _this = this |
| | | uni.request({ |
| | | url: `${_this.baseUrl}/businessTripOther/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}/businessTripOther/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> |