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