Merge branch 'dev' into dev-hub
This commit is contained in:
jackhoo_98
commit
11ee807371
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="notice-container">
|
||||
<a-dropdown :trigger="['click']" @visible-change="visibleChange">
|
||||
<j-dropdown :trigger="['click']" @visible-change="visibleChange">
|
||||
<div class="icon-content">
|
||||
<AIcon
|
||||
type="BellOutlined"
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<NoticeInfo :data="list" @on-action="getList" />
|
||||
</div>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</j-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="notice-info-container">
|
||||
<a-tabs :activeKey="'default'">
|
||||
<a-tab-pane key="default" tab="未读消息">
|
||||
<j-tabs :activeKey="'default'">
|
||||
<j-tab-pane key="default" tab="未读消息">
|
||||
<div class="no-data" v-if="props.data.length === 0">
|
||||
<img src="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg" alt="" />
|
||||
</div>
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</j-tab-pane>
|
||||
</j-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-dropdown placement="bottomRight">
|
||||
<j-dropdown placement="bottomRight">
|
||||
<div style="cursor: pointer;height: 100%;">
|
||||
<img
|
||||
:src="userInfo.avatar"
|
||||
|
|
@ -10,18 +10,18 @@
|
|||
<span>{{ userInfo.name }}</span>
|
||||
</div>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="push('/account/center')" style="width: 160px;">
|
||||
<j-menu>
|
||||
<j-menu-item @click="push('/account/center')" style="width: 160px;">
|
||||
<AIcon type="UserOutlined" style="margin-right: 8px;" />
|
||||
<span>个人中心</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="logOut">
|
||||
</j-menu-item>
|
||||
<j-menu-item @click="logOut">
|
||||
<AIcon type="LogoutOutlined" style="margin-right: 8px;" />
|
||||
<span>退出登录</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</j-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export const AccountMenu = {
|
|||
meta: {
|
||||
title: '个人中心',
|
||||
icon: '',
|
||||
hideInMenu: true
|
||||
hideInMenu: false
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,79 +1,79 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
visible
|
||||
title="编辑"
|
||||
@ok="handleOk"
|
||||
width="770px"
|
||||
@cancel="emits('update:visible', false)"
|
||||
>
|
||||
<a-form :model="form" layout="vertical" ref="formRef">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
<j-form :model="form" layout="vertical" ref="formRef">
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="姓名"
|
||||
name="name"
|
||||
:rules="[{ required: true, message: '姓名必填' }]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.name"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="用户名">
|
||||
<a-input
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item label="用户名">
|
||||
<j-input
|
||||
v-model:value="form.username"
|
||||
placeholder="请输入用户名"
|
||||
disabled
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="角色">
|
||||
<a-input
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item label="角色">
|
||||
<j-input
|
||||
:value="
|
||||
form.roleList.map((item) => item.name).join(',')
|
||||
"
|
||||
placeholder="请输入角色"
|
||||
disabled
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="组织">
|
||||
<a-input
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item label="组织">
|
||||
<j-input
|
||||
:value="
|
||||
form.orgList.map((item) => item.name).join(',')
|
||||
"
|
||||
placeholder="请输入组织"
|
||||
disabled
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="手机号">
|
||||
<a-input
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item label="手机号">
|
||||
<j-input
|
||||
v-model:value="form.telephone"
|
||||
placeholder="请输入手机号"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮箱">
|
||||
<a-input
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item label="邮箱">
|
||||
<j-input
|
||||
v-model:value="form.email"
|
||||
placeholder="请输入邮箱"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
visible
|
||||
title="重置密码"
|
||||
@ok="handleOk"
|
||||
width="520px"
|
||||
@cancel="emits('update:visible', false)"
|
||||
>
|
||||
<a-form :model="form" layout="vertical" ref="formRef">
|
||||
<a-form-item
|
||||
<j-form :model="form" layout="vertical" ref="formRef">
|
||||
<j-form-item
|
||||
label="旧密码"
|
||||
name="oldPassword"
|
||||
:rules="[
|
||||
|
|
@ -15,12 +15,12 @@
|
|||
{ validator: checkMothods.old, trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.oldPassword"
|
||||
placeholder="请输入旧密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="密码"
|
||||
name="newPassword"
|
||||
:rules="[
|
||||
|
|
@ -28,12 +28,12 @@
|
|||
{ validator: checkMothods.new, trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
<j-input-password
|
||||
v-model:value="form.newPassword"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
label="确认密码"
|
||||
name="confirmPassword"
|
||||
:rules="[
|
||||
|
|
@ -41,13 +41,13 @@
|
|||
{ validator: checkMothods.confirm, trigger: 'blur' },
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
<j-input-password
|
||||
v-model:value="form.confirmPassword"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -30,10 +30,10 @@
|
|||
:action="`${BASE_API_PATH}/file/static`"
|
||||
@change="upload.changeBackUpload"
|
||||
>
|
||||
<a-button>
|
||||
<j-button>
|
||||
<AIcon type="UploadOutlined" />
|
||||
更换头像
|
||||
</a-button>
|
||||
</j-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -145,18 +145,18 @@
|
|||
</div>
|
||||
<div v-else>{{ item.name }}未绑定</div>
|
||||
</Ellipsis>
|
||||
<a-popconfirm
|
||||
<j-popconfirm
|
||||
v-if="item.bound"
|
||||
title="确认解除绑定嘛?"
|
||||
@confirm="() => unBind(item.id)"
|
||||
>
|
||||
<a-button>解除绑定</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
<j-button>解除绑定</j-button>
|
||||
</j-popconfirm>
|
||||
<j-button
|
||||
v-else
|
||||
type="primary"
|
||||
@click="clickBind(item.id)"
|
||||
>立即绑定</a-button
|
||||
>立即绑定</j-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -165,24 +165,24 @@
|
|||
<div class="card" v-if="!isApiUser">
|
||||
<h3>首页视图</h3>
|
||||
<div class="choose-view">
|
||||
<a-row class="view-content" :gutter="24">
|
||||
<a-col
|
||||
<j-row class="view-content" :gutter="24">
|
||||
<j-col
|
||||
:span="6"
|
||||
class="select-item"
|
||||
:class="{ selected: currentView === 'device' }"
|
||||
@click="currentView = 'device'"
|
||||
>
|
||||
<img :src="getImage('/home/device.png')" alt="" />
|
||||
</a-col>
|
||||
<a-col
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="6"
|
||||
class="select-item"
|
||||
:class="{ selected: currentView === 'ops' }"
|
||||
@click="currentView = 'ops'"
|
||||
>
|
||||
<img :src="getImage('/home/ops.png')" alt="" />
|
||||
</a-col>
|
||||
<a-col
|
||||
</j-col>
|
||||
<j-col
|
||||
:span="6"
|
||||
class="select-item"
|
||||
:class="{
|
||||
|
|
@ -194,10 +194,10 @@
|
|||
:src="getImage('/home/comprehensive.png')"
|
||||
alt=""
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-button type="primary" class="btn" @click="confirm"
|
||||
>确定</a-button
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-button type="primary" class="btn" @click="confirm"
|
||||
>确定</j-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -205,7 +205,7 @@
|
|||
<EditInfoDialog
|
||||
v-if="editInfoVisible"
|
||||
v-model:visible="editInfoVisible"
|
||||
:data="userInfo"
|
||||
:data="{...userInfo}"
|
||||
@ok="getUserInfo"
|
||||
/>
|
||||
<EditPasswordDialog
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
visible
|
||||
title="详情"
|
||||
width="1000px"
|
||||
|
|
@ -7,48 +7,48 @@
|
|||
@cancel="emits('update:visible', false)"
|
||||
class="view-dialog-container"
|
||||
>
|
||||
<a-row v-if="data?.targetType === 'device'">
|
||||
<a-col :span="4" class="label">告警设备</a-col>
|
||||
<a-col :span="8" class="value">
|
||||
<j-row v-if="data?.targetType === 'device'">
|
||||
<j-col :span="4" class="label">告警设备</j-col>
|
||||
<j-col :span="8" class="value">
|
||||
{{ data?.targetName || '' }}
|
||||
</a-col>
|
||||
<a-col :span="4" class="label">设备ID</a-col>
|
||||
<a-col :span="8" class="value">
|
||||
</j-col>
|
||||
<j-col :span="4" class="label">设备ID</j-col>
|
||||
<j-col :span="8" class="value">
|
||||
{{ data?.targetId || '' }}
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="4" class="label">告警名称</a-col>
|
||||
<a-col :span="8" class="value">
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-row>
|
||||
<j-col :span="4" class="label">告警名称</j-col>
|
||||
<j-col :span="8" class="value">
|
||||
{{ data?.alarmName || data?.alarmConfigName || '' }}
|
||||
</a-col>
|
||||
<a-col :span="4" class="label">告警时间</a-col>
|
||||
<a-col :span="8" class="value">
|
||||
</j-col>
|
||||
<j-col :span="4" class="label">告警时间</j-col>
|
||||
<j-col :span="8" class="value">
|
||||
{{ moment(data?.alarmTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</a-col>
|
||||
</j-col>
|
||||
|
||||
<a-col :span="4" class="label">告警级别</a-col>
|
||||
<a-col :span="8" class="value">
|
||||
<j-col :span="4" class="label">告警级别</j-col>
|
||||
<j-col :span="8" class="value">
|
||||
{{ (levelList.length > 0 && getLevelLabel(data.level)) || '' }}
|
||||
</a-col>
|
||||
<a-col :span="4" class="label">告警说明</a-col>
|
||||
<a-col :span="8" class="value">{{ data?.description || '' }}</a-col>
|
||||
</j-col>
|
||||
<j-col :span="4" class="label">告警说明</j-col>
|
||||
<j-col :span="8" class="value">{{ data?.description || '' }}</j-col>
|
||||
|
||||
<a-col
|
||||
<j-col
|
||||
:span="4"
|
||||
class="label"
|
||||
style="display: flex; height: 440px; align-items: center"
|
||||
>告警流水</a-col
|
||||
>告警流水</j-col
|
||||
>
|
||||
<a-col
|
||||
<j-col
|
||||
:span="20"
|
||||
class="value"
|
||||
style="max-height: 440px; overflow: auto"
|
||||
>
|
||||
<JsonViewer :value="JSON.parse(data?.alarmInfo || '{}')" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-modal>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:popConfirm="{
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
? '标为未读'
|
||||
: '标为已读',
|
||||
}"
|
||||
>
|
||||
>1
|
||||
<AIcon type="ReadIconOutlined" />
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
>
|
||||
<AIcon type="SearchOutlined" />
|
||||
</PermissionButton>
|
||||
</a-space>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
|
||||
|
|
@ -89,7 +89,6 @@ import { optionItem } from '@/views/rule-engine/Scene/typings';
|
|||
import { dictItemType } from '@/views/system/DataSource/typing';
|
||||
import moment from 'moment';
|
||||
import { message } from 'ant-design-vue';
|
||||
import NoticeCp from '@/components/Layout/components/Notice.vue';
|
||||
import { useUserInfo } from '@/store/userInfo';
|
||||
|
||||
const { updateAlarm } = useUserInfo();
|
||||
|
|
@ -159,6 +158,7 @@ const columns = [
|
|||
key: 'action',
|
||||
ellipsis: true,
|
||||
scopedSlots: true,
|
||||
width:'200px'
|
||||
},
|
||||
];
|
||||
const query = {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
visible
|
||||
:title="props.data.id ? '编辑' : '新增'"
|
||||
width="865px"
|
||||
@ok="confirm"
|
||||
@cancel="emits('update:visible', false)"
|
||||
>
|
||||
<a-form :model="form" layout="vertical" ref="formRef">
|
||||
<a-form-item
|
||||
<j-form :model="form" layout="vertical" ref="formRef">
|
||||
<j-form-item
|
||||
label="名称"
|
||||
name="subscribeName"
|
||||
:rules="[
|
||||
|
|
@ -18,48 +18,48 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.subscribeName"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</j-form-item>
|
||||
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
<j-row :gutter="24">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="类型"
|
||||
name="topicProvider"
|
||||
:rules="[{ required: true, message: '请选择类型' }]"
|
||||
>
|
||||
<a-select
|
||||
<j-select
|
||||
v-model:value="form.topicProvider"
|
||||
placeholder="请选择类型"
|
||||
:options="typeList"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
label="告警规则"
|
||||
:name="['topicConfig', 'alarmConfigId']"
|
||||
:rules="[{ required: true, message: '请选择告警规则' }]"
|
||||
>
|
||||
<a-select
|
||||
<j-select
|
||||
:value="form.topicConfig.alarmConfigId?.split(',')"
|
||||
:options="alarmList"
|
||||
placeholder="请选择告警规则"
|
||||
mode="multiple"
|
||||
@change="onSelect"
|
||||
></a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item
|
||||
></j-select>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-form-item
|
||||
name="notice"
|
||||
label="通知方式"
|
||||
:rules="[{ required: true, message: '请选择通知方式' }]"
|
||||
>
|
||||
<a-checkbox-group
|
||||
<j-checkbox-group
|
||||
v-model:value="form.notice"
|
||||
name="checkboxgroup"
|
||||
:options="[
|
||||
|
|
@ -69,9 +69,9 @@
|
|||
},
|
||||
]"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
</template>
|
||||
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:tooltip="{
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</a-space>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
|
||||
|
|
@ -147,6 +147,7 @@ const columns = [
|
|||
key: 'action',
|
||||
ellipsis: true,
|
||||
scopedSlots: true,
|
||||
width: '200px'
|
||||
},
|
||||
];
|
||||
const query = {
|
||||
|
|
|
|||
|
|
@ -3,12 +3,10 @@
|
|||
class="add-device-or-product-dialog-container"
|
||||
title="绑定"
|
||||
width="1440px"
|
||||
@ok="dialog.handleOk"
|
||||
:confirmLoading="dialog.loading.value"
|
||||
cancelText="取消"
|
||||
okText="确定"
|
||||
v-model:visible="dialog.visible.value"
|
||||
destroyOnClose
|
||||
@ok="confirm"
|
||||
:confirmLoading="loading"
|
||||
@cancel="emits('update:visible', false)"
|
||||
visible
|
||||
>
|
||||
<h5 class="row">
|
||||
<exclamation-circle-outlined style="margin-right: 6px" />
|
||||
|
|
@ -110,25 +108,25 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|||
import { getImage } from '@/utils/comm';
|
||||
import { uniq, intersection } from 'lodash-es';
|
||||
import {
|
||||
getDeviceOrProductList_api,getDeviceList_api,
|
||||
getDeviceOrProductList_api,
|
||||
getDeviceList_api,
|
||||
getPermission_api,
|
||||
bindDeviceOrProductList_api,
|
||||
} from '@/api/system/department';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { dictType } from '../typing';
|
||||
|
||||
const emits = defineEmits(['confirm']);
|
||||
const emits = defineEmits(['confirm', 'update:visible']);
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
queryColumns: any[];
|
||||
parentId: string;
|
||||
allPermission: dictType;
|
||||
assetType: 'product' | 'device';
|
||||
}>();
|
||||
// 弹窗相关
|
||||
const dialog = {
|
||||
visible: ref<boolean>(false),
|
||||
loading: ref<boolean>(false),
|
||||
handleOk: () => {
|
||||
const loading = ref(false);
|
||||
const confirm = () => {
|
||||
if (table.selectedRows.length < 1) {
|
||||
return message.warning('请先勾选数据');
|
||||
}
|
||||
|
|
@ -141,21 +139,16 @@ const dialog = {
|
|||
permission: item.selectPermissions,
|
||||
}));
|
||||
|
||||
dialog.loading.value = true;
|
||||
loading.value = true;
|
||||
bindDeviceOrProductList_api(props.assetType, params)
|
||||
.then(() => {
|
||||
message.success('操作成功');
|
||||
emits('confirm');
|
||||
dialog.changeVisible();
|
||||
emits('update:visible', false);
|
||||
})
|
||||
.finally(() => {
|
||||
dialog.loading.value = false;
|
||||
loading.value = false;
|
||||
});
|
||||
},
|
||||
// 控制弹窗的打开与关闭
|
||||
changeVisible: () => {
|
||||
dialog.visible.value = !dialog.visible.value;
|
||||
},
|
||||
};
|
||||
|
||||
const bulkBool = ref<boolean>(true);
|
||||
|
|
@ -308,7 +301,10 @@ const table: any = {
|
|||
// 获取并整理数据
|
||||
getData: (params: object, parentId: string) =>
|
||||
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) => {
|
||||
type resultType = {
|
||||
data: any[];
|
||||
|
|
@ -319,7 +315,8 @@ const table: any = {
|
|||
const { pageIndex, pageSize, total, data } =
|
||||
resp.result as resultType;
|
||||
const ids = data.map((item) => item.id);
|
||||
getPermission_api(props.assetType,ids, parentId).then((perResp: any) => {
|
||||
getPermission_api(props.assetType, ids, parentId).then(
|
||||
(perResp: any) => {
|
||||
const permissionObj = {};
|
||||
perResp.result.forEach((item: any) => {
|
||||
permissionObj[item.assetId] = props.allPermission
|
||||
|
|
@ -337,11 +334,21 @@ const table: any = {
|
|||
item.selectPermissions = ['read'];
|
||||
|
||||
// 产品的状态进行转换处理
|
||||
if(props.assetType === 'product') {
|
||||
if (props.assetType === 'product') {
|
||||
item.state = {
|
||||
value: item.state === 1 ? 'online': item.state === 0 ? 'offline': '',
|
||||
text: item.state === 1 ? '正常': item.state === 0 ? '禁用': ''
|
||||
}
|
||||
value:
|
||||
item.state === 1
|
||||
? 'online'
|
||||
: item.state === 0
|
||||
? 'offline'
|
||||
: '',
|
||||
text:
|
||||
item.state === 1
|
||||
? '正常'
|
||||
: item.state === 0
|
||||
? '禁用'
|
||||
: '',
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -355,7 +362,8 @@ const table: any = {
|
|||
},
|
||||
status: 200,
|
||||
});
|
||||
});
|
||||
},
|
||||
);
|
||||
});
|
||||
}),
|
||||
// 整理参数并获取数据
|
||||
|
|
@ -412,11 +420,6 @@ const table: any = {
|
|||
},
|
||||
};
|
||||
table.init();
|
||||
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: dialog.changeVisible,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-model:visible="dialog.visible"
|
||||
:title="dialog.title"
|
||||
<j-modal
|
||||
visible
|
||||
:title="title"
|
||||
width="520px"
|
||||
@ok="dialog.handleOk"
|
||||
@cancel="emits('update:visible',false)"
|
||||
@ok="confirm"
|
||||
class="edit-dialog-container"
|
||||
cancelText="取消"
|
||||
okText="确定"
|
||||
:confirmLoading="form.loading"
|
||||
:confirmLoading="loading"
|
||||
>
|
||||
<a-form ref="formRef" :model="form.data" layout="vertical">
|
||||
<a-form-item name="parentId" label="上级组织">
|
||||
<j-form ref="formRef" :model="form.data" layout="vertical">
|
||||
<j-form-item name="parentId" label="上级组织">
|
||||
<a-tree-select
|
||||
v-model:value="form.data.parentId"
|
||||
style="width: 100%"
|
||||
|
|
@ -20,8 +21,8 @@
|
|||
>
|
||||
<template #title="{ name }"> {{ name }} </template>
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
<j-form-item
|
||||
name="name"
|
||||
label="名称"
|
||||
:rules="[
|
||||
|
|
@ -29,82 +30,85 @@
|
|||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.data.name"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</j-form-item>
|
||||
|
||||
<a-form-item
|
||||
<j-form-item
|
||||
name="sortIndex"
|
||||
label="排序"
|
||||
:rules="[{ required: true, message: '请输入排序' }]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.data.sortIndex"
|
||||
placeholder="请输入排序"
|
||||
:maxlength="64"
|
||||
@blur="form.checkSort"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</j-form-item>
|
||||
</j-form>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormInstance } from 'ant-design-vue';
|
||||
import {cloneDeep} from 'lodash-es'
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import {
|
||||
addDepartment_api,
|
||||
updateDepartment_api,
|
||||
} from '@/api/system/department';
|
||||
|
||||
const emits = defineEmits(['refresh']);
|
||||
const emits = defineEmits(['refresh', 'update:visible']);
|
||||
const props = defineProps<{
|
||||
treeData: any[];
|
||||
data: any;
|
||||
visible: boolean;
|
||||
}>();
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
title: '',
|
||||
visible: false,
|
||||
handleOk: () => {
|
||||
formRef.value?.validate().then(() => {
|
||||
form.submit();
|
||||
});
|
||||
},
|
||||
// 控制弹窗的打开与关闭
|
||||
changeVisible: (status: boolean, row: any = {}) => {
|
||||
if (row.id) {
|
||||
dialog.title = '编辑';
|
||||
form.data = cloneDeep(row);
|
||||
} else if (row.parentId) {
|
||||
dialog.title = '新增子组织';
|
||||
const title = ref('');
|
||||
const loading = ref(false);
|
||||
const confirm = () => {
|
||||
loading.value = true;
|
||||
formRef.value
|
||||
?.validate()
|
||||
.then(() => form.submit())
|
||||
.then((resp: any) => {
|
||||
emits('refresh', resp.result.id);
|
||||
emits('update:visible', false);
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
};
|
||||
// 表单相关
|
||||
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 = {
|
||||
name: '',
|
||||
sortIndex: ((row.children && row.children.length) || 0) + 1,
|
||||
parentId: row.parentId,
|
||||
sortIndex: props.data.sortIndex,
|
||||
parentId: props.data.parentId,
|
||||
};
|
||||
} else {
|
||||
dialog.title = '新增';
|
||||
title.value = '新增';
|
||||
form.data = {
|
||||
name: '',
|
||||
sortIndex: props.treeData.length + 1,
|
||||
sortIndex: props.data.sortIndex,
|
||||
};
|
||||
}
|
||||
form.beforeSortIndex = form.data.sortIndex;
|
||||
dialog.visible = status;
|
||||
nextTick(() => {
|
||||
formRef.value?.clearValidate();
|
||||
});
|
||||
},
|
||||
});
|
||||
// 表单相关
|
||||
const formRef = ref<FormInstance>();
|
||||
const form = reactive({
|
||||
loading: false,
|
||||
data: {} as formType,
|
||||
beforeSortIndex: '' as string | number,
|
||||
|
||||
checkSort: (e: any) => {
|
||||
const value = e.target.value.match(/^[0-9]*/)[0];
|
||||
if (value) {
|
||||
|
|
@ -114,16 +118,11 @@ const form = reactive({
|
|||
},
|
||||
|
||||
submit: () => {
|
||||
form.loading = true;
|
||||
const api = form.data.id ? updateDepartment_api : addDepartment_api;
|
||||
api(form.data)
|
||||
.then((resp:any) => {
|
||||
emits('refresh',resp.result.id);
|
||||
dialog.changeVisible(false);
|
||||
})
|
||||
.finally(() => (form.loading = false));
|
||||
return api(form.data);
|
||||
},
|
||||
});
|
||||
form.init();
|
||||
|
||||
type formType = {
|
||||
id?: string;
|
||||
|
|
@ -131,11 +130,4 @@ type formType = {
|
|||
name: string;
|
||||
sortIndex: string | number;
|
||||
};
|
||||
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: dialog.changeVisible,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,21 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
class="edit-permission-dialog-container"
|
||||
title="编辑"
|
||||
width="500px"
|
||||
@ok="dialog.handleOk"
|
||||
:confirmLoading="dialog.loading.value"
|
||||
cancelText="取消"
|
||||
okText="确定"
|
||||
v-model:visible="dialog.visible.value"
|
||||
@ok="confirm"
|
||||
:confirmLoading="loading"
|
||||
visible
|
||||
@cancel="emits('update:visible', false)"
|
||||
>
|
||||
<div>
|
||||
<span>资产权限：</span>
|
||||
<a-checkbox-group
|
||||
<j-checkbox-group
|
||||
v-model:value="form.permission"
|
||||
:options="options"
|
||||
/>
|
||||
</div>
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -24,43 +23,35 @@ import type { dictType, optionsType } from '../typing';
|
|||
import { updatePermission_api } from '@/api/system/department';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const emits = defineEmits(['confirm']);
|
||||
const emits = defineEmits(['confirm', 'update:visible']);
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
ids: string[];
|
||||
permissionList: string[];
|
||||
parentId: string;
|
||||
allPermission: dictType;
|
||||
assetType: 'product' | 'device';
|
||||
}>();
|
||||
// 弹窗相关
|
||||
const dialog = {
|
||||
loading: ref<boolean>(false),
|
||||
visible: ref<boolean>(false),
|
||||
handleOk: () => {
|
||||
dialog.loading.value = true;
|
||||
const loading = ref(false);
|
||||
const confirm = () => {
|
||||
loading.value = true;
|
||||
updatePermission_api(props.assetType, props.parentId, form)
|
||||
.then(() => {
|
||||
message.success('操作成功');
|
||||
emits('confirm');
|
||||
dialog.visible.value = false;
|
||||
emits('update:visible', 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;
|
||||
},
|
||||
.finally(() => (loading.value = false));
|
||||
};
|
||||
const form = reactive({
|
||||
assetIdList: [] as string[],
|
||||
permission: [] as string[],
|
||||
assetIdList: [...props.ids],
|
||||
permission: [...props.permissionList],
|
||||
});
|
||||
const options = ref<optionsType>([]);
|
||||
const setOptions = (havePermission: string[]): optionsType => {
|
||||
const options = computed(() => {
|
||||
const result: optionsType = [];
|
||||
props.allPermission.forEach((item) => {
|
||||
if (havePermission.includes(item.id))
|
||||
if (props.permissionList.includes(item.id))
|
||||
result.push({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
|
|
@ -68,11 +59,6 @@ const setOptions = (havePermission: string[]): optionsType => {
|
|||
});
|
||||
});
|
||||
return result;
|
||||
};
|
||||
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: dialog.changeVisible,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="left-tree-container">
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="searchValue"
|
||||
@change="search"
|
||||
placeholder="请输入组织名称"
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<template #suffix>
|
||||
<search-outlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</j-input>
|
||||
<div class="add-btn">
|
||||
<PermissionButton
|
||||
type="primary"
|
||||
|
|
@ -30,47 +30,11 @@
|
|||
<template #title="{ name, data }">
|
||||
<span>{{ name }}</span>
|
||||
<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
|
||||
:uhasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '新增子组织',
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="openDialog(data)"
|
||||
>
|
||||
|
|
@ -109,8 +73,10 @@
|
|||
|
||||
<!-- 编辑弹窗 -->
|
||||
<EditDepartmentDialog
|
||||
v-if="dialog.visible"
|
||||
v-model:visible="dialog.visible"
|
||||
:tree-data="sourceTree"
|
||||
ref="editDialogRef"
|
||||
:data="dialog.selectItem"
|
||||
@refresh="refresh"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -215,9 +181,24 @@ function refresh(id: string) {
|
|||
}
|
||||
|
||||
// 弹窗
|
||||
const editDialogRef = ref(); // 新增弹窗实例
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
selectItem: {},
|
||||
});
|
||||
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();
|
||||
function init() {
|
||||
|
|
@ -236,6 +217,7 @@ function init() {
|
|||
<style lang="less" scoped>
|
||||
.left-tree-container {
|
||||
padding-right: 24px;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
|
||||
.add-btn {
|
||||
margin: 24px 0;
|
||||
|
|
|
|||
|
|
@ -1,33 +1,26 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
<j-modal
|
||||
visible
|
||||
title="绑定"
|
||||
width="520px"
|
||||
@ok="handleOk"
|
||||
class="edit-dialog-container"
|
||||
cancelText="取消"
|
||||
okText="确定"
|
||||
@cancel="emits('update:visible',false)"
|
||||
>
|
||||
是否继续分配产品下的具体设备
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<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 = () => {
|
||||
emits('confirm');
|
||||
changeVisible();
|
||||
emits('update:visible',false)
|
||||
};
|
||||
// 控制弹窗的打开与关闭
|
||||
const changeVisible = () => {
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: changeVisible,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
@cancelSelect="table.cancelSelect"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-space>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
:uhasPermission="`${permission}:assert`"
|
||||
type="primary"
|
||||
|
|
@ -21,11 +21,11 @@
|
|||
>
|
||||
<AIcon type="PlusOutlined" />资产分配
|
||||
</PermissionButton>
|
||||
<a-dropdown trigger="hover">
|
||||
<a-button>批量操作</a-button>
|
||||
<j-dropdown trigger="hover">
|
||||
<j-button>批量操作</j-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<j-menu>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:uhasPermission="`${permission}:bind`"
|
||||
:popConfirm="{
|
||||
|
|
@ -38,19 +38,19 @@
|
|||
type="DisconnectOutlined"
|
||||
/>批量解绑
|
||||
</PermissionButton>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
</j-menu-item>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:uhasPermission="`${permission}:assert`"
|
||||
@click="table.clickEdit()"
|
||||
>
|
||||
<AIcon type="EditOutlined" />批量编辑
|
||||
</PermissionButton>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</j-dropdown>
|
||||
</j-space>
|
||||
</template>
|
||||
|
||||
<template #card="slotProps">
|
||||
|
|
@ -82,8 +82,8 @@
|
|||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">ID</div>
|
||||
<div
|
||||
style="cursor: pointer"
|
||||
|
|
@ -91,8 +91,8 @@
|
|||
>
|
||||
{{ slotProps.id }}
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
资产权限
|
||||
</div>
|
||||
|
|
@ -107,8 +107,8 @@
|
|||
)
|
||||
}}
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions>
|
||||
<PermissionButton
|
||||
|
|
@ -134,7 +134,8 @@
|
|||
|
||||
<div class="dialogs">
|
||||
<AddDeviceOrProductDialog
|
||||
ref="addDialogRef"
|
||||
v-if="dialogs.addShow"
|
||||
v-model:visible="dialogs.addShow"
|
||||
:query-columns="query.columns"
|
||||
:parent-id="props.parentId"
|
||||
:all-permission="table.permissionList.value"
|
||||
|
|
@ -142,7 +143,10 @@
|
|||
@confirm="table.refresh"
|
||||
/>
|
||||
<EditPermissionDialog
|
||||
ref="editDialogRef"
|
||||
v-if="dialogs.editShow"
|
||||
v-model:visible="dialogs.editShow"
|
||||
:ids="dialogs.selectIds"
|
||||
:permission-list="dialogs.permissList"
|
||||
:parent-id="props.parentId"
|
||||
:all-permission="table.permissionList.value"
|
||||
asset-type="device"
|
||||
|
|
@ -398,25 +402,26 @@ const table = {
|
|||
}
|
||||
},
|
||||
clickAdd: () => {
|
||||
addDialogRef.value && addDialogRef.value.openDialog();
|
||||
dialogs.addShow = true;
|
||||
},
|
||||
clickEdit: (row?: any) => {
|
||||
const ids = row ? [row.id] : [...table._selectedRowKeys.value];
|
||||
if (row || table.selectedRows.length === 1) {
|
||||
const permissionList =
|
||||
row?.permission || table.selectedRows[0].permission;
|
||||
return (
|
||||
editDialogRef.value &&
|
||||
editDialogRef.value.openDialog(ids, permissionList)
|
||||
);
|
||||
dialogs.selectIds = ids;
|
||||
dialogs.permissList = permissionList;
|
||||
dialogs.editShow = true;
|
||||
return;
|
||||
} else if (table.selectedRows.length === 0) return;
|
||||
const permissionList = table.selectedRows.map(
|
||||
(item) => item.permission,
|
||||
);
|
||||
const mixPermissionList = intersection(...permissionList);
|
||||
const mixPermissionList = intersection(...permissionList) as string[];
|
||||
|
||||
editDialogRef.value &&
|
||||
editDialogRef.value.openDialog(ids, mixPermissionList);
|
||||
dialogs.selectIds = ids;
|
||||
dialogs.permissList = mixPermissionList;
|
||||
dialogs.editShow = true;
|
||||
},
|
||||
clickUnBind: (row?: any) => {
|
||||
const ids = row ? [row.id] : [...table._selectedRowKeys.value];
|
||||
|
|
@ -441,8 +446,12 @@ const table = {
|
|||
},
|
||||
};
|
||||
|
||||
const addDialogRef = ref();
|
||||
const editDialogRef = ref();
|
||||
const dialogs = reactive({
|
||||
selectIds: [] as string[],
|
||||
permissList: [] as string[],
|
||||
addShow: false,
|
||||
editShow: false,
|
||||
});
|
||||
|
||||
table.init();
|
||||
nextTick(() => {
|
||||
|
|
|
|||
|
|
@ -1,30 +1,28 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<div class="department-container">
|
||||
<a-card class="department-content">
|
||||
<div class="left">
|
||||
<LeftTree @change="(id) => (departmentId = id)" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="product" tab="产品">
|
||||
<j-tabs v-model:activeKey="activeKey">
|
||||
<j-tab-pane key="product" tab="产品">
|
||||
<Product
|
||||
:parentId="departmentId"
|
||||
@open-device-bind="openDeviceBind"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="device" tab="设备">
|
||||
</j-tab-pane>
|
||||
<j-tab-pane key="device" tab="设备">
|
||||
<Device
|
||||
:parentId="departmentId"
|
||||
v-model:bindBool="bindBool"
|
||||
/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="user" tab="用户">
|
||||
</j-tab-pane>
|
||||
<j-tab-pane key="user" tab="用户">
|
||||
<User :parentId="departmentId" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</j-tab-pane>
|
||||
</j-tabs>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
@ -48,21 +46,18 @@ const openDeviceBind = () => {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.department-container {
|
||||
.department-content {
|
||||
:deep(.ant-card-body) {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
|
||||
.left {
|
||||
flex-basis: 300px;
|
||||
}
|
||||
.right {
|
||||
width: calc(100% - 300px);
|
||||
|
||||
.ant-tabs-nav-wrap {
|
||||
:deep(.ant-tabs-nav-wrap) {
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
@cancelSelect="table.cancelSelect"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-space>
|
||||
<j-space>
|
||||
<PermissionButton
|
||||
:uhasPermission="`${permission}:assert`"
|
||||
type="primary"
|
||||
|
|
@ -21,11 +21,11 @@
|
|||
>
|
||||
<AIcon type="PlusOutlined" />资产分配
|
||||
</PermissionButton>
|
||||
<a-dropdown trigger="hover">
|
||||
<a-button>批量操作</a-button>
|
||||
<j-dropdown trigger="hover">
|
||||
<j-button>批量操作</j-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item>
|
||||
<j-menu>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:uhasPermission="`${permission}:bind`"
|
||||
:popConfirm="{
|
||||
|
|
@ -38,19 +38,19 @@
|
|||
type="DisconnectOutlined"
|
||||
/>批量解绑
|
||||
</PermissionButton>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
</j-menu-item>
|
||||
<j-menu-item>
|
||||
<PermissionButton
|
||||
:uhasPermission="`${permission}:assert`"
|
||||
@click="()=>table.clickEdit()"
|
||||
@click="() => table.clickEdit()"
|
||||
>
|
||||
<AIcon type="EditOutlined" />批量编辑
|
||||
</PermissionButton>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</j-menu-item>
|
||||
</j-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</j-dropdown>
|
||||
</j-space>
|
||||
</template>
|
||||
|
||||
<template #card="slotProps">
|
||||
|
|
@ -82,8 +82,8 @@
|
|||
<h3 class="card-item-content-title">
|
||||
{{ slotProps.name }}
|
||||
</h3>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<j-row>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">ID</div>
|
||||
<div
|
||||
style="cursor: pointer"
|
||||
|
|
@ -91,8 +91,8 @@
|
|||
>
|
||||
{{ slotProps.id }}
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<div class="card-item-content-text">
|
||||
资产权限
|
||||
</div>
|
||||
|
|
@ -107,8 +107,8 @@
|
|||
)
|
||||
}}
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</template>
|
||||
<template #actions>
|
||||
<PermissionButton
|
||||
|
|
@ -134,7 +134,8 @@
|
|||
|
||||
<div class="dialogs">
|
||||
<AddDeviceOrProductDialog
|
||||
ref="addDialogRef"
|
||||
v-if="dialogs.addShow"
|
||||
v-model:visible="dialogs.addShow"
|
||||
:query-columns="query.columns"
|
||||
:parent-id="props.parentId"
|
||||
:all-permission="table.permissionList.value"
|
||||
|
|
@ -142,14 +143,18 @@
|
|||
@confirm="table.addConfirm"
|
||||
/>
|
||||
<EditPermissionDialog
|
||||
ref="editDialogRef"
|
||||
v-if="dialogs.editShow"
|
||||
v-model:visible="dialogs.editShow"
|
||||
:ids="dialogs.selectIds"
|
||||
:permission-list="dialogs.permissList"
|
||||
:parent-id="props.parentId"
|
||||
:all-permission="table.permissionList.value"
|
||||
asset-type="product"
|
||||
@confirm="table.refresh"
|
||||
/>
|
||||
<NextDialog
|
||||
ref="nextDialogRef"
|
||||
v-if="dialogs.nextShow"
|
||||
v-model:visible="dialogs.nextShow"
|
||||
@confirm="emits('openDeviceBind')"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -171,7 +176,7 @@ import {
|
|||
} from '@/api/system/department';
|
||||
import { intersection } from 'lodash-es';
|
||||
|
||||
import { dictType } from '../typing.d.ts';
|
||||
import type { dictType } from '../typing.d.ts';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const permission = 'system/Department';
|
||||
|
|
@ -256,7 +261,7 @@ const table = {
|
|||
const permissionList = table.permissionList.value;
|
||||
if (permissionList.length < 1 || values.length < 1) return '';
|
||||
const result = values.map(
|
||||
(key) => permissionList.find((item) => item.id === key)?.name,
|
||||
(key) => permissionList.find((item:any) => item.id === key)?.name,
|
||||
);
|
||||
return result.join(',');
|
||||
},
|
||||
|
|
@ -375,9 +380,7 @@ const table = {
|
|||
}
|
||||
},
|
||||
clickAdd: () => {
|
||||
console.log(222)
|
||||
console.log(addDialogRef.value)
|
||||
addDialogRef.value && addDialogRef.value.openDialog();
|
||||
dialogs.addShow = true;
|
||||
},
|
||||
clickEdit: (row?: any) => {
|
||||
const ids = row ? [row.id] : [...table._selectedRowKeys.value];
|
||||
|
|
@ -385,18 +388,19 @@ const table = {
|
|||
if (row || table.selectedRows.length === 1) {
|
||||
const permissionList =
|
||||
row?.permission || table.selectedRows[0].permission;
|
||||
return (
|
||||
editDialogRef.value &&
|
||||
editDialogRef.value.openDialog(ids, permissionList)
|
||||
);
|
||||
dialogs.selectIds = ids;
|
||||
dialogs.permissList = permissionList;
|
||||
dialogs.editShow = true;
|
||||
return;
|
||||
} else if (table.selectedRows.length === 0) return;
|
||||
const permissionList = table.selectedRows.map(
|
||||
(item) => item.permission,
|
||||
);
|
||||
const mixPermissionList = intersection(...permissionList);
|
||||
const mixPermissionList = intersection(...permissionList) as string[];
|
||||
|
||||
editDialogRef.value &&
|
||||
editDialogRef.value.openDialog(ids, mixPermissionList);
|
||||
dialogs.selectIds = ids;
|
||||
dialogs.permissList = mixPermissionList;
|
||||
dialogs.editShow = true;
|
||||
},
|
||||
clickUnBind: (row?: any) => {
|
||||
const ids = row ? [row.id] : [...table._selectedRowKeys.value];
|
||||
|
|
@ -421,14 +425,19 @@ const table = {
|
|||
},
|
||||
addConfirm: () => {
|
||||
table.refresh();
|
||||
nextDialogRef.value && nextDialogRef.value.openDialog();
|
||||
dialogs.nextShow = true;
|
||||
},
|
||||
};
|
||||
|
||||
const addDialogRef = ref();
|
||||
const editDialogRef = ref();
|
||||
const nextDialogRef = ref();
|
||||
table.init();
|
||||
|
||||
const dialogs = reactive({
|
||||
selectIds: [] as string[],
|
||||
permissList: [] as string[],
|
||||
addShow: false,
|
||||
editShow: false,
|
||||
nextShow: false,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<template>
|
||||
<a-modal
|
||||
<j-modal
|
||||
class="add-bind-user-dialog-container"
|
||||
title="绑定"
|
||||
width="1440px"
|
||||
@ok="dialog.handleOk"
|
||||
visible
|
||||
centered
|
||||
:confirmLoading="dialog.loading.value"
|
||||
cancelText="取消"
|
||||
okText="确定"
|
||||
v-model:visible="dialog.visible.value"
|
||||
:confirmLoading="loading"
|
||||
@ok="confirm"
|
||||
@cancel="emits('update:visible', false)"
|
||||
>
|
||||
<Search :columns="query.columns" @search="query.search" />
|
||||
<div class="table">
|
||||
|
|
@ -28,43 +27,35 @@
|
|||
}"
|
||||
/>
|
||||
</div>
|
||||
</a-modal>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { bindUser_api, getBindUserList_api } from '@/api/system/department';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const emits = defineEmits(['confirm']);
|
||||
const emits = defineEmits(['confirm', 'update:visible']);
|
||||
|
||||
const props = defineProps({
|
||||
parentId: String,
|
||||
});
|
||||
const props = defineProps<{
|
||||
parentId: string;
|
||||
visible: boolean;
|
||||
}>();
|
||||
// 弹窗相关
|
||||
const dialog = {
|
||||
loading: ref<boolean>(false),
|
||||
visible: ref<boolean>(false),
|
||||
handleOk: () => {
|
||||
const loading = ref(false);
|
||||
const confirm = () => {
|
||||
if (table._selectedRowKeys.length && props.parentId) {
|
||||
bindUser_api(props.parentId, table._selectedRowKeys).then(() => {
|
||||
emits('confirm');
|
||||
loading.value = true;
|
||||
bindUser_api(props.parentId, table._selectedRowKeys)
|
||||
.then(() => {
|
||||
message.success('操作成功');
|
||||
dialog.changeVisible();
|
||||
});
|
||||
emits('confirm');
|
||||
emits('update:visible', false);
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
} else {
|
||||
dialog.changeVisible();
|
||||
emits('update:visible', false);
|
||||
}
|
||||
},
|
||||
// 控制弹窗的打开与关闭
|
||||
changeVisible: () => {
|
||||
if (!dialog.visible.value) query.search({});
|
||||
dialog.visible.value = !dialog.visible.value;
|
||||
},
|
||||
};
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: dialog.changeVisible,
|
||||
});
|
||||
|
||||
const query = {
|
||||
columns: [
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<Search :columns="query.columns" @search="query.search" />
|
||||
<Search :columns="columns" @search="(p:any)=>params = p" />
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:columns="columns"
|
||||
:request="table.requestFun"
|
||||
:params="query.params"
|
||||
:params="params"
|
||||
:rowSelection="{
|
||||
selectedRowKeys: table._selectedRowKeys,
|
||||
onChange: table.onSelectChange,
|
||||
|
|
@ -18,12 +18,14 @@
|
|||
<PermissionButton
|
||||
type="primary"
|
||||
:uhasPermission="`${permission}:bind-user`"
|
||||
@click="table.openDialog"
|
||||
style="margin-right: 15px;"
|
||||
@click="dialogVisible = true"
|
||||
style="margin-right: 15px"
|
||||
>
|
||||
<AIcon type="PlusOutlined" />绑定用户
|
||||
</PermissionButton>
|
||||
<div style="display: inline-block;width: 12px;height: 1px;"></div>
|
||||
<div
|
||||
style="display: inline-block; width: 12px; height: 1px"
|
||||
></div>
|
||||
<PermissionButton
|
||||
:uhasPermission="`${permission}:bind`"
|
||||
:popConfirm="{
|
||||
|
|
@ -34,7 +36,7 @@
|
|||
<AIcon type="DisconnectOutlined" />批量解绑
|
||||
</PermissionButton>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<template #state="slotProps">
|
||||
<BadgeStatus
|
||||
:status="slotProps.status"
|
||||
:text="slotProps.status ? '正常' : '禁用'"
|
||||
|
|
@ -45,7 +47,7 @@
|
|||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
type="link"
|
||||
:uhasPermission="`${permission}:bind`"
|
||||
|
|
@ -56,13 +58,14 @@
|
|||
>
|
||||
<AIcon type="DisconnectOutlined" />
|
||||
</PermissionButton>
|
||||
</a-space>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
|
||||
<div class="dialogs">
|
||||
<AddBindUserDialog
|
||||
ref="addDialogRef"
|
||||
v-if="dialogVisible"
|
||||
v-model:visible="dialogVisible"
|
||||
:parent-id="props.parentId"
|
||||
@confirm="table.refresh"
|
||||
/>
|
||||
|
|
@ -78,14 +81,11 @@ import { message } from 'ant-design-vue';
|
|||
|
||||
const permission = 'system/Department';
|
||||
|
||||
const addDialogRef = ref();
|
||||
|
||||
const props = defineProps<{
|
||||
parentId: string;
|
||||
}>();
|
||||
|
||||
const query = {
|
||||
columns: [
|
||||
const columns = [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
|
|
@ -126,33 +126,6 @@ const query = {
|
|||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
params: ref({}),
|
||||
search: (params: any) => {
|
||||
query.params.value = params;
|
||||
},
|
||||
};
|
||||
|
||||
// 表格
|
||||
const tableRef = ref<Record<string, any>>({}); // 表格实例
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
},
|
||||
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
|
|
@ -160,8 +133,15 @@ const table = reactive({
|
|||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
scopedSlots: true,
|
||||
width: '200px',
|
||||
},
|
||||
],
|
||||
];
|
||||
// 搜索参数
|
||||
const params = ref({});
|
||||
|
||||
// 表格
|
||||
const tableRef = ref<Record<string, any>>({}); // 表格实例
|
||||
const table = reactive({
|
||||
_selectedRowKeys: [] as string[],
|
||||
|
||||
requestFun: async (oParams: any) => {
|
||||
|
|
@ -210,10 +190,6 @@ const table = reactive({
|
|||
table.refresh();
|
||||
});
|
||||
},
|
||||
// 打开编辑弹窗
|
||||
openDialog: () => {
|
||||
addDialogRef.value && addDialogRef.value.openDialog();
|
||||
},
|
||||
onSelectChange: (keys: string[]) => {
|
||||
table._selectedRowKeys = keys;
|
||||
},
|
||||
|
|
@ -225,6 +201,6 @@ const table = reactive({
|
|||
tableRef.value.reload();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
const dialogVisible = ref(false);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,19 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-model:visible="dialog.visible"
|
||||
:title="dialog.title"
|
||||
<j-modal
|
||||
visible
|
||||
:title="dialogTitle"
|
||||
width="675px"
|
||||
@ok="dialog.handleOk"
|
||||
@ok="confirm"
|
||||
@cancel="emits('update:visible', false)"
|
||||
class="edit-dialog-container"
|
||||
:confirmLoading="dialog.loading"
|
||||
:confirmLoading="loading"
|
||||
cancelText="取消"
|
||||
okText="确定"
|
||||
>
|
||||
<a-form ref="formRef" :model="form.data" layout="vertical">
|
||||
<a-row :gutter="24" v-if="form.IsShow('add', 'edit')">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
<j-form ref="formRef" :model="form.data" layout="vertical">
|
||||
<j-row :gutter="24" v-if="form.IsShow('add', 'edit')">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
name="name"
|
||||
label="姓名"
|
||||
:rules="[
|
||||
|
|
@ -23,14 +24,14 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.data.name"
|
||||
placeholder="请输入姓名"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
name="username"
|
||||
label="用户名"
|
||||
:rules="[
|
||||
|
|
@ -41,17 +42,17 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.data.username"
|
||||
placeholder="请输入用户名"
|
||||
:disabled="dialog.type === 'edit'"
|
||||
:disabled="props.type === 'edit'"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="form.IsShow('add', 'reset')">
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-row v-if="form.IsShow('add', 'reset')">
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
name="password"
|
||||
label="密码"
|
||||
:rules="[
|
||||
|
|
@ -62,21 +63,16 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
<j-input-password
|
||||
v-model:value="form.data.password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
<!-- <Progress
|
||||
:percent="20"
|
||||
:steps="5"
|
||||
:strokeColor="{ from: '#ff5500', to: '#ff9300' }"
|
||||
/> -->
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row v-if="form.IsShow('add', 'reset')">
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-row v-if="form.IsShow('add', 'reset')">
|
||||
<j-col :span="24">
|
||||
<j-form-item
|
||||
name="confirmPassword"
|
||||
label="确认密码"
|
||||
:rules="[
|
||||
|
|
@ -87,30 +83,25 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
<j-input-password
|
||||
v-model:value="form.data.confirmPassword"
|
||||
placeholder="请再次输入密码"
|
||||
:maxlength="64"
|
||||
/>
|
||||
<!-- <Progress
|
||||
:percent="60"
|
||||
:steps="5"
|
||||
:strokeColor="{ from: '#ff5500', to: '#ff9300' }"
|
||||
/> -->
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<!-- 还差页面权限 -->
|
||||
<a-row :gutter="24" v-if="form.IsShow('add', 'edit')">
|
||||
<a-col :span="12">
|
||||
<a-form-item name="roleIdList" label="角色" class="flex">
|
||||
<a-select
|
||||
<j-row :gutter="24" v-if="form.IsShow('add', 'edit')">
|
||||
<j-col :span="12">
|
||||
<j-form-item name="roleIdList" label="角色" class="flex">
|
||||
<j-select
|
||||
v-model:value="form.data.roleIdList"
|
||||
mode="multiple"
|
||||
style="width: 100%"
|
||||
placeholder="请选择角色"
|
||||
:options="form.roleOptions"
|
||||
></a-select>
|
||||
></j-select>
|
||||
|
||||
<PermissionButton
|
||||
:uhasPermission="`${rolePermission}:update`"
|
||||
|
|
@ -119,11 +110,11 @@
|
|||
>
|
||||
<AIcon type="PlusOutlined" />
|
||||
</PermissionButton>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item name="orgIdList" label="组织" class="flex">
|
||||
<a-tree-select
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item name="orgIdList" label="组织" class="flex">
|
||||
<j-tree-select
|
||||
v-model:value="form.data.orgIdList"
|
||||
show-search
|
||||
style="width: 100%"
|
||||
|
|
@ -135,7 +126,7 @@
|
|||
<template #title="{ name }">
|
||||
{{ name }}
|
||||
</template>
|
||||
</a-tree-select>
|
||||
</j-tree-select>
|
||||
<PermissionButton
|
||||
:uhasPermission="`${deptPermission}:update`"
|
||||
@click="form.clickAddItem('roleIdList', 'Role')"
|
||||
|
|
@ -143,12 +134,12 @@
|
|||
>
|
||||
<AIcon type="PlusOutlined" />
|
||||
</PermissionButton>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24" v-if="form.IsShow('add', 'edit')">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
<j-row :gutter="24" v-if="form.IsShow('add', 'edit')">
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
name="telephone"
|
||||
label="手机号"
|
||||
:rules="[
|
||||
|
|
@ -158,15 +149,15 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.data.telephone"
|
||||
placeholder="请输入手机号"
|
||||
:maxlength="64"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
<j-col :span="12">
|
||||
<j-form-item
|
||||
name="email"
|
||||
label="邮箱"
|
||||
:rules="[
|
||||
|
|
@ -177,22 +168,21 @@
|
|||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
<j-input
|
||||
v-model:value="form.data.email"
|
||||
placeholder="请输入邮箱"
|
||||
:maxlength="64"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</j-form-item>
|
||||
</j-col>
|
||||
</j-row>
|
||||
</j-form>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import PermissionButton from '@/components/PermissionButton/index.vue';
|
||||
import { FormInstance, message } from 'ant-design-vue';
|
||||
// import Progress from './Progress.vue';
|
||||
import {
|
||||
validateField_api,
|
||||
getRoleList_api,
|
||||
|
|
@ -209,44 +199,35 @@ import { AxiosResponse } from 'axios';
|
|||
const deptPermission = 'system/Department';
|
||||
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({
|
||||
title: '',
|
||||
visible: false,
|
||||
type: '' as modalType,
|
||||
loading: false,
|
||||
|
||||
handleOk: () => {
|
||||
formRef.value?.validate().then(() => {
|
||||
form.submit(() => {
|
||||
dialog.changeVisible('', {} as any);
|
||||
const loading = ref(false);
|
||||
const dialogTitle = computed(() => {
|
||||
if (props.type === 'add') return '新增';
|
||||
else if (props.type === 'edit') return '编辑';
|
||||
else if (props.type === 'reset') return '重置密码';
|
||||
else return '';
|
||||
});
|
||||
const confirm = () => {
|
||||
loading.value = true;
|
||||
formRef.value
|
||||
?.validate()
|
||||
.then(() => form.submit())
|
||||
.then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功');
|
||||
emits('confirm');
|
||||
});
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 设置表单类型
|
||||
* @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,
|
||||
});
|
||||
emits('update:visible', false);
|
||||
}
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
};
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const form = reactive({
|
||||
data: {} as formType,
|
||||
|
|
@ -255,7 +236,7 @@ const form = reactive({
|
|||
checkUserName: (_rule: Rule, value: string): Promise<any> =>
|
||||
new Promise((resolve, reject) => {
|
||||
console.log(_rule);
|
||||
if (dialog.type === 'edit') return resolve('');
|
||||
if (props.type === 'edit') return resolve('');
|
||||
|
||||
if (!value) return reject('请输入用户名');
|
||||
else if (value.length > 64) return reject('最多可输入64个字符');
|
||||
|
|
@ -282,7 +263,6 @@ const form = reactive({
|
|||
? Promise.resolve()
|
||||
: Promise.reject('两次密码输入不一致');
|
||||
},
|
||||
//
|
||||
},
|
||||
|
||||
roleOptions: [] as optionType[],
|
||||
|
|
@ -291,11 +271,15 @@ const form = reactive({
|
|||
init: () => {
|
||||
form.getDepartmentList();
|
||||
form.getRoleList();
|
||||
form.getUserInfo();
|
||||
},
|
||||
getUserInfo: (id: string, type: modalType) => {
|
||||
if (type === 'add') form.data = {} as formType;
|
||||
else if (type === 'reset') form.data = { id } as formType;
|
||||
else if (type === 'edit') {
|
||||
getUserInfo: () => {
|
||||
const id = props.data.id || '';
|
||||
console.log(111);
|
||||
|
||||
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) => {
|
||||
form.data = {
|
||||
...(resp.result as formType),
|
||||
|
|
@ -312,20 +296,18 @@ const form = reactive({
|
|||
});
|
||||
}
|
||||
},
|
||||
submit: (cb?: Function) => {
|
||||
submit: (): Promise<any> => {
|
||||
let api: axiosFunType;
|
||||
let params = {};
|
||||
switch (dialog.type) {
|
||||
case 'add': {
|
||||
|
||||
if (props.type === 'add') {
|
||||
api = addUser_api;
|
||||
params = {
|
||||
user: form.data,
|
||||
orgIdList: form.data.orgIdList,
|
||||
roleIdList: form.data.roleIdList,
|
||||
};
|
||||
break;
|
||||
}
|
||||
case 'edit': {
|
||||
} else if (props.type === 'edit') {
|
||||
api = updateUser_api;
|
||||
params = {
|
||||
id: form.data.id,
|
||||
|
|
@ -333,25 +315,14 @@ const form = reactive({
|
|||
orgIdList: form.data.orgIdList,
|
||||
roleIdList: form.data.roleIdList,
|
||||
};
|
||||
break;
|
||||
}
|
||||
case 'reset': {
|
||||
} else if (props.type === 'reset') {
|
||||
api = updatePassword_api;
|
||||
params = {
|
||||
id: form.data.id,
|
||||
password: form.data.password,
|
||||
};
|
||||
break;
|
||||
}
|
||||
default:
|
||||
return;
|
||||
}
|
||||
console.log(params);
|
||||
|
||||
api(params).then(() => {
|
||||
message.success('操作成功');
|
||||
cb && cb();
|
||||
});
|
||||
} else return Promise.reject();
|
||||
return api(params);
|
||||
},
|
||||
getRoleList: () => {
|
||||
getRoleList_api().then((resp: any) => {
|
||||
|
|
@ -366,7 +337,7 @@ const form = reactive({
|
|||
form.departmentOptions = resp.result;
|
||||
});
|
||||
},
|
||||
IsShow: (...typeList: modalType[]) => typeList.includes(dialog.type),
|
||||
IsShow: (...typeList: modalType[]) => typeList.includes(props.type),
|
||||
clickAddItem: (prop: 'roleIdList' | 'orgIdList', target: string) => {
|
||||
const tab: any = window.open(`${origin}/#/system/${target}?save=true`);
|
||||
tab.onSaveSuccess = (value: string) => {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<page-container>
|
||||
<div class="user-container">
|
||||
<Search :columns="query.columns" @search="query.search" />
|
||||
<Search :columns="columns" @search="query.search" />
|
||||
|
||||
<j-pro-table
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:columns="columns"
|
||||
:request="getUserList_api"
|
||||
model="TABLE"
|
||||
:params="query.params.value"
|
||||
|
|
@ -14,12 +14,6 @@
|
|||
}"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<!-- <a-button
|
||||
type="primary"
|
||||
@click="table.openDialog('add')"
|
||||
style="margin-right: 10px"
|
||||
><AIcon type="PlusOutlined" />新增</a-button
|
||||
> -->
|
||||
<PermissionButton
|
||||
:uhasPermission="`${permission}:add`"
|
||||
type="primary"
|
||||
|
|
@ -42,15 +36,14 @@
|
|||
></BadgeStatus>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
|
||||
<j-space :size="16">
|
||||
<PermissionButton
|
||||
:uhasPermission="`${permission}:update`"
|
||||
type="link"
|
||||
:tooltip="{
|
||||
title: '编辑',
|
||||
}"
|
||||
@click="table.openDialog('edit')"
|
||||
@click="table.openDialog('edit', slotProps)"
|
||||
>
|
||||
<AIcon type="EditOutlined" />
|
||||
</PermissionButton>
|
||||
|
|
@ -96,13 +89,17 @@
|
|||
>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</PermissionButton>
|
||||
</a-space>
|
||||
</j-space>
|
||||
</template>
|
||||
</j-pro-table>
|
||||
|
||||
<div class="dialogs">
|
||||
<EditUserDialog ref="editDialogRef" @confirm="table.refresh" />
|
||||
</div>
|
||||
<EditUserDialog
|
||||
v-if="dialog.visible"
|
||||
:type="dialog.type"
|
||||
v-model:visible="dialog.visible"
|
||||
:data="dialog.selectItem"
|
||||
@confirm="table.refresh"
|
||||
/>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
|
|
@ -121,8 +118,7 @@ import { message } from 'ant-design-vue';
|
|||
|
||||
const permission = 'system/User';
|
||||
|
||||
const query = {
|
||||
columns: [
|
||||
const columns = [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
|
|
@ -162,6 +158,7 @@ const query = {
|
|||
});
|
||||
}),
|
||||
},
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
|
|
@ -182,60 +179,6 @@ const query = {
|
|||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
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({}),
|
||||
|
||||
search: (params: object) => {
|
||||
query.params.value = params;
|
||||
},
|
||||
};
|
||||
|
||||
const editDialogRef = ref(); // 弹窗实例
|
||||
const tableRef = ref<Record<string, any>>({}); // 表格实例
|
||||
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,
|
||||
},
|
||||
{
|
||||
|
|
@ -264,11 +207,21 @@ const table = {
|
|||
key: 'action',
|
||||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
];
|
||||
const query = {
|
||||
params: ref({}),
|
||||
search: (params: object) => {
|
||||
query.params.value = params;
|
||||
},
|
||||
};
|
||||
|
||||
const tableRef = ref<Record<string, any>>({}); // 表格实例
|
||||
const table = {
|
||||
// 打开编辑弹窗
|
||||
openDialog: (type: modalType, row?: any) => {
|
||||
editDialogRef.value.openDialog(type, row || {});
|
||||
dialog.selectItem = { ...(row || {}) };
|
||||
dialog.type = type;
|
||||
dialog.visible = true;
|
||||
},
|
||||
changeStatus: (row: any) => {
|
||||
const params = {
|
||||
|
|
@ -293,6 +246,12 @@ const table = {
|
|||
},
|
||||
};
|
||||
|
||||
const dialog = reactive({
|
||||
selectItem: {},
|
||||
visible: false,
|
||||
type: '' as modalType,
|
||||
});
|
||||
|
||||
type dictType = {
|
||||
id: string;
|
||||
name: string;
|
||||
|
|
|
|||
Loading…
Reference in New Issue