supervision-vue/src/views/data/PoliceMeeting.vue

<template>
    <div class="container">
        <header>
            <el-form :label-width="114">
                <el-row>
<!--                    <el-col :span="6">-->
<!--                        <el-form-item label="事务ID">-->
<!--                            <el-input-->
<!--                                placeholder="请输入"-->
<!--                                v-model="query.sampleId"-->
<!--                                clearable-->
<!--                            />-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                  <el-col :span="6">
                    <el-form-item label="事务名">
                      <el-input
                          placeholder="请输入"
                          v-model="query.name"
                          clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="受访人">
                      <el-input
                          placeholder="请输入"
                          v-model="query.visitName"
                          clearable
                      />
                    </el-form-item>
                  </el-col>
                    <el-col :span="6">
                        <el-form-item label="受访人电话">
                            <el-input
                                placeholder="请输入"
                                v-model="query.visitPhone"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="单位名称">
                            <el-input
                                placeholder="请输入"
                                v-model="query.orgName"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="业务名称">
                            <el-input
                                placeholder="请输入"
                                v-model="query.businessName"
                                clearable
                            />
                        </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.sampleTime"
                      />
                    </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.visitTime"
                      />
                    </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="list" :default-sort="{prop:'visitTime', order: 'descending'}" :sort-by="query.sortField" @sort-change="handleSortChange">
          <el-table-column label="事务名" prop="name" />
          <el-table-column label="受访人" prop="visitName" />
          <el-table-column label="受访人电话" prop="visitPhone"  show-overflow-tooltip />
          <el-table-column label="涉及单位" prop="orgName"  show-overflow-tooltip />
          <el-table-column label="事项" prop="businessName"  show-overflow-tooltip />
          <el-table-column label="提交时间" prop="sampleTime" sortable="custom" :sort-orders="['ascending', 'descending']" />
          <el-table-column label="评议时间" prop="visitTime" sortable="custom" :sort-orders="['ascending', 'descending']" />
          <el-table-column label="内容" prop="sampleContent" show-overflow-tooltip />
          <el-table-column label="结果" prop="resultName" show-overflow-tooltip />
        </el-table>
      </div>
      <div class="flex end mt-8">
        <el-pagination
            @size-change="getList"
            @current-change="getList"
            :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>
      <p>长沙警务评议系统数据，每天自动同步该平台数据，自动下发不满意样本进行核查办理。</p>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {listPoliceMeeting} from "@/api/data/policeMeeting";

const query = ref({
  current: 1,
  size: 10,
  sortField: 'visitTime',
  sortOrder: 'DESC'
});
const tableRef = ref(null);
function handleSortChange({ prop, order }) {
  query.value.sortField = prop;
  query.value.sortOrder = order === "ascending" ? 'ASC' : 'DESC';
  getList();
}
const list = ref<any[]>([]);
const total = ref(0);
const show = ref(false);

function getList() {
  listPoliceMeeting(query.value).then((data) => {
        list.value = data.records;
        total.value = data.total;
    });
}

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

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

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

</style>