<template>
<div>
<header class="ant
-layout
-header header_sd
-header_common">
<div class="left_sd
-header_common">
<div class="logo_sd
-webflow_webflow">
<h3>激励考核指下发</h3>
</div>
</div>
<div class="right_sd
-header_common">
<a
-button
v
-if="!readonly"
type="link"
icon="save"
class="
button_sd
-webflow
-button_webflow"
@click="save"
>
保存
</a
-button>
<a
-button
v
-if="!readonly"
type="link"
icon="save"
class="
button_sd
-webflow
-button_webflow"
@click="xfClick"
>
下发
</a
-button>
<a
-button
type="link"
icon="close
-circle"
class="
button_sd
-webflow
-button_webflow"
@click="btnClose"
>
退出
</a
-button>
</div>
</header>
<div class="budget
-record">
<div class="budget
-record
-table">
<h2 class="budget
-record
-table
-title">激励考核指下发</h2>
<a
-form
-mod
el
ref="ruleForm"
:rules="rules"
:mod
el="project"
class="sitd
-apply"
layout="horizontal"
>
<table>
<colgroup>
<col width="170px" />
<col />
<col width="170px" />
<col />
</colgroup>
<tr>
<td class="ant
-form
-item
-lab
el c
ell_sd
-form
-item
-td
-lab
el_common">
<lab
el title="指标编号">指标编号</lab
el>
</td>
<td class="ant
-form
-item
-control
-wrapper" :colspan="3">
<a
-form
-mod
el-item prop="zbbh">
<template>{{ project['zbbh'] }}</template>
</a
-form
-mod
el-item>
</td>
</tr>
<tr>
<td class="ant
-form
-item
-lab
el c
ell_sd
-form
-item
-td
-lab
el_common">
<lab
el title="指标年度" class="ant
-form
-item
-required">指标年度</lab
el>
</td>
<td class="ant
-form
-item
-control
-wrapper">
<a
-form
-mod
el-item prop="zbnd">
<!
-- 修改为下拉选择框
-->
<a
-s
elect
v
-if="!readonly"
v
-mod
el="project['zbnd']"
placeholder="请选择年份"
style="width: 100%"
>
<!
-- 生成年份选项
-->
<a
-s
elect
-option v
-for="year in yearOptions" :key="year" :value="year">
{{ year }}
</a
-s
elect
-option>
</a
-s
elect>
<template v
-else>
{{ project['zbnd'] }}
</template>
</a
-form
-mod
el-item>
</td>
<td class="ant
-form
-item
-lab
el c
ell_sd
-form
-item
-td
-lab
el_common">
<lab
el title="考核周期">考核周期</lab
el>
</td>
<td class="ant
-form
-item
-control
-wrapper">
<a
-form
-mod
el-item prop="khzq">
<a
-input v
-if="!readonly" v
-mod
el="project['khzq']" placeholder="考核周期" />
<template v
-else>{{ project['khzq'] }}</template>
</a
-form
-mod
el-item>
</td>
</tr>
<tr>
<td class="ant
-form
-item
-lab
el c
ell_sd
-form
-item
-td
-lab
el_common">
<lab
el title="考核对象">考核对象</lab
el>
</td>
<td class="ant
-form
-item
-control
-wrapper">
<a
-form
-mod
el-item prop="khdx">
<a
-s
elect
v
-if="!readonly"
v
-mod
el="s
electedKhdxIds"
mode="multiple"
style="width: 100%"
placeholder="请选择被考核对象"
@change="handleKhdxChange"
>
<template v
-for="(item, _i) in khdxList">
<a
-s
elect
-option :key="item.code" :value="item.code">{{
item.value
}}</a
-s
elect
-option>
</template>
</a
-s
elect>
<template v
-else>{{ project['khdx'] }}</template>
</a
-form
-mod
el-item>
</td>
<td class="ant
-form
-item
-lab
el c
ell_sd
-form
-item
-td
-lab
el_common">
<lab
el title="创建日期" class="ant
-form
-item
-required">创建日期</lab
el>
</td>
<td class="ant
-form
-item
-control
-wrapper">
<a
-form
-mod
el-item prop="cjrq">
<template>{{ project['cjrq'] ? refreshTime(project['cjrq']) : '' }}</template>
</a
-form
-mod
el-item>
</td>
</tr>
<tr>
<td class="ant
-form
-item
-lab
el c
ell_sd
-form
-item
-td
-lab
el_common upload
-td">
<lab
el title="说明">说明</lab
el>
</td>
<td class="ant
-form
-item
-control
-wrapper" colspan="3">
<a
-form
-mod
el-item prop="sm">
<div v
-if="!readonly" class="textarea
-wrapper">
<a
-textarea
v
-mod
el="project['sm']"
placeholder="请输入内容"
:max
-length="300"
class="m
-textarea"
:auto
-size="{ minRows: 3, maxRows: 5 }"
/>
<span class="m
-count">{{ `${project['sm']?.length || 0}/300` }}</span>
</div>
<template v
-else>{{ project['sm'] }}</template>
</a
-form
-mod
el-item>
</td>
</tr>
</table>
</a
-form
-mod
el>
<!
-- 这里暂时去掉，根据客户描述，一年只进行一次年度考核和激励考核，因此根据年度和单位关联即可
-->
<!
-- <h3 class="budget
-record
-table
-title">关联年度考核</h3>
<a
-button
v
-if="!readonly"
type="primary"
:
style="{ marginLeft: '88px' }"
class="
button_sd
-webflow
-button_webflow"
@click="openDialogGl"
>
关联年度考核
</a
-button>
<a
-button
v
-if="!readonly"
:
style="{ marginLeft: '8px' }"
class="
button_sd
-webflow
-button_webflow"
:disabled="!ndkhS
electedRowKeys.length"
@click="ndkhBeforD
elete"
>
删除
</a
-button>
<a
-modal
title="选择年度考核"
:visible="dialogVisibleGl"
width="80%"
@ok="handleDialogConfirm"
@canc
el="dialogVisibleGl = false"
>
<div class="apply
-search">
<a
-form
-mod
el :form="searchForm" :lab
el-col="{ span: 8 }" :wrapper
-col="{ span: 16 }">
<a
-row :gutter="24">
<a
-col :span="8" class="chd">
<a
-form
-mod
el-item lab
el="考核年度">
<a
-input
v
-mod
el="searchForm['khnd']"
allow
-clear
placeholder="请输入指标年度"
/>
</a
-form
-mod
el-item>
</a
-col>
<a
-col :span="8" class="chd">
<a
-form
-mod
el-item lab
el="考核周期">
<a
-input
v
-mod
el="searchForm['khzq']"
allow
-clear
placeholder="请输入考核周期"
/>
</a
-form
-mod
el-item>
</a
-col>
</a
-row>
<a
-row>
<a
-col :span="24" class="chd" :
style="{ textAlign: 'right', lineHeight: '45px' }">
<a
-button :
style="{ marginRight: '8px' }" @click="reset"> 重置 </a
-button>
<a
-button type="primary" html
-type="submit" @click="btnSearchBusinessList">
查询
</a
-button>
</a
-col>
</a
-row>
</a
-form
-mod
el>
</div>
<a
-divider
style="margin: 12px 0" />
<SdTable
ref="ndkh"
row
-key="id"
:columns="ndkhColumns"
:data
-source.sync="dialogResult"
:pagination="paginationOpt"
:loading="dialogLoading"
:scroll="{ x: 1500 }"
:row
-s
election="{
s
electedRowKeys: s
electedRowKeysAdd,
onChange: btnS
electProjectAdd,
}"
>
</SdTable>
</a
-modal>
<SdTable
ref="ndkhTable"
row
-key="id"
:columns="ndkhColumns"
:data
-source.sync="ndkhResult"
:loading="ndkhLoading"
:pagination="false"
class="ant
-table"
:row
-s
election="{
s
electedRowKeys: ndkhS
electedRowKeys,
onChange: btnS
electProjectNdkh,
}"
>
</SdTable>
-->
<h3 class="budget
-record
-table
-title"
style="margin
-top: 18px">激励考核指标</h3>
<a
-button
v
-if="!readonly"
type="primary"
:
style="{ marginLeft: '88px' }"
class="
button_sd
-webflow
-button_webflow"
@click="openDialog"
>
新增
</a
-button>
<a
-button
v
-if="!readonly"
:
style="{ marginLeft: '8px' }"
class="
button_sd
-webflow
-button_webflow"
:disabled="!s
electedRowKeys.length"
@click="btnBeforD
elete"
>
删除
</a
-button>
<SdTable
ref="jlkhzbxf"
row
-key="id"
:columns="jlkhzbxfColumns"
:data
-source.sync="jlkhzbxfResult"
:loading="loading"
:pagination="false"
class="ant
-table"
bordered
:row
-s
election="{
s
electedRowKeys: s
electedRowKeys,
onChange: btnS
electProject,
}"
>
<!
-- 指标内容列自定义渲染
-->
<template slot="指标内容" slot
-scope="text, record, index">
<div
style="white
-space: pre
-line; text
-align: left; padding: 8px 0">
{{ text }}
</div>
</template>
<template slot="分值" slot
-scope="text, record, index">
<div
style="white
-space: pre
-line; text
-align: left; padding: 8px 0">
{{ text }}
</div>
</template>
<!
-- 操作列
-->
<template v
-if="!readonly" slot="操作" slot
-scope="text, record">
<a
-button
class="action
-button"
type="link"
size="small"
@click="btnOpenProjectDetails(record)"
>
编辑
</a
-button>
</template>
</SdTable>
<a
-modal
title="激励考核指标"
:visible="dialogVisible"
width="35%"
@ok="handleConfirm"
@canc
el="handleCanc
el"
>
<div class="apply
-search">
<a
-form
-mod
el
ref="subFormRef"
:rules="jlkhzbxfSubRules"
:form="jlkhzbxfSubForm"
:lab
el-col="{ span: 8 }"
:wrapper
-col="{ span: 16 }"
>
<a
-row>
<a
-col :span="18">
<a
-form
-mod
el-item lab
el="指标类别">
<a
-input
v
-mod
el="jlkhzbxfSubForm['zblb']"
allow
-clear
placeholder="请输入指标类别"
/>
</a
-form
-mod
el-item>
</a
-col>
</a
-row>
<a
-row>
<a
-col :span="18">
<a
-form
-mod
el-item lab
el="指标内容">
<a
-textarea
v
-mod
el="jlkhzbxfSubForm['zbnr']"
placeholder="请输入指标内容（按Enter换行）"
:max
-length="300"
class="m
-textarea"
:auto
-size="{ minRows: 3, maxRows: 6 }"
/>
</a
-form
-mod
el-item>
</a
-col>
</a
-row>
<a
-row>
<a
-col :span="18">
<a
-form
-mod
el-item lab
el="分值">
<a
-textarea
v
-mod
el="jlkhzbxfSubForm['fz']"
placeholder="请输入分值（按Enter换行）"
:max
-length="300"
class="m
-textarea"
:auto
-size="{ minRows: 2, maxRows: 4 }"
/>
</a
-form
-mod
el-item>
</a
-col>
</a
-row>
<a
-row>
<a
-col :span="18">
<a
-form
-mod
el-item lab
el="分值上限">
<a
-input
v
-mod
el="jlkhzbxfSubForm['fzsx']"
allow
-clear
placeholder='例如："+1分"、"
-1.5分"或"不设上限"'
/>
</a
-form
-mod
el-item>
</a
-col>
</a
-row>
</a
-form
-mod
el>
</div>
</a
-modal>
</div>
</div>
</div>
</template>
<script>
import { Message, Modal } from 'ant
-design
-vue'
import moment from 'moment'
import components from './_import
-components/zk
-jlkh
-zbxf
-import'
import KhypjService from './khypj
-service'
import crossWindowWatcher from '@/common/services/cross
-window
-watcher'
import SdTable from '@/common/components/sd
-table.vue'
export default {
name: 'ZkJlkhZbxf',
metaInfo: {
title: '激励考核指标下发',
},
components: {
...components,
SdTable,
},
props: {
id: {
type: String,
default: undefined,
},
},
data() {
// 添加校验规则
const validateFzsx = (rule, value, callback) => {
if (!value) {
callback()
return
}
// 允许"不设上限"
if (value === '不设上限') {
callback()
return
}
// 验证格式: ±数字(可含小数) + 单位(非数字字符)
const regex = /^[+
-]\d+(\.\d+)?[^\d]+$/
if (!regex.test(value)) {
callback(new Error('格式错误，请填写"不设上限"或类似"+1分"、"
-1.5分"的格式'))
}
else {
callback()
}
}
return {
loading: false,
ndkhLoading: false,
dialogLoading: false,
readonly: true,
yearOptions: this.generateYearOptions(),
rules: {
zbnd: [{ required: true, message: '请选择指标年度', trigger: 'blur' }],
},
jlkhzbxfSubRules: {
fzsx: [{ validator: validateFzsx, trigger: 'blur' }],
},
// 新增搜索表单数据
searchForm: {
khnd: undefined, // 考核年度
khzq: undefined, // 考核周期
},
project: {
id: undefined, // 主键id
zbbh: undefined, // 指标编号
cjrq: undefined, // 创建日期
zbnd: undefined, // 指标年度
khzq: undefined, // 考核周期
khdx: undefined, // 考核对象
khdxId: undefined, // 考核对象id
sm: undefined, // 说明
status: undefined, // 指标状态：0暂存，1下发（不可修改）
ndkhId: undefined, // 关联的年度考核id
},
jlkhzbxfResult: [],
jlkhzbxfSubForm: {
id: undefined, // id
mainId: undefined, // 主表id
zblb: undefined, // 指标类别
zbnr: undefined, // 指标内容
fz: undefined, // 分值
fzsx: undefined, // 分值上限
},
ndkhResult: [],
khdxList: [],
s
electedKhdxIds: [], // 用于多选绑定的临时ID数组
dialogVisible: false,
dialogVisibleGl: false,
s
electedKeys: [],
s
electedRows: [],
s
electedRowKeys: [],
ndkhS
electedRowKeys: [], // 年度考核表格的选中项
ndkhS
electedRows: [], // 年度考核表格选中的行数据
s
electedKeysAdd: [],
s
electedRowKeysAdd: [], // 年度考核表格的选中项
s
electedRowsAdd: [], // 年度考核表格选中的行数据
isUpdateJlkhzbxfSub: false,
isXf: false,
ndkhColumns: [
{
title: '考核编号',
dataIndex: 'khbh',
scopedSlots: {
customRender: '考核编号',
},
width: '200px',
align: 'center',
},
{
title: '考核年度',
dataIndex: 'khnd',
scopedSlots: {
customRender: '指标年度',
},
width: '70px',
align: 'center',
},
{
title: '考核对象',
dataIndex: 'khdx',
scopedSlots: {
customRender: '责任主体',
},
width: '200px',
align: 'center',
},
{
title: '考核周期',
dataIndex: 'khzq',
scopedSlots: {
customRender: '考核周期',
},
width: '100px',
align: 'center',
},
],
dialogResult: [],
dialogColumns: [],
paginationOpt: {
current: 1, // 当前页码
pageSize: 10, // 当前每页大小
total: 0, // 总数
showSizeChanger: true,
showQuickJumper: false,
pageSizeOptions: ['10', '20', '40', '60', '80', '100'],
showTotal: (total) => `共 ${total} 条`,
onShowSizeChange: (current, pageSize) => {
this.paginationOpt.current = 1
this.paginationOpt.pageSize = pageSize
this.btnSearchBusinessList()
},
onChange: (current, size) => {
this.paginationOpt.current = current
this.paginationOpt.pageSize = size
this.btnSearchBusinessList()
},
},
}
},
computed: {
// 动态计算列配置
jlkhzbxfColumns() {
const baseColumns = [
{
title: '序号',
customRender: (text, record, index) => {
return index + 1
},
align: 'center',
width: '10%',
},
{
title: '指标类别',
dataIndex: 'zblb',
customRender: (text, record) => {
// 只有显示行才渲染内容
if (record.rowSpan > 0) {
return {
children: text,
attrs: { rowSpan: record.rowSpan },
}
}
return { attrs: { rowSpan: 0 } }
},
align: 'center',
width: '10%',
},
{
title: '指标内容',
dataIndex: 'zbnr',
scopedSlots: {
customRender: '指标内容',
},
align: 'center',
width: '40%',
},
{
title: '分值',
dataIndex: 'fz',
scopedSlots: {
customRender: '分值',
},
align: 'center',
width: '20%',
},
{
title: '分值上限',
dataIndex: 'fzsx',
scopedSlots: {
customRender: '分值上限',
},
align: 'center',
width: '10%',
},
]
// 非只读模式下添加操作列
if (!this.readonly) {
baseColumns.push({
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: '操作' },
width: '10%',
align: 'center',
})
}
return baseColumns
},
},
watch: {
jlkhzbxfResult: {
handler(newVal) {
this.calculateRowSpans(newVal)
},
immediate: true, // 初始化时立即执行
deep: true, // 深度监听
},
},
created() {
this.getKhdxList()
this.jlkhzbxfResult = this.calculateRowSpans(this.jlkhzbxfResult)
this.initJlkhzbxfInfo()
},
mounted() {
if (!this.$route.query.id) {
this.project.zbbh = this.getZBbh()
this.project.cjrq = moment(new Date()).format('YYYY
-MM
-DD')
this.readonly = false
}
},
methods: {
// 年度考核表格选中处理
btnS
electProjectNdkh(s
electedRowKeys, s
electedRows) {
this.ndkhS
electedRowKeys = s
electedRowKeys
this.ndkhS
electedRows = [...s
electedRows]
},
btnS
electProjectAdd(s
electedRowKeys, s
electedRows) {
this.s
electedRowKeysAdd = s
electedRowKeys
this.s
electedRowsAdd = [...s
electedRows]
},
// 重置搜索表单
reset() {
this.searchForm = {
khnd: undefined, // 考核年度
khzq: undefined, // 考核周期
}
this.paginationOpt.current = 1
this.paginationOpt.pageSize = 10
this.btnSearchBusinessList()
},
getKhzbxfInfo() {
console.log('1111111
----------', this.project)
console.log('22222222
----------', this.project.ndkhId)
if (this.project.ndkhId) {
KhypjService.getKhzbxfById(this.project.ndkhId).then((res) => {
if (res.data.code === 200) {
if (res.data.data) {
this.ndkhResult.push(res.data.data)
}
else {
this.ndkhResult = []
}
}
else {
Message.error('获取考核指标下发信息失败！')
}
})
}
},
ndkhBeforD
elete() {
const _this = this
if (_this.ndkhS
electedRowKeys.length === 0) {
Message.warning('请选择要删除的数据！')
return
}
Modal.confirm({
content: '是否确认删除？',
onOk() {
_this.project.ndkhId = '
-1'
_this.saveJlkhzbxf()
_this.ndkhResult = []
_this.ndkhS
electedRowKeys = [] // 清空选中状态
},
onCanc
el() {},
})
},
openDialogGl() {
console.log('3333
----------', this.ndkhResult)
if (this.ndkhResult.length > 0) {
Message.warning('只能关联一条年度考核!')
return
}
this.dialogVisibleGl = true
this.s
electedKeysAdd = []
this.s
electedRowsAdd = []
this.btnSearchBusinessList()
},
handleDialogConfirm() {
if (this.s
electedRowsAdd.length === 0) {
Message.warning('请选择一条年度考核!')
return
}
if (this.s
electedRowsAdd.length > 1) {
Message.warning('只能关联一条年度考核!')
return
}
this.project.ndkhId = this.s
electedRowsAdd[0].id
this.saveJlkhzbxf()
this.getKhzbxfInfo()
this.dialogVisibleGl = false
},
btnSearchBusinessList() {
this.dialogLoading = true
const khzbxfSearchVo = {
khnd: this.searchForm.khnd,
khzq: this.searchForm.khzq,
}
const params = {
current: this.paginationOpt.current, // 直接使用当前页码
pageSize: this.paginationOpt.pageSize, // 直接使用当前每页大小
searchVo: khzbxfSearchVo,
}
KhypjService.getNdkhList(params)
.then((res) => {
if (res.data.code === 200) {
this.paginationOpt.total = res.data.data.total
this.dialogResult = res.data.data.records
}
else {
Message.error('查询失败！')
}
})
.catch((err) => {
Message.error(err.message || err.data)
this.paginationOpt.total = 0
this.dialogResult = []
})
.finally(() => {
this.dialogLoading = false
})
},
getKhdxList() {
KhypjService.getCod
eList('khdx').then((res) => {
if (res.data.code === 200) {
this.khdxList = res.data.data
}
else {
Message.error('查询失败！')
}
})
},
// 处理考核对象选择变化
handleKhdxChange(s
electedIds) {
// 1. 拼接ID字符串
this.project.khdxId = s
electedIds.join('；')
// 2. 拼接名称字符串
const s
electedNames = []
s
electedIds.forEach((code) => {
const item = this.khdxList.find((d) => d.code === code)
if (item) {
s
electedNames.push(item.value)
}
})
this.project.khdx = s
electedNames.join('；')
},
btnBeforD
elete() {
const _this = this
if (this.s
electedRowKeys.length === 0) {
Message.warning('请选择要删除的数据！')
return
}
Modal.confirm({
content: '是否确认删除？',
onOk() {
_this.d
eleteJlkhzbxfSub()
_this.s
electedRowKeys = []
},
onCanc
el() {},
})
},
d
eleteJlkhzbxfSub() {
KhypjService.removeJlkhzbxfSubByIds(this.s
electedRowKeys).then((res) => {
if (res.data.code === 200) {
Message.success('删除成功！')
this.getJlkhzbxfSubList()
}
else {
Message.error('查询失败！')
}
})
},
btnS
electProject(s
electedRowKeys, s
electedRows) {
this.s
electedRowKeys = s
electedRowKeys
this.s
electedRows = [...s
electedRows]
},
openDialog() {
this.dialogVisible = true
this.s
electedKeys = []
this.s
electedRows = []
this.jlkhzbxfSubForm = {
id: undefined, // id
mainId: this.$route.query.id, // 主表id
zblb: undefined, // 指标类别
zbnr: undefined, // 指标内容
fz: undefined, // 分值
fzsx: undefined, // 分值上限
}
// 新增子数据自动保存主数据
if (!this.$route.query.id) {
this.saveJlkhzbxf()
}
},
btnOpenProjectDetails(record) {
this.dialogVisible = true
this.jlkhzbxfSubForm = {
id: record.id, // id
mainId: record.mainId, // 主表id
zblb: record.zblb, // 指标类别
zbnr: record.zbnr, // 指标内容
fz: record.fz, // 分值
fzsx: record.fzsx, // 分值上限
}
this.isUpdateJlkhzbxfSub = true
console.log('121212
------', record)
console.log('33333222
------', this.jlkhzbSubxfForm)
},
handleCanc
el() {
this.dialogVisible = false
},
// 弹窗确认
handleConfirm() {
// 添加表单校验
this.$refs.subFormRef.validate((valid) => {
if (!valid) {
return false
}
// 原有的保存逻辑...
if (!this.isUpdateJlkhzbxfSub) {
this.jlkhzbxfSubForm.mainId = this.$route.query.id
// 保存子表数据
KhypjService.saveJlkhzbxfSub(this.jlkhzbxfSubForm).then((res) => {
if (res.data.code === 200) {
Message.success(`添加成功！`)
this.getJlkhzbxfSubList()
}
else {
Message.error('添加失败！')
}
})
}
else {
// 保存子表数据
KhypjService.updateJlkhzbxfSub(this.jlkhzbxfSubForm).then((res) => {
if (res.data.code === 200) {
Message.success(`修改成功！`)
this.getJlkhzbxfSubList()
}
else {
Message.error('修改失败！')
}
})
this.isUpdateJlkhzbxfSub = false
}
this.dialogVisible = false
})
},
// handleConfirm() {
// if (!this.isUpdateJlkhzbxfSub) {
// this.jlkhzbxfSubForm.mainId = this.$route.query.id
// // 保存子表数据
// KhypjService.saveJlkhzbxfSub(this.jlkhzbxfSubForm).then((res) => {
// if (res.data.code === 200) {
// Message.success(`添加成功！`)
// this.getJlkhzbxfSubList()
// }
else {
// Message.error('添加失败！')
// }
// })
// }
else {
// // 保存子表数据
// KhypjService.updateJlkhzbxfSub(this.jlkhzbxfSubForm).then((res) => {
// if (res.data.code === 200) {
// Message.success(`修改成功！`)
// this.getJlkhzbxfSubList()
// }
else {
// Message.error('修改失败！')
// }
// })
// this.isUpdateJlkhzbxfSub = false
// }
// this.dialogVisible = false
// },
// 计算行合并
calculateRowSpans(data) {
if (!data || data.length === 0) return data
const categoryMap = {}
// 第一步：统计每个类别的行数
data.forEach((item) => {
categoryMap[item.zblb] = (categoryMap[item.zblb] || 0) + 1
})
// 第二步：设置行合并属性
let lastCategory = null
return data.map((item) => {
// 重置rowSpan属性
item.rowSpan = undefined
if (item.zblb !== lastCategory) {
lastCategory = item.zblb
// 只有每个类别的第一行设置rowSpan
item.rowSpan = categoryMap[item.zblb]
return item
}
// 同类别的后续行设置rowSpan为0
item.rowSpan = 0
return item
})
},
// 生成年份选项
generateYearOptions() {
const currentYear = new Date().getFullYear()
const years = []
// 添加年份：当前年后1年、本年、前1年、前2年
years.push(currentYear + 1) // 后1年
years.push(currentYear) // 本年
years.push(currentYear
- 1) // 前1年
years.push(currentYear
- 2) // 前2年
return years
},
btnClose() {
window.close()
},
initJlkhzbxfInfo() {
if (this.$route.query.id) {
KhypjService.getJlkhzbxfById(this.$route.query.id).then((res) => {
if (res.data.code === 200) {
this.project = res.data.data
this.project.cjrq = this.project.cjrq
? moment(new Date(this.project.cjrq)).format('YYYY
-MM
-DD')
: null
this.readonly = this.project.status === 1
// 初始化选中项
if (this.project.khdxId) {
this.s
electedKhdxIds = this.project.khdxId.split('；').filter(Boolean)
}
this.getJlkhzbxfSubList()
this.getKhzbxfInfo()
}
else {
Message.error('获取考核指标库信息失败！')
}
})
}
},
save() {
const _this = this
this.$refs.ruleForm.validate((valid, obj) => {
if (!valid) {
Message.warning('请输入必填项！')
return false
}
else {
_this.saveJlkhzbxf()
}
})
},
xfClick() {
this.readonly = true
this.isXf = true
this.save()
KhypjService.jlkhzbzpXfStart(this.$route.query.id).then((res) => {
if (res.data.code === 200) {
Message.success('下发成功！')
}
else {
Message.error('下发失败！')
}
})
},
// 修改 saveJlkhzbxf 方法返回 Promise
saveJlkhzbxf() {
const _this = this
if (this.isXf) {
this.project.status = 1
}
else {
this.project.status = 0
}
// 创建数据副本，避免污染原始数据
const postData = { ...this.project }
// 仅在值是字符串时才进行转换
if (postData.cjrq &&
typeof postData.cjrq === 'string') {
postData.cjrq = this.strToTimestamp(postData.cjrq)
}
// 返回一个 Promise
return new Promise((resolve, reject) => {
// 判断是新增还是更新
const apiCall = !this.$route.query.id
? KhypjService.saveJlkhzbxf(postData)
: KhypjService.updateJlkhzbxf(postData)
apiCall
.then((res) => {
if (res.data.code === 200) {
// 处理新增保存成功
if (!_this.$route.query.id) {
Message.success('保存成功！')
if (res.data.data) {
const currentUrl = window.location.href
const newUrl = currentUrl.replace('zbxf', `zbxf?id=${res.data.data}`)
// 直接跳转页面，不需要等待初始化
window.location.href = newUrl
}
resolve() // 解析 Promise
}
// 处理更新保存成功
else {
if (_this.project.status === 1) {
Message.success('提交成功！')
}
else {
Message.success('保存成功！')
}
resolve() // 解析 Promise
}
}
else {
// 处理失败情况
const errorMessage = !_this.project.id
? '保存失败！'
: _this.project.status === 1
? '提交失败！'
: '保存失败！'
Message.error(errorMessage)
reject(new Error(res.data.message || errorMessage))
}
})
.catch((error) => {
// 处理 API 错误
const errorMessage = !_this.project.id
? '保存失败！'
: _this.project.status === 1
? '提交失败！'
: '保存失败！'
console.error('API 错误:', error)
Message.error(errorMessage)
reject(error)
})
})
},
getJlkhzbxfSubList() {
KhypjService.getJlkhzbxfSubList(this.$route.query.id).then((res) => {
if (res.data.code === 200) {
this.jlkhzbxfResult = res.data.data
}
else {
Message.error('获取子表信息失败！')
}
})
},
// 获取唯一指标编号
getZBbh() {
// 获取当前时间
const now = new Date()
// 获取当前时间的年、月、日、时、分、秒、毫秒
const year = now.getFullYear()
const month = String(now.getMonth() + 1).padStart(2, '0')
const day = String(now.getDate()).padStart(2, '0')
const hour = String(now.getHours()).padStart(2, '0')
const minute = String(now.getMinutes()).padStart(2, '0')
const second = String(now.getSeconds()).padStart(2, '0')
const millisecond = String(now.getMilliseconds()).padStart(3, '0')
// 生成唯一标识
const uniqueId = `${year}${month}${day}${hour}${minute}${second}${millisecond}`
return 'JLKHZBXF
-' + uniqueId
},
strToTimestamp(dateStr) {
const date = moment(dateStr, 'YYYY
-MM
-DD')
return date.valueOf()
},
refreshTime(item) {
return moment(item).format('YYYY
-MM
-DD')
},
},
}
</script>
<
style lang="scss" scoped>
/* 设置表格宽度 */
.ant
-table {
width: 90%;
margin: auto; /* 居中显示 */
}
.sitd
-collapse
-block {
width: 90%;
margin: auto;
&::v
-deep(.ant
-collapse
-content
-box) {
padding: unset !important;
}
}
table {
width: 90%;
margin: auto;
border
-top: 1px solid #e8e8e8;
margin
-bottom: 16px;
table
-layout: fixed;
tr td {
border
-left: 1px solid #e8e8e8;
border
-bottom: 1px solid #e8e8e8;
min
-height: 100px;
&:first
-child {
border
-left: unset;
}
&:nth
-child(2n + 1) {
background: #fafafa;
width: 170px;
}
&.upload
-td {
background: #fafafa;
width: 170px !important;
}
&.upload
-time
-td {
background: #fafafa;
width: 200px !important;
}
&.ant
-form
-item
-check {
width: 194px !important;
}
.ant
-form
-item {
margin
-bottom: unset !important;
padding: 5px;
.ant
-form
-item
-lab
el {
width: 170px;
padding
-bottom: 1px;
text
-align: center;
background
-color: #fafafa;
}
}
&::v
-deep(lab
el) {
display: block;
margin: 0 auto;
text
-align: right;
white
-space: normal;
line
-height: 20px;
padding: 0 5px;
}
.ant
-form
-item
-prompt {
display: block;
margin: 0 auto;
text
-align: right;
white
-space: normal;
line
-height: 20px;
padding: 0 14px 0 5px;
font
-size: 16px;
color: rgba(0, 0, 0, 0.85);
}
.prompt
-red {
color: #f5222d !important;
}
.ant
-form
-item
-radio {
&::v
-deep(lab
el) {
display: inline !important;
}
}
&::v
-deep(.ant
-checkbox + span) {
padding
-right: 0 !important;
}
}
::v
-deep(.ant
-form
-item
-control
-wrapper) {
min
-height: 40px;
}
}
.ant
-form
-long
-lab
el {
tr td {
&:nth
-child(2n + 1) {
// width: 200px !important;
}
}
}
.ant
-collapse {
border
-top: 1px solid #d9d9d9;
border
-bottom: unset;
border
-left: unset;
border
-right: unset;
width: 90%;
margin: auto;
& > .ant
-collapse
-item {
border
-bottom: unset;
/*& > .ant
-collapse
-content{*/
/* border
-top: 1px solid #d9d9d9;*/
/* border
-bottom: 1px solid #d9d9d9;*/
/* border
-radius: 4px;*/
/*}*/
&::v
-deep(.ant
-collapse
-content) {
border
-top: unset;
}
}
}
.textarea
-wrapper {
position: r
elative;
display: block;
.m
-textarea {
padding: 8px 12px;
height: 100%;
}
.m
-count {
color: #808080;
background: #fff;
position: absolute;
font
-size: 12px;
bottom: 12px;
right: 12px;
line
-height: 16px;
}
}
.ant
-spin
-loading {
width: 100vw;
height: 100vh;
display: block;
background
-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
z
-index: 99;
}
.apply
-block {
display: flex;
align
-items: center;
.dynamic
-d
elete
-button {
cursor: pointer;
position: r
elative;
font
-size: 24px;
color: #999;
transition: all 0.3s;
}
.dynamic
-d
elete
-button:hover {
color: #777;
}
.dynamic
-d
elete
-button[disabled] {
cursor: not
-allowed;
opacity: 0.5;
}
div {
flex: 1;
}
}
.btn
-group {
display: flex;
align
-items: center;
justify
-content: right;
width: 90%;
margin: 0 auto 20px;
button {
margin
-left: 10px;
}
}
.ant
-form
-budget
-border {
border
-bottom: 1px solid #d9d9d9;
margin
-left:
-1px;
}
.budget
-box {
height: 100%;
overflow: hidden;
display: flex;
flex: 1;
flex
-direction: column;
}
.budget
-record {
width: 100%;
height: 100%;
overflow: auto;
display: flex;
justify
-content: center;
background: #fff;
}
.budget
-record
-table {
width: 90%; //调整页面表格宽度
// min
-width: 840px;
padding: 16px;
}
.budget
-record
-table
-title {
margin
-bottom: 20px;
text
-align: center;
white
-space: pre
-wrap;
}
.header_sd
-header_common.ant
-layout
-header {
padding: 0 20px 0 20px;
color: #fff;
background
-image: linear
-gradient(90deg, #1890ff 0%, #0162eb 100%);
height: 64px;
line
-height: 64px;
}
.header_sd
-header_common {
z
-index: 1;
}
.ant
-layout
-header {
background: #001529;
}
.ant
-layout
-header,
.ant
-layout
-footer {
flex: 0 0 auto;
}
header {
display: block;
}
.ant
-layout,
.ant
-layout * {
box
-sizing: border
-box;
}
.left_sd
-header_common {
float: left;
height: 100%;
}
.right_sd
-header_common {
float: right;
height: 100%;
}
.logo_sd
-webflow_webflow h3 {
color: #fff;
}
.header_sd
-header_common .ant
-btn
-link {
color: #fff;
}
.
button_sd
-webflow
-button_webflow {
max
-width: 100%;
}
</
style>
检查代码，针对分值上限设置的校验规则并未生效，请检查代码并修改
本文探讨了一种前端开发中常见的问题，即在使用特定样式（如float:right）时，form表单内的按钮可能变得无法点击。通过调整样式布局，问题得以解决，提示开发者注意CSS与元素交互的影响。
扫一扫
1991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
