项目初始化

web-api/src/main/java/com/jeesite/modules/apps/Module/ChartConfig.java

@@ -0,0 +1,18 @@
+package com.jeesite.modules.apps.Module;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+@Data
+public class ChartConfig implements Serializable {
+
+    private Integer sort;
+    private String chartId;
+    private String oldChartId;
+    private String chartName;
+
+    private String chartCode;
+    private Integer oldSort;
+    private String color;
+}

web-api/src/main/java/com/jeesite/modules/apps/Module/ErpFlowParams.java

@@ -0,0 +1,15 @@
+package com.jeesite.modules.apps.Module;
+
+import lombok.Data;
+
+import java.io.Serializable;
+
+@Data
+public class ErpFlowParams implements Serializable {
+    private Integer pageNum;
+    private Integer pageSize;
+    private String accountId;
+    private String flowName;
+    private String flowType;
+    private String categoryId;
+}

web-api/src/main/java/com/jeesite/modules/apps/Module/PageResult.java

@@ -0,0 +1,23 @@
+package com.jeesite.modules.apps.Module;
+
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.List;
+
+@Data
+public class PageResult<T> implements Serializable {
+
+    private List<T> list; // 当前页数据
+    private Integer currentPage; // 当前页码
+    private Integer pageSize; // 每页条数
+    private Integer total; // 总记录数
+
+
+    public PageResult(List<T> list,Integer currentPage,Integer pageSize,Integer total){
+        this.list = list;
+        this.currentPage = currentPage;
+        this.pageSize = pageSize;
+        this.total = total;
+    }
+}

web-api/src/main/java/com/jeesite/modules/biz/web/MyChartInfoController.java

@@ -2,6 +2,7 @@ package com.jeesite.modules.biz.web;
 
 import java.util.List;
 
+import com.jeesite.modules.apps.Module.ChartConfig;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
 
@@ -154,4 +155,16 @@ public class MyChartInfoController extends BaseController {
     public List<MyChartInfo> listAll(MyChartInfo myChartInfo) {
         return myChartInfoService.findList(myChartInfo);
     }
+
+    /**
+     *
+     */
+    @RequestMapping(value = "setting")
+    @ResponseBody
+    public String setting(List<ChartConfig> configs) {
+        for (ChartConfig config : configs) {
+            System.out.println(config);
+        }
+        return renderResult(Global.TRUE, text("配置图表成功！"));
+    }
 }

web-api/src/main/java/com/jeesite/modules/erp/web/ErpTransactionFlowController.java

@@ -1,6 +1,10 @@
 package com.jeesite.modules.erp.web;
 
 import java.util.List;
+
+import com.jeesite.modules.apps.Module.ErpFlowParams;
+import com.jeesite.modules.apps.Module.PageResult;
+import com.jeesite.modules.utils.PageUtil;
 import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
 
@@ -26,6 +30,7 @@ import com.jeesite.modules.erp.service.ErpTransactionFlowService;
 
 /**
  * 收支流水 Controller
+ *
  * @author gaoxq
  * @version 2026-03-22
  */
@@ -33,114 +38,131 @@ import com.jeesite.modules.erp.service.ErpTransactionFlowService;
 @RequestMapping(value = "${adminPath}/erp/transactionFlow")
 public class ErpTransactionFlowController extends BaseController {
 
-	private final ErpTransactionFlowService erpTransactionFlowService;
+    private final ErpTransactionFlowService erpTransactionFlowService;
 
-	public ErpTransactionFlowController(ErpTransactionFlowService erpTransactionFlowService) {
-		this.erpTransactionFlowService = erpTransactionFlowService;
-	}
-	
-	/**
-	 * 获取数据
-	 */
-	@ModelAttribute
-	public ErpTransactionFlow get(String flowId, boolean isNewRecord) {
-		return erpTransactionFlowService.get(flowId, isNewRecord);
-	}
-	
-	/**
-	 * 查询列表
-	 */
-	@RequiresPermissions("erp:transactionFlow:view")
-	@RequestMapping(value = {"list", ""})
-	public String list(ErpTransactionFlow erpTransactionFlow, Model model) {
-		model.addAttribute("erpTransactionFlow", erpTransactionFlow);
-		return "modules/erp/erpTransactionFlowList";
-	}
-	
-	/**
-	 * 查询列表数据
-	 */
-	@RequiresPermissions("erp:transactionFlow:view")
-	@RequestMapping(value = "listData")
-	@ResponseBody
-	public Page<ErpTransactionFlow> listData(ErpTransactionFlow erpTransactionFlow, HttpServletRequest request, HttpServletResponse response) {
-		erpTransactionFlow.setPage(new Page<>(request, response));
-		Page<ErpTransactionFlow> page = erpTransactionFlowService.findPage(erpTransactionFlow);
-		return page;
-	}
+    public ErpTransactionFlowController(ErpTransactionFlowService erpTransactionFlowService) {
+        this.erpTransactionFlowService = erpTransactionFlowService;
+    }
 
-	/**
-	 * 查看编辑表单
-	 */
-	@RequiresPermissions("erp:transactionFlow:view")
-	@RequestMapping(value = "form")
-	public String form(ErpTransactionFlow erpTransactionFlow, Model model) {
-		model.addAttribute("erpTransactionFlow", erpTransactionFlow);
-		return "modules/erp/erpTransactionFlowForm";
-	}
+    /**
+     * 获取数据
+     */
+    @ModelAttribute
+    public ErpTransactionFlow get(String flowId, boolean isNewRecord) {
+        return erpTransactionFlowService.get(flowId, isNewRecord);
+    }
 
-	/**
-	 * 保存数据
-	 */
-	@RequiresPermissions("erp:transactionFlow:edit")
-	@PostMapping(value = "save")
-	@ResponseBody
-	public String save(@Validated ErpTransactionFlow erpTransactionFlow) {
-		erpTransactionFlowService.save(erpTransactionFlow);
-		return renderResult(Global.TRUE, text("保存流水成功！"));
-	}
+    /**
+     * 查询列表
+     */
+    @RequiresPermissions("erp:transactionFlow:view")
+    @RequestMapping(value = {"list", ""})
+    public String list(ErpTransactionFlow erpTransactionFlow, Model model) {
+        model.addAttribute("erpTransactionFlow", erpTransactionFlow);
+        return "modules/erp/erpTransactionFlowList";
+    }
 
-	/**
-	 * 导出数据
-	 */
-	@RequiresPermissions("erp:transactionFlow:view")
-	@RequestMapping(value = "exportData")
-	public void exportData(ErpTransactionFlow erpTransactionFlow, HttpServletResponse response) {
-		List<ErpTransactionFlow> list = erpTransactionFlowService.findList(erpTransactionFlow);
-		String fileName = "流水" + DateUtils.getDate("yyyyMMddHHmmss") + ".xlsx";
-		try(ExcelExport ee = new ExcelExport("流水", ErpTransactionFlow.class)){
-			ee.setDataList(list).write(response, fileName);
-		}
-	}
+    /**
+     * 查询列表数据
+     */
+    @RequiresPermissions("erp:transactionFlow:view")
+    @RequestMapping(value = "listData")
+    @ResponseBody
+    public Page<ErpTransactionFlow> listData(ErpTransactionFlow erpTransactionFlow, HttpServletRequest request, HttpServletResponse response) {
+        erpTransactionFlow.setPage(new Page<>(request, response));
+        Page<ErpTransactionFlow> page = erpTransactionFlowService.findPage(erpTransactionFlow);
+        return page;
+    }
 
-	/**
-	 * 下载模板
-	 */
-	@RequiresPermissions("erp:transactionFlow:view")
-	@RequestMapping(value = "importTemplate")
-	public void importTemplate(HttpServletResponse response) {
-		ErpTransactionFlow erpTransactionFlow = new ErpTransactionFlow();
-		List<ErpTransactionFlow> list = ListUtils.newArrayList(erpTransactionFlow);
-		String fileName = "流水模板.xlsx";
-		try(ExcelExport ee = new ExcelExport("流水", ErpTransactionFlow.class, Type.IMPORT)){
-			ee.setDataList(list).write(response, fileName);
-		}
-	}
+    /**
+     * 查看编辑表单
+     */
+    @RequiresPermissions("erp:transactionFlow:view")
+    @RequestMapping(value = "form")
+    public String form(ErpTransactionFlow erpTransactionFlow, Model model) {
+        model.addAttribute("erpTransactionFlow", erpTransactionFlow);
+        return "modules/erp/erpTransactionFlowForm";
+    }
 
-	/**
-	 * 导入数据
-	 */
-	@ResponseBody
-	@RequiresPermissions("erp:transactionFlow:edit")
-	@PostMapping(value = "importData")
-	public String importData(MultipartFile file) {
-		try {
-			String message = erpTransactionFlowService.importData(file);
-			return renderResult(Global.TRUE, "posfull:"+message);
-		} catch (Exception ex) {
-			return renderResult(Global.FALSE, "posfull:"+ex.getMessage());
-		}
-	}
-	
-	/**
-	 * 删除数据
-	 */
-	@RequiresPermissions("erp:transactionFlow:edit")
-	@RequestMapping(value = "delete")
-	@ResponseBody
-	public String delete(ErpTransactionFlow erpTransactionFlow) {
-		erpTransactionFlowService.delete(erpTransactionFlow);
-		return renderResult(Global.TRUE, text("删除流水成功！"));
-	}
-	
+    /**
+     * 保存数据
+     */
+    @RequiresPermissions("erp:transactionFlow:edit")
+    @PostMapping(value = "save")
+    @ResponseBody
+    public String save(@Validated ErpTransactionFlow erpTransactionFlow) {
+        erpTransactionFlowService.save(erpTransactionFlow);
+        return renderResult(Global.TRUE, text("保存流水成功！"));
+    }
+
+    /**
+     * 导出数据
+     */
+    @RequiresPermissions("erp:transactionFlow:view")
+    @RequestMapping(value = "exportData")
+    public void exportData(ErpTransactionFlow erpTransactionFlow, HttpServletResponse response) {
+        List<ErpTransactionFlow> list = erpTransactionFlowService.findList(erpTransactionFlow);
+        String fileName = "流水" + DateUtils.getDate("yyyyMMddHHmmss") + ".xlsx";
+        try (ExcelExport ee = new ExcelExport("流水", ErpTransactionFlow.class)) {
+            ee.setDataList(list).write(response, fileName);
+        }
+    }
+
+    /**
+     * 下载模板
+     */
+    @RequiresPermissions("erp:transactionFlow:view")
+    @RequestMapping(value = "importTemplate")
+    public void importTemplate(HttpServletResponse response) {
+        ErpTransactionFlow erpTransactionFlow = new ErpTransactionFlow();
+        List<ErpTransactionFlow> list = ListUtils.newArrayList(erpTransactionFlow);
+        String fileName = "流水模板.xlsx";
+        try (ExcelExport ee = new ExcelExport("流水", ErpTransactionFlow.class, Type.IMPORT)) {
+            ee.setDataList(list).write(response, fileName);
+        }
+    }
+
+    /**
+     * 导入数据
+     */
+    @ResponseBody
+    @RequiresPermissions("erp:transactionFlow:edit")
+    @PostMapping(value = "importData")
+    public String importData(MultipartFile file) {
+        try {
+            String message = erpTransactionFlowService.importData(file);
+            return renderResult(Global.TRUE, "posfull:" + message);
+        } catch (Exception ex) {
+            return renderResult(Global.FALSE, "posfull:" + ex.getMessage());
+        }
+    }
+
+    /**
+     * 删除数据
+     */
+    @RequiresPermissions("erp:transactionFlow:edit")
+    @RequestMapping(value = "delete")
+    @ResponseBody
+    public String delete(ErpTransactionFlow erpTransactionFlow) {
+        erpTransactionFlowService.delete(erpTransactionFlow);
+        return renderResult(Global.TRUE, text("删除流水成功！"));
+    }
+
+    @RequestMapping(value = "FlowList")
+    @ResponseBody
+    public PageResult<ErpTransactionFlow> getFlowList(ErpFlowParams erpFlowParams) {
+        ErpTransactionFlow erpTransactionFlow = new ErpTransactionFlow();
+        erpTransactionFlow.setFlowType(erpFlowParams.getFlowType());
+        erpTransactionFlow.setFlowName(erpFlowParams.getFlowName());
+        erpTransactionFlow.setAccountId(erpFlowParams.getAccountId());
+        erpTransactionFlow.setCategoryId(erpFlowParams.getCategoryId());
+        List<ErpTransactionFlow> list = erpTransactionFlowService.findList(erpTransactionFlow);
+        PageUtil<ErpTransactionFlow> util = new PageUtil<>(erpFlowParams.getPageNum(), erpFlowParams.getPageSize(), list);
+        return new PageResult<>(
+                util.OkData(),
+                util.getCurPage(),
+                util.getPageSize(),
+                util.getTotalCount()
+        );
+    }
 }

web-api/src/main/java/com/jeesite/modules/utils/PageUtil.java

@@ -0,0 +1,44 @@
+package com.jeesite.modules.utils;
+
+
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.List;
+
+@Data
+public class PageUtil<T> implements Serializable {
+
+
+    private List<T> data;
+    private Integer curPage;// 当前页
+    private int totalCount;// 总条数
+    private int pageSize; // 每页显示的条数
+
+    //构造数据
+    public PageUtil(int curPage, int pageSize, List<T> data) {
+        this.data = data;
+        this.curPage = curPage;
+        this.pageSize = pageSize;
+        this.totalCount = data.size();
+    }
+
+    public int beginIndex(int pageSize, int curPage) {
+        return pageSize * (curPage - 1);
+    }
+
+    public int endIndex(int pageSize, int curPage) {
+        return (pageSize * curPage) - 1;
+    }
+
+    public List<T> OkData() {
+        List<T> list = new ArrayList<T>();
+        for (int i = beginIndex(pageSize, curPage); i <= endIndex(pageSize, curPage); i++) {
+            if (i < totalCount) {
+                list.add(data.get(i));
+            }
+        }
+        return list;
+    }
+}

web-vue/packages/biz/api/biz/myChartInfo.ts

@@ -43,6 +43,9 @@ export const myChartInfoForm = (params?: MyChartInfo | any) =>
 export const myChartInfoSave = (params?: any, data?: MyChartInfo | any) =>
   defHttp.postJson<MyChartInfo>({ url: adminPath + '/biz/myChartInfo/save', params, data });
 
+export const myChartSetting = (params?: any, data?: MyChartInfo | any) =>
+  defHttp.postJson<MyChartInfo>({ url: adminPath + '/biz/myChartInfo/setting', params, data });
+
 export const myChartInfoImportData = (
   params: UploadFileParams,
   onUploadProgress: (progressEvent: AxiosProgressEvent) => void,

web-vue/packages/core/layouts/screen/welcome/Erp/components/detail/indexV01.vue

@@ -9,43 +9,38 @@
       <el-form :model="searchForm" class="search-form">
         <div class="form-items-wrapper">
           <el-form-item label="交易名称：" class="form-item">
-            <el-input
-              v-model="searchForm.flowName"
-              placeholder="请输入交易名称"
-              clearable
-            />
+            <el-input v-model="searchForm.flowName" placeholder="请输入交易名称" clearable />
+          </el-form-item>
+          <el-form-item label="交易类型：" class="form-item">
+            <el-select
+              v-model="searchForm.flowType"
+              placeholder="请选择交易类型"
+              clearable
+              class="custom-select"
+              popper-class="theme-select-popper"
+              :popper-append-to-body="true"
+              @change="getTranTypes"
+            >
+              <el-option label="收入" value="2" />
+              <el-option label="支出" value="1" />
+              <el-option label="转账" value="0" />
+            </el-select>
           </el-form-item>
-		  <el-form-item label="交易类型：" class="form-item">
-		    <el-select
-		      v-model="searchForm.transactionType"
-		      placeholder="请选择交易类型"
-		      clearable
-		      class="custom-select"
-		      teleport="body"
-		      popper-class="theme-select-popper"
-		      :popper-append-to-body="true"
-			   @change="getTranTypes"
-		    >
-		      <el-option label="收入" value="2" />
-		      <el-option label="支出" value="1" />
-		    </el-select>
-		  </el-form-item>
           <el-form-item label="交易分类：" class="form-item">
             <el-select
               v-model="searchForm.categoryId"
               placeholder="请选择交易分类"
               clearable
               class="custom-select"
-              teleport="body"
               popper-class="theme-select-popper"
               :popper-append-to-body="true"
             >
               <el-option
-				  v-for="item in tranTypes" 
-				  :key="item.categoryId" 
-				  :label="item.categoryName" 
-				  :value="item.categoryId" 
-				/>
+                v-for="item in tranTypes"
+                :key="item.categoryId"
+                :label="item.categoryName"
+                :value="item.categoryId"
+              />
             </el-select>
           </el-form-item>
         </div>
@@ -66,40 +61,44 @@
           empty-text="暂无相关交易数据"
           class="data-table"
           :header-row-style="{ background: 'transparent' }"
-          :header-cell-style="{ 
+          :header-cell-style="{
             background: 'transparent',
             color: '#a0cfff',
             border: 'none',
-            borderBottom: '1px solid rgba(64, 158, 255, 0.3)'
+            borderBottom: '1px solid rgba(64, 158, 255, 0.3)',
           }"
-          :row-style="{ 
+          :row-style="{
             background: 'transparent',
             color: '#a0cfff',
-            border: 'none'
-          }"
-          :cell-style="{ 
             border: 'none',
-            borderBottom: '1px solid rgba(64, 158, 255, 0.2)'
+          }"
+          :cell-style="{
+            border: 'none',
+            borderBottom: '1px solid rgba(64, 158, 255, 0.2)',
           }"
         >
-          <el-table-column prop="flowId" label="交易编号" />
+          <el-table-column prop="yearDate" label="年份" width="60" />
+          <el-table-column prop="monthDate" label="月份" width="60" />
           <el-table-column prop="flowName" label="交易名称" />
+          <el-table-column prop="parentName" label="父级分类" />
           <el-table-column prop="categoryName" label="交易分类" />
-          <el-table-column prop="tranType" label="交易类型" />
-          <el-table-column prop="amount" label="交易金额">
+          <el-table-column prop="flowType" label="交易类型" width="120">
             <template #default="scope">
-              ¥{{ scope.row.amount }}
+              {{ getFlowTypeLabel(scope.row.flowType) }}
             </template>
           </el-table-column>
-		  <el-table-column prop="remark" label="交易备注" />
-          <el-table-column prop="transactionTime" label="交易时间" />
+          <el-table-column prop="amount" label="交易金额">
+            <template #default="scope"> ¥ {{ scope.row.amount }} </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="交易备注" />
+          <el-table-column prop="tradeTime" label="交易时间" width="180" />
         </el-table>
       </div>
       <div class="pagination-wrapper">
         <el-pagination
           v-model:current-page="currentPage"
           v-model:page-size="pageSize"
-          :page-sizes="[20,50,99]"
+          :page-sizes="[20, 50, 99]"
           :total="total"
           layout="total, sizes, prev, pager, next, jumper"
           @size-change="handleSizeChange"
@@ -114,437 +113,460 @@
   </div>
 </template>
 
-<script setup>
-import { defineProps, defineEmits, ref, onMounted, reactive } from 'vue'
-import { ElMessage } from 'element-plus'
-// import { getErpCategoryList, getErpTransactionFlowList } from '@/api/bizApi'
+<script lang="ts" setup>
+  import { defineProps, defineEmits, ref, onMounted, reactive } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { ErpCategory, erpCategoryListAll } from '@jeesite/erp/api/erp/category';
+  import { ErpTransactionFlow, erpTransactionPageFlowList } from '@jeesite/erp/api/erp/transactionFlow';
 
-const props = defineProps({
-  accountData: {
-    type: Object,
-    default: () => ({})
-  }
-})
+  const props = defineProps({
+    accountData: {
+      type: Object,
+      default: () => ({}),
+    },
+  });
 
-const emit = defineEmits(['close'])
-const handleClose = () => emit('close')
+  const emit = defineEmits(['close']);
+  const handleClose = () => emit('close');
 
-const tranTypes = ref();
-const loading = ref(false);
+  const flowTypeDict: Record<string, string> = {
+    '0': '转账',
+    '1': '支出',
+    '2': '收入',
+  };
 
-const searchForm = reactive({
-  flowName: '',
-  transactionType: '',
-  categoryId: '',
-})
+  const getFlowTypeLabel = (flowType?: string | number) => {
+    return flowTypeDict[String(flowType ?? '')] || '-';
+  };
 
-const tableData = ref([]);
-const currentPage = ref(1);
-const pageSize = ref(20);
-const total = ref(0);
+  const tranTypes = ref();
+  const loading = ref(false);
 
-const handleSearch = () => {
-	getList();
-}
-
-const handleReset = () => {
-  Object.assign(searchForm, { 
-    flowName: '', 
-    transactionType: '', 
+  const searchForm = reactive({
+    flowName: '',
+    flowType: '',
     categoryId: '',
-  })
-  currentPage.value = 1;
-  getList();
-}
+  });
 
-const handleSizeChange = (val) => {
-  pageSize.value = val;
-  getList();
-}
-const handleCurrentChange = (val) => {
-  currentPage.value = val;
-  getList();
-}
+  const tableData = ref<ErpTransactionFlow[]>();
+  const currentPage = ref(1);
+  const pageSize = ref(20);
+  const total = ref(0);
 
-async function getTranTypes(){
-	try {
-	 const params = {
-		 categoryType: searchForm.transactionType,
-	 }
-	  const res = await getErpCategoryList(params);
-	  tranTypes.value = res || [];
-	} catch (error) {
-	  console.error('获取数据失败:', error);
-		tranTypes.value = [];
-	}
-}
+  const handleSearch = () => {
+    getList();
+  };
 
-async function getList() {
-  loading.value = true;
-  try {
-	  const reqParmas = {
-		  ... searchForm,
-		  pageNum: currentPage.value, 
-		  pageSize: pageSize.value,
-		  accountId: props.accountData.rawData?.accountId || '',
-	  }
-	  const res = await getErpTransactionFlowList(reqParmas);
-	  total.value = res.total;
-	  tableData.value = res.list || [];
-  } catch (error) {
-    console.error('获取数据失败:', error);
-	tableData.value = [];
-  } finally {
-    loading.value = false;
+  const handleReset = () => {
+    Object.assign(searchForm, {
+      flowName: '',
+      flowType: '',
+      categoryId: '',
+    });
+    currentPage.value = 1;
+    getList();
+  };
+
+  const handleSizeChange = (val: number) => {
+    pageSize.value = val;
+    getList();
+  };
+  const handleCurrentChange = (val: number) => {
+    currentPage.value = val;
+    getList();
+  };
+
+  async function getTranTypes() {
+    try {
+      const params = {
+        categoryType: searchForm.flowType,
+      };
+      const res = await erpCategoryListAll(params);
+      tranTypes.value = res || [];
+    } catch (error) {
+      console.error('获取数据失败:', error);
+      tranTypes.value = [];
+    }
   }
-}
 
-onMounted(async () => {
-  await getList();
-  await getTranTypes();
-})
+  async function getList() {
+    loading.value = true;
+    try {
+      const reqParmas = {
+        ...searchForm,
+        pageNum: currentPage.value,
+        pageSize: pageSize.value,
+        accountId: props.accountData.rawData?.accountId || '',
+      };
+      const res = await erpTransactionPageFlowList(reqParmas);
+      total.value = res.total;
+      tableData.value = res.list || [];
+    } catch (error) {
+      console.error('获取数据失败:', error);
+      tableData.value = [];
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  onMounted(async () => {
+    await getList();
+    await getTranTypes();
+  });
 </script>
 
 <style scoped>
-.detail-container {
-  width: 100%;
-  height: 100%;
-  padding: 12px;
-  color: #e0e6ff;
-  background: url('@jeesite/assets/chart/box/18.png') no-repeat center center;
-  background-size: 100% 100%;
-  background-color: transparent !important;
-  border: none !important;
-  box-sizing: border-box;
-  position: relative;
-  z-index: 10001;
-}
-
-.detail-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-.detail-header h3 {
-  margin: 0;
-  color: #409EFF;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-  font-size: 18px;
-}
-.close-btn {
-  background: transparent;
-  border: none;
-  font-size: 24px;
-  color: #e0e6ff;
-  cursor: pointer;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: color 0.2s;
-  z-index: 10002;
-}
-.close-btn:hover {
-  color: #409EFF;
-}
-
-.split-line {
-  height: 1px;
-  background-color: #409EFF;
-  opacity: 0.6;
-  margin-bottom: 16px;
-}
-
-.detail-body {
-  width: 100%;
-  height: calc(100% - 80px);
-  border: 1px solid #409EFF;
-  border-radius: 6px;
-  padding: 16px;
-  background-color: rgba(10, 30, 60, 0.2);
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  overflow: visible;
-  position: relative;
-  z-index: 10001;
-}
-
-.search-form {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding-bottom: 16px;
-  border-bottom: 1px solid rgba(64, 158, 255, 0.3);
-  flex-wrap: wrap;
-  position: relative;
-  z-index: 10001;
-}
-.form-items-wrapper {
-  display: flex;
-  flex: 1;
-  gap: 20px;
-  min-width: 0;
-  flex-wrap: wrap;
-}
-.form-item {
-  flex: 1;
-  margin-bottom: 0 !important;
-  min-width: 180px;
-}
-.date-range-item {
-  min-width: 280px !important;
-}
-.form-btn-group {
-  margin-left: 20px;
-  margin-bottom: 0 !important;
-  flex-shrink: 0;
-  display: flex;
-  gap: 10px;
-}
-
-.table-container {
-  flex: 1;
-  width: 100%;
-  overflow: auto;
-  position: relative;
-  z-index: 10001;
-}
-
-.custom-loading {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.1) !important; 
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  z-index: 999;
-}
-
-.loading-icon {
-  font-size: 24px;
-  color: #409EFF;
-  animation: loading-rotate 2s linear infinite;
-  margin-bottom: 8px;
-}
-
-.loading-text {
-  font-size: 14px;
-  color: #b4c7e7;
-}
-
-@keyframes loading-rotate {
-  0% {
-    transform: rotate(0deg);
+  .detail-container {
+    width: 100%;
+    height: 100%;
+    padding: 12px;
+    color: #e0e6ff;
+    background: url('@jeesite/assets/chart/box/18.png') no-repeat center center;
+    background-size: 100% 100%;
+    background-color: rgba(18, 52, 92, 0.28) !important;
+    border: none !important;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 10001;
+    backdrop-filter: blur(6px);
   }
-  100% {
-    transform: rotate(360deg);
+
+  .detail-container::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgba(48, 112, 196, 0.12), rgba(14, 42, 78, 0.24));
+    pointer-events: none;
+    z-index: 0;
   }
-}
 
-.data-table {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  z-index: 1;
-}
+  .detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    position: relative;
+    z-index: 1;
+  }
+  .detail-header h3 {
+    margin: 0;
+    color: #409eff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    font-size: 18px;
+  }
+  .close-btn {
+    background: transparent;
+    border: none;
+    font-size: 24px;
+    color: #e0e6ff;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s;
+    z-index: 10002;
+  }
+  .close-btn:hover {
+    color: #409eff;
+  }
 
-.pagination-wrapper {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding-top: 10px;
-  border-top: 1px solid rgba(64, 158, 255, 0.2);
-  background-color: rgba(10, 30, 60, 0.2);
-  flex-shrink: 0;
-  position: relative;
-  z-index: 10001;
-}
+  .split-line {
+    height: 1px;
+    background-color: #409eff;
+    opacity: 0.6;
+    margin-bottom: 16px;
+  }
 
-:deep(.el-form-item__label) {
-  color: #e0e6ff !important;
-  font-size: 14px;
-}
-:deep(.el-input__wrapper),
-:deep(.el-select__wrapper),
-:deep(.el-date-editor__wrapper) {
-  background-color: rgba(0, 0, 0, 0.2) !important;
-  border: 1px solid #409EFF !important;
-  box-shadow: none !important;
-  width: 100% !important;
-  position: relative;
-  z-index: 10001;
-}
-:deep(.el-input__inner),
-:deep(.el-select__inner),
-:deep(.el-date-editor input) {
-  color: #e0e6ff !important;
-  background-color: transparent !important;
-}
-:deep(.el-input__placeholder),
-:deep(.el-date-editor__placeholder) {
-  color: rgba(224, 230, 255, 0.6) !important;
-}
+  .detail-body {
+    width: 100%;
+    height: calc(100% - 80px);
+    border: 1px solid #409eff;
+    border-radius: 6px;
+    padding: 16px;
+    background-color: rgba(36, 88, 156, 0.16);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+  }
 
-:deep(.custom-pagination) {
-  --el-pagination-text-color: #e0e6ff;
-  --el-pagination-button-color: #e0e6ff;
-  --el-pagination-button-hover-color: #409EFF;
-  --el-pagination-button-active-color: #409EFF;
-  --el-pagination-border-color: #409EFF;
-  --el-pagination-bg-color: rgba(10, 30, 60, 0.2) !important;
-  z-index: 10001;
-}
-:deep(.el-pagination button) {
-  background-color: rgba(0, 0, 0, 0.2) !important;
-  border-color: #409EFF !important;
-  color: #e0e6ff !important;
-}
-:deep(.el-pagination .el-pager li) {
-  color: #e0e6ff !important;
-}
-:deep(.el-pagination .el-pager li.active) {
-  color: #409EFF !important;
-  font-weight: bold;
-}
+  .search-form {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-bottom: 16px;
+    border-bottom: 1px solid rgba(64, 158, 255, 0.3);
+    flex-wrap: wrap;
+    position: relative;
+    z-index: 10001;
+  }
+  .form-items-wrapper {
+    display: flex;
+    flex: 1;
+    gap: 20px;
+    min-width: 0;
+    flex-wrap: wrap;
+  }
+  .form-item {
+    flex: 1;
+    margin-bottom: 0 !important;
+    min-width: 180px;
+  }
+  .date-range-item {
+    min-width: 280px !important;
+  }
+  .form-btn-group {
+    margin-left: 20px;
+    margin-bottom: 0 !important;
+    flex-shrink: 0;
+    display: flex;
+    gap: 10px;
+  }
 
-:deep(.el-table) {
-  --el-table-text-color: #a0cfff;
-  --el-table-header-text-color: #a0cfff;
-  --el-table-row-hover-bg-color: rgba(64, 158, 255, 0.2);
-  --el-table-border-color: transparent !important;
-  --el-table-stripe-row-bg-color: rgba(10, 30, 60, 0.3);
-  background-color: transparent !important;
-  border: none !important;
-  z-index: 10001;
-}
-:deep(.el-table th) {
-  border: none !important;
-  border-bottom: 1px solid rgba(64, 158, 255, 0.3) !important;
-  background-color: transparent !important;
-  color: #a0cfff !important;
-}
-:deep(.el-table td) {
-  border: none !important;
-  border-bottom: 1px solid rgba(64, 158, 255, 0.2) !important;
-  background-color: transparent !important;
-  color: #a0cfff !important;
-}
-:deep(.el-table--striped .el-table__row--striped td) {
-  background-color: rgba(10, 30, 60, 0.3) !important;
-  border-bottom-color: rgba(64, 158, 255, 0.2) !important;
-}
-:deep(.el-table__row:hover > td) {
-  background-color: rgba(64, 158, 255, 0.2) !important;
-  border-bottom-color: rgba(64, 158, 255, 0.3) !important;
-}
-:deep(.el-table tr:last-child td) {
-  border-bottom: none !important;
-}
-:deep(.el-table-empty-text) {
-  color: #a0cfff !important;
-  background-color: transparent !important;
-}
+  .table-container {
+    flex: 1;
+    width: 100%;
+    overflow: auto;
+    position: relative;
+    z-index: 10001;
+  }
 
-:deep(.el-button) {
-  --el-button-text-color: #e0e6ff !important;
-  --el-button-border-color: #409EFF !important;
-  --el-button-hover-text-color: #fff !important;
-  --el-button-hover-border-color: #409EFF !important;
-  --el-button-hover-bg-color: rgba(64, 158, 255, 0.2) !important;
-  height: 32px;
-  padding: 0 16px;
-  z-index: 10001;
-}
-:deep(.el-button--primary) {
-  --el-button-text-color: #fff !important;
-  --el-button-bg-color: rgba(64, 158, 255, 0.8) !important;
-  --el-button-border-color: #409EFF !important;
-  --el-button-hover-bg-color: #409EFF !important;
-}
-:deep(.reset-btn) {
-  background-color: rgba(0, 0, 0, 0.2) !important;
-  border-color: #409EFF !important;
-  color: #e0e6ff !important;
-}
-:deep(.reset-btn:hover) {
-  background-color: rgba(64, 158, 255, 0.2) !important;
-  color: #fff !important;
-}
+  .custom-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.1) !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+  }
 
-:deep(.el-loading-mask) {
-  display: none !important;
-}
+  .loading-icon {
+    font-size: 24px;
+    color: #409eff;
+    animation: loading-rotate 2s linear infinite;
+    margin-bottom: 8px;
+  }
 
-.detail-body::-webkit-scrollbar,
-:deep(.el-table__body-wrapper)::-webkit-scrollbar,
-.table-container::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-.detail-body::-webkit-scrollbar-track,
-.table-container::-webkit-scrollbar-track {
-  background: rgba(10, 30, 60, 0.1);
-  border-radius: 3px;
-}
-.detail-body::-webkit-scrollbar-thumb,
-.table-container::-webkit-scrollbar-thumb {
-  background: rgba(64, 158, 255, 0.5);
-  border-radius: 3px;
-}
+  .loading-text {
+    font-size: 14px;
+    color: #b4c7e7;
+  }
+
+  @keyframes loading-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .data-table {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+  }
+
+  .pagination-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: 10px;
+    border-top: 1px solid rgba(64, 158, 255, 0.2);
+    background-color: rgba(10, 30, 60, 0.2);
+    flex-shrink: 0;
+    position: relative;
+    z-index: 10001;
+  }
+
+  :deep(.el-form-item__label) {
+    color: #e0e6ff !important;
+    font-size: 14px;
+  }
+  :deep(.el-input__wrapper),
+  :deep(.el-select__wrapper),
+  :deep(.el-date-editor__wrapper) {
+    background-color: rgba(0, 0, 0, 0.2) !important;
+    border: 1px solid #409eff !important;
+    box-shadow: none !important;
+    width: 100% !important;
+    position: relative;
+    z-index: 10001;
+  }
+  :deep(.el-input__inner),
+  :deep(.el-select__inner),
+  :deep(.el-date-editor input) {
+    color: #e0e6ff !important;
+    background-color: transparent !important;
+  }
+  :deep(.el-input__placeholder),
+  :deep(.el-date-editor__placeholder) {
+    color: rgba(224, 230, 255, 0.6) !important;
+  }
+
+  :deep(.custom-pagination) {
+    --el-pagination-text-color: #e0e6ff;
+    --el-pagination-button-color: #e0e6ff;
+    --el-pagination-button-hover-color: #409eff;
+    --el-pagination-button-active-color: #409eff;
+    --el-pagination-border-color: #409eff;
+    --el-pagination-bg-color: rgba(10, 30, 60, 0.2) !important;
+    z-index: 10001;
+  }
+  :deep(.el-pagination button) {
+    background-color: rgba(0, 0, 0, 0.2) !important;
+    border-color: #409eff !important;
+    color: #e0e6ff !important;
+  }
+  :deep(.el-pagination .el-pager li) {
+    color: #e0e6ff !important;
+  }
+  :deep(.el-pagination .el-pager li.active) {
+    color: #409eff !important;
+    font-weight: bold;
+  }
+
+  :deep(.el-table) {
+    --el-table-text-color: #a0cfff;
+    --el-table-header-text-color: #a0cfff;
+    --el-table-row-hover-bg-color: rgba(64, 158, 255, 0.2);
+    --el-table-border-color: transparent !important;
+    --el-table-stripe-row-bg-color: rgba(10, 30, 60, 0.3);
+    background-color: transparent !important;
+    border: none !important;
+    z-index: 10001;
+  }
+  :deep(.el-table th) {
+    border: none !important;
+    border-bottom: 1px solid rgba(64, 158, 255, 0.3) !important;
+    background-color: transparent !important;
+    color: #a0cfff !important;
+  }
+  :deep(.el-table td) {
+    border: none !important;
+    border-bottom: 1px solid rgba(64, 158, 255, 0.2) !important;
+    background-color: transparent !important;
+    color: #a0cfff !important;
+  }
+  :deep(.el-table--striped .el-table__row--striped td) {
+    background-color: rgba(10, 30, 60, 0.3) !important;
+    border-bottom-color: rgba(64, 158, 255, 0.2) !important;
+  }
+  :deep(.el-table__row:hover > td) {
+    background-color: rgba(64, 158, 255, 0.2) !important;
+    border-bottom-color: rgba(64, 158, 255, 0.3) !important;
+  }
+  :deep(.el-table tr:last-child td) {
+    border-bottom: none !important;
+  }
+  :deep(.el-table-empty-text) {
+    color: #a0cfff !important;
+    background-color: transparent !important;
+  }
+
+  :deep(.el-button) {
+    --el-button-text-color: #e0e6ff !important;
+    --el-button-border-color: #409eff !important;
+    --el-button-hover-text-color: #fff !important;
+    --el-button-hover-border-color: #409eff !important;
+    --el-button-hover-bg-color: rgba(64, 158, 255, 0.2) !important;
+    height: 32px;
+    padding: 0 16px;
+    z-index: 10001;
+  }
+  :deep(.el-button--primary) {
+    --el-button-text-color: #fff !important;
+    --el-button-bg-color: rgba(64, 158, 255, 0.8) !important;
+    --el-button-border-color: #409eff !important;
+    --el-button-hover-bg-color: #409eff !important;
+  }
+  :deep(.reset-btn) {
+    background-color: rgba(0, 0, 0, 0.2) !important;
+    border-color: #409eff !important;
+    color: #e0e6ff !important;
+  }
+  :deep(.reset-btn:hover) {
+    background-color: rgba(64, 158, 255, 0.2) !important;
+    color: #fff !important;
+  }
+
+  :deep(.el-loading-mask) {
+    display: none !important;
+  }
+
+  .detail-body::-webkit-scrollbar,
+  :deep(.el-table__body-wrapper)::-webkit-scrollbar,
+  .table-container::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .detail-body::-webkit-scrollbar-track,
+  .table-container::-webkit-scrollbar-track {
+    background: rgba(10, 30, 60, 0.1);
+    border-radius: 3px;
+  }
+  .detail-body::-webkit-scrollbar-thumb,
+  .table-container::-webkit-scrollbar-thumb {
+    background: rgba(64, 158, 255, 0.5);
+    border-radius: 3px;
+  }
 </style>
 
 <style>
-.theme-select-popper {
-  background-color: rgba(10, 30, 60, 0.95) !important;
-  border: 1px solid #409EFF !important;
-  color: #e0e6ff !important;
-  z-index: 99999 !important;
-  pointer-events: auto !important;
-  position: fixed !important;
-}
-.theme-select-popper .el-select-dropdown__item {
-  color: #e0e6ff !important;
-  background-color: transparent !important;
-  padding: 6px 12px !important;
-}
-.theme-select-popper .el-select-dropdown__item:hover {
-  background-color: rgba(64, 158, 255, 0.2) !important;
-  color: #fff !important;
-}
-.theme-select-popper .el-select-dropdown__item.selected {
-  background-color: rgba(64, 158, 255, 0.5) !important;
-  color: #fff !important;
-}
+  .theme-select-popper {
+    background-color: rgba(10, 30, 60, 0.95) !important;
+    border: 1px solid #409eff !important;
+    color: #e0e6ff !important;
+    z-index: 99999 !important;
+    pointer-events: auto !important;
+    position: fixed !important;
+  }
+  .theme-select-popper .el-select-dropdown__item {
+    color: #e0e6ff !important;
+    background-color: transparent !important;
+    padding: 6px 12px !important;
+  }
+  .theme-select-popper .el-select-dropdown__item:hover {
+    background-color: rgba(64, 158, 255, 0.2) !important;
+    color: #fff !important;
+  }
+  .theme-select-popper .el-select-dropdown__item.selected {
+    background-color: rgba(64, 158, 255, 0.5) !important;
+    color: #fff !important;
+  }
 
-.theme-pagination-popper {
-  background-color: rgba(10, 30, 60, 0.95) !important;
-  border: 1px solid #409EFF !important;
-  color: #e0e6ff !important;
-  z-index: 99999 !important;
-  pointer-events: auto !important;
-  position: fixed !important;
-}
-.theme-pagination-popper .el-pagination__sizes-option {
-  color: #e0e6ff !important;
-  background-color: transparent !important;
-}
-.theme-pagination-popper .el-pagination__sizes-option:hover {
-  background-color: rgba(64, 158, 255, 0.2) !important;
-  color: #fff !important;
-}
+  .theme-pagination-popper {
+    background-color: rgba(10, 30, 60, 0.95) !important;
+    border: 1px solid #409eff !important;
+    color: #e0e6ff !important;
+    z-index: 99999 !important;
+    pointer-events: auto !important;
+    position: fixed !important;
+  }
+  .theme-pagination-popper .el-pagination__sizes-option {
+    color: #e0e6ff !important;
+    background-color: transparent !important;
+  }
+  .theme-pagination-popper .el-pagination__sizes-option:hover {
+    background-color: rgba(64, 158, 255, 0.2) !important;
+    color: #fff !important;
+  }
 
-.modal-overlay {
-  pointer-events: auto !important;
-}
-.modal-overlay .modal-content {
-  pointer-events: auto !important;
-}
-</style>
+  .modal-overlay {
+    pointer-events: auto !important;
+  }
+  .modal-overlay .modal-content {
+    pointer-events: auto !important;
+  }
+</style>

web-vue/packages/erp/api/erp/transactionFlow.ts

@@ -26,8 +26,27 @@ export interface ErpTransactionFlow extends BasicModel<ErpTransactionFlow> {
   businessId: string; // 业务标识
 }
 
+export interface ErpFlowParams extends BasicModel<ErpFlowParams> {
+  pageNum: number; // 当前页
+  pageSize: number; // 每页条数
+  flowName: string; // 交易名称
+  flowType: string; // 交易类型
+  accountId: string; // 交易账户
+  categoryId: string; // 交易分类
+}
+
+export interface PageResult<T> extends BasicModel<PageResult<T>> {
+  list: T[];               // 对应后端 List<T> list
+  currentPage: number;     // 当前页
+  pageSize: number;        // 每页条数
+  total: number;           // 总条数
+}
+
 export const erpTransactionFlowList = (params?: ErpTransactionFlow | any) =>
   defHttp.get<ErpTransactionFlow>({ url: adminPath + '/erp/transactionFlow/list', params });
+  
+export const erpTransactionPageFlowList = (params?: ErpTransactionFlow | any) =>
+  defHttp.get<PageResult<ErpTransactionFlow>>({ url: adminPath + '/erp/transactionFlow/FlowList', params });
 
 export const erpTransactionFlowListData = (params?: ErpTransactionFlow | any) =>
   defHttp.post<Page<ErpTransactionFlow>>({ url: adminPath + '/erp/transactionFlow/listData', params });