cmc-oa/oa-ui/src/views/flowable/form/budget/components/chooseCar.vue

<!--
 * @Author: ysh
 * @Date: 2024-03-27 11:10:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-05-23 15:37:34
-->
<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="车牌号：">
        <el-input v-model="queryParams.licensePlate" clearable></el-input>
      </el-form-item>
      <el-form-item label="品牌：">
        <el-input v-model="queryParams.brand" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getList" type="primary">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="chooseCar" :data="list" @selection-change="handleSelectionChange" :row-key="getRowKeys">
      <el-table-column type="selection" width="50" align="center" :reserve-selection="true" />
      <el-table-column label="车牌号" align="center" prop="licensePlate" />
      <el-table-column label="驾驶员" align="center" prop="driverUser.nickName" />
      <el-table-column label="品牌" align="center" prop="brand" />
      <el-table-column label="单日成本" align="center" prop="dayCost" />
    </el-table>
    <div style="text-align: right;">
      <el-pagination @current-change="getList" :current-page.sync="queryParams.pageNum" :page-size="queryParams.pageSize"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <div>
      已选车辆：
      <el-tag v-for="item in chooseList" style="margin: 5px;" :key="item.carId">
        {{ item.licensePlate + item.brand }}
      </el-tag>
    </div>
    <div style="text-align: center;margin-top: 20px;">
      <el-button type="primary" @click="confirmChoose">确认选择</el-button>
      <el-button @click="clearChoose">清空选择</el-button>
    </div>
  </div>
</template>

<script>
import { listCar } from "@/api/oa/car/car";
import { getUserByPost } from "@/api/system/post";
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      form: {},
      total: 0,
      loading: false,
      chooseList: [],
      driverList: [],
    }
  },
  created() {
    this.getList();
    // this.getDriverList();
  },
  methods: {
    /** 查询cmc车辆信息列表 */
    getList() {
      this.loading = true;
      listCar(this.queryParams).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 查询驾驶员列表
    getDriverList() {
      getUserByPost({ postName: '驾驶员' }).then(response => {
        this.driverList = response.data;
      })
    },
    handleSelectionChange(val) {
      this.chooseList = val
    },
    getRowKeys(row) {
      return row.carId;
    },
    confirmChoose() {
      this.$emit('chooseList', this.chooseList)
    },
    clearChoose() {
      this.$refs.chooseCar.clearSelection();
    }
  }
}
</script>

<style lang="scss" scoped></style>