工作要点

src/views/project/gist/list.vue

@@ -3,20 +3,20 @@
         <template #header>
             <hc-date-year v-model="searchForm.startYear" v-model:end="searchForm.endYear" />
             <div class="relative ml-3 w-[300px]">
-                <hc-search-input v-model="searchForm.queryValue" text="搜索" color="#151921" @search="searchClick" />
+                <hc-search-input v-model="searchForm.targetPlan" text="搜索" color="#151921" @search="searchClick" />
             </div>
         </template>
         <template #extra>
             <div class="w-[120px]">
-                <el-select v-model="searchForm.key1" filterable clearable block placeholder="项目阶段" @change="searchClick">
-                    <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
+                <el-select v-model="searchForm.workFocusStage" filterable clearable block placeholder="项目阶段" @change="searchClick">
+                    <el-option v-for="item in projectStage" :key="item.value" :label="item.label" :value="item.value" />
                 </el-select>
             </div>
             <el-button v-del-com:[delTableItem] type="danger" class="ml-2" :disabled="tableCheckKeys.length <= 0">批量删除</el-button>
             <el-button type="warning" class="ml-2" @click="importClick">导入</el-button>
             <el-button v-yes-com:[deriveTableItem] type="primary" class="ml-2" :disabled="tableCheckKeys.length <= 0">批量导出</el-button>
         </template>
-        <HcTableList ref="tableRef" is-admin @tap="rowNameClick" @check="tableCheck" />
+        <HcTableList ref="tableRef" :datas="tableData" :loading="tableLoading" is-admin @tap="rowNameClick" @check="tableCheck" />
         <template #action>
             <hc-pages :pages="searchForm" @change="pageChange" />
         </template>
@@ -41,6 +41,7 @@ import { onMounted, ref } from 'vue'
 import HcTableList from '../modules/gist-list.vue'
 import { getDictionaryData } from '~src/utils/tools'
 import mainApi from '~api/project/gist'
+import { getArrValue } from 'js-fast-way'
 
 //事件
 const emit = defineEmits(['edit'])
@@ -52,6 +53,7 @@ onMounted(() => {
 //获取接口数据
 const getDataApi = async () => {
     projectStage.value = await getDictionaryData('projectStage', true)
+    searchClick()
 }
 
 const tableRef = ref(null)
@@ -60,15 +62,38 @@ const tableRef = ref(null)
 const projectStage = ref([])
 
 //搜索条件
-const searchForm = ref({ queryValue: '', year: '', current: 1, size: 20, total: 0 })
+const searchForm = ref({
+    targetPlan: '', year: '', workFocusStage: null,
+    current: 1, size: 20, total: 0,
+})
 const searchClick = () => {
-
+    searchForm.value.current = 1
+    getTableData()
 }
 
 //分页
 const pageChange = ({ current, size }) => {
     searchForm.value.current = current
     searchForm.value.size = size
+    getTableData()
+}
+
+//表格数据
+const tableData = ref([])
+const tableLoading = ref(false)
+const getTableData = async () => {
+    tableData.value = []
+    tableLoading.value = true
+    const { error, code, data } = await mainApi.page(searchForm.value)
+    //处理数据
+    tableLoading.value = false
+    if (!error && code === 200) {
+        tableData.value = getArrValue(data['records'])
+        searchForm.value.total = data.total || 0
+    } else {
+        tableData.value = []
+        searchForm.value.total = 0
+    }
 }
 
 //表格被选择

src/views/project/modules/gist-list.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-loading="!isAfterRender" class="hc-full" element-loading-text="加载中...">
+    <div v-loading="isLoading" class="hc-full" element-loading-text="加载中...">
         <hc-table
             :column="tableColumn" :datas="tableData" :index-style="{ width: 60 }" is-check :check-style="{ fixed: true, width: 29 }"
             class="hc-project-list-table" @selection-change="tableCheckChange"
@@ -117,13 +117,21 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
     isAdmin: {
         type: Boolean,
         default: false,
     },
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+    datas: {
+        type: Array,
+        default: () => ([]),
+    },
 })
 
 //事件
@@ -135,37 +143,30 @@ watch(() => props.isAdmin, (admin) => {
     isAdminAuth.value = admin
 })
 
-//渲染完成
-const isAfterRender = ref(false)
-onMounted(() => {
-    //表格太复杂，渲染较慢，等页面先加载完成，再渲染表格，不然会卡住一下不动。
-    //因为表头涉及到年份，如果年份很多，那么会更卡。
-    setTimeout(() => {
-        isAfterRender.value = true
-    }, 200)
+//监听数据
+const tableData = ref(props.datas)
+watch(() => props.datas, (data) => {
+    tableData.value = data
+})
+
+//监听加载
+const isLoading = ref(props.loading)
+watch(() => props.loading, (res) => {
+    isLoading.value = res
 })
 
 //表头
 const tableColumn = [
-    { key: 'key1', name: '项目阶段', width: 100 },
-    { key: 'key2', name: '目标任务', width: 140 },
-    { key: 'key3', name: '工作内容' },
-    { key: 'key4', name: '开始年份', width: 100 },
-    { key: 'key5', name: '结束年份', width: 100 },
-    { key: 'key6', name: '责任单位', width: 100 },
+    { key: 'workFocusStage', name: '项目阶段', width: 100 },
+    { key: 'targetPlan', name: '目标任务', width: 140 },
+    { key: 'workPlan', name: '工作内容' },
+    { key: 'startYear', name: '开始年份', width: 100 },
+    { key: 'endYear', name: '结束年份', width: 100 },
+    { key: 'dutyUnit', name: '责任单位', width: 100 },
     { key: 'key7', name: '完成情况填写比例(%)', width: 100 },
     { key: 'action', name: '操作', width: isAdminAuth.value ? 220 : 100, fixed:'right', align: 'center' },
 ]
 
-//表格数据
-const tableData = ref([
-   { id: 1, key1: '-', key2: '名称1', key3: '-' },
-   { id: 2, key1: '-', key2: '名称2', key3: '-' },
-   { id: 3, key1: '-', key2: '名称3', key3: '-' },
-   { id: 4, key1: '-', key2: '名称4', key3: '-' },
-   { id: 5, key1: '-', key2: '名称5', key3: '-' },
-])
-
 //表格被选择
 const tableCheckKeys = ref([])
 const tableCheckChange = (rows) => {