|
|
@@ -0,0 +1,199 @@
|
|
|
+<template>
|
|
|
+ <a-modal :width="800" title="设备异常反馈" :maskClosable="false" :closable="false" v-model:visible="visible"
|
|
|
+ @cancel="onClose">
|
|
|
+ <a-form ref="formRef" :model="formModel" :colon="false" :label-col="labelCol" :wrapper-col="wrapperCol">
|
|
|
+ <a-form-item label='异常描述' name="name" :rules="[{ required: true, message: '异常描述不能为空', whitespace: true }]">
|
|
|
+ <a-input style="width: 100%;" v-model:value="formModel.name" placeholder="请输入异常描述" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label='发生时间' name="user_name"
|
|
|
+ :rules="[{ required: true, message: '发生时间不能为空', whitespace: true }]">
|
|
|
+ <a-date-picker v-model:value="value1" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label='联系电话' name="phone_number">
|
|
|
+ <a-input style="width: 100%;" v-model:value="formModel.phone_number" placeholder="请输入联系电话"
|
|
|
+ :maxLength="11" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label='联系邮箱' name="password">
|
|
|
+ <a-input style="width: 100%;" v-model:value="formModel.user_name" placeholder="请输入发生时间" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label='附件' name="rangeDate">
|
|
|
+ <a-button>上传附件</a-button>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, reactive, onMounted } from 'vue';
|
|
|
+import { SearchOutlined, ReloadOutlined, FileSearchOutlined } from '@ant-design/icons-vue';
|
|
|
+import { apis } from '/@/api/custom';
|
|
|
+
|
|
|
+interface Props {
|
|
|
+ currentId: string,
|
|
|
+ visible: boolean,
|
|
|
+ onClose: () => void,
|
|
|
+};
|
|
|
+
|
|
|
+const props = withDefaults(defineProps<Props>(), {
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+const formRef = ref();
|
|
|
+
|
|
|
+const formModel = reactive({
|
|
|
+ rangeDate: undefined,
|
|
|
+ device_name: undefined,
|
|
|
+ search_info: undefined,
|
|
|
+})
|
|
|
+
|
|
|
+const labelCol = { span: 4 };
|
|
|
+
|
|
|
+const wrapperCol = { span: 18 };
|
|
|
+
|
|
|
+type Query = Partial<{
|
|
|
+ begin_time: string,
|
|
|
+ end_time: string,
|
|
|
+ device_name: undefined,
|
|
|
+ search_info: undefined,
|
|
|
+}>;
|
|
|
+
|
|
|
+interface State {
|
|
|
+ query?: Query,
|
|
|
+ listLoading: boolean,
|
|
|
+ list: any[],
|
|
|
+ currentId: string,
|
|
|
+ drawerVisible: boolean,
|
|
|
+};
|
|
|
+
|
|
|
+const state: State = reactive({
|
|
|
+ query: undefined,
|
|
|
+ listLoading: false,
|
|
|
+ list: [],
|
|
|
+ currentId: '',
|
|
|
+ drawerVisible: false,
|
|
|
+});
|
|
|
+
|
|
|
+const paginationConfig = reactive({
|
|
|
+ pageSizeOptions: ['20', '50', '100'],
|
|
|
+ showQuickJumper: true,
|
|
|
+ showSizeChanger: true,
|
|
|
+ pageSize: 20,
|
|
|
+ current: 1,
|
|
|
+ total: 0,
|
|
|
+ onChange: async (current: number) => {
|
|
|
+ paginationConfig.current = current;
|
|
|
+ await fetchList();
|
|
|
+ },
|
|
|
+ onShowSizeChange: async (current: number, pageSize: number) => {
|
|
|
+ paginationConfig.pageSize = pageSize;
|
|
|
+ await fetchList();
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const fetchList = async () => {
|
|
|
+ state.listLoading = true;
|
|
|
+ try {
|
|
|
+ const res = await apis.fetchChangeRecordList({
|
|
|
+ ...state.query,
|
|
|
+ page: paginationConfig.current,
|
|
|
+ page_size: paginationConfig.pageSize
|
|
|
+ });
|
|
|
+ if (res.code === 0) {
|
|
|
+ paginationConfig.total = res.data.pagination.total
|
|
|
+ paginationConfig.current = res.data.pagination.page
|
|
|
+ paginationConfig.pageSize = res.data.pagination.page_size
|
|
|
+ }
|
|
|
+ state.list = res.data.list;
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e);
|
|
|
+ } finally {
|
|
|
+ state.listLoading = false;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ await fetchList();
|
|
|
+})
|
|
|
+
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ title: '反馈时间',
|
|
|
+ dataIndex: 'create_time',
|
|
|
+ width: 200,
|
|
|
+ sorter: (a: any, b: any) => a.create_time.localeCompare(b.create_time),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '反馈人',
|
|
|
+ dataIndex: 'username',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备型号',
|
|
|
+ dataIndex: 'device_name',
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备SN',
|
|
|
+ dataIndex: 'device_sn',
|
|
|
+ width: 250,
|
|
|
+ slots: { customRender: 'device_sn' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备名称',
|
|
|
+ dataIndex: 'nick_name',
|
|
|
+ width: 150,
|
|
|
+ slots: { customRender: 'nick_name' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备异常描述',
|
|
|
+ dataIndex: 'log_info',
|
|
|
+ width: 150,
|
|
|
+ ellipsis: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '上传状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ slots: { customRender: 'status' },
|
|
|
+ sorter: (a: any, b: any) => a.status.localeCompare(b.status),
|
|
|
+ width: 150,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'operation',
|
|
|
+ fixed: 'right',
|
|
|
+ width: 80,
|
|
|
+ slots: { customRender: 'operation' }
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+// 点击查询
|
|
|
+const handleClicSekarch = async () => {
|
|
|
+ const values = formRef.value?.getFieldsValue();
|
|
|
+ const data = { ...values };
|
|
|
+ delete data.rangeDate;
|
|
|
+ if (values.rangeDate.length === 2) {
|
|
|
+ data.begin_time = values.rangeDate[0];
|
|
|
+ data.end_time = values.rangeDate[1];
|
|
|
+ }
|
|
|
+ state.query = data;
|
|
|
+ await fetchList();
|
|
|
+}
|
|
|
+
|
|
|
+// 点击重置
|
|
|
+const handleClickReset = async () => {
|
|
|
+ formRef.value?.resetFields();
|
|
|
+ const values = formRef.value?.getFieldsValue();
|
|
|
+ const data = { ...values };
|
|
|
+ delete data.rangeDate;
|
|
|
+ state.query = data;
|
|
|
+ await fetchList();
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+</style>
|
李富豪