From 7e810cf016d1b637b693eeca4a4d8447083c68e2 Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期四, 07 八月 2025 14:59:34 +0800 Subject: [PATCH] 修改 --- src/views/build/conpanyFunctionConsult/companyInfo/overview/index.vue | 378 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 372 insertions(+), 6 deletions(-) diff --git a/src/views/build/conpanyFunctionConsult/companyInfo/overview/index.vue b/src/views/build/conpanyFunctionConsult/companyInfo/overview/index.vue index 677e171..0642cf9 100644 --- a/src/views/build/conpanyFunctionConsult/companyInfo/overview/index.vue +++ b/src/views/build/conpanyFunctionConsult/companyInfo/overview/index.vue @@ -1,11 +1,377 @@ -<script setup> - -</script> - <template> - <div>公司概况</div> + <div class="app-container"> + <div style="margin-bottom: 10px"> + <el-form style="display: flex;flex-wrap: wrap"> + <el-form-item> + <el-button + type="primary" + plain + icon="Plus" + @click="openDialog('add',{})" + >新增</el-button> + </el-form-item> + <el-form-item label="企业名称:" v-if="data.isAdmin" style="margin-left: 20px"> + <el-select v-model="data.queryParams.companyId" filterable placeholder="请选择" clearable> + <el-option + v-for="item in data.companyList" + :key="item.id" + :label="item.name" + :value="item.id"> + </el-option> + </el-select> +<!-- <el-select--> +<!-- v-model="data.companyName"--> +<!-- filterable--> +<!-- remote--> +<!-- @change="selectValue"--> +<!-- reserve-keyword--> +<!-- placeholder="请输入企业名称"--> +<!-- 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-item> + <el-button type="primary" style="margin-left: 15px" icon="Upload" @click="exportData">导入</el-button> + </el-form-item> + </el-form> + </div> + <!-- 表格数据 --> + <el-table v-loading="loading" :data="dataList" :border="true"> + <el-table-column type="index" label="序号" width="80" align="center"></el-table-column> + <el-table-column label="企业名称" prop="companyName" align="center" /> + <el-table-column label="操作" align="center" class-name="small-padding fixed-width" > + <template #default="scope"> + <el-button link type="primary" @click="openDialog('review',scope.row)" >查看</el-button> + <el-button link type="primary" @click="openDialog('edit',scope.row)" >编辑</el-button> + <el-button link type="danger" @click="handleDelete(scope.row)" >删除</el-button> + </template> + </el-table-column> + </el-table> + + <div class="pag-container"> + <el-pagination + v-model:current-page="data.queryParams.pageNum" + v-model:page-size="data.queryParams.pageSize" + :page-sizes="[10,15,20,25]" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + /> + </div> + <overviewDialog ref="noticeRef" @getList = "getList"></overviewDialog> + <el-dialog + v-model="data.exportDialog" + title="导入模板" + width="500px" + :before-close="handleCloseExport" + :close-on-press-escape="false" + :close-on-click-modal="false" + > + <el-form :model="state.form" size="default" ref="superRef" :rules="state.formRules" label-width="110px" > + <el-form-item label="企业名称:" v-if="data.isAdmin" style="margin-left: 20px"> + <el-select v-model="state.form.companyId" filterable placeholder="请选择" clearable> + <el-option + v-for="item in data.companyList" + :key="item.id" + style="width: 100%" + :label="item.name" + :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="模板:" > + <el-button @click="downloadFileTable" size="default" :icon="Download" type="primary" plain>下载模板</el-button> + </el-form-item> + <el-form-item label="导入文件"> + <el-upload + accept=".doc,.docx" + :before-upload="beforeUpload" + v-model:file-list="state.exportFileList" + action="#" + :auto-upload="false" + :on-change="handleChange" + style="width: 100%" + > + <el-button :icon="Upload" size="default" type="primary">点击上传</el-button> + </el-upload> + </el-form-item> + </el-form> + <template #footer> + <span class="dialog-footer"> + <el-button @click="handleCloseExport" size="default">取 消</el-button> + <el-button type="primary" @click="onUpload" size="default">确定</el-button> + </span> + </template> + </el-dialog> + </div> </template> -<style scoped lang="scss"> +<script setup> +import {getCurrentInstance, onMounted, reactive, ref, toRefs} from "vue"; +import overviewDialog from "./components/overviewDialog.vue" +import {ElMessage, ElMessageBox} from "element-plus"; +import {getCompany} from "@/api/onlineEducation/company"; +import Cookies from "js-cookie"; +import {delCom, getCom} from "@/api/companyInfo/overview"; +import {Download, Upload} from "@element-plus/icons-vue"; +import {uploadTemplate} from "@/api/staffManage/staff"; +import {uploadInOverview} from "@/api/companyInfo/basicInfo"; +const { proxy } = getCurrentInstance(); +const loading = ref(false); +const noticeRef = ref(); +const loadingCompany = ref(false) +const checkFiles = (rule, value, callback) => { + if (state.exportFileList.length == 0) { + callback(new Error('请上传导入文件')) + } else { + callback() + } +} +const data = reactive({ + queryParams: { + pageNum: 1, + pageSize: 10, + companyId: null, + }, + companyList: [], + isAdmin: false, + companyName: '', + exportDialog: false, +}); +const state = reactive({ + form: { + id: null, + filePath: '', + companyId: null + }, + formRules:{ + companyId: [{ required: true, message: '请选择企业', trigger: 'blur' }], + filePath: [{ required: true, validator: checkFiles, trigger: 'blur' }] + }, + exportFileList: [], +}) +const dataList = ref([]); +const total = ref(0); +const { queryParams } = toRefs(data); + +onMounted(() => { + const userInfo = JSON.parse(Cookies.get('userInfo')) + console.log("userInfo",userInfo) + data.isAdmin = userInfo.userType === 0; + if(data.isAdmin){ + data.queryParams.companyId = null + }else { + data.queryParams.companyId = userInfo.companyId + } + getList(); + if(data.isAdmin){ + getCompanyList() + } +}); +const getList = async () => { + loading.value = true; + const res = await getCom(data.queryParams); + if(res.code === 200){ + dataList.value = res.data.list + total.value = res.data.total + }else{ + ElMessage.warning(res.message) + } + loading.value = false; + loading.value = false; + +} + +const searchClick = () => { + getList(); +} +const openDialog = (type, value) => { + noticeRef.value.openDialog(type, value,data.companyList); +} +const selectValue = (val) => { + data.companyList.forEach(item => { + if(item.name === val){ + data.queryParams.companyId = item.id + } + }) +} + +const getCompanyList = async ()=>{ + const queryParams = { + pageNum: 1, + pageSize: 999 + } + const res = await getCompany(queryParams) + if (res.code == 200) { + data.companyList = res.data.list?res.data.list:[] + // data.queryParams.companyId = data.companyList[0].id + } else { + ElMessage.warning(res.message) + } +} +// 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: 999, +// 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 handleSizeChange = (val) => { + data.queryParams.pageSize = val + getList() +} +const handleCurrentChange = (val) => { + data.queryParams.pageNum = val + getList() +} + +/** 重置新增的表单以及其他数据 */ +function reset() { + data.queryParams = { + companyId: null, + pageNum: 1, + pageSize: 10, + } + data.companyName = '' + data.companyList = []; + getList(); + getCompanyList() +} +const handleDelete = (val) => { + ElMessageBox.confirm( + '确定删除此条数据?', + '提示', + { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning', + }) + .then( async() => { + const res = await delCom(val.id); + if(res.code === 200){ + ElMessage({ + type: 'success', + message: '删除成功' + }); + getList(); + }else{ + ElMessage.warning(res.message) + } + }) +} +const exportData = () => { + data.exportDialog = true + +} +const handleCloseExport = () => { + getList() + state.form.companyId = null + state.exportFileList = [] + data.exportDialog = false +} +const downloadFileTable = () => { + const filePath = '/overviewExample.docx'; + const link = document.createElement('a'); + link.href = filePath; + link.download = filePath.substr(filePath.lastIndexOf('/') + 1); + link.click(); +} +const beforeUpload = (file) => { + state.exportFileList = [...state.exportFileList, file] + state.exportFileList = state.exportFileList.slice(-1) + return false; +} +const fileBinaryList = ref([]) +const handleChange = (file, files) => { + fileBinaryList.value = files; +}; +const onUpload = async () => { + if(state.exportFileList.length == 0){ + ElMessage({ + type: 'warning', + message: '请先上传表格文件' + }); + return + }else if( data.isAdmin && !state.form.companyId){ + ElMessage({ + type: 'warning', + message: '管理员请先选择企业' + }); + return + }else{ + const formData = new FormData(); + fileBinaryList.value.forEach((file) => { + formData.append('file', file.raw) + }) + formData.append('companyId',data.isAdmin ? state.form.companyId : data.queryParams.companyId) + // const param = { + // file: formData, + // companyId: data.isAdmin ? state.form.companyId : data.queryParams.companyId + // } + console.log('form',formData) + const res = await uploadInOverview(formData) + if(res.code == 200){ + ElMessage({ + type: 'success', + message: '导入成功' + }); + state.form.companyId = null + state.exportFileList = [] + data.exportDialog = false + await getList() + }else{ + ElMessage({ + type: 'error', + message: res.message + }); + await getList() + } + } +} +</script> +<style lang="scss"> +.pag-container{ + float: right; + margin-top: 10px; +} </style> -- Gitblit v1.9.2