admin-govern/src/views/auth/menu/popupApi.vue

<template>
    <el-dialog width="500px" v-model.trim="dialogVisible" :title="title">
        <el-scrollbar>
            <el-form
                :mode="form"
                :inline="false"
                ref="formRef"
                :model="form"
                label-width="120px"
                :rules="rules"
                class="form-one"
            >
                <el-form-item prop="name" label="接口/按钮名称">
                    <el-input maxlength="32" show-word-limit    v-model.trim="form.name" placeholder="请输入接口名称" />
                </el-form-item>
                <el-form-item prop="code" label="接口/按钮标识">
                    <el-input maxlength="32" show-word-limit 
                        
                        
                        v-model.trim="form.code"
                        placeholder="请输入英文接口标识"
                    />
                </el-form-item>
                <el-form-item prop="path" label="接口路径">
                    <el-input  v-model.trim="form.path" placeholder="请输入接口路径" />
                </el-form-item>
                <el-form-item prop="type" label="接口类型">
                    <el-radio-group v-model.trim="form.type">
                        <el-radio :label="1">普通接口</el-radio>
                        <el-radio :label="2">公用接口</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="sort" label="排序">
                    <el-input-number v-model.number="form.sort" style="width: 100%;" :min="0" />
                </el-form-item>
                <el-form-item prop="remark" label="接口/按钮描述">
                    <el-input  show-word-limit 
                        maxlength="300"
                        
                        v-model.trim="form.remark"
                        :rows="2"
                        type="textarea"
                        placeholder="请输入描述"
                    />
                </el-form-item>
            </el-form>
        </el-scrollbar>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { update, add } from '@/api/user-boot/function'
import { ElMessage } from 'element-plus'
defineOptions({
    name: 'auth/menu/popupApi'
})
const emits = defineEmits<{
    (e: 'init'): void
}>()
const formRef = ref()
const form: any = reactive({
    id: '',
    pid: '0',
    code: '',
    name: '',
    path: '',
    type: 1,
    sort: 100,
    remark: ''
})
const rules = {
    code: [
        { required: true, message: '请输入标识', trigger: 'blur' },
        {
            pattern: /^[a-zA-Z_]{1}[a-zA-Z0-9_]{2,20}$/,
            message: '请输入至少3-20位英文',
            min: 3,
            max: 20,
            trigger: 'blur'
        }
    ],
    name: [{ required: true, message: '请输入接口名称', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
    path: [{ required: true, message: '请输入接口路径', trigger: 'blur' }]
}
const dialogVisible = ref(false)
const title = ref('新增菜单')
const open = (text: string, data: anyObj) => {
    formRef.value?.resetFields()
    title.value = text
    // 重置表单
    for (let key in form) {
        form[key] = ''
    }
    form.type = 1
    form.sort = 100
    form.pid = data.pid
    if (data.id) {
        for (let key in form) {
            form[key] = data[key] || ''
        }
    }
    dialogVisible.value = true
}
const submit = async () => {
    formRef.value.validate(async valid => {
        if (valid) {
            if (form.id) {
                await update(form).then(() => {
                    ElMessage.success('修改成功!')
                })
            } else {
                let obj = JSON.parse(JSON.stringify(form))
                delete obj.id
                await add(obj).then(() => {
                    ElMessage.success('新增成功!')
                })
            }
            emits('init')
            dialogVisible.value = false
        }
    })
}

defineExpose({ open })
</script>