项目资料收集

src/styles/project/ledger.scss

@@ -0,0 +1,44 @@
+.hc-project-ledger-page {
+    .el-card.hc-card-box.hc-new-card-box {
+        .hc-card-header-box {
+            margin-bottom: 0;
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
+            .hc-card-header .tab-card-header-tabs {
+                .item {
+                    font-size: 18px;
+                    padding: 0 20px;
+                    border: 1px solid #bbbbbb;
+                    border-bottom: 0;
+                    &::after {
+                        display: none;
+                    }
+                    &:nth-child(1) {
+                        border-radius: 10px 0 0 0;
+                        border-right: 0;
+                    }
+                    &:nth-child(2) {
+                        border-radius: 0 10px 0 0;
+                        border-left: 0;
+                    }
+                }
+                .item.cur {
+                    color: white;
+                    background: #20C98B;
+                }
+            }
+            .hc-card-header-extra {
+                height: 100%;
+                padding-right: 14px;
+            }
+        }
+        .el-card__body {
+            padding: 5px 0 0;
+            .hc-card-main-body {
+                padding: 14px;
+            }
+            .hc-card-action {
+                padding: 0 14px 14px;
+            }
+        }
+    }
+}

src/views/project/ledger.vue

@@ -1,166 +1,82 @@
 <template>
-    <div class="hc-layout-box">
-        <hc-card :scrollbar="true" action-size="lg" class="ledger-page">
-            <el-tabs
-                v-model="editableTabsValue"
-                type="card"
-                class="demo-tabs"
-            >
-                <template #add-icon>
-                    1111
-                </template>
-                <el-tab-pane
-                    key="1"
-                    label="项目资料"
-                    name="1"
-                />
-                <el-tab-pane
-                    key="2"
-                    class="tab-right"
-                    label="工作要点"
-                    name="2"
-                />
-            </el-tabs>
-            <hc-table :column="tableColumn" :datas="tableData" :index-style="{ fixed: true, width: 60 }" is-check :check-style="{ fixed: true, width: 29 }">
-                <template #action="{ row, index }">
-                    <el-link type="primary">查看</el-link>
-                    <el-link type="success">导出</el-link>
-                </template>
-            </hc-table>
-        </hc-card>
-    </div>
+    <hc-tab-card :tabs="tabsData" :tab-key="tabsKey" class="hc-project-ledger-page" @change="tabsChange">
+        <template #extra>
+            <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="搜索" @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>
+            <div class="ml-6 w-[120px]">
+                <el-select v-model="searchForm.key1" filterable clearable block placeholder="项目阶段" @change="searchClick">
+                    <el-option v-for="item in stateData" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </div>
+            <div class="ml-2 w-[100px]">
+                <el-select v-model="searchForm.key2" filterable clearable block placeholder="项目类型" @change="searchClick">
+                    <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+            </div>
+            <el-button v-yes-com:[deriveTableItem] type="primary" class="ml-2">批量导出</el-button>
+        </template>
+
+        <HcTableList ref="tableRef" />
+
+        <template #action>
+            <hc-pages :pages="searchForm" @change="pageChange" />
+        </template>
+    </hc-tab-card>
 </template>
 
 <script setup>
-   import { ref } from 'vue'
+import { ref } from 'vue'
+import HcTableList from './modules/project-list.vue'
 
-const editableTabsValue = ref('2')
-
-const tableColumn = [
-   { key: 'key1', name: '项目名称' },
-   { key: 'key2', name: '项目类型' },
-   { 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: '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: '四季度工作计划' },
-   { key: 'key22', name: '工作计划完成情况' },
-   { key: 'key23', name: '存在问题' },
-   { key: 'key24', name: '工作建议' },
-   { key: 'key25', name: '填报单位' },
-   { key: 'key26', name: '联系人' },
-    { key: 'action', name: '操作', width: 100, fixed:'right', align: 'center' },
-]
-const tableData = ref([
-   { name: '名称1', text: '文本1', color: 'red' },
-   { name: '名称2', text: '文本2', color: 'blue' },
-   { name: '名称3', text: '文本3', color: '无' },
+//选项卡切换
+const tabsKey = ref('1')
+const tabsData = ref([
+    { key: '1', name: '项目资料' },
+    { key: '2', name: '工作要点' },
 ])
-</script>
-
-<style scoped lang="scss">
-   .hc-layout-box{
-    position: relative;
-    height: 100%;
-    width: 100%;
+const tabsChange = (item) => {
+    console.log(item)
 }
-.demo-tabs > .el-tabs__content {
-  padding: 32px;
-  color: #6b778c;
-  font-size: 32px;
-  font-weight: 600;
 
-}
-</style>
 
-<style>
-.ledger-page .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
-    width: 147px;
+//项目阶段
+const stateData = ref([{ value: '1', label: '新开工项目' }, { value: '2', label: '建成项目' }])
 
-    border-color: rgb(187, 187, 187);
-    border-width: 1px 0px 1px 1px;
-    border-style: solid;
-    font-size: 14px;
-    padding: 0px;
-    text-align: center;
-    line-height: 20px;
-    font-weight: bold;
-    background: rgb(32, 201, 139);
-    color:white;
-    font-size: larger;
-}
-.ledger-page .el-tabs--card>.el-tabs__header .el-tabs__nav{
-    border:none;
-}
-.ledger-page .el-tabs--card>.el-tabs__header .el-tabs__item{
-    width: 147px;
+//项目类型
+const typeData = ref([{ value: '1', label: '铁路' }, { value: '2', label: '高速公路' }])
 
-    border-color: rgb(187, 187, 187);
+//搜索条件
+const searchForm = ref({
+    startYear: '', endYear: '', queryValue: '', year: '',
+    current: 1, size: 20, total: 0,
+})
+const searchClick = () => {
 
-    border-style: solid;
-    font-size: 14px;
-    padding: 0px;
-    text-align: center;
-    line-height: 20px;
-    font-weight: bold;
-    background:#F9F9F9;
-    color:black;
-    font-size: larger;
 }
-.ledger-page .el-tabs--card>.el-tabs__header #tab-2{
-    border-radius: 0px 10px 0px 0px;
+
+//分页
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
 }
-.ledger-page .el-tabs--card>.el-tabs__header #tab-1{
-        border-radius: 10px 0px 0px;
+
+const tableRef = ref(null)
+
+//批量导出
+const deriveTableItem = () => {
+
 }
+</script>
+
+<style lang="scss">
+@import '~src/styles/project/ledger';
 </style>