自适应2

ZZJ

2021-12-16 dff9fb32c1bac52d378a6d196f670b92610c01d3

 src/pages/index/components/formInfo.vue

@@ -1,259 +1,266 @@
<template>
  <div class="formInfo">
    <el-form ref="form" :model="form" label-width="90px" :rules="rules">
      <el-form-item label="类型" prop="type">
        <el-radio v-model="form.userType" label="personal">个人</el-radio>
        <el-radio v-model="form.userType" label="company">公司</el-radio>
      </el-form-item>

      <el-form-item
        label="公司名称"
        prop="name1"
        v-if="form.userType == 'company'"
      >
        <el-input v-model="form.name1" placeholder="请输入公司名称"></el-input>
      </el-form-item>

      <el-form-item
        label="联系人姓名"
        prop="name2"
        v-if="form.userType == 'company'"
      >
        <el-input
          v-model="form.name2"
          placeholder="请输入联系人姓名"
        ></el-input>
      </el-form-item>

      <el-form-item label="姓名" prop="name" v-else>
        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item label="所在地" prop="addr">
        <el-cascader
          :props="props"
          popper-class="location"
          separator=" "
          @change="handleChange"
          v-model="form.addr"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getList } from "../api";
export default {
  created() {},
  data() {
    return {
      form: {
        userType: "personal",
        name: "",
        name1: "",
        name2: "",
        email: "",
        addr: "",
        provinceId: "",
        cityId: "",
        labelList: "",
      },
      rules: {
        name1: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        name2: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        addr: [{ required: true, message: "请选择所在地", trigger: "blur" }],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
      },
      provinceOptions: [],
      props: {
        lazy: true, // 开启动态加载
        lazyLoad: async (node, resolve) => {
          // 设置加载数据源方法 默认执行一次
          // node 为当前点击的节点
          // resolve 为数据加载完成的回调(必须调用)
          /* node此时属性为:
                当前叶子  level：0
                loaded：true
                loading：false
                是否是根  root：ture
             */
          console.log(node);

          if (node.level == 0) {
            const res = await getList();
            this.provinceOptions = res.data.map((item) => {
              return {
                value: item.id,
                label: item.name, // 选项名
                leaf: false, // 是否为末尾
              };
            });
            resolve(this.provinceOptions);
            console.log(node.level);
          }

          if (node.level == 1) {
            console.log("-------------");
            this.provinceId = node.value;
            const res2 = await getList({
              parentId: node.value,
            });

            const arr = res2.data.map((item) => {
              return {
                value: item.id,
                label: item.name, // 选项名
                leaf: true, // 是否为末尾
              };
            });
            resolve(arr);
          } else {
            console.log(node);
          }
        },
      },
      value: [],
    };
  },

  methods: {
    getFormData() {
      const _this = this;
      let data = null;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(_this.form.userType);
          if (_this.form.userType == "personal") {
            data = {
              userType: _this.form.userType,
              name: _this.form.name,
              email: _this.form.email,
              addr: _this.form.labelList,
              provinceId: _this.form.provinceId,
              cityId: _this.form.cityId,
            };
          } else {
            data = {
              userType: _this.form.userType,
              name: _this.form.name1 + " " + _this.form.name2,
              email: _this.form.email,
              addr: _this.form.labelList,
              provinceId: _this.form.provinceId,
              cityId: _this.form.cityId,
            };
          }
        } else {
          return false;
        }
      });

      return data;
    },
    handleChange(val) {
      this.form.provinceId = val[0] + "";
      this.form.cityId = val[1] + "";

      setTimeout(() => {
        this.form.labelList =
          document.querySelectorAll(".el-cascader input")[0].value;
      }, 200);
    },
  },
};
</script>

<style lang="scss" scoped>
.formInfo {
  .el-form-item ::v-deep {
    label {
      font-size: 14px;
      color: #fff;
      text-align: left;
    }

    .el-radio {
      .el-radio__inner {
        background: none;
        border-color: rgba(255, 255, 255, 0.3) !important;

        &::after {
          width: 6px;
          height: 6px;
        }
      }

      .el-radio__label {
        color: #fff !important;
      }
    }

    .el-form-item__content {
      margin-left: 110px !important;
      text-align: left;
    }

    input {
      background-color: rgba(0, 0, 0, 0.1);
      color: #fff;
      border: none;
      caret-color: #fff !important;
    }

    input:-webkit-autofill,
    textarea:-webkit-autofill,
    select:-webkit-autofill {
      -webkit-text-fill-color: #fff !important;
      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
      background-color: transparent;
      background-image: none;
      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    }

    .el-cascader {
      width: 100%;
    }
  }
}
</style>

<style lang="scss">
.el-popper.el-cascader__dropdown.location {
  background-color: rgb(77, 72, 111);
  border: none;
  margin: 0 0;

  * {
    color: #fff;
    border-color: rgba(255, 255, 2555, 0.1);
  }

  .el-cascader-node:hover,
  .in-active-path,
  .is-active,
  .el-cascader-node {
    background-color: rgb(101, 93, 126) !important;
  }

  .popper__arrow::after,
  .popper__arrow {
    display: none;
  }

  .el-cascader-node__label {
    text-align: left;
  }

  .el-cascader-menu__wrap {
    width: 226px;
    height: 175px;
  }
}
<template>

  <div class="formInfo">

    <el-form ref="form" :model="form" label-width="90px" :rules="rules">

      <el-form-item label="类型" prop="type">

        <el-radio v-model="form.userType" label="personal">个人</el-radio>

        <el-radio v-model="form.userType" label="company">公司</el-radio>

      </el-form-item>



      <el-form-item

        label="公司名称"

        prop="name1"

        v-if="form.userType == 'company'"

      >

        <el-input v-model="form.name1" placeholder="请输入公司名称"></el-input>

      </el-form-item>



      <el-form-item

        label="联系人姓名"

        prop="name2"

        v-if="form.userType == 'company'"

      >

        <el-input

          v-model="form.name2"

          placeholder="请输入联系人姓名"

        ></el-input>

      </el-form-item>



      <el-form-item label="姓名" prop="name" v-else>

        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>

      </el-form-item>



      <el-form-item label="所在地" prop="addr">

        <el-cascader

          :props="props"

          popper-class="location"

          separator=" "

          @change="handleChange"

          v-model="form.addr"

        ></el-cascader>

      </el-form-item>



      <el-form-item label="邮箱" prop="email">

        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>

      </el-form-item>

    </el-form>

  </div>

</template>



<script>

import { getList } from "../api";

export default {

  created() {},

  data() {

    return {

      form: {

        userType: "personal",

        name: "",

        name1: "",

        name2: "",

        email: "",

        addr: "",

        provinceId: "",

        cityId: "",

        labelList: "",

      },

      rules: {

        name1: [{ required: true, message: "请输入公司名称", trigger: "blur" }],

        name2: [

          { required: true, message: "请输入联系人姓名", trigger: "blur" },

        ],

        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],

        addr: [{ required: true, message: "请选择所在地", trigger: "blur" }],

        email: [

          { required: true, message: "请输入邮箱", trigger: "blur" },

          {

            type: "email",

            message: "邮箱格式有误",

            trigger: "blur",

          },

        ],

      },

      provinceOptions: [],

      props: {

        lazy: true, // 开启动态加载

        lazyLoad: async (node, resolve) => {

          // 设置加载数据源方法 默认执行一次

          // node 为当前点击的节点

          // resolve 为数据加载完成的回调(必须调用)

          /* node此时属性为:

                当前叶子  level：0

                loaded：true

                loading：false

                是否是根  root：ture

             */

          console.log(node);



          if (node.level == 0) {

            const res = await getList();

            this.provinceOptions = res.data.map((item) => {

              return {

                value: item.id,

                label: item.name, // 选项名

                leaf: false, // 是否为末尾

              };

            });

            resolve(this.provinceOptions);

            console.log(node.level);

          }



          if (node.level == 1) {

            console.log("-------------");

            this.provinceId = node.value;

            const res2 = await getList({

              parentId: node.value,

            });



            const arr = res2.data.map((item) => {

              return {

                value: item.id,

                label: item.name, // 选项名

                leaf: true, // 是否为末尾

              };

            });

            resolve(arr);

          } else {

            console.log(node);

          }

        },

      },

      value: [],

    };

  },



  methods: {

    getFormData() {

      const _this = this;

      let data = null;

      this.$refs["form"].validate((valid) => {

        if (valid) {

          console.log(_this.form.userType);

          if (_this.form.userType == "personal") {

            data = {

              userType: _this.form.userType,

              name: _this.form.name,

              email: _this.form.email,

              addr: _this.form.labelList,

              provinceId: _this.form.provinceId,

              cityId: _this.form.cityId,

            };

          } else {

            data = {

              userType: _this.form.userType,

              name: _this.form.name1 + " " + _this.form.name2,

              email: _this.form.email,

              addr: _this.form.labelList,

              provinceId: _this.form.provinceId,

              cityId: _this.form.cityId,

            };

          }

        } else {

          return false;

        }

      });



      return data;

    },

    handleChange(val) {

      this.form.provinceId = val[0] + "";

      this.form.cityId = val[1] + "";



      setTimeout(() => {

        this.form.labelList =

          document.querySelectorAll(".el-cascader input")[0].value;

      }, 200);

    },

  },

};

</script>



<style lang="scss" scoped>

.formInfo {

  .el-form-item ::v-deep {

    label {

      font-size: 14px;

      color: #fff;

      text-align: left;

    }



    .el-radio {

      .el-radio__inner {

        background: none;

        border-color: rgba(255, 255, 255, 0.3) !important;



        &::after {

          width: 6px;

          height: 6px;

        }

      }



      .el-radio__label {

        color: #fff !important;

      }

    }



    .el-form-item__content {

      margin-left: 110px !important;

      text-align: left;

    }



    input {

      background-color: rgba(0, 0, 0, 0.1);

      color: #fff;

      border: none;

      caret-color: #fff !important;

    }



    input:-webkit-autofill,

    textarea:-webkit-autofill,

    select:-webkit-autofill {

      -webkit-text-fill-color: #fff !important;

      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;

      background-color: transparent;

      background-image: none;

      transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间

    }



    .el-cascader {

      width: 100%;

    }

  }

}

</style>



<style lang="scss">

.el-popper.el-cascader__dropdown.location {

  background-color: rgb(77, 72, 111);

  border: none;

  margin: 0 0;



  * {

    color: #fff;

    border-color: rgba(255, 255, 2555, 0.1);

  }



  .el-cascader-node:hover,

  .in-active-path,

  .is-active,

  .el-cascader-node {

    background-color: rgb(101, 93, 126) !important;

  }



  .popper__arrow::after,

  .popper__arrow {

    display: none;

  }



  .el-cascader-node__label {

    text-align: left;

  }



  .el-cascader-menu__wrap {

    width: 226px;

    height: 175px;

  }

}

</style>