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

<template>
  <el-dialog
      title="添加频次详情"
      v-model="dialogVisible"
      width="520px"
      top="8vh"
      :close-on-click-modal="false"
      @close="resetForm"
  >
    <!-- 表单区域 -->
    <el-form
        :model="formData"
        ref="form"
        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
            type="textarea"
            v-model="formData.memo"
            :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>


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

<script setup>
import { ref, watch, defineProps, defineEmits } 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>