You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

223 lines
4.2 KiB

<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"
@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>
</template>
<script setup>
import { ref, reactive, onMounted, toRefs } from 'vue';
3 months ago
import { listStdCode,getStdCode} from "@/api/datastd/std"; // 更新为新的接口
const { proxy } = getCurrentInstance();
const { std_code_status } = proxy.useDict("std_code_status");
const props = defineProps({
codeId: {
type: Object,
required: false
},
});
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 listStdCode(queryParams.value);
tableData.value = response.rows.map(item => ({ ...item}));
loading.value = false;
};
const handleCodeClick = (row) => {
console.log('点击了标准代码名称', row);
};
const handleSelectionChange = (selection) => {
multiple.value = selection.length > 0;
selections.value = selection; // 保存选中的行数据
console.log(selections.value,"子页面选中")
};
// 搜索
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
// 重置查询
const resetQuery = () => {
queryParams.value = {
parentId:props.codeId,
pageNum: 1,
pageSize: 100
};
};
defineExpose({
selections
});
onMounted(() => {
getStdCode(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>