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

javascript 复制代码

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

javascript 复制代码

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

javascript 复制代码

<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,具体代码如下：

javascript 复制代码

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