admin/ys-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

外反APP-必填优化

Browse Source
This commit is contained in:
cui
2025-10-09 09:58:25 +08:00
parent c9a925916a
commit 9a384c3bb7
1 changed files with 84 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/pages/business/EQF/qualityFeedback/qualityFeedbackAdd.vue
View File

@@ -17,8 +17,8 @@
<!-- 正文内容 --> <!-- 正文内容 -->
<view class="white-bg"> <view class="white-bg">
<view class="form-con"> <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"> <view @click="chooseCustomer" class="form-item-container">
<text class="name">{{ formData.cusName || '点击选择客户' }}</text> <text class="name">{{ formData.cusName || '点击选择客户' }}</text>
</view> </view>
@@ -27,57 +27,57 @@
<uni-data-select v-model="formData.productType" :localdata="productTypeList" <uni-data-select v-model="formData.productType" :localdata="productTypeList"
placeholder="请选择产品类型"/> placeholder="请选择产品类型"/>
</uni-forms-item> </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" <uni-data-select v-model="formData.productCategory" :localdata="productCategoryList"
placeholder="请选择产品类别" /> placeholder="请选择产品类别" />
</uni-forms-item> </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" <uni-data-select v-model="formData.productCategories" :localdata="productCategoriesList"
placeholder="请选择产品大类" /> placeholder="请选择产品大类" />
</uni-forms-item> </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" <uni-data-select v-model="formData.classification" :localdata="classificationList"
placeholder="请选择产品分类" /> placeholder="请选择产品分类" />
</uni-forms-item> </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" <uni-data-select v-model="formData.ppNameLabel" :localdata="problemPhenomenonList"
placeholder="请选择问题现象" /> placeholder="请选择问题现象" />
</uni-forms-item> </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-easyinput v-model="formData.ppNameDescribe" type="textarea" placeholder="请详细描述问题现象" />
</uni-forms-item> </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-easyinput v-model.number="formData.employQuantity" type="number" placeholder="请输入使用数量" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="问题数量" name="problemQuantity" class="f-c-right"> <uni-forms-item label="问题数量" name="problemQuantity" class="f-c-right">
<uni-easyinput v-model.number="formData.problemQuantity" type="number" placeholder="请输入问题数量" /> <uni-easyinput v-model.number="formData.problemQuantity" type="number" placeholder="请输入问题数量" />
</uni-forms-item> </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-easyinput v-model="formData.employMethod" placeholder="请输入使用方法" />
</uni-forms-item> </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" <uni-data-select v-model="formData.posName" :localdata="problemStageList"
placeholder="请选择问题发生阶段" /> placeholder="请选择问题发生阶段" />
</uni-forms-item> </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" <uni-data-select v-model="formData.customerAppealLabels" :multiple="true" :localdata="customerAppealLabelList"
placeholder="请选择用户诉求标签" /> placeholder="请选择用户诉求标签" />
</uni-forms-item> </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-easyinput v-model="formData.customerAppeal" type="textarea" placeholder="请输入用户诉求" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="是否返厂" name="isReturnfactory" class="f-c-right"> <uni-forms-item label="是否返厂" name="isReturnfactory" class="f-c-right">
<uni-data-select v-model="formData.isReturnfactory" :localdata="isReturnfactoryYesNoList" <uni-data-select v-model="formData.isReturnfactory" :localdata="isReturnfactoryYesNoList"
placeholder="请选择是否返厂" /> placeholder="请选择是否返厂" />
</uni-forms-item> </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" <uni-data-select v-model="formData.isReturnzero" :localdata="isReturnzeroYesNoList"
placeholder="请选择是否需要归零" /> placeholder="请选择是否需要归零" />
</uni-forms-item> </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-easyinput v-model="formData.salesman" placeholder="请输入业务员" />
</uni-forms-item> </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-easyinput v-model="formData.salesmanPhone" placeholder="请输入联系方式" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="答复日期" name="replyTime" class="uni-forms-item is-direction-top is-top"> <uni-forms-item label="答复日期" name="replyTime" class="uni-forms-item is-direction-top is-top">
@@ -399,78 +399,104 @@ const initProductCategoryData = async () => {
</script> </script>
<style scoped> <style scoped>
/* 基本布局样式 */
.con-body { .con-body {
background-color: #F8F8F8; background-color: #F8F8F8;
} }
.con-bg { .con-bg {
padding-bottom: 20px; padding-bottom: 20rpx;
} }
/* 顶部占位高度，避免内容被头部遮挡 */
.top-height { .top-height {
height: 80rpx; height: 80rpx;
} }
/* 表单区域背景 */
.white-bg { .white-bg {
padding: 20rpx; padding: 20rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
/* 表单容器 */
.form-con { .form-con {
margin-top: 20rpx; margin-top: 20rpx;
} }
/* 表单项目对齐方式 */
.f-c-right { .f-c-right {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 10rpx 0; 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 { .loading-mask {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 9999; z-index: 9999;
} }
/* ======== 表单组件样式优化 ======== */
/* 基础表单样式 */
:deep(.uni-forms) { :deep(.uni-forms) {
width: 100%; width: 100%;
} }
:deep(.uni-forms-item) { :deep(.uni-forms-item) {
margin-bottom: 20rpx; margin-bottom: 20rpx;
position: relative; /* 为伪元素定位做准备 */
} }
/* 日期选择器样式 */
:deep(.uni-date-x .uni-date__x-input) { :deep(.uni-date-x .uni-date__x-input) {
padding-left: 20rpx; padding-left: 20rpx;
color: #919191; 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> </style>