mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-06-21 06:49:37 +08:00
518 lines
16 KiB
Vue
518 lines
16 KiB
Vue
<template>
|
||
<a-card :bordered="false">
|
||
<div class="table-page-search-wrapper">
|
||
<a-form layout="inline">
|
||
<a-row :gutter="48">
|
||
<a-col :md="7" :sm="15">
|
||
<a-form-item label="维修单号">
|
||
<a-input placeholder="请输入关键词" v-model="queryParam.sn" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="7" :sm="15">
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :allowClear="true" label="故障类别">
|
||
<a-select v-model="queryParam.typeId"
|
||
v-decorator="['typeId']"
|
||
@change="selectDevice">
|
||
<a-select-option v-for="item in typeList" :key="item.id">{{ item.name }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="7" :sm="15">
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :allowClear="true" label="故障子类">
|
||
<a-select v-model="queryParam.deviceId"
|
||
v-decorator="['deviceId', {rules: [{ required: true, message: '请选择所属设备' }]}]"
|
||
@change="getDeviceName">
|
||
<a-select-option v-for="item in deviceList" :key="item.id">{{ item.name }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="7" :sm="15">
|
||
<a-form-item label="报修来源">
|
||
<a-select v-model="queryParam.remark" :allowClear="true"
|
||
v-decorator="['remark']">
|
||
<a-select-option v-for="item in remarkOption" :key="item.value">
|
||
{{ item.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="7" :sm="15">
|
||
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="工单状态">
|
||
<a-select v-model="queryParam.type" :allowClear="true"
|
||
v-decorator="['status']">
|
||
<a-select-option v-for="item in options" :key="item.value">
|
||
{{ item.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="7" :sm="15">
|
||
<a-form-item label="故障等级">
|
||
<a-select v-model="queryParam.repairLevel" :allowClear="true"
|
||
v-decorator="['repairLevel']">
|
||
<a-select-option v-for="item in repairLevelOptions" :key="item.value">
|
||
{{ item.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="7" :sm="20">
|
||
<a-form-item label="关键词（故障描述）">
|
||
<a-input placeholder="请输入关键词" v-model="queryParam.explain" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="7" :sm="15">
|
||
<a-form-item label="评价">
|
||
<a-select v-model="queryParam.evalService"
|
||
v-decorator="['evalService']">
|
||
<a-select-option v-for="item in evalOptions" :key="item.value">
|
||
{{ item.label }}
|
||
</a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="7" :sm="15">
|
||
<a-form-item label="时间范围">
|
||
<a-range-picker v-model="dateRange" @change="onChange" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :md="8" :sm="24">
|
||
<span class="table-page-search-submitButtons">
|
||
<a-button type="primary" @click="selectRepairList()">查询</a-button>
|
||
<a-button style="margin-left: 8px" @click="reset()">重置</a-button>
|
||
<a-button style="margin-left: 8px" type="primary" @click="exportRepair()">导出工单模版</a-button>
|
||
<a-button style="margin-left: 8px" type="primary" @click="importDataVisible()">导入</a-button>
|
||
<a-button style="margin-left: 8px" type="primary" @click="exportRepairList()">导出工单数据</a-button>
|
||
|
||
</span>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</div>
|
||
<div class="table-operator">
|
||
<a-button v-if="addEnable" type="primary" icon="plus" @click="$refs.modal.add()">新建</a-button>
|
||
</div>
|
||
<a-table
|
||
size="default"
|
||
ref="table"
|
||
rowKey="id"
|
||
:columns="columns"
|
||
:data-source="loadData"
|
||
>
|
||
<span slot="status" slot-scope="text">
|
||
{{ text | statusFilter }}
|
||
</span>
|
||
<span slot="remark" slot-scope="text">
|
||
<a-tag v-if="text == '5110'" color="blue">
|
||
{{ text }}
|
||
</a-tag>
|
||
<a-tag v-else color="cyan">
|
||
普通报修
|
||
</a-tag>
|
||
</span>
|
||
<span slot="action" slot-scope="text, record">
|
||
<a v-if="editEnabel" @click="handleView(record.id)">详情</a>
|
||
<a-divider type="vertical" />
|
||
|
||
<a v-if="editEnabel" @click="handleEdit(record)">编辑</a>
|
||
|
||
<a-divider type="vertical" />
|
||
<a type="danger" @click="delByIds(record.id)">删除</a>
|
||
</span>
|
||
</a-table>
|
||
<repair-modal ref="modal" @ok="handleOk" />
|
||
|
||
<a-modal v-model="visible" title="导入工单">
|
||
<div style="display: flex">
|
||
<a-upload
|
||
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
||
@change="customChange"
|
||
:customRequest="customRequest">
|
||
<a-button type="primary">导入工单</a-button>
|
||
</a-upload>
|
||
</div>
|
||
|
||
</a-modal>
|
||
</a-card>
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { STable } from '@/components'
|
||
import { getRepairList, complete, delRepair } from '@/api/admin/repair'
|
||
import { oneWorkerList, oneFloorList, oneFloorCreateList } from '@/api/admin/repair/repairStats'
|
||
import RepairModal from './modules/RepairModal.vue'
|
||
import { checkPermission } from '@/utils/permissions'
|
||
import { getRepairDeviceList } from '@/api/admin/repair/repairDevice'
|
||
import { getRepairTypeList } from '@/api/admin/repair/repairDeviceType'
|
||
import { exportRepair, exportTemplate, importData } from '@/api/admin/repair/repairIo'
|
||
import storage from 'store'
|
||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||
import { message } from 'ant-design-vue'
|
||
|
||
export default {
|
||
name: 'TableList',
|
||
components: {
|
||
STable,
|
||
RepairModal
|
||
},
|
||
data () {
|
||
return {
|
||
dateRange: [],
|
||
labelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 5 }
|
||
},
|
||
wrapperCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 16 }
|
||
},
|
||
form: this.$form.createForm(this),
|
||
mdl: {},
|
||
visible: false,
|
||
headers: {
|
||
Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN)
|
||
},
|
||
// 高级搜索 展开/关闭
|
||
advanced: false,
|
||
// 查询参数
|
||
queryParam: {},
|
||
loadData: [],
|
||
typeList: [],
|
||
deviceList: [],
|
||
repairLevelOptions: [{
|
||
value: '一级',
|
||
label: '一级'
|
||
}, {
|
||
value: '二级',
|
||
label: '二级'
|
||
}, {
|
||
value: '三级',
|
||
label: '三级'
|
||
}
|
||
],
|
||
evalOptions: [{
|
||
value: 1,
|
||
label: '好评'
|
||
}, {
|
||
value: 2,
|
||
label: '中评'
|
||
}, {
|
||
value: 3,
|
||
label: '差评'
|
||
}
|
||
],
|
||
remarkOption: [{
|
||
value: 'no',
|
||
label: '普通报修'
|
||
}, {
|
||
value: 'yes',
|
||
label: '5110'
|
||
}
|
||
],
|
||
options: [{
|
||
value: 'wait',
|
||
label: '待派单'
|
||
}, {
|
||
value: 'anew',
|
||
label: '重新派单'
|
||
}, {
|
||
value: 'already',
|
||
label: '已派单'
|
||
}, {
|
||
value: 'process',
|
||
label: '处理中'
|
||
}, {
|
||
value: 'evaling',
|
||
label: '已完成,待评价'
|
||
}, {
|
||
value: 'invalid',
|
||
label: '无效申请'
|
||
}, {
|
||
value: 'evaled',
|
||
label: '已评价'
|
||
}
|
||
],
|
||
// 表头
|
||
columns: [
|
||
{
|
||
title: '维修单号',
|
||
dataIndex: 'sn'
|
||
},
|
||
{
|
||
title: '故障类别',
|
||
dataIndex: 'typeName'
|
||
},
|
||
{
|
||
title: '故障子类',
|
||
dataIndex: 'deviceName'
|
||
},
|
||
{
|
||
title: '报修来源',
|
||
dataIndex: 'remark',
|
||
scopedSlots: { customRender: 'remark' }
|
||
},
|
||
{
|
||
title: '工单状态',
|
||
dataIndex: 'status',
|
||
scopedSlots: { customRender: 'status' }
|
||
},
|
||
{
|
||
title: '故障等级',
|
||
dataIndex: 'repairLevel'
|
||
},
|
||
{
|
||
title: '报修人',
|
||
dataIndex: 'name'
|
||
},
|
||
{
|
||
title: '报修时间',
|
||
dataIndex: 'createTime',
|
||
sorter: true
|
||
},
|
||
{
|
||
title: '操作',
|
||
width: '200px',
|
||
dataIndex: 'action',
|
||
scopedSlots: { customRender: 'action' }
|
||
}
|
||
],
|
||
// 加载数据方法 必须为 Promise 对象
|
||
// loadData: parameter => {
|
||
// return getRepairList(Object.assign(parameter, this.queryParam))
|
||
// },
|
||
addEnable: checkPermission('admin:repair:add'),
|
||
editEnabel: checkPermission('admin:repair:edit'),
|
||
removeEnable: checkPermission('admin:repair:list')
|
||
}
|
||
},
|
||
filters: {
|
||
// 状态:1 待派单,3 重新派单,5 已派单,7 处理中, 9已完成 待评价, 11 已关闭 13 已评价
|
||
statusFilter (status) {
|
||
const statusMap = {
|
||
'1': '待派单',
|
||
'3': '重新派单',
|
||
'5': '已派单',
|
||
'7': '处理中',
|
||
'9': '已完成,待评价',
|
||
'11': '无效申请',
|
||
'13': '已评价'
|
||
}
|
||
return statusMap[status]
|
||
}
|
||
},
|
||
created () {
|
||
console.log('this.$route.query', this.$route.query.evalService)
|
||
if (this.$route.query.evalService != null) {
|
||
this.queryParam.evalService = this.$route.query.evalService
|
||
}
|
||
this.queryParam.timeout = this.$route.query.timeout
|
||
this.selectRepairList()
|
||
this.selectType()
|
||
},
|
||
methods: {
|
||
customChange () {
|
||
|
||
},
|
||
reset () {
|
||
this.queryParam = {}
|
||
this.queryParam.typeId = ''
|
||
this.selectRepairList()
|
||
},
|
||
customRequest (file) {
|
||
// file 是上传的文件 其内容会在放在下面截图中
|
||
// 后端需要接受的参数是 formData数据，
|
||
// uploadFile 我自己的接口
|
||
const formData = new FormData()
|
||
formData.append('file', file.file)
|
||
console.log(file)
|
||
importData(formData).then(res => {
|
||
if (res.code == 0) {
|
||
// 调用组件内方法, 设置为成功状态
|
||
file.onSuccess(res, file.file)
|
||
file.status = 'done'
|
||
this.visible = false
|
||
this.$message.success('导入成功')
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
file.onError()
|
||
file.status = 'error'
|
||
}
|
||
})
|
||
},
|
||
|
||
// 导入工单
|
||
importDataVisible () {
|
||
this.visible = true
|
||
},
|
||
|
||
// 导出工单模板
|
||
exportRepair () {
|
||
exportTemplate().then(res => {
|
||
this.exportExcel('工单模版', res)
|
||
})
|
||
},
|
||
// 导出工单
|
||
exportRepairList () {
|
||
if (this.dateRange.length < 2) {
|
||
message.error('请先设置时间范围，系统将根据时间范围导出工单数据')
|
||
return
|
||
}
|
||
const startDate = this.dateRange[0].format('YYYY-MM-DD')
|
||
const endDate = this.dateRange[1].format('YYYY-MM-DD')
|
||
exportRepair({ startDate: startDate, endDate: endDate }).then(res => {
|
||
this.exportExcel('工单数据', res)
|
||
})
|
||
},
|
||
exportExcel (filename, res) {
|
||
const link = document.createElement('a')
|
||
let blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=UTF-8' })
|
||
link.style.display = 'none'
|
||
link.href = URL.createObjectURL(blob)
|
||
let num = ''
|
||
for (let i = 0; i < 10; i++) {
|
||
num += Math.ceil(Math.random() * 10)
|
||
}
|
||
link.setAttribute('download', filename + '.xls')
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
},
|
||
|
||
// 切换时间
|
||
onChange (value, dateString) {
|
||
this.queryParam.startTime = dateString[0]
|
||
this.queryParam.endTime = dateString[1]
|
||
},
|
||
// 查询分类
|
||
selectType () {
|
||
getRepairTypeList().then(res => {
|
||
this.typeList = res.rows
|
||
})
|
||
},
|
||
// 查询设备
|
||
selectDevice (typeId) {
|
||
getRepairDeviceList({ 'typeId': typeId }).then(res => {
|
||
this.deviceList = res.rows
|
||
})
|
||
this.queryParam.typeId = typeId
|
||
|
||
},
|
||
getDeviceName (deviceId) {
|
||
this.queryParam.deviceId = deviceId
|
||
},
|
||
// 查询工单列表
|
||
selectRepairList () {
|
||
let type = 'all'
|
||
if (this.queryParam.type != null) {
|
||
type = this.queryParam.type
|
||
}
|
||
if (this.$route.query.status != null) {
|
||
type = this.$route.query.status
|
||
}
|
||
|
||
if (this.$route.query.repairUserId != null) {
|
||
oneWorkerList({ workerId: this.$route.query.repairUserId }).then(res => {
|
||
this.loadData = res.rows
|
||
})
|
||
} else if (this.$route.query.floorId != null) {
|
||
oneFloorList({ floorerId: this.$route.query.floorId }).then(res => {
|
||
this.loadData = res.rows
|
||
})
|
||
} else if (this.$route.query.floorCreateId != null) {
|
||
oneFloorCreateList({ floorerId: this.$route.query.floorCreateId }).then(res => {
|
||
this.loadData = res.rows
|
||
})
|
||
} else {
|
||
|
||
let datas = {
|
||
'role': 7,
|
||
'type': type,
|
||
'repair': {
|
||
'explain': this.queryParam.explain,
|
||
'sn': this.queryParam.sn,
|
||
'typeId': this.queryParam.typeId,
|
||
'deviceId': this.queryParam.deviceId,
|
||
'status': this.queryParam.status,
|
||
'repairLevel': this.queryParam.repairLevel,
|
||
'beginTime': this.queryParam.startTime,
|
||
'endTime': this.queryParam.endTime,
|
||
'evalService': this.queryParam.evalService,
|
||
'timeout': this.queryParam.timeout,
|
||
'remark': this.queryParam.remark,
|
||
'name': this.queryParam.name
|
||
}
|
||
}
|
||
getRepairList(datas).then(res => {
|
||
this.loadData = res.rows
|
||
})
|
||
}
|
||
},
|
||
delByIds (ids) {
|
||
const _this = this
|
||
this.$confirm({
|
||
title: '警告',
|
||
content: '确认要删除工单吗?',
|
||
okText: '是',
|
||
okType: 'warning',
|
||
cancelText: '否',
|
||
onOk () {
|
||
delRepair({ id: ids }).then(res => {
|
||
if (res.code === 0) {
|
||
console.log(res.code)
|
||
message.success('删除成功')
|
||
_this.selectRepairList()
|
||
} else {
|
||
message.error(res.msg)
|
||
}
|
||
})
|
||
},
|
||
onCancel () {
|
||
}
|
||
})
|
||
},
|
||
handleAdd () {
|
||
this.$refs.modal.add()
|
||
},
|
||
handleView (repairId) {
|
||
this.$router.push({ name: 'repairView', query: { repairId: repairId } })
|
||
},
|
||
handleEdit (record) {
|
||
this.$refs.modal.edit(record)
|
||
},
|
||
handleOk () {
|
||
this.$refs.table.refresh(true)
|
||
console.log('handleSaveOk')
|
||
},
|
||
handleComplete (id) {
|
||
const _this = this
|
||
this.$confirm({
|
||
title: '警告',
|
||
content: '确认要完成工单吗?',
|
||
okText: '是',
|
||
okType: 'warning',
|
||
cancelText: '否',
|
||
onOk () {
|
||
complete(id).then(res => {
|
||
if (res.code === 0) {
|
||
_this.$message.success('操作成功')
|
||
_this.$refs.table.refresh(true)
|
||
} else {
|
||
_this.$message.error(res.msg)
|
||
}
|
||
}).catch(() => {
|
||
this.$message.error('系统错误，请稍后再试')
|
||
})
|
||
},
|
||
onCancel () {
|
||
}
|
||
})
|
||
}
|
||
},
|
||
watch: {}
|
||
}
|
||
</script>
|