Merge remote-tracking branch 'origin/dev' into dev
# Conflicts: # src/components/AIcon/index.tsx
This commit is contained in:
xieyonghong
commit
f66e483f18
|
|
@ -0,0 +1,25 @@
|
|||
// 产品分类
|
||||
import server from '@/utils/request'
|
||||
import { CategoryItem } from '@/views/device/Category/typings'
|
||||
/**
|
||||
* 查询产品分类树形数据
|
||||
*/
|
||||
|
||||
export const queryTree = (params?: Record<string, any>) => server.post<CategoryItem>('/device/category/_tree', params)
|
||||
|
||||
/**
|
||||
* 保存树形数据
|
||||
*/
|
||||
export const saveTree = (data: any) =>server.post('/device/category', data)
|
||||
|
||||
|
||||
/**
|
||||
* 根据Id修改
|
||||
*/
|
||||
export const updateTree = (data: any, id:string) => server.put(`/device/category/${id}`, data)
|
||||
|
||||
/**
|
||||
* 根据Id删除数据
|
||||
*/
|
||||
|
||||
export const deleteTree = (id:string) => server.remove(`/device/category/${id}`)
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 设备数量
|
||||
export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
|
||||
// 产品数量
|
||||
export const getProductCount_api = (data) => server.post(`/device-product/_count`, data);
|
||||
// 查询产品列表
|
||||
export const getProductList_api = (data) => server.get(`/device/product/_query/no-paging?paging=false`, data);
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 当前登录用户权限信息
|
||||
export const getMe_api = () => server.get(`/authorize/me`);
|
||||
// 设置登录用户选择的页面
|
||||
export const setView_api = (data:object) => server.patch(`/user/settings/view/user`, data);
|
||||
// 当前登录用户选择的页面
|
||||
export const getView_api = () => server.get(`/user/settings/view/user`);
|
||||
|
||||
// 设备数量
|
||||
export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
|
||||
// 产品数量
|
||||
export const getProductCount_api = (data:object) => server.post(`/device-product/_count`, data);
|
||||
// 查询产品列表
|
||||
export const getProductList_api = (data:object) => server.get(`/device/product/_query/no-paging?paging=false`, data);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 获取权限列表
|
||||
export const getPermission_api = (data:object) => server.post(`/permission/_query/`,data);
|
||||
// 修改权限信息
|
||||
export const editPermission_api = (data:object) => server.patch(`/permission`,data);
|
||||
|
|
@ -27,6 +27,7 @@ const iconKeys = [
|
|||
'SyncOutlined',
|
||||
'ExclamationCircleOutlined',
|
||||
'UploadOutlined',
|
||||
'PlusCircleOutlined',
|
||||
'MenuUnfoldOutlined',
|
||||
'MenuFoldOutlined',
|
||||
'QuestionCircleOutlined'
|
||||
|
|
|
|||
|
|
@ -109,6 +109,10 @@ export default [
|
|||
path:'/system/Role/detail/:id',
|
||||
component: ()=>import('@/views/system/Role/Detail/index.vue')
|
||||
},
|
||||
{
|
||||
path:'/system/Permission',
|
||||
component: ()=>import('@/views/system/Permission/index.vue')
|
||||
},
|
||||
// 初始化
|
||||
{
|
||||
path: '/init-home',
|
||||
|
|
@ -116,9 +120,13 @@ export default [
|
|||
},
|
||||
// 物联卡 iot-card
|
||||
{
|
||||
path: '/iot-card/home',
|
||||
path: '/iot-card/Home',
|
||||
component: () => import('@/views/iot-card/Home/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/iot-card/Dashboard',
|
||||
component: () => import('@/views/iot-card/Dashboard/index.vue')
|
||||
},
|
||||
// 北向输出
|
||||
{
|
||||
path: '/northbound/DuerOS',
|
||||
|
|
@ -128,4 +136,10 @@ export default [
|
|||
path: '/northbound/AliCloud',
|
||||
component: () => import('@/views/northbound/AliCloud/index.vue')
|
||||
},
|
||||
|
||||
// 产品分类
|
||||
{
|
||||
path: '/iot/device/Category',
|
||||
component: () => import('@/views/device/Category/index.vue')
|
||||
}
|
||||
]
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import moment from "moment";
|
||||
import { LocalStore } from "./comm";
|
||||
import { TOKEN_KEY } from "./variable";
|
||||
import {SystemConst} from './consts';
|
||||
|
||||
/**
|
||||
* 把数据下载成JSON
|
||||
|
|
@ -52,4 +53,6 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
|
|||
document.body.appendChild(formElement);
|
||||
formElement.submit();
|
||||
document.body.removeChild(formElement);
|
||||
};
|
||||
};
|
||||
// 是否不是community版本
|
||||
export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<!-- 新增编辑弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:title="props.title"
|
||||
:maskClosable="false"
|
||||
destroy-on-close
|
||||
v-model:visible="visible"
|
||||
@ok="submitData"
|
||||
@cancel="close"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
v-bind="layout"
|
||||
>
|
||||
<a-form
|
||||
layout="vertical"
|
||||
v-model="formModel"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
>
|
||||
<a-form-item label="名称" name="name" v-bind="validateInfos.name">
|
||||
<a-input v-model:value="formModel.name" :maxlength="64" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="排序"
|
||||
name="sortIndex"
|
||||
v-bind="validateInfos.sortIndex"
|
||||
>
|
||||
<a-input-number
|
||||
style="width: 100%"
|
||||
id="inputNumber"
|
||||
v-model:value="formModel.sortIndex"
|
||||
:min="1"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明">
|
||||
<a-textarea
|
||||
v-model:value="formModel.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script setup lang="ts" name="modifyModal">
|
||||
import { PropType } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { queryTree } from '@/api/device/category';
|
||||
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
|
||||
import { list } from '@/api/iot-card/home';
|
||||
const emits = defineEmits(['refresh']);
|
||||
const formRef = ref();
|
||||
const useForm = Form.useForm;
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: Object as PropType<Record<string, any>>,
|
||||
default: () => {},
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
defult: '',
|
||||
},
|
||||
isAdd: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
isChild: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
interface formState {
|
||||
name: string;
|
||||
sortIndex: number;
|
||||
description: string;
|
||||
}
|
||||
const listData = ref([]);
|
||||
/**
|
||||
* 表单数据
|
||||
*/
|
||||
const formModel = ref<formState>({
|
||||
name: '',
|
||||
sortIndex: 1,
|
||||
description: '',
|
||||
});
|
||||
const rules = ref({
|
||||
name: [{ required: true, message: '请输入名称' }],
|
||||
sortIndex: [{ required: true, message: '请输入排序' }],
|
||||
});
|
||||
const visible = ref(false);
|
||||
const { resetFields, validate, validateInfos } = useForm(
|
||||
formModel.value,
|
||||
rules.value,
|
||||
);
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
const submitData = async () => {
|
||||
validate()
|
||||
.then(async () => {})
|
||||
.catch((error: ValidateErrorEntity<formState>) => {});
|
||||
};
|
||||
/**
|
||||
* 显示弹窗
|
||||
*/
|
||||
const show = (row: any) => {
|
||||
if (props.isAdd === 0) {
|
||||
//新增
|
||||
if (props.isChild) {
|
||||
//存在子类
|
||||
if (row.children && row.children.length > 0) {
|
||||
let childArr = [];
|
||||
childArr = row.children.sort(compare('sortIndex'));
|
||||
formModel.value = {
|
||||
name: '',
|
||||
sortIndex: childArr[childArr.length - 1].sortIndex + 1,
|
||||
description: '',
|
||||
};
|
||||
} else {
|
||||
formModel.value = {
|
||||
name: '',
|
||||
sortIndex: 1,
|
||||
description: '',
|
||||
};
|
||||
}
|
||||
} else {
|
||||
let arr = [];
|
||||
arr = listData.value.sort(compare('sortIndex'));
|
||||
if (arr.length > 0) {
|
||||
formModel.value = {
|
||||
name: '',
|
||||
sortIndex: arr[arr.length - 1].sortIndex + 1,
|
||||
description: '',
|
||||
};
|
||||
} else {
|
||||
formModel.value = {
|
||||
name: '',
|
||||
sortIndex: 1,
|
||||
description: '',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
visible.value = true;
|
||||
} else if (props.isAdd === 2) {
|
||||
// 编辑
|
||||
formModel.value = {
|
||||
name: row.name,
|
||||
sortIndex: row.sortIndex,
|
||||
description: row.description,
|
||||
};
|
||||
visible.value = true;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 判断是新增还是编辑
|
||||
*/
|
||||
const judgeIsAdd = () => {};
|
||||
/**
|
||||
* 排序
|
||||
*/
|
||||
const compare = (property: any) => {
|
||||
return function (obj1: any, obj2: any) {
|
||||
var value1 = obj1[property];
|
||||
var value2 = obj2[property];
|
||||
return value1 - value2; // 升序
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 获取列表数据
|
||||
*/
|
||||
getTableData = async () => {
|
||||
const params = {
|
||||
paging: false,
|
||||
sorts: [
|
||||
{ name: 'sortIndex', order: 'asc' },
|
||||
{
|
||||
name: 'createTime',
|
||||
order: 'desc',
|
||||
},
|
||||
],
|
||||
};
|
||||
const res = await queryTree(params);
|
||||
if (res.status === 200) {
|
||||
listData.value = res.result;
|
||||
console.log(listData.value, 'listData.value');
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 关闭弹窗
|
||||
*/
|
||||
const close = () => {
|
||||
visible.value = false;
|
||||
resetFields();
|
||||
};
|
||||
getTableData();
|
||||
//监听项目ID
|
||||
watch([() => props.isAdd], () => {}, { immediate: false, deep: true });
|
||||
defineExpose({
|
||||
show: show,
|
||||
});
|
||||
</script>
|
||||
<style></style>
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
<!--产品分类 -->
|
||||
<template>
|
||||
<a-card class="product-category">
|
||||
<Search :columns="query.columns" target="category" />
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:request="queryTree"
|
||||
model="TABLE"
|
||||
:params="query.params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-button type="primary" @click="add"
|
||||
><plus-outlined />新增</a-button
|
||||
>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip
|
||||
v-for="i in getActions(slotProps, 'table')"
|
||||
:key="i.key"
|
||||
v-bind="i.tooltip"
|
||||
>
|
||||
<a-popconfirm
|
||||
v-if="i.popConfirm"
|
||||
v-bind="i.popConfirm"
|
||||
:disabled="i.disabled"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
v-else
|
||||
@click="i.onClick && i.onClick(slotProps)"
|
||||
>
|
||||
<a-button
|
||||
:disabled="i.disabled"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
><AIcon :type="i.icon"
|
||||
/></a-button>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
<!-- 新增和编辑弹窗 -->
|
||||
<ModifyModal
|
||||
ref="modifyRef"
|
||||
:formData="currentForm"
|
||||
:title="title"
|
||||
:isAdd="isAdd"
|
||||
:isChild="isChild"
|
||||
@refresh="() => modifyRef.value?.reload()"
|
||||
/>
|
||||
</a-card>
|
||||
</template>
|
||||
<script lang="ts" name="Category" setup>
|
||||
import { queryTree, deleteTree } from '@/api/device/category';
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import ModifyModal from './components/modifyModal/index.vue';
|
||||
import type { TableColumnType, TableProps } from 'ant-design-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const modifyRef = ref();
|
||||
const dataSource = ref([]);
|
||||
const currentForm = ref({});
|
||||
const title = ref('');
|
||||
const isAdd = ref(0);
|
||||
const isChild = ref(false);
|
||||
// 筛选
|
||||
const query = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortIndex',
|
||||
valueType: 'digit',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
key: 'description',
|
||||
ellipsis: true,
|
||||
dataIndex: 'description',
|
||||
filters: true,
|
||||
onFilter: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
valueType: 'option',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
},
|
||||
],
|
||||
params: {
|
||||
paging: false,
|
||||
sorts: [
|
||||
{ name: 'sortIndex', order: 'asc' },
|
||||
{
|
||||
name: 'createTime',
|
||||
order: 'desc',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 操作栏按钮
|
||||
*/
|
||||
const getActions = (
|
||||
data: Partial<Record<string, any>>,
|
||||
type: 'table',
|
||||
): ActionsType[] => {
|
||||
if (!data) return [];
|
||||
const actions = [
|
||||
{
|
||||
key: 'edit',
|
||||
text: '编辑',
|
||||
tooltip: {
|
||||
title: '编辑',
|
||||
},
|
||||
icon: 'EditOutlined',
|
||||
onClick: async () => {
|
||||
title.value = '编辑分类';
|
||||
isAdd.value = 2;
|
||||
currentForm.value = data;
|
||||
nextTick(() => {
|
||||
modifyRef.value.show(data);
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'add',
|
||||
text: '添加子分类',
|
||||
tooltip: {
|
||||
title: '添加子分类',
|
||||
},
|
||||
icon: 'PlusCircleOutlined',
|
||||
onClick: () => {
|
||||
title.value = '新增子分类';
|
||||
isAdd.value = 0;
|
||||
isChild.value = true;
|
||||
currentForm.value = {};
|
||||
nextTick(() => {
|
||||
modifyRef.value.show(data);
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
text: '删除',
|
||||
popConfirm: {
|
||||
title: '确认删除?',
|
||||
okText: ' 确定',
|
||||
cancelText: '取消',
|
||||
onConfirm: async () => {
|
||||
const resp = await deleteTree(data.id);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
tableRef.value?.reload();
|
||||
} else {
|
||||
message.error('操作失败！');
|
||||
}
|
||||
},
|
||||
},
|
||||
icon: 'DeleteOutlined',
|
||||
},
|
||||
];
|
||||
return actions;
|
||||
};
|
||||
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{ title: '名称', dataIndex: 'name', key: 'name' },
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortIndex',
|
||||
key: 'sortIndex',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'describe',
|
||||
key: 'describe',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 250,
|
||||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
/**
|
||||
* 添加产品分类
|
||||
*/
|
||||
add: async () => {
|
||||
title.value = '新增分类';
|
||||
isAdd.value = 0;
|
||||
isChild.value = false;
|
||||
nextTick(() => {
|
||||
modifyRef.value.show(currentForm.value);
|
||||
});
|
||||
},
|
||||
});
|
||||
const { add, columns } = toRefs(table);
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
export type CategoryItem = {
|
||||
id: string;
|
||||
name: string;
|
||||
level: number;
|
||||
key: string;
|
||||
parentId: string;
|
||||
path: string;
|
||||
sortIndex: number;
|
||||
children?: Category[];
|
||||
};
|
||||
|
|
@ -7,37 +7,47 @@
|
|||
<a-col
|
||||
:span="8"
|
||||
class="select-item"
|
||||
:class="{ selected: selectId === '1' }"
|
||||
@click="selectId = '1'"
|
||||
:class="{ selected: selectValue === 'device' }"
|
||||
@click="selectValue = 'device'"
|
||||
>
|
||||
<img src="/images/home/device.png" alt="" />
|
||||
</a-col>
|
||||
<a-col
|
||||
:span="8"
|
||||
class="select-item"
|
||||
:class="{ selected: selectId === '2' }"
|
||||
@click="selectId = '2'"
|
||||
:class="{ selected: selectValue === 'ops' }"
|
||||
@click="selectValue = 'ops'"
|
||||
>
|
||||
<img src="/images/home/ops.png" alt="" />
|
||||
</a-col>
|
||||
<a-col
|
||||
:span="8"
|
||||
class="select-item"
|
||||
:class="{ selected: selectId === '3' }"
|
||||
@click="selectId = '3'"
|
||||
:class="{ selected: selectValue === 'comprehensive' }"
|
||||
@click="selectValue = 'comprehensive'"
|
||||
>
|
||||
<img src="/images/home/comprehensive.png" alt="" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-button type="primary" class="btn" @click="confirm">确定</a-button>
|
||||
<a-button type="primary" class="btn" @click="confirm"
|
||||
>确定</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const selectId = ref('1');
|
||||
import { setView_api } from '@/api/home';
|
||||
|
||||
const confirm = ()=>{}
|
||||
const emits = defineEmits(['refresh']);
|
||||
const selectValue = ref('device');
|
||||
|
||||
const confirm = () => {
|
||||
setView_api({
|
||||
name: 'view',
|
||||
content: selectValue.value,
|
||||
}).then(() => emits('refresh'));
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<div class="container">
|
||||
<div class="header"></div>
|
||||
<div class="left"></div>
|
||||
<div class="content iot-home-container">
|
||||
<!-- <InitHome /> -->
|
||||
<!-- <DeviceHome /> -->
|
||||
<!-- <DevOpsHome /> -->
|
||||
<ComprehensiveHome />
|
||||
<div class="content iot-home-container" v-loading="loading">
|
||||
<InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
|
||||
<DeviceHome v-else-if="currentView === 'device'" />
|
||||
<DevOpsHome v-else-if="currentView === 'ops'" />
|
||||
<ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -17,6 +17,39 @@ import DeviceHome from './components/DeviceHome/index.vue';
|
|||
import DevOpsHome from './components/DevOpsHome/index.vue';
|
||||
import ComprehensiveHome from './components/ComprehensiveHome/index.vue';
|
||||
|
||||
import { isNoCommunity } from '@/utils/utils';
|
||||
import { getMe_api, getView_api } from '@/api/home';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const currentView = ref<string>('');
|
||||
const loading = ref<boolean>(true);
|
||||
|
||||
// 获取选择的视图
|
||||
const setCurrentView = () => {
|
||||
getView_api().then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
if (resp.result) currentView.value = resp.result?.content;
|
||||
else if (resp.result.username === 'admin') {
|
||||
currentView.value = 'comprehensive';
|
||||
} else currentView.value = 'init';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (isNoCommunity) {
|
||||
// 判断是否是api用户 是则跳转 否则获取选中的视图
|
||||
getMe_api().then((resp: any) => {
|
||||
if (resp && resp.status === 200) {
|
||||
const isApiUser = resp.result.dimensions.find(
|
||||
(item: any) =>
|
||||
item.type === 'api-client' || item.type.id === 'api-client',
|
||||
);
|
||||
|
||||
isApiUser ? router.push('/system/api') : setCurrentView();
|
||||
}
|
||||
});
|
||||
}else setCurrentView()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@
|
|||
<a-upload
|
||||
name="file"
|
||||
:action="
|
||||
action
|
||||
FILE_UPLOAD
|
||||
"
|
||||
:headers="
|
||||
headers
|
||||
|
|
@ -259,7 +259,7 @@
|
|||
<a-upload
|
||||
name="file"
|
||||
:action="
|
||||
action
|
||||
FILE_UPLOAD
|
||||
"
|
||||
:headers="
|
||||
headers
|
||||
|
|
@ -354,7 +354,9 @@
|
|||
>
|
||||
<a-upload
|
||||
name="file"
|
||||
:action="action"
|
||||
:action="
|
||||
FILE_UPLOAD
|
||||
"
|
||||
:headers="headers"
|
||||
:beforeUpload="
|
||||
beforeBackUpload
|
||||
|
|
@ -773,6 +775,7 @@ import {
|
|||
saveInit,
|
||||
} from '@/api/initHome';
|
||||
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
|
||||
import { FILE_UPLOAD } from '@/api/comm';
|
||||
import { LocalStore } from '@/utils/comm';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
|
|
@ -899,7 +902,7 @@ const activeKey = ref<string>('1');
|
|||
const spinning = ref<boolean>(false);
|
||||
const visible = ref<boolean>(false);
|
||||
const flag = ref<boolean>(false);
|
||||
const action = ref<string>(`${BASE_API_PATH}/file/static`);
|
||||
// const action = ref<string>(`${BASE_API_PATH}/file/static`);
|
||||
const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
|
||||
/**
|
||||
* 角色勾选数据
|
||||
|
|
|
|||
|
|
@ -0,0 +1,323 @@
|
|||
<!-- 物联卡-仪表盘 -->
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<a-card>
|
||||
<a-row :gutter="20" :style="{ marginBottom: '20px' }">
|
||||
<a-col :span="24"><Guide title="数据统计" /></a-col>
|
||||
<a-col :span="8">
|
||||
<div class="data-statistics-item">
|
||||
<div class="info" style="width: 100%">
|
||||
<div class="label">昨日流量消耗</div>
|
||||
<a-tooltip placement="bottomLeft">
|
||||
<template #title>
|
||||
<span>{{ dayTotal }} M</span>
|
||||
</template>
|
||||
<div class="value">
|
||||
{{ dayTotal }}
|
||||
<span class="unit">M</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<LineChart color="#FBA500" :chartData="dayOptions" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<div class="data-statistics-item">
|
||||
<div class="info" style="width: 100%">
|
||||
<div class="label">当月流量消耗</div>
|
||||
<a-tooltip placement="bottomLeft">
|
||||
<template #title>
|
||||
<span>{{ monthTotal }} M</span>
|
||||
</template>
|
||||
<div class="value">
|
||||
{{ monthTotal }}
|
||||
<span class="unit">M</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<LineChart :chartData="monthOptions" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<div class="data-statistics-item">
|
||||
<div class="info" style="width: 100%">
|
||||
<div class="label">本年流量消耗</div>
|
||||
<a-tooltip placement="bottomLeft">
|
||||
<template #title>
|
||||
<span>{{ yearTotal }} M</span>
|
||||
</template>
|
||||
<div class="value">
|
||||
{{ yearTotal }}
|
||||
<span class="unit">M</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<LineChart color="#58E1D3" :chartData="yearOptions" />
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="16">
|
||||
<Guide title="流量统计">
|
||||
<template #extra></template>
|
||||
</Guide>
|
||||
<LineChart
|
||||
:showX="true"
|
||||
:showY="true"
|
||||
style="min-height: 450px"
|
||||
:chartData="yearOptions"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<Guide title="流量使用TOP10">
|
||||
<template #extra></template>
|
||||
</Guide>
|
||||
<div class="rankingList" style="height: 400px">
|
||||
<div
|
||||
v-for="(item, index) in topList"
|
||||
:key="item.cardNum"
|
||||
class="rankItem"
|
||||
>
|
||||
<div
|
||||
class="number"
|
||||
:class="`number-item-${index + 1}`"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="cardNum">{{ item.cardNum }}</div>
|
||||
<div class="progress">
|
||||
<a-progress
|
||||
:strokeColor="'#ADC6FF'"
|
||||
:trailColor="'#E0E4E8'"
|
||||
:strokeLinecap="'butt'"
|
||||
:showInfo="false"
|
||||
:percent="
|
||||
Math.ceil((item.value / topTotal) * 100)
|
||||
"
|
||||
></a-progress>
|
||||
</div>
|
||||
<div class="total">
|
||||
{{ item?.value?.toFixed(2) }} M
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Guide from '../components/Guide.vue';
|
||||
import LineChart from '../components/LineChart.vue';
|
||||
import moment from 'moment';
|
||||
import { queryFlow } from '@/api/iot-card/home';
|
||||
|
||||
const dayTotal = ref(0);
|
||||
const monthTotal = ref(0);
|
||||
const yearTotal = ref(0);
|
||||
const dayOptions = ref<any[]>([]);
|
||||
const monthOptions = ref<any[]>([]);
|
||||
const yearOptions = ref<any[]>([]);
|
||||
|
||||
const flowData = ref<any[]>([]);
|
||||
const topList = ref<any[]>([]);
|
||||
const topTotal = ref(0);
|
||||
|
||||
const getData = (
|
||||
start: number,
|
||||
end: number,
|
||||
): Promise<{ sortArray: any[]; data: any[] }> => {
|
||||
return new Promise((resolve) => {
|
||||
queryFlow(start, end, {
|
||||
orderBy: 'date',
|
||||
}).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
const sortArray = resp.result.sort(
|
||||
(a: any, b: any) =>
|
||||
new Date(a.date).getTime() - new Date(b.date).getTime(),
|
||||
);
|
||||
resolve({
|
||||
sortArray,
|
||||
data: sortArray.map(
|
||||
(item: any) => item.value && item.value.toFixed(2),
|
||||
),
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 查询今日、当月、本年数据
|
||||
*/
|
||||
const getDataTotal = () => {
|
||||
const dTime = [
|
||||
moment(new Date()).startOf('day').valueOf(),
|
||||
moment(new Date()).endOf('day').valueOf(),
|
||||
];
|
||||
const mTime = [
|
||||
moment().startOf('month').valueOf(),
|
||||
moment().endOf('month').valueOf(),
|
||||
];
|
||||
const yTime = [
|
||||
moment().startOf('year').valueOf(),
|
||||
moment().endOf('year').valueOf(),
|
||||
];
|
||||
getData(dTime[0], dTime[1]).then((resp) => {
|
||||
dayTotal.value = resp.data
|
||||
.reduce((r, n) => r + Number(n), 0)
|
||||
.toFixed(2);
|
||||
dayOptions.value = resp.sortArray;
|
||||
});
|
||||
getData(mTime[0], mTime[1]).then((resp) => {
|
||||
monthTotal.value = resp.data
|
||||
.reduce((r, n) => r + Number(n), 0)
|
||||
.toFixed(2);
|
||||
monthOptions.value = resp.sortArray;
|
||||
});
|
||||
getData(yTime[0], yTime[1]).then((resp) => {
|
||||
yearTotal.value = resp.data
|
||||
.reduce((r, n) => r + Number(n), 0)
|
||||
.toFixed(2);
|
||||
yearOptions.value = resp.sortArray;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 流量统计
|
||||
* @param data
|
||||
*/
|
||||
const getEcharts = (data: any) => {
|
||||
console.log(data);
|
||||
let startTime = data.time.start;
|
||||
let endTime = data.time.end;
|
||||
if (data.time.type === 'week' || data.time.type === 'month') {
|
||||
startTime = moment(data.time.start).startOf('days').valueOf();
|
||||
endTime = moment(data.time.end).startOf('days').valueOf();
|
||||
}
|
||||
getData(startTime, endTime).then((resp) => {
|
||||
flowData.value = resp.sortArray;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 流量使用TOP10
|
||||
* @param star 开始时间
|
||||
* @param end 结束时间
|
||||
*/
|
||||
const getTopRang = (star: number, end: number) => {
|
||||
queryFlow(star, end, { orderBy: 'usage' }).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
const arr = resp.result
|
||||
.slice(0, 10)
|
||||
.sort((a: any, b: any) => b.value - a.value);
|
||||
topTotal.value = arr.length ? arr[0].value : 0;
|
||||
topList.value = arr;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
getDataTotal();
|
||||
|
||||
// getEcharts(data);
|
||||
|
||||
const dTime = [
|
||||
moment().subtract(6, 'days').startOf('day').valueOf(),
|
||||
moment().endOf('day').valueOf(),
|
||||
];
|
||||
getTopRang(dTime[0], dTime[1]);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.page-container {
|
||||
.data-statistics-item {
|
||||
height: 140px;
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #e0e4e8;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
|
||||
.info {
|
||||
// width: 180px;
|
||||
width: 28%;
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.64);
|
||||
}
|
||||
.value {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
.unit {
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rankingList {
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
|
||||
.rankItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.number {
|
||||
flex: 0 0 24px;
|
||||
height: 24px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
background-color: #d1d1d1;
|
||||
}
|
||||
|
||||
.number-item-1 {
|
||||
color: #e50012;
|
||||
background-color: rgba(#e50012, 0.1);
|
||||
}
|
||||
|
||||
.number-item-2 {
|
||||
color: #fba500;
|
||||
background-color: rgba(#fba500, 0.1);
|
||||
}
|
||||
|
||||
.number-item-3 {
|
||||
color: #597ef7;
|
||||
background-color: rgba(#597ef7, 0.1);
|
||||
}
|
||||
|
||||
.cardNum {
|
||||
flex: 0 0 100px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
flex: 1 1 auto;
|
||||
margin: 0 8px;
|
||||
|
||||
:deep(.ant-progress-inner) {
|
||||
border-radius: 0px;
|
||||
}
|
||||
:deep(.ant-progress-bg) {
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
flex: 0 0 80px;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<div class="chart" ref="chart"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
|
||||
const props = defineProps({
|
||||
// 图表颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#498BEF',
|
||||
},
|
||||
// 是否展示x轴
|
||||
showX: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否展示y轴
|
||||
showY: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 图表数据
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 绘制图表
|
||||
*/
|
||||
const createChart = () => {
|
||||
nextTick(() => {
|
||||
const myChart = echarts.init(proxy.$refs.chart);
|
||||
|
||||
const options = {
|
||||
grid: {
|
||||
left: '7%',
|
||||
right: '5%',
|
||||
top: '5%',
|
||||
bottom: '5%',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// formatter: '{a}<br>{b}: {c}',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: props.showX,
|
||||
boundaryGap: false,
|
||||
data: props.chartData.map((m: any) => m.date),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
show: props.showY,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '流量消耗',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: props.color,
|
||||
lineStyle: {
|
||||
color: props.color,
|
||||
width: 1,
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 0.1,
|
||||
color: '#fff',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: props.color,
|
||||
},
|
||||
],
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
data: props.chartData.map(
|
||||
(m: any) => m.value && m.value.toFixed(2),
|
||||
),
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.chartData,
|
||||
() => createChart(),
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-model:visible="dialog.visible"
|
||||
:title="dialog.title"
|
||||
width="1000px"
|
||||
@ok="dialog.handleOk"
|
||||
class="edit-dialog-container"
|
||||
>
|
||||
<a-form ref="formRef" :model="form.data" layout="vertical">
|
||||
<a-form-item
|
||||
name="id"
|
||||
:rules="[{ required: true, message: '请输入标识' }]"
|
||||
class="question-item"
|
||||
>
|
||||
<template #label>
|
||||
<span>标识</span>
|
||||
<span class="required-icon">*</span>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>标识ID需与代码中的标识ID一致</span>
|
||||
</template>
|
||||
<question-circle-outlined style="color: #00000073" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.data.id"
|
||||
placeholder="请输入标识(ID)"
|
||||
:maxlength="64"
|
||||
:disabled="dialog.title === '编辑'"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
name="name"
|
||||
label="名称"
|
||||
:rules="[{ required: true, message: '请输入名称' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="form.data.name"
|
||||
placeholder="请输入名称"
|
||||
:maxlength="64"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<a-table
|
||||
:columns="table.columns"
|
||||
:data-source="actionTableData"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.key === 'index'">
|
||||
{{
|
||||
`#${
|
||||
(pager.current - 1) * pager.pageSize + (index + 1)
|
||||
}.`
|
||||
}}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="column.key !== 'index' && column.key !== 'act'"
|
||||
>
|
||||
<a-input v-model:value="record[column.key]" />
|
||||
</template>
|
||||
<template v-else-if="column.key === 'act'">
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
@click="table.clickRemove(index)"
|
||||
>
|
||||
<delete-outlined />
|
||||
</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="pager">
|
||||
<a-pagination
|
||||
v-model:current="pager.current"
|
||||
:page-size="pager.pageSize"
|
||||
:total="pager.total"
|
||||
/>
|
||||
<a-select v-model:value="pager.current" style="width: 60px">
|
||||
<a-select-option v-for="(val,i) in pageArr" :value="i + 1">{{
|
||||
i + 1
|
||||
}}</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
<a-button type="dashed" style="width: 100%" @click="table.clickAdd">
|
||||
<plus-outlined /> 添加
|
||||
</a-button>
|
||||
|
||||
<template #footer>
|
||||
<a-button key="back" @click="dialog.visible = false">取消</a-button>
|
||||
<a-button
|
||||
key="submit"
|
||||
type="primary"
|
||||
:loading="form.loading"
|
||||
@click="dialog.handleOk"
|
||||
>确定</a-button
|
||||
>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormInstance, message } from 'ant-design-vue';
|
||||
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const defaultAction = [
|
||||
{ action: 'query', name: '查询', describe: '查询' },
|
||||
{ action: 'save', name: '保存', describe: '保存' },
|
||||
{ action: 'delete', name: '删除', describe: '删除' },
|
||||
];
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
title: '',
|
||||
visible: false,
|
||||
handleOk: () => {
|
||||
formRef.value?.validate().then(() => console.log('success'));
|
||||
},
|
||||
// 控制弹窗的打开与关闭
|
||||
changeVisible: (status: boolean, defaultForm: any = {}) => {
|
||||
form.data = { name: '', description: '', ...defaultForm };
|
||||
dialog.title = defaultForm.id ? '编辑' : '新增';
|
||||
table.data = defaultForm.id ? defaultForm.actions : [...defaultAction];
|
||||
pager.total = table.data.length;
|
||||
pager.current = 1;
|
||||
dialog.visible = status;
|
||||
},
|
||||
});
|
||||
// 表单相关
|
||||
const formRef = ref<FormInstance>();
|
||||
const form = reactive({
|
||||
loading: false,
|
||||
data: {
|
||||
name: '',
|
||||
id: '',
|
||||
},
|
||||
});
|
||||
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '-',
|
||||
dataIndex: 'index',
|
||||
key: 'index',
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'describe',
|
||||
key: 'describe',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'act',
|
||||
key: 'act',
|
||||
},
|
||||
],
|
||||
data: <any>[],
|
||||
clickRemove: (index: number) => {
|
||||
pager.total -= 1;
|
||||
table.data.splice(index, 1);
|
||||
|
||||
// 当删除的刚好为本页的最后一项时，返回到上一页
|
||||
if (pager.current > 1 && pager.total % pager.pageSize === 0)
|
||||
pager.current -= 1;
|
||||
},
|
||||
clickAdd: () => {
|
||||
table.data.push({});
|
||||
pager.total += 1;
|
||||
|
||||
// 当添加的项需要新加一页才能显示时，跳转到最后一页
|
||||
if (pager.total % pager.pageSize === 1) {
|
||||
pager.current = Math.ceil(pager.total / pager.pageSize);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const pager = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
const pageArr = computed(() => {
|
||||
const maxPageNum = Math.ceil(pager.total / pager.pageSize);
|
||||
return new Array(maxPageNum).fill(1);
|
||||
});
|
||||
const actionTableData = computed(() => {
|
||||
const startIndex = (pager.current - 1) * pager.pageSize;
|
||||
const endIndex = Math.min(
|
||||
pager.current * pager.pageSize,
|
||||
table.data.length,
|
||||
);
|
||||
console.log(startIndex, endIndex);
|
||||
|
||||
return table.data.slice(startIndex, endIndex);
|
||||
});
|
||||
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: dialog.changeVisible,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.edit-dialog-container {
|
||||
.question-item {
|
||||
:deep(.ant-form-item-required) {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
.required-icon {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
margin-left: 2px;
|
||||
color: #ff4d4f;
|
||||
font-size: 14px;
|
||||
font-family: SimSun, sans-serif;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<span class="status-label-container">
|
||||
<i
|
||||
class="circle"
|
||||
:style="{ background: props.statusValue ? '#52c41a' : '#ff4d4f' }"
|
||||
></i>
|
||||
<span>{{ props.statusValue ? '启用' : '禁用' }}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
statusValue: number;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.status-label-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.circle {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<template>
|
||||
<div class="permission-container">
|
||||
<Search :columns="query.columns" />
|
||||
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:request="getPermission_api"
|
||||
model="TABLE"
|
||||
:params="query.params"
|
||||
:defaultParams="{ sorts: [{ name: 'id', order: 'asc' }] }"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-button type="primary" @click="table.openDialog(undefined)"
|
||||
><plus-outlined />新增</a-button
|
||||
>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<StatusLabel :status-value="slotProps.status" />
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip>
|
||||
<template #title>编辑</template>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
@click="table.openDialog(slotProps)"
|
||||
>
|
||||
<edit-outlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<a-popconfirm
|
||||
:title="`确定要${
|
||||
slotProps.status ? '禁用' : '启用'
|
||||
}吗？`"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="table.changeStatus(slotProps)"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.status ? '禁用' : '启用'
|
||||
}}</template>
|
||||
<a-button style="padding: 0" type="link">
|
||||
<stop-outlined v-if="slotProps.status" />
|
||||
<play-circle-outlined v-else />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
|
||||
<a-popconfirm
|
||||
title="确定要删除吗？"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="table.clickDel(slotProps)"
|
||||
:disabled="slotProps.status"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>删除</template>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
:disabled="slotProps.status"
|
||||
>
|
||||
<delete-outlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
|
||||
<div class="dialogs">
|
||||
<EditDialog ref="editDialogRef" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import EditDialog from './components/EditDialog.vue';
|
||||
import StatusLabel from './components/StatusLabel.vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
PlusOutlined,
|
||||
StopOutlined,
|
||||
PlayCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { getPermission_api, editPermission_api } from '@/api/system/permission';
|
||||
|
||||
const editDialogRef = ref(); // 新增弹窗实例
|
||||
const tableRef = ref<Record<string, any>>({}); // 表格实例
|
||||
|
||||
// 筛选
|
||||
const query = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '标识',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
ellipsis: true,
|
||||
fixed: 'left',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
rename: 'status',
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
label: '启用',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
params: {},
|
||||
});
|
||||
|
||||
// 表格
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '标识',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
openDialog: (row: object | undefined = {}) => {
|
||||
editDialogRef.value.openDialog(true, row);
|
||||
},
|
||||
changeStatus: (row: any) => {
|
||||
const params = {
|
||||
...row,
|
||||
status: row.status ? 0 : 1,
|
||||
};
|
||||
editPermission_api(params).then(() => {
|
||||
message.success('操作成功');
|
||||
tableRef.value.reload();
|
||||
});
|
||||
},
|
||||
clickDel: (row: any) => {
|
||||
// delRole_api(row.id).then((resp: any) => {
|
||||
// if (resp.status === 200) {
|
||||
// tableRef.value?.reload();
|
||||
// message.success('操作成功!');
|
||||
// }
|
||||
// });
|
||||
},
|
||||
refresh: () => {
|
||||
tableRef.value.reload();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="details-container">
|
||||
{{ route.params.id }}
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="权限分配"><Permiss /></a-tab-pane>
|
||||
<a-tab-pane key="2" tab="用户管理"><User /></a-tab-pane>
|
||||
|
|
|
|||
|
|
@ -44,10 +44,7 @@
|
|||
<script setup lang="ts">
|
||||
import { FormInstance, message } from 'ant-design-vue';
|
||||
import { saveRole_api } from '@/api/system/role';
|
||||
const router = useRouter()
|
||||
const props = defineProps({
|
||||
open: Number,
|
||||
});
|
||||
const router = useRouter();
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
|
|
@ -59,10 +56,15 @@ const dialog = reactive({
|
|||
if (resp.status === 200) {
|
||||
message.success('操作成功');
|
||||
dialog.visible = false;
|
||||
router.push(`/system/Role/detail/${resp.result.id}`)
|
||||
router.push(`/system/Role/detail/${resp.result.id}`);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 控制弹窗的打开与关闭
|
||||
changeVisible: (status: boolean, defaultForm: object={}) => {
|
||||
dialog.visible = status;
|
||||
form.data = { name: '', description: '', ...defaultForm };
|
||||
},
|
||||
});
|
||||
// 表单相关
|
||||
const formRef = ref<FormInstance>();
|
||||
|
|
@ -74,18 +76,12 @@ const form = reactive({
|
|||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
() => {
|
||||
// 重置表单
|
||||
form.data = {
|
||||
name: '',
|
||||
description: '',
|
||||
};
|
||||
formRef.value?.resetFields();
|
||||
dialog.visible = true;
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: dialog.changeVisible
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
</JTable>
|
||||
|
||||
<div class="dialogs">
|
||||
<AddDialog :open="dialog.openAdd" />
|
||||
<AddDialog ref="addDialogRef" />
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
|
@ -59,8 +59,8 @@ import {
|
|||
import AddDialog from './components/AddDialog.vue';
|
||||
import { getRoleList_api, delRole_api } from '@/api/system/role';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const router = useRouter()
|
||||
const addDialogRef = ref(); // 新增弹窗实例
|
||||
const router = useRouter();
|
||||
// 筛选
|
||||
const query = reactive({
|
||||
columns: [
|
||||
|
|
@ -122,24 +122,21 @@ const table = reactive({
|
|||
],
|
||||
tableData: [],
|
||||
clickAdd: () => {
|
||||
dialog.openAdd += 1;
|
||||
addDialogRef.value.openDialog(true, {})
|
||||
},
|
||||
clickDel: (row: any) => {
|
||||
delRole_api(row.id).then((resp:any)=>{
|
||||
if(resp.status === 200){
|
||||
tableRef.value?.reload()
|
||||
message.success('操作成功!')
|
||||
delRole_api(row.id).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
tableRef.value?.reload();
|
||||
message.success('操作成功!');
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
clickEdit: (row: any) => {
|
||||
router.push(`/system/Role/detail/${row.id}`)
|
||||
router.push(`/system/Role/detail/${row.id}`);
|
||||
},
|
||||
});
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
openAdd: 0,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue