登录流程对接、项目列表组件封装

胡思旗

2023-08-29 b80ee8c883f279e843071e6b53ab9cddec3f88a0

 src/pages/page-web/projects/project_list/list_page.vue/list.vue

@@ -1,18 +1,98 @@
<template>
    <div>
        我是列表页面
        <button @click="goDetail">列表详情</button>
  <div class="project">
    <div class="side-header">
      <div class="side-option flex-display flex-align-center flex-justify-between">
        <h2 class="title">项目列表</h2>
        <PlusCircleOutlined :style="{ fontSize: '20px' }" />
      </div>
      <div class="border-bottom"></div>
    </div>
    <div class="side-filter-warp">
      <div class="side-filter flex-display flex-align-center flex-justify-between">
        <Select :bordered="false" :options="statusOption" v-model="params.status" @handleChange="statusHandleChange" />
        <Select :bordered="false" :options="projectOption" v-model="params.project" @handleChange="projectHandleChange" />
        <Select :bordered="false" :options="sortOption" v-model="params.sort" @handleChange="sortHandleChange" />
        <MonitorOutlined :style="{ fontSize: '24px', display: 'flex', alignItems: 'center', marginRight: '12px' }" />
      </div>
    </div>
    <List />
    <!-- <button @click="goDetail">列表详情</button> -->
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ERouterName } from '/@/types/enums'
import { statusOption, sortOption, projectOption } from './data'
import { PlusCircleOutlined, MonitorOutlined } from '@ant-design/icons-vue'
import Select from '/@/components/Search/Select.vue'
import List from './components/ProjectList.vue'
const router = useRouter()
const goDetail = () => {
  console.log(router, '==========')
  router.push({ name: ERouterName.WORKSPACE })
}
const params = reactive({
  status: '',
  project: '',
  sort: '',
})

const statusHandleChange = (e: any) => {
  console.log(e, params, '=============')
}
const projectHandleChange = (e: any) => {
  console.log(e, params, '=============')
}
const sortHandleChange = (e: any) => {
  console.log(e, params, '=============')
}
</script>

<style scoped> </style>
<style scoped lang="scss">
.project {
  .side-header {
    height: 60px;
    font-size: 16px;
    line-height: 60px;
    box-sizing: border-box;
    background-color: #232323;
    border-bottom: 1px solid #4f4f4f;

    .side-option {
      padding: 0 16px;
      padding-right: 12px;

      .title {
        color: $text-white-basic;
        font-size: 18px;
        margin: 0;
      }
    }
  }

  .side-filter-warp {
    background-color: #232323;
    padding: 10px 0;
    border-bottom: 1px solid #4f4f4f;
  }

  :deep(.ant-select-borderless .ant-select-selector) {
    background-color: #232323 !important;
    color: #fff !important;
    padding: 0 12px;
  }
  :deep(.ant-select-dropdown){
    background-color: #232323 !important;
  }
  :deep(.ant-select-item-option-selected){
    color: #1180ff !important;
    background-color: #333333 !important;
  }
  :deep(.ant-select-item.ant-select-item-option){
    color: #fff !important;
  }
  :deep(.ant-select-arrow) {
    color: #fff !important;
  }
}
</style>