441 lines
12 KiB
Vue
441 lines
12 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="请输入检查项名称"
|
||
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)"
|
||
v-permission="{key: 'criterion_stop_open', menuPath: '/project/quality/criterion'}"
|
||
>
|
||
{{ $t('message.quality.click')
|
||
}}{{ $t('message.quality.startUsing') }}
|
||
</el-button>
|
||
<el-button
|
||
v-else
|
||
type="text"
|
||
size="mini"
|
||
@click.stop="() => singleEditState(node, data, 1)"
|
||
v-permission="{key: 'criterion_stop_open', menuPath: '/project/quality/criterion'}"
|
||
>
|
||
{{ $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=" 问题描述：">
|
||
<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
|
||
align="center"
|
||
prop="name"
|
||
:label="$t('message.quality.problemDescription')"
|
||
>
|
||
<template slot-scope="scope">{{ scope.row.content }}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="createTime"
|
||
:label="$t('message.quality.creationTime')"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="remark"
|
||
:label="$t('message.quality.rectificationRequest')"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="changeLimit"
|
||
:label="$t('message.quality.rectificationTime')"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
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
|
||
v-permission="{key: 'criterions_stop_open', menuPath: '/project/quality/criterion'}"
|
||
type="primary"
|
||
size="small"
|
||
:disabled="showBatch"
|
||
@click="editState(0)"
|
||
>{{
|
||
$t('message.quality.batch') + $t('message.quality.startUsing')
|
||
}}</el-button
|
||
>
|
||
<el-button
|
||
v-permission="{key: 'criterions_stop_open', menuPath: '/project/quality/criterion'}"
|
||
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;
|
||
}
|
||
}
|
||
|
||
|
||
.el-button--text{
|
||
padding-right: 10px;
|
||
}
|
||
</style> |