| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div style="margin-bottom: 10px"> |
| | | <el-form style="display: flex;flex-wrap: wrap;"> |
| | | <!-- v-if="!data.isAdmin"--> |
| | | <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.companyName" |
| | | filterable |
| | | remote |
| | | @change="selectValue" |
| | | reserve-keyword |
| | | placeholder="请输入企业名称" |
| | | remote-show-suffix |
| | | :remote-method="getCompanyList" |
| | | :loading="loadingCompany" |
| | | style="width: 240px" |
| | | <el-form style="display: flex; flex-wrap: wrap"> |
| | | <el-form-item> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="Plus" |
| | | @click="openDialog('add', {})" |
| | | v-hasPermi="['qualityGoal:list: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" |
| | | placeholder="请选择" |
| | | filterable |
| | | clearable |
| | | > |
| | | <el-option |
| | | v-for="item in data.companyList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | > |
| | | <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" |
| | | > |
| | | <el-option |
| | | v-for="item in data.yearList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="目标级别:" style="margin-left: 20px"> |
| | | <el-select |
| | | v-model="data.queryParams.level" |
| | | 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 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 style="margin-left: 15px"> |
| | | <el-button |
| | | type="primary" |
| | | @click="exportData" |
| | | >导出</el-button> |
| | | </el-form-item> |
| | | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="年份:" style="margin-left: 20px"> |
| | | <!-- <el-input v-model="data.queryParams.year" placeholder="请输入年份"></el-input>--> |
| | | <el-date-picker |
| | | v-model="data.queryParams.year" |
| | | type="year" |
| | | value-format="YYYY" |
| | | placeholder="请选择年份" |
| | | style="width: 240px" |
| | | /> |
| | | </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-button type="primary" plain @click="copyMenu" |
| | | >复制</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 |
| | | 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="level" align="center" /> |
| | | <el-table-column label="部门名称" prop="name" align="center" /> |
| | | <el-table-column label="质量目标" prop="name" align="center" /> |
| | | <el-table-column label="目标测量方法" prop="name" align="center" /> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width" > |
| | | <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"> |
| | | <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> |
| | | {{ 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="质量目标" prop="name" align="center"> |
| | | <template #default="scope"> |
| | | <div v-for="(item, index) in scope.row.qualityTargets"> |
| | | <span>{{ index + 1 }}、{{ item.message }}</span> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="目标测量方法" prop="method" align="center" /> |
| | | <el-table-column |
| | | label="操作" |
| | | align="center" |
| | | class-name="small-padding fixed-width" |
| | | width="160" |
| | | > |
| | | <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)" |
| | | v-hasPermi="['qualityGoal:list:edit']" |
| | | >编辑</el-button |
| | | > |
| | | <el-button |
| | | link |
| | | type="danger" |
| | | @click="handleDelete(scope.row)" |
| | | v-hasPermi="['qualityGoal:list:del']" |
| | | >删除</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" |
| | | 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> |
| | | <objectiveDialog ref="noticeRef" @getList = "getList"></objectiveDialog> |
| | | <objectiveDialog ref="noticeRef" @getList="getList"></objectiveDialog> |
| | | <el-dialog |
| | | v-model="copyVisible" |
| | | width="500px" |
| | | :before-close="handleClose" |
| | | :close-on-press-escape="false" |
| | | :close-on-click-modal="false" |
| | | > |
| | | <span v-if="isAdmin" style="display: block; margin-bottom: 8px">单位名称:</span> |
| | | <el-select |
| | | v-model="chooseCompanyId" |
| | | v-if="isAdmin" |
| | | placeholder="请选择单位" |
| | | filterable |
| | | clearable |
| | | style="width: 100%; margin-bottom: 15px" |
| | | > |
| | | <el-option |
| | | v-for="item in companyList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | <span style="display: block; margin-bottom: 8px">将以下年份数据</span> |
| | | <el-date-picker |
| | | v-model="queryParams.year" |
| | | type="year" |
| | | value-format="YYYY" |
| | | placeholder="请选择年份" |
| | | style="width: 100%; margin-bottom: 15px" |
| | | /> |
| | | <span style="display: block; margin-bottom: 8px">复制到:</span> |
| | | <el-date-picker |
| | | v-model="chooseYear" |
| | | type="year" |
| | | value-format="YYYY" |
| | | placeholder="请选择年份" |
| | | style="width: 100%; margin-bottom: 15px" |
| | | /> |
| | | |
| | | <div class="dialog-footer" style="display: flex; justify-content: right"> |
| | | <el-button @click="handleClose" size="default">取 消</el-button> |
| | | <el-button |
| | | type="primary" |
| | | @click="onSubmitCopy" |
| | | size="default" |
| | | v-preReClick |
| | | >确认</el-button |
| | | > |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {getCurrentInstance, onMounted, reactive, ref, toRefs} from "vue"; |
| | | import objectiveDialog from "./components/objectiveDialog.vue" |
| | | import {ElMessage, ElMessageBox} from "element-plus"; |
| | | import {getCompany} from "@/api/onlineEducation/company"; |
| | | import { getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue"; |
| | | import objectiveDialog from "./components/objectiveDialog.vue"; |
| | | import { ElMessage, ElMessageBox } from "element-plus"; |
| | | import { getCompany } from "@/api/onlineEducation/company"; |
| | | import Cookies from "js-cookie"; |
| | | import {generateWordDocument} from "@/utils/exportWord"; |
| | | import { generateWordDocument } from "@/utils/exportWord"; |
| | | import { delObject, getObjectPage, copyObject } from "@/api/qualityObjectives/object"; |
| | | const { proxy } = getCurrentInstance(); |
| | | const loading = ref(false); |
| | | const noticeRef = ref(); |
| | | const loadingCompany = ref(false) |
| | | const choosedData = ref([]) |
| | | const loadingCompany = ref(false); |
| | | const choosedData = ref([]); |
| | | const data = reactive({ |
| | | queryParams: { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | companyId: null, |
| | | year: '', |
| | | level: '' |
| | | year: "", |
| | | type: "", |
| | | }, |
| | | companyList: [], |
| | | isAdmin: false, |
| | | yearList: [ |
| | | { |
| | | value: 1, |
| | | label: '2025年' |
| | | }, |
| | | { |
| | | value: 2, |
| | | label: '2024年' |
| | | }, |
| | | { |
| | | value: 3, |
| | | label: '2023年' |
| | | }, |
| | | ], |
| | | levelList: [ |
| | | { |
| | | value: 1, |
| | | label: '公司级' |
| | | label: "公司级", |
| | | }, |
| | | { |
| | | value: 2, |
| | | label: '部门级' |
| | | label: "部门级", |
| | | }, |
| | | ] |
| | | ], |
| | | copyVisible: false, |
| | | chooseCompanyId: null, |
| | | chooseYear: null, |
| | | }); |
| | | const dataList = ref([]); |
| | | const total = ref(0); |
| | | |
| | | const { queryParams } = toRefs(data); |
| | | const { queryParams, isAdmin, copyVisible, chooseCompanyId, chooseYear, companyList } = toRefs(data); |
| | | |
| | | onMounted(() => { |
| | | const userInfo = JSON.parse(Cookies.get('userInfo')) |
| | | console.log("userInfo",userInfo) |
| | | const userInfo = JSON.parse(Cookies.get("userInfo")); |
| | | data.isAdmin = userInfo.userType === 0; |
| | | if (data.isAdmin) { |
| | | data.queryParams.companyId = null |
| | | } else { |
| | | data.queryParams.companyId = userInfo.companyId |
| | | data.chooseCompanyId = userInfo.companyId |
| | | } |
| | | getNowYear() |
| | | getList(); |
| | | if (data.isAdmin) { |
| | | getCompanyList(); |
| | | } |
| | | }); |
| | | const getList = async () => { |
| | | dataList.value = [ |
| | | { |
| | | id: 1, |
| | | level: 1, |
| | | object: 'xxxx', |
| | | method:'方法', |
| | | people2: '秦', |
| | | date2:'2015-8-1', |
| | | people3: '秦', |
| | | date3:'2015-8-1' |
| | | }, |
| | | { |
| | | id: 2, |
| | | level: 2, |
| | | object: 'xxxxfg ', |
| | | deptName: '质量管理部', |
| | | method:'方法', |
| | | people1: '秦', |
| | | date1:'2015-8-1', |
| | | people2: '秦', |
| | | date2:'2015-8-1', |
| | | people3: '秦', |
| | | date3:'2015-8-1' |
| | | }, |
| | | ] |
| | | // 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; |
| | | |
| | | const getNowYear = () =>{ |
| | | data.queryParams.year = new Date().getFullYear().toString() |
| | | } |
| | | const copyMenu = () => { |
| | | if (!data.queryParams.year) { |
| | | ElMessage.warning("请先选择要复制的年份"); |
| | | return; |
| | | } |
| | | data.copyVisible = true; |
| | | }; |
| | | |
| | | const handleClose = () => { |
| | | data.chooseCompanyId = null |
| | | data.chooseYear = null |
| | | data.copyVisible = false |
| | | }; |
| | | |
| | | const onSubmitCopy = async () => { |
| | | if (data.isAdmin && !data.chooseCompanyId) { |
| | | ElMessage.warning("请先选择单位"); |
| | | return; |
| | | } |
| | | if (!data.chooseYear) { |
| | | ElMessage.warning("请选择目标年份"); |
| | | return; |
| | | } |
| | | ElMessageBox.confirm("该操作将覆盖目标年份的数据,是否继续?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }) |
| | | .then(async () => { |
| | | const p = { |
| | | companyId: data.chooseCompanyId, |
| | | sourceYear: data.queryParams.year, |
| | | targetYear: data.chooseYear |
| | | }; |
| | | const r = await copyObject(p); |
| | | if (r.code === 200) { |
| | | ElMessage.success(r.message); |
| | | await handleClose(); |
| | | await getList(); |
| | | } else { |
| | | ElMessage.warning(r.message); |
| | | } |
| | | }) |
| | | .catch((err) => {}); |
| | | }; |
| | | |
| | | const getList = async () => { |
| | | loading.value = true; |
| | | const res = await getObjectPage(data.queryParams); |
| | | if (res.code === 200) { |
| | | dataList.value = res.data.list; |
| | | total.value = res.data.total; |
| | | } else { |
| | | ElMessage.warning(res.message); |
| | | } |
| | | loading.value = false; |
| | | }; |
| | | |
| | | const searchClick = () => { |
| | | getList(); |
| | | } |
| | | }; |
| | | const openDialog = (type, value) => { |
| | | noticeRef.value.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 |
| | | 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) |
| | | } |
| | | 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 handleSizeChange = (val) => { |
| | | data.queryParams.pageSize = val |
| | | getList() |
| | | } |
| | | data.queryParams.pageSize = val; |
| | | getList(); |
| | | }; |
| | | const handleCurrentChange = (val) => { |
| | | data.queryParams.pageNum = val |
| | | getList() |
| | | } |
| | | data.queryParams.pageNum = val; |
| | | getList(); |
| | | }; |
| | | |
| | | /** 重置新增的表单以及其他数据 */ |
| | | function reset() { |
| | | data.queryParams = { |
| | | companyId: '', |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | 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: "", |
| | | }; |
| | | } |
| | | choosedData.value = [] |
| | | data.companyList = []; |
| | | getNowYear() |
| | | getList(); |
| | | } |
| | | const exportData = () => { |
| | | if(choosedData.value && choosedData.value.length === 0){ |
| | | ElMessage.warning('请选择需要导出的数据') |
| | | }else { |
| | | startGeneration() |
| | | if (choosedData.value && choosedData.value.length === 0) { |
| | | ElMessage.warning("请选择需要导出的数据"); |
| | | } else { |
| | | startGeneration(); |
| | | } |
| | | } |
| | | const templatePath = ref('') |
| | | }; |
| | | const templatePath = ref(""); |
| | | const startGeneration = async () => { |
| | | choosedData.value.forEach(item => { |
| | | if(item.level == 1){ |
| | | templatePath.value = '/objectCompanyExample.docx' |
| | | }else { |
| | | templatePath.value = '/objectDeptExample.docx' |
| | | let name = ""; |
| | | choosedData.value.forEach((item) => { |
| | | console.log("111", item); |
| | | name = ""; |
| | | item.message = ""; |
| | | if (item.type == 1) { |
| | | templatePath.value = "/objectCompanyExample.docx"; |
| | | name = item.companyName; |
| | | } else { |
| | | templatePath.value = "/objectDeptExample.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 |
| | | const now = new Date(); |
| | | const year = now.getFullYear(); |
| | | const month = (now.getMonth() + 1).toString().padStart(2, "0"); |
| | | item.nowDate = year + "-" + month; |
| | | item.qualityTargets.forEach((i, index) => { |
| | | item.message += index + 1 + "、" + i.message + "\n"; |
| | | }); |
| | | try { |
| | | generateWordDocument(templatePath.value, item, '质量目标.docx'); |
| | | } catch (error){ |
| | | generateWordDocument(templatePath.value, item, name + "_质量目标.docx"); |
| | | } catch (error) { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: '导出失败' |
| | | type: "warning", |
| | | message: "导出失败", |
| | | }); |
| | | } |
| | | }) |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | const handleSelectionChange = (val) => { |
| | | choosedData.value = val |
| | | } |
| | | choosedData.value = val; |
| | | }; |
| | | const handleDelete = (val) => { |
| | | ElMessageBox.confirm( |
| | | '确定删除此条数据?', |
| | | '提示', |
| | | { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then( async() => { |
| | | // const res = await delNotice(val); |
| | | // if(res.code === 200){ |
| | | // ElMessage({ |
| | | // type: 'success', |
| | | // message: '删除成功' |
| | | // }); |
| | | // getList(); |
| | | // }else{ |
| | | // ElMessage.warning(res.message) |
| | | // } |
| | | }) |
| | | } |
| | | ElMessageBox.confirm("确定删除此条数据?", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }).then(async () => { |
| | | const res = await delObject(val.id); |
| | | if (res.code === 200) { |
| | | ElMessage({ |
| | | type: "success", |
| | | message: "删除成功", |
| | | }); |
| | | getList(); |
| | | } else { |
| | | ElMessage.warning(res.message); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | </script> |
| | | <style lang="scss"> |
| | | .pag-container{ |
| | | .pag-container { |
| | | float: right; |
| | | margin-top: 10px; |
| | | } |