zhgdyun/src/views/projectFront/quality/criterionModule/qualityProblemBank.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>