perf(views): 编写"算法管理"模块设置区间组件

src/views/algorithm-manage/SetInterval.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import SvgIcon from '@/components/SvgIcon.vue';
+import { t } from '@/i18n';
+
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+import type { TemperatureRange } from '@/types';
+
+interface Props {
+  index: number;
+  form: TemperatureRange;
+}
+const formRef = ref<FormInstance>();
+const emit = defineEmits(['deleteClick', 'addClick']);
+const props = defineProps<Props>();
+const rules: Record<string, Rule[]> = {
+  time: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  lower: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  upper: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+};
+const deleteInterval = () => {
+  emit('deleteClick', props.index);
+};
+const formResetFields = () => {
+  formRef.value?.resetFields();
+};
+const formRefSubmit = () => {
+  return formRef.value?.validate() || Promise.resolve();
+};
+
+defineExpose({
+  formRefSubmit,
+  formResetFields,
+});
+</script>
+
+<template>
+  <div>
+    <AFlex align="center">
+      <div class="set-content">
+        <AForm ref="formRef" :model="form" :rules="rules">
+          <AFlex justify="space-between">
+            <AFormItem name="time">
+              <AFlex align="center" class="div-top">
+                <div class="time-text">时间段</div>
+                <ATimeRangePicker
+                  v-model:value="form.time"
+                  class="time-width"
+                  format="HH:mm"
+                  :separator="$t('common.to')"
+                  show-time
+                />
+              </AFlex>
+            </AFormItem>
+
+            <AFlex align="center">
+              <div class="time-text">温度区间</div>
+              <AFlex class="temperature-style" align="center">
+                <AFormItem name="lower" class="input-padding">
+                  <AInputNumber
+                    class="input-width"
+                    v-model:value="form.lower"
+                    :bordered="false"
+                    :min="-99"
+                    :max="999"
+                  />
+                </AFormItem>
+
+                <div>至</div>
+                <AFormItem name="upper">
+                  <AInputNumber
+                    class="input-number"
+                    v-model:value="form.upper"
+                    addon-after="℃"
+                    :bordered="false"
+                    :min="-99"
+                    :max="999"
+                  />
+                </AFormItem>
+              </AFlex>
+            </AFlex>
+          </AFlex>
+        </AForm>
+      </div>
+      <div @click="$emit('addClick')">
+        <AFlex justify="center" align="center" class="add-style">
+          <SvgIcon name="plus" />
+        </AFlex>
+      </div>
+
+      <div @click="deleteInterval">
+        <AFlex v-if="index !== 0" justify="center" align="center" class="add-style">
+          <SvgIcon name="minus" />
+        </AFlex>
+      </div>
+    </AFlex>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.div-top {
+  margin-top: 8px;
+}
+
+.input-width {
+  width: 100px;
+}
+
+.input-number {
+  width: 100px;
+  margin-left: 40px;
+}
+
+:deep(.set-content) {
+  .ant-input-number-group .ant-input-number-group-addon {
+    background-color: #fff;
+    border: 0;
+    border-left: 1px solid #d9d9d9;
+  }
+
+  .ant-form-item .ant-form-item-control-input {
+    margin-top: -4px;
+  }
+}
+
+:deep(.input-padding) {
+  .ant-input-number .ant-input-number-input {
+    padding-left: 40px;
+  }
+}
+
+.temperature-style {
+  width: 256px;
+  height: 32px;
+  background: #fff;
+  border: 1px solid rgb(0 0 0 / 15%);
+  border-radius: 4px;
+}
+
+.add-style {
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.time-width {
+  width: 256px;
+}
+
+.time-text {
+  margin-right: 12px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: #666;
+  text-align: left;
+}
+
+.set-content {
+  width: 706px;
+  height: 64px;
+  padding: 16px;
+  margin-right: 12px;
+  margin-bottom: 8px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+</style>