add share address book
This commit is contained in:
ljw
@@ -52,4 +52,3 @@ export function shareByWebClient (data) {
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function list (params) {
|
||||
return request({
|
||||
url: '/address_book_collection/list',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
export function detail (id) {
|
||||
return request({
|
||||
url: `/address_book_collection/detail/${id}`,
|
||||
})
|
||||
}
|
||||
|
||||
export function create (data) {
|
||||
return request({
|
||||
url: '/address_book_collection/create',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function update (data) {
|
||||
return request({
|
||||
url: '/address_book_collection/update',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function remove (data) {
|
||||
return request({
|
||||
url: '/address_book_collection/delete',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function list (params) {
|
||||
return request({
|
||||
url: '/address_book_collection_rule/list',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
export function detail (id) {
|
||||
return request({
|
||||
url: `/address_book_collection_rule/detail/${id}`,
|
||||
})
|
||||
}
|
||||
|
||||
export function create (data) {
|
||||
return request({
|
||||
url: '/address_book_collection_rule/create',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function update (data) {
|
||||
return request({
|
||||
url: '/address_book_collection_rule/update',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function remove (data) {
|
||||
return request({
|
||||
url: '/address_book_collection_rule/delete',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function batchCreate (data) {
|
||||
return request({
|
||||
url: '/address_book_collection_rule/batchCreate',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
@@ -74,3 +74,11 @@ export function myOauth () {
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
|
||||
export function groupUsers (data) {
|
||||
return request({
|
||||
url: '/user/groupUsers',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path v-if="props.name==='windows'" :fill="props.color||'currentColor'" d="m0 93.7 183.6-25.3v177.4H0V93.7zm0 324.6 183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z"/>
|
||||
<path v-if="props.name==='android'" :fill="props.color||'currentColor'"
|
||||
d="M77 179a33 33 0 0 0-25 10 33 33 0 0 0-9 24v143a33 33 0 0 0 10 24 33 33 0 0 0 24 10c9 0 17-3 24-10a33 33 0 0 0 10-24V213c0-9-4-17-10-24a33 33 0 0 0-24-10zM352 51l24-44c1-3 1-5-2-6-3-2-5-1-7 2l-24 43a163 163 0 0 0-133 0L186 3c-2-3-4-4-7-2-2 1-3 3-1 6l23 44c-24 12-43 29-57 51a129 129 0 0 0-21 72h307c0-26-7-50-21-72a146 146 0 0 0-57-51zm-136 63a13 13 0 0 1-10 4 13 13 0 0 1-12-13c0-4 1-7 3-9 3-3 6-4 9-4s7 1 10 4c2 2 3 5 3 9s-1 7-3 9zm140 0a12 12 0 0 1-9 4c-4 0-7-1-9-4a12 12 0 0 1-4-9c0-4 1-7 4-9 2-3 5-4 9-4a12 12 0 0 1 9 4c2 2 3 5 3 9s-1 7-3 9zM124 407c0 10 4 19 11 26s15 10 26 10h24v76c0 9 4 17 10 24s15 10 24 10c10 0 18-3 25-10s10-15 10-24v-76h45v76c0 9 4 17 10 24s15 10 25 10c9 0 17-3 24-10s10-15 10-24v-76h25a35 35 0 0 0 25-10c7-7 11-16 11-26V185H124v222zm352-228a33 33 0 0 0-24 10 33 33 0 0 0-10 24v143a34 34 0 0 0 34 34c10 0 18-3 25-10s10-15 10-24V213c0-9-4-17-10-24a33 33 0 0 0-25-10z"/>
|
||||
|
||||
<path v-if="props.name==='linux'" :fill="props.color||'currentColor'"
|
||||
d="M220.499 479.926c-74.052 0-136.663-53.729-147.853-118.13-.591-3.404-3.789-5.476-7.137-4.626l-50.683 12.879C3.107 373.027-2.913 366.27 1.39 354.971q26.627-69.911 87.656-131.908c30.862-31.352 41.876-59.308 43.591-106.328 1.715-47.02 40.427-84.661 87.862-84.661 47.435 0 86.149 37.641 87.864 84.661 1.715 47.02 12.729 74.976 43.591 106.328q61.027 61.997 87.656 131.908c4.303 11.299-1.717 18.056-13.436 15.078l-50.683-12.879c-3.348-.85-6.546 1.222-7.137 4.626-11.192 64.401-73.801 118.13-147.855 118.13Zm0-251.676c-1.591.049-3.181-.338-4.393-1.113l-50.912-32.578c-6.324-4.004-7.244-11.629-2.051-17.02 5.194-5.388 29.297-12.27 57.356-12.27 28.061 0 52.162 6.882 57.356 12.27 5.193 5.391 4.275 13.016-2.049 17.02l-50.912 32.578c-1.214.775-2.804 1.162-4.395 1.113Zm-44.627-7.73c-38.185 15.381-67.218 55.636-67.218 102.62 0 61.729 50.116 111.847 111.845 111.847s111.845-50.118 111.845-111.847c0-46.986-29.035-87.243-67.225-102.622-1.601-.647-4.082-.416-5.538.516l-27.383 17.52c-.03.021-.062.043-.083.064a20.762 20.762 0 0 1-5.705 2.473c-1.848.49-3.755.73-5.676.73h-.177l-.062-.011-.054.011h-.175c-1.921 0-3.83-.24-5.686-.73a20.7 20.7 0 0 1-5.697-2.473 3.83 3.83 0 0 0-.094-.064l-27.376-17.516c-1.456-.931-3.937-1.165-5.541-.518Z"/>
|
||||
<path v-if="props.name==='mac'" :fill="props.color||'currentColor'"
|
||||
d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
|
||||
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
values: ['windows', 'android', 'mac', 'linux'],
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
+12
-1
@@ -54,6 +54,12 @@ export const asyncRoutes = [
|
||||
meta: { title: 'Info', icon: 'User' /*keepAlive: true*/ },
|
||||
component: () => import('@/views/my/info.vue'),
|
||||
},
|
||||
{
|
||||
path: 'address_book_collection',
|
||||
name: 'MyAddressBookCollection',
|
||||
meta: { title: 'AddressBookName', icon: 'Collection' /*keepAlive: true*/ },
|
||||
component: () => import('@/views/my/address_book/collection.vue'),
|
||||
},
|
||||
{
|
||||
path: 'address_book',
|
||||
name: 'MyAddressBookList',
|
||||
@@ -105,7 +111,12 @@ export const asyncRoutes = [
|
||||
meta: { title: 'UserEdit', hide: true },
|
||||
component: () => import('@/views/user/edit.vue'),
|
||||
},
|
||||
|
||||
{
|
||||
path: 'addressBookName',
|
||||
name: 'UserAddressBookName',
|
||||
meta: { title: 'AddressBookNameManage', icon: 'Collection' /*keepAlive: true*/ },
|
||||
component: () => import('@/views/address_book/collection.vue'),
|
||||
},
|
||||
{
|
||||
path: 'addressBook',
|
||||
name: 'UserAddressBook',
|
||||
|
||||
@@ -8,6 +8,7 @@ $sideBarWidth: 210px;
|
||||
--basicBlack: #000000;
|
||||
--basicWhite: #ffffff;
|
||||
--primaryColor: #409eff;
|
||||
--tag-bg-color: #efefef;
|
||||
}
|
||||
|
||||
.list-body {
|
||||
@@ -37,7 +38,10 @@ $sideBarWidth: 210px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
html.dark {
|
||||
/* 自定义深色背景颜色 */
|
||||
//--el-bg-color: #626aef;
|
||||
--tag-bg-color: #24252b;
|
||||
--basicBlack: #fff;
|
||||
}
|
||||
|
||||
@@ -399,5 +399,41 @@
|
||||
},
|
||||
"ToLocal": {
|
||||
"One": "To Local"
|
||||
},
|
||||
"AddressBookName": {
|
||||
"One": "Address Book Name"
|
||||
},
|
||||
"AddRule": {
|
||||
"One": "Add Rule"
|
||||
},
|
||||
"ShareRules": {
|
||||
"One": "Share Rules"
|
||||
},
|
||||
"Rule": {
|
||||
"One": "Rule"
|
||||
},
|
||||
"Read": {
|
||||
"One": "Read"
|
||||
},
|
||||
"ReadWrite": {
|
||||
"One": "Read And Write"
|
||||
},
|
||||
"FullControl": {
|
||||
"One": "Full Control"
|
||||
},
|
||||
"ShareTo": {
|
||||
"One": "Share To"
|
||||
},
|
||||
"MyAddressBook": {
|
||||
"One": "My Address Book"
|
||||
},
|
||||
"AddressBook": {
|
||||
"One": "Address Book"
|
||||
},
|
||||
"AddressBookNameManage": {
|
||||
"One": "Address Book Names"
|
||||
},
|
||||
"MyAddressBookTips": {
|
||||
"One": "\"My Address Book\" is the default of the system, cannot be modified or deleted"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -385,5 +385,41 @@
|
||||
},
|
||||
"ToLocal": {
|
||||
"One": "로컬로"
|
||||
},
|
||||
"AddressBookName": {
|
||||
"One": "주소록 이름"
|
||||
},
|
||||
"AddRule": {
|
||||
"One": "규칙 추가"
|
||||
},
|
||||
"ShareRules": {
|
||||
"One": "공유 규칙"
|
||||
},
|
||||
"Rule": {
|
||||
"One": "규칙"
|
||||
},
|
||||
"Read": {
|
||||
"One": "읽기"
|
||||
},
|
||||
"ReadWrite": {
|
||||
"One": "읽기/쓰기"
|
||||
},
|
||||
"FullControl": {
|
||||
"One": "전체 제어"
|
||||
},
|
||||
"ShareTo": {
|
||||
"One": "공유 대상"
|
||||
},
|
||||
"MyAddressBook": {
|
||||
"One": "내 주소록"
|
||||
},
|
||||
"AddressBook": {
|
||||
"One": "주소록"
|
||||
},
|
||||
"AddressBookNameManage": {
|
||||
"One": "주소록 이름 관리"
|
||||
},
|
||||
"MyAddressBookTips": {
|
||||
"One": "\"내 주소록\"은 시스템의 기본값이며 수정하거나 삭제할 수 없습니다."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -399,6 +399,42 @@
|
||||
},
|
||||
"ToLocal": {
|
||||
"One": "К локальному"
|
||||
},
|
||||
"AddressBookName": {
|
||||
"One": "Имя адресной книги"
|
||||
},
|
||||
"AddRule": {
|
||||
"One": "Добавить правило"
|
||||
},
|
||||
"ShareRules": {
|
||||
"One": "Правила обмена"
|
||||
},
|
||||
"Rule": {
|
||||
"One": "Правило"
|
||||
},
|
||||
"Read": {
|
||||
"One": "Чтение"
|
||||
},
|
||||
"ReadWrite": {
|
||||
"One": "Чтение и запись"
|
||||
},
|
||||
"FullControl": {
|
||||
"One": "Полный доступ"
|
||||
},
|
||||
"ShareTo": {
|
||||
"One": "Поделиться с"
|
||||
},
|
||||
"MyAddressBook": {
|
||||
"One": "Моя адресная книга"
|
||||
},
|
||||
"AddressBook": {
|
||||
"One": "Адресная книга"
|
||||
},
|
||||
"AddressBookNameManage": {
|
||||
"One": "именами адресных книг"
|
||||
},
|
||||
"MyAddressBookTips": {
|
||||
"One": "«Моя адресная книга» является стандартным для системы, не может быть изменена или удалена"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -385,5 +385,44 @@
|
||||
},
|
||||
"ToLocal": {
|
||||
"One": "到本地"
|
||||
},
|
||||
"AddressBookName": {
|
||||
"One": "地址簿名称"
|
||||
},
|
||||
"AddressBookCollection": {
|
||||
"One": "地址簿集"
|
||||
},
|
||||
"AddRule": {
|
||||
"One": "添加规则"
|
||||
},
|
||||
"ShareRules": {
|
||||
"One": "分享规则"
|
||||
},
|
||||
"Rule": {
|
||||
"One": "规则"
|
||||
},
|
||||
"Read": {
|
||||
"One": "读取"
|
||||
},
|
||||
"ReadWrite": {
|
||||
"One": "读写"
|
||||
},
|
||||
"FullControl": {
|
||||
"One": "完全控制"
|
||||
},
|
||||
"ShareTo": {
|
||||
"One": "分享给"
|
||||
},
|
||||
"MyAddressBook": {
|
||||
"One": "我的地址簿"
|
||||
},
|
||||
"AddressBook": {
|
||||
"One": "地址簿"
|
||||
},
|
||||
"AddressBookNameManage": {
|
||||
"One": "地址簿名称"
|
||||
},
|
||||
"MyAddressBookTips": {
|
||||
"One": "\"我的地址簿\"是系统默认，不可修改、删除"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
import { reactive, ref } from 'vue'
|
||||
import { create, list, remove, update } from '@/api/address_book_collection'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { T } from '@/utils/i18n'
|
||||
|
||||
export function useRepositories (is_my) {
|
||||
const listRes = reactive({
|
||||
list: [], total: 0, loading: false,
|
||||
})
|
||||
const listQuery = reactive({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
is_my,
|
||||
name: null,
|
||||
user_id: null,
|
||||
})
|
||||
|
||||
const getList = async () => {
|
||||
listRes.loading = true
|
||||
const res = await list(listQuery).catch(_ => false)
|
||||
listRes.loading = false
|
||||
if (res) {
|
||||
listRes.list = res.data.list
|
||||
listRes.total = res.data.total
|
||||
}
|
||||
}
|
||||
const handlerQuery = () => {
|
||||
if (listQuery.page === 1) {
|
||||
getList()
|
||||
} else {
|
||||
listQuery.page = 1
|
||||
}
|
||||
}
|
||||
|
||||
const del = async (row) => {
|
||||
const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Delete') }), {
|
||||
confirmButtonText: T('Confirm'),
|
||||
cancelButtonText: T('Cancel'),
|
||||
type: 'warning',
|
||||
}).catch(_ => false)
|
||||
if (!cf) {
|
||||
return false
|
||||
}
|
||||
|
||||
const res = await remove({ id: row.id }).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success(T('OperationSuccess'))
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
const formVisible = ref(false)
|
||||
const formData = reactive({
|
||||
id: 0,
|
||||
name: '',
|
||||
})
|
||||
|
||||
const toEdit = (row) => {
|
||||
formVisible.value = true
|
||||
//将row中的数据赋值给formData
|
||||
Object.keys(formData).forEach(key => {
|
||||
formData[key] = row[key]
|
||||
})
|
||||
|
||||
}
|
||||
const toAdd = () => {
|
||||
formVisible.value = true
|
||||
//重置formData
|
||||
Object.keys(formData).forEach(key => {
|
||||
formData[key] = undefined
|
||||
})
|
||||
|
||||
}
|
||||
const submit = async () => {
|
||||
const api = formData.id ? update : create
|
||||
const res = await api(formData).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success(T('OperationSuccess'))
|
||||
formVisible.value = false
|
||||
getList()
|
||||
}
|
||||
}
|
||||
return {
|
||||
listRes,
|
||||
listQuery,
|
||||
getList,
|
||||
handlerQuery,
|
||||
del,
|
||||
formVisible,
|
||||
formData,
|
||||
toEdit,
|
||||
toAdd,
|
||||
submit,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="list-query" shadow="hover">
|
||||
<el-form inline label-width="80px">
|
||||
<el-form-item :label="T('Owner')">
|
||||
<el-select v-model="listQuery.user_id" clearable>
|
||||
<el-option
|
||||
v-for="item in allUsers"
|
||||
:key="item.id"
|
||||
:label="item.username"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
|
||||
<el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="list-body" shadow="hover">
|
||||
<el-table :data="listRes.list" v-loading="listRes.loading" border>
|
||||
<el-table-column prop="id" label="id" align="center"/>
|
||||
<el-table-column prop="user_id" :label="T('Owner')" align="center">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" :label="T('AddressBook')" align="center"/>
|
||||
<el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
|
||||
<!-- <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
|
||||
<el-table-column :label="T('Actions')" align="center" class-name="table-actions" width="600" fixed="right">
|
||||
<template #default="{row}">
|
||||
<el-button type="primary" @click="showRules(row)">{{ T('ShareRules') }}</el-button>
|
||||
<el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
|
||||
<el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card class="list-page" shadow="hover">
|
||||
<el-pagination background
|
||||
layout="prev, pager, next, sizes, jumper"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
v-model:page-size="listQuery.page_size"
|
||||
v-model:current-page="listQuery.page"
|
||||
:total="listRes.total">
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
<el-dialog v-model="formVisible" width="800" :title="!formData.id?T('Create') :T('Update') ">
|
||||
<el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
|
||||
<el-form-item :label="T('Owner')" prop="user_id" required>
|
||||
<el-select v-model="formData.user_id">
|
||||
<el-option
|
||||
v-for="item in allUsers"
|
||||
:key="item.id"
|
||||
:label="item.username"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Name')" prop="name" required>
|
||||
<el-input v-model="formData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
|
||||
<el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="rulesVisible" :title="T('ShareRules')" destroy-on-close top="5vh" width="80%">
|
||||
<Rule :collection="clickRow" :is_my="0"></Rule>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { T } from '@/utils/i18n'
|
||||
import { ref } from 'vue'
|
||||
import { useRepositories } from '@/views/address_book/collection'
|
||||
import { onActivated, onMounted, watch } from 'vue'
|
||||
import Rule from '@/views/address_book/rule.vue'
|
||||
import { loadAllUsers } from '@/global'
|
||||
|
||||
const { allUsers, getAllUsers } = loadAllUsers()
|
||||
getAllUsers()
|
||||
const {
|
||||
listRes,
|
||||
listQuery,
|
||||
getList,
|
||||
handlerQuery,
|
||||
del,
|
||||
formVisible,
|
||||
formData,
|
||||
toEdit,
|
||||
toAdd,
|
||||
submit,
|
||||
} = useRepositories()
|
||||
|
||||
listQuery.is_my = 0
|
||||
|
||||
onMounted(getList)
|
||||
onActivated(getList)
|
||||
|
||||
watch(() => listQuery.page, getList)
|
||||
|
||||
watch(() => listQuery.page_size, handlerQuery)
|
||||
|
||||
const clickRow = ref({})
|
||||
const rulesVisible = ref(false)
|
||||
const showRules = (row) => {
|
||||
clickRow.value = row
|
||||
rulesVisible.value = true
|
||||
console.log('showRules')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -1,20 +1,40 @@
|
||||
import { reactive, ref } from 'vue'
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
import { create, list, remove, update } from '@/api/address_book'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { T } from '@/utils/i18n'
|
||||
import { useRepositories as useCollectionRepositories } from '@/views/address_book/collection'
|
||||
import { useRepositories as useTagRepositories } from '@/views/tag/index'
|
||||
import { loadAllUsers } from '@/global'
|
||||
|
||||
export function useRepositories (is_my = 0) {
|
||||
|
||||
const { allUsers, getAllUsers } = loadAllUsers()
|
||||
|
||||
const {
|
||||
listRes: collectionListRes,
|
||||
listQuery: collectionListQuery,
|
||||
getList: getCollectionList,
|
||||
} = useCollectionRepositories(is_my)
|
||||
collectionListQuery.page_size = 9999
|
||||
const {
|
||||
listRes: tagListRes,
|
||||
listQuery: tagListQuery,
|
||||
getList: getTagList,
|
||||
} = useTagRepositories(is_my)
|
||||
tagListQuery.page_size = 9999
|
||||
|
||||
export function useRepositories (user_id) {
|
||||
const listRes = reactive({
|
||||
list: [], total: 0, loading: false,
|
||||
})
|
||||
const listQuery = reactive({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
is_my: 0,
|
||||
is_my,
|
||||
id: null,
|
||||
user_id: null,
|
||||
username: null,
|
||||
hostname: null,
|
||||
collection_id: null,
|
||||
})
|
||||
|
||||
const getList = async () => {
|
||||
@@ -52,10 +72,10 @@ export function useRepositories (user_id) {
|
||||
}
|
||||
|
||||
const platformList = [
|
||||
{ label: 'Windows', value: 'Windows' },
|
||||
{ label: 'Linux', value: 'Linux' },
|
||||
{ label: 'Mac OS', value: 'Mac OS' },
|
||||
{ label: 'Android', value: 'Android' },
|
||||
{ label: 'Windows', value: 'Windows', icon: 'windows' },
|
||||
{ label: 'Linux', value: 'Linux', icon: 'linux' },
|
||||
{ label: 'Mac OS', value: 'Mac OS', icon: 'mac' },
|
||||
{ label: 'Android', value: 'Android', icon: 'android' },
|
||||
]
|
||||
const formVisible = ref(false)
|
||||
const formData = reactive({
|
||||
@@ -76,6 +96,7 @@ export function useRepositories (user_id) {
|
||||
'user_id': null,
|
||||
user_ids: [],
|
||||
'username': '',
|
||||
collection_id: null,
|
||||
})
|
||||
|
||||
const toEdit = (row) => {
|
||||
@@ -84,6 +105,10 @@ export function useRepositories (user_id) {
|
||||
Object.keys(formData).forEach(key => {
|
||||
formData[key] = row[key]
|
||||
})
|
||||
collectionListQuery.user_id = row.user_id
|
||||
getCollectionList()
|
||||
tagListQuery.collection_id = row.collection_id
|
||||
getTagList()
|
||||
|
||||
}
|
||||
const toAdd = () => {
|
||||
@@ -126,6 +151,36 @@ export function useRepositories (user_id) {
|
||||
shareToWebClientForm.hash = row.hash
|
||||
shareToWebClientVisible.value = true
|
||||
}
|
||||
|
||||
const changeQueryUser = async (val) => {
|
||||
tagListRes.list = []
|
||||
listQuery.collection_id = null
|
||||
if (!val) {
|
||||
collectionListRes.list = []
|
||||
} else {
|
||||
collectionListQuery.user_id = val
|
||||
getCollectionList()
|
||||
}
|
||||
}
|
||||
const changeUser = async (val) => {
|
||||
tagListRes.list = []
|
||||
formData.tags = []
|
||||
formData.collection_id = 0
|
||||
if (!val) {
|
||||
collectionListRes.list = []
|
||||
} else {
|
||||
collectionListQuery.user_id = val
|
||||
getCollectionList()
|
||||
}
|
||||
}
|
||||
const changeCollection = async (val) => {
|
||||
tagListRes.list = []
|
||||
formData.tags = []
|
||||
tagListQuery.user_id = formData.user_id
|
||||
tagListQuery.collection_id = val
|
||||
getTagList()
|
||||
}
|
||||
|
||||
return {
|
||||
listRes,
|
||||
listQuery,
|
||||
@@ -141,5 +196,20 @@ export function useRepositories (user_id) {
|
||||
shareToWebClientVisible,
|
||||
shareToWebClientForm,
|
||||
toShowShare,
|
||||
|
||||
collectionListQuery,
|
||||
getCollectionList,
|
||||
collectionListRes,
|
||||
|
||||
tagListQuery,
|
||||
getTagList,
|
||||
tagListRes,
|
||||
|
||||
allUsers,
|
||||
getAllUsers,
|
||||
|
||||
changeQueryUser,
|
||||
changeUser,
|
||||
changeCollection,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="list-query" shadow="hover">
|
||||
<el-form inline label-width="80px">
|
||||
<el-form inline label-width="120px">
|
||||
<el-form-item :label="T('Owner')">
|
||||
<el-select v-model="listQuery.user_id" clearable>
|
||||
<el-select v-model="listQuery.user_id" clearable @change="changeQueryUser">
|
||||
<el-option
|
||||
v-for="item in allUsers"
|
||||
:key="item.id"
|
||||
@@ -12,6 +12,12 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('AddressBookName')">
|
||||
<el-select v-model="listQuery.collection_id" clearable>
|
||||
<el-option :value="0" :label="T('MyAddressBook')"></el-option>
|
||||
<el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Id')">
|
||||
<el-input v-model="listQuery.id" clearable></el-input>
|
||||
</el-form-item>
|
||||
@@ -32,7 +38,13 @@
|
||||
<el-table :data="listRes.list" v-loading="listRes.loading" border>
|
||||
<el-table-column prop="id" label="id" align="center" width="200">
|
||||
<template #default="{row}">
|
||||
<span>{{ row.id }} <el-icon @click="handleClipboard(row.id, $event)"><CopyDocument/></el-icon></span>
|
||||
<div>
|
||||
<PlatformIcons :name="platformList.find(p=>p.label===row.platform)?.icon" style="width: 20px;height: 20px;display: inline-block" color="var(--basicBlack)"/>
|
||||
{{ row.id }}
|
||||
<el-icon @click="handleClipboard(row.id, $event)">
|
||||
<CopyDocument/>
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="T('Owner')" align="center" width="200">
|
||||
@@ -40,10 +52,14 @@
|
||||
<span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="collection_id" :label="T('AddressBookName')" align="center" width="150">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.collection_id === 0">{{ T('MyAddressBook') }}</span>
|
||||
<span v-else>{{ row.collection?.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="username" :label="T('Username')" align="center" width="150"/>
|
||||
<el-table-column prop="hostname" :label="T('Hostname')" align="center" width="150"/>
|
||||
|
||||
<el-table-column prop="platform" :label="T('Platform')" align="center" width="120"/>
|
||||
<el-table-column prop="tags" :label="T('Tags')" align="center"/>
|
||||
<!-- <el-table-column prop="created_at" label="创建时间" align="center"/>-->
|
||||
<!-- <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
|
||||
@@ -81,6 +97,12 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('AddressBookName')">
|
||||
<el-select v-model="formData.collection_id" clearable @change="changeCollection">
|
||||
<el-option :value="0" :label="T('MyAddressBook')"></el-option>
|
||||
<el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="id" prop="id" required>
|
||||
<el-input v-model="formData.id"></el-input>
|
||||
</el-form-item>
|
||||
@@ -116,7 +138,7 @@
|
||||
<el-form-item :label="T('Tags')" prop="tags">
|
||||
<el-select v-model="formData.tags" multiple>
|
||||
<el-option
|
||||
v-for="item in tagList"
|
||||
v-for="item in tagListRes.list"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
@@ -157,33 +179,21 @@
|
||||
|
||||
<script setup>
|
||||
import { onActivated, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { list as fetchTagList } from '@/api/tag'
|
||||
import { loadAllUsers } from '@/global'
|
||||
import { useRepositories } from '@/views/address_book/index'
|
||||
import { toWebClientLink, getPeerSlat } from '@/utils/webclient'
|
||||
import { T } from '@/utils/i18n'
|
||||
import { useRoute } from 'vue-router'
|
||||
import shareByWebClient from '@/views/address_book/components/shareByWebClient.vue'
|
||||
import { connectByClient } from '@/utils/peer'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { handleClipboard } from '@/utils/clipboard'
|
||||
import { CopyDocument } from '@element-plus/icons'
|
||||
import PlatformIcons from '@/components/icons/platform.vue'
|
||||
|
||||
|
||||
|
||||
const appStore = useAppStore()
|
||||
const route = useRoute()
|
||||
const { allUsers, getAllUsers } = loadAllUsers()
|
||||
getAllUsers()
|
||||
const changeUser = (v) => {
|
||||
formData.tags = []
|
||||
fetchTagListData(v)
|
||||
}
|
||||
const tagList = ref([])
|
||||
const fetchTagListData = async (user_id) => {
|
||||
const res = await fetchTagList({ user_id }).catch(_ => false)
|
||||
if (res) {
|
||||
tagList.value = res.data.list
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const {
|
||||
listRes,
|
||||
@@ -197,15 +207,24 @@
|
||||
toEdit,
|
||||
toAdd,
|
||||
submit,
|
||||
shareToWebClientVisible,
|
||||
shareToWebClientForm,
|
||||
toShowShare,
|
||||
// shareToWebClientVisible,
|
||||
// shareToWebClientForm,
|
||||
// toShowShare,
|
||||
collectionListRes,
|
||||
|
||||
tagListRes,
|
||||
|
||||
allUsers, getAllUsers,
|
||||
|
||||
changeQueryUser,
|
||||
changeUser,
|
||||
changeCollection
|
||||
} = useRepositories()
|
||||
|
||||
if (route.query?.user_id) {
|
||||
listQuery.user_id = parseInt(route.query.user_id)
|
||||
}
|
||||
|
||||
onMounted(getAllUsers)
|
||||
onMounted(getList)
|
||||
onActivated(getList)
|
||||
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { create, list, remove, update } from '@/api/address_book_collection_rule'
|
||||
import { groupUsers } from '@/api/user'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { T } from '@/utils/i18n'
|
||||
import collection from '@element-plus/icons/lib/Collection'
|
||||
|
||||
export function useRepositories (is_my) {
|
||||
const listRes = reactive({
|
||||
list: [], total: 0, loading: false,
|
||||
})
|
||||
const listQuery = reactive({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
collection_id: null,
|
||||
is_my,
|
||||
})
|
||||
|
||||
const getList = async () => {
|
||||
listRes.loading = true
|
||||
const res = await list(listQuery).catch(_ => false)
|
||||
listRes.loading = false
|
||||
if (res) {
|
||||
listRes.list = res.data.list
|
||||
listRes.total = res.data.total
|
||||
}
|
||||
}
|
||||
const handlerQuery = () => {
|
||||
if (listQuery.page === 1) {
|
||||
getList()
|
||||
} else {
|
||||
listQuery.page = 1
|
||||
}
|
||||
}
|
||||
|
||||
const del = async (row) => {
|
||||
const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Delete') }), {
|
||||
confirmButtonText: T('Confirm'),
|
||||
cancelButtonText: T('Cancel'),
|
||||
type: 'warning',
|
||||
}).catch(_ => false)
|
||||
if (!cf) {
|
||||
return false
|
||||
}
|
||||
|
||||
const res = await remove({ id: row.id }).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success(T('OperationSuccess'))
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
const rules = computed(_ => [
|
||||
{ label: T('Read'), value: 1 },
|
||||
{ label: T('ReadWrite'), value: 2 },
|
||||
{ label: T('FullControl'), value: 3 },
|
||||
])
|
||||
|
||||
const formVisible = ref(false)
|
||||
const formData = reactive({
|
||||
id: 0,
|
||||
collection_id: null,
|
||||
type: 1,
|
||||
rule: 1,
|
||||
to_id: null,
|
||||
user_id: null,
|
||||
})
|
||||
|
||||
const toEdit = (row) => {
|
||||
formVisible.value = true
|
||||
//将row中的数据赋值给formData
|
||||
Object.keys(formData).forEach(key => {
|
||||
formData[key] = row[key]
|
||||
})
|
||||
|
||||
}
|
||||
const toAdd = () => {
|
||||
formVisible.value = true
|
||||
|
||||
}
|
||||
const submit = async () => {
|
||||
const api = formData.id ? update : create
|
||||
const res = await api(formData).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success(T('OperationSuccess'))
|
||||
formVisible.value = false
|
||||
getList()
|
||||
}
|
||||
}
|
||||
const groupUsersList = ref([])
|
||||
const getGroupUsers = async () => {
|
||||
const res = await groupUsers({ user_id: formData.user_id }).catch(_ => false)
|
||||
if (res) {
|
||||
groupUsersList.value = res.data
|
||||
}
|
||||
}
|
||||
return {
|
||||
listRes,
|
||||
listQuery,
|
||||
getList,
|
||||
handlerQuery,
|
||||
del,
|
||||
formVisible,
|
||||
formData,
|
||||
toEdit,
|
||||
toAdd,
|
||||
submit,
|
||||
rules,
|
||||
groupUsersList,
|
||||
getGroupUsers,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="list-query" shadow="hover">
|
||||
<el-form inline label-width="80px">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
|
||||
<el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="list-body" shadow="hover">
|
||||
<el-table :data="listRes.list" v-loading="listRes.loading" border>
|
||||
<el-table-column prop="rule" :label="T('Rule')" align="center">
|
||||
<template #default="{row}">
|
||||
<div>
|
||||
{{ rules.find(r => r.value === row.rule)?.label }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="to_id" :label="T('ShareTo')" align="center">
|
||||
<template #default="{row}">
|
||||
<div v-if="row.type===1">
|
||||
{{ groupUsersList.find(u => u.id === row.to_id)?.username }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
|
||||
<!-- <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
|
||||
<el-table-column :label="T('Actions')" align="center" class-name="table-actions" width="300" fixed="right">
|
||||
<template #default="{row}">
|
||||
<el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
|
||||
<el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card class="list-page" shadow="hover">
|
||||
<el-pagination background
|
||||
layout="prev, pager, next, sizes, jumper"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
v-model:page-size="listQuery.page_size"
|
||||
v-model:current-page="listQuery.page"
|
||||
:total="listRes.total">
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
<el-dialog v-model="formVisible" width="800" :title="!formData.id?T('Create') :T('Update') " :close-on-click-modal="false">
|
||||
<el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
|
||||
<el-form-item :label="T('AddressBookName')">
|
||||
{{ props.collection.name }}
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Rule')" prop="rule" required>
|
||||
<el-radio-group v-model="formData.rule">
|
||||
<el-radio v-for="item in rules" :key="item.value" :label="item.value">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('ShareTo')" prop="to_id" required>
|
||||
<!-- <el-input-number v-model="formData.to_id"></el-input-number>-->
|
||||
<el-select v-model="formData.to_id">
|
||||
<el-option
|
||||
v-for="item in groupUsersList"
|
||||
:key="item.id"
|
||||
:label="item.username"
|
||||
:value="item.id"
|
||||
:disabled="!item.status"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
|
||||
<el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { T } from '@/utils/i18n'
|
||||
import { useRepositories } from '@/views/address_book/rule'
|
||||
import { onActivated, onMounted, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
collection: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
is_my: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
})
|
||||
const {
|
||||
listRes,
|
||||
listQuery,
|
||||
getList,
|
||||
handlerQuery,
|
||||
del,
|
||||
formVisible,
|
||||
formData,
|
||||
toEdit,
|
||||
toAdd,
|
||||
submit,
|
||||
rules,
|
||||
groupUsersList,
|
||||
getGroupUsers,
|
||||
} = useRepositories(props.is_my)
|
||||
|
||||
formData.collection_id = props.collection.id
|
||||
formData.user_id = props.collection.user_id
|
||||
listQuery.collection_id = props.collection.id
|
||||
|
||||
onMounted(getGroupUsers)
|
||||
onMounted(getList)
|
||||
onActivated(getList)
|
||||
|
||||
watch(() => listQuery.page, getList)
|
||||
|
||||
watch(() => listQuery.page_size, handlerQuery)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="list-query" shadow="hover">
|
||||
<el-form inline label-width="80px">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
|
||||
<el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="list-body" shadow="hover">
|
||||
<el-tag type="danger" effect="light" style="margin-bottom: 10px">{{T('MyAddressBookTips')}}</el-tag>
|
||||
<el-table :data="listRes.list" v-loading="listRes.loading" border>
|
||||
<!-- <el-table-column prop="id" label="id" align="center"/>-->
|
||||
<el-table-column prop="name" :label="T('Name')" align="center"/>
|
||||
<el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
|
||||
<!-- <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
|
||||
<el-table-column :label="T('Actions')" align="center" class-name="table-actions" width="600" fixed="right">
|
||||
<template #default="{row}">
|
||||
<el-button type="primary" @click="showRules(row)">{{ T('ShareRules') }}</el-button>
|
||||
<el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
|
||||
<el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card class="list-page" shadow="hover">
|
||||
<el-pagination background
|
||||
layout="prev, pager, next, sizes, jumper"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
v-model:page-size="listQuery.page_size"
|
||||
v-model:current-page="listQuery.page"
|
||||
:total="listRes.total">
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
<el-dialog v-model="formVisible" width="800" :title="!formData.id?T('Create') :T('Update') ">
|
||||
<el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
|
||||
<el-form-item :label="T('Name')" prop="name" required>
|
||||
<el-input v-model="formData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
|
||||
<el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="rulesVisible" :title="T('ShareRules')" destroy-on-close top="5vh" width="80%">
|
||||
<Rule :collection="clickRow" :is_my="1"></Rule>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { T } from '@/utils/i18n'
|
||||
import { ref } from 'vue'
|
||||
import { useRepositories } from '@/views/address_book/collection'
|
||||
import { onActivated, onMounted, watch } from 'vue'
|
||||
import Rule from '@/views/address_book/rule.vue'
|
||||
|
||||
const {
|
||||
listRes,
|
||||
listQuery,
|
||||
getList,
|
||||
handlerQuery,
|
||||
del,
|
||||
formVisible,
|
||||
formData,
|
||||
toEdit,
|
||||
toAdd,
|
||||
submit,
|
||||
} = useRepositories(1)
|
||||
|
||||
onMounted(getList)
|
||||
|
||||
watch(() => listQuery.page, getList)
|
||||
|
||||
watch(() => listQuery.page_size, handlerQuery)
|
||||
|
||||
const clickRow = ref({})
|
||||
const rulesVisible = ref(false)
|
||||
const showRules = (row) => {
|
||||
clickRow.value = row
|
||||
rulesVisible.value = true
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="list-query" shadow="hover">
|
||||
<el-form inline label-width="80px">
|
||||
<el-form inline label-width="120px">
|
||||
<el-form-item :label="T('AddressBookName')">
|
||||
<el-select v-model="listQuery.collection_id" clearable>
|
||||
<el-option :value="0" :label="T('MyAddressBook')"></el-option>
|
||||
<el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Id')">
|
||||
<el-input v-model="listQuery.id" clearable></el-input>
|
||||
</el-form-item>
|
||||
@@ -22,12 +28,24 @@
|
||||
<el-table :data="listRes.list" v-loading="listRes.loading" border>
|
||||
<el-table-column prop="id" label="id" align="center" width="200">
|
||||
<template #default="{row}">
|
||||
<span>{{ row.id }} <el-icon @click="handleClipboard(row.id, $event)"><CopyDocument/></el-icon></span>
|
||||
<div>
|
||||
<PlatformIcons :name="platformList.find(p=>p.label===row.platform)?.icon" style="width: 20px;height: 20px;display: inline-block" color="var(--basicBlack)"/>
|
||||
{{ row.id }}
|
||||
<el-icon @click="handleClipboard(row.id, $event)">
|
||||
<CopyDocument/>
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="collection_id" :label="T('AddressBookName')" align="center" width="150">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.collection_id === 0">{{ T('MyAddressBook') }}</span>
|
||||
<span v-else>{{ collectionListRes.list.find(c => c.id === row.collection_id)?.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="username" :label="T('Username')" align="center" width="150"/>
|
||||
<el-table-column prop="hostname" :label="T('Hostname')" align="center" width="150"/>
|
||||
<el-table-column prop="platform" :label="T('Platform')" align="center" width="120"/>
|
||||
<!-- <el-table-column prop="platform" :label="T('Platform')" align="center" width="120"/>-->
|
||||
<el-table-column prop="tags" :label="T('Tags')" align="center"/>
|
||||
<!-- <el-table-column prop="created_at" label="创建时间" align="center"/>-->
|
||||
<!-- <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
|
||||
@@ -55,6 +73,12 @@
|
||||
</el-card>
|
||||
<el-dialog v-model="formVisible" width="800" :title="!formData.row_id?T('Create') :T('Update') ">
|
||||
<el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
|
||||
<el-form-item :label="T('AddressBookName')" required prop="collection_id">
|
||||
<el-select v-model="formData.collection_id" clearable @change="changeCollection">
|
||||
<el-option :value="0" :label="T('MyAddressBook')"></el-option>
|
||||
<el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="id" prop="id" required>
|
||||
<el-input v-model="formData.id"></el-input>
|
||||
</el-form-item>
|
||||
@@ -90,7 +114,7 @@
|
||||
<el-form-item :label="T('Tags')" prop="tags">
|
||||
<el-select v-model="formData.tags" multiple>
|
||||
<el-option
|
||||
v-for="item in tagList"
|
||||
v-for="item in tagListRes.list"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
@@ -130,7 +154,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onActivated, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { onActivated, onMounted, ref, watch } from 'vue'
|
||||
import { list as fetchTagList } from '@/api/tag'
|
||||
import { useRepositories } from '@/views/address_book'
|
||||
import { toWebClientLink } from '@/utils/webclient'
|
||||
@@ -140,16 +164,10 @@
|
||||
import { connectByClient } from '@/utils/peer'
|
||||
import { handleClipboard } from '@/utils/clipboard'
|
||||
import { CopyDocument } from '@element-plus/icons'
|
||||
import PlatformIcons from '@/components/icons/platform.vue'
|
||||
|
||||
const is_my = 1
|
||||
const appStore = useAppStore()
|
||||
const tagList = ref([])
|
||||
const fetchTagListData = async () => {
|
||||
const res = await fetchTagList({ is_my: 1 }).catch(_ => false)
|
||||
if (res) {
|
||||
tagList.value = res.data.list
|
||||
}
|
||||
}
|
||||
fetchTagListData()
|
||||
|
||||
const {
|
||||
listRes,
|
||||
@@ -166,17 +184,20 @@
|
||||
shareToWebClientVisible,
|
||||
shareToWebClientForm,
|
||||
toShowShare,
|
||||
} = useRepositories()
|
||||
|
||||
listQuery.is_my = 1
|
||||
// collectionListQuery,
|
||||
collectionListRes,
|
||||
getCollectionList,
|
||||
tagListRes,
|
||||
changeCollection,
|
||||
} = useRepositories(is_my)
|
||||
|
||||
onMounted(getCollectionList)
|
||||
onMounted(getList)
|
||||
onActivated(getList)
|
||||
|
||||
watch(() => listQuery.page, getList)
|
||||
|
||||
watch(() => listQuery.page_size, handlerQuery)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<el-container class="address-book-con">
|
||||
<el-aside width="200px" class="aside">
|
||||
<el-select style="width: 100%;" v-model="listQuery.collection_id" filterable>
|
||||
<el-option :value="0" :label="T('MyAddressBook')"></el-option>
|
||||
<el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
|
||||
</el-select>
|
||||
<div class="aside-tags">
|
||||
<div class="top" style="width: 100%">标签</div>
|
||||
<div v-for="t in tagListRes.list"
|
||||
:key="t.id" class="tag"
|
||||
:class="{checked: checkedTags.includes(t.name)}"
|
||||
:style="{backgroundColor: checkedTags.includes(t.name)?t.color:''}"
|
||||
@click="toggleTag(t)"
|
||||
>
|
||||
<span class="dot" :style="{background:checkedTags.includes(t.name)?'#fff':t.color}"></span> <span>{{ t.name }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-aside>
|
||||
|
||||
<el-main class="con">
|
||||
<el-card class="list-query" shadow="hover">
|
||||
<el-form inline label-width="80px">
|
||||
<!-- <el-form-item :label="T('Name')">
|
||||
<el-select v-model="listQuery.collection_id" clearable>
|
||||
<el-option :value="0" :label="T('MyAddressBook')"></el-option>
|
||||
<el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>-->
|
||||
<el-form-item :label="T('Id')">
|
||||
<el-input v-model="listQuery.id" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Username')">
|
||||
<el-input v-model="listQuery.username" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Hostname')">
|
||||
<el-input v-model="listQuery.hostname" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
|
||||
<el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="list-body" shadow="hover">
|
||||
<!-- <el-tag type="danger" style="margin-bottom: 10px">不建议在此操作地址簿，可能会造成数据不同步</el-tag>-->
|
||||
<el-table :data="listRes.list" v-loading="listRes.loading" border>
|
||||
<el-table-column prop="id" label="id" align="center" width="200">
|
||||
<template #default="{row}">
|
||||
<span>{{ row.id }} <el-icon @click="handleClipboard(row.id, $event)"><CopyDocument/></el-icon></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="collection_id" :label="T('Name')" align="center" width="150">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.collection_id === 0">{{ T('MyAddressBook') }}</span>
|
||||
<span v-else>{{ collectionListRes.list.find(c => c.id === row.collection_id)?.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="username" :label="T('Username')" align="center" width="150"/>
|
||||
<el-table-column prop="hostname" :label="T('Hostname')" align="center" width="150"/>
|
||||
<el-table-column prop="platform" :label="T('Platform')" align="center" width="120"/>
|
||||
<el-table-column prop="tags" :label="T('Tags')" align="center"/>
|
||||
<!-- <el-table-column prop="created_at" label="创建时间" align="center"/>-->
|
||||
<!-- <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
|
||||
<el-table-column prop="alias" :label="T('Alias')" align="center" width="150"/>
|
||||
<el-table-column prop="hash" :label="T('Hash')" align="center" width="150" show-overflow-tooltip/>
|
||||
<el-table-column :label="T('Actions')" align="center" class-name="table-actions" width="600" fixed="right">
|
||||
<template #default="{row}">
|
||||
<el-button type="success" @click="connectByClient(row.id)">{{ T('Link') }}</el-button>
|
||||
<el-button v-if="appStore.setting.appConfig.web_client" type="success" @click="toWebClientLink(row)">Web Client</el-button>
|
||||
<el-button v-if="appStore.setting.appConfig.web_client" type="primary" @click="toShowShare(row)">{{ T('ShareByWebClient') }}</el-button>
|
||||
<el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
|
||||
<el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card class="list-page" shadow="hover">
|
||||
<el-pagination background
|
||||
layout="prev, pager, next, sizes, jumper"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
v-model:page-size="listQuery.page_size"
|
||||
v-model:current-page="listQuery.page"
|
||||
:total="listRes.total">
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
</el-main>
|
||||
|
||||
|
||||
<el-dialog v-model="formVisible" width="800" :title="!formData.row_id?T('Create') :T('Update') ">
|
||||
<el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
|
||||
<el-form-item label="id" prop="id" required>
|
||||
<el-input v-model="formData.id"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Username')" prop="username">
|
||||
<el-input v-model="formData.username"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Alias')" prop="alias">
|
||||
<el-input v-model="formData.alias"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Hash')" prop="hash">
|
||||
<el-input v-model="formData.hash"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Hostname')" prop="hostname">
|
||||
<el-input v-model="formData.hostname"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="T('LoginName')" prop="loginName">
|
||||
<el-input v-model="formData.loginName"></el-input>
|
||||
</el-form-item>-->
|
||||
<!-- <el-form-item :label="T('Password')" prop="password">
|
||||
<el-input v-model="formData.password"></el-input>
|
||||
</el-form-item>-->
|
||||
<el-form-item :label="T('Platform')" prop="platform">
|
||||
<el-select v-model="formData.platform">
|
||||
<el-option
|
||||
v-for="item in platformList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="T('Tags')" prop="tags">
|
||||
<el-select v-model="formData.tags" multiple>
|
||||
<el-option
|
||||
v-for="item in tagList"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="强制中继" prop="forceAlwaysRelay" required>
|
||||
<el-switch v-model="formData.forceAlwaysRelay"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="在线" prop="online">
|
||||
<el-switch v-model="formData.online"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="rdp端口" prop="rdpPort">
|
||||
<el-input v-model="formData.rdpPort"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="rdp用户名" prop="rdpUsername">
|
||||
<el-input v-model="formData.rdpUsername"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="同一服务器" prop="sameServer">
|
||||
<el-switch v-model="formData.sameServer"></el-switch>
|
||||
</el-form-item>-->
|
||||
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
|
||||
<el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="shareToWebClientVisible" width="900" :close-on-click-modal="false">
|
||||
<shareByWebClient :id="shareToWebClientForm.id"
|
||||
:hash="shareToWebClientForm.hash"
|
||||
@cancel="shareToWebClientVisible=false"
|
||||
@success=""/>
|
||||
</el-dialog>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onActivated, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { list as fetchTagList } from '@/api/tag'
|
||||
import { useRepositories } from '@/views/address_book'
|
||||
import { useRepositories as useCollectionRepositories } from '@/views/address_book/collection'
|
||||
import { useRepositories as useTagRepositories } from '@/views/tag/index'
|
||||
import { toWebClientLink } from '@/utils/webclient'
|
||||
import { T } from '@/utils/i18n'
|
||||
import shareByWebClient from '@/views/address_book/components/shareByWebClient.vue'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { connectByClient } from '@/utils/peer'
|
||||
import { handleClipboard } from '@/utils/clipboard'
|
||||
import { CopyDocument } from '@element-plus/icons'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const tagList = ref([])
|
||||
const fetchTagListData = async () => {
|
||||
const res = await fetchTagList({ is_my: 1 }).catch(_ => false)
|
||||
if (res) {
|
||||
tagList.value = res.data.list
|
||||
}
|
||||
}
|
||||
fetchTagListData()
|
||||
|
||||
const {
|
||||
listRes,
|
||||
listQuery,
|
||||
getList,
|
||||
handlerQuery,
|
||||
del,
|
||||
formVisible,
|
||||
platformList,
|
||||
formData,
|
||||
toEdit,
|
||||
toAdd,
|
||||
submit,
|
||||
shareToWebClientVisible,
|
||||
shareToWebClientForm,
|
||||
toShowShare,
|
||||
} = useRepositories()
|
||||
|
||||
listQuery.is_my = 1
|
||||
|
||||
onMounted(getList)
|
||||
onActivated(getList)
|
||||
|
||||
watch(() => listQuery.page, getList)
|
||||
|
||||
watch(() => listQuery.page_size, handlerQuery)
|
||||
const {
|
||||
listRes: collectionListRes,
|
||||
listQuery: collectionListQuery,
|
||||
getList: getCollectionList,
|
||||
} = useCollectionRepositories()
|
||||
collectionListQuery.is_my = 1
|
||||
collectionListQuery.page_size = 999
|
||||
onMounted(getCollectionList)
|
||||
|
||||
const alert = (msg) => {
|
||||
window.alert(msg)
|
||||
}
|
||||
|
||||
const {
|
||||
listRes: tagListRes,
|
||||
listQuery: tagListQuery,
|
||||
getList: getTagList,
|
||||
} = useTagRepositories()
|
||||
tagListQuery.is_my = 1
|
||||
tagListQuery.page_size = 999
|
||||
onMounted(getTagList)
|
||||
const checkedTags = ref(['111'])
|
||||
const toggleTag = async (tag) => {
|
||||
if (checkedTags.value.includes(tag.name)) {
|
||||
checkedTags.value = checkedTags.value.filter(t => t !== tag.name)
|
||||
} else {
|
||||
checkedTags.value.push(tag.name)
|
||||
}
|
||||
// listQuery.tags = checkedTags.value.join(',')
|
||||
// getList()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-main {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.address-book-con {
|
||||
height: calc(100vh - 120px);
|
||||
|
||||
.aside {
|
||||
.aside-tags {
|
||||
margin-top: 15px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
min-height: calc(100vh - 200px);
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: start;
|
||||
|
||||
.tag {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 5px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
height: 28px;
|
||||
background-color: var(--tag-bg-color);
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&.checked {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.con {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.name-menu {
|
||||
height: calc(100vh - 75px);
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
+31
-12
@@ -1,7 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="list-query" shadow="hover">
|
||||
<el-form inline label-width="80px">
|
||||
<el-form inline label-width="120px">
|
||||
<el-form-item :label="T('AddressBookName')">
|
||||
<el-select v-model="listQuery.collection_id" clearable>
|
||||
<el-option :value="0" :label="T('MyAddressBook')"></el-option>
|
||||
<el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
|
||||
<el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
|
||||
@@ -11,15 +17,17 @@
|
||||
<el-card class="list-body" shadow="hover">
|
||||
<el-table :data="listRes.list" v-loading="listRes.loading" border>
|
||||
<el-table-column prop="id" label="id" align="center"/>
|
||||
<el-table-column prop="collection_id" :label="T('AddressBook')" align="center" width="150">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.collection_id === 0">{{ T('MyAddressBook') }}</span>
|
||||
<span v-else>{{ collectionListRes.list.find(c => c.id === row.collection_id)?.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" :label="T('Name')" align="center"/>
|
||||
<el-table-column prop="color" :label="T('Color')" align="center">
|
||||
<template #default="{row}">
|
||||
<div class="colors">
|
||||
<div style="background-color: #efeff2" class="colorbox">
|
||||
<div :style="{backgroundColor: row.color}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color: #24252b" class="colorbox">
|
||||
<div style="background-color: var(--tag-bg-color)" class="colorbox">
|
||||
<div :style="{backgroundColor: row.color}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,18 +55,19 @@
|
||||
</el-card>
|
||||
<el-dialog v-model="formVisible" :title="!formData.id?T('Create'):T('Update')" width="800">
|
||||
<el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
|
||||
<el-form-item :label="T('AddressBookName')">
|
||||
<el-select v-model="formData.collection_id" clearable>
|
||||
<el-option :value="0" :label="T('MyAddressBook')"></el-option>
|
||||
<el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Name')" prop="name" required>
|
||||
<el-input v-model="formData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Color')" prop="color" required>
|
||||
<el-color-picker v-model="formData.color" show-alpha @active-change="activeChange"></el-color-picker>
|
||||
<br>
|
||||
<div class="colors">
|
||||
<div style="background-color: #efeff2" class="colorbox">
|
||||
<div :style="{backgroundColor: currentColor}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color: #24252b" class="colorbox">
|
||||
<div style="background-color: var(--tag-bg-color)" class="colorbox">
|
||||
<div :style="{backgroundColor: currentColor}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,6 +86,7 @@
|
||||
import { onMounted, watch, onActivated } from 'vue'
|
||||
import { useRepositories } from '@/views/tag'
|
||||
import { T } from '@/utils/i18n'
|
||||
import { useRepositories as useCollectionRepositories } from '@/views/address_book/collection'
|
||||
|
||||
const {
|
||||
listRes,
|
||||
@@ -102,6 +112,15 @@
|
||||
|
||||
watch(() => listQuery.page_size, handlerQuery)
|
||||
|
||||
const {
|
||||
listRes: collectionListRes,
|
||||
listQuery: collectionListQuery,
|
||||
getList: getCollectionList,
|
||||
} = useCollectionRepositories()
|
||||
collectionListQuery.is_my = 1
|
||||
collectionListQuery.page_size = 999
|
||||
onMounted(getCollectionList)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
+48
-4
@@ -3,8 +3,18 @@ import { create, list, remove, update } from '@/api/tag'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { T } from '@/utils/i18n'
|
||||
import { loadAllUsers } from '@/global'
|
||||
import { useRepositories as useCollectionRepositories } from '@/views/address_book/collection'
|
||||
|
||||
export function useRepositories () {
|
||||
export function useRepositories (is_my = 0) {
|
||||
const { allUsers, getAllUsers } = loadAllUsers()
|
||||
|
||||
const {
|
||||
listRes: collectionListRes,
|
||||
listQuery: collectionListQuery,
|
||||
getList: getCollectionList,
|
||||
} = useCollectionRepositories(is_my)
|
||||
collectionListQuery.page_size = 9999
|
||||
//获取query
|
||||
const route = useRoute()
|
||||
const user_id = route.query?.user_id
|
||||
@@ -14,8 +24,9 @@ export function useRepositories () {
|
||||
const listQuery = reactive({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
is_my: 0,
|
||||
is_my,
|
||||
user_id: user_id ? parseInt(user_id) : null,
|
||||
collection_id: null,
|
||||
})
|
||||
|
||||
const flutterColor2rgba = (color) => {
|
||||
@@ -108,6 +119,7 @@ export function useRepositories () {
|
||||
name: '',
|
||||
color: 0,
|
||||
user_id: 0,
|
||||
collection_id: 0,
|
||||
})
|
||||
const currentColor = ref('')
|
||||
const activeChange = (c) => {
|
||||
@@ -121,16 +133,24 @@ export function useRepositories () {
|
||||
formData.name = row.name
|
||||
formData.color = row.color
|
||||
formData.user_id = row.user_id
|
||||
formData.collection_id = row.collection_id
|
||||
collectionListQuery.user_id = row.user_id
|
||||
getCollectionList()
|
||||
}
|
||||
const toAdd = () => {
|
||||
formVisible.value = true
|
||||
formData.id = 0
|
||||
formData.name = ''
|
||||
formData.color = 0
|
||||
formData.user_id = 0
|
||||
formData.color = ''
|
||||
formData.user_id = null
|
||||
formData.collection_id = 0
|
||||
}
|
||||
const submit = async () => {
|
||||
console.log(formData)
|
||||
if (!formData.color) {
|
||||
ElMessage.error('请选择颜色')
|
||||
return
|
||||
}
|
||||
const api = formData.id ? update : create
|
||||
const data = {
|
||||
...formData,
|
||||
@@ -144,6 +164,25 @@ export function useRepositories () {
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
const changeQueryUser = async (val) => {
|
||||
listQuery.collection_id = null
|
||||
if (!val) {
|
||||
collectionListRes.list = []
|
||||
} else {
|
||||
collectionListQuery.user_id = val
|
||||
getCollectionList()
|
||||
}
|
||||
}
|
||||
const changeUser = async (val) => {
|
||||
formData.collection_id = 0
|
||||
if (!val) {
|
||||
collectionListRes.list = []
|
||||
} else {
|
||||
collectionListQuery.user_id = val
|
||||
getCollectionList()
|
||||
}
|
||||
}
|
||||
return {
|
||||
listRes,
|
||||
listQuery,
|
||||
@@ -157,5 +196,10 @@ export function useRepositories () {
|
||||
submit,
|
||||
activeChange,
|
||||
currentColor,
|
||||
|
||||
collectionListRes,
|
||||
allUsers, getAllUsers,
|
||||
changeQueryUser,
|
||||
changeUser,
|
||||
}
|
||||
}
|
||||
|
||||
+40
-30
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="list-query" shadow="hover">
|
||||
<el-form inline label-width="80px">
|
||||
<el-form inline label-width="120px">
|
||||
<el-form-item :label="T('Owner')">
|
||||
<el-select v-model="listQuery.user_id" clearable>
|
||||
<el-select v-model="listQuery.user_id" clearable @change="changeQueryUser">
|
||||
<el-option
|
||||
v-for="item in allUsers"
|
||||
:key="item.id"
|
||||
@@ -12,6 +12,12 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('AddressBookName')">
|
||||
<el-select v-model="listQuery.collection_id" clearable>
|
||||
<el-option :value="0" :label="T('MyAddressBook')"></el-option>
|
||||
<el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
|
||||
<el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
|
||||
@@ -26,15 +32,17 @@
|
||||
<span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="collection_id" :label="T('AddressBookName')" align="center" width="150">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.collection_id === 0">{{ T('MyAddressBook') }}</span>
|
||||
<span v-else>{{ row.collection?.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" :label="T('Name')" align="center"/>
|
||||
<el-table-column prop="color" :label="T('Color')" align="center">
|
||||
<template #default="{row}">
|
||||
<div class="colors">
|
||||
<div style="background-color: #efeff2" class="colorbox">
|
||||
<div :style="{backgroundColor: row.color}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color: #24252b" class="colorbox">
|
||||
<div style="background-color: var(--tag-bg-color)" class="colorbox">
|
||||
<div :style="{backgroundColor: row.color}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,7 +51,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
|
||||
<el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<el-table-column :label="T('Actions')" align="center" width="250">
|
||||
<template #default="{row}">
|
||||
<el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
|
||||
<el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
|
||||
@@ -62,25 +70,8 @@
|
||||
</el-card>
|
||||
<el-dialog v-model="formVisible" :title="!formData.id?T('Create'):T('Update')" width="800">
|
||||
<el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
|
||||
<el-form-item :label="T('Name')" prop="name" required>
|
||||
<el-input v-model="formData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Color')" prop="color" required>
|
||||
<el-color-picker v-model="formData.color" show-alpha @active-change="activeChange"></el-color-picker>
|
||||
<br>
|
||||
<div class="colors">
|
||||
<div style="background-color: #efeff2" class="colorbox">
|
||||
<div :style="{backgroundColor: currentColor}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color: #24252b" class="colorbox">
|
||||
<div :style="{backgroundColor: currentColor}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Owner')" prop="user_id" required>
|
||||
<el-select v-model="formData.user_id">
|
||||
<el-select v-model="formData.user_id" @change="changeUser">
|
||||
<el-option
|
||||
v-for="item in allUsers"
|
||||
:key="item.id"
|
||||
@@ -89,6 +80,24 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('AddressBookName')" prop="collection_id" required>
|
||||
<el-select v-model="formData.collection_id" clearable>
|
||||
<el-option :value="0" :label="T('MyAddressBook')"></el-option>
|
||||
<el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Name')" prop="name" required>
|
||||
<el-input v-model="formData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Color')" prop="color" required>
|
||||
<el-color-picker v-model="formData.color" show-alpha @active-change="activeChange"></el-color-picker>
|
||||
<div class="colors">
|
||||
<div style="background-color: var(--tag-bg-color)" class="colorbox">
|
||||
<div :style="{backgroundColor: currentColor}" class="dot">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
|
||||
<el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
|
||||
@@ -100,12 +109,9 @@
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, watch, ref, onActivated } from 'vue'
|
||||
import { loadAllUsers } from '@/global'
|
||||
import { useRepositories } from '@/views/tag/index'
|
||||
import { T } from '@/utils/i18n'
|
||||
|
||||
const { allUsers, getAllUsers } = loadAllUsers()
|
||||
getAllUsers()
|
||||
const {
|
||||
listRes,
|
||||
listQuery,
|
||||
@@ -119,8 +125,12 @@
|
||||
submit,
|
||||
activeChange,
|
||||
currentColor,
|
||||
collectionListRes,
|
||||
allUsers, getAllUsers,
|
||||
changeQueryUser,
|
||||
changeUser,
|
||||
} = useRepositories()
|
||||
|
||||
onMounted(getAllUsers)
|
||||
onMounted(getList)
|
||||
onActivated(getList)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user