From 934625771bb7ba786288d1cad45f5945c8ced4b7 Mon Sep 17 00:00:00 2001
From: Alidada233 <805483097@qq.com>
Date: Fri, 24 Jun 2022 13:46:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                           |   2 +-
 src/api/platform/system/controller/area.ts |  30 +++
 src/api/platform/system/entity/area.ts     |  30 +++
 src/views/system/area/AreaModal.vue        |  84 ++++++++
 src/views/system/area/area.data.ts         | 191 +++++++++++++++++++
 src/views/system/area/index.vue            | 112 +++++++++++
 src/views/system/dept/index.vue            | 211 ++++++++++-----------
 7 files changed, 552 insertions(+), 108 deletions(-)
 create mode 100644 src/api/platform/system/controller/area.ts
 create mode 100644 src/api/platform/system/entity/area.ts
 create mode 100644 src/views/system/area/AreaModal.vue
 create mode 100644 src/views/system/area/area.data.ts
 create mode 100644 src/views/system/area/index.vue

diff --git a/.env.development b/.env.development
index 5be9756..09279ca 100644
--- a/.env.development
+++ b/.env.development
@@ -4,7 +4,7 @@ VITE_PUBLIC_PATH = /
 # 本地开发代理，可以解决跨域及多地址代理
 # 如果接口地址匹配到，则会转发到http://localhost:3000，防止本地出现跨域问题
 # 可以有多个，注意多个不能换行，否则代理将会失效
-VITE_PROXY = [["/api","http://localhost:9999"],["/upload","http://localhost:9999/system_proxy/system/file/upload"]]
+VITE_PROXY = [["/api","http://192.168.3.10:9999"],["/upload","http://192.168.3.10:9999/system_proxy/system/file/upload"]]
 
 # 是否删除console.log
 VITE_DROP_CONSOLE = false
diff --git a/src/api/platform/system/controller/area.ts b/src/api/platform/system/controller/area.ts
new file mode 100644
index 0000000..a8d4536
--- /dev/null
+++ b/src/api/platform/system/controller/area.ts
@@ -0,0 +1,30 @@
+/**
+ * 提供api模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+ * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+ * author entfrm开发团队-王翔
+ */
+import type { AreaParams, Area } from '/@/api/platform/system/entity/area';
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = '/system_proxy/system/address/queryByParentId',
+  add = '/system_proxy/system/address/save',
+  get = '/system_proxy/system/address/query',
+  edit = '/system_proxy/system/address/update',
+  del = '/system_proxy/system/address/remove',
+}
+
+/** 查询区域列表 */
+export const listArea = (params?: Partial<AreaParams>) => defHttp.get({ url: Api.list, params });
+
+/** 新增区域 */
+export const addArea = (params: Partial<Area>) => defHttp.post({ url: Api.add, data: params });
+
+/** 修改区域 */
+export const editArea = (params: Partial<Area>) => defHttp.put({ url: Api.edit, data: params });
+
+/** 查询区域详细 */
+export const getArea = (id: string) => defHttp.get<Area>({ url: `${Api.get}/${id}` });
+
+/** 删除区域 */
+export const delArea = (id: string) => defHttp.delete({ url: `${Api.del}/${id}` });
diff --git a/src/api/platform/system/entity/area.ts b/src/api/platform/system/entity/area.ts
new file mode 100644
index 0000000..773a276
--- /dev/null
+++ b/src/api/platform/system/entity/area.ts
@@ -0,0 +1,30 @@
+/**
+ * @program: kicc-ui
+ * @description: 区域实体类
+ * 类型定义
+ * @author: entfrm开发团队-王翔
+ * @create: 2022/4/8
+ */
+import type { R } from '/#/axios';
+import type { CommonEntity, Page } from '/@/api/common/data/entity';
+
+/** 区域查询参数 */
+export type AreaParams = Page & Area;
+
+/** 区域对象 */
+export interface Area extends CommonEntity {
+  areaId: string;
+  code: string;
+  name: string;
+  parentId: string;
+  sort: number;
+  contacts: string;
+  phone: string;
+  address: string;
+  email: string;
+  status: string;
+  [key: string]: any;
+}
+
+/** 区域响应对象 */
+export type AreaResult = R<Area[]>;
diff --git a/src/views/system/area/AreaModal.vue b/src/views/system/area/AreaModal.vue
new file mode 100644
index 0000000..d7ab948
--- /dev/null
+++ b/src/views/system/area/AreaModal.vue
@@ -0,0 +1,84 @@
+<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 { formSchema } from './area.data'
+import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal'
+import { listArea, addArea, editArea, getArea } from '/@/api/platform/system/controller/area'
+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: formSchema,
+	showActionButtonGroup: false,
+	baseColProps: { span: 24 }
+})
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
+	// 处理清除脏数据
+	await resetFields()
+	await clearValidate()
+	// 处理设置数据
+	tag.value = data._tag
+	const topArea = { areaId: '0', name: '顶级区域', children: [] }
+	topArea.children = listToTree(await listArea())
+	await updateSchema({
+		field: 'parentId',
+		componentProps: {
+			treeData: [topArea]
+		}
+	})
+	const areaId = data.record?.areaId
+	const props: Partial<ModalProps> = { confirmLoading: false }
+	// 采用tag标签区分操作
+	switch (unref(tag)) {
+		case 'add':
+			props.title = '新增区域'
+			areaId && (await setFieldsValue({ parentId: areaId }))
+			break
+		case 'edit':
+			props.title = '编辑区域'
+			await setFieldsValue(await getArea(areaId))
+			break
+	}
+	// 尾部:设置处理后的最终配置数据
+	setModalProps(props)
+})
+
+/** 处理弹出框提交 */
+async function handleSubmit() {
+	try {
+		// 提取验证数据
+		const formData = await validate()
+		// 处理提交之前逻辑
+		setModalProps({ confirmLoading: true })
+		// 采用tag标签区分操作
+		switch (unref(tag)) {
+			case 'add':
+				await addArea(formData)
+				break
+			case 'edit':
+				await editArea(formData)
+				break
+		}
+		// 处理提交完成之后逻辑
+		closeModal()
+		emit('success')
+	} finally {
+		setModalProps({ confirmLoading: false })
+	}
+}
+</script>
diff --git a/src/views/system/area/area.data.ts b/src/views/system/area/area.data.ts
new file mode 100644
index 0000000..7332c61
--- /dev/null
+++ b/src/views/system/area/area.data.ts
@@ -0,0 +1,191 @@
+/**
+ * @program: kicc-ui
+ * @description: 区域模块动态渲染配置
+ * @author: entfrm开发团队-王翔
+ * @create: 2022/4/21
+ */
+
+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: '区域名称',
+    dataIndex: 'name',
+    align: 'left'
+  },
+  {
+    title: '区域编码',
+    dataIndex: 'code'
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort'
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 80,
+    customRender: ({record}) => {
+      const status = record.status;
+      // 采用二进制~~取反,只要为null或者0等等一些其他的空元素都会转为0
+      // 第一次取反会运算为-1,在后一次取反会运算为0
+      const enable = ~~status === 0;
+      const color = enable ? 'green' : 'red';
+      const text = enable ? '正常' : '停用';
+      return h(Tag, { color: color }, () => text);
+    }
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime'
+  }
+];
+
+/** 搜索表单配置 */
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '区域名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入区域名称'
+    },
+    colProps: {span: 8}
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Select',
+    componentProps: {
+      options: [
+        { label: '正常', value: '0' },
+        { label: '停用', value: '1' }
+      ]
+    },
+    colProps: { span: 7 }
+  },
+  {
+    field: 'dateRange',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      style: { width:'100%' },
+      valueFormat: 'YYYY-MM-DD',
+      placeholder: ['开始日期','结束日期']
+    },
+    colProps: { span: 8 }
+  }
+];
+
+/** 表单配置 */
+export const formSchema: FormSchema[] = [
+  {
+    field: 'areaId',
+    label: 'ID',
+    component: 'Input',
+    show: false
+  },
+  {
+    field: 'parentId',
+    label: '上级区域',
+    component: 'TreeSelect',
+    defaultValue: '0',
+    componentProps: {
+      replaceFields: {
+        title: 'name',
+        key: 'areaId',
+        value: 'areaId',
+      },
+      getPopupContainer: () => document.body,
+    }
+  },
+  {
+    field: 'name',
+    label: '区域名称',
+    component: 'Input',
+    required: true,
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    field: 'code',
+    label: '区域代码',
+    component: 'Input',
+    required: true,
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    field: 'contacts',
+    label: '联系人',
+    component: 'Input',
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    field: 'phone',
+    label: '联系人电话',
+    component: 'Input',
+    rules: [
+      {
+        pattern: new RegExp('^1[3|4|5|6|7|8|9][0-9]\\d{8}$'),
+        message: '请输入正确的手机号码!',
+        validateTrigger: 'change'
+      }
+    ],
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    field: 'sort',
+    label: '区域排序',
+    component: 'InputNumber',
+    componentProps: {
+      style: { width:'100%' },
+      min: 0
+    },
+    required: true,
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    field: 'email',
+    label: '邮箱',
+    component: 'Input',
+    rules: [
+      {
+        type: 'email',
+        message: '请输入正确的邮箱地址!',
+        validateTrigger: 'change'
+      }
+    ],
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'RadioGroup',
+    defaultValue: '0',
+    componentProps: {
+      options: [
+        { label: '正常', value: '0' },
+        { label: '停用', value: '1' }
+      ]
+    },
+    required: true,
+    colProps: {
+      span: 12
+    }
+  }
+];
diff --git a/src/views/system/area/index.vue b/src/views/system/area/index.vue
new file mode 100644
index 0000000..a65f8ea
--- /dev/null
+++ b/src/views/system/area/index.vue
@@ -0,0 +1,112 @@
+<template>
+	<div>
+		<BasicTable @register="registerTable">
+			<template #toolbar>
+				<a-button v-auth="['area_add']" 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',
+							auth: ['area_edit'],
+							onClick: handleEdit.bind(null, record)
+						},
+						{
+							label: '新增',
+							icon: 'ant-design:plus-circle-outlined',
+							auth: ['area_add'],
+							onClick: handleAdd.bind(null, record)
+						},
+						{
+							label: '删除',
+							icon: 'ant-design:delete-outlined',
+							auth: ['area_del'],
+							color: 'error',
+							popConfirm: {
+								title: '是否确认删除',
+								confirm: handleDel.bind(null, record)
+							}
+						}
+					]"
+				/>
+			</template>
+		</BasicTable>
+		<AreaModal @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 AreaModal from './AreaModal.vue'
+import { columns, searchFormSchema } from './area.data'
+import { delArea, listArea } from '/@/api/platform/system/controller/area'
+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: listArea,
+	rowKey: 'areaId',
+	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,
+	searchInfo: {
+		parentId: 0
+	},
+	canResize: false,
+	actionColumn: {
+		width: 250,
+		title: '操作',
+		dataIndex: 'action',
+		slots: { customRender: 'action' },
+		fixed: false
+	},
+	afterFetch: result => listToTree(result, { id: 'areaId' })
+})
+
+/** 新增按钮操作,行内新增与工具栏局域新增通用 */
+function handleAdd(record?: Recordable) {
+	openModal(true, { _tag: 'add', record })
+}
+
+/** 编辑按钮操作,行内编辑 */
+function handleEdit(record: Recordable) {
+	openModal(true, { _tag: 'edit', record })
+}
+
+/** 删除按钮操作,行内删除 */
+async function handleDel(record: Recordable) {
+	await delArea(record.areaId)
+	createMessage.success('删除成功!')
+	handleRefreshTable()
+}
+
+/** 处理表格刷新 */
+function handleRefreshTable() {
+	reload()
+}
+</script>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 8ea3b54..26542a2 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,115 +1,112 @@
 <template>
-  <div>
-    <BasicTable @register="registerTable">
-      <template #toolbar>
-        <a-button v-auth="['dept_add']"
-                  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',
-            auth: ['dept_edit'],
-            onClick: handleEdit.bind(null, record)
-          },
-          {
-            label: '新增',
-            icon: 'ant-design:plus-circle-outlined',
-            auth: ['dept_add'],
-            onClick: handleAdd.bind(null, record)
-          },
-          {
-            label: '删除',
-            icon: 'ant-design:delete-outlined',
-            auth: ['dept_del'],
-            color: 'error',
-            popConfirm: {
-              title: '是否确认删除',
-              confirm: handleDel.bind(null, record)
-            }
-          }]"
-        />
-      </template>
-    </BasicTable>
-    <DeptModal @register="registerModal" @success="handleRefreshTable"/>
-  </div>
+	<div>
+		<BasicTable @register="registerTable">
+			<template #toolbar>
+				<a-button v-auth="['dept_add']" 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',
+							auth: ['dept_edit'],
+							onClick: handleEdit.bind(null, record)
+						},
+						{
+							label: '新增',
+							icon: 'ant-design:plus-circle-outlined',
+							auth: ['dept_add'],
+							onClick: handleAdd.bind(null, record)
+						},
+						{
+							label: '删除',
+							icon: 'ant-design:delete-outlined',
+							auth: ['dept_del'],
+							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 './DeptModal.vue';
-  import { columns, searchFormSchema } from './dept.data';
-  import { delDept, listDept } from '/@/api/platform/system/controller/dept';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { listToTree } from '/@/utils/helper/treeHelper';
+/**
+ * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+ * 采用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 './DeptModal.vue'
+import { columns, searchFormSchema } from './dept.data'
+import { delDept, listDept } from '/@/api/platform/system/controller/dept'
+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: listDept,
-    rowKey: 'deptId',
-    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: 'deptId' })
-  });
+/** 通用变量统一声明区域 */
+const { createMessage } = useMessage()
+const [registerModal, { openModal }] = useModal()
+const [registerTable, { reload, expandAll, collapseAll, getDataSource }] = useTable({
+	title: '部门列表',
+	api: listDept,
+	rowKey: 'deptId',
+	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: 'deptId' }),
+	onExpand: rowClick
+})
 
-  /** 新增按钮操作,行内新增与工具栏局域新增通用 */
-  function handleAdd(record?: Recordable) {
-    openModal(true,{ _tag: 'add', record });
-  }
+/** 新增按钮操作,行内新增与工具栏局域新增通用 */
+function handleAdd(record?: Recordable) {
+	openModal(true, { _tag: 'add', record })
+}
 
-  /** 编辑按钮操作,行内编辑 */
-  function handleEdit(record: Recordable) {
-    openModal(true, { _tag: 'edit', record });
-  }
-
-  /** 删除按钮操作,行内删除 */
-  async function handleDel(record: Recordable) {
-    await delDept(record.deptId);
-    createMessage.success('删除成功!');
-    handleRefreshTable();
-  }
-
-  /** 处理表格刷新 */
-  function handleRefreshTable() {
-    reload();
-  }
+/** 编辑按钮操作,行内编辑 */
+function handleEdit(record: Recordable) {
+	openModal(true, { _tag: 'edit', record })
+}
 
+/** 删除按钮操作,行内删除 */
+async function handleDel(record: Recordable) {
+	await delDept(record.deptId)
+	createMessage.success('删除成功!')
+	handleRefreshTable()
+}
+function rowClick(record, index, event) {
+	console.log(record, index, event)
+}
+/** 处理表格刷新 */
+function handleRefreshTable() {
+	reload()
+}
 </script>