1

admin

2026-01-06 089bf5d2378b3c4a61d795b2a92bede2c193b771

 src/views/modules/sys/area.vue

New file
@@ -0,0 +1,166 @@
<template>
  <div class="mod-sys-area">
    <el-input v-model="areaName"
              class="area-search-input"
              placeholder="地区关键词">
    </el-input>
    <el-button type="primary"
               size="mini"
               class="area-add-btn"
               @click="addOrUpdateHandle()">新增</el-button>

    <el-tree :data="data"
             node-key="areaId"
             :filter-node-method="filterNode"
             ref="tree2"
             :props="props"
             :expand-on-click-node="false">

      <span class="custom-tree-node"
            slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text"
                     icon="el-icon-edit"
                     size="small"
                     @click="() => update(node, data)">
            修改
          </el-button>
          <el-button type="text"
                     icon="el-icon-delete"
                     size="small"
                     @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>

    <add-or-update v-if="addOrUpdateVisible"
                   ref="addOrUpdate"
                   @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import { tableOption } from '@/crud/sys/area'
import AddOrUpdate from './area-add-or-update'
import { treeDataTranslate } from '@/utils'
export default {
  data () {
    return {
      dataList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      dataListLoading: false,
      tableOption: tableOption,
      addOrUpdateVisible: false,
      areaName: '',
      dataForm: {},
      data: [],
      params: {
        areaName: null
      },
      props: {
        id: 'areaId',
        label: 'areaName',
        children: 'children'
      }
    }
  },
  created () {
    this.getDataList(this.page)
  },
  mounted () {
  },
  components: {
    AddOrUpdate
  },
  watch: {
    areaName (val) {
      this.$refs.tree2.filter(val)
    }
  },
  methods: {
    getDataList (page, params, done) {
      this.$http({
        url: this.$http.adornUrl('/admin/area/list'),
        method: 'get',
        params: this.$http.adornParams(Object.assign({
          current: page == null ? this.page.currentPage : page.currentPage,
          size: page == null ? this.page.pageSize : page.pageSize
        }, params))
      }).then(({ data }) => {
        let treeData = treeDataTranslate(data, 'areaId', 'parentId')
        this.data = treeData
      })
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },

    // 删除
    deleteHandle (areaId) {
      this.$confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/admin/area/' + areaId),
          method: 'delete',
          data: this.$http.adornData({})
        }).then(({ data }) => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList(this.page)
            }
          })
        })
      }).catch(() => { })
    },
    update (node, data) {
      this.addOrUpdateHandle(data.areaId)
    },

    remove (node, data) {
      this.deleteHandle(data.areaId)
    },

    filterNode (value, data) {
      if (!value) return true
      return data.areaName.indexOf(value) !== -1
    }
  }

}
</script>

<style lang="scss" scoped>
.mod-sys-area {
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .area-search-input {
    width: 30%;
  }
  .area-add-btn {
    float: right;
  }
}
</style>