simple321vip
251 lines
7.0 KiB
Vue
251 lines
7.0 KiB
Vue
<template>
|
|
<div class="bookmark">
|
|
<el-form>
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-form-item>
|
|
<el-input v-model="search_form.comment" placeholder="请输入" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-button type="primary" @click="doSearch">检索</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="tag_list">
|
|
<el-tag class="ml-2 click-icon" :type="item.clicked ? 'danger' : 'info'" v-for="(item) in bookmark_types"
|
|
@click="handleTags(item)">{{ item.bk_type_name }}</el-tag>
|
|
</div>
|
|
</el-form>
|
|
<div class="create_dialog">
|
|
<el-button type="primary" @click="handleInsert" v-show="Tenant.account">新建</el-button>
|
|
</div>
|
|
|
|
<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
|
|
<el-table-column type="selection" width="55" />
|
|
<el-table-column type="index" label="index" width="80" />
|
|
<el-table-column prop="bk_type_name" label="分类" width="100" />
|
|
<el-table-column prop="comment" label="名称" width="180" />
|
|
<el-table-column prop="facvion" label="图标" width="60" />
|
|
<el-table-column class="click-icon" prop="url" label="url">
|
|
<template #default="scope">
|
|
<span style="cursor: pointer" @click="openUrl(scope.row.url)">{{ scope.row.url }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作">
|
|
<template #default="scope">
|
|
<el-icon :size="20" @click="copyNumber(scope.row)" class="click-icon">
|
|
<CopyDocument />
|
|
</el-icon>
|
|
<el-button class="click-icon" size="small" @click="handleEdit(scope.$index, scope.row)"
|
|
v-show="Tenant.account">编辑
|
|
</el-button>
|
|
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" v-show="Tenant.account">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div style="margin-top: 20px">
|
|
<el-button @click="toggleSelection([tableData[1], tableData[2]])">反选</el-button>
|
|
<el-button @click="toggleSelection()">清除</el-button>
|
|
</div>
|
|
|
|
<el-dialog v-model="dialogFormVisible" title="添加书签">
|
|
<bookmark_dialog :dialog_form="currentDialogData" :operate_code="operate" :types="bookmark_types"
|
|
@on-concel="closeDialog" @on-submit="doSubmit"></bookmark_dialog>
|
|
</el-dialog>
|
|
|
|
<el-dialog v-model="dialogVisible">
|
|
<delete_dialog :delete_id="currentDialogData.bk_id" @on-submit="doDelete"></delete_dialog>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
import { search_bookmark, delete_bookmark } from '../../api/bookmark'
|
|
import { bookmark_type } from '../../api/master'
|
|
import bookmark_dialog from './dialog.vue'
|
|
import delete_dialog from '../../components/operate/deleteDialog.vue'
|
|
import type { ElTable } from 'element-plus'
|
|
import { CopyDocument } from "@element-plus/icons-vue";
|
|
import { ElNotification } from 'element-plus'
|
|
import copy from 'copy-to-clipboard';
|
|
import { h } from 'vue'
|
|
import { useTenantStore } from '../../store/tenant'
|
|
// obtain user infomation
|
|
const Tenant = useTenantStore()
|
|
|
|
const bookmark_types = reactive<any[]>([])
|
|
bookmark_type().then(response => {
|
|
response.data.forEach((element: String) => {
|
|
const item = element.split("|")
|
|
const row = {
|
|
bk_type_id: Number(item[0]),
|
|
bk_type_name: item[1],
|
|
clicked: false
|
|
}
|
|
bookmark_types.push(row)
|
|
})
|
|
})
|
|
|
|
// 定义书签格式
|
|
type Bookmark = {
|
|
bk_id: string,
|
|
bk_type_id: number,
|
|
bk_type_name: String,
|
|
comment: String,
|
|
url: String
|
|
}
|
|
// 定义 表单格式
|
|
type Searchform = {
|
|
bk_type_ids: number[],
|
|
comment: String
|
|
}
|
|
|
|
// 操作code
|
|
let operate = ref<String>('')
|
|
const search_form = reactive<Searchform>({
|
|
bk_type_ids: [],
|
|
comment: ''
|
|
})
|
|
// 响应式table数据
|
|
const tableData = reactive<Bookmark[]>([])
|
|
// 响应式dialog数据
|
|
const currentDialogData = reactive<Bookmark>({
|
|
bk_id: "-1",
|
|
bk_type_id: 1,
|
|
bk_type_name: '未分类',
|
|
comment: '',
|
|
url: ''
|
|
})
|
|
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
|
|
const multipleSelection = ref<Bookmark[]>([])
|
|
const toggleSelection = (rows?: Bookmark[]) => {
|
|
if (rows) {
|
|
rows.forEach((row) => {
|
|
// TODO: improvement typing when refactor table
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-expect-error
|
|
multipleTableRef.value!.toggleRowSelection(row, undefined)
|
|
})
|
|
} else {
|
|
multipleTableRef.value!.clearSelection()
|
|
}
|
|
}
|
|
|
|
|
|
// dialog表示flag
|
|
let dialogFormVisible = ref(false)
|
|
let dialogVisible = ref(false)
|
|
|
|
// 操作-》添加
|
|
const handleInsert = () => {
|
|
operate.value = '0'
|
|
currentDialogData.bk_id = "-1"
|
|
currentDialogData.bk_type_id = 1
|
|
currentDialogData.bk_type_name = '未分类'
|
|
currentDialogData.comment = ''
|
|
currentDialogData.url = ''
|
|
dialogFormVisible.value = true
|
|
}
|
|
// 操作-》删除
|
|
const handleDelete = (index: number, bookmark: Bookmark) => {
|
|
Object.assign(currentDialogData, bookmark)
|
|
operate.value = '2'
|
|
dialogVisible.value = true
|
|
}
|
|
// 操作-》编辑
|
|
const handleEdit = (index: number, bookmark: Bookmark) => {
|
|
Object.assign(currentDialogData, bookmark)
|
|
operate.value = '1'
|
|
dialogFormVisible.value = true
|
|
}
|
|
|
|
//
|
|
const handleTags = (tag: any) => {
|
|
if (tag.clicked) {
|
|
tag.clicked = false
|
|
search_form.bk_type_ids.forEach(function (item, index, arr) {
|
|
if (item == tag.bk_type_id) {
|
|
arr.splice(index, 1);
|
|
}
|
|
});
|
|
} else {
|
|
tag.clicked = true
|
|
search_form.bk_type_ids.push(tag.bk_type_id)
|
|
}
|
|
|
|
}
|
|
const handleSelectionChange = (val: Bookmark[]) => {
|
|
multipleSelection.value = val
|
|
}
|
|
|
|
const openUrl = (url: string) => {
|
|
window.open(url);
|
|
}
|
|
|
|
const doSearch = () => {
|
|
const param = {
|
|
comment: search_form.comment,
|
|
type_id: search_form.bk_type_ids
|
|
}
|
|
tableData.splice(0, tableData.length)
|
|
search_bookmark(param).then(response => {
|
|
response.data.forEach((item: Bookmark, index: number) => {
|
|
const row = {
|
|
bk_id: item.bk_id,
|
|
bk_type_id: item.bk_type_id,
|
|
bk_type_name: item.bk_type_name,
|
|
comment: item.comment,
|
|
url: item.url
|
|
}
|
|
tableData.push(row)
|
|
})
|
|
})
|
|
}
|
|
|
|
const doDelete = (delete_id: any) => {
|
|
let query = delete_id
|
|
delete_bookmark(query).then(response => {
|
|
dialogVisible.value = false
|
|
doSearch()
|
|
})
|
|
|
|
}
|
|
|
|
const closeDialog = () => {
|
|
dialogFormVisible.value = false
|
|
}
|
|
const doSubmit = () => {
|
|
dialogFormVisible.value = false
|
|
doSearch()
|
|
}
|
|
// 复制转换成功的数值，并提示 复制成功 信息
|
|
const copyNumber = (record: Bookmark) => {
|
|
copy(record.url + "")
|
|
ElNotification({
|
|
title: '',
|
|
message: h('i', { style: 'color: teal' }, '复制成功'),
|
|
})
|
|
}
|
|
doSearch()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tag_list {
|
|
display: flex;
|
|
border-top: 1px solid rgba(151, 151, 151, 0.3);
|
|
border-bottom: 1px solid rgba(151, 151, 151, 0.3);
|
|
}
|
|
|
|
.click-icon {
|
|
width: 40px;
|
|
margin: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.create_dialog {
|
|
margin: 10px;
|
|
}
|
|
</style> |