gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-1089 统一各列表页的loading、nodata交互

Browse Source
This commit is contained in:
hyx
2023-06-16 17:51:08 +08:00
parent c86a7cfeae
commit 5e682f81d9
23 changed files with 300 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/table/setting/KnowledgeBaseTableForRow.vue
View File

@@ -1,90 +1,96 @@
<template>
<el-table
id="knowledgeBaseTable"
ref="dataTable"
:data="tableData"
:height="height"
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
>
<el-table-column
:resizable="false"
align="center"
type="selection"
:selectable="selectable"
width="55">
</el-table-column>
<el-table-column
v-for="(item, index) in customTableTitles"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:sortable="item.sortable"
:width="`${item.width}`"
class="data-column"
id="knowledgeBaseTable"
ref="dataTable"
:data="tableData"
:height="height"
border
empty-text=" "
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
>
<template #header>
<span class="data-column__span">{{item.label}}</span>
<div class="col-resize-area"></div>
<el-table-column
:resizable="false"
align="center"
type="selection"
:selectable="selectable"
width="55">
</el-table-column>
<el-table-column
v-for="(item, index) in customTableTitles"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
:sort-orders="['ascending', 'descending']"
:sortable="item.sortable"
:width="`${item.width}`"
class="data-column"
>
<template #header>
<span class="data-column__span">{{item.label}}</span>
<div class="col-resize-area"></div>
</template>
<template #default="scope" :column="item">
<template v-if="item.prop === 'name'" >
<template v-if="scope.row.i18n">
<span :title="scope.row[item.prop]">{{$t(scope.row.i18n)}}</span>
</template>
<template v-else-if="scope.row.name">
<span :title="scope.row[item.prop]">{{scope.row.name}}</span>
</template>
<template v-else>
<span>-</span>
</template>
</template>
<template v-else-if="item.prop === 'category'">
<span >{{tagCategoryText(scope.row[item.prop])}}</span>
</template>
<template v-else-if="item.prop === 'source'">
<span class="type-tag">{{tagSourceText(scope.row[item.prop])}}</span>
</template>
<template v-else-if="item.prop === 'opTime' || item.prop === 'ctime'">
<template v-if="scope.row[item.prop]">
{{dateFormatByAppearance(scope.row[item.prop])}}
</template>
<template v-else>
<span>-</span>
</template>
</template>
<template v-else-if="item.prop === 'cuser' || item.prop === 'uuser'">
<template v-if="scope.row[item.prop]">
{{scope.row[item.prop].username || '-'}}
</template>
<template v-else>
<span>-</span>
</template>
</template>
<template v-else-if="item.prop === 'description'">
<span class="list-desc" :title="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
</template>
<template v-else-if="item.prop === 'status'">
<el-switch class="card-enable"
v-model="scope.row.status"
active-color="#38ACD2"
inactive-color="#C0CEDB"
:active-value="1"
:inactive-value="0"
@change="changeStatus($event,scope.row.knowledgeId)"
>
</el-switch>
</template>
<span v-else>{{scope.row[item.prop] || '-'}}</span>
</template>
</el-table-column>
<template v-slot:empty >
<div class="table-no-data" v-if="isNoData">
<div class="table-no-data__title">{{ $t('npm.noData') }}</div>
</div>
</template>
<template #default="scope" :column="item">
<template v-if="item.prop === 'name'" >
<template v-if="scope.row.i18n">
<span :title="scope.row[item.prop]">{{$t(scope.row.i18n)}}</span>
</template>
<template v-else-if="scope.row.name">
<span :title="scope.row[item.prop]">{{scope.row.name}}</span>
</template>
<template v-else>
<span>-</span>
</template>
</template>
<template v-else-if="item.prop === 'category'">
<span >{{tagCategoryText(scope.row[item.prop])}}</span>
</template>
<template v-else-if="item.prop === 'source'">
<span class="type-tag">{{tagSourceText(scope.row[item.prop])}}</span>
</template>
<template v-else-if="item.prop === 'opTime' || item.prop === 'ctime'">
<template v-if="scope.row[item.prop]">
{{dateFormatByAppearance(scope.row[item.prop])}}
</template>
<template v-else>
<span>-</span>
</template>
</template>
<template v-else-if="item.prop === 'cuser' || item.prop === 'uuser'">
<template v-if="scope.row[item.prop]">
{{scope.row[item.prop].username || '-'}}
</template>
<template v-else>
<span>-</span>
</template>
</template>
<template v-else-if="item.prop === 'description'">
<span class="list-desc" :title="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
</template>
<template v-else-if="item.prop === 'status'">
<el-switch class="card-enable"
v-model="scope.row.status"
active-color="#38ACD2"
inactive-color="#C0CEDB"
:active-value="1"
:inactive-value="0"
@change="changeStatus($event,scope.row.knowledgeId)"
>
</el-switch>
</template>
<span v-else>{{scope.row[item.prop] || '-'}}</span>
</template>
</el-table-column>
</el-table>
</el-table>
</template>
<script>
@@ -92,6 +98,12 @@ import table from '@/mixins/table'
import { knowledgeBaseCategory, knowledgeBaseSource } from '@/utils/constants'
export default {
name: 'KnowledgeBaseTableForRow',
props: {
isNoData: {
type: Boolean,
default: false
}
},
mixins: [table],
data () {
return {