列表新增修改弹窗

新增编辑弹窗

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
		    >
		    &nbsp;&nbsp;
		    <a href="javascript:void(0)" @click="editList(record)">编辑模板</a>
		    &nbsp;&nbsp;
		    <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);
        });
}