Jeff.RFID.UI/src/views/TagDistribute.vue

<template>
    <div class="wrapper flex column layout-gap">
      <el-card shadow="hover" class="filter-card">
        <el-form label-width="100px">
          <el-row :gutter="$$Constant.LAYOUT_GAP">
            <el-col :span="8">
                <el-form-item label="申领状态">
                    <my-select
                        v-model="query.tagApplyStateId"
                        :options="optionGroup.TagApplyState ? optionGroup.TagApplyState.list : []"
                        @change="onSearchBtnClick"
                    >
              <el-option label="全部" value=""></el-option>
            </my-select>
          </el-form-item>
            </el-col>
            <el-col :span="16" class="text-right">
              <el-button
                plain
                class="filter-button"
                @click="onResetBtnClick"
              >重置</el-button>
              <el-button
                type="primary"
                class="filter-button"
                @click="onSearchBtnClick"
              >查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <el-card
        shadow="hover"
        class="z-card flex column flex-1 fit-size"
      >
        <div class="wrapper flex column layout-gap">

          <div class="flex-1 fit-size">
            <el-table
              ref="table"
              :data="list"
              stripe
              border
              highlight-current-row
              height="100%"
              size="small"
              class="custom-el-table-style"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
                fixed
              ></el-table-column>
              <el-table-column
                label="订单编号"
                prop="orderNo"
                align="center"
                min-width="110"
                header-align="center"
              ></el-table-column>
              <el-table-column
                label="申领日期"
                prop="formatDataTime"
                min-width="100"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                label="预期收货日期"
                prop="formatExpectedReceiptDate"
                min-width="100"
                header-align="center"
                align="center"
              ></el-table-column>
              <el-table-column
                label="供应商名称"
                prop="providerName"
                min-width="160"
                header-align="center"
                align="left"
              ></el-table-column>
              <el-table-column
                label="费用（元）"
                prop="amount"
                align="right"
                min-width="70"
                header-align="center"
              ></el-table-column>
              <el-table-column
                label="状态"
                prop="tagApplyStateName"
                align="center"
                min-width="70"
                header-align="center"
              ></el-table-column>
              <el-table-column
                label="发货方式"
                prop="deliveryMethodName"
                align="center"
                min-width="80"
                header-align="center"
              ></el-table-column>
              <el-table-column
                label="发货单号"
                prop="deliveryOrderNo"
                align="center"
                min-width="120"
                header-align="center"
              ></el-table-column>
              <el-table-column
                label="操作员"
                prop="operatorName"
                align="center"
                min-width="70"
                header-align="center"
              ></el-table-column>
              <el-table-column
                label="操作栏"
                min-width="130"
                header-align="center"
                align="center"
              >
                <template v-slot="{ row }">
                  <div class="flex center layout-gap">
                    <edit-button :data="row" :on-click="onOpenDetailEditorBtnClick" icon="el-icon-tickets">详情</edit-button>
                    <edit-button :data="row" :on-click="onTagDistributeBtnClick" icon="el-icon-share" :disabled="row.tagApplyStateId !== '4' && row.tagApplyStateId !== '5'">发放</edit-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <my-pagination
            :total="total"
            :pagination="pagination"
            @current-change="currentPageNoChange"
          />
        </div>
      </el-card>
      <dialog-tag-distribute
      ref="editor"
      :optionGroup="optionGroup"
      @saved="loadList"
    ></dialog-tag-distribute>

    <dialog-tag-distribute-detail
      ref="tagDistributeDetailDialog"
    ></dialog-tag-distribute-detail>
    </div>
  </template>

<script>
import BaseCurdList from '@@/utils/BaseCurdList'
import TagDistribute from '@@/entries/TagDistribute'

export default {
  name: 'TagDistribute',
  extends: BaseCurdList(TagDistribute),
  methods: {
    onTagDistributeBtnClick (data) {
      this.onOpenEditorBtnClick(data, data.tagApplyStateId === '5')
    },
    onOpenDetailEditorBtnClick (data) {
      this.$$request(TagDistribute.$$api.getDetail, data, this)
        .then(data => {
          this.$refs.tagDistributeDetailDialog.open(data)
        }).catch(console.error).finally(() => {})
    }
  }
}
</script>

<style lang="scss" scoped></style>