gjerp_ui/src/views/jhzxgl/yppFK.vue

<template>
  <el-container>
    <el-header style="width: 100%;height: 35px">
      <el-form ref="requestForm" :model="request" label-width="65px">
        <el-row>
          <el-col :span="3">
            <el-form-item label="船号:">
              <vxe-pulldown ref="xDown4" transfer >
                <template #default>
                  <vxe-input
                    v-model="request.dcCh"
                    placeholder="船号"
                    style="height: 28px;
                    line-height: 28px; width: 150px;"
                    suffix-icon="vxe-icon--search"
                    @keyup="keyupEvent4"
                    @focus="focusEvent4"
                  />
                </template>
                <template #dropdown>
                  <div class="my-dropdown  mytable " style="width: 250px">
                    <vxe-grid
                      highlight-hover-row
                      height="auto"
                      keep-source
                      :custom-config="{ storage: true }"
                      :data="projectData"
                      :columns="projectColumns"
                      @cell-click="cellClickEvent"
                      show-overflow
                    >
                      <template #wgbsEdit="{ row}">
                        <vxe-checkbox v-model="row.wgbs"  checked-value="Y" unchecked-value="N"   disabled ></vxe-checkbox>
                      </template>
                    </vxe-grid>
                  </div>
                </template>
              </vxe-pulldown>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="批量:">
              <el-input v-model="request.dcPl" type="search" placeholder="批量" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="分段:">
              <el-input v-model="request.dcFd" type="search" placeholder="分段" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="在建船只:" label-width="105px">
              <el-checkbox v-model="request.zjcz" type="search" placeholder="合同号" ></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="11" style="text-align: right">
            <el-button type="primary" @click="initList()">查询</el-button>
            <el-button type="success" @click="qtjc">齐套检查</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <Yppfk0 ref="yppfk0" />
  </el-container>
</template>

<script>
import {getCzplBase} from "@/api/sjzx/jcsj";
import YppTq from "@/views/jhzxgl/components/YppTq.vue";
import {getBfwz} from "@/api/jhzxgl/ypp";
import Yppfk0 from "@/views/jhzxgl/components/Yppfk0.vue";

export default {
  name: "Cgjhdh",
  components: {Yppfk0, YppTq},
  data() {
    return {
      yppTqShow:false,
      height: "500px",
      list:[],
      projectColumns: [
        {field: 'cbbm', title: '船号',width: 110},
        { field: 'wgbs', title: '完工标识', width: 80,
          slots:{
            default: 'wgbsEdit'
          },
        },
      ],
      qyList:[],
      dwList:[],
      bfwzList:[],
      projectData:[],
      request:{
        dcCh:'',
        dcPl:'',
        dcFd:'',
        zjcz:true
      },
    }
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.initProject()
    this.initBfwz()
  },
  methods: {
    qtjc(){
      this.$refs.yppfk0.qtjc()
    },
    initList(){
      this.$refs.yppfk0.initXqjh(this.request)
    },
    initBfwz(){
      getBfwz().then(res=>{
        this.bfwzList=res.data
        const _qyList=[]
        const _dwhList=[]
        const table=this.$refs.tableRef
        const qyColumn=table.getColumnByField('qy')
        const dwColumn=table.getColumnByField('dwh')
        this.bfwzList.forEach(item=>{
          _qyList.push({label:item.qy,value:item.qy})
          _dwhList.push({label:item.dwh,value:item.dwh,_parent:item.qy})
        })
        qyColumn.editRender.options=_qyList
        dwColumn.editRender.options=_dwhList
        this.qyList=_qyList;
        this.dwList=_dwhList
      })
    },
    initProject(){
      getCzplBase({}).then(res=>{
        this.projectData=res.data.cbbm
      })
    },
    cellClickEvent({row}){
      this.request.dcCh = row.cbbm
      this.$refs.xDown4.hidePanel()
    },
    focusEvent4(){
      this.$refs.xDown4.showPanel()
    },
    keyupEvent4(){
      if (this.request.dcCh) {
        this.projectData = this.projectData1.filter(row => row.cbbm.indexOf(this.request.dcCh.toUpperCase()) > -1)
      } else {
        this.projectData = this.projectData1.slice(0)
      }
    },
    getHeight() {
      this.height = window.innerHeight - 160;
    },
  }
};
</script>
<style lang="scss" scoped >
.el-header {
  margin: 0;
  padding: 5px 0;
  height: auto;
}
.el-container {
  padding: 0;
  margin: 0;
}
.el-main {
  padding: 0;
}
.el-col {
  padding: 0;
}
.el-aside {
  background: #fff;
  padding: 0;
}
.el-container {
  padding: 0;
}
.el-row {
  margin-bottom: 5px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.tableStyles {
  background: #0a76a4;
}
.my-dropdown {
  width: 450px;
  height: 250px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  font-size: 12px;
}
::v-deep .mytable .vxe-input {
  display: flex !important;
}
::v-deep .el-form-item {
  margin-bottom: 0px !important;
}

::v-deep .el-input{
  width: auto !important;
}
</style>