<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>账号密码和域名管理</title>
</head>
<body>
<!-- 创建一个根元素 -->
<div class="home" id="home">
<el-tabs v-model="activePage" :lazy="true" class="tabs" v-if="vTabs">
<el-tab-pane label="人是云账号密码管理" name="1"></el-tab-pane>
<el-tab-pane label="项目域名地址管理" name="2"></el-tab-pane>
</el-tabs>
<div class="table" v-if="activePage=='1'">
<div class="filter">
<el-select v-model="accountTypeValue" placeholder="请选择账号类型" style="width: 200px;margin-right: 30px;"
@change="handleChange">
<el-option v-for="item in accountType" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-select v-model="accountEnvValue" placeholder="请选择账号环境" style="width: 200px;margin-right: 30px;"
@change="handleChange">
<el-option v-for="item in accountEnv" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-input v-model="search" style="width: 250px;" placeholder="输入账号名称关键字搜索" />
</div>
<el-table stripe border :header-cell-style="{background:'#eef1f6',color:'#606266'}" class='tableBox'
:data="formTable.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%">
<el-table-column label="账号" prop="userName" width="200">
</el-table-column>
<el-table-column label="密码" prop="password">
</el-table-column>
<el-table-column label="备注" prop="memo">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="copyVal(scope.row.userName,1)">复制账号</el-button>
<el-button size="mini" type="primary" @click="copyVal(scope.row.password,2)">复制密码</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="table" v-if="activePage=='2'">
<div class="filter">
<el-select v-model="appEnvValue" placeholder="请选择应用环境" style="width: 200px;margin-right: 30px;"
@change="handleChange2">
<el-option v-for="item in appEnv" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-select v-model="appEnvPlatformValue" placeholder="请选择应用平台" style="width: 200px;margin-right: 30px;"
@change="handleChange2">
<el-option v-for="item in appEnvPlatform" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-input v-model="search2" style="width: 250px;" placeholder="输入应用名称关键字搜索" />
</div>
<el-table border :header-cell-style="{background:'#eef1f6',color:'#606266'}"
:data="formTable2.filter(data => !search2 || data.appName.toLowerCase().includes(search2.toLowerCase()))"
style="width: 100%" class='tableBox'>
<el-table-column label="应用名称" prop="appName" width="200">
</el-table-column>
<el-table-column label="应用地址" prop="appUrlArr">
<template slot-scope="scope">
{{scope.row.appUrlArr[appEnvValue-1][appEnvPlatformValue==1?'pc':'h5']}}
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary"
@click="copyVal(scope.row.appUrlArr[appEnvValue-1][appEnvPlatformValue==1?'pc':'h5'],3)">复制应用地址
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<script>
// 将vue挂载到id为home的根元素上
var vm = new Vue({
el: "#home",
data() {
return {
activePage: '1',
vTabs: false,
formTable: [],
formTable2: [],
tableData: [
{
userName: '13420615180',
password: 'a123456',
memo: '阿洪啊',
accountType: 1, //1:个人账号 2:企业账号
accountEnv: [1, 2], //1:内网环境 2:测试环境 3:生产环境
},
{
userName: '13613092623',
password: 'a123456',
memo: '田仰欢',
accountType: 1,
accountEnv: [1, 2, 3],
},
{
userName: '13676290916',
password: 'a123456',
memo: '李岳森',
accountType: 1,
accountEnv: [1, 2, 3],
},
{
userName: 'Arsen',
password: 'a123456',
memo: '李福森',
accountType: 1,
accountEnv: [1, 2, 3],
},
{
userName: 'huohuo',
password: 'a123456',
memo: '太',
accountType: 1,
accountEnv: [1, 2, 3],
},
{
userName: '13560327999',
password: 'a123456',
memo: '刘海平',
accountType: 1,
accountEnv: [1, 2, 3],
},
{
userName: 'rishon123',
password: 'test123456',
memo: '阿洪',
accountType: 1,
accountEnv: [3],
},
{
userName: '18102670583',
password: 'cenyanlin0525',
memo: '岑彦霖',
accountType: 1,
accountEnv: [3],
},
{
userName: 'Y13726870018',
password: 'a123456',
memo: '超级无敌大阳洋',
accountType: 1,
accountEnv: [1],
},
{
userName: 'xiaoxiao',
password: 'a123456',
memo: '565',
accountType: 1,
accountEnv: [1],
},
{
userName: 'lan',
password: 'a123456',
memo: '陈晓兰',
accountType: 1,
accountEnv: [1,3],
},
{
userName: 'yczh123',
password: 'a123456',
memo: '原创智汇(广东)信息科技有限公司',
accountType: 2,
accountEnv: [1, 2, 3],
},
{
userName: 'chen',
password: 'a123456',
memo: '西瓜公司',
accountType: 2,
accountEnv: [1, 2],
},
{
userName: 'laogua',
password: 'a123456',
memo: '老瓜公司',
accountType: 2,
accountEnv: [2],
},
{
userName: 'chenwc',
password: 'test123456',
memo: '梨子公司',
accountType: 2,
accountEnv: [1, 2, 3],
},
{
userName: 'zxc28306655',
password: 'a123456',
memo: '大喇叭公司1',
accountType: 2,
accountEnv: [1, 2, 3],
},
{
userName: 'guangmo',
password: 'gm20181019',
memo: '广州市摩利士工程管理服务有限公司',
accountType: 2,
accountEnv: [1, 2, 3],
},
{
userName: 'zxdsg123',
password: 'a123456',
memo: '超级大傻瓜公司',
accountType: 2,
accountEnv: [1, 2, 3],
},
{
userName: 'zhongfu',
password: 'zf20181019',
memo: '广州市中服物业管理有限公司',
accountType: 2,
accountEnv: [3],
},
],
tableData2: [
{
appName: '人是云平台',
appUrlArr: [{ pc: 'http://yun15.service.consul/', h5: 'http://yunm.service.consul/' }, { pc: 'https://t.renshihr.cn/', h5: 'http://renshihr.cn/' }, { pc: 'https://renshihr.com/', h5: 'https://renshihr.com/' }] //索引为0:内网环境 索引为1:测试环境 索引为2:正式环境
},
{
appName: '原文荟',
appUrlArr: ['', { pc: 'https://wenhui.renshihr.cn/', h5: 'https://wenhui.renshihr.cn/' }, { pc: 'http://ywh.renshihr.com/', h5: 'http://ywh.renshihr.com/' }]
},
{
appName: '档案管理',
appUrlArr: [{ pc: 'http://archive.service.consul/', h5: '' }, { pc: 'http://archive.renshihr.cn/', h5: '' }, { pc: 'http://archive.renshihr.com/', h5: '' }]
},
{
appName: '项目管理',
appUrlArr: [{ pc: 'http://project.service.consul/', h5: '' }, { pc: 'http://project.renshihr.cn/', h5: '' }, '']
},
{
appName: '识权识美',
appUrlArr: [{ pc: 'http://ippt8.service.consul', h5: 'http://ippt8.service.consul' }, { pc: 'http://ippt8.renshihr.cn', h5: 'http://ippt8.renshihr.cn' }, { pc: 'https://www.ippt8.com', h5: 'https://www.ippt8.com' }]
},
{
appName: '发薪易',
appUrlArr: [{ pc: 'http://yun15.service.consul/app/salary', h5: '' }, { pc: 'https://t.renshihr.cn/app/salary', h5: '' }, { pc: 'https://renshihr.com/app/salary', h5: '' }]
},
{
appName: '网盘',
appUrlArr: [{ pc: 'http://yun15.service.consul/console/pan', h5: '' }, { pc: 'https://t.renshihr.cn/console/pan', h5: '' }, { pc: 'https://renshihr.com/console/pan', h5: '' }]
},
{
appName: '公信易',
appUrlArr: ['', { pc: 'http://gongxinyi.renshihr.cn/', h5: '' }, { pc: 'https://www.gongxinyi.cn/', h5: '' }]
},
{
appName: '人事签',
appUrlArr: [{ pc: 'http://contract.service.consul/', h5: '' }, { pc: 'http://contract.renshihr.cn/', h5: '' }, { pc: 'https://contract.renshihr.com/', h5: '' }]
},
{
appName: '便捷签',
appUrlArr: [{ pc: 'http://contracthr.service.consul/', h5: '' }, { pc: 'http://contractfast.renshihr.cn/', h5: '' }, { pc: 'https://bjq.renshihr.com/', h5: '' }]
},
{
appName: '商社保',
appUrlArr: [{ pc: 'http://shebao.service.consul/', h5: '' }, { pc: 'http://shebao.renshihr.cn/', h5: '' }, { pc: 'https://shebao.renshihr.com/', h5: '' }]
},
{
appName: '公信易',
appUrlArr: [{ pc: 'http://shebao.service.consul/', h5: '' }, { pc: 'http://copyright.renshihr.cn/', h5: '' }, { pc: 'https://www.gongxinyi.cn/', h5: '' }]
},
{
appName: '名片',
appUrlArr: ['', { pc: 'https://gzapi.renshihr.cn/', h5: '' }, { pc: 'https://t.renshihr.com/', h5: '' }]
},
{
appName: '考勤打卡',
appUrlArr: [{ pc: 'http://attendance.service.consul/', h5: '' }, { pc: 'http://attendance.renshihr.cn/', h5: '' }, '']
},
{
appName: 'OA审批',
appUrlArr: [{ pc: 'http://oaaudit.service.consul/', h5: 'http://oaaudit.service.consul/' }, { pc: 'http://oaaudit.renshihr.cn/', h5: 'http://oaaudit.renshihr.cn/' }, '']
},
],
search: '',
search2: '',
accountType: [{
value: 1,
label: '个人账号'
}, {
value: 2,
label: '企业账号'
}],
accountEnv: [{
value: 1,
label: '内网环境'
}, {
value: 2,
label: '测试环境'
}, {
value: 3,
label: '正式环境'
}],
appEnv: [{
value: 1,
label: '内网环境'
}, {
value: 2,
label: '测试环境'
}, {
value: 3,
label: '正式环境'
}],
appEnvPlatform: [{
value: 1,
label: 'PC端'
}, {
value: 2,
label: 'H5端'
}],
accountTypeValue: 1,
accountEnvValue: 2,
appEnvValue: 2,
appEnvPlatformValue: 1,
};
},
methods: {
// 复制操作
copyVal(context, num) {
// 创建输入框元素
let oInput = document.createElement('input');
// 将想要复制的值
oInput.value = context;
// 页面底部追加输入框
document.body.appendChild(oInput);
// 选中输入框
oInput.select();
// 执行浏览器复制命令
document.execCommand('Copy');
// 弹出复制成功信息
if (num == 1) {
this.$message.success('账号复制成功');
}
if (num == 2) {
this.$message.success('密码复制成功');
}
if (num == 3) {
this.$message.success('地址复制成功');
}
// 复制后移除输入框
oInput.remove();
},
handleChange() {
this.formTable = JSON.parse(JSON.stringify(this.tableData)).filter(v => v.accountType == this.accountTypeValue && v.accountEnv.includes(this.accountEnvValue))
},
handleChange2() {
console.log(this.appEnvValue - 1, this.appEnvPlatformValue == 1 ? 'pc' : 'h5', 111);
this.formTable2 = JSON.parse(JSON.stringify(this.tableData2)).filter(v => v.appUrlArr[this.appEnvValue - 1] && v.appUrlArr[this.appEnvValue - 1][this.appEnvPlatformValue == 1 ? 'pc' : 'h5'])
}
},
mounted() {
this.handleChange();
this.handleChange2();
setTimeout(() => { // 解决vant-tab组件官方问题：底部条位置错误
this.vTabs = true
}, 10)
},
created() { },
});
</script>
</body>
<style>
.home {
width: 1000px;
margin: 0 auto;
}
.tabs {
margin-bottom: 10px;
}
.tabs .el-tabs__item {
font-size: 20px;
}
.table {
text-align: center;
}
.tableBox {
max-height: calc(100vh - 130px);
overflow-y: auto;
}
.tableBox::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.tableBox::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #999;
}
.filter {
margin-bottom: 10px;
display: flex;
align-items: center;
}
</style>
</html>标签：vue,http,cn,accountEnv,h5,pc,HTML,renshihr,页面 From： https://www.cnblogs.com/liyunxi/p/17705551.html