1113 lines
42 KiB
Vue
1113 lines
42 KiB
Vue
<template>
|
||
<div class="app-container-content">
|
||
<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
|
||
clearable
|
||
style="width: 100%"
|
||
placeholder="请输入需求名称"
|
||
v-model="searchParams.leaseName"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-form-item prop="leaseCode">
|
||
<el-input
|
||
clearable
|
||
style="width: 100%"
|
||
placeholder="请输入需求编号"
|
||
v-model="searchParams.leaseCode"
|
||
/>
|
||
</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
|
||
v-model="endTime"
|
||
type="daterange"
|
||
style="width: 100%"
|
||
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
|
||
type="daterange"
|
||
style="width: 100%"
|
||
v-model="releaseTime"
|
||
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="
|
||
() => {
|
||
isRepublish = true
|
||
dialogTitle = '新增'
|
||
addOrEditDialogVisible = true
|
||
}
|
||
"
|
||
type="primary"
|
||
class="primary-lease"
|
||
>
|
||
需求新建
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="leaseList"
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
color: '#fff',
|
||
background: '#00a288',
|
||
}"
|
||
>
|
||
<el-table-column align="center" label="序号" type="index" width="80" />
|
||
<el-table-column align="center" label="需求编号">
|
||
<template #default="{ row }">
|
||
<a
|
||
style="cursor: pointer; color: #00a288; text-decoration: underline"
|
||
@click="router.push({ name: 'demand-details', query: { id: row.id } })"
|
||
>
|
||
{{ row.leaseCode }}
|
||
</a>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="leaseName" label="需求名称" />
|
||
<el-table-column align="center" prop="cityName" label="需求所在地" />
|
||
<el-table-column align="center" prop="publishUser" label="发布人" />
|
||
<el-table-column align="center" prop="endTime" label="需求截止日期" width="120" />
|
||
<el-table-column align="center" prop="startTime" label="发布时间" />
|
||
<el-table-column align="center" prop="orderUser" label="接单人" />
|
||
<el-table-column align="center" prop="orderPhone" label="接单人联系方式" width="140" />
|
||
<el-table-column align="center" prop="leaseStatusName" label="需求状态" />
|
||
<el-table-column align="center" label="操作" :width="220">
|
||
<template #default="{ row }">
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
class="primary-lease"
|
||
v-if="row.leaseStatus === 2 || row.leaseStatus === 4"
|
||
@click="onRepublish(row.id, false)"
|
||
>
|
||
重新发布
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
class="primary-lease"
|
||
v-if="
|
||
row.leaseStatus === 2 || row.leaseStatus === 0 || row.leaseStatus === 4
|
||
"
|
||
@click="onRepublish(row.id, true, row.leaseStatus)"
|
||
>
|
||
编辑
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
class="primary-lease"
|
||
v-if="row.leaseStatus === 3"
|
||
@click="onAuditing(row.id, 1)"
|
||
>
|
||
通过
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
class="primary-lease"
|
||
v-if="row.leaseStatus === 3"
|
||
@click="onAuditing(row.id, 4)"
|
||
>
|
||
驳回
|
||
</el-button>
|
||
<el-popconfirm
|
||
width="220"
|
||
:icon="InfoFilled"
|
||
icon-color="#626AEF"
|
||
title="确定删除该项需求吗？"
|
||
@confirm="onDelete(row.id)"
|
||
v-if="row.leaseStatus === 2 || row.leaseStatus === 0"
|
||
>
|
||
<template #reference>
|
||
<el-button size="small" type="primary" class="primary-lease">
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
<template #actions="{ confirm }">
|
||
<el-button type="primary" class="primary-lease" size="small"
|
||
>取消</el-button
|
||
>
|
||
<el-button
|
||
class="primary-lease"
|
||
type="primary"
|
||
size="small"
|
||
@click="confirm()"
|
||
>
|
||
确定
|
||
</el-button>
|
||
</template>
|
||
</el-popconfirm>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<PagingComponent
|
||
:total="total"
|
||
:size="searchParams.pageSize"
|
||
:page="searchParams.pageNum"
|
||
@getListChange="getLeaseListData"
|
||
v-model:page-num="searchParams.pageNum"
|
||
v-model:page-size="searchParams.pageSize"
|
||
/>
|
||
|
||
<!-- 新增修改对话框 -->
|
||
|
||
<el-dialog
|
||
width="60%"
|
||
align-center
|
||
@close="onClose"
|
||
destroy-on-close
|
||
:title="dialogTitle"
|
||
v-model="addOrEditDialogVisible"
|
||
>
|
||
<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="项目所在地" style="width: 100%" prop="provinceCode">
|
||
<el-row :span="24">
|
||
<el-col :span="6">
|
||
<el-form-item>
|
||
<el-select
|
||
clearable
|
||
style="width: 95%"
|
||
placeholder="请选择项目所在省"
|
||
v-model="addOrEditForm.provinceCode"
|
||
@change="onProvinceChange($event)"
|
||
>
|
||
<el-option
|
||
:key="item.areaId"
|
||
:value="item.areaCode * 1"
|
||
:label="item.areaName"
|
||
v-for="item in areaList"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item prop="cityCode">
|
||
<el-select
|
||
clearable
|
||
style="width: 95%"
|
||
placeholder="请选择项目所在市"
|
||
v-model="addOrEditForm.cityCode"
|
||
@change="onCityChange($event)"
|
||
>
|
||
<el-option
|
||
:key="item.areaId"
|
||
:value="item.areaCode * 1"
|
||
:label="item.areaName"
|
||
v-for="item in areaCityList"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item prop="areaCode">
|
||
<el-select
|
||
clearable
|
||
style="width: 95%"
|
||
placeholder="请选择项目所在区/县"
|
||
v-model="addOrEditForm.areaCode"
|
||
@change="onCountyChange($event)"
|
||
>
|
||
<el-option
|
||
:key="item.areaId"
|
||
:value="item.areaCode * 1"
|
||
:label="item.areaName"
|
||
v-for="item in areaCountyList"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item prop="address">
|
||
<el-input
|
||
style="width: 100%"
|
||
clearable
|
||
placeholder="请输入详细地址"
|
||
v-model="addOrEditForm.address"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<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="endTime">
|
||
<el-date-picker
|
||
clearable
|
||
type="date"
|
||
style="width: 100%"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
:disabled-date="disabledDate"
|
||
v-model="addOrEditForm.endTime"
|
||
placeholder="请选择需求截止日期"
|
||
/>
|
||
</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="leaseStartTime">
|
||
<el-date-picker
|
||
clearable
|
||
type="date"
|
||
style="width: 100%"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
:disabled-date="disabledDate"
|
||
v-model="addOrEditForm.leaseStartTime"
|
||
placeholder="请选择需求截止日期"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="租赁结束日期" prop="leaseEndTime">
|
||
<el-date-picker
|
||
clearable
|
||
type="date"
|
||
style="width: 100%"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
:disabled-date="disabledLeaseEndTime"
|
||
v-model="addOrEditForm.leaseEndTime"
|
||
placeholder="请选择需求截止日期"
|
||
/>
|
||
</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"
|
||
:max-limit="4"
|
||
width="100px"
|
||
height="100px"
|
||
:multiple="true"
|
||
:autoUpload="true"
|
||
:minLimit="addOrEditForm.fileInfoList.length"
|
||
:actionUrl="uploadUrl"
|
||
listType="picture-card"
|
||
@onFileChange="onFileChange"
|
||
:acceptTypeList="['.jpg', '.png']"
|
||
>
|
||
<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: 4, maxRows: 6 }"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-form-item
|
||
label="装备需求信息"
|
||
style="font-weight: bold"
|
||
prop="detailsList"
|
||
>
|
||
<el-button
|
||
class="primary-lease"
|
||
type="primary"
|
||
@click="onAddDemandInfo"
|
||
>
|
||
添加装备描述
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<el-form
|
||
label-width="auto"
|
||
label-position="right"
|
||
v-for="(item, index) in addOrEditForm.detailsList"
|
||
:key="item.newId"
|
||
:model="item"
|
||
:rules="addOrEditDemandFormRules"
|
||
:ref="
|
||
($event:any) => {
|
||
addOrEditDemandFormRefList[index] = $event
|
||
}
|
||
"
|
||
style="position: relative"
|
||
>
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
left: -5px;
|
||
top: 0;
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 13px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
line-height: 26px;
|
||
color: #fff;
|
||
background-color: #00a288;
|
||
"
|
||
>
|
||
{{ index + 1 }}
|
||
</div>
|
||
<el-row :gutter="24">
|
||
<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="item.typeIds"
|
||
:props="{
|
||
value: 'id',
|
||
label: 'name',
|
||
checkStrictly: true,
|
||
}"
|
||
/>
|
||
</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%"
|
||
placeholder="请输入预估数量"
|
||
v-model="item.leaseNum"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="12">
|
||
<el-form-item label="装备描述">
|
||
<el-input
|
||
clearable
|
||
type="textarea"
|
||
placeholder="请输入装备描述"
|
||
v-model="item.description"
|
||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||
/>
|
||
</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="24">
|
||
<el-col :span="20">
|
||
<el-form-item label="参考图片/样式">
|
||
<div class="img-list" v-if="item.fileInfoList.length > 0">
|
||
<div
|
||
v-for="(j, i) in item.fileInfoList"
|
||
:key="j.fileUrl"
|
||
class="img-items"
|
||
>
|
||
<img :src="j.fileUrl" alt="" />
|
||
|
||
<div class="mask-img">
|
||
<el-icon
|
||
class="delete-icon"
|
||
@click="onDeleteImgInDetails(index, i)"
|
||
><DeleteFilled
|
||
/></el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<UploadComponentNew
|
||
:maxSize="2"
|
||
:max-limit="4"
|
||
width="100px"
|
||
height="100px"
|
||
:currentIndex="index"
|
||
:multiple="true"
|
||
:autoUpload="true"
|
||
:minLimit="item.fileInfoList.length"
|
||
:actionUrl="uploadUrl"
|
||
listType="picture-card"
|
||
@onFileChange="onFileChangeInDetails"
|
||
:acceptTypeList="['.jpg', '.png']"
|
||
>
|
||
<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
|
||
size="small"
|
||
type="danger"
|
||
class="primary-lease"
|
||
@click="onDeleteDemand(index)"
|
||
>
|
||
移除
|
||
</el-button>
|
||
</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" type="primary" @click="onSubmit(true)">
|
||
提交
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||
import UploadComponentNew from 'components/uploadComponentNew/index.vue'
|
||
import { getCompanyListApi, getGoodsClassListApi, getAreaApi } from 'http/api/home'
|
||
import {
|
||
addLeaseInfoApi,
|
||
getLeaseListApi,
|
||
maLeaseAuditApi,
|
||
editLeaseInfoApi,
|
||
deleteLeaseInfoApi,
|
||
getLeaseDetailsByIdApi,
|
||
} from 'http/api/sourcing/index'
|
||
import { InfoFilled } from '@element-plus/icons-vue'
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { useRouter } from 'vue-router'
|
||
const total = ref(0)
|
||
const endTime = ref([])
|
||
const isSave = ref(false)
|
||
const router = useRouter()
|
||
const releaseTime = ref([])
|
||
const isRepublish = ref(true)
|
||
const areaList = ref<any>([])
|
||
const leaseList = ref<any>([])
|
||
const dialogTitle = ref('新增')
|
||
const classOptions = ref<any>([])
|
||
const fileListTemp = ref<any>([])
|
||
const companyOptions = ref<any>([])
|
||
const searchFormRef = ref<any>(null)
|
||
const addOrEditFormRef = ref<any>(null)
|
||
const addOrEditDialogVisible = ref(false)
|
||
const addOrEditDemandFormList = ref<any>([])
|
||
const addOrEditDemandFormRefList = ref<any>([])
|
||
const areaProvinceList = ref([])
|
||
const areaCityList = ref<any>([])
|
||
const areaCountyList = ref<any>([])
|
||
const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
|
||
|
||
const searchParams = reactive({
|
||
leaseName: '',
|
||
leaseCode: '',
|
||
leaseStatus: '',
|
||
finishStartTime: '',
|
||
finishEndTime: '',
|
||
publishStartTime: '',
|
||
publishEndTime: '',
|
||
pageSize: 10,
|
||
pageNum: 1,
|
||
})
|
||
const addOrEditForm = ref<any>({
|
||
leaseName: '',
|
||
companyId: '',
|
||
person: '',
|
||
personPhone: '',
|
||
// leaseDay: 1,
|
||
leaseStartTime: '',
|
||
leaseEndTime: '',
|
||
endTime: '',
|
||
description: '',
|
||
isSubmit: '',
|
||
fileInfoList: [],
|
||
fileInfoTempList: [],
|
||
areaCode: '',
|
||
cityCode: '',
|
||
provinceCode: '',
|
||
address: '',
|
||
detailsList: [],
|
||
})
|
||
const addOrEditFormTemp = ref<any>({
|
||
leaseName: '',
|
||
companyId: '',
|
||
person: '',
|
||
personPhone: '',
|
||
leaseStartTime: '',
|
||
leaseEndTime: '',
|
||
// leaseDay: 1,
|
||
endTime: '',
|
||
description: '',
|
||
isSubmit: '',
|
||
fileInfoList: [],
|
||
fileInfoTempList: [],
|
||
areaCode: '',
|
||
cityCode: '',
|
||
provinceCode: '',
|
||
address: '',
|
||
detailsList: [],
|
||
})
|
||
|
||
const checkEndTime = (rule: any, value: any, callback: any) => {
|
||
if (!value) {
|
||
return callback(new Error('请选择租赁结束日期'))
|
||
}
|
||
const startTime = addOrEditForm.value.leaseStartTime
|
||
if (startTime && new Date(value) <= new Date(startTime)) {
|
||
return callback(new Error('租赁结束日期必须大于租赁开始日期'))
|
||
}
|
||
callback()
|
||
}
|
||
const checkStartTime = (rule: any, value: any, callback: any) => {
|
||
if (!value) {
|
||
return callback(new Error('请选择租赁开始日期'))
|
||
}
|
||
const endTime = addOrEditForm.value.leaseEndTime
|
||
if (endTime && new Date(value) >= new Date(endTime)) {
|
||
return callback(new Error('租赁开始日期必须小于租赁结束日期'))
|
||
}
|
||
callback()
|
||
}
|
||
|
||
const addOrEditFormRules = reactive({
|
||
person: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
|
||
// leaseDay: [{ required: true, message: '请输入预估租期', trigger: 'blur' }],
|
||
leaseName: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
|
||
areaCode: [{ required: true, message: '请选择项目所在区/县', trigger: 'change' }],
|
||
cityCode: [{ required: true, message: '请选择项目所在市', trigger: 'change' }],
|
||
provinceCode: [{ required: true, message: '请选择项目所在省', trigger: 'change' }],
|
||
address: [{ required: true, message: '请输入项目详细地址', trigger: 'blur' }],
|
||
companyId: [{ required: true, message: '请选择租赁公司', trigger: 'change' }],
|
||
fileInfoList: [{ required: true, message: '请上传参考图片', trigger: 'blur' }],
|
||
endTime: [{ required: true, message: '请选择需求截止日期', trigger: 'change' }],
|
||
leaseStartTime: [
|
||
{ required: true, message: '请选择租赁开始日期', trigger: 'change' },
|
||
{ validator: checkStartTime, trigger: 'blur' },
|
||
],
|
||
leaseEndTime: [
|
||
{ required: true, message: '请选择需租赁结束日期', trigger: 'change' },
|
||
{ validator: checkEndTime, trigger: 'blur' },
|
||
],
|
||
detailsList: [{ required: true, message: '请添加需求装备信息', trigger: 'change' }],
|
||
personPhone: [
|
||
{ required: true, message: '请输入联系电话', trigger: 'blur' },
|
||
{
|
||
pattern: /^1[3456789]\d{9}$/,
|
||
message: '请输入正确的联系电话',
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
})
|
||
const addOrEditDemandFormRules = reactive({
|
||
typeIds: [{ required: true, message: '请选择装备类目', trigger: 'change' }],
|
||
leaseNum: [{ required: true, message: '请输入预估数量', trigger: 'blur' }],
|
||
})
|
||
|
||
const disabledDate = (date: any) => {
|
||
const today = new Date()
|
||
// 禁用今天之前的日期
|
||
return date.getTime() < today.getTime()
|
||
}
|
||
|
||
const disabledLeaseEndTime = (date: any) => {
|
||
const today = new Date()
|
||
return date.getTime() < today.getTime()
|
||
}
|
||
|
||
const getClassAndCompanyData = async () => {
|
||
const classResult: any = await getGoodsClassListApi()
|
||
const companyResult: any = await getCompanyListApi()
|
||
// 只需要 前3个层级
|
||
const filterData = (data: any, level = 1) => {
|
||
return data.map((item: any) => {
|
||
if (level < 3) {
|
||
item.children = filterData(item.children, level + 1)
|
||
} else {
|
||
delete item.children
|
||
}
|
||
return item
|
||
})
|
||
}
|
||
classOptions.value = filterData(classResult.data)
|
||
// console.log('🚀 ~ getClassAndCompanyData ~ classOptions.value:', classOptions.value)
|
||
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 getLeaseListApi(searchParams)
|
||
leaseList.value = res.rows
|
||
total.value = res.total
|
||
}
|
||
|
||
const getAreaData = async () => {
|
||
const res: any = await getAreaApi(0)
|
||
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 (id: any, type: any, leaseStatus: any) => {
|
||
dialogTitle.value = '编辑'
|
||
isRepublish.value = false
|
||
isSave.value = type
|
||
if (leaseStatus === 0) isSave.value = false
|
||
const res: any = await getLeaseDetailsByIdApi({ id })
|
||
const {
|
||
leaseName,
|
||
companyId,
|
||
person,
|
||
personPhone,
|
||
// leaseDay,
|
||
endTime,
|
||
description,
|
||
fileInfoList,
|
||
areaCode,
|
||
address,
|
||
cityCode,
|
||
provinceCode,
|
||
detailsList,
|
||
leaseStartTime,
|
||
leaseEndTime,
|
||
} = res.data
|
||
|
||
Object.assign(addOrEditForm.value, {
|
||
leaseName,
|
||
companyId,
|
||
person,
|
||
personPhone,
|
||
// leaseDay,
|
||
endTime,
|
||
description,
|
||
id,
|
||
fileInfoList: fileInfoList ? fileInfoList : [],
|
||
areaCode,
|
||
address,
|
||
cityCode,
|
||
provinceCode,
|
||
detailsList,
|
||
leaseStartTime,
|
||
leaseEndTime,
|
||
})
|
||
|
||
detailsList.forEach((e: any) => {
|
||
if (!e.fileInfoList) {
|
||
e.fileInfoList = []
|
||
}
|
||
e.fileInfoTempList = []
|
||
e.typeIds = e.typeIds.map((j: any) => {
|
||
return (j *= 1)
|
||
})
|
||
})
|
||
Promise.all([onProvinceChange(provinceCode), onCityChange(cityCode)]).then(() => {
|
||
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)
|
||
|
||
let isDemand = false
|
||
for (let index = 0; index < addOrEditForm.value.detailsList.length; index++) {
|
||
try {
|
||
const valid = await new Promise((resolve) => {
|
||
addOrEditDemandFormRefList.value[index].validate((valid: any) => {
|
||
resolve(valid)
|
||
})
|
||
})
|
||
|
||
if (!valid) {
|
||
isDemand = true
|
||
throw new Error('表单校验失败')
|
||
}
|
||
} catch (error) {}
|
||
}
|
||
if (isDemand) return
|
||
|
||
addOrEditForm.value.fileInfoList = [
|
||
...addOrEditForm.value.fileInfoList,
|
||
...addOrEditForm.value.fileInfoTempList,
|
||
]
|
||
addOrEditForm.value.detailsList.forEach((e: any) => {
|
||
e.fileInfoList = [...e.fileInfoList, ...e.fileInfoTempList]
|
||
e.typeId = e.typeIds[e.typeIds.length - 1]
|
||
})
|
||
addOrEditForm.value.endTime = addOrEditForm.value.endTime.replace(
|
||
'00:00:00',
|
||
'23:59:59',
|
||
)
|
||
addOrEditForm.value.leaseEndTime = addOrEditForm.value.leaseEndTime.replace(
|
||
'00:00:00',
|
||
'23:59:59',
|
||
)
|
||
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) => {
|
||
addOrEditForm.value.fileInfoTempList = []
|
||
const fileListTemp = fileList.map((e: any) => {
|
||
return {
|
||
fileName: e.name,
|
||
fileUrl: e.url,
|
||
}
|
||
})
|
||
|
||
addOrEditForm.value.fileInfoTempList.push(...fileListTemp)
|
||
}
|
||
|
||
const onFileChangeInDetails = (fileList: any, index: number) => {
|
||
addOrEditForm.value.detailsList[index].fileInfoTempList = []
|
||
const fileListTemp = fileList.map((e: any) => {
|
||
return {
|
||
fileName: e.name,
|
||
fileUrl: e.url,
|
||
}
|
||
})
|
||
addOrEditForm.value.detailsList[index].fileInfoTempList.push(...fileListTemp)
|
||
}
|
||
|
||
// 取消按钮
|
||
const onCancel = () => {
|
||
addOrEditDialogVisible.value = false
|
||
}
|
||
const onClose = () => {
|
||
addOrEditDemandFormList.value = []
|
||
addOrEditFormRef.value.resetFields()
|
||
addOrEditForm.value = JSON.parse(JSON.stringify(addOrEditFormTemp.value))
|
||
fileListTemp.value = []
|
||
}
|
||
const onDeleteImg = (index: any) => {
|
||
addOrEditForm.value.fileInfoList.splice(index, 1)
|
||
}
|
||
const onDeleteImgInDetails = (index: any, j: any) => {
|
||
addOrEditForm.value.detailsList[index].fileInfoList.splice(j, 1)
|
||
}
|
||
|
||
const minLimit = computed(() => {
|
||
return addOrEditForm.value.fileInfoList.length
|
||
})
|
||
|
||
const onChangeClass = (val: any) => {
|
||
console.log(val, '***')
|
||
}
|
||
const onAddDemandInfo = () => {
|
||
const newId = Date.now()
|
||
addOrEditForm.value.detailsList.push({
|
||
newId,
|
||
typeIds: [],
|
||
typeId: '',
|
||
leaseNum: 1,
|
||
fileInfoList: [],
|
||
fileInfoTempList: [],
|
||
description: '',
|
||
})
|
||
}
|
||
|
||
const onDeleteDemand = (index: any) => {
|
||
addOrEditForm.value.detailsList.splice(index, 1)
|
||
addOrEditDemandFormRefList.value.splice(index, 1)
|
||
addOrEditDemandFormRefList.value.forEach((e: any) => {
|
||
if (e) e.clearValidate()
|
||
})
|
||
}
|
||
|
||
const onProvinceChange = async (id: any) => {
|
||
const res: any = await getAreaApi(id)
|
||
areaCityList.value = res.data
|
||
}
|
||
const onCityChange = async (id: any) => {
|
||
const res: any = await getAreaApi(id)
|
||
areaCountyList.value = res.data
|
||
}
|
||
const onCountyChange = async (id: any) => {}
|
||
|
||
const onAuditing = (id: any, leaseStatus: number) => {
|
||
ElMessageBox.confirm(`是否${leaseStatus === 1 ? '通过' : '驳回'}此次接单申请?`, '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'success',
|
||
})
|
||
.then(async () => {
|
||
const res: any = await maLeaseAuditApi({
|
||
id,
|
||
leaseStatus,
|
||
})
|
||
if (res.code == 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '提交成功',
|
||
})
|
||
// 刷新列表
|
||
getLeaseListData()
|
||
}
|
||
})
|
||
.catch(async () => {})
|
||
}
|
||
|
||
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: 100px;
|
||
height: 100px;
|
||
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;
|
||
}
|
||
}
|
||
.app-container-content {
|
||
:deep(.el-dialog) {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
margin: 0 !important;
|
||
position: absolute !important;
|
||
top: 50% !important;
|
||
left: 50% !important;
|
||
transform: translate(-50%, -50%) !important;
|
||
max-height: 100vh !important;
|
||
.el-dialog__body {
|
||
flex: 1;
|
||
overflow-y: scroll !important;
|
||
}
|
||
.dialog-content {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|