代码完善

This commit is contained in:
BianLzhaoMin 2024-12-03 13:51:08 +08:00
parent 954cb755d2
commit 275b7d0038
9 changed files with 1699 additions and 16 deletions

4
components.d.ts vendored
View File

@ -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']

View File

@ -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"

View File

@ -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)
}

View File

@ -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',

View File

@ -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'

View File

@ -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'] },
]

View File

@ -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>

View File

@ -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>

View File

@ -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,