<template>
|
<div class="app-container">
|
<div style="display: flex;justify-content: space-between">
|
<el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
|
<!-- <el-form-item>-->
|
<!-- <el-button-->
|
<!-- type="primary"-->
|
<!-- plain-->
|
<!-- icon="Plus"-->
|
<!-- @click="openDialog('add',{})"-->
|
<!-- >新增</el-button>-->
|
<!-- </el-form-item>-->
|
<el-form-item v-if="isAdmin" label="企业：" >
|
<el-select v-model="data.queryParams.companyId" placeholder="请选择" clearable>
|
<el-option
|
v-for="item in companyList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.id">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item >
|
<el-button type="primary" v-if="isAdmin" @click="getList">查询</el-button>
|
<el-button type="primary" v-if="isAdmin" plain @click="reset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div style="display: flex;justify-content: space-between;margin-bottom: 10px">
|
<div>质量管理体系过程与部门职能矩阵</div>
|
<div>
|
<el-button type="primary" @click="initDistribute">重新生成</el-button>
|
<el-button type="primary" v-if="!isEdit" @click="isEdit = true">编辑</el-button>
|
<el-button type="primary" v-if="isEdit" @click="confirmEdit">保存</el-button>
|
</div>
|
</div>
|
<!-- 表格数据 -->
|
<el-table v-loading="loading" :data="caluseList" class="caluseTable" :border="true" :span-method="arraySpanMethod">
|
<el-table-column label="条款号" prop="clauseNum" align="center"/>
|
<el-table-column label="条款内容/要素" prop="content" align="left"/>
|
<el-table-column label="总经理" prop="manage" align="center">
|
<template #default="scope">
|
<el-checkbox v-model="scope.row.manage" disabled size="large" />
|
</template>
|
</el-table-column>
|
<el-table-column label="管理者代表" prop="represent" align="center">
|
<template #default="scope">
|
<el-checkbox v-model="scope.row.represent" disabled size="large" />
|
</template>
|
</el-table-column>
|
<el-table-column v-for="column in deptList" :key="column.deptId" :prop="column.deptId" :label="column.deptName" align="center">
|
<template #default="scope">
|
<el-checkbox v-model="scope.row[column.deptId]" :disabled="!isEdit" size="large" @change="changeStatus(scope.row)"/>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script setup>
|
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
|
import {ElMessage, ElMessageBox} from "element-plus";
|
import {delUser, getUser} from "@/api/onlineEducation/user";
|
import useUserStore from "@/store/modules/user";
|
import {getCompany, getDepart, getDistribution, initDistribution, saveDistribution} from "@/api/orgStructure/depart";
|
const userStore = useUserStore()
|
const { proxy } = getCurrentInstance();
|
const loading = ref(false);
|
const dialogRef = ref();
|
const data = reactive({
|
isAdmin: false,
|
companyList: [],
|
queryParams: {
|
companyId: null
|
},
|
isEdit: false,
|
dataList: [],
|
deptList: [],
|
caluseList: [
|
{clauseNum: '4', content: '组织环境'},
|
{clauseNum: '4.1', content: '理解组织及其环境',manage: true,represent: false},
|
{clauseNum: '4.2', content: '理解相关方的需求和期望',manage: true,represent: false},
|
{clauseNum: '4.3', content: '确定质量管理体系的范围',manage: false,represent: true},
|
{clauseNum: '4.4', content: '质量管理体系及其过程',manage: false,represent: true},
|
{clauseNum: '5', content: '领导作用'},
|
{clauseNum: '5.1', content: '领导作用和承诺',manage: true,represent: false},
|
{clauseNum: '5.2', content: '方针',manage: true,represent: false},
|
{clauseNum: '5.3', content: '组织内的角色、职责和权限',manage: true,represent: false},
|
{clauseNum: '6', content: ''},
|
{clauseNum: '6.1', content: '应对风险和机遇的措施',manage: true,represent: false},
|
{clauseNum: '6.2', content: '质量目标及其实现的策划',manage: false,represent: true},
|
{clauseNum: '6.3', content: '变更的策划',manage: false,represent: true},
|
{clauseNum: '7', content: '支持'},
|
{clauseNum: '7.1', content: '资源',manage: true,represent: false},
|
{clauseNum: '7.1.1', content: '总则',manage: true,represent: false},
|
{clauseNum: '7.1.2', content: '人员',manage: true,represent: false},
|
{clauseNum: '7.1.3', content: '基础设施',manage: false,represent: true},
|
{clauseNum: '7.1.4', content: '过程运行环境',manage: false,represent: true},
|
{clauseNum: '7.1.5', content: '监视和测量资源',manage: false,represent: true},
|
{clauseNum: '7.1.6', content: '组织的知识',manage: false,represent: true}
|
],
|
form: {
|
companyId: null,
|
list: []
|
}
|
});
|
|
const { queryParams,isEdit, dataList,deptList, isAdmin, companyList, caluseList, form } = toRefs(data);
|
|
onMounted(async ()=>{
|
if(userStore.roles.includes('admin')){
|
data.isAdmin = true
|
await getCompanyList()
|
}else{
|
data.isAdmin = false
|
data.queryParams.companyId = userStore.companyId
|
data.form.companyId = userStore.companyId
|
}
|
await getList()
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
const changeStatus = (val)=>{
|
const excludeFields = ['clauseNum', 'content', 'manage', 'represent']
|
// 转换当前对象为临时数组
|
const currentList = Object.keys(val).filter(key => !excludeFields.includes(key)).map(key => ({
|
clauseNum: val.clauseNum,
|
deptId: Number(key),
|
chooseLab: val[key] ? 1 : 0
|
}))
|
// 合并到 data.form.list，覆盖重复项
|
currentList.forEach(newItem => {
|
const existingIndex = data.form.list.findIndex(
|
item => item.clauseNum === newItem.clauseNum && item.deptId === newItem.deptId
|
);
|
if (existingIndex !== -1) {
|
// 覆盖已存在的项
|
data.form.list[existingIndex] = newItem;
|
} else {
|
// 新增不存在的项
|
data.form.list.push(newItem);
|
}
|
})
|
}
|
|
const confirmEdit = async ()=>{
|
if(data.form.list.length == 0){
|
data.isEdit = !data.isEdit
|
await getList()
|
return
|
}
|
loading.value = true
|
const res = await saveDistribution(data.form)
|
if(res.code == 200){
|
ElMessage.success(res.message)
|
}else{
|
ElMessage.warning(res.message)
|
}
|
loading.value = false
|
await getList()
|
data.isEdit = !data.isEdit
|
}
|
|
const arraySpanMethod = ({
|
row,
|
column,
|
rowIndex,
|
columnIndex,
|
}) => {
|
if (rowIndex === 0 || rowIndex === 5 ||rowIndex === 9 ||rowIndex === 13) {
|
if (columnIndex === 0) {
|
return [1, 1]
|
} else if(columnIndex === 1){
|
return [1,900]
|
}
|
}
|
}
|
|
const getList = async () => {
|
loading.value = true
|
await getDeptList()
|
const res = await getDistribution(data.queryParams)
|
if(res.code == 200){
|
data.dataList = res.data
|
for(let item of data.caluseList){
|
const sameNum = data.dataList.filter(i=>i.clauseNum == item.clauseNum).map(j=> {
|
return {
|
deptId: j.deptId,
|
chooseLab: j.chooseLab
|
}
|
}
|
)
|
for(let i of sameNum){
|
item[i.deptId] = i.chooseLab == 0?false:true
|
}
|
}
|
}else{
|
ElMessage.warning(res.message)
|
}
|
loading.value = false
|
}
|
|
const getDeptList = async () => {
|
loading.value = true
|
const res = await getDepart({pageNum: 1, pageSize: 999, companyId: data.queryParams.companyId})
|
if(res.code == 200){
|
data.deptList = res.data
|
}else{
|
ElMessage.warning(res.message)
|
}
|
loading.value = false
|
}
|
|
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
|
data.form.companyId = data.companyList[0].id
|
} else {
|
ElMessage.warning(res.message)
|
}
|
}
|
|
const initDistribute = async ()=>{
|
ElMessageBox.confirm(
|
'重新生成将重置原有分配信息，是否继续？',
|
'提示',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then( async() => {
|
const res = await initDistribution({companyId: data.queryParams.companyId})
|
if (res.code == 200) {
|
ElMessage.success(res.message)
|
await getList()
|
} else {
|
ElMessage.warning(res.message)
|
}
|
})
|
}
|
|
const openDialog = (type, value) => {
|
dialogRef.value.openDialog(type, value);
|
}
|
|
/** 重置新增的表单以及其他数据 */
|
const reset= async()=> {
|
data.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
companyId: null
|
}
|
await getCompanyList()
|
await getList()
|
}
|
const handleDelete = (val) => {
|
ElMessageBox.confirm(
|
'确定删除此条数据？',
|
'提示',
|
{
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then( async() => {
|
const res = await delUser(val.id)
|
if(res.code == 200){
|
ElMessage.success('数据删除成功')
|
await getList()
|
}else{
|
ElMessage.warning(res.message)
|
}
|
})
|
}
|
|
</script>
|
<style lang="scss">
|
.caluseTable{
|
.el-table__cell{
|
padding: 4px 0 !important;
|
.is-disabled{
|
.el-checkbox__label{
|
color: #606266 !important
|
}
|
&.is-checked{
|
.el-checkbox__label{
|
color: #409eff !important
|
}
|
.el-checkbox__inner{
|
background-color: #333;
|
&::after{
|
display: none;
|
}
|
}
|
}
|
.el-checkbox__inner{
|
width: 16px;
|
height: 16px;
|
background-color: #fff;
|
border-color: #999;
|
border-radius: 50% !important;
|
}
|
}
|
}
|
.cell{
|
padding: 0 6px !important;
|
}
|
}
|
</style>
|
