1307 lines
37 KiB
Vue
1307 lines
37 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-form
|
|
:inline="true"
|
|
label-width="auto" size="small"
|
|
ref="searchFormRef"
|
|
:model="searchParams"
|
|
>
|
|
<el-card class="search-box">
|
|
<el-row :gutter="5" style="display: flex; justify-content: space-between">
|
|
<el-col :span="5" style="width: 320px">
|
|
<el-form-item prop="leaseName" label="需求名称">
|
|
<el-input
|
|
clearable
|
|
style="width: 100%"
|
|
placeholder="请输入需求名称"
|
|
v-model="searchParams.leaseName"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5" style="width: 320px">
|
|
<el-form-item prop="leaseCode" label="需求编号">
|
|
<el-input
|
|
clearable
|
|
style="width: 100%"
|
|
placeholder="请输入需求编号"
|
|
v-model="searchParams.leaseCode"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5" style="width: 320px">
|
|
<el-form-item prop="leaseStatus" label="需求状态">
|
|
<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="5">
|
|
<el-form-item label="截止日期">
|
|
<el-date-picker
|
|
v-model="endTime"
|
|
type="daterange"
|
|
style="width: 240px"
|
|
range-separator="-"
|
|
value-format="YYYY-MM-DD"
|
|
start-placeholder="截止开始日期"
|
|
end-placeholder="截止结束日期"
|
|
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-form-item label="发布日期">
|
|
<el-date-picker
|
|
type="daterange"
|
|
style="width: 240px"
|
|
v-model="releaseTime"
|
|
range-separator="-"
|
|
value-format="YYYY-MM-DD"
|
|
start-placeholder="发布开始日期"
|
|
end-placeholder="发布结束日期"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
<el-row>
|
|
<el-col :span="24" style="text-align: right; margin-top: 10px;padding-right: 15px">
|
|
<el-button @click="getLeaseListData" size="mini" icon="el-icon-search" type="primary" class="primary-lease"
|
|
>查询
|
|
</el-button
|
|
>
|
|
<el-button @click="onReset" icon="el-icon-refresh" size="mini" class="primary-lease">重置</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-form>
|
|
|
|
<el-card class="content-box">
|
|
<el-row>
|
|
<el-col :span="24" style="text-align: right;">
|
|
<el-button size="mini"
|
|
@click="
|
|
() => {
|
|
isRepublish = true
|
|
dialogTitle = '新增'
|
|
addOrEditDialogVisible = true
|
|
}
|
|
"
|
|
type="primary"
|
|
class="primary-lease"
|
|
>
|
|
需求新建
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="table-container">
|
|
<!-- 表格 -->
|
|
<el-table
|
|
:data="leaseList"
|
|
show-overflow-tooltip
|
|
border stripe height="546"
|
|
>
|
|
<el-table-column align="center" label="序号" type="index" width="80"/>
|
|
<el-table-column align="center" label="需求编号">
|
|
<template slot-scope="scope">
|
|
<a
|
|
style="cursor: pointer; color: #00a288; text-decoration: underline"
|
|
@click="handleToDetails(scope.row.id)"
|
|
>
|
|
{{ scope.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 slot-scope="scope">
|
|
<el-button
|
|
size="small"
|
|
type="primary"
|
|
class="primary-lease"
|
|
v-if="scope.row.leaseStatus === 2 || scope.row.leaseStatus === 4"
|
|
@click="onRepublish(scope.row.id, false)"
|
|
>
|
|
重新发布
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
type="primary"
|
|
class="primary-lease"
|
|
v-if="
|
|
scope.row.leaseStatus === 2 || scope.row.leaseStatus === 0 || scope.row.leaseStatus === 4
|
|
"
|
|
@click="onRepublish(scope.row.id, true, scope.row.leaseStatus)"
|
|
>
|
|
编辑
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
type="primary"
|
|
class="primary-lease"
|
|
v-if="scope.row.leaseStatus === 3"
|
|
@click="onAuditing(scope.row.id, 1)"
|
|
>
|
|
通过
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
type="primary"
|
|
class="primary-lease"
|
|
v-if="scope.row.leaseStatus === 3"
|
|
@click="onAuditing(scope.row.id, 4)"
|
|
>
|
|
驳回
|
|
</el-button>
|
|
<el-popconfirm
|
|
width="220"
|
|
icon="el-icon-info"
|
|
icon-color="#626AEF"
|
|
title="确定删除该项需求吗？"
|
|
@confirm="onDelete(scope.row.id)"
|
|
v-if="scope.row.leaseStatus === 2 || scope.row.leaseStatus === 0"
|
|
>
|
|
<template slot="reference">
|
|
<el-button size="small" type="primary" class="primary-lease">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
<template slot="actions">
|
|
<el-button type="primary" class="primary-lease" size="small"
|
|
>取消
|
|
</el-button
|
|
>
|
|
<el-button
|
|
class="primary-lease"
|
|
type="primary"
|
|
size="small"
|
|
@click="confirmDelete"
|
|
>
|
|
确定
|
|
</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="pagination-wrapper">
|
|
<pagination
|
|
:total="total"
|
|
@pagination="getLeaseListData"
|
|
:page.sync="searchParams.pageNum"
|
|
:limit.sync="searchParams.pageSize"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
<!-- 新增修改对话框 -->
|
|
|
|
<el-dialog
|
|
width="60%"
|
|
align-center
|
|
@close="onClose"
|
|
destroy-on-close
|
|
:title="dialogTitle"
|
|
:visible.sync="addOrEditDialogVisible"
|
|
>
|
|
<el-form
|
|
label-width="auto"
|
|
label-position="right"
|
|
ref="addOrEditFormRef"
|
|
:model="addOrEditForm"
|
|
:rules="addOrEditFormRules"
|
|
>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item label="项目所在地" style="width: 100%" prop="provinceCode">
|
|
<el-row style="width: 100%">
|
|
<el-col :span="6">
|
|
<el-form-item>
|
|
<el-select
|
|
clearable
|
|
style="width: 95%"
|
|
placeholder="请选择项目所在省"
|
|
v-model="addOrEditForm.provinceCode"
|
|
@change="onProvinceChange"
|
|
>
|
|
<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"
|
|
>
|
|
<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"
|
|
>
|
|
<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" v-if="dialogTitle === '新增'">
|
|
<el-col :span="24">
|
|
<el-form-item label="是否短信通知" prop="isSms">
|
|
<el-radio-group v-model="addOrEditForm.isSms">
|
|
<el-radio label="0">是</el-radio>
|
|
<el-radio label="1">否</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="20" v-if="addOrEditForm.isSms == 0">
|
|
<el-col :span="12">
|
|
<el-form-item label="组织机构" prop="dept">
|
|
<el-cascader
|
|
clearable
|
|
:props="orgProps"
|
|
:options="orgList"
|
|
:show-all-levels="false"
|
|
placeholder="请选择组织机构"
|
|
v-model="addOrEditForm.deptIdList"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="角色" prop="roleId">
|
|
<el-select
|
|
clearable
|
|
style="width: 95%"
|
|
placeholder="请选择角色"
|
|
v-model="addOrEditForm.roleId"
|
|
>
|
|
<el-option
|
|
:key="item.roleId"
|
|
:value="item.roleId"
|
|
:label="item.roleName"
|
|
v-for="item in roleList"
|
|
/>
|
|
</el-select>
|
|
</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="'demandForm_' + index"
|
|
style="position: relative"
|
|
>
|
|
<div
|
|
style="
|
|
position: absolute;
|
|
left: -28px;
|
|
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="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="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="20">
|
|
<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-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>
|
|
<div slot="footer" 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>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getCompanyListApi,
|
|
getGoodsClassListApi,
|
|
getAreaApi,
|
|
getOrgApi,
|
|
getRoleApi,
|
|
addLeaseInfoApi,
|
|
getLeaseListApi,
|
|
maLeaseAuditApi,
|
|
editLeaseInfoApi,
|
|
deleteLeaseInfoApi,
|
|
getLeaseDetailsByIdApi
|
|
} from '@/api/sourcingNeed/index'
|
|
import {MessageBox, Message} from 'element-ui'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
total: 0,
|
|
endTime: [],
|
|
isSave: false,
|
|
releaseTime: [],
|
|
isRepublish: true,
|
|
areaList: [],
|
|
leaseList: [],
|
|
dialogTitle: '新增',
|
|
classOptions: [],
|
|
fileListTemp: [],
|
|
companyOptions: [],
|
|
searchFormRef: null,
|
|
addOrEditFormRef: null,
|
|
addOrEditDialogVisible: false,
|
|
addOrEditDemandFormList: [],
|
|
addOrEditDemandFormRefList: [],
|
|
areaProvinceList: [],
|
|
areaCityList: [],
|
|
areaCountyList: [],
|
|
uploadUrl: process.env.VUE_APP_API_URL + '/file/upload',
|
|
|
|
searchParams: {
|
|
leaseName: '',
|
|
leaseCode: '',
|
|
leaseStatus: '',
|
|
finishStartTime: '',
|
|
finishEndTime: '',
|
|
publishStartTime: '',
|
|
publishEndTime: '',
|
|
pageSize: 10,
|
|
pageNum: 1
|
|
},
|
|
addOrEditForm: {
|
|
leaseName: '',
|
|
companyId: '',
|
|
person: '',
|
|
personPhone: '',
|
|
leaseStartTime: '',
|
|
leaseEndTime: '',
|
|
endTime: '',
|
|
description: '',
|
|
isSubmit: '',
|
|
fileInfoList: [],
|
|
fileInfoTempList: [],
|
|
areaCode: '',
|
|
cityCode: '',
|
|
provinceCode: '',
|
|
address: '',
|
|
detailsList: [],
|
|
isSms: '1',
|
|
roleId: '',
|
|
deptId: '',
|
|
deptIdList: ''
|
|
},
|
|
addOrEditFormTemp: {
|
|
leaseName: '',
|
|
companyId: '',
|
|
person: '',
|
|
personPhone: '',
|
|
leaseStartTime: '',
|
|
leaseEndTime: '',
|
|
endTime: '',
|
|
description: '',
|
|
isSubmit: '',
|
|
fileInfoList: [],
|
|
fileInfoTempList: [],
|
|
areaCode: '',
|
|
cityCode: '',
|
|
provinceCode: '',
|
|
address: '',
|
|
detailsList: [],
|
|
isMessage: 0,
|
|
roleId: '',
|
|
deptId: '',
|
|
isSms: '1',
|
|
deptIdList: []
|
|
},
|
|
orgList: [],
|
|
roleList: [],
|
|
orgProps: {
|
|
value: 'id'
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
minLimit() {
|
|
return this.addOrEditForm.fileInfoList.length
|
|
}
|
|
},
|
|
methods: {
|
|
// 跳转到详情页
|
|
handleToDetails(id) {
|
|
this.$router.push({name: 'demand-details', query: {id}})
|
|
},
|
|
|
|
// 验证结束时间
|
|
checkEndTime(rule, value, callback) {
|
|
if (!value) {
|
|
return callback(new Error('请选择租赁结束日期'))
|
|
}
|
|
const startTime = this.addOrEditForm.leaseStartTime
|
|
if (startTime && new Date(value) <= new Date(startTime)) {
|
|
return callback(new Error('租赁结束日期必须大于租赁开始日期'))
|
|
}
|
|
callback()
|
|
},
|
|
|
|
// 验证开始时间
|
|
checkStartTime(rule, value, callback) {
|
|
if (!value) {
|
|
return callback(new Error('请选择租赁开始日期'))
|
|
}
|
|
const endTime = this.addOrEditForm.leaseEndTime
|
|
if (endTime && new Date(value) >= new Date(endTime)) {
|
|
return callback(new Error('租赁开始日期必须小于租赁结束日期'))
|
|
}
|
|
callback()
|
|
},
|
|
|
|
// 禁用今天之前的日期
|
|
disabledDate(date) {
|
|
const today = new Date()
|
|
return date.getTime() < today.getTime()
|
|
},
|
|
|
|
// 禁用租赁结束日期
|
|
disabledLeaseEndTime(date) {
|
|
const today = new Date()
|
|
return date.getTime() < today.getTime()
|
|
},
|
|
|
|
// 获取分类和公司数据
|
|
async getClassAndCompanyData() {
|
|
const classResult = await getGoodsClassListApi()
|
|
const companyResult = await getCompanyListApi()
|
|
|
|
// 只需要前3个层级
|
|
const filterData = (data, level = 1) => {
|
|
return data.map(item => {
|
|
if (level < 3 && item.children) {
|
|
item.children = filterData(item.children, level + 1)
|
|
} else {
|
|
item.children = []
|
|
}
|
|
return item
|
|
})
|
|
}
|
|
|
|
this.classOptions = filterData(classResult.data)
|
|
this.companyOptions = companyResult.data
|
|
},
|
|
|
|
// 获取列表数据
|
|
async getLeaseListData() {
|
|
if (this.endTime.length > 0) {
|
|
this.searchParams.finishStartTime = this.endTime[0]
|
|
this.searchParams.finishEndTime = this.endTime[1]
|
|
}
|
|
if (this.releaseTime.length > 0) {
|
|
this.searchParams.publishStartTime = this.releaseTime[0]
|
|
this.searchParams.publishEndTime = this.releaseTime[1]
|
|
}
|
|
|
|
const res = await getLeaseListApi(this.searchParams)
|
|
this.leaseList = res.rows
|
|
this.total = res.total
|
|
},
|
|
|
|
// 获取地区数据
|
|
async getAreaData() {
|
|
const res = await getAreaApi(0)
|
|
this.areaList = res.data
|
|
},
|
|
|
|
// 重置表单
|
|
onReset() {
|
|
this.endTime = []
|
|
this.releaseTime = []
|
|
this.searchParams.finishStartTime = ''
|
|
this.searchParams.finishEndTime = ''
|
|
this.searchParams.publishStartTime = ''
|
|
this.searchParams.publishEndTime = ''
|
|
this.searchParams.pageNum = 1
|
|
this.searchParams.pageSize = 10
|
|
this.$refs.searchFormRef.resetFields()
|
|
this.getLeaseListData()
|
|
},
|
|
|
|
// 删除需求
|
|
async onDelete(id) {
|
|
const res = await deleteLeaseInfoApi({id})
|
|
if (res.code === 200) {
|
|
Message({
|
|
type: 'success',
|
|
message: '删除成功'
|
|
})
|
|
this.getLeaseListData()
|
|
}
|
|
},
|
|
|
|
// 确认删除
|
|
confirmDelete() {
|
|
// 由el-popconfirm自动处理
|
|
},
|
|
|
|
// 重新发布
|
|
async onRepublish(id, type, leaseStatus) {
|
|
this.dialogTitle = '编辑'
|
|
this.isRepublish = false
|
|
this.isSave = type
|
|
if (leaseStatus === 0) this.isSave = false
|
|
|
|
const res = await getLeaseDetailsByIdApi({id})
|
|
const {
|
|
leaseName,
|
|
companyId,
|
|
person,
|
|
personPhone,
|
|
endTime,
|
|
description,
|
|
fileInfoList,
|
|
areaCode,
|
|
address,
|
|
cityCode,
|
|
provinceCode,
|
|
detailsList,
|
|
leaseStartTime,
|
|
leaseEndTime
|
|
} = res.data
|
|
|
|
Object.assign(this.addOrEditForm, {
|
|
leaseName,
|
|
companyId,
|
|
person,
|
|
personPhone,
|
|
endTime,
|
|
description,
|
|
id,
|
|
fileInfoList: fileInfoList ? fileInfoList : [],
|
|
areaCode,
|
|
address,
|
|
cityCode,
|
|
provinceCode,
|
|
detailsList,
|
|
leaseStartTime,
|
|
leaseEndTime
|
|
})
|
|
|
|
detailsList.forEach(e => {
|
|
if (!e.fileInfoList) {
|
|
e.fileInfoList = []
|
|
}
|
|
e.fileInfoTempList = []
|
|
e.typeIds = e.typeIds.map(j => {
|
|
return j * 1
|
|
})
|
|
})
|
|
|
|
await Promise.all([
|
|
this.onProvinceChange(provinceCode),
|
|
this.onCityChange(cityCode)
|
|
])
|
|
|
|
this.addOrEditDialogVisible = true
|
|
},
|
|
|
|
// 提交表单
|
|
async onSubmit(type) {
|
|
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
|
if (valid) {
|
|
this.addOrEditForm.isSubmit = type
|
|
this.addOrEditForm.fileInfoList.push(...this.fileListTemp)
|
|
|
|
let isDemand = false
|
|
for (let index = 0; index < this.addOrEditForm.detailsList.length; index++) {
|
|
try {
|
|
const valid = await new Promise((resolve) => {
|
|
this.$refs[`demandForm_${index}`].validate(valid => {
|
|
resolve(valid)
|
|
})
|
|
})
|
|
|
|
if (!valid) {
|
|
isDemand = true
|
|
throw new Error('表单校验失败')
|
|
}
|
|
} catch (error) {
|
|
}
|
|
}
|
|
|
|
if (isDemand) return
|
|
|
|
this.addOrEditForm.fileInfoList = [
|
|
...this.addOrEditForm.fileInfoList,
|
|
...this.addOrEditForm.fileInfoTempList
|
|
]
|
|
|
|
this.addOrEditForm.detailsList.forEach(e => {
|
|
e.fileInfoList = [...e.fileInfoList, ...e.fileInfoTempList]
|
|
e.typeId = e.typeIds[e.typeIds.length - 1]
|
|
})
|
|
|
|
this.addOrEditForm.endTime = this.addOrEditForm.endTime.replace(
|
|
'00:00:00',
|
|
'23:59:59'
|
|
)
|
|
this.addOrEditForm.leaseEndTime = this.addOrEditForm.leaseEndTime.replace(
|
|
'00:00:00',
|
|
'23:59:59'
|
|
)
|
|
|
|
if (this.addOrEditForm.deptIdList && this.addOrEditForm.deptIdList.length > 0) {
|
|
this.addOrEditForm.deptId =
|
|
this.addOrEditForm.deptIdList[this.addOrEditForm.deptIdList.length - 1]
|
|
}
|
|
|
|
const SUBMIT_API = this.isRepublish ? addLeaseInfoApi : editLeaseInfoApi
|
|
const res = await SUBMIT_API(this.addOrEditForm)
|
|
|
|
if (res.code === 200) {
|
|
Message({
|
|
type: 'success',
|
|
message: '提交成功'
|
|
})
|
|
|
|
this.addOrEditDialogVisible = false
|
|
this.getLeaseListData()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 文件变化处理
|
|
onFileChange(fileList) {
|
|
this.addOrEditForm.fileInfoTempList = []
|
|
const fileListTemp = fileList.map(e => {
|
|
return {
|
|
fileName: e.name,
|
|
fileUrl: e.url
|
|
}
|
|
})
|
|
|
|
this.addOrEditForm.fileInfoTempList.push(...fileListTemp)
|
|
},
|
|
|
|
// 详情中的文件变化
|
|
onFileChangeInDetails(fileList, index) {
|
|
this.addOrEditForm.detailsList[index].fileInfoTempList = []
|
|
const fileListTemp = fileList.map(e => {
|
|
return {
|
|
fileName: e.name,
|
|
fileUrl: e.url
|
|
}
|
|
})
|
|
this.addOrEditForm.detailsList[index].fileInfoTempList.push(...fileListTemp)
|
|
},
|
|
|
|
// 取消按钮
|
|
onCancel() {
|
|
this.addOrEditDialogVisible = false
|
|
},
|
|
|
|
// 关闭对话框
|
|
onClose() {
|
|
this.addOrEditDemandFormList = []
|
|
this.$refs.addOrEditFormRef.resetFields()
|
|
this.addOrEditForm = JSON.parse(JSON.stringify(this.addOrEditFormTemp))
|
|
this.fileListTemp = []
|
|
},
|
|
|
|
// 删除图片
|
|
onDeleteImg(index) {
|
|
this.addOrEditForm.fileInfoList.splice(index, 1)
|
|
},
|
|
|
|
// 删除详情中的图片
|
|
onDeleteImgInDetails(index, j) {
|
|
this.addOrEditForm.detailsList[index].fileInfoList.splice(j, 1)
|
|
},
|
|
|
|
// 分类变化
|
|
onChangeClass(val) {
|
|
console.log(val, '***')
|
|
},
|
|
|
|
// 添加需求信息
|
|
onAddDemandInfo() {
|
|
const newId = Date.now()
|
|
this.addOrEditForm.detailsList.push({
|
|
newId,
|
|
typeIds: [],
|
|
typeId: '',
|
|
leaseNum: 1,
|
|
fileInfoList: [],
|
|
fileInfoTempList: [],
|
|
description: ''
|
|
})
|
|
},
|
|
|
|
// 删除需求项
|
|
onDeleteDemand(index) {
|
|
this.addOrEditForm.detailsList.splice(index, 1)
|
|
// 重新命名表单引用
|
|
this.$nextTick(() => {
|
|
this.addOrEditDemandFormRefList.forEach((e, i) => {
|
|
if (i > index && e) e.clearValidate()
|
|
})
|
|
})
|
|
},
|
|
|
|
// 省份变化
|
|
async onProvinceChange(id) {
|
|
const res = await getAreaApi(id)
|
|
this.areaCityList = res.data
|
|
},
|
|
|
|
// 城市变化
|
|
async onCityChange(id) {
|
|
const res = await getAreaApi(id)
|
|
this.areaCountyList = res.data
|
|
},
|
|
|
|
// 区县变化
|
|
async onCountyChange(id) {
|
|
},
|
|
|
|
// 审核处理
|
|
onAuditing(id, leaseStatus) {
|
|
MessageBox.confirm(`是否${leaseStatus === 1 ? '通过' : '驳回'}此次接单申请?`, '温馨提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'success'
|
|
})
|
|
.then(async () => {
|
|
const res = await maLeaseAuditApi({
|
|
id,
|
|
leaseStatus
|
|
})
|
|
if (res.code == 200) {
|
|
Message({
|
|
type: 'success',
|
|
message: '提交成功'
|
|
})
|
|
// 刷新列表
|
|
this.getLeaseListData()
|
|
}
|
|
})
|
|
.catch(() => {
|
|
})
|
|
},
|
|
|
|
// 获取组织机构和角色列表
|
|
async getDeptAndRolesList() {
|
|
const res = await getOrgApi()
|
|
const result = await getRoleApi({pageNum: 1, pageSize: 100})
|
|
|
|
this.orgList = res.data
|
|
this.roleList = result.rows
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getClassAndCompanyData()
|
|
this.getLeaseListData()
|
|
this.getAreaData()
|
|
this.getDeptAndRolesList()
|
|
},
|
|
created() {
|
|
// 表单验证规则
|
|
this.addOrEditFormRules = {
|
|
person: [{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: this.checkStartTime, trigger: 'blur'}
|
|
],
|
|
leaseEndTime: [
|
|
{required: true, message: '请选择需租赁结束日期', trigger: 'change'},
|
|
{validator: this.checkEndTime, trigger: 'blur'}
|
|
],
|
|
detailsList: [{required: true, message: '请添加需求装备信息', trigger: 'change'}],
|
|
personPhone: [
|
|
{required: true, message: '请输入联系电话', trigger: 'blur'},
|
|
{
|
|
pattern: /^1[3456789]\d{9}$/,
|
|
message: '请输入正确的联系电话',
|
|
trigger: 'blur'
|
|
}
|
|
],
|
|
isSms: [{required: true, message: '请选择是否短信通知', trigger: 'change'}]
|
|
}
|
|
|
|
this.addOrEditDemandFormRules = {
|
|
typeIds: [{required: true, message: '请选择装备类目', trigger: 'change'}],
|
|
leaseNum: [{required: true, message: '请输入预估数量', trigger: 'blur'}]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .upload-tip .el-form-item__label {
|
|
color: transparent;
|
|
}
|
|
|
|
.el-pagination {
|
|
justify-content: flex-end;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
::v-deep .el-pagination.is-background .el-pager li.is-active {
|
|
background-color: #3cb4a6;
|
|
}
|
|
|
|
::v-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 {
|
|
::v-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;
|
|
padding: 20px 40px;
|
|
}
|
|
|
|
.dialog-content {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
padding: 0;
|
|
|
|
::v-deep .el-card__body {
|
|
padding: 20px !important;
|
|
}
|
|
}
|
|
|
|
.el-form-item--small.el-form-item {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.content-box {
|
|
border-radius: 8px;
|
|
height: calc(100vh - 210px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
::v-deep .el-card__body {
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
height: 100% !important;
|
|
padding: 20px;
|
|
}
|
|
|
|
.el-row:first-child {
|
|
margin-bottom: 16px;
|
|
flex-shrink: 0;
|
|
|
|
.el-col {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
|
|
.table-container {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
margin-bottom: 0;
|
|
min-height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pagination-wrapper {
|
|
flex-shrink: 0;
|
|
padding-top: 6px;
|
|
margin-top: auto;
|
|
|
|
::v-deep .pagination-container {
|
|
padding: 0px 20px !important;
|
|
/* margin-bottom: 30px; */
|
|
}
|
|
}
|
|
|
|
::v-deep .el-table {
|
|
// 启用斑马纹
|
|
&.el-table--striped .el-table__body {
|
|
tr.el-table__row--striped td {
|
|
background-color: #F6FBFA !important; // 浅紫色
|
|
}
|
|
}
|
|
|
|
.el-table__header {
|
|
background: #E9F0EE;
|
|
|
|
th {
|
|
background: #E9F0EE !important;
|
|
color: #606266;
|
|
font-weight: 600;
|
|
height: 50px;
|
|
}
|
|
}
|
|
|
|
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
|
|
background-color: #CCF1E9 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dialog-table {
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
::v-deep .el-table {
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
|
|
// 启用斑马纹
|
|
&.el-table--striped .el-table__body {
|
|
tr.el-table__row--striped td {
|
|
background-color: #F6FBFA !important;
|
|
}
|
|
}
|
|
|
|
.el-table__header {
|
|
background: #E9F0EE;
|
|
|
|
th {
|
|
background: #E9F0EE !important;
|
|
color: #606266;
|
|
font-weight: 600;
|
|
height: 45px;
|
|
font-size: 14px;
|
|
border-bottom: 2px solid #e4e7ed;
|
|
}
|
|
}
|
|
|
|
.el-table__body {
|
|
tr {
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
td {
|
|
padding: 12px 8px;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid #f0f2f5;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.el-table--striped .el-table__body tr.el-table__row:hover > td.el-table__cell {
|
|
background-color: #CCF1E9 !important;
|
|
}
|
|
|
|
// 表格边框优化
|
|
&::before {
|
|
display: none;
|
|
}
|
|
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|