智慧运维前端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

770 lines
21 KiB

<template>
<basic-container>
<el-row :span="24">
<div class="check_status_class">
<span >
<el-col >
审核状态:
<el-select v-model="checkStatusValue">
<el-option
v-for="item in optionCheckStatus"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-col>
</span>
</div>
</el-row>
<avue-tabs :option="option"
@change="handleChange"></avue-tabs>
<span v-if="type.prop==='information'">
<avue-form :option="tab1_option"
v-model="tab1_form"
ref="tab1_form"
:class="frame_class">
</avue-form>
</span>
<span v-else-if="type.prop==='operationItem'">
<!-- 选项卡内容3 https://avuejs.com/crud/crud-fun.html-->
<avue-crud :option="optionDoc"
:table-loading="loading"
:data="item_data"
:permission="permissionList"
:header-cell-class-name="headerClass"
v-model="item_form"
ref="crud2"
@row-update="item_rowUpdate"
@row-save="item_rowSave"
@row-del="item_rowDel">
</avue-crud>
</span>
<div class="container">
<span >
<el-button type="primary"
size="large"
@click="handleFormSubmit"
v-if="addUpdateShowButton">
确定</el-button>
<el-button type="text"
size="large"
@click="back"
v-if="addUpdateShowButton">
取消</el-button>
<el-button type="primary"
size="small"
@click="auditing"
v-if="shouldShowButton">
审核</el-button>
<el-button type="primary"
size="small"
@click="reject"
v-if="shouldShowButton">
驳回</el-button>
<el-button type="primary"
size="small"
@click="seachToUpdate"
v-if="shouldShowButton">
修改</el-button>
<el-button type="primary"
size="small"
@click="del"
v-if="shouldShowButton">
删除</el-button>
</span>
</div>
</basic-container>
<!-- https://avuejs.com/form/form-rules.html#%E5%A4%96%E7%BD%AE%E9%AA%8C%E8%AF%81-->
</template>
<script>
import {getList, getDetail, add, update, remove} from "@/api/smart/operationticket";
import {
item_add,
item_update,
item_remove,
item_getListByItemId,
getItemDetail,
} from "@/api/smart/operationitem";
import {mapGetters} from "vuex";
import website from "@/config/website";
import {readonly} from "vue";
import {getToken} from "@/util/auth";
export default {
name: "operationticketDetail",
data () {
return {
checkStatusValue: this.$route.query.reviewStatus,
optionCheckStatus: [{
value: "1",
label: '审核中'
}, {
value: "2",
label: '已审核'
}, {
value: "3",
label: '未通过'
}, {
value: "4",
label: ' '
}],
frame_class: '',
type: {},
shouldShowButton:{},
addUpdateShowButton:{},
readonlyForm:{},
item_form:{},
option: {
column: [{
label: '基本信息',
prop: 'information',
}
]
},
tab1_form: {},
tab1_option: {
submitBtn: false,
emptyBtn: false,
isShowItem: false,
group:[
{
column: [
{
label: "KKS编码",
prop: "kksEncoding",
rules: [{
required: true,
message: "请输入KKS编码",
trigger: "blur",
}],
span: 8,
maxlength: 20,
},
{
label: "KKS描述",
prop: "kksDescription",
rules: [{
required: true,
message: "请输入KKS描述",
trigger: "blur"
}],
span: 8,
maxlength: 20,
},
{
label: "场站",
prop: "station",
rules: [{
required: true,
message: "请输入场站",
trigger: "blur"
}],
type: "select",
dicUrl: "/api/daf-system/dict/dictionary?code=station",
props: {
label: "dictValue",
value: "dictKey"
},
span: 8,
maxlength: 20,
},
{
label: "操作票编号",
prop: "operationTicketNo",
rules: [{
required: true,
message: "请输入操作票编号",
trigger: "blur",
}],
span: 8,
maxlength: 20,
},
{
label: "操作票类型",
prop: "operationTicketType",
rules: [{
required: true,
message: "请输入操作票类型",
trigger: "blur"
}],
span: 8,
maxlength: 20,
},
{
label: "作业风险等级",
prop: "jobRiskLevel",
rules: [{
required: true,
message: "请输入作业风险等级",
trigger: "blur"
}],
span: 8,
maxlength: 20,
},
{
label: "工作班组",
prop: "workTeam",
rules: [{
required: true,
message: "请输入工作班组",
trigger: "blur"
}],
span: 8,
maxlength: 20,
},
{
label: "工作负责人",
prop: "workLeader",
rules: [{
required: true,
message: "请输入工作负责人",
trigger: "blur"
}],
span:8,
row:true,
maxlength: 20,
},
{
label: "发令人",
prop: "givingOrdersUser",
rules: [{
required: true,
message: "请输入发令人",
trigger: "blur"
}],
span: 8,
maxlength: 20,
},
{
label: "监护人",
prop: "guardian",
rules: [{
required: true,
message: "请输入监护人",
trigger: "blur"
}],
span: 8,
maxlength: 20,
},
{
label: "控制等级",
prop: "controlLevel",
rules: [{
required: true,
message: "请输入控制等级",
trigger: "blur"
}],
span: 8,
maxlength: 20,
},
{
label: "计划开始时间",
prop: "plannedStartTime",
rules: [{
required: true,
}],
type: "date",
format: 'yyyy/MM/dd',
valueFormat: "yyyyMMdd",
span: 8,
maxlength: 20,
},
{
label: "计划结束时间",
prop: "plannedEndTime",
rules: [{
required: true,
}],
type: "date",
format: 'yyyy/MM/dd',
valueFormat: "yyyyMMdd",
span: 8,
maxlength: 20,
},
{
label: "工作签发时间",
prop: "workIssuanceTime",
rules: [{
required: true,
}],
type: "date",
format: 'yyyy/MM/dd',
valueFormat: "yyyyMMdd",
span: 8,
maxlength: 20,
},
{
label: "安全措施交底",
prop: "securityMeasuresDisclosure",
type: "textarea",
span: 8,
maxlength: 1000,
},
{
label: "作业后风险管控情况评价",
prop: "riskControlEvaluation",
type: "textarea",
span: 8,
display: this.$route.query.frameMode == "add"? false : true,
maxlength: 1000,
},
{
label: "状态",
prop: "sts",
type: "select",
dicUrl: "/api/daf-system/dict/dictionary?code=operation_sts",
props: {
label: "dictValue",
value: "dictKey"
},
display: this.$route.query.frameMode == "add"? false : true,
span: 8,
maxlength: 20,
},
{
label: "是否合格",
display: this.$route.query.frameMode == "add"? false : true,
type: "select",
prop: "isQuakified",
dicUrl: "/api/daf-system/dict/dictionary?code=is_qualified",
span: 8,
offset: 16,
props: {
label: "dictValue",
value: "dictKey"
},
},
]
},
{
label: '作业前风险辨识',
column: [
{
label: "人员资格",
prop: "personnelQualification",
span: 8,
maxlength: 20,
},
{
label: "人员状态",
prop: "personnelState",
span: 8,
maxlength: 20,
},
{
label: "人员防护",
prop: "personnelPritection",
span: 8,
maxlength: 20,
},
{
label: "安全距离",
prop: "safeDistance",
span: 8,
maxlength: 20,
},
{
label: "走错间隔",
prop: "wrongInterval",
span: 8,
maxlength: 20,
},
{
label: "安全措施落实",
prop: "securityMeasuresImplement",
span: 8,
maxlength: 20,
},
{
label: "开展过程检查",
prop: "conductProcessInspections",
span: 8,
maxlength: 20,
},
{
label: "安全培训落实",
prop: "securityTrainingImplement",
span: 8,
maxlength: 20,
},
{
label: "其他",
prop: "other",
span: 8,
maxlength: 20,
},
]
},
]
},
tab3_page: {
pageSize: 20,
pagerCount: 5
},
item_data: [],
optionDoc: {
align: 'center',
menuAlign: 'center',
height: 'auto',
calcHeight: 210,
searchShow: true,
searchMenuSpan: 6,
tip: false,
border: true,
indexLabel: "序号",
index: true,
column: [
{
label: "操作票编号",
prop: "operationTicketNo",
span: 20,
// disabled: true,
rules: [{
required: true,
message: "请输入操作票编号",
trigger: "blur"
}]
},
{
label: "操作项目编号",
prop: "operationItemNo",
span: 20,
rules: [{
required: true,
message: "请输入操作项目编号",
trigger: "blur"
}]
},
{
label: "项目名称",
prop: "itmeName",
span: 20,
rules: [{
required: true,
message: "请输入项目名称",
trigger: "blur"
}]
},
{
label: "危害因素",
prop: "securityMeasures",
span: 20,
rules: [{
required: true,
message: "请输入危害因素",
trigger: "blur"
}]
},
{
label: "风险等级",
prop: "riskLevel",
span: 20,
rules: [{
required: true,
message: "请输入风险等级",
trigger: "blur"
}]
},
{
label: "其他",
prop: "other",
span: 20,
type:"textarea",
rules: [{
required: true,
message: "请输入其他",
trigger: "blur"
}]
},
]
}
}
},
computed: {
...mapGetters(["permission"]),
permissionList() {
return {
addBtn: true,
viewBtn: false,
delBtn: true,
editBtn: true
};
},
},
created () {
this.type = this.option.column[0];
this.option.column.push({ label: '操作项目', prop: 'operationItem' });
if(this.$route.query.frameMode == "add"){
this.readonlyForm=false;
this.shouldShowButton=false;
this.addUpdateShowButton=true;
this.frame_class = null;
}else{
this.readonlyForm=false;
this.shouldShowButton=true;
this.addUpdateShowButton=false;
this.frame_class = 'frame_class1';
this.SearchDetail();
}
},
methods: {
handleFormSubmit() {
const form = this.$refs.tab1_form;
form.validate((valid) => {
if (valid) {
this.Submit();
} else {
this.$message({
type: "warning",
message: "请输入必要信息!"
});
}
});
},
// 处理表单提交
Submit() {
if(this.$route.query.frameMode=="add"){
this.$confirm("是否新增所填数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.tab1_form.reviewStatus="1"
this.tab1_form.sts= "1"
add(this.tab1_form).then(()=>{
this.$router.push({
path: "/smart/operationticket",
query: {
},
});
this.$message({
type: "success",
message: "操作成功!"
});
}).catch((error) => {
this.$message({
type: "error",
message: "操作失败!"
});
});
});
}else {
this.$confirm("是否修改所填数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
update(this.tab1_form).then(() => {
this.$router.push({
path: "/smart/operationticket",
query: {},
});
this.$message({
type: "success",
message: "操作成功!"
});
}).catch((error) => {
this.$message({
type: "error",
message: "操作失败!"
});
});
});
}
},
back() {
if(this.$route.query.frameMode=="add") {
this.$router.push({path: "/smart/operationticket"});
}else{
this.updateToSearch();
this.SearchDetail();
}
},
seachToUpdate () {
this.shouldShowButton=false;
this.addUpdateShowButton=true;
this.readonlyForm=false;
this.frame_class = null;
},
updateToSearch () {
this.readonlyForm=true;
this.shouldShowButton=true;
this.addUpdateShowButton=false;
this.frame_class = 'frame_class1';
},
handleChange (column) {
this.type = column
if(this.$route.query.frameMode != "add"){
if (column.prop == 'operationItem') {
this.item_onLoad();
}
}
},
// 操作项目 新增按钮处理
item_rowSave (form, done, loading) {
loading();
form.id = this.$route.query.id;
item_add(form).then(() => {
done(form);
this.item_onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
}, error => {
window.console.log(error);
loading();
});
},
// 操作项目 编辑按钮处理
item_rowUpdate (form, index, done, loading) {
console.log(form)
item_update(form).then(() => {
done(form);
this.$message({
type: "success",
message: "操作成功!"
});
}, error => {
window.console.log(error);
loading();
});
},
// 操作项目 删除按钮处理
item_rowDel (form, index,done) {
this.$confirm("确定将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
return item_remove(form.id);
})
.then(() => {
this.item_onLoad(this.page);
this.$message({
type: "success",
message: "操作成功!"
});
});
},
SearchDetail() {
getDetail(this.$route.query.id).then(res => {
console.log(res);
this.tab1_form = res.data.data;
});
// getItemDetail(this.$route.query.id,this.tab1_form.operationTicketNo).then(res => {
// console.log(res);
// this.item_data = res.data.data;
// });
},
auditing() {
this.$confirm("是否将数据审核?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.tab1_form.reviewStatus="2"
this.submitRejectOrauditing();
});
},
reject() {
this.$confirm("是否将数据审核?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
this.tab1_form.reviewStatus="3"
this.submitRejectOrauditing();
});
},
submitRejectOrauditing() {
update(this.tab1_form).then(() => {
this.$router.push({
path: "/smart/operationticket",
query: {},
});
this.$message({
type: "success",
message: "操作成功!"
});
}).catch((error) => {
this.$message({
type: "error",
message: "操作失败!"
});
});
},
del() {
this.$confirm("是否将选择数据删除?", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
remove(this.tab1_form.id).then(() => {
this.$router.push({
path: "/smart/operationticket",
query: {},
});
this.$message({
type: "success",
message: "操作成功!"
});
}).catch((error) => {
this.$message({
type: "error",
message: "操作失败!"
});
});
})
},
headerClass(){
return 'head-style'
},
item_onLoad(row, params = {}) {
this.loading = true;
item_getListByItemId(this.$route.query.operationTicketNo).then(res => {
this.item_data = res.data.data;
this.loading = false;
});
},
handleDownload(row) {
window.open(`/api/system/file/download?daf-auth=${getToken()}&fileName=${row.accessoryName}`);
},
}
}
</script>
<style>
.head-style{
background-color: #1e9fff !important;
color: #FFFFFF !important;
}
.frame_class1 input.el-input__inner {
border: none;
box-shadow: none;
outline: none;
pointer-events: none;
}
.frame_class1 .el-input__icon {
display: none;
}
.frame_class1 .el-input--prefix .el-input__inner {
padding-left: 15px;
}
.container {
display: flex;
justify-content: flex-end; /* 将子元素推到容器的末端 */
}
.check_status_class {
display: flex;
justify-content: flex-end; /* 将子元素推到容器的末端 */
}
</style>