From 5e7a51cc7a5581068aac92c1e077f8426bd0fac8 Mon Sep 17 00:00:00 2001
From: zhc077 <565291854@qq.com>
Date: Tue, 29 Oct 2024 14:43:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E7=AE=97=E4=B9=A6-=E4=B8=93=E9=A1=B9?=
 =?UTF-8?q?=E7=BB=8F=E8=B4=B9=E9=A2=84=E7=AE=97=20=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=2010.29?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../JVxeTableDemo/func-demo/JSBCDemo.vue      |   2 +-
 .../yusuanshu/ProjectFeeBudgetDemo.vue        | 224 ++++++++++++++++++
 .../kejigongguan/yusuanshu/index.vue          |  11 +-
 3 files changed, 232 insertions(+), 5 deletions(-)
 create mode 100644 jeecgboot-vue3/src/views/projectApplication/kejigongguan/yusuanshu/ProjectFeeBudgetDemo.vue

diff --git a/jeecgboot-vue3/src/views/demo/jeecg/JVxeTableDemo/func-demo/JSBCDemo.vue b/jeecgboot-vue3/src/views/demo/jeecg/JVxeTableDemo/func-demo/JSBCDemo.vue
index b44d4ef..d762b98 100644
--- a/jeecgboot-vue3/src/views/demo/jeecg/JVxeTableDemo/func-demo/JSBCDemo.vue
+++ b/jeecgboot-vue3/src/views/demo/jeecg/JVxeTableDemo/func-demo/JSBCDemo.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-card title="即时保存示例" :bordered="false">
+  <a-card title="即时保存示例7777777" :bordered="false">
     <!--
       【即时保存大体思路】：
       1. JVxeTable 上必须加 keep-source 属性
diff --git a/jeecgboot-vue3/src/views/projectApplication/kejigongguan/yusuanshu/ProjectFeeBudgetDemo.vue b/jeecgboot-vue3/src/views/projectApplication/kejigongguan/yusuanshu/ProjectFeeBudgetDemo.vue
new file mode 100644
index 0000000..520af7a
--- /dev/null
+++ b/jeecgboot-vue3/src/views/projectApplication/kejigongguan/yusuanshu/ProjectFeeBudgetDemo.vue
@@ -0,0 +1,224 @@
+<template>
+  <a-card title="即时保存示例7777777" :bordered="false">
+    <!--
+      【即时保存大体思路】：
+      1. JVxeTable 上必须加 keep-source 属性
+      2. 监听 edit-closed事件，这个事件是在编辑完成后触发
+      3. 在这个事件里面判断数据是否更改，如果更改了就调用接口进行保存操作
+    -->
+    <JVxeTable
+      toolbar
+      :toolbarConfig="toolbarConfig"
+      rowNumber
+      rowSelection
+      keepSource
+      asyncRemove
+      :height="340"
+      :loading="loading"
+      :columns="columns"
+      :dataSource="dataSource"
+      :pagination="pagination"
+      @save="handleTableSave"
+      @removed="handleTableRemove"
+      @edit-closed="handleEditClosed"
+      @pageChange="handlePageChange"
+      @selectRowChange="handleSelectRowChange"
+    />
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+// 即时保存示例
+import { reactive, ref } from 'vue';
+import { defHttp } from '/@/utils/http/axios';
+import { JVxeColumn, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createMessage } = useMessage();
+// 工具栏的按钮配置
+const toolbarConfig = reactive({
+  // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
+  btn: ['add', 'save', 'remove', 'clearSelection'],
+});
+// 是否正在加载
+const loading = ref(false);
+// 分页器参数
+const pagination = reactive({
+  // 当前页码
+  current: 1,
+  // 每页的条数
+  pageSize: 200,
+  // 可切换的条数
+  pageSizeOptions: ['10', '20', '30', '100', '200'],
+  // 数据总数（目前并不知道真实的总数，所以先填写0，在后台查出来后再赋值）
+  total: 0,
+});
+// 选择的行
+const selectedRows = ref<Recordable[]>([]);
+// 数据源，控制表格的数据
+const dataSource = ref<Recordable[]>([]);
+// 列配置，控制表格显示的列
+const columns = ref<JVxeColumn[]>([
+  { key: 'num', title: '序号', width: 80, type: JVxeTypes.normal },
+  {
+    // 字段key，跟后台数据的字段名匹配
+    key: 'ship_name',
+    // 列的标题
+    title: '船名',
+    // 列的宽度
+    width: 180,
+    // 如果加上了该属性，就代表当前单元格是可编辑的，type就是表单的类型，input就是简单的输入框
+    type: JVxeTypes.input,
+  },
+  { key: 'call', title: '呼叫', width: 80, type: JVxeTypes.input },
+  { key: 'len', title: '长', width: 80, type: JVxeTypes.input },
+  { key: 'ton', title: '吨', width: 120, defaultValue: 233, type: JVxeTypes.input },
+  { key: 'payer', title: '付款方', width: 120, defaultValue: '张三', type: JVxeTypes.input },
+  { key: 'count', title: '数', width: 40, type: JVxeTypes.normal },
+  {
+    key: 'company',
+    title: '公司',
+    // 最小宽度，与宽度不同的是，这个不是固定的宽度，如果表格有多余的空间，会平均分配给设置了 minWidth 的列
+    // 如果要做占满表格的列可以这么写
+    minWidth: 180,
+    type: JVxeTypes.input,
+  },
+  { key: 'trend', title: '动向', width: 120, type: JVxeTypes.input },
+]);
+
+// 查询url地址
+enum Api {
+  getData = '/mock/vxe/getData',
+  // 模拟保存单行数据（即时保存）
+  saveRow = '/mock/vxe/immediateSaveRow',
+  // 模拟保存整个表格的数据
+  saveAll = '/mock/vxe/immediateSaveAll',
+}
+
+loadData();
+
+// 加载数据
+async function loadData() {
+  loading.value = true;
+  // 调用查询数据接口
+  await defHttp
+    .get({
+      // 请求地址
+      url: Api.getData,
+      // 封装查询条件
+      params: {
+        pageNo: pagination.current,
+        pageSize: pagination.pageSize,
+      },
+    })
+    .then((result) => {
+      // 后台查询回来的 total，数据总数量
+      pagination.total = result.total;
+      // 将查询的数据赋值给 dataSource
+      dataSource.value = result.records;
+      // 重置选择
+      selectedRows.value = [];
+    })
+    .finally(() => {
+      // 这里是无论成功或失败都会执行的方法，在这里关闭loading
+      loading.value = false;
+    });
+}
+
+// 【整体保存】点击保存按钮时触发的事件
+function handleTableSave({ $table, target }) {
+  // 校验整个表格
+  $table.validate().then((errMap) => {
+    // 校验通过
+    if (!errMap) {
+      // 获取所有数据
+      let tableData = target.getTableData();
+      console.log('当前保存的数据是：', tableData);
+      // 获取新增的数据
+      let newData = target.getNewData();
+      console.log('-- 新增的数据：', newData);
+      // 获取删除的数据
+      let deleteData = target.getDeleteData();
+      console.log('-- 删除的数据：', deleteData);
+      // 【模拟保存】
+      loading.value = true;
+      defHttp
+        .post({
+          url: Api.saveAll,
+          params: tableData,
+        })
+        .then(() => {
+          createMessage.success(`保存成功！`);
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    }
+  });
+}
+
+// 触发单元格删除事件
+function handleTableRemove(event) {
+  // 把 event.deleteRows 传给后台进行删除（注意：这里不会传递前端逻辑新增的数据，因为不需要请求后台删除）
+  console.log('待删除的数据: ', event.deleteRows);
+  // 也可以只传ID，因为可以根据ID删除
+  let deleteIds = event.deleteRows.map((row) => row.id);
+  console.log('待删除的数据ids: ', deleteIds);
+
+  // 模拟请求后台删除
+  loading.value = true;
+  window.setTimeout(() => {
+    loading.value = false;
+    createMessage.success('删除成功');
+    // 假设后台返回删除成功，必须要调用 confirmRemove() 方法，才会真正在表格里移除（会同时删除选中的逻辑新增的数据）
+    event.confirmRemove();
+  }, 1000);
+}
+
+// 单元格编辑完成之后触发的事件
+function handleEditClosed(event) {
+  let { $table, row, column } = event;
+  let field = column.property;
+  // 判断单元格值是否被修改
+  if ($table.isUpdateByRow(row, field)) {
+    // 校验当前行
+    $table.validate(row).then((errMap) => {
+      // 校验通过
+      if (!errMap) {
+        // 【模拟保存】
+        let hideLoading = createMessage.loading(`正在保存"${column.title}"`, 0);
+        console.log('即时保存数据：', row);
+        defHttp
+          .put({
+            url: Api.saveRow,
+            params: row,
+          })
+          .then((res) => {
+            createMessage.success(`"${column.title}"保存成功！`);
+            // 局部更新单元格为已保存状态
+            $table.reloadRow(row, null, field);
+          })
+          .finally(() => {
+            hideLoading();
+          });
+      }
+    });
+  }
+}
+
+// 当分页参数变化时触发的事件
+function handlePageChange(event) {
+  // 重新赋值
+  pagination.current = event.current;
+  pagination.pageSize = event.pageSize;
+  // 查询数据
+  loadData();
+}
+
+// 当选择的行变化时触发的事件
+function handleSelectRowChange(event) {
+  selectedRows.value = event.selectedRows;
+}
+</script>
+
+<style scoped></style>
diff --git a/jeecgboot-vue3/src/views/projectApplication/kejigongguan/yusuanshu/index.vue b/jeecgboot-vue3/src/views/projectApplication/kejigongguan/yusuanshu/index.vue
index ac8cbcd..e1c5e0e 100644
--- a/jeecgboot-vue3/src/views/projectApplication/kejigongguan/yusuanshu/index.vue
+++ b/jeecgboot-vue3/src/views/projectApplication/kejigongguan/yusuanshu/index.vue
@@ -6,13 +6,14 @@
         <a-tab-pane key="TianBaoShuMingDemo" tab="填报说明" force-render></a-tab-pane>
         <a-tab-pane key="ProjectBaseInfoDemo" tab="项目基本情况表"></a-tab-pane>
         <a-tab-pane key="DepartBaseInfoDemo" tab="部门基本情况表"></a-tab-pane>
-        <a-tab-pane key="ZhengWenDemo" tab="正文"></a-tab-pane>
-        <a-tab-pane key="XiangMuHeZuoKaiFaDemo" tab="项目合作开发情况"></a-tab-pane>
-        <a-tab-pane key="HeZuoDanWeiDemo" tab="合作单位"></a-tab-pane>
+        <a-tab-pane key="ProjectFeeBudgetDemo" tab="项目经费预算表"></a-tab-pane>
+<!--        <a-tab-pane key="ZhengWenDemo" tab="正文"></a-tab-pane>-->
+<!--        <a-tab-pane key="XiangMuHeZuoKaiFaDemo" tab="项目合作开发情况"></a-tab-pane>-->
+<!--        <a-tab-pane key="HeZuoDanWeiDemo" tab="合作单位"></a-tab-pane>-->
 <!--        <a-tab-pane key="ZhuYaoRenYuanDemo" tab="项目主要参加人员"></a-tab-pane>-->
 <!--        <a-tab-pane key="JeecgPdfView" tab="PDF预览"></a-tab-pane>-->
 <!--        <a-tab-pane key="XiangMuJiXiaoMuBiaoDemo" tab="项目绩效目标"></a-tab-pane>-->
-        <a-tab-pane key="YiJianDemo" tab="意见"></a-tab-pane>
+<!--        <a-tab-pane key="YiJianDemo" tab="意见"></a-tab-pane>-->
         <a-tab-pane key="FuJianDemo" tab="附件"></a-tab-pane>
       </a-tabs>
       <component :is="currentComponent"></component>
@@ -28,6 +29,7 @@
   import TianBaoShuMingDemo from './TianBaoShuMingDemo.vue';
   import ProjectBaseInfoDemo from './ProjectBaseInfoDemo.vue';
   import DepartBaseInfoDemo from './DepartBaseInfoDemo.vue';
+  import ProjectFeeBudgetDemo from './ProjectFeeBudgetDemo.vue';
   import XiangMuJiXiaoMuBiaoDemo from '../xiangmushu/XiangMuJiXiaoMuBiaoDemo.vue';
   import YiJianDemo from '../xiangmushu/YiJianDemo.vue';
   import HeZuoDanWeiDemo from '../xiangmushu/HeZuoDanWeiDemo.vue';
@@ -50,6 +52,7 @@
           FengMianDemo: FengMianDemo,
           ProjectBaseInfoDemo: ProjectBaseInfoDemo,
           DepartBaseInfoDemo: DepartBaseInfoDemo,
+          ProjectFeeBudgetDemo: ProjectFeeBudgetDemo,
           ZhengWenDemo: ZhengWenDemo,
           XiangMuHeZuoKaiFaDemo: XiangMuHeZuoKaiFaDemo,
           XiangMuJiXiaoMuBiaoDemo: XiangMuJiXiaoMuBiaoDemo,