135 lines
4.5 KiB
Vue
135 lines
4.5 KiB
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>
|