From 8116c45f50e80312033f8de630c94e6d58083ee4 Mon Sep 17 00:00:00 2001
From: 周文萱 <1175765986@qq.com>
Date: 星期一, 21 七月 2025 09:19:26 +0800
Subject: [PATCH] 修改
---
src/views/build/conpanyFunctionConsult/orgStructure/dutyDistributeChart/index.vue | 254 +++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 195 insertions(+), 59 deletions(-)
diff --git a/src/views/build/conpanyFunctionConsult/orgStructure/dutyDistributeChart/index.vue b/src/views/build/conpanyFunctionConsult/orgStructure/dutyDistributeChart/index.vue
index 903fff4..f536e19 100644
--- a/src/views/build/conpanyFunctionConsult/orgStructure/dutyDistributeChart/index.vue
+++ b/src/views/build/conpanyFunctionConsult/orgStructure/dutyDistributeChart/index.vue
@@ -11,7 +11,7 @@
<!-- >新增</el-button>-->
<!-- </el-form-item>-->
<el-form-item v-if="isAdmin" label="企业：" >
- <el-select v-model="data.queryParams.companyId" placeholder="请选择" clearable>
+ <el-select v-model="data.queryParams.companyId" placeholder="请选择" clearable @change="getList">
<el-option
v-for="item in companyList"
:key="item.id"
@@ -27,7 +27,7 @@
</el-form>
</div>
<div style="display: flex;justify-content: space-between;margin-bottom: 10px">
- <div>质量管理体系过程与部门职能矩阵</div>
+ <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>
@@ -35,25 +35,63 @@
</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 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)"/>
+ <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>
@@ -62,7 +100,14 @@
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";
+import {
+ getCompany,
+ getDepart,
+ getDistribution, getFunctionalRemarkList,
+ getSysClause,
+ initDistribution,
+ saveDistribution
+} from "@/api/orgStructure/depart";
const userStore = useUserStore()
const { proxy } = getCurrentInstance();
const loading = ref(false);
@@ -76,38 +121,29 @@
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}
- ],
+ subDepts: [],
+ caluseList: [],
+ remarkForm: {},
form: {
companyId: null,
- list: []
- }
+ 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 } = toRefs(data);
-
+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()
@@ -116,7 +152,6 @@
data.queryParams.companyId = userStore.companyId
data.form.companyId = userStore.companyId
}
- await getDeptList()
await getList()
})
@@ -124,9 +159,57 @@
})
-const changeStatus = (val)=>{
+
+// 获取非管理层选中数量
+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),
@@ -148,15 +231,34 @@
}
const confirmEdit = async ()=>{
- loading.value = true
- const res = await saveDistribution(data.form)
- if(res.code == 200){
- ElMessage.success(res.message)
+ 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.trim()
+ }
+ })
+ 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(res.message)
+ ElMessage.warning('条款有两个归口部门，要填写备注')
}
- loading.value = false
- data.isEdit = !data.isEdit
}
const arraySpanMethod = ({
@@ -165,43 +267,59 @@
rowIndex,
columnIndex,
}) => {
- if (rowIndex === 0 || rowIndex === 5 ||rowIndex === 9 ||rowIndex === 13) {
+ if (data.mergeValues.includes(row.clauseNum)) {
+ const totalColumns = data.deptList.length + 3
if (columnIndex === 0) {
return [1, 1]
} else if(columnIndex === 1){
- return [1,8]
+ 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
+ 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))
+ }
+ console.log(data.remarkForm,5555555)
loading.value = false
}
const getDeptList = async () => {
loading.value = true
- const res = await getDepart({pageNum: 1, pageSize: 999, companyId: data.queryParams.companyId})
+ 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)
}
@@ -221,6 +339,10 @@
} else {
ElMessage.warning(res.message)
}
+}
+
+const handleClose = ()=>{
+
}
const initDistribute = async ()=>{
@@ -248,13 +370,14 @@
}
/** 重置新增的表单以及其他数据 */
-function reset() {
+const reset= async()=> {
data.queryParams = {
pageNum: 1,
pageSize: 10,
companyId: null
}
- getList()
+ await getCompanyList()
+ await getList()
}
const handleDelete = (val) => {
ElMessageBox.confirm(
@@ -280,7 +403,7 @@
<style lang="scss">
.caluseTable{
.el-table__cell{
- padding: 4px 0 !important;
+ padding: 0 !important;
.is-disabled{
.el-checkbox__label{
color: #606266 !important
@@ -306,7 +429,20 @@
}
}
.cell{
- padding: 0 6px !important;
+ 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>
\ No newline at end of file
--
Gitblit v1.9.2