pqs-9100_tool_client/frontend/src/views/activate/index.vue

<template>
  <div style="width: 100%;height: 100%">
    <a-card style="margin-bottom: 5px" title="激活记录">
      <a-form ref="searchFormRef" :model="searchForm" layout="inline">
        <a-form-item label="mac地址" name="macAddress">
          <a-input v-model:value="searchForm.macAddress" allow-clear autocomplete="off" placeholder="请输入mac地址"
                   style="width: 200px"/>
        </a-form-item>
        <a-form-item label="激活模块" name="modules">
          <a-select v-model:value="searchForm.modules" :max-tag-count="1" allow-clear mode="multiple"
                    placeholder="全部" style="width: 200px">
            <a-select-option value="simulate">模拟式模块</a-select-option>
            <a-select-option value="digital">数字式模块</a-select-option>
            <a-select-option value="contrast">比对式模块</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="query">
            <template #icon>
              <search-outlined/>
            </template>
            查询
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="resetForm">
            <template #icon>
              <reload-outlined/>
            </template>
            重置
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card>
      <a-button style="margin-bottom: 10px;" type="primary" @click="visible = true">
        <template #icon>
          <file-protect-outlined/>
        </template>
        设备激活
      </a-button>
      <a-table :columns="columns" :dataSource="dataSource" :loading="loading" :pagination="pagination" bordered
               size="small">
        <template #emptyText>
          <a-empty description="暂无记录"/>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'module'">
            <a-tag color="green" v-for="m in  record.module.split(',')">
              {{ m === 'simulate' ? '模拟式模块' : m === 'digital' ? '数字式模块' : '比对式模块' }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'action'">
            <a-button type="primary" size="small" @click="copyToClipboard(record.activationCode)">
              <template #icon>
                <copy-outlined />
              </template>
              复制激活码
            </a-button>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>

  <a-modal v-model:visible="visible" :keyboard="false" :mask-closable="false" centered destroy-on-close width="70%">
    <template #title>
      <file-protect-outlined/>
      设备激活
    </template>
    <ActiveForm ref="activateFormRef"></ActiveForm>
    <template #footer>
      <a-button type="primary" @click="save">
        保存
      </a-button>
      <a-button @click="visible = false">关闭</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import {FormInstance, message} from "ant-design-vue";
import {onMounted, ref} from "vue";
import ActiveForm from "@/views/activate/ActiveForm.vue";
import {ipc} from "@/utils/ipcRenderer";
import {ipcApiRoute} from "@/api";


const searchFormRef = ref<FormInstance>();
const activateFormRef = ref();
const searchForm = ref({
  macAddress: '',
  modules: [],
})
const loading = ref(false)
const visible = ref(false)
const dataSource = ref<any []>([])
const pagination = ref({
  total: 0,
  pageSize: 10,
  // current: 1,
  showTotal: (total: number) => `共 ${total} 条`

})
const columns = [
  {
    title: 'mac地址',
    dataIndex: 'macAddress',
    key: 'macAddress',
    align: 'center',
    width: 150,
  },
  {
    title: '申请码',
    dataIndex: 'applicationCode',
    key: 'applicationCode',
    align: 'center',
    ellipsis: true,
    width: 100,
  },
  {
    title: '激活模块',
    dataIndex: 'module',
    key: 'module',
    align: 'center',
    width: 250,
  },
  {
    title: '激活码',
    dataIndex: 'activationCode',
    key: 'activationCode',
    align: 'center',
    ellipsis: true,
    width: 100,
  },
  {
    title: '生成时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
    width: 150,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
    align: 'center',
    width: 100,
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: 120,
  },
]

const resetForm = () => {
  searchFormRef.value?.resetFields();
  query()
}

onMounted(() => {
  resetForm()
})
const query = () => {
  loading.value = true
  const params: any = {
    macAddress: searchForm.value.macAddress,
    modules: [...searchForm.value.modules],
  }
  setTimeout(() => {
    ipc.invoke(ipcApiRoute.activateRecord.list, params).then((res: any[]) => {
      console.log(res)
      dataSource.value = res
      pagination.value.total = dataSource.value.length
      pagination.value.current = 1
      loading.value = false
    }).catch((err: any) => {
      console.error(err)
      loading.value = false
    })
  }, 500)
}
const save = () => {
  const data = activateFormRef.value.getData()
  if (!data) {
    message.warning('请先生成激活码')
    return
  }
  ipc.invoke(ipcApiRoute.activateRecord.save, data).then(() => {
    message.success('保存成功')
    visible.value = false
    resetForm()
  }).catch((err: any) => {
    console.error(err)
    message.error('保存失败')
  })

}
// 复制到剪贴板
const copyToClipboard = (text: string) => {
  if (!text) {
    message.warning('没有内容可复制')
    return
  }

  navigator.clipboard.writeText(text).then(() => {
    message.success('复制成功')
  }).catch(() => {
    message.error('复制失败')
  })
}
</script>
<style lang="less" scoped>

</style>