hvac-web/src/views/algorithm-manage/SetInterval.vue

<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">{{ $t('algorithmManage.periodTime') }}</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">{{ $t('algorithmManage.temperatureRange') }}</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"
                    :placeholder="t('common.pleaseEnter')"
                  />
                </AFormItem>

                <div>{{ $t('common.to') }}</div>
                <AFormItem name="upper">
                  <AInputNumber
                    class="input-number"
                    v-model:value="form.upper"
                    addon-after="℃"
                    :bordered="false"
                    :min="-99"
                    :max="999"
                    :placeholder="t('common.pleaseEnter')"
                  />
                </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>