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

<template>
  <div class="mod-oss">
    <el-dialog
      v-drag
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="visible"
      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"
        border
        v-loading="dataListLoading"
        style="width: 100%;">
        <el-table-column
          v-for="(item,index) in columnList" :key="index"
          :sortable="item.columnSortable"
          :prop="item.columnProp"
          :header-align="item.headerAlign"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :align="item.align"
          :fixed="item.fixed==''?false: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-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          :label="buttons.operate">
          <template slot-scope="scope">
            <a type="text" size="small" @click="printSetting(scope.row)">{{ buttons.settingPrint }}</a>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" type="primary">关闭</el-button>
    </span>
    </el-dialog>
    <PrintList ref="printListRef" v-if="printListVisible" @refreshDataList="getDataList"></PrintList>
  </div>
</template>

<script>
import {getUserLabelPrintList} from '@/api/print/print.js'
import PrintList from './print-list.vue'

export default {
  data() {
    return {
      tableHeight: 365,
      title: '打印机管理',
      visible: false,
      printListVisible: false,
      dataListLoading: true,
      dataForm: {
        fileName: ''
      },
      reportfile: '',
      dataList: [],
      printList: [],
      columnList: [
        {
          "tableId": "common1001",
          "tableName": "common",
          "columnProp": "reportfile",
          "columnLabel": "模板名称",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": '15%',
          "format": null,
          "functionId": this.$route.meta.menuId,
          "sortLv": 0,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": null,
          "align": null
        },
        {
          "tableId": "common1001",
          "tableName": "common",
          "columnProp": "userid",
          "columnLabel": "用户名",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": '15%',
          "format": null,
          "functionId": this.$route.meta.menuId,
          "sortLv": 0,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": null,
          "align": null
        },
        {
          "tableId": "common1001",
          "tableName": "common",
          "columnProp": "ipaddress",
          "columnLabel": "打印机地址",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": '20%',
          "format": null,
          "functionId": this.$route.meta.menuId,
          "sortLv": 0,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": null,
          "align": null
        },
        {
          "tableId": "common1001",
          "tableName": "common",
          "columnProp": "newprintername",
          "columnLabel": "打印机名称",
          "columnHidden": false,
          "columnImage": false,
          "columnSortable": false,
          "columnWidth": '50%',
          "format": null,
          "functionId": this.$route.meta.menuId,
          "sortLv": 0,
          "status": true,
          "fixed": false,
          "serialNumber": null,
          "columnType": null,
          "align": null
        },
      ],
      buttons: {
        settingPrint: "设置打印机",
        operate: "操作",
        select: "查询",
      },
      buttonList: []
    }
  },
  components: {PrintList,},
  mounted() {
    this.$nextTick(() => {
      this.height = (window.innerHeight * 0.82);
    })
  },
  activated() {
    this.getDataList()

  },
  methods: {
    // 初始化
    init() {
      this.visible = true
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      let query = {
        userid: this.$store.state.user.name,
        reportfile: this.reportfile
      }
      getUserLabelPrintList(query).then(({data}) => {
        if (data.code === 0) {
          this.dataList = data.dataList
        }

        this.dataListLoading = false
      })
    },
    // 设置打印机
    printSetting(row) {
      // 转换参数, 避免值传递
      let rowData = JSON.parse(JSON.stringify(row))
      this.printListVisible = true
      this.$nextTick(() => {
        this.$refs.printListRef.init(rowData)
      })
    },
    // 保存打印机
    savePrint() {


    }
  },
  created() {
  }
}
</script>