fix : 审批记录样式优化, 上传费用,新增分摊输入框宽度固定

This commit is contained in:
2024-06-20 16:55:15 +08:00
parent 57f27c2b84
commit a6476c359d
7 changed files with 118 additions and 78 deletions

View File

@@ -18,7 +18,8 @@
</el-table-column> </el-table-column>
</template> </template>
<template v-else> <template v-else>
<template v-if="column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost'"> <template
v-if="(column.prop === 'totalSeparation' || column.prop === 'totalSeparationCost') && (tableData.length- 1) !== scope.$index">
{{ getTotalSeparation(scope.row, column.prop) }} {{ getTotalSeparation(scope.row, column.prop) }}
</template> </template>
<template v-else> <template v-else>
@@ -92,7 +93,7 @@ const getTotalSeparation = (row, prop) => {
} }
} }
if (totalSeparation !== 0) { if (totalSeparation !== 0) {
return totalSeparation; return totalSeparation.toFixed(2);
} else { } else {
return "/" return "/"
} }
@@ -165,6 +166,6 @@ const exportTable = () => {
if (!$table) { if (!$table) {
$table = $e $table = $e
} }
exportExcel($table, tableData.value[0], "四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表") exportExcel($table, (5 + (Object.keys(tableData.value[0]).length - 5) * 5), "四川省国有资产经营投资管理有限责任公司科技创新项目人工成本分摊明细表")
} }
</script> </script>

View File

@@ -1,5 +1,5 @@
<template> <template>
<div> <div style="display: block">
<slot name="pre"></slot> <slot name="pre"></slot>
<div class="user-audit"> <div class="user-audit">
<div class="circle-user"> <div class="circle-user">
@@ -13,17 +13,12 @@
</el-icon> </el-icon>
</div> </div>
</div> </div>
<div class="username" v-if="user.auditOpinion">
<div style="margin-bottom: 10px;color: #909399">{{user.operationTime}}</div>
<Tooltip :content="user.auditOpinion" placement="bottom-start" width="140" :lines="true"/>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import {Loading, Close, CircleCheckFilled, MoreFilled} from '@element-plus/icons-vue' import {Loading, Close, CircleCheckFilled, MoreFilled} from '@element-plus/icons-vue'
import {defineProps} from "vue";
const props = defineProps({ const props = defineProps({
row: { row: {
@@ -90,15 +85,16 @@ init()
align-items: center; align-items: center;
.circle-user { .circle-user {
width: 50px; width: 46px;
height: 50px; height: 46px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 50%; border-radius: 50%;
border: 1px solid #ACACAC; border: 1px solid #ACACAC;
position: relative; position: relative;
background-color: #8a7243;
color: #fff;
.el-timeline-item__node { .el-timeline-item__node {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@@ -106,21 +102,6 @@ init()
} }
} }
.username {
//width: 90px;
margin-top: 10px;
background: #f5f5f5;
padding: 5px;
.el-tooltip__trigger {
width: 90px;
text-align: center;
//padding-top: 2px;
//text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
}
} }
</style> </style>

View File

@@ -17,7 +17,9 @@
</div> </div>
<!-- 列显示配置 --> <!-- 列显示配置 -->
<div v-if="isSettingCol" style="float: right"> <div v-if="isSettingCol" style="float: right">
<el-button v-if="tableConfig.export && tableConfig.export.open" @click="exportTable" color="#DED0B2" style="margin-bottom: 10px">导出</el-button> <el-button v-if="tableConfig.export && tableConfig.export.open" @click="exportTable" color="#DED0B2"
style="margin-bottom: 10px">导出
</el-button>
<el-tooltip effect="dark" content="列配置" placement="bottom"> <el-tooltip effect="dark" content="列配置" placement="bottom">
<el-button ref="buttonRef" link> <el-button ref="buttonRef" link>
<el-icon size="18"> <el-icon size="18">
@@ -142,7 +144,7 @@ const exportTable = () => {
if (props.tableConfig.export && props.tableConfig.export) { if (props.tableConfig.export && props.tableConfig.export) {
fileName = props.tableConfig.export.fileName fileName = props.tableConfig.export.fileName
} }
exportExcel($table, localData.list[0], fileName) exportExcel($table, Object.keys(localData.list[0]), fileName)
} }
const localData = reactive({ const localData = reactive({

View File

@@ -2,20 +2,20 @@ import {utils} from "xlsx";
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import XLSX from "xlsx-style-vite"; import XLSX from "xlsx-style-vite";
/**
export function exportExcel($table, row, excelName) { * 导出excel
//如果导出后多出空白行则修改rowspan否则可不用 * @param $table 表格html dom元素
// var tds = document.querySelectorAll(".el-table__footer td"); * @param columnLength 列长度
// tds.forEach(td => td.setAttribute("rowspan", "1")); * @param excelName 导出文件名称
*/
export function exportExcel($table, columnLength, excelName) {
//从el-table表生成工作簿对象 //从el-table表生成工作簿对象
//使用原始的格式,保留表格中的格式如%、小数末尾的0等 //使用原始的格式,保留表格中的格式如%、小数末尾的0等
let workbook = utils.table_to_book($table, { let workbook = utils.table_to_book($table, {
raw: true raw: true
}); });
//列宽需要导出的表格有多少列这里的i就小于多少 //列宽需要导出的表格有多少列这里的i就小于多少
let keys = Object.keys(row).length for (let i = 1; i < columnLength; i++) {
for (let i = 1; i < (5 + (keys - 5) * 5); i++) {
workbook.Sheets.Sheet1["!cols"].push({wpx: 100}); workbook.Sheets.Sheet1["!cols"].push({wpx: 100});
} }
//设置单元格样式 //设置单元格样式

View File

@@ -51,49 +51,49 @@
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="wagesPayable" label="应发工资"> <el-table-column prop="wagesPayable" label="应发工资" width="175">
<template #default="scope"> <template #default="scope">
<el-form-item prop="time" :rules="scope.row.wagesPayable?'1':rules.wagesPayable"> <el-form-item prop="time" :rules="scope.row.wagesPayable?'1':rules.wagesPayable">
<el-input-number v-model="scope.row.wagesPayable" placeholder="请输入应发工资" :controls="false"/> <el-input-number v-model="scope.row.wagesPayable" placeholder="请输入应发工资" :controls="false"/>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="performance" label="绩效"> <el-table-column prop="performance" label="绩效" width="175">
<template #default="scope"> <template #default="scope">
<el-form-item prop="time" :rules="scope.row.performance?'1':rules.performance"> <el-form-item prop="time" :rules="scope.row.performance?'1':rules.performance">
<el-input-number v-model="scope.row.performance" placeholder="请输入绩效" :controls="false"/> <el-input-number v-model="scope.row.performance" placeholder="请输入绩效" :controls="false"/>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="reserveFund" label="公积金"> <el-table-column prop="reserveFund" label="公积金" width="175">
<template #default="scope"> <template #default="scope">
<el-form-item prop="time" :rules="scope.row.reserveFund?'1':rules.reserveFund"> <el-form-item prop="time" :rules="scope.row.reserveFund?'1':rules.reserveFund">
<el-input-number v-model="scope.row.reserveFund" placeholder="请输入公积金" :controls="false"/> <el-input-number v-model="scope.row.reserveFund" placeholder="请输入公积金" :controls="false"/>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="socialSecurity" label="社保"> <el-table-column prop="socialSecurity" label="社保" width="175">
<template #default="scope"> <template #default="scope">
<el-form-item prop="time" :rules="scope.row.socialSecurity?'1':rules.socialSecurity"> <el-form-item prop="time" :rules="scope.row.socialSecurity?'1':rules.socialSecurity">
<el-input-number v-model="scope.row.socialSecurity" placeholder="请输入社保" :controls="false"/> <el-input-number v-model="scope.row.socialSecurity" placeholder="请输入社保" :controls="false"/>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="annuity" label="年金"> <el-table-column prop="annuity" label="年金" width="175">
<template #default="scope"> <template #default="scope">
<el-form-item prop="time" :rules="scope.row.annuity?'1':rules.annuity"> <el-form-item prop="time" :rules="scope.row.annuity?'1':rules.annuity">
<el-input-number v-model="scope.row.annuity" placeholder="请输入年金" :controls="false"/> <el-input-number v-model="scope.row.annuity" placeholder="请输入年金" :controls="false"/>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="workday" label="工作日(天)"> <el-table-column prop="workday" label="工作日(天)" width="175">
<template #default="scope"> <template #default="scope">
<el-form-item prop="time" :rules="scope.row.workday?'1':rules.workday"> <el-form-item prop="time" :rules="scope.row.workday?'1':rules.workday">
<el-input-number v-model="scope.row.workday" placeholder="请输入工作日" :controls="false"/> <el-input-number v-model="scope.row.workday" placeholder="请输入工作日" :controls="false"/>
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="researchDuration" label="研发时长(天)"> <el-table-column prop="researchDuration" label="研发时长(天)" width="175">
<template #default="scope"> <template #default="scope">
<el-form-item prop="time" :rules="scope.row.researchDuration?'1':rules.researchDuration"> <el-form-item prop="time" :rules="scope.row.researchDuration?'1':rules.researchDuration">
<el-input-number v-model="scope.row.researchDuration" placeholder="请输入研发时长" :controls="false"/> <el-input-number v-model="scope.row.researchDuration" placeholder="请输入研发时长" :controls="false"/>

View File

@@ -3,7 +3,7 @@
<fvForm :schema="schema" @getInstance="(e)=>baseForm = e"></fvForm> <fvForm :schema="schema" @getInstance="(e)=>baseForm = e"></fvForm>
<el-form :model="tableForm" ref="form" class="query-form"> <el-form :model="tableForm" ref="form" class="query-form">
<el-table :data="tableForm.tableData" style="width: 100%"> <el-table :data="tableForm.tableData" style="width: 100%">
<el-table-column prop="time" label="时间"> <el-table-column prop="time" label="时间" width="180">
<template #default="scope"> <template #default="scope">
<el-form-item prop="time" :rules="scope.row.time?'1':rules.time"> <el-form-item prop="time" :rules="scope.row.time?'1':rules.time">
<el-date-picker <el-date-picker
@@ -17,7 +17,7 @@
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="projectCost" label="项目费用"> <el-table-column prop="projectCost" label="项目费用" width="220">
<template #default="scope"> <template #default="scope">
<el-form-item prop="projectCost" :rules="scope.row.projectCost?'1':rules.projectCost"> <el-form-item prop="projectCost" :rules="scope.row.projectCost?'1':rules.projectCost">
<el-select v-model="scope.row.projectCost" placeholder="请选择费用性质" clearable filterable> <el-select v-model="scope.row.projectCost" placeholder="请选择费用性质" clearable filterable>
@@ -31,7 +31,7 @@
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="researchStage" label="研发阶段"> <el-table-column prop="researchStage" label="研发阶段" width="220">
<template #default="scope"> <template #default="scope">
<el-form-item prop="researchStage" :rules="scope.row.researchStage?'1':rules.researchStage"> <el-form-item prop="researchStage" :rules="scope.row.researchStage?'1':rules.researchStage">
<el-select v-model="scope.row.researchStage" placeholder="请选择研发阶段" clearable filterable> <el-select v-model="scope.row.researchStage" placeholder="请选择研发阶段" clearable filterable>
@@ -45,7 +45,7 @@
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="digest" label="摘要"> <el-table-column prop="digest" label="摘要" width="220">
<template #default="scope"> <template #default="scope">
<el-form-item prop="digest" :rules="scope.row.digest?'1':rules.digest"> <el-form-item prop="digest" :rules="scope.row.digest?'1':rules.digest">
<el-input v-model="scope.row.digest" placeholder="请输入摘要" clearable> <el-input v-model="scope.row.digest" placeholder="请输入摘要" clearable>
@@ -53,7 +53,7 @@
</el-form-item> </el-form-item>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="afterTax" label="税后余额(元)"> <el-table-column prop="afterTax" label="税后余额(元)" width="220">
<template #default="scope"> <template #default="scope">
<el-form-item prop="afterTax" :rules="scope.row.afterTax?'1':rules.afterTax"> <el-form-item prop="afterTax" :rules="scope.row.afterTax?'1':rules.afterTax">
<el-input v-model="scope.row.afterTax" placeholder="请输入税后余额" clearable> <el-input v-model="scope.row.afterTax" placeholder="请输入税后余额" clearable>

View File

@@ -7,16 +7,25 @@
:color="operation.color" :color="operation.color"
size="large" size="large"
placement="top"> placement="top">
<el-card> <el-card>
<div style="display: flex;"> <div class="card">
<!-- <avatar-ellipsis :row="3" v-if="operation.userInfo.length > 0" :user-info="operation.userInfo"/>-->
<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">
<name-circle :user="user"/> <div>
</div> <name-circle :user="user"/>
<div style="margin-left: 10px;"> <span>{{ user.name }}</span>
<div style="color: #c0bebe">{{ operation.operationName }}</div> </div>
<div style="font-size: 14px; font-weight: bold;">{{ operation.remark }}</div> <div>
<div class="remark">{{ operation.remark }}</div>
<div>
<div>{{ operation.operationName }}</div>
<div>{{ user.name }}</div>
</div>
<div v-if="user.auditOpinion">
<div style="margin-bottom: 10px;color: #909399">{{ user.operationTime }}</div>
<Tooltip :content="user.auditOpinion" placement="bottom-start" width="140" :lines="true"/>
</div>
</div>
</div> </div>
</div> </div>
</el-card> </el-card>
@@ -32,7 +41,6 @@
<script setup> <script setup>
import {CircleCheckFilled, Close, Loading, MoreFilled} from "@element-plus/icons-vue"; import {CircleCheckFilled, Close, Loading, MoreFilled} from "@element-plus/icons-vue";
import AvatarEllipsis from '../process/common/AvatarEllipsis.vue'
import NameCircle from "@/components/NameCircle.vue"; import NameCircle from "@/components/NameCircle.vue";
const props = defineProps({ const props = defineProps({
@@ -162,7 +170,7 @@ const initOperationFun = (operation) => {
if (state === 'AGREE' || state === 'AUTO_PASS') { if (state === 'AGREE' || state === 'AUTO_PASS') {
operation["icon"] = "CircleCheckFilled" operation["icon"] = "CircleCheckFilled"
operation["color"] = "#0bbd87" operation["color"] = "#0bbd87"
operation["remark"] = " (已同意)" operation["remark"] = " 已同意"
} }
if (state === 'PASS') { if (state === 'PASS') {
operation["icon"] = "SemiSelect" operation["icon"] = "SemiSelect"
@@ -172,26 +180,26 @@ const initOperationFun = (operation) => {
if (state === 'RUNNING') { if (state === 'RUNNING') {
operation["icon"] = "Loading" operation["icon"] = "Loading"
operation["color"] = "#f78f5f" operation["color"] = "#f78f5f"
operation["remark"] = " (处理中)" operation["remark"] = " 处理中"
} }
//回退 //回退
if (state === 'ROLLBACK') { if (state === 'ROLLBACK') {
operation["icon"] = "RefreshLeft" operation["icon"] = "RefreshLeft"
operation["color"] = "#f78f5f" operation["color"] = "#f78f5f"
operation["remark"] = " (回退成功)" operation["remark"] = " 回退成功"
} }
//拒绝操作 //拒绝操作
if (state === 'REFUSE' || state === 'AUTO_REFUSE') { if (state === 'REFUSE' || state === 'AUTO_REFUSE') {
operation["icon"] = "CircleCloseFilled" operation["icon"] = "CircleCloseFilled"
operation["color"] = "#f56c6c" operation["color"] = "#f56c6c"
operation["remark"] = " (拒绝)" operation["remark"] = " 拒绝"
} }
} }
//抄送 //抄送
if (type === 'CC') { if (type === 'CC') {
operation["icon"] = "Promotion" operation["icon"] = "Promotion"
operation["color"] = "#3395f8" operation["color"] = "#3395f8"
operation["remark"] = " (抄送成功)" operation["remark"] = " 抄送成功"
} }
//评论 //评论
if (type === 'COMMENT') { if (type === 'COMMENT') {
@@ -199,7 +207,7 @@ const initOperationFun = (operation) => {
if (state === 'COMMENT') { if (state === 'COMMENT') {
operation["icon"] = "ChatDotRound" operation["icon"] = "ChatDotRound"
operation["color"] = "#0bbd87" operation["color"] = "#0bbd87"
operation["remark"] = " (添加了评论)" operation["remark"] = " 添加了评论"
} }
} }
//触发器发送http请求 //触发器发送http请求
@@ -207,13 +215,13 @@ const initOperationFun = (operation) => {
operation["icon"] = "Share" operation["icon"] = "Share"
if (state === 'SUCCESS') { if (state === 'SUCCESS') {
operation["color"] = "#0bbd87" operation["color"] = "#0bbd87"
operation["remark"] = " (成功)" operation["remark"] = " 成功"
} else if (state === 'RUNNING') { } else if (state === 'RUNNING') {
operation["color"] = "#f78f5f" operation["color"] = "#f78f5f"
operation["remark"] = " (请求中)" operation["remark"] = " 请求中"
} else { } else {
operation["color"] = "#f56c6c" operation["color"] = "#f56c6c"
operation["remark"] = " (失败)" operation["remark"] = " 失败"
} }
} }
@@ -222,13 +230,13 @@ const initOperationFun = (operation) => {
operation["icon"] = "Message" operation["icon"] = "Message"
if (state === 'SUCCESS') { if (state === 'SUCCESS') {
operation["color"] = "#0bbd87" operation["color"] = "#0bbd87"
operation["remark"] = " (成功)" operation["remark"] = " 成功"
} else if (state === 'RUNNING') { } else if (state === 'RUNNING') {
operation["color"] = "#f78f5f" operation["color"] = "#f78f5f"
operation["remark"] = " (发送中)" operation["remark"] = " 发送中"
} else { } else {
operation["color"] = "#f78f5f" operation["color"] = "#f78f5f"
operation["remark"] = " (发送中)" operation["remark"] = " 发送中"
} }
} }
return operation; return operation;
@@ -237,25 +245,73 @@ init()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep .el-card__body, .el-main { :deep .el-card__body, .el-main {
padding: 10px; padding: 10px;
} }
.avatar_name { .card {
//width: 45px;
display: flex; display: flex;
flex-direction: column; font-size: 15px;
align-items: center;
position: relative;
margin-right: 5px;
> div:first-child {
display: flex;
}
.avatar_name {
display: flex;
margin-right: 5px;
> div:first-child {
display: flex;
> span {
color: #2a99ff;
margin-left: 10px;
margin-right: 20px;
}
}
> div:nth-child(2) {
display: flex;
flex-direction: column;
color: #8a8a8a;
.remark {
font-weight: bold;
}
> div {
margin-bottom: 5px;
}
> div:nth-child(2) {
display: flex;
margin-top: -5px;
}
}
}
} }
.el-timeline-item__node { .el-timeline-item__node {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
right: 1px; right: 1px;
} }
//.username {
// //width: 90px;
// margin-top: 10px;
// background: #f5f5f5;
// padding: 5px;
//
// .el-tooltip__trigger {
// width: 90px;
// text-align: center;
// //padding-top: 2px;
// //text-align: center;
// text-overflow: ellipsis;
// white-space: nowrap;
// overflow: hidden
// }
//}
</style> </style>