地址配置模块

src/components/byTable/index.vue

@@ -154,6 +154,8 @@
         v-bind="$attrs"
         v-on="tableEvents"
         row-key="id"
+        lazy
+        :load="load"
         :tree-props="{
           children: 'children',
           hasChildren: 'hasChildren',

src/views/system/addressConfig/index copy.vue

@@ -0,0 +1,197 @@
+<template>
+    <div class="app-container">
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      row-key="id"
+      border
+      lazy
+      :load="load"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column prop="chineseName" label="中文名" />
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="address" label="操作">
+        <template #default="scope">
+            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
+            >修改</el-button
+            >
+            <el-button
+            size="small"
+            type="danger"
+            @click="handleDelete(scope.$index, 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"
+       />
+    </div>
+ </template>
+ 
+ <script setup name="Config">
+ import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
+ 
+ const { proxy } = getCurrentInstance();
+ const { sys_yes_no } = proxy.useDict("sys_yes_no");
+ 
+ const configList = ref([]);
+ const open = ref(false);
+ const loading = ref(true);
+ const showSearch = ref(true);
+ const ids = ref([]);
+ const single = ref(true);
+ const multiple = ref(true);
+ const total = ref(0);
+ const title = ref("");
+ const dateRange = ref([]);
+ 
+ const data = reactive({
+   form: {},
+   queryParams: {
+     pageNum: 1,
+     pageSize: 10,
+     configName: undefined,
+     configKey: undefined,
+     configType: undefined
+   },
+   rules: {
+     configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
+     configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
+     configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
+   }
+ });
+ let tableData = ref([]);
+ const { queryParams, form, rules } = toRefs(data);
+ 
+ const load = (row, treeNode, resolve) => {
+   console.log(row, treeNode, resolve)
+   proxy.post('/customizeArea/list',{parentId:row.id}).then(res=>{
+    console.log(res)
+    resolve(
+        res.map(item=>{
+            return {
+             ...item,
+             hasChildren:true,
+            }
+        })
+    )
+   })
+ };
+
+ /** 查询参数列表 */
+ function getList() {
+   loading.value = true;
+   proxy.post('/customizeArea/page',{parentId:0,pageNum:1,pageSize:10,}).then(res=>{
+     console.log(res)
+     tableData.value = res.rows.map(item=>{
+       return {
+        ...item,
+        hasChildren:true,
+       }
+     })
+   })
+ }
+ /** 取消按钮 */
+ function cancel() {
+   open.value = false;
+   reset();
+ }
+ /** 表单重置 */
+ function reset() {
+   form.value = {
+     configId: undefined,
+     configName: undefined,
+     configKey: undefined,
+     configValue: undefined,
+     configType: "Y",
+     remark: undefined
+   };
+   proxy.resetForm("configRef");
+ }
+ /** 搜索按钮操作 */
+ function handleQuery() {
+   queryParams.value.pageNum = 1;
+   getList();
+ }
+ /** 重置按钮操作 */
+ function resetQuery() {
+   dateRange.value = [];
+   proxy.resetForm("queryRef");
+   handleQuery();
+ }
+ /** 多选框选中数据 */
+ function handleSelectionChange(selection) {
+   ids.value = selection.map(item => item.configId);
+   single.value = selection.length != 1;
+   multiple.value = !selection.length;
+ }
+ /** 新增按钮操作 */
+ function handleAdd() {
+   reset();
+   open.value = true;
+   title.value = "添加参数";
+ }
+ /** 修改按钮操作 */
+ function handleUpdate(row) {
+   reset();
+   const configId = row.configId || ids.value;
+   getConfig(configId).then(response => {
+     form.value = response.data;
+     open.value = true;
+     title.value = "修改参数";
+   });
+ }
+ /** 提交按钮 */
+ function submitForm() {
+   proxy.$refs["configRef"].validate(valid => {
+     if (valid) {
+       if (form.value.configId != undefined) {
+         updateConfig(form.value).then(response => {
+           proxy.$modal.msgSuccess("修改成功");
+           open.value = false;
+           getList();
+         });
+       } else {
+         addConfig(form.value).then(response => {
+           proxy.$modal.msgSuccess("新增成功");
+           open.value = false;
+           getList();
+         });
+       }
+     }
+   });
+ }
+ /** 删除按钮操作 */
+ function handleDelete(row) {
+   const configIds = row.configId || ids.value;
+   proxy.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
+     return delConfig(configIds);
+   }).then(() => {
+     getList();
+     proxy.$modal.msgSuccess("删除成功");
+   }).catch(() => {});
+ }
+ /** 导出按钮操作 */
+ function handleExport() {
+   proxy.download("system/config/export", {
+     ...queryParams.value
+   }, `config_${new Date().getTime()}.xlsx`);
+ }
+ /** 刷新缓存按钮操作 */
+ function handleRefreshCache() {
+   refreshCache().then(() => {
+     proxy.$modal.msgSuccess("刷新缓存成功");
+   });
+ }
+ 
+ getList();
+ </script>
+ 

src/views/system/addressConfig/index.vue

@@ -1,10 +1,9 @@
 <template>
-    <div class="app-container">
+  <div class="addressConfig"  v-loading="loading">
     <el-table
       :data="tableData"
       style="width: 100%"
       row-key="id"
-      border
       lazy
       :load="load"
       :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@@ -13,9 +12,11 @@
       <el-table-column prop="name" label="名称" />
       <el-table-column prop="address" label="操作">
         <template #default="scope">
+            <el-button size="small" @click="addAddress(scope.row)">
+              新增
+            </el-button>
             <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
-            >修改</el-button
-            >
+            >修改</el-button>
             <el-button
             size="small"
             type="danger"
@@ -25,173 +26,253 @@
         </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"
-       />
+    <div style="display: flex;margin-top:20px;" >
+      <el-pagination 
+      style="text-align: center;margin: 0 auto;" 
+      :page-size="10" layout="prev, pager, next" 
+      :current-page="queryParams.pageNum" 
+      :total="total" 
+      @current-change="changePage" />
     </div>
- </template>
- 
- <script setup name="Config">
- import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
- 
- const { proxy } = getCurrentInstance();
- const { sys_yes_no } = proxy.useDict("sys_yes_no");
- 
- const configList = ref([]);
- const open = ref(false);
- const loading = ref(true);
- const showSearch = ref(true);
- const ids = ref([]);
- const single = ref(true);
- const multiple = ref(true);
- const total = ref(0);
- const title = ref("");
- const dateRange = ref([]);
- 
- const data = reactive({
-   form: {},
-   queryParams: {
-     pageNum: 1,
-     pageSize: 10,
-     configName: undefined,
-     configKey: undefined,
-     configType: undefined
-   },
-   rules: {
-     configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
-     configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
-     configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
-   }
- });
- let tableData = ref([]);
- const { queryParams, form, rules } = toRefs(data);
- 
- const load = (row, treeNode, resolve) => {
-   console.log(row, treeNode, resolve)
-   proxy.post('/customizeArea/list',{parentId:row.id}).then(res=>{
-    console.log(res)
-    resolve(
-        res.map(item=>{
-            return {
-             ...item,
-             hasChildren:true,
-            }
-        })
-    )
-   })
- };
+    <el-dialog
+      :title="modalType == 'add' ? '添加地址' : '编辑地址'"
+      v-if="dialogVisible"
+      v-model="dialogVisible"
+      width="600"
+    >
+      <byForm
+        :formConfig="formConfig"
+        :formOption="formOption"
+        v-model="formData.data"
+        :rules="rules"
+        ref="submit"
+        v-loading="loadingDialog"
+      >
+        <template #footer>
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="submit">确 定</el-button>
+        </template>
+      </byForm>
+    </el-dialog>
+  </div>
+</template>
 
- /** 查询参数列表 */
- function getList() {
-   loading.value = true;
-   proxy.post('/customizeArea/list',{parentId:0}).then(res=>{
-     console.log(res)
-     tableData.value = res.map(item=>{
-       return {
-        ...item,
-        hasChildren:true,
-       }
-     })
-   })
- }
- /** 取消按钮 */
- function cancel() {
-   open.value = false;
-   reset();
- }
- /** 表单重置 */
- function reset() {
-   form.value = {
-     configId: undefined,
-     configName: undefined,
-     configKey: undefined,
-     configValue: undefined,
-     configType: "Y",
-     remark: undefined
-   };
-   proxy.resetForm("configRef");
- }
- /** 搜索按钮操作 */
- function handleQuery() {
-   queryParams.value.pageNum = 1;
-   getList();
- }
- /** 重置按钮操作 */
- function resetQuery() {
-   dateRange.value = [];
-   proxy.resetForm("queryRef");
-   handleQuery();
- }
- /** 多选框选中数据 */
- function handleSelectionChange(selection) {
-   ids.value = selection.map(item => item.configId);
-   single.value = selection.length != 1;
-   multiple.value = !selection.length;
- }
- /** 新增按钮操作 */
- function handleAdd() {
-   reset();
-   open.value = true;
-   title.value = "添加参数";
- }
- /** 修改按钮操作 */
- function handleUpdate(row) {
-   reset();
-   const configId = row.configId || ids.value;
-   getConfig(configId).then(response => {
-     form.value = response.data;
-     open.value = true;
-     title.value = "修改参数";
-   });
+<script setup name="Config">
+import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from "@/api/system/config";
+import byForm from "@/components/byForm";
+const { proxy } = getCurrentInstance();
+const { sys_yes_no } = proxy.useDict("sys_yes_no");
+
+const configList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const dateRange = ref([]);
+
+const data = reactive({
+ form: {},
+ queryParams: {
+   pageNum: 1,
+   pageSize: 10,
+   configName: undefined,
+   configKey: undefined,
+   configType: undefined
+ },
+ rules: {
+   configName: [{ required: true, message: "参数名称不能为空", trigger: "blur" }],
+   configKey: [{ required: true, message: "参数键名不能为空", trigger: "blur" }],
+   configValue: [{ required: true, message: "参数键值不能为空", trigger: "blur" }]
  }
- /** 提交按钮 */
- function submitForm() {
-   proxy.$refs["configRef"].validate(valid => {
-     if (valid) {
-       if (form.value.configId != undefined) {
-         updateConfig(form.value).then(response => {
-           proxy.$modal.msgSuccess("修改成功");
-           open.value = false;
-           getList();
-         });
-       } else {
-         addConfig(form.value).then(response => {
-           proxy.$modal.msgSuccess("新增成功");
-           open.value = false;
-           getList();
-         });
-       }
+});
+let tableData = ref([]);
+const { queryParams, form, rules } = toRefs(data);
+
+const formOption = reactive({
+  inline: true,
+  labelWidth: 100,
+  itemWidth: 100,
+  rules: [],
+});
+const formData = reactive({
+  data: {},
+});
+const formConfig = computed(() => {
+  return [
+    {
+      type: "title",
+      title: "账户信息",
+    },
+    {
+      type: "slot",
+      prop: "transactionTime",
+      slotName: "transactionTime",
+      label: "交易时间",
+    },
+  ];
+});
+
+const load = (row, treeNode, resolve) => {
+ console.log(row, treeNode, resolve)
+ proxy.post('/customizeArea/list',{parentId:row.id}).then(res=>{
+  console.log(res)
+  resolve(
+      res.map(item=>{
+          return {
+           ...item,
+           hasChildren:true,
+          }
+      })
+  )
+ })
+};
+
+const changePage = (val) => {
+ queryParams.value.pageNum = val;
+ getList();
+};
+
+/** 查询参数列表 */
+function getList() {
+ loading.value = true;
+ proxy.post('/customizeArea/page',data.queryParams).then(res=>{
+   console.log(res)
+   tableData.value = res.rows.map(item=>{
+     return {
+      ...item,
+      hasChildren:true,
      }
-   });
- }
- /** 删除按钮操作 */
- function handleDelete(row) {
-   const configIds = row.configId || ids.value;
-   proxy.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
-     return delConfig(configIds);
-   }).then(() => {
-     getList();
-     proxy.$modal.msgSuccess("删除成功");
-   }).catch(() => {});
- }
- /** 导出按钮操作 */
- function handleExport() {
-   proxy.download("system/config/export", {
-     ...queryParams.value
-   }, `config_${new Date().getTime()}.xlsx`);
- }
- /** 刷新缓存按钮操作 */
- function handleRefreshCache() {
-   refreshCache().then(() => {
-     proxy.$modal.msgSuccess("刷新缓存成功");
-   });
- }
- 
+   })
+   total.value = res.total;
+   setTimeout(() => {
+     loading.value = false;
+   }, 200);
+ })
+}
+/** 取消按钮 */
+function cancel() {
+ open.value = false;
+ reset();
+}
+const dialogVisible = ref(false);
+const modalType = ref('add');
+const loadingDialog = ref(false);
+
+const addAddress = (row) => {
+  console.log(row)
+  dialogVisible.value = true;
+  modalType.value = 'add';
+  formData.data = {
+    parentName:row.name,
+    parentId:row.id,
+    name:undefined,
+    chineseName:undefined,
+    address:undefined,
+  }
+}
+
+/** 表单重置 */
+function reset() {
+ form.value = {
+   configId: undefined,
+   configName: undefined,
+   configKey: undefined,
+   configValue: undefined,
+   configType: "Y",
+   remark: undefined
+ };
+ proxy.resetForm("configRef");
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+ queryParams.value.pageNum = 1;
  getList();
- </script>
- 
+}
+/** 重置按钮操作 */
+function resetQuery() {
+ dateRange.value = [];
+ proxy.resetForm("queryRef");
+ handleQuery();
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+ ids.value = selection.map(item => item.configId);
+ single.value = selection.length != 1;
+ multiple.value = !selection.length;
+}
+/** 新增按钮操作 */
+function handleAdd() {
+ reset();
+ open.value = true;
+ title.value = "添加参数";
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+ reset();
+ const configId = row.configId || ids.value;
+ getConfig(configId).then(response => {
+   form.value = response.data;
+   open.value = true;
+   title.value = "修改参数";
+ });
+}
+/** 提交按钮 */
+function submitForm() {
+ proxy.$refs["configRef"].validate(valid => {
+   if (valid) {
+     if (form.value.configId != undefined) {
+       updateConfig(form.value).then(response => {
+         proxy.$modal.msgSuccess("修改成功");
+         open.value = false;
+         getList();
+       });
+     } else {
+       addConfig(form.value).then(response => {
+         proxy.$modal.msgSuccess("新增成功");
+         open.value = false;
+         getList();
+       });
+     }
+   }
+ });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+ const configIds = row.configId || ids.value;
+ proxy.$modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？').then(function () {
+   return delConfig(configIds);
+ }).then(() => {
+   getList();
+   proxy.$modal.msgSuccess("删除成功");
+ }).catch(() => {});
+}
+/** 导出按钮操作 */
+function handleExport() {
+ proxy.download("system/config/export", {
+   ...queryParams.value
+ }, `config_${new Date().getTime()}.xlsx`);
+}
+/** 刷新缓存按钮操作 */
+function handleRefreshCache() {
+ refreshCache().then(() => {
+   proxy.$modal.msgSuccess("刷新缓存成功");
+ });
+}
+
+getList();
+</script>
+<style>
+  .addressConfig{
+    background: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    margin: 20px;
+  }
+  .pagination-container{
+    overflow: hidden;
+  }
+</style>