完成：保养记录和厂内维修模块

src/views/tower/maintenance/security/components/security-edit.vue

@@ -1,7 +1,7 @@
 <!-- 编辑弹窗 -->
 <template xmlns="">
   <ele-modal
-    :width="500"
+    :width="1000"
     :visible="visible"
     :confirm-loading="loading"
     :title="isUpdate ? '修改保养计划' : '新建保养计划'"
@@ -22,20 +22,45 @@
         <a-col
           v-bind="styleResponsive ? { md: 22, sm: 24, xs: 24 } : { span: 12 }"
         >
-          <a-form-item label="项目名称" name="name">
+          <a-form-item label="项目名称" name="projectName">
             <ProjectSelectModel
               :placeholder="`请选择项目`"
               v-model:value="form.projectName"
               @done="chooseProject"
             />
           </a-form-item>
-          <a-form-item label="所在地" name="address">
-            <a-input
-              allow-clear
-              placeholder="请输入项目地址"
-              v-model:value="form.address"
+            <a-form-item label="所在地" name="address">
+                <a-input
+                    allow-clear
+                    placeholder="请输入项目地址"
+                    v-model:value="form.address"
+                />
+            </a-form-item>
+          <a-form-item label="现场图片" name="files">
+            <ele-image-upload
+              v-model:value="files"
+              :item-style="{ width: '90px', height: '90px' }"
+              :limit="20"
+              :upload-handler="uploadHandler"
+              @upload="onUpload"
             />
           </a-form-item>
+            <a-form-item label="备注说明" name="comments">
+                <a-textarea
+                    :rows="4"
+                    :maxlength="200"
+                    placeholder="请输入备注说明"
+                    v-model:value="form.comments"
+                />
+            </a-form-item>
+            <a-form-item label="状态" name="status">
+                <a-radio-group v-model:value="form.status">
+                    <a-radio :value="0">正常</a-radio>
+                    <a-radio :value="1">待修</a-radio>
+                    <a-radio :value="2">异常已修</a-radio>
+                    <a-radio :value="3">异常未修</a-radio>
+                </a-radio-group>
+            </a-form-item>
         </a-col>
       </a-row>
     </a-form>
@@ -52,6 +77,8 @@
   import type { Security } from '@/api/tower/security/model';
   import { addSecurity, updateSecurity } from '@/api/tower/security';
   import { Project } from '@/api/tower/project/model';
+  import type { ItemType } from "ele-admin-pro/es/ele-image-upload/types";
+  import { uploadFile } from "@/api/system/file";
 
   // 是否开启响应式布局
   const themeStore = useThemeStore();
@@ -74,6 +101,8 @@
   const isUpdate = ref(false);
   // 提交状态
   const loading = ref(false);
+  // 已上传数据, 可赋初始值用于回显
+  const files = ref<ItemType[]>([]);
 
   // 表单数据
   const { form, resetFields, assignFields } = useFormData<Security>({
@@ -83,12 +112,14 @@
     securityCode: undefined,
     address: '',
     status: 0,
-    sortNumber: 100
+    files: '',
+    sortNumber: 100,
+      comments: ''
   });
 
   // 表单验证规则
   const rules = reactive<Record<string, Rule[]>>({
-    name: [
+      projectName: [
       {
         required: true,
         message: '请输入设备名称',
@@ -122,6 +153,41 @@
     ]
   });
 
+
+  /* 上传事件 */
+  const uploadHandler = (file: File) => {
+      const item: ItemType = {
+          file,
+          uid: (file as any).uid,
+          name: file.name
+      };
+      if (!file.type.startsWith('image')) {
+          message.error('只能选择图片');
+          return;
+      }
+      if (file.size / 1024 / 1024 > 2) {
+          message.error('大小不能超过 2MB');
+          return;
+      }
+      onUpload(item);
+  };
+
+  // 上传文件
+  const onUpload = (d: ItemType) => {
+      uploadFile(<File>d.file)
+          .then((result) => {
+              files.value.push({
+                  uid: result.id,
+                  url: result.url,
+                  status: "done"
+              })
+              message.success('上传成功');
+          })
+          .catch((e) => {
+              message.error(e.message);
+          });
+  };
+
   /* 保存编辑 */
   const save = () => {
     if (!formRef.value) {
@@ -132,7 +198,8 @@
       .then(() => {
         loading.value = true;
         const categoryForm = {
-          ...form
+          ...form,
+            files: JSON.stringify(files.value)
         };
         const saveOrUpdate = isUpdate.value ? updateSecurity : addSecurity;
         saveOrUpdate(categoryForm)
@@ -170,6 +237,18 @@
           assignFields({
             ...props.data
           });
+
+            files.value = [];
+            if (props.data.files) {
+                const arr = JSON.parse(props.data.files);
+                arr.map((d, i) => {
+                    files.value.push({
+                        uid: d.uid,
+                        url: d.url,
+                        status: 'done'
+                    });
+                });
+            }
           isUpdate.value = true;
         } else {
           isUpdate.value = false;