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