wangchengming/voltage_Safety_Vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对接百科数据库

Browse Source
This commit is contained in:
wangchengming 2025-07-20 01:34:28 +08:00
parent b34746e615
commit ef44f43a71
11 changed files with 799 additions and 343 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/api/databaseLibary.js Normal file
View File

@ -0,0 +1,44 @@
import request from '@/utils/request'
// 获取百科数据库分页列表
export function getBusEncyclopediaDatabasePage(query) {
return request({
url: '/admin/busEncyclopediaDatabase/getBusEncyclopediaDatabasePage',
method: 'post',
data: query
})
}
// 添加百科数据库
export function addBusEncyclopediaDatabase(query) {
return request({
url: '/admin/busEncyclopediaDatabase/addBusEncyclopediaDatabase',
method: 'post',
data: query
})
}
// 修改百科数据库
export function updateBusEncyclopediaDatabase(query) {
return request({
url: '/admin/busEncyclopediaDatabase/updateBusEncyclopediaDatabase',
method: 'post',
data: query
})
}
// 获取百科数据库详情
export function getBusEncyclopediaDatabase(Id) {
return request({
url: '/admin/busEncyclopediaDatabase/getBusEncyclopediaDatabase/' + Id,
method: 'post'
})
}
// 删除百科数据库
export function deleteBusEncyclopediaDatabase(Id) {
return request({
url: '/admin/busEncyclopediaDatabase/deleteBusEncyclopediaDatabase/' + Id,
method: 'post'
})
}

58
src/components/TEditor/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div style="height: 100%; overflow: hidden;">
<editor v-model="myValue" :init="init" :enabled="enabled" :id="tinymceId" @change="updateModelValue"></editor>
<editor v-model="myValue" :init="init" :enabled="enabled" :id="tinymceId" @blur="updateModelValue"></editor>
</div>
</template>
@ -162,7 +162,7 @@ const init = reactive({
// 图片本地上传方法 点击上传后执行的事件
images_upload_handler: async (blobInfo, progress) => {
return new Promise(async (resolve, reject) => {
try {
try {
const formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
@ -171,15 +171,15 @@ const init = reactive({
if (res.code === 200) {
const successUrl = baseUrl + res.fileName;
resolve(successUrl);
resolve(successUrl);
} else {
reject('上传失败: ' + (res.msg || '服务器错误'));
}
} catch (error) {
console.error('上传错误:', error);
reject('上传失败: ' + (error.message || '网络错误'));
}
}
});
},
file_picker_callback: function (callback, value, meta) {
@ -233,23 +233,9 @@ const myValue = computed({
},
});
const handleImgUpload = (blobInfo, progress) => {
// const base64 = "data:image/png;base64," + blobInfo.base64();
// // 编辑器的上传图片内容被处理为<img src="success方法里面的参数" />
// success(base64);
//调用接口上传
var formData = new FormData();
formData.append('file', blobInfo.blob());
uploadFile(formData).then(res => {
if (res.code == 200) {
const successUrl = baseUrl + res.fileName
success(successUrl)
}
})
}
//监听富文本中的数据变化
// 监听富文本中的数据变化
watch(
() => myValue.value,
() => {
@ -286,7 +272,7 @@ window.onresize = function temp() {
// editorId就是给editor传的id
let editor = tinymce.get(tinymceId.value);
// editor.getContainer()拿到的是编辑器整个大容器
editor.getContainer().setAttribute("style", `height: ${props.height}px;`);
editor?.getContainer().setAttribute("style", `height: ${props.height}px;`);
};
// 设置值
@ -300,8 +286,34 @@ const handleGetContent = () => {
};
const updateModelValue = (val) => {
emits('update:modelValue', myValue.value)
nextTick(() => {
const editor = tinymce.get(tinymceId.value)
if (!editor) return
const content = editor.getContent()
const isEmpty = checkEmptyContent(editor)
// 更新绑定值
myValue.value = content
emits('update:modelValue', content)
if (isEmpty) {
console.warn('编辑器内容为空')
// 执行空内容处理逻辑
}
})
}
const checkEmptyContent = (editor) => {
const plainText = editor.getContent({ format: 'text' }).trim()
const htmlContent = editor.getContent()
// 检测常见空内容情况
return plainText === '' ||
htmlContent === '' ||
htmlContent === '<p><br data-mce-bogus="1"></p>' ||
htmlContent === '<p>&nbsp;</p>'
}
defineExpose({
handleSetContent,

2
src/router/index.js
View File

@ -427,7 +427,7 @@ export const dynamicRoutes = [
{
path: ':Id(\\d+)?',
component: () => import('@/views/ppeTool/toolForm'),
name: 'escTaskForm',
name: 'ppeToolForm',
meta: { title: 'ppeTool表单', activeMenu: '/ppeTool' }
}
]

42
src/views/databaseLibary/components/card.vue
View File

@ -9,10 +9,10 @@
</div>
<!-- 组织架构图 -->
<div class="organization-list">
<div class="organization-item" v-for="(item, index) in 14" :key="index">
<div class="organization-list" v-loading="loading">
<div class="organization-item" v-for="item in tableData">
<div class="fileContainer">
<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
<img :src="item.organPic" />
<div class="optionBtns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
@ -21,9 +21,8 @@
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
<div class="fileNameLable">XXXX组织架构图XXXX组织架构图</div>
</div>
<div class="fileNameLable">{{ item.title }}</div>
</div>
</div>
@ -36,15 +35,46 @@
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import addIcon from '@/assets/images/addIcon.png'
import editIcon from '@/assets/images/editIcon.png'
import deleteIcon from '@/assets/images/deleteIcon.png'
import { getBusEncyclopediaDatabasePage } from "@/api/databaseLibary"
const router = useRouter()
const queryParams = ref({
pageIndex: 1,
pageSize: 10,
category: undefined,
categoryTwo: undefined,
keyword: undefined
})
const loading = ref(true)
const tableData = ref([])
// 获取百科数据库分页列表
const getBusEncyclopediaDatabasePageList = () => {
loading.value = true
getBusEncyclopediaDatabasePage(queryParams.value).then(res => {
console.log('查询结果', res)
if (res.code == 200) {
tableData.value = res.data.list
}
loading.value = false
}).catch(() => {
loading.value = false
})
}
const handleOpenAddForm = () => {
router.push('/databaseLibaryForm')
}
// 暴露给父组件的参数和方法
defineExpose({
queryParams,
getBusEncyclopediaDatabasePageList
})
</script>
<style lang='scss' scoped>
.myoptionBtn {

409
src/views/databaseLibary/components/libaryForm.vue
View File

@ -16,87 +16,108 @@
<span>新建</span>
</div>
</template>
<el-form ref="ruleFormRef" :model="ruleForm" label-position="top">
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top">
<div class="applyFormContainer">
<el-form-item label="标题">
<el-input v-model="ruleForm.deptId" placeholder="请输入标题" clearable />
<el-form-item label="标题" prop="title">
<el-input v-model="ruleForm.title" placeholder="请输入标题" clearable />
</el-form-item>
<el-form-item label="所属类目">
<el-checkbox-group v-model="checkList" @change="handleChangeOneType">
<el-checkbox label="Option A" value="Value A" />
<el-checkbox label="Option B" value="Value B" />
<el-checkbox label="Option C" value="Value C" />
<el-checkbox label="disabled" value="Value disabled" />
<el-form-item label="所属类目" prop="category">
<el-checkbox-group v-model="categorySelectedValue">
<el-checkbox v-for="item in category_one" :label="item.label" :value="item.value"
@change="handleChangeOneType(item.value)" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="二级类目">
<el-checkbox-group v-model="checkList">
<el-checkbox label="Option A" value="Value A" />
<el-checkbox label="Option B" value="Value B" />
<el-checkbox label="Option C" value="Value C" />
<el-checkbox label="disabled" value="Value disabled" />
<el-form-item label="二级类目" prop="categoryTwo" v-if="ruleForm.category">
<el-checkbox-group v-model="categoryTwoSelectedValue">
<!-- 法律法规文件 -->
<el-checkbox v-if="ruleForm.category == '法律法规文件'" v-for="item in laws_regulations"
:label="item.label" :value="item.value" @change="handleChangeTwoType(item.value)" />
<!-- 组织架构图 -->
<el-checkbox v-if="ruleForm.category == '组织架构'" v-for="item in busDependencyData"
:label="item.dependencyName" :value="item.dependencyName"
@change="handleChangeTwoType(item.dependencyName)" />
<!-- 高压培训材料 -->
<el-checkbox v-if="ruleForm.category == '高压培训材料'" v-for="item in training_materials"
:label="item.label" :value="item.value" @change="handleChangeTwoType(item.value)" />
<!-- 高压安全会议 -->
<el-checkbox v-if="ruleForm.category == '高压安全会议'" v-for="item in safety_meeting"
:label="item.label" :value="item.value" @change="handleChangeTwoType(item.value)" />
<!-- 应急宣贯文件 -->
<el-checkbox v-if="ruleForm.category == '应急宣贯文件'" v-for="item in Last10Years"
:label="item.label" :value="item.value" @change="handleChangeTwoType(item.value)" />
<!-- 车型技术概述/随车卡 -->
<el-checkbox v-if="ruleForm.category == '车型技术概述' || ruleForm.category == '随车卡'"
v-for="item in vehicle_model" :label="item.label" :value="item.value"
@change="handleChangeTwoType(item.value)" />
<!-- 高压安全文件 -->
<el-checkbox v-if="ruleForm.category == '高压安全文件'" v-for="item in security_document"
:label="item.label" :value="item.value" @change="handleChangeTwoType(item.value)" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="正文内容">
<t-editor v-model="ruleForm.nonticeContent" @update:modelValue="updateEditor"
<el-form-item label="组织架构图" prop="organPic" v-if="ruleForm.category == '组织架构'">
<myFileUpload ref="organPicRef" @set-form-file="handleSetorganPic" />
</el-form-item>
<el-form-item label="正文内容" prop="mainText">
<t-editor v-model="ruleForm.mainText" @update:modelValue="updateEditor"
:height="400"></t-editor>
</el-form-item>
<el-form-item label="相关附件" prop="deptId">
<el-form-item label="相关附件">
<el-upload class="upload-demo" drag action="#" :http-request="requestDocUpload"
:file-list="docUploadList" :before-upload="beforeDocUpload"
:on-remove="removeDocUpload">
:file-list="docUploadList" :on-remove="removeDocUpload">
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
将文件拖曳至此区域，或 <em>点击上传</em>
</div>
<div class="el-upload__text">
支持扩展名：.xlsx
</div>
</el-upload>
</el-form-item>
<el-form-item label="相关链接">
<div class="borderLine"></div>
<el-table :data="tableData" style="width: 100%; margin-bottom: 20px;">
<el-table :data="showTableData" style="width: 100%; margin-bottom: 20px;">
<el-table-column label="序号" width="60">
<template #default="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="问题描述" />
<el-table-column prop="certificate" label="等级" align="center" width="100">
<el-table-column prop="remark" label="链接名称" min-width="260">
<template #default="scope">
<el-text v-if="scope.row.expired == 0" type="danger"
class="dangerText">主要偏差</el-text>
<el-text v-if="scope.row.expired == 1" type="danger"
class="dangerText">一般偏差</el-text>
<el-text v-if="scope.row.expired == 2" type="success"
class="successText">建议项</el-text>
<span v-show="!scope.row.editFlag">
{{ scope.row.remark }}
</span>
<el-input v-show="scope.row.editFlag" v-model="scope.row.remark" clearable />
</template>
</el-table-column>
<el-table-column prop="expired" label="整改负责人" width="120">
</el-table-column>
<el-table-column prop="startTime" label="计划完成时间" width="160">
<el-table-column prop="remark" label="链接地址" min-width="260">
<template #default="scope">
</template>
</el-table-column>
<el-table-column prop="expireTime" label="状态" width="100">
<template #default="scope">
<span v-show="!scope.row.editFlag">
{{ scope.row.remark }}
</span>
<el-input v-show="scope.row.editFlag" v-model="scope.row.remark" clearable />
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="150"
class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
v-hasPermi="['system:config:edit']">编辑</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:config:remove']">删除</el-button>
<div v-show="!scope.row.editFlag">
<el-button link type="primary"
@click="handleEditClick(scope.row, scope.$index)"
v-hasPermi="['system:config:edit']">编辑</el-button>
<el-divider direction="vertical" class="verticalLine" />
<el-button link type="primary" @click="handleRemove(scope.$index)"
v-hasPermi="['system:config:remove']">删除</el-button>
</div>
<div v-show="scope.row.editFlag">
<el-button link type="primary"
@click="handleSaveClick(scope.row, scope.$index)"
v-hasPermi="['system:config:edit']">保存</el-button>
<el-divider direction="vertical" class="verticalLine" />
<el-button link type="primary"
@click="handleCancelClick(scope.row, scope.$index)"
v-hasPermi="['system:config:remove']">取消</el-button>
</div>
</template>
</el-table-column>
</el-table>
<el-button class="problemAddBtn">
<el-button class="problemAddBtn" @click="handleAddLink">
<img :src="grayAddIcon" class="custom-icon" style="margin-right: 10px;" />
新增
</el-button>
@ -114,109 +135,195 @@
</template>
<script setup>
import { reactive } from 'vue'
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { UploadFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { getCustomerBusDependencyPage } from "@/api/system/dependency"
import { uploadFile } from "@/api/qualification/myQualifications"
import { addBusEncyclopediaDatabase, updateBusEncyclopediaDatabase, getBusEncyclopediaDatabase } from "@/api/databaseLibary"
import TEditor from '@/components/TEditor/index.vue'
import myFileUpload from './myFileUpload.vue'
import grayAddIcon from '@/assets/images/grayAddIcon.png'
const router = useRouter()
const route = useRoute()
const levelList = ref([
{ title: '高压PPE/工具管理', path: '/ppeTool' },
{ title: '新建', path: '/ppeToolForm' },
{ title: '百科数据库', path: '/databaseLibary' },
{ title: '新建', path: '/databaseLibaryForm' },
])
const baseUrl = import.meta.env.VITE_APP_BASE_API
const formTitle = ref('新建')
// 显示相关链接数据
const showTableData = ref([])
// 缓存相关链接数据
const cachShowTableData = ref([])
// 相关附件集合
const docUploadList = ref([])
const { proxy } = getCurrentInstance()
// 一级类目和二级类目字典
const { category_one, laws_regulations, training_materials, safety_meeting, vehicle_model, security_document } = proxy.useDict("category_one", "laws_regulations", "training_materials", "safety_meeting", "vehicle_model", "security_document")
const data = reactive({
ruleForm: {},
rules: {
targetQualification: [{ required: true, message: "目标资质不能为空", trigger: "change" }],
employeeNumber: [{ required: true, message: "员工工号不能为空", trigger: "blur" }],
employeeChineseName: [{ required: true, message: "员工姓名(中文)不能为空", trigger: "blur" }],
employeeEnglishName: [{ required: true, message: "员工姓名(英文)", trigger: "blur" }],
departmentName: [{ required: true, message: "部门不能为空", trigger: "change" }],
officeName: [{ required: true, message: "科室不能为空", trigger: "change" }],
localityName: [{ required: true, message: "属地不能为空", trigger: "change" }],
localityManager: [{ required: true, message: "属地ESC不能为空", trigger: "blur" }],
title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
category: [{ required: true, message: "所属类目不能为空", trigger: "change" }],
categoryTwo: [{ required: true, message: "二级类目不能为空", trigger: "blur" }],
mainText: [{ required: true, message: "正文内容不能为空", trigger: "blur" }],
organPic: [{ required: true, message: "组织架构图不能为空", trigger: "change" }]
},
})
const { ruleForm, rules } = toRefs(data)
const checkList = ref([])
const handleChangeOneType = (val) => {
console.log('dafdf', val)
// 初始化
onMounted(() => {
getLast10Years();
getBusDependencyData();
const id = route.params && route.params.Id
if (id) {
ruleForm.value.id = id
formTitle.value = '编辑'
getDetailInfo(id)
levelList.value = [
{ title: '百科数据库', path: '/databaseLibary' },
{ title: '编辑', path: '/databaseLibaryForm' },
]
} else {
ruleForm.value.id = null
formTitle.value = '新建'
levelList.value = [
{ title: '百科数据库', path: '/databaseLibary' },
{ title: '新建', path: '/databaseLibaryForm' },
]
}
});
// 年度数据
const Last10Years = ref([]);
// 当前年度
const currentYear = ref(new Date().getFullYear());
// 生成最近10年年度
const getLast10Years = () => {
Last10Years.value = []
for (let i = 0; i < 10; i++) {
Last10Years.value.push({ value: currentYear.value - i, label: currentYear.value - i });
}
};
// 属地数据
const busDependencyData = ref([])
// 获取属地数据
const getBusDependencyData = () => {
getCustomerBusDependencyPage({
pageIndex: 1,
pageSize: 100,
}).then(response => {
if (response.code == 200) {
busDependencyData.value = response.data.list
}
})
}
// 获取详情
const getDetailInfo = (id) => {
showTableData.value = []
cachShowTableData.value = []
getBusEncyclopediaDatabase(id).then(res => {
if (res.code == 200) {
ruleForm.value = res.data
ruleForm.value.year = res.data.year.toString()
escUserName.value = res.data.escUserName
escWorkNo.value = res.data.workNo
escUserId.value = res.data.escUserId
res.data.reviewProblemList.forEach(item => {
item.editFlag = false
showTableData.value.push(item)
cachShowTableData.value.push(item)
});
}
})
}
// 所属类目选择值
const categorySelectedValue = ref([])
const handleChangeOneType = (value) => {
console.log('所属类目选择值', value)
categorySelectedValue.value = [value] // 始终保持数组只有一个元素
ruleForm.value.category = value
}
// 二级类目选择
const categoryTwoSelectedValue = ref([])
const handleChangeTwoType = (value) => {
console.log('二级类目选择值', value)
categoryTwoSelectedValue.value = [value] // 始终保持数组只有一个元素
ruleForm.value.categoryTwo = value
}
// 设置组织架构图
const handleSetorganPic = (filePath) => {
ruleForm.value.organPic = filePath
}
// 富文本内容改变
const updateEditor = (newVal) => {
console.log('富文本内容改变', newVal)
ruleForm.value.mainText = newVal
}
// 新增链接
const handleAddLink = () => {
const itemlink = {
encyclopediaDatabaseId: ruleForm.id ? ruleForm.idid : null,
name: null,
linkUrl: null,
editFlag: true
}
showTableData.value.push(itemlink)
cachShowTableData.value.push(itemlink)
}
// 编辑链接
const handleEditClick = (row, rowIndex) => {
var cacheRow = JSON.stringify(row)
cachShowTableData.value[rowIndex] = JSON.parse(cacheRow)
row.editFlag = true
}
// 删除链接
const handleRemove = (index) => {
showTableData.value.splice(index, 1)
cachShowTableData.value.splice(index, 1)
}
// 保存链接
const handleSaveClick = (row, rowIndex) => {
row.editFlag = false
var editRow = JSON.stringify(row)
showTableData.value[rowIndex] = JSON.parse(editRow)
cachShowTableData.value[rowIndex] = JSON.parse(editRow)
}
// 取消编辑
const handleCancelClick = (row, rowIndex) => {
const cacheRow = JSON.stringify(cachShowTableData.value[rowIndex])
showTableData.value[rowIndex] = JSON.parse(cacheRow)
row.editFlag = false
}
// 自定义上传文件资料
const requestDocUpload = (options) => {
const { file } = options
var formData = new FormData();
formData.append('file', file);
uploadFile(formData).then(res => {
if (res.code == 200) {
docUploadList.value.push({
name: res.originalFilename,
url: baseUrl + res.fileName,
suffix: res.suffix
})
} else {
proxy.$modal.msgError(res.msg);
}
})
}
// 移除已上传文件列表
const removeDocUpload = (file, fileList) => {
docUploadList.value = docUploadList.value.filter(
item => item.name != file.name
);
}
}
const tableData = [
{
name: '提交申请',
approvalResult: '-',
approvalTime: '2016-05-03'
},
{
name: 'ESC审批',
approvalResult: '同意',
approvalTime: '2016-05-08'
},
]
// 判断是否为图片文件
const isImageFile = (suffix) => {
return ['jpeg', 'jpg', 'png'].includes(suffix?.toLowerCase())
}
const fileList = [
{
name: 'XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'png'
},
{
name: 'XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'pdf'
},
{
name: 'XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'ppt'
},
{
name: 'XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'mp3'
},
{
name: 'XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'mov'
},
{
name: 'XXXXX文件XXXXX文件XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'json'
},
{
name: 'XXXXX文件',
certificate: null,
suffix: 'xls'
},
{
name: 'XXXXX文件',
certificate: null,
suffix: 'txt'
},
{
name: 'XXXXX文件',
certificate: null,
suffix: 'doc'
},
{
name: 'XXXXX文件',
certificate: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
suffix: 'zip'
},
]
const { ruleForm, rules } = toRefs(data)
const handleCancel = () => {
proxy.resetForm("ruleFormRef")
router.push({
@ -224,26 +331,24 @@ const handleCancel = () => {
})
}
const handleSubmit = () => {
proxy.$refs["ruleFormRef"].validate(valid => {
proxy.$refs["ruleFormRef"].validate(valid => {
if (valid) {
router.push({
path: '/databaseLibary'
})
// if (form.value.roleId != undefined) {
// form.value.menuIds = getMenuAllCheckedKeys()
// updateRole(form.value).then(response => {
// proxy.$modal.msgSuccess("修改成功")
// open.value = false
// getList()
// })
// } else {
// form.value.menuIds = getMenuAllCheckedKeys()
// addRole(form.value).then(response => {
// proxy.$modal.msgSuccess("新增成功")
// open.value = false
// getList()
// })
// }
ruleForm.value.encyclopediaDatabaseLinkList = showTableData.value
if (ruleForm.value.id != undefined) {
updateBusEncyclopediaDatabase(ruleForm.value).then(response => {
proxy.$modal.msgSuccess("修改成功")
router.push({
path: '/databaseLibary'
})
})
} else {
addBusEncyclopediaDatabase(ruleForm.value).then(response => {
proxy.$modal.msgSuccess("新增成功")
router.push({
path: '/databaseLibary'
})
})
}
}
})
}
@ -511,7 +616,7 @@ const handleSubmit = () => {
height: 260px;
border-radius: 6px 6px 6px 6px;
background: #0090ff05;
padding: 30px 450px !important;
padding: 60px 450px !important;
}
.el-checkbox__label {

182
src/views/databaseLibary/components/list.vue
View File

@ -9,129 +9,16 @@
</div>
<!-- 文档列表 -->
<div class="document-list">
<div class="document-card">
<div class="document-list" v-loading="loading">
<div class="document-card" v-for="item in tableData">
<div class="document-header">
<span class="document-title">法律法规文件</span>
<span class="document-tag">HV1</span>
<span class="document-title">{{ item.title }}</span>
<span class="document-tag">{{ item.category }}</span>
<span class="document-tagTwo">{{ item.categoryTwo }}</span>
</div>
<p class="document-content">
蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，
提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台，用最小的工作量，
无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
</p>
<div class="document-content" v-html="item.mainText"></div>
<div class="document-footer">
<span class="publish-date">发布于2017-01-01 18:00</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
</div>
<div class="document-card">
<div class="document-header">
<span class="document-title">应急搜寻文件 HV2</span>
<span class="document-tag">HV2</span>
</div>
<p class="document-content">
蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，
提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 用最小的工作量，
无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
</p>
<div class="document-footer">
<span class="publish-date">发布于2017-01-01 18:00</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
</div>
<div class="document-card">
<div class="document-header">
<span class="document-title">法律法规文件</span>
<span class="document-tag">HV1</span>
</div>
<p class="document-content">
蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，
提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台，用最小的工作量，
无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
</p>
<div class="document-footer">
<span class="publish-date">发布于2017-01-01 18:00</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
</div>
<div class="document-card">
<div class="document-header">
<span class="document-title">应急搜寻文件 HV2</span>
<span class="document-tag">HV2</span>
</div>
<p class="document-content">
蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，
提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 用最小的工作量，
无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
</p>
<div class="document-footer">
<span class="publish-date">发布于2017-01-01 18:00</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
</div>
<div class="document-card">
<div class="document-header">
<span class="document-title">法律法规文件</span>
<span class="document-tag">HV1</span>
</div>
<p class="document-content">
蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，
提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台，用最小的工作量，
无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
</p>
<div class="document-footer">
<span class="publish-date">发布于2017-01-01 18:00</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
</el-button>
<el-button type="primary" class="editIconBtn">
<img :src="deleteIcon" class="editIconBtnicon" />
</el-button>
</div>
</div>
</div>
<div class="document-card">
<div class="document-header">
<span class="document-title">应急搜寻文件 HV2</span>
<span class="document-tag">HV2</span>
</div>
<p class="document-content">
蚂蚁金服设计平台 design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态，
提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 用最小的工作量，
无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
</p>
<div class="document-footer">
<span class="publish-date">发布于2017-01-01 18:00</span>
<span class="publish-date">发布于{{ item.createTime }}</span>
<div class="publish-btns">
<el-button type="primary" class="editIconBtn">
<img :src="editIcon" class="editIconBtnicon" />
@ -152,15 +39,46 @@
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import addIcon from '@/assets/images/addIcon.png'
import editIcon from '@/assets/images/editIcon.png'
import deleteIcon from '@/assets/images/deleteIcon.png'
import { getBusEncyclopediaDatabasePage } from "@/api/databaseLibary"
const router = useRouter()
const queryParams = ref({
pageIndex: 1,
pageSize: 10,
category: undefined,
categoryTwo: undefined,
keyword: undefined
})
const loading = ref(true)
const tableData = ref([])
// 获取百科数据库分页列表
const getBusEncyclopediaDatabasePageList = () => {
loading.value = true
getBusEncyclopediaDatabasePage(queryParams.value).then(res => {
console.log('查询结果', res)
if (res.code == 200) {
tableData.value = res.data.list
}
loading.value = false
}).catch(() => {
loading.value = false
})
}
const handleOpenAddForm = () => {
router.push('/databaseLibaryForm')
}
// 暴露给父组件的参数和方法
defineExpose({
queryParams,
getBusEncyclopediaDatabasePageList
})
</script>
<style lang='scss' scoped>
.myoptionBtn {
@ -227,8 +145,9 @@ const handleOpenAddForm = () => {
.document-tag {
height: 24px;
line-height: 24px;
line-height: 22px;
border-radius: 2px 2px 2px 2px;
border: 1px solid #0090FF;
background: #0090ff1c;
padding: 0px 14px;
margin-right: 10px;
@ -239,12 +158,33 @@ const handleOpenAddForm = () => {
color: #0090FF;
}
.document-tagTwo {
height: 24px;
line-height: 22px;
border-radius: 2px 2px 2px 2px;
border: 1px solid #DDA100;
background: #dda1001c;
padding: 0px 14px;
margin-right: 10px;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 14px;
text-align: center;
color: #DDA100;
}
.document-content {
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 16px;
color: #000000;
margin: 0 0 16px 0;
display: -webkit-box;
-webkit-line-clamp: 2;
/* 限制行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 22px;
}
.document-footer {

204
src/views/databaseLibary/components/myFileUpload.vue Normal file
View File

@ -0,0 +1,204 @@
<template>
<div>
<el-upload action="#" :http-request="requestUpload" list-type="picture-card" :file-list="fileList"
:on-change="handleChange" :show-file-list="false" :before-upload="beforeUpload" :limit="1">
<div v-if="fileList.length > 0 && fileList[0].url" class="image-wrapper">
<img :src="fileList[0].url" class="avatar viewFile"
@click.stop="handleCardPreview(fileList[0].url, fileList[0].suffix)" />
<div class="actions">
<span class="delete" @click.stop="handleRemoveImage">
<el-icon>
<Delete />
</el-icon>
</span>
</div>
</div>
<el-icon v-else class="avatar-uploader-icon">
<Plus />
</el-icon>
</el-upload>
<!-- 图片预览 -->
<el-dialog v-model="dialogVisible" title="图片预览">
<img :src="dialogImageUrl" class="preview-image" alt="Preview Image" />
</el-dialog>
</div>
</template>
<script setup>
import { defineExpose, ref } from 'vue'
import { Plus, Delete } from '@element-plus/icons-vue'
import { uploadFile } from "@/api/qualification/myQualifications"
const { proxy } = getCurrentInstance()
const emit = defineEmits(['setFormFile'])
// 文件列表初始化
const fileList = ref([])
const baseUrl = import.meta.env.VITE_APP_BASE_API
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const suffix = ref('')
const setFileInfo = (filePath) => {
// 处理无后缀名情况
if (!filePath || filePath.indexOf('.') === -1) return '';
var suffix = filePath.split('.').pop();
fileList.value = [{
name: filePath,
url: baseUrl + filePath,
suffix: suffix
}]
}
// 图片预览
const handleCardPreview = (filePath, _suffix) => {
suffix.value = _suffix
dialogImageUrl.value = filePath
dialogVisible.value = true
}
// 删除图片
const handleRemoveImage = () => {
fileList.value = []
emit('setFormFile', null)
}
// 自定义上传
const requestUpload = async (options) => {
const { file } = options
const formData = new FormData()
formData.append('file', file)
try {
const res = await uploadFile(formData)
if (res.code === 200) {
fileList.value = [{
name: res.originalFilename,
url: baseUrl + res.fileName,
suffix: res.suffix
}]
emit('setFormFile', res.fileName)
}
} catch (error) {
console.error('上传失败:', error)
}
}
// 文件类型校验
const beforeUpload = (file) => {
const validTypes = [
// 图片类型
"image/jpeg",
"image/jpg",
"image/png"
]
const isValidType = validTypes.includes(file.type)
// const isLt5M = file.size / 1024 / 1024 < 5
if (!isValidType) {
proxy.$modal.msgError("文件格式错误，请上传 JPG/JPEG/PNG 后缀的文件。");
return false
}
// if (!isLt5M) {
// proxy.$modal.msgError("文件大小不能超过5MB");
// return false
// }
return true
}
// 文件变化处理
const handleChange = (file, files) => {
// 可以在这里添加文件变化时的额外处理逻辑
// 不需要清空 fileList，因为上传逻辑会处理
fileList.value = []
}
// 暴露方法给父组件
defineExpose({
setFileInfo
});
</script>
<style lang="scss" scoped>
.viewFile {
width: 148px;
height: 148px;
border: 1px solid #dedede;
border-radius: 6px;
}
.upload-container {
position: relative;
display: inline-block;
}
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
.actions {
position: absolute;
top: 0;
right: 0;
display: none;
}
:deep(.el-upload--picture-card) {
position: relative;
}
.image-wrapper:hover .actions {
display: block;
}
.delete {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: rgba(0, 0, 0, 0.5);
color: white;
border-radius: 50%;
cursor: pointer;
margin: 5px;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.7);
}
}
.preview-image {
width: 100%;
max-height: 70vh;
object-fit: contain;
}
.unsupported-file {
padding: 0px;
text-align: center;
color: #999;
height: 70vh;
}
.myIcon {
width: 40px;
height: 40px;
color: #d2d2d2;
}
</style>

167
src/views/databaseLibary/index.vue
View File

@ -17,17 +17,50 @@
</div>
</div>
</div>
<div class="table-row">
<div class="table-row" v-if="activeOne != '全部'">
<div class="left-cell">二级类目</div>
<div class="right-cell">
<div class="right-content">
<el-button-group>
<el-button :class="activeOne === '全部' ? 'activeOption' : 'right-item'" key="two-1" link
<el-button :class="activeTwo === '全部' ? 'activeOption' : 'right-item'" key="two-1" link
@click="handleChoseTwoType('全部')">全部</el-button>
<el-button :class="activeTwo === item.value ? 'activeOption' : 'right-item'"
v-for="item in twoBtns" :key="item.key" link @click="activeTwo = item.value">
{{ item.lable }}
<!-- 法律法规类型 -->
<el-button v-if="activeOne == '法律法规文件'"
:class="activeTwo === dict.value ? 'activeOption' : 'right-item'"
v-for="dict in laws_regulations" :key="dict.value" link
@click="handleChoseTwoType(dict.value)"> {{ dict.label }} </el-button>
<!-- 组织架构类型 -->
<el-button v-if="activeOne == '组织架构'"
:class="activeTwo === dict.dependencyName ? 'activeOption' : 'right-item'"
v-for="dict in busDependencyData" :key="dict.dependencyName" link
@click="handleChoseTwoType(dict.dependencyName)"> {{ dict.dependencyName }}
</el-button>
<!-- 高压培训材料类型 -->
<el-button v-if="activeOne == '高压培训材料'"
:class="activeTwo === dict.value ? 'activeOption' : 'right-item'"
v-for="dict in training_materials" :key="dict.value" link
@click="handleChoseTwoType(dict.value)"> {{ dict.label }} </el-button>
<!-- 高压安全会议类型 -->
<el-button v-if="activeOne == '高压安全会议'"
:class="activeTwo === dict.value ? 'activeOption' : 'right-item'"
v-for="dict in safety_meeting" :key="dict.value" link
@click="handleChoseTwoType(dict.value)"> {{ dict.label }} </el-button>
<!-- 应急宣贯文件年度 -->
<el-button v-if="activeOne == '应急宣贯文件'"
:class="activeTwo === dict.value ? 'activeOption' : 'right-item'"
v-for="dict in Last10Years" :key="dict.value" link
@click="handleChoseTwoType(dict.value)"> {{ dict.label }}
</el-button>
<!-- 车型技术概述/随车卡类型 -->
<el-button v-if="activeOne == '车型技术概述' || activeOne == '随车卡'"
:class="activeTwo === dict.value ? 'activeOption' : 'right-item'"
v-for="dict in vehicle_model" :key="dict.value" link
@click="handleChoseTwoType(dict.value)"> {{ dict.label }} </el-button>
<!-- 高压安全文件类型 -->
<el-button v-if="activeOne == '高压安全文件'"
:class="activeTwo === dict.value ? 'activeOption' : 'right-item'"
v-for="dict in security_document" :key="dict.value" link
@click="handleChoseTwoType(dict.value)"> {{ dict.label }} </el-button>
</el-button-group>
</div>
</div>
@ -36,7 +69,7 @@
<div class="left-cell">其他选项</div>
<div class="right-cell">
<div class="right-content">
<el-input v-model="queryParams.phonenumber" placeholder="请输入关键字" clearable
<el-input v-model="keyWord" @blur="handleBlur" placeholder="请输入关键字" clearable
:prefix-icon="Search" class="mySearchInput" />
</div>
</div>
@ -48,58 +81,140 @@
</div>
</template>
<script setup>
import { ref } from 'vue'
import { onMounted, ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import Breadcrumb from '@/components/Breadcrumb'
import list from './components/list.vue'
import card from './components/card.vue'
import { getCustomerBusDependencyPage } from "@/api/system/dependency"
const { proxy } = getCurrentInstance()
// 一级类目和二级类目字典
const { category_one, laws_regulations, training_materials, safety_meeting, security_document } = proxy.useDict("category_one", "laws_regulations", "training_materials", "safety_meeting", "security_document")
const { category_one, laws_regulations, training_materials, safety_meeting, vehicle_model, security_document } = proxy.useDict("category_one", "laws_regulations", "training_materials", "safety_meeting", "vehicle_model", "security_document")
const router = useRouter()
const keyWord = ref('')
// 文件列表
const fileListRef = ref(null)
const isShowFileList = ref(true)
// 组织架构图列表
const fileCardRef = ref(null)
const isShowFileCard = ref(false)
const activeOne = ref('全部')
const activeOne = ref('全部')
const activeTwo = ref('全部')
const twoBtns = ref([
{ key: 'two-1', value: '全部', lable: '全部' },
{ key: 'two-2', value: 'HV1', lable: 'HV1' },
{ key: 'two-3', value: 'HV2', lable: 'HV2' },
{ key: 'two-4', value: 'HV3', lable: 'HV3' },
{ key: 'two-5', value: 'BS', lable: 'BS' },
{ key: 'two-6', value: 'BE', lable: 'BE' },
{ key: 'two-7', value: 'LLP', lable: 'LLP' }
])
// 初始化
onMounted(() => {
getLast10Years();
getBusDependencyData();
nextTick(() => {
fileListRef.value.getBusEncyclopediaDatabasePageList();
});
});
// 年度数据
const Last10Years = ref([]);
// 当前年度
const currentYear = ref(new Date().getFullYear());
// 生成最近10年年度
const getLast10Years = () => {
Last10Years.value = []
for (let i = 0; i < 10; i++) {
Last10Years.value.push({ value: currentYear.value - i, label: currentYear.value - i });
}
};
// 属地数据
const busDependencyData = ref([])
// 获取属地数据
const getBusDependencyData = () => {
getCustomerBusDependencyPage({
pageIndex: 1,
pageSize: 100,
}).then(response => {
if (response.code == 200) {
busDependencyData.value = response.data.list
}
})
}
// 一级类目选择事件
const handleChoseOneType = (_type) => {
console.log('选择事件', _type)
activeOne.value = _type
activeTwo.value = '全部'
if (_type == '组织架构') {
isShowFileList.value = false
isShowFileCard.value = true
nextTick(() => {
// 给一级类目赋值并查询
fileCardRef.value.queryParams.category = _type
fileCardRef.value.queryParams.categoryTwo = undefined
fileCardRef.value.queryParams.keyword = undefined
fileCardRef.value.getBusEncyclopediaDatabasePageList();
});
} else {
isShowFileList.value = true
isShowFileCard.value = false
nextTick(() => {
// 给一级类目赋值并查询
fileListRef.value.queryParams.category = _type
fileListRef.value.queryParams.categoryTwo = undefined
fileListRef.value.queryParams.keyword = undefined
fileListRef.value.getBusEncyclopediaDatabasePageList();
});
}
}
// 二级类目选择事件
const handleChoseTwoType = (_type) => {
console.log('选择事件', _type)
activeTwo.value = _type
if (activeOne.value == '组织架构') {
nextTick(() => {
// 给一级类目赋值并查询
fileCardRef.value.queryParams.category = activeOne.value
fileCardRef.value.queryParams.categoryTwo = _type
fileCardRef.value.queryParams.keyword = undefined
fileCardRef.value.getBusEncyclopediaDatabasePageList();
});
}
else {
nextTick(() => {
// 给一级类目赋值并查询
fileListRef.value.queryParams.category = activeOne.value
fileListRef.value.queryParams.categoryTwo = _type
fileListRef.value.queryParams.keyword = undefined
fileListRef.value.getBusEncyclopediaDatabasePageList();
});
}
}
// 关键字查询
const handleBlur = (event) => {
console.log('输入框失去焦点', event.target.value)
if (activeOne.value == '组织架构') {
nextTick(() => {
// 给一级类目赋值并查询
fileCardRef.value.queryParams.category = activeOne.value
fileCardRef.value.queryParams.categoryTwo = activeTwo.value
fileCardRef.value.queryParams.keyword = event.target.value
fileCardRef.value.getBusEncyclopediaDatabasePageList();
});
}
else {
nextTick(() => {
// 给一级类目赋值并查询
fileListRef.value.queryParams.category = activeOne.value
fileListRef.value.queryParams.categoryTwo = activeTwo.value
fileListRef.value.queryParams.keyword = event.target.value
fileListRef.value.getBusEncyclopediaDatabasePageList();
});
}
const queryParams = ref({
pageNum: 1,
pageSize: 10,
userName: undefined,
deptId: undefined,
qualification: undefined
})
}
</script>
<style lang='scss' scoped>

26
src/views/safetyReview/dashboard/detailForm.vue
View File

@ -22,7 +22,8 @@
<el-row class="myRow" :gutter="20">
<el-col :span="8">
<el-form-item label="年度:">
<el-select v-model="detailForm.year" placeholder="请选择工具名称" style="width: 100px;">
<el-select v-model="detailForm.year" placeholder="请选择工具名称" style="width: 100px;"
@change="handleYearChange">
<el-option v-for="item in allSafetyData" :key="item.year" :label="item.year"
:value="item.year" />
</el-select>
@ -164,19 +165,24 @@ const getListByDependencyList = (_dependencyId) => {
if (res.data.length > 0) {
// 默认第一条为显示数据
detailForm.value = res.data[0]
detailForm.value.reviewProblemList.forEach(item => {
showTableData.value.push(item)
cachShowTableData.value.push(item)
});
}
// ruleForm.value = res.data
// ruleForm.value.year = res.data.year.toString()
// escUserName.value = res.data.escUserName
// escWorkNo.value = res.data.workNo
// escUserId.value = res.data.escUserId
// res.data.reviewProblemList.forEach(item => {
// showTableData.value.push(item)
// cachShowTableData.value.push(item)
// });
}
})
}
const handleYearChange = (value) => {
console.log('选中的值:', value)
// 这里可以执行选择变化后的逻辑
detailForm.value = allSafetyData.value.find(item => item.year === value);
detailForm?.value.reviewProblemList.forEach(item => {
showTableData.value.push(item)
cachShowTableData.value.push(item)
});
}
// 问题等级过滤
const handleChangeLeve = (index, _level) => {
activeIndex.value = index

4
src/views/safetyReview/dashboard/index.vue
View File

@ -12,7 +12,7 @@
</el-select>
</el-form-item>
</el-form>
<div class="headerTitle" v-if="factoryArea">{{ factoryArea }}</div>
<div class="headerTitles" v-if="factoryArea">{{ factoryArea }}</div>
<div class="rootSvgContainer">
<div ref="svgContainer"></div>
<!-- 属地信息弹出层 -->
@ -882,7 +882,7 @@ const initShunYi = () => {
box-shadow: none;
}
.headerTitle {
.headerTitles {
font-family: Microsoft YaHei;
font-weight: 700;
font-size: 18px;

4
src/views/safetyReview/examinerTasks/taskForm.vue
View File

@ -28,14 +28,14 @@
</el-col>
<el-col :span="8">
<el-form-item label="部门" prop="deptId">
<el-tree-select v-model="ruleForm.deptId" :data="enabledDeptOptions" clearable
<el-tree-select v-model="ruleForm.deptId" filterable :data="enabledDeptOptions" clearable
:props="{ value: 'id', label: 'label', children: 'children' }" value-key="id"
placeholder="请选择部门" check-strictly />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="属地" prop="dependencyId">
<el-select v-model="ruleForm.dependencyId" placeholder="请选择属地" clearable
<el-select v-model="ruleForm.dependencyId" filterable placeholder="请选择属地" clearable
@change="handleChoseDependency">
<el-option v-for="item in busDependencyData" :key="item.id"
:label="item.dependencyName" :value="item.id" />