simple321vip
144 lines
3.9 KiB
Vue
144 lines
3.9 KiB
Vue
<template>
|
|
<div class="strategy_form">
|
|
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="140px" class="strategy-ruleForm"
|
|
:size="formSize" status-icon>
|
|
<el-form-item label="strategy_name" prop="strategy_name">
|
|
<el-input v-model="ruleForm.strategy_name" placeholder="demo_strategy_symbol" />
|
|
</el-form-item>
|
|
<el-form-item label="vt_symbol" prop="vt_symbol">
|
|
<el-select v-model="ruleForm.vt_symbol" placeholder="select a vt_symbol">
|
|
<el-option v-for="vt_symbol in store.subscribe_vt_symbols" :value="vt_symbol" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="class_name" prop="class_name">
|
|
<el-select v-model="ruleForm.class_name" placeholder="select a class_name">
|
|
<el-option v-for="name in store.class_names" :value="name" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="setting:">
|
|
</el-form-item>
|
|
<el-form-item label="" prop="setting">
|
|
<el-select v-model="ruleForm.setting.interval" placeholder="select a interval">
|
|
<el-option label="interval:1DAILY" value=1440 />
|
|
<el-option label="interval:4HOUR" value=240 />
|
|
<el-option label="interval:1HOUR" value=60 />
|
|
<el-option label="interval:30MIN" value=30 />
|
|
<el-option label="interval:15MIN" value=15 />
|
|
<el-option label="interval:5MIN" value=5 />
|
|
<el-option label="interval:1MIN" value=1 />
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="" prop="name">
|
|
<el-input v-model="ruleForm.name" placeholder="Please input">
|
|
<template #prepend>interval:</template>
|
|
</el-input>
|
|
</el-form-item> -->
|
|
<el-form-item>
|
|
<el-button type="primary" @click="submitForm(ruleFormRef)">Create</el-button>
|
|
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|
import { create_strategy } from '../../api/cta_strategy'
|
|
import { h } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { strategyStore } from '../../store/strategy'
|
|
|
|
const store = strategyStore()
|
|
|
|
const formSize = ref('default')
|
|
const ruleFormRef = ref<FormInstance>()
|
|
|
|
const ruleForm = reactive({
|
|
strategy_name: '',
|
|
class_name: '',
|
|
vt_symbol: '',
|
|
setting: {
|
|
interval: '',
|
|
},
|
|
|
|
})
|
|
|
|
const clear_form = () => {
|
|
ruleForm.strategy_name = ''
|
|
ruleForm.class_name = ''
|
|
ruleForm.vt_symbol = ''
|
|
ruleForm.setting.interval = ''
|
|
}
|
|
defineExpose({
|
|
clear_form
|
|
})
|
|
|
|
|
|
const rules = reactive<FormRules>({
|
|
strategy_name: [
|
|
{ required: true, message: 'Please input strategy name', trigger: 'blur' },
|
|
{ min: 8, max: 30, message: 'Length should be 8 to 30', trigger: 'blur' },
|
|
],
|
|
interval: [
|
|
{
|
|
required: true,
|
|
message: 'Please select interval',
|
|
trigger: 'change',
|
|
},
|
|
],
|
|
class_name: [
|
|
{
|
|
required: true,
|
|
message: 'Please select class_name'
|
|
},
|
|
],
|
|
vt_symbol: [
|
|
{
|
|
required: true,
|
|
message: 'Please select vt_symbol'
|
|
},
|
|
],
|
|
})
|
|
const emit = defineEmits(['on-create'])
|
|
const submitForm = async (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return
|
|
await formEl.validate((valid, fields) => {
|
|
if (valid) {
|
|
create_strategy(ruleForm).then(res => {
|
|
emit('on-create')
|
|
})
|
|
} else {
|
|
ElMessage({
|
|
message: h('p', null, [
|
|
h('i', { style: 'color: teal' }, 'error submit!' + fields),
|
|
]),
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return
|
|
formEl.resetFields()
|
|
}
|
|
|
|
|
|
</script>
|
|
<style scoped>
|
|
.el-button--text {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.el-select {
|
|
width: 300px;
|
|
}
|
|
|
|
.el-input {
|
|
width: 300px;
|
|
}
|
|
|
|
.dialog-footer button:first-child {
|
|
margin-right: 10px;
|
|
}
|
|
</style> |