xieb
2023-09-13 3667807a7b7418efc090ee3fa6a6b734bc3080bf
src/pages/page-web/projects/project_list/list_page/list.vue
@@ -3,7 +3,7 @@
    <div class="side-header">
      <div class="side-option flex-display flex-align-center flex-justify-between">
        <h2 class="title">项目列表</h2>
        <PlusCircleOutlined @click="goAdd(11)" :style="{ fontSize: '20px' }" />
        <PlusCircleOutlined @click="goAdd" :style="{ fontSize: '20px' }" />
      </div>
      <div class="border-bottom"></div>
    </div>
@@ -24,7 +24,7 @@
      </div>
    </div>
    <div class="wrap_card">
      <List :cardList="cardList" />
      <List @refreshList="init" v-model="spinning" :cardList="cardList"></List>
    </div>
    <!-- <button @click="goDetail">列表详情</button> -->
  </div>
@@ -36,52 +36,72 @@
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)
const params = ref({
interface paramsFaca {
  projectStatus: string
  project: string
  column: string
  sort: string
  projectName?: string
}
const params = ref<paramsFaca>({
  projectStatus: '',
  project: '',
  orders: [
    {
      column: 'createTime',
      asc: map.get('createTime')
    }
  ],
  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 = (number:number) => {
  console.log(number, 'number')
const goAdd = () => {
  router.push({ name: ERouterName.ADD_PROJECT })
  store.commit('SET_POINT_LIST', [])
}
const cardList = ref<projectCard[]>([])
// 全部状态、全部项目筛选方法
const handleChange = (e: any) => {
  console.log(e, params.value, '=============')
  init()
}
// 排序方法
const sortHandleChange = (e: string) => {
  params.value.orders = [
    {
      column: sortEnum[e],
      asc: map.get(e)
    }
  ]
  params.value.column = sortEnum[e]
  params.value.sort = map.get(e) || 'create_time'
  init()
}
// 页面初始化
const init = async () => {
  const res = await getProjectPage(params.value)
  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>
@@ -159,4 +179,5 @@
    flex: 1;
    overflow-y: auto;
  }
}</style>
}
</style>