Merge remote-tracking branch 'origin/dev_New' into dev_中兴实强

gaoluyang

2026-03-12 fe167dd71a1300aeae07522db990d6b3fdb77a0e

 src/views/personnelManagement/socialSecuritySet/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,212 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title">主题：</span>
        <el-input
          v-model="searchForm.title"
          style="width: 240px"
          placeholder="请输入主题"
          clearable
          @keyup.enter="handleQuery"
        />
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
          æœç´¢
        </el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
    </div>
    <div class="table_list">
      <div style="margin-bottom: 10px; display: flex; gap: 10px">
        <el-button type="primary" @click="openForm('add')">新增方案</el-button>
        <el-button
          type="danger"
          @click="handleBatchDelete"
          :disabled="selectedRows.length === 0"
        >
          æ‰¹é‡åˆ é™¤
        </el-button>
      </div>
      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :tableLoading="tableLoading"
        :total="page.total"
        :isSelection="true"
        @selection-change="handleSelectionChange"
        @pagination="pagination"
      />
    </div>
    <form-dia ref="formDiaRef" @close="handleQuery" />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import FormDia from "./components/formDia.vue";
import PIMTable from "@/components/PIMTable/PIMTable.vue";
import {
  socialSecurityListPage,
  socialSecurityDelete,
} from "@/api/personnelManagement/socialSecuritySet.js";

const data = reactive({
  searchForm: {
    title: "",
  },
});
const { searchForm } = toRefs(data);

const tableColumn = ref([
  { label: "主题", prop: "title", minWidth: 120 },
  { label: "保险类型", prop: "insuranceTypes", width: 120 },
  { label: "使用范围", prop: "deptNames", width: 120 },
  { label: "备注", prop: "remark", minWidth: 120 },
  { label: "创建时间", prop: "createTime", width: 160 },
  { label: "创建人", prop: "createUserName", width: 100 },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 180,
    operation: [
    {
        name: "编辑",
        type: "text",
        clickFun: (row) => openForm("edit", row),
      },
      {
        name: "详情",
        type: "text",
        clickFun: (row) => openForm("detail", row),
      },
      {
        name: "删除",
        type: "text",
        style: {
          color: "#F56C6C",
        },
        clickFun: (row) => handleDelete(row),
      },
    ],
  },
]);

const tableData = ref([]);
const tableLoading = ref(false);
const selectedRows = ref([]);
const page = reactive({
  current: 1,
  size: 10,
  total: 0,
});
const formDiaRef = ref(null);

const handleQuery = () => {
  page.current = 1;
  getList();
};

const handleReset = () => {
  searchForm.value.title = "";
  page.current = 1;
  getList();
};

const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};

const getList = () => {
  tableLoading.value = true;
  socialSecurityListPage({
    ...searchForm.value,
    current: page.current,
    size: page.size,
  })
    .then((res) => {
      tableLoading.value = false;
      tableData.value = res.data?.records ?? [];
      page.total = res.data?.total ?? 0;
    })
    .catch(() => {
      tableLoading.value = false;
    });
};

const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

const openForm = (type, row) => {
  nextTick(() => {
    formDiaRef.value?.openDialog(type, row);
  });
};

// åˆ é™¤æ–¹æ¡ˆï¼Œé€»è¾‘与其它页面保持一致（确认弹窗 + è°ƒç”¨åˆ é™¤æŽ¥å£ + åˆ·æ–°åˆ—表）
const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确认删除方案"${row.title}"吗？`,
    "删除确认",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      socialSecurityDelete([row.id])
        .then(() => {
          ElMessage.success("删除成功");
          getList();
        })
        .catch(() => {
          ElMessage.error("删除失败");
        });
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

// æ‰¹é‡åˆ é™¤
const handleBatchDelete = () => {
  if (!selectedRows.value.length) return;
  ElMessageBox.confirm(
    `确定要删除选中的 ${selectedRows.value.length} æ¡æ–¹æ¡ˆå—？`,
    "批量删除确认",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      const ids = selectedRows.value.map((item) => item.id);
      socialSecurityDelete(ids)
        .then(() => {
          ElMessage.success("删除成功");
          getList();
        })
        .catch(() => {
          ElMessage.error("删除失败");
        });
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

onMounted(() => {
  getList();
});
</script>

<style scoped></style>