1958 lines
67 KiB
Vue
1958 lines
67 KiB
Vue
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import PagingComponent from 'components/PagingComponent/index.vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { getOrderListApi,passApi,failApi } from 'http/api/usercenter/seekorder'
|
||
import uploadComponent from 'components/uploadComponent/index.vue'
|
||
import previewImg from './previewImg/index.vue'
|
||
import { ElMessage,ElMessageBox } from 'element-plus'
|
||
import type { FormInstance } from 'element-plus'
|
||
import { useStore } from 'store/user'
|
||
const store = useStore()
|
||
import { mainStore } from 'store/main'
|
||
const store2 = mainStore()
|
||
/* 查询参数 */
|
||
const queryParams: any = ref({
|
||
deviceName: '',
|
||
orderStatus: '',
|
||
czcompanyName: '',
|
||
companyName: '',
|
||
lowerBound: '',
|
||
upperBound: '',
|
||
pageSize: 20,
|
||
pageNum: 1,
|
||
startTime: '',
|
||
endTime: '',
|
||
})
|
||
const queryFormRef = ref<FormInstance>()
|
||
const time = ref([])
|
||
const router = useRouter()
|
||
const pageSize = 20
|
||
const pageNumber = 1
|
||
const total: any = ref(0)
|
||
const numberTemp = ref<number>(0)
|
||
const cardList = ref<any>([])
|
||
const status = 0
|
||
const statusList = [
|
||
{ id: '2', name: '待出库' },
|
||
{ id: '3', name: '已出库' },
|
||
{ id: '4', name: '租赁中' },
|
||
{ id: '5', name: '已退租' },
|
||
{ id: '6', name: '已完成' },
|
||
{ id: '7', name: '已驳回' },
|
||
]
|
||
|
||
/** 查询列表 */
|
||
const getList = async () => {
|
||
if (time.value.length > 0) {
|
||
const dateStart = new Date(time.value[0]);
|
||
const dateEnd = new Date(time.value[1]);
|
||
queryParams.value.startTime = dateStart.toLocaleDateString('en-CA')
|
||
queryParams.value.endTime = dateEnd.toLocaleDateString('en-CA')
|
||
} else {
|
||
queryParams.value.startTime = undefined
|
||
queryParams.value.endTime = undefined
|
||
}
|
||
const res: any = await getOrderListApi(queryParams.value)
|
||
cardList.value = res.rows
|
||
total.value = res.total
|
||
}
|
||
|
||
//订单详情
|
||
const handleViewOrder = (index: Number, row: any) => {
|
||
router.push({
|
||
name: 'orderManagementInfoBuy',
|
||
query: { orderStatusTemp: Number(row.orderStatus), idTemp: row.id },
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
getList()
|
||
})
|
||
|
||
// 查询按钮
|
||
const queryTableList = () => {
|
||
queryParams.value.pageNum=1
|
||
getList()
|
||
}
|
||
|
||
// 重置
|
||
const resetTableList = (formEl: FormInstance | undefined) => {
|
||
if (!formEl) return
|
||
formEl.resetFields()
|
||
time.value = []
|
||
queryTableList()
|
||
}
|
||
|
||
// 全选事件
|
||
const onChangeCompany = (e: boolean, index: number, item: any) => {
|
||
cardList.value[index].detailsList.forEach((item:any)=>{
|
||
if(item.orderStatus=="2"){
|
||
item.isChecked = e;
|
||
}
|
||
})
|
||
}
|
||
|
||
// 单选事件
|
||
const onChangeGoods = (index: number) => {
|
||
let flag = true;
|
||
for (let item of cardList.value[index].detailsList) {
|
||
if (item.orderStatus == "2" && item.isChecked != true) {
|
||
flag = false;
|
||
break;
|
||
}
|
||
}
|
||
cardList.value[index].isChecked = flag;
|
||
}
|
||
|
||
// 出库按钮
|
||
const confirmPass = async (index: number) => {
|
||
let ids: number[] = [];
|
||
cardList.value[index].detailsList.forEach((item:any)=>{
|
||
if(item.orderStatus=="2" && item.isChecked==true){
|
||
console.log(2222222222)
|
||
ids.push(item.id)
|
||
}
|
||
})
|
||
console.log('ids',ids)
|
||
if(ids.length==0){
|
||
ElMessage({
|
||
showClose: false,
|
||
message: '请选择装备',
|
||
type: 'error',
|
||
})
|
||
return
|
||
}else{
|
||
ElMessageBox.confirm('是否确定出库？', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}).then(() => {
|
||
return passApi({'ids':ids,'orderStatus':3})
|
||
// return removeDeviceApi([row.maId])
|
||
}).then((res) => {
|
||
if (res.code === 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '出库成功'
|
||
})
|
||
numberTemp.value = numberTemp.value+1;
|
||
getList()
|
||
}
|
||
}).catch(() => {})
|
||
}
|
||
}
|
||
|
||
// 驳回按钮
|
||
const confirmFail = async (index: number) => {
|
||
let ids: number[] = [];
|
||
cardList.value[index].detailsList.forEach((item:any)=>{
|
||
if(item.orderStatus=="2" && item.isChecked==true){
|
||
ids.push(item.id)
|
||
}
|
||
})
|
||
console.log('ids',ids)
|
||
if(ids.length==0){
|
||
ElMessage({
|
||
showClose: false,
|
||
message: '请选择装备',
|
||
type: 'error',
|
||
})
|
||
return
|
||
}else{
|
||
ElMessageBox.confirm('是否确定驳回？', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}).then(() => {
|
||
return failApi({'ids':ids,'orderStatus':7})
|
||
// return removeDeviceApi([row.maId])
|
||
}).then((res) => {
|
||
if (res.code === 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '驳回成功'
|
||
})
|
||
numberTemp.value = numberTemp.value+1;
|
||
getList()
|
||
}
|
||
}).catch(() => {})
|
||
}
|
||
}
|
||
|
||
// 计算是否过期
|
||
const isExpired=(goods:any)=> {
|
||
// 获取当前日期并去掉时间部分
|
||
const today = new Date();
|
||
today.setHours(0, 0, 0, 0);
|
||
|
||
// 将endtime转为Date对象
|
||
const endTime = new Date(goods.rentEndTime.replace(/-/g, "/"));
|
||
|
||
// 判断endtime是否早于今天
|
||
return endTime < today;
|
||
}
|
||
|
||
/* 退租按钮 */
|
||
const clickRentingTermination = () => {
|
||
router.push({ name: 'rentinTermination' })
|
||
console.log('退租')
|
||
}
|
||
|
||
/* 确认收货 */
|
||
const clickConfirmReceipt = (row: any) => {
|
||
console.log('确认收货')
|
||
router.push({
|
||
name: 'orderDetails',
|
||
query: {
|
||
orderId: row.orderId,
|
||
confirm: 'true',
|
||
},
|
||
})
|
||
}
|
||
|
||
const settleinTitle = ref('')
|
||
/* 编辑 **********/
|
||
const isEditDisabled = ref(false)
|
||
// 退租检修弹框显示隐藏
|
||
const dialogFormVisibleSettlein: any = ref(false)
|
||
const equipmentDeploymentParams: any = ref({
|
||
/* 设备名称 */
|
||
deviceName: '',
|
||
deviceTypeList: [],
|
||
deviceCount: 1,
|
||
unitName: '',
|
||
code: '',
|
||
brand: '',
|
||
typeId: '',
|
||
companyId: '',
|
||
productionDate: '',
|
||
dayLeasePrice: '',
|
||
person: '',
|
||
personPhone: '',
|
||
deviceWeight: '',
|
||
})
|
||
|
||
const mainFileList: any = ref([]) //检测文件1
|
||
const detailsFileList: any = ref([]) //检测文件2
|
||
//图片查看弹窗
|
||
const dialogVisible: any = ref(false)
|
||
const dialogImageUrl = ref('')
|
||
//上传
|
||
const upload: any = ref({
|
||
// 设置上传的请求头部
|
||
headers: { Authorization: 'Bearer ' + store2.token },
|
||
// 上传的地址
|
||
url: import.meta.env.VITE_API_URL + '/file/upload',
|
||
})
|
||
// 文件上传前处理-上传大小
|
||
const beforeUpload = (file: any) => {
|
||
if (file.size / 1024 / 1024 > 2) {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: '上传文件大小不能超过2M!',
|
||
})
|
||
// this.$message.error({ message: `上传文件大小不能超过2M!`,});
|
||
return false
|
||
}
|
||
}
|
||
// 文件上传失败
|
||
const uploadError = () => {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: '上传文件失败!',
|
||
})
|
||
// this.$message.error({message: `上传文件失败!`});
|
||
}
|
||
// 文件上传成功处理
|
||
const handleFileSuccess = (response: any) => {
|
||
if (response.code == 200) {
|
||
let obj = {
|
||
// modelId:this.maId,
|
||
fileName: response.data.name.split('/')[4],
|
||
fileUrl: response.data.url,
|
||
}
|
||
console.log(obj)
|
||
mainFileList.value.push(obj)
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '上传成功！',
|
||
})
|
||
console.log(mainFileList.value)
|
||
}
|
||
}
|
||
|
||
// 文件上传成功处理
|
||
const handleFileSuccess2 = (response: any) => {
|
||
if (response.code == 200) {
|
||
let obj = {
|
||
// modelId:this.maId,
|
||
fileName: response.data.name.split('/')[4],
|
||
fileUrl: response.data.url,
|
||
}
|
||
console.log(obj)
|
||
detailsFileList.value.push(obj)
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '上传成功！',
|
||
})
|
||
console.log(detailsFileList.value)
|
||
}
|
||
}
|
||
//退租检修
|
||
const handleViewBack = () => {
|
||
settleinTitle.value = '退租检修'
|
||
isEditDisabled.value = true
|
||
equipmentDeploymentParams.value = {
|
||
/* 企业Id */
|
||
// ownCo: mainStore().userInfo.companyId,
|
||
/* 租赁范围 */
|
||
leaseScope: '',
|
||
/* 设备所在地 */
|
||
location: '',
|
||
/* 省 */
|
||
provinceId: '',
|
||
/* 市 */
|
||
cityId: '',
|
||
/* 区 */
|
||
areaId: '',
|
||
/* 设备所在地 省 */
|
||
addressEconomize: '',
|
||
/* 设备所在地 市 */
|
||
addressProvince: '',
|
||
/* 设备所在地 区 */
|
||
addressArea: '',
|
||
/* 设备类型 */
|
||
typeId: '',
|
||
/* 设备类型大类 */
|
||
deviceType: '',
|
||
/* 设备类型子类 */
|
||
deviceTypeSon: '',
|
||
/* 设备类型小类*/
|
||
deviceTypeSun: '',
|
||
/* 设备品牌 */
|
||
brand: '',
|
||
/* 设备型号 */
|
||
modelName: '',
|
||
/* 出场日期 */
|
||
productionDate: '',
|
||
/* 工作小时数 */
|
||
workingHours: '',
|
||
/* 整机序列号 */
|
||
serialNumber: '',
|
||
/* 月租金 */
|
||
monthLeasePrice: '',
|
||
/* 日租金 */
|
||
dayLeasePrice: '',
|
||
/* 是否提供机手 */
|
||
isOperator: '',
|
||
/* 机手月费用 */
|
||
jsMonthPrice: '',
|
||
/* 机手日费用 */
|
||
jsDayPrice: '',
|
||
/* 详细说明 */
|
||
description: '',
|
||
/* 设备主图片 */
|
||
picUrl: '',
|
||
/* 检测信息 ，保险信息*/
|
||
fileList: [],
|
||
/* 设备状态 */
|
||
maStatus: 15,
|
||
detectionList: [],
|
||
insureList: [],
|
||
picList: []
|
||
}
|
||
// 打开退组检修弹框
|
||
dialogFormVisibleSettlein.value = true
|
||
}
|
||
|
||
const settlemoneyTitle = ref('')
|
||
const moneyParams1: any = ref({
|
||
/* 设备名称 */
|
||
deviceName: '',
|
||
deviceTypeList: [],
|
||
deviceCount: 1,
|
||
unitName: '',
|
||
})
|
||
const moneyParams2: any = ref({
|
||
/* 设备名称 */
|
||
deviceName: '',
|
||
deviceTypeList: [],
|
||
deviceCount: 1,
|
||
unitName: '',
|
||
})
|
||
const moneyParams3: any = ref({
|
||
/* 设备名称 */
|
||
deviceName: '',
|
||
deviceTypeList: [],
|
||
deviceCount: 1,
|
||
unitName: '',
|
||
})
|
||
const tableData: any = ref([
|
||
{
|
||
name1:'测试1',
|
||
name2:'测试1-1',
|
||
name3:'测试1-2',
|
||
jy1:'外观1-1',
|
||
jy2:'故障1-2',
|
||
jy3:'外观1-2',
|
||
jy4:'故障1-2',
|
||
jy5:'外观1-3',
|
||
jy6:'故障1-3',
|
||
jy7:'',
|
||
jy8:'',
|
||
remark:'备注1',
|
||
},
|
||
{
|
||
name1:'测试2',
|
||
name2:'测试2-1',
|
||
name3:'测试2-2',
|
||
jy1:'外观2-1',
|
||
jy2:'故障2-2',
|
||
jy3:'外观2-2',
|
||
jy4:'故障2-2',
|
||
jy5:'外观2-3',
|
||
jy6:'故障2-3',
|
||
jy7:'',
|
||
jy8:'',
|
||
remark:'备注2',
|
||
}
|
||
])
|
||
|
||
const partItems1: any = ref([{}])
|
||
const partItems2: any = ref([{}])
|
||
const partItems3: any = ref([{}])
|
||
// 费用结算弹框显示隐藏
|
||
const dialogFormVisibleSettlemoney: any = ref(false)
|
||
//费用结算
|
||
const handleViewMoney = () => {
|
||
settlemoneyTitle.value = '费用结算'
|
||
moneyParams1.value = {
|
||
/* 设备状态 */
|
||
maStatus: 15,
|
||
detectionList: [],
|
||
insureList: [],
|
||
picList: []
|
||
}
|
||
moneyParams2.value = {
|
||
/* 设备状态 */
|
||
maStatus: 15,
|
||
detectionList: [],
|
||
insureList: [],
|
||
picList: []
|
||
}
|
||
moneyParams3.value = {
|
||
/* 设备状态 */
|
||
maStatus: 15,
|
||
detectionList: [],
|
||
insureList: [],
|
||
picList: []
|
||
}
|
||
// 打开退组检修弹框
|
||
dialogFormVisibleSettlemoney.value = true
|
||
}
|
||
|
||
//维修费用
|
||
const addPartItem1=()=> {
|
||
partItems1.value.push({ partType: "", num: "", isCharge: "" });
|
||
}
|
||
const removePartItem1 =(index:number)=> {
|
||
if (partItems1.value.length > 1) {
|
||
partItems1.value.splice(index, 1);
|
||
}
|
||
}
|
||
|
||
//报废费用
|
||
const addPartItem2=()=> {
|
||
partItems2.value.push({ partType: "", num: "", isCharge: "" });
|
||
}
|
||
const removePartItem2 =(index:number)=> {
|
||
if (partItems2.value.length > 1) {
|
||
partItems2.value.splice(index, 1);
|
||
}
|
||
}
|
||
|
||
//报废费用 修改
|
||
const addPartItem3=()=> {
|
||
partItems3.value.push({ partType: "", num: "", isCharge: "" });
|
||
}
|
||
const removePartItem3 =(index:number)=> {
|
||
if (partItems3.value.length > 1) {
|
||
partItems3.value.splice(index, 1);
|
||
}
|
||
}
|
||
|
||
const settleListTitle = ref('')
|
||
// 费用清单弹框显示隐藏
|
||
const dialogFormVisibleSettleList: any = ref(false)
|
||
const tableData1: any = ref([
|
||
{
|
||
name1:'测试1',
|
||
name2:'测试1-1',
|
||
name3:'3台',
|
||
jy1:'100',
|
||
jy2:'31',
|
||
jy3:'2024-11-25 至2024-12-25',
|
||
jy4:'1600',
|
||
},
|
||
{
|
||
name1:'测试2',
|
||
name2:'测试2-1',
|
||
name3:'3台',
|
||
jy1:'100',
|
||
jy2:'31',
|
||
jy3:'2024-11-25 至2024-12-25',
|
||
jy4:'1600',
|
||
}
|
||
])
|
||
const tableData2: any = ref([
|
||
{
|
||
name1:'测试2',
|
||
name2:'测试2-1',
|
||
name3:'3台',
|
||
jy1:'类型1',
|
||
jy2:'维修中',
|
||
jy3:'1500',
|
||
},
|
||
{
|
||
name1:'测试2',
|
||
name2:'测试2-2',
|
||
name3:'3台',
|
||
jy1:'类型2',
|
||
jy2:'维修中',
|
||
jy3:'1500',
|
||
}
|
||
])
|
||
const tableData3: any = ref([
|
||
{
|
||
name1:'测试3',
|
||
name2:'测试3-1',
|
||
name3:'3台',
|
||
jy1:'轻度维修',
|
||
jy2:'1400',
|
||
},
|
||
{
|
||
name1:'测试3',
|
||
name2:'测试3-2',
|
||
name3:'3台',
|
||
jy1:'轻度维修',
|
||
jy2:'1400',
|
||
}
|
||
])
|
||
const tableData4: any = ref([
|
||
{
|
||
name1:'测试4',
|
||
name2:'测试4-1',
|
||
name3:'3台',
|
||
jy1:'1400',
|
||
},
|
||
{
|
||
name1:'测试4',
|
||
name2:'测试4-2',
|
||
name3:'3台',
|
||
jy1:'1400',
|
||
}
|
||
])
|
||
//费用清单
|
||
const handleViewList = () => {
|
||
settleListTitle.value = '费用清单'
|
||
moneyParams1.value = {
|
||
/* 设备状态 */
|
||
maStatus: 15,
|
||
detectionList: [],
|
||
insureList: [],
|
||
picList: []
|
||
}
|
||
// 打开费用清单弹框
|
||
dialogFormVisibleSettleList.value = true
|
||
}
|
||
|
||
const tableData5: any = ref([
|
||
{
|
||
name1:'测试1',
|
||
name2:'测试1-1',
|
||
name3:'测试1-2',
|
||
jy1:'外观1-1',
|
||
jy2:'故障1-2',
|
||
jy3:'外观1-2',
|
||
jy4:'故障1-2',
|
||
jy5:'外观1-3',
|
||
jy6:'故障1-3',
|
||
jy7:'',
|
||
jy8:'',
|
||
remark:'备注1',
|
||
},
|
||
{
|
||
name1:'测试2',
|
||
name2:'测试2-1',
|
||
name3:'测试2-2',
|
||
jy1:'外观2-1',
|
||
jy2:'故障2-2',
|
||
jy3:'外观2-2',
|
||
jy4:'故障2-2',
|
||
jy5:'外观2-3',
|
||
jy6:'故障2-3',
|
||
jy7:'',
|
||
jy8:'',
|
||
remark:'备注2',
|
||
}
|
||
])
|
||
const settleRepairTitle = ref('')
|
||
// 检修详情弹框显示隐藏
|
||
const dialogFormVisibleSettleRepair: any = ref(false)
|
||
//检修详情
|
||
const handleViewRepair = () => {
|
||
settleListTitle.value = '检修详情'
|
||
moneyParams1.value = {
|
||
/* 设备状态 */
|
||
maStatus: 15,
|
||
detectionList: [],
|
||
insureList: [],
|
||
picList: []
|
||
}
|
||
// 打开检修详情弹框
|
||
dialogFormVisibleSettleRepair.value = true
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 订单管理 -->
|
||
<div class="container">
|
||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" size="default" label-width="0">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-form-item prop="deviceName">
|
||
<el-input
|
||
style="width: 100%"
|
||
v-model.trim="queryParams.deviceName"
|
||
clearable
|
||
placeholder="请输入装备名称"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item prop="orderStatus">
|
||
<el-select
|
||
v-model="queryParams.orderStatus"
|
||
placeholder="请选择订单状态"
|
||
style="width: 100%"
|
||
clearable
|
||
>
|
||
<el-option
|
||
v-for="item in statusList"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item prop="dateRange">
|
||
<el-date-picker
|
||
v-model="time"
|
||
type="daterange"
|
||
unlink-panels
|
||
range-separator="-"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
style="width: 100%"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="6">
|
||
<el-form-item prop="czcompanyName">
|
||
<el-input
|
||
v-model.trim="queryParams.czcompanyName"
|
||
clearable
|
||
maxlength="20"
|
||
placeholder="出租单位"
|
||
style="width: 100%"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<el-form-item prop="companyName">
|
||
<el-input
|
||
v-model.trim="queryParams.companyName"
|
||
clearable
|
||
maxlength="20"
|
||
placeholder="承租单位"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-input
|
||
v-model.trim="queryParams.lowerBound"
|
||
placeholder="租金/元"
|
||
clearable
|
||
maxlength="20"
|
||
style="width: 45%"
|
||
/>
|
||
<span style="display: inline-block; width: 5%; text-align: center"> - </span>
|
||
<el-input
|
||
v-model.trim="queryParams.upperBound"
|
||
placeholder="租金/元"
|
||
clearable
|
||
maxlength="20"
|
||
style="width: 45%"
|
||
/>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item>
|
||
<el-button type="primary" @click="queryTableList">查询</el-button>
|
||
<el-button @click="resetTableList(queryFormRef)">重置</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
|
||
<el-row style="border-bottom: 1px solid #ccc">
|
||
<el-col :span="1">
|
||
<div style="text-align: center">
|
||
<el-checkbox
|
||
:key="numberTemp"
|
||
v-model="item.isChecked"
|
||
@change="onChangeCompany($event, index, item)"
|
||
>
|
||
</el-checkbox>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="22">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<div
|
||
class="item"
|
||
style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
|
||
>
|
||
<span>订单编号:</span>
|
||
{{ item.code }}
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<div
|
||
class="item"
|
||
style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
|
||
>
|
||
<span>下单时间:</span>
|
||
{{ item.orderTime }}
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<div
|
||
class="item"
|
||
style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
|
||
>
|
||
<span>装备所属公司:</span>
|
||
{{ item.czcompanyName }}
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div style="flex-shrink: 0; margin-bottom: 1px; font-size: 7px">
|
||
<el-button
|
||
v-if="item.orderStatus == '2'"
|
||
class="item"
|
||
type="primary"
|
||
size="small"
|
||
@click="confirmPass(index)"
|
||
>出库</el-button
|
||
>
|
||
<el-button
|
||
v-if="item.orderStatus == '2'"
|
||
class="item"
|
||
type="primary"
|
||
size="small"
|
||
@click="confirmFail(index)"
|
||
>驳回</el-button
|
||
>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<el-col :span="6">
|
||
<div
|
||
class="item"
|
||
style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
|
||
>
|
||
<span>出租方电话:</span>
|
||
{{ item.personPhone }}
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<div
|
||
class="item"
|
||
style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
|
||
>
|
||
<span>承租方电话:</span>
|
||
{{ item.phoneNumber }}
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<div
|
||
class="item"
|
||
style="flex-shrink: 0; margin-bottom: 5px; font-size: 12px"
|
||
>
|
||
<span>承租方地址:</span>
|
||
{{ item.companyName }}
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row class="cart-list" v-for="(goods, j) in item.detailsList" :key="j">
|
||
<el-col :span="1">
|
||
<div style="text-align: center">
|
||
<el-checkbox :key="numberTemp" v-model="goods.isChecked" @change="onChangeGoods(index)" :disabled="goods.orderStatus!='2'">
|
||
</el-checkbox>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="9" class="goods-info">
|
||
<el-col :span="7">
|
||
<img :src="goods.url" alt="" />
|
||
</el-col>
|
||
<div class="goods-code">
|
||
<div style="font-size: 10px; font-weight: bold">{{ goods.deviceName }}</div>
|
||
<div>租期：{{ goods.days }}{{ ' ' + '天' }}</div>
|
||
<div>租金：{{ goods.dayLeasePrice }}{{ ' ' + '元/天' }}</div>
|
||
<div>数量：{{ goods.num }}{{ ' ' + '台' }}</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">
|
||
总费用
|
||
</div>
|
||
<div class="red-font">{{ goods.costs }}</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div style="font-size: 14px; font-weight: bold; margin-bottom: 10px">租期</div>
|
||
<div style="color: black; font-weight: bold">
|
||
{{ goods.rentBeginTime }}
|
||
</div>
|
||
<div style="margin-top: 3px; margin-bottom: 3px">{{ '至' }}</div>
|
||
<div style="color: black; font-weight: bold">{{ goods.rentEndTime }}</div>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div
|
||
v-if="goods.orderStatus == '2'"
|
||
style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: blue"
|
||
>
|
||
{{ '待出库' }}
|
||
</div>
|
||
<div
|
||
v-if="goods.orderStatus == '3'"
|
||
style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #C76F60"
|
||
>
|
||
{{ '待收货' }}
|
||
</div>
|
||
<div
|
||
v-if="goods.orderStatus == '4' && isExpired(goods)"
|
||
style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #008D06"
|
||
>
|
||
{{ '租赁中' }}
|
||
<span style="color: red">(已过期)</span>
|
||
</div>
|
||
<div
|
||
v-if="goods.orderStatus == '4' && !isExpired(goods)"
|
||
style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #008D06"
|
||
>
|
||
{{ '租赁中' }}
|
||
</div>
|
||
<div
|
||
v-if="goods.orderStatus == '5'"
|
||
style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #5B33CC"
|
||
>
|
||
{{ '已退租' }}
|
||
</div>
|
||
<div
|
||
v-if="goods.orderStatus == '6'"
|
||
style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #C00017"
|
||
>
|
||
{{ '已完成' }}
|
||
</div>
|
||
<div
|
||
v-if="goods.orderStatus == '7'"
|
||
style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #797979"
|
||
>
|
||
{{ '已驳回' }}
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="3">
|
||
<div>
|
||
<el-button
|
||
@click="handleViewOrder(j, item.detailsList[j])"
|
||
type="text"
|
||
size="mini"
|
||
style="color: #blue; font-weight: bold"
|
||
>
|
||
订单详情
|
||
</el-button>
|
||
<el-button
|
||
@click="handleViewOrder(j)"
|
||
type="text"
|
||
size="mini"
|
||
style="color: #blue; font-weight: bold"
|
||
>
|
||
租赁协议
|
||
</el-button>
|
||
<el-button
|
||
v-if="goods.orderStatus=='5'"
|
||
@click="handleViewBack(j)"
|
||
type="text"
|
||
size="mini"
|
||
style="color: #blue; font-weight: bold"
|
||
>
|
||
退租检修
|
||
</el-button>
|
||
<el-button
|
||
v-if="goods.orderStatus=='5'"
|
||
@click="handleViewMoney(j)"
|
||
type="text"
|
||
size="mini"
|
||
style="color: #blue; font-weight: bold"
|
||
>
|
||
费用结算
|
||
</el-button>
|
||
<el-button
|
||
v-if="goods.orderStatus=='6'"
|
||
@click="handleViewRepair(j)"
|
||
type="text"
|
||
size="mini"
|
||
style="color: #blue; font-weight: bold"
|
||
>
|
||
检修详情
|
||
</el-button>
|
||
<el-button
|
||
v-if="goods.orderStatus=='6'"
|
||
@click="handleViewList(j)"
|
||
type="text"
|
||
size="mini"
|
||
style="color: #blue; font-weight: bold"
|
||
>
|
||
费用清单
|
||
</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<PagingComponent
|
||
@getList="getList"
|
||
:pageSize="pageSize"
|
||
:pageNumber="pageNumber"
|
||
:total="total"
|
||
/>
|
||
|
||
</div>
|
||
<!-- 退租检修弹框 -->
|
||
<el-dialog
|
||
v-model="dialogFormVisibleSettlein"
|
||
:title="settleinTitle"
|
||
width="60%"
|
||
align-center
|
||
:close-on-click-modal="false"
|
||
>
|
||
<div style="height: 80px">
|
||
<div
|
||
class="info"
|
||
style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
|
||
>
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 30%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 5px;
|
||
font-size: 16px;
|
||
margin-left: 40px;
|
||
"
|
||
>
|
||
<span>订单编号：10000212135656</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
|
||
>
|
||
<span>装备套数：2套</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
|
||
>
|
||
<span>退租时间：2024-10-10 10:00:00</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 30%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 12px;
|
||
font-size: 16px;
|
||
margin-left: 80px;
|
||
"
|
||
>
|
||
<span>装备名称：挖掘机</span>
|
||
</div>
|
||
|
||
<div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 30%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 5px;
|
||
font-size: 16px;
|
||
margin-left: 80px;
|
||
"
|
||
>
|
||
<span>装备编码：10000212135656</span>
|
||
</div>
|
||
<div
|
||
class="item"
|
||
style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
|
||
>
|
||
<span>型号：ZJO9777466</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
|
||
>
|
||
<span>数量：3</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="title">
|
||
<span class="title-sign"></span>
|
||
<span class="title-text">外观检测</span>
|
||
</div>
|
||
<el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams">
|
||
<el-row>
|
||
<el-form-item label="是否合格：" prop="pass">
|
||
<el-select
|
||
v-model="equipmentDeploymentParams.pass"
|
||
placeholder="请选择是否合格"
|
||
clearable
|
||
style="width: 350px"
|
||
>
|
||
<el-option label="是" value="0"></el-option>
|
||
<el-option label="否" value="1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="费用：" prop="fy">
|
||
<el-input
|
||
v-model="equipmentDeploymentParams.fy"
|
||
placeholder="请输入设备数量"
|
||
clearable
|
||
maxlength="20"
|
||
style="width: 350px"
|
||
/>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<el-form-item label="备注：" prop="remark1">
|
||
<el-input
|
||
placeholder="请输入"
|
||
autocomplete="off"
|
||
style="width: 860px"
|
||
maxlength="50"
|
||
v-model="equipmentDeploymentParams.remark1"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
</el-row>
|
||
</el-form>
|
||
<div class="uploadBox">
|
||
<div class="labelBox">
|
||
<div style="margin-left: 40px">
|
||
<span style="font-size: 14px">检验文件: </span>
|
||
</div>
|
||
<div style="margin-left: 20px">
|
||
<el-upload
|
||
ref="upload"
|
||
:limit="6"
|
||
:headers="upload.headers"
|
||
:action="upload.url"
|
||
:show-file-list="false"
|
||
accept=".png, .jpg, .jpeg"
|
||
:on-success="handleFileSuccess"
|
||
:auto-upload="true"
|
||
:before-upload="beforeUpload"
|
||
:on-error="uploadError"
|
||
>
|
||
<el-button icon="el-icon-folder-add">上传文件</el-button>
|
||
</el-upload>
|
||
</div>
|
||
<div style="color: #999; font-size: 12px; margin-left: 20px">
|
||
支持格式：.jpg .png，单个文件大小不能超过2M
|
||
</div>
|
||
</div>
|
||
<div class="imgsBox">
|
||
<div class="imgItem" v-for="(item, index) in mainFileList" :key="index">
|
||
<img class="picture-card" :src="item.fileUrl" alt="" />
|
||
<div class="icon-list">
|
||
<span class="imgItem__icon hide" @click="handleDownload(item)">
|
||
<i class="el-icon-download" />
|
||
</span>
|
||
<span class="imgItem__icon hide" @click="picturePreview(item)">
|
||
<i class="el-icon-zoom-in" />
|
||
</span>
|
||
<span
|
||
class="imgItem__icon hide"
|
||
@click="handleRemove(mainFileList, index)"
|
||
>
|
||
<i class="el-icon-delete" />
|
||
</span>
|
||
</div>
|
||
<p class="file-name">{{ item.fileName }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
|
||
</div>
|
||
<div class="title">
|
||
<span class="title-sign"></span>
|
||
<span class="title-text">维修内容</span>
|
||
</div>
|
||
<el-form label-width="160" ref="ruleFormRef" :model="equipmentDeploymentParams">
|
||
<el-row>
|
||
<el-form-item label="是否合格：" prop="pass2">
|
||
<el-select
|
||
v-model="equipmentDeploymentParams.pass2"
|
||
placeholder="请选择是否合格"
|
||
clearable
|
||
style="width: 350px"
|
||
>
|
||
<el-option label="是" value="0"></el-option>
|
||
<el-option label="否" value="1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="费用：" prop="fy2">
|
||
<el-input
|
||
v-model="equipmentDeploymentParams.fy2"
|
||
placeholder="请输入设备数量"
|
||
clearable
|
||
maxlength="20"
|
||
style="width: 350px"
|
||
/>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<el-form-item label="备注：" prop="remark2">
|
||
<el-input
|
||
placeholder="请输入"
|
||
autocomplete="off"
|
||
style="width: 860px"
|
||
maxlength="50"
|
||
v-model="equipmentDeploymentParams.remark2"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
</el-row>
|
||
</el-form>
|
||
<div class="uploadBox">
|
||
<div class="labelBox">
|
||
<div style="margin-left: 40px">
|
||
<span style="font-size: 14px">检验文件: </span>
|
||
</div>
|
||
<div style="margin-left: 20px">
|
||
<el-upload
|
||
ref="upload2"
|
||
:limit="6"
|
||
:headers="upload.headers"
|
||
:action="upload.url"
|
||
:show-file-list="false"
|
||
accept=".png, .jpg, .jpeg"
|
||
:on-success="handleFileSuccess2"
|
||
:auto-upload="true"
|
||
:before-upload="beforeUpload"
|
||
:on-error="uploadError"
|
||
>
|
||
<el-button icon="el-icon-folder-add">上传文件</el-button>
|
||
</el-upload>
|
||
</div>
|
||
<div style="color: #999; font-size: 12px; margin-left: 20px">
|
||
支持格式：.jpg .png，单个文件大小不能超过2M
|
||
</div>
|
||
</div>
|
||
<div class="imgsBox">
|
||
<div class="imgItem" v-for="(item, index) in detailsFileList" :key="index">
|
||
<img class="picture-card" :src="item.fileUrl" alt="" />
|
||
<div class="icon-list">
|
||
<span class="imgItem__icon hide" @click="handleDownload(item)">
|
||
<i class="el-icon-download" />
|
||
</span>
|
||
<span class="imgItem__icon hide" @click="picturePreview(item)">
|
||
<i class="el-icon-zoom-in" />
|
||
</span>
|
||
<span
|
||
class="imgItem__icon hide"
|
||
@click="handleRemove(detailsFileList, index)"
|
||
>
|
||
<i class="el-icon-delete" />
|
||
</span>
|
||
</div>
|
||
<p class="file-name">{{ item.fileName }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
|
||
<el-button @click="submitBtn" type="success"> 保存 </el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 费用结算弹框 -->
|
||
<el-dialog
|
||
v-model="dialogFormVisibleSettlemoney"
|
||
:title="settlemoneyTitle"
|
||
width="60%"
|
||
align-center
|
||
:close-on-click-modal="false"
|
||
>
|
||
<div style="height: 80px">
|
||
<div
|
||
class="info"
|
||
style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
|
||
>
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 30%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 5px;
|
||
font-size: 16px;
|
||
margin-left: 40px;
|
||
"
|
||
>
|
||
<span>订单编号：10000212135656</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
|
||
>
|
||
<span>装备套数：2套</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
|
||
>
|
||
<span>退租时间：2024-10-10 10:00:00</span>
|
||
</div>
|
||
</div>
|
||
<div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 30%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 5px;
|
||
font-size: 16px;
|
||
margin-left: 40px;
|
||
"
|
||
>
|
||
<span>结算单位：安徽送变电公司</span>
|
||
</div>
|
||
<div
|
||
class="item"
|
||
style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
|
||
>
|
||
<span>租赁天数：30{{ '/天' }}</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
|
||
>
|
||
<span>租赁费用(元)：1800</span>
|
||
</div>
|
||
</div>
|
||
<div class="title">
|
||
<span class="title-sign"></span>
|
||
<span class="title-text">退租检测信息</span>
|
||
</div>
|
||
</div>
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="tableData"
|
||
class="table"
|
||
style="margin-left: 50px; width: 1100px"
|
||
row-key="id"
|
||
show-overflow-tooltip
|
||
:header-cell-style="{ background: 'white', color: 'black' }"
|
||
>
|
||
<el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
|
||
<el-table-column align="center" prop="name1" label="机具名称" />
|
||
<el-table-column align="center" prop="name2" label="规格型号" />
|
||
<el-table-column align="center" prop="name3" label="装备编码" />
|
||
<el-table-column align="center" prop="typeName" label="检验内容">
|
||
<el-table-column label="外观检验" align="center" prop="jy1" />
|
||
<el-table-column label="故障检验" align="center" prop="jy2" />
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="typeName" label="维修内容">
|
||
<el-table-column label="外观检验" align="center" prop="jy3" />
|
||
<el-table-column label="故障检验" align="center" prop="jy4" />
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="typeName" label="金额">
|
||
<el-table-column label="外观检验" align="center" prop="jy5" />
|
||
<el-table-column label="故障检验" align="center" prop="jy6" />
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="typeName" label="附件">
|
||
<el-table-column label="外观检验" align="center" prop="jy7" />
|
||
<el-table-column label="故障检验" align="center" prop="jy8" />
|
||
</el-table-column>
|
||
<el-table-column align="center" label="备注" prop="remark" width="80px">
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="title">
|
||
<span class="title-sign"></span>
|
||
<span class="title-text">费用结算</span>
|
||
</div>
|
||
<div>
|
||
<span style="color: #ff9900; margin-left: 100px">● </span>
|
||
<span class="title-text">维修费用</span>
|
||
</div>
|
||
<el-form label-width="240" ref="ruleFormRef2" :model="moneyParams1">
|
||
<div v-for="(item, index) in partItems1" :key="index" class="dynamic-item">
|
||
<div
|
||
style="
|
||
margin-top: 10px;
|
||
margin-left: 180px;
|
||
margin-bottom: 5px;
|
||
font-size: 18px;
|
||
"
|
||
>
|
||
设备：{{ index + 1 }}
|
||
</div>
|
||
<el-row>
|
||
<el-form-item label="关联装备" prop="partType">
|
||
<el-select
|
||
v-model="item.device"
|
||
placeholder="请选择"
|
||
clearable
|
||
style="width: 300px"
|
||
>
|
||
<el-option label="设备1" value="0"></el-option>
|
||
<el-option label="设备2" value="1"></el-option>
|
||
<el-option label="设备3" value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="维修数量" prop="partNum">
|
||
<el-input
|
||
v-model="item.partNum"
|
||
placeholder="请输入"
|
||
maxlength="20"
|
||
style="width: 300px"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<el-form-item label="维修费用" prop="partNum">
|
||
<el-input
|
||
v-model="item.partNum"
|
||
placeholder="请输入"
|
||
maxlength="20"
|
||
style="width: 300px"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="维修类型" prop="isCharge">
|
||
<el-select
|
||
v-model="item.isCharge"
|
||
placeholder="请选择"
|
||
filterable
|
||
clearable
|
||
style="width: 300px"
|
||
>
|
||
<el-option label="维修类型1" value="0"></el-option>
|
||
<el-option label="维修类型2" value="1"></el-option>
|
||
<el-option label="维修类型3" value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<div style="margin-left: 130px">
|
||
<el-button @click="addPartItem1" type="success"> 增加维修设备</el-button>
|
||
<el-button @click="removePartItem1(index)" v-if="index != 0" type="danger">
|
||
删除维修设备</el-button
|
||
>
|
||
</div>
|
||
</el-row>
|
||
</div>
|
||
</el-form>
|
||
|
||
<div style="margin-top: 10px">
|
||
<span style="color: #ff9900; margin-left: 100px">● </span>
|
||
<span class="title-text">报废费用</span>
|
||
</div>
|
||
<el-form label-width="240" ref="ruleFormRef3" :model="moneyParams2">
|
||
<div v-for="(item, index) in partItems2" :key="index" class="dynamic-item">
|
||
<div
|
||
style="
|
||
margin-top: 10px;
|
||
margin-left: 180px;
|
||
margin-bottom: 5px;
|
||
font-size: 18px;
|
||
"
|
||
>
|
||
设备：{{ index + 1 }}
|
||
</div>
|
||
<el-row>
|
||
<el-form-item label="关联装备" prop="partType">
|
||
<el-select
|
||
v-model="item.device"
|
||
placeholder="请选择"
|
||
clearable
|
||
style="width: 300px"
|
||
>
|
||
<el-option label="设备1" value="0"></el-option>
|
||
<el-option label="设备2" value="1"></el-option>
|
||
<el-option label="设备3" value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="报废数量" prop="partNum">
|
||
<el-input
|
||
v-model="item.partNum"
|
||
placeholder="请输入"
|
||
maxlength="20"
|
||
style="width: 300px"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<el-form-item label="报废费用" prop="partNum">
|
||
<el-input
|
||
v-model="item.partNum"
|
||
placeholder="请输入"
|
||
maxlength="20"
|
||
style="width: 300px"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="报废原因" prop="isCharge">
|
||
<el-input
|
||
v-model="item.isCharg"
|
||
placeholder="请输入"
|
||
maxlength="20"
|
||
style="width: 300px"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<div style="margin-left: 130px">
|
||
<el-button @click="addPartItem2" type="success"> 增加报废设备</el-button>
|
||
<el-button @click="removePartItem2(index)" v-if="index != 0" type="danger">
|
||
删除报废设备</el-button
|
||
>
|
||
</div>
|
||
</el-row>
|
||
</div>
|
||
</el-form>
|
||
|
||
<div style="margin-top: 10px">
|
||
<span style="color: #ff9900; margin-left: 100px">● </span>
|
||
<span class="title-text">丢失费用</span>
|
||
</div>
|
||
<el-form label-width="240" ref="ruleFormRef4" :model="moneyParams3">
|
||
<div v-for="(item, index) in partItems3" :key="index" class="dynamic-item">
|
||
<div
|
||
style="
|
||
margin-top: 10px;
|
||
margin-left: 180px;
|
||
margin-bottom: 5px;
|
||
font-size: 18px;
|
||
"
|
||
>
|
||
设备：{{ index + 1 }}
|
||
</div>
|
||
<el-row>
|
||
<el-form-item label="关联装备" prop="partType">
|
||
<el-select
|
||
v-model="item.device"
|
||
placeholder="请选择"
|
||
clearable
|
||
style="width: 300px"
|
||
>
|
||
<el-option label="设备1" value="0"></el-option>
|
||
<el-option label="设备2" value="1"></el-option>
|
||
<el-option label="设备3" value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="丢失数量" prop="partNum">
|
||
<el-input
|
||
v-model="item.partNum"
|
||
placeholder="请输入"
|
||
maxlength="20"
|
||
style="width: 300px"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<el-form-item label="丢失费用" prop="partNum">
|
||
<el-input
|
||
v-model="item.partNum"
|
||
placeholder="请输入"
|
||
maxlength="20"
|
||
style="width: 300px"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<div style="margin-left: 130px">
|
||
<el-button @click="addPartItem3" type="success"> 增加丢失设备</el-button>
|
||
<el-button @click="removePartItem3(index)" v-if="index != 0" type="danger">
|
||
删除丢失设备</el-button
|
||
>
|
||
</div>
|
||
</el-row>
|
||
</div>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
|
||
<el-button @click="submitBtn" type="success"> 保存 </el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 费用清单弹框 -->
|
||
<el-dialog
|
||
v-model="dialogFormVisibleSettleList"
|
||
:title="settleListTitle"
|
||
width="60%"
|
||
align-center
|
||
:close-on-click-modal="false">
|
||
<div style="height: 80px">
|
||
<div
|
||
class="info"
|
||
style="margin-top: 5px; margin-bottom: 8px; display: flex; flex-wrap: wrap"
|
||
>
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 30%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 5px;
|
||
font-size: 16px;
|
||
margin-left: 40px;
|
||
"
|
||
>
|
||
<span>订单编号：10000212135656</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
|
||
>
|
||
<span>装备套数：2套</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
|
||
>
|
||
<span>退租时间：2024-10-10 10:00:00</span>
|
||
</div>
|
||
</div>
|
||
<div class="info" style="margin-top: 5px; display: flex; flex-wrap: wrap">
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 30%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 5px;
|
||
font-size: 16px;
|
||
margin-left: 40px;
|
||
"
|
||
>
|
||
<span>结算单位：安徽送变电公司</span>
|
||
</div>
|
||
<div
|
||
class="item"
|
||
style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
|
||
>
|
||
<span>租赁天数：30{{ '/天' }}</span>
|
||
</div>
|
||
|
||
<div
|
||
class="item"
|
||
style="width: 30%; flex-shrink: 0; margin-bottom: 5px; font-size: 16px"
|
||
>
|
||
<span>租赁费用(元)：1800</span>
|
||
</div>
|
||
</div>
|
||
<div class="title">
|
||
<span class="title-sign"></span>
|
||
<span class="title-text">租赁费用明细</span>
|
||
</div>
|
||
</div>
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="tableData1"
|
||
class="table"
|
||
style="margin-left: 50px; width: 1100px"
|
||
row-key="id"
|
||
show-overflow-tooltip
|
||
:header-cell-style="{ background: 'white', color: 'black' }"
|
||
>
|
||
<el-table-column align="center" prop="name1" label="装备名称" />
|
||
<el-table-column align="center" prop="name2" label="型号" />
|
||
<el-table-column align="center" prop="name3" label="数量" />
|
||
<el-table-column label="租赁单价(元/日)" align="center" prop="jy1" />
|
||
<el-table-column label="租赁天数" align="center" prop="jy2" />
|
||
<el-table-column label="租期" align="center" prop="jy3" />
|
||
<el-table-column label="租期费用" align="center" prop="jy4" />
|
||
</el-table>
|
||
<div class="title">
|
||
<span class="title-sign"></span>
|
||
<span class="title-text">维修费用明细</span>
|
||
</div>
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="tableData2"
|
||
class="table"
|
||
style="margin-left: 50px; width: 1100px"
|
||
row-key="id"
|
||
show-overflow-tooltip
|
||
:header-cell-style="{ background: 'white', color: 'black' }"
|
||
>
|
||
<el-table-column align="center" prop="name1" label="装备名称" />
|
||
<el-table-column align="center" prop="name2" label="型号" />
|
||
<el-table-column align="center" prop="name3" label="维修数量" />
|
||
<el-table-column label="维修类型" align="center" prop="jy1" />
|
||
<el-table-column label="维修状态" align="center" prop="jy2" />
|
||
<el-table-column label="维修费用（元）" align="center" prop="jy3" />
|
||
</el-table>
|
||
<div class="title">
|
||
<span class="title-sign"></span>
|
||
<span class="title-text">报废费用明细</span>
|
||
</div>
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="tableData3"
|
||
class="table"
|
||
style="margin-left: 50px; width: 1100px"
|
||
row-key="id"
|
||
show-overflow-tooltip
|
||
:header-cell-style="{ background: 'white', color: 'black' }"
|
||
>
|
||
<el-table-column align="center" prop="name1" label="装备名称" />
|
||
<el-table-column align="center" prop="name2" label="型号" />
|
||
<el-table-column align="center" prop="name3" label="报废数量" />
|
||
<el-table-column label="报废原因" align="center" prop="jy1" />
|
||
<el-table-column label="报废费用（元）" align="center" prop="jy2" />
|
||
</el-table>
|
||
<div class="title">
|
||
<span class="title-sign"></span>
|
||
<span class="title-text">丢失费用明细</span>
|
||
</div>
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="tableData4"
|
||
class="table"
|
||
style="margin-left: 50px; width: 1100px"
|
||
row-key="id"
|
||
show-overflow-tooltip
|
||
:header-cell-style="{ background: 'white', color: 'black' }"
|
||
>
|
||
<el-table-column align="center" prop="name1" label="装备名称" />
|
||
<el-table-column align="center" prop="name2" label="型号" />
|
||
<el-table-column align="center" prop="name3" label="丢失数量" />
|
||
<el-table-column label="报废费用（元）" align="center" prop="jy1" />
|
||
</el-table>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
|
||
<el-button @click="submitBtn" type="success"> 保存 </el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 检修详情弹框 -->
|
||
<el-dialog
|
||
v-model="dialogFormVisibleSettleRepair"
|
||
:title="settleRepairTitle"
|
||
width="60%"
|
||
:close-on-click-modal="false">
|
||
<div style="height: 80px">
|
||
<div
|
||
class="info"
|
||
style="margin-top: 5px; margin-bottom: 1px; display: flex; flex-wrap: wrap"
|
||
>
|
||
<div
|
||
class="item"
|
||
style="
|
||
width: 48%;
|
||
flex-shrink: 0;
|
||
margin-bottom: 1px;
|
||
font-size: 16px;
|
||
margin-left: 40px;
|
||
"
|
||
>
|
||
<span>订单编号：10000212135656</span>
|
||
</div>
|
||
|
||
|
||
<div
|
||
class="item"
|
||
style="width: 48%; flex-shrink: 0; margin-bottom: 1px; font-size: 16px"
|
||
>
|
||
<span>退租时间：2024-10-10 10:00:00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="tableData5"
|
||
class="table"
|
||
style="margin-left: 50px; width: 1100px"
|
||
row-key="id"
|
||
show-overflow-tooltip
|
||
:header-cell-style="{ background: 'white', color: 'black' }"
|
||
>
|
||
<el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
|
||
<el-table-column align="center" prop="name1" label="机具名称" />
|
||
<el-table-column align="center" prop="name2" label="规格型号" />
|
||
<el-table-column align="center" prop="name3" label="装备编码" />
|
||
<el-table-column align="center" prop="typeName" label="检验内容">
|
||
<el-table-column label="外观检验" align="center" prop="jy1" />
|
||
<el-table-column label="故障检验" align="center" prop="jy2" />
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="typeName" label="维修内容">
|
||
<el-table-column label="外观检验" align="center" prop="jy3" />
|
||
<el-table-column label="故障检验" align="center" prop="jy4" />
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="typeName" label="金额">
|
||
<el-table-column label="外观检验" align="center" prop="jy5" />
|
||
<el-table-column label="故障检验" align="center" prop="jy6" />
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="typeName" label="附件">
|
||
<el-table-column label="外观检验" align="center" prop="jy7" />
|
||
<el-table-column label="故障检验" align="center" prop="jy8" />
|
||
</el-table-column>
|
||
<el-table-column align="center" label="备注" prop="remark" width="80px">
|
||
</el-table-column>
|
||
</el-table>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
|
||
<el-button @click="submitBtn" type="success"> 保存 </el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.logo {
|
||
padding: 15px 0;
|
||
display: flex;
|
||
margin-left: 80px;
|
||
}
|
||
.title {
|
||
margin: 10px;
|
||
margin-left: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.title-sign {
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 16px;
|
||
background: #409eff;
|
||
margin-left: 45px;
|
||
}
|
||
.title-text {
|
||
font-weight: 700;
|
||
margin-left: 10px;
|
||
}
|
||
.uploadBox {
|
||
margin: 20px 40px;
|
||
}
|
||
.labelBox {
|
||
width: auto;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
.imgsBox {
|
||
width: auto;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
margin-left: 20px;
|
||
|
||
.imgItem {
|
||
width: 160px;
|
||
height: 160px;
|
||
margin-right: 40px;
|
||
border: 1px dashed #bbb;
|
||
position: relative;
|
||
.picture-card {
|
||
width: 160px;
|
||
height: 160px;
|
||
}
|
||
.icon-list {
|
||
width: 60px;
|
||
height: 20px;
|
||
position: absolute;
|
||
top: 70px;
|
||
left: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.imgItem__icon {
|
||
margin: 0 5px;
|
||
}
|
||
.file-name {
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
.hide {
|
||
display: none;
|
||
}
|
||
.imgItem:hover .hide {
|
||
display: block;
|
||
}
|
||
}
|
||
.tipBox {
|
||
color: red;
|
||
font-size: 12px;
|
||
margin-left: 20px;
|
||
}
|
||
.container {
|
||
// width: 800px;
|
||
// margin: 0 auto;
|
||
// padding: 10px;
|
||
background: #eeeff6;
|
||
font-size: 14px;
|
||
|
||
.cart-title {
|
||
margin-top: 10px;
|
||
padding: 10px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.cart-title div:first-child {
|
||
width: 5px;
|
||
height: 20px;
|
||
background-color: #4fabfe;
|
||
}
|
||
|
||
.cart-th {
|
||
margin: 15px 0;
|
||
div {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.cart-tbody {
|
||
background: #fff;
|
||
padding: 8px 12px;
|
||
margin: 10px;
|
||
|
||
.cart-user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
|
||
.code,
|
||
.orderTime {
|
||
padding: 3px 18px;
|
||
border: 1px solid #ccc;
|
||
}
|
||
|
||
.czcompanyName {
|
||
margin-left: 20px;
|
||
border-right: none;
|
||
}
|
||
}
|
||
|
||
.cart-list {
|
||
margin: 15px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
|
||
div {
|
||
text-align: center;
|
||
}
|
||
|
||
.goods-info {
|
||
display: flex;
|
||
align-content: center;
|
||
|
||
img {
|
||
width: 140px;
|
||
height: 80px;
|
||
}
|
||
|
||
.goods-code {
|
||
margin-left: 70px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
|
||
div {
|
||
text-align: left;
|
||
}
|
||
}
|
||
}
|
||
|
||
.lease-date {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.red-font {
|
||
color: #ff4800;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.protocol-handle {
|
||
background: #fff;
|
||
padding: 8px 12px;
|
||
margin: 10px;
|
||
font-size: 13px;
|
||
|
||
.checkbox-container a {
|
||
color: #ff4800;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep .el-form--inline .el-form-item {
|
||
margin-right: 6px;
|
||
width: 95%;
|
||
}
|
||
</style>
|