de/frontend/src/views/system/plugin/index.vue
2021-05-11 16:32:21 +08:00

163 lines
4.9 KiB
Vue

<template>
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<complex-table
:data="data"
:columns="columns"
:search-config="searchConfig"
:pagination-config="paginationConfig"
@search="search"
>
<template #toolbar>
<!-- <el-button @click="create">{{ $t('plugin.local_install') }}</el-button> -->
<el-upload
:action="baseUrl+'api/plugin/upload'"
:multiple="false"
:show-file-list="false"
:file-list="fileList"
accept=".zip"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-error="uploadFail"
name="file"
:headers="headers"
>
<el-button size="mini" type="primary" :disabled="uploading">
<span v-if="!uploading" style="font-size: 12px;">{{ $t('plugin.local_install') }}</span>
<span v-if="uploading" style="font-size: 12px;"><i class="el-icon-loading" /> {{ $t('dataset.uploading') }}</span>
</el-button>
</el-upload>
</template>
<el-table-column prop="name" :label="$t('plugin.name')" />
<el-table-column prop="free" :label="$t('plugin.free')" />
<el-table-column prop="cost" :label="$t('plugin.cost')" />
<el-table-column :show-overflow-tooltip="true" prop="descript" :label="$t('plugin.descript')" />
<el-table-column prop="version" :label="$t('plugin.version')" />
<el-table-column prop="creator" :label="$t('plugin.creator')" />
<el-table-column prop="installTime" :label="$t('plugin.install_time')">
<template v-slot:default="scope">
<span>{{ scope.row.installTime | timestampFormatDate }}</span>
</template>
</el-table-column>
<fu-table-operations :buttons="buttons" label="操作" fix />
</complex-table>
</layout-content>
</template>
<script>
import LayoutContent from '@/components/business/LayoutContent'
import ComplexTable from '@/components/business/complex-table'
import { checkPermission } from '@/utils/permission'
import { formatCondition } from '@/utils/index'
import { pluginLists } from '@/api/system/plugin'
import { getToken } from '@/utils/auth'
export default {
components: { ComplexTable, LayoutContent },
data() {
return {
header: '',
columns: [],
buttons: [
{
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.del,
show: checkPermission(['user:del'])
}
],
searchConfig: {
useQuickSearch: false,
quickPlaceholder: '按名称搜索',
components: [
{ field: 'name', label: '名称', component: 'FuComplexInput' }
// {
// field: 'u.enabled',
// label: '状态',
// component: 'FuComplexSelect',
// options: [
// { label: '启用', value: '1' },
// { label: '禁用', value: '0' }
// ],
// multiple: false
// }
]
},
paginationConfig: {
currentPage: 1,
pageSize: 10,
total: 0
},
data: [],
uploading: false,
baseUrl: process.env.VUE_APP_BASE_API,
fileList: [],
headers: { Authorization: getToken() }
}
},
mounted() {
this.search()
},
methods: {
search(condition) {
const temp = formatCondition(condition)
const param = temp || {}
const { currentPage, pageSize } = this.paginationConfig
pluginLists(currentPage, pageSize, param).then(response => {
this.data = response.data.listObject
this.paginationConfig.total = response.data.itemCount
})
},
beforeUpload(file) {
this.uploading = true
},
uploadFail(response, file, fileList) {
this.uploading = false
},
uploadSuccess(response, file, fileList) {
console.log(response)
console.log(file)
console.log(fileList)
// this.path = response.data.path
// this.fields = response.data.fields
// this.data = response.data.data
// const datas = this.data
// this.$refs.plxTable.reloadData(datas)
// if (file.name.lastIndexOf('.') > 0) {
// this.name = file.name.substring(0, file.name.lastIndexOf('.'))
// }
// this.fileList = fileList
this.uploading = false
},
del(row) {
this.$confirm(this.$t('user.delete_confirm'), '', {
confirmButtonText: this.$t('commons.confirm'),
cancelButtonText: this.$t('commons.cancel'),
type: 'warning'
}).then(() => {
// delUser(encodeURIComponent(row.userId)).then(res => {
// this.$success(this.$t('commons.delete_success'))
// this.search()
// })
}).catch(() => {
this.$info(this.$t('commons.delete_cancel'))
})
}
}
}
</script>
<style scoped>
</style>