commit: 故障报修 新增

@@ -3,7 +3,7 @@ export default {
   nameText: '故障类型名称',
   deviceNameText: '设备名称',
   nameCode: '报修单号',
-  themeText: '报修单号',
+  themeText: '报修主题',
   reportText: '报修人',
   departmentText: '所属部门',
   reportDate: '报修时间',
@@ -16,7 +16,9 @@ export default {
   deviceTypeText: '设备类型',
   storageLocationText: '存放位置',
   useDepartmentText: '使用部门',
-  // faultDescription: '故障描述',
+  phoneText: '联系方式',
+  faultDescription: '故障描述',
+  imgText: '故障图片',
   // faultPicture: '故障图片',
   // faultVideo: '故障视频',
   // faultAudio: '故障音频',
@@ -40,7 +42,7 @@ export default {
   creatorText: '创建人',
   creatorDate: '创建时间',
   operaDate: '操作时间',
-  createCategoryText: '创建设备报修',
-  editOrderText: '编辑设备报修',
+  createCategoryText: '创建故障报修',
+  editOrderText: '编辑故障报修',
   batchActionText: '批量删除',
 }

 import {BasicColumn, FormSchema} from "/@/components/Table";
 import {useI18n} from "/@/hooks/web/useI18n";
 const { t } = useI18n();
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
+import { FileItem } from '/@/components/Upload/src/typing';
+import {createImgPreview} from "/@/components/Preview";
+
 const statusOptions = [
 
 ];
@@ -44,6 +48,181 @@ export const columns: BasicColumn[] = [
   }
 ];
 
+export const formSchema: FormSchema[] = [
+  {
+    field: 'deviceName',
+    label: t('faultReport.facility.deviceNameText'),
+    component: 'Input',
+    required: true,
+    colProps: { span: 12 },
+  },
+  {
+    field: 'deviceCode',
+    label: t('faultReport.facility.deviceCodeText'),
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    required: true,
+    colProps: { span: 12 },
+  },
+  {
+    field: 'model',
+    label: t('faultReport.facility.modelText'),
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    colProps: { span: 12 },
+ },
+  {
+    field: 'deviceType',
+    label: t('faultReport.facility.deviceTypeText'),
+    component: 'Input',
+    required: true,
+    componentProps: {
+      disabled: true,
+    },
+    colProps: { span: 12 },
+ },{
+    field: 'storageLocation',
+    label: t('faultReport.facility.storageLocationText'),
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    colProps: { span: 12 },
+ },{
+    field: 'useDepartment',
+    label: t('faultReport.facility.useDepartmentText'),
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    required: true,
+    colProps: { span: 12 },
+ },{
+    field: 'nameCode',
+    label: t('faultReport.facility.nameCode'),
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    required: true,
+    colProps: { span: 12 },
+ },{
+    field: 'report',
+    label: t('faultReport.facility.reportText'),
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    required: true,
+    colProps: { span: 12 },
+ },{
+    field: 'department',
+    label: t('faultReport.facility.departmentText'),
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    required: true,
+    colProps: { span: 12 },
+ },{
+    field: 'phone',
+    label: t('faultReport.facility.phoneText'),
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    colProps: { span: 12 },
+ },{
+    field: 'themeText',
+    label: t('faultReport.facility.themeText'),
+    component: 'Input',
+    required: true,
+    colProps: { span: 24 },
+  },{
+    field: 'faultDate',
+    label: t('faultReport.facility.faultDate'),
+    component: 'DatePicker',
+    componentProps: {
+      style: { width: '100%' },
+    },
+    colProps: { span: 12 },
+  },
+  {
+    field: 'faultLevel',
+    label: t('faultReport.facility.faultLevel'),
+    component: 'Select',
+    colProps: { span: 12 },
+  },{
+    field: 'faultType',
+    label: t('faultReport.facility.faultType'),
+    component: 'Select',
+    colProps: { span: 12 },
+  },{
+    field: 'serviceStatus',
+    label: t('faultReport.facility.serviceStatus'),
+    component: 'Checkbox',
+    colProps: { span: 12 },
+  },{
+    field: 'faultDescription',
+    label: t('faultReport.facility.faultDescription'),
+    component: 'InputTextArea',
+    colProps: { span: 24 },
+  },{
+    field: 'img',
+    label: t('faultReport.facility.imgText'),
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: ({ formModel }) => {
+      return {
+        listType: 'picture',
+        maxFileLimit: 10,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        // showUploadList: true,
+        onDownload() {},
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+        onDelete(url: string) {
+          formModel.deleteLogoUrl = url!;
+        },
+      };
+    }
+  }
+    // {
+    //     field: 'parentId',
+    //     label: t('routes.common.organization.parentOrganization'),
+    //     component: 'ApiTreeSelect',
+    //     componentProps: {
+    //       placeholder: t('common.chooseText') + t('business.organizationText'),
+    //       api: async () => {
+    //         const data = await getOrganizationList();
+    //         copyTransFun(data as any as any[]);
+    //         return data;
+    //       },
+    //       multiple: 2
+    //   },
+    // },
+]
+
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'deviceNameText',

 <template>
-  <div>
-    <BasicTable @register="registerTable" style="flex: auto">
+  <div class="main">
+    <PageWrapper v-if="!status" >
+      <BasicTable @register="registerTable" style="flex: auto" >
+        <template #toolbar>
+          <Authority value="api:yt:faultReport:facility:post">
+            <Button type="primary" @click="handleCreate('add')">
+              {{ t('faultReport.facility.createCategoryText') }}
+            </Button>
+          </Authority>
+        </template>
+      </BasicTable>
+    </PageWrapper>
+    <PageWrapper v-else class="page">
+      <BreadcrumbIot :breadcrumbList="breadcrumbData" />
+      <div class="page-form">
+        <ModuleTitle :title="t('faultReport.facility.createCategoryText')" />
+        <BasicForm
+            @register="registerForm"
+            @submit="handleSubmit"
+            style="padding: 10px 80px 10px 10px"
+        >
+        </BasicForm>
+        <div class="page-form-button">
+          <Authority value="api:yt:faultReport:facility:post">
+            <Button @click="handleSubmit">
+              {{ t('common.cancelText') }}
+            </Button>
+          </Authority>
+          <Authority >
+            <Button type="primary" @click="handleSubmit" style="margin-left: 10px">
+              {{ t('common.okText') }}
+            </Button>
+          </Authority>
+        </div>
+      </div>
+    </PageWrapper>
 
-    </BasicTable>
   </div>
 </template>
 <script lang="ts" setup>
 import {getPlanList} from "/@/api/equipment/chenkPlan";
 import {columns, searchFormSchema} from "./index";
+import { useRouter, useRoute } from 'vue-router';
 import {DeviceModel} from "/@/api/device/model/deviceModel";
 import {useI18n} from "/@/hooks/web/useI18n";
 const { t } = useI18n();
 import {BasicTable, useTable} from "/@/components/Table";
+import {PageWrapper} from "/@/components/Page";
+import { BreadcrumbIot } from "/@/views/common/BreadcrumbIot"
+import { ModuleTitle } from "/@/views/common/ModuleTitle"
+import {Button} from "ant-design-vue";
+import {Authority} from "/@/components/Authority";
+import {ref,watchEffect} from "vue";
+import {BasicForm, useForm} from "/@/components/Form";
+import {formSchema} from "./index";
+const router = useRouter();
+const route = useRoute();
+const status = ref<string>('');
+const [
+  registerForm,
+  { validate, setFieldsValue, resetFields, updateSchema, validateFields, getFieldsValue },
+] = useForm({
+  labelWidth: 120,
+  schemas: formSchema,
+  showActionButtonGroup: false,
+});
 
+const breadcrumbData = [
+  {
+    title: '故障报修',
+    query: 'add',
+  },
+  {
+    title: '新增故障',
+    query: '',
+  },
+];
 const [
   registerTable,
   { reload, setLoading, setSelectedRowKeys, getForm, getSelectRowKeys, getRowSelection },
@@ -44,4 +107,53 @@ const [
     },
   }
 });
+
+watchEffect(() => {
+  const type = route?.query?.type || '';
+  console.log(type, 'type');
+  // if (type === 'add') {
+  //   status.value = 'add';
+  // } else if (type === 'edit') {
+  //   status.value = 'edit';
+  // }
+  status.value = type === 'add' ? 'add' : type === 'edit' ? 'edit' : 'default';
+});
+
+const handleCreate = (text: string) => {
+  router.push({
+    path: route.path,
+    query: { type: text },
+  });
+};
+const handleSubmit = () => {
+  console.log('handleSubmit');
+  const value = getFieldsValue();
+  console.log(value,'value')
+}
+
 </script>
+<style>
+.main {
+  display: flex;
+  height: 100%;
+}
+.page {
+  padding: 16px;
+}
+.page-form {
+  margin-top: 16px;
+  padding: 16px;
+  background-color: #fff;
+  font-size: 14px;
+  flex: 1;
+}
+.overflow-hidden {
+  height: calc(100% - 32px);
+  display: flex;
+  flex-direction: column;
+}
+.page-form-button {
+  width: 100%;
+  text-align: center;
+}
+</style>