版本更新
This commit is contained in:
Zhang.WH
@@ -0,0 +1,223 @@
|
||||
<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>
|
||||
|
||||
<!-- <!– 分割线 –>-->
|
||||
<!-- <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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user