<template>
|
<view class="fleet-management">
|
<view><u-notice-bar mode="closable"
|
fontSize="25"
|
:text="text1"></u-notice-bar></view>
|
<view class="groupCars"
|
v-if="groupCarsShow">
|
<u-collapse @change="change"
|
@close="close"
|
@open="open"
|
:border="false"
|
:value="['0']">
|
<u-empty mode="data"
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
v-if="fleetDriverData.length == 0"
|
width="400"
|
height="400"
|
text="暂无数据"
|
textSize="18"></u-empty>
|
<u-collapse-item :title="fleetDriverData[0].fleetName"
|
v-if="fleetDriverData.length != 0"
|
name="0">
|
<view class="myCarContainer">
|
<u-swipe-action>
|
<u-cell-group>
|
<u-swipe-action-item :options="options1"
|
v-for="(item, index) in fleetDriverData"
|
:key="index"
|
:index="item.id"
|
:name="item.userId"
|
@click="deleteGroupClick">
|
<u-cell icon="car"
|
iconStyle="font-size:20px;"
|
:title="item.carNo"
|
:value="item.name"></u-cell>
|
</u-swipe-action-item>
|
</u-cell-group>
|
</u-swipe-action>
|
</view>
|
</u-collapse-item>
|
</u-collapse>
|
</view>
|
<!-- 删除小组模态框 -->
|
<view class="deleteModal">
|
<u-modal :show="deleteGroupShow"
|
:title="title"
|
@close="deleteGroupClose"
|
@cancel="deleteCancel"
|
@confirm="deleteConfirm"
|
:closeOnClickOverlay="true"
|
:showCancelButton="true">
|
<view class="slot-content"><rich-text :nodes="content"></rich-text></view>
|
</u-modal>
|
</view>
|
<view class="updateGroupButton"><u-button text="邀请司机加入"
|
type="primary"
|
@click="addDrvier"></u-button></view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex';
|
export default {
|
computed: {
|
...mapState(['fleetDriverDataLength'])
|
},
|
watch: {
|
fleetDriverDataLength(v) {
|
if (this.fleetDriverData.length !== v) {
|
this.GetUserFleet();
|
}
|
}
|
},
|
onLoad(params) {
|
this.deleteDriveObj.fleetId = params.id;
|
},
|
data() {
|
return {
|
text1: '向左滑动车辆可进行删除车队操作！！！',
|
groupCarsShow: true,
|
fleetDriverData: [],
|
myCarShow: true,
|
// 单元格滑动
|
options1: [{
|
text: '删除'
|
}],
|
deleteDriveObj: {
|
id: null, // 删除车辆小组id
|
fleetId: null
|
},
|
// 删除小组模态框
|
title: '提示',
|
content: '',
|
deleteGroupShow: false, // 删除小组模态框,
|
value: ['0']
|
};
|
},
|
onShow() {
|
this.init();
|
},
|
methods: {
|
init() {
|
this.GetUserFleet();
|
},
|
// 获取司机列表
|
GetUserFleet() {
|
uni.showLoading({
|
title: '加载中...'
|
});
|
this.$reqGet('GetUserFleet', { fleetId: this.deleteDriveObj.fleetId }).then(res => {
|
uni.hideLoading();
|
this.fleetDriverData = res.data;
|
});
|
},
|
change() {},
|
close() {},
|
open() {},
|
deleteGroupClick(args) {
|
this.deleteDriveObj.id = args.name;
|
this.fleetDriverData.forEach(item => {
|
if (item.userId == this.deleteDriveObj.id) {
|
this.content = '确认删除司机：' + item.name;
|
}
|
});
|
this.deleteGroupShow = true;
|
},
|
deleteConfirm() {
|
this.$reqPost('deleteSiJi', this.deleteDriveObj, 'params').then(res => {
|
console.log('删除司机', res);
|
this.GetUserFleet();
|
if (res.code == 0) {
|
uni.showToast({
|
title: '删除成功',
|
duration: 2000
|
});
|
} else {
|
uni.showToast({
|
title: res.msg ? res.msg : '删除失败',
|
duration: 2000
|
});
|
}
|
this.deleteGroupShow = false;
|
});
|
},
|
deleteCancel() {
|
this.deleteGroupShow = false;
|
},
|
deleteGroupClose() {
|
this.deleteGroupShow = false;
|
},
|
// 邀请司机加入
|
addDrvier() {
|
uni.navigateTo({
|
url: `/pages/customer-page/addTo-freightForwarder-driver/addTo-freightForwarder-driver?role=2&fleetId=${this.deleteDriveObj.fleetId}` // 2代表的是司机
|
});
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss"
|
scoped>
|
::v-deep.fleet-management {
|
width: 94%;
|
margin: 0 auto;
|
|
.myCarContainer {
|
max-height: vww(450);
|
width: 100%;
|
border: 1px solid #dddddd;
|
border-radius: 4px;
|
overflow: hidden;
|
overflow-y: auto;
|
|
.carNum {
|
padding: vww(2) 0;
|
text-align: center;
|
display: inline-block;
|
width: 33%;
|
// .u-tooltip {
|
// display: inline-block;
|
// .u-tooltip__wrapper {
|
// }
|
// }
|
}
|
}
|
|
.updateGroupButton {
|
margin: vww(15) auto 0;
|
|
.u-button {
|
width: 30%;
|
}
|
}
|
|
.groupCars {
|
.u-swipe-action {
|
.u-swipe-action-item {
|
.u-swipe-action-item__right {
|
.u-swipe-action-item__right__button {
|
.u-swipe-action-item__right__button__wrapper {
|
background-color: #f56c6c !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
