修改新增

祖安之光

116 分钟以前 fca7a89c2bf084dcd5d83819140cc7eb33fc6199

 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: ['7.1','8.2','8.3','8.4','8.5','9.1']
});

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,21 +231,34 @@
}

const confirmEdit = async ()=>{
  if(data.form.list.length == 0){
    data.isEdit = !data.isEdit
  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()
    return
  }
  loading.value = true
  const res = await saveDistribution(data.form)
  if(res.code == 200){
    ElMessage.success(res.message)
    data.isEdit = !data.isEdit
  }else{
    ElMessage.warning(res.message)
    ElMessage.warning('条款有两个归口部门，要填写备注')
  }
  loading.value = false
  await getList()
  data.isEdit = !data.isEdit
}

const arraySpanMethod = ({
@@ -171,43 +267,58 @@
     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))
  }
  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)
  }
@@ -227,6 +338,10 @@
  } else {
    ElMessage.warning(res.message)
  }
}

const handleClose = ()=>{

}

const initDistribute = async ()=>{
@@ -254,13 +369,14 @@
}

/** 重置新增的表单以及其他数据  */
function reset() {
const reset= async()=> {
  data.queryParams = {
    pageNum: 1,
    pageSize: 10,
    companyId: null
  }
  getList()
  await getCompanyList()
  await getList()
}
const handleDelete = (val) => {
  ElMessageBox.confirm(
@@ -286,7 +402,7 @@
<style lang="scss">
.caluseTable{
  .el-table__cell{
    padding: 4px 0 !important;
    padding: 0 !important;
    .is-disabled{
      .el-checkbox__label{
        color: #606266 !important
@@ -312,7 +428,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>