ducha-qianduan/src/views/doormanManage/cardManage/index.vue

<template>
  <div class="app-container">
    <div style="margin-bottom:15px;">
      <el-input v-model="searchKey" placeholder="输入卡号或人员ID搜索" style="width:220px;margin-right:10px;" />
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="success" @click="openAddDialog">新增卡</el-button>
    </div>

    <el-table :data="filteredList">
      <el-table-column prop="cardNo" label="卡号" min-width="150" />
      <el-table-column prop="employeeNo" label="人员ID" min-width="120" />
      <el-table-column prop="status" label="状态" min-width="100" />
      <el-table-column label="操作" min-width="200">
        <template #default="scope">
          <el-button size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteCard(scope.row.cardNo)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:10px;">卡总数：{{ cardList.length }}</div>

    <el-dialog :visible.sync="dialogVisible" :title="isEdit?'编辑卡':'新增卡'">
      <el-form :model="form" label-width="80px">
        <el-form-item label="卡号"><el-input v-model="form.cardNo" /></el-form-item>
        <el-form-item label="人员ID"><el-input v-model="form.employeeNo" /></el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status">
            <el-option label="启用" value="启用" />
            <el-option label="禁用" value="禁用" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="saveCard">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Card",
  data() {
    return {
      searchKey:"",
      dialogVisible:false,
      isEdit:false,
      form:{},
      cardList:[
        { cardNo:"C10001", employeeNo:"1001", status:"启用" },
        { cardNo:"C10002", employeeNo:"1002", status:"禁用" }
      ]
    }
  },
  computed:{
    filteredList(){
      if(!this.searchKey) return this.cardList
      return this.cardList.filter(c=>
        c.cardNo.includes(this.searchKey) || c.employeeNo.includes(this.searchKey)
      )
    }
  },
  methods:{
    search(){ this.$message.success("搜索完成（模拟）") },
    openAddDialog(){ this.isEdit=false; this.form={}; this.dialogVisible=true },
    openEditDialog(row){ this.isEdit=true; this.form={...row}; this.dialogVisible=true },
    saveCard(){
      if(this.isEdit){
        let idx=this.cardList.findIndex(c=>c.cardNo===this.form.cardNo)
        this.cardList.splice(idx,1,this.form)
      } else {
        this.cardList.push({...this.form})
      }
      this.dialogVisible=false
      this.$message.success("保存成功（模拟）")
    },
    deleteCard(no){
      this.cardList=this.cardList.filter(c=>c.cardNo!==no)
      this.$message.error("已删除 卡号="+no)
    }
  }
}
</script>