Compare commits
2 Commits
ea68c25dc6
...
f934023b92
Author | SHA1 | Date |
---|---|---|
|
f934023b92 | 1 month ago |
|
4a80081e0f | 1 month ago |
8 changed files with 697 additions and 25 deletions
@ -0,0 +1,286 @@ |
|||||
|
<template> |
||||
|
<el-form :model="form" ref="formRef" label-width="120px" > |
||||
|
<div class="form-container"> |
||||
|
<el-row :gutter="20"> |
||||
|
<!-- 代码归属 --> |
||||
|
<el-col :span="8"> |
||||
|
<span class="info-text">代码归属: {{ form.sysName || '暂无代码归属' }}</span> |
||||
|
</el-col> |
||||
|
|
||||
|
<!-- 代码编号 --> |
||||
|
<el-col :span="8"> |
||||
|
<span class="info-text">代码编号: {{ form.codeNum || '暂无代码编号' }}</span> |
||||
|
</el-col> |
||||
|
|
||||
|
<!-- 代码名称 --> |
||||
|
<el-col :span="8"> |
||||
|
<span class="info-text">代码名称: {{ form.codeName || '暂无代码名称' }}</span> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<!-- 查询表单 --> |
||||
|
<div class="query-form-container"> |
||||
|
<el-form :model="queryParams" ref="queryRef" :inline="true"> |
||||
|
<el-form-item label="代码值/名称" prop="codeNum"> |
||||
|
<el-input |
||||
|
v-model="queryParams.codeNum" |
||||
|
placeholder="请输入标准代码编号" |
||||
|
clearable |
||||
|
style="width: 220px" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item> |
||||
|
<el-button type="primary" @click="handleQuery">搜索</el-button> |
||||
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<!-- 表格展示 --> |
||||
|
<el-table |
||||
|
v-loading="loading" |
||||
|
:data="tableData" |
||||
|
:row-class-name="tableRowClassName" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
border |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" align="center" /> |
||||
|
<el-table-column |
||||
|
label="代码值" |
||||
|
align="center" |
||||
|
prop="codeNum" |
||||
|
:editable="true" |
||||
|
> |
||||
|
|
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column |
||||
|
label="代码含义" |
||||
|
align="center" |
||||
|
prop="codeName" |
||||
|
:editable="true" |
||||
|
> |
||||
|
|
||||
|
</el-table-column> |
||||
|
<el-table-column label="变更类型" align="center"> |
||||
|
<template #default="{ row }"> |
||||
|
{{ changeTypeMap[row.changeType] || row.changeType }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, reactive, onMounted, toRefs } from 'vue'; |
||||
|
import { listStdCodeApprById,getStdCodeAppr} from "@/api/datastd/std"; // 更新为新的接口 |
||||
|
|
||||
|
const { proxy } = getCurrentInstance(); |
||||
|
const { std_code_status } = proxy.useDict("std_code_status"); |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
codeId: { |
||||
|
type: Object, |
||||
|
required: false |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
console.log(props.codeNum) |
||||
|
const queryParams = ref({ |
||||
|
codeNum: '', |
||||
|
parentId: props.codeId, |
||||
|
codeName: '', |
||||
|
codeType: '', |
||||
|
sysName: '', |
||||
|
classId: 'codeItem', |
||||
|
sysId: '', |
||||
|
pageNum: 1, |
||||
|
pageSize: 100 |
||||
|
}); |
||||
|
|
||||
|
const form = ref({ |
||||
|
id: "", |
||||
|
codeNum: '', |
||||
|
codeName: '', |
||||
|
codeType: 'company', |
||||
|
codeStatus: '', |
||||
|
sysName: '', |
||||
|
classId: 'code', |
||||
|
codeMapId: '', |
||||
|
codeMapName: '', |
||||
|
codeMapNum: '', |
||||
|
sysId: undefined |
||||
|
}); |
||||
|
|
||||
|
const tableData = ref([]); |
||||
|
const selections = ref([]); |
||||
|
const loading = ref(false); |
||||
|
const showSys = ref(false); |
||||
|
const multiple = ref(false); |
||||
|
|
||||
|
|
||||
|
//初始话判断展示系统及映射下拉选 |
||||
|
if (props.codeId) { |
||||
|
form.value = { ...props.rowData }; |
||||
|
if (form.value.codeType == "sys") { |
||||
|
showSys.value = true; |
||||
|
} else { |
||||
|
showSys.value = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
// 获取数据列表 |
||||
|
const getList = async () => { |
||||
|
loading.value = true; |
||||
|
console.log(queryParams.value,"queryParams.value") |
||||
|
const response = await listStdCodeApprById(queryParams.value); |
||||
|
tableData.value = response.rows.map(item => ({ ...item})); |
||||
|
loading.value = false; |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
|
||||
|
const handleCodeClick = (row) => { |
||||
|
console.log('点击了标准代码名称', row); |
||||
|
}; |
||||
|
|
||||
|
function tableRowClassName({ row }) { |
||||
|
switch (row.changeType) { |
||||
|
case 'add': |
||||
|
return 'row-add' |
||||
|
case 'update': |
||||
|
return 'row-edit' |
||||
|
case 'delete': |
||||
|
return 'row-delete' |
||||
|
default: |
||||
|
return '' |
||||
|
} |
||||
|
} |
||||
|
const handleSelectionChange = (selection) => { |
||||
|
multiple.value = selection.length > 0; |
||||
|
selections.value = selection; // 保存选中的行数据 |
||||
|
console.log(selections.value,"子页面选中") |
||||
|
}; |
||||
|
const changeTypeMap = { |
||||
|
add: '新增', |
||||
|
update: '修改', |
||||
|
delete: '删除' |
||||
|
}; |
||||
|
// 搜索 |
||||
|
const handleQuery = () => { |
||||
|
queryParams.value.pageNum = 1; |
||||
|
getList(); |
||||
|
}; |
||||
|
|
||||
|
// 重置查询 |
||||
|
const resetQuery = () => { |
||||
|
queryParams.value = { |
||||
|
parentId:props.codeId, |
||||
|
pageNum: 1, |
||||
|
pageSize: 100 |
||||
|
}; |
||||
|
|
||||
|
}; |
||||
|
|
||||
|
defineExpose({ |
||||
|
selections |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
onMounted(() => { |
||||
|
getStdCodeAppr(props.codeId).then(response => { |
||||
|
form.value = response.data; |
||||
|
|
||||
|
}); |
||||
|
getList(); |
||||
|
// getcompanyList() |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.app-container { |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.query-form-container { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
.el-table .el-input { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.form-container { |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
} |
||||
|
.info-text { |
||||
|
font-size: 18px; /* 调整字体大小 */ |
||||
|
line-height: 1.6; /* 行高,使文字更易于阅读 */ |
||||
|
color: #333; /* 字体颜色 */ |
||||
|
font-weight: 500; /* 设置字体加粗 */ |
||||
|
display: inline-block; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
<style scoped> |
||||
|
.custom-form-container .el-form-item { |
||||
|
margin-bottom: 15px; /* 增加表单项间距 */ |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.changed-label, |
||||
|
.changed-value { |
||||
|
color: rgb(137, 189, 58) !important;; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.custom-form-container .el-form-item .el-input, |
||||
|
.custom-form-container .el-form-item .el-select { |
||||
|
width: 100%; /* 输入框和选择框宽度填满 */ |
||||
|
} |
||||
|
|
||||
|
.custom-form-container .el-form-item span { |
||||
|
font-size: 14px; /* 字体大小 */ |
||||
|
color: #333; /* 字体颜色 */ |
||||
|
} |
||||
|
|
||||
|
.custom-form-item label { |
||||
|
font-weight: bold; /* 加粗标签 */ |
||||
|
margin-right: 10px; /* 为标签添加右侧间距 */ |
||||
|
} |
||||
|
|
||||
|
.el-dialog__footer { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer-btn { |
||||
|
width: 100px; /* 按钮宽度 */ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
::v-deep(.row-add) { |
||||
|
background-color: #bae7ff !important; |
||||
|
} |
||||
|
::v-deep(.row-edit) { |
||||
|
background-color: #d9f7be !important; |
||||
|
} |
||||
|
::v-deep(.row-delete) { |
||||
|
background-color: #ffa39e !important; |
||||
|
} |
||||
|
|
||||
|
</style> |
@ -0,0 +1,210 @@ |
|||||
|
<template> |
||||
|
<el-table |
||||
|
v-loading="loading" |
||||
|
:data="tableData" |
||||
|
border |
||||
|
style="width: 100%" |
||||
|
:row-class-name="tableRowClassName" |
||||
|
|
||||
|
> |
||||
|
<el-table-column type="selection" width="55" align="center" /> |
||||
|
|
||||
|
<el-table-column label="归属" align="center" width="200"> |
||||
|
<template #default="{ row }"> |
||||
|
{{ |
||||
|
row.dictLevel === 'company' |
||||
|
? '公司级' |
||||
|
: '系统级(' + row.sysName + ')' |
||||
|
}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column label="类型" align="center"> |
||||
|
<template #default="{ row }"> |
||||
|
{{ row.dictType == 0 ? '基础数据' : '指标数据' }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
|
||||
|
<el-table-column label="代码归属" align="center" prop="sysName" /> |
||||
|
<el-table-column label="标准代码编号" align="center" prop="codeNum" /> |
||||
|
<el-table-column label="标准代码名称" align="center" prop="codeName" /> |
||||
|
|
||||
|
<el-table-column label="变更类型" align="center"> |
||||
|
<template #default="{ row }"> |
||||
|
{{ changeTypeMap[row.changeType] || row.changeType }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column label="审批状态" align="center"> |
||||
|
<template #default="{ row }"> |
||||
|
{{ approStatusMap[row.approStatus] || row.approStatus }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!-- “查看” 操作列,固定右侧 --> |
||||
|
<el-table-column fixed="right" label="操作" width="100" align="center"> |
||||
|
<template #default="{ row }"> |
||||
|
<el-button text type="primary" @click="handleView(row.id)"> |
||||
|
查看 |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 弹窗 --> |
||||
|
<!-- 字典详情弹窗(样式保留) --> |
||||
|
<el-dialog |
||||
|
v-model="formVisible" |
||||
|
title="字典详情" |
||||
|
width="70%" |
||||
|
@close="formData = {}" |
||||
|
> |
||||
|
<!-- 引入第二个页面组件 --> |
||||
|
<code-item-common ref="showCodeDialog" v-if="formVisible" :codeId="codeId"/> |
||||
|
|
||||
|
|
||||
|
<template #footer> |
||||
|
<el-button @click="formVisible = false">关闭</el-button> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, watch } from 'vue'; |
||||
|
import { listStdCodeAppr,} from '@/api/datastd/std'; |
||||
|
import codeItemCommon from './codeItemCommon.vue'; // 引入第二个页面组件 |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
flowId: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
stdCodeVisible:{ |
||||
|
type: Boolean, |
||||
|
required: true |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 设置行样式 |
||||
|
function tableRowClassName({ row }) { |
||||
|
switch (row.changeType) { |
||||
|
case 'add': |
||||
|
return 'row-add' |
||||
|
case 'update': |
||||
|
return 'row-edit' |
||||
|
case 'delete': |
||||
|
return 'row-delete' |
||||
|
default: |
||||
|
return '' |
||||
|
} |
||||
|
} |
||||
|
const isChanged = (val) => !!val && typeof val === 'string' && val.includes('==>'); |
||||
|
const formatValue = (val) => { |
||||
|
if (!val) return '' |
||||
|
if (isChanged(val)) { |
||||
|
const [oldVal, newVal] = val.split('==>') |
||||
|
return `${oldVal.trim()} ==> ${newVal.trim()}` |
||||
|
} |
||||
|
return val |
||||
|
} |
||||
|
const loading = ref(false); |
||||
|
const codeId = ref(""); |
||||
|
const tableData = ref([]); |
||||
|
|
||||
|
const changeTypeMap = { |
||||
|
add: '新增', |
||||
|
update: '修改', |
||||
|
delete: '删除' |
||||
|
}; |
||||
|
|
||||
|
const approStatusMap = { |
||||
|
waiting: '待审核', |
||||
|
pending: '审核中', |
||||
|
succeed: '通过', |
||||
|
rejected: '拒绝', |
||||
|
canceled: '已取消' |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
const formVisible = ref(false); |
||||
|
const formData = ref({}); |
||||
|
|
||||
|
const getList = async () => { |
||||
|
loading.value = true; |
||||
|
try { |
||||
|
const params = { flowId: props.flowId }; |
||||
|
const res = await listStdCodeAppr(params); |
||||
|
tableData.value = res.data || []; |
||||
|
} catch (e) { |
||||
|
console.error('加载失败', e); |
||||
|
} finally { |
||||
|
loading.value = false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
watch(() => props.stdCodeVisible, (newVal) => { |
||||
|
if (newVal) { |
||||
|
getList(); |
||||
|
} |
||||
|
}); |
||||
|
onMounted(() => { |
||||
|
if (props.flowId) { |
||||
|
getList(); |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
const handleView = async (id) => { |
||||
|
try { |
||||
|
codeId.value=id |
||||
|
formVisible.value = true; |
||||
|
} catch (e) { |
||||
|
console.error('获取详情失败', e); |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.custom-form-container .el-form-item { |
||||
|
margin-bottom: 15px; /* 增加表单项间距 */ |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
.changed-label, |
||||
|
.changed-value { |
||||
|
color: rgb(137, 189, 58) !important;; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.custom-form-container .el-form-item .el-input, |
||||
|
.custom-form-container .el-form-item .el-select { |
||||
|
width: 100%; /* 输入框和选择框宽度填满 */ |
||||
|
} |
||||
|
|
||||
|
.custom-form-container .el-form-item span { |
||||
|
font-size: 14px; /* 字体大小 */ |
||||
|
color: #333; /* 字体颜色 */ |
||||
|
} |
||||
|
|
||||
|
.custom-form-item label { |
||||
|
font-weight: bold; /* 加粗标签 */ |
||||
|
margin-right: 10px; /* 为标签添加右侧间距 */ |
||||
|
} |
||||
|
|
||||
|
.el-dialog__footer { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.dialog-footer-btn { |
||||
|
width: 100px; /* 按钮宽度 */ |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
::v-deep(.row-add) { |
||||
|
background-color: #bae7ff !important; |
||||
|
} |
||||
|
::v-deep(.row-edit) { |
||||
|
background-color: #d9f7be !important; |
||||
|
} |
||||
|
::v-deep(.row-delete) { |
||||
|
background-color: #ffa39e !important; |
||||
|
} |
||||
|
|
||||
|
</style> |
Loading…
Reference in new issue