Zlpt_Portal/src/views/user/orderManagementCz/index.vue

124 lines
4.3 KiB
Vue

<script setup lang="ts">
import { ref } from 'vue'
const queryParams = ref({})
import PagingComponent from 'components/PagingComponent/index.vue'
import { getOrderListApi } from 'http/api/usercenter/seekorder'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const router = useRouter()
const pageSize = ref(20)
const pageNumber = ref(1)
const total: any = ref(0)
// 获取数据列表
const getList = async () => {
const res: any = await getOrderListApi()
console.log('获取数据列表***', res)
tableData.value = res.rows
total.value = res.total
}
getList()
/* 结算按钮 */
const settlementBtn = () => {
router.push('/myuser/settlement')
}
/* 确认按钮 */
const confirmBtn = (row:any) => {
router.push({ name: 'orderConfirm',query:{
orderId:row.orderId
} })
}
/* 查看按钮 */
const clickPreviewDetails = (row:any) => {
console.log('查看')
router.push({ name: 'orderDetails',query:{
orderId:row.orderId
} })
}
const tableData: any = ref([{ address: '客户单位' }])
const time = ref([])
</script>
<template>
<!-- 订单管理(承租方) -->
<el-config-provider :locale="zhCn">
<el-form :model="queryParams" :inline="true" size="small">
<el-form-item label="订单编号:" prop="menuName">
<el-input />
</el-form-item>
<el-form-item label="创建时间:" prop="menuName">
<el-date-picker
v-model="time"
type="daterange"
unlink-panels
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
style="width: 180px" />
</el-form-item>
<el-form-item label="状态:" prop="menuName">
<el-input />
</el-form-item>
<el-form-item label="装备类型:" prop="menuName">
<el-input />
</el-form-item>
<el-form-item label="装备名称:" prop="menuName">
<el-input />
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
<el-button type="success">重置</el-button>
</el-form-item>
</el-form>
<!-- 表格 -->
<el-table
:data="tableData"
show-overflow-tooltip
:header-cell-style="{
background: '#3E98FF',
color: '#fff'
}"
fit>
<el-table-column align="center" prop="code" label="订单编号" />
<el-table-column align="center" prop="supplierCompany" label="客户单位" />
<el-table-column align="center" prop="time" label="订单创建日期" />
<el-table-column align="center" prop="orderPhone" label="联系方式" />
<el-table-column align="center" prop="typeName" label="装备类型" />
<el-table-column align="center" prop="deviceName" label="装备名称" />
<el-table-column align="center" prop="orderStatus" label="订单状态" />
<el-table-column align="center" prop="name" label="操作" width="260px">
<template #default="{ row }">
<el-button size="small" type="primary" @click="confirmBtn(row)" v-if="row.orderStatus==31">确认</el-button>
<el-button size="small" type="warning" @click="clickPreviewDetails(row)" v-if="row.orderStatus!=31">
查看
</el-button>
<el-button size="small" type="danger" v-if="row.orderStatus=39">删除</el-button>
<el-button size="small" type="success" @click="settlementBtn" v-if="row.orderStatus=34">结算</el-button>
</template>
</el-table-column>
</el-table>
<PagingComponent
@getList="getList"
:pageSize="pageSize"
:pageNumber="pageNumber"
:total="total" />
</el-config-provider>
</template>
<style>
.el-form {
margin: 15px 0;
}
</style>