322 lines
8.1 KiB
Vue
322 lines
8.1 KiB
Vue
<!--
|
|
* @Author: gtz
|
|
* @Date: 2021-03-20 14:02:38
|
|
* @LastEditors: gtz
|
|
* @LastEditTime: 2022-06-13 15:01:26
|
|
* @Description: file content
|
|
-->
|
|
<template>
|
|
<div class="app-container">
|
|
<head-form
|
|
:form-config="headFormConfig"
|
|
@headBtnClick="btnClick"
|
|
/>
|
|
<base-table
|
|
:page="listQuery.current"
|
|
:limit="listQuery.size"
|
|
:table-config="tableProps"
|
|
:table-data="list"
|
|
:is-loading="listLoading"
|
|
@clickTopBtn="clickTopBtn"
|
|
>
|
|
<method-btn
|
|
slot="handleBtn"
|
|
:width="trueWidth"
|
|
:method-list="tableBtn"
|
|
@clickBtn="handleClick"
|
|
/>
|
|
</base-table>
|
|
<pagination
|
|
v-show="total > 0"
|
|
:total="total"
|
|
:page.sync="listQuery.current"
|
|
:limit.sync="listQuery.size"
|
|
@pagination="getList()"
|
|
/>
|
|
<Alarm-Update
|
|
v-if="addOrUpdateVisible"
|
|
ref="addOrUpdate"
|
|
:worker-list="workerList"
|
|
@refreshDataList="getList"
|
|
/>
|
|
<Alarm-Detail
|
|
v-if="showDetail"
|
|
ref="detailShow"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue'
|
|
import { list, getWorkerList } from '@/api/factory-manage/abnormalAlarm'
|
|
import AlarmUpdate from './components/Alarm-update.vue'
|
|
import AlarmDetail from './components/Alarm-detail.vue'
|
|
import HeadForm from '@/components/basicData/HeadForm'
|
|
import BaseTable from '@/components/BaseTable'
|
|
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
|
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
|
import { timeFormatter } from '@/filters'
|
|
import i18n from '@/lang'
|
|
import factory from '@/filters/factory'
|
|
// import data from '../pdf/content'
|
|
|
|
/**
|
|
* 表格表头配置项 TypeScript接口注释
|
|
* tableConfig<ConfigItem> = []
|
|
*
|
|
* Interface ConfigItem = {
|
|
* prop: string,
|
|
* label: string,
|
|
* width: string,
|
|
* align: string,
|
|
* subcomponent: function,
|
|
* filter: function
|
|
* }
|
|
*
|
|
*
|
|
*/
|
|
const tableBtn = [
|
|
{
|
|
type: 'detail',
|
|
btnName: 'btn.detail'
|
|
},
|
|
{
|
|
type: 'edit',
|
|
btnName: 'btn.alarmHandle',
|
|
showParam: {
|
|
type: '&',
|
|
data: [
|
|
{
|
|
name: 'status',
|
|
type: 'unequal',
|
|
value: 3
|
|
}
|
|
]
|
|
}
|
|
}
|
|
]
|
|
const tableProps = [
|
|
{
|
|
prop: 'createTime',
|
|
label: i18n.t('module.factory.abnormalAlarm.alarmTime'),
|
|
filter: timeFormatter
|
|
},
|
|
{
|
|
prop: 'alarmType',
|
|
label: i18n.t('module.factory.abnormalAlarm.alarmType')
|
|
},
|
|
{
|
|
prop: 'alarmGrade',
|
|
label: i18n.t('module.factory.abnormalAlarm.alarmLevel')
|
|
},
|
|
{
|
|
prop: 'alarmContent',
|
|
label: i18n.t('module.factory.abnormalAlarm.alarmReason')
|
|
},
|
|
// {
|
|
// prop: 'alarmNotify',
|
|
// label: i18n.t('module.factory.abnormalAlarm.messagePushMode'),
|
|
// align: 'center',
|
|
// filter: factory('alarmNotify')
|
|
// },
|
|
// {
|
|
// prop: 'team',
|
|
// label: i18n.t('module.factory.abnormalAlarm.team'),
|
|
// align: 'center'
|
|
// },
|
|
{
|
|
prop: 'status',
|
|
label: i18n.t('module.factory.abnormalAlarm.status'),
|
|
filter: factory('alarmStatus')
|
|
}
|
|
// {
|
|
// prop: 'detail',
|
|
// label: i18n.t('module.factory.abnormalAlarm.detail'),
|
|
// align: 'center',
|
|
// subcomponent: AlarmDetail,
|
|
// workerList: []
|
|
// }
|
|
]
|
|
|
|
export default {
|
|
name: 'Factory',
|
|
components: { Pagination, BaseTable, MethodBtn, HeadForm, AlarmUpdate, AlarmDetail },
|
|
filters: {
|
|
statusFilter(status) {
|
|
const statusMap = {
|
|
published: 'success',
|
|
draft: 'info',
|
|
deleted: 'danger'
|
|
}
|
|
return statusMap[status]
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
addOrUpdateVisible: false,
|
|
showDetail: false,
|
|
tableBtn,
|
|
trueWidth: 80,
|
|
tableProps,
|
|
list: [],
|
|
// 初始化报警级别
|
|
alarmOption: [],
|
|
total: 0,
|
|
listLoading: true,
|
|
listQuery: {
|
|
current: 1,
|
|
size: 20,
|
|
status: '',
|
|
alarmType: '',
|
|
startTime: '',
|
|
endTime: '',
|
|
id: ''
|
|
},
|
|
workerList: {},
|
|
headFormConfig: [
|
|
{
|
|
type: 'input',
|
|
label: i18n.t('module.factory.abnormalAlarm.alarmType'),
|
|
placeholder: this.$t('module.factory.abnormalAlarm.alarmType'),
|
|
param: 'alarmType'
|
|
},
|
|
{
|
|
type: 'datePicker',
|
|
label: this.$t('module.factory.abnormalAlarm.timeQuantum'),
|
|
dateType: 'daterange',
|
|
rangeSeparator: '-',
|
|
startPlaceholder: this.$t('module.orderManage.order.StartTime'),
|
|
endPlaceholder: this.$t('module.orderManage.order.EndTime'),
|
|
param: 'timeSlot'
|
|
},
|
|
// {
|
|
// type: 'select',
|
|
// label: this.$t('module.factory.abnormalAlarm.alarmLevel'),
|
|
// selectOptions: [],
|
|
// param: 'alarmGrade',
|
|
// defaultSelect: ''
|
|
// },
|
|
{
|
|
type: 'select',
|
|
label: this.$t('module.factory.abnormalAlarm.status'),
|
|
selectOptions: [
|
|
{
|
|
id: 3,
|
|
name: this.$t('module.factory.abnormalAlarm.processingComplete')
|
|
},
|
|
{ id: 2, name: this.$t('module.factory.abnormalAlarm.inHand') },
|
|
{
|
|
id: 1,
|
|
name: this.$t('module.factory.abnormalAlarm.waitingProcess')
|
|
}
|
|
],
|
|
param: 'status',
|
|
defaultSelect: ''
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: 'btn.search',
|
|
name: 'search',
|
|
color: 'primary'
|
|
}
|
|
],
|
|
headFormValue: {}
|
|
}
|
|
},
|
|
created() {
|
|
this.getWorker()
|
|
},
|
|
methods: {
|
|
handleClick(raw) {
|
|
if (raw.type === 'edit') {
|
|
this.addNew(raw.data.id)
|
|
} else if (raw.type === 'detail') {
|
|
this.showDetail = true
|
|
this.$nextTick(() => {
|
|
this.$refs.detailShow.emitClick(raw.data.id)
|
|
})
|
|
}
|
|
},
|
|
getList() {
|
|
this.listLoading = true
|
|
this.listQuery.alarmType = this.headFormValue.alarmType
|
|
this.listQuery.alarmGrade = this.headFormValue.alarmGrade
|
|
this.listQuery.status = this.headFormValue.status
|
|
if (this.headFormValue.timeSlot && this.headFormValue.timeSlot.length) {
|
|
this.listQuery.startTime = this.headFormValue.timeSlot[0]
|
|
this.listQuery.endTime = this.headFormValue.timeSlot[1]
|
|
} else {
|
|
this.listQuery.startTime = ''
|
|
this.listQuery.endTime = ''
|
|
}
|
|
list(this.listQuery).then((response) => {
|
|
if (response.data.records) {
|
|
this.list = response.data.records
|
|
// 显示查询参数
|
|
console.log(this.listQuery)
|
|
} else {
|
|
this.list.splice(0, this.list.length)
|
|
}
|
|
|
|
// 将JSON中的某一条属性取出来
|
|
// this.list.map(o=>{return{alarmGrade:o.alarmGrade}})
|
|
// this.list.map(o=>{return[o.alarmGrade]})
|
|
// this.list.map(o=>{return[o.alarmGrade].toString()})
|
|
// console.log(o)
|
|
|
|
// 采用map方法也可以提取json变为数组格式
|
|
// this.headFormConfig[2].selectOptions = this.list.map(function(val) {
|
|
// return {
|
|
// name: val.alarmGrade,
|
|
// id: val.alarmGrade
|
|
// }
|
|
// })
|
|
this.total = response.data.total
|
|
this.listLoading = false
|
|
})
|
|
},
|
|
// 获取员工列表
|
|
getWorker() {
|
|
getWorkerList({
|
|
current: 1,
|
|
size: 999
|
|
}).then((res) => {
|
|
if (res.code === 0) {
|
|
this.workerList = res.data.records
|
|
const workerObj = {}
|
|
res.data.records.forEach((item) => {
|
|
workerObj[item.id] = item.name
|
|
})
|
|
console.log('')
|
|
Vue.set(
|
|
this.tableProps[this.tableProps.length - 1],
|
|
'workerList',
|
|
workerObj
|
|
)
|
|
this.getList()
|
|
}
|
|
})
|
|
},
|
|
// 新增 / 修改
|
|
addNew(id) {
|
|
this.addOrUpdateVisible = true
|
|
this.$nextTick(() => {
|
|
this.$refs.addOrUpdate.init(id)
|
|
})
|
|
},
|
|
btnClick(val) {
|
|
this.headFormValue = val
|
|
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
|
if (this.headFormValue.btnName === 'search') {
|
|
this.getList()
|
|
}
|
|
},
|
|
clickTopBtn(val) {
|
|
if (val === 'add') {
|
|
this.addNew()// 新增
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|