|
|
@@ -0,0 +1,533 @@
|
|
|
+<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">
|
|
|
+ <!-- expand-icon-position="left" 版本小了,不支持 -->
|
|
|
+ <el-collapse accordion v-model="activeName" v-if="fetchSafetyOrganizationList.length > 0">
|
|
|
+ <el-collapse-item :name="item.orgId" v-for="item in fetchSafetyOrganizationList">
|
|
|
+ <template #title="{ isActive }">
|
|
|
+ <div :class="['title-wrapper', { 'is-active': isActive }]">
|
|
|
+ <span @click.stop="querySafetyTeamData('parent', item)">
|
|
|
+ {{ item.orgName }}
|
|
|
+ </span>
|
|
|
+ <div class="handler">
|
|
|
+ <el-button :icon="Plus" size="small" type="default" dashed @click.stop="handleCreateSafetySystem('children', item)"
|
|
|
+ ></el-button
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary" link @click.stop="handleEditSafetySystem('parent', item, '')"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button size="small" type="danger" link @click.stop="handleDelSafetySystem('parent', item)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="collapse-item-content">
|
|
|
+ <div v-if="item.children.length > 0">
|
|
|
+ <ul>
|
|
|
+ <li class="flex" v-for="children in item.children" :key="children.orgId">
|
|
|
+ <span @click="querySafetyTeamData('children', children)">
|
|
|
+ {{ children.orgName }}
|
|
|
+ </span>
|
|
|
+ <div class="handler">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ @click.stop="handleEditSafetySystem('children', children, item.orgId)"
|
|
|
+ >编辑</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ size="small"
|
|
|
+ type="danger"
|
|
|
+ @click.stop="handleDelSafetySystem('children', children)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-empty description="未添加子组织" :image-size="40" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </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 } 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'
|
|
|
+
|
|
|
+const position = ref('left')
|
|
|
+
|
|
|
+ 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 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,
|
|
|
+ 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 {
|
|
|
+ await deleteSafetySystem(value.orgId);
|
|
|
+
|
|
|
+ ElMessage.success('删除成功');
|
|
|
+ // 刷新列表
|
|
|
+ fetchSafetyOrganizationTeamList();
|
|
|
+ handleReset();
|
|
|
+ } catch (error) {
|
|
|
+ ElMessage.error(error || '删除失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 查询
|
|
|
+ const querySafetyTeamData = (type, value) => {
|
|
|
+ console.log(type, '查询', 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: 'SafetyOrganizationSystemManagementItem',
|
|
|
+ query: {
|
|
|
+ operate: 'employee-create',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleEdit = (id: number) => {
|
|
|
+ router.push({
|
|
|
+ name: 'SafetyOrganizationSystemManagementItem',
|
|
|
+ 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: 'SafetyOrganizationSystemManagementItem',
|
|
|
+ query: {
|
|
|
+ id,
|
|
|
+ operate: 'employee-view',
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ fetchSafetyOrganizationTeamList();
|
|
|
+ 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>
|