打印机维护 2022-05-15 sxm

src/api/print/outBoxPrint.js

@@ -0,0 +1,19 @@
+import { createAPI } from "@/utils/httpRequest.js";
+
+// 根据订单获取打印数据
+export const getBoxLabelSO = data => createAPI(`/outBoxPrint/getBoxLabelSO/${data}`,'get')
+
+// 根据卷号获取 打印数据
+export const getBoxLabelSOByRollNo = data => createAPI(`/outBoxPrint/getBoxLabelSOByRollNo/${data}`,'get')
+
+// 获取可用模板列表
+export const getReportFileByCustomer = data => createAPI(`/outBoxPrint/getReportFileByCustomer/${data.customerId}/${data.reportFamily}`,'get')
+
+// 获取子模版列表
+export const getReportSubFileList = data => createAPI(`/outBoxPrint/getReportSubFileList`,'post',data)
+
+// 获取模板手工参数
+export const getReportParameters = data => createAPI(`/outBoxPrint/getReportParameters/${data}`,'get')
+
+// 打印
+export const ouBoxPrintLabel = data => createAPI(`/outBoxPrint/ouBoxPrintLabel`,'post',data)

src/api/print/print.js

@@ -1,7 +1,7 @@
 import { createAPI } from "@/utils/httpRequest.js";
 
 // 获取用户打印机
-export const getUserLabelPrintList = data => createAPI(`/sysUserPrinter/getUserPrint/${data.userName}`,'get')
+export const getUserLabelPrintList = data => createAPI(`/sysUserPrinter/getUserPrintReportList`,'post',data)
 
 // 保存用户打印机
 export const saveUserLabelPrint = data => createAPI('/sysUserPrinter/saveUserLabelPrint','post',data)

src/utils/decimalUtil.js

@@ -1,6 +1,17 @@
-import { Decimal } from "decimal.js";
+import {Decimal} from "decimal.js";
 // args第一位为被操作数据
 
+//保留小数向上取整
+function formatUp(num, len) {
+  return new Decimal(num).toDecimalPlaces(len, Decimal.ROUND_UP).toString()
+}
+
+
+//保留小数向下取整
+function formatDown(num, len) {
+  return new Decimal(num).toDecimalPlaces(len, Decimal.ROUND_DOWN).toNumber()
+}
+
 //加法
 function add(...args) {
   let result = new Decimal(args[0]);
@@ -9,6 +20,7 @@ function add(...args) {
   }
   return result.toNumber();
 }
+
 //减法
 function sub(...args) {
   let result = new Decimal(args[0]);
@@ -17,6 +29,7 @@ function sub(...args) {
   }
   return result.toNumber();
 }
+
 //乘法
 function mul(...args) {
   let result = new Decimal(args[0]);
@@ -25,6 +38,7 @@ function mul(...args) {
   }
   return result.toNumber();
 }
+
 //除法
 function div(...args) {
   let result = new Decimal(args[0]);
@@ -34,9 +48,21 @@ function div(...args) {
   return result.toNumber();
 }
 
+//取余
+function mod(...args) {
+  let result = new Decimal(args[0]);
+  for (let i = 1; i < args.length; i++) {
+    result = result.modulo(new Decimal(args[i]));
+  }
+  return result.toNumber();
+}
+
 export default {
+  formatUp,
+  formatDown,
   add,
   sub,
   mul,
-  div
+  div,
+  mod
 };

src/views/modules/common/print-list.vue

@@ -10,13 +10,15 @@
       <el-form>
           <el-form label-position="top">
             <el-form-item :label="'标签名称'">
-              <el-input v-model="userPrint.labelName" readonly></el-input>
+              <el-input v-model="userPrint.reportfile" readonly></el-input>
             </el-form-item>
             <el-form-item :label="'打印机地址'">
-              <el-input v-model="userPrint.ipAddress" ></el-input>
+              <el-input v-model="userPrint.ipaddress" ></el-input>
             </el-form-item>
             <el-form-item label="打印机名称">
-              <el-select style="width:100%" v-model="userPrint.printerName">
+              <el-select     placeholder=""
+                             filterable
+                             @blur="selectBlur"   style="width:100%" v-model="userPrint.printername">
                 <el-option v-for="(item,index) in printList"
                            :key="index"
                            :label="item.label" :value="item.label"></el-option>
@@ -49,10 +51,11 @@ export default {
       title: '用户打印机管理',
       visible: false,
       userPrint: {
-        printerName: '',
-        userId: this.$store.state.user.name,
-        ipAddress: '',
-        labelName: '',
+        printername: '',
+        userid: this.$store.state.user.name,
+        ipaddress: '',
+        reportid: '',
+        reportFile: '',
       },
       printList: [],
       buttons: {
@@ -69,11 +72,14 @@ export default {
     })
   },
   methods: {
+    selectBlur(e){
+      this.userPrint.printername = e.target.value
+    },
     // 初始化
     init(val) {
       this.visible = true
       this.userPrint = val
-      this.userPrint.ipAddress = val.ipAddress?val.ipAddress: '127.0.0.1'
+      this.userPrint.ipaddress = val.ipaddress?val.ipaddress: '127.0.0.1'
       this.getPrintName()
     },
     // 获取所有打印机
@@ -83,7 +89,6 @@ export default {
         var elementById = this.$refs.printElement;
         lodop.Create_Printer_List(elementById)
         setTimeout(()=>{},1000)
-        console.log(elementById)
         var children = elementById.children
         let list = []
         for (let child of children) {
@@ -100,7 +105,7 @@ export default {
 
     // 保存打印机
     savePrint(){
-      this.userPrint.userId = this.$store.state.user.name
+      this.userPrint.userid = this.$store.state.user.name
       saveUserLabelPrint(this.userPrint).then(({data}) =>{
         if (data.code === 0){
           this.$message.success(data.msg)

src/views/modules/common/user-print-list.vue

@@ -8,6 +8,14 @@
       width="955px"
       :append-to-body="true">
 
+      <el-form inline="inline" label-position="top">
+        <el-form-item :label="'模板名称'">
+          <el-input v-model="reportfile"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button style="margin-top: 22px" @click="getDataList()" type="primary">{{ buttons.select }}</el-button>
+        </el-form-item>
+      </el-form>
       <el-table
         :height="tableHeight"
         :data="dataList"
@@ -66,14 +74,15 @@ export default {
       dataForm: {
         fileName: ''
       },
+      reportfile: '',
       dataList: [],
       printList: [],
       columnList: [
         {
           "tableId": "common1001",
           "tableName": "common",
-          "columnProp": "labelName",
-          "columnLabel": "标签名称",
+          "columnProp": "reportfile",
+          "columnLabel": "模板名称",
           "columnHidden": false,
           "columnImage": false,
           "columnSortable": false,
@@ -90,7 +99,7 @@ export default {
         {
           "tableId": "common1001",
           "tableName": "common",
-          "columnProp": "userId",
+          "columnProp": "userid",
           "columnLabel": "用户名",
           "columnHidden": false,
           "columnImage": false,
@@ -108,7 +117,7 @@ export default {
         {
           "tableId": "common1001",
           "tableName": "common",
-          "columnProp": "ipAddress",
+          "columnProp": "ipaddress",
           "columnLabel": "打印机地址",
           "columnHidden": false,
           "columnImage": false,
@@ -126,7 +135,7 @@ export default {
         {
           "tableId": "common1001",
           "tableName": "common",
-          "columnProp": "printerName",
+          "columnProp": "printername",
           "columnLabel": "打印机名称",
           "columnHidden": false,
           "columnImage": false,
@@ -144,7 +153,8 @@ export default {
       ],
       buttons: {
         settingPrint: "设置打印机",
-        operate: "操作"
+        operate: "操作",
+        select: "查询",
       },
       buttonList: []
     }
@@ -167,9 +177,9 @@ export default {
     },
     // 获取数据列表
     getDataList() {
-
       let query = {
-        userName: this.$store.state.user.name
+        userid: this.$store.state.user.name,
+        reportfile: this.reportfile
       }
       getUserLabelPrintList(query).then(({data}) => {
         if (data.code === 0) {

src/views/modules/labelPrint/outer-box-label-roll.vue

@@ -0,0 +1,701 @@
+<template>
+  <div class="sl-el">
+
+    <el-container>
+      <el-main style="width: 75%">
+        <el-row>
+          <el-col :span="18">
+            <el-form @submit.native.prevent label-position="top">
+              <el-form-item style="width: 60%" :label="'请输入卷号:'">
+                <el-input placeholder="请输入内容" v-model="rollNo" class="input-with-select"
+                          @keyup.enter.native="getBoxSoAndReportFile()">
+                  <el-button @click="getBoxSoAndReportFile()" slot="append" icon="el-icon-search"></el-button>
+                </el-input>
+              </el-form-item>
+            </el-form>
+          </el-col>
+          <el-col :span="6"></el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <span>请选择标签:</span>
+            <el-table
+              :data="reportFileList"
+              border
+              ref="reportFileTable"
+              highlight-current-row
+              @current-change="handleCurrentChange"
+              height="150px">
+              <el-table-column
+                v-for="(item,index) in reportColumnList" :key="index"
+                :sortable="item.columnSortable"
+                :prop="item.columnProp"
+                :header-align="item.headerAlign"
+                :show-overflow-tooltip="item.showOverflowTooltip"
+                :align="item.align"
+                :fixed="item.fixed"
+                :min-width="item.columnWidth"
+
+                :label="item.columnLabel">
+                <template slot-scope="scope">
+                  <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
+                  <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
+                                                     style="width: 100px; height: 80px"/></span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <span>打印格式名称:</span>
+            <el-input type="textarea" v-model="selectReportString" readonly :rows="3"></el-input>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <fieldset class="customer-fieldset" style="width: 100%; margin-left: 0px">
+              <legend>数量</legend>
+              <el-form inline="inline" style="width: 100%" label-position="top">
+                <el-form-item style="width: 23%;" label="总数量">
+                  <el-input type="number" v-model="orderInfo.totalQty" min="1"></el-input>
+                </el-form-item>
+                <el-form-item style="width: 23%;" label="每箱数量">
+                  <el-input type="number" v-model="orderInfo.perBoxQty" min="1"></el-input>
+                </el-form-item>
+                <el-form-item style="width: 23%;" label="箱数">
+                  <el-input v-model="orderInfo.boxQty" readonly></el-input>
+                </el-form-item>
+                <el-form-item style="width: 23%;" label="末箱数量">
+                  <el-input v-model="orderInfo.lastBoxQty" readonly></el-input>
+                </el-form-item>
+              </el-form>
+            </fieldset>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-tabs style="font-size: 14px" v-model="activeName" type="border-card" @tab-click="handleClick"
+                     class="customer-tab">
+              <el-tab-pane label="打印参数" name="first">
+                <el-table
+                  :data="reportParamList"
+                  :cell-style="customerCellStyle" :cell-class-name="customerCellClassName"
+                  border
+                  :height="height"
+                >
+                  <el-table-column
+                    v-for="(item,index) in printParamColumnList" :key="index"
+                    :sortable="item.columnSortable"
+                    :prop="item.columnProp"
+                    :header-align="item.headerAlign"
+                    :show-overflow-tooltip="item.showOverflowTooltip"
+                    :align="item.align"
+                    :fixed="item.fixed"
+                    :min-width="item.columnWidth"
+                    :label="item.columnLabel">
+                    <template slot-scope="scope">
+                      <span v-if="item.columnHidden">
+                        <span v-if="scope.row.valuetypeDb === 'T'">
+                             <el-input v-model='scope.row[item.columnProp]'> </el-input>
+                        </span>
+                         <span v-if="scope.row.valuetypeDb === 'D'">
+                             <el-date-picker style="width: 100%;"
+                                             v-model='scope.row[item.columnProp]'> </el-date-picker>
+                        </span>
+                         <span v-if="scope.row.valuetypeDb === 'I'">
+                             <el-input type="number" v-model='scope.row[item.columnProp]' min="1"> </el-input>
+                        </span>
+
+                      </span>
+                      <span v-else>{{ scope.row[item.columnProp] }}</span>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-tab-pane>
+              <el-tab-pane style="font-size: 12px" label="标签内容预览" name="second">
+                <el-table
+                  border
+                  :height="height"
+                >
+                  <el-table-column
+                    v-for="(item,index) in reportContextColumnList" :key="index"
+                    :sortable="item.columnSortable"
+                    :prop="item.columnProp"
+                    :header-align="item.headerAlign"
+                    :show-overflow-tooltip="item.showOverflowTooltip"
+                    :align="item.align"
+                    :fixed="item.fixed"
+                    :min-width="item.columnWidth"
+
+                    :label="item.columnLabel">
+                    <template slot-scope="scope">
+                      <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
+                      <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
+                                                         style="width: 100px; height: 80px"/></span>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-tab-pane>
+            </el-tabs>
+          </el-col>
+        </el-row>
+      </el-main>
+      <el-main style="margin-left: 0px">
+        <el-row>
+          <el-col :span="6">
+            <el-form>
+              <el-form-item style="margin-top: 20px">
+                <el-button type="primary">列表</el-button>
+              </el-form-item>
+              <el-form-item style="margin-top: 20px">
+                <el-button type="primary" @click="bartenderPrint">打印</el-button>
+              </el-form-item>
+            </el-form>
+          </el-col>
+        </el-row>
+      </el-main>
+    </el-container>
+
+  </div>
+</template>
+
+<script>
+
+import {
+  getBoxLabelSOByRollNo,
+  getReportFileByCustomer,
+  getReportSubFileList,
+  getReportParameters,
+  ouBoxPrintLabel
+} from '@/api/print/outBoxPrint.js';
+
+export default {
+  components: {},
+  data() {
+    return {
+      rollNo: '',
+      activeName: 'first',
+      height: 200,
+      // 模板
+      reportColumnList: [
+        {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "reportid",
+          columnLabel: "报告编号",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "Reportfile",
+          columnLabel: "报告文件名",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "Remark",
+          columnLabel: "备注",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "DefaultFlag",
+          columnLabel: "默认格式",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        },
+
+      ],
+      // 打印参数
+      printParamColumnList: [
+        {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "parametername",
+          columnLabel: "参数名",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "parameterdesc",
+          columnLabel: "参数标题",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "optionvalue",
+          columnLabel: "参数值",
+          columnHidden: true,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "valuetype",
+          columnLabel: "参数类型",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        },
+
+      ],
+      // 标签内容
+      reportContextColumnList: [
+        {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "functionId",
+          columnLabel: "报告编号",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "functionId",
+          columnLabel: "内容描述",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "functionId",
+          columnLabel: "Bartender子字符串名",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "functionId",
+          columnLabel: "内容值",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        },
+
+      ],
+      // 数据
+      // 可用模板列表
+      reportFileList: [],
+      // 选中模板列表
+      selectReportFileList: [],
+      selectReportString: '',
+      // 数量
+      orderInfo: {
+        userName: this.$store.state.user.name,
+        rollNo: '',
+        customerId: '',
+        totalQty: 0,
+        perBoxQty: 0,
+        boxQty: 0,
+        lastBoxQty: 0,
+        // 选中模板列表
+        reportFileList: [],
+        // 手工参数
+        param:[]
+      },
+      // 临时参数记录
+      tempParamList:[],
+      // 模板参数列表
+      reportParamList: [],
+      buttons: {
+        settingLanguageList: '按语言设置',
+        edit: '编辑',
+        delete: '删除',
+        deleteList: '批量删除',
+        cz: '操作',
+        search: '查询',
+        download: '导出',
+        settingTable: '设置列表',
+        defaultTable: '设置默认配置',
+        list: "列表",
+        addList: '批量添加',
+        settingLanguage: "按控件设置"
+      },
+      // 导出 end
+      buttonList: [
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '按语言设置',
+          objectId: 'settingLanguageList',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '编辑',
+          objectId: 'edit',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '删除',
+          objectId: 'delete',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '批量删除',
+          objectId: 'deleteList',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '操作',
+          objectId: 'cz',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '查询',
+          objectId: 'search',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '导出',
+          objectId: 'download',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '设置列表',
+          objectId: 'settingTable',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '设置默认配置',
+          objectId: 'defaultTable',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '列表',
+          objectId: 'list',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '按控件设置',
+          objectId: 'settingLanguage',
+          objectType: "button",
+          tableId: "common1001"
+        }
+      ],
+    }
+  },
+  watch: {
+    orderInfo: {
+      handler: function (val, oldVal) {
+        if (this.orderInfo.totalQty > 0 && this.orderInfo.perBoxQty > 0) {
+          this.orderInfo.lastBoxQty = this.decimalUtil.mod(this.orderInfo.totalQty, this.orderInfo.perBoxQty)
+          if (this.decimalUtil.div(this.orderInfo.totalQty, this.orderInfo.perBoxQty) < 1) {
+            this.orderInfo.boxQty = 1
+          } else {
+            this.orderInfo.boxQty = this.decimalUtil.formatDown(this.decimalUtil.div(this.orderInfo.totalQty, this.orderInfo.perBoxQty), 0)
+          }
+
+        }
+      },
+      // 深度观察监听
+      deep: true
+    },
+    updateData: {
+      deep: true,
+      handler: function (newV, oldV) {
+        this.updateData.projectID = this.updateData.projectID.toUpperCase();
+        this.updateData.oriSOOrderNo = this.updateData.oriSOOrderNo.toUpperCase();
+        this.updateData.orderType = this.updateData.orderType.toUpperCase();
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.height = window.innerHeight - 510;
+    })
+  },
+
+  methods: {
+    // 调用bartender打印
+    bartenderPrint() {
+      if (this.selectReportFileList.length === 0) {
+        this.$message.warning('选择模板进行打印')
+        return
+      }
+      this.orderInfo.reportFileList = this.selectReportFileList
+      this.orderInfo.param = this.reportParamList
+      this.tempParamList = this.reportParamList
+      ouBoxPrintLabel(this.orderInfo).then(({data}) =>{
+        if (data.code === 0 ){
+            this.$message.success(data.msg)
+        }else {
+          this.$message.warning(data.msg)
+        }
+      })
+    },
+    // 获取订单信息
+    searchBoxLabelSO() {
+      this.reportFileList = []
+      getBoxLabelSOByRollNo(this.rollNo).then(({data}) => {
+        if (data.code === 0) {
+          this.orderInfo.customerId = data.data.customerId ? data.data.customerId : '*'
+          this.orderInfo.totalQty =  data.data.sumQty
+          this.orderInfo.perBoxQty = data.data.boxQty
+          this.orderInfo.rollNo = this.rollNo
+          let query = {
+            customerId: data.data.customerId ? data.data.customerId : '*',
+            reportFamily: '外箱标签'
+          }
+          getReportFileByCustomer(query).then(({data}) => {
+            if (data.code === 0) {
+              this.reportFileList = data.dataList
+              this.$refs.reportFileTable.setCurrentRow(this.reportFileList[0]);
+            } else {
+              this.$message.warning(data.msg)
+              Object.assign(this.$data, this.$options.data.call(this.orderInfo));
+              Object.assign(this.$data, this.$options.data.call(this.selectReportString));
+              Object.assign(this.$data, this.$options.data.call(this.reportParamList));
+            }
+          })
+        } else {
+          this.$message.warning(data.msg)
+          Object.assign(this.$data, this.$options.data.call(this));
+        }
+      })
+    },
+    // 获取订单数数据 和 打印 模板数据
+    getBoxSoAndReportFile() {
+      this.searchBoxLabelSO()
+    },
+    handleClick() {
+
+    },
+    // 选择模板
+    handleCurrentChange(val) {
+      if (!val) return
+      this.selectReportFileList = []
+      let query = {
+        reportId: val.reportid,
+        defaultFlag: val.DefaultFlag,
+        reportFile: val.Reportfile,
+        reportFamily: '外箱标签',
+        customerId: this.orderInfo.customerId,
+      }
+      this.selectReportFileList.push(query)
+      this.searchReportSubFileList(query)
+      this.searchReportParameters(query)
+
+    },
+    // 获取子模版
+    searchReportSubFileList(val) {
+      let str = ''
+      str += val.reportId + ' | ' + val.reportFile + '\n'
+      this.selectReportString = str
+      getReportSubFileList(val).then(({data}) => {
+        if (data.code === 0) {
+          for (let item of data.data) {
+            str += item.reportid + ' | ' + item.Reportfile + '\n'
+            let reportFile = {
+              reportId: item.reportid,
+              defaultFlag: 'Y',
+              reportFile: item.Reportfile,
+              reportFamily: '外箱标签',
+              customerId: this.orderInfo.customerId,
+            }
+            this.selectReportFileList.push(reportFile)
+          }
+          this.selectReportString = str
+        }
+      })
+
+    },
+    // 获取柱模版打印参数
+    searchReportParameters(val) {
+      getReportParameters(val.reportId).then(({data}) => {
+        if (data.code === 0) {
+          this.reportParamList = data.data
+          this.tempParamList
+          for (let item of   this.tempParamList) {
+            
+          }
+        }
+      })
+    },
+    /*添加定制的css类*/
+    customerCellClassName({row, column, rowIndex, columnIndex}) {
+      if (columnIndex === 2) {
+        return 'customer-text-cell';
+      }
+    },
+
+    /*添加定制的cess样式*/
+    customerCellStyle({row, column, rowIndex, columnIndex}) {
+      if (columnIndex === 2) {
+        return 'padding: 0px 0px;';
+      }
+    },
+  },
+  created() {
+
+  }
+}
+</script>
+<style scoped>
+
+/deep/ .customer-tab .el-tabs__content {
+  padding: 0px !important;
+}
+
+/deep/ .sl-el .el-tabs__item {
+  padding: 0 13px;
+  height: 26px;
+  line-height: 26px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/deep/ div.table-input {
+  padding: 0px 0px;
+  height: 25px !important;
+}
+
+/*table中input*/
+div.table-input /deep/ input.el-input__inner {
+  padding: 0px 0px;
+  height: 23px !important;
+  text-align: right;
+}
+</style>

src/views/modules/labelPrint/outer-box-label.vue

@@ -0,0 +1,694 @@
+<template>
+  <div class="sl-el">
+
+    <el-container>
+      <el-main style="width: 75%">
+        <el-row>
+          <el-col :span="18">
+            <el-form @submit.native.prevent label-position="top">
+              <el-form-item style="width: 60%" :label="'请输入订单号:'">
+                <el-input placeholder="请输入内容" v-model="orderNo" class="input-with-select"
+                          @keyup.enter.native="getBoxSoAndReportFile()">
+                  <el-button @click="getBoxSoAndReportFile()" slot="append" icon="el-icon-search"></el-button>
+                </el-input>
+              </el-form-item>
+            </el-form>
+          </el-col>
+          <el-col :span="6"></el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <span>请选择标签:</span>
+            <el-table
+              :data="reportFileList"
+              border
+              ref="reportFileTable"
+              highlight-current-row
+              @current-change="handleCurrentChange"
+              height="150px">
+              <el-table-column
+                v-for="(item,index) in reportColumnList" :key="index"
+                :sortable="item.columnSortable"
+                :prop="item.columnProp"
+                :header-align="item.headerAlign"
+                :show-overflow-tooltip="item.showOverflowTooltip"
+                :align="item.align"
+                :fixed="item.fixed"
+                :min-width="item.columnWidth"
+
+                :label="item.columnLabel">
+                <template slot-scope="scope">
+                  <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
+                  <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
+                                                     style="width: 100px; height: 80px"/></span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <span>打印格式名称:</span>
+            <el-input type="textarea" v-model="selectReportString" readonly :rows="3"></el-input>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <fieldset class="customer-fieldset" style="width: 100%; margin-left: 0px">
+              <legend>数量</legend>
+              <el-form inline="inline" style="width: 100%" label-position="top">
+                <el-form-item style="width: 23%;" label="总数量">
+                  <el-input type="number" v-model="orderInfo.totalQty" min="1"></el-input>
+                </el-form-item>
+                <el-form-item style="width: 23%;" label="每箱数量">
+                  <el-input type="number" v-model="orderInfo.perBoxQty" min="1"></el-input>
+                </el-form-item>
+                <el-form-item style="width: 23%;" label="箱数">
+                  <el-input v-model="orderInfo.boxQty" readonly></el-input>
+                </el-form-item>
+                <el-form-item style="width: 23%;" label="末箱数量">
+                  <el-input v-model="orderInfo.lastBoxQty" readonly></el-input>
+                </el-form-item>
+              </el-form>
+            </fieldset>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-tabs style="font-size: 14px" v-model="activeName" type="border-card" @tab-click="handleClick"
+                     class="customer-tab">
+              <el-tab-pane label="打印参数" name="first">
+                <el-table
+                  :data="reportParamList"
+                  :cell-style="customerCellStyle" :cell-class-name="customerCellClassName"
+                  border
+                  :height="height"
+                >
+                  <el-table-column
+                    v-for="(item,index) in printParamColumnList" :key="index"
+                    :sortable="item.columnSortable"
+                    :prop="item.columnProp"
+                    :header-align="item.headerAlign"
+                    :show-overflow-tooltip="item.showOverflowTooltip"
+                    :align="item.align"
+                    :fixed="item.fixed"
+                    :min-width="item.columnWidth"
+                    :label="item.columnLabel">
+                    <template slot-scope="scope">
+                      <span v-if="item.columnHidden">
+                        <span v-if="scope.row.valuetypeDb === 'T'">
+                             <el-input v-model='scope.row[item.columnProp]'> </el-input>
+                        </span>
+                         <span v-if="scope.row.valuetypeDb === 'D'">
+                             <el-date-picker style="width: 100%;"
+                                             v-model='scope.row[item.columnProp]'> </el-date-picker>
+                        </span>
+                         <span v-if="scope.row.valuetypeDb === 'I'">
+                             <el-input type="number" v-model='scope.row[item.columnProp]' min="1"> </el-input>
+                        </span>
+
+                      </span>
+                      <span v-else>{{ scope.row[item.columnProp] }}</span>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-tab-pane>
+              <el-tab-pane style="font-size: 12px" label="标签内容预览" name="second">
+                <el-table
+                  border
+                  :height="height"
+                >
+                  <el-table-column
+                    v-for="(item,index) in reportContextColumnList" :key="index"
+                    :sortable="item.columnSortable"
+                    :prop="item.columnProp"
+                    :header-align="item.headerAlign"
+                    :show-overflow-tooltip="item.showOverflowTooltip"
+                    :align="item.align"
+                    :fixed="item.fixed"
+                    :min-width="item.columnWidth"
+
+                    :label="item.columnLabel">
+                    <template slot-scope="scope">
+                      <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
+                      <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
+                                                         style="width: 100px; height: 80px"/></span>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-tab-pane>
+            </el-tabs>
+          </el-col>
+        </el-row>
+      </el-main>
+      <el-main style="margin-left: 0px">
+        <el-row>
+          <el-col :span="6">
+            <el-form>
+              <el-form-item style="margin-top: 20px">
+                <el-button type="primary">列表</el-button>
+              </el-form-item>
+              <el-form-item style="margin-top: 20px">
+                <el-button type="primary" @click="bartenderPrint">打印</el-button>
+              </el-form-item>
+            </el-form>
+          </el-col>
+        </el-row>
+      </el-main>
+    </el-container>
+
+  </div>
+</template>
+
+<script>
+
+import {
+  getBoxLabelSO,
+  getReportFileByCustomer,
+  getReportSubFileList,
+  getReportParameters,
+  ouBoxPrintLabel
+} from '@/api/print/outBoxPrint.js';
+
+export default {
+  components: {},
+  data() {
+    return {
+      orderNo: '',
+      activeName: 'first',
+      height: 200,
+      // 模板
+      reportColumnList: [
+        {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "reportid",
+          columnLabel: "报告编号",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "Reportfile",
+          columnLabel: "报告文件名",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "Remark",
+          columnLabel: "备注",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "DefaultFlag",
+          columnLabel: "默认格式",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        },
+
+      ],
+      // 打印参数
+      printParamColumnList: [
+        {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "parametername",
+          columnLabel: "参数名",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "parameterdesc",
+          columnLabel: "参数标题",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "optionvalue",
+          columnLabel: "参数值",
+          columnHidden: true,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "valuetype",
+          columnLabel: "参数类型",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        },
+
+      ],
+      // 标签内容
+      reportContextColumnList: [
+        {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "functionId",
+          columnLabel: "报告编号",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "functionId",
+          columnLabel: "内容描述",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "functionId",
+          columnLabel: "Bartender子字符串名",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        }, {
+          tableId: "common1001",
+          tableName: "common",
+          columnProp: "functionId",
+          columnLabel: "内容值",
+          columnHidden: false,
+          columnImage: false,
+          columnSortable: false,
+          columnWidth: null,
+          format: null,
+          functionId: this.$route.meta.menuId,
+          sortLv: 0,
+          status: true,
+          fixed: false,
+          serialNumber: null,
+          columnType: null,
+          align: null
+        },
+
+      ],
+      // 数据
+      // 可用模板列表
+      reportFileList: [],
+      // 选中模板列表
+      selectReportFileList: [],
+      selectReportString: '',
+      // 数量
+      orderInfo: {
+        userName: this.$store.state.user.name,
+        orderNo: '',
+        customerId: '',
+        totalQty: 0,
+        perBoxQty: 0,
+        boxQty: 0,
+        lastBoxQty: 0,
+        // 选中模板列表
+        reportFileList: [],
+        // 手工参数
+        param:[]
+      },
+      // 模板参数列表
+      reportParamList: [],
+      buttons: {
+        settingLanguageList: '按语言设置',
+        edit: '编辑',
+        delete: '删除',
+        deleteList: '批量删除',
+        cz: '操作',
+        search: '查询',
+        download: '导出',
+        settingTable: '设置列表',
+        defaultTable: '设置默认配置',
+        list: "列表",
+        addList: '批量添加',
+        settingLanguage: "按控件设置"
+      },
+      // 导出 end
+      buttonList: [
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '按语言设置',
+          objectId: 'settingLanguageList',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '编辑',
+          objectId: 'edit',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '删除',
+          objectId: 'delete',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '批量删除',
+          objectId: 'deleteList',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '操作',
+          objectId: 'cz',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '查询',
+          objectId: 'search',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '导出',
+          objectId: 'download',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '设置列表',
+          objectId: 'settingTable',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '设置默认配置',
+          objectId: 'defaultTable',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '列表',
+          objectId: 'list',
+          objectType: "button",
+          tableId: "common1001"
+        },
+        {
+          functionId: this.$route.meta.menuId,
+          languageValue: '按控件设置',
+          objectId: 'settingLanguage',
+          objectType: "button",
+          tableId: "common1001"
+        }
+      ],
+    }
+  },
+  watch: {
+    orderInfo: {
+      handler: function (val, oldVal) {
+        if (this.orderInfo.totalQty > 0 && this.orderInfo.perBoxQty > 0) {
+          this.orderInfo.lastBoxQty = this.decimalUtil.mod(this.orderInfo.totalQty, this.orderInfo.perBoxQty)
+          if (this.decimalUtil.div(this.orderInfo.totalQty, this.orderInfo.perBoxQty) < 1) {
+            this.orderInfo.boxQty = 1
+          } else {
+            this.orderInfo.boxQty = this.decimalUtil.formatDown(this.decimalUtil.div(this.orderInfo.totalQty, this.orderInfo.perBoxQty), 0)
+          }
+
+        }
+      },
+      // 深度观察监听
+      deep: true
+    },
+    updateData: {
+      deep: true,
+      handler: function (newV, oldV) {
+        this.updateData.projectID = this.updateData.projectID.toUpperCase();
+        this.updateData.oriSOOrderNo = this.updateData.oriSOOrderNo.toUpperCase();
+        this.updateData.orderType = this.updateData.orderType.toUpperCase();
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.height = window.innerHeight - 510;
+    })
+  },
+
+  methods: {
+    // 调用bartender打印
+    bartenderPrint() {
+      if (this.selectReportFileList.length === 0) {
+        this.$message.warning('选择模板进行打印')
+        return
+      }
+      this.orderInfo.reportFileList = this.selectReportFileList
+      this.orderInfo.param = this.reportParamList
+      ouBoxPrintLabel(this.orderInfo).then(({data}) =>{
+        if (data.code === 0 ){
+            this.$message.success(data.msg)
+        }else {
+          this.$message.warning(data.msg)
+        }
+      })
+    },
+    // 获取订单信息
+    searchBoxLabelSO() {
+      this.reportFileList = []
+      getBoxLabelSO(this.orderNo).then(({data}) => {
+        if (data.code === 0) {
+          this.orderInfo.customerId = data.data.customerId ? data.data.customerId : '*'
+          this.orderInfo.totalQty =  data.data.sumQty
+          this.orderInfo.perBoxQty = data.data.boxQty
+          this.orderInfo.orderNo = this.orderNo
+          let query = {
+            customerId: data.data.customerId ? data.data.customerId : '*',
+            reportFamily: '外箱标签'
+          }
+          getReportFileByCustomer(query).then(({data}) => {
+            if (data.code === 0) {
+              this.reportFileList = data.dataList
+              this.$refs.reportFileTable.setCurrentRow(this.reportFileList[0]);
+            } else {
+              this.$message.warning(data.msg)
+              Object.assign(this.$data, this.$options.data.call(this.orderInfo));
+              Object.assign(this.$data, this.$options.data.call(this.selectReportString));
+              Object.assign(this.$data, this.$options.data.call(this.reportParamList));
+            }
+          })
+        } else {
+          this.$message.warning(data.msg)
+          Object.assign(this.$data, this.$options.data.call(this));
+        }
+      })
+    },
+    // 获取订单数数据 和 打印 模板数据
+    getBoxSoAndReportFile() {
+      this.searchBoxLabelSO()
+    },
+    handleClick() {
+
+    },
+    // 选择模板
+    handleCurrentChange(val) {
+      if (!val) return
+      this.selectReportFileList = []
+      let query = {
+        reportId: val.reportid,
+        defaultFlag: val.DefaultFlag,
+        reportFile: val.Reportfile,
+        reportFamily: '外箱标签',
+        customerId: this.orderInfo.customerId,
+      }
+      this.selectReportFileList.push(query)
+      this.searchReportSubFileList(query)
+      this.searchReportParameters(query)
+
+    },
+    // 获取子模版
+    searchReportSubFileList(val) {
+      let str = ''
+      str += val.reportId + ' | ' + val.reportFile + '\n'
+      this.selectReportString = str
+      getReportSubFileList(val).then(({data}) => {
+        if (data.code === 0) {
+          for (let item of data.data) {
+            str += item.reportid + ' | ' + item.Reportfile + '\n'
+            let reportFile = {
+              reportId: item.reportid,
+              defaultFlag: 'Y',
+              reportFile: item.Reportfile,
+              reportFamily: '外箱标签',
+              customerId: this.orderInfo.customerId,
+            }
+            this.selectReportFileList.push(reportFile)
+          }
+          this.selectReportString = str
+        }
+      })
+
+    },
+    // 获取柱模版打印参数
+    searchReportParameters(val) {
+      getReportParameters(val.reportId).then(({data}) => {
+        if (data.code === 0) {
+          this.reportParamList = data.data
+        }
+      })
+    },
+    /*添加定制的css类*/
+    customerCellClassName({row, column, rowIndex, columnIndex}) {
+      if (columnIndex === 2) {
+        return 'customer-text-cell';
+      }
+    },
+
+    /*添加定制的cess样式*/
+    customerCellStyle({row, column, rowIndex, columnIndex}) {
+      if (columnIndex === 2) {
+        return 'padding: 0px 0px;';
+      }
+    },
+  },
+  created() {
+
+  }
+}
+</script>
+<style scoped>
+
+/deep/ .customer-tab .el-tabs__content {
+  padding: 0px !important;
+}
+
+/deep/ .sl-el .el-tabs__item {
+  padding: 0 13px;
+  height: 26px;
+  line-height: 26px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+/deep/ div.table-input {
+  padding: 0px 0px;
+  height: 25px !important;
+}
+
+/*table中input*/
+div.table-input /deep/ input.el-input__inner {
+  padding: 0px 0px;
+  height: 23px !important;
+  text-align: right;
+}
+</style>

src/views/modules/oss/oss1.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="mod-oss">
+    <el-form :inline="true" :model="dataForm">
+      <el-form-item>
+        <el-button type="primary" @click="configHandle()">云存储配置</el-button>
+        <el-button type="primary" @click="uploadHandle()">上传文件</el-button>
+        <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%;">
+      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+      <el-table-column
+        prop="url"
+        header-align="center"
+        align="center"
+        label="URL地址">
+      </el-table-column>
+      <el-table-column
+        prop="createDate"
+        header-align="center"
+        align="center"
+        width="180"
+        label="创建时间">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作">
+        <template slot-scope="scope">
+          <a type="text" size="small" @click="deleteHandle(scope.row.id)">删除</a>
+          <a @click="downloadFile(scope.row.fileName, scope.row.url)">下载</a>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[20, 50, 100 , 200, 500]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
+    <!-- 弹窗, 云存储配置 -->
+    <config v-if="configVisible" ref="config"></config>
+    <!-- 弹窗, 上传文件 -->
+    <upload v-if="uploadVisible" ref="upload" @refreshDataList="getDataList"></upload>
+  </div>
+</template>
+
+<script>
+import Config from './oss-config'
+import Upload from './oss-upload'
+
+export default {
+  data() {
+    return {
+      dataForm: {},
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 20,
+      totalPage: 0,
+      dataListLoading: false,
+      dataListSelections: [],
+      configVisible: false,
+      uploadVisible: false
+    }
+  },
+  components: {
+    Config,
+    Upload
+  },
+  activated() {
+    this.getDataList()
+  },
+  methods: {
+    downloadFile(fileName, data) {
+      if (!data) {
+        return;
+      }
+      let url = window.URL.createObjectURL(new Blob([data]));
+      let link = document.createElement('a');
+      link.style.display = 'none';
+      link.href = url;
+      link.setAttribute('download', fileName);
+      document.body.appendChild(link);
+      link.click();
+    },
+    // 获取数据列表
+    getDataList() {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/sys/oss/list'),
+        method: 'get',
+        params: this.$http.adornParams({
+          'page': this.pageIndex,
+          'limit': this.pageSize
+        })
+      }).then(({data}) => {
+        if (data && data.code === 0) {
+          this.dataList = data.page.list
+          this.totalPage = data.page.totalCount
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    // 多选
+    selectionChangeHandle(val) {
+      this.dataListSelections = val
+    },
+    // 云存储配置
+    configHandle() {
+      this.configVisible = true
+      this.$nextTick(() => {
+        this.$refs.config.init()
+      })
+    },
+    // 上传文件
+    uploadHandle() {
+      this.uploadVisible = true
+      this.$nextTick(() => {
+        this.$refs.upload.init()
+      })
+    },
+    // 删除
+    deleteHandle(id) {
+      var ids = id ? [id] : this.dataListSelections.map(item => {
+        return item.id
+      })
+      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl('/sys/oss/delete'),
+          method: 'post',
+          data: this.$http.adornData(ids, false)
+        }).then(({data}) => {
+          if (data && data.code === 0) {
+            this.$message.success('操作成功')
+            this.getDataList()
+          } else {
+            this.$message.error(data.msg)
+          }
+        })
+      }).catch(() => {
+      })
+    }
+  }
+}
+</script>