项目初始化

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
  */
@@ -98,7 +103,7 @@ public class ErpTransactionFlowController extends BaseController {
     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)){
+        try (ExcelExport ee = new ExcelExport("流水", ErpTransactionFlow.class)) {
             ee.setDataList(list).write(response, fileName);
         }
     }
@@ -112,7 +117,7 @@ public class ErpTransactionFlowController extends BaseController {
         ErpTransactionFlow erpTransactionFlow = new ErpTransactionFlow();
         List<ErpTransactionFlow> list = ListUtils.newArrayList(erpTransactionFlow);
         String fileName = "流水模板.xlsx";
-		try(ExcelExport ee = new ExcelExport("流水", ErpTransactionFlow.class, Type.IMPORT)){
+        try (ExcelExport ee = new ExcelExport("流水", ErpTransactionFlow.class, Type.IMPORT)) {
             ee.setDataList(list).write(response, fileName);
         }
     }
@@ -126,9 +131,9 @@ public class ErpTransactionFlowController extends BaseController {
     public String importData(MultipartFile file) {
         try {
             String message = erpTransactionFlowService.importData(file);
-			return renderResult(Global.TRUE, "posfull:"+message);
+            return renderResult(Global.TRUE, "posfull:" + message);
         } catch (Exception ex) {
-			return renderResult(Global.FALSE, "posfull:"+ex.getMessage());
+            return renderResult(Global.FALSE, "posfull:" + ex.getMessage());
         }
     }
 
@@ -143,4 +148,21 @@ public class ErpTransactionFlowController extends BaseController {
         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/setting/components/Erp.vue

@@ -7,8 +7,14 @@
             <div class="chart-top-inner">
               <h2>财务可视化大屏指标配置</h2>
               <div class="btn-group">
-                <el-button type="primary" size="default" @click="handleSave"
+                <el-button
-                :loading="saveLoading" :disabled="saveLoading">保存</el-button>
+                  type="primary"
+                  size="default"
+                  @click="handleSave"
+                  :loading="saveLoading"
+                  :disabled="saveLoading"
+                  >保存</el-button
+                >
                 <el-button type="warning" size="default" @click="handleReset">重置</el-button>
                 <el-button type="danger" size="default" @click="handleClearAll">清空</el-button>
               </div>
@@ -21,51 +27,39 @@
             <div class="work-col work-col-1-3">
               <div class="work-card full-height-card">
                 <span v-if="metric1.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(1)">×</span>
-                <div 
+                <div class="grid-content" @drop="(e) => handleDrop(e, 1)" @dragover="(e) => e.preventDefault()">
-                  class="grid-content" 
-                  @drop="(e) => handleDrop(e, 1)" 
-                  @dragover="(e) => e.preventDefault()"
-                >
                   <div v-if="metric1.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{1}}</span>
+                    <span class="sort-num">指标{{ 1 }}</span>
                     {{ metric1[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric1[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric1[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{1}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 1 }}）</div>
                 </div>
               </div>
             </div>
             <div class="work-col work-col-1-3">
               <div class="work-card full-height-card">
                 <span v-if="metric2.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(2)">×</span>
-                <div 
+                <div class="grid-content" @drop="(e) => handleDrop(e, 2)" @dragover="(e) => e.preventDefault()">
-                  class="grid-content" 
-                  @drop="(e) => handleDrop(e, 2)" 
-                  @dragover="(e) => e.preventDefault()"
-                >
                   <div v-if="metric2.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{2}}</span>
+                    <span class="sort-num">指标{{ 2 }}</span>
                     {{ metric2[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric2[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric2[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{2}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 2 }}）</div>
                 </div>
               </div>
             </div>
             <div class="work-col work-col-1-3">
               <div class="work-card full-height-card">
                 <span v-if="metric3.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(3)">×</span>
-                <div 
+                <div class="grid-content" @drop="(e) => handleDrop(e, 3)" @dragover="(e) => e.preventDefault()">
-                  class="grid-content" 
-                  @drop="(e) => handleDrop(e, 3)" 
-                  @dragover="(e) => e.preventDefault()"
-                >
                   <div v-if="metric3.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{3}}</span>
+                    <span class="sort-num">指标{{ 3 }}</span>
                     {{ metric3[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric3[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric3[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{3}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 3 }}）</div>
                 </div>
               </div>
             </div>
@@ -76,34 +70,26 @@
                 <div class="work-col work-col-1-2">
                   <div class="work-card full-height-card">
                     <span v-if="metric4.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(4)">×</span>
-                    <div 
+                    <div class="grid-content" @drop="(e) => handleDrop(e, 4)" @dragover="(e) => e.preventDefault()">
-                      class="grid-content" 
-                      @drop="(e) => handleDrop(e, 4)" 
-                      @dragover="(e) => e.preventDefault()"
-                    >
                       <div v-if="metric4.length > 0" class="metric-tag">
-                        <span class="sort-num">指标{{4}}</span>
+                        <span class="sort-num">指标{{ 4 }}</span>
                         {{ metric4[0].chartName }}
-                        <small style="font-size:12px; color:#88a0c2;">ID: {{ metric4[0].chartId }}</small>
+                        <small style="font-size: 12px; color: #88a0c2">ID: {{ metric4[0].chartId }}</small>
                       </div>
-                      <div v-else class="empty-tip">拖拽指标到此处（指标{{4}}）</div>
+                      <div v-else class="empty-tip">拖拽指标到此处（指标{{ 4 }}）</div>
                     </div>
                   </div>
                 </div>
                 <div class="work-col work-col-1-2">
                   <div class="work-card full-height-card">
                     <span v-if="metric5.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(5)">×</span>
-                    <div 
+                    <div class="grid-content" @drop="(e) => handleDrop(e, 5)" @dragover="(e) => e.preventDefault()">
-                      class="grid-content" 
-                      @drop="(e) => handleDrop(e, 5)" 
-                      @dragover="(e) => e.preventDefault()"
-                    >
                       <div v-if="metric5.length > 0" class="metric-tag">
-                        <span class="sort-num">指标{{5}}</span>
+                        <span class="sort-num">指标{{ 5 }}</span>
                         {{ metric5[0].chartName }}
-                        <small style="font-size:12px; color:#88a0c2;">ID: {{ metric5[0].chartId }}</small>
+                        <small style="font-size: 12px; color: #88a0c2">ID: {{ metric5[0].chartId }}</small>
                       </div>
-                      <div v-else class="empty-tip">拖拽指标到此处（指标{{5}}）</div>
+                      <div v-else class="empty-tip">拖拽指标到此处（指标{{ 5 }}）</div>
                     </div>
                   </div>
                 </div>
@@ -112,17 +98,13 @@
             <div class="work-col work-col-1-2">
               <div class="work-card full-height-card">
                 <span v-if="metric6.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(6)">×</span>
-                <div 
+                <div class="grid-content" @drop="(e) => handleDrop(e, 6)" @dragover="(e) => e.preventDefault()">
-                  class="grid-content" 
-                  @drop="(e) => handleDrop(e, 6)" 
-                  @dragover="(e) => e.preventDefault()"
-                >
                   <div v-if="metric6.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{6}}</span>
+                    <span class="sort-num">指标{{ 6 }}</span>
                     {{ metric6[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric6[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric6[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{6}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 6 }}）</div>
                 </div>
               </div>
             </div>
@@ -134,34 +116,26 @@
                 <div class="work-col work-col-1-2">
                   <div class="work-card full-height-card">
                     <span v-if="metric7.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(7)">×</span>
-                    <div 
+                    <div class="grid-content" @drop="(e) => handleDrop(e, 7)" @dragover="(e) => e.preventDefault()">
-                      class="grid-content" 
-                      @drop="(e) => handleDrop(e, 7)" 
-                      @dragover="(e) => e.preventDefault()"
-                    >
                       <div v-if="metric7.length > 0" class="metric-tag">
-                        <span class="sort-num">指标{{7}}</span>
+                        <span class="sort-num">指标{{ 7 }}</span>
                         {{ metric7[0].chartName }}
-                        <small style="font-size:12px; color:#88a0c2;">ID: {{ metric7[0].chartId }}</small>
+                        <small style="font-size: 12px; color: #88a0c2">ID: {{ metric7[0].chartId }}</small>
                       </div>
-                      <div v-else class="empty-tip">拖拽指标到此处（指标{{7}}）</div>
+                      <div v-else class="empty-tip">拖拽指标到此处（指标{{ 7 }}）</div>
                     </div>
                   </div>
                 </div>
                 <div class="work-col work-col-1-2">
                   <div class="work-card full-height-card">
                     <span v-if="metric8.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(8)">×</span>
-                    <div 
+                    <div class="grid-content" @drop="(e) => handleDrop(e, 8)" @dragover="(e) => e.preventDefault()">
-                      class="grid-content" 
-                      @drop="(e) => handleDrop(e, 8)" 
-                      @dragover="(e) => e.preventDefault()"
-                    >
                       <div v-if="metric8.length > 0" class="metric-tag">
-                        <span class="sort-num">指标{{8}}</span>
+                        <span class="sort-num">指标{{ 8 }}</span>
                         {{ metric8[0].chartName }}
-                        <small style="font-size:12px; color:#88a0c2;">ID: {{ metric8[0].chartId }}</small>
+                        <small style="font-size: 12px; color: #88a0c2">ID: {{ metric8[0].chartId }}</small>
                       </div>
-                      <div v-else class="empty-tip">拖拽指标到此处（指标{{8}}）</div>
+                      <div v-else class="empty-tip">拖拽指标到此处（指标{{ 8 }}）</div>
                     </div>
                   </div>
                 </div>
@@ -170,17 +144,13 @@
             <div class="work-col work-col-1-2">
               <div class="work-card full-height-card">
                 <span v-if="metric9.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(9)">×</span>
-                <div 
+                <div class="grid-content" @drop="(e) => handleDrop(e, 9)" @dragover="(e) => e.preventDefault()">
-                  class="grid-content" 
-                  @drop="(e) => handleDrop(e, 9)" 
-                  @dragover="(e) => e.preventDefault()"
-                >
                   <div v-if="metric9.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{9}}</span>
+                    <span class="sort-num">指标{{ 9 }}</span>
                     {{ metric9[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric9[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric9[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{9}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 9 }}）</div>
                 </div>
               </div>
             </div>
@@ -212,35 +182,48 @@
 </template>
 
 <script lang="ts" setup name="ViewsBizMyScreenErpSetting">
-import { ref, computed, onMounted } from 'vue';
+  import { ref, computed, onMounted } from 'vue';
-import { ElMessage, ElButton, ElInput } from 'element-plus';
+  import { ElMessage, ElButton, ElInput } from 'element-plus';
-import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
+  import { MyChartInfo, myChartSetting, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
 
-const metric1 = ref([]);
+  type MetricItem = MyChartInfo & {
-const metric2 = ref([]);
+    oldSort?: number;
-const metric3 = ref([]);
+    fixedOldChartId?: string | number | null;
-const metric4 = ref([]);
+    oldChartId?: string | number | null;
-const metric5 = ref([]);
+  };
-const metric6 = ref([]);
-const metric7 = ref([]);
-const metric8 = ref([]);
-const metric9 = ref([]);
 
-const gridOriginalChartId = ref({
+  const metric1 = ref<MetricItem[]>([]);
-  1: null, 2: null, 3: null, 4: null,
+  const metric2 = ref<MetricItem[]>([]);
-  5: null, 6: null, 7: null, 8: null, 9: null
+  const metric3 = ref<MetricItem[]>([]);
-});
+  const metric4 = ref<MetricItem[]>([]);
-const metricHistory = ref({});
+  const metric5 = ref<MetricItem[]>([]);
+  const metric6 = ref<MetricItem[]>([]);
+  const metric7 = ref<MetricItem[]>([]);
+  const metric8 = ref<MetricItem[]>([]);
+  const metric9 = ref<MetricItem[]>([]);
 
-const saveLoading = ref(false);
+  const gridOriginalChartId = ref({
-const rawChartData = ref<MyChartInfo[]>();
+    1: null,
-const searchKey = ref('');
+    2: null,
-const dragItem = ref(null);
+    3: null,
+    4: null,
+    5: null,
+    6: null,
+    7: null,
+    8: null,
+    9: null,
+  });
+  const metricHistory = ref({});
 
-const allMetricList = computed({
+  const saveLoading = ref(false);
+  const rawChartData = ref<MyChartInfo[]>([]);
+  const searchKey = ref('');
+  const dragItem = ref<MetricItem | null>(null);
+
+  const allMetricList = computed({
     get() {
       if (!rawChartData.value || !Array.isArray(rawChartData.value)) return [];
-    return rawChartData.value.filter(item => {
+      return rawChartData.value.filter((item) => {
         if (!item || !item.chartName) return false;
         const searchVal = searchKey.value ? searchKey.value.toLowerCase() : '';
         const nameVal = item.chartName ? item.chartName.toLowerCase() : '';
@@ -249,26 +232,21 @@ const allMetricList = computed({
     },
     set(val) {
       rawChartData.value = val;
-  }
+    },
-});
+  });
 
-const getAllMetricArrays = () => ([
+  const getAllMetricArrays = () => [metric1, metric2, metric3, metric4, metric5, metric6, metric7, metric8, metric9];
-  metric1, metric2, metric3, metric4, 
-  metric5, metric6, metric7, metric8, metric9
-]);
 
-const getMetricArrByGridNum = (gridNum) => {
+  const getMetricArrByGridNum = (gridNum: number) => {
     return getAllMetricArrays()[gridNum - 1];
-};
+  };
 
-const isMetricUsed = (metricId) => {
+  const isMetricUsed = (metricId: string) => {
     if (!metricId) return false;
-  return getAllMetricArrays().some(
+    return getAllMetricArrays().some((metricArr) => metricArr.value.some((m) => m && m.chartId === metricId));
-    metricArr => metricArr.value.some(m => m && m.chartId === metricId)
+  };
-  );
-};
 
-const findGridNumByChartId = (chartId) => {
+  const findGridNumByChartId = (chartId: string) => {
     const arr = getAllMetricArrays();
     for (let i = 0; i < arr.length; i++) {
       if (arr[i].value.length && arr[i].value[0].chartId === chartId) {
@@ -276,19 +254,19 @@ const findGridNumByChartId = (chartId) => {
       }
     }
     return null;
-};
+  };
 
-const handleDragStart = (e, item) => {
+  const handleDragStart = (e, item) => {
     dragItem.value = item;
     e.dataTransfer.setData('text/plain', JSON.stringify(item));
     e.target.style.opacity = '0.6';
-};
+  };
 
-const handleDragEnd = (e) => {
+  const handleDragEnd = (e) => {
     e.target.style.opacity = '1';
-};
+  };
 
-const handleDrop = (e, gridNum) => {
+  const handleDrop = (e, gridNum) => {
     e.preventDefault();
     if (!dragItem.value) return;
     const targetArr = getMetricArrByGridNum(gridNum);
@@ -300,7 +278,7 @@ const handleDrop = (e, gridNum) => {
 
     getAllMetricArrays().forEach((arr, index) => {
       const pos = index + 1;
-    if (pos !== gridNum && arr.value.some(item => item.chartId === currentChartId)) {
+      if (pos !== gridNum && arr.value.some((item) => item.chartId === currentChartId)) {
         arr.value = [];
       }
     });
@@ -313,36 +291,37 @@ const handleDrop = (e, gridNum) => {
       sort: gridNum,
       oldSort: oldSort,
       fixedOldChartId: oldChartId,
-    oldChartId: oldChartId
+      oldChartId: oldChartId,
     };
 
     targetArr.value = [newItem];
     metricHistory.value[currentChartId] = gridNum;
     dragItem.value = null;
-};
+  };
 
-const handleDeleteMetric = (gridNum) => {
+  const handleDeleteMetric = (gridNum: any) => {
     const targetArr = getMetricArrByGridNum(gridNum);
     if (targetArr) {
       targetArr.value = [];
     }
-};
+  };
 
-const handleReset = () => {
+  const handleReset = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
     searchKey.value = '';
     getChartList();
     ElMessage.info('已重置所有指标');
-};
+  };
 
-const handleClearAll = () => {
+  const handleClearAll = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
     ElMessage.info('已清空所有格子');
-};
+  };
 
-const handleSave = async () => {
+  const handleSave = async () => {
     saveLoading.value = true;
-  const saveData = getAllMetricArrays().map((arr, index) => {
+    const saveData = getAllMetricArrays()
+      .map((arr, index) => {
         const gridNum = index + 1;
         const currentItem = arr.value[0];
         return {
@@ -352,13 +331,15 @@ const handleSave = async () => {
           chartName: currentItem?.chartName || '',
           chartCode: 'erp',
           oldSort: currentItem?.oldSort || gridNum,
-      color: currentItem?.color || ''
+          color: currentItem?.color || '',
         };
-  }).filter(item => item.chartId);
+      })
+      .filter((item) => item.chartId);
 
     try {
-    const res = await getChartSetting(saveData);
+		console.log(saveData);
-    ElMessage.success(res?.msg);
+      // const res = await myChartSetting(saveData);
+      // ElMessage.success(res?.msg);
       return saveData;
     } catch (error) {
       console.error('保存失败：', error);
@@ -366,37 +347,39 @@ const handleSave = async () => {
       getChartList();
       saveLoading.value = false;
     }
-};
+  };
 
-const getRandomColor = () => {
+  const getRandomColor = () => {
     const colors = ['#3c9cff', '#5ac8fa', '#9254de', '#f7ba2a', '#ff7d00', '#23c8c8', '#ff6b6b', '#86909c', '#7b68ee'];
     return colors[Math.floor(Math.random() * colors.length)];
-};
+  };
 
-async function getChartList() {
+  async function getChartList() {
     try {
       const reqParams = { chartCode: 'erp' };
       const res = await myChartInfoListAll(reqParams);
       rawChartData.value = res || [];
 
       metricHistory.value = {};
-    Object.keys(gridOriginalChartId.value).forEach(key => {
+      Object.keys(gridOriginalChartId.value).forEach((key) => {
         gridOriginalChartId.value[key] = null;
       });
 
-    rawChartData.value.forEach(item => {
+      rawChartData.value.forEach((item) => {
         const sortNum = item.sort || 0;
         if (sortNum >= 1 && sortNum <= 9) {
           const targetArr = getMetricArrByGridNum(sortNum);
           if (targetArr) {
             gridOriginalChartId.value[sortNum] = item.chartId;
-          targetArr.value = [{
+            targetArr.value = [
+              {
                 ...item,
                 sort: sortNum,
                 oldSort: 0,
                 fixedOldChartId: item.chartId,
-            oldChartId: item.chartId
+                oldChartId: item.chartId,
-          }];
+              },
+            ];
             metricHistory.value[item.chartId] = sortNum;
           }
         }
@@ -405,15 +388,15 @@ async function getChartList() {
       console.error('获取数据失败:', error);
       rawChartData.value = [];
     }
-}
+  }
 
-onMounted(async () => {
+  onMounted(async () => {
     await getChartList();
-});
+  });
 </script>
 
 <style scoped>
-.work-layout-container {
+  .work-layout-container {
     width: 100%;
     height: 100%;
     display: flex;
@@ -424,26 +407,26 @@ onMounted(async () => {
     box-sizing: border-box;
     background-color: #0a1a33;
     overflow: hidden;
-}
+  }
 
-.main-wrapper {
+  .main-wrapper {
     display: flex;
     width: 100%;
     height: 100%;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.left-area {
+  .left-area {
     width: calc(85% - 1px);
     height: 100%;
     display: flex;
     flex-direction: column;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.right-area {
+  .right-area {
     width: calc(15% - 1px);
     height: 100%;
     background-color: rgba(15, 52, 96, 0.5);
@@ -454,49 +437,49 @@ onMounted(async () => {
     flex-direction: column;
     box-sizing: border-box;
     overflow: hidden;
-}
+  }
 
-.work-top-header {
+  .work-top-header {
     height: calc(6% - 1px);
     box-sizing: border-box;
-}
+  }
 
-.work-main-section {
+  .work-main-section {
     height: calc(94% - 1px);
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.layout-row {
+  .layout-row {
     width: 100%;
     display: flex;
     gap: 2px;
     box-sizing: border-box;
     height: calc(100% / 3);
-}
+  }
 
-.work-col-1-3 {
+  .work-col-1-3 {
     width: calc(100% / 3);
     box-sizing: border-box;
-}
+  }
 
-.work-col-1-2 {
+  .work-col-1-2 {
     width: calc(100% / 2);
     box-sizing: border-box;
-}
+  }
 
-.inner-layout.double-col-horizontal {
+  .inner-layout.double-col-horizontal {
     width: 100%;
     height: 100%;
     display: flex;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.full-height-card {
+  .full-height-card {
     width: 100%;
     height: 100%;
     background-color: rgba(15, 52, 96, 0.3);
@@ -510,16 +493,16 @@ onMounted(async () => {
     color: #e0e6ff;
     overflow: hidden;
     position: relative;
-}
+  }
 
-.work-section {
+  .work-section {
     width: 100%;
     display: flex;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.chart-top-inner {
+  .chart-top-inner {
     width: 100%;
     height: 100%;
     display: flex;
@@ -528,28 +511,28 @@ onMounted(async () => {
     padding: 0 16px;
     color: #e0e6ff;
     box-sizing: border-box;
-}
+  }
 
-.chart-top-inner h2 {
+  .chart-top-inner h2 {
     font-size: 16px;
     margin: 0;
     font-weight: 600;
-}
+  }
 
-.btn-group {
+  .btn-group {
     display: flex;
     gap: 8px;
-}
+  }
 
-.work-col {
+  .work-col {
     height: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     gap: 2px;
-}
+  }
 
-.work-card {
+  .work-card {
     width: 100%;
     background-color: rgba(15, 52, 96, 0.3);
     border: 1px solid #1a508b;
@@ -562,15 +545,15 @@ onMounted(async () => {
     color: #e0e6ff;
     overflow: hidden;
     position: relative;
-}
+  }
 
-.full-card {
+  .full-card {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-}
+  }
 
-.delete-icon {
+  .delete-icon {
     position: absolute;
     top: 6px;
     right: 6px;
@@ -586,14 +569,14 @@ onMounted(async () => {
     background-color: rgba(255, 107, 107, 0.1);
     z-index: 10;
     transition: all 0.2s ease;
-}
+  }
 
-.delete-icon:hover {
+  .delete-icon:hover {
     background-color: rgba(255, 107, 107, 0.3);
     transform: scale(1.1);
-}
+  }
 
-.grid-content {
+  .grid-content {
     width: 100%;
     height: 100%;
     display: flex;
@@ -602,9 +585,9 @@ onMounted(async () => {
     padding: 8px;
     box-sizing: border-box;
     cursor: drop;
-}
+  }
 
-.metric-tag {
+  .metric-tag {
     padding: 0;
     background: none;
     color: #e0e6ff;
@@ -614,16 +597,16 @@ onMounted(async () => {
     display: flex;
     flex-direction: column;
     align-items: center;
-}
+  }
 
-.sort-num {
+  .sort-num {
     font-size: 14px;
     color: #88a0c2;
     margin-bottom: 4px;
     display: block;
-}
+  }
 
-.empty-tip {
+  .empty-tip {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -631,41 +614,41 @@ onMounted(async () => {
     color: #88a0c2;
     font-size: 14px;
     pointer-events: none;
-}
+  }
 
-.search-box {
+  .search-box {
     padding: 4px 0;
     margin-bottom: 8px;
     box-sizing: border-box;
-}
+  }
 
-.metric-list {
+  .metric-list {
     flex: 1;
     overflow-y: auto;
     padding: 4px;
     box-sizing: border-box;
     scrollbar-width: thin;
     scrollbar-color: rgba(60, 156, 255, 0.2) transparent;
-}
+  }
 
-.metric-list::-webkit-scrollbar {
+  .metric-list::-webkit-scrollbar {
     width: 1px;
-}
+  }
 
-.metric-list::-webkit-scrollbar-track {
+  .metric-list::-webkit-scrollbar-track {
     background: transparent;
-}
+  }
 
-.metric-list::-webkit-scrollbar-thumb {
+  .metric-list::-webkit-scrollbar-thumb {
     background: rgba(60, 156, 255, 0.2);
     border-radius: 0.5px;
-}
+  }
 
-.metric-list::-webkit-scrollbar-thumb:hover {
+  .metric-list::-webkit-scrollbar-thumb:hover {
     background: rgba(60, 156, 255, 0.4);
-}
+  }
 
-.metric-item {
+  .metric-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -677,21 +660,21 @@ onMounted(async () => {
     font-size: 14px;
     box-sizing: border-box;
     transition: all 0.2s ease;
-}
+  }
 
-.metric-item.active {
+  .metric-item.active {
     background-color: rgba(60, 156, 255, 0.3);
     border: 1px solid #3c9cff;
-}
+  }
 
-.metric-item:hover {
+  .metric-item:hover {
     background-color: rgba(60, 156, 255, 0.15);
-}
+  }
 
-.color-dot {
+  .color-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     margin-left: 6px;
-}
+  }
 </style>

web-vue/packages/core/layouts/screen/setting/components/Home.vue

@@ -7,8 +7,14 @@
             <div class="chart-top-inner">
               <h2>首页可视化大屏指标配置</h2>
               <div class="btn-group">
-                <el-button type="primary" size="default" @click="handleSave"
+                <el-button
-                :loading="saveLoading" :disabled="saveLoading">保存</el-button>
+                  type="primary"
+                  size="default"
+                  @click="handleSave"
+                  :loading="saveLoading"
+                  :disabled="saveLoading"
+                  >保存</el-button
+                >
                 <el-button type="warning" size="default" @click="handleReset">重置</el-button>
                 <el-button type="danger" size="default" @click="handleClearAll">清空</el-button>
               </div>
@@ -23,11 +29,11 @@
                 <span v-if="metric1.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(1)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 1)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric1.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{1}}</span>
+                    <span class="sort-num">指标{{ 1 }}</span>
                     {{ metric1[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric1[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric1[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{1}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 1 }}）</div>
                 </div>
               </div>
             </div>
@@ -36,11 +42,11 @@
                 <span v-if="metric2.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(2)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 2)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric2.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{2}}</span>
+                    <span class="sort-num">指标{{ 2 }}</span>
                     {{ metric2[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric2[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric2[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{2}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 2 }}）</div>
                 </div>
               </div>
             </div>
@@ -49,11 +55,11 @@
                 <span v-if="metric3.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(3)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 3)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric3.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{3}}</span>
+                    <span class="sort-num">指标{{ 3 }}</span>
                     {{ metric3[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric3[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric3[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{3}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 3 }}）</div>
                 </div>
               </div>
             </div>
@@ -65,11 +71,11 @@
                 <span v-if="metric4.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(4)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 4)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric4.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{4}}</span>
+                    <span class="sort-num">指标{{ 4 }}</span>
                     {{ metric4[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric4[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric4[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{4}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 4 }}）</div>
                 </div>
               </div>
             </div>
@@ -78,11 +84,11 @@
                 <span v-if="metric5.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(5)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 5)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric5.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{5}}</span>
+                    <span class="sort-num">指标{{ 5 }}</span>
                     {{ metric5[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric5[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric5[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{5}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 5 }}）</div>
                 </div>
               </div>
             </div>
@@ -94,11 +100,11 @@
                 <span v-if="metric6.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(6)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 6)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric6.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{6}}</span>
+                    <span class="sort-num">指标{{ 6 }}</span>
                     {{ metric6[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric6[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric6[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{6}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 6 }}）</div>
                 </div>
               </div>
             </div>
@@ -107,11 +113,11 @@
                 <span v-if="metric7.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(7)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 7)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric7.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{7}}</span>
+                    <span class="sort-num">指标{{ 7 }}</span>
                     {{ metric7[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric7[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric7[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{7}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 7 }}）</div>
                 </div>
               </div>
             </div>
@@ -124,7 +130,15 @@
           <el-input v-model="searchKey" placeholder="搜索指标项..." size="default"></el-input>
         </div>
         <div class="metric-list">
-          <div v-for="item in allMetricList" :key="item.chartId" class="metric-item" :class="{ active: isMetricUsed(item.chartId) }" draggable="true" @dragstart="(e) => handleDragStart(e, item)" @dragend="handleDragEnd">
+          <div
+            v-for="item in allMetricList"
+            :key="item.chartId"
+            class="metric-item"
+            :class="{ active: isMetricUsed(item.chartId) }"
+            draggable="true"
+            @dragstart="(e) => handleDragStart(e, item)"
+            @dragend="handleDragEnd"
+          >
             <span>{{ item.chartName }}</span>
             <span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span>
           </div>
@@ -135,33 +149,43 @@
 </template>
 
 <script lang="ts" setup name="ViewsBizMyScreenHomeSetting">
-import { ref, computed, onMounted } from 'vue';
+  import { ref, computed, onMounted } from 'vue';
-import { ElMessage, ElButton, ElInput } from 'element-plus';
+  import { ElMessage, ElButton, ElInput } from 'element-plus';
-import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
+  import { MyChartInfo, myChartSetting, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
 
-const metric1 = ref([]);
+  type MetricItem = MyChartInfo & {
-const metric2 = ref([]);
+    oldSort?: number;
-const metric3 = ref([]);
+    oldChartId?: string | number | null;
-const metric4 = ref([]);
+  };
-const metric5 = ref([]);
-const metric6 = ref([]);
-const metric7 = ref([]);
 
-const gridOriginalChartId = ref({
+  const metric1 = ref<MetricItem[]>([]);
-  1: null, 2: null, 3: null,
+  const metric2 = ref<MetricItem[]>([]);
-  4: null, 5: null, 6: null, 7: null
+  const metric3 = ref<MetricItem[]>([]);
-});
+  const metric4 = ref<MetricItem[]>([]);
-const metricHistory = ref({});
+  const metric5 = ref<MetricItem[]>([]);
+  const metric6 = ref<MetricItem[]>([]);
+  const metric7 = ref<MetricItem[]>([]);
 
-const saveLoading = ref(false);
+  const gridOriginalChartId = ref({
-const rawChartData = ref<MyChartInfo[]>();
+    1: null,
-const searchKey = ref('');
+    2: null,
-const dragItem = ref(null);
+    3: null,
+    4: null,
+    5: null,
+    6: null,
+    7: null,
+  });
+  const metricHistory = ref({});
 
-const allMetricList = computed({
+  const saveLoading = ref(false);
+  const rawChartData = ref<MyChartInfo[]>([]);
+  const searchKey = ref('');
+  const dragItem = ref<MetricItem | null>(null);
+
+  const allMetricList = computed({
     get() {
       if (!rawChartData.value || !Array.isArray(rawChartData.value)) return [];
-    return rawChartData.value.filter(item => {
+      return rawChartData.value.filter((item) => {
         if (!item || !item.chartName) return false;
         const searchVal = searchKey.value ? searchKey.value.toLowerCase() : '';
         const nameVal = item.chartName ? item.chartName.toLowerCase() : '';
@@ -170,26 +194,21 @@ const allMetricList = computed({
     },
     set(val) {
       rawChartData.value = val;
-  }
+    },
-});
+  });
 
-const getAllMetricArrays = () => ([
+  const getAllMetricArrays = () => [metric1, metric2, metric3, metric4, metric5, metric6, metric7];
-  metric1, metric2, metric3,
-  metric4, metric5, metric6, metric7
-]);
 
-const getMetricArrByGridNum = (gridNum) => {
+  const getMetricArrByGridNum = (gridNum: number) => {
     return getAllMetricArrays()[gridNum - 1];
-};
+  };
 
-const isMetricUsed = (metricId) => {
+  const isMetricUsed = (metricId: any) => {
     if (!metricId) return false;
-  return getAllMetricArrays().some(
+    return getAllMetricArrays().some((metricArr) => metricArr.value.some((m) => m && m.chartId === metricId));
-    metricArr => metricArr.value.some(m => m && m.chartId === metricId)
+  };
-  );
-};
 
-const findGridNumByChartId = (chartId) => {
+  const findGridNumByChartId = (chartId: any) => {
     const arr = getAllMetricArrays();
     for (let i = 0; i < arr.length; i++) {
       if (arr[i].value.length && arr[i].value[0].chartId === chartId) {
@@ -197,19 +216,19 @@ const findGridNumByChartId = (chartId) => {
       }
     }
     return null;
-};
+  };
 
-const handleDragStart = (e, item) => {
+  const handleDragStart = (e, item) => {
     dragItem.value = item;
     e.dataTransfer.setData('text/plain', JSON.stringify(item));
     e.target.style.opacity = '0.6';
-};
+  };
 
-const handleDragEnd = (e) => {
+  const handleDragEnd = (e) => {
     e.target.style.opacity = '1';
-};
+  };
 
-const handleDrop = (e, targetGrid) => {
+  const handleDrop = (e, targetGrid) => {
     e.preventDefault();
     if (!dragItem.value) return;
 
@@ -222,7 +241,7 @@ const handleDrop = (e, targetGrid) => {
     getAllMetricArrays().forEach((arr, index) => {
       const gridNum = index + 1;
       if (gridNum !== targetGrid) {
-      arr.value = arr.value.filter(i => i.chartId !== dragChartId);
+        arr.value = arr.value.filter((i) => i.chartId !== dragChartId);
       }
     });
 
@@ -240,30 +259,31 @@ const handleDrop = (e, targetGrid) => {
       sourceArr.value = [];
     }
     dragItem.value = null;
-};
+  };
 
-const handleDeleteMetric = (gridNum) => {
+  const handleDeleteMetric = (gridNum) => {
     const targetArr = getMetricArrByGridNum(gridNum);
     if (targetArr) {
       targetArr.value = [];
     }
-};
+  };
 
-const handleReset = () => {
+  const handleReset = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
     searchKey.value = '';
     getChartList();
     ElMessage.info('已重置所有指标');
-};
+  };
 
-const handleClearAll = () => {
+  const handleClearAll = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
     ElMessage.info('已清空所有格子');
-};
+  };
 
-const handleSave = async () => {
+  const handleSave = async () => {
     saveLoading.value = true;
-  const saveData = getAllMetricArrays().map((arr, index) => {
+    const saveData = getAllMetricArrays()
+      .map((arr, index) => {
         const gridNum = index + 1;
         const currentItem = arr.value[0];
         return {
@@ -273,12 +293,13 @@ const handleSave = async () => {
           chartName: currentItem?.chartName || '',
           chartCode: 'home',
           oldSort: currentItem?.oldSort || gridNum,
-      color: currentItem?.color || ''
+          color: currentItem?.color || '',
         };
-  }).filter(item => item.chartId);
+      })
+      .filter((item) => item.chartId);
 
     try {
-    const res = await getChartSetting(saveData);
+      const res = await myChartSetting(saveData);
       ElMessage.success(res?.msg);
       return saveData;
     } catch (error) {
@@ -287,35 +308,37 @@ const handleSave = async () => {
       getChartList();
       saveLoading.value = false;
     }
-};
+  };
 
-const getRandomColor = () => {
+  const getRandomColor = () => {
     const colors = ['#3c9cff', '#5ac8fa', '#9254de', '#f7ba2a', '#ff7d00', '#23c8c8', '#ff6b6b'];
     return colors[Math.floor(Math.random() * colors.length)];
-};
+  };
 
-async function getChartList() {
+  async function getChartList() {
     try {
       const reqParams = { chartCode: 'home' };
       const res = await myChartInfoListAll(reqParams);
       rawChartData.value = res || [];
       metricHistory.value = {};
-    Object.keys(gridOriginalChartId.value).forEach(key => {
+      Object.keys(gridOriginalChartId.value).forEach((key) => {
         gridOriginalChartId.value[key] = null;
       });
-    rawChartData.value.forEach(item => {
+      rawChartData.value.forEach((item) => {
         const sortNum = item.sort || 0;
         if (sortNum >= 1 && sortNum <= 7) {
           const targetArr = getMetricArrByGridNum(sortNum);
           if (targetArr) {
             gridOriginalChartId.value[sortNum] = item.chartId;
-          targetArr.value = [{
+            targetArr.value = [
+              {
                 ...item,
                 sort: sortNum,
                 oldSort: 0,
                 chartId: item.chartId,
-            oldChartId: item.chartId
+                oldChartId: item.chartId,
-          }];
+              },
+            ];
             metricHistory.value[item.chartId] = sortNum;
           }
         }
@@ -324,15 +347,15 @@ async function getChartList() {
       console.error('获取数据失败:', error);
       rawChartData.value = [];
     }
-}
+  }
 
-onMounted(async () => {
+  onMounted(async () => {
     await getChartList();
-});
+  });
 </script>
 
 <style scoped>
-.work-layout-container {
+  .work-layout-container {
     width: 100%;
     height: 100%;
     display: flex;
@@ -343,26 +366,26 @@ onMounted(async () => {
     box-sizing: border-box;
     background-color: #0a1a33;
     overflow: hidden;
-}
+  }
 
-.main-wrapper {
+  .main-wrapper {
     display: flex;
     width: 100%;
     height: 100%;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.left-area {
+  .left-area {
     width: calc(85% - 1px);
     height: 100%;
     display: flex;
     flex-direction: column;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.right-area {
+  .right-area {
     width: calc(15% - 1px);
     height: 100%;
     background-color: rgba(15, 52, 96, 0.5);
@@ -373,41 +396,41 @@ onMounted(async () => {
     flex-direction: column;
     box-sizing: border-box;
     overflow: hidden;
-}
+  }
 
-.work-top-header {
+  .work-top-header {
     height: calc(6% - 1px);
     box-sizing: border-box;
-}
+  }
 
-.work-main-section {
+  .work-main-section {
     height: calc(94% - 1px);
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.layout-row {
+  .layout-row {
     width: 100%;
     display: flex;
     gap: 2px;
     box-sizing: border-box;
     height: calc(100% / 3);
-}
+  }
 
-.work-col-1-3 {
+  .work-col-1-3 {
     width: calc((100% - 4px) / 3);
     box-sizing: border-box;
-}
+  }
 
-.work-col-1-2 {
+  .work-col-1-2 {
     width: calc((100% - 2px) / 2);
     box-sizing: border-box;
-}
+  }
 
-.full-height-card {
+  .full-height-card {
     width: 100%;
     height: 100%;
     background-color: rgba(15, 52, 96, 0.3);
@@ -421,16 +444,16 @@ onMounted(async () => {
     color: #e0e6ff;
     overflow: hidden;
     position: relative;
-}
+  }
 
-.work-section {
+  .work-section {
     width: 100%;
     display: flex;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.chart-top-inner {
+  .chart-top-inner {
     width: 100%;
     height: 100%;
     display: flex;
@@ -439,28 +462,28 @@ onMounted(async () => {
     padding: 0 16px;
     color: #e0e6ff;
     box-sizing: border-box;
-}
+  }
 
-.chart-top-inner h2 {
+  .chart-top-inner h2 {
     font-size: 16px;
     margin: 0;
     font-weight: 600;
-}
+  }
 
-.btn-group {
+  .btn-group {
     display: flex;
     gap: 8px;
-}
+  }
 
-.work-col {
+  .work-col {
     height: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     gap: 2px;
-}
+  }
 
-.work-card {
+  .work-card {
     width: 100%;
     background-color: rgba(15, 52, 96, 0.3);
     border: 1px solid #1a508b;
@@ -473,15 +496,15 @@ onMounted(async () => {
     color: #e0e6ff;
     overflow: hidden;
     position: relative;
-}
+  }
 
-.full-card {
+  .full-card {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-}
+  }
 
-.delete-icon {
+  .delete-icon {
     position: absolute;
     top: 6px;
     right: 6px;
@@ -497,14 +520,14 @@ onMounted(async () => {
     background-color: rgba(255, 107, 107, 0.1);
     z-index: 10;
     transition: all 0.2s ease;
-}
+  }
 
-.delete-icon:hover {
+  .delete-icon:hover {
     background-color: rgba(255, 107, 107, 0.3);
     transform: scale(1.1);
-}
+  }
 
-.grid-content {
+  .grid-content {
     width: 100%;
     height: 100%;
     display: flex;
@@ -513,9 +536,9 @@ onMounted(async () => {
     padding: 8px;
     box-sizing: border-box;
     cursor: drop;
-}
+  }
 
-.metric-tag {
+  .metric-tag {
     padding: 0;
     background: none;
     color: #e0e6ff;
@@ -525,16 +548,16 @@ onMounted(async () => {
     display: flex;
     flex-direction: column;
     align-items: center;
-}
+  }
 
-.sort-num {
+  .sort-num {
     font-size: 14px;
     color: #88a0c2;
     margin-bottom: 4px;
     display: block;
-}
+  }
 
-.empty-tip {
+  .empty-tip {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -542,41 +565,41 @@ onMounted(async () => {
     color: #88a0c2;
     font-size: 14px;
     pointer-events: none;
-}
+  }
 
-.search-box {
+  .search-box {
     padding: 4px 0;
     margin-bottom: 8px;
     box-sizing: border-box;
-}
+  }
 
-.metric-list {
+  .metric-list {
     flex: 1;
     overflow-y: auto;
     padding: 4px;
     box-sizing: border-box;
     scrollbar-width: thin;
     scrollbar-color: rgba(60, 156, 255, 0.2) transparent;
-}
+  }
 
-.metric-list::-webkit-scrollbar {
+  .metric-list::-webkit-scrollbar {
     width: 1px;
-}
+  }
 
-.metric-list::-webkit-scrollbar-track {
+  .metric-list::-webkit-scrollbar-track {
     background: transparent;
-}
+  }
 
-.metric-list::-webkit-scrollbar-thumb {
+  .metric-list::-webkit-scrollbar-thumb {
     background: rgba(60, 156, 255, 0.2);
     border-radius: 0.5px;
-}
+  }
 
-.metric-list::-webkit-scrollbar-thumb:hover {
+  .metric-list::-webkit-scrollbar-thumb:hover {
     background: rgba(60, 156, 255, 0.4);
-}
+  }
 
-.metric-item {
+  .metric-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -588,21 +611,21 @@ onMounted(async () => {
     font-size: 14px;
     box-sizing: border-box;
     transition: all 0.2s ease;
-}
+  }
 
-.metric-item.active {
+  .metric-item.active {
     background-color: rgba(60, 156, 255, 0.3);
     border: 1px solid #3c9cff;
-}
+  }
 
-.metric-item:hover {
+  .metric-item:hover {
     background-color: rgba(60, 156, 255, 0.15);
-}
+  }
 
-.color-dot {
+  .color-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     margin-left: 6px;
-}
+  }
 </style>

web-vue/packages/core/layouts/screen/setting/components/Sys.vue

@@ -7,8 +7,14 @@
             <div class="chart-top-inner">
               <h2>系统可视化大屏指标配置</h2>
               <div class="btn-group">
-                <el-button type="primary" size="default" @click="handleSave"
+                <el-button
-                :loading="saveLoading" :disabled="saveLoading">保存</el-button>
+                  type="primary"
+                  size="default"
+                  @click="handleSave"
+                  :loading="saveLoading"
+                  :disabled="saveLoading"
+                  >保存</el-button
+                >
                 <el-button type="warning" size="default" @click="handleReset">重置</el-button>
                 <el-button type="danger" size="default" @click="handleClearAll">清空</el-button>
               </div>
@@ -23,11 +29,11 @@
                 <span v-if="metric1.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(1)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 1)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric1.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{1}}</span>
+                    <span class="sort-num">指标{{ 1 }}</span>
                     {{ metric1[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric1[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric1[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{1}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 1 }}）</div>
                 </div>
               </div>
             </div>
@@ -36,11 +42,11 @@
                 <span v-if="metric2.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(2)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 2)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric2.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{2}}</span>
+                    <span class="sort-num">指标{{ 2 }}</span>
                     {{ metric2[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric2[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric2[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{2}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 2 }}）</div>
                 </div>
               </div>
             </div>
@@ -49,11 +55,11 @@
                 <span v-if="metric3.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(3)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 3)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric3.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{3}}</span>
+                    <span class="sort-num">指标{{ 3 }}</span>
                     {{ metric3[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric3[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric3[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{3}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 3 }}）</div>
                 </div>
               </div>
             </div>
@@ -64,11 +70,11 @@
                 <span v-if="metric4.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(4)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 4)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric4.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{4}}</span>
+                    <span class="sort-num">指标{{ 4 }}</span>
                     {{ metric4[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric4[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric4[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{4}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 4 }}）</div>
                 </div>
               </div>
             </div>
@@ -77,11 +83,11 @@
                 <span v-if="metric5.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(5)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 5)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric5.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{5}}</span>
+                    <span class="sort-num">指标{{ 5 }}</span>
                     {{ metric5[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric5[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric5[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{5}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 5 }}）</div>
                 </div>
               </div>
             </div>
@@ -90,11 +96,11 @@
                 <span v-if="metric6.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(6)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 6)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric6.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{6}}</span>
+                    <span class="sort-num">指标{{ 6 }}</span>
                     {{ metric6[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric6[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric6[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{6}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 6 }}）</div>
                 </div>
               </div>
             </div>
@@ -105,11 +111,11 @@
                 <span v-if="metric7.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(7)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 7)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric7.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{7}}</span>
+                    <span class="sort-num">指标{{ 7 }}</span>
                     {{ metric7[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric7[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric7[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{7}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 7 }}）</div>
                 </div>
               </div>
             </div>
@@ -118,11 +124,11 @@
                 <span v-if="metric8.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(8)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 8)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric8.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{8}}</span>
+                    <span class="sort-num">指标{{ 8 }}</span>
                     {{ metric8[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric8[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric8[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{8}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 8 }}）</div>
                 </div>
               </div>
             </div>
@@ -131,11 +137,11 @@
                 <span v-if="metric9.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(9)">×</span>
                 <div class="grid-content" @drop="(e) => handleDrop(e, 9)" @dragover="(e) => e.preventDefault()">
                   <div v-if="metric9.length > 0" class="metric-tag">
-                    <span class="sort-num">指标{{9}}</span>
+                    <span class="sort-num">指标{{ 9 }}</span>
                     {{ metric9[0].chartName }}
-                    <small style="font-size:12px; color:#88a0c2;">ID: {{ metric9[0].chartId }}</small>
+                    <small style="font-size: 12px; color: #88a0c2">ID: {{ metric9[0].chartId }}</small>
                   </div>
-                  <div v-else class="empty-tip">拖拽指标到此处（指标{{9}}）</div>
+                  <div v-else class="empty-tip">拖拽指标到此处（指标{{ 9 }}）</div>
                 </div>
               </div>
             </div>
@@ -147,7 +153,15 @@
           <el-input v-model="searchKey" placeholder="搜索指标项..." size="default"></el-input>
         </div>
         <div class="metric-list">
-          <div v-for="item in allMetricList" :key="item.chartId" class="metric-item" :class="{ active: isMetricUsed(item.chartId) }" draggable="true" @dragstart="(e) => handleDragStart(e, item)" @dragend="handleDragEnd">
+          <div
+            v-for="item in allMetricList"
+            :key="item.chartId"
+            class="metric-item"
+            :class="{ active: isMetricUsed(item.chartId) }"
+            draggable="true"
+            @dragstart="(e) => handleDragStart(e, item)"
+            @dragend="handleDragEnd"
+          >
             <span>{{ item.chartName }}</span>
             <span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span>
           </div>
@@ -158,35 +172,47 @@
 </template>
 
 <script lang="ts" setup name="ViewsBizMyScreenSysSetting">
-import { ref, computed, onMounted } from 'vue';
+  import { ref, computed, onMounted } from 'vue';
-import { ElMessage, ElButton, ElInput } from 'element-plus';
+  import { ElMessage, ElButton, ElInput } from 'element-plus';
-import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
+  import { MyChartInfo, myChartSetting, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
 
-const metric1 = ref([]);
+  type MetricItem = MyChartInfo & {
-const metric2 = ref([]);
+    oldSort?: number;
-const metric3 = ref([]);
+    oldChartId?: string | number | null;
-const metric4 = ref([]);
+  };
-const metric5 = ref([]);
-const metric6 = ref([]);
-const metric7 = ref([]);
-const metric8 = ref([]);
-const metric9 = ref([]);
 
-const gridOriginalChartId = ref({
+  const metric1 = ref<MetricItem[]>([]);
-  1: null, 2: null, 3: null, 4: null,
+  const metric2 = ref<MetricItem[]>([]);
-  5: null, 6: null, 7: null, 8: null, 9: null
+  const metric3 = ref<MetricItem[]>([]);
-});
+  const metric4 = ref<MetricItem[]>([]);
-const metricHistory = ref({});
+  const metric5 = ref<MetricItem[]>([]);
+  const metric6 = ref<MetricItem[]>([]);
+  const metric7 = ref<MetricItem[]>([]);
+  const metric8 = ref<MetricItem[]>([]);
+  const metric9 = ref<MetricItem[]>([]);
 
-const saveLoading = ref(false);
+  const gridOriginalChartId = ref({
-const rawChartData = ref<MyChartInfo[]>();
+    1: null,
-const searchKey = ref('');
+    2: null,
-const dragItem = ref(null);
+    3: null,
+    4: null,
+    5: null,
+    6: null,
+    7: null,
+    8: null,
+    9: null,
+  });
+  const metricHistory = ref({});
 
-const allMetricList = computed({
+  const saveLoading = ref(false);
+  const rawChartData = ref<MyChartInfo[]>([]);
+  const searchKey = ref('');
+  const dragItem = ref<MetricItem | null>(null);
+
+  const allMetricList = computed({
     get() {
       if (!rawChartData.value || !Array.isArray(rawChartData.value)) return [];
-    return rawChartData.value.filter(item => {
+      return rawChartData.value.filter((item) => {
         if (!item || !item.chartName) return false;
         const searchVal = searchKey.value ? searchKey.value.toLowerCase() : '';
         const nameVal = item.chartName ? item.chartName.toLowerCase() : '';
@@ -195,26 +221,21 @@ const allMetricList = computed({
     },
     set(val) {
       rawChartData.value = val;
-  }
+    },
-});
+  });
 
-const getAllMetricArrays = () => ([
+  const getAllMetricArrays = () => [metric1, metric2, metric3, metric4, metric5, metric6, metric7, metric8, metric9];
-  metric1, metric2, metric3, metric4, 
-  metric5, metric6, metric7, metric8, metric9
-]);
 
-const getMetricArrByGridNum = (gridNum) => {
+  const getMetricArrByGridNum = (gridNum: number) => {
     return getAllMetricArrays()[gridNum - 1];
-};
+  };
 
-const isMetricUsed = (metricId) => {
+  const isMetricUsed = (metricId: string) => {
     if (!metricId) return false;
-  return getAllMetricArrays().some(
+    return getAllMetricArrays().some((metricArr) => metricArr.value.some((m) => m && m.chartId === metricId));
-    metricArr => metricArr.value.some(m => m && m.chartId === metricId)
+  };
-  );
-};
 
-const findGridNumByChartId = (chartId) => {
+  const findGridNumByChartId = (chartId: string) => {
     const arr = getAllMetricArrays();
     for (let i = 0; i < arr.length; i++) {
       if (arr[i].value.length && arr[i].value[0].chartId === chartId) {
@@ -222,19 +243,19 @@ const findGridNumByChartId = (chartId) => {
       }
     }
     return null;
-};
+  };
 
-const handleDragStart = (e, item) => {
+  const handleDragStart = (e, item) => {
     dragItem.value = item;
     e.dataTransfer.setData('text/plain', JSON.stringify(item));
     e.target.style.opacity = '0.6';
-};
+  };
 
-const handleDragEnd = (e) => {
+  const handleDragEnd = (e) => {
     e.target.style.opacity = '1';
-};
+  };
 
-const handleDrop = (e, targetGrid) => {
+  const handleDrop = (e, targetGrid) => {
     e.preventDefault();
     if (!dragItem.value) return;
 
@@ -247,7 +268,7 @@ const handleDrop = (e, targetGrid) => {
     getAllMetricArrays().forEach((arr, index) => {
       const gridNum = index + 1;
       if (gridNum !== targetGrid) {
-      arr.value = arr.value.filter(i => i.chartId !== dragChartId);
+        arr.value = arr.value.filter((i) => i.chartId !== dragChartId);
       }
     });
 
@@ -266,30 +287,31 @@ const handleDrop = (e, targetGrid) => {
     }
 
     dragItem.value = null;
-};
+  };
 
-const handleDeleteMetric = (gridNum) => {
+  const handleDeleteMetric = (gridNum) => {
     const targetArr = getMetricArrByGridNum(gridNum);
     if (targetArr) {
       targetArr.value = [];
     }
-};
+  };
 
-const handleReset = () => {
+  const handleReset = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
     searchKey.value = '';
     getChartList();
     ElMessage.info('已重置所有指标');
-};
+  };
 
-const handleClearAll = () => {
+  const handleClearAll = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
     ElMessage.info('已清空所有格子');
-};
+  };
 
-const handleSave = async () => {
+  const handleSave = async () => {
     saveLoading.value = true;
-  const saveData = getAllMetricArrays().map((arr, index) => {
+    const saveData = getAllMetricArrays()
+      .map((arr, index) => {
         const gridNum = index + 1;
         const currentItem = arr.value[0];
         return {
@@ -299,12 +321,13 @@ const handleSave = async () => {
           chartName: currentItem?.chartName || '',
           chartCode: 'sys',
           oldSort: currentItem?.oldSort || gridNum,
-      color: currentItem?.color || ''
+          color: currentItem?.color || '',
         };
-  }).filter(item => item.chartId);
+      })
+      .filter((item) => item.chartId);
 
     try {
-    const res = await getChartSetting(saveData);
+      const res = await myChartSetting(saveData);
       ElMessage.success(res?.msg);
       return saveData;
     } catch (error) {
@@ -313,35 +336,37 @@ const handleSave = async () => {
       getChartList();
       saveLoading.value = false;
     }
-};
+  };
 
-const getRandomColor = () => {
+  const getRandomColor = () => {
     const colors = ['#3c9cff', '#5ac8fa', '#9254de', '#f7ba2a', '#ff7d00', '#23c8c8', '#ff6b6b', '#86909c', '#7b68ee'];
     return colors[Math.floor(Math.random() * colors.length)];
-};
+  };
 
-async function getChartList() {
+  async function getChartList() {
     try {
       const reqParams = { chartCode: 'sys' };
       const res = await myChartInfoListAll(reqParams);
       rawChartData.value = res || [];
       metricHistory.value = {};
-    Object.keys(gridOriginalChartId.value).forEach(key => {
+      Object.keys(gridOriginalChartId.value).forEach((key) => {
         gridOriginalChartId.value[key] = null;
       });
-    rawChartData.value.forEach(item => {
+      rawChartData.value.forEach((item) => {
         const sortNum = item.sort || 0;
         if (sortNum >= 1 && sortNum <= 9) {
           const targetArr = getMetricArrByGridNum(sortNum);
           if (targetArr) {
             gridOriginalChartId.value[sortNum] = item.chartId;
-          targetArr.value = [{
+            targetArr.value = [
+              {
                 ...item,
                 sort: sortNum,
                 oldSort: 0,
                 chartId: item.chartId,
-            oldChartId: item.chartId
+                oldChartId: item.chartId,
-          }];
+              },
+            ];
             metricHistory.value[item.chartId] = sortNum;
           }
         }
@@ -350,16 +375,16 @@ async function getChartList() {
       console.error('获取数据失败:', error);
       rawChartData.value = [];
     }
-}
+  }
 
-// 初始化加载数据
+  // 初始化加载数据
-onMounted(async () => {
+  onMounted(async () => {
     await getChartList();
-});
+  });
 </script>
 
 <style scoped>
-.work-layout-container {
+  .work-layout-container {
     width: 100%;
     height: 100%;
     display: flex;
@@ -370,26 +395,26 @@ onMounted(async () => {
     box-sizing: border-box;
     background-color: #0a1a33;
     overflow: hidden;
-}
+  }
 
-.main-wrapper {
+  .main-wrapper {
     display: flex;
     width: 100%;
     height: 100%;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.left-area {
+  .left-area {
     width: calc(85% - 1px);
     height: 100%;
     display: flex;
     flex-direction: column;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.right-area {
+  .right-area {
     width: calc(15% - 1px);
     height: 100%;
     background-color: rgba(15, 52, 96, 0.5);
@@ -400,36 +425,36 @@ onMounted(async () => {
     flex-direction: column;
     box-sizing: border-box;
     overflow: hidden;
-}
+  }
 
-.work-top-header {
+  .work-top-header {
     height: calc(6% - 1px);
     box-sizing: border-box;
-}
+  }
 
-.work-main-section {
+  .work-main-section {
     height: calc(94% - 1px);
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.layout-row {
+  .layout-row {
     width: 100%;
     display: flex;
     gap: 2px;
     box-sizing: border-box;
     height: calc(100% / 3);
-}
+  }
 
-.work-col-1-3 {
+  .work-col-1-3 {
     width: calc(100% / 3);
     box-sizing: border-box;
-}
+  }
 
-.full-height-card {
+  .full-height-card {
     width: 100%;
     height: 100%;
     background-color: rgba(15, 52, 96, 0.3);
@@ -443,16 +468,16 @@ onMounted(async () => {
     color: #e0e6ff;
     overflow: hidden;
     position: relative;
-}
+  }
 
-.work-section {
+  .work-section {
     width: 100%;
     display: flex;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.chart-top-inner {
+  .chart-top-inner {
     width: 100%;
     height: 100%;
     display: flex;
@@ -461,28 +486,28 @@ onMounted(async () => {
     padding: 0 16px;
     color: #e0e6ff;
     box-sizing: border-box;
-}
+  }
 
-.chart-top-inner h2 {
+  .chart-top-inner h2 {
     font-size: 16px;
     margin: 0;
     font-weight: 600;
-}
+  }
 
-.btn-group {
+  .btn-group {
     display: flex;
     gap: 8px;
-}
+  }
 
-.work-col {
+  .work-col {
     height: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     gap: 2px;
-}
+  }
 
-.work-card {
+  .work-card {
     width: 100%;
     background-color: rgba(15, 52, 96, 0.3);
     border: 1px solid #1a508b;
@@ -495,15 +520,15 @@ onMounted(async () => {
     color: #e0e6ff;
     overflow: hidden;
     position: relative;
-}
+  }
 
-.full-card {
+  .full-card {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-}
+  }
 
-.delete-icon {
+  .delete-icon {
     position: absolute;
     top: 6px;
     right: 6px;
@@ -519,14 +544,14 @@ onMounted(async () => {
     background-color: rgba(255, 107, 107, 0.1);
     z-index: 10;
     transition: all 0.2s ease;
-}
+  }
 
-.delete-icon:hover {
+  .delete-icon:hover {
     background-color: rgba(255, 107, 107, 0.3);
     transform: scale(1.1);
-}
+  }
 
-.grid-content {
+  .grid-content {
     width: 100%;
     height: 100%;
     display: flex;
@@ -535,9 +560,9 @@ onMounted(async () => {
     padding: 8px;
     box-sizing: border-box;
     cursor: drop;
-}
+  }
 
-.metric-tag {
+  .metric-tag {
     padding: 0;
     background: none;
     color: #e0e6ff;
@@ -547,16 +572,16 @@ onMounted(async () => {
     display: flex;
     flex-direction: column;
     align-items: center;
-}
+  }
 
-.sort-num {
+  .sort-num {
     font-size: 14px;
     color: #88a0c2;
     margin-bottom: 4px;
     display: block;
-}
+  }
 
-.empty-tip {
+  .empty-tip {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -564,41 +589,41 @@ onMounted(async () => {
     color: #88a0c2;
     font-size: 14px;
     pointer-events: none;
-}
+  }
 
-.search-box {
+  .search-box {
     padding: 4px 0;
     margin-bottom: 8px;
     box-sizing: border-box;
-}
+  }
 
-.metric-list {
+  .metric-list {
     flex: 1;
     overflow-y: auto;
     padding: 4px;
     box-sizing: border-box;
     scrollbar-width: thin;
     scrollbar-color: rgba(60, 156, 255, 0.2) transparent;
-}
+  }
 
-.metric-list::-webkit-scrollbar {
+  .metric-list::-webkit-scrollbar {
     width: 1px;
-}
+  }
 
-.metric-list::-webkit-scrollbar-track {
+  .metric-list::-webkit-scrollbar-track {
     background: transparent;
-}
+  }
 
-.metric-list::-webkit-scrollbar-thumb {
+  .metric-list::-webkit-scrollbar-thumb {
     background: rgba(60, 156, 255, 0.2);
     border-radius: 0.5px;
-}
+  }
 
-.metric-list::-webkit-scrollbar-thumb:hover {
+  .metric-list::-webkit-scrollbar-thumb:hover {
     background: rgba(60, 156, 255, 0.4);
-}
+  }
 
-.metric-item {
+  .metric-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -610,21 +635,21 @@ onMounted(async () => {
     font-size: 14px;
     box-sizing: border-box;
     transition: all 0.2s ease;
-}
+  }
 
-.metric-item.active {
+  .metric-item.active {
     background-color: rgba(60, 156, 255, 0.3);
     border: 1px solid #3c9cff;
-}
+  }
 
-.metric-item:hover {
+  .metric-item:hover {
     background-color: rgba(60, 156, 255, 0.15);
-}
+  }
 
-.color-dot {
+  .color-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     margin-left: 6px;
-}
+  }
 </style>

web-vue/packages/core/layouts/screen/setting/components/Work.vue

@@ -7,7 +7,14 @@
             <div class="chart-top-inner">
               <h2>工作可视化大屏指标配置</h2>
               <div class="btn-group">
-                <el-button type="primary" size="default" @click="handleSave" :loading="saveLoading" :disabled="saveLoading">保存</el-button>
+                <el-button
+                  type="primary"
+                  size="default"
+                  @click="handleSave"
+                  :loading="saveLoading"
+                  :disabled="saveLoading"
+                  >保存</el-button
+                >
                 <el-button type="warning" size="default" @click="handleReset">重置</el-button>
                 <el-button type="danger" size="default" @click="handleClearAll">清空</el-button>
               </div>
@@ -20,33 +27,33 @@
               <span v-if="metric1.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(1)">×</span>
               <div class="grid-content" @drop="(e) => handleDrop(e, 1)" @dragover="(e) => e.preventDefault()">
                 <div v-if="metric1.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{1}}</span>
+                  <span class="sort-num">指标{{ 1 }}</span>
                   {{ metric1[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric1[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric1[0].chartId }}</small>
                 </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{1}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 1 }}）</div>
               </div>
             </div>
             <div class="work-card work-card-1-3">
               <span v-if="metric2.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(2)">×</span>
               <div class="grid-content" @drop="(e) => handleDrop(e, 2)" @dragover="(e) => e.preventDefault()">
                 <div v-if="metric2.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{2}}</span>
+                  <span class="sort-num">指标{{ 2 }}</span>
                   {{ metric2[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric2[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric2[0].chartId }}</small>
                 </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{2}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 2 }}）</div>
               </div>
             </div>
             <div class="work-card work-card-1-3">
               <span v-if="metric3.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(3)">×</span>
               <div class="grid-content" @drop="(e) => handleDrop(e, 3)" @dragover="(e) => e.preventDefault()">
                 <div v-if="metric3.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{3}}</span>
+                  <span class="sort-num">指标{{ 3 }}</span>
                   {{ metric3[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric3[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric3[0].chartId }}</small>
                 </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{3}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 3 }}）</div>
               </div>
             </div>
           </div>
@@ -55,22 +62,22 @@
               <span v-if="metric4.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(4)">×</span>
               <div class="grid-content" @drop="(e) => handleDrop(e, 4)" @dragover="(e) => e.preventDefault()">
                 <div v-if="metric4.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{4}}</span>
+                  <span class="sort-num">指标{{ 4 }}</span>
                   {{ metric4[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric4[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric4[0].chartId }}</small>
                 </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{4}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 4 }}）</div>
               </div>
             </div>
             <div class="work-card work-card-1-3">
               <span v-if="metric5.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(5)">×</span>
               <div class="grid-content" @drop="(e) => handleDrop(e, 5)" @dragover="(e) => e.preventDefault()">
                 <div v-if="metric5.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{5}}</span>
+                  <span class="sort-num">指标{{ 5 }}</span>
                   {{ metric5[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric5[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric5[0].chartId }}</small>
                 </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{5}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 5 }}）</div>
               </div>
             </div>
           </div>
@@ -79,33 +86,33 @@
               <span v-if="metric6.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(6)">×</span>
               <div class="grid-content" @drop="(e) => handleDrop(e, 6)" @dragover="(e) => e.preventDefault()">
                 <div v-if="metric6.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{6}}</span>
+                  <span class="sort-num">指标{{ 6 }}</span>
                   {{ metric6[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric6[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric6[0].chartId }}</small>
                 </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{6}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 6 }}）</div>
               </div>
             </div>
             <div class="work-card work-card-1-3">
               <span v-if="metric7.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(7)">×</span>
               <div class="grid-content" @drop="(e) => handleDrop(e, 7)" @dragover="(e) => e.preventDefault()">
                 <div v-if="metric7.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{7}}</span>
+                  <span class="sort-num">指标{{ 7 }}</span>
                   {{ metric7[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric7[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric7[0].chartId }}</small>
                 </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{7}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 7 }}）</div>
               </div>
             </div>
             <div class="work-card work-card-1-3">
               <span v-if="metric8.length > 0" class="delete-icon" @click.stop="handleDeleteMetric(8)">×</span>
               <div class="grid-content" @drop="(e) => handleDrop(e, 8)" @dragover="(e) => e.preventDefault()">
                 <div v-if="metric8.length > 0" class="metric-tag">
-                  <span class="sort-num">指标{{8}}</span>
+                  <span class="sort-num">指标{{ 8 }}</span>
                   {{ metric8[0].chartName }}
-                  <small style="font-size:12px; color:#88a0c2;">ID: {{ metric8[0].chartId }}</small>
+                  <small style="font-size: 12px; color: #88a0c2">ID: {{ metric8[0].chartId }}</small>
                 </div>
-                <div v-else class="empty-tip">拖拽指标到此处（指标{{8}}）</div>
+                <div v-else class="empty-tip">拖拽指标到此处（指标{{ 8 }}）</div>
               </div>
             </div>
           </div>
@@ -116,7 +123,15 @@
           <el-input v-model="searchKey" placeholder="搜索指标项..." size="default"></el-input>
         </div>
         <div class="metric-list">
-          <div v-for="item in allMetricList" :key="item.chartId" class="metric-item" :class="{ active: isMetricUsed(item.chartId) }" draggable="true" @dragstart="(e) => handleDragStart(e, item)" @dragend="handleDragEnd">
+          <div
+            v-for="item in allMetricList"
+            :key="item.chartId"
+            class="metric-item"
+            :class="{ active: isMetricUsed(item.chartId) }"
+            draggable="true"
+            @dragstart="(e) => handleDragStart(e, item)"
+            @dragend="handleDragEnd"
+          >
             <span>{{ item.chartName }}</span>
             <span class="color-dot" :style="{ backgroundColor: item.color || getRandomColor() }"></span>
           </div>
@@ -127,34 +142,45 @@
 </template>
 
 <script lang="ts" setup name="ViewsBizMyScreenWorkSetting">
-import { ref, computed, onMounted } from 'vue';
+  import { ref, computed, onMounted } from 'vue';
-import { ElMessage } from 'element-plus';
+  import { ElMessage } from 'element-plus';
-import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
+  import { MyChartInfo, myChartSetting, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
 
-const metric1 = ref([]);
+  type MetricItem = MyChartInfo & {
-const metric2 = ref([]);
+    oldSort?: number;
-const metric3 = ref([]);
+    oldChartId?: string | number | null;
-const metric4 = ref([]);
+  };
-const metric5 = ref([]);
-const metric6 = ref([]);
-const metric7 = ref([]);
-const metric8 = ref([]);
 
-const gridOriginalChartId = ref({
+  const metric1 = ref<MetricItem[]>([]);
-  1: null, 2: null, 3: null, 4: null,
+  const metric2 = ref<MetricItem[]>([]);
-  5: null, 6: null, 7: null, 8: null
+  const metric3 = ref<MetricItem[]>([]);
-});
+  const metric4 = ref<MetricItem[]>([]);
-const metricHistory = ref({});
+  const metric5 = ref<MetricItem[]>([]);
+  const metric6 = ref<MetricItem[]>([]);
+  const metric7 = ref<MetricItem[]>([]);
+  const metric8 = ref<MetricItem[]>([]);
 
-const saveLoading = ref(false);
+  const gridOriginalChartId = ref({
-const rawChartData = ref<MyChartInfo[]>();
+    1: null,
-const searchKey = ref('');
+    2: null,
-const dragItem = ref(null);
+    3: null,
+    4: null,
+    5: null,
+    6: null,
+    7: null,
+    8: null,
+  });
+  const metricHistory = ref({});
 
-const allMetricList = computed({
+  const saveLoading = ref(false);
+  const rawChartData = ref<MyChartInfo[]>([]);
+  const searchKey = ref('');
+  const dragItem = ref<MetricItem | null>(null);
+
+  const allMetricList = computed({
     get() {
       if (!rawChartData.value || !Array.isArray(rawChartData.value)) return [];
-    return rawChartData.value.filter(item => {
+      return rawChartData.value.filter((item) => {
         if (!item || !item.chartName) return false;
         const searchVal = searchKey.value ? searchKey.value.toLowerCase() : '';
         const nameVal = item.chartName ? item.chartName.toLowerCase() : '';
@@ -163,26 +189,21 @@ const allMetricList = computed({
     },
     set(val) {
       rawChartData.value = val;
-  }
+    },
-});
+  });
 
-const getAllMetricArrays = () => ([
+  const getAllMetricArrays = () => [metric1, metric2, metric3, metric4, metric5, metric6, metric7, metric8];
-  metric1, metric2, metric3, metric4, 
-  metric5, metric6, metric7, metric8
-]);
 
-const getMetricArrByGridNum = (gridNum) => {
+  const getMetricArrByGridNum = (gridNum: number) => {
     return getAllMetricArrays()[gridNum - 1];
-};
+  };
 
-const isMetricUsed = (metricId) => {
+  const isMetricUsed = (metricId: string) => {
     if (!metricId) return false;
-  return getAllMetricArrays().some(
+    return getAllMetricArrays().some((metricArr) => metricArr.value.some((m) => m && m.chartId === metricId));
-    metricArr => metricArr.value.some(m => m && m.chartId === metricId)
+  };
-  );
-};
 
-const findGridNumByChartId = (chartId) => {
+  const findGridNumByChartId = (chartId: string) => {
     const arr = getAllMetricArrays();
     for (let i = 0; i < arr.length; i++) {
       if (arr[i].value.length && arr[i].value[0].chartId === chartId) {
@@ -190,19 +211,19 @@ const findGridNumByChartId = (chartId) => {
       }
     }
     return null;
-};
+  };
 
-const handleDragStart = (e, item) => {
+  const handleDragStart = (e, item) => {
     dragItem.value = item;
     e.dataTransfer.setData('text/plain', JSON.stringify(item));
     e.target.style.opacity = '0.6';
-};
+  };
 
-const handleDragEnd = (e) => {
+  const handleDragEnd = (e) => {
     e.target.style.opacity = '1';
-};
+  };
 
-const handleDrop = (e, targetGrid) => {
+  const handleDrop = (e, targetGrid) => {
     e.preventDefault();
     if (!dragItem.value) return;
     const dragChartId = dragItem.value.chartId;
@@ -213,7 +234,7 @@ const handleDrop = (e, targetGrid) => {
     getAllMetricArrays().forEach((arr, index) => {
       const gridNum = index + 1;
       if (gridNum !== targetGrid) {
-      arr.value = arr.value.filter(i => i.chartId !== dragChartId);
+        arr.value = arr.value.filter((i) => i.chartId !== dragChartId);
       }
     });
 
@@ -234,30 +255,31 @@ const handleDrop = (e, targetGrid) => {
     }
 
     dragItem.value = null;
-};
+  };
 
-const handleDeleteMetric = (gridNum) => {
+  const handleDeleteMetric = (gridNum) => {
     const targetArr = getMetricArrByGridNum(gridNum);
     if (targetArr) {
       targetArr.value = [];
     }
-};
+  };
 
-const handleReset = () => {
+  const handleReset = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
     searchKey.value = '';
     getChartList();
     ElMessage.info('已重置所有指标');
-};
+  };
 
-const handleClearAll = () => {
+  const handleClearAll = () => {
-  getAllMetricArrays().forEach(arr => arr.value = []);
+    getAllMetricArrays().forEach((arr) => (arr.value = []));
     ElMessage.info('已清空所有格子');
-};
+  };
 
-const handleSave = async () => {
+  const handleSave = async () => {
     saveLoading.value = true;
-  const saveData = getAllMetricArrays().map((arr, index) => {
+    const saveData = getAllMetricArrays()
+      .map((arr, index) => {
         const gridNum = index + 1;
         const currentItem = arr.value[0];
         return {
@@ -267,50 +289,53 @@ const handleSave = async () => {
           chartName: currentItem?.chartName || '',
           chartCode: 'work',
           oldSort: currentItem?.oldSort || gridNum,
-      color: currentItem?.color || ''
+          color: currentItem?.color || '',
         };
-  }).filter(item => item.chartId);
+      })
+      .filter((item) => item.chartId);
 
     try {
-    const res = await getChartSetting(saveData);
+      const res = await myChartSetting(saveData);
       ElMessage.success(res?.msg);
       return saveData;
     } catch (error) {
       console.error('保存失败：', error);
     } finally {
-	getChartList()
+      getChartList();
       saveLoading.value = false;
     }
-};
+  };
 
-const getRandomColor = () => {
+  const getRandomColor = () => {
     const colors = ['#3c9cff', '#5ac8fa', '#9254de', '#f7ba2a', '#ff7d00', '#23c8c8', '#ff6b6b', '#86909c'];
     return colors[Math.floor(Math.random() * colors.length)];
-};
+  };
 
-async function getChartList() {
+  async function getChartList() {
     try {
       const reqParams = { chartCode: 'work' };
       const res = await myChartInfoListAll(reqParams);
       rawChartData.value = res || [];
       metricHistory.value = {};
-    Object.keys(gridOriginalChartId.value).forEach(key => {
+      Object.keys(gridOriginalChartId.value).forEach((key) => {
         gridOriginalChartId.value[key] = null;
       });
 
-    rawChartData.value.forEach(item => {
+      rawChartData.value.forEach((item) => {
         const sortNum = item.sort || 0;
         if (sortNum >= 1 && sortNum <= 8) {
           const targetArr = getMetricArrByGridNum(sortNum);
           if (targetArr) {
             gridOriginalChartId.value[sortNum] = item.chartId;
-          targetArr.value = [{
+            targetArr.value = [
+              {
                 ...item,
                 sort: sortNum,
                 oldSort: 0,
                 chartId: item.chartId,
-            oldChartId: item.chartId
+                oldChartId: item.chartId,
-          }];
+              },
+            ];
             metricHistory.value[item.chartId] = sortNum;
           }
         }
@@ -319,15 +344,15 @@ async function getChartList() {
       console.error('获取数据失败:', error);
       rawChartData.value = [];
     }
-}
+  }
 
-onMounted(async () => {
+  onMounted(async () => {
     await getChartList();
-});
+  });
 </script>
 
 <style scoped>
-.work-layout-container {
+  .work-layout-container {
     width: 100%;
     height: 100%;
     display: flex;
@@ -338,26 +363,26 @@ onMounted(async () => {
     box-sizing: border-box;
     background-color: #0a1a33;
     overflow: hidden;
-}
+  }
 
-.main-wrapper {
+  .main-wrapper {
     display: flex;
     width: 100%;
     height: 100%;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.left-area {
+  .left-area {
     width: calc(85% - 1px);
     height: 100%;
     display: flex;
     flex-direction: column;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.right-area {
+  .right-area {
     width: calc(15% - 1px);
     height: 100%;
     background-color: rgba(15, 52, 96, 0.5);
@@ -368,26 +393,26 @@ onMounted(async () => {
     flex-direction: column;
     box-sizing: border-box;
     overflow: hidden;
-}
+  }
 
-.work-top-header {
+  .work-top-header {
     height: calc(6% - 1px);
     box-sizing: border-box;
-}
+  }
 
-.work-main-section {
+  .work-main-section {
     height: calc(94% - 1px);
     box-sizing: border-box;
-}
+  }
 
-.work-section {
+  .work-section {
     width: 100%;
     display: flex;
     gap: 2px;
     box-sizing: border-box;
-}
+  }
 
-.chart-top-inner {
+  .chart-top-inner {
     width: 100%;
     height: 100%;
     display: flex;
@@ -396,33 +421,33 @@ onMounted(async () => {
     padding: 0 16px;
     color: #e0e6ff;
     box-sizing: border-box;
-}
+  }
 
-.chart-top-inner h2 {
+  .chart-top-inner h2 {
     font-size: 16px;
     margin: 0;
     font-weight: 600;
-}
+  }
 
-.btn-group {
+  .btn-group {
     display: flex;
     gap: 8px;
-}
+  }
 
-.work-col {
+  .work-col {
     height: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     gap: 2px;
-}
+  }
 
-.work-col-1-3 {
+  .work-col-1-3 {
     width: calc(100% / 3 - 2px);
     box-sizing: border-box;
-}
+  }
 
-.work-card {
+  .work-card {
     width: 100%;
     background-color: rgba(15, 52, 96, 0.3);
     border: 1px solid #1a508b;
@@ -435,23 +460,23 @@ onMounted(async () => {
     color: #e0e6ff;
     overflow: hidden;
     position: relative;
-}
+  }
 
-.work-card-1-3 {
+  .work-card-1-3 {
     height: calc(100% / 3 - 2px);
-}
+  }
 
-.work-card-2-3 {
+  .work-card-2-3 {
     height: calc(200% / 3 - 2px);
-}
+  }
 
-.full-card {
+  .full-card {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-}
+  }
 
-.delete-icon {
+  .delete-icon {
     position: absolute;
     top: 6px;
     right: 6px;
@@ -467,14 +492,14 @@ onMounted(async () => {
     background-color: rgba(255, 107, 107, 0.1);
     z-index: 10;
     transition: all 0.2s ease;
-}
+  }
 
-.delete-icon:hover {
+  .delete-icon:hover {
     background-color: rgba(255, 107, 107, 0.3);
     transform: scale(1.1);
-}
+  }
 
-.grid-content {
+  .grid-content {
     width: 100%;
     height: 100%;
     display: flex;
@@ -483,9 +508,9 @@ onMounted(async () => {
     padding: 8px;
     box-sizing: border-box;
     cursor: drop;
-}
+  }
 
-.metric-tag {
+  .metric-tag {
     padding: 0;
     background: none;
     color: #e0e6ff;
@@ -495,16 +520,16 @@ onMounted(async () => {
     display: flex;
     flex-direction: column;
     align-items: center;
-}
+  }
 
-.sort-num {
+  .sort-num {
     font-size: 14px;
     color: #88a0c2;
     margin-bottom: 4px;
     display: block;
-}
+  }
 
-.empty-tip {
+  .empty-tip {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -512,41 +537,41 @@ onMounted(async () => {
     color: #88a0c2;
     font-size: 14px;
     pointer-events: none;
-}
+  }
 
-.search-box {
+  .search-box {
     padding: 4px 0;
     margin-bottom: 8px;
     box-sizing: border-box;
-}
+  }
 
-.metric-list {
+  .metric-list {
     flex: 1;
     overflow-y: auto;
     padding: 4px;
     box-sizing: border-box;
     scrollbar-width: thin;
     scrollbar-color: rgba(60, 156, 255, 0.2) transparent;
-}
+  }
 
-.metric-list::-webkit-scrollbar {
+  .metric-list::-webkit-scrollbar {
     width: 1px;
-}
+  }
 
-.metric-list::-webkit-scrollbar-track {
+  .metric-list::-webkit-scrollbar-track {
     background: transparent;
-}
+  }
 
-.metric-list::-webkit-scrollbar-thumb {
+  .metric-list::-webkit-scrollbar-thumb {
     background: rgba(60, 156, 255, 0.2);
     border-radius: 0.5px;
-}
+  }
 
-.metric-list::-webkit-scrollbar-thumb:hover {
+  .metric-list::-webkit-scrollbar-thumb:hover {
     background: rgba(60, 156, 255, 0.4);
-}
+  }
 
-.metric-item {
+  .metric-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -558,21 +583,21 @@ onMounted(async () => {
     font-size: 14px;
     box-sizing: border-box;
     transition: all 0.2s ease;
-}
+  }
 
-.metric-item.active {
+  .metric-item.active {
     background-color: rgba(60, 156, 255, 0.3);
     border: 1px solid #3c9cff;
-}
+  }
 
-.metric-item:hover {
+  .metric-item:hover {
     background-color: rgba(60, 156, 255, 0.15);
-}
+  }
 
-.color-dot {
+  .color-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     margin-left: 6px;
-}
+  }
 </style>

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

@@ -9,25 +9,21 @@
       <el-form :model="searchForm" class="search-form">
         <div class="form-items-wrapper">
           <el-form-item label="交易名称：" class="form-item">
-            <el-input
+            <el-input v-model="searchForm.flowName" placeholder="请输入交易名称" clearable />
-              v-model="searchForm.flowName"
-              placeholder="请输入交易名称"
-              clearable
-            />
           </el-form-item>
           <el-form-item label="交易类型：" class="form-item">
             <el-select
-		      v-model="searchForm.transactionType"
+              v-model="searchForm.flowType"
               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-option label="转账" value="0" />
             </el-select>
           </el-form-item>
           <el-form-item label="交易分类：" class="form-item">
@@ -36,7 +32,6 @@
               placeholder="请选择交易分类"
               clearable
               class="custom-select"
-              teleport="body"
               popper-class="theme-select-popper"
               :popper-append-to-body="true"
             >
@@ -70,36 +65,40 @@
             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="{
             background: 'transparent',
             color: '#a0cfff',
-            border: 'none'
+            border: 'none',
           }"
           :cell-style="{
             border: 'none',
-            borderBottom: '1px solid rgba(64, 158, 255, 0.2)'
+            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="flowType" label="交易类型" width="120">
-          <el-table-column prop="amount" label="交易金额">
             <template #default="scope">
-              ¥{{ scope.row.amount }}
+              {{ getFlowTypeLabel(scope.row.flowType) }}
             </template>
           </el-table-column>
+          <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="transactionTime" 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,81 +113,92 @@
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
-import { defineProps, defineEmits, ref, onMounted, reactive } from 'vue'
+  import { defineProps, defineEmits, ref, onMounted, reactive } from 'vue';
-import { ElMessage } from 'element-plus'
+  import { ElMessage } from 'element-plus';
-// import { getErpCategoryList, getErpTransactionFlowList } from '@/api/bizApi'
+  import { ErpCategory, erpCategoryListAll } from '@jeesite/erp/api/erp/category';
+  import { ErpTransactionFlow, erpTransactionPageFlowList } from '@jeesite/erp/api/erp/transactionFlow';
 
-const props = defineProps({
+  const props = defineProps({
     accountData: {
       type: Object,
-    default: () => ({})
+      default: () => ({}),
-  }
+    },
-})
+  });
 
-const emit = defineEmits(['close'])
+  const emit = defineEmits(['close']);
-const handleClose = () => emit('close')
+  const handleClose = () => emit('close');
 
-const tranTypes = ref();
+  const flowTypeDict: Record<string, string> = {
-const loading = ref(false);
+    '0': '转账',
+    '1': '支出',
+    '2': '收入',
+  };
 
-const searchForm = reactive({
+  const getFlowTypeLabel = (flowType?: string | number) => {
+    return flowTypeDict[String(flowType ?? '')] || '-';
+  };
+
+  const tranTypes = ref();
+  const loading = ref(false);
+
+  const searchForm = reactive({
     flowName: '',
-  transactionType: '',
+    flowType: '',
     categoryId: '',
-})
+  });
 
-const tableData = ref([]);
+  const tableData = ref<ErpTransactionFlow[]>();
-const currentPage = ref(1);
+  const currentPage = ref(1);
-const pageSize = ref(20);
+  const pageSize = ref(20);
-const total = ref(0);
+  const total = ref(0);
 
-const handleSearch = () => {
+  const handleSearch = () => {
     getList();
-}
+  };
 
-const handleReset = () => {
+  const handleReset = () => {
     Object.assign(searchForm, {
       flowName: '',
-    transactionType: '', 
+      flowType: '',
       categoryId: '',
-  })
+    });
     currentPage.value = 1;
     getList();
-}
+  };
 
-const handleSizeChange = (val) => {
+  const handleSizeChange = (val: number) => {
     pageSize.value = val;
     getList();
-}
+  };
-const handleCurrentChange = (val) => {
+  const handleCurrentChange = (val: number) => {
     currentPage.value = val;
     getList();
-}
+  };
 
-async function getTranTypes(){
+  async function getTranTypes() {
     try {
       const params = {
-		 categoryType: searchForm.transactionType,
+        categoryType: searchForm.flowType,
-	 }
+      };
-	  const res = await getErpCategoryList(params);
+      const res = await erpCategoryListAll(params);
       tranTypes.value = res || [];
     } catch (error) {
       console.error('获取数据失败:', error);
       tranTypes.value = [];
     }
-}
+  }
 
-async function getList() {
+  async function getList() {
     loading.value = true;
     try {
       const reqParmas = {
-		  ... searchForm,
+        ...searchForm,
         pageNum: currentPage.value,
         pageSize: pageSize.value,
         accountId: props.accountData.rawData?.accountId || '',
-	  }
+      };
-	  const res = await getErpTransactionFlowList(reqParmas);
+      const res = await erpTransactionPageFlowList(reqParmas);
       total.value = res.total;
       tableData.value = res.list || [];
     } catch (error) {
@@ -197,42 +207,54 @@ async function getList() {
     } finally {
       loading.value = false;
     }
-}
+  }
 
-onMounted(async () => {
+  onMounted(async () => {
     await getList();
     await getTranTypes();
-})
+  });
 </script>
 
 <style scoped>
-.detail-container {
+  .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;
+    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);
+  }
 
-.detail-header {
+  .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;
+  }
+
+  .detail-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
-}
+    position: relative;
-.detail-header h3 {
+    z-index: 1;
+  }
+  .detail-header h3 {
     margin: 0;
-  color: #409EFF;
+    color: #409eff;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
     font-size: 18px;
-}
+  }
-.close-btn {
+  .close-btn {
     background: transparent;
     border: none;
     font-size: 24px;
@@ -245,35 +267,35 @@ onMounted(async () => {
     justify-content: center;
     transition: color 0.2s;
     z-index: 10002;
-}
+  }
-.close-btn:hover {
+  .close-btn:hover {
-  color: #409EFF;
+    color: #409eff;
-}
+  }
 
-.split-line {
+  .split-line {
     height: 1px;
-  background-color: #409EFF;
+    background-color: #409eff;
     opacity: 0.6;
     margin-bottom: 16px;
-}
+  }
 
-.detail-body {
+  .detail-body {
     width: 100%;
     height: calc(100% - 80px);
-  border: 1px solid #409EFF;
+    border: 1px solid #409eff;
     border-radius: 6px;
     padding: 16px;
-  background-color: rgba(10, 30, 60, 0.2);
+    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: 10001;
+    z-index: 1;
-}
+  }
 
-.search-form {
+  .search-form {
     display: flex;
     align-items: center;
     width: 100%;
@@ -282,39 +304,39 @@ onMounted(async () => {
     flex-wrap: wrap;
     position: relative;
     z-index: 10001;
-}
+  }
-.form-items-wrapper {
+  .form-items-wrapper {
     display: flex;
     flex: 1;
     gap: 20px;
     min-width: 0;
     flex-wrap: wrap;
-}
+  }
-.form-item {
+  .form-item {
     flex: 1;
     margin-bottom: 0 !important;
     min-width: 180px;
-}
+  }
-.date-range-item {
+  .date-range-item {
     min-width: 280px !important;
-}
+  }
-.form-btn-group {
+  .form-btn-group {
     margin-left: 20px;
     margin-bottom: 0 !important;
     flex-shrink: 0;
     display: flex;
     gap: 10px;
-}
+  }
 
-.table-container {
+  .table-container {
     flex: 1;
     width: 100%;
     overflow: auto;
     position: relative;
     z-index: 10001;
-}
+  }
 
-.custom-loading {
+  .custom-loading {
     position: absolute;
     top: 0;
     left: 0;
@@ -326,37 +348,37 @@ onMounted(async () => {
     justify-content: center;
     align-items: center;
     z-index: 999;
-}
+  }
 
-.loading-icon {
+  .loading-icon {
     font-size: 24px;
-  color: #409EFF;
+    color: #409eff;
     animation: loading-rotate 2s linear infinite;
     margin-bottom: 8px;
-}
+  }
 
-.loading-text {
+  .loading-text {
     font-size: 14px;
     color: #b4c7e7;
-}
+  }
 
-@keyframes loading-rotate {
+  @keyframes loading-rotate {
     0% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(360deg);
     }
-}
+  }
 
-.data-table {
+  .data-table {
     width: 100%;
     height: 100%;
     position: relative;
     z-index: 1;
-}
+  }
 
-.pagination-wrapper {
+  .pagination-wrapper {
     display: flex;
     justify-content: flex-end;
     align-items: center;
@@ -366,56 +388,56 @@ onMounted(async () => {
     flex-shrink: 0;
     position: relative;
     z-index: 10001;
-}
+  }
 
-:deep(.el-form-item__label) {
+  :deep(.el-form-item__label) {
     color: #e0e6ff !important;
     font-size: 14px;
-}
+  }
-:deep(.el-input__wrapper),
+  :deep(.el-input__wrapper),
-:deep(.el-select__wrapper),
+  :deep(.el-select__wrapper),
-:deep(.el-date-editor__wrapper) {
+  :deep(.el-date-editor__wrapper) {
     background-color: rgba(0, 0, 0, 0.2) !important;
-  border: 1px solid #409EFF !important;
+    border: 1px solid #409eff !important;
     box-shadow: none !important;
     width: 100% !important;
     position: relative;
     z-index: 10001;
-}
+  }
-:deep(.el-input__inner),
+  :deep(.el-input__inner),
-:deep(.el-select__inner),
+  :deep(.el-select__inner),
-:deep(.el-date-editor input) {
+  :deep(.el-date-editor input) {
     color: #e0e6ff !important;
     background-color: transparent !important;
-}
+  }
-:deep(.el-input__placeholder),
+  :deep(.el-input__placeholder),
-:deep(.el-date-editor__placeholder) {
+  :deep(.el-date-editor__placeholder) {
     color: rgba(224, 230, 255, 0.6) !important;
-}
+  }
 
-:deep(.custom-pagination) {
+  :deep(.custom-pagination) {
     --el-pagination-text-color: #e0e6ff;
     --el-pagination-button-color: #e0e6ff;
-  --el-pagination-button-hover-color: #409EFF;
+    --el-pagination-button-hover-color: #409eff;
-  --el-pagination-button-active-color: #409EFF;
+    --el-pagination-button-active-color: #409eff;
-  --el-pagination-border-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) {
+  :deep(.el-pagination button) {
     background-color: rgba(0, 0, 0, 0.2) !important;
-  border-color: #409EFF !important;
+    border-color: #409eff !important;
     color: #e0e6ff !important;
-}
+  }
-:deep(.el-pagination .el-pager li) {
+  :deep(.el-pagination .el-pager li) {
     color: #e0e6ff !important;
-}
+  }
-:deep(.el-pagination .el-pager li.active) {
+  :deep(.el-pagination .el-pager li.active) {
-  color: #409EFF !important;
+    color: #409eff !important;
     font-weight: bold;
-}
+  }
 
-:deep(.el-table) {
+  :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);
@@ -424,127 +446,127 @@ onMounted(async () => {
     background-color: transparent !important;
     border: none !important;
     z-index: 10001;
-}
+  }
-:deep(.el-table th) {
+  :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) {
+  :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) {
+  :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) {
+  :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) {
+  :deep(.el-table tr:last-child td) {
     border-bottom: none !important;
-}
+  }
-:deep(.el-table-empty-text) {
+  :deep(.el-table-empty-text) {
     color: #a0cfff !important;
     background-color: transparent !important;
-}
+  }
 
-:deep(.el-button) {
+  :deep(.el-button) {
     --el-button-text-color: #e0e6ff !important;
-  --el-button-border-color: #409EFF !important;
+    --el-button-border-color: #409eff !important;
     --el-button-hover-text-color: #fff !important;
-  --el-button-hover-border-color: #409EFF !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) {
+  :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-border-color: #409eff !important;
-  --el-button-hover-bg-color: #409EFF !important;
+    --el-button-hover-bg-color: #409eff !important;
-}
+  }
-:deep(.reset-btn) {
+  :deep(.reset-btn) {
     background-color: rgba(0, 0, 0, 0.2) !important;
-  border-color: #409EFF !important;
+    border-color: #409eff !important;
     color: #e0e6ff !important;
-}
+  }
-:deep(.reset-btn:hover) {
+  :deep(.reset-btn:hover) {
     background-color: rgba(64, 158, 255, 0.2) !important;
     color: #fff !important;
-}
+  }
 
-:deep(.el-loading-mask) {
+  :deep(.el-loading-mask) {
     display: none !important;
-}
+  }
 
-.detail-body::-webkit-scrollbar,
+  .detail-body::-webkit-scrollbar,
-:deep(.el-table__body-wrapper)::-webkit-scrollbar,
+  :deep(.el-table__body-wrapper)::-webkit-scrollbar,
-.table-container::-webkit-scrollbar {
+  .table-container::-webkit-scrollbar {
     width: 6px;
     height: 6px;
-}
+  }
-.detail-body::-webkit-scrollbar-track,
+  .detail-body::-webkit-scrollbar-track,
-.table-container::-webkit-scrollbar-track {
+  .table-container::-webkit-scrollbar-track {
     background: rgba(10, 30, 60, 0.1);
     border-radius: 3px;
-}
+  }
-.detail-body::-webkit-scrollbar-thumb,
+  .detail-body::-webkit-scrollbar-thumb,
-.table-container::-webkit-scrollbar-thumb {
+  .table-container::-webkit-scrollbar-thumb {
     background: rgba(64, 158, 255, 0.5);
     border-radius: 3px;
-}
+  }
 </style>
 
 <style>
-.theme-select-popper {
+  .theme-select-popper {
     background-color: rgba(10, 30, 60, 0.95) !important;
-  border: 1px solid #409EFF !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 {
+  .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 {
+  .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 {
+  .theme-select-popper .el-select-dropdown__item.selected {
     background-color: rgba(64, 158, 255, 0.5) !important;
     color: #fff !important;
-}
+  }
 
-.theme-pagination-popper {
+  .theme-pagination-popper {
     background-color: rgba(10, 30, 60, 0.95) !important;
-  border: 1px solid #409EFF !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 {
+  .theme-pagination-popper .el-pagination__sizes-option {
     color: #e0e6ff !important;
     background-color: transparent !important;
-}
+  }
-.theme-pagination-popper .el-pagination__sizes-option:hover {
+  .theme-pagination-popper .el-pagination__sizes-option:hover {
     background-color: rgba(64, 158, 255, 0.2) !important;
     color: #fff !important;
-}
+  }
 
-.modal-overlay {
+  .modal-overlay {
     pointer-events: auto !important;
-}
+  }
-.modal-overlay .modal-content {
+  .modal-overlay .modal-content {
     pointer-events: auto !important;
-}
+  }
 </style>

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

@@ -26,9 +26,28 @@ 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 });