st-comp 0.0.21 → 0.0.22

package/packages/VarSeach/components/ModalQuery/index.vue

@@ -0,0 +1,449 @@
+<template>
+  <div>
+    <span>{{ props.label }}</span>
+    <el-button text type="primary" size="small" @click="clean">
+      不限
+    </el-button>
+    <el-button
+      v-for="button in orderByInfoList"
+      :key="button.id"
+      size="small"
+      text
+      @click="
+        () => {
+          // 从新设置制空选中状态，在打开弹窗
+          button.children.forEach((item) => {
+            item.active = false;
+          });
+          openModal(button);
+        }
+      "
+    >
+      {{ button.dictName }}
+    </el-button>
+    <el-popover :visible="visible" :width="500" :show-arrow="false">
+      <div class="title">
+        {{ title }}
+      </div>
+      <div
+        v-if="visible"
+        :style="`width: 450px;margin: 20px auto;display: flex;flex-wrap: wrap;justify-content:flex-start;
+        ${
+          column !== 'tFeaturelncomes' ? 'justify-content:space-between;' : ''
+        } };`"
+      >
+        <el-button
+          v-for="formItem in orderByInfoObj.children"
+          :key="formItem.id"
+          class="btn"
+          :type="formItem.active ? 'primary' : ''"
+          :style="`margin-right:15px;width: ${
+            formItem.width ? formItem.width : 120
+          }px;}`"
+          @click="
+            () => {
+              ase = formItem.ase;
+              start = formItem.start;
+              end = formItem.end;
+              unitObj.startUnit = formItem.startUnit;
+              unitObj.endUnit = formItem.endUnit;
+              const list = orderByInfoObj.children.map((item) => ({
+                ...item,
+                active: item.id === formItem.id ? true : false,
+              }));
+              orderByInfoObj.children = list;
+              if (column === 'tFeaturelncomes') {
+                tFeaturelncomes.yearsCount = formItem.yearsCount;
+                tFeaturelncomes.netProfit = formItem.netProfit;
+                tFeaturelncomes.withFewYears = formItem.withFewYears;
+                tFeaturelncomes.rule = formItem.rule;
+              }
+            }
+          "
+        >
+          {{ formItem.btnText }}
+        </el-button>
+        <div v-if="column === 'st'">
+          <el-radio-group v-model="hasSt">
+            <el-radio :label="0"> 否 </el-radio>
+            <el-radio :label="1"> 是 </el-radio>
+          </el-radio-group>
+        </div>
+        <div v-if="column !== 'st' && column !== 'tFeaturelncomes'">
+          <el-space style="width: 100%; margin: 20px 0; text-align: start">
+            <span>自定义：</span>
+            <el-input
+              v-model="start"
+              style="width: 150px"
+              @input="
+                () => {
+                  orderByInfoObj.children = orderByInfoObj.children.map(
+                    (item) => ({
+                      ...item,
+                      active: false,
+                    })
+                  );
+                }
+              "
+              @change="
+                (val) => {
+                  start = val.replace(/\D/g, '');
+                }
+              "
+            >
+              <template #append v-if="column !== 'pb' && column !== 'peTtm'">
+                <el-select
+                  v-model="unitObj.startUnit"
+                  :style="{ width: '75px' }"
+                  placeholder=""
+                >
+                  <el-option
+                    v-for="item in unitOpt"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </template>
+            </el-input>
+            <span>~</span>
+            <el-input
+              v-model="end"
+              controls-position="right"
+              style="width: 150px"
+              @input="
+                () => {
+                  orderByInfoObj.children = orderByInfoObj.children.map(
+                    (item) => ({
+                      ...item,
+                      active: false,
+                    })
+                  );
+                }
+              "
+              @change="
+                (val) => {
+                  end = val.replace(/\D/g, '');
+                }
+              "
+            >
+              <template #append v-if="column !== 'pb' && column !== 'peTtm'">
+                <el-select
+                  v-model="unitObj.endUnit"
+                  :style="{ width: '75px' }"
+                  placeholder=""
+                >
+                  <el-option
+                    v-for="item in unitOpt"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </template>
+            </el-input>
+          </el-space>
+        </div>
+        <div v-if="column === 'tFeaturelncomes'" style="margin-top: 20px">
+          <span>自定义：</span>
+          <el-input-number
+            v-model="tFeaturelncomes.withFewYears"
+            size="small"
+            :min="-9999999"
+            :max="9999999"
+            controls-position="right"
+            style="width: 70px"
+            @change="
+              () => {
+                orderByInfoObj.children = orderByInfoObj.children.map(
+                  (item) => ({ ...item, active: false })
+                );
+              }
+            "
+          />
+          <span> 年内 </span>
+          <el-input-number
+            v-model="tFeaturelncomes.yearsCount"
+            size="small"
+            :min="0"
+            :max="9999999"
+            controls-position="right"
+            style="width: 70px"
+            @change="
+              () => {
+                orderByInfoObj.children = orderByInfoObj.children.map(
+                  (item) => ({ ...item, active: false })
+                );
+              }
+            "
+          />
+          <span> 年以上盈利超过 </span>
+          <el-input-number
+            v-model="tFeaturelncomes.netProfit"
+            size="small"
+            :min="0"
+            :max="9999999"
+            controls-position="right"
+            style="width: 80px"
+            @change="
+              () => {
+                orderByInfoObj.children = orderByInfoObj.children.map(
+                  (item) => ({ ...item, active: false })
+                );
+              }
+            "
+          />
+          <span> 亿</span>
+        </div>
+      </div>
+      <div class="card-bottom">
+        <el-button style="margin-right: 15px" @click="closeModal">
+          取消
+        </el-button>
+        <el-button type="primary" @click="confirmOk"> 确认 </el-button>
+      </div>
+      <template #reference>
+        <div />
+      </template>
+    </el-popover>
+    <slot>
+      <el-tag
+        v-for="(item, i) in queryList"
+        :key="item.id"
+        closable
+        type="info"
+        :disable-transitions="false"
+        @close="handleClose(item)"
+        style="margin-right: 5px"
+      >
+        <span>{{ item.dictName }}：</span>
+        <span v-if="item.column === 'st'">
+          {{ item.hasSt === 1 ? "是" : "否" }}
+        </span>
+        <span v-else-if="item.column === 'tFeaturelncomes'">
+          {{
+            item.btnText
+              ? item.btnText
+              : item.yearsCount
+              ? `${item.withFewYears}年内${
+                  item.yearsCount || "-"
+                }年以上盈利超过${item.netProfit}亿`
+              : `${item.withFewYears}年内盈利超过${item.netProfit}亿`
+          }}
+        </span>
+        <span v-else>
+          {{
+            item.start !== null && item.end !== null
+              ? `${item.start}${item.startUnit} ~ ${item.end}${item.endUnit}`
+              : ""
+          }}
+          {{
+            item.start === null && item.end !== null
+              ? `< ${item.end}${item.endUnit}`
+              : ""
+          }}
+          {{
+            item.end === null && item.start !== null
+              ? `
+            ${item.start}${item.startUnit}>`
+              : ""
+          }}
+          {{ item.ase ? `从小到大` : "" }}
+        </span>
+        <el-text
+          style="font-size: 12px; cursor: pointer"
+          type="primary"
+          @click="() => openModal({ ...item, type: 1 })"
+        >
+          修改
+        </el-text>
+      </el-tag>
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive, onMounted } from "vue";
+import { orderByInfoFormatFn } from "./index.ts";
+import { cloneDeep } from "lodash";
+const emit = defineEmits(["updata", "update:modelValue"]);
+const props = defineProps({
+  label: {
+    type: String,
+    default: "因子筛选",
+  },
+  orderByInfoList: {
+    type: Array,
+    default: [],
+  },
+  modelValue: {
+    type: Array,
+    default: [],
+  },
+});
+
+const orderByInfoList = computed({
+  get() {
+    return orderByInfoFormatFn(props.orderByInfoList);
+  },
+});
+const orderByInfoObj = ref({});
+const visible = ref(false);
+const ase = ref("");
+const title = ref("");
+const hasSt = ref("");
+const start = ref(null);
+const end = ref(null);
+const column = ref("floatMarketCapital");
+const tFeaturelncomes = ref({
+  yearsCount: null,
+  netProfit: null,
+  withFewYears: null,
+  rule: null,
+});
+const unitObj = ref({
+  startUnit: "亿",
+  endUnit: "亿",
+});
+const unitOpt = ref([]);
+const queryList = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
+// 打开弹窗
+const openModal = (button) => {
+  title.value = button.dictName;
+  column.value = button?.key;
+  start.value = button.start;
+  end.value = button.end;
+  tFeaturelncomes.value = {
+    yearsCount: button.yearsCount,
+    netProfit: button.netProfit,
+    withFewYears: button.withFewYears,
+    rule: button.rule,
+  };
+  orderByInfoObj.value = button.type
+    ? queryList.value.find((item) => item.id === button.id)
+    : orderByInfoList.value.find((item) => item.id === button.id);
+  // 设置单位
+  if (
+    button.key === "turnoverRate" ||
+    button.key === "peTtm" ||
+    button.key === "pb" ||
+    button.key === "roe"
+  ) {
+    unitOpt.value = [{ id: 1, value: "%", label: "%" }];
+    unitObj.value = {
+      startUnit: "%",
+      endUnit: "%",
+    };
+  } else if (button.key === "eps") {
+    unitOpt.value = [{ id: 1, value: "元", label: "元" }];
+    unitObj.value.startUnit = "元";
+    unitObj.value.endUnit = "元";
+  } else {
+    unitOpt.value = [
+      { id: 1, value: "元", label: "元" },
+      { id: 2, value: "千万", label: "千万" },
+      { id: 3, value: "亿", label: "亿" },
+    ];
+    unitObj.value.startUnit = button.startUnit || "亿";
+    unitObj.value.endUnit = button.endUnit || "亿";
+  }
+  visible.value = true;
+};
+// 关闭
+const closeModal = () => {
+  end.value = null;
+  start.value = null;
+  unitObj.value.startUnit = "亿";
+  unitObj.value.endUnit = "亿";
+  visible.value = false;
+};
+const confirmOk = () => {
+  let hasTFeaturelncomes = false;
+  if (column.value === "tFeaturelncomes") {
+    if (
+      tFeaturelncomes.value.netProfit === null ||
+      tFeaturelncomes.value.withFewYears === null
+    ) {
+      ElMessage.error("请输入必填项");
+      return;
+    }
+    hasTFeaturelncomes = true;
+  }
+  const data = {
+    column: column.value,
+    key: column.value,
+    id: orderByInfoObj.value.id,
+    dictCode: orderByInfoObj.value.id,
+    dictId: orderByInfoObj.value.id,
+    dictName: orderByInfoObj.value.dictName,
+    label: orderByInfoObj.value.dictName,
+    ase: ase.value,
+    hasSt: hasSt.value,
+    start: start.value,
+    startUnit: unitObj.value.startUnit,
+    end: end.value,
+    endUnit: unitObj.value.endUnit,
+    btnText: hasTFeaturelncomes ? tFeaturelncomes.value.btnText : null,
+    rule: hasTFeaturelncomes ? tFeaturelncomes.value.rule : 1,
+    yearsCount: hasTFeaturelncomes ? tFeaturelncomes.value.yearsCount : null,
+    netProfit: hasTFeaturelncomes ? tFeaturelncomes.value.netProfit : null,
+    withFewYears: hasTFeaturelncomes
+      ? tFeaturelncomes.value.withFewYears
+      : null,
+    children: cloneDeep(orderByInfoObj.value.children),
+  };
+  visible.value = false;
+  const row = queryList.value.find((item) => item.column === data.column);
+  if (row) {
+    queryList.value = [
+      ...queryList.value.filter((item) => item.column !== data.column),
+      data,
+    ];
+  } else {
+    queryList.value.push(data);
+  }
+};
+
+const clean = () => {
+  queryList.value = [];
+};
+const handleClose = (row) => {
+  queryList.value = queryList.value.filter((item) => item.key !== row.key);
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 16px;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+  border-bottom: 1px solid #6c6e72;
+}
+
+.list {
+  margin-top: 10px;
+}
+
+.card-bottom {
+  border-top: 1px solid #6c6e72;
+  padding-top: 10px;
+  margin-top: 0;
+  text-align: right;
+}
+
+.btn {
+  margin-bottom: 10px;
+  width: 120px;
+}
+
+.el-button + .el-button {
+  margin: 0;
+}
+</style>