| | |
| | | <script setup> |
| | | |
| | | </script> |
| | | |
| | | <template> |
| | | <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="openAddDialog" |
| | | >新增</el-button> |
| | | </el-form-item> |
| | | <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 |
| | | 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 label="年份:" style="margin-left: 20px"> |
| | | <el-select |
| | | v-model="data.queryParams.year" |
| | | placeholder="请选择年份" |
| | | style="width: 240px" |
| | | filterable |
| | | allow-create |
| | | default-first-option |
| | | :reserve-keyword="false" |
| | | @change="handleChangeNum" |
| | | > |
| | | <el-option |
| | | v-for="item in data.yearList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.label" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="目标级别:" style="margin-left: 20px"> |
| | | <el-select |
| | | v-model="data.queryParams.type" |
| | | placeholder="请选择目标级别" |
| | | style="width: 240px" |
| | | > |
| | | <el-option |
| | | v-for="item in data.levelList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <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 style="margin-left: 15px"> |
| | | <el-button |
| | | type="primary" |
| | | @click="exportData" |
| | | >导出</el-button> |
| | | </el-form-item> |
| | | |
| | | </el-form> |
| | | </div> |
| | | <!-- 表格数据 --> |
| | | <el-table v-loading="loading" :data="dataList" :border="true" @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="55" /> |
| | | <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="年份" prop="year" align="center" /> |
| | | <el-table-column label="质量目标级别" prop="type" align="center" > |
| | | <template #default="scope"> |
| | | {{scope.row.type == 1 ? '公司级' : '部门级'}} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="部门名称" prop="name" align="center" > |
| | | <template #default="scope"> |
| | | <div v-if="scope.row.type == 1">{{scope.row.companyName}}</div> |
| | | <div v-else>{{scope.row.departName}}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="质量目标" align="center" > |
| | | <template #default="scope"> |
| | | <div v-for="i in scope.row.message">{{i}}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="质量目标完成情况" align="center" > |
| | | <template #default="scope"> |
| | | <div v-html="scope.row.accomplishMessage"></div> |
| | | </template> |
| | | |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" @click="scope.row.type == 1?openDialog('review','company',scope.row):openDialog('review','dept',scope.row) " >查看</el-button> |
| | | <el-button link type="primary" @click="scope.row.type == 1?openDialog('edit','company',scope.row):openDialog('edit','dept',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> |
| | | <el-dialog |
| | | v-model="data.dialogVisible" |
| | | width="500px" |
| | | :before-close="handleClose" |
| | | :close-on-press-escape="false" |
| | | :close-on-click-modal="false" |
| | | > |
| | | <div style="margin: 10px;display: flex;flex-direction: column;align-items: center;justify-content: center"> |
| | | <span style="font-size: 24px;font-weight: 600">新增质量目标完成情况</span> |
| | | <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 30px;width: 80%"> |
| | | <el-button type="primary" @click="openDialog('add','company',{})">公司级质量目标完成情况</el-button> |
| | | <el-button type="primary" @click="openDialog('add','dept',{})">部门级质量目标完成情况</el-button> |
| | | </div> |
| | | </div> |
| | | |
| | | </el-dialog> |
| | | <stationCompanyDialog ref="noticeRef" @getList = "getList"></stationCompanyDialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped lang="scss"> |
| | | <script setup> |
| | | import {getCurrentInstance, onMounted, reactive, ref, toRefs} from "vue"; |
| | | import stationCompanyDialog from "./components/stationCompanyDialog.vue" |
| | | import {ElMessage, ElMessageBox} from "element-plus"; |
| | | import {getCompany} from "@/api/onlineEducation/company"; |
| | | import Cookies from "js-cookie"; |
| | | import {generateWordDocument} from "@/utils/exportWord"; |
| | | import {delTable, getTable} from "@/api/qualityObjectives/table"; |
| | | import {delReport, getReport} from "@/api/qualityObjectives/reportsituation"; |
| | | const { proxy } = getCurrentInstance(); |
| | | const loading = ref(false); |
| | | const noticeRef = ref(); |
| | | const deptRef = ref() |
| | | const loadingCompany = ref(false) |
| | | const choosedData = ref([]) |
| | | const data = reactive({ |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | companyId: null, |
| | | year: '', |
| | | type: '' |
| | | }, |
| | | companyList: [], |
| | | isAdmin: false, |
| | | dialogVisible: false, |
| | | yearList: [ |
| | | { |
| | | value: 1, |
| | | label: '2025' |
| | | }, |
| | | { |
| | | value: 2, |
| | | label: '2024' |
| | | }, |
| | | { |
| | | value: 3, |
| | | label: '2023' |
| | | }, |
| | | { |
| | | value: 4, |
| | | label: '2022' |
| | | }, |
| | | { |
| | | value: 5, |
| | | label: '2021' |
| | | }, |
| | | ], |
| | | levelList: [ |
| | | { |
| | | value: 1, |
| | | label: '公司级' |
| | | }, |
| | | { |
| | | value: 2, |
| | | label: '部门级' |
| | | }, |
| | | ], |
| | | frequencyList: [ |
| | | { |
| | | value: 1, |
| | | label: '月' |
| | | }, |
| | | { |
| | | value: 2, |
| | | label: '季度' |
| | | }, |
| | | { |
| | | value: 3, |
| | | label: '年终' |
| | | }, |
| | | { |
| | | value: 4, |
| | | label: '年底' |
| | | }, |
| | | ], |
| | | }); |
| | | 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 getReport(data.queryParams); |
| | | if(res.code === 200){ |
| | | dataList.value = res.data.list.map(item =>{ |
| | | return { |
| | | ...item, |
| | | message: item.qualityTargets.map((i,index) => { |
| | | return index+1 +'、' + i.message + '\n' |
| | | }), |
| | | accomplishMessage:item.accomplish.replace(/\n/g, '<br>') |
| | | } |
| | | }) |
| | | total.value = res.data.total |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | loading.value = false; |
| | | |
| | | } |
| | | |
| | | const searchClick = () => { |
| | | getList(); |
| | | } |
| | | |
| | | const openAddDialog = () => { |
| | | data.dialogVisible = true |
| | | } |
| | | const openDialog = (type,isCom, value) => { |
| | | noticeRef.value.openDialog(type, isCom,value); |
| | | } |
| | | const openDeptDialog = (type, value) => { |
| | | deptRef.value.openDialog(type, value); |
| | | } |
| | | |
| | | const selectValue = (val) => { |
| | | data.companyList.forEach(item => { |
| | | if(item.name === val){ |
| | | data.queryParams.companyId = item.id |
| | | } |
| | | }) |
| | | } |
| | | |
| | | 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 handleSizeChange = (val) => { |
| | | data.queryParams.pageSize = val |
| | | getList() |
| | | } |
| | | const handleCurrentChange = (val) => { |
| | | data.queryParams.pageNum = val |
| | | getList() |
| | | } |
| | | const handleClose = () => { |
| | | data.dialogVisible = false |
| | | } |
| | | |
| | | /** 重置新增的表单以及其他数据 */ |
| | | function reset() { |
| | | if(data.isAdmin){ |
| | | data.queryParams = { |
| | | companyId: '', |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | year: '', |
| | | type: '' |
| | | } |
| | | choosedData.value = [] |
| | | data.companyList = []; |
| | | getCompanyList() |
| | | }else { |
| | | data.queryParams = { |
| | | companyId: data.queryParams.companyId, |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | year: '', |
| | | type: '' |
| | | } |
| | | } |
| | | getList(); |
| | | |
| | | } |
| | | const exportData = () => { |
| | | if(choosedData.value && choosedData.value.length === 0){ |
| | | ElMessage.warning('请选择需要导出的数据') |
| | | }else { |
| | | startGeneration() |
| | | } |
| | | } |
| | | const templatePath = ref('') |
| | | const startGeneration = async () => { |
| | | const frequencyList = JSON.parse(JSON.stringify(data.frequencyList)) |
| | | const dataList = JSON.parse(JSON.stringify(choosedData.value)) |
| | | let name = '' |
| | | let message = '' |
| | | dataList.forEach(item => { |
| | | name = '' |
| | | message = '' |
| | | console.log('item',item) |
| | | if(item.type == 1){ |
| | | templatePath.value = '/stationCompanyExample.docx' |
| | | name = item.companyName |
| | | }else { |
| | | templatePath.value = '/stationDeptExample.docx' |
| | | name = item.departName |
| | | } |
| | | const now = new Date() |
| | | const year = now.getFullYear() |
| | | const month = (now.getMonth() +1).toString().padStart(2, '0'); |
| | | item.nowDate = year + '-' + month |
| | | item.year = year |
| | | item.qualityTargets.forEach((i,index) => { |
| | | message += index+1 +'、' + i.message + '\n' |
| | | }) |
| | | item.message = message |
| | | frequencyList.forEach(i => { |
| | | i.checked = i.label !== item.frequency |
| | | }) |
| | | item.typeList = frequencyList |
| | | try { |
| | | generateWordDocument(templatePath.value, item, name+'_质量目标完成情况报告.docx'); |
| | | } catch (error){ |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: '导出失败' |
| | | }); |
| | | } |
| | | }) |
| | | } |
| | | |
| | | const handleSelectionChange = (val) => { |
| | | choosedData.value = val |
| | | } |
| | | const handleDelete = (val) => { |
| | | ElMessageBox.confirm( |
| | | '确定删除此条数据?', |
| | | '提示', |
| | | { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then( async() => { |
| | | const res = await delReport(val.id); |
| | | if(res.code === 200){ |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: '删除成功' |
| | | }); |
| | | getList(); |
| | | }else{ |
| | | ElMessage.warning(res.message) |
| | | } |
| | | }) |
| | | } |
| | | const handleChangeNum = (value) => { |
| | | if (!/^\d+$/.test(value)) { // 验证是否为数字 |
| | | ElMessage.warning('只能输入数字') |
| | | data.queryParams.year = '' // 重置选择,避免非法值被添加到options中 |
| | | } else if (!data.yearList.some(option => option.label === value)) { // 确保不是已存在的选项 |
| | | data.yearList.push({ value, label: value }); // 添加新选项(这里简单地将值和标签设为相同) |
| | | } |
| | | } |
| | | |
| | | </script> |
| | | <style lang="scss"> |
| | | .pag-container{ |
| | | float: right; |
| | | margin-top: 10px; |
| | | } |
| | | </style> |