104 lines
3.9 KiB
Vue
104 lines
3.9 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-row :gutter="20">
|
||
<el-col :span="5" style="border-right: 1px solid #e4e7ed;">
|
||
<div style="font-weight: 900;">订单列表</div>
|
||
<div style="display: flex; align-items: center; gap: 5px; margin-top: 10px;">
|
||
<!-- 主搜索和添加 -->
|
||
<el-input style="flex: 1;" prefix-icon="el-icon-search" placeholder="输入订单编号搜索"
|
||
v-model="queryParams.orderNum"></el-input>
|
||
<el-button icon="el-icon-search" @click="toggleQuery"></el-button>
|
||
<el-button type="primary" icon="el-icon-plus" style="margin-left: 0;"></el-button>
|
||
</div>
|
||
<div v-show="showQuery"
|
||
style="display: flex; align-items: center; gap: 5px; margin-top: 10px; flex-wrap: wrap;">
|
||
<!-- 查询区，通过上方的查询按钮控制显示隐藏 -->
|
||
<!-- 客户行业和客户等级的下拉选 -->
|
||
<el-select style="width: 100px;" v-model="queryParams.customerId" placeholder="客户" clearable>
|
||
<el-option v-for="item in dict.type.customer_industry" :key="item.value" :label="item.label"
|
||
:value="item.value" />
|
||
</el-select>
|
||
<el-select style="width: 100px;" v-model="queryParams.salesman" placeholder="销售员" clearable>
|
||
<el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
|
||
:value="item.value" />
|
||
</el-select>
|
||
<el-select style="width: 100px;" v-model="queryParams.orderStatus" placeholder="订单状态" clearable>
|
||
<el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
|
||
:value="item.value" />
|
||
</el-select>
|
||
<el-select style="width: 100px;" v-model="queryParams.financeStatus" placeholder="财务状态" clearable>
|
||
<el-option v-for="item in dict.type.customer_level" :key="item.value" :label="item.label"
|
||
:value="item.value" />
|
||
</el-select>
|
||
</div>
|
||
<div>
|
||
<!-- 列表区域 -->
|
||
<KLPList :listData="orderList" listKey="orderId" :loading="orderLoading" />
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :span="19">
|
||
<el-tabs v-model="activeTab" type="border-card">
|
||
<el-tab-pane label="订单详情" name="detail">
|
||
<div class="order-detail" v-if="activeTab === 'detail'">
|
||
<!-- 订单详情内容 -->
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="财务状态" name="finance">
|
||
<div class="order-finance" v-if="activeTab === 'finance'">
|
||
<!-- 财务状态内容 -->
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="订单异议" name="dispute">
|
||
<div class="order-dispute" v-if="activeTab === 'dispute'">
|
||
<!-- 订单异议内容 -->
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="操作记录" name="record">
|
||
<div class="order-record" v-if="activeTab === 'record'">
|
||
<!-- 操作记录内容 -->
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="钢卷追溯" name="trace">
|
||
<div class="order-trace" v-if="activeTab === 'trace'">
|
||
<!-- 钢卷追溯内容 -->
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import KLPList from '@/components/KLPUI/KLPList/index.vue'
|
||
|
||
export default {
|
||
name: 'OrderPage',
|
||
components: {
|
||
KLPList
|
||
},
|
||
dicts: ['customer_level', 'customer_industry'],
|
||
data() {
|
||
return {
|
||
showQuery: false,
|
||
queryParams: {
|
||
orderNum: '',
|
||
customerId: '',
|
||
salesman: '',
|
||
orderStatus: '',
|
||
financeStatus: ''
|
||
},
|
||
activeTab: 'detail',
|
||
currentOrder: {},
|
||
orderList: [],
|
||
orderLoading: false
|
||
}
|
||
},
|
||
methods: {
|
||
toggleQuery() {
|
||
this.showQuery = !this.showQuery
|
||
},
|
||
}
|
||
}
|
||
</script> |