Byd_Dg_Web/src/views/business-data/pick/index.vue

<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <div>
          <label class="el-form-item-label">创建日期</label>
          <date-range-picker v-model="query.createTime" class="date-item" style="width: 100px"/>
          <label class="el-form-item-label">需求工位</label>
          <el-input v-model="query.station" clearable placeholder="需求工位" style="width: 180px;" class="filter-item"
                    @keyup.enter.native="crud.toQuery"
          />

          <label class="el-form-item-label">单据类型</label>
          <el-select v-model="query.orderType" filterable clearable placeholder="请选择" class="filter-item"
                     style="width: 180px;"
          >
            <el-option
              v-for="item in dict.gd_type"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            />
          </el-select>

          <label class="el-form-item-label">成品代码/单品代码</label>
          <el-input v-model="query.cpCodeOrDpCode" clearable placeholder="成品代码/单品代码" style="width: 180px;"
                    class="filter-item"
                    @keyup.enter.native="crud.toQuery"
          />


        </div>
        <div>
          <label class="el-form-item-label">工单编码</label>
          <el-input v-model="query.gdCode" clearable placeholder="工单编码" style="width: 230px;" class="filter-item"
                    @keyup.enter.native="crud.toQuery"
          />
          <rrOperation :crud="crud"/>
          <!--        重置-->
          <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置
          </el-button>
        </div>


      </div>
      <div class="statusButton" style="border-bottom: solid lightgray 1px;">
        <el-radio-group v-model="radio3" @change="clickChange" size="small">
          <el-radio-button label="全部"> 全部</el-radio-button>
          <el-radio-button label="打开">打开</el-radio-button>
          <el-radio-button label="部分分配">部分分配</el-radio-button>
          <el-radio-button label="已分配">已分配</el-radio-button>
          <el-radio-button label="备料中">备料中</el-radio-button>
          <el-radio-button label="备料完成">备料完成</el-radio-button>
          <el-radio-button label="叫料中">叫料中</el-radio-button>
          <el-radio-button label="已关闭">已关闭</el-radio-button>
        </el-radio-group>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" :tableKey="this.$options.name"/>
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                 :title="crud.status.title" width="500px"
      >
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="85px">

          <el-form-item label="工单编码" prop="gdCode">
            <el-select v-model="form.gdCode" @focus="getGd()" filterable clearable placeholder="请选择"
                       style="width: 350px;"
                       class="filter-item"
            >
              <el-option
                v-for="gd in gds"
                :key="gd.id"
                :label="gd.code"
                :value="gd.code"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="顺序号" prop="lineNo">
            <el-input v-model="form.lineNo" style="width: 350px;" oninput="value=value.replace(/^0|[^0-9]/g,'')"
                      min="1"
            />
          </el-form-item>

          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" filterable placeholder="请选择" style="width: 350px;">
              <el-option
                v-for="item in dict.pick_status"
                v-if="item.value==='OPEN'"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="成品代码/单品代码" prop="cpCodeOrDpCode">
            <el-select v-model="form.cpCodeOrDpCode" @focus="getItemAndBigItem()" filterable placeholder="请选择"
                       style="width: 350px;"
            >
              <el-option
                v-for="item in itemAndBigItem"
                :key="item.id"
                :label="item.code"
                :value="item.code"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="需求工位" prop="station">
            <el-input v-model="form.station" style="width: 350px;"/>
          </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>
      <!--表格渲染-->
      <el-table ref="table"
                v-loading="crud.loading"
                :data="crud.data"
                height="63vh"
                row-key="id"
                size="small"
                style="width: 100%;"
                @selection-change="crud.selectionChangeHandler"
                @row-click="handleRowClick"
                @expand-change="expandChange"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <!--            <el-card shadow="never" class="nested-table-card">

                        </el-card>-->
            <el-table :data="props.row.pickDetails" class="table2" show-summary v-loading="loading"
                      style="width: 100%"
            >
              <el-table-column prop="xh" label="序号" type="index" width="80"/>
              <el-table-column prop="item.code" label="物料编码" align="center"/>
              <el-table-column prop="propC3" label="MES拆分物料" v-if="hasPropC3Value(props.row.pickDetails)"
                               align="center"/>
              <el-table-column prop="item.name" label="物料名称" align="center"/>
              <el-table-column prop="orderQty" label="订单数量" align="center"/>
              <el-table-column prop="allocatedQty" label="分配数量" align="center"/>
              <el-table-column prop="pickedQty" label="拣货数量" align="center"/>
              <el-table-column prop="sourceId" label="回传状态">
                <template slot-scope="scope">

                  {{ dict.label.return_status[scope.row.sourceId] }}
                </template>
              </el-table-column>
              <el-table-column prop="sourceName" label="返回报文" v-element-table-tooltip/>
            </el-table>

          </template>
        </el-table-column>
        <el-table-column prop="xh" label="序号" type="index"/>
        <el-table-column prop="gdCode" label="工单编码" v-element-table-tooltip/>
        <el-table-column prop="lineNo" label="顺序号"/>
        <el-table-column
          prop="status"
          label="状态"
          width="100"
          :filters="[
          { text: '打开', value: 'OPEN' },
          { text: '部分分配', value: 'ASSIGN' },
          { text: '已分配', value: 'ALLOCATE' },
          { text: '备料中', value: 'PICKUP' },
          { text: '备料完成', value: 'PICK_ALL' },
          { text: '叫料中', value: 'SHIP_PART' },
          { text: '已关闭', value: 'CLOSE' }
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="getStatusType(scope.row.status)"
              disable-transitions
            >
              {{ dict.label.pick_status[scope.row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cpCodeOrDpCode" label="成品代码/单品代码"/>
        <el-table-column prop="station" label="需求工位"/>
        <el-table-column prop="point.code" label="翻包点位"/>
        <el-table-column prop="stock" label="翻包容器"/>
        <el-table-column prop="callPoint" label="叫料点位"/>
        <el-table-column prop="orderType" label="单据类型"/>
        <el-table-column prop="sourceId" label="回传状态">
          <template slot-scope="scope">

            {{ dict.label.return_status[scope.row.sourceId] }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column v-if="checkPer(['admin','pick:edit','pick:del'])" label="操作" align="center">
          <template slot-scope="scope">

            <el-button
              type="primary"
              icon="el-icon-s-promotion"
              align="center"
              size="mini"
              @click="returnPick(scope.row)"
            >
              手工回传
            </el-button>

          </template>

        </el-table-column>

      </el-table>
      <!--分页组件-->
      <div style="float: right;">
        <pagination/>
      </div>
    </div>
  </div>
</template>

<script>
import crudPick from '@/api/pick'
import crudPickDetail, {findByAllPickDetail} from '@/api/pickDetail'
import crudItem from '@/api/item'
import crudBigItem from '@/api/bigItem'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

import {none} from 'html-webpack-plugin/lib/chunksorter'
import DateRangePicker from '@/components/DateRangePicker/index.vue'

const defaultForm = {
  id: null,
  createBy: null,
  updateBy: null,
  createTime: null,
  updateTime: null,
  deptId: null,
  code: null,
  lineNo: null,
  status: null,
  beCall: null
}
export default {
  name: 'Pick',
  dicts: ['pick_status', 'gd_type', 'return_status'],
  components: {DateRangePicker, pagination, crudOperation, rrOperation, udOperation},
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '出库单',
      url: 'api/pick',
      query: {
        status: 'OPEN'
      },
      idField: 'id',
      sort: ['createTime,asc', 'lineNo,asc'],
      crudMethod: {...crudPick},
      optShow: {
        add: false,
        edit: false,
        del: false,
        reset: false,
        download: true
      },
      queryOnPresenterCreated: true
    })
  },
  data() {
    return {
      radio3: '打开',
      gds: [],
      itemAndBigItem: [],
      pickDetails: [],
      loading: true,
      permission: {
        add: ['admin', 'pick:add'],
        edit: ['admin', 'pick:edit'],
        del: ['admin', 'pick:del']
      },
      rules: {
        gdCode: [
          {required: true, message: '请选择工单编码', trigger: 'blur'}
        ],
        lineNo: [
          {required: true, message: '请输入顺序号', trigger: 'blur'}
        ],
        status: [
          {required: true, message: '请选择状态', trigger: 'blur'}
        ],
        cpCodeOrDpCode: [
          {required: true, message: '请选择成品代码/单品代码', trigger: 'blur'}
        ],
        station: [
          {required: true, message: '请输入需求工位', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    none,
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },

    getItemAndBigItem() {
      // 清空数组，防止重复添加
      this.itemAndBigItem = []

      crudItem.queryItemAll({enabled: true}).then(res => {
        res.forEach(item => {
          const cpCodeAndDpCode = {code: null}
          cpCodeAndDpCode.code = item.code
          this.itemAndBigItem.push(cpCodeAndDpCode)
        })
      })

      crudBigItem.queryBigItemAll({enabled: true}).then(res => {
        res.forEach(item => {
          const cpCodeAndDpCode = {code: null}
          cpCodeAndDpCode.code = item.code
          this.itemAndBigItem.push(cpCodeAndDpCode)
        })
      })

    },
    expandChange(row, expandedRows) {
      // 该处是用于判断是展开还是收起行，只有展开的时候做请求，避免多次请求！
      // 展开的时候expandedRows有值，收起的时候为空.
      this.loading = true
      if (expandedRows.length > 0) {
        crudPickDetail.findByAllPickDetail({pickId: row.id}).then(res => {
          // 遍历当前页面表
          this.$set(row, 'pickDetails', res)
          setTimeout(() => {
            this.loading = false
          }, 200)

        }).catch(() => {
          this.crud.notify('获取明细数据异常！', CRUD.NOTIFICATION_TYPE.ERROR)
        })
      }

    },
    handleRowClick(row, column, event) {
      /* //点编辑按钮的时候不触发展开行
       if (!event.target.classList.contains('el-button')) {
         this.$refs.table.toggleRowExpansion(row)
       }
       */
    },
    getStatusType(status) {
      switch (this.dict.label.pick_status[status]) {
        case '打开':
          return 'info'
        case '部分分配':
        case '已分配':
          return 'warning'
        case '备料中':
        case '备料完成':
          return 'primary'
        case '叫料中':
        case '已关闭':
          return 'success'
        case '已取消':
          return 'danger'
        default:
          return ''
      }
    },
    filterTag(value, row) {
      return row.status === value
    },
    clickChange(lab) {
      if (lab === '全部') {
        this.query.status = ''
        this.crud.toQuery()
      } else if (lab === '打开') {
        this.query.status = 'OPEN'
        this.crud.toQuery()
      } else if (lab === '部分分配') {
        this.query.status = 'ASSIGN'
        this.crud.toQuery()
      } else if (lab === '已分配') {
        this.query.status = 'ALLOCATE'
        this.crud.toQuery()
      } else if (lab === '备料中') {
        this.query.status = 'PICKUP'
        this.crud.toQuery()
      } else if (lab === '备料完成') {
        this.query.status = 'PICK_ALL'
        this.crud.toQuery()
      } else if (lab === '叫料中') {
        this.query.status = 'SHIP_PART'
        this.crud.toQuery()
      } else if (lab === '已关闭') {
        this.query.status = 'CLOSE'
        this.crud.toQuery()
      }
    },
    resetQuery() {
      this.radio3 = '打开'
      this.crud.resetQuery()
    },
    returnPick(data) {
      if (data.status != 'CLOSE') {
        return this.crud.notify('已关闭的工单才允许回传', CRUD.NOTIFICATION_TYPE.WARNING)
      }
      if (data.sourceId == 1) {
        return this.crud.notify('工单已回传', CRUD.NOTIFICATION_TYPE.WARNING)
      }
      crudPick.returnPick(
        data.id
      ).then(res => {
        if (res.status == 200) {
          this.crud.notify('操作成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          this.crud.toQuery()
        } else {
          this.crud.notify(res.message, CRUD.NOTIFICATION_TYPE.ERROR)
        }
      })

    },
    hasPropC3Value(childData) {
      // 检查子表数据中是否有 propC3 有值的数据项
      return Array.isArray(childData) && childData.some(item => item.propC3);
    }

  }
}
</script>

<style>


/*.nested-table-card {
  background: linear-gradient(135deg, #f7f9fc, #eef1f7) !important;
  border: 1px solid #dfe4ed !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}*/

.table2 {
  background-color: white !important;
  border-radius: 8px !important;
}

.table2 th {
  background-color: #f2f6fc !important;
  color: #333 !important;
  font-size: 14px !important;
  border: none !important;
}

.table2 td {
  color: #666 !important;
  font-size: 13px !important;
  border: none !important;
}

.table2 .el-table__row {
  transition: background-color 0.3s !important;
}

.table2 .el-table__row:hover {
  background-color: #f5f7fa !important;
  cursor: pointer !important;
}

.table2 .el-table__body-wrapper {
  border: none !important;
}

.table2 .el-table__footer-wrapper {
  background-color: #F6F9FC !important;
  color: #333 !important;
  font-weight: bold;
  font-size: 14px !important;
  border: none !important;
}


</style>