feat : 审批记录的代理审批,用户管理的设置代理功能,首页待办

This commit is contained in:
2024-09-22 17:58:13 +08:00
parent 4e325196c8
commit 47633749fb
6 changed files with 186 additions and 129 deletions

View File

@@ -212,3 +212,17 @@ export const checkMatrix = (userId) => {
method: 'get' method: 'get'
}) })
} }
export const getAgentInfo=(userId)=>{
return request({
url: `/admin/mosr/user/approval/agent/${userId}`,
method:'get'
})
}
export const editAgentInfo=(data)=>{
return request({
url:'/admin/mosr/user/approval/agent',
method:'post',
data
})
}

View File

@@ -3,12 +3,16 @@
<slot name="pre"></slot> <slot name="pre"></slot>
<div class="user-audit"> <div class="user-audit">
<div class="circle-user"> <div class="circle-user">
<Tooltip :content="user.name" placement="bottom-start" width="45px"/> <Tooltip v-if="userName" :content="userName" placement="bottom-start" width="45px"/>
<Tooltip v-else :content="user.name" placement="bottom-start" width="45px"/>
<!-- :style="{-->
<!-- backgroundColor: '#fff'-->
<!-- }">-->
<div v-if="user.icon" <div v-if="user.icon"
class="el-timeline-item__node" :style="{ class="el-timeline-item__node">
backgroundColor: '#fff' <div v-if="user.isAgent&&!showIcon">
}"> </div>
<el-icon v-if="user.icon" size="15" :color="user.color" :class="user.class"> <el-icon v-else size="15" :color="user.color" :class="user.class">
<component :is="user.icon"/> <component :is="user.icon"/>
</el-icon> </el-icon>
</div> </div>
@@ -28,10 +32,18 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false default: false
}, },
showIcon: {
type: Boolean,
default: false
},
user: { user: {
type: Object, type: Object,
default: {} default: {}
}, },
userName: {
type: String,
default: ''
},
mode: { mode: {
type: String, type: String,
default: 'design' default: 'design'
@@ -71,20 +83,22 @@ const initUser = (user) => {
user["class"] = 'is-loading' user["class"] = 'is-loading'
} }
//拒绝后评论 //拒绝后评论
if (state === 'REFUSE') { if (state === 'REFUSE' || state === 'ROLLBACK') {
user["icon"] = 'Close' // user["icon"] = 'Close'
// user["color"] = "#f56c6c"
user["icon"] = 'CircleCloseFilled'
user["color"] = "#f56c6c" user["color"] = "#f56c6c"
} }
if (state === 'PASS') { if (state === 'PASS') {
user["icon"] = 'MoreFilled' user["icon"] = 'MoreFilled'
user["color"] = "#c0c4cc" user["color"] = "#c0c4cc"
} }
if (state === 'ROLLBACK') { // if (state === 'ROLLBACK') {
// user["icon"] = 'RefreshLeft' // // user["icon"] = 'RefreshLeft'
// user["color"] = "#f78f5f" // // user["color"] = "#f78f5f"
user["icon"] = 'CircleCloseFilled' // user["icon"] = 'CircleCloseFilled'
user["color"] = "#f56c6c" // user["color"] = "#f56c6c"
} // }
return user; return user;
} }

View File

@@ -63,7 +63,7 @@
<span>提交时间</span> <span>提交时间</span>
</div> </div>
<div class="time"> {{ item.submitTime }}</div> <div class="time"> {{ item.submitTime }}</div>
<div class="time">时间要求 {{ item.totalTime }}</div> <!-- <div class="time">时间要求 {{ item.totalTime }}</div>-->
</div> </div>
<div class="view" @click="handleView(item)">查看</div> <div class="view" @click="handleView(item)">查看</div>
</div> </div>
@@ -114,7 +114,7 @@
<span>提交时间</span> <span>提交时间</span>
</div> </div>
<div class="time"> {{ item.submitTime }}</div> <div class="time"> {{ item.submitTime }}</div>
<div class="time">时间要求 {{ item.totalTime }}</div> <!-- <div class="time">时间要求 {{ item.totalTime }}</div>-->
</div> </div>
<div class="view" @click="handleView(item)">查看</div> <div class="view" @click="handleView(item)">查看</div>
</div> </div>
@@ -627,7 +627,7 @@ const moneyPieOption = ref({
}) })
onMounted(async () => { onMounted(async () => {
// getTodoList() getTodoList()
await getResearchChart() await getResearchChart()
// nextTick(() => { // nextTick(() => {
// let topLeft=document.getElementById('topLeft') // let topLeft=document.getElementById('topLeft')
@@ -664,7 +664,7 @@ const goToSpecialFund = () => {
}) })
} }
const refreshTodoOrDoneList = () => { const refreshTodoOrDoneList = () => {
// getTodoList() getTodoList()
} }
const initFundCharts = () => { const initFundCharts = () => {
data.fundPieCharts = echarts.init(document.getElementById('fundPie')).setOption(fundPieOption.value) data.fundPieCharts = echarts.init(document.getElementById('fundPie')).setOption(fundPieOption.value)
@@ -675,8 +675,8 @@ const initMoneyCharts = () => {
const getTodoList = () => { const getTodoList = () => {
getHomeTaskInfo().then(res => { getHomeTaskInfo().then(res => {
if (res.code === 1000) { if (res.code === 1000) {
// todoList.value=res.data.rows todoList.value=res.data.rows
// todoNum.value=res.data.total todoNum.value=res.data.total
} else { } else {
ElNotification({ ElNotification({
title: '提示', title: '提示',
@@ -1267,9 +1267,9 @@ const handleView = (row) => {
width: 80px; width: 80px;
margin-left: 23px; margin-left: 23px;
&:last-child { //&:last-child {
white-space: nowrap; // white-space: nowrap;
} //}
} }
} }

View File

@@ -1,6 +1,6 @@
<template> <template>
<div style="padding: 0 30px"> <div style="padding: 0 30px">
<baseTitle title="设置代理" ></baseTitle> <baseTitle title="设置代理"></baseTitle>
<el-form ref="userForm" :model="agentInfoForm" label-width="85px"> <el-form ref="userForm" :model="agentInfoForm" label-width="85px">
<el-row gutter="30"> <el-row gutter="30">
<el-col :span="24"> <el-col :span="24">
@@ -9,14 +9,14 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="代理人" prop="" required > <el-form-item label="代理人" prop="" required>
<el-button style="margin-right: 10px" color="#DED0B2" @click="handleShowAgentDialog"> <el-button style="margin-right: 10px" color="#DED0B2" @click="handleShowAgentDialog">
{{ agentUserList?.length !== 0 ? '更改' : '请选择' }} {{ agentUserList?.length !== 0 ? '更改' : '请选择' }}
</el-button> </el-button>
<div v-for="item in agentUserList" :key="item.id" style="margin-right: 5px"> <div v-for="item in agentUserList" :key="item.id" style="margin-right: 5px">
{{ item.name }} {{ item.name }}
</div> </div>
<user-picker :multiple="false" ref="agentUserPickerRef" title="请选择代理人" <user-picker :multiple="false" ref="agentSettingUserPickerRef" title="请选择代理人"
v-model:value="agentUserList" @ok="agentUserPickerOk" v-model:value="agentUserList" @ok="agentUserPickerOk"
@cancelOrClear="agentUserPickerOk"/> @cancelOrClear="agentUserPickerOk"/>
</el-form-item> </el-form-item>
@@ -62,51 +62,55 @@
<script setup> <script setup>
import {ElNotification} from "element-plus"; import {ElNotification} from "element-plus";
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
import {editAgentInfo, getAgentInfo} from "@/api/user/user";
import {editAgentInfo,getAgentInfo} from "@/api/auth/auth";
const agentUserList = ref([]) const agentUserList = ref([])
const agentInfoForm = ref({}); const agentInfoForm = ref({});
const agentUserPickerRef = ref() const agentSettingUserPickerRef = ref()
const router = useRouter() const router = useRouter()
const route = useRoute()
localStorage.removeItem('originallySelectedList') localStorage.removeItem('originallySelectedList')
const userId = ref(route.query.userId)
const getUserAgentInfo = async () => { const getUserAgentInfo = async () => {
await getAgentInfo().then(res => { await getAgentInfo(userId.value).then(res => {
if(res.code===1000){ if (res.code === 1000) {
agentInfoForm.value=res.data agentInfoForm.value = res.data
agentUserList.value=[ agentUserList.value = [
{ {
id:res.data.agentUserId, id: res.data.agentUserId,
name:res.data.agentNickName, name: res.data.agentNickName,
companyName:res.data.agentCompanyName, companyName: res.data.agentCompanyName,
} }
] ]
}else { } else {
ElNotification({ ElNotification({
title: '提示', title: '提示',
message: res.msg, message: res.msg,
type: 'error' type: 'error'
}) })
} }
}) })
} }
const disabledAgentEndTime = (time) => { const disabledAgentEndTime = (time) => {
return time.getTime() <= new Date(agentInfoForm.value.agentStartTime)-1 * 24 * 3600 * 1000 return time.getTime() <= new Date(agentInfoForm.value.agentStartTime) - 1 * 24 * 3600 * 1000
} }
const handleShowAgentDialog = () => { const handleShowAgentDialog = () => {
agentUserPickerRef.value.showUserPicker() agentSettingUserPickerRef.value.showUserPicker()
} }
const agentUserPickerOk = (userList) => { const agentUserPickerOk = (userList) => {
agentUserList.value = userList agentUserList.value = userList
} }
const handleSubmitAgent=()=>{ const handleSubmitAgent = () => {
let agentUserId='' let agentUserId = ''
if(agentUserList.value&&agentUserList.value.length>0){ if (agentUserList.value && agentUserList.value.length > 0) {
agentUserId=agentUserList.value[0]?.id agentUserId = agentUserList.value[0]?.id
}else { } else {
ElNotification({ ElNotification({
title: '提示', title: '提示',
message: '请选择代理人!', message: '请选择代理人!',
@@ -114,10 +118,11 @@ const handleSubmitAgent=()=>{
}) })
return; return;
} }
let agentParams={ let agentParams = {
agentUserId:agentUserId, userId: userId.value,
agentStartTime:agentInfoForm.value.agentStartTime, agentUserId: agentUserId,
agentEndTime:agentInfoForm.value.agentEndTime agentStartTime: agentInfoForm.value.agentStartTime,
agentEndTime: agentInfoForm.value.agentEndTime
} }
console.info("🚀 ~method:agentParams -----", agentParams) console.info("🚀 ~method:agentParams -----", agentParams)
editAgentInfo(agentParams).then(res => { editAgentInfo(agentParams).then(res => {

View File

@@ -8,8 +8,8 @@
import Tag from '@/components/Tag.vue' import Tag from '@/components/Tag.vue'
import fvSelect from '@/fvcomponents/fvSelect/index.vue' import fvSelect from '@/fvcomponents/fvSelect/index.vue'
import UserPicker from "@/views/workflow/process/common/UserPicker.vue"; import UserPicker from "@/views/workflow/process/common/UserPicker.vue";
import { useAuthStore } from '@/stores/userstore.js' import {useAuthStore} from '@/stores/userstore.js'
import { getDeptOpt, getSubCompOpt,bindAccount,getBindAccount } from '@/api/user/user.js'; import {getDeptOpt, getSubCompOpt, bindAccount, getBindAccount} from '@/api/user/user.js';
import {ElMessageBox, ElNotification} from 'element-plus'; import {ElMessageBox, ElNotification} from 'element-plus';
const authStore = useAuthStore() const authStore = useAuthStore()
@@ -29,9 +29,9 @@ const searchConfig = ref([
remote: true remote: true
}, },
on: { on: {
change: async (val) =>{ change: async (val) => {
const { data } = await getDeptOpt({subCompanyId: val}) const {data} = await getDeptOpt({subCompanyId: val})
searchConfig.value.find(item=>item.prop == 'departmentId').props.data = data searchConfig.value.find(item => item.prop == 'departmentId').props.data = data
} }
} }
}, },
@@ -75,7 +75,7 @@ const searchConfig = ref([
cacheKey: 'normal_disable', cacheKey: 'normal_disable',
clearable: true, clearable: true,
remote: true, remote: true,
filterable:true filterable: true
} }
}, },
]) ])
@@ -99,7 +99,7 @@ const tableConfig = reactive({
type: 'index', type: 'index',
label: '序号', label: '序号',
align: 'center', align: 'center',
width:85, width: 85,
index: index => { index: index => {
return (tableIns.value.getQuery().pageNum - 1) * tableIns.value.getQuery().pageSize + index + 1 return (tableIns.value.getQuery().pageNum - 1) * tableIns.value.getQuery().pageSize + index + 1
} }
@@ -140,7 +140,7 @@ const tableConfig = reactive({
align: 'center', align: 'center',
width: 100, width: 100,
showOverflowTooltip: false, showOverflowTooltip: false,
currentRender: ({row, index}) => (<Tag dictType={'account_type'} value={row.accountType} />) currentRender: ({row, index}) => (<Tag dictType={'account_type'} value={row.accountType}/>)
}, },
{ {
prop: 'state', prop: 'state',
@@ -148,7 +148,7 @@ const tableConfig = reactive({
width: 80, width: 80,
align: 'center', align: 'center',
showOverflowTooltip: false, showOverflowTooltip: false,
currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state} />) currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state}/>)
}, },
{ {
prop: 'createTime', prop: 'createTime',
@@ -164,20 +164,22 @@ const tableConfig = reactive({
showOverflowTooltip: false, showOverflowTooltip: false,
currentRender: ({row, index}) => { currentRender: ({row, index}) => {
return ( return (
<div> <div>
<el-button type="primary" v-perm={auths.edit} link onClick={()=>handleEdit(row)}>编辑</el-button> <el-button type="primary" v-perm={auths.edit} link onClick={() => handleEdit(row)}>编辑</el-button>
<el-button type="primary" v-perm={auths.agentSetting} link onClick={()=>handleAgentSetting(row)}>设置代理</el-button> <el-button type="primary" v-perm={auths.agentSetting} link onClick={() => handleAgentSetting(row)}>设置代理
{ </el-button>
row.userType != 0 ? {
<el-button type="danger" v-perm={auths.del} link onClick={()=>handleDel(row)}>删除</el-button> : row.userType != 0 ?
null <el-button type="danger" v-perm={auths.del} link onClick={() => handleDel(row)}>删除</el-button> :
} null
{ }
row.accountType == 0 ? {
<el-button type="primary" v-perm={auths.bindUser} link onClick={()=>handleBindAccount(row)}>绑定账号</el-button> : row.accountType == 0 ?
null <el-button type="primary" v-perm={auths.bindUser} link
} onClick={() => handleBindAccount(row)}>绑定账号</el-button> :
</div> null
}
</div>
) )
} }
} }
@@ -185,24 +187,27 @@ const tableConfig = reactive({
api: '/admin/mosr/user', api: '/admin/mosr/user',
params: {}, params: {},
btns: [ btns: [
{name: '新增', color:"#DED0B2", auth: ['admin:user:add'], key: 'add'} {name: '新增', color: "#DED0B2", auth: ['admin:user:add'], key: 'add'}
] ]
}) })
const handleAgentSetting=()=>{ const handleAgentSetting = (row) => {
router.push({ router.push({
name: 'AgentSetting', name: 'AgentSetting',
query: {
userId: row.userId,
}
}) })
} }
const init = async () => { const init = async () => {
// console.log(authStore.roles,'userinfo'); // console.log(authStore.roles,'userinfo');
if(!authStore.roles.includes('superAdmin')) { if (!authStore.roles.includes('superAdmin')) {
searchConfig.value = searchConfig.value.slice(1) searchConfig.value = searchConfig.value.slice(1)
} }
searchConfig.value = searchConfig.value searchConfig.value = searchConfig.value
const { data } = await getDeptOpt() const {data} = await getDeptOpt()
searchConfig.value.find(item=>item.prop == 'departmentId').props.data = data searchConfig.value.find(item => item.prop == 'departmentId').props.data = data
const res = await getSubCompOpt() const res = await getSubCompOpt()
searchConfig.value.find(item=>item.prop == 'subCompanyId').props.data = res.data searchConfig.value.find(item => item.prop == 'subCompanyId').props.data = res.data
// console.log("🚀 ~ init ~ searchConfig.value:", searchConfig.value) // console.log("🚀 ~ init ~ searchConfig.value:", searchConfig.value)
} }
@@ -239,20 +244,21 @@ const handleDel = (row) => {
cancelButtonText: '取消' cancelButtonText: '取消'
}).then(async res => { }).then(async res => {
// const { code } = await // const { code } = await
}).catch(()=>{}) }).catch(() => {
})
} }
const handleBindAccount=(row)=>{ const handleBindAccount = (row) => {
currentId.value = row.userId currentId.value = row.userId
getBindAccount(row.userId).then(res=>{ getBindAccount(row.userId).then(res => {
if(res.code != 1000){ if (res.code != 1000) {
ElNotification({ ElNotification({
title: '提示', title: '提示',
message: res.msg, message: res.msg,
type: 'error' type: 'error'
}) })
}else { } else {
userList.value = res.data userList.value = res.data
nextTick(()=>{ nextTick(() => {
userPicker.value.showUserPicker() userPicker.value.showUserPicker()
}) })
} }
@@ -268,12 +274,12 @@ const selected = (select) => {
userInfoList.push(userInfo) userInfoList.push(userInfo)
} }
userList.value = userInfoList userList.value = userInfoList
let ids=userList.value.map(item=>item.id) let ids = userList.value.map(item => item.id)
let params={ let params = {
id:currentId.value, id: currentId.value,
ids:ids ids: ids
} }
bindAccount(params).then(res=>{ bindAccount(params).then(res => {
ElNotification({ ElNotification({
title: '提示', title: '提示',
message: res.msg, message: res.msg,
@@ -282,8 +288,9 @@ const selected = (select) => {
}) })
} }
const headBtnClick = (key) => { const headBtnClick = (key) => {
switch(key) { switch (key) {
case 'add': handleAdd() case 'add':
handleAdd()
break; break;
} }
} }
@@ -304,7 +311,8 @@ const headBtnClick = (key) => {
} }
} }
} }
:deep(.el-col-5:nth-child(4).el-col-offset-1){
:deep(.el-col-5:nth-child(4).el-col-offset-1) {
margin-left: 35px !important; margin-left: 35px !important;
} }
</style> </style>

View File

@@ -1,8 +1,8 @@
<template> <template>
<!-- <div>--> <!-- <div>-->
<!-- <el-button v-print="print" color="#ded0b2" icon="Printer"> 打印</el-button> id="printBox"--> <!-- <el-button v-print="print" color="#ded0b2" icon="Printer"> 打印</el-button> id="printBox"-->
<!-- </div>--> <!-- </div>-->
<div style="margin: 10px" > <div style="margin: 10px">
<el-timeline> <el-timeline>
<el-timeline-item v-for="(operation,index) in operationList" <el-timeline-item v-for="(operation,index) in operationList"
:key="index" :timestamp="operation.startTime" :key="index" :timestamp="operation.startTime"
@@ -11,7 +11,7 @@
size="large" size="large"
placement="top"> placement="top">
<template #dot> <template #dot>
<!-- :style="{backgroundColor:operation.color}"--> <!-- :style="{backgroundColor:operation.color}"-->
<div style="background-color:#fff;width: 16px; height: 16px"> <div style="background-color:#fff;width: 16px; height: 16px">
<el-icon :color="operation.color" size="16px"> <el-icon :color="operation.color" size="16px">
<component :is="operation.icon"></component> <component :is="operation.icon"></component>
@@ -25,10 +25,10 @@
<div class="card"> <div class="card">
<div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name" <div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name"
:style="{'flex-direction': isColumn?'column':'row'}"> :style="{'flex-direction': isColumn?'column':'row'}">
<div class="avatar-block" :style="{'margin-bottom': isColumn?'10px':'0'}"> <div class="avatar-block" :style="{'margin': isColumn?'0 0 10px 18px':'0'}">
<name-circle :user="user" :type="operation.operation"/> <name-circle :user="user" :type="operation.operation"/>
<div class="name"> <div class="name-block" :style="{'margin': isColumn?'0 0 0 30px':'0 20px 0 10px'}">
<div style="display: flex;align-items: center"> <div style="display: flex;align-items: center" >
<el-icon :color="user.accountType==='0'?'#95d475':user.accountType==null?'#95d475':'#409eff'" <el-icon :color="user.accountType==='0'?'#95d475':user.accountType==null?'#95d475':'#409eff'"
style="margin-right: 5px;"> style="margin-right: 5px;">
<UserFilled/> <UserFilled/>
@@ -38,14 +38,25 @@
<span>{{ user.jobActivityDesc }}</span> <span>{{ user.jobActivityDesc }}</span>
</div> </div>
</div> </div>
<div> <div v-if="user.isAgent" style="display: flex;" :style="{'margin': isColumn?'10px 0':'0'}">
<!-- <div class="remark">{{ operation.remark }}</div>--> <div>
<!-- <div>--> <name-circle :user="user" :showIcon="true" :user-name="user.agentUserName" :type="operation.operation"/>
<!-- <div>审批</div>--> <span style="color: #909399;font-size: 14px">代理审批</span>
<!-- <div>{{ user.name }}</div>--> </div>
<!-- </div>--> <div class="name-block">
<div style="display: flex;align-items: center">
<el-icon :color="user.accountType==='0'?'#95d475':user.accountType==null?'#95d475':'#409eff'"
style="margin-right: 5px;">
<UserFilled/>
</el-icon>
<span class="name-style">{{ user.agentUserName }}</span>
</div>
<span>{{ user.agentCompanyName }}</span>
</div>
</div>
<div class="auditOpinion">
<div v-if="user.auditOpinion"> <div v-if="user.auditOpinion">
<div style="margin-bottom: 10px;color: #909399">{{ user.operationTime }}</div> <div style="margin-bottom: 10px;color: #909399">{{ user.operationTime||'2024-09-22 12:16:29' }}</div>
<div class="username"> <div class="username">
<span style="font-weight: bold">审批意见</span> <span style="font-weight: bold">审批意见</span>
<el-text v-text="user.auditOpinion" style="word-break: break-all"> <el-text v-text="user.auditOpinion" style="word-break: break-all">
@@ -200,15 +211,15 @@ const initOperationFun = (operation) => {
operation["remark"] = " 处理中" operation["remark"] = " 处理中"
} }
//回退 //回退
if (state === 'ROLLBACK') { // if (state === 'ROLLBACK') {
// operation["icon"] = "RefreshLeft" // // operation["icon"] = "RefreshLeft"
// operation["color"] = "#f78f5f" // // operation["color"] = "#f78f5f"
operation["icon"] = "CircleCloseFilled" // operation["icon"] = "CircleCloseFilled"
operation["color"] = "#f56c6c" // operation["color"] = "#f56c6c"
operation["remark"] = " 回退成功" // operation["remark"] = " 回退成功"
} // }
//拒绝操作 //拒绝操作
if (state === 'REFUSE' || state === 'AUTO_REFUSE') { if (state === 'REFUSE' || state === 'AUTO_REFUSE' ||state === 'ROLLBACK') {
operation["icon"] = "CircleCloseFilled" operation["icon"] = "CircleCloseFilled"
operation["color"] = "#f56c6c" operation["color"] = "#f56c6c"
operation["remark"] = " 拒绝" operation["remark"] = " 拒绝"
@@ -267,6 +278,7 @@ init()
:deep(.el-timeline-item__dot) { :deep(.el-timeline-item__dot) {
margin-left: -3px; margin-left: -3px;
} }
:deep .el-card__body, .el-main { :deep .el-card__body, .el-main {
padding: 10px; padding: 10px;
} }
@@ -290,29 +302,33 @@ init()
border-bottom: none; border-bottom: none;
} }
.name-block {
width: 130px;
display: flex;
flex-direction: column;
margin-left: 10px;
margin-right: 20px;
.name-style {
color: #2a99ff;
}
> span:last-child {
margin-top: 5px;
color: #909399;
}
}
.avatar-block { .avatar-block {
display: flex; display: flex;
.name { .agent-style {
width: 130px; color: #909399;
display: flex; font-size: 15px;
flex-direction: column;
margin-left: 10px;
margin-right: 20px;
.name-style {
color: #2a99ff;
}
> span:last-child {
margin-top: 5px;
color: #909399;
}
} }
} }
> div:nth-child(2) { .auditOpinion {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #8a8a8a; color: #8a8a8a;