0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' into dev-hub

This commit is contained in:
jackhoo_98 2023-03-06 09:36:44 +08:00
parent 05fa3208b7 37fd108617
commit 11ee807371
23 changed files with 774 additions and 907 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Layout/components/Notice.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="notice-container"> <div class="notice-container">
<a-dropdown :trigger="['click']" @visible-change="visibleChange"> <j-dropdown :trigger="['click']" @visible-change="visibleChange">
<div class="icon-content"> <div class="icon-content">
<AIcon <AIcon
type="BellOutlined" type="BellOutlined"
@ -14,7 +14,7 @@
<NoticeInfo :data="list" @on-action="getList" /> <NoticeInfo :data="list" @on-action="getList" />
</div> </div>
</template> </template>
</a-dropdown> </j-dropdown>
</div> </div>
</template> </template>

8
src/components/Layout/components/NoticeInfo.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="notice-info-container"> <div class="notice-info-container">
<a-tabs :activeKey="'default'"> <j-tabs :activeKey="'default'">
<a-tab-pane key="default" tab="未读消息"> <j-tab-pane key="default" tab="未读消息">
<div class="no-data" v-if="props.data.length === 0"> <div class="no-data" v-if="props.data.length === 0">
<img src="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg" alt="" /> <img src="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg" alt="" />
</div> </div>
@ -24,8 +24,8 @@
> >
</div> </div>
</div> </div>
</a-tab-pane> </j-tab-pane>
</a-tabs> </j-tabs>
</div> </div>
</template> </template>

16
src/components/Layout/components/UserInfo.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<a-dropdown placement="bottomRight"> <j-dropdown placement="bottomRight">
<div style="cursor: pointer;height: 100%;"> <div style="cursor: pointer;height: 100%;">
<img <img
:src="userInfo.avatar" :src="userInfo.avatar"
@ -10,18 +10,18 @@
<span>{{ userInfo.name }}</span> <span>{{ userInfo.name }}</span>
</div> </div>
<template #overlay> <template #overlay>
<a-menu> <j-menu>
<a-menu-item @click="push('/account/center')" style="width: 160px;"> <j-menu-item @click="push('/account/center')" style="width: 160px;">
<AIcon type="UserOutlined" style="margin-right: 8px;" /> <AIcon type="UserOutlined" style="margin-right: 8px;" />
<span>个人中心</span> <span>个人中心</span>
</a-menu-item> </j-menu-item>
<a-menu-item @click="logOut"> <j-menu-item @click="logOut">
<AIcon type="LogoutOutlined" style="margin-right: 8px;" /> <AIcon type="LogoutOutlined" style="margin-right: 8px;" />
<span>退出登录</span> <span>退出登录</span>
</a-menu-item> </j-menu-item>
</a-menu> </j-menu>
</template> </template>
</a-dropdown> </j-dropdown>
</div> </div>
</template> </template>

2
src/router/menu.ts
View File

@ -8,7 +8,7 @@ export const AccountMenu = {
meta: { meta: {
title: '个人中心', title: '个人中心',
icon: '', icon: '',
hideInMenu: true hideInMenu: false
}, },
children: [ children: [
{ {

80
src/views/account/Center/components/EditInfoDialog.vue
View File

@ -1,79 +1,79 @@
<template> <template>
<a-modal <j-modal
visible visible
title="编辑" title="编辑"
@ok="handleOk" @ok="handleOk"
width="770px" width="770px"
@cancel="emits('update:visible', false)" @cancel="emits('update:visible', false)"
> >
<a-form :model="form" layout="vertical" ref="formRef"> <j-form :model="form" layout="vertical" ref="formRef">
<a-row :gutter="24"> <j-row :gutter="24">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="姓名" label="姓名"
name="name" name="name"
:rules="[{ required: true, message: '姓名必填' }]" :rules="[{ required: true, message: '姓名必填' }]"
> >
<a-input <j-input
v-model:value="form.name" v-model:value="form.name"
placeholder="请输入姓名" placeholder="请输入姓名"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item label="用户名"> <j-form-item label="用户名">
<a-input <j-input
v-model:value="form.username" v-model:value="form.username"
placeholder="请输入用户名" placeholder="请输入用户名"
disabled disabled
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-row :gutter="24"> <j-row :gutter="24">
<a-col :span="12"> <j-col :span="12">
<a-form-item label="角色"> <j-form-item label="角色">
<a-input <j-input
:value=" :value="
form.roleList.map((item) => item.name).join(',') form.roleList.map((item) => item.name).join(',')
" "
placeholder="请输入角色" placeholder="请输入角色"
disabled disabled
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item label="组织"> <j-form-item label="组织">
<a-input <j-input
:value=" :value="
form.orgList.map((item) => item.name).join(',') form.orgList.map((item) => item.name).join(',')
" "
placeholder="请输入组织" placeholder="请输入组织"
disabled disabled
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-row :gutter="24"> <j-row :gutter="24">
<a-col :span="12"> <j-col :span="12">
<a-form-item label="手机号"> <j-form-item label="手机号">
<a-input <j-input
v-model:value="form.telephone" v-model:value="form.telephone"
placeholder="请输入手机号" placeholder="请输入手机号"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item label="邮箱"> <j-form-item label="邮箱">
<a-input <j-input
v-model:value="form.email" v-model:value="form.email"
placeholder="请输入邮箱" placeholder="请输入邮箱"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
</a-form> </j-form>
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

26
src/views/account/Center/components/EditPasswordDialog.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<a-modal <j-modal
visible visible
title="重置密码" title="重置密码"
@ok="handleOk" @ok="handleOk"
width="520px" width="520px"
@cancel="emits('update:visible', false)" @cancel="emits('update:visible', false)"
> >
<a-form :model="form" layout="vertical" ref="formRef"> <j-form :model="form" layout="vertical" ref="formRef">
<a-form-item <j-form-item
label="旧密码" label="旧密码"
name="oldPassword" name="oldPassword"
:rules="[ :rules="[
@ -15,12 +15,12 @@
{ validator: checkMothods.old, trigger: 'blur' }, { validator: checkMothods.old, trigger: 'blur' },
]" ]"
> >
<a-input <j-input
v-model:value="form.oldPassword" v-model:value="form.oldPassword"
placeholder="请输入旧密码" placeholder="请输入旧密码"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
label="密码" label="密码"
name="newPassword" name="newPassword"
:rules="[ :rules="[
@ -28,12 +28,12 @@
{ validator: checkMothods.new, trigger: 'blur' }, { validator: checkMothods.new, trigger: 'blur' },
]" ]"
> >
<a-input-password <j-input-password
v-model:value="form.newPassword" v-model:value="form.newPassword"
placeholder="请输入姓名" placeholder="请输入姓名"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
label="确认密码" label="确认密码"
name="confirmPassword" name="confirmPassword"
:rules="[ :rules="[
@ -41,13 +41,13 @@
{ validator: checkMothods.confirm, trigger: 'blur' }, { validator: checkMothods.confirm, trigger: 'blur' },
]" ]"
> >
<a-input-password <j-input-password
v-model:value="form.confirmPassword" v-model:value="form.confirmPassword"
placeholder="请输入姓名" placeholder="请输入姓名"
/> />
</a-form-item> </j-form-item>
</a-form> </j-form>
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

36
src/views/account/Center/index.vue
View File

@ -30,10 +30,10 @@
:action="`${BASE_API_PATH}/file/static`" :action="`${BASE_API_PATH}/file/static`"
@change="upload.changeBackUpload" @change="upload.changeBackUpload"
> >
<a-button> <j-button>
<AIcon type="UploadOutlined" /> <AIcon type="UploadOutlined" />
更换头像 更换头像
</a-button> </j-button>
</a-upload> </a-upload>
</div> </div>
</div> </div>
@ -145,18 +145,18 @@
</div> </div>
<div v-else>{{ item.name }}未绑定</div> <div v-else>{{ item.name }}未绑定</div>
</Ellipsis> </Ellipsis>
<a-popconfirm <j-popconfirm
v-if="item.bound" v-if="item.bound"
title="确认解除绑定嘛?" title="确认解除绑定嘛?"
@confirm="() => unBind(item.id)" @confirm="() => unBind(item.id)"
> >
<a-button>解除绑定</a-button> <j-button>解除绑定</j-button>
</a-popconfirm> </j-popconfirm>
<a-button <j-button
v-else v-else
type="primary" type="primary"
@click="clickBind(item.id)" @click="clickBind(item.id)"
>立即绑定</a-button >立即绑定</j-button
> >
</div> </div>
</div> </div>
@ -165,24 +165,24 @@
<div class="card" v-if="!isApiUser"> <div class="card" v-if="!isApiUser">
<h3>首页视图</h3> <h3>首页视图</h3>
<div class="choose-view"> <div class="choose-view">
<a-row class="view-content" :gutter="24"> <j-row class="view-content" :gutter="24">
<a-col <j-col
:span="6" :span="6"
class="select-item" class="select-item"
:class="{ selected: currentView === 'device' }" :class="{ selected: currentView === 'device' }"
@click="currentView = 'device'" @click="currentView = 'device'"
> >
<img :src="getImage('/home/device.png')" alt="" /> <img :src="getImage('/home/device.png')" alt="" />
</a-col> </j-col>
<a-col <j-col
:span="6" :span="6"
class="select-item" class="select-item"
:class="{ selected: currentView === 'ops' }" :class="{ selected: currentView === 'ops' }"
@click="currentView = 'ops'" @click="currentView = 'ops'"
> >
<img :src="getImage('/home/ops.png')" alt="" /> <img :src="getImage('/home/ops.png')" alt="" />
</a-col> </j-col>
<a-col <j-col
:span="6" :span="6"
class="select-item" class="select-item"
:class="{ :class="{
@ -194,10 +194,10 @@
:src="getImage('/home/comprehensive.png')" :src="getImage('/home/comprehensive.png')"
alt="" alt=""
/> />
</a-col> </j-col>
</a-row> </j-row>
<a-button type="primary" class="btn" @click="confirm" <j-button type="primary" class="btn" @click="confirm"
>确定</a-button >确定</j-button
> >
</div> </div>
</div> </div>
@ -205,7 +205,7 @@
<EditInfoDialog <EditInfoDialog
v-if="editInfoVisible" v-if="editInfoVisible"
v-model:visible="editInfoVisible" v-model:visible="editInfoVisible"
:data="userInfo" :data="{...userInfo}"
@ok="getUserInfo" @ok="getUserInfo"
/> />
<EditPasswordDialog <EditPasswordDialog

54
src/views/account/NotificationRecord/components/ViewDialog.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<a-modal <j-modal
visible visible
title="详情" title="详情"
width="1000px" width="1000px"
@ -7,48 +7,48 @@
@cancel="emits('update:visible', false)" @cancel="emits('update:visible', false)"
class="view-dialog-container" class="view-dialog-container"
> >
<a-row v-if="data?.targetType === 'device'"> <j-row v-if="data?.targetType === 'device'">
<a-col :span="4" class="label">告警设备</a-col> <j-col :span="4" class="label">告警设备</j-col>
<a-col :span="8" class="value"> <j-col :span="8" class="value">
{{ data?.targetName || '' }} {{ data?.targetName || '' }}
</a-col> </j-col>
<a-col :span="4" class="label">设备ID</a-col> <j-col :span="4" class="label">设备ID</j-col>
<a-col :span="8" class="value"> <j-col :span="8" class="value">
{{ data?.targetId || '' }} {{ data?.targetId || '' }}
</a-col> </j-col>
</a-row> </j-row>
<a-row> <j-row>
<a-col :span="4" class="label">告警名称</a-col> <j-col :span="4" class="label">告警名称</j-col>
<a-col :span="8" class="value"> <j-col :span="8" class="value">
{{ data?.alarmName || data?.alarmConfigName || '' }} {{ data?.alarmName || data?.alarmConfigName || '' }}
</a-col> </j-col>
<a-col :span="4" class="label">告警时间</a-col> <j-col :span="4" class="label">告警时间</j-col>
<a-col :span="8" class="value"> <j-col :span="8" class="value">
{{ moment(data?.alarmTime).format('YYYY-MM-DD HH:mm:ss') }} {{ moment(data?.alarmTime).format('YYYY-MM-DD HH:mm:ss') }}
</a-col> </j-col>
<a-col :span="4" class="label">告警级别</a-col> <j-col :span="4" class="label">告警级别</j-col>
<a-col :span="8" class="value"> <j-col :span="8" class="value">
{{ (levelList.length > 0 && getLevelLabel(data.level)) || '' }} {{ (levelList.length > 0 && getLevelLabel(data.level)) || '' }}
</a-col> </j-col>
<a-col :span="4" class="label">告警说明</a-col> <j-col :span="4" class="label">告警说明</j-col>
<a-col :span="8" class="value">{{ data?.description || '' }}</a-col> <j-col :span="8" class="value">{{ data?.description || '' }}</j-col>
<a-col <j-col
:span="4" :span="4"
class="label" class="label"
style="display: flex; height: 440px; align-items: center" style="display: flex; height: 440px; align-items: center"
>告警流水</a-col >告警流水</j-col
> >
<a-col <j-col
:span="20" :span="20"
class="value" class="value"
style="max-height: 440px; overflow: auto" style="max-height: 440px; overflow: auto"
> >
<JsonViewer :value="JSON.parse(data?.alarmInfo || '{}')" /> <JsonViewer :value="JSON.parse(data?.alarmInfo || '{}')" />
</a-col> </j-col>
</a-row> </j-row>
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

8
src/views/account/NotificationRecord/index.vue
View File

@ -35,7 +35,7 @@
></BadgeStatus> ></BadgeStatus>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <j-space :size="16">
<PermissionButton <PermissionButton
type="link" type="link"
:popConfirm="{ :popConfirm="{
@ -52,7 +52,7 @@
? '标为未读' ? '标为未读'
: '标为已读', : '标为已读',
}" }"
> >1
<AIcon type="ReadIconOutlined" /> <AIcon type="ReadIconOutlined" />
</PermissionButton> </PermissionButton>
<PermissionButton <PermissionButton
@ -64,7 +64,7 @@
> >
<AIcon type="SearchOutlined" /> <AIcon type="SearchOutlined" />
</PermissionButton> </PermissionButton>
</a-space> </j-space>
</template> </template>
</j-pro-table> </j-pro-table>
@ -89,7 +89,6 @@ import { optionItem } from '@/views/rule-engine/Scene/typings';
import { dictItemType } from '@/views/system/DataSource/typing'; import { dictItemType } from '@/views/system/DataSource/typing';
import moment from 'moment'; import moment from 'moment';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import NoticeCp from '@/components/Layout/components/Notice.vue';
import { useUserInfo } from '@/store/userInfo'; import { useUserInfo } from '@/store/userInfo';
const { updateAlarm } = useUserInfo(); const { updateAlarm } = useUserInfo();
@ -159,6 +158,7 @@ const columns = [
key: 'action', key: 'action',
ellipsis: true, ellipsis: true,
scopedSlots: true, scopedSlots: true,
width:'200px'
}, },
]; ];
const query = { const query = {

46
src/views/account/NotificationSubscription/components/EditDialog.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<a-modal <j-modal
visible visible
:title="props.data.id ? '编辑' : '新增'" :title="props.data.id ? '编辑' : '新增'"
width="865px" width="865px"
@ok="confirm" @ok="confirm"
@cancel="emits('update:visible', false)" @cancel="emits('update:visible', false)"
> >
<a-form :model="form" layout="vertical" ref="formRef"> <j-form :model="form" layout="vertical" ref="formRef">
<a-form-item <j-form-item
label="名称" label="名称"
name="subscribeName" name="subscribeName"
:rules="[ :rules="[
@ -18,48 +18,48 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="form.subscribeName" v-model:value="form.subscribeName"
placeholder="请输入名称" placeholder="请输入名称"
/> />
</a-form-item> </j-form-item>
<a-row :gutter="24"> <j-row :gutter="24">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="类型" label="类型"
name="topicProvider" name="topicProvider"
:rules="[{ required: true, message: '请选择类型' }]" :rules="[{ required: true, message: '请选择类型' }]"
> >
<a-select <j-select
v-model:value="form.topicProvider" v-model:value="form.topicProvider"
placeholder="请选择类型" placeholder="请选择类型"
:options="typeList" :options="typeList"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
label="告警规则" label="告警规则"
:name="['topicConfig', 'alarmConfigId']" :name="['topicConfig', 'alarmConfigId']"
:rules="[{ required: true, message: '请选择告警规则' }]" :rules="[{ required: true, message: '请选择告警规则' }]"
> >
<a-select <j-select
:value="form.topicConfig.alarmConfigId?.split(',')" :value="form.topicConfig.alarmConfigId?.split(',')"
:options="alarmList" :options="alarmList"
placeholder="请选择告警规则" placeholder="请选择告警规则"
mode="multiple" mode="multiple"
@change="onSelect" @change="onSelect"
></a-select> ></j-select>
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-form-item <j-form-item
name="notice" name="notice"
label="通知方式" label="通知方式"
:rules="[{ required: true, message: '请选择通知方式' }]" :rules="[{ required: true, message: '请选择通知方式' }]"
> >
<a-checkbox-group <j-checkbox-group
v-model:value="form.notice" v-model:value="form.notice"
name="checkboxgroup" name="checkboxgroup"
:options="[ :options="[
@ -69,9 +69,9 @@
}, },
]" ]"
/> />
</a-form-item> </j-form-item>
</a-form> </j-form>
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

5
src/views/account/NotificationSubscription/index.vue
View File

@ -33,7 +33,7 @@
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <j-space :size="16">
<PermissionButton <PermissionButton
type="link" type="link"
:tooltip="{ :tooltip="{
@ -85,7 +85,7 @@
> >
<AIcon type="DeleteOutlined" /> <AIcon type="DeleteOutlined" />
</PermissionButton> </PermissionButton>
</a-space> </j-space>
</template> </template>
</j-pro-table> </j-pro-table>
@ -147,6 +147,7 @@ const columns = [
key: 'action', key: 'action',
ellipsis: true, ellipsis: true,
scopedSlots: true, scopedSlots: true,
width: '200px'
}, },
]; ];
const query = { const query = {

157
src/views/system/Department/components/AddDeviceOrProductDialog.vue
View File

@ -3,12 +3,10 @@
class="add-device-or-product-dialog-container" class="add-device-or-product-dialog-container"
title="绑定" title="绑定"
width="1440px" width="1440px"
@ok="dialog.handleOk" @ok="confirm"
:confirmLoading="dialog.loading.value" :confirmLoading="loading"
cancelText="取消" @cancel="emits('update:visible', false)"
okText="确定" visible
v-model:visible="dialog.visible.value"
destroyOnClose
> >
<h5 class="row"> <h5 class="row">
<exclamation-circle-outlined style="margin-right: 6px" /> <exclamation-circle-outlined style="margin-right: 6px" />
@ -110,52 +108,47 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { getImage } from '@/utils/comm'; import { getImage } from '@/utils/comm';
import { uniq, intersection } from 'lodash-es'; import { uniq, intersection } from 'lodash-es';
import { import {
getDeviceOrProductList_api,getDeviceList_api, getDeviceOrProductList_api,
getDeviceList_api,
getPermission_api, getPermission_api,
bindDeviceOrProductList_api, bindDeviceOrProductList_api,
} from '@/api/system/department'; } from '@/api/system/department';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { dictType } from '../typing'; import { dictType } from '../typing';
const emits = defineEmits(['confirm']); const emits = defineEmits(['confirm', 'update:visible']);
const props = defineProps<{ const props = defineProps<{
visible: boolean;
queryColumns: any[]; queryColumns: any[];
parentId: string; parentId: string;
allPermission: dictType; allPermission: dictType;
assetType: 'product' | 'device'; assetType: 'product' | 'device';
}>(); }>();
// 弹窗相关 // 弹窗相关
const dialog = { const loading = ref(false);
visible: ref<boolean>(false), const confirm = () => {
loading: ref<boolean>(false), if (table.selectedRows.length < 1) {
handleOk: () => { return message.warning('请先勾选数据');
if (table.selectedRows.length < 1) { }
return message.warning('请先勾选数据');
}
const params = table.selectedRows.map((item: any) => ({ const params = table.selectedRows.map((item: any) => ({
targetType: 'org', targetType: 'org',
targetId: props.parentId, targetId: props.parentId,
assetType: props.assetType, assetType: props.assetType,
assetIdList: [item.id], assetIdList: [item.id],
permission: item.selectPermissions, permission: item.selectPermissions,
})); }));
dialog.loading.value = true; loading.value = true;
bindDeviceOrProductList_api(props.assetType, params) bindDeviceOrProductList_api(props.assetType, params)
.then(() => { .then(() => {
message.success('操作成功'); message.success('操作成功');
emits('confirm'); emits('confirm');
dialog.changeVisible(); emits('update:visible', false);
}) })
.finally(() => { .finally(() => {
dialog.loading.value = false; loading.value = false;
}); });
},
// 控制弹窗的打开与关闭
changeVisible: () => {
dialog.visible.value = !dialog.visible.value;
},
}; };
const bulkBool = ref<boolean>(true); const bulkBool = ref<boolean>(true);
@ -308,7 +301,10 @@ const table: any = {
// 获取并整理数据 // 获取并整理数据
getData: (params: object, parentId: string) => getData: (params: object, parentId: string) =>
new Promise((resolve) => { new Promise((resolve) => {
const api = props.assetType === 'product' ? getDeviceOrProductList_api: getDeviceList_api; const api =
props.assetType === 'product'
? getDeviceOrProductList_api
: getDeviceList_api;
api(params).then((resp: any) => { api(params).then((resp: any) => {
type resultType = { type resultType = {
data: any[]; data: any[];
@ -319,43 +315,55 @@ const table: any = {
const { pageIndex, pageSize, total, data } = const { pageIndex, pageSize, total, data } =
resp.result as resultType; resp.result as resultType;
const ids = data.map((item) => item.id); const ids = data.map((item) => item.id);
getPermission_api(props.assetType,ids, parentId).then((perResp: any) => { getPermission_api(props.assetType, ids, parentId).then(
const permissionObj = {}; (perResp: any) => {
perResp.result.forEach((item: any) => { const permissionObj = {};
permissionObj[item.assetId] = props.allPermission perResp.result.forEach((item: any) => {
.filter((permission) => permissionObj[item.assetId] = props.allPermission
item.allPermissions.includes(permission.id), .filter((permission) =>
) item.allPermissions.includes(permission.id),
.map((item) => ({ )
label: item.name, .map((item) => ({
value: item.id, label: item.name,
disabled: true, value: item.id,
})); disabled: true,
}); }));
data.forEach((item) => { });
item.permissionList = permissionObj[item.id]; data.forEach((item) => {
item.selectPermissions = ['read']; item.permissionList = permissionObj[item.id];
item.selectPermissions = ['read'];
// 产品的状态进行转换处理 // 产品的状态进行转换处理
if(props.assetType === 'product') { if (props.assetType === 'product') {
item.state = { item.state = {
value: item.state === 1 ? 'online': item.state === 0 ? 'offline': '', value:
text: item.state === 1 ? '正常': item.state === 0 ? '禁用': '' item.state === 1
? 'online'
: item.state === 0
? 'offline'
: '',
text:
item.state === 1
? '正常'
: item.state === 0
? '禁用'
: '',
};
} }
} });
});
resolve({ resolve({
code: 200, code: 200,
result: { result: {
data: data, data: data,
pageIndex, pageIndex,
pageSize, pageSize,
total, total,
}, },
status: 200, status: 200,
}); });
}); },
);
}); });
}), }),
// 整理参数并获取数据 // 整理参数并获取数据
@ -412,11 +420,6 @@ const table: any = {
}, },
}; };
table.init(); table.init();
// 将打开弹窗的操作暴露给父组件
defineExpose({
openDialog: dialog.changeVisible,
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

112
src/views/system/Department/components/EditDepartmentDialog.vue
View File

@ -1,16 +1,17 @@
<template> <template>
<a-modal <j-modal
v-model:visible="dialog.visible" visible
:title="dialog.title" :title="title"
width="520px" width="520px"
@ok="dialog.handleOk" @cancel="emits('update:visible',false)"
@ok="confirm"
class="edit-dialog-container" class="edit-dialog-container"
cancelText="取消" cancelText="取消"
okText="确定" okText="确定"
:confirmLoading="form.loading" :confirmLoading="loading"
> >
<a-form ref="formRef" :model="form.data" layout="vertical"> <j-form ref="formRef" :model="form.data" layout="vertical">
<a-form-item name="parentId" label="上级组织"> <j-form-item name="parentId" label="上级组织">
<a-tree-select <a-tree-select
v-model:value="form.data.parentId" v-model:value="form.data.parentId"
style="width: 100%" style="width: 100%"
@ -20,8 +21,8 @@
> >
<template #title="{ name }"> {{ name }} </template> <template #title="{ name }"> {{ name }} </template>
</a-tree-select> </a-tree-select>
</a-form-item> </j-form-item>
<a-form-item <j-form-item
name="name" name="name"
label="名称" label="名称"
:rules="[ :rules="[
@ -29,82 +30,85 @@
{ max: 64, message: '最多可输入64个字符' }, { max: 64, message: '最多可输入64个字符' },
]" ]"
> >
<a-input <j-input
v-model:value="form.data.name" v-model:value="form.data.name"
placeholder="请输入名称" placeholder="请输入名称"
/> />
</a-form-item> </j-form-item>
<a-form-item <j-form-item
name="sortIndex" name="sortIndex"
label="排序" label="排序"
:rules="[{ required: true, message: '请输入排序' }]" :rules="[{ required: true, message: '请输入排序' }]"
> >
<a-input <j-input
v-model:value="form.data.sortIndex" v-model:value="form.data.sortIndex"
placeholder="请输入排序" placeholder="请输入排序"
:maxlength="64" :maxlength="64"
@blur="form.checkSort" @blur="form.checkSort"
/> />
</a-form-item> </j-form-item>
</a-form> </j-form>
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { FormInstance } from 'ant-design-vue'; import { FormInstance } from 'ant-design-vue';
import {cloneDeep} from 'lodash-es' import { cloneDeep } from 'lodash-es';
import { import {
addDepartment_api, addDepartment_api,
updateDepartment_api, updateDepartment_api,
} from '@/api/system/department'; } from '@/api/system/department';
const emits = defineEmits(['refresh']); const emits = defineEmits(['refresh', 'update:visible']);
const props = defineProps<{ const props = defineProps<{
treeData: any[]; treeData: any[];
data: any;
visible: boolean;
}>(); }>();
// 弹窗相关 // 弹窗相关
const dialog = reactive({ const title = ref('');
title: '', const loading = ref(false);
visible: false, const confirm = () => {
handleOk: () => { loading.value = true;
formRef.value?.validate().then(() => { formRef.value
form.submit(); ?.validate()
}); .then(() => form.submit())
}, .then((resp: any) => {
// 控制弹窗的打开与关闭 emits('refresh', resp.result.id);
changeVisible: (status: boolean, row: any = {}) => { emits('update:visible', false);
if (row.id) { })
dialog.title = '编辑'; .finally(() => (loading.value = false));
form.data = cloneDeep(row); };
} else if (row.parentId) { // 表单相关
dialog.title = '新增子组织'; const formRef = ref<FormInstance>();
const form = reactive({
data: {} as formType,
beforeSortIndex: '' as string | number,
init: () => {
if (props.data.id) {
title.value = '编辑';
form.data = cloneDeep(props.data);
} else if (props.data.parentId) {
title.value = '新增子组织';
form.data = { form.data = {
name: '', name: '',
sortIndex: ((row.children && row.children.length) || 0) + 1, sortIndex: props.data.sortIndex,
parentId: row.parentId, parentId: props.data.parentId,
}; };
} else { } else {
dialog.title = '新增'; title.value = '新增';
form.data = { form.data = {
name: '', name: '',
sortIndex: props.treeData.length + 1, sortIndex: props.data.sortIndex,
}; };
} }
form.beforeSortIndex = form.data.sortIndex; form.beforeSortIndex = form.data.sortIndex;
dialog.visible = status;
nextTick(() => { nextTick(() => {
formRef.value?.clearValidate(); formRef.value?.clearValidate();
}); });
}, },
});
// 表单相关
const formRef = ref<FormInstance>();
const form = reactive({
loading: false,
data: {} as formType,
beforeSortIndex: '' as string | number,
checkSort: (e: any) => { checkSort: (e: any) => {
const value = e.target.value.match(/^[0-9]*/)[0]; const value = e.target.value.match(/^[0-9]*/)[0];
if (value) { if (value) {
@ -114,16 +118,11 @@ const form = reactive({
}, },
submit: () => { submit: () => {
form.loading = true;
const api = form.data.id ? updateDepartment_api : addDepartment_api; const api = form.data.id ? updateDepartment_api : addDepartment_api;
api(form.data) return api(form.data);
.then((resp:any) => {
emits('refresh',resp.result.id);
dialog.changeVisible(false);
})
.finally(() => (form.loading = false));
}, },
}); });
form.init();
type formType = { type formType = {
id?: string; id?: string;
@ -131,11 +130,4 @@ type formType = {
name: string; name: string;
sortIndex: string | number; sortIndex: string | number;
}; };
// 将打开弹窗的操作暴露给父组件
defineExpose({
openDialog: dialog.changeVisible,
});
</script> </script>
<style scoped></style>

64
src/views/system/Department/components/EditPermissionDialog.vue
View File

@ -1,22 +1,21 @@
<template> <template>
<a-modal <j-modal
class="edit-permission-dialog-container" class="edit-permission-dialog-container"
title="编辑" title="编辑"
width="500px" width="500px"
@ok="dialog.handleOk" @ok="confirm"
:confirmLoading="dialog.loading.value" :confirmLoading="loading"
cancelText="取消" visible
okText="确定" @cancel="emits('update:visible', false)"
v-model:visible="dialog.visible.value"
> >
<div> <div>
<span>资产权限：</span> <span>资产权限：</span>
<a-checkbox-group <j-checkbox-group
v-model:value="form.permission" v-model:value="form.permission"
:options="options" :options="options"
/> />
</div> </div>
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -24,43 +23,35 @@ import type { dictType, optionsType } from '../typing';
import { updatePermission_api } from '@/api/system/department'; import { updatePermission_api } from '@/api/system/department';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
const emits = defineEmits(['confirm']); const emits = defineEmits(['confirm', 'update:visible']);
const props = defineProps<{ const props = defineProps<{
visible: boolean;
ids: string[];
permissionList: string[];
parentId: string; parentId: string;
allPermission: dictType; allPermission: dictType;
assetType: 'product' | 'device'; assetType: 'product' | 'device';
}>(); }>();
// 弹窗相关 // 弹窗相关
const dialog = { const loading = ref(false);
loading: ref<boolean>(false), const confirm = () => {
visible: ref<boolean>(false), loading.value = true;
handleOk: () => { updatePermission_api(props.assetType, props.parentId, form)
dialog.loading.value = true; .then(() => {
updatePermission_api(props.assetType, props.parentId, form) message.success('操作成功');
.then(() => { emits('confirm');
message.success('操作成功'); emits('update:visible', false);
emits('confirm'); })
dialog.visible.value = false; .finally(() => (loading.value = false));
})
.finally(() => (dialog.loading.value = false));
},
// 控制弹窗的打开与关闭
changeVisible: (ids: string[], permissionList: string[]) => {
form.permission = [...permissionList];
form.assetIdList = ids;
options.value = setOptions(permissionList);
dialog.visible.value = !dialog.visible.value;
},
}; };
const form = reactive({ const form = reactive({
assetIdList: [] as string[], assetIdList: [...props.ids],
permission: [] as string[], permission: [...props.permissionList],
}); });
const options = ref<optionsType>([]); const options = computed(() => {
const setOptions = (havePermission: string[]): optionsType => {
const result: optionsType = []; const result: optionsType = [];
props.allPermission.forEach((item) => { props.allPermission.forEach((item) => {
if (havePermission.includes(item.id)) if (props.permissionList.includes(item.id))
result.push({ result.push({
label: item.name, label: item.name,
value: item.id, value: item.id,
@ -68,11 +59,6 @@ const setOptions = (havePermission: string[]): optionsType => {
}); });
}); });
return result; return result;
};
// 将打开弹窗的操作暴露给父组件
defineExpose({
openDialog: dialog.changeVisible,
}); });
</script> </script>

66
src/views/system/Department/components/LeftTree.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="left-tree-container"> <div class="left-tree-container">
<a-input <j-input
v-model:value="searchValue" v-model:value="searchValue"
@change="search" @change="search"
placeholder="请输入组织名称" placeholder="请输入组织名称"
@ -9,7 +9,7 @@
<template #suffix> <template #suffix>
<search-outlined /> <search-outlined />
</template> </template>
</a-input> </j-input>
<div class="add-btn"> <div class="add-btn">
<PermissionButton <PermissionButton
type="primary" type="primary"
@ -30,47 +30,11 @@
<template #title="{ name, data }"> <template #title="{ name, data }">
<span>{{ name }}</span> <span>{{ name }}</span>
<span class="func-btns" @click="(e) => e.stopPropagation()"> <span class="func-btns" @click="(e) => e.stopPropagation()">
<!-- <a-tooltip>
<template #title>编辑</template>
<a-button style="padding: 0" type="link">
<edit-outlined @click="openDialog(data)" />
</a-button>
</a-tooltip> -->
<!-- <a-tooltip>
<template #title>新增子组织</template>
<a-button style="padding: 0" type="link">
<plus-circle-outlined
style="margin: 0 8px"
@click="
openDialog({
...data,
id: '',
parentId: data.id,
})
"
/>
</a-button>
</a-tooltip> -->
<!-- <a-popconfirm
title="确认删除"
ok-text="确定"
cancel-text="取消"
@confirm="delDepartment(data.id)"
>
<a-tooltip>
<template #title>删除</template>
<a-button style="padding: 0" type="link">
<delete-outlined />
</a-button>
</a-tooltip>
</a-popconfirm> -->
<PermissionButton <PermissionButton
:uhasPermission="`${permission}:update`" :uhasPermission="`${permission}:update`"
type="link" type="link"
:tooltip="{ :tooltip="{
title: '新增子组织', title: '编辑',
}" }"
@click="openDialog(data)" @click="openDialog(data)"
> >
@ -109,8 +73,10 @@
<!-- 编辑弹窗 --> <!-- 编辑弹窗 -->
<EditDepartmentDialog <EditDepartmentDialog
v-if="dialog.visible"
v-model:visible="dialog.visible"
:tree-data="sourceTree" :tree-data="sourceTree"
ref="editDialogRef" :data="dialog.selectItem"
@refresh="refresh" @refresh="refresh"
/> />
</div> </div>
@ -215,9 +181,24 @@ function refresh(id: string) {
} }
// 弹窗 // 弹窗
const editDialogRef = ref(); // 新增弹窗实例 const dialog = reactive({
visible: false,
selectItem: {},
});
const openDialog = (row: any = {}) => { const openDialog = (row: any = {}) => {
editDialogRef.value.openDialog(true, row); // 计算默认排序值，为子列表中最大的排序值+1
let sortIndex = row.sortIndex || 1;
if (!row.id) {
let childrens = [] as any[];
if (row.parentId) {
childrens = row.children;
} else childrens = treeData.value;
sortIndex =
Math.max(...(childrens?.map((item) => item.sortIndex) || [0])) + 1;
}
dialog.selectItem = { ...row, sortIndex };
dialog.visible = true;
}; };
init(); init();
function init() { function init() {
@ -236,6 +217,7 @@ function init() {
<style lang="less" scoped> <style lang="less" scoped>
.left-tree-container { .left-tree-container {
padding-right: 24px; padding-right: 24px;
border-right: 1px solid #f0f0f0;
.add-btn { .add-btn {
margin: 24px 0; margin: 24px 0;

25
src/views/system/Department/components/NextDialog.vue
View File

@ -1,33 +1,26 @@
<template> <template>
<a-modal <j-modal
v-model:visible="visible" visible
title="绑定" title="绑定"
width="520px" width="520px"
@ok="handleOk" @ok="handleOk"
class="edit-dialog-container" class="edit-dialog-container"
cancelText="取消" @cancel="emits('update:visible',false)"
okText="确定"
> >
是否继续分配产品下的具体设备 是否继续分配产品下的具体设备
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const emits = defineEmits(['confirm']); const emits = defineEmits(['confirm','update:visible']);
const visible = ref<boolean>(false); const props = defineProps<{
visible: boolean;
}>();
const handleOk = () => { const handleOk = () => {
emits('confirm'); emits('confirm');
changeVisible(); emits('update:visible',false)
}; };
// 控制弹窗的打开与关闭
const changeVisible = () => {
visible.value = !visible.value;
};
// 将打开弹窗的操作暴露给父组件
defineExpose({
openDialog: changeVisible,
});
</script> </script>
<style scoped></style> <style scoped></style>

67
src/views/system/Department/device/index.vue
View File

@ -13,7 +13,7 @@
@cancelSelect="table.cancelSelect" @cancelSelect="table.cancelSelect"
> >
<template #headerTitle> <template #headerTitle>
<a-space> <j-space>
<PermissionButton <PermissionButton
:uhasPermission="`${permission}:assert`" :uhasPermission="`${permission}:assert`"
type="primary" type="primary"
@ -21,11 +21,11 @@
> >
<AIcon type="PlusOutlined" />资产分配 <AIcon type="PlusOutlined" />资产分配
</PermissionButton> </PermissionButton>
<a-dropdown trigger="hover"> <j-dropdown trigger="hover">
<a-button>批量操作</a-button> <j-button>批量操作</j-button>
<template #overlay> <template #overlay>
<a-menu> <j-menu>
<a-menu-item> <j-menu-item>
<PermissionButton <PermissionButton
:uhasPermission="`${permission}:bind`" :uhasPermission="`${permission}:bind`"
:popConfirm="{ :popConfirm="{
@ -38,19 +38,19 @@
type="DisconnectOutlined" type="DisconnectOutlined"
/>批量解绑 />批量解绑
</PermissionButton> </PermissionButton>
</a-menu-item> </j-menu-item>
<a-menu-item> <j-menu-item>
<PermissionButton <PermissionButton
:uhasPermission="`${permission}:assert`" :uhasPermission="`${permission}:assert`"
@click="table.clickEdit()" @click="table.clickEdit()"
> >
<AIcon type="EditOutlined" />批量编辑 <AIcon type="EditOutlined" />批量编辑
</PermissionButton> </PermissionButton>
</a-menu-item> </j-menu-item>
</a-menu> </j-menu>
</template> </template>
</a-dropdown> </j-dropdown>
</a-space> </j-space>
</template> </template>
<template #card="slotProps"> <template #card="slotProps">
@ -82,8 +82,8 @@
<h3 class="card-item-content-title"> <h3 class="card-item-content-title">
{{ slotProps.name }} {{ slotProps.name }}
</h3> </h3>
<a-row> <j-row>
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text">ID</div> <div class="card-item-content-text">ID</div>
<div <div
style="cursor: pointer" style="cursor: pointer"
@ -91,8 +91,8 @@
> >
{{ slotProps.id }} {{ slotProps.id }}
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
资产权限 资产权限
</div> </div>
@ -107,8 +107,8 @@
) )
}} }}
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</template> </template>
<template #actions> <template #actions>
<PermissionButton <PermissionButton
@ -134,7 +134,8 @@
<div class="dialogs"> <div class="dialogs">
<AddDeviceOrProductDialog <AddDeviceOrProductDialog
ref="addDialogRef" v-if="dialogs.addShow"
v-model:visible="dialogs.addShow"
:query-columns="query.columns" :query-columns="query.columns"
:parent-id="props.parentId" :parent-id="props.parentId"
:all-permission="table.permissionList.value" :all-permission="table.permissionList.value"
@ -142,7 +143,10 @@
@confirm="table.refresh" @confirm="table.refresh"
/> />
<EditPermissionDialog <EditPermissionDialog
ref="editDialogRef" v-if="dialogs.editShow"
v-model:visible="dialogs.editShow"
:ids="dialogs.selectIds"
:permission-list="dialogs.permissList"
:parent-id="props.parentId" :parent-id="props.parentId"
:all-permission="table.permissionList.value" :all-permission="table.permissionList.value"
asset-type="device" asset-type="device"
@ -398,25 +402,26 @@ const table = {
} }
}, },
clickAdd: () => { clickAdd: () => {
addDialogRef.value && addDialogRef.value.openDialog(); dialogs.addShow = true;
}, },
clickEdit: (row?: any) => { clickEdit: (row?: any) => {
const ids = row ? [row.id] : [...table._selectedRowKeys.value]; const ids = row ? [row.id] : [...table._selectedRowKeys.value];
if (row || table.selectedRows.length === 1) { if (row || table.selectedRows.length === 1) {
const permissionList = const permissionList =
row?.permission || table.selectedRows[0].permission; row?.permission || table.selectedRows[0].permission;
return ( dialogs.selectIds = ids;
editDialogRef.value && dialogs.permissList = permissionList;
editDialogRef.value.openDialog(ids, permissionList) dialogs.editShow = true;
); return;
} else if (table.selectedRows.length === 0) return; } else if (table.selectedRows.length === 0) return;
const permissionList = table.selectedRows.map( const permissionList = table.selectedRows.map(
(item) => item.permission, (item) => item.permission,
); );
const mixPermissionList = intersection(...permissionList); const mixPermissionList = intersection(...permissionList) as string[];
editDialogRef.value && dialogs.selectIds = ids;
editDialogRef.value.openDialog(ids, mixPermissionList); dialogs.permissList = mixPermissionList;
dialogs.editShow = true;
}, },
clickUnBind: (row?: any) => { clickUnBind: (row?: any) => {
const ids = row ? [row.id] : [...table._selectedRowKeys.value]; const ids = row ? [row.id] : [...table._selectedRowKeys.value];
@ -441,8 +446,12 @@ const table = {
}, },
}; };
const addDialogRef = ref(); const dialogs = reactive({
const editDialogRef = ref(); selectIds: [] as string[],
permissList: [] as string[],
addShow: false,
editShow: false,
});
table.init(); table.init();
nextTick(() => { nextTick(() => {

69
src/views/system/Department/index.vue
View File

@ -1,30 +1,28 @@
<template> <template>
<page-container> <page-container>
<div class="department-container"> <div class="department-container">
<a-card class="department-content"> <div class="left">
<div class="left"> <LeftTree @change="(id) => (departmentId = id)" />
<LeftTree @change="(id) => (departmentId = id)" /> </div>
</div> <div class="right">
<div class="right"> <j-tabs v-model:activeKey="activeKey">
<a-tabs v-model:activeKey="activeKey"> <j-tab-pane key="product" tab="产品">
<a-tab-pane key="product" tab="产品"> <Product
<Product :parentId="departmentId"
:parentId="departmentId" @open-device-bind="openDeviceBind"
@open-device-bind="openDeviceBind" />
/> </j-tab-pane>
</a-tab-pane> <j-tab-pane key="device" tab="设备">
<a-tab-pane key="device" tab="设备"> <Device
<Device :parentId="departmentId"
:parentId="departmentId" v-model:bindBool="bindBool"
v-model:bindBool="bindBool" />
/> </j-tab-pane>
</a-tab-pane> <j-tab-pane key="user" tab="用户">
<a-tab-pane key="user" tab="用户"> <User :parentId="departmentId" />
<User :parentId="departmentId" /> </j-tab-pane>
</a-tab-pane> </j-tabs>
</a-tabs> </div>
</div>
</a-card>
</div> </div>
</page-container> </page-container>
</template> </template>
@ -48,20 +46,17 @@ const openDeviceBind = () => {
<style lang="less" scoped> <style lang="less" scoped>
.department-container { .department-container {
.department-content { display: flex;
:deep(.ant-card-body) { background-color: #fff;
display: flex; padding: 24px;
.left { .left {
flex-basis: 300px; flex-basis: 300px;
} }
.right { .right {
width: calc(100% - 300px); width: calc(100% - 300px);
:deep(.ant-tabs-nav-wrap) {
.ant-tabs-nav-wrap { padding-left: 24px;
padding-left: 24px;
}
}
} }
} }
} }

83
src/views/system/Department/product/index.vue
View File

@ -13,7 +13,7 @@
@cancelSelect="table.cancelSelect" @cancelSelect="table.cancelSelect"
> >
<template #headerTitle> <template #headerTitle>
<a-space> <j-space>
<PermissionButton <PermissionButton
:uhasPermission="`${permission}:assert`" :uhasPermission="`${permission}:assert`"
type="primary" type="primary"
@ -21,11 +21,11 @@
> >
<AIcon type="PlusOutlined" />资产分配 <AIcon type="PlusOutlined" />资产分配
</PermissionButton> </PermissionButton>
<a-dropdown trigger="hover"> <j-dropdown trigger="hover">
<a-button>批量操作</a-button> <j-button>批量操作</j-button>
<template #overlay> <template #overlay>
<a-menu> <j-menu>
<a-menu-item> <j-menu-item>
<PermissionButton <PermissionButton
:uhasPermission="`${permission}:bind`" :uhasPermission="`${permission}:bind`"
:popConfirm="{ :popConfirm="{
@ -38,19 +38,19 @@
type="DisconnectOutlined" type="DisconnectOutlined"
/>批量解绑 />批量解绑
</PermissionButton> </PermissionButton>
</a-menu-item> </j-menu-item>
<a-menu-item> <j-menu-item>
<PermissionButton <PermissionButton
:uhasPermission="`${permission}:assert`" :uhasPermission="`${permission}:assert`"
@click="()=>table.clickEdit()" @click="() => table.clickEdit()"
> >
<AIcon type="EditOutlined" />批量编辑 <AIcon type="EditOutlined" />批量编辑
</PermissionButton> </PermissionButton>
</a-menu-item> </j-menu-item>
</a-menu> </j-menu>
</template> </template>
</a-dropdown> </j-dropdown>
</a-space> </j-space>
</template> </template>
<template #card="slotProps"> <template #card="slotProps">
@ -82,8 +82,8 @@
<h3 class="card-item-content-title"> <h3 class="card-item-content-title">
{{ slotProps.name }} {{ slotProps.name }}
</h3> </h3>
<a-row> <j-row>
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text">ID</div> <div class="card-item-content-text">ID</div>
<div <div
style="cursor: pointer" style="cursor: pointer"
@ -91,8 +91,8 @@
> >
{{ slotProps.id }} {{ slotProps.id }}
</div> </div>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<div class="card-item-content-text"> <div class="card-item-content-text">
资产权限 资产权限
</div> </div>
@ -107,8 +107,8 @@
) )
}} }}
</div> </div>
</a-col> </j-col>
</a-row> </j-row>
</template> </template>
<template #actions> <template #actions>
<PermissionButton <PermissionButton
@ -134,7 +134,8 @@
<div class="dialogs"> <div class="dialogs">
<AddDeviceOrProductDialog <AddDeviceOrProductDialog
ref="addDialogRef" v-if="dialogs.addShow"
v-model:visible="dialogs.addShow"
:query-columns="query.columns" :query-columns="query.columns"
:parent-id="props.parentId" :parent-id="props.parentId"
:all-permission="table.permissionList.value" :all-permission="table.permissionList.value"
@ -142,14 +143,18 @@
@confirm="table.addConfirm" @confirm="table.addConfirm"
/> />
<EditPermissionDialog <EditPermissionDialog
ref="editDialogRef" v-if="dialogs.editShow"
v-model:visible="dialogs.editShow"
:ids="dialogs.selectIds"
:permission-list="dialogs.permissList"
:parent-id="props.parentId" :parent-id="props.parentId"
:all-permission="table.permissionList.value" :all-permission="table.permissionList.value"
asset-type="product" asset-type="product"
@confirm="table.refresh" @confirm="table.refresh"
/> />
<NextDialog <NextDialog
ref="nextDialogRef" v-if="dialogs.nextShow"
v-model:visible="dialogs.nextShow"
@confirm="emits('openDeviceBind')" @confirm="emits('openDeviceBind')"
/> />
</div> </div>
@ -171,7 +176,7 @@ import {
} from '@/api/system/department'; } from '@/api/system/department';
import { intersection } from 'lodash-es'; import { intersection } from 'lodash-es';
import { dictType } from '../typing.d.ts'; import type { dictType } from '../typing.d.ts';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
const permission = 'system/Department'; const permission = 'system/Department';
@ -256,7 +261,7 @@ const table = {
const permissionList = table.permissionList.value; const permissionList = table.permissionList.value;
if (permissionList.length < 1 || values.length < 1) return ''; if (permissionList.length < 1 || values.length < 1) return '';
const result = values.map( const result = values.map(
(key) => permissionList.find((item) => item.id === key)?.name, (key) => permissionList.find((item:any) => item.id === key)?.name,
); );
return result.join(','); return result.join(',');
}, },
@ -375,9 +380,7 @@ const table = {
} }
}, },
clickAdd: () => { clickAdd: () => {
console.log(222) dialogs.addShow = true;
console.log(addDialogRef.value)
addDialogRef.value && addDialogRef.value.openDialog();
}, },
clickEdit: (row?: any) => { clickEdit: (row?: any) => {
const ids = row ? [row.id] : [...table._selectedRowKeys.value]; const ids = row ? [row.id] : [...table._selectedRowKeys.value];
@ -385,18 +388,19 @@ const table = {
if (row || table.selectedRows.length === 1) { if (row || table.selectedRows.length === 1) {
const permissionList = const permissionList =
row?.permission || table.selectedRows[0].permission; row?.permission || table.selectedRows[0].permission;
return ( dialogs.selectIds = ids;
editDialogRef.value && dialogs.permissList = permissionList;
editDialogRef.value.openDialog(ids, permissionList) dialogs.editShow = true;
); return;
} else if (table.selectedRows.length === 0) return; } else if (table.selectedRows.length === 0) return;
const permissionList = table.selectedRows.map( const permissionList = table.selectedRows.map(
(item) => item.permission, (item) => item.permission,
); );
const mixPermissionList = intersection(...permissionList); const mixPermissionList = intersection(...permissionList) as string[];
editDialogRef.value && dialogs.selectIds = ids;
editDialogRef.value.openDialog(ids, mixPermissionList); dialogs.permissList = mixPermissionList;
dialogs.editShow = true;
}, },
clickUnBind: (row?: any) => { clickUnBind: (row?: any) => {
const ids = row ? [row.id] : [...table._selectedRowKeys.value]; const ids = row ? [row.id] : [...table._selectedRowKeys.value];
@ -421,14 +425,19 @@ const table = {
}, },
addConfirm: () => { addConfirm: () => {
table.refresh(); table.refresh();
nextDialogRef.value && nextDialogRef.value.openDialog(); dialogs.nextShow = true;
}, },
}; };
const addDialogRef = ref();
const editDialogRef = ref();
const nextDialogRef = ref();
table.init(); table.init();
const dialogs = reactive({
selectIds: [] as string[],
permissList: [] as string[],
addShow: false,
editShow: false,
nextShow: false,
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

57
src/views/system/Department/user/components/AddBindUserDialog.vue
View File

@ -1,14 +1,13 @@
<template> <template>
<a-modal <j-modal
class="add-bind-user-dialog-container" class="add-bind-user-dialog-container"
title="绑定" title="绑定"
width="1440px" width="1440px"
@ok="dialog.handleOk" visible
centered centered
:confirmLoading="dialog.loading.value" :confirmLoading="loading"
cancelText="取消" @ok="confirm"
okText="确定" @cancel="emits('update:visible', false)"
v-model:visible="dialog.visible.value"
> >
<Search :columns="query.columns" @search="query.search" /> <Search :columns="query.columns" @search="query.search" />
<div class="table"> <div class="table">
@ -28,43 +27,35 @@
}" }"
/> />
</div> </div>
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { bindUser_api, getBindUserList_api } from '@/api/system/department'; import { bindUser_api, getBindUserList_api } from '@/api/system/department';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
const emits = defineEmits(['confirm']); const emits = defineEmits(['confirm', 'update:visible']);
const props = defineProps({ const props = defineProps<{
parentId: String, parentId: string;
}); visible: boolean;
}>();
// 弹窗相关 // 弹窗相关
const dialog = { const loading = ref(false);
loading: ref<boolean>(false), const confirm = () => {
visible: ref<boolean>(false), if (table._selectedRowKeys.length && props.parentId) {
handleOk: () => { loading.value = true;
if (table._selectedRowKeys.length && props.parentId) { bindUser_api(props.parentId, table._selectedRowKeys)
bindUser_api(props.parentId, table._selectedRowKeys).then(() => { .then(() => {
emits('confirm');
message.success('操作成功'); message.success('操作成功');
dialog.changeVisible(); emits('confirm');
}); emits('update:visible', false);
} else { })
dialog.changeVisible(); .finally(() => (loading.value = false));
} } else {
}, emits('update:visible', false);
// 控制弹窗的打开与关闭 }
changeVisible: () => {
if (!dialog.visible.value) query.search({});
dialog.visible.value = !dialog.visible.value;
},
}; };
// 将打开弹窗的操作暴露给父组件
defineExpose({
openDialog: dialog.changeVisible,
});
const query = { const query = {
columns: [ columns: [

156
src/views/system/Department/user/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div> <div>
<Search :columns="query.columns" @search="query.search" /> <Search :columns="columns" @search="(p:any)=>params = p" />
<j-pro-table <j-pro-table
ref="tableRef" ref="tableRef"
:columns="table.columns" :columns="columns"
:request="table.requestFun" :request="table.requestFun"
:params="query.params" :params="params"
:rowSelection="{ :rowSelection="{
selectedRowKeys: table._selectedRowKeys, selectedRowKeys: table._selectedRowKeys,
onChange: table.onSelectChange, onChange: table.onSelectChange,
@ -18,12 +18,14 @@
<PermissionButton <PermissionButton
type="primary" type="primary"
:uhasPermission="`${permission}:bind-user`" :uhasPermission="`${permission}:bind-user`"
@click="table.openDialog" @click="dialogVisible = true"
style="margin-right: 15px;" style="margin-right: 15px"
> >
<AIcon type="PlusOutlined" />绑定用户 <AIcon type="PlusOutlined" />绑定用户
</PermissionButton> </PermissionButton>
<div style="display: inline-block;width: 12px;height: 1px;"></div> <div
style="display: inline-block; width: 12px; height: 1px"
></div>
<PermissionButton <PermissionButton
:uhasPermission="`${permission}:bind`" :uhasPermission="`${permission}:bind`"
:popConfirm="{ :popConfirm="{
@ -34,7 +36,7 @@
<AIcon type="DisconnectOutlined" />批量解绑 <AIcon type="DisconnectOutlined" />批量解绑
</PermissionButton> </PermissionButton>
</template> </template>
<template #status="slotProps"> <template #state="slotProps">
<BadgeStatus <BadgeStatus
:status="slotProps.status" :status="slotProps.status"
:text="slotProps.status ? '正常' : '禁用'" :text="slotProps.status ? '正常' : '禁用'"
@ -45,7 +47,7 @@
></BadgeStatus> ></BadgeStatus>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <j-space :size="16">
<PermissionButton <PermissionButton
type="link" type="link"
:uhasPermission="`${permission}:bind`" :uhasPermission="`${permission}:bind`"
@ -56,13 +58,14 @@
> >
<AIcon type="DisconnectOutlined" /> <AIcon type="DisconnectOutlined" />
</PermissionButton> </PermissionButton>
</a-space> </j-space>
</template> </template>
</j-pro-table> </j-pro-table>
<div class="dialogs"> <div class="dialogs">
<AddBindUserDialog <AddBindUserDialog
ref="addDialogRef" v-if="dialogVisible"
v-model:visible="dialogVisible"
:parent-id="props.parentId" :parent-id="props.parentId"
@confirm="table.refresh" @confirm="table.refresh"
/> />
@ -78,90 +81,67 @@ import { message } from 'ant-design-vue';
const permission = 'system/Department'; const permission = 'system/Department';
const addDialogRef = ref();
const props = defineProps<{ const props = defineProps<{
parentId: string; parentId: string;
}>(); }>();
const query = { const columns = [
columns: [ {
{ title: '姓名',
title: '姓名', dataIndex: 'name',
dataIndex: 'name', key: 'name',
key: 'name', ellipsis: true,
ellipsis: true, fixed: 'left',
fixed: 'left', search: {
search: { type: 'string',
type: 'string',
},
}, },
{
title: '用户名',
dataIndex: 'username',
key: 'username',
ellipsis: true,
fixed: 'left',
search: {
type: 'string',
},
},
{
title: '状态',
dataIndex: 'state',
key: 'state',
ellipsis: true,
fixed: 'left',
search: {
type: 'select',
options: [
{
label: '正常',
value: 1,
},
{
label: '禁用',
value: 0,
},
],
},
},
],
params: ref({}),
search: (params: any) => {
query.params.value = params;
}, },
}; {
title: '用户名',
dataIndex: 'username',
key: 'username',
ellipsis: true,
fixed: 'left',
search: {
type: 'string',
},
},
{
title: '状态',
dataIndex: 'state',
key: 'state',
ellipsis: true,
fixed: 'left',
search: {
type: 'select',
options: [
{
label: '正常',
value: 1,
},
{
label: '禁用',
value: 0,
},
],
},
scopedSlots: true,
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
scopedSlots: true,
width: '200px',
},
];
// 搜索参数
const params = ref({});
// 表格 // 表格
const tableRef = ref<Record<string, any>>({}); // 表格实例 const tableRef = ref<Record<string, any>>({}); // 表格实例
const table = reactive({ const table = reactive({
columns: [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '用户名',
dataIndex: 'username',
key: 'username',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
scopedSlots: true,
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
scopedSlots: true,
},
],
_selectedRowKeys: [] as string[], _selectedRowKeys: [] as string[],
requestFun: async (oParams: any) => { requestFun: async (oParams: any) => {
@ -210,10 +190,6 @@ const table = reactive({
table.refresh(); table.refresh();
}); });
}, },
// 打开编辑弹窗
openDialog: () => {
addDialogRef.value && addDialogRef.value.openDialog();
},
onSelectChange: (keys: string[]) => { onSelectChange: (keys: string[]) => {
table._selectedRowKeys = keys; table._selectedRowKeys = keys;
}, },
@ -225,6 +201,6 @@ const table = reactive({
tableRef.value.reload(); tableRef.value.reload();
}, },
}); });
</script>
<style scoped></style> const dialogVisible = ref(false);
</script>

277
src/views/system/User/components/EditUserDialog.vue
View File

@ -1,18 +1,19 @@
<template> <template>
<a-modal <j-modal
v-model:visible="dialog.visible" visible
:title="dialog.title" :title="dialogTitle"
width="675px" width="675px"
@ok="dialog.handleOk" @ok="confirm"
@cancel="emits('update:visible', false)"
class="edit-dialog-container" class="edit-dialog-container"
:confirmLoading="dialog.loading" :confirmLoading="loading"
cancelText="取消" cancelText="取消"
okText="确定" okText="确定"
> >
<a-form ref="formRef" :model="form.data" layout="vertical"> <j-form ref="formRef" :model="form.data" layout="vertical">
<a-row :gutter="24" v-if="form.IsShow('add', 'edit')"> <j-row :gutter="24" v-if="form.IsShow('add', 'edit')">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
name="name" name="name"
label="姓名" label="姓名"
:rules="[ :rules="[
@ -23,14 +24,14 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="form.data.name" v-model:value="form.data.name"
placeholder="请输入姓名" placeholder="请输入姓名"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
name="username" name="username"
label="用户名" label="用户名"
:rules="[ :rules="[
@ -41,17 +42,17 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="form.data.username" v-model:value="form.data.username"
placeholder="请输入用户名" placeholder="请输入用户名"
:disabled="dialog.type === 'edit'" :disabled="props.type === 'edit'"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-row v-if="form.IsShow('add', 'reset')"> <j-row v-if="form.IsShow('add', 'reset')">
<a-col :span="24"> <j-col :span="24">
<a-form-item <j-form-item
name="password" name="password"
label="密码" label="密码"
:rules="[ :rules="[
@ -62,21 +63,16 @@
}, },
]" ]"
> >
<a-input-password <j-input-password
v-model:value="form.data.password" v-model:value="form.data.password"
placeholder="请输入密码" placeholder="请输入密码"
/> />
<!-- <Progress </j-form-item>
:percent="20" </j-col>
:steps="5" </j-row>
:strokeColor="{ from: '#ff5500', to: '#ff9300' }" <j-row v-if="form.IsShow('add', 'reset')">
/> --> <j-col :span="24">
</a-form-item> <j-form-item
</a-col>
</a-row>
<a-row v-if="form.IsShow('add', 'reset')">
<a-col :span="24">
<a-form-item
name="confirmPassword" name="confirmPassword"
label="确认密码" label="确认密码"
:rules="[ :rules="[
@ -87,31 +83,26 @@
}, },
]" ]"
> >
<a-input-password <j-input-password
v-model:value="form.data.confirmPassword" v-model:value="form.data.confirmPassword"
placeholder="请再次输入密码" placeholder="请再次输入密码"
:maxlength="64" :maxlength="64"
/> />
<!-- <Progress </j-form-item>
:percent="60" </j-col>
:steps="5" </j-row>
:strokeColor="{ from: '#ff5500', to: '#ff9300' }"
/> -->
</a-form-item>
</a-col>
</a-row>
<!-- 还差页面权限 --> <!-- 还差页面权限 -->
<a-row :gutter="24" v-if="form.IsShow('add', 'edit')"> <j-row :gutter="24" v-if="form.IsShow('add', 'edit')">
<a-col :span="12"> <j-col :span="12">
<a-form-item name="roleIdList" label="角色" class="flex"> <j-form-item name="roleIdList" label="角色" class="flex">
<a-select <j-select
v-model:value="form.data.roleIdList" v-model:value="form.data.roleIdList"
mode="multiple" mode="multiple"
style="width: 100%" style="width: 100%"
placeholder="请选择角色" placeholder="请选择角色"
:options="form.roleOptions" :options="form.roleOptions"
></a-select> ></j-select>
<PermissionButton <PermissionButton
:uhasPermission="`${rolePermission}:update`" :uhasPermission="`${rolePermission}:update`"
@click="form.clickAddItem('roleIdList', 'Role')" @click="form.clickAddItem('roleIdList', 'Role')"
@ -119,11 +110,11 @@
> >
<AIcon type="PlusOutlined" /> <AIcon type="PlusOutlined" />
</PermissionButton> </PermissionButton>
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item name="orgIdList" label="组织" class="flex"> <j-form-item name="orgIdList" label="组织" class="flex">
<a-tree-select <j-tree-select
v-model:value="form.data.orgIdList" v-model:value="form.data.orgIdList"
show-search show-search
style="width: 100%" style="width: 100%"
@ -135,7 +126,7 @@
<template #title="{ name }"> <template #title="{ name }">
{{ name }} {{ name }}
</template> </template>
</a-tree-select> </j-tree-select>
<PermissionButton <PermissionButton
:uhasPermission="`${deptPermission}:update`" :uhasPermission="`${deptPermission}:update`"
@click="form.clickAddItem('roleIdList', 'Role')" @click="form.clickAddItem('roleIdList', 'Role')"
@ -143,12 +134,12 @@
> >
<AIcon type="PlusOutlined" /> <AIcon type="PlusOutlined" />
</PermissionButton> </PermissionButton>
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
<a-row :gutter="24" v-if="form.IsShow('add', 'edit')"> <j-row :gutter="24" v-if="form.IsShow('add', 'edit')">
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
name="telephone" name="telephone"
label="手机号" label="手机号"
:rules="[ :rules="[
@ -158,15 +149,15 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="form.data.telephone" v-model:value="form.data.telephone"
placeholder="请输入手机号" placeholder="请输入手机号"
:maxlength="64" :maxlength="64"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
<a-col :span="12"> <j-col :span="12">
<a-form-item <j-form-item
name="email" name="email"
label="邮箱" label="邮箱"
:rules="[ :rules="[
@ -177,22 +168,21 @@
}, },
]" ]"
> >
<a-input <j-input
v-model:value="form.data.email" v-model:value="form.data.email"
placeholder="请输入邮箱" placeholder="请输入邮箱"
:maxlength="64" :maxlength="64"
/> />
</a-form-item> </j-form-item>
</a-col> </j-col>
</a-row> </j-row>
</a-form> </j-form>
</a-modal> </j-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import PermissionButton from '@/components/PermissionButton/index.vue'; import PermissionButton from '@/components/PermissionButton/index.vue';
import { FormInstance, message } from 'ant-design-vue'; import { FormInstance, message } from 'ant-design-vue';
// import Progress from './Progress.vue';
import { import {
validateField_api, validateField_api,
getRoleList_api, getRoleList_api,
@ -209,44 +199,35 @@ import { AxiosResponse } from 'axios';
const deptPermission = 'system/Department'; const deptPermission = 'system/Department';
const rolePermission = 'system/Role'; const rolePermission = 'system/Role';
const emits = defineEmits(['confirm']); const emits = defineEmits(['confirm', 'update:visible']);
const props = defineProps<{
type: modalType;
data: any;
visible: boolean;
}>();
// 弹窗相关 // 弹窗相关
const dialog = reactive({ const loading = ref(false);
title: '', const dialogTitle = computed(() => {
visible: false, if (props.type === 'add') return '新增';
type: '' as modalType, else if (props.type === 'edit') return '编辑';
loading: false, else if (props.type === 'reset') return '重置密码';
else return '';
handleOk: () => { });
formRef.value?.validate().then(() => { const confirm = () => {
form.submit(() => { loading.value = true;
dialog.changeVisible('', {} as any); formRef.value
?.validate()
.then(() => form.submit())
.then((resp: any) => {
if (resp.status === 200) {
message.success('操作成功');
emits('confirm'); emits('confirm');
}); emits('update:visible', false);
}); }
}, })
/** .finally(() => (loading.value = false));
* 设置表单类型 };
* @param type 弹窗类型
* @param defaultForm 表单回显对象
*/
changeVisible: (type: modalType, defaultForm: formType) => {
dialog.setTitle(type);
form.getUserInfo(defaultForm.id || '', type);
dialog.type = type;
dialog.visible = type !== '';
},
setTitle: (type: modalType) => {
if (type === 'add') dialog.title = '新增';
else if (type === 'edit') dialog.title = '编辑';
else if (type === 'reset') dialog.title = '重置密码';
else dialog.title = '';
},
});
// 将打开弹窗的操作暴露给父组件
defineExpose({
openDialog: dialog.changeVisible,
});
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const form = reactive({ const form = reactive({
data: {} as formType, data: {} as formType,
@ -255,7 +236,7 @@ const form = reactive({
checkUserName: (_rule: Rule, value: string): Promise<any> => checkUserName: (_rule: Rule, value: string): Promise<any> =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
console.log(_rule); console.log(_rule);
if (dialog.type === 'edit') return resolve(''); if (props.type === 'edit') return resolve('');
if (!value) return reject('请输入用户名'); if (!value) return reject('请输入用户名');
else if (value.length > 64) return reject('最多可输入64个字符'); else if (value.length > 64) return reject('最多可输入64个字符');
@ -282,7 +263,6 @@ const form = reactive({
? Promise.resolve() ? Promise.resolve()
: Promise.reject('两次密码输入不一致'); : Promise.reject('两次密码输入不一致');
}, },
//
}, },
roleOptions: [] as optionType[], roleOptions: [] as optionType[],
@ -291,11 +271,15 @@ const form = reactive({
init: () => { init: () => {
form.getDepartmentList(); form.getDepartmentList();
form.getRoleList(); form.getRoleList();
form.getUserInfo();
}, },
getUserInfo: (id: string, type: modalType) => { getUserInfo: () => {
if (type === 'add') form.data = {} as formType; const id = props.data.id || '';
else if (type === 'reset') form.data = { id } as formType; console.log(111);
else if (type === 'edit') {
if (props.type === 'add') form.data = {} as formType;
else if (props.type === 'reset') form.data = { id } as formType;
else if (props.type === 'edit') {
getUser_api(id).then((resp: any) => { getUser_api(id).then((resp: any) => {
form.data = { form.data = {
...(resp.result as formType), ...(resp.result as formType),
@ -312,46 +296,33 @@ const form = reactive({
}); });
} }
}, },
submit: (cb?: Function) => { submit: (): Promise<any> => {
let api: axiosFunType; let api: axiosFunType;
let params = {}; let params = {};
switch (dialog.type) {
case 'add': {
api = addUser_api;
params = {
user: form.data,
orgIdList: form.data.orgIdList,
roleIdList: form.data.roleIdList,
};
break;
}
case 'edit': {
api = updateUser_api;
params = {
id: form.data.id,
user: form.data,
orgIdList: form.data.orgIdList,
roleIdList: form.data.roleIdList,
};
break;
}
case 'reset': {
api = updatePassword_api;
params = {
id: form.data.id,
password: form.data.password,
};
break;
}
default:
return;
}
console.log(params);
api(params).then(() => { if (props.type === 'add') {
message.success('操作成功'); api = addUser_api;
cb && cb(); params = {
}); user: form.data,
orgIdList: form.data.orgIdList,
roleIdList: form.data.roleIdList,
};
} else if (props.type === 'edit') {
api = updateUser_api;
params = {
id: form.data.id,
user: form.data,
orgIdList: form.data.orgIdList,
roleIdList: form.data.roleIdList,
};
} else if (props.type === 'reset') {
api = updatePassword_api;
params = {
id: form.data.id,
password: form.data.password,
};
} else return Promise.reject();
return api(params);
}, },
getRoleList: () => { getRoleList: () => {
getRoleList_api().then((resp: any) => { getRoleList_api().then((resp: any) => {
@ -366,7 +337,7 @@ const form = reactive({
form.departmentOptions = resp.result; form.departmentOptions = resp.result;
}); });
}, },
IsShow: (...typeList: modalType[]) => typeList.includes(dialog.type), IsShow: (...typeList: modalType[]) => typeList.includes(props.type),
clickAddItem: (prop: 'roleIdList' | 'orgIdList', target: string) => { clickAddItem: (prop: 'roleIdList' | 'orgIdList', target: string) => {
const tab: any = window.open(`${origin}/#/system/${target}?save=true`); const tab: any = window.open(`${origin}/#/system/${target}?save=true`);
tab.onSaveSuccess = (value: string) => { tab.onSaveSuccess = (value: string) => {

263
src/views/system/User/index.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<page-container> <page-container>
<div class="user-container"> <div class="user-container">
<Search :columns="query.columns" @search="query.search" /> <Search :columns="columns" @search="query.search" />
<j-pro-table <j-pro-table
ref="tableRef" ref="tableRef"
:columns="table.columns" :columns="columns"
:request="getUserList_api" :request="getUserList_api"
model="TABLE" model="TABLE"
:params="query.params.value" :params="query.params.value"
@ -14,12 +14,6 @@
}" }"
> >
<template #headerTitle> <template #headerTitle>
<!-- <a-button
type="primary"
@click="table.openDialog('add')"
style="margin-right: 10px"
><AIcon type="PlusOutlined" />新增</a-button
> -->
<PermissionButton <PermissionButton
:uhasPermission="`${permission}:add`" :uhasPermission="`${permission}:add`"
type="primary" type="primary"
@ -42,15 +36,14 @@
></BadgeStatus> ></BadgeStatus>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <j-space :size="16">
<PermissionButton <PermissionButton
:uhasPermission="`${permission}:update`" :uhasPermission="`${permission}:update`"
type="link" type="link"
:tooltip="{ :tooltip="{
title: '编辑', title: '编辑',
}" }"
@click="table.openDialog('edit')" @click="table.openDialog('edit', slotProps)"
> >
<AIcon type="EditOutlined" /> <AIcon type="EditOutlined" />
</PermissionButton> </PermissionButton>
@ -96,13 +89,17 @@
> >
<AIcon type="DeleteOutlined" /> <AIcon type="DeleteOutlined" />
</PermissionButton> </PermissionButton>
</a-space> </j-space>
</template> </template>
</j-pro-table> </j-pro-table>
<div class="dialogs"> <EditUserDialog
<EditUserDialog ref="editDialogRef" @confirm="table.refresh" /> v-if="dialog.visible"
</div> :type="dialog.type"
v-model:visible="dialog.visible"
:data="dialog.selectItem"
@confirm="table.refresh"
/>
</div> </div>
</page-container> </page-container>
</template> </template>
@ -121,154 +118,110 @@ import { message } from 'ant-design-vue';
const permission = 'system/User'; const permission = 'system/User';
const columns = [
{
title: '名称',
dataIndex: 'name',
key: 'name',
ellipsis: true,
search: {
type: 'string',
},
},
{
title: '用户名',
dataIndex: 'username',
key: 'username',
ellipsis: true,
fixed: 'left',
search: {
type: 'string',
},
},
{
title: '用户类型',
dataIndex: 'type',
key: 'type',
ellipsis: true,
fixed: 'left',
search: {
type: 'select',
options: () =>
new Promise((resolve) => {
getUserType_api().then((resp: any) => {
resolve(
resp.result.map((item: dictType) => ({
label: item.name,
value: item.id,
})),
);
});
}),
},
scopedSlots: true,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
ellipsis: true,
search: {
rename: 'status',
type: 'select',
options: [
{
label: '启用',
value: 1,
},
{
label: '禁用',
value: 0,
},
],
},
scopedSlots: true,
},
{
title: '手机号',
dataIndex: 'telephone',
key: 'telephone',
ellipsis: true,
fixed: 'left',
search: {
type: 'string',
},
},
{
title: '邮箱',
dataIndex: 'email',
key: 'email',
ellipsis: true,
fixed: 'left',
search: {
type: 'string',
},
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
scopedSlots: true,
},
];
const query = { const query = {
columns: [
{
title: '名称',
dataIndex: 'name',
key: 'name',
ellipsis: true,
search: {
type: 'string',
},
},
{
title: '用户名',
dataIndex: 'username',
key: 'username',
ellipsis: true,
fixed: 'left',
search: {
type: 'string',
},
},
{
title: '用户类型',
dataIndex: 'type',
key: 'type',
ellipsis: true,
fixed: 'left',
search: {
type: 'select',
options: () =>
new Promise((resolve) => {
getUserType_api().then((resp: any) => {
resolve(
resp.result.map((item: dictType) => ({
label: item.name,
value: item.id,
})),
);
});
}),
},
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
ellipsis: true,
search: {
rename: 'status',
type: 'select',
options: [
{
label: '启用',
value: 1,
},
{
label: '禁用',
value: 0,
},
],
},
},
{
title: '手机号',
dataIndex: 'telephone',
key: 'telephone',
ellipsis: true,
fixed: 'left',
search: {
type: 'string',
},
},
{
title: '邮箱',
dataIndex: 'email',
key: 'email',
ellipsis: true,
fixed: 'left',
search: {
type: 'string',
},
},
],
params: ref({}), params: ref({}),
search: (params: object) => { search: (params: object) => {
query.params.value = params; query.params.value = params;
}, },
}; };
const editDialogRef = ref(); // 弹窗实例
const tableRef = ref<Record<string, any>>({}); // 表格实例 const tableRef = ref<Record<string, any>>({}); // 表格实例
const table = { const table = {
columns: [
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '用户名',
dataIndex: 'username',
key: 'username',
ellipsis: true,
},
{
title: '用户类型',
dataIndex: 'type',
key: 'type',
scopedSlots: true,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
scopedSlots: true,
},
{
title: '手机号',
dataIndex: 'telephone',
key: 'telephone',
ellipsis: true,
fixed: 'left',
search: {
type: 'string',
},
},
{
title: '邮箱',
dataIndex: 'email',
key: 'email',
ellipsis: true,
fixed: 'left',
search: {
type: 'string',
},
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
scopedSlots: true,
},
],
// 打开编辑弹窗 // 打开编辑弹窗
openDialog: (type: modalType, row?: any) => { openDialog: (type: modalType, row?: any) => {
editDialogRef.value.openDialog(type, row || {}); dialog.selectItem = { ...(row || {}) };
dialog.type = type;
dialog.visible = true;
}, },
changeStatus: (row: any) => { changeStatus: (row: any) => {
const params = { const params = {
@ -293,6 +246,12 @@ const table = {
}, },
}; };
const dialog = reactive({
selectItem: {},
visible: false,
type: '' as modalType,
});
type dictType = { type dictType = {
id: string; id: string;
name: string; name: string;