|
|
@@ -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>
|
