| | |
| | | <script setup> |
| | | <template> |
| | | <div class="app-container"> |
| | | <div style="margin-bottom: 10px"> |
| | | <el-form style="display: flex;flex-wrap: wrap;"> |
| | | <el-form-item label="企业名称:" v-if="data.isAdmin" style="margin-left: 20px"> |
| | | <el-select |
| | | v-model="data.queryParams.companyName" |
| | | filterable |
| | | remote |
| | | @change="selectValue" |
| | | reserve-keyword |
| | | remote-show-suffix |
| | | :remote-method="getCompanyList" |
| | | :loading="loadingCompany" |
| | | style="width: 240px" |
| | | > |
| | | <el-option |
| | | v-for="item in data.companyList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.name" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <!-- <el-form-item v-if="data.isAdmin">--> |
| | | <!-- <el-button type="primary" style="margin-left: 30px" @click="searchClick">查询</el-button>--> |
| | | <!-- <el-button plain @click="reset">重置</el-button>--> |
| | | <!-- </el-form-item>--> |
| | | </el-form> |
| | | </div> |
| | | <div class="bottom"> |
| | | <div class="left"> |
| | | <span style="font-weight: 600;font-size: 24px">目录</span> |
| | | <el-tree |
| | | v-if="data.treeData" |
| | | style="max-width: 600px;margin-top: 20px" |
| | | :data="data.treeData" |
| | | :props="data.defaultProps" |
| | | :default-expand-all="true" |
| | | :expand-on-click-node="false" |
| | | highlight-current |
| | | @node-click="handleNodeClick" |
| | | ></el-tree> |
| | | <el-empty v-else description="暂无数据" /> |
| | | </div> |
| | | <div class="right"> |
| | | <el-form :model="state.form" size="default" ref="noticeRef" :rules="data.formRules" label-position="left" label-width="125px" > |
| | | <el-form-item label="具体内容" prop="content" > |
| | | <el-input v-model="state.form.content" :rows="4" type="textarea" /> |
| | | </el-form-item> |
| | | <el-form-item label="标准分析" prop="analysis" > |
| | | <el-input v-model="state.form.analysis" :rows="4" type="textarea" /> |
| | | </el-form-item> |
| | | <el-form-item label="应准备材料" prop="dataList"> |
| | | <el-button type="primary" @click="openDataDialog('add',{})">新增</el-button> |
| | | </el-form-item> |
| | | <el-table style="margin:15px 0;width: 100%" :data="state.form.dataList" :border="true" > |
| | | <el-table-column type="index" label="序号" width="80" align="center"></el-table-column> |
| | | <el-table-column label="材料名称" prop="name" align="center" /> |
| | | <el-table-column label="材料模板" prop="fileName" align="center" > |
| | | <template #default="scope"> |
| | | <el-link v-if="scope.row.fileName" style="" type="primary" @click="downloadFile(scope.row)">{{scope.row.fileName}}</el-link> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width" > |
| | | <template #default="scope"> |
| | | <el-button link type="primary" @click="openDataDialog('edit',scope.row)" >编辑</el-button> |
| | | <el-button link type="danger" @click="handleDataDelete(scope.row)" >删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <el-form-item label="记录上传" prop="recordList"> |
| | | <el-button type="primary" @click="openRecordDialog('add',{})">新增</el-button> |
| | | </el-form-item> |
| | | <el-table style="margin-top: 15px;width: 100%" :data="state.form.recordList" :border="true" > |
| | | <el-table-column type="index" label="序号" width="80" align="center"></el-table-column> |
| | | <el-table-column label="记录名称" prop="name" align="center" /> |
| | | <el-table-column label="材料模板" prop="fileName" align="center"> |
| | | <template #default="scope"> |
| | | <el-link v-if="scope.row.fileName" style="" type="primary" @click="downloadFile(scope.row)">{{scope.row.fileName}}</el-link> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width" > |
| | | <template #default="scope"> |
| | | <el-button link type="primary" @click="openRecordDialog('edit',scope.row)" >编辑</el-button> |
| | | <el-button link type="danger" @click="handleRecordDelete(scope.row)" >删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-form> |
| | | <div style="display: flex;align-items: center;justify-content: right;margin-top: 10px"> |
| | | <el-button v-if="state.form.id" type="danger" @click="deleteData">删除</el-button> |
| | | <el-button type="primary" @click="addData()">保存</el-button> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | <dataDialog ref="dialogRef" @getList="getFileList"></dataDialog> |
| | | <record-dialog ref="dialogRecordRef" @getList="getFileList"></record-dialog> |
| | | </div> |
| | | </template> |
| | | <script setup> |
| | | import {getCurrentInstance, onMounted, reactive, ref, toRefs} from "vue"; |
| | | import Cookies from "js-cookie"; |
| | | import {ElMessage, ElMessageBox} from "element-plus"; |
| | | import {getCompany} from "@/api/onlineEducation/company"; |
| | | import {getToken} from "@/utils/auth"; |
| | | import {delPic} from "@/api/onlineEducation/banner"; |
| | | import dataDialog from "@/views/build/conpanyFunctionConsult/qualityManage/rangeManage/range/components/dataDialog.vue" |
| | | import recordDialog from "@/views/build/conpanyFunctionConsult/qualityManage/rangeManage/range/components/recordDialog.vue" |
| | | import {delSysClause} from "@/api/staffManage/staff"; |
| | | import {getCatalogue} from "@/api/qualityManage/catalog"; |
| | | import { |
| | | addCatalogueData, |
| | | addFile, delCatalogueData, |
| | | delFile, |
| | | editCatalogueData, |
| | | getCatalogueData, |
| | | getFile |
| | | } from "@/api/qualityManage/range"; |
| | | import axios from "axios"; |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | const loading = ref(false); |
| | | const noticeRef = ref(); |
| | | const dialogRef = ref(); |
| | | const dialogRecordRef = ref(); |
| | | const loadingCompany = ref(false) |
| | | const data = reactive({ |
| | | queryParams: { |
| | | type: 4, |
| | | companyId: null, |
| | | }, |
| | | |
| | | formRules: { |
| | | content: [{ required: true, message: '请输入具体内容', trigger: 'blur' }], |
| | | analysis: [{ required: true, message: '请输入标准分析', trigger: 'blur' }], |
| | | dataList: [{ required: true, message: '', trigger: 'blur' }], |
| | | recordList: [{ required: true, message: '', trigger: 'blur' }] |
| | | }, |
| | | companyList: [], |
| | | isAdmin: false, |
| | | defaultProps: { |
| | | children: 'children', |
| | | label: 'name', |
| | | }, |
| | | treeData: [], |
| | | dataVisible: false, |
| | | dataTitle: '', |
| | | uploadUrl: import.meta.env.VITE_APP_BASE_API + '/system/common/uploadFile', |
| | | header: { |
| | | Authorization: getToken() |
| | | }, |
| | | fileLimit: 1, |
| | | fileDataList: [] |
| | | |
| | | }); |
| | | const state = reactive({ |
| | | form: { |
| | | id: '', |
| | | companyId: null, |
| | | content: '', |
| | | analysis: '', |
| | | catalogueId: null, |
| | | dataList: [], |
| | | recordList: [] |
| | | }, |
| | | }) |
| | | const dataList = ref([]); |
| | | const total = ref(0); |
| | | |
| | | const { queryParams } = toRefs(data); |
| | | |
| | | onMounted(async () => { |
| | | const userInfo = JSON.parse(Cookies.get('userInfo')) |
| | | console.log("userInfo",userInfo) |
| | | data.isAdmin = userInfo.userType === 0; |
| | | if(data.isAdmin){ |
| | | await getCompanyList() |
| | | data.queryParams.companyId = data.companyList[0].id |
| | | data.queryParams.companyName = data.companyList[0].name |
| | | state.form.companyId = data.companyList[0].id |
| | | }else { |
| | | data.queryParams.companyId = userInfo.companyId |
| | | state.form.companyId = userInfo.companyId |
| | | } |
| | | await getList(); |
| | | |
| | | }) |
| | | const getList = async () => { |
| | | data.treeData = []; |
| | | loading.value = true; |
| | | const param = { |
| | | type : 4 |
| | | } |
| | | const res = await getCatalogue(param); |
| | | if(res.code === 200){ |
| | | const menu = await handleTree(res.data.data) |
| | | data.treeData = menu; |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | loading.value = false; |
| | | |
| | | } |
| | | const handleTree = (val) => { |
| | | const traverse = (nodes, currentPath = '') => { |
| | | nodes.forEach((node, index) => { |
| | | node.name = `${node.number} ${node.mess}`; |
| | | // 递归处理子节点(传递当前序号路径) |
| | | if (node.children && node.children.length) { |
| | | traverse(node.children, node.number); |
| | | } |
| | | }); |
| | | }; |
| | | traverse(val); // 从根节点开始遍历 |
| | | return val; |
| | | } |
| | | const getCompanyList = async (val)=>{ |
| | | if(val){ |
| | | loadingCompany.value = true; |
| | | const queryParams = { |
| | | name: val |
| | | } |
| | | const res = await getCompany(queryParams) |
| | | if (res.code == 200) { |
| | | loadingCompany.value = false; |
| | | data.companyList = res.data.list |
| | | |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | | }else { |
| | | loadingCompany.value = true; |
| | | const queryParams = { |
| | | pageSize: 10, |
| | | pageNum: 1, |
| | | } |
| | | const res = await getCompany(queryParams) |
| | | if (res.code == 200) { |
| | | loadingCompany.value = false; |
| | | data.companyList = res.data.list |
| | | |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | | } |
| | | } |
| | | const selectValue = async (val) => { |
| | | state.form.analysis = '' |
| | | state.form.content = '' |
| | | state.form.id = '' |
| | | data.companyList.forEach(item => { |
| | | if(item.name === val){ |
| | | data.queryParams.companyId = item.id |
| | | state.form.companyId = item.id |
| | | } |
| | | }) |
| | | if(state.form.catalogueId){ |
| | | await getCatalogDataList() |
| | | await getFileList() |
| | | } |
| | | |
| | | } |
| | | |
| | | const handleNodeClick = async (val) => { |
| | | state.form.analysis = '' |
| | | state.form.content = '' |
| | | state.form.id = '' |
| | | state.form.catalogueId = val.id |
| | | await getCatalogDataList() |
| | | await getFileList() |
| | | } |
| | | const getCatalogDataList = async () => { |
| | | state.form.analysis = '' |
| | | state.form.content = '' |
| | | state.form.id = '' |
| | | const param = { |
| | | catalogueId: state.form.catalogueId, |
| | | companyId: state.form.companyId |
| | | } |
| | | const res = await getCatalogueData(param); |
| | | if(res.code === 200){ |
| | | // if(res.data.data && res.data.data.length >0){ |
| | | state.form.content= res.data.data[0]?.content |
| | | state.form.analysis = res.data.data[0]?.analysis |
| | | state.form.id = res.data.data[0]?.id |
| | | // } |
| | | |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | } |
| | | |
| | | const addData = async () => { |
| | | if(!state.form.catalogueId){ |
| | | ElMessage.warning('请先选择左侧目录!') |
| | | return |
| | | } |
| | | if(state.form.dataList && state.form.dataList.length==0){ |
| | | ElMessage.warning('请上传应准备材料!') |
| | | return |
| | | } |
| | | if(state.form.recordList && state.form.recordList.length==0){ |
| | | ElMessage.warning('请上传记录!') |
| | | return |
| | | } |
| | | const valid = await noticeRef.value.validate(); |
| | | if(valid){ |
| | | |
| | | if(state.form.id){ |
| | | //编辑 |
| | | const {dataList,recordList,...data} = state.form |
| | | const res = await editCatalogueData(data) |
| | | if(res.code == 200){ |
| | | ElMessage.success('编辑成功') |
| | | await getCatalogDataList() |
| | | await getFileList() |
| | | |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | |
| | | }else { |
| | | //新增 |
| | | const {id,dataList,recordList,...data} = state.form |
| | | const res = await addCatalogueData(data) |
| | | if(res.code == 200){ |
| | | ElMessage.success('新增成功') |
| | | await getCatalogDataList() |
| | | await getFileList() |
| | | |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | } |
| | | |
| | | |
| | | } |
| | | } |
| | | const openDataDialog = (type, value) => { |
| | | if(!state.form.catalogueId){ |
| | | ElMessage.warning('请先选择左侧目录!') |
| | | return |
| | | } |
| | | dialogRef.value.openDialog(type, value, state.form.companyId,state.form.catalogueId); |
| | | } |
| | | const openRecordDialog = (type, value) => { |
| | | if(!state.form.catalogueId){ |
| | | ElMessage.warning('请先选择左侧目录!') |
| | | return |
| | | } |
| | | dialogRecordRef.value.openDialog(type, value, state.form.companyId,state.form.catalogueId); |
| | | } |
| | | |
| | | const handleDataDelete = (val) => { |
| | | ElMessageBox.confirm( |
| | | '确定删除此条数据?', |
| | | '提示', |
| | | { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then( async() => { |
| | | const res = await delFile(val.id) |
| | | if(res.code == 200){ |
| | | ElMessage.success('数据删除成功') |
| | | await getFileList() |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | const handleRecordDelete = (val) => { |
| | | ElMessageBox.confirm( |
| | | '确定删除此条数据?', |
| | | '提示', |
| | | { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then( async() => { |
| | | const res = await delFile(val.id) |
| | | if(res.code == 200){ |
| | | ElMessage.success('数据删除成功') |
| | | await getFileList() |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | }) |
| | | } |
| | | const deleteData = () => { |
| | | ElMessageBox.confirm( |
| | | '确定删除此条数据?', |
| | | '提示', |
| | | { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then( async() => { |
| | | const res = await delCatalogueData(state.form.id) |
| | | if(res.code == 200){ |
| | | ElMessage.success('数据删除成功') |
| | | await getCatalogDataList() |
| | | await getFileList() |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | }) |
| | | } |
| | | const reset = async () => { |
| | | data.queryParams = { |
| | | companyId: '', |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | } |
| | | data.companyList = []; |
| | | await getList(); |
| | | await getCompanyList() |
| | | data.queryParams.companyId = data.companyList[0].id |
| | | data.queryParams.companyName = data.companyList[0].name |
| | | state.form.companyId = data.companyList[0].id |
| | | } |
| | | |
| | | const getFileList = async () => { |
| | | const queryParams = { |
| | | companyId: state.form.companyId, |
| | | catalogueId: state.form.catalogueId |
| | | } |
| | | const res = await getFile(queryParams) |
| | | if (res.code == 200) { |
| | | state.form.dataList = res.data.data?.filter(i => i.type == 1) |
| | | state.form.recordList = res.data.data?.filter(i => i.type == 2) |
| | | } else { |
| | | ElMessage.warning(res.message) |
| | | } |
| | | } |
| | | const downloadFile = (e)=>{ |
| | | axios.get(import.meta.env.VITE_APP_BASE_API + '/' +e.filePath,{headers:{'Content-Type': 'application/json','Authorization': `${getToken()}`},responseType: 'blob'}).then(res=>{ |
| | | if (res) { |
| | | const link = document.createElement('a') |
| | | let blob = new Blob([res.data],{type: res.data.type}) |
| | | link.style.display = "none"; |
| | | link.href = URL.createObjectURL(blob); // 创建URL |
| | | link.setAttribute("download", e.fileName); |
| | | document.body.appendChild(link); |
| | | link.click(); |
| | | document.body.removeChild(link); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: '文件读取失败' |
| | | }); |
| | | } |
| | | }) |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | 组织环境 |
| | | </template> |
| | | |
| | | <style scoped lang="scss"> |
| | | .app-container{ |
| | | .bottom{ |
| | | display: flex; |
| | | width: auto; |
| | | height: auto; |
| | | border: 1px solid #c3c3c3; |
| | | margin: 20px; |
| | | |
| | | .left{ |
| | | border-right: 1px solid darkgray; |
| | | display: flex; |
| | | min-width: 240px; |
| | | margin: 20px 20px 20px 50px; |
| | | flex-direction: column; |
| | | :deep(.el-tree){ |
| | | background: none; |
| | | } |
| | | } |
| | | .right{ |
| | | margin: 20px 20px 20px 10px; |
| | | flex: 1; |
| | | min-width: 100px; |
| | | :deep(.el-form-item__label){ |
| | | font-weight: 600;font-size: 20px |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | | } |
| | | </style> |