|
@@ -0,0 +1,104 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="ele-body">
|
|
|
|
|
+ <el-card shadow="never" v-loading="loading">
|
|
|
|
|
+ <!-- 操作栏 -->
|
|
|
|
|
+ <div class="toolbar">
|
|
|
|
|
+ <el-button
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ icon="el-icon-search"
|
|
|
|
|
+ class="ele-btn-icon"
|
|
|
|
|
+ @click="openForm()"
|
|
|
|
|
+ >
|
|
|
|
|
+ IP 查询
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 数据表格 -->
|
|
|
|
|
+ <ele-pro-table
|
|
|
|
|
+ ref="table"
|
|
|
|
|
+ row-key="id"
|
|
|
|
|
+ :columns="columns"
|
|
|
|
|
+ :datasource="datasource"
|
|
|
|
|
+ :need-page="false"
|
|
|
|
|
+ :default-expand-all="false"
|
|
|
|
|
+ :cache-key="cacheKeyUrl"
|
|
|
|
|
+
|
|
|
|
|
+ />
|
|
|
|
|
+ </el-card>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 表单弹窗:添加/修改 -->
|
|
|
|
|
+ <AreaForm ref="formRef" @success="reload" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import * as AreaApi from '@/api/config/elencoRegionale'
|
|
|
|
|
+import AreaForm from './components/AreaForm.vue'
|
|
|
|
|
+import { formatTreeData } from 'ele-admin'
|
|
|
|
|
+
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: 'SystemArea',
|
|
|
|
|
+ components: {
|
|
|
|
|
+ AreaForm
|
|
|
|
|
+ },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ cacheKeyUrl: 'systemAreaTable',
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ // 表格列配置
|
|
|
|
|
+ columns: [
|
|
|
|
|
+ {
|
|
|
|
|
+ columnKey: 'index',
|
|
|
|
|
+ label: '序号',
|
|
|
|
|
+ type: 'index',
|
|
|
|
|
+ width: 55,
|
|
|
|
|
+ align: 'center',
|
|
|
|
|
+ showOverflowTooltip: true,
|
|
|
|
|
+ fixed: 'left'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ prop: 'id',
|
|
|
|
|
+ label: '编号',
|
|
|
|
|
+ headerAlign: 'center',
|
|
|
|
|
+ align: 'center',
|
|
|
|
|
+ showOverflowTooltip: true,
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ prop: 'name',
|
|
|
|
|
+ label: '地名',
|
|
|
|
|
+ headerAlign: 'center',
|
|
|
|
|
+ align: 'center',
|
|
|
|
|
+ showOverflowTooltip: true,
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ /* 表格数据源 */
|
|
|
|
|
+ datasource() {
|
|
|
|
|
+ return AreaApi.getAreaTree().then((res) => {
|
|
|
|
|
+ return formatTreeData(res, (item, parent) => {
|
|
|
|
|
+ return Object.assign({}, item, {
|
|
|
|
|
+ parentId: parent?.id || '0'
|
|
|
|
|
+ })
|
|
|
|
|
+ }, 'children')
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ /* 刷新表格 */
|
|
|
|
|
+ reload() {
|
|
|
|
|
+ this.$refs.table.reload()
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ /** 添加/修改操作 */
|
|
|
|
|
+ openForm() {
|
|
|
|
|
+ this.$refs.formRef.open()
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+.toolbar {
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|