vue入门项目：快递收件管理---参数维护

参数有快递公司，快递类别，特殊收件人三种，但是总体上是一样的

快递公司参数：Pamc.vue

<template>
  <div class="search">
    <el-button type="primary" @click="openDrawer=!openDrawer">新增</el-button>
  </div>
  <div>
    <el-table :data="tableData" style="width: 100%" >
      <el-table-column prop="pID" label="ID" width="60" />
      <el-table-column prop="pName" label="公司名称" width="90" />
      <el-table-column label="操作" >
        <el-table-column label="编辑" width="80" >
          <template #default="scope">
          <el-button size="small" type="success" @click="handleEdit(scope.row)" >Edit</el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除" width="90" >
          <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.row)" >Delete</el-button >
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-drawer
    v-model="openDrawer"
    :title="isAdd?'添加快递公司':'修改快递公司'"
    direction="rtl" size="30%"
    :before-close="drawerClose"
  >
    <div>
      <el-form :model="form">
        <el-form-item>
          <span>公司名称：</span>
          <el-input id='search-input' size='small' label-width='150px' placeholder="请输入公司名称"  style="width: 180px;height:32px;" v-model="form.pName" />      
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  class="s-button" @click="editForm">保存</el-button>
          <el-button type="primary"  class="s-button" @click="openDrawer=!openDrawer">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
  </div>
</template>

<script>
import { reactive,toRefs } from '@vue/reactivity'
import {clist,cadd,cupdate,cdelete} from '../api/pam'
export default{
  name:'Pamc',
  setup(){
    let data = reactive({
      //表格数据
      tableData:[],
      openDrawer:false,
      isAdd:true,
      form:{
        pName:''
      }
    })
    //抽屉关闭，清空数据
    let drawerClose =()=>{
      data.openDrawer=false
      data.isAdd=true
      data.form = {pID:'',pName:''}
    }
    //加载表格数据的方法
    let loadTable = async ()=>{
      let {data:r} = await clist()
      data.tableData = r
    }
    //执行加载表格数据的方法
    loadTable()
    //添加/修改信息
    let editForm = async ()=>{
      let r=false
      if(data.isAdd){        
        r = await cadd(data.form)
      }else{
        r = await cupdate(data.form)
      }      
      if(r){
        loadTable();
      }
    }
    //删除信息
    let handleDelete =async (row)=>{
      let {pID} = row
      let r = await cdelete({pID})
      if(r){
        loadTable();
      }
    }
    let handleEdit = (row)=>{
      //获取当前角色信息，并复制给表单数据
      data.form = {...row}
      data.isAdd=false
      data.openDrawer=true      
    }
    return {...toRefs(data),drawerClose,editForm,handleEdit,handleDelete}
  }
}
</script>
<style>
.search{
  padding: 3px 3px;
}
</style>

特殊收件人参数：Pamp.vue

<template>
  <div>
    <el-row class="mb-4">
      <el-button type="primary" @click="openDrawer=!openDrawer">新增</el-button>
    </el-row>
  </div>
  <el-table :data="tableData" style="width: 100%" >
      <el-table-column prop="empId" label="ID" width="60" />
      <el-table-column prop="empName" label="姓名" width="120" />
      <el-table-column prop="empTel" label="电话" width="150" />
      <el-table-column prop="empEmail" label="邮箱" width="260" />
      <el-table-column label="操作" >
        <el-table-column label="编辑" width="80" >
          <template #default="scope">
          <el-button size="small" type="success" @click="handleEdit(scope.row)" >Edit</el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除" width="90" >
          <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.row)" >Delete</el-button >
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  <div>
    <el-drawer
    v-model="openDrawer"
    :title="isAdd?'添加特殊人员信息':'修改特殊人员信息'"
    direction="rtl" size="30%"
    :before-close="drawerClose"
  >
    <div>
      <el-form :model="form">
        <el-form-item>
          <span>人员名称：</span>
          <el-input id='search-input' size='small' label-width='150px' placeholder="请输入姓名"  style="width: 180px;height:32px;" v-model='form.empName' />      
        </el-form-item>
        <el-form-item>
          <span>人员电话：</span>
          <el-input id='search-input' size='small' label-width='150px' placeholder="请输入电话"  style="width: 180px;height:32px;" v-model='form.empTel' />      
        </el-form-item>
        <el-form-item>
          <span>人员邮箱：</span>
          <el-input id='search-input' size='small' label-width='150px' placeholder="请输入邮箱"  style="width: 180px;height:32px;" v-model='form.empEmail' />      
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  class="s-button" @click="editForm">保存</el-button>
          <el-button type="primary"  class="s-button" @click="openDrawer=!openDrawer">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
  </div>
  
</template>

<script>
import { reactive,toRefs } from '@vue/reactivity'
import {plist,padd,pupdate,pdelete} from '../api/pam'
export default{
  name:'Pamc',
  setup(){
    let data = reactive({
      //表格数据
      tableData:[],
      openDrawer:false,
      isAdd:true,
      form:{
        empId:'',
        empName:'',
        empTel:'',
        empEmail:''
      }
    })
    //抽屉关闭，清空数据
    let drawerClose =()=>{
      data.openDrawer=false
      data.isAdd=true
      data.form = {
        empId:'',
        empName:'',
        empTel:'',
        empEmail:''
      }
    }
    //加载表格数据的方法
    let loadTable = async ()=>{
      let {data:r} = await plist()
      data.tableData = r
    }
    //执行加载表格数据的方法
    loadTable()
    let editForm = async ()=>{
      let r=false
      if(data.isAdd){
        r = await padd(data.form)
      }else{
        r = await pupdate(data.form)
      }
      if(r){
        loadTable();
      }
    }
    //修改信息
    let handleEdit = (row)=>{
      //获取当前角色信息，并复制给表单数据
      data.form = {...row}
      console.log(data.form)
      data.isAdd=false
      data.openDrawer=true      
    }
    //删除信息
    let handleDelete =async (row)=>{
      let {empId} = row
      let r = await pdelete({empId})
      if(r){
        loadTable();
      }
    }
    return {...toRefs(data),editForm,drawerClose,handleEdit,handleDelete}
  }
}
</script>
<style>
</style>

快递类别参数：Pamt.vue

<template>
  <div>
    <el-row class="mb-4">
      <el-button type="primary" @click="openDrawer=!openDrawer">新增</el-button>
    </el-row>
  </div>
  <el-table :data="tableData" style="width: 100%" >
      <el-table-column prop="pID" label="ID" width="60" />
      <el-table-column prop="pName" label="文件类别" width="90" />
      <el-table-column label="操作" >
        <el-table-column label="编辑" width="80" >
          <template #default="scope">
          <el-button size="small" type="success" @click="handleEdit(scope.row)" >Edit</el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除" width="90" >
          <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.row)" >Delete</el-button >
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  <div>
    <el-drawer
    v-model="openDrawer"
    :title="isAdd?'添加快递类别':'修改快递类别'"
    direction="rtl" size="30%"
    :before-close="drawerClose"
  >
    <div>
      <el-form :model="form">
        <el-form-item>
          <span>类别名称：</span>
          <el-input id='search-input' size='small' label-width='150px' placeholder="请输入快递类别"  style="width: 180px;height:32px;" v-model='form.pName' />      
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  class="s-button" @click="editForm">保存</el-button>
          <el-button type="primary"  class="s-button" @click="openDrawer=!openDrawer">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
  </div>
</template>

<script>
import { reactive,toRefs } from '@vue/reactivity'
import {tlist,tadd,tupdate,tdelete} from '../api/pam'
export default{
  name:'Pamc',
  setup(){
    let data = reactive({
      //表格数据
      tableData:[],
      openDrawer:false,
      isAdd:true,
      form:{
        pID:'',
        pName:''
      }
    })
    //抽屉关闭，清空数据
    let drawerClose =()=>{
      data.openDrawer=false
      data.isAdd=true
      data.form = {pID:'',pName:''}
    }
    //加载表格数据的方法
    let loadTable = async ()=>{
      let {data:r} = await tlist()
      data.tableData = r
    }
    //执行加载表格数据的方法
    loadTable()
    let editForm = async ()=>{
      let r=false
      if(data.isAdd){
        r = await tadd(data.form)
      }else{
        r = await tupdate(data.form)
      }
      if(r){
        loadTable();
      }
    }
    //修改信息
    let handleEdit = (row)=>{
      //获取当前角色信息，并复制给表单数据
      data.form = {...row}
      console.log(data.form)
      data.isAdd=false
      data.openDrawer=true      
    }
    //删除信息
    let handleDelete =async (row)=>{
      let {pID} = row
      let r = await tdelete({pID})
      if(r){
        loadTable();
      }
    }
    return {...toRefs(data),editForm,drawerClose,handleEdit,handleDelete}
  }
}
</script>
<style>
</style>

其中编辑操作军使用了抽屉组件，参照官方。大概的注释都有，应该可以看懂