项目资料收集

src/views/project/admin/list.vue

@@ -1,9 +1,11 @@
 <template>
-    <hc-card>项目列表</hc-card>
+    <hc-card>
+        <HcTableList />
+    </hc-card>
 </template>
 
 <script setup>
-
+import HcTableList from '../modules/project-list.vue'
 </script>
 
 <style scoped lang="scss">

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

@@ -0,0 +1,288 @@
+<template>
+    <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"
+    >
+        <template #key1="{ row }">
+            <el-link type="primary" @click="rowNameClick(row)">{{ row.key1 }}</el-link>
+        </template>
+        <template #action="{ row }">
+            <el-link v-if="isAdminAuth" type="warning" @click="completion(row)">项目完成情况</el-link>
+            <el-link type="primary" @click="examine(row)">查看</el-link>
+            <el-link v-if="isAdminAuth" v-del-com:[delTableItem]="row" type="danger">删除</el-link>
+            <el-link v-yes-com:[deriveTableItem]="row" type="success" yes-com-text="您确定要导出当前数据吗？">导出</el-link>
+        </template>
+    </hc-table>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+
+const props = defineProps({
+    isAdmin: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+//事件
+const emit = defineEmits(['tap', 'completion', 'examine', 'del', 'export'])
+
+//监听权限
+const isAdminAuth = ref(props.isAdmin)
+watch(() => props.isAdmin, (admin) => {
+    isAdminAuth.value = admin
+})
+
+//渲染完成
+onMounted(() => {
+
+})
+
+//表头
+const tableColumn = ref([
+   { key: 'key1', name: '项目名称' },
+   { key: 'key2', name: '项目类型' },
+   { key: 'key3', name: '建设规模' },
+   { key: 'key4', name: '开工年' },
+   { key: 'key5', name: '完工年' },
+   { key: 'key6', name: '牵头单位' },
+   { key: 'key7', name: '配合单位' },
+   { key: 'key8', name: '责任单位' },
+   {
+       name: '2024年',
+       children: [
+           { key: 'key9', name: '全年投资(亿元)' },
+           { key: 'key10', name: '预计一季度完成投资比例(亿元)' },
+           { key: 'key11', name: '预计二季度完成投资比例(亿元)' },
+           { key: 'key12', name: '预计三季度完成投资比例(亿元)' },
+           { key: 'key13', name: '预计四季度完成投资比例(亿元)' },
+           {
+               name: '投资完成金额(亿元)',
+               children: [
+                   {
+                       name: '一季度',
+                       children: [
+                           { key: 'january', name: '1月' },
+                           { key: 'february', name: '2月' },
+                           { key: 'march', name: '3月' },
+                       ],
+                   },
+                   {
+                       name: '二季度',
+                       children: [
+                           { key: 'april', name: '4月' },
+                           { key: 'may', name: '5月' },
+                           { key: 'june', name: '6月' },
+                       ],
+                   },
+                   {
+                       name: '三季度',
+                       children: [
+                           { key: 'july', name: '7月' },
+                           { key: 'august', name: '8月' },
+                           { key: 'september', name: '9月' },
+                       ],
+                   },
+                   {
+                       name: '四季度',
+                       children: [
+                           { key: 'october', name: '10月' },
+                           { key: 'november', name: '11月' },
+                           { key: 'december', name: '12月' },
+                       ],
+                   },
+               ],
+           },
+           { key: 'key15', name: '当年累计完成投资(亿元)' },
+           { key: 'key16', name: '开工累计完成投资(亿元)' },
+           { key: 'key17', name: '全年目标' },
+           { key: 'key18', name: '一季度工作计划' },
+           { key: 'key19', name: '二季度工作计划' },
+           { key: 'key20', name: '三季度工作计划' },
+           { key: 'key21', name: '四季度工作计划' },
+           {
+               name: '工作计划完成情况',
+               children: [
+                   {
+                       name: '1月',
+                       children: [
+                           { key: 'january1', name: '累计进展情况' },
+                           { key: 'january2', name: '当月进展情况' },
+                           { key: 'january3', name: '形象进度百分比' },
+                       ],
+                   },
+                   {
+                       name: '2月',
+                       children: [
+                           { key: 'february1', name: '累计进展情况' },
+                           { key: 'february2', name: '当月进展情况' },
+                           { key: 'february3', name: '形象进度百分比' },
+                       ],
+                   },
+                   {
+                       name: '3月',
+                       children: [
+                           { key: 'march1', name: '累计进展情况' },
+                           { key: 'march2', name: '当月进展情况' },
+                           { key: 'march3', name: '形象进度百分比' },
+                       ],
+                   },
+                   {
+                       name: '4月',
+                       children: [
+                           { key: 'april1', name: '累计进展情况' },
+                           { key: 'april2', name: '当月进展情况' },
+                           { key: 'april3', name: '形象进度百分比' },
+                       ],
+                   },
+                   {
+                       name: '5月',
+                       children: [
+                           { key: 'may1', name: '累计进展情况' },
+                           { key: 'may2', name: '当月进展情况' },
+                           { key: 'may3', name: '形象进度百分比' },
+                       ],
+                   },
+                   {
+                       name: '6月',
+                       children: [
+                           { key: 'june1', name: '累计进展情况' },
+                           { key: 'june2', name: '当月进展情况' },
+                           { key: 'june3', name: '形象进度百分比' },
+                       ],
+                   },
+                   {
+                       name: '7月',
+                       children: [
+                           { key: 'july1', name: '累计进展情况' },
+                           { key: 'july2', name: '当月进展情况' },
+                           { key: 'july3', name: '形象进度百分比' },
+                       ],
+                   },
+                   {
+                       name: '8月',
+                       children: [
+                           { key: 'august1', name: '累计进展情况' },
+                           { key: 'august2', name: '当月进展情况' },
+                           { key: 'august3', name: '形象进度百分比' },
+                       ],
+                   },
+                   {
+                       name: '9月',
+                       children: [
+                           { key: 'september1', name: '累计进展情况' },
+                           { key: 'september2', name: '当月进展情况' },
+                           { key: 'september3', name: '形象进度百分比' },
+                       ],
+                   },
+                   {
+                       name: '10月',
+                       children: [
+                           { key: 'october1', name: '累计进展情况' },
+                           { key: 'october2', name: '当月进展情况' },
+                           { key: 'october3', name: '形象进度百分比' },
+                       ],
+                   },
+                   {
+                       name: '11月',
+                       children: [
+                           { key: 'november1', name: '累计进展情况' },
+                           { key: 'november2', name: '当月进展情况' },
+                           { key: 'november3', name: '形象进度百分比' },
+                       ],
+                   },
+                   {
+                       name: '12月',
+                       children: [
+                           { key: 'december1', name: '累计进展情况' },
+                           { key: 'december2', name: '当月进展情况' },
+                           { key: 'december3', name: '形象进度百分比' },
+                       ],
+                   },
+               ],
+           },
+           { key: 'key23', name: '存在问题' },
+           { key: 'key24', name: '工作建议' },
+           { key: 'key25', name: '填报单位' },
+           { key: 'key26', name: '联系人' },
+       ],
+   },
+    { key: 'action', name: '操作', width: isAdminAuth.value ? 220 : 100, fixed:'right', align: 'center' },
+])
+
+//表格数据
+const tableData = ref([
+   { key1: '名称1', key2: '-', key3: '-' },
+   { key1: '名称2', key2: '-', key3: '-' },
+   { key1: '名称3', key2: '-', key3: '-' },
+   { key1: '名称4', key2: '-', key3: '-' },
+   { key1: '名称5', key2: '-', key3: '-' },
+])
+
+//表格被选择
+const tableCheckKeys = ref([])
+const tableCheckChange = (rows) => {
+    tableCheckKeys.value = rows
+}
+
+//项目名称被点击
+const rowNameClick = (row) => {
+    console.log('项目名称被点击')
+    emit('tap', row)
+}
+
+//项目完成情况
+const completion = (row) => {
+    console.log('项目完成情况')
+    emit('completion', row)
+}
+
+//查看
+const examine = (row) => {
+    console.log('查看')
+    emit('examine', row)
+}
+
+//删除
+const delTableItem = ({ item }, resolve) => {
+    console.log('我被执行了', item)
+    //这里可以写一些操作，下面是模拟3秒关闭
+    setTimeout(() => {
+        resolve()
+        emit('del', item)
+    }, 3000)
+}
+
+//导出数据
+const deriveTableItem = ({ item }, resolve) => {
+    console.log('我被执行了', item)
+    //这里可以写一些操作，下面是模拟3秒关闭
+    setTimeout(() => {
+        resolve()
+        emit('export', item)
+    }, 3000)
+}
+</script>
+
+<style lang="scss">
+.hc-project-list-table .el-table[hc].new {
+    --el-table-header-bg-color: #101010;
+    --el-table-header-text-color: #fff;
+    --el-table-text-color: #101010;
+    thead.is-group th.el-table__cell {
+        background: var(--el-table-header-bg-color);
+    }
+    thead .el-table-fixed-column--left.el-table__cell,
+    thead .el-table-fixed-column--right.el-table__cell {
+        background: var(--el-table-header-bg-color) !important;
+    }
+    tbody .el-table-fixed-column--left.el-table__cell,
+    tbody .el-table-fixed-column--right.el-table__cell {
+        background: var(--el-table-tr-bg-color) !important;
+    }
+    .el-table__body tr.current-row>td.el-table__cell {
+        background-color: var(--el-table-current-row-bg-color) !important;
+    }
+}
+</style>