|
|
|
|
@ -1,218 +1,237 @@
|
|
|
|
|
<script setup>
|
|
|
|
|
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
import {
|
|
|
|
|
expressListService,
|
|
|
|
|
expressAddService,
|
|
|
|
|
expressUpdateService,
|
|
|
|
|
expressDeleteService
|
|
|
|
|
} from '@/api/express';
|
|
|
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
|
|
|
|
|
|
|
// 快递列表数据模型
|
|
|
|
|
const expressList = ref([]);
|
|
|
|
|
const visibleDrawer = ref(false);
|
|
|
|
|
const drawerTitle = ref('');
|
|
|
|
|
const expressModel = ref({
|
|
|
|
|
expressid: '',
|
|
|
|
|
sename: '',
|
|
|
|
|
sephone: '',
|
|
|
|
|
seaddress: '',
|
|
|
|
|
rename: '',
|
|
|
|
|
rephone: '',
|
|
|
|
|
readdress: '',
|
|
|
|
|
issigned: '',
|
|
|
|
|
signtime: '',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 分页条数据模型
|
|
|
|
|
const pageNum = ref(1); // 当前页
|
|
|
|
|
const total = ref(20); // 总条数
|
|
|
|
|
const pageSize = ref(3); // 每页条数
|
|
|
|
|
|
|
|
|
|
const onSizeChange = (size) => {
|
|
|
|
|
pageSize.value = size;
|
|
|
|
|
fetchExpressList();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onCurrentChange = (num) => {
|
|
|
|
|
pageNum.value = num;
|
|
|
|
|
fetchExpressList();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const fetchExpressList = async () => {
|
|
|
|
|
const params = {
|
|
|
|
|
pageNum: pageNum.value,
|
|
|
|
|
pageSize: pageSize.value,
|
|
|
|
|
// 以下参数需要与ExpressMapper接口中的list方法参数一致
|
|
|
|
|
id: null, // 假设您希望根据用户ID查询，如果没有这个需求可以删除
|
|
|
|
|
sename: '',
|
|
|
|
|
sephone: '',
|
|
|
|
|
seaddress: '',
|
|
|
|
|
rename: '',
|
|
|
|
|
rephone: '',
|
|
|
|
|
readdress: '',
|
|
|
|
|
issigned: '',
|
|
|
|
|
signtime: '',
|
|
|
|
|
};
|
|
|
|
|
try {
|
|
|
|
|
const result = await expressListService(params);
|
|
|
|
|
expressList.value = result.data.items;
|
|
|
|
|
total.value = result.data.total;
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('获取快递列表失败:', error);
|
|
|
|
|
ElMessage.error('获取快递列表失败');
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
fetchExpressList();
|
|
|
|
|
|
|
|
|
|
const showAddDialog = (title) => {
|
|
|
|
|
clearData();
|
|
|
|
|
drawerTitle.value = title;
|
|
|
|
|
visibleDrawer.value = true;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const clearData = () => {
|
|
|
|
|
expressModel.value = {
|
|
|
|
|
expressid: '',
|
|
|
|
|
sename: '',
|
|
|
|
|
sephone: '',
|
|
|
|
|
seaddress: '',
|
|
|
|
|
rename: '',
|
|
|
|
|
rephone: '',
|
|
|
|
|
readdress: '',
|
|
|
|
|
issigned: '',
|
|
|
|
|
signtime: '',
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const addExpress = async () => {
|
|
|
|
|
await expressAddService(expressModel.value);
|
|
|
|
|
ElMessage.success('添加成功');
|
|
|
|
|
visibleDrawer.value = false;
|
|
|
|
|
await fetchExpressList();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const showEditDialog = (row, title) => {
|
|
|
|
|
visibleDrawer.value = true;
|
|
|
|
|
drawerTitle.value = title;
|
|
|
|
|
expressModel.value = { ...row };
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const updateExpress = async () => {
|
|
|
|
|
await expressUpdateService(expressModel.value);
|
|
|
|
|
ElMessage.success("更新成功");
|
|
|
|
|
visibleDrawer.value = false;
|
|
|
|
|
await fetchExpressList();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const deleteExpress = (row) => {
|
|
|
|
|
ElMessageBox.confirm(
|
|
|
|
|
'你确认要删除该快递信息吗？',
|
|
|
|
|
'温馨提示',
|
|
|
|
|
{
|
|
|
|
|
confirmButtonText: '确认',
|
|
|
|
|
cancelButtonText: '取消',
|
|
|
|
|
type: 'warning'
|
|
|
|
|
}
|
|
|
|
|
).then(async () => {
|
|
|
|
|
await expressDeleteService(row.id);
|
|
|
|
|
ElMessage.success("删除成功");
|
|
|
|
|
await fetchExpressList();
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<el-card class="page-container">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="header">
|
|
|
|
|
<span>快递管理</span>
|
|
|
|
|
<div class="extra">
|
|
|
|
|
<el-button type="primary" @click="showAddDialog('添加快递')">添加快递</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<el-table :data="expressList" style="width: 100%">
|
|
|
|
|
<el-table-column label="订单号" prop="expressid"></el-table-column>
|
|
|
|
|
<el-table-column label="发件人" prop="sename"></el-table-column>
|
|
|
|
|
<el-table-column label="发件人电话" prop="sephone"></el-table-column>
|
|
|
|
|
<el-table-column label="发件人地址" prop="seaddress"></el-table-column>
|
|
|
|
|
<el-table-column label="收件人" prop="rename"></el-table-column>
|
|
|
|
|
<el-table-column label="收件人电话" prop="rephone"></el-table-column>
|
|
|
|
|
<el-table-column label="收件人地址" prop="readdress"></el-table-column>
|
|
|
|
|
<el-table-column label="签收时间" prop="signtime"></el-table-column>
|
|
|
|
|
<el-table-column label="状态" prop="issigned"></el-table-column>
|
|
|
|
|
<el-table-column label="操作" width="100">
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
<el-button :icon="Edit" circle plain type="primary" @click="showEditDialog(row,'编辑快递')"></el-button>
|
|
|
|
|
<el-button :icon="Delete" circle plain type="danger" @click="deleteExpress(row)"></el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<template #empty>
|
|
|
|
|
<el-empty description="没有数据" />
|
|
|
|
|
</template>
|
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
<el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
|
|
|
|
|
layout="jumper, total, sizes, prev, pager, next" background :total="total"
|
|
|
|
|
@size-change="onSizeChange"
|
|
|
|
|
@current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<!-- 抽屉 -->
|
|
|
|
|
<el-drawer v-model="visibleDrawer" :title="drawerTitle" direction="rtl" size="50%">
|
|
|
|
|
<el-form :model="expressModel" label-width="100px">
|
|
|
|
|
<el-form-item label="订单号">
|
|
|
|
|
<el-input v-model="expressModel.expressid" placeholder="请输入订单号"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="发件人">
|
|
|
|
|
<el-input v-model="expressModel.sename" placeholder="请输入发件人"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="发件人电话">
|
|
|
|
|
<el-input v-model="expressModel.sephone" placeholder="请输入发件人电话"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="发件人地址">
|
|
|
|
|
<el-input v-model="expressModel.seaddress" placeholder="请输入发件人地址"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="收件人">
|
|
|
|
|
<el-input v-model="expressModel.rename" placeholder="请输入收件人"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="收件人电话">
|
|
|
|
|
<el-input v-model="expressModel.rephone" placeholder="请输入收件人电话"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="收件人地址">
|
|
|
|
|
<el-input v-model="expressModel.readdress" placeholder="请输入收件人地址"></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="签收时间">
|
|
|
|
|
<el-date-picker v-model="expressModel.signtime" type="date" placeholder="请选择签收时间"></el-date-picker>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="状态">
|
|
|
|
|
<el-select v-model="expressModel.issigned" placeholder="请选择状态">
|
|
|
|
|
<el-option label="未签收" value="0"></el-option>
|
|
|
|
|
<el-option label="已签收" value="1"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="expressModel.id ? updateExpress() : addExpress()">
|
|
|
|
|
{{ expressModel.id ? '更新' : '添加' }}
|
|
|
|
|
</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-drawer>
|
|
|
|
|
<el-row class="page">
|
|
|
|
|
<el-row class="block-view" v-for="(item,index) in expressList">
|
|
|
|
|
<el-row class="top">
|
|
|
|
|
<el-row>运单号：{{item.express_no}}</el-row>
|
|
|
|
|
<el-row class="top-time">签收时间: {{item.s_datetime}}</el-row>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row class="express-view">
|
|
|
|
|
<el-row class="express-no-view">
|
|
|
|
|
<el-text class="city">{{item.senderCity}}</el-text>
|
|
|
|
|
<el-text class="user">{{item.senderName}}</el-text>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row class="express-no-view">
|
|
|
|
|
<el-image class="arrow" src="/arrow.png"></el-image>
|
|
|
|
|
<el-text class="sign">已签收</el-text>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row class="express-no-view">
|
|
|
|
|
<el-text class="city">{{item.receiveCity}}</el-text>
|
|
|
|
|
<el-text class="user">{{item.receiveName}}</el-text>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row class="express-icon-view">
|
|
|
|
|
<el-icon @click="deleteByIndex(index)">
|
|
|
|
|
<Delete />
|
|
|
|
|
</el-icon>
|
|
|
|
|
<el-icon @click="modify(item,index)">
|
|
|
|
|
<Edit />
|
|
|
|
|
</el-icon>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-row class="line-view"></el-row>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<el-dialog v-model="dialogVisible" title="提示" width="500">
|
|
|
|
|
<span>确定删除此快递信息吗？</span>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<div class="dialog-footer">
|
|
|
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="deleteByIndexConfirm()">
|
|
|
|
|
确定
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<el-dialog v-model="dialogFormVisible" title="编辑快递表单" width="500">
|
|
|
|
|
<el-form :model="form">
|
|
|
|
|
<el-form-item label="寄件城市" :label-width="formLabelWidth">
|
|
|
|
|
<el-input v-model="form.senderCity" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="寄件人" :label-width="formLabelWidth">
|
|
|
|
|
<el-input v-model="form.senderName" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="收件城市" :label-width="formLabelWidth">
|
|
|
|
|
<el-input v-model="form.receiveCity" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="收件人" :label-width="formLabelWidth">
|
|
|
|
|
<el-input v-model="form.receiveName" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<div class="dialog-footer">
|
|
|
|
|
<el-button @click="dialogFormVisible = false">取消</el-button>
|
|
|
|
|
<el-button type="primary" @click="modifyConfirm()">
|
|
|
|
|
确定
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
</el-row>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.page-container {
|
|
|
|
|
min-height: 100%;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
<script setup>
|
|
|
|
|
import {
|
|
|
|
|
Delete,
|
|
|
|
|
Edit
|
|
|
|
|
} from '@element-plus/icons-vue'
|
|
|
|
|
import {
|
|
|
|
|
reactive,
|
|
|
|
|
ref
|
|
|
|
|
} from 'vue';
|
|
|
|
|
import {
|
|
|
|
|
ElMessageBox
|
|
|
|
|
} from 'element-plus';
|
|
|
|
|
|
|
|
|
|
const expressList = reactive([{
|
|
|
|
|
"express_no": "SF123456789",
|
|
|
|
|
"senderCity": "深圳市",
|
|
|
|
|
"senderName": "叶先生1",
|
|
|
|
|
"receiveCity": "福州市",
|
|
|
|
|
"receiveName": "林先生",
|
|
|
|
|
"s_datetime": "2024-11-11 11:31:00"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"express_no": "SF123456789",
|
|
|
|
|
"senderCity": "深圳市",
|
|
|
|
|
"senderName": "叶先生2",
|
|
|
|
|
"receiveCity": "福州市",
|
|
|
|
|
"receiveName": "林先生",
|
|
|
|
|
"s_datetime": "2024-11-11 11:31:00"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"express_no": "SF123456789",
|
|
|
|
|
"senderCity": "深圳市",
|
|
|
|
|
"senderName": "叶先生3",
|
|
|
|
|
"receiveCity": "福州市",
|
|
|
|
|
"receiveName": "林先生",
|
|
|
|
|
"s_datetime": "2024-11-11 11:31:00"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"express_no": "SF123456789",
|
|
|
|
|
"senderCity": "深圳市",
|
|
|
|
|
"senderName": "叶先生4",
|
|
|
|
|
"receiveCity": "福州市",
|
|
|
|
|
"receiveName": "林先生",
|
|
|
|
|
"s_datetime": "2024-11-11 11:31:00"
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
const dialogVisible = ref(false)
|
|
|
|
|
let formIndex = -1
|
|
|
|
|
const deleteByIndex = index => {
|
|
|
|
|
dialogVisible.value = true
|
|
|
|
|
formIndex = index
|
|
|
|
|
}
|
|
|
|
|
const deleteByIndexConfirm = () => {
|
|
|
|
|
dialogVisible.value = false
|
|
|
|
|
expressList.splice(formIndex, 1)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const dialogFormVisible = ref(false)
|
|
|
|
|
const formLabelWidth = '140px'
|
|
|
|
|
const form = reactive({
|
|
|
|
|
"express_no": "",
|
|
|
|
|
"senderCity": "",
|
|
|
|
|
"senderName": "",
|
|
|
|
|
"receiveCity": "",
|
|
|
|
|
"receiveName": "",
|
|
|
|
|
"s_datetime": ""
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const modify = (item,index)=>{
|
|
|
|
|
dialogFormVisible.value = true
|
|
|
|
|
form.senderCity = item.senderCity
|
|
|
|
|
form.senderName = item.senderName
|
|
|
|
|
form.receiveCity = item.receiveCity
|
|
|
|
|
form.receiveName = item.receiveName
|
|
|
|
|
formIndex = index
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const modifyConfirm = ()=>{
|
|
|
|
|
dialogFormVisible.value = false
|
|
|
|
|
const item = expressList[formIndex]
|
|
|
|
|
item.senderCity = form.senderCity
|
|
|
|
|
item.senderName = form.senderName
|
|
|
|
|
item.receiveCity = form.receiveCity
|
|
|
|
|
item.receiveName = form.receiveName
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.page {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background-color: white;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.block-view {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
color: gray;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top-time {
|
|
|
|
|
margin-left: 180px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.express-view {
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.express-no-view {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.city {
|
|
|
|
|
font-size: large;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
font-size: small;
|
|
|
|
|
color: gray;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrow {
|
|
|
|
|
width: 40px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sign {
|
|
|
|
|
font-size: small;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
color: red;
|
|
|
|
|
font-weight: 100;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.express-icon-view {
|
|
|
|
|
width: 10%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line-view {
|
|
|
|
|
height: 0.5px;
|
|
|
|
|
width: 95%;
|
|
|
|
|
background-color: lightgray;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
