111

杨磊

2024-05-17 115287b451d6cb2ef3d215c1113d5e52e2f5422b

 src/components/form/form.vue

@@ -1,67 +1,102 @@
<template class="">
   <div>
      <el-form size="mini" :inline="true" style="padding: 30rpx 30rpx 10rpx 30rpx" :model="from"
         class="row demo-form-inline col-xs-12">
         <el-row :gutter="10">
            <el-form-item style="width: 30%;" v-for="(item, i) in from.from" :key="i" :label="item.label">
               <el-input v-if="item.type === 'input'" v-model="item.value" :placeholder="item.label"></el-input>
               <el-input v-if="item.type === 'number'" min="1"  type="number" v-model.number="item.value"
                  :placeholder="item.label"></el-input>
               <el-select v-else-if="item.type === 'select'" v-model="item.value" :placeholder="item.label">
                  <el-option v-for="(option, optionIndex) in item.options" :key="optionIndex"
                     :label="option.label" :value="option.value"></el-option>
               </el-select>
            </el-form-item>
            <!-- 其他表单项省略 -->
            <!-- <el-form-item style="display:block; "> -->
            <view class="flex flex-center Formbtn">

               <el-button style="background-color: #244A7B;color: #fff;" size="mini"
                  @click="handleSubmit">提交</el-button>
               <el-button type="info" plain size="mini" @click="handleReset">重置</el-button>
            </view>
            <!-- </el-form-item> -->
         </el-row>
      </el-form>
   </div>
  <div>
    <el-form
      size="mini"
      :inline="true"
      style="padding: 30rpx 30rpx 10rpx 30rpx"
      :model="from"
      class="row demo-form-inline col-xs-12"
    >
      <el-row :gutter="10">
        <el-form-item
          style="width: 30%"
          v-for="(item, i) in from.from"
          :key="i"
          :label="item.label"
        >
          <el-input
            v-if="item.type === 'input'"
            v-model="item.value"
            :placeholder="item.label"
          ></el-input>
          <el-input
            v-if="item.type === 'number'"
            min="1"
            type="number"
            v-model.number="item.value"
            :placeholder="item.label"
          ></el-input>
          <el-select
            v-else-if="item.type === 'select'"
            v-model="item.value"
            :placeholder="item.label"
          >
            <el-option
              v-for="(option, optionIndex) in item.options"
              :key="optionIndex"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 其他表单项省略 -->
        <!-- <el-form-item style="display:block; "> -->
        <view class="flex flex-center Formbtn">
          <el-button
            style="background-color: #244a7b; color: #fff"
            size="mini"
            @click="handleSubmit"
            >提交</el-button
          >
          <el-button type="info" plain size="mini" @click="handleReset"
            >重置</el-button
          >
        </view>
        <!-- </el-form-item> -->
      </el-row>
    </el-form>
  </div>
</template>
<script>
   export default {
      props: ['from'],
      methods: {
         handleSubmit() {
            this.$message({
               message: '查询成功',
               type: 'success'
            })
            const result = this.from.from.reduce((obj, item) => {
               obj[item.name] = item.value
               return obj
            }, {})
            // 提交逻辑
            this.$emit('submit', result) // 发送 submit 事件，并将表单数据作为参数传递给父组件
         },
         handleReset() {
            this.from.from.forEach(item => {
               item.value = ''
            })
            // 重置逻辑
            // this.$emit('reset') // 发送 reset 事件给父组件
         }
      }
   }
export default {
  props: ["from"],
  mounted(){
   console.log(this.from,"from");
  },
  methods: {
    handleSubmit() {
      this.$message({
        message: "查询成功",
        type: "success",
      });
      const result = this.from.from.reduce((obj, item) => {
        obj[item.name] = item.value;
        return obj;
      }, {});
      // 提交逻辑
      this.$emit("submit", result); // 发送 submit 事件，并将表单数据作为参数传递给父组件
    },
    handleReset() {
      this.from.from.forEach((item) => {
        item.value = "";
      });
      // 重置逻辑
      this.$emit('reset') // 发送 reset 事件给父组件
    },
  },
};
</script>

<style scoped>
   .el-form--inline .el-form-item {
      margin-right: 0;
   }
.el-form--inline .el-form-item {
  margin-right: 0;
}

   ::v-deep .el-form-item__content {
      width: 80%;
   }
::v-deep .el-form-item__content {
  width: 80%;
}

   ::v-deep .el-form-item__content div {
      width: 100%;
   }
</style>
::v-deep .el-form-item__content div {
  width: 100%;
}
</style>