chenzihao/sac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 抽离白名单页面的组件，把新增白名单，白名单配置的弹窗以组建方式生成，按照新版的原型图，优化发布页面的逻辑，优化排版，解决部分BUG

Browse Source
This commit is contained in:
张洋川 2024-04-09 17:55:01 +08:00
parent 97cf321b57
commit f7727ac37f
9 changed files with 883 additions and 514 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
sf-ui/src/assets/images/code.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 B

1
sf-ui/src/views/FDS/installationList/index.vue
View File

@ -94,7 +94,6 @@
<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
<el-table-column align="center" type="selection" width="55"/>
<template v-if="activeTabs=='1'">
<el-table-column align="center" type="selection" width="55"/>
<el-table-column align="center" label="离线包名称" prop="configId"/>
<el-table-column :show-overflow-tooltip="true" align="center" label="版本" prop="configName"/>
<el-table-column :show-overflow-tooltip="true" align="center" label="平台" prop="configValue"/>

375
sf-ui/src/views/FDS/publishList/index.vue
View File

@ -120,10 +120,7 @@
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" align="center" label="发布环境" prop="configValue"/>
<el-table-column align="center" label="发布状态" prop="configType">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_yes_no" :value="scope.row.configType"/>
@ -143,19 +140,26 @@
min-width="80"
>
<template slot-scope="scope">
<el-popover
v-if="scope.row.qrCode && scopeC.row.status !== '20'"
ref="popver"
trigger="click"
width="200"
<el-image
:preview-src-list="srcList"
:src="url"
style="width: 80px; height: 80px"
>
<div class="table-img">
<img :src="'data:image/jpg;base64,'+ scope.row.qrCode">
<p v-if="scopeC.row.verifyCode">密码:{{ scope.row.verifyCode }}</p>
</div>
<!-- <img slot="reference" src="@/assets/code.png" class="table-qr">-->
</el-popover>
<div v-else>-</div>
</el-image>
<!-- <el-popover-->
<!-- v-if="scope.row.qrCode && scopeC.row.status !== '20'"-->
<!-- ref="popver"-->
<!-- trigger="click"-->
<!-- width="200"-->
<!-- >-->
<!-- <div class="table-img">-->
<!-- <img :src="'data:image/jpg;base64,'+ scope.row.qrCode">-->
<!-- <p v-if="scopeC.row.verifyCode">密码:{{ scope.row.verifyCode }}</p>-->
<!-- </div>-->
<!-- </el-popover>-->
<!-- <div v-else>-</div>-->
</template>
</el-table-column>
<el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="150">
@ -210,59 +214,210 @@
/>
<!-- 新增白名单弹出框 -->
<!-- <el-dialog :title="title" :visible.sync="addOpen" append-to-body width="500px">-->
<!-- <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!-- <el-form-item label="白名单名称" prop="configName">-->
<!-- <el-input v-model="form.configName" placeholder="请输入参数名称"/>-->
<el-dialog :title="title" :visible.sync="addOpen" append-to-body width="700px">
<el-form ref="formAdd" v-loading="$store.state.app.isLoading" :label-width="'120px'" :model="list"
:rules="rules"
>
<el-form-item label="APP名称" prop="AppName">
<el-input v-model="list.AppName" placeholder="输入APP名称"/>
</el-form-item>
<el-form-item label="上传类型" prop="">
<el-input v-model="list.AppName" placeholder="请选择上传类型"/>
</el-form-item>
<el-form-item label="选择系统" prop="grayFlag">
<div class="tag-group">
<el-tag :type="list.platform=='android'?'':'info'" @click="list.platform='android'">安卓</el-tag>
<el-tag :type="list.platform=='IOS'?'':'info'" @click="list.platform='IOS'">IOS</el-tag>
<el-tag :type="list.platform=='HarmonyOS'?'':'info'" @click="list.platform='HarmonyOS'">鸿蒙</el-tag>
</div>
</el-form-item>
<el-form-item v-if="list.platform!=='IOS'" label="安装包" prop="upgradeMode">
<el-input v-model="list.packName" class="input-with-select" placeholder="请选择包" readonly>
<el-button slot="append" icon="el-icon-search" @click="handlePackOpen"></el-button>
</el-input>
</el-form-item>
<el-form-item v-else label="APP Store地址" prop="AppLink">
<el-input v-model="list.AppLink" placeholder="请输入APPStore地址"/>
</el-form-item>
<el-form-item label="版本号" prop="versionNumber">
<el-input v-model="list.versionNumber" class="remark-input" maxlength="500" placeholder="输入版本号"
show-word-limit
/>
</el-form-item>
<el-form-item label="版本说明">
<el-input v-model="list.imprint" class="remark-input" maxlength="500" placeholder="输入版本描述"
show-word-limit
type="textarea"
/>
</el-form-item>
<!-- 根据需求确认是否需要这些条件-->
<!-- <el-form-item label="发布环境" prop="releaseDestType">-->
<!-- <el-radio v-model="list.releaseDestType" label="0">开发环境</el-radio>-->
<!-- <el-radio v-model="list.releaseDestType" label="1">测试发布</el-radio>-->
<!-- <el-radio v-model="list.releaseDestType" label="2">生产发布</el-radio>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="白名单类型" prop="configKey">-->
<!-- <el-input v-model="form.configKey" placeholder="请输入参数键名"/>-->
<!-- <el-form-item label="发布策略" prop="releaseDestType">-->
<!-- <el-radio v-model="list.releaseDestType" label="0">灰度发布</el-radio>-->
<!-- <el-radio v-model="list.releaseDestType" label="1">全量发布</el-radio>-->
<!-- <el-radio v-model="list.releaseDestType" label="2">回滚发布</el-radio>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="备注" prop="remark">-->
<!-- <el-input v-model="form.remark" placeholder="请输入内容" type="textarea"/>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button type="primary" @click="submitForm(1)">保 存</el-button>-->
<!-- <el-button @click="cancel(1)">取 消</el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
<el-form-item label="结果通知">
<el-switch
v-model="list.enableVerify"
/>
</el-form-item>
<el-form-item label="强制更新">
<el-switch
v-model="list.enableVerify"
/>
</el-form-item>
<el-form-item label="公开版">
<el-switch
v-model="list.enableVerify"
/>
</el-form-item>
<el-form-item label="下载验证">
<span slot="label">
下载验证
<el-tooltip class="item-tooltip"
content="当验证开关开启时，为发布包生成下载二维码的同时，也会生成一个6位验证码，扫描二维码后需经过验证码才可下载发布."
effect="dark"
placement="right"
>
<i class="el-icon-question"/>
</el-tooltip>
</span>
<el-switch
v-model="list.downVerifi"
/>
</el-form-item>
<el-form-item label="更新客群">
<el-radio v-model="list.numType" label="0">白名单客户</el-radio>
<el-radio v-model="list.numType" label="1">普通客户</el-radio>
</el-form-item>
<el-form-item label="有效期">
<template>
<div class="block">
<el-date-picker
v-model="list.expiryTime"
end-placeholder="结束日期"
range-separator="-"
start-placeholder="开始日期"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
></el-date-picker>
</div>
</template>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="list.desp" class="remark-input" maxlength="50" placeholder="请输入备注" show-word-limit
type="textarea"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm(1)">保 存</el-button>
<el-button @click="cancel(1)">取 消</el-button>
</div>
</el-dialog>
<!-- 发布详情 -->
<el-dialog :visible.sync="configOpen" append-to-body title="发布详情" width="900px">
<el-form ref="form" :model="form" label-width="100px" size="mini">
<el-row>
<el-col :span="12">
<el-form-item label="APP名称："></el-form-item>
<el-form-item label="上传类型：">安装包11111</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所选系统：">安装包1111.excel</el-form-item>
<el-form-item label="安装包名称：">58.1kb</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="版本号：">安卓</el-form-item>
<el-form-item label="子版本号：">登录模块</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="版本说明：">说明说明</el-form-item>
<el-form-item label="发布环境：">发布环境</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发布策略：">说明说明</el-form-item>
<el-form-item label="结果通知：">说明说明</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="强制更新：">说明说明</el-form-item>
<el-form-item label="公开版：">说明说明</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下载验证：">说明说明</el-form-item>
<el-form-item label="更新客群：">说明说明</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="下载地址：">说明说明</el-form-item>
<el-form-item label="下载量：">说明说明</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="注册数：">说明说明</el-form-item>
<el-form-item label="最后刷新：">说明说明</el-form-item>
</el-col>
<!-- 白名单配置弹出框 -->
<!-- <el-dialog :title="title" :visible.sync="configOpen" append-to-body width="500px">-->
<!-- <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!-- <el-form-item label="添加方式" prop="configName">-->
<!-- <el-radio-group v-model="form.debug">-->
<!-- <el-radio-->
<!-- :key="1"-->
<!-- :label="手动添加"-->
<!-- >手动添加-->
<!-- </el-radio>-->
<!-- <el-radio-->
<!-- :key="2"-->
<!-- :label="批量添加"-->
<!-- >批量添加-->
<!-- </el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="白名单类型" prop="configKey">-->
<!-- <el-input v-model="form.configKey" placeholder="请选择白名单类型"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="白名单ID" prop="configName">-->
<!-- <el-input v-model="form.configName" placeholder="输入用户ID"/>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="备注" prop="remark">-->
<!-- <el-input v-model="form.remark" placeholder="请输入备注" type="textarea"/>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button type="primary" @click="submitForm(2)">保 存</el-button>-->
<!-- <el-button @click="cancel(2)">取 消</el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
<el-col :span="12">
<el-form-item label="发布时间：">说明说明</el-form-item>
<el-form-item label="创建人：">说明说明</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="发布状态：">说明说明</el-form-item>
<el-form-item label="发布日志：">说明说明</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="有效期：">说明说明</el-form-item>
<el-form-item label="备注：">说明说明</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel(2)">关 闭</el-button>
</div>
</el-dialog>
<!--安装包弹窗-->
<el-dialog :visible.sync="packOpen" append-to-body title="添加安装包" width="900px">
<el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="90px" size="small">
<el-form-item label="安装包名称" prop="installpackName">
<el-input
v-model="queryParams.installpackName"
clearable
placeholder="请输入安装包名称"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
<el-table-column align="center" label="安装包名称" prop="configId"/>
<el-table-column :show-overflow-tooltip="true" align="center" label="版本号" prop="configName"/>
<el-table-column :show-overflow-tooltip="true" align="center" label="安装包大小" prop="configName"/>
<el-table-column :show-overflow-tooltip="true" align="center" label="适用系统" prop="configValue"/>
<el-table-column align="center" label="状态" prop="configType">
<template slot-scope="scopeA">
<dict-tag :options="dict.type.sys_yes_no" :value="scopeA.row.type"/>
</template>
</el-table-column>
<el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="250">
<template slot-scope="scope">
<el-button circle icon="el-icon-plus" type="primary"
></el-button>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button @click="packOpen=false">关 闭</el-button>
</div>
</el-dialog>
</div>
</template>
@ -294,6 +449,9 @@ export default {
addOpen: false,
// 是否显示白名单配置弹出框
configOpen: false,
packOpen: false,
// 日期范围
dateRange: [],
// 查询参数
@ -306,6 +464,42 @@ export default {
},
// 表单参数
form: {},
url: require('@/assets/images/code.png'),
srcList: [
require('@/assets/images/code.png')
],
list: {
rule: {
regularRule: false,
customRule: false
},
// headerOperations: [],
packId: '', // 安装包ID
grayFlag: '0', // 发布类型: 0灰度 1正式
upgradeMode: '0', //
releaseDestType: '0', // 发布条件： 0白名单 1时间窗
headerOperations: [// 自定义规则
// {
// 'scope': '', // 范围：region地区 platform平台
// 'inclued': '', // 是否包含 1包含 2不包含
// 'condition': '', // 发布条件
// 'desp': ''// 备注
// }
],
grayUserNum: '', // 灰度人数
numType: '0',
expiryTime: '', // 灰度结束时间
desp: '',
releaseRuleId: '', // 常用规则
// deviceListId: '', // 设备白名单
whiteListId: '',// 用户白名单id
enableVerify: false, //是否开启下载验证
imprint: '', //版本说明
versionNumber: '',
AppName: '', //APP名称
platform: 'android' //系统
},
whiteOptions: [],
// 表单校验
rules: {
configName: [
@ -371,10 +565,7 @@ export default {
this.reset()
// 使用ES6+语法
this.reset()
const type = 'add'
this.$router.push({
name: 'PublishAdd'
})
this.addOpen = true
},
// 多选框选中数据
@ -428,7 +619,7 @@ export default {
},
/**查看详情*/
handleDetail() {
this.configOpen = true
},
/**下载安装包*/
handleDownload() {
@ -443,7 +634,32 @@ export default {
handlePublish() {
},
/** 在上传之前进行校验 */
beforeAvatarUpload(file) {
const formatList = file.name.split('.')
const isFormat = file.type === 'text/plain' || formatList[formatList.length - 1] === 'txt'
if (!isFormat) {
this.$message.error(`上传格式只能是名称后缀为.txt的文本文件!`)
}
const isLt2M = file.size / 1024 / 1024 < 5
if (!isLt2M) {
this.$message.error(`上传文件大小不能超过5M!`)
}
return isLt2M && isFormat
},
/** 上传文件 */
handleSuccess(file) {
this.fileList = []
const nameList = file.context.path.split('/')
this.fileList.push({
name: file.context.name || nameList[nameList.length - 1],
url: file.context.path
})
this.addFormData.path = file.context.path
},
beforeRemove(files, filesList) {
return this.$confirm(`确定要移除${files.name}？`)
},
// 更多操作触发
handleCommand(command, row) {
switch (command) {
@ -460,8 +676,25 @@ export default {
default:
break
}
},
/** 弹出包选择框*/
handlePackOpen() {
this.packOpen = true
}
}
}
</script>
<style lang="scss" scoped>
.tag-group {
.el-tag {
cursor: pointer;
}
}
.el-tag + .el-tag {
margin-left: 10px
}
</style>

48
sf-ui/src/views/FDS/publishList/setting/add.vue
View File

@ -7,12 +7,12 @@
</el-header>
<el-main>
<div class="form-main">
<el-form ref="formAdd" v-loading="$store.state.app.isLoading" :model="list" :label-width="'120px'" :rules="rules">
<el-form ref="formAdd" v-loading="$store.state.app.isLoading" :label-width="'120px'" :model="list"
:rules="rules"
>
<el-form-item label="APP名称" prop="AppName">
<el-input v-model="list.AppName" placeholder="输入APP名称"/>
</el-form-item>
<el-form-item label="上传类型" prop="">
<el-input v-model="list.AppName" placeholder="输入APP名称"/>
</el-form-item>
@ -26,7 +26,9 @@
<el-radio v-model="list.upgradeMode" label="1">强制升级</el-radio>
</el-form-item>
<el-form-item label="升级描述" prop="upgradeDesp">
<el-input v-model="list.upgradeDesp" maxlength="50" show-word-limit class="remark-input" type="textarea" placeholder="请输入升级描述" />
<el-input v-model="list.upgradeDesp" class="remark-input" maxlength="50" placeholder="请输入升级描述" show-word-limit
type="textarea"
/>
</el-form-item>
<template v-if="list.grayFlag =='0'">
<el-form-item label="发布条件" prop="releaseDestType">
@ -41,11 +43,15 @@
<el-form-item label="版本号" prop="versionNumber">
<el-input v-model="list.versionNumber" maxlength="500" show-word-limit class="remark-input" placeholder="输入版本号" />
<el-input v-model="list.versionNumber" class="remark-input" maxlength="500" placeholder="输入版本号"
show-word-limit
/>
</el-form-item>
<el-form-item label="版本说明">
<el-input v-model="list.imprint" maxlength="500" show-word-limit class="remark-input" type="textarea" placeholder="输入版本描述" />
<el-input v-model="list.imprint" class="remark-input" maxlength="500" placeholder="输入版本描述" show-word-limit
type="textarea"
/>
</el-form-item>
<el-form-item label="发布环境" prop="releaseDestType">
<el-radio v-model="list.releaseDestType" label="0">开发环境</el-radio>
@ -77,7 +83,10 @@
<el-form-item v-if="list.releaseDestType =='1'" label="下载验证">
<span slot="label">
下载验证
<el-tooltip class="item-tooltip" effect="dark" content="当验证开关开启时，为发布包生成下载二维码的同时，也会生成一个6位验证码，扫描二维码后需经过验证码才可下载发布." placement="right">
<el-tooltip class="item-tooltip" content="当验证开关开启时，为发布包生成下载二维码的同时，也会生成一个6位验证码，扫描二维码后需经过验证码才可下载发布."
effect="dark"
placement="right"
>
<i class="el-icon-question"/>
</el-tooltip>
</span>
@ -96,18 +105,20 @@
<div class="block">
<el-date-picker
v-model="list.expiryTime"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
end-placeholder="结束日期"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
></el-date-picker>
</div>
</template>
</el-form-item>
<el-form-item label="备注" prop="desp">
<el-input v-model="list.desp" maxlength="50" show-word-limit class="remark-input" type="textarea" placeholder="请输入备注" />
<el-input v-model="list.desp" class="remark-input" maxlength="50" placeholder="请输入备注" show-word-limit
type="textarea"
/>
</el-form-item>
</template>
</el-form>
@ -121,8 +132,7 @@
// import { getWhiteList, getReleaseRuleList, getDictionaryList, getInstallTaskAdd, getTypeList } from '@/api/FDS'
export default {
name: 'InstallationAdd',
components: {
},
components: {},
data() {
var checkHeader = (rule, value, callback) => {
if (this.list.rule.customRule) {
@ -177,7 +187,7 @@ export default {
enableVerify: false, //是否开启下载验证
imprint: '', //版本说明
versionNumber: '',
AppName:'', //APP名称
AppName: '' //APP名称
},
whiteOptions: [],
releaseOptions: [],
@ -214,8 +224,7 @@ export default {
}
}
},
computed: {
},
computed: {},
watch: {
'list.rule.regularRule'(newR, oldR) { // 常用规则
if (this.list.rule.customRule && newR) {
@ -374,13 +383,16 @@ export default {
background: #ffffff;
margin: 24px;
}
.form-main {
width: 700px;
margin: 0 auto;
}
.form-row {
margin-top: 20px;
}
::v-deep .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner {
border: 1px solid #E4E7ED !important;
}
@ -388,9 +400,11 @@ export default {
.custom-table {
font-size: 12px;
}
.addRow {
width: 100px;
}
.remark-input {
width: 400px;
}

15
sf-ui/src/views/FDS/publishList/setting/detail.vue
View File

@ -24,9 +24,6 @@
<el-col :span="24">
<el-form-item label="版本说明：">说明说明</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="发布环境：">发布环境</el-form-item>
</el-col>
@ -93,8 +90,7 @@
<script>
export default {
name: 'InstallationPackDetail',
components: {
},
components: {},
data() {
return {
disabledFlag: true,
@ -187,8 +183,7 @@ export default {
}
}
},
methods: {
}
methods: {}
}
</script>
<style lang="scss" scoped>
@ -196,22 +191,28 @@ export default {
background: #ffffff;
margin: 24px;
}
.form-main {
width: 700px;
margin: 0 auto;
}
.form-row {
margin-top: 20px;
}
::v-deep .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner {
border: 1px solid #E4E7ED !important;
}
.custom-table {
font-size: 12px;
}
.addRow {
width: 100px;
}
.remark-input {
width: 400px;
}

107
sf-ui/src/views/FDS/whiteListManagement/components/add.vue Normal file
View File

@ -0,0 +1,107 @@
<template>
<el-dialog :modal-append-to-body="false" :title="title" v-bind="$attrs" width="500px"
@close="onClose"
@open="onOpen"
v-on="$listeners"
>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="白名单名称" prop="whiteListName">
<el-input v-model="form.whiteListName" placeholder="请输入白名单名称"/>
</el-form-item>
<el-form-item label="白名单类型" prop="whiteListType">
<el-select v-model="form.whiteListType" clearable placeholder="请选择白名单类型">
<el-option
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" placeholder="请输入内容" type="textarea"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitAddForm()">保 存</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import { addConfig, updateConfig } from '@/api/system/config'
export default {
name: 'Add',
dicts: ['sys_yes_no'],
props: {
// 图片数量限制
title: {
type: String,
default: '添加白名单'
}
},
data() {
return {
configName: undefined,
form: {},
// 白名单配置表单验证
rules: {
whiteListName: [
{ required: true, message: '白名单名称不能为空', trigger: 'blur' }
],
whiteListType: [
{ required: true, message: '白名单类型不能为空', trigger: 'change' }
]
}
}
},
methods: {
/** 提交按钮 */
submitAddForm: function() {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.configId != undefined) {
updateConfig(this.form).then(response => {
this.$modal.msgSuccess('修改成功')
this.closeModal()
})
} else {
addConfig(this.form).then(response => {
this.$modal.msgSuccess('新增成功')
this.closeModal()
})
}
}
})
},
reset() {
this.form = {
whiteListType: undefined,
whiteListName: undefined,
remark: undefined
}
this.resetForm('form')
},
// 取消按钮
cancel() {
this.reset()
this.closeModal()
},
closeModal() {
this.$emit('close')
},
onOpen() {
this.active = this.current
this.key = ''
},
onClose() {
}
}
}
</script>

156
sf-ui/src/views/FDS/whiteListManagement/components/addConfig.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<el-dialog :modal-append-to-body="false" :title="title" v-bind="$attrs" width="500px"
@close="onClose"
@open="onOpen"
v-on="$listeners"
>
<el-form ref="configForm" :model="configForm" :rules="configRules" label-width="120px">
<el-form-item label="添加方式" prop="configName">
<el-radio-group v-model="configForm.addMode">
<el-radio
:label="1"
>手动添加
</el-radio>
<el-radio
:label="2"
>批量添加
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="白名单类型" prop="whiteListType">
<el-input v-model="configForm.whiteListType" placeholder="请选择白名单类型"/>
</el-form-item>
<el-form-item v-if="configForm.addMode==1" label="白名单ID" prop="whitelistIds">
<el-input v-model="configForm.whitelistIds" placeholder="请输入白名单ID" type="textarea"/>
</el-form-item>
<el-form-item v-else-if="configForm.addMode==2" label="白名单文件">
<el-upload
ref="whiteListFiles"
:auto-upload="true"
:before-remove="beforeRemove"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
:headers="{tokenId: tokenId}"
:multiple="false"
:on-success="handleSuccess"
accept=".txt"
action="https://jsonplaceholder.typicode.com/posts/"
class="upload"
>
<el-button slot="trigger" size="small" type="primary">上传文件</el-button>
</el-upload>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="configForm.remark" placeholder="请输入备注" type="textarea"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitConfigForm(2)">保 存</el-button>
<el-button @click="cancel(2)">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import { addConfig } from '@/api/system/config'
export default {
name: 'Add',
dicts: ['sys_yes_no'],
props: {
// 图片数量限制
title: {
type: String,
default: '添加白名单'
}
},
data() {
return {
configName: undefined,
configForm: {},
fileList: [],
tokenId: '',
// 白名单配置表单验证
configRules: {
addMode: [
{ required: true, message: '添加方式不能为空', trigger: 'change' }
],
whiteListType: [
{ required: true, message: '白名单类型不能为空', trigger: 'change' }
],
whitelistIds: [
{ required: true, message: '白名单名称不能为空', trigger: 'blur' }
]
}
}
},
methods: {
/** 提交按钮 */
/** 白名单配置提交 **/
submitConfigForm: function() {
this.$refs['configForm'].validate(valid => {
if (valid) {
addConfig(this.configForm).then(response => {
this.$modal.msgSuccess('新增成功')
this.closeModal()
})
}
})
},
reset() {
this.form = {
configId: undefined,
configName: undefined,
configKey: undefined,
configValue: undefined,
configType: 'Y',
remark: undefined
}
this.resetForm('form')
},
// 取消按钮
cancel(type) {
this.reset()
this.closeModal()
},
closeModal() {
this.$emit('close')
},
onOpen() {
this.active = this.current
this.key = ''
},
onClose() {
},
/** 在上传之前进行校验 */
beforeAvatarUpload(file) {
const formatList = file.name.split('.')
const isFormat = file.type === 'text/plain' || formatList[formatList.length - 1] === 'txt'
if (!isFormat) {
this.$message.error(`上传格式只能是名称后缀为.txt的文本文件!`)
}
const isLt2M = file.size / 1024 / 1024 < 5
if (!isLt2M) {
this.$message.error(`上传文件大小不能超过5M!`)
}
return isLt2M && isFormat
},
/** 上传文件 */
handleSuccess(file) {
this.fileList = []
const nameList = file.context.path.split('/')
this.fileList.push({
name: file.context.name || nameList[nameList.length - 1],
url: file.context.path
})
this.addFormData.path = file.context.path
},
beforeRemove(files, filesList) {
return this.$confirm(`确定要移除${files.name}？`)
}
}
}
</script>

0
sf-ui/src/views/FDS/whiteListManagement/components/detail.vue Normal file
View File

173
sf-ui/src/views/FDS/whiteListManagement/index.vue
View File

@ -160,88 +160,22 @@
:total="total"
@pagination="getList"
/>
<!-- 新增白名单弹出框 -->
<el-dialog :title="title" :visible.sync="addOpen" append-to-body width="500px">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="白名单名称" prop="whiteListName">
<el-input v-model="form.whiteListName" placeholder="请输入白名单名称"/>
</el-form-item>
<el-form-item label="白名单类型" prop="whiteListType">
<el-select v-model="form.whiteListType" clearable placeholder="请选择白名单类型">
<el-option
v-for="dict in dict.type.sys_yes_no"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" placeholder="请输入内容" type="textarea"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitAddForm()">保 存</el-button>
<el-button @click="cancel(1)">取 消</el-button>
</div>
</el-dialog>
<!-- 白名单配置弹出框 -->
<el-dialog :title="title" :visible.sync="configOpen" append-to-body width="500px">
<el-form ref="form" :model="configForm" :rules="configRules" label-width="120px">
<el-form-item label="添加方式" prop="configName">
<el-radio-group v-model="configForm.addMode">
<el-radio
:label="1"
>手动添加
</el-radio>
<el-radio
:label="2"
>批量添加
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="白名单类型" prop="whiteListType">
<el-input v-model="configForm.whiteListType" placeholder="请选择白名单类型"/>
</el-form-item>
<el-form-item v-if="configForm.addMode==1" label="白名单ID" prop="whitelistIds">
<el-input v-model="configForm.whitelistIds" placeholder="请输入白名单ID" type="textarea"/>
</el-form-item>
<el-form-item v-else-if="configForm.addMode==2" label="白名单文件">
<el-upload
ref="whiteListFiles"
:auto-upload="true"
:before-remove="beforeRemove"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
:headers="{tokenId: tokenId}"
:multiple="false"
:on-success="handleSuccess"
accept=".txt"
action="https://jsonplaceholder.typicode.com/posts/"
class="upload"
>
<el-button slot="trigger" size="small" type="primary">上传文件</el-button>
</el-upload>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="configForm.remark" placeholder="请输入备注" type="textarea"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitConfigForm(2)">保 存</el-button>
<el-button @click="cancel(2)">取 消</el-button>
</div>
</el-dialog>
<add-modal :title="title" :visible.sync="addOpen" @close="closeAdd"/>
<add-config :title="title" :visible.sync="configOpen" @close="closeAddConfig"/>
</div>
</template>
<script>
import { addConfig, delConfig, getConfig, listConfig, updateConfig } from '@/api/system/config'
import { delConfig, getConfig, listConfig } from '@/api/system/config'
import AddModal from './components/add.vue'
import AddConfig from './components/addConfig.vue'
export default {
name: 'WhiteList',
dicts: ['sys_yes_no'],
components: {
AddModal,
AddConfig
},
data() {
return {
// 遮罩层
@ -282,28 +216,6 @@ export default {
whiteListType: undefined,
whitelistIds: undefined,
remark: undefined
},
// 表单校验
rules: {
whiteListName: [
{ required: true, message: '白名单名称不能为空', trigger: 'blur' }
],
whiteListType: [
{ required: true, message: '白名单类型不能为空', trigger: 'change' }
]
},
// 白名单配置表单验证
configRules: {
addMode: [
{ required: true, message: '添加方式不能为空', trigger: 'change' }
],
whiteListType: [
{ required: true, message: '白名单类型不能为空', trigger: 'change' }
],
whitelistIds: [
{ required: true, message: '白名单名称不能为空', trigger: 'blur' }
]
}
}
},
@ -375,46 +287,12 @@ export default {
this.title = '修改白名单'
})
},
/** 提交按钮 */
submitAddForm: function() {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.configId != undefined) {
updateConfig(this.form).then(response => {
this.$modal.msgSuccess('修改成功')
this.addOpen = false
this.getList()
})
} else {
addConfig(this.form).then(response => {
this.$modal.msgSuccess('新增成功')
this.addOpen = false
this.getList()
})
}
}
})
},
/** 白名单配置提交 **/
submitConfigForm: function() {
this.$refs['configForm'].validate(valid => {
if (valid) {
addConfig(this.configForm).then(response => {
this.$modal.msgSuccess('新增成功')
this.configOpen = false
this.getList()
})
}
})
},
/** 白名单配置弹窗 **/
handleConfig(row) {
this.reset()
const configId = row.configId || this.ids
getConfig(configId).then(response => {
this.configForm = response.data
this.configForm.addMode = 1
this.configOpen = true
this.title = '白名单配置'
@ -437,7 +315,6 @@ export default {
handlePublish() {
const configIds = row.configId || this.ids
this.$modal.confirm('是否确认发布编号为"' + configIds + '"的数据项？').then(function() {
//这里写发布操作
return delConfig(configIds)
}).then(() => {
@ -472,33 +349,15 @@ export default {
})
},
/** 在上传之前进行校验 */
beforeAvatarUpload(file) {
const formatList = file.name.split('.')
const isFormat = file.type === 'text/plain' || formatList[formatList.length - 1] === 'txt'
if (!isFormat) {
this.$message.error(`上传格式只能是名称后缀为.txt的文本文件!`)
}
const isLt2M = file.size / 1024 / 1024 < 5
if (!isLt2M) {
this.$message.error(`上传文件大小不能超过5M!`)
}
return isLt2M && isFormat
/** 关闭新增弹出框*/
closeAdd() {
this.addOpen = false
this.getList()
},
/** 上传文件 */
handleSuccess(file) {
this.fileList = []
const nameList = file.context.path.split('/')
this.fileList.push({
name: file.context.name || nameList[nameList.length - 1],
url: file.context.path
})
this.addFormData.path = file.context.path
},
beforeRemove(files, filesList) {
return this.$confirm(`确定要移除${files.name}？`)
closeAddConfig() {
this.configOpen = false
this.getList()
}
}
}
</script>