gjerp_ui/src/views/jhzxgl/yppGL.vue

<template>
  <el-container>
    <el-header style="width: 100%">
      <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-select v-model="request.qy" placeholder="区域" clearable>
                <el-option
                  v-for="item in qyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="垛位:">
              <el-select v-model="request.dwh" placeholder="垛位" clearable>
                <el-option
                  v-for="item in dwList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </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="primary" @click="tq">提取</el-button>
            <el-button type="success" @click="save">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-container style="padding-top: 10px">
      <el-container>
        <el-main>
          <div class="mytable">
            <vxe-grid
              id="id"
              border
              ref="tableRef"
              resizable
              keep-source
              :height="height"
              :auto-resize="true"
              :columns="tableColumn"
              :data="list"
              :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
              :custom-config="{ storage: true }"
              :scroll-y="{ enabled: true }"
              highlight-hover-row
            >
            </vxe-grid>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <YppTq ref="yppTqRef" @add="add" />
  </el-container>
</template>

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

export default {
  name: "Cgjhdh",
  components: {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:'',
        dwh:'',
        qy:'',
        zjcz:true
      },
      tableColumn: [
        {type: "seq", width: "50", title: "序号", align: "center", fixed: "left",},
        { field: 'dcCh', title: '船只', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcPl', title: '批量', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcFd', title: '分段号', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcTh', title: '图号', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcZl', title: '组立', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcTz', title: '特征', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcYj', title: '依据', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcYs', title: '页数', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcPb', title: '拼板', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcLph', title: '炉批号', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcTpbh', title: '托盘编号', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'dcTpmc', title: '托盘名称', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'jldw1', title: '单价重量计量单位', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'wpmc', title: '物品名称', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'wpgg', title: '规格', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'wpxh', title: '材质', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'qy', title: '区域', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
          editRender:{name:'$select',options:[],props:{clearable:true},events:{change:this.bfwzChanged}}
        },
        { field: 'dwh', title: '垛位号', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
          editRender:{name:'$select',options:[],props:{clearable:true},events:{change:this.bfwzChanged}}
        },
        { field: 'wpjb', title: '物品级别', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'wpflm', title: '物品分类', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'abclx', title: 'ABC分类', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'gzlx', title: '加工进度', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'ylzd1', title: '配套表类型', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'lcm1', title: '流程码', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'zt', title: '状态', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
        { field: 'tpxx', title: '托盘信息', width: 120,align: "center",
          filters: [{ data: { checks: [], sVal: '', sMenu: '', fType1: '', fVal1: '', fMode: 'and', fType2: '', fVal2: '' } }],
          filterRender: { name: 'FilterCombination', },
        },
      ],
    }
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.initProject()
    this.initBfwz()
  },
  methods: {
    save(){
      const {insertRecords,updateRecords}=this.$refs.tableRef.getRecordset()
      const list=[...insertRecords,...updateRecords]
      if (list.length>0){
        for (const item of list) {
          if (!item.dwh){
            this.$message.error('请选择摆放位置');
            return;
          }
        }
        saveDmppxxb(list).then(res=>{
          this.$message.success('保存成功')
          this.$refs.tableRef.reloadData(list)
        })
      }
    },
    bfwzChanged({row}){
      checkBfwz([row]).then(res=>{
        if (!res.data.success){
          this.$message.warning(res.message)
        }
      })
    },
    add(list){
      this.$refs.tableRef.insertAt(list)
    },
    initList(){
      if (this.request.dcCh === '') {
        this.$message.warning('选择船号')
        return
      }
      getDmppxxbList(this.request).then(res=>{
        this.list=res.data
      })
    },
    tq(){
      this.$refs.yppTqRef.show()
    },
    initBfwz(){
      getBfwz().then(res=>{
        this.bfwzList=this.groupBy(res.data,(item)=>{
          return item.qy
        })
        console.log(this.bfwzList)
        const _qyList=[]
        const _dwhList=[]
        const table=this.$refs.tableRef
        const qyColumn=table.getColumnByField('qy')
        const dwColumn=table.getColumnByField('dwh')
        Object.keys(this.bfwzList).forEach(key=>{
          const list=this.bfwzList[key];
          const _key=key.replaceAll('"','');
          _qyList.push({label:_key,value:_key})
          list.forEach(item=>{
            _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
      })
    },
    groupBy(obj,fn){
      const groups={};
      obj.forEach(o=>{
        const group = JSON.stringify(fn(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
      })
      return groups;
    },
    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>