supervision-vue/src/views/baseData/Personal.vue

<template>
    <div class="container">
        <header>
            <el-form :label-width="114">
                <el-row>
                  <el-col :span="6">
                    <el-form-item label="姓名">
                      <el-input
                          placeholder="请输入姓名"
                          v-model="query.policeName"
                          clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="警号">
                      <el-input
                          placeholder="请输入警号"
                          v-model="query.empNo"
                          clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="单位名称">
                      <el-input
                          placeholder="请输入单位名称"
                          v-model="query.departName"
                          clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="单位类型">
                      <el-select
                          v-model="query.groupName"
                          clearable
                      >
                        <el-option
                            v-for="item in dict.departName"
                            :key="item.id"
                            :label="item.dictLabel"
                            :value="item.dictLabel"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                    <el-col :span="6">
                        <el-form-item label="统计范围">
                            <el-date-picker
                                value-format="YYYY-MM-DD"
                                type="daterange"
                                unlink-panels
                                format="YYYY-MM-DD"
                                range-separator="~"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                :shortcuts="shortcuts"
                                v-model="query.happenTime"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="mb-25 flex end">
                <div>
                    <el-button type="primary" @click="getList">
                        <template #icon>
                            <icon name="el-icon-Search" />
                        </template>
                        查询</el-button
                    >
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
        </header>
        <div class="table-container" v-loading="loading">
            <el-table ref="tableRef" :data="todos" :default-sort="{prop:'jiechujing110', order: 'descending'}" :sort-by="query.sortField" @sort-change="handleSortChange">
              <el-table-column label="姓名" prop="policeName" />
              <el-table-column label="警号" prop="empNo" />
              <el-table-column label="单位名称" prop="departName" />
              <el-table-column label="单位类型" prop="groupName" />
              <el-table-column label="110接处警" prop="jiechujing110" sortable="custom" :sort-orders="['ascending', 'descending']" />
              <el-table-column label="122接处警" prop="jiechujing122" sortable="custom" :sort-orders="['ascending', 'descending']" />
              <el-table-column label="身份证业务" prop="shenfenzhengyewu" sortable="custom" :sort-orders="['ascending', 'descending']" />
              <el-table-column label="受案" prop="zhifabananSA" sortable="custom" :sort-orders="['ascending', 'descending']" />
              <el-table-column label="立案" prop="zhifabananLA" sortable="custom" :sort-orders="['ascending', 'descending']" />
              <el-table-column label="破案" prop="zhifabananPA" sortable="custom" :sort-orders="['ascending', 'descending']" />
              <el-table-column label="户口业务" prop="hukouyewu" sortable="custom" :sort-orders="['ascending', 'descending']" />
              <el-table-column label="出入境业务" prop="churujingyewu" sortable="custom" :sort-orders="['ascending', 'descending']" />
              <el-table-column label="车辆上牌" prop="cheliangshangpai" sortable="custom" :sort-orders="['ascending', 'descending']" />
              <el-table-column label="驾驶人考试" prop="jiashirenkaoshi" sortable="custom" :sort-orders="['ascending', 'descending']" />
            </el-table>
        </div>
        <div class="flex end mt-8">
            <el-pagination
                @size-change="getList"
                @current-change="getList"
                :current-page="query.current"
                :page-sizes="[10, 20, 50]"
                v-model:page-size="query.size"
                v-model:current-page="query.current"
                layout="total, sizes, prev, pager, next"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { listBaseDataPersonal } from "@/api/baseData";
import { ref } from "vue";

import useCatchStore from "@/stores/modules/catch";

const catchStore = useCatchStore();
const dict = catchStore.getDicts([
    "departName"
]);

const todos = ref([]);
const query = ref({
    current: 1,
    size: 10,
    sortField: 'jiechujing110',
    sortOrder: 'DESC'
});
const tableRef = ref(null);
function handleSortChange({ prop, order }) {
  query.value.sortField = prop;
  query.value.sortOrder = order === "ascending" ? 'ASC' : 'DESC';
  getList();
}

const total = ref(0);
const loading = ref(true);

const shortcuts = [
  {
    text: '近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

function getList() {
    loading.value = true;
    listBaseDataPersonal(query.value).then((data) => {
        todos.value = data.records;
        total.value = data.total;
        loading.value = false;
    });
}

onMounted(() => {
    getList();
});

function reset() {
    query.value = {
      current: 1,
      size: 10,
      sortField: 'jiechujing110',
      sortOrder: 'DESC'
    };
    tableRef.value.sort('jiechujing110','descending');
}

const show = ref(false);
const activeWork = ref({});
provide("work", activeWork);

</script>
<style lang="scss" scoped>


</style>