修改设备维修的样式

src/pages_function/pages/equipmentMaintenance/form.vue

@@ -52,8 +52,9 @@
         <view class="form-item inline-radio">
           <text class="form-label required">{{ t('equipmentMaintenance.faultLevel') }}</text>
           <radio-group class="radio-group" :disabled="readonlyMeta" @change="onFaultLevelChange">
-            <label v-for="item in faultLevelOptions" :key="String(item.value)" class="radio-item">
+            <label v-for="item in faultLevelOptions" :key="String(item.value)" class="radio-item" @click="selectFaultLevel(item.value)">
-              <radio :checked="String(formData.faultLevel || '') === String(item.value)" :disabled="readonlyMeta" :value="String(item.value)" color="#1f4b79" />
+              <radio class="native-radio" hidden :checked="String(formData.faultLevel || '') === String(item.value)" :disabled="readonlyMeta" :value="String(item.value)" />
+              <view :class="['radio-icon', String(formData.faultLevel || '') === String(item.value) ? 'checked' : '', readonlyMeta ? 'disabled' : '']"></view>
               <text>{{ item.label }}</text>
             </label>
           </radio-group>
@@ -62,12 +63,14 @@
         <view class="form-item inline-radio">
           <text class="form-label required">{{ t('equipmentMaintenance.isShutdown') }}</text>
           <radio-group class="radio-group" :disabled="readonlyMeta" @change="onShutdownChange">
-            <label class="radio-item">
+            <label class="radio-item" @click="selectShutdown(true)">
-              <radio :checked="formData.isShutdown === true" :disabled="readonlyMeta" value="true" color="#1f4b79" />
+              <radio class="native-radio" hidden :checked="formData.isShutdown === true" :disabled="readonlyMeta" value="true" />
+              <view :class="['radio-icon', formData.isShutdown === true ? 'checked' : '', readonlyMeta ? 'disabled' : '']"></view>
               <text>{{ t('functionCommon.yes') }}</text>
             </label>
-            <label class="radio-item">
+            <label class="radio-item" @click="selectShutdown(false)">
-              <radio :checked="formData.isShutdown === false" :disabled="readonlyMeta" value="false" color="#1f4b79" />
+              <radio class="native-radio" hidden :checked="formData.isShutdown === false" :disabled="readonlyMeta" value="false" />
+              <view :class="['radio-icon', formData.isShutdown === false ? 'checked' : '', readonlyMeta ? 'disabled' : '']"></view>
               <text>{{ t('functionCommon.no') }}</text>
             </label>
           </radio-group>
@@ -85,12 +88,14 @@
         <view class="form-item inline-radio">
           <text class="form-label">{{ t('equipmentMaintenance.machineryTypeId') }}</text>
           <radio-group class="radio-group" :disabled="readonlyBase" @change="onMachineryTypeChange">
-            <label class="radio-item">
+            <label class="radio-item" @click="selectMachineryType(1)">
-              <radio :checked="Number(formData.machineryTypeId || 1) === 1" :disabled="readonlyBase" value="1" color="#1f4b79" />
+              <radio class="native-radio" hidden :checked="Number(formData.machineryTypeId || 1) === 1" :disabled="readonlyBase" value="1" />
+              <view :class="['radio-icon', Number(formData.machineryTypeId || 1) === 1 ? 'checked' : '', readonlyBase ? 'disabled' : '']"></view>
               <text>{{ t('equipmentMaintenance.machineryTypeDevice') }}</text>
             </label>
-            <label class="radio-item">
+            <label class="radio-item" @click="selectMachineryType(2)">
-              <radio :checked="Number(formData.machineryTypeId || 1) === 2" :disabled="readonlyBase" value="2" color="#1f4b79" />
+              <radio class="native-radio" hidden :checked="Number(formData.machineryTypeId || 1) === 2" :disabled="readonlyBase" value="2" />
+              <view :class="['radio-icon', Number(formData.machineryTypeId || 1) === 2 ? 'checked' : '', readonlyBase ? 'disabled' : '']"></view>
               <text>{{ t('equipmentMaintenance.machineryTypeKeyItem') }}</text>
             </label>
           </radio-group>
@@ -149,12 +154,14 @@
         <view class="form-item inline-radio">
           <text class="form-label required">{{ t('equipmentMaintenance.repairResult') }}</text>
           <radio-group class="radio-group" :disabled="readonlyRepair" @change="onRepairStatusChange">
-            <label class="radio-item">
+            <label class="radio-item" @click="selectRepairStatus('1')">
-              <radio :checked="String(formData.repairStatus || '0') === '1'" :disabled="readonlyRepair" value="1" color="#1f4b79" />
+              <radio class="native-radio" hidden :checked="String(formData.repairStatus || '0') === '1'" :disabled="readonlyRepair" value="1" />
+              <view :class="['radio-icon', String(formData.repairStatus || '0') === '1' ? 'checked' : '', readonlyRepair ? 'disabled' : '']"></view>
               <text>{{ t('equipmentMaintenance.statusPassed') }}</text>
             </label>
-            <label class="radio-item">
+            <label class="radio-item" @click="selectRepairStatus('2')">
-              <radio :checked="String(formData.repairStatus || '0') === '2'" :disabled="readonlyRepair" value="2" color="#1f4b79" />
+              <radio class="native-radio" hidden :checked="String(formData.repairStatus || '0') === '2'" :disabled="readonlyRepair" value="2" />
+              <view :class="['radio-icon', String(formData.repairStatus || '0') === '2' ? 'checked' : '', readonlyRepair ? 'disabled' : '']"></view>
               <text>{{ t('equipmentMaintenance.statusRejected') }}</text>
             </label>
           </radio-group>
@@ -519,8 +526,10 @@ function onComponentChange(event) {
   formData.componentId = current ? current.value : undefined
 }
 
-function onMachineryTypeChange(event) {
+function selectMachineryType(value) {
-  const nextValue = Number(event?.detail?.value || 1) || 1
+  if (readonlyBase.value) return
+  const nextValue = Number(value || 1) || 1
+  if (Number(formData.machineryTypeId || 1) === nextValue) return
   formData.machineryTypeId = nextValue
   formData.deviceId = undefined
   formData.componentId = undefined
@@ -531,6 +540,10 @@ function onMachineryTypeChange(event) {
   formData.machinerySpec = ''
 }
 
+function onMachineryTypeChange(event) {
+  selectMachineryType(event?.detail?.value)
+}
+
 async function handleDeviceScan() {
   try {
     const res = await uni.scanCode({ scanType: ['qrCode', 'barCode'] })
@@ -601,16 +614,31 @@ function matchesComponentDevice(component, deviceId) {
 
 function onShutdownChange(event) {
   const value = String(event?.detail?.value || '')
-  if (value === 'true') formData.isShutdown = true
+  if (value === 'true') selectShutdown(true)
-  if (value === 'false') formData.isShutdown = false
+  if (value === 'false') selectShutdown(false)
+}
+
+function selectShutdown(value) {
+  if (readonlyMeta.value) return
+  formData.isShutdown = value
 }
 
 function onFaultLevelChange(event) {
-  formData.faultLevel = String(event?.detail?.value || '')
+  selectFaultLevel(event?.detail?.value)
+}
+
+function selectFaultLevel(value) {
+  if (readonlyMeta.value) return
+  formData.faultLevel = String(value || '')
 }
 
 function onRepairStatusChange(event) {
-  const value = String(event?.detail?.value || '0')
+  selectRepairStatus(event?.detail?.value)
+}
+
+function selectRepairStatus(value) {
+  if (readonlyRepair.value) return
+  value = String(value || '0')
   formData.repairStatus = value
   formData.repairResult = value
 }
@@ -1015,6 +1043,42 @@ function goBack() {
   color: #111827;
 }
 
+.native-radio {
+  display: none;
+}
+
+.radio-icon {
+  position: relative;
+  width: 34rpx;
+  height: 34rpx;
+  flex: 0 0 34rpx;
+  border: 2rpx solid #d1d5db;
+  border-radius: 50%;
+  background: #ffffff;
+  box-sizing: border-box;
+}
+
+.radio-icon.checked {
+  border-color: #1f4b79;
+  background: #1f4b79;
+}
+
+.radio-icon.checked::after {
+  content: '';
+  position: absolute;
+  left: 10rpx;
+  top: 5rpx;
+  width: 10rpx;
+  height: 18rpx;
+  border: solid #ffffff;
+  border-width: 0 4rpx 4rpx 0;
+  transform: rotate(45deg);
+}
+
+.radio-icon.disabled {
+  opacity: 0.55;
+}
+
 .image-list {
   display: flex;
   gap: 16rpx;