更新年度经营预算

src/views/program/annual/form.vue

@@ -1,67 +1,15 @@
 <template>
-    <HcCard>
-        <template #header>
-            <div class="w-36">
-                <el-select v-model="searchForm.planType" block clearable placeholder="计划类型" size="large">
-                    <el-option v-for="item in planType" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-36 ml-2">
-                <el-select v-model="searchForm.department" block clearable placeholder="选择部门" size="large">
-                    <el-option v-for="item in department" :label="item.name" :value="item.key"/>
-                </el-select>
-            </div>
-            <div class="w-36 ml-4">
-                <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
-            </div>
-            <div class="mx-2">~</div>
-            <div class="w-36">
-                <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
-            </div>
-            <div class="w-40 ml-2">
-                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入计划名称" @keyup="keyUpEvent" size="large"/>
-            </div>
-            <div class="ml-4">
-                <el-button size="large" type="primary" @click="searchClick">
-                    <HcIcon name="search-2"/>
-                    <span>搜索</span>
-                </el-button>
-            </div>
-            <div class="ml-2">
-                <el-button size="large" @click="resetClick">
-                    <HcIcon name="close-circle"/>
-                    <span>重置</span>
-                </el-button>
-            </div>
-        </template>
-        <template #extra>
-            <el-button size="large" type="primary" hc-btn @click="addRowClick">
-                <HcIcon name="add"/>
-                <span>新增计划</span>
-            </el-button>
-        </template>
-
-        <HcTable :isIndex="false" :column="tableColumn" :datas="tableData" :loading="tableLoading">
-            <template #key1="{row}">
-                <span class="text-blue">{{row.key1}}</span>
-            </template>
-            <template #key4="{row}">
-                <span>{{row.key4}}条</span>
-            </template>
-            <template #key5="{row}">
-                <span>{{row.key5}}条</span>
-            </template>
-            <template #key6="{row}">
-                <span>{{row.key6}}条</span>
-            </template>
-            <template #action="{row,index}">
-                <el-button plain size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
-                <el-button plain size="small" type="danger">删除</el-button>
-            </template>
-        </HcTable>
-
+    <HcCard actionUi="text-center">
+        222
         <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
+            <el-button size="large" type="info" hc-btn @click="goBackClick">
+                <HcIcon name="arrow-go-back"/>
+                <span>取消并返回</span>
+            </el-button>
+            <el-button size="large" type="primary" hc-btn @click="saveClick">
+                <HcIcon name="check-double"/>
+                <span>提交保存</span>
+            </el-button>
         </template>
     </HcCard>
 </template>
@@ -72,51 +20,6 @@ import {useRouter} from 'vue-router'
 
 const router = useRouter()
 
-//计划类型
-const planType = ref([
-    {name: '临时计划', key: '1'},
-    {name: '月度计划', key: '2'},
-    {name: '年度计划', key: '3'},
-])
-
-//选择部门
-const department = ref([
-    {name: '研发部门', key: '1'},
-    {name: '业务部门', key: '2'},
-    {name: '人事部门', key: '3'},
-])
-
-//搜索表单
-const searchForm = ref({
-    planType: null, startTime: null, endTime: null, department: null, queryValue: '',
-    current: 1, size: 20, total: 0
-})
-
-//搜索框回车
-const keyUpEvent = (event) => {
-    if (event.key === "Enter") {
-        searchForm.value.current = 1;
-        getTableData()
-    }
-}
-
-//搜索
-const searchClick = () => {
-    searchForm.value.current = 1;
-    getTableData()
-}
-
-//重置搜索表单
-const resetClick = () => {
-    searchForm.value = {current: 1, size: 20, total: 0}
-}
-
-//分页被点击
-const pageChange = ({current, size}) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-    getTableData()
-}
 
 //获取数据
 const tableLoading = ref(false)
@@ -138,24 +41,14 @@ const tableData = ref([
     {id: 4, key: 'JH-01', key1: '2023年5月度计划', key2: '临时计划', key3: '2022-07-01~2027-04-12', key4: '36', key5: '30', key6: '6', key8: '张三'},
 ])
 
-const getTableData = () => {
 
+//返回
+const goBackClick = () => {
+    router.back()
 }
 
-//新增计划
-const addRowClick = () => {
-    router.push({
-        name: 'program-index-info'
-    })
-}
+//提交保存
+const saveClick = () => {
 
-//编辑预算
-const editRowClick = (row) => {
-    router.push({
-        name: 'program-index-info',
-        query: {
-            id: row.id
-        }
-    })
 }
 </script>

src/views/program/annual/view.vue

@@ -1,15 +1,44 @@
 <template>
     <HcCard>
         <template #header>
-            <span class="text-blue font-bold text-xl">2023年年度经营预算表</span>
+            <span class="text-blue font-bold text-lg">2023年年度经营预算表</span>
         </template>
         <template #extra>
-            <el-button size="large" type="info" hc-btn @click="goBackClick">
+            <el-button @click="goBackClick">
                 <HcIcon name="arrow-go-back"/>
                 <span>返回上一级</span>
             </el-button>
         </template>
-        2222
+        <div class="hc-program-annual-view-table">
+            <el-table :data="tableData" :header-cell-style="tableHeaderCellStyle" style="width: 100%; height: 100%;">
+                <el-table-column prop="key" label="经营分类" width="150" align="center">
+                    <template #default="{ row, $index }">
+                        <span class="title-span">{{row.key}}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="预算" align="center">
+                    <template v-for="item in tableColumn">
+                        <el-table-column :prop="item.key" :label="item.name" align="center">
+                            <template #default="{ row, $index }">
+                                <span class="num-span" v-if="$index !== 2" @click="numSpanClick(item.key, $index)">{{row[item.key]}}</span>
+                                <span class="total-span" v-else>{{row[item.key]}}</span>
+                            </template>
+                        </el-table-column>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <!--收入详情预览-->
+        <HcDialog bgColor="#ffffff" isToBody isTable :footer="false" :show="incomeModal" title="收入详情预览" widths="80%" @close="incomeCloseClick">
+            <HcTable :isIndex="false" :column="tableIncomeColumn" :datas="tableIncomeData"/>
+        </HcDialog>
+
+        <!--支出详情预览-->
+        <HcDialog bgColor="#ffffff" isToBody isTable :footer="false" :show="expendModal" title="支出详情预览" widths="62rem" @close="expendCloseClick">
+            <HcTable :isIndex="false" :column="tableExpendColumn" :datas="tableExpendData"/>
+        </HcDialog>
+
     </HcCard>
 </template>
 
@@ -22,23 +51,117 @@ const router = useRouter()
 //获取数据
 const tableLoading = ref(false)
 const tableColumn = [
-    {key: 'key1', name: '预算名称'},
-    {key: 'key2', name: '起止日期', width: '220', align: 'center'},
-    {key: 'key3', name: '总经营预算', width: '120', align: 'center'},
-    {key: 'key4', name: '年度合同额指标', width: '140', align: 'center'},
-    {key: 'key5', name: '年度利润指标', width: '120', align: 'center'},
-    {key: 'key6', name: '工资支出', width: '120', align: 'center'},
-    {key: 'key7', name: '其他管理支出', width: '120', align: 'center'},
-    {key: 'action', name: '操作', width: '130', align: 'center'},
+    {key: 'key1', name: '1月'},
+    {key: 'key2', name: '2月'},
+    {key: 'key3', name: '3月'},
+    {key: 'key4', name: '4月'},
+    {key: 'key5', name: '5月'},
+    {key: 'key6', name: '6月'},
+    {key: 'key7', name: '7月'},
+    {key: 'key8', name: '8月'},
+    {key: 'key9', name: '9月'},
+    {key: 'key10', name: '10月'},
+    {key: 'key11', name: '11月'},
+    {key: 'key12', name: '12月'}
 ]
 const tableData = ref([
-    {id: 1, key1: '2023年5月度计划', key2: '2022-07-01~2027-04-12', key3: '111',  key4: '36', key5: '30', key6: '6', key7: '张三'},
-    {id: 2, key1: '2023年5月度计划', key2: '2022-07-01~2027-04-12', key3: '111',  key4: '36', key5: '30', key6: '6', key7: '张三'},
-    {id: 3, key1: '2023年5月度计划', key2: '2022-07-01~2027-04-12', key3: '111',  key4: '36', key5: '30', key6: '6', key7: '张三'},
-    {id: 4, key1: '2023年5月度计划', key2: '2022-07-01~2027-04-12', key3: '111',  key4: '36', key5: '30', key6: '6', key7: '张三'},
+    {id: 1, key: '收入', key1: '10000', key2: '20000',  key3: '36', key4: '30', key5: '6'},
+    {id: 2, key: '支出', key1: '10000', key2: '20000',  key3: '36', key4: '30', key5: '6'},
+    {id: 3, key: '月总计', key1: '+10000', key2: '-20000',  key3: '+36', key4: '-30', key5: '-6'}
 ])
 
+//自定义表头样式
+const tableHeaderCellStyle = () => {
+    return {backgroundColor: 'rgba(64, 149, 229, 0.36)', color: '#101010'}
+}
+
+//名称被点击
+const numSpanClick = (key, index) => {
+    if (index === 0) {  //收入
+        incomeModal.value = true
+    } else if (index === 1) {   //支出
+        expendModal.value = true
+    }
+}
+
+//收入详情预览
+const incomeModal = ref(false)
+const incomeCloseClick = () => {
+    incomeModal.value = false
+}
+//收入详情表格
+const tableIncomeColumn = [
+    {key: 'key1', name: '项目名称'},
+    {key: 'key2', name: '收入类别',  align: 'center'},
+    {key: 'key3', name: '项目类别', align: 'center'},
+    {key: 'key4', name: '产品线', align: 'center'},
+    {key: 'key5', name: '预计签单时间', align: 'center'},
+    {key: 'key6', name: '预计新签合同额', align: 'center'},
+    {key: 'key7', name: '预计本年度回款总金额', align: 'center'},
+]
+const tableIncomeData = ref([
+    {id: 1, key1: 'xxxx'},
+    {id: 2, key1: 'xxxx'},
+    {id: 3, key1: 'xxxx'},
+    {id: 4, key1: 'xxxx'},
+])
+
+
+//支出详情预览
+const expendModal = ref(false)
+const expendCloseClick = () => {
+    expendModal.value = false
+}
+//支出详情表格
+const tableExpendColumn = [
+    {key: 'key1', name: '预算科目(一级)',  align: 'center'},
+    {key: 'key2', name: '二级科目',  align: 'center'},
+    {key: 'key3', name: '当月', align: 'center'},
+]
+const tableExpendData = ref([
+    {id: 1, key1: 'xxxx'},
+    {id: 2, key1: 'xxxx'},
+    {id: 3, key1: 'xxxx'},
+    {id: 4, key1: 'xxxx'},
+])
+
+
 const goBackClick = () => {
     router.back()
 }
 </script>
+
+<style lang="scss">
+.hc-program-annual-view-table {
+    position: relative;
+    height: 100%;
+    .el-table {
+        --el-table-border-color: #b7b7b7;
+        --el-table-row-hover-bg-color: inherit;
+        .el-table__header-wrapper {
+            height: 130px;
+        }
+        .el-table__body-wrapper .el-scrollbar .el-scrollbar__view,
+        .el-table__body-wrapper .el-table__body,
+        .el-table__header-wrapper .el-table__header {
+            height: 100%;
+        }
+    }
+    .title-span {
+        color: #101010;
+        font-size: 16px;
+        font-weight: bold;
+    }
+    .num-span {
+        color: #4980F8;
+        font-size: 16px;
+        font-weight: bold;
+        cursor: pointer;
+    }
+    .total-span {
+        color: #E99D42;
+        font-size: 16px;
+        font-weight: bold;
+    }
+}
+</style>