7 changed files with 571 additions and 3 deletions
@ -0,0 +1,293 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<el-row :gutter="10" class="mb8"> |
||||
|
<el-form :inline="true" :model="queryForm" > |
||||
|
<el-form-item label="唯一编号"> |
||||
|
<el-input v-model="queryForm.onum" placeholder="请输入唯一编号" clearable /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="等级名称"> |
||||
|
<el-input v-model="queryForm.secLevelName" 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-form> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row :gutter="10" class="mb8"> |
||||
|
<el-col :span="1.5"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
plain |
||||
|
icon="Plus" |
||||
|
@click="openAddDialog" |
||||
|
>新增</el-button> |
||||
|
</el-col> |
||||
|
<el-col :span="1.5"> |
||||
|
<el-button |
||||
|
type="success" |
||||
|
plain |
||||
|
icon="Edit" |
||||
|
:disabled="selectedRows.length !== 1" |
||||
|
@click="openEditDialog(selectedRows[0])" |
||||
|
>修改</el-button> |
||||
|
</el-col> |
||||
|
<el-col :span="1.5"> |
||||
|
<el-button |
||||
|
type="danger" |
||||
|
plain |
||||
|
icon="Delete" |
||||
|
:disabled="selectedRows.length === 0" |
||||
|
@click="deleteSelected" |
||||
|
>删除</el-button> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-table |
||||
|
v-loading="loading" |
||||
|
:data="secList" |
||||
|
@selection-change="handleSelectionChange" |
||||
|
style="width: 100%" |
||||
|
border |
||||
|
stripe |
||||
|
> |
||||
|
<el-table-column type="selection" width="55" /> |
||||
|
<el-table-column prop="secLevelSummary" label="等级简称" /> |
||||
|
|
||||
|
<el-table-column prop="secLevelName" label="等级名称" /> |
||||
|
<el-table-column prop="secLevelDesc" label="等级说明"/> |
||||
|
<el-table-column prop="secEffFlag" label="有效标志"> |
||||
|
<template #default="{ row }"> |
||||
|
<el-tag :type="row.secEffFlag === '1' ? 'success' : 'info'"> |
||||
|
{{ row.secEffFlag === '1' ? '有效' : '无效' }} |
||||
|
</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="updTime" label="更新时间" width="180" /> |
||||
|
|
||||
|
</el-table> |
||||
|
|
||||
|
<pagination |
||||
|
v-show="total > 0" |
||||
|
:total="total" |
||||
|
v-model:page="queryForm.pageNum" |
||||
|
v-model:limit="queryForm.pageSize" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
|
||||
|
<el-dialog |
||||
|
:title="title" |
||||
|
v-model="open" |
||||
|
width="550px" |
||||
|
append-to-body |
||||
|
:before-close="handleClose" |
||||
|
> |
||||
|
<el-form |
||||
|
ref="secFormRef" |
||||
|
:model="form" |
||||
|
:rules="rules" |
||||
|
label-width="120px" |
||||
|
size="small" |
||||
|
> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<el-form-item label="等级简称" prop="secLevelSummary"> |
||||
|
<el-input v-model="form.secLevelSummary" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="等级名称" prop="secLevelName"> |
||||
|
<el-input v-model="form.secLevelName" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="等级说明" prop="secLevelDesc"> |
||||
|
<el-input type="textarea" v-model="form.secLevelDesc" autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="有效标志" prop="secEffFlag"> |
||||
|
<el-select v-model="form.secEffFlag" placeholder="请选择有效标志"> |
||||
|
<el-option label="有效" value="1" /> |
||||
|
<el-option label="无效" value="0" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
</el-form> |
||||
|
|
||||
|
<template #footer> |
||||
|
<el-button @click="open = false">取消</el-button> |
||||
|
<el-button type="primary" @click="submitForm">保存</el-button> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, reactive, onMounted } from 'vue' |
||||
|
import { ElMessageBox, ElMessage } from 'element-plus' |
||||
|
import { |
||||
|
listMetadataSec, |
||||
|
addMetadataSec, |
||||
|
updateMetadataSec, |
||||
|
delMetadataSec |
||||
|
} from '@/api/metadataConfig/metadataConfig' |
||||
|
const queryForm = reactive({ |
||||
|
onum: '', |
||||
|
secLevelName: '', |
||||
|
pageNum: 1, |
||||
|
pageSize: 10 |
||||
|
}) |
||||
|
|
||||
|
const secList = ref([]) |
||||
|
const total = ref(0) |
||||
|
const loading = ref(false) |
||||
|
const open = ref(false) |
||||
|
const title = ref('') |
||||
|
|
||||
|
const secFormRef = ref(null) |
||||
|
|
||||
|
const form = reactive({ |
||||
|
onum: '', |
||||
|
secEffFlag: '', |
||||
|
recSubmPrsn: '', |
||||
|
updTime: '', |
||||
|
secLevelName: '', |
||||
|
secLevelDesc: '', |
||||
|
secLevelSummary: '' |
||||
|
}) |
||||
|
|
||||
|
const rules = { |
||||
|
secEffFlag: [{ required: true, message: '请选择有效标志', trigger: 'change' }], |
||||
|
secLevelName: [{ required: true, message: '请输入等级名称', trigger: 'blur' }] |
||||
|
} |
||||
|
|
||||
|
const selectedRows = ref([]) |
||||
|
|
||||
|
function handleSelectionChange(val) { |
||||
|
selectedRows.value = val |
||||
|
} |
||||
|
|
||||
|
async function getList() { |
||||
|
loading.value = true |
||||
|
try { |
||||
|
const res = await listMetadataSec(queryForm) |
||||
|
secList.value = res.rows || [] |
||||
|
total.value = res.total || 0 |
||||
|
} catch (error) { |
||||
|
ElMessage.error('获取列表失败,请重试') |
||||
|
} finally { |
||||
|
loading.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function resetQuery() { |
||||
|
queryForm.onum = '' |
||||
|
queryForm.secLevelName = '' |
||||
|
queryForm.pageNum = 1 |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
function handleSearch() { |
||||
|
queryForm.pageNum = 1 |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
function openAddDialog() { |
||||
|
title.value = '新增等级信息' |
||||
|
Object.assign(form, { |
||||
|
onum: '', |
||||
|
secEffFlag: '', |
||||
|
recSubmPrsn: '', |
||||
|
updTime: '', |
||||
|
secLevelName: '', |
||||
|
secLevelDesc: '', |
||||
|
secLevelSummary: '' |
||||
|
}) |
||||
|
open.value = true |
||||
|
} |
||||
|
|
||||
|
function openEditDialog(row) { |
||||
|
if (!row) { |
||||
|
ElMessage.warning('请选择一条记录进行编辑') |
||||
|
return |
||||
|
} |
||||
|
title.value = '编辑等级信息' |
||||
|
Object.assign(form, row) |
||||
|
open.value = true |
||||
|
} |
||||
|
|
||||
|
function submitForm() { |
||||
|
secFormRef.value.validate(async (valid) => { |
||||
|
if (!valid) return |
||||
|
const submitData = { ...form } |
||||
|
delete submitData.updTime // updTime一般后端自动处理 |
||||
|
|
||||
|
try { |
||||
|
if (title.value.includes('新增')) { |
||||
|
await addMetadataSec(submitData) |
||||
|
ElMessage.success('新增成功') |
||||
|
} else { |
||||
|
await updateMetadataSec(submitData) |
||||
|
ElMessage.success('编辑成功') |
||||
|
} |
||||
|
open.value = false |
||||
|
getList() |
||||
|
} catch (error) { |
||||
|
ElMessage.error('操作失败,请重试') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
function deleteRow(onum) { |
||||
|
ElMessageBox.confirm('确定删除该等级信息吗?', '提示', { type: 'warning' }) |
||||
|
.then(async () => { |
||||
|
try { |
||||
|
await delMetadataSec(onum) |
||||
|
ElMessage.success('删除成功') |
||||
|
getList() |
||||
|
} catch (error) { |
||||
|
ElMessage.error('删除失败,请重试') |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
} |
||||
|
|
||||
|
function deleteSelected() { |
||||
|
if (selectedRows.value.length === 0) { |
||||
|
ElMessage.warning('请至少选择一条记录删除') |
||||
|
return |
||||
|
} |
||||
|
ElMessageBox.confirm(`确定删除选中的 ${selectedRows.value.length} 条等级信息吗?`, '提示', { type: 'warning' }) |
||||
|
.then(async () => { |
||||
|
try { |
||||
|
for (const row of selectedRows.value) { |
||||
|
await delMetadataSec(row.onum) |
||||
|
} |
||||
|
ElMessage.success('删除成功') |
||||
|
getList() |
||||
|
} catch (error) { |
||||
|
ElMessage.error('删除失败,请重试') |
||||
|
} |
||||
|
}) |
||||
|
.catch(() => {}) |
||||
|
} |
||||
|
|
||||
|
function handleClose(done) { |
||||
|
secFormRef.value.resetFields() |
||||
|
done() |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
getList() |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.app-container { |
||||
|
padding: 20px; |
||||
|
} |
||||
|
.mb8 { |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue