监控管理
parent
8f77ef476a
commit
065ef2eb68
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:showCancelBtn="false"
|
||||
:showOkBtn="false"
|
||||
width="60%"
|
||||
title="查看账号"
|
||||
>
|
||||
<BasicTable @register="registerTable" :searchInfo="searchInfo" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { BasicModal, useModalInner } from '@/components/Modal';
|
||||
import { loadByRole } from '@/api/demo/system';
|
||||
import { BasicTable, useTable } from '@/components/Table';
|
||||
|
||||
defineOptions({ name: 'DeptModal' });
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const rowId = ref('');
|
||||
const searchInfo = reactive<Recordable>({});
|
||||
|
||||
const [registerModal, { setModalProps }] = useModalInner(async (data) => {
|
||||
setModalProps({ confirmLoading: false });
|
||||
rowId.value = data.record.id;
|
||||
searchInfo.roleId = rowId.value;
|
||||
reload();
|
||||
});
|
||||
// 异步传参后查询历史记录表格
|
||||
const [registerTable, { reload }] = useTable({
|
||||
canResize: true,
|
||||
resizeHeightOffset: 150,
|
||||
api: loadByRole,
|
||||
columns: [
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'account',
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
],
|
||||
rowKey: 'id',
|
||||
showTableSetting: false,
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style scoped>
|
||||
.select-account {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" title="分配菜单" @ok="handleSubmit">
|
||||
<template #insertFooter>
|
||||
<a-button type="primary" @click="upBtn" :disabled="loading" v-if="step == 2"
|
||||
>上一步</a-button
|
||||
>
|
||||
</template>
|
||||
<BasicTree
|
||||
ref="asyncExpandTreeRef"
|
||||
title="菜单树"
|
||||
toolbar
|
||||
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
|
||||
:clickRowToExpand="false"
|
||||
:treeData="treeData"
|
||||
:fieldNames="{ key: 'id', title: 'name' }"
|
||||
:defaultExpandAll="true"
|
||||
:checkable="true"
|
||||
:checkStrictly="true"
|
||||
@check="handleSelect"
|
||||
v-if="step == 1"
|
||||
/>
|
||||
<BasicTree
|
||||
ref="asyncBtnExpandTreeRef"
|
||||
title="按钮树"
|
||||
toolbar
|
||||
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
|
||||
:clickRowToExpand="false"
|
||||
:treeData="btnData"
|
||||
:fieldNames="{ key: 'id', title: 'name', children: 'elements' }"
|
||||
:defaultExpandAll="true"
|
||||
:checkable="true"
|
||||
:checkStrictly="true"
|
||||
@check="handleBntSelect"
|
||||
v-else
|
||||
/>
|
||||
</BasicModal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref, onMounted, nextTick } from 'vue';
|
||||
import { BasicModal, useModalInner } from '@/components/Modal';
|
||||
import { BasicTree, TreeItem, TreeActionType } from '@/components/Tree';
|
||||
import { getMenuList } from '@/api/sys/menu';
|
||||
import { assignModule, loadForRole } from '@/api/demo/system';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
|
||||
defineOptions({ name: 'ModulesModal' });
|
||||
|
||||
const emit = defineEmits(['success', 'register', 'select']);
|
||||
const treeData = ref<TreeItem[]>([]);
|
||||
const btnData = ref<any[]>([]);
|
||||
const step = ref(1);
|
||||
interface dataType {
|
||||
moduleIds?: any;
|
||||
elementIds?: any;
|
||||
}
|
||||
const checkData: dataType = {};
|
||||
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
const asyncBtnExpandTreeRef = ref<Nullable<TreeActionType>>(null);
|
||||
const { createMessage } = useMessage();
|
||||
function upBtn() {
|
||||
step.value = 1;
|
||||
getMenusForRol(rowId.value);
|
||||
}
|
||||
function treeIterator(tree) {
|
||||
tree.forEach((node) => {
|
||||
node.name = node.item.name;
|
||||
node.id = node.item.id;
|
||||
node.elements = node.item.elements;
|
||||
node.children && treeIterator(node.children);
|
||||
});
|
||||
}
|
||||
function btnIterator(moduleId, tree) {
|
||||
tree.forEach((node) => {
|
||||
if (moduleId == node.item.id) {
|
||||
btnData.value.push({
|
||||
name: node.item.name,
|
||||
id: node.item.id,
|
||||
elements: node.item.elements,
|
||||
disabled: true,
|
||||
});
|
||||
}
|
||||
node.children && btnIterator(moduleId, node.children);
|
||||
});
|
||||
}
|
||||
async function fetch() {
|
||||
step.value = 1;
|
||||
const data = (await getMenuList()) as unknown as TreeItem[];
|
||||
treeIterator(data);
|
||||
treeData.value = await data;
|
||||
// 展开全部
|
||||
nextTick(() => {
|
||||
unref(asyncExpandTreeRef)?.expandAll(true);
|
||||
unref(asyncBtnExpandTreeRef)?.expandAll(true);
|
||||
});
|
||||
}
|
||||
let moduleIds = ref([]);
|
||||
let elementIds = ref([]);
|
||||
async function getMenusForRol(id) {
|
||||
var menusForRol = await loadForRole({
|
||||
roleId: id,
|
||||
});
|
||||
// var forRole = await loadForRole()
|
||||
btnData.value = [];
|
||||
menusForRol.moduleIds.forEach((element) => {
|
||||
btnIterator(element, treeData.value);
|
||||
});
|
||||
unref(asyncExpandTreeRef)?.setCheckedKeys(menusForRol.moduleIds);
|
||||
checkData.moduleIds = menusForRol.moduleIds;
|
||||
checkData.elementIds = menusForRol.elementIds;
|
||||
unref(asyncBtnExpandTreeRef)?.setCheckedKeys(checkData.elementIds);
|
||||
moduleIds.value = menusForRol.moduleIds;
|
||||
elementIds.value = menusForRol.elementIds;
|
||||
}
|
||||
|
||||
function handleSelect(checkedKeys, e: { checked: boolean; checkedNodes; node; event }) {
|
||||
const list = e.checkedNodes;
|
||||
moduleIds.value = [];
|
||||
list.forEach((element: any) => {
|
||||
element.disabled = true;
|
||||
element.name = element.item.name;
|
||||
element.children = [];
|
||||
moduleIds.value.push(element.item.id);
|
||||
});
|
||||
btnData.value = list;
|
||||
}
|
||||
function handleBntSelect(checkedKeys, e: { checked: boolean; checkedNodes; node; event }) {
|
||||
const list = e.checkedNodes;
|
||||
elementIds.value = [];
|
||||
list.forEach((element: any) => {
|
||||
elementIds.value.push(element.id);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
const rowId = ref('');
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
rowId.value = data.record.id;
|
||||
step.value = 1;
|
||||
getMenusForRol(rowId.value);
|
||||
setModalProps({ confirmLoading: false });
|
||||
});
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
if (step.value == 1) {
|
||||
step.value = 2;
|
||||
setTimeout(() => {
|
||||
unref(asyncBtnExpandTreeRef)?.setCheckedKeys(checkData.elementIds);
|
||||
}, 10);
|
||||
} else {
|
||||
var query = {
|
||||
roleId: rowId.value,
|
||||
moduleIds: moduleIds.value,
|
||||
elementIds: elementIds.value,
|
||||
};
|
||||
const data = await assignModule(query);
|
||||
if (data) {
|
||||
setModalProps({ confirmLoading: true });
|
||||
closeModal();
|
||||
emit('success');
|
||||
return createMessage.success('成功');
|
||||
} else {
|
||||
return createMessage.error('失败');
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
|
||||
<BasicForm @register="registerForm" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, unref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '@/components/Modal';
|
||||
import { BasicForm, useForm } from '@/components/Form';
|
||||
import { formSchema } from './role.data';
|
||||
|
||||
import { addRole, updateRole } from '@/api/demo/system';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
defineOptions({ name: 'DeptModal' });
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const isUpdate = ref(true);
|
||||
|
||||
const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
baseColProps: { span: 24 },
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
});
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
resetFields();
|
||||
setModalProps({ confirmLoading: false });
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
|
||||
if (unref(isUpdate)) {
|
||||
setFieldsValue({
|
||||
...data.record,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const values = await validate();
|
||||
let query = values;
|
||||
// 调用接口
|
||||
if (!unref(isUpdate)) {
|
||||
const data = await addRole(query);
|
||||
if (data) {
|
||||
setModalProps({ confirmLoading: true });
|
||||
// TODO custom api
|
||||
closeModal();
|
||||
emit('success');
|
||||
return createMessage.success('新增成功');
|
||||
} else {
|
||||
return createMessage.error('新增失败');
|
||||
}
|
||||
} else {
|
||||
const data = await updateRole(query);
|
||||
if (data) {
|
||||
setModalProps({ confirmLoading: true });
|
||||
// TODO custom api
|
||||
closeModal();
|
||||
emit('success');
|
||||
return createMessage.success('编辑成功');
|
||||
} else {
|
||||
return createMessage.error('编辑失败');
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,6 @@
|
||||
|
||||
export { default as AccountModal } from './AccountModal.vue';
|
||||
export { default as ModulesModal } from './ModulesModal.vue';
|
||||
export { default as RoleDrawer } from './RoleDrawer.vue';
|
||||
export { default as RoleModal } from './RoleModal.vue';
|
||||
|
||||
@ -0,0 +1,83 @@
|
||||
import { BasicColumn, FormSchema } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Switch,Tag } from 'ant-design-vue';
|
||||
import { setRoleStatus } from '@/api/demo/system';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
|
||||
type CheckedType = boolean | string | number;
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '监控编号',
|
||||
dataIndex: 'jkdgbidzlkjg',
|
||||
width:80,
|
||||
},
|
||||
|
||||
{
|
||||
title: '可见光监控',
|
||||
dataIndex: 'jkdmckjg',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '热成像监控',
|
||||
dataIndex: 'jkdmcrcx',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '监控类型',
|
||||
dataIndex: 'jklx',
|
||||
width: 80,
|
||||
customRender: ({ record }) => {
|
||||
return "高空瞭望";
|
||||
},
|
||||
|
||||
},{
|
||||
title: '所属县区',
|
||||
dataIndex: 'qx',
|
||||
width:80,
|
||||
},
|
||||
{
|
||||
title: '位置',
|
||||
dataIndex: 'jd',
|
||||
width: 80,
|
||||
customRender: ({ record }) => {
|
||||
return record.jd+" , "+record.wd;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'key',
|
||||
label: '关键字',
|
||||
component: 'Input',
|
||||
colProps: { span: 8 },
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'id',
|
||||
label: '角色名称',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
ifShow:false,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
label: '角色名称',
|
||||
required: true,
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
label: '状态',
|
||||
component: 'RadioButtonGroup',
|
||||
defaultValue: 0,
|
||||
componentProps: {
|
||||
options: [
|
||||
{ label: '启用', value: 0},
|
||||
{ label: '停用', value: 1 },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue