高风险场景列表完成

src/views/changeLedger/modules/list.vue

@@ -3,7 +3,7 @@ import { ref, computed, onMounted, h } from 'vue';
 import { Icon } from '@iconify/vue'
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
-import { tagTextColor, tagBgColor, tagBorderColor } from '@/utils/common';
+import { tagTextColor, tagBgColor, tagBorderColor, getTimeRangeStamp, formatTimestamp } from '@/utils/common';
 import { systemConfigApi } from '@/service/api/system';
 import { orgListApi } from '@/service/api/user';
 import { changeLedgerListApi } from '@/service/api/changeLedger';
@@ -13,6 +13,8 @@ const themeStore = useThemeStore();
 const props = defineProps(['self', 'keyValue'])
 
 const loading = ref<boolean>(false);
+// 当前选中时间范围
+const period = ref<string>("year");
 // 组织树
 const orgTree = ref<any[]>([]);
 // 筛选条件
@@ -23,8 +25,8 @@ const formInfo = ref<any>({
   duration: null,
   status: '',//英文逗号隔开
   org_id: 1,
-  apply_time_start: null,
-  apply_time_end: null,
+  apply_time_start: getTimeRangeStamp(period.value)?.from ?? null,
+  apply_time_end: getTimeRangeStamp(period.value)?.to ?? null,
   self: props.self,
 });
 const pagination = ref<{page: number, pageSize: number, itemCount: number}>({
@@ -70,8 +72,6 @@ const TIME_OPTIONS = [
   { label: "近一个月", value: 'month' },
   { label: "自定义", value: 'custom' },
 ];
-// 当前选中时间范围
-const period = ref<string>("year");
 // 是否显示全部
 const isAll = ref<boolean>(true);
 // 当前选中行
@@ -86,18 +86,6 @@ const revokeSaving = ref<boolean>(false);
 // 列表
 const list = ref<any[]>([]);
 
-// 重置
-const reset = () => {
-  formInfo.value.kw = '';
-  formInfo.value.type = null;
-  formInfo.value.level = null;
-  formInfo.value.duration = null;
-  formInfo.value.status = '';
-  formInfo.value.sort = '';
-  period.value = 'year';
-  isAll.value = true;
-  window.$message?.success("筛选条件已重置");
-};
 // 导出台账
 const exportChanges = () => {
   window.$message?.info('还差接口');
@@ -127,6 +115,21 @@ const searchHandle = () => {
   pagination.value.page = 1;
   getList();
 }
+// 重置
+const reset = () => {
+  period.value = 'year';
+  formInfo.value.kw = '';
+  formInfo.value.type = null;
+  formInfo.value.level = null;
+  formInfo.value.duration = null;
+  formInfo.value.status = '';
+  formInfo.value.org_id = 1;
+  formInfo.value.sort = '';
+  formInfo.value.apply_time_start = getTimeRangeStamp(period.value)?.from ?? null;
+  formInfo.value.apply_time_end = getTimeRangeStamp(period.value)?.to ?? null;
+  isAll.value = true;
+  searchHandle();
+};
 // 组织选择改变
 const orgChange = (val:any) => {
   formInfo.value.org_id = val;
@@ -155,8 +158,30 @@ const durChoose = (val:any) => {
 // 时间范围选择
 const timeChoose = (val:string) => {
   period.value = val;
+  if(val === 'custom'){
+    formInfo.value.apply_time_start = null;
+    formInfo.value.apply_time_end = null;
+    return
+  }else{
+    formInfo.value.apply_time_start = getTimeRangeStamp(val)?.from ?? null;
+    formInfo.value.apply_time_end = getTimeRangeStamp(val)?.to ?? null;
+  }
   searchHandle();
 }
+// 自定义时间选择
+const timeChange = (type:string,val:any) => {
+  if(type === 'start'){
+    formInfo.value.apply_time_start = val;
+  }else{
+    formInfo.value.apply_time_end = val;
+  }
+  if(formInfo.value.apply_time_start && formInfo.value.apply_time_end){
+    if(formInfo.value.apply_time_start > formInfo.value.apply_time_end){
+      return window.$message?.warning('开始时间不能大于结束时间');
+    }
+    searchHandle();
+  }
+}
 // 状态选择
 const statusChoose = (val:string) => {
   formInfo.value.status = val;
@@ -231,8 +256,8 @@ const getList = async () => {
     duration: formInfo.value.duration,
     status: formInfo.value.status,
     org_id: formInfo.value.org_id,
-    apply_time_start: formInfo.value.apply_time_start,
-    apply_time_end: formInfo.value.apply_time_end,
+    apply_time_start: formatTimestamp(formInfo.value.apply_time_start),
+    apply_time_end: formatTimestamp(formInfo.value.apply_time_end),
     self: formInfo.value.self,
     page_num: pagination.value.page,
     page_size: pagination.value.pageSize,
@@ -324,7 +349,7 @@ onMounted(async () => {
           显示未关闭
         </NRadio>
         <div class="relative ml-auto">
-          <NInput v-model:value="formInfo.kw" size="small" type="text" clearable placeholder="搜索变更名称 / 编号" @clear="searchHandle">
+          <NInput v-model:value="formInfo.kw" size="small" type="text" clearable placeholder="搜索变更名称 / 编号" @clear="formInfo.kw = ''; searchHandle()">
             <template #suffix>
               <Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" @click="searchHandle" />
             </template>
@@ -355,9 +380,9 @@ onMounted(async () => {
             <span class="text-xs text-slate-400">时间</span>
             <NButton size="tiny" round v-for="p in TIME_OPTIONS" :key="p.value" :ghost="period === p.value ? false : true" :type="period === p.value ? 'primary' : 'default'" @click="timeChoose(p.value)">{{ p.label }}</NButton>
             <span v-if="period === 'custom'" class="flex items-center gap-1">
-              <NDatePicker v-model:value="formInfo.apply_time_start" type="date" size="small" class="w-130px" />
+              <NDatePicker :value="formInfo.apply_time_start" type="date" size="small" class="w-130px" :on-update:value="(v) => timeChange('start',v)"  />
               <span class="text-xs text-slate-400">至</span>
-              <NDatePicker v-model:value="formInfo.apply_time_end" type="date" size="small" class="w-130px" />
+              <NDatePicker :value="formInfo.apply_time_end" type="date" size="small" class="w-130px" :on-update:value="(v) => timeChange('end',v)" />
             </span>
           </p>
         </div>