Blame view

pages-sub/daily/patrol-manage/add-patrol-record/index.vue 5.45 KB
a2702f6d   刘淇   巡查计划
1
  <template>
37c26bd3   刘淇   巡查计划
2
3
4
5
6
7
    <view class="u-page">
      <!-- 表单容器:统一label单位为rpx -->
      <up-form
          :model="form"
          ref="uFormRef"
          :rules="rules"
a2702f6d   刘淇   巡查计划
8
9
          label-position="left"
      >
37c26bd3   刘淇   巡查计划
10
11
        <!-- 1. 文本域(必填,无label但保留必填验证) -->
        <up-form-item
a2702f6d   刘淇   巡查计划
12
13
14
            prop="content"
            class="form-item"
        >
37c26bd3   刘淇   巡查计划
15
16
17
          <up-textarea
              v-model="form.content"
              placeholder="请输入巡查描述"
a2702f6d   刘淇   巡查计划
18
19
              maxlength="200"
              :show-word-limit="true"
a2702f6d   刘淇   巡查计划
20
              border
37c26bd3   刘淇   巡查计划
21
              :count="true"
a2702f6d   刘淇   巡查计划
22
              class="textarea"
37c26bd3   刘淇   巡查计划
23
24
          ></up-textarea>
        </up-form-item>
a2702f6d   刘淇   巡查计划
25
  
37c26bd3   刘淇   巡查计划
26
27
        <!-- 2. 上传图片:修复labelWidth单位为rpx -->
        <up-form-item
a2702f6d   刘淇   巡查计划
28
29
30
            prop="images"
            class="form-item"
            required
37c26bd3   刘淇   巡查计划
31
32
            label="上传图片"
            label-width="140rpx"
a2702f6d   刘淇   巡查计划
33
        >
37c26bd3   刘淇   巡查计划
34
35
          <up-upload
              v-model="form.images"
a2702f6d   刘淇   巡查计划
36
37
38
39
40
41
42
43
44
              :action="uploadUrl"
              :max-count="3"
              :multiple="true"
              @after-read="handleAfterRead"
              @delete="handleDelete"
              @on-exceed="handleExceed"
              upload-text="选择图片"
              del-color="#ff4d4f"
              class="upload-wrap"
37c26bd3   刘淇   巡查计划
45
          ></up-upload>
a2702f6d   刘淇   巡查计划
46
          <view class="tips">(最少1张,最多3张)</view>
37c26bd3   刘淇   巡查计划
47
        </up-form-item>
a2702f6d   刘淇   巡查计划
48
  
37c26bd3   刘淇   巡查计划
49
50
        <!-- 3. 转为工单:修复radio绑定 + labelWidth单位 -->
        <up-form-item
a2702f6d   刘淇   巡查计划
51
52
53
            prop="isWorkOrder"
            class="form-item"
            required
37c26bd3   刘淇   巡查计划
54
55
            label="转为工单"
            label-width="140rpx"
a2702f6d   刘淇   巡查计划
56
        >
37c26bd3   刘淇   巡查计划
57
58
          <up-radio-group
              v-model="form.isWorkOrder"
a2702f6d   刘淇   巡查计划
59
              active-color="#1989fa"
37c26bd3   刘淇   巡查计划
60
              direction="row"
a2702f6d   刘淇   巡查计划
61
              class="radio-group"
37c26bd3   刘淇   巡查计划
62
63
64
65
66
67
68
69
70
71
72
73
74
          >
            <!-- 修复:radio绑定value而非name -->
            <up-radio
                :custom-style="{marginRight: '40rpx'}"
                v-for="(item, index) in radioList"
                :label="item.label"
                :name="item.value"
            >
              {{ item.label }}
            </up-radio>
          </up-radio-group>
        </up-form-item>
      </up-form>
a2702f6d   刘淇   巡查计划
75
76
  
      <!-- 底部提交按钮 -->
37c26bd3   刘淇   巡查计划
77
78
      <view class="submit-btn-wrap">
        <up-button
a2702f6d   刘淇   巡查计划
79
80
            type="primary"
            size="default"
37c26bd3   刘淇   巡查计划
81
            @click="submit"
a2702f6d   刘淇   巡查计划
82
83
84
            :style="{ width: '100%', height: '88rpx', fontSize: '32rpx', borderRadius: 0 }"
        >
          提交
37c26bd3   刘淇   巡查计划
85
        </up-button>
a2702f6d   刘淇   巡查计划
86
87
88
89
90
91
      </view>
    </view>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue';
37c26bd3   刘淇   巡查计划
92
93
94
95
96
  // 表单数据
  const form = reactive({
    content: '',       // 文本域内容
    images: [],        // 上传图片列表
    isWorkOrder: '1'    // 是否转为工单 1:是 2:否
a2702f6d   刘淇   巡查计划
97
  });
37c26bd3   刘淇   巡查计划
98
99
100
  // 图片上传地址
  const uploadUrl = ref('');
  // 单选列表
a2702f6d   刘淇   巡查计划
101
  const radioList = ref([
37c26bd3   刘淇   巡查计划
102
103
    {label: '是', value: '1'},
    {label: '否', value: '2'}
a2702f6d   刘淇   巡查计划
104
  ]);
37c26bd3   刘淇   巡查计划
105
106
  // 校验规则
  const rules = reactive({
a2702f6d   刘淇   巡查计划
107
    content: [
37c26bd3   刘淇   巡查计划
108
109
      {required: true, message: '请输入巡查描述', trigger: ['blur', 'change']},
      {max: 200, message: '内容不能超过200字', trigger: ['blur', 'change']}
a2702f6d   刘淇   巡查计划
110
    ],
a2702f6d   刘淇   巡查计划
111
112
113
    images: [
      {
        validator: (rule, value, callback) => {
37c26bd3   刘淇   巡查计划
114
115
116
          if (value.length < 1) callback(new Error('最少需要上传1张图片'));
          else if (value.length > 3) callback(new Error('最多只能上传3张图片'));
          else callback();
a2702f6d   刘淇   巡查计划
117
        },
37c26bd3   刘淇   巡查计划
118
        trigger: ['change']
a2702f6d   刘淇   巡查计划
119
120
      }
    ],
a2702f6d   刘淇   巡查计划
121
    isWorkOrder: [
37c26bd3   刘淇   巡查计划
122
      {required: true, message: '请选择是否转为工单', trigger: ['change']}
a2702f6d   刘淇   巡查计划
123
124
    ]
  });
37c26bd3   刘淇   巡查计划
125
126
127
  // 表单引用
  const uFormRef = ref(null);
  // 图片上传/删除/超出处理
a2702f6d   刘淇   巡查计划
128
  const handleAfterRead = (event) => {
37c26bd3   刘淇   巡查计划
129
    const {file} = event;
a2702f6d   刘淇   巡查计划
130
    setTimeout(() => {
37c26bd3   刘淇   巡查计划
131
132
      form.images.push({url: file.url, name: file.name || 'image.png', status: 'success'});
      uFormRef.value.validateField('images');
a2702f6d   刘淇   巡查计划
133
134
    }, 500);
  };
a2702f6d   刘淇   巡查计划
135
  const handleDelete = (index) => {
37c26bd3   刘淇   巡查计划
136
137
    form.images.splice(index, 1);
    uFormRef.value.validateField('images');
a2702f6d   刘淇   巡查计划
138
  };
37c26bd3   刘淇   巡查计划
139
140
141
142
143
144
145
146
147
148
149
150
  const handleExceed = () => uni.$u.toast('最多只能上传3张图片', 'none');
  // 提交方法
  const submit = () => {
    uFormRef.value.validate().then(valid => {
      if (valid) {
        uni.showLoading({title: '提交中...'});
        setTimeout(() => {
          uni.hideLoading();
          uni.$u.toast('提交成功');
          uFormRef.value.resetFields();
          form.images = [];
        }, 1500);
a2702f6d   刘淇   巡查计划
151
      }
37c26bd3   刘淇   巡查计划
152
    }).catch(() => uni.$u.toast('表单验证失败,请检查必填项', 'none'));
a2702f6d   刘淇   巡查计划
153
154
155
156
  };
  </script>
  
  <style scoped lang="scss">
37c26bd3   刘淇   巡查计划
157
158
  // 基础布局:避免内容重叠
  .u-page {
a2702f6d   刘淇   巡查计划
159
    padding: 20rpx;
a2702f6d   刘淇   巡查计划
160
161
  }
  
37c26bd3   刘淇   巡查计划
162
  // 表单项样式:分隔区域,避免label和内容重叠
a2702f6d   刘淇   巡查计划
163
164
165
  .form-item {
    background-color: #fff;
    border-radius: 12rpx;
37c26bd3   刘淇   巡查计划
166
    padding:0 30rpx;
a2702f6d   刘淇   巡查计划
167
168
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
37c26bd3   刘淇   巡查计划
169
    position: relative; // 为文本域必填*号定位
a2702f6d   刘淇   巡查计划
170
171
172
173
174
175
176
  }
  
  // 文本域样式
  .textarea {
    margin-bottom: 10rpx;
  }
  
a2702f6d   刘淇   巡查计划
177
178
179
180
181
182
183
184
  // 上传区域样式
  .upload-wrap {
    margin-top: 10rpx;
  }
  
  .tips {
    font-size: 24rpx;
    color: #999;
37c26bd3   刘淇   巡查计划
185
    margin-top: 10rpx;
a2702f6d   刘淇   巡查计划
186
187
  }
  
37c26bd3   刘淇   巡查计划
188
189
190
191
192
193
194
  // ========== 核心:修复必填*号显示 ==========
  // 1. 放大+高亮uView默认必填*号
  :deep(.up-form-item__required) {
    color: #ff4d4f !important; // 醒目红色
    font-size: 28rpx !important; // 放大字号
    font-weight: bold !important; // 加粗
    margin-left: 5rpx !important; // 与label保持间距
a2702f6d   刘淇   巡查计划
195
196
  }
  
a2702f6d   刘淇   巡查计划
197
  
37c26bd3   刘淇   巡查计划
198
199
200
201
  
  
  // 底部按钮样式
  .submit-btn-wrap {
a2702f6d   刘淇   巡查计划
202
203
204
205
206
207
208
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 0;
    background-color: #f8f8f8;
a2702f6d   刘淇   巡查计划
209
    /* #ifdef MP-WEIXIN */
37c26bd3   刘淇   巡查计划
210
211
    //padding-bottom: constant(safe-area-inset-bottom);
    //padding-bottom: env(safe-area-inset-bottom);
a2702f6d   刘淇   巡查计划
212
213
214
    /* #endif */
  }
  
a2702f6d   刘淇   巡查计划
215
  </style>