st-comp 0.0.209 → 0.0.211

package/packages/VarietySearch/index.vue

@@ -1,12 +1,12 @@
 <script setup name="VarietySearch">
-import { watch, computed } from "vue";
+import { watch, computed, provide } from "vue";
 import defaultConfig from "./config.js";
 import FactorScreen from "./components/FactorScreen/index.vue";
 import CommonIndicator from "./components/CommonIndicator/index.vue";
+import CompositeOrder from "./components/CompositeOrder/index.vue";
 
 const props = defineProps({ config: { type: Object, default: {} } });
 const searchData = defineModel("searchData");
-
 searchData.value = Object.assign(searchData.value, {
   // 品种市场
   varietyMarket: null,
@@ -26,10 +26,12 @@ searchData.value = Object.assign(searchData.value, {
     list: [],
     sqlEnable: 0,
     sqlValue: null,
-    factorSelectExpr: '',
+    factorSelectExpr: "",
   },
   // 常用指标
   commonIndicator: [],
+  // 组合排序
+  compositeOrder: [],
 });
 
 // 合并配置项
@@ -43,6 +45,7 @@ const config = computed(() => {
   });
   return result;
 });
+
 // 选项数据源: 品种市场
 const varietyMarketDict = computed(() => {
   return config.value.varietyMarket.options;
@@ -115,7 +118,7 @@ const clearRow = (key) => {
         list: [],
         sqlEnable: 0,
         sqlValue: null,
-        factorSelectExpr: '',
+        factorSelectExpr: "",
       };
       break;
     }
@@ -123,6 +126,10 @@ const clearRow = (key) => {
       searchData.value[key] = [];
       break;
     }
+    case "compositeOrder": {
+      searchData.value[key] = [];
+      break;
+    }
     default: {
       searchData.value[key] = null;
       break;
@@ -155,6 +162,7 @@ watch(
   }
 );
 
+provide("clearRow", clearRow);
 defineExpose({
   // 生成接口传参结构的数据
   formatData: (data) => {
@@ -438,6 +446,10 @@ defineExpose({
         };
       }
     }
+    // 8.组合分析
+    if (data.compositeOrder?.length) {
+      params.compositeOrder = data.compositeOrder.map(({ name, value }) => ({ name, value }));
+    }
     console.log("%c[st-varietySearch]: 接口传参数据生成完毕", "color: green", params);
     return params;
   },
@@ -462,10 +474,12 @@ defineExpose({
         list: [],
         sqlEnable: 0,
         sqlValue: null,
-        factorSelectExpr: '',
+        factorSelectExpr: "",
       },
       // 常用指标
       commonIndicator: [],
+      // 组合排序
+      compositeOrder: [],
     };
   },
 });
@@ -474,137 +488,131 @@ defineExpose({
 <template>
   <div class="variety-search">
     <!-- 品种市场 -->
-    <div
-      v-if="config.varietyMarket?.show"
-      class="variety-search-row"
-    >
-      <div class="title">
-        <span>品种市场: </span>
-        <span @click="clearRow('varietyMarket')">不限</span>
+    <template v-if="config.varietyMarket?.show">
+      <div class="variety-search-row">
+        <div class="title">
+          <span>品种市场: </span>
+          <span @click="clearRow('varietyMarket')">不限</span>
+        </div>
+        <el-radio-group
+          v-model="searchData.varietyMarket"
+          size="small"
+        >
+          <el-radio
+            v-for="{ label, value } in varietyMarketDict"
+            :label="label"
+            :value="value"
+            :key="value"
+          />
+        </el-radio-group>
       </div>
-      <el-radio-group
-        v-model="searchData.varietyMarket"
-        size="small"
-      >
-        <el-radio
-          v-for="{ label, value } in varietyMarketDict"
-          :label="label"
-          :value="value"
-          :key="value"
-        />
-      </el-radio-group>
-    </div>
+    </template>
     <!-- 常用选项 -->
-    <div
-      v-if="config.commonOption?.show && commonOptionDict.length"
-      class="variety-search-row"
-    >
-      <div class="title">
-        <span>常用选项: </span>
-        <span @click="clearRow('commonOption')">不限</span>
+    <template v-if="config.commonOption?.show && commonOptionDict.length">
+      <div class="variety-search-row">
+        <div class="title">
+          <span>常用选项: </span>
+          <span @click="clearRow('commonOption')">不限</span>
+        </div>
+        <el-checkbox-group
+          v-model="searchData.commonOption"
+          size="small"
+        >
+          <el-checkbox
+            v-for="{ label, value } in commonOptionDict"
+            :label="label"
+            :value="value"
+            :key="value"
+          />
+        </el-checkbox-group>
       </div>
-      <el-checkbox-group
-        v-model="searchData.commonOption"
-        size="small"
-      >
-        <el-checkbox
-          v-for="{ label, value } in commonOptionDict"
-          :label="label"
-          :value="value"
-          :key="value"
-        />
-      </el-checkbox-group>
-    </div>
+    </template>
     <!-- 上市板块 -->
-    <div
-      v-if="config.marketIds?.show && marketIdsOptionDict.length"
-      class="variety-search-row"
-    >
-      <div class="title">
-        <span>上市板块: </span>
-        <span @click="clearRow('marketIds')">不限</span>
+    <template v-if="config.marketIds?.show && marketIdsOptionDict.length">
+      <div class="variety-search-row">
+        <div class="title">
+          <span>上市板块: </span>
+          <span @click="clearRow('marketIds')">不限</span>
+        </div>
+        <el-checkbox-group
+          v-model="searchData.marketIds"
+          size="small"
+        >
+          <el-checkbox
+            v-for="{ label, value } in marketIdsOptionDict"
+            :label="label"
+            :value="value"
+            :key="value"
+          />
+        </el-checkbox-group>
       </div>
-      <el-checkbox-group
-        v-model="searchData.marketIds"
-        size="small"
-      >
-        <el-checkbox
-          v-for="{ label, value } in marketIdsOptionDict"
-          :label="label"
-          :value="value"
-          :key="value"
-        />
-      </el-checkbox-group>
-    </div>
+    </template>
     <!-- 自定标签 -->
-    <div
-      v-if="config.customTag?.show && customTagDict.length"
-      class="variety-search-row"
-    >
-      <div class="title">
-        <span>自定标签: </span>
-        <span @click="clearRow('customTag')">不限</span>
+    <template v-if="config.customTag?.show && customTagDict.length">
+      <div class="variety-search-row">
+        <div class="title">
+          <span>自定标签: </span>
+          <span @click="clearRow('customTag')">不限</span>
+        </div>
+        <el-checkbox-group
+          v-model="searchData.customTag"
+          size="small"
+        >
+          <el-checkbox
+            v-for="{ label, value } in customTagDict"
+            :label="label"
+            :value="value"
+            :key="value"
+          />
+        </el-checkbox-group>
       </div>
-      <el-checkbox-group
-        v-model="searchData.customTag"
-        size="small"
-      >
-        <el-checkbox
-          v-for="{ label, value } in customTagDict"
-          :label="label"
-          :value="value"
-          :key="value"
-        />
-      </el-checkbox-group>
-    </div>
+    </template>
     <!-- 价差转换 -->
-    <div
-      v-if="config.jcTranslate?.show"
-      class="variety-search-row"
-    >
-      <div class="title">
-        <span>价差转换: </span>
-        <span @click="clearRow('jcTranslate')">不限</span>
+    <template v-if="config.jcTranslate?.show">
+      <div class="variety-search-row">
+        <div class="title">
+          <span>价差转换: </span>
+          <span @click="clearRow('jcTranslate')">不限</span>
+        </div>
+        <el-radio-group
+          v-model="searchData.jcTranslate.type"
+          size="small"
+        >
+          <el-radio :value="2">价差转品种</el-radio>
+          <el-radio :value="1">品种转价差</el-radio>
+        </el-radio-group>
+        <el-select
+          v-show="searchData.jcTranslate.type === 1"
+          v-model="searchData.jcTranslate.jcList"
+          size="small"
+          multiple
+          collapse-tags
+          collapse-tags-tooltip
+          placeholder="请选择价差品种"
+          style="width: 140px"
+        >
+          <el-option
+            v-for="item in jcOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
       </div>
-      <el-radio-group
-        v-model="searchData.jcTranslate.type"
-        size="small"
-      >
-        <el-radio :value="2">价差转品种</el-radio>
-        <el-radio :value="1">品种转价差</el-radio>
-      </el-radio-group>
-      <el-select
-        v-show="searchData.jcTranslate.type === 1"
-        v-model="searchData.jcTranslate.jcList"
-        size="small"
-        multiple
-        collapse-tags
-        collapse-tags-tooltip
-        placeholder="请选择价差品种"
-        style="width: 140px"
-      >
-        <el-option
-          v-for="item in jcOptions"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
-        />
-      </el-select>
-    </div>
+    </template>
     <!-- 因子筛选 -->
-    <div
-      v-if="config.factorScreen?.show"
-      class="variety-search-row"
-    >
-      <div class="title">
-        <span>因子筛选: </span>
-        <span @click="clearRow('factorScreen')">不限</span>
+    <template v-if="config.factorScreen?.show">
+      <div class="variety-search-row">
+        <div class="title">
+          <span>因子筛选: </span>
+          <span @click="clearRow('factorScreen')">不限</span>
+        </div>
+        <FactorScreen
+          v-model:data="searchData.factorScreen"
+          :config="config.factorScreen"
+        />
       </div>
-      <FactorScreen
-        v-model:data="searchData.factorScreen"
-        :config="config.factorScreen"
-      />
-    </div>
+    </template>
     <!-- 常用指标 -->
     <CommonIndicator
       v-model:data="searchData.commonIndicator"
@@ -612,6 +620,13 @@ defineExpose({
       :commonOption="searchData.commonOption"
       :config="config.commonIndicator"
     />
+    <!-- 组合排序 -->
+    <CompositeOrder
+      v-model:data="searchData.compositeOrder"
+      :varietyMarket="searchData.varietyMarket"
+      :commonOption="searchData.commonOption"
+      :config="config.compositeOrder"
+    />
   </div>
 </template>
 

package/src/pages/VarietySearch/index.vue

@@ -1,10 +1,12 @@
 <script setup>
 import axios from "axios";
-import { inject, ref, onMounted, computed } from "vue";
+import { inject, ref, onMounted, computed, watch } from "vue";
 import { getAlarDict, getAlarFreq, getAlarFactor } from "./api.js";
 
 const { request } = inject("stConfig"); // 组件库全局配置
 
+const searchData = ref({});
+
 const varietySearchRef = ref(null);
 const varietySearchData = ref({
   varietyMarket: null,
@@ -21,21 +23,87 @@ const varietySearchData = ref({
     sqlValue: null,
   },
   commonIndicator: [],
+  compositeOrder: [],
 });
 const varietySearchConfig = ref({});
 
 const data = ref();
+const multipleTableRef = ref();
+const orderByInfo = ref({ code: "asc" });
+const sortable = ref("tableHeader");
 
 // 前端筛选条件格式化成API接口入参
 const apiParams = computed(() => {
   return { ...(varietySearchRef.value?.formatData(varietySearchData.value) ?? {}) };
 });
 
-// 查询数据
-const queryData = async () => {
-  const { body } = await request.post("/common/qt/getFeatureInfosByPage", { ...apiParams.value, pageNum: 1, pageSize: 20 });
+// 表格: 获取表格数据
+const getTableData = async () => {
+  const params = {
+    ...apiParams.value,
+    pageNum: 1,
+    pageSize: 20,
+  };
+  /**
+   * @description: 根据用户最后一次操作交互的时机, 决定排序使用哪个维度
+   * 常规排序字段: orderByInfo
+   * 表头的orderByInfo和预警组的orderByInfo为顺序互斥, 谁最后操作就用谁
+   * 
+   * 组合排序字段: compositeOrder
+   * 表头的orderByInfo与compositeOrder为顺序互斥, 谁最后操作就用谁
+   * 预警组的orderByInfo与compositeOrder为强制互斥, compositeOrder有值就一定优先使用compositeOrder
+   */
+  switch (sortable.value) {
+    case "tableHeader": {
+      delete params.compositeOrder; // 删除组合排序参数
+      params.orderByInfo = orderByInfo.value; // 传入常规排序参数
+      break;
+    }
+    case "alarmGroup": {
+      // 1. 如果存在组合排序, 那就直接使用组合排序
+      if (params.compositeOrder && params.compositeOrder.length) {
+        // 不进行额外处理
+      }
+      // 2. 如果不存在组合排序, 预警组选项存在
+      else if (searchData.value.groupId) {
+        orderByInfo.value = { orderByIndex: "asc" };
+        params.orderByInfo = orderByInfo.value;
+      }
+      // 3. 如果不存在组合排序, 预警组选项也不存在, 就传递常规排序初始值
+      else {
+        orderByInfo.value = { code: "asc" };
+        params.orderByInfo = orderByInfo.value;
+        multipleTableRef.value.clearSort();
+      }
+      break;
+    }
+    case "compositeOrder": {
+      multipleTableRef.value.clearSort(); // 清除表头排序样式
+      break;
+    }
+  }
+  console.log(params);
+  const { body } = await request.post("/common/qt/getFeatureInfosByPage", params);
   data.value = body.list;
 };
+// 表格: 排序
+const sortChange = ({ column, prop, order }) => {
+  const sortValueMap = new Map([
+    ["ascending", "asc"],
+    ["descending", "desc"],
+  ]);
+  if (order !== null) {
+    orderByInfo.value = {
+      [prop]: sortValueMap.get(order),
+    };
+  } else {
+    orderByInfo.value = {
+      code: "asc", //默认值
+    };
+  }
+  sortable.value = "tableHeader";
+  getTableData();
+};
 
 onMounted(async () => {
   const dicAlar = await getAlarDict();
@@ -100,8 +168,21 @@ onMounted(async () => {
     commonIndicator: {
       show: true,
     },
+    // 组合排序 [选项: 组合默认]
+    compositeOrder: {
+      show: true,
+    },
   };
 });
+watch(
+  () => varietySearchData.value.compositeOrder,
+  (newValue) => {
+    sortable.value = "compositeOrder";
+  },
+  {
+    deep: true,
+  }
+);
 </script>
 
 <template>
@@ -111,10 +192,15 @@ onMounted(async () => {
       v-model:searchData="varietySearchData"
       :config="varietySearchConfig"
     />
-    <el-divider content-position="left">格式化转为接口入参格式apiParams:</el-divider>
-    <div>{{ apiParams }}</div>
-    <el-divider content-position="left">结果内容, 分页为1, 页码为20:</el-divider>
-    <el-button @click="queryData">查询测试</el-button>
+    <div>品种池组件接口参数: {{ apiParams }}</div>
+    <el-button
+      size="small"
+      type="primary"
+      @click="getTableData"
+      style="margin: 10px 0"
+    >
+      查询测试
+    </el-button>
     <el-table
       class="alarm"
       ref="multipleTableRef"
@@ -122,6 +208,7 @@ onMounted(async () => {
       :stripe="true"
       :border="true"
       :data="data"
+      @sort-change="sortChange"
     >
       <el-table-column
         type="selection"
@@ -157,3 +244,9 @@ onMounted(async () => {
     </el-table>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.alarm {
+  height: calc(100vh - 400px);
+}
+</style>