qimaohong
/
deepChartBack
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

行情期限-主页面完成

milestone-20251117-DeepChart后台一期
liruiqiang 2 months ago
parent
5c6df9c243
commit
80d32a83fc
2 changed files with 368 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      src/api/userPermissions.js
  2. 374
      src/views/UserPermissions/Market.vue

11
src/api/userPermissions.js
View File

@ -32,7 +32,7 @@ export function userMListApi(params) {
// 行情期限--操作日志
export function logMListApi(params) {
return request({
url: base_url + "/admin/market/loglist",
url: base_url + "/admin/operation/record/list",
method: "post",
data: params,
});
@ -47,6 +47,15 @@ export function exportCreateApi(params) {
});
}
// 行情期限--开通/编辑
export function exitMApi(params) {
return request({
url: base_url + "/admin/market/permission/exit",
method: "post",
data: params,
});
}
// 获取导出列表
export function exportListApi(params) {
return request({

374
src/views/UserPermissions/Market.vue
View File

@ -78,7 +78,7 @@
<el-table-column label="操作" width="180" align="center" header-align="center">
<template #default="scope">
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
<el-button type="text" @click="handleLog(scope.row.id)">操作日志</el-button>
<el-button type="text" @click="handleLog(scope.row.dccode)">操作日志</el-button>
</template>
</el-table-column>
</el-table>
@ -89,18 +89,102 @@
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="10"
:page-sizes="[15, 20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total= "datatotal"
/>
</div>
<el-dialog v-model="dialogVisible" :title="addOrUpdata === 1 ? '添加权限' : '设置'" width="500px" :before-close="cancel">
<!-- 设置用户 -->
<div class="form-item" v-if="addOrUpdata === 1">
<label class="form-label">设置用户</label>
<el-input type="textarea" v-model="hlidsInput" rows=10
placeholder="请输入HLid...
示例：
HL30454647
HL30454648
HL30454649"
/>
<div class="tip">支持批量输入，每次最多1000个（手动/Excel粘贴均可）</div>
</div>
<!-- 编辑回显 -->
<div class="info-container" v-if="addOrUpdata === 0">
<span class="info-item">HLid：{{ hlidsInput }}</span>
<span class="info-item">当前到期时间：{{ deadline.split(' ')[0] }}</span>
</div>
<!-- 设置权限时间 -->
<div class="form-item">
<label class="form-label">设置权限时间</label>
<el-radio-group v-model="timeType" class="radio-group">
<el-radio label="expire" class="radio-item">
<span>到期时间</span>
<el-date-picker
v-model="expireTime"
type="date"
placeholder="请选择到期日期"
:disabled-date="disabledDate"
style="width: 220px; margin-left: 8px;"
/>
</el-radio>
<el-radio label="delay" class="radio-item">
<span>延期时间</span>
<el-input
v-model.number="delayValue"
type="number"
style="width: 60px; margin: 0 8px;"
placeholder="1"
@input="handleDelayInput"
/>
<el-select v-model="delayUnit" placeholder="请选择" style="width: 150px;">
<el-option label="年" value="year"></el-option>
<el-option label="月" value="month"></el-option>
<el-option label="周" value="week"></el-option>
<el-option label="日" value="day"></el-option>
</el-select>
</el-radio>
</el-radio-group>
</div>
<!-- 备注-->
<div class="form-item inline-form-item">
<label class="form-label">备注</label>
<el-input
type="textarea"
v-model="remark"
rows=3
placeholder="请输入备注..."
maxlength="150"
show-word-limit
/>
</div>
<!-- 操作人 -->
<div class="form-item inline-form-item">
<label class="form-label">操作人</label>
<el-input v-model="operator" placeholder="请填写操作人"/>
</div>
<!-- 按钮区域 -->
<div class="dialog-footer">
<el-button type="default" plain @click="cancel">取消</el-button>
<el-button type="primary" @click="submitForm" style="background-color: #ff0000; border-color: #ff0000;">提交</el-button>
</div>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { marketListApi, userMListApi } from '../../api/userPermissions'
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { marketListApi, userMListApi, exportCreateApi, exitMApi } from '../../api/userPermissions'
import router from '../../router';
// token
const token = localStorage.getItem('token')
// 搜索表单
const searchForm = reactive({
@ -120,18 +204,181 @@ const tableLoading = ref(false);
const datatotal = ref(0)
// 分页参数
const currentPage = ref(1); // 对应分页当前页
const pageSize = ref(10); // 对应分页每页条数
const currentPage = ref(1);
const pageSize = ref(15);
// 地区下拉框相关
// 地区下拉框
const regionList = ref([]);
const isRegionLoading = ref(false);
// 弹框显隐控制
const dialogVisible = ref(false);
// 开通权限表单
const hlidsInput = ref('');
const timeType = ref('');
const expireTime = ref('');
const delayValue = ref('');
const delayUnit = ref('');
const remark = ref('');
const operator = ref('');
// 判断开通还是编辑
const addOrUpdata = ref(0);
// 编辑回显内容
const deadline = ref('');
// 禁用当前日期之前的日期（当天0点之前的时间）
const disabledDate = (time) => {
return time.getTime() < new Date().getTime() - 8.64e7;
};
// 格式化日期
const formatDate = (date) => {
if (!date) return '';
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}/${month}/${day}`;
};
// 校验HLid
const checkHlids = () => {
// 非空
if (!hlidsInput.value.trim()) {
ElMessage.error('请输入HLid');
return false;
}
// 处理输入：去空、去重，转数组
const hlidList = hlidsInput.value.split('\n')
.map(item => item.trim())
.filter(item => item)
.filter((item, index, self) => self.indexOf(item) === index); // 去重
// 数量校验（最多1000个）
if (hlidList.length > 1000) {
ElMessage.error('HLid数量不能超过1000个');
return false;
}
// 格式校验（HL开头+8位数字）
const hlidReg = /^DC\d{8}$/;
for (const hlid of hlidList) {
if (!hlidReg.test(hlid)) {
ElMessage.error(`HLid格式错误：${hlid}，请重新输入`);
return false;
}
}
return true;
};
// 校验时间
const checkTime = () => {
if (timeType.value === 'expire') {
// 到期时间
// 校验不为空
if (!expireTime.value) {
ElMessage.error('请选择到期时间');
return false;
}
} else if (timeType.value === 'delay') {
// 延期时间
// 校验不为空
if (!delayValue.value || !delayUnit.value) {
ElMessage.error('延期时间必须填写完整（数值+单位）');
return false;
}
} else {
ElMessage.error('请设置权限时间');
return false;
}
return true;
};
// 禁止为小数
const handleDelayInput = () => {
if (delayValue.value !== null && delayValue.value !== undefined) {
delayValue.value = Math.floor(delayValue.value);
}
};
// 校验备注
const checkRemark = () => {
if (!remark.value.trim()) {
ElMessage.error('请输入备注');
return false;
}
return true;
};
// 提交表单
const submitForm = async () => {
// 表单校验
if (!checkHlids() || !checkTime() || !checkRemark()) {
return;
}
try {
// 组装后端要求的参数格式
const requestParams = {
token: token,
// HLid
hlids: hlidsInput.value.split('\n')
.map(item => item.trim())
.filter(item => item)
.join('\n'),
// 备注
remark: remark.value.trim(),
// 操作人
...(operator.value.trim() && { operator: operator.value.trim() }),
// 时间参数
...(timeType.value === 'expire'
? { expire_time: formatDate(expireTime.value) }
: {
[delayUnit.value]: Number(delayValue.value)
})
};
console.log('传给后端的参数：', requestParams);
// 调用后端接口
const res = await exitMApi(requestParams);
ElMessage.success('成功添加用户权限');
// 重置表单并关闭弹框
resetForm();
dialogVisible.value = false;
addOrUpdata.value = 0;
// 重新获取表格
fetchTableData();
} catch (error) {
ElMessage.error('添加权限失败，请重试');
}
};
// 取消表单
const cancel = () => {
resetForm();
dialogVisible.value = false;
addOrUpdata.value = 0;
};
// 重置表单数据
const resetForm = () => {
hlidsInput.value = '';
timeType.value = '';
expireTime.value = '';
delayValue.value = '';
delayUnit.value = '';
remark.value = '';
operator.value = '';
};
// 获取地区列表
const fetchRegionList = async () => {
try {
isRegionLoading.value = true;
const data = await marketListApi();
const data = await marketListApi({token: token});
regionList.value = data.list;
} catch (error) {
console.error('获取地区列表失败：', error);
@ -146,6 +393,7 @@ const fetchTableData = async () => {
try {
tableLoading.value = true;
const requestParams = {
token: token,
dccode: searchForm.dccode,
dcname: searchForm.dcname,
market: searchForm.market,
@ -161,6 +409,7 @@ const fetchTableData = async () => {
} catch (error) {
console.error('获取表格数据失败：', error);
tableData.value = [];
datatotal.value = 0
} finally {
tableLoading.value = false;
}
@ -180,17 +429,32 @@ const search = () => {
// 开通权限按钮
const enableAccess = () => {
console.log('开通权限操作');
dialogVisible.value = true;
addOrUpdata.value = 1;
};
// 导出Excel列表按钮
const exportExcel = () => {
console.log('导出Excel列表');
const exportExcel = async () => {
const requestParams = {
token: token,
dccode: searchForm.dccode,
dcname: searchForm.dcname,
market: searchForm.market,
register_type: searchForm.register_type,
sort_field: sortProp.value,
sort_order: sortOrder.value
};
const data = await exportCreateApi(requestParams);
if (data != '') {
ElMessage.success('已导出');
}
};
// 查看导出列表按钮
const exportList = () => {
console.log('查看导出列表');
router.push({
path: "/userPermissions/export"
});
};
// 重置按钮
@ -208,12 +472,17 @@ const resetBn = () => {
// 编辑
const handleEdit = (row) => {
console.log('编辑用户：', row);
dialogVisible.value = true;
hlidsInput.value = row.dccode;
deadline.value = row.expire_time;
};
// 操作日志
const handleLog = (id) => {
console.log('操作日志：', id);
const handleLog = (dccode) => {
router.push({
path: "/userPermissions/logMarket",
query: { dccode: dccode }
});
};
// 分页方法
@ -233,7 +502,7 @@ const handleCurrentChange = (val) => {
const handleSortChange = (sort) => {
const { prop, order } = sort;
// 仅允许created_at（注册时间）和expire_time（到期时间）排序
// 仅允许注册时间和到期时间排序
if (!['created_at', 'expire_time'].includes(prop)) return;
// 覆盖排序状态（实现二选一）
@ -290,6 +559,7 @@ const handleSortChange = (sort) => {
font-size: 15px;
text-align: left;
color: #333;
margin-top: 13px;
}
/* 按钮组 */
@ -351,4 +621,74 @@ const handleSortChange = (sort) => {
background: #FEFBFB;
box-sizing: border-box;
}
/* 添加/修改样式 */
.form-item {
margin-bottom: 24px;
padding-left: 20px;
padding-right: 20px;
text-align: left;
}
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.radio-group {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.radio-item {
display: flex;
align-items: center;
}
.radio-item span {
margin-right: 8px;
}
.tip {
font-size: 12px;
color: #909399;
margin-top: 4px;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
gap: 16px;
margin-top: 20px;
}
.inline-form-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.inline-form-item .form-label {
display: inline-block;
margin-bottom: 0;
width: 60px;
text-align: left;
padding-right: 12px;
}
.info-container {
display: flex;
align-items: center;
gap: 40px;
padding: 0 20px 18px;
color: #333;
font-size: 16px;
}
.info-item {
white-space: nowrap;
}
</style>
Write Preview
Loading…
Cancel
Save