lx-admin-frontend/src/components/SealSearchDialog/index.vue

<!-- src/components/SealSearchDialog.vue -->
<template>
  <el-dialog
    title="选择企业公章"
    v-model="dialogVisible"
    width="60%"
  >
    <!-- 搜索条件 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="公章名称">
        <el-input v-model="searchForm.name" placeholder="请输入公章名称" />
      </el-form-item>
      <el-form-item label="公章编号">
        <el-input v-model="searchForm.code" placeholder="请输入公章编号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearchList">查询</el-button>
        <el-button @click="resetSearchForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格（添加勾选列） -->
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      style="width: 100%; margin-top: 20px;"
      ref="multipleTable"
    >
      <el-table-column type="selection" width="55" /> <!-- 勾选列 -->
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="公章名称" />
      <el-table-column prop="code" label="公章编号" />
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <el-tag :type="row.status === '1' ? 'success' : 'danger'">
            {{ row.status === '1' ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页（可选） -->
    <el-pagination
      style="margin-top: 20px; text-align: right;"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
    />

    <!-- 底部按钮（确认/取消） -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="SealDialog" lang="ts">
import { ref, computed } from 'vue';

// 控制弹窗显示/隐藏
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['update:visible', 'confirm']);

// 表单数据
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val),
});

// 搜索条件
const searchForm = ref({
  name: '',
  code: '',
});

// 表格数据
const tableData = ref([]);
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);

// 勾选的数据
const selectedRows = ref([]);

// 勾选变化时触发
const handleSelectionChange = (val) => {
  selectedRows.value = val;
};

// 模拟 API 请求（替换为实际接口）
const fetchData = async () => {
  const mockData = [
    { id: '1', name: '公章A', code: 'GA001', status: '1' },
    { id: '2', name: '公章B', code: 'GA002', status: '0' },
  ];
  tableData.value = mockData;
  total.value = mockData.length;
};

// 查询列表数据
const handleSearchList = () => {
  fetchData();
};

// 重置搜索条件
const resetSearchForm = () => {
  searchForm.value = {
    name: '',
    code: '',
  };
  currentPage.value = 1;
  fetchData();
};

// 点击确认按钮
const handleConfirm = () => {
  if (selectedRows.value.length === 0) {
    proxy?.$modal.msgError('请至少选择一项！');
    return;
  }
  emit('confirm', selectedRows.value.map(row => row.id)); // 返回选中的 ID 数组
  dialogVisible.value = false;
};

// 分页切换
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchData();
};
</script>

<style scoped>
.demo-form-inline {
  margin-bottom: 20px;
}
</style>