VehicleContainerHeaderList.vue 7.43 KB
<template>
  <a-card :bordered="false" :class="'cust-erp-sub-tab'">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="小车编码">
              <a-input placeholder="请输入小车编码" v-model="queryParam.code"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button id="search" type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{ x: true }"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type:'checkbox'}"
        :customRow="clickThenSelect"
      >
        <span slot="status" slot-scope="status">
            <a-tag :key="status" :color="getStatusColor(status)">
              {{ status }}
            </a-tag>
        </span>

        <span slot="action" slot-scope="text, record">
          <a v-has="'vehicleContainer:edit'" v-if="record.status === 'empty'" @click="showVehicle(record)">定位<a-divider type="vertical"/></a>
          <a v-has="'vehicleContainer:add'" v-if="record.status === 'empty'" @click="addVehicleContainer(record)">添加料箱<a-divider type="vertical"/></a>
          <a v-has="'vehicleContainer:add'" v-if="record.status === 'empty'" @click="createAgvTask(record)">下发任务</a>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)" style="display: none">
            <a v-has="'vehicleContainer:delete'">删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>

    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="小车容器详情" key="1">
        <VehicleContainerDetailList :vehicleCode="selectedVehicleCode" @dataSearch="dataSearch"/>
      </a-tab-pane>
    </a-tabs>

    <vehicle-modal ref="vehicleModal" @ok="modalFormOk"></vehicle-modal>
    <vehicle-container-modal ref="vehicleContainerModal" @ok="modalFormOk"></vehicle-container-modal>
    <vehicle-task-modal ref="vehicleTaskModal" @ok="modalFormOk"></vehicle-task-modal>
  </a-card>

</template>
<script>

import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import VehicleContainerDetailList from "./VehicleContainerDetailList";
import {getAction} from "@/api/manage";
import MaterialSnBatchModal from "@views/system/config/modules/MaterialSnBatchModal";
import MaterialSnModal from "@views/system/config/modules/MaterialSnModal";
import VehicleModal from './modules/VehicleModal'
import VehicleContainerModal from './modules/VehicleContainerModal'
import VehicleTaskModal from './modules/VehicleTaskModal'

export default {
  name: 'VehicleContainerHeaderList',
  mixins: [JeecgListMixin],
  components: {MaterialSnModal, MaterialSnBatchModal, VehicleContainerDetailList, VehicleContainerModal, VehicleModal, VehicleTaskModal},
  data() {
    return {
      description: 'AGV容器管理页面',
      disableMixinCreated: true,
      selectedRowKeys: [],
      selectionRows: [],
      selectedVehicleCode: null,
      // 表头
      columns: [
        {
          title: '小车编码',
          align: 'center',
          dataIndex: 'code'
        },
        {
          title: 'AGV点位',
          align: 'center',
          dataIndex: 'locationCode'
        },
        {
          title: '目标AGV点位',
          align: 'center',
          dataIndex: 'userdef1'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status_dictText',
          scopedSlots: {customRender: 'status'}
        },
        {
          title: '更新人',
          align: 'center',
          dataIndex: 'updateBy'
        },
        {
          title: '更新日期',
          align: 'center',
          dataIndex: 'updateTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        list: '/agv/listByContainer',
        exportXlsUrl: '/agv/inventoryHeader/exportInventoryDetail',
        importUrl: '/agv/inventoryHeader/importInventoryDetail'
      },
      dictOptions: {
        containerStatus: []
      }
    }
  },
  created() {
    this.loadData();
  },
  computed: {
    importExcelUrl() {
      return `${window._CONFIG['domianURL']}/${this.url.importUrl}`
    }
  },
  methods: {
    dataSearch(vehicleCode){
      this.loadData();
      this.selectedVehicleCode = vehicleCode;
    },
    showVehicle(record) {
      this.$refs.vehicleModal.edit(record);
      this.$refs.vehicleModal.visible = true;
    },
    addVehicleContainer(record) {
      this.$refs.vehicleContainerModal.edit(record);
      this.$refs.vehicleContainerModal.visible = true;
    },
    createAgvTask(record) {
      this.$refs.vehicleTaskModal.edit(record);
      this.$refs.vehicleTaskModal.visible = true;
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      this.onClearSelected()
      let params = this.getQueryParams();
      this.loading = true;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    },
    clickThenSelect(record) {
      return {
        on: {
          click: () => {
            this.onSelectChange(record.code.split(","), [record]);
          }
        }
      }
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
      this.selectedVehicleCode = null
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      if (selectedRowKeys != null && selectedRowKeys.length > 0) {
        this.selectedVehicleCode = selectedRowKeys[0];
      }
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
      this.selectRecord = selectionRows;
    },
    getStatusColor(status) {
      const colors = {
        '空闲': 'green',
        '有货': 'purple',
        '满盘': 'blue',
        '良品': 'green',
        '报废品': 'purple',
        '待确认	': 'grey',
        '次品': 'red',
        '锁定': 'red',
        "冻结": "red",
        default: 'blue'
      };
      return colors[status] || colors.default;
    },
    clearList() {
      this.dataSource = []
      this.selectedRowKeys = []
      this.ipagination.current = 1
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>