mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-06-21 17:19:35 +08:00
669a78fd20
2.固定语言为中文（src/locales/index.js、src/components/SeslectLang/index.jsx） 3.默认首页设置为/admin/repair/RepairDeviceList/repairStatistics（src/config/router.config.js） 4.左侧菜单固定（src/config/defaultSessting.js） 5.人员绩效前面小图标去掉（菜单设置，图标设为#） 6.工单列表页加入分页（基本重写逻辑） 7.人员绩效进入查看详情时，仅允许查看列表和详情，其余全部隐藏 8.重写了工单添加页和详情页，去掉了编辑工单功能 9.修复了添加工单后列表不加载BUG（子组件调用父组件方法handleOk） 10.故障类型、子类、报修地点、损坏原因等页面重新整理了一下，把文字统一，去掉了无用的筛选 11.人员绩效筛选加入人名，修改了重置的BUG，把全部加载改写成分页加载（a-tab上一定要加:force-render='true'，预先dom加载好，否则refs获取不到，调用refresh时会报错） 12.选人时可以搜索人名或手机号（设置optionFilterProp="label"，同时设置:label="item.username + item.mobile"）
581 lines
18 KiB
Vue
581 lines
18 KiB
Vue
<template>
|
||
<a-card :bordered='false'>
|
||
<div class='table-page-search-wrapper' v-if='!isShowModel'>
|
||
<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='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.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='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.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='$refs.table.refresh(true)'>查询</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' v-if='!isShowModel'>
|
||
<a-button v-if='addEnable' type='primary' icon='plus' @click='$refs.modal.add()'>新建</a-button>
|
||
</div>
|
||
<s-table
|
||
size='default'
|
||
ref='table'
|
||
rowKey='id'
|
||
:rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
|
||
:columns='columns'
|
||
:data='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 v-if='!isShowModel' type='vertical' />-->
|
||
<!-- <a v-if='editEnabel && !isShowModel' @click='handleEdit(record)'>编辑</a>-->
|
||
<a-divider v-if='!isShowModel' type='vertical' />
|
||
<a type='danger' v-if='!isShowModel' @click='delByIds(record.id)'>删除</a>
|
||
</span>
|
||
</s-table>
|
||
<repair-modal ref='modal' @success='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: [],
|
||
isShowModel: false, // 是否为查看模式，查看模式下仅允许查看列表、查看详情
|
||
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: {
|
||
'type': 'all',
|
||
'explain': '',
|
||
'sn': '',
|
||
'typeId': '',
|
||
'deviceId': '',
|
||
'status': '',
|
||
'repairLevel': '',
|
||
'beginTime': '',
|
||
'endTime': '',
|
||
'evalService': '',
|
||
'timeout': '',
|
||
'remark': '',
|
||
'name': ''
|
||
},
|
||
// loadData: [],
|
||
typeList: [],
|
||
deviceList: [],
|
||
repairLevelOptions: [{
|
||
value: '',
|
||
label: '全部'
|
||
}, {
|
||
value: '一级',
|
||
label: '一级'
|
||
}, {
|
||
value: '二级',
|
||
label: '二级'
|
||
}, {
|
||
value: '三级',
|
||
label: '三级'
|
||
}
|
||
],
|
||
evalOptions: [{
|
||
value: '',
|
||
label: '全部'
|
||
}, {
|
||
value: 1,
|
||
label: '好评'
|
||
}, {
|
||
value: 2,
|
||
label: '中评'
|
||
}, {
|
||
value: 3,
|
||
label: '差评'
|
||
}
|
||
],
|
||
remarkOption: [{
|
||
value: '',
|
||
label: '全部'
|
||
}, {
|
||
value: 'no',
|
||
label: '普通报修'
|
||
}, {
|
||
value: 'yes',
|
||
label: '5110'
|
||
}
|
||
],
|
||
options: [{
|
||
value: 'all',
|
||
label: '全部'
|
||
}, {
|
||
value: 'wait',
|
||
label: '待派单'
|
||
}, {
|
||
value: 'anew',
|
||
label: '重新派单'
|
||
}, {
|
||
value: 'already',
|
||
label: '已派单'
|
||
}, {
|
||
value: 'process',
|
||
label: '处理中'
|
||
}, {
|
||
value: 'evaling',
|
||
label: '待评价'
|
||
}, {
|
||
value: 'evaled',
|
||
label: '已评价'
|
||
}, {
|
||
value: 'invalid',
|
||
label: '无效申请'
|
||
}
|
||
],
|
||
// 表头
|
||
columns: [
|
||
{
|
||
title: '维修单号',
|
||
dataIndex: 'sn'
|
||
},
|
||
{
|
||
title: '故障类型',
|
||
dataIndex: 'typeName'
|
||
},
|
||
{
|
||
title: '故障子类',
|
||
dataIndex: 'deviceName'
|
||
},
|
||
{
|
||
title: '故障等级',
|
||
dataIndex: 'repairLevel'
|
||
},
|
||
{
|
||
title: '报修来源',
|
||
dataIndex: 'remark',
|
||
scopedSlots: { customRender: 'remark' }
|
||
},
|
||
{
|
||
title: '工单状态',
|
||
dataIndex: 'status',
|
||
scopedSlots: { customRender: 'status' }
|
||
},
|
||
{
|
||
title: '报修人',
|
||
dataIndex: 'name'
|
||
},
|
||
{
|
||
title: '报修时间',
|
||
dataIndex: 'createTime',
|
||
sorter: true
|
||
},
|
||
{
|
||
title: '操作',
|
||
width: '200px',
|
||
dataIndex: 'action',
|
||
scopedSlots: { customRender: 'action' }
|
||
}
|
||
],
|
||
// 加载数据方法 必须为 Promise 对象
|
||
loadData: parameter => {
|
||
if (this.$route.query.repairUserId != null) {
|
||
return oneWorkerList(Object.assign(parameter, { workerId: this.$route.query.repairUserId }))
|
||
} else if (this.$route.query.floorId != null) {
|
||
return oneFloorList(Object.assign(parameter, { floorerId: this.$route.query.floorId }))
|
||
} else if (this.$route.query.floorCreateId != null) {
|
||
return oneFloorCreateList(Object.assign(parameter, { floorerId: this.$route.query.floorCreateId }))
|
||
} else {
|
||
const data = {
|
||
'role': 7,
|
||
'type': this.queryParam.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
|
||
}
|
||
}
|
||
return getRepairList(Object.assign(parameter, data))
|
||
}
|
||
// return getRepairList(Object.assign(parameter, this.queryParam))
|
||
},
|
||
selectedRowKeys: [],
|
||
selectedRows: [],
|
||
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.queryParam.type = this.$route.query.status || 'all'
|
||
// this.selectRepairList()
|
||
// 页面部分隐藏
|
||
if (this.$route.query.repairUserId != null || this.$route.query.floorId != null || this.$route.query.floorCreateId != null) {
|
||
// 从绩效入口进入，不允许新建、查询、编辑、删除等操作
|
||
this.isShowModel = true
|
||
}
|
||
this.selectType()
|
||
},
|
||
methods: {
|
||
fatherMethod(val) {
|
||
console.log('val实际就是子组件传过来的childParam')
|
||
},
|
||
customChange() {
|
||
|
||
},
|
||
onSelectChange(selectedRowKeys, selectedRows) {
|
||
this.selectedRowKeys = selectedRowKeys
|
||
this.selectedRows = selectedRows
|
||
},
|
||
reset() {
|
||
this.queryParam = {
|
||
'type': 'all',
|
||
'explain': '',
|
||
'sn': '',
|
||
'typeId': '',
|
||
'deviceId': '',
|
||
'status': '',
|
||
'repairLevel': '',
|
||
'beginTime': '',
|
||
'endTime': '',
|
||
'evalService': '',
|
||
'timeout': '',
|
||
'remark': '',
|
||
'name': ''
|
||
}
|
||
this.handleOk(true)
|
||
// 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 => {
|
||
let _all = []
|
||
_all.push({
|
||
name: '全部', id: ''
|
||
})
|
||
_all = _all.concat(res.rows)
|
||
this.typeList = _all
|
||
// 给设备子类赋值，默认全部为空
|
||
this.deviceList = [{
|
||
name: '全部', id: ''
|
||
}]
|
||
})
|
||
},
|
||
// 查询设备
|
||
selectDevice(typeId) {
|
||
if (typeId === '') {
|
||
// 全部的情况
|
||
this.deviceList = [{
|
||
name: '全部', id: ''
|
||
}]
|
||
this.queryParam.deviceId = ''
|
||
} else {
|
||
// ajax获取
|
||
getRepairDeviceList({ 'typeId': typeId }).then(res => {
|
||
let _all = []
|
||
_all.push({
|
||
name: '全部', id: ''
|
||
})
|
||
_all = _all.concat(res.rows)
|
||
this.deviceList = _all
|
||
this.queryParam.deviceId = ''
|
||
})
|
||
}
|
||
this.queryParam.typeId = typeId
|
||
},
|
||
getDeviceName(deviceId) {
|
||
this.queryParam.deviceId = deviceId
|
||
},
|
||
delByIds(ids) {
|
||
const _this = this
|
||
this.$confirm({
|
||
title: '警告',
|
||
content: '确认要删除工单吗?',
|
||
okText: '是',
|
||
okType: 'warning',
|
||
cancelText: '否',
|
||
onOk() {
|
||
delRepair({ id: ids }).then(res => {
|
||
if (res.code === 0) {
|
||
message.success('删除成功')
|
||
_this.handleOk()
|
||
// _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(status) {
|
||
status = status || false
|
||
this.$refs.table.refresh(status)
|
||
// 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>
|