黄金指标数据查询问题,添加排序

src/api/perfManage/goldTarget.ts

@@ -8,6 +8,7 @@ import { parseObjLineToHump } from '@/utils/parse-utils';
  * @returns object
  */
 export async function listgoldData(query: Record<string, any>) {
+  console.log(query);
   let totalSQL = 'select count(*) as total from gold_kpi where 1=1 ';
   let rowsSQL =
     'SELECT gold_kpi.*,kpi_title.en_title FROM gold_kpi LEFT JOIN kpi_title on gold_kpi.kpi_id=kpi_title.kpi_id where 1=1 ';
@@ -15,17 +16,23 @@ export async function listgoldData(query: Record<string, any>) {
   // 查询
   let querySQL = '';
   if (query.neType) {
-    querySQL += ` and ne_type like '%${query.neType}%' `;
+    querySQL += ` and gold_kpi.ne_type like '%${query.neType}%' `;
   }
   if (query.beginTime) {
     querySQL += ` and start_time >= '${query.beginTime}' `;
   }
   if (query.endTime) {
-    querySQL += ` and start_time <= '${query.endTime}' `;
+    querySQL += ` and end_time <= '${query.endTime}' `;
   }
 
   // 排序
-  let sortSql = ' order by start_time ';
+  let sortSql = ' order by  ';
+  if (query.sortField) {
+    sortSql += ` ${query.sortField} `;
+  }else{
+    sortSql += ` start_time `;
+  }
+  
   if (query.sortOrder === 'asc') {
     sortSql += ' asc ';
   } else {

src/views/perfManage/goldTarget/index.vue

@@ -29,6 +29,10 @@ let queryParams = reactive({
   /**记录时间 */
   beginTime: '',
   endTime: '',
+  /**排序字段 */
+  sortField: 'value',
+  /**排序方式 */
+  sortOrder: 'asc',
   /**当前页数 */
   pageNum: 1,
   /**每页条数 */
@@ -41,6 +45,8 @@ function fnQueryReset() {
     neType: '',
     beginTime: '',
     endTime: '',
+    sortField: 'value',
+    sortOrder: 'asc',
     pageNum: 1,
     pageSize: 20,
   });
@@ -81,29 +87,24 @@ let tableColumns: ColumnsType = [
     title: t('views.perfManage.goldTarget.enTitle'),
     dataIndex: 'enTitle',
     align: 'center',
-    sorter: (a: any, b: any) => {
-      return 1;
-    },
   },
   {
     title: t('views.perfManage.goldTarget.value'),
     dataIndex: 'value',
+    key: 'value',
     align: 'center',
-    sorter: (a: any, b: any) => {
+    sorter: true,
-      return 1;
-    },
   },
   {
     title: t('views.perfManage.goldTarget.startTime'),
     dataIndex: 'startTime',
+    key: 'start_time',
     align: 'center',
     customRender(opt) {
       if (!opt.value) return '';
       return parseDateToStr(opt.value);
     },
-    sorter: (a: any, b: any) => {
+    sorter: true,
-      return 1;
-    },
   },
   {
     title: t('views.perfManage.goldTarget.endTime'),
@@ -153,7 +154,7 @@ function fnTableSize({ key }: MenuInfo) {
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
   tableState.loading = true;
-  if(pageNum){
+  if (pageNum) {
     queryParams.pageNum = pageNum;
   }
   if (!queryRangePicker.value) {
@@ -170,6 +171,19 @@ function fnGetList(pageNum?: number) {
   });
 }
 
+/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
+function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
+  console.log(sorter);
+  const { columnKey, order } = sorter;
+  if (order) {
+    queryParams.sortField = columnKey;
+    queryParams.sortOrder = order.replace('end', '');
+  } else {
+    queryParams.sortOrder = 'asc';
+  }
+  fnGetList(1);
+}
+
 onMounted(() => {
   // 获取网元网元列表
   useNeInfoStore().fnNelist();
@@ -189,7 +203,10 @@ onMounted(() => {
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
           <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item :label="t('views.perfManage.goldTarget.type')" name="neType">
+            <a-form-item
+              :label="t('views.perfManage.goldTarget.type')"
+              name="neType"
+            >
               <a-auto-complete
                 v-model:value="queryParams.neType"
                 :options="useNeInfoStore().getNeSelectOtions"
@@ -198,7 +215,10 @@ onMounted(() => {
             </a-form-item>
           </a-col>
           <a-col :lg="8" :md="12" :xs="24">
-            <a-form-item :label="t('views.perfManage.goldTarget.startTime')" name="queryRangePicker">
+            <a-form-item
+              :label="t('views.perfManage.goldTarget.startTime')"
+              name="queryRangePicker"
+            >
               <a-range-picker
                 v-model:value="queryRangePicker"
                 allow-clear
@@ -286,6 +306,7 @@ onMounted(() => {
         :loading="tableState.loading"
         :data-source="tableState.data"
         :size="tableState.size"
+        @change="fnTableChange"
         :pagination="tablePagination"
         :scroll="{ x: true }"
       >