feat: ✨ 用户管理新增创建时间查询

Former-commit-id: 6da9927ae97a8cfff103874c88a0cdc9e59f1486

src/api/user/types.ts

@@ -17,6 +17,8 @@ export interface UserQuery extends PageQuery {
   keywords?: string;
   status?: number;
   deptId?: number;
+  startTime?: string;
+  endTime?: string;
 }
 
 /**

src/components/DateRange/index.vue

@@ -1,69 +0,0 @@
-<template>
-  <div>
-    <el-date-picker
-      v-model="startDate"
-      type="date"
-      placeholder="开始日期"
-      :picker-options="startPickerOptions"
-    />
-    <el-date-picker
-      v-model="endDate"
-      type="date"
-      placeholder="结束日期"
-      :picker-options="endPickerOptions"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  modelValue: {
-    type: Object,
-    default: () => ({}),
-  },
-  format: {
-    type: String,
-    default: "yyyy-MM-dd",
-  },
-  valueFormat: {
-    type: String,
-    default: "yyyy-MM-dd",
-  },
-});
-const emit = defineEmits(["update:modelValue"]);
-
-let startDate = computed({
-  get: () => props.modelValue.startDate,
-  set: (val) =>
-    emit("update:modelValue", { ...props.modelValue, startDate: val }),
-});
-
-let endDate = computed({
-  get: () => props.modelValue.endDate,
-  set: (val) =>
-    emit("update:modelValue", { ...props.modelValue, endDate: val }),
-});
-
-watch(
-  [startDate, endDate],
-  () => {
-    if (startDate.value > endDate.value) {
-      // 在这里可以添加提示代码，提醒用户开始时间不能大于结束时间
-      console.log("开始时间不能大于结束时间");
-    }
-  },
-  { immediate: true }
-);
-
-let startPickerOptions = computed(() => ({
-  disabledDate: (time: any) => {
-    return endDate.value ? time.getTime() > endDate.value : false;
-  },
-}));
-
-let endPickerOptions = computed(() => ({
-  disabledDate: (time: any) => {
-    return startDate.value ? time.getTime() < startDate.value : false;
-  },
-}));
-</script>

src/views/system/user/index.vue

@@ -33,11 +33,17 @@ const queryParams = reactive<UserQuery>({
   pageNum: 1,
   pageSize: 10,
 });
+const dateTimeRange = ref("");
 const total = ref(0); // 数据总数
 const pageData = ref<UserPageVO[]>(); // 用户分页数据
 const deptList = ref<OptionType[]>(); // 部门下拉数据源
 const roleList = ref<OptionType[]>(); // 角色下拉数据源
 
+watch(dateTimeRange, (newVal) => {
+  queryParams.startTime = newVal[0];
+  queryParams.endTime = newVal[1];
+});
+
 // 弹窗对象
 const dialog = reactive({
   visible: false,
@@ -96,6 +102,7 @@ function handleQuery() {
 /** 重置查询 */
 function resetQuery() {
   queryFormRef.value.resetFields();
+  dateTimeRange.value = "";
   queryParams.pageNum = 1;
   queryParams.deptId = undefined;
   handleQuery();
@@ -356,6 +363,17 @@ onMounted(() => {
               </el-select>
             </el-form-item>
 
+            <el-form-item label="创建时间">
+              <el-date-picker
+                v-model="dateTimeRange"
+                type="daterange"
+                range-separator="~"
+                start-placeholder="开始时间"
+                end-placeholder="截止时间"
+                value-format="YYYY-MM-DD"
+              />
+            </el-form-item>
+
             <el-form-item>
               <el-button type="primary" @click="handleQuery"
                 ><i-ep-search />搜索</el-button