111

rjg

2025-05-16 a7e6df53d734eef17fb1f06d6bc9a24518c0a3e9

111

 src/api/license/license.js

New file
@@ -0,0 +1,73 @@
import request from '@/axios';


/**
 * 获取 License 列表
 * @param {Number} currentPage 当前页码
 * @param {Number} pageSize 每页条数
 * @param {Object} params 查询参数
 * @returns {Promise}
 */
export function getList(currentPage, pageSize, params = {}) {
    return request({
        url: '/blade-system/license/list',
        method: 'get',
        params: {
            ...params,
            current: currentPage,
            size: pageSize,
        },
    });
}

/**
 * 新增 License
 * @param {Object} data License 数据
 * @returns {Promise}
 */
export function add(data) {
    return request({
        url: '/blade-system/license/createLicense',
        method: 'post',
        data,
    });
}

/**
 * 删除 License
 * @param {Number|String} id License ID
 * @returns {Promise}
 */
export function remove(id) {
    return request({
        url: `/blade-system/license/deleteLicense`,
        method: 'post',
        data: { id },
    });
}

/**
 * 更新 License
 * @param {Object} data License 数据
 * @returns {Promise}
 */
export function update(data) {
    return request({
        url: '/blade-system/license/updateLicense',
        method: 'post',
        data,
    });
}

/**
 * 获取 License 详情
 * @param {Number|String} id License ID
 * @returns {Promise}
 */
export function getDetail(id) {
    return request({
        url: `/blade-system/license/detail`,
        method: 'get',
        params: { id },
    });
}

 src/views/license/license.vue

@@ -1,140 +1,271 @@
<!-- filepath: /d:/work/drone-web-manage/src/views/license/license.vue -->
<template>
  <div class="license-list">
    <!-- 操作按钮 -->
    <el-button type="primary" @click="openAddDialog">新增License</el-button>
    <basic-container>
        <avue-crud 
            :option="option" 
            :table-loading="loading" 
            :data="data" 
            v-model:page="page" 
            ref="crud" 
            @row-del="rowDel"
            v-model="form" 
            :permission="permissionList" 
            @row-update="rowUpdate" 
            @row-save="rowSave"
            :before-open="beforeOpen" 
            @search-change="searchChange" 
            @search-reset="searchReset"
            @selection-change="selectionChange" 
            @current-change="currentChange" 
            @size-change="sizeChange"
            @refresh-change="refreshChange" 
            @on-load="onLoad">
             <!-- 自定义url -->
             <template #url="scope">
                <el-link 
                    :href="scope.row.url" 
                    target="_blank" 
                    type="primary">
                    下载证书
                </el-link>
            </template>

    <!-- License 列表 -->
    <el-table :data="licenses" border style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="主键ID" width="80" />
      <el-table-column prop="licenseId" label="机构ID" />
      <el-table-column prop="licenseName" label="机构名称" />
      <el-table-column prop="licenseType" label="验证时间类型">
        <template #default="scope">
          <span v-if="scope.row.licenseType === 1">不验证过期时间</span>
          <span v-else-if="scope.row.licenseType === 2">验证过期时间</span>
        </template>
      </el-table-column>
      <el-table-column prop="expireDay" label="过期时间" />
      <el-table-column prop="printClientCount" label="设备数量" />
      <el-table-column prop="checkMachineCode" label="是否校验机器码">
        <template #default="scope">
          <span>{{ scope.row.checkMachineCode ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="machineCode" label="机器码" />
      <el-table-column prop="url" label="证书地址" />
      <el-table-column prop="remark" label="备注" />
    </el-table>
            <!-- 自定义过期时间列 -->
            <template #expireDay="scope">
                <span :style="{ color: isExpired(scope.row.expireDay) ? 'red' : 'inherit' }">
                    {{ formatExpireDay(scope.row.expireDay) }}
                </span>
            </template>

    <!-- 新增 License 弹窗 -->
    <el-dialog title="新增 License" v-model:visible="addDialogVisible">
      <el-form :model="newLicense" ref="licenseForm" label-width="120px">
        <el-form-item label="机构ID" prop="licenseId" required>
          <el-input v-model="newLicense.licenseId" />
        </el-form-item>
        <el-form-item label="机构名称" prop="licenseName" required>
          <el-input v-model="newLicense.licenseName" />
        </el-form-item>
        <el-form-item label="类型" prop="licenseType" required>
          <el-select v-model="newLicense.licenseType" placeholder="请选择">
            <el-option label="不验证过期时间" :value="1" />
            <el-option label="验证过期时间" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="过期时间" prop="expireDay">
          <el-date-picker v-model="newLicense.expireDay" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="设备数量" prop="printClientCount">
          <el-input-number v-model="newLicense.printClientCount" :min="-1" />
        </el-form-item>
        <el-form-item label="是否校验机器码" prop="checkMachineCode">
          <el-switch v-model="newLicense.checkMachineCode" />
        </el-form-item>
        <el-form-item label="机器码" prop="machineCode">
          <el-input v-model="newLicense.machineCode" type="textarea" rows="3" />
        </el-form-item>
        <el-form-item label="证书地址" prop="url">
          <el-input v-model="newLicense.url" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="newLicense.remark" />
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createLicense">保存</el-button>
      </div>
    </el-dialog>
  </div>
            <!-- 自定义设备数量列 -->
            <template #printClientCount="scope">
                <span>
                    {{ scope.row.printClientCount === -1 ? '不限制' : scope.row.printClientCount }}
                </span>
            </template>

            <!-- 自定义是否校验机器码列 -->
            <template #checkMachineCode="scope">
                <span>
                    {{ scope.row.checkMachineCode ? '校验机器码' : '不校验' }}
                </span>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { getList, add } from '@/api/license/license';
import { mapGetters } from 'vuex';

export default {
  name: "LicenseList",
  setup() {
    const licenses = ref([]);
    const loading = ref(false);
    const addDialogVisible = ref(false);
    const newLicense = reactive({
      licenseId: "",
      licenseName: "",
      licenseType: null,
      expireDay: null,
      printClientCount: -1,
      checkMachineCode: false,
      machineCode: "",
      url: "",
      remark: "",
    });

    const fetchLicenses = async () => {
      loading.value = true;
      try {
        const response = await axios.get("/blade-system/license/list");
        licenses.value = response.data; // 根据实际返回结构调整
      } catch (error) {
        console.error("Failed to fetch licenses:", error);
      } finally {
        loading.value = false;
      }
    };

    const openAddDialog = () => {
      addDialogVisible.value = true;
    };

    const createLicense = async () => {
      try {
        await axios.post("/blade-system/license/createLicense", newLicense);
        addDialogVisible.value = false;
        fetchLicenses(); // 刷新列表
      } catch (error) {
        console.error("Failed to create license:", error);
      }
    };

    onMounted(() => {
      fetchLicenses();
    });

    return {
      licenses,
      loading,
      addDialogVisible,
      newLicense,
      openAddDialog,
      createLicense,
    };
  },
    data() {
        return {
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            selectionList: [],
            option: {
                menuWidth: 300,
                lazy: true,
                tree: false,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                selection: false,
                excelBtn: false,
                addBtn: true,
                dialogClickModal: false,
                grid: false,
                column: [
                    {
                        label: '机构ID',
                        prop: 'licenseId',
                        labelWidth: 130,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入机构ID',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '机构名称',
                        prop: 'licenseName',
                        labelWidth: 130,
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: '请输入机构名称',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '类型',
                        prop: 'licenseType',
                        type: 'select',
                        labelWidth: 130,
                        dicData: [
                            {
                                label: '不验证过期时间',
                                value: 1,
                            },
                            {
                                label: '验证过期时间',
                                value: 2,
                            },
                        ],
                        rules: [
                            {
                                required: true,
                                message: '请选择类型',
                                trigger: 'change',
                            },
                        ],
                    },
                    {
                        label: '过期时间',
                        prop: 'expireDay',
                        type: 'date',
                        labelWidth: 130,
                        slot: true, // 启用自定义插槽
                        rules: [
                            {
                                required: false,
                                message: '请选择过期时间',
                                trigger: 'change',
                            },
                        ],
                    },
                    {
                        label: '设备数量',
                        prop: 'printClientCount',
                        type: 'number',
                        labelWidth: 130,
                        slot: true, // 启用自定义插槽
                        rules: [
                            {
                                required: false,
                                message: '请输入设备数量',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '是否校验机器码',
                        prop: 'checkMachineCode',
                        type: 'switch',
                        labelWidth: 130,
                        slot: true, // 启用自定义插槽
                        rules: [
                            {
                                required: false,
                                message: '请选择是否校验机器码',
                                trigger: 'change',
                            },
                        ],
                    },
                    {
                        label: '机器码',
                        prop: 'machineCode',
                        type: 'textarea',
                        labelWidth: 130,
                        rules: [
                            {
                                required: false,
                                message: '请输入机器码',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '证书地址',
                        prop: 'url',
                        labelWidth: 130,
                        slot: true, // 启用自定义插槽
                        rules: [
                            {
                                required: false,
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '备注',
                        prop: 'remark',
                        labelWidth: 130,
                        rules: [
                            {
                                required: false,
                                message: '请输入备注',
                                trigger: 'blur',
                            },
                        ],
                    },
                ],
            },
            data: [],
        };
    },
    computed: {
        ...mapGetters(['userInfo', 'permission']),
        permissionList() {
            return {
                addBtn: this.validData(this.permission.license_add, false),
                viewBtn: this.validData(this.permission.license_view, true),
                delBtn: this.validData(this.permission.license_delete, false),
                editBtn: this.validData(this.permission.license_edit, false),
            };
        },
    },
    methods: {
        isExpired(expireDay) {
            const now = new Date();
            return new Date(expireDay) < now;
        },
        formatExpireDay(expireDay) {
            if (this.isExpired(expireDay)) {
                return `${expireDay} (已过期)`;
            }
            return expireDay;
        },
        rowSave(row, done, loading) {
            add(row).then(
                () => {
                    this.onLoad(this.page);
                    this.$message({
                        type: 'success',
                        message: '操作成功!',
                    });
                    done();
                },
                error => {
                    console.error(error);
                    loading();
                }
            );
        },
        onLoad(page, params = {}) {
            this.loading = true;
            getList(page.currentPage, page.pageSize, params).then(res => {
                const data = res.data.data;
                this.page.total = data.total;
                this.data = data.records;
                this.loading = false;
            });
        },
    },
};
</script>

<style scoped>
.license-list {
  padding: 20px;
}
</style>
<style lang="scss" scoped>
</style>