st-comp 0.0.21 → 0.0.22

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

@@ -0,0 +1,306 @@
+<template>
+  <div class="component-main">
+    <span>{{ props.label }}</span>
+    <el-button text type="primary" size="small" @click="clean">
+      不限
+    </el-button>
+    <slot>
+      <div style="display: inline-block">
+        <el-tag
+          style="margin-right: 5px"
+          v-for="(item, i) in tagList"
+          :key="item.key"
+          closable
+          type="info"
+          :disable-transitions="false"
+          @close="delData(item)"
+        >
+          {{ item.freqName || "" }}
+          {{ item.factorName || "" }}
+          {{ item.startScore === null ? " / " : item.startScore + "分" }}
+          <span>~</span>
+          {{ item.endScore === null ? " / " : item.endScore + "分" }}
+        </el-tag>
+      </div>
+    </slot>
+    <el-popover :visible="visible" placement="top" :width="700">
+      <div class="title">因子筛选</div>
+      <el-row class="list">
+        <el-col :span="6"> 周期 </el-col>
+        <el-col :span="6"> 因子 </el-col>
+        <el-col :span="8"> 分数范围 </el-col>
+        <el-col :span="4">
+          <div style="text-align: center">操作</div>
+        </el-col>
+      </el-row>
+      <el-row
+        v-for="(formItem, index) in form"
+        :key="formItem.key"
+        class="list"
+      >
+        <el-col :span="6">
+          <el-select
+            v-model="formItem.freqId"
+            :class="formItem.freqStatus ? 'border-red' : ''"
+            :style="{ width: '150px' }"
+            size="small"
+            placeholder="请选择"
+            @change="
+              (val) => {
+                formItem.freqStatus = false;
+                formItem.freqName = freqList.find(
+                  (fitem) => fitem.value === val
+                ).label;
+              }
+            "
+          >
+            <el-option
+              v-for="item in freqList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-select
+            v-model="formItem.factorId"
+            :class="formItem.factorStatus ? 'border-red' : ''"
+            :style="{ width: '150px' }"
+            size="small"
+            placeholder="请选择"
+            @change="
+              (val) => {
+                formItem.factorStatus = false;
+                formItem.factorName = factorList.find(
+                  (fitem) => fitem.id === val
+                ).factorName;
+              }
+            "
+          >
+            <el-option
+              v-for="item in factorList"
+              :key="item.id"
+              :label="item.factorName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-col>
+        <el-col :span="8">
+          <el-input-number
+            v-model="formItem.startScore"
+            :class="formItem.startScoreStatus ? 'border-red' : ''"
+            style="width: 100px"
+            :step="0.5"
+            :min="-999"
+            :max="999"
+            controls-position="right"
+            size="small"
+            @change="
+              () => {
+                formItem.startScoreStatus = false;
+                formItem.endScoreStatus = false;
+              }
+            "
+          />
+          <span> ~ </span>
+          <el-input-number
+            v-model="formItem.endScore"
+            :class="formItem.endScoreStatus ? 'border-red' : ''"
+            style="width: 100px"
+            :step="0.5"
+            :min="-999"
+            :max="999"
+            controls-position="right"
+            size="small"
+            @change="
+              (val) => {
+                formItem.startScoreStatus = false;
+                formItem.endScoreStatus = false;
+              }
+            "
+          />
+        </el-col>
+        <el-col :span="4">
+          <el-button
+            size="small"
+            type="primary"
+            text
+            @click="
+              () => {
+                form.splice(index + 1, 0, {
+                  factorId: null,
+                  freqId: null,
+                  startScore: null,
+                  endScore: null,
+                  key: new Date().getTime(),
+                });
+              }
+            "
+          >
+            添加
+          </el-button>
+          <el-button
+            size="small"
+            type="danger"
+            text
+            @click="
+              () => {
+                form.splice(index, 1);
+              }
+            "
+          >
+            删除
+          </el-button>
+        </el-col>
+      </el-row>
+      <div class="card-bottom">
+        <el-button @click="visible = false"> 取消 </el-button>
+        <el-button type="primary" @click="submitPost()"> 确认 </el-button>
+      </div>
+      <template #reference>
+        <div style="display: inline-block">
+          <el-button type="primary" size="small" @click="open">
+            添加
+          </el-button>
+        </div>
+      </template>
+    </el-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+const emit = defineEmits(["updata", "update:modelValue"]);
+const props = defineProps({
+  label: {
+    type: String,
+    default: "因子筛选",
+    require: true,
+  },
+  modelValue: {
+    type: Array,
+    default: [],
+    require: true,
+  },
+  freqList: {
+    type: Array,
+    default: [],
+  },
+  factorList: {
+    type: Array,
+    default: [],
+  },
+});
+
+const visible = ref(false);
+const form = ref([]);
+const tagList = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
+const open = () => {
+  if (!form.value.length) {
+    form.value.push({
+      factorId: null,
+      freqId: null,
+      startScore: null,
+      endScore: null,
+      key: new Date().getTime(),
+    });
+  }
+  visible.value = true;
+};
+
+const delData = (row) => {
+  form.value = form.value.filter((item) => item.key !== row.key);
+  tagList.value = tagList.value.filter((item) => item.key !== row.key);
+};
+
+const clean = () => {
+  form.value = [];
+  tagList.value = [];
+};
+
+const submitPost = () => {
+  let verify = true;
+  const list = form.value.map((item, i) => {
+    const row = { ...item };
+    if (!row.factorId || !row.freqId) {
+      verify = false;
+      row.factorStatus = !row.factorId ? true : false;
+      row.freqStatus = !row.freqId ? true : false;
+    }
+    if (
+      (row.startScore === "" || row.startScore === null) &&
+      (row.endScore === "" || row.endScore === null)
+    ) {
+      verify = false;
+      row.startScoreStatus = true;
+      row.endScoreStatus = true;
+    } else {
+      row.startScoreStatus = false;
+      row.endScoreStatus = false;
+    }
+    form.value[i] = { ...row };
+    return row;
+  });
+  if (verify) {
+    visible.value = false;
+    tagList.value = list;
+  } else {
+    ElMessage.warning("请输入未填项");
+  }
+};
+
+const init = () => {
+  form.value = [
+    {
+      factorId: null,
+      freqId: null,
+      startScore: null,
+      endScore: null,
+      key: new Date().getTime(),
+    },
+  ];
+  tagList.value = [];
+};
+
+defineExpose({
+  delData, // 删除某条数据
+  clean, // 清空数据
+  init, // 初始化组件方法
+});
+</script>
+<style>
+.component-main {
+  display: inline-block;
+}
+.border-red .el-input__wrapper,
+.border-red .el-select__wrapper {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+</style>
+<style lang="scss" scoped>
+.title {
+  font-size: 16px;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+  border-bottom: 1px solid #6c6e72;
+}
+.card-bottom {
+  border-top: 1px solid #6c6e72;
+  padding-top: 10px;
+  margin-top: 15px;
+  text-align: right;
+}
+
+.list {
+  margin-top: 10px;
+}
+</style>

package/packages/VarSeach/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StVarSeach from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-varSeach", StVarSeach);
+  },
+}

package/packages/VarSeach/index.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import ModalScreenv from "./components/ModalScreenv/index.vue";
+import ModalQuery from "./components/ModalQuery/index.vue";
+
+const emit = defineEmits(["update:modelValue"]);
+/**
+ * 组件接收参数
+ * @param {Object} formConfig 筛选配置
+ * @param {Boolean} formSeachShow 是否展开
+ */
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    require: true,
+    default: () => ({}),
+  },
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  config: {
+    type: Object,
+    require: true,
+    default: () => ({}),
+  },
+});
+const formData = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
+
+// 另设表单数据源,避免直接使用传入数据源导致非主动的子影响父
+const formConfig = computed(() => {
+  return Object.keys(props.config).map((key) => {
+    return {
+      key,
+      ...props.config[key],
+      show:
+        props.config[key].show === undefined ? true : props.config[key].show, // 默认展示
+    };
+  });
+});
+</script>
+
+<template>
+  <!-- 神兔-品种池筛 -->
+  <div v-show="props.show" class="st-var-seach">
+    <div class="form-item" v-for="(item, index) in formConfig" :key="index">
+      <div v-if="item.type === 'checkboxGroup'" v-show="item.show === true">
+        <span class="el-form-item__label">{{ item.label }}:</span>
+        <el-button
+          text
+          size="small"
+          type="primary"
+          @click="
+            () => {
+              formData[item.key] = [];
+            }
+          "
+        >
+          不限
+        </el-button>
+        <el-checkbox-group
+          v-model="formData[item.key]"
+          size="small"
+          style="display: inline-block; vertical-align: middle"
+        >
+          <el-checkbox
+            :label="items.dictCode"
+            v-for="items in item.options"
+            :key="items.dictCode"
+          >
+            {{ items.dictName }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <div
+        v-if="item.type === 'factorscores'"
+        v-show="item.show === true"
+        class="form-item"
+      >
+        <ModalScreenv
+          :label="item.label"
+          v-model="formData[item.key]"
+          :freqList="item.freqList"
+          :factorList="item.factorList"
+        ></ModalScreenv>
+      </div>
+      <div
+        v-if="item.type === 'queryList'"
+        v-show="item.show === true"
+        class="form-item"
+        style="min-height: 70px"
+      >
+        <ModalQuery
+          :label="item.label"
+          v-model="formData[item.key]"
+          :orderByInfoList="item.orderByInfoList"
+        ></ModalQuery>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+// 需要写在外面,不然会被Vue唯一标识符顶掉导致样式不生效
+</style>
+<style lang="scss" scoped>
+.st-var-seach {
+  .form-item {
+    line-height: 32px;
+    font-size: 14px;
+  }
+}
+</style>

package/packages/index.ts

@@ -3,10 +3,13 @@ import StChartLayout from "./ChartLayout/index.ts"
 import StDialog from "./Dialog/index.ts"
 import StHeatMap from "./HeatMap/index.ts"
 import StKline from "./Kline/index.ts"
+import StLinearLegend from "./LinearLegend/index.ts"
 import StMap from "./Map/index.ts"
 import StPagination from "./Pagination/index.ts"
 import StPie from "./Pie/index.ts"
 import StTable from "./Table/index.ts"
+import StTreeMap from "./TreeMap/index.ts"
+import StVarSeach from "./VarSeach/index.ts"
         
 export default {
   install(app: App) {
@@ -14,10 +17,13 @@ export default {
     StDialog.install(app)
     StHeatMap.install(app)
     StKline.install(app)
+    StLinearLegend.install(app)
     StMap.install(app)
     StPagination.install(app)
     StPie.install(app)
     StTable.install(app)
+    StTreeMap.install(app)
+    StVarSeach.install(app)
   },
 }