From 275b7d003868738e9b445c4ce81035cbb804d47f Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Tue, 3 Dec 2024 13:51:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   4 +
 src/components/PagingComponent/index.vue      |   2 +-
 src/http/api/rent-termination/index.ts        |  14 +
 src/router/index.ts                           |  22 +
 src/views/user/accept-orders/index.vue        |  19 +-
 src/views/user/index.vue                      |   4 +-
 .../user/lessor/rent-termination/index.vue    | 949 ++++++++++++++++++
 src/views/user/lessor/settlement/index.vue    | 689 +++++++++++++
 src/views/user/sourcingNeed/index.vue         |  12 +-
 9 files changed, 1699 insertions(+), 16 deletions(-)
 create mode 100644 src/http/api/rent-termination/index.ts
 create mode 100644 src/views/user/lessor/rent-termination/index.vue
 create mode 100644 src/views/user/lessor/settlement/index.vue

diff --git a/components.d.ts b/components.d.ts
index 587d2ec..f818db3 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -24,6 +24,7 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
@@ -31,6 +32,7 @@ declare module 'vue' {
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElProgress: typeof import('element-plus/es')['ElProgress']
@@ -38,6 +40,8 @@ declare module 'vue' {
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
diff --git a/src/components/PagingComponent/index.vue b/src/components/PagingComponent/index.vue
index c6c3026..a008d9c 100644
--- a/src/components/PagingComponent/index.vue
+++ b/src/components/PagingComponent/index.vue
@@ -63,7 +63,7 @@ const pageSize = computed({
     <el-pagination
         v-model:current-page="currentPage"
         v-model:page-size="pageSize"
-        :page-sizes="[5, 10, 20, 40]"
+        :page-sizes="[10, 20, 30, 50]"
         small="small"
         background="background"
         layout="total, sizes, prev, pager, next, jumper"
diff --git a/src/http/api/rent-termination/index.ts b/src/http/api/rent-termination/index.ts
new file mode 100644
index 0000000..dffee16
--- /dev/null
+++ b/src/http/api/rent-termination/index.ts
@@ -0,0 +1,14 @@
+import { post, get, put } from 'http/index'
+
+/**
+ *  退租管理页面接口
+ */
+
+/**
+ * 
+ * @param data 查询参数 获取退租列表
+ * @returns 
+ */
+export const getRentTerminationListApi = (data: any = {}) => {
+    return get(`/material-mall/lease-repair/list`, data)
+}
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index d92eb0f..def5f75 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -235,6 +235,28 @@ const routes: Array<RouteRecordRaw> = [
                     isLogin: true
                 },
             },
+            {
+                path: '/rent-termination',
+                name: 'rent-termination',
+                component: () => import('views/user/lessor/rent-termination/index.vue'),
+                meta: {
+                    title: '退租管理',
+                    keepAlive: true,
+                    AuthFlag: false,
+                    isLogin: true
+                },
+            },
+            {
+                path: '/settlement-manage',
+                name: 'settlement-manage',
+                component: () => import('views/user/lessor/settlement/index.vue'),
+                meta: {
+                    title: '结算管理',
+                    keepAlive: true,
+                    AuthFlag: false,
+                    isLogin: true
+                },
+            },
             {
                 path: '/sourcingNeed',
                 name: 'sourcingNeed',
diff --git a/src/views/user/accept-orders/index.vue b/src/views/user/accept-orders/index.vue
index 31826ee..83f1f02 100644
--- a/src/views/user/accept-orders/index.vue
+++ b/src/views/user/accept-orders/index.vue
@@ -95,8 +95,8 @@
         :data="leaseList"
         show-overflow-tooltip
         :header-cell-style="{
-            background: '#fafafa',
-            color: '#333',
+            background: '#00a288',
+            color: '#fff',
         }"
     >
         <el-table-column align="center" label="序号" type="index" width="80" />
@@ -159,17 +159,11 @@
         v-if="total > 0"
     /> -->
 
-    <el-pagination
-        style="text-align: right"
-        background
-        size="small"
+    <PagingComponent
+        @getList="getLeaseListData"
+        :pageSize="searchParams.pageSize"
+        :pageNumber="searchParams.pageNum"
         :total="total"
-        :page-sizes="[10, 20, 50, 100]"
-        v-model:page-size="searchParams.pageSize"
-        v-model:current-page="searchParams.pageNum"
-        layout="total, prev, pager, next,sizes"
-        @size-change="getLeaseListData"
-        @current-change="getLeaseListData"
     />
 
     <!-- 新增修改对话框 -->
@@ -382,6 +376,7 @@
 
 <script setup lang="ts">
 import UploadComponentNew from 'components/uploadComponentNew/index.vue'
+import PagingComponent from 'components/PagingComponent/index.vue'
 import { getCompanyListApi, getGoodsClassListApi, getAreaApi } from 'http/api/home'
 import { getAcceptOrdersListApi } from 'http/api/sourcing/index'
 import { InfoFilled } from '@element-plus/icons-vue'
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index f362284..817a354 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -58,7 +58,7 @@ const activeseekingRent = computed(() => {
     return store.currentMenuType
 })
 
-const isType = computed(() => {
+const isType: any = computed(() => {
     return localStorage.getItem('rolesType')
 })
 
@@ -66,6 +66,8 @@ const allList = [
     { title: '装备管理', name: 'goodsManagement', permission: ['1'] },
     { title: '订单管理', name: 'orderManagementCz', permission: ['1'] },
     { title: '接单管理', name: 'accept-orders', permission: ['1'] },
+    { title: '退租管理', name: 'rent-termination', permission: ['1'] },
+    { title: '结算管理', name: 'settlement-manage', permission: ['1'] },
     { title: '需求管理', name: 'sourcingNeed', permission: ['2'] },
     { title: '订单管理', name: 'orderManagement', permission: ['2'] },
 ]
diff --git a/src/views/user/lessor/rent-termination/index.vue b/src/views/user/lessor/rent-termination/index.vue
new file mode 100644
index 0000000..09322e7
--- /dev/null
+++ b/src/views/user/lessor/rent-termination/index.vue
@@ -0,0 +1,949 @@
+<template>
+    <!-- 寻源需求 -->
+    <el-form
+        :inline="true"
+        size="default"
+        label-width="0"
+        ref="searchFormRef"
+        :model="searchParams"
+    >
+        <el-row>
+            <el-col :span="4">
+                <el-form-item prop="leaseName">
+                    <el-input
+                        style="width: 100%"
+                        placeholder="请输入订单编号"
+                        v-model="searchParams.leaseName"
+                        clearable
+                    />
+                </el-form-item>
+            </el-col>
+
+            <el-col :span="4">
+                <el-form-item prop="leaseCode">
+                    <el-input
+                        style="width: 100%"
+                        placeholder="请输入承租人"
+                        v-model="searchParams.leaseCode"
+                        clearable
+                    />
+                </el-form-item>
+            </el-col>
+            <el-col :span="4">
+                <el-form-item prop="leaseCode">
+                    <el-input
+                        style="width: 100%"
+                        placeholder="请输入承租单位"
+                        v-model="searchParams.leaseCode"
+                        clearable
+                    />
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item prop="leaseStatus">
+                    <el-select
+                        clearable
+                        style="width: 100%"
+                        placeholder="选择订单状态"
+                        v-model="searchParams.leaseStatus"
+                    >
+                        <el-option label="待接单" :value="0" />
+                        <el-option label="已接单" :value="1" />
+                        <el-option label="已到期" :value="2" />
+                    </el-select>
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item>
+                    <el-date-picker
+                        style="width: 100%"
+                        v-model="endTime"
+                        type="daterange"
+                        range-separator="-"
+                        value-format="YYYY-MM-DD"
+                        start-placeholder="退租开始日期"
+                        end-placeholder="退租结束日期"
+                    />
+                </el-form-item>
+            </el-col>
+            <!-- <el-col :span="6">
+                <el-form-item>
+                    <el-date-picker
+                        v-model="releaseTime"
+                        style="width: 100%"
+                        type="daterange"
+                        range-separator="-"
+                        value-format="YYYY-MM-DD"
+                        start-placeholder="发布开始日期"
+                        end-placeholder="发布结束日期"
+                    />
+                </el-form-item>
+            </el-col> -->
+        </el-row>
+
+        <el-form-item>
+            <el-button @click="getLeaseListData" type="primary" class="primary-lease"
+                >查询</el-button
+            >
+            <el-button @click="onReset" type="primary" class="primary-lease">重置</el-button>
+        </el-form-item>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table
+        :data="leaseList"
+        border
+        show-overflow-tooltip
+        :header-cell-style="{
+            background: '#00a288',
+            color: '#fff',
+        }"
+    >
+        <el-table-column align="center" label="序号" type="index" width="80" />
+        <el-table-column align="center" prop="code" label="订单编号" />
+        <el-table-column align="center" prop="leaseName" label="承租人" />
+        <el-table-column align="center" prop="leaseCompany" label="承租单位" />
+        <el-table-column align="center" prop="phoneNumber" label="联系电话" />
+        <el-table-column align="center" prop="rentEndTime" label="退租时间" />
+        <el-table-column align="center" prop="orderStatusName" label="订单状态" />
+        <el-table-column align="center" label="操作" :width="220">
+            <template #default="{ row }">
+                <el-button
+                    text
+                    size="small"
+                    type="primary"
+                    v-if="row.isLeaseContent === 0"
+                    @click="onRepublish(1)"
+                >
+                    退租检修
+                </el-button>
+                <el-button
+                    text
+                    size="small"
+                    class="primary-lease"
+                    type="primary"
+                    v-if="row.isLeaseContent === 1"
+                    @click="onRepublish(2)"
+                >
+                    检修详情
+                </el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+
+    <PagingComponent
+        @getList="getLeaseListData"
+        :pageSize="searchParams.pageSize"
+        :pageNumber="searchParams.pageNum"
+        :total="total"
+    />
+
+    <!-- 新增修改对话框 -->
+    <el-dialog
+        :title="dialogTitle"
+        width="70%"
+        align-center
+        destroy-on-close
+        v-model="addOrEditDialogVisible"
+        @close="onClose"
+    >
+        <el-row style="padding-bottom: 20px; display: flex; justify-content: space-between">
+            <div>
+                <span>订单编号</span>
+                <span>20000</span>
+            </div>
+            <div>
+                <span>装备套数</span>
+                <span>20000</span>
+            </div>
+            <div>
+                <span>退租时间</span>
+                <span>20000</span>
+            </div>
+        </el-row>
+
+        <h1>维修费用</h1>
+        <el-form
+            v-for="(item, index) in repairFormList"
+            :key="index"
+            :model="item"
+            :rules="repairFormRules"
+            :ref="
+                ($event:any) => {
+                    repairFormRefList[index] = $event
+                }
+            "
+            label-width="120px"
+            label-position="right"
+            style="position: relative"
+        >
+            <div style="position: absolute; left: -5px; top: 8px; font-weight: bold">
+                设备{{ index + 1 }}
+            </div>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="关联装备" prop="device">
+                        <el-input v-model="item.device" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="维修数量" prop="device_num">
+                        <el-input v-model="item.device_num" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="维修费用" prop="device_cost">
+                        <el-input v-model="item.device_cost" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="20">
+                    <el-form-item label="附件上传" prop="device_fileList">
+                        <UploadComponentNew
+                            :maxSize="2"
+                            :max-limit="4"
+                            width="100px"
+                            height="100px"
+                            :autoUpload="true"
+                            :multiple="true"
+                            :fileListN="item.device_fileList"
+                            listType="picture-card"
+                            :acceptTypeList="['.jpg', '.png']"
+                            :actionUrl="uploadUrl"
+                            @onFileChange="onFileChange"
+                        >
+                            <template v-slot:default>
+                                <el-icon size="48" color="#aaa"><Plus /></el-icon>
+                            </template>
+                        </UploadComponentNew>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4" v-if="index != 0">
+                    <el-button
+                        type="danger"
+                        size="small"
+                        class="primary-lease"
+                        @click="onDeleteRepair"
+                    >
+                        移除
+                    </el-button>
+                </el-col>
+            </el-row>
+        </el-form>
+        <el-row>
+            <el-col :span="24">
+                <el-form-item>
+                    <el-button type="primary" class="primary-lease" @click="onAddRepair">
+                        增加维修设备
+                    </el-button>
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <div class="line"></div>
+        <h1>丢失费用</h1>
+        <el-form label-width="120px" label-position="right" style="position: relative">
+            <div style="position: absolute; left: 0; top: 8px; font-weight: bold">设备1</div>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="关联装备" prop="leaseName">
+                        <el-input v-model="addOrEditForm.leaseName" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="报废数量" prop="leaseName">
+                        <el-input v-model="addOrEditForm.leaseName" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="报废费用" prop="leaseName">
+                        <el-input v-model="addOrEditForm.leaseName" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="报废原因" prop="leaseName">
+                        <el-input v-model="addOrEditForm.leaseName" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <el-row>
+                <el-col :span="24">
+                    <el-form-item label="附件上传" prop="leaseName">
+                        <UploadComponentNew
+                            :maxSize="2"
+                            :minLimit="minLimit"
+                            :max-limit="4"
+                            width="100px"
+                            height="100px"
+                            :autoUpload="true"
+                            :multiple="true"
+                            :fileListN="addOrEditForm.fileInfoList"
+                            listType="picture-card"
+                            :acceptTypeList="['.jpg', '.png']"
+                            :actionUrl="uploadUrl"
+                            @onFileChange="onFileChange"
+                        >
+                            <template v-slot:default>
+                                <el-icon size="48" color="#aaa"><Plus /></el-icon>
+                            </template>
+                        </UploadComponentNew>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <el-row>
+            <el-col :span="24">
+                <el-form-item>
+                    <el-button type="primary" class="primary-lease"> 增加丢失设备 </el-button>
+                </el-form-item>
+            </el-col>
+        </el-row>
+        <div class="line"></div>
+
+        <h1>报废费用</h1>
+        <el-form label-width="120px" label-position="right" style="position: relative">
+            <div style="position: absolute; left: 0; top: 8px; font-weight: bold">设备1</div>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="关联装备" prop="leaseName">
+                        <el-input v-model="addOrEditForm.leaseName" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="丢失数量" prop="leaseName">
+                        <el-input v-model="addOrEditForm.leaseName" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="丢失费用" prop="leaseName">
+                        <el-input v-model="addOrEditForm.leaseName" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="24">
+                    <el-form-item label="附件上传" prop="leaseName">
+                        <UploadComponentNew
+                            :maxSize="2"
+                            :minLimit="minLimit"
+                            :max-limit="4"
+                            width="100px"
+                            height="100px"
+                            :autoUpload="true"
+                            :multiple="true"
+                            :fileListN="addOrEditForm.fileInfoList"
+                            listType="picture-card"
+                            :acceptTypeList="['.jpg', '.png']"
+                            :actionUrl="uploadUrl"
+                            @onFileChange="onFileChange"
+                        >
+                            <template v-slot:default>
+                                <el-icon size="48" color="#aaa"><Plus /></el-icon>
+                            </template>
+                        </UploadComponentNew>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <el-row>
+            <el-col :span="24">
+                <el-form-item>
+                    <el-button type="primary" class="primary-lease"> 增加报废设备 </el-button>
+                </el-form-item>
+            </el-col>
+        </el-row>
+
+        <div style="text-align: right">
+            <el-button type="primary" class="primary-lease" @click="onCancel">取消</el-button>
+            <el-button type="primary" class="primary-lease" @click="onSubmit(false)"
+                >保存</el-button
+            >
+        </div>
+        <!-- <el-form
+            label-width="auto"
+            label-position="right"
+            ref="addOrEditFormRef"
+            :model="addOrEditForm"
+            :rules="addOrEditFormRules"
+        >
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="需求名称" prop="leaseName">
+                        <el-input v-model="addOrEditForm.leaseName" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="装备类目" prop="typeIds">
+                        <el-cascader
+                            clearable
+                            style="width: 100%"
+                            :options="classOptions"
+                            :show-all-levels="false"
+                            placeholder="请选择装备类目"
+                            v-model="addOrEditForm.typeIds"
+                            :props="{
+                                value: 'id',
+                                label: 'name',
+                                checkStrictly: true,
+                            }"
+                            @change="onChangeClass"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="租赁公司" prop="companyId">
+                        <el-select
+                            clearable
+                            style="width: 100%"
+                            placeholder="请选择租赁公司"
+                            v-model="addOrEditForm.companyId"
+                        >
+                            <el-option
+                                v-for="item in companyOptions"
+                                :key="item.companyId"
+                                :label="item.companyName"
+                                :value="item.companyId"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="联系人" prop="person">
+                        <el-input
+                            clearable
+                            placeholder="请输入联系人"
+                            v-model="addOrEditForm.person"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="联系电话" prop="personPhone">
+                        <el-input
+                            clearable
+                            placeholder="请输入联系电话"
+                            v-model="addOrEditForm.personPhone"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="预估租期(天)" prop="leaseDay">
+                        <el-input-number
+                            :min="1"
+                            clearable
+                            :max="9999"
+                            style="width: 100%"
+                            v-model="addOrEditForm.leaseDay"
+                            placeholder="请输入预估租期"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="预估数量" prop="leaseNum">
+                        <el-input-number
+                            clearable
+                            :min="1"
+                            :max="9999"
+                            style="width: 100%"
+                            v-model="addOrEditForm.leaseNum"
+                            placeholder="请输入预估数量"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="需求截止日期" prop="endTime">
+                        <el-date-picker
+                            clearable
+                            type="date"
+                            style="width: 100%"
+                            value-format="YYYY-MM-DD"
+                            v-model="addOrEditForm.endTime"
+                            placeholder="请选择需求截止日期"
+                            :disabled-date="disabledDate"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="项目所在地" prop="areaId">
+                        <el-select
+                            clearable
+                            style="width: 100%"
+                            placeholder="请选择项目所在地"
+                            v-model="addOrEditForm.areaId"
+                        >
+                            <el-option
+                                v-for="item in areaList"
+                                :key="item.areaId"
+                                :label="item.areaName"
+                                :value="item.areaId"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
+                        支持格式：.jpg、.png 单个文件大小不能超过2M，最多可上传4张
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="参考图片/样式">
+                        <div class="img-list" v-if="addOrEditForm.fileInfoList.length > 0">
+                            <div
+                                v-for="(item, index) in addOrEditForm.fileInfoList"
+                                :key="item.id"
+                                class="img-items"
+                            >
+                                <img :src="item.fileUrl" alt="" />
+
+                                <div class="mask-img">
+                                    <el-icon class="delete-icon" @click="onDeleteImg(index)"
+                                        ><DeleteFilled
+                                    /></el-icon>
+                                </div>
+                            </div>
+                        </div>
+                        <UploadComponentNew
+                            :maxSize="2"
+                            :minLimit="minLimit"
+                            :max-limit="4"
+                            width="120px"
+                            height="120px"
+                            :autoUpload="true"
+                            :multiple="true"
+                            :fileListN="addOrEditForm.fileInfoList"
+                            listType="picture-card"
+                            :acceptTypeList="['.jpg', '.png']"
+                            :actionUrl="uploadUrl"
+                            @onFileChange="onFileChange"
+                        >
+                            <template v-slot:default>
+                                <el-icon size="48" color="#aaa"><Plus /></el-icon>
+                            </template>
+                        </UploadComponentNew>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="需求描述" prop="description">
+                        <el-input
+                            clearable
+                            type="textarea"
+                            placeholder="请输入需求描述"
+                            v-model="addOrEditForm.description"
+                            :autosize="{ minRows: 6, maxRows: 10 }"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button type="primary" class="primary-lease" @click="onCancel">取消</el-button>
+                <el-button
+                    type="primary"
+                    class="primary-lease"
+                    @click="onSubmit(false)"
+                    v-if="isSave"
+                >
+                    保存
+                </el-button>
+                <el-button class="primary-lease" @click="onSubmit(true)"> 提交 </el-button>
+            </div>
+        </template> -->
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import UploadComponentNew from 'components/uploadComponentNew/index.vue'
+import PagingComponent from 'components/PagingComponent/index.vue'
+import { getCompanyListApi, getGoodsClassListApi, getAreaApi } from 'http/api/home'
+import { getRentTerminationListApi } from 'http/api/rent-termination/index'
+import {
+    addLeaseInfoApi,
+    getLeaseListApi,
+    editLeaseInfoApi,
+    deleteLeaseInfoApi,
+    getLeaseDetailsByIdApi,
+} from 'http/api/sourcing/index'
+import { InfoFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
+const addOrEditDialogVisible = ref(false)
+const companyOptions = ref<any>([])
+const classOptions = ref<any>([])
+const addOrEditFormRef = ref<any>(null)
+const searchFormRef = ref<any>(null)
+const leaseList = ref<any>([])
+const isRepublish = ref(true)
+const isSave = ref(false)
+const total = ref(0)
+const endTime = ref([])
+const areaList = ref<any>([])
+const releaseTime = ref([])
+const dialogTitle = ref('新增')
+const fileListTemp = ref<any>([])
+const repairFormRefList = ref<any>([])
+const props2 = {
+    multiple: true,
+    checkStrictly: true,
+}
+// 维修表单
+const repairFormList: any = ref([
+    {
+        device: '',
+        device_num: '',
+        device_cost: '',
+        device_fileList: [],
+    },
+])
+
+const searchParams = reactive({
+    leaseName: '',
+    leaseCode: '',
+    leaseStatus: '',
+    finishStartTime: '',
+    finishEndTime: '',
+    publishStartTime: '',
+    publishEndTime: '',
+    pageSize: 10,
+    pageNum: 1,
+})
+const addOrEditForm = ref<any>({
+    leaseName: '',
+    typeId: '',
+    typeIds: [],
+    companyId: '',
+    person: '',
+    personPhone: '',
+    leaseDay: 1,
+    leaseNum: 1,
+    endTime: '',
+    description: '',
+    isSubmit: '',
+    fileInfoList: [],
+    areaId: '',
+})
+const addOrEditFormTemp = ref<any>({
+    leaseName: '',
+    typeId: '',
+    typeIds: [],
+    companyId: '',
+    person: '',
+    personPhone: '',
+    leaseDay: 1,
+    leaseNum: 1,
+    endTime: '',
+    description: '',
+    isSubmit: '',
+    fileInfoList: fileListTemp ? fileListTemp : [],
+    areaId: '',
+})
+
+const addOrEditFormRules = reactive({
+    leaseName: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
+    typeIds: [{ required: true, message: '请选择装备类目', trigger: 'change' }],
+    companyId: [{ required: true, message: '请选择租赁公司', trigger: 'change' }],
+    person: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
+    personPhone: [
+        { required: true, message: '请输入联系电话', trigger: 'blur' },
+        {
+            pattern: /^1[3456789]\d{9}$/,
+            message: '请输入正确的联系电话',
+            trigger: 'blur',
+        },
+    ],
+    leaseDay: [{ required: true, message: '请输入预估租期', trigger: 'blur' }],
+    leaseNum: [{ required: true, message: '请输入预估数量', trigger: 'blur' }],
+    endTime: [{ required: true, message: '请选择需求截止日期', trigger: 'change' }],
+    fileInfoList: [{ required: true, message: '请上传参考图片', trigger: 'blur' }],
+    areaId: [{ required: true, message: '请选择项目所在地', trigger: 'change' }],
+})
+
+const repairFormRules = reactive({
+    device: [{ required: true, message: '请选择关联装备', trigger: 'blur' }],
+    device_num: [{ required: true, message: '请输入维修数量', trigger: 'blur' }],
+    device_cost: [{ required: true, message: '请输入维修费用', trigger: 'blur' }],
+    device_fileList: [{ required: true, message: '请上传附件', trigger: 'blur' }],
+})
+
+const getClassAndCompanyData = async () => {
+    const classResult: any = await getGoodsClassListApi()
+    const companyResult: any = await getCompanyListApi()
+
+    classOptions.value = classResult.data
+    companyOptions.value = companyResult.data
+}
+
+// 获取列表
+const getLeaseListData = async () => {
+    // if (endTime.value.length > 0) {
+    //     searchParams.finishStartTime = endTime.value[0]
+    //     searchParams.finishEndTime = endTime.value[1]
+    // }
+    // if (releaseTime.value.length > 0) {
+    //     searchParams.publishStartTime = releaseTime.value[0]
+    //     searchParams.publishEndTime = releaseTime.value[1]
+    // }
+    const { data: res }: any = await getRentTerminationListApi()
+    console.log(res, '退租列表')
+    leaseList.value = res.rows
+    total.value = res.total
+}
+
+// 增加维修设备
+const onAddRepair = () => {
+    repairFormList.value.push({
+        device: '',
+        device_num: '',
+        device_cost: '',
+        device_fileList: [],
+    })
+}
+const onDeleteRepair = (index: number) => {
+    // repairFormList.value.splice(index, 1)
+    repairFormList.value = repairFormList.value.slice(index, 1)
+}
+
+const getAreaData = async () => {
+    const res: any = await getAreaApi()
+    areaList.value = res.data
+}
+
+// 重置
+const onReset = () => {
+    endTime.value = []
+    releaseTime.value = []
+    searchParams.finishStartTime = ''
+    searchParams.finishEndTime = ''
+    searchParams.publishStartTime = ''
+    searchParams.publishEndTime = ''
+    searchParams.pageNum = 1
+    searchParams.pageSize = 10
+    // searchFormRef.value.resetFields()
+    getLeaseListData()
+}
+// 删除
+const onDelete = async (id: any) => {
+    const res: any = await deleteLeaseInfoApi({ id })
+    if (res.code === 200) {
+        ElMessage({
+            type: 'success',
+            message: '删除成功',
+        })
+        getLeaseListData()
+    }
+}
+// 重新发布
+const onRepublish = async (type: any) => {
+    type == 1 ? (dialogTitle.value = '退租检测') : (dialogTitle.value = '检测详情')
+    // dialogTitle.value = '编辑'
+    // isRepublish.value = false
+    // isSave.value = type
+    // const res: any = await getLeaseDetailsByIdApi({ id })
+    // const {
+    //     leaseName,
+    //     typeId,
+    //     companyId,
+    //     person,
+    //     personPhone,
+    //     leaseDay,
+    //     leaseNum,
+    //     endTime,
+    //     description,
+    //     typeIds,
+    //     fileInfoList,
+    //     areaId,
+    // } = res.data
+
+    // Object.assign(addOrEditForm.value, {
+    //     leaseName,
+    //     typeId,
+    //     companyId,
+    //     person,
+    //     personPhone,
+    //     leaseDay,
+    //     leaseNum,
+    //     endTime,
+    //     description,
+    //     typeIds,
+    //     id,
+    //     fileInfoList: fileInfoList ? fileInfoList : [],
+    //     areaId,
+    // })
+
+    // addOrEditForm.value.typeIds = addOrEditForm.value.typeIds.map((e: any) => {
+    //     return (e *= 1)
+    // })
+
+    addOrEditDialogVisible.value = true
+}
+
+// 提交
+const onSubmit = async (type: boolean) => {
+    let isRepair = false
+    for (let index = 0; index < repairFormList.value.length; index++) {
+        try {
+            const valid = await new Promise((resolve) => {
+                repairFormRefList.value[index].validate((valid: any) => {
+                    resolve(valid)
+                })
+            })
+            console.log(valid)
+            if (!valid) {
+                isRepair = true
+                throw new Error('表单校验失败')
+            }
+        } catch (error) {}
+    }
+
+    if (isRepair) return
+
+    // repairFormRef_1
+    // addOrEditFormRef.value.validate(async (valid: any) => {
+    //     if (valid) {
+    //         addOrEditForm.value.isSubmit = type
+    //         addOrEditForm.value.typeId =
+    //             addOrEditForm.value.typeIds[addOrEditForm.value.typeIds.length - 1]
+    //         addOrEditForm.value.fileInfoList.push(...fileListTemp.value)
+    //         const SUBMIT_API = isRepublish.value ? addLeaseInfoApi : editLeaseInfoApi
+    //         const res: any = await SUBMIT_API(addOrEditForm.value)
+    //         if (res.code === 200) {
+    //             ElMessage({
+    //                 type: 'success',
+    //                 message: '提交成功',
+    //             })
+    //             addOrEditDialogVisible.value = false
+    //             getLeaseListData()
+    //         }
+    //     }
+    // })
+}
+
+// 自定义事件
+const onFileChange = (fileList: any) => {
+    fileListTemp.value = []
+    fileListTemp.value = fileList.map((e: any) => {
+        return {
+            fileName: e.name,
+            fileUrl: e.url,
+        }
+    })
+
+    // addOrEditForm.value.fileInfoList.push(...fileListTemp.value)
+}
+
+// 取消按钮
+const onCancel = () => {
+    addOrEditDialogVisible.value = false
+}
+const onClose = () => {
+    // addOrEditFormRef.value.resetFields()
+    addOrEditForm.value = JSON.parse(JSON.stringify(addOrEditFormTemp.value))
+    fileListTemp.value = []
+}
+const onDeleteImg = (index: any) => {
+    addOrEditForm.value.fileInfoList.splice(index, 1)
+}
+
+const minLimit = computed(() => {
+    return addOrEditForm.value.fileInfoList.length
+})
+
+const onChangeClass = (val: any) => {
+    console.log(val, '***')
+}
+
+onMounted(() => {
+    getClassAndCompanyData()
+    getLeaseListData()
+    getAreaData()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep.upload-tip .el-form-item__label {
+    color: transparent;
+}
+.el-pagination {
+    justify-content: flex-end;
+    padding: 5px 0;
+}
+:deep.el-pagination.is-background .el-pager li.is-active {
+    background-color: #3cb4a6;
+}
+:deep.el-form--inline .el-form-item {
+    margin-right: 6px;
+    width: 95%;
+}
+
+.img-list {
+    display: flex;
+    align-items: center;
+
+    .img-items {
+        width: 120px;
+        height: 120px;
+        margin-right: 8px;
+        position: relative;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+
+        .mask-img {
+            visibility: hidden;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #000;
+            opacity: 0.5;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .delete-icon {
+                font-size: 20px;
+                cursor: pointer;
+                z-index: 9;
+                color: #fff;
+            }
+        }
+    }
+    .img-items:hover .mask-img {
+        visibility: visible;
+    }
+}
+h1 {
+    padding: 5px 0 15px 0;
+    font-size: 16px;
+    letter-spacing: 1px;
+    color: #000;
+}
+.line {
+    height: 1px;
+    background-color: #ccc;
+    margin-bottom: 15px;
+}
+</style>
diff --git a/src/views/user/lessor/settlement/index.vue b/src/views/user/lessor/settlement/index.vue
new file mode 100644
index 0000000..83f1f02
--- /dev/null
+++ b/src/views/user/lessor/settlement/index.vue
@@ -0,0 +1,689 @@
+<template>
+    <!-- 寻源需求 -->
+    <el-form
+        :inline="true"
+        size="default"
+        label-width="0"
+        ref="searchFormRef"
+        :model="searchParams"
+    >
+        <el-row>
+            <el-col :span="6">
+                <el-form-item prop="leaseName">
+                    <el-input
+                        style="width: 100%"
+                        placeholder="请输入需求名称"
+                        v-model="searchParams.leaseName"
+                        clearable
+                    />
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item prop="leaseCode">
+                    <el-input
+                        style="width: 100%"
+                        placeholder="请输入需求编号"
+                        v-model="searchParams.leaseCode"
+                        clearable
+                    />
+                </el-form-item>
+            </el-col>
+            <!-- <el-col :span="4">
+                <el-form-item prop="leaseStatus">
+                    <el-select
+                        clearable
+                        style="width: 100%"
+                        placeholder="选择需求状态"
+                        v-model="searchParams.leaseStatus"
+                    >
+                        <el-option label="待接单" :value="0" />
+                        <el-option label="已接单" :value="1" />
+                        <el-option label="已到期" :value="2" />
+                    </el-select>
+                </el-form-item>
+            </el-col> -->
+            <el-col :span="6">
+                <el-form-item>
+                    <el-date-picker
+                        style="width: 100%"
+                        v-model="endTime"
+                        type="daterange"
+                        range-separator="-"
+                        value-format="YYYY-MM-DD"
+                        start-placeholder="截止开始日期"
+                        end-placeholder="截止结束日期"
+                    />
+                </el-form-item>
+            </el-col>
+            <el-col :span="6">
+                <el-form-item>
+                    <el-date-picker
+                        v-model="releaseTime"
+                        style="width: 100%"
+                        type="daterange"
+                        range-separator="-"
+                        value-format="YYYY-MM-DD"
+                        start-placeholder="接单开始日期"
+                        end-placeholder="接单结束日期"
+                    />
+                </el-form-item>
+            </el-col>
+        </el-row>
+
+        <el-form-item>
+            <el-button @click="getLeaseListData" type="primary" class="primary-lease"
+                >查询</el-button
+            >
+            <el-button @click="onReset" type="primary" class="primary-lease">重置</el-button>
+            <!-- <el-button
+                @click="
+                    () => {
+                        addOrEditDialogVisible = true
+                        isRepublish = true
+                        dialogTitle = '新增'
+                    }
+                "
+                style="background-color: #17907f; color: #fff"
+            >
+                需求新建
+            </el-button> -->
+        </el-form-item>
+    </el-form>
+
+    <!-- 表格 -->
+    <el-table
+        :data="leaseList"
+        show-overflow-tooltip
+        :header-cell-style="{
+            background: '#00a288',
+            color: '#fff',
+        }"
+    >
+        <el-table-column align="center" label="序号" type="index" width="80" />
+        <el-table-column align="center" prop="leaseCode" label="需求编号" />
+        <el-table-column align="center" prop="leaseName" label="需求名称" />
+        <el-table-column align="center" prop="areaName" label="项目所在地" />
+        <el-table-column align="center" prop="publishUser" label="发布人" />
+        <el-table-column align="center" prop="orderUser" label="操作人" />
+        <el-table-column align="center" prop="endTime" label="需求截止日期" />
+        <el-table-column align="center" prop="orderTime" label="接单时间" />
+        <!-- <el-table-column align="center" prop="leaseStatusName" label="需求状态" />
+        <el-table-column align="center" label="操作" :width="220">
+            <template #default="{ row }">
+                <el-button
+                    text
+                    size="small"
+                    type="primary"
+                    v-if="row.leaseStatus === 2"
+                    @click="onRepublish(row.id, false)"
+                >
+                    重新发布
+                </el-button>
+                <el-button
+                    text
+                    size="small"
+                    type="primary"
+                    v-if="row.leaseStatus === 2"
+                    @click="onRepublish(row.id, true)"
+                >
+                    编辑
+                </el-button>
+                <el-popconfirm
+                    width="220"
+                    :icon="InfoFilled"
+                    icon-color="#626AEF"
+                    title="确定删除该项需求吗？"
+                    @confirm="onDelete(row.id)"
+                    v-if="row.leaseStatus != 1"
+                >
+                    <template #reference>
+                        <el-button size="small" text type="danger"> 删除 </el-button>
+                    </template>
+                    <template #actions="{ confirm }">
+                        <el-button size="small">取消</el-button>
+                        <el-button type="danger" size="small" @click="confirm()"> 确定 </el-button>
+                    </template>
+                </el-popconfirm>
+            </template>
+        </el-table-column> -->
+    </el-table>
+
+    <!-- <el-pagination
+        size="small"
+        background
+        layout="prev, pager, next"
+        :page-size="searchParams.pageSize"
+        :total="total"
+        class="mt-4"
+        @current-change="onCurrentChange"
+        v-if="total > 0"
+    /> -->
+
+    <PagingComponent
+        @getList="getLeaseListData"
+        :pageSize="searchParams.pageSize"
+        :pageNumber="searchParams.pageNum"
+        :total="total"
+    />
+
+    <!-- 新增修改对话框 -->
+    <el-dialog
+        :title="dialogTitle"
+        width="60%"
+        align-center
+        destroy-on-close
+        v-model="addOrEditDialogVisible"
+        @close="onClose"
+    >
+        <el-form
+            label-width="auto"
+            label-position="right"
+            ref="addOrEditFormRef"
+            :model="addOrEditForm"
+            :rules="addOrEditFormRules"
+        >
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="需求名称" prop="leaseName">
+                        <el-input v-model="addOrEditForm.leaseName" placeholder="请输入需求名称" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="装备类目" prop="typeIds">
+                        <el-cascader
+                            clearable
+                            style="width: 100%"
+                            :options="classOptions"
+                            :show-all-levels="false"
+                            placeholder="请选择装备类目"
+                            v-model="addOrEditForm.typeIds"
+                            :props="{
+                                value: 'id',
+                                label: 'name',
+                                checkStrictly: true,
+                            }"
+                            @change="onChangeClass"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="租赁公司" prop="companyId">
+                        <el-select
+                            clearable
+                            style="width: 100%"
+                            placeholder="请选择租赁公司"
+                            v-model="addOrEditForm.companyId"
+                        >
+                            <el-option
+                                v-for="item in companyOptions"
+                                :key="item.companyId"
+                                :label="item.companyName"
+                                :value="item.companyId"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="联系人" prop="person">
+                        <el-input
+                            clearable
+                            placeholder="请输入联系人"
+                            v-model="addOrEditForm.person"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="联系电话" prop="personPhone">
+                        <el-input
+                            clearable
+                            placeholder="请输入联系电话"
+                            v-model="addOrEditForm.personPhone"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="预估租期(天)" prop="leaseDay">
+                        <el-input-number
+                            :min="1"
+                            clearable
+                            :max="9999"
+                            style="width: 100%"
+                            v-model="addOrEditForm.leaseDay"
+                            placeholder="请输入预估租期"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="预估数量" prop="leaseNum">
+                        <el-input-number
+                            clearable
+                            :min="1"
+                            :max="9999"
+                            style="width: 100%"
+                            v-model="addOrEditForm.leaseNum"
+                            placeholder="请输入预估数量"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="需求截止日期" prop="endTime">
+                        <el-date-picker
+                            clearable
+                            type="date"
+                            style="width: 100%"
+                            value-format="YYYY-MM-DD"
+                            v-model="addOrEditForm.endTime"
+                            placeholder="请选择需求截止日期"
+                            :disabled-date="disabledDate"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="项目所在地" prop="areaId">
+                        <el-select
+                            clearable
+                            style="width: 100%"
+                            placeholder="请选择项目所在地"
+                            v-model="addOrEditForm.areaId"
+                        >
+                            <el-option
+                                v-for="item in areaList"
+                                :key="item.areaId"
+                                :label="item.areaName"
+                                :value="item.areaId"
+                            />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
+                        支持格式：.jpg、.png 单个文件大小不能超过2M，最多可上传4张
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="参考图片/样式">
+                        <div class="img-list" v-if="addOrEditForm.fileInfoList.length > 0">
+                            <div
+                                v-for="(item, index) in addOrEditForm.fileInfoList"
+                                :key="item.id"
+                                class="img-items"
+                            >
+                                <img :src="item.fileUrl" alt="" />
+
+                                <div class="mask-img">
+                                    <el-icon class="delete-icon" @click="onDeleteImg(index)"
+                                        ><DeleteFilled
+                                    /></el-icon>
+                                </div>
+                            </div>
+                        </div>
+                        <UploadComponentNew
+                            :maxSize="2"
+                            :minLimit="minLimit"
+                            :max-limit="4"
+                            width="120px"
+                            height="120px"
+                            :autoUpload="true"
+                            :multiple="true"
+                            :fileListN="addOrEditForm.fileInfoList"
+                            listType="picture-card"
+                            :acceptTypeList="['.jpg', '.png']"
+                            :actionUrl="uploadUrl"
+                            @onFileChange="onFileChange"
+                        >
+                            <template v-slot:default>
+                                <el-icon size="48" color="#aaa"><Plus /></el-icon>
+                            </template>
+                        </UploadComponentNew>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="需求描述" prop="description">
+                        <el-input
+                            clearable
+                            type="textarea"
+                            placeholder="请输入需求描述"
+                            v-model="addOrEditForm.description"
+                            :autosize="{ minRows: 6, maxRows: 10 }"
+                        />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="onCancel">取消</el-button>
+                <el-button type="primary" @click="onSubmit(false)" v-if="isSave"> 保存 </el-button>
+                <el-button type="primary" @click="onSubmit(true)"> 提交 </el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import UploadComponentNew from 'components/uploadComponentNew/index.vue'
+import PagingComponent from 'components/PagingComponent/index.vue'
+import { getCompanyListApi, getGoodsClassListApi, getAreaApi } from 'http/api/home'
+import { getAcceptOrdersListApi } from 'http/api/sourcing/index'
+import { InfoFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
+const addOrEditDialogVisible = ref(false)
+const companyOptions = ref<any>([])
+const classOptions = ref<any>([])
+const addOrEditFormRef = ref<any>(null)
+const searchFormRef = ref<any>(null)
+const leaseList = ref<any>([])
+const isRepublish = ref(true)
+const isSave = ref(false)
+const total = ref(0)
+const endTime = ref([])
+const areaList = ref<any>([])
+const releaseTime = ref([])
+const dialogTitle = ref('新增')
+const fileListTemp = ref<any>([])
+const props2 = {
+    multiple: true,
+    checkStrictly: true,
+}
+
+const searchParams = reactive({
+    leaseName: '',
+    leaseCode: '',
+    finishStartTime: '',
+    finishEndTime: '',
+    orderStartTime: '',
+    orderEndTime: '',
+    pageSize: 1,
+    pageNum: 10,
+})
+const addOrEditForm = ref<any>({
+    leaseName: '',
+    typeId: '',
+    typeIds: [],
+    companyId: '',
+    person: '',
+    personPhone: '',
+    leaseDay: 1,
+    leaseNum: 1,
+    endTime: '',
+    description: '',
+    isSubmit: '',
+    fileInfoList: [],
+    areaId: '',
+})
+const addOrEditFormTemp = ref<any>({
+    leaseName: '',
+    typeId: '',
+    typeIds: [],
+    companyId: '',
+    person: '',
+    personPhone: '',
+    leaseDay: 1,
+    leaseNum: 1,
+    endTime: '',
+    description: '',
+    isSubmit: '',
+    fileInfoList: fileListTemp ? fileListTemp : [],
+    areaId: '',
+})
+
+const addOrEditFormRules = reactive({
+    leaseName: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
+    typeIds: [{ required: true, message: '请选择装备类目', trigger: 'change' }],
+    companyId: [{ required: true, message: '请选择租赁公司', trigger: 'change' }],
+    person: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
+    personPhone: [
+        { required: true, message: '请输入联系电话', trigger: 'blur' },
+        {
+            pattern: /^1[3456789]\d{9}$/,
+            message: '请输入正确的联系电话',
+            trigger: 'blur',
+        },
+    ],
+    leaseDay: [{ required: true, message: '请输入预估租期', trigger: 'blur' }],
+    leaseNum: [{ required: true, message: '请输入预估数量', trigger: 'blur' }],
+    endTime: [{ required: true, message: '请选择需求截止日期', trigger: 'change' }],
+    fileInfoList: [{ required: true, message: '请上传参考图片', trigger: 'blur' }],
+    areaId: [{ required: true, message: '请选择项目所在地', trigger: 'change' }],
+})
+
+const disabledDate = (date: any) => {
+    const today = new Date()
+    // 禁用今天之前的日期
+    return date.getTime() < today.getTime()
+}
+
+const getClassAndCompanyData = async () => {
+    const classResult: any = await getGoodsClassListApi()
+    const companyResult: any = await getCompanyListApi()
+
+    classOptions.value = classResult.data
+    companyOptions.value = companyResult.data
+}
+
+// 获取列表
+const getLeaseListData = async () => {
+    if (endTime.value.length > 0) {
+        searchParams.finishStartTime = endTime.value[0]
+        searchParams.finishEndTime = endTime.value[1]
+    }
+    if (releaseTime.value.length > 0) {
+        searchParams.orderStartTime = releaseTime.value[0]
+        searchParams.orderEndTime = releaseTime.value[1]
+    }
+    const { data: res }: any = await getAcceptOrdersListApi(searchParams)
+
+    leaseList.value = res.rows
+    total.value = res.total
+}
+
+const getAreaData = async () => {
+    const res: any = await getAreaApi()
+    areaList.value = res.data
+}
+
+// 重置
+const onReset = () => {
+    endTime.value = []
+    releaseTime.value = []
+    searchParams.finishStartTime = ''
+    searchParams.finishEndTime = ''
+    searchParams.orderStartTime = ''
+    searchParams.orderEndTime = ''
+    searchParams.pageNum = 1
+    searchParams.pageSize = 10
+    searchFormRef.value.resetFields()
+    getLeaseListData()
+}
+// 删除
+const onDelete = async (id: any) => {
+    const res: any = await deleteLeaseInfoApi({ id })
+    if (res.code === 200) {
+        ElMessage({
+            type: 'success',
+            message: '删除成功',
+        })
+        getLeaseListData()
+    }
+}
+// 重新发布
+const onRepublish = async (id: any, type: any) => {
+    dialogTitle.value = '编辑'
+    isRepublish.value = false
+    isSave.value = type
+    const res: any = await getLeaseDetailsByIdApi({ id })
+    const {
+        leaseName,
+        typeId,
+        companyId,
+        person,
+        personPhone,
+        leaseDay,
+        leaseNum,
+        endTime,
+        description,
+        typeIds,
+        fileInfoList,
+        areaId,
+    } = res.data
+
+    Object.assign(addOrEditForm.value, {
+        leaseName,
+        typeId,
+        companyId,
+        person,
+        personPhone,
+        leaseDay,
+        leaseNum,
+        endTime,
+        description,
+        typeIds,
+        id,
+        fileInfoList: fileInfoList ? fileInfoList : [],
+        areaId,
+    })
+
+    addOrEditForm.value.typeIds = addOrEditForm.value.typeIds.map((e: any) => {
+        return (e *= 1)
+    })
+
+    addOrEditDialogVisible.value = true
+}
+
+// 提交
+const onSubmit = (type: boolean) => {
+    addOrEditFormRef.value.validate(async (valid: any) => {
+        if (valid) {
+            addOrEditForm.value.isSubmit = type
+            addOrEditForm.value.typeId =
+                addOrEditForm.value.typeIds[addOrEditForm.value.typeIds.length - 1]
+
+            addOrEditForm.value.fileInfoList.push(...fileListTemp.value)
+            const SUBMIT_API = isRepublish.value ? addLeaseInfoApi : editLeaseInfoApi
+            const res: any = await SUBMIT_API(addOrEditForm.value)
+            if (res.code === 200) {
+                ElMessage({
+                    type: 'success',
+                    message: '提交成功',
+                })
+
+                addOrEditDialogVisible.value = false
+                getLeaseListData()
+            }
+        }
+    })
+}
+
+// 自定义事件
+const onFileChange = (fileList: any) => {
+    fileListTemp.value = []
+    fileListTemp.value = fileList.map((e: any) => {
+        return {
+            fileName: e.name,
+            fileUrl: e.url,
+        }
+    })
+
+    // addOrEditForm.value.fileInfoList.push(...fileListTemp.value)
+}
+
+// 取消按钮
+const onCancel = () => {
+    addOrEditDialogVisible.value = false
+}
+const onClose = () => {
+    addOrEditFormRef.value.resetFields()
+    addOrEditForm.value = JSON.parse(JSON.stringify(addOrEditFormTemp.value))
+    fileListTemp.value = []
+}
+const onDeleteImg = (index: any) => {
+    addOrEditForm.value.fileInfoList.splice(index, 1)
+}
+
+const minLimit = computed(() => {
+    return addOrEditForm.value.fileInfoList.length
+})
+
+const onChangeClass = (val: any) => {
+    console.log(val, '***')
+}
+
+onMounted(() => {
+    getClassAndCompanyData()
+    getLeaseListData()
+    getAreaData()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep.upload-tip .el-form-item__label {
+    color: transparent;
+}
+.el-pagination {
+    justify-content: flex-end;
+    padding: 5px 0;
+}
+:deep.el-pagination.is-background .el-pager li.is-active {
+    background-color: #3cb4a6;
+}
+:deep.el-form--inline .el-form-item {
+    margin-right: 6px;
+    width: 95%;
+}
+
+.img-list {
+    display: flex;
+    align-items: center;
+
+    .img-items {
+        width: 120px;
+        height: 120px;
+        margin-right: 8px;
+        position: relative;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+
+        .mask-img {
+            visibility: hidden;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #000;
+            opacity: 0.5;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .delete-icon {
+                font-size: 20px;
+                cursor: pointer;
+                z-index: 9;
+                color: #fff;
+            }
+        }
+    }
+    .img-items:hover .mask-img {
+        visibility: visible;
+    }
+}
+</style>
diff --git a/src/views/user/sourcingNeed/index.vue b/src/views/user/sourcingNeed/index.vue
index 7a21d65..35afa66 100644
--- a/src/views/user/sourcingNeed/index.vue
+++ b/src/views/user/sourcingNeed/index.vue
@@ -171,10 +171,10 @@
         v-if="total > 0"
     /> -->
 
-    <el-pagination
+    <!-- <el-pagination
         style="text-align: right"
         background
-        size="small"
+        small="small"
         :total="total"
         :page-sizes="[10, 20, 50, 100]"
         v-model:page-size="searchParams.pageSize"
@@ -182,6 +182,13 @@
         layout="total, prev, pager, next,sizes"
         @size-change="getLeaseListData"
         @current-change="getLeaseListData"
+    /> -->
+
+    <PagingComponent
+        @getList="getLeaseListData"
+        :pageSize="searchParams.pageSize"
+        :pageNumber="searchParams.pageNum"
+        :total="total"
     />
 
     <!-- 新增修改对话框 -->
@@ -401,6 +408,7 @@
 
 <script setup lang="ts">
 import UploadComponentNew from 'components/uploadComponentNew/index.vue'
+import PagingComponent from 'components/PagingComponent/index.vue'
 import { getCompanyListApi, getGoodsClassListApi, getAreaApi } from 'http/api/home'
 import {
     addLeaseInfoApi,