feat：notebook列表页面 二级页面查看功能完成
This commit is contained in:
zyh
284
nezha-fronted/src/components/page/notebook/notebook.vue
Normal file
284
nezha-fronted/src/components/page/notebook/notebook.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div v-my-loading="preferenceLoading">
|
||||
<nzDetailView
|
||||
v-my-loading="detailViewLoading || tools.loading"
|
||||
v-if="detailType !== 'list'&&!preferenceLoading"
|
||||
:api="url"
|
||||
ref="detailList"
|
||||
:layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
|
||||
:from="fromRoute.notebook"
|
||||
:search-msg="searchMsg"
|
||||
:detailType="detailType"
|
||||
:detailViewRightObj="detailViewRightObj"
|
||||
:dataLength="tableData.length"
|
||||
@search="search"
|
||||
@changeDetailType="changeDetailType"
|
||||
@getTableData="getTableData"
|
||||
>
|
||||
<template v-slot:top-tool-left>
|
||||
</template>
|
||||
<template v-slot:top-tool-right>
|
||||
<button id="asset-create-asset" v-has="'role_add'" :title="$t('asset.createAsset')" class="top-tool-btn" @click.stop="add">
|
||||
<i class="nz-icon nz-icon-create-square"></i>
|
||||
</button>
|
||||
<top-tool-more-options
|
||||
:delete-objs="batchDeleteObjs"
|
||||
ref="export"
|
||||
id="model"
|
||||
:params="searchLabel"
|
||||
:params2="searchCheckBox"
|
||||
:permissions="{
|
||||
import: 'role_add',
|
||||
export: 'role_edit'
|
||||
}"
|
||||
class="top-tool-export margin-r-10 margin-l-10"
|
||||
export-file-name="notebook"
|
||||
export-url="/visual/notebook/export"
|
||||
import-url="/visual/notebook/import"
|
||||
@afterImport="getTableData"
|
||||
v-has="['role_add','role_edit']"
|
||||
>
|
||||
</top-tool-more-options>
|
||||
</template>
|
||||
<template v-slot:nz-detail-view-list>
|
||||
<notebook-detail
|
||||
class="data-detail"
|
||||
ref="dataDetail"
|
||||
:orderByFa="orderBy"
|
||||
v-my-loading="tools.loading"
|
||||
:detailViewRightObj="detailViewRightObj"
|
||||
:api="url"
|
||||
:table-data="tableData"
|
||||
@detailViewRightShow="detailViewRightShow"
|
||||
@orderDetail="orderDetail"
|
||||
>
|
||||
</notebook-detail>
|
||||
</template>
|
||||
<!-- 分页组件 -->
|
||||
<template v-slot:pagination>
|
||||
<el-pagination
|
||||
@current-change="pageNo"
|
||||
:current-page.sync="pageObj.pageNo"
|
||||
:page-size="20"
|
||||
:total="pageObj.total"
|
||||
layout="prev, slot, next"
|
||||
small
|
||||
>
|
||||
<template>
|
||||
<el-input-number v-if="showInput" ref="jumpInput" v-model="pageObj.pageNo" :controls="false" :min="1" :max="pageObj.pages" class="jump-input" @change="getTableData" @keyup.enter.native="getTableData" size="mini"/>
|
||||
<span class="jump-pages">/ {{pageObj.pages}}</span>
|
||||
</template>
|
||||
</el-pagination>
|
||||
</template>
|
||||
</nzDetailView>
|
||||
<nz-data-list
|
||||
ref="dataList"
|
||||
:api="url"
|
||||
v-if="detailType === 'list'&&!preferenceLoading"
|
||||
:layout="['searchInput', 'elementSet', 'pagination','detailViewSet']"
|
||||
:custom-table-title.sync="tools.customTableTitle"
|
||||
:from="fromRoute.notebook"
|
||||
:search-msg="searchMsg"
|
||||
@search="search"
|
||||
:detailType="detailType"
|
||||
@changeDetailType="changeDetailType"
|
||||
@getTableData="getTableData"
|
||||
>
|
||||
<template v-slot:top-tool-right>
|
||||
<button v-has="'role_add'" :title="$t('overall.createDatacenter')" class="top-tool-btn margin-r-10" type="button" @click="add">
|
||||
<i class="nz-icon-create-square nz-icon"></i>
|
||||
</button>
|
||||
<top-tool-more-options
|
||||
:delete-objs="batchDeleteObjs"
|
||||
ref="export"
|
||||
id="model"
|
||||
:params="searchLabel"
|
||||
:permissions="{
|
||||
import: 'role_add',
|
||||
export: 'role_edit'
|
||||
}"
|
||||
class="top-tool-export margin-r-10"
|
||||
export-file-name="notebook"
|
||||
export-url="/visual/notebook/export"
|
||||
import-url="/visual/notebook/import"
|
||||
@afterImport="getTableData"
|
||||
v-has="['role_add','role_edit','role_delete']"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div>
|
||||
<el-dropdown-item :disabled="batchDeleteObjs.length==0" :class="'nz-el-dropdown-menu-item'">
|
||||
<delete-button
|
||||
ref="deleteButton"
|
||||
:single="false"
|
||||
:from="'notebook'"
|
||||
:forceDeleteShow="false"
|
||||
:deleteTitle="'overall.notebook'"
|
||||
:type="'link'"
|
||||
:title="$t('overall.batchDel')"
|
||||
id="account-list-batch-delete"
|
||||
v-has="'role_delete'"
|
||||
:delete-objs="batchDeleteObjs"
|
||||
api="visual/notebook"
|
||||
@after="getTableData"
|
||||
></delete-button>
|
||||
</el-dropdown-item>
|
||||
</div>
|
||||
</template>
|
||||
</top-tool-more-options>
|
||||
</template>
|
||||
<template v-slot:default="slotProps">
|
||||
<notebook-table
|
||||
ref="dataTable"
|
||||
:orderByFa="orderBy"
|
||||
v-my-loading="tools.loading"
|
||||
:loading="tools.loading"
|
||||
:api="url"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="mainTableHeight"
|
||||
:table-data="tableData"
|
||||
@del="del"
|
||||
@edit="edit"
|
||||
@copy="copy"
|
||||
@orderBy="tableDataSort"
|
||||
@reload="getTableData"
|
||||
@topology="topology"
|
||||
@selectionChange="selectionChange"
|
||||
@showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></notebook-table>
|
||||
</template>
|
||||
<!-- 分页组件 -->
|
||||
<template v-slot:pagination>
|
||||
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
|
||||
</template>
|
||||
</nz-data-list>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import deleteButton from '@/components/common/deleteButton'
|
||||
import nzDataList from '@/components/common/table/nzDataList'
|
||||
import dataListMixin from '@/components/common/mixin/dataList'
|
||||
import notebookTable from '@/components/common/table/settings/notebookTable'
|
||||
import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
|
||||
import nzDetailView from '@/components/common/detailView/nzDetailView'
|
||||
import detailViewMixin from '@/components/common/mixin/detailViewMixin'
|
||||
import notebookDetail from '@/components/common/detailView/list/notebook/notebookDetail'
|
||||
import bus from '@/libs/bus'
|
||||
export default {
|
||||
name: 'notebook',
|
||||
components: {
|
||||
deleteButton,
|
||||
nzDataList,
|
||||
notebookTable,
|
||||
topToolMoreOptions,
|
||||
nzDetailView,
|
||||
notebookDetail
|
||||
},
|
||||
mixins: [dataListMixin, detailViewMixin],
|
||||
data () {
|
||||
return {
|
||||
url: 'visual/notebook',
|
||||
tableId: 'notebookTable', // 需要分页的table的id，用于记录每页数量
|
||||
blankObject: {
|
||||
id: '',
|
||||
name: '',
|
||||
type: 'none',
|
||||
remark: 'none'
|
||||
},
|
||||
searchMsg: { // 给搜索框子组件传递的信息
|
||||
zheze_none: true,
|
||||
searchLabelList: [
|
||||
{
|
||||
name: 'ID',
|
||||
type: 'input',
|
||||
label: 'ids',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: this.$t('overall.name'),
|
||||
type: 'input',
|
||||
label: 'name',
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.$store.commit('setNotebookEdit', true)
|
||||
const username = localStorage.getItem('nz-username')
|
||||
const date = bus.timeFormate(bus.computeTimezone(new Date().getTime()))
|
||||
const name = username + ' ' + date
|
||||
if (this.detailType === 'list') {
|
||||
this.$refs.dataList.showBottomBox('notebookTab', { name })
|
||||
} else {
|
||||
this.detailViewRightObj = this.$lodash.cloneDeep({ name })
|
||||
}
|
||||
},
|
||||
copy (u) {
|
||||
this.$confirm(this.$t('tip.confirmDuplicateNotebook'), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const username = localStorage.getItem('nz-username')
|
||||
const date = bus.timeFormate(bus.computeTimezone(new Date().getTime()))
|
||||
const param = {
|
||||
id: u.id,
|
||||
name: username + ' ' + date
|
||||
}
|
||||
this.$post('/visual/notebook/duplicate', param).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.getTableData()
|
||||
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const searchKeys = {
|
||||
// key: path 键
|
||||
// value: vue set 参数
|
||||
pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
|
||||
pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
|
||||
orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
|
||||
ids: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'ids',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
id: 'ids',
|
||||
label: 'ids',
|
||||
name: 'ID',
|
||||
type: 'input',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
name: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'name',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
id: 'name',
|
||||
label: 'name',
|
||||
name: 'Name',
|
||||
type: 'input',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
}
|
||||
}
|
||||
this.initQueryFromPath(searchKeys)
|
||||
},
|
||||
mounted () {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user