.env.development

@@ -1,5 +1,5 @@
# é¡µé¢æ ‡é¢˜

VITE_APP_TITLE = èŠ¯å¯¼äº‘（管理信息系统）

VITE_APP_TITLE = èŠ¯å¯¼-环保门禁系统



# å¼€å‘环境配置

VITE_APP_ENV = 'development'


 .env.production

@@ -1,5 +1,5 @@
# é¡µé¢æ ‡é¢˜

VITE_APP_TITLE = MIS（管理信息系统）

VITE_APP_TITLE = èŠ¯å¯¼-环保门禁系统



# ç”Ÿäº§çŽ¯å¢ƒé…ç½®

VITE_APP_ENV = 'production'


 README.md

@@ -1,108 +1 @@
<p align="center">

    <img alt="logo" src="https://oscimg.oschina.net/oscnet/up-d3d0a9303e11d522a06cd263f3079027715.png">

</p>

<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">RuoYi v3.8.9</h1>

<h4 align="center">基于SpringBoot+Vue3前后端分离的Java快速开发框架</h4>

<p align="center">

    <a href="https://gitee.com/y_project/RuoYi-Vue/stargazers"><img src="https://gitee.com/y_project/RuoYi-Vue/badge/star.svg?theme=dark"></a>

    <a href="https://gitee.com/y_project/RuoYi-Vue"><img src="https://img.shields.io/badge/RuoYi-v3.8.9-brightgreen.svg"></a>

    <a href="https://gitee.com/y_project/RuoYi-Vue/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg"></a>

</p>



## å¹³å°ç®€ä»‹



* æœ¬ä»“库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) ç‰ˆæœ¬ã€‚

* é…å¥—后端代码仓库地址[RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue) æˆ– [RuoYi-Vue-fast](https://gitcode.com/yangzongzhuan/RuoYi-Vue-fast) ç‰ˆæœ¬ã€‚

* å‰ç«¯æŠ€æœ¯æ ˆï¼ˆ[Vue2](https://cn.vuejs.org) + [Element](https://github.com/ElemeFE/element) + [Vue CLI](https://cli.vuejs.org/zh)），请移步[RuoYi-Vue](https://gitee.com/y_project/RuoYi-Vue/tree/master/ruoyi-ui)。

* é˜¿é‡Œäº‘折扣场：[点我进入](http://aly.ruoyi.vip)，腾讯云秒杀场：[点我进入](http://txy.ruoyi.vip)&nbsp;&nbsp;



## å‰ç«¯è¿è¡Œ



```bash

# å…‹éš†é¡¹ç›®

git clone https://github.com/yangzongzhuan/RuoYi-Vue3.git



# è¿›å…¥é¡¹ç›®ç›®å½•

cd RuoYi-Vue3



# å®‰è£…依赖

yarn --registry=https://registry.npmmirror.com



# å¯åŠ¨æœåŠ¡

yarn dev



# æž„建测试环境 yarn build:stage

# æž„建生产环境 yarn build:prod

# å‰ç«¯è®¿é—®åœ°å€ http://localhost:80

```



## å†…置功能



1.  ç”¨æˆ·ç®¡ç†ï¼šç”¨æˆ·æ˜¯ç³»ç»Ÿæ“ä½œè€…，该功能主要完成系统用户配置。

2.  éƒ¨é—¨ç®¡ç†ï¼šé…ç½®ç³»ç»Ÿç»„织机构（公司、部门、小组），树结构展现支持数据权限。

3.  å²—位管理：配置系统用户所属担任职务。

4.  èœå•ç®¡ç†ï¼šé…ç½®ç³»ç»Ÿèœå•ï¼Œæ“ä½œæƒé™ï¼ŒæŒ‰é’®æƒé™æ ‡è¯†ç­‰ã€‚

5.  è§’色管理：角色菜单权限分配、设置角色按机构进行数据范围权限划分。

6.  å­—典管理：对系统中经常使用的一些较为固定的数据进行维护。

7.  å‚数管理：对系统动态配置常用参数。

8.  é€šçŸ¥å…¬å‘Šï¼šç³»ç»Ÿé€šçŸ¥å…¬å‘Šä¿¡æ¯å‘布维护。

9.  æ“ä½œæ—¥å¿—：系统正常操作日志记录和查询；系统异常信息日志记录和查询。

10. ç™»å½•æ—¥å¿—：系统登录日志记录查询包含登录异常。

11. åœ¨çº¿ç”¨æˆ·ï¼šå½“前系统中活跃用户状态监控。

12. å®šæ—¶ä»»åŠ¡ï¼šåœ¨çº¿ï¼ˆæ·»åŠ ã€ä¿®æ”¹ã€åˆ é™¤)任务调度包含执行结果日志。

13. ä»£ç ç”Ÿæˆï¼šå‰åŽç«¯ä»£ç çš„生成（java、html、xml、sql）支持CRUD下载 ã€‚

14. ç³»ç»ŸæŽ¥å£ï¼šæ ¹æ®ä¸šåŠ¡ä»£ç è‡ªåŠ¨ç”Ÿæˆç›¸å…³çš„api接口文档。

15. æœåŠ¡ç›‘控：监视当前系统CPU、内存、磁盘、堆栈等相关信息。

16. ç¼“存监控：对系统的缓存信息查询，命令统计等。

17. åœ¨çº¿æž„建器：拖动表单元素生成相应的HTML代码。

18. è¿žæŽ¥æ± ç›‘视：监视当前系统数据库连接池状态，可进行分析SQL找出系统性能瓶颈。



## åœ¨çº¿ä½“验



- admin/admin123  
- é™†é™†ç»­ç»­æ”¶åˆ°ä¸€äº›æ‰“赏，为了更好的体验已用于演示服务器升级。谢谢各位小伙伴。



演示地址：http://vue.ruoyi.vip  
文档地址：http://doc.ruoyi.vip



## æ¼”示图



<table>

    <tr>

        <td><img src="https://oscimg.oschina.net/oscnet/cd1f90be5f2684f4560c9519c0f2a232ee8.jpg"/></td>

        <td><img src="https://oscimg.oschina.net/oscnet/1cbcf0e6f257c7d3a063c0e3f2ff989e4b3.jpg"/></td>

    </tr>

    <tr>

        <td><img src="https://oscimg.oschina.net/oscnet/up-8074972883b5ba0622e13246738ebba237a.png"/></td>

        <td><img src="https://oscimg.oschina.net/oscnet/up-9f88719cdfca9af2e58b352a20e23d43b12.png"/></td>

    </tr>

    <tr>

        <td><img src="https://oscimg.oschina.net/oscnet/up-39bf2584ec3a529b0d5a3b70d15c9b37646.png"/></td>

        <td><img src="https://oscimg.oschina.net/oscnet/up-936ec82d1f4872e1bc980927654b6007307.png"/></td>

    </tr>

    <tr>

        <td><img src="https://oscimg.oschina.net/oscnet/up-b2d62ceb95d2dd9b3fbe157bb70d26001e9.png"/></td>

        <td><img src="https://oscimg.oschina.net/oscnet/up-d67451d308b7a79ad6819723396f7c3d77a.png"/></td>

    </tr>	 
    <tr>

        <td><img src="https://oscimg.oschina.net/oscnet/5e8c387724954459291aafd5eb52b456f53.jpg"/></td>

        <td><img src="https://oscimg.oschina.net/oscnet/644e78da53c2e92a95dfda4f76e6d117c4b.jpg"/></td>

    </tr>

    <tr>

        <td><img src="https://oscimg.oschina.net/oscnet/up-8370a0d02977eebf6dbf854c8450293c937.png"/></td>

        <td><img src="https://oscimg.oschina.net/oscnet/up-49003ed83f60f633e7153609a53a2b644f7.png"/></td>

    </tr>

    <tr>

        <td><img src="https://oscimg.oschina.net/oscnet/up-d4fe726319ece268d4746602c39cffc0621.png"/></td>

        <td><img src="https://oscimg.oschina.net/oscnet/up-c195234bbcd30be6927f037a6755e6ab69c.png"/></td>

    </tr>

    <tr>

        <td><img src="https://oscimg.oschina.net/oscnet/b6115bc8c31de52951982e509930b20684a.jpg"/></td>

        <td><img src="https://oscimg.oschina.net/oscnet/up-5e4daac0bb59612c5038448acbcef235e3a.png"/></td>

    </tr>

</table>





## è‹¥ä¾å‰åŽç«¯åˆ†ç¦»äº¤æµç¾¤



QQ群： [![加入QQ群](https://img.shields.io/badge/已满-937441-blue.svg)](https://jq.qq.com/?_wv=1027&k=5bVB1og) [![加入QQ群](https://img.shields.io/badge/已满-887144332-blue.svg)](https://jq.qq.com/?_wv=1027&k=5eiA4DH) [![加入QQ群](https://img.shields.io/badge/已满-180251782-blue.svg)](https://jq.qq.com/?_wv=1027&k=5AxMKlC) [![加入QQ群](https://img.shields.io/badge/已满-104180207-blue.svg)](https://jq.qq.com/?_wv=1027&k=51G72yr) [![加入QQ群](https://img.shields.io/badge/已满-186866453-blue.svg)](https://jq.qq.com/?_wv=1027&k=VvjN2nvu) [![加入QQ群](https://img.shields.io/badge/已满-201396349-blue.svg)](https://jq.qq.com/?_wv=1027&k=5vYAqA05) [![加入QQ群](https://img.shields.io/badge/已满-101456076-blue.svg)](https://jq.qq.com/?_wv=1027&k=kOIINEb5) [![加入QQ群](https://img.shields.io/badge/已满-101539465-blue.svg)](https://jq.qq.com/?_wv=1027&k=UKtX5jhs) [![加入QQ群](https://img.shields.io/badge/已满-264312783-blue.svg)](https://jq.qq.com/?_wv=1027&k=EI9an8lJ) [![加入QQ群](https://img.shields.io/badge/已满-167385320-blue.svg)](https://jq.qq.com/?_wv=1027&k=SWCtLnMz) [![加入QQ群](https://img.shields.io/badge/已满-104748341-blue.svg)](https://jq.qq.com/?_wv=1027&k=96Dkdq0k) [![加入QQ群](https://img.shields.io/badge/已满-160110482-blue.svg)](https://jq.qq.com/?_wv=1027&k=0fsNiYZt) [![加入QQ群](https://img.shields.io/badge/已满-170801498-blue.svg)](https://jq.qq.com/?_wv=1027&k=7xw4xUG1) [![加入QQ群](https://img.shields.io/badge/已满-108482800-blue.svg)](https://jq.qq.com/?_wv=1027&k=eCx8eyoJ) [![加入QQ群](https://img.shields.io/badge/已满-101046199-blue.svg)](https://jq.qq.com/?_wv=1027&k=SpyH2875) [![加入QQ群](https://img.shields.io/badge/已满-136919097-blue.svg)](https://jq.qq.com/?_wv=1027&k=tKEt51dz) [![加入QQ群](https://img.shields.io/badge/已满-143961921-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=0vBbSb0ztbBgVtn3kJS-Q4HUNYwip89G&authKey=8irq5PhutrZmWIvsUsklBxhj57l%2F1nOZqjzigkXZVoZE451GG4JHPOqW7AW6cf0T&noverify=0&group_code=143961921) [![加入QQ群](https://img.shields.io/badge/已满-174951577-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=ZFAPAbp09S2ltvwrJzp7wGlbopsc0rwi&authKey=HB2cxpxP2yspk%2Bo3WKTBfktRCccVkU26cgi5B16u0KcAYrVu7sBaE7XSEqmMdFQp&noverify=0&group_code=174951577) [![加入QQ群](https://img.shields.io/badge/已满-161281055-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=Fn2aF5IHpwsy8j6VlalNJK6qbwFLFHat&authKey=uyIT%2B97x2AXj3odyXpsSpVaPMC%2Bidw0LxG5MAtEqlrcBcWJUA%2FeS43rsF1Tg7IRJ&noverify=0&group_code=161281055) [![加入QQ群](https://img.shields.io/badge/已满-138988063-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=XIzkm_mV2xTsUtFxo63bmicYoDBA6Ifm&authKey=dDW%2F4qsmw3x9govoZY9w%2FoWAoC4wbHqGal%2BbqLzoS6VBarU8EBptIgPKN%2FviyC8j&noverify=0&group_code=138988063) [![加入QQ群](https://img.shields.io/badge/已满-151450850-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=DkugnCg68PevlycJSKSwjhFqfIgrWWwR&authKey=pR1Pa5lPIeGF%2FFtIk6d%2FGB5qFi0EdvyErtpQXULzo03zbhopBHLWcuqdpwY241R%2F&noverify=0&group_code=151450850) [![加入QQ群](https://img.shields.io/badge/已满-224622315-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=F58bgRa-Dp-rsQJThiJqIYv8t4-lWfXh&authKey=UmUs4CVG5OPA1whvsa4uSespOvyd8%2FAr9olEGaWAfdLmfKQk%2FVBp2YU3u2xXXt76&noverify=0&group_code=224622315) [![加入QQ群](https://img.shields.io/badge/已满-287842588-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=Nxb2EQ5qozWa218Wbs7zgBnjLSNk_tVT&authKey=obBKXj6SBKgrFTJZx0AqQnIYbNOvBB2kmgwWvGhzxR67RoRr84%2Bus5OadzMcdJl5&noverify=0&group_code=287842588) [![加入QQ群](https://img.shields.io/badge/已满-187944233-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=numtK1M_I4eVd2Gvg8qtbuL8JgX42qNh&authKey=giV9XWMaFZTY%2FqPlmWbkB9g3fi0Ev5CwEtT9Tgei0oUlFFCQLDp4ozWRiVIzubIm&noverify=0&group_code=187944233) [![加入QQ群](https://img.shields.io/badge/228578329-blue.svg)](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=G6r5KGCaa3pqdbUSXNIgYloyb8e0_L0D&authKey=4w8tF1eGW7%2FedWn%2FHAypQksdrML%2BDHolQSx7094Agm7Luakj9EbfPnSTxSi2T1LQ&noverify=0&group_code=228578329) ç‚¹å‡»æŒ‰é’®å…¥ç¾¤ã€‚
## çŽ¯ä¿é—¨ç¦ç³»ç»Ÿ-芯导


 index.html

@@ -7,7 +7,7 @@
  <meta name="renderer" content="webkit">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  <link rel="icon" href="/favicon.ico">

  <title>MIS（管理信息系统）</title>

  <title>芯导-环保门禁系统</title>

  <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->

  <style>

    html,


 src/api/environmentAccess/vehicleInfo.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,48 @@
import request from "@/utils/request";

// æŸ¥è¯¢è½¦è¾†ä¿¡æ¯åˆ†é¡µåˆ—表
export function listVehicleInfo(query) {
  return request({
    // ä¸¤çº§è·¯å¾„：模块 + å…·ä½“功能名
    url: "/environmentAccess/vehicleInfoPage",
    method: "get",
    params: query,
  });
}

// æ–°å¢žè½¦è¾†ä¿¡æ¯
export function addVehicleInfo(data) {
  return request({
    url: "/environmentAccess/vehicleInfoAdd",
    method: "post",
    data,
  });
}

// ä¿®æ”¹è½¦è¾†ä¿¡æ¯
export function updateVehicleInfo(data) {
  return request({
    url: "/environmentAccess/vehicleInfoUpdate",
    method: "put",
    data,
  });
}

// åˆ é™¤è½¦è¾†ä¿¡æ¯ï¼ˆæ”¯æŒæ‰¹é‡ï¼‰
export function delVehicleInfo(ids) {
  return request({
    url: "/environmentAccess/vehicleInfoDelete",
    method: "delete",
    data: ids,
  });
}

// å®¡æ ¸è½¦è¾†ä¿¡æ¯
export function reviewVehicleInfo(data) {
  return request({
    // å®¡æ ¸å•ç‹¬èµ„源：vehicleInfoReview
    url: "/environmentAccess/vehicleInfoReview",
    method: "post",
    data,
  });
}

 src/main.js

@@ -76,7 +76,7 @@
app.config.globalProperties.addDateRange = addDateRange;

app.config.globalProperties.selectDictLabel = selectDictLabel;

app.config.globalProperties.selectDictLabels = selectDictLabels;

app.config.globalProperties.javaApi = "http://114.132.189.42:7004";

app.config.globalProperties.javaApi = "http://127.0.0.1:7003";

app.config.globalProperties.HaveJson = (val) => {

  return JSON.parse(JSON.stringify(val));

};


 src/store/modules/user.js

@@ -109,15 +109,16 @@
          })

        })

      },

      TideLogin({ commit }, code) {

      TideLogin(code) {

        return new Promise((resolve, reject) => {

          tideLogin(code)

              .then((res) => {

                setToken(res.token);

                commit("SET_TOKEN", res.token);

                Vue.prototype.uploadHeader = {

                  Authorization: "Bearer " + res.token,

                };

                this.token = res.token

                // commit("SET_TOKEN", res.token);

                // Vue.prototype.uploadHeader = {

                //   Authorization: "Bearer " + res.token,

                // };

                resolve();

              })

              .catch((error) => {


 src/utils/auth.js

@@ -3,13 +3,16 @@
const TokenKey = 'Admin-Token'



export function getToken() {

  return Cookies.get(TokenKey)

  // return Cookies.get(TokenKey)

    return sessionStorage.getItem(TokenKey)

}



export function setToken(token) {

  return Cookies.set(TokenKey, token)

  // return Cookies.set(TokenKey, token)

    return sessionStorage.setItem(TokenKey, token)

}



export function removeToken() {

  return Cookies.remove(TokenKey)

  // return Cookies.remove(TokenKey)

    return sessionStorage.removeItem(TokenKey)

}


 src/views/environmentAccess/accessManagement/index.vue

@@ -1,347 +1,512 @@
<template>
  <div class="app-container">
    <el-form :model="filters" :inline="true">
      <el-form-item label="门禁名称">
    <div class="search_form">
      <div>
        <span class="search_title">门禁名称：</span>
        <el-input
          v-model="filters.name"
          style="width: 240px"
          placeholder="请输入门禁名称"
          clearable
          :prefix-icon="Search"
          @change="getTableData"
            v-model="searchForm.customerName"
            style="width: 240px"
            placeholder="请输入"
            @change="handleQuery"
            clearable
            :prefix-icon="Search"
        />
      </el-form-item>
      <el-form-item label="门禁状态">
        <el-select
          v-model="filters.status"
          style="width: 240px"
          placeholder="请选择门禁状态"
          clearable
          @change="getTableData"
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
        >搜索</el-button
        >
          <el-option label="正常" value="1"></el-option>
          <el-option label="异常" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区域">
        <el-input
          v-model="filters.area"
          style="width: 240px"
          placeholder="请输入区域"
          clearable
          :prefix-icon="Search"
          @change="getTableData"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_list">
      <div class="actions">
        <div></div>
        <div>
          <el-button type="primary" @click="add" icon="Plus"> æ–°å¢ž </el-button>
          <el-button type="danger" icon="Delete" :disabled="multipleList.length <= 0" @click="batchDelete">批量删除</el-button>
        </div>
      </div>
      <PIMTable
        rowKey="id"
        isSelection
        :column="columns"
        :tableData="dataList"
        :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
      </PIMTable>
      <div>
        <el-button type="primary" @click="openForm('add')">新增</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
      </div>
    </div>
    <!-- æ–°å¢žç¼–辑弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
      <el-form :model="formData" label-width="100px">
        <el-form-item label="门禁名称" required>
          <el-input v-model="formData.name" placeholder="请输入门禁名称"></el-input>
        </el-form-item>
        <el-form-item label="区域" required>
          <el-input v-model="formData.area" placeholder="请输入区域"></el-input>
        </el-form-item>
        <el-form-item label="位置" required>
          <el-input v-model="formData.location" placeholder="请输入具体位置"></el-input>
        </el-form-item>
        <el-form-item label="状态" required>
          <el-select v-model="formData.status" placeholder="请选择状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="异常" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="formData.description" type="textarea" rows="3" placeholder="请输入描述信息"></el-input>
        </el-form-item>
    <div class="table_list">
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :page="page"
          :isSelection="true"
          @selection-change="handleSelectionChange"
          :tableLoading="tableLoading"
          @pagination="pagination"
      ></PIMTable>
    </div>
    <el-dialog
        v-model="dialogFormVisible"
        :title="operationType === 'add' ? '新增门禁信息' : '编辑门禁信息'"
        width="70%"
        @close="closeDia"
    >
      <el-form
          :model="form"
          label-width="140px"
          label-position="top"
          :rules="rules"
          ref="formRef"
      >
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="门禁名称：" prop="customerName">
              <el-input
                  v-model="form.customerName"
                  placeholder="请输入"
                  clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
                label="区域："
                prop="taxpayerIdentificationNumber"
            >
              <el-input
                  v-model="form.taxpayerIdentificationNumber"
                  placeholder="请输入"
                  clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="位置：" prop="companyAddress">
              <el-input
                  v-model="form.companyAddress"
                  placeholder="请输入"
                  clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维护人：" prop="maintainer">
              <el-select
                  v-model="form.maintainer"
                  placeholder="请选择"
                  clearable
                  disabled
              >
                <el-option
                    v-for="item in userList"
                    :key="item.nickName"
                    :label="item.nickName"
                    :value="item.nickName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维护时间：" prop="maintenanceTime">
              <el-date-picker
                  style="width: 100%"
                  v-model="form.maintenanceTime"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  type="date"
                  placeholder="请选择"
                  clearable
                  disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveData">确定</el-button>
        </span>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- ç”¨æˆ·å¯¼å…¥å¯¹è¯æ¡† -->
    <el-dialog
        :title="upload.title"
        v-model="upload.open"
        width="400px"
        append-to-body
    >
      <el-upload
          ref="uploadRef"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url + '?updateSupport=' + upload.updateSupport"
          :disabled="upload.isUploading"
          :before-upload="upload.beforeUpload"
          :on-progress="upload.onProgress"
          :on-success="upload.onSuccess"
          :on-error="upload.onError"
          :on-change="upload.onChange"
          :auto-upload="false"
          drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <!--            <el-link-->
            <!--              type="primary"-->
            <!--              :underline="false"-->
            <!--              style="font-size: 12px; vertical-align: baseline"-->
            <!--              @click="importTemplate"-->
            <!--              >下载模板</el-link-->
            <!--            >-->
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">ç¡® å®š</el-button>
          <el-button @click="upload.open = false">取 æ¶ˆ</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { Search, Plus, Delete } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import dayjs from 'dayjs';
import {onMounted, ref} from "vue";
import { Search } from "@element-plus/icons-vue";
import {
  addCustomer,
  delCustomer,
  getCustomer,
  listCustomer,
  updateCustomer,
} from "@/api/basicData/customerFile.js";
import { ElMessageBox } from "element-plus";
import { userListNoPage } from "@/api/system/user.js";
import useUserStore from "@/store/modules/user";
import { getToken } from "@/utils/auth.js";
const { proxy } = getCurrentInstance();
const userStore = useUserStore();

// å®šä¹‰å‡æ•°æ®
const mockData = [
  { id: 1, name: '东门门禁', area: '生产区', location: '东门入口', status: '1', lastUpdate: '2025-12-30 08:30:00', description: '主要用于员工上下班通行' },
  { id: 2, name: '西门门禁', area: '仓储区', location: '西门入口', status: '1', lastUpdate: '2025-12-30 09:15:00', description: '主要用于物流车辆通行' },
  { id: 3, name: '南门门禁', area: '办公区', location: '南门入口', status: '0', lastUpdate: '2025-12-30 10:20:00', description: '主要用于访客通行，当前故障' },
  { id: 4, name: '北门门禁', area: '生产区', location: '北门入口', status: '1', lastUpdate: '2025-12-30 11:45:00', description: '主要用于原材料运输车辆通行' },
  { id: 5, name: '中控室门禁', area: '中控区', location: '中控室门口', status: '1', lastUpdate: '2025-12-30 13:20:00', description: '仅限授权人员进入' },
];

// å“åº”式数据
const filters = reactive({
  name: '',
  status: '',
  area: ''
});

const dataList = ref([]);
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

const multipleList = ref([]);
const dialogVisible = ref(false);
const dialogTitle = ref('新增门禁');
const formData = reactive({
  id: '',
  name: '',
  area: '',
  location: '',
  status: '1',
  description: ''
});

// è¡¨æ ¼åˆ—配置
const columns = [
const tableColumn = ref([
  {
    label: '门禁名称',
    align: 'center',
    prop: 'name',
    label: "门禁名称",
    prop: "customerName",
    width: 220,
  },
  {
    label: '区域',
    align: 'center',
    prop: 'area',
    label: "区域",
    prop: "taxpayerIdentificationNumber",
    width: 220,
  },
  {
    label: '位置',
    align: 'center',
    prop: 'location',
    label: "位置",
    prop: "companyAddress",
    width: 220,
  },
  {
    label: '状态',
    align: 'center',
    prop: 'status',
    formatter: (row) => {
      return row.status === '1' ? '<el-tag type="success">正常</el-tag>' : '<el-tag type="danger">异常</el-tag>';
    }
    label: "维护人",
    prop: "maintainer",
  },
  {
    label: '最后更新',
    align: 'center',
    prop: 'lastUpdate',
    label: "维护时间",
    prop: "maintenanceTime",
    width: 100,
  },
  {
    label: '描述',
    align: 'center',
    prop: 'description',
  },
  {
    dataType: 'action',
    label: '操作',
    align: 'center',
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: 'right',
    width: 140,
    operation: [
      {
        name: '编辑',
        type: 'text',
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          edit(row);
          openForm("edit", row);
        },
      },
      {
        name: '删除',
        type: 'text',
        clickFun: (row) => {
          deleteRow(row.id);
        },
        disabled: (row) => {
          return row.maintainer !== userStore.nickName
        }
      },
    ],
  },
];

// è¿‡æ»¤åŽçš„数据
const filteredData = computed(() => {
  return mockData.filter(item => {
    const nameMatch = !filters.name || item.name.includes(filters.name);
    const statusMatch = !filters.status || item.status === filters.status;
    const areaMatch = !filters.area || item.area.includes(filters.area);
    return nameMatch && statusMatch && areaMatch;
  });
]);
const tableData = ref([]);
const selectedRows = ref([]);
const userList = ref([]);
const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 100,
  total: 0,
});
const total = ref(0);

// èŽ·å–表格数据
const getTableData = () => {
  pagination.total = filteredData.value.length;
  const start = (pagination.currentPage - 1) * pagination.pageSize;
  const end = start + pagination.pageSize;
  dataList.value = filteredData.value.slice(start, end);
};

// é‡ç½®è¿‡æ»¤å™¨
const resetFilters = () => {
  filters.name = '';
  filters.status = '';
  filters.area = '';
  pagination.currentPage = 1;
  getTableData();
};

// åˆ†é¡µå˜åŒ–
const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
  pagination.pageSize = limit;
  getTableData();
};

// å¤šé€‰å¤„理
const handleSelectionChange = (selectionList) => {
  multipleList.value = selectionList;
};

// æ–°å¢ž
const add = () => {
  dialogTitle.value = '新增门禁';
  formData.id = '';
  formData.name = '';
  formData.area = '';
  formData.location = '';
  formData.status = '1';
  formData.description = '';
  dialogVisible.value = true;
};

// ç¼–辑
const edit = (row) => {
  dialogTitle.value = '编辑门禁';
  formData.id = row.id;
  formData.name = row.name;
  formData.area = row.area;
  formData.location = row.location;
  formData.status = row.status;
  formData.description = row.description;
  dialogVisible.value = true;
};

// ä¿å­˜æ•°æ®
const saveData = () => {
  if (!formData.name || !formData.area || !formData.location) {
    ElMessage.warning('请填写必填字段');
    return;
  }

  const currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
  if (formData.id) {
    // ç¼–辑
    const index = mockData.findIndex(item => item.id === formData.id);
    if (index !== -1) {
      mockData[index] = {
        ...formData,
        lastUpdate: currentTime
      };
      ElMessage.success('编辑成功');
// ç”¨æˆ·ä¿¡æ¯è¡¨å•å¼¹æ¡†æ•°æ®
const operationType = ref("");
const dialogFormVisible = ref(false);
const formYYs = ref({    // å…¶ä»–字段...
  contactList: [
    {
      contactPerson: "",
      contactPhone: ""
    }
  } else {
    // æ–°å¢ž
    const newId = Math.max(...mockData.map(item => item.id), 0) + 1;
    mockData.unshift({
      ...formData,
      id: newId,
      lastUpdate: currentTime
  ]
});
const data = reactive({
  searchForm: {
    customerName: "",
  },
  form: {
    customerName: "",
    taxpayerIdentificationNumber: "",
    companyAddress: "",
    companyPhone: "",
    contactPerson: "",
    contactPhone: "",
    maintainer: "",
    maintenanceTime: "",
    basicBankAccount: "",
    bankAccount: "",
    bankCode: "",
  },
  rules: {
    customerName: [{ required: true, message: "请输入", trigger: "blur" }],
    taxpayerIdentificationNumber: [
      { required: true, message: "请输入", trigger: "blur" },
    ],
    companyAddress: [{ required: true, message: "请输入", trigger: "blur" }],
    companyPhone: [{ required: true, message: "请输入", trigger: "blur" }],
    // contactPerson: [{ required: true, message: "请输入", trigger: "blur" }],
    // contactPhone: [{ required: true, message: "请输入", trigger: "blur" }],
    maintainer: [{ required: false, message: "请选择", trigger: "change" }],
    maintenanceTime: [
      { required: false, message: "请选择", trigger: "change" },
    ],
    basicBankAccount: [{ required: true, message: "请输入", trigger: "blur" }],
    bankAccount: [{ required: true, message: "请输入", trigger: "blur" }],
    bankCode: [{ required: true, message: "请输入", trigger: "blur" }],
  },
});
const upload = reactive({
  // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚（客户导入）
  open: false,
  // å¼¹å‡ºå±‚标题（客户导入）
  title: "",
  // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
  isUploading: false,
  // è®¾ç½®ä¸Šä¼ çš„请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // ä¸Šä¼ çš„地址
  url: import.meta.env.VITE_APP_BASE_API + "/basic/customer/importData",
  // æ–‡ä»¶ä¸Šä¼ å‰çš„回调
  beforeUpload: (file) => {
    console.log('文件即将上传', file);
    // å¯ä»¥åœ¨æ­¤å¤„做文件类型或大小校验
    const isValid = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
    if (!isValid) {
      proxy.$modal.msgError("只能上传 Excel æ–‡ä»¶");
    }
    return isValid;
  },
  // æ–‡ä»¶çŠ¶æ€æ”¹å˜æ—¶çš„回调
  onChange: (file, fileList) => {
    console.log('文件状态改变', file, fileList);
  },
  // æ–‡ä»¶ä¸Šä¼ æˆåŠŸæ—¶çš„回调
  onSuccess: (response, file, fileList) => {
    console.log('上传成功', response, file, fileList);
    if(response.code === 200){
      proxy.$modal.msgSuccess("文件上传成功");
    }else if(response.code === 500){
      proxy.$modal.msgError(response.msg);
    }else{
      proxy.$modal.msgWarning(response.msg);
    }
  },
  // æ–‡ä»¶ä¸Šä¼ å¤±è´¥æ—¶çš„回调
  onError: (error, file, fileList) => {
    console.error('上传失败', error, file, fileList);
    proxy.$modal.msgError("文件上传失败");
  },
  // æ–‡ä»¶ä¸Šä¼ è¿›åº¦å›žè°ƒ
  onProgress: (event, file, fileList) => {
    console.log('上传中...', event.percent);
  }
});
const { searchForm, form, rules } = toRefs(data);
const addNewContact = () => {
  formYYs.value.contactList.push({
    contactPerson: "",
    contactPhone: ""
  });
};

const removeContact = (index) => {
  if (formYYs.value.contactList.length > 1) {
    formYYs.value.contactList.splice(index, 1);
  }
};
// æŸ¥è¯¢åˆ—表
/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
  page.current = 1;
  getList();
};
const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
const getList = () => {
  tableLoading.value = true;
  listCustomer({ ...searchForm.value, ...page }).then((res) => {
    tableLoading.value = false;
    tableData.value = res.records;
    page.total = res.total;
  });
};
// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
/** æäº¤ä¸Šä¼ æ–‡ä»¶ */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
}
/** å¯¼å…¥æŒ‰é’®æ“ä½œ */
function handleImport() {
  upload.title = "客户导入";
  upload.open = true;
}
// æ‰“开弹框
const openForm = (type, row) => {
  operationType.value = type;
  form.value = {};
  form.value.maintainer = userStore.nickName;
  formYYs.value.contactList = [
    {
      contactPerson: "",
      contactPhone: ""
    }
  ];
  form.value.maintenanceTime = getCurrentDate();
  userListNoPage().then((res) => {
    userList.value = res.data;
  });
  if (type === "edit") {
    getCustomer(row.id).then((res) => {
      form.value = { ...res.data };
      formYYs.value.contactList = res.data.contactPerson.split(",").map((item, index) => {
        return {
          contactPerson: item,
          contactPhone: res.data.contactPhone.split(",")[index]
        }
      });

    });
    ElMessage.success('新增成功');
  }
  dialogVisible.value = false;
  getTableData();
  dialogFormVisible.value = true;
};

// åˆ é™¤
const deleteRow = (id) => {
  ElMessageBox.confirm('此操作将永久删除该门禁记录, æ˜¯å¦ç»§ç»­?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const index = mockData.findIndex(item => item.id === id);
    if (index !== -1) {
      mockData.splice(index, 1);
      ElMessage.success('删除成功');
      getTableData();
    }
  }).catch(() => {});
};

// æ‰¹é‡åˆ é™¤
const batchDelete = () => {
  if (multipleList.value.length === 0) {
    ElMessage.warning('请选择要删除的数据');
    return;
  }

  ElMessageBox.confirm('此操作将永久删除所选门禁记录, æ˜¯å¦ç»§ç»­?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const ids = multipleList.value.map(item => item.id);
    mockData.forEach((item, index) => {
      if (ids.includes(item.id)) {
        mockData.splice(index, 1);
// æäº¤è¡¨å•
const submitForm = () => {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (operationType.value === "edit") {
        submitEdit();
      } else {
        submitAdd();
      }
    });
    ElMessage.success('删除成功');
    getTableData();
    multipleList.value = [];
  }).catch(() => {});
    }
  });
};
// æäº¤æ–°å¢ž
const submitAdd = () => {
  if(formYYs.value.contactList.length < 1){
    return proxy.$modal.msgWarning("请至少添加一个联系人");
  }
  form.value.contactPerson = formYYs.value.contactList.map(item => item.contactPerson).join(",");
  form.value.contactPhone = formYYs.value.contactList.map(item => item.contactPhone).join(",");
  addCustomer(form.value).then((res) => {
    proxy.$modal.msgSuccess("提交成功");
    closeDia();
    getList();
  });
};
// æäº¤ä¿®æ”¹
const submitEdit = () => {
  form.value.contactPerson = formYYs.value.contactList.map(item => item.contactPerson).join(",");
  form.value.contactPhone = formYYs.value.contactList.map(item => item.contactPhone).join(",");
  updateCustomer(form.value).then((res) => {
    proxy.$modal.msgSuccess("提交成功");
    closeDia();
    getList();
  });
};
// å…³é—­å¼¹æ¡†
const closeDia = () => {
  proxy.resetForm("formRef");
  dialogFormVisible.value = false;
};
// å¯¼å‡º
const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        proxy.download("/basic/customer/export", {}, "客户档案.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};
// åˆ é™¤
const handleDelete = () => {
  let ids = [];
  if (selectedRows.value.length > 0) {
    // æ£€æŸ¥æ˜¯å¦æœ‰ä»–人维护的数据
    const unauthorizedData = selectedRows.value.filter(item => item.maintainer !== userStore.nickName);
    if (unauthorizedData.length > 0) {
      proxy.$modal.msgWarning("不可删除他人维护的数据");
      return;
    }
    ids = selectedRows.value.map((item) => item.id);
  } else {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        tableLoading.value = true;
        delCustomer(ids)
            .then((res) => {
              proxy.$modal.msgSuccess("删除成功");
              getList();
            })
            .finally(() => {
              tableLoading.value = false;
            });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};

// åˆå§‹åŒ–数据
// èŽ·å–当前日期并格式化为 YYYY-MM-DD
function getCurrentDate() {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, "0"); // æœˆä»½ä»Ž0开始
  const day = String(today.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

onMounted(() => {
  getTableData();
  getList();
});
</script>

<style lang="scss" scoped>
.table_list {
  margin-top: unset;
}
.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
<style scoped lang="scss"></style>

 src/views/environmentAccess/intelligentInspectionManagement/index.vue

@@ -1,581 +1,466 @@
<template>
  <div class="app-container">
    <el-form :model="filters" :inline="true">
      <el-form-item label="巡检名称">
    <div class="search_form">
      <div>
        <span class="search_title">巡检名称：</span>
        <el-input
          v-model="filters.name"
          style="width: 240px"
          placeholder="请输入巡检名称"
          clearable
          :prefix-icon="Search"
          @change="getTableData"
            v-model="searchForm.supplierName"
            style="width: 240px"
            placeholder="输入巡检名称搜索"
            @change="handleQuery"
            clearable
            :prefix-icon="Search"
        />
      </el-form-item>
      <el-form-item label="巡检状态">
        <el-select
          v-model="filters.status"
          style="width: 240px"
          placeholder="请选择巡检状态"
          clearable
          @change="getTableData"
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
        >搜索</el-button
        >
          <el-option label="待执行" value="0"></el-option>
          <el-option label="执行中" value="1"></el-option>
          <el-option label="已完成" value="2"></el-option>
          <el-option label="已取消" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="巡检类型">
        <el-select
          v-model="filters.type"
          style="width: 240px"
          placeholder="请选择巡检类型"
          clearable
          @change="getTableData"
        >
          <el-option label="定期巡检" value="0"></el-option>
          <el-option label="临时巡检" value="1"></el-option>
          <el-option label="故障巡检" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_list">
      <div class="actions">
        <div></div>
        <div>
          <el-button type="primary" @click="add" icon="Plus"> æ–°å¢ž </el-button>
          <el-button
            type="danger"
            icon="Delete"
            :disabled="multipleList.length <= 0"
            @click="batchDelete"
            >批量删除</el-button
          >
        </div>
      </div>
      <PIMTable
        rowKey="id"
        isSelection
        :column="columns"
        :tableData="dataList"
        :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
      </PIMTable>
      <div>
        <el-button type="primary" @click="openForm('add')"
        >新增</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
      </div>
    </div>
    <!-- æ–°å¢žç¼–辑弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
      <el-form :model="formData" label-width="100px">
        <el-form-item label="巡检名称" required>
          <el-input
            v-model="formData.name"
            placeholder="请输入巡检名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="巡检类型" required>
          <el-select v-model="formData.type" placeholder="请选择巡检类型">
            <el-option label="定期巡检" value="0"></el-option>
            <el-option label="临时巡检" value="1"></el-option>
            <el-option label="故障巡检" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="巡检区域" required>
          <el-input
            v-model="formData.area"
            placeholder="请输入巡检区域"
          ></el-input>
        </el-form-item>
        <el-form-item label="巡检人员" required>
          <el-input
            v-model="formData.inspector"
            placeholder="请输入巡检人员"
          ></el-input>
        </el-form-item>
        <el-form-item label="计划开始时间" required>
          <el-date-picker
            v-model="formData.planStartTime"
            type="datetime"
            placeholder="请选择计划开始时间"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="计划结束时间" required>
          <el-date-picker
            v-model="formData.planEndTime"
            type="datetime"
            placeholder="请选择计划结束时间"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="巡检内容">
          <el-input
            v-model="formData.content"
            type="textarea"
            rows="3"
            placeholder="请输入巡检内容"
          ></el-input>
        </el-form-item>
    <div class="table_list">
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :page="page"
          :isSelection="true"
          @selection-change="handleSelectionChange"
          :tableLoading="tableLoading"
          @pagination="pagination"
      ></PIMTable>
    </div>
    <el-dialog
        v-model="dialogFormVisible"
        :title="operationType === 'add' ? '新增巡检信息' : '编辑巡检信息'"
        width="70%"
        @close="closeDia"
    >
      <el-form
          :model="form"
          label-width="140px"
          label-position="top"
          :rules="rules"
          ref="formRef"
      >
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="巡检名称：" prop="supplierName">
              <el-input
                  v-model="form.supplierName"
                  placeholder="请输入"
                  clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
                label="巡检类型："
                prop="taxpayerIdentificationNum"
            >
              <el-select style="width:100%" v-model="form.taxpayerIdentificationNum" clearable>
                <el-option v-for="(item,index) in typeList" :key="index" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="巡检区域：" prop="companyAddress">
              <el-input
                  v-model="form.companyAddress"
                  placeholder="请输入"
                  clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划开始时间：" prop="companyPhone">
              <el-date-picker style="width:100%" clearable value-format="YYYY-MM-DD" type="date" placeholder="选择日期时间" v-model="form.companyPhone"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="计划结束时间：" prop="bankAccountName">
              <el-date-picker style="width:100%" clearable value-format="YYYY-MM-DD" type="date" placeholder="选择日期时间" v-model="form.bankAccountName"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际开始时间：" prop="bankAccountNum">
              <el-date-picker style="width:100%" clearable value-format="YYYY-MM-DD" type="date" placeholder="选择日期时间" v-model="form.bankAccountNum"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="实际结束时间：" prop="contactUserName">
              <el-date-picker style="width:100%" clearable value-format="YYYY-MM-DD" type="date" placeholder="选择日期时间" v-model="form.contactUserName"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="巡检人员：" prop="contactUserPhone">
              <el-input
                  v-model="form.contactUserPhone"
                  placeholder="请输入"
                  clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveData">确定</el-button>
        </span>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- ä¾›åº”商导入对话框 -->
    <el-dialog
        :title="upload.title"
        v-model="upload.open"
        width="400px"
        append-to-body
    >
      <el-upload
          ref="uploadRef"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url + '?updateSupport=' + upload.updateSupport"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <!-- <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate"
              >下载模板</el-link
            > -->
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">ç¡® å®š</el-button>
          <el-button @click="upload.open = false">取 æ¶ˆ</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { Search, Plus, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import { onMounted, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { delSupplier } from "@/api/basicData/supplierManageFile.js";
import { ElMessageBox } from "element-plus";
import { userListNoPage } from "@/api/system/user.js";
import {
  addSupplier,
  getSupplier,
  listSupplier,
  updateSupplier,
} from "@/api/basicData/supplierManageFile.js";
import useUserStore from "@/store/modules/user";
import { getToken } from "@/utils/auth.js";
const { proxy } = getCurrentInstance();
const userStore = useUserStore();

// å®šä¹‰å‡æ•°æ®
const mockData = [
  {
    id: 1,
    name: "东门区域日常巡检",
    type: "0",
    status: "2",
    planStartTime: "2025-12-30 08:00:00",
    planEndTime: "2025-12-30 09:00:00",
    actualStartTime: "2025-12-30 08:05:00",
    actualEndTime: "2025-12-30 08:55:00",
    inspector: "张三",
    area: "东门区域",
    content: "检查门禁设备运行状态、环境监测设备数据",
  },
  {
    id: 2,
    name: "西门区域临时巡检",
    type: "1",
    status: "2",
    planStartTime: "2025-12-30 10:00:00",
    planEndTime: "2025-12-30 11:00:00",
    actualStartTime: "2025-12-30 10:00:00",
    actualEndTime: "2025-12-30 10:45:00",
    inspector: "李四",
    area: "西门区域",
    content: "检查异常报警设备",
  },
  {
    id: 3,
    name: "南门门禁故障巡检",
    type: "2",
    status: "1",
    planStartTime: "2025-12-30 13:00:00",
    planEndTime: "2025-12-30 14:00:00",
    actualStartTime: "2025-12-30 13:10:00",
    actualEndTime: "",
    inspector: "王五",
    area: "南门区域",
    content: "修复门禁故障",
  },
  {
    id: 4,
    name: "中控室定期巡检",
    type: "0",
    status: "0",
    planStartTime: "2025-12-31 09:00:00",
    planEndTime: "2025-12-31 10:00:00",
    actualStartTime: "",
    actualEndTime: "",
    inspector: "赵六",
    area: "中控区域",
    content: "检查监控设备、服务器运行状态",
  },
  {
    id: 5,
    name: "北门区域日常巡检",
    type: "0",
    status: "2",
    planStartTime: "2025-12-30 15:00:00",
    planEndTime: "2025-12-30 16:00:00",
    actualStartTime: "2025-12-30 15:00:00",
    actualEndTime: "2025-12-30 15:50:00",
    inspector: "张三",
    area: "北门区域",
    content: "检查车辆识别设备、道闸运行状态",
  },
];

// å“åº”式数据
const filters = reactive({
  name: "",
  status: "",
  type: "",
});

const dataList = ref([]);
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
});

const multipleList = ref([]);
const dialogVisible = ref(false);
const dialogTitle = ref("新增巡检");
const formData = reactive({
  id: "",
  name: "",
  type: "0",
  status: "0",
  planStartTime: "",
  planEndTime: "",
  actualStartTime: "",
  actualEndTime: "",
  inspector: "",
  area: "",
  content: "",
});

// çŠ¶æ€æ˜ å°„
const statusMap = {
  '0': '<el-tag type="warning">待执行</el-tag>',
  '1': '<el-tag type="primary">执行中</el-tag>',
  '2': '<el-tag type="success">已完成</el-tag>',
  '3': '<el-tag type="danger">已取消</el-tag>',
};

// ç±»åž‹æ˜ å°„
const typeMap = {
  0: "定期巡检",
  1: "临时巡检",
  2: "故障巡检",
};

// è¡¨æ ¼åˆ—配置
const columns = [
const tableColumn = ref([
  {
    label: "巡检名称",
    align: "center",
    prop: "name",
    prop: "supplierName",
    width: 250,
  },
  {
    label: "巡检类型",
    align: "center",
    prop: "type",
    formatter: (row) => {
      return typeMap[row.type];
    },
  },
  {
    label: "巡检状态",
    align: "center",
    prop: "status",
    formatter: (row) => {
      return statusMap[row.status];
    },
    prop: "taxpayerIdentificationNum",
    width: 230,
  },
  {
    label: "计划开始时间",
    align: "center",
    prop: "planStartTime",
    prop: "companyPhone",
    width:150
  },
  {
    label: "计划结束时间",
    align: "center",
    prop: "planEndTime",
    prop: "bankAccountName",
    width: 220,
  },
  {
    label: "实际开始时间",
    align: "center",
    prop: "actualStartTime",
    formatter: (row) => {
      return row.actualStartTime || "-";
    },
    prop: "bankAccountNum",
    width: 220,
  },
  {
    label: "实际结束时间",
    align: "center",
    prop: "actualEndTime",
    formatter: (row) => {
      return row.actualEndTime || "-";
    },
    prop: "contactUserName",
  },
  {
    label: "巡检人员",
    align: "center",
    prop: "inspector",
    prop: "contactUserPhone",
    width: 150,
  },
  {
    label: "巡检区域",
    align: "center",
    prop: "area",
    prop: "companyAddress",
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 180,
    fixed: 'right',
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          edit(row);
          openForm("edit", row);
        },
      },
      {
        name: "开始执行",
        type: "text",
        clickFun: (row) => {
          startInspection(row);
        },
        visible: (row) => {
          return row.status === "0";
        },
      },
      {
        name: "完成巡检",
        type: "text",
        clickFun: (row) => {
          completeInspection(row);
        },
        visible: (row) => {
          return row.status === "1";
        },
      },
      {
        name: "取消巡检",
        type: "text",
        clickFun: (row) => {
          cancelInspection(row);
        },
        visible: (row) => {
          return ["0", "1"].includes(row.status);
        },
      },
      {
        name: "删除",
        type: "text",
        clickFun: (row) => {
          deleteRow(row.id);
        },
        disabled: (row) => {
          return row.maintainUserName !== userStore.nickName
        }
      },
    ],
  },
];

// è¿‡æ»¤åŽçš„数据
const filteredData = computed(() => {
  return mockData.filter((item) => {
    const nameMatch = !filters.name || item.name.includes(filters.name);
    const statusMatch = !filters.status || item.status === filters.status;
    const typeMatch = !filters.type || item.type === filters.type;
    return nameMatch && statusMatch && typeMatch;
  });
]);
const tableData = ref([]);
const selectedRows = ref([]);
const userList = ref([]);
const tableLoading = ref(false);
const page = reactive({
  current: 1,
  size: 100,
  total: 0,
});
const typeList = ref([
  { label: "日常巡检", value: "日常巡检" },
  { label: "专项巡检", value: "专项巡检" },
  { label: "临时巡检", value: "临时巡检" },
]);

// èŽ·å–表格数据
const getTableData = () => {
  pagination.total = filteredData.value.length;
  const start = (pagination.currentPage - 1) * pagination.pageSize;
  const end = start + pagination.pageSize;
  dataList.value = filteredData.value.slice(start, end);
// ç”¨æˆ·ä¿¡æ¯è¡¨å•å¼¹æ¡†æ•°æ®
const operationType = ref("");
const dialogFormVisible = ref(false);
const data = reactive({
  searchForm: {
    supplierName: "",
  },
  form: {
    supplierName: "",
    taxpayerIdentificationNum: "",
    companyAddress: "",
    companyPhone: "",
    bankAccountName: "",
    bankAccountNum: "",
    contactUserName: "",
    contactUserPhone: "",
    maintainUserId: "",
    maintainTime: "",
  },
  rules: {
    supplierName: [{ required: true, message: "请输入", trigger: "blur" }],
    taxpayerIdentificationNum: [
      { required: true, message: "请输入", trigger: "blur" },
    ],
    companyAddress: [{ required: true, message: "请输入", trigger: "blur" }],
    companyPhone: [{ required: true, message: "请输入", trigger: "blur" }],
    bankAccountName: [{ required: true, message: "请输入", trigger: "blur" }],
    bankAccountNum: [{ required: true, message: "请输入", trigger: "blur" }],
    contactUserName: [{ required: false, message: "请输入", trigger: "blur" }],
    contactUserPhone: [{ required: false, message: "请输入", trigger: "blur" }],
    maintainUserId: [{ required: false, message: "请选择", trigger: "change" }],
    maintainTime: [{ required: false, message: "请选择", trigger: "change" }],
  },
});
const { searchForm, form, rules } = toRefs(data);

// æŸ¥è¯¢åˆ—表
/** æœç´¢æŒ‰é’®æ“ä½œ */
const handleQuery = () => {
  page.current = 1;
  getList();
};
const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
/** æäº¤ä¸Šä¼ æ–‡ä»¶ */
function submitFileForm() {
  console.log(upload.url + '?updateSupport=' + upload.updateSupport)
  proxy.$refs["uploadRef"].submit();
}
const getList = () => {
  tableLoading.value = true;
  listSupplier({ ...searchForm.value, ...page }).then((res) => {
    tableLoading.value = false;
    tableData.value = res.data.records;
    page.total = res.data.total;
  });
};
const upload = reactive({
  // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚（供应商导入）
  open: false,
  // å¼¹å‡ºå±‚标题（供应商导入）
  title: "",
  // æ˜¯å¦ç¦ç”¨ä¸Šä¼ 
  isUploading: false,
  // æ˜¯å¦æ›´æ–°å·²ç»å­˜åœ¨çš„用户数据
  updateSupport: 1,
  // è®¾ç½®ä¸Šä¼ çš„请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // ä¸Šä¼ çš„地址
  url: import.meta.env.VITE_APP_BASE_API + "/system/supplier/import",
});
/** å¯¼å…¥æŒ‰é’®æ“ä½œ */
function handleImport() {
  upload.title = "供应商导入";
  upload.open = true;
}

/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {
  upload.isUploading = true;
};

// é‡ç½®è¿‡æ»¤å™¨
const resetFilters = () => {
  filters.name = "";
  filters.status = "";
  filters.type = "";
  pagination.currentPage = 1;
  getTableData();
/** æ–‡ä»¶ä¸Šä¼ æˆåŠŸå¤„理 */
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs["uploadRef"].handleRemove(file);
  getList();
};

// åˆ†é¡µå˜åŒ–
const changePage = ({ page, limit }) => {
  pagination.currentPage = page;
  pagination.pageSize = limit;
  getTableData();
// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// å¤šé€‰å¤„理
const handleSelectionChange = (selectionList) => {
  multipleList.value = selectionList;
};

// æ–°å¢ž
const add = () => {
  dialogTitle.value = "新增巡检";
  formData.id = "";
  formData.name = "";
  formData.type = "0";
  formData.status = "0";
  formData.planStartTime = "";
  formData.planEndTime = "";
  formData.actualStartTime = "";
  formData.actualEndTime = "";
  formData.inspector = "";
  formData.area = "";
  formData.content = "";
  dialogVisible.value = true;
};

// ç¼–辑
const edit = (row) => {
  dialogTitle.value = "编辑巡检";
  formData.id = row.id;
  formData.name = row.name;
  formData.type = row.type;
  formData.status = row.status;
  formData.planStartTime = row.planStartTime;
  formData.planEndTime = row.planEndTime;
  formData.actualStartTime = row.actualStartTime;
  formData.actualEndTime = row.actualEndTime;
  formData.inspector = row.inspector;
  formData.area = row.area;
  formData.content = row.content;
  dialogVisible.value = true;
};

// ä¿å­˜æ•°æ®
const saveData = () => {
  if (
    !formData.name ||
    !formData.planStartTime ||
    !formData.planEndTime ||
    !formData.inspector ||
    !formData.area
  ) {
    ElMessage.warning("请填写必填字段");
    return;
  }

  if (formData.id) {
    // ç¼–辑
    const index = mockData.findIndex((item) => item.id === formData.id);
    if (index !== -1) {
      mockData[index] = {
        ...mockData[index],
        ...formData,
      };
      ElMessage.success("编辑成功");
    }
  } else {
    // æ–°å¢ž
    const newId = Math.max(...mockData.map((item) => item.id), 0) + 1;
    mockData.unshift({
      ...formData,
      id: newId,
// æ‰“开弹框
const openForm = (type, row) => {
  operationType.value = type;
  form.value = {};
  form.value.maintainUserId = userStore.id;
  form.value.maintainTime = getCurrentDate();
  userListNoPage().then((res) => {
    userList.value = res.data;
  });
  if (type === "edit") {
    getSupplier(row.id).then((res) => {
      form.value = { ...res.data };
    });
    ElMessage.success("新增成功");
  }
  dialogVisible.value = false;
  getTableData();
  dialogFormVisible.value = true;
};

// å¼€å§‹å·¡æ£€
const startInspection = (row) => {
  const index = mockData.findIndex((item) => item.id === row.id);
  if (index !== -1) {
    mockData[index].status = "1";
    mockData[index].actualStartTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
    ElMessage.success("巡检已开始");
    getTableData();
  }
// æäº¤è¡¨å•
const submitForm = () => {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (operationType.value === "edit") {
        submitEdit();
      } else {
        submitAdd();
      }
    }
  });
};

// å®Œæˆå·¡æ£€
const completeInspection = (row) => {
  const index = mockData.findIndex((item) => item.id === row.id);
  if (index !== -1) {
    mockData[index].status = "2";
    mockData[index].actualEndTime = dayjs().format("YYYY-MM-DD HH:mm:ss");
    ElMessage.success("巡检已完成");
    getTableData();
  }
// æäº¤æ–°å¢ž
const submitAdd = () => {
  addSupplier(form.value).then((res) => {
    proxy.$modal.msgSuccess("提交成功");
    closeDia();
    getList();
  });
};

// å–消巡检
const cancelInspection = (row) => {
  ElMessageBox.confirm("确定要取消该巡检吗?", "提示", {
    confirmButtonText: "确定",
// æäº¤ä¿®æ”¹
const submitEdit = () => {
  updateSupplier(form.value).then((res) => {
    proxy.$modal.msgSuccess("提交成功");
    closeDia();
    getList();
  });
};
// å…³é—­å¼¹æ¡†
const closeDia = () => {
  proxy.resetForm("formRef");
  dialogFormVisible.value = false;
};
// å¯¼å‡º
const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const index = mockData.findIndex((item) => item.id === row.id);
      if (index !== -1) {
        mockData[index].status = "3";
        ElMessage.success("巡检已取消");
        getTableData();
      }
    })
    .catch(() => {});
      .then(() => {
        proxy.download("/system/supplier/export", {}, "供应商档案.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};

// åˆ é™¤
const deleteRow = (id) => {
  ElMessageBox.confirm("此操作将永久删除该巡检记录, æ˜¯å¦ç»§ç»­?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const index = mockData.findIndex((item) => item.id === id);
      if (index !== -1) {
        mockData.splice(index, 1);
        ElMessage.success("删除成功");
        getTableData();
      }
    })
    .catch(() => {});
};

// æ‰¹é‡åˆ é™¤
const batchDelete = () => {
  if (multipleList.value.length === 0) {
    ElMessage.warning("请选择要删除的数据");
const handleDelete = () => {
  let ids = [];
  if (selectedRows.value.length > 0) {
    // æ£€æŸ¥æ˜¯å¦æœ‰ä»–人维护的数据
    const unauthorizedData = selectedRows.value.filter(item => item.maintainUserName !== userStore.nickName);
    if (unauthorizedData.length > 0) {
      proxy.$modal.msgWarning("不可删除他人维护的数据");
      return;
    }
    ids = selectedRows.value.map((item) => item.id);
  } else {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }

  ElMessageBox.confirm("此操作将永久删除所选巡检记录, æ˜¯å¦ç»§ç»­?", "提示", {
    confirmButtonText: "确定",
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const ids = multipleList.value.map((item) => item.id);
      mockData.forEach((item, index) => {
        if (ids.includes(item.id)) {
          mockData.splice(index, 1);
        }
      .then(() => {
        tableLoading.value = true;
        delSupplier(ids)
            .then((res) => {
              proxy.$modal.msgSuccess("删除成功");
              getList();
            })
            .finally(() => {
              tableLoading.value = false;
            });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
      ElMessage.success("删除成功");
      getTableData();
      multipleList.value = [];
    })
    .catch(() => {});
};

// åˆå§‹åŒ–数据
// èŽ·å–当前日期并格式化为 YYYY-MM-DD
function getCurrentDate() {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, "0"); // æœˆä»½ä»Ž0开始
  const day = String(today.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

onMounted(() => {
  getTableData();
  getList();
});
</script>

<style lang="scss" scoped>
.table_list {
  margin-top: unset;
}
.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
<style scoped lang="scss"></style>

 src/views/environmentAccess/remoteMonitoringOfEquipment/index.vue

ÎļþÒÑɾ³ý

 src/views/environmentAccess/vehicleInfoAudit/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,499 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">车牌号码：</span>
        <el-input
          v-model="searchForm.plateNo"
          style="width: 240px"
          placeholder="请输入车牌号码"
          clearable
          :prefix-icon="Search"
          @change="handleQuery"
        />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
          æœç´¢
        </el-button>
      </div>
      <div>
        <el-button type="primary" @click="openForm('add')">新增</el-button>
        <el-button type="danger" plain @click="handleDelete">删除</el-button>
      </div>
    </div>

    <div class="table_list">
      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :isSelection="true"
        :tableLoading="tableLoading"
        @selection-change="handleSelectionChange"
        @pagination="pagination"
      />
    </div>

    <!-- æ–°å¢ž/编辑车辆信息弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="operationType === 'add' ? '新增车辆信息' : '编辑车辆信息'"
      width="70%"
      @close="closeFormDialog"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="140px"
        label-position="top"
      >
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="车牌号码" prop="plateNo">
              <el-input v-model="form.plateNo" placeholder="请输入车牌号码" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="号牌颜色" prop="plateColor">
              <el-input v-model="form.plateColor" placeholder="请输入号牌颜色" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="车辆类型" prop="carType">
              <el-input v-model="form.carType" placeholder="请输入车辆类型" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆识别代码(VIN)" prop="carVin">
              <el-input v-model="form.carVin" placeholder="请输入 VIN ç " clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="车辆型号" prop="carModel">
              <el-input v-model="form.carModel" placeholder="请输入车辆型号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发动机型号" prop="engineModel">
              <el-input v-model="form.engineModel" placeholder="请输入发动机型号" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="发动机生产厂" prop="engineProductFactory">
              <el-input v-model="form.engineProductFactory" placeholder="请输入发动机生产厂" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发动机编号" prop="engineNo">
              <el-input v-model="form.engineNo" placeholder="请输入发动机编号" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="排放标准" prop="emissionStandard">
              <el-input v-model="form.emissionStandard" placeholder="请输入排放标准" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注册登记日期" prop="registeDate">
              <el-date-picker
                v-model="form.registeDate"
                type="date"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                placeholder="请选择注册登记日期"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="使用性质" prop="natureOfUse">
              <el-input v-model="form.natureOfUse" placeholder="请输入使用性质" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="燃料类型" prop="fuelType">
              <el-input v-model="form.fuelType" placeholder="请输入燃料类型" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="closeFormDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- å®¡æ ¸å¼¹çª— -->
    <el-dialog
      v-model="auditDialogVisible"
      title="车辆信息审核"
      width="500px"
      @close="closeAuditDialog"
    >
      <el-form :model="auditForm" label-width="100px">
        <el-form-item label="审核结果" prop="status">
          <el-radio-group v-model="auditForm.status">
            <el-radio label="approved">通过</el-radio>
            <el-radio label="rejected">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="comment">
          <el-input
            v-model="auditForm.comment"
            type="textarea"
            :rows="3"
            placeholder="请输入审核意见（选填）"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitAudit">确认</el-button>
          <el-button @click="closeAuditDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PIMTable from "@/components/PIMTable/PIMTable.vue";
import {
  listVehicleInfo,
  addVehicleInfo,
  updateVehicleInfo,
  delVehicleInfo,
  reviewVehicleInfo,
} from "@/api/environmentAccess/vehicleInfo";

// æŸ¥è¯¢æ¡ä»¶
const searchForm = reactive({
  plateNo: "",
});

// è¡¨æ ¼åˆ—配置
const tableColumn = ref([
  {
    label: "车牌号码",
    prop: "plateNo",
    align: "center",
    width: 140,
  },
  {
    label: "号牌颜色",
    prop: "plateColor",
    align: "center",
    width: 100,
  },
  {
    label: "车辆类型",
    prop: "carType",
    align: "center",
    width: 120,
  },
  {
    label: "车辆识别代码(VIN)",
    prop: "carVin",
    align: "center",
    minWidth: 200,
    showOverflowTooltip: true,
  },
  {
    label: "车辆型号",
    prop: "carModel",
    align: "center",
    width: 140,
  },
  {
    label: "发动机型号",
    prop: "engineModel",
    align: "center",
    width: 140,
  },
  {
    label: "发动机生产厂",
    prop: "engineProductFactory",
    align: "center",
    width: 160,
  },
  {
    label: "发动机编号",
    prop: "engineNo",
    align: "center",
    width: 140,
  },
  {
    label: "排放标准",
    prop: "emissionStandard",
    align: "center",
    width: 120,
  },
  {
    label: "注册登记日期",
    prop: "registeDate",
    align: "center",
    width: 140,
  },
  {
    label: "使用性质",
    prop: "natureOfUse",
    align: "center",
    width: 120,
  },
  {
    label: "燃料类型",
    prop: "fuelType",
    align: "center",
    width: 120,
  },
  {
    label: "审核状态",
    prop: "reviewStatus",
    align: "center",
    dataType: "tag",
    width: 120,
    formatData: (value) => {
      if (value === "approved") return "已通过";
      if (value === "rejected") return "未通过";
      if (value === "pending") return "待审核";
      return "未提交";
    },
    formatType: (value) => {
      if (value === "approved") return "success";
      if (value === "rejected") return "danger";
      if (value === "pending") return "warning";
      return "";
    },
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 220,
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => openForm("edit", row),
      },
      {
        name: "审核",
        type: "text",
        clickFun: (row) => openAuditDialog(row),
      },
      {
        name: "删除",
        type: "text",
        clickFun: (row) => deleteRow(row),
      },
    ],
  },
]);

// è¡¨æ ¼æ•°æ®
const tableData = ref([]);
const tableLoading = ref(false);
const selectedRows = ref([]);

// åˆ†é¡µ
const page = reactive({
  current: 1,
  size: 10,
  total: 0,
});

// è¡¨å•ç›¸å…³
const dialogVisible = ref(false);
const operationType = ref("add");
const formRef = ref(null);
const form = reactive(createEmptyForm());

function createEmptyForm() {
  return {
    id: undefined,
    plateNo: "",
    plateColor: "",
    carType: "",
    carVin: "",
    carModel: "",
    engineModel: "",
    engineProductFactory: "",
    engineNo: "",
    emissionStandard: "",
    registeDate: "",
    natureOfUse: "",
    fuelType: "",
    reviewStatus: "pending",
  };
}

const rules = {
  plateNo: [{ required: true, message: "请输入车牌号码", trigger: "blur" }],
  carVin: [{ required: true, message: "请输入 VIN ç ", trigger: "blur" }],
};

// å®¡æ ¸ç›¸å…³
const auditDialogVisible = ref(false);
const currentAuditRow = ref(null);
const auditForm = reactive({
  status: "approved",
  comment: "",
});

// æŸ¥è¯¢
function handleQuery() {
  page.current = 1;
  loadTableData();
}

// åŠ è½½æ•°æ®
function loadTableData() {
  tableLoading.value = true;
  listVehicleInfo({
    pageNum: page.current,
    pageSize: page.size,
    ...searchForm,
  })
    .then((res) => {
      const { records, total } = res.data;
      tableData.value = records || [];
      page.total = total || 0;
    })
    .finally(() => {
      tableLoading.value = false;
    });
}

// åˆ†é¡µå˜åŒ–
function pagination({ page: current, limit }) {
  page.current = current;
  page.size = limit;
  loadTableData();
}

// é€‰æ‹©è¡Œ
function handleSelectionChange(selection) {
  selectedRows.value = selection;
}

// æ‰“开表单
function openForm(type, row) {
  operationType.value = type;
  if (type === "edit" && row) {
    Object.assign(form, row);
  } else {
    Object.assign(form, createEmptyForm());
  }
  dialogVisible.value = true;
}

function closeFormDialog() {
  dialogVisible.value = false;
  formRef.value?.resetFields();
}

// æäº¤è¡¨å•
function submitForm() {
  formRef.value?.validate((valid) => {
    if (!valid) return;

    const api = operationType.value === "add" ? addVehicleInfo : updateVehicleInfo;
    api({ ...form })
      .then(() => {
        ElMessage.success(operationType.value === "add" ? "新增成功" : "编辑成功");
        dialogVisible.value = false;
        loadTableData();
      })
      .catch(() => {});
  });
}

// åˆ é™¤å•æ¡
function deleteRow(row) {
  ElMessageBox.confirm("确认删除该车辆信息吗？", "提示", {
    type: "warning",
  })
    .then(() => {
      delVehicleInfo([row.id]).then(() => {
        ElMessage.success("删除成功");
        loadTableData();
      });
    })
    .catch(() => {});
}

// æ‰¹é‡åˆ é™¤
function handleDelete() {
  if (!selectedRows.value.length) {
    ElMessage.warning("请先选择要删除的记录");
    return;
  }
  ElMessageBox.confirm("确认删除选中的车辆信息吗？", "提示", {
    type: "warning",
  })
    .then(() => {
      const ids = selectedRows.value.map((item) => item.id);
      delVehicleInfo(ids).then(() => {
        ElMessage.success("删除成功");
        loadTableData();
      });
    })
    .catch(() => {});
}

// æ‰“开审核弹窗
function openAuditDialog(row) {
  currentAuditRow.value = row;
  auditForm.status = row.reviewStatus || "pending";
  auditForm.comment = row.auditComment || "";
  auditDialogVisible.value = true;
}

function closeAuditDialog() {
  auditDialogVisible.value = false;
}

// æäº¤å®¡æ ¸
function submitAudit() {
  if (!currentAuditRow.value) return;

  reviewVehicleInfo({
    id: currentAuditRow.value.id,
    reviewStatus: auditForm.status,
    auditComment: auditForm.comment,
  })
    .then(() => {
      ElMessage.success("审核完成");
      auditDialogVisible.value = false;
      loadTableData();
    })
    .catch(() => {});
}

// åˆå§‹åŒ–
loadTableData();
</script>

<style scoped lang="scss">
.table_list {
  margin-top: 20px;
}
</style>


 src/views/environmentAccess/vehicleInformationCollection/index.vue

ÎļþÒÑɾ³ý

 src/views/equipmentManagement/ledger/Form.vue

@@ -1,24 +1,24 @@
<template>
  <el-form :model="form" label-width="100px" :rules="formRules" ref="formRef">
  <el-form :model="form" label-width="120px" :rules="formRules" ref="formRef">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
        <el-form-item label="监控设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入监控设备名称" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="规格型号" prop="deviceModel">
          <el-input v-model="form.deviceModel" :disabled="(form.deviceModel != null && operationType === 'edit')" placeholder="请输入规格型号" />
        <el-form-item label="温度监测参数" prop="deviceModel">
          <el-input v-model="form.deviceModel" :disabled="(form.deviceModel != null && operationType === 'edit')" placeholder="请输入温度监测参数" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="供应商" prop="supplierName">
          <el-input v-model="form.supplierName" placeholder="请输入供应商" />
        <el-form-item label="压力监测参数" prop="supplierName">
          <el-input v-model="form.supplierName" placeholder="请输入压力监测参数" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="单位" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入单位" />
        <el-form-item label="能耗监测参数" prop="unit">
          <el-input v-model="form.unit" placeholder="请输入能耗监测参数" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
@@ -31,17 +31,17 @@
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="含税单价" prop="taxIncludingPriceUnit">
        <el-form-item label="监控阈值上限" prop="taxIncludingPriceUnit">
          <el-input-number :step="0.01" :min="0" style="width: 100%"
            v-model="form.taxIncludingPriceUnit"
            placeholder="请输入含税单价"
            placeholder="请输入监控阈值上限"
            maxlength="10"
            @change="mathNum"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="含税总价" prop="taxIncludingPriceTotal">
        <el-form-item label="监控阈值下限" prop="taxIncludingPriceTotal">
          <el-input
            v-model="form.taxIncludingPriceTotal"
            placeholder="自动生成"
@@ -51,17 +51,10 @@
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="税率(%)" prop="taxRate">
          <!-- <el-input
            v-model="form.taxRate"
            placeholder="请输入税率"
            type="number"
          >
            <template #append> % </template>
          </el-input> -->
        <el-form-item label="实时监测值" prop="taxRate">
          <el-select
            v-model="form.taxRate"
            placeholder="请选择"
            placeholder="请选择实时监测值"
            clearable
            @change="mathNum"
          >
@@ -72,7 +65,7 @@
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="不含税总价" prop="unTaxIncludingPriceTotal">
        <el-form-item label="累计能耗" prop="unTaxIncludingPriceTotal">
          <el-input
            v-model="form.unTaxIncludingPriceTotal"
            placeholder="自动生成"
@@ -87,14 +80,14 @@
        </el-form-item>
      </el-col> -->
      <el-col :span="12">
        <el-form-item label="录入日期" prop="createTime">
        <el-form-item label="监控日期" prop="createTime">
          <el-date-picker
            style="width: 100%"
            v-model="form.createTime"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="date"
            placeholder="请选择录入日期"
            placeholder="请选择监控日期"
            clearable
          />
        </el-form-item>
@@ -165,7 +158,7 @@

const mathNum = () => {
  if (!form.taxIncludingPriceUnit) {
    ElMessage.error("请输入单价");
    ElMessage.error("请输入监控阈值上限");
    return;
  }
  if (!form.number) {

 src/views/equipmentManagement/ledger/index.vue

@@ -1,47 +1,52 @@
<template>
  <div class="app-container">
    <!-- é¡µé¢åŠŸèƒ½è¯´æ˜Žï¼Œä»…作为描述，不作为具体字段 -->
    <el-form :model="filters" :inline="true">
      <el-form-item label="设备名称">
      <!-- ç›‘控设备基础信息筛选 -->
      <el-form-item label="监控设备名称">
        <el-input
          v-model="filters.deviceName"
          style="width: 240px"
          placeholder="请输入设备名称"
          placeholder="请输入监控设备名称"
          clearable
          :prefix-icon="Search"
          @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="规格型号">
      <!-- æ¸©åº¦ç›‘测字段（英文字段 deviceModel ä¸å˜ï¼‰ -->
      <el-form-item label="温度监测参数">
        <el-input
            v-model="filters.deviceModel"
            style="width: 240px"
            placeholder="请输入规格型号"
            placeholder="请输入温度相关监测参数"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="供应商">
      <!-- åŽ‹åŠ›ç›‘测字段（英文字段 supplierName ä¸å˜ï¼‰ -->
      <el-form-item label="压力监测参数">
        <el-input
            v-model="filters.supplierName"
            style="width: 240px"
            placeholder="请输入供应商"
            placeholder="请输入压力相关监测参数"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="单位">
      <!-- èƒ½è€—监测字段（英文字段 unit ä¸å˜ï¼‰ -->
      <el-form-item label="能耗监测参数">
        <el-input
            v-model="filters.unit"
            style="width: 240px"
            placeholder="请输入单位"
            placeholder="请输入能耗相关监测参数"
            clearable
            :prefix-icon="Search"
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="录入日期:">
      <el-form-item label="监控日期:">
        <el-date-picker v-model="filters.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                        placeholder="请选择" clearable @change="changeDaterange" />
      </el-form-item>
@@ -55,7 +60,7 @@
        <div></div>
        <div>
          <el-button type="primary" @click="add" icon="Plus"> æ–°å¢ž </el-button>
          <el-button @click="handleOut" icon="download">导出</el-button>
          <!-- <el-button @click="handleOut" icon="download">导出</el-button> -->
          <el-button
            type="danger"
            icon="Delete"
@@ -109,7 +114,8 @@
import {Search} from "@element-plus/icons-vue";

defineOptions({
  name: "设备台账",
  // é¡µé¢åŠŸèƒ½ï¼šè®¾å¤‡è¿œç¨‹ç›‘控
  name: "设备远程监控",
});

// è¡¨æ ¼å¤šé€‰æ¡†é€‰ä¸­é¡¹
@@ -140,22 +146,25 @@
  },
  [
    {
      label: "设备名称",
      label: "监控设备名称",
      align: "center",
      prop: "deviceName",
    },
    {
      label: "规格型号",
      // ä½¿ç”¨ deviceModel å­—段承载温度监测相关参数
      label: "温度监测参数",
      align: "center",
      prop: "deviceModel",
    },
    {
      label: "供应商",
      // ä½¿ç”¨ supplierName å­—段承载压力监测相关参数
      label: "压力监测参数",
      align: "center",
      prop: "supplierName",
    },
    {
      label: "单位",
      // ä½¿ç”¨ unit å­—段承载能耗监测相关参数
      label: "能耗监测参数",
      align: "center",
      prop: "unit",
    },
@@ -165,32 +174,36 @@
      prop: "number",
    },
    {
      label: "含税单价",
      // ä½¿ç”¨ taxIncludingPriceUnit å­—段承载监控阈值上限
      label: "监控阈值上限",
      align: "center",
      prop: "taxIncludingPriceUnit",
    },
    {
      label: "含税总价",
      // ä½¿ç”¨ taxIncludingPriceTotal å­—段承载监控阈值下限
      label: "监控阈值下限",
      align: "center",
      prop: "taxIncludingPriceTotal",
    },
    {
      label: "税率",
      // ä½¿ç”¨ taxRate å­—段呈现实时监测值/当前读数
      label: "实时监测值",
      align: "center",
      prop: "taxRate",
    },
    {
      label: "不含税总价",
      // ä½¿ç”¨ unTaxIncludingPriceTotal å­—段承载累计能耗/监控统计值
      label: "累计能耗",
      align: "center",
      prop: "unTaxIncludingPriceTotal",
    },
    {
      label: "录入人",
      label: "监控人",
      align: "center",
      prop: "createUser",
    },
    {
      label: "录入日期",
      label: "监控日期",
      align: "center",
      prop: "createTime",
    },
@@ -208,13 +221,13 @@
                        edit(row.id)
                    },
                },
                {
                    name: "生成二维码",
                    type: "text",
                    clickFun: (row) => {
                        showQRCode(row)
                    },
                },
                // {
                //     name: "生成二维码",
                //     type: "text",
                //     clickFun: (row) => {
                //         showQRCode(row)
                //     },
                // },
            ],
        },
  ]
@@ -285,7 +298,8 @@
    type: "warning",
  })
    .then(() => {
      proxy.download(`/device/ledger/export`, {}, "设备台账档案.xlsx");
      // å¯¼å‡ºæ–‡ä»¶åæ”¹ä¸ºè®¾å¤‡è¿œç¨‹ç›‘控
      proxy.download(`/device/ledger/export`, {}, "设备远程监控.xlsx");
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
@@ -308,12 +322,12 @@
};

onMounted(() => {
  filters.entryDate = [
    dayjs().format("YYYY-MM-DD"),
    dayjs().add(1, "day").format("YYYY-MM-DD"),
  ]
  filters.entryDateStart = dayjs().format("YYYY-MM-DD")
  filters.entryDateEnd = dayjs().add(1, "day").format("YYYY-MM-DD")
  // filters.entryDate = [
  //   dayjs().format("YYYY-MM-DD"),
  //   dayjs().add(1, "day").format("YYYY-MM-DD"),
  // ]
  // filters.entryDateStart = dayjs().format("YYYY-MM-DD")
  // filters.entryDateEnd = dayjs().add(1, "day").format("YYYY-MM-DD")
  getTableData();
});
</script>
@@ -327,4 +341,13 @@
  justify-content: space-between;
  margin-bottom: 10px;
}

.feature-desc {
  margin-bottom: 16px;
  padding: 10px 12px;
  background: #f5f7fa;
  border-radius: 4px;
  color: #606266;
  font-size: 13px;
}
</style>

 src/views/tideLogin.vue

@@ -2,7 +2,7 @@
  <div></div>
</template>
<script>
import store from "@/store";
import useUserStore from "@/store/modules/user";
export default {
  data() {
    return {}
@@ -13,7 +13,7 @@
  computed: {},
  methods: {
     goLogin() {
      store.dispatch('TideLogin', {code : this.$route.query.code}).then(() => {
       useUserStore().TideLogin({code : this.$route.query.code}).then(() => {
        this.$router.push({ path: this.redirect || "/" }).catch(() => { });
      })
    }

 vite.config.js

@@ -8,8 +8,8 @@
  const { VITE_APP_ENV } = env;

  const baseUrl =

    VITE_APP_ENV == "development"

      ? "http://10.136.12.71:7003" // å¼€å‘环境后端接口

      : "http://10.136.12.71:7003"; // ç”Ÿäº§çŽ¯å¢ƒåŽç«¯æŽ¥å£

      ? "http://127.0.0.1:7003" // å¼€å‘环境后端接口

      : "http://10.136.58.73:7003"; // ç”Ÿäº§çŽ¯å¢ƒåŽç«¯æŽ¥å£



  return {

    // éƒ¨ç½²ç”Ÿäº§çŽ¯å¢ƒå’Œå¼€å‘环境下的URL。