外反APP-必填优化

src/pages/business/EQF/qualityFeedback/qualityFeedbackAdd.vue

@@ -17,8 +17,8 @@
 			<!-- 正文内容 -->
 			<view class="white-bg">
 				<view class="form-con">
-					<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="100px">
+					<uni-forms ref="formRef" :model="formData" :rules="rules" label-width="120px">
-						<uni-forms-item label="客户名称" name="cusName" class="f-c-right">
+						<uni-forms-item label="客户名称" name="cusName" class="f-c-right" required>
 							<view @click="chooseCustomer" class="form-item-container">
 								<text class="name">{{ formData.cusName || '点击选择客户' }}</text>
 							</view>
@@ -27,57 +27,57 @@
 							<uni-data-select v-model="formData.productType" :localdata="productTypeList"
 							placeholder="请选择产品类型"/>
 						</uni-forms-item>
-						<uni-forms-item label="产品类别" class="f-c-right" v-if="formData.productType == '电阻器'">
+						<uni-forms-item label="产品类别" class="f-c-right" name="productCategory" v-if="formData.productType == '电阻器'" required>
 							<uni-data-select v-model="formData.productCategory" :localdata="productCategoryList" 
 								placeholder="请选择产品类别" />
 						</uni-forms-item>
-						<uni-forms-item label="产品大类" class="f-c-right" v-if="formData.productType == '管壳'">
+						<uni-forms-item label="产品大类" class="f-c-right" name="productCategories" v-if="formData.productType == '管壳'">
 							<uni-data-select v-model="formData.productCategories" :localdata="productCategoriesList" 
 								placeholder="请选择产品大类" />
 						</uni-forms-item>
-						<uni-forms-item label="产品分类" class="f-c-right" v-if="formData.productType == '管壳'">
+						<uni-forms-item label="产品分类" class="f-c-right" name="classification" v-if="formData.productType == '管壳'">
 							<uni-data-select v-model="formData.classification" :localdata="classificationList" 
 								placeholder="请选择产品分类" />
 						</uni-forms-item>
-						<uni-forms-item label="问题现象" class="f-c-right">
+						<uni-forms-item label="问题现象" name="ppNameLabel" class="f-c-right">
 							<uni-data-select v-model="formData.ppNameLabel" :localdata="problemPhenomenonList" 
 								placeholder="请选择问题现象" />
 						</uni-forms-item>
-						<uni-forms-item label="问题现象描述" name="problemDescription" class="f-c-right">
+						<uni-forms-item label="问题现象描述" name="ppNameDescribe" class="f-c-right">
 							<uni-easyinput v-model="formData.ppNameDescribe" type="textarea" placeholder="请详细描述问题现象" />
 						</uni-forms-item>
-						<uni-forms-item label="使用数量" name="usageQuantity" class="f-c-right">
+						<uni-forms-item label="使用数量" name="employQuantity" class="f-c-right">
 							<uni-easyinput v-model.number="formData.employQuantity" type="number" placeholder="请输入使用数量" />
 						</uni-forms-item>
 						<uni-forms-item label="问题数量" name="problemQuantity" class="f-c-right">
 							<uni-easyinput v-model.number="formData.problemQuantity" type="number" placeholder="请输入问题数量" />
 						</uni-forms-item>
-						<uni-forms-item label="使用方法" class="f-c-right">
+						<uni-forms-item label="使用方法" name="employMethod" class="f-c-right">
 							<uni-easyinput v-model="formData.employMethod" placeholder="请输入使用方法" />
 						</uni-forms-item>
-						<uni-forms-item label="问题发生阶段" class="f-c-right">
+						<uni-forms-item label="问题发生阶段" name="posName" class="f-c-right" required>
 							<uni-data-select v-model="formData.posName" :localdata="problemStageList" 
 								placeholder="请选择问题发生阶段" />
 						</uni-forms-item>
-						<uni-forms-item label="用户诉求标签" class="f-c-right">
+						<uni-forms-item label="用户诉求标签" name="customerAppealLabels" class="f-c-right" required>
 							<uni-data-select v-model="formData.customerAppealLabels" :multiple="true"  :localdata="customerAppealLabelList" 
 								placeholder="请选择用户诉求标签" />
 						</uni-forms-item>
-						<uni-forms-item label="用户诉求" name="customerAppeal" class="f-c-right">
+						<uni-forms-item label="用户诉求" name="customerAppeal" class="f-c-right" required>
 							<uni-easyinput v-model="formData.customerAppeal" type="textarea" placeholder="请输入用户诉求" />
 						</uni-forms-item>
 						<uni-forms-item label="是否返厂" name="isReturnfactory" class="f-c-right">
 							<uni-data-select v-model="formData.isReturnfactory" :localdata="isReturnfactoryYesNoList" 
 								placeholder="请选择是否返厂" />
 						</uni-forms-item>
-						<uni-forms-item label="是否需要归零" name="isReturnzero" class="f-c-right">
+						<uni-forms-item label="是否需要归零" name="isReturnzero" class="f-c-right" required>
 							<uni-data-select v-model="formData.isReturnzero" :localdata="isReturnzeroYesNoList" 
 								placeholder="请选择是否需要归零" />
 						</uni-forms-item>
-						<uni-forms-item label="业务员" class="f-c-right">
+						<uni-forms-item label="业务员" name="salesman" class="f-c-right">
 							<uni-easyinput v-model="formData.salesman" placeholder="请输入业务员" />
 						</uni-forms-item>
-						<uni-forms-item label="联系方式" class="f-c-right">
+						<uni-forms-item label="联系方式" name="salesmanPhone" class="f-c-right">
 							<uni-easyinput v-model="formData.salesmanPhone" placeholder="请输入联系方式" />
 						</uni-forms-item>
 						<uni-forms-item label="答复日期" name="replyTime" class="uni-forms-item is-direction-top is-top">
@@ -399,27 +399,32 @@ const initProductCategoryData = async () => {
 </script>
 
 <style scoped>
+/* 基本布局样式 */
 .con-body {
   background-color: #F8F8F8;
 }
 
 .con-bg {
-	padding-bottom: 20px;
+  padding-bottom: 20rpx;
 }
 
+/* 顶部占位高度，避免内容被头部遮挡 */
 .top-height {
   height: 80rpx;
 }
 
+/* 表单区域背景 */
 .white-bg {
   padding: 20rpx;
   background-color: #FFFFFF;
 }
 
+/* 表单容器 */
 .form-con {
   margin-top: 20rpx;
 }
 
+/* 表单项目对齐方式 */
 .f-c-right {
   display: flex;
   align-items: center;
@@ -427,22 +432,7 @@ const initProductCategoryData = async () => {
   padding: 10rpx 0;
 }
 
-.form-section {
+/* 加载遮罩 */
-	margin-bottom: 30rpx;
-	padding: 10rpx;
-	background-color: #F9F9F9;
-	border-radius: 8rpx;
-}
-
-.section-title {
-	font-size: 28rpx;
-	font-weight: bold;
-	color: #333;
-	margin-bottom: 20rpx;
-	padding-left: 10rpx;
-	border-left: 4rpx solid #007AFF;
-}
-
 .loading-mask {
   position: fixed;
   top: 0;
@@ -456,21 +446,57 @@ const initProductCategoryData = async () => {
   z-index: 9999;
 }
 
+/* ======== 表单组件样式优化 ======== */
+
+/* 基础表单样式 */
 :deep(.uni-forms) {
   width: 100%;
 }
 
 :deep(.uni-forms-item) {
   margin-bottom: 20rpx;
+  position: relative; /* 为伪元素定位做准备 */
 }
 
+/* 日期选择器样式 */
 :deep(.uni-date-x .uni-date__x-input) {
   padding-left: 20rpx;
   color: #919191;
 }
 
-/* 隐藏默认必填项标记，使用自定义样式 */
+/* ======== 强制显示必填项红色标识 ======== */
-:deep(.uni-forms-item__required) {
+
-	display: none;
+/* 方案1: 使用伪元素在标签前添加红色星号 */
+:deep(.uni-forms-item--required)::before {
+  content: '*';
+  color: #ff4d4f !important;
+  position: absolute;
+  left: -16rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 28rpx !important;
+  font-weight: bold !important;
+  z-index: 10;
+}
+
+/* 调整标签内边距，避免文本与星号重叠 */
+:deep(.uni-forms-item__label) {
+  padding-left: 16rpx !important;
+}
+
+/* 方案2: 增强内置必填项标识的样式（备用方案） */
+:deep(.uni-forms-item--required .uni-forms-item__required) {
+  display: inline !important;
+  color: #ff4d4f !important;
+  margin-right: 8rpx !important;
+  font-size: 28rpx !important;
+  font-weight: bold !important;
+}
+
+/* 方案3: 直接在标签文本中显示星号（最可靠的后备方案） */
+:deep(.uni-forms-item--required .uni-forms-item__label::before) {
+  content: '*';
+  color: #ff4d4f !important;
+  margin-right: 4rpx;
 }
 </style>