sifa-admin/src/views/law/lawNotaryConfig/components/lawNotaryConfigEdit.vue

<!-- 编辑弹窗 -->
<template>
    <ele-modal
        :width="800"
        :visible="visible"
        :maskClosable="false"
        :maxable="maxable"
        :title="isUpdate ? '编辑公证配置' : '添加公证配置'"
        :body-style="{ paddingBottom: '28px' }"
        @update:visible="updateVisible"
        @ok="save"
    >
        <a-form
            ref="formRef"
            :model="form"
            :rules="rules"
            :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
            :wrapper-col="
        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
      "
        >
            <a-form-item label="分类" name="type">
                <a-input
                    allow-clear
                    placeholder="请输入分类"
                    v-model:value="form.type"
                />
            </a-form-item>
            <a-form-item label="名称" name="title">
                <a-input
                    allow-clear
                    placeholder="请输入"
                    v-model:value="form.title"
                />
            </a-form-item>
            <a-form-item label="证明材料配置" name="configList">
                <div v-for="(item, index) in configList" :key="index" style="margin-bottom: 1rem">
                    <a-space>
                        <a-input
                            allow-clear
                            placeholder="请输入"
                            v-model:value="configList[index]"
                            style="width: 400px"
                        >
                            <template #addonBefore>材料名称</template>
                        </a-input>
                        <a-button type="primary" danger @click="removeConfig(index)">删除</a-button>
                    </a-space>
                </div>
                <a-button type="primary" @click="addConfig">添加</a-button>
            </a-form-item>
        </a-form>
    </ele-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
import { Form, message } from "ant-design-vue";
import { assignObject } from "ele-admin-pro";
import { addLawNotaryConfig, updateLawNotaryConfig } from "@/api/law/lawNotaryConfig";
import { LawNotaryConfig } from "@/api/law/lawNotaryConfig/model";
import { useThemeStore } from "@/store/modules/theme";
import { storeToRefs } from "pinia";
import { FormInstance } from "ant-design-vue/es/form";

// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);

const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 修改回显的数据
    data?: LawNotaryConfig | null;
}>();

const emit = defineEmits<{
    (e: "done"): void;
    (e: "update:visible", visible: boolean): void;
}>();

// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);

// 用户信息
const form = reactive<LawNotaryConfig>({
    id: undefined,
    title: undefined,
    type: undefined,
    configList: undefined,
    userId: undefined,
    deleted: undefined,
    tenantId: undefined,
    createTime: undefined,
    updateTime: undefined
});

/* 更新visible */
const updateVisible = (value: boolean) => {
    emit("update:visible", value);
};

// 表单验证规则
const rules = reactive({
    title: [
        { required: true, message: "请输入名称", trigger: "blur" }
    ],
    type: [
        { required: true, message: "请输入分类", trigger: "blur" }
    ]
});

const configList = ref<any[]>([]);
const addConfig = () => {
    configList.value.push("");
};
const removeConfig = (index: number) => {
    configList.value.splice(index, 1);
};

const { resetFields } = useForm(form, rules);

/* 保存编辑 */
const save = () => {
    if (!formRef.value) {
        return;
    }
    formRef.value
        .validate()
        .then(() => {
            loading.value = true;
            const formData = {
                ...form
            };
            if (configList.value) {
                formData.configList = JSON.stringify(configList.value.filter((item) => !!item));
            }
            const saveOrUpdate = isUpdate.value ? updateLawNotaryConfig : addLawNotaryConfig;
            saveOrUpdate(formData)
                .then((msg) => {
                    loading.value = false;
                    message.success(msg);
                    updateVisible(false);
                    emit("done");
                })
                .catch((e) => {
                    loading.value = false;
                    message.error(e.message);
                });
        })
        .catch(() => {
        });
};

watch(
    () => props.visible,
    (visible) => {
        if (visible) {
            configList.value = []
            if (props.data) {
                assignObject(form, props.data);
                isUpdate.value = true;
                configList.value = JSON.parse(form.configList || "[]");
            } else {
                isUpdate.value = false;
            }
        } else {
            resetFields();
        }
    },
    { immediate: true }
);
</script>