内容提交

longyvfengyun

2023-11-29 11713ebaf140cce03b439146aa63677d725112e7

 src/views/user/boxList.vue

@@ -1,9 +1,100 @@
<script setup>
import {ref} from "vue";
import {ref, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {
   allDrivesModule, changeDriveInfoModule,
   driveInfModule
} from "@/views/moudle/driveInf/driveInf";
import EditDriveParams from "@/components/params/editDriveParams.vue";
import AddDriveParams from "@/components/params/addDriveParams.vue";
const editVisible = ref(false);
const addVisible = ref(false);
const {
   page,
   pageSize,
   total,
   driveList,
   carName,
   getDriveList
} = driveInfModule();
const loading = ref(false);
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
/**
 * 查询汽车列表
 * @return {Promise<void>}
 */
const searchDriveList = async ()=>{
   // 开启等待框
   loading.value = true;

const tableData = ref([]);
   let res = await getDriveList();
   driveList.value = res.result;
   // 关闭等待框
   loading.value = false;
}

const carName = ref(null);
/**
 * 每页查询个数变更
 * @param value 每页查询个数
 */
const sizeChange = (value)=>{
   pageSize.value = value;
   searchDriveList();
}

/**
 * 当前页个数
 * @param value 当前页页码
 */
const currentChange = (value)=>{
   page.value = value;
   searchDriveList();
}

const {
   allDriveList,
   getAllDriveList
} = allDrivesModule();

const searchAllDrives = async ()=>{
   const res = await getAllDriveList();
   console.log(res);
}

const {
   deleteDrive
} = changeDriveInfoModule();
const handleDeleteDrive = (row)=>{
   ElMessageBox.confirm(
      "确认删除当前车辆",
      "系统提示"
   ).then(async ()=>{
      const rs = await deleteDrive(row.id);
      if (rs.code === 1) {
         ElMessage({
            message: rs.message,
            type: "success"
         });
         searchDriveList();
      }else {
         ElMessage.error(rs.message);
      }
   }).catch(()=>{});
}

onMounted(()=>{
   searchDriveList();
   searchAllDrives();
});
</script>

<template>
@@ -11,58 +102,83 @@
      <div class="page-content">
         <div class="page-header">
            <div class="input-list">
<!--               <div class="input-item">-->
<!--                  <div class="input-wrapper">-->
<!--                     <div class="input-label">车辆名称:</div>-->
<!--                     <div class="input-content">-->
<!--                        <el-select v-model="carName" filterable>-->
<!--                           <el-option-->
<!--                              v-for="(item, key) in allDriveList.data" :key="'key'+key"-->
<!--                              :value="item.key" :label="item.label"></el-option>-->
<!--                        </el-select>-->
<!--                     </div>-->
<!--                  </div>-->
<!--               </div>-->
               <div class="input-item">
                  <div class="input-wrapper">
                     <div class="input-label">车辆名称</div>
                     <div class="input-content">
                        <el-input
                           v-model="carName"
                           size="large"
                           placeholder="Please Input"/>
                     </div>
                  </div>
               </div>
               <div class="input-item">
                  <div class="input-wrapper">
                     <div class="input-label">在线状态</div>
                     <div class="input-content">
                        <el-input
                           v-model="carName"
                           size="large"
                           placeholder="Please Input"/>
                     </div>
                  </div>
               </div>
               <div class="input-item">
                  <div class="input-wrapper">
                     <div class="input-label">国标设备编码</div>
                     <div class="input-content">
                        <el-input
                           v-model="carName"
                           size="large"
                           placeholder="Please Input"/>
                     </div>
                  </div>
               </div>
               <div class="input-item">
                  <el-button type="primary" plain>查询</el-button>
                  <el-button type="success" icon="Plus" @click="addVisible=true">添加</el-button>
                  <el-button type="primary" icon="Search" @click="searchDriveList">查询</el-button>
               </div>
            </div>
         </div>
         <div class="page-content">
            <el-table :data="tableData" height="100%">
               <el-table-column prop="date" label="Date" />
               <el-table-column prop="name" label="Name" />
               <el-table-column prop="address" label="Address" />
            <el-table
               v-loading="loading"
               element-loading-text="数据加载中..."
               :element-loading-spinner="svg"
               element-loading-svg-view-box="-10, -10, 50, 50"
               element-loading-background="rgba(122, 122, 122, 0.5)"
               :data="driveList"
               height="100%">
               <el-table-column min-width="120" align="center" prop="name" label="车辆名称" />
               <el-table-column min-width="120" align="center" prop="boxSn" label="车辆编码"></el-table-column>
               <el-table-column align="center" prop="online" label="车辆状态">
                  <template #default="{row}">
                     <el-tag v-if="row.online" type="success">在线</el-tag>
                     <el-tag v-else type="danger">离线</el-tag>
                  </template>
               </el-table-column>
               <el-table-column min-width="170" align="center" prop="createTime1" label="创建日期"></el-table-column>
               <el-table-column min-width="170" align="center" prop="onlineTime1" label="在线时间"></el-table-column>
               <el-table-column min-width="170" align="center" prop="updateTime1" label="数据更新日期"></el-table-column>
               <el-table-column align="center" fixed="right" label="操作" width="120">
                  <template #default="{row}">
<!--                     <el-button link type="primary" size="small" @click="editVisible = true">编辑</el-button>-->
                     <el-button link type="primary" size="small" @click="handleDeleteDrive(row)">删除</el-button>
                  </template>
               </el-table-column>
            </el-table>
         </div>
         <div class="page-footer">
            <div class="el-pagination-container">
               <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
               <el-pagination
                  background
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="sizeChange"
                  @current-change="currentChange"
                  :total="total"></el-pagination>
            </div>
         </div>
      </div>
   </div>
   <el-dialog
      v-model="editVisible"
      title="车辆信息编辑"
      width="auto"
      draggable
      destroy-on-close
      align-center>
      <edit-drive-params v-model:visible="editVisible"></edit-drive-params>
   </el-dialog>

   <el-dialog
      v-model="addVisible"
      title="车辆信息添加"
      width="auto"
      draggable
      destroy-on-close
      align-center>
      <add-drive-params v-model:visible="addVisible" @success="searchDriveList"></add-drive-params>
   </el-dialog>
</template>

<style scoped lang="less">
@@ -96,6 +212,7 @@
   .input-item {
      display: inline-block;
      margin-left: 8px;
      vertical-align: top;
   }
}
.input-wrapper {
@@ -105,7 +222,7 @@
   }
   .input-label {
      font-size: 14px;
      line-height: 40px;
      line-height: 32px;
      vertical-align: bottom;
      margin-right: 8px;
   }