mirror of
https://github.com/1Panel-dev/MaxKB.git
synced 2025-12-31 18:22:49 +00:00
127 lines
3.4 KiB
Vue
127 lines
3.4 KiB
Vue
<template>
|
|
<el-input
|
|
v-model="filterText"
|
|
placeholder="搜索"
|
|
prefix-icon="Search"
|
|
class="p-24 pt-0 pb-0 mb-16 mt-4"
|
|
/>
|
|
<div class="p-24 pt-0">
|
|
<el-table :data="data" :max-height="tableHeight">
|
|
<el-table-column prop="name" :label="isApplication ? '应用名称' : '知识库名称'">
|
|
<template #default="{ row }">
|
|
<div class="flex align-center">
|
|
<AppAvatar
|
|
v-if="isApplication"
|
|
:name="row.name"
|
|
pinyinColor
|
|
class="mr-12"
|
|
shape="square"
|
|
:size="24"
|
|
/>
|
|
<AppAvatar v-else-if="isDataset" class="mr-12" shape="square" :size="24">
|
|
<img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
|
|
</AppAvatar>
|
|
<span class="ellipsis"> {{ row?.name }}</span>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="管理" align="center" width="60">
|
|
<!-- <template #header>
|
|
<el-checkbox
|
|
v-model="allChecked[MANAGE]"
|
|
label="管理"
|
|
@change="handleCheckAllChange($event, MANAGE)"
|
|
/>
|
|
</template> -->
|
|
<template #default="{ row }">
|
|
<el-checkbox v-model="row.operate[MANAGE]" @change="checkedOperateChange(MANAGE, row)" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="使用" align="center" width="60">
|
|
<!-- <template #header>
|
|
<el-checkbox
|
|
v-model="allChecked[USE]"
|
|
label="使用"
|
|
@change="handleCheckAllChange($event, USE)"
|
|
/>
|
|
</template> -->
|
|
<template #default="{ row }">
|
|
<el-checkbox v-model="row.operate[USE]" @change="checkedOperateChange(USE, row)" />
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, watch, computed } from 'vue'
|
|
import { MANAGE, USE, DATASET, APPLICATION } from './../utils'
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
id: String,
|
|
type: String,
|
|
tableHeight: Number
|
|
})
|
|
|
|
const isDataset = computed(() => props.type === DATASET)
|
|
const isApplication = computed(() => props.type === APPLICATION)
|
|
|
|
const emit = defineEmits(['update:data'])
|
|
const allChecked: any = ref({
|
|
[MANAGE]: false,
|
|
[USE]: false
|
|
})
|
|
|
|
const filterText = ref('')
|
|
|
|
watch(
|
|
() => props.data,
|
|
(val) => {
|
|
Object.keys(allChecked.value).map((item) => {
|
|
allChecked.value[item] = compare(item)
|
|
})
|
|
emit('update:data', val)
|
|
},
|
|
{
|
|
deep: true
|
|
}
|
|
)
|
|
|
|
function handleCheckAllChange(val: string | number | boolean, Name: string | number) {
|
|
if (val) {
|
|
props.data.map((item: any) => {
|
|
item.operate[Name] = true
|
|
})
|
|
} else {
|
|
props.data.map((item: any) => {
|
|
item.operate[Name] = false
|
|
})
|
|
}
|
|
}
|
|
function checkedOperateChange(Name: string | number, row: any) {
|
|
if (Name === MANAGE && row.operate[MANAGE]) {
|
|
props.data.map((item: any) => {
|
|
if (item.id === row.id) {
|
|
item.operate[USE] = true
|
|
}
|
|
})
|
|
}
|
|
allChecked.value[Name] = compare(Name)
|
|
}
|
|
|
|
function compare(attrs: string | number) {
|
|
const filterData = props.data.filter((item: any) => item?.operate[attrs])
|
|
return props.data.length > 0 && filterData.length === props.data.length
|
|
}
|
|
|
|
onMounted(() => {
|
|
Object.keys(allChecked.value).map((item) => {
|
|
allChecked.value[item] = compare(item)
|
|
})
|
|
})
|
|
</script>
|
|
<style lang="scss" scope></style>
|