ducha-qianduan/src/views/doorcarManage/carInfoManage/index.vue

<template>
  <div style="padding: 10px">
    <!-- 搜索栏 -->
    <div style="margin-bottom: 10px">
      <el-select
        v-model="selectedDeviceId"
        placeholder="选择设备"
        size="small"
        style="width: 150px"
        clearable
      >
        <el-option
          style="color: black"
          v-for="device in devices"
          :key="device.id"
          :label="device.name"
          :value="device.id"
        />
      </el-select>
      <el-button
        type="primary"
        @click="searchCarInfo()"
        style="margin-left: 10px"
        >查询</el-button
      >
      <el-button type="primary" @click="addCarInfo()" style="margin-left: 10px"
        >新增</el-button
      ><el-button
        :disabled="multipleSelection.length <= 0"
        type="danger"
        @click="batchDeleteCarInfo()"
        style="margin-left: 10px"
        >批量删除</el-button
      >
    </div>

    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      border
      :header-cell-style="changeHeaderCellStyle"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center" />
      <!-- <el-table-column prop="employeeNo" label="序号" width="100" align="center" />-->
      <el-table-column prop="plateNumber" label="车牌号码" min-width="120" />
      <!--      <el-table-column prop="cardNo" label="卡号" min-width="100"/>-->
      <!--      <el-table-column prop="cardType" label="卡片类型" min-width="100"/>-->
      <!--      <el-table-column prop="cardFee" label="工本费(元)" min-width="100"/>-->
      <!--      <el-table-column prop="balance" label="余额(元)" min-width="100"/>-->
      <!--      <el-table-column prop="startTime" label="开始时间" min-width="160"/>-->
      <!--      <el-table-column prop="endTime" label="截止时间" min-width="160"/>-->
      <!--      <el-table-column prop="registerTime" label="注册时间" min-width="160"/>-->
      <!--      <el-table-column prop="department" label="发卡部门" min-width="120"/>-->
      <!--      <el-table-column prop="cardStatus" label="卡片状态" min-width="100"/>-->
      <!--      <el-table-column prop="issuer" label="发卡人员" min-width="120"/>-->
      <el-table-column prop="parkingType" label="停车类型" min-width="100" />
      <el-table-column prop="plateColor" label="车牌颜色" min-width="100" />
      <el-table-column prop="vehicleType" label="车辆类型" min-width="100" />
      <el-table-column prop="plateType" label="车牌类型" min-width="100" />
      <el-table-column prop="vehicleColor" label="车辆颜色" min-width="100" />
      <el-table-column prop="vehicleBrand" label="车辆品牌" min-width="100" />
      <el-table-column prop="ownerName" label="车主姓名" min-width="120" />
      <el-table-column prop="phoneNumber" label="手机号码" min-width="120" />
      <el-table-column prop="certificateNo" label="证件号码" min-width="120" />
      <!--      <el-table-column prop="address" label="住址" min-width="200"/>-->
      <!--      <el-table-column prop="position" label="职位" min-width="120"/>-->
      <!--      <el-table-column prop="company" label="所属公司" min-width="150"/>-->
      <!--      <el-table-column prop="departmentName" label="所在部门" min-width="150"/>-->
      <!--      <el-table-column prop="cardIssuerType" label="发卡器类型" min-width="120"/>-->
      <!--      <el-table-column prop="groupName" label="分组名称" min-width="120"/>-->
      <!--      <el-table-column prop="parkingPermission" label="场库权限" min-width="120"/>-->
      <!--      <el-table-column prop="parkingLotName" label="场库名称" min-width="120"/>-->
      <!--      <el-table-column prop="vehicleGroup" label="车辆群组" min-width="120"/>-->
      <el-table-column
        prop="dailyTimeRange"
        label="每日有效时段"
        min-width="120"
      />
      <el-table-column
        prop="historicalValidity"
        label="历史有效期"
        min-width="120"
      />
      <el-table-column prop="remarks" label="备注" min-width="200" />
      <!--      <el-table-column prop="dataVersion" label="数据版本" min-width="100"/>-->
      <!--      <el-table-column prop="packageInfo" label="包时信息" min-width="120"/>-->
      <!--      <el-table-column prop="engineNo" label="发动机号" min-width="120"/>-->
      <!--      <el-table-column prop="emissionNo" label="排放量号" min-width="120"/>-->
      <!--      <el-table-column prop="recognitionCode" label="识别代码" min-width="120"/>-->
      <!--      <el-table-column prop="vin" label="车架号" min-width="150"/>-->
      <!--      <el-table-column prop="displacement" label="车辆排量" min-width="120"/>-->
      <!--      <el-table-column prop="fleetName" label="车队名称" min-width="150"/>-->
      <el-table-column label="操作" fixed="right" width="160" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="viewCarInfo(scope.row)"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="updateCarInfo(scope.row)"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="deleteCarInfo(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <car-search-dialog
      :visible.sync="searchVisible"
      :detail="currentCar"
    /><!-- 查看详情弹窗 -->

    <!-- 查看详情弹窗 -->
    <car-detail-dialog :visible.sync="viewVisible" :detail="currentCar" />

    <car-edit-dialog
      :visible.sync="editVisible"
      :userData="currentCar"
      :deviceId="selectedDeviceId"
      @success="searchCarInfo"
    />
  </div>
</template>

<script>
import request from "@/utils/request";
import CarSearchDialog from "./CarSearchDialog.vue";
import CarDetailDialog from "./CarDetailDialog.vue";
import CarEditDialog from "./CarEditDialog.vue";

export default {
  name: "carManage",
  components: {
    CarSearchDialog,
    CarDetailDialog,
    CarEditDialog,
  },
  data() {
    return {
      devices: [], // 设备列表
      selectedDeviceId: null, // 当前选择的设备

      searchVisible: false,
      viewVisible: false,
      editVisible: false,
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      multipleSelection: [], // 存储选中的多行数据
      currentCar: null,
      loading: false,
      dialogVisible: false,
      dialogTitle: "新增车辆",
      form: {
        plate_number: "",
        owner_name: "",
        vehicle_type: "",
      },
      editId: null,
    };
  },
  mounted() {
    this.getDeviceNameInfo();
  },
  methods: {
    searchCarInfo() {
      console.log("查询");
      this.currentCar = {}; // 空对象代替 null
      // this.currentUser = {}; // 空对象代替 null
      // this.currentUser = null; // 空对象代替 null
      this.searchVisible = true;
    },
    viewCarInfo(row) {
      this.currentCar = row;
      this.viewVisible = true;
    },
    addCarInfo() {
      console.log("新增");
      this.currentCar = {}; // 空对象代替 null
      // this.currentUser = {}; // 空对象代替 null
      // this.currentUser = null; // 空对象代替 null
      this.editVisible = true;
    },
    updateCarInfo(row) {
      console.log("修改", row);
      this.currentCar = row;
      this.editVisible = true;
    },
    // 表格样式修改
    changeHeaderCellStyle(row, column, rowIndex, columnIndex) {
      if (row.columnIndex === 0) {
        return "background: #004279 ; color:#fff;"; // 修改的样式
      } else {
        return "background: #004279 ;color:#fff; ";
      }
    },
    // 监听多选变化
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 切换页码
    handlePageChange(page) {
      this.currentPage = page;
      // this.searchCarInfo()
    },
    // 修改每页条数
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1; // 切换条数后回到第一页
      // this.searchCarInfo()
    },
    async getDeviceNameInfo() {
      try {
        this.loading = true;
        const res = await request({
          url: "/device/listDeviceName",
          method: "GET",
        });
        // 判断返回结构
        if (res && res.list) {
          this.devices = res.list;
          this.total = res.total || 0;
          console.log("设备列表:", this.devices);
          if (this.devices.length > 0) {
            this.selectedDeviceId = this.devices[0].id;
            console.log("选中的设备ID:", this.selectedDeviceId);
            // 获取该设备的人员信息
            // this.searchUserInfo()
          }
        } else {
          this.devices = [];
          this.total = 0;
          this.$message.warning("未获取到设备数据");
        }
      } catch (error) {
        console.error("获取设备信息失败:", error);
        this.$message.error("获取设备列表失败，请检查网络或后端接口！");
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>