<template>
|
<flex-layout>
|
<div slot="header">
|
<!-- 如果用户角色是班组成员 则显示 '我发起的申请' -->
|
<!-- 如果用户角色是管理层或领导层 则显示 '由我处理' -->
|
<!-- <div class="filter-box-table"> -->
|
<div class="table-layout filter-box-table">
|
<div class="table-row">
|
<div class="table-cell text-right">审批类型：</div>
|
<div class="table-cell">
|
<el-select v-model="type" @change="sendMessage" size="small">
|
<el-option label="全部" :value="0"></el-option>
|
<el-option label="放电" :value="2"></el-option>
|
<el-option label="告警隐患" :value="3"></el-option>
|
</el-select>
|
</div>
|
<div class="table-cell text-right">审批状态：</div>
|
<div class="table-cell">
|
<!-- <el-select v-model="status" @change="sendMessage" size="small">-->
|
<!-- <el-option label="全部" :value="0"></el-option>-->
|
<!-- <el-option label="审批中" :value="1"></el-option>-->
|
<!-- <el-option label="已完成" :value="2"></el-option>-->
|
<!-- <el-option label="已驳回" :value="3"></el-option>-->
|
<!-- </el-select>-->
|
|
<el-radio-group v-model="status" size="small" @input="sendMessage">
|
<el-radio-button label="0">
|
<el-badge :value="statusNums.all" class="item">
|
<span class="radio-label">全部</span>
|
</el-badge>
|
</el-radio-button>
|
<el-radio-button label="1">
|
<el-badge :value="statusNums.inApproval" class="item">
|
<span class="radio-label">审批中</span>
|
</el-badge>
|
</el-radio-button>
|
<el-radio-button label="2">
|
<el-badge :value="statusNums.completed" class="item">
|
<span class="radio-label">已完成</span>
|
</el-badge>
|
</el-radio-button>
|
<el-radio-button label="3">
|
<el-badge :value="statusNums.reject" class="item">
|
<span class="radio-label">已驳回</span>
|
</el-badge>
|
</el-radio-button>
|
</el-radio-group>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-table
|
stripe
|
size="small"
|
:data="table.datas"
|
tooltip-effect="light"
|
height="100%"
|
>
|
<el-table-column type="index" label="编号" width="50"></el-table-column>
|
<el-table-column
|
v-for="header in table.headers"
|
:key="header.prop"
|
:prop="header.prop"
|
:label="header.label"
|
:width="header.width"
|
:min-width="header.minWidth"
|
align="center"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
prop="cztime"
|
fixed="right"
|
width="180px"
|
align="center"
|
label="操作"
|
>
|
<template slot-scope="scope">
|
<el-button
|
type="primary"
|
v-if="
|
0 == scope.row.status ||
|
1 == scope.row.status ||
|
6 == scope.row.status
|
"
|
size="mini"
|
@click="approval(scope.row)"
|
>审核</el-button
|
>
|
<el-button
|
type="success"
|
v-else
|
size="mini"
|
@click="approval(scope.row, true)"
|
>详情</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="flex-page-footer" slot="footer">
|
<!-- <div class="el-pagination-btns">
|
<el-button
|
type="primary"
|
round
|
size="mini"
|
icon="el-icon-search"
|
@click="sendMessage"
|
>查询</el-button
|
>
|
</div> -->
|
<el-pagination
|
class="pagess"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="pageNum"
|
:page-sizes="[10, 20, 30, 50, 100]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total"
|
></el-pagination>
|
</div>
|
|
<el-dialog
|
:title="flowDialogTitle"
|
width="860px"
|
:visible.sync="flowVisible"
|
:close-on-click-modal="false"
|
top="0"
|
class="dialog-center"
|
:modal-append-to-body="false"
|
:destroy-on-close="true"
|
>
|
<div class="param-dialog">
|
<approval-form
|
v-if="flowVisible && currObj.workflowMain.type == 2"
|
:main-id="currObj.mainId"
|
></approval-form>
|
<upload-error-form
|
@ready="dataReady"
|
v-if="flowVisible && currObj.workflowMain.type == 3"
|
:main-id="currObj.mainId"
|
></upload-error-form>
|
<el-form
|
v-if="!viewOnly"
|
ref="ruleForm"
|
size="mini"
|
label-position="top"
|
:model="form"
|
>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<el-form-item label="审核结果">
|
<el-select size="small" v-model="form.res">
|
<el-option label="通过" :value="5"></el-option>
|
<el-option label="驳回" :value="8"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="处理意见" prop="reason">
|
<el-input
|
type="textarea"
|
:rows="2"
|
v-model="form.reason"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div class="dialog-footer">
|
<el-button
|
type="primary"
|
v-if="!viewOnly"
|
size="mini"
|
@click="approvalOk"
|
>确定</el-button
|
>
|
<el-button size="mini" @click="flowVisible = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</flex-layout>
|
</template>
|
|
<script>
|
import { linkOfTemp, confirmAlarm } from "./js/flowManage";
|
import ApprovalForm from "./components/approvalForm";
|
import UploadErrorForm from "./components/uploadErrorForm";
|
import createWs from "@/assets/js/websocket";
|
const WSMixin = createWs("hrTmpFlow");
|
|
const typeList = ["", "", "放电", "告警隐患"];
|
const STATUELIST = ["", "审批中", "审批通过", "已驳回", "已撤销"];
|
|
export default {
|
name: "",
|
mixins: [WSMixin],
|
components: {
|
ApprovalForm,
|
UploadErrorForm,
|
},
|
data() {
|
return {
|
statusNums: {
|
all: 0,
|
inApproval: 0,
|
completed: 0,
|
reject: 0
|
},
|
faultUpload: null,
|
flowDialogTitle: "",
|
viewOnly: false,
|
pageSize: 10,
|
pageNum: 1,
|
total: 0,
|
status: 1,
|
type: 0,
|
flowVisible: false,
|
currObj: null,
|
form: {
|
reason: "",
|
res: "",
|
},
|
layout: {
|
gutter: 16,
|
span: 24,
|
},
|
table: {
|
headers: [
|
{
|
prop: "createTime",
|
label: "创建时间",
|
width: 180,
|
},
|
{
|
prop: "fullStationName",
|
label: "机房名称",
|
width: 380,
|
},
|
{
|
prop: "typeStr",
|
label: "流程类型",
|
width: 160,
|
},
|
{
|
prop: "statusStr",
|
label: "流程状态",
|
minWidth: 220,
|
},
|
],
|
datas: [],
|
},
|
};
|
},
|
methods: {
|
onWSOpen() {
|
this.$nextTick(() => {
|
this.sendMessage();
|
});
|
},
|
sendMessage() {
|
if (!this.isWSOpen) {
|
return false;
|
}
|
let params = {
|
pageNum: this.pageNum,
|
pageSize: this.pageSize,
|
type: this.type,
|
status: this.status,
|
};
|
// console.log("=====9=", params, JSON.stringify(params));
|
this.SOCKET.send(JSON.stringify(params));
|
},
|
onWSMessage(res) {
|
res = JSON.parse(res.data);
|
this.getFlowList(res);
|
},
|
getFlowList(res) {
|
if (res) {
|
let list = [];
|
let total = 0;
|
let statusNums = {
|
all: 0,
|
inApproval: 0,
|
completed: 0,
|
reject: 0
|
};
|
if(res.code) {
|
let {info, statistics} = res.data;
|
let {code , data, data2} = info;
|
if (code && data) {
|
list = data2.list.map((v) => {
|
let status = v.workflowMain.status;
|
v.typeStr = typeList[v.workflowMain.type];
|
v.statusStr =
|
1 != status
|
? STATUELIST[status]
|
: { P2: "管理层审批中", P3: "领导层审批中" }[
|
v.workflowMain.processLevel
|
] || "流程状态错误";
|
v.fullStationName = v.stationInf?.stationName5+"-"+v.stationInf?.stationName3;
|
return v;
|
});
|
total = data2.total;
|
}
|
// 统计数目
|
if(statistics.code) {
|
let statisticsData = statistics.data;
|
statusNums.all = statisticsData[0];
|
statusNums.inApproval = statisticsData[1];
|
statusNums.completed = statisticsData[2];
|
statusNums.reject = statisticsData[3];
|
}
|
}
|
console.log(list);
|
this.statusNums = statusNums;
|
this.table.datas = list;
|
this.total = total;
|
}
|
},
|
approval(obj, viewOnly) {
|
// console.log(obj);
|
this.viewOnly = !!viewOnly;
|
this.flowDialogTitle = typeList[obj.workflowMain.type] + "审批";
|
this.formInit();
|
this.flowVisible = true;
|
this.currObj = obj;
|
},
|
formInit() {
|
this.form.res = "";
|
this.form.reason = "";
|
},
|
approvalOk() {
|
if ("" == this.form.reason.trim()) {
|
this.$message.error("请输入处理意见");
|
return false;
|
}
|
if (!this.form.res) {
|
this.$message.error("请选择审核结果");
|
return false;
|
}
|
if (2 == this.currObj.workflowMain.type) {
|
this.confirmDischarge();
|
} else {
|
this.confirmAlarm();
|
}
|
},
|
dataReady(data) {
|
this.faultUpload = data;
|
},
|
confirmAlarm() {
|
let { id, mainId, processLevel } = this.currObj;
|
let dealRejectReason, dealReason;
|
if (5 == this.form.res) {
|
dealReason = this.form.reason.trim();
|
} else {
|
dealRejectReason = this.form.reason.trim();
|
}
|
let param = {
|
faultUpload: this.faultUpload,
|
link: {
|
id,
|
mainId,
|
status: this.form.res,
|
processLevel,
|
dealReason,
|
dealRejectReason,
|
},
|
};
|
let loading = this.$layer.loading(1);
|
confirmAlarm(param)
|
.then((res) => {
|
let { code } = res.data;
|
if (code) {
|
this.$layer.msg("操作成功");
|
this.handleCurrentChange(1);
|
this.flowVisible = false;
|
} else {
|
this.$layer.msg("操作失败");
|
}
|
// 关闭等待框
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
this.$layer.close(loading);
|
console.log(err);
|
});
|
},
|
confirmDischarge() {
|
let { id, mainId } = this.currObj;
|
let dealRejectReason = "",
|
dealReason = "";
|
if (5 == this.form.res) {
|
dealReason = this.form.reason.trim();
|
} else {
|
dealRejectReason = this.form.reason.trim();
|
}
|
let param = {
|
id,
|
mainId,
|
status: this.form.res,
|
dealReason,
|
dealRejectReason,
|
};
|
let loading = this.$layer.loading(1);
|
linkOfTemp(param)
|
.then((res) => {
|
let { code, data } = res.data;
|
if (code && data) {
|
this.$layer.msg("操作成功");
|
this.handleCurrentChange(1);
|
this.flowVisible = false;
|
} else {
|
this.$layer.msg("操作失败");
|
}
|
// 关闭等待框
|
this.$layer.close(loading);
|
})
|
.catch((err) => {
|
this.$layer.close(loading);
|
console.log(err);
|
});
|
},
|
handleSizeChange(newSize) {
|
this.pageSize = newSize;
|
/*console.log(`每页 ${val} 条`); */
|
this.sendMessage();
|
},
|
handleCurrentChange(newPage) {
|
this.pageNum = newPage;
|
/*console.log(`当前页: ${val}`); */
|
this.sendMessage();
|
},
|
},
|
|
mounted() {},
|
};
|
</script>
|
|
<style scoped>
|
.filter-value {
|
display: inline-block;
|
}
|
.dialog-center >>> .el-dialog__body {
|
background: #1b4a6c;
|
}
|
.param-dialog {
|
padding: 8px;
|
}
|
.param-dialog >>> .el-form-item__label {
|
color: #fff;
|
}
|
.param-dialog >>> .el-select {
|
width: 100%;
|
}
|
.dialog-footer {
|
text-align: right;
|
padding: 0 8px 8px;
|
}
|
.radio-label {
|
display: inline-block;
|
padding: 0 16px;
|
}
|
</style>
|
