client-base-v5/src/printer/PrinterConfiguration.vue

<template>
  <Navbar title="设备管理" :is-go-back="false" />
  <main>
    <a-button @click="editPrinter(true)">添加打印机</a-button>
    <CommonTable
      id="printTable"
      :have-page="false"
      :y-scroll="yScroll"
      :columns="printerColumns"
      :data-source="printerDatas"
    >
      <template #bodyCell="{ record, column }">
        <template v-if="column.key === 'operation'">
          <span>
            <a @click="editPrinter(false, record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="deletePrinter(record.id)">删除</a>
          </span>
        </template>
      </template>
    </CommonTable>

    <a-modal
      v-model:visible="editVisible"
      :title="editTitle"
      width="800px"
      ok-text="保存配置"
      cancel-text="取消"
      @ok="saveOrUpdateSetting"
    >
      <a-form :model="printerState">
        <a-row :gutter="24">
          <a-col :span="11">
            <a-form-item
              label="打印机名称"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
            >
              <a-select
                v-model:value="printerState.printerName"
                style="width: 220px"
                :options="printerNames"
              />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item
              label="打印机类型"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 16 }"
            >
              <a-select
                v-model:value="printerState.printerType"
                style="width: 220px"
              >
                <a-select-option value="GK888">GK888</a-select-option>
                <a-select-option value="Zebra">Zebra</a-select-option>
                <a-select-option value="TOSHIBA">TOSHIBA</a-select-option>
                <a-select-option value="蓝牙打印机">蓝牙打印机</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="11">
            <a-form-item
              label="旋转角度"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
            >
              <a-select v-model:value="printerState.rotateAngel">
                <a-select-option value="0">0</a-select-option>
                <a-select-option value="90">90</a-select-option>
                <a-select-option value="180">180</a-select-option>
                <a-select-option value="270">270</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item
              label="支持RFID功能"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 16 }"
            >
              <a-checkbox v-model:checked="printerState.supportRfid" />
              <a-checkbox
                v-if="printerState.supportRfid"
                v-model:checked="printerState.enableWritePassword"
                style="margin-left: 40px"
              >
                写入密码
              </a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row v-if="printerState.enableWritePassword" :gutter="24">
          <a-col :span="11">
            <a-form-item
              label="访问密码"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
            >
              <a-input
                v-model:value="printerState.accessPassword"
                style="width: 220px"
              />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item
              label="杀死密码"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 16 }"
            >
              <a-input
                v-model:value="printerState.killPassword"
                style="width: 220px"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="11">
            <a-form-item
              label="打印深度"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
            >
              <a-input-number
                v-model:value="printerState.darkness"
                style="width: 220px"
              />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item
              label="进纸方向偏移(mm)"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 16 }"
            >
              <a-input-number
                v-model:value="printerState.offsetHeight"
                style="width: 220px"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="11">
            <a-form-item
              label="标签后退距离"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
            >
              <a-input-number
                v-model:value="printerState.backLength"
                style="width: 220px"
              />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item
              label="水平方向偏移(mm)"
              :label-col="{ span: 10 }"
              :wrapper-col="{ span: 16 }"
            >
              <a-input-number
                v-model:value="printerState.offsetWidth"
                style="width: 220px"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </main>
</template>

<script setup>
import Common from '../common/Common';
import { message } from 'ant-design-vue';
import { tableColumns } from './configData.js';
import { ref, reactive, onMounted } from 'vue';
import CommonTable from '../common/CommonTable.vue';
import { getTableScroll } from '../common/tableScroll.js';
import PrintUtil from '../api/printer/printerWebsocket.js';
import {
  deleteById,
  saveOrUpdate,
  queryAllPrinters,
} from '../api/printer/printerConfiguration.js';

const yScroll = ref();
const editTitle = ref('');
const printerDatas = ref([]);
const printerNames = ref([]);
const editVisible = ref(false);
const printerColumns = ref(tableColumns);
const printerState = ref({
  printerName: '',
  printerType: undefined,
  supportRfid: false,
  enableWritePassword: false,
  accessPassword: '',
  killPassword: '',
  rotateAngel: 0,
  backLength: 0,
  offsetHeight: 0,
  offsetWidth: 0,
  darkness: 15,
});
const base = reactive({
  clientId: '',
  macAddress: '',
});
const createState = ref({});
// 编辑打印机配置
const editPrinter = (flag, record) => {
  editVisible.value = true;
  if (flag) {
    editTitle.value = '添加打印机';
    printerState.value = JSON.parse(JSON.stringify(createState.value));
  } else {
    editTitle.value = '编辑打印机';
    printerState.value = record;
  }
  getPrinterNames();
};

onMounted(() => {
  base.clientId = JSON.parse(localStorage.getItem('#LoginInfo')).loginClientId;
  createState.value = JSON.parse(JSON.stringify(printerState.value));
  yScroll.value = getTableScroll({ id: 'printTable' });
  getMacAddress();
  queryPrinters();
});

// 获取mac地址
const getMacAddress = () => {
  PrintUtil.getMacAddress().then(
    success => {
      base.macAddress = success.data;
    },
    err => {
      console.log(err);
    },
  );
};

// 获取所有打印机名称
const getPrinterNames = () => {
  PrintUtil.getPrinters().then(
    success => {
      if (success.errorCode === 0) {
        if (success.data && success.data.length > 0) {
          printerNames.value = success.data.map(item => {
            return (item = {
              value: item,
              label: item,
            });
          });
        }
      } else {
        message.warning(success.errorMessage);
      }
    },
    error => {
      console.log(error);
    },
  );
};

// 获取所有打印配置
const queryPrinters = () => {
  queryAllPrinters().then(
    success => {
      if (success.errorCode === 0) {
        if (success.datas && success.datas.length > 0) {
          printerDatas.value = success.datas;
        }
      } else {
        message.warning(success.errorMessage);
      }
    },
    err => {
      Common.processException(err);
    },
  );
};

//新增或更新打印配置
const saveOrUpdateSetting = () => {
  const printerInfo = JSON.parse(JSON.stringify(printerState.value));
  const params = { ...printerInfo, ...base };
  saveOrUpdate(params).then(
    success => {
      if (success.errorCode === 0) {
        if (editTitle.value === '添加打印机') {
          message.success('添加打印机配置成功。');
        } else {
          message.success('更新打印机配置成功。');
        }
        editVisible.value = false;
        queryPrinters();
      } else {
        message.warning(success.errorMessage);
      }
    },
    err => {
      Common.processException(err);
    },
  );
};

// 删除打印机配置
const deletePrinter = id => {
  deleteById(id).then(
    success => {
      if (success.errorCode === 0) {
        message.success('删除打印机配置成功。');
        queryPrinters();
      } else {
        message.warning(success.errorMessage);
      }
    },
    err => {
      Common.processException(err);
    },
  );
};
</script>

<style scoped>
</style>