hefeihvac_web/src/views/business-data/businessTask/asnTask.vue

<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <label class="el-form-item-label">物料编码</label>
      <el-select v-model="query.itemCode" placeholder="物料编码" filterable style="width: 170px;" class="filter-item">
        <el-option
          @keyup.enter.native="crud.toQuery"
          v-for="item in this.itemListData"
          :key="item.code"
          :label="item.code"
          :value="item.code">
          <span style="float: left">{{ item.code }}</span>
          <span  style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
        </el-option>
      </el-select>

      <label class="el-form-item-label">物料名称</label>
      <el-input v-model="query.itemName" clearable placeholder="物料名称" style="width: 170px;" class="filter-item"
                @keyup.enter.native="crud.toQuery"/>

      <label class="el-form-item-label">任务状态</label>
      <el-select
        v-model="query.agvStatus"
        clearable
        size="small"
        placeholder="任务状态"
        class="filter-item"
        style="width: 150px"
        @change="crud.toQuery"
      >
        <el-option
          v-for="item in dict.task_status"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <label class="el-form-item-label">日期</label>
      <date-range-picker v-model="query.createTime" class="date-item" style="width: 100px"/>

      <div>
        <label class="el-form-item-label">工单编号</label>
        <el-input v-model="query.orderNumber" clearable placeholder="工单编号" style="width: 170px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"/>
        <label class="el-form-item-label">Mo票</label>
        <el-input v-model="query.propC1" clearable placeholder="Mo票" style="width: 190px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"/>
        <label class="el-form-item-label">原点位</label>
        <el-input v-model="query.srcPointCode" clearable placeholder="原点位" style="width: 165px;" class="filter-item"
                  @keyup.enter.native="crud.toQuery"/>
        <label class="el-form-item-label">目标点位</label>
        <el-input v-model="query.dstPointCode" clearable placeholder="目标点位" style="width: 200px;"
                  class="filter-item" @keyup.enter.native="crud.toQuery"/>
        <rrOperation :crud="crud"/>
      </div>

      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" :tableKey="this.$options.name"/>
      <!--表单组件-->

      <!--表格渲染-->
      <el-table ref="table" height="66vh" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="xh" type="index" :index="indexMethod" label="序号"/>
        <el-table-column :show-overflow-tooltip="true" prop="orderNumber" label="工单编号">
          <template slot-scope="scope">
            <div>{{ scope.row.itemKey.orderNumber }}</div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="propC1" label="Mo票">
          <template slot-scope="scope">
            <div>{{ scope.row.itemKey.propC1 }}</div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="itemCode" label="物料编码">
          <template slot-scope="scope">
            <div>{{ scope.row.item.code }}</div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="itemName" label="物料名称">
          <template slot-scope="scope">
            <div>{{ scope.row.item.name }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="srcStockCode" label="容器编码"/>
        <el-table-column prop="srcPointCode" label="原点位"/>
        <el-table-column prop="dstPointCode" label="目标点位"/>
        <el-table-column prop="agvStatus" label="任务状态">
          <template slot-scope="scope">
            {{ dict.label.task_status[scope.row.agvTask==null?'FINISH':scope.row.agvTask.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="planQty" label="计划数量"/>
        <el-table-column prop="moveQty" label="移位数量"/>
        <el-table-column prop="createBy" label="创建人"/>
        <el-table-column prop="createTime" label="创建时间"/>
      </el-table>
      <!--分页组件-->
      <div style="float: right;">
        <pagination/>
      </div>
    </div>
  </div>
</template>

<script>
import crudTask from '@/api/task'
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 DateRangePicker from "@/components/DateRangePicker/index.vue";
import {getItemsList} from "@/api/item";

const defaultForm = {
  id: null,
  itemId: null,
  itemKeyId: null,
  billCode: null,
  taskType: null,
  asnDetailId: null,
  moveDetailId: null,
  waveDetailId: null,
  pickDetailId: null,
  srcStockId: null,
  dstStockId: null,
  srcPointId: null,
  dstPointId: null,
  srcStockCode: null,
  dstStockCode: null,
  srcPointCode: null,
  dstPointCode: null,
  invStatus: null,
  taskStatus: null,
  beSkip: null,
  beBack: null,
  planQty: null,
  moveQty: null,
  putCode: null,
  invId: null,
  deptId: null,
  createBy: null,
  updateBy: null,
  createTime: null,
  updateTime: null
}
export default {
  name: 'Task',
  components: {DateRangePicker, pagination, crudOperation, rrOperation, udOperation},
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['task_status'],
  cruds() {
    return CRUD({
        query: {taskType: ['ASN']},
        title: '入库任务',
        url: 'api/task',
        idField: 'id',
        sort: 'id,desc',
        crudMethod: {...crudTask},
        optShow: {
          add: false,
          edit: false,
          del: false,
          reset: true,
          download: true
        },
        queryOnPresenterCreated: true
      }
    )
  },
  data() {
    return {
      permission: {
        add: ['admin', 'task:add'],
        edit: ['admin', 'task:edit'],
        del: ['admin', 'task:del']
      },
      rules: {},
      queryTypeOptions: [
        {key: 'itemCode', display_name: '物料代码'},
        {key: 'itemName', display_name: '物料名称'},
        {key: 'taskStatus', display_name: '任务状态'},
        {key: 'srcPointCode', display_name: '源点位编码'},
        {key: 'dstPointCode', display_name: '目标点位编码'}
      ],
      itemListData: []
    }
  },
  mounted() {
    //初始化数据
    this.itemDataGet();
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    indexMethod(index) {
      return index * 1 + 1;
    },
    //物料数据
    itemDataGet() {
      getItemsList().then(res => {
        this.itemListData = res;
      }).catch(e => {
        this.crud.notify('物料加载失败！', CRUD.NOTIFICATION_TYPE.ERROR);
      })
    }
  }
}
</script>

<style scoped>

</style>