前端跨域配置、项目列表、登录、登出等功能对接、项目列表样式修改

husq

2023-08-29 9cf06d77201f75b518133203614c989b7c9f39b2

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

@@ -9,21 +9,32 @@
    </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" />
        <Select :bordered="false" :options="statusOption" v-model="params.projectStatus" @handleChange="handleChange" />
        <Select :bordered="false" :options="projectOption" v-model="params.project" @handleChange="handleChange" />
        <Select :bordered="false" :options="sortOption" v-model="sort" @handleChange="sortHandleChange" />
        <MonitorOutlined :style="{ fontSize: '24px', display: 'flex', alignItems: 'center', marginRight: '12px' }" />
      </div>
      <div class="side-filter-input">
        <a-input v-model:value="params.projectName" placeholder="按项目名称搜索">
          <template #suffix>
            <MonitorOutlined :style="{color: '#fff',fontSize: '18px'}" />
          </template>
        </a-input>
      </div>
    </div>
    <List />
    <div class="wrap_card">
      <List :cardList="cardList" />
    </div>
    <!-- <button @click="goDetail">列表详情</button> -->
  </div>
</template>

<script setup lang="ts">
import { ERouterName } from '/@/types/enums'
import { statusOption, sortOption, projectOption } from './data'
import { statusOption, sortOption, projectOption, map, sortEnum } from './data'
import { getPage as getProjectPage } from '/@/api/project-page'
import { PlusCircleOutlined, MonitorOutlined } from '@ant-design/icons-vue'
import { projectCard } from './components/data'
import Select from '/@/components/Search/Select.vue'
import List from './components/ProjectList.vue'
const router = useRouter()
@@ -31,25 +42,47 @@
  console.log(router, '==========')
  router.push({ name: ERouterName.WORKSPACE })
}
const params = reactive({
  status: '',
const params = ref({
  projectStatus: '',
  project: '',
  sort: '',
  orders: [
    {
      column: 'createTime',
      asc: map.get('createTime')
    }
  ],
  projectName: '',
})

const statusHandleChange = (e: any) => {
  console.log(e, params, '=============')
const sort = ref('createTime')
const cardList = ref<projectCard[]>([])
// 全部状态、全部项目筛选方法
const handleChange = (e: any) => {
  console.log(e, params.value, '=============')
}
const projectHandleChange = (e: any) => {
  console.log(e, params, '=============')
// 排序方法
const sortHandleChange = (e: string) => {
  params.value.orders = [
    {
      column: sortEnum[e],
      asc: map.get(e)
    }
  ]
}
const sortHandleChange = (e: any) => {
  console.log(e, params, '=============')
const init = async () => {
  const res = await getProjectPage(params.value)
  cardList.value = res.data.records
}
onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.project {
  display: flex;
  flex-direction: column;
  height: 100%;

  .side-header {
    height: 60px;
    font-size: 16px;
@@ -76,23 +109,44 @@
    border-bottom: 1px solid #4f4f4f;
  }

  .side-filter-input {
    padding: 8px 12px 4px 12px;
  }

  :deep(.ant-select-borderless .ant-select-selector) {
    background-color: #232323 !important;
    color: #fff !important;
    padding: 0 12px;
  }
  :deep(.ant-select-dropdown){

  :deep(.ant-select-dropdown) {
    background-color: #232323 !important;
  }
  :deep(.ant-select-item-option-selected){

  :deep(.ant-input) {
    background: #101010;
    border: none;
    color: #fff;
  }
  :deep(.ant-input-affix-wrapper){
    background: #101010;
  }
  :deep(.ant-select-item-option-selected) {
    color: #1180ff !important;
    background-color: #333333 !important;
  }
  :deep(.ant-select-item.ant-select-item-option){

  :deep(.ant-select-item.ant-select-item-option) {
    color: #fff !important;
  }

  :deep(.ant-select-arrow) {
    color: #fff !important;
  }

  .wrap_card {
    flex: 1;
    overflow-y: auto;
  }
}
</style>