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

src/views/algorithm-manage/MonthSetting.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, toRaw, watch } from 'vue';
+
+import { t } from '@/i18n';
+
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+
+interface Props {
+  temperatureSettingValue: string;
+}
+const formRef = ref<FormInstance>();
+const props = defineProps<Props>();
+type MonthKey = '01' | '02' | '03' | '04' | '05' | '06' | '07' | '08' | '09' | '10' | '11' | '12';
+// 月份数组（不需要响应式）
+const months: MonthKey[] = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
+
+// 初始化温度数据
+const temperatureData = reactive<Record<MonthKey, number>>({
+  '01': 0,
+  '02': 0,
+  '03': 0,
+  '04': 0,
+  '05': 0,
+  '06': 0,
+  '07': 0,
+  '08': 0,
+  '09': 0,
+  '10': 0,
+  '11': 0,
+  '12': 0,
+});
+
+const getTemperatureData = () => {
+  // 将 set 的值赋给 temperatureData
+  const setValues = props.temperatureSettingValue.split(','); // 拆分字符串为数组
+  setValues.forEach((value, index) => {
+    const month = (index + 1).toString().padStart(2, '0') as MonthKey; // 生成两位月份键
+    temperatureData[month] = Number(value); // 转换为数字并赋值
+  });
+};
+
+const rules: Record<string, Rule[]> = {
+  '01': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  '02': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  '03': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  '04': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  '05': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  '06': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  '07': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  '08': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  '09': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  '10': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  '11': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  '12': [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+};
+
+watch(
+  () => props.temperatureSettingValue,
+  (count) => {
+    if (count) {
+      getTemperatureData();
+    }
+  },
+);
+
+const formResetFields = () => {
+  formRef.value?.resetFields();
+};
+const formRefSubmit = () => {
+  return formRef.value?.validate() || Promise.resolve();
+};
+
+const stringConversion = () => {
+  const keysInOrder: MonthKey[] = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
+
+  const rawData = toRaw(temperatureData); // 获取原始对象
+  return keysInOrder.map((key) => rawData[key]).join(',');
+};
+
+defineExpose({
+  formRefSubmit,
+  formResetFields,
+  stringConversion,
+});
+
+onMounted(() => {
+  getTemperatureData();
+});
+</script>
+
+<template>
+  <div>
+    <div class="set-time">
+      <AForm ref="formRef" :model="temperatureData" :rules="rules">
+        <AFlex justify="space-between" wrap="wrap">
+          <AFlex v-for="(item, index) in months" :key="index" align="center" class="temperature-bottom">
+            <AFormItem :name="item">
+              <AFlex align="center">
+                <div class="time-text">{{ item }}月</div>
+                <AInputNumber v-model:value="temperatureData[item]" class="input-width" addon-after="℃" />
+              </AFlex>
+            </AFormItem>
+          </AFlex>
+        </AFlex>
+      </AForm>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.input-width {
+  width: 192px;
+}
+
+.time-text {
+  margin-right: 12px;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+  color: #666;
+  text-align: left;
+}
+
+.set-time {
+  width: 1114px;
+  height: 180px;
+  padding: 16px;
+  margin-bottom: 24px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.temperature-bottom {
+  margin-bottom: 30px;
+}
+</style>