<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 @change="getList">
|
<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>质量管理体系过程与部门职能矩阵（▲ 主管部门<span style="font-size: 24px;display: inline-block;margin-left: 20px">●</span> 归口部门<span style="font-size: 24px;display: inline-block;margin-left: 20px">○</span> 配合部门）</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-form ref="noticeRef" :model="remarkForm" :rules="rules">
|
<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-if="isEdit" v-model="scope.row[column.deptId]" size="large" @change="changeStatus(scope.row,scope.$index)"/>
|
<div v-else>
|
<el-checkbox v-if="column.deptType == '0'" v-model="scope.row[column.deptId]" disabled size="large"/>
|
<div class="markBox" v-else>
|
<div class="triangle" v-show="scope.row[column.deptId]"></div>
|
<el-checkbox v-show="!scope.row[column.deptId]" v-model="scope.row[column.deptId]" disabled size="large"/>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="备注" prop="remark" align="center" width="170px" fixed="right">
|
<template #default="scope">
|
<div v-if="!mergeValues.includes(scope.row.clauseNum)">
|
<el-form-item v-if="isEdit && getRowValueNum(scope.row) >= 2" :prop="`tableData.${scope.$index}.remark`" :rules="getRowValueNum(scope.row) >= 2 ? rules.remark : []">
|
<el-input
|
v-model.trim="remarkForm.tableData[scope.$index].remark"
|
size="large"
|
type="textarea"
|
style="width: 100%;"
|
>
|
</el-input>
|
</el-form-item>
|
|
<span v-else>{{ remarkForm.tableData[scope.$index].remark }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
|
</el-table>
|
</el-form>
|
<!-- <el-dialog-->
|
<!-- v-model="dialogVisible"-->
|
<!-- title="备注"-->
|
<!-- width="700px"-->
|
<!-- :before-close="handleClose"-->
|
<!-- >-->
|
<!-- <el-form :model="remarkList" size="default" ref="superRef" :rules="formRules" label-width="150px">-->
|
<!-- <el-form-item label="企业：" prop="companyId"></el-form-item>-->
|
<!-- </el-form>-->
|
<!-- </el-dialog>-->
|
</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, getFunctionalRemarkList,
|
getSysClause,
|
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: [],
|
subDepts: [],
|
caluseList: [],
|
remarkForm: {},
|
form: {
|
companyId: null,
|
list: [],
|
remarks: []
|
},
|
originRemark: [],
|
remarkList: [],
|
dialogVisible: false,
|
rules: {
|
remark: [
|
{required: true, message: "有两个归口部门请填写备注", trigger: "blur"},
|
],
|
},
|
mergeValues: ['4','5','6','7','7.1','8','8.2','8.3','8.4','8.5','9','9.1','10']
|
});
|
|
const { queryParams,isEdit, dataList,deptList, isAdmin, companyList, caluseList, form,originRemark, remarkList,dialogVisible,mergeValues,remarkForm,rules } = toRefs(data);
|
const noticeRef = ref();
|
onMounted(async ()=>{
|
await getSysClauseList()
|
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 getRowValueNum = (row)=>{
|
let count = 0;
|
for (const key in row) {
|
// 检查键是否是数字（忽略非数字键）
|
if (!isNaN(key)) {
|
const numericKey = parseInt(key, 10);
|
// 检查数字键是否在subDepts中且值为true
|
if (data.subDepts.includes(numericKey) && row[key] === true) {
|
count++;
|
}
|
}
|
}
|
return count;
|
}
|
|
const getSysClauseList = async ()=> {
|
const res = await getSysClause()
|
if(res.code == 200){
|
data.caluseList = res.data.map(i=>{
|
return {
|
clauseNum: i.clauseNum,
|
content: i.name
|
}
|
})
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
const getRemarksList = async ()=> {
|
const res = await getFunctionalRemarkList({companyId: data.queryParams.companyId})
|
if(res.code == 200){
|
data.originRemark = res.data
|
for(let item of data.originRemark){
|
const foundObj = data.caluseList.find(i=>i.clauseNum == item.clauseNum)
|
if(foundObj){
|
foundObj.remark = item.remark
|
}
|
}
|
}else{
|
ElMessage.warning(res.message)
|
}
|
}
|
|
const changeStatus = (val,index)=>{
|
if(getRowValueNum(val)<2){
|
data.remarkForm.tableData[index].remark = ''
|
}
|
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 ()=>{
|
const valid = await noticeRef.value.validate()
|
if(valid){
|
loading.value = true
|
data.form.remarks = data.remarkForm.tableData.filter(i=>i.remark && i.remark !== '').map(i=>{
|
return {
|
companyId: data.queryParams.companyId,
|
clauseNum: i.clauseNum,
|
remark: i.remark
|
}
|
})
|
if(data.form.list.length == 0 && data.form.remarks.length == 0){
|
data.isEdit = !data.isEdit
|
await getList()
|
return
|
}
|
data.form.companyId = data.queryParams.companyId
|
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
|
}else{
|
ElMessage.warning('条款有两个归口部门，要填写备注')
|
}
|
}
|
|
const arraySpanMethod = ({
|
row,
|
column,
|
rowIndex,
|
columnIndex,
|
}) => {
|
if (data.mergeValues.includes(row.clauseNum)) {
|
const totalColumns = data.deptList.length + 3
|
if (columnIndex === 0) {
|
return [1, 1]
|
} else if(columnIndex === 1){
|
return [1, Math.max(1, totalColumns - 2)];
|
}
|
if (columnIndex < totalColumns - 1) {
|
return [0, 0];
|
}
|
}
|
}
|
|
const getList = async () => {
|
loading.value = true
|
await getDeptList()
|
const res = await getDistribution(data.queryParams)
|
if(res.code == 200){
|
data.dataList = res.data
|
if(!data.dataList || data.dataList.length == 0){
|
ElMessage.warning('该企业暂无部门信息')
|
}
|
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,
|
remark: j.remark
|
}
|
}
|
)
|
for(let i of sameNum){
|
item[i.deptId] = i.chooseLab == 0?false:true
|
item.remark = i.remark
|
}
|
}
|
await getRemarksList()
|
}else{
|
ElMessage.warning(res.message)
|
}
|
data.remarkForm = {
|
tableData: JSON.parse(JSON.stringify(data.caluseList))
|
}
|
loading.value = false
|
}
|
|
const getDeptList = async () => {
|
loading.value = true
|
const res = await getDepart({responsType: 1, companyId: data.queryParams.companyId})
|
if(res.code == 200){
|
data.deptList = res.data
|
data.subDepts = data.deptList.filter(i=>i.deptType == '0').map(i=>i.deptId)
|
}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 handleClose = ()=>{
|
|
}
|
|
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: 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 4px !important;
|
|
.markBox{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
.triangle{
|
width: 18px;
|
height: 16px; /* 高度 = 100 * (√3/2) */
|
background-color: #333;
|
clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
|
}
|
}
|
|
}
|
}
|
</style>
|
