创建设备异常反馈

Web/src/components/devices/deviceList/components/FeedbackCreateModal.vue

@@ -2,43 +2,40 @@
     <a-modal :width="950" title="设备异常反馈" :maskClosable="false" :closable="false" okText="提交" v-model:visible="visible"
         @ok="handleClickSubmit" @cancel="onClickClose">
         <a-form ref="formRef" :model="formModel" :colon="false" :label-col="labelCol" :wrapper-col="wrapperCol">
-            <a-form-item label='异常描述' name="describe"
+            <a-form-item label='异常描述' name="logsInfo"
                 :rules="[{ required: true, message: '异常描述不能为空', whitespace: true }]">
-                <a-input style="width: 100%;" v-model:value="formModel.describe" placeholder="请输入异常描述" />
+                <a-input style="width: 100%;" v-model:value="formModel.logsInfo" placeholder="请输入异常描述" />
             </a-form-item>
-            <a-form-item label='发生时间' name="date" :rules="[{ required: true, message: '发生时间不能为空' }]">
-                <a-date-picker style="width: 100%;" showTime valueFormat="YYYY-MM-DD HH:mm:ss"
-                    v-model:value="formModel.date" placeholder="请选择发生时间" />
+            <a-form-item label='发生时间' name="happenTime" :rules="[{ required: true, message: '发生时间不能为空' }]">
+                <a-date-picker style="width: 100%;" showTime v-model:value="formModel.happenTime"
+                    placeholder="请选择发生时间" />
             </a-form-item>
-            <a-form-item label='联系电话' name="phone">
-                <a-input style="width: 100%;" v-model:value="formModel.phone" placeholder="请输入联系电话" />
+            <a-form-item label='联系电话' name="contactNumber">
+                <a-input style="width: 100%;" v-model:value="formModel.contactNumber" placeholder="请输入联系电话" />
             </a-form-item>
-            <a-form-item label='联系邮箱' name="email">
-                <a-input style="width: 100%;" v-model:value="formModel.email" placeholder="请输入联系邮箱" />
+            <a-form-item label='联系邮箱' name="contactEmail">
+                <a-input style="width: 100%;" v-model:value="formModel.contactEmail" placeholder="请输入联系邮箱" />
             </a-form-item>
             <a-form-item label='附件'>
                 <a-upload :action="getUploadPath()" method="POST" :headers="getHeaders()"
                     :file-list="formModel.fileList" @change="handleChangeUpload">
-                    <a-button>上传附件</a-button>
+                    <a-button style="position: relative;">
+                        <div>
+                            上传附件
+                        </div>
+                        <div style="width: 400px;color:#8a8a8a;font-size: 12px;position: absolute;top: 6px;right: -410px;cursor:auto;"
+                            @click.stop>
+                            支持上传：图片、文档、视频、RAR 及 ZIP 等文件（至多上传 3 个文件）
+                        </div>
+                    </a-button>
                 </a-upload>
-                <!-- <div style="font-size: 12px;color: rgba(0,0,0,.45);margin-left: 10px;">
-                        支持上传：图片、文档、视频、RAR 及 ZIP 等文件（至多上传 3 个文件）
-                    </div> -->
-            </a-form-item>
-            <a-form-item label='上传日志' name="linkageSelect">
-                <div style="display: flex;align-items: center;">
-                    <div style="margin-right: 10px;">
-                        联动选择
-                    </div>
-                    <a-switch v-model:checked="formModel.linkageSelect" />
-                </div>
             </a-form-item>
         </a-form>
         <div class="log-list">
             <div class="log-list-item">
-                <a-table :columns="airportLogColumns" :scroll="{ x: '100%', y: 600 }"
-                    :data-source="state.airportLogList" :loading="state.listLoading"
-                    :row-selection="airportTableLogState.rowSelection" rowKey="boot_index" :pagination="false">
+                <a-table :columns="airportLogColumns" :scroll="{ x: '100%', y: 300 }"
+                    :data-source="state.airportLogList" :loading="state.listLoading" rowKey="boot_index"
+                    :row-selection="airportLogState.rowSelection" :pagination="false">
                     <template #log="{ record }">
                         <div style="font-size: 12px;">
                             {{ getDateTime(record.start_time) }}
@@ -56,8 +53,8 @@
                 </a-table>
             </div>
             <div class="log-list-item">
-                <a-table :columns="droneLogColumns" :scroll="{ x: '100%', y: 600 }" :data-source="state.droneLogList"
-                    :loading="state.listLoading" :row-selection="droneTableLogState.rowSelection" rowKey="boot_index"
+                <a-table :columns="droneLogColumns" :scroll="{ x: '100%', y: 300 }" :data-source="state.droneLogList"
+                    :loading="state.listLoading" rowKey="boot_index" :row-selection="airportLogState.rowSelection"
                     :pagination="false">
                     <template #log="{ record }">
                         <div style="font-size: 12px;">
@@ -81,6 +78,7 @@
 
 <script lang="ts" setup>
 import { ref, reactive, onMounted } from 'vue';
+import { message } from 'ant-design-vue';
 import { apis, getUploadPath } from '/@/api/custom';
 import { getHeaders } from '/@/api/http/request';
 import moment from 'moment';
@@ -99,12 +97,15 @@ const props = withDefaults(defineProps<Props>(), {
 const formRef = ref();
 
 const formModel = reactive({
-    describe: undefined,
-    date: undefined,
-    phone: undefined,
-    email: undefined,
-    fileList: [] as any[],
-    linkageSelect: undefined
+    logsInfo: undefined,
+    happenTime: undefined,
+    contactNumber: undefined,
+    contactEmail: undefined,
+    fileList: [] as {
+        uid: string,
+        name: string,
+        url: string,
+    }[],
 })
 
 const labelCol = { span: 4 };
@@ -188,11 +189,11 @@ const handleChangeUpload = (info: any) => {
     });
     formModel.fileList = newFileList;
     if (info.file.status === 'done') {// 上传成功
-        const { code, message } = info.file.response;
-        if (code === 0) {
+        const data = info.file.response;
+        if (data.code === 0) {
             message.success('上传成功');
         } else {
-            message.error(message);
+            message.error(data.message);
         }
     }
 };
@@ -225,35 +226,52 @@ const droneLogColumns = [
     }
 ]
 
-const airportTableLogState = reactive({
-    selectRow: [],
+const airportLogState = reactive({
+    selectedRows: [] as any[],
     rowSelection: {
         columnWidth: 40,
         selectedRowKeys: [] as number[],
-        onChange: (selectedRowKeys: number[], selectedRows: []) => {
-            airportTableLogState.rowSelection.selectedRowKeys = selectedRowKeys
-            airportTableLogState.selectRow = selectedRows
-            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+        onChange: (selectedRowKeys: number[], selectedRows: any[]) => {
+            airportLogState.rowSelection.selectedRowKeys = selectedRowKeys;
+            airportLogState.selectedRows = selectedRows;
         },
     }
 })
 
-const droneTableLogState = reactive({
-    selectRow: [],
+const droneLogState = reactive({
+    selectedRows: [] as any[],
     rowSelection: {
         columnWidth: 40,
         selectedRowKeys: [] as number[],
-        onChange: (selectedRowKeys: number[], selectedRows: []) => {
-            droneTableLogState.rowSelection.selectedRowKeys = selectedRowKeys
-            droneTableLogState.selectRow = selectedRows
-            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
+        onChange: (selectedRowKeys: number[], selectedRows: any[]) => {
+            droneLogState.rowSelection.selectedRowKeys = selectedRowKeys;
+            droneLogState.selectedRows = selectedRows;
         },
     }
 })
 
 // 点击提交
 const handleClickSubmit = () => {
-
+    formRef.value?.validateFields().then(async (values: any) => {
+        const list = [];
+        const airportLogSelectedList = airportLogState.selectedRows;
+        const droneLogSelectedList = droneLogState.selectedRows;
+        if (airportLogSelectedList.length) {
+            list.push({ list: airportLogSelectedList, module: '3' });
+        }
+        if (droneLogSelectedList.length) {
+            list.push({ list: airportLogSelectedList, module: '0' });
+        }
+        const data = {
+            ...values,
+            happenTime: moment(values.happenTime).valueOf(),
+            ossIds: formModel.fileList.map(item => item.uid).join(','),
+            list: list,
+        }
+        console.log(data, 'data');
+    }).catch((error: any) => {
+        console.error(error);
+    });
 }
 </script>