ckt-leble-vue/src/views/modules/label/userDefault.vue

<script>
import {
  getLabelFormatUserDefaultList,
  saveLabelFormatUserDefault,
  updateLabelFormatUserDefault
} from '../../../api/label/labelFormatUserDefault'
import {getTableDefaultListLanguage, getTableUserListLanguage} from '../../../api/table'
import getLodop from '@/utils/LodopFuncs.js'

let labelFormat = {
  labelType: '',
  formatId: '',
  formatDesc: '',
  active: 'Y',
  printerName: '',
  printerIP: ''
}
export default {
  name: 'userDefault',
  props:{
    height:{
      type: Number,
      default:780
    },
    ofComponents:{
      type: Boolean,
      default: false,
    },
    part:{
      type:Boolean,
      default:()=>{}
    }
  },
  data(){
    return{
      labelFormat: {
        ...labelFormat
      },
      saveLabelFormat:{
        ...labelFormat
      },
      saveVisible:false,
      labelFormatList:[],
      labelFormatRules:{
        printerName:[ { required: true, message: 'Printer Name is required', trigger: ['blur','change']}],
        printerIP:[{ required: true, message: 'Printer IP is required', trigger: ['blur','change'] }],
      },
      columnList:[
        {
          userId: this.$store.state.user.name,
          functionId: 30003,
          serialNumber: '30003TableLabelType',
          tableId: "30003Table",
          tableName: "标签模板信息表",
          columnProp: "labelType",
          headerAlign: "center",
          align: "left",
          columnLabel: "Label Type",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        },{
          userId: this.$store.state.user.name,
          functionId: 30003,
          serialNumber: '30003TableFormatId',
          tableId: "30003Table",
          tableName: "标签模板信息表",
          columnProp: "formatId",
          headerAlign: "center",
          align: "center",
          columnLabel: "Format ID",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 180
        },{
          userId: this.$store.state.user.name,
          functionId: 30003,
          serialNumber: '30003TableFormatDesc',
          tableId: "30003Table",
          tableName: "标签模板信息表",
          columnProp: "formatDesc",
          headerAlign: "center",
          align: "left",
          columnLabel: "Format Desc",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 180
        },{
          userId: this.$store.state.user.name,
          functionId: 30003,
          serialNumber: '30003TablePrinterName',
          tableId: "30003Table",
          tableName: "标签模板信息表",
          columnProp: "printerName",
          headerAlign: "center",
          align: "left",
          columnLabel: "Printer Name",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 180
        },
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 30003,
        //   serialNumber: '30003TablePrinterIP',
        //   tableId: "30003Table",
        //   tableName: "标签模板信息表",
        //   columnProp: "printerIP",
        //   headerAlign: "center",
        //   align: "left",
        //   columnLabel: "Printer IP",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: false,
        //   sortLv: 10,
        //   status: true,
        //   fixed: '',
        //   columnWidth: 180
        // }
      ],
      printerSetupList:[],
    }
  },
  watch:{
    "labelFormat.formatId"(newVal,oldVal){
      this.labelFormat.formatId = newVal.toUpperCase()
    }
  },
  methods:{
    getLabelFormatUserDefaultList(){
      let params = {
        ...this.labelFormat,
        site: this.$store.state.user.site,
        username: this.$store.state.user.name
      }
      getLabelFormatUserDefaultList(params).then(({data})=>{
        if (data && data.code === 0){
          this.labelFormatList = data.rows
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    handleSetup(row){
      this.saveLabelFormat = {
        ...row,
      }
      // this.$nextTick(()=>{
      //   this.$refs.saveLabelFormatForm.resetFields()
      // })
      this.saveVisible = true
    },
    closeSaveVisible(){
      this.saveLabelFormat = {
        ...labelFormat,
      }
      this.$refs.saveLabelFormatForm.resetFields()
    },
    handleSaveLabelFormat(){
      this.$refs.saveLabelFormatForm.validate((valid,obj) => {
        if (valid){
          let params = {
            ...this.saveLabelFormat,
          }
          // let regexIP = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/g;
          // if (!regexIP.test(params.printerIP)) {
          //   this.$message.warning('Printer IP is not valid')
          //   return
          // }
          if (this.saveLabelFormat.username){
            // 编辑
            updateLabelFormatUserDefault(params).then(({data})=>{
              if (data && data.code === 0){
                this.saveVisible = false
                this.$message.success(data.msg)
                this.getLabelFormatUserDefaultList()
              }else {
                this.$message.warning(data.msg)
              }
            }).catch((error)=>{
              this.$message.error(error)
            })
          }else {
            // 新增
            params.username = this.$store.state.user.name
            saveLabelFormatUserDefault(params).then(({data})=>{
              if (data && data.code === 0){
                this.saveVisible = false
                this.$message.success(data.msg)
                this.getLabelFormatUserDefaultList()
              }else {
                this.$message.warning(data.msg)
              }
            }).catch((error)=>{
              this.$message.error(error)
            })
          }
        }else {
          for (let i = 0; i < Object.keys(obj).length; i++) {
            this.$message.warning(obj[Object.keys(obj)[i]][0].message)
            return
          }
        }
      })
    },
    async getTableUserColumn (tableId, columnId) {
      let queryTableUser = {
        userId: this.$store.state.user.name,
        functionId: this.$route.meta.menuId,
        tableId: tableId,
        status: true,
        languageCode: this.$i18n.locale
      }
      await getTableUserListLanguage(queryTableUser).then(({data}) => {
        if (data.rows.length > 0) {
          this.caseTable(data.rows,columnId)
        } else {
          this.getColumnList(tableId, columnId)
        }
      })
    },

// 获取 tableDefault 列
    async getColumnList (tableId, columnId) {
      let queryTable = {
        functionId: this.$route.meta.menuId,
        tableId: tableId,
        languageCode: this.$i18n.locale
      }
      await getTableDefaultListLanguage(queryTable).then(({data}) => {
        if (!data.rows.length === 0) {
          this.caseTable(data.rows,columnId)
        } else {

        }
      })
    },
    caseTable(list,columnId){
      if (list.length > 0){
        switch (columnId) {
          case 1:
            this.columnList = list
            break;
        }
      }
    },
  },
  created () {
    if (this.ofComponents){
      return
    }
    this.getLabelFormatUserDefaultList();
    this.getTableUserColumn("30003Table",1)
  },
  mounted () {
    const lodop = getLodop()
    for (let i = 0; i < lodop.GET_PRINTER_COUNT(); i++) {
      this.printerSetupList.push(lodop.GET_PRINTER_NAME(i))
    }
  }
}
</script>

<template>
<div>
  <el-form v-if="!ofComponents" :inline="true" label-position="top" :model="labelFormat">
    <el-form-item label="Label Type">
      <el-select v-model="labelFormat.labelType" placeholder="">
        <el-option label="All" value=""></el-option>
        <el-option label="Shipment Carton" value="Shipment Carton"></el-option>
        <el-option label="Roll Label" value="Roll Label"></el-option>
        <el-option label="Logistic Label" value="Logistic Label"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="Format ID">
      <el-input v-model="labelFormat.formatId"></el-input>
    </el-form-item>
    <el-form-item label="Format Desc">
      <el-input v-model="labelFormat.formatDesc"></el-input>
    </el-form-item>
    <el-form-item label=" ">
      <el-button type="primary" @click="getLabelFormatUserDefaultList">Query</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="labelFormatList" border style="width: 100%;margin-top: 10px" :height="height">
    <el-table-column v-if="!ofComponents"
      header-align="center"
      align="center"
      width="100"
      fixed="left"
      label="Actions">
      <template slot-scope="{row,$index}">
        <el-link style="cursor:pointer;" @click="handleSetup(row)">Setup</el-link>
      </template>
    </el-table-column>
    <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>

  <el-dialog v-drag title="User Default Printer" :close-on-click-modal="false" @close="closeSaveVisible" :visible.sync="saveVisible" width="400px">
    <el-form :model="saveLabelFormat" :rules="labelFormatRules" ref="saveLabelFormatForm" label-position="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="Label Type">
            <el-select v-model="saveLabelFormat.labelType" style="width: 100%;" disabled placeholder="">
              <el-option label="All" value=""></el-option>
              <el-option label="Shipment Carton" value="shipmentCarton"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="Format No">
            <el-input v-model="saveLabelFormat.formatId" readonly disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Format Description">
            <el-input v-model="saveLabelFormat.formatDesc" readonly disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Printer Name" prop="printerName" :show-message="false">
<!--            <el-input v-model="saveLabelFormat.printerName"></el-input>-->
            <el-select v-model="saveLabelFormat.printerName" placeholder=" " style="width: 100%;">
              <el-option :label="item" :value="item" v-for="(item,index) in printerSetupList" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
<!--        <el-col :span="24">-->
<!--          <el-form-item label="Printer IP" prop="printerIP"  :show-message="false">-->
<!--            <el-input v-model="saveLabelFormat.printerIP"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSaveLabelFormat">Save</el-button>
      <el-button @click="saveVisible = false">Cancel</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style scoped>

</style>