update 数据看板个性化显示隐藏 接口调试

src/views/task/dashboard/components/dataStatistics.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="gl-page-content-grey data-statistics">
+  <div class="gl-page-content-grey data-statistics" v-loading="loading">
     <!-- 配置按钮 -->
     <div class="icon-btn">
       <el-tooltip :content="$t('个性化配置')" placement="top">
@@ -10,7 +10,11 @@
         </div>
       </el-tooltip>
     </div>
-    <settingDia v-model="settingDiaVisible" @updateConfig="updateConfigFun" />
+    <settingDia
+      v-model="settingDiaVisible"
+      :configJson="configJson"
+      @updateConfig="updateConfigFun"
+    />
     <!-- echart 图表 -->
     <div class="content">
       <div v-for="config in currentList" :key="config.id" class="chart-box">
@@ -21,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { getThemeColor } from '@/utils/theme';
 // 引入子组件
 import userGroupProjectChart from './dataStatistics/userGroupProjectChart.vue';
@@ -32,6 +36,13 @@ import performanceCompletion from './dataStatistics/performanceCompletion.vue';
 import projectTaskComplete from './dataStatistics/projectTaskComplete.vue';
 import reviewPassed from './dataStatistics/reviewPassed.vue';
 import settingDia from './dataStatistics/settingDia.vue';
+import { getUserId, getUserTenantId } from '@/utils/user';
+import { ElMessage } from 'element-plus';
+import {
+  addFormConfigureApi,
+  getFormConfigureApi,
+  updateFormConfigureApi,
+} from '@/api/system/systemData';
 
 const statusColorList = [
   'rgb(200, 201, 204)',
@@ -60,7 +71,7 @@ const processNodeColorList = [
 ];
 // 设置弹窗
 const settingDiaVisible = ref(false);
-// 组件配置数组
+// 组件基础配置数组
 const baseList = ref([
   {
     id: 'userGroupProject',
@@ -130,8 +141,38 @@ const baseList = ref([
 ]);
 // 当前展示的图表
 const currentList = ref();
-const updateConfigFun = () => {
+const loading = ref(false);
-  const dataStatisticsSetting = localStorage.getItem('data_StatisticsSetting');
+// 配置弹窗点击确定
+const updateConfigFun = async (info: any) => {
+  try {
+    let res: any;
+    // 新增 or 修改
+    if (hasConfig.value) {
+      res = await updateFormConfigureApi({
+        formName: 'data_Statistics_Setting' + '_' + getUserId() + '_' + getUserTenantId(),
+        formConfig: info,
+      });
+    } else {
+      res = await addFormConfigureApi({
+        formName: 'data_Statistics_Setting' + '_' + getUserId() + '_' + getUserTenantId(),
+        formConfig: info,
+      });
+    }
+    // 接口成功后才更新 configJson
+    if (res.code === 200) {
+      ElMessage.success('配置成功');
+      configJson.value = info;
+      hasConfig.value = true;
+      // 根据配置的结果对展示的图表进行排序
+      setConfig(info);
+    }
+  } catch (error) {
+    console.error('更新配置失败:', error);
+  }
+};
+
+// 设置 参数json
+const setConfig = (dataStatisticsSetting: any) => {
   if (dataStatisticsSetting) {
     const configInfo = JSON.parse(dataStatisticsSetting);
     // 根据配置的结果对展示的图表进行排序
@@ -144,12 +185,41 @@ const updateConfigFun = () => {
     currentList.value = baseList.value;
   }
 };
+// 是否配置过
+const hasConfig = ref(false);
+// 配置规则
+const configJson = ref('');
+// 获取该用户的配置
+const getFormConfigure = async () => {
+  loading.value = true;
+  const params = {
+    formName: 'data_Statistics_Setting' + '_' + getUserId() + '_' + getUserTenantId(),
+  };
+  try {
+    // 临时保存原始的 ElMessage.warning
+    const originalWarning = ElMessage.warning;
+    // 临时禁用警告消息
+    ElMessage.warning = () => ({ close: () => {} }) as any;
+    const res = await getFormConfigureApi(params);
+    if (res.code === 200) {
+      // 如果存在配置，则使用配置
+      hasConfig.value = true;
+      configJson.value = res.data.formConfig;
+      setConfig(res.data.formConfig);
+    } else {
+      // 如果不存在配置，则使用默认配置
+      hasConfig.value = false;
+      setConfig('');
+    }
+    // 恢复原始的 ElMessage.warning
+    ElMessage.warning = originalWarning;
+  } finally {
+    loading.value = false;
+  }
+};
 
 onMounted(() => {
-  updateConfigFun();
+  getFormConfigure();
-});
-onBeforeUnmount(() => {
-  localStorage.removeItem('data_StatisticsSetting');
 });
 </script>
 

src/views/task/dashboard/components/dataStatistics/reviewPassed.vue

@@ -6,7 +6,9 @@
     :option="chartOption"
     :filterItems="['projectName', 'projectCode', 'discipline']"
     @update="initReviewPassedChart"
-  />
+  >
+    <!-- <template #extraFilters></template> -->
+  </commonChart>
 </template>
 
 <script lang="ts" setup>

src/views/task/dashboard/components/dataStatistics/settingDia.vue

@@ -60,15 +60,16 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { ElMessage } from 'element-plus';
 import Dialog from '@/components/common/dialog/index.vue';
 
 interface Props {
   modelValue: boolean;
+  configJson?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
+  configJson: '',
 });
 
 const emit = defineEmits(['update:modelValue', 'updateConfig']);
@@ -97,19 +98,15 @@ watch(
   }
 );
 const updateTable = () => {
-  const dataStatisticsSetting = localStorage.getItem('data_StatisticsSetting');
+  if (props.configJson) {
-  if (dataStatisticsSetting) {
+    tableData.value = JSON.parse(props.configJson);
-    tableData.value = JSON.parse(dataStatisticsSetting);
   } else {
     tableData.value = [...baseTable];
   }
 };
 const updateFun = () => {
-  // console.log(tableData.value, 'tableData.value');
-  localStorage.setItem('data_StatisticsSetting', JSON.stringify(tableData.value));
-  ElMessage.success('保存成功');
   emit('update:modelValue', false);
-  emit('updateConfig');
+  emit('updateConfig', JSON.stringify(tableData.value));
 };
 
 const rowDragendFun = () => {

src/views/task/dashboard/index.vue

@@ -12,7 +12,9 @@
         </el-tabs>
       </div>
       <div class="tab-content">
-        <component :is="currentComponent" v-if="activeTab" />
+        <keep-alive>
+          <component :is="currentComponent" />
+        </keep-alive>
       </div>
     </div>
   </div>