提交 9d87743b authored 作者: zax's avatar zax

基础资料管理中单位管理部分静态页面

上级 cf4550ba
This source diff could not be displayed because it is too large. You can view the blob instead.
<template>
<div class="newsPage">
<div class="content">
<p class="title">
动态详情
</p>
<p class="name"><span class="line"></span>{{name}}</p>
<p class="other">
<span>标签:{{type}}</span>
<span>发布时间:{{time}}</span>
<span>发布机构:{{person}}</span>
<span>机构类型:{{type2}}</span>
</p>
<div class="news">
<el-scrollbar style="height: 100%">
<div class="newAll"></div>
</el-scrollbar>
</div>
</div>
<div class="newsPage">
<div class="content">
<p class="title">
动态详情
</p>
<p class="name"><span class="line"></span>{{name}}</p>
<p class="other">
<span>标签:{{type}}</span>
<span>发布时间:{{time}}</span>
<span>发布机构:{{person}}</span>
<span>机构类型:{{type2}}</span>
</p>
<div class="news">
<el-scrollbar style="height: 100%">
<div class="newAll"></div>
</el-scrollbar>
</div>
</div>
</div>
</template>
<script>
import $ from 'jquery';
export default {
import $ from 'jquery';
export default {
data () {
return {
name: '天津麒麟正式更名为麒麟软件 国产操作系统主力军吹响出征号角!',
time: '2020-02-26 12:13:13',
person: '中国软件',
type: '新闻',
type2: '公司',
news:`2月18日,中国电子旗下中国软件发布公告:中国软件子公司天津麒麟换股收购子公司中标软件事项,按照协议约定,天津麒麟更名为麒麟软件有限公司(简称麒麟软件),已办理完成相关工商变更登记手续,并取得新的营业执照。至此,由天津麒麟和中标软件整合而成的麒麟软件工商手续业已完成,基础软件的央企主力军吹响出征号角,中国操作系统新旗舰正式起航!<br><img src="static/img/1.d16d70ca.jpg" style="width: 600px;display: block;margin: 0 auto;"><b>麒麟软件:</b><br><br>为顺应产业发展趋势、市场客户需求和国家网络空间安全战略需要,发挥中央企业在国家关键信息基础设施建设中的主力军作用,中国电子旗下两家操作系统公司:中标软件和天津麒麟,实现强强整合,打造中国操作系统新旗舰——麒麟软件有限公司。<br><br>麒麟软件以安全可信操作系统技术为核心,旗下拥有“中标麒麟”“银河麒麟”两大产品品牌,既面向通用领域打造安全创新操作系统和相应解决方案,又面向国防专用领域打造高安全高可靠操作系统和解决方案,现已形成了服务器操作系统、桌面操作系统、嵌入式操作系统、麒麟云等产品,能够同时支持飞腾、龙芯、申威、兆芯、海光、鲲鹏等国产CPU。企业坚持开放合作打造产业生态,为客户提供完整的国产化解决方案。<br><br>麒麟软件注重核心技术创新,先后申请专利320余项,其中授权专利138项,登记软件著作权340余项,主持和参与起草国家、行业、联盟技术标准30余项,荣获国家科技进步一等奖在内的各类国家级、省部级和行业奖项400余个,并被授予“国家规划布局内重点软件企业”“国家高技术产业化示范工程”等称号。企业注重质量体系和创新能力打造,通过了CMMI5级评估,现有博士后工作站、省部级基础软件工程中心等,具有雄厚的科研能力和严格的管理规范。<br><br>麒麟软件在天津、北京、上海、长沙、广州、太原、郑州、成都、西安、沈阳等地设有分支机构,服务网点遍布全国31个省会城市。旗下的操作系统系列产品,在党政、国防、金融、电信、能源、交通、教育、医疗等行业获得广泛应用。根据赛迪顾问统计,麒麟软件旗下操作系统产品,连续8年位列中国Linux市场占有率第一名。`
}
return {
name: '天津麒麟正式更名为麒麟软件 国产操作系统主力军吹响出征号角!',
time: '2020-02-26 12:13:13',
person: '中国软件',
type: '新闻',
type2: '公司',
news:`2月18日,中国电子旗下中国软件发布公告:中国软件子公司天津麒麟换股收购子公司中标软件事项,按照协议约定,天津麒麟更名为麒麟软件有限公司(简称麒麟软件),已办理完成相关工商变更登记手续,并取得新的营业执照。至此,由天津麒麟和中标软件整合而成的麒麟软件工商手续业已完成,基础软件的央企主力军吹响出征号角,中国操作系统新旗舰正式起航!<br><img src="static/img/1.d16d70ca.jpg" style="width: 600px;display: block;margin: 0 auto;"><b>麒麟软件:</b><br><br>为顺应产业发展趋势、市场客户需求和国家网络空间安全战略需要,发挥中央企业在国家关键信息基础设施建设中的主力军作用,中国电子旗下两家操作系统公司:中标软件和天津麒麟,实现强强整合,打造中国操作系统新旗舰——麒麟软件有限公司。<br><br>麒麟软件以安全可信操作系统技术为核心,旗下拥有“中标麒麟”“银河麒麟”两大产品品牌,既面向通用领域打造安全创新操作系统和相应解决方案,又面向国防专用领域打造高安全高可靠操作系统和解决方案,现已形成了服务器操作系统、桌面操作系统、嵌入式操作系统、麒麟云等产品,能够同时支持飞腾、龙芯、申威、兆芯、海光、鲲鹏等国产CPU。企业坚持开放合作打造产业生态,为客户提供完整的国产化解决方案。<br><br>麒麟软件注重核心技术创新,先后申请专利320余项,其中授权专利138项,登记软件著作权340余项,主持和参与起草国家、行业、联盟技术标准30余项,荣获国家科技进步一等奖在内的各类国家级、省部级和行业奖项400余个,并被授予“国家规划布局内重点软件企业”“国家高技术产业化示范工程”等称号。企业注重质量体系和创新能力打造,通过了CMMI5级评估,现有博士后工作站、省部级基础软件工程中心等,具有雄厚的科研能力和严格的管理规范。<br><br>麒麟软件在天津、北京、上海、长沙、广州、太原、郑州、成都、西安、沈阳等地设有分支机构,服务网点遍布全国31个省会城市。旗下的操作系统系列产品,在党政、国防、金融、电信、能源、交通、教育、医疗等行业获得广泛应用。根据赛迪顾问统计,麒麟软件旗下操作系统产品,连续8年位列中国Linux市场占有率第一名。`
}
},
created() {
},
mounted(){
$('.newAll').html(this.news);
let val = this.$store.getters.getSidebar;
val.push(
{
name: '新闻页',
path: 'newsPage'
}
)
this.$store.commit('changeSidebar', val);
$('.newAll').html(this.news);
let val = this.$store.getters.getSidebar;
val.push(
{
name: '新闻页',
path: 'newsPage'
}
)
this.$store.commit('changeSidebar', val);
},
methods: {
},
......@@ -52,56 +52,56 @@ export default {
},
watch: {
}
}
}
</script>
<style scoped>
.newsPage{
background: #ebf0f8;
width: 100%;
}
.newsPage .content{
margin: 40px;
height: 841px;
background: #fff;
overflow: hidden;
cursor: default;
}
.newsPage .content .title{
padding: 30px 0 0 70px;
font-size: 20px;
color: #233b6e;
}
.newsPage .content .name{
margin-top: 36px;
margin-left: 70px;
font-size: 18px;
color: #333;
}
.newsPage .content .line{
display: inline-block;
width: 5px;
height: 20px;
vertical-align: middle;
margin-right: 7px;
background: #4877e6;
}
.other{
margin-left: 80px;
margin-top: 23px;
font-size: 16px;
color: #999;
}
.other>span{
margin-right: 40px;
}
.news{
margin-top: 32px;
padding: 0 70px 0 70px;
font-size: 16px;
color: #666;
height: 615px;
}
.news>>>.el-scrollbar__wrap {
overflow-x: hidden;
}
.newsPage{
background: #ebf0f8;
width: 100%;
}
.newsPage .content{
margin: 40px;
height: 841px;
background: #fff;
overflow: hidden;
cursor: default;
}
.newsPage .content .title{
padding: 30px 0 0 70px;
font-size: 20px;
color: #233b6e;
}
.newsPage .content .name{
margin-top: 36px;
margin-left: 70px;
font-size: 18px;
color: #333;
}
.newsPage .content .line{
display: inline-block;
width: 5px;
height: 20px;
vertical-align: middle;
margin-right: 7px;
background: #4877e6;
}
.other{
margin-left: 80px;
margin-top: 23px;
font-size: 16px;
color: #999;
}
.other>span{
margin-right: 40px;
}
.news{
margin-top: 32px;
padding: 0 70px 0 70px;
font-size: 16px;
color: #666;
height: 615px;
}
.news>>>.el-scrollbar__wrap {
overflow-x: hidden;
}
</style>
<template>
<div class="role">
<el-row>
<el-col :span="24">
<div class="content">
<p class="title">单位管理</p>
<p class="search">
<span class="searchVal">
<span>单位名称:</span>
<el-input v-model="searchName" size="medium" placeholder="请输入"></el-input>
</span>
<span class="searchVal">
<span>单位类别:</span>
<el-select v-model="classVal" placeholder="请选择">
<el-option
v-for="item in companyClass"
:key="item.name"
:label="typeCompany(item)"
:value="typeCompany(item)">
</el-option>
</el-select>
</span>
<span class="button" @click="search">搜索</span>
<span class="button" @click="addCompany">新建单位</span>
<span class="button import" @click="importCompany">导入单位
<el-upload
style="margin-top: -35px;"
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:file-list="fileList">
<el-button size="small" type="primary" style="width: 100px;height: 34px;background-color: rgba(0,0,0,0);border: none"></el-button>
</el-upload>
</span>
</p>
<div class="common-table">
<el-table
highlight-current-row
max-height="840"
:data="allData"
stripe
style="width: 100%;margin-bottom: 10px;">
<el-table-column
prop="name"
label="单位名称"
align="center">
</el-table-column>
<el-table-column
:formatter="typeCompany"
prop="type"
label="单位类别"
align="center">
</el-table-column>
<el-table-column
:formatter="statusCompany"
prop="status"
label="准入状态"
align="center">
</el-table-column>
<el-table-column
prop="number"
label="联系方式"
align="center">
</el-table-column>
<el-table-column
prop="type"
label="查看详情"
align="center">
<template slot-scope='scope'>
<span class="change"><img src="./img/look.png">查看</span>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="block" v-if='totalLength >= 10'>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageSize"
background
layout="prev, pager, next"
:total="totalLength">
</el-pagination>
</div>
<!-- 分页 -->
</div>
</el-col>
</el-row>
<!-- 新增 / 编辑 公用弹窗 -->
<el-dialog :visible.sync="openModel" class="model">
<img src="../../../assets/img/close.png" class="closeModel" @click="reset()">
<component :is="components" :name="companyName" :list="companyList" @on-cancel="reset" @on-name="getName"></component>
</el-dialog>
</div>
</template>
<script>
import newCompany from './newCompany';
export default {
data () {
return {
searchName: '',
openModel: false, // 弹框开关
components: '', // 当前弹框内容
companyName: '',
companyList: '',
classVal: '',
companyClass: [],
totalLength: 0,
currentPage: 1, // 分页第一页
pageSize: 8, // 每页个数
allData: [
{
name: '单位名称',
type: '类型',
number: '联系方式',
address: '地址',
status: '状态'
}
],
fileList: [], // 导入列表
typeVal: { // 单位类别
'1': '中心方',
'2': '建设方',
'3': '承建方',
'4': '产品供应商(供应软件或硬件)',
'5': '监理方',
'6': '测试机构',
'7': '专家'
}
}
},
components: {
newCompany
},
mounted() {
let val = this.$store.getters.getSidebar;
val.push(
{
name: '单位管理',
path: 'company'
}
)
this.$store.commit('changeSidebar', val);
this.unit();
},
methods: {
// 获取单位类别
unit() {
this.$server.getUnitFindAll().then(res => {
console.log(res.data.data)
this.companyClass = res.data.data;
})
},
// 单位搜索
search() {
if (!this.searchName || !this.classVal) {
this.$message.error('单位名称和单位类别不可为空!');
return;
}
let message = {};
this.companyClass.map(item => {
let type = this.typeVal[item.type];
if (this.classVal === type) {
console.log(item)
message = item;
}
})
let data = {
page: this.currentPage,
pageSize: this.pageSize,
t: message
}
this.$server.postUnitSearch(data).then(res => {
this.allData = res.data.data.rows;
this.totalLength = this.allData.length;
})
},
// 点击分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
// 当前页数
handleCurrentChange(val) {
this.currentPage = val;
this.search();
},
// 关闭弹框
reset() {
this.openModel = false;
this.components = '';
this.companyName = ''
},
// 获取单位名称
getName(val) {
if (val !== '') {
this.companyName = val;
this.components = 'authority';
}
},
// 单位准入状态转换
statusCompany (row) {
return row.status === 1 ? '已准入': '未被准入'
},
// 单位类别转换
typeCompany (row) {
return this.typeVal[String(row.type)]
},
// 新建单位
addCompany() {
this.openModel = true;
this.components = 'newCompany';
},
handlePreview(file) {
console.log(file);
},
importCompany() {}
}
}
</script>
<style scoped>
.role{
background: #ebf0f8;
width: 100%;
}
.role .content{
margin: 40px;
height: 841px;
background: #fff;
overflow: hidden;
}
.role .content .title{
padding: 30px 0 0 60px;
font-size: 20px;
color: #233b6e;
}
.role .content .search{
position: relative;
margin-top: 36px;
padding: 0px 70px 0px 70px;
display: flex;
}
.role .content .searchVal{
width: 280px;
display: flex;
font-size: 18px;
color: #4663a6;
}
.role .content .searchVal>span{
width: 140px;
display: inline-block;
line-height: 34px;
}
.role .content .change{
color: #4877e6;
cursor: pointer;
}
.role .content .change>img{
margin-right: 3px;
}
.role .content .common-table{
box-shadow: 4px 4px 5px rgba(72,119,230,0.1);
border: .5px solid transparent;
border-radius: 10px;
}
.role>>>.el-input__inner{
border: 1px solid rgba(8,104,157,.3);
border-radius: 2px;
font-size: 18px;
color: #999;
height: 34px;
line-height: 34px;
width: 180px;
}
.role .content .button{
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
background: #4877e6;
cursor: pointer;
margin-left: 35px;
border-radius: 2px;
color: #fff;
font-size: 18px;
}
.role .content .button:hover{
background: rgba(72,119,230,.6);
}
.role .content .import{
position: absolute;
right: 70px;
}
.role .content .common-table{
margin: 24px 70px 0 70px;
}
.role .content .common-table>>>.el-table th > .cell{
font-size: 18px;
color: #333;
font-weight: normal;
}
.role .content .common-table>>>.el-table th.is-leaf{
height: 70px;
}
.role .content .common-table>>>.el-table tr{
font-size: 18px;
}
.role .content .common-table>>>.el-table{
color: #233b6e;
}
.role .content .common-table>>>.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
background-color: #fff;
}
.role .content .common-table>>>.el-table--enable-row-hover .el-table__body tr:hover>td{
background-color: #f5f8fd;
}
.role .content .common-table>>>.el-table th.is-leaf, .el-table td {
border-bottom: 1px solid #d5e3ff;
}
.role .content .common-table>>>.el-table__body tr, .el-table__body td {
padding: 0;
height: 60px;
background: #f5f8fd;
}
.role .content .block{
text-align: right;
padding: 30px 70px 0 0;
}
.role .content>>>.el-pagination.is-background .el-pager li{
background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
color: #fff;
}
.role .content>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
background-image: linear-gradient(to bottom, #7a9eeb,#274acf);
color: #fff;
}
.role .content>>>.el-table td{
border-bottom: 1px solid #d5e3ff;
}
.role .content>>>.btn-prev,.role .content>>>.btn-next{
background: #c5d5f7;
background-image: linear-gradient(to bottom, #c5d5f7,#7a95e6);
color: #fff;
}
.role .content>>>.btn-prev:disabled,.dynamicList .content>>>.btn-next:disabled{
color: #C0C4CC;
}
.role .content>>>.el-table__body tr.current-row > td{
background: #f5f8fd;
}
</style>
<template>
<div class="details">
<el-row>
<el-col :span="24">
<div class="content">
<p class="title">单位信息</p>
<ul>
<li></li>
</ul>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'details'
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<div class="newrole">
<p class="dialog-header">
<span>新增单位</span>
</p>
<div class="company-content" style="text-align: center; margin-top: 4px;">
<p class="add">
<span class="addVal">
<span>单位名称:</span>
<el-input v-model="nameVal" size="medium" placeholder="请输入"></el-input>
</span>
<span class="addVal">
<span>单位类别:</span>
<el-radio-group v-model="classVal" size="small" style="line-height: 34px;width: 100%;text-align: left">
<el-radio label="1">备选项1</el-radio>
<el-radio label="2">备选项2</el-radio>
<el-radio label="3">备选项2</el-radio>
</el-radio-group>
</span>
<span class="addVal">
<span>是否准入:</span>
<el-radio-group v-model="getVal" size="small" style="line-height: 34px;width: 100%;text-align: left">
<el-radio label="1"></el-radio>
<el-radio label="2"></el-radio>
</el-radio-group>
</span>
<span class="addVal">
<span>单位地址:</span>
<el-input v-model="address" size="medium" placeholder="请输入"></el-input>
</span>
<span class="addVal">
<span>联系方式:</span>
<el-input v-model="tell" size="medium" placeholder="请输入"></el-input>
</span>
</p>
</div>
<p class="line"></p>
<p class="buttonClick">
<span class="buttonCancl" @click="cancel">取消</span>
<span class="buttonSave" @click="save">确定</span>
</p>
</div>
</template>
<script>
export default {
data () {
return {
classVal: '',
nameVal: '',
getVal: '',
address: '',
tell: ''
}
},
created() {
},
mounted(){
},
methods: {
cancel() {
this.$emit('on-cancel')
},
save() {
console.log(this.classVal);
if (this.classVal === '') {
this.$message.error('角色名称不能为空!')
} else {
this.$emit('on-name', this.classVal)
}
}
},
components: {
},
watch: {
}
}
</script>
<style scoped>
.newrole .add{
display: inline-block;
}
.newrole .addVal{
width: 390px;
display: flex;
font-size: 18px;
color: #666;
text-align: center;
margin-top: 24px;
}
.newrole .addVal>span{
width: 140px;
display: inline-block;
line-height: 34px;
}
.newrole>>>.el-input__inner{
border: 1px solid rgba(8,104,157,.3);
border-radius: 2px;
font-size: 18px;
color: #999;
height: 34px;
line-height: 34px;
width: 180px;
}
.newrole .line{
margin: 29px 30px 0 30px;
height: 1px;
background: rgba(72,119,230,0.2);
}
.newrole .buttonClick{
display: flex;
justify-content: space-evenly;
margin-top: 20px;
}
.newrole .company-content>>>.el-radio{
margin-right: 22px;
}
.newrole .company-content>>>.el-input__inner{
width: 290px;
}
</style>
......@@ -62,6 +62,12 @@ export default new Router({
name: 'role',
component: resolve => require(['../components/basicInformation/role/role.vue'], resolve)
},
// 基础资料管理-单位管理
{
path: '/company',
name: 'company',
component: resolve => require(['../components/basicInformation/company/company.vue'], resolve)
}
]
}
]
......
......@@ -26,8 +26,17 @@ const server = {
method: 'post',
data: data
});
}
},
getUnitFindAll() { // 获取所有单位列表
return axios('/unit/findAll', {
method: 'get'
});
},
postUnitSearch(data) { // 获取单位列表分页
return axios('/unit/search', {
method: 'post',
data: data
});
},
}
export default server;
import Vue from 'vue'
import { Row, Col, Carousel, CarouselItem, Scrollbar, Input, Button, Table, TableColumn, Pagination, Dialog,
Message,} from 'element-ui'
import { Row, Col, Carousel, CarouselItem, Scrollbar, Input, Button, Table, TableColumn, Pagination, Dialog,Select,Radio,Option,
Upload, Message,} from 'element-ui'
import './element-variables.scss'
Vue.use(Row);
Vue.use(Col);
......@@ -13,4 +13,8 @@ Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Select);
Vue.use(Option);
Vue.use(Radio);
Vue.use(Upload);
Vue.prototype.$message = Message;
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论