his/openhis-ui-vue3/src/views/basicmanage/frequency/components/FreForm.vue

<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加频次详情"
    width="520px"
    top="8vh"
    :close-on-click-modal="false"
    @close="resetForm"
  >
    <!-- 表单区域 -->
    <el-form
      ref="form"
      :model="formData"
      label-width="120px"
      class="freq-form"
    >
      <!-- 字典代码 -->
      <el-form-item label="字典代码">
        <el-input
          v-model="formData.rateCode"
          readonly
          class="input-readonly"
        />
      </el-form-item>

      <!-- 分割线 -->
      <el-divider content-position="left">
        每日执行
      </el-divider>

      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="次数">
            <el-input-number
              v-model="formData.dayCount"
              :min="1"
              :max="99"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="间隔(天)">
            <el-input-number
              v-model="formData.dayInterval"
              :min="0"
              :max="99"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="时间点">
        <el-select
          v-model="formData.dayTimes"
          multiple
          placeholder="选择时间点"
        >
          <el-option
            v-for="time in timeOptions"
            :key="time"
            :value="time"
            :label="time"
          />
        </el-select>
      </el-form-item>

      <!--      &lt;!&ndash; 分割线 &ndash;&gt;-->
      <!--      <el-divider content-position="left">每周执行</el-divider>-->

      <!--      <el-row :gutter="16">-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="是否启用">-->
      <!--            <el-switch-->
      <!--                v-model="formData.weekCycleFlag"-->
      <!--                :active-value="1"-->
      <!--                :inactive-value="0"-->
      <!--                active-text="是"-->
      <!--                inactive-text="否"-->
      <!--            />-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="间隔(周)">-->
      <!--            <el-input-number-->
      <!--                v-model="formData.weekInterval"-->
      <!--                :min="1"-->
      <!--                :max="52"-->
      <!--                controls-position="right"-->
      <!--            />-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->

      <!--      <el-form-item label="周次数">-->
      <!--        <el-input-number-->
      <!--            v-model="formData.weekTimes"-->
      <!--            :min="1"-->
      <!--            :max="7"-->
      <!--            controls-position="right"-->
      <!--        />-->
      <!--      </el-form-item>-->

      <!-- 分割线 -->
      <el-divider content-position="left">
        周期与总计
      </el-divider>

      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="总次数">
            <el-input-number
              v-model="formData.totalExecutionCount"
              :min="1"
              :max="999"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="周期长度">
            <el-input-number
              v-model="formData.executionPeriod"
              :min="1"
              :max="999"
              controls-position="right"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="周期单位">
        <el-select
          v-model="formData.executionPeriodUnit"
          style="width: 100%"
        >
          <el-option
            label="分钟"
            value="minute"
          />
          <el-option
            label="天"
            value="day"
          />
          <el-option
            label="周"
            value="week"
          />
          <el-option
            label="月"
            value="month"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="备注">
        <el-input
          v-model="formData.memo"
          type="textarea"
          :rows="2"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
    </el-form>

    <!-- 底部按钮 -->
    <template #footer>
      <el-button @click="dialogVisible = false">
        取 消
      </el-button>
      <el-button
        type="primary"
        @click="submitForm"
      >
        确 定
      </el-button>
    </template>
  </el-dialog>
</template>


<script setup>
import {defineEmits, defineProps, ref, watch} from "vue";


const props = defineProps({
  modelValue: { type: Boolean, default: false },
  initialFormData: { type: Object, default: () => ({}) }
})

const emit = defineEmits(['update:modelValue', 'submit'])

const formData = ref({
  rateCode: '',
  name: '',
  dayCount: 0,
  dayInterval: 0,
  dayTimes: [],
  weekCycleFlag: 0,
  weekInterval: 0,
  weekTimes: 0,
  continueFlag: 0,
  totalExecutionCount: 0,
  executionPeriod: 0,
  executionPeriodUnit: 'day',
  memo: ''
});


const generateTimeOptions = () => {
  const options = [];
  for (let hour = 0; hour < 24; hour++) {
    for (let minute = 0; minute <= 59; minute += 30) {
      const time = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
      options.push(time);
    }
  }
  return options;
};

const timeOptions = ref(generateTimeOptions());
// 计算属性：让 el-dialog 直接绑定 v-model
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

function resetForm() {
  formData.value = { ...props.initialFormData }
}
function submitForm() {
  emit('submit', formData.value)
  dialogVisible.value = false   // 关闭
}
watch(
    () => props.initialFormData,
    (newVal) => { formData.value = { ...newVal }; },
    { immediate: true }
);
</script>

<style scoped>
.freq-form {
  padding: 0 10px;
}
.input-readonly {
  background-color: #f5f7fa;
  color: #c0c4cc;
}
</style>