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

<template>
  <div class="mod-oss">
    <el-dialog
      v-drag
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="400px"
      :append-to-body="true">
      <el-form>
          <el-form label-position="top">
            <el-form-item :label="'标签名称'">
              <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-form-item>
            <el-form-item label="打印机名称">
<!--              <el-select     placeholder=""-->
<!--                             filterable-->
<!--                             @blur="selectBlur"   style="width:100%" v-model="userPrint.newprintername">-->
<!--                <el-option v-for="(item,index) in printList"-->
<!--                           :key="index"-->
<!--                           :label="item.label" :value="item.label"></el-option>-->
<!--              </el-select>-->
              <el-autocomplete
                class="inline-input"
                v-model="userPrint.newprintername"
                :fetch-suggestions="querySearch"
                style="width:100% "
                placeholder="请输入内容"
              >
                <template slot-scope="{ item }">
                  <span class="addr">{{ item.label }}</span>
                </template>
              </el-autocomplete>
            </el-form-item>
          </el-form>

        <select v-show="false" ref="printElement">
        </select>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="savePrint()" type="primary">{{ buttons.save }}</el-button>
        <el-button @click="visible = false" type="primary">{{ buttons.close }}</el-button>
    </span>
    </el-dialog>




  </div>
</template>

<script>
import {saveUserLabelPrint} from '@/api/print/print.js';
export default {
  data() {
    return {
      tableHeight: 365,
      title: '用户打印机管理',
      visible: false,
      userPrint: {
        newprintername: '',
        userid: this.$store.state.user.name,
        ipaddress: '',
        reportid: '',
        reportFile: '',
      },
      printList: [],
      buttons: {
        save: "保存",
        close: "关闭"
      },
      buttonList: []
    }
  },
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.height = (window.innerHeight * 0.82);
    })
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.printList;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.label.indexOf(queryString) === 0);
      };
    },
    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.getPrintName()
    },
    // 获取所有打印机
    getPrintName(){
      this.$nextTick(() => {
        let lodop = this.getLodop()
        var elementById = this.$refs.printElement;
        lodop.Create_Printer_List(elementById)
        setTimeout(()=>{},1000)
        var children = elementById.children
        let list = []
        for (let child of children) {
          let option = {
            value: child.innerText,
            label: child.innerText
          }
          list.push(option)
        }
        this.printList = list
      })

    },

    // 保存打印机
    savePrint(){
      this.userPrint.userid = this.$store.state.user.name
      saveUserLabelPrint(this.userPrint).then(({data}) =>{
        if (data.code === 0){
          this.$message.success(data.msg)
          this.visible = false
          this.$emit('refreshDataList')
        }else {
          this.$message.warning(data.msg)
        }
      })
    }
  },
  created() {
  }
}
</script>