| @@ -47,204 +47,92 @@ export default [ | |||
| component: () => import('@/view/about') | |||
| }, | |||
| { | |||
| path: '/admin/application/add', | |||
| name: 'article_add', | |||
| path: '/vip', | |||
| name: 'vip', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: 'article add', | |||
| title: '通知', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/application-add') | |||
| component: () => import('@/view/vip') | |||
| }, | |||
| { | |||
| path: '/admin/ud/list', | |||
| name: 'org', | |||
| path: '/vip-service', | |||
| name: 'vip-service', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: 'org manager', | |||
| title: '会员服务', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/ud-list') | |||
| component: () => import('@/view/vip-service') | |||
| }, | |||
| { | |||
| path: '/ud/dictionary', | |||
| name: '数据字典', | |||
| path: '/exchange', | |||
| name: 'exchange', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: 'org manager', | |||
| title: '合作交流', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/ud-dictionary') | |||
| component: () => import('@/view/exchange') | |||
| }, | |||
| { | |||
| path: '/admin/ud/account', | |||
| name: 'account', | |||
| path: '/vip-apply', | |||
| name: 'vip-apply', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: 'account manager', | |||
| title: '会员服务', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/account') | |||
| component: () => import('@/view/vip-apply') | |||
| }, | |||
| { | |||
| path: '/admin/classify/management', | |||
| name: 'account', | |||
| path: '/about-detail', | |||
| name: 'about-detail', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: 'classify management', | |||
| title: '协会简介', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/classify-management') | |||
| component: () => import('@/view/about-detail') | |||
| }, | |||
| { | |||
| path: '/admin/authentication/list', | |||
| name: 'account', | |||
| path: '/about-detail2', | |||
| name: 'about-detail2', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: '认证源', | |||
| title: '协会章程', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/authentication-list') | |||
| component: () => import('@/view/about-detail2') | |||
| }, | |||
| { | |||
| path: '/admin/authentication/radius', | |||
| name: 'radius', | |||
| path: '/connect', | |||
| name: 'connect', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: 'RADIUS', | |||
| title: '联系我们', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/authentication-radius') | |||
| component: () => import('@/view/connect') | |||
| }, | |||
| { | |||
| path: '/admin/authentication/certificates', | |||
| name: 'certificates', | |||
| path: '/km', | |||
| name: 'km', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: '证书管理', | |||
| title: '知识产权', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/authentication-certificates') | |||
| }, | |||
| { | |||
| path: '/admin/ps/list', | |||
| name: 'ps-list', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: '权限系统', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/ps-list') | |||
| }, | |||
| { | |||
| path: '/ps/grant/manager', | |||
| name: 'ps-grant-manager', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: '授权管理', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/ps-grant-manager') | |||
| }, | |||
| { | |||
| path: '/ps/role_list', | |||
| name: 'role_list', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: '角色管理', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/role-list'), | |||
| props: route => ({ query: route.query.psId}) | |||
| }, | |||
| { | |||
| path: '/ps/permission_list', | |||
| name: 'permission_list', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: '角色管理', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/permission-list'), | |||
| props: route => ({ query: route.query.psId}) | |||
| }, | |||
| { | |||
| path: '/admin/authorization/application', | |||
| name: 'authorization-application', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: '应用授权', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/authorization-application') | |||
| }, | |||
| { | |||
| path: '/admin/audit/list', | |||
| name: 'audit-list', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: '操作日志', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/audit-list') | |||
| }, | |||
| { | |||
| path: '/admin/audit/login/list', | |||
| name: 'audit-login-list', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: '操作日志', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/audit-login-list') | |||
| }, | |||
| { | |||
| path: '/admin/approval', | |||
| name: 'approval', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: '审批管理', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/approval') | |||
| }, | |||
| { | |||
| path: '/admin/sessions', | |||
| name: 'sessions', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: '会话管理', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/sessions') | |||
| }, | |||
| { | |||
| path: '/admin/security-setting', | |||
| name: 'security-setting', | |||
| meta: { | |||
| hideInMenu: true, | |||
| title: '安全设置', | |||
| notCache: true, | |||
| showInBreadCrumb: true | |||
| }, | |||
| component: () => import('@/view/security-setting') | |||
| component: () => import('@/view/km') | |||
| } | |||
| ] | |||
| }, | |||
| @@ -0,0 +1,73 @@ | |||
| <template> | |||
| <el-main style="width: 960px;margin: 0 auto;min-height: 500px"> | |||
| <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 10px"> | |||
| <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item> | |||
| <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> | |||
| <el-breadcrumb-item>关于我们</el-breadcrumb-item> | |||
| <el-breadcrumb-item>协会简介</el-breadcrumb-item> | |||
| </el-breadcrumb> | |||
| <el-card class="article" shadow="never" style="border-radius: 8px"> | |||
| <h2 class="title">上海市集成电路行业协会简介</h2> | |||
| <div class="info">作者:SICA 发布日期:2011年12月28日 星期三</div> | |||
| <div class="content"> | |||
| <p> | |||
| 上海市集成电路行业协会SHANGHAI INTEGRATED CIRCUIT INDUSTRY ASSOCIATION (缩写:SICA),成立于2001年4月,为本市从事集成电路设计、制造、封装、测试、智能卡及其设备材料和其它直接相关的企事业单位自愿参加并组织起来的,不以营利为目的行业性社会团体法人。 | |||
| </p> | |||
| <p> | |||
| 协会现有各种所有制会员单位485家。总投资为298.6亿美元,注册资金为137.6亿美元。从业人员总数达155473人,其中技术人员为64952人。根据所有制情况分类,中外合资、合作60家,外商独资204家,内资109家,民营112家。其中从事设计205家,晶圆制造13家,封装测试38家,设备材料98家,分立器件3家,智能卡22家,科研院所及其配套106家。485家会员中,理事单位147家。其中常务理事46家,包括会长单位1家,副会长单位25家。 | |||
| </p> | |||
| <p> | |||
| 协会下设设计、制造、封装测试、设备材料、智能卡五个专业委员会。协会有独立的网站、《集成电路应用》杂志会刊(月刊),以及每月一期的简报,及时发布行业信息。协会为企业进行政策服务和政策协调,积极帮助打通产业链,进行行业统计和分析工作,开展各种交流合作研讨活动和行业标准制定及知识产权保护等工作。 | |||
| </p> | |||
| <span> | |||
| 会长单位:上海华虹(集团)有限公司<br/> | |||
| 会 长:张素心<br/>法定代表人:雷海波<br/> | |||
| 秘书长:徐 伟<br/> | |||
| 协会地址:上海市浦东新区 张江 碧波路500号209室,邮政编码:201203<br/> | |||
| 电 话:021-50805257<br/> | |||
| 传 真:021-50805259<br/> | |||
| 电子邮件:contact@sica.org.cn | |||
| </span> | |||
| </div> | |||
| <img src="../assets/img/psyv4oida1jvaj8n2mxkx2kjp8iqzpm0bfa27bc4b3-005e-42ef-b01b-b2ee10e9bd65.png" style="width: 100%;height: 300px;margin: 20px 0;border-radius: 10px" > | |||
| </el-card> | |||
| </el-main> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return {} | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .title{ | |||
| color: #333; | |||
| } | |||
| .article .title,.article .info{ | |||
| text-align: center; | |||
| margin: 10px; | |||
| } | |||
| .article .info{ | |||
| color: #999; | |||
| } | |||
| .article .content p{ | |||
| text-indent: 2em; | |||
| margin-bottom: 20px; | |||
| line-height: 1.5rem; | |||
| } | |||
| .article .content span{ | |||
| line-height: 1.5rem; | |||
| } | |||
| .location{ | |||
| margin-right: 10px; | |||
| font-size: 12px !important; | |||
| } | |||
| .el-breadcrumb__item{ | |||
| font-size: 12px !important; | |||
| } | |||
| .location i.el-breadcrumb__separator{ | |||
| display: none; | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,62 @@ | |||
| <template> | |||
| <el-main style="width: 960px;margin: 0 auto;min-height: 500px"> | |||
| <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 10px"> | |||
| <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item> | |||
| <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> | |||
| <el-breadcrumb-item>关于我们</el-breadcrumb-item> | |||
| <el-breadcrumb-item>协会简介</el-breadcrumb-item> | |||
| </el-breadcrumb> | |||
| <el-card class="article" shadow="never" style="border-radius: 8px"> | |||
| <h2 class="title">上海市集成电路行业协会章程</h2> | |||
| <div class="info">作者:SICA 发布日期:2011年12月28日 星期三</div> | |||
| <div class="content"> | |||
| <div class="title">第一章 总 则<br /></div> | |||
| <span><br />第一条 本会的名称是上海市集成电路行业协会。(英文名称是SHANGHAI INTEGRATED CIRCUIT INDUSTRY ASSOCIATION,缩写是 SICA。)<br /><br />第二条 本会依照《社会团体登记管理条例》和《上海市促进行业协会发展规定》等规定,由本市集成电路行业同业企业,(从事集成电路的生产、设计、科研教学、开发、经营、应用)以及其他相关经济组织自愿组成、实行行业服务和自律管理的非营利性的社会团体法人。<br /><br />第三条 本会的宗旨:遵守中华人民共和国宪法和法律,在行业管理中发挥积极作用,作为政府与企事业单位之间的桥梁和纽带,为增强企业的市场竞争力,为促进上海集成电路产业的发展提供服务。<br /><br />第四条 本会的登记管理机关是上海市社会团体管理局,相关行业主管部门是上海市经济和信息化委员会。本会接受登记管理机关和相关行业主管部门的监督管理和业务指导。<br /><br />第五条 本会的住所和活动地域:上海市。<br /><br/></span> | |||
| <div class="title">第二章 任务、业务范围、活动原则<br/></div> | |||
| <span><br />第六条 本会的任务:加强行业服务、行业自律、行业代表、行业协调:<br /><br />(一)宣传贯彻国家关于集成电路产业的各项方针、政策,促进企业提高市场竞争力。<br /><br />(二)收集整理国内外行业信息,进行产业发展的政策、环境、技术和市场等方面的研究,为会员传递信息,为政府部门决策和制定产业政策提供参考。<br /><br />(三)代表本行业向有关国家机关反映涉及行业利益的事项,提出经济政策和立法方面的意见和建议。<br /><br />(四)根据国家法律、法规,代表行业内相关企业向政府有关部门提出反倾销、反补贴调查或者采取保障措施的申请,协助政府有关部门完成相关调查。<br /><br />(五)制订并督促会员企业遵守诚信原则。对违反行规行约,损害行业整体形象的会员,采取相应的行业自律措施;对违法经营的企业,建议政府有关部门予以查处。<br /><br />(六)促进行业内集成电路产业链间的交流与合作,组织拓展、发布市场信息,推介行业产品。<br /><br />(七)开展知识产权保护工作,组织行业内各种层次的技术培训、进修和国际国内的合作与交流。<br /><br />(八)接受政府有关部门委托承担集成电路企业产品认定、产品评测、行业评估论证、技能资质考核、行业统计调查、行业发展规划和有关技术标准的制订等职能。<br /><br />第七条 本会的业务范围:行业调研、产品评测、会展、技术培训、交流、合作,编辑出版、咨询服务,承担政府授权的职能。<br /><br />第八条 本会的活动原则:<br /><br />(一)本会遵守宪法、法律、法规和国家政策,自觉遵守宪法确定的基本原则,自觉维护国家的统一、安全和民族的团结,自觉维护国家利益、社会公共利益以及其他组织和公民的合法权益,遵守社会公德和公序良俗,按照核准的章程开展公益性或者非营利性活动。<br /><br />(二)民主办会,实行民主集中制,建立民主决策、民主选举和民主管理制度,领导机构的产生和重大事项的决策,须经集体讨论,并按少数服从多数的原则作出决定。<br /><br />(三)本会开展活动时,诚实守信,公正公平,不弄虚作假,不损害国家、会员和个人利益。<br /><br />(四)本会遵循“自主办会”原则,工作自主、人员自聘、经费自筹。<br /><br /><br/></span> | |||
| <div class="title">第三章 会 员<br /></div> | |||
| <span><br />第九条 本会由单位会员组成。<br /><br />第十条 申请加入本会,必须具备下列条件:<br /><br />(一)应持有工商营业执照等相关证件。<br /><br />(二)自愿加入本会。<br /><br />(三)承认本会章程。<br /><br />(四)本行业同业企业以及其他相关经济组织。<br /><br />(五)在本会的业务领域内具有一定的影响。<br /><br />第十一条 会员入会的程序:<br /><br />(一)提交入会申请书。<br /><br />(二)经理事会授权的秘书处审核同意,并发给同意吸收入会的有关证书。<br /><br />第十二条 会员享有下列权利:<br /><br />(一)本会的选举权、被选举权和表决权。<br /><br />(二)参加本会的活动权。<br /><br />(三)获得本会服务的优先权。<br /><br />(四)查阅本会章程、规章制度、会员名册、理事名册、会议记录、会议决议、会议纪要、财务审计报告等知情权。<br /><br />(五)提议案权、建议权和监督权。<br /><br />(六)入会自愿、退会自由。<br /><br />(七)法律、法规、规章以及本会章程规定的其他权利。<br /><br />第十三条 会员履行下列义务:<br /><br />(一)遵守本会的章程。<br /><br />(二)执行本会的决议。<br /><br />(三)维护本行业的合法权益。<br /><br />(四)完成本会交办的工作。<br /><br />(五)向本会反映情况,提供有关资料。<br /><br />(六)按规定缴纳会费。<br /><br />(七)法律、法规、规章以及本会章程规定的其他权利。<br /><br />第十四条 本会会员不得利用其经营规模、市场份额等优势,限制其他会员在本会中发挥作用。<br /><br />第十五条 会员退会应向本会递交书面函件,并交回会员有关证书。<br /><br />会员如在两年内无故不缴纳会费或不参加本会活动的,经理事会确认,视为自动退会。本会取消其会员资格。<br /><br />第十六条 会员如有严重违反国家法律、法规、规章或本会章程的,经理事会三分之二以上与会者表决通过,取消其会员资格并公示。<br /><br />会员如对理事会取消会员资格决定不服,可提出申诉,由理事会作出答复,必要时提交会员大会审议后答复。<br /><br />第十七条 本会建立完整的会员名册和会员诚信档案,并根据变化情况及时调整。</span | |||
| > | |||
| </div> | |||
| </el-card> | |||
| </el-main> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return {} | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .title{ | |||
| color: #333 !important; | |||
| font-weight: 700; | |||
| } | |||
| .article .title,.article .info{ | |||
| text-align: center; | |||
| margin: 10px; | |||
| } | |||
| .article .info{ | |||
| color: #999; | |||
| } | |||
| .article .content p{ | |||
| text-indent: 2em; | |||
| margin-bottom: 20px; | |||
| line-height: 1.5rem; | |||
| } | |||
| .article .content span{ | |||
| line-height: 1.5rem; | |||
| } | |||
| .location{ | |||
| margin-right: 10px; | |||
| font-size: 12px !important; | |||
| } | |||
| .el-breadcrumb__item{ | |||
| font-size: 12px !important; | |||
| } | |||
| .location i.el-breadcrumb__separator{ | |||
| display: none; | |||
| } | |||
| </style> | |||
| @@ -48,7 +48,7 @@ export default { | |||
| padding: 10px; | |||
| width: 100%; | |||
| } | |||
| .active{ | |||
| .card_menu .menu-item.active{ | |||
| border-left: 2px solid #427FCE; | |||
| background: #eee; | |||
| } | |||
| @@ -1,458 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">账户管理</p> | |||
| <Tabs value="users" @on-click="switchTabs"> | |||
| <TabPane label="人员账户" name="users"> | |||
| <Alert show-icon> | |||
| 账户管理 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| 账户管理负责对每个账户进行禁用、重置密码、开启二次认证、离职等操作,也可以查看账户详情信息:包括设备、权限、状态、属性、所属组织机构等。 | |||
| </template> | |||
| </Alert> | |||
| <div class="complex-search-box"> | |||
| <Select value="name" class="search-box-input" placeholder="" style="width: 100px"> | |||
| <Option value="name" selected>账户名称</Option> | |||
| <Option value="mobile">手机号码</Option> | |||
| <Option value="display">显示名称</Option> | |||
| <Option value="email">邮箱</Option> | |||
| </Select> | |||
| <Input class="search-box-input" suffix="ios-search" placeholder="请输入账户名称进行搜索" style="width: auto" /> | |||
| <Select class="search-box-input" placeholder="" style="width: 100px"> | |||
| <Option value="name">启用</Option> | |||
| <Option value="mobile">禁用</Option> | |||
| <Option value="display">所有</Option> | |||
| </Select> | |||
| <Select class="search-box-input" placeholder="请选择账户过期状态"> | |||
| <Option value="beijing">正常</Option> | |||
| <Option value="shanghai">过期</Option> | |||
| <Option value="shenzhen">所有</Option> | |||
| </Select> | |||
| <Button class="search-box-button">重置</Button> | |||
| <Button class="btn-position" type="primary"><Icon type="ios-search"></Icon>搜索</Button> | |||
| </div> | |||
| <Table :columns="userColumns" :data="userPage.list"> | |||
| <div class="ps-action" slot-scope="{row,index}" slot="action"> | |||
| <Button type="text" size="small">账户详情</Button> | |||
| <Button type="text" size="small">重置密码</Button> | |||
| <Button type="text" size="small">离职</Button> | |||
| </div> | |||
| </Table> | |||
| <Page class="page" :total="userPage.totalRecords" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| <TabPane label="离职人员" name="archivedUsers"> | |||
| <Alert show-icon> | |||
| 离职人员 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| 离职人员不再拥有任何权限,不能使用 IDaaS 的任何功能,仅供管理员查看、删除和返聘(即恢复为正常状态),可以理解其为逻辑上已经删除的账号。 | |||
| </template> | |||
| </Alert> | |||
| <div class="complex-search-box"> | |||
| <div class="search-content"> | |||
| <Select value="name" class="select" placeholder=""> | |||
| <Option value="name">账户名称</Option> | |||
| <Option value="shanghai">手机号码</Option> | |||
| <Option value="shenzhen">显示名称</Option> | |||
| <Option value="shenzhen">邮箱</Option> | |||
| </Select> | |||
| <Input class="search-content-input" search placeholder="Enter something..." /> | |||
| </div> | |||
| <Button type="error">批量物理删除</Button> | |||
| </div> | |||
| <Table :columns="archivedColumns" :data="archivedUserPage.list"> | |||
| <div class="ps-action" slot-scope="{row,index}" slot="action"> | |||
| <Button type="text" size="small" @click="deleteUser(row,index)">物理删除</Button> | |||
| <Button type="text" size="small">返聘</Button> | |||
| </div> | |||
| </Table> | |||
| <Page class="page" :total="archivedUserPage.totalRecords" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| <TabPane label="实名认证" name="name3"> | |||
| <div class="complex-search-box"> | |||
| <div class="search-content"> | |||
| <Select value="name" class="select" placeholder=""> | |||
| <Option value="name">账户名称</Option> | |||
| <Option value="shanghai">手机号码</Option> | |||
| <Option value="shenzhen">显示名称</Option> | |||
| <Option value="shenzhen">邮箱</Option> | |||
| </Select> | |||
| <Input class="search-content-input" search placeholder="Enter something..." /> | |||
| </div> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="userPage.list"> | |||
| <div class="ps-action" slot-scope="{row,index}" slot="action"> | |||
| <Button type="text" size="small">物理删除</Button> | |||
| <Button type="text" size="small">返聘</Button> | |||
| </div> | |||
| </Table> | |||
| <Page class="page" :total="userPage.totalRecords" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| <TabPane label="僵尸账号" name="name4"> | |||
| <div class="search" style="width: 300px;margin-bottom: 15px"> | |||
| <Input search enter-button placeholder="请输入名称"/> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="userPage.totalRecords" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| </Tabs> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {listUsersSumaryRequest, deleteContent, listArchivedUsersRequest, deleteUserRequest} from '@/api/data' | |||
| import store from '@/store' | |||
| import qs from 'qs' | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {}, | |||
| data () { | |||
| return { | |||
| contentType:'', | |||
| pageSizeOpts:[10,20,30,40,50,100], | |||
| loading: true, | |||
| pageNow:1, | |||
| pageSize:50, | |||
| userPage:{}, | |||
| archivedUserPage:{}, | |||
| defaultList: [], | |||
| imgName: '', | |||
| dirname: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| userColumns: [ | |||
| { | |||
| type: 'selection', | |||
| width: 60, | |||
| align: 'center', | |||
| fixed: 'left' | |||
| }, | |||
| { | |||
| title: '账户名称', | |||
| align: 'left', | |||
| key: 'username' | |||
| }, | |||
| { | |||
| title: '显示名称', | |||
| align: 'center', | |||
| key: 'displayName' | |||
| }, | |||
| { | |||
| title: '邮箱', | |||
| align: 'center', | |||
| key: 'email' | |||
| }, | |||
| { | |||
| title: '手机号码', | |||
| align: 'center', | |||
| key: 'phoneNumber', | |||
| }, | |||
| { | |||
| title: '启用状态', | |||
| align: 'center', | |||
| key: 'enabled', | |||
| }, | |||
| { | |||
| title: '过期状态', | |||
| align: 'center', | |||
| key: 'expired', | |||
| }, | |||
| { | |||
| title: '二次认证', | |||
| align: 'center', | |||
| key: 'user2factor', | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'center', | |||
| width: 220, | |||
| slot: 'action', | |||
| } | |||
| ], | |||
| archivedColumns: [ | |||
| { | |||
| type: 'selection', | |||
| width: 60, | |||
| align: 'center', | |||
| fixed: 'left' | |||
| }, | |||
| { | |||
| title: '账户名称', | |||
| align: 'left', | |||
| key: 'username' | |||
| }, | |||
| { | |||
| title: '显示名称', | |||
| align: 'center', | |||
| key: 'displayName' | |||
| }, | |||
| { | |||
| title: '邮箱', | |||
| align: 'center', | |||
| key: 'email' | |||
| }, | |||
| { | |||
| title: '手机号码', | |||
| align: 'center', | |||
| key: 'phoneNumber', | |||
| }, | |||
| { | |||
| title: '启用状态', | |||
| align: 'center', | |||
| key: 'enabled', | |||
| }, | |||
| { | |||
| title: '过期状态', | |||
| align: 'center', | |||
| key: 'expired', | |||
| }, | |||
| { | |||
| title: '二次认证', | |||
| align: 'center', | |||
| key: 'user2factor', | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'right', | |||
| width: 300, | |||
| slot: 'action', | |||
| } | |||
| ], | |||
| articleColumns: [ | |||
| { | |||
| type: 'selection', | |||
| width: 60, | |||
| align: 'center', | |||
| fixed: 'left' | |||
| }, | |||
| { | |||
| title: '账户名称', | |||
| align: 'left', | |||
| key: 'username' | |||
| }, | |||
| { | |||
| title: '显示名称', | |||
| align: 'center', | |||
| key: 'displayName' | |||
| }, | |||
| { | |||
| title: '邮箱', | |||
| align: 'center', | |||
| key: 'email' | |||
| }, | |||
| { | |||
| title: '手机号码', | |||
| align: 'center', | |||
| key: 'phoneNumber', | |||
| }, | |||
| { | |||
| title: '启用状态', | |||
| align: 'center', | |||
| key: 'enabled', | |||
| }, | |||
| { | |||
| title: '过期状态', | |||
| align: 'center', | |||
| key: 'expired', | |||
| }, | |||
| { | |||
| title: '二次认证', | |||
| align: 'center', | |||
| key: 'user2factor', | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'right', | |||
| width: 300, | |||
| slot: 'action', | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| pathName: '' | |||
| }, | |||
| ruleValidate: { | |||
| pathName: [ | |||
| { required: true, message: '目录名称不能为空', trigger: 'blur' }, | |||
| { required: true, type: 'string', min: 1, max: 254, message: '目录字符长度必须在1~254之间', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\/\/).*$/, message: '目录名称不能含有//', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\.\.).*$/, message: '目录名称不能含有..', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!\/).*$/, message: '目录名称不能以 / 打头', trigger: 'blur' } | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| remove (index) { | |||
| this.userPage.list.splice(index, 1) | |||
| }, | |||
| switchTabs(name) { | |||
| switch (name){ | |||
| case 'users':this.listUsers() | |||
| break; | |||
| case 'archivedUsers':this.listArchivedUsers() | |||
| break; | |||
| } | |||
| }, | |||
| deleteUser(row,index){ | |||
| deleteUserRequest(row.id).then((res)=>function (){ | |||
| }).catch(function (error){ | |||
| }); | |||
| }, | |||
| handleSubmit (name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(this.formValidate.pathName) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh () { | |||
| this.listUsers({pageNow:this.pageNow,pageSize:this.pageSize}); | |||
| }, | |||
| listUsers(){ | |||
| var _this = this; | |||
| listUsersSumaryRequest({pageNow:this.pageNow,pageSize:this.pageSize}).then((res) => { | |||
| _this.loading = false | |||
| this.userPage = res | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| listArchivedUsers(){ | |||
| listArchivedUsersRequest({pageNow:this.pageNow,pageSize:this.pageSize}).then((res) => { | |||
| this.archivedUserPage = res | |||
| }).catch(function (error) { | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page){ | |||
| console.log("page:"+page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listUsers(); | |||
| }, | |||
| changePageSize(pageSize){ | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listUsers(); | |||
| } | |||
| }, | |||
| mounted () { | |||
| this.listUsers(); | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .search-box{ | |||
| position:relative; | |||
| width:100%; | |||
| display:-webkit-flex; | |||
| -webkit-box-orient:horizontal; | |||
| -webkit-box-direction:normal; | |||
| -ms-flex-direction:row; | |||
| flex-direction:row; | |||
| -webkit-box-align:center; | |||
| -ms-flex-align:center; | |||
| align-items:center; | |||
| margin-bottom:15px | |||
| } | |||
| .search-box .search-left-box { | |||
| width:50%; | |||
| display:-webkit-box; | |||
| display:-ms-flexbox; | |||
| display:flex | |||
| } | |||
| .search-box .search-left-tools{ | |||
| display:inline-block; | |||
| margin-right:5px | |||
| } | |||
| .search-box .total{ | |||
| position:absolute; | |||
| right:0; | |||
| font-weight:700 | |||
| } | |||
| .search-box .total .icon{ | |||
| font-size:20px; | |||
| font-weight:800; | |||
| color:#199be6 | |||
| } | |||
| .search-box .search-right-tools{ | |||
| text-align:right | |||
| } | |||
| .complex-search-box{ | |||
| position: relative; | |||
| width: 100%; | |||
| display: -webkit-flex; | |||
| -webkit-box-orient: horizontal; | |||
| -webkit-box-direction: normal; | |||
| -ms-flex-direction: row; | |||
| flex-direction: row; | |||
| -webkit-box-align: center; | |||
| -ms-flex-align: center; | |||
| align-items: center; | |||
| margin-bottom: 15px | |||
| } | |||
| .complex-search-box .search-box-input{ | |||
| width: 180px; | |||
| margin-right: 10px | |||
| } | |||
| .complex-search-box .total{ | |||
| position: absolute; | |||
| right: 0; | |||
| font-weight: 700 | |||
| } | |||
| .complex-search-box .total .icon { | |||
| font-size: 20px; | |||
| font-weight: 800; | |||
| color: #199be6 | |||
| } | |||
| .search-content{ | |||
| width: 365px | |||
| } | |||
| .search-content-input{ | |||
| width: 250px; | |||
| margin-right: 10px; | |||
| float: left | |||
| } | |||
| .search-content:after { | |||
| content: ""; | |||
| display: block; | |||
| clear: both | |||
| } | |||
| .select { | |||
| width: 100px; | |||
| margin-right: 5px; | |||
| float: left; | |||
| } | |||
| </style> | |||
| @@ -1,308 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">添加应用</p> | |||
| <Tabs value="name1"> | |||
| <TabPane label="全部" name="name1"> | |||
| <Alert show-icon> | |||
| 添加应用 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc">本页面包含了所有已支持的可添加应用列表,管理员可以选择需要使用的应用进行初始化配置,并开始后续使用。 | |||
| 应用分为两种:一种是支持标准的 JWT、CAS、SAML 等模板的应用,在这里可以通过添加对应的标准应用模板来实现单点登录功能;另一种是定制应用,本类应用已经提供了对接其单点登录或用户同步的接口,由 IDaaS | |||
| 为其提供定制化模板进行对接。 | |||
| </template> | |||
| </Alert> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入应用名称"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table :columns="applicationTemplateColumns" :data="applicationTemplatePage.list"></Table> | |||
| <Page class="page" :total="applicationTemplatePage.totalRecords" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| <TabPane label="标准协议" name="name2"> | |||
| <Alert show-icon> | |||
| 添加应用 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc">本页面包含了所有已支持的可添加应用列表,管理员可以选择需要使用的应用进行初始化配置,并开始后续使用。 | |||
| 应用分为两种:一种是支持标准的 JWT、CAS、SAML 等模板的应用,在这里可以通过添加对应的标准应用模板来实现单点登录功能;另一种是定制应用,本类应用已经提供了对接其单点登录或用户同步的接口,由 IDaaS | |||
| 为其提供定制化模板进行对接。 | |||
| </template> | |||
| </Alert> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入应用名称"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table :columns="applicationTemplateColumns" :data="applicationTemplatePage.list"></Table> | |||
| <Page class="page" :total="applicationTemplatePage.totalRecords" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| <TabPane label="定制模板" name="name3"> | |||
| <Alert show-icon> | |||
| 添加应用 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc">本页面包含了所有已支持的可添加应用列表,管理员可以选择需要使用的应用进行初始化配置,并开始后续使用。 | |||
| 应用分为两种:一种是支持标准的 JWT、CAS、SAML 等模板的应用,在这里可以通过添加对应的标准应用模板来实现单点登录功能;另一种是定制应用,本类应用已经提供了对接其单点登录或用户同步的接口,由 IDaaS | |||
| 为其提供定制化模板进行对接。 | |||
| </template> | |||
| </Alert> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入应用名称"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table :columns="applicationTemplateColumns" :data="applicationTemplatePage.list"></Table> | |||
| <Page class="page" :total="applicationTemplatePage.totalRecords" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| </Tabs> | |||
| <Drawer :title="'添加应用 [ ' + applicationName +' ]'" v-model="addApplicationModel" width="50%" :mask-closable="false"> | |||
| <Alert show-icon>{{ schemas.explain }}</Alert> | |||
| <Form ref="formValidate" :rules="ruleValidate" :model="formValidate" :label-width="130" label-position="left"> | |||
| <template v-for="formData in schemas.formData"> | |||
| <FormItem :prop="formData.key" v-if="formData.type=='file'" :label="formData.name"> | |||
| <Upload multiple type="drag" action="//jsonplaceholder.typicode.com/posts/"> | |||
| <div style="padding: 20px 0"> | |||
| <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon> | |||
| <p>{{ formData.name }}</p> | |||
| </div> | |||
| </Upload> | |||
| <p class="help-block" v-if="formData.description">{{ formData.description }}</p> | |||
| </FormItem> | |||
| <FormItem :prop="formData.key" v-if="addApplicationModel && formData.show && formData.type=='input'" :label="formData.name"> | |||
| <Input v-model="formValidate[formData.key]" :required="formData.rules && formData.rules.required" :placeholder="formData.placeholder" | |||
| :disabled="formData.disabled" :hidden="!formData.show" :readonly="formData.readonly"></Input> | |||
| <p class="help-block" v-if="formData.description">{{ formData.description }}</p> | |||
| </FormItem> | |||
| <FormItem :prop="formData.key" v-if="addApplicationModel && formData.show && formData.type=='textarea'" :label="formData.name"> | |||
| <Input type="textarea" v-model="formValidate[formData.key]" :placeholder="formData.placeholder" | |||
| :disabled="formData.disabled" :hidden="!formData.show" :readonly="formData.readonly"></Input> | |||
| <p class="help-block" v-if="formData.description">{{ formData.description }}</p> | |||
| </FormItem> | |||
| <FormItem :prop="formData.key" :label="formData.name" v-if="formData.type=='checkbox'"> | |||
| <CheckboxGroup v-model="formValidate[formData.key]"> | |||
| <Checkbox v-for="o in formData.options" :label="o.label" border></Checkbox> | |||
| </CheckboxGroup> | |||
| <p class="help-block" v-if="formData.description">{{ formData.description }}</p> | |||
| </FormItem> | |||
| <FormItem :prop="formData.key" v-if="addApplicationModel && formData.show && formData.type=='select'" :label="formData.name"> | |||
| <Select placeholder="请选择" v-model="formValidate[formData.key]"> | |||
| <Option v-for="o in formData.options" value="beijing">{{ o.label }}</Option> | |||
| </Select> | |||
| <p class="help-block">{{ formData.description }}</p> | |||
| </FormItem> | |||
| <FormItem :prop="formData.key" v-if="addApplicationModel && formData.show && formData.type=='number'" :label="formData.name"> | |||
| <Input type="number" v-model="formValidate[formData.key]" :placeholder="formData.placeholder" | |||
| :disabled="formData.disabled" :hidden="!formData.show" :readonly="formData.readonly"></Input> | |||
| <p class="help-block" v-if="formData.description">{{ formData.description }}</p> | |||
| </FormItem> | |||
| </template> | |||
| <FormItem> | |||
| <Button type="primary" @click="handleSubmit('formValidate')">提交</Button> | |||
| <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </Drawer> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {applicationTemplateList, getSchemas,createApp} from '@/api/data' | |||
| export default { | |||
| name: 'articleList', | |||
| props: {}, | |||
| components: {}, | |||
| data() { | |||
| return { | |||
| templateId:'', | |||
| createOrgForm: {}, | |||
| addApplicationModel: false, | |||
| applicationName: '', | |||
| pageSizeOpts: [10, 20, 30, 40, 50, 100], | |||
| loading: true, | |||
| pageNow: 1, | |||
| pageSize: 10, | |||
| applicationTemplatePage: {}, | |||
| schemas: {}, | |||
| applicationTemplateColumns: [ | |||
| { | |||
| title: '应用图标', | |||
| align: 'left', | |||
| key: 'logo' | |||
| }, | |||
| { | |||
| title: '应用名称', | |||
| align: 'left', | |||
| key: 'name' | |||
| }, | |||
| { | |||
| title: '应用ID', | |||
| align: 'left', | |||
| key: 'id' | |||
| }, | |||
| { | |||
| title: '标签', | |||
| align: 'center', | |||
| key: 'createTime' | |||
| }, | |||
| { | |||
| title: '描述', | |||
| align: 'left', | |||
| key: 'description' | |||
| }, | |||
| { | |||
| title: '应用类型 ', | |||
| align: 'center', | |||
| key: 'updateTime' | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'center', | |||
| fixed: 'right', | |||
| render: (h, params) => { | |||
| let item = this.applicationTemplatePage.list[params.index] | |||
| return h('div', [ | |||
| h('Button', { | |||
| props: { | |||
| type: 'text', | |||
| size: 'small' | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| this.templateId = item.id | |||
| getSchemas(item.id).then((schemas) => { | |||
| this.schemas = schemas | |||
| for (var i = 0; i < this.schemas.formData.length; i++) { | |||
| if (this.schemas.formData[i].rules) { | |||
| this.ruleValidate[this.schemas.formData[i].key] = [] | |||
| this.ruleValidate[this.schemas.formData[i].key][0] = this.schemas.formData[i].rules | |||
| } | |||
| } | |||
| this.addApplicationModel = true | |||
| this.applicationName = item.name | |||
| }).catch(function (error) { | |||
| }); | |||
| } | |||
| } | |||
| }, '添加应用') | |||
| ]) | |||
| } | |||
| } | |||
| ], | |||
| formValidate: {}, | |||
| ruleValidate: { | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| remove(index) { | |||
| this.articlePage.list.splice(index, 1) | |||
| }, | |||
| handleSubmit(name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| var requestBody = new Object(); | |||
| requestBody.templateId = this.templateId; | |||
| requestBody.applicationJson = this.formValidate | |||
| console.log(JSON.stringify(requestBody)) | |||
| createApp(requestBody).then((res)=>{ | |||
| }).catch(function (error){ | |||
| }); | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| handleReset (name) { | |||
| this.$refs[name].resetFields(); | |||
| }, | |||
| listApplicationTemplates() { | |||
| var _this = this; | |||
| applicationTemplateList({pageNow: this.pageNow, pageSize: this.pageSize, type: this.contentType}).then((res) => { | |||
| _this.loading = false | |||
| _this.applicationTemplatePage = res | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page) { | |||
| console.log("page:" + page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listArticles(); | |||
| }, | |||
| changePageSize(pageSize) { | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listArticles(); | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.listApplicationTemplates(); | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .search-box { | |||
| position: relative; | |||
| width: 100%; | |||
| display: -webkit-flex; | |||
| -webkit-box-orient: horizontal; | |||
| -webkit-box-direction: normal; | |||
| -ms-flex-direction: row; | |||
| flex-direction: row; | |||
| -webkit-box-align: center; | |||
| -ms-flex-align: center; | |||
| align-items: center; | |||
| margin-bottom: 15px | |||
| } | |||
| .search-box .search-left-box { | |||
| width: 50%; | |||
| display: -webkit-box; | |||
| display: -ms-flexbox; | |||
| display: flex | |||
| } | |||
| .search-box .search-left-tools { | |||
| display: inline-block; | |||
| margin-right: 5px | |||
| } | |||
| .search-box .total { | |||
| position: absolute; | |||
| right: 0; | |||
| font-weight: 700 | |||
| } | |||
| .search-box .total .icon { | |||
| font-size: 20px; | |||
| font-weight: 800; | |||
| color: #199be6 | |||
| } | |||
| .search-box .search-right-tools { | |||
| text-align: right | |||
| } | |||
| </style> | |||
| @@ -1,493 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">应用列表</p> | |||
| <Alert show-icon> | |||
| 应用列表 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc">管理员可以在当前页面管理已经添加的所有应用,应用可以实现单点登录和数据同步能力。 | |||
| 当添加完应用后,应该确认应用处于启用状态,并已经完成了授权。在应用详情中,可以看到应用的详细信息、单点登录地址、子账户配置、同步配置、授权、审计等信息。 | |||
| </template> | |||
| </Alert> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search-left-tools"> | |||
| <Button type="primary" to="/admin/application/add">添加应用</Button> | |||
| </div> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入应用名称"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table stripe :columns="appColumns" :data="applicationPage.list" :span-method="handleSpan"> | |||
| <template slot-scope="{row,index}" slot="opt"> | |||
| <Button type="text">授权</Button> | |||
| <Button type="text" @click="showDetail(row,index)">详情<Icon style="font-size: 18px" :type="row.icon"></Icon></Button> | |||
| </template> | |||
| <template slot-scope="{row,index}" slot="hidden" v-if="row.showBlock"> | |||
| <div class="application-list"> | |||
| <Row> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">应用信息</p> | |||
| <p class="list-des">应用的详细信息</p> | |||
| <div class="operation-group"> | |||
| <Button type="text">查看详情</Button> | |||
| <Button type="text">修改应用</Button> | |||
| <Button type="text">删除应用</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">认证信息</p> | |||
| <p class="list-des">应用的单点登录地址</p> | |||
| <div class="operation-group"> | |||
| <Button type="text">IDaaS发起地址</Button> | |||
| <Button type="text">SP发起地址</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">账户信息 - 同步</p> | |||
| <p class="list-des">SCIM协议设置以及把组织机构、组同步推送至应用</p> | |||
| <div class="operation-group"> | |||
| <Button type="text">同步机构</Button> | |||
| <Button type="text" @click="scimSetting(row.name)">SCIM配置</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">账户信息 - 子账户</p> | |||
| <p class="list-des">平台主账户与应用系统中子账户的关联表</p> | |||
| <div class="operation-group"> | |||
| <Button type="text">查看应用子账户</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| </Row> | |||
| <Row> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">授权信息</p> | |||
| <p class="list-des">应用与人员组织的授权关系</p> | |||
| <div class="operation-group"> | |||
| <Button type="text" to="/admin/authorization/application">授权</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">审计信息</p> | |||
| <p class="list-des">查看应用系统详细的操作日志</p> | |||
| <div class="operation-group"> | |||
| <Button type="text">授权</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">API</p> | |||
| <p class="list-des">是否对应用开放系统API</p> | |||
| <div class="operation-group"> | |||
| <Button type="text">API Key</Button> | |||
| <Button type="text">API Secret</Button> | |||
| <Button type="text">IP 白名单配置</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">管理应用内权限</p> | |||
| <p class="list-des">管理应用内菜单与功能权限</p> | |||
| <div class="operation-group"> | |||
| <Button type="text">绑定权限系统</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| </Row> | |||
| </div> | |||
| </template> | |||
| </Table> | |||
| <Page class="page" :total="applicationPage.totalRecords" show-total show-sizer show-elevator/> | |||
| <Drawer :title='"SCIM 配置 ["+currentRow+"]"' v-model="scimConfigModelValue" width="50%" :mask-closable="false" class="orgDrawer"> | |||
| <Tabs> | |||
| <TabPane label="账户"> | |||
| <Form ref="createUserFormValidate" :rules="ruleValidate" :model="scimConfigForm" :label-width="100" | |||
| label-position="left"> | |||
| <FormItem label="应用名称"> | |||
| <Input v-model="scimConfigForm.ouDirectory" placeholder="/" disabled></Input> | |||
| </FormItem> | |||
| <FormItem label="SCIM同步地址"> | |||
| <Input v-model="scimConfigForm.username" placeholder="serverURL"></Input> | |||
| <p class="help-block">接收同步账户的接口,如: http://xxx.com/api/application/scim/account</p> | |||
| </FormItem> | |||
| <FormItem label="是否开启"> | |||
| <i-switch> | |||
| <span slot="open">开</span> | |||
| <span slot="close">关</span> | |||
| </i-switch> | |||
| <p class="help-block">开启SCIM同步后,手动创建/修改/删除账户时会向已经授权的应用推送账户</p> | |||
| </FormItem> | |||
| <FormItem label="协议类型"> | |||
| <RadioGroup v-model="scimConfigForm.protocol"> | |||
| <Radio label="Basic"></Radio> | |||
| <Radio label="OAuth2"></Radio> | |||
| </RadioGroup> | |||
| <p class="help-block">应用提供的保护接口的协议类型</p> | |||
| </FormItem> | |||
| <div v-if="scimConfigForm.protocol == 'Basic'"> | |||
| <FormItem label="用户名"> | |||
| <Input v-model="scimConfigForm.email" placeholder="请输入用户名"></Input> | |||
| <p class="help-block">BASIC协议提供的管理员用户名</p> | |||
| </FormItem> | |||
| <FormItem label="密码"> | |||
| <Input v-model="scimConfigForm.email" placeholder="请输入密码"></Input> | |||
| <p class="help-block">BASIC协议提供的管理员密码</p> | |||
| </FormItem> | |||
| </div> | |||
| <div v-else> | |||
| <FormItem label="oauth url"> | |||
| <Input v-model="scimConfigForm.email" placeholder="http:// or https://"></Input> | |||
| <p class="help-block">oauth url 必填</p> | |||
| </FormItem> | |||
| <FormItem label="client_id"> | |||
| <Input v-model="scimConfigForm.email" placeholder="client_id"></Input> | |||
| <p class="help-block">client_id 必填</p> | |||
| </FormItem> | |||
| <FormItem label="client_secret"> | |||
| <Input v-model="scimConfigForm.email" placeholder="client_secret"></Input> | |||
| <p class="help-block">client_secret 必填</p> | |||
| </FormItem> | |||
| </div> | |||
| <FormItem> | |||
| <Button type="primary" @click="handleSaveScimConfigSubmit('createUserFormValidate')">提交</Button> | |||
| <Button style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </TabPane> | |||
| <TabPane label="组织机构"> | |||
| <Form ref="createUserFormValidate" :rules="ruleValidate" :model="scimConfigForm" :label-width="100" | |||
| label-position="left"> | |||
| <FormItem label="应用名称"> | |||
| <Input v-model="scimConfigForm.ouDirectory" placeholder="/" disabled></Input> | |||
| </FormItem> | |||
| <FormItem label="SCIM同步地址"> | |||
| <Input v-model="scimConfigForm.username" placeholder="serverURL"></Input> | |||
| <p class="help-block">接收同步账户的接口,如: http://xxx.com/api/application/scim/account</p> | |||
| </FormItem> | |||
| <FormItem label="是否开启"> | |||
| <i-switch> | |||
| <span slot="open">开</span> | |||
| <span slot="close">关</span> | |||
| </i-switch> | |||
| <p class="help-block">开启SCIM同步后,手动创建/修改/删除账户时会向已经授权的应用推送账户</p> | |||
| </FormItem> | |||
| <FormItem label="协议类型"> | |||
| <RadioGroup v-model="scimConfigForm.protocol"> | |||
| <Radio label="Basic"></Radio> | |||
| <Radio label="OAuth2"></Radio> | |||
| </RadioGroup> | |||
| <p class="help-block">应用提供的保护接口的协议类型</p> | |||
| </FormItem> | |||
| <div v-if="scimConfigForm.protocol == 'Basic'"> | |||
| <FormItem label="用户名"> | |||
| <Input v-model="scimConfigForm.email" placeholder="请输入用户名"></Input> | |||
| <p class="help-block">BASIC协议提供的管理员用户名</p> | |||
| </FormItem> | |||
| <FormItem label="密码"> | |||
| <Input v-model="scimConfigForm.email" placeholder="请输入密码"></Input> | |||
| <p class="help-block">BASIC协议提供的管理员密码</p> | |||
| </FormItem> | |||
| </div> | |||
| <div v-else> | |||
| <FormItem label="oauth url"> | |||
| <Input v-model="scimConfigForm.email" placeholder="http:// or https://"></Input> | |||
| <p class="help-block">oauth url 必填</p> | |||
| </FormItem> | |||
| <FormItem label="client_id"> | |||
| <Input v-model="scimConfigForm.email" placeholder="client_id"></Input> | |||
| <p class="help-block">client_id 必填</p> | |||
| </FormItem> | |||
| <FormItem label="client_secret"> | |||
| <Input v-model="scimConfigForm.email" placeholder="client_secret"></Input> | |||
| <p class="help-block">client_secret 必填</p> | |||
| </FormItem> | |||
| </div> | |||
| <FormItem> | |||
| <Button type="primary" @click="handleSaveScimConfigSubmit('createUserFormValidate')">提交</Button> | |||
| <Button style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </TabPane> | |||
| </Tabs> | |||
| </Drawer> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {applicationList, deleteContent} from '@/api/data' | |||
| export default { | |||
| name: 'articleList', | |||
| props: {}, | |||
| components: {}, | |||
| data() { | |||
| return { | |||
| currentRow:{}, | |||
| scimConfigModelValue:false, | |||
| scimConfigForm:{protocol:'Basic'}, | |||
| icon:'md-arrow-dropdown', | |||
| contentType: '', | |||
| pageSizeOpts: [10, 20, 30, 40, 50, 100], | |||
| loading: true, | |||
| pageNow: 1, | |||
| pageSize: 50, | |||
| applicationPage: {}, | |||
| defaultList: [], | |||
| imgName: '', | |||
| dirname: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| appColumns: [ | |||
| { | |||
| title: ' ', | |||
| align: 'left', | |||
| width:1, | |||
| slot: 'hidden' | |||
| }, | |||
| { | |||
| title: '应用图标', | |||
| align: 'left', | |||
| key: 'logo' | |||
| }, | |||
| { | |||
| title: '应用名称', | |||
| align: 'left', | |||
| key: 'name' | |||
| }, | |||
| { | |||
| title: '应用ID', | |||
| align: 'left', | |||
| key: 'id' | |||
| }, | |||
| { | |||
| title: '应用状态', | |||
| align: 'left', | |||
| key: 'status' | |||
| }, | |||
| { | |||
| title: '二次认证状态', | |||
| align: 'center', | |||
| key: 'mfaStatus' | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'center', | |||
| slot:'opt' | |||
| /*, | |||
| render: (h, params) => { | |||
| let item = this.applicationPage.list[params.index] | |||
| item.flag = false; | |||
| console.log(JSON.stringify(item)); | |||
| return h('div', [ | |||
| h('Button', { | |||
| props: { | |||
| type: 'text', | |||
| size: 'small', | |||
| to: '/admin/article/edit/' + item.id | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| } | |||
| } | |||
| }, '授权'), | |||
| h('Button', { | |||
| props: { | |||
| type: 'text', | |||
| size: 'small', | |||
| icon: item.flag? 'md-arrow-dropup':'md-arrow-dropdown' | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| console.log(JSON.stringify(item)); | |||
| // = 'md-arrow-dropup' | |||
| item.flag = !item.flag | |||
| } | |||
| } | |||
| }, '详情') | |||
| ]) | |||
| }*/ | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| pathName: '' | |||
| }, | |||
| ruleValidate: { | |||
| pathName: [ | |||
| {required: true, message: '目录名称不能为空', trigger: 'blur'}, | |||
| {required: true, type: 'string', min: 1, max: 254, message: '目录字符长度必须在1~254之间', trigger: 'blur'}, | |||
| {required: true, pattern: /^(?!.*\/\/).*$/, message: '目录名称不能含有//', trigger: 'blur'}, | |||
| {required: true, pattern: /^(?!.*\.\.).*$/, message: '目录名称不能含有..', trigger: 'blur'}, | |||
| {required: true, pattern: /^(?!\/).*$/, message: '目录名称不能以 / 打头', trigger: 'blur'} | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| scimSetting(row,index){ | |||
| alert(row) | |||
| this.scimConfigModelValue = true | |||
| this.currentRow = row | |||
| }, | |||
| showDetail(row,index){ | |||
| if(index<this.applicationPage.list.length-1 && this.applicationPage.list[index+1].showBlock){ | |||
| this.remove(index+1) | |||
| row.icon = 'md-arrow-dropdown' | |||
| this.applicationPage.list.splice(index,1,row) | |||
| }else { | |||
| let temp = new Object(); | |||
| temp.showBlock = true; | |||
| row.icon = 'md-arrow-dropup' | |||
| this.applicationPage.list.splice(index,1,row,temp) | |||
| } | |||
| /*let item = this.applicationPage.list[index+1] | |||
| if(item.showBlock){ | |||
| this.applicationPage.list.splice(index+1, 1) | |||
| }else { | |||
| // var temp = new Object(); | |||
| row.showBlock = true; | |||
| this.applicationPage.list.splice(index+1,0,row) | |||
| }*/ | |||
| }, | |||
| remove(index) { | |||
| this.applicationPage.list.splice(index, 1) | |||
| }, | |||
| handleSubmit(name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(this.formValidate.pathName) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| listApplications() { | |||
| var _this = this; | |||
| applicationList({pageNow: this.pageNow, pageSize: this.pageSize, type: this.contentType}).then((res) => { | |||
| _this.loading = false | |||
| this.applicationPage = res | |||
| this.applicationPage.list.forEach(function (item,index) { | |||
| _this.applicationPage.list[index].icon='md-arrow-dropdown' | |||
| }) | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page) { | |||
| console.log("page:" + page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listApplications(); | |||
| }, | |||
| changePageSize(pageSize) { | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listApplications(); | |||
| }, | |||
| handleSpan ({ row, column, rowIndex, columnIndex }) { | |||
| if(row.showBlock){ | |||
| return [1, 7]; | |||
| }else { | |||
| // return [1,1] | |||
| } | |||
| }, | |||
| handleSaveScimConfigSubmit(name){ | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.listApplications(); | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .search-box { | |||
| position: relative; | |||
| width: 100%; | |||
| display: -webkit-flex; | |||
| -webkit-box-orient: horizontal; | |||
| -webkit-box-direction: normal; | |||
| -ms-flex-direction: row; | |||
| flex-direction: row; | |||
| -webkit-box-align: center; | |||
| -ms-flex-align: center; | |||
| align-items: center; | |||
| margin-bottom: 15px | |||
| } | |||
| .search-box .search-left-box { | |||
| width: 50%; | |||
| display: -webkit-box; | |||
| display: -ms-flexbox; | |||
| display: flex | |||
| } | |||
| .search-box .search-left-tools { | |||
| display: inline-block; | |||
| margin-right: 5px | |||
| } | |||
| .search-box .total { | |||
| position: absolute; | |||
| right: 0; | |||
| font-weight: 700 | |||
| } | |||
| .search-box .total .icon { | |||
| font-size: 20px; | |||
| font-weight: 800; | |||
| color: #199be6 | |||
| } | |||
| .search-box .search-right-tools { | |||
| text-align: right | |||
| } | |||
| .list-des{ | |||
| color: #909399; | |||
| min-height: 40px; | |||
| font-size: 12px; | |||
| } | |||
| .application-list{ | |||
| padding: 10px 0; | |||
| } | |||
| .application-list .ivu-card{ | |||
| margin: 10px; | |||
| } | |||
| .operation-group{ | |||
| margin-left: -15px; | |||
| } | |||
| </style> | |||
| @@ -1,684 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">应用列表</p> | |||
| <Alert show-icon> | |||
| 应用列表 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc">管理员可以在当前页面管理已经添加的所有应用,应用可以实现单点登录和数据同步能力。 | |||
| 当添加完应用后,应该确认应用处于启用状态,并已经完成了授权。在应用详情中,可以看到应用的详细信息、单点登录地址、子账户配置、同步配置、授权、审计等信息。 | |||
| </template> | |||
| </Alert> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search-left-tools"> | |||
| <Button type="primary" to="/admin/application/add">添加应用</Button> | |||
| </div> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入应用名称"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table stripe :columns="appColumns" :data="applicationPage.list"> | |||
| <template slot-scope="{row,index}" slot="opt"> | |||
| <Button type="text">授权</Button> | |||
| <Button type="text" @click="showDetail(row,index)">详情 | |||
| <Icon style="font-size: 18px" :type="row.icon"></Icon> | |||
| </Button> | |||
| </template> | |||
| </Table> | |||
| <Page class="page" :total="applicationPage.totalRecords" show-total show-sizer show-elevator/> | |||
| <Drawer :title='"SCIM 配置 ["+currentRow.name+"]"' v-model="scimConfigModelValue" width="50%" :mask-closable="false"> | |||
| <Tabs v-model="scimConfigForm.type" :animated=false> | |||
| <TabPane label="账户" name="user"> | |||
| <Form ref="createScimFormValidate" :rules="ruleValidate" :model="scimConfigForm" :label-width="100" | |||
| label-position="left"> | |||
| <FormItem label="应用名称"> | |||
| <Input :placeholder="currentRow.name" disabled></Input> | |||
| </FormItem> | |||
| <FormItem label="SCIM同步地址"> | |||
| <Input v-model="scimConfigForm.scimUrl" placeholder="serverURL"></Input> | |||
| <p class="help-block">接收同步账户的接口,如: http://xxx.com/api/application/scim/account</p> | |||
| </FormItem> | |||
| <FormItem label="是否开启"> | |||
| <i-switch v-model="scimConfigForm.enabled" :true-value=true :false-value=false> | |||
| <span slot="open">开</span> | |||
| <span slot="close">关</span> | |||
| </i-switch> | |||
| <p class="help-block">开启SCIM同步后,手动创建/修改/删除账户时会向已经授权的应用推送账户</p> | |||
| </FormItem> | |||
| <FormItem label="协议类型"> | |||
| <RadioGroup v-model="scimConfigForm.protocol"> | |||
| <Radio label="Basic" value="Basic"></Radio> | |||
| <Radio label="OAuth2" value="OAuth2"></Radio> | |||
| </RadioGroup> | |||
| <p class="help-block">应用提供的保护接口的协议类型</p> | |||
| </FormItem> | |||
| <div v-if="scimConfigForm.protocol == 'Basic'"> | |||
| <FormItem label="用户名"> | |||
| <Input v-model="scimConfigForm.attributes.username" placeholder="请输入用户名"></Input> | |||
| <p class="help-block">BASIC协议提供的管理员用户名</p> | |||
| </FormItem> | |||
| <FormItem label="密码"> | |||
| <Input v-model="scimConfigForm.attributes.password" placeholder="请输入密码"></Input> | |||
| <p class="help-block">BASIC协议提供的管理员密码</p> | |||
| </FormItem> | |||
| </div> | |||
| <div v-else> | |||
| <FormItem label="oauth url"> | |||
| <Input v-model="scimConfigForm.attributes.oauthUrl" placeholder="http:// or https://"></Input> | |||
| <p class="help-block">oauth url 必填</p> | |||
| </FormItem> | |||
| <FormItem label="client_id"> | |||
| <Input v-model="scimConfigForm.attributes.clientId" placeholder="client_id"></Input> | |||
| <p class="help-block">client_id 必填</p> | |||
| </FormItem> | |||
| <FormItem label="client_secret"> | |||
| <Input v-model="scimConfigForm.attributes.clientSecret" placeholder="client_secret"></Input> | |||
| <p class="help-block">client_secret 必填</p> | |||
| </FormItem> | |||
| </div> | |||
| <FormItem> | |||
| <Button type="primary" @click="handleSaveScimConfigSubmit('createScimFormValidate')">提交</Button> | |||
| <Button style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </TabPane> | |||
| <TabPane label="组织机构" name="ou"> | |||
| <Form ref="createScimFormValidate" :rules="ruleValidate" :model="scimConfigForm" :label-width="100" | |||
| label-position="left"> | |||
| <FormItem label="应用名称"> | |||
| <Input :placeholder="currentRow.name" disabled></Input> | |||
| </FormItem> | |||
| <FormItem label="SCIM同步地址"> | |||
| <Input v-model="scimConfigForm.scimUrl" placeholder="serverURL"></Input> | |||
| <p class="help-block">接收同步账户的接口,如: http://xxx.com/api/application/scim/account</p> | |||
| </FormItem> | |||
| <FormItem label="是否开启"> | |||
| <i-switch v-model="scimConfigForm.enabled" :true-value=true :false-value=false> | |||
| <span slot="open">开</span> | |||
| <span slot="close">关</span> | |||
| </i-switch> | |||
| <p class="help-block">开启SCIM同步后,手动创建/修改/删除账户时会向已经授权的应用推送账户</p> | |||
| </FormItem> | |||
| <FormItem label="协议类型"> | |||
| <RadioGroup v-model="scimConfigForm.protocol"> | |||
| <Radio label="Basic" value="Basic"></Radio> | |||
| <Radio label="OAuth2" value="OAuth2"></Radio> | |||
| </RadioGroup> | |||
| <p class="help-block">应用提供的保护接口的协议类型</p> | |||
| </FormItem> | |||
| <div v-if="scimConfigForm.protocol == 'Basic'"> | |||
| <FormItem label="用户名"> | |||
| <Input v-model="scimConfigForm.attributes.username" placeholder="请输入用户名"></Input> | |||
| <p class="help-block">BASIC协议提供的管理员用户名</p> | |||
| </FormItem> | |||
| <FormItem label="密码"> | |||
| <Input v-model="scimConfigForm.attributes.password" placeholder="请输入密码"></Input> | |||
| <p class="help-block">BASIC协议提供的管理员密码</p> | |||
| </FormItem> | |||
| </div> | |||
| <div v-else> | |||
| <FormItem label="oauth url"> | |||
| <Input v-model="scimConfigForm.attributes.oauthUrl" placeholder="http:// or https://"></Input> | |||
| <p class="help-block">oauth url 必填</p> | |||
| </FormItem> | |||
| <FormItem label="client_id"> | |||
| <Input v-model="scimConfigForm.attributes.clientId" placeholder="client_id"></Input> | |||
| <p class="help-block">client_id 必填</p> | |||
| </FormItem> | |||
| <FormItem label="client_secret"> | |||
| <Input v-model="scimConfigForm.attributes.clientSecret" placeholder="client_secret"></Input> | |||
| <p class="help-block">client_secret 必填</p> | |||
| </FormItem> | |||
| </div> | |||
| <FormItem> | |||
| <Button type="primary" @click="handleSaveScimConfigSubmit('createScimFormValidate')">提交</Button> | |||
| <Button style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </TabPane> | |||
| </Tabs> | |||
| </Drawer> | |||
| <Drawer :title='"绑定权限系统 ["+currentRow.name+"]"' v-model="bindPsModelValue" width="50%" :mask-closable="false"> | |||
| <Form :model="bindPsForm" :label-width="100" label-position="left"> | |||
| <FormItem label="选择权限系统"> | |||
| <Select v-model="bindPsForm.psId" placeholder="请选择"> | |||
| <Option :value="item.id" v-for="item in psList">{{ item.name }}</Option> | |||
| </Select> | |||
| </FormItem> | |||
| <FormItem> | |||
| <Button type="primary" @click="bindPsSubmit">提交</Button> | |||
| <Button style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </Drawer> | |||
| <Drawer :title='"修改应用 ["+currentRow.name+"]"' v-model="editApplicationModel" width="50%" :mask-closable="false"> | |||
| <Form ref="editApplicationFormValidate" :rules="editApplicationRuleValidate" :model="editApplicationFormValidate" :label-width="130" label-position="left"> | |||
| <template v-for="formData in schemas.formData"> | |||
| <FormItem :prop="formData.key" v-if="formData.type=='file'" :label="formData.name"> | |||
| <Upload multiple type="drag" action="//jsonplaceholder.typicode.com/posts/"> | |||
| <div style="padding: 20px 0"> | |||
| <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon> | |||
| <p>{{ formData.name }}</p> | |||
| </div> | |||
| </Upload> | |||
| <p class="help-block" v-if="formData.description">{{ formData.description }}</p> | |||
| </FormItem> | |||
| <FormItem :prop="formData.key" v-if="formData.show && formData.type=='input'" :label="formData.name"> | |||
| <Input v-model="editApplicationFormValidate[formData.key]" :required="formData.rules && formData.rules.required" :placeholder="formData.placeholder" | |||
| :disabled="formData.disabled" :hidden="!formData.show" :readonly="formData.readonly"></Input> | |||
| <p class="help-block" v-if="formData.description">{{ formData.description }}</p> | |||
| </FormItem> | |||
| <FormItem :prop="formData.key" v-if="formData.show && formData.type=='textarea'" :label="formData.name"> | |||
| <Input type="textarea" v-model="editApplicationFormValidate[formData.key]" :placeholder="formData.placeholder" | |||
| :disabled="formData.disabled" :hidden="!formData.show" :readonly="formData.readonly"></Input> | |||
| <p class="help-block" v-if="formData.description">{{ formData.description }}</p> | |||
| </FormItem> | |||
| <FormItem :prop="formData.key" :label="formData.name" v-if="formData.type=='checkbox'"> | |||
| <CheckboxGroup v-model="editApplicationFormValidate[formData.key]"> | |||
| <Checkbox v-for="o in formData.options" :label="o.label" border></Checkbox> | |||
| </CheckboxGroup> | |||
| <p class="help-block" v-if="formData.description">{{ formData.description }}</p> | |||
| </FormItem> | |||
| <FormItem :prop="formData.key" v-if="formData.show && formData.type=='select'" :label="formData.name"> | |||
| <Select placeholder="请选择" v-model="editApplicationFormValidate[formData.key]"> | |||
| <Option v-for="o in formData.options" :value="o.value">{{ o.label }}</Option> | |||
| </Select> | |||
| <p class="help-block">{{ formData.description }}</p> | |||
| </FormItem> | |||
| <FormItem :prop="formData.key" v-if="formData.show && formData.type=='number'" :label="formData.name"> | |||
| <Input type="number" v-model="editApplicationFormValidate[formData.key]" :placeholder="formData.placeholder" | |||
| :disabled="formData.disabled" :hidden="!formData.show" :readonly="formData.readonly"></Input> | |||
| <p class="help-block" v-if="formData.description">{{ formData.description }}</p> | |||
| </FormItem> | |||
| </template> | |||
| <FormItem> | |||
| <Button type="primary" @click="handleEditApplicationSubmit('editApplicationFormValidate')">提交</Button> | |||
| <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </Drawer> | |||
| <Drawer title='添加同步组织机构' v-model="addOuSyncModelValue" width="50%" :mask-closable="false"> | |||
| <div class="app-name title-color">应用名称:<span class="name">JWT</span></div> | |||
| <Alert style="margin: 10px auto" > | |||
| 说明:本平台自身作为客户端,向第三方业务系统同步组织机构。将已授权的默认组对应的OU的树型架构推送给SP业务系统。 | |||
| </Alert> | |||
| <Table stripe :columns="orgColumns" :data="ouList"></Table> | |||
| <div> | |||
| <div class="check-box"><span class="setting-title title-color">同步子级</span><br> | |||
| <Checkbox v-model="ouSyncForm.syncChildren">是否同步子级组织机构?</Checkbox> | |||
| </div> | |||
| <div class="config-info"> | |||
| <p class="setting-title title-color">SP配置信息</p> | |||
| <Row class="grid-row"> | |||
| <Col class="grid-label" span="6">SP SCIM同步地址</Col> | |||
| <Col class="grid-content" span="18"> | |||
| {{ouScimConfig.scimUrl}} | |||
| </Col> | |||
| </Row> | |||
| <template v-if="ouScimConfig.protocol=='Basic'"> | |||
| <Row class="grid-row"> | |||
| <Col class="grid-label" span="6">用户名</Col> | |||
| <Col class="grid-content" span="18"> | |||
| {{ ouScimConfig.attributes.username }} | |||
| </Col> | |||
| </Row> | |||
| <Row class="grid-row"> | |||
| <Col class="grid-label" span="6">密码</Col> | |||
| <Col class="grid-content" span="18"> | |||
| ******* | |||
| </Col> | |||
| </Row> | |||
| <Row class="grid-row"> | |||
| <Col class="grid-label" span="6">认证方式</Col> | |||
| <Col class="grid-content" span="18"> | |||
| {{ouScimConfig.protocol}} | |||
| </Col> | |||
| </Row> | |||
| </template> | |||
| <template v-if="ouScimConfig.protocol=='OAuth2'"> | |||
| <Row class="grid-row"> | |||
| <Col class="grid-label" span="6">oauth url</Col> | |||
| <Col class="grid-content" span="18"> | |||
| {{ ouScimConfig.attributes.oauthUrl }} | |||
| </Col> | |||
| </Row> | |||
| <Row class="grid-row"> | |||
| <Col class="grid-label" span="6">Client ID</Col> | |||
| <Col class="grid-content" span="18"> | |||
| {{ ouScimConfig.attributes.clientId }} | |||
| </Col> | |||
| </Row> | |||
| <Row class="grid-row"> | |||
| <Col class="grid-label" span="6">client secret</Col> | |||
| <Col class="grid-content" span="18"> | |||
| ******* | |||
| </Col> | |||
| </Row> | |||
| <Row class="grid-row"> | |||
| <Col class="grid-label" span="6">认证方式</Col> | |||
| <Col class="grid-content" span="18"> | |||
| {{ouScimConfig.protocol}} | |||
| </Col> | |||
| </Row> | |||
| </template> | |||
| </div> | |||
| <div class="sync-setting"><p class="setting-title title-color">推送方式</p><p >API推送</p></div> | |||
| <div class="btn-box"> | |||
| <Button class="btn" type="primary">同步</Button> | |||
| <Button class="btn" type="primary">查看同步记录</Button> | |||
| <Button class="btn">取消</Button> | |||
| </div> | |||
| </div> | |||
| </Drawer> | |||
| <Drawer :title='"应用详情 ["+currentRow.name+"]"' v-model="showDetailModel" width="50%" :mask-closable="false"> | |||
| <Form :label-width="120" label-position="left"> | |||
| <FormItem label="图标"></FormItem> | |||
| <FormItem label="应用ID">{{this.currentRow.id}}</FormItem> | |||
| <FormItem label="应用名称">{{this.currentRow.name}}</FormItem> | |||
| <!-- <FormItem label="应用Uuid">{{this.currentRow.id}}</FormItem>--> | |||
| <Divider plain></Divider> | |||
| <FormItem label="应用状态"></FormItem> | |||
| <FormItem label="是否显示"></FormItem> | |||
| <FormItem label="是否脱敏参数"></FormItem> | |||
| <FormItem label="创建人"></FormItem> | |||
| <FormItem label="创建时间">{{this.currentRow.createTime}}</FormItem> | |||
| </Form> | |||
| </Drawer> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import expandRow from './application-table-expand.vue'; | |||
| import { | |||
| applicationBindPsRequest, | |||
| applicationList, | |||
| deleteApplicationRequest, | |||
| deleteContent, getApplicationAttributes, getSchemas, listApplicationGrantedOusRequest, | |||
| listPsSimpleInfo, saveScimConfigRequest, scimConfigRequest, updateApplicationRequest | |||
| } from '@/api/data' | |||
| export default { | |||
| name: 'articleList', | |||
| props: {}, | |||
| components: {expandRow}, | |||
| data() { | |||
| return { | |||
| editApplicationFormValidate:{}, | |||
| editApplicationRuleValidate:{ | |||
| }, | |||
| schemas:{}, | |||
| ouSyncForm: { | |||
| syncChildren: false | |||
| }, | |||
| ouScimConfig:{}, | |||
| bindPsForm: { | |||
| psId: '' | |||
| }, | |||
| currentRow: {}, | |||
| showDetailModel:false, | |||
| scimConfigModelValue: false, | |||
| editApplicationModel: false, | |||
| addOuSyncModelValue: false, | |||
| bindPsModelValue: false, | |||
| scimConfigForm: { | |||
| protocol: 'Basic', | |||
| type: 'user', | |||
| attributes: {} | |||
| }, | |||
| icon: 'md-arrow-dropdown', | |||
| contentType: '', | |||
| pageSizeOpts: [10, 20, 30, 40, 50, 100], | |||
| loading: true, | |||
| pageNow: 1, | |||
| pageSize: 50, | |||
| applicationPage: {}, | |||
| ouList: [], | |||
| psList: [], | |||
| dirname: '', | |||
| selectedItems: [], | |||
| appColumns: [ | |||
| { | |||
| title: '应用图标', | |||
| align: 'left', | |||
| key: 'logo' | |||
| }, | |||
| { | |||
| title: '应用名称', | |||
| align: 'left', | |||
| key: 'name' | |||
| }, | |||
| { | |||
| title: '应用ID', | |||
| align: 'left', | |||
| key: 'id' | |||
| }, | |||
| { | |||
| title: '应用状态', | |||
| align: 'left', | |||
| key: 'status' | |||
| }, | |||
| { | |||
| title: '二次认证状态', | |||
| align: 'center', | |||
| key: 'mfaStatus' | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'center', | |||
| slot: 'opt', | |||
| width: 200 | |||
| }, | |||
| { | |||
| type: 'expand', | |||
| width: 10, | |||
| render: (h, params) => { | |||
| console.log(JSON.stringify(params)) | |||
| return h(expandRow, { | |||
| props: { | |||
| row: params.row, | |||
| index: params.index | |||
| }, | |||
| on: { | |||
| clicked: value => { | |||
| this.$nextTick(() => { | |||
| this.onClickExpand(value[0], value[1], value[2]) | |||
| }) | |||
| } | |||
| } | |||
| }) | |||
| } | |||
| } | |||
| ], | |||
| orgColumns: [ | |||
| { | |||
| title: '组织机构名称', | |||
| align: 'left', | |||
| key: 'name' | |||
| }, | |||
| { | |||
| title: '路径', | |||
| align: 'left', | |||
| key: 'parentDirectory' | |||
| } | |||
| ], | |||
| formValidate: { | |||
| scimUrl: '' | |||
| }, | |||
| ruleValidate: { | |||
| scimUrl: [ | |||
| {required: true, message: 'URL不能为空', trigger: 'blur'} | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| onClickExpand(row, index, type) { | |||
| this.currentRow = row; | |||
| switch (type) { | |||
| case 'scimSetting': | |||
| scimConfigRequest({applicationId: row.id, type: this.scimConfigForm.type}).then((res) => { | |||
| this.scimConfigModelValue = true; | |||
| if (res) { | |||
| this.scimConfigForm = res | |||
| } else { | |||
| this.scimConfigForm = this.$options.data().scimConfigForm | |||
| } | |||
| }) | |||
| break; | |||
| case 'bindPsSetting': | |||
| listPsSimpleInfo().then((res) => { | |||
| this.psList = res | |||
| this.bindPsModelValue = true; | |||
| this.bindPsForm.psId = this.currentRow.psId | |||
| }); | |||
| break; | |||
| case 'deleteApplication': | |||
| deleteApplicationRequest(row.id).then((res) => { | |||
| this.applicationPage.list.splice(index, 1) | |||
| }); | |||
| break; | |||
| case 'editApplication': | |||
| getApplicationAttributes(this.currentRow.id).then((attr)=>{ | |||
| this.editApplicationFormValidate = attr | |||
| getSchemas(this.currentRow.templateId).then((res)=>{ | |||
| this.editApplicationModel = true | |||
| this.schemas = res; | |||
| }) | |||
| }) | |||
| break; | |||
| case 'syncOu': | |||
| listApplicationGrantedOusRequest(this.currentRow.id).then((res)=>{ | |||
| this.ouList = res | |||
| scimConfigRequest({applicationId: row.id, type: 'ou'}).then((res) => { | |||
| this.ouScimConfig = res | |||
| this.addOuSyncModelValue = true | |||
| }) | |||
| }) | |||
| break; | |||
| case 'showApplication': | |||
| this.showDetailModel = true; | |||
| break; | |||
| } | |||
| }, | |||
| showDetail(row, index) { | |||
| this.currentRow = row | |||
| row._expanded = !row._expanded | |||
| row.icon = row._expanded ? 'md-arrow-dropup' : 'md-arrow-dropdown' | |||
| this.applicationPage.list.splice(index, 1, row) | |||
| }, | |||
| bindPsSubmit() { | |||
| if (this.bindPsForm.psId) { | |||
| applicationBindPsRequest({ | |||
| applicationId: this.currentRow.id, | |||
| psId: this.bindPsForm.psId | |||
| }).then((res) => { | |||
| }) | |||
| } | |||
| }, | |||
| remove(index) { | |||
| this.applicationPage.list.splice(index, 1) | |||
| }, | |||
| handleEditApplicationSubmit(name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| // console.log(JSON.stringify(this.editApplicationFormValidate)) | |||
| var requestBody = new Object(); | |||
| requestBody.applicationId = this.currentRow.id; | |||
| requestBody.applicationJson = this.editApplicationFormValidate | |||
| updateApplicationRequest(requestBody).then((res)=>{ | |||
| }) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| listApplications() { | |||
| var _this = this; | |||
| applicationList({pageNow: this.pageNow, pageSize: this.pageSize, type: this.contentType}).then((res) => { | |||
| _this.loading = false | |||
| this.applicationPage = res | |||
| this.applicationPage.list.forEach(function (item, index) { | |||
| _this.applicationPage.list[index].icon = 'md-arrow-dropdown' | |||
| }) | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page) { | |||
| console.log("page:" + page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listApplications(); | |||
| }, | |||
| changePageSize(pageSize) { | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listApplications(); | |||
| }, | |||
| handleSaveScimConfigSubmit(name) { | |||
| this.scimConfigForm.applicationId = this.currentRow.id | |||
| console.log(JSON.stringify(this.scimConfigForm)) | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| saveScimConfigRequest(this.scimConfigForm).then((res) => { | |||
| }) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| handleReset (name) { | |||
| this.$refs[name].resetFields(); | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.listApplications(); | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .search-box { | |||
| position: relative; | |||
| width: 100%; | |||
| display: -webkit-flex; | |||
| -webkit-box-orient: horizontal; | |||
| -webkit-box-direction: normal; | |||
| -ms-flex-direction: row; | |||
| flex-direction: row; | |||
| -webkit-box-align: center; | |||
| -ms-flex-align: center; | |||
| align-items: center; | |||
| margin-bottom: 15px | |||
| } | |||
| .search-box .search-left-box { | |||
| width: 50%; | |||
| display: -webkit-box; | |||
| display: -ms-flexbox; | |||
| display: flex | |||
| } | |||
| .search-box .search-left-tools { | |||
| display: inline-block; | |||
| margin-right: 5px | |||
| } | |||
| .search-box .total { | |||
| position: absolute; | |||
| right: 0; | |||
| font-weight: 700 | |||
| } | |||
| .search-box .total .icon { | |||
| font-size: 20px; | |||
| font-weight: 800; | |||
| color: #199be6 | |||
| } | |||
| .search-box .search-right-tools { | |||
| text-align: right | |||
| } | |||
| .list-des { | |||
| color: #909399; | |||
| min-height: 40px; | |||
| font-size: 12px; | |||
| } | |||
| .application-list { | |||
| padding: 10px 0; | |||
| } | |||
| .application-list .ivu-card { | |||
| margin: 10px; | |||
| } | |||
| .operation-group { | |||
| margin-left: -15px; | |||
| } | |||
| .app-name{ | |||
| font-size:14px | |||
| } | |||
| .app-name .name{ | |||
| color:#0070cc | |||
| } | |||
| .title-color { | |||
| color:#464c5b | |||
| } | |||
| .table { | |||
| margin-top:10px | |||
| } | |||
| .check-box { | |||
| line-height:30px | |||
| } | |||
| .check-box .check-title { | |||
| font-size:14px | |||
| } | |||
| .config-info { | |||
| margin-top:20px | |||
| } | |||
| .config-info .config-title { | |||
| font-size:14px; | |||
| font-weight:700; | |||
| padding-bottom:10px | |||
| } | |||
| .config-info .config-item { | |||
| border:1px solid #e3e8ee; | |||
| border-top:none | |||
| } | |||
| .config-info .config-item>span { | |||
| display:inline-block; | |||
| padding:10px | |||
| } | |||
| .config-info .config-item>span:first-child { | |||
| width:130px | |||
| } | |||
| .config-info .config-item>span:last-child { | |||
| max-width:380px; | |||
| border-left:1px solid #e3e8ee | |||
| } | |||
| .config-info .first-item { | |||
| border-top:1px solid #e3e8ee | |||
| } | |||
| .setting-title { | |||
| font-size:14px; | |||
| padding-bottom:10px | |||
| } | |||
| .sync-setting { | |||
| margin-top:20px | |||
| } | |||
| .sync-setting .setting-type { | |||
| font-size:14px | |||
| } | |||
| .btn-box { | |||
| margin-top:20px; | |||
| padding-bottom:30px | |||
| } | |||
| .btn-box .btn { | |||
| margin-right:10px | |||
| } | |||
| .grid-row .grid-label { | |||
| font-weight:700 | |||
| } | |||
| .grid-row .grid-content { | |||
| min-height:30px | |||
| } | |||
| </style> | |||
| @@ -1,111 +0,0 @@ | |||
| <template slot="hidden"> | |||
| <div class="application-list"> | |||
| <Row> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">应用信息</p> | |||
| <p class="list-des">应用的详细信息</p> | |||
| <div class="operation-group"> | |||
| <Button type="text" @click="click('showApplication')">查看详情</Button> | |||
| <Button type="text" @click="click('editApplication')">修改应用</Button> | |||
| <Button type="text" style="color:darkred !important;" @click="click('deleteApplication')">删除应用</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">认证信息</p> | |||
| <p class="list-des">应用的单点登录地址</p> | |||
| <div class="operation-group"> | |||
| <Button type="text">IDaaS发起地址</Button> | |||
| <Button type="text">SP发起地址</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">账户信息 - 同步</p> | |||
| <p class="list-des">SCIM协议设置以及把组织机构、组同步推送至应用</p> | |||
| <div class="operation-group"> | |||
| <Button type="text" @click="click('syncOu')">同步机构</Button> | |||
| <Button type="text" @click="click('scimSetting')">SCIM配置</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">账户信息 - 子账户</p> | |||
| <p class="list-des">平台主账户与应用系统中子账户的关联表</p> | |||
| <div class="operation-group"> | |||
| <Button type="text">查看应用子账户</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| </Row> | |||
| <Row> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">授权信息</p> | |||
| <p class="list-des">应用与人员组织的授权关系</p> | |||
| <div class="operation-group"> | |||
| <Button type="text" to="/admin/authorization/application">授权</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">审计信息</p> | |||
| <p class="list-des">查看应用系统详细的操作日志</p> | |||
| <div class="operation-group"> | |||
| <Button type="text">查看日志</Button> | |||
| <Button type="text">查看同步记录</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">API</p> | |||
| <p slot="extra"> | |||
| <i-switch v-model="enableApi" :true-value=true :false-value=false> | |||
| <span slot="open">开</span> | |||
| <span slot="close">关</span> | |||
| </i-switch> | |||
| </p> | |||
| <p class="list-des">是否对应用开放系统API</p> | |||
| <div class="operation-group"> | |||
| <Button type="text">API Key</Button> | |||
| <Button type="text">API Secret</Button> | |||
| <Button type="text">IP 白名单配置</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="6"> | |||
| <Card :bordered="false"> | |||
| <p slot="title">管理应用内权限</p> | |||
| <p class="list-des">管理应用内菜单与功能权限</p> | |||
| <div class="operation-group"> | |||
| <Button type="text" @click="click('bindPsSetting')">绑定权限系统</Button> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| </Row> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| props: { | |||
| row: Object, | |||
| index: Number | |||
| }, | |||
| data(){ | |||
| return{ | |||
| enableApi:false | |||
| } | |||
| }, | |||
| methods:{ | |||
| click(type){ | |||
| this.$emit("clicked",[this.row,this.index,type]) | |||
| } | |||
| } | |||
| }; | |||
| </script> | |||
| @@ -1,215 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">审批中心</p> | |||
| <Tabs> | |||
| <TabPane label="子账户审批" name="name1"> | |||
| <Alert show-icon> | |||
| 审批中心 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| 审批中心是 IDaaS 系统中管理员集中处理所有需要审批内容的功能页面。当有待审批项出现时,会在左侧导航栏相应位置有数字气泡提示。 | |||
| 子账户指的是单点登录时带给应用的身份标识。如果某应用设置其主子账户映射关系为「账户关联」时,用户在尝试单点登录的时候,如果没有子账户,则会提交一个子账户绑定申请。由管理员在此处进行审批。 | |||
| 审批通过后,用户将可以使用子账户单点登录到应用系统中,请确认 IDaaS 用户主账户和子账户的对应关系后完成审批。 | |||
| </template> | |||
| </Alert> | |||
| <div class="complex-search-box"> | |||
| <Input class="search-box-input" placeholder="主账户(申请人)" style="width: auto" /> | |||
| <Input class="search-box-input" placeholder="子账户" style="width: auto" /> | |||
| <Input class="search-box-input" placeholder="应用名称" style="width: auto" /> | |||
| <Select class="search-box-input" placeholder="审批状态"> | |||
| <Option value="beijing">待审批</Option> | |||
| <Option value="shanghai">发起失败</Option> | |||
| <Option value="shenzhen">发起成功</Option> | |||
| <Option value="shenzhen">已通过</Option> | |||
| <Option value="shenzhen">已拒绝</Option> | |||
| </Select> | |||
| <Button class="btn-position" type="primary"><Icon type="ios-search"></Icon>搜索</Button> | |||
| <Button class="search-box-button">重置</Button> | |||
| <span style="margin-left: 20px; max-width: 400px;">当前审批如果启用外部审批流,请到外部审批平台进行处理!</span> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="100" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| <TabPane label="注册审批" name="name2"> | |||
| <div class="complex-search-box"> | |||
| <Input class="search-box-input" placeholder="账户名称" style="width: auto" /> | |||
| <Select class="search-box-input" placeholder="审批状态"> | |||
| <Option value="beijing">待审批</Option> | |||
| <Option value="shanghai">发起失败</Option> | |||
| <Option value="shenzhen">发起成功</Option> | |||
| <Option value="shenzhen">已通过</Option> | |||
| <Option value="shenzhen">已拒绝</Option> | |||
| </Select> | |||
| <Button class="btn-position" type="primary"><Icon type="ios-search"></Icon>搜索</Button> | |||
| <Button class="search-box-button">重置</Button> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="100" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| <TabPane label="应用审批" name="name3"> | |||
| <div class="complex-search-box"> | |||
| <Input class="search-box-input" placeholder="主账户(申请人)" style="width: auto" /> | |||
| <Input class="search-box-input" placeholder="子账户" style="width: auto" /> | |||
| <Input class="search-box-input" placeholder="应用名称" style="width: auto" /> | |||
| <Select class="search-box-input" placeholder="审批状态"> | |||
| <Option value="beijing">待审批</Option> | |||
| <Option value="shanghai">发起失败</Option> | |||
| <Option value="shenzhen">发起成功</Option> | |||
| <Option value="shenzhen">已通过</Option> | |||
| <Option value="shenzhen">已拒绝</Option> | |||
| </Select> | |||
| <Button class="btn-position" type="primary"><Icon type="ios-search"></Icon>搜索</Button> | |||
| <Button class="search-box-button">重置</Button> | |||
| <span style="margin-left: 20px; max-width: 400px;">当前审批如果启用外部审批流,请到外部审批平台进行处理!</span> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="100" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| </Tabs> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {articleList,deleteContent} from '@/api/data' | |||
| import store from '@/store' | |||
| import qs from 'qs' | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {}, | |||
| data () { | |||
| return { | |||
| contentType:'', | |||
| pageSizeOpts:[10,20,30,40,50,100], | |||
| loading: true, | |||
| pageNow:1, | |||
| pageSize:50, | |||
| articlePage:{}, | |||
| defaultList: [], | |||
| imgName: '', | |||
| dirname: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| articleColumns: [ | |||
| { | |||
| title: '操作人', | |||
| align: 'left', | |||
| key: 'title' | |||
| }, | |||
| { | |||
| title: '操作类型', | |||
| align: 'center', | |||
| width: 200, | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '操作时间', | |||
| align: 'center', | |||
| width: 200, | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '客户端IP', | |||
| align: 'center', | |||
| width: 200, | |||
| key: 'createTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '日志内容', | |||
| align: 'center', | |||
| width: 200, | |||
| key: 'updateTime', | |||
| sortable: true | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| pathName: '' | |||
| }, | |||
| ruleValidate: { | |||
| pathName: [ | |||
| { required: true, message: '目录名称不能为空', trigger: 'blur' }, | |||
| { required: true, type: 'string', min: 1, max: 254, message: '目录字符长度必须在1~254之间', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\/\/).*$/, message: '目录名称不能含有//', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\.\.).*$/, message: '目录名称不能含有..', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!\/).*$/, message: '目录名称不能以 / 打头', trigger: 'blur' } | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| remove (index) { | |||
| this.articlePage.list.splice(index, 1) | |||
| }, | |||
| handleSubmit (name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(this.formValidate.pathName) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh () { | |||
| this.listArticles({pageNow:this.pageNow,pageSize:this.pageSize}); | |||
| }, | |||
| listArticles(){ | |||
| var _this = this; | |||
| articleList({pageNow:this.pageNow,pageSize:this.pageSize,type:this.contentType}).then((res) => { | |||
| _this.loading = false | |||
| this.articlePage = res.data | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page){ | |||
| console.log("page:"+page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listArticles(); | |||
| }, | |||
| changePageSize(pageSize){ | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listArticles(); | |||
| } | |||
| }, | |||
| mounted () { | |||
| this.contentType = this.$route.query.contentType; | |||
| this.listArticles(); | |||
| }, | |||
| watch:{ | |||
| '$route':{ | |||
| handler(val){ | |||
| if(val.query.contentType){ | |||
| this.contentType = val.query.contentType? val.query.contentType:'post' | |||
| this.listArticles() | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| @@ -1,166 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">操作日志</p> | |||
| <Alert show-icon> | |||
| 操作日志 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| 审计日志记录了所有平台用户进行的数十种关键操作,无论是管理员进行的批量操作、还是用户侧进行的多因素认证,都可以在这里找到对应的记录,以对某次改变提供充分的溯源数据。 | |||
| </template> | |||
| </Alert> | |||
| <div class="complex-search-box"> | |||
| <Input class="search-box-input" suffix="ios-search" placeholder="IP"/> | |||
| <Input class="search-box-input" suffix="ios-search" placeholder="操作人"/> | |||
| <DatePicker class="search-box-input" type="date" placeholder="Select date"></DatePicker> | |||
| <DatePicker class="search-box-input" type="date" placeholder="Select date"></DatePicker> | |||
| <Select class="search-box-input" placeholder="选择日志类型"> | |||
| <Option value="beijing">登录失败</Option> | |||
| <Option value="shanghai">登录</Option> | |||
| <Option value="shenzhen">退出</Option> | |||
| </Select> | |||
| <Button class="search-box-button">重置</Button> | |||
| <Button class="btn-position" type="primary"><Icon type="ios-search"></Icon>搜索</Button> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="100" show-total show-sizer show-elevator/> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {articleList,deleteContent} from '@/api/data' | |||
| import store from '@/store' | |||
| import qs from 'qs' | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {}, | |||
| data () { | |||
| return { | |||
| contentType:'', | |||
| pageSizeOpts:[10,20,30,40,50,100], | |||
| loading: true, | |||
| pageNow:1, | |||
| pageSize:50, | |||
| articlePage:{}, | |||
| defaultList: [], | |||
| imgName: '', | |||
| dirname: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| articleColumns: [ | |||
| { | |||
| title: '操作人', | |||
| align: 'left', | |||
| key: 'title' | |||
| }, | |||
| { | |||
| title: '操作类型', | |||
| align: 'center', | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '操作时间', | |||
| align: 'center', | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '客户端IP', | |||
| align: 'center', | |||
| key: 'createTime' | |||
| }, | |||
| { | |||
| title: '日志内容', | |||
| align: 'center', | |||
| key: 'updateTime' | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| pathName: '' | |||
| }, | |||
| ruleValidate: { | |||
| pathName: [ | |||
| { required: true, message: '目录名称不能为空', trigger: 'blur' }, | |||
| { required: true, type: 'string', min: 1, max: 254, message: '目录字符长度必须在1~254之间', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\/\/).*$/, message: '目录名称不能含有//', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\.\.).*$/, message: '目录名称不能含有..', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!\/).*$/, message: '目录名称不能以 / 打头', trigger: 'blur' } | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| remove (index) { | |||
| this.articlePage.list.splice(index, 1) | |||
| }, | |||
| handleSubmit (name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(this.formValidate.pathName) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh () { | |||
| this.listArticles({pageNow:this.pageNow,pageSize:this.pageSize}); | |||
| }, | |||
| listArticles(){ | |||
| var _this = this; | |||
| articleList({pageNow:this.pageNow,pageSize:this.pageSize,type:this.contentType}).then((res) => { | |||
| _this.loading = false | |||
| this.articlePage = res.data | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page){ | |||
| console.log("page:"+page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listArticles(); | |||
| }, | |||
| changePageSize(pageSize){ | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listArticles(); | |||
| } | |||
| }, | |||
| mounted () { | |||
| this.contentType = this.$route.query.contentType; | |||
| this.listArticles(); | |||
| }, | |||
| watch:{ | |||
| '$route':{ | |||
| handler(val){ | |||
| if(val.query.contentType){ | |||
| this.contentType = val.query.contentType? val.query.contentType:'post' | |||
| this.listArticles() | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| @@ -1,191 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">进/出日志</p> | |||
| <Alert show-icon> | |||
| 进/出日志 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| 进/出日志专门直观地查询某个账户的登录、退出日志。管理员也可以在操作日志中通过筛选日志类型进行搜索。 | |||
| </template> | |||
| </Alert> | |||
| <Row> | |||
| <Col span="6"> | |||
| <Card class="card-account"> | |||
| <p slot="title">账户</p> | |||
| <div class="list-wrapper"> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入账户名称进行搜索"/> | |||
| </div> | |||
| <ul class="app-list"> | |||
| <li :class="{'item':true,'active': true}" v-for="role in userPage.list" @click="clickRole(role)"> | |||
| {{ role.name }} | |||
| <Icon type="ios-arrow-forward" class="icon"></Icon> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| </Card> | |||
| </Col> | |||
| <Col span="18"> | |||
| <Card> | |||
| <p slot="title">登录登出日志</p> | |||
| <div class="complex-search-box"> | |||
| <Select class="search-box-input" placeholder="选择日志类型"> | |||
| <Option value="beijing">登录失败</Option> | |||
| <Option value="shanghai">登录</Option> | |||
| <Option value="shenzhen">退出</Option> | |||
| </Select> | |||
| <Input class="search-box-input" suffix="ios-search" placeholder="IP"/> | |||
| <DatePicker class="search-box-input" type="date" placeholder="Select date"></DatePicker> | |||
| <DatePicker class="search-box-input" type="date" placeholder="Select date"></DatePicker> | |||
| <Button class="btn-position" type="primary"><Icon type="ios-search"></Icon>搜索</Button> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| </Card> | |||
| </Col> | |||
| </Row> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {articleList,deleteContent} from '@/api/data' | |||
| import store from '@/store' | |||
| import qs from 'qs' | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {}, | |||
| data () { | |||
| return { | |||
| contentType:'', | |||
| pageSizeOpts:[10,20,30,40,50,100], | |||
| loading: true, | |||
| pageNow:1, | |||
| pageSize:50, | |||
| articlePage:{}, | |||
| defaultList: [], | |||
| imgName: '', | |||
| userPage: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| articleColumns: [ | |||
| { | |||
| title: '操作人', | |||
| align: 'left', | |||
| key: 'title' | |||
| }, | |||
| { | |||
| title: '操作类型', | |||
| align: 'center', | |||
| width: 200, | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '操作时间', | |||
| align: 'center', | |||
| width: 200, | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '客户端IP', | |||
| align: 'center', | |||
| width: 200, | |||
| key: 'createTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '日志内容', | |||
| align: 'center', | |||
| width: 200, | |||
| key: 'updateTime', | |||
| sortable: true | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| pathName: '' | |||
| }, | |||
| ruleValidate: { | |||
| pathName: [ | |||
| { required: true, message: '目录名称不能为空', trigger: 'blur' }, | |||
| { required: true, type: 'string', min: 1, max: 254, message: '目录字符长度必须在1~254之间', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\/\/).*$/, message: '目录名称不能含有//', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\.\.).*$/, message: '目录名称不能含有..', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!\/).*$/, message: '目录名称不能以 / 打头', trigger: 'blur' } | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| remove (index) { | |||
| this.articlePage.list.splice(index, 1) | |||
| }, | |||
| handleSubmit (name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(this.formValidate.pathName) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh () { | |||
| this.listArticles({pageNow:this.pageNow,pageSize:this.pageSize}); | |||
| }, | |||
| listArticles(){ | |||
| var _this = this; | |||
| articleList({pageNow:this.pageNow,pageSize:this.pageSize,type:this.contentType}).then((res) => { | |||
| _this.loading = false | |||
| this.articlePage = res.data | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page){ | |||
| console.log("page:"+page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listArticles(); | |||
| }, | |||
| changePageSize(pageSize){ | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listArticles(); | |||
| } | |||
| }, | |||
| mounted () { | |||
| this.contentType = this.$route.query.contentType; | |||
| this.listArticles(); | |||
| }, | |||
| watch:{ | |||
| '$route':{ | |||
| handler(val){ | |||
| if(val.query.contentType){ | |||
| this.contentType = val.query.contentType? val.query.contentType:'post' | |||
| this.listArticles() | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| @@ -1,285 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">证书管理</p> | |||
| <Tabs value="name1"> | |||
| <TabPane label="手机" name="name1"> | |||
| <Alert show-icon> | |||
| 证书管理 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc">本页面包含了所有已支持的可添加应用列表,管理员可以选择需要使用的应用进行初始化配置,并开始后续使用。 | |||
| 应用分为两种:一种是支持标准的 JWT、CAS、SAML 等模板的应用,在这里可以通过添加对应的标准应用模板来实现单点登录功能;另一种是定制应用,本类应用已经提供了对接其单点登录或用户同步的接口,由 IDaaS 为其提供定制化模板进行对接。</template> | |||
| </Alert> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search-left-tools"> | |||
| <!--<Button type="primary">添加应用</Button>--> | |||
| </div> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入应用名称"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="100" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| <TabPane label="PC" name="name2"> | |||
| <!--<Alert show-icon>--> | |||
| <!--证书管理--> | |||
| <!--<Icon type="ios-bulb-outline" slot="icon"></Icon>--> | |||
| <!--<template slot="desc">本页面包含了所有已支持的可添加应用列表,管理员可以选择需要使用的应用进行初始化配置,并开始后续使用。--> | |||
| <!--应用分为两种:一种是支持标准的 JWT、CAS、SAML 等模板的应用,在这里可以通过添加对应的标准应用模板来实现单点登录功能;另一种是定制应用,本类应用已经提供了对接其单点登录或用户同步的接口,由 IDaaS 为其提供定制化模板进行对接。</template>--> | |||
| <!--</Alert>--> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search-left-tools"> | |||
| <!--<Button type="primary">添加应用</Button>--> | |||
| </div> | |||
| <div class="search iui-input-wrapper iui-input-wrapper-default iui-input-type iui-input-group iui-input-group-default iui-input-group-with-append iui-input-with-search"> | |||
| <div class="iui-input-inner-container"><i class="iui-icon iui-icon-ios-loading iui-load-loop iui-input-icon iui-input-icon-validate"></i> | |||
| <Input search enter-button placeholder="请输入账号名称" /> | |||
| </div> | |||
| <div class="iui-input-group-append iui-input-search" style=""><i class="iui-icon iui-icon-ios-search"></i></div> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="100" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| </Tabs> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {articleList,deleteContent} from '@/api/data' | |||
| import store from '@/store' | |||
| import qs from 'qs' | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {}, | |||
| data () { | |||
| return { | |||
| contentType:'', | |||
| pageSizeOpts:[10,20,30,40,50,100], | |||
| loading: true, | |||
| pageNow:1, | |||
| pageSize:50, | |||
| articlePage:{}, | |||
| defaultList: [], | |||
| imgName: '', | |||
| dirname: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| articleColumns: [ | |||
| { | |||
| type: 'selection', | |||
| width: 60, | |||
| align: 'center', | |||
| fixed: 'left' | |||
| }, | |||
| { | |||
| title: '账户名称', | |||
| align: 'left', | |||
| key: 'title' | |||
| }, | |||
| { | |||
| title: '是否已绑定 APP', | |||
| align: 'center', | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '有效期', | |||
| align: 'center', | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '证书详细', | |||
| align: 'center', | |||
| key: 'createTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '证书生成时间', | |||
| align: 'center', | |||
| key: 'updateTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'right', | |||
| width: 150, | |||
| key: 'opt', | |||
| fixed: 'right', | |||
| render: (h, params) => { | |||
| let item = this.articlePage.list[params.index] | |||
| return h('div', [ | |||
| h('Button', { | |||
| props: { | |||
| type: 'success', | |||
| size: 'small', | |||
| to:'/admin/article/edit/'+item.id | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| } | |||
| } | |||
| }, 'Edit'), | |||
| h('span',{ | |||
| style:"margin:0 8px" | |||
| }), | |||
| h('Button', { | |||
| props: { | |||
| type: 'error', | |||
| size: 'small' | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| const msg = this.$Message.loading({ | |||
| content: '删除中...', | |||
| duration: 0 | |||
| }) | |||
| deleteContent(item.id).then(res=>{ | |||
| msg(); | |||
| this.remove(params.index) | |||
| }).catch(function (error) { | |||
| msg(); | |||
| console.log(error) | |||
| }) | |||
| } | |||
| } | |||
| }, 'Delete') | |||
| ]) | |||
| } | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| pathName: '' | |||
| }, | |||
| ruleValidate: { | |||
| pathName: [ | |||
| { required: true, message: '目录名称不能为空', trigger: 'blur' }, | |||
| { required: true, type: 'string', min: 1, max: 254, message: '目录字符长度必须在1~254之间', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\/\/).*$/, message: '目录名称不能含有//', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\.\.).*$/, message: '目录名称不能含有..', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!\/).*$/, message: '目录名称不能以 / 打头', trigger: 'blur' } | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| remove (index) { | |||
| this.articlePage.list.splice(index, 1) | |||
| }, | |||
| handleSubmit (name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(this.formValidate.pathName) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh () { | |||
| this.listArticles({pageNow:this.pageNow,pageSize:this.pageSize}); | |||
| }, | |||
| listArticles(){ | |||
| var _this = this; | |||
| articleList({pageNow:this.pageNow,pageSize:this.pageSize,type:this.contentType}).then((res) => { | |||
| _this.loading = false | |||
| this.articlePage = res.data | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page){ | |||
| console.log("page:"+page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listArticles(); | |||
| }, | |||
| changePageSize(pageSize){ | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listArticles(); | |||
| } | |||
| }, | |||
| mounted () { | |||
| this.contentType = this.$route.query.contentType; | |||
| this.listArticles(); | |||
| }, | |||
| watch:{ | |||
| '$route':{ | |||
| handler(val){ | |||
| if(val.query.contentType){ | |||
| this.contentType = val.query.contentType? val.query.contentType:'post' | |||
| this.listArticles() | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .search-box{ | |||
| position:relative; | |||
| width:100%; | |||
| display:-webkit-flex; | |||
| -webkit-box-orient:horizontal; | |||
| -webkit-box-direction:normal; | |||
| -ms-flex-direction:row; | |||
| flex-direction:row; | |||
| -webkit-box-align:center; | |||
| -ms-flex-align:center; | |||
| align-items:center; | |||
| margin-bottom:15px | |||
| } | |||
| .search-box .search-left-box { | |||
| width:50%; | |||
| display:-webkit-box; | |||
| display:-ms-flexbox; | |||
| display:flex | |||
| } | |||
| .search-box .search-left-tools{ | |||
| display:inline-block; | |||
| margin-right:5px | |||
| } | |||
| .search-box .total{ | |||
| position:absolute; | |||
| right:0; | |||
| font-weight:700 | |||
| } | |||
| .search-box .total .icon{ | |||
| font-size:20px; | |||
| font-weight:800; | |||
| color:#199be6 | |||
| } | |||
| .search-box .search-right-tools{ | |||
| text-align:right | |||
| } | |||
| </style> | |||
| @@ -1,261 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">认证源</p> | |||
| <Alert show-icon> | |||
| 认证源 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| 本平台支持企业使用不同的外部认证源(即允许使用第三方认证方式登录账户),可根据公司需要添加并使用不同的认证方式,如 DB、LDAP、钉钉扫码等。 | |||
| 启用认证源后并配置完成后,平台会允许企业用户登录时使用具体的认证源去认证。 | |||
| </template> | |||
| </Alert> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search-left-tools"> | |||
| <!--<Button type="primary">添加应用</Button>--> | |||
| </div> | |||
| <div class="search iui-input-wrapper iui-input-wrapper-default iui-input-type iui-input-group iui-input-group-default iui-input-group-with-append iui-input-with-search"> | |||
| <div class="iui-input-inner-container"><i class="iui-icon iui-icon-ios-loading iui-load-loop iui-input-icon iui-input-icon-validate"></i> | |||
| <Input search enter-button placeholder="搜索认证源" /> | |||
| </div> | |||
| <div class="iui-input-group-append iui-input-search" style=""><i class="iui-icon iui-icon-ios-search"></i></div> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="100" show-total show-sizer show-elevator/> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {articleList,deleteContent} from '@/api/data' | |||
| import store from '@/store' | |||
| import qs from 'qs' | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {}, | |||
| data () { | |||
| return { | |||
| contentType:'', | |||
| pageSizeOpts:[10,20,30,40,50,100], | |||
| loading: true, | |||
| pageNow:1, | |||
| pageSize:50, | |||
| articlePage:{}, | |||
| defaultList: [], | |||
| imgName: '', | |||
| dirname: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| articleColumns: [ | |||
| { | |||
| type: 'selection', | |||
| width: 60, | |||
| align: 'center', | |||
| fixed: 'left' | |||
| }, | |||
| { | |||
| title: '认证源名称', | |||
| align: 'left', | |||
| key: 'title' | |||
| }, | |||
| { | |||
| title: '认证源ID', | |||
| align: 'center', | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '自定义登录', | |||
| align: 'center', | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '创建时间', | |||
| align: 'center', | |||
| key: 'createTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '状态', | |||
| align: 'center', | |||
| key: 'updateTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'right', | |||
| key: 'opt', | |||
| fixed: 'right', | |||
| render: (h, params) => { | |||
| let item = this.articlePage.list[params.index] | |||
| return h('div', [ | |||
| h('Button', { | |||
| props: { | |||
| type: 'success', | |||
| size: 'small', | |||
| to:'/admin/article/edit/'+item.id | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| } | |||
| } | |||
| }, 'Edit'), | |||
| h('span',{ | |||
| style:"margin:0 8px" | |||
| }), | |||
| h('Button', { | |||
| props: { | |||
| type: 'error', | |||
| size: 'small' | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| const msg = this.$Message.loading({ | |||
| content: '删除中...', | |||
| duration: 0 | |||
| }) | |||
| deleteContent(item.id).then(res=>{ | |||
| msg(); | |||
| this.remove(params.index) | |||
| }).catch(function (error) { | |||
| msg(); | |||
| console.log(error) | |||
| }) | |||
| } | |||
| } | |||
| }, 'Delete') | |||
| ]) | |||
| } | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| pathName: '' | |||
| }, | |||
| ruleValidate: { | |||
| pathName: [ | |||
| { required: true, message: '目录名称不能为空', trigger: 'blur' }, | |||
| { required: true, type: 'string', min: 1, max: 254, message: '目录字符长度必须在1~254之间', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\/\/).*$/, message: '目录名称不能含有//', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\.\.).*$/, message: '目录名称不能含有..', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!\/).*$/, message: '目录名称不能以 / 打头', trigger: 'blur' } | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| remove (index) { | |||
| this.articlePage.list.splice(index, 1) | |||
| }, | |||
| handleSubmit (name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(this.formValidate.pathName) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh () { | |||
| this.listArticles({pageNow:this.pageNow,pageSize:this.pageSize}); | |||
| }, | |||
| listArticles(){ | |||
| var _this = this; | |||
| articleList({pageNow:this.pageNow,pageSize:this.pageSize,type:this.contentType}).then((res) => { | |||
| _this.loading = false | |||
| this.articlePage = res.data | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page){ | |||
| console.log("page:"+page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listArticles(); | |||
| }, | |||
| changePageSize(pageSize){ | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listArticles(); | |||
| } | |||
| }, | |||
| mounted () { | |||
| this.contentType = this.$route.query.contentType; | |||
| this.listArticles(); | |||
| }, | |||
| watch:{ | |||
| '$route':{ | |||
| handler(val){ | |||
| if(val.query.contentType){ | |||
| this.contentType = val.query.contentType? val.query.contentType:'post' | |||
| this.listArticles() | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .search-box{ | |||
| position:relative; | |||
| width:100%; | |||
| display:-webkit-flex; | |||
| -webkit-box-orient:horizontal; | |||
| -webkit-box-direction:normal; | |||
| -ms-flex-direction:row; | |||
| flex-direction:row; | |||
| -webkit-box-align:center; | |||
| -ms-flex-align:center; | |||
| align-items:center; | |||
| margin-bottom:15px | |||
| } | |||
| .search-box .search-left-box { | |||
| width:50%; | |||
| display:-webkit-box; | |||
| display:-ms-flexbox; | |||
| display:flex | |||
| } | |||
| .search-box .search-left-tools{ | |||
| display:inline-block; | |||
| margin-right:5px | |||
| } | |||
| .search-box .total{ | |||
| position:absolute; | |||
| right:0; | |||
| font-weight:700 | |||
| } | |||
| .search-box .total .icon{ | |||
| font-size:20px; | |||
| font-weight:800; | |||
| color:#199be6 | |||
| } | |||
| .search-box .search-right-tools{ | |||
| text-align:right | |||
| } | |||
| </style> | |||
| @@ -1,282 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">RADIUS</p> | |||
| <Alert show-icon> | |||
| RADIUS(远程用户拨号认证系统) | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| 使用 RADIUS(Remote Authentication Dial In User Service,远程用户拨号认证系统)可以实现对防火墙、堡垒机、Wi-Fi 等设备的统一认证。 | |||
| IDaaS RADIUS Server 安装包,并配合列表中 RADIUS 可下载的配置文件使用。 | |||
| </template> | |||
| </Alert> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search-left-tools"> | |||
| <!--<Button type="primary">添加应用</Button>--> | |||
| </div> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="搜索认证源"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="100" show-total show-sizer show-elevator/> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {articleList,deleteContent} from '@/api/data' | |||
| import store from '@/store' | |||
| import qs from 'qs' | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {}, | |||
| data () { | |||
| return { | |||
| contentType:'', | |||
| pageSizeOpts:[10,20,30,40,50,100], | |||
| loading: true, | |||
| pageNow:1, | |||
| pageSize:50, | |||
| articlePage:{}, | |||
| defaultList: [], | |||
| imgName: '', | |||
| dirname: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| articleColumns: [ | |||
| { | |||
| type: 'selection', | |||
| width: 60, | |||
| align: 'center', | |||
| fixed: 'left' | |||
| }, | |||
| { | |||
| title: 'RADIUS 名称', | |||
| align: 'left', | |||
| key: 'title' | |||
| }, | |||
| { | |||
| title: '认证端口', | |||
| align: 'center', | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '计费端口', | |||
| align: 'center', | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '连接超时时间', | |||
| align: 'center', | |||
| key: 'createTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '认证方式', | |||
| align: 'center', | |||
| key: 'updateTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: 'RADIUS 服务提供商', | |||
| align: 'center', | |||
| key: 'updateTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '启用计费', | |||
| align: 'center', | |||
| key: 'updateTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '创建时间', | |||
| align: 'center', | |||
| key: 'updateTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '备注', | |||
| align: 'center', | |||
| key: 'updateTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'right', | |||
| key: 'opt', | |||
| fixed: 'right', | |||
| render: (h, params) => { | |||
| let item = this.articlePage.list[params.index] | |||
| return h('div', [ | |||
| h('Button', { | |||
| props: { | |||
| type: 'success', | |||
| size: 'small', | |||
| to:'/admin/article/edit/'+item.id | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| } | |||
| } | |||
| }, 'Edit'), | |||
| h('span',{ | |||
| style:"margin:0 8px" | |||
| }), | |||
| h('Button', { | |||
| props: { | |||
| type: 'error', | |||
| size: 'small' | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| const msg = this.$Message.loading({ | |||
| content: '删除中...', | |||
| duration: 0 | |||
| }) | |||
| deleteContent(item.id).then(res=>{ | |||
| msg(); | |||
| this.remove(params.index) | |||
| }).catch(function (error) { | |||
| msg(); | |||
| console.log(error) | |||
| }) | |||
| } | |||
| } | |||
| }, 'Delete') | |||
| ]) | |||
| } | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| pathName: '' | |||
| }, | |||
| ruleValidate: { | |||
| pathName: [ | |||
| { required: true, message: '目录名称不能为空', trigger: 'blur' }, | |||
| { required: true, type: 'string', min: 1, max: 254, message: '目录字符长度必须在1~254之间', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\/\/).*$/, message: '目录名称不能含有//', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\.\.).*$/, message: '目录名称不能含有..', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!\/).*$/, message: '目录名称不能以 / 打头', trigger: 'blur' } | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| remove (index) { | |||
| this.articlePage.list.splice(index, 1) | |||
| }, | |||
| handleSubmit (name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(this.formValidate.pathName) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh () { | |||
| this.listArticles({pageNow:this.pageNow,pageSize:this.pageSize}); | |||
| }, | |||
| listArticles(){ | |||
| var _this = this; | |||
| articleList({pageNow:this.pageNow,pageSize:this.pageSize,type:this.contentType}).then((res) => { | |||
| _this.loading = false | |||
| this.articlePage = res.data | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page){ | |||
| console.log("page:"+page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listArticles(); | |||
| }, | |||
| changePageSize(pageSize){ | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listArticles(); | |||
| } | |||
| }, | |||
| mounted () { | |||
| this.contentType = this.$route.query.contentType; | |||
| this.listArticles(); | |||
| }, | |||
| watch:{ | |||
| '$route':{ | |||
| handler(val){ | |||
| if(val.query.contentType){ | |||
| this.contentType = val.query.contentType? val.query.contentType:'post' | |||
| this.listArticles() | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .search-box{ | |||
| position:relative; | |||
| width:100%; | |||
| display:-webkit-flex; | |||
| -webkit-box-orient:horizontal; | |||
| -webkit-box-direction:normal; | |||
| -ms-flex-direction:row; | |||
| flex-direction:row; | |||
| -webkit-box-align:center; | |||
| -ms-flex-align:center; | |||
| align-items:center; | |||
| margin-bottom:15px | |||
| } | |||
| .search-box .search-left-box { | |||
| width:50%; | |||
| display:-webkit-box; | |||
| display:-ms-flexbox; | |||
| display:flex | |||
| } | |||
| .search-box .search-left-tools{ | |||
| display:inline-block; | |||
| margin-right:5px | |||
| } | |||
| .search-box .total{ | |||
| position:absolute; | |||
| right:0; | |||
| font-weight:700 | |||
| } | |||
| .search-box .total .icon{ | |||
| font-size:20px; | |||
| font-weight:800; | |||
| color:#199be6 | |||
| } | |||
| .search-box .search-right-tools{ | |||
| text-align:right | |||
| } | |||
| </style> | |||
| @@ -1,900 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">应用授权</p> | |||
| <Tabs name="type" v-model="type" @on-click="switchTabs1"> | |||
| <TabPane label="应用授权主体" name="subjectToApp" tab="type"> | |||
| <div class="demo-split"> | |||
| <Split v-model="split1"> | |||
| <Card slot="left" :bordered="false" shadow> | |||
| <div> | |||
| <Tabs name="appToSubjectTab1" v-model="subjectToAppActiveTab1" @on-click="switchSubjectToAppTab1"> | |||
| <TabPane label="应用" name="app" tab="appToSubjectTab1"> | |||
| <div class="list-wrapper"> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入应用名称"/> | |||
| </div> | |||
| <ul class="app-list"> | |||
| <li :class="{'item':true,'active': activeApp.id == app.id}" v-for="app in applicationPage.list" @click="clickApp(app)"> | |||
| {{ app.name }} | |||
| <Icon type="ios-arrow-forward" class="icon"></Icon> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| </TabPane> | |||
| </Tabs> | |||
| </div> | |||
| </Card> | |||
| <Card slot="right" :bordered="false" shadow> | |||
| <div> | |||
| <Tabs name="tab3" v-model="subjectToAppActiveTab2" @on-click="switchSubjectToAppTabs2"> | |||
| <TabPane label="账户" name="user" tab="tab3"> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search-left-tools"> | |||
| </div> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入账户名称"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table ref="userSelection" :columns="userColumns" :data="userPage.list"></Table> | |||
| <Page class="page" :total="userPage.totalRecords" show-total show-sizer show-elevator/> | |||
| <Button type="primary" style="margin-top:-52px" @click="grantUser">保存</Button> | |||
| </TabPane> | |||
| <TabPane label="组" name="group" tab="tab3"> | |||
| <div class="search" style="margin-bottom:15px;"> | |||
| <Input search enter-button placeholder="请输入名称进行搜索"/> | |||
| </div> | |||
| <Table ref="groupSelection" :columns="groupColumns" :data="groupPage.list"></Table> | |||
| <Page class="page" :total="groupPage.totalRecords" show-total show-sizer show-elevator/> | |||
| <Button type="primary" style="margin-top:-52px" @click="grantGroups">保存</Button> | |||
| </TabPane> | |||
| <TabPane label="组织机构" name="org" tab="tab3" style="position: relative"> | |||
| <zTree :nodes="nodes" @onCreated="handleCreated" :setting="setting"/> | |||
| <Button type="primary" style="position: absolute;left: 10px;bottom:10px" @click="grantOus">保存</Button> | |||
| </TabPane> | |||
| <TabPane label="分类" name="classify" tab="tab3"> | |||
| <div class="search" style="margin-bottom:15px;"> | |||
| <Input search enter-button placeholder="请输入分类名称"/> | |||
| </div> | |||
| <Table ref="classifySelection" :columns="classifyColumns" :data="classifyPage.list"></Table> | |||
| <br> | |||
| <Page class="page" :total="classifyPage.totalRecords" show-total show-sizer show-elevator/> | |||
| <Button type="primary" style="margin-top:-52px" @click="grantClassifies">保存</Button> | |||
| </TabPane> | |||
| </Tabs> | |||
| </div> | |||
| </Card> | |||
| </Split> | |||
| </div> | |||
| </TabPane> | |||
| <TabPane label="主体授权应用" name="appToSubject" tab="type"> | |||
| <div class="demo-split"> | |||
| <Split v-model="split1"> | |||
| <Card slot="left" :bordered="false" shadow> | |||
| <div> | |||
| <Tabs name="tab4" v-model="appToSubjectActiveTab1" @on-click="switchAppToSubjectTabs1"> | |||
| <TabPane label="账户" name="user" tab="tab4"> | |||
| <div class="list-wrapper"> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入账号进行搜索"/> | |||
| </div> | |||
| <ul class="app-list"> | |||
| <li :class="{'item':true,'active': appToSubjectActiveUser.id == user.id}" v-for="user in userPage.list" @click="clickUser(user)"> | |||
| {{ user.username }} | |||
| <Icon type="ios-arrow-forward" class="icon"></Icon> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| </TabPane> | |||
| <TabPane label="组" name="group" tab="tab4"> | |||
| <div class="list-wrapper"> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入名称进行搜索"/> | |||
| </div> | |||
| <ul class="app-list"> | |||
| <li :class="{'item':true,'active': appToSubjectActiveGroup.id == group.id}" v-for="group in groupPage.list" @click="clickGroup(group)"> | |||
| {{ group.name }} | |||
| <Icon type="ios-arrow-forward" class="icon"></Icon> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| </TabPane> | |||
| <TabPane label="组织机构" name="org" tab="tab4"> | |||
| <zTree :nodes="nodes" @onCreated="handleCreated2" :setting="setting2"/> | |||
| </TabPane> | |||
| <TabPane label="分类" name="classify" tab="tab4"> | |||
| <div class="list-wrapper"> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入名称进行搜索"/> | |||
| </div> | |||
| <ul class="app-list"> | |||
| <li :class="{'item':true,'active': appToSubjectActiveClassify.id == classify.id}" v-for="classify in classifyPage.list" @click="clickClassify(classify)"> | |||
| {{ classify.name }} | |||
| <Icon type="ios-arrow-forward" class="icon"></Icon> | |||
| </li> | |||
| </ul> | |||
| </div> | |||
| </TabPane> | |||
| </Tabs> | |||
| </div> | |||
| </Card> | |||
| <Card slot="right" :bordered="false" shadow> | |||
| <div> | |||
| <Tabs value="name1" name="tab5" v-model="appToSubjectActiveTab2" @on-click="switchAppToSubjectTabs2"> | |||
| <TabPane label="授权应用" name="app" tab="tab5"> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search-left-tools"> | |||
| </div> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入应用名称"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table ref="applicationSelection" :columns="appColumns" :data="applicationPage.list"></Table> | |||
| <Page class="page" :total="applicationPage.totalRecords" show-total show-sizer show-elevator/> | |||
| <Button type="primary" style="margin-top:-52px" @click="grantApps">保存</Button> | |||
| </TabPane> | |||
| </Tabs> | |||
| </div> | |||
| </Card> | |||
| </Split> | |||
| </div> | |||
| </TabPane> | |||
| </Tabs> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import { | |||
| applicationList, | |||
| getOrgChildrenRequest, | |||
| getOrgRootRequest, grantApplicationsToClassifyRequest, | |||
| grantApplicationsToGroupRequest, grantApplicationsToOuRequest, | |||
| grantApplicationsToUserRequest, | |||
| grantClassifiesToApplicationRequest, | |||
| grantGroupsToApplicationRequest, | |||
| grantOusToApplicationRequest, | |||
| grantUsersToApplicationRequest, | |||
| listApplicationHasClassifiesRequest, | |||
| listApplicationHasGroupsRequest, | |||
| listApplicationHasOusRequest, | |||
| listApplicationHasUsersRequest, listClassifyHasApplicationsRequest, | |||
| listClassifyRequest, listGroupHasApplicationsRequest, | |||
| listGroupRequest, listOuHasApplicationsRequest, | |||
| listUserHasApplicationsRequest, | |||
| listUsersSumaryRequest | |||
| } from '@/api/data' | |||
| import zTree from "vue-giant-tree"; | |||
| export default { | |||
| name: 'authApplication', | |||
| props: { | |||
| }, | |||
| components: {zTree}, | |||
| data () { | |||
| return { | |||
| applicationHasUserIds:[], | |||
| applicationHasGroupIds:[], | |||
| applicationHasClassifies:[], | |||
| appToSubjectActiveUser:{}, | |||
| appToSubjectActiveGroup:{}, | |||
| appToSubjectActiveClassify:{}, | |||
| type:'subjectToApp', | |||
| subjectToAppActiveTab1:'app', | |||
| subjectToAppActiveTab2:'user', | |||
| appToSubjectActiveTab1:'user', | |||
| appToSubjectActiveTab2:'app', | |||
| split1: 0.3, | |||
| pageSizeOpts:[10,20,30,40,50,100], | |||
| pageNow:1, | |||
| pageSize:50, | |||
| articlePage:{}, | |||
| applicationPage:{}, | |||
| userPage:{}, | |||
| groupPage:{}, | |||
| classifyPage:{}, | |||
| userHasApplicationIds: [], | |||
| groupHasApplicationIds: [], | |||
| classifyHasApplicationIds: [], | |||
| ouHasApplicationIds: [], | |||
| userColumns: [ | |||
| { | |||
| type: 'selection', | |||
| width: 60, | |||
| align: 'center', | |||
| fixed: 'left' | |||
| }, | |||
| { | |||
| title: '账户名称 ', | |||
| align: 'left', | |||
| key: 'username' | |||
| }, | |||
| { | |||
| title: '显示名称 ', | |||
| align: 'center', | |||
| // width: 200, | |||
| key: 'displayName' | |||
| }, | |||
| { | |||
| title: '邮箱', | |||
| align: 'center', | |||
| // width: 200, | |||
| key: 'email' | |||
| } | |||
| ], | |||
| appColumns: [ | |||
| { | |||
| type: 'selection', | |||
| width: 60, | |||
| align: 'center', | |||
| fixed: 'left' | |||
| }, | |||
| { | |||
| title: '应用名称', | |||
| align: 'left', | |||
| key: 'name' | |||
| }, | |||
| { | |||
| title: '应用ID', | |||
| align: 'center', | |||
| key: 'id' | |||
| } | |||
| ], | |||
| groupColumns: [ | |||
| { | |||
| type: 'selection', | |||
| width: 60, | |||
| align: 'center', | |||
| fixed: 'left' | |||
| }, | |||
| { | |||
| title: '名称 ', | |||
| align: 'left', | |||
| key: 'name' | |||
| }, | |||
| { | |||
| title: '目录', | |||
| align: 'left', | |||
| key: 'ouDirectory' | |||
| } | |||
| ], | |||
| classifyColumns: [ | |||
| { | |||
| type: 'selection', | |||
| width: 60, | |||
| align: 'center', | |||
| fixed: 'left' | |||
| }, | |||
| { | |||
| title: '分类名称 ', | |||
| align: 'left', | |||
| key: 'name' | |||
| }, | |||
| { | |||
| title: '数据字典字段 ', | |||
| align: 'left', | |||
| key: 'dicName' | |||
| }, | |||
| { | |||
| title: '匹配值 ', | |||
| align: 'left', | |||
| key: 'value' | |||
| }, | |||
| { | |||
| title: '创建者 ', | |||
| align: 'left', | |||
| key: 'creator' | |||
| } | |||
| ], | |||
| setting: { | |||
| view: { | |||
| showIcon: this.showIconForTree, | |||
| showLine: true, | |||
| txtSelectedEnable: true, | |||
| selectedMulti: true | |||
| }, | |||
| check: { | |||
| enable: true, | |||
| chkStyle:'checkbox', | |||
| chkboxType: { "Y" : "", "N" : "" } | |||
| }, | |||
| data: { | |||
| simpleData: { | |||
| enable: true | |||
| } | |||
| }, | |||
| callback: { | |||
| onClick:this.clickOuNode | |||
| } | |||
| }, | |||
| setting2: { | |||
| view: { | |||
| showIcon: this.showIconForTree, | |||
| showLine: true, | |||
| txtSelectedEnable: true, | |||
| selectedMulti: false | |||
| }, | |||
| check: { | |||
| enable: false | |||
| }, | |||
| data: { | |||
| simpleData: { | |||
| enable: true | |||
| } | |||
| }, | |||
| callback: { | |||
| onClick:this.clickOuNode | |||
| } | |||
| }, | |||
| ztreeObj: null, | |||
| ztreeObj2: null, | |||
| nodes: [ | |||
| ], | |||
| nodes2: [ | |||
| ], | |||
| activeApp:{}, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| grantUser(){ | |||
| let selectedUsers = this.$refs.userSelection.getSelection(); | |||
| let userIds = []; | |||
| for(let i=0;i<selectedUsers.length;i++){ | |||
| userIds.push(selectedUsers[i].id); | |||
| } | |||
| console.log(JSON.stringify(userIds)) | |||
| let addUserIds = [] | |||
| for(let i=0;i<userIds.length;i++){ | |||
| let id = userIds[i]; | |||
| let index = this.applicationHasUserIds.indexOf(id); | |||
| if(index<0){ | |||
| addUserIds.push(id) | |||
| }else { | |||
| this.applicationHasUserIds.splice(index,1) | |||
| } | |||
| } | |||
| grantUsersToApplicationRequest({applicationId:this.activeApp.id,addUsers:addUserIds,removeUsers:this.applicationHasUserIds}).then((res)=>{ | |||
| }) | |||
| }, | |||
| grantGroups(){ | |||
| let selectedGroups = this.$refs.groupSelection.getSelection(); | |||
| let groupIds = []; | |||
| for(let i=0;i<selectedGroups.length;i++){ | |||
| groupIds.push(selectedGroups[i].id); | |||
| } | |||
| let addGroupIds = [] | |||
| for(let i=0;i<groupIds.length;i++){ | |||
| let id = groupIds[i]; | |||
| let index = this.applicationHasGroupIds.indexOf(id); | |||
| if(index<0){ | |||
| addGroupIds.push(id) | |||
| }else { | |||
| this.applicationHasGroupIds.splice(index,1) | |||
| } | |||
| } | |||
| grantGroupsToApplicationRequest({applicationId:this.activeApp.id,addGroups:addGroupIds,removeGroups:this.applicationHasGroupIds}).then((res)=>{ | |||
| }) | |||
| }, | |||
| grantClassifies(){ | |||
| let selectedClassifies = this.$refs.classifySelection.getSelection(); | |||
| let classifies = []; | |||
| for(let i=0;i<selectedClassifies.length;i++){ | |||
| classifies.push(selectedClassifies[i].id); | |||
| } | |||
| let addClassifies = [] | |||
| for(let i=0;i<classifies.length;i++){ | |||
| let id = classifies[i]; | |||
| let index = this.applicationHasClassifies.indexOf(id); | |||
| if(index<0){ | |||
| addClassifies.push(id) | |||
| }else { | |||
| this.applicationHasClassifies.splice(index,1) | |||
| } | |||
| } | |||
| grantClassifiesToApplicationRequest({applicationId:this.activeApp.id,addClassifies:addClassifies,removeClassifies:this.applicationHasClassifies}).then((res)=>{ | |||
| }) | |||
| }, | |||
| grantOus(){ | |||
| let addOus = [] | |||
| let removeOus = [] | |||
| let checkedNodes = this.ztreeObj.transformToArray(this.ztreeObj.getChangeCheckedNodes(true)); | |||
| for(let i=0;i<checkedNodes.length;i++){ | |||
| let node = checkedNodes[i]; | |||
| if(!addOus.includes(node.id) && !node.checkedOld && node.checked){ | |||
| addOus.push(node.id) | |||
| } | |||
| console.log(node.name+':'+node.checkedOld+':'+node.checked) | |||
| if(node.checkedOld && !node.checked){ | |||
| if(!removeOus.includes(node.id)){ | |||
| removeOus.push(node.id) | |||
| } | |||
| } | |||
| } | |||
| grantOusToApplicationRequest({applicationId:this.activeApp.id,addOus:addOus,removeOus:this.removeOus}).then((res)=>{ | |||
| }) | |||
| }, | |||
| grantApps(){ | |||
| let selectedAppIds = this.$refs.applicationSelection.getSelection(); | |||
| let appIds = []; | |||
| for(let i=0;i<selectedAppIds.length;i++){ | |||
| appIds.push(selectedAppIds[i].id); | |||
| } | |||
| let addAppIds = [] | |||
| switch (this.appToSubjectActiveTab1){ | |||
| case 'user': | |||
| for(let i=0;i<appIds.length;i++){ | |||
| let id = appIds[i]; | |||
| let index = this.userHasApplicationIds.indexOf(id); | |||
| if(index<0){ | |||
| addAppIds.push(id) | |||
| }else { | |||
| this.userHasApplicationIds.splice(index,1) | |||
| } | |||
| } | |||
| grantApplicationsToUserRequest({userId:this.appToSubjectActiveUser.id,addApplications:addAppIds,removeApplications:this.userHasApplicationIds}).then((res)=>{ | |||
| }); | |||
| break; | |||
| case 'group': | |||
| for(let i=0;i<appIds.length;i++){ | |||
| let id = appIds[i]; | |||
| let index = this.groupHasApplicationIds.indexOf(id); | |||
| if(index<0){ | |||
| addAppIds.push(id) | |||
| }else { | |||
| this.groupHasApplicationIds.splice(index,1) | |||
| } | |||
| } | |||
| grantApplicationsToGroupRequest({groupId:this.appToSubjectActiveGroup.id,addApplications:addAppIds,removeApplications:this.groupHasApplicationIds}).then((res)=>{ | |||
| }); | |||
| break; | |||
| case 'org': | |||
| for(let i=0;i<appIds.length;i++){ | |||
| let id = appIds[i]; | |||
| let index = this.ouHasApplicationIds.indexOf(id); | |||
| if(index<0){ | |||
| addAppIds.push(id) | |||
| }else { | |||
| this.ouHasApplicationIds.splice(index,1) | |||
| } | |||
| } | |||
| grantApplicationsToOuRequest({ouId:this.activeOuId,addApplications:addAppIds,removeApplications:this.ouHasApplicationIds}).then((res)=>{ | |||
| }); | |||
| break; | |||
| case 'classify': | |||
| for(let i=0;i<appIds.length;i++){ | |||
| let id = appIds[i]; | |||
| let index = this.classifyHasApplicationIds.indexOf(id); | |||
| if(index<0){ | |||
| addAppIds.push(id) | |||
| }else { | |||
| this.classifyHasApplicationIds.splice(index,1) | |||
| } | |||
| } | |||
| grantApplicationsToClassifyRequest({classifyId:this.appToSubjectActiveClassify.id,addApplications:addAppIds,removeApplications:this.groupHasApplicationIds}).then((res)=>{ | |||
| }); | |||
| break; | |||
| } | |||
| }, | |||
| switchTabs1(name){ | |||
| switch (name){ | |||
| case 'subjectToApp': | |||
| this.listApps(); | |||
| this.switchSubjectToAppTabs2(this.subjectToAppActiveTab2) | |||
| break; | |||
| case 'appToSubject': | |||
| this.switchAppToSubjectTabs1(this.appToSubjectActiveTab1) | |||
| this.switchAppToSubjectTabs2(this.appToSubjectActiveTab2) | |||
| } | |||
| }, | |||
| switchAppToSubjectTabs2(name){ | |||
| this.appToSubjectActiveTab2 = name | |||
| switch (name){ | |||
| case 'app': | |||
| this.listApps(); | |||
| break; | |||
| } | |||
| }, | |||
| switchAppToSubjectTabs1(name){ | |||
| this.appToSubjectActiveTab1 = name | |||
| switch (name){ | |||
| case 'user': | |||
| this.listUsers(); | |||
| break; | |||
| case 'group': | |||
| this.listGroups(); | |||
| break; | |||
| case 'classify': | |||
| this.listClassifies(); | |||
| case 'org': | |||
| this.loadOuTree(); | |||
| } | |||
| }, | |||
| switchSubjectToAppTab1(name){ | |||
| this.subjectToAppActiveTab1 = name | |||
| switch (name){ | |||
| case 'app': | |||
| this.listApps(); | |||
| break; | |||
| } | |||
| }, | |||
| switchSubjectToAppTabs2(name){ | |||
| this.subjectToAppActiveTab2 = name | |||
| switch (name){ | |||
| case 'user': | |||
| this.listUsers(); | |||
| break; | |||
| case 'group': | |||
| this.listGroups(); | |||
| break; | |||
| case 'classify': | |||
| this.listClassifies(); | |||
| break; | |||
| case 'org': | |||
| this.loadOuTree(); | |||
| break | |||
| } | |||
| }, | |||
| switchSubjectTabs1(name){ | |||
| this.subjectToAppActiveTab2 = name | |||
| switch (name){ | |||
| case 'user': | |||
| this.listUsers(); | |||
| break; | |||
| case 'group': | |||
| this.listGroups(); | |||
| break; | |||
| case 'classify': | |||
| this.listClassifies(); | |||
| case 'org': | |||
| this.loadOuTree(); | |||
| } | |||
| }, | |||
| clickApp(app){ | |||
| this.activeApp = app | |||
| if(this.type=='subjectToApp'){ | |||
| this.switchSubjectToAppTabs2(this.subjectToAppActiveTab2) | |||
| } | |||
| }, | |||
| clickUser(user){ | |||
| this.appToSubjectActiveUser = user | |||
| this.listApps() | |||
| }, | |||
| clickGroup(group){ | |||
| this.appToSubjectActiveGroup = group | |||
| this.listApps() | |||
| }, | |||
| clickClassify(classify){ | |||
| this.appToSubjectActiveClassify = classify | |||
| this.listApps() | |||
| }, | |||
| listApps(){ | |||
| applicationList({pageNow:this.pageNow,pageSize:this.pageSize}).then((res)=>{ | |||
| this.applicationPage = res | |||
| if(this.type=='subjectToApp'){ | |||
| this.activeApp = res.list[0] | |||
| }else { | |||
| let appIds = [] | |||
| for(let i=0;i<this.applicationPage.list.length;i++){ | |||
| appIds.push(this.applicationPage.list[i].id) | |||
| } | |||
| switch(this.appToSubjectActiveTab1){ | |||
| case "user": | |||
| listUserHasApplicationsRequest({userId:this.appToSubjectActiveUser.id,applicationIds:appIds}).then((res)=>{ | |||
| this.userHasApplicationIds = res | |||
| for(let i=0;i<this.applicationPage.list.length;i++){ | |||
| let row = this.applicationPage.list[i] | |||
| if(res.indexOf(row.id)>=0){ | |||
| row._checked=true | |||
| this.applicationPage.list.splice(i,1,row) | |||
| } | |||
| } | |||
| }); | |||
| break; | |||
| case 'group': | |||
| listGroupHasApplicationsRequest({groupId:this.appToSubjectActiveGroup.id,applicationIds:appIds}).then((res)=>{ | |||
| this.groupHasApplicationIds = res | |||
| for(let i=0;i<this.applicationPage.list.length;i++){ | |||
| let row = this.applicationPage.list[i] | |||
| if(res.indexOf(row.id)>=0){ | |||
| row._checked=true | |||
| this.applicationPage.list.splice(i,1,row) | |||
| } | |||
| } | |||
| }); | |||
| break; | |||
| case 'org': | |||
| listOuHasApplicationsRequest({ouId:this.activeOuId,applicationIds:appIds}).then((res)=>{ | |||
| this.ouHasApplicationIds = res | |||
| for(let i=0;i<this.applicationPage.list.length;i++){ | |||
| let row = this.applicationPage.list[i] | |||
| if(res.indexOf(row.id)>=0){ | |||
| row._checked=true | |||
| this.applicationPage.list.splice(i,1,row) | |||
| } | |||
| } | |||
| }); | |||
| break; | |||
| case 'classify': | |||
| listClassifyHasApplicationsRequest({classifyId:this.appToSubjectActiveClassify.id,applicationIds:appIds}).then((res)=>{ | |||
| this.classifyHasApplicationIds = res | |||
| for(let i=0;i<this.applicationPage.list.length;i++){ | |||
| let row = this.applicationPage.list[i] | |||
| if(res.indexOf(row.id)>=0){ | |||
| row._checked=true | |||
| this.applicationPage.list.splice(i,1,row) | |||
| } | |||
| } | |||
| }); | |||
| break; | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| listUsers(){ | |||
| listUsersSumaryRequest({pageNow:this.pageNow,pageSize:this.pageSize}).then((res)=>{ | |||
| this.userPage = res | |||
| let ls = this.userPage.list; | |||
| let userIds = [] | |||
| for(let i=0;i<ls.length;i++){ | |||
| userIds.push(ls[i].id) | |||
| } | |||
| if(this.type=='subjectToApp'){ | |||
| listApplicationHasUsersRequest({applicationId:this.activeApp.id,userIds:userIds}).then((res)=>{ | |||
| this.applicationHasUserIds = res | |||
| for(let i=0;i<res.length;i++){ | |||
| for(let j=0;j<this.userPage.list.length;j++){ | |||
| let row = this.userPage.list[j] | |||
| if(res[i]==row.id){ | |||
| row._checked=true | |||
| this.userPage.list.splice(j,1,row) | |||
| } | |||
| } | |||
| } | |||
| }) | |||
| }else { | |||
| this.appToSubjectActiveUser = this.userPage.list[0] | |||
| this.listApps() | |||
| } | |||
| }) | |||
| }, | |||
| listGroups(){ | |||
| listGroupRequest({pageNow:this.pageNow,pageSize:this.pageSize}).then((res)=>{ | |||
| this.groupPage = res | |||
| let ls = this.groupPage.list; | |||
| let groupIds = [] | |||
| for(let i=0;i<ls.length;i++){ | |||
| groupIds.push(ls[i].id) | |||
| } | |||
| if(this.type=='appToSubject' && this.appToSubjectActiveTab1 == 'group'){ | |||
| this.appToSubjectActiveGroup = this.groupPage.list[0] | |||
| this.listApps() | |||
| } | |||
| listApplicationHasGroupsRequest({applicationId:this.activeApp.id,groupIds:groupIds}).then((res)=>{ | |||
| this.applicationHasUserIds = res | |||
| for(let i=0;i<res.length;i++){ | |||
| for(let j=0;j<this.groupPage.list.length;j++){ | |||
| let row = this.groupPage.list[j] | |||
| if(res[i]==row.id){ | |||
| console.log("selected:"+row.id) | |||
| row._checked=true | |||
| this.groupPage.list.splice(j,1,row) | |||
| } | |||
| } | |||
| } | |||
| }) | |||
| }) | |||
| }, | |||
| listClassifies(){ | |||
| listClassifyRequest({pageNow:this.pageNow,pageSize:this.pageSize}).then((res)=>{ | |||
| this.classifyPage = res | |||
| let ls = this.classifyPage.list; | |||
| let classifies = [] | |||
| for(let i=0;i<ls.length;i++){ | |||
| classifies.push(ls[i].id) | |||
| } | |||
| if(this.type=='appToSubject' && this.appToSubjectActiveTab1 == 'classify'){ | |||
| this.appToSubjectActiveClassify = this.classifyPage.list[0] | |||
| this.listApps() | |||
| } | |||
| if(this.type=='subjectToApp' && this.subjectToAppActiveTab2 == 'classify'){ | |||
| listApplicationHasClassifiesRequest({applicationId:this.activeApp.id,classifies:classifies}).then((res)=>{ | |||
| this.applicationHasClassifies = res | |||
| for(let i=0;i<res.length;i++){ | |||
| for(let j=0;j<this.classifyPage.list.length;j++){ | |||
| let row = this.classifyPage.list[j] | |||
| if(res[i]==row.id){ | |||
| row._checked=true | |||
| this.classifyPage.list.splice(j,1,row) | |||
| } | |||
| } | |||
| } | |||
| }) | |||
| } | |||
| }) | |||
| }, | |||
| handleCreated(ztreeObj) { | |||
| this.ztreeObj = ztreeObj; | |||
| let _this = this; | |||
| setTimeout(function (){ | |||
| let firstTree = ztreeObj.getNodes()[0]; | |||
| if(firstTree){ | |||
| // 默认选中第一个 | |||
| ztreeObj.selectNode(firstTree); | |||
| // 设置节点全部展开 | |||
| // ztreeObj.expandAll(true); | |||
| //加载完自动点击第一个,加载右边表格 | |||
| _this.setting.callback.onClick(null, firstTree.id, firstTree) | |||
| } | |||
| },300) | |||
| }, | |||
| handleCreated2(ztreeObj) { | |||
| this.ztreeObj2 = ztreeObj; | |||
| let _this = this; | |||
| setTimeout(function (){ | |||
| let firstTree = ztreeObj.getNodes()[0]; | |||
| if(firstTree){ | |||
| // 默认选中第一个 | |||
| ztreeObj.selectNode(firstTree); | |||
| // 设置节点全部展开 | |||
| // ztreeObj.expandAll(true); | |||
| //加载完自动点击第一个,加载右边表格 | |||
| _this.setting2.callback.onClick(null, firstTree.id, firstTree) | |||
| } | |||
| },300) | |||
| }, | |||
| clickOuNode(event, treeId, treeNode){ | |||
| this.activeOuId = treeNode.id | |||
| if(this.type=='appToSubject'){ | |||
| this.listApps() | |||
| } | |||
| }, | |||
| showIconForTree(treeId, treeNode) { | |||
| return treeNode.iconOpen && treeNode.iconClose; | |||
| }, | |||
| treeDataFilter(treeId, parentNode, responseData){ | |||
| if(responseData){ | |||
| let ouIds = [] | |||
| for(let i=0;i<responseData.length;i++){ | |||
| ouIds.push(responseData[i].id) | |||
| } | |||
| for(let i=0;i<responseData.length;i++){ | |||
| if(this.type=='subjectToApp'){ | |||
| listApplicationHasOusRequest({"applicationId":this.activeApp.id,ouIds:ouIds}).then((res)=>{ | |||
| for(let j=0;j< res.length;j++){ | |||
| let nodes = this.ztreeObj.getNodesByParam('id',res[j], false,parentNode); | |||
| if(nodes.length>0){ | |||
| this.ztreeObj.checkNode(nodes[0],true,true) | |||
| } | |||
| if(res[j].indexOf(responseData[i].id)>=0){ | |||
| responseData[i].checked = true | |||
| } | |||
| } | |||
| }) | |||
| } | |||
| } | |||
| } | |||
| return responseData; | |||
| }, | |||
| loadOuTree() { | |||
| getOrgRootRequest().then((res) => { | |||
| let async = { | |||
| enable: true, | |||
| url: "http://a.demo.com/organization/children", | |||
| autoParam: ["id"], | |||
| type: 'GET', | |||
| dataType: "json", | |||
| dataFilter: this.treeDataFilter | |||
| } | |||
| if(this.type=='subjectToApp'){ | |||
| this.setting.async = async | |||
| }else { | |||
| this.setting2.async = async | |||
| } | |||
| this.nodes = [] | |||
| res.nocheck = true | |||
| res.root = true | |||
| res.open = true | |||
| res.icon = "http://www.treejs.cn/v3/css/zTreeStyle/img/diy/1_open.png" | |||
| res.iconOpen = "http://www.treejs.cn/v3/css/zTreeStyle/img/diy/1_open.png" | |||
| res.iconClose = "http://www.treejs.cn/v3/css/zTreeStyle/img/diy/1_open.png" | |||
| this.nodes.push(res) | |||
| // let rootExternalId = res.externalId; | |||
| getOrgChildrenRequest(res.id).then((children) => { | |||
| let ouIds = [] | |||
| for (let i = 0; i < children.length; i++) { | |||
| ouIds.push(children[i].id) | |||
| } | |||
| for (let i = 0; i < children.length; i++) { | |||
| let item = children[i]; | |||
| if (item.parent == true) { | |||
| item.isParent = true | |||
| } | |||
| let checkedNodes = [] | |||
| if(this.type=='subjectToApp'){ | |||
| listApplicationHasOusRequest({"applicationId":this.activeApp.id,ouIds:ouIds}).then((res)=>{ | |||
| checkedNodes = res | |||
| for(let j=0;j< checkedNodes.length;j++){ | |||
| if(checkedNodes[j].indexOf(item.id)>=0){ | |||
| item.checked = true | |||
| } | |||
| } | |||
| this.nodes.push(item) | |||
| }) | |||
| }else { | |||
| this.nodes.push(item) | |||
| } | |||
| } | |||
| }).catch(function (error) { | |||
| }); | |||
| }).catch(function (error) { | |||
| }) | |||
| }, | |||
| remove (index) { | |||
| this.articlePage.list.splice(index, 1) | |||
| }, | |||
| handleSubmit (name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(this.formValidate.pathName) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh () { | |||
| }, | |||
| toPage(page){ | |||
| console.log("page:"+page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| }, | |||
| changePageSize(pageSize){ | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| } | |||
| }, | |||
| mounted () { | |||
| this.contentType = this.$route.query.contentType; | |||
| this.switchTabs1(this.type) | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .demo-split{ | |||
| height: 600px; | |||
| border: 1px solid #dcdee2; | |||
| } | |||
| .demo-split-pane{ | |||
| padding: 10px; | |||
| } | |||
| </style> | |||
| @@ -1,413 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">分类管理</p> | |||
| <Alert show-icon> | |||
| 分类管理 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| 分类管理是基于ABAC(Attribute-Based Access | |||
| Control,基于属性的权限验证)的权限模型,将账户的属性通过配置索引进行自动归类,用于应用的授权。当账户属性发生变动时分类中的成员也将自动发生变化。 | |||
| </template> | |||
| </Alert> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search-left-tools"> | |||
| <Button type="primary" @click="addClassify">添加分类</Button> | |||
| </div> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入分类名称"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="classifyPage.list"> | |||
| <div slot-scope="{row,index}" slot="action"> | |||
| <Button type="text" size="small" @click="onEditClassify(row,index)">修改</Button> | |||
| <Button type="text" size="small" @click="showClassifyDetail(row,index)">查看详情</Button> | |||
| <Button type="text" size="small" @click="showClassifyUsers(row,index)">查看成员</Button> | |||
| <Button type="text" size="small" @click="onDeleteClassify(row,index)">删除</Button> | |||
| </div> | |||
| </Table> | |||
| <Page class="page" :total="classifyPage.totalRecords" show-total show-sizer show-elevator/> | |||
| <Drawer title="添加分类" v-model="addClassifyModelValue" width="50%" :mask-closable="false" class="orgDrawer"> | |||
| <Form ref="createClassifyFormValidate" :rules="createClassifyRuleValidate" :model="addClassifyForm" :label-width="80" | |||
| label-position="left"> | |||
| <FormItem label="分类名称"> | |||
| <Input v-model="addClassifyForm.name" placeholder="请输入应用分类名称"></Input> | |||
| </FormItem> | |||
| <FormItem label="数据字典"> | |||
| <Select v-model="addClassifyForm.dicName" placeholder="请选择"> | |||
| <Option :value="item.value" v-for="item in userDics">{{ item.name }}</Option> | |||
| </Select> | |||
| <p class="help-block">分类关联匹配的数据字典名</p> | |||
| </FormItem> | |||
| <FormItem label="匹配值"> | |||
| <Input v-model="addClassifyForm.value" placeholder="请填写匹配值"></Input> | |||
| <p class="help-block">数据字典值匹配值</p> | |||
| </FormItem> | |||
| <FormItem> | |||
| <Button type="primary" @click="saveClassify('createClassifyFormValidate')">提交</Button> | |||
| <Button style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </Drawer> | |||
| <Drawer title="添加分类" v-model="editClassifyModelValue" width="50%" :mask-closable="false" class="orgDrawer"> | |||
| <Form ref="updateClassifyFormValidate" :rules="updateClassifyRuleValidate" :model="editClassifyForm" :label-width="80" | |||
| label-position="left"> | |||
| <FormItem label="分类名称"> | |||
| <Input v-model="editClassifyForm.name" placeholder="请输入应用分类名称"></Input> | |||
| </FormItem> | |||
| <FormItem label="数据字典"> | |||
| <Select v-model="editClassifyForm.dicName" placeholder="请选择"> | |||
| <Option :value="item.value" v-for="item in userDics">{{ item.name }}</Option> | |||
| </Select> | |||
| <p class="help-block">分类关联匹配的数据字典名</p> | |||
| </FormItem> | |||
| <FormItem label="匹配值"> | |||
| <Input v-model="editClassifyForm.value" placeholder="请填写匹配值"></Input> | |||
| <p class="help-block">数据字典值匹配值</p> | |||
| </FormItem> | |||
| <FormItem> | |||
| <Button type="primary" @click="updateClassify('updateClassifyFormValidate')">提交</Button> | |||
| <Button style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </Drawer> | |||
| <Drawer title="分类详情" v-model="classifyDetailModelValue" width="50%" :mask-closable="false" class="orgDrawer"> | |||
| <Form ref="updateClassifyFormValidate" :rules="updateClassifyRuleValidate" :model="editClassifyForm" :label-width="160" | |||
| label-position="left"> | |||
| <FormItem label="分类名称"> | |||
| {{classifyDetail.name}} | |||
| </FormItem> | |||
| <!-- <FormItem label="账户分类范围"> | |||
| {{classifyDetail.name}} | |||
| </FormItem>--> | |||
| <FormItem label="数据字典字段"> | |||
| {{classifyDetail.dicName}} | |||
| </FormItem> | |||
| <FormItem label="匹配值"> | |||
| {{classifyDetail.value}} | |||
| </FormItem> | |||
| <FormItem label="创建人"> | |||
| {{classifyDetail.creator}} | |||
| </FormItem> | |||
| <FormItem label="创建时间"> | |||
| {{classifyDetail.createTime}} | |||
| </FormItem> | |||
| </Form> | |||
| </Drawer> | |||
| <Drawer title="分类成员[]" v-model="classifyUsersModelValue" width="50%" :mask-closable="false" class="orgDrawer"> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入账户名称"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table :columns="userColumns" :data="userPage.list"> | |||
| </Table> | |||
| <Page class="page" :total="userPage.totalRecords" show-total show-sizer show-elevator/> | |||
| </Drawer> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import { | |||
| classifyDetailRequest, | |||
| createClassifyRequest, deleteClassify, | |||
| listClassifyRequest, listClassifyUsersRequest, | |||
| listDictionaryRequest, | |||
| updateClassifyRequest | |||
| } from '@/api/data' | |||
| import {shallowCopy} from "@/libs/util"; | |||
| export default { | |||
| name: 'articleList', | |||
| props: {}, | |||
| components: {}, | |||
| data() { | |||
| return { | |||
| addClassifyModelValue: false, | |||
| editClassifyModelValue: false, | |||
| classifyUsersModelValue: false, | |||
| classifyDetailModelValue: false, | |||
| classifyDetail:{}, | |||
| addClassifyForm:{ | |||
| name:'', | |||
| dicName:'', | |||
| value:'' | |||
| }, | |||
| editClassifyForm:{ | |||
| id:'', | |||
| name:'', | |||
| dicName:'', | |||
| value:'' | |||
| }, | |||
| contentType: '', | |||
| pageSizeOpts: [10, 20, 30, 40, 50, 100], | |||
| loading: true, | |||
| pageNow: 1, | |||
| pageSize: 50, | |||
| classifyPage: {}, | |||
| userPage: {}, | |||
| defaultList: [], | |||
| imgName: '', | |||
| dirname: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| articleColumns: [ | |||
| { | |||
| type: 'selection', | |||
| width: 60, | |||
| align: 'center', | |||
| fixed: 'left' | |||
| }, | |||
| { | |||
| title: '分类名称', | |||
| align: 'left', | |||
| key: 'name' | |||
| }, | |||
| /*{ | |||
| title: '账户分类范围', | |||
| align: 'center', | |||
| key: 'size' | |||
| },*/ | |||
| { | |||
| title: '数据字典字段', | |||
| align: 'center', | |||
| key: 'dicName' | |||
| }, | |||
| { | |||
| title: '匹配值', | |||
| align: 'center', | |||
| key: 'value', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '创建者', | |||
| align: 'center', | |||
| key: 'updateTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '创建时间', | |||
| align: 'center', | |||
| key: 'updateTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'left', | |||
| width: 250, | |||
| slot: 'action', | |||
| fixed: 'right' | |||
| } | |||
| ], | |||
| userColumns: [ | |||
| { | |||
| title: '账户名称 ', | |||
| align: 'left', | |||
| key: 'username' | |||
| }, | |||
| { | |||
| title: '显示名称 ', | |||
| align: 'center', | |||
| key: 'displayName' | |||
| }, | |||
| { | |||
| title: '邮箱', | |||
| align: 'center', | |||
| key: 'email' | |||
| }, | |||
| { | |||
| title: '电话', | |||
| align: 'center', | |||
| key: 'phoneNumber' | |||
| }, | |||
| { | |||
| title: '账户目录', | |||
| align: 'center', | |||
| key: 'ouDirectory' | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| name: '' | |||
| }, | |||
| createClassifyRuleValidate: { | |||
| name: [ | |||
| {required: true, message: '名称不能为空', trigger: 'blur'} | |||
| ] | |||
| }, | |||
| updateClassifyRuleValidate: { | |||
| name: [ | |||
| {required: true, message: '名称不能为空', trigger: 'blur'} | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| }, | |||
| userDics:[] | |||
| } | |||
| }, | |||
| methods: { | |||
| showClassifyUsers(row,index){ | |||
| listClassifyUsersRequest({pageNow: this.pageNow, pageSize: this.pageSize,dicName:row.dicName,value:row.value}).then((res)=>{ | |||
| this.userPage = res | |||
| }).catch(function (error){ | |||
| }) | |||
| this.classifyUsersModelValue = true | |||
| }, | |||
| showClassifyDetail(row,index){ | |||
| classifyDetailRequest(row.id).then((res)=>{ | |||
| this.classifyDetail = res | |||
| }).catch(function (error){ | |||
| }) | |||
| this.classifyDetailModelValue = true | |||
| }, | |||
| onEditClassify(row,index){ | |||
| listDictionaryRequest({"customType":"user"}).then((res)=>{ | |||
| this.userDics = res | |||
| }).then(function (error){ | |||
| }) | |||
| shallowCopy(this.editClassifyForm,row) | |||
| this.editClassifyModelValue = true | |||
| }, | |||
| onDeleteClassify(row,index){ | |||
| deleteClassify(row.id).then((res)=>{ | |||
| }).catch(function (error){ | |||
| }) | |||
| }, | |||
| addClassify(){ | |||
| listDictionaryRequest({"customType":"user"}).then((res)=>{ | |||
| this.userDics = res | |||
| }).then(function (error){ | |||
| }) | |||
| this.addClassifyModelValue = true | |||
| }, | |||
| saveClassify(name){ | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(JSON.stringify(this.addClassifyForm)) | |||
| createClassifyRequest(this.addClassifyForm).then((res)=>{ | |||
| this.$Message.success('Success!') | |||
| }).catch(function (error){ | |||
| }) | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| remove(index) { | |||
| this.classifyPage.list.splice(index, 1) | |||
| }, | |||
| updateClassify(name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(this.formValidate.pathName) | |||
| updateClassifyRequest(this.editClassifyForm).then((res)=>{ | |||
| }).catch(function (error){ | |||
| }) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh() { | |||
| this.listArticles({pageNow: this.pageNow, pageSize: this.pageSize}); | |||
| }, | |||
| listArticles() { | |||
| var _this = this; | |||
| listClassifyRequest({pageNow: this.pageNow, pageSize: this.pageSize}).then((res) => { | |||
| _this.loading = false | |||
| this.classifyPage = res | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page) { | |||
| console.log("page:" + page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listArticles(); | |||
| }, | |||
| changePageSize(pageSize) { | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listArticles(); | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.contentType = this.$route.query.contentType; | |||
| this.listArticles(); | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .search-box { | |||
| position: relative; | |||
| width: 100%; | |||
| display: -webkit-flex; | |||
| -webkit-box-orient: horizontal; | |||
| -webkit-box-direction: normal; | |||
| -ms-flex-direction: row; | |||
| flex-direction: row; | |||
| -webkit-box-align: center; | |||
| -ms-flex-align: center; | |||
| align-items: center; | |||
| margin-bottom: 15px | |||
| } | |||
| .search-box .search-left-box { | |||
| width: 50%; | |||
| display: -webkit-box; | |||
| display: -ms-flexbox; | |||
| display: flex | |||
| } | |||
| .search-box .search-left-tools { | |||
| display: inline-block; | |||
| margin-right: 5px | |||
| } | |||
| .search-box .total { | |||
| position: absolute; | |||
| right: 0; | |||
| font-weight: 700 | |||
| } | |||
| .search-box .total .icon { | |||
| font-size: 20px; | |||
| font-weight: 800; | |||
| color: #199be6 | |||
| } | |||
| .search-box .search-right-tools { | |||
| text-align: right | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,87 @@ | |||
| <template> | |||
| <el-main style="width: 960px;margin: 0 auto;min-height: 500px"> | |||
| <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 10px"> | |||
| <el-breadcrumb-item class="location">您的位置:</el-breadcrumb-item> | |||
| <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> | |||
| <el-breadcrumb-item>联系我们</el-breadcrumb-item> | |||
| </el-breadcrumb> | |||
| <el-card shadow="never"> | |||
| <div style="position: relative;height: 300px;background-image: url('//lanhu.oss-cn-beijing.aliyuncs.com/psypeyni6i2bq87kufm4f23sv1r4w1me3fr24f4808a-e948-44b6-b20b-2c110e913849');background-repeat: no-repeat;background-size: 100% 100%"> | |||
| <div style="font-weight: 1000;font-size: 48px;color: #fff;margin: 0 auto;text-align: center;"> | |||
| <div style="padding-top: 100px;">联系我们</div> | |||
| <div style="height: 4px;background: #fff;width: 70px;margin: 10px auto"></div> | |||
| </div> | |||
| </div> | |||
| <el-row class="connect-info"> | |||
| <el-col span="6"> | |||
| <div class="connect-title">办公室联系人</div> | |||
| <div class="line"></div> | |||
| <div>联系人:毛彩虹</div> | |||
| <div>电话:50805271</div> | |||
| <div>电子邮件:contact@sica.org.cn</div> | |||
| </el-col> | |||
| <el-col span="6"> | |||
| <div class="connect-title">企业服务部联系人</div> | |||
| <div class="line"></div> | |||
| <div>联系人:石建宾</div> | |||
| <div>电话:50809814</div> | |||
| <div>电子邮件:contact@sica.org.cn</div> | |||
| </el-col> | |||
| <el-col span="6"> | |||
| <div class="connect-title">合作交流部联系人</div> | |||
| <div class="line"></div> | |||
| <div>联系人:宋海燕</div> | |||
| <div>电话:50805269</div> | |||
| <div>电子邮件:contact@sica.org.cn</div> | |||
| </el-col> | |||
| <el-col span="6"> | |||
| <div class="connect-title">政策研究部联系人</div> | |||
| <div class="line"></div> | |||
| <div>联系人:刘林发</div> | |||
| <div>电话:50800657</div> | |||
| <div>电子邮件:contact@sica.org.cn</div> | |||
| </el-col> | |||
| </el-row> | |||
| <div class="connect"> | |||
| <img src="//lanhu.oss-cn-beijing.aliyuncs.com/ps7hnun1mrhul8ty6q6fpda49g6zj0hv51rafc26613-869f-4151-bc0f-0402aa34505f"/> | |||
| </div> | |||
| </el-card> | |||
| </el-main> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return {} | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .connect{ | |||
| text-align: center; | |||
| display: table-cell; | |||
| width: 960px; | |||
| } | |||
| .connect img{ | |||
| text-align: center; | |||
| margin: 20px auto; | |||
| } | |||
| .connect-info div{ | |||
| margin: 10px 0; | |||
| } | |||
| .connect-info .el-col{ | |||
| border-right: 1px solid #eee; | |||
| padding-left: 20px; | |||
| } | |||
| .connect-info .el-col:last-child{ | |||
| border-right: none; | |||
| } | |||
| .connect-info .line{ | |||
| width: 30px; | |||
| height: 2px; | |||
| background: #333; | |||
| } | |||
| .connect-info .connect-title{ | |||
| font-weight: 500; | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,59 @@ | |||
| <template> | |||
| <el-main style="width: 960px;margin: 0 auto;min-height: 500px"> | |||
| <el-row class="card_menu"> | |||
| <el-col :span="4"> | |||
| <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}"> | |||
| <div slot="header"> | |||
| <span>合作交流</span> | |||
| </div> | |||
| <div class="menu-item"><router-link to="/vip-service">年度活动一览表</router-link></div> | |||
| <div class="menu-item">活动新闻</div> | |||
| <div class="menu-item active">活动预告</div> | |||
| </el-card> | |||
| </el-col> | |||
| <el-col :span="20"> | |||
| <el-card shadow="never" style="margin: 0 10px;"> | |||
| <h2 style="text-align: center">活动预告</h2> | |||
| <ul style="list-style: none" class="exchange-list"> | |||
| <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0;height: 120px" v-for="(item,index) in 10"> | |||
| <img style="float: left;width: 100px;height: 100px;border-radius: 8px" src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png"/> | |||
| <div style="margin-left: 120px;"> | |||
| <h3 style="color:#333333;">上海市经济信息化委关于开展申报2020年度上海市软件和集成电路企业核心团队...</h3> | |||
| <p style="color: #999">根据《关于本市进一步鼓励软件产业和集成电路产业发展的若干政策》(沪府发〔2017〕23号)和《上海 市软件和集成电路企业设计人</p> | |||
| </div> | |||
| </li> | |||
| </ul> | |||
| <el-pagination | |||
| background | |||
| layout="prev, pager, next" | |||
| :total="1000" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px"> | |||
| </el-pagination> | |||
| </el-card> | |||
| </el-col> | |||
| </el-row> | |||
| </el-main> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data () { | |||
| return { | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .menu-item{ | |||
| text-align: center; | |||
| padding: 10px; | |||
| width: 100%; | |||
| } | |||
| .card_menu .menu-item.active{ | |||
| border-left: 2px solid #427FCE; | |||
| background: #eee; | |||
| } | |||
| ul.exchange-list li::after{ | |||
| clear: both; | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,101 @@ | |||
| <template> | |||
| <el-main style="width: 960px;margin: 0 auto;min-height: 500px"> | |||
| <el-row class="card_menu"> | |||
| <el-col :span="4"> | |||
| <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}"> | |||
| <div slot="header"> | |||
| <span>知识产权与标准化</span> | |||
| </div> | |||
| <div class="menu-item active">标准化创新基地介绍</div> | |||
| <div class="menu-item">协会团标</div> | |||
| <div class="menu-item">申请编写团标</div> | |||
| </el-card> | |||
| </el-col> | |||
| <el-col :span="20"> | |||
| <el-card shadow="never" style="margin: 0 10px;"> | |||
| <h2 style="text-align: center;color: #333"> | |||
| <span>协会团标</span> | |||
| </h2> | |||
| <el-row> | |||
| <el-col :span="6"> | |||
| <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px' }"> | |||
| <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/> | |||
| <p style="color: #333">国家鼓励的集成电路企业认定 实施细则企业认定</p> | |||
| </el-card> | |||
| </el-col> | |||
| <el-col :span="6"> | |||
| <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px' }"> | |||
| <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/> | |||
| <p style="color: #333">上海市集成电路行业协会简介</p> | |||
| </el-card> | |||
| </el-col> | |||
| <el-col :span="6"> | |||
| <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px' }"> | |||
| <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/> | |||
| <p style="color: #333">上海市集成电路行业协会简介</p> | |||
| </el-card> | |||
| </el-col> | |||
| <el-col :span="6"> | |||
| <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px'}"> | |||
| <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/> | |||
| <p style="color: #333">上海市集成电路行业协会简介</p> | |||
| </el-card> | |||
| </el-col> | |||
| </el-row> | |||
| <el-row> | |||
| <el-col :span="6"> | |||
| <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px' }"> | |||
| <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/> | |||
| <p style="color: #333">国家鼓励的集成电路企业认定 实施细则企业认定</p> | |||
| </el-card> | |||
| </el-col> | |||
| <el-col :span="6"> | |||
| <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px' }"> | |||
| <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/> | |||
| <p style="color: #333">上海市集成电路行业协会简介</p> | |||
| </el-card> | |||
| </el-col> | |||
| <el-col :span="6"> | |||
| <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px'}"> | |||
| <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/> | |||
| <p style="color: #333">上海市集成电路行业协会简介</p> | |||
| </el-card> | |||
| </el-col> | |||
| <el-col :span="6"> | |||
| <el-card class="box-card" shadow="never" style="margin: 0 10px" :body-style="{ padding: '0px'}"> | |||
| <img src="../assets/img/ps33zrxsxe75je6fyz0ieqako59448zdwo2b864170-7f1e-4bcb-9a87-f19996c6d605.png" style="border-radius: 10px;margin: 10px 0" width="100%"/> | |||
| <p style="color: #333">上海市集成电路行业协会简介</p> | |||
| </el-card> | |||
| </el-col> | |||
| </el-row> | |||
| </el-card> | |||
| </el-col> | |||
| </el-row> | |||
| </el-main> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data () { | |||
| return { | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .menu-item{ | |||
| text-align: center; | |||
| padding: 10px; | |||
| width: 100%; | |||
| } | |||
| .card_menu .menu-item.active{ | |||
| border-left: 2px solid #427FCE; | |||
| background: #eee; | |||
| } | |||
| </style> | |||
| @@ -1,16 +1,17 @@ | |||
| <template> | |||
| <el-container> | |||
| <el-header class="header linear"> | |||
| <el-menu :default-active="activeIndex" mode="horizontal" style="width: 960px;text-align: center;margin: 0 auto;border: none;background: transparent;overflow: visible"> | |||
| <el-menu-item index="1">首页</el-menu-item> | |||
| <el-menu-item index="2"><a href="/about">关于我们</a></el-menu-item> | |||
| <el-menu-item index="3">协会会员</el-menu-item> | |||
| <el-menu :default-active="activeIndex" mode="horizontal" style="position: relative;padding-left: 100px;width: 960px;text-align: center;margin: 0 auto;border: none;background: transparent;overflow: visible"> | |||
| <div class="logo"><router-link to="/overview">logo</router-link></div> | |||
| <el-menu-item index="1"><router-link to="/overview">首页</router-link></el-menu-item> | |||
| <el-menu-item index="2"><router-link to="/about">关于我们</router-link></el-menu-item> | |||
| <el-menu-item index="3"><router-link to="/vip">协会会员</router-link></el-menu-item> | |||
| <el-menu-item index="4">企业认定</el-menu-item> | |||
| <el-menu-item index="5">新闻资讯</el-menu-item> | |||
| <el-menu-item index="6">产业政策</el-menu-item> | |||
| <el-menu-item index="7">行业动态</el-menu-item> | |||
| <el-menu-item index="8">合作交流</el-menu-item> | |||
| <el-menu-item index="9">知识产权</el-menu-item> | |||
| <el-menu-item index="9"><router-link to="/km">知识产权</router-link></el-menu-item> | |||
| <el-menu-item index="10">会员产品</el-menu-item> | |||
| <el-menu-item index="11">人力资源</el-menu-item> | |||
| <el-menu-item index="12">数据上报</el-menu-item> | |||
| @@ -295,12 +296,35 @@ body{ | |||
| .linear{ | |||
| background-image: linear-gradient(to right,#42A8CE, #427FCE); | |||
| } | |||
| .text-linear{ | |||
| font-size: 20px; | |||
| background-image: -webkit-linear-gradient(right,#42A8CE, #427FCE)!important; | |||
| background-image: linear-gradient(to right,#42A8CE, #427FCE)!important; | |||
| -webkit-background-clip:text!important; | |||
| color: transparent!important; | |||
| border: 2px solid #42A8CE !important; | |||
| font-weight: 900!important; | |||
| letter-spacing: 3px; | |||
| } | |||
| .card_style1 .el-card__header,.card_menu .el-card__header{ | |||
| background-image: linear-gradient(to right,#42A8CE, #427FCE); | |||
| color: #fff; | |||
| font-weight: 700; | |||
| padding: 9px 10px !important; | |||
| } | |||
| .el-pager .active,.el-table__header thead,.el-button--primary{ | |||
| background-image: linear-gradient(to right,#42A8CE, #427FCE) !important; | |||
| } | |||
| .el-table__header thead{ | |||
| color: #fff !important; | |||
| } | |||
| .el-table th.el-table__cell,.el-table .el-table__header tr{ | |||
| background: transparent !important; | |||
| } | |||
| .el-table__header > tr,.el-table__header > th{ | |||
| background: transparent !important; | |||
| } | |||
| .card_menu .box-card{ | |||
| background: #F5F5F5; | |||
| } | |||
| @@ -380,7 +404,11 @@ body{ | |||
| } | |||
| .el-pager, | |||
| .el-pagination.is-background .btn-next, | |||
| .el-pagination.is-background .btn-prev { | |||
| padding:0px 5px !important; | |||
| } | |||
| @@ -400,5 +428,19 @@ body{ | |||
| .el-carousel__item:nth-child(2n+1) { | |||
| background-color: #d3dce6; | |||
| } | |||
| .logo{ | |||
| font-size: 20px; | |||
| font-weight: 900; | |||
| position: absolute; | |||
| margin-right: 100px; | |||
| left: 0; | |||
| top: 0; | |||
| text-align: center; | |||
| line-height: 50px; | |||
| width: 100px; | |||
| } | |||
| .logo a,.logo a:hover{ | |||
| color: #fff; | |||
| } | |||
| </style> | |||
| @@ -1,284 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">权限资源管理</p> | |||
| <Alert show-icon> | |||
| 权限资源管理 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| </template> | |||
| </Alert> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search-left-tools"> | |||
| <Button type="primary" @click="addPermissionModel = !addPermissionModel">添加权限</Button> | |||
| </div> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入权限名称"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table stripe :columns="appColumns" :data="permissionPage.list"> | |||
| <template slot-scope="{row,index}" slot="opt"> | |||
| <Button type="text" @click="onAddPermission(row)">新增权限资源</Button> | |||
| <Button type="text" @click="onEditPermission(row)">编辑</Button> | |||
| <Button type="text" @click="onDeletePermission(row,index)">删除</Button> | |||
| </template> | |||
| </Table> | |||
| <Page class="page" :total="permissionPage.totalRecords" show-total show-sizer show-elevator/> | |||
| <Drawer title="新增权限资源" v-model="addPermissionModel" :mask-closable="false" class="drawer" width="50%"> | |||
| <Form ref="formValidate" :rules="ruleValidate" :model="formValidate" :label-width="80" label-position="right"> | |||
| <FormItem label="上级"> | |||
| <span>{{formValidate.path}}</span> | |||
| <p class="help-block"></p> | |||
| </FormItem> | |||
| <FormItem prop="code" label="权限值"> | |||
| <Input v-model="formValidate.code" placeholder="权限值"></Input> | |||
| <p class="help-block">权限值是权限在当前权限系统中的唯一标识,第三方系统可以根据权限值来区分权限,仅支持英文、数字、下划线 </p> | |||
| </FormItem> | |||
| <FormItem prop="name" label="权限名称"> | |||
| <Input v-model="formValidate.name" placeholder="系统名称"></Input> | |||
| <p class="help-block"></p> | |||
| </FormItem> | |||
| <FormItem prop="displayOrder" label="显示顺序"> | |||
| <Input type="number" v-model="formValidate.displayOrder" :required="true" placeholder="显示顺序"></Input> | |||
| <p class="help-block">请填写整数数字,越小的数字越靠前</p> | |||
| </FormItem> | |||
| <FormItem prop="type" label="权限类型"> | |||
| <RadioGroup v-model="formValidate.type"> | |||
| <Radio label="菜单" border true-value="MENU" false-value=""></Radio> | |||
| <Radio label="按钮" border true-value="BUTTON" false-value=""></Radio> | |||
| <Radio label="API" border true-value="API" false-value=""></Radio> | |||
| <Radio label="数据" border true-value="DATA" false-value=""></Radio> | |||
| <Radio label="其它" border true-value="OTHER" false-value=""></Radio> | |||
| </RadioGroup> | |||
| <p class="help-block"></p> | |||
| </FormItem> | |||
| <FormItem prop="remark" label="描述"> | |||
| <Input type="textarea" v-model="formValidate.remark" :required="true" placeholder="描述"></Input> | |||
| <p class="help-block"></p> | |||
| </FormItem> | |||
| <FormItem> | |||
| <Button type="primary" @click="handleSubmit('formValidate')">提交</Button> | |||
| <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </Drawer> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {getPermissionPage,createPermission,updatePermission,deletePermission} from '@/api/data' | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {}, | |||
| data() { | |||
| return { | |||
| enabled:false, | |||
| psId:'', | |||
| icon:'md-arrow-dropdown', | |||
| addPermissionModel: false, | |||
| pageSizeOpts: [10, 20, 30, 40, 50, 100], | |||
| loading: true, | |||
| pageNow: 1, | |||
| pageSize: 50, | |||
| permissionPage: {}, | |||
| defaultList: [], | |||
| dirname: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| appColumns: [ | |||
| { | |||
| title: '路经', | |||
| align: 'left', | |||
| key: 'path' | |||
| }, | |||
| { | |||
| title: '权限', | |||
| align: 'left', | |||
| key: 'code' | |||
| }, | |||
| { | |||
| title: '权限名称', | |||
| align: 'left', | |||
| key: 'name' | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'center', | |||
| slot:'opt' | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| name: '', | |||
| code: '', | |||
| type: '菜单', | |||
| path:'/', | |||
| parentId:'' | |||
| }, | |||
| ruleValidate: { | |||
| name: [ | |||
| {required: true, message: '权限名称不能为空', trigger: 'blur'} | |||
| ], | |||
| code: [ | |||
| {required: true, message: '权限值不能为空', trigger: 'blur'} | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| onAddPermission(row){ | |||
| this.formValidate = this.$options.data().formValidate | |||
| this.formValidate.parentId = row.id | |||
| this.formValidate.path = (row.path=='/'? '':row.path) + '/'+row.name | |||
| this.formValidate.enabled = ''+row.enabled | |||
| this.addPermissionModel = true; | |||
| }, | |||
| onEditPermission(row){ | |||
| this.formValidate = this.$options.data().formValidate | |||
| this.formValidate = row; | |||
| this.formValidate.enabled = ''+row.enabled | |||
| this.addPermissionModel = true; | |||
| }, | |||
| onDeletePermission(row,index){ | |||
| deletePermission({"psId":row.psId,"permissionId":row.id}).then((res)=>{ | |||
| this.remove(index); | |||
| }).catch(function (error){ | |||
| }); | |||
| }, | |||
| remove(index) { | |||
| this.permissionPage.list.splice(index, 1) | |||
| }, | |||
| handleSubmit(name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| this.formValidate.psId=this.psId | |||
| if(this.formValidate.id){ | |||
| updatePermission(this.formValidate).then((res)=>{ | |||
| this.$Message.success('Success!') | |||
| this.addPermissionModel = false | |||
| }).catch(function (error){ | |||
| this.$Message.error('Fail!') | |||
| }); | |||
| }else { | |||
| createPermission(this.formValidate).then((res)=>{ | |||
| this.$Message.success('Success!') | |||
| this.addPermissionModel = false | |||
| this.listApplications(); | |||
| }).catch(function (error){ | |||
| this.$Message.error('Fail!') | |||
| }); | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| listApplications() { | |||
| var _this = this; | |||
| getPermissionPage({pageNow: this.pageNow, pageSize: this.pageSize, psId: this.psId}).then((res) => { | |||
| _this.loading = false | |||
| this.permissionPage = res | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page) { | |||
| console.log("page:" + page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listApplications(); | |||
| }, | |||
| changePageSize(pageSize) { | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listApplications(); | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.psId = this.$route.query.psId | |||
| this.listApplications(); | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .drawer .ivu-drawer { | |||
| margin-top: 50px; | |||
| } | |||
| .search-box { | |||
| position: relative; | |||
| width: 100%; | |||
| display: -webkit-flex; | |||
| -webkit-box-orient: horizontal; | |||
| -webkit-box-direction: normal; | |||
| -ms-flex-direction: row; | |||
| flex-direction: row; | |||
| -webkit-box-align: center; | |||
| -ms-flex-align: center; | |||
| align-items: center; | |||
| margin-bottom: 15px | |||
| } | |||
| .search-box .search-left-box { | |||
| width: 50%; | |||
| display: -webkit-box; | |||
| display: -ms-flexbox; | |||
| display: flex | |||
| } | |||
| .search-box .search-left-tools { | |||
| display: inline-block; | |||
| margin-right: 5px | |||
| } | |||
| .search-box .total { | |||
| position: absolute; | |||
| right: 0; | |||
| font-weight: 700 | |||
| } | |||
| .search-box .total .icon { | |||
| font-size: 20px; | |||
| font-weight: 800; | |||
| color: #199be6 | |||
| } | |||
| .search-box .search-right-tools { | |||
| text-align: right | |||
| } | |||
| .list-des{ | |||
| color: #909399; | |||
| min-height: 40px; | |||
| font-size: 12px; | |||
| } | |||
| .application-list{ | |||
| padding: 10px 0; | |||
| } | |||
| .application-list .ivu-card{ | |||
| margin: 10px; | |||
| } | |||
| .operation-group{ | |||
| margin-left: -15px; | |||
| } | |||
| </style> | |||
| @@ -1,301 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">权限系统</p> | |||
| <Button @click="addPsModel=!addPsModel" slot="extra" type="primary">新增权限系统</Button> | |||
| <Alert show-icon> | |||
| 权限系统 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| 权限系统是基于RBAC(Role-Based Access Control,基于角色的访问控制)的权限模型。 | |||
| 既可以管理 IDaaS 自身资源权限,也可以管理第三方应用的二级菜单功能按钮等资源权限;当授予某个 IDaaS 用户开发者权限,在未来将可以创建出新的自定义权限系统,以支持应用的三级授权。 | |||
| 默认系统只能关联开发者角色,其它功能不可用;自建系统可以正常使用,用于集中管理第三方应用的权限。 | |||
| </template> | |||
| </Alert> | |||
| <Table :columns="articleColumns" :data="psPage.list"> | |||
| <template slot-scope="{row,index}" slot="opt"> | |||
| <div class="ps-action"> | |||
| <Button type="text" class="pd-l0" :to="'/ps/grant/manager?type=1&psId='+row.id">授权管理</Button> | |||
| <Button type="text" :to="'/ps/role_list?psId='+row.id" class="pd-l0">角色管理</Button> | |||
| <Button type="text" :to="'/ps/permission_list?psId='+row.id" class="pd-l0">权限资源管理</Button> | |||
| <Button type="text" @click="showDetail(row)" class="pd-l0">系统详情</Button> | |||
| <Button type="text" class="pd-l0" @click="onUpdate(row,index)">修改</Button> | |||
| <Button type="text" class="pd-l0 pd-r0 text-error" @click="deletePs(row,index)">删除</Button> | |||
| </div> | |||
| </template> | |||
| </Table> | |||
| <Page class="page" :total="psPage.totalRecords" show-total show-sizer show-elevator/> | |||
| <Drawer title="新增系统" v-model="addPsModel" :mask-closable="false" class="drawer" width="50%"> | |||
| <Form ref="formValidate" :rules="ruleValidate" :model="formValidate" :label-width="80" label-position="right"> | |||
| <FormItem prop="name" label="系统名称"> | |||
| <Input v-model="formValidate.name" :required="true" placeholder="系统名称"></Input> | |||
| <p class="help-block"></p> | |||
| </FormItem> | |||
| <FormItem prop="remark" label="系统描述"> | |||
| <Input type="textarea" v-model="formValidate.remark" :required="true" placeholder="系统描述"></Input> | |||
| <p class="help-block"></p> | |||
| </FormItem> | |||
| <FormItem> | |||
| <Button type="primary" @click="handleSubmit('formValidate')">提交</Button> | |||
| <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </Drawer> | |||
| <Drawer :title="'系统详情( ' + psName +' )'" v-model="showPsDetail" :mask-closable="false" class="drawer" width="50%"> | |||
| <Divider>基础信息</Divider> | |||
| <div> | |||
| <span style="width: 120px;text-align: left;display: inline-table">系统ID</span><span>{{currentPs.id}}</span> | |||
| </div> | |||
| <div> | |||
| <span style="width: 120px;text-align: left;display: inline-table">系统名称</span><span>{{currentPs.name}}</span> | |||
| </div> | |||
| <div> | |||
| <span style="width: 120px;text-align: left;display: inline-table">描述</span><span>{{currentPs.remark}}</span> | |||
| </div> | |||
| </Drawer> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {psList,addPs,deletePsRequest,updatePsRequest} from '@/api/data' | |||
| import store from '@/store' | |||
| import qs from 'qs' | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {}, | |||
| data () { | |||
| return { | |||
| addPsModel:false, | |||
| showPsDetail:false, | |||
| psName:'', | |||
| psId:'', | |||
| currentPs:'', | |||
| pageSizeOpts:[10,20,30,40,50,100], | |||
| loading: true, | |||
| pageNow:1, | |||
| pageSize:50, | |||
| psPage:{}, | |||
| defaultList: [], | |||
| imgName: '', | |||
| dirname: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| articleColumns: [ | |||
| { | |||
| title: '系统名称', | |||
| align: 'left', | |||
| key: 'name' | |||
| }, | |||
| { | |||
| title: '系统ID', | |||
| align: 'left', | |||
| key: 'id' | |||
| }, | |||
| { | |||
| title: '系统状态', | |||
| align: 'center', | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '描述', | |||
| align: 'center', | |||
| key: 'remark' | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'center', | |||
| width: 420, | |||
| slot: 'opt', | |||
| fixed: 'right'/*, | |||
| render: (h, params) => { | |||
| let item = this.articlePage.list[params.index] | |||
| return h('div', [ | |||
| h('Button', { | |||
| props: { | |||
| type: 'success', | |||
| size: 'small', | |||
| to:'/admin/article/edit/'+item.id | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| } | |||
| } | |||
| }, 'Edit'), | |||
| h('span',{ | |||
| style:"margin:0 8px" | |||
| }), | |||
| h('Button', { | |||
| props: { | |||
| type: 'error', | |||
| size: 'small' | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| const msg = this.$Message.loading({ | |||
| content: '删除中...', | |||
| duration: 0 | |||
| }) | |||
| deleteContent(item.id).then(res=>{ | |||
| msg(); | |||
| this.remove(params.index) | |||
| }).catch(function (error) { | |||
| msg(); | |||
| console.log(error) | |||
| }) | |||
| } | |||
| } | |||
| }, 'Delete') | |||
| ]) | |||
| }*/ | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| name: '', | |||
| remark: '' | |||
| }, | |||
| ruleValidate: { | |||
| name: [ | |||
| { required: true, message: '系统名称不能为空', trigger: 'blur' } | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| deletePs(row,index){ | |||
| deletePsRequest(row.id).then((res)=>{ | |||
| this.remove(index) | |||
| }).catch(function (error){ | |||
| }); | |||
| }, | |||
| remove (index) { | |||
| this.psPage.list.splice(index, 1) | |||
| }, | |||
| onUpdate(row,index){ | |||
| this.psId = row.id | |||
| this.addPsModel = true; | |||
| this.formValidate.name = row.name; | |||
| this.formValidate.remark = row.remark; | |||
| }, | |||
| handleSubmit (name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| if(this.psId){ | |||
| this.formValidate.psId = this.psId | |||
| updatePsRequest(this.formValidate).then((res)=>{ | |||
| this.$Message.success('Success!') | |||
| }).catch(function (error){ | |||
| }); | |||
| }else { | |||
| addPs(this.formValidate).then((res)=>{ | |||
| this.$Message.success('Success!') | |||
| }).catch(function (error){ | |||
| }); | |||
| } | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh () { | |||
| this.listArticles({pageNow:this.pageNow,pageSize:this.pageSize}); | |||
| }, | |||
| listPss(){ | |||
| var _this = this; | |||
| psList({pageNow:this.pageNow,pageSize:this.pageSize,type:this.contentType}).then((res) => { | |||
| _this.loading = false | |||
| this.psPage = res | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page){ | |||
| console.log("page:"+page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listPss(); | |||
| }, | |||
| changePageSize(pageSize){ | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listPss(); | |||
| }, | |||
| handleReset (name) { | |||
| this.$refs[name].resetFields(); | |||
| }, | |||
| showDetail(row){ | |||
| this.showPsDetail = true | |||
| this.psName = row.name | |||
| this.currentPs = row | |||
| } | |||
| }, | |||
| mounted () { | |||
| // this.contentType = this.$route.query.contentType; | |||
| this.listPss(); | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .search-box{ | |||
| position:relative; | |||
| width:100%; | |||
| display:-webkit-flex; | |||
| -webkit-box-orient:horizontal; | |||
| -webkit-box-direction:normal; | |||
| -ms-flex-direction:row; | |||
| flex-direction:row; | |||
| -webkit-box-align:center; | |||
| -ms-flex-align:center; | |||
| align-items:center; | |||
| margin-bottom:15px | |||
| } | |||
| .search-box .search-left-box { | |||
| width:50%; | |||
| display:-webkit-box; | |||
| display:-ms-flexbox; | |||
| display:flex | |||
| } | |||
| .search-box .search-left-tools{ | |||
| display:inline-block; | |||
| margin-right:5px | |||
| } | |||
| .search-box .total{ | |||
| position:absolute; | |||
| right:0; | |||
| font-weight:700 | |||
| } | |||
| .search-box .total .icon{ | |||
| font-size:20px; | |||
| font-weight:800; | |||
| color:#199be6 | |||
| } | |||
| .search-box .search-right-tools{ | |||
| text-align:right | |||
| } | |||
| </style> | |||
| @@ -1,404 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">角色管理</p> | |||
| <Alert show-icon> | |||
| 角色管理 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| </template> | |||
| </Alert> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search-left-box" style="width: 50%;"> | |||
| <div class="search-left-tools"> | |||
| <Button type="primary" @click="addRoleModel = !addRoleModel">添加角色</Button> | |||
| </div> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入角色名称"/> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table stripe :columns="appColumns" :data="rolePage.list" :span-method="handleSpan"> | |||
| <template slot-scope="{row,index}" slot="opt"> | |||
| <Button type="text" @click="associatePermission(row)">关联权限</Button> | |||
| <Button type="text" :to="'/ps/grant/manager?type=2&psId='+row.psId">授权到主体</Button> | |||
| <Button type="text" @click="onEditRole(row)">编辑</Button> | |||
| <Button type="text">删除</Button> | |||
| </template> | |||
| <template slot-scope="{row,index}" slot="enabled"> | |||
| <i-switch size="large" :value="''+row.enabled" true-value="true" false-value="false" @on-change="changeStatus($event,row)"> | |||
| <span slot="open" value="true">开启</span> | |||
| <span slot="close" value="false">关闭</span> | |||
| </i-switch> | |||
| </template> | |||
| </Table> | |||
| <Page class="page" :total="rolePage.totalRecords" show-total show-sizer show-elevator/> | |||
| <Drawer title="新增角色" v-model="addRoleModel" :mask-closable="false" class="drawer" width="50%"> | |||
| <Form ref="formValidate" :rules="ruleValidate" :model="formValidate" :label-width="80" label-position="right"> | |||
| <FormItem prop="name" label="角色名称"> | |||
| <Input v-model="formValidate.name" :required="true" placeholder="系统名称"></Input> | |||
| <p class="help-block"></p> | |||
| </FormItem> | |||
| <FormItem prop="code" label="角色值"> | |||
| <Input v-model="formValidate.code" :required="true" placeholder="角色值"></Input> | |||
| <p class="help-block"></p> | |||
| </FormItem> | |||
| <FormItem label="是否启用"> | |||
| <i-switch size="large" v-model="formValidate.enabled" true-value="true" false-value="false"> | |||
| <span slot="open" value="true">开启</span> | |||
| <span slot="close" value="false">关闭</span> | |||
| </i-switch> | |||
| </FormItem> | |||
| <FormItem prop="remark" label="角色描述"> | |||
| <Input type="textarea" v-model="formValidate.remark" :required="true" placeholder="角色描述"></Input> | |||
| <p class="help-block"></p> | |||
| </FormItem> | |||
| <FormItem> | |||
| <Button type="primary" @click="handleSubmit('formValidate')">提交</Button> | |||
| <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </Drawer> | |||
| <Drawer title="关联权限" v-model="asModel" :mask-closable="false" width="50%"> | |||
| <zTree :nodes="nodes" @onCreated="handleCreated" :setting="setting"/> | |||
| <div class="drawer-footer"> | |||
| <Button style="margin-right: 8px">Cancel</Button> | |||
| <Button type="primary" @click="saveAss">Submit</Button> | |||
| </div> | |||
| </Drawer> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {getRolePage, enableRole,disableRole,createRole,updateRole,listPermissionRequest,updateRolePermissions,getRolePermissions} from '@/api/data' | |||
| import zTree from "vue-giant-tree"; | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {zTree}, | |||
| data() { | |||
| return { | |||
| rolePermissions: [], | |||
| enabled:false, | |||
| psId:'', | |||
| icon:'md-arrow-dropdown', | |||
| addRoleModel: false, | |||
| asModel: false, | |||
| pageSizeOpts: [10, 20, 30, 40, 50, 100], | |||
| loading: true, | |||
| pageNow: 1, | |||
| pageSize: 50, | |||
| rolePage: {}, | |||
| defaultList: [], | |||
| currentRole: {}, | |||
| selectedItems: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| appColumns: [ | |||
| { | |||
| title: '角色名称', | |||
| align: 'left', | |||
| key: 'name' | |||
| }, | |||
| { | |||
| title: '角色', | |||
| align: 'left', | |||
| key: 'code' | |||
| }, | |||
| { | |||
| title: '权限数', | |||
| align: 'left', | |||
| key: 'permissionCount' | |||
| }, | |||
| { | |||
| title: '描述', | |||
| align: 'left', | |||
| key: 'remark' | |||
| }, | |||
| { | |||
| title: '角色状态', | |||
| align: 'left', | |||
| slot: 'enabled' | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'center', | |||
| width: 330, | |||
| slot:'opt' | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| name: '', | |||
| code: '', | |||
| enabled: 'false' | |||
| }, | |||
| ruleValidate: { | |||
| name: [ | |||
| {required: true, message: '角色名称不能为空', trigger: 'blur'} | |||
| ], | |||
| code: [ | |||
| {required: true, message: '角色值不能为空', trigger: 'blur'} | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| }, | |||
| setting: { | |||
| view: { | |||
| showIcon: this.showIconForTree, | |||
| showLine: true, | |||
| txtSelectedEnable: true, | |||
| selectedMulti: true | |||
| }, | |||
| check: { | |||
| enable: true | |||
| }, | |||
| data: { | |||
| simpleData: { | |||
| enable: true | |||
| } | |||
| } | |||
| }, | |||
| rootNode:{ | |||
| id: 'null', | |||
| pId: '', | |||
| name: "/", | |||
| nocheck: true, | |||
| open: true, | |||
| iconOpen: "http://www.treejs.cn/v3/css/zTreeStyle/img/diy/1_open.png", | |||
| iconClose: "http://www.treejs.cn/v3/css/zTreeStyle/img/diy/1_open.png" | |||
| }, | |||
| nodes: [ | |||
| ], | |||
| ztreeObj: null, | |||
| notRootStyle: true, | |||
| showRightMenu: false | |||
| } | |||
| }, | |||
| methods: { | |||
| changeStatus(status,row){ | |||
| console.log(status) | |||
| if(status==='true'){ | |||
| enableRole(this.psId,row.id).then((res)=>{ | |||
| }).catch(function (error){ | |||
| }); | |||
| }else { | |||
| disableRole(this.psId,row.id).then((res)=>{ | |||
| }).catch(function (error){ | |||
| }); | |||
| } | |||
| }, | |||
| onEditRole(row){ | |||
| this.formValidate = row; | |||
| this.formValidate.enabled = ''+row.enabled | |||
| this.addRoleModel = true; | |||
| }, | |||
| remove(index) { | |||
| this.applicationPage.list.splice(index, 1) | |||
| }, | |||
| showIconForTree(treeId, treeNode) { | |||
| return treeNode.iconOpen && treeNode.iconClose; | |||
| }, | |||
| handleSubmit(name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| this.formValidate.psId=this.psId | |||
| if(this.formValidate.id){ | |||
| updateRole(this.formValidate).then((res)=>{ | |||
| this.$Message.success('Success!') | |||
| this.addRoleModel = false | |||
| }).catch(function (error){ | |||
| this.$Message.error('Fail!') | |||
| }); | |||
| }else { | |||
| createRole(this.formValidate).then((res)=>{ | |||
| this.$Message.success('Success!') | |||
| this.addRoleModel = false | |||
| }).catch(function (error){ | |||
| this.$Message.error('Fail!') | |||
| }); | |||
| } | |||
| } | |||
| }) | |||
| }, | |||
| listApplications() { | |||
| var _this = this; | |||
| getRolePage({pageNow: this.pageNow, pageSize: this.pageSize, psId: this.psId}).then((res) => { | |||
| _this.loading = false | |||
| this.rolePage = res | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page) { | |||
| console.log("page:" + page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listApplications(); | |||
| }, | |||
| changePageSize(pageSize) { | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listApplications(); | |||
| }, | |||
| handleSpan ({ row, column, rowIndex, columnIndex }) { | |||
| if(row.showBlock){ | |||
| return [1, 7]; | |||
| }else { | |||
| // return [1,1] | |||
| } | |||
| }, | |||
| getRoleGrantedPermissions(){ | |||
| getRolePermissions(this.psId,this.currentRole.id).then((res)=>{ | |||
| this.rolePermissions = res; | |||
| }).catch(function (error){ | |||
| }); | |||
| }, | |||
| associatePermission(row){ | |||
| this.currentRole = row | |||
| getRolePermissions(this.psId,this.currentRole.id).then((res)=>{ | |||
| this.rolePermissions = res; | |||
| listPermissionRequest(row.psId).then((res)=>{ | |||
| this.nodes=[] | |||
| this.nodes.push(this.rootNode) | |||
| for(let i=0;i<res.length;i++){ | |||
| let node = res[i]; | |||
| node.open=true | |||
| node.pId=node.parentId | |||
| for(let j=0;j<this.rolePermissions.length;j++){ | |||
| let p = this.rolePermissions[j]; | |||
| if(node.id==p.id){ | |||
| node.checked = true | |||
| } | |||
| } | |||
| this.nodes.push(node) | |||
| } | |||
| this.asModel = true | |||
| }).catch(function (error){ | |||
| }) | |||
| }).catch(function (error){ | |||
| }); | |||
| }, | |||
| handleCreated(ztreeObj) { | |||
| console.log("加载树完成"); | |||
| this.ztreeObj = ztreeObj; | |||
| console.log(this.ztreeObj); | |||
| // let firstTree = ztreeObj.getNodes()[0]; | |||
| // 默认选中第一个 | |||
| // ztreeObj.selectNode(firstTree); | |||
| // 设置节点全部展开 | |||
| // ztreeObj.expandAll(true); | |||
| //加载完自动点击第一个,加载右边表格 | |||
| // this.setting.callback.onClick(null, firstTree.id, firstTree) | |||
| }, | |||
| saveAss(){ | |||
| var nodes = this.ztreeObj.getChangeCheckedNodes(); | |||
| var array = this.ztreeObj.transformToArray(nodes); | |||
| let attachedPermissionIds = []; | |||
| let detachedPermissionIds = []; | |||
| for(let i=0;i<array.length;i++){ | |||
| let node = array[i]; | |||
| if(node.checked && attachedPermissionIds.indexOf(node.id)<0){ | |||
| attachedPermissionIds.push(node.id) | |||
| }else if(node.nocheck){ | |||
| detachedPermissionIds.push(node.id) | |||
| } | |||
| } | |||
| console.log("attachedPermissionIds:"+JSON.stringify(attachedPermissionIds)) | |||
| console.log("detachedPermissionIds:"+JSON.stringify(detachedPermissionIds)) | |||
| updateRolePermissions({"attachedPermissionIds":attachedPermissionIds,"detachedPermissionIds":detachedPermissionIds,"roleId":this.currentRole.id}).then((res)=>{ | |||
| }).catch(function (error){ | |||
| }); | |||
| }, | |||
| handleReset (name) { | |||
| this.$refs[name].resetFields(); | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.psId = this.$route.query.psId | |||
| this.listApplications(); | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .search-box { | |||
| position: relative; | |||
| width: 100%; | |||
| display: -webkit-flex; | |||
| -webkit-box-orient: horizontal; | |||
| -webkit-box-direction: normal; | |||
| -ms-flex-direction: row; | |||
| flex-direction: row; | |||
| -webkit-box-align: center; | |||
| -ms-flex-align: center; | |||
| align-items: center; | |||
| margin-bottom: 15px | |||
| } | |||
| .search-box .search-left-box { | |||
| width: 50%; | |||
| display: -webkit-box; | |||
| display: -ms-flexbox; | |||
| display: flex | |||
| } | |||
| .search-box .search-left-tools { | |||
| display: inline-block; | |||
| margin-right: 5px | |||
| } | |||
| .search-box .total { | |||
| position: absolute; | |||
| right: 0; | |||
| font-weight: 700 | |||
| } | |||
| .search-box .total .icon { | |||
| font-size: 20px; | |||
| font-weight: 800; | |||
| color: #199be6 | |||
| } | |||
| .search-box .search-right-tools { | |||
| text-align: right | |||
| } | |||
| .list-des{ | |||
| color: #909399; | |||
| min-height: 40px; | |||
| font-size: 12px; | |||
| } | |||
| .application-list{ | |||
| padding: 10px 0; | |||
| } | |||
| .application-list .ivu-card{ | |||
| margin: 10px; | |||
| } | |||
| .operation-group{ | |||
| margin-left: -15px; | |||
| } | |||
| </style> | |||
| @@ -1,216 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">安全设置</p> | |||
| <Tabs> | |||
| <TabPane label="系统密钥算法" name="name1"> | |||
| <div class="complex-search-box"> | |||
| <Input class="search-box-input" placeholder="主账户(申请人)" style="width: auto" /> | |||
| <Input class="search-box-input" placeholder="子账户" style="width: auto" /> | |||
| <Input class="search-box-input" placeholder="应用名称" style="width: auto" /> | |||
| <Select class="search-box-input" placeholder="审批状态"> | |||
| <Option value="beijing">待审批</Option> | |||
| <Option value="shanghai">发起失败</Option> | |||
| <Option value="shenzhen">发起成功</Option> | |||
| <Option value="shenzhen">已通过</Option> | |||
| <Option value="shenzhen">已拒绝</Option> | |||
| </Select> | |||
| <Button class="btn-position" type="primary"><Icon type="ios-search"></Icon>搜索</Button> | |||
| <Button class="search-box-button">重置</Button> | |||
| <span style="margin-left: 20px; max-width: 400px;">当前审批如果启用外部审批流,请到外部审批平台进行处理!</span> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="100" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| <TabPane label="统一二次认证" name="name2"> | |||
| <div class="complex-search-box"> | |||
| <Input class="search-box-input" placeholder="账户名称" style="width: auto" /> | |||
| <Select class="search-box-input" placeholder="审批状态"> | |||
| <Option value="beijing">待审批</Option> | |||
| <Option value="shanghai">发起失败</Option> | |||
| <Option value="shenzhen">发起成功</Option> | |||
| <Option value="shenzhen">已通过</Option> | |||
| <Option value="shenzhen">已拒绝</Option> | |||
| </Select> | |||
| <Button class="btn-position" type="primary"><Icon type="ios-search"></Icon>搜索</Button> | |||
| <Button class="search-box-button">重置</Button> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="100" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| <TabPane label="登录/注册" name="name3"> | |||
| <div class="complex-search-box"> | |||
| <Input class="search-box-input" placeholder="主账户(申请人)" style="width: auto" /> | |||
| <Input class="search-box-input" placeholder="子账户" style="width: auto" /> | |||
| <Input class="search-box-input" placeholder="应用名称" style="width: auto" /> | |||
| <Select class="search-box-input" placeholder="审批状态"> | |||
| <Option value="beijing">待审批</Option> | |||
| <Option value="shanghai">发起失败</Option> | |||
| <Option value="shenzhen">发起成功</Option> | |||
| <Option value="shenzhen">已通过</Option> | |||
| <Option value="shenzhen">已拒绝</Option> | |||
| </Select> | |||
| <Button class="btn-position" type="primary"><Icon type="ios-search"></Icon>搜索</Button> | |||
| <Button class="search-box-button">重置</Button> | |||
| <span style="margin-left: 20px; max-width: 400px;">当前审批如果启用外部审批流,请到外部审批平台进行处理!</span> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="100" show-total show-sizer show-elevator/> | |||
| </TabPane> | |||
| <TabPane label="策略管理" name="name4"></TabPane> | |||
| <TabPane label="自动同步账户配置" name="name5"></TabPane> | |||
| <TabPane label="短信配置" name="name6"></TabPane> | |||
| <TabPane label="邮件配置" name="name7"></TabPane> | |||
| <TabPane label="风险识别服务配置" name="name8"></TabPane> | |||
| <TabPane label="实人认证" name="name9"></TabPane> | |||
| <TabPane label="人脸识别" name="name10"></TabPane> | |||
| <TabPane label="云产品 AD 认证" name="name11"></TabPane> | |||
| <TabPane label="僵尸账号清理" name="name12"></TabPane> | |||
| <TabPane label="IDaaS 风险识别" name="name13"></TabPane> | |||
| </Tabs> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {articleList,deleteContent} from '@/api/data' | |||
| import store from '@/store' | |||
| import qs from 'qs' | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {}, | |||
| data () { | |||
| return { | |||
| contentType:'', | |||
| pageSizeOpts:[10,20,30,40,50,100], | |||
| loading: true, | |||
| pageNow:1, | |||
| pageSize:50, | |||
| articlePage:{}, | |||
| defaultList: [], | |||
| imgName: '', | |||
| dirname: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| articleColumns: [ | |||
| { | |||
| title: '操作人', | |||
| align: 'left', | |||
| key: 'title' | |||
| }, | |||
| { | |||
| title: '操作类型', | |||
| align: 'center', | |||
| width: 200, | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '操作时间', | |||
| align: 'center', | |||
| width: 200, | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '客户端IP', | |||
| align: 'center', | |||
| width: 200, | |||
| key: 'createTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '日志内容', | |||
| align: 'center', | |||
| width: 200, | |||
| key: 'updateTime', | |||
| sortable: true | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| pathName: '' | |||
| }, | |||
| ruleValidate: { | |||
| pathName: [ | |||
| { required: true, message: '目录名称不能为空', trigger: 'blur' }, | |||
| { required: true, type: 'string', min: 1, max: 254, message: '目录字符长度必须在1~254之间', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\/\/).*$/, message: '目录名称不能含有//', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\.\.).*$/, message: '目录名称不能含有..', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!\/).*$/, message: '目录名称不能以 / 打头', trigger: 'blur' } | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| remove (index) { | |||
| this.articlePage.list.splice(index, 1) | |||
| }, | |||
| handleSubmit (name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(this.formValidate.pathName) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh () { | |||
| this.listArticles({pageNow:this.pageNow,pageSize:this.pageSize}); | |||
| }, | |||
| listArticles(){ | |||
| var _this = this; | |||
| articleList({pageNow:this.pageNow,pageSize:this.pageSize,type:this.contentType}).then((res) => { | |||
| _this.loading = false | |||
| this.articlePage = res.data | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page){ | |||
| console.log("page:"+page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listArticles(); | |||
| }, | |||
| changePageSize(pageSize){ | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listArticles(); | |||
| } | |||
| }, | |||
| mounted () { | |||
| this.contentType = this.$route.query.contentType; | |||
| this.listArticles(); | |||
| }, | |||
| watch:{ | |||
| '$route':{ | |||
| handler(val){ | |||
| if(val.query.contentType){ | |||
| this.contentType = val.query.contentType? val.query.contentType:'post' | |||
| this.listArticles() | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| @@ -1,221 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title">会话管理</p> | |||
| <Alert show-icon> | |||
| 会话管理 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| 会话管理可以查看所有当前仍然有效的会话列表,并且可以强制注销某个用户的会话。 | |||
| 会话是否有效以登录令牌为准,如果没有手动退出,在令牌过期前(默认 2 小时),会话仍然有效。 | |||
| 注销后,该用户凭证即刻失效,之后的所有操作都需要重新认证。 | |||
| 一个账户在网页端只会有一个会话存在。移动端和网页端是两个会话范围,可以同时存在。 | |||
| </template> | |||
| </Alert> | |||
| <div class="search-left-box"> | |||
| <div class="search-box box-pack-between"> | |||
| <div class="search"> | |||
| <Input search enter-button placeholder="请输入应用名称" /> | |||
| </div> | |||
| </div> | |||
| <div class="search-right-tools"></div> | |||
| </div> | |||
| <Table :columns="articleColumns" :data="datalist"></Table> | |||
| <Page class="page" :total="100" show-total show-sizer show-elevator/> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {articleList,deleteContent} from '@/api/data' | |||
| import store from '@/store' | |||
| import qs from 'qs' | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {}, | |||
| data () { | |||
| return { | |||
| contentType:'', | |||
| pageSizeOpts:[10,20,30,40,50,100], | |||
| loading: true, | |||
| pageNow:1, | |||
| pageSize:50, | |||
| articlePage:{}, | |||
| defaultList: [], | |||
| imgName: '', | |||
| dirname: '', | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| articleColumns: [ | |||
| { | |||
| title: '账户名称 ', | |||
| align: 'left', | |||
| key: 'title' | |||
| }, | |||
| { | |||
| title: '显示名称 ', | |||
| align: 'center', | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: 'IP ', | |||
| align: 'center', | |||
| key: 'size' | |||
| }, | |||
| { | |||
| title: '浏览器 ', | |||
| align: 'center', | |||
| key: 'createTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '登录时间 ', | |||
| align: 'center', | |||
| key: 'updateTime', | |||
| sortable: true | |||
| }, | |||
| { | |||
| title: '操作', | |||
| align: 'right', | |||
| width: 150, | |||
| key: 'opt', | |||
| fixed: 'right', | |||
| render: (h, params) => { | |||
| let item = this.articlePage.list[params.index] | |||
| return h('div', [ | |||
| h('Button', { | |||
| props: { | |||
| type: 'success', | |||
| size: 'small', | |||
| to:'/admin/article/edit/'+item.id | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| } | |||
| } | |||
| }, 'Edit'), | |||
| h('span',{ | |||
| style:"margin:0 8px" | |||
| }), | |||
| h('Button', { | |||
| props: { | |||
| type: 'error', | |||
| size: 'small' | |||
| }, | |||
| on: { | |||
| click: () => { | |||
| const msg = this.$Message.loading({ | |||
| content: '删除中...', | |||
| duration: 0 | |||
| }) | |||
| deleteContent(item.id).then(res=>{ | |||
| msg(); | |||
| this.remove(params.index) | |||
| }).catch(function (error) { | |||
| msg(); | |||
| console.log(error) | |||
| }) | |||
| } | |||
| } | |||
| }, 'Delete') | |||
| ]) | |||
| } | |||
| } | |||
| ], | |||
| datalist: [], | |||
| uploadList: [], | |||
| accessKey: '---', | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| currentPath: '', | |||
| formValidate: { | |||
| pathName: '' | |||
| }, | |||
| ruleValidate: { | |||
| pathName: [ | |||
| { required: true, message: '目录名称不能为空', trigger: 'blur' }, | |||
| { required: true, type: 'string', min: 1, max: 254, message: '目录字符长度必须在1~254之间', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\/\/).*$/, message: '目录名称不能含有//', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!.*\.\.).*$/, message: '目录名称不能含有..', trigger: 'blur' }, | |||
| { required: true, pattern: /^(?!\/).*$/, message: '目录名称不能以 / 打头', trigger: 'blur' } | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| remove (index) { | |||
| this.articlePage.list.splice(index, 1) | |||
| }, | |||
| handleSubmit (name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(this.formValidate.pathName) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh () { | |||
| this.listArticles({pageNow:this.pageNow,pageSize:this.pageSize}); | |||
| }, | |||
| listArticles(){ | |||
| var _this = this; | |||
| articleList({pageNow:this.pageNow,pageSize:this.pageSize,type:this.contentType}).then((res) => { | |||
| _this.loading = false | |||
| this.articlePage = res.data | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page){ | |||
| console.log("page:"+page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listArticles(); | |||
| }, | |||
| changePageSize(pageSize){ | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listArticles(); | |||
| } | |||
| }, | |||
| mounted () { | |||
| this.contentType = this.$route.query.contentType; | |||
| this.listArticles(); | |||
| }, | |||
| watch:{ | |||
| '$route':{ | |||
| handler(val){ | |||
| if(val.query.contentType){ | |||
| this.contentType = val.query.contentType? val.query.contentType:'post' | |||
| this.listArticles() | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .search-box{ | |||
| position: relative; | |||
| display: inline-block; | |||
| vertical-align: middle; | |||
| width: 40%; | |||
| } | |||
| </style> | |||
| @@ -1,364 +0,0 @@ | |||
| <template> | |||
| <Card :bordered="false"> | |||
| <p slot="title"><a>机构及组</a><span style="font-size: 24px;margin:0 10px;">/</span>数据字典</p> | |||
| <h2 style="margin: 10px 0"> | |||
| <router-link :to="{path:'/admin/ud/list'}"><Icon type="ios-arrow-back"></Icon>数据字典</router-link> | |||
| </h2> | |||
| <Alert show-icon> | |||
| 数据字典 | |||
| <Icon type="ios-bulb-outline" slot="icon"></Icon> | |||
| <template slot="desc"> | |||
| 管理员在此对数据字典进行管理操作(增、删、改、查),数据字典作为账户、组、组织机构的扩展属性使用,可指定数据字典的类型、必填等。 | |||
| </template> | |||
| </Alert> | |||
| <div class="complex-search-box"> | |||
| <Button type="primary" style="margin-right: 10px" @click="addField">添加字段</Button> | |||
| <Button type="primary" style="margin-right: 10px" @click="importDic">导入数据</Button> | |||
| <Button type="primary" style="margin-right: 10px">导出数据</Button> | |||
| <Select class="search-box-input" placeholder="请选择所属类型" style="width: 100px"> | |||
| <Option value="beijing" selected>所有类型</Option> | |||
| <Option value="shanghai">账户</Option> | |||
| <Option value="shenzhen">组</Option> | |||
| <Option value="shenzhen">组织机构</Option> | |||
| </Select> | |||
| <Input class="search-box-input" suffix="ios-search" placeholder="请输入名称进行搜索" style="width: auto" /> | |||
| </div> | |||
| <Table :columns="dicColumns" :data="dicPage.list"> | |||
| <div slot-scope="{row,index}" slot="action"> | |||
| <Button type="text" size="small" @click="onEditDic(row,index)">修改</Button> | |||
| <Button type="text" size="small" @click="onDeleteDic(row,index)">删除</Button> | |||
| </div> | |||
| </Table> | |||
| <Page class="page" :total="dicPage.totalRecords" show-total show-sizer show-elevator/> | |||
| <Drawer title="数据字典" v-model="addFieldModelValue" width="50%" :mask-closable="false" class="orgDrawer"> | |||
| <Form ref="createDicFormValidate" :rules="createDicRuleValidate" :model="addFieldForm" :label-width="80" label-position="left"> | |||
| <FormItem label="字段名称"> | |||
| <Input v-model="addFieldForm.name" placeholder="请输入字段名称"></Input> | |||
| </FormItem> | |||
| <FormItem label="字段值"> | |||
| <Input v-model="addFieldForm.value" placeholder="请输入字段值"></Input> | |||
| </FormItem> | |||
| <FormItem label="所属分类"> | |||
| <Select v-model="addFieldForm.customType" placeholder="请选择"> | |||
| <Option value="user">账户</Option> | |||
| <Option value="group">组</Option> | |||
| <Option value="organization">组织机构</Option> | |||
| </Select> | |||
| </FormItem> | |||
| <FormItem label="字段类型" class="split"> | |||
| <Select v-model="addFieldForm.type" placeholder="请选择"> | |||
| <Option value="input">文本输入框</Option> | |||
| <Option value="textarea">文本域</Option> | |||
| <Option value="select">下拉框</Option> | |||
| </Select> | |||
| </FormItem> | |||
| <FormItem label="是否为必填"> | |||
| <i-switch v-model="addFieldForm.required" true-value="true" false-value="false"> | |||
| <span slot="open">是</span> | |||
| <span slot="close">否</span> | |||
| </i-switch> | |||
| </FormItem> | |||
| <FormItem label="是否可修改"> | |||
| <i-switch v-model="addFieldForm.modifiable" true-value="true" false-value="false"> | |||
| <span slot="open">是</span> | |||
| <span slot="close">否</span> | |||
| </i-switch> | |||
| <p class="help-block">若设置必填,则系统默认开启可以修改。</p> | |||
| </FormItem> | |||
| <FormItem label="是否唯一"> | |||
| <i-switch v-model="addFieldForm.unique" true-value="true" false-value="false"> | |||
| <span slot="open">是</span> | |||
| <span slot="close">否</span> | |||
| </i-switch> | |||
| </FormItem> | |||
| <FormItem label="字段状态"> | |||
| <i-switch v-model="addFieldForm.enabled" true-value="true" false-value="false"> | |||
| <span slot="open">是</span> | |||
| <span slot="close">否</span> | |||
| </i-switch> | |||
| <p class="help-block">启用后,字段会显示在账户表单中,API也会有该字段。</p> | |||
| </FormItem> | |||
| <FormItem label="备注"> | |||
| <Input type="textarea" v-model="addFieldForm.remark" placeholder="介绍该字段的特点, 如何使用等"></Input> | |||
| </FormItem> | |||
| <FormItem> | |||
| <Button type="primary" @click="saveField('createDicFormValidate')">提交</Button> | |||
| <Button style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </Drawer> | |||
| <Drawer title="数据字典" v-model="editFieldModelValue" width="50%" :mask-closable="false" class="orgDrawer"> | |||
| <Form ref="updateDicFormValidate" :rules="updateDicRuleValidate" :model="updateFieldForm" :label-width="80" label-position="left"> | |||
| <FormItem label="字段名称"> | |||
| <Input v-model="updateFieldForm.name" placeholder="请输入字段名称"></Input> | |||
| </FormItem> | |||
| <FormItem label="字段值"> | |||
| <Input v-model="updateFieldForm.value" placeholder="请输入字段值"></Input> | |||
| </FormItem> | |||
| <FormItem label="所属分类"> | |||
| <Select v-model="updateFieldForm.customType" placeholder="请选择"> | |||
| <Option value="user">账户</Option> | |||
| <Option value="group">组</Option> | |||
| <Option value="organization">组织机构</Option> | |||
| </Select> | |||
| </FormItem> | |||
| <FormItem label="字段类型" class="split"> | |||
| <Select v-model="updateFieldForm.type" placeholder="请选择"> | |||
| <Option value="input">文本输入框</Option> | |||
| <Option value="textarea">文本域</Option> | |||
| <Option value="select">下拉框</Option> | |||
| </Select> | |||
| </FormItem> | |||
| <FormItem label="是否为必填"> | |||
| <i-switch v-model="updateFieldForm.required" true-value="true" false-value="false"> | |||
| <span slot="open">是</span> | |||
| <span slot="close">否</span> | |||
| </i-switch> | |||
| </FormItem> | |||
| <FormItem label="是否可修改"> | |||
| <i-switch v-model="updateFieldForm.modifiable" true-value="true" false-value="false"> | |||
| <span slot="open">是</span> | |||
| <span slot="close">否</span> | |||
| </i-switch> | |||
| <p class="help-block">若设置必填,则系统默认开启可以修改。</p> | |||
| </FormItem> | |||
| <FormItem label="是否唯一"> | |||
| <i-switch v-model="updateFieldForm.unique" true-value="true" false-value="false"> | |||
| <span slot="open">是</span> | |||
| <span slot="close">否</span> | |||
| </i-switch> | |||
| </FormItem> | |||
| <FormItem label="字段状态"> | |||
| <i-switch v-model="updateFieldForm.enabled" true-value="true" false-value="false"> | |||
| <span slot="open">是</span> | |||
| <span slot="close">否</span> | |||
| </i-switch> | |||
| <p class="help-block">启用后,字段会显示在账户表单中,API也会有该字段。</p> | |||
| </FormItem> | |||
| <FormItem label="备注"> | |||
| <Input type="textarea" v-model="updateFieldForm.remark" placeholder="介绍该字段的特点, 如何使用等"></Input> | |||
| </FormItem> | |||
| <FormItem> | |||
| <Button type="primary" @click="updateField('updateDicFormValidate')">提交</Button> | |||
| <Button style="margin-left: 8px">取消</Button> | |||
| </FormItem> | |||
| </Form> | |||
| </Drawer> | |||
| <Drawer title="数据字典导入" v-model="dicImportModelValue" width="50%" :mask-closable="false" class="orgDrawer"> | |||
| <Alert style="margin: 15px 0">请先下载账户格式范例文档,根据指定格式导入,确保各字段类型正确无误,否则有可能导致导入失败。下载模板后,在导入的过程中切勿修改扩展字段。</Alert> | |||
| <Button type="primary" icon="ios-download-outline">下载账户格式范例文档</Button> | |||
| <div style="padding: 20px 40px;"> | |||
| <Upload type="drag" :data="uploadParam" :action="uploadExcelFileURL" :on-success="handleSuccess" > | |||
| <div style="padding: 20px 0"> | |||
| <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon> | |||
| <p>Click or drag files here to upload</p> | |||
| </div> | |||
| </Upload> | |||
| </div> | |||
| </Drawer> | |||
| </Card> | |||
| </template> | |||
| <script> | |||
| import {listDictionary, createDictionary, deleteContent, updateDictionary, deleteDictionary} from '@/api/data' | |||
| import {shallowCopy} from "@/libs/util"; | |||
| export default { | |||
| name: 'articleList', | |||
| props: { | |||
| }, | |||
| components: {}, | |||
| data () { | |||
| return { | |||
| uploadExcelFileURL:'', | |||
| addFieldModelValue:false, | |||
| editFieldModelValue:false, | |||
| dicImportModelValue:false, | |||
| updateFieldForm:{ | |||
| id:'', | |||
| name:'', | |||
| value:'', | |||
| type:'', | |||
| customType:'', | |||
| enabled:false, | |||
| modifiable:false, | |||
| required:false, | |||
| unique:false, | |||
| remark:'' | |||
| }, | |||
| addFieldForm:{ | |||
| name:'', | |||
| value:'', | |||
| type:'', | |||
| customType:'', | |||
| enabled:'false', | |||
| modifiable:'false', | |||
| required:'false', | |||
| unique:'false', | |||
| remark:'' | |||
| }, | |||
| contentType:'', | |||
| pageSizeOpts:[10,20,30,40,50,100], | |||
| loading: true, | |||
| pageNow:1, | |||
| pageSize:50, | |||
| dicPage:{}, | |||
| defaultList: [], | |||
| selectedItems: [], | |||
| breadData: [], | |||
| busy: false, | |||
| nextMarker: '', | |||
| buckets: [], | |||
| currentBucket: '', | |||
| dicColumns: [ | |||
| { | |||
| title: '字段名称', | |||
| align: 'left', | |||
| key: 'name' | |||
| }, | |||
| { | |||
| title: '所属分类 ', | |||
| align: 'center', | |||
| key: 'customType' | |||
| }, | |||
| { | |||
| title: '字段类型 ', | |||
| align: 'center', | |||
| key: 'type' | |||
| }, | |||
| { | |||
| title: '状态 ', | |||
| align: 'center', | |||
| key: 'enabled' | |||
| }, | |||
| { | |||
| title: '备注 ', | |||
| align: 'center', | |||
| key: 'remark' | |||
| }, | |||
| { | |||
| title: '操作 ', | |||
| align: 'center', | |||
| slot: 'action' | |||
| } | |||
| ], | |||
| uploadList: [], | |||
| uploadParam: {}, | |||
| showUploadList: true, | |||
| createDicRuleValidate: { | |||
| name: [ | |||
| { required: true, message: '名称不能为空', trigger: 'blur' } | |||
| ] | |||
| }, | |||
| updateDicRuleValidate: { | |||
| name: [ | |||
| { required: true, message: '名称不能为空', trigger: 'blur' } | |||
| ] | |||
| }, | |||
| styles: { | |||
| height: 'calc(100% - 105px)', | |||
| overflow: 'auto', | |||
| paddingBottom: '53px' | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| handleSuccess(){ | |||
| }, | |||
| onEditDic(row,index){ | |||
| this.editFieldModelValue = true | |||
| shallowCopy(this.updateFieldForm,row) | |||
| }, | |||
| onDeleteDic(row,index){ | |||
| deleteDictionary(row.id).then((res)=>{ | |||
| }).catch(function (error){ | |||
| }) | |||
| }, | |||
| remove (index) { | |||
| this.articlePage.list.splice(index, 1) | |||
| }, | |||
| updateField (name) { | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(JSON.stringify(this.updateFieldForm)) | |||
| updateDictionary(this.updateFieldForm).then(()=>{ | |||
| }).catch(function (error){ | |||
| }) | |||
| this.$Message.success('Success!') | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| refresh () { | |||
| this.listArticles({pageNow:this.pageNow,pageSize:this.pageSize}); | |||
| }, | |||
| listArticles(){ | |||
| var _this = this; | |||
| listDictionary({pageNow:this.pageNow,pageSize:this.pageSize}).then((res) => { | |||
| _this.loading = false | |||
| for(let i=0;i<res.list.length;i++){ | |||
| res.list[i].enabled = ''+res.list[i].enabled | |||
| res.list[i].modifiable = ''+res.list[i].modifiable | |||
| res.list[i].required = ''+res.list[i].required | |||
| res.list[i].unique = ''+res.list[i].unique | |||
| } | |||
| this.dicPage = res | |||
| }).catch(function (error) { | |||
| _this.loading = false | |||
| console.log(error) | |||
| }) | |||
| }, | |||
| toPage(page){ | |||
| console.log("page:"+page) | |||
| this.loading = true | |||
| this.pageNow = page; | |||
| this.listArticles(); | |||
| }, | |||
| changePageSize(pageSize){ | |||
| this.loading = true | |||
| this.pageNow = 1; | |||
| this.pageSize = pageSize; | |||
| this.listArticles(); | |||
| }, | |||
| addField(){ | |||
| this.addFieldModelValue = true | |||
| }, | |||
| saveField(name){ | |||
| this.$refs[name].validate((valid) => { | |||
| if (valid) { | |||
| console.log(JSON.stringify(this.addFieldForm)) | |||
| createDictionary(this.addFieldForm).then((res)=>{ | |||
| this.$Message.success('Success!') | |||
| }).catch(function (error){ | |||
| }) | |||
| } else { | |||
| this.$Message.error('Fail!') | |||
| } | |||
| }) | |||
| }, | |||
| importDic(){ | |||
| this.dicImportModelValue = true | |||
| } | |||
| }, | |||
| mounted () { | |||
| this.contentType = this.$route.query.contentType; | |||
| this.listArticles(); | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .split { | |||
| border-bottom: 1px solid #eee; | |||
| padding-bottom: 15px; | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,497 @@ | |||
| <template> | |||
| <el-main style="width: 960px;margin: 0 auto;min-height: 500px"> | |||
| <el-row class="card_menu"> | |||
| <el-col :span="4"> | |||
| <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}"> | |||
| <div slot="header"> | |||
| <span>会员服务</span> | |||
| </div> | |||
| <div class="menu-item"> | |||
| <router-link to="/vip-service">会员名录</router-link> | |||
| </div> | |||
| <div class="menu-item">会员介绍</div> | |||
| <div class="menu-item active">入会申请</div> | |||
| <div class="menu-item">问题反馈</div> | |||
| </el-card> | |||
| </el-col> | |||
| <el-col :span="20"> | |||
| <el-card shadow="never" style="margin: 0 10px;"> | |||
| <h2 style="color: #333;text-align: center;margin: 15px auto">上海市集成电路行业协会入会申请表</h2> | |||
| <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form" label-position="left"> | |||
| <div class="table el-table el-table--fit el-table--border" style="width: 100%;border-radius: 4px"> | |||
| <div class="el-table__body-wrapper"> | |||
| <table class="el-table__body" cellspacing="0" cellpadding="0" border="0"> | |||
| <colgroup> | |||
| <col width="8.3333333333%"> | |||
| <col width="8.3333333333%"> | |||
| <col width="8.3333333333%"> | |||
| <col width="8.3333333333%"> | |||
| <col width="8.3333333333%"> | |||
| <col width="8.3333333333%"> | |||
| <col width="8.3333333333%"> | |||
| <col width="8.3333333333%"> | |||
| <col width="8.3333333333%"> | |||
| <col width="8.3333333333%"> | |||
| <col width="8.3333333333%"> | |||
| <col width="8.3333333333%"> | |||
| </colgroup> | |||
| <tbody> | |||
| <tr class="el-table__row"> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label="单位中文名称" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label="单位中文名称" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="7" class="el-table__cell"> | |||
| <el-form-item label="地址" prop="name" label-width="50px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="5" class="el-table__cell"> | |||
| <el-form-item label="邮编" prop="name" label-width="50px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="12" class="el-table__cell"> | |||
| <el-form-item label="所有制形式" prop="resource"> | |||
| <el-radio-group v-model="ruleForm.resource"> | |||
| <el-radio label="国企"></el-radio> | |||
| <el-radio label="外资"></el-radio> | |||
| <el-radio label="合资"></el-radio> | |||
| <el-radio label="民营"></el-radio> | |||
| </el-radio-group> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label="总投资" prop="name" label-width="60px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label="注册资本" prop="name" label-width="70px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label="营业执照登记号" prop="name" label-width="120px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label="企业代码" prop="name" label-width="70px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="6" class="el-table__cell" style="padding: 0 !important;"> | |||
| <el-form-item label="单位网址" prop="name" label-width="70px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="6" class="el-table__cell" style="padding-right: 10px"> | |||
| <el-row> | |||
| <el-col span="12"> | |||
| <el-form-item label="单位人数" prop="name" label-width="70px" style="margin: 0"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </el-col> | |||
| <el-col span="12"> | |||
| <el-form-item label="技术人员" prop="name" label-width="70px" style="margin: 0"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </el-col> | |||
| </el-row> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="4" class="el-table__cell"> | |||
| <el-form-item label="单位法人代表" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="4" class="el-table__cell"> | |||
| <el-form-item label="职务" prop="name" label-width="50px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="4" class="el-table__cell"> | |||
| <el-form-item label="手机号" prop="name" label-width="70px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="2" class="el-table__cell td-text"> | |||
| 单位对口协会<br/>负责人 | |||
| </td> | |||
| <td colspan="4" class="el-table__cell"> | |||
| <el-form-item label="姓名" prop="name" label-width="70px" style="margin-bottom: 10px;"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="职务" prop="name" label-width="70px" style="margin-bottom: 10px;"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="手机号" prop="name" label-width="70px" style="margin-bottom: 10px;"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="电话" prop="name" label-width="70px" style="margin-bottom: 10px;"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="传真" prop="name" label-width="70px" style="margin-bottom: 10px;"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="E-mail" prop="name" label-width="70px" style="margin-bottom: 10px;"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="2" class="el-table__cell td-text"> | |||
| 单位对口协会<br/>联系人 | |||
| </td> | |||
| <td colspan="4" class="el-table__cell"> | |||
| <el-form-item label="姓名" prop="name" label-width="70px" style="margin-bottom: 10px;"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="职务" prop="name" label-width="70px" style="margin-bottom: 10px;"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="手机号" prop="name" label-width="70px" style="margin-bottom: 10px;"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="电话" prop="name" label-width="70px" style="margin-bottom: 10px;"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="传真" prop="name" label-width="70px" style="margin-bottom: 10px;"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="E-mail" prop="name" label-width="70px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="2" class="el-table__cell td-text"> | |||
| 现有股东及<br/>持股情况 | |||
| </td> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label="控股方持股金额" prop="name" label-width="120px" style="margin-bottom: 10px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="其它股东持股金额" prop="name" label-width="120px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="4" class="el-table__cell"> | |||
| <el-form-item label="持股比例" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| <el-form-item label="持股比例" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px"> | |||
| <el-checkbox v-model="checked">晶圆制造</el-checkbox> | |||
| </td> | |||
| <td colspan="6" class="el-table__cell" style="margin: 0 !important;padding: 10px 0"> | |||
| <el-row style="padding: 0 10px;"> | |||
| <el-col span="20"> | |||
| <el-form-item label="制造技术" prop="name" style="margin-bottom: 0"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </el-col> | |||
| <el-col span="4" style="text-align: center;line-height: 30px"> | |||
| um工艺 | |||
| </el-col> | |||
| </el-row> | |||
| </td> | |||
| <td colspan="4" class="el-table__cell"> | |||
| <el-form-item label="年销售额" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px"> | |||
| <el-checkbox v-model="checked">封装测试</el-checkbox> | |||
| </td> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label=" 封装形式及型号" prop="name" label-width="110px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="4" class="el-table__cell"> | |||
| <el-form-item label="年销售额" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px"> | |||
| <el-checkbox v-model="checked">设计</el-checkbox> | |||
| </td> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label=" 产品及性能" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="4" class="el-table__cell"> | |||
| <el-form-item label="年销售额" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px"> | |||
| <el-checkbox v-model="checked">设备材料</el-checkbox> | |||
| </td> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label=" 产品及性能" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="4" class="el-table__cell"> | |||
| <el-form-item label="年销售额" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px"> | |||
| <el-checkbox v-model="checked">智能卡</el-checkbox> | |||
| </td> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label=" 产品及性能" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="4" class="el-table__cell"> | |||
| <el-form-item label="年销售额" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="2" class="el-table__cell td-text" style="text-align: left !important;padding-left: 20px"> | |||
| <el-checkbox v-model="checked">其它</el-checkbox> | |||
| </td> | |||
| <td colspan="10" class="el-table__cell"> | |||
| <el-form-item label=" 产品及性能" prop="name"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="2" class="el-table__cell td-text"> | |||
| 公司简介 | |||
| </td> | |||
| <td colspan="10" class="el-table__cell" style="padding-left: 10px;padding-right: 10px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="12" class="el-table__cell"> | |||
| <el-form-item label="会员等级" prop="desc"> | |||
| <el-radio-group v-model="ruleForm.resource"> | |||
| <el-radio label="一般会员">一般会员</el-radio> | |||
| <el-radio label="理事长单位">理事长单位</el-radio> | |||
| <el-radio label="副会长">副会长</el-radio> | |||
| <el-radio label="会长">会长</el-radio> | |||
| </el-radio-group> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="12" class="el-table__cell"> | |||
| <el-form-item label="产业链" prop="desc"> | |||
| <el-radio-group v-model="ruleForm.resource"> | |||
| <el-radio label="设计" style="margin-right: 10px">设计</el-radio> | |||
| <el-radio label="制造" style="margin-right: 10px">制造</el-radio> | |||
| <el-radio label="封装测试" style="margin-right: 10px">封装测试</el-radio> | |||
| <el-radio label="设备材料" style="margin-right: 10px">设备材料</el-radio> | |||
| <el-radio label="投融资" style="margin-right: 10px">投融资</el-radio> | |||
| <el-radio label="科研院所" style="margin-right: 10px">科研院所</el-radio> | |||
| <el-radio label="其它">其它</el-radio> | |||
| </el-radio-group> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label="会员标准" prop="name" label-width="70px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| <td colspan="6" class="el-table__cell"> | |||
| <el-form-item label="入会时间" prop="name" label-width="70px"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="12" class="el-table__cell"> | |||
| <el-row> | |||
| <el-col span="8" style="padding: 0 20px"> | |||
| <el-form-item label="填表单位(盖章)" label-width="120px" style="margin-bottom: 0"> | |||
| </el-form-item> | |||
| </el-col> | |||
| <el-col span="8" style="padding: 0 20px"> | |||
| <el-form-item label="填表人(签字)" label-width="100px" style="margin-bottom: 0"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </el-col> | |||
| <el-col span="8" style="padding: 0 20px"> | |||
| <el-form-item label="填表日期" label-width="70px" style="margin-bottom: 0"> | |||
| <el-input v-model="ruleForm.name"></el-input> | |||
| </el-form-item> | |||
| </el-col> | |||
| </el-row> | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="12" class="el-table__cell" style="padding-left: 20px"> | |||
| 备注:选择参加专业请在 里打“✔️” | |||
| </td> | |||
| </tr> | |||
| <tr class="el-table__row"> | |||
| <td colspan="2" class="el-table__cell" style="padding-left: 20px"> | |||
| 联系人:石建 | |||
| </td> | |||
| <td colspan="3" class="el-table__cell" style="padding-left: 20px"> | |||
| 电话:50809814 | |||
| </td> | |||
| <td colspan="3" class="el-table__cell" style="padding-left: 20px"> | |||
| 传真:60805259 | |||
| </td> | |||
| <td colspan="4" class="el-table__cell" style="padding-left: 20px"> | |||
| E-mail:wrr@sica.org.cn | |||
| </td> | |||
| </tr> | |||
| </tbody> | |||
| </table> | |||
| </div> | |||
| </div> | |||
| <div style="margin: 20px auto;text-align: center"> | |||
| <el-button plain class="text-linear">上传附件</el-button> | |||
| <el-button type="primary" style="letter-spacing: 3px">下载申请表</el-button> | |||
| </div> | |||
| </el-form> | |||
| </el-card> | |||
| </el-col> | |||
| </el-row> | |||
| </el-main> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data() { | |||
| return { | |||
| ruleForm: { | |||
| name: '', | |||
| region: '', | |||
| date1: '', | |||
| date2: '', | |||
| delivery: false, | |||
| type: [], | |||
| resource: '', | |||
| desc: '' | |||
| }, | |||
| rules: { | |||
| name: [ | |||
| {required: true, message: 'Please input Activity name', trigger: 'blur'}, | |||
| {min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur'} | |||
| ], | |||
| region: [ | |||
| {required: true, message: 'Please select Activity zone', trigger: 'change'} | |||
| ], | |||
| date1: [ | |||
| {type: 'date', required: true, message: 'Please pick a date', trigger: 'change'} | |||
| ], | |||
| date2: [ | |||
| {type: 'date', required: true, message: 'Please pick a time', trigger: 'change'} | |||
| ], | |||
| type: [ | |||
| {type: 'array', required: true, message: 'Please select at least one activity type', trigger: 'change'} | |||
| ], | |||
| resource: [ | |||
| {required: true, message: 'Please select activity resource', trigger: 'change'} | |||
| ], | |||
| desc: [ | |||
| {required: true, message: 'Please input activity form', trigger: 'blur'} | |||
| ] | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| submitForm(formName) { | |||
| this.$refs[formName].validate((valid) => { | |||
| if (valid) { | |||
| alert('submit!'); | |||
| } else { | |||
| console.log('error submit!!'); | |||
| return false; | |||
| } | |||
| }); | |||
| }, | |||
| resetForm(formName) { | |||
| this.$refs[formName].resetFields(); | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .menu-item { | |||
| text-align: center; | |||
| padding: 10px; | |||
| width: 100%; | |||
| } | |||
| .card_menu .menu-item.active { | |||
| border-left: 2px solid #427FCE; | |||
| background: #eee; | |||
| } | |||
| .form .el-input__inner { | |||
| border-radius: 0 !important; | |||
| } | |||
| .table td.el-table__cell { | |||
| border-bottom: 1px solid #ebeef5; | |||
| border-right: 1px solid #ebeef5; | |||
| } | |||
| .table td > .el-form-item { | |||
| margin-bottom: 0; | |||
| padding: 0 10px; | |||
| } | |||
| .table{ | |||
| font-size: 12px !important; | |||
| } | |||
| .table .el-radio__label,.table .el-checkbox__label{ | |||
| font-size: 12px !important; | |||
| } | |||
| .el-form-item__label { | |||
| font-size: 12px; | |||
| } | |||
| .td-text{ | |||
| text-align: center !important; | |||
| margin: 0 auto !important; | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,90 @@ | |||
| <template> | |||
| <el-main style="width: 960px;margin: 0 auto;min-height: 500px"> | |||
| <el-row class="card_menu"> | |||
| <el-col :span="4"> | |||
| <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}"> | |||
| <div slot="header"> | |||
| <span>会员服务</span> | |||
| </div> | |||
| <div class="menu-item active">会员名录</div> | |||
| <div class="menu-item">会员介绍</div> | |||
| <div class="menu-item">入会申请</div> | |||
| <div class="menu-item">问题反馈</div> | |||
| </el-card> | |||
| </el-col> | |||
| <el-col :span="20"> | |||
| <el-card shadow="never" style="margin: 0 10px;"> | |||
| <div style="text-align: center"> | |||
| <h2>上海市集成电路行业协会第五届理事会理事名单</h2> | |||
| <div style="margin: 10px"><span style="margin-right: 20px">作者:SICA</span><span>发布日期:2011年12月28日 星期三</span></div> | |||
| </div> | |||
| <template> | |||
| <el-table | |||
| :data="tableData" | |||
| border | |||
| style="width: 100%"> | |||
| <el-table-column | |||
| type="index" | |||
| align="center" | |||
| width="50" | |||
| label="序号"> | |||
| </el-table-column> | |||
| <el-table-column | |||
| prop="name" | |||
| label="理事单位名称" | |||
| align="center" | |||
| width="180"> | |||
| </el-table-column> | |||
| <el-table-column | |||
| prop="address" | |||
| align="center" | |||
| label="姓名"> | |||
| </el-table-column> | |||
| <el-table-column | |||
| prop="address" | |||
| align="center" | |||
| label="单位职务"> | |||
| </el-table-column> | |||
| <el-table-column | |||
| prop="address" | |||
| align="center" | |||
| label="专业"> | |||
| </el-table-column> | |||
| </el-table> | |||
| </template> | |||
| <el-pagination | |||
| background | |||
| layout="prev, pager, next" | |||
| :total="1000" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px"> | |||
| </el-pagination> | |||
| </el-card> | |||
| </el-col> | |||
| </el-row> | |||
| </el-main> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data () { | |||
| return { | |||
| tableData:[ | |||
| { | |||
| } | |||
| ] | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .menu-item{ | |||
| text-align: center; | |||
| padding: 10px; | |||
| width: 100%; | |||
| } | |||
| .card_menu .menu-item.active{ | |||
| border-left: 2px solid #427FCE; | |||
| background: #eee; | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,50 @@ | |||
| <template> | |||
| <el-main style="width: 960px;margin: 0 auto;min-height: 500px"> | |||
| <el-row class="card_menu"> | |||
| <el-col :span="4"> | |||
| <el-card class="box-card" shadow="never" :body-style="{ padding: '10px 0'}"> | |||
| <div slot="header"> | |||
| <span>通知</span> | |||
| </div> | |||
| <div class="menu-item active"><router-link to="/vip-service">会员服务</router-link></div> | |||
| <div class="menu-item">合作交流</div> | |||
| <div class="menu-item">发展研究</div> | |||
| <div class="menu-item">办公室</div> | |||
| </el-card> | |||
| </el-col> | |||
| <el-col :span="20"> | |||
| <el-card shadow="never" style="margin: 0 10px;"> | |||
| <ul style="list-style: none"> | |||
| <li style="padding: 10px;border-bottom: 1px solid #eee;margin: 5px 0" v-for="(item,index) in 10">{{ index+1 }}、中国站IP SoC China 2021将于9月15-16日在沪举行<span style="float:right">2021-11-22</span></li> | |||
| </ul> | |||
| <el-pagination | |||
| background | |||
| layout="prev, pager, next" | |||
| :total="1000" prev-text="上一页" next-text="下一页" style="float: right;margin: 10px"> | |||
| </el-pagination> | |||
| </el-card> | |||
| </el-col> | |||
| </el-row> | |||
| </el-main> | |||
| </template> | |||
| <script> | |||
| export default { | |||
| data () { | |||
| return { | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| .menu-item{ | |||
| text-align: center; | |||
| padding: 10px; | |||
| width: 100%; | |||
| } | |||
| .card_menu .menu-item.active{ | |||
| border-left: 2px solid #427FCE; | |||
| background: #eee; | |||
| } | |||
| </style> | |||