xiMenZi/lms/nladmin-ui/src/views/wms/produceScreen/index.vue

<template>
  <div class="container">
    <button class="btn-close" :disabled="disabled" @click="toExit" />
    <div class="m-content">
      <p>{{ screenData.device_name }}</p>
    </div>
    <div class="button-wraper" :style="screenData.region_points.length <= 2 ? 'justify-content: center' : 'justify-content: space-between'">
      <div v-for="(e, i) in screenData.region_points" :key="i" class="button-item" :class="{'button-item_3': screenData.region_points.length <= 3}">
        <p v-if="e.type === '1'" class="point_name">{{ e.name }}</p>
        <p v-if="e.type === '0'" class="point_name point_name_btn" @click="showPop('IN', e)">{{ e.name }}</p>
        <p class="point_value">{{ e.device_code }}</p>
        <div v-if="e.type === '1'" class="button" @click="showPop('CONTAINER', e)">呼叫空框</div>
        <div v-if="e.type === '1'" class="button" @click="showPop('SCANER', e)">完成入库</div>
        <div v-if="e.type === '0'" class="button" @click="showPop('BACK', e)">回库</div>
      </div>
    </div>
    <div v-show="type === 'IN'" class="pop-wraper" :class="{'popshow': show, 'pophide': !show}">
      <div class="pop-grid">
        <el-row type="flex" justify="space-between">
          <el-col :span="14">
            <el-table
              :data="popList"
              style="width: 100%"
              @current-change="handleCurrentChange"
            >
              <el-table-column
                prop="vehicle_code"
                label="载具号"
              />
              <el-table-column
                prop="order_code"
                label="订单号"
              />
              <el-table-column
                prop="region_code"
                label="工序"
              />
              <el-table-column
                prop="material_qty"
                label="物料数量"
              />
              <el-table-column
                prop="due_date"
                label="交期时间"
              />
              <el-table-column
                prop="priority"
                label="优先级"
              />
            </el-table>
          </el-col>
          <el-col :span="9">
            <el-table
              :data="popSecList"
              style="width: 100%"
            >
              <el-table-column
                prop="order_code"
                label="订单号"
              />
              <el-table-column
                prop="due_date"
                label="交期时间"
              />
              <el-table-column
                prop="material_qty"
                label="物料数量"
              />
              <el-table-column
                prop="region_code"
                label="工序"
              />
              <el-table-column
                prop="priority"
                label="优先级"
              />
            </el-table>
          </el-col>
        </el-row>
      </div>
      <el-row type="flex" justify="space-around">
        <el-col :span="4">
          <button class="login_button login_button_dis" @click="show = false">取消</button>
        </el-col>
        <el-col :span="4">
          <button class="login_button" :disabled="disabled" @click="toSure">叫料</button>
        </el-col>
      </el-row>
    </div>
    <div v-show="type === 'CONTAINER'" class="pop-wraper pop-wraper-1" :class="{'popshow': show, 'pophide': !show}">
      <div class="pop-h1">{{ popData.title }}</div>
      <div class="pop-grid">
        <el-row class="filter-wraper" type="flex" justify="space-between">
          <el-col :span="5" class="p-label">托盘类型</el-col>
          <el-col :span="18" class="select-wraper">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="option-wraper"
              />
            </el-select>
          </el-col>
        </el-row>
      </div>
      <el-row type="flex" justify="space-around">
        <el-col :span="6">
          <button class="login_button login_button_dis" @click="show = false">取消</button>
        </el-col>
        <el-col :span="6">
          <button class="login_button" @click="toSure">确定</button>
        </el-col>
      </el-row>
    </div>
    <div v-show="type === 'SCANER'" class="pop-wraper" :class="{'popshow': show, 'pophide': !show}">
      <el-row class="filter-wraper" type="flex" justify="space-between">
        <el-col :span="2" class="p-label">目的地</el-col>
        <el-col :span="8" class="select-wraper">
          <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              class="option-wraper"
            />
          </el-select>
        </el-col>
        <el-col :span="2" class="p-label" />
        <el-col :span="2" class="p-label">载具号</el-col>
        <el-col :span="8" class="select-wraper">
          <input v-model="vcode" type="text" class="set-input">
        </el-col>
      </el-row>
      <div class="pop-grid pop-grid_1">
        <el-table
          :data="popList"
          style="width: 100%"
        >
          <el-table-column
            label="订单号"
          >
            <template slot-scope="scope">
              <div class="select-wraper">
                <el-select
                  v-model="scope.row.order_code"
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options2"
                    :key="item.order_code"
                    :label="item.order_code"
                    :value="item.order_code"
                    class="option-wraper"
                  />
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
          >
            <template slot-scope="scope">
              <input v-model="scope.row.material_qty" type="text" class="set-input">
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template>
              <el-button circle type="primary" icon="el-icon-plus" @click="addRow" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row type="flex" justify="space-around">
        <el-col :span="4">
          <button class="login_button login_button_dis" @click="show = false">取消</button>
        </el-col>
        <el-col :span="4">
          <button class="login_button" :disabled="disabled" @click="toSure">确定</button>
        </el-col>
      </el-row>
    </div>
    <div v-show="type === 'BACK'" class="pop-wraper" :class="{'popshow': show, 'pophide': !show}">
      <div class="pop-grid">
        <el-table
          :data="popList"
          style="width: 100%"
        >
          <el-table-column
            prop="order_code"
            label="订单号"
          />
          <el-table-column
            label="数量"
          >
            <template slot-scope="scope">
              <input v-model="scope.row.material_qty" type="number" class="set-input">
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row type="flex" justify="space-around">
        <el-col :span="4">
          <button class="login_button login_button_dis" @click="show = false">取消</button>
        </el-col>
        <el-col :span="4">
          <button class="login_button" :disabled="disabled" @click="toSure">确定</button>
        </el-col>
      </el-row>
    </div>
    <div v-show="show" class="modal" />
  </div>
</template>

<script>
import crudProduceScreen from './produceScreen'
// import crudProduceScreen from './mork'
export default {
  data() {
    return {
      show: false,
      type: null,
      popData: {},
      popList: [],
      popSecList: [],
      currentRow: null,
      value: '',
      options: [{ value: 'G01', label: 'G01' }, { value: 'R01', label: 'R01' }, { value: 'R02', label: 'R02' }, { value: 'R03', label: 'R03' }, { value: 'S04', label: 'S04' }, { value: 'S06', label: 'S06' }],
      value1: '',
      options1: [{ value: '1', label: '货架' }, { value: '2', label: '内部' }, { value: '3', label: '外协' }, { value: '4', label: '内部过道' }],
      value2: '',
      options2: [],
      vcode: '',
      disabled: false
    }
  },
  computed: {
    screenData() {
      let res = {}
      if (this.$store.state.produceScreen.screenData !== '') {
        res = JSON.parse(this.$store.state.produceScreen.screenData)
      }
      return res
    }
  },
  methods: {
    toExit() {
      this.disabled = true
      crudProduceScreen.loginOut({ username: this.screenData.username, device_code: this.screenData.device_code }).then(res => {
        this.disabled = false
        localStorage.removeItem('screenData')
        this.$router.push('/produceScreen/setup')
      }).catch(() => {
        this.disabled = false
      })
    },
    showPop(type, e) {
      this.popData = {}
      this.popList = []
      this.popSecList = []
      this.currentRow = null
      this.value = ''
      this.value1 = ''
      this.vcode = ''
      this.type = type
      this.popData = e
      if (type === 'IN') {
        crudProduceScreen.regionOrder(this.screenData.device_code, this.popData.device_code).then(res => {
          this.popList = [...res.content]
          this.show = true
        })
      } else if (type === 'CONTAINER') {
        this.popData.title = '选择托盘类型'
        this.emptyObj = {}
        this.val1 = ''
        this.show = true
        this.emptyObj.device_code = e.name
      } else if (type === 'SCANER') {
        const arr = []
        if (JSON.stringify(this.screenData) !== '{}') {
          this.screenData.region_points.map(el => {
            if (el.type === '0') {
              arr.push(el.device_code)
            }
          })
        }
        crudProduceScreen.fabOrders({ deviceCodes: arr }).then(res => {
          this.options2 = [...res]
        })
        crudProduceScreen.getPointVehicle({ device_code: this.popData.device_code }).then(res => {
          this.vcode = res
        })
        this.popList.push({ order_code: '', material_qty: '' })
        this.show = true
      } else if (type === 'BACK') {
        const arr = []
        arr.push(this.popData.device_code)
        crudProduceScreen.fabOrders({ deviceCodes: arr }).then(res => {
          this.popList = [...res]
          this.popList.map(el => {
            this.$set(el, 'material_qty', 0)
          })
          this.show = true
        })
      }
    },
    handleCurrentChange(val) {
      this.currentRow = val
      crudProduceScreen.fabMaterial({ vehicle_code: this.currentRow.vehicle_code }).then(res => {
        this.popSecList = [...res]
      })
    },
    toSure() {
      this.disabled = true
      if (this.type === 'IN') {
        if (this.popSecList.length === 0) {
          this.disabled = false
          return
        }
        crudProduceScreen.callMater({ mater: this.popSecList, device_code: this.popData.device_code, vehicle_code: this.currentRow.vehicle_code }).then(res => {
          this.disabled = false
          this.$message(res.msg)
        }).catch(() => {
          this.disabled = false
        })
      } else if (this.type === 'CONTAINER') {
        if (!this.value) {
          this.disabled = false
          this.$message.error('请选择托盘类型！')
          return
        }
        crudProduceScreen.callEmp({ vehicle_type: this.value, device_code: this.popData.device_code }).then(res => {
          this.disabled = false
          this.$message(res.msg)
        }).catch(() => {
          this.disabled = false
        })
      } else if (this.type === 'SCANER') {
        if (!this.vcode) {
          this.disabled = false
          this.$message.error('请填写载具号')
          return
        }
        if (!this.value1) {
          this.disabled = false
          this.$message.error('请选择目的地')
          return
        }
        const arr = []
        this.popList.map(el => {
          if (el.order_code !== '' && el.material_qty !== '') {
            arr.push(el)
          }
        })
        crudProduceScreen.sendMater({ device_code: this.popData.device_code, mater: arr, point_code: this.value1, vehicle_code: this.vcode }).then(res => {
          this.disabled = false
          this.$message(res.msg)
        }).catch(() => {
          this.disabled = false
        })
      } else if (this.type === 'BACK') {
        crudProduceScreen.sendVehicle({ mater: this.popList, device_code: this.popData.device_code }).then(res => {
          this.$message(res.msg)
        }).catch(() => {
          this.disabled = false
        })
      }
      this.show = false
    },
    addRow() {
      this.popList.push({ order_code: '', material_qty: '' })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import './style.scss';
</style>