From 2e0ef275ede96a167c591d8215ee9cd5703de9a8 Mon Sep 17 00:00:00 2001
From: zhangtao <1176193409@qq.com>
Date: Mon, 23 May 2022 10:46:25 +0800
Subject: [PATCH] search

---
 src/api/post/index.js              | 39 ------------
 src/components/DataTable/index.vue | 26 ++++++--
 src/components/Search/index.vue    | 75 +++++++++++++++++++++++
 src/utils/http/interceptors.js     | 39 +++---------
 src/views/system/role/index.vue    | 98 +++---------------------------
 src/views/system/role/info.js      | 20 ++++++
 src/views/system/role/table.js     | 73 ++++++++++++++++++++++
 src/views/system/user/index.vue    |  2 +-
 8 files changed, 208 insertions(+), 164 deletions(-)
 delete mode 100644 src/api/post/index.js
 create mode 100644 src/components/Search/index.vue
 create mode 100644 src/views/system/role/info.js
 create mode 100644 src/views/system/role/table.js

diff --git a/src/api/post/index.js b/src/api/post/index.js
deleted file mode 100644
index e06f12b..0000000
--- a/src/api/post/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { defAxios as request } from '@/utils/http'
-
-export function getPosts(data = {}) {
-  return request({
-    url: '/posts',
-    method: 'get',
-    data,
-  })
-}
-
-export function getPostById({ id }) {
-  return request({
-    url: `/post/${id}`,
-    method: 'get',
-  })
-}
-
-export function savePost(id, data = {}) {
-  if (id) {
-    return request({
-      url: `/post/${id}`,
-      method: 'put',
-      data,
-    })
-  }
-
-  return request({
-    url: '/post',
-    method: 'post',
-    data,
-  })
-}
-
-export function deletePost(id) {
-  return request({
-    url: `/post/${id}`,
-    method: 'delete',
-  })
-}
diff --git a/src/components/DataTable/index.vue b/src/components/DataTable/index.vue
index 6a35352..9632329 100644
--- a/src/components/DataTable/index.vue
+++ b/src/components/DataTable/index.vue
@@ -9,7 +9,16 @@
       <!--顶部右侧区域-->
       <slot name="toolbar" />
       <!--刷新-->
-      <span @click="reload">刷新</span>
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <div class="table-toolbar-right-icon" @click="reload">
+            <n-icon size="18">
+              <ReloadOutlined />
+            </n-icon>
+          </div>
+        </template>
+        <span>刷新</span>
+      </n-tooltip>
     </div>
   </div>
   <div class="s-table">
@@ -24,12 +33,14 @@
 </template>
 
 <script>
+import { ReloadOutlined } from '@vicons/antd'
 import { tableProps } from './tools/props.js'
 import { useDataSource } from './tools/useDataSource.js'
 import { usePagination } from './tools/usePagination.js'
 import { ref, unref, computed, toRaw, provide } from 'vue'
 export default {
   name: 'DataTable',
+  components: { ReloadOutlined },
   props: {
     ...tableProps
   },
@@ -66,12 +77,13 @@ export default {
     /* tableData-start */
     const tableData = ref([])
     const { getDataSourceRef, getRowKey, reload } = useDataSource(getProps, { getPaginationInfo, setPagination, tableData, setLoading }, emit)
+    const isRequest = !!unref(getProps).request
     const getBindProps = computed(() => {
       return {
         ...unref(getProps),
         loading: unref(getLoading),
         rowKey: unref(getRowKey),
-        data: unref(getDataSourceRef),
+        data: isRequest ? unref(getDataSourceRef) : unref(getProps).data,
         remote: true
       }
     })
@@ -84,7 +96,8 @@ export default {
       getBindProps,
       pagination,
       updatePage,
-      updatePageSize
+      updatePageSize,
+      reload
     }
   }
 }
@@ -104,12 +117,15 @@ export default {
     .table-toolbar-right {
       display: flex;
       justify-content: flex-end;
+      align-items: center;
       flex: 1;
-      .table-toolbar-icon {
+      .table-toolbar-right-icon {
         margin-left: 12px;
         font-size: 16px;
         cursor: pointer;
-        color: var(--text-color);
+        .n-icon{
+          vertical-align: middle;
+        }
         &:hover {
           color: #1890ff;
         }
diff --git a/src/components/Search/index.vue b/src/components/Search/index.vue
new file mode 100644
index 0000000..276f9cf
--- /dev/null
+++ b/src/components/Search/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <n-form ref="formRef" v-bind="getFormOptions">
+      <template v-for="(item, index) in getFormOptions.info" :key="`${index}-${item.label}`">
+        <n-form-item v-if="!item.options" :label="item.label">
+          <n-input v-model:value="getFormOptions.form[item.key]" :placeholder="item.placeholder" />
+        </n-form-item>
+        <n-form-item v-if="item.options" :label="item.label">
+          <n-select v-model:value="getFormOptions.form[item.key]" :options="item.options" />
+        </n-form-item>
+      </template>
+    </n-form>
+  </div>
+</template>
+
+<script>
+import { computed, reactive, ref, unref, toRaw } from 'vue'
+import { NForm } from 'naive-ui'
+export default {
+  name: 'SearchPage',
+  props: {
+    ...NForm.props,
+    info: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(props, { emit }) {
+    // const formOption = reactive({
+    //   form: {
+
+    //   }
+    // })
+    const getFormRef = computed(() => {
+      const { info } = unref(props)
+      const form = ref({})
+      info.forEach((item) => {
+        form.value[item.key] = ''
+      })
+      return unref(form)
+    })
+    console.log(getFormRef)
+    const getFormOptions = computed(() => {
+      return {
+        form: unref(getFormRef),
+        labelWidth: 'auto',
+        labelPlacement: 'left',
+        inline: true,
+        info: [...unref(props).info]
+      }
+    })
+    function getFormInfo() {
+      console.log(getFormOptions)
+    }
+    return {
+      getFormOptions,
+      getFormInfo
+    }
+  }
+}
+
+</script>
+<style scoped lang='scss'>
+.n-form{
+  flex-wrap: wrap;
+}
+.n-form-item{
+  .n-input{
+    width: 200px;
+  }
+  .n-select{
+    width: 200px;
+  }
+}
+</style>
diff --git a/src/utils/http/interceptors.js b/src/utils/http/interceptors.js
index a0d79d5..f684c78 100644
--- a/src/utils/http/interceptors.js
+++ b/src/utils/http/interceptors.js
@@ -17,12 +17,7 @@ export function setupInterceptor(service) {
 
       const token = getToken()
       if (token) {
-        /**
-         * * jwt token
-         * ! 认证方案: Bearer
-         */
-        config.headers.Authorization = 'Bearer ' + token
-
+        config.headers.Authorization = token
         return config
       }
       /**
@@ -40,43 +35,25 @@ export function setupInterceptor(service) {
   )
 
   service.interceptors.response.use(
-    (response) => response?.data,
-    (error) => {
-      const { code, message } = error.response?.data
-      return Promise.reject({ code, message })
-
-      /**
-       * TODO 此处可以根据后端返回的错误码自定义框架层面的错误处理
-       */
+    (response) => {
+      const { code } = response?.data
+      const { currentRoute } = router
       switch (code) {
         case 401:
           // 未登录（可能是token过期或者无效了）
-          console.error(message)
           removeToken()
-          const { currentRoute } = router
           router.replace({
             path: '/login',
             query: { ...currentRoute.query, redirect: currentRoute.path }
           })
           break
-        case 403:
-          // 没有权限
-          console.error(message)
-          break
-        case 404:
-          // 资源不存在
-          console.error(message)
-          break
         default:
           break
       }
-      // 已知错误resolve，在业务代码中作提醒，未知错误reject，捕获错误统一提示接口异常（9000以上为业务类型错误，需要跟后端确定好）
-      if ([401, 403, 404].includes(code) || code >= 9000) {
-        return Promise.resolve({ code, message })
-      } else {
-        console.error('【err】' + error)
-        return Promise.reject({ message: '接口异常，请稍后重试！' })
-      }
+      return response?.data
+    },
+    (error) => {
+      return Promise.reject(error)
     }
   )
 }
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index c1d72a4..160a8ba 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
     <n-card>
+
+      <headSearch :info="data.info" />
+
       <data-table
         :columns="data.columns"
         :row-key="(row) => row.id"
@@ -22,82 +25,21 @@
 </template>
 
 <script>
+import headSearch from '@/components/Search/index.vue'
 import dataTable from '@/components/DataTable/index.vue'
 import TableAction from '@/components/DataTable/tools/Action.vue'
-import TableImage from '@/components/DataTable/tools/Image.vue'
 import { getUserList } from '@/api/system/index.js'
-import { h, onMounted, unref } from 'vue'
+import { h, ref, unref } from 'vue'
 import { reactive } from 'vue'
+import table from './table.js'
+import info from './info.js'
 export default {
   name: 'MenuPage',
-  components: { dataTable },
+  components: { headSearch, dataTable },
   setup() {
     const data = reactive({
       columns: [
-        {
-          title: '用户编号',
-          key: 'code',
-          align: 'center'
-        },
-        {
-          title: '头像',
-          key: 'avatar',
-          align: 'center',
-          render(row) {
-            return h(TableImage, {
-              images: {
-                width: 36,
-                height: 36,
-                src: row.avatar
-              }
-            })
-          }
-        },
-        {
-          title: '用户账号',
-          key: 'username',
-          align: 'center'
-        },
-        {
-          title: '用户姓名',
-          key: 'realname',
-          align: 'center'
-        },
-        {
-          title: '用户类型',
-          key: 'type',
-          align: 'center',
-          width: 100
-        },
-        {
-          title: '角色',
-          key: 'roles',
-          align: 'center'
-
-        },
-        {
-          title: '状态',
-          key: 'status',
-          align: 'center',
-          width: 100
-        },
-        {
-          title: '部门',
-          key: 'deptName',
-          align: 'center'
-        },
-        {
-          title: '创建时间',
-          key: 'createTime',
-          align: 'center',
-          width: 160
-        },
-        {
-          title: '更新时间',
-          key: 'updateTime',
-          align: 'center',
-          width: 160
-        },
+        ...table.columns,
         {
           title: '操作',
           align: 'center',
@@ -130,29 +72,13 @@ export default {
           }
         }
       ],
-      data: [],
-      pagination: {
-        pageSize: 10
-      }
+      info: ref(info)
     })
 
     function play(row) {
       console.log(row)
     }
 
-    /**
-     * @description: 获取用户数据
-     * @return {*}
-     */
-    async function fetchList() {
-      const params = {
-        page: 1,
-        limit: 10
-      }
-      const res = await getUserList(params)
-      data.data = res.data
-    }
-
     const params = reactive({
       name: 'xiaoMa'
     })
@@ -165,10 +91,6 @@ export default {
       return await getUserList(_params)
     }
 
-    onMounted(() => {
-      fetchList()
-    })
-
     return { data, loadDataTable }
   }
 }
diff --git a/src/views/system/role/info.js b/src/views/system/role/info.js
new file mode 100644
index 0000000..a45860a
--- /dev/null
+++ b/src/views/system/role/info.js
@@ -0,0 +1,20 @@
+const data = [
+  {
+    label: '角色名称',
+    key: 'name',
+    placeholder: '请输入角色名称'
+  },
+  {
+    label: '角色备注',
+    key: 'desc'
+  },
+  {
+    label: '角色类型',
+    key: 'op',
+    options: [{
+      label: 11, value: 1
+    }]
+  }
+]
+
+export default data
diff --git a/src/views/system/role/table.js b/src/views/system/role/table.js
new file mode 100644
index 0000000..04c91b2
--- /dev/null
+++ b/src/views/system/role/table.js
@@ -0,0 +1,73 @@
+import TableImage from '@/components/DataTable/tools/Image.vue'
+import { h } from 'vue'
+
+const data = {
+  columns: [
+    {
+      title: '用户编号',
+      key: 'code',
+      align: 'center'
+    },
+    {
+      title: '头像',
+      key: 'avatar',
+      align: 'center',
+      render(row) {
+        return h(TableImage, {
+          images: {
+            width: 36,
+            height: 36,
+            src: row.avatar
+          }
+        })
+      }
+    },
+    {
+      title: '用户账号',
+      key: 'username',
+      align: 'center'
+    },
+    {
+      title: '用户姓名',
+      key: 'realname',
+      align: 'center'
+    },
+    {
+      title: '用户类型',
+      key: 'type',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '角色',
+      key: 'roles',
+      align: 'center'
+
+    },
+    {
+      title: '状态',
+      key: 'status',
+      align: 'center',
+      width: 100
+    },
+    {
+      title: '部门',
+      key: 'deptName',
+      align: 'center'
+    },
+    {
+      title: '创建时间',
+      key: 'createTime',
+      align: 'center',
+      width: 160
+    },
+    {
+      title: '更新时间',
+      key: 'updateTime',
+      align: 'center',
+      width: 160
+    }
+  ]
+}
+
+export default data
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 745a9ae..7c75b49 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -143,7 +143,7 @@ export default {
         limit: 10
       }
       const res = await getUserList(params)
-      data.data = res.data
+      data.data = res.data.list
     }
 
     onMounted(() => {