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="queryParams" class="demo-form-inline">
      <el-form-item label="公章名称">
        <el-input v-model="queryParams.name" placeholder="请输入公章名称" />
      </el-form-item>
      <el-form-item label="公章编号">
        <el-input v-model="queryParams.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="sealName" label="公章名称" />
      <el-table-column prop="sealType" label="公章类型" >
         <template #default="scope">
            <dict-tag :options="opr_seal_type" :value="scope.row.sealType" />
          </template>
         </el-table-column>
      <el-table-column prop="status" label="是否启用">
          <template #default="scope">
            <dict-tag :options="opr_yes_no" :value="scope.row.sealType" />
          </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 loading = ref(true);
import { listMaterialSeal } from '@/api/operate/materialSeal';
import { MaterialSealVO, MaterialSealQuery, MaterialSealForm } from '@/api/operate/materialSeal/types';
const { opr_seal_type ,opr_yes_no} = toRefs<any>(proxy?.useDict('opr_seal_type','opr_yes_no'));
// 表单数据
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;
};

const data = reactive<PageData<MaterialSealForm, MaterialSealQuery>>({
  form: {
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10
    // ,
    // startSealDays: undefined,
    // endSealDays: undefined
  },
  rules: {}
});

const { queryParams } = toRefs(data);

// 模拟 API 请求（替换为实际接口）
const getList = async () => {
loading.value = true;
  const res = await listMaterialSeal(queryParams.value);
  tableData.value = res.rows;
  total.value = res.total;
  loading.value = false;
};

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

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

// 点击确认按钮
const handleConfirm = () => {
  if (selectedRows.value.length === 0) {
    proxy?.$modal.msgError('请至少选择一项！');
    return;
  }
  // 合并为对象数组
  const selectedItems = selectedRows.value.map(row => ({
    id: row.id,
    name: row.sealName
  }));

  emit('confirm', selectedItems);
  dialogVisible.value = false;
};

// 分页切换
const handlePageChange = (page) => {
  currentPage.value = page;
  getList();
};
// 监听弹窗打开事件，自动查询数据
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      getList();
    }
  },
  { immediate: true } // 立即执行一次，确保初始加载时也查询
);
</script>

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