233 lines
7.5 KiB
Vue
233 lines
7.5 KiB
Vue
<template>
|
|
<div class="contentBox">
|
|
<el-card class="card" shadow="hover">
|
|
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
|
|
<el-form-item :label="proxy.$t('maintenance.deviceName')" prop="deviceName">
|
|
<el-input v-model="queryParams.deviceName" :placeholder="proxy.$t('maintenance.deviceName')" clearable />
|
|
</el-form-item>
|
|
<el-form-item :label="proxy.$t('maintenance.deviceCode')" prop="deviceCode">
|
|
<el-input v-model="queryParams.deviceCode" :placeholder="proxy.$t('maintenance.deviceCode')" clearable />
|
|
</el-form-item>
|
|
<el-form-item :label="proxy.$t('maintenance.maintenanceType')" prop="maintenanceType">
|
|
<el-select v-model="queryParams.maintenanceType" :placeholder="proxy.$t('maintenance.maintenanceType')" clearable style="width:200px" >
|
|
<el-option
|
|
v-for="item in maintenanceTypeList"
|
|
:key="item.dictValue"
|
|
:label="item.dictLabel"
|
|
:value="item.dictValue"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="proxy.$t('maintenance.maintenanceDate')" prop="maintenanceDate">
|
|
<el-date-picker
|
|
v-model="queryParams.maintenanceDate"
|
|
type="date"
|
|
:disabled-date="disabledDate"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
:placeholder="proxy.$t('maintenance.maintenanceDate')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="Search" @click="handleQuery">{{proxy.$t('button.search')}}</el-button>
|
|
<el-button icon="Refresh" @click="resetQuery">{{proxy.$t('button.reset')}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
type="primary"
|
|
plain
|
|
icon="Plus"
|
|
@click="handleAdd"
|
|
>{{proxy.$t('button.add')}}</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-table v-loading="loading" :data="maintenanceList" border>
|
|
<el-table-column :label="proxy.$t('common.sort')" type="index" width="60" align="center" />
|
|
<el-table-column :label="proxy.$t('maintenance.deviceName')" align="center" prop="deviceName" />
|
|
<el-table-column :label="proxy.$t('maintenance.deviceModel')" align="center" prop="deviceModel" />
|
|
<el-table-column :label="proxy.$t('maintenance.deviceCode')" align="center" prop="deviceCode" />
|
|
<el-table-column :label="proxy.$t('common.customerAffiliation')" align="center" prop="customerName" />
|
|
<el-table-column :label="proxy.$t('maintenance.maintenanceType')" align="center" prop="maintenanceTypeName" />
|
|
<el-table-column :label="proxy.$t('common.comments')" align="center" prop="comments" />
|
|
<el-table-column :label="proxy.$t('maintenance.maintenanceUser')" align="center" prop="maintenanceUser" />
|
|
<el-table-column :label="proxy.$t('maintenance.maintenanceDate')" align="center" prop="maintenanceDate" width="100" />
|
|
<el-table-column :label="proxy.$t('maintenance.createTime')" align="center" prop="createTime" width="160" />
|
|
<el-table-column :label="proxy.$t('common.action')" align="center" class-name="small-padding fixed-width">
|
|
<template #default="scope">
|
|
<el-button
|
|
link
|
|
type="primary"
|
|
icon="Edit"
|
|
@click="handleUpdate(scope.row,proxy.$t('button.edit'))"
|
|
>{{ proxy.$t('button.edit') }}</el-button>
|
|
<el-button
|
|
link
|
|
type="primary"
|
|
icon="View"
|
|
@click="handleUpdate(scope.row,proxy.$t('button.details'))"
|
|
>{{proxy.$t('button.check')}}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="pagination">
|
|
<el-pagination
|
|
v-if="total > 0"
|
|
v-model:current-page="queryParams.pageNum"
|
|
v-model:page-size="queryParams.pageSize"
|
|
:total="total"
|
|
:page-sizes="[10, 20, 30, 50]"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
<MaintenanceDialog
|
|
ref="dialogRef"
|
|
:title="dialog.title"
|
|
:formData="dialog.form"
|
|
:maintenance-type-list="maintenanceTypeList"
|
|
v-model="dialog.visible"
|
|
@success="handleSuccess"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import {getMaintainListApi,getMaintainTypeApi, getMaintainDetailApi} from '@/api/maintenance/index.js'
|
|
import {ElMessage} from "element-plus";
|
|
import MaintenanceDialog from "./common/MaintenanceDialog.vue";
|
|
import { useI18n } from 'vue-i18n';
|
|
const router = useRouter()
|
|
const { proxy } = getCurrentInstance();
|
|
const queryFormRef = ref()
|
|
const loading = ref(false)
|
|
const showSearch = ref(true)
|
|
const total = ref(0)
|
|
const maintenanceTypeList = ref([])
|
|
const maintenanceList = ref([])
|
|
const { t } = useI18n();
|
|
|
|
const queryParams = reactive({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
deviceName: '',
|
|
deviceCode: '',
|
|
maintenanceType: '',
|
|
maintenanceDate: ''
|
|
})
|
|
// 添加弹框相关的数据
|
|
const dialog = reactive({
|
|
title: proxy.$t('button.add'),
|
|
visible: false,
|
|
form: {
|
|
deviceCode: '',
|
|
maintenanceType: '',
|
|
maintenanceUser: '',
|
|
maintenanceDate: '',
|
|
comments: ''
|
|
}
|
|
})
|
|
const dialogRef = ref()
|
|
|
|
const getList = async() => {
|
|
loading.value = true
|
|
// 这里应该调用后端API获取数据
|
|
const res = await getMaintainListApi(queryParams);
|
|
if(res.code === 200) {
|
|
maintenanceList.value = res.rows || []
|
|
total.value = res.total
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
loading.value = false
|
|
}
|
|
|
|
const handleQuery = () => {
|
|
queryParams.pageNum = 1
|
|
getList()
|
|
}
|
|
|
|
const resetQuery = () => {
|
|
queryFormRef.value?.resetFields()
|
|
handleQuery()
|
|
}
|
|
// 打开新增弹框
|
|
const handleAdd = () => {
|
|
dialog.title = proxy.$t('button.add')
|
|
dialog.visible = true
|
|
}
|
|
|
|
// 添加成功回调方法
|
|
const handleSuccess = () => {
|
|
getList()
|
|
}
|
|
// 编辑
|
|
const handleUpdate = async(row,value) => {
|
|
const res = await getMaintainDetailApi(row.id)
|
|
if(res.code === 200) {
|
|
dialog.title = value
|
|
dialog.visible = true
|
|
dialog.form.deviceCode = res.data.deviceCode
|
|
dialog.form.maintenanceType = res.data.maintenanceType.toString()
|
|
dialog.form.maintenanceUser = res.data.maintenanceUser
|
|
dialog.form.maintenanceDate = res.data.maintenanceDate
|
|
dialog.form.comments = res.data.comments
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
}
|
|
|
|
const disabledDate = (time) => {
|
|
return time.getTime() > Date.now()
|
|
}
|
|
const handleSizeChange = (val) => {
|
|
queryParamsNoPage.pageSize = val
|
|
getList()
|
|
}
|
|
|
|
const handleCurrentChange = (val) => {
|
|
queryParamsNoPage.pageNum = val
|
|
getList()
|
|
}
|
|
// 获取维保类型
|
|
const getMaintainType = async() => {
|
|
const res = await getMaintainTypeApi()
|
|
if(res.code === 200) {
|
|
maintenanceTypeList.value = res.data || []
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
getList()
|
|
getMaintainType()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.contentBox {
|
|
height:calc(100vh - 130px);
|
|
margin:20px;
|
|
.card {
|
|
width:100%;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 20px;
|
|
}
|
|
.mb8 {
|
|
margin-bottom: 8px;
|
|
}
|
|
</style> |