9 changed files with 562 additions and 22 deletions
@ -0,0 +1,274 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<el-row :gutter="10" class="mb8"> |
|||
<el-form :inline="true" :model="queryForm"> |
|||
<el-row> |
|||
<el-form-item label="归属系统A"> |
|||
<el-select v-model="queryForm.aSsysId" placeholder="请选择系统" clearable allow-create filterable style="width: 180px"> |
|||
<el-option v-for="item in dsSysList" :key="item.id" :label="item.name" :value="item.id" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="模式名A"> |
|||
<el-input v-model="queryForm.aMdlName" placeholder="请输入模式名" clearable /> |
|||
</el-form-item> |
|||
</el-row> |
|||
<el-row> |
|||
<el-form-item label="归属系统B"> |
|||
<el-select v-model="queryForm.bSsysId" placeholder="请选择系统" clearable allow-create filterable style="width: 180px"> |
|||
<el-option v-for="item in dsSysList" :key="item.id" :label="item.name" :value="item.id" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="模式名B"> |
|||
<el-input v-model="queryForm.bMdlName" placeholder="请输入模式名" clearable /> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button> |
|||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
|||
</el-form-item> |
|||
</el-row> |
|||
</el-form> |
|||
</el-row> |
|||
<el-row :gutter="10" class="mb8"> |
|||
<el-col :span="1.5"> |
|||
<el-button type="primary" plain icon="Plus" @click="openAddDialog1">新增</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button type="success" plain icon="Edit" :disabled="selectedRows1.length !== 1" @click="openEditDialog1(selectedRows1[0])">修改</el-button> |
|||
</el-col> |
|||
<el-col :span="1.5"> |
|||
<el-button type="danger" plain icon="Delete" :disabled="selectedRows1.length === 0" @click="deleteSelected1">删除</el-button> |
|||
</el-col> |
|||
</el-row> |
|||
<el-table v-loading="loading" :data="configList1" @selection-change="handleSelectionChange1" style="width: 100%" height="400" border stripe> |
|||
<el-table-column type="selection" width="55" /> |
|||
<el-table-column prop="aSsysCd" label="所属系统A" /> |
|||
<el-table-column prop="aMdlName" label="模式名A" /> |
|||
<el-table-column prop="bSsysCd" label="所属系统B" /> |
|||
<el-table-column prop="bMdlName" label="模式名B" /> |
|||
<el-table-column prop="relaType" label="类型" /> |
|||
<el-table-column prop="ratio" label="阈值" /> |
|||
<el-table-column prop="updBy" label="更新人" /> |
|||
<el-table-column prop="updTime" label="更新时间" /> |
|||
</el-table> |
|||
<el-dialog :title="title" v-model="open1" width="500px" append-to-body :before-close="handleClose1"> |
|||
<el-form ref="clasFormRef1" :model="form1" :rules="rules1" label-width="120px" > |
|||
<el-form-item label="类型" prop="datatype"> |
|||
<el-input v-model="form1.relaType" autocomplete="off" /> |
|||
</el-form-item> |
|||
<el-form-item label="阈值" prop="ratio"> |
|||
<el-input |
|||
v-model="form1.ratio" |
|||
:formatter="formatNumber" |
|||
:parser="parseNumber" |
|||
placeholder="只能输入数字" |
|||
></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="所属系统A" prop="ssysId"> |
|||
<el-select v-model="form1.aSsysId" placeholder="请选择系统" clearable allow-create filterable style="width: 350px"> |
|||
<el-option v-for="item in dsSysList" :key="item.id" :label="item.name" :value="item.id" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="所属模式A" prop="mdlName"> |
|||
<el-input v-model="form1.aMdlName" autocomplete="off" /> |
|||
</el-form-item> |
|||
<el-form-item label="所属系统B" prop="ssysId"> |
|||
<el-select v-model="form1.bSsysId" placeholder="请选择系统" clearable allow-create filterable style="width: 350px"> |
|||
<el-option v-for="item in dsSysList" :key="item.id" :label="item.name" :value="item.id" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="所属模式B" prop="mdlName"> |
|||
<el-input v-model="form1.bMdlName" autocomplete="off" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<el-button @click="open1 = false">取消</el-button> |
|||
<el-button type="primary" @click="submitForm1">保存</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
|
|||
<script setup> |
|||
import { ref, reactive, onMounted } from "vue"; |
|||
import { ElMessageBox, ElMessage } from "element-plus"; |
|||
import { |
|||
deleteTableRelaLabel, |
|||
editTableRelaLabel, |
|||
addTableRelaLabel, |
|||
getTableRelaLabelList, |
|||
} from "@/api/metadataConfig/metadataConfig"; |
|||
import useUserStore from '@/store/modules/user'; // 注意路径是否正确 |
|||
|
|||
const userStore = useUserStore(); // 正确调用 |
|||
const dsSysList = userStore.dsSysList; // 访问属性 |
|||
const queryForm = reactive({ |
|||
aSsysId: undefined, |
|||
bSsysId: undefined, |
|||
aMdlName: "", |
|||
bMdlName: "", |
|||
}); |
|||
const activeTab = ref('valueType'); |
|||
const configList1 = ref([]); // 值类型参数数据 |
|||
const loading = ref(false); |
|||
|
|||
const open1 = ref(false); // 值类型弹窗开关 |
|||
const title = ref(""); |
|||
|
|||
const clasFormRef1 = ref(null); // 值类型 formRef |
|||
|
|||
const form1 = ref({ |
|||
relaType: "", |
|||
ratio: null, |
|||
aSsysId: undefined, |
|||
bSsysId: undefined, |
|||
aMdlName: "", |
|||
bMdlName: "", |
|||
}); |
|||
|
|||
const rules1 = { |
|||
relaType: [{ required: true, message: "请输入值类型", trigger: "blur" }], |
|||
ratio: [{ required: true, message: "请输入阈值", trigger: "blur" }], |
|||
}; |
|||
|
|||
const selectedRows1 = ref([]); |
|||
const formatNumber = (value) => { |
|||
if (!value) return value; |
|||
value = value.replace(/[^\d.-]/g, ''); // 移除非数字、非小数点、非负号 |
|||
value = value.replace(/^\./, '0.'); // 以.开头转为0. |
|||
value = value.replace(/^\-/, '-0'); // 以-开头转为-0(可选) |
|||
value = value.replace(/(\.\d{2})\d+/, '$1'); // 限制小数点后两位 |
|||
value = value.replace(/^(-?\d+)-/, '$1'); // 防止中间出现负号 |
|||
value = value.replace(/^(-?\d+)\.(\d*)\.*/, '$1.$2'); // 防止多个小数点 |
|||
return value; |
|||
}; |
|||
|
|||
const parseNumber = (value) => { |
|||
return formatNumber(value); |
|||
}; |
|||
function handleSelectionChange1(val) { |
|||
selectedRows1.value = val; |
|||
} |
|||
async function getList1() { |
|||
loading.value = true; |
|||
try { |
|||
const res = await getTableRelaLabelList(queryForm); |
|||
configList1.value = res.data || []; |
|||
if (configList1.value.length>0) { |
|||
for (let i = 0; i < configList1.value.length; i++) { |
|||
configList1.value[i].aSsysCd = '*' |
|||
if (configList1.value[i].aMdlName === ''){ |
|||
configList1.value[i].aMdlName = '*' |
|||
} |
|||
configList1.value[i].bSsysCd = '*' |
|||
if (configList1.value[i].bMdlName === ''){ |
|||
configList1.value[i].bMdlName = '*' |
|||
} |
|||
for (let j = 0; j < dsSysList.length; j++) { |
|||
if (configList1.value[i].aSsysId === dsSysList[j].id){ |
|||
configList1.value[i].aSsysCd = dsSysList[j].name |
|||
} |
|||
if (configList1.value[i].bSsysId === dsSysList[j].id){ |
|||
configList1.value[i].bSsysCd = dsSysList[j].name |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} catch (error) { |
|||
ElMessage.error("获取值类型列表失败"); |
|||
} finally { |
|||
loading.value = false; |
|||
} |
|||
} |
|||
|
|||
function resetQuery() { |
|||
queryForm.aSsysId = undefined; |
|||
queryForm.bSsysId = undefined; |
|||
queryForm.aMdlName = ""; |
|||
queryForm.bMdlName = ""; |
|||
getList1(); |
|||
} |
|||
|
|||
function handleSearch() { |
|||
getList1(); |
|||
} |
|||
|
|||
function openAddDialog1() { |
|||
title.value = "新增表关系类型参数"; |
|||
open1.value = true; |
|||
form1.value = { |
|||
relaType: "", |
|||
ratio: null, |
|||
aSsysId: queryForm.aSsysId, |
|||
bSsysId: queryForm.bSsysId, |
|||
aMdlName: queryForm.aMdlName, |
|||
bMdlName: queryForm.bMdlName, |
|||
} |
|||
} |
|||
|
|||
function openEditDialog1(row) { |
|||
if (!row) { |
|||
ElMessage.warning("请选择一条记录进行编辑"); |
|||
return; |
|||
} |
|||
title.value = "编辑表关系类型参数"; |
|||
Object.assign(form1.value, row); |
|||
open1.value = true; |
|||
} |
|||
|
|||
function submitForm1() { |
|||
clasFormRef1.value.validate(async (valid) => { |
|||
if (!valid) return; |
|||
const submitData = { ...form1.value}; |
|||
try { |
|||
if (title.value.includes("新增")) { |
|||
await addTableRelaLabel(submitData); |
|||
ElMessage.success("新增成功"); |
|||
} else { |
|||
await editTableRelaLabel(submitData); |
|||
ElMessage.success("编辑成功"); |
|||
} |
|||
open1.value = false; |
|||
await getList1(); |
|||
} catch (error) { |
|||
ElMessage.error("操作失败,请重试"); |
|||
} |
|||
}); |
|||
} |
|||
function deleteSelected1() { |
|||
if (selectedRows1.value.length === 0) { |
|||
ElMessage.warning("请至少选择一条记录删除"); |
|||
return; |
|||
} |
|||
ElMessageBox.confirm( |
|||
`确定删除选中的 ${selectedRows1.value.length} 条表关系类型参数吗?`, |
|||
"提示", |
|||
{ type: "warning" } |
|||
).then(async () => { |
|||
try { |
|||
for (const row of selectedRows1.value) { |
|||
await deleteTableRelaLabel(row.onum); |
|||
} |
|||
ElMessage.success("删除成功"); |
|||
await getList1(); |
|||
} catch { |
|||
ElMessage.error("删除失败,请重试"); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function handleClose1(done) { |
|||
clasFormRef1.value.resetFields(); |
|||
done(); |
|||
} |
|||
|
|||
onMounted(async () => { |
|||
await getList1(); |
|||
}); |
|||
</script> |
|||
<style scoped> |
|||
.app-container { |
|||
padding: 20px; |
|||
background: #fff; |
|||
} |
|||
</style> |
Loading…
Reference in new issue