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>
|