➕ 添加行政区划模块

src/api/base/region.js

@@ -0,0 +1,53 @@
+import request from '@/router/axios';
+
+export const getList = (current, size, params) => {
+  return request({
+    url: '/api/blade-system/region/list',
+    method: 'get',
+    params: {
+      ...params,
+      current,
+      size,
+    }
+  })
+}
+
+export const getLazyTree = (parentCode, params) => {
+  return request({
+    url: '/api/blade-system/region/lazy-tree',
+    method: 'get',
+    params: {
+      ...params,
+      parentCode
+    }
+  })
+}
+
+export const getDetail = (code) => {
+  return request({
+    url: '/api/blade-system/region/detail',
+    method: 'get',
+    params: {
+      code
+    }
+  })
+}
+
+export const remove = (id) => {
+  return request({
+    url: '/api/blade-system/region/remove',
+    method: 'post',
+    params: {
+      id,
+    }
+  })
+}
+
+export const submit = (row) => {
+  return request({
+    url: '/api/blade-system/region/submit',
+    method: 'post',
+    data: row
+  })
+}
+

src/views/base/region.vue

@@ -0,0 +1,244 @@
+<template>
+  <el-row>
+    <el-col :span="9">
+      <basic-container>
+        <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick"/>
+      </basic-container>
+    </el-col>
+    <el-col :span="15">
+      <basic-container>
+        <el-button-group>
+          <el-button type="primary" size="medium" icon="el-icon-circle-plus-outline" @click="addChildren">新增下级
+          </el-button>
+          <el-button type="primary" size="medium" icon="el-icon-delete" @click="handleDelete">删除</el-button>
+          <el-button type="primary" size="medium" icon="el-icon-upload2">导入</el-button>
+          <el-button type="primary" size="medium" icon="el-icon-download">导出</el-button>
+        </el-button-group>
+      </basic-container>
+      <basic-container>
+        <avue-form ref="form" :option="regionOption" v-model="regionForm" @submit="handleSubmit">
+          <template slot="code" slot-scope="{}">
+            <el-input placeholder="请输入区划子编号" v-model="regionForm.subCode">
+              <template slot="prepend">{{regionForm.parentCode}}</template>
+            </el-input>
+          </template>
+        </avue-form>
+      </basic-container>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import {getLazyTree, getDetail, submit, remove} from "@/api/base/region";
+  import {mapGetters} from "vuex";
+  import {validatenull} from "@/util/validate";
+
+  export default {
+    data() {
+      return {
+        treeData: [],
+        treeOption: {
+          nodeKey: 'id',
+          lazy: true,
+          treeLoad: function (node, resolve) {
+            const parentCode = (node.level === 0) ? "00" : node.data.id;
+            getLazyTree(parentCode).then(res => {
+              resolve(res.data.data.map(item => {
+                return {
+                  ...item,
+                  leaf: !item.hasChildren
+                }
+              }))
+            });
+          },
+          addBtn: false,
+          menu: false,
+          size: 'small',
+          props: {
+            labelText: '标题',
+            label: 'title',
+            value: 'value',
+            children: 'children'
+          }
+        },
+        regionForm: {},
+        regionOption: {
+          labelWidth: 100,
+          column: [
+            {
+              label: "父区划编号",
+              prop: "parentCode",
+              span: 24,
+              disabled: false,
+              rules: [{
+                required: true,
+                message: "请输入父区划编号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "区划编号",
+              prop: "code",
+              formslot: true,
+              span: 24,
+              rules: [{
+                required: true,
+                message: "请输入区划编号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "区划子编号",
+              prop: "subCode",
+              display: false,
+            },
+            {
+              label: "区划名称",
+              prop: "name",
+              span: 24,
+              rules: [{
+                required: true,
+                message: "请输入区划名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "区划等级",
+              prop: "level",
+              type: "radio",
+              dicUrl: "/api/blade-system/dict/dictionary?code=region",
+              props: {
+                label: "dictValue",
+                value: "dictKey"
+              },
+              dataType: "number",
+              span: 24,
+              rules: [{
+                required: true,
+                message: "请选择区划等级",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "区划排序",
+              prop: "sort",
+              type: "number",
+              span: 24,
+              rules: [{
+                required: true,
+                message: "请输入区划排序",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "区划备注",
+              prop: "remark",
+              type: "textarea",
+              minRows: 6,
+              span: 24,
+            },
+          ]
+        },
+        data: []
+      };
+    },
+    watch: {
+      'regionForm.subCode'() {
+        this.regionForm.code = this.regionForm.parentCode + this.regionForm.subCode;
+      }
+    },
+    computed: {
+      ...mapGetters(["permission"]),
+      permissionList() {
+        return {
+          addBtn: this.vaildData(this.permission.region_add, false),
+          viewBtn: this.vaildData(this.permission.region_view, false),
+          delBtn: this.vaildData(this.permission.region_delete, false),
+          editBtn: this.vaildData(this.permission.region_edit, false)
+        };
+      },
+      ids() {
+        let ids = [];
+        this.selectionList.forEach(ele => {
+          ids.push(ele.id);
+        });
+        return ids.join(",");
+      }
+    },
+    methods: {
+      initTree() {
+        this.treeData = [];
+        getLazyTree("00").then(res => {
+          this.treeData = res.data.data.map(item => {
+            return {
+              ...item,
+              leaf: !item.hasChildren
+            }
+          })
+        });
+      },
+      nodeClick(data) {
+        const column = this.findObject(this.regionOption.column, "parentCode");
+        column.disabled = true;
+        getDetail(data.id).then(res => {
+          this.regionForm = res.data.data;
+          debugger
+          this.regionForm.subCode = this.regionForm.code.replace(this.regionForm.parentCode, '');
+        })
+      },
+      addChildren() {
+        if (validatenull(this.regionForm.code)) {
+          this.$message.warning("请先选择一项区划");
+          return;
+        }
+        this.regionForm.parentCode = this.regionForm.code;
+        this.regionForm.code = '';
+        this.regionForm.subCode = '';
+        this.regionForm.name = '';
+        this.regionForm.level = (this.regionForm.level === 5) ? 5 : this.regionForm.level + 1;
+      },
+      handleSubmit(form, done, loading) {
+        form.code = form.parentCode + form.subCode;
+        submit(form).then(() => {
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          this.initTree();
+          this.regionForm.subCode = '';
+          this.$refs.form.resetForm();
+          done();
+        }, error => {
+          loading();
+          window.console.log(error);
+        });
+      },
+      handleDelete() {
+        if (validatenull(this.regionForm.code)) {
+          this.$message.warning("请先选择一项区划");
+          return;
+        }
+        this.$confirm(`确定将 [${this.regionForm.name}] 数据删除?`, {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(this.regionForm.code);
+          })
+          .then(() => {
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+            this.initTree();
+            this.regionForm.subCode = '';
+            this.$refs.form.resetForm();
+          });
+      },
+    }
+  };
+</script>
+
+<style>
+</style>