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

View File

@@ -1,5 +1,5 @@
<template>
<div>
<div style="display: block">
<slot name="pre"></slot>
<div class="user-audit">
<div class="circle-user">
@@ -13,17 +13,12 @@
</el-icon>
</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>
</template>
<script setup>
import {Loading, Close, CircleCheckFilled, MoreFilled} from '@element-plus/icons-vue'
import {defineProps} from "vue";
const props = defineProps({
row: {
@@ -90,15 +85,16 @@ init()
align-items: center;
.circle-user {
width: 50px;
height: 50px;
width: 46px;
height: 46px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 1px solid #ACACAC;
position: relative;
background-color: #8a7243;
color: #fff;
.el-timeline-item__node {
position: absolute;
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>

View File

@@ -17,7 +17,9 @@
</div>
<!-- 列显示配置 -->
<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-button ref="buttonRef" link>
<el-icon size="18">
@@ -142,7 +144,7 @@ const exportTable = () => {
if (props.tableConfig.export && props.tableConfig.export) {
fileName = props.tableConfig.export.fileName
}
exportExcel($table, localData.list[0], fileName)
exportExcel($table, Object.keys(localData.list[0]), fileName)
}
const localData = reactive({

View File

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

View File

@@ -51,49 +51,49 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="wagesPayable" label="应发工资">
<el-table-column prop="wagesPayable" label="应发工资" width="175">
<template #default="scope">
<el-form-item prop="time" :rules="scope.row.wagesPayable?'1':rules.wagesPayable">
<el-input-number v-model="scope.row.wagesPayable" placeholder="请输入应发工资" :controls="false"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="performance" label="绩效">
<el-table-column prop="performance" label="绩效" width="175">
<template #default="scope">
<el-form-item prop="time" :rules="scope.row.performance?'1':rules.performance">
<el-input-number v-model="scope.row.performance" placeholder="请输入绩效" :controls="false"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="reserveFund" label="公积金">
<el-table-column prop="reserveFund" label="公积金" width="175">
<template #default="scope">
<el-form-item prop="time" :rules="scope.row.reserveFund?'1':rules.reserveFund">
<el-input-number v-model="scope.row.reserveFund" placeholder="请输入公积金" :controls="false"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="socialSecurity" label="社保">
<el-table-column prop="socialSecurity" label="社保" width="175">
<template #default="scope">
<el-form-item prop="time" :rules="scope.row.socialSecurity?'1':rules.socialSecurity">
<el-input-number v-model="scope.row.socialSecurity" placeholder="请输入社保" :controls="false"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="annuity" label="年金">
<el-table-column prop="annuity" label="年金" width="175">
<template #default="scope">
<el-form-item prop="time" :rules="scope.row.annuity?'1':rules.annuity">
<el-input-number v-model="scope.row.annuity" placeholder="请输入年金" :controls="false"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="workday" label="工作日(天)">
<el-table-column prop="workday" label="工作日(天)" width="175">
<template #default="scope">
<el-form-item prop="time" :rules="scope.row.workday?'1':rules.workday">
<el-input-number v-model="scope.row.workday" placeholder="请输入工作日" :controls="false"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="researchDuration" label="研发时长(天)">
<el-table-column prop="researchDuration" label="研发时长(天)" width="175">
<template #default="scope">
<el-form-item prop="time" :rules="scope.row.researchDuration?'1':rules.researchDuration">
<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>
<el-form :model="tableForm" ref="form" class="query-form">
<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">
<el-form-item prop="time" :rules="scope.row.time?'1':rules.time">
<el-date-picker
@@ -17,7 +17,7 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="projectCost" label="项目费用">
<el-table-column prop="projectCost" label="项目费用" width="220">
<template #default="scope">
<el-form-item prop="projectCost" :rules="scope.row.projectCost?'1':rules.projectCost">
<el-select v-model="scope.row.projectCost" placeholder="请选择费用性质" clearable filterable>
@@ -31,7 +31,7 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="researchStage" label="研发阶段">
<el-table-column prop="researchStage" label="研发阶段" width="220">
<template #default="scope">
<el-form-item prop="researchStage" :rules="scope.row.researchStage?'1':rules.researchStage">
<el-select v-model="scope.row.researchStage" placeholder="请选择研发阶段" clearable filterable>
@@ -45,7 +45,7 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="digest" label="摘要">
<el-table-column prop="digest" label="摘要" width="220">
<template #default="scope">
<el-form-item prop="digest" :rules="scope.row.digest?'1':rules.digest">
<el-input v-model="scope.row.digest" placeholder="请输入摘要" clearable>
@@ -53,7 +53,7 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="afterTax" label="税后余额(元)">
<el-table-column prop="afterTax" label="税后余额(元)" width="220">
<template #default="scope">
<el-form-item prop="afterTax" :rules="scope.row.afterTax?'1':rules.afterTax">
<el-input v-model="scope.row.afterTax" placeholder="请输入税后余额" clearable>

View File

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