AgvShipmentList.vue 15.5 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <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-select
                show-search
                placeholder="请选择库区"
                option-filter-prop="children"
                v-model="queryParam.zoneCode">
                <a-select-option v-for="item in zoneList" :key="item.name" :value="item.code">{{
                    item.name
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <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">-->
<!--            <a-form-item label="货主">-->
<!--              <a-select-->
<!--                show-search-->
<!--                placeholder="请选择货主"-->
<!--                option-filter-prop="children"-->
<!--                v-model="queryParam.companyCode">-->
<!--                <a-select-option v-for="item in companyList" :key="item.name" :value="item.code">{{-->
<!--                    item.name-->
<!--                  }}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="出库单类型">
                <a-select
                  show-search
                  placeholder="请选择出库单类型"
                  option-filter-prop="children"
                  v-model="queryParam.type">
                  <a-select-option v-for="item in shipmentTypeList" :key="item.name" :value="item.code">{{
                      item.name
                    }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="状态">
<!--                //todo  配置agv_shipment_status-->
                <j-dict-select-tag placeholder="请选择状态" v-model="queryParam.status" dictCode="agv_shipment_status"/>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="上游单号">
                <a-input placeholder="请输入上游单号" v-model="queryParam.referCode"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="目标点位">
                <a-input placeholder="请输入目标点位" v-model="queryParam.toPort"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="出库单备注">
                <a-input placeholder="请输入出库单备注" v-model="queryParam.remark"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="创建人">
                <a-input placeholder="请输入创建人" v-model="queryParam.createBy"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="12" :lg="14" :md="16" :sm="24">
              <a-form-item label="创建日期">
                <j-date :show-date="true" date-format="YYYY-MM-DD" placeholder="请选择开始时间"
                        class="query-group-cust" v-model="queryParam.createTime_begin"></j-date>
                <span class="query-group-split-cust"></span>
                <j-date :show-date="true" date-format="YYYY-MM-DD" placeholder="请选择结束时间"
                        class="query-group-cust" v-model="queryParam.createTime_end"></j-date>
              </a-form-item>
            </a-col>
          </template>
          <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>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('agv出库单')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <!-- 高级查询区域 -->
      <j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
      <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown> -->
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        :customRow="clickThenSelect"
        :rowClassName="rowClassName"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a v-if="record.status == 0" @click="handleEdit(record)">编辑</a>

<a-divider type="vertical" />
          <a v-if="record.status == 0 || record.status == 90" @click="handleStart(record)">开始出库<a-divider type="vertical" /></a>

          <a v-if="record.status >= 10 && record.status < 100 && record.status != 90" @click="handlePause(record)">暂停出库<a-divider type="vertical" /></a>

          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item v-if="record.status < 100">
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

    <!-- 详情区域 -->
    <a-tabs defaultActiveKey="1" v-if="selectedShipmentCode">
      <a-tab-pane tab="关联AGV任务" key="1">
        <AgvTaskList :shipmentCode="selectedShipmentCode" />
      </a-tab-pane>
    </a-tabs>

    <agv-shipment-modal ref="modalForm" @ok="modalFormOk"></agv-shipment-modal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import AgvShipmentModal from './modules/AgvShipmentModal.vue'
  import AgvTaskList from './AgvTaskList.vue'
  import {getZoneList} from "@api/api";
  import { postAction } from '@/api/manage'

  export default {
    name: 'AgvShipmentList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      AgvShipmentModal,
      AgvTaskList
    },
    data () {
      return {
        description: 'agv出库单管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'agv出库单编码',
            align:"center",
            dataIndex: 'code'
          },
          // {
          //   title:'仓库编码',
          //   align:"center",
          //   dataIndex: 'warehouseCode'
          // },
          // {
          //   title:'库区编码',
          //   align:"center",
          //   dataIndex: 'zoneCode'
          // },
          // {
          //   title:'货主编码',
          //   align:"center",
          //   dataIndex: 'companyCode'
          // },
          // {
          //   title:'出库单类型',
          //   align:"center",
          //   dataIndex: 'type'
          // },
          {
            title:'出库状态',
            align:"center",
            dataIndex: 'status'
          },
          // {
          //   title:'上游编码',
          //   align:"center",
          //   dataIndex: 'referCode'
          // },
          {
            title:'物料编码',
            align:"center",
            dataIndex: 'materialCode'
          },
          {
            title:'物料名称',
            align:"center",
            dataIndex: 'materialName'
          },
          {
            title:'出库数量',
            align:"center",
            dataIndex: 'qty'
          },
          {
            title:'已出数量',
            align:"center",
            dataIndex: 'qtyShiped'
          },
          {
            title:'目标点位',
            align:"center",
            dataIndex: 'toPort'
          },
          // {
          //   title:'备用字段2',
          //   align:"center",
          //   dataIndex: 'userdef1'
          // },
          // {
          //   title:'备用字段2',
          //   align:"center",
          //   dataIndex: 'userdef2'
          // },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/shipment/agvShipment/list",
          delete: "/shipment/agvShipment/delete",
          deleteBatch: "/shipment/agvShipment/deleteBatch",
          exportXlsUrl: "/shipment/agvShipment/exportXls",
          importExcelUrl: "shipment/agvShipment/importExcel",
          start: "/shipment/agvShipment/start",
          pause: "/shipment/agvShipment/pause",
          
        },
        dictOptions:{},
        superFieldList:[],
        zoneList: [],
        selectIndex: null,
        selectedShipmentCode: '',
      }
    },
    created() {
    this.getSuperFieldList();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      handleStart(record){
        this.loading = true
        postAction(this.url.start + `?id=${record.id}`, {})
          .then(res => {
            if (res && res.success) {
              this.$message.success('操作成功')
              this.loadData()
            } else if (res) {
              this.$message.warning(res.message || '操作失败')
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
      handlePause(record){
        this.loading = true
        postAction(this.url.pause + `?id=${record.id}`, {})
          .then(res => {
            if (res && res.success) {
              this.$message.success('操作成功')
              this.loadData()
            } else if (res) {
              this.$message.warning(res.message || '操作失败')
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
      initDictConfig(){
        getZoneList().then((res) => {
          if (res.success) {
            this.zoneList = res.result
          }
        });
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'code',text:'agv出库单编码',dictCode:''})
        fieldList.push({type:'string',value:'warehouseCode',text:'仓库编码',dictCode:''})
        fieldList.push({type:'string',value:'zoneCode',text:'库区编码',dictCode:''})
        fieldList.push({type:'string',value:'companyCode',text:'货主编码',dictCode:''})
        fieldList.push({type:'string',value:'type',text:'出库单类型',dictCode:''})
        fieldList.push({type:'string',value:'status',text:'出库单状态:1新建 10出库中 90暂停 100出库完成3',dictCode:''})
        fieldList.push({type:'string',value:'referCode',text:'上游编码',dictCode:''})
        fieldList.push({type:'string',value:'materialCode',text:'物料编码',dictCode:''})
        fieldList.push({type:'string',value:'materialName',text:'物料名称',dictCode:''})
        fieldList.push({type:'BigDecimal',value:'qty',text:'出库数量',dictCode:''})
        fieldList.push({type:'string',value:'userdef1',text:'备用字段2',dictCode:''})
        fieldList.push({type:'string',value:'userdef2',text:'备用字段2',dictCode:''})
        fieldList.push({type:'string',value:'toPort',text:'目标点位',dictCode:''})
        this.superFieldList = fieldList
      },
      clickThenSelect(record, index) {
        return {
          on: {
            click: () => {
              console.log('Clicked row:', record)
              this.selectIndex = index
              this.onSelectChange(record.id.toString().split(","), [record]);
              this.selectedShipmentCode = record.code
              console.log('Selected shipment code:', this.selectedShipmentCode)
            }
          }
        }
      },
      rowClassName(record, index) {
        return index === this.selectIndex ? 'Rowactive' : ''
      },
      onClearSelected() {
        this.selectedRowKeys = [];
        this.selectionRows = [];
        this.selectedShipmentCode = ''
        this.selectIndex = null
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>