st-comp 0.0.277 → 0.0.279

package/packages/FactorWarning/index.vue

@@ -1,754 +0,0 @@
-<script setup>
-import zhCn from "element-plus/es/locale/lang/zh-cn";
-import { InfoFilled } from "@element-plus/icons-vue";
-import { ref, watch } from "vue";
-import { defaultShowConfig } from "./tools";
-import { debounce } from "st-func";
-
-const segmentedValue = ref("ruleForm");
-const visible = defineModel("visible", { default: false });
-const emit = defineEmits(["add", "delete", "enabled", "closed", "shortcutAdd", "shortcutDelete"]);
-const props = defineProps({
-  // 弹窗名称
-  title: { type: [String, null], default: null },
-  // 因子数据
-  moreFactorOptions: { type: Array, default: () => [] },
-  emptyFactorOptions: { type: Array, default: () => [] },
-  // 管理数据
-  tableData: { type: Array, default: () => [] },
-  // 快捷配置数据
-  shortcutData: { type: Array, default: () => [] },
-
-  // 字段展示配置
-  showConfig: { type: Object, default: () => ({}) },
-  // 是否支持操作
-  allowOperation: { type: Boolean, default: true },
-});
-const showConfig = Object.assign(defaultShowConfig, props.showConfig);
-
-// 添加因子相关参数
-const ruleFormRef = ref(null);
-const ruleForm = ref({
-  factorType: 1,
-  factorSelectedList: [],
-  totalCount: 1,
-  minPrice: null,
-  maxPrice: null,
-  mark: null,
-});
-const rules = ref({
-  factorType: [{ required: true, message: "请选择交易类型", trigger: "blur" }],
-  factorSelectedList: [{ required: true, message: "请选择预警因子", trigger: "blur" }],
-  totalCount: [{ required: true, message: "请填写预警次数", trigger: "blur" }],
-});
-// 快捷配置相关参数
-const shortcut_ruleFormRef = ref(null);
-const shortcut_ruleForm = ref({
-  shortcutName: null,
-  factorType: 1,
-  factorSelectedList: [],
-  totalCount: 1,
-});
-const shortcut_rules = ref({
-  factorType: [{ required: true, message: "请选择交易类型", trigger: "blur" }],
-  factorSelectedList: [{ required: true, message: "请选择预警因子", trigger: "blur" }],
-  totalCount: [{ required: true, message: "请填写预警次数", trigger: "blur" }],
-  shortcutName: [{ required: true, message: "请填写配置名称", trigger: "blur" }],
-});
-
-// [添加, 快捷配置] 重置
-const handleResetForm = () => {
-  ruleForm.value = {
-    factorType: 1,
-    factorSelectedList: [],
-    totalCount: 1,
-    minPrice: null,
-    maxPrice: null,
-    mark: null,
-  };
-  shortcut_ruleForm.value = {
-    shortcutName: null,
-    factorType: 1,
-    factorSelectedList: [],
-    totalCount: 1,
-  };
-};
-
-// [添加] 内置3次+
-const handleThreeAdd = async (factorName) => {
-  Object.assign(ruleForm.value, {
-    factorSelectedList: [factorName],
-    totalCount: 3,
-  });
-  const fsParams = {
-    factorSelectedList: ruleForm.value.factorSelectedList.map((factorName) => {
-      let totalCount = 3;
-      // 判断表格里面有没有同因子的数据, 如果有的话需要确保增加以后的有效次数 <= 12
-      const repeatData = props.tableData.find(({ factorExtendName }) => factorExtendName === factorName);
-      if (repeatData) {
-        const diff = repeatData.totalCount - repeatData.currentCount;
-        // 如果: 已触发次数 === 触发次数上限, 直接全额添加, 此时后端会另起一行数据的
-        if (diff === 0) totalCount = 3;
-        // 如果: 已触发次数 !== 触发次数上限 确保添加后的diff要小于等于12, 出于兼容老数据1/20类似的情况考虑, 加个容错
-        else totalCount = Math.min(3, 12 - diff >= 0 ? 12 - diff : 0);
-      }
-      return {
-        factorName,
-        ...ruleForm.value,
-        totalCount,
-      };
-    }),
-  };
-  const callBack = () => {
-    const factorType_catch = ruleForm.value.factorType;
-    handleResetForm();
-    ruleForm.value.factorType = factorType_catch;
-  };
-  handleSubmit(ruleFormRef.value, fsParams, callBack);
-};
-// [添加] 快捷提交
-const handleFastControls = async (item) => {
-  const data = JSON.parse(item.data);
-  Object.assign(ruleForm.value, {
-    factorType: data.factorType,
-    factorSelectedList: data.factorSelectedList,
-    totalCount: data.totalCount,
-  });
-  const fsParams = {
-    // 通过快捷进行添加的因子, 具备有效次数上限10的校验
-    factorSelectedList: ruleForm.value.factorSelectedList.map((factorName) => {
-      let totalCount = data.totalCount;
-      // 判断表格里面有没有同因子的数据, 如果有的话需要确保增加以后的有效次数 <= 10
-      const repeatData = props.tableData.find(({ factorExtendName }) => factorExtendName === factorName);
-      if (repeatData) {
-        const diff = repeatData.totalCount - repeatData.currentCount;
-        // 如果: 已触发次数 === 触发次数上限, 直接全额添加, 此时后端会另起一行数据的
-        if (diff === 0) totalCount = data.totalCount;
-        // 如果: 已触发次数 !== 触发次数上限 确保添加后的diff要小于等于10, 出于兼容老数据1/20类似的情况考虑, 加个容错
-        else totalCount = Math.min(data.totalCount, 10 - diff >= 0 ? 10 - diff : 0);
-      }
-      return {
-        factorName,
-        ...ruleForm.value,
-        totalCount,
-      };
-    }),
-  };
-  const callBack = () => handleResetForm();
-  handleSubmit(ruleFormRef.value, fsParams, callBack);
-};
-// [添加] 普通提交
-const handleSubmit = debounce(async (formEl, fsParams, callBack) => {
-  if (!formEl) return;
-  await formEl.validate((valid) => {
-    if (!valid) return false;
-    // 将表单值抛出
-    const params = fsParams ?? {
-      factorSelectedList: ruleForm.value.factorSelectedList.map((factorName) => {
-        return {
-          factorName,
-          ...ruleForm.value,
-        };
-      }),
-    };
-    emit("add", params);
-    if (callBack) {
-      callBack();
-    } else {
-      visible.value = false;
-    }
-  });
-}, 200);
-
-// [快捷配置] 保存配置
-const handleSaveShortcut = async (formEl) => {
-  if (!formEl) return;
-  await formEl.validate((valid) => {
-    if (!valid) return false;
-    // 将表单值抛出
-    const params = {
-      shortcutName: shortcut_ruleForm.value.shortcutName,
-      data: JSON.stringify(shortcut_ruleForm.value),
-    };
-    emit("shortcutAdd", params);
-    handleResetForm();
-  });
-};
-// [快捷配置] 回显配置
-const handleClickShortcut = (item) => {
-  shortcut_ruleForm.value = JSON.parse(item.data);
-};
-// [快捷配置] 删除配置
-const handleDeleteShortcut = (item) => {
-  ElMessageBox.confirm(`是否确认删除配置: ${item.shortcutName} ?`, "删除提示", {
-    confirmButtonText: "确认",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(() => emit("shortcutDelete", item));
-};
-
-watch(
-  () => visible.value,
-  (newValue) => {
-    if (newValue) {
-      segmentedValue.value = props.allowOperation ? "ruleForm" : "table";
-      handleResetForm();
-    }
-  },
-  {
-    immediate: true,
-  }
-);
-</script>
-
-<template>
-  <div class="st-factorWarning">
-    <el-config-provider :locale="zhCn">
-      <el-dialog
-        v-model="visible"
-        width="1020"
-        align-center
-        destroy-on-close
-        @closed="emit('closed')"
-      >
-        <!-- 头部: 标题 + 切换 -->
-        <template #header="{ close, titleId, titleClass }">
-          <div class="custom-header">
-            <div :class="titleClass">
-              <span style="margin-right: 4px">因子预警</span>
-              <span>{{ title }}</span>
-            </div>
-            <el-segmented
-              v-model="segmentedValue"
-              size="default"
-              :options="[
-                { label: '添加', value: 'ruleForm', disabled: !allowOperation },
-                { label: '管理', value: 'table', disabled: false },
-                { label: '快捷配置', value: 'shortcut', disabled: !allowOperation },
-              ]"
-            />
-          </div>
-        </template>
-        <!-- 内容: 添加 -->
-        <template v-if="segmentedValue === 'ruleForm'">
-          <el-form
-            ref="ruleFormRef"
-            :model="ruleForm"
-            :rules="rules"
-            size="default"
-            label-width="90px"
-          >
-            <!-- 交易类型 -->
-            <el-form-item
-              label="交易类型:"
-              prop="factorType"
-            >
-              <el-button
-                type="danger"
-                :plain="ruleForm.factorType !== 1"
-                @click="
-                  () => {
-                    if (ruleForm.factorType === -1) {
-                      ruleForm.factorSelectedList = [];
-                    }
-                    ruleForm.factorType = 1;
-                  }
-                "
-              >
-                多
-              </el-button>
-              <el-button
-                type="success"
-                :plain="ruleForm.factorType !== -1"
-                @click="
-                  () => {
-                    if (ruleForm.factorType === 1) {
-                      ruleForm.factorSelectedList = [];
-                    }
-                    ruleForm.factorType = -1;
-                  }
-                "
-              >
-                空
-              </el-button>
-            </el-form-item>
-            <!-- 预警因子 -->
-            <el-form-item
-              label="预警因子:"
-              prop="factorSelectedList"
-            >
-              <el-checkbox-group v-model="ruleForm.factorSelectedList">
-                <template v-if="ruleForm.factorType === 1">
-                  <div
-                    class="factor-checkbox"
-                    v-for="(item, index) in moreFactorOptions"
-                    :key="index"
-                  >
-                    <el-checkbox
-                      :label="item.factorTypeName"
-                      :value="item.factorTypeName"
-                    >
-                      <span class="factor-name">{{ item.factorTypeName }}</span>
-                    </el-checkbox>
-                    <span
-                      class="tag-button"
-                      @click="handleThreeAdd(item.factorTypeName)"
-                      >+3</span
-                    >
-                  </div>
-                </template>
-                <template v-if="ruleForm.factorType === -1">
-                  <div
-                    class="factor-checkbox"
-                    v-for="(item, index) in emptyFactorOptions"
-                    :key="index"
-                  >
-                    <el-checkbox
-                      :label="item.factorTypeName"
-                      :value="item.factorTypeName"
-                    >
-                      <span class="factor-name">{{ item.factorTypeName }}</span>
-                    </el-checkbox>
-                    <span
-                      class="tag-button"
-                      @click="handleThreeAdd(item.factorTypeName)"
-                      >+3</span
-                    >
-                  </div>
-                </template>
-              </el-checkbox-group>
-            </el-form-item>
-            <!-- 预警次数 -->
-            <el-form-item
-              label="预警次数:"
-              prop="totalCount"
-            >
-              <div style="display: flex; align-items: start">
-                <el-input-number
-                  v-model="ruleForm.totalCount"
-                  :min="1"
-                  controls-position="right"
-                  style="margin-right: 20px"
-                />
-                <div
-                  v-if="shortcutData.length"
-                  style="flex: 1"
-                >
-                  <el-button
-                    v-for="item in shortcutData"
-                    :key="item.id"
-                    @click="handleFastControls(item)"
-                    style="margin: 0 12px 4px 0"
-                  >
-                    {{ item.shortcutName }}
-                  </el-button>
-                </div>
-                <el-text
-                  v-else
-                  type="primary"
-                  style="cursor: pointer"
-                  @click="() => (segmentedValue = 'shortcut')"
-                >
-                  暂无快捷配置, 是否点击前往自定义配置?
-                </el-text>
-              </div>
-            </el-form-item>
-            <!-- 价格范围 -->
-            <el-form-item
-              v-if="showConfig.ruleFormPrice"
-              label="价格范围:"
-            >
-              <el-input-number
-                v-model="ruleForm.minPrice"
-                :min="-999"
-                placeholder="请输入"
-                :max="999"
-                controls-position="right"
-              />
-              <span style="margin: 0 5px">~</span>
-              <el-input-number
-                v-model="ruleForm.maxPrice"
-                placeholder="请输入"
-                :min="-999"
-                :max="999"
-                controls-position="right"
-              />
-            </el-form-item>
-            <!-- 备注 -->
-            <el-form-item
-              v-if="showConfig.ruleFormMark"
-              label="备注:"
-            >
-              <el-input
-                v-model="ruleForm.mark"
-                type="textarea"
-                placeholder="请输入关键字"
-                :rows="2"
-                style="width: 380px"
-              />
-            </el-form-item>
-          </el-form>
-        </template>
-        <!-- 内容: 管理 -->
-        <template v-if="segmentedValue === 'table'">
-          <el-table
-            :data="tableData"
-            size="small"
-          >
-            <el-table-column
-              label="预警周期"
-              width="70"
-            >
-              <template #default="scope">
-                {{ scope.row.freqName || "-" }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="交易类型"
-              width="70"
-            >
-              <template #default="scope">
-                <span
-                  v-if="scope.row.factorExtendValue == 1"
-                  style="color: #f56c6c"
-                  >多</span
-                >
-                <span
-                  v-else
-                  style="color: #67c23a"
-                  >空</span
-                >
-              </template>
-            </el-table-column>
-            <el-table-column label="预警因子">
-              <template #default="scope">
-                {{ scope.row.factorExtendName || "-" }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              label="预警次数"
-              width="70"
-            >
-              <template #default="scope">
-                {{ `${scope.row.currentCount} / ${scope.row.totalCount}` }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              v-if="showConfig.tableStatus"
-              label="状态"
-              width="70"
-            >
-              <template #default="scope">
-                <div>
-                  <span v-if="scope.row.enable === 1">未触发</span>
-                  <span v-else-if="scope.row.enable === 2">已触发</span>
-                  <span v-else>-</span>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column
-              v-if="showConfig.tableCreateTime"
-              label="设置时间"
-              width="136"
-            >
-              <template #default="scope">
-                {{ scope.row.createdTime || "-" }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              v-if="showConfig.tableMark"
-              label="备注"
-              width="70"
-            >
-              <template #default="scope">
-                {{ scope.row.mark || "-" }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              v-if="allowOperation"
-              label="操作"
-              width="140"
-            >
-              <template #default="scope">
-                <el-button
-                  v-if="showConfig.tableEnable"
-                  :disabled="scope.row.currentCount !== scope.row.totalCount"
-                  size="small"
-                  @click="emit('enabled', scope.row)"
-                >
-                  启用
-                </el-button>
-                <el-popconfirm
-                  title="确定删除?"
-                  @confirm="emit('delete', scope.row)"
-                >
-                  <template #reference>
-                    <el-button size="small">删除</el-button>
-                  </template>
-                </el-popconfirm>
-              </template>
-            </el-table-column>
-          </el-table>
-        </template>
-        <!-- 内容: 快捷配置 -->
-        <template v-if="segmentedValue === 'shortcut'">
-          <div class="shortcut-title">
-            <span>我的配置</span>
-            <el-tooltip
-              effect="dark"
-              content="如有配置数据, 可点击查看该配置的具体信息"
-              placement="right-start"
-            >
-              <el-icon><InfoFilled /></el-icon>
-            </el-tooltip>
-          </div>
-          <div class="shortcut-config">
-            <template v-if="shortcutData.length">
-              <el-tag
-                v-for="item in shortcutData"
-                :key="item.id"
-                type="primary"
-                size="default"
-                closable
-                @click="handleClickShortcut(item)"
-                @close="handleDeleteShortcut(item)"
-              >
-                {{ item.shortcutName }}
-              </el-tag>
-            </template>
-            <span
-              class="empty"
-              v-else
-              >暂无数据</span
-            >
-          </div>
-          <div class="shortcut-title">
-            <span>新增配置</span>
-            <el-tooltip
-              effect="dark"
-              content="同名配置将会进行覆盖"
-              placement="right-start"
-            >
-              <el-icon><InfoFilled /></el-icon>
-            </el-tooltip>
-          </div>
-          <el-form
-            ref="shortcut_ruleFormRef"
-            :model="shortcut_ruleForm"
-            :rules="shortcut_rules"
-            label-width="90px"
-            size="default"
-          >
-            <!-- 配置名称 -->
-            <el-form-item
-              label="配置名称:"
-              prop="shortcutName"
-            >
-              <el-input
-                v-model="shortcut_ruleForm.shortcutName"
-                maxlength="6"
-                show-word-limit
-                style="width: 160px"
-              />
-            </el-form-item>
-            <!-- 交易类型 -->
-            <el-form-item
-              label="交易类型:"
-              prop="factorType"
-            >
-              <el-button
-                type="danger"
-                :plain="shortcut_ruleForm.factorType !== 1"
-                @click="
-                  () => {
-                    if (shortcut_ruleForm.factorType === -1) {
-                      shortcut_ruleForm.factorSelectedList = [];
-                    }
-                    shortcut_ruleForm.factorType = 1;
-                  }
-                "
-              >
-                多
-              </el-button>
-              <el-button
-                type="success"
-                :plain="shortcut_ruleForm.factorType !== -1"
-                @click="
-                  () => {
-                    if (shortcut_ruleForm.factorType === 1) {
-                      shortcut_ruleForm.factorSelectedList = [];
-                    }
-                    shortcut_ruleForm.factorType = -1;
-                  }
-                "
-              >
-                空
-              </el-button>
-            </el-form-item>
-            <!-- 预警因子 -->
-            <el-form-item
-              label="预警因子:"
-              prop="factorSelectedList"
-            >
-              <el-checkbox-group v-model="shortcut_ruleForm.factorSelectedList">
-                <template v-if="shortcut_ruleForm.factorType === 1">
-                  <el-checkbox
-                    v-for="(item, index) in moreFactorOptions"
-                    :key="index"
-                    :label="item.factorTypeName"
-                    :value="item.factorTypeName"
-                    style="width: 200px"
-                  />
-                </template>
-                <template v-if="shortcut_ruleForm.factorType === -1">
-                  <el-checkbox
-                    v-for="(item, index) in emptyFactorOptions"
-                    :key="index"
-                    :label="item.factorTypeName"
-                    :value="item.factorTypeName"
-                    style="width: 200px"
-                  />
-                </template>
-              </el-checkbox-group>
-            </el-form-item>
-            <!-- 预警次数 -->
-            <el-form-item
-              label="预警次数:"
-              prop="totalCount"
-            >
-              <el-input-number
-                v-model="shortcut_ruleForm.totalCount"
-                :min="1"
-                :max="10"
-                controls-position="right"
-                style="margin-right: 20px"
-              />
-            </el-form-item>
-          </el-form>
-        </template>
-        <!-- 底部 -->
-        <template #footer>
-          <div class="custom-footer">
-            <el-button
-              size="default"
-              @click="visible = false"
-              >关闭</el-button
-            >
-            <el-button
-              v-if="segmentedValue === 'ruleForm'"
-              size="default"
-              type="primary"
-              @click="handleSubmit(ruleFormRef)"
-            >
-              确认
-            </el-button>
-            <el-button
-              v-if="segmentedValue === 'shortcut'"
-              size="default"
-              type="primary"
-              @click="handleSaveShortcut(shortcut_ruleFormRef)"
-            >
-              保存配置
-            </el-button>
-          </div>
-        </template>
-      </el-dialog>
-    </el-config-provider>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.st-factorWarning {
-  :deep(.el-dialog__header) {
-    padding-top: 6px;
-    padding-right: 40px;
-  }
-  :deep(.el-dialog__headerbtn) {
-    top: 9px;
-  }
-  :deep(.el-dialog__body) {
-    padding-top: 0;
-    padding-bottom: 0;
-    .text-btn {
-      display: inline-block;
-      padding: 6px 8px;
-    }
-    .el-table {
-      height: 590px;
-    }
-  }
-  .custom-header {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
-    margin-top: -15px;
-  }
-  .el-radio {
-    margin-right: 20px;
-  }
-  .factor-checkbox {
-    display: inline-block;
-    .factor-name {
-      display: inline-block;
-      width: 200px;
-    }
-    .tag-button {
-      box-sizing: border-box;
-      padding: 2px 4px;
-      margin-right: 10px;
-      margin-left: 10px;
-      font-size: 14px;
-      color: var(--el-color-info);
-      border: var(--el-border);
-      border-radius: 4px;
-      cursor: pointer;
-      transition: 0.2s;
-      &:hover {
-        color: var(--el-color-primary);
-        border-color: var(--el-color-primary);
-      }
-    }
-  }
-  .shortcut-title {
-    display: inline-block;
-    color: var(--el-text-color-regular);
-    width: 100%;
-    padding: 2px;
-    padding-left: 6px;
-    font-size: 14px;
-    background: linear-gradient(90deg, rgba(178, 161, 248, 0.15), rgba(123, 104, 238, 0));
-    position: relative;
-    margin-bottom: 10px;
-    display: flex;
-    align-items: center;
-    &::before {
-      content: "";
-      left: 0;
-      top: 0;
-      width: 3px;
-      height: 100%;
-      background-color: #7b68ee;
-      position: absolute;
-    }
-    .el-icon {
-      margin-top: 1px;
-      margin-left: 4px;
-    }
-  }
-  .shortcut-config {
-    margin-bottom: 10px;
-    .el-tag {
-      cursor: pointer;
-      margin-right: 4px;
-    }
-    .empty {
-      display: inline-block;
-      width: 100%;
-      color: var(--el-color-info);
-      text-align: center;
-    }
-  }
-}
-</style>