feat: add search-list page

陈小婷
1 parent 962f90de
Showing 5 changed files with 173 additions and 3 deletions
src/locales/lang/zh_CN/routes/demo/page.ts
src/router/menus/modules/demo/page.ts
src/router/routes/modules/demo/page.ts
src/views/demo/page/list/search/data.tsx
src/views/demo/page/list/search/index.vue
@@ -24,5 +24,6 @@ export default {
   list: '列表页',
   listCard: '卡片列表',
-  basic: '标准列表',
+  listBasic: '标准列表',
+  listSearch: '搜索列表',
 };
@@ -107,12 +107,16 @@ const menu: MenuModule = {
         children: [
           {
             path: 'basic',
-            name: '标准列表',
+            name: 'routes.demo.page.listBasic',
           },
           {
             path: 'card',
             name: 'routes.demo.page.listCard',
           },
+          {
+            path: 'search',
+            name: 'routes.demo.page.listSearch',
+          },
         ],
       },
     ],
@@ -223,7 +223,7 @@ const page: AppRouteModule = {
           name: 'ListBasicPage',
           component: () => import('/@/views/demo/page/list/basic/index.vue'),
           meta: {
-            title: 'routes.demo.page.basic',
+            title: 'routes.demo.page.listBasic',
           },
         },
         {
@@ -234,6 +234,14 @@ const page: AppRouteModule = {
             title: 'routes.demo.page.listCard',
           },
         },
+        {
+          path: 'search',
+          name: 'ListSearchPage',
+          component: () => import('/@/views/demo/page/list/search/index.vue'),
+          meta: {
+            title: 'routes.demo.page.listSearch',
+          },
+        },
       ],
     },
     // =============================list end=============================
+import { FormSchema } from '/@/components/Form/index';
+
+export const searchList = (() => {
+  const result: any[] = [];
+  for (let i = 0; i < 6; i++) {
+    result.push({
+      id: i,
+      title: 'Vben Admin',
+      description: ['Vben', '设计语言', 'Typescript'],
+      content: '基于Vue Next, TypeScript, Ant Design实现的一套完整的企业级后台管理系统。',
+      time: '2020-11-14 11:20',
+    });
+  }
+  return result;
+})();
+
+export const actions: any[] = [
+  { icon: 'ant-design:star-outlined', text: '156', color: '#018ffb' },
+  { icon: 'ant-design:like-filled', text: '156', color: '#459ae8' },
+  { icon: 'ant-design:message-filled', text: '2', color: '#42d27d' },
+];
+
+export const schemas: FormSchema[] = [
+  {
+    field: 'field1',
+    component: 'InputSearch',
+    label: '项目名',
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      onChange: (e: any) => {
+        console.log(e);
+      },
+    },
+  },
+];
+<template>
+  <div :class="prefixCls">
+    <a-page-header title="搜索列表" :ghost="false" :class="`${prefixCls}__header`">
+      <BasicForm
+        :class="`${prefixCls}__header-form`"
+        :labelWidth="100"
+        :schemas="schemas"
+        :showActionButtonGroup="false"
+      />
+    </a-page-header>
+
+    <div :class="`${prefixCls}__container`">
+      <a-list>
+        <template v-for="item in list" :key="item.id">
+          <a-list-item>
+            <a-list-item-meta>
+              <template #description>
+                <div :class="`${prefixCls}__content`">{{ item.content }}</div>
+                <div :class="`${prefixCls}__action`">
+                  <template v-for="(action, index) in actions" :key="index">
+                    <div :class="`${prefixCls}__action-item`">
+                      <Icon
+                        v-if="action.icon"
+                        :class="`${prefixCls}__action-icon`"
+                        :icon="action.icon"
+                        :color="action.color"
+                      />
+                      {{ action.text }}
+                    </div>
+                  </template>
+                  <span :class="`${prefixCls}__time`">{{ item.time }}</span>
+                </div>
+              </template>
+              <template #title>
+                <p :class="`${prefixCls}__title`"> {{ item.title }}</p>
+                <div>
+                  <template v-for="(tag, index) in item.description" :key="index">
+                    <Tag class="mb-2">{{ tag }}</Tag>
+                  </template>
+                </div>
+              </template>
+            </a-list-item-meta>
+          </a-list-item>
+        </template>
+      </a-list>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { Tag } from 'ant-design-vue';
+  import { defineComponent } from 'vue';
+  import Icon from '/@/components/Icon/index';
+  import { BasicForm } from '/@/components/Form/index';
+  import { actions, searchList, schemas } from './data';
+
+  export default defineComponent({
+    components: { Icon, Tag, BasicForm },
+    setup() {
+      return {
+        prefixCls: 'list-search',
+        list: searchList,
+        actions,
+        schemas,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .list-search {
+    &__header {
+      &-form {
+        margin-bottom: -16px;
+      }
+    }
+
+    &__container {
+      padding: 12px;
+      margin: 24px;
+      background: #fff;
+    }
+
+    &__title {
+      margin-bottom: 12px;
+      font-size: 18px;
+    }
+
+    &__content {
+      color: rgba(0, 0, 0, 0.65);
+    }
+
+    &__action {
+      margin-top: 10px;
+
+      &-item {
+        display: inline-block;
+        padding: 0 16px;
+        color: rgba(0, 0, 0, 0.45);
+
+        &:nth-child(1) {
+          padding-left: 0;
+        }
+
+        &:nth-child(1),
+        &:nth-child(2) {
+          border-right: 1px solid rgba(206, 206, 206, 0.4);
+        }
+      }
+
+      &-icon {
+        margin-right: 3px;
+      }
+    }
+
+    &__time {
+      position: absolute;
+      right: 20px;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+</style>