You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.3 KiB
116 lines
2.3 KiB
<script setup lang="ts">
|
|
import { add, update } from 'apis/matrix'
|
|
import FtDialog from 'components/common/FTDialog/index.vue'
|
|
import { FtMessage } from 'libs/message'
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
formData: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
})
|
|
const emits = defineEmits(['ok', 'cancel'])
|
|
|
|
onMounted(() => {
|
|
if (props.formData.id) {
|
|
form.value = { ...props.formData }
|
|
}
|
|
})
|
|
|
|
const form = ref({})
|
|
|
|
const rules = {
|
|
name: [
|
|
{ required: true, message: '请输入基质名称', trigger: 'blur' },
|
|
],
|
|
}
|
|
|
|
const formRef = ref()
|
|
|
|
const okLoading = ref(false)
|
|
const okHandle = () => {
|
|
formRef.value.validate(async (valid: any) => {
|
|
if (!valid) {
|
|
return
|
|
}
|
|
okLoading.value = true
|
|
// TODO 调用保存接口
|
|
if (form.value.id) {
|
|
await update(form.value)
|
|
}
|
|
else {
|
|
await add(form.value)
|
|
}
|
|
setTimeout(() => {
|
|
okLoading.value = false
|
|
FtMessage.success('保存成功')
|
|
emits('ok')
|
|
}, 300)
|
|
})
|
|
}
|
|
|
|
const cancel = () => {
|
|
emits('cancel')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<FtDialog visible :title="form.id ? '编辑基质' : '新增基质'" width="40%" :ok-handle="okHandle" @cancel="cancel">
|
|
<div class="dialog-content">
|
|
<el-form ref="formRef" label-width="120" :model="form" :rules="rules">
|
|
<el-form-item
|
|
label="基质名称" prop="name" :rules="[
|
|
{
|
|
required: true,
|
|
message: '请输入基质名称',
|
|
trigger: 'blur',
|
|
},
|
|
{
|
|
min: 1,
|
|
max: 20,
|
|
message: '1-20个字符',
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
]"
|
|
>
|
|
<el-input v-model="form.name" placeholder="" />
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</FtDialog>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.el-form-item__error) {
|
|
font-size: 40px;
|
|
}
|
|
.dialog-content {
|
|
display: flex;
|
|
align-items: center; /* 垂直居中 */
|
|
justify-content: center; /* 水平居中 */
|
|
height: 400px; /* 确保容器高度撑开 */
|
|
}
|
|
.el-select {
|
|
width: 80%;
|
|
}
|
|
.el-input {
|
|
width: 80%;
|
|
}
|
|
.unit-text {
|
|
font-size: 40px;
|
|
color: #0349A8;
|
|
font-weight: 500;
|
|
margin-left: 20px;
|
|
}
|
|
.select-box {
|
|
display: flex;
|
|
margin: 40px;
|
|
}
|
|
.route-img {
|
|
display: flex;
|
|
img {
|
|
width: 70px;
|
|
}
|
|
}
|
|
</style>
|