07/09
张同海
5 months ago
parent
214b6e7957
commit
9a0676e6aa
@ -0,0 +1,56 @@
|
||||
// @ts-ignore
|
||||
import { request } from '/@/utils/request'
|
||||
import { DataResult, PageRequest } from '/@/api/model/baseModel'
|
||||
enum Api {
|
||||
list = '/mainApi/OperationRule/GetOperationRuleList',
|
||||
EditDataRule = '/mainApi/OperationRule/EditOperationRule',
|
||||
GetDataRuleInfo = '/mainApi/OperationRule/GetOperationRuleInfo',
|
||||
|
||||
|
||||
getPermissionTree = '/mainApi/Role/GetClientRolePermissionTree',
|
||||
getRolePermission = '/mainApi/Role/GetRolePermission',
|
||||
updateRolePermission = '/mainApi/Role/UpdateRolePermission',
|
||||
}
|
||||
export function getDataRuleList(data: PageRequest) {
|
||||
return request<DataResult>({
|
||||
url: Api.list,
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function editDataRule(data: any) {
|
||||
return request<DataResult>({
|
||||
url: Api.EditDataRule,
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function getDataRuleInfo(query: { id: string }) {
|
||||
return request<DataResult>({
|
||||
url: Api.GetDataRuleInfo,
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
export function getRolePermission(query: { id: string }) {
|
||||
return request<DataResult<string[]>>({
|
||||
url: Api.getRolePermission,
|
||||
method: 'get',
|
||||
params: query,
|
||||
})
|
||||
}
|
||||
export function getPermissionTree() {
|
||||
return request<DataResult>({
|
||||
url: Api.getPermissionTree,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
export function updateRolePermission(data: any) {
|
||||
return request<DataResult>({
|
||||
url: Api.updateRolePermission,
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
const $props = defineProps<{
|
||||
modelValue: string
|
||||
}>()
|
||||
const operatorOptions = [
|
||||
{
|
||||
value: 'equal',
|
||||
label: '等于',
|
||||
},
|
||||
{
|
||||
value: 'not_equal',
|
||||
label: '不等于',
|
||||
},
|
||||
{
|
||||
value: 'GreaterThan',
|
||||
label: '大于',
|
||||
},
|
||||
{
|
||||
value: 'GreaterThanOrEqual',
|
||||
label: '大于等于',
|
||||
},
|
||||
{
|
||||
value: 'LessThan',
|
||||
label: '小于',
|
||||
},
|
||||
{
|
||||
value: 'LessThanOrEqual',
|
||||
label: '小于等于',
|
||||
},
|
||||
{
|
||||
label: '包含',
|
||||
value: 'contains',
|
||||
},
|
||||
{
|
||||
label: '不包含',
|
||||
value: 'not_contain',
|
||||
},
|
||||
]
|
||||
const $emits = defineEmits<{
|
||||
(e: 'update:modelValue', modelValue: any): void
|
||||
}>()
|
||||
const data = useVModel($props, 'modelValue', $emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-select v-model="data" class="operator-container" filterable placeholder="筛选符">
|
||||
<el-option
|
||||
v-for="item in operatorOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.operator-container {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import { Field } from '/@/components/Render/interface'
|
||||
import { FilterRules } from '/@/components/Condition/index'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
|
||||
const $props = defineProps<{
|
||||
modelValue: any
|
||||
options: Field[]
|
||||
filterRules: FilterRules
|
||||
}>()
|
||||
const $emits = defineEmits<{
|
||||
(e: 'update:modelValue', modelValue: string): void
|
||||
}>()
|
||||
const data = useVModel($props, 'modelValue', $emits)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-select v-model="data" class="trigger-container" filterable placeholder="选择字段">
|
||||
<el-option v-for="item in $props.options" :key="item.id" :label="item.title" :value="item.id" />
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,20 @@
|
||||
/**
|
||||
* 字段筛选结果
|
||||
*/
|
||||
export interface Condition {
|
||||
// 筛选字段
|
||||
field: string | null
|
||||
// 条件运算符
|
||||
operator: string
|
||||
// 筛选值
|
||||
value: any | null
|
||||
}
|
||||
|
||||
/**
|
||||
* 筛选规则
|
||||
*/
|
||||
export interface FilterRules {
|
||||
logicalOperator: 'or' | 'and'
|
||||
conditions: Condition[]
|
||||
groups: FilterRules[]
|
||||
}
|
||||
@ -0,0 +1,286 @@
|
||||
<script setup lang="ts" name="ConditionFilter">
|
||||
import { FilterRules } from '/@/components/Condition/index'
|
||||
import { Field } from '/@/components/Render/interface'
|
||||
import { useVModel } from '@vueuse/core'
|
||||
import { Delete, CirclePlus, CircleClose } from '@element-plus/icons-vue'
|
||||
import Trigger from './Trigger.vue'
|
||||
import Operator from './Operator.vue'
|
||||
import Render from '/@/components/Render/index'
|
||||
import { ref } from 'vue'
|
||||
interface RestaurantItem {
|
||||
value: string
|
||||
WebShow: string
|
||||
}
|
||||
const $props = defineProps<{
|
||||
filterFields: Field[]
|
||||
modelValue: FilterRules
|
||||
disabled: boolean
|
||||
}>()
|
||||
const $emits = defineEmits<{
|
||||
(e: 'update:modelValue', modelValue: FilterRules): void
|
||||
(e: 'addCondition', index: number): void
|
||||
(e: 'delCondition', index: number): void
|
||||
(e: 'delGroup'): void
|
||||
}>()
|
||||
const filterRules = useVModel($props, 'modelValue', $emits)
|
||||
/**
|
||||
* 添加条件
|
||||
*/
|
||||
const addRule = () => {
|
||||
filterRules.value.conditions.push({
|
||||
field: null,
|
||||
operator: 'equal',
|
||||
value: null,
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 删除条件
|
||||
* @param index
|
||||
*/
|
||||
const handleDel = (index: number) => {
|
||||
filterRules.value.conditions.splice(index, 1)
|
||||
if (filterRules.value.conditions.length <= 0) {
|
||||
$emits('delGroup')
|
||||
}
|
||||
$emits('delCondition', index)
|
||||
}
|
||||
/**
|
||||
* 条件条件组
|
||||
*/
|
||||
const addGroup = () => {
|
||||
filterRules.value.groups.push({
|
||||
logicalOperator: 'and',
|
||||
conditions: [
|
||||
{
|
||||
field: null,
|
||||
operator: '',
|
||||
value: null,
|
||||
},
|
||||
],
|
||||
groups: [],
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 删除条件组
|
||||
* @param index
|
||||
*/
|
||||
const delGroup = (index: number) => {
|
||||
filterRules.value.groups.splice(index, 1)
|
||||
}
|
||||
const querySearch = (queryString: string, cb: any) => {
|
||||
const results = [
|
||||
{
|
||||
WebShow: '{loginRole}',
|
||||
value: '当前登录用户的角色',
|
||||
},
|
||||
{
|
||||
WebShow: '{loginUser}',
|
||||
value: '当前登录的用户',
|
||||
},
|
||||
{
|
||||
WebShow: '{loginOrg}',
|
||||
value: '机构',
|
||||
},
|
||||
]
|
||||
cb(results)
|
||||
}
|
||||
const handleSelect = (data: RestaurantItem, item) => {
|
||||
console.log(data)
|
||||
item.WebShow = data.value
|
||||
item.value = data.WebShow
|
||||
}
|
||||
</script>
|
||||
<!-- <el-col :xs="24" :sm="5" v-if="item.field">
|
||||
<el-form-item :prop="'conditions.' + index + '.operator'" style="width: 100%">
|
||||
<operator ref="operatorRef" v-model="item.operator" />
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<template>
|
||||
<div class="filter-container">
|
||||
<div class="logical-operator">
|
||||
<div class="logical-operator__line"></div>
|
||||
<el-switch
|
||||
v-model="filterRules.logicalOperator"
|
||||
inline-prompt
|
||||
style="--el-switch-on-color: #409eff; --el-switch-off-color: #67c23a"
|
||||
active-value="and"
|
||||
inactive-value="or"
|
||||
active-text="且"
|
||||
inactive-text="或"
|
||||
:disabled="$props.disabled"
|
||||
/>
|
||||
</div>
|
||||
<div class="filter-option-content">
|
||||
<el-form :label-width="0" :inline="true" :model="filterRules" :disabled="$props.disabled">
|
||||
<el-row
|
||||
v-for="(item, index) in filterRules.conditions"
|
||||
:key="`${item.field}-${index}`"
|
||||
:gutter="5"
|
||||
class="filter-item-rule"
|
||||
>
|
||||
<el-col :xs="24" :sm="7">
|
||||
<el-form-item :prop="'conditions.' + index + '.field'" style="width: 100%">
|
||||
<trigger
|
||||
ref="triggerRef"
|
||||
v-model="item.field"
|
||||
:options="$props.filterFields.filter((e) => e.value !== undefined)"
|
||||
:filter-rules="filterRules"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col v-if="item.field" :xs="24" :sm="5">
|
||||
<el-form-item :prop="'conditions.' + index + '.operator'" style="width: 100%">
|
||||
<operator ref="operatorRef" v-model="item.operator" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col v-if="item.field" :xs="24" :sm="6">
|
||||
<el-form-item :prop="'conditions.' + index + '.value'" style="width: 100%">
|
||||
<el-autocomplete
|
||||
v-if="item.field == 'CreateBy'"
|
||||
v-model="item.WebShow"
|
||||
:fetch-suggestions="querySearch"
|
||||
clearable
|
||||
@select="
|
||||
(e) => {
|
||||
handleSelect(e, item)
|
||||
}
|
||||
"
|
||||
/>
|
||||
<el-input v-else v-model="item.value"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="2"
|
||||
style="display: flex; align-items: center; flex-direction: row-reverse"
|
||||
>
|
||||
<el-button plain circle type="danger" :icon="Delete" @click="handleDel(index)" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<ConditionFilter
|
||||
v-for="(item, index) in filterRules.groups"
|
||||
:key="index"
|
||||
v-model="filterRules.groups[index]"
|
||||
:filter-fields="filterFields"
|
||||
@delGroup="delGroup(index)"
|
||||
>
|
||||
<el-button :icon="CircleClose" class="filter-filter-item__add" @click="delGroup(index)">
|
||||
删除条件组
|
||||
</el-button>
|
||||
</ConditionFilter>
|
||||
<div
|
||||
v-if="filterRules.groups.length === 0 && filterRules.conditions.length === 0"
|
||||
class="filter-item-rule"
|
||||
/>
|
||||
</el-form>
|
||||
<div class="filter-item-rule">
|
||||
<el-button
|
||||
:icon="CirclePlus"
|
||||
class="filter-filter-item__add"
|
||||
:disabled="$props.disabled"
|
||||
@click="addRule"
|
||||
>
|
||||
添加条件
|
||||
</el-button>
|
||||
<el-button
|
||||
:icon="CirclePlus"
|
||||
class="filter-filter-item__add"
|
||||
:disabled="$props.disabled"
|
||||
@click="addGroup"
|
||||
>
|
||||
添加条件组
|
||||
</el-button>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <el-col :xs="24" :sm="7" v-if="item.tables">
|
||||
<el-form-item :prop="'conditions.' + index + '.field'" style="width: 100%">
|
||||
<Render
|
||||
:field="$props.filterFields.find((e) => e.id === item.tables)"
|
||||
v-model="item.field"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col> -->
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-form-item) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
background-color: var(--el-fill-color-blank);
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
|
||||
.logical-operator {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
min-width: 60px;
|
||||
padding-right: 5px;
|
||||
|
||||
.logical-operator__line {
|
||||
position: absolute;
|
||||
left: calc(32% - 1px);
|
||||
width: 30px;
|
||||
border-width: 1px 0 1px 1px;
|
||||
border-top-style: solid;
|
||||
border-bottom-style: solid;
|
||||
border-left-style: solid;
|
||||
border-top-color: var(--el-border-color);
|
||||
border-bottom-color: var(--el-border-color);
|
||||
border-left-color: var(--el-border-color);
|
||||
border-image: initial;
|
||||
border-right-style: initial;
|
||||
border-right-color: initial;
|
||||
border-radius: 5px 0 0 5px;
|
||||
height: calc(100% - 48px);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translateX(100%) translateY(-50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: var(--el-border);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: translateX(100%) translateY(50%);
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: var(--el-border);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-option-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.filter-item-rule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.filter-filter-item__add {
|
||||
border-style: dashed;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
:use-wrapper="true"
|
||||
:title="getTitle"
|
||||
width="50%"
|
||||
@register="registerModal"
|
||||
@ok="handleSave"
|
||||
>
|
||||
<BasicForm @register="registerForm"> </BasicForm>
|
||||
<!--右下角按钮-->
|
||||
<template #footer>
|
||||
<a-button
|
||||
pre-icon="ant-design:close-outlined"
|
||||
type="warning"
|
||||
:loading="loading"
|
||||
ghost
|
||||
style="margin-right: 0.8rem"
|
||||
@click="closeModal"
|
||||
>取消</a-button
|
||||
>
|
||||
<a-button
|
||||
type="success"
|
||||
:loading="loading"
|
||||
pre-icon="ant-design:check-outlined"
|
||||
style="margin-right: 0.8rem"
|
||||
@click="handleSave(false)"
|
||||
>仅保存</a-button
|
||||
>
|
||||
<a-button
|
||||
pre-icon="ant-design:check-circle-outlined"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleSave(true)"
|
||||
>保存并关闭</a-button
|
||||
>
|
||||
</template>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref, h } from 'vue'
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal'
|
||||
import { BasicForm, useForm } from '/@/components/Form/index'
|
||||
import { formSchema } from './columns'
|
||||
import { editDataRule, getDataRuleInfo } from '/@/api/system/operationRule'
|
||||
import { useUserStore } from '/@/store/modules/user'
|
||||
import { useMessage } from '/@/hooks/web/useMessage'
|
||||
import { Field } from '/@/components/Render/interface'
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register'])
|
||||
const isUpdate = ref(true)
|
||||
const loading = ref(false)
|
||||
const rowId = ref('')
|
||||
const conditions = ref('')
|
||||
const fields = ref<Field[]>([])
|
||||
|
||||
const { createMessage } = useMessage()
|
||||
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema, getFieldsValue }] =
|
||||
useForm({
|
||||
labelWidth: 110,
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
})
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
resetFields()
|
||||
// GetTable()
|
||||
setModalProps({ confirmLoading: false, loading: true })
|
||||
isUpdate.value = !!data?.isUpdate
|
||||
if (unref(isUpdate)) {
|
||||
// setModalProps({ confirmLoading: true });
|
||||
rowId.value = data.record.id
|
||||
const res: API.DataResult = await getDataRuleInfo({ id: unref(rowId) })
|
||||
if (res.succeeded) {
|
||||
setFieldsValue({
|
||||
...res.data,
|
||||
field1: JSON.parse(res.data.dataRules),
|
||||
})
|
||||
// console.log('返回数据Form', getFieldsValue());
|
||||
// setFieldsValue({ trainId: unref(res.data.trainId) });
|
||||
}
|
||||
// setModalProps({ confirmLoading: false });
|
||||
} else {
|
||||
}
|
||||
setModalProps({ loading: false })
|
||||
})
|
||||
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增操作权限' : '编辑操作权限'))
|
||||
|
||||
async function handleSave(exit) {
|
||||
try {
|
||||
const values = await validate()
|
||||
setModalProps({ confirmLoading: true, loading: true })
|
||||
// TODO custom api
|
||||
|
||||
values.dataRules = JSON.stringify(values.field1)
|
||||
console.log(values)
|
||||
loading.value = true
|
||||
const res: API.DataResult = await editDataRule({
|
||||
columnView: values.columnView,
|
||||
dataRules: values.dataRules,
|
||||
description: values.description,
|
||||
id: values.id,
|
||||
note: values.note,
|
||||
orderNo: values.orderNo,
|
||||
permissionEntity: values.permissionEntity,
|
||||
permissionId: values.permissionId,
|
||||
status: values.status,
|
||||
})
|
||||
console.log(res)
|
||||
if (res.succeeded) {
|
||||
createMessage.success(res.message)
|
||||
emit('success')
|
||||
//刷新页面
|
||||
if (!exit) {
|
||||
if (unref(isUpdate)) {
|
||||
await refresh()
|
||||
} else {
|
||||
rowId.value = res.data
|
||||
isUpdate.value = true
|
||||
await refresh()
|
||||
}
|
||||
}
|
||||
loading.value = false
|
||||
} else {
|
||||
createMessage.error(res.message)
|
||||
loading.value = false
|
||||
setModalProps({ confirmLoading: false, loading: false })
|
||||
}
|
||||
|
||||
exit && closeModal()
|
||||
} finally {
|
||||
loading.value = false
|
||||
setModalProps({ confirmLoading: false, loading: false })
|
||||
}
|
||||
}
|
||||
async function refresh() {
|
||||
const res: API.DataResult = await getDataRuleInfo({ id: unref(rowId) })
|
||||
if (res.succeeded) {
|
||||
await setFieldsValue({
|
||||
...res.data,
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
title="操作权限配置"
|
||||
width="650px"
|
||||
@register="registerModal"
|
||||
@ok="handleSubmit"
|
||||
>
|
||||
<BasicTree
|
||||
ref="treeRef"
|
||||
title="所拥有的的权限"
|
||||
:tree-data="treeData"
|
||||
:checkable="true"
|
||||
:checked-keys="checkedKeys"
|
||||
:selected-keys="selectedKeys"
|
||||
default-expand-all
|
||||
@check="onCheck"
|
||||
/>
|
||||
<!-- <BasicTree-->
|
||||
<!-- ref="treeRef"-->
|
||||
<!-- checkable-->
|
||||
<!-- toolbar-->
|
||||
<!-- :treeData="treeData"-->
|
||||
<!-- :checkedKeys="checkedKeys"-->
|
||||
<!-- :expandedKeys="allTreeKeys"-->
|
||||
<!-- :selectedKeys="selectedKeys"-->
|
||||
<!-- :fieldNames="{ key: 'key', title: 'title' }"-->
|
||||
<!-- :checkStrictly="true"-->
|
||||
<!-- :clickRowToExpand="false"-->
|
||||
<!-- title="所拥有的的权限"-->
|
||||
<!-- @check="onCheck"-->
|
||||
<!-- @select="onTreeNodeSelect"-->
|
||||
<!-- >-->
|
||||
<!-- <template #title="{ slotTitle, ruleFlag }">-->
|
||||
<!-- {{ slotTitle }}-->
|
||||
<!-- <Icon-->
|
||||
<!-- v-if="ruleFlag"-->
|
||||
<!-- icon="ant-design:align-left-outlined"-->
|
||||
<!-- style="margin-left: 5px; color: red"-->
|
||||
<!-- />-->
|
||||
<!-- </template>-->
|
||||
<!-- </BasicTree>-->
|
||||
<!--右下角按钮-->
|
||||
<template #footer>
|
||||
<PopConfirmButton
|
||||
title="确定放弃编辑？"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="closeModal"
|
||||
>取消</PopConfirmButton
|
||||
>
|
||||
<a-button
|
||||
type="primary"
|
||||
pre-icon="ant-design:save-outlined"
|
||||
:loading="loading"
|
||||
ghost
|
||||
style="margin-right: 0.8rem"
|
||||
@click="handleSubmit(false)"
|
||||
>仅保存</a-button
|
||||
>
|
||||
<a-button type="primary" :loading="loading" @click="handleSubmit(true)">保存并关闭</a-button>
|
||||
</template>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref, onMounted } from 'vue'
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal'
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree'
|
||||
import { PopConfirmButton } from '/@/components/Button'
|
||||
// import { queryTreeListForRole, queryRolePermission, saveRolePermission } from '../role.api';
|
||||
import { getPermissionTree, getRolePermission, updateRolePermission } from '/@/api/system/role'
|
||||
// const emit = defineEmits(['register']);
|
||||
//树的信息
|
||||
const treeData = ref<TreeItem[]>([])
|
||||
//树的全部节点信息
|
||||
const allTreeKeys = ref([])
|
||||
//树的选择节点信息
|
||||
const checkedKeys = ref([])
|
||||
const defaultCheckedKeys = ref([])
|
||||
//树的选中的节点信息
|
||||
const selectedKeys = ref([])
|
||||
const roleId = ref('')
|
||||
//树的实例
|
||||
const treeRef = ref(null)
|
||||
const loading = ref(false)
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
await reset()
|
||||
setModalProps({ confirmLoading: false, loading: true })
|
||||
roleId.value = data.record.id
|
||||
//初始化数据
|
||||
const res = await getPermissionTree()
|
||||
treeData.value = res.data.treeData
|
||||
allTreeKeys.value = res.data.ids
|
||||
//初始化角色菜单数据
|
||||
const permResult = await getRolePermission({ id: unref(roleId) })
|
||||
checkedKeys.value = permResult.data
|
||||
defaultCheckedKeys.value = permResult.data
|
||||
setModalProps({ loading: false })
|
||||
})
|
||||
/**
|
||||
* 点击选中
|
||||
*/
|
||||
function onCheck(o) {
|
||||
checkedKeys.value = o.checked ? o.checked : o
|
||||
}
|
||||
|
||||
/**
|
||||
* 数据重置
|
||||
*/
|
||||
function reset() {
|
||||
treeData.value = []
|
||||
allTreeKeys.value = []
|
||||
checkedKeys.value = []
|
||||
defaultCheckedKeys.value = []
|
||||
selectedKeys.value = []
|
||||
roleId.value = ''
|
||||
}
|
||||
/**
|
||||
* 获取tree实例
|
||||
*/
|
||||
function getTree() {
|
||||
const tree = unref(treeRef)
|
||||
if (!tree) {
|
||||
throw new Error('tree is null!')
|
||||
}
|
||||
return tree
|
||||
}
|
||||
/**
|
||||
* 提交
|
||||
*/
|
||||
async function handleSubmit(exit) {
|
||||
let params = {
|
||||
roleId: unref(roleId),
|
||||
permissionIds: unref(getTree().getCheckedKeys()).join(',').split(','),
|
||||
// lastpermissionIds: unref(defaultCheckedKeys).join(','),
|
||||
}
|
||||
loading.value = true
|
||||
await updateRolePermission(params)
|
||||
loading.value = false
|
||||
exit && closeModal()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/** 固定操作按钮 */
|
||||
.jeecg-basic-tree {
|
||||
position: absolute;
|
||||
width: 618px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,273 @@
|
||||
import { BasicColumn, FormSchema } from '/@/components/Table'
|
||||
import { getTables, getColumns, getClientPermissionList } from '/@/api/system/role'
|
||||
import { h, ref } from 'vue'
|
||||
import ConditionFilter from './Condition/index.vue'
|
||||
import { Field } from '/@/components/Render/interface'
|
||||
import { Tag } from 'ant-design-vue'
|
||||
const columnViewData = []
|
||||
const res: API.DataResult = await getTables()
|
||||
if (res.succeeded) {
|
||||
res.data.forEach((item) => {
|
||||
columnViewData.push({
|
||||
label: item.description,
|
||||
value: item.name,
|
||||
})
|
||||
})
|
||||
}
|
||||
const ClientPermissionData = []
|
||||
let ClientPermissionList = []
|
||||
const res2: API.DataResult = await getClientPermissionList()
|
||||
if (res2.succeeded) {
|
||||
console.log(res2)
|
||||
ClientPermissionList = res2.data
|
||||
res2.data.forEach((item) => {
|
||||
ClientPermissionData.push({
|
||||
label: item.permissionName,
|
||||
value: item.id,
|
||||
})
|
||||
})
|
||||
}
|
||||
const fields = ref<Field[]>([])
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '权限模块名称',
|
||||
dataIndex: 'permissionName',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '权限实体',
|
||||
dataIndex: 'permissionEntity',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '操作权限描述',
|
||||
dataIndex: 'description',
|
||||
sorter: true,
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '排序号',
|
||||
dataIndex: 'orderNo',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
sorter: true,
|
||||
width: 100,
|
||||
customRender: ({ text }) => {
|
||||
if (text === 0) {
|
||||
return <Tag color="success">启用</Tag>
|
||||
} else if (text === 1) {
|
||||
return <Tag color="red">禁用</Tag>
|
||||
}
|
||||
return text
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'note',
|
||||
sorter: true,
|
||||
width: 150,
|
||||
},
|
||||
]
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'Description',
|
||||
label: '操作权限描述',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
{
|
||||
field: 'PermissionName',
|
||||
label: '权限模块名称',
|
||||
component: 'Input',
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
]
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'divider-selects',
|
||||
component: 'Divider',
|
||||
label: '基本信息',
|
||||
colProps: { span: 24 },
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
field: 'id',
|
||||
component: 'Input',
|
||||
defaultValue: '',
|
||||
show: false,
|
||||
},
|
||||
// {
|
||||
// field: 'dataRules',
|
||||
// label: '权限规则',
|
||||
// component: 'Input',
|
||||
// defaultValue: 0,
|
||||
// colProps: { span: 12 },
|
||||
// },
|
||||
{
|
||||
field: 'columnView',
|
||||
label: '中文视图名',
|
||||
component: 'Select',
|
||||
required: true,
|
||||
colProps: { span: 12 },
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
options: columnViewData,
|
||||
onChange: async (e: ChangeEvent, a) => {
|
||||
console.log(e, a)
|
||||
const res: API.DataResult = await getColumns({ tableViewName: e })
|
||||
fields.value = []
|
||||
if (res.succeeded) {
|
||||
console.log(res)
|
||||
const Arr = [
|
||||
{
|
||||
dbColumnName: '{loginRole}',
|
||||
columnDescription: '当前登录用户的角色',
|
||||
},
|
||||
{
|
||||
dbColumnName: '{loginUser}',
|
||||
columnDescription: '当前登录的用户',
|
||||
},
|
||||
{
|
||||
dbColumnName: '{loginOrg}',
|
||||
columnDescription: '机构',
|
||||
},
|
||||
]
|
||||
res.data = [...res.data, ...Arr]
|
||||
res.data.forEach((item) => {
|
||||
// if (item.name == tableViewName) {
|
||||
fields.value.push({
|
||||
id: item.dbColumnName,
|
||||
title: item.columnDescription,
|
||||
name: 'Select',
|
||||
value: null,
|
||||
props: {
|
||||
disabled: false,
|
||||
multiple: false,
|
||||
// placeholder: '请选择请假事由',
|
||||
options: [],
|
||||
},
|
||||
style: {
|
||||
width: '100%',
|
||||
},
|
||||
})
|
||||
// }
|
||||
})
|
||||
if (a) {
|
||||
formModel.field1 = {
|
||||
groups: [],
|
||||
conditions: [],
|
||||
}
|
||||
}
|
||||
|
||||
console.log(fields.value, 'fields.value')
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '权限实体',
|
||||
field: 'permissionEntity',
|
||||
component: 'Input',
|
||||
defaultValue: '',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
field: 'permissionId',
|
||||
label: '资源标识',
|
||||
component: 'Select',
|
||||
colProps: { span: 12 },
|
||||
required: true,
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
options: ClientPermissionData,
|
||||
// xxxx props
|
||||
onChange: (e) => {
|
||||
console.log(e)
|
||||
ClientPermissionList.forEach((item) => {
|
||||
if (item.id == e) {
|
||||
console.log(item)
|
||||
formModel.permissionEntity = item.permissionEntity
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '是否启用',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: 0,
|
||||
colProps: { span: 12 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '是', value: 0 },
|
||||
{ label: '否', value: 1 },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'orderNo',
|
||||
label: '排序号',
|
||||
component: 'InputNumber',
|
||||
defaultValue: 0,
|
||||
colProps: { span: 12 },
|
||||
},
|
||||
{
|
||||
field: 'description',
|
||||
label: '权限描述',
|
||||
required: true,
|
||||
component: 'InputTextArea',
|
||||
colProps: { span: 12 },
|
||||
componentProps: {
|
||||
rows: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'note',
|
||||
label: '备注',
|
||||
component: 'InputTextArea',
|
||||
colProps: { span: 12 },
|
||||
componentProps: {
|
||||
rows: 4,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'divider-selects',
|
||||
component: 'Divider',
|
||||
label: '权限规则',
|
||||
colProps: { span: 24 },
|
||||
ifShow: ({ values }) => {
|
||||
return !!values.columnView
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'field1',
|
||||
component: 'Input',
|
||||
colProps: {
|
||||
span: 24,
|
||||
},
|
||||
defaultValue: {
|
||||
groups: [],
|
||||
conditions: [],
|
||||
},
|
||||
ifShow: ({ values }) => {
|
||||
return !!values.columnView
|
||||
},
|
||||
// 通过函数渲染一个 Input
|
||||
render: ({ model, field }) => {
|
||||
return h(ConditionFilter, {
|
||||
modelValue: model[field],
|
||||
filterFields: fields.value,
|
||||
})
|
||||
},
|
||||
},
|
||||
]
|
||||
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable class="ds-table" @register="registerTable">
|
||||
<template #tableTitle>
|
||||
<a-button
|
||||
type="link"
|
||||
@click="handleCreate"
|
||||
:disabled="checkPermissions('op:operationRule:add')"
|
||||
>
|
||||
<span class="iconfont icon-new_document"></span>
|
||||
新增操作权限
|
||||
</a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'roleName'">
|
||||
<span style="color: #0d84ff" @click="handleEdit(record)">{{ record.roleName }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
tooltip: '编辑',
|
||||
onClick: handleEdit.bind(null, record),
|
||||
disabled: checkPermissions('op:operationRule:edit'),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<RoleModal @register="registerModal" @success="handleSuccess" />
|
||||
<RolePermissionModal @register="registerPermissionModal" @success="handleSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { checkPermissions } from '/@/hooks/Permissions/index'
|
||||
import { BasicTable, useTable, TableAction } from '/@/components/Table'
|
||||
import { getDataRuleList } from '/@/api/system/operationRule'
|
||||
import { useModal } from '/@/components/Modal'
|
||||
import RoleModal from './RoleModal.vue'
|
||||
import RolePermissionModal from './RolePermissionModal.vue'
|
||||
import { columns, searchFormSchema } from './columns'
|
||||
const [registerModal, { openModal }] = useModal()
|
||||
const [registerPermissionModal] = useModal()
|
||||
const [registerTable, { reload, getForm }] = useTable({
|
||||
title: '',
|
||||
// api: getSysDictTypeList,
|
||||
api: async (p) => {
|
||||
const res: API.DataResult = await getDataRuleList(p)
|
||||
// console.log(items);
|
||||
return new Promise((resolve) => {
|
||||
resolve({ data: [...res.data], total: res.count })
|
||||
})
|
||||
},
|
||||
beforeFetch: (p) => {
|
||||
var data = getForm().getFieldsValue()
|
||||
const postParam: API.PageRequest = {
|
||||
queryCondition: '',
|
||||
pageCondition: {
|
||||
pageIndex: p.current,
|
||||
pageSize: p.pageSize,
|
||||
sortConditions: [],
|
||||
},
|
||||
}
|
||||
if (p.field) {
|
||||
postParam.pageCondition.sortConditions = [
|
||||
{
|
||||
sortField: p.field,
|
||||
listSortDirection: p.order == 'ascend' ? 0 : 1,
|
||||
},
|
||||
]
|
||||
} else {
|
||||
postParam.pageCondition.sortConditions = []
|
||||
}
|
||||
let condition: API.ConditionItem[] = []
|
||||
if (!!data.Description) {
|
||||
condition.push({
|
||||
FieldName: 'Description',
|
||||
FieldValue: data.Description,
|
||||
ConditionalType: 1,
|
||||
})
|
||||
}
|
||||
if (!!data.Description) {
|
||||
condition.push({
|
||||
FieldName: 'Description',
|
||||
FieldValue: data.Description,
|
||||
ConditionalType: 1,
|
||||
})
|
||||
}
|
||||
if (!!data.PermissionName) {
|
||||
condition.push({
|
||||
FieldName: 'PermissionName',
|
||||
FieldValue: data.PermissionName,
|
||||
ConditionalType: 1,
|
||||
})
|
||||
}
|
||||
postParam.queryCondition = JSON.stringify(condition)
|
||||
// console.log(postParam);
|
||||
return postParam
|
||||
},
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
isTreeTable: false,
|
||||
pagination: true,
|
||||
striped: true,
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
bordered: true,
|
||||
showIndexColumn: true,
|
||||
indexColumnProps: {
|
||||
width: 60,
|
||||
},
|
||||
canResize: true,
|
||||
resizeHeightOffset: 35,
|
||||
immediate: true,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
fixed: 'right',
|
||||
},
|
||||
})
|
||||
|
||||
function handleCreate() {
|
||||
openModal(true, {
|
||||
isParent: false,
|
||||
isUpdate: false,
|
||||
})
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable) {
|
||||
openModal(true, {
|
||||
record,
|
||||
isUpdate: true,
|
||||
})
|
||||
}
|
||||
function handleSuccess() {
|
||||
reload()
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue