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文件，具体代码如下。

1. <template>
3.   <div class="box">
5.     <el-button class="new_btn" type="primary" @click="handleNew">新增</el-button>
7.     <el-table :data="orderInfo" border style="width: 110%">
9.       <el-table-column prop="id" label="编号" />
11.         <el-table-column prop="name" label="商品名称" />
13.         <el-table-column prop="price" label="价格" />
15.         <el-table-column prop="orderID" label="所属订单号" />
17.         <el-table-column prop="descinfo" label="描述" />
19.       <el-table-column fixed="right" label="操作">
21.         <template #default="{ row }">
23.           <el-button type="text" size="small" @click="handleDetail(row)">查看</el-button>
25.           <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
27.           <el-button type="text" size="small" @click="handleDel(row)" >删除</el-button >
29.         </template>
31.       </el-table-column>
33.     </el-table>
35.     <!-- 新建/编辑弹框 -->
37.     <Dialog
39.       v-if="dialogShow"
41.       v-model:dialogShow="dialogShow"
43.       :rowInfo="rowInfo"
45.       :title="title"
47.       :arrayNum="orderInfo.length"
49.       @addRow="addRow"
51.       @editRow="editRow"
53.     />
55.     <!-- 详情弹窗 -->
57.     <Detail v-if="detailShow" :rowInfo="rowInfo" @closeDetail="closeDetail" />
59.   </div>
61. </template>
63. <script>
65. import { reactive, ref, toRefs } from "vue";
67. import { ElMessageBox } from "element-plus";
69. import Dialog from "./dialog.vue";
71. import Detail from "./detail.vue";
73. export default {
75.   components: { Dialog, Detail },
77.   setup() {
79.     const data = reactive({
81.       dialogShow: false, // 新增/编辑弹框
83.       detailShow: false, // 详情弹窗
85.       rowInfo: {}, // 新增/编辑的数据
87.       title: "", // 是新建还是修改
89.       orderInfo: [
91.         {
93.           id: 1,
95.           name: "iphones Max",
97.           price: 8999,
99.           orderID:5325781,
101.           descinfo:"白云的订单",
103.         },
105.         {
107.           id: 2,
109.             name: "小米10",
111.             price: 3655,
113.             orderID:5325782,
115.             descinfo: "星星的订单",
117.         },
119.         {
121.             id:3,
123.             name: "华为荣耀",
125.             price: 6655,
127.             orderID:5325783,
129.             descinfo: "月亮的订单",
131.           },
133.       ],
135.     });
137.     const method = reactive({
139.       handleNew() {
141.         data.title = "新增";
143.         data.rowInfo = {};
145.         data.dialogShow = true;
147.       },
149.       handleDetail(val) {
151.         data.detailShow = true;
153.         data.rowInfo = val;
155.       },
157.       handleEdit(val) {
159.         data.title = "修改";
161.         data.dialogShow = true;
163.         data.rowInfo = val;
165.       },
167.       handleDel(val) {
169.         ElMessageBox.confirm("你确定删除这个学生的信息吗?", "提示", {
171.           confirmButtonText: "确认",
173.           cancelButtonText: "取消",
175.           type: "warning",
177.         })
179.           .then(() => {
181.             method.handleSure(val);
183.           })
185.           .catch(() => {
187.             // catch error
189.           });
191.       },
193.       handleSure(val) {
195.         this.dialogVisible = false;
197.         const index = data.orderInfo.findIndex((item) => item.id === val.id);
199.         data.orderInfo.splice(index, 1);
201.       },
203.       // 添加行
205.       addRow(val) {
207.         data.orderInfo.push(val);
209.       },
211.       // 编辑行
213.       editRow(val) {
215.         let index = data.orderInfo.findIndex(
217.           (item, index) => item.id === val.id
219.         );
221.         data.orderInfo.splice(index, 1, val);
223.       },
225.       // 关闭详情弹窗
227.       closeDetail() {
229.         data.detailShow = false;
231.       },
233.     });
235.     return { ...toRefs(data), ...method };
237.   },
239. };
241. </script>
243. <style lang="scss" scoped>
245. .box {
247.   padding: 20px;
249.   margin:20px;
251.   .new_btn {
253.     margin-bottom: 10px;
255.   }
257.   ::v-deep .el-table__cell {
259.     text-align: center;
261.   }
263. }
265. </style>

复制代码

⑥在项目中新建dialog.vue文件，具体代码如下。

1. <template>
3.     <el-dialog :model-value="true" :title="title" @close="handleClose">
5.       <el-form
7.         ref="ruleFormRef"
9.         :model="formData"
11.         :rules="rules"
13.         label-width="120px"
15.         class="demo-ruleForm"
17.         :size="formSize"
19.       >
21.         <el-form-item label="商品名称：" prop="name">
23.           <el-input v-model="formData.name"></el-input>
25.         </el-form-item>
27.         <el-form-item label="价格：" prop="price">
29.           <el-input v-model="formData.price"></el-input>
31.         </el-form-item>
33.         <el-form-item label="所属订单号：" prop="orderID">
35.           <el-input v-model="formData.orderID"></el-input>
37.         </el-form-item>
39.         <el-form-item label="描述：" prop="descinfo">
41.           <el-input v-model="formData.descinfo"></el-input>
43.         </el-form-item>
45.         <el-form-item>
47.           <el-button type="primary" @click="submitForm()">确定</el-button>
49.           <el-button @click="resetForm()">重置</el-button>
51.         </el-form-item>
53.       </el-form>
55.     </el-dialog>
57.   </template> 
59.   <script>
61.   import { reactive, toRefs,  onMounted} from "vue";
63.   export default {
65.     props: {
67.       title: {
69.         type: String,
71.         default: "",
73.       },
75.       dialogShow: {
77.         type: Boolean,
79.         default: false,
81.       },
83.       rowInfo: {
85.         type: Object,
87.         default() {
89.           return {};
91.         },
93.       },
95.       arrayNum: {
97.         type: Number,
99.         default: 0,
101.       },
103.     },
105.     setup(props, { emit }) {
107.       const data = reactive({
109.         dialogFlag: false,
111.         formData: {},
113.       });
115.       const method = reactive({
117.         // 关闭弹窗
119.         handleClose() {
121.           emit("update:dialogShow", false);
123.         },
125.         // 重置
127.         resetForm() {
129.           data.formData = Object.assign({}, props.rowInfo);
131.         },
133.         // 提交表单内容
135.         submitForm() {
137.           method.handleClose();
139.           if (props.rowInfo.name) {
141.             // 修改
143.             emit("editRow", data.formData);
145.           } else {
147.             // 新增
149.             data.formData["id"] = props.arrayNum + 1;
151.             emit("addRow", data.formData);
153.           }
155.         },
157.       });
159.       onMounted(() => {
161.         data.formData = Object.assign({}, props.rowInfo);
163.         data.dialogFlag = props.rowInfo;
165.       });
167.       return { ...toRefs(data), ...method };
169.     },
171.   };
173.   </script>
177.   <style lang="scss" scoped>
179.   </style>

复制代码

⑦ 在项目中新建detail.vue文件，具体代码如下。

1. <template>
3.     <el-dialog :model-value="true" title="详情" @close="handleClose">
5.       <p>
7.         <label for="name">商品名称：</label>
9.         <span id="name"> {
10.   
11.   { orderInfo.name }} </span>
13.       </p>
15.       <p>
17.         <label for="price">价格：</label>
19.         <span id="price"> {
20.   
21.   { orderInfo.price }} </span>
23.       </p>
25.       <p>
27.         <label for="orderID">所属订单号：</label>
29.         <span id="orderID"> {
30.   
31.   { orderInfo.orderID }} </span>
33.       </p>
35.       <p>
37.         <label for="descinfo">描述：</label>
39.         <span id="descinfo"> {
40.   
41.   { orderInfo.descinfo }} </span>
43.       </p>
45.     </el-dialog>
47.   </template> 
49.   <script>
51.   import { computed, toRefs } from "vue";
53.   export default {
55.     props: {
57.       rowInfo: {
59.         type: Object,
61.         default() {
63.           return {};
65.         },
67.       },
69.     },
71.     emit: ["closeDetail"],
73.     setup(props, { emit }) {
75.       const data = {
77.         orderInfo: computed(() => props.rowInfo).value,
79.       };
81.       const method = {
83.         handleClose() {
85.           emit("closeDetail");
87.         },
89.       };
91.       return { ...toRefs(data), ...method };
93.     },
95.   };
97.   </script>
101.   <style lang="less" scoped>
103.   </style>

复制代码

⑧修改main.js,具体代码如下：

• 1. import { createApp } from "vue"
  3. // 导入 ElementPlus 和 样式文件
  5. import ElementPlus from "element-plus"
  7. import "element-plus/dist/index.css"
  9. import App from "./index.vue"
  11. const app = createApp(App)
  13. // 使用 ElementPlus
  15. app.use(ElementPlus)
  17. app.mount("#app")

  复制代码

三、运行项目

yarn dev



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。