无人机管理后台前端(已迁走)
张含笑
2025-09-01 2ca94de8ede18ac07ccfd8dec7b6f6a707adde9b
src/views/license/license.vue
@@ -1,32 +1,15 @@
<template>
    <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">
        <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">
            <!-- 自定义证书地址列 -->
            <template #url="scope">
                <el-link
                    :href="scope.row.url"
                    target="_blank"
                    type="primary">
                <el-link :href="scope.row.url" target="_blank" type="primary">
                    下载密钥
                </el-link>
            </template>
@@ -34,7 +17,7 @@
            <!-- 自定义过期时间列 -->
            <template #expireDay="scope">
                <span :style="{ color: isExpired(scope.row.expireDay) ? 'red' : 'inherit' }">
                    {{ formatExpireDay(scope.row.expireDay,scope.row.licenseType) }}
                    {{ formatExpireDay(scope.row.expireDay, scope.row.licenseType) }}
                </span>
            </template>
@@ -52,21 +35,16 @@
                </span>
            </template>
            <template #menu-left>
            <el-button type="primary" icon="el-icon-plus"
              @click="createLicenseShow()">新 增
            </el-button>
                <el-button type="primary" icon="el-icon-plus" @click="createLicenseShow()">新 增
                </el-button>
            </template>
        </avue-crud>
        <!-- 新增弹窗 -->
        <el-dialog title="新增 License"
      v-model="addDialogVisible"
      width="70%"
      :close-on-click-modal="false"
      @close="resetForm"
    >
        <el-dialog title="新增 License" v-model="addDialogVisible" width="70%" :close-on-click-modal="false"
            @close="resetForm">
            <el-form :model="newLicense" ref="licenseForm" label-width="120px">
                <el-form-item label="机构ID" prop="licenseId" >
                <el-form-item label="机构ID" prop="licenseId">
                    <el-input v-model="newLicense.licenseId" />
                </el-form-item>
                <el-form-item label="机构名称" prop="licenseName" required>
@@ -78,7 +56,7 @@
                        <el-option label="验证过期时间" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="newLicense.licenseType==2" label="过期时间" prop="expireDay">
                <el-form-item v-if="newLicense.licenseType == 2" label="过期时间" prop="expireDay">
                    <el-date-picker v-model="newLicense.expireDay" type="date" placeholder="选择日期" />
                </el-form-item>
                <el-form-item label="设备数量" prop="printClientCount">
@@ -86,13 +64,8 @@
                        <el-radio :label="-1">不限制</el-radio>
                        <el-radio :label="1">限制</el-radio>
                    </el-radio-group>
                    <el-input-number
                        v-if="deviceLimit === 1"
                        v-model="newLicense.printClientCount"
                        :min="0"
                        placeholder="请输入数量"
                        style="margin-top: 10px;"
                    />
                    <el-input-number v-if="deviceLimit === 1" v-model="newLicense.printClientCount" :min="0"
                        placeholder="请输入数量" style="margin-top: 10px;" />
                </el-form-item>
                <el-form-item label="是否校验机器码" prop="checkMachineCode">
                    <el-switch v-model="newLicense.checkMachineCode" />
@@ -106,21 +79,21 @@
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="createLicense">保存</el-button>
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="createLicense">保存</el-button>
                </div>
            </template>
        </el-dialog>
    </basic-container>
</template>
<script>
import { getList, add } from '@/api/license/license';
import { mapGetters } from 'vuex';
import { getList, add } from '@/api/license/license'
import { mapGetters } from 'vuex'
export default {
    data() {
    data () {
        return {
            loading: true,
            page: {
@@ -153,10 +126,14 @@
                viewBtn: true,
                selection: false,
                excelBtn: false,
              addBtnText: '新建license',
                 addBtn: true,
                addBtnText: '新建license',
                addBtn: true,
                dialogClickModal: false,
                grid: false,
                height: 'auto',
                calcHeight: 20,
                column: [
                    {
                        label: '机构ID',
@@ -289,89 +266,88 @@
                ],
            },
            data: [],
        };
        }
    },
    computed: {
        ...mapGetters(['userInfo', 'permission']),
        permissionList() {
        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;
        isExpired (expireDay) {
            const now = new Date()
            return new Date(expireDay) < now
        },
        formatExpireDay(expireDay,licenseType) {
            if (licenseType==2&& this.isExpired(expireDay)) {
                return `${expireDay} (已过期)`;
        formatExpireDay (expireDay, licenseType) {
            if (licenseType == 2 && this.isExpired(expireDay)) {
                return `${expireDay} (已过期)`
            }
            if(licenseType==1){
                return `永久`;
            if (licenseType == 1) {
                return `永久`
            }
            return expireDay;
            return expireDay
        },
        rowSave(row, done, loading) {
        rowSave (row, done, loading) {
            add(row).then(
                () => {
                    this.onLoad(this.page);
                    this.onLoad(this.page)
                    this.$message({
                        type: 'success',
                        message: '操作成功!',
                    });
                    done();
                    })
                    done()
                },
                error => {
                    console.error(error);
                    loading();
                    console.error(error)
                    loading()
                }
            );
            )
        },
        createLicenseShow(){
                    this.addDialogVisible = true;
        createLicenseShow () {
            this.addDialogVisible = true
        },
        createLicense() {
        createLicense () {
            // 格式化过期时间
            if (this.newLicense.expireDay) {
                this.newLicense.expireDay = this.formatDate(this.newLicense.expireDay);
                console.log(this.newLicense.expireDay);
          }
                this.newLicense.expireDay = this.formatDate(this.newLicense.expireDay)
                console.log(this.newLicense.expireDay)
            }
            // 保存数据
            add(this.newLicense).then(() => {
                this.$message.success('新增成功');
                this.addDialogVisible = false;
                this.onLoad(this.page);
                this.$message.success('新增成功')
                this.addDialogVisible = false
                this.onLoad(this.page)
            }).catch(error => {
                console.error(error);
                this.$message.error('新增失败');
            });
                console.error(error)
                this.$message.error('新增失败')
            })
        },
        formatDate(date) {
            const d = new Date(date);
            const year = d.getFullYear();
            const month = String(d.getMonth() + 1).padStart(2, '0');
            const day = String(d.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        formatDate (date) {
            const d = new Date(date)
            const year = d.getFullYear()
            const month = String(d.getMonth() + 1).padStart(2, '0')
            const day = String(d.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },
        onLoad(page, params = {}) {
            this.loading = true;
        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;
            });
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
            })
        },
    },
};
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>