vue3 from表单模板 省时省力 复制即用

<template>
  <div class="pages">
    <div class="top">
      <div class="left">
        <div class="input">
          <el-date-picker
            v-model="datetime"
            type="year"
            placeholder="请选择日期"
            size="large"
            format="YYYY"
            :clearable="false"
          />
        </div>
        <div class="input">
          <el-input
            style="width: 220px"
            v-model="SearchValue"
            class="w-50 m-2"
            placeholder="请输入关键字搜索"
            :prefix-icon="Search"
          />
        </div>
        <div>
          <el-select v-model="slectValue" class="m-2" placeholder="请选择公司" size="large">
            <el-option
              v-for="item in slectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="right">
        <el-button type="primary" @click="drawer = true">新增</el-button>
      </div>
    </div>
    <el-card>
      <div class="tabeldata">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          :header-cell-style="hederstyle"
          :row-style="rowstyle"
          :cell-style="cellstyle"
        >
          <el-table-column prop="name1" label="交易单位" align="center" width="150" />
          <el-table-column prop="name2" label="交易名称" align="center" width="200" />
          <el-table-column prop="name3" label="消纳方式" align="center" width="150" />
          <el-table-column prop="name4" label="交易类型" align="center" width="150" />
          <el-table-column prop="name5" label="意向方名称" align="center" width="150" />
          <el-table-column prop="name6" label="意向签订时间" align="center" width="150" />
          <el-table-column prop="name" label="意向电价" align="center" width="150" />
          <el-table-column prop="name7" label="落地省份" align="center" width="150" />
          <el-table-column prop="name8" label="总意向电量" align="center" width="150" />
         
        </el-table>
      </div>
    </el-card>
    <el-drawer v-model="drawer" :size="600" :direction="direction" :before-close="handleClose">
      <div class="top">
        <el-date-picker
          v-model="datetime"
          type="year"
          placeholder="请选择日期"
          size="large"
          format="YYYY"
          :clearable="false"
        />
        <div class="btnbox">
          <el-button type="primary" @click="submitForm(ruleFormRef)">保存 </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </div>
      </div>
      <el-card>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          :label-width="120"
          border
          class="demo-ruleForm"
          :size="formSize"
        >
          <div class="box">
            <el-form-item label="交易单位" prop="unit">
              <el-select class="inputDeep" v-model="ruleForm.unit" placeholder="请选择交易单位">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="交易名称" prop="jyname">
              <el-input
                style="width: 206.76px"
                maxlength="150"
                class="inputDeep"
                v-model="ruleForm.jyname"
                placeholder="请输入交易名称"
              />
            </el-form-item>
            <el-form-item label="消纳方式" prop="way">
              <el-select class="inputDeep" v-model="ruleForm.way" placeholder="请选择消纳方式">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="交易类型" prop="type">
              <el-select class="inputDeep" v-model="ruleForm.type" placeholder="请选择交易类型">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
          </div>
          <div class="box">
            <el-form-item label="意向方名称" prop="name">
              <el-input
                maxlength="150"
                style="width: 206.76px"
                class="inputDeep"
                v-model="ruleForm.name"
                placeholder="请输入意向方名称"
              />
            </el-form-item>
            <el-form-item label="意向方签订时间" prop="time">
              <el-date-picker
                style="height: 32px; width: 206.76px"
                v-model="ruleForm.time"
                type="date"
                placeholder="请选择意向方签订时间"
                size="large"
                format="YYYY-MM-DD"
              />
            </el-form-item>

            <el-form-item label="意向电价" prop="electricityprice">
              <el-input
                type="number"
                style="width: 206.76px"
                class="no_number"
                v-model="ruleForm.electricityprice"
                oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+4)}"
                placeholder="请输入意向电价"
              />
              <span class="yz">元/MWh</span>
            </el-form-item>

            <el-form-item label="落地省份" prop="province">
              <el-select class="inputDeep" v-model="ruleForm.province" placeholder="请选择落地省份">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
              </el-select>
            </el-form-item>
          </div>
         
        </el-form>
      </el-card>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
  import moment from 'moment';
  import { Search } from '@element-plus/icons-vue';
  import { ref } from 'vue';
  import type { FormInstance } from 'element-plus';
  const formSize = ref('default');
  const ruleFormRef = ref<FormInstance>();
  const datetime = ref(moment());
  const direction = ref('ttb');
  const slectValue = ref('青海公司');
  const SearchValue = ref('');
  const drawer = ref(false);
  const slectList = [
    {
      value: 'all',
      label: '青海公司',
    },
   
  ];

  const tableData = [
    {
      name: '1',
     
    },
  ];
  onMounted(() => {});
  const ruleForm = reactive({
    unit: '',
    jyname: '',
    way: '',
    type: '',
    name: '',
    time: moment(),
    electricityprice: '',
    province: '',
   
  });

  const rules = reactive({
    unit: [{ required: true, message: '请选择交易单位', trigger: 'change' }],
    jyname: [{ required: true, message: '请输入交易名称', trigger: 'blur' }],
    way: [{ required: true, message: '请选择消纳方式', trigger: 'change' }],
    type: [{ required: true, message: '请选择交易类型', trigger: 'change' }],
    electricityprice: [{ required: true, message: '请输入意向电价', trigger: 'blur' }],
  });
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
      if (valid) {
        console.log('submit!');
      } else {
        console.log('error submit!');
        return false;
      }
    });
  };
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
  };
  const hederstyle = {
    background: '#f0f0f0',
    color: '#000',
    border: '1px solid #ccc',
  };
  const rowstyle = {
    color: '#000',
    border: '1px solid #ccc',
  };
  const cellstyle = {
    border: '1px solid #ccc',
    color: '#000',
  };
</script>

<style lang="less" scoped>
  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }
  ::v-deep input[type='number'] {
    -moz-appearance: textfield !important;
  }
  .pages {
    padding: 2px;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      border-radius: 2px;
      background-color: #eee;
      padding: 5px;
      .left {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        width: 60%;
        .input {
          width: 20%;
          margin-right: 60px;
          .el-input {
            height: 38px;
          }
        }
      }
    }
    .box {
      display: flex;
      justify-content: space-around;
    }
    .yz {
      position: absolute;
      // top: -20px;
      color: #aeb0b6;
      right: 5px;
    }
  }
</style>