kams4_test_web/src/views/business-asn/asn/viewAsnDetail.vue

<template>
  <div class="app-container">

    <!--     卡片头   -->
    <el-dialog :visible.sync="dialogInsertAsn"
               center
               top="0.5vh"
               :fullscreen="fullscreen"
               width="80%"
               :before-close="handleClose"
    >

      <template #title>
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <span style="flex: 1; text-align: center;">新增入库单</span>
          <div>
            <i class="el-icon-full-screen" @click="fullscreen = !fullscreen"
               style="cursor: pointer; margin-right: 20px;font-size: 13px;"></i>
          </div>
        </div>
      </template>
      <el-form ref="asnFromRes" :model="asnFrom" :rules="rules" size="small" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="单据类型" prop="billType">
              <el-select v-model="asnFrom.billType" value-key="id"
                         placeholder="请选择单据类型" clearable style="width: 100%"
              >
                <el-option
                  v-for="item in billTypeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                />
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单日期" prop="orderDate">
              <el-date-picker
                style="width: 100%"
                v-model="asnFrom.orderDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="凭证号" prop="code">
              <el-input v-model="asnFrom.code"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单数量">
              <el-input :disabled="true" v-model.number="asnFrom.orderQuantity"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注:">
          <el-input v-model="asnFrom.description" type="textarea" :autosize="{ minRows: 3, maxRows: 5}"
                    placeholder="请输入备注"
          />
        </el-form-item>
        <el-button type="primary" size="small" @click="submitFromAsn(asnFrom)">提交
        </el-button>
      </el-form>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="订单明细信息" name="first">
          <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
          <crudOperation :permission="permission" :tableKey="this.$options.name">
            <el-button
              slot="right"
              class="filter-item"
              type="primary"
              size="mini"
              @click="rkAndQxButtonM(1)"
              :loading="logining1"
            >
              整单入库
            </el-button>
            <el-button
              slot="right"
              class="filter-item"
              type="primary"
              size="mini"
              :disabled="!(crud.selections.length === 1)"
              @click="dyrkM(crud.selections)"
              :loading="logining2"
            >
              单一入库
            </el-button>
            <el-button
              slot="right"
              class="filter-item"
              type="primary"
              size="mini"
              :disabled="crud.selections.length === 0"
              @click="qxshM(crud.selections)"
              :loading="logining3"
            >
              取消收货
            </el-button>
            <el-upload
              class="upload-demo"
              ref="upload"
              slot='right'
              style="float: right;padding-left: 5px"
              :action="baseApi+'/api/importData/importAsnDetail?asnId='+this.asnId"
              :file-list="fileList"
              :on-success=handleSuccess
              :on-error="handleError"
              :headers="headers"
              :show-file-list="true">
              <el-button size="mini" type="success" icon="el-icon-upload">导入</el-button>
            </el-upload>
          </crudOperation>
          <!--表格渲染-->
          <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                    @selection-change="crud.selectionChangeHandler" height="35vh"
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="item.code " label="品番号" width="100px">
              <template slot-scope="scope">
                <div>{{ scope.row.item == null ? '' : scope.row.item.code }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="item.name" label="品番" width="100px">
              <template slot-scope="scope">
                <div>{{ scope.row.item == null ? '' : scope.row.item.name }}</div>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="item.unit" label="单位">
              <template slot-scope="scope">
                <div>{{ scope.row.item == null ? '' : scope.row.item.unit }}</div>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="orderQty" label="订单数量">
              <template slot-scope="scope">
                <div>{{ scope.row == null ? '' : scope.row.orderQty }}</div>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="receivedQty" label="收货数量">
              <template slot-scope="scope">
                <div>{{ scope.row == null ? '' : scope.row.receivedQty }}</div>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="point.code" label="库位">
              <template slot-scope="scope">
                <div>{{ scope.row.point == null ? '' : scope.row.point.code }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="propC1" label="批次号">
              <template slot-scope="scope">
                <div>{{ scope.row.propC1 }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="propC2" label="序列号"/>
            <el-table-column prop="propD1" label="生产日期">
              <template slot-scope="scope">
                <div>{{ scope.row.propD1 }}</div>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="remark" label="备注">
              <template slot-scope="scope">
                <div>{{ scope.row.remark }}</div>
              </template>
            </el-table-column>
            <el-table-column v-if="checkPer(['admin','asnDetail:edit','asnDetail:del'])" label="操作"
                             width="150px"
                             align="center"
            >
              <template slot-scope="scope">
                <udOperation
                  :data="scope.row"
                  :permission="permission"
                />
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <div style="float: right">
            <pagination/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>


    <!--   单一入库   -->
    <el-dialog title="单一入库" :visible.sync="dyrkTf" width="500px">
      <!--        <el-dialog-->
      <!--          width="30%"-->
      <!--          title="内层 Dialog"-->
      <!--          :visible.sync="innerVisible"-->
      <!--          append-to-body>-->
      <!--        </el-dialog>-->
      <el-form ref="formdyrk" :model="asnDetailButton" label-width="80px">
        <el-form-item label="数量" prop="oneRNumber" :rules="[
      { required: true, message: '数量不能为空'},
      { type: 'number', message: '数量必须为数字值'}
        ]"
        >
          <el-input v-model.number="asnDetailButton.oneRNumber" placeholder="请输入数量" style="width: 250px"/>
        </el-form-item>
        <el-form-item label="库位" prop="oneRPoint" :rules="[
           { required: true, message: '库位不能为空'}
        ]"
        >
          <el-select v-model="asnDetailButton.oneRPoint" value-key="id" placeholder="请选择库位"
                     style="width: 250px">
            <el-option
              v-for="(item,index) in pointOptions"
              :key="item.id+''+item.code"
              :label="item.code"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dyrkTf = false">取 消</el-button>
        <el-button type="primary" @click="rkAndQxButtonM(2)">确认</el-button>
      </div>
    </el-dialog>
    <!--表单组件-->
    <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
               :title="crud.status.title" width="400px"
    >
      <el-form ref="form" :rules="asnDetailRules" :model="form" size="small" label-width="80px"
               style="height: 200px"
      >

        <el-form-item label="物料" prop="item" style="float: left">
          <el-select v-model="form.item" value-key="id" filterable placeholder="请选择品番" style="width: 200px;"
                     @change="getPointList(form.item,$event.code,asn)"
                     clearable
          >
            <el-option
              v-for="item in itemOptions"
              :key="item.id"
              :label="item.code"
              :value="item"
            >
              <span style="float: left">{{ item.code }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单数量" prop="orderQty" style="float: left">
          <el-input v-model="form.orderQty" style="width: 200px;"/>
        </el-form-item>
        <el-form-item v-if="pointTF" label="库位" prop="point" style="float: left">
          <el-select v-model="form.point" value-key="id" filterable placeholder="请选择库位" clearable
                     style="width: 200px;"
          >
            <el-option
              v-for="item in pointOptions"
              :key="item.id"
              :label="item.code"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="viewPropC1" label="批次号" prop="propC1" style="float: left">
          <el-input v-model="form.propC1" style="width: 200px;"/>
        </el-form-item>
        <el-form-item v-if="viewPropC2" label="序列号" prop="propC2" style="float: left">
          <el-input v-model="form.propC2" style="width: 200px;"/>
        </el-form-item>

        <el-form-item label="备注" prop="remark" style="float: left">
          <el-input type="textarea" :rows="2" v-model="form.remark" style="width: 200px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudAsnDetail, {rkAndQxButton} from '@/api/asnDetail'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation.vue'
import crudOperation from '@crud/CRUD.operation.vue'
import udOperation from '@crud/UD.operation.vue'
import pagination from '@crud/Pagination.vue'
import {queryItemAll} from '@/api/item'
import Search from '@/views/monitor/log/search.vue'
import AsnTask from '@/views/business-asn/asnDetail/viewAsnTask.vue'
import DateRangePicker from '@/components/DateRangePicker/index.vue'
import {getToken} from '@/utils/auth'
import {queryPointList} from '@/api/point'
import {getIdByAsn} from '@/api/asn'
import {getAreas, queryAreaList} from '@/api/area'
import {getBillTypes} from '@/api/billType'
import crudAsn from '@/api/asn'
import {queryBomAccountList} from '@/api/bomAccount'
import {mapGetters} from "vuex";


const defaultForm = {
  id: null,
  asn: null,
  item: null,
  stock: null,
  lineNo: null,
  po: null,
  status: 'OPEN',
  point: null,
  orderQty: 0,
  receivedQty: 0,
  moveQty: 0,
  putQty: 0,
  weight: 0,
  volume: 0,
  remark: null,
  propC1: null,
  propC2: null,
  propC3: null,
  propC4: null,
  propC5: null,
  propC6: null,
  propD1: null,
  propD2: null,
  deptId: null,
  sourceName: null,
  sourceId: null,
  createBy: null,
  updateBy: null,
  createTime: null,
  updateTime: null
}
const asnQuery = {
  asnId: 0
}
export default {
  name: 'viewAsnDetail',
  components: {
    DateRangePicker,
    AsnTask,
    Search,
    pagination,
    crudOperation,
    rrOperation,
    udOperation
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['asn_status'],
  cruds() {
    return CRUD({
      title: '收货数据',
      url: 'api/asnDetail',
      idField: 'id',
      query: {asnId: this.asnFrom == null ? 0 : this.asnFrom.id},
      sort: 'id,desc',
      crudMethod: {...crudAsnDetail},
      optShow: {
        add: true,
        edit: false,
        del: true,
        reset: false,
        download: false
      }
    })
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  data() {
    return {
      fullscreen: false,
      activeName: 'first',
      dialogInsertAsn: false,
      isResizing: false,
      initialWidth: 0,
      initialHeight: 0,
      initialX: 0,
      initialY: 0,
      fileList: [],
      headers: {'Authorization': getToken()},
      permission: {
        add: ['admin', 'asnDetail:add'],
        edit: ['admin', 'asnDetail:edit'],
        del: ['admin', 'asnDetail:del']
      },
      rules: {
        area: [
          {required: true, message: '出库库区不能为空', trigger: 'blur'}
        ],
        orderDate: [{
          required: true, message: '订单日期不能为空', trigger: 'blur'
        }],
        billType: [{
          required: true, message: '单据类型不能为空', trigger: 'blur'
        }],
        code: [{
          required: true, message: '凭证号不能为空', trigger: 'blur'
        }]
      },
      asnDetailRules: {
        item: [
          {required: true, message: '物料不能为空', trigger: 'blur'}
        ],
        orderQty: [
          {required: true, message: '订单数量不能为空', trigger: 'blur'}
        ]
        // point: [
        //   { required: true, message: '库位不能为空', trigger: 'blur' }
        // ]
      },
      //下拉物料
      itemOptions: [],
      //下拉点位
      pointOptions: [],
      pointOption2: [],
      //下拉库区
      areaOptions: [],
      //下拉类型
      billTypeOptions: [],
      // 新增主表
      asnFrom: {
        id: null,
        code: null,
        area: null,
        status: 'OPEN',
        cusCode: null,
        relatedBill1: null,
        relatedBill2: null,
        relatedBill3: null,
        orderDate: null,
        estimateDate: null,
        receivedDate: null,
        fromName: null,
        fromAddress: null,
        fromMan: null,
        fromTel: null,
        orderQuantity: 0,
        receivedQuantity: 0,
        putawayQuantity: 0,
        vehicle: null,
        billType: null,
        dept: null,
        description: null,
        createBy: null,
        updateBy: null,
        createTime: null,
        updateTime: null
      },
      detailId: 0,
      //主id
      asnId: 0,
      asn: {},
      asnDetailButton: {
        button: 0,
        id: 0,
        oneRNumber: 0,
        oneRPoint: {},
        asnDetailData: {},
        asnDetailDataS: []
      },
      dyrkTf: false,
      logining1: false,
      logining2: false,
      logining3: false,
      pointTF: false,
      viewPropC1: false,
      viewPropC2: false,
    }
  },
  // beforeDestroy() {    //页面关闭时清除定时器
  //   clearInterval(this.clearTimeSet);
  // },
  mounted() {

    //查询公用的下拉数据
    this.getOnceOptionAll()
    //判断是否是新增主表和是查看明细新政附表
    // setTimeout(() => {
    //   // 方法区
    //   this.asnTF()
    //   this.crud.toQuery()
    // }, 100);
    // this.asnTF()
    //定时查询 1000 为1s
    // this.setTime();
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.asnTF()
      return true
    },
    queryAsnDetail(ansId) {
      this.asnFrom.id = ansId
      this.crud.query = {asnId: ansId}
      this.crud.toQuery()
    },
    handleClick(tab, event) {
    },
    handleClose(done) {
      // 清空表单数据
      this.asnFrom = {};
      // 清空表格数据
      this.crud.data = [];
      //还原默认值
      this.fullscreen = false
      // 执行关闭操作
      done();
    },
    setTime() { //设置定时器
      // this.clearTimeSet=setInterval(() => {
      //   this.asnTF();
      // }, 1000*20);
    },
    //获取当前时间
    getNewDate() {
      const date = new Date()
      const year = date.getUTCFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      //存当前时间
      this.asnFrom.orderDate = `${year}-${month}-${day}`
    }
    ,
    //查询库位
    getPointList(itObj, code, data) {
      console.log(itObj)
      if (itObj != null) {
        this.viewPropC1 = itObj.bepc;
        this.viewPropC2 = itObj.bexq;
      }
      if (data.area.bexb) {
        this.pointTF = true;
        let selectDate = {rAreaCode: null, itemCode: null}
        selectDate.rAreaCode = data.area.code
        selectDate.itemCode = code
        // if (selectDate.rAreaCode === null) {
        // if (selectDate.rAreaCode === null) {
        //   this.$message.error('主表未绑定库区')
        //   return
        // }
        queryBomAccountList(selectDate).then(res => {
          this.pointOptions = []
          if (res != null) {
            console.log(res)
            let data_ = []
            for (const re of res) {
              data_.push(re.zPoint)
            }
            this.pointOptions = this.filterListObj(data_)
          }
          if (!(this.pointOptions.length > 0)) {
            queryPointList({code: 'ZZKW'}).then(re => {
              this.pointOptions = re
            })
          }
        })
      } else {
        this.pointTF = false;
        queryPointList({type: 'CH'}).then(re => {
          this.pointOptions = re
        })
      }
    }
    ,
    //过滤重复数据
    filterListObj(listObj) {
      let date = []
      let onOff = true
      listObj.filter((i) => {
        onOff = true
        date.filter((ii) => {
          if (i.id === ii.id) {
            onOff = false
          }
        })
        if (onOff) {
          date.push(i)
        }
      })
      return date
    }
    ,
    //查询公用的下拉数据
    getOnceOptionAll() {
      //物料数据
      queryItemAll({}).then(res => {
        this.itemOptions = res
      }).catch(e => {
        this.$message({
          showClose: true,
          message: '物料加载失败',
          type: 'error'
        })
      })
      //获取库区数据
      getAreas().then(res => {
        this.areaOptions = res
      })
      //获取单据类型
      getBillTypes({type: '100001', enabled: true}).then(res => {
        this.billTypeOptions = res
      })

    }
    ,

    //判断是否是新增主表和是查看明细新政附表
    asnTF() {
      if (this.asnId != 0) {
        getIdByAsn(this.asnId).then(res => {
          //存储主表的对象
          this.asn = res
          defaultForm.asn = res
          //将主表数据在新增哪里展示
          this.asnFrom = res
          asnQuery.asnId = res.id
          //查询点位数据
          this.pointTF = res.area.bexb
          // if (res.area.besh){
          //   this.getPointList(res)
          // }
        })
      } else {
        this.getNewDate()
      }
    }
    ,
    //新增主表数据
    submitFromAsn(data) {
      //校验
      this.$refs['asnFromRes'].validate((valid) => {
        if (valid) {
          crudAsn.add(data).then(res => {
            //存主表id
            this.asnId = res.id
            //加载数据
            this.asnTF()
            this.$message.success('添加成功')
            this.crud.toQuery()
            //this.$router.push({path: '/business-asn/viewAsnDetail', query: {ids: res.id}})
          })
        } else {
          return false
        }
      })
    }
    ,
    rkAndQxButtonM(num) {
      if (num === 1) {   //整单入库
        console.log()
        if (this.asnFrom.id <= 0) {
          this.crud.notify('请先提交入库单', CRUD.NOTIFICATION_TYPE.ERROR)
        }
        this.logining1 = true
        let data = this.asnDetailButton
        data.button = num
        data.id = this.asn.id
        rkAndQxButton(data).then(res => {
          this.$message.success(res)
          this.logining1 = false
          this.crud.toQuery()
        }).catch(e => {
          this.logining1 = false
        })
      } else if (num === 2) {
        this.$refs['formdyrk'].validate((valid) => {
          if (valid) {
            this.logining2 = true
            let data = this.asnDetailButton
            data.button = num
            data.id = this.detailId
            rkAndQxButton(data).then(res => {
              this.$message.success(res)
              this.dyrkTf = false
              this.logining2 = false
              this.crud.toQuery()
            }).catch(e => {
              this.logining2 = false
            })
          } else {
            // console.log('error submit!!');
            return false
          }
        })
      } else if (num === 3) {
        this.logining3 = true
        let data = this.asnDetailButton
        data.button = num
        data.id = this.asn.id
        rkAndQxButton(data).then(res => {
          this.$message.success(res)
          this.logining3 = false
          this.crud.toQuery()
        }).catch(e => {
          this.logining3 = false
        })
      }
    }
    ,
    //单一入库
    dyrkM(data) {
      this.detailId = data[0].id;
      this.dyrkTf = !this.dyrkTf
      console.log(data[0].item.code)
      this.getPointList(null, data[0].item.code, this.asn)
      this.asnDetailButton.asnDetailData = data[0]
    }
    ,
    //取消收货
    qxshM(data) {
      this.asnDetailButton.asnDetailDataS = data
      this.rkAndQxButtonM(3)
    }
    ,
    handleSuccess(response, file, fileList) {
      this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
      this.$refs.upload.clearFiles()
      this.crud.status.add = CRUD.STATUS.NORMAL
      this.crud.resetForm()
      this.crud.toQuery()
    }
    ,
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message)
      this.$notify({
        title: msg.message,
        type: 'error',
        duration: 2500
      })
      this.loading = false
    }
  }
}
</script>

<style scoped>
.vue-draggable-resizable {
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>