chenlu
2024-03-29 6c17e1f3da486ffd16b7237d9bc35a9bcbef5348
north-glass-erp/northglass-erp/src/views/mm/mainIngredientStock/CreateOutBound.vue
@@ -3,9 +3,27 @@
<script setup>
import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
import {onMounted, reactive, ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import {useRoute, useRouter} from "vue-router"
import request from "@/utils/request"
import deepClone from "@/utils/deepClone"
import VXETable from "vxe-table";
import useUserInfoStore from "@/stores/userInfo";
import {ElMessage} from "element-plus";
import {addListener,toolbarButtonClickEvent} from "@/hook/mouseMove";
import { useI18n } from 'vue-i18n'
import {changeFilterEvent,filterChanged} from "@/hook"
const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const userStore = useUserInfoStore()
const username = userStore.user.userName
const userid = userStore.user.userId
let produceList = ref([])
let cellArea = ref()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
@@ -20,10 +38,338 @@
  }
}
const hasDecimal=(value)=>{
  const regex=/\./ // 定义正则表达式,查找小数点
  return regex.test(value) //返回true/false
}
const hasDecimalhtml=(item,row)=>{
  let aa=item.split('.').length
  if (aa===2){
    return row[item.split('.')[0]][item.split('.')[1]]
  }else if(aa===3){
    return row[item.split('.')[0]][item.split('.')[1]][item.split('.')[2]]
  }
}
//定义接收加载表头下拉数据
const titleSelectJson = ref({
  outboundType:""
})
// 定义表头上传数据
let titleUploadData = ref({
  outboundType:'',
  materialOutboundId:'',
  materialRequisitionPersonnel:'',
  materialRequisitionTeam:'',
  orderId:'',
  materialRequisitionDate:'',
  reviewedState:'',
  reviewed:'',
  warehouseManager:userStore.user.userName
})
//筛选条件,有外键需要先定义明细里面的数据
let filterData = ref({
})
let BasicData = ref([])
let materialStore= ref([])
let arr = [
  {type:'expand',fixed:"left",slots: { content:'content' },width: '60'},
  {field: 'select',type: 'checkbox',fixed:"left", title: '选择', width: '80' },
  { type: 'seq',fixed:"left", title: '自序', width: '80' },
  {field: 'inventoryOrganization', width:'150', title: '库存组织', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged },
  {field: 'materialCode', width: '150',title: '物料编码', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
  {field: 'producer', width: '100',title: '产地', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
  {field: 'inventoryQuantity',width: '100', title: '库存数量', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
  {field: 'availableQuantity', width: '100',title: '可用库存', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
  {field: 'outboundQuantity', width:'150', title: '出库数量', sortable: true,editRender: { name: 'input', attrs: { placeholder: '' } }},
  {field: 'singlePieceArea', width: '100',title: '单片面积', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
  {field: 'dateOfManufacture',width: '100', title: '生产日期', sortable: true},
  {field: 'inventoryArea',width: '100', title: '库存区域', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod:filterChanged},
  {field: 'remarks',width: '80', title: '备注', sortable: true,editRender: { name: 'input', attrs: { placeholder: '' } }},
]
//页面第一次加载
request.get(`/BasicWarehouse/BasicWarehouseTypes/材料出库类型`).then((res) => {
  if(res.code==200){
    titleSelectJson.value=deepClone(res.data)
    const today = new Date
    today.setTime(today.getTime() + (15 * 24 * 60 * 60 * 1000))
    titleUploadData.value.materialRequisitionDate = today.getFullYear() +
        '-' + ("0" + (today.getMonth() + 1)).slice(-2)
        + '-' + ("0" + today.getDate()).slice(-2)
    getWork()
  }else{
    ElMessage.warning(res.msg)
  }
})
//列查询
const getWork = () => {
  request.get(`/BasicWarehouse/BasicWarehouseType/原片|辅料`).then((res) => {
    if(res.code==200){
      gridOptions.columns=[]
      BasicData.value = res.data
      //添加列
      gridOptions.columns=arr.slice()
      for (let i=0;i<BasicData.value.length;i++){
        let column={field: "json."+BasicData.value[i].OperateType,
          width: '150',title: BasicData.value[i].OperateTypeName,
          sortable: true,showOverflow:'ellipsis' ,
          filters:[{ data: '' }],
          slots: { filter: 'num1_filter' },
          filterMethod:filterChanged}
        gridOptions.columns.push(column)
      }
    }else{
      ElMessage.warning(res.msg)
    }
  })
}
const  number = ref();
onMounted(()=>{
  //启用表格拖动选中
  addListener(xGrid.value,gridOptions,cellArea.value)
  //出库新增
  const id = route.query.id
  if (typeof id !== 'undefined' && id !== null && id !== '' && id !== '\n' && id !== '\r'){
    filterData.value.stockId=id
    number.value=id
    console.log(filterData.value)
    //第一次调用
    request.post("/MaterialInventory/getSelectMaterialInventory/1/100",filterData.value).then((res) => {
      if(res.code==200){
        console.log(res.data.data)
        titleUploadData.value.warehouseManager=userStore.user.userName
        titleUploadData.value.outboundType = titleSelectJson.value.outboundType[0].operateTypeName
        materialStore.value=[]
        for (let i=0;i<res.data.data.length;i++){
          materialStore.value[i]=(res.data.data[i])
          materialStore.value[i].json=(JSON.parse(res.data.data[i].json))
        }
        produceList = deepClone(materialStore.value)
        xGrid.value.loadData(produceList)
        //禁用按钮
        gridOptions.toolbarConfig.buttons[1].disabled  = true
        gridOptions.toolbarConfig.buttons[2].disabled = true
        //显示复选框
        xGrid.value.showColumn("select")
        gridOptions.loading=false
      }else{
        ElMessage.warning(res.msg)
      }
    })
  }
//出库编辑
  const str = route.query.materialOutboundId
  if (typeof str != 'undefined' && str != null && str !== '' && str !== '\n' && str !== '\r'){
    filterData.value.materialOutboundId=str
    console.log(filterData.value)
    //第一次调用
    request.post("/MaterialInventory/getSelectMaterialOutbound/1/100",filterData.value).then((res) => {
      if(res.code==200){
        titleUploadData.value=deepClone(res.data.materialOutbound)
        //根据审核状态显示审核按钮或者是反审按钮
        console.log(res.data.data)
        if(titleUploadData.value.reviewedState!==0){
          gridOptions.toolbarConfig.buttons[1].disabled = true
          gridOptions.toolbarConfig.buttons[0].disabled = true
        }
        if(titleUploadData.value.reviewedState===0){
          gridOptions.toolbarConfig.buttons[2].disabled = true
        }
        materialStore.value=[]
        for (let i=0;i<res.data.data.length;i++){
          materialStore.value[i]=(res.data.data[i])
          materialStore.value[i].json=(JSON.parse(res.data.data[i].json))
        }
        produceList = deepClone(materialStore.value)
        xGrid.value.loadData(produceList)
        //隐藏复选框
        /*xGrid.value.hideColumn("select")
        gridOptions.loading=false*/
        xGrid.value.showColumn("select")
        gridOptions.loading=false
      }else{
        ElMessage.warning(res.msg)
      }
    })
  }
})
const gridEvents = {
  async toolbarButtonClick({code}) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'add': {
          const selectRecords = $grid.getCheckboxRecords()
          console.log(selectRecords)
          if (selectRecords.length === 0) {
            ElMessage.warning(t('productStock.unselectedData'))
            return
          }
          const errMap = await $grid.validate(selectRecords)
          if (errMap) {
            ElMessage.warning(t('productStock.dataVerificationFailed'))
            return
          }
          //表头数据校验
          const outboundType = titleUploadData.value.outboundType
          if(outboundType === null || outboundType === undefined || outboundType === ''){
            ElMessage.error("请选择出库类型")
            return
          }
          const materialRequisitionPersonnel = titleUploadData.value.materialRequisitionPersonnel
          if(materialRequisitionPersonnel === null || materialRequisitionPersonnel === undefined || materialRequisitionPersonnel === ''){
            ElMessage.error("请输入领料员")
            return
          }
          const materialRequisitionTeam = titleUploadData.value.materialRequisitionTeam
          if(materialRequisitionTeam === null || materialRequisitionTeam === undefined || materialRequisitionTeam === ''){
            ElMessage.error("请输入领料班组")
            return
          }
          const orderId = titleUploadData.value.orderId
          if(orderId === null || orderId === undefined || orderId === ''){
            ElMessage.error("请输入销售单号")
            return
          }
          let flowData = ref({
            materialOutboundDetail: selectRecords,
            title: titleUploadData.value,
            materialOutboundId: route.query.materialOutboundId
          })
          console.log(flowData)
          request.post("/MaterialInventory/saveMaterialOutbound", flowData.value).then((res) => {
            if(res.code==200){
              ElMessage.success('保存成功')
              router.push({path: '/main/ingredientsStock/MaterialOutbound', query:{random:Math.random()}})
            }else{
              ElMessage.warning(res.msg)
              router.push("/login")
            }
          })
          break
        }
        case 'toExamine': {
          let flowData = ref({
            materialOutboundId: route.query.materialOutboundId,
            reviewed:userStore.user.userName,
            type: 1
          })
          console.log(flowData.value)
          request.post("/MaterialInventory/updateMaterialOutboundToExamine", flowData.value).then((res) => {
            if (res.code == 200) {
              ElMessage.success(t('basicData.msg.ReviewSuccess'))
              router.push({path: '/main/ingredientsStock/MaterialOutbound', query:{random:Math.random()}})
            } else {
              ElMessage.warning(res.msg)
              router.push("/login")
            }
          })
          break
        }
        case 'CounterExamination': {
          let flowData = ref({
            materialOutboundId: route.query.materialOutboundId,
            type: 0
          })
          request.post("/MaterialInventory/updateMaterialOutboundToExamine", flowData.value).then((res) => {
            if (res.code == 200) {
              ElMessage.success(t('basicData.msg.cancelReviewSuccess'))
              router.push({path: '/main/ingredientsStock/MaterialOutbound', query:{random:Math.random()}})
            } else {
              ElMessage.warning(res.msg)
              router.push("/login")
            }
          })
          break
        }
      }
    }
  },
  menuClick ({ menu, row, column }) {
    const $grid = xGrid.value
    if ($grid) {
      switch (menu.code) {
        case 'copyChecked' :{
          let result = toolbarButtonClickEvent()
          if(result){
            const dataList = xGrid.value.getTableData().visibleData
            let firstVal=null;
            if(result.cell.indexOf('.')>-1){
              firstVal = eval("dataList["+result.start +"]."+result.cell)
            }else {
              firstVal=dataList[result.start][result.cell];
            }
            dataList.forEach((item,index) =>{
              if(index>=result.start && index<=result.end){
                if(result.cell.indexOf('.')>-1){
                  const  columnArr = result.cell.split('.')
                  item[columnArr[0]][columnArr[1]]  = firstVal
                }else{
                  item[result.cell]  = firstVal
                }
              }
            })
          }
          break
        }
      }
    }
  }
}
//子组件接收参数
const  xGrid = ref();
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
@@ -42,7 +388,7 @@
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
    //remote: true
  },
  customConfig: {
    storage: true
@@ -53,36 +399,17 @@
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: '50'},
    { type: 'checkbox',fixed:"left", title: '选择', width: '80' },
    // { type: 'seq',fixed:"left", title: '自序', width: '80' },
    {title: '操作', width: '110', slots: { default: 'button_slot' },fixed:"left"},
    {field: 'MaterialCode', width: '150',title: '物料编码', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'MaterialName', width: '120',title: '物料名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'InventoryCount',width: '100', title: '库存数量', sortable: true},
    {field: 'OutNum', width:'150', title: '出库数量', sortable: true,editRender: { name: 'input', attrs: { placeholder: '' } } },
    {field: 'Origin', width: '100',title: '产地', sortable: true},
    {field: 'Width', width: '80',title: '宽度', sortable: true},
    {field: 'Height',width: '100', title: '高度', sortable: true},
    {field: 'Thickness', width: '100',title: '厚度', sortable: true},
    {field: 'MainUnit',width: '100', title: '单位', sortable: true},
    {field: 'SafetyStock', width: '100',title: '单片面积', sortable: true},
    {field: 'AvailableInventory', width: '100',title: '换算率', sortable: true},
    {field: 'UnclaimedQuantity',width: '140', title: '未领取数量', sortable: true},
    {field: 'TotalArea',width: '100', title: '库区', sortable: true,editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'ProductionDate',width: '100', title: '库位', sortable: true,editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'ShelfLife',width: '100', title: '工程单号', sortable: true},
    {field: 'LocationNumber',width: '100', title: '生产日期', sortable: true},
    {field: 'remark',width: '80', title: '备注', sortable: true,editRender: { name: 'input', attrs: { placeholder: '' } }},
  ],//表头按钮
  toolbarConfig: {
    buttons: [
        {'name': '提交',status:'primary'},
        {'name': '审核',status:'primary', 'disabled': true}
      {'code': 'add', 'name': t('basicData.save'),status: 'primary',icon: 'vxe-icon-save'},
      {'code': 'toExamine', 'name': t('basicData.review'),status: 'primary'},
      {'code': 'CounterExamination', 'name': t('basicData.cancelReview'),status: 'primary'}
    ],
    import: false,
    /*import: false,
    export: true,
    print: true,
    print: true,*/
    zoom: true,
    custom: true
  },
@@ -106,86 +433,73 @@
})
/*数据校验*/
const validRules = ref({
  outboundQuantity: [{
    validator (e) {
      if (e.row.outboundQuantity > e.row.availableQuantity) {
        return new Error("出库数量不能大于可用数量")
      }else if (e.row.outboundQuantity ==="") {
        return new Error("出库数量不能为空或者是等于0")
      }
      const regex = /^[1-9]\d*$/g
      if ( !regex.test(e.row.outboundQuantity) ) {
        return new Error(t('productStock.pleaseEnterAPositiveInteger'))
      }
    }
  }]
})
</script>
<template>
  <el-row gutter="10" >
    <el-col :span="2.5">
      <div class="label-text">领料日期</div>
    </el-col>
    <el-col :span="4">
      <el-date-picker
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width: 200px;height: 30px"
      />
    </el-col>
    <el-col :span="4">
    <el-input v-model="productName" placeholder="请输入领料员名称" style="width: 200px; height: 30px;" />
    </el-col>
    <el-col :span="4">
    <el-input v-model="banzu" placeholder="请输入领料班组" style="width: 200px; height: 30px;" />
    </el-col>
    <el-col :span="7">
    仓管员<el-input v-model="banzu" placeholder="王翠兰" style="width: 200px; height: 30px;" />
    </el-col>
<!--    <el-col span="4">-->
<!--      <el-button id="searchButton" type="primary" :icon="Search">查询报表</el-button>-->
<!--    </el-col>-->
  </el-row>
  <div class="main-div">
  <div class="order-primary" style="background-color: white">
    <el-row>
      <el-col  :span="2"><el-text>领料日期:</el-text></el-col>
      <el-col  :span="3"><el-input  v-model="titleUploadData.materialRequisitionDate" :readonly="true" ></el-input></el-col>
      <el-col  :span="2"><el-text>领料员:</el-text></el-col>
      <el-col  :span="3"><el-input v-model="titleUploadData.materialRequisitionPersonnel" /></el-col>
      <el-col  :span="2"><el-text>领料班组:</el-text></el-col>
      <el-col  :span="3"><el-input v-model="titleUploadData.materialRequisitionTeam" /></el-col>
  <el-row gutter="10" >
    <el-col :span="2.5">
      <div class="label-text">库存组织</div>
    </el-col>
    <el-col :span="4">
                  <el-dropdown>
                    <el-button type="primary">
                      请选择库存组织<el-icon class="el-icon--right" style="width: 66px;height: 30px"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>人工库</el-dropdown-item>
                        <el-dropdown-item>计划库</el-dropdown-item>
                        <el-dropdown-item>自动化库</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </el-col>
    </el-row>
    <el-row>
      <el-col  :span="2"><el-text>出库类型:</el-text></el-col>
      <el-col  :span="3">
        <el-select v-model="titleUploadData.outboundType"  clearable placeholder=""  >
          <el-option
              v-for="item in titleSelectJson['outboundType']"
              :key="item.id"
              :label="item.operateTypeName"
              :value="item.operateTypeName"
          />
        </el-select>
      </el-col>
      <el-col  :span="2"><el-text>销售单号:</el-text></el-col>
      <el-col  :span="3"><el-input v-model="titleUploadData.orderId" /></el-col>
      <el-col  :span="2"><el-text>仓管员:</el-text></el-col>
      <el-col  :span="3"><el-input v-model="titleUploadData.warehouseManager" :readonly="true" /></el-col>
    <el-col :span="4">
      <el-dropdown>
        <el-button type="primary">
          请选择出库类型<el-icon class="el-icon--right" style="width:66px;"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>标准出库</el-dropdown-item>
            <el-dropdown-item>补单领料</el-dropdown-item>
            <el-dropdown-item>返工领料</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
    <el-col :span="12">
      <el-input v-model="banzu" placeholder="请输入销售单号" style="width: 200px; height: 30px;" />
    </el-col>
<!--    <el-col span="4">-->
<!--      <el-button id="searchButton" type="primary" :icon="Search">提交</el-button>-->
<!--    </el-col>-->
    <!--    <el-col span="4">-->
    <!--      <el-button id="searchButton" type="primary" :icon="Search">查询报表</el-button>-->
    <!--    </el-col>-->
  </el-row>
    </el-row>
  </div>
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"
        :edit-rules="validRules"
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
@@ -216,11 +530,35 @@
    </vxe-grid>
  </div>
  </div>
</template>
<style scoped>
.main-div-customer{
  width: 99%;
.main-div {
  width: 100%;
  height: 100%;
}
.el-col{
  border: #181818 1px solid;
}
:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: default;
  border: none !important;
  background-color: transparent;
}
.order-primary{
  width: 100%;
}
.main-div-customer{
  width: 100%;
  height: 70%;
}
.vxe-grid {
  /* 禁用浏览器默认选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>