<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
-model
ref="ruleForm"
:rules="rules"
:model="project"
class="sitd
-apply"
layout="horizontal"
>
<table>
<colgroup>
<col width="170px" />
<col />
<col width="170px" />
<col />
</colgroup>
<tr>
<td class="ant
-form
-item
-label cell_sd
-form
-item
-td
-label_common">
<label title="指标编号">指标编号</label>
</td>
<td class="ant
-form
-item
-control
-wrapper"
:colspan="3">
<a
-form
-model
-item prop="zbbh">
<template>{{ project['zbbh'] }}</template>
</a
-form
-model
-item>
</td>
</tr>
<tr>
<td class="ant
-form
-item
-label cell_sd
-form
-item
-td
-label_common">
<label title="指标年度" class="ant
-form
-item
-required">指标年度</label>
</td>
<td class="ant
-form
-item
-control
-wrapper">
<a
-form
-model
-item prop="zbnd">
<!
-- 修改为下拉选择框
-->
<a
-select
v
-if="!readonly"
v
-model="project['zbnd']"
placeholder="请选择年份"
style="width
: 100%"
>
<!
-- 生成年份选项
-->
<a
-select
-option v
-for="year in yearOptions"
:key="year"
:value="year">
{{ year }}
</a
-select
-option>
</a
-select>
<template v
-else>
{{ project['zbnd'] }}
</template>
</a
-form
-model
-item>
</td>
<td class="ant
-form
-item
-label cell_sd
-form
-item
-td
-label_common">
<label title="考核周期">考核周期</label>
</td>
<td class="ant
-form
-item
-control
-wrapper">
<a
-form
-model
-item prop="khzq">
<a
-input v
-if="!readonly" v
-model="project['khzq']" placeholder="考核周期" />
<template v
-else>{{ project['khzq'] }}</template>
</a
-form
-model
-item>
</td>
</tr>
<tr>
<td class="ant
-form
-item
-label cell_sd
-form
-item
-td
-label_common">
<label title="考核对象">考核对象</label>
</td>
<td class="ant
-form
-item
-control
-wrapper">
<a
-form
-model
-item prop="khdx">
<a
-select
v
-if="!readonly"
v
-model="selectedKhdxIds"
mode="multiple"
style="width
: 100%"
placeholder="请选择被考核对象"
@change="handleKhdxChange"
>
<template v
-for="(item, _i) in khdxList">
<a
-select
-option
:key="item.code"
:value="item.code">{{
item.value
}}</a
-select
-option>
</template>
</a
-select>
<template v
-else>{{ project['khdx'] }}</template>
</a
-form
-model
-item>
</td>
<td class="ant
-form
-item
-label cell_sd
-form
-item
-td
-label_common">
<label title="创建日期" class="ant
-form
-item
-required">创建日期</label>
</td>
<td class="ant
-form
-item
-control
-wrapper">
<a
-form
-model
-item prop="cjrq">
<template>{{ project['cjrq'] ? refreshTime(project['cjrq'])
: '' }}</template>
</a
-form
-model
-item>
</td>
</tr>
<tr>
<td class="ant
-form
-item
-label cell_sd
-form
-item
-td
-label_common upload
-td">
<label title="说明">说明</label>
</td>
<td class="ant
-form
-item
-control
-wrapper" colspan="3">
<a
-form
-model
-item prop="sm">
<div v
-if="!readonly" class="textarea
-wrapper">
<a
-textarea
v
-model="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
-model
-item>
</td>
</tr>
</table>
</a
-form
-model>
<!
-- 这里暂时去掉，根据客户描述，一年只进行一次年度考核和激励考核，因此根据年度和单位关联即可
-->
<!
-- <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="!ndkhSelectedRowKeys.length"
@click="ndkhBeforDelete"
>
删除
</a
-button>
<a
-modal
title="选择年度考核"
:visible="dialogVisibleGl"
width="80%"
@ok="handleDialogConfirm"
@cancel="dialogVisibleGl = false"
>
<div class="apply
-search">
<a
-form
-model
:form="searchForm"
:label
-col="{ span
: 8 }"
:wrapper
-col="{ span
: 16 }">
<a
-row
:gutter="24">
<a
-col
:span="8" class="chd">
<a
-form
-model
-item label="考核年度">
<a
-input
v
-model="searchForm['khnd']"
allow
-clear
placeholder="请输入指标年度"
/>
</a
-form
-model
-item>
</a
-col>
<a
-col
:span="8" class="chd">
<a
-form
-model
-item label="考核周期">
<a
-input
v
-model="searchForm['khzq']"
allow
-clear
placeholder="请输入考核周期"
/>
</a
-form
-model
-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
-model>
</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
-selection="{
selectedRowKeys
: selectedRowKeysAdd,
onChange
: btnSelectProjectAdd,
}"
>
</SdTable>
</a
-modal>
<SdTable
ref="ndkhTable"
row
-key="id"
:columns="ndkhColumns"
:data
-source.sync="ndkhResult"
:loading="ndkhLoading"
:pagination="false"
class="ant
-table"
:row
-selection="{
selectedRowKeys
: ndkhSelectedRowKeys,
onChange
: btnSelectProjectNdkh,
}"
>
</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="!selectedRowKeys.length"
@click="btnBeforDelete"
>
删除
</a
-button>
<SdTable
ref="jlkhzbxf"
row
-key="id"
:columns="jlkhzbxfColumns"
:data
-source.sync="jlkhzbxfResult"
:loading="loading"
:pagination="false"
class="ant
-table"
bordered
:row
-selection="{
selectedRowKeys
: selectedRowKeys,
onChange
: btnSelectProject,
}"
>
<!
-- 指标内容列自定义渲染
-->
<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"
@cancel="handleCancel"
>
<div class="apply
-search">
<a
-form
-model
ref="subFormRef"
:rules="jlkhzbxfSubRules"
:form="jlkhzbxfSubForm"
:label
-col="{ span
: 8 }"
:wrapper
-col="{ span
: 16 }"
>
<a
-row>
<a
-col
:span="18">
<a
-form
-model
-item label="指标类别">
<a
-input
v
-model="jlkhzbxfSubForm['zblb']"
allow
-clear
placeholder="请输入指标类别"
/>
</a
-form
-model
-item>
</a
-col>
</a
-row>
<a
-row>
<a
-col
:span="18">
<a
-form
-model
-item label="指标内容">
<a
-textarea
v
-model="jlkhzbxfSubForm['zbnr']"
placeholder="请输入指标内容（按Enter换行）"
:max
-length="300"
class="m
-textarea"
:auto
-size="{ minRows
: 3, maxRows
: 6 }"
/>
</a
-form
-model
-item>
</a
-col>
</a
-row>
<a
-row>
<a
-col
:span="18">
<a
-form
-model
-item label="分值">
<a
-textarea
v
-model="jlkhzbxfSubForm['fz']"
placeholder="请输入分值（按Enter换行）"
:max
-length="300"
class="m
-textarea"
:auto
-size="{ minRows
: 2, maxRows
: 4 }"
/>
</a
-form
-model
-item>
</a
-col>
</a
-row>
<a
-row>
<a
-col
:span="18">
<a
-form
-model
-item label="分值上限">
<a
-input
v
-model="jlkhzbxfSubForm['fzsx']"
allow
-clear
placeholder='例如："+1分"、"
-1.5分"或"不设上限"'
/>
</a
-form
-model
-item>
</a
-col>
</a
-row>
</a
-form
-model>
</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
: [],
selectedKhdxIds
: [], // 用于多选绑定的临时ID数组
dialogVisible
: false,
dialogVisibleGl
: false,
selectedKeys
: [],
selectedRows
: [],
selectedRowKeys
: [],
ndkhSelectedRowKeys
: [], // 年度考核表格的选中项
ndkhSelectedRows
: [], // 年度考核表格选中的行数据
selectedKeysAdd
: [],
selectedRowKeysAdd
: [], // 年度考核表格的选中项
selectedRowsAdd
: [], // 年度考核表格选中的行数据
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
: {
// 年度考核表格选中处理
btnSelectProjectNdkh(selectedRowKeys, selectedRows) {
this.ndkhSelectedRowKeys = selectedRowKeys
this.ndkhSelectedRows = [...selectedRows]
},
btnSelectProjectAdd(selectedRowKeys, selectedRows) {
this.selectedRowKeysAdd = selectedRowKeys
this.selectedRowsAdd = [...selectedRows]
},
// 重置搜索表单
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('获取考核指标下发信息失败！')
}
})
}
},
ndkhBeforDelete() {
const _this = this
if (_this.ndkhSelectedRowKeys.length === 0) {
Message.warning('请选择要删除的数据！')
return
}
Modal.confirm({
content
: '是否确认删除？',
onOk() {
_this.project.ndkhId = '
-1'
_this.saveJlkhzbxf()
_this.ndkhResult = []
_this.ndkhSelectedRowKeys = [] // 清空选中状态
},
onCancel() {},
})
},
openDialogGl() {
console.log('3333
----------', this.ndkhResult)
if (this.ndkhResult.length > 0) {
Message.warning('只能关联一条年度考核!')
return
}
this.dialogVisibleGl = true
this.selectedKeysAdd = []
this.selectedRowsAdd = []
this.btnSearchBusinessList()
},
handleDialogConfirm() {
if (this.selectedRowsAdd.length === 0) {
Message.warning('请选择一条年度考核!')
return
}
if (this.selectedRowsAdd.length > 1) {
Message.warning('只能关联一条年度考核!')
return
}
this.project.ndkhId = this.selectedRowsAdd[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.getCodeList('khdx').then((res) => {
if (res.data.code === 200) {
this.khdxList = res.data.data
} else {
Message.error('查询失败！')
}
})
},
// 处理考核对象选择变化
handleKhdxChange(selectedIds) {
// 1. 拼接ID字符串
this.project.khdxId = selectedIds.join('；')
// 2. 拼接名称字符串
const selectedNames = []
selectedIds.forEach((code) => {
const item = this.khdxList.find((d) => d.code === code)
if (item) {
selectedNames.push(item.value)
}
})
this.project.khdx = selectedNames.join('；')
},
btnBeforDelete() {
const _this = this
if (this.selectedRowKeys.length === 0) {
Message.warning('请选择要删除的数据！')
return
}
Modal.confirm({
content
: '是否确认删除？',
onOk() {
_this.deleteJlkhzbxfSub()
_this.selectedRowKeys = []
},
onCancel() {},
})
},
deleteJlkhzbxfSub() {
KhypjService.removeJlkhzbxfSubByIds(this.selectedRowKeys).then((res) => {
if (res.data.code === 200) {
Message.success('删除成功！')
this.getJlkhzbxfSubList()
} else {
Message.error('查询失败！')
}
})
},
btnSelectProject(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = [...selectedRows]
},
openDialog() {
this.dialogVisible = true
this.selectedKeys = []
this.selectedRows = []
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)
},
handleCancel() {
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.selectedKhdxIds = 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 mo
nth = String(now.getMo
nth() + 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}${mo
nth}${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
-label {
width
: 170px;
padding
-bottom
: 1px;
text
-align
: center;
background
-color
: #fafafa;
}
}
&
::v
-deep(label) {
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(label) {
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
-label {
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
: relative;
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
-delete
-button {
cursor
: pointer;
position
: relative;
font
-size
: 24px;
color
: #999;
transition
: all 0.3s;
}
.dynamic
-delete
-button
:hover {
color
: #777;
}
.dynamic
-delete
-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>
检查代码，针对分值上限设置的校验规则并未生效，请检查代码并修改
本文通过具体实例详细解析了jQuery中的选择器用法，包括不同选择器间的细微差别及其与CSS3选择器的区别，并展示了如何使用这些选择器进行元素操作。
扫一扫
826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
