1460 lines
53 KiB
Vue
1460 lines
53 KiB
Vue
div
|
||
<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="orderTime" label="下单时间" />
|
||
<el-table-column align="center" prop="orderStatusName" label="订单状态" />
|
||
<el-table-column align="center" prop="orderStatusName" label="是否改价 ">
|
||
<template #default="{ row }">
|
||
{{ row.isChangePrice == 0 ? '否' : '是' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="rentPrice" label="租赁金额" />
|
||
<el-table-column align="center" prop="totalCost" label="总金额" />
|
||
<el-table-column align="center" label="操作" :width="220">
|
||
<template #default="{ row }">
|
||
<!-- <el-button
|
||
size="small"
|
||
type="primary"
|
||
class="primary-lease"
|
||
v-if="row.isLeaseContent === 0"
|
||
@click="onRepublish(1, row.orderId)"
|
||
>
|
||
退租检修
|
||
</el-button> -->
|
||
<el-button
|
||
size="small"
|
||
class="primary-lease"
|
||
type="primary"
|
||
@click="onRepublish(row.orderStatus, row.orderId, row.isChangePrice)"
|
||
>
|
||
{{ row.orderStatus == 7 || row.isChangePrice == 1 ? '费用详情' : '费用结算' }}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<PagingComponent
|
||
@getListChange="getLeaseListData"
|
||
:pageSize="searchParams.pageSize"
|
||
:pageNumber="searchParams.pageNum"
|
||
:size="searchParams.pageSize"
|
||
:page="searchParams.pageNum"
|
||
:total="total"
|
||
/>
|
||
|
||
<!-- 新增修改对话框 -->
|
||
<el-dialog
|
||
:title="dialogTitle"
|
||
width="70%"
|
||
align-center
|
||
destroy-on-close
|
||
v-model="addOrEditDialogVisible"
|
||
@close="onClose"
|
||
>
|
||
<template v-if="dialogTitle === '退租检测'">
|
||
<el-row
|
||
style="
|
||
display: flex;
|
||
justify-content: space-between;
|
||
letter-spacing: 1px;
|
||
padding: 0 10px 20px;
|
||
"
|
||
>
|
||
<div>
|
||
<span>订单编号：</span>
|
||
<span>{{ orderDetails.code }}</span>
|
||
</div>
|
||
<div>
|
||
<span>装备套数：</span>
|
||
<span>
|
||
{{ orderDetails.maNumber }}
|
||
</span>
|
||
</div>
|
||
<div>
|
||
<span>退租时间：</span>
|
||
<span>
|
||
{{ orderDetails.rentEndTime }}
|
||
</span>
|
||
</div>
|
||
</el-row>
|
||
|
||
<TitleTip :titleText="`维修费用`" />
|
||
<el-form
|
||
v-for="(item, index) in repairFormList"
|
||
:key="item.newId"
|
||
: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="maId">
|
||
<el-select
|
||
clearable
|
||
style="width: 100%"
|
||
placeholder="请选择关联装备"
|
||
v-model="item.maId"
|
||
@change="onChangeRepair($event, index)"
|
||
>
|
||
<el-option
|
||
:key="item.device"
|
||
:value="item.maId"
|
||
:label="item.deviceName"
|
||
v-for="item in repairSelect"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="维修数量" prop="repairNum">
|
||
<!-- <el-input v-model="item.device_num" placeholder="请输入需求名称" /> -->
|
||
<el-input-number
|
||
clearable
|
||
:min="1"
|
||
:max="9999"
|
||
style="width: 100%"
|
||
v-model="item.repairNum"
|
||
placeholder="请输入维修数量"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="维修费用" prop="repairPrice">
|
||
<el-input
|
||
inputmode="numeric"
|
||
v-model="item.repairPrice"
|
||
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>
|
||
<el-col :span="20">
|
||
<el-form-item label="附件上传" prop="fileInfoList">
|
||
<UploadComponentNew
|
||
:maxSize="2"
|
||
:max-limit="4"
|
||
width="100px"
|
||
height="100px"
|
||
:multiple="true"
|
||
:autoUpload="true"
|
||
:currentIndex="index"
|
||
:actionUrl="uploadUrl"
|
||
listType="picture-card"
|
||
:minLimit="0"
|
||
:acceptTypeList="['.jpg', '.png']"
|
||
@onFileChange="onRepairFileChange"
|
||
>
|
||
<template v-slot:default>
|
||
<el-icon size="48" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</UploadComponentNew>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button
|
||
size="small"
|
||
type="danger"
|
||
class="primary-lease"
|
||
@click="onDeleteRepair(index)"
|
||
>
|
||
移除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item>
|
||
<el-button
|
||
type="primary"
|
||
class="primary-lease"
|
||
icon="Plus"
|
||
@click="onAddRepair"
|
||
>
|
||
增加维修设备
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="line"></div>
|
||
|
||
<TitleTip :titleText="`报废费用`" />
|
||
<el-form
|
||
:model="item"
|
||
:key="item.newId"
|
||
v-for="(item, index) in scrapFormList"
|
||
:rules="scrapFormRules"
|
||
:ref="
|
||
($event:any) => {
|
||
scrapFormRefList[index] = $event
|
||
}
|
||
"
|
||
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="maId">
|
||
<el-select
|
||
clearable
|
||
style="width: 100%"
|
||
v-model="item.maId"
|
||
placeholder="请选择关联装备"
|
||
@change="onChangeScrap($event, index)"
|
||
>
|
||
<el-option
|
||
:key="item.device"
|
||
:value="item.maId"
|
||
:label="item.deviceName"
|
||
v-for="item in scrapSelect"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="报废数量" prop="scrapNum">
|
||
<el-input-number
|
||
clearable
|
||
:min="1"
|
||
:max="9999"
|
||
style="width: 100%"
|
||
v-model="item.scrapNum"
|
||
placeholder="请输入报废数量"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="报废费用" prop="scrapPrice">
|
||
<el-input
|
||
inputmode="numeric"
|
||
v-model="item.scrapPrice"
|
||
placeholder="请输入报废费用"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="报废原因" prop="scrapReason">
|
||
<el-input v-model="item.scrapReason" 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>
|
||
<el-col :span="20">
|
||
<el-form-item label="附件上传" prop="fileInfoList">
|
||
<UploadComponentNew
|
||
:maxSize="2"
|
||
:max-limit="4"
|
||
width="100px"
|
||
height="100px"
|
||
:multiple="true"
|
||
:autoUpload="true"
|
||
:currentIndex="index"
|
||
:actionUrl="uploadUrl"
|
||
listType="picture-card"
|
||
:minLimit="0"
|
||
:acceptTypeList="['.jpg', '.png']"
|
||
@onFileChange="onScrapFileChange"
|
||
>
|
||
<template v-slot:default>
|
||
<el-icon size="48" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</UploadComponentNew>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button
|
||
type="danger"
|
||
size="small"
|
||
class="primary-lease"
|
||
@click="onDeleteScrap(index)"
|
||
>
|
||
移除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item>
|
||
<el-button
|
||
type="primary"
|
||
class="primary-lease"
|
||
:icon="Plus"
|
||
@click="onAddScrap"
|
||
>
|
||
增加报废设备
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<div class="line"></div>
|
||
<TitleTip :titleText="`丢失费用`" />
|
||
<el-form
|
||
v-for="(item, index) in lossFormList"
|
||
:key="item.newId"
|
||
:model="item"
|
||
:rules="lossFormRules"
|
||
:ref="
|
||
($event:any) => {
|
||
lossFormRefList[index] = $event
|
||
}
|
||
"
|
||
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="maId">
|
||
<el-select
|
||
clearable
|
||
style="width: 100%"
|
||
placeholder="请选择关联装备"
|
||
v-model="item.maId"
|
||
@change="onChangeLoss($event, index)"
|
||
>
|
||
<el-option
|
||
v-for="item in lossSelect"
|
||
:key="item.device"
|
||
:label="item.deviceName"
|
||
:value="item.maId"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="丢失数量" prop="lossNum">
|
||
<el-input-number
|
||
clearable
|
||
:min="1"
|
||
:max="9999"
|
||
style="width: 100%"
|
||
v-model="item.lossNum"
|
||
placeholder="请输入丢失数量"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<el-form-item label="丢失费用" prop="lossPrice">
|
||
<el-input
|
||
v-model="item.lossPrice"
|
||
placeholder="请输入需求名称"
|
||
inputmode="numeric"
|
||
/>
|
||
</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>
|
||
<el-col :span="20">
|
||
<el-form-item label="附件上传" prop="fileInfoList">
|
||
<UploadComponentNew
|
||
:maxSize="2"
|
||
:max-limit="4"
|
||
:currentIndex="index"
|
||
width="100px"
|
||
height="100px"
|
||
:autoUpload="true"
|
||
:multiple="true"
|
||
:minLimit="0"
|
||
listType="picture-card"
|
||
:acceptTypeList="['.jpg', '.png']"
|
||
:actionUrl="uploadUrl"
|
||
@onFileChange="onLossFileChange"
|
||
>
|
||
<template v-slot:default>
|
||
<el-icon size="48" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</UploadComponentNew>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-button
|
||
type="danger"
|
||
size="small"
|
||
class="primary-lease"
|
||
@click="onDeleteLoss(index)"
|
||
>
|
||
移除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-form-item>
|
||
<el-button
|
||
type="primary"
|
||
class="primary-lease"
|
||
icon="Plus"
|
||
@click="onAddLoss"
|
||
>
|
||
增加丢失设备
|
||
</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>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<el-row
|
||
style="
|
||
display: flex;
|
||
justify-content: space-between;
|
||
letter-spacing: 1px;
|
||
padding: 0 10px 20px;
|
||
"
|
||
>
|
||
<div style="flex: 1">
|
||
<span>订单编号：</span>
|
||
<span>{{ overhaulDetails.code }}</span>
|
||
</div>
|
||
<div style="flex: 1">
|
||
<span>装备套数：</span>
|
||
<span>{{ overhaulDetails.maNumber }}</span>
|
||
</div>
|
||
<div style="flex: 1">
|
||
<span>退租时间：</span>
|
||
<span>{{ overhaulDetails.rentEndTime }}</span>
|
||
</div>
|
||
</el-row>
|
||
<el-row
|
||
style="
|
||
display: flex;
|
||
letter-spacing: 1px;
|
||
justify-content: space-between;
|
||
padding: 0 10px 20px;
|
||
"
|
||
>
|
||
<div style="flex: 1">
|
||
<span>结算单位：</span>
|
||
<span>{{ overhaulDetails.leaseCompany }}</span>
|
||
</div>
|
||
<div style="flex: 1">
|
||
<span>租赁天数：</span>
|
||
<span>{{ overhaulDetails.rentDay }}</span>
|
||
</div>
|
||
<div style="flex: 1; color: transparent">
|
||
<span>租赁天数：</span>
|
||
<span>999</span>
|
||
</div>
|
||
</el-row>
|
||
|
||
<div style="padding: 6px 0 0 0; font-size: 18px; font-weight: bold; color: #eb190a">
|
||
总费用(元)： <span>{{ overhaulDetails.totalCost }}</span>
|
||
</div>
|
||
<TitleTip :titleText="`租赁费用明细`" />
|
||
<el-table
|
||
:data="orderDetailDtoList"
|
||
border
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
background: '#00a288',
|
||
color: '#fff',
|
||
}"
|
||
>
|
||
<el-table-column prop="deviceName" align="center" label="装备名称" />
|
||
<el-table-column prop="typeName" align="center" label="型号" />
|
||
<el-table-column prop="num" align="center" label="数量" />
|
||
<el-table-column align="center" label="租赁单价(元/天)">
|
||
<template #default="{ row }">
|
||
<span style="color: #eb190a">
|
||
{{ row.dayLeasePrice }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="days" align="center" label="租赁天数" />
|
||
<el-table-column prop="days" align="center" label="租期">
|
||
<template #default="{ row }">
|
||
{{ `${row.rentBeginTime}至${row.rentEndTime} ` }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="costs" align="center" label="租赁费用(元)" width="160">
|
||
<template #default="{ row }">
|
||
<template v-if="row.isCheck == 0">
|
||
{{ row.costs }}
|
||
</template>
|
||
<template v-else>
|
||
<el-input
|
||
v-model="row.costs"
|
||
style="width: 100%"
|
||
placeholder="请输入改价费用"
|
||
clearable
|
||
/>
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="changeCost" align="center" label="改价后费用(元)" />
|
||
<el-table-column
|
||
align="center"
|
||
label="操作"
|
||
width="160"
|
||
v-if="dialogTitle === '费用结算'"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
@click="
|
||
() => {
|
||
row.isCheck == 0 ? (row.isCheck = 1) : (row.isCheck = 0)
|
||
}
|
||
"
|
||
>
|
||
{{ row.isCheck == 0 ? '改价' : '取消改价' }}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<TitleTip :titleText="`维修费用明细`" />
|
||
<el-table
|
||
:data="repairRecordList"
|
||
border
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
background: '#00a288',
|
||
color: '#fff',
|
||
}"
|
||
>
|
||
<el-table-column prop="deviceName" align="center" label="装备名称" />
|
||
<el-table-column prop="typeName" align="center" label="型号" />
|
||
<el-table-column prop="repairNum" align="center" label="维修数量" />
|
||
<el-table-column align="center" label="维修费用(元)">
|
||
<template #default="{ row }">
|
||
<template v-if="row.isCheck == 0">
|
||
{{ row.repairPrice }}
|
||
</template>
|
||
<template v-else>
|
||
<el-input
|
||
v-model="row.repairPrice"
|
||
style="width: 100%"
|
||
placeholder="请输入改价费用"
|
||
clearable
|
||
/>
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="repairChangePrice" align="center" label="改价后费用(元)" />
|
||
<el-table-column align="center" label="附件" width="160">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" size="small" @click="onViewFileImg(row, 0)"
|
||
>查看</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="操作"
|
||
width="160"
|
||
v-if="dialogTitle === '费用结算'"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
@click="
|
||
() => {
|
||
row.isCheck == 0 ? (row.isCheck = 1) : (row.isCheck = 0)
|
||
}
|
||
"
|
||
>
|
||
{{ row.isCheck == 0 ? '改价' : '取消改价' }}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<TitleTip :titleText="`报废费用明细`" />
|
||
<el-table
|
||
:data="scrapRecordList"
|
||
border
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
background: '#00a288',
|
||
color: '#fff',
|
||
}"
|
||
>
|
||
<el-table-column prop="deviceName" align="center" label="装备名称" />
|
||
<el-table-column prop="typeName" align="center" label="型号" />
|
||
<el-table-column prop="scrapNum" align="center" label="报废数量" />
|
||
<el-table-column prop="scrapReason" align="center" label="报废原因" />
|
||
<el-table-column prop="scrapPrice" align="center" label="报废费用(元)">
|
||
<template #default="{ row }">
|
||
<template v-if="row.isCheck == 0">
|
||
{{ row.scrapPrice }}
|
||
</template>
|
||
<template v-else>
|
||
<el-input
|
||
v-model="row.scrapPrice"
|
||
style="width: 100%"
|
||
placeholder="请输入改价费用"
|
||
clearable
|
||
/>
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="scrapChangePrice" align="center" label="改价后费用(元)" />
|
||
<el-table-column align="center" label="附件" width="160">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" size="small" @click="onViewFileImg(row, 1)"
|
||
>查看</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="操作"
|
||
width="160"
|
||
v-if="dialogTitle === '费用结算'"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
@click="
|
||
() => {
|
||
row.isCheck == 0 ? (row.isCheck = 1) : (row.isCheck = 0)
|
||
}
|
||
"
|
||
>
|
||
{{ row.isCheck == 0 ? '改价' : '取消改价' }}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<TitleTip :titleText="`丢失费用明细`" />
|
||
<el-table
|
||
:data="lossRecordList"
|
||
border
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
background: '#00a288',
|
||
color: '#fff',
|
||
}"
|
||
>
|
||
<el-table-column prop="deviceName" align="center" label="装备名称" />
|
||
<el-table-column prop="typeName" align="center" label="型号" />
|
||
<el-table-column prop="lossNum" align="center" label="丢失数量" />
|
||
<el-table-column prop="lossPrice" align="center" label="丢失费用(元)">
|
||
<template #default="{ row }">
|
||
<template v-if="row.isCheck == 0">
|
||
{{ row.lossPrice }}
|
||
</template>
|
||
<template v-else>
|
||
<el-input
|
||
v-model="row.lossPrice"
|
||
style="width: 100%"
|
||
placeholder="请输入改价费用"
|
||
clearable
|
||
/>
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="lossChangePrice" align="center" label="改价后费用(元)" />
|
||
<el-table-column align="center" label="附件" width="160">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" size="small" @click="onViewFileImg(row, 2)"
|
||
>查看</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="操作"
|
||
width="160"
|
||
v-if="dialogTitle === '费用结算'"
|
||
>
|
||
<template #default="{ row }">
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
@click="
|
||
() => {
|
||
row.isCheck == 0 ? (row.isCheck = 1) : (row.isCheck = 0)
|
||
}
|
||
"
|
||
>
|
||
{{ row.isCheck == 0 ? '改价' : '取消改价' }}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div style="text-align: right; margin-top: 20px" v-if="dialogTitle === '费用结算'">
|
||
<el-button type="primary" class="primary-lease" @click="onCancel">取消</el-button>
|
||
<el-button type="primary" class="primary-lease" @click="onSubmitChangePrice()"
|
||
>确认改价</el-button
|
||
>
|
||
</div>
|
||
</template>
|
||
|
||
<el-dialog v-model="innerVisible" width="500" title="附件详情" append-to-body>
|
||
<el-table
|
||
:data="viewFileInfoList"
|
||
border
|
||
show-overflow-tooltip
|
||
:header-cell-style="{
|
||
background: '#00a288',
|
||
color: '#fff',
|
||
}"
|
||
>
|
||
<el-table-column prop="fileName" align="center" label="文件名称" />
|
||
<el-table-column align="center" label="操作" width="120">
|
||
<template #default="{ row }">
|
||
<el-image
|
||
style="width: 60px; height: 60px"
|
||
:src="row.fileUrl"
|
||
:zoom-rate="1.2"
|
||
:max-scale="7"
|
||
:min-scale="0.2"
|
||
:preview-src-list="[row.fileUrl]"
|
||
:initial-index="0"
|
||
fit="cover"
|
||
z-index="9999999999"
|
||
:preview-teleported="true"
|
||
/>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import UploadComponentNew from 'components/uploadComponentNew/index.vue'
|
||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||
import TitleTip from 'components/TitleTip/index.vue'
|
||
import {
|
||
getRentTerminationListApi,
|
||
setAddLeaseRepairApi,
|
||
getOverhaulApi,
|
||
setChangePriceApi,
|
||
} from 'http/api/rent-termination/index'
|
||
|
||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||
import { Plus } from '@element-plus/icons-vue'
|
||
const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
|
||
const addOrEditDialogVisible = ref(false)
|
||
const leaseList = ref<any>([])
|
||
const total = ref(0)
|
||
const endTime = ref([])
|
||
const releaseTime = ref([])
|
||
const dialogTitle = ref('退租检测')
|
||
const fileListTemp = ref<any>([])
|
||
const repairFormRefList = ref<any>([])
|
||
const lossFormRefList = ref<any>([])
|
||
const scrapFormRefList = ref<any>([])
|
||
const orderDetails = ref<any>({})
|
||
const repairSelect = ref<any>([])
|
||
const lossSelect = ref<any>([])
|
||
const scrapSelect = ref<any>([])
|
||
const repairRecordList = ref([])
|
||
const orderDetailDtoList = ref([])
|
||
const scrapRecordList = ref([])
|
||
const lossRecordList = ref([])
|
||
const viewFileInfoList = ref<any>([])
|
||
const fileListAll = ref<any>([])
|
||
const overhaulDetails = ref<any>({})
|
||
const innerVisible = ref(false)
|
||
const currentOrderId = ref<any>('')
|
||
const props2 = {
|
||
multiple: true,
|
||
checkStrictly: true,
|
||
}
|
||
// 维修表单
|
||
const repairFormList: any = ref([])
|
||
const lossFormList: any = ref([])
|
||
const scrapFormList: any = ref([])
|
||
|
||
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 repairFormRules = reactive({
|
||
maId: [{ required: true, message: '请选择关联装备', trigger: 'change' }],
|
||
repairNum: [{ required: true, message: '请输入维修数量', trigger: 'blur' }],
|
||
fileInfoList: [{ required: true, message: '请上传附件', trigger: 'blur' }],
|
||
repairPrice: [
|
||
{ required: true, message: '请输入维修费用', trigger: 'blur' },
|
||
{
|
||
pattern: /^(0(\.\d{0,2})?|([1-9]\d*)(\.\d{0,2})?)$/,
|
||
message: '请输入正确的费用金额，最多两位小数点',
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
})
|
||
const lossFormRules = reactive({
|
||
maId: [{ required: true, message: '请选择关联装备', trigger: 'change' }],
|
||
lossNum: [{ required: true, message: '请输入丢失数量', trigger: 'blur' }],
|
||
fileInfoList: [{ required: true, message: '请上传附件', trigger: 'blur' }],
|
||
lossPrice: [
|
||
{ required: true, message: '请输入丢失费用', trigger: 'blur' },
|
||
{
|
||
pattern: /^(0(\.\d{0,2})?|([1-9]\d*)(\.\d{0,2})?)$/,
|
||
message: '请输入正确的费用金额，最多两位小数点',
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
})
|
||
const scrapFormRules = reactive({
|
||
maId: [{ required: true, message: '请选择关联装备', trigger: 'change' }],
|
||
scrapNum: [{ required: true, message: '请输入报废数量', trigger: 'blur' }],
|
||
scrapReason: [{ required: true, message: '请输入报废原因', trigger: 'blur' }],
|
||
fileInfoList: [{ required: true, message: '请上传附件', trigger: 'blur' }],
|
||
scrapPrice: [
|
||
{ required: true, message: '请输入报废费用', trigger: 'blur' },
|
||
{
|
||
pattern: /^(0(\.\d{0,2})?|([1-9]\d*)(\.\d{0,2})?)$/,
|
||
message: '请输入正确的费用金额，最多两位小数点',
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
})
|
||
|
||
// 获取列表
|
||
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()
|
||
leaseList.value = res.rows
|
||
total.value = res.total
|
||
}
|
||
|
||
// 增加维修设备
|
||
const onAddRepair = () => {
|
||
const newId = Date.now()
|
||
repairFormList.value.push({
|
||
newId,
|
||
maId: '',
|
||
deviceName: '',
|
||
num: '',
|
||
typeId: '',
|
||
repairNum: 0,
|
||
repairPrice: 0,
|
||
fileInfoList: [],
|
||
})
|
||
}
|
||
// 增加丢失设备
|
||
const onAddLoss = () => {
|
||
const newId = Date.now()
|
||
lossFormList.value.push({
|
||
newId,
|
||
maId: '',
|
||
deviceName: '',
|
||
num: '',
|
||
typeId: '',
|
||
lossNum: 0,
|
||
lossPrice: 0,
|
||
fileInfoList: [],
|
||
})
|
||
}
|
||
// 增加报废设备
|
||
const onAddScrap = () => {
|
||
const newId = Date.now()
|
||
scrapFormList.value.push({
|
||
newId,
|
||
maId: '',
|
||
deviceName: '',
|
||
num: '',
|
||
typeId: '',
|
||
scrapNum: 0,
|
||
scrapPrice: 0,
|
||
scrapReason: '',
|
||
fileInfoList: [],
|
||
})
|
||
}
|
||
|
||
// 维修模块设备选择时change事件
|
||
const onChangeRepair = (maId: any, index: number) => {
|
||
ElMessage.closeAll()
|
||
try {
|
||
repairSelect.value.forEach((e: any) => {
|
||
if (e.maId == maId && e.isCheck === 0) {
|
||
repairFormList.value[index].deviceName = e.deviceName
|
||
repairFormList.value[index].num = e.num
|
||
repairFormList.value[index].typeId = e.typeId
|
||
e.isCheck = 1
|
||
throw new Error()
|
||
}
|
||
if (e.maId == maId && e.isCheck === 1) {
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: '当前装备已选择，不可重复选择！',
|
||
})
|
||
repairFormList.value[index].maId = ''
|
||
throw new Error()
|
||
}
|
||
})
|
||
} catch (error) {}
|
||
}
|
||
const onChangeLoss = (maId: any, index: number) => {
|
||
ElMessage.closeAll()
|
||
try {
|
||
lossSelect.value.forEach((e: any) => {
|
||
if (e.maId == maId && e.isCheck === 0) {
|
||
lossFormList.value[index].deviceName = e.deviceName
|
||
lossFormList.value[index].num = e.num
|
||
lossFormList.value[index].typeId = e.typeId
|
||
e.isCheck = 1
|
||
throw new Error()
|
||
}
|
||
if (e.maId == maId && e.isCheck === 1) {
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: '当前装备已选择，不可重复选择！',
|
||
})
|
||
lossFormList.value[index].maId = ''
|
||
throw new Error()
|
||
}
|
||
})
|
||
} catch (error) {}
|
||
}
|
||
|
||
const onChangeScrap = (maId: any, index: number) => {
|
||
ElMessage.closeAll()
|
||
try {
|
||
scrapSelect.value.forEach((e: any) => {
|
||
if (e.maId == maId && e.isCheck === 0) {
|
||
scrapFormList.value[index].deviceName = e.deviceName
|
||
scrapFormList.value[index].num = e.num
|
||
scrapFormList.value[index].typeId = e.typeId
|
||
e.isCheck = 1
|
||
throw new Error()
|
||
}
|
||
if (e.maId == maId && e.isCheck === 1) {
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: '当前装备已选择，不可重复选择！',
|
||
})
|
||
scrapFormList.value[index].maId = ''
|
||
throw new Error()
|
||
}
|
||
})
|
||
} catch (error) {}
|
||
}
|
||
const onDeleteRepair = (index: number) => {
|
||
try {
|
||
repairSelect.value.forEach((e: any) => {
|
||
if (e.maId == repairFormList.value[index].maId) {
|
||
e.isCheck = 0
|
||
throw new Error()
|
||
}
|
||
})
|
||
} catch (error) {}
|
||
repairFormList.value.splice(index, 1)
|
||
repairFormRefList.value.splice(index, 1)
|
||
}
|
||
const onDeleteLoss = (index: number) => {
|
||
try {
|
||
lossSelect.value.forEach((e: any) => {
|
||
if (e.maId == lossFormList.value[index].maId) {
|
||
e.isCheck = 0
|
||
throw new Error()
|
||
}
|
||
})
|
||
} catch (error) {}
|
||
lossFormList.value.splice(index, 1)
|
||
lossFormRefList.value.splice(index, 1)
|
||
}
|
||
const onDeleteScrap = (index: number) => {
|
||
try {
|
||
scrapSelect.value.forEach((e: any) => {
|
||
if (e.maId == scrapFormList.value[index].maId) {
|
||
e.isCheck = 0
|
||
throw new Error()
|
||
}
|
||
})
|
||
} catch (error) {}
|
||
scrapFormList.value.splice(index, 1)
|
||
scrapFormRefList.value.splice(index, 1)
|
||
}
|
||
|
||
// 重置
|
||
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 onRepublish = async (type: any, orderId: any, isChangePrice: any) => {
|
||
type == 7 || isChangePrice == 1
|
||
? (dialogTitle.value = '费用详情')
|
||
: (dialogTitle.value = '费用结算')
|
||
const { data: res }: any = await getOverhaulApi(orderId)
|
||
currentOrderId.value = orderId
|
||
orderDetailDtoList.value = res.orderDetailDtoList
|
||
repairRecordList.value = res.repairRecordList
|
||
scrapRecordList.value = res.scrapRecordList
|
||
lossRecordList.value = res.lossRecordList
|
||
fileListAll.value = res.fileInfoList
|
||
overhaulDetails.value = res
|
||
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)
|
||
})
|
||
})
|
||
|
||
if (!valid) {
|
||
isRepair = true
|
||
throw new Error('表单校验失败')
|
||
}
|
||
} catch (error) {}
|
||
}
|
||
if (isRepair) return
|
||
for (let index = 0; index < scrapFormList.value.length; index++) {
|
||
try {
|
||
const valid = await new Promise((resolve) => {
|
||
scrapFormRefList.value[index].validate((valid: any) => {
|
||
resolve(valid)
|
||
})
|
||
})
|
||
|
||
if (!valid) {
|
||
isRepair = true
|
||
throw new Error('表单校验失败')
|
||
}
|
||
} catch (error) {}
|
||
}
|
||
if (isRepair) return
|
||
for (let index = 0; index < lossFormList.value.length; index++) {
|
||
try {
|
||
const valid = await new Promise((resolve) => {
|
||
lossFormRefList.value[index].validate((valid: any) => {
|
||
resolve(valid)
|
||
})
|
||
})
|
||
|
||
if (!valid) {
|
||
isRepair = true
|
||
throw new Error('表单校验失败')
|
||
}
|
||
} catch (error) {}
|
||
}
|
||
if (isRepair) return
|
||
const { orderId, code } = orderDetails.value
|
||
const res: any = await setAddLeaseRepairApi({
|
||
orderId,
|
||
code,
|
||
repairRecordList: repairFormList.value,
|
||
scrapRecordList: scrapFormList.value,
|
||
lossRecordList: lossFormList.value,
|
||
})
|
||
|
||
if (res.code === 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '提交成功',
|
||
})
|
||
addOrEditDialogVisible.value = false
|
||
getLeaseListData()
|
||
}
|
||
}
|
||
|
||
// 自定义事件
|
||
const onRepairFileChange = (fileList: any, index: number) => {
|
||
repairFormList.value[index].fileInfoList = []
|
||
const fileListTemp = fileList.map((e: any) => {
|
||
return {
|
||
fileName: e.name,
|
||
fileUrl: e.url,
|
||
modelId: repairFormList.value[index].maId,
|
||
taskType: 19,
|
||
fileType: 0,
|
||
}
|
||
})
|
||
|
||
repairFormRefList.value[index].clearValidate('fileInfoList')
|
||
repairFormList.value[index].fileInfoList.push(...fileListTemp)
|
||
}
|
||
const onScrapFileChange = (fileList: any, index: number) => {
|
||
scrapFormList.value[index].fileInfoList = []
|
||
const fileListTemp = fileList.map((e: any) => {
|
||
return {
|
||
fileName: e.name,
|
||
fileUrl: e.url,
|
||
modelId: scrapFormList.value[index].maId,
|
||
taskType: 19,
|
||
fileType: 1,
|
||
}
|
||
})
|
||
scrapFormRefList.value[index].clearValidate('fileInfoList')
|
||
scrapFormList.value[index].fileInfoList.push(...fileListTemp)
|
||
}
|
||
const onLossFileChange = (fileList: any, index: number) => {
|
||
lossFormList.value[index].fileInfoList = []
|
||
const fileListTemp = fileList.map((e: any) => {
|
||
return {
|
||
fileName: e.name,
|
||
fileUrl: e.url,
|
||
modelId: lossFormList.value[index].maId,
|
||
taskType: 19,
|
||
fileType: 2,
|
||
}
|
||
})
|
||
lossFormRefList.value[index].clearValidate('fileInfoList')
|
||
lossFormList.value[index].fileInfoList.push(...fileListTemp)
|
||
}
|
||
|
||
// 取消按钮
|
||
const onCancel = () => {
|
||
addOrEditDialogVisible.value = false
|
||
}
|
||
const onClose = () => {
|
||
repairFormList.value = []
|
||
lossFormList.value = []
|
||
scrapFormList.value = []
|
||
}
|
||
|
||
const onViewFileImg = (row: any, index: number) => {
|
||
viewFileInfoList.value = []
|
||
viewFileInfoList.value = fileListAll.value.filter((e: any) => e.fileType == index)
|
||
innerVisible.value = true
|
||
}
|
||
|
||
const onSubmitChangePrice = () => {
|
||
ElMessageBox.confirm(`改价只能申请一次，是否确认提交本次改价申请？`, '温馨提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'success',
|
||
})
|
||
.then(async () => {
|
||
// 组装参数
|
||
|
||
const rentPriceList = orderDetailDtoList.value?.map((e: any) => {
|
||
return {
|
||
orderId: currentOrderId.value,
|
||
maId: e.maId,
|
||
changeCost: e.costs,
|
||
}
|
||
})
|
||
const repairPriceList = repairRecordList.value?.map((e: any) => {
|
||
return {
|
||
orderId: currentOrderId.value,
|
||
maId: e.maId,
|
||
repairChangePrice: e.repairPrice,
|
||
}
|
||
})
|
||
const scrapPriceList = scrapRecordList.value?.map((e: any) => {
|
||
return {
|
||
orderId: currentOrderId.value,
|
||
maId: e.maId,
|
||
scrapChangePrice: e.scrapPrice,
|
||
}
|
||
})
|
||
const lossPriceList = lossRecordList.value?.map((e: any) => {
|
||
return {
|
||
orderId: currentOrderId.value,
|
||
maId: e.maId,
|
||
lossChangePrice: e.lossPrice,
|
||
}
|
||
})
|
||
const changePriceParams = {
|
||
rentPriceList,
|
||
repairPriceList,
|
||
scrapPriceList,
|
||
lossPriceList,
|
||
}
|
||
|
||
console.log(changePriceParams, 'changePriceParams参数')
|
||
|
||
const res: any = await setChangePriceApi(changePriceParams)
|
||
if (res.code === 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '改价成功',
|
||
})
|
||
|
||
addOrEditDialogVisible.value = false
|
||
getLeaseListData()
|
||
}
|
||
})
|
||
.catch(async () => {})
|
||
}
|
||
|
||
onMounted(() => {
|
||
getLeaseListData()
|
||
})
|
||
</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;
|
||
}
|
||
:deep.upload-tip .el-form-item__label {
|
||
color: transparent;
|
||
}
|
||
</style>
|