sl-sfy-safety/src/views/production-safety/productionSafetySystem/safetyOrganizationSystemManagement/safetyOrganizationSystemManagement.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 platform-main">
      <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 class="chart">
            <!-- 架构图 -->
            <OrgChart :treeData="treeData" @node-click="handleNodeClick" />
        </div>
        <TeamDetailDrawer ref="teamDetailDrawerRef" :selected-team-id="selectedTeamId" />

        <section class="content">

        <div>
            <p class="label-title">组织信息</p>
            <el-form :model="safetyOrgUser" ref="formRef" :rules="safetyOrgUserRules">
                <el-form-item label="组织人数" prop="userNum">
                    <el-input placeholder="请输入组织人数" type="number" v-model="safetyOrgUser.userNum" style="width:450px" />
                </el-form-item>
                <el-form-item label="组织职责" prop="depResp">
                    <el-input placeholder="请填写组织职责" v-model="safetyOrgUser.depResp"  :autosize="{ minRows: 2, maxRows: 6 }" :maxlength="300" show-word-limit type="textarea" style="width:450px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSave"> 保存 </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="mb-4">
            <p class="label-title">人员信息</p>
            <el-button type="primary" :icon="Plus"  @click="handleCreate"> 添加 </el-button>
            <el-button plain  @click="handleImport">导入</el-button>
        </div>
        <header class="mb-4">
          <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>
                    
        </section>
      </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,
    safetyOrgUserSave,
    safetyOrgUserDetail,
    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 {SafetyOrgUserRules} from "./configs/form"
  import {
  Delete,
  Edit,
  Plus,
} from '@element-plus/icons-vue'
  import OrgChart from './components/orgChart.vue';
  import CollapseItem from './components/collapseItem.vue'
  import TeamDetailDrawer from './components/TeamDetailDrawer.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[]>([]);
// 架构数据类型
  type OrganizationTreeType = {
    id: string;
    data: { name: string };
    children?: OrganizationTreeType[];
  };

  const treeData = ref<OrganizationTreeType>({
    id: 'root',
    data: { name: '请添加组织' },
    children: [],
  });
  const teamDetailDrawerRef = ref<InstanceType<typeof TeamDetailDrawer>>();
  const selectedTeamId = ref<number | null>(null);
  const handleNodeClick = (nodeData: any) => {
      const id = nodeData?.id?.replace('org-', '')
      console.log(nodeData, 'canshu')
    selectedTeamId.value = Number(id);

    teamDetailDrawerRef.value?.drawerShow();
  };

  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 safetyOrgUser = reactive({
    id: 0,
    userNum: '',
    depResp: ''
  })
  const formRef = ref()
  const safetyOrgUserRules = ref(SafetyOrgUserRules)
  // 校验员工数量和职责
  const handleValidate = async () => {
    if (!formRef.value) return;
    const res = await formRef.value.validateField();
    return res;
  };
  // 保存员工数量和职责
  const handleSave = async ()=>{
    const res = await handleValidate()
    if (!res) return;
    try {
        console.log(safetyOrgUser, 'canshu')
        safetyOrgUser.id = Number(safetyOrgUser.id)
        await safetyOrgUserSave(safetyOrgUser)
        ElMessage.success('保存成功');
    } catch (error) {
        ElMessage.error('保存失败');
    }
  }
  // 查询组织详情
  const safetyOrgDetail = async (id)=>{
    try {
        const res = await safetyOrgUserDetail(id)
        Object.assign(safetyOrgUser, {
            id,
            userNum: res.userNum,
            depResp: res.depResp
        })
    } catch (error) {
        ElMessage.error('获取详情失败');
    }
  }
  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: '',
  });
/**
 * 递归给树形结构添加 id 、data 、children 字段
 * @param {Array} tree 原始树形数组
 * @returns 格式化后的标准树结构
 */
const formatTreeData = (tree)=> {
  if (!tree || !Array.isArray(tree)) return [];

  return tree.map(item => {
    // 给每一层节点都加上 id 和 data
    const formattedItem = {
      children: item.children || [],
      id: `org-${item.orgId}`, 
      data: {
        name: item.orgName
      }
    };

    // 递归处理子节点
    if (formattedItem.children && formattedItem.children.length > 0) {
      formattedItem.children = formatTreeData(formattedItem.children);
    }

    return formattedItem;
  });
}

  function convertData(leaderTeams): OrganizationTreeType {
    return {
      id: `org-${leaderTeams.orgId}`, 
      data: {
        name: leaderTeams.orgName
      },
      children: leaderTeams.children?.map((child) => convertData(child)),
    };
  }

  // 获取组织列表
  const fetchSafetyOrganizationTeamList = async () => {
    try {
      const res = await getSafetySystemList();
      fetchSafetyOrganizationList.value = res;
      // 默认选择第一个组织
      if(res[0].orgId){
        treeNodePreview(res[0])
        // activeName.value = String(res[0].orgId)
        tableQuery.queryParam.classifyName = res[0].orgId
      }

    } catch (error) {
      ElMessage.error('获取组织列表失败');
    }
  };
  // 给架构图赋值
  const treeNodePreview = (data)=>{
    let TreeNode = convertData(data)
    treeData.value = TreeNode
  }

  // 一级新增
  const addTeam = (type) => {
    addSafetyOrganizationSystemFormData.value = {
      type,
      action: 'add',
    };
    addSafetySystemVisible.value = true;
  };

    // 子级新增
  const handleCreateSafetySystem = async (type, value) => {
    // console.log('新增参数--',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('编辑参数--', type, value, parentid)
    addSafetySystemVisible.value = true;
    addSafetyOrganizationSystemFormData.value = {
      type,
      action: 'edit',
      orgName: value.orgName,
      orgId: value.orgId,
      parentid,
    };
  };
  // 查询
  const querySafetyTeamData = (value) => {
    // console.log('查询', value);
    tableQuery.queryParam.classifyName = value.orgId;
    // activeName.value = String(value.orgId)
    treeNodePreview(value)
    safetyOrgDetail(value.orgId)
    getTableData();
  };
  // 定义组织数据类型
  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;
      }
      // 新增时，传orgName（组织名称）、parentid（父组织ID）
      // 编辑时，传当前ID和orgName
      const requestData = {
        orgName: formData.value.trim(),
        id: formData.action === 'edit' ? formData.orgId : undefined,
        // 第一级不需要传parentid
        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 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 || '删除失败');
      }
    });
  };

  
  // 定义组织数据类型
  interface SafetySystemFormData {
    value: string; // 输入的组织名称
    action: 'add' | 'edit'; // 操作类型：新增或编辑
    orgId?: string | number; // 组织ID（编辑时必传）
    parentid?: string | number; // 父组织ID（新增子组织时必传）
    type?: 'children' | 'parent'; // 组织类型（子组织或根组织）
  }

  // 时间查询
  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(async () => {
    fetchSafetyOrganizationTeamList();
    // 默认第一个架构组织的员工数据
    const res = await getSafetySystemList();
    const orgId = res[0]?.orgId;
    tableQuery.queryParam.classifyName = orgId || undefined
    getTableData();
    if(orgId){
        safetyOrgDetail(orgId)
    }
  });
</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 *;
  .platform-main {
    width:100%;
  }
  .table-content {
    flex:1;
    width: 0;
    min-width: 0;
  }
   .mb-4{
    margin-bottom: 16px;
 }
  .nav {
    flex: 0 0 300px;
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid #eee;
    overflow-y: auto;
    :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;
            }
          }
        }
      }
    }
  }
  .label-title{
    margin-bottom:16px;
  }
  .chart {
    height:260px;
    background-color: #f1f7ff;
    border-radius: 4px;
    overflow: hidden;
  }
  .content {
    height: calc(100% - 260px - 32px);
    overflow-y: auto;
  }
</style>