<template>
|
<div class="project">
|
<div class="side-header">
|
<div class="side-option flex-display flex-align-center flex-justify-between">
|
<h2 class="title">项目列表</h2>
|
<PlusCircleOutlined @click="goAdd" :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.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 @click="() => searchInput = !searchInput"
|
:style="{ color: searchInput ? '#1180ff' : '', fontSize: '24px', display: 'flex', alignItems: 'center', marginRight: '12px' }" />
|
</div>
|
<div class="side-filter-input" v-if="searchInput">
|
<a-input v-model:value="params.projectName" placeholder="按项目名称搜索">
|
<template #suffix>
|
<MonitorOutlined :style="{ color: '#fff', fontSize: '18px' }" />
|
</template>
|
</a-input>
|
</div>
|
</div>
|
<div class="wrap_card">
|
<List @refreshList="init" v-model="spinning" :cardList="cardList"></List>
|
</div>
|
<!-- <button @click="goDetail">列表详情</button> -->
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ERouterName } from '/@/types/enums'
|
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 { useMyStore } from '/@/store'
|
import Select from '/@/components/Search/Select.vue'
|
import List from './components/ProjectList.vue'
|
const { appContext } = getCurrentInstance()
|
const global = appContext.config.globalProperties
|
const router = useRouter()
|
const store = useMyStore()
|
const sort = ref('createTime')
|
const searchInput = ref(false)
|
interface paramsFaca {
|
projectStatus: string
|
project: string
|
column: string
|
sort: string
|
projectName?: string
|
}
|
const params = ref<paramsFaca>({
|
projectStatus: '',
|
project: '',
|
column: 'create_time',
|
sort: 'desc',
|
projectName: '',
|
})
|
// ant 加载
|
const spinning = ref<boolean>(false)
|
|
const goDetail = () => {
|
router.push({ name: ERouterName.WORKSPACE })
|
store.commit('SET_POINT_LIST', [])
|
}
|
const goAdd = () => {
|
router.push({ name: ERouterName.ADD_PROJECT })
|
store.commit('SET_POINT_LIST', [])
|
}
|
const cardList = ref<projectCard[]>([])
|
// 全部状态、全部项目筛选方法
|
const handleChange = (e: any) => {
|
init()
|
}
|
// 排序方法
|
const sortHandleChange = (e: string) => {
|
params.value.column = sortEnum[e]
|
params.value.sort = map.get(e) || 'create_time'
|
init()
|
}
|
// 页面初始化
|
const init = async () => {
|
spinning.value = true
|
const res = await getProjectPage(params.value).catch(e => {
|
spinning.value = false
|
})
|
cardList.value = res.data.records
|
const longitudeList = res.data.records.map((item: { id: string, longitude: any; latitude: any, projectName: string }) => {
|
return {
|
longitude: item.longitude,
|
latitude: item.latitude,
|
label: item.projectName,
|
id: item.id
|
}
|
})
|
store.commit('SET_POINT_LIST', longitudeList)
|
spinning.value = false
|
}
|
onMounted(() => {
|
init()
|
console.log(global, '+++++')
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.project {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
|
.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;
|
font-weight: 700;
|
}
|
}
|
}
|
|
.side-filter-warp {
|
background-color: #232323;
|
padding: 10px 0;
|
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) {
|
background-color: #232323 !important;
|
}
|
|
: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) {
|
color: #fff !important;
|
}
|
|
:deep(.ant-select-arrow) {
|
color: #fff !important;
|
}
|
|
.wrap_card {
|
flex: 1;
|
overflow-y: auto;
|
}
|
}
|
</style>
|
