1

src/views/recordComponents/collectionList.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="ele-body">
+    <el-card shadow="never">
+      <!-- 查询条件区域 -->
+      <div class="search-bar">
+        <el-form inline :model="queryForm" size="small">
+          <el-form-item label="场站">
+            <el-select
+              v-model="queryForm.stationId"
+              placeholder="请选择场站"
+              style="width: 200px"
+            >
+              <el-option
+                v-for="item in stationList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="查询维度">
+            <el-select
+              v-model="queryForm.dimension"
+              placeholder="请选择"
+              style="width: 140px"
+              @change="handleDimensionChange"
+            >
+              <el-option label="按日统计" :value="1"></el-option>
+              <el-option label="按月统计" :value="2"></el-option>
+              <el-option label="按年统计" :value="3"></el-option>
+              <el-option label="按年度统计" :value="4"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- 按日统计 -->
+          <el-form-item v-if="queryForm.dimension === 1" label="查询日期">
+            <el-date-picker
+              v-model="queryForm.date"
+              type="date"
+              placeholder="选择日期"
+              value-format="yyyy-MM-dd"
+              style="width: 140px"
+            />
+          </el-form-item>
+
+          <!-- 按月统计 -->
+          <el-form-item v-if="queryForm.dimension === 2" label="查询月份">
+            <el-date-picker
+              v-model="queryForm.month"
+              type="month"
+              placeholder="选择月份"
+              value-format="yyyy-MM"
+              style="width: 140px"
+            />
+          </el-form-item>
+
+          <!-- 按年统计 -->
+          <el-form-item v-if="queryForm.dimension === 3" label="查询年份">
+            <el-date-picker
+              v-model="queryForm.year"
+              type="year"
+              placeholder="选择年份"
+              value-format="yyyy"
+              style="width: 140px"
+            />
+          </el-form-item>
+
+          <!-- 按年度统计 -->
+          <el-form-item v-if="queryForm.dimension === 4" label="年份范围">
+            <el-date-picker
+              v-model="queryForm.yearRange"
+              type="year"
+              placeholder="选择年份"
+              value-format="yyyy"
+              style="width: 140px"
+            />
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+            <el-button @click="handleReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="table"
+        row-key="id"
+        :columns="columns"
+        :datasource="datasource"
+        :show-pagination="false"
+        @columns-change="handleColumnChange"
+        :cache-key="cacheKeyUrl"
+        auto-amend-page
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import { getFactoryarea } from '@/api/factoryModel/index';
+  import dayjs from 'dayjs';
+  import tableColumnsMixin from '@/mixins/tableColumnsMixin';
+
+  export default {
+    mixins: [tableColumnsMixin],
+    props: {
+      pageName: {
+        type: String,
+        default: 'productionRecords'
+      }
+    },
+    data() {
+      return {
+        cacheKeyUrl: `pcs-${this.pageName}-collectionList`,
+        stationList: [],
+        queryForm: {
+          dimension: 1,
+          date: '',
+          month: '',
+          year: '',
+          yearRange: '',
+          stationId: ''
+        },
+        columns: [
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          }
+          // 表头由用户自行编写
+        ]
+      };
+    },
+    created() {
+      this.initDefaultValues();
+      this.getStationList();
+    },
+    methods: {
+      // 初始化默认值
+      initDefaultValues() {
+        const now = dayjs();
+        this.queryForm.date = now.format('YYYY-MM-DD');
+        this.queryForm.month = now.format('YYYY-MM');
+        this.queryForm.year = now.format('YYYY');
+        this.queryForm.yearRange = now.format('YYYY');
+      },
+
+      // 获取场站列表
+      getStationList() {
+        getFactoryarea({
+          pageNum: 1,
+          size: 999,
+          type: 4
+        }).then((res) => {
+          const list =
+            res.list.map((item) => {
+              return {
+                value: item.id,
+                label: item.name
+              };
+            }) || [];
+          this.stationList = list;
+          // 默认选中第一个
+          if (list.length > 0) {
+            this.queryForm.stationId = list[0].value;
+          }
+        });
+      },
+
+      // 查询维度切换
+      handleDimensionChange() {
+        this.initDefaultValues();
+      },
+
+      // 查询
+      handleSearch() {
+        this.$refs.table.reload({
+          where: this.buildQueryParams()
+        });
+      },
+
+      // 重置
+      handleReset() {
+        this.initDefaultValues();
+        if (this.stationList.length > 0) {
+          this.queryForm.stationId = this.stationList[0].value;
+        }
+        this.$refs.table.reload({
+          where: this.buildQueryParams()
+        });
+      },
+
+      // 构建查询参数
+      buildQueryParams() {
+        const params = {
+          dimension: this.queryForm.dimension,
+          stationId: this.queryForm.stationId
+        };
+
+        switch (this.queryForm.dimension) {
+          case 1:
+            params.date = this.queryForm.date;
+            break;
+          case 2:
+            params.month = this.queryForm.month;
+            break;
+          case 3:
+            params.year = this.queryForm.year;
+            break;
+          case 4:
+            params.yearRange = this.queryForm.yearRange;
+            break;
+        }
+
+        return params;
+      },
+
+      // 表格数据源
+      datasource({ page, limit, where, order }) {
+        const body = {
+          ...where,
+          ...order,
+          pageNum: page,
+          size: limit
+        };
+        // TODO: 调用实际接口
+        console.log('查询参数:', body);
+        return Promise.resolve({
+          code: 0,
+          msg: '',
+          count: 0,
+          data: []
+        });
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .search-bar {
+    margin-bottom: 15px;
+  }
+</style>