youshang/erp_sb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
ZiJIe
2025-10-10 10:06:56 +08:00
parent 4fbe51d625
commit 6f22c9bffd
37 changed files with 2176 additions and 1183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
ruoyi-ui/src/views/monitor/account/index.vue
View File

@@ -89,13 +89,22 @@
</el-table-column>
<el-table-column label="过期时间" align="center" prop="expireTime" width="180">
<template slot-scope="scope">
<span>{{ scope.row.expireTime }}</span>
<el-tag v-if="isExpired(scope.row)" type="danger" size="mini">已过期</el-tag>
<el-tag
:type="getRemainingDays(scope.row).type"
size="small"
style="margin-top: 5px;"
>
{{ getRemainingDays(scope.row).text }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="设备限制" align="center" prop="deviceLimit" width="100">
<template slot-scope="scope">
<span>{{ scope.row.deviceLimit || 3 }}台</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
<template slot-scope="scope">
<el-button
size="mini"
@@ -153,16 +162,37 @@
style="width: 100%;"
></el-date-picker>
</el-form-item>
<el-form-item label="快速续费" v-if="form.id">
<el-select v-model="form.renewDays" placeholder="选择续费套餐（可选）" style="width: 100%;" clearable>
<el-option label="月付（30天）" :value="30"></el-option>
<el-option label="季付（90天）" :value="90"></el-option>
<el-option label="半年付（180天）" :value="180"></el-option>
<el-option label="年付（365天）" :value="365"></el-option>
</el-select>
<div v-if="form.renewDays" style="margin-top: 8px; color: #409EFF; font-size: 12px;">
<i class="el-icon-info"></i> 续费后到期时间：{{ calculateNewExpireTime() }}
</div>
</el-form-item>
<el-form-item label="设备数量限制" prop="deviceLimit">
<el-input-number
v-model="form.deviceLimit"
:min="1"
:max="20"
placeholder="请输入设备数量限制"
style="width: 100%;"
></el-input-number>
<span style="color: #909399; font-size: 12px;">允许同时登录的设备数量，默认3台</span>
</el-form-item>
<el-form-item label="功能权限" prop="permissions">
<div class="permission-config">
<el-checkbox-group v-model="selectedPermissions" @change="onPermissionChange">
<el-checkbox label="rakuten">日本乐天平台</el-checkbox>
<el-checkbox label="amazon">亚马逊平台</el-checkbox>
<el-checkbox label="zebra">斑马平台</el-checkbox>
<el-checkbox label="shopee">虾皮购物平台</el-checkbox>
<el-checkbox label="toolbox">工具箱功能</el-checkbox>
<el-checkbox label="dataCollection">数据采集功能</el-checkbox>
<el-checkbox label="priceCompare">1688比价功能</el-checkbox>
<el-checkbox label="rakuten"><i class="el-icon-goods"></i> 日本乐天平台</el-checkbox>
<el-checkbox label="amazon"><i class="el-icon-shopping-cart-2"></i> 亚马逊平台</el-checkbox>
<el-checkbox label="zebra"><i class="el-icon-postcard"></i> 斑马平台</el-checkbox>
<el-checkbox label="shopee"><i class="el-icon-shopping-bag-2"></i> 虾皮购物平台</el-checkbox>
<el-checkbox label="toolbox"><i class="el-icon-box"></i> 工具箱功能</el-checkbox>
<el-checkbox label="dataCollection"><i class="el-icon-document-copy"></i> 数据采集功能</el-checkbox>
<el-checkbox label="priceCompare"><i class="el-icon-price-tag"></i> 1688比价功能</el-checkbox>
</el-checkbox-group>
</div>
</el-form-item>
@@ -201,7 +231,7 @@
</template>
<script>
import { listAccount, getAccount, delAccount, addAccount, updateAccount, registerAccount, checkUsername } from "@/api/monitor/account";
import { listAccount, getAccount, delAccount, addAccount, updateAccount, registerAccount, checkUsername, renewAccount } from "@/api/monitor/account";
export default {
name: "Account",
@@ -309,6 +339,8 @@ export default {
password: null,
status: "0",
expireTime: null,
renewDays: null,
deviceLimit: 3,
remark: null,
permissions: null
};
@@ -353,10 +385,24 @@ export default {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateAccount(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
// 如果选择了续费，先执行续费
const promises = [];
if (this.form.renewDays) {
promises.push(renewAccount({
accountId: this.form.id,
days: this.form.renewDays
}));
}
// 执行更新
promises.push(updateAccount(this.form));
Promise.all(promises).then(() => {
const msg = this.form.renewDays ? "修改并续费成功" : "修改成功";
this.$modal.msgSuccess(msg);
this.open = false;
this.getList();
}).catch(error => {
this.$modal.msgError('操作失败: ' + (error.message || '未知错误'));
});
} else {
addAccount(this.form).then(response => {
@@ -471,6 +517,48 @@ export default {
cancelRegister() {
this.registerOpen = false;
this.resetRegisterForm();
},
/** 计算续费后的新到期时间 */
calculateNewExpireTime() {
if (!this.form.renewDays) return '';
let baseDate;
if (this.form.expireTime && new Date(this.form.expireTime) > new Date()) {
// 未过期，从到期时间延长
baseDate = new Date(this.form.expireTime);
} else {
// 已过期或无到期时间，从当前时间开始
baseDate = new Date();
}
baseDate.setDate(baseDate.getDate() + this.form.renewDays);
return baseDate.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
},
/** 获取剩余天数 */
getRemainingDays(row) {
if (!row.expireTime) {
return { text: '已过期', type: 'danger' };
}
const now = new Date();
const expireDate = new Date(row.expireTime);
const diffTime = expireDate - now;
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
if (diffDays < 0) {
return { text: '已过期', type: 'danger' };
} else if (diffDays <= 3) {
return { text: `剩余 ${diffDays} 天`, type: 'warning' };
} else {
return { text: `剩余 ${diffDays} 天`, type: 'success' };
}
}
}
};
@@ -478,25 +566,34 @@ export default {
<style scoped>
.permission-config {
padding: 10px;
border: 1px solid #e6e6e6;
padding: 15px;
border: 1px solid #DCDFE6;
border-radius: 4px;
background-color: #fafafa;
}
.permission-config .el-checkbox {
display: block;
margin: 8px 0;
margin-left: 0;
background: linear-gradient(135deg, #f5f7fa 0%, #fafbfc 100%);
}
.permission-config .el-checkbox-group {
display: flex;
flex-direction: column;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px 20px;
}
.permission-config .el-checkbox + .el-checkbox {
margin-left: 0;
.permission-config .el-checkbox {
margin: 0;
padding: 8px 12px;
border-radius: 4px;
transition: all 0.3s;
background-color: white;
}
.permission-config .el-checkbox:hover {
background-color: #ecf5ff;
transform: translateX(2px);
}
.permission-config .el-checkbox i {
margin-right: 6px;
color: #409EFF;
}
.checking {