wms-elevue/src/views/data/city/index.vue

<template>
  <div class="menu-index">
    <el-card :bordered="false" class="pt-3 mb-3 proCard">
      <div>
        <el-button type="primary" @click="handleAdd()" v-perm="['sys:city:add']">
          <template #icon>
            <el-icon>
              <plus />
            </el-icon>
          </template>
          新增
        </el-button>
      </div>
    </el-card>
    <el-card :bordered="false" class="pt-3 mb-3 proCard">
      <el-table
        border
        v-loading="loading"
        ref="tableRef"
        :data="lists"
        row-key="id"
        lazy
        :load="loadTree"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="城市名称" prop="name" min-width="150" show-overflow-tooltip />
        <el-table-column label="城市拼音" prop="pinyin" min-width="150" show-overflow-tooltip />
        <el-table-column align="center" label="城市级别" prop="level" min-width="80">
          <template #default="{ row }">
            <div v-if="row.level == 0">省份</div>
            <div v-else-if="row.level == 1">城市</div>
            <div v-else-if="row.level == 2">县区</div>
            <div v-else-if="row.level == 3">街道</div>
            <div v-else-if="row.level == 4">居委会</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="城市区号" prop="cityCode" min-width="100" />
        <el-table-column align="center" label="行政编码" prop="areaCode" min-width="100" />
        <el-table-column align="center" label="城市邮编" prop="zipCode" min-width="100" />
        <el-table-column align="center" label="操作" width="300" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              icon="Plus"
              @click="handleAdd(row)"
              v-perm="['sys:city:addz']"
            >
              新增
            </el-button>
            <el-button
              type="warning"
              icon="Edit"
              @click="handleEdit(row)"
              v-perm="['sys:city:update']"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              icon="Delete"
              @click="handleDelete(row)"
              v-perm="['sys:city:delete']"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <editDialog
      ref="editRef"
      v-if="editVisible"
      :cityId="cityId"
      :parentData="parentData"
      v-model:visible="editVisible"
      @success="refreshDataList"
    />
  </div>
</template>

<script lang="ts" setup name="menu">
  import { defineAsyncComponent, nextTick, onMounted, ref, shallowRef } from 'vue';
  import { cityDelete } from '@/api/data/city';
  import { getCityByList } from '@/api/system/user';
  import type { ElTable } from 'element-plus';
  // const tableRef = shallowRef<InstanceType<typeof ElTable>>();
  const tableRef = ref();
  import { confirm, message } from '@/utils/auth';

  /**
   * 导入组件
   */
  const editDialog = defineAsyncComponent(() => import('./edit.vue'));

  /**
   * 定义参数变量
   */
  const loading = ref(false);
  const editVisible = ref(false);
  const cityId = ref(0);
  const parentData = ref();
  const lists = ref([]);
  const maps = ref(new Map());

  /**
   * 获取城市列表
   * @param code 行政编码
   * @param resolve
   */
  const getDataList = async (code: any, resolve?: any) => {
    try {
      loading.value = true;
      let res = await getCityByList(code);
      let data = res.length > 0 ? res : [];
      data.map((item) => {
        if (item.level <= 3) {
          item.hasChildren = true;
        } else {
          item.hasChildren = false;
        }
      });
      if (resolve) {
        resolve(data);
      } else {
        lists.value = data;
      }
    } catch (e) {
      if (resolve) {
        resolve([]);
      } else {
        lists.value = [];
      }
    } finally {
      loading.value = false;
    }
  };

  /**
   * 刷新城市列表
   */
  const refreshDataList = (code) => {
    if (code == 0) {
      getDataList(0);
    } else if (maps.value.get(code)) {
      const { tree, treeNode, resolve } = maps.value.get(code);
      if (tree) {
        loadTree(tree, treeNode, resolve);
      }
    }
  };

  /**
   * 加载树结构
   * @param tree 数据
   * @param treeNode 树节点
   * @param resolve 解析
   */
  const loadTree = (tree: any, treeNode: any, resolve: any) => {
    maps.value.set(tree.areaCode, { tree, treeNode, resolve });
    getDataList(tree.areaCode, resolve);
  };

  /**
   * 执行添加
   * @param data 参数
   */
  const handleAdd = async (data: any) => {
    cityId.value = 0;
    parentData.value = data;
    await nextTick();
    editVisible.value = true;
  };

  /**
   * 执行编辑
   * @param data 参数
   */
  const handleEdit = async (data: any) => {
    cityId.value = data.id;
    await nextTick();
    editVisible.value = true;
  };

  /**
   * 执行删除
   * @param row 参数
   */
  const handleDelete = async (row: any) => {
    await confirm('确定要删除？');
    try {
      loading.value = true;
      await cityDelete(row.id);
      message('删除成功');
      loading.value = false;
      refreshDataList(row.parentCode);
    } catch (e) {
      loading.value = false;
    }
  };

  /**
   * 钩子
   */
  onMounted(() => {
    getDataList(0);
  });
</script>

<style scoped></style>