14 changed files with 1579 additions and 18 deletions
@ -0,0 +1,209 @@ |
|||
<template> |
|||
<el-dialog width="500px" append-to-body :title="isEdit ? '修改数据字典' : '新增数据字典'" v-model="visible" @close="handleClose"> |
|||
<el-form :model="formData" ref="formRef" label-width="120px" :rules="formRules"> |
|||
<el-form-item label="字典归属" prop="dictLevel"> |
|||
<el-select |
|||
v-model="formData.dictLevel" |
|||
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-form-item label="来源系统" prop="sysId" v-show="showSys"> |
|||
<el-select |
|||
v-model="formData.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-form-item label="数据字典类型" prop="dictType"> |
|||
<el-select v-model="formData.dictType" placeholder="请选择数据字典类型"> |
|||
<el-option label="基础数据" value="0" /> |
|||
<el-option label="指标数据" value="1" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="数据字典编号" prop="dictNum"> |
|||
<el-input v-model="formData.dictNum" :disabled=isEdit placeholder="请输入数据字典编号" clearable /> |
|||
</el-form-item> |
|||
<el-form-item label="字典英文名" prop="dictCode"> |
|||
<el-input v-model="formData.dictCode" placeholder="请输入字典英文名" clearable /> |
|||
</el-form-item> |
|||
<el-form-item label="字典中文名" prop="dictName"> |
|||
<el-input v-model="formData.dictName" placeholder="请输入字典中文名" clearable /> |
|||
</el-form-item> |
|||
<el-form-item label="字典业务定义" prop="dictMenu"> |
|||
<el-input v-model="formData.dictMenu" placeholder="请输入字典中文名" clearable /> |
|||
</el-form-item> |
|||
<el-form-item label="数据类型" prop="dataType"> |
|||
<el-input v-model="formData.dataType" placeholder="请输入字典中文名" clearable /> |
|||
</el-form-item> |
|||
<el-form-item label="数据标准" prop="stdCode"> |
|||
<el-input v-model="formData.stdCode" placeholder="请输入字典中文名" clearable /> |
|||
</el-form-item> |
|||
<el-form-item label="业务认责部门" prop="bussDeptId"> |
|||
<el-tree-select |
|||
v-model="formData.bussDeptId" |
|||
:data="deptOptions" |
|||
:props="{ value: 'id', label: 'label', children: 'children' }" |
|||
value-key="id" |
|||
placeholder="请选择业务认责部门" |
|||
check-strictly /> |
|||
</el-form-item> |
|||
<el-form-item label="业务认责人员" prop="bussUser"> |
|||
<el-select v-model="formData.bussUser" placeholder="请选择业务认责人员"> |
|||
<el-option |
|||
v-for="dict in userList" |
|||
:key="dict.id" |
|||
:label="dict.userName" |
|||
:value="dict.userName" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="技术认责部门" prop="techDeptId"> |
|||
<el-tree-select |
|||
v-model="formData.techDeptId" |
|||
:data="deptOptions" |
|||
:props="{ value: 'id', label: 'label', children: 'children' }" |
|||
value-key="id" |
|||
placeholder="请选择技术认责部门" |
|||
check-strictly /> |
|||
</el-form-item> |
|||
<el-form-item label="技术认责人员" prop="techUser"> |
|||
<el-select v-model="formData.techUser" placeholder="技术认责人员"> |
|||
<el-option |
|||
v-for="dict in userList" |
|||
:key="dict.id" |
|||
:label="dict.userName" |
|||
:value="dict.userName" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<!-- 底部按钮区域 --> |
|||
<el-row justify="center" style="margin-top: 20px;"> |
|||
<el-col :span="4" style="padding-right: 10px;"> |
|||
<el-button @click="handleClose" style="width: 100%" plain>取消</el-button> |
|||
</el-col> |
|||
<el-col :span="4" style="padding-left: 10px;"> |
|||
<el-button type="primary" @click="handleSubmit" style="width: 100%">保存</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
</el-form> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, watch } from 'vue'; |
|||
import { updateStdDict, addStdDict } from '@/api/datastd/std'; // 确保接口存在 |
|||
import { listUser, deptTreeSelect } from "@/api/system/user"; |
|||
const { proxy } = getCurrentInstance(); |
|||
const { std_code_status,std_code_appr } = proxy.useDict("std_code_status","std_code_appr"); |
|||
|
|||
const props = defineProps({ |
|||
data: { |
|||
type: Object, |
|||
required: false, |
|||
}, |
|||
isEdit: { |
|||
type: Boolean, |
|||
}, |
|||
dbResourceOldList: { |
|||
type: Object, |
|||
}, |
|||
visible: { |
|||
type: Boolean, |
|||
}, |
|||
}); |
|||
// 定义表单校验规则 |
|||
const formRules = ref({ |
|||
dictLevel: [{ required: true, message: '请选择字典归属', trigger: 'blur' }], |
|||
dictType: [{ required: true, message: '请选择数据字典类型', trigger: 'blur' }], |
|||
dictNum: [{ required: true, message: '请输入数据字典编号', trigger: 'blur' }] |
|||
}); |
|||
const showSys = ref(false); |
|||
const emit = defineEmits(['update:visible', 'refresh']); |
|||
const userList = ref([]); |
|||
const formData = ref({ ...props.data }); |
|||
const visible = ref(props.visible); // 使用 prop 传入的 visible |
|||
function dataChange(data) { |
|||
// 从 dbResourceOldList 中查找对应的 name |
|||
const selectedItem = props.dbResourceOldList.find(item => item.id === data); |
|||
if (selectedItem) { |
|||
// 如果找到对应的项,将 name 赋值给 formData.value.dbRName |
|||
formData.value.sysName = selectedItem.name; |
|||
} else { |
|||
// 如果未找到,清空 formData.value.dbRName |
|||
formData.value.sysName = ''; |
|||
} |
|||
} |
|||
// 监听 props.visible 的变化,确保同步到 local visible |
|||
watch(() => props.visible, (newVal) => { |
|||
visible.value = newVal; |
|||
formData.value = { ...props.data } |
|||
}); |
|||
|
|||
function getList() { |
|||
listUser({pageSize:1,pageNumber:1000}).then(res => { |
|||
userList.value = res.rows; |
|||
}); |
|||
}; |
|||
const handleClose = () => { |
|||
emit('update:visible', false); // 关闭弹框 |
|||
}; |
|||
const deptOptions = ref(undefined); |
|||
|
|||
function getDeptTree() { |
|||
deptTreeSelect().then(response => { |
|||
deptOptions.value = response.data; |
|||
}); |
|||
}; |
|||
function changeCodeType(data) { |
|||
if (data != "company") { |
|||
showSys.value = true; |
|||
formData.value.sysName = ""; |
|||
formData.value.sysId = undefined; |
|||
} else { |
|||
showSys.value = false; |
|||
formData.value.sysName = "公司级"; |
|||
formData.value.sysId = 10000; |
|||
} |
|||
} |
|||
getDeptTree(); |
|||
getList(); |
|||
const handleSubmit = () => { |
|||
const formRef = proxy.$refs.formRef; |
|||
formRef.validate((valid) => { |
|||
if (valid) { |
|||
const apiCall = props.isEdit ? updateStdDict(formData.value) : addStdDict(formData.value); |
|||
apiCall |
|||
.then(() => { |
|||
emit('refresh'); |
|||
handleClose(); |
|||
}) |
|||
.catch((error) => { |
|||
console.error(error); |
|||
}); |
|||
} else { |
|||
console.log('表单验证失败'); |
|||
return false; |
|||
} |
|||
}); |
|||
}; |
|||
</script> |
@ -0,0 +1,446 @@ |
|||
<template> |
|||
<el-form :model="form" ref="formRef" label-width="120px" :rules="formRules"> |
|||
<div class="form-container"> |
|||
<el-row :gutter="20"> |
|||
<!-- 标准代码编号 --> |
|||
<el-col :span="8"> |
|||
<el-form-item label="标准代码编号" prop="codeNum"> |
|||
<el-input v-model="form.codeNum" placeholder="请输入标准代码编号" /> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<!-- 标准代码名称 --> |
|||
<el-col :span="8"> |
|||
<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="8"> |
|||
<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="8" 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-col :span="8" v-show="showSys"> |
|||
<el-form-item label="代码映射" prop="codeMapId"> |
|||
<el-select |
|||
v-model="form.codeMapId" |
|||
placeholder="请选择代码映射" |
|||
maxlength="30" |
|||
@change="mapChange" |
|||
> |
|||
<el-option |
|||
v-for="dict in companyist" |
|||
:key="dict.id" |
|||
:label="dict.codeName" |
|||
: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" |
|||
prop="代码映射" |
|||
|
|||
> |
|||
<template #default="scope"> |
|||
<el-link |
|||
type="primary" |
|||
:underline="true" |
|||
@click="handleCodeClick(scope.row, scope.$index)" |
|||
style="cursor: pointer" |
|||
> |
|||
<span v-if="!scope.row.codeMapName">代码映射</span> |
|||
<span v-else>{{ scope.row.codeMapName }}</span> |
|||
</el-link> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-dialog title="代码映射" v-model="mapVisible" width="1000px"> |
|||
<!-- 引入第二个页面组件 --> |
|||
<code-item-common ref="showCodeDialog" v-if="mapVisible" :codeId="form.codeMapId"/> |
|||
<template #footer> |
|||
<el-button @click="handleCancel2">取消</el-button> |
|||
<el-button type="primary" @click="handleSave2">确定</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, reactive, onMounted, toRefs } from 'vue'; |
|||
import { listStdCode,listStdCodeCompany,addStdCode,updateStdCode } from "@/api/datastd/stdcode"; // 更新为新的接口 |
|||
import codeItemCommon from './codeItemCommon.vue'; // 引入第二个页面组件 |
|||
|
|||
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', |
|||
codeMapId: '', |
|||
codeMapName: '', |
|||
codeMapNum: '', |
|||
sysId: undefined |
|||
}); |
|||
const handleCancel2 = () => { |
|||
mapVisible.value = false; |
|||
}; |
|||
|
|||
const tableData = ref([]); |
|||
const companyist = ref([]); |
|||
const loading = ref(false); |
|||
const showSys = ref(false); |
|||
const mapVisible = 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 = ''; |
|||
} |
|||
} |
|||
|
|||
function mapChange(data) { |
|||
const selectedItem = companyist.value.find(item => item.id === data); |
|||
console.log("selectmap",selectedItem,data) |
|||
if (selectedItem) { |
|||
// 如果找到对应的项,将 name 赋值给 form.value.dbRName |
|||
form.value.codeMapName = selectedItem.codeName; |
|||
form.value.codeMapNum = selectedItem.codeNum; |
|||
} else { |
|||
// 如果未找到,清空 form.value.codeMapName |
|||
form.value.codeMapName = ''; |
|||
} |
|||
} |
|||
//初始话判断展示系统及映射下拉选 |
|||
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 selectedRow = ref(null); // 传递给 codeItem 组件的数据 |
|||
const selectedRowIndex = ref(null); // 传递给 codeItem 组件的数据 |
|||
|
|||
// 失去焦点时保存编辑结果 |
|||
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 getcompanyList = async () => { |
|||
const response = await listStdCodeCompany(); |
|||
companyist.value = response.rows; |
|||
console.log(companyist.value,"companyCodeList") |
|||
}; |
|||
const formRules = reactive({ |
|||
codeNum: [{ required: true, message: "请输入标准代码编号", trigger: "blur" }], |
|||
codeName: [{ required: true, message: "请输入标准代码名称", trigger: "blur" }] |
|||
}); |
|||
const handleCodeClick = (row,index) => { |
|||
selectedRow.value=row |
|||
selectedRowIndex.value=index |
|||
if(form.value.codeMapId){ |
|||
mapVisible.value=true |
|||
}else { |
|||
proxy.$modal.msgWarning("请选择关联代码!"); |
|||
|
|||
} |
|||
console.log(index,'点击了标准代码名称', row); |
|||
}; |
|||
const handleSave2 =async () => { |
|||
const child = proxy.$refs.showCodeDialog; |
|||
console.log(child.selections,"父组件获取") |
|||
const mapList=child.selections |
|||
if(mapList.length!=1){ |
|||
proxy.$modal.msgWarning("请选择一条代码进行映射"); |
|||
|
|||
}else{ |
|||
const mapCodeItem=child.selections[0] |
|||
if (selectedRow.value) { |
|||
tableData.value[selectedRowIndex.value].codeMapId = mapCodeItem.id; |
|||
tableData.value[selectedRowIndex.value].codeMapName = mapCodeItem.codeName; |
|||
tableData.value[selectedRowIndex.value].codeMapNum = mapCodeItem.codeNum; |
|||
|
|||
tableData.value = [...tableData.value]; // This ensures reactivity is triggered |
|||
|
|||
mapVisible.value = false; |
|||
|
|||
proxy.$modal.msgSuccess("码值映射成功"); |
|||
|
|||
}} |
|||
}; |
|||
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) { |
|||
// 操作成功 |
|||
return true; |
|||
} else { |
|||
// 操作失败 |
|||
return false; |
|||
} |
|||
|
|||
} catch (error) { |
|||
console.error('保存时出错:', error); |
|||
// 这里可以弹出错误提示 |
|||
return false; // 出现异常时返回 false |
|||
} |
|||
}; |
|||
|
|||
const handleSelectionChange = (selection) => { |
|||
multiple.value = selection.length > 0; |
|||
}; |
|||
|
|||
|
|||
|
|||
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: '', codeMapId: '', |
|||
codeMapName: '', |
|||
codeMapNum: '', 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(); |
|||
getcompanyList() |
|||
}); |
|||
</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> |
@ -0,0 +1,222 @@ |
|||
<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'; |
|||
import { listStdCode,getStdCode} from "@/api/datastd/stdcode"; // 更新为新的接口 |
|||
|
|||
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> |
|||
|
|||
|
@ -0,0 +1,277 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="4" :xs="24"> |
|||
<div class="head-container"> |
|||
<el-input |
|||
v-model="dbResoursName" |
|||
placeholder="请输入字典分类" |
|||
clearable |
|||
prefix-icon="search" |
|||
style="margin-bottom: 20px" |
|||
/> |
|||
</div> |
|||
<div class="head-container"> |
|||
<el-tree |
|||
:data="dbResourceOptions" |
|||
:props="defaultProps" |
|||
:expand-on-click-node="false" |
|||
:filter-node-method="filterNode" |
|||
ref="tree" |
|||
node-key="id" |
|||
default-expand-all |
|||
highlight-current |
|||
@node-click="handleNodeClick" |
|||
> |
|||
<template #default="{ node, data }"> |
|||
<span class="custom-tree-node"> |
|||
<span>{{ data.name }}</span> |
|||
</span> |
|||
</template> |
|||
</el-tree> |
|||
</div> |
|||
</el-col> |
|||
|
|||
<el-col :span="20" :xs="24"> |
|||
<el-form :model="queryParams" ref="queryRef" :inline="true"> |
|||
<el-form-item label="字典编号" prop="dictNum"> |
|||
<el-input v-model="queryParams.dictNum" 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> |
|||
|
|||
<!-- 操作按钮 --> |
|||
<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="success" |
|||
plain |
|||
icon="Edit" |
|||
:disabled="single" |
|||
@click="handleEdit" |
|||
v-hasPermi="['meta:metaSecurityCol:edit']" |
|||
>修改</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"> |
|||
<el-table-column type="selection" width="55" align="center" /> |
|||
<el-table-column label="归属" align="center" prop="dictLevel" /> |
|||
<el-table-column label="类型" align="center" prop="dictType" /> |
|||
<el-table-column label="来源系统" width="150" align="center" prop="sysName" /> |
|||
<el-table-column label="字典编号" width="150" align="center" prop="dictNum" /> |
|||
<el-table-column label="字典英文名" width="120" align="center" prop="dictCode" /> |
|||
<el-table-column label="字典中文名" width="120" align="center" prop="dictName" /> |
|||
<el-table-column label="字典业务定义" width="120" align="center" prop="dictMenu" /> |
|||
<el-table-column label="数据类型" align="center" prop="dataType" /> |
|||
<el-table-column label="数据标准" align="center" prop="stdCode" /> |
|||
<el-table-column label="字典状态" align="center" prop="dictStatus" /> |
|||
<el-table-column label="业务认责部门" width="120" align="center" prop="bussDeptId" /> |
|||
<el-table-column label="业务认责人员" width="120" align="center" prop="bussUser" /> |
|||
<el-table-column label="技术认责部门" width="120" align="center" prop="techDeptId" /> |
|||
<el-table-column label="技术认责人员" width="120" align="center" prop="techUser" /> |
|||
<el-table-column label="更新者" width="120" align="center" prop="updateBy" /> |
|||
<el-table-column label="更新时间" width="120" align="center" prop="updateTime" /> |
|||
<el-table-column label="操作" align="center" width="180"> |
|||
<template #default="scope"> |
|||
<el-button @click="handleEdit(scope.row)" type="text" icon="Edit" /> |
|||
<el-button @click="handleRemove(scope.row)" type="text" icon="Delete" /> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 分页 --> |
|||
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="handlePagination" /> |
|||
</el-col> |
|||
</el-row> |
|||
<AddEditForm |
|||
:data="selectedRow" |
|||
:isEdit="isEdit" |
|||
:dbResourceOldList="dbResourceOldList" |
|||
v-model:visible="dialogVisible" |
|||
@refresh="getList" |
|||
/> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, reactive, onMounted, toRefs } from 'vue'; |
|||
import { listStdDict, addStdDict, getStdDict, updateStdDict, deleteStdDict } from "@/api/datastd/std"; // 更新为新的接口 |
|||
import { datasourcetree } from "@/api/meta/metatask"; |
|||
import AddEditForm from './AddEditForm.vue'; |
|||
const { proxy } = getCurrentInstance(); |
|||
|
|||
const queryParams = ref({ |
|||
dictNum: '', |
|||
dictName: '', |
|||
dictType: '', |
|||
sysName: '', |
|||
classId: 'dict', |
|||
sysId: '', |
|||
pageNum: 1, |
|||
pageSize: 10 |
|||
}); |
|||
const single = ref(true); |
|||
const multiple = ref(true); |
|||
const dbResoursName = ref(undefined); |
|||
const defaultProps = { children: "children", label: "name" }; |
|||
const dialogVisible = ref(false); |
|||
const selectedRow = ref(null); |
|||
const isEdit = ref(false); |
|||
const tableData = ref([]); |
|||
const total = ref(0); |
|||
const loading = ref(false); |
|||
const ids = ref([]); |
|||
const codeNums = ref([]); |
|||
|
|||
const dbResourceOptions = ref([]); |
|||
|
|||
const handlePagination = (pageNum, pageSize) => { |
|||
queryParams.value.pageNum = pageNum; |
|||
queryParams.value.pageSize = pageSize; |
|||
handleQuery(); |
|||
}; |
|||
|
|||
const filterNode = (value, data) => { |
|||
if (!value) return true; |
|||
return data.name.indexOf(value) !== -1; |
|||
}; |
|||
|
|||
const handleNodeClick = (data) => { |
|||
queryParams.value.sysId = data.id === 9999 ? undefined : data.id; |
|||
handleQuery(); |
|||
}; |
|||
|
|||
const handleSelectionChange = (selection) => { |
|||
single.value = selection.length !== 1; |
|||
multiple.value = !selection.length; |
|||
ids.value = selection.map(item => item.id); |
|||
codeNums.value = selection.map(item => item.dictNum); |
|||
|
|||
}; |
|||
|
|||
const getList = async () => { |
|||
loading.value = true; |
|||
const response = await listStdDict(queryParams.value); |
|||
tableData.value = response.rows; |
|||
total.value = response.total; |
|||
loading.value = false; |
|||
}; |
|||
|
|||
const handleQuery = () => { |
|||
queryParams.value.pageNum = 1; |
|||
getList(); |
|||
}; |
|||
|
|||
const resetQuery = () => { |
|||
queryParams.value = { |
|||
dictNum: '', |
|||
dictName: '', |
|||
dictType: '', |
|||
sysName: '', |
|||
sysId: undefined, |
|||
pageNum: 1, |
|||
pageSize: 10 |
|||
}; |
|||
getList(); |
|||
}; |
|||
|
|||
const handleRemove = (row) => { |
|||
const idsToDelete = row.id ? [row.id] : ids.value; |
|||
const codesToDelete = row.codeNum ? [row.codeNum] : codeNums.value; |
|||
proxy.$modal.confirm('是否确认删除字典编号为"' + codesToDelete.toString() + '"的数据项?').then(function () { |
|||
return deleteStdDict(idsToDelete.toString()); |
|||
}).then(() => { |
|||
handleQuery(); |
|||
proxy.$modal.msgSuccess("删除成功"); |
|||
}).catch(() => {}); |
|||
}; |
|||
const dbResourceOldList = ref([]); |
|||
|
|||
const handleAdd = () => { |
|||
console.log('update:visible', 111) |
|||
isEdit.value = false; |
|||
selectedRow.value={ |
|||
dictLevel: 'company', |
|||
sysId: undefined, |
|||
dictType: '', |
|||
dictNum: '', |
|||
dictCode: '', |
|||
dictName: '', |
|||
dictMenu: '', |
|||
dataType: '', |
|||
stdCode: '', |
|||
bussDeptId: '', |
|||
bussUser: '', |
|||
techDeptId: '', |
|||
techUser: '' |
|||
} |
|||
|
|||
// 清空选中的数据 |
|||
dialogVisible.value = true;}; |
|||
|
|||
const handleEdit = (row) => { |
|||
const id = row.id ?row.id: ids.value.toString() |
|||
getStdDict(id).then(response => { |
|||
selectedRow.value = response.data; |
|||
isEdit.value = true; |
|||
dialogVisible.value = true; |
|||
|
|||
}); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
datasourcetree().then(response => { |
|||
dbResourceOldList.value = response.rows; |
|||
dbResourceOptions.value = [ |
|||
{ id: 10000, name: "公司级字典", parentId: 0, children: [] }, |
|||
{ id: 99999, name: "系统级字典", parentId: 0, children: response.rows.map(element => ({ ...element, parentId: "99999" })) } |
|||
]; |
|||
}); |
|||
getList(); |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.app-container { |
|||
padding: 20px; |
|||
} |
|||
|
|||
.head-container { |
|||
margin-bottom: 0px; |
|||
} |
|||
|
|||
.custom-tree-node { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.custom-tree-node i { |
|||
margin-right: 8px; |
|||
} |
|||
</style> |
Loading…
Reference in new issue