st-comp 0.0.47 → 0.0.49

package/packages/VarietySearch/components/ModelSearch/Dialog.vue

@@ -0,0 +1,310 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    class="st-VarietySearch-modelSearch-dialog"
+    :title="data.label"
+    align-center
+    :draggable="true"
+    width="510"
+  >
+    <template v-if="data.type === 'default'">
+      <div class="st-VarietySearch-modelSearch-dialog-content">
+        <el-button
+          v-for="(item, index) in data.options"
+          class="st-VarietySearch-modelSearch-dialog-content-btn"
+          :key="index"
+          size="small"
+          :style="item.style"
+          :type="index === activeIndex ? 'primary' : ''"
+          @click="btnClick(item, index)"
+        >{{ item.btnText }}</el-button>
+      </div>
+      <div>
+        <span>自定义：</span>
+        <el-input
+          v-model="start"
+          :class="!(start || end) && check ? 'st-VarietySearch-factorFilter-border-red' : ''"
+          size="small"
+          style="width: 150px"
+        >
+          <template #append v-if="typeof unitOptions === 'string'">
+            {{ unitOptions }}
+          </template>
+          <template #append v-else-if="typeof unitOptions === 'object'">
+            <el-select
+              v-model="startUnit"
+              :style="{ width: '60px' }"
+              placeholder=""
+              size="small"
+            >
+              <el-option
+                v-for="item in unitOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </el-input>
+        <span style="margin: 0 10px;">~</span>
+        <el-input
+          v-model="end"
+          :class="!(start || end) && check ? 'st-VarietySearch-factorFilter-border-red' : ''"
+          controls-position="right"
+          style="width: 150px"
+          size="small"
+        >
+          <template #append v-if="typeof unitOptions === 'string'">
+            {{ unitOptions }}
+          </template>
+          <template #append v-else-if="typeof unitOptions === 'object'">
+            <el-select
+              v-model="endUnit"
+              :style="{ width: '60px' }"
+              placeholder=""
+              size="small"
+            >
+              <el-option
+                v-for="item in unitOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </template>
+        </el-input>
+      </div>
+    </template>
+    <template v-else-if="data.type === 'radio'">
+      <el-radio-group v-model="radio" class="ml-4">
+        <el-radio
+          v-for="item in data.options"
+          :label="item.value"
+          size="small"
+        >{{ item.label }}</el-radio>
+      </el-radio-group>
+    </template>
+    <template v-else-if="data.type === 'tFeaturelncomes'">
+      <div class="st-VarietySearch-modelSearch-dialog-content">
+        <el-button
+          v-for="(item, index) in data.options"
+          class="st-VarietySearch-modelSearch-dialog-content-btn"
+          :key="index"
+          size="small"
+          :style="item.style"
+          :type="index === activeIndex ? 'primary' : ''"
+          @click="btnClick(item, index)"
+        >{{ item.btnText }}</el-button>
+      </div>
+      <div style="margin-bottom: 10px">
+        <span>自定义：</span>
+        <el-input-number
+          v-model="withFewYears"
+          :class="!withFewYears && check ? 'st-VarietySearch-factorFilter-border-red' : ''"
+          size="small"
+          :min="-9999999"
+          :max="9999999"
+          controls-position="right"
+          style="width: 70px"
+        />
+        <span> 年内 </span>
+        <el-input-number
+          v-model="yearsCount"
+          size="small"
+          :min="0"
+          :max="9999999"
+          controls-position="right"
+          style="width: 70px"
+        />
+        <span>
+          年以上盈利{{ rule === 1 ? "超" : "跌" }}过
+        </span>
+        <el-input-number
+          v-model="netProfit"
+          :class="!netProfit && check ? 'st-VarietySearch-factorFilter-border-red' : ''"
+          size="small"
+          :min="0"
+          :max="9999999"
+          controls-position="right"
+          style="width: 80px"
+        />
+        <span> 亿</span>
+      </div>
+    </template>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button size="small" @click="visible = false">取消</el-button>
+        <el-button size="small" type="primary" @click="submit">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const emit = defineEmits(['update:modelValue', 'submit']);
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    require: true,
+  },
+  data: {
+    type: Object,
+    default: () => ({}),
+  }
+})
+
+const activeIndex = ref(-1) // 快捷选中的index
+const start = ref('') // default类型下的起始值
+const end = ref('') // default类型下的结束值
+const startUnit = ref('') // default类型下的起始值单位
+const endUnit = ref('') // default类型下的结束值单位
+const unitOptions = ref() // default类型下的自定义单位
+const radio = ref() // radio类型下的单选值
+const withFewYears = ref() // tFeaturelncomes类型下的几年内数据
+const yearsCount = ref() // tFeaturelncomes类型下的几年上
+const netProfit = ref() // tFeaturelncomes类型下的差值
+const rule = ref() // tFeaturelncomes类型下的涨跌规则
+const check = ref(false) // 表单校验
+
+const visible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+watch(visible, () => {
+  if (visible) {
+    activeIndex.value = -1
+    start.value = ''
+    end.value = ''
+    startUnit.value = ''
+    endUnit.value = ''
+    unitOptions.value = null
+    radio.value = null
+    withFewYears.value = null
+    yearsCount.value = null
+    netProfit.value = null
+    rule.value = null
+
+    if (props.data.type === 'default') {
+      start.value = props.data.start
+      end.value = props.data.end
+      startUnit.value = props.data.startUnit
+      endUnit.value = props.data.endUnit
+      unitOptions.value = props.data.unitOptions
+    }else if (props.data.type === 'radio') {
+      radio.value = props.data.radio
+    } else if (props.data.type === 'tFeaturelncomes') {
+      withFewYears.value = props.data.withFewYears
+      yearsCount.value = props.data.yearsCount
+      netProfit.value = props.data.netProfit
+      rule.value = props.data.rule
+    }
+  }
+})
+
+watch(
+  () => [start.value, end.value, startUnit.value, endUnit.value],
+  () => { activeIndex.value = -1 },
+  { deep: true }
+)
+
+const btnClick = (item, index) => {
+  activeIndex.value = index
+  if (props.data.type === 'default') {
+    start.value = item.start
+    end.value = item.end
+    startUnit.value = item.startUnit
+    endUnit.value = item.endUnit
+  } else if (props.data.type === 'tFeaturelncomes') {
+    withFewYears.value = item.withFewYears
+    yearsCount.value = item.yearsCount
+    netProfit.value = item.netProfit
+    rule.value = item.rule
+  }
+}
+
+const submit = () => {
+  const { type } = props.data 
+  if (type === 'default') {
+    if (!(start.value || end.value)) {
+      check.value = true
+      ElMessage.error('请检查参数后重试！')
+      return
+    }
+    check.value = false
+    emit('submit', {
+      ...props.data,
+      isEmit: true,
+      start: start.value ? Number(start.value) : null,
+      end: end.value ? Number(end.value): null,
+      startUnit: startUnit.value,
+      endUnit: endUnit.value,
+    })
+  } else if (type === 'radio') {
+    if (radio.value === null) {
+      ElMessage.error('请检查参数后重试！')
+      return
+    }
+    emit('submit', {
+      ...props.data,
+      isEmit: true,
+      radio: radio.value,
+      radioLabel: props.data.options.find(item => item.value === radio.value).label
+    })
+  } else if (type === 'tFeaturelncomes') {
+    if (!(withFewYears.value || netProfit.value)) {
+      check.value = true
+      ElMessage.error('请检查参数后重试！')
+      return
+    }
+    check.value = false
+    emit('submit', {
+      ...props.data,
+      isEmit: true,
+      withFewYears: withFewYears.value,
+      yearsCount: yearsCount.value,
+      netProfit: netProfit.value,
+      rule: rule.value,
+    })
+  }
+  visible.value = false
+}
+</script>
+
+<style lang="scss">
+.st-VarietySearch-modelSearch-border-red .el-input__wrapper,
+.st-VarietySearch-modelSearch-border-red .el-select__wrapper {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+.st-VarietySearch-modelSearch-dialog {
+  .el-dialog__header {
+    padding-top: 10px;
+    .el-dialog__headerbtn {
+      width: 40px;
+      height: 40px;
+    }
+  }
+  .el-dialog__body {
+    border-top: 1px solid var(--el-border-color);
+    border-bottom: 1px solid var(--el-border-color);
+    padding: 15px 20px;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.st-VarietySearch-modelSearch-dialog-content {
+  &-btn {
+    margin-bottom: 10px;
+    margin-left: 0;
+  }
+}
+</style>