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

<template>
  <div class="wrapper flex column layout-gap">
    <el-card
      shadow="hover"
      class="z-card flex column flex-1 fit-size"
    >
      <div class="wrapper flex column layout-gap">
        <div class="flex valign-center">
          <el-button
           :disabled="selectedList.length === 0"
            plain
            icon="el-icon-plus"
            type="primary"
            size="small"
            class="custom-plain-button"
            @click="onCodeBtnClick"
          >赋码</el-button>

          <el-button
            :disabled="selectedList.length === 0"
            plain
            type="primary"
            size="small"
            class="custom-plain-button"
            @click="onBatchPrintBtnClick"
          >
            <div class="flex center" style="height:1em">
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="14"
                height="14"
              >
                <path d="M928 288H96v384h160v224h512V672h160zM704 832H320V544h384z m160-224h-96v-128H256v128h-96V352h704zM320 192h384v64h64V128H256v128h64v-64z" fill="currentColor"></path>
                <path d="M384 608h256v64H384zM384 704h256v64H384z" fill="currentColor"></path>
                <path d="M800 416m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="currentColor"></path>
              </svg>
              <span style="margin-left:5px;">批量打印</span>
            </div>
          </el-button>
        </div>

        <div class="flex-1 fit-size">
          <el-table
            ref="table"
            :data="list"
            stripe
            border
            height="100%"
            size="small"
            class="custom-el-table-style"
            @selection-change="onSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
              align="center"
              fixed
            ></el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="60"
              align="center"
              fixed
            ></el-table-column>
            <el-table-column
              label="订单编号"
              prop="orderNo"
              min-width="120"
              header-align="center"
              align="center"
              fixed
            ></el-table-column>
            <el-table-column
              label="流水号范围"
              prop="formatSerialNumberRange"
              min-width="200"
              header-align="center"
              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="200"
              header-align="center"
              align="left"
            ></el-table-column>
            <el-table-column
              label="标签类型"
              prop="tagTypeName"
              min-width="150"
              header-align="center"
              align="left"
            ></el-table-column>
            <el-table-column
              label="需求数量"
              prop="number"
              min-width="85"
              header-align="center"
              align="right"
            ></el-table-column>
            <el-table-column
              label="费用（元）"
              prop="amount"
              min-width="84"
              header-align="center"
              align="right"
            ></el-table-column>
            <el-table-column
              label="状态"
              prop="tagApplyStateName"
              min-width="70"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              label="操作员"
              prop="operatorName"
              min-width="85"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              label="操作栏"
              min-width="200"
              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-view">详情</edit-button>
                  <edit-button :data="row" :on-click="onPreviewBtnClick" icon="el-icon-view">预览</edit-button>
                  <edit-button :data="row" :on-click="onPrintBtnClick" icon="el-icon-view">
                    <template #icon>
                      <svg
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                      >
                        <path d="M928 288H96v384h160v224h512V672h160zM704 832H320V544h384z m160-224h-96v-128H256v128h-96V352h704zM320 192h384v64h64V128H256v128h64v-64z" fill="currentColor"></path>
                        <path d="M384 608h256v64H384zM384 704h256v64H384z" fill="currentColor"></path>
                        <path d="M800 416m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="currentColor"></path>
                      </svg>
                    </template>
                    打印
                  </edit-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <my-pagination
          :total="total"
          :pagination="pagination"
          @current-change="currentPageNoChange"
        />
      </div>
    </el-card>

    <el-card
      shadow="hover"
      class="z-card"
      style="background:#f8f8f8;"
    >
      <div class="flex column center layout-gap">
        <div class="flex center">打印预览</div>
        <div></div>
      </div>
    </el-card>

    <dialog-tag-code-serial-detail ref="editor"></dialog-tag-code-serial-detail>
  </div>
</template>

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

export default {
  name: 'TagCode',
  extends: BaseCurdList(TagCode),
  methods: {
    onOpenDetailEditorBtnClick (data) {
      this.onOpenEditorBtnClick(data, true)
    },
    onCodeBtnClick () {

    },
    onBatchPrintBtnClick () {

    },
    onPreviewBtnClick () {

    },
    onPrintBtnClick () {

    }
  }
}
</script>

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