Vue3+Elementplus物流订单信息跟踪管理
一.功能要求
某电商公司为了方便客服查看用户的订单信息，需开发一个物流订单跟踪系统。要求本系统实现以下功能：
1.启动程序后进入主界面，显示所有订单信息，效果图所示：
2单击【新增】，能够添加订单信息。
【确定】 表格新增一个订单信息
3.【查看】能够查看选中行订单详情。
4.【编辑】能够修改选中行订单信息。
5.【删除】能够删除选中的订单信息。
二.实现的步骤
①打开命令提示符，切换到D:\vue目录，在该目录下执行如下命令，创建项目。
yarn create vite OrderInfo --template vue
项目创建完成后，执行如下命令进入项目目录，启动项目。
cd OrderInfo
yarn
yarn dev
项目启动后，可以使用URL地址http://127.0.0.1:5173/进行访问。
②使用VS Code编辑器打开D:\vue\OrderInfo目录。
③ 将src\style.css文件中的样式代码全部删除，从而避免项目创建时自带的样式代码影响本案例的实现效果。
④ 安装elementplus
npm install element-plus --save
安装sass
npm install sass --save-dev
⑤在项目中新建index.vue文件，具体代码如下。
<template>
<div class="box">
<el-button class="new_btn" type="primary" @click="handleNew">新增</el-button>
<el-table :data="orderInfo" border style="width: 110%">
<el-table-column prop="id" label="编号" />
<el-table-column prop="name" label="商品名称" />
<el-table-column prop="price" label="价格" />
<el-table-column prop="orderID" label="所属订单号" />
<el-table-column prop="descinfo" label="描述" />
<el-table-column fixed="right" label="操作">
<template #default="{ row }">
<el-button type="text" size="small" @click="handleDetail(row)">查看</el-button>
<el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" size="small" @click="handleDel(row)" >删除</el-button >
</template>
</el-table-column>
</el-table>
<!-- 新建/编辑弹框 -->
<Dialog
v-if="dialogShow"
v-model:dialogShow="dialogShow"
:rowInfo="rowInfo"
:title="title"
:arrayNum="orderInfo.length"
@addRow="addRow"
@editRow="editRow"
/>
<!-- 详情弹窗 -->
<Detail v-if="detailShow" :rowInfo="rowInfo" @closeDetail="closeDetail" />
</div>
</template>
<script>
import { reactive, ref, toRefs } from "vue";
import { ElMessageBox } from "element-plus";
import Dialog from "./dialog.vue";
import Detail from "./detail.vue";
export default {
components: { Dialog, Detail },
setup() {
const data = reactive({
dialogShow: false, // 新增/编辑弹框
detailShow: false, // 详情弹窗
rowInfo: {}, // 新增/编辑的数据
title: "", // 是新建还是修改
orderInfo: [
{
id: 1,
name: "iphones Max",
price: 8999,
orderID:5325781,
descinfo:"白云的订单",
},
{
id: 2,
name: "小米10",
price: 3655,
orderID:5325782,
descinfo: "星星的订单",
},
{
id:3,
name: "华为荣耀",
price: 6655,
orderID:5325783,
descinfo: "月亮的订单",
},
],
});
const method = reactive({
handleNew() {
data.title = "新增";
data.rowInfo = {};
data.dialogShow = true;
},
handleDetail(val) {
data.detailShow = true;
data.rowInfo = val;
},
handleEdit(val) {
data.title = "修改";
data.dialogShow = true;
data.rowInfo = val;
},
handleDel(val) {
ElMessageBox.confirm("你确定删除这个学生的信息吗?", "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
method.handleSure(val);
})
.catch(() => {
// catch error
});
},
handleSure(val) {
this.dialogVisible = false;
const index = data.orderInfo.findIndex((item) => item.id === val.id);
data.orderInfo.splice(index, 1);
},
// 添加行
addRow(val) {
data.orderInfo.push(val);
},
// 编辑行
editRow(val) {
let index = data.orderInfo.findIndex(
(item, index) => item.id === val.id
);
data.orderInfo.splice(index, 1, val);
},
// 关闭详情弹窗
closeDetail() {
data.detailShow = false;
},
});
return { ...toRefs(data), ...method };
},
};
</script>
<style lang="scss" scoped>
.box {
padding: 20px;
margin:20px;
.new_btn {
margin-bottom: 10px;
}
::v-deep .el-table__cell {
text-align: center;
}
}
</style>⑥在项目中新建dialog.vue文件，具体代码如下。
<template>
<el-dialog :model-value="true" :title="title" @close="handleClose">
<el-form
ref="ruleFormRef"
:model="formData"
:rules="rules"
label-width="120px"
class="demo-ruleForm"
:size="formSize"
>
<el-form-item label="商品名称：" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="价格：" prop="price">
<el-input v-model="formData.price"></el-input>
</el-form-item>
<el-form-item label="所属订单号：" prop="orderID">
<el-input v-model="formData.orderID"></el-input>
</el-form-item>
<el-form-item label="描述：" prop="descinfo">
<el-input v-model="formData.descinfo"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm()">确定</el-button>
<el-button @click="resetForm()">重置</el-button>
</el-form-item>
</el-form>
</el-dialog>
</template>
<script>
import { reactive, toRefs, onMounted} from "vue";
export default {
props: {
title: {
type: String,
default: "",
},
dialogShow: {
type: Boolean,
default: false,
},
rowInfo: {
type: Object,
default() {
return {};
},
},
arrayNum: {
type: Number,
default: 0,
},
},
setup(props, { emit }) {
const data = reactive({
dialogFlag: false,
formData: {},
});
const method = reactive({
// 关闭弹窗
handleClose() {
emit("update:dialogShow", false);
},
// 重置
resetForm() {
data.formData = Object.assign({}, props.rowInfo);
},
// 提交表单内容
submitForm() {
method.handleClose();
if (props.rowInfo.name) {
// 修改
emit("editRow", data.formData);
} else {
// 新增
data.formData["id"] = props.arrayNum + 1;
emit("addRow", data.formData);
}
},
});
onMounted(() => {
data.formData = Object.assign({}, props.rowInfo);
data.dialogFlag = props.rowInfo;
});
return { ...toRefs(data), ...method };
},
};
</script>
<style lang="scss" scoped>
</style>⑦ 在项目中新建detail.vue文件，具体代码如下。
<template>
<el-dialog :model-value="true" title="详情" @close="handleClose">
<p>
<label for="name">商品名称：</label>
<span id="name"> {
{ orderInfo.name }} </span>
</p>
<p>
<label for="price">价格：</label>
<span id="price"> {
{ orderInfo.price }} </span>
</p>
<p>
<label for="orderID">所属订单号：</label>
<span id="orderID"> {
{ orderInfo.orderID }} </span>
</p>
<p>
<label for="descinfo">描述：</label>
<span id="descinfo"> {
{ orderInfo.descinfo }} </span>
</p>
</el-dialog>
</template>
<script>
import { computed, toRefs } from "vue";
export default {
props: {
rowInfo: {
type: Object,
default() {
return {};
},
},
},
emit: ["closeDetail"],
setup(props, { emit }) {
const data = {
orderInfo: computed(() => props.rowInfo).value,
};
const method = {
handleClose() {
emit("closeDetail");
},
};
return { ...toRefs(data), ...method };
},
};
</script>
<style lang="less" scoped>
</style>⑧修改main.js,具体代码如下：
-
import { createApp } from "vue" // 导入 ElementPlus 和 样式文件 import ElementPlus from "element-plus" import "element-plus/dist/index.css" import App from "./index.vue" const app = createApp(App) // 使用 ElementPlus app.use(ElementPlus) app.mount("#app")
三、运行项目
yarn dev