修改区域设置显示

src/views/system/addressarea/index.vue

@@ -5,7 +5,7 @@
         <el-card shadow="hover">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true">
             <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <!-- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> -->
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
             </el-form-item>
           </el-form>
@@ -13,81 +13,91 @@
       </div>
     </transition>
 
-    <el-card shadow="never">
+    <el-card shadow="hover">
       <template #header>
-        <el-row :gutter="10" class="mb8">
+        <el-row :gutter="10">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:addressarea:add']">新增</el-button>
+            <el-button v-hasPermi="['system:addressarea:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
           </el-col>
-          <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:addressarea:edit']"
-              >修改</el-button
-            >
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['system:addressarea:remove']"
-              >删除</el-button
-            >
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:addressarea:export']">导出</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+          <!-- <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar> -->
         </el-row>
       </template>
 
-      <el-table v-loading="loading" border :data="addressareaList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="主键ID" align="center" prop="id" v-if="true" />
-        <el-table-column label="地区编码" align="center" prop="areaCode" />
-        <el-table-column label="地区名称" align="center" prop="areaName" />
-        <!-- <el-table-column label="父类编码" align="center" prop="parentCode" /> -->
-        <!-- <el-table-column label="地区简称" align="center" prop="simpleName" /> -->
-        <el-table-column label="地区等级" align="center" prop="level" />
-        <!-- <el-table-column label="拼英" align="center" prop="pinYin" /> -->
-        <!-- <el-table-column label="数据来源" align="center" prop="dataSource" /> -->
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table
+        ref="areaTableRef"
+        v-loading="loading"
+        :data="addressareaList"
+        row-key="id"
+        border
+        lazy
+        :load="loadChildren"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+        <el-table-column prop="areaName" label="地区名称"></el-table-column>
+        <el-table-column prop="areaCode" align="center" label="地区编码"></el-table-column>
+        <el-table-column prop="level" align="center" label="地区等级">
+          <template #default="scope">
+            <el-tag v-if="scope.row.level === 1" type="success">省</el-tag>
+            <el-tag v-else-if="scope.row.level === 2" type="warning">市</el-tag>
+            <el-tag v-else-if="scope.row.level === 3">区/县</el-tag>
+            <el-tag v-else type="info">{{ scope.row.level }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="simpleName" align="center" label="简称"></el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime"> </el-table-column>
+        <el-table-column fixed="right" align="center" label="操作" width="280">
           <template #default="scope">
-            <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:addressarea:edit']"></el-button>
-            </el-tooltip>
-            <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:addressarea:remove']"></el-button>
-            </el-tooltip>
+            <el-button v-hasPermi="['system:addressarea:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
+            <el-button v-hasPermi="['system:addressarea:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)">新增</el-button>
+            <el-button v-hasPermi="['system:addressarea:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
-
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
-    <!-- 添加或修改地区列表对话框 -->
-    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
-      <el-form ref="addressareaFormRef" :model="form" :rules="rules" label-width="110px">
-        <el-form-item label="地区编码" prop="areaCode">
-          <el-input v-model="form.areaCode" placeholder="请输入地区编码" />
-        </el-form-item>
-        <el-form-item label="地区名称" prop="areaName">
-          <el-input v-model="form.areaName" placeholder="请输入地区名称" />
-        </el-form-item>
-        <el-form-item label="父类编码" prop="parentCode">
-          <el-input v-model="form.parentCode" placeholder="请输入父类编码" />
-        </el-form-item>
-        <el-form-item label="地区简称" prop="simpleName">
-          <el-input v-model="form.simpleName" placeholder="请输入地区简称" />
-        </el-form-item>
-        <el-form-item label="地区等级" prop="level">
-          <el-input v-model="form.level" placeholder="请输入地区等级" />
-        </el-form-item>
-        <!-- <el-form-item label="拼英" prop="pinYin">
-          <el-input v-model="form.pinYin" placeholder="请输入拼英" />
-        </el-form-item> -->
-        <!-- <el-form-item label="数据来源" prop="dataSource">
-          <el-input v-model="form.dataSource" placeholder="请输入数据来源" />
-        </el-form-item> -->
+    <el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close append-to-body width="600px">
+      <el-form ref="addressareaFormRef" :model="form" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col v-if="form.parentId !== 0" :span="24">
+            <el-form-item label="上级地区" prop="parentId">
+              <el-tree-select
+                v-model="form.parentId"
+                :data="areaOptions"
+                :props="{ value: 'id', label: 'areaName', children: 'children' } as any"
+                value-key="id"
+                placeholder="选择上级地区"
+                check-strictly
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="地区名称" prop="areaName">
+              <el-input v-model="form.areaName" placeholder="请输入地区名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="地区编码" prop="areaCode">
+              <el-input v-model="form.areaCode" placeholder="请输入地区编码" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="地区等级" prop="level">
+              <el-select v-model="form.level" placeholder="请选择地区等级" style="width: 100%">
+                <el-option label="省" :value="1" />
+                <el-option label="市" :value="2" />
+                <el-option label="区/县" :value="3" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="地区简称" prop="simpleName">
+              <el-input v-model="form.simpleName" placeholder="请输入地区简称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+          <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
         </div>
       </template>
@@ -101,15 +111,19 @@ import { AddressareaVO, AddressareaQuery, AddressareaForm } from '@/api/system/a
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
+interface AreaOptionsType {
+  id: number | string;
+  areaName: string;
+  children: AreaOptionsType[];
+}
+
 const addressareaList = ref<AddressareaVO[]>([]);
-const buttonLoading = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
+const areaOptions = ref<AreaOptionsType[]>([]);
+const isExpandAll = ref(true);
 
+const areaTableRef = ref<ElTableInstance>();
 const queryFormRef = ref<ElFormInstance>();
 const addressareaFormRef = ref<ElFormInstance>();
 
@@ -122,7 +136,7 @@ const initFormData: AddressareaForm = {
   id: undefined,
   areaCode: undefined,
   areaName: undefined,
-  parentCode: undefined,
+  parentId: undefined,
   simpleName: undefined,
   level: undefined,
   pinYin: undefined,
@@ -135,7 +149,11 @@ const data = reactive<PageData<AddressareaForm, AddressareaQuery>>({
     pageSize: 10,
     params: {}
   },
-  rules: {}
+  rules: {
+    areaName: [{ required: true, message: '地区名称不能为空', trigger: 'blur' }],
+    areaCode: [{ required: true, message: '地区编码不能为空', trigger: 'blur' }],
+    level: [{ required: true, message: '地区等级不能为空', trigger: 'blur' }]
+  }
 });
 
 const { queryParams, form, rules } = toRefs(data);
@@ -143,12 +161,31 @@ const { queryParams, form, rules } = toRefs(data);
 /** 查询地区列表列表 */
 const getList = async () => {
   loading.value = true;
-  const res = await listAddressarea(queryParams.value);
-  addressareaList.value = res.rows;
-  total.value = res.total;
+  const res = await listAddressarea({ pageNum: 1, pageSize: 10000 });
+  const level1Data = res.rows
+    ?.filter((item) => item.parentId === null || item.parentId === 0)
+    .map((item) => ({
+      ...item,
+      hasChildren: true
+    }));
+  if (level1Data) {
+    addressareaList.value = level1Data;
+  }
   loading.value = false;
 };
 
+/** 懒加载子节点 */
+const loadChildren = async (row: AddressareaVO, treeNode: any, resolve: (data: AddressareaVO[]) => void) => {
+  const res = await listAddressarea({ pageNum: 1, pageSize: 10000 });
+  const children = res.rows
+    ?.filter((item) => item.parentId === row.id)
+    .map((item) => ({
+      ...item,
+      hasChildren: item.level < 3
+    }));
+  resolve(children || []);
+};
+
 /** 取消按钮 */
 const cancel = () => {
   reset();
@@ -163,7 +200,6 @@ const reset = () => {
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
-  queryParams.value.pageNum = 1;
   getList();
 };
 
@@ -173,40 +209,48 @@ const resetQuery = () => {
   handleQuery();
 };
 
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: AddressareaVO[]) => {
-  ids.value = selection.map((item) => item.id);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
-
 /** 新增按钮操作 */
-const handleAdd = () => {
+const handleAdd = async (row?: AddressareaVO) => {
   reset();
+  const res = await listAddressarea({ pageNum: 1, pageSize: 10000 });
+  const processedData = res.rows?.map((item) => ({
+    ...item,
+    parentId: item.parentId === null ? 0 : item.parentId
+  }));
+  const data = proxy?.handleTree<AreaOptionsType>(processedData, 'id', 'parentId');
+  if (data) {
+    areaOptions.value = data;
+    if (row && row.id) {
+      form.value.parentId = row.id as number;
+    }
+  }
   dialog.visible = true;
-  dialog.title = '添加地区列表';
+  dialog.title = '添加地区';
 };
 
 /** 修改按钮操作 */
-const handleUpdate = async (row?: AddressareaVO) => {
+const handleUpdate = async (row: AddressareaVO) => {
   reset();
-  const _id = row?.id || ids.value[0];
-  const res = await getAddressarea(_id);
-  Object.assign(form.value, res.data);
+  const res = await getAddressarea(row.id);
+  form.value = res.data;
+  const response = await listAddressarea({ pageNum: 1, pageSize: 10000 });
+  const processedData = response.rows?.map((item) => ({
+    ...item,
+    parentId: item.parentId === null ? 0 : item.parentId
+  }));
+  const data = proxy?.handleTree<AreaOptionsType>(processedData, 'id', 'parentId');
+  if (data) {
+    areaOptions.value = data;
+  }
   dialog.visible = true;
-  dialog.title = '修改地区列表';
+  dialog.title = '修改地区';
 };
 
 /** 提交按钮 */
 const submitForm = () => {
   addressareaFormRef.value?.validate(async (valid: boolean) => {
     if (valid) {
-      buttonLoading.value = true;
-      if (form.value.id) {
-        await updateAddressarea(form.value).finally(() => (buttonLoading.value = false));
-      } else {
-        await addAddressarea(form.value).finally(() => (buttonLoading.value = false));
-      }
+      form.value.id ? await updateAddressarea(form.value) : await addAddressarea(form.value);
       proxy?.$modal.msgSuccess('操作成功');
       dialog.visible = false;
       await getList();
@@ -215,23 +259,11 @@ const submitForm = () => {
 };
 
 /** 删除按钮操作 */
-const handleDelete = async (row?: AddressareaVO) => {
-  const _ids = row?.id || ids.value;
-  await proxy?.$modal.confirm('是否确认删除地区列表编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
-  await delAddressarea(_ids);
-  proxy?.$modal.msgSuccess('删除成功');
+const handleDelete = async (row: AddressareaVO) => {
+  await proxy?.$modal.confirm('是否确认删除地区"' + row.areaName + '"？');
+  await delAddressarea(row.id);
   await getList();
-};
-
-/** 导出按钮操作 */
-const handleExport = () => {
-  proxy?.download(
-    'system/addressarea/export',
-    {
-      ...queryParams.value
-    },
-    `addressarea_${new Date().getTime()}.xlsx`
-  );
+  proxy?.$modal.msgSuccess('删除成功');
 };
 
 onMounted(() => {