代码优化

.env.development

@@ -4,7 +4,7 @@ VITE_PUBLIC_PATH = /
 # 本地开发代理，可以解决跨域及多地址代理
 # 如果接口地址匹配到，则会转发到http://localhost:3000，防止本地出现跨域问题
 # 可以有多个，注意多个不能换行，否则代理将会失效
-VITE_PROXY = [["/api","http://192.168.3.10:9999"],["/upload","http://192.168.3.10:9999/system_proxy/system/file/upload"]]
+VITE_PROXY = [["/api","http://localhost:9999"],["/upload","http://localhost:9999/system_proxy/system/file/upload"]]
 
 # 是否删除console.log
 VITE_DROP_CONSOLE = false

src/api/platform/system/controller/address.ts

@@ -6,6 +6,7 @@
 import {AddressParams,AddressItem} from '/@/api/platform/system/entity/addressModel';
 import { defHttp } from '/@/utils/http/axios';
 
+
 enum Api {
     get = '/system_proxy/system/address',
     QueryById = '/system_proxy/system/address/query',
@@ -23,10 +24,18 @@ export const treeList = (params: AddressParams) =>  defHttp.get({url: Api.list,
 
 export const listAddr = (params?: Partial<AddressParams>) =>
     defHttp.get({url: Api.list, params});
+/**新增 */
+export const addAddr  =(params:Partial<AddressItem>) =>defHttp.post({url:Api.add,data:params});
 
+/**修改 */
+export const editAddr  =(params:Partial<AddressItem>) =>defHttp.put({url:Api.edit,data:params});
 
 export const queryByParentIds = (params) =>
     defHttp.get({url: Api.QueryByParentIds + `/${params}`});
 
+/**查询详细 */
+export const getAddr = (id: string) => defHttp.get<AddressItem>({ url: `${Api.get}/${id}` });
 
+/**删除 */
+export const delAddr = (id: string) => defHttp.delete({ url: `${Api.del}/${id}` });
 

src/api/platform/system/controller/boxcard.ts

@@ -0,0 +1,51 @@
+import {BoxCardParams, BoxCardListItem, BoxCardListGetListResult} from '/@/api/platform/system/entity/boxCardModel'
+import { defHttp } from '/@/utils/http/axios';
+import {isDef} from '/@/utils/is';
+
+const prefix = '/iot/equip';
+
+enum Api {
+    GetCardById = '/boxcard/getById',
+    List = '/boxcard/list',
+    ListForSelect = '/boxcard/listForSelect',
+    Add = '/boxcard/add',
+    Update = '/boxcard/update',
+    Remove = '/boxcard/remove'
+}
+
+/**
+ * 查询根据id
+ * @param params
+ */
+export const getCardById = (params: { id: String } ) =>
+    defHttp.get<BoxCardListItem>({ url: prefix + Api.GetCardById, params });
+
+/**
+ * 条件查询list
+ * @param params
+ */
+export const cardList = (params: BoxCardParams) =>
+    defHttp.get<BoxCardListGetListResult>({ url: prefix + Api.List, params });
+
+/**
+ * 获取下拉列表的list
+ * @param params
+ */
+export const listForSelect = (params: {isUsed: number}) =>
+    defHttp.get<BoxCardListItem>({url: prefix + Api.ListForSelect});
+
+/**
+ * 新增或修改
+ * @param params
+ */
+export const set = (params: BoxCardListItem) =>{
+    if (isDef(params.id)) {
+        return defHttp.put<BoxCardListItem>({ url: prefix + Api.Update, params });
+    } else {
+        return defHttp.post<BoxCardListItem>({ url: prefix + Api.Add, params });
+    }
+};
+
+
+export const remove = (params: {ids: String}) =>
+    defHttp.delete<boolean>({url: prefix + Api.Remove + `/${params.ids}`});

src/api/platform/system/entity/boxCardModel.ts

@@ -0,0 +1,25 @@
+// 引入基础包
+import { Page, CommonEntity } from '/@/api/common/data/entity';
+import type { R } from '/#/axios';
+// 定义查询参数
+export type BoxCardParams = {
+    id?: string;
+    company?: string;
+    iccid?: string;
+    card?: string;
+} | Page;
+
+
+export interface BoxCardListItem extends CommonEntity{
+    id: string;
+    iccid: string;
+    card: string;
+    company: string;
+    isUsed: number;
+    status: string;
+    createByName: string;
+    createByTime: string;
+
+}
+
+export type BoxCardListGetListResult = R<BoxCardListItem>;

src/views/institution/address/AddressModal.vue

@@ -0,0 +1,89 @@
+<template>
+  <BasicModal v-bind="$attrs"
+              width="720px"
+              @ok="handleSubmit"
+              @register="registerModal"
+  >
+    <BasicForm @register="registerForm"/>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
+   * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+   * author entfrm开发团队-王翔
+   */
+  import { ref, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  import { addressFormSchema } from './address.data';
+  import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  import { listAddr, addAddr, editAddr, getAddr} from '/@/api/platform/system/controller/address';
+  import { listToTree } from '/@/utils/helper/treeHelper';
+
+  /** 通用变量统一声明区域 */
+  const tag = ref<Nullable<string>>('');
+  /** https://v3.cn.vuejs.org/api/options-data.html#emits */
+  const emit = defineEmits(['success', 'register']);
+  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
+    labelWidth: 100,
+    schemas: addressFormSchema,
+    showActionButtonGroup: false,
+    baseColProps: { span: 24 }
+  });
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
+    // 处理清除脏数据
+    await resetFields();
+    await clearValidate();
+    // 处理设置数据
+    tag.value = data._tag;
+    const topAddr = { id: '0', name: '一级区域', children: [] };
+    topAddr.children = listToTree(await listAddr());
+    await updateSchema({
+      field: 'parentId',
+      componentProps: {
+        treeData: [topAddr]
+      }
+    });
+    const addrId = data.record?.id;
+    const props: Partial<ModalProps> = { confirmLoading: false };
+    // 采用tag标签区分操作
+    switch (unref(tag)) {
+      case 'add':
+        props.title = '新增地址';
+        addrId && await setFieldsValue({ parentId: addrId });
+        break;
+      case 'edit':
+        props.title = '编辑地址';
+        await setFieldsValue(await getAddr(addrId));
+        break;
+    }
+    // 尾部:设置处理后的最终配置数据
+    setModalProps(props);
+  });
+
+  /** 处理弹出框提交 */
+  async function handleSubmit() {
+    try {
+      // 提取验证数据
+      const formData = await validate();
+      // 处理提交之前逻辑
+      setModalProps({ confirmLoading: true });
+      // 采用tag标签区分操作
+      switch (unref(tag)) {
+        case 'add':
+          await addAddr(formData);
+          break;
+        case 'edit':
+          await editAddr(formData);
+          break;
+      }
+      // 处理提交完成之后逻辑
+      closeModal();
+      emit('success');
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+
+</script>

src/views/institution/address/address.data.ts

@@ -0,0 +1,126 @@
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import {h} from 'vue';
+import {Tag} from 'ant-design-vue';
+
+
+
+export const columns: BasicColumn[] = [
+    {
+        title: '区域ID',
+        dataIndex: 'id',
+        width: 50,
+    },
+    {
+        title: '区域名称',
+        dataIndex: 'name',
+        width: 120,
+    },
+    {
+        title: '排序',
+        dataIndex: 'sort',
+        width:50
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        width:200
+      },
+    
+];
+
+export const searchFormSchema: FormSchema[] = [
+    {
+        field: 'name',
+        label: '区域名称',
+        component: 'Input',
+        componentProps: {
+            placeholder: '请输入区域名称',
+        },
+        colProps: { span: 5 },
+    },
+    {
+        field:'code',
+        label:'区域ID',
+        component:'Input',
+        componentProps:{
+            placeholder:'请输入区域ID',
+        },
+        colProps:{span:5}
+    },
+    {
+        field: 'dateRange',
+        label: '创建时间',
+        component: 'RangePicker',
+        componentProps: {
+          style: { width:'100%' },
+          valueFormat: 'YYYY-MM-DD',
+          placeholder: ['开始日期','结束日期']
+        },
+        colProps: { span: 8 }
+      },
+    
+];
+/*表单配置*/ 
+export const addressFormSchema: FormSchema[] = [
+    //    {
+    //     field: 'parentId',
+    //     label: '地区',
+    //     component: 'ApiTreeSelect',
+    //     //component: 'TreeSelect', 
+    //     //defaultValue:'一级区域',
+    //     componentProps: {
+    //         api: treeList,
+    //         resultField: 'list',
+    //         labelField: 'name',
+    //         valueField: 'code',
+    //         // ReplaceFields:{
+    //         //     title: 'name',
+    //         //     key: 'code',
+    //         //     value: 'code'
+    //         // }
+    //     },
+    //     required: true,
+    // },
+    //
+    {
+        field: 'parentId',
+        label: '上级地区',
+        component: 'TreeSelect',
+        defaultValue: '0',
+        required: true,
+        componentProps:{
+            replaceFields: {
+                title: 'name',
+                key: 'id',
+                value: 'id',
+        },
+       
+        getPopupContainer: () => document.body,
+    }
+    },
+    {
+        field: 'id',
+        label: '区域ID',
+        component: 'Input',
+        helpMessage: ['区域ID'],
+        required: true
+    },
+    {
+        field:'sort',
+        label:'排序',
+        component:'Input',
+        required:true
+    },
+    {
+        label: '区域名称',
+        field: 'name',
+        component: 'Input',
+    },
+ 
+    {
+        label: '备注',
+        field: 'remarks',
+        component: 'InputTextArea',
+    }
+];

src/views/institution/address/index.vue

@@ -0,0 +1,116 @@
+
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button
+          type="primary"
+          @click="handleAdd()"
+        >新增地址</a-button>
+        <a-button type="default"
+                  @click="expandAll"
+        >展开全部</a-button>
+        <a-button type="default"
+                  @click="collapseAll"
+        >折叠全部</a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction :actions="[
+          {
+            label: '编辑',
+            icon: 'fa6-regular:pen-to-square',
+
+            onClick: handleEdit.bind(null, record)
+          },
+          {
+            label: '新增',
+            icon: 'ant-design:plus-circle-outlined',
+
+            onClick: handleAdd.bind(null, record)
+          },
+          {
+            label: '删除',
+            icon: 'ant-design:delete-outlined',
+
+            color: 'error',
+            popConfirm: {
+              title: '是否确认删除',
+              confirm: handleDel.bind(null, record)
+            }
+          }]"
+        />
+      </template>
+    </BasicTable>
+    <DeptModal @register="registerModal" @success="handleRefreshTable"/>
+  </div>
+</template>
+<script lang="ts" setup>
+/**
+ * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+ * 采用vben-动态表格表单封装组件编写,采用 setup 写法
+ * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+ * author entfrm开发团队-王翔
+ */
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { useModal } from '/@/components/Modal';
+import DeptModal from './AddressModal.vue';
+import { columns, searchFormSchema } from './address.data';
+import {delAddr, getAddr, listAddr} from '/@/api/platform/system/controller/address';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { listToTree } from '/@/utils/helper/treeHelper';
+
+/** 通用变量统一声明区域 */
+const { createMessage } = useMessage();
+const [registerModal, { openModal }] = useModal();
+const [registerTable, { reload, expandAll, collapseAll }] = useTable({
+  title: '项目列表',
+  api: listAddr,
+  rowKey: 'id',
+  columns,
+  formConfig: {
+    labelWidth: 120,
+    schemas: searchFormSchema,
+    autoSubmitOnEnter: true,
+    fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
+  },
+  isTreeTable: true,
+  pagination: false,
+  striped: false,
+  useSearchForm: true,
+  showTableSetting: true,
+  bordered: true,
+  showIndexColumn: false,
+  canResize: false,
+  actionColumn: {
+    width: 250,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+    fixed: false
+  },
+  afterFetch: (result) => listToTree(result, { id: 'id' })
+});
+
+/** 新增按钮操作,行内新增与工具栏局域新增通用 */
+function handleAdd(record?: Recordable) {
+  openModal(true,{ _tag: 'add', record });
+}
+
+/** 编辑按钮操作,行内编辑 */
+function handleEdit(record: Recordable) {
+  openModal(true, { _tag: 'edit', record });
+}
+
+/** 删除按钮操作,行内删除 */
+async function handleDel(record: Recordable) {
+  await delAddr(record.id);
+  createMessage.success('删除成功!');
+  handleRefreshTable();
+}
+
+/** 处理表格刷新 */
+function handleRefreshTable() {
+  reload();
+}
+
+</script>