<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header><span class="card-title">划价组套</span></template>
      <el-form :inline="true" :model="queryParams">
        <el-form-item label="搜索">
          <el-input v-model="queryParams.searchKey" placeholder="搜索" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button type="success" icon="Plus" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
      <vxe-table :data="tableData" border height="calc(100vh - 280px)">
        <vxe-column type="seq" title="序号" width="60" />
        <vxe-column field="name" title="名称" />
        <vxe-column field="code" title="编码" />
        <vxe-column field="status" title="状态">
          <template #default="{ row }"><el-tag :type="row.status === '0' ? 'success' : 'info'">{{ row.status === '0' ? '正常' : '停用' }}</el-tag></template>
        </vxe-column>
        <vxe-column title="操作" width="150">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
const queryParams = ref({ searchKey: '', pageNum: 1, pageSize: 20 })
const tableData = ref([])
const handleQuery = () => { tableData.value = [] }
const handleAdd = () => { ElMessage.info('新增功能开发中') }
const handleEdit = (row) => { ElMessage.info('编辑功能开发中') }
const handleDelete = (row) => { ElMessage.info('删除功能开发中') }
onMounted(() => handleQuery())
</script>
<style scoped>.card-title { font-weight: bold; font-size: 16px; }</style>
