erp系统出车管理

.

<script setup>
import { ref } from 'vue'
import { insertTripregistrations } from '../../api/zi'
import { selectAllVehiclesID } from '../../api/people'
const form = ref({})
const Vehicles = ref([])
const chu = ref([])
const chuHistory = ref([])
const dialogFormVisible = ref(false)
const dialogTableVisible = ref(false)
const options = ref([])
const getOptions = async () => {
  const res = await selectAllVehiclesID()
  options.value = res.data.data
}
getOptions()
const onSubmit = async () => {
  await insertTripregistrations(form.value)
  form.value = ''
  dialogFormVisible.value = false
  getTripregistrations()
}
import { selectAllVehicles } from '../../api/people'
const getVehicles = async () => {
  const res = await selectAllVehicles()
  Vehicles.value = res.data.data
}
getVehicles()
import { selectAllTriphistory } from '../../api/people'
const getTriphistory = async () => {
  const res = await selectAllTriphistory()
  chuHistory.value = res.data.data
}
getTriphistory()

import { selectAllTripregistrations } from '../../api/people'
const getTripregistrations = async () => {
  const res = await selectAllTripregistrations()
  chu.value = res.data.data
}
getTripregistrations()

import { updateTripregistrations } from '../../api/zi'
import { ElMessage } from 'element-plus'
const handlePass = async (row) => {
  await updateTripregistrations('已通过', row.registrationId)
  ElMessage.success('已通过')
  getTripregistrations()
  getVehicles()
}
const handleReject = async (row) => {
  await updateTripregistrations('已驳回', row.registrationId)
  ElMessage.success('已驳回')
  getTripregistrations()
  getVehicles()
}
</script>

<template>
  <el-button type="primary" @click="dialogFormVisible = true">
    用车申请
  </el-button>
  <el-button @click="dialogTableVisible = true"> 历史记录 </el-button>
  <el-divider />

  <el-dialog v-model="dialogFormVisible" title="用车申请">
    <el-form :model="form" label-width="120px">
      <el-row>
        <el-col :span="12"
          ><el-form-item label="申请人姓名">
            <el-input v-model="form.driverName" /> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="目的地">
            <el-input v-model="form.destination" /> </el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="5">
        <el-col :span="12">
          <el-form-item>
            <el-date-picker
              v-model="form.departureTime"
              type="datetime"
              placeholder="出发时间"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="YYYY-MM-DDTHH:mm:ss.SSSZ"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-date-picker
              v-model="form.returnTime"
              type="datetime"
              placeholder="返回时间"
              format="YYYY/MM/DD hh:mm:ss"
              value-format="YYYY-MM-DDTHH:mm:ss.SSSZ"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="5">
        <el-col :span="24"
          ><el-form-item label="使用车辆">
            <el-select v-model="form.vehicleId">
              <el-option
                v-for="item in options"
                :key="item.vehicleId"
                :label="item.vehicleId"
                :value="item.vehicleId"
              >
                <span style="float: left">{{ item.vehicleId }}</span>
                <span
                  style="
                    float: right;
                    color: var(--el-text-color-secondary);
                    font-size: 13px;
                  "
                  >{{ item.brand }}</span
                >
              </el-option>
            </el-select>
          </el-form-item></el-col
        >
      </el-row>
      <el-row :gutter="5">
        <el-col :span="24"
          ><el-form-item label="出发目的">
            <el-input v-model="form.purpose" /> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogTableVisible" title="用车历史记录">
    <el-table :data="chuHistory" stripe style="width: 100%" height="360">
      <el-table-column prop="vehicleId" label="车辆编号" />
      <el-table-column prop="driverName" label="申请人" />
      <el-table-column prop="destination" label="目的地" />
      <el-table-column prop="departureTime" label="出发时间" />
      <el-table-column prop="returnTime" label="返回时间" />
      <el-table-column prop="purpose" label="出发目的" />
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <el-tag>
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <el-card class="box-card">
    <el-table :data="Vehicles" stripe style="width: 100%" height="360px">
      <el-table-column prop="vehicleId" label="车辆编号" />
      <el-table-column prop="plateNumber" label="车牌号" />
      <el-table-column prop="brand" label="车辆品牌" />
      <el-table-column prop="model" label="车辆类型" />
      <el-table-column prop="year" label="车辆年份" />
      <el-table-column prop="color" label="车辆颜色" />
      <el-table-column prop="status" label="车辆使用情况">
        <template v-slot="scope">
          <el-tag>
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <br /><br />
  <el-card class="box-card">
    <el-table :data="chu" stripe style="width: 100%" height="360">
      <el-table-column prop="registrationId" label="登记Id" />
      <el-table-column prop="vehicleId" label="车辆编号" />
      <el-table-column prop="driverName" label="使用者姓名" />
      <el-table-column prop="destination" label="目的地" />
      <el-table-column prop="departureTime" label="出发时间" />
      <el-table-column prop="returnTime" label="返回时间" />
      <el-table-column prop="purpose" label="出发目的" />
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <el-tag>
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handlePass(scope.row)"
            >通过</el-button
          >
          <el-button size="small" type="danger" @click="handleReject(scope.row)"
            >驳回</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<style>
.el-button--text {
  margin-right: 15px;
}

.el-select {
  width: 300px;
}

.el-input {
  width: 300px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>