删除无用代码 修改部分逻辑 调整部分样式

qingyiay

2023-10-17 2adce788c1a411959b81f08d5569d92861c7f300

 pages/customer-page/fleet-management/fleet-management.vue

@@ -1,22 +1,37 @@
<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" textSize="18"></u-empty>
            <u-collapse-item :title="fleetDriverData[0].fleetName" v-if="fleetDriverData.length != 0" name="0">
      <view><u-notice-bar mode="closable"
            fontSize="25"
            :text="text1"></u-notice-bar></view>
      <view class="groupCars"
         v-if="groupCarsShow">
         <u-collapse @change="change"
            :border="false"
            :value="['0']"
            ref="collapse">
            <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"
                        <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>
                           @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>
@@ -26,166 +41,159 @@
      </view>
      <!-- 删除小组模态框 -->
      <view class="deleteModal">
         <u-modal
            :show="deleteGroupShow"
         <u-modal :show="deleteGroupShow"
            :title="title"
            @close="deleteGroupClose"
            @cancel="deleteCancel"
            @confirm="deleteConfirm"
            :closeOnClickOverlay="true"
            :showCancelButton="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 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: [
            {
   export default {
      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();
            }],
            deleteDriveObj: {
               id: null, // 删除车辆小组id
               fleetId: null
            },
            // 删除小组模态框
            title: '提示',
            content: '',
            deleteGroupShow: false, // 删除小组模态框,
            value: ['0']
         };
      },
      // 获取司机列表
      GetUserFleet() {
         uni.showLoading({
            title: '加载中...'
         });
         this.$reqGet('GetUserFleet', { fleetId: this.deleteDriveObj.fleetId }).then(res => {
            uni.hideLoading();
            this.fleetDriverData = res.data;
         });
      onShow() {
         this.init();
      },
      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);
      methods: {
         init() {
            this.GetUserFleet();
            if (res.code == 0) {
               uni.showToast({
                  title: '删除成功',
                  duration: 2000
               });
            } else {
               uni.showToast({
                  title: res.msg ? res.msg : '删除失败',
                  duration: 2000
               });
            }
         },
         // 获取司机列表
         GetUserFleet() {
            uni.showLoading({
               title: '加载中...'
            });
            this.$reqGet('GetUserFleet', { fleetId: this.deleteDriveObj.fleetId }).then(res => {
               uni.hideLoading();
               this.fleetDriverData = res.data;
               this.$nextTick(() => {
                  this.$refs.collapse.init()
               })
            });
         },
         change() {},
         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;
         });
      },
      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代表的是司机
         });
         },
         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 {
         //    }
         // }
      }
   }
<style lang="scss"
   scoped>
   ::v-deep.fleet-management {
      width: 94%;
      margin: 0 auto;

   .updateGroupButton {
      margin: vww(15) auto 0;
      .u-button {
         width: 30%;
      .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 {
            //    }
            // }
         }
      }
   }
   .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;

      .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>
</style>