mirror of
https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git
synced 2026-11-08 01:06:59 +08:00
feat(user): user manage
This commit is contained in:
dataeaseShu
@@ -0,0 +1,11 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1617_1677)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.666748 7.99996C0.666748 12.0505 3.94956 15.3333 8.00008 15.3333C12.0506 15.3333 15.3334 12.0505 15.3334 7.99996C15.3334 3.94944 12.0506 0.666626 8.00008 0.666626C3.94956 0.666626 0.666748 3.94944 0.666748 7.99996Z" fill="#34C724"/>
|
||||
<path d="M10.7621 5.98431L7.22639 9.51998L5.49305 7.78665C5.43054 7.72416 5.34578 7.68905 5.25739 7.68905C5.169 7.68905 5.08423 7.72416 5.02172 7.78665L4.55072 8.25831C4.48823 8.32082 4.45312 8.40559 4.45312 8.49398C4.45312 8.58237 4.48823 8.66714 4.55072 8.72964L6.99072 11.17C7.05323 11.2325 7.138 11.2676 7.22639 11.2676C7.31477 11.2676 7.39954 11.2325 7.46205 11.17L11.7047 6.92731C11.7672 6.8648 11.8023 6.78003 11.8023 6.69165C11.8023 6.60326 11.7672 6.51849 11.7047 6.45598L11.2334 5.98431C11.1709 5.92182 11.0861 5.88672 10.9977 5.88672C10.9093 5.88672 10.8246 5.92182 10.7621 5.98431Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1617_1677">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.33317 6.66807V12.5416C9.33317 12.7027 9.20259 12.8333 9.0415 12.8333H8.45817C8.29709 12.8333 8.1665 12.7027 8.1665 12.5416V6.41663C8.1665 6.3309 8.185 6.24949 8.21821 6.17618C8.26253 6.06615 8.34187 5.96924 8.45144 5.90383L11.6665 3.98466V2.33329H2.33317V4.00501L5.45111 5.86895C5.6741 5.95092 5.83317 6.1652 5.83317 6.41663V10.5C5.83317 10.661 5.70259 10.7916 5.5415 10.7916H4.95817C4.79709 10.7916 4.6665 10.661 4.6665 10.5V6.68798L1.4429 4.76088C1.37054 4.71762 1.31141 4.66061 1.26688 4.59514C1.20538 4.54167 1.1665 4.46286 1.1665 4.37496V1.74996C1.1665 1.42779 1.42767 1.16663 1.74984 1.16663H12.2498C12.4109 1.16663 12.5568 1.23192 12.6623 1.33748C12.7679 1.44304 12.8332 1.58888 12.8332 1.74996V4.19593C12.8377 4.2369 12.8376 4.27801 12.8332 4.31851V4.37496C12.8332 4.4732 12.7846 4.5601 12.7102 4.61294C12.6698 4.66245 12.6203 4.70587 12.5624 4.74046L9.33317 6.66807Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.99992 0.333252C3.76574 0.333252 0.333252 3.76574 0.333252 7.99992C0.333252 12.2341 3.76574 15.6666 7.99992 15.6666C12.2341 15.6666 15.6666 12.2341 15.6666 7.99992C15.6666 3.76574 12.2341 0.333252 7.99992 0.333252ZM12.6514 11.2374L4.76246 3.34847C5.68019 2.70844 6.79587 2.33325 7.99992 2.33325C11.1295 2.33325 13.6666 4.87031 13.6666 7.99992C13.6666 9.20397 13.2914 10.3196 12.6514 11.2374ZM2.33325 7.99992C2.33325 6.79599 2.70837 5.68041 3.34829 4.76272L11.2371 12.6516C10.3194 13.2915 9.20385 13.6666 7.99992 13.6666C4.87031 13.6666 2.33325 11.1295 2.33325 7.99992Z" fill="#8F959E"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 701 B |
@@ -0,0 +1,4 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.11117 3.11117V12.8889H5.33339V14.2223H2.66672C2.21895 14.2223 1.77783 13.8036 1.77783 13.3334V2.66672C1.77783 2.19651 2.21895 1.77783 2.66672 1.77783H13.3334C13.7812 1.77783 14.2223 2.19651 14.2223 2.66672V13.3334C14.2223 13.8036 13.7812 14.2223 13.3334 14.2223H10.6667V12.8889H12.8889V3.11117H3.11117Z" fill="#1F2329"/>
|
||||
<path d="M7.33339 13.7778C7.33339 14.0233 7.53237 14.2223 7.77783 14.2223H8.22228C8.46774 14.2223 8.66672 14.0233 8.66672 13.7778V7.14731L10.5237 9.00427C10.6973 9.17784 10.9787 9.17784 11.1522 9.00427L11.4665 8.69001C11.6401 8.51644 11.6401 8.23503 11.4665 8.06147L8.3238 4.91877C8.28396 4.87893 8.23844 4.84823 8.18984 4.82668C8.02382 4.74494 7.81738 4.77314 7.67924 4.91128L4.53655 8.05397C4.36298 8.22754 4.36298 8.50895 4.53655 8.68251L4.85082 8.99678C5.02438 9.17035 5.30579 9.17035 5.47936 8.99678L7.33339 7.14275V13.7778Z" fill="#1F2329"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 984 B |
@@ -0,0 +1,12 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1515_53088)">
|
||||
<path d="M7.99984 15.3334C12.0499 15.3334 15.3332 12.0502 15.3332 8.00008C15.3332 3.94999 12.0499 0.666748 7.99984 0.666748C3.94975 0.666748 0.666504 3.94999 0.666504 8.00008C0.666504 12.0502 3.94975 15.3334 7.99984 15.3334Z" fill="#1CBA90"/>
|
||||
<path d="M7.53927 5.64121C7.57971 5.65796 7.62306 5.66659 7.66683 5.66659H8.3335C8.37727 5.66659 8.42062 5.65796 8.46106 5.64121C8.5015 5.62446 8.53825 5.59991 8.5692 5.56895C8.60015 5.538 8.62471 5.50126 8.64146 5.46081C8.65821 5.42037 8.66683 5.37703 8.66683 5.33325V4.66658C8.66683 4.62281 8.65821 4.57947 8.64146 4.53902C8.62471 4.49858 8.60015 4.46184 8.5692 4.43088C8.53825 4.39993 8.5015 4.37538 8.46106 4.35863C8.42062 4.34187 8.37727 4.33325 8.3335 4.33325H7.66683C7.62306 4.33325 7.57971 4.34187 7.53927 4.35863C7.49883 4.37538 7.46208 4.39993 7.43113 4.43088C7.40017 4.46184 7.37562 4.49858 7.35887 4.53902C7.34212 4.57947 7.3335 4.62281 7.3335 4.66658V5.33325C7.3335 5.37703 7.34212 5.42037 7.35887 5.46081C7.37562 5.50126 7.40017 5.538 7.43113 5.56895C7.46208 5.59991 7.49883 5.62446 7.53927 5.64121Z" fill="white"/>
|
||||
<path d="M7.3335 7.66659V10.3333H6.66683C6.62306 10.3333 6.57971 10.3419 6.53927 10.3586C6.49883 10.3754 6.46208 10.3999 6.43113 10.4309C6.40017 10.4618 6.37562 10.4986 6.35887 10.539C6.34212 10.5795 6.3335 10.6228 6.3335 10.6666V11.3333C6.3335 11.377 6.34212 11.4204 6.35887 11.4608C6.37562 11.5013 6.40017 11.538 6.43113 11.569C6.46208 11.5999 6.49883 11.6245 6.53927 11.6412C6.57971 11.658 6.62306 11.6666 6.66683 11.6666H9.3335C9.37727 11.6666 9.42062 11.658 9.46106 11.6412C9.5015 11.6245 9.53825 11.5999 9.5692 11.569C9.60015 11.538 9.62471 11.5013 9.64146 11.4608C9.65821 11.4204 9.66683 11.377 9.66683 11.3333V10.6666C9.66683 10.6228 9.65821 10.5795 9.64146 10.539C9.62471 10.4986 9.60015 10.4618 9.5692 10.4309C9.53825 10.3999 9.5015 10.3754 9.46106 10.3586C9.42062 10.3419 9.37727 10.3333 9.3335 10.3333H8.66683V6.66659C8.66696 6.62277 8.65843 6.57937 8.64173 6.53887C8.62502 6.49837 8.60047 6.46157 8.56949 6.43059C8.53851 6.39961 8.50172 6.37506 8.46121 6.35836C8.42071 6.34165 8.37731 6.33312 8.3335 6.33325H7.00016C6.95639 6.33325 6.91304 6.34187 6.8726 6.35863C6.83216 6.37538 6.79541 6.39993 6.76446 6.43088C6.73351 6.46184 6.70895 6.49858 6.6922 6.53902C6.67545 6.57947 6.66683 6.62281 6.66683 6.66659V7.33325C6.66683 7.37703 6.67545 7.42037 6.6922 7.46081C6.70895 7.50126 6.73351 7.538 6.76446 7.56895C6.79541 7.59991 6.83216 7.62446 6.8726 7.64121C6.91304 7.65796 6.95639 7.66659 7.00016 7.66659H7.3335Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1515_53088">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.25 9.75H6.75C4.67893 9.75 2.25 11.1986 2.25 13.8V15.825C2.25 16.1978 2.58579 16.5 3 16.5H15C15.4142 16.5 15.75 16.1978 15.75 15.825V13.8C15.75 11.1964 13.3211 9.75 11.25 9.75Z" fill="#1CBA90"/>
|
||||
<path d="M5.25 5.25C5.25 7.32107 6.92893 9 9 9C11.0711 9 12.75 7.32107 12.75 5.25C12.75 3.17893 11.0711 1.5 9 1.5C6.92893 1.5 5.25 3.17893 5.25 5.25Z" fill="#1CBA90"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 478 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 12.3333V14C14 14.3682 13.7015 14.6667 13.3333 14.6667H2.66667C2.29848 14.6667 2 14.3682 2 14V12.3333C2 12.1492 2.14924 12 2.33333 12H3C3.18409 12 3.33333 12.1492 3.33333 12.3333V13.3333H12.6667V12.3333C12.6667 12.1492 12.8159 12 13 12H13.6667C13.8508 12 14 12.1492 14 12.3333ZM8.66667 4.33329L10.6736 6.34027C10.8038 6.47045 11.0149 6.47045 11.1451 6.34027L11.6165 5.86887C11.7466 5.73869 11.7466 5.52764 11.6165 5.39746L8.31663 2.09763C8.25154 2.03254 8.16623 2 8.08092 2C7.99562 2 7.91031 2.03254 7.84522 2.09763L4.54539 5.39746C4.41521 5.52764 4.41521 5.73869 4.54539 5.86887L5.01679 6.34027C5.14697 6.47045 5.35802 6.47045 5.4882 6.34027L7.33334 4.49513V11.6904C7.33334 11.8745 7.48257 12.0238 7.66667 12.0238H8.33334C8.51743 12.0238 8.66667 11.8745 8.66667 11.6904V4.33329Z" fill="#2B2F36"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 913 B |
@@ -149,6 +149,7 @@ const toWorkspace = () => {
|
||||
flex: 1;
|
||||
padding: 8px 8px 8px 0;
|
||||
max-height: 100vh;
|
||||
overflow-x: auto;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
|
||||
@@ -4,10 +4,12 @@ import { ElMenuItem, ElSubMenu, ElIcon } from 'element-plus-secondary'
|
||||
|
||||
import model from '@/assets/svg/icon_dataset_filled.svg'
|
||||
import ds from '@/assets/svg/ds.svg'
|
||||
import user from '@/assets/svg/icon_member_filled.svg'
|
||||
|
||||
const iconMap = {
|
||||
icon_ai: model,
|
||||
ds,
|
||||
user,
|
||||
} as { [key: string]: any }
|
||||
|
||||
const titleWithIcon = (props: any) => {
|
||||
|
||||
@@ -195,6 +195,34 @@
|
||||
"parameter_type": "Parameter type",
|
||||
"verification_successful": "Verification successful"
|
||||
},
|
||||
"user": {
|
||||
"workspace": "Workspace",
|
||||
"creation_time": "Creation time",
|
||||
"user_source": "User source",
|
||||
"phone_number": "Phone number",
|
||||
"email": "Email",
|
||||
"user_status": "User status",
|
||||
"account": "Account",
|
||||
"name": "Name",
|
||||
"selected_2_items": "Selected {msg} items",
|
||||
"name_account_email": "Search name, account, email",
|
||||
"user_management": "User management",
|
||||
"filter": "Filter",
|
||||
"batch_import": "Batch import",
|
||||
"add_users": "Add users",
|
||||
"selected_2_users": "Do you want to delete the selected 2 users?",
|
||||
"filter_conditions": "Filter conditions",
|
||||
"enable": "Enable",
|
||||
"disable": "Disable",
|
||||
"local_creation": "Local creation",
|
||||
"feishu": "Feishu",
|
||||
"dingtalk": "DingTalk",
|
||||
"wechat_for_business": "WeChat for business",
|
||||
"1240_results": "{msg} results",
|
||||
"clear_conditions": "Clear conditions",
|
||||
"disabled": "Disabled",
|
||||
"enabled": "Enabled"
|
||||
},
|
||||
"chat": {
|
||||
"chart_type": {
|
||||
"table": "Table",
|
||||
|
||||
@@ -198,6 +198,34 @@
|
||||
"del_default_warn": "该模型为系统默认模型，请先设置其他模型为系统默认模型，再删除此模型。",
|
||||
"del_warn_tip": "是否删除模型: {msg}？"
|
||||
},
|
||||
"user": {
|
||||
"workspace": "工作空间",
|
||||
"creation_time": "创建时间",
|
||||
"user_source": "用户来源",
|
||||
"phone_number": "手机号",
|
||||
"email": "邮箱",
|
||||
"user_status": "用户状态",
|
||||
"account": "账号",
|
||||
"name": "姓名",
|
||||
"selected_2_items": "已选 {msg} 条",
|
||||
"name_account_email": "搜索姓名、账号、邮箱",
|
||||
"user_management": "用户管理",
|
||||
"filter": "筛选",
|
||||
"batch_import": "批量导入",
|
||||
"add_users": "添加用户",
|
||||
"selected_2_users": "是否删除选中的 {msg} 个用户？",
|
||||
"filter_conditions": "筛选条件",
|
||||
"enable": "启用",
|
||||
"disable": "禁用",
|
||||
"local_creation": "本地创建",
|
||||
"feishu": "飞书",
|
||||
"dingtalk": "钉钉",
|
||||
"wechat_for_business": "企业微信",
|
||||
"1240_results": "{msg} 个结果 ",
|
||||
"clear_conditions": "清空条件",
|
||||
"disabled": "已禁用",
|
||||
"enabled": "已启用"
|
||||
},
|
||||
"chat": {
|
||||
"chart_type": {
|
||||
"table": "明细表",
|
||||
@@ -234,4 +262,4 @@
|
||||
"back_community": "还原至社区版",
|
||||
"confirm_tips": "确定还原至社区版？"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,7 @@ import DashboardEditor from '@/views/dashboard/editor/index.vue'
|
||||
import DashboardPreview from '@//views/dashboard/preview/SQPreviewSingle.vue'
|
||||
import Dashboard from '@/views/dashboard/index.vue'
|
||||
import Model from '@/views/system/model/Model.vue'
|
||||
// import User from "@/views/system/user/index.vue";
|
||||
import User from '@/views/system/user/User.vue'
|
||||
import { watchRouter } from './watch'
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
@@ -126,6 +126,12 @@ const router = createRouter({
|
||||
component: Model,
|
||||
meta: { title: 'AI Model Configuration', icon: 'icon_ai' },
|
||||
},
|
||||
{
|
||||
path: 'user',
|
||||
name: 'user',
|
||||
component: User,
|
||||
meta: { title: '用户管理', icon: 'user' },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
--ed-color-primary: #1cba90 !important;
|
||||
--ed-border-radius-base: 6px !important;
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -149,3 +150,7 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ed-input__prefix-inner .ed-icon {
|
||||
color: #646a73;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,510 @@
|
||||
<template>
|
||||
<div class="sqlbot-table-container professional-container">
|
||||
<div class="tool-left">
|
||||
<span class="page-title">{{ $t('user.user_management') }}</span>
|
||||
<div class="search-bar">
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
style="width: 240px; margin-right: 12px"
|
||||
:placeholder="$t('user.name_account_email')"
|
||||
@keyup.enter="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<icon_searchOutline_outlined />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
<el-button secondary>
|
||||
<template #icon>
|
||||
<iconFilter></iconFilter>
|
||||
</template>
|
||||
{{ $t('user.filter') }}
|
||||
</el-button>
|
||||
<el-button secondary>
|
||||
<template #icon>
|
||||
<ccmUpload></ccmUpload>
|
||||
</template>
|
||||
{{ $t('user.batch_import') }}
|
||||
</el-button>
|
||||
<el-button type="primary">
|
||||
<template #icon>
|
||||
<icon_add_outlined></icon_add_outlined>
|
||||
</template>
|
||||
{{ $t('user.add_users') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sqlbot-table">
|
||||
<el-table
|
||||
ref="multipleTableRef"
|
||||
@selection-change="handleSelectionChange"
|
||||
:data="state.tableData"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="name" :label="$t('user.name')" width="280" />
|
||||
<el-table-column prop="account" :label="$t('user.account')" width="280" />
|
||||
<el-table-column prop="status" :label="$t('user.user_status')" width="180">
|
||||
<template #default="scope">
|
||||
<div class="user-status-container" :class="[scope.row.status ? 'active' : 'disabled']">
|
||||
<el-icon size="16">
|
||||
<SuccessFilled v-if="scope.row.status" />
|
||||
<CircleCloseFilled v-else />
|
||||
</el-icon>
|
||||
<span>{{ $t(`user.${scope.row.status ? 'enabled' : 'disabled'}`) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="email" :label="$t('user.email')" width="280" />
|
||||
<el-table-column prop="phone" :label="$t('user.phone_number')" width="280" />
|
||||
<el-table-column prop="user_source" :label="$t('user.user_source')" width="280" />
|
||||
<el-table-column prop="workspace" :label="$t('user.workspace')" width="280" />
|
||||
|
||||
<el-table-column prop="create_time" width="180" sortable :label="$t('user.creation_time')">
|
||||
<template #default="scope">
|
||||
<span>{{ formatTimestamp(scope.row.create_time) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" width="150" :label="$t('ds.actions')">
|
||||
<template #default="scope">
|
||||
<div class="table-operate">
|
||||
<el-switch v-model="scope.row.checked" size="small" />
|
||||
<div class="line"></div>
|
||||
<el-tooltip
|
||||
:offset="14"
|
||||
effect="dark"
|
||||
:content="$t('datasource.edit')"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon class="action-btn" size="16" @click="editHandler(scope.row.id)">
|
||||
<IconOpeEdit></IconOpeEdit>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
:offset="14"
|
||||
effect="dark"
|
||||
:content="$t('datasource.edit')"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon class="action-btn" size="16" @click="editHandler(scope.row.id)">
|
||||
<IconLock></IconLock>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
|
||||
<el-tooltip
|
||||
:offset="14"
|
||||
effect="dark"
|
||||
:content="$t('dashboard.delete')"
|
||||
placement="top"
|
||||
>
|
||||
<el-icon class="action-btn" size="16" @click="deleteHandler(scope.row.id)">
|
||||
<IconOpeDelete></IconOpeDelete>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
v-model:current-page="state.pageInfo.currentPage"
|
||||
v-model:page-size="state.pageInfo.pageSize"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
:background="true"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.pageInfo.total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-select">
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
@change="handleCheckAllChange"
|
||||
>
|
||||
{{ $t('datasource.select_all') }}
|
||||
</el-checkbox>
|
||||
|
||||
<button class="danger-button">{{ $t('dashboard.delete') }}</button>
|
||||
|
||||
<span class="selected">{{
|
||||
$t('user.selected_2_items', { msg: multipleSelectionAll.length })
|
||||
}}</span>
|
||||
|
||||
<el-button text>
|
||||
{{ $t('common.cancel') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogFormVisible"
|
||||
title="Add Terminology"
|
||||
destroy-on-close
|
||||
width="500"
|
||||
class="sqlbot-dialog"
|
||||
@close="onFormClose"
|
||||
>
|
||||
<el-form
|
||||
ref="termFormRef"
|
||||
:model="state.form"
|
||||
label-width="180px"
|
||||
label-position="top"
|
||||
class="sqlbot-form"
|
||||
size="large"
|
||||
>
|
||||
<el-form-item label="Account">
|
||||
<el-input v-model="state.form.term" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Definition">
|
||||
<el-input v-model="state.form.definition" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Domain">
|
||||
<el-select v-model="state.form.domain" placeholder="Please select a domain">
|
||||
<el-option label="domain1" value="domain1" />
|
||||
<el-option label="domain2" value="domain2" />
|
||||
<el-option label="domain3" value="domain3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeForm">Cancel</el-button>
|
||||
<el-button type="primary" @click="saveHandler"> save </el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, nextTick } from 'vue'
|
||||
/* import IconOpeUpload from '@/assets/svg/operate/ope-upload.svg';
|
||||
import IconOpeDownload from '@/assets/svg/operate/ope-download.svg';
|
||||
import IconOpeAdd from '@/assets/svg/operate/ope-add.svg'; */
|
||||
import SuccessFilled from '@/assets/svg/gou_icon.svg'
|
||||
import CircleCloseFilled from '@/assets/svg/icon_ban_filled.svg'
|
||||
import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
|
||||
|
||||
import IconLock from '@/assets/svg/icon-key_outlined.svg'
|
||||
import IconOpeEdit from '@/assets/svg/icon_edit_outlined.svg'
|
||||
import IconOpeDelete from '@/assets/svg/icon_delete.svg'
|
||||
import iconFilter from '@/assets/svg/icon-filter_outlined.svg'
|
||||
import ccmUpload from '@/assets/svg/icon_ccm-upload_outlined.svg'
|
||||
import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
|
||||
import { userApi } from '@/api/auth'
|
||||
import { formatTimestamp } from '@/utils/date'
|
||||
|
||||
const keyword = ref('')
|
||||
const dialogFormVisible = ref(false)
|
||||
const termFormRef = ref()
|
||||
const checkAll = ref(false)
|
||||
const isIndeterminate = ref(true)
|
||||
const state = reactive({
|
||||
tableData: [],
|
||||
form: {
|
||||
id: '',
|
||||
term: '',
|
||||
definition: '',
|
||||
domain: '',
|
||||
},
|
||||
pageInfo: {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
},
|
||||
})
|
||||
|
||||
const multipleTableRef = ref()
|
||||
const multipleSelectionAll = ref<any[]>([])
|
||||
|
||||
const handleSelectionChange = (val: any[]) => {
|
||||
const ids = state.tableData.map((ele: any) => ele.id)
|
||||
multipleSelectionAll.value = [
|
||||
...multipleSelectionAll.value.filter((ele) => !ids.includes(ele.id)),
|
||||
...val,
|
||||
]
|
||||
isIndeterminate.value = !(val.length === 0 || val.length === state.tableData.length)
|
||||
checkAll.value = val.length === state.tableData.length
|
||||
}
|
||||
const handleCheckAllChange = (val: any) => {
|
||||
isIndeterminate.value = false
|
||||
handleSelectionChange(val ? state.tableData : [])
|
||||
val && handleToggleRowSelection()
|
||||
!val && multipleTableRef.value.clearSelection()
|
||||
}
|
||||
|
||||
const handleToggleRowSelection = (check: boolean = true) => {
|
||||
let i = 0
|
||||
const ids = multipleSelectionAll.value.map((ele: any) => ele.id)
|
||||
for (const key in state.tableData) {
|
||||
if (ids.includes((state.tableData[key] as any).id)) {
|
||||
i += 1
|
||||
multipleTableRef.value.toggleRowSelection(state.tableData[key], check)
|
||||
}
|
||||
}
|
||||
checkAll.value = i === state.tableData.length
|
||||
isIndeterminate.value = !(i === 0 || i === state.tableData.length)
|
||||
}
|
||||
const handleSearch = (e: any) => {
|
||||
console.log('search', e)
|
||||
}
|
||||
const editHandler = (id: any) => {
|
||||
console.log('editHandler', id)
|
||||
/* userApi.query(id).then((res: any) => {
|
||||
console.log('term detail', res)
|
||||
state.form = res
|
||||
dialogFormVisible.value = true
|
||||
}) */
|
||||
}
|
||||
const deleteHandler = (id: any) => {
|
||||
console.log('deleteHandler', id)
|
||||
ElMessageBox.confirm('Are you sure to delete?', 'Warning', {
|
||||
confirmButtonText: 'OK',
|
||||
cancelButtonText: 'Cancel',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
/* userApi.delete(id).then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: 'Delete completed',
|
||||
})
|
||||
search()
|
||||
}) */
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: 'Delete canceled',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/* const openDialog = () => {
|
||||
dialogFormVisible.value = true
|
||||
} */
|
||||
const resetForm = () => {
|
||||
if (!termFormRef.value) return
|
||||
Object.keys(state.form).forEach((key) => {
|
||||
state.form[key as keyof typeof state.form] = ''
|
||||
})
|
||||
}
|
||||
|
||||
const closeForm = () => {
|
||||
dialogFormVisible.value = false
|
||||
}
|
||||
const onFormClose = () => {
|
||||
resetForm()
|
||||
dialogFormVisible.value = false
|
||||
}
|
||||
|
||||
const search = () => {
|
||||
userApi.pager(state.pageInfo.currentPage, state.pageInfo.pageSize).then((res: any) => {
|
||||
state.tableData = res.items
|
||||
state.pageInfo.total = res.total
|
||||
|
||||
nextTick(() => {
|
||||
handleToggleRowSelection()
|
||||
})
|
||||
})
|
||||
}
|
||||
const addTerm = () => {
|
||||
userApi.add(state.form).then(() => {
|
||||
dialogFormVisible.value = false
|
||||
search()
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: 'Add completed',
|
||||
})
|
||||
})
|
||||
}
|
||||
const editTerm = () => {
|
||||
userApi.edit(state.form).then((res: any) => {
|
||||
console.log('edit term', res)
|
||||
dialogFormVisible.value = false
|
||||
search()
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: 'Edit completed',
|
||||
})
|
||||
})
|
||||
}
|
||||
const saveHandler = () => {
|
||||
if (state.form.id) {
|
||||
editTerm()
|
||||
} else {
|
||||
addTerm()
|
||||
}
|
||||
}
|
||||
const handleSizeChange = (val: number) => {
|
||||
state.pageInfo.pageSize = val
|
||||
search()
|
||||
}
|
||||
const handleCurrentChange = (val: number) => {
|
||||
state.pageInfo.currentPage = val
|
||||
search()
|
||||
}
|
||||
onMounted(() => {
|
||||
search()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sqlbot-table-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.bottom-select {
|
||||
position: absolute;
|
||||
height: 64px;
|
||||
width: calc(100% + 48px);
|
||||
left: -24px;
|
||||
bottom: 0;
|
||||
border-top: 1px solid #1f232926;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 24px;
|
||||
|
||||
.danger-button {
|
||||
border: 1px solid var(--ed-color-danger);
|
||||
color: var(--ed-color-danger);
|
||||
border-radius: var(--ed-border-radius-base);
|
||||
min-width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin: 0 16px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.selected {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #646a73;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
.tool-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.page-title {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.sqlbot-table {
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 200px);
|
||||
:deep(.ed-table) {
|
||||
--el-table-header-bg-color: #f5f7fa;
|
||||
--el-table-border-color: #ebeef5;
|
||||
--el-table-header-text-color: #606266;
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
td {
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
.table-operate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
.ed-icon + .ed-icon {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 0 10px 0 12px;
|
||||
height: 16px;
|
||||
width: 1px;
|
||||
background-color: #1f232926;
|
||||
}
|
||||
|
||||
.ed-icon {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: #646a73;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
background-color: #1f23291a;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sqlbot-form {
|
||||
width: 100%;
|
||||
.ed-form-item {
|
||||
margin-bottom: 16px;
|
||||
text-align: left;
|
||||
label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sqlbot-dialog {
|
||||
width: 500px;
|
||||
|
||||
:deep(.ed-dialog__header) {
|
||||
text-align: left !important;
|
||||
font-size: 16px;
|
||||
background-color: #f5f7fa;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
color: #606266;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-status-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
|
||||
.ed-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user