sl-sfy-safety/src/views/production-safety/productionSafetySystem/securityOrganizationalStructure/securityOrganizationalStructure.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title"> 安全组织体系架构 </div>
    </header>
    <main class="safety-platform-container__main flex">
      <div class="nav">
        <el-button type="primary" :icon="Plus" @click="addTeam('parent')"> 添加组织 </el-button>
        
        <div class="collapse-wrapper">
            <!-- 组织树 -->
            <el-collapse v-model="activeName" accordion v-if="fetchSafetyOrganizationList.length > 0">
                <CollapseItem
                    v-for="item in fetchSafetyOrganizationList"
                    :key="item.id"
                    :data="item"
                    :level="level"
                    @click-node="querySafetyTeamData"
                    @create-node="handleCreateSafetySystem"
                    @edit-node="handleEditSafetySystem"
                    @delete-node="handleDelSafetySystem"
                />
            </el-collapse>
           
          <div v-else>
            <el-empty description="未添加组织" />
          </div>
        </div>
        <!-- 添加、编辑组织弹窗 -->
        <AddSafetySystem
          v-model:visible="addSafetySystemVisible"
          :data="addSafetyOrganizationSystemFormData"
          @confirmAddSafetySystem="confirmAddSafetySystemCallback"
        />
      </div>
      <div class="search-table-container table-content">
        <div style="margin-bottom:20px">
            <el-button type="primary" :icon="Plus"  @click="handleCreate"> 添加 </el-button>
            <el-button plain  @click="handleImport">导入</el-button>
        </div>
        <header>
          <div class="act-search">
            <section class="select-box">
              <div class="select-box--item">
                <span>搜索工号/姓名：</span>
                <el-input
                  v-model="tableQuery.queryParam.keyword"
                  placeholder="搜索工号/姓名"
                  class="act-search-input"
                />
              </div>
              <div class="select-box--item">
                <span>状态：</span>
                <el-select v-model="tableQuery.queryParam.status" placeholder="请选择状态" clearable>
                  <el-option label="启用" :value="1" />
                  <el-option label="禁用" :value="2" />
                </el-select>
              </div>
              <div class="select-box--item">
                <span>日期范围：</span>
                <el-date-picker
                  v-model="dateRange"
                  @change="onchangeDateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                />
              </div>
            </section>
            <section class="search-btn">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
              <el-button plain  @click="handleDownload">导出</el-button>
            </section>
          </div>
        </header>

        <div class="batch-table">
          <BasicTable
            ref="basicTableRef"
            :tableData="tableData"
            :tableConfig="tableConfig"
            @update:pageSize="handleSizeChange"
            @update:pageNumber="handleCurrentChange"
          >
            <template #status="scope">
              <span>
                {{ scope.row.status === 1 ? '启用' : scope.row.status === 2 ? '禁用' : '-' }}
              </span>
            </template>
            <template #action="scope">
              <div class="action-container--div" style="justify-content: left">
                <ActionButton text="编辑" @click="handleEdit(scope.row.id)" />
                <ActionButton
                  text="删除"
                  :popconfirm="{
                    title: '确定要删除?',
                  }"
                  @confirm="handleDelete(scope.row.id)"
                />
                <ActionButton text="查看" @click="handleView(scope.row.id)" />
              </div>
            </template>
          </BasicTable>
        </div>
      </div>
    </main>
    <BatchImport
      v-if="batchImportVisible"
      :visible="batchImportVisible"
      :import-api-url="importApiUrl"
      :template-url="templateUrl"
      template-name="安全组织体系管理导入模版"
      :show-template="true"
      @close="batchImportVisible = false"
      @update="handleUpdate"
    />
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import BasicTable from '@/components/BasicTable.vue';
  import useTableConfig from '@/hooks/useTableConfigHook';
  import ActionButton from '@/components/ActionButton.vue';
  import { TABLE_OPTIONS, TABLE_COLUMNS } from './configs/tables';
  import { useRouter, useRoute } from 'vue-router';
  import type { QueryPageRequest } from '@/types/basic-query';
  import {
    getSafetySystemList,
    addSafetySystem,
    updateSafetySystem,
    deleteSafetySystem,
    fetchTableList,
    delEmployee,
    exportSafetyOrganizationSystemManagement
  } from '@/api/safety-organization-management';
  import { downloadByData } from '@/utils/file/download';
  import BatchImport from '@/components/batch-import/BatchImport.vue';
  import { useGlobSetting } from '@/hooks/setting';
  import urlJoin from 'url-join';
  import AddSafetySystem from './components/addSafetySystem.vue';
  import {
  Delete,
  Edit,
  Plus,
} from '@element-plus/icons-vue'
import CollapseItem from '../safetyOrganizationSystemManagement/components/collapseItem.vue'
const position = ref('left')
  const route = useRoute();
  const router = useRouter();
  // 表格
  const basicTableRef = ref<InstanceType<typeof BasicTable>>();

  const { tableConfig, pagination } = useTableConfig(TABLE_COLUMNS, TABLE_OPTIONS);

  const tableData = ref<any[]>([]);

  const fetchSafetyOrganizationList = ref<any[]>([]);

  const activeName = ref('');
  // 日期范围（用于日期选择器）
  const dateRange = ref<[string, string] | string>('');
  const level = ref(1)
  const tableQuery = reactive<QueryPageRequest<any>>({
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    queryParam: {
      classifyName: '',
      keyword: '',
      status: '',
      startTime: '',
      endTime: '',
    },
  });

  const handleSizeChange = (value: number) => {
    pagination.pageSize = value;
    tableQuery.pageSize = value;
    getTableData();
  };

  const handleCurrentChange = (value: number) => {
    pagination.pageNumber = value;
    tableQuery.pageNumber = value;
    getTableData();
  };

  async function getTableData() {
    tableConfig.loading = true;
    try {
      const res = await fetchTableList(tableQuery);
      if (res) {
        tableData.value = res.records
        pagination.total = res.totalRow;
      }
    } catch (e) {
      console.error('获取列表失败:', e);
      tableData.value = [];
      pagination.total = 0;
    } finally {
      tableConfig.loading = false;
    }
  }

  interface addSafetyOrganizationSystemFormDataType {
    type: String;
    orgName?: String;
    orgId?: String | number;
    action?: String;
    parentid?: String | number;
  }

  const addSafetySystemVisible = ref(false);
  const addSafetyOrganizationSystemFormData = ref<addSafetyOrganizationSystemFormDataType>({
    type: '',
    orgName: '',
    orgId: '',
    action: '',
    parentid: '',
  });
  // 一级新增
  const addTeam = (type) => {
    addSafetyOrganizationSystemFormData.value = {
      type,
      action: 'add',
    };
    addSafetySystemVisible.value = true;
  };
  // 获取组织列表
  const fetchSafetyOrganizationTeamList = async () => {
    try {
      const res = await getSafetySystemList();
      fetchSafetyOrganizationList.value = res;
    } catch (error) {
      ElMessage.error('获取组织列表失败');
    }
  };
  // 定义组织数据类型
  interface SafetySystemFormData {
    value: string; // 输入的组织名称
    action: 'add' | 'edit'; // 操作类型：新增或编辑
    orgId?: string | number; // 组织ID（编辑时必传）
    parentid?: string | number; // 父组织ID（新增子组织时必传）
    type?: 'children' | 'parent'; // 组织类型（子组织或根组织）
  }

  // 保存弹窗回调
  const confirmAddSafetySystemCallback = async (formData: SafetySystemFormData) => {
    try {
      if (!formData.value?.trim()) {
        ElMessage.warning('请输入有效的组织名称！');
        return;
      }
      const requestData = {
        orgName: formData.value.trim(),
        id: formData.action === 'edit' ? formData.orgId : undefined,
        parentid: formData.action === 'add' ? formData.parentid : undefined,
      };
      // console.log(formData, 'formData')
      if (formData.action === 'add') {
        if (formData.type === 'children' && formData.orgId) {
          requestData.parentid = formData.orgId;
        }
        await addSafetySystem(requestData);
        ElMessage.success('新增组织成功！');
      } else {
        // 如果是子类，补充父级ID
        if (formData.type === 'children' && formData.parentid) {
          requestData.parentid = formData.parentid;
        }
        await updateSafetySystem(requestData);
        ElMessage.success('编辑组织成功！');
      }
      // 刷新列表
      fetchSafetyOrganizationTeamList();
    } catch (error) {
      console.error('操作失败:', error);
      ElMessage.error(formData.action === 'add' ? '新增组织失败！' : '编辑组织失败！');
    }
  };
  // 二级新增
  const handleCreateSafetySystem = async (type, value) => {
    addSafetyOrganizationSystemFormData.value = {
      type:'children',
      action: 'add',
      orgName: value.orgName,
      orgId: value.orgId,
    };
    addSafetySystemVisible.value = true;
    // 打开某一个
    // activeName.value = value.orgId;
  };
  // 编辑
  const handleEditSafetySystem = (type, value, parentid) => {
    // console.log(value)
    addSafetySystemVisible.value = true;
    addSafetyOrganizationSystemFormData.value = {
      type,
      action: 'edit',
      orgName: value.orgName,
      orgId: value.orgId,
      parentid,
    };
  };
  // 删除
  const handleDelSafetySystem = async (type, value) => {
    // console.log('删除', type, value)
    ElMessageBox.confirm('确认删除该组织吗？', '警告', { type: 'warning' }).then(async () => {
      try {
        if(value.children.length > 0){
            ElMessage.error('当前一级组织存在子级数据，无法删除，请先删除子级组织')
            return 
        }
        await deleteSafetySystem(value.orgId);
        ElMessage.success('删除成功');
        // 刷新列表
        fetchSafetyOrganizationTeamList();
        handleReset();
      } catch (error) {
        ElMessage.error(error || '删除失败');
      }
    });
  };
  // 查询
  const querySafetyTeamData = (value) => {
    // console.log('查询', value);
    tableQuery.queryParam.classifyName = value.orgId;
    getTableData();
  };
  // 时间查询
  const onchangeDateRange = () => {
    if (dateRange.value && Array.isArray(dateRange.value) && dateRange.value.length === 2) {
      tableQuery.queryParam.startTime = dateRange.value[0] || '';
      tableQuery.queryParam.endTime = dateRange.value[1] || '';
    } else {
      tableQuery.queryParam.startTime = '';
      tableQuery.queryParam.endTime = '';
    }
    getTableData();
  };
  const handleSearch = () => {
    pagination.pageNumber = 1;
    tableQuery.pageNumber = 1;
    getTableData();
  };

  const handleReset = () => {
    pagination.pageNumber = 1;
    tableQuery.queryParam = {
      classifyName: '',
      keyword: '',
      status: '', // 重置为默认启用状态
      startTime: '',
      endTime: '',
    };
    dateRange.value = '';
    handleSearch();
  };

  // 批量导入
  const batchImportVisible = ref(false);
  const { urlPrefix } = useGlobSetting();
  const importApiUrl = ref(urlJoin(urlPrefix, '/safetyorguser/importSafetyOrgUser'));
  const templateUrl = ref('./skyeye-file-upload/sfysecurity/TEMPLATE/安全组织体系管理导入模版.xlsx');

  const handleImport = () => {
    batchImportVisible.value = true;
  };

  const handleUpdate = () => {
    batchImportVisible.value = false;
    getTableData();
  };

  const handleDownload = async () => {
    try {
      const response = await exportSafetyOrganizationSystemManagement(tableQuery.queryParam);
      if (response) {
        const fileName = `安全组织体系管理_${new Date().toISOString().split('T')[0]}.xlsx`;
        downloadByData(response, fileName);
        ElMessage.success('导出成功');
      }
    } catch (e) {
      console.error('导出安全组织体系管理失败:', e);
      ElMessage.error('导出失败，请重试');
    }
  };

  const handleCreate = () => {
    router.push({
      name: 'SecurityOrganizationalStructureItem',
      query: {
        operate: 'employee-create',
      },
    });
  };

  const handleEdit = (id: number) => {
    router.push({
      name: 'SecurityOrganizationalStructureItem',
      query: {
        id,
        operate: 'employee-edit',
      },
    });
  };

  const handleDelete = async (id: number) => {
    try {
      await delEmployee(id);
      ElMessage.success('删除成功');
      getTableData();
    } catch (e) {
      console.error('删除员工失败:', e);
      ElMessage.error('删除失败，请重试');
    }
  };

  const handleView = (id: number) => {
    router.push({
      name: 'SecurityOrganizationalStructureItem',
      query: {
        id,
        operate: 'employee-view',
      },
    });
  };
  onMounted(() => {
    fetchSafetyOrganizationTeamList();
    // 默认读取上个选中架构组织的员工数据
    const orgId = route.query.id as string;
    tableQuery.queryParam.classifyName = orgId || undefined
    getTableData();
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;
  @use '@/styles/basic-table-action.scss' as *;
  @use '@/views/traffic/violation/style/act-search-table.scss' as *;
  .table-content {
  }
  .nav {
    flex: 0 0 300px;
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid #eee;
    :deep(.collapse-title) {
        flex: 1 0 90%;
        order: 1;
        .el-collapse-item__header {
            flex: 1 0 auto;
            order: -1;
        }
    }
    .collapse-wrapper {
      margin-top: 10px;

      .title-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        .handler {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          padding-right: 15px;
        }
      }

      .collapse-item-content {
        ul {
          padding-left: 40px;

          li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 6px 0;
            border-bottom: 1px solid #eeeeeed1;

            span {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>