监控管理
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