105 lines
3.5 KiB
Vue
105 lines
3.5 KiB
Vue
<template>
|
|
<el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
|
<el-scrollbar>
|
|
<el-form :mode="form" :inline="false" :model="form" label-width="120px" :rules="rules">
|
|
<el-form-item prop="name" label="接口/按钮名称">
|
|
<el-input maxlength="32" show-word-limit v-model="form.name" placeholder="请输入接口名称" />
|
|
</el-form-item>
|
|
<el-form-item prop="code" label="接口/按钮标识">
|
|
<el-input maxlength="32" show-word-limit v-model="form.code" placeholder="请输入英文接口标识" />
|
|
</el-form-item>
|
|
<el-form-item prop="path" label="接口路径">
|
|
<el-input maxlength="32" show-word-limit v-model="form.path" placeholder="请输入接口路径" />
|
|
</el-form-item>
|
|
<el-form-item prop="type" label="接口类型">
|
|
<el-radio-group v-model="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 maxlength="32" show-word-limit-number v-model="form.sort" :min="0" />
|
|
</el-form-item>
|
|
<el-form-item prop="remark" label="接口/按钮描述">
|
|
<el-input maxlength="300" show-word-limit v-model="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'
|
|
|
|
defineOptions({
|
|
name: 'auth/menu/popupApi'
|
|
})
|
|
const emits = defineEmits<{
|
|
(e: 'init'): void
|
|
}>()
|
|
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) => {
|
|
title.value = text
|
|
// 重置表单
|
|
for (let key in form) {
|
|
form[key] = ''
|
|
}
|
|
form.type = 1
|
|
form.pid = data.pid
|
|
if (data.id) {
|
|
for (let key in form) {
|
|
form[key] = data[key] || ''
|
|
}
|
|
}
|
|
dialogVisible.value = true
|
|
}
|
|
const submit = async () => {
|
|
if (form.id) {
|
|
await update(form)
|
|
} else {
|
|
let obj = JSON.parse(JSON.stringify(form))
|
|
delete obj.id
|
|
await add(obj)
|
|
}
|
|
emits('init')
|
|
dialogVisible.value = false
|
|
}
|
|
|
|
defineExpose({ open })
|
|
</script>
|