代码调整9

zouyu

7 天以前 a23c1574393e29480488ad5722cfd397e790990d

代码调整9

 .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/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/vehicleInformationCollection/index.vue

ÎļþÒÑɾ³ý

 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。