<!-- 存储管理 -->
<script lang="ts" setup name="storage">
import type { FormInstance, FormRules } from 'element-plus'
// 前端校验规则
const rules: FormRules = reactive({
  account: [{ required: true, message: '账号不能为空', trigger: ['blur', 'change'] }],
})
// 表单收集数据
const userForm = reactive({
  id: '', // 编号
})
// 重置
const reset = () => {

}
const ruleFormRef = ref()
// 确认
const saveData = () => {
  ruleFormRef.value?.validate((valid: any) => {
    if (valid) {
    // 验证通过
    }
  })
}
</script>

<template>
  <el-card width="50%">
    <div class="title">
      存储管理
    </div>
    <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="110px">
      <el-row :gutter="20" class="footer">
        <el-col :span="12">
          <el-form-item label="服务器IP" prop="">
            <el-input
              v-model.trim="userForm.id" type="text"
              placeholder="必填"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="footer">
        <el-col :span="12">
          <el-form-item label="数据库" prop="">
            <el-input
              v-model.trim="userForm.id" type="text"
              placeholder="必填"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="footer">
        <el-col :span="12">
          <el-form-item label="用户名" prop="">
            <el-input
              v-model.trim="userForm.id" type="text"
              placeholder="必填"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="footer">
        <el-col :span="12">
          <el-form-item label="密码" prop="">
            <el-input
              v-model.trim="userForm.id" type="text"
              placeholder="必填"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer footer">
      <el-button type="primary" @click="saveData">
        保存
      </el-button>
      <el-button style="margin-left: 200px;" @click="reset">
        重置
      </el-button>
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
}

.title {
  text-align: center;
  line-height: 1.5;
  font-weight: 700;
  margin-bottom: 20px;
}
</style>