8 changed files with 724 additions and 389 deletions
@ -0,0 +1,409 @@ |
|||
<template> |
|||
<el-form :model="form" ref="formRef" label-width="120px" :rules="formRules"> |
|||
<div class="form-container"> |
|||
<el-row :gutter="20"> |
|||
<!-- 标准代码编号 --> |
|||
<el-col :span="12"> |
|||
<el-form-item label="标准代码编号" prop="codeNum"> |
|||
<el-input v-model="form.codeNum" placeholder="请输入标准代码编号" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<!-- 标准代码名称 --> |
|||
<el-col :span="12"> |
|||
<el-form-item label="标准代码名称" prop="codeName"> |
|||
<el-input v-model="form.codeName" placeholder="请输入标准代码名称" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row :gutter="20"> |
|||
<!-- 标准代码类型 --> |
|||
<el-col :span="12"> |
|||
<el-form-item label="标准代码类型" prop="codeType"> |
|||
<el-select |
|||
v-model="form.codeType" |
|||
placeholder="请选择标准代码类型" |
|||
maxlength="30" |
|||
@change="changeCodeType" |
|||
> |
|||
<el-option |
|||
v-for="dict in std_code_status" |
|||
:key="dict.value" |
|||
:label="dict.label" |
|||
:value="dict.value" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<!-- 归属系统 --> |
|||
<el-col :span="12" v-show="showSys"> |
|||
<el-form-item label="归属系统" prop="sysId"> |
|||
<el-select |
|||
v-model="form.sysId" |
|||
placeholder="请选择归属系统" |
|||
maxlength="30" |
|||
@change="dataChange" |
|||
> |
|||
<el-option |
|||
v-for="dict in dbResourceOldList" |
|||
:key="dict.id" |
|||
:label="dict.name" |
|||
:value="dict.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</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-row :gutter="10" class="mb8"> |
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="primary" |
|||
plain |
|||
icon="Plus" |
|||
@click="handleAdd" |
|||
v-hasPermi="['meta:metaSecurityCol:add']" |
|||
>新增</el-button> |
|||
</el-col> |
|||
|
|||
<el-col :span="1.5"> |
|||
<el-button |
|||
type="danger" |
|||
plain |
|||
icon="Delete" |
|||
:disabled="multiple" |
|||
@click="handleRemove" |
|||
v-hasPermi="['meta:metaSecurityCol:remove']" |
|||
>删除</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<!-- 表格展示 --> |
|||
<el-table |
|||
v-loading="loading" |
|||
:data="tableData" |
|||
@selection-change="handleSelectionChange" |
|||
@row-dblclick="handleRowDblClick" |
|||
border |
|||
style="width: 100%" |
|||
> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column |
|||
label="代码值" |
|||
align="center" |
|||
prop="codeNum" |
|||
:editable="true" |
|||
> |
|||
<template #default="scope"> |
|||
<el-input |
|||
v-if="scope.row.isEditing" |
|||
v-model="scope.row.codeNum" |
|||
size="small" |
|||
placeholder="请输入代码值" |
|||
@blur="handleBlur(scope.row)" |
|||
/> |
|||
<span v-else>{{ scope.row.codeNum }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
label="代码名称" |
|||
align="center" |
|||
prop="codeName" |
|||
:editable="true" |
|||
> |
|||
<template #default="scope"> |
|||
<el-input |
|||
v-if="scope.row.isEditing" |
|||
v-model="scope.row.codeName" |
|||
size="small" |
|||
placeholder="请输入代码名称" |
|||
@blur="handleBlur(scope.row)" |
|||
/> |
|||
<span v-else>{{ scope.row.codeName }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
label="代码关系" |
|||
align="center" |
|||
> |
|||
<template #default="scope"> |
|||
<el-link |
|||
type="primary" |
|||
:underline="true" |
|||
@click="handleCodeClick(scope.row)" |
|||
style="cursor: pointer" |
|||
> |
|||
查看关系 |
|||
</el-link> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, reactive, onMounted, toRefs } from 'vue'; |
|||
import { listStdCode,addStdCode,updateStdCode } from "@/api/datastd/stdcode"; // 更新为新的接口 |
|||
|
|||
const { proxy } = getCurrentInstance(); |
|||
const { std_code_status } = proxy.useDict("std_code_status"); |
|||
|
|||
const props = defineProps({ |
|||
rowData: { |
|||
type: Object, |
|||
required: false |
|||
}, |
|||
dbResourceOldList: { |
|||
type: Object, |
|||
required: false |
|||
} |
|||
}); |
|||
|
|||
const queryParams = ref({ |
|||
codeNum: '', |
|||
parentId: props.rowData.id, |
|||
codeName: '', |
|||
codeType: '', |
|||
sysName: '', |
|||
classId: 'codeItem', |
|||
sysId: '', |
|||
pageNum: 1, |
|||
pageSize: 100 |
|||
}); |
|||
|
|||
const form = ref({ |
|||
id: "", |
|||
codeNum: '', |
|||
codeName: '', |
|||
codeType: 'company', |
|||
codeStatus: '', |
|||
sysName: '', |
|||
classId: 'code', |
|||
sysId: undefined |
|||
}); |
|||
|
|||
const tableData = ref([]); |
|||
const loading = ref(false); |
|||
const showSys = ref(false); |
|||
const multiple = ref(false); |
|||
function dataChange(data) { |
|||
// 从 dbResourceOldList 中查找对应的 name |
|||
const selectedItem = props.dbResourceOldList.find(item => item.id === data); |
|||
if (selectedItem) { |
|||
// 如果找到对应的项,将 name 赋值给 form.value.dbRName |
|||
form.value.sysName = selectedItem.name; |
|||
} else { |
|||
// 如果未找到,清空 form.value.dbRName |
|||
form.value.sysName = ''; |
|||
} |
|||
} |
|||
if (props.rowData.id) { |
|||
form.value = { ...props.rowData }; |
|||
if (form.value.codeType == "sys") { |
|||
showSys.value = true; |
|||
} else { |
|||
showSys.value = false; |
|||
} |
|||
} |
|||
|
|||
// 双击行进入编辑模式 |
|||
const handleRowDblClick = (row) => { |
|||
row.isEditing = true; |
|||
}; |
|||
|
|||
// 失去焦点时保存编辑结果 |
|||
const handleBlur = (row) => { |
|||
row.isEditing = false; |
|||
// 可以在这里发送请求保存编辑的结果 |
|||
console.log('保存编辑', row); |
|||
}; |
|||
|
|||
// 获取数据列表 |
|||
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, isEditing: false })); |
|||
loading.value = false; |
|||
}; |
|||
const formRules = reactive({ |
|||
codeNum: [{ required: true, message: "请输入标准代码编号", trigger: "blur" }], |
|||
codeName: [{ required: true, message: "请输入标准代码名称", trigger: "blur" }] |
|||
}); |
|||
const handleCodeClick = (row) => { |
|||
console.log('点击了标准代码名称', row); |
|||
}; |
|||
// const handleSave = async () => { |
|||
// // 检查是否有 ID,决定调用哪个接口 |
|||
// const params = { code: form.value, code_item_list: tableData.value }; |
|||
|
|||
// try { |
|||
// let response; |
|||
// if (props.rowData.id) { |
|||
// // 如果 ID 存在,调用 updateStdCode |
|||
// response = await updateStdCode(params); |
|||
// if(response.success){ |
|||
// proxy.$modal.msgSuccess(response.msg); |
|||
|
|||
// }else{ |
|||
// proxy.$modal.msgError(response.msg); |
|||
|
|||
// } |
|||
// } else { |
|||
// // 如果 ID 为空,调用 addStdCode |
|||
// response = await addStdCode(params); |
|||
// if(response.success){ |
|||
// proxy.$modal.msgSuccess(response.msg); |
|||
|
|||
// }else{ |
|||
// proxy.$modal.msgError(response.msg); |
|||
|
|||
// } |
|||
// } |
|||
|
|||
// // 你可以在这里根据接口响应做一些操作,比如提示用户操作成功 |
|||
// if (response.success) { |
|||
// // 例如关闭对话框、刷新列表等操作 |
|||
// console.log('操作成功'); |
|||
// } else { |
|||
// console.error('操作失败'); |
|||
// } |
|||
|
|||
// } catch (error) { |
|||
// console.error('保存时出错:', error); |
|||
// // 这里可以弹出错误提示 |
|||
// } |
|||
// }; |
|||
const handleSave = async () => { |
|||
// 检查是否有 ID,决定调用哪个接口 |
|||
const params = { code: form.value, code_item_list: tableData.value }; |
|||
|
|||
try { |
|||
let response; |
|||
if (props.rowData.id) { |
|||
// 如果 ID 存在,调用 updateStdCode |
|||
response = await updateStdCode(params); |
|||
if (response.success) { |
|||
proxy.$modal.msgSuccess(response.msg); |
|||
} else { |
|||
proxy.$modal.msgError(response.msg); |
|||
} |
|||
} else { |
|||
// 如果 ID 为空,调用 addStdCode |
|||
response = await addStdCode(params); |
|||
if (response.success) { |
|||
proxy.$modal.msgSuccess(response.msg); |
|||
} else { |
|||
proxy.$modal.msgError(response.msg); |
|||
} |
|||
} |
|||
|
|||
// 根据 response.success 返回 true 或 false |
|||
if (response.success) { |
|||
// 操作成功 |
|||
console.log('操作成功11111'); |
|||
return true; |
|||
} else { |
|||
// 操作失败 |
|||
console.error('操作失败22222222'); |
|||
return false; |
|||
} |
|||
|
|||
} catch (error) { |
|||
console.error('保存时出错:', error); |
|||
// 这里可以弹出错误提示 |
|||
return false; // 出现异常时返回 false |
|||
} |
|||
}; |
|||
|
|||
const handleSelectionChange = (selection) => { |
|||
multiple.value = selection.length > 0; |
|||
}; |
|||
|
|||
// 搜索 |
|||
const handleQuery = () => { |
|||
queryParams.value.pageNum = 1; |
|||
getList(); |
|||
}; |
|||
|
|||
// 重置查询 |
|||
const resetQuery = () => { |
|||
queryParams.value = { |
|||
codeNum: '', |
|||
pageNum: 1, |
|||
pageSize: 100 |
|||
}; |
|||
getList(); |
|||
}; |
|||
function changeCodeType(data) { |
|||
if (data != "company") { |
|||
showSys.value = true; |
|||
form.value.sysName = ""; |
|||
form.value.sysId = undefined; |
|||
} else { |
|||
showSys.value = false; |
|||
form.value.sysName = "公司级"; |
|||
form.value.sysId = 10000; |
|||
} |
|||
} |
|||
// 新增行 |
|||
const handleAdd = () => { |
|||
const newRow = {id:'',classId: 'codeItem',parentId: props.rowData.id,codeNum: '', codeName: '', isEditing: true }; |
|||
tableData.value.push(newRow); |
|||
}; |
|||
|
|||
// 删除选中行 |
|||
const handleRemove = () => { |
|||
const selectedRows = tableData.value.filter(row => row.isSelected); |
|||
tableData.value = tableData.value.filter(row => !row.isSelected); |
|||
}; |
|||
defineExpose({ |
|||
handleSave |
|||
}); |
|||
onMounted(() => { |
|||
getList(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.app-container { |
|||
padding: 20px; |
|||
} |
|||
|
|||
.form-container { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.query-form-container { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.el-table .el-input { |
|||
width: 100%; |
|||
} |
|||
</style> |
Loading…
Reference in new issue