Web/admin.ui.plus-master/src/views/admin/statement/gasStationManagement/index.vue

<template>
  <div class="layout-pd">
    <el-row>
      <!--操作-->
      <el-col :xs="24">
        <el-card class="mt8" shadow="hover">
          <el-form :model="Data.Filter" @submit.stop.prevent>
            <el-form-item prop="name" style="width: 100%">
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="省份">
                  <el-input v-model="Data.Filter.province" placeholder="请输入省份" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="油站名称">
                  <el-input v-model="Data.Filter.name" placeholder="请输入油站名称" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="油站类型">
                  <el-select v-model="Data.Filter.type" placeholder="请选择油站类型">
                    <el-option label="所有" :value="''"></el-option>
                    <el-option v-for="(value, key) in type" :key="key" :label="value" :value="key" />
                    
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
                <el-form-item label="选择时间">
                  <el-date-picker
                  v-model="Data.Filter.createTimeRange"
                    type="datetimerange"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    range-separator="To"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-form>

          <hr>

          <!-- 按钮 -->
          <el-row justify="space-between" class="submit-button" style="margin-bottom:-7px">
            <el-row>
              <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
              <el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
            </el-row>
          </el-row>
        </el-card>
      </el-col>
      <!--表格-->
      <el-col :xs="24">
        <el-card class="my-fill mt8" shadow="hover">
          <el-table ref="multipleTableRef" v-loading="Data.loading" stripe :data="Data.tableModel" row-key="id"
            style="width: 100%">
            <el-table-column v-for="column in Data.dynamicColumns" :key="column.prop" :prop="column.prop"
              :label="column.label" />
              <el-table-column label="站长及联系方式">
  <template #default="scope">
    {{ scope.row.contact }}{{ scope.row.phone }}
  </template>
</el-table-column>
          </el-table>
          <div class="my-flex my-flex-end" style="margin-top: 20px">
            <el-pagination v-model:currentPage="pageState.pageInput.currentPage" v-model:page-size="pageState.pageInput.pageSize"
              :total="Data.total" :page-sizes="[10, 15, 20, 50, 100]" small background @size-change="onSizeChange"
              @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script setup lang="ts" name="authorize/fuelingsdk">
import { onMounted, reactive, ref, watch } from "vue";
import { ElTable } from 'element-plus'
import { gasStationFilterModel_SearchFilter, gasStationFilterModel, PageInputgasStationFilterModel } from "/@/api/admin/reportManagement/gasStation/gasStationDto";
import { gasStationApi } from "/@/api/admin/reportManagement/gasStation/gasStationApi";
import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";

// 使用组合式函数获取分页状态
const pageState = useDynamicPageSize(10, 15);

/**引入组件*/

// 安装日期假数据
const value1 = ref('')

/**页面对象 */
const Data = reactive({
  time: '',
  /**加载显示 */
  loading: false,
  /**条件查询模块 */
  Filter: {
    city:"",
    contact:"",
    phone:"",
    alarmTime:"",
    /**省份 */
    province: "",
    /**加油站名称 */
    name: "",
    // 油站类型
    type:"",
    startDate:null,
    endDate:null,
  } as gasStationFilterModel_SearchFilter,
  /**表格信息 */
  tableModel: [] as Array<gasStationFilterModel>,
  /**动态表头 */
  dynamicColumns: [
    { prop: 'province', label: '省份' },
    { prop: 'city', label: '城市' },
    { prop: 'name', label: '油站名称' },
    { prop: 'type', label: '油站类型' },
    { prop: 'address', label: '油站地址' },
    { prop: 'dispensersTotal', label: '油机数量' },
    { prop: 'nozzleControlsTotal', label: '油枪数量' },
    { prop: 'alarmTime', label: '启用时间(安装时间)' },
  ],
  /**分页标识 */
  pageInput: {
    currentPage: 1,
    pageSize: 10,
  } as PageInputgasStationFilterModel,
  /**分页总数 */
  total: 0,
})

// 油站类型
enum type {
  中石油="中石油",
  中石化="中石化",
  社会站="社会站"
}

/**初始化 */
const init = async () => {
  Data.loading = true
  const res: any = await new gasStationApi().getPage({ ...Data.pageInput, filter: Data.Filter })
  Data.tableModel = res?.data.list ?? []
  Data.total = res?.data.total ?? 0
  Data.loading = false
}

onMounted(() => {
  // 初始化分页大小
Data.pageInput.pageSize = pageState.pageInput.pageSize;
  init()
})

/**条件查询 */
const onQuery = () => {
  init()
}

/**重置查询条件 */
const resetQuery = () => {
  Data.Filter.name = ''
  Data.Filter.province = ''
  Data.pageInput.pageSize = 10
  Data.pageInput.currentPage = 1
}

/**重置 */
const onReset = () => {
  resetQuery()
  init()
}


/**
* 页条变化
* @param val
*/
const onSizeChange = (val: number) => {
  Data.pageInput.pageSize = val
  init()
}

/**
 * 页数 变化
 * @param val
 */
const onCurrentChange = (val: number) => {
  Data.pageInput.currentPage = val
  init()
} 

watch(
  () => Data.Filter.createTimeRange,
  (newVal) => {
    if (newVal && newVal.length === 2) {
      Data.Filter.startDate = newVal[0]; // yyyy-MM-dd 格式
      Data.Filter.endDate = newVal[1];
    } else {
      Data.Filter.startDate = null;
      Data.Filter.endDate = null;
    }
  }
);
</script>

<style scoped lang="scss">
.el-input,
.el-select {
  width: 240px;
}

/* 输入框标签固定四个字符宽度 */
::v-deep .el-form-item__label {
  // 字体大小14，4个字符，12px右间距
  width: 14*4px+12px;
  justify-content: start;
}

/* 数据表头 设置灰色样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #F6F6F6;
}
</style>