简柏林 / thingskit-front · Commits

Commit 7be7525e8d8214df9dd4f426fe5c242841537f98

Authored by gesilong
1 parent 3d420102

commit: 故障报修 新增

Inline Side-by-side
Showing 3 changed files with 300 additions and 7 deletions
@@ -3,7 +3,7 @@ export default { @@ -3,7 +3,7 @@ export default {
3 nameText: '故障类型名称', 3 nameText: '故障类型名称',
4 deviceNameText: '设备名称', 4 deviceNameText: '设备名称',
5 nameCode: '报修单号', 5 nameCode: '报修单号',
6 - themeText: '报修单号', 6 + themeText: '报修主题',
7 reportText: '报修人', 7 reportText: '报修人',
8 departmentText: '所属部门', 8 departmentText: '所属部门',
9 reportDate: '报修时间', 9 reportDate: '报修时间',
@@ -16,7 +16,9 @@ export default { @@ -16,7 +16,9 @@ export default {
16 deviceTypeText: '设备类型', 16 deviceTypeText: '设备类型',
17 storageLocationText: '存放位置', 17 storageLocationText: '存放位置',
18 useDepartmentText: '使用部门', 18 useDepartmentText: '使用部门',
19 - // faultDescription: '故障描述', 19 + phoneText: '联系方式',
  20 + faultDescription: '故障描述',
  21 + imgText: '故障图片',
20 // faultPicture: '故障图片', 22 // faultPicture: '故障图片',
21 // faultVideo: '故障视频', 23 // faultVideo: '故障视频',
22 // faultAudio: '故障音频', 24 // faultAudio: '故障音频',
@@ -40,7 +42,7 @@ export default { @@ -40,7 +42,7 @@ export default {
40 creatorText: '创建人', 42 creatorText: '创建人',
41 creatorDate: '创建时间', 43 creatorDate: '创建时间',
42 operaDate: '操作时间', 44 operaDate: '操作时间',
43 - createCategoryText: '创建设备报修',  
44 - editOrderText: '编辑设备报修', 45 + createCategoryText: '创建故障报修',
  46 + editOrderText: '编辑故障报修',
45 batchActionText: '批量删除', 47 batchActionText: '批量删除',
46 } 48 }
1 import {BasicColumn, FormSchema} from "/@/components/Table"; 1 import {BasicColumn, FormSchema} from "/@/components/Table";
2 import {useI18n} from "/@/hooks/web/useI18n"; 2 import {useI18n} from "/@/hooks/web/useI18n";
3 const { t } = useI18n(); 3 const { t } = useI18n();
  4 +import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
  5 +import { FileItem } from '/@/components/Upload/src/typing';
  6 +import {createImgPreview} from "/@/components/Preview";
  7 +
4 const statusOptions = [ 8 const statusOptions = [
5 9
6 ]; 10 ];
@@ -44,6 +48,181 @@ export const columns: BasicColumn[] = [ @@ -44,6 +48,181 @@ export const columns: BasicColumn[] = [
44 } 48 }
45 ]; 49 ];
46 50
  51 +export const formSchema: FormSchema[] = [
  52 + {
  53 + field: 'deviceName',
  54 + label: t('faultReport.facility.deviceNameText'),
  55 + component: 'Input',
  56 + required: true,
  57 + colProps: { span: 12 },
  58 + },
  59 + {
  60 + field: 'deviceCode',
  61 + label: t('faultReport.facility.deviceCodeText'),
  62 + component: 'Input',
  63 + componentProps: {
  64 + disabled: true,
  65 + },
  66 + required: true,
  67 + colProps: { span: 12 },
  68 + },
  69 + {
  70 + field: 'model',
  71 + label: t('faultReport.facility.modelText'),
  72 + component: 'Input',
  73 + componentProps: {
  74 + disabled: true,
  75 + },
  76 + colProps: { span: 12 },
  77 + },
  78 + {
  79 + field: 'deviceType',
  80 + label: t('faultReport.facility.deviceTypeText'),
  81 + component: 'Input',
  82 + required: true,
  83 + componentProps: {
  84 + disabled: true,
  85 + },
  86 + colProps: { span: 12 },
  87 + },{
  88 + field: 'storageLocation',
  89 + label: t('faultReport.facility.storageLocationText'),
  90 + component: 'Input',
  91 + componentProps: {
  92 + disabled: true,
  93 + },
  94 + colProps: { span: 12 },
  95 + },{
  96 + field: 'useDepartment',
  97 + label: t('faultReport.facility.useDepartmentText'),
  98 + component: 'Input',
  99 + componentProps: {
  100 + disabled: true,
  101 + },
  102 + required: true,
  103 + colProps: { span: 12 },
  104 + },{
  105 + field: 'nameCode',
  106 + label: t('faultReport.facility.nameCode'),
  107 + component: 'Input',
  108 + componentProps: {
  109 + disabled: true,
  110 + },
  111 + required: true,
  112 + colProps: { span: 12 },
  113 + },{
  114 + field: 'report',
  115 + label: t('faultReport.facility.reportText'),
  116 + component: 'Input',
  117 + componentProps: {
  118 + disabled: true,
  119 + },
  120 + required: true,
  121 + colProps: { span: 12 },
  122 + },{
  123 + field: 'department',
  124 + label: t('faultReport.facility.departmentText'),
  125 + component: 'Input',
  126 + componentProps: {
  127 + disabled: true,
  128 + },
  129 + required: true,
  130 + colProps: { span: 12 },
  131 + },{
  132 + field: 'phone',
  133 + label: t('faultReport.facility.phoneText'),
  134 + component: 'Input',
  135 + componentProps: {
  136 + disabled: true,
  137 + },
  138 + colProps: { span: 12 },
  139 + },{
  140 + field: 'themeText',
  141 + label: t('faultReport.facility.themeText'),
  142 + component: 'Input',
  143 + required: true,
  144 + colProps: { span: 24 },
  145 + },{
  146 + field: 'faultDate',
  147 + label: t('faultReport.facility.faultDate'),
  148 + component: 'DatePicker',
  149 + componentProps: {
  150 + style: { width: '100%' },
  151 + },
  152 + colProps: { span: 12 },
  153 + },
  154 + {
  155 + field: 'faultLevel',
  156 + label: t('faultReport.facility.faultLevel'),
  157 + component: 'Select',
  158 + colProps: { span: 12 },
  159 + },{
  160 + field: 'faultType',
  161 + label: t('faultReport.facility.faultType'),
  162 + component: 'Select',
  163 + colProps: { span: 12 },
  164 + },{
  165 + field: 'serviceStatus',
  166 + label: t('faultReport.facility.serviceStatus'),
  167 + component: 'Checkbox',
  168 + colProps: { span: 12 },
  169 + },{
  170 + field: 'faultDescription',
  171 + label: t('faultReport.facility.faultDescription'),
  172 + component: 'InputTextArea',
  173 + colProps: { span: 24 },
  174 + },{
  175 + field: 'img',
  176 + label: t('faultReport.facility.imgText'),
  177 + component: 'ApiUpload',
  178 + changeEvent: 'update:fileList',
  179 + valueField: 'fileList',
  180 + componentProps: ({ formModel }) => {
  181 + return {
  182 + listType: 'picture',
  183 + maxFileLimit: 10,
  184 + accept: '.png,.jpg,.jpeg,.gif',
  185 + api: async (file: File) => {
  186 + try {
  187 + const formData = new FormData();
  188 + formData.set('file', file);
  189 + const { fileStaticUri, fileName } = await uploadThumbnail(formData);
  190 + return {
  191 + uid: fileStaticUri,
  192 + name: fileName,
  193 + url: fileStaticUri,
  194 + } as FileItem;
  195 + } catch (error) {
  196 + return {};
  197 + }
  198 + },
  199 + // showUploadList: true,
  200 + onDownload() {},
  201 + onPreview: (fileList: FileItem) => {
  202 + createImgPreview({ imageList: [fileList.url!] });
  203 + },
  204 + onDelete(url: string) {
  205 + formModel.deleteLogoUrl = url!;
  206 + },
  207 + };
  208 + }
  209 + }
  210 + // {
  211 + // field: 'parentId',
  212 + // label: t('routes.common.organization.parentOrganization'),
  213 + // component: 'ApiTreeSelect',
  214 + // componentProps: {
  215 + // placeholder: t('common.chooseText') + t('business.organizationText'),
  216 + // api: async () => {
  217 + // const data = await getOrganizationList();
  218 + // copyTransFun(data as any as any[]);
  219 + // return data;
  220 + // },
  221 + // multiple: 2
  222 + // },
  223 + // },
  224 +]
  225 +
47 export const searchFormSchema: FormSchema[] = [ 226 export const searchFormSchema: FormSchema[] = [
48 { 227 {
49 field: 'deviceNameText', 228 field: 'deviceNameText',
1 <template> 1 <template>
2 - <div>  
3 - <BasicTable @register="registerTable" style="flex: auto"> 2 + <div class="main">
  3 + <PageWrapper v-if="!status" >
  4 + <BasicTable @register="registerTable" style="flex: auto" >
  5 + <template #toolbar>
  6 + <Authority value="api:yt:faultReport:facility:post">
  7 + <Button type="primary" @click="handleCreate('add')">
  8 + {{ t('faultReport.facility.createCategoryText') }}
  9 + </Button>
  10 + </Authority>
  11 + </template>
  12 + </BasicTable>
  13 + </PageWrapper>
  14 + <PageWrapper v-else class="page">
  15 + <BreadcrumbIot :breadcrumbList="breadcrumbData" />
  16 + <div class="page-form">
  17 + <ModuleTitle :title="t('faultReport.facility.createCategoryText')" />
  18 + <BasicForm
  19 + @register="registerForm"
  20 + @submit="handleSubmit"
  21 + style="padding: 10px 80px 10px 10px"
  22 + >
  23 + </BasicForm>
  24 + <div class="page-form-button">
  25 + <Authority value="api:yt:faultReport:facility:post">
  26 + <Button @click="handleSubmit">
  27 + {{ t('common.cancelText') }}
  28 + </Button>
  29 + </Authority>
  30 + <Authority >
  31 + <Button type="primary" @click="handleSubmit" style="margin-left: 10px">
  32 + {{ t('common.okText') }}
  33 + </Button>
  34 + </Authority>
  35 + </div>
  36 + </div>
  37 + </PageWrapper>
4 38
5 - </BasicTable>  
6 </div> 39 </div>
7 </template> 40 </template>
8 <script lang="ts" setup> 41 <script lang="ts" setup>
9 import {getPlanList} from "/@/api/equipment/chenkPlan"; 42 import {getPlanList} from "/@/api/equipment/chenkPlan";
10 import {columns, searchFormSchema} from "./index"; 43 import {columns, searchFormSchema} from "./index";
  44 +import { useRouter, useRoute } from 'vue-router';
11 import {DeviceModel} from "/@/api/device/model/deviceModel"; 45 import {DeviceModel} from "/@/api/device/model/deviceModel";
12 import {useI18n} from "/@/hooks/web/useI18n"; 46 import {useI18n} from "/@/hooks/web/useI18n";
13 const { t } = useI18n(); 47 const { t } = useI18n();
14 import {BasicTable, useTable} from "/@/components/Table"; 48 import {BasicTable, useTable} from "/@/components/Table";
  49 +import {PageWrapper} from "/@/components/Page";
  50 +import { BreadcrumbIot } from "/@/views/common/BreadcrumbIot"
  51 +import { ModuleTitle } from "/@/views/common/ModuleTitle"
  52 +import {Button} from "ant-design-vue";
  53 +import {Authority} from "/@/components/Authority";
  54 +import {ref,watchEffect} from "vue";
  55 +import {BasicForm, useForm} from "/@/components/Form";
  56 +import {formSchema} from "./index";
  57 +const router = useRouter();
  58 +const route = useRoute();
  59 +const status = ref<string>('');
  60 +const [
  61 + registerForm,
  62 + { validate, setFieldsValue, resetFields, updateSchema, validateFields, getFieldsValue },
  63 +] = useForm({
  64 + labelWidth: 120,
  65 + schemas: formSchema,
  66 + showActionButtonGroup: false,
  67 +});
15 68
  69 +const breadcrumbData = [
  70 + {
  71 + title: '故障报修',
  72 + query: 'add',
  73 + },
  74 + {
  75 + title: '新增故障',
  76 + query: '',
  77 + },
  78 +];
16 const [ 79 const [
17 registerTable, 80 registerTable,
18 { reload, setLoading, setSelectedRowKeys, getForm, getSelectRowKeys, getRowSelection }, 81 { reload, setLoading, setSelectedRowKeys, getForm, getSelectRowKeys, getRowSelection },
@@ -44,4 +107,53 @@ const [ @@ -44,4 +107,53 @@ const [
44 }, 107 },
45 } 108 }
46 }); 109 });
  110 +
  111 +watchEffect(() => {
  112 + const type = route?.query?.type || '';
  113 + console.log(type, 'type');
  114 + // if (type === 'add') {
  115 + // status.value = 'add';
  116 + // } else if (type === 'edit') {
  117 + // status.value = 'edit';
  118 + // }
  119 + status.value = type === 'add' ? 'add' : type === 'edit' ? 'edit' : 'default';
  120 +});
  121 +
  122 +const handleCreate = (text: string) => {
  123 + router.push({
  124 + path: route.path,
  125 + query: { type: text },
  126 + });
  127 +};
  128 +const handleSubmit = () => {
  129 + console.log('handleSubmit');
  130 + const value = getFieldsValue();
  131 + console.log(value,'value')
  132 +}
  133 +
47 </script> 134 </script>
  135 +<style>
  136 +.main {
  137 + display: flex;
  138 + height: 100%;
  139 +}
  140 +.page {
  141 + padding: 16px;
  142 +}
  143 +.page-form {
  144 + margin-top: 16px;
  145 + padding: 16px;
  146 + background-color: #fff;
  147 + font-size: 14px;
  148 + flex: 1;
  149 +}
  150 +.overflow-hidden {
  151 + height: calc(100% - 32px);
  152 + display: flex;
  153 + flex-direction: column;
  154 +}
  155 +.page-form-button {
  156 + width: 100%;
  157 + text-align: center;
  158 +}
  159 +</style>