cy_web/src/views/warehousing/otherStore/index.vue

<template>
  <div class="app-container">
    <div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="入库仓库">
          <el-select
            style="width: 500px"
            v-model="form.warehouseNo"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in WarehousingList"
              :key="item.id"
              :label="item.branchName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物料信息">
          <div v-if="chooselist.length>0">
            <div v-for="(item,index) in chooselist" :key="index" style="margin-top: 10px">
              <span>{{ item.goodName+'-'+item.goodsNo+'-'+item.unitMsr }}</span>
              <el-input v-model="item.qty" style="width: 100px;margin-left: 50px" placeholder="入库数量"></el-input>
            </div>
          </div>
          <el-button style="margin-top: 20px" @click="chooseGoods()">选择物料</el-button>
        </el-form-item>
        <el-form-item label="容器编码">
          <el-input style="width: 500px" v-model="form.containerNo" placeholder="请扫描或录入容器编码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认入库</el-button>
          <el-button @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--物料选择-->
    <el-dialog
      title="选择物料"
      :visible.sync="dialogVisible"
      width="50%">
      <div style="display: flex">
        <div>
          <el-tree :data="classifyList"
                   :props="defaultProps"
                   default-expand-all
                   @node-click="handleNodeClick"
                   highlight-current
          ></el-tree>
        </div>
        <div style="margin-left: 50px">
          <div class="search-box customer-search">
            <el-form
              :inline="true"
              :model="searchForm"
              ref="searchForm"
            >
              <el-form-item
                prop="orderNo"
              >
                <el-input
                  v-model="searchForm.goodNo"
                  placeholder="请输入物料编码"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item
                prop="orderNo"
              >
                <el-input
                  v-model="searchForm.goodName"
                  placeholder="请输入物料名称"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item
                prop="orderNo"
              >
                <el-input
                  v-model="searchForm.mnemonic"
                  placeholder="请输入助记码"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item style="margin-left: 15px">
                <el-button style="margin-left: 10px" size="small" type="primary" @click="searchList()">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div
            class="layout-full"
            style="padding-top: 42px"
          >
            <heavy-table
              :data="tableData"
              :tableProps="tableProps"
              :config="config"
              :loading="loading"
              @current-change="queryTable"
              :paging="paging"
              @handleselection="handleselection"
            >
              <template v-slot:errMsg="scope">
                {{
                  scope.row.errMsg === "ERROR"
                    ? scope.row.errMsg + "?"
                    : scope.row.errMsg
                }}
              </template>
            </heavy-table>

          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
<!--        <el-button>已选：D23.145.36.7 钢管外丝1寸；D29.182.12.8 回炉料3#</el-button>-->
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="choose()">确认选择</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {dealEmptyQueryCondition, getDictLabel} from "@/utils";
import {getBranchList, InitInOrder} from "@/api/system/branch";
import {getGoods} from "@/api/basicData/goods";
export default {
  name: "index",
  dicts: ["good_class"],
  data() {
    const _that=this
    return {
      form:{},
      dialogVisible: false,
      searchForm:{

      },
      tableData: [
        {
          goodNo:1,
          goodName:'shh'
        },
        {
          goodNo:2,
          goodName:'cdgf'
        }],
      tableProps:{},
      config: [
        // 表头数据
        { label: "复选框", type: "selection", prop: "selection", istrue: true },
        {
          label: '物料编号',
          prop: 'goodNo',
          width: 160,
          istrue: true
        },
        {
          label: '物料名称',
          prop: 'goodName',
          width: 150,
          istrue: true
        },
        {
          label: '规格',
          prop: 'specifications',
          istrue: true
        },
        // {
        //   label: '型号',
        //   prop: '',
        //   istrue: true
        // },
        {
          label: '所属分类',
          prop: 'classify',
          istrue: true,
          filter(row, value) {
            return getDictLabel(value, _that.dict.type.good_class);
          },
        },
      ],
      loading: false,
      paging: {
        page: 1, // 当前页
        size: 10, // 页面大小
        total: 0
      },
      WarehousingList:[],
      handleSelect:[],
      chooselist:[],
      classifyList:[{
        label: '物料分类',
        children: []
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    };
  },
  mounted() {
    // 物料分类的树结构
    this.getDicts("good_class").then((res)=>{
      res.data.forEach((item) => {
          let newItem = {
            label: item.dictLabel,
            value: item.dictValue
          };
          this.classifyList[0].children.push(newItem);
      })
    })
    this.getBranchList()
    this.queryTable()
  },
  methods: {
    //物料分类点击某个（树）
    handleNodeClick(data) {
      this.searchForm.classify=data.value
      this.paging.page=1
      this.queryTable()
    },
    // 仓库列表
    getBranchList(){
      getBranchList().then((res)=>{
        this.WarehousingList=res.rows
      })
    },
    // 物料列表
    async queryTable() {
      this.loading = true
      const request = {
        ...this.searchForm,
        pageSize: this.paging.size,
        pageNum: this.paging.page
      }
      dealEmptyQueryCondition(request)
      const { rows, total } = await getGoods(request)
      this.tableData = rows
      this.paging.total = total
      this.loading = false
    },
    // 确定入库
    onSubmit(){
      if(!this.form.warehouseNo){
        this.$message.error('请选择入库仓库！')
        return;
      }
      if(this.chooselist.length==0){
        this.$message.error('请选择物料！')
        return;
      }
      if(!this.form.containerNo){
        this.$message.error('请输入容器编码！')
        return;
      }
      const obj={
        syncType:"A",
        orderType:11,
        orderDate:'2024-05-30',
        containerNo:this.form.containerNo,
        detail:this.chooselist,
      }
      InitInOrder(obj).then((res)=>{
        if(res.code==200){
          this.$message.success('入库成功！')
          this.reset()
        }
      })
    },
    // 重置
    reset(){
      this.form={}
      this.chooselist=[]
    },
    // 复选框
    handleselection(row){
      this.handleSelect = row
    },
    chooseGoods(){
      if(!this.form.warehouseNo){
        this.$message.error('请选择入库仓库！')
        return;
      }
      this.dialogVisible = true
    },
    // 选择物料
    choose(){
      this.chooselist=[]
      this.handleSelect.forEach((item)=>{
        let newItem={
          lineId:0,
          goodsNo:item.goodNo,
          goodName:item.goodName,
          unitMsr:item.specifications,
          warehouseNo:this.form.warehouseNo,
        }
        this.chooselist.push(newItem)
      })
      this.searchForm={}
      this.dialogVisible = false
    },
    // 取消选择
    cancel(){
      this.searchForm={}
      this.dialogVisible = false
    },
    // 物料列表条件查询
    searchList(){
      this.paging.page=1
      this.queryTable()
    }
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>