gdy_pc_8/src/components/SelectExamine.vue

<template>
  <el-dialog append-to-body :title="title" :visible.sync="visible_" :close-on-click-modal="false" :before-close="close_before" width="1000px" top="5%">
    <div class="flex-box" style="border-bottom: 1px solid #f1f1f1;">
      <div class="left scroll-bar">
        <ul class="ul scroll-bar">
          <li class="flex-box-ce li" :class="[formData.cate_id == -1 ? 'isActiveLi' : '']" @click="activeLi({name:'全部分类',id:-1})">
            <div class="index-name font-flex-word"><i class="el-icon-s-help"></i> 全部分类</div>
            <div style="width: 14px;"></div>
          </li>
          <li class="flex-box-ce li" v-for="(item, index) in indexTypeList" :key="index" :class="[formData.cate_id == item.id ? 'isActiveLi' : '']" @click="activeLi(item, index)">
            <div class="index-name font-flex-word" v-if="item.id != 0">{{ item.name }}</div>
            <div class="index-name font-flex-word" v-else>
              <i class="el-icon-s-help"></i>
              {{ item.name }}
            </div>
          </li>
          <li class="flex-box-ce li" :class="[formData.cate_id == 0 ? 'isActiveLi' : '']" @click="activeLi({name:'未分类',id:0})">
            <div class="index-name font-flex-word">未分类</div>
            <div style="width: 14px;"></div>
          </li>
        </ul>
      </div>

      <div class="right scroll-bar">
        <div class="flex-box-end">
            <el-input type="text" prefix-icon="el-icon-search" class="search" clearable  style="width: 250px;margin-bottom: 10px;" placeholder="输入关键字搜索" v-model.trim="formData.keyword"/>
        </div>
        <div style="height: 430px;overflow-y: scroll;" class="scroll-bar">
          <div class="flex-box-ce" style="background-color: #ECF5FF;padding: 10px 0;border-bottom: 1px solid #EBEEF5;width:660px">
            <div style="width: 40px;"></div>
            <div class="flex-4">检查单名称</div>
            <div class="flex-1">所属分类</div>
            <div class="flex-1">总分/达标分</div>
          </div>
          <div class="flex-box-ce itemBox" v-for="(item, index) in list" :key="index"  style="width:660px" @click="handleSelectionChange(item.checked, item)">
            <div style="width: 40px;text-align: center;position: relative;">
              <el-checkbox :key="item.id" v-model="item.checked"></el-checkbox>
              <div style="width: 40px;height: 40px;position: absolute;top: -10px;z-index: 999;"></div>
            </div>
            <div class="flex-4">
              <el-tooltip v-if="item.name.length>100" class="item" effect="dark" :content="item.name" placement="bottom">
                <div class="content">{{ item.name }}</div>
              </el-tooltip>
              <div class="content" v-else>{{ item.name }}</div>
            </div>
            <div class="flex-1"><span>{{item.cate_name }}</span></div>
            <div class="flex-1"><span>{{item.total_point }}/{{ item.standard_point||item.total_point }}</span></div>
          </div>
          <NoData v-if="list.length==0"></NoData>
        </div>
      </div>

    </div>
    <el-pagination style="text-align: center;margin-top: 20px;" :current-page.sync="page" :page-sizes="[10, 20, 50, 100]"  layout="total,prev,pager,next,sizes" :total="total" @size-change="handleSizeChange"  @current-change="handleCurrentChange" :page-size="page_size"></el-pagination>

    <div slot="footer" class="flex-box-ce">
      <!-- <el-button type="danger" plain @click="empty">清空选择</el-button> -->
      <div class="flex-1"></div>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {_debounce} from '@/utils/auth';
export default {
  props: {
    title: {
      // 标题
      type: String,
      default: '选择检查单'
    },
    visible: {
      // 是否显示组件
      type: Boolean,
      default: false
    },
    id:[String,Number]
  },
  name: 'SelectExamine',
  data() {
    return {
      visible_: false,
      formData:{
        cate_id:-1,
        keyword:'',
        enable:-1,
      },
      selectItem:{},
      indexTypeList:[],
      list:[],
      selectId:0,
      page:1,
      page_size:10,
      total:0,
    };
  },
  watch: {
    visible(val) {
      this.visible_ = JSON.parse(JSON.stringify(val));
      if (val) {
        this.page=1;
        this.selectId=this.id;
        this.keyword='';
        this.getIndexType();
        this.getList();
      }
    },
    'formData.keyword': _debounce(function(val) {
        this.getList();
    })
  },
  methods: {
    handleSelectionChange(val, item) {
      if (!val) {
        this.list.forEach((e, index) => {
          e.checked = false;
        });
        item.checked = true;
        this.selectId=item.id;
      } else {
        item.checked = false;
        this.selectId='';
      }
      this.list = JSON.parse(JSON.stringify(this.list));
    },
    activeLi(item, index) {
      this.formData.cate_id = item.id;
      this.getList();
    },
    getIndexType(){
      this.$axiosUser('get', '/api/pro/sm/doc/cate').then(res => {
        let data = res.data.data.list || [];
        if (data.length > 0) {
          this.indexTypeList = data;
        }
      })
    },
    getList(is) {
      is? '':this.page=1;
      let data={
        page:this.page,
        page_size: this.page_size,
        cate_id:this.formData.cate_id, //否	String	单据所属分类
        enable:-1,
        keyword:this.formData.keyword, //关键字
      }
      this.loading=true;
      this.$axiosUser('get', '/api/pro/sm/doc', data).then(res => {
        let list=res.data.data.list||[];
        list.forEach(item=>{
          item.checked=false;
          if(this.selectId==item.id){
            item.checked=true;
          }
        })
        this.list=list;
        this.total=res.data.data.total
      }).finally(() => {
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.page_size = val;
      this.getList();
    },
    // 页面跳转
    handleCurrentChange(val) {
      this.page = val;
      this.getList(true);
    },
    close_before(done) {
      this.close();
      done();
    },
    close() {
      this.$emit('update:visible', false);
    },
    confirm() {
      this.selectItem={};
      this.list.forEach(item=>{
        if(item.checked){
          this.selectItem=item
        }
      })
      // if(!this.selectItem.id){
      //   this.$message.error('请选择检查单');
      //   return false;
      // }
      this.$emit('confirm', this.selectItem);
      this.close();
    }
  },
  created() {}
};
</script>

<style scoped lang="scss">
.itemBox {
  padding: 12px 0;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;

  cursor: pointer;
}
/deep/ .el-dialog__body {
  padding: 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
.option-box {
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f1;
}

.option-box button {
  margin-right: 16px;
}
.content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.5rem;
}
.left {
  padding: 0px 10px;
  width: 250px;
  height: 480px;
  overflow: scroll;
  border-right: 1px solid #f1f1f1;
}
.checkChild {
  background-color: #fbfdff;
  margin-left: 20px;
}
.el-icon-more {
  display: none;
}
.li {
  height: 53px;
  line-height: 53px;
  padding: 0 10px;
  border-bottom: 1px solid #f8f8f8;
  color: #777777;
  width: 100%;
}
.li:hover {
  background-color: #f5f7fa;
}
.li:hover .el-icon-more {
  display: block;
}
.main-left {
  width: 200px;
  margin-right: 20px;
  border: 1px solid #f1f1f1;
  border-radius: 3px;
  box-sizing: border-box;
}
.left-title {
  height: 53px;
  line-height: 53px;
  padding: 0 10px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #f1f1f1;
  color: #222;
  font-size: 15px;
  font-weight: 600;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.index-name {
  width: 170px;
}
.ul {
  // max-height: calc(100vh - 330px);
  // overflow: auto;
  // width: 200px;
}
.isActiveLi {
  background-color: #f5f7fa;
  color: #409EFF !important;
  position: relative;
}
.isActiveLi .el-icon-more {
  display: block;
}
</style>