mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-23 05:40:20 +08:00
🎉 表单校验
This commit is contained in:
32189
parent
3c0824b0a3
commit
5c27bce5ad
@ -1,49 +1,72 @@
|
||||
import request from "/@/utils/request";
|
||||
|
||||
export const pageList = (params?: Object) => {
|
||||
return request({
|
||||
url: '/admin/appmenu/tree',
|
||||
method: "get",
|
||||
params
|
||||
})
|
||||
return request({
|
||||
url: '/admin/appmenu/tree',
|
||||
method: "get",
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export const info = (id: String) => {
|
||||
return request({
|
||||
url: `/admin/appmenu/${id}`,
|
||||
method: "get",
|
||||
})
|
||||
return request({
|
||||
url: `/admin/appmenu/${id}`,
|
||||
method: "get",
|
||||
})
|
||||
}
|
||||
|
||||
export const save = (data: Object) => {
|
||||
return request({
|
||||
url: '/admin/appmenu',
|
||||
method: "post",
|
||||
data: data
|
||||
})
|
||||
return request({
|
||||
url: '/admin/appmenu',
|
||||
method: "post",
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export const update = (data: Object) => {
|
||||
return request({
|
||||
url: '/admin/appmenu',
|
||||
method: "put",
|
||||
data: data
|
||||
})
|
||||
return request({
|
||||
url: '/admin/appmenu',
|
||||
method: "put",
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export const addObj = (data: Object) => {
|
||||
return request({
|
||||
url: '/admin/appmenu',
|
||||
method: "post",
|
||||
data: data
|
||||
})
|
||||
return request({
|
||||
url: '/admin/appmenu',
|
||||
method: "post",
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
export function delObj (ids?:object) {
|
||||
return request({
|
||||
url: '/admin/appmenu',
|
||||
method: 'delete',
|
||||
data:ids
|
||||
})
|
||||
export function delObj(ids?: object) {
|
||||
return request({
|
||||
url: '/admin/appmenu',
|
||||
method: 'delete',
|
||||
data: ids
|
||||
})
|
||||
}
|
||||
|
||||
export function getDetails(obj: Object) {
|
||||
return request({
|
||||
url: '/admin/appmenu/details/' + obj,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function validatePermission(rule: any, value: any, callback: any, isEdit: boolean) {
|
||||
if (isEdit) {
|
||||
return callback()
|
||||
}
|
||||
|
||||
getDetails(value).then(response => {
|
||||
const result = response.data
|
||||
if (result !== null) {
|
||||
callback(new Error('权限标识已经存在'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,65 +1,115 @@
|
||||
import request from "/@/utils/request";
|
||||
|
||||
export function fetchList(query: any) {
|
||||
return request({
|
||||
url: '/admin/approle/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
return request({
|
||||
url: '/admin/approle/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function list() {
|
||||
return request({
|
||||
url: '/admin/approle/list',
|
||||
method: 'get'
|
||||
})
|
||||
return request({
|
||||
url: '/admin/approle/list',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function addObj(obj: any) {
|
||||
return request({
|
||||
url: '/admin/approle',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
return request({
|
||||
url: '/admin/approle',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function getObj(id: string) {
|
||||
return request({
|
||||
url: '/admin/approle/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
return request({
|
||||
url: '/admin/approle/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function delObj( ids?:object ) {
|
||||
return request({
|
||||
url: '/admin/approle',
|
||||
method: 'delete',
|
||||
data:ids
|
||||
})
|
||||
export function delObj(ids?: object) {
|
||||
return request({
|
||||
url: '/admin/approle',
|
||||
method: 'delete',
|
||||
data: ids
|
||||
})
|
||||
}
|
||||
|
||||
export function putObj(obj: any) {
|
||||
return request({
|
||||
url: '/admin/approle',
|
||||
method: 'put',
|
||||
data: obj
|
||||
})
|
||||
return request({
|
||||
url: '/admin/approle',
|
||||
method: 'put',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function fetchRoleTree(roleId: string) {
|
||||
return request({
|
||||
url: '/admin/appmenu/tree/' + roleId,
|
||||
method: 'get'
|
||||
})
|
||||
return request({
|
||||
url: '/admin/appmenu/tree/' + roleId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function permissionUpd(roleId: string, menuIds: string) {
|
||||
return request({
|
||||
url: '/admin/approle/menu',
|
||||
method: 'put',
|
||||
data: {
|
||||
roleId: roleId,
|
||||
menuIds: menuIds
|
||||
}
|
||||
})
|
||||
return request({
|
||||
url: '/admin/approle/menu',
|
||||
method: 'put',
|
||||
data: {
|
||||
roleId: roleId,
|
||||
menuIds: menuIds
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function getDetails(obj: Object) {
|
||||
return request({
|
||||
url: '/admin/approle/details/' + obj,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getDetailsByPhone(obj: Object) {
|
||||
return request({
|
||||
url: '/admin/approle/detailsByCode/' + obj,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function validateApproleName(rule: any, value: any, callback: any, isEdit: boolean) {
|
||||
const flag = new RegExp(/^([a-z\u4e00-\u9fa5\d]+?)$/).test(value)
|
||||
if (!flag) {
|
||||
callback(new Error('用户名支持小写英文、数字、中文'))
|
||||
}
|
||||
|
||||
if (isEdit) {
|
||||
return callback()
|
||||
}
|
||||
|
||||
getDetails(value).then(response => {
|
||||
const result = response.data
|
||||
if (result !== null) {
|
||||
callback(new Error('用户名已经存在'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function validateAppRoleCode(rule: any, value: any, callback: any, isEdit: boolean) {
|
||||
if (isEdit) {
|
||||
return callback()
|
||||
}
|
||||
getDetailsByPhone(value).then(response => {
|
||||
const result = response.data
|
||||
if (result !== null) {
|
||||
callback(new Error('角色标识已经存在'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,40 +1,92 @@
|
||||
import request from "/@/utils/request"
|
||||
|
||||
export function fetchList(query: any) {
|
||||
return request({
|
||||
url: '/admin/appuser/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
return request({
|
||||
url: '/admin/appuser/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
export function addObj(obj: any) {
|
||||
return request({
|
||||
url: '/admin/appuser',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
return request({
|
||||
url: '/admin/appuser',
|
||||
method: 'post',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
export function getObj(id: string) {
|
||||
return request({
|
||||
url: '/admin/appuser/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
return request({
|
||||
url: '/admin/appuser/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function delObj(ids?: object) {
|
||||
return request({
|
||||
url: '/admin/appuser/',
|
||||
method: 'delete',
|
||||
data:ids
|
||||
})
|
||||
return request({
|
||||
url: '/admin/appuser/',
|
||||
method: 'delete',
|
||||
data: ids
|
||||
})
|
||||
}
|
||||
|
||||
export function putObj(obj: any) {
|
||||
return request({
|
||||
url: '/admin/appuser',
|
||||
method: 'put',
|
||||
data: obj
|
||||
})
|
||||
return request({
|
||||
url: '/admin/appuser',
|
||||
method: 'put',
|
||||
data: obj
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getDetails(obj: Object) {
|
||||
return request({
|
||||
url: '/admin/appuser/details/' + obj,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function getDetailsByPhone(obj: Object) {
|
||||
return request({
|
||||
url: '/admin/appuser/detailsByPhone/' + obj,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function validateUsername(rule: any, value: any, callback: any, isEdit: boolean) {
|
||||
const flag = new RegExp(/^([a-z\u4e00-\u9fa5\d]+?)$/).test(value)
|
||||
if (!flag) {
|
||||
callback(new Error('用户名支持小写英文、数字、中文'))
|
||||
}
|
||||
|
||||
if (isEdit) {
|
||||
return callback()
|
||||
}
|
||||
|
||||
getDetails(value).then(response => {
|
||||
const result = response.data
|
||||
if (result !== null) {
|
||||
callback(new Error('用户名已经存在'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function validatePhone(rule: any, value: any, callback: any, isEdit: boolean) {
|
||||
if (isEdit) {
|
||||
return callback()
|
||||
}
|
||||
getDetailsByPhone(value).then(response => {
|
||||
const result = response.data
|
||||
if (result !== null) {
|
||||
callback(new Error('手机号已经存在'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,251 +1,263 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" :close-on-click-modal="false"
|
||||
:title="form.id ? $t('common.editBtn') : $t('common.addBtn')" draggable>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px">
|
||||
<el-row :gutter="20">
|
||||
<el-dialog :close-on-click-modal="false" :title="form.id ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="form" :rules="dataRules" formDialogRef label-width="120px" ref="dataFormRef">
|
||||
<el-row :gutter="20">
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.clientId')" prop="clientId">
|
||||
<el-input v-model="form.clientId" :placeholder="t('client.inputClientIdTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.clientId')" prop="clientId">
|
||||
<el-input :placeholder="t('client.inputClientIdTip')" v-model="form.clientId"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.clientSecret')" prop="clientSecret">
|
||||
<el-input v-model="form.clientSecret" :placeholder="t('client.inputClientSecretTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.clientSecret')" prop="clientSecret">
|
||||
<el-input :placeholder="t('client.inputClientSecretTip')" v-model="form.clientSecret"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.scope')" prop="scope">
|
||||
<el-input v-model="form.scope" :placeholder="t('client.inputScopeTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.scope')" prop="scope">
|
||||
<el-input :placeholder="t('client.inputScopeTip')" v-model="form.scope"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('client.authorizedGrantTypes')" prop="authorizedGrantTypes">
|
||||
<el-checkbox-group v-model="form.authorizedGrantTypes">
|
||||
<el-checkbox v-for="(item, index) in grant_types" :key="index"
|
||||
:label="item.value">{{ item.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('client.authorizedGrantTypes')" prop="authorizedGrantTypes">
|
||||
<el-checkbox-group v-model="form.authorizedGrantTypes">
|
||||
<el-checkbox :key="index" :label="item.value"
|
||||
v-for="(item, index) in grant_types">{{ item.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.webServerRedirectUri')" prop="webServerRedirectUri">
|
||||
<el-input v-model="form.webServerRedirectUri" :placeholder="t('client.inputWebServerRedirectUriTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.webServerRedirectUri')" prop="webServerRedirectUri">
|
||||
<el-input :placeholder="t('client.inputWebServerRedirectUriTip')"
|
||||
v-model="form.webServerRedirectUri"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.authorities')" prop="authorities">
|
||||
<el-input v-model="form.authorities" :placeholder="t('client.inputAuthoritiesTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.authorities')" prop="authorities">
|
||||
<el-input :placeholder="t('client.inputAuthoritiesTip')" v-model="form.authorities"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.accessTokenValidity')" prop="accessTokenValidity">
|
||||
<el-input v-model="form.accessTokenValidity" :placeholder="t('client.inputAccessTokenValidityTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.accessTokenValidity')" prop="accessTokenValidity">
|
||||
<el-input :placeholder="t('client.inputAccessTokenValidityTip')"
|
||||
v-model="form.accessTokenValidity"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.refreshTokenValidity')" prop="refreshTokenValidity">
|
||||
<el-input v-model="form.refreshTokenValidity" :placeholder="t('client.inputRefreshTokenValidityTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.refreshTokenValidity')" prop="refreshTokenValidity">
|
||||
<el-input :placeholder="t('client.inputRefreshTokenValidityTip')"
|
||||
v-model="form.refreshTokenValidity"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.autoapprove')" prop="autoapprove">
|
||||
<el-radio-group v-model="form.autoapprove">
|
||||
<el-radio v-for="(item, index) in common_status" :key="index" :label="item.value" border>{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.autoapprove')" prop="autoapprove">
|
||||
<el-radio-group v-model="form.autoapprove">
|
||||
<el-radio :key="index" :label="item.value" border v-for="(item, index) in common_status">{{
|
||||
item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('client.additionalInformation')" prop="additionalInformation">
|
||||
<el-input type="textarea" v-model="form.additionalInformation"
|
||||
:placeholder="t('client.inputAdditionalInformationTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('client.additionalInformation')" prop="additionalInformation">
|
||||
<el-input :placeholder="t('client.inputAdditionalInformationTip')" type="textarea"
|
||||
v-model="form.additionalInformation"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-collapse v-model="collapseActive">
|
||||
<el-collapse-item title="安全属性" name="1">
|
||||
<template #title>
|
||||
<el-icon class="header-icon">
|
||||
<info-filled/>
|
||||
</el-icon>
|
||||
安全属性
|
||||
</template>
|
||||
<el-collapse v-model="collapseActive">
|
||||
<el-collapse-item name="1" title="安全属性">
|
||||
<template #title>
|
||||
<el-icon class="header-icon">
|
||||
<info-filled/>
|
||||
</el-icon>
|
||||
安全属性
|
||||
</template>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.captchaFlag')" prop="captchaFlag">
|
||||
<el-radio-group v-model="form.captchaFlag">
|
||||
<el-radio v-for="(item, index) in captcha_flag_types" :key="index" :label="item.value" border>
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.encFlag')" prop="encFlag">
|
||||
<el-radio-group v-model="form.encFlag">
|
||||
<el-radio v-for="(item, index) in enc_flag_types" :key="index" :label="item.value" border>
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.onlineQuantity')" prop="onlineQuantity">
|
||||
<el-radio-group v-model="form.onlineQuantity">
|
||||
<el-radio v-for="(item, index) in enc_flag_types" :key="index" :label="item.value" border>
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.captchaFlag')" prop="captchaFlag">
|
||||
<el-radio-group v-model="form.captchaFlag">
|
||||
<el-radio :key="index" :label="item.value"
|
||||
border v-for="(item, index) in captcha_flag_types">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.encFlag')" prop="encFlag">
|
||||
<el-radio-group v-model="form.encFlag">
|
||||
<el-radio :key="index" :label="item.value" border
|
||||
v-for="(item, index) in enc_flag_types">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('client.onlineQuantity')" prop="onlineQuantity">
|
||||
<el-radio-group v-model="form.onlineQuantity">
|
||||
<el-radio :key="index" :label="item.value" border
|
||||
v-for="(item, index) in enc_flag_types">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
||||
</el-form>
|
||||
<template #footer>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button formDialogRef @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button formDialogRef type="primary" @click="onSubmit">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
<el-button @click="visible = false" formDialogRef>{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" formDialogRef type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="SysOauthClientDetailsDialog" setup>
|
||||
// 定义子组件向父组件传值/事件
|
||||
import {useDict} from '/@/hooks/dict';
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {addObj, getObj, putObj} from '/@/api/admin/client'
|
||||
import {useI18n} from "vue-i18n"
|
||||
// 定义子组件向父组件传值/事件
|
||||
import {useDict} from '/@/hooks/dict';
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {addObj, getObj, putObj} from '/@/api/admin/client'
|
||||
import {useI18n} from "vue-i18n"
|
||||
import {rule} from "/@/utils/validate";
|
||||
|
||||
const emit = defineEmits(['refresh']);
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
const {t} = useI18n();
|
||||
const {t} = useI18n();
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
// 定义字典
|
||||
const {
|
||||
grant_types,
|
||||
common_status,
|
||||
captcha_flag_types,
|
||||
enc_flag_types
|
||||
} = useDict('grant_types', 'common_status', 'captcha_flag_types', 'enc_flag_types')
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
// 定义字典
|
||||
const {
|
||||
grant_types,
|
||||
common_status,
|
||||
captcha_flag_types,
|
||||
enc_flag_types
|
||||
} = useDict('grant_types', 'common_status', 'captcha_flag_types', 'enc_flag_types')
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
clientId: '',
|
||||
clientSecret: '',
|
||||
scope: '',
|
||||
authorizedGrantTypes: [],
|
||||
webServerRedirectUri: '',
|
||||
authorities: '',
|
||||
accessTokenValidity: '',
|
||||
refreshTokenValidity: '',
|
||||
additionalInformation: '',
|
||||
autoapprove: '',
|
||||
delFlag: '',
|
||||
createBy: '',
|
||||
updateBy: '',
|
||||
createTime: '',
|
||||
updateTime: '',
|
||||
tenantId: '',
|
||||
});
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
clientId: '',
|
||||
clientSecret: '',
|
||||
scope: '',
|
||||
authorizedGrantTypes: [],
|
||||
webServerRedirectUri: '',
|
||||
authorities: '',
|
||||
accessTokenValidity: '',
|
||||
refreshTokenValidity: '',
|
||||
additionalInformation: '',
|
||||
autoapprove: '',
|
||||
delFlag: '',
|
||||
createBy: '',
|
||||
updateBy: '',
|
||||
createTime: '',
|
||||
updateTime: '',
|
||||
tenantId: '',
|
||||
});
|
||||
|
||||
const collapseActive = ref("1")
|
||||
const collapseActive = ref("1")
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
clientId: [{required: true, message: '编号不能为空', trigger: 'blur'}],
|
||||
clientSecret: [{required: true, message: '密钥不能为空', trigger: 'blur'}],
|
||||
scope: [{required: true, message: '域不能为空', trigger: 'blur'}],
|
||||
authorizedGrantTypes: [{required: true, message: '授权模式不能为空', trigger: 'blur'}],
|
||||
accessTokenValidity: [{required: true, message: '令牌时效不能为空', trigger: 'blur'}],
|
||||
refreshTokenValidity: [{required: true, message: '刷新时效不能为空', trigger: 'blur'}],
|
||||
captchaFlag: [{required: true, message: '是否开启验证码校验', trigger: 'blur'}],
|
||||
encFlag: [{required: true, message: '是否开启密码加密传输', trigger: 'blur'}],
|
||||
onlineQuantity: [{required: true, message: '是否允许同时在线', trigger: 'blur'}],
|
||||
})
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
clientId: [{required: true, message: '编号不能为空', trigger: 'blur'}],
|
||||
clientSecret: [{required: true, message: '密钥不能为空', trigger: 'blur'}],
|
||||
scope: [{required: true, message: '域不能为空', trigger: 'blur'}],
|
||||
authorizedGrantTypes: [{required: true, message: '授权模式不能为空', trigger: 'blur'}],
|
||||
accessTokenValidity: [{required: true, message: '令牌时效不能为空', trigger: 'blur'}],
|
||||
refreshTokenValidity: [{required: true, message: '刷新时效不能为空', trigger: 'blur'}],
|
||||
captchaFlag: [{required: true, message: '是否开启验证码校验', trigger: 'blur'}],
|
||||
encFlag: [{required: true, message: '是否开启密码加密传输', trigger: 'blur'}],
|
||||
onlineQuantity: [{required: true, message: '是否允许同时在线', trigger: 'blur'}],
|
||||
authorities: [{required: true, message: '权限不能为空', trigger: 'blur'}],
|
||||
autoapprove: [{required: true, message: '自动放行不能为空', trigger: 'blur'}],
|
||||
webServerRedirectUri: [{required: true, message: '回调地址不能为空', trigger: 'blur'}
|
||||
, {validator: rule.url, trigger: 'blur'}],
|
||||
})
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// 获取sysOauthClientDetails信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getsysOauthClientDetailsData(id)
|
||||
}
|
||||
};
|
||||
// 获取sysOauthClientDetails信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getsysOauthClientDetailsData(id)
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 更新
|
||||
if (form.id) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 更新
|
||||
if (form.id) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// 初始化表单数据
|
||||
const getsysOauthClientDetailsData = (id: string) => {
|
||||
// 获取数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
})
|
||||
};
|
||||
|
||||
// 初始化表单数据
|
||||
const getsysOauthClientDetailsData = (id: string) => {
|
||||
// 获取数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
})
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,123 +1,130 @@
|
||||
<template>
|
||||
<div class="system-dic-dialog-container">
|
||||
<el-dialog v-model="visible" :title="dataForm.id ? $t('common.editBtn') : $t('common.addBtn')" width="60%">
|
||||
<el-form ref="dicDialogFormRef" :model="dataForm" label-width="100px" :rules="dataRules">
|
||||
<el-row :gutter="35">
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item :label="$t('sysdict.dictType')" prop="dictType">
|
||||
<el-input v-model="dataForm.dictType" clearable :placeholder="$t('sysdict.inputDictTypeTip')"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item :label="$t('sysdict.description')" prop="description">
|
||||
<el-input v-model="dataForm.description" :placeholder="$t('sysdict.inputDescriptionTip')" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item :label="$t('sysdict.systemFlag')" prop="systemFlag">
|
||||
<el-radio-group v-model="dataForm.systemFlag">
|
||||
<el-radio-button :label="item.value" v-for="(item,index) in dict_type" :key="index">{{item.label}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item :label="$t('sysdict.remarks')" prop="remarks">
|
||||
<el-input v-model="dataForm.remarks" type="textarea" :placeholder="$t('sysdict.inputRemarksTip')" maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="system-dic-dialog-container">
|
||||
<el-dialog :title="dataForm.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" width="60%">
|
||||
<el-form :model="dataForm" :rules="dataRules" label-width="100px" ref="dicDialogFormRef">
|
||||
<el-row :gutter="35">
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item :label="$t('sysdict.dictType')" prop="dictType">
|
||||
<el-input :placeholder="$t('sysdict.inputDictTypeTip')" clearable
|
||||
v-model="dataForm.dictType"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item :label="$t('sysdict.description')" prop="description">
|
||||
<el-input :placeholder="$t('sysdict.inputDescriptionTip')" clearable
|
||||
v-model="dataForm.description"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item :label="$t('sysdict.systemFlag')" prop="systemFlag">
|
||||
<el-radio-group v-model="dataForm.systemFlag">
|
||||
<el-radio-button :key="index" :label="item.value" v-for="(item,index) in dict_type">
|
||||
{{item.label}}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
|
||||
<el-form-item :label="$t('sysdict.remarks')" prop="remarks">
|
||||
<el-input :placeholder="$t('sysdict.inputRemarksTip')" maxlength="150"
|
||||
type="textarea" v-model="dataForm.remarks"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="onCancel" >{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit" >{{ $t('common.confirmButtonText') }}</el-button>
|
||||
<el-button @click="onCancel">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemDicDialog">
|
||||
import { getObj, addObj, putObj } from '/@/api/admin/dict'
|
||||
import {useDict} from "/@/hooks/dict";
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
<script lang="ts" name="systemDicDialog" setup>
|
||||
import {addObj, getObj, putObj} from '/@/api/admin/dict'
|
||||
import {useDict} from "/@/hooks/dict";
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {rule} from "/@/utils/validate";
|
||||
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
const { dict_type } = useDict('dict_type')
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
const {dict_type} = useDict('dict_type')
|
||||
|
||||
// 定义变量内容
|
||||
const dicDialogFormRef = ref();
|
||||
// 定义变量内容
|
||||
const dicDialogFormRef = ref();
|
||||
|
||||
const visible = ref(false)
|
||||
const visible = ref(false)
|
||||
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
dictType: '',
|
||||
description: '',
|
||||
systemFlag: '0',
|
||||
remarks: '',
|
||||
})
|
||||
|
||||
|
||||
const dataRules = reactive({
|
||||
dictType: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
|
||||
systemFlag: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }],
|
||||
description: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
|
||||
})
|
||||
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (type: string, row: any) => {
|
||||
if (row?.id) {
|
||||
getObj(row.id).then(res => {
|
||||
Object.assign(dataForm,res.data)
|
||||
const dataForm = reactive({
|
||||
id: '',
|
||||
dictType: '',
|
||||
description: '',
|
||||
systemFlag: '0',
|
||||
remarks: '',
|
||||
})
|
||||
} else {
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
nextTick(() => {
|
||||
dicDialogFormRef?.value?.resetFields();
|
||||
|
||||
|
||||
const dataRules = reactive({
|
||||
dictType: [{required: true, message: '类型不能为空', trigger: 'blur'}
|
||||
, {validator: rule.validatorNameCn, trigger: 'blur'}],
|
||||
systemFlag: [{required: true, message: '字典类型不能为空', trigger: 'blur'}],
|
||||
description: [{required: true, message: '描述不能为空', trigger: 'blur'}],
|
||||
})
|
||||
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (type: string, row: any) => {
|
||||
if (row?.id) {
|
||||
getObj(row.id).then(res => {
|
||||
Object.assign(dataForm, res.data)
|
||||
})
|
||||
} else {
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
nextTick(() => {
|
||||
dicDialogFormRef?.value?.resetFields();
|
||||
});
|
||||
}
|
||||
visible.value = true
|
||||
};
|
||||
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
visible.value = false
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dicDialogFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
if (dataForm.id) {
|
||||
putObj(dataForm).then(() => {
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(dataForm).then(() => {
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
};
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
}
|
||||
visible.value = true
|
||||
};
|
||||
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
visible.value = false
|
||||
};
|
||||
// 取消
|
||||
const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dicDialogFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
if (dataForm.id) {
|
||||
putObj(dataForm).then(() => {
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}else{
|
||||
addObj(dataForm).then(() => {
|
||||
closeDialog(); // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
};
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,118 +1,122 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" :close-on-click-modal="false"
|
||||
:title="form.id ? $t('common.editBtn') : $t('common.addBtn')" draggable>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('i18n.name')" prop="name">
|
||||
<el-input v-model="form.name" :placeholder="t('i18n.inputKeyTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('i18n.zhCn')" prop="zhCn">
|
||||
<el-input v-model="form.zhCn" :placeholder="t('i18n.inputZhCnTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('i18n.en')" prop="en">
|
||||
<el-input v-model="form.en" :placeholder="t('i18n.inputEnTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-dialog :close-on-click-modal="false" :title="form.id ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="form" :rules="dataRules" formDialogRef label-width="90px" ref="dataFormRef">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('i18n.name')" prop="name">
|
||||
<el-input :placeholder="t('i18n.inputKeyTip')" v-model="form.name"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('i18n.zhCn')" prop="zhCn">
|
||||
<el-input :placeholder="t('i18n.inputZhCnTip')" v-model="form.zhCn"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('i18n.en')" prop="en">
|
||||
<el-input :placeholder="t('i18n.inputEnTip')" v-model="form.en"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="SysI18nDialog" setup>
|
||||
// 定义子组件向父组件传值/事件
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {addObj, getObj, putObj} from '/@/api/admin/i18n'
|
||||
import {useI18n} from "vue-i18n"
|
||||
// 定义子组件向父组件传值/事件
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {addObj, getObj, putObj} from '/@/api/admin/i18n'
|
||||
import {useI18n} from "vue-i18n"
|
||||
import {rule} from "/@/utils/validate";
|
||||
|
||||
const emit = defineEmits(['refresh']);
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
const {t} = useI18n();
|
||||
const {t} = useI18n();
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
// 定义字典
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
// 定义字典
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
zhCn: '',
|
||||
en: '',
|
||||
});
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
zhCn: '',
|
||||
en: '',
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
name: [{required: true, message: 'name不能为空', trigger: 'blur'}],
|
||||
zhCn: [{required: true, message: '中文不能为空', trigger: 'blur'}],
|
||||
en: [{required: true, message: '英文不能为空', trigger: 'blur'}],
|
||||
})
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
name: [{required: true, message: 'name不能为空', trigger: 'blur'}
|
||||
, {validator: rule.noChinese, trigger: 'blur'}],
|
||||
zhCn: [{required: true, message: '中文不能为空', trigger: 'blur'},
|
||||
{validator: rule.chinese, trigger: 'blur'}],
|
||||
en: [{required: true, message: '英文不能为空', trigger: 'blur'}
|
||||
, {validator: rule.letter, trigger: 'blur'}],
|
||||
})
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// 获取sysI18n信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getsysI18nData(id)
|
||||
}
|
||||
};
|
||||
// 获取sysI18n信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getsysI18nData(id)
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
// 更新
|
||||
if (form.id) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// 更新
|
||||
if (form.id) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化表单数据
|
||||
const getsysI18nData = (id: string) => {
|
||||
// 获取数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
})
|
||||
};
|
||||
// 初始化表单数据
|
||||
const getsysI18nData = (id: string) => {
|
||||
// 获取数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
})
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,220 +1,226 @@
|
||||
<template>
|
||||
<el-dialog :title="state.ruleForm.menuId ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
|
||||
:close-on-click-modal="false" draggable>
|
||||
<el-form ref="menuDialogFormRef" :model="state.ruleForm" :rules="dataRules" label-width="90px" v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.menuType')" prop="menType">
|
||||
<el-radio-group v-model="state.ruleForm.menuType">
|
||||
<el-radio-button label="0">左菜单</el-radio-button>
|
||||
<el-radio-button label="1">按钮</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.parentId')" prop="parentId">
|
||||
<el-tree-select v-model="state.ruleForm.parentId" :data="state.parentData" :render-after-expand="false"
|
||||
:props="{ value: 'id', label: 'name', children: 'children' }" class="w100" clearable check-strictly
|
||||
:placeholder="$t('sysmenu.inputParentIdTip')">
|
||||
</el-tree-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.name')" prop="name">
|
||||
<el-input v-model="state.ruleForm.name" clearable :placeholder="$t('sysmenu.inputNameTip')"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType === '0'">
|
||||
<el-form-item :label="$t('sysmenu.path')" prop="path">
|
||||
<el-input v-model="state.ruleForm.path" :placeholder="$t('sysmenu.inputPathTip')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType === '1'">
|
||||
<el-form-item :label="$t('sysmenu.permission')" prop="permission">
|
||||
<el-input v-model="state.ruleForm.permission" maxlength="50"
|
||||
:placeholder="$t('sysmenu.inputPermissionTip')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.sortOrder')" prop="sortOrder">
|
||||
<el-input-number v-model="state.ruleForm.sortOrder" :min="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.icon')" prop="icon">
|
||||
<IconSelector :placeholder="$t('sysmenu.inputIconTip')" v-model="state.ruleForm.icon" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType === '0' && showembedded">
|
||||
<el-form-item :label="$t('sysmenu.embedded')" prop="embedded">
|
||||
<el-radio-group v-model="state.ruleForm.embedded">
|
||||
<el-radio-button label="0">否</el-radio-button>
|
||||
<el-radio-button label="1">是</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType === '0'">
|
||||
<el-form-item :label="$t('sysmenu.keepAlive')" prop="keepAlive">
|
||||
<el-radio-group v-model="state.ruleForm.keepAlive">
|
||||
<el-radio-button label="0">否</el-radio-button>
|
||||
<el-radio-button label="1">是</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType === '0'">
|
||||
<el-form-item :label="$t('sysmenu.visible')" prop="visible">
|
||||
<el-radio-group v-model="state.ruleForm.visible">
|
||||
<el-radio-button label="0">否</el-radio-button>
|
||||
<el-radio-button label="1">是</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-dialog :close-on-click-modal="false" :title="state.ruleForm.menuId ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="state.ruleForm" :rules="dataRules" label-width="90px" ref="menuDialogFormRef"
|
||||
v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.menuType')" prop="menType">
|
||||
<el-radio-group v-model="state.ruleForm.menuType">
|
||||
<el-radio-button label="0">左菜单</el-radio-button>
|
||||
<el-radio-button label="1">按钮</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.parentId')" prop="parentId">
|
||||
<el-tree-select :data="state.parentData" :placeholder="$t('sysmenu.inputParentIdTip')"
|
||||
:props="{ value: 'id', label: 'name', children: 'children' }"
|
||||
:render-after-expand="false" check-strictly
|
||||
class="w100" clearable
|
||||
v-model="state.ruleForm.parentId">
|
||||
</el-tree-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.name')" prop="name">
|
||||
<el-input :placeholder="$t('sysmenu.inputNameTip')" clearable
|
||||
v-model="state.ruleForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType === '0'">
|
||||
<el-form-item :label="$t('sysmenu.path')" prop="path">
|
||||
<el-input :placeholder="$t('sysmenu.inputPathTip')" v-model="state.ruleForm.path"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType === '1'">
|
||||
<el-form-item :label="$t('sysmenu.permission')" prop="permission">
|
||||
<el-input :placeholder="$t('sysmenu.inputPermissionTip')" maxlength="50"
|
||||
v-model="state.ruleForm.permission"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.sortOrder')" prop="sortOrder">
|
||||
<el-input-number :min="0" controls-position="right" v-model="state.ruleForm.sortOrder"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.icon')" prop="icon">
|
||||
<IconSelector :placeholder="$t('sysmenu.inputIconTip')" v-model="state.ruleForm.icon"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType === '0' && showembedded">
|
||||
<el-form-item :label="$t('sysmenu.embedded')" prop="embedded">
|
||||
<el-radio-group v-model="state.ruleForm.embedded">
|
||||
<el-radio-button label="0">否</el-radio-button>
|
||||
<el-radio-button label="1">是</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType === '0'">
|
||||
<el-form-item :label="$t('sysmenu.keepAlive')" prop="keepAlive">
|
||||
<el-radio-group v-model="state.ruleForm.keepAlive">
|
||||
<el-radio-button label="0">否</el-radio-button>
|
||||
<el-radio-button label="1">是</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType === '0'">
|
||||
<el-form-item :label="$t('sysmenu.visible')" prop="visible">
|
||||
<el-radio-group v-model="state.ruleForm.visible">
|
||||
<el-radio-button label="0">否</el-radio-button>
|
||||
<el-radio-button label="1">是</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemMenuDialog">
|
||||
import { info, pageList, update, addObj } from "/@/api/admin/menu";
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
<script lang="ts" name="systemMenuDialog" setup>
|
||||
import {addObj, info, pageList, update} from "/@/api/admin/menu";
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {rule} from "/@/utils/validate";
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
// 引入组件
|
||||
const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
// 引入组件
|
||||
const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
|
||||
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
// 定义变量内容
|
||||
const menuDialogFormRef = ref();
|
||||
// 定义需要的数据
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
id: '',
|
||||
menuId: '',
|
||||
name: '',
|
||||
permission: '',
|
||||
parentId: '',
|
||||
icon: '',
|
||||
path: '',
|
||||
sortOrder: 0,
|
||||
menuType: '0',
|
||||
keepAlive: '0',
|
||||
visible: '1',
|
||||
embedded: '0',
|
||||
},
|
||||
parentData: [] as any[], // 上级菜单数据
|
||||
});
|
||||
|
||||
// 从后端获取菜单信息
|
||||
const getMenuData = () => {
|
||||
state.parentData = []
|
||||
pageList({
|
||||
type: '0'
|
||||
}).then(res => {
|
||||
let menu = {
|
||||
createBy: "",
|
||||
createTime: "",
|
||||
delFlag: "",
|
||||
icon: "",
|
||||
keepAlive: "",
|
||||
menuId: "",
|
||||
menuType: "",
|
||||
parentId: "",
|
||||
path: "",
|
||||
embedded: '0',
|
||||
sortOrder: 0,
|
||||
updateBy: "",
|
||||
updateTime: "",
|
||||
visible: "1",
|
||||
id: '-1', name: '根菜单', children: []
|
||||
};
|
||||
menu.children = res.data;
|
||||
state.parentData.push(menu)
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
const showembedded = ref(false)
|
||||
|
||||
|
||||
|
||||
watch(() => state.ruleForm.path, (val) => {
|
||||
if (val.startsWith('http')) {
|
||||
showembedded.value = true
|
||||
} else {
|
||||
showembedded.value = false
|
||||
state.ruleForm.embedded = '0'
|
||||
}
|
||||
})
|
||||
|
||||
const dataRules = reactive({
|
||||
menType: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
parentId: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
path: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
permission: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
sortOrder: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
keepAlive: [{ required: true, message: "姓名不能为空", trigger: "blur" }]
|
||||
})
|
||||
// 打开弹窗
|
||||
const openDialog = (type: string, row?: any) => {
|
||||
if (row?.id && type === 'edit') {
|
||||
state.ruleForm.id = row.id
|
||||
// 模拟数据，实际请走接口
|
||||
loading.value = true
|
||||
info(row.id).then(res => {
|
||||
Object.assign(state.ruleForm, res.data)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
nextTick(() => {
|
||||
menuDialogFormRef?.value?.resetFields();
|
||||
state.ruleForm.parentId = row?.id || '-1'
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
// 定义变量内容
|
||||
const menuDialogFormRef = ref();
|
||||
// 定义需要的数据
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
id: '',
|
||||
menuId: '',
|
||||
name: '',
|
||||
permission: '',
|
||||
parentId: '',
|
||||
icon: '',
|
||||
path: '',
|
||||
sortOrder: 0,
|
||||
menuType: '0',
|
||||
keepAlive: '0',
|
||||
visible: '1',
|
||||
embedded: '0',
|
||||
},
|
||||
parentData: [] as any[], // 上级菜单数据
|
||||
});
|
||||
|
||||
}
|
||||
visible.value = true;
|
||||
getMenuData();
|
||||
};
|
||||
// 从后端获取菜单信息
|
||||
const getMenuData = () => {
|
||||
state.parentData = []
|
||||
pageList({
|
||||
type: '0'
|
||||
}).then(res => {
|
||||
let menu = {
|
||||
createBy: "",
|
||||
createTime: "",
|
||||
delFlag: "",
|
||||
icon: "",
|
||||
keepAlive: "",
|
||||
menuId: "",
|
||||
menuType: "",
|
||||
parentId: "",
|
||||
path: "",
|
||||
embedded: '0',
|
||||
sortOrder: 0,
|
||||
updateBy: "",
|
||||
updateTime: "",
|
||||
visible: "1",
|
||||
id: '-1', name: '根菜单', children: []
|
||||
};
|
||||
menu.children = res.data;
|
||||
state.parentData.push(menu)
|
||||
})
|
||||
};
|
||||
|
||||
// 保存数据
|
||||
const onSubmit = () => {
|
||||
// 保存 调用刷新
|
||||
if (state.ruleForm.id) {
|
||||
loading.value = true
|
||||
update(state.ruleForm).then(() => {
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
|
||||
const showembedded = ref(false)
|
||||
|
||||
|
||||
watch(() => state.ruleForm.path, (val) => {
|
||||
if (val.startsWith('http')) {
|
||||
showembedded.value = true
|
||||
} else {
|
||||
showembedded.value = false
|
||||
state.ruleForm.embedded = '0'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
loading.value = true
|
||||
addObj(state.ruleForm).then(() => {
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
|
||||
const dataRules = reactive({
|
||||
menType: [{required: true, message: "菜单类型不能为空", trigger: "blur"}],
|
||||
parentId: [{required: true, message: "上级菜单不能为空", trigger: "blur"}],
|
||||
name: [{required: true, message: "菜单名称不能为空", trigger: "blur"}],
|
||||
path: [{required: true, message: "路由路径不能为空", trigger: "blur"}
|
||||
, {validator: rule.noChinese, trigger: 'blur'}],
|
||||
permission: [{required: true, message: "排序不能为空", trigger: "blur"}],
|
||||
visible: [{required: true, message: "显示不能为空", trigger: "blur"}],
|
||||
sortOrder: [{required: true, message: "排序不能为空", trigger: "blur"}],
|
||||
keepAlive: [{required: true, message: "缓冲不能为空", trigger: "blur"}]
|
||||
})
|
||||
}
|
||||
// 打开弹窗
|
||||
const openDialog = (type: string, row?: any) => {
|
||||
if (row?.id && type === 'edit') {
|
||||
state.ruleForm.id = row.id
|
||||
// 模拟数据，实际请走接口
|
||||
loading.value = true
|
||||
info(row.id).then(res => {
|
||||
Object.assign(state.ruleForm, res.data)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
nextTick(() => {
|
||||
menuDialogFormRef?.value?.resetFields();
|
||||
state.ruleForm.parentId = row?.id || '-1'
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
visible.value = true;
|
||||
getMenuData();
|
||||
};
|
||||
|
||||
// 暴露变量 只有暴漏出来的变量 父组件才能使用
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
// 保存数据
|
||||
const onSubmit = () => {
|
||||
// 保存 调用刷新
|
||||
if (state.ruleForm.id) {
|
||||
loading.value = true
|
||||
update(state.ruleForm).then(() => {
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
loading.value = true
|
||||
addObj(state.ruleForm).then(() => {
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// 暴露变量 只有暴漏出来的变量 父组件才能使用
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,164 +1,167 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" :close-on-click-modal="false"
|
||||
:title="form.publicId ? $t('common.editBtn') : $t('common.addBtn')" draggable>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.publicName')" prop="publicName">
|
||||
<el-input v-model="form.publicName" :placeholder="t('param.inputpublicNameTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-dialog :close-on-click-modal="false" :title="form.publicId ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="form" :rules="dataRules" formDialogRef label-width="90px" ref="dataFormRef">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.publicName')" prop="publicName">
|
||||
<el-input :placeholder="t('param.inputpublicNameTip')" v-model="form.publicName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.publicKey')" prop="publicKey">
|
||||
<el-input v-model="form.publicKey" :placeholder="t('param.inputpublicKeyTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.publicKey')" prop="publicKey">
|
||||
<el-input :placeholder="t('param.inputpublicKeyTip')" v-model="form.publicKey"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.publicValue')" prop="publicValue">
|
||||
<el-input v-model="form.publicValue" :placeholder="t('param.inputpublicValueTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.publicValue')" prop="publicValue">
|
||||
<el-input :placeholder="t('param.inputpublicValueTip')" v-model="form.publicValue"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.status')" prop="status">
|
||||
<el-select v-model="form.status" :placeholder="t('param.inputstatusTip')">
|
||||
<el-option v-for="(item, index) in status_type" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.status')" prop="status">
|
||||
<el-select :placeholder="t('param.inputstatusTip')" v-model="form.status">
|
||||
<el-option :key="index" :label="item.label" :value="item.value"
|
||||
v-for="(item, index) in status_type"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.validateCode')" prop="validateCode">
|
||||
<el-input v-model="form.validateCode" :placeholder="t('param.inputvalidateCodeTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.validateCode')" prop="validateCode">
|
||||
<el-input :placeholder="t('param.inputvalidateCodeTip')" v-model="form.validateCode"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.publicType')" prop="publicType">
|
||||
<el-select v-model="form.publicType" :placeholder="t('param.inputpublicTypeTip')">
|
||||
<el-option v-for="(item, index) in param_type" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.publicType')" prop="publicType">
|
||||
<el-select :placeholder="t('param.inputpublicTypeTip')" v-model="form.publicType">
|
||||
<el-option :key="index" :label="item.label" :value="item.value"
|
||||
v-for="(item, index) in param_type"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.systemFlag')" prop="systemFlag">
|
||||
<el-select v-model="form.systemFlag" :placeholder="t('param.inputsystemFlagTip')">
|
||||
<el-option v-for="(item, index) in dict_type" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('param.systemFlag')" prop="systemFlag">
|
||||
<el-select :placeholder="t('param.inputsystemFlagTip')" v-model="form.systemFlag">
|
||||
<el-option :key="index" :label="item.label" :value="item.value"
|
||||
v-for="(item, index) in dict_type"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button formDialogRef @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button formDialogRef type="primary" @click="onSubmit">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
<el-button @click="visible = false" formDialogRef>{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" formDialogRef type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="SysPublicParamDialog" setup>
|
||||
// 定义子组件向父组件传值/事件
|
||||
import {useDict} from '/@/hooks/dict';
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {addObj, getObj, putObj} from '/@/api/admin/param'
|
||||
import {useI18n} from "vue-i18n"
|
||||
// 定义子组件向父组件传值/事件
|
||||
import {useDict} from '/@/hooks/dict';
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {addObj, getObj, putObj} from '/@/api/admin/param'
|
||||
import {useI18n} from "vue-i18n"
|
||||
import {rule} from "/@/utils/validate";
|
||||
|
||||
const emit = defineEmits(['refresh']);
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
const {t} = useI18n();
|
||||
const {t} = useI18n();
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
// 定义字典
|
||||
const {dict_type, status_type, param_type} = useDict('dict_type', 'status_type', 'param_type')
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
// 定义字典
|
||||
const {dict_type, status_type, param_type} = useDict('dict_type', 'status_type', 'param_type')
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
publicId: '',
|
||||
publicName: '',
|
||||
publicKey: '',
|
||||
publicValue: '',
|
||||
status: '0',
|
||||
validateCode: '',
|
||||
publicType: '',
|
||||
systemFlag: '0',
|
||||
});
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
publicId: '',
|
||||
publicName: '',
|
||||
publicKey: '',
|
||||
publicValue: '',
|
||||
status: '0',
|
||||
validateCode: '',
|
||||
publicType: '',
|
||||
systemFlag: '0',
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = reactive({
|
||||
publicName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
||||
publicKey: [{ required: true, message: '参数键不能为空', trigger: 'blur' }],
|
||||
publicValue: [{ required: true, message: '参数值不能为空', trigger: 'blur' }],
|
||||
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
|
||||
validateCode: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
|
||||
publicType: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
|
||||
})
|
||||
// 定义校验规则
|
||||
const dataRules = reactive({
|
||||
publicName: [{required: true, message: '名称不能为空', trigger: 'blur'}],
|
||||
publicKey: [{required: true, message: '参数键不能为空', trigger: 'blur'}
|
||||
, {validator: rule.validatorKey, trigger: 'blur'}],
|
||||
publicValue: [{required: true, message: '参数值不能为空', trigger: 'blur'}],
|
||||
status: [{required: true, message: '状态不能为空', trigger: 'blur'}],
|
||||
validateCode: [{required: true, message: '编码不能为空', trigger: 'blur'}],
|
||||
publicType: [{required: true, message: '类型不能为空', trigger: 'blur'}],
|
||||
systemFlag: [{required: true, message: '类型不能为空', trigger: 'blur'}],
|
||||
})
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.publicId = ''
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.publicId = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// 获取sysPublicParam信息
|
||||
if (id) {
|
||||
form.publicId = id
|
||||
getsysPublicParamData(id)
|
||||
}
|
||||
};
|
||||
// 获取sysPublicParam信息
|
||||
if (id) {
|
||||
form.publicId = id
|
||||
getsysPublicParamData(id)
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 更新
|
||||
if (form.publicId) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 更新
|
||||
if (form.publicId) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// 初始化表单数据
|
||||
const getsysPublicParamData = (id: string) => {
|
||||
// 获取数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
})
|
||||
};
|
||||
|
||||
// 初始化表单数据
|
||||
const getsysPublicParamData = (id: string) => {
|
||||
// 获取数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
})
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,209 +1,217 @@
|
||||
<template>
|
||||
<el-dialog :title="form.roleId ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
|
||||
:close-on-click-modal="false" draggable>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="90px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysrole.roleName')" prop="roleName">
|
||||
<el-input v-model="form.roleName" :placeholder="$t('sysrole.please_enter_a_role_name')" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysrole.roleCode')" prop="roleCode">
|
||||
<el-input v-model="form.roleCode" :placeholder="$t('sysrole.please_enter_the_role_Code')" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item :label="$t('sysrole.roleDesc')" prop="roleDesc">
|
||||
<el-input v-model="form.roleDesc" type="textarea" :placeholder="$t('sysrole.please_enter_the_role_description')" maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item :label="$t('sysrole.menu_authority')" prop="dsType">
|
||||
<el-select v-model="form.dsType" :placeholder="$t('sysrole.please_select')" clearable class="w100">
|
||||
<el-option v-for="item in dictType" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20" v-if="form.dsType === 1">
|
||||
<el-form-item>
|
||||
<el-tree show-checkbox ref="deptTreeRef" :check-strictly="true" :data="dataForm.deptData"
|
||||
:props="dataForm.deptProps" :default-checked-keys="dataForm.checkedDsScope" node-key="id"
|
||||
highlight-current default-expand-all />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-dialog :close-on-click-modal="false" :title="form.roleId ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="form" :rules="dataRules" label-width="90px" ref="dataFormRef">
|
||||
<el-row :gutter="35">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysrole.roleName')" prop="roleName">
|
||||
<el-input :placeholder="$t('sysrole.please_enter_a_role_name')" clearable
|
||||
v-model="form.roleName"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysrole.roleCode')" prop="roleCode">
|
||||
<el-input :placeholder="$t('sysrole.please_enter_the_role_Code')" clearable
|
||||
v-model="form.roleCode"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24" class="mb20">
|
||||
<el-form-item :label="$t('sysrole.roleDesc')" prop="roleDesc">
|
||||
<el-input :placeholder="$t('sysrole.please_enter_the_role_description')" maxlength="150"
|
||||
type="textarea"
|
||||
v-model="form.roleDesc"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24" class="mb20">
|
||||
<el-form-item :label="$t('sysrole.menu_authority')" prop="dsType">
|
||||
<el-select :placeholder="$t('sysrole.please_select')" class="w100" clearable
|
||||
v-model="form.dsType">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value"
|
||||
v-for="item in dictType"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20" v-if="form.dsType === 1">
|
||||
<el-form-item>
|
||||
<el-tree :check-strictly="true" :data="dataForm.deptData" :default-checked-keys="dataForm.checkedDsScope" :props="dataForm.deptProps"
|
||||
default-expand-all highlight-current
|
||||
node-key="id"
|
||||
ref="deptTreeRef" show-checkbox/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false" >{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit" >{{ $t('common.confirmButtonText') }}</el-button>
|
||||
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemRoleDialog">
|
||||
import { rule } from '/@/utils/validate';
|
||||
<script lang="ts" name="systemRoleDialog" setup>
|
||||
import {rule} from '/@/utils/validate';
|
||||
import {depttree} from '/@/api/admin/dept'
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {addObj, getObj, getObjByCode, putObj} from '/@/api/admin/role'
|
||||
import {useI18n} from "vue-i18n"
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
import { depttree } from '/@/api/admin/dept'
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { getObj, addObj, putObj, getObjByCode } from '/@/api/admin/role'
|
||||
import { useI18n } from "vue-i18n"
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const {t} = useI18n();
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const deptTreeRef = ref()
|
||||
const visible = ref(false)
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const deptTreeRef = ref()
|
||||
const visible = ref(false)
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
roleId: '',
|
||||
roleName: '',
|
||||
roleCode: '',
|
||||
roleDesc: '',
|
||||
dsType: 0,
|
||||
dsScope: ''
|
||||
});
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
roleId: '',
|
||||
roleName: '',
|
||||
roleCode: '',
|
||||
roleDesc: '',
|
||||
dsType: 0,
|
||||
dsScope: ''
|
||||
});
|
||||
|
||||
// 页面对应元数据
|
||||
const dataForm = reactive({
|
||||
deptData: [],
|
||||
checkedDsScope: [],
|
||||
deptProps: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
});
|
||||
// 页面对应元数据
|
||||
const dataForm = reactive({
|
||||
deptData: [],
|
||||
checkedDsScope: [],
|
||||
deptProps: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
});
|
||||
|
||||
// 判断ROLE_CODE 是否存在
|
||||
const validateRoleCode = (rule: any, value: any, callback: any) => {
|
||||
getObjByCode(value).then((response: any) => {
|
||||
if (form.roleId !== '') callback()
|
||||
const result = response.data
|
||||
if (result && result.length !== 0) {
|
||||
callback(new Error('同名角色标识已存在'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref(
|
||||
{
|
||||
roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
roleCode: [
|
||||
{ required: true, message: '角色标识不能为空', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
|
||||
{ validator: rule.validatorKey, trigger: 'blur' },
|
||||
{ validator: validateRoleCode, trigger: 'blur' }
|
||||
],
|
||||
roleDesc: [{ max: 128, message: '长度在 128 个字符内', trigger: 'blur' }],
|
||||
dsType: [{ required: true, message: "请选择数据权限类型", trigger: "blur" }]
|
||||
}
|
||||
)
|
||||
|
||||
const dictType = ref([{
|
||||
label: '全部',
|
||||
value: 0
|
||||
}, {
|
||||
label: '自定义',
|
||||
value: 1
|
||||
}, {
|
||||
label: '本级及子级',
|
||||
value: 2
|
||||
}, {
|
||||
label: '本级',
|
||||
value: 3
|
||||
}])
|
||||
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.roleId = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// 获取角色信息
|
||||
if (id) {
|
||||
form.roleId = id
|
||||
getRoleData(id)
|
||||
}
|
||||
|
||||
getDeptData();
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
if (form.dsType === 1) {
|
||||
form.dsScope = deptTreeRef.value.getCheckedKeys().join(',')
|
||||
} else {
|
||||
form.dsScope = ''
|
||||
}
|
||||
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
// 判断ROLE_CODE 是否存在
|
||||
const validateRoleCode = (rule: any, value: any, callback: any) => {
|
||||
getObjByCode(value).then((response: any) => {
|
||||
if (form.roleId !== '') callback()
|
||||
const result = response.data
|
||||
if (result && result.length !== 0) {
|
||||
callback(new Error('同名角色标识已存在'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 更新
|
||||
if (form.roleId) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
// 定义校验规则
|
||||
const dataRules = ref(
|
||||
{
|
||||
roleName: [{required: true, message: '角色名称不能为空', trigger: 'blur'},
|
||||
{min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
|
||||
],
|
||||
roleCode: [
|
||||
{required: true, message: '角色标识不能为空', trigger: 'blur'},
|
||||
{min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'},
|
||||
{validator: rule.validatorKey, trigger: 'blur'},
|
||||
{validator: validateRoleCode, trigger: 'blur'}
|
||||
],
|
||||
roleDesc: [{max: 128, message: '长度在 128 个字符内', trigger: 'blur'}],
|
||||
dsType: [{required: true, message: "请选择数据权限类型", trigger: "blur"}],
|
||||
menu_authority: [{required: true, message: "菜单权限不能为空", trigger: "blur"}]
|
||||
}
|
||||
)
|
||||
|
||||
const dictType = ref([{
|
||||
label: '全部',
|
||||
value: 0
|
||||
}, {
|
||||
label: '自定义',
|
||||
value: 1
|
||||
}, {
|
||||
label: '本级及子级',
|
||||
value: 2
|
||||
}, {
|
||||
label: '本级',
|
||||
value: 3
|
||||
}])
|
||||
|
||||
|
||||
};
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.roleId = ''
|
||||
|
||||
// 初始化角色数据
|
||||
const getRoleData = (id: string) => {
|
||||
// 获取部门数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
if (res.data.dsScope) {
|
||||
dataForm.checkedDsScope = (res.data.dsScope).split(',')
|
||||
} else {
|
||||
dataForm.checkedDsScope = []
|
||||
}
|
||||
})
|
||||
};
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// 获取角色信息
|
||||
if (id) {
|
||||
form.roleId = id
|
||||
getRoleData(id)
|
||||
}
|
||||
|
||||
getDeptData();
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
if (form.dsType === 1) {
|
||||
form.dsScope = deptTreeRef.value.getCheckedKeys().join(',')
|
||||
} else {
|
||||
form.dsScope = ''
|
||||
}
|
||||
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 更新
|
||||
if (form.roleId) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// 获取菜单结构数据
|
||||
const getDeptData = () => {
|
||||
depttree().then((res: any) => {
|
||||
dataForm.deptData = res.data
|
||||
})
|
||||
};
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
// 初始化角色数据
|
||||
const getRoleData = (id: string) => {
|
||||
// 获取部门数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
if (res.data.dsScope) {
|
||||
dataForm.checkedDsScope = (res.data.dsScope).split(',')
|
||||
} else {
|
||||
dataForm.checkedDsScope = []
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
// 获取菜单结构数据
|
||||
const getDeptData = () => {
|
||||
depttree().then((res: any) => {
|
||||
dataForm.deptData = res.data
|
||||
})
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,151 +1,157 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" :close-on-click-modal="false"
|
||||
:title="form.id ? $t('common.editBtn') : $t('common.addBtn')" draggable>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('social.type')" prop="type">
|
||||
<el-select v-model="form.type" :placeholder="t('social.inputTypeTip')">
|
||||
<el-option v-for="(item, index) in social_type" :key="index" :label="item.label" :value="item.value">
|
||||
{{ item.label }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('social.remark')" prop="remark">
|
||||
<el-input v-model="form.remark" :placeholder="t('social.inputRemarkTip')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('social.appId')" prop="appId">
|
||||
<el-input v-model="form.appId" :placeholder="t('social.inputAppIdTip')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('social.appSecret')" prop="appSecret">
|
||||
<el-input v-model="form.appSecret" :placeholder="t('social.inputAppSecretTip')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('social.redirectUrl')" prop="redirectUrl">
|
||||
<el-input v-model="form.redirectUrl" :placeholder="t('social.inputRedirectUrlTip')" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('social.ext')" prop="ext">
|
||||
<el-input v-model="form.ext" :placeholder="t('social.inputExtTip')" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-dialog :close-on-click-modal="false" :title="form.id ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="form" :rules="dataRules" formDialogRef label-width="90px" ref="dataFormRef">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('social.type')" prop="type">
|
||||
<el-select :placeholder="t('social.inputTypeTip')" v-model="form.type">
|
||||
<el-option :key="index" :label="item.label" :value="item.value"
|
||||
v-for="(item, index) in social_type">
|
||||
{{ item.label }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('social.remark')" prop="remark">
|
||||
<el-input :placeholder="t('social.inputRemarkTip')" v-model="form.remark"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('social.appId')" prop="appId">
|
||||
<el-input :placeholder="t('social.inputAppIdTip')" v-model="form.appId"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('social.appSecret')" prop="appSecret">
|
||||
<el-input :placeholder="t('social.inputAppSecretTip')" v-model="form.appSecret"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('social.redirectUrl')" prop="redirectUrl">
|
||||
<el-input :placeholder="t('social.inputRedirectUrlTip')" type="textarea"
|
||||
v-model="form.redirectUrl"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('social.ext')" prop="ext">
|
||||
<el-input :placeholder="t('social.inputExtTip')" type="textarea" v-model="form.ext"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button formDialogRef @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button formDialogRef type="primary" @click="onSubmit">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
<el-button @click="visible = false" formDialogRef>{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" formDialogRef type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="AppSocialDetailsDialog" setup>
|
||||
// 定义子组件向父组件传值/事件
|
||||
import { useDict } from '/@/hooks/dict';
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { addObj, getObj, putObj } from '/@/api/admin/social'
|
||||
import { useI18n } from "vue-i18n"
|
||||
// 定义子组件向父组件传值/事件
|
||||
import {useDict} from '/@/hooks/dict';
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {addObj, getObj, putObj} from '/@/api/admin/social'
|
||||
import {useI18n} from "vue-i18n"
|
||||
import {rule} from "/@/utils/validate";
|
||||
|
||||
const emit = defineEmits(['refresh']);
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const {t} = useI18n();
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
// 定义字典
|
||||
const { social_type } = useDict('social_type')
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
// 定义字典
|
||||
const {social_type} = useDict('social_type')
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
type: '',
|
||||
remark: '',
|
||||
appId: '',
|
||||
appSecret: '',
|
||||
redirectUrl: '',
|
||||
ext: '',
|
||||
});
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
type: '',
|
||||
remark: '',
|
||||
appId: '',
|
||||
appSecret: '',
|
||||
redirectUrl: '',
|
||||
ext: '',
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
|
||||
appId: [{ required: true, message: 'appId不能为空', trigger: 'blur' }],
|
||||
appSecret: [{ required: true, message: 'appSecret不能为空', trigger: 'blur' }],
|
||||
})
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
type: [{required: true, message: '类型不能为空', trigger: 'blur'}],
|
||||
appId: [{required: true, message: 'appId不能为空', trigger: 'blur'}],
|
||||
remark: [{required: true, message: '描述不能为空', trigger: 'blur'}],
|
||||
redirectUrl: [{required: true, message: '回调地址不能为空', trigger: 'blur'}
|
||||
, {validator: rule.url, trigger: 'blur'}],
|
||||
appSecret: [{required: true, message: 'appSecret不能为空', trigger: 'blur'}],
|
||||
})
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// 获取appSocialDetails信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getappSocialDetailsData(id)
|
||||
}
|
||||
};
|
||||
// 获取appSocialDetails信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getappSocialDetailsData(id)
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (form.appSecret && form.appSecret.indexOf("******") >= 0) {
|
||||
form.appSecret = ''
|
||||
}
|
||||
|
||||
if (form.appId && form.appId.indexOf("******") >= 0) {
|
||||
form.appId = ''
|
||||
}
|
||||
|
||||
// 更新
|
||||
if (form.id) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (form.appSecret && form.appSecret.indexOf("******") >= 0) {
|
||||
form.appSecret = ''
|
||||
}
|
||||
// 初始化表单数据
|
||||
const getappSocialDetailsData = (id: string) => {
|
||||
// 获取数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
})
|
||||
};
|
||||
|
||||
if (form.appId && form.appId.indexOf("******") >= 0) {
|
||||
form.appId = ''
|
||||
}
|
||||
|
||||
// 更新
|
||||
if (form.id) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化表单数据
|
||||
const getappSocialDetailsData = (id: string) => {
|
||||
// 获取数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
})
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,267 +1,279 @@
|
||||
<template>
|
||||
<div class="system-user-dialog-container">
|
||||
<el-dialog :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
|
||||
:close-on-click-modal="false" draggable>
|
||||
<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="90px" v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.username')" prop="username">
|
||||
<el-input v-model="dataForm.username" placeholder="请输入用户名" :disabled="dataForm.userId !== ''"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.password')" prop="password">
|
||||
<el-input v-model="dataForm.password" type="password" placeholder="请输入密码" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.name')" prop="name">
|
||||
<el-input v-model="dataForm.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.phone')" prop="phone">
|
||||
<el-input v-model="dataForm.phone" placeholder="请输入手机号" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.role')" prop="role">
|
||||
<el-select v-model="dataForm.role" placeholder="请选择角色" clearable class="w100" multiple>
|
||||
<el-option v-for="item in roleData" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.post')" prop="post">
|
||||
<el-select v-model="dataForm.post" placeholder="请选择岗位" clearable class="w100" multiple>
|
||||
<el-option v-for="item in postData" :key="item.postId" :label="item.postName" :value="item.postId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.dept')" prop="dept">
|
||||
<el-tree-select v-model="dataForm.deptId" :data="deptData"
|
||||
:props="{ value: 'id', label: 'name', children: 'children' }" class="w100" clearable check-strictly
|
||||
placeholder="请选择所属部门">
|
||||
</el-tree-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<div class="system-user-dialog-container">
|
||||
<el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.username')" prop="username">
|
||||
<el-input :disabled="dataForm.userId !== ''" placeholder="请输入用户名"
|
||||
v-model="dataForm.username"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.password')" prop="password">
|
||||
<el-input clearable placeholder="请输入密码" type="password"
|
||||
v-model="dataForm.password"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.name')" prop="name">
|
||||
<el-input clearable placeholder="请输入姓名" v-model="dataForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.phone')" prop="phone">
|
||||
<el-input clearable placeholder="请输入手机号" v-model="dataForm.phone"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.role')" prop="role">
|
||||
<el-select class="w100" clearable multiple placeholder="请选择角色" v-model="dataForm.role">
|
||||
<el-option :key="item.roleId" :label="item.roleName" :value="item.roleId"
|
||||
v-for="item in roleData"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.post')" prop="post">
|
||||
<el-select class="w100" clearable multiple placeholder="请选择岗位" v-model="dataForm.post">
|
||||
<el-option :key="item.postId" :label="item.postName" :value="item.postId"
|
||||
v-for="item in postData"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.dept')" prop="dept">
|
||||
<el-tree-select :data="deptData" :props="{ value: 'id', label: 'name', children: 'children' }"
|
||||
check-strictly class="w100"
|
||||
clearable placeholder="请选择所属部门"
|
||||
v-model="dataForm.deptId">
|
||||
</el-tree-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.email')" prop="email">
|
||||
<el-input v-model="dataForm.email" placeholder="请输入邮箱" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.nickname')" prop="nickname">
|
||||
<el-input v-model="dataForm.nickname" placeholder="请输入昵称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.lockFlag')" prop="lockFlag">
|
||||
<el-radio-group v-model="dataForm.lockFlag">
|
||||
<el-radio :label="item.value" v-for="(item, index) in lock_flag" border :key="index">{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.email')" prop="email">
|
||||
<el-input clearable placeholder="请输入邮箱" v-model="dataForm.email"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.nickname')" prop="nickname">
|
||||
<el-input clearable placeholder="请输入昵称" v-model="dataForm.nickname"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysuser.lockFlag')" prop="lockFlag">
|
||||
<el-radio-group v-model="dataForm.lockFlag">
|
||||
<el-radio :key="index" :label="item.value" border v-for="(item, index) in lock_flag">{{
|
||||
item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemUserDialog">
|
||||
import { getObj, addObj, putObj, validateUsername, validatePhone } from '/@/api/admin/user'
|
||||
import { list as roleList } from '/@/api/admin/role'
|
||||
import { list as postList } from '/@/api/admin/post'
|
||||
import { depttree } from '/@/api/admin/dept'
|
||||
import { useDict } from "/@/hooks/dict";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { rule } from '/@/utils/validate';
|
||||
<script lang="ts" name="systemUserDialog" setup>
|
||||
import {addObj, getObj, putObj, validatePhone, validateUsername} from '/@/api/admin/user'
|
||||
import {list as roleList} from '/@/api/admin/role'
|
||||
import {list as postList} from '/@/api/admin/post'
|
||||
import {depttree} from '/@/api/admin/dept'
|
||||
import {useDict} from "/@/hooks/dict";
|
||||
import {useI18n} from "vue-i18n";
|
||||
import {useMessage} from '/@/hooks/message';
|
||||
import {rule} from '/@/utils/validate';
|
||||
|
||||
const { t } = useI18n()
|
||||
const {t} = useI18n()
|
||||
|
||||
// 定义刷新表格emit
|
||||
const emit = defineEmits(['refresh']);
|
||||
// @ts-ignore
|
||||
const { lock_flag } = useDict('lock_flag')
|
||||
// 定义刷新表格emit
|
||||
const emit = defineEmits(['refresh']);
|
||||
// @ts-ignore
|
||||
const {lock_flag} = useDict('lock_flag')
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
const deptData = ref<any[]>([])
|
||||
const roleData = ref<any[]>([])
|
||||
const postData = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
const deptData = ref<any[]>([])
|
||||
const roleData = ref<any[]>([])
|
||||
const postData = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const dataForm = reactive({
|
||||
userId: '',
|
||||
username: '',
|
||||
password: '' as String | undefined,
|
||||
salt: '',
|
||||
wxOpenid: '',
|
||||
qqOpenid: '',
|
||||
lockFlag: '0',
|
||||
phone: '' as String | undefined,
|
||||
deptId: '',
|
||||
roleList: [],
|
||||
postList: [],
|
||||
nickname: '',
|
||||
name: '',
|
||||
email: '',
|
||||
post: [] as String[],
|
||||
role: [] as String[],
|
||||
});
|
||||
const dataForm = reactive({
|
||||
userId: '',
|
||||
username: '',
|
||||
password: '' as String | undefined,
|
||||
salt: '',
|
||||
wxOpenid: '',
|
||||
qqOpenid: '',
|
||||
lockFlag: '0',
|
||||
phone: '' as String | undefined,
|
||||
deptId: '',
|
||||
roleList: [],
|
||||
postList: [],
|
||||
nickname: '',
|
||||
name: '',
|
||||
email: '',
|
||||
post: [] as String[],
|
||||
role: [] as String[],
|
||||
});
|
||||
|
||||
const dataRules = ref(
|
||||
{
|
||||
// 用户名校验，不能为空 、长度 5-20、不能和已有数据重复
|
||||
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }
|
||||
, { min: 5, max: 20, message: "用户名称长度必须介于 5 和 20 之间", trigger: "blur" }
|
||||
, {
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validateUsername(rule, value, callback, dataForm.userId !== '')
|
||||
}, trigger: 'blur'
|
||||
}],
|
||||
password: [{ required: true, message: "密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }],
|
||||
// 姓名校验，不能为空、只能是中文
|
||||
name: [{ required: true, message: "姓名不能为空", trigger: "blur" }
|
||||
, { validator: rule.chinese, trigger: 'blur' }
|
||||
],
|
||||
deptId: [{ required: true, message: "部门不能为空", trigger: "blur" }],
|
||||
role: [{ required: true, message: "角色不能为空", trigger: "blur" }],
|
||||
post: [{ required: true, message: "岗位不能为空", trigger: "blur" }],
|
||||
// 手机号校验，不能为空、新增的时不能重复校验
|
||||
phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }
|
||||
, { validator: rule.validatePhone, trigger: 'blur' }
|
||||
, {
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validatePhone(rule, value, callback, dataForm.userId !== '')
|
||||
}, trigger: 'blur'
|
||||
}],
|
||||
email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }]
|
||||
}
|
||||
)
|
||||
const dataRules = ref(
|
||||
{
|
||||
// 用户名校验，不能为空 、长度 5-20、不能和已有数据重复
|
||||
username: [{required: true, message: "用户名不能为空", trigger: "blur"}
|
||||
, {min: 5, max: 20, message: "用户名称长度必须介于 5 和 20 之间", trigger: "blur"}
|
||||
, {
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validateUsername(rule, value, callback, dataForm.userId !== '')
|
||||
}, trigger: 'blur'
|
||||
}],
|
||||
password: [{required: true, message: "密码不能为空", trigger: "blur"}, {
|
||||
min: 6,
|
||||
max: 20,
|
||||
message: "用户密码长度必须介于 5 和 20 之间",
|
||||
trigger: "blur"
|
||||
}],
|
||||
// 姓名校验，不能为空、只能是中文
|
||||
name: [{required: true, message: "姓名不能为空", trigger: "blur"}
|
||||
, {validator: rule.chinese, trigger: 'blur'}
|
||||
],
|
||||
deptId: [{required: true, message: "部门不能为空", trigger: "blur"}],
|
||||
role: [{required: true, message: "角色不能为空", trigger: "blur"}],
|
||||
post: [{required: true, message: "岗位不能为空", trigger: "blur"}],
|
||||
// 手机号校验，不能为空、新增的时不能重复校验
|
||||
phone: [{required: true, message: "手机号不能为空", trigger: "blur"}
|
||||
, {validator: rule.validatePhone, trigger: 'blur'}
|
||||
, {
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validatePhone(rule, value, callback, dataForm.userId !== '')
|
||||
}, trigger: 'blur'
|
||||
}],
|
||||
email: [{type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"]}],
|
||||
lockFlag: [{required: true, message: "状态不能为空", trigger: "blur"}],
|
||||
}
|
||||
)
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = async (id: string) => {
|
||||
visible.value = true
|
||||
dataForm.userId = ''
|
||||
// 打开弹窗
|
||||
const openDialog = async (id: string) => {
|
||||
visible.value = true
|
||||
dataForm.userId = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// 修改获取用户信息
|
||||
if (id) {
|
||||
dataForm.userId = id
|
||||
await getUserData(id)
|
||||
dataForm.password = '******'
|
||||
}
|
||||
// 修改获取用户信息
|
||||
if (id) {
|
||||
dataForm.userId = id
|
||||
await getUserData(id)
|
||||
dataForm.password = '******'
|
||||
}
|
||||
|
||||
// 加载使用的数据
|
||||
getDeptData()
|
||||
getPostData()
|
||||
getRoleData()
|
||||
};
|
||||
// 加载使用的数据
|
||||
getDeptData()
|
||||
getPostData()
|
||||
getRoleData()
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
// 更新方法
|
||||
if (dataForm.userId) {
|
||||
if (dataForm.phone && dataForm.phone.indexOf("*") >= 0) {
|
||||
dataForm.phone = undefined
|
||||
}
|
||||
if (dataForm.password && dataForm.password.indexOf("******") >= 0) {
|
||||
dataForm.password = undefined
|
||||
}
|
||||
loading.value = true
|
||||
putObj(dataForm).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false; // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else { // 新增方法
|
||||
if (dataForm.phone && dataForm.phone.indexOf("*") > 0) {
|
||||
dataForm.phone = undefined
|
||||
}
|
||||
loading.value = true
|
||||
addObj(dataForm).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
// 初始化部门数据
|
||||
const getUserData = (id: string) => {
|
||||
// 获取部门数据
|
||||
loading.value = true
|
||||
return getObj(id).then(res => {
|
||||
Object.assign(dataForm, res.data)
|
||||
if (res.data.roleList) {
|
||||
dataForm.role = []
|
||||
res.data.roleList.map((item: any) => {
|
||||
dataForm.role.push(item.roleId)
|
||||
})
|
||||
}
|
||||
if (res.data.postList) {
|
||||
dataForm.post = []
|
||||
res.data.postList.map((item: any) => {
|
||||
dataForm.post.push(item.postId)
|
||||
})
|
||||
}
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
};
|
||||
|
||||
// 初始化部门数据
|
||||
const getDeptData = () => {
|
||||
// 获取部门数据
|
||||
depttree().then(res => {
|
||||
deptData.value = res.data
|
||||
})
|
||||
};
|
||||
|
||||
// 岗位数据
|
||||
const getPostData = () => {
|
||||
postList().then(res => {
|
||||
postData.value = res.data
|
||||
})
|
||||
}
|
||||
// 更新方法
|
||||
if (dataForm.userId) {
|
||||
if (dataForm.phone && dataForm.phone.indexOf("*") >= 0) {
|
||||
dataForm.phone = undefined
|
||||
}
|
||||
if (dataForm.password && dataForm.password.indexOf("******") >= 0) {
|
||||
dataForm.password = undefined
|
||||
}
|
||||
loading.value = true
|
||||
putObj(dataForm).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false; // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else { // 新增方法
|
||||
if (dataForm.phone && dataForm.phone.indexOf("*") > 0) {
|
||||
dataForm.phone = undefined
|
||||
}
|
||||
loading.value = true
|
||||
addObj(dataForm).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
// 角色数据
|
||||
const getRoleData = () => {
|
||||
roleList().then(res => {
|
||||
roleData.value = res.data
|
||||
})
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
// 初始化部门数据
|
||||
const getUserData = (id: string) => {
|
||||
// 获取部门数据
|
||||
loading.value = true
|
||||
return getObj(id).then(res => {
|
||||
Object.assign(dataForm, res.data)
|
||||
if (res.data.roleList) {
|
||||
dataForm.role = []
|
||||
res.data.roleList.map((item: any) => {
|
||||
dataForm.role.push(item.roleId)
|
||||
})
|
||||
}
|
||||
if (res.data.postList) {
|
||||
dataForm.post = []
|
||||
res.data.postList.map((item: any) => {
|
||||
dataForm.post.push(item.postId)
|
||||
})
|
||||
}
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
};
|
||||
|
||||
// 初始化部门数据
|
||||
const getDeptData = () => {
|
||||
// 获取部门数据
|
||||
depttree().then(res => {
|
||||
deptData.value = res.data
|
||||
})
|
||||
};
|
||||
|
||||
// 岗位数据
|
||||
const getPostData = () => {
|
||||
postList().then(res => {
|
||||
postData.value = res.data
|
||||
})
|
||||
}
|
||||
// 角色数据
|
||||
const getRoleData = () => {
|
||||
roleList().then(res => {
|
||||
roleData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,180 +1,189 @@
|
||||
<template>
|
||||
<el-dialog :title="state.ruleForm.menuId ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" :close-on-click-modal="false" draggable>
|
||||
<el-form ref="menuDialogFormRef" :model="state.ruleForm" :rules="dataRules" label-width="90px" v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.menuType')" prop="menType">
|
||||
<el-radio-group v-model="state.ruleForm.menuType">
|
||||
<el-radio-button label="0">页面</el-radio-button>
|
||||
<el-radio-button label="1">按钮</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.parentId')" prop="parentId">
|
||||
<el-tree-select v-model="state.ruleForm.parentId" :data="state.parentData" default-expand-all
|
||||
:props="{ value: 'id', label: 'name', children: 'children' }" class="w100" clearable check-strictly
|
||||
placeholder="请选择上级菜单">
|
||||
</el-tree-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.name')" prop="name">
|
||||
<el-input v-model="state.ruleForm.name" clearable placeholder="请输入菜单名称"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType !== '1'">
|
||||
<el-form-item :label="$t('sysmenu.path')" prop="path">
|
||||
<el-input v-model="state.ruleForm.path" placeholder="请输入路由地址" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.permission')" prop="permission">
|
||||
<el-input v-model="state.ruleForm.permission" maxlength="50" placeholder="请权限标识" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.sortOrder')" prop="sortOrder">
|
||||
<el-input-number v-model="state.ruleForm.sortOrder" :min="0" controls-position="right" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType !== '1'">
|
||||
<el-form-item :label="$t('sysmenu.visible')" prop="visible">
|
||||
<el-radio-group v-model="state.ruleForm.visible">
|
||||
<el-radio-button label="1">显示</el-radio-button>
|
||||
<el-radio-button label="0">隐藏</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-dialog :close-on-click-modal="false" :title="state.ruleForm.menuId ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="state.ruleForm" :rules="dataRules" label-width="90px" ref="menuDialogFormRef"
|
||||
v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.menuType')" prop="menType">
|
||||
<el-radio-group v-model="state.ruleForm.menuType">
|
||||
<el-radio-button label="0">页面</el-radio-button>
|
||||
<el-radio-button label="1">按钮</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.parentId')" prop="parentId">
|
||||
<el-tree-select :data="state.parentData" :props="{ value: 'id', label: 'name', children: 'children' }" check-strictly
|
||||
class="w100" clearable
|
||||
default-expand-all placeholder="请选择上级菜单"
|
||||
v-model="state.ruleForm.parentId">
|
||||
</el-tree-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.name')" prop="name">
|
||||
<el-input clearable placeholder="请输入菜单名称" v-model="state.ruleForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType !== '1'">
|
||||
<el-form-item :label="$t('sysmenu.path')" prop="path">
|
||||
<el-input placeholder="请输入路由地址" v-model="state.ruleForm.path"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.permission')" prop="permission">
|
||||
<el-input maxlength="50" placeholder="请权限标识" v-model="state.ruleForm.permission"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.sortOrder')" prop="sortOrder">
|
||||
<el-input-number :min="0" controls-position="right" v-model="state.ruleForm.sortOrder"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType !== '1'">
|
||||
<el-form-item :label="$t('sysmenu.visible')" prop="visible">
|
||||
<el-radio-group v-model="state.ruleForm.visible">
|
||||
<el-radio-button label="1">显示</el-radio-button>
|
||||
<el-radio-button label="0">隐藏</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false" >{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit" >{{ $t('common.confirmButtonText') }}</el-button>
|
||||
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemMenuDialog">
|
||||
import { info, pageList, update, addObj } from "/@/api/app/appmenu";
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
<script lang="ts" name="systemMenuDialog" setup>
|
||||
import {addObj, info, pageList, update, validatePermission} from "/@/api/app/appmenu";
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {rule} from "/@/utils/validate";
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
// 引入组件
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
// 引入组件
|
||||
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
// 定义变量内容
|
||||
const menuDialogFormRef = ref();
|
||||
// 定义需要的数据
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
menuId: '',
|
||||
name: '',
|
||||
permission: '',
|
||||
parentId: '',
|
||||
icon: '',
|
||||
path: '',
|
||||
sortOrder: 0,
|
||||
menuType: '0',
|
||||
visible: '',
|
||||
id: ''
|
||||
},
|
||||
parentData: [] as any[], // 上级菜单数据
|
||||
});
|
||||
|
||||
// 从后端获取菜单信息
|
||||
const getMenuData = () => {
|
||||
state.parentData = []
|
||||
loading.value = true
|
||||
pageList().then(res => {
|
||||
let menu = {
|
||||
createBy: "",
|
||||
createTime: "",
|
||||
delFlag: "",
|
||||
icon: "",
|
||||
keepAlive: "",
|
||||
menuId: "",
|
||||
menuType: "",
|
||||
parentId: "",
|
||||
path: "",
|
||||
sortOrder: 0,
|
||||
updateBy: "",
|
||||
updateTime: "",
|
||||
visible: "",
|
||||
id: '-1', name: '根菜单', children: [] as any[]
|
||||
};
|
||||
menu.children = res.data;
|
||||
state.parentData.push(menu)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
const dataRules = reactive({
|
||||
menType: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
parentId: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
path: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
permission: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
sortOrder: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
keepAlive: [{ required: true, message: "姓名不能为空", trigger: "blur" }]
|
||||
})
|
||||
// 打开弹窗
|
||||
const openDialog = (type: string, row?: any) => {
|
||||
if (row?.id && type === 'edit') {
|
||||
state.ruleForm.id = row.id
|
||||
// 模拟数据，实际请走接口
|
||||
loading.value = true
|
||||
info(row.id).then(res => {
|
||||
Object.assign(state.ruleForm,res.data)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
nextTick(() => {
|
||||
menuDialogFormRef?.value?.resetFields();
|
||||
state.ruleForm.parentId = row?.id || '-1'
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
// 定义变量内容
|
||||
const menuDialogFormRef = ref();
|
||||
// 定义需要的数据
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
menuId: '',
|
||||
name: '',
|
||||
permission: '',
|
||||
parentId: '',
|
||||
icon: '',
|
||||
path: '',
|
||||
sortOrder: 0,
|
||||
menuType: '0',
|
||||
visible: '',
|
||||
id: ''
|
||||
},
|
||||
parentData: [] as any[], // 上级菜单数据
|
||||
});
|
||||
}
|
||||
visible.value = true;
|
||||
getMenuData();
|
||||
};
|
||||
|
||||
// 保存数据
|
||||
const onSubmit = () => {
|
||||
// 保存 调用刷新
|
||||
if (state.ruleForm.id) {
|
||||
loading.value = true
|
||||
update(state.ruleForm).then(() => {
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
// 从后端获取菜单信息
|
||||
const getMenuData = () => {
|
||||
state.parentData = []
|
||||
loading.value = true
|
||||
pageList().then(res => {
|
||||
let menu = {
|
||||
createBy: "",
|
||||
createTime: "",
|
||||
delFlag: "",
|
||||
icon: "",
|
||||
keepAlive: "",
|
||||
menuId: "",
|
||||
menuType: "",
|
||||
parentId: "",
|
||||
path: "",
|
||||
sortOrder: 0,
|
||||
updateBy: "",
|
||||
updateTime: "",
|
||||
visible: "",
|
||||
id: '-1', name: '根菜单', children: [] as any[]
|
||||
};
|
||||
menu.children = res.data;
|
||||
state.parentData.push(menu)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
const dataRules = reactive({
|
||||
name: [{required: true, message: "菜单名称不能为空", trigger: "blur"}],
|
||||
path: [{required: true, message: "路由路径不能为空", trigger: "blur"}
|
||||
, {validate: rule.noChinese, trigger: "blur"}],
|
||||
permission: [{required: true, message: "权限标识不能为空", trigger: "blur"},
|
||||
{validator: rule.validatorKey, trigger: 'blur'},
|
||||
{min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
|
||||
, {
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validatePermission(rule, value, callback, state.ruleForm.menuId !== '')
|
||||
}, trigger: 'blur'
|
||||
}],
|
||||
|
||||
})
|
||||
} else {
|
||||
loading.value = true
|
||||
addObj(state.ruleForm).then(() => {
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
// 打开弹窗
|
||||
const openDialog = (type: string, row?: any) => {
|
||||
if (row?.id && type === 'edit') {
|
||||
state.ruleForm.id = row.id
|
||||
// 模拟数据，实际请走接口
|
||||
loading.value = true
|
||||
info(row.id).then(res => {
|
||||
Object.assign(state.ruleForm, res.data)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
nextTick(() => {
|
||||
menuDialogFormRef?.value?.resetFields();
|
||||
state.ruleForm.parentId = row?.id || '-1'
|
||||
});
|
||||
}
|
||||
visible.value = true;
|
||||
getMenuData();
|
||||
};
|
||||
|
||||
};
|
||||
// 保存数据
|
||||
const onSubmit = () => {
|
||||
// 保存 调用刷新
|
||||
if (state.ruleForm.id) {
|
||||
loading.value = true
|
||||
update(state.ruleForm).then(() => {
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
loading.value = true
|
||||
addObj(state.ruleForm).then(() => {
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
// 暴露变量 只有暴漏出来的变量 父组件才能使用
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露变量 只有暴漏出来的变量 父组件才能使用
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,43 +1,47 @@
|
||||
<template>
|
||||
<el-dialog :title="form.roleId ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
|
||||
:close-on-click-modal="false" draggable>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="90px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('approle.roleName')" prop="roleName">
|
||||
<el-input v-model="form.roleName" :placeholder="$t('approle.please_enter_a_role_name')" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('approle.roleCode')" prop="roleCode">
|
||||
<el-input v-model="form.roleCode" :placeholder="$t('approle.please_enter_the_role_Code')" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item :label="$t('approle.roleDesc')" prop="roleDesc">
|
||||
<el-input v-model="form.roleDesc" type="textarea" :placeholder="$t('approle.please_enter_the_role_description')" maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-dialog :close-on-click-modal="false" :title="form.roleId ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="form" :rules="dataRules" label-width="90px" ref="dataFormRef">
|
||||
<el-row :gutter="35">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('approle.roleName')" prop="roleName">
|
||||
<el-input :placeholder="$t('approle.please_enter_a_role_name')" clearable
|
||||
v-model="form.roleName"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('approle.roleCode')" prop="roleCode">
|
||||
<el-input :placeholder="$t('approle.please_enter_the_role_Code')" clearable
|
||||
v-model="form.roleCode"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24" class="mb20">
|
||||
<el-form-item :label="$t('approle.roleDesc')" prop="roleDesc">
|
||||
<el-input :placeholder="$t('approle.please_enter_the_role_description')" maxlength="150"
|
||||
type="textarea"
|
||||
v-model="form.roleDesc"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false" >{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit" >{{ $t('common.confirmButtonText') }}</el-button>
|
||||
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemRoleDialog">import { rule } from '/@/utils/validate';
|
||||
<script lang="ts" name="systemRoleDialog" setup>import {rule} from '/@/utils/validate';
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {addObj, getObj, putObj, validateAppRoleCode, validateApproleName} from '/@/api/app/approle'
|
||||
import {useI18n} from "vue-i18n"
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { getObj, addObj, putObj } from '/@/api/app/approle'
|
||||
import { useI18n } from "vue-i18n"
|
||||
|
||||
const { t } = useI18n();
|
||||
const {t} = useI18n();
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
@ -46,111 +50,121 @@ const visible = ref(false)
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
roleId: '',
|
||||
roleName: '',
|
||||
roleCode: '',
|
||||
roleDesc: '',
|
||||
dsType: 0,
|
||||
dsScope: ''
|
||||
roleId: '',
|
||||
roleName: '',
|
||||
roleCode: '',
|
||||
roleDesc: '',
|
||||
dsType: 0,
|
||||
dsScope: ''
|
||||
});
|
||||
|
||||
// 页面对应元数据
|
||||
const dataForm = reactive({
|
||||
deptData: [],
|
||||
checkedDsScope: [],
|
||||
deptProps: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
deptData: [],
|
||||
checkedDsScope: [],
|
||||
deptProps: {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref(
|
||||
{
|
||||
roleName: [
|
||||
{ required: true, message: '角色名称不能为空', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
roleCode: [
|
||||
{ required: true, message: '角色标识不能为空', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
|
||||
{ validator: rule.validatorKey, trigger: 'blur' }
|
||||
],
|
||||
roleDesc: [{ max: 128, message: '长度在 128 个字符内', trigger: 'blur' }],
|
||||
dsType: [{ required: true, message: "请选择数据权限类型", trigger: "blur" }]
|
||||
}
|
||||
{
|
||||
roleName: [
|
||||
{required: true, message: '角色名称不能为空', trigger: 'blur'},
|
||||
{min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
|
||||
, {
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validateApproleName(rule, value, callback, form.roleId !== '')
|
||||
}, trigger: 'blur'
|
||||
}
|
||||
],
|
||||
roleCode: [
|
||||
{required: true, message: '角色标识不能为空', trigger: 'blur'},
|
||||
{min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'},
|
||||
{validator: rule.validatorKey, trigger: 'blur'}
|
||||
, {
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validateAppRoleCode(rule, value, callback, form.roleId !== '')
|
||||
}, trigger: 'blur'
|
||||
}
|
||||
],
|
||||
roleDesc: [{max: 128, message: '长度在 128 个字符内', trigger: 'blur'}],
|
||||
dsType: [{required: true, message: "请选择数据权限类型", trigger: "blur"}]
|
||||
}
|
||||
)
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.roleId = ''
|
||||
visible.value = true
|
||||
form.roleId = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// 获取角色信息
|
||||
if (id) {
|
||||
form.roleId = id
|
||||
getRoleData(id)
|
||||
}
|
||||
// 获取角色信息
|
||||
if (id) {
|
||||
form.roleId = id
|
||||
getRoleData(id)
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
if (form.dsType === 1) {
|
||||
form.dsScope = deptTreeRef.value.getCheckedKeys().join(',')
|
||||
} else {
|
||||
form.dsScope = ''
|
||||
}
|
||||
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 更新
|
||||
if (form.roleId) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
if (form.dsType === 1) {
|
||||
form.dsScope = deptTreeRef.value.getCheckedKeys().join(',')
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
form.dsScope = ''
|
||||
}
|
||||
})
|
||||
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 更新
|
||||
if (form.roleId) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
};
|
||||
|
||||
// 初始化角色数据
|
||||
const getRoleData = (id: string) => {
|
||||
// 获取部门数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
if (res.data.dsScope) {
|
||||
dataForm.checkedDsScope = (res.data.dsScope).split(',')
|
||||
} else {
|
||||
dataForm.checkedDsScope = []
|
||||
}
|
||||
})
|
||||
// 获取部门数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
if (res.data.dsScope) {
|
||||
dataForm.checkedDsScope = (res.data.dsScope).split(',')
|
||||
} else {
|
||||
dataForm.checkedDsScope = []
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,155 +1,162 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" :close-on-click-modal="false"
|
||||
:title="form.id ? $t('common.editBtn') : $t('common.addBtn')" draggable>
|
||||
<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('appsocial.type')" prop="type">
|
||||
<el-select v-model="form.type" :placeholder="t('appsocial.inputTypeTip')">
|
||||
<el-option v-for="(item, index) in app_social_type" :key="index" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('appsocial.remark')" prop="remark">
|
||||
<el-input v-model="form.remark" :placeholder="t('appsocial.inputRemarkTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-dialog :close-on-click-modal="false" :title="form.id ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="form" :rules="dataRules" formDialogRef label-width="90px" ref="dataFormRef">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('appsocial.type')" prop="type">
|
||||
<el-select :placeholder="t('appsocial.inputTypeTip')" v-model="form.type">
|
||||
<el-option :key="index" :label="item.label" :value="item.value"
|
||||
v-for="(item, index) in app_social_type"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('appsocial.remark')" prop="remark">
|
||||
<el-input :placeholder="t('appsocial.inputRemarkTip')" v-model="form.remark"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('appsocial.appId')" prop="appId">
|
||||
<el-input v-model="form.appId" :placeholder="t('appsocial.inputAppIdTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('appsocial.appId')" prop="appId">
|
||||
<el-input :placeholder="t('appsocial.inputAppIdTip')" v-model="form.appId"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('appsocial.appSecret')" prop="appSecret">
|
||||
<el-input v-model="form.appSecret" :placeholder="t('appsocial.inputAppSecretTip')"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('appsocial.appSecret')" prop="appSecret">
|
||||
<el-input :placeholder="t('appsocial.inputAppSecretTip')" v-model="form.appSecret"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('appsocial.redirectUrl')" prop="redirectUrl">
|
||||
<el-input v-model="form.redirectUrl" :placeholder="t('appsocial.inputRedirectUrlTip')" type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('appsocial.redirectUrl')" prop="redirectUrl">
|
||||
<el-input :placeholder="t('appsocial.inputRedirectUrlTip')" type="textarea"
|
||||
v-model="form.redirectUrl"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('appsocial.ext')" prop="ext">
|
||||
<el-input v-model="form.ext" :placeholder="t('appsocial.inputExtTip')" type="textarea"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('appsocial.ext')" prop="ext">
|
||||
<el-input :placeholder="t('appsocial.inputExtTip')" type="textarea" v-model="form.ext"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button formDialogRef @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button formDialogRef type="primary" @click="onSubmit">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
<el-button @click="visible = false" formDialogRef>{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" formDialogRef type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="AppSocialDetailsDialog" setup>
|
||||
// 定义子组件向父组件传值/事件
|
||||
import {useDict} from '/@/hooks/dict';
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {addObj, getObj, putObj} from '/@/api/app/appsocial'
|
||||
import {useI18n} from "vue-i18n"
|
||||
// 定义子组件向父组件传值/事件
|
||||
import {useDict} from '/@/hooks/dict';
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {addObj, getObj, putObj} from '/@/api/app/appsocial'
|
||||
import {useI18n} from "vue-i18n"
|
||||
import {rule} from "/@/utils/validate";
|
||||
|
||||
const emit = defineEmits(['refresh']);
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
const {t} = useI18n();
|
||||
const {t} = useI18n();
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
// 定义字典
|
||||
const {app_social_type} = useDict('app_social_type')
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
// 定义字典
|
||||
const {app_social_type} = useDict('app_social_type')
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
type: '',
|
||||
remark: '',
|
||||
appId: '',
|
||||
appSecret: '',
|
||||
redirectUrl: '',
|
||||
ext: '',
|
||||
});
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
type: '',
|
||||
remark: '',
|
||||
appId: '',
|
||||
appSecret: '',
|
||||
redirectUrl: '',
|
||||
ext: '',
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
type: [{required: true, message: '类型不能为空', trigger: 'blur'}],
|
||||
appId: [{required: true, message: 'appId不能为空', trigger: 'blur'}],
|
||||
appSecret: [{required: true, message: 'appSecret不能为空', trigger: 'blur'}],
|
||||
})
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
type: [{required: true, message: '类型不能为空', trigger: 'blur'}],
|
||||
appId: [{required: true, message: 'appId不能为空', trigger: 'blur'},
|
||||
{validator: rule.letterAndNumber, trigger: 'blur'}],
|
||||
appSecret: [{required: true, message: 'app秘钥不能为空', trigger: 'blur'},
|
||||
{validator: rule.letterAndNumber, trigger: 'blur'}],
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
redirectUrl: [{required: true, message: '回调地址不能为空', trigger: 'blur'},
|
||||
{validator: rule.url, trigger: 'blur'}],
|
||||
})
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
|
||||
// 获取appSocialDetails信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getappSocialDetailsData(id)
|
||||
}
|
||||
};
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
// 获取appSocialDetails信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getappSocialDetailsData(id)
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (form.appSecret && form.appSecret.indexOf("******") >= 0) {
|
||||
form.appSecret = ''
|
||||
}
|
||||
|
||||
if (form.appId && form.appId.indexOf("******") >= 0) {
|
||||
form.appId = ''
|
||||
}
|
||||
|
||||
// 更新
|
||||
if (form.id) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (form.appSecret && form.appSecret.indexOf("******") >= 0) {
|
||||
form.appSecret = ''
|
||||
}
|
||||
// 初始化表单数据
|
||||
const getappSocialDetailsData = (id: string) => {
|
||||
// 获取数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
})
|
||||
};
|
||||
|
||||
if (form.appId && form.appId.indexOf("******") >= 0) {
|
||||
form.appId = ''
|
||||
}
|
||||
|
||||
// 更新
|
||||
if (form.id) {
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else {
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化表单数据
|
||||
const getappSocialDetailsData = (id: string) => {
|
||||
// 获取数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
})
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
type: '类型',
|
||||
remark: '描述',
|
||||
appId: 'appId',
|
||||
appSecret: 'appSecret',
|
||||
appSecret: 'app秘钥',
|
||||
redirectUrl: '回调地址',
|
||||
ext: '拓展字段',
|
||||
createBy: '创建人',
|
||||
|
||||
@ -1,213 +1,228 @@
|
||||
<template>
|
||||
<div class="system-user-dialog-container">
|
||||
<el-dialog :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
|
||||
:close-on-click-modal="false" draggable>
|
||||
<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="90px" v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.username')" prop="username">
|
||||
<el-input v-model="dataForm.username" placeholder="请输入用户名" :disabled="dataForm.userId !== ''"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.password')" prop="password">
|
||||
<el-input v-model="dataForm.password" type="password" placeholder="请输入密码" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.name')" prop="name">
|
||||
<el-input v-model="dataForm.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.phone')" prop="phone">
|
||||
<el-input v-model="dataForm.phone" placeholder="请输入手机号" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.role')" prop="role">
|
||||
<el-select v-model="dataForm.role" placeholder="请选择角色" clearable class="w100" multiple>
|
||||
<el-option v-for="item in roleData" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.email')" prop="email">
|
||||
<el-input v-model="dataForm.email" placeholder="请输入邮箱" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.nickname')" prop="nickname">
|
||||
<el-input v-model="dataForm.nickname" placeholder="请输入昵称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.lockFlag')" prop="lockFlag">
|
||||
<el-radio-group v-model="dataForm.lockFlag">
|
||||
<el-radio :label="item.value" v-for="(item, index) in lock_flag" border :key="index">{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="system-user-dialog-container">
|
||||
<el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.username')" prop="username">
|
||||
<el-input :disabled="dataForm.userId !== ''" placeholder="请输入用户名"
|
||||
v-model="dataForm.username"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.password')" prop="password">
|
||||
<el-input clearable placeholder="请输入密码" type="password"
|
||||
v-model="dataForm.password"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.name')" prop="name">
|
||||
<el-input clearable placeholder="请输入姓名" v-model="dataForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.phone')" prop="phone">
|
||||
<el-input clearable placeholder="请输入手机号" v-model="dataForm.phone"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.role')" prop="role">
|
||||
<el-select class="w100" clearable multiple placeholder="请选择角色" v-model="dataForm.role">
|
||||
<el-option :key="item.roleId" :label="item.roleName" :value="item.roleId"
|
||||
v-for="item in roleData"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.email')" prop="email">
|
||||
<el-input clearable placeholder="请输入邮箱" v-model="dataForm.email"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.nickname')" prop="nickname">
|
||||
<el-input clearable placeholder="请输入昵称" v-model="dataForm.nickname"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.lockFlag')" prop="lockFlag">
|
||||
<el-radio-group v-model="dataForm.lockFlag">
|
||||
<el-radio :key="index" :label="item.value" border v-for="(item, index) in lock_flag">{{
|
||||
item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false" >{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button type="primary" @click="onSubmit" >{{ $t('common.confirmButtonText') }}</el-button>
|
||||
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemUserDialog">
|
||||
import { getObj, addObj, putObj } from '/@/api/app/appuser'
|
||||
import { list as roleList } from '/@/api/app/approle'
|
||||
import { useDict } from "/@/hooks/dict";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
<script lang="ts" name="systemUserDialog" setup>
|
||||
import {addObj, getObj, putObj, validatePhone, validateUsername} from '/@/api/app/appuser'
|
||||
import {list as roleList} from '/@/api/app/approle'
|
||||
import {useDict} from "/@/hooks/dict";
|
||||
import {useI18n} from "vue-i18n";
|
||||
import {useMessage} from '/@/hooks/message';
|
||||
import {rule} from "/@/utils/validate";
|
||||
|
||||
const { t } = useI18n()
|
||||
const {t} = useI18n()
|
||||
|
||||
// 定义刷新表格emit
|
||||
const emit = defineEmits(['refresh']);
|
||||
// @ts-ignore
|
||||
const { lock_flag } = useDict('lock_flag')
|
||||
// 定义刷新表格emit
|
||||
const emit = defineEmits(['refresh']);
|
||||
// @ts-ignore
|
||||
const {lock_flag} = useDict('lock_flag')
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
const roleData = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
const roleData = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const dataForm = reactive({
|
||||
userId: '',
|
||||
username: '',
|
||||
password: '' as String | undefined,
|
||||
salt: '',
|
||||
wxOpenid: '',
|
||||
qqOpenid: '',
|
||||
lockFlag: '0',
|
||||
phone: '' as String | undefined,
|
||||
deptId: '',
|
||||
roleList: [],
|
||||
postList: [],
|
||||
nickname: '',
|
||||
name: '',
|
||||
email: '',
|
||||
post: [] as String[],
|
||||
role: [] as String[],
|
||||
});
|
||||
const dataForm = reactive({
|
||||
userId: '',
|
||||
username: '',
|
||||
password: '' as String | undefined,
|
||||
salt: '',
|
||||
wxOpenid: '',
|
||||
qqOpenid: '',
|
||||
lockFlag: '0',
|
||||
phone: '' as String | undefined,
|
||||
deptId: '',
|
||||
roleList: [],
|
||||
postList: [],
|
||||
nickname: '',
|
||||
name: '',
|
||||
email: '',
|
||||
post: [] as String[],
|
||||
role: [] as String[],
|
||||
});
|
||||
|
||||
|
||||
const dataRules = ref(
|
||||
{
|
||||
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }, {
|
||||
min: 5,
|
||||
max: 20,
|
||||
message: "用户名称长度必须介于 5 和 20 之间",
|
||||
trigger: "blur"
|
||||
}],
|
||||
password: [{ required: true, message: "密码不能为空", trigger: "blur" }, {
|
||||
min: 6,
|
||||
max: 20,
|
||||
message: "用户密码长度必须介于 6 和 20 之间",
|
||||
trigger: "blur"
|
||||
}],
|
||||
name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
||||
role: [{ required: true, message: "角色不能为空", trigger: "blur" }],
|
||||
phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }, {
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur"
|
||||
}],
|
||||
email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }]
|
||||
}
|
||||
)
|
||||
const dataRules = ref(
|
||||
{
|
||||
username: [{required: true, message: "用户名不能为空", trigger: "blur"},
|
||||
{min: 3, max: 20, message: "用户名称长度必须介于 3 和 20 之间", trigger: "blur"},
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validateUsername(rule, value, callback, dataForm.userId !== '')
|
||||
}, trigger: "blur"
|
||||
}],
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
dataForm.userId = ''
|
||||
password: [{required: true, message: "密码不能为空", trigger: "blur"}, {
|
||||
min: 6,
|
||||
max: 20,
|
||||
message: "用户密码长度必须介于 6 和 20 之间",
|
||||
trigger: "blur"
|
||||
}],
|
||||
name: [{required: true, message: "姓名不能为空", trigger: "blur"}
|
||||
, {validator: rule.chinese, trigger: "blur"}],
|
||||
role: [{required: true, message: "角色不能为空", trigger: "blur"}],
|
||||
phone: [{required: true, message: "手机号不能为空", trigger: "blur"}, {
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: "请输入正确的手机号码",
|
||||
trigger: "blur"
|
||||
},
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validatePhone(rule, value, callback, dataForm.userId !== '')
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
}, trigger: "blur"
|
||||
}],
|
||||
email: [{type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"]}],
|
||||
nickname: [{required: true, message: "姓名不能为空", nickname: "blur"}],
|
||||
}
|
||||
)
|
||||
|
||||
// 修改获取用户信息
|
||||
if (id) {
|
||||
dataForm.userId = id
|
||||
getUserData(id)
|
||||
}
|
||||
getRoleData()
|
||||
};
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
dataForm.userId = ''
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// 修改获取用户信息
|
||||
if (id) {
|
||||
dataForm.userId = id
|
||||
getUserData(id)
|
||||
}
|
||||
getRoleData()
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
// 更新方法
|
||||
if (dataForm.userId) {
|
||||
if (dataForm.phone && dataForm.phone.indexOf("*") >= 0) {
|
||||
dataForm.phone = undefined
|
||||
}
|
||||
if (dataForm.password && dataForm.password.indexOf("******") >= 0) {
|
||||
dataForm.password = undefined
|
||||
}
|
||||
putObj(dataForm).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false; // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else { // 新增方法
|
||||
if (dataForm.phone && dataForm.phone.indexOf("*") > 0) {
|
||||
dataForm.phone = undefined
|
||||
}
|
||||
addObj(dataForm).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
// 初始化部门数据
|
||||
const getUserData = (id: string) => {
|
||||
// 获取部门数据
|
||||
loading.value = true
|
||||
getObj(id).then(res => {
|
||||
Object.assign(dataForm, res.data)
|
||||
dataForm.password = '******'
|
||||
if (res.data.roleList) {
|
||||
dataForm.role = []
|
||||
res.data.roleList.map((item: any) => {
|
||||
dataForm.role.push(item.roleId)
|
||||
})
|
||||
}
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
};
|
||||
|
||||
// 角色数据
|
||||
const getRoleData = () => {
|
||||
roleList().then(res => {
|
||||
roleData.value = res.data
|
||||
})
|
||||
}
|
||||
// 更新方法
|
||||
if (dataForm.userId) {
|
||||
if (dataForm.phone && dataForm.phone.indexOf("*") >= 0) {
|
||||
dataForm.phone = undefined
|
||||
}
|
||||
if (dataForm.password && dataForm.password.indexOf("******") >= 0) {
|
||||
dataForm.password = undefined
|
||||
}
|
||||
putObj(dataForm).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false; // 关闭弹窗
|
||||
emit('refresh');
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
} else { // 新增方法
|
||||
if (dataForm.phone && dataForm.phone.indexOf("*") > 0) {
|
||||
dataForm.phone = undefined
|
||||
}
|
||||
addObj(dataForm).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch(err => {
|
||||
useMessage().error(err.msg)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
};
|
||||
|
||||
// 初始化部门数据
|
||||
const getUserData = (id: string) => {
|
||||
// 获取部门数据
|
||||
loading.value = true
|
||||
getObj(id).then(res => {
|
||||
Object.assign(dataForm, res.data)
|
||||
dataForm.password = '******'
|
||||
if (res.data.roleList) {
|
||||
dataForm.role = []
|
||||
res.data.roleList.map((item: any) => {
|
||||
dataForm.role.push(item.roleId)
|
||||
})
|
||||
}
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
};
|
||||
|
||||
// 角色数据
|
||||
const getRoleData = () => {
|
||||
roleList().then(res => {
|
||||
roleData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<el-dialog :close-on-click-modal="false" :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" draggable
|
||||
v-model="visible">
|
||||
<el-form :model="form" :rules="dataRules" formDialogRef label-width="90px" ref="dataFormRef" v-loading="loading">
|
||||
v-model="visible">
|
||||
<el-form :model="form" :rules="dataRules" formDialogRef label-width="90px" ref="dataFormRef"
|
||||
v-loading="loading">
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('channel.appId')" prop="appId">
|
||||
<el-input :placeholder="t('channel.inputAppIdTip')" v-model="form.appId" />
|
||||
<el-input :placeholder="t('channel.inputAppIdTip')" v-model="form.appId"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
@ -13,7 +14,7 @@
|
||||
<el-form-item :label="t('channel.channelId')" prop="state">
|
||||
<el-select v-model="form.channelId">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value"
|
||||
v-for="item in channel_type">
|
||||
v-for="item in channel_type">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -21,13 +22,13 @@
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('channel.channelName')" prop="channelName">
|
||||
<el-input :placeholder="t('channel.inputChannelNameTip')" v-model="form.channelName" />
|
||||
<el-input :placeholder="t('channel.inputChannelNameTip')" v-model="form.channelName"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="t('channel.mchId')" prop="mchId">
|
||||
<el-input :placeholder="t('channel.inputMchIdTip')" v-model="form.mchId" />
|
||||
<el-input :placeholder="t('channel.inputMchIdTip')" v-model="form.mchId"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
@ -35,7 +36,7 @@
|
||||
<el-form-item :label="t('channel.state')" prop="state">
|
||||
<el-select v-model="form.state">
|
||||
<el-option :key="item.value" :label="item.label" :value="item.value"
|
||||
v-for="item in status_type">
|
||||
v-for="item in status_type">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -59,7 +60,7 @@
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('channel.remark')" prop="remark">
|
||||
<el-input :placeholder="t('channel.inputRemarkTip')" :rows="2" type="textarea"
|
||||
v-model="form.remark" />
|
||||
v-model="form.remark"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
@ -67,7 +68,7 @@
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('channel.param')" prop="param">
|
||||
<el-input :placeholder="t('channel.inputParamTip')" :rows="4" type="textarea"
|
||||
v-model="form.param" />
|
||||
v-model="form.param"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
@ -84,113 +85,121 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="PayChannelDialog" setup>
|
||||
// 定义子组件向父组件传值/事件
|
||||
import { useDict } from "/@/hooks/dict";
|
||||
import { useMessage } from "/@/hooks/message";
|
||||
import { addObj, getObj, putObj } from '/@/api/pay/channel'
|
||||
import { useI18n } from "vue-i18n"
|
||||
// 定义子组件向父组件传值/事件
|
||||
import {useDict} from "/@/hooks/dict";
|
||||
import {useMessage} from "/@/hooks/message";
|
||||
import {addObj, getObj, putObj} from '/@/api/pay/channel'
|
||||
import {useI18n} from "vue-i18n"
|
||||
import {rule} from '/@/utils/validate';
|
||||
|
||||
const emit = defineEmits(['refresh']);
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
|
||||
const { t } = useI18n();
|
||||
const { status_type, channel_type} = useDict('status_type', 'channel_type')
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
// 定义字典
|
||||
const {t} = useI18n();
|
||||
const {status_type, channel_type} = useDict('status_type', 'channel_type')
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false)
|
||||
const loading = ref(false)
|
||||
// 定义字典
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
mchId: '',
|
||||
channelId: '',
|
||||
channelName: '',
|
||||
channelMchId: '',
|
||||
returnUrl: '',
|
||||
notifyUrl: '',
|
||||
state: '0',
|
||||
param: '',
|
||||
remark: '',
|
||||
appId: '',
|
||||
});
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
mchId: '',
|
||||
channelId: '',
|
||||
channelName: '',
|
||||
channelMchId: '',
|
||||
returnUrl: '',
|
||||
notifyUrl: '',
|
||||
state: '0',
|
||||
param: '',
|
||||
remark: '',
|
||||
appId: '',
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
appId: [{ required: true, message: 'appId不能为空', trigger: 'blur' }],
|
||||
channelId: [{ required: true, message: '渠道ID不能为空', trigger: 'blur' }],
|
||||
channelName: [{ required: true, message: '渠道名称不能为空', trigger: 'blur' }],
|
||||
channelMchId: [{ required: true, message: '渠道商户ID不能为空', trigger: 'blur' }],
|
||||
state: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
|
||||
param: [{ required: true, message: '配置参数不能为空', trigger: 'blur' }],
|
||||
remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
appId: [{required: true, message: 'appId不能为空', trigger: 'blur'}
|
||||
, {validator: rule.letterAndNumber, trigger: 'blur'}],
|
||||
channelName: [{required: true, message: '渠道名称不能为空', trigger: 'blur'}],
|
||||
|
||||
})
|
||||
mchId: [{required: true, message: '商户ID不能为空', trigger: 'blur'}
|
||||
, {validator: rule.letterAndNumber, trigger: 'blur'}],
|
||||
state: [{required: true, message: '状态不能为空', trigger: 'blur'}],
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
returnUrl: [{required: true, message: '前端回调不能为空', trigger: 'blur'},
|
||||
{validater: rule.url, trigger: 'blur'}],
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
notifyUrl: [{required: true, message: '后端回调不能为空', trigger: 'blur'}],
|
||||
param: [{required: true, message: '参数配置不能为空', trigger: 'blur'}],
|
||||
|
||||
|
||||
})
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true
|
||||
form.id = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
// 获取payChannel信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getpayChannelData(id)
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
// 更新
|
||||
if (form.id) {
|
||||
loading.value = true
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
loading.value = true
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取payChannel信息
|
||||
if (id) {
|
||||
form.id = id
|
||||
getpayChannelData(id)
|
||||
}
|
||||
};
|
||||
// 初始化表单数据
|
||||
const getpayChannelData = (id: string) => {
|
||||
// 获取数据
|
||||
loading.value = true
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
// 更新
|
||||
if (form.id) {
|
||||
loading.value = true
|
||||
putObj(form).then(() => {
|
||||
useMessage().success(t('common.editSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
} else {
|
||||
loading.value = true
|
||||
addObj(form).then(() => {
|
||||
useMessage().success(t('common.addSuccessText'))
|
||||
visible.value = false // 关闭弹窗
|
||||
emit('refresh')
|
||||
}).catch((err: any) => {
|
||||
useMessage().error(err.msg)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化表单数据
|
||||
const getpayChannelData = (id: string) => {
|
||||
// 获取数据
|
||||
loading.value = true
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data)
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user