页面优化
This commit is contained in:
parent
12e2cc847c
commit
e92e9d805e
|
|
@ -81,6 +81,7 @@
|
|||
<el-radio
|
||||
:label="getRowUniqueId(scope.row, scope.$index)"
|
||||
v-model="currentRowId"
|
||||
:disabled="isRadioDisabled(scope.row)"
|
||||
@change="handleRadioChange(scope.row, scope.$index)"
|
||||
>
|
||||
<span></span>
|
||||
|
|
@ -203,6 +204,11 @@ export default {
|
|||
type: String,
|
||||
default: 'id',
|
||||
},
|
||||
// 单选框禁用判断的字段名（如果该字段值不为空，则禁用该行的单选框）
|
||||
radioDisabledKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 测试时使用的数据源
|
||||
testTableList: {
|
||||
type: Array,
|
||||
|
|
@ -436,20 +442,25 @@ export default {
|
|||
if (res.code === 200) {
|
||||
this.tableList = res.rows
|
||||
this.total = res.total
|
||||
// 数据刷新后，如果之前选中的行不在当前列表中，清空选中状态
|
||||
// 数据刷新后，如果之前选中的行不在当前列表中或被禁用，清空选中状态
|
||||
if (this.isRadioShow && this.currentRowId) {
|
||||
let exists = false
|
||||
let isDisabled = false
|
||||
for (let i = 0; i < this.tableList.length; i++) {
|
||||
const row = this.tableList[i]
|
||||
const uniqueId = this.getRowUniqueId(row, i)
|
||||
if (uniqueId === this.currentRowId) {
|
||||
exists = true
|
||||
// 检查该行是否被禁用
|
||||
isDisabled = this.isRadioDisabled(row)
|
||||
if (!isDisabled) {
|
||||
// 更新当前行数据引用
|
||||
this.currentRowData = row
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!exists) {
|
||||
if (!exists || isDisabled) {
|
||||
this.currentRowId = null
|
||||
this.currentRowData = null
|
||||
}
|
||||
|
|
@ -601,6 +612,10 @@ export default {
|
|||
// 处理单选框变化事件
|
||||
handleRadioChange(row, index) {
|
||||
if (this.isRadioShow && row) {
|
||||
// 如果该行被禁用，直接返回，不执行任何操作
|
||||
if (this.isRadioDisabled(row)) {
|
||||
return
|
||||
}
|
||||
const uniqueId = this.getRowUniqueId(row, index)
|
||||
// 只有当值真正改变时才更新，避免重复触发
|
||||
if (this.currentRowId !== uniqueId) {
|
||||
|
|
@ -611,9 +626,26 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
// 判断单选框是否禁用
|
||||
isRadioDisabled(row) {
|
||||
// 如果没有设置禁用判断字段，不禁用
|
||||
if (!this.radioDisabledKey) {
|
||||
return false
|
||||
}
|
||||
// 获取禁用判断字段的值
|
||||
const disabledValue = row[this.radioDisabledKey]
|
||||
// 如果值为空（null、undefined、''），不禁选（返回 false）
|
||||
// 如果不为空，则禁止选中（返回 true）
|
||||
return disabledValue !== null && disabledValue !== undefined && disabledValue !== ''
|
||||
},
|
||||
|
||||
// 处理表格当前行变化（用于高亮）
|
||||
handleCurrentChange(currentRow) {
|
||||
if (this.isRadioShow && currentRow) {
|
||||
// 如果该行被禁用，直接返回，不执行任何操作
|
||||
if (this.isRadioDisabled(currentRow)) {
|
||||
return
|
||||
}
|
||||
const index = this.tableList.findIndex(r => r === currentRow)
|
||||
const uniqueId = this.getRowUniqueId(currentRow, index)
|
||||
this.currentRowId = uniqueId
|
||||
|
|
@ -688,6 +720,12 @@ export default {
|
|||
}
|
||||
}
|
||||
if (foundRow) {
|
||||
// 如果该行被禁用，清空选中状态，不触发事件
|
||||
if (this.isRadioDisabled(foundRow)) {
|
||||
this.currentRowId = oldVal
|
||||
this.currentRowData = null
|
||||
return
|
||||
}
|
||||
this.currentRowData = foundRow
|
||||
this.$emit('radio-change', foundRow, foundIndex)
|
||||
}
|
||||
|
|
@ -835,6 +873,20 @@ export default {
|
|||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 禁用状态下的样式，确保无法点击
|
||||
&.is-disabled {
|
||||
cursor: not-allowed;
|
||||
pointer-events: auto; // 保持 pointer-events 以显示禁用状态
|
||||
|
||||
.el-radio__input {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.el-radio__label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表格样式优化
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
ref="detailTableRef" :columnsList="detailColumnsList" :request-api="getBidListAPI"
|
||||
:sendParams="sendParams" :handleColWidth="180" :isRadioShow="true"
|
||||
@radio-change="handleRadioChange" :indexNumShow="false" :isShowtableCardStyle="false"
|
||||
:radioKey="radioKey">
|
||||
:radioKey="radioKey" :radioDisabledKey="radioDisabledKey">
|
||||
<template slot="tableTitle">
|
||||
<div class="card-header">
|
||||
<img src="@/assets/enterpriseLibrary/basic-info.png" alt="标的信息">
|
||||
|
|
@ -174,6 +174,7 @@ export default {
|
|||
dialogVisible: false,
|
||||
fileData: {},
|
||||
radioKey: 'bidId',
|
||||
radioDisabledKey: 'parsingState',
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -245,6 +246,10 @@ export default {
|
|||
this.dialogVisible = false
|
||||
this.fileData = {}
|
||||
},
|
||||
handleReuslt(res) {
|
||||
this.$modal.msgSuccess(res.msg)
|
||||
this.handleClose()
|
||||
},
|
||||
// 返回
|
||||
handleClose() {
|
||||
let obj = { path: "/analysis" }
|
||||
|
|
@ -300,11 +305,13 @@ export default {
|
|||
bidId: this.selectedRow.bidId,
|
||||
proId: this.proId,
|
||||
uploadType: this.uploadType,
|
||||
allFiles: [
|
||||
...data.fileList.map((file) =>
|
||||
JSON.parse(JSON.stringify(file)),
|
||||
allFiles: Object.keys(data)
|
||||
.filter(key => key.startsWith('fileList'))
|
||||
.flatMap(key =>
|
||||
(data[key] || []).map(file =>
|
||||
JSON.parse(JSON.stringify(file))
|
||||
)
|
||||
),
|
||||
],
|
||||
delFiles: [...data.delFileList],
|
||||
}
|
||||
|
||||
|
|
@ -318,7 +325,9 @@ export default {
|
|||
})
|
||||
.filter((item) => item !== null)
|
||||
formData.files = allFiles
|
||||
delete formData.fileList
|
||||
Object.keys(formData)
|
||||
.filter(key => key.startsWith('fileList'))
|
||||
.forEach(key => delete formData[key]);
|
||||
delete formData.delFileList
|
||||
delete formData.allFiles
|
||||
// 显示遮罩层
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
:columnsList="bidListColumnsList" :request-api="getBidListAPI" :sendParams="sendParams"
|
||||
:handleColWidth="200" :isShowtableCardStyle="false">
|
||||
<template slot="parsingState" slot-scope="{ data }">
|
||||
<el-tag v-if="data.parsingState === '0'" type="info">解析中</el-tag>
|
||||
<el-tag v-if="!data.parsingState" type="info">待解析</el-tag>
|
||||
<el-tag v-if="data.parsingState === '0'" type="warn">解析中</el-tag>
|
||||
<el-tag v-else-if="data.parsingState === '1'" type="success">解析成功</el-tag>
|
||||
<el-tag v-else-if="data.parsingState === '2'" type="danger">解析失败</el-tag>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue