From 9b44842740704b1e0fe6774b1a48565874a05dfa Mon Sep 17 00:00:00 2001
From: 91zhangliying <1663782157@qq.com>
Date: Sat, 30 Jul 2022 21:25:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=9A=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E9=83=A8=E9=97=A8=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/dept.ts                    |  50 ++++++
 src/components/QuickCrud/index.vue |  11 +-
 src/components/QuickForm/index.vue |  13 ++
 src/layout/index.vue               |   2 +-
 src/types/dept.ts                  |   6 +
 src/types/options.ts               |   8 +-
 src/types/table.ts                 |   2 +-
 src/types/tree.ts                  |   5 +
 src/utils/index.ts                 |  44 ++++-
 src/utils/request.ts               |   6 +-
 src/views/dept/index.vue           | 277 +++++++++++++++++++++++++++++
 src/views/dictionary/index.vue     |   8 +-
 12 files changed, 415 insertions(+), 17 deletions(-)
 create mode 100644 src/api/dept.ts
 create mode 100644 src/types/dept.ts
 create mode 100644 src/views/dept/index.vue

diff --git a/src/api/dept.ts b/src/api/dept.ts
new file mode 100644
index 0000000..840e939
--- /dev/null
+++ b/src/api/dept.ts
@@ -0,0 +1,50 @@
+import { Dept } from '../types/dept'
+import request, { QuickResponseData } from '../utils/request'
+
+const Api = {
+  list_pid: '/api/dept/getListByPId',
+  list: '/api/dept/getList',
+  add: '/api/dept/add',
+  update: '/api/dept/update',
+  delete: '/api/dept/delete',
+}
+export const getDeptListByPId = (
+  pId: number
+): Promise<QuickResponseData<Array<Dept>>> => {
+  return request<QuickResponseData<Array<Dept>>>({
+    url: Api.list_pid,
+    method: 'GET',
+    params: {
+      pId,
+    },
+  })
+}
+export const getDeptList = (): Promise<QuickResponseData<Array<Dept>>> => {
+  return request<QuickResponseData<Array<Dept>>>({
+    url: Api.list,
+    method: 'GET',
+  })
+}
+export const addDept = (data: Dept) => {
+  return request({
+    url: Api.add,
+    method: 'POST',
+    data,
+  })
+}
+export const updateDept = (data: Dept) => {
+  return request({
+    url: Api.update,
+    method: 'POST',
+    data,
+  })
+}
+export const deleteDept = (id: string) => {
+  return request({
+    url: Api.delete,
+    method: 'POST',
+    data: {
+      id,
+    },
+  })
+}
diff --git a/src/components/QuickCrud/index.vue b/src/components/QuickCrud/index.vue
index 5e5444f..988e241 100644
--- a/src/components/QuickCrud/index.vue
+++ b/src/components/QuickCrud/index.vue
@@ -214,6 +214,12 @@ const handleEdit = (row: any) => {
   Object.keys(formModel.value).forEach((key) => {
     formModel.value[key] = row[key]
   })
+  emits('onEdit', formModel.value, (data: any) => {
+    Object.keys(formModel.value).forEach((key) => {
+      formModel.value[key] = data[key]
+    })
+    dialogFormVisible.value = true
+  })
   dialogFormVisible.value = true
 }
 const handleDelete = (row: any) => {
@@ -247,10 +253,8 @@ const handleSubmit = (formRef: FormInstance | undefined) => {
   if (!formRef) return
   formRef.validate((valid) => {
     if (!valid) {
-      console.log('error submit!')
       return false
     }
-    console.log('submit!')
     emits('onFormSubmit', formModel.value, () => {
       dialogFormVisible.value = false
       load()
@@ -271,12 +275,13 @@ const handleAdd = () => {
   }
   Object.keys(formModel.value).forEach((key) => {
     const index = formItems.value.findIndex(
-      (x) => x.vModel === key && x.type === 'select'
+      (x) => x.vModel === key && (x.type === 'select' || x.type === 'tree')
     )
     if (index !== -1) {
       formModel.value[key] = selectTree.value.id
     }
   })
+
   dialogFormType.value = 'add'
   formTitle.add = dialogTitle.value ? dialogTitle.value.add : formTitle.add
   title.value = formTitle.add
diff --git a/src/components/QuickForm/index.vue b/src/components/QuickForm/index.vue
index 29f9373..6795b5a 100644
--- a/src/components/QuickForm/index.vue
+++ b/src/components/QuickForm/index.vue
@@ -174,6 +174,19 @@ defineExpose({ handleSubmit })
         <template v-else-if="item.type === 'switch'">
           <el-switch v-model="model[item.vModel]" />
         </template>
+        <template v-else-if="item.type === 'tree'">
+          <el-tree-select
+            v-model="model[item.vModel]"
+            :data="item.options"
+            :check-strictly="true"
+            :render-after-expand="false"
+            :disabled="
+              (formType === 'add' && item.addDisabled) ||
+              (formType === 'edit' && item.editDisabled) ||
+              formType === 'detail'
+            "
+          />
+        </template>
         <template v-else>
           <el-input
             v-model="model[item.vModel]"
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 192a9cf..7128893 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -107,7 +107,7 @@ watch(tabList, (val) => {
   height: 100%;
   .content {
     .el-card {
-      height: 100%;
+      // height: 100%;
     }
   }
 }
diff --git a/src/types/dept.ts b/src/types/dept.ts
new file mode 100644
index 0000000..eaf486f
--- /dev/null
+++ b/src/types/dept.ts
@@ -0,0 +1,6 @@
+export interface Dept {
+  id: string
+  deptId: string
+  name: string
+  pId: string
+}
diff --git a/src/types/options.ts b/src/types/options.ts
index 8681745..4a77a34 100644
--- a/src/types/options.ts
+++ b/src/types/options.ts
@@ -1,9 +1,13 @@
 export interface Options {
-  label: string
-  value: string
+  label?: string
+  value?: string
 }
 export interface TreeOptions {
   id?: string
   label?: string
   children?: string
 }
+
+export interface SelectTreeOptions extends Options {
+  children?: string
+}
diff --git a/src/types/table.ts b/src/types/table.ts
index 1a9544f..acb40b6 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -40,5 +40,5 @@ export interface Toolbar {
   hiddenBatchDeleteButton?: boolean
   hiddenPrintButton?: boolean
   hiddenRefreshButton?: boolean
-  btns: Array<Btns>
+  btns?: Array<Btns>
 }
diff --git a/src/types/tree.ts b/src/types/tree.ts
index 5fa1c23..7906919 100644
--- a/src/types/tree.ts
+++ b/src/types/tree.ts
@@ -3,6 +3,11 @@ export interface Tree {
   label: string
   children: Tree[]
 }
+export interface SelectTree {
+  value: string
+  label: string
+  children: SelectTree[]
+}
 export interface LeftTree {
   treeSpan?: number
   treeData: Tree[]
diff --git a/src/utils/index.ts b/src/utils/index.ts
index ce93057..3589720 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,11 +1,11 @@
 import md5 from 'js-md5'
-import { Options, TreeOptions } from '../types/options'
-import { Tree } from '../types/tree'
+import { Options, SelectTreeOptions, TreeOptions } from '../types/options'
+import { SelectTree, Tree } from '../types/tree'
 
 export const quickMd5 = (str: string) => {
   return md5(str)
 }
-export const dicFormat = (data: any, options: Options) => {
+export const dicFormat = (data: any, options: Options = {}) => {
   const arr: Options[] = []
   const defaultOptions = {
     label: 'label',
@@ -21,6 +21,30 @@ export const dicFormat = (data: any, options: Options) => {
   })
   return arr
 }
+export const selectTreeFormat = (data: any, options: SelectTreeOptions) => {
+  const arr: SelectTree[] = []
+  const defaultOptions = {
+    value: 'value',
+    label: 'label',
+    children: 'children',
+  }
+  const label = options && options.label ? options.label : defaultOptions.label
+  const value = options && options.value ? options.value : defaultOptions.value
+  const children =
+    options && options.children ? options.children : defaultOptions.children
+  data.forEach((element: SelectTree) => {
+    const obj: SelectTree = {
+      label: element[label],
+      value: element[value],
+      children: [],
+    }
+    if (element[children] && element[children].length > 0) {
+      obj.children = selectTreeFormat(element[children], options)
+    }
+    arr.push(obj)
+  })
+  return arr
+}
 export const treeFormat = (data: any, options: TreeOptions) => {
   const arr: Tree[] = []
   const defaultOptions = {
@@ -45,6 +69,20 @@ export const treeFormat = (data: any, options: TreeOptions) => {
   })
   return arr
 }
+export const listToTableTree = (data: any, pId = '0') => {
+  const arr = []
+  const parentData = data.filter((x: any) => x.pId === pId)
+  parentData.forEach((item) => {
+    // if(item.id){}
+    const obj = item
+    obj.children = listToTableTree(data, item.id)
+    // const childData = data.filter((x: any) => x.pId === item.id)
+    // listToTableTree(data, item.id)
+    arr.push(obj)
+  })
+  return arr
+}
+
 export const tableTreeFormat = (data: any) => {
   const forderArr = []
   const menuArr = []
diff --git a/src/utils/request.ts b/src/utils/request.ts
index d4bbc6f..2bc3d41 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -39,9 +39,9 @@ quickRequest.interceptors.response.use(
     const { data } = res
     const { status, data: payload, page, msg } = data as QuickResponseData<any>
     if (status === 0) {
-      if (!payload) {
-        return Promise.reject(msg)
-      }
+      // if (!payload) {
+      //   return Promise.reject(msg)
+      // }
       const jsonStr = toTuofeng(JSON.stringify(payload))
       const result = JSON.parse(jsonStr)
       return Promise.resolve({
diff --git a/src/views/dept/index.vue b/src/views/dept/index.vue
new file mode 100644
index 0000000..2756aaf
--- /dev/null
+++ b/src/views/dept/index.vue
@@ -0,0 +1,277 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { log } from 'console'
+import { listToTableTree, selectTreeFormat, tableTreeFormat } from '@/utils'
+import QuickCrud from '@/components/QuickCrud/index.vue'
+import { Column, Actionbar, Toolbar } from '@/types/table'
+import { Dept } from '@/types/dept'
+import { FormItem } from '@/types/form'
+import { Options } from '@/types/options'
+import { Tree } from '@/types/tree'
+import {
+  getDeptList,
+  getDeptListByPId,
+  addDept,
+  updateDept,
+  deleteDept,
+} from '@/api/dept'
+import { LeftTree } from '../../types/tree'
+
+/**
+ * 常规属性
+ */
+const deptDdataListTemp = []
+const dicTypeList = reactive<Array<Options>>([])
+const treeDataList = reactive<Array<Tree>>([])
+const dataList = reactive<Array<Dept>>([])
+const currentTreeData = ref<Tree>({
+  id: '',
+  label: '',
+  children: [],
+})
+/**
+ * 表单
+ */
+const dialogTitle = reactive({
+  add: '创建部门',
+  edit: '修改部门',
+  detail: '部门详情',
+})
+const formModel = reactive<Dept>({
+  id: '',
+  deptId: '',
+  name: '',
+  pId: '',
+})
+const formItems = reactive<Array<FormItem>>([
+  {
+    label: '部门编号',
+    labelWidth: '80px',
+    vModel: 'deptId',
+    placeholder: '部门编号',
+    editReadonly: true,
+    prop: 'deptId',
+    rules: [
+      {
+        required: true,
+        message: '部门编号不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '部门名称',
+    labelWidth: '80px',
+    vModel: 'name',
+    placeholder: '部门名称',
+    prop: 'name',
+    rules: [
+      {
+        required: true,
+        message: '部门名称不能为空',
+        trigger: 'blur',
+      },
+    ],
+  },
+  {
+    label: '父级部门',
+    labelWidth: '80px',
+    vModel: 'pId',
+    placeholder: '父级部门',
+    type: 'tree',
+    addDisabled: true,
+    editDisabled: true,
+    detailDisabled: true,
+    options: dicTypeList,
+    change: (val: string) => {
+      console.log('change', val)
+    },
+  },
+])
+const handleFormSubmit = (form: Dept, done: any) => {
+  console.log('handleFormSubmit', form)
+  if (form.id) {
+    updateDept(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '部门修改成功',
+      })
+      done()
+    })
+  } else {
+    addDept(form).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '部门创建成功',
+      })
+      done()
+    })
+  }
+}
+const handleEdit = (form: any, done: any) => {
+  const model = form
+  model.pId = model.pId.toString()
+  done(model)
+}
+/**
+ * 工具栏
+ */
+
+const tableToolbar = reactive<Toolbar>({
+  hiddenBatchDeleteButton: true,
+  hiddenImportButton: true,
+  hiddenExportButton: true,
+  hiddenPrintButton: true,
+})
+/**
+ * 表格
+ */
+const tableColumns = reactive<Array<Column>>([
+  {
+    width: '50',
+    type: 'selection',
+  },
+  {
+    label: '部门编号',
+    prop: 'deptId',
+    width: '200',
+  },
+  {
+    label: '部门名称',
+    prop: 'name',
+  },
+  // {
+  //   label: '父级',
+  //   prop: 'pId',
+  //   format: (row: any) => {
+  //     const obj = deptDdataListTemp.find((x) => x.id === row.pId)
+  //     return obj && obj.name
+  //   },
+  // },
+])
+const handleDelete = (item: Dept, done: any) => {
+  ElMessageBox.confirm(`你真的删除【${item.name}】的部门吗？`, '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteDept(item.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: '部门删除成功',
+      })
+      done()
+    })
+  })
+}
+const tableActionbar = reactive<Actionbar>({
+  width: 300,
+  hiddenDetailButton: true,
+})
+const deptTreeFormat = (data: Array<Dept>, pId = '0') => {
+  const arr: Array<Tree> = []
+  const obj: Tree = {
+    id: '',
+    label: '',
+    children: [],
+  }
+  const parentData = data.find((x: any) => x.pId === Number(pId))
+  if (parentData) {
+    obj.id = parentData.id.toString()
+    obj.label = parentData.name
+    const parentId = parentData.id
+    const companyData = data.filter((x: any) => x.pId === Number(parentId))
+    companyData.forEach((item: Dept) => {
+      if (companyData) {
+        const companyObj: Tree = {
+          id: item.id.toString(),
+          label: item.name,
+          children: [],
+        }
+        const companyPid = item.id
+        const deptData = data.filter((x: any) => x.pId === Number(companyPid))
+        deptData.forEach((deptItem) => {
+          companyObj.children.push({
+            id: deptItem.id.toString(),
+            label: deptItem.name,
+            children: [],
+          })
+        })
+        obj.children.push(companyObj)
+      }
+    })
+  }
+  arr.push(obj)
+  return arr
+}
+/**
+ * 加载数据
+ */
+const load = (parmas: object) => {
+  const { id } = currentTreeData.value
+  const pId = Number(id)
+  const deptTree = listToTableTree(deptDdataListTemp, pId)
+  console.log(`deptTree`, deptTree)
+  dataList.length = 0
+  dataList.push(...deptTree)
+  // getDeptListByPId(pId).then((res: any) => {
+  //   const { data: deptList } = res
+  //   const deptTree = listToTableTree(deptList, pId)
+  //   console.log(`deptTree`, deptTree)
+  //   dataList.length = 0
+  //   dataList.push(...deptTree)
+  // })
+}
+
+/**
+ * 左树
+ */
+
+const leftTree = reactive<LeftTree>({
+  treeData: [],
+  treeSpan: 6,
+})
+const treeLoad = (done: any) => {
+  getDeptList().then((res: any) => {
+    const { data: deptList } = res
+    deptDdataListTemp.push(...deptList)
+    const data = deptTreeFormat(deptList)
+    console.log(`pid`, data)
+    leftTree.treeData.length = 0
+    leftTree.treeData.push(...data)
+    const data1 = selectTreeFormat(data, {
+      value: 'id',
+    })
+    dicTypeList.length = 0
+    dicTypeList.push(...data1)
+    console.log('data1', data1)
+
+    currentTreeData.value.id = data[0].id
+    done(currentTreeData.value.id)
+  })
+}
+const handleTreeClick = (data: Tree, done: any) => {
+  currentTreeData.value = data
+  done()
+}
+</script>
+<template>
+  <quick-crud
+    :dialog-title="dialogTitle"
+    :form-model="formModel"
+    :form-items="formItems"
+    :table-data="dataList"
+    :table-columns="tableColumns"
+    :table-actionbar="tableActionbar"
+    :table-toolbar="tableToolbar"
+    dialog-titles="dialogTitles"
+    :left-tree="leftTree"
+    @on-edit="handleEdit"
+    @on-load="load"
+    @on-tree-load="treeLoad"
+    @on-tree-click="handleTreeClick"
+    @on-form-submit="handleFormSubmit"
+    @on-delete="handleDelete"
+  ></quick-crud>
+</template>
diff --git a/src/views/dictionary/index.vue b/src/views/dictionary/index.vue
index 4a0be61..7b45410 100644
--- a/src/views/dictionary/index.vue
+++ b/src/views/dictionary/index.vue
@@ -93,7 +93,7 @@ const handleFormSubmit = (form: Dictionary, done: any) => {
     updateDictionary(form).then(() => {
       ElMessage({
         type: 'success',
-        message: '用户修改成功',
+        message: '字典修改成功',
       })
       done()
     })
@@ -101,7 +101,7 @@ const handleFormSubmit = (form: Dictionary, done: any) => {
     addDictionary(form).then(() => {
       ElMessage({
         type: 'success',
-        message: '用户创建成功',
+        message: '字典创建成功',
       })
       done()
     })
@@ -136,7 +136,7 @@ const tableColumns = reactive<Array<Column>>([
 ])
 const handleDelete = (item: Dictionary, done: any) => {
   ElMessageBox.confirm(
-    `你真的删除【${item.dictionaryName}】的用户吗？`,
+    `你真的删除【${item.dictionaryName}】的字典吗？`,
     '警告',
     {
       confirmButtonText: '确定',
@@ -147,7 +147,7 @@ const handleDelete = (item: Dictionary, done: any) => {
     deleteDictionary(item.id).then(() => {
       ElMessage({
         type: 'success',
-        message: '用户删除成功',
+        message: '字典删除成功',
       })
       done()
     })
-- 
Gitee