CN-906 fix: 知识库列表简版；调整一些目录名
This commit is contained in:
chenjinsong
178
src/components/table/administration/ChartTable.vue
Normal file
178
src/components/table/administration/ChartTable.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<el-table
|
||||
id="chartTable"
|
||||
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"
|
||||
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>{{$t(scope.row.i18n)}}</span>
|
||||
</template>
|
||||
<template v-else-if="scope.row.name">
|
||||
<span>{{scope.row.name}}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>-</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'buildIn'">
|
||||
<template v-if="scope.row[item.prop]==1">
|
||||
{{$t('config.chart.buildIn.yes')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==0">
|
||||
{{$t('config.chart.buildIn.no')}}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{scope.row[item.prop]}}
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'panelId'">
|
||||
<template v-if="scope.row[item.prop]==panelTypeAndRouteMapping.trafficSummary">
|
||||
{{$t('trafficSummary.trafficSummary')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.networkAppPerformance">
|
||||
{{$t('networkAppPerformance.networkAppPerformance')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.dnsServiceInsights">
|
||||
{{$t('dnsServiceInsights.dnsServiceInsights')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.ipEntityDetail">
|
||||
{{$t('entities.ipEntityDetail')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.domainEntityDetail">
|
||||
{{$t('entities.domainEntityDetail')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==panelTypeAndRouteMapping.appEntityDetail">
|
||||
{{$t('entities.appEntityDetail')}}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{scope.row[item.prop]}}
|
||||
</template>
|
||||
</template>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
:width="operationWidth"
|
||||
fixed="right">
|
||||
<template #header>
|
||||
<div class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div class="table-operation-items">
|
||||
<button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="cn-icon cn-icon-more-arrow-down"></i>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu >
|
||||
<el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row['buildIn'] === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import table from '@/mixins/table'
|
||||
import { panelTypeAndRouteMapping } from '@/utils/constants'
|
||||
import { api } from '@/utils/api'
|
||||
|
||||
export default {
|
||||
name: 'chartTable',
|
||||
mixins: [table],
|
||||
data () {
|
||||
return {
|
||||
panelTypeAndRouteMapping: panelTypeAndRouteMapping,
|
||||
tableTitle: [ // 原table列
|
||||
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 110,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('config.chart.name'),
|
||||
prop: 'name',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.params'),
|
||||
prop: 'params',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.panel'),
|
||||
prop: 'panelId',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.i18n'),
|
||||
prop: 'i18n',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.type'),
|
||||
prop: 'type',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.x'),
|
||||
prop: 'x',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.y'),
|
||||
prop: 'y',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.w'),
|
||||
prop: 'w',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.h'),
|
||||
prop: 'h',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.buildIn'),
|
||||
prop: 'buildIn',
|
||||
show: true
|
||||
}, {
|
||||
label: this.$t('config.chart.remark'),
|
||||
prop: 'remark',
|
||||
show: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
189
src/components/table/administration/GalaxyProxyTable.vue
Normal file
189
src/components/table/administration/GalaxyProxyTable.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<template>
|
||||
<el-table
|
||||
class="galaxy-proxy-table"
|
||||
id="userTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
tooltip-effect="light"
|
||||
border
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
align="center"
|
||||
type="selection"
|
||||
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}`"
|
||||
:show-overflow-tooltip="['targetParam', 'targetHeader', 'preHandle', 'postHandle'].indexOf(item.prop) === -1"
|
||||
>
|
||||
<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 === 'targetParam' || item.prop === 'targetHeader'">
|
||||
<template v-if="scope.row[item.prop]">
|
||||
<el-popover
|
||||
width="250px"
|
||||
popper-class="js-code-highlight"
|
||||
placement="left"
|
||||
trigger="hover"
|
||||
>
|
||||
<template #reference>
|
||||
<span style="color: #41ABFD">{...}</span>
|
||||
</template>
|
||||
<div class="highlight-box">
|
||||
<span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><i class="el-icon-document-copy"></i></span>
|
||||
<highlightjs
|
||||
language="json"
|
||||
:code="scope.row[item.prop]"
|
||||
/>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'preHandle' || item.prop === 'postHandle'">
|
||||
<template v-if="scope.row[item.prop]">
|
||||
<el-popover
|
||||
width="250px"
|
||||
popper-class="js-code-highlight"
|
||||
placement="left"
|
||||
trigger="hover"
|
||||
>
|
||||
<template #reference>
|
||||
<span style="color: #41ABFD">{...}</span>
|
||||
</template>
|
||||
<div class="highlight-box">
|
||||
<span class="highlight-box__copy-btn" @click="copyValue(scope.row[item.prop])"><i class="el-icon-document-copy"></i></span>
|
||||
<highlightjs
|
||||
language="js"
|
||||
:code="scope.row[item.prop]"
|
||||
/>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
<template v-else>-</template>
|
||||
</template>
|
||||
<span v-else>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
:width="operationWidth"
|
||||
fixed="right">
|
||||
<template #header>
|
||||
<div class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div class="table-operation-items">
|
||||
<button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="cn-icon cn-icon-more-arrow-down"></i>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu >
|
||||
<el-dropdown-item :command="['copy', scope.row]"><i class="cn-icon cn-icon-override"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item :command="['delete', scope.row]"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
<el-dropdown-item :command="['debug', scope.row]"><i class="cn-icon cn-icon-debug"></i><span class="operation-dropdown-text">{{$t('overall.debug')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import table from '@/mixins/table'
|
||||
import { copyValue } from '@/utils/tools'
|
||||
|
||||
export default {
|
||||
name: 'galaxyProxyTable',
|
||||
mixins: [table],
|
||||
data () {
|
||||
return {
|
||||
tableTitle: [ // 原始table列
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 100,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('overall.name'),
|
||||
prop: 'name',
|
||||
show: true,
|
||||
sortable: 'custom',
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('overall.path'),
|
||||
prop: 'path',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('overall.method'),
|
||||
prop: 'method',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('overall.version'),
|
||||
prop: 'version',
|
||||
show: true,
|
||||
minWidth: 150
|
||||
}, {
|
||||
label: this.$t('galaxyProxy.targetUrl'),
|
||||
prop: 'targetUrl',
|
||||
show: true,
|
||||
width: 250
|
||||
}, {
|
||||
label: this.$t('galaxyProxy.targetParam'),
|
||||
prop: 'targetParam',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('galaxyProxy.targetHeader'),
|
||||
prop: 'targetHeader',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: 'Pre handle',
|
||||
prop: 'preHandle',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: 'Post handle',
|
||||
prop: 'postHandle',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('overall.remark'),
|
||||
prop: 'remark',
|
||||
show: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
return {
|
||||
copyValue
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
109
src/components/table/administration/I18nTable.vue
Normal file
109
src/components/table/administration/I18nTable.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<el-table
|
||||
id="i18nTable"
|
||||
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"
|
||||
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}`"
|
||||
>
|
||||
<template #header>
|
||||
<span class="data-column__span">{{item.label}}</span>
|
||||
<div class="col-resize-area"></div>
|
||||
</template>
|
||||
<template #default="scope" :column="item">
|
||||
<span>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
:width="operationWidth"
|
||||
fixed="right">
|
||||
<template #header>
|
||||
<div class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div class="table-operation-items">
|
||||
<button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="cn-icon cn-icon-more-arrow-down"></i>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu >
|
||||
<el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import table from '@/mixins/table'
|
||||
import { api } from '@/utils/api'
|
||||
|
||||
export default {
|
||||
name: 'I18nTable',
|
||||
mixins: [table],
|
||||
data () {
|
||||
return {
|
||||
url: api.i18nLang,
|
||||
tableTitle: [ // 原始table列
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 100,
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
label: this.$t('config.i18n.name'),
|
||||
prop: 'name',
|
||||
show: true,
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
label: this.$t('config.i18n.code'),
|
||||
prop: 'code',
|
||||
show: true,
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
label: this.$t('config.i18n.lang'),
|
||||
prop: 'lang',
|
||||
show: true,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('config.i18n.value'),
|
||||
prop: 'value',
|
||||
show: true,
|
||||
width: 150
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
151
src/components/table/administration/OperationLogTable.vue
Normal file
151
src/components/table/administration/OperationLogTable.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<el-table
|
||||
id="roleTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
tooltip-effect="light"
|
||||
border
|
||||
class="no-operation"
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
align="center"
|
||||
type="selection"
|
||||
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']"
|
||||
:width="`${item.width}`"
|
||||
class="data-column"
|
||||
:show-overflow-tooltip="['params', 'response'].indexOf(item.prop) > -1"
|
||||
>
|
||||
<template #header>
|
||||
<span class="data-column__span">{{item.label}}</span>
|
||||
<div class="col-resize-area"></div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<span v-if="item.prop === 'duration'">
|
||||
{{scope.row[item.prop]}}ms
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'state'">
|
||||
<template v-if="scope.row[item.prop]==operationLogStateMapping.success">
|
||||
{{$t('operationLog.state.success')}}
|
||||
</template>
|
||||
<template v-else-if="scope.row[item.prop]==operationLogStateMapping.fail">
|
||||
{{$t('operationLog.state.fail')}}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{scope.row[item.prop]}}
|
||||
</template>
|
||||
</span>
|
||||
<span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
|
||||
<span v-else-if="item.prop === 'ctime'">{{dateFormatByAppearance(scope.row[item.prop])}}</span>
|
||||
<template v-else-if="item.prop === 'params' || item.prop === 'response'">
|
||||
<span>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import table from '@/mixins/table'
|
||||
import { operationLogStateMapping } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: 'roleTable',
|
||||
mixins: [table],
|
||||
data () {
|
||||
return {
|
||||
operationLogStateMapping: operationLogStateMapping,
|
||||
tableTitle: [
|
||||
{
|
||||
label: this.$t('config.operationlog.id'),
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 100
|
||||
}, {
|
||||
label: this.$t('config.operationlog.username'),
|
||||
prop: 'username',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('config.operationlog.ip'),
|
||||
prop: 'ip',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('config.operationlog.operation'),
|
||||
prop: 'operation',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('overall.type'),
|
||||
prop: 'type',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('config.operationlog.state'),
|
||||
prop: 'state',
|
||||
show: true
|
||||
},
|
||||
// {
|
||||
// label: this.$t('config.operationlog.userId'),
|
||||
// prop: 'userId',
|
||||
// show: false,
|
||||
// },
|
||||
{
|
||||
label: this.$t('config.operationlog.operaId'),
|
||||
prop: 'operaId',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
label: this.$t('config.operationlog.createDate'),
|
||||
prop: 'ctime',
|
||||
show: true
|
||||
},
|
||||
{
|
||||
label: this.$t('config.operationlog.time'),
|
||||
prop: 'duration',
|
||||
show: false
|
||||
},
|
||||
{
|
||||
label: this.$t('config.operationlog.params'),
|
||||
prop: 'params',
|
||||
show: false,
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
label: this.$t('config.operationlog.response'),
|
||||
prop: 'response',
|
||||
show: false,
|
||||
width: 150
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatUsername (row) {
|
||||
if (row.username) {
|
||||
return row.username
|
||||
} else if (row.operation === 'login' && !row.username) { // 如果是登录 且登录失败
|
||||
return JSON.parse(row.params).username
|
||||
} else {
|
||||
return '-'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
104
src/components/table/administration/RoleTable.vue
Normal file
104
src/components/table/administration/RoleTable.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<el-table
|
||||
id="roleTable"
|
||||
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"
|
||||
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>{{$t(scope.row.i18n)}}</span>
|
||||
</template>
|
||||
<template v-else-if="scope.row.name">
|
||||
<span>{{scope.row.name}}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>-</span>
|
||||
</template>
|
||||
</template>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
:width="operationWidth"
|
||||
fixed="right">
|
||||
<template #header>
|
||||
<div class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div class="table-operation-items">
|
||||
<button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="cn-icon cn-icon-more-arrow-down"></i>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu >
|
||||
<el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import table from '@/mixins/table'
|
||||
export default {
|
||||
name: 'roleTable',
|
||||
mixins: [table],
|
||||
data () {
|
||||
return {
|
||||
tableTitle: [ // 原table列
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 100,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('config.roles.name'),
|
||||
prop: 'name',
|
||||
show: true,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('overall.remark'),
|
||||
prop: 'remark',
|
||||
show: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
173
src/components/table/administration/UserTable.vue
Normal file
173
src/components/table/administration/UserTable.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<el-table
|
||||
id="userTable"
|
||||
ref="dataTable"
|
||||
:data="tableData"
|
||||
:height="height"
|
||||
empty-text=""
|
||||
border
|
||||
@header-dragend="dragend"
|
||||
@sort-change="tableDataSort"
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
align="center"
|
||||
type="selection"
|
||||
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}`"
|
||||
>
|
||||
<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 === 'roles'">
|
||||
<template v-if="scope.row[item.prop]">
|
||||
{{scope.row[item.prop].map(t=>t.name).join(',')}}
|
||||
</template>
|
||||
<template v-else>
|
||||
<span>-</span>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="item.prop === 'lastLoginTime'">
|
||||
<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 === 'status'">
|
||||
<el-switch
|
||||
v-if="scope.row.id"
|
||||
v-model="scope.row.status"
|
||||
active-value="1"
|
||||
:disabled="(scope.row.username === loginName) || (scope.row.username==='admin' && scope.row.id==1) "
|
||||
inactive-value="0"
|
||||
@change="()=>{statusChange(scope.row)}">
|
||||
</el-switch>
|
||||
</template>
|
||||
<span v-else>{{scope.row[item.prop]}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
:width="operationWidth"
|
||||
fixed="right">
|
||||
<template #header>
|
||||
<div class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div class="table-operation-items">
|
||||
<button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-edit"></i></button>
|
||||
<el-dropdown size="medium" trigger="hover" @command="tableOperation">
|
||||
<div class="table-operation-item table-operation-item--more">
|
||||
<i class="cn-icon cn-icon-more-arrow-down"></i>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu >
|
||||
<el-dropdown-item :command="['delete', scope.row]" :disabled="scope.row.id === 1"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import table from '@/mixins/table'
|
||||
import { put } from '@/utils/http'
|
||||
import { storageKey } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: 'userTable',
|
||||
mixins: [table],
|
||||
data () {
|
||||
return {
|
||||
loginName: localStorage.getItem(storageKey.username),
|
||||
tableTitle: [ // 原始table列
|
||||
{
|
||||
label: 'ID',
|
||||
prop: 'id',
|
||||
show: true,
|
||||
width: 100,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('config.user.name'),
|
||||
prop: 'name',
|
||||
show: true,
|
||||
sortable: 'custom'
|
||||
}, {
|
||||
label: this.$t('config.user.username'),
|
||||
prop: 'username',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('config.user.roles'),
|
||||
prop: 'roles',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: 'E-mail',
|
||||
prop: 'email',
|
||||
show: true,
|
||||
minWidth: 150
|
||||
}, {
|
||||
label: this.$t('config.user.lastLoginTime'),
|
||||
prop: 'lastLoginTime',
|
||||
show: true,
|
||||
width: 200
|
||||
}, {
|
||||
label: this.$t('config.user.lastLoginIp'),
|
||||
prop: 'lastLoginIp',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('config.user.source'),
|
||||
prop: 'source',
|
||||
show: true,
|
||||
width: 150
|
||||
}, {
|
||||
label: this.$t('config.user.enable'),
|
||||
prop: 'status',
|
||||
show: true,
|
||||
width: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
statusChange (user) {
|
||||
if (user.roles) {
|
||||
user.roleIds = user.roles.map(t => t.id).join(',')
|
||||
}
|
||||
// if (!user.id){
|
||||
// return
|
||||
// }
|
||||
put('sys/user', user).then(response => {
|
||||
if (response.code === 200) {
|
||||
// this.rightBox.show = false
|
||||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
} else {
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
this.$emit('reload')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user