style：生产报表-报工信息-添加日期筛选条件

src/views/mes/productionReport/components/ProductionReportBaogongInfo.vue

@@ -1,6 +1,25 @@
 <template>
   <div class="baogong-info-container">
     <div class="action-bar">
+      <div class="action-bar-left">
+        <el-date-picker
+          v-model="baogongDateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :default-time="[new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]"
+          @change="handleDateChange"
+          class="!w-280px"
+        />
+        <el-button :type="activeShortcut === 'today' ? 'primary' : ''" @click="setShortcut('today')">今日</el-button>
+        <el-button :type="activeShortcut === '7d' ? 'primary' : ''" @click="setShortcut('7d')">近七天</el-button>
+        <el-button :type="activeShortcut === '30d' ? 'primary' : ''" @click="setShortcut('30d')">近30日</el-button>
+        <el-button @click="handleReset">
+          <Icon icon="ep:refresh-left" class="mr-5px" /> 重置
+        </el-button>
+      </div>
       <el-button @click="handleRefresh" :loading="loading">
         <Icon icon="ep:refresh" class="mr-5px" /> 刷新
       </el-button>
@@ -17,7 +36,7 @@
       <el-table-column label="不合格数量" align="center" prop="noPassNum" width="100px" />
       <el-table-column label="合格率%" align="center" width="100px">
         <template #default="scope">
-          {{ ((scope.row.passRate || 0) * 100).toFixed(2) }}
+          {{ scope.row.passRate }}
         </template>
       </el-table-column>
       <el-table-column label="不合格原因" align="center" prop="reason" />
@@ -50,10 +69,14 @@ const props = defineProps<{
 const loading = ref(false)
 const baogongList = ref<any[]>([])
 const total = ref(0)
+const baogongDateRange = ref<[string, string] | null>(null)
+const activeShortcut = ref<string>('')
 const queryParams = reactive({
   taskId: undefined as number | undefined,
   pageNo: 1,
-  pageSize: 10
+  pageSize: 10,
+  beginBaogongTime: undefined as string | undefined,
+  endBaogongTime: undefined as string | undefined
 })
 
 const getList = async () => {
@@ -92,6 +115,49 @@ const handleRefresh = () => {
   getList()
 }
 
+const setShortcut = (type: string) => {
+  activeShortcut.value = type
+  const today = dayjs().startOf('day')
+  let start: dayjs.Dayjs
+  let end: dayjs.Dayjs
+  if (type === 'today') {
+    start = today
+    end = today.endOf('day')
+  } else if (type === '7d') {
+    start = today.subtract(6, 'day')
+    end = today.endOf('day')
+  } else if (type === '30d') {
+    start = today.subtract(29, 'day')
+    end = today.endOf('day')
+  } else {
+    return
+  }
+  baogongDateRange.value = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')]
+  queryParams.beginBaogongTime = start.format('YYYY-MM-DD HH:mm:ss')
+  queryParams.endBaogongTime = end.format('YYYY-MM-DD HH:mm:ss')
+  handleRefresh()
+}
+
+const handleDateChange = (val: [string, string] | null) => {
+  activeShortcut.value = ''
+  if (val) {
+    queryParams.beginBaogongTime = val[0]
+    queryParams.endBaogongTime = val[1]
+  } else {
+    queryParams.beginBaogongTime = undefined
+    queryParams.endBaogongTime = undefined
+  }
+  handleRefresh()
+}
+
+const handleReset = () => {
+  activeShortcut.value = ''
+  baogongDateRange.value = null
+  queryParams.beginBaogongTime = undefined
+  queryParams.endBaogongTime = undefined
+  handleRefresh()
+}
+
 /** 格式化日期时间 */
 const formatDateTime = (value: string | Date | null) => {
   if (!value) return '-'
@@ -102,10 +168,17 @@ const formatDateTime = (value: string | Date | null) => {
 <style scoped>
 .action-bar {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 12px;
 }
 
+.action-bar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .section-title {
   margin: 0 0 16px 0;
   font-size: 14px;