列表新增修改弹窗,删除
新增编辑弹窗
html:
点击新增编辑按钮,出现弹窗,进行新增和编辑列表数据
<div style=" display: flex; justify-content: flex-end; flex-wrap: wrap; padding: 20px; " >
<a-button type="primary" @click="addList">新增</a-button>
</div>
<a-table
:columns="columns"
:data-source="searchForm.tableData"
:pagination="pagination"
@change="handleTableChange"
:loading="tableLoading"
rowKey="id"
style="padding-right: 10px"
>
<template #index="{ index }">{
{ index + 1 }}</template>
<template #action="{ record }">
<a href="javascript:void(0)" @click="toManagementPage(record)"
>指标管理</a
>
<a href="javascript:void(0)" @click="editList(record)">编辑模板</a>
<a href="javascript:void(0)" @click="removeList(record)">删除</a>
</template>
</a-table>
html:
:destroyOnClose="true"这个是元素销毁,弹窗关闭,校验也关闭
:footer="null"把弹窗原有的确定取消按钮去掉
<a-modal
v-model:visible="addVisible"
:title="
submitDialogText === '1' ? '新增指标体系模版' : '编辑指标体系模版'
"
:footer="null"
:afterClose="afterClose"
class="ruleFormDialog"
:destroyOnClose="true"
>
<a-form
ref="ruleForms"
:model="submitForm"
:rules="rules"
:label="{ span: 12, offset: 24 }"
layout="horizontal"
style="padding: 0 10px"
class="ruleFormDialog"
>
<a-row :gutter="24">
<a-col :span="24">
<a-form-item ref="name" label="模版名称:" name="name">
<a-input
v-model:value="submitForm.name"
placeholder="请输入模版名称"
/>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item label="模版说明:" name="explain">
<a-textarea
v-model:value="submitForm.explain"
placeholder="请输入模版说明"
allowClear
/>
</a-form-item>
</a-col>
</a-row>
<div class="footButton">
<a-button type="primary" @click="onSubmit">提交</a-button>
<a-button style="margin-left: 60px" @click="afterClose"
>取消</a-button
>
</div>
</a-form>
</a-modal>
js:
import {
submitForms,
rule,
} from "./EvaluateListJson"
setup() {
//弹窗
const addVisible = ref(false);
let submitForm = reactive(submitForms)
//校验
const ruleForms = ref();
let rules = reactive(rule)
//判断新增编辑按钮
let submitDialogText = ref("")
//新增
const addList = () => {
addVisible.value = true;
submitDialogText.value = '1'
getTargetTemplatePage()
}
//新增提交
const addTargetTemplate = () => {
post(API.ability.addTargetTemplate, {
params: {
name: submitForm.name,
templateDescription: submitForm.explain
}
})
.then(() => {
addVisible.value = false;
afterClose()
getTargetTemplatePage()
message.success('添加成功');
})
.catch((res) => {
addVisible.value = false;
message.error(res);
});
}
//编辑
const editList = (record) => {
addVisible.value = true;
submitDialogText.value = '2'
getGroup(record)
}
//获取详情信息
const getGroup = (record) => {
console.log(record)
submitForm.id = record.id;
submitForm.name = record.name;
submitForm.explain = record.templateDescription;
}
//编辑
const editTargetTemplate = () => {
post(API.ability.editTargetTemplate, {
params: {
id: submitForm.id,
name: submitForm.name,
templateDescription: submitForm.explain
}
})
.then(() => {
addVisible.value = false;
search()
afterClose()
message.success('修改成功');
})
.catch((res) => {
addVisible.value = false;
message.error(res);
});
}
//提交
const onSubmit = () => {
console.log("弹窗提交")
ruleForms.value
.validate()
.then(() => {
if (submitDialogText.value === '1') {
addTargetTemplate()
} else if (submitDialogText.value === '2') {
editTargetTemplate()
}
})
}
//关闭弹窗之后的回调
const afterClose = () => {
addVisible.value = false
submitForm.name = "";
submitForm.explain = "";
}
return {
//新增弹窗
addList,
addVisible,
submitForm,
ruleForms, //校验
onSubmit,
rules,
afterClose, //关闭弹窗
submitDialogText, //判断新增编辑
editList, //编辑
removeList, //删除
toManagementPage, //跳转到体系内容页面
}
}
json.js (EvaluateListJson.js文件,上面已引入)
export let submitForms = {
id: "",
name: "",
explain:""
}
export let rule = {
name: [{
required: true,
message: '请输入模板名称',
trigger: 'blur'
}]
}
删除:
const removeList = (record) => {
modal.confirm({
title: '确认删除?',
icon: createVNode(ExclamationCircleOutlined),
content: createVNode('div', {
style: 'color:red;font-size:12px'
}, '请谨慎操作'),
onOk() {
console.log('ok');
delTargetTemplate(record.id)
},
onCancel() {
console.log('Cancel');
},
class: 'test',
});
}
const delTargetTemplate = (id) => {
post(API.ability.delTargetTemplate, {
params: {
id: id
}
})
.then(() => {
message.success("删除成功")
getTargetTemplatePage()
})
.catch((res) => {
message.error(res);
});
}