初次提交
This commit is contained in:
582
src/views/operational-inspection/activiti-definition/index.vue
Normal file
582
src/views/operational-inspection/activiti-definition/index.vue
Normal file
@ -0,0 +1,582 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
v-show="showSearch"
|
||||
id="searchForm"
|
||||
:model="queryParams"
|
||||
>
|
||||
<el-row :gutter="5" class="search-row">
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
||||
<el-form-item :label="$t('opeartion.processKey') + '：'" label-width="120px" prop="key">
|
||||
<el-input
|
||||
v-model="queryParams.key"
|
||||
:placeholder="$t('opeartion.pleaseInput')"
|
||||
clearable
|
||||
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
||||
<el-form-item :label="$t('opeartion.status') + '：'" label-width="90px" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
:placeholder="$t('opeartion.pleaseInput')"
|
||||
clearable
|
||||
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
|
||||
<el-button
|
||||
icon="el-icon-search"
|
||||
type="primary"
|
||||
@click="handleQuery"
|
||||
>{{ $t('opeartion.query') }}</el-button>
|
||||
<el-button
|
||||
icon="el-icon-refresh"
|
||||
type="primary"
|
||||
@click="resetQuery"
|
||||
>{{ $t('opeartion.reset') }}</el-button>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" style="text-align:right;">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="OnlineDrawingProcess"
|
||||
>{{ $t('opeartion.onlineProcess') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="handleImport"
|
||||
>{{ $t('opeartion.deployProcess') }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
|
||||
</el-row></el-form>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="Modeler"
|
||||
:height="$setAutoTableHeight(46,searchHeight)"
|
||||
>
|
||||
<el-table-column :label="$t('opeartion.processId')" align="center" prop="id" />
|
||||
<el-table-column :label="$t('opeartion.processKey')" align="center" prop="key" />
|
||||
<el-table-column :label="$t('opeartion.processName')" align="center" prop="name" />
|
||||
<el-table-column :label="$t('opeartion.version')" align="center" prop="version" />
|
||||
<el-table-column :label="$t('opeartion.deployTime')" align="center" prop="deploymentTime" />
|
||||
<el-table-column :label="$t('opeartion.deployId')" align="center" prop="deploymentId" />
|
||||
|
||||
<el-table-column :label="$t('opeartion.status')" align="center" prop="suspendState">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.status === 1 ? $t('opeartion.suspend') : $t('opeartion.active') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('opeartion.operate')" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="OnlineModificationProcess(scope.row)"
|
||||
>{{ $t('opeartion.view') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="suspendOrActiveApply(scope.row)"
|
||||
>{{ scope.row.suspendState === 1 ? $t('opeartion.suspend') : $t('opeartion.active') }}
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>{{ $t('opeartion.delete') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<Pagingbar>
|
||||
<div slot="page">
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</Pagingbar>
|
||||
<!--bpmnjs在线流程设计器-->
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
class="dialog-add"
|
||||
:visible.sync="modelVisible"
|
||||
:title="$t('opeartion.flowChart')"
|
||||
width="1680px"
|
||||
@close="modelCancel"
|
||||
>
|
||||
<el-form v-if="operateTemp === 1" ref="form" label-width="120px">
|
||||
<el-form-item :label="$t('opeartion.selectTem')">
|
||||
<el-select v-model="tempId" @change="selectTemp">
|
||||
<el-option
|
||||
v-for="item in tempList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="position: relative; height: 100%">
|
||||
<iframe
|
||||
id="iframe"
|
||||
ref="mainIframe"
|
||||
:src="modelerUrl"
|
||||
frameborder="0"
|
||||
width="100%"
|
||||
height="720px"
|
||||
scrolling="auto"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
class="dialog-export"
|
||||
:title="upload.title"
|
||||
:visible.sync="upload.open"
|
||||
width="400px"
|
||||
>
|
||||
<el-upload
|
||||
ref="upload"
|
||||
:limit="1"
|
||||
accept=".bpmn, .bar, .zip"
|
||||
:headers="upload.headers"
|
||||
:action="upload.url"
|
||||
:disabled="upload.isUploading"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:auto-upload="false"
|
||||
drag
|
||||
>
|
||||
<i class="el-icon-upload" />
|
||||
<div class="el-upload__text">
|
||||
{{ $t('opeartion.tzwj') }}
|
||||
<em>{{ $t('opeartion.clickUpload') }}</em>
|
||||
</div>
|
||||
<div slot="tip" class="el-upload__tip" style="color: red">
|
||||
{{ $t('opeartion.uploadTip') }}
|
||||
</div>
|
||||
</el-upload>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">{{ $t('opeartion.sure') }}</el-button>
|
||||
<el-button @click="upload.open = false">{{ $t('opeartion.cancel') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
:title="$t('opeartion.addTem')"
|
||||
:visible.sync="addDialogShow"
|
||||
center
|
||||
width="40%"
|
||||
>
|
||||
<el-form
|
||||
ref="addTempForm"
|
||||
:model="addFormInfo"
|
||||
label-width="80px"
|
||||
:rules="formRules"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('opeartion.name')" prop="name">
|
||||
<el-input v-model="addFormInfo.name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('opeartion.type')" prop="type">
|
||||
<el-select
|
||||
v-model="addFormInfo.type"
|
||||
:placeholder="$t('opeartion.pleaseSelect')"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('opeartion.status')" prop="status">
|
||||
<el-radio-group v-model="addFormInfo.status">
|
||||
<el-radio :label="1">{{ $t('opeartion.on') }}</el-radio>
|
||||
<el-radio :label="0">{{ $t('opeartion.off') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('opeartion.remark')" prop="remark">
|
||||
<el-input v-model="addFormInfo.remark" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancelAddTemp">{{ $t('opeartion.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="submitAddTemp">{{ $t('opeartion.sure') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
GetProcessManagement,
|
||||
DeleteProcessManagement,
|
||||
EditProcessManagement
|
||||
} from '@/api/activiti/definition'
|
||||
import { AddProcessTemplate, GetProcessTemplateList } from '@/api/activiti/temp'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import Pagingbar from '@/components/Pagingbar'
|
||||
import { pageSize, pageSizes } from '@/config'
|
||||
|
||||
export default {
|
||||
name: 'ActIdGroup',
|
||||
components: { Pagingbar },
|
||||
data() {
|
||||
return {
|
||||
modelerUrl: '',
|
||||
modelVisible: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 当前页码
|
||||
currentPage: 1,
|
||||
// 数据总条目
|
||||
total: 0,
|
||||
// 每页显示多少条数据
|
||||
pageSize: pageSize,
|
||||
pageSizes: pageSizes,
|
||||
// VIEW表格数据
|
||||
Modeler: [],
|
||||
// 弹出层标题
|
||||
title: '',
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
src: '',
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
key: null,
|
||||
name: null
|
||||
},
|
||||
upload: {
|
||||
// 是否显示弹出层（用户导入）
|
||||
open: false,
|
||||
// 弹出层标题（用户导入）
|
||||
title: '',
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 设置上传的请求头部
|
||||
headers: {
|
||||
authorization: getToken(),
|
||||
lang: sessionStorage.getItem('language') === 'en' ? 'en_US' : 'zh_CN'
|
||||
},
|
||||
// 上传的地址
|
||||
url:
|
||||
process.env.VUE_APP_BASE_API +
|
||||
'/flow/processDefinition/uploadStreamAndDeployment'
|
||||
},
|
||||
addDialogShow: false,
|
||||
addFormInfo: {
|
||||
name: undefined,
|
||||
type: undefined,
|
||||
status: 1,
|
||||
remark: undefined
|
||||
},
|
||||
formRules: {
|
||||
name: [{ required: true, message: this.$t('opeartion.pleaseInput'), trigger: 'blur' }],
|
||||
type: [
|
||||
{ required: true, message: this.$t('opeartion.pleaseSelect'), trigger: 'change' }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: this.$t('opeartion.pleaseSelect'), trigger: 'change' }
|
||||
]
|
||||
},
|
||||
xml: undefined,
|
||||
tempId: undefined,
|
||||
tempList: [{ value: 1, label: '1' }, { value: 2, label: '1' }],
|
||||
operateTemp: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
typeList() {
|
||||
return this.$store.getters.dicts['processType'] || []
|
||||
},
|
||||
searchHeight() {
|
||||
return this.$store.getters.searchHeight
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.getProcessTemplateList()
|
||||
this.$nextTick(() => {
|
||||
window.addEventListener('message', (messageEvent) => {
|
||||
const data = messageEvent.data
|
||||
if (data?.data?.type === 'saveToTemp') {
|
||||
// 保存为模板
|
||||
this.xml = data.data.stringBPMN
|
||||
this.addTemp()
|
||||
} else if (data?.data?.type === 'saveBpmn') {
|
||||
// 保存数据 创建流程
|
||||
this.$message.success(this.$t('opeartion.deploySuccess'))
|
||||
this.modelVisible = false
|
||||
this.currentPage = 1
|
||||
this.modelCancel()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/** 查询Definition列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
pageNum: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
key: this.queryParams.key,
|
||||
name: this.queryParams.name
|
||||
}
|
||||
GetProcessManagement(params).then((response) => {
|
||||
this.Modeler = response.data.list
|
||||
this.total = response.data.totalRows
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 获取下拉模板列表
|
||||
getProcessTemplateList() {
|
||||
GetProcessTemplateList().then(res => {
|
||||
this.tempList = res.data
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.currentPage = 1
|
||||
this.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 页码选择
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.getList()
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.currentPage = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
key: null,
|
||||
name: null
|
||||
}
|
||||
this.handleQuery()
|
||||
},
|
||||
suspendOrActiveApply(row) {
|
||||
var suspendOrActive = row.suspendState === 1 ? this.$t('opeartion.active') : this.$t('opeartion.suspend')
|
||||
this.$confirm(this.$t('opeartion.isSure') + suspendOrActive + this.$t('opeartion.processDefinition'), this.$t('opeartion.alarm'), {
|
||||
confirmButtonText: this.$t('opeartion.sure'),
|
||||
cancelButtonText: this.$t('opeartion.cancel'),
|
||||
type: 'warning'
|
||||
})
|
||||
.then(function() {
|
||||
var data = {
|
||||
id: row.id,
|
||||
deploymentId: row.deploymentId,
|
||||
suspendState: row.suspendState === 1 ? 2 : 1
|
||||
}
|
||||
return EditProcessManagement(data)
|
||||
})
|
||||
.then(() => {
|
||||
this.getList()
|
||||
this.$message.success(this.$t('opeartion.conversionSuccess'))
|
||||
})
|
||||
.catch(function() {})
|
||||
},
|
||||
|
||||
handleImport() {
|
||||
this.upload.title = this.$t('opeartion.uploadModel')
|
||||
this.upload.open = true
|
||||
},
|
||||
OnlineDrawingProcess() {
|
||||
this.operateTemp = 1
|
||||
this.modelVisible = true
|
||||
localStorage.setItem('VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
|
||||
this.modelerUrl = '/bpmnjs/index.html?type=addBpmn'
|
||||
},
|
||||
OnlineModificationProcess(data) {
|
||||
this.operateTemp = 2
|
||||
this.modelVisible = true
|
||||
localStorage.setItem('VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
|
||||
this.modelerUrl =
|
||||
'/bpmnjs/index.html?type=lookBpmn&deploymentFileUUID=' +
|
||||
data.deploymentId +
|
||||
'&deploymentName=' +
|
||||
encodeURI(data.resourceName)
|
||||
console.log(123)
|
||||
},
|
||||
// 选择模板
|
||||
selectTemp() {
|
||||
// 使用ref 获取 dom
|
||||
const mapFrame = this.$refs['mainIframe']
|
||||
this.modelerUrl = '/bpmnjs/index.html?type=addBpmn&tempId=' + this.tempId
|
||||
mapFrame.contentWindow.location.reload()
|
||||
if (mapFrame.attachEvent) {
|
||||
// 兼容浏览器判断 // iframe的加载完成函数
|
||||
mapFrame.attachEvent('onload', () => {
|
||||
const iframeWin = mapFrame.contentWindow
|
||||
// 传递参数
|
||||
const params = {
|
||||
tempId: this.tempId,
|
||||
type: 'selectTemp'
|
||||
}
|
||||
iframeWin.postMessage(params, '*')
|
||||
})
|
||||
} else {
|
||||
// iframe的加载完成函数
|
||||
mapFrame.onload = () => {
|
||||
const iframeWin = mapFrame.contentWindow
|
||||
// 传递参数
|
||||
const params = {
|
||||
tempId: this.tempId,
|
||||
type: 'selectTemp'
|
||||
}
|
||||
iframeWin.postMessage(params, '*')
|
||||
}
|
||||
}
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFileForm() {
|
||||
this.$refs.upload.submit()
|
||||
},
|
||||
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
this.upload.open = false
|
||||
this.upload.isUploading = false
|
||||
this.$refs.upload.clearFiles()
|
||||
this.$alert(response.msg, this.$t('opeartion.exportResult'), { dangerouslyUseHTMLString: true })
|
||||
this.getList()
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$confirm(this.$t('opeartion.isDelete') + row.key + this.$t('opeartion.dataItem'), this.$t('opeartion.alarm'), {
|
||||
confirmButtonText: this.$t('opeartion.sure'),
|
||||
cancelButtonText: this.$t('opeartion.cancel'),
|
||||
type: 'warning'
|
||||
})
|
||||
.then(function() {
|
||||
return DeleteProcessManagement({ deploymentId: row.deploymentId })
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success(this.$t('opeartion.deleteSuccess'))
|
||||
this.currentPage = 1
|
||||
this.getList()
|
||||
})
|
||||
.catch(function() {})
|
||||
},
|
||||
modelCancel() {
|
||||
this.modelerUrl = ''
|
||||
this.tempId = undefined
|
||||
this.getList()
|
||||
},
|
||||
// 新增模板
|
||||
addTemp() {
|
||||
this.addFormInfo = {
|
||||
name: undefined,
|
||||
type: undefined,
|
||||
status: 1,
|
||||
remark: undefined,
|
||||
processBpmn: this.xml
|
||||
}
|
||||
|
||||
this.addDialogShow = true
|
||||
},
|
||||
// 取消新增
|
||||
cancelAddTemp() {
|
||||
this.addDialogShow = false
|
||||
this.addFormInfo = {
|
||||
name: undefined,
|
||||
type: undefined,
|
||||
status: 1,
|
||||
|
||||
remark: undefined
|
||||
}
|
||||
},
|
||||
submitAddTemp() {
|
||||
this.$refs.addTempForm.validate((valid) => {
|
||||
if (valid) {
|
||||
AddProcessTemplate(this.addFormInfo).then(() => {
|
||||
this.$message.success(this.$t('opeartion.saveTemSuccess'))
|
||||
this.cancelAddTemp()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app-container{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background:var(--table-bg);
|
||||
padding: 10px;
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
}
|
||||
.search-row{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
::v-deep .el-dialog{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin:0 !important;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
max-height:calc(100% - 30px);
|
||||
max-width:calc(100% - 30px);
|
||||
}
|
||||
::v-deep .el-dialog .el-dialog__body{
|
||||
flex:1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
404
src/views/operational-inspection/activiti-temp/index.vue
Normal file
404
src/views/operational-inspection/activiti-temp/index.vue
Normal file
@ -0,0 +1,404 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form
|
||||
v-show="showSearch"
|
||||
ref="queryForm"
|
||||
:model="queryParams"
|
||||
:inline="true"
|
||||
label-width="88px"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="7">
|
||||
<el-form-item label="模板名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入流程模板名称"
|
||||
clearable
|
||||
size="small"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="queryParams.type" placeholder="请选择类型">
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button>
|
||||
<el-button
|
||||
icon="el-icon-refresh"
|
||||
type="primary"
|
||||
@click="resetQuery"
|
||||
>重置</el-button>
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
type="primary"
|
||||
@click="addTemp"
|
||||
>新增</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="Modeler"
|
||||
:height="$setTableHeight(120)"
|
||||
>
|
||||
<el-table-column label="模板名称" align="center" prop="name" />
|
||||
<el-table-column label="类型" align="center" prop="typeName" />
|
||||
<el-table-column label="状态" align="center" prop="status">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.status === 1 ? "启用" : "禁用" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="editTemp(scope.row)"
|
||||
>编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="designTemp(scope.row)"
|
||||
>设计流程
|
||||
</el-button>
|
||||
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<Pagingbar>
|
||||
<div slot="page">
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</Pagingbar>
|
||||
<!--bpmnjs在线流程设计器-->
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
class="dialog-add"
|
||||
:visible.sync="modelVisible"
|
||||
title="流程图"
|
||||
width="1680px"
|
||||
@close="modelCancel"
|
||||
>
|
||||
<div style="position: relative; height: 100%">
|
||||
<iframe
|
||||
id="iframe"
|
||||
:src="modelerUrl"
|
||||
frameborder="0"
|
||||
width="100%"
|
||||
height="720px"
|
||||
scrolling="auto"
|
||||
/>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
:append-to-body="true"
|
||||
:title="operateType === 1 ? '新增模板' : '编辑模板'"
|
||||
:visible.sync="addDialogShow"
|
||||
center
|
||||
width="40%"
|
||||
>
|
||||
<el-form
|
||||
ref="addTempForm"
|
||||
:model="addFormInfo"
|
||||
label-width="80px"
|
||||
:rules="formRules"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="addFormInfo.name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="addFormInfo.type" placeholder="请选择类型">
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="addFormInfo.status">
|
||||
<el-radio :label="1">启用</el-radio>
|
||||
<el-radio :label="0">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="addFormInfo.remark" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="cancelAddTemp">取 消</el-button>
|
||||
<el-button type="primary" @click="submitAddTemp">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
GetProcessTemplate,
|
||||
AddProcessTemplate,
|
||||
GetTemplate,
|
||||
EditProcessTemplate,
|
||||
DeleteProcessTemplate
|
||||
} from '@/api/activiti/temp'
|
||||
import Pagingbar from '@/components/Pagingbar'
|
||||
import { pageSize, pageSizes } from '@/config'
|
||||
|
||||
export default {
|
||||
name: 'ActIdGroup',
|
||||
components: { Pagingbar },
|
||||
data() {
|
||||
return {
|
||||
modelerUrl: '',
|
||||
modelVisible: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 当前页码
|
||||
currentPage: 1,
|
||||
// 数据总条目
|
||||
total: 0,
|
||||
// 每页显示多少条数据
|
||||
pageSize: pageSize,
|
||||
pageSizes: pageSizes,
|
||||
// VIEW表格数据
|
||||
Modeler: [],
|
||||
// 弹出层标题
|
||||
title: '',
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
src: '',
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
name: undefined,
|
||||
type: undefined
|
||||
},
|
||||
operateType: 1, // 1新增 2 编辑
|
||||
addDialogShow: false,
|
||||
addFormInfo: {
|
||||
name: undefined,
|
||||
type: undefined,
|
||||
status: 1,
|
||||
remark: undefined
|
||||
},
|
||||
formRules: {
|
||||
name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
|
||||
type: [
|
||||
{ required: true, message: '请选择模板类型', trigger: 'change' }
|
||||
],
|
||||
status: [
|
||||
{ required: true, message: '请选择模板状态', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
typeList() {
|
||||
return this.$store.getters.dicts['processType'] || []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList()
|
||||
this.$nextTick(() => {
|
||||
window.addEventListener('message', (messageEvent) => {
|
||||
const data = messageEvent.data
|
||||
if (data?.data?.type === 'saveBpmnTemp') {
|
||||
// 保存数据 创建流程
|
||||
this.$message.success('保存成功')
|
||||
this.modelVisible = false
|
||||
this.currentPage = 1
|
||||
this.modelCancel()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
/** 查询Definition列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
const params = {
|
||||
pageNum: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
name: this.queryParams.name,
|
||||
type: this.queryParams.type
|
||||
}
|
||||
|
||||
GetProcessTemplate(params).then((response) => {
|
||||
this.Modeler = response.data.list
|
||||
this.total = response.data.totalRows
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.currentPage = 1
|
||||
this.pageSize = val
|
||||
this.getList()
|
||||
},
|
||||
// 页码选择
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.getList()
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.currentPage = 1
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.queryParams = {
|
||||
name: undefined,
|
||||
type: undefined
|
||||
}
|
||||
this.handleQuery()
|
||||
},
|
||||
// 新增模板
|
||||
addTemp() {
|
||||
this.addFormInfo = {
|
||||
name: undefined,
|
||||
type: undefined,
|
||||
status: 1,
|
||||
remark: undefined
|
||||
}
|
||||
this.operateType = 1 // 新增
|
||||
|
||||
this.addDialogShow = true
|
||||
},
|
||||
// 编辑模板
|
||||
editTemp(row) {
|
||||
GetTemplate(row.id).then((res) => {
|
||||
this.addFormInfo = res.data
|
||||
this.addDialogShow = true
|
||||
this.operateType = 2 // 编辑
|
||||
})
|
||||
},
|
||||
// 取消新增
|
||||
cancelAddTemp() {
|
||||
this.addDialogShow = false
|
||||
this.addFormInfo = {
|
||||
name: undefined,
|
||||
type: undefined,
|
||||
status: 1,
|
||||
remark: undefined
|
||||
}
|
||||
},
|
||||
submitAddTemp() {
|
||||
this.$refs.addTempForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.operateType === 1) {
|
||||
AddProcessTemplate(this.addFormInfo).then(() => {
|
||||
this.$message.success('新增成功')
|
||||
this.getList()
|
||||
this.cancelAddTemp()
|
||||
})
|
||||
} else {
|
||||
EditProcessTemplate(this.addFormInfo).then(() => {
|
||||
this.$message.success('编辑成功')
|
||||
this.getList()
|
||||
this.cancelAddTemp()
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 设计流程
|
||||
designTemp(row) {
|
||||
this.modelVisible = true
|
||||
localStorage.setItem('VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
|
||||
this.modelerUrl = '/bpmnjs/index.html?type=designBpmn&tempId=' + row.id
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$confirm('是否确认删除编号此流程模板', '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(function() {
|
||||
return DeleteProcessTemplate({ id: row.id })
|
||||
})
|
||||
.then(() => {
|
||||
this.$message.success('删除成功')
|
||||
this.currentPage = 1
|
||||
this.getList()
|
||||
})
|
||||
.catch(function() {})
|
||||
},
|
||||
modelCancel() {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// ::v-deep .dialog-add {
|
||||
// .el-dialog {
|
||||
// // border:0px;
|
||||
// box-shadow: inset 0px 2px 2px 0px rgba(5, 5, 5, 0.4);
|
||||
// background: #fff !important;
|
||||
// margin-top: 20px !important;
|
||||
// }
|
||||
// .el-dialog__header {
|
||||
// border-bottom: 0px;
|
||||
// .el-dialog__title {
|
||||
// color: #000 !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
576
src/views/operational-inspection/add-task/detail.vue
Normal file
576
src/views/operational-inspection/add-task/detail.vue
Normal file
@ -0,0 +1,576 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="detail">
|
||||
<div class="detail-top">
|
||||
<div class="flow-bar-wrap">
|
||||
<FlowToolBar
|
||||
:flow-data="flowData"
|
||||
:is-btn-disabled="isBtnDisabled"
|
||||
:is-btn-show="isBtnShow"
|
||||
:process-url="processUrl"
|
||||
@accept="accept"
|
||||
@acceptcomplete="acceptcomplete"
|
||||
@flowto="flowto"
|
||||
@flowtocomplete="flowtocomplete"
|
||||
@flowabort="flowabort"
|
||||
@flowabortcomplete="flowabortcomplete"
|
||||
@flowback="flowback"
|
||||
@flowbackcomplete="flowbackcomplete"
|
||||
@flowtransmit="flowtransmit"
|
||||
@flowtransmitcomplete="flowtransmitcomplete"
|
||||
>
|
||||
|
||||
<el-button
|
||||
v-if="saveShow"
|
||||
type="primary"
|
||||
icon="el-icon-check"
|
||||
:loading="saveLoading"
|
||||
@click="saveOrder"
|
||||
>{{ $t('task.save') }}</el-button>
|
||||
</FlowToolBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-wrapper">
|
||||
<div class="form">
|
||||
<el-form
|
||||
ref="formModel"
|
||||
:model="formModel"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('task.title')" prop="title">
|
||||
<el-input v-model="formModel.title" placeholder="请输入标题" :readonly="isActive || !isEdit" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('task.orderType')" prop="orderType">
|
||||
<el-select v-model="formModel.orderType" placeholder="请选择" :disabled="isActive || !isEdit">
|
||||
<el-option
|
||||
v-for="item in orderTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('task.orderType')" prop="plannedTime">
|
||||
<el-date-picker
|
||||
v-model="formModel.plannedTime"
|
||||
:disabled="isActive || !isEdit"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="priority" :label="$t('task.priority')">
|
||||
<el-select v-model="formModel.priority" :placeholder="$t('task.pleaseSelect')" :disabled="isActive || !isEdit">
|
||||
<el-option
|
||||
v-for="item in priorityOptions"
|
||||
:key="item.id"
|
||||
:label="item.value"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="stationId" :label="$t('task.station')">
|
||||
<el-select
|
||||
v-model="formModel.stationId"
|
||||
filterable
|
||||
:disabled="isActive || !isEdit"
|
||||
:placeholder="$t('task.pleaseSelect')"
|
||||
@change="selectStation"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in stationOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="+formModel.deviceId !== 0 " :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="deviceId" :label="$t('task.device')">
|
||||
<el-select v-model="formModel.deviceId" filterable :disabled="isActive || !isEdit" placeholder="请选择" @change="selectDevice">
|
||||
<el-option
|
||||
v-for="item in deviceOptions"
|
||||
:key="item.srcId"
|
||||
:label="item.deviceName"
|
||||
:value="item.srcId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="eventId" :label="$t('task.event')">
|
||||
<el-select v-model="formModel.eventId" filterable :disabled="isActive || !isEdit" :placeholder="$t('task.pleaseSelect')">
|
||||
<el-option
|
||||
v-for="item in warningOptions"
|
||||
:key="item.id"
|
||||
:label="item.description"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="remark" :label="$t('task.remark')">
|
||||
<el-input
|
||||
v-model="formModel.remark"
|
||||
:readonly="isActive"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 6 }"
|
||||
:placeholder="$t('task.pleaseInput')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" :offset="0">
|
||||
<el-form-item :label="$t('task.imgTip')">
|
||||
<uploadPanel
|
||||
ref="_upload"
|
||||
:readonly="isActive"
|
||||
:biz-type="uploadData"
|
||||
:biz-code="announcemnetNum"
|
||||
:upload-param="uploadData"
|
||||
:upload-url="uploadUrl"
|
||||
:delete-url="deleteUrl"
|
||||
@uploadSuccess="uploadSuccess"
|
||||
@beforeUpload="beforeUpload"
|
||||
@uploadError="uploadError"
|
||||
@beforeRemove="beforeUpload"
|
||||
@removeSuccess="uploadError"
|
||||
>
|
||||
<div class="upload-icon">
|
||||
<i class="iconfont icon-icon_attachment" />
|
||||
</div>
|
||||
</uploadPanel>
|
||||
<el-dialog
|
||||
:append-to-body="false"
|
||||
:visible.sync="dialogVisible"
|
||||
>
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDevice,
|
||||
warningDropDownList
|
||||
} from '@/api/trouble-shooting-detail'
|
||||
|
||||
import { SaveWorkOrder, GetTaskInfo } from '@/api/activiti/task'
|
||||
import { GetDictListByType } from '@/api/system/dictionary'
|
||||
import FlowToolBar from '@/components/FlowToolBarNew'
|
||||
import uploadPanel from '@/components/WorderOrderUploadPanel/index.vue'
|
||||
export default {
|
||||
components: { FlowToolBar, uploadPanel },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
processUrl: {
|
||||
acceptUrl: '/flow/processFlowNew/claimTask', // 接收
|
||||
flowtoUrl: '/flow/processFlowNew/approval', // 流转
|
||||
nextInfoUrl: '/flow/processFlowNew/preDo', // 获取下一环节流程信息
|
||||
backInfoUrl: '/flow/processFlowNew/fallBackTaskList', // 获取回退环节流程信息
|
||||
flowBackUrl: '/flow/processFlowNew/fallBackTask', // 回退环节流程信息
|
||||
transmitInfoUrl: '/flow/processFlowNew/preForward', // 获取转发环节流程信息
|
||||
flowTransmitUrl: '/flow/processFlowNew/forward', // 获取转发环节流程信息
|
||||
flowAbortUrl: '/flow/processFlowNew/cancel', // 获取转发环节流程信息
|
||||
flowOpinionUrl: '/flow/processFlowNew/detailsTask' // 获取审批意见
|
||||
},
|
||||
isBtnDisabled: {
|
||||
// 按钮禁用
|
||||
acceptDisabled: true,
|
||||
flowToDisabled: true,
|
||||
abortDisabled: true,
|
||||
backDisabled: true,
|
||||
transmitDisabled: true,
|
||||
opinionDisabled: false
|
||||
},
|
||||
isBtnShow: {
|
||||
// 按钮显示
|
||||
acceptShow: false,
|
||||
flowToShow: false,
|
||||
abortShow: false,
|
||||
backShow: false,
|
||||
transmitShow: false,
|
||||
opinionShow: false,
|
||||
userShow: true
|
||||
},
|
||||
formLoading: false,
|
||||
uploadData: 'DELEVERY',
|
||||
announcemnetNum: '',
|
||||
pictureResps: [],
|
||||
dialogVisible: false,
|
||||
dialogImageUrl: '',
|
||||
formModel: {
|
||||
title: '',
|
||||
orderType: '',
|
||||
plannedTime: '',
|
||||
priority: '',
|
||||
stationId: '',
|
||||
deviceId: '',
|
||||
eventId: ''
|
||||
|
||||
},
|
||||
flowData: {
|
||||
bizData: this.formModel,
|
||||
currentNodeName: this.$t('task.add')
|
||||
},
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: this.$t('task.pleaseInput'), trigger: 'blur' }
|
||||
],
|
||||
orderType: [
|
||||
{ required: true, message: this.$t('task.pleaseSelect'), trigger: 'change' }
|
||||
],
|
||||
plannedTime: [
|
||||
{ required: true, message: this.$t('task.pleaseSelect'), trigger: 'change' }
|
||||
],
|
||||
priority: [
|
||||
{ required: true, message: this.$t('task.pleaseSelect'), trigger: 'change' }
|
||||
],
|
||||
remark: [
|
||||
{ required: true, message: this.$t('task.pleaseInput'), trigger: 'blur' }
|
||||
]
|
||||
|
||||
},
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + '/business/outerApi/uploadFile/?bucket=workorder',
|
||||
deleteUrl: process.env.VUE_APP_BASE_API + '/business/outerApi/deleteFile/?bucket=workorder',
|
||||
opreator: 1,
|
||||
saveShow: true, // 1.有保存按钮 2.没有
|
||||
|
||||
saveLoading: false,
|
||||
formIsCanEdit: false, // 表格是否可以编辑
|
||||
props: { label: 'name', value: 'id', emitPath: false },
|
||||
/** 1未办，2已办 */
|
||||
isDone: 1,
|
||||
|
||||
/** 优先级列表 */
|
||||
priorityOptions: [],
|
||||
|
||||
/** 设备列表 */
|
||||
deviceOptions: [],
|
||||
|
||||
/** 报警列表 */
|
||||
warningOptions: [],
|
||||
|
||||
/** 工单类型 */
|
||||
orderTypeOptions: this.$t('task.orderTypeOptions'),
|
||||
isActive: false,
|
||||
newFormModel: {},
|
||||
type: '',
|
||||
isEdit: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/** 电站列表 */
|
||||
stationOptions() {
|
||||
return this.$store.getters.stations || []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const params = {
|
||||
processInstId: this.$route.query.processInstanceId,
|
||||
orderFormId: this.$route.query.orderFormId
|
||||
}
|
||||
if (this.$route.query.type) {
|
||||
this.type = this.$route.query.type
|
||||
}
|
||||
this.GetTaskInfo(params)
|
||||
this.GetPriorityList()
|
||||
},
|
||||
methods: {
|
||||
async GetTaskInfo(params) {
|
||||
const showRes = await GetTaskInfo(params)
|
||||
this.formModel = Object.assign({}, showRes.data.orderForm)
|
||||
this.formModel.processId = params.processInstId
|
||||
this.isEdit = showRes.data.updateTitle
|
||||
console.log(this.isEdit)
|
||||
this.flowData = {
|
||||
title: showRes.data.title,
|
||||
bizData: this.formModel,
|
||||
userShow: showRes.data.user
|
||||
}
|
||||
this.isActive = showRes.data.accept
|
||||
const fileList = []
|
||||
if (this.formModel.orderFiles) {
|
||||
this.formModel.orderFiles.forEach(v => {
|
||||
fileList.push(v)
|
||||
})
|
||||
this.$refs._upload.setFileList(fileList)
|
||||
}
|
||||
if (this.formModel.deviceId) {
|
||||
this.GetDeviceList()
|
||||
this.getWarningList()
|
||||
}
|
||||
|
||||
if (this.type === 'isdone') {
|
||||
this.isActive = true
|
||||
this.saveShow = false
|
||||
this.isBtnShow = {
|
||||
acceptShow: false,
|
||||
flowToShow: false,
|
||||
abortShow: false,
|
||||
backShow: false,
|
||||
transmitShow: false,
|
||||
opinionShow: true
|
||||
}
|
||||
} else {
|
||||
if (showRes.data.accept) {
|
||||
this.saveShow = false
|
||||
this.isBtnShow = {
|
||||
// 按钮显示
|
||||
acceptShow: showRes.data.accept,
|
||||
flowToShow: false,
|
||||
abortShow: false,
|
||||
backShow: false,
|
||||
transmitShow: false,
|
||||
opinionShow: true,
|
||||
userShow: showRes.data.user
|
||||
}
|
||||
} else {
|
||||
this.saveShow = true
|
||||
this.isBtnShow = {
|
||||
// 按钮显示
|
||||
acceptShow: showRes.data.accept,
|
||||
flowToShow: showRes.data.circulation === 1,
|
||||
abortShow: showRes.data.cancel,
|
||||
backShow: showRes.data.back,
|
||||
transmitShow: showRes.data.forward,
|
||||
opinionShow: true,
|
||||
userShow: showRes.data.user
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/** 获取告警列表 */
|
||||
async getWarningList() {
|
||||
const params = []
|
||||
params.push({ stationId: this.formModel.stationId, targetDevice: this.formModel.deviceId })
|
||||
const res = await warningDropDownList(params)
|
||||
this.warningOptions = res.data
|
||||
},
|
||||
/** 获取优先级 */
|
||||
async GetPriorityList() {
|
||||
const params = {
|
||||
type: 'priority'
|
||||
}
|
||||
const res = await GetDictListByType(params)
|
||||
this.priorityOptions = res.data.list
|
||||
},
|
||||
uploadSuccess() {
|
||||
this.formLoading = false
|
||||
},
|
||||
uploadError() {
|
||||
this.formLoading = false
|
||||
},
|
||||
beforeUpload() {
|
||||
this.formLoading = true
|
||||
},
|
||||
/** 选择电站 */
|
||||
selectStation() {
|
||||
this.warningOptions = []
|
||||
this.$set(this.formModel, 'eventId', '')
|
||||
this.$set(this.formModel, 'deviceId', '')
|
||||
// this.formModel.eventId = ''
|
||||
// this.formModel.deviceId = ''
|
||||
this.GetDeviceList()
|
||||
},
|
||||
/** 获取设备列表 */
|
||||
async GetDeviceList() {
|
||||
const res = await getDevice(this.formModel.stationId)
|
||||
this.deviceOptions = res.data
|
||||
},
|
||||
|
||||
/** 选择设备 */
|
||||
selectDevice() {
|
||||
this.warningOptions = []
|
||||
this.$set(this.formModel, 'eventId', '')
|
||||
this.getWarningList()
|
||||
},
|
||||
async saveOrder() {
|
||||
this.saveLoading = true
|
||||
const fileList = []
|
||||
this.$refs._upload.upoladFileList.forEach((el, index) => {
|
||||
fileList.push({ fileName: el.fileName, url: el.url, sort: index })
|
||||
})
|
||||
this.formModel.orderFiles = fileList
|
||||
try {
|
||||
this.$refs.formModel.validate(async(valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
await SaveWorkOrder({
|
||||
orderForm: this.formModel,
|
||||
processInstId: this.formModel.processId,
|
||||
key: 'Process_approve'
|
||||
})
|
||||
this.$notify({
|
||||
title: this.$t('task.sendOrder'),
|
||||
message: this.$t('task.sendOrderSuccess'),
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
// this.formModel.processId = res.data
|
||||
this.GetTaskInfo({ processInstId: this.formModel.processId, orderFormId: this.formModel.orderFormId })
|
||||
this.flowData = {
|
||||
bizData: this.formModel
|
||||
}
|
||||
} catch (error) {
|
||||
// console.log(error)
|
||||
} finally {
|
||||
this.saveLoading = false
|
||||
}
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.saveLoading = false
|
||||
}
|
||||
|
||||
// console.log(this.formModel)
|
||||
},
|
||||
acceptcomplete() {
|
||||
this.GetTaskInfo({
|
||||
processInstId: this.$route.query.processInstanceId,
|
||||
orderFormId: this.$route.query.orderFormId
|
||||
})
|
||||
},
|
||||
flowto() {},
|
||||
flowtocomplete() {
|
||||
// 流转完成
|
||||
this.$router.replace('/operational-inspection/task')
|
||||
},
|
||||
flowabort() {},
|
||||
flowabortcomplete() {
|
||||
// 作废完成
|
||||
this.$router.replace('/operational-inspection/task')
|
||||
},
|
||||
flowback() {},
|
||||
flowbackcomplete() {
|
||||
// 回退完成
|
||||
this.$router.replace('/operational-inspection/task')
|
||||
},
|
||||
// 转发完成
|
||||
flowtransmit() {
|
||||
this.$router.replace('/operational-inspection/task')
|
||||
},
|
||||
// 流转完成
|
||||
flowtransmitcomplete() {
|
||||
this.$router.replace('/operational-inspection/task')
|
||||
},
|
||||
accept() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.detail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.detail-top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
background:var(--table-bg);
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.flow-bar-wrap {
|
||||
width: 1000px;
|
||||
}
|
||||
}
|
||||
.detail-wrapper {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
padding: 10px;
|
||||
background:var(--table-bg);
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
.form {
|
||||
width: 1000px;
|
||||
height: fit-content;
|
||||
|
||||
::v-deep.el-select,
|
||||
.el-date-editor.el-input,
|
||||
.el-date-editor.el-input__inner {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/deep/.el-select-dropdown__item {
|
||||
max-width: 360px !important;
|
||||
}
|
||||
}
|
||||
/deep/.main_title_type {
|
||||
color: rgb(98, 101, 104);
|
||||
}
|
||||
.tags-select-input /deep/ .el-select__tags {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.tags-select-input /deep/ .el-select__tags-text {
|
||||
display: inline-block;
|
||||
max-width: 150px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.tags-select-input /deep/ .el-tag__close.el-icon-close {
|
||||
top: -6px !important;
|
||||
right: -6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 100%;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
background-color: #091a31;
|
||||
color: #fff;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
min-height: 30px;
|
||||
}
|
||||
::v-deep .el-input.is-disabled .el-input__inner{
|
||||
border: 1px solid rgba(255, 255, 255, 0.3)!important;
|
||||
}
|
||||
::v-deep .el-upload--picture-card{
|
||||
background-color:transparent!important;
|
||||
}
|
||||
</style>
|
||||
496
src/views/operational-inspection/add-task/index.vue
Normal file
496
src/views/operational-inspection/add-task/index.vue
Normal file
@ -0,0 +1,496 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="detail">
|
||||
<div class="detail-top">
|
||||
<div class="flow-bar-wrap">
|
||||
<FlowToolBar
|
||||
:circulation-name="circulationName"
|
||||
:flow-data="flowData"
|
||||
:is-btn-disabled="isBtnDisabled"
|
||||
:is-btn-show="isBtnShow"
|
||||
:process-url="processUrl"
|
||||
@accept="accept"
|
||||
@acceptcomplete="acceptcomplete"
|
||||
@flowto="flowto"
|
||||
@flowtocomplete="flowtocomplete"
|
||||
@flowabort="flowabort"
|
||||
@flowabortcomplete="flowabortcomplete"
|
||||
@flowback="flowback"
|
||||
@flowbackcomplete="flowbackcomplete"
|
||||
@flowtransmit="flowtransmit"
|
||||
@flowtransmitcomplete="flowtransmitcomplete"
|
||||
>
|
||||
|
||||
<el-button
|
||||
v-if="editStatus === 1"
|
||||
type="primary"
|
||||
icon="el-icon-check"
|
||||
:loading="saveLoading"
|
||||
@click="saveOrder"
|
||||
>{{ $t('task.save') }}</el-button>
|
||||
</FlowToolBar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-wrapper">
|
||||
<div class="form">
|
||||
<el-form
|
||||
ref="formModel"
|
||||
:model="formModel"
|
||||
:rules="rules"
|
||||
label-width="180px"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('task.title')" prop="title">
|
||||
<el-input v-model="formModel.title" :placeholder="$t('task.pleaseInput')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('task.orderType')" prop="orderType">
|
||||
<el-select v-model="formModel.orderType" :placeholder="$t('task.pleaseSelect')">
|
||||
<el-option
|
||||
v-for="item in orderTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('task.plannedTime')" prop="plannedTime">
|
||||
<el-date-picker
|
||||
v-model="formModel.plannedTime"
|
||||
type="datetime"
|
||||
:placeholder="$t('task.pleaseSelect')"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="priority" :label="$t('task.priority')">
|
||||
<el-select v-model="formModel.priority" :placeholder="$t('task.pleaseSelect')">
|
||||
<el-option
|
||||
v-for="item in priorityOptions"
|
||||
:key="item.id"
|
||||
:label="item.value"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="stationId" :label="$t('task.station')">
|
||||
<el-select
|
||||
v-model="formModel.stationId"
|
||||
filterable
|
||||
:placeholder="$t('task.pleaseSelect')"
|
||||
@change="selectStation"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in stationOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="deviceId" :label="$t('task.device')">
|
||||
<el-select v-model="formModel.deviceId" filterable :placeholder="$t('task.pleaseSelect')" @change="selectDevice">
|
||||
<el-option
|
||||
v-for="item in deviceOptions"
|
||||
:key="item.srcId"
|
||||
:label="item.deviceName"
|
||||
:value="item.srcId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="eventId" :label="$t('task.event')">
|
||||
<el-select v-model="formModel.eventId" filterable :placeholder="$t('task.pleaseSelect')">
|
||||
<el-option
|
||||
v-for="item in warningOptions"
|
||||
:key="item.id"
|
||||
:label="item.description"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item prop="remark" :label="$t('task.remark')">
|
||||
<el-input
|
||||
v-model="formModel.remark"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 4, maxRows: 6 }"
|
||||
:placeholder="$t('task.pleaseInput')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" :offset="0">
|
||||
<el-form-item :label="$t('task.imgTip')">
|
||||
<uploadPanel
|
||||
ref="_upload"
|
||||
:biz-type="uploadData"
|
||||
:biz-code="announcemnetNum"
|
||||
:upload-param="uploadData"
|
||||
:upload-url="uploadUrl"
|
||||
:delete-url="deleteUrl"
|
||||
@uploadSuccess="uploadSuccess"
|
||||
@beforeUpload="beforeUpload"
|
||||
@uploadError="uploadError"
|
||||
@beforeRemove="beforeUpload"
|
||||
@removeSuccess="uploadError"
|
||||
>
|
||||
<div class="upload-icon">
|
||||
<i class="iconfont icon-icon_attachment" />
|
||||
</div>
|
||||
</uploadPanel>
|
||||
<el-dialog
|
||||
:append-to-body="false"
|
||||
:visible.sync="dialogVisible"
|
||||
>
|
||||
<img width="100%" :src="dialogImageUrl" alt="">
|
||||
</el-dialog>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDevice,
|
||||
warningDropDownList
|
||||
} from '@/api/trouble-shooting-detail'
|
||||
|
||||
import { InitProcessInstance } from '@/api/activiti/task'
|
||||
import { GetDictListByType } from '@/api/system/dictionary'
|
||||
import FlowToolBar from '@/components/FlowToolBarNew'
|
||||
import uploadPanel from '@/components/WorderOrderUploadPanel/index.vue'
|
||||
export default {
|
||||
components: { FlowToolBar, uploadPanel },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
processUrl: {
|
||||
acceptUrl: '/flow/processFlow/claimTask', // 接收
|
||||
flowtoUrl: '/flow/processFlowNew/preDo', // 流转
|
||||
nextInfoUrl: '/flow/processFlowNew/preDo', // 获取下一环节流程信息
|
||||
backInfoUrl: '/flow/processFlowNew/fallBackTaskList', // 获取回退环节流程信息
|
||||
flowBackUrl: '/flow/processFlow/rejectTask', // 回退环节流程信息
|
||||
transmitInfoUrl: '/flow/processFlowNew/preDo', // 获取转发环节流程信息
|
||||
flowTransmitUrl: '/api/fina/Costreimbursement/Transmit', // 获取转发环节流程信息
|
||||
flowAbortUrl: '/flow/processFlowNew/approvalFailed', // 获取转发环节流程信息
|
||||
flowOpinionUrl: '/flow/processFlow/circulationTask' // 获取审批意见
|
||||
},
|
||||
isBtnDisabled: {
|
||||
// 按钮禁用
|
||||
acceptDisabled: true,
|
||||
flowToDisabled: true,
|
||||
abortDisabled: true,
|
||||
backDisabled: true,
|
||||
transmitDisabled: true,
|
||||
opinionDisabled: false
|
||||
},
|
||||
isBtnShow: {
|
||||
// 按钮显示
|
||||
acceptShow: false,
|
||||
flowToShow: false,
|
||||
abortShow: false,
|
||||
backShow: false,
|
||||
transmitShow: false,
|
||||
opinionShow: false
|
||||
},
|
||||
formLoading: false,
|
||||
uploadData: 'DELEVERY',
|
||||
announcemnetNum: '',
|
||||
pictureResps: [],
|
||||
dialogVisible: false,
|
||||
dialogImageUrl: '',
|
||||
formModel: {
|
||||
title: '',
|
||||
orderType: '',
|
||||
plannedTime: null,
|
||||
priority: '',
|
||||
stationId: '',
|
||||
deviceId: '',
|
||||
eventId: ''
|
||||
|
||||
},
|
||||
flowData: {
|
||||
bizData: this.formModel,
|
||||
currentNodeName: this.$t('task.add')
|
||||
},
|
||||
rules: {
|
||||
title: [
|
||||
{ required: true, message: this.$t('task.pleaseInput'), trigger: 'blur' }
|
||||
],
|
||||
orderType: [
|
||||
{ required: true, message: this.$t('task.pleaseSelect'), trigger: 'change' }
|
||||
],
|
||||
plannedTime: [
|
||||
{ required: true, message: this.$t('task.pleaseSelect'), trigger: 'change' }
|
||||
],
|
||||
priority: [
|
||||
{ required: true, message: this.$t('task.pleaseSelect'), trigger: 'change' }
|
||||
],
|
||||
remark: [
|
||||
{ required: true, message: this.$t('task.pleaseInput'), trigger: 'blur' }
|
||||
]
|
||||
|
||||
},
|
||||
uploadUrl: process.env.VUE_APP_BASE_API + '/business/outerApi/uploadFile/?bucket=workorder',
|
||||
deleteUrl: process.env.VUE_APP_BASE_API + '/business/outerApi/deleteFile/?bucket=workorder',
|
||||
opreator: 1,
|
||||
editStatus: 1, // 1.有保存按钮 2.没有
|
||||
|
||||
saveLoading: false,
|
||||
formIsCanEdit: false, // 表格是否可以编辑
|
||||
props: { label: 'name', value: 'id', emitPath: false },
|
||||
/** 1未办，2已办 */
|
||||
isDone: 1,
|
||||
|
||||
/** 优先级列表 */
|
||||
priorityOptions: [],
|
||||
|
||||
/** 设备列表 */
|
||||
deviceOptions: [],
|
||||
|
||||
/** 报警列表 */
|
||||
warningOptions: [],
|
||||
|
||||
/** 工单类型 */
|
||||
orderTypeOptions: this.$t('task.orderTypeOptions'),
|
||||
circulationName: this.$t('task.transfer')
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/** 电站列表 */
|
||||
stationOptions() {
|
||||
return this.$store.getters.stations || []
|
||||
},
|
||||
|
||||
currentStation() {
|
||||
return this.$store.getters.currentStation || undefined
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.formModel.stationId = val.id
|
||||
this.GetDeviceList()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.GetPriorityList()
|
||||
},
|
||||
methods: {
|
||||
/** 获取告警列表 */
|
||||
async getWarningList() {
|
||||
const params = []
|
||||
params.push({ stationId: this.formModel.stationId, targetDevice: this.formModel.deviceId })
|
||||
const res = await warningDropDownList(params)
|
||||
this.warningOptions = res.data
|
||||
},
|
||||
/** 获取优先级 */
|
||||
async GetPriorityList() {
|
||||
const params = {
|
||||
type: 'priority'
|
||||
}
|
||||
const res = await GetDictListByType(params)
|
||||
this.priorityOptions = res.data.list
|
||||
},
|
||||
uploadSuccess() {
|
||||
this.formLoading = false
|
||||
},
|
||||
uploadError() {
|
||||
this.formLoading = false
|
||||
},
|
||||
beforeUpload() {
|
||||
this.formLoading = true
|
||||
},
|
||||
/** 选择电站 */
|
||||
selectStation() {
|
||||
this.formModel.eventId = ''
|
||||
this.formModel.deviceId = ''
|
||||
this.GetDeviceList()
|
||||
},
|
||||
/** 获取设备列表 */
|
||||
async GetDeviceList() {
|
||||
const res = await getDevice(this.formModel.stationId)
|
||||
this.deviceOptions = res.data
|
||||
},
|
||||
|
||||
/** 选择设备 */
|
||||
selectDevice() {
|
||||
this.warningOptions = []
|
||||
this.formModel.eventId = ''
|
||||
this.getWarningList()
|
||||
},
|
||||
async saveOrder() {
|
||||
const fileList = []
|
||||
this.$refs._upload.upoladFileList.forEach((el) => {
|
||||
fileList.push({ fileName: el.fileName, url: el.url })
|
||||
})
|
||||
this.formModel.orderFiles = fileList
|
||||
try {
|
||||
this.$refs.formModel.validate(async(valid) => {
|
||||
if (valid) {
|
||||
const res = await InitProcessInstance({
|
||||
orderForm: this.formModel,
|
||||
key: 'Process_approve'
|
||||
})
|
||||
this.$notify({
|
||||
title: this.$t('task.sendOrder'),
|
||||
message: this.$t('task.sendOrderSuccess'),
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.formModel.processId = res.data
|
||||
this.flowData = {
|
||||
bizData: this.formModel
|
||||
}
|
||||
this.$router.push({
|
||||
path: '/operational-inspection/all-task-detail',
|
||||
query: { processInstanceId: res.data }
|
||||
})
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.saveLoading = false
|
||||
}
|
||||
|
||||
// console.log(this.formModel)
|
||||
},
|
||||
acceptcomplete() {},
|
||||
flowto() {},
|
||||
flowtocomplete() {
|
||||
// 流转完成
|
||||
this.$router.replace('/task/all-task')
|
||||
},
|
||||
flowabort() {},
|
||||
flowabortcomplete() {
|
||||
// 作废完成
|
||||
this.$router.replace('/task/all-task')
|
||||
},
|
||||
flowback() {},
|
||||
flowbackcomplete() {
|
||||
// 回退完成
|
||||
this.$router.replace('/task/all-task')
|
||||
},
|
||||
|
||||
flowtransmit() {},
|
||||
flowtransmitcomplete() {},
|
||||
accept() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.detail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.detail-top {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
background:var(--table-bg);
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.flow-bar-wrap {
|
||||
width: 1000px;
|
||||
}
|
||||
}
|
||||
.detail-wrapper {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
padding: 10px;
|
||||
background:var(--table-bg);
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
.form {
|
||||
width: 1000px;
|
||||
height: fit-content;
|
||||
|
||||
::v-deep.el-select,
|
||||
.el-date-editor.el-input,
|
||||
.el-date-editor.el-input__inner {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/deep/.el-select-dropdown__item {
|
||||
max-width: 360px !important;
|
||||
}
|
||||
}
|
||||
/deep/.main_title_type {
|
||||
color: rgb(98, 101, 104);
|
||||
}
|
||||
.tags-select-input /deep/ .el-select__tags {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.tags-select-input /deep/ .el-select__tags-text {
|
||||
display: inline-block;
|
||||
max-width: 150px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.tags-select-input /deep/ .el-tag__close.el-icon-close {
|
||||
top: -6px !important;
|
||||
right: -6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 100%;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 5px;
|
||||
background-color: #091a31;
|
||||
color: #fff;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
min-height: 30px;
|
||||
}
|
||||
::v-deep .el-upload--picture-card{
|
||||
background-color:transparent!important;
|
||||
}
|
||||
</style>
|
||||
402
src/views/operational-inspection/information-entry/index.vue
Normal file
402
src/views/operational-inspection/information-entry/index.vue
Normal file
@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<div class="realtime-wrapper">
|
||||
<el-form id="searchForm" :model="filters">
|
||||
<el-row :gutter="5" class="search-row">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
|
||||
<el-form-item :label="$t('entry.msgName') + '：'" label-width="150px">
|
||||
<el-input
|
||||
v-model="filters.name"
|
||||
class="input-box"
|
||||
maxlength="30"
|
||||
:placeholder="$t('entry.pleaseInput')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
|
||||
<el-form-item :label="$t('entry.timeRage') + '：'" label-width="120px">
|
||||
<el-date-picker
|
||||
v-model="filters.time"
|
||||
style="width: 100%"
|
||||
type="datetimerange"
|
||||
range-separator="~"
|
||||
:start-placeholder="$t('entry.startDate')"
|
||||
:end-placeholder="$t('entry.endDate')"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
:loading="search_loading"
|
||||
@click="on_search"
|
||||
>{{ $t('entry.query') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
class="reset-btn"
|
||||
:loading="reset_loading"
|
||||
@click="on_reset"
|
||||
>{{ $t('entry.reset ') }}</el-button>
|
||||
</el-col>
|
||||
<el-col
|
||||
style="text-align: right"
|
||||
:xs="12"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="6"
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
type="primary"
|
||||
@click="on_add"
|
||||
>{{ $t('entry.add ') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="reset-btn"
|
||||
icon="el-icon-upload2"
|
||||
:loading="export_loading"
|
||||
@click="on_export"
|
||||
>{{ $t('entry.export ') }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="table-wrapper">
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="table_loading"
|
||||
header-align="center"
|
||||
:height="$setAutoTableHeight(46, searchHeight)"
|
||||
:data="table_data"
|
||||
style="width: 100%"
|
||||
border
|
||||
@selection-change="on_selection_change"
|
||||
>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
:label="$t('entry.msgName')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="content"
|
||||
:label="$t('entry.content')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
:label="$t('entry.jlTime')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="createUserName"
|
||||
:label="$t('entry.jlUser')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="messageName" :label="$t('entry.operate')" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-permission="['business:noteAndRepair:updateStationNote']"
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="on_edit(scope.row)"
|
||||
>{{ $t('entry.edit') }}</el-button>
|
||||
<el-button
|
||||
v-permission="['business:noteAndRepair:deleteStationNote']"
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
class="btn-delete-table-text"
|
||||
@click="on_del(scope.row.id)"
|
||||
>{{ $t('entry.delete') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagingbar>
|
||||
<div slot="page">
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@current-change="on_current_change"
|
||||
@size-change="on_size_change"
|
||||
/>
|
||||
</div>
|
||||
</Pagingbar>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:title="dialog_type === 'add' ? $t('entry.xzjl') : $t('entry.bjjl')"
|
||||
:append-to-body="false"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visiable"
|
||||
width="30%"
|
||||
@close="on_colse"
|
||||
>
|
||||
<el-form
|
||||
ref="formModel"
|
||||
:model="formModel"
|
||||
|
||||
label-position="right"
|
||||
:rules="formRules"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('entry.msgName')" prop="title">
|
||||
<el-input
|
||||
v-model="formModel.title"
|
||||
:placeholder="$t('entry.pleaseInput')"
|
||||
maxlength="20"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('entry.msgContent')" prop="content">
|
||||
<el-input
|
||||
v-model="formModel.content"
|
||||
:placeholder="$t('entry.pleaseInput')"
|
||||
maxlength="200"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button @click="on_colse">{{ $t('entry.cancel') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="submit_loading"
|
||||
@click="on_submit"
|
||||
>{{ $t('entry.sure') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
GetInformationList,
|
||||
AddInformation,
|
||||
EditInformation,
|
||||
DelInformation
|
||||
} from '@/api/operational-inspection/information'
|
||||
import { handleNewDownExcel } from '@/utils'
|
||||
import { pageSize, pageSizes } from '@/config'
|
||||
import Pagingbar from '@/components/Pagingbar'
|
||||
export default {
|
||||
components: { Pagingbar },
|
||||
data() {
|
||||
return {
|
||||
filters: {
|
||||
time: []
|
||||
},
|
||||
search_loading: false,
|
||||
reset_loading: false,
|
||||
export_loading: false,
|
||||
table_loading: false,
|
||||
submit_loading: false,
|
||||
table_data: [],
|
||||
dialog_type: 'add',
|
||||
visiable: false,
|
||||
formModel: {},
|
||||
currentPage: 1,
|
||||
// 数据总条目
|
||||
total: 0,
|
||||
// 每页显示多少条数据
|
||||
pageSize: pageSize,
|
||||
pageSizes: pageSizes,
|
||||
formRules: {
|
||||
title: {
|
||||
required: true,
|
||||
message: this.$t('entry.pleaseInput'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
content: {
|
||||
required: true,
|
||||
message: this.$t('entry.pleaseInput'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
},
|
||||
stationId: null,
|
||||
selectData: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.$store.getters.currentStation || undefined
|
||||
},
|
||||
searchHeight() {
|
||||
return this.$store.getters.searchHeight
|
||||
},
|
||||
userId() {
|
||||
return this.$store.getters.userinfo.userId || undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
async handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
this.get_table_data()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
on_search() {
|
||||
this.get_table_data()
|
||||
},
|
||||
on_reset() {
|
||||
this.filters = {
|
||||
time: []
|
||||
}
|
||||
this.get_table_data()
|
||||
},
|
||||
on_add() {
|
||||
this.dialog_type = 'add'
|
||||
this.visiable = true
|
||||
},
|
||||
on_edit(row) {
|
||||
this.dialog_type = 'edit'
|
||||
this.formModel = Object.assign({}, row)
|
||||
this.visiable = true
|
||||
},
|
||||
on_del(id) {
|
||||
this.$confirm(this.$t('entry.delTip'), this.$t('entry.tip'), {
|
||||
confirmButtonText: this.$t('entry.sure'),
|
||||
cancelButtonText: this.$t('entry.cancel'),
|
||||
type: 'warning',
|
||||
showClose: false,
|
||||
center: true
|
||||
}).then(async() => {
|
||||
try {
|
||||
await DelInformation([id])
|
||||
this.get_table_data()
|
||||
this.$message.success(this.$t('entry.delSuccess'))
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
})
|
||||
},
|
||||
on_export() {
|
||||
this.export_loading = true
|
||||
// const stationName = this.stations.find((el) => {
|
||||
// if (el.id === this.filters.stationId) {
|
||||
// return el
|
||||
// }
|
||||
// })
|
||||
// const indexPoint = stationName.name.indexOf('.')
|
||||
// if (indexPoint !== -1) {
|
||||
// stationName.name = stationName.name + '.xls'
|
||||
// }
|
||||
const params = {
|
||||
station: this.stationId,
|
||||
|
||||
title: this.filters.name,
|
||||
startTime: this.filters.time.length ? this.filters.time[0] : undefined,
|
||||
endTime: this.filters.time.length ? this.filters.time[1] : undefined
|
||||
}
|
||||
|
||||
handleNewDownExcel('/business/noteAndRepair/exportStationNote', this.$t('entry.msgData'), params, (callback) => {
|
||||
this.export_loading = false
|
||||
})
|
||||
},
|
||||
on_colse() {
|
||||
this.$refs.formModel.resetFields()
|
||||
this.formModel = Object.assign({}, {})
|
||||
this.visiable = false
|
||||
},
|
||||
on_selection_change(val) {
|
||||
this.selectData = val
|
||||
},
|
||||
on_submit() {
|
||||
this.$refs.formModel.validate(async(valid) => {
|
||||
const params = {
|
||||
station: this.stationId,
|
||||
title: this.formModel.title,
|
||||
content: this.formModel.content,
|
||||
createUser: this.dialog_type === 'add' ? this.userId : undefined,
|
||||
updateUser: this.dialog_type === 'edit' ? this.userId : undefined,
|
||||
id: this.dialog_type === 'edit' ? this.formModel.id : undefined
|
||||
}
|
||||
if (valid) {
|
||||
this.submit_loading = true
|
||||
try {
|
||||
if (this.dialog_type === 'add') {
|
||||
await AddInformation(params)
|
||||
this.$message.success(this.$t('entry.addSuccess'))
|
||||
this.on_colse()
|
||||
} else {
|
||||
await EditInformation(params)
|
||||
this.$message.success(this.$t('entry.editSuccess'))
|
||||
this.on_colse()
|
||||
}
|
||||
} finally {
|
||||
this.submit_loading = false
|
||||
this.get_table_data()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
on_size_change(val) {
|
||||
this.currentPage = 1
|
||||
this.pageSize = val
|
||||
this.get_table_data()
|
||||
},
|
||||
// 页码选择
|
||||
on_current_change(val) {
|
||||
this.currentPage = val
|
||||
this.get_table_data()
|
||||
},
|
||||
async get_table_data() {
|
||||
try {
|
||||
this.table_loading = true
|
||||
const res = await GetInformationList({
|
||||
pageNum: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
title: this.filters.name,
|
||||
startTime: this.filters.time.length ? this.filters.time[0] : undefined,
|
||||
endTime: this.filters.time.length ? this.filters.time[1] : undefined,
|
||||
station: this.stationId
|
||||
})
|
||||
this.table_data = res.data.list
|
||||
this.total = res.data.totalRows
|
||||
} finally {
|
||||
this.table_loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.realtime-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background:var(--table-bg);
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
padding: 10px;
|
||||
|
||||
.table-wrapper {
|
||||
height: calc(100% - 60px);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
//
|
||||
}
|
||||
.search-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-form-item__content{
|
||||
display: flex!important;
|
||||
}
|
||||
</style>
|
||||
869
src/views/operational-inspection/message-config/index.vue
Normal file
869
src/views/operational-inspection/message-config/index.vue
Normal file
@ -0,0 +1,869 @@
|
||||
<template>
|
||||
<div class="realtime-wrapper">
|
||||
<el-form id="searchForm" :model="filters">
|
||||
<el-row :gutter="5" class="search-row">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="5">
|
||||
<el-form-item :label="$t('message.msgTitle') + '：'" label-width="140px">
|
||||
<el-input
|
||||
v-model="filters.messageName"
|
||||
class="input-box"
|
||||
maxlength="30"
|
||||
:placeholder="$t('message.pleaseInput')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="5">
|
||||
<el-form-item :label="$t('message.receivingType') + '：'" label-width="140px">
|
||||
<el-select
|
||||
v-model="filters.receivingType"
|
||||
style="width: 100%"
|
||||
:placeholder="$t('message.pleaseSelect')"
|
||||
@change="changeFilterUserType"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in $t('message.typeList')"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<!-- <el-radio-group
|
||||
v-model="filters.receivingType"
|
||||
@change="changeFilterUserType"
|
||||
>
|
||||
<el-radio :label="1">电站</el-radio>
|
||||
<el-radio :label="2">用户</el-radio>
|
||||
</el-radio-group> -->
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="5">
|
||||
<el-form-item :label="$t('message.receivingUser') + '：'" label-width="140px">
|
||||
<el-select
|
||||
v-if="filters.receivingType === 2"
|
||||
v-model="filters.receivingUser"
|
||||
filterable
|
||||
value-key="id"
|
||||
collapse-tags
|
||||
multiple
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in userOption"
|
||||
:key="item.id"
|
||||
:label="item.username"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
<el-cascader
|
||||
v-if="filters.receivingType === 1"
|
||||
:key="filterKey"
|
||||
v-model="filters.receivingUser"
|
||||
:placeholder="$t('message.pleaseSelect')"
|
||||
:options="stationOption"
|
||||
filterable
|
||||
collapse-tags
|
||||
style="width: 100%"
|
||||
:props="{
|
||||
label: 'name',
|
||||
children: 'list',
|
||||
value: 'id',
|
||||
multiple: true,
|
||||
emitPath: false,
|
||||
}"
|
||||
:show-all-levels="false"
|
||||
@change="handleToSelect"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="5">
|
||||
<el-form-item :label="$t('message.startTime') + '：'" label-width="140px">
|
||||
<el-date-picker
|
||||
v-model="filters.startTime"
|
||||
style="width: 100%"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
:placeholder="$t('message.pleaseSelect')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="4">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
:loading="searchLoading"
|
||||
@click="on_refresh"
|
||||
>{{ $t('message.query') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
class="reset-btn"
|
||||
:loading="resetLoading"
|
||||
@click="handleSearchClear"
|
||||
>{{ $t('message.reset') }}</el-button>
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
type="primary"
|
||||
@click="handleToAdd"
|
||||
>{{ $t('message.add') }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="table-wrapper">
|
||||
<el-table
|
||||
ref="alarmtable"
|
||||
v-loading="load_data"
|
||||
header-align="center"
|
||||
:height="$setAutoTableHeight(16, searchHeight)"
|
||||
:data="table_data"
|
||||
style="width: 100%"
|
||||
border
|
||||
>
|
||||
<el-table-column
|
||||
prop="messageName"
|
||||
:label="$t('message.msgTitle')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="receivingUserName"
|
||||
:label="$t('message.sendUser')"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
v-if="
|
||||
scope.row.receivingUserName.join(',') &&
|
||||
scope.row.receivingUserName.join(',').length > 50
|
||||
"
|
||||
>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
:title="$t('message.sendUser')"
|
||||
trigger="hover"
|
||||
popper-class="workorder-remark"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 350px;
|
||||
color: white;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
"
|
||||
>
|
||||
{{ scope.row.receivingUserName.join(",") }}
|
||||
</div>
|
||||
<span slot="reference">
|
||||
{{
|
||||
scope.row.receivingUserName.join(",").substr(0, 50) + "..."
|
||||
}}
|
||||
</span>
|
||||
</el-popover>
|
||||
</span>
|
||||
<span v-else>{{ scope.row.receivingUserName.join(",") }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="messageContent"
|
||||
:label="$t('message.msgContent')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="messageType" :label="$t('message.msgType')">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.messageType === 1">{{ $t('message.tip') }}</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.messageType === 2"
|
||||
type="warning"
|
||||
>{{ $t('message.gz') }}</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.messageType === 3"
|
||||
type="danger"
|
||||
>{{ $t('message.alarm') }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
:label="$t('message.bfsj')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
:label="$t('message.jssj')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
prop="createUserName"
|
||||
:label="$t('message.createUser')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
:label="$t('message.startTime')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="readStatus" :label="$t('message.msgStatus')">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="+scope.row.readStatus === 0"
|
||||
type="warning"
|
||||
>{{ $t('message.noRead') }}</el-tag>
|
||||
<el-tag
|
||||
v-if="+scope.row.readStatus === 1"
|
||||
type="success"
|
||||
>{{ $t('message.readed') }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('message.operate')" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.row.readStatus !== 1"
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(scope.row.messageId)"
|
||||
>{{ $t('message.edit') }}</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
:loading="deleteLoading"
|
||||
class="btn-delete-table-text"
|
||||
@click="handleDel([scope.row.messageId])"
|
||||
>{{ $t('message.delete') }}</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-view"
|
||||
@click="handleDetail(scope.row.messageId)"
|
||||
>{{ $t('message.detail') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
:append-to-body="false"
|
||||
:title="dialogTitle"
|
||||
:visible.sync="visiable"
|
||||
width="50%"
|
||||
:close-on-click-modal="false"
|
||||
@close="close"
|
||||
>
|
||||
<el-form
|
||||
ref="formModel"
|
||||
:model="formModel"
|
||||
label-width="142px"
|
||||
label-position="right"
|
||||
:rules="formRules"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('message.msgName')" prop="messageName">
|
||||
<el-input
|
||||
v-model="formModel.messageName"
|
||||
:disabled="detailType"
|
||||
:placeholder="$t('message.pleaseInput')"
|
||||
maxlength="20"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('message.msgType')" prop="name">
|
||||
<el-radio-group v-model="formModel.messageType" :disabled="detailType">
|
||||
<el-radio :label="1">{{ $t('message.tip') }}</el-radio>
|
||||
<el-radio :label="2">{{ $t('message.gz') }}</el-radio>
|
||||
<el-radio :label="3">{{ $t('message.alarm') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('message.receivingType')" prop="name">
|
||||
<el-radio-group
|
||||
v-model="formModel.receivingType"
|
||||
:disabled="detailType"
|
||||
@change="changeUserType"
|
||||
>
|
||||
<el-radio :label="1">{{ $t('message.station') }}</el-radio>
|
||||
<el-radio :label="2">{{ $t('message.user') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if="+formModel.receivingType === 2" :span="24">
|
||||
<el-form-item :label="$t('message.receivingUser')" prop="receivingUser">
|
||||
<el-select
|
||||
v-model="formModel.receivingUser"
|
||||
filterable
|
||||
value-key="id"
|
||||
collapse-tags
|
||||
:disabled="detailType"
|
||||
multiple
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in userOption"
|
||||
:key="item.id"
|
||||
:label="item.username"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col v-if="+formModel.receivingType === 1" :span="24">
|
||||
<el-form-item :label="$t('message.receivingUser')" prop="receivingUser">
|
||||
<el-cascader
|
||||
:key="selectKey"
|
||||
v-model="formModel.receivingUser"
|
||||
:placeholder="$t('message.pleaseSelect')"
|
||||
:options="stationOption"
|
||||
filterable
|
||||
:disabled="detailType"
|
||||
collapse-tags
|
||||
:clearable="false"
|
||||
style="width: 100%"
|
||||
:props="{
|
||||
label: 'name',
|
||||
children: 'list',
|
||||
value: 'id',
|
||||
multiple: true,
|
||||
emitPath: false,
|
||||
}"
|
||||
:show-all-levels="false"
|
||||
@change="handleToSelectStation"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('message.msgContent')" prop="messageContent">
|
||||
<el-input
|
||||
v-model="formModel.messageContent"
|
||||
:disabled="detailType"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
maxlength="200"
|
||||
:placeholder="$t('message.pleaseInput')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('message.bfsj')" prop="name">
|
||||
<el-radio-group
|
||||
v-model="formModel.sendType"
|
||||
:disabled="detailType"
|
||||
@change="changeTimeType"
|
||||
>
|
||||
<el-radio :label="0">{{ $t('message.now') }}</el-radio>
|
||||
<el-radio :label="1">{{ $t('message.dsfs') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col v-if="+formModel.sendType === 0" :span="24">
|
||||
<el-form-item :key="timeKey" :label="$t('message.bfjssj')" prop="endTime">
|
||||
<el-date-picker
|
||||
:key="timeKey"
|
||||
v-model="formModel.endTime"
|
||||
:disabled="detailType"
|
||||
:picker-options="pickerOptionsStart"
|
||||
popper-class="no-atTheMoment"
|
||||
style="width: 100%"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
:placeholder="$t('message.pleaseSelect')"
|
||||
@focus="focus"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col v-if="+formModel.sendType === 1" :span="24">
|
||||
<el-form-item :label="$t('message.bfsjfw')" prop="timeArr">
|
||||
<el-date-picker
|
||||
:key="timeKey"
|
||||
v-model="formModel.timeArr"
|
||||
:picker-options="pickerOptionsStart"
|
||||
style="width: 100%"
|
||||
type="datetimerange"
|
||||
:disabled="detailType"
|
||||
range-separator="~"
|
||||
:start-placeholder="$t('message.startDate')"
|
||||
:end-placeholder="$t('message.endDate')"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24" style="display: flex">
|
||||
<el-form-item :label="$t('message.frequencyUnit')">
|
||||
<el-select
|
||||
v-model="formModel.frequencyUnit"
|
||||
clearable
|
||||
:disabled="detailType"
|
||||
:placeholder="$t('message.pleaseSelect')"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in timeUnit"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="$t('message.messageFrequency')">
|
||||
<el-input-number
|
||||
v-model="formModel.messageFrequency"
|
||||
class="input-box"
|
||||
:disabled="detailType"
|
||||
style="width: 100%"
|
||||
:min="0"
|
||||
:max="999"
|
||||
:controls="false"
|
||||
:placeholder="$t('message.pleaseInput')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button @click="close">{{ $t('message.cancel') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="sub_loading"
|
||||
@click="sure"
|
||||
>{{ $t('message.sure') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { GetUserPage } from '@/api/system/sms-configuration'
|
||||
import { getProvinceStation } from '@/api/station/maintain'
|
||||
import {
|
||||
GetMessage,
|
||||
AddMessage,
|
||||
DelMessage
|
||||
} from '@/api/operational-inspection/message'
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
const validateTimeime = (rule, value, callback) => {
|
||||
if (value) {
|
||||
if (new Date(value) < new Date()) {
|
||||
callback(new Error(this.$t('message.endTimeError')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
} else {
|
||||
callback(new Error(this.$t('message.pleaseSelect')))
|
||||
}
|
||||
}
|
||||
return {
|
||||
filters: {
|
||||
receivingType: 1
|
||||
},
|
||||
resetLoading: false,
|
||||
searchLoading: false,
|
||||
typeList: this.$t('message.alarmList'),
|
||||
table_data: [],
|
||||
load_data: false,
|
||||
visiable: false,
|
||||
formModel: {
|
||||
messageType: 1,
|
||||
receivingType: 1,
|
||||
receivingUser: [],
|
||||
timeArr: [],
|
||||
sendType: 0
|
||||
},
|
||||
userOption: [],
|
||||
stationOption: [],
|
||||
pickerOptionsStart: {
|
||||
// 时间不能大于当前时间
|
||||
disabledDate: (time) => {
|
||||
return time.getTime() < Date.now() - 8.64e7
|
||||
},
|
||||
selectableRange: '00:00:00 - 23:59:59'
|
||||
},
|
||||
formRules: {
|
||||
messageName: {
|
||||
required: true,
|
||||
message: this.$t('message.pleaseInput'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
receivingUser: [
|
||||
{ required: true, message: this.$t('message.pleaseSelect'), trigger: 'change' }
|
||||
],
|
||||
messageContent: {
|
||||
required: true,
|
||||
message: this.$t('message.pleaseInput'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
endTime: [{
|
||||
required: true,
|
||||
trigger: 'change',
|
||||
validator: validateTimeime
|
||||
}
|
||||
],
|
||||
timeArr: [
|
||||
{
|
||||
required: true,
|
||||
// message: '请选择播放时间范围',
|
||||
trigger: 'change'
|
||||
}
|
||||
// {
|
||||
// validator(rule, value, callback) {
|
||||
// if (value.length) {
|
||||
// if (new Date(value[0]) < new Date()) {
|
||||
// callback(new Error('开始时间不能小于当前时间'))
|
||||
// } else {
|
||||
// callback()
|
||||
// }
|
||||
// } else {
|
||||
// callback(new Error('请选择播放时间范围'))
|
||||
// }
|
||||
// },
|
||||
// trigger: 'change'
|
||||
// }
|
||||
],
|
||||
frequencyUnit: {
|
||||
required: true,
|
||||
message: this.$t('message.pleaseInput'),
|
||||
trigger: 'change'
|
||||
},
|
||||
messageFrequency: {
|
||||
required: true,
|
||||
message: this.$t('message.pleaseInput'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
},
|
||||
stationId: null,
|
||||
endTime: '',
|
||||
timeUnit: this.$t('message.timeUnit'),
|
||||
sub_loading: false,
|
||||
selectKey: 0,
|
||||
timeKey: 0,
|
||||
filterKey: 0,
|
||||
deleteLoading: false,
|
||||
dialogTitle: this.$t('message.addTitle'),
|
||||
detailType: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.$store.getters.currentStation || undefined
|
||||
},
|
||||
searchHeight() {
|
||||
return this.$store.getters.searchHeight
|
||||
},
|
||||
userId() {
|
||||
return this.$store.getters.userinfo.userId || undefined
|
||||
},
|
||||
msgChange() {
|
||||
return this.$store.getters.msgChange || undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id && this.userId) {
|
||||
this.stationId = val.id
|
||||
this.getUserPage()
|
||||
this.getStation()
|
||||
this.get_table_data()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
msgChange: {
|
||||
handler(val) {
|
||||
if (this.stationId && this.userId) {
|
||||
this.get_table_data()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
focus() {
|
||||
this.$nextTick(() => {
|
||||
document
|
||||
.getElementsByClassName('el-picker-panel__link-btn')[0]
|
||||
.setAttribute('style', 'display:none')
|
||||
})
|
||||
},
|
||||
async handleDetail(row) {
|
||||
this.detailType = true
|
||||
const { data } = await GetMessage({ messageId: row })
|
||||
this.formModel = data[0]
|
||||
if (+this.formModel.sendType === 1) {
|
||||
this.$set(this.formModel, 'timeArr', [data[0].startTime, data[0].endTime])
|
||||
}
|
||||
|
||||
if (this.formModel.messageFrequency === null) {
|
||||
this.formModel.messageFrequency = undefined
|
||||
}
|
||||
this.dialogTitle = this.$t('message.msgDetail')
|
||||
this.visiable = true
|
||||
},
|
||||
async handleEdit(row) {
|
||||
this.detailType = false
|
||||
const { data } = await GetMessage({ messageId: row })
|
||||
this.formModel = data[0]
|
||||
if (+this.formModel.sendType === 1) {
|
||||
this.$set(this.formModel, 'timeArr', [data[0].startTime, data[0].endTime])
|
||||
}
|
||||
if (this.formModel.messageFrequency === null) {
|
||||
this.formModel.messageFrequency = undefined
|
||||
}
|
||||
if (this.formModel.createStatus === 3) {
|
||||
this.$message.warning(this.$t('message.noEdit'))
|
||||
this.formModel = {
|
||||
messageType: 1,
|
||||
receivingType: 1,
|
||||
receivingUser: [],
|
||||
sendType: 0,
|
||||
timeArr: []
|
||||
}
|
||||
} else {
|
||||
this.dialogTitle = this.$t('message.editMsg')
|
||||
this.visiable = true
|
||||
}
|
||||
// && scope.row.createStatus !== 3
|
||||
},
|
||||
handleDel(ids) {
|
||||
this.$confirm(this.$t('message.sureDel'), this.$t('message.tip'), {
|
||||
confirmButtonText: this.$t('message.sure'),
|
||||
cancelButtonText: this.$t('message.cancel'),
|
||||
type: 'warning',
|
||||
showClose: false,
|
||||
center: true
|
||||
}).then(async() => {
|
||||
try {
|
||||
this.deleteLoading = true
|
||||
await DelMessage(ids)
|
||||
if (this.table_data.length === 1) {
|
||||
this.currentPage--
|
||||
}
|
||||
this.get_table_data()
|
||||
this.$message.success(this.$t('message.delSuccess'))
|
||||
this.deleteLoading = false
|
||||
} catch (error) {
|
||||
this.deleteLoading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
changeFilterUserType() {
|
||||
this.filters.receivingUser = []
|
||||
},
|
||||
changeTimeType() {
|
||||
this.formModel.endTime = ''
|
||||
this.formModel.timeArr = []
|
||||
this.timeKey++
|
||||
},
|
||||
changeUserType(val) {
|
||||
this.formModel.receivingUser = []
|
||||
},
|
||||
getCurrentDateTime() {
|
||||
const now = new Date()
|
||||
|
||||
const year = now.getFullYear()
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(now.getDate()).padStart(2, '0')
|
||||
const hours = String(now.getHours()).padStart(2, '0')
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0')
|
||||
|
||||
const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||
|
||||
return formattedDateTime
|
||||
},
|
||||
async getUserPage() {
|
||||
const res = await GetUserPage({
|
||||
pageNum: 1,
|
||||
pageSize: 99999999,
|
||||
deptId: this.$store.getters.userDeptId
|
||||
})
|
||||
this.userOption = res.data.list
|
||||
},
|
||||
async getStation() {
|
||||
const res = await getProvinceStation()
|
||||
this.stationOption = res.data.list
|
||||
const addIdField = (nodes) => {
|
||||
nodes.forEach(node => {
|
||||
if (!node.id) {
|
||||
node.id = node.name
|
||||
}
|
||||
if (node.list && node.list.length > 0) {
|
||||
addIdField(node.list)
|
||||
}
|
||||
})
|
||||
}
|
||||
addIdField(this.stationOption)
|
||||
},
|
||||
handleToSelect() {
|
||||
},
|
||||
handleToSelectStation() {
|
||||
},
|
||||
async sure() {
|
||||
this.$refs.formModel.validate(async(valid) => {
|
||||
if (valid) {
|
||||
this.formModel.createUser = this.userId
|
||||
this.formModel.readTime = 15
|
||||
if (+this.formModel.sendType === 0) {
|
||||
this.formModel.startTime = this.getCurrentDateTime()
|
||||
this.formModel.createTime = this.formModel.startTime
|
||||
} else {
|
||||
this.formModel.startTime = this.formModel.timeArr[0]
|
||||
this.formModel.endTime = this.formModel.timeArr[1]
|
||||
this.formModel.createTime = this.getCurrentDateTime()
|
||||
}
|
||||
const params = {
|
||||
...this.formModel
|
||||
}
|
||||
try {
|
||||
this.sub_loading = true
|
||||
await AddMessage(params)
|
||||
this.$message.success(this.$t('message.operateSuccess'))
|
||||
this.close()
|
||||
this.get_table_data()
|
||||
} catch (error) {
|
||||
// console.log(error)
|
||||
// this.$message.error("操作失败");
|
||||
} finally {
|
||||
this.sub_loading = false
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
tableRowClassName(index) {
|
||||
return (this.currentPage - 1) * this.pageSize + index + 1
|
||||
},
|
||||
handleDateChange() {},
|
||||
handleSearchClear() {
|
||||
this.filters = {
|
||||
receivingType: 1
|
||||
}
|
||||
this.get_table_data()
|
||||
this.filterKey++
|
||||
},
|
||||
handleToAdd() {
|
||||
this.detailType = false
|
||||
this.dialogTitle = this.$t('message.addTitle')
|
||||
this.visiable = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.formModel.clearValidate()
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$refs.formModel.clearValidate()
|
||||
this.visiable = false
|
||||
this.formModel = {
|
||||
messageType: 1,
|
||||
receivingType: 1,
|
||||
receivingUser: [],
|
||||
sendType: 0,
|
||||
timeArr: []
|
||||
}
|
||||
this.selectKey++
|
||||
},
|
||||
on_refresh() {
|
||||
this.get_table_data()
|
||||
},
|
||||
async get_table_data() {
|
||||
this.load_data = true
|
||||
const { data } = await GetMessage({
|
||||
createUser: this.userId,
|
||||
messageName: this.filters.messageName
|
||||
? this.filters.messageName
|
||||
: undefined,
|
||||
messageType: this.filters.messageType
|
||||
? this.filters.messageType
|
||||
: undefined,
|
||||
receivingUser: this.filters.receivingUser?.length
|
||||
? this.filters.receivingUser
|
||||
: undefined,
|
||||
receivingType: this.filters.receivingType
|
||||
? this.filters.receivingType
|
||||
: undefined,
|
||||
stationId: undefined,
|
||||
startTime: this.filters.startTime ? this.filters.startTime : undefined
|
||||
})
|
||||
this.table_data = data
|
||||
this.load_data = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.realtime-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background:var(--table-bg);
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
padding: 10px;
|
||||
|
||||
.table-wrapper {
|
||||
height: calc(100% - 60px);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
// background: $card-background;
|
||||
}
|
||||
|
||||
/deep/ .is-disabled {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/deep/ .el-range-editor.is-disabled input {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/deep/ .el-cascader__search-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-cascader .el-input .el-input__inner:focus,
|
||||
.el-cascader .el-input.is-focus .el-input__inner {
|
||||
height: 33px !important; //这里高度根据需求自己设定
|
||||
}
|
||||
|
||||
/deep/.el-cascader__tags {
|
||||
display: inline-flex;
|
||||
margin-right: 10px;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
/deep/ .el-cascader__tags .el-tag:not(.is-hit) {
|
||||
border-color: #909399 !important;
|
||||
}
|
||||
// /deep/ .cell {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// text-overflow: ellipsis;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
/deep/ .el-picker-panel.no-atTheMoment {
|
||||
.el-button--text.el-picker-panel__link-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/deep/.el-textarea.is-disabled .el-textarea__inner{
|
||||
background-color:transparent;
|
||||
}
|
||||
|
||||
</style>
|
||||
577
src/views/operational-inspection/repair-records/index.vue
Normal file
577
src/views/operational-inspection/repair-records/index.vue
Normal file
@ -0,0 +1,577 @@
|
||||
<template>
|
||||
<div class="realtime-wrapper">
|
||||
<el-form id="searchForm" :model="filters">
|
||||
<el-row :gutter="5" class="search-row">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="5">
|
||||
<el-form-item :label="$t('maintenance.repairUserName')+'：'" label-width="90px">
|
||||
<el-input
|
||||
v-model="filters.repairUserName"
|
||||
class="input-box"
|
||||
maxlength="30"
|
||||
:placeholder="$t('maintenance.p_repairUserName')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="5">
|
||||
<el-form-item :label="$t('maintenance.repairPosition')+'：'" label-width="110px">
|
||||
<el-input
|
||||
v-model="filters.repairPosition"
|
||||
class="input-box"
|
||||
maxlength="30"
|
||||
:placeholder="$t('maintenance.p_repairPosition')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="5">
|
||||
<el-form-item :label="$t('maintenance.rangeTime')+'：'" label-width="90px">
|
||||
<el-date-picker
|
||||
v-model="filters.time"
|
||||
style="width: 100%"
|
||||
type="datetimerange"
|
||||
:range-separator="$t('maintenance.to')"
|
||||
:start-placeholder="$t('maintenance.startTime')"
|
||||
:end-placeholder="$t('maintenance.endTime')"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="4">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
:loading="search_loading"
|
||||
@click="on_search"
|
||||
>{{ $t('maintenance.query') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
class="reset-btn"
|
||||
:loading="reset_loading"
|
||||
@click="on_reset"
|
||||
>{{ $t('maintenance.reset') }}</el-button>
|
||||
</el-col>
|
||||
<el-col
|
||||
style="text-align: right"
|
||||
:xs="12"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="6"
|
||||
:xl="5"
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
type="primary"
|
||||
@click="on_add"
|
||||
>{{ $t('maintenance.add') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="reset-btn"
|
||||
icon="el-icon-upload2"
|
||||
:loading="export_loading"
|
||||
@click="on_export"
|
||||
>{{ $t('maintenance.export') }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="table-wrapper">
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="table_loading"
|
||||
header-align="center"
|
||||
:height="$setAutoTableHeight(46, searchHeight)"
|
||||
:data="table_data"
|
||||
:element-loading-text="$t('maintenance.loadingHard')"
|
||||
style="width: 100%"
|
||||
border
|
||||
@selection-change="on_selection_change"
|
||||
>
|
||||
<el-table-column
|
||||
prop="repairUserName"
|
||||
:label="$t('maintenance.repairUserName')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="repairContent"
|
||||
:label="$t('maintenance.repairContent')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="repairPosition"
|
||||
:label="$t('maintenance.repairPosition')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="repairTime"
|
||||
:label="$t('maintenance.repairTime')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="remark" :label="$t('maintenance.remark')" show-overflow-tooltip />
|
||||
<el-table-column prop="messageName" :label="$t('maintenance.operation')">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-permission="['business:noteAndRepair:updateStationRepair']"
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="on_edit(scope.row)"
|
||||
>{{ $t('maintenance.edit') }}</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-view"
|
||||
@click="on_show(scope.row)"
|
||||
>{{ $t('maintenance.lookPict') }}</el-button>
|
||||
<el-button
|
||||
v-permission="['business:noteAndRepair:deleteStationRepair']"
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
class="btn-delete-table-text"
|
||||
@click="on_del(scope.row.id)"
|
||||
>{{ $t('maintenance.del') }}</el-button>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagingbar>
|
||||
<div slot="page">
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@current-change="on_current_change"
|
||||
@size-change="on_size_change"
|
||||
/>
|
||||
</div>
|
||||
</Pagingbar>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
:title="dialog_type === 'add' ? $t('maintenance.addRecord') : $t('maintenance.editRecord')"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visiable"
|
||||
width="30%"
|
||||
@close="on_colse"
|
||||
>
|
||||
<el-form
|
||||
ref="formModel"
|
||||
:model="formModel"
|
||||
label-width="130px"
|
||||
label-position="right"
|
||||
:rules="formRules"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('maintenance.repairUserName')" prop="repairUserName">
|
||||
<el-input
|
||||
v-model="formModel.repairUserName"
|
||||
:placeholder="$t('maintenance.p_repairUserName')"
|
||||
maxlength="20"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('maintenance.repairPosition')" prop="repairPosition">
|
||||
<el-input
|
||||
v-model="formModel.repairPosition"
|
||||
:placeholder="$t('maintenance.p_repairPosition')"
|
||||
maxlength="20"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('maintenance.repairContent')" prop="repairContent">
|
||||
<el-input
|
||||
v-model="formModel.repairContent"
|
||||
:placeholder="$t('maintenance.p_repairContent')"
|
||||
maxlength="200"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('maintenance.repairTime')" prop="repairTime">
|
||||
<el-date-picker
|
||||
v-model="formModel.repairTime"
|
||||
style="width: 100%"
|
||||
type="datetime"
|
||||
:picker-options="expireTimeOption"
|
||||
:placeholder="$t('maintenance.selectSepairTime')"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item :label="$t('maintenance.remark')" prop="remark">
|
||||
<el-input
|
||||
v-model="formModel.remark"
|
||||
:placeholder="$t('maintenance.p_remark')"
|
||||
maxlength="200"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" :offset="0">
|
||||
<el-form-item :label="$t('maintenance.attachment')">
|
||||
<uploadPanel
|
||||
ref="_upload"
|
||||
:biz-type="uploadData"
|
||||
:biz-code="announcemnetNum"
|
||||
:upload-param="uploadData"
|
||||
:upload-url="uploadUrl"
|
||||
:limit="5"
|
||||
upload-type="business "
|
||||
document-type="jpg,jpeg,png"
|
||||
@uploadSuccess="uploadSuccess"
|
||||
@beforeUpload="beforeUpload"
|
||||
@uploadError="uploadError"
|
||||
@beforeRemove="beforeUpload"
|
||||
@removeSuccess="uploadError"
|
||||
>
|
||||
<div class="upload-icon">
|
||||
<i class="iconfont icon-icon_attachment" />
|
||||
</div>
|
||||
</uploadPanel>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button @click="on_colse">{{ $t('maintenance.cancel') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="submit_loading"
|
||||
@click="on_submit"
|
||||
>{{ $t('maintenance.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:title="$t('maintenance.pict')"
|
||||
:visible.sync="img_dialog"
|
||||
width="30%"
|
||||
@close="close_show"
|
||||
>
|
||||
<el-carousel :interval="5000" arrow="always" style="height: 400px;">
|
||||
<el-carousel-item v-for="item in imgList" :key="item.id" style="text-align: center;width: 100%;overflow: auto;height: 350px;">
|
||||
<img :src="item.url" mode="scaleToFill" style="width: 100%;height: auto;">
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
GetStationRepair,
|
||||
AddStationRepair,
|
||||
UpdateStationRepair,
|
||||
DelStationRepair
|
||||
} from '@/api/operational-inspection/information'
|
||||
import { handleNewDownExcel } from '@/utils'
|
||||
import { pageSize, pageSizes } from '@/config'
|
||||
import Pagingbar from '@/components/Pagingbar'
|
||||
import uploadPanel from '@/components/uploadPanel/index.vue'
|
||||
export default {
|
||||
components: { Pagingbar, uploadPanel },
|
||||
data() {
|
||||
return {
|
||||
filters: {
|
||||
time: []
|
||||
},
|
||||
search_loading: false,
|
||||
reset_loading: false,
|
||||
export_loading: false,
|
||||
table_loading: false,
|
||||
submit_loading: false,
|
||||
img_dialog: false,
|
||||
table_data: [],
|
||||
dialog_type: 'add',
|
||||
visiable: false,
|
||||
formModel: {},
|
||||
currentPage: 1,
|
||||
imgList: [],
|
||||
// 数据总条目
|
||||
total: 0,
|
||||
// 每页显示多少条数据
|
||||
pageSize: pageSize,
|
||||
pageSizes: pageSizes,
|
||||
stationId: null,
|
||||
uploadData: 'DELEVERY',
|
||||
announcemnetNum: '',
|
||||
dialogVisible: false,
|
||||
dialogImageUrl: '',
|
||||
uploadUrl:
|
||||
process.env.VUE_APP_BASE_API +
|
||||
'/business/noteAndRepair/uploadRepairFile',
|
||||
formLoading: false,
|
||||
expireTimeOption: {
|
||||
disabledDate(date) {
|
||||
// disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
|
||||
return date.getTime() >= Date.now()
|
||||
}
|
||||
},
|
||||
formRules: {
|
||||
title: {
|
||||
required: true,
|
||||
message: this.$t('maintenance.p_messageName'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
content: {
|
||||
required: true,
|
||||
message: this.$t('maintenance.p_messageContent'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
repairUserName: {
|
||||
required: true,
|
||||
message: this.$t('maintenance.p_repairUserName'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
repairPosition: {
|
||||
required: true,
|
||||
message: this.$t('maintenance.p_repairPosition'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
repairContent: {
|
||||
required: true,
|
||||
message: this.$t('maintenance.p_repairContent'),
|
||||
trigger: 'blur'
|
||||
},
|
||||
repairTime: {
|
||||
required: true,
|
||||
message: this.$t('maintenance.selectSepairTime'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.$store.getters.currentStation || undefined
|
||||
},
|
||||
searchHeight() {
|
||||
return this.$store.getters.searchHeight
|
||||
},
|
||||
userId() {
|
||||
return this.$store.getters.userinfo.userId || undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
async handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
this.get_table_data()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
on_show(row) {
|
||||
if (row.repairFileList.length) {
|
||||
this.$nextTick(() => {
|
||||
this.imgList = row.repairFileList
|
||||
this.img_dialog = true
|
||||
})
|
||||
} else {
|
||||
this.$message.warning(this.$t('maintenance.noPict'))
|
||||
}
|
||||
},
|
||||
close_show() {},
|
||||
uploadSuccess() {
|
||||
this.formLoading = false
|
||||
},
|
||||
uploadError() {
|
||||
this.formLoading = false
|
||||
},
|
||||
beforeUpload() {
|
||||
this.formLoading = true
|
||||
},
|
||||
uploadSuccessLogo() {
|
||||
this.formLoading = false
|
||||
},
|
||||
uploadErrorLogo() {
|
||||
this.formLoading = false
|
||||
},
|
||||
beforeUploadLogo() {
|
||||
this.formLoading = true
|
||||
},
|
||||
on_search() {
|
||||
this.get_table_data()
|
||||
},
|
||||
on_reset() {
|
||||
this.filters = {
|
||||
time: []
|
||||
}
|
||||
this.get_table_data()
|
||||
},
|
||||
on_add() {
|
||||
this.dialog_type = 'add'
|
||||
this.visiable = true
|
||||
},
|
||||
on_edit(row) {
|
||||
this.dialog_type = 'edit'
|
||||
this.formModel = Object.assign({}, row)
|
||||
if (row.repairFileList.length) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs._upload.setFileList(row.repairFileList)
|
||||
})
|
||||
}
|
||||
this.visiable = true
|
||||
},
|
||||
on_del(id) {
|
||||
this.$confirm(this.$t('maintenance.isOrNotDel'), this.$t('maintenance.hint'), {
|
||||
confirmButtonText: this.$t('maintenance.confirm'),
|
||||
cancelButtonText: this.$t('maintenance.cancel'),
|
||||
type: 'warning',
|
||||
showClose: false,
|
||||
center: true
|
||||
}).then(async() => {
|
||||
try {
|
||||
await DelStationRepair([id])
|
||||
this.get_table_data()
|
||||
this.$message.success(this.$t('maintenance.delSuccess'))
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
|
||||
}
|
||||
})
|
||||
},
|
||||
on_export() {
|
||||
this.export_loading = true
|
||||
// const stationName = this.stations.find((el) => {
|
||||
// if (el.id === this.filters.stationId) {
|
||||
// return el
|
||||
// }
|
||||
// })
|
||||
// const indexPoint = stationName.name.indexOf('.')
|
||||
// if (indexPoint !== -1) {
|
||||
// stationName.name = stationName.name + '.xls'
|
||||
// }
|
||||
// const params = {
|
||||
// stationId: this.filters.stationId,
|
||||
// srcId: this.filters.srcId,
|
||||
// sensType: this.filters.sensType,
|
||||
// name: this.filters.name,
|
||||
// title: stationName.name,
|
||||
// value1: this.filters.value1,
|
||||
// value2: this.filters.value2
|
||||
// }
|
||||
const params = {
|
||||
repairUserName: this.filters.repairUserName,
|
||||
repairPosition: this.filters.repairPosition,
|
||||
startTime: this.filters.time.length ? this.filters.time[0] : undefined,
|
||||
endTime: this.filters.time.length ? this.filters.time[1] : undefined,
|
||||
station: this.stationId
|
||||
}
|
||||
handleNewDownExcel(
|
||||
'/business/noteAndRepair/exportStationRepair',
|
||||
this.$t('maintenance.repairRecord'),
|
||||
params,
|
||||
(callback) => {
|
||||
this.export_loading = false
|
||||
}
|
||||
)
|
||||
},
|
||||
on_colse() {
|
||||
this.$refs.formModel.resetFields()
|
||||
this.formModel = Object.assign({}, {})
|
||||
this.$refs._upload.clearFileList()
|
||||
this.visiable = false
|
||||
},
|
||||
on_selection_change() {},
|
||||
on_submit() {
|
||||
this.$refs.formModel.validate(async(valid) => {
|
||||
const params = {
|
||||
station: this.stationId,
|
||||
repairUserName: this.formModel.repairUserName,
|
||||
repairPosition: this.formModel.repairPosition,
|
||||
repairTime: this.formModel.repairTime,
|
||||
remark: this.formModel.remark,
|
||||
repairContent: this.formModel.repairContent,
|
||||
repairFileList: this.$refs._upload.upoladFileList,
|
||||
id: this.dialog_type === 'edit' ? this.formModel.id : undefined
|
||||
}
|
||||
if (valid) {
|
||||
this.submit_loading = true
|
||||
try {
|
||||
if (this.dialog_type === 'add') {
|
||||
await AddStationRepair(params)
|
||||
this.$message.success(this.$t('maintenance.addSuccess'))
|
||||
this.on_colse()
|
||||
} else {
|
||||
await UpdateStationRepair(params)
|
||||
this.$message.success(this.$t('maintenance.editSuccess'))
|
||||
this.on_colse()
|
||||
}
|
||||
} finally {
|
||||
this.submit_loading = false
|
||||
this.get_table_data()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
on_size_change(val) {
|
||||
this.currentPage = 1
|
||||
this.pageSize = val
|
||||
this.get_table_data()
|
||||
},
|
||||
// 页码选择
|
||||
on_current_change(val) {
|
||||
this.currentPage = val
|
||||
this.get_table_data()
|
||||
},
|
||||
async get_table_data() {
|
||||
try {
|
||||
this.table_loading = true
|
||||
const res = await GetStationRepair({
|
||||
pageNum: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
repairUserName: this.filters.repairUserName,
|
||||
repairPosition: this.filters.repairPosition,
|
||||
startTime: this.filters.time.length
|
||||
? this.filters.time[0]
|
||||
: undefined,
|
||||
endTime: this.filters.time.length ? this.filters.time[1] : undefined,
|
||||
station: this.stationId
|
||||
})
|
||||
this.table_data = res.data.list
|
||||
this.total = res.data.totalRows
|
||||
} finally {
|
||||
this.table_loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.realtime-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background:var(--table-bg);
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
padding: 10px;
|
||||
|
||||
.table-wrapper {
|
||||
height: calc(100% - 60px);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
//
|
||||
}
|
||||
.search-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
/deep/.el-upload--picture-card {
|
||||
background-color: rgba(4, 48, 80, 0.6) !important;
|
||||
}
|
||||
</style>
|
||||
315
src/views/operational-inspection/task/index.vue
Normal file
315
src/views/operational-inspection/task/index.vue
Normal file
@ -0,0 +1,315 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form id="searchForm" :model="queryParams">
|
||||
<el-row :gutter="5" class="search-row">
|
||||
<el-col :xs="24" :sm="12" :md="10" :lg="12" :xl="6">
|
||||
<el-form-item :label="$t('task.taskTheme') + '：'" label-width="120px">
|
||||
<el-input
|
||||
v-model="queryParams.title"
|
||||
class="input-box"
|
||||
maxlength="30"
|
||||
:placeholder="$t('task.pleaseInput')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="20" :sm="6" :md="12" :lg="6" :xl="12">
|
||||
<el-button type="primary" icon="el-icon-search" @click="on_refresh">{{ $t('task.query') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
@click="handleSearchClear"
|
||||
>
|
||||
{{ $t('task.reset') }}
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :xs="4" :sm="6" :md="2" :lg="6" :xl="6" style="text-align:right;">
|
||||
<el-button v-if="activeName === 'haveDone'" type="primary" :loading="export_loading" @click="exportpdf">{{ $t('task.exportPdf') }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane :label="$t('task.todo')" name="todo">
|
||||
<el-table v-loading="loading" :data="tastList" :height="$setAutoTableHeight(56,searchHeight)" style="width: 100%">
|
||||
<el-table-column :label="$t('task.taskTitle')" align="center" prop="title" />
|
||||
<el-table-column :label="$t('task.priority')" align="center" prop="priority" />
|
||||
<el-table-column :label="$t('task.status')" align="center" prop="status" />
|
||||
<el-table-column :label="$t('task.startUserName')" align="center" prop="startUserName" />
|
||||
<el-table-column :label="$t('task.startTime')" align="center" prop="startTime" />
|
||||
|
||||
<el-table-column :label="$t('task.operate')" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(scope.row.processInstanceId,scope.row.id,'todo')"
|
||||
>
|
||||
{{ $t('task.view') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('task.haveDone')" name="haveDone">
|
||||
<el-table v-loading="doneLoading" :data="doneList" :height="$setAutoTableHeight(88,searchHeight)" style="width: 100%" @selection-change="handleSelectionChange">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column :label="$t('task.taskTitle')" align="center" prop="title" />
|
||||
<el-table-column :label="$t('task.priority')" align="center" prop="priority" />
|
||||
<el-table-column :label="$t('task.status')" align="center" prop="status" />
|
||||
<el-table-column :label="$t('task.creatUser')" align="center" prop="startUserName" />
|
||||
<el-table-column :label="$t('task.startTime')" align="center" prop="startTime" />
|
||||
|
||||
<el-table-column :label="$t('task.operate')" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(scope.row.processInstanceId,scope.row.id,'isdone')"
|
||||
>
|
||||
{{ $t('task.view') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagingbar>
|
||||
<div slot="page">
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</Pagingbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { GetTodoList, GetQueryDoneList } from '@/api/activiti/task'
|
||||
import { pageSize, pageSizes } from '@/config'
|
||||
import { handleDownPdf } from '@/utils'
|
||||
import Pagingbar from '@/components/Pagingbar'
|
||||
export default {
|
||||
components: { Pagingbar },
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
definitionKey: '',
|
||||
businessKey: '',
|
||||
// 遮罩层
|
||||
loading: false,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
|
||||
// 请假表格数据
|
||||
tastList: [],
|
||||
// 弹出层标题
|
||||
title: '',
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
title: '',
|
||||
stationId: ''
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
formData: []
|
||||
},
|
||||
// 表单校验
|
||||
rules: {},
|
||||
activeName: 'todo',
|
||||
doneList: [],
|
||||
doneLoading: false,
|
||||
// 当前页码
|
||||
currentPage: 1,
|
||||
// 数据总条目
|
||||
total: 0,
|
||||
// 每页显示多少条数据
|
||||
pageSize: pageSize,
|
||||
pageSizes: pageSizes,
|
||||
export_loading: false,
|
||||
selectData: [],
|
||||
stationId: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.$store.getters.currentStation || undefined
|
||||
},
|
||||
searchHeight() {
|
||||
return this.$store.getters.searchHeight
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.queryParams.stationId = val.id
|
||||
this.getList()
|
||||
this.getDoneList()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.$route.query.name) {
|
||||
this.activeName = 'haveDone'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange(val) {
|
||||
this.selectData = val
|
||||
},
|
||||
exportpdf() {
|
||||
if (this.selectData.length) {
|
||||
const id = []
|
||||
this.selectData.forEach((el) => {
|
||||
id.push(el.processInstanceId)
|
||||
})
|
||||
const params = { processInstIds: id, title: this.$t('task.haveDonePDF') }
|
||||
|
||||
handleDownPdf('/flow/processFlowNew/exportPDF', params, (callback) => {
|
||||
this.export_loading = false
|
||||
})
|
||||
} else {
|
||||
this.$message.warning(this.$t('task.noData'))
|
||||
}
|
||||
},
|
||||
handleClick() {
|
||||
this.currentPage = 1
|
||||
},
|
||||
/** 查询请假列表 */
|
||||
async getList() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await GetTodoList(this.queryParams)
|
||||
this.tastList = res.data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async getDoneList() {
|
||||
this.doneLoading = true
|
||||
this.queryParams = { ...this.queryParams, pageNum: this.currentPage,
|
||||
pageSize: this.pageSize }
|
||||
try {
|
||||
const res = await GetQueryDoneList(this.queryParams)
|
||||
this.doneList = res.data.list
|
||||
this.total = res.data.totalRows
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
this.doneLoading = false
|
||||
}
|
||||
},
|
||||
on_refresh() {
|
||||
this.getList()
|
||||
this.getDoneList()
|
||||
},
|
||||
|
||||
handleSizeChange(val) {
|
||||
this.currentPage = 1
|
||||
this.pageSize = val
|
||||
this.getDoneList()
|
||||
},
|
||||
// 页码选择
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.getDoneList()
|
||||
},
|
||||
handleSearchClear() {
|
||||
this.queryParams.title = ''
|
||||
this.getList()
|
||||
this.getDoneList()
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false
|
||||
this.reset()
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.definitionKey = ''
|
||||
this.businessKey = ''
|
||||
this.form = {
|
||||
formData: []
|
||||
}
|
||||
this.resetForm('form')
|
||||
},
|
||||
|
||||
async handleEdit(row, id, type) {
|
||||
// console.log(row)
|
||||
// const res = await GetDetailsTask({ processInstId: row })
|
||||
this.$router.push({
|
||||
path: '/operational-inspection/all-task-detail',
|
||||
query: { processInstanceId: row, orderFormId: id, type }
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app-container{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background:var(--table-bg);
|
||||
padding: 10px;
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
}
|
||||
.top-search {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
// background: $card-background;
|
||||
// margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
.serach-item {
|
||||
color: $text-color;
|
||||
.input-box {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-box {
|
||||
text-align: right;
|
||||
.upload-btn {
|
||||
background: $tiffany;
|
||||
}
|
||||
.download-btn {
|
||||
background: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-tabs /deep/ .el-tabs__nav-wrap::after{
|
||||
background-color: transparent!important;
|
||||
}
|
||||
</style>
|
||||
349
src/views/operational-inspection/user-message-config/index.vue
Normal file
349
src/views/operational-inspection/user-message-config/index.vue
Normal file
@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<div class="realtime-wrapper">
|
||||
<el-form id="searchForm" :model="filters">
|
||||
<el-row :gutter="5" class="search-row">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
||||
<el-form-item :label="$t('message.msgTitle') + '：'" label-width="140px">
|
||||
<el-input
|
||||
v-model="filters.messageName"
|
||||
class="input-box"
|
||||
maxlength="30"
|
||||
:placeholder="$t('message.pleaseInput')"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
||||
<el-form-item :label="$t('message.msgType') + '：'" label-width="140px">
|
||||
<el-select
|
||||
v-model="filters.messageType"
|
||||
clearable
|
||||
:placeholder="$t('message.pleaseSelect')"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in typeList"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="Number(item.value)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
||||
|
||||
<el-form-item :label="$t('message.startTime') + '：'" label-width="140px">
|
||||
<el-date-picker
|
||||
v-model="time"
|
||||
style="width: 100%"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="~"
|
||||
:start-placeholder="$t('message.startDate')"
|
||||
:end-placeholder="$t('message.endDate')"
|
||||
@change="changeTime"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
:loading="searchLoading"
|
||||
@click="on_refresh"
|
||||
>{{ $t('message.query') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
class="reset-btn"
|
||||
:loading="resetLoading"
|
||||
@click="handleSearchClear"
|
||||
>{{ $t('message.reset') }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="table-wrapper">
|
||||
<el-table
|
||||
ref="alarmtable"
|
||||
v-loading="load_data"
|
||||
header-align="center"
|
||||
:height="$setAutoTableHeight(16, searchHeight)"
|
||||
:data="table_data"
|
||||
style="width: 100%"
|
||||
border
|
||||
>
|
||||
<el-table-column
|
||||
prop="messageName"
|
||||
:label="$t('message.msgTitle')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="receivingUserName"
|
||||
:label="$t('message.sendUser')"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.receivingUserName.join(',') && scope.row.receivingUserName.join(',').length > 50">
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
:title="$t('message.sendUser')"
|
||||
trigger="hover"
|
||||
popper-class="workorder-remark"
|
||||
>
|
||||
<div style="width: 350px;color:white;max-height: 400px; overflow-y: auto;">{{ scope.row.receivingUserName.join(',') }}</div>
|
||||
<span slot="reference">
|
||||
{{ scope.row.receivingUserName.join(',').substr(0,50) + '...' }}
|
||||
</span>
|
||||
</el-popover>
|
||||
</span>
|
||||
<span v-else>{{ scope.row.receivingUserName.join(',') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="messageContent"
|
||||
:label="$t('message.msgContent')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="messageType" :label="$t('message.msgType')">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.messageType === 1">{{ $t('message.tip') }}</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.messageType === 2"
|
||||
type="warning"
|
||||
>{{ $t('message.gz') }}</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.messageType === 3"
|
||||
type="danger"
|
||||
>{{ $t('message.alarm') }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
:label="$t('message.bfsj')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="endTime"
|
||||
:label="$t('message.jssj')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
||||
<el-table-column prop="createUserName" :label="$t('message.createUser')" show-overflow-tooltip />
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
:label="$t('message.startTime')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="readStatus" :label="$t('message.msgStatus')">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="+scope.row.readStatus === 0"
|
||||
type="warning"
|
||||
>{{ $t('message.noRead') }}</el-tag>
|
||||
<el-tag
|
||||
v-if="+scope.row.readStatus === 1"
|
||||
type="success"
|
||||
>{{ $t('message.readed') }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('message.operate')" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-view"
|
||||
@click="handleShow(scope.row.messageId)"
|
||||
>{{ $t('message.msgDetail') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
:append-to-body="false"
|
||||
:title="$t('message.msgDetail')"
|
||||
:visible.sync="visiable"
|
||||
width="30%"
|
||||
:close-on-click-modal="false"
|
||||
@close="close"
|
||||
>
|
||||
<el-form
|
||||
ref="formModel"
|
||||
:model="formModel"
|
||||
label-width="130px"
|
||||
label-position="right"
|
||||
:rules="formRules"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-input
|
||||
v-model="formModel.messageContent"
|
||||
type="textarea"
|
||||
:autosize="true"
|
||||
:readonly="true"
|
||||
:placeholder="$t('message.pleaseInput')"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<span slot="footer">
|
||||
<el-button
|
||||
v-if="+formModel.readStatus === 0"
|
||||
type="primary"
|
||||
:loading="sub_loading"
|
||||
@click="sure"
|
||||
>{{ $t('message.sureRead') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
GetMessage,
|
||||
UpdateMessageStatus
|
||||
} from '@/api/operational-inspection/message'
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
filters: {},
|
||||
datetime: null,
|
||||
resetLoading: false,
|
||||
searchLoading: false,
|
||||
typeList: this.$t('message.alarmList'),
|
||||
table_data: [],
|
||||
load_data: false,
|
||||
visiable: false,
|
||||
formModel: {},
|
||||
userList: [],
|
||||
formRules: {},
|
||||
stationId: null,
|
||||
sub_loading: false,
|
||||
time: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentStation() {
|
||||
return this.$store.getters.currentStation || undefined
|
||||
},
|
||||
searchHeight() {
|
||||
return this.$store.getters.searchHeight
|
||||
},
|
||||
userId() {
|
||||
return this.$store.getters.userinfo.userId || undefined
|
||||
},
|
||||
msgChange() {
|
||||
return this.$store.getters.msgChange || undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id && this.userId) {
|
||||
this.stationId = val.id
|
||||
this.get_table_data()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
},
|
||||
msgChange: {
|
||||
handler(val) {
|
||||
if (this.stationId && this.userId) {
|
||||
this.get_table_data()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTime(val) {
|
||||
|
||||
},
|
||||
async sure() {
|
||||
this.sub_loading = true
|
||||
try {
|
||||
await UpdateMessageStatus({
|
||||
messageId: this.formModel.messageId,
|
||||
stationId: this.stationId,
|
||||
receivingUser: this.userId
|
||||
})
|
||||
this.$message.success(this.$t('message.operateSuccess'))
|
||||
this.close()
|
||||
this.get_table_data()
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.sub_loading = false
|
||||
}
|
||||
},
|
||||
tableRowClassName(index) {
|
||||
return (this.currentPage - 1) * this.pageSize + index + 1
|
||||
},
|
||||
async handleShow(row) {
|
||||
this.visiable = true
|
||||
const { data } = await GetMessage({ messageId: row, stationId: this.stationId, receivingUser: this.userId })
|
||||
this.formModel = data[0]
|
||||
},
|
||||
handleDateChange() {},
|
||||
handleSearchClear() {
|
||||
this.time = []
|
||||
this.filters = {}
|
||||
this.get_table_data()
|
||||
},
|
||||
handleToAdd() {
|
||||
this.visiable = true
|
||||
},
|
||||
close() {
|
||||
this.visiable = false
|
||||
this.formModel = {}
|
||||
},
|
||||
on_refresh() {
|
||||
this.get_table_data()
|
||||
},
|
||||
async get_table_data() {
|
||||
this.load_data = true
|
||||
console.log(this.time)
|
||||
|
||||
const { data } = await GetMessage({
|
||||
messageName: this.filters.messageName ? this.filters.messageName : undefined,
|
||||
messageType: this.filters.messageType ? this.filters.messageType : undefined,
|
||||
receivingUser: this.userId,
|
||||
stationId: this.stationId,
|
||||
startTime: this.time?.length && this.time ? this.time[0] : undefined,
|
||||
endTime: this.time?.length && this.time ? this.time[1] : undefined,
|
||||
createStatus: 3
|
||||
})
|
||||
this.table_data = data
|
||||
this.load_data = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.realtime-wrapper {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background:var(--table-bg);
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
padding: 10px;
|
||||
.table-wrapper {
|
||||
height: calc(100% - 60px);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
// background: $card-background;
|
||||
}
|
||||
.search-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
// /deep/ .cell {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user