From 8eea5b7ad4487da91cb6fa82cda8fa1dcf6864ec Mon Sep 17 00:00:00 2001
From: binbin_pan <max_163email@163.com>
Date: Mon, 8 Jul 2024 18:08:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=8E=A8=E9=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../warehouseManage/pushAndAccept/index.vue   | 179 +++++++++
 .../pushAndAccept/pushAndAcceptDetail.vue     | 346 ++++++++++++++++++
 .../rentalEquipmentManagement/index.vue       | 196 ++++++++++
 3 files changed, 721 insertions(+)
 create mode 100644 sgzb-ui/src/views/warehouseManage/pushAndAccept/index.vue
 create mode 100644 sgzb-ui/src/views/warehouseManage/pushAndAccept/pushAndAcceptDetail.vue
 create mode 100644 sgzb-ui/src/views/warehouseManage/rentalEquipmentManagement/index.vue

diff --git a/sgzb-ui/src/views/warehouseManage/pushAndAccept/index.vue b/sgzb-ui/src/views/warehouseManage/pushAndAccept/index.vue
new file mode 100644
index 00000000..31a1b21d
--- /dev/null
+++ b/sgzb-ui/src/views/warehouseManage/pushAndAccept/index.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="app-container">
+    <!-- 表单 -->
+    <el-form :inline="true" :model="queryForm" ref="queryForm" label-width="68px" size="small" v-show="showSearch">
+      <el-form-item label="关键字" prop="keyWord">
+        <el-input v-model="queryForm.keyWord" clearable placeholder="请输入关键字" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryForm.status" placeholder="请选择状态" filterable clearable>
+          <el-option label="未接收" value="0"></el-option>
+          <el-option label="已接收" value="1"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="推送日期" prop="pushDate">
+        <el-date-picker
+          v-model="queryForm.pushDate"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" plain @click="resetQueryForm">重置</el-button>
+        <el-button icon="el-icon-download" type="warning" plain @click="handleExport" :loading="loading">导出</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table :data="tableData" style="width: 100%" @selection-change="selection">
+      <el-table-column type="selection" width="55" align="center"></el-table-column>
+      <el-table-column
+        type="index"
+        label="序号"
+        width="50"
+        :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
+      />
+      <el-table-column prop="pushDate" label="推送日期" align="center"></el-table-column>
+      <el-table-column prop="pushMachineryNum" label="推送机具数量" align="center"></el-table-column>
+      <el-table-column prop="acceptMachineryNum" label="已接收数量" align="center"></el-table-column>
+      <el-table-column prop="status" label="接收状态" align="center" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.status == 0" type="danger">未接收</el-tag>
+          <el-tag v-else-if="scope.row.status == 1" type="success">已接收</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="150" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="mini" @click="accept(scope.row)">接收</el-button>
+          <el-button type="text" size="mini" @click="pushDetail(scope.row)">明细</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PushAndAccept',
+  data() {
+    return {
+      loading: false,
+      showSearch: true,
+      queryForm: {
+        keyWord: '',
+        status: '',
+        pushDate: '',
+      },
+      tableData: [
+        {
+          id: 1,
+          pushDate: '2021-08-01',
+          pushMachineryNum: 10,
+          acceptMachineryNum: 5,
+          status: 0,
+        },
+        {
+          id: 2,
+          pushDate: '2021-08-02',
+          pushMachineryNum: 20,
+          acceptMachineryNum: 10,
+          status: 1,
+        },
+      ],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      ids: [],
+    }
+  },
+  mounted() {
+    console.log('🚀 ~ mounted ~ mounted')
+    this.getList()
+  },
+  methods: {
+    // 搜索
+    handleQuery() {
+      console.log('🚀 ~ handleQuery ~ 搜索:', this.queryForm.pushDate)
+      this.getList()
+    },
+    // 重置
+    resetQueryForm() {
+      console.log('🚀 ~ resetQueryForm ~ 重置:')
+      this.$refs.queryForm.resetFields()
+      this.getList()
+    },
+    // 导出
+    handleExport() {
+      this.loading = true
+      console.log('🚀 ~ handleExport ~ 导出:')
+      this.download(
+        // '',
+        // {
+        //   ...this.queryParams,
+        //   dataCondition: this.ids,
+        // },
+        // `推送接收_${new Date().getTime()}.xlsx`
+      ).then(() => {
+        this.loading = false
+      })
+    },
+    // 获取列表
+    getList() {
+      const params = {
+        ...this.queryParams,
+        ...this.queryForm,
+      }
+      console.log('🚀 ~ getList ~ 获取列表:', params)
+      // 接口(params).then(res => {
+      //   this.tableData = res.data
+      //   this.total = res.total
+      // }).catch(err => {
+      //   console.log('🚀 ~ getList ~ err:', err
+      // })
+    },
+    // 接收
+    accept(row) {
+      console.log('🚀 ~ accept ~ 接收:', row)
+      const params = {
+        id: row.id,
+        isDetail: false,
+      }
+      this.$router.push({ path: 'pushAndAcceptDetail', query: params })
+    },
+    // 明细
+    pushDetail(row) {
+      console.log('🚀 ~ pushDetail ~ 明细:')
+      const params = {
+        id: row.id,
+        isDetail: true,
+      }
+      this.$router.push({ path: 'pushAndAcceptDetail', query: params })
+    },
+    // 选择
+    selection(val) {
+      console.log('🚀 ~ selection ~ 选择:', val)
+      this.ids = val.map(item => item.id)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/sgzb-ui/src/views/warehouseManage/pushAndAccept/pushAndAcceptDetail.vue b/sgzb-ui/src/views/warehouseManage/pushAndAccept/pushAndAcceptDetail.vue
new file mode 100644
index 00000000..20b2a34e
--- /dev/null
+++ b/sgzb-ui/src/views/warehouseManage/pushAndAccept/pushAndAcceptDetail.vue
@@ -0,0 +1,346 @@
+<template>
+  <div class="app-container">
+    <!-- 表单 -->
+    <el-form :inline="true" :model="queryForm" ref="queryForm" label-width="68px" size="small" v-show="showSearch">
+      <el-form-item label="关键字" prop="keyWord">
+        <el-input v-model="queryForm.keyWord" clearable placeholder="请输入关键字" />
+      </el-form-item>
+      <!-- 物品种类下拉 -->
+      <el-form-item label="物品种类" prop="goodsType">
+        <el-select v-model="queryForm.goodsType" placeholder="请选择物品种类" filterable clearable>
+          <el-option label="物品种类1" value="1"></el-option>
+          <el-option label="物品种类2" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <!-- 设备类型下拉 -->
+      <el-form-item label="设备类型" prop="deviceType">
+        <el-select v-model="queryForm.deviceType" placeholder="请选择设备类型" filterable clearable>
+          <el-option label="设备类型1" value="1"></el-option>
+          <el-option label="设备类型2" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <!-- 规格型号下拉 -->
+      <el-form-item label="规格型号" prop="specificationModel">
+        <el-select v-model="queryForm.specificationModel" placeholder="请选择规格型号" filterable clearable>
+          <el-option label="规格型号1" value="1"></el-option>
+          <el-option label="规格型号2" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" plain @click="resetQueryForm">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-button class="el-icon-back" type="success" @click="goBackPushAndAccept" size="mini">&nbsp;推送接收</el-button>
+      <el-button type="primary" @click="accept" size="mini" :loading="loading" v-if="!isDetail">接收</el-button>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table :data="tableData" style="width: 100%" @selection-change="selection">
+      <el-table-column
+        v-if="!isDetail"
+        type="selection"
+        width="55"
+        align="center"
+        :selectable="row => row.status == '1'"
+      />
+      <el-table-column
+        type="index"
+        label="序号"
+        align="center"
+        width="50"
+        :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
+      />
+      <el-table-column prop="machineryNum" label="机具编号" align="center" show-overflow-tooltip />
+      <el-table-column prop="machineryName" label="机具名称" align="center" show-overflow-tooltip />
+      <el-table-column prop="machineryType" label="机具类型" align="center" show-overflow-tooltip />
+      <el-table-column prop="specificationModel" label="规格型号" align="center" show-overflow-tooltip />
+      <el-table-column prop="rentalDate" label="租赁日期" align="center" show-overflow-tooltip />
+      <el-table-column prop="rentalPrice" label="租赁价格" align="center" show-overflow-tooltip />
+      <el-table-column prop="unit" label="所属单位" align="center" show-overflow-tooltip />
+      <el-table-column prop="manufacturer" label="生产厂家" align="center" show-overflow-tooltip />
+      <el-table-column prop="productionDate" label="出厂日期" align="center" show-overflow-tooltip />
+      <el-table-column prop="isNewEquipment" label="是否是新装备" align="center" show-overflow-tooltip />
+      <el-table-column prop="verificationNum" label="检验证编号" align="center" show-overflow-tooltip />
+      <el-table-column prop="inspectionUnit" label="检验单位" align="center" show-overflow-tooltip />
+      <el-table-column prop="inspectionDate" label="检验日期" align="center" show-overflow-tooltip />
+      <el-table-column prop="nextInspectionDate" label="下次检验日期" align="center" show-overflow-tooltip />
+      <el-table-column prop="machinistName" label="机手姓名" align="center" show-overflow-tooltip v-if="!isDetail">
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.machinistName" type="text" size="mini" @click="getMachinistDetail(scope.row)">
+            {{ scope.row.machinistName }}
+          </el-button>
+          <span v-else>无</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" align="center" show-overflow-tooltip>
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.status == 0" type="danger">未接收</el-tag>
+          <el-tag v-else-if="scope.row.status == 1" type="success">已接收</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 机手详情Dialog -->
+    <el-dialog title="机手详情" :visible.sync="dialogVisible" width="50%">
+      <el-card>
+        <div class="wrapper">
+          <div class="idCardContainer">
+            <el-image class="idCard" :src="src.IDCardFront" :preview-src-list="src.IDCardFrontList"></el-image>
+            <el-image class="idCard" :src="src.IDCardBack" :preview-src-list="src.IDCardBackList"></el-image>
+          </div>
+          <div class="information">
+            <el-row>
+              <el-col :span="10" class="item">姓名: {{ information.name }}</el-col>
+              <el-col :span="14" class="item">身份证号: {{ information.IDCard }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12" class="item">性别: {{ information.gender }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="10" class="item">年龄: {{ information.age }}</el-col>
+              <el-col :span="14" class="item">电话: {{ information.phone }}</el-col>
+            </el-row>
+          </div>
+        </div>
+      </el-card>
+      <!-- 持证信息 -->
+      <el-card header="持证信息">
+        <div class="certificate">
+          <div class="certificateItem" v-for="item in certificateList">
+            <el-image class="itemImg" :src="item.src" :preview-src-list="item.previewList"></el-image>
+            <span class="itemName">{{ item.name }}</span>
+          </div>
+        </div>
+      </el-card>
+      <!-- 关闭按钮 -->
+      <el-button type="primary" slot="footer" @click="dialogVisible = false">关闭</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PushAndAcceptDetail',
+  data() {
+    return {
+      loading: false,
+      showSearch: true,
+      queryForm: {
+        keyWord: '',
+        goodsType: '',
+        deviceType: '',
+        specificationModel: '',
+      },
+      tableData: [
+        {
+          machineryNum: '001',
+          machineryName: '机具名称1',
+          machineryType: '机具类型1',
+          specificationModel: '规格型号1',
+          rentalDate: '2021-01-01',
+          rentalPrice: '1000',
+          unit: '所属单位1',
+          manufacturer: '生产厂家1',
+          productionDate: '2021-01-01',
+          isNewEquipment: '是',
+          verificationNum: '检验证编号1',
+          inspectionUnit: '检验单位1',
+          inspectionDate: '2021-01-01',
+          nextInspectionDate: '2021-01-01',
+          machinistName: '机手姓名1',
+          status: 0,
+        },
+        {
+          machineryNum: '002',
+          machineryName: '机具名称2',
+          machineryType: '机具类型2',
+          specificationModel: '规格型号2',
+          rentalDate: '2021-01-02',
+          rentalPrice: '2000',
+          unit: '所属单位2',
+          manufacturer: '生产厂家2',
+          productionDate: '2021-01-02',
+          isNewEquipment: '否',
+          verificationNum: '检验证编号2',
+          inspectionUnit: '检验单位2',
+          inspectionDate: '2021-01-02',
+          nextInspectionDate: '2021-01-02',
+          machinistName: '',
+          status: 1,
+        },
+      ],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      isDetail: false, // 是否详情页
+      dialogVisible: false,
+      // 机手身份证
+      src: {
+        IDCardFront: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+        IDCardBack: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+        IDCardFrontList: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'],
+        IDCardBackList: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'],
+      },
+      // 机手信息
+      information: {
+        name: '张三',
+        IDCard: '123456789012345678',
+        gender: '男',
+        age: '18',
+        phone: '12345678901',
+      },
+      // 持证信息
+      certificateList: [
+        {
+          name: 'xx范德萨范德萨范德萨范德萨发大水范德萨发大水x证',
+          src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+          previewList: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'],
+        },
+        {
+          name: 'xx范德萨范范德萨范德萨发大水范德萨德萨发大水x证',
+          src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+          previewList: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']
+        },
+        {
+          name: 'xx范德萨范德萨发大水x证',
+          src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+          previewList: ['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']
+        },
+        {
+          name: 'xx范德萨范德萨发大水x证',
+          src: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
+          previewList: ['https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png']
+        },
+      ],
+    }
+  },
+  created() {
+    this.isDetail = this.$route.query.isDetail == 'true' ? true : false
+    this.getList()
+    this.getGoodsTypeList()
+    this.getDeviceTypeList()
+    this.getSpecificationModelList()
+  },
+  methods: {
+    // 搜索
+    handleQuery() {
+      console.log('🚀 ~ handleQuery ~ 搜索:', params)
+      this.getList()
+    },
+    // 重置
+    resetQueryForm() {
+      console.log('🚀 ~ resetQueryForm ~ 重置:')
+      this.$refs.queryForm.resetFields()
+      this.getList()
+    },
+    // 获取列表
+    getList() {
+      const params = {
+        ...this.queryParams,
+        ...this.queryForm,
+      }
+      console.log('🚀 ~ getList ~ 获取列表:', params)
+    },
+    // 获取物品种类
+    getGoodsTypeList() {
+      console.log('🚀 ~ getGoodsTypeList ~ 获取物品种类下拉:')
+    },
+    // 获取设备类型
+    getDeviceTypeList() {
+      console.log('🚀 ~ getDeviceTypeList ~ 获取设备类型下拉:')
+    },
+    // 获取规格型号
+    getSpecificationModelList() {
+      console.log('🚀 ~ getSpecificationModelList ~ 获取规格型号下拉:')
+    },
+    // 返回推送接收
+    goBackPushAndAccept() {
+      this.$router.push({ path: 'pushAndAccept' })
+    },
+    // 接收
+    accept() {
+      console.log('🚀 ~ accept ~ 接收:')
+      this.loading = true
+      // 接口().then(res => {
+      //   this.getList()
+      // }).catch(err => {
+      //   console.log('🚀 ~ accept ~ err:', err)
+      // }).finally(() => {
+      //   this.loading = false
+      // })
+    },
+    // 选择
+    selection(val) {
+      console.log('🚀 ~ selection ~ 选择:', val)
+    },
+    // 机手详情 - 弹框
+    getMachinistDetail(row) {
+      console.log('🚀 ~ getMachinistDetail ~ 机手详情:', row)
+      this.dialogVisible = true
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.el-row {
+  margin-left: 0px !important;
+}
+.wrapper {
+  display: flex;
+  .idCardContainer {
+    display: flex;
+    flex-direction: column;
+    .idCard {
+      margin-bottom: 10px;
+      width: 172px;
+      height: 115px;
+    }
+  }
+  .information {
+    padding: 0 20px 0 80px;
+    width: 100%;
+    .item {
+      margin-top: 10px;
+      margin-bottom: 30px;
+    }
+  }
+}
+.certificate {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: start;
+  .certificateItem {
+    width: 25%;
+    display: flex;
+    flex-direction: column;
+    margin: 15px 0;
+    .itemImg {
+      // 居中展示图片
+      margin: 5px auto;
+      width: 100px;
+      height: 120px;
+    }
+    .itemName {
+      margin: 0 5px;
+      display: block;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/sgzb-ui/src/views/warehouseManage/rentalEquipmentManagement/index.vue b/sgzb-ui/src/views/warehouseManage/rentalEquipmentManagement/index.vue
new file mode 100644
index 00000000..b2a50fd9
--- /dev/null
+++ b/sgzb-ui/src/views/warehouseManage/rentalEquipmentManagement/index.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="app-container">
+    <!-- 表单 -->
+    <el-form :inline="true" :model="queryForm" ref="queryForm" label-width="68px" size="small" v-show="showSearch">
+      <el-form-item label="关键字" prop="keyWord">
+        <el-input v-model="queryForm.keyWord" clearable placeholder="请输入关键字" />
+      </el-form-item>
+      <!-- 物品种类下拉 -->
+      <el-form-item label="物品种类" prop="goodsType">
+        <el-select v-model="queryForm.goodsType" placeholder="请选择物品种类" filterable clearable>
+          <el-option label="物品种类1" value="1"></el-option>
+          <el-option label="物品种类2" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <!-- 设备类型下拉 -->
+      <el-form-item label="设备类型" prop="deviceType">
+        <el-select v-model="queryForm.deviceType" placeholder="请选择设备类型" filterable clearable>
+          <el-option label="设备类型1" value="1"></el-option>
+          <el-option label="设备类型2" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <!-- 规格型号下拉 -->
+      <el-form-item label="规格型号" prop="specificationModel">
+        <el-select v-model="queryForm.specificationModel" placeholder="请选择规格型号" filterable clearable>
+          <el-option label="规格型号1" value="1"></el-option>
+          <el-option label="规格型号2" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" type="primary" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" plain @click="resetQueryForm">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
+    </el-row>
+
+    <!-- 列表 -->
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column
+        type="index"
+        label="序号"
+        align="center"
+        width="50"
+        :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
+      />
+      <el-table-column prop="machineryNum" label="机具编号" align="center" show-overflow-tooltip />
+      <el-table-column prop="machineryName" label="机具名称" align="center" show-overflow-tooltip />
+      <el-table-column prop="machineryType" label="机具类型" align="center" show-overflow-tooltip />
+      <el-table-column prop="specificationModel" label="规格型号" align="center" show-overflow-tooltip />
+      <el-table-column prop="rentalDate" label="租赁日期" align="center" show-overflow-tooltip>
+        <template slot-scope="{ row }">
+          <span :class="{ isWarning: row.activeLease }">{{ row.rentalDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="inspectionDate" label="检验日期" align="center" show-overflow-tooltip />
+      <el-table-column prop="nextInspectionDate" label="下次检验日期" align="center" show-overflow-tooltip>
+        <template slot-scope="{ row }">
+          <span :class="{ isWarning: row.activeCheck }">{{ row.nextInspectionDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="source" label="来源" align="center" show-overflow-tooltip />
+      <el-table-column prop="status" label="状态" align="center" show-overflow-tooltip />
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RentalEquipmentManagement',
+  data() {
+    return {
+      loading: false,
+      showSearch: true,
+      queryForm: {
+        keyWord: '',
+        goodsType: '',
+        deviceType: '',
+        specificationModel: '',
+      },
+      tableData: [
+        {
+          machineryNum: '001',
+          machineryName: '机具1',
+          machineryType: '机具类型1',
+          specificationModel: '规格型号1',
+          rentalDate: '2024-07-01',
+          inspectionDate: '2024-08-01',
+          nextInspectionDate: '2024-08-15',
+          source: '来源1',
+          status: '状态1',
+        },
+        {
+          machineryNum: '002',
+          machineryName: '机具2',
+          machineryType: '机具类型2',
+          specificationModel: '规格型号2',
+          rentalDate: '2024-09-02',
+          inspectionDate: '2024-08-02',
+          nextInspectionDate: '2024-08-02',
+          source: '来源2',
+          status: '状态2',
+        },
+      ],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+    }
+  },
+  created() {
+    this.getList()
+    this.getGoodsTypeList()
+    this.getDeviceTypeList()
+    this.getSpecificationModelList()
+  },
+  methods: {
+    // 搜索
+    handleQuery() {
+      console.log('🚀 ~ handleQuery ~ 搜索:', params)
+      this.getList()
+    },
+    // 重置
+    resetQueryForm() {
+      console.log('🚀 ~ resetQueryForm ~ 重置:')
+      this.$refs.queryForm.resetFields()
+      this.getList()
+    },
+    // 获取列表
+    getList() {
+      const params = {
+        ...this.queryParams,
+        ...this.queryForm,
+      }
+      console.log('🚀 ~ getList ~ 获取列表:', params)
+      this.warning()
+    },
+    // 获取物品种类
+    getGoodsTypeList() {
+      console.log('🚀 ~ getGoodsTypeList ~ 获取物品种类下拉:')
+    },
+    // 获取设备类型
+    getDeviceTypeList() {
+      console.log('🚀 ~ getDeviceTypeList ~ 获取设备类型下拉:')
+    },
+    // 获取规格型号
+    getSpecificationModelList() {
+      console.log('🚀 ~ getSpecificationModelList ~ 获取规格型号下拉:')
+    },
+    // 预警 当前日期到租赁到期日期小于等于10天开始预警提醒，字体变为红色 当前日期到下次检验日期小于等于30天开始预警,字体变为红色
+    warning() {
+      console.log('🚀 ~ warning ~ 预警:')
+      // 获取当前日期
+      const nowDate = new Date()
+      console.log('🚀 ~ warning ~ nowDate:', nowDate)
+      // 循环列表
+      this.tableData.forEach((item) => {
+        // 获取租赁日期
+        const rentalDate = new Date(item.rentalDate)
+        console.log('🚀 ~ this.tableData.forEach ~ rentalDate:', rentalDate)
+        // 获取下次检验日期
+        const nextInspectionDate = new Date(item.nextInspectionDate)
+        // 计算租赁日期到期时间差 单位：天: 租赁日期 - 当前日期 <= 10 天  开始预警
+        const leaseTime = (rentalDate - nowDate) / (1000 * 60 * 60 * 24)
+        console.log('🚀 ~ this.tableData.forEach ~ leaseTime:', leaseTime)
+        if (leaseTime <= 10) {
+          item.activeLease = true
+        }
+        // 计算下次检验日期时间差 单位：天: 下次检验日期 - 当前日期 <= 30 天  开始预警
+        const checkTime = (nextInspectionDate - nowDate) / (1000 * 60 * 60 * 24)
+        console.log('🚀 ~ this.tableData.forEach ~ checkTime:', checkTime)
+        if (checkTime <= 30) {
+          item.activeCheck = true
+        }
+      })
+      console.log('🚀 ~ this.tableData.forEach ~ 添加预警值:', this.tableData)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.isWarning {
+  color: red;
+}
+</style>