事件简报

src/views/mobileControl/Workbenches.vue

@@ -1,125 +1,159 @@
 <template>
-  <div>
-    <van-popup
-      v-model:show="showRight"
-      position="right"
-      :style="{ width: '100%', height: '100%' }"
-      class="workbenches-wrapper"
-    >
-      <van-form label-align="top" @submit="onSubmit">
-        <van-cell-group inset class="one">
-          <van-field
-            v-model="workbenches.unitname"
-            name="报送单位"
-            label="报送单位"
-            placeholder="请输入报送单位"
-            :rules="[{ required: true, message: '请填写报送单位' }]"
-          />
-          <van-field
-            v-model="workbenches.briefingContent"
-            rows="6"
-            autosize
-            label=""
-            type="textarea"
-            maxlength="800"
-            placeholder="请描述事件简报"
-            show-word-limit
-            :rules="[{ required: true, message: '请填写描述' }]"
-          />
-        </van-cell-group>
-        <van-field name="fileList" label="上传文件" label-align="top">
-          <template #input>
-            <ImageUpload
-              v-model="workbenches.picture"
-              :limit="5"
-              :fileType="['png', 'jpeg', 'jpg']"
-            />
-          </template>
-        </van-field>
-        <div>
-          <van-cell-group>
-            <van-cell
-              title="获取当前位置"
-              class="getAddress"
-              @click="getAdress"
-            />
-          </van-cell-group>
+  <van-popup
+    v-model:show="showRight"
+    position="right"
+    :style="{ width: '100%', height: '100%' }"
+    class="workbenches-wrapper"
+  >
+    <div class="common-form-container">
+      <van-form label-width="90" label-align="top" colon @submit="onSubmit">
+        <div class="form-item">
+          <div class="form-header">
+            <div class="form-header-left">
+              <i class="line-icon" />
+              <div class="form-title">新增事件简报</div>
+            </div>
+          </div>
+          <div class="common-form-content">
+            <div class="common-form-item">
+              <van-field
+                v-model="form.processing_status_text"
+                class="common-field"
+                label="报送单位"
+                placeholder="请输入报送单位"
+                :rules="rules.processing_status"
+              />
+              <van-field
+                v-model="form.feedback_content"
+                class="common-field common-textarea"
+                rows="8"
+                type="textarea"
+                label=""
+                maxlength="800"
+                placeholder="请描述事件"
+                show-word-limit
+                :rules="rules.feedback_content"
+              />
+              <van-field label="文件上传" :error-message="uploaderErrors">
+                <template #input>
+                  <FileUpload
+                    v-model="form.fileList"
+                    type="image"
+                    :file-size="5"
+                    :limit="12"
+                    :isShowTip="false"
+                    :fileType="['png', 'jpg', 'jpeg']"
+                    @change="handleFileListChange"
+                  >
+                    <template #upload-tip>
+                      <div class="upload-tip">
+                        <div>支持上传png、jpg、jpeg</div>
+                        <div>文件不大于5M</div>
+                      </div>
+                    </template>
+                  </FileUpload>
+                </template>
+              </van-field>
+            </div>
+          </div>
         </div>
-        <PositionSelect v-if="isGetAdress" v-model:visible="isGetAdress" />
-        <div style="margin: 16px">
-          <van-button type="default" class="cancelButton" @click="cancelButton"
-            >取消</van-button
+        <div class="common-form-footer">
+          <van-button class="btn" @click="onCancel">取消</van-button>
+          <van-button
+            class="btn primary-btn"
+            :loading="submitting"
+            type="primary"
+            native-type="submit"
+            >提交</van-button
           >
-          <van-button type="primary" class="okButton">提交</van-button>
         </div>
       </van-form>
-    </van-popup>
-  </div>
+      <van-popup
+        v-model:show="showPicker"
+        destroy-on-close
+        round
+        position="bottom"
+      />
+    </div>
+  </van-popup>
 </template>
 
-<script setup lang="ts">
-import {computed, ref} from "vue";
-import PositionSelect from "@/views/mobileControl/PositionSelect.vue";
-
+<script lang="ts" setup>
+import { useRoute, useRouter } from "vue-router";
+import { reactive, ref } from "vue";
+import { showSuccessToast } from "vant";
+import { Numeric } from "vant/es/utils";
+import FileUpload from "@/components/FileUpload/index.vue";
+import { validateFile } from "@/utils/validate";
 
 const props = defineProps({
   modelValue: Boolean
 });
-const emits = defineEmits(["update:modelValue"]);
 const showRight = ref(true);
-
-const isGetAdress = ref(false);
-
-let workbenches = ref({
-  unitname: "",
-  briefingContent: "",
-  picture: ""
+const route = useRoute();
+const router = useRouter();
+let id = ref("");
+// 表单数据
+const form = ref({
+  processing_status: "",
+  processing_status_text: "",
+  feedback_content: "",
+  fileList: []
 });
-
-const onSubmit = values => {
-  console.log("submit", values);
+const pickerValue = ref<Numeric[]>([]);
+let uploaderErrors = ref("");
+// 表单校验规则
+const rules = reactive({
+  processing_status: [{ required: true, message: "请输入报送单位" }],
+  feedback_content: [{ required: true, message: "请输入事件描述" }],
+  fileList: [{ validator: validateFile, message: "请上传文件" }]
+});
+let showPicker = ref(false);
+// 是否在提交
+let submitting = ref(false);
+// 文件上传回调
+const handleFileListChange = () => {
+  let flag = true;
+  if (form.value.fileList && form.value.fileList.length === 0) {
+    uploaderErrors.value = "请上传文件";
+    flag = false;
+  }
+  uploaderErrors.value = "";
+  return flag;
 };
-
-const getAdress = () => {
-  isGetAdress.value = true;
+// 返回
+const onCancel = () => {
+  router.go(-1);
 };
 
-const cancelButton = () => {
-  emits("update:modelValue", false);
+// 提交表单
+const onSubmit = () => {
+  if (submitting.value) return;
+  let flag = handleFileListChange();
+  if (!flag) return;
+  uploaderErrors.value = "";
+  submitting.value = true;
+  setTimeout(() => {
+    submitting.value = false;
+    showSuccessToast("提交成功");
+    onCancel();
+  }, 1500);
 };
+
+onMounted(() => {
+  id.value = route.query.id;
+});
 </script>
 
-<style scoped lang="scss">
-.workbenches-wrapper {
-  background-color: #f2f2f2;
-  padding: 15px;
+<style lang="scss" scoped>
+.upload-tip {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
 }
+</style>
+
+<style scoped lang="scss">
 .van-popup {
   border-radius: 0 !important;
 }
-.one {
-  position: relative;
-  width: 344px;
-  right: 15px;
-  border-radius: 0 !important;
-}
-.okButton {
-  position: relative;
-  width: 100px;
-  left: 60px;
-  top: 60px;
-}
-.cancelButton {
-  position: relative;
-  width: 100px;
-  left: 40px;
-  top: 60px;
-}
-.getAddress {
-  position: absolute;
-  top: 12px;
-  :deep(.van-cell__title) {
-    color: grey; /* 字体颜色 */
-  }
-}
 </style>