苍穹外卖前端开发实战：Vue + TypeScript + ElementUI

封装 API 请求：在 src/api/employee.ts 中定义 getEmployeeList 方法，用于发送 Ajax 请求获取分页数据。

// 分页查询
export const getEmployeeList = (params: any) => {
  return request({ url: '/employee/page', method: 'get', params })
}

导入 API 并定义模型数据：在员工管理组件中导入 getEmployeeList，并在 data() 中定义分页相关的模型数据。

import { getEmployeeList } from '@/api/employee'
export default {
  data() {
    return {
      name: '',       // 员工姓名
      page: 1,        // 页码
      pageSize: 10,   // 每页记录数
      total: 0,       // 总记录数
      records: []     // 当前页要展示的数据集合
    }
  }
}

双向绑定输入框：将 name 属性与员工姓名输入框进行双向绑定。

<el-input v-model="name" placeholder="请输入员工姓名" clearable />

完善查询方法：在 pageQuery 方法中调用 getEmployeeList，处理返回数据。

pageQuery() {
  const params = { page: this.page, pageSize: this.pageSize, name: this.name }
  getEmployeeList(params)
    .then((res) => {
      if (res.data.code === 1) {
        this.records = res.data.data.records
        this.total = res.data.data.total
      }
    })
    .catch((err) => {
      this.$message.error('请求出错了：' + err.message)
    })
}

自动加载数据

利用 Vue 的 created 生命周期钩子，在组件加载后自动发送 Ajax 请求，查询第一页数据。

created() {
  this.pageQuery()
}

表格展示

使用 ElementUI 的 Table 组件展示后端返回的员工数据。注意状态列的样式处理。

<el-table :data="records" stripe>
  <el-table-column prop="name" label="员工姓名" />
  <el-table-column prop="username" label="账号" />
  <el-table-column prop="phone" label="手机号" />
  <el-table-column prop="status" label="账号状态">
    <template slot-scope="scope">
      <span :class="scope.row.status === 0 ? 'stopUse' : 'activeUse'">
        {{ scope.row.status === 0 ? '禁用' : '启用' }}
      </span>
    </template>
  </el-table-column>
  <el-table-column prop="updateTime" label="最后操作时间" />
  <el-table-column prop="操作" label="操作">
    <template slot-scope="scope">
      <el-button size="small" type="text">修改</el-button>
      <el-button size="small" type="text">
        {{ scope.row.status === 1 ? '禁用' : '启用' }}
      </el-button>
      <el-button size="small" type="text">删除</el-button>
    </template>
  </el-table-column>
</el-table>

分页条实现

使用 Pagination 组件实现翻页效果。监听 size-change 和 current-change 事件以刷新数据。

<el-pagination
  :page-sizes="[10, 20, 30, 40, 50]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>

事件处理函数：

// pageSize 改变时触发
handleSizeChange(pageSize) {
  this.pageSize = pageSize
  this.pageQuery()
},
// currentPage 改变时触发
handleCurrentChange(currentPage) {
  this.page = currentPage
  this.pageQuery()
}

启用禁用员工账号

功能需求

支持在列表中直接切换员工账号状态，管理员账号除外。

按钮交互

为表格中的'启用/禁用'按钮绑定 handleStartOrStop 事件，并根据当前状态动态显示文字。

<el-button type="text" size="small" @click="handleStartOrStop(scope.row)">
  {{ scope.row.status == '1' ? '禁用' : '启用' }}
</el-button>

状态变更逻辑

在 methods 中定义 handleStartOrStop 方法，结合 ElementUI 的确认弹窗 confirm 确保操作安全。

handleStartOrStop(row) {
  // 管理员保护逻辑
  if (row.username === 'admin') {
    this.$message.error('admin 为管理员账号，不能更改账号状态！')
    return
  }
  this.$confirm('确认调整该账号的状态？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    enableOrDisableEmployee({ id: row.id, status: !row.status ? 1 : 0 })
      .then((res) => {
        if (res.status === 200) {
          this.$message.success('账号状态更改成功！')
          this.pageQuery() // 刷新数据
        }
      })
      .catch((err) => {
        this.$message.error('请求出错了：' + err.message)
      })
  })
}

封装 API 请求：在 src/api/employee.ts 中定义 enableOrDisableEmployee 方法。

export const enableOrDisableEmployee = (params: any) => {
  return request({
    url: `/employee/status/${params.status}`,
    method: 'post',
    params: { id: params.id }
  })
}

新增员工

功能需求

通过表单录入员工信息，包含账号、姓名、手机、性别、身份证号等字段，并进行校验。

路由跳转

点击'添加员工'按钮，跳转到新增页面组件。

handleAddEmp() {
  this.$router.push('/employee/add')
}

路由配置示例：

{ path: "/employee/add", component: () => import("@/views/employee/addEmployee.vue"), meta: { title: "添加/修改员工", hidden: true } }

表单元素开发

使用 Form 组件构建表单，设置 rules 进行校验。

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px">
  <el-form-item label="账号" prop="username">
    <el-input v-model="ruleForm.username"></el-input>
  </el-form-item>
  <el-form-item label="员工姓名" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="手机号" prop="phone">
    <el-input v-model="ruleForm.phone"></el-input>
  </el-form-item>
  <el-form-item label="性别" prop="sex">
    <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
    <el-radio v-model="ruleForm.sex" label="2">女</el-radio>
  </el-form-item>
  <el-form-item label="身份证号" prop="idNumber">
    <el-input v-model="ruleForm.idNumber"></el-input>
  </el-form-item>
  <div>
    <el-button type="primary" @click="submitForm('ruleForm',false)">保存</el-button>
    <el-button type="primary" @click="submitForm('ruleForm',true)">保存并继续添加员工</el-button>
    <el-button @click="() => this.$router.push('/employee')">返回</el-button>
  </div>
</el-form>

表单校验规则

定义正则表达式校验手机号和身份证号格式。

rules: {
  phone: [
    {
      required: true,
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (value === '' || !(/^1[3|4|5|6|7|8]\d{9}$/.test(value))) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
    }
  ],
  idNumber: [
    {
      required: true,
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (value === '' || !(/(\d{15}$)|(\d{18}$)|(\d{17}(\d|X|x)$)/.test(value))) {
          callback(new Error('请输入正确的身份证号'))
        } else {
          callback()
        }
      }
    }
  ]
}

提交逻辑

封装 addEmployee 方法，根据 isContinue 参数决定是否保留表单或跳转。

submitForm(formName, isContinue) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      addEmployee(this.ruleForm)
        .then((res: any) => {
          if (res.data.code === 1) {
            this.$message.success('员工添加成功！')
            if (isContinue) {
              this.$router.push({ path: '/employee/add' })
            } else {
              this.ruleForm = { username: '', name: '', phone: '', sex: '1', idNumber: '' }
            }
          } else {
            this.$message.error(res.data.msg)
          }
        })
    }
  })
}

修改员工

功能需求

复用新增页面组件，通过路由参数区分新增与修改模式，支持数据回显。

路由传参

点击'修改'按钮时，携带 ID 参数跳转。

handleUpdateEmp(row) {
  if (row.username === 'admin') {
    this.$message.error('admin 为管理员账号，不能修改！')
    return
  }
  this.$router.push({ path: '/employee/add', query: { id: row.id } })
}

组件内判断

在 addEmployee.vue 中通过 optType 区分操作类型，并在 created 中根据路由参数初始化。

created() {
  this.optType = this.$route.query.id ? 'update' : 'add'
  if (this.optType === 'update') {
    queryEmployeeById(this.$route.query.id).then((res) => {
      if (res.data.code === 1) {
        this.ruleForm = res.data.data
      }
    })
  }
}

接口区分

封装 queryEmployeeById 和 updateEmployee 方法，分别对应 GET 和 PUT 请求。

export const queryEmployeeById = (id: number) => {
  return request({ url: `/employee/${id}`, method: 'get' })
}

export const updateEmployee = (params: any) => {
  return request({ url: '/employee', method: 'put', data: params })
}

按钮控制

仅在新增模式下显示'保存并继续添加员工'按钮。

<el-button v-if="this.optType === 'add'" type="primary" @click="submitForm('ruleForm',true)">
  保存并继续添加员工
</el-button>

套餐管理

套餐分页查询

功能需求

支持按套餐名称、分类、售卖状态筛选，展示图片、价格及操作选项。

页面头部构建

增加下拉选择框以支持分类和状态筛选。

<div>
  <label>套餐名称：</label>
  <el-input v-model="name" clearable />
  <label>套餐分类：</label>
  <el-select v-model="categoryId" placeholder="请选择">
    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
  </el-select>
  <label>售卖状态：</label>
  <el-select v-model="status" placeholder="请选择" clearable>
    <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
  <el-button type="primary">查询</el-button>
  <div>
    <el-button type="danger">批量删除</el-button>
    <el-button type="info">+ 新建套餐</el-button>
  </div>
</div>

动态填充分类数据

在 created 生命周期中调用分类接口，填充下拉框选项。

import { getCategoryByType } from '@/api/category'
created() {
  getCategoryByType({type: 2}).then((res) => {
    if (res.data.code === 1) {
      this.options = res.data.data
    }
  })
}

表格展示

使用 Image 组件展示套餐图片，状态列根据数值渲染文本。

<el-table :data="records" stripe>
  <el-table-column prop="image" label="图片">
    <template slot-scope="scope">
      <el-image :src="scope.row.image"></el-image>
    </template>
  </el-table-column>
  <el-table-column prop="name" label="套餐名称" />
  <el-table-column prop="price" label="套餐价" />
  <el-table-column prop="categoryName" label="套餐分类" />
  <el-table-column label="售卖状态">
    <template slot-scope="scope">
      <div :class="scope.row.status === 0 ? 'stopUse' : 'activeUse'">
        {{ scope.row.status === 0 ? '停售' : '启售' }}
      </div>
    </template>
  </el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button type="text" size="small">修改</el-button>
      <el-button type="text" size="small">
        {{ scope.row.status === 1 ? '停售' : '启售' }}
      </el-button>
      <el-button type="text" size="small">删除</el-button>
    </template>
  </el-table-column>
</el-table>

启售停售套餐

功能需求

允许运营人员快速切换套餐的售卖状态。

状态切换逻辑

封装 enableOrDisableSetmeal 方法，结合确认弹窗防止误操作。

handleStartOrStop(row) {
  this.$confirm('确认调整该套餐的售卖状态？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    enableOrDisableSetmeal({ id: row.id, status: !row.status ? 1 : 0 })
      .then((res) => {
        if (res.status === 200) {
          this.$message.success('套餐售卖状态更改成功！')
          this.pageQuery()
        }
      })
      .catch((err) => {
        this.$message.error('请求出错了：' + err.message)
      })
  })
}

删除套餐

功能需求

支持单个删除与批量删除，需先勾选再操作。

批量删除实现

监听表格 selection-change 事件获取选中行 ID，拼接后发送给后端。

handleDelete(type: string, id: string) {
  let param
  if (type === 'B' && this.multipleSelection.length === 0) {
    this.$message('请选择需要删除的套餐！')
    return
  }
  this.$confirm('确定删除该套餐？', '确定删除', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    if (type === 'S') {
      param = id
    } else {
      const arr = new Array()
      this.multipleSelection.forEach(element => {
        arr.push(element.id)
      })
      param = arr.join(',')
    }
    deleteSetmeal(param).then(res => {
      if (res.data.code === 1) {
        this.$message.success('删除成功！')
        this.pageQuery()
      } else {
        this.$message.error(res.data.msg)
      }
    })
  })
}

新增套餐

功能需求

创建新套餐，关联菜品分类，设置售卖状态。

路由与组件

点击'新建套餐'跳转至 /setmeal/add，复用类似员工管理的表单逻辑，但数据结构不同。

核心逻辑

主要涉及套餐数据的提交与分类数据的联动。具体表单结构与员工新增类似，重点在于 setMeal 相关 API 的调用。

本文档涵盖了苍穹外卖系统前端的核心业务模块实现细节，从基础环境搭建到复杂 CRUD 操作，展示了 Vue 生态在企业级应用中的典型用法。