表单小bug解决

src/components/testForm/index.vue

@@ -162,7 +162,10 @@
               :options="cityOption"
               @close="i.showPicker = false"
               @change="(option) => cityOnChange(option, i, index)"
-              @finish="(option) => (i.finishFn ? i.finishFn(option) : () => {})"
+              @finish="
+                (option) =>
+                  i.finishFn ? i.finishFn(option) : () => (i.showPicker = false)
+              "
             />
           </van-popup>
           <!-- 级联 公共 -->
@@ -192,15 +195,10 @@
               @close="i.showPicker = false"
               @change="(option) => commonOnChange(option, i, index)"
               @finish="
-                (option) => (i.finishFn ? i.finishFn(i, option) : () => {})
+                (option) =>
+                  i.finishFn ? i.finishFn(i, option) : handleCommonFinish(index)
               "
             />
-            <!-- @change="
-                (option) => (i.onChangeFn ? i.onChangeFn(i, option) : () => {})
-              "
-              @finish="
-                (option) => (i.finishFn ? i.finishFn(i, option) : () => {})
-              " -->
           </van-popup>
           <!-- 文件上传 -->
           <van-field name="uploader" v-if="i.type == 'upload'" :label="i.label">
@@ -739,8 +737,12 @@ const cityOnChange = (options, item, index) => {
 };
 
 const commonOnChange = ({ selectedOptions }, item, index) => {
+  const textAtt = item.fieldNames ? item.fieldNames.text : fieldNames.text;
   formData.value[item.prop + "Name"] =
-    selectedOptions[selectedOptions.length - 1].label;
+    selectedOptions[selectedOptions.length - 1][textAtt];
+};
+const handleCommonFinish = (index) => {
+  formConfig.value[index].showPicker = false;
 };
 // 文件上传
 const onOversize = () => {

src/views/MES/produceManage/completeProject1/index.vue

@@ -233,7 +233,7 @@ const formData = reactive({
     reamlke: "beizhu回显",
     select: "1",
     date: "2022-01-09",
-    common: "1651135364980989953",
+    common: "",
     city: "22",
     cityName: "合肥",
     // fileList: [

src/views/home/feedbackSubmit.vue

@@ -1,288 +1,289 @@
 <template>
-	<div class="feedbackSubmit">
-		<div class="header">
-			<div class="title">
-				<div class="back" @click="backFn">
-					<van-icon name="arrow-left" size="20" />
-				</div>
-				<div class="text">问题反馈</div>
-				<div class="more"></div>
-			</div>
-		</div>
-		<div class="contact card">
-			<div class="title">联系方式</div>
-			<ul>
-				<li>
-					<img src="../../assets/images/icon_gs.png" alt="" />
-					<span>福建数字云帆科技有限公司</span>
-				</li>
-				<li>
-					<img src="../../assets/images/icon_tele.png" alt="" />
-					<span>0591-87865886</span>
-				</li>
-				<li>
-					<img src="../../assets/images/icon_ewm.png" alt="" />
-					<span>数字云帆二维码</span>
-				</li>
-			</ul>
-			<div class="erweima">
-				<div>
-					<img src="../../assets/images/icon_ewm.png" alt="" />
-					<p>关注企业公众号</p>
-				</div>
-				<div>
-					<img src="../../assets/images/icon_ewm.png" alt="" />
-					<p>企业微信客服</p>
-				</div>
-			</div>
-		</div>
-		<div class="form-box">
-			<div class="title">问题反馈</div>
-			<testForm
-				v-model="formData.data"
-				:formOption="formOption"
-				:formConfig="formConfig"
-				:rules="rules"
-				@onSubmit="onSubmit"
-				ref="formDom"
-			></testForm>
-		</div>
-	</div>
+  <div class="feedbackSubmit">
+    <div class="header">
+      <div class="title">
+        <div class="back" @click="backFn">
+          <van-icon name="arrow-left" size="20" />
+        </div>
+        <div class="text">问题反馈</div>
+        <div class="more"></div>
+      </div>
+    </div>
+    <div class="contact card">
+      <div class="title">联系方式</div>
+      <ul>
+        <li>
+          <img src="../../assets/images/icon_gs.png" alt="" />
+          <span>福建数字云帆科技有限公司</span>
+        </li>
+        <li>
+          <img src="../../assets/images/icon_tele.png" alt="" />
+          <span>0591-87865886</span>
+        </li>
+        <li>
+          <img src="../../assets/images/icon_ewm.png" alt="" />
+          <span>数字云帆二维码</span>
+        </li>
+      </ul>
+      <div class="erweima">
+        <div>
+          <img src="../../assets/images/icon_ewm.png" alt="" />
+          <p>关注企业公众号</p>
+        </div>
+        <div>
+          <img src="../../assets/images/icon_ewm.png" alt="" />
+          <p>企业微信客服</p>
+        </div>
+      </div>
+    </div>
+    <div class="form-box">
+      <div class="title">问题反馈</div>
+      <testForm
+        v-model="formData.data"
+        :formOption="formOption"
+        :formConfig="formConfig"
+        :rules="rules"
+        @onSubmit="onSubmit"
+        ref="formDom"
+      ></testForm>
+    </div>
+  </div>
 </template>
 <script setup>
-import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
-import { showSuccessToast } from 'vant'
-import { useRoute } from 'vue-router'
-import { getUserInfo } from '@/utils/auth'
-import testForm from '@/components/testForm/index.vue'
+import { ref, reactive, getCurrentInstance, onMounted } from "vue";
+import { showSuccessToast } from "vant";
+import { useRoute } from "vue-router";
+import { getUserInfo } from "@/utils/auth";
+import testForm from "@/components/testForm/index.vue";
 
-const proxy = getCurrentInstance().proxy
-const route = useRoute()
-const formDom = ref(null)
+const proxy = getCurrentInstance().proxy;
+const route = useRoute();
+const formDom = ref(null);
 const formData = reactive({
-	data: {
-		type: '',
-		keeperId: '',
-		name: '',
-		remark: '',
-	},
-})
+  data: {
+    type: "",
+    keeperId: "",
+    name: "",
+    remark: "",
+  },
+});
 const backFn = () => {
-	history.go(-1)
-}
+  history.go(-1);
+};
 const rules = {
-	name: [{ required: true, message: '请填写姓名' }],
-	companyName: [{ required: true, message: '请填写公司名称' }],
-	contactInformation: [{ required: true, message: '请填写联系方式' }],
-	problemStatement: [{ required: true, message: '请填写备注' }],
-}
+  name: [{ required: true, message: "请填写姓名" }],
+  companyName: [{ required: true, message: "请填写公司名称" }],
+  contactInformation: [{ required: true, message: "请填写联系方式" }],
+  problemStatement: [{ required: true, message: "请填写备注" }],
+};
 const formOption = reactive({
-	readonly: false, //用于控制整个表单是否只读
-	disabled: false,
-	labelAlign: 'top',
-	scroll: true,
-	labelWidth: '62pk',
-})
+  readonly: false, //用于控制整个表单是否只读
+  disabled: false,
+  labelAlign: "top",
+  scroll: true,
+  labelWidth: "62pk",
+});
 const formConfig = reactive([
-	{
-		type: 'input',
-		itemType: 'text',
-		label: '姓名',
-		prop: 'name',
-		clearable: true,
-	},
-	{
-		type: 'input',
-		itemType: 'text',
-		label: '公司名称',
-		prop: 'companyName',
-		clearable: true,
-	},
-	{
-		type: 'input',
-		itemType: 'text',
-		label: '联系方式',
-		prop: 'contactInformation',
-		clearable: true,
-	},
-	{
-		type: 'cascader',
-		label: '模块类型',
-		prop: 'moduleType',
-		itemType: 'common',
-		showPicker: false,
-		// data: classification.value,
-		data: [],
-		fieldNames: {
-			text: 'title',
-			value: 'name',
-			children: 'children',
-		},
-	},
-	{
-		type: 'input',
-		itemType: '问题说明',
-		label: '备注',
-		prop: 'problemStatement',
-		clearable: true,
-	},
-	{
-		type: 'upload',
-		label: '图片补充',
-		prop: 'fileList',
-	},
-])
-const routerData = ref([])
+  {
+    type: "input",
+    itemType: "text",
+    label: "姓名",
+    prop: "name",
+    clearable: true,
+  },
+  {
+    type: "input",
+    itemType: "text",
+    label: "公司名称",
+    prop: "companyName",
+    clearable: true,
+  },
+  {
+    type: "input",
+    itemType: "text",
+    label: "联系方式",
+    prop: "contactInformation",
+    clearable: true,
+  },
+  {
+    type: "cascader",
+    label: "模块类型",
+    prop: "moduleType",
+    itemType: "common",
+    showPicker: false,
+    // data: classification.value,
+    data: [],
+    fieldNames: {
+      text: "title",
+      value: "name",
+      children: "children",
+    },
+  },
+  {
+    type: "input",
+    itemType: "问题说明",
+    label: "备注",
+    prop: "problemStatement",
+    clearable: true,
+  },
+  {
+    type: "upload",
+    label: "图片补充",
+    prop: "fileList",
+  },
+]);
+const routerData = ref([]);
 const getRouter = () => {
-	proxy.get('getRouters', {}).then((res) => {
-		getRouterData(res.data)
-		for (let i = 0; i < res.data.length; i++) {
-			const element = res.data[i]
-			if (element.type == 2) {
-				formConfig[3].data = element.children
-			}
-		}
-	})
-}
+  proxy.get("getRouters", {}).then((res) => {
+    getRouterData(res.data);
+    for (let i = 0; i < res.data.length; i++) {
+      const element = res.data[i];
+      if (element.type == 2) {
+        formConfig[3].data = element.children;
+        console.log(formConfig[3].data, "adaada");
+      }
+    }
+  });
+};
 
 //递归获取路由数据，初始化
 const getRouterData = (data) => {
-	data.forEach((item) => {
-		item.title = item.meta.title
+  data.forEach((item) => {
+    item.title = item.meta.title;
 
-		if (item.children && item.children.length > 0) {
-			getRouterData(item.children)
-		}
-	})
-}
+    if (item.children && item.children.length > 0) {
+      getRouterData(item.children);
+    }
+  });
+};
 
-getRouter()
-const onClickLeft = () => history.back()
+getRouter();
+const onClickLeft = () => history.back();
 const onSubmit = () => {
-	console.log(formData.data)
-	proxy.post('/problemFeedback/add', formData.data).then(() => {
-		showSuccessToast(!route.query.id ? '添加成功' : '编辑成功')
-		setTimeout(() => {
-			onClickLeft()
-		}, 500)
-	})
-}
+  console.log(formData.data, "adad");
+  proxy.post('/problemFeedback/add', formData.data).then(() => {
+  	showSuccessToast(!route.query.id ? '添加成功' : '编辑成功')
+  	setTimeout(() => {
+  		onClickLeft()
+  	}, 500)
+  })
+};
 onMounted(async () => {
-	if (route.query.id) {
-		console.log(route.query.id)
-		proxy.post('/warehouse/detail', { id: route.query.id }).then((res) => {
-			formData.data = res.data
-		})
-	}
-})
+  if (route.query.id) {
+    console.log(route.query.id);
+    proxy.post("/warehouse/detail", { id: route.query.id }).then((res) => {
+      formData.data = res.data;
+    });
+  }
+});
 </script>
 <style lang="scss" scope>
 .header {
-	background: linear-gradient(0deg, #f1f1f1 0%, #46a6ff 46%, #0084ff 100%);
-	height: 160px;
+  background: linear-gradient(0deg, #f1f1f1 0%, #46a6ff 46%, #0084ff 100%);
+  height: 160px;
 
-	.title {
-		display: flex;
-		justify-content: space-between;
-		height: 46px;
-		line-height: 46px;
-		padding: 0 12px;
-		color: #fff;
-		font-size: 16px;
-		font-weight: bold;
-		.back,
-		.more {
-			width: 40px;
-			height: 100%;
-		}
-	}
+  .title {
+    display: flex;
+    justify-content: space-between;
+    height: 46px;
+    line-height: 46px;
+    padding: 0 12px;
+    color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    .back,
+    .more {
+      width: 40px;
+      height: 100%;
+    }
+  }
 }
 .form-box {
-	position: relative;
-	top: -80px;
-	margin: 0 12px;
-	border-radius: 8px;
-	padding-bottom: 12px;
-	background: #fff;
-	.title {
-		height: 52px;
-		line-height: 52px;
-		color: #333;
-		font-size: 16px;
-		font-weight: bold;
-		position: relative;
-		padding: 0 16px;
-	}
-	.title::before {
-		content: '';
-		display: inline-block;
-		width: 4px;
-		height: 12px;
-		background: #409eff;
-		position: absolute;
-		left: 0;
-		top: 20px;
-		background: #0084ff;
-		border-radius: 2px 2px 2px 2px;
-	}
+  position: relative;
+  top: -80px;
+  margin: 0 12px;
+  border-radius: 8px;
+  padding-bottom: 12px;
+  background: #fff;
+  .title {
+    height: 52px;
+    line-height: 52px;
+    color: #333;
+    font-size: 16px;
+    font-weight: bold;
+    position: relative;
+    padding: 0 16px;
+  }
+  .title::before {
+    content: "";
+    display: inline-block;
+    width: 4px;
+    height: 12px;
+    background: #409eff;
+    position: absolute;
+    left: 0;
+    top: 20px;
+    background: #0084ff;
+    border-radius: 2px 2px 2px 2px;
+  }
 }
 .contact {
-	margin: 0 12px;
-	position: relative;
-	top: -100px;
-	ul {
-		line-height: 40px;
-		li {
-			display: flex;
-			padding: 0 16px;
-			img {
-				width: 24px;
-				height: 24px;
-				margin: 7px 12px 0 0;
-			}
-		}
-	}
-	.erweima {
-		display: flex;
-		justify-content: space-around;
-		padding: 20px 40px;
-		div {
-			img {
-				width: 110px;
-				height: 110px;
-			}
-			p {
-				text-align: center;
-				font-size: 16px;
-				color: #333;
-			}
-		}
-	}
+  margin: 0 12px;
+  position: relative;
+  top: -100px;
+  ul {
+    line-height: 40px;
+    li {
+      display: flex;
+      padding: 0 16px;
+      img {
+        width: 24px;
+        height: 24px;
+        margin: 7px 12px 0 0;
+      }
+    }
+  }
+  .erweima {
+    display: flex;
+    justify-content: space-around;
+    padding: 20px 40px;
+    div {
+      img {
+        width: 110px;
+        height: 110px;
+      }
+      p {
+        text-align: center;
+        font-size: 16px;
+        color: #333;
+      }
+    }
+  }
 }
 .card {
-	background: linear-gradient(180deg, #d1e9fe 0%, #ffffff 100%);
-	border-radius: 8px 8px 8px 8px;
-	margin-top: 12px;
-	.title {
-		height: 52px;
-		line-height: 52px;
-		color: #333;
-		font-size: 16px;
-		font-weight: bold;
-		position: relative;
-		padding: 0 16px;
-	}
-	.title::before {
-		content: '';
-		display: inline-block;
-		width: 4px;
-		height: 12px;
-		background: #409eff;
-		position: absolute;
-		left: 0;
-		top: 20px;
-		background: #0084ff;
-		border-radius: 2px 2px 2px 2px;
-	}
+  background: linear-gradient(180deg, #d1e9fe 0%, #ffffff 100%);
+  border-radius: 8px 8px 8px 8px;
+  margin-top: 12px;
+  .title {
+    height: 52px;
+    line-height: 52px;
+    color: #333;
+    font-size: 16px;
+    font-weight: bold;
+    position: relative;
+    padding: 0 16px;
+  }
+  .title::before {
+    content: "";
+    display: inline-block;
+    width: 4px;
+    height: 12px;
+    background: #409eff;
+    position: absolute;
+    left: 0;
+    top: 20px;
+    background: #0084ff;
+    border-radius: 2px 2px 2px 2px;
+  }
 }
 </style>