gjerp_ui/src/views/jhzx/qfzxGL.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"
                      :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="zx">执行</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <Yppfk0 ref="yppfk0" />
    <QfxqzxPrint ref="qfxqzxprintRef" v-show="printCompShow" @showPrintComp="showPrintComp" />
  </el-container>
</template>

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

export default {
  name: "Cgjhdh",
  components: {QfxqzxPrint, Yppfk0},
  data() {
    return {
      printCompShow:false,
      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,
        zt1:'01'
      },
    }
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.initProject()
  },
  methods: {
    zx(){
      const data=this.$refs.yppfk0.getSelectQfxq();
      if (data.length==0){
        this.$message.warning('请选择待执行的数据');
        return;
      }
      yppZx(data).then(res=>{
        this.$refs.qfxqzxprintRef.show(res.data)
      })
    },
    showPrintComp(){
      this.printCompShow=true
      setTimeout(()=>{
        this.$print(this.$refs.qfxqzxprintRef)
        this.printCompShow=false
      },500)
    },
    initList(){
      this.$refs.yppfk0.initXqjh(this.request)
    },
    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>