366 lines
11 KiB
Vue
366 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<!-- 质量问题库 -->
|
|||
|
|
<div class="qualityProblemBank">
|
|||
|
|
<vue-scroll style="height: 100%; width: 100%" class="scroll">
|
|||
|
|
<div class="flex content">
|
|||
|
|
<div class="left">
|
|||
|
|
<el-input
|
|||
|
|
:placeholder="$t('message.quality.rectificationPeople')"
|
|||
|
|
prefix-icon="el-icon-search"
|
|||
|
|
size="small"
|
|||
|
|
v-model="dangerName"
|
|||
|
|
clearable
|
|||
|
|
style="margin-bottom: 15px"
|
|||
|
|
>
|
|||
|
|
</el-input>
|
|||
|
|
<vue-scroll style="height: 87%; width: 100%; font-size: 14px">
|
|||
|
|
<el-tree
|
|||
|
|
class="filter-tree"
|
|||
|
|
:highlight-current="true"
|
|||
|
|
:data="listData"
|
|||
|
|
:props="defaultProps"
|
|||
|
|
@node-click="getCheckedNode"
|
|||
|
|
:default-expand-all="showExpand"
|
|||
|
|
:filter-node-method="filterNode"
|
|||
|
|
node-key="id"
|
|||
|
|
ref="tree"
|
|||
|
|
>
|
|||
|
|
<span class="custom-tree-node flex3" slot-scope="{ node, data }">
|
|||
|
|
<span v-if="node.label.length <= 10"> <span class="stop" v-if="data.recordStatus == 1">【{{$t('message.quality.stop')}}】</span>{{ node.label }}</span>
|
|||
|
|
<el-tooltip
|
|||
|
|
v-else
|
|||
|
|
class="item"
|
|||
|
|
effect="dark"
|
|||
|
|
:content="node.label"
|
|||
|
|
placement="top"
|
|||
|
|
>
|
|||
|
|
<span class="ellipsis"> <span class="stop" v-if="data.recordStatus == 1">【{{$t('message.quality.stop')}}】</span>{{ node.label }}</span>
|
|||
|
|
</el-tooltip>
|
|||
|
|
<el-button
|
|||
|
|
v-if="data.recordStatus == 1"
|
|||
|
|
type="text"
|
|||
|
|
size="mini"
|
|||
|
|
@click.stop="() => singleEditState(node, data,0)"
|
|||
|
|
>
|
|||
|
|
{{$t('message.quality.click')}}{{$t("message.quality.startUsing")}}
|
|||
|
|
</el-button>
|
|||
|
|
<el-button
|
|||
|
|
v-else
|
|||
|
|
type="text"
|
|||
|
|
size="mini"
|
|||
|
|
@click.stop="() => singleEditState(node, data,1)"
|
|||
|
|
>
|
|||
|
|
{{$t('message.quality.click')}}{{ $t("message.quality.forbidden") }}
|
|||
|
|
</el-button>
|
|||
|
|
</span>
|
|||
|
|
</el-tree>
|
|||
|
|
</vue-scroll>
|
|||
|
|
<div class="btn_wrap">
|
|||
|
|
<el-button type="primary" size="small" @click="setCheckedNodes"
|
|||
|
|
>{{ $t("message.quality.add")
|
|||
|
|
}}{{ $t("message.quality.unfold") }}</el-button
|
|||
|
|
>
|
|||
|
|
<el-button type="primary" size="small" @click="setCheckedKeys"
|
|||
|
|
>{{ $t("message.quality.add")
|
|||
|
|
}}{{ $t("message.quality.close") }}</el-button
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
<div class="title">
|
|||
|
|
<div style="line-heihgt: 25px; height: 30px">
|
|||
|
|
{{ checkedNodeData && checkedNodeData.dangerName }}
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<el-form
|
|||
|
|
:inline="true"
|
|||
|
|
:model="formInline"
|
|||
|
|
class="demo-form-inline"
|
|||
|
|
size="small"
|
|||
|
|
>
|
|||
|
|
<el-form-item :label="$t('message.quality.close')+'：'">
|
|||
|
|
<el-input
|
|||
|
|
:placeholder="
|
|||
|
|
$t('message.quality.pleaseEnter') +
|
|||
|
|
$t('message.quality.content')
|
|||
|
|
"
|
|||
|
|
v-model="formInline.content"
|
|||
|
|
clearable
|
|||
|
|
style="width: 200px"
|
|||
|
|
>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item :label="$t('message.quality.displayEnabledOnly')+'：'">
|
|||
|
|
<el-select
|
|||
|
|
v-model="formInline.recordStatus"
|
|||
|
|
:placeholder="$t('message.quality.pleaseSelect')"
|
|||
|
|
>
|
|||
|
|
<el-option :label="$t('message.quality.no')" :value="0"></el-option>
|
|||
|
|
<el-option :label="$t('message.quality.yes')" :value="1"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="onSubmit">{{$t('message.quality.inquire')}}</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-table
|
|||
|
|
:data="tableData"
|
|||
|
|
ref="multipleTable"
|
|||
|
|
tooltip-effect="dark"
|
|||
|
|
@selection-change="handleSelectionChange"
|
|||
|
|
class="tables"
|
|||
|
|
max-height="590px"
|
|||
|
|
>
|
|||
|
|
<el-table-column type="selection" width="55" align="center"> </el-table-column>
|
|||
|
|
<el-table-column :label="$t('message.quality.problemLevel')" width="125">
|
|||
|
|
<template slot-scope="scope">{{ scope.row.priorityName }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="name" :label="$t('message.quality.problemDescription')">
|
|||
|
|
<template slot-scope="scope">{{ scope.row.content }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="createtime" :label="$t('message.quality.creationTime')">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="remark" :label="$t('message.quality.rectificationRequest')">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="changeLimit" :label="$t('message.quality.rectificationTime')">
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column prop="recordStatus" :label="$t('message.quality.state')">
|
|||
|
|
<template slot-scope="scope">{{ scope.row.recordStatus==0?$t('message.quality.startUsing'):$t('message.quality.forbidden') }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
<div class="tab_btn_wrap" v-if="tableData.length>0">
|
|||
|
|
<el-button type="primary" size="small" :disabled='showBatch' @click="editState(0)">{{
|
|||
|
|
$t("message.quality.batch") + $t("message.quality.startUsing")
|
|||
|
|
}}</el-button>
|
|||
|
|
<el-button type="primary" size="small" :disabled='showBatch' @click="editState(1)">{{
|
|||
|
|
$t("message.quality.batch") + $t("message.quality.forbidden")
|
|||
|
|
}}</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</vue-scroll>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { getDangerTypeRecordApi,getDangerItemRecordApi,editStateApi,singleEditStateApi } from "@/assets/js/api/quality";
|
|||
|
|
export default {
|
|||
|
|
name: "qualityProblemBank",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dangerName: "",
|
|||
|
|
defaultProps: {
|
|||
|
|
children: "children",
|
|||
|
|
label: "dangerName",
|
|||
|
|
id: "id",
|
|||
|
|
},
|
|||
|
|
projectSn: "",
|
|||
|
|
checkedNodeData: {},
|
|||
|
|
showExpand: true,
|
|||
|
|
listData: [],
|
|||
|
|
formInline: {
|
|||
|
|
content: "",
|
|||
|
|
recordStatus: 0,
|
|||
|
|
},
|
|||
|
|
tableData: [],
|
|||
|
|
multipleSelection: [],
|
|||
|
|
checkboxId:[],
|
|||
|
|
showBatch:true,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
dangerName(val) {
|
|||
|
|
this.$refs.tree.filter(val);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.projectSn = this.$store.state.projectSn;
|
|||
|
|
this.getDangerTypeRecordList();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//获取左侧---列表信息
|
|||
|
|
getDangerTypeRecordList() {
|
|||
|
|
console.log(22)
|
|||
|
|
let data = {
|
|||
|
|
projectSn: this.projectSn,
|
|||
|
|
dangerName: this.dangerName,
|
|||
|
|
};
|
|||
|
|
getDangerTypeRecordApi(data).then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
if (res.result.length > 0) {
|
|||
|
|
this.listData = res.result;
|
|||
|
|
} else {
|
|||
|
|
this.listData = [];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//左边节点 输入筛选
|
|||
|
|
filterNode(value, data) {
|
|||
|
|
if (!value) return true;
|
|||
|
|
return data.dangerName.indexOf(value) !== -1;
|
|||
|
|
},
|
|||
|
|
//左侧 --启用 禁用 按钮
|
|||
|
|
singleEditState(node, data, type) {
|
|||
|
|
let newData = {
|
|||
|
|
projectSn:this.projectSn,
|
|||
|
|
recordStatus:type,
|
|||
|
|
id:data.id,
|
|||
|
|
}
|
|||
|
|
singleEditStateApi(newData).then(res=>{
|
|||
|
|
console.log(res)
|
|||
|
|
if(res.code==200){
|
|||
|
|
this.$message.success(res.message);
|
|||
|
|
this.getDangerTypeRecordList();
|
|||
|
|
this.getDangerItemRecord();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
//获取选中的 节点
|
|||
|
|
getCheckedNode(data) {
|
|||
|
|
this.checkedNodeData = data;
|
|||
|
|
this.getDangerItemRecord();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//全部关闭
|
|||
|
|
setCheckedKeys() {
|
|||
|
|
this.defaultExpand = false;
|
|||
|
|
for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
|
|||
|
|
this.$refs.tree.store._getAllNodes()[i].expanded = this.defaultExpand;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//全部展开
|
|||
|
|
setCheckedNodes() {
|
|||
|
|
this.defaultExpand = true; //展开所有节点
|
|||
|
|
for (var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
|
|||
|
|
this.$refs.tree.store._getAllNodes()[i].expanded = this.defaultExpand;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//获取列表数据--右侧
|
|||
|
|
getDangerItemRecord(){
|
|||
|
|
let data ={
|
|||
|
|
projectSn:this.projectSn,
|
|||
|
|
dangerTypeId:this.checkedNodeData.id,
|
|||
|
|
content: this.formInline.content,
|
|||
|
|
recordStatus: this.formInline.recordStatus,
|
|||
|
|
};
|
|||
|
|
getDangerItemRecordApi(data).then(res=>{
|
|||
|
|
if(res.code==200){
|
|||
|
|
this.tableData = res.result;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
//列表查询--右侧
|
|||
|
|
onSubmit(){
|
|||
|
|
this.getDangerItemRecord()
|
|||
|
|
},
|
|||
|
|
// 批量启用 批量停用
|
|||
|
|
editState(type){
|
|||
|
|
let data = {
|
|||
|
|
projectSn:this.projectSn,
|
|||
|
|
recordStatus:type,
|
|||
|
|
idStr:this.checkboxId.join(','),
|
|||
|
|
}
|
|||
|
|
editStateApi(data).then(res=>{
|
|||
|
|
console.log(data)
|
|||
|
|
if(res.code==200){
|
|||
|
|
this.$message.success(res.message);
|
|||
|
|
this.getDangerItemRecord();
|
|||
|
|
this.getDangerTypeRecordList();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
//表格多选
|
|||
|
|
handleSelectionChange(value) {
|
|||
|
|
if(value.length>0){
|
|||
|
|
let arr = [];
|
|||
|
|
for(let i = 0 ; i<value.length; i++){
|
|||
|
|
arr.push(value[i].id);
|
|||
|
|
}
|
|||
|
|
this.checkboxId = arr;
|
|||
|
|
this.showBatch = false;
|
|||
|
|
}else{
|
|||
|
|
this.checkboxId = value;
|
|||
|
|
this.showBatch = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.flex {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
.flex2 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.flex3 {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.qualityProblemBank {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
// padding: 16px 20px;
|
|||
|
|
.scroll /deep/ .__view {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.content {
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.left {
|
|||
|
|
width: 20%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
padding: 16px 20px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.btn_wrap {
|
|||
|
|
border-top: 1px solid @borderColor;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
padding-top: 10px;
|
|||
|
|
text-align: center;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 16px;
|
|||
|
|
right: 0;
|
|||
|
|
left: 0;
|
|||
|
|
}
|
|||
|
|
.ellipsis {
|
|||
|
|
width: 150px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.right {
|
|||
|
|
width: 78.8%;
|
|||
|
|
height: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-left: 1px solid @borderColor;
|
|||
|
|
padding: 10px 0 16px 20px;
|
|||
|
|
|
|||
|
|
.tab_btn_wrap {
|
|||
|
|
margin-top: 15px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// .filter-tree {
|
|||
|
|
// color: #606266;
|
|||
|
|
// }
|
|||
|
|
.custom-tree-node {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.stop{
|
|||
|
|
color: #FF0000;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|