Skip to content

9
912project
提交 9d87743b authored 作者: zax's avatar zax
浏览文件
操作

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

上级 cf4550ba
显示空白字符变更
内嵌 并排
正在显示 包含 527 行增加 和 8 行删除
package-lock.json deleted 100644 → 0
浏览文件 @ cf4550ba
This source diff could not be displayed because it is too large. You can view the blob instead.
src/components/XCalliance/newsPage/newsPage.vue
浏览文件 @ 9d87743b
......@@ -21,8 +21,8 @@
</template>
<script>
import $ from 'jquery';
export default {
import $ from 'jquery';
export default {
data () {
return {
name: '天津麒麟正式更名为麒麟软件 国产操作系统主力军吹响出征号角！',
......@@ -52,7 +52,7 @@ export default {
},
watch: {
}
}
}
</script>
<style scoped>
.newsPage{
......
src/components/basicInformation/company/company.vue 0 → 100644
浏览文件 @ 9d87743b
<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>
src/components/basicInformation/company/details.vue 0 → 100644
浏览文件 @ 9d87743b
<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
src/components/basicInformation/company/newCompany.vue 0 → 100644
浏览文件 @ 9d87743b
<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>
src/router/index.js
浏览文件 @ 9d87743b
......@@ -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)
}
]
}
]
......
src/services/server.js
浏览文件 @ 9d87743b
......@@ -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;
src/tools/element.js
浏览文件 @ 9d87743b
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论