bonus-ui/src/views/EquipmentSharedLease/order/index.vue

1104 lines
33 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container app-container-content">
<el-card class="search-box">
<el-form
class="search-form"
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="auto"
>
<el-form-item prop="deviceName" label="装备名称">
<el-input
v-model="queryParams.deviceName"
placeholder="请输入装备名称"
clearable
@keyup.enter.native="handleQuery"
maxlength="20"
/>
</el-form-item>
<el-form-item prop="orderStatus" label="订单状态">
<el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable>
<el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item prop="dateRange" label="出库日期">
<el-date-picker
v-model="time"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 240px"
>
</el-date-picker>
</el-form-item>
<el-form-item prop="czcompanyName" label="出租单位">
<el-input
v-model="queryParams.czcompanyName"
placeholder="请输入出租单位"
clearable
@keyup.enter.native="handleQuery"
maxlength="20"
/>
</el-form-item>
<el-form-item prop="companyName" label="承租单位">
<el-input
v-model="queryParams.companyName"
placeholder="请输入承租单位"
clearable
@keyup.enter.native="handleQuery"
maxlength="20"
/>
</el-form-item>
<el-form-item class="form-right">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询 </el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="content-box">
<el-col :span="2">
<!-- <span style="font-size: 20px; font-weight: 800">出租记录列表</span>-->
</el-col>
<div class="table-container">
<template v-if="cardList.length > 0">
<div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
<el-row class="order-title-info">
<el-col :span="8">
<span> <i class="el-icon-document-copy"></i>订单编号: </span>
<span>
{{ item.code }}
</span>
</el-col>
<el-col :span="8">
<span> 下单时间: </span>
<span>
{{ item.orderTime }}
</span>
</el-col>
<el-col :span="8">
<span> 装备所属公司: </span>
<span>
{{ item.czcompanyName }}
</span>
</el-col>
<div class="order-type-box">
<el-tag :type="orderType(item.orderStatus)" effect="light">{{ orderText(item.orderStatus) }} </el-tag>
</div>
</el-row>
<el-row class="order-title-info">
<el-col :span="8">
<span> 出租方联系电话: </span>
<span>
{{ item.personPhone }}
</span>
</el-col>
<el-col :span="8">
<span> 承租方联系电话: </span>
<span>
{{ item.phoneNumber }}
</span>
</el-col>
<el-col :span="8">
<span> 收货地址: </span>
<span>
{{ item.address }}
</span>
</el-col>
</el-row>
<el-row style="border-bottom: 1px solid #F0F0F0; margin-bottom: 10px" class="order-title-info">
<el-col :span="8">
<span> 出租单位: </span>
<span> {{ item.sellerName }} </span>
</el-col>
<el-col :span="8">
<span> 承租方姓名: </span>
<span> {{ item.buyerName }} </span>
</el-col>
<el-col :span="8">
<span> 承租方所属单位: </span>
<span>
{{ item.companyName }}
</span>
</el-col>
</el-row>
<el-row :gutter="10" style="display: flex; align-items: center">
<el-col :span="14">
<div
v-for="(goods, j) in item.detailsList"
:key="j"
class="order-items order-info"
:style="j != item.detailsList.length - 1 ? 'border-bottom:1px solid #F0F0F0' : ''"
style="min-height: 80px"
>
<img v-if="goods.url" :src="goods.url" style="width: 110px; height: 70px" alt="" />
<div
v-else
style="width: 110px; height: 70px; display: flex; align-items: center; justify-content: center"
>
<img src="@/assets/images/no-img.png" style="width: 110px; height: 100px" alt="" />
</div>
<div
style="
min-height: 80px;
flex: 1;
display: flex;
justify-content: space-around;
flex-direction: column;
padding-left: 12px;
font-size: 13px;
"
>
<el-row style="color: #3F3F3F; font-weight: bold">
{{ goods.deviceName }}
</el-row>
<el-row>
<el-col :span="4">租期:</el-col>
<el-col :span="8">
<!-- <span
style="margin-right: 10px"
:style="
item.orderStatus == 20 ? 'text-decoration: line-through' : ''
"
>
</span>
<span v-if="item.orderStatus == 20">
{{
momentInit(goods.takeOverTime).diff(
goods.rentOverTime,
'day',
) == 0
? 1
: momentInit(goods.takeOverTime).diff(
goods.rentOverTime,
'day',
)
}}{{ ' ' + '天' }}
</span> -->
{{ goods.days }}{{ ' ' + '天' }}
<!-- {{ goods.days }}{{ ' ' + '天' }} -->
<div class="line"></div>
</el-col>
<!-- <el-col :span="4"> </el-col> -->
<el-col :span="12" style="padding-left: 6px">编号:{{ goods.code }}</el-col>
</el-row>
<el-row>
<el-col :span="4"> 数量:</el-col>
<el-col :span="8"> {{ goods.num }}{{ ' ' + '台' }}</el-col>
</el-row>
<el-row>
<el-col :span="4"> 日租金</el-col>
<el-col :span="8" style="color: #eb190a">
{{ goods.dayLeasePrice ? `${goods.dayLeasePrice}元/天` : '电话面议' }}
</el-col>
</el-row>
</div>
</div>
</el-col>
<!-- <el-col :span="3" class="order-items-info">
<div>总费用</div>
<div
class="red-font"
:style="item.orderStatus == 20 ? 'text-decoration: line-through' : ''"
>
{{ item.cost }}
</div>
<div class="red-font" v-if="item.orderStatus == 20">
{{ item.totalRealPrice }} 元
</div>
</el-col>-->
<el-col :span="6" class="order-items-info">
<div
v-for="(goods, j) in item.detailsList"
:key="j"
class="order-info"
:style="j != item.detailsList.length - 1 ? 'border-bottom:1px solid #F0F0F0' : ''"
style="min-height: 80px"
>
<div style="display: flex; justify-content: center; align-items: center; flex-direction: column">
<div>租期</div>
<div
style="font-weight: bold; margin-top: 10px"
:style="item.orderStatus == 20 ? 'text-decoration: line-through' : ''"
>
{{ formatDate(goods.rentBeginTime) }}至{{ formatDate(goods.rentEndTime) }}
</div>
<div style="font-weight: bold; margin-top: 10px" v-if="item.orderStatus == 20">
{{ goods.takeOverTime ? goods.takeOverTime.slice(0, 10) : '' }}至
{{ goods.rentOverTime ? goods.rentOverTime.slice(0, 10) : '' }}
</div>
</div>
</div>
</el-col>
<el-col :span="4" style="display: flex; align-items: center">
<div class="handle-btn-4">
<!-- <el-button @click="handleViewOrder(item)" type="primary" size="small">
订单详情
</el-button> -->
<el-button
v-show="item.orderStatus == '1'"
@click="handleConfirm(item)"
type="success"
plain
size="small"
style="background: rgba(52,226,199,0.1);border-radius: 4px 4px 4px 4px;border: 1px solid #34E2C7; color: #34E2C7;"
>
同意
</el-button>
<el-button
v-show="item.orderStatus == '1'"
@click="handelReject(item)"
type="warning"
plain
size="small"
style="background: rgba(255,171,41,0.1);border-radius: 4px 4px 4px 4px;border: 1px solid #FFAB29;color: #FFAB29;"
>
不同意
</el-button>
<el-button type="primary" plain size="small" @click="handleApprove(item)" style="color: #34E2C7;background: rgba(52,226,199,0.1);border-radius: 4px 4px 4px 4px;border: 1px solid #34E2C7;">查看 </el-button>
<el-button
v-show="item.orderStatus == '2' && item.taskStatus != '3'"
@click="handleOut(item)"
type="primary"
plain
size="small"
style="color: #34E2C7;background: rgba(52,226,199,0.1);border-radius: 4px 4px 4px 4px;border: 1px solid #34E2C7;"
>
共享出库
</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
</div>
<div class="pagination-wrapper">
<pagination
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</el-card>
<el-dialog :title="dialogTitle" width="65%" destroy-on-close :visible.sync="addOrEditDialogCostVisible">
<el-row style="display: flex; letter-spacing: 1px; padding: 0 10px 20px; justify-content: space-between">
<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.leaseCompany }}</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
border
:data="orderDetailDtoList"
show-overflow-tooltip
height="546"
:header-cell-style="{
color: '#fff',
background: '#00a288',
}"
>
<el-table-column prop="code" align="center" label="装备编号" />
<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 }">
{{ formatDate(row.preOutboundTime) + '至' + formatDate(row.rentOverTime) }}
</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
height="546"
:header-cell-style="{
background: '#00a288',
color: '#fff',
}"
>
<el-table-column prop="code" align="center" label="装备编号" />
<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
height="546"
:header-cell-style="{
background: '#00a288',
color: '#fff',
}"
>
<el-table-column prop="code" align="center" label="装备编号" />
<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
height="546"
:header-cell-style="{
background: '#00a288',
color: '#fff',
}"
>
<el-table-column prop="code" align="center" label="装备编号" />
<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>
</el-dialog>
<!-- 附件详情 -->
<el-dialog :visible.sync="innerVisible" width="500" title="附件详情" append-to-body>
<el-table
:data="viewFileInfoList"
border
show-overflow-tooltip
height="546"
: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>
<OrderDetailDialog :visible.sync="showOrderDetail" :orderId="orderId" :orderStatus="orderStatus" title="订单详情" />
</div>
</template>
<script>
import TitleTip from '@/components/TitleTip'
import { getOrderListApi, getOrderListInfoApi, getOverhaulApi, orderConfirm, orderReject } from '@/api/search/order'
import { getPriceShowConfigApi } from '@/api/common'
import moment from 'moment'
import OrderDetailDialog from '@/views/EquipmentSharedOrder/order/detail.vue'
import typeConfigRepair from '@/views/material/ma/typeConfigRepair/index.vue'
export default {
components: { OrderDetailDialog, TitleTip },
name: 'order',
// dicts: ['purchase_task_status'],
data() {
return {
// 遮罩层
loading: false,
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
showOrderDetail: false,
orderStatus: '',
orderId: '',
statusList: [
{ id: '1', name: '待确认' },
{ id: '2', name: '已确认' },
{ id: '3', name: '已驳回' },
],
ids: [],
// 总条数
total: 0,
//表格数据
tableList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 查询参数
time: [],
momentInit: moment,
queryParams: {
pageNum: 1,
pageSize: 10,
keyWord: undefined,
status: undefined,
lowerBound: undefined,
upperBound: undefined,
},
//卡片集合
cardList: [],
status: 0,
dialogTitle: '',
addOrEditDialogCostVisible: false,
viewOrderDetailsOrderId: '',
orderDetailDtoList: [],
repairRecordList: [],
scrapRecordList: [],
lossRecordList: [],
overhaulDetails: {},
fileListAll: [],
innerVisible: false,
viewFileInfoList: [],
isShowDayLeasePrice: false,
}
},
created() {
this.getList()
this.getPriceShowConfig()
},
methods: {
// 仅保留日期YYYY-MM-DD
formatDate(dateStr) {
if (!dateStr) return ''
const s = String(dateStr)
return s.length >= 10 ? s.slice(0, 10) : s
},
orderText(status) {
const foundStatus = this.statusList.find((e) => e.id === status)
return foundStatus ? foundStatus.name : '未知状态'
// const filteredStatus = this.statusList.filter((e) => e.id == status)[0].name
// return filteredStatus ? filteredStatus.name : '未知状态';
},
orderType(status) {
if (status == 1 || status == 2 || status == 3 || status == 5) return 'primary'
if (status == 4 || status == 7) return 'success'
if (status == 5 || status == 6) return 'warning'
if (status == 8) return 'danger'
},
/** 查询列表 */
getList() {
this.loading = true
if (this.time.length > 0) {
const dateStart = new Date(this.time[0])
const dateEnd = new Date(this.time[1])
this.queryParams.startTime = dateStart.toLocaleDateString('en-CA')
this.queryParams.endTime = dateEnd.toLocaleDateString('en-CA')
} else {
this.queryParams.startTime = undefined
this.queryParams.endTime = undefined
}
this.queryParams.pageType = '2'
getOrderListApi(this.queryParams).then((res) => {
this.cardList = res.data.rows
this.total = res.data.total
this.loading = false
})
},
// 公司全选事件
onChangeCompany(e, index, item) {
this.cardList[index].good_list.forEach((item) => {
item.isChecked = e
})
},
// 公司子级list全选事件
onChangeGoods(index) {
this.cardList[index].isChecked = this.cardList[index].good_list.every((e) => e.isChecked === true)
},
handleConfirm(item) {
// 订单通过
orderConfirm(item.orderId).then((res) => {
if (res.code == '200') {
item.orderStatus = '2'
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
})
},
handelReject(item) {
// 订单驳回
orderReject(item.orderId).then((res) => {
if (res.code == '200') {
item.orderStatus = '3'
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
})
},
handleOut(item) {
console.log('🚀 ~ item:', item)
this.$router.push({
path: '/equipmentShared/order/sharedOutList',
query: { id: item.orderId, isView: true },
})
},
handleApprove(item) {
this.$router.push({ path: '/equipmentShared/order/sharedOutList', query: { id: item.orderId } })
},
//订单详情
handleViewOrder(row) {
this.showOrderDetail = true
this.orderStatus = row.orderStatus
this.orderId = row.orderId
},
//检修详情
handleViewRepair(item) {
this.viewOrderDetailsOrderId = ''
this.viewOrderDetailsOrderId = item.orderId
this.dialogTitle = '检修详情'
getOrderListInfoApi({ orderId: this.viewOrderDetailsOrderId }).then(async (res) => {
this.orderDetails = res.data
if (item.orderStatus == 20) {
await getOverhaulApi(this.viewOrderDetailsOrderId).then((resTwo) => {
this.orderDetailDtoList = resTwo.data.orderDetailDtoList
this.repairRecordList = resTwo.data.repairRecordList
this.scrapRecordList = resTwo.data.scrapRecordList
this.lossRecordList = resTwo.data.lossRecordList
this.fileListAll = resTwo.data.fileInfoList
this.overhaulDetails = resTwo.data
})
}
})
this.addOrEditDialogCostVisible = true
},
//附件查看
onViewFileImg(row, index) {
this.viewFileInfoList = []
if (this.fileListAll) {
this.fileListAll.forEach((e) => {
if (e.fileType == index) {
this.viewFileInfoList.push(e)
}
})
}
this.innerVisible = true
},
/** 重置按钮操作 */
async resetQuery() {
await this.resetForm('queryForm')
this.dateRange = []
this.queryParams.keyWord = null
this.time = []
await this.handleQuery()
},
/** 搜索按钮操作 */
async handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.taskId)
this.single = selection.length != 1
this.multiple = !selection.length
},
// 获取价格显示配置
getPriceShowConfig() {
getPriceShowConfigApi().then((res) => {
this.isShowDayLeasePrice = res?.rows[0].status == 0 ? true : false
})
},
},
}
</script>
<style lang="scss" scoped>
/* .uploadImg {
padding-top: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.deviceCode {
margin-top: 10px;
padding-bottom: 20px;
font-size: 18px;
}
::v-deep.el-table .fixed-width .el-button--mini {
width: 60px !important;
margin-bottom: 10px;
}
//隐藏图片上传框的css
::v-deep.disabled {
.el-upload--picture-card {
display: none;
}
} */
.card-header-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: linear-gradient(135deg, #169bd5, #0d7aa8);
color: #fff;
border-radius: 4px;
margin-right: 12px;
margin-bottom: 12px;
font-size: 16px;
box-shadow: 0 2px 6px rgba(22, 155, 213, 0.25);
}
.cart-tbody {
background: #fff;
padding: 16px;
margin-bottom: 14px;
border-radius: 10px;
border: 1px solid #F0F0F0;
//box-shadow: 0 0 0 1px rgba(22, 155, 213, 0.2), 0 0 8px rgba(22, 155, 213, 0.3);
//transition: all 0.3s ease;
&:hover {
border-color: #0d7aa8;
//box-shadow: 0 0 0 2px rgba(22, 155, 213, 0.3), 0 0 12px rgba(22, 155, 213, 0.4);
}
.cart-user-info {
display: flex;
align-items: center;
font-size: 13px;
.code,
.orderTime {
padding: 3px 18px;
border: 1px solid #F0F0F0;
}
.czcompanyName {
margin-left: 20px;
border-right: none;
}
}
.cart-listAll {
margin: 15px 0;
display: flex;
align-items: center;
font-size: 13px;
div {
text-align: center;
}
.cart-list {
margin: 15px 0;
display: flex;
align-items: center;
font-size: 13px;
div {
text-align: center;
}
.goods-info {
display: flex;
align-content: center;
border-bottom: 1px solid #F0F0F0;
img {
width: 180px;
height: 80px;
}
.goods-code {
margin-left: 110px;
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;
}
}
.lease-date {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12px;
}
.red-font {
color: #ff4800;
font-weight: bold;
}
}
}
:deep .el-form--inline .el-form-item {
margin-right: 6px;
width: 95%;
}
.order-title-info {
position: relative;
padding: 8px 0;
font-size: 14px;
color: #666;
span:first-child {
color: #666;
}
span + span {
color: #333;
}
&:not(:last-child) {
margin-bottom: 6px;
}
.order-type-box {
position: absolute;
top: 0;
right: 0;
}
}
.order-items {
border-right: 1px solid #F0F0F0;
}
.order-info {
display: flex;
padding: 8px 0;
align-items: center;
justify-content: center;
}
.order-items-info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1px solid #F0F0F0;
font-size: 13px;
height: 96px;
}
.red-font {
color: #ff4800;
font-weight: bold;
margin-top: 10px;
}
.handle-btn-4 {
width: 100%;
height: 96px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.el-button {
/* width: calc((100% - 20px) / 2); */
margin-left: 10px !important;
margin-bottom: 10px;
}
}
.handle-btn-1 {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
.el-button {
width: 90%;
margin-bottom: 10px;
margin-left: 5% !important;
}
}
.app-container-content {
// background-color: #f5f5f5;
:deep(.el-dialog) {
display: flex !important;
flex-direction: column !important;
margin: 0 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
max-height: 100vh !important;
.el-dialog__body {
flex: 1;
overflow-y: scroll !important;
}
.dialog-content {
padding: 20px;
}
}
}
.search-box {
width: 100%;
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 - 250px);
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: 6px;
flex-shrink: 0;
.el-col {
display: flex;
/* justify-content: flex-end; */
align-items: center;
gap: 12px;
}
}
.table-container {
flex: 1;
overflow-y: auto;
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; */
}
}
}
.line {
position: absolute;
top: -33px;
margin-left: 150px;
width: 1px;
height: 96px;
background: #ccc;
}
::v-deep.el-button--primary{
background-color: #2CBAB2;
border-color: #2CBAB2;
}
.el-tag{
background: #F0F0F0;
}
.el-card{
border: 1px solid #F0F0F0;
}
</style>