|
|
@@ -21,19 +21,25 @@
|
|
|
|
|
|
<div class="filter-bar">
|
|
|
<span class="filter-label">下单部门</span>
|
|
|
- <el-select v-model="queryParams.department" placeholder="请选择" style="width: 100px" clearable>
|
|
|
- <el-option label="某某部门" value="某某部门" />
|
|
|
- </el-select>
|
|
|
+ <el-tree-select
|
|
|
+ v-model="queryParams.department"
|
|
|
+ style="width: 100px"
|
|
|
+ :data="deptList"
|
|
|
+ :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
|
|
|
+ value-key="deptId"
|
|
|
+ placeholder="请选择"
|
|
|
+ check-strictly
|
|
|
+ :render-after-expand="false"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ </el-tree-select>
|
|
|
<span class="filter-label">状态</span>
|
|
|
<el-select v-model="queryParams.status" placeholder="请选择" style="width: 100px" clearable>
|
|
|
- <el-option label="已完成" value="completed" />
|
|
|
- <el-option label="待收货" value="pending" />
|
|
|
+ <el-option v-for="dict in order_status" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
</el-select>
|
|
|
<span class="filter-label">支付方式</span>
|
|
|
<el-select v-model="queryParams.payType" placeholder="请选择" style="width: 100px" clearable>
|
|
|
- <el-option label="微信支付" value="wechat" />
|
|
|
- <el-option label="支付宝" value="alipay" />
|
|
|
- <el-option label="账期支付" value="credit" />
|
|
|
+ <el-option v-for="dict in pay_method" :key="dict.value" :label="dict.label" :value="dict.value" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
|
|
|
@@ -42,12 +48,19 @@
|
|
|
<div class="order-header">
|
|
|
<span class="order-time">{{ order.orderTime }}</span>
|
|
|
<span class="order-no">订单号:{{ order.orderNo }}</span>
|
|
|
+ <el-button type="primary" link class="expand-btn" @click="order.expanded = !order.expanded"
|
|
|
+ >{{ order.expanded ? '收起' : '展开' }} <el-icon><ArrowRight /></el-icon
|
|
|
+ ></el-button>
|
|
|
<el-button type="primary" link class="detail-btn" @click="handleViewDetail(order)"
|
|
|
>订单详情 <el-icon><ArrowRight /></el-icon
|
|
|
></el-button>
|
|
|
</div>
|
|
|
<div class="product-list">
|
|
|
- <div v-for="(product, productIndex) in order.products" :key="productIndex" class="product-row">
|
|
|
+ <div
|
|
|
+ v-for="(product, productIndex) in order.expanded ? order.products : order.products.slice(0, 1)"
|
|
|
+ :key="productIndex"
|
|
|
+ class="product-row"
|
|
|
+ >
|
|
|
<div class="product-cell product-info-cell">
|
|
|
<div class="product-image">
|
|
|
<el-image :src="product.image" fit="contain">
|
|
|
@@ -76,13 +89,15 @@
|
|
|
<span class="status-text success">{{ order.statusText }}</span>
|
|
|
</div>
|
|
|
<div class="product-cell action-cell" v-if="productIndex === 0">
|
|
|
- <el-button v-if="activeMainTab === 'pending'" type="primary" link size="small" @click="handleEvaluate(order)">评价</el-button>
|
|
|
- <el-button v-if="activeMainTab === 'followUp'" type="primary" link size="small" @click="handleFollowUpEvaluate(order)">追评</el-button>
|
|
|
- <el-button v-if="activeMainTab === 'evaluated'" type="primary" link size="small" @click="handleViewEvaluation(order)"
|
|
|
- >查看评价</el-button
|
|
|
- >
|
|
|
+ <el-button v-if="activeMainTab === '0'" type="primary" link size="small" @click="handleEvaluate(order)">评价</el-button>
|
|
|
+ <el-button v-if="activeMainTab === '1'" type="primary" link size="small" @click="handleFollowUpEvaluate(order)">追评</el-button>
|
|
|
+ <el-button v-if="activeMainTab === '2'" type="primary" link size="small" @click="handleViewEvaluation(order)">查看评价</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 显示更多商品提示 -->
|
|
|
+ <div v-if="!order.expanded && order.products.length > 1" class="more-products-hint">
|
|
|
+ 该订单共 {{ order.products.length }} 件商品,点击展开查看全部
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-empty v-if="orderList.length === 0" description="暂无订单" />
|
|
|
@@ -125,98 +140,175 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, computed } from 'vue';
|
|
|
+import { ref, reactive, computed, onMounted, getCurrentInstance, toRefs, ComponentInternalInstance, watch } from 'vue';
|
|
|
import { useRouter } from 'vue-router';
|
|
|
import { Search, Edit, ChatDotRound, Document, ArrowRight, Picture, Plus } from '@element-plus/icons-vue';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
import { PageTitle, StatusTabs } from '@/components';
|
|
|
+import { getOrderList, getOrderProducts, cancelOrder, deleteOrder, getEvalutionList, addOrderEvaluation } from '@/api/pc/enterprise/order';
|
|
|
+import type { OrderMain, OrderStatusStats } from '@/api/pc/enterprise/orderTypes';
|
|
|
+import { getDeptTree } from '@/api/pc/organization';
|
|
|
+import { DeptInfo } from '@/api/pc/organization/types';
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+const { order_status, pay_method } = toRefs<any>(proxy?.useDict('order_status', 'pay_method'));
|
|
|
|
|
|
const router = useRouter();
|
|
|
-const activeMainTab = ref('pending');
|
|
|
+const activeMainTab = ref('0');
|
|
|
const evaluateDialogVisible = ref(false);
|
|
|
const evaluateDialogTitle = ref('商品评价');
|
|
|
const evaluateFormRef = ref();
|
|
|
const currentOrder = ref<any>(null);
|
|
|
const currentProduct = ref<any>(null);
|
|
|
|
|
|
+const deptList = ref([]);
|
|
|
+
|
|
|
const mainTabs = [
|
|
|
- { key: 'pending', label: '待评价', icon: Edit },
|
|
|
- { key: 'followUp', label: '待追评', icon: ChatDotRound },
|
|
|
- { key: 'evaluated', label: '已评价', icon: Document }
|
|
|
+ { key: '0', label: '待评价', icon: Edit },
|
|
|
+ { key: '1', label: '待追评', icon: ChatDotRound },
|
|
|
+ { key: '2', label: '已评价', icon: Document }
|
|
|
];
|
|
|
|
|
|
-const queryParams = reactive({ keyword: '', dateRange: null, department: '', status: '', payType: '' });
|
|
|
-const evaluateForm = reactive({ deliverGoods: 5, content: '' });
|
|
|
+const queryParams = reactive({ keyword: '', dateRange: null, department: '', status: '', payType: '', evaluationStatus: '' });
|
|
|
+const evaluateForm = reactive({ deliverGoods: 5, content: '', evaluationType: null });
|
|
|
const evaluateRules = {
|
|
|
deliverGoods: [{ required: true, message: '请选择评分', trigger: 'change' }],
|
|
|
content: [{ required: true, message: '请输入评价内容', trigger: 'blur' }]
|
|
|
};
|
|
|
|
|
|
-const pendingOrders = ref([
|
|
|
- {
|
|
|
- orderTime: '2025/12/05 16:15:06',
|
|
|
- orderNo: '489283929283298392',
|
|
|
- payAmount: '181',
|
|
|
- payMethod: '微信支付',
|
|
|
- statusText: '已完成',
|
|
|
- products: [
|
|
|
- { id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- orderTime: '2025/12/05 16:15:06',
|
|
|
- orderNo: '489283929283298393',
|
|
|
- payAmount: '181',
|
|
|
- payMethod: '微信支付',
|
|
|
- statusText: '已完成',
|
|
|
- products: [
|
|
|
- { id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- orderTime: '2025/12/05 16:15:06',
|
|
|
- orderNo: '489283929283298394',
|
|
|
- payAmount: '181',
|
|
|
- payMethod: '微信支付',
|
|
|
- statusText: '已完成',
|
|
|
- products: [
|
|
|
- { id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }
|
|
|
- ]
|
|
|
- }
|
|
|
-]);
|
|
|
+const pendingOrders = ref([]);
|
|
|
+const followUpOrders = ref([]);
|
|
|
+const evaluatedOrders = ref([]);
|
|
|
+
|
|
|
+const orderList = computed(() => {
|
|
|
+ if (activeMainTab.value === '0') return pendingOrders.value;
|
|
|
+ else if (activeMainTab.value === '1') return followUpOrders.value;
|
|
|
+ else return evaluatedOrders.value;
|
|
|
+});
|
|
|
+
|
|
|
+// 根据订单状态获取状态文本
|
|
|
+const getStatusText = (status: string) => {
|
|
|
+ const statusMap: Record<string, string> = {
|
|
|
+ '0': '待支付',
|
|
|
+ '1': '待确认',
|
|
|
+ '2': '待发货',
|
|
|
+ '3': '部分发货',
|
|
|
+ '4': '发货完成',
|
|
|
+ '5': '已完成',
|
|
|
+ '6': '已关闭',
|
|
|
+ '7': '已取消'
|
|
|
+ };
|
|
|
+ return statusMap[status] || status;
|
|
|
+};
|
|
|
+
|
|
|
+// 获取支付方式文本
|
|
|
+const getPayMethodText = (payType: string) => {
|
|
|
+ const payMethod = pay_method.value?.find((item: any) => item.value === payType);
|
|
|
+ return payMethod ? payMethod.label : payType;
|
|
|
+};
|
|
|
|
|
|
-const followUpOrders = ref([
|
|
|
- {
|
|
|
- orderTime: '2025/12/05 16:15:06',
|
|
|
- orderNo: '489283929283298395',
|
|
|
- payAmount: '181',
|
|
|
- payMethod: '微信支付',
|
|
|
- statusText: '已完成',
|
|
|
- products: [
|
|
|
- { id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }
|
|
|
- ]
|
|
|
+// 加载订单商品
|
|
|
+const loadOrderProducts = async (orderId: number) => {
|
|
|
+ try {
|
|
|
+ const res = await getOrderProducts([orderId]);
|
|
|
+ if (res.code === 200 && res.rows) {
|
|
|
+ return res.rows.map((product: any) => ({
|
|
|
+ id: product.id,
|
|
|
+ name: product.productName || '',
|
|
|
+ spec1: product.productUnit || '',
|
|
|
+ spec2: product.productNo || '',
|
|
|
+ price: product.orderPrice || 0,
|
|
|
+ quantity: product.orderQuantity || 0,
|
|
|
+ image: product.productImage || ''
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ return [];
|
|
|
+ } catch (error) {
|
|
|
+ console.error('加载订单商品失败:', error);
|
|
|
+ return [];
|
|
|
}
|
|
|
-]);
|
|
|
+};
|
|
|
+
|
|
|
+// 获取订单列表
|
|
|
+const getorders = async () => {
|
|
|
+ try {
|
|
|
+ const params: any = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 100
|
|
|
+ };
|
|
|
+
|
|
|
+ if (queryParams.keyword) params.orderNo = queryParams.keyword;
|
|
|
+ if (queryParams.dateRange && queryParams.dateRange.length === 2) {
|
|
|
+ params.beginTime = queryParams.dateRange[0];
|
|
|
+ params.endTime = queryParams.dateRange[1];
|
|
|
+ }
|
|
|
+ if (queryParams.department) params.department = queryParams.department;
|
|
|
+ if (queryParams.status) params.orderStatus = queryParams.status;
|
|
|
+ if (queryParams.payType) params.payType = queryParams.payType;
|
|
|
+
|
|
|
+ // 根据当前标签页设置评价状态
|
|
|
+ params.evaluationStatus = activeMainTab.value;
|
|
|
|
|
|
-const evaluatedOrders = ref([
|
|
|
- {
|
|
|
- orderTime: '2025/12/05 16:15:06',
|
|
|
- orderNo: '489283929283298396',
|
|
|
- payAmount: '181',
|
|
|
- payMethod: '微信支付',
|
|
|
- statusText: '已完成',
|
|
|
- products: [
|
|
|
- { id: 1, name: '清华同方超越E500台式机电脑(i3-6100/4G/1T/19.5寸)', spec1: '规格02', spec2: '规格01', price: '181', quantity: 1, image: '' }
|
|
|
- ]
|
|
|
+ const res = await getEvalutionList(params);
|
|
|
+ if (res.code === 200 && res.rows) {
|
|
|
+ // 转换订单数据并加载商品信息
|
|
|
+ const orders = await Promise.all(
|
|
|
+ res.rows.map(async (order: any) => {
|
|
|
+ const products = await loadOrderProducts(order.orderId);
|
|
|
+ return {
|
|
|
+ orderId: order.orderId || 0,
|
|
|
+ orderTime: order.createTime || '',
|
|
|
+ orderNo: order.orderNo || '',
|
|
|
+ payAmount: order.payableAmount || 0,
|
|
|
+ payMethod: getPayMethodText(order.payType || ''),
|
|
|
+ statusText: getStatusText(order.orderStatus || ''),
|
|
|
+ orderStatus: order.orderStatus || '',
|
|
|
+ products: products,
|
|
|
+ expanded: false, // 默认收起状态
|
|
|
+ evaluationStatus: order.evaluationStatus || '0' // 评价状态
|
|
|
+ };
|
|
|
+ })
|
|
|
+ );
|
|
|
+
|
|
|
+ // 根据当前标签页设置对应的订单列表
|
|
|
+ if (activeMainTab.value === '0') {
|
|
|
+ pendingOrders.value = orders;
|
|
|
+ } else if (activeMainTab.value === '1') {
|
|
|
+ followUpOrders.value = orders;
|
|
|
+ } else {
|
|
|
+ evaluatedOrders.value = orders;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取订单列表失败:', error);
|
|
|
+ ElMessage.error('获取订单列表失败');
|
|
|
}
|
|
|
-]);
|
|
|
+};
|
|
|
|
|
|
-const orderList = computed(() => {
|
|
|
- if (activeMainTab.value === 'pending') return pendingOrders.value;
|
|
|
- else if (activeMainTab.value === 'followUp') return followUpOrders.value;
|
|
|
- else return evaluatedOrders.value;
|
|
|
+// 监听标签页切换,重新获取数据
|
|
|
+watch(activeMainTab, () => {
|
|
|
+ getorders();
|
|
|
});
|
|
|
|
|
|
+// 加载部门树
|
|
|
+const loadDeptTree = async () => {
|
|
|
+ try {
|
|
|
+ const res = await getDeptTree();
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ deptList.value = res.data;
|
|
|
+
|
|
|
+ if (Array.isArray(res.data)) {
|
|
|
+ const treeData = proxy?.handleTree<DeptInfo>(res.data, 'deptId', 'parentId');
|
|
|
+ deptList.value = treeData || res.data;
|
|
|
+ } else {
|
|
|
+ deptList.value = [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取部门树失败:', error);
|
|
|
+ ElMessage.error('获取部门树失败');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
const handleViewDetail = (order: any) => {
|
|
|
router.push(`/order/orderManage/detail/${order.orderId}`);
|
|
|
};
|
|
|
@@ -226,14 +318,16 @@ const handleEvaluate = (order: any) => {
|
|
|
evaluateDialogTitle.value = '商品评价';
|
|
|
evaluateForm.deliverGoods = undefined;
|
|
|
evaluateForm.content = '';
|
|
|
+ evaluateForm.evaluationType = 1;
|
|
|
evaluateDialogVisible.value = true;
|
|
|
};
|
|
|
const handleFollowUpEvaluate = (order: any) => {
|
|
|
currentOrder.value = order;
|
|
|
currentProduct.value = order.products[0];
|
|
|
evaluateDialogTitle.value = '追加评价';
|
|
|
- evaluateForm.deliverGoods = 5;
|
|
|
+ evaluateForm.deliverGoods = undefined;
|
|
|
evaluateForm.content = '';
|
|
|
+ evaluateForm.evaluationType = 2;
|
|
|
evaluateDialogVisible.value = true;
|
|
|
};
|
|
|
const handleViewEvaluation = (order: any) => {
|
|
|
@@ -242,22 +336,58 @@ const handleViewEvaluation = (order: any) => {
|
|
|
const handleSubmitEvaluate = async () => {
|
|
|
const valid = await evaluateFormRef.value?.validate();
|
|
|
if (!valid) return;
|
|
|
- ElMessage.success('评价提交成功');
|
|
|
- evaluateDialogVisible.value = false;
|
|
|
- if (activeMainTab.value === 'pending') {
|
|
|
- const index = pendingOrders.value.findIndex((o) => o.orderNo === currentOrder.value.orderNo);
|
|
|
- if (index > -1) {
|
|
|
- pendingOrders.value.splice(index, 1);
|
|
|
- followUpOrders.value.push(currentOrder.value);
|
|
|
- }
|
|
|
- } else if (activeMainTab.value === 'followUp') {
|
|
|
- const index = followUpOrders.value.findIndex((o) => o.orderNo === currentOrder.value.orderNo);
|
|
|
- if (index > -1) {
|
|
|
- followUpOrders.value.splice(index, 1);
|
|
|
- evaluatedOrders.value.push(currentOrder.value);
|
|
|
+
|
|
|
+ try {
|
|
|
+ const submitData = {
|
|
|
+ orderId: currentOrder.value?.orderId,
|
|
|
+ productId: currentProduct.value?.id,
|
|
|
+ evaluationType: evaluateForm.evaluationType, // 1-评价 2-追评
|
|
|
+ deliverGoods: evaluateForm.deliverGoods,
|
|
|
+ content: evaluateForm.content,
|
|
|
+ // 图片上传暂时留空,后续可以添加
|
|
|
+ images: []
|
|
|
+ };
|
|
|
+
|
|
|
+ const res = await addOrderEvaluation(submitData);
|
|
|
+ if (res.code === 200) {
|
|
|
+ ElMessage.success('评价提交成功');
|
|
|
+ evaluateDialogVisible.value = false;
|
|
|
+
|
|
|
+ // 重新获取订单列表
|
|
|
+ await getorders();
|
|
|
+
|
|
|
+ // 如果需要手动更新本地数据(可选)
|
|
|
+ if (activeMainTab.value === '0') {
|
|
|
+ const index = pendingOrders.value.findIndex((o) => o.orderId === currentOrder.value.orderId);
|
|
|
+ if (index > -1) {
|
|
|
+ const order = pendingOrders.value.splice(index, 1)[0];
|
|
|
+ if (evaluateForm.evaluationType === '1') {
|
|
|
+ followUpOrders.value.push(order);
|
|
|
+ } else {
|
|
|
+ evaluatedOrders.value.push(order);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (activeMainTab.value === '1') {
|
|
|
+ const index = followUpOrders.value.findIndex((o) => o.orderId === currentOrder.value.orderId);
|
|
|
+ if (index > -1) {
|
|
|
+ const order = followUpOrders.value.splice(index, 1)[0];
|
|
|
+ evaluatedOrders.value.push(order);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ ElMessage.error(res.msg || '评价提交失败');
|
|
|
}
|
|
|
+ } catch (error) {
|
|
|
+ console.error('评价提交失败:', error);
|
|
|
+ ElMessage.error('评价提交失败');
|
|
|
}
|
|
|
};
|
|
|
+
|
|
|
+// 页面加载时获取订单列表
|
|
|
+onMounted(() => {
|
|
|
+ loadDeptTree();
|
|
|
+ getorders();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@@ -300,8 +430,12 @@ const handleSubmitEvaluate = async () => {
|
|
|
.order-time {
|
|
|
color: #333;
|
|
|
}
|
|
|
- .detail-btn {
|
|
|
+ .expand-btn {
|
|
|
margin-left: auto;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .detail-btn {
|
|
|
+ margin-left: 0;
|
|
|
}
|
|
|
}
|
|
|
.product-list {
|
|
|
@@ -404,6 +538,14 @@ const handleSubmitEvaluate = async () => {
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
+ .more-products-hint {
|
|
|
+ padding: 10px 15px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ text-align: center;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.evaluate-product {
|