1111

src/views/funding/budget.vue

@@ -1,28 +1,79 @@
 <template>
-    <hc-card title="资金预算计划">
+    <hc-card>
+        <template #header>
+            <div class="w-200px">
+                <el-select v-model="searchForm.key1" filterable clearable block placeholder="期名称">
+                    <el-option label="2023年资金预算" value="2023" />
+                    <el-option label="2024年资金预算" value="2024" />
+                    <el-option label="2025年资金预算" value="2025" />
+                </el-select>
+            </div>
+        </template>
         <template #extra>
-            <el-button hc-btn type="primary" @click="addRowClick">新增</el-button>
+            <span class="mr-20px text-12px" style="color: #FF7D43">*金额单位均为：万元</span>
+            <el-button v-if="isTableEdit" hc-btn type="warning" @click="tableEditSave">保存</el-button>
+            <el-button v-else hc-btn type="primary" @click="tableEditClick">编辑</el-button>
         </template>
         <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" :is-index="false">
-            <template #action="{ row }">
-                <el-link type="success" @click="editRowClick(row)">修改</el-link>
-                <el-link type="danger" @click="delRowClick(row)">删除</el-link>
+            <template #key6="{ row }">
+                <hc-table-input v-if="isTableEdit" v-model="row.key6" />
+                <span v-else>{{ row.key6 }}</span>
+            </template>
+            <template #key7="{ row }">
+                <hc-table-input v-if="isTableEdit" v-model="row.key7" />
+                <span v-else>{{ row.key7 }}</span>
+            </template>
+            <template #key8="{ row }">
+                <hc-table-input v-if="isTableEdit" v-model="row.key8" />
+                <span v-else>{{ row.key8 }}</span>
+            </template>
+            <template #key9="{ row }">
+                <hc-table-input v-if="isTableEdit" v-model="row.key9" disabled />
+                <span v-else>{{ row.key9 }}</span>
+            </template>
+            <template #key10="{ row }">
+                <hc-table-input v-if="isTableEdit" v-model="row.key10" />
+                <span v-else>{{ row.key10 }}</span>
+            </template>
+            <template #key11="{ row }">
+                <hc-table-input v-if="isTableEdit" v-model="row.key11" />
+                <span v-else>{{ row.key11 }}</span>
+            </template>
+            <template #key12="{ row }">
+                <hc-table-input v-if="isTableEdit" v-model="row.key12" />
+                <span v-else>{{ row.key12 }}</span>
+            </template>
+            <template #key13="{ row }">
+                <hc-table-input v-if="isTableEdit" v-model="row.key13" />
+                <span v-else>{{ row.key13 }}</span>
+            </template>
+            <template #key14="{ row }">
+                <hc-table-input v-if="isTableEdit" v-model="row.key14" />
+                <span v-else>{{ row.key14 }}</span>
+            </template>
+            <template #key15="{ row }">
+                <hc-table-input v-if="isTableEdit" v-model="row.key15" />
+                <span v-else>{{ row.key15 }}</span>
+            </template>
+            <template #key16="{ row }">
+                <hc-table-input v-if="isTableEdit" v-model="row.key16" />
+                <span v-else>{{ row.key16 }}</span>
+            </template>
+            <template #key17="{ row }">
+                <hc-table-input v-if="isTableEdit" v-model="row.key17" />
+                <span v-else>{{ row.key17 }}</span>
             </template>
         </hc-table>
         <template #action>
             <hc-pages :pages="searchForm" @change="pageChange" />
         </template>
-        <!-- 新增/修改 -->
-        <HcBudgetData v-model="isBudgetDataShow" :info="budgetRowData" @finish="getTableData" />
     </hc-card>
 </template>
 
 <script setup>
 import { onActivated, ref } from 'vue'
 import { useAppStore } from '~src/store'
-import { HcDelMsg } from 'hc-vue3-ui'
 import { getArrValue } from 'js-fast-way'
-import HcBudgetData from './modules/budget-data.vue'
 import mainApi from '~api/funding/budget'
 
 //获取全局变量
@@ -53,12 +104,26 @@ const pageChange = ({ current, size }) => {
 
 //表格数据
 const tableData = ref([
-    { key1:'2023-11', key2: '2024-04' },
+    { key1:'xxxx', key2: '路基工程', key3: '378920987.26', key4: '0', key5:'378920987.26' },
 ])
 const tableColumn = ref([
-    { key: 'key1', name: '开始时间' },
-    { key: 'key2', name: '结束时间' },
-    { key: 'action', name: '操作', width: 140, align: 'center' },
+    { key: 'key1', name: '清单编号', width: 120, align: 'center' },
+    { key: 'key2', name: '清单名称', width: 160, align: 'center' },
+    { key: 'key3', name: '合同金额', width: 140, align: 'center' },
+    { key: 'key4', name: '变更金额', width: 140, align: 'center' },
+    { key: 'key5', name: '变更后金额', width: 140, align: 'center' },
+    { key: 'key6', name: '1月', width: 140, align: 'center' },
+    { key: 'key7', name: '2月', width: 140, align: 'center' },
+    { key: 'key8', name: '3月', width: 140, align: 'center' },
+    { key: 'key9', name: '4月', width: 140, align: 'center' },
+    { key: 'key10', name: '5月', width: 140, align: 'center' },
+    { key: 'key11', name: '6月', width: 140, align: 'center' },
+    { key: 'key12', name: '7月', width: 140, align: 'center' },
+    { key: 'key13', name: '8月', width: 140, align: 'center' },
+    { key: 'key14', name: '9月', width: 140, align: 'center' },
+    { key: 'key15', name: '10月', width: 140, align: 'center' },
+    { key: 'key16', name: '11月', width: 140, align: 'center' },
+    { key: 'key17', name: '12月', width: 140, align: 'center' },
 ])
 
 //获取表格数据
@@ -74,30 +139,15 @@ const getTableData = async () => {
     searchForm.value.total = data['total'] || 0*/
 }
 
-//新增/修改弹窗
-const isBudgetDataShow = ref(false)
-const budgetRowData = ref({})
-
-//新增数据
-const addRowClick = () => {
-    budgetRowData.value = {}
-    isBudgetDataShow.value = true
-}
-
-//修改数据
-const editRowClick = (row) => {
-    budgetRowData.value = row
-    isBudgetDataShow.value = true
+//编辑模式
+const isTableEdit = ref(false)
+const tableEditClick = () => {
+    isTableEdit.value = true
 }
 
-//删除数据
-const delRowClick = (row) => {
-    HcDelMsg(async (resolve) => {
-        console.log('删除中...')
-        setTimeout(() => {
-            resolve() //关闭弹窗的回调
-        }, 3000)
-    })
+//保存
+const tableEditSave = () => {
+    isTableEdit.value = false
 }
 </script>