项目资料收集

src/views/project/gist/list.vue

@@ -1,11 +1,105 @@
 <template>
-    <div>工作要点列表</div>
+    <hc-card class="hc-project-collect-gist-list">
+        <template #header>
+            <div class="relative ml-3 w-[300px]">
+                <hc-search-input v-model="searchForm.queryValue" text="搜索" @search="searchClick">
+                    <template #prepend>
+                        <el-select v-model="searchForm.year" placeholder="年份" style="width: 75px">
+                            <el-option label="2023" value="2023" />
+                            <el-option label="2024" value="2024" />
+                        </el-select>
+                    </template>
+                </hc-search-input>
+            </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>
+            </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" />
+        <template #action>
+            <hc-pages :pages="searchForm" @change="pageChange" />
+        </template>
+
+        <!-- 导入 -->
+        <hc-dialog v-model="isImportShow" widths="24rem" title="项目数据导入" :footer="false" @close="modalImportClose">
+            <hc-form-upload
+                v-model="importFile" class="hc-form-drop-upload"
+                :options="{ num: 0, type: 'list', drop: true }"
+                :upload="{ options: uploadOptions }"
+            />
+            <div class="hc-flex mt-5">
+                <span class="mr-2">模板下载:</span>
+                <el-button color="#20C98B" size="small" class="text-white">点击下载</el-button>
+            </div>
+        </hc-dialog>
+    </hc-card>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import HcTableList from '../modules/gist-list.vue'
 
-</script>
+//事件
+const emit = defineEmits(['edit'])
+
+const tableRef = ref(null)
+
+//项目阶段
+const stateOptions = ref([{ value: '1', label: '新开工项目' }, { value: '2', label: '建成项目' }, { value: '3', label: '在建项目' }])
+
+//搜索条件
+const searchForm = ref({ queryValue: '', year: '', current: 1, size: 20, total: 0 })
+const searchClick = () => {
+
+}
 
-<style scoped lang="scss">
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
 
-</style>
+//表格被选择
+const tableCheckKeys = ref([])
+const tableCheck = (row) => {
+    tableCheckKeys.value = row
+}
+
+//项目名称被点击
+const rowNameClick = (row) => {
+    emit('edit', row)
+}
+
+//批量删除
+const delTableItem = () => {
+    tableRef.value?.batchRemove()
+}
+
+//批量导出
+const deriveTableItem = () => {
+    tableRef.value?.batchExport()
+}
+
+//项目数据导入
+const isImportShow = ref(false)
+const importFile = ref([])
+const uploadOptions = {
+    accept: '.xls,.xlsx',
+    accept_tip: '请选择Excel文件',
+}
+const importClick = () => {
+    isImportShow.value = true
+}
+
+//关闭项目数据导入弹窗
+const modalImportClose = () => {
+    isImportShow.value = false
+}
+</script>

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

@@ -0,0 +1,439 @@
+<template>
+    <div class="hc-full">
+        <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">导出</el-link>
+            </template>
+        </hc-table>
+        <!-- 查看详情 -->
+        <hc-drawer v-model="isDrawer" to-id="hc-main-box" is-close>
+            <hc-card class="hc-project-list-drawer">
+                <template #header>
+                    <div class="flex-1 text-center text-[24px] font-bold">工作要点详情</div>
+                </template>
+                <hc-info-table>
+                    <tr>
+                        <hc-info-table-td is-title width="10%" center>项目阶段</hc-info-table-td>
+                        <hc-info-table-td center width="90%">
+                            <span class="text-[18px] font-bold">紧盯重大项目，推动交通投资稳进增效</span>
+                        </hc-info-table-td>
+                    </tr>
+                    <tr>
+                        <hc-info-table-td is-title width="10%" center>目标任务</hc-info-table-td>
+                        <hc-info-table-td center width="90%">充分发挥投资的关键作用</hc-info-table-td>
+                    </tr>
+                    <tr>
+                        <hc-info-table-td is-title width="10%" center>工作内容</hc-info-table-td>
+                        <hc-info-table-td center width="90%">2024年，市交通运输委完成投资1155亿元，其中铁路计划完成投资480亿元、公路计划完成投资565亿元（高速公路建设计划投资428亿元、高速公路养护计划投资8.5亿元、普通公路建设及养护工程力争完成投资110亿元、公交及枢纽场站计划投资8.5亿元）、水运计划投资39亿元、民航计划投资70亿元、邮政计划投资1.3亿元、公交车辆购置更新等其他计划投资10亿元。</hc-info-table-td>
+                    </tr>
+                    <tr>
+                        <hc-info-table-td is-title width="10%" center>责任单位</hc-info-table-td>
+                        <hc-info-table-td center width="90%">市交通运输委</hc-info-table-td>
+                    </tr>
+                </hc-info-table>
+                <div class="hc-project-list-drawer-year">
+                    <el-scrollbar>
+                        <div class="relative p-2">
+                            <hc-card-item class="year-detail">
+                                <template #header>
+                                    <div class="flex-1 text-center text-[14px]">
+                                        <HcDropdown v-model="yearKey" :datas="yearData" />
+                                    </div>
+                                </template>
+                                <div class="hc-gist-info-table bb-0">
+                                    <div class="title left">年度工作完成情况</div>
+                                    <div class="content">这里是内容区域</div>
+                                </div>
+                                <div class="hc-flex">
+                                    <div class="hc-gist-info-table bb-0 flex-1">
+                                        <div class="title">上半年</div>
+                                        <div class="content">这里是内容区域</div>
+                                    </div>
+                                    <div class="hc-gist-info-table bl-0 bb-0 flex-1">
+                                        <div class="title">下半年</div>
+                                        <div class="content">这里是内容区域</div>
+                                    </div>
+                                </div>
+                                <hc-info-table>
+                                    <tr>
+                                        <hc-info-table-td is-title width="10%" center>一季度</hc-info-table-td>
+                                        <hc-info-table-td center width="90%">xxxxx</hc-info-table-td>
+                                    </tr>
+                                    <tr>
+                                        <hc-info-table-td is-title width="10%" center>二季度</hc-info-table-td>
+                                        <hc-info-table-td center width="90%">xxxxx</hc-info-table-td>
+                                    </tr>
+                                    <tr>
+                                        <hc-info-table-td is-title width="10%" center>三季度</hc-info-table-td>
+                                        <hc-info-table-td center width="90%">xxxxx</hc-info-table-td>
+                                    </tr>
+                                    <tr>
+                                        <hc-info-table-td is-title width="10%" center>四季度</hc-info-table-td>
+                                        <hc-info-table-td center width="90%">xxxxx</hc-info-table-td>
+                                    </tr>
+                                </hc-info-table>
+                            </hc-card-item>
+                        </div>
+                    </el-scrollbar>
+                </div>
+            </hc-card>
+        </hc-drawer>
+
+        <!-- 工作完成情况 -->
+        <hc-dialog v-model="isCompletionShow" widths="44rem" title="工作完成情况" @close="modalCompletionClose">
+            <el-form ref="caseFormRef" :model="caseForm" :rules="caseFormRules" label-position="top" label-width="auto">
+                <el-row :gutter="20">
+                    <el-col :span="8">
+                        <el-form-item label="选择年份：" prop="key1">
+                            <el-select v-model="caseForm.key1" placeholder="选择年份">
+                                <el-option label="2022年" value="2022" />
+                                <el-option label="2023年" value="2023" />
+                                <el-option label="2024年" value="2024" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="8">
+                        <el-form-item label="选择填报方式：" prop="key2">
+                            <el-select v-model="caseForm.key2" placeholder="选择填报方式">
+                                <el-option label="按季度填报" value="1" />
+                                <el-option label="按半年填报" value="2" />
+                                <el-option label="按一年填报" value="3" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col v-if="caseForm.key2 === '1'" :span="8">
+                        <el-form-item label="选择时间：" prop="key3">
+                            <el-select v-model="caseForm.key3" placeholder="选择时间">
+                                <el-option label="一季度" value="1" />
+                                <el-option label="二季度" value="2" />
+                                <el-option label="三季度" value="3" />
+                                <el-option label="四季度" value="4" />
+                                <el-option label="整年" value="5" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col v-if="caseForm.key2 === '2'" :span="8">
+                        <el-form-item label="选择时间：" prop="key4">
+                            <el-select v-model="caseForm.key4" placeholder="选择时间">
+                                <el-option label="上半年" value="1" />
+                                <el-option label="下半年" value="2" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-form-item label="工作完成情况：" prop="key5">
+                    <el-input v-model="caseForm.key5" placeholder="请输入工作完成情况" :rows="10" clearable type="textarea" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button size="large" @click="modalCompletionClose">取消</el-button>
+                    <el-button :loading="completionLoding" type="primary" @click="saveCompletionClick">保存</el-button>
+                </div>
+            </template>
+        </hc-dialog>
+    </div>
+</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', 'check'])
+
+//监听权限
+const isAdminAuth = ref(props.isAdmin)
+watch(() => props.isAdmin, (admin) => {
+    isAdminAuth.value = admin
+})
+
+//渲染完成
+onMounted(() => {
+
+})
+
+//表头
+const tableColumn = ref([
+   { key: 'key1', name: '目标任务' },
+   { key: 'key2', name: '工作内容' },
+   {
+       name: '2024年',
+       children: [
+           { key: 'key3', name: '整年' },
+           { key: 'key4', name: '上半年' },
+           { key: 'key5', name: '下半年' },
+           { key: 'key6', name: '第一季度' },
+           { key: 'key7', name: '第二季度' },
+           { key: 'key8', name: '第三季度' },
+           { key: 'key9', name: '第四季度' },
+       ],
+   },
+    { key: 'key10', name: '责任单位' },
+    { key: 'action', name: '操作', width: isAdminAuth.value ? 220 : 100, fixed:'right', align: 'center' },
+])
+
+//表格数据
+const tableData = ref([
+   { id: 1, key1: '名称1', key2: '-', key3: '-' },
+   { id: 2, key1: '名称2', key2: '-', key3: '-' },
+   { id: 3, key1: '名称3', key2: '-', key3: '-' },
+   { id: 4, key1: '名称4', key2: '-', key3: '-' },
+   { id: 5, key1: '名称5', key2: '-', key3: '-' },
+])
+
+//表格被选择
+const tableCheckKeys = ref([])
+const tableCheckChange = (rows) => {
+    tableCheckKeys.value = rows
+    emit('check', rows)
+}
+
+//项目名称被点击
+const rowNameClick = (row) => {
+    emit('tap', row)
+}
+
+//工作完成情况
+const isCompletionShow = ref(false)
+const completion = (row) => {
+    isCompletionShow.value = true
+    emit('completion', row)
+}
+
+//工作完成情况表单
+const caseFormRef = ref(null)
+const caseForm = ref({})
+const caseFormRules = {
+    key1: {
+        required: true,
+        message: '请选择年份',
+        trigger: 'change',
+    },
+    key2: {
+        required: true,
+        message: '请选择填报方式',
+        trigger: 'change',
+    },
+    key3: {
+        required: true,
+        message: '请选择时间',
+        trigger: 'change',
+    },
+    key4: {
+        required: true,
+        message: '请选择时间',
+        trigger: 'change',
+    },
+    key5: {
+        required: true,
+        message: '请填写工作完成情况',
+        trigger: 'blur',
+    },
+}
+
+//保存工作完成情况
+const completionLoding = ref(false)
+const saveCompletionClick = () => {
+    isCompletionShow.value = false
+}
+
+//工作完成情况弹窗 关闭
+const modalCompletionClose = () => {
+    isCompletionShow.value = false
+}
+
+
+//查看
+const isDrawer = ref(false)
+const examine = (row) => {
+    isDrawer.value = true
+    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)
+}
+
+//批量删除
+const batchRemove = () => {
+    if (!isAdminAuth.value) return
+    const rows = tableCheckKeys.value
+    console.log('批量删除', rows)
+}
+
+//批量导出
+const batchExport = () => {
+    const rows = tableCheckKeys.value
+    console.log('批量导出', rows)
+}
+
+//年数据
+const yearKey = ref('2023')
+const yearData = ref([
+    { key: '2023', label: '2023年' },
+    { key: '2024', label: '2024年' },
+])
+
+defineExpose({
+    batchRemove,
+    batchExport,
+})
+</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;
+    }
+}
+.hc-project-list-drawer-year {
+    position: relative;
+    border: 1px solid #dddddd;
+    border-top: 0;
+    height: calc(100% - 170px);
+    &.detail {
+        height: calc(100% - 34px);
+    }
+    .year-detail {
+        padding: 14px;
+        background: #f7f7f7;
+        border-radius: 5px;
+        .hc-card-item-header {
+            border-bottom: 1px solid #ecebeb;
+            padding-bottom: 10px;
+            .item-header {
+                justify-content: center;
+            }
+        }
+        .el-table {
+            --el-table-border-color: #dcdcdc;
+            --el-table-header-text-color: #101010;
+            --el-table-row-hover-bg-color: transparent;
+        }
+        .el-table th.el-table__cell.line {
+            padding: 0;
+            height: 100%;
+            .cell {
+                padding: 0;
+                height: 100%;
+                display: contents;
+            }
+            .hc-table-th-line {
+                position: relative;
+                height: 100%;
+                font-size: 14px;
+                display: contents;
+                .left {
+                    position: absolute;
+                    bottom: 6px;
+                    left: 10px;
+                }
+                .right {
+                    position: absolute;
+                    top: 6px;
+                    right: 6px;
+                    font-size: 13px;
+                }
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 36px;
+                    left: -20px;
+                    width: 180px;
+                    height: 1px;
+                    background: #dcdcdc;
+                    transform: rotate(27deg);
+                }
+            }
+        }
+        .el-table .el-table__cell .cell {
+            .hc-new-main-body_content {
+                padding: 4px !important;
+                .el-input, .el-textarea {
+                    height: 100%;
+                    .el-input__inner {
+                        text-align: center;
+                    }
+                    .el-textarea__inner {
+                        height: 100%;
+                    }
+                }
+            }
+        }
+    }
+}
+.hc-gist-info-table {
+    position: relative;
+    border: 1px solid #dddddd;
+    .title {
+        position: relative;
+        padding: 10px;
+        font-size: 14px;
+        background: #f9f9f9;
+        text-align: center;
+        border-bottom: 1px solid #dddddd;
+        &.left {
+            text-align: left;
+        }
+    }
+    .content {
+        background: white;
+        padding: 10px;
+        font-size: 14px;
+        min-height: 80px;
+        overflow: auto;
+    }
+    &.bb-0 {
+        border-bottom: 0;
+    }
+    &.bl-0 {
+        border-left: 0;
+    }
+}
+</style>