代码完善
This commit is contained in:
parent
954cb755d2
commit
275b7d0038
|
|
@ -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']
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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'] },
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue