Ver Fonte

feat:地区列表迁移完成

liujt há 1 mês atrás
pai
commit
66fbf13d11

+ 37 - 0
src/api/config/elencoRegionale.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 获得地区树
+export async function getAreaTree() {
+  const res = await request.get('/eam/area/tree')
+  if (res.data.code == 0) {
+    return res.data.data
+  }
+  return Promise.reject(new Error(res.data.message))
+}
+
+// 获得子级地区
+export async function getChildrenArea(id) {
+  const res = await request.get('/system/area/get-children?id=' + id)
+  if (res.data.code == 0) {
+    return res.data.data
+  }
+  return Promise.reject(new Error(res.data.message))
+}
+
+// 根据ID列表获取地区
+export async function getAreaListByIds(ids) {
+  const res = await request.get('/system/area/get-by-ids?ids=' + ids)
+  if (res.data.code == 0) {
+    return res.data.data
+  }
+  return Promise.reject(new Error(res.data.message))
+}
+
+// 根据IP获取地区信息
+export async function getAreaByIp(ip) {
+  const res = await request.get('/eam/area/get-by-ip?ip=' + ip)
+  if (res.data.code != '-1') {
+    return res.data
+  }
+  return Promise.reject(new Error(res.data.message))
+}

+ 96 - 0
src/views/config/elencoRegionale/components/AreaForm.vue

@@ -0,0 +1,96 @@
+<template>
+  <ele-modal
+    :visible.sync="visible"
+    title="IP 查询"
+    width="500px"
+    append-to-body
+    @close="cancel"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      class="create-form"
+    >
+      <el-form-item label="IP:" prop="ip">
+        <el-input v-model="form.ip" placeholder="请输入" />
+      </el-form-item>
+      <el-form-item label="地址:" prop="result">
+        <el-input v-model="form.result" placeholder="展示查询 IP 结果" readonly />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="save" :loading="loading">
+        确定
+      </el-button>
+    </template>
+  </ele-modal>
+</template>
+
+<script>
+import * as AreaApi from '@/api/config/elencoRegionale'
+
+const defForm = {
+  ip: '',
+  result: ''
+}
+
+export default {
+  name: 'AreaForm',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      form: { ...defForm },
+      rules: {
+        ip: [{ required: true, message: 'IP 地址不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    /** 打开弹窗 */
+    open() {
+      this.form = { ...defForm }
+      this.visible = true
+    },
+
+    /** 取消 */
+    cancel() {
+      this.form = { ...defForm }
+      this.visible = false
+    },
+
+    /** 保存 */
+    save() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.loading = true
+          const data = { ip: this.form.ip.trim() }
+          AreaApi.getAreaByIp(data.ip)
+            .then((res) => {
+              console.log(res)
+              if(res.code == 0) {
+                this.form.result = res.data
+                this.$message.success('查询成功')
+              } else {
+                this.$message.error(res.message)
+              }
+              
+            })
+            .catch((e) => {
+              console.error(e)
+            })
+            .finally(() => {
+              this.loading = false
+            })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

+ 104 - 0
src/views/config/elencoRegionale/index.vue

@@ -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>