Skip to content

Q
qr-consistency-vue3
Commit 06b886db authored by ZhangRunSong's avatar ZhangRunSong
Browse files
Options

feat：模板管理新增参数

parent 598cd7de
Show whitespace changes
Inline Side-by-side
Showing with 346 additions and 3 deletions
src/api/system/controlPlan.js
View file @ 06b886db
...@@ -43,10 +43,19 @@ export function editTemplateDetail(form) { ...@@ -43,10 +43,19 @@ export function editTemplateDetail(form) {
/** /**
* 修改参数 * 修改参数
*/ */
export function deleteTemplateDetail(ids) { export function deleteTemplateDetail(id) {
return request({ return request({
url: '/control/template/template-detail', url: '/control/template/template-detail/' + id,
method: 'delete', method: 'delete',
params: {ids}, })
}
/**
* 新增参数
*/
export function addTemplateDetail(data) {
return request({
url: '/control/template/template-detail',
method: 'post',
params: data,
}) })
} }
\ No newline at end of file
src/views/controlPlan/baseConfig/fillTemplate/edit.vue 0 → 100644
View file @ 06b886db
<template>
<div class="app-container">
<div class="component-selector">
<div class="top-header">
<el-button class="back-button" @click="handleBack">
<span class="back-icon"></span>
返回
</el-button>
<div class="button-group">
<el-button
type="primary"
@click="handleAdd"
v-hasPermi="['system:post:add']">
新增参数
</el-button>
<el-button
type="danger"
:disabled="selectedRows.length === 0"
@click="handleDelete"
v-hasPermi="['system:post:remove']">
批量删除参数
</el-button>
</div>
</div>
<el-tabs v-model="activeTab" class="demo-tabs">
<el-tab-pane
v-for="(item, index) in formList"
:key="index"
:label="item.formName"
:name="item.id">
<component>
<el-table
v-loading="loading"
:data="templateDetailList"
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="序号" width="55" align="center" prop="seq" />
<el-table-column label="参数组" align="center" prop="parameterGroup" />
<el-table-column label="参数项" align="center" prop="parameterItem" />
<el-table-column label="参数值类型" align="center" prop="parameterValueType" />
<el-table-column label="显示方式" align="center" prop="displayMethod" />
<el-table-column label="填写方式" align="center" prop="fillMethod"/>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button
v-hasPermi="['system:post:edit']"
link
type="primary"
@click="handleEdit(scope.row)"
>编辑参数</el-button>
<el-button
v-hasPermi="['system:post:edit']"
link
type="danger"
@click="handleDelete(scope.row)"
>删除参数</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
:total="total"
@pagination="handlePagination"
/>
</component>
</el-tab-pane>
</el-tabs>
<el-dialog
v-model="dialogVisible"
custom-class="right-dialog"
:title="`(${activeFormName}) - ${isEditMode ? '编辑' : '新增'}参数`"
width="600px"
>
<el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
<el-form-item label="参数组：" prop="parameterGroup">
<el-input
v-model="form.parameterGroup"
placeholder="请输入"
clearable
/>
</el-form-item>
<el-form-item label="参数项：" prop="parameterItem" required>
<el-input
v-model="form.parameterItem"
placeholder="请输入参数项"
clearable
/>
</el-form-item>
<el-form-item label="参数值类型：" prop="parameterValueType" required>
<el-select
v-model="form.parameterValueType"
placeholder="请选择"
style="width: 100%"
>
<el-option label="文本框" value="文本框" />
<el-option label="文本域" value="文本域" />
<el-option label="下拉框" value="文本域" />
</el-select>
</el-form-item>
<el-form-item label="显示方式：" prop="displayMethod" required>
<el-select
v-model="form.displayMethod"
placeholder="请选择"
style="width: 100%"
>
<el-option label="显示" value="显示" />
<el-option label="隐藏" value="隐藏" />
</el-select>
</el-form-item>
<el-form-item label="填写方式：" prop="fillMethod" required>
<el-select
v-model="form.fillMethod"
placeholder="请选择"
style="width: 100%"
>
<el-option label="整行" value="整行" />
<el-option label="单列" value="单列" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit">确定</el-button>
</template>
</el-dialog>
</div>
</div>
</template>
<script setup>
import {editTemplateDetail, listTemplateDetail, listTemplateForm,deleteTemplateDetail,addTemplateDetail} from '@/api/system/controlPlan.js'
const { proxy } = getCurrentInstance();
import { ref, getCurrentInstance } from 'vue'
import {ElMessageBox} from "element-plus";
const isEditMode = ref(false) // true为编辑，false为新增
const total = ref(0)
const formList = ref([])
const activeTab = ref(null) // 默认激活第一个标签页
const templateDetailList = ref([])
const single = ref(true);
const multiple = ref(true);
const selectedRows = ref([])
const queryParams = ref({
pageNum: 1,
pageSize: 10
})
const dialogVisible = ref(false)
const formRef = ref(null)
const activeFormName = ref('') // 当前激活的表单名称
const form = ref({
createBy:'',
createTime:'',
updateBy:'',
updateTime:'',
remark:'',
id:'',
delFlag:'',
formId:'',
templateId:'',
seq:'',
parameterGroup: '',
parameterItem: '',
parameterValueType: '',
displayMethod: '',
fillMethod: '',
isAllocationBasis:''
})
// 表单验证规则
const rules = ref({
parameterItem: [
{ required: true, message: '参数名不能为空', trigger: 'blur' },
],
parameterValueType: [
{ required: true, message: '文本框不能为空', trigger: 'blur' },
],
displayMethod: [
{ required: true, message: '显示方式不能为空', trigger: 'blur' },
],
fillMethod: [
{ required: true, message: '填写方式不能为空', trigger: 'blur' },
]
})
// 新增选择事件
const handleSelectionChange = (selection) => {
selectedRows.value = selection.map(item => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
watch(activeTab, (newVal) => {
queryParams.value.pageNum = 1 // 切换标签时重置页码
getList(newVal)
})
const handlePagination = ({ page, limit }) => {
queryParams.value.pageNum = page
queryParams.value.pageSize = limit
getList(activeTab.value)
}
// 新增按钮方法
const handleAdd = () => {
isEditMode.value = false
const activeForm = formList.value.find(item => item.id === activeTab.value)
activeFormName.value = activeForm?.formName || ''
// 初始化表单数据（保持与修改一致的字段结构）
form.value = {
formId: activeTab.value,
parameterGroup: '',
parameterItem: '',
parameterValueType: '',
displayMethod: '',
fillMethod: '',
templateId: proxy.$route.query.id
}
dialogVisible.value = true
}
const handleBack = () => {
proxy.$router.push({ path: '/control/baseConfig/fill'});
}
const handleEdit = (row) => {
isEditMode.value = true; // 明确标记为编辑模式
const activeForm = formList.value.find(item => item.id === activeTab.value);
activeFormName.value = activeForm?.formName || '';
form.value = { ...row };
dialogVisible.value = true;
};
// 统一提交方法
const handleSubmit = () => {
formRef.value.validate(valid => {
if (valid) {
const apiMethod = isEditMode.value ? editTemplateDetail : addTemplateDetail
apiMethod(form.value).then(response => {
if (response.code === 200) {
proxy.$modal.msgSuccess(isEditMode.value ? "修改成功" : "新增成功")
dialogVisible.value = false
// 新增后重置页码到第一页
if (!isEditMode.value) queryParams.value.pageNum = 1
getList(activeTab.value)
} else {
proxy.$modal.msgError(response.msg || "操作失败")
}
}).catch(() => {})
}
})
}
// 监听弹窗关闭事件
watch(dialogVisible, (val) => {
if (!val) {
formRef.value?.resetFields()
}
})
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || selectedRows.value;
proxy.$modal.confirm('是否确认删除备案参数总编号为"' + _ids + '"的数据项？').then(function() {
return deleteTemplateDetail(_ids);
}).then(() => {
getList(activeTab.value);
proxy.$modal.msgSuccess("删除成功");
}).catch(() => {});
}
function getFrom() {
const id = proxy.$route.query.id
listTemplateForm(id).then(response => {
formList.value = response.data
if (formList.value.length > 0) {
activeTab.value = formList.value[0].id // 默认第一个标签的id
getList(formList.value[0].id) // 初始化加载第一个标签的数据
}
})
}
function getList(formId){
listTemplateDetail({
id: formId,
pageNum: queryParams.value.pageNum,
pageSize: queryParams.value.pageSize
}).then(response => {
templateDetailList.value = response.rows
total.value = response.total
})
}
onMounted(() => {
getFrom();
})
</script>
<style scoped lang="scss">
.button-group {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-bottom: 16px;
.el-button {
height: 32px;
padding: 8px 15px;
}
}
::v-deep .el-dialog__body {
padding: 20px;
.el-form-item {
margin-bottom: 18px;
.el-input__inner,
.el-select {
height: 32px;
line-height: 32px;
}
}
}
.top-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment