From dff9fb32c1bac52d378a6d196f670b92610c01d3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期四, 16 十二月 2021 17:21:49 +0800
Subject: [PATCH] 自适应2
---
src/pages/index/components/formInfo.vue | 523 +++++++++++++++++++++++++++++----------------------------
1 files changed, 265 insertions(+), 258 deletions(-)
diff --git a/src/pages/index/components/formInfo.vue b/src/pages/index/components/formInfo.vue
index 4599768..23f9d65 100644
--- a/src/pages/index/components/formInfo.vue
+++ b/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锛歵rue
- loading锛歠alse
- 鏄惁鏄牴 root锛歵ure
- */
- 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锛歵rue
+ loading锛歠alse
+ 鏄惁鏄牴 root锛歵ure
+ */
+ 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>
\ No newline at end of file
--
Gitblit v1.8.0