提交 428cfe28 authored 作者: zax's avatar zax

合并分支 'zax' 到 'master'

规则配置 查看合并请求 !79
<template>
<div class="UnDependence">
<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="searchVal" size="medium" placeholder="请输入"></el-input>
</span>
<span class="button searchBtn" @change="search('search')">搜索</span>
</p>
<div class="common-table">
<el-table
highlight-current-row
max-height="840"
:data="allData"
@row-click="details"
stripe
style="width: 100%;">
<el-table-column
prop="technologyName"
label="关键技术"
align="center">
</el-table-column>
<el-table-column
prop="target"
label="关键字"
align="center">
</el-table-column>
<el-table-column
prop="number"
label="操作"
align="center">
<template>
<span class="change revise"><span class="img support-img"></span>支持国产化</span>
<span class="change delete"><span class="img Unsupport-img"></span>不支持国产化</span>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageSize"
background
layout="prev, pager, next, jumper"
:total="totalLength">
</el-pagination>
</div>
<!-- 分页 -->
</div>
</el-col>
</el-row>
<!-- 新增 / 编辑 公用弹窗 -->
<el-dialog :visible.sync="openModel" class="model">
<span class="closeModel"></span>
<component :is="components" @on-cancel="reset"></component>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'roleDispose',
data () {
return {
searchVal: '',
allData: [{technologyName: '1'}],
totalLength: 0,
currentPage: 1, // 分页第一页
pageSize: 8, // 每页个数
openModel: false,
components: ''
}
},
methods: {
// 点击分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
// 当前页数
handleCurrentChange(val) {
console.log(val)
},
// 关闭弹框
reset() {
this.openModel = false;
this.components = '';
},
}
}
</script>
<style scoped>
.UnDependence{
background: #ebf0f8;
width: 100%;
}
.UnDependence .content{
margin: 40px;
height: 841px;
background: #fff;
overflow: hidden;
}
.UnDependence .content .title{
padding: 30px 0 0 60px;
font-size: 20px;
color: #233b6e;
}
.UnDependence .content .search{
position: relative;
margin-top: 36px;
padding: 0px 70px 0px 70px;
display: flex;
}
.UnDependence .content .searchVal{
width: 280px;
display: flex;
font-size: 18px;
color: #4663a6;
}
.UnDependence .content .searchVal>span{
width: 75px;
display: inline-block;
line-height: 34px;
}
.UnDependence .content .button{
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
background: #4877e6;
cursor: pointer;
margin-left: 100px;
border-radius: 4px;
color: #fff;
font-size: 18px;
}
.UnDependence .content .button:hover{
background: rgba(72,119,230,.6);
}
.UnDependence .content .img{
width: 17px;
height: 17px;
display: inline-block;
vertical-align: middle;
}
.UnDependence .support-img{
background-image: url("./img/select.png");
}
.Unsupport-img{
background-image: url("./img/un-select.png");
}
.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped:hover td .support-img{
width: 19px;
height: 18px;
background-image: url("./img/select-h.png");
/*表格双行hover样式*/
}
.el-table--enable-row-hover .el-table__body tr:hover>td .support-img{
width: 19px;
height: 18px;
background-image: url("./img/select-h.png");
/*表格单行hover样式*/
}
</style>
\ No newline at end of file
<template>
<div class="add-role">
<p class="dialog-header">
<span>新增规则</span>
</p>
<div class="company-content" style="text-align: center; margin-top: 14px;">
<p class="new">
<span class="addVal">
<span>设置关键字:</span>
<el-input v-model="name" size="medium" placeholder="请输入"></el-input>
<span style="margin-left: 10px">关键技术选择:</span>
<el-select v-model="form.technologyId" @change="search('search')" placeholder="请选择" clearable>
<el-option
v-for="item in tableDataAdd"
:key="item.id"
:label="item.technologyName"
:value="item.id">
</el-option>
</el-select>
</span>
<span class="addVal" style="width: 350px">
<span>范围:</span>
<el-select v-model="form.suffix" @change="search('search')" placeholder="请选择" clearable>
<el-option label="java" value="java"></el-option>
<el-option label="js" value="js"></el-option>
<el-option label="xml" value="xml"></el-option>
<el-option label="css" value="css"></el-option>
<el-option label="py" value="py"></el-option>
<el-option label="html" value="html"></el-option>
<el-option label="cpp" value="cpp"></el-option>
</el-select>
</span>
<span class="addVal">
<span>内容:</span>
<el-input type="textarea" :rows="2" v-model="textarea" 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 {
name: 'addRole',
data () {
return {
form: {},
tableDataAdd: [],
textarea: ''
}
},
methods: {
cancel() {
this.$emit('on-cancel')
},
save() {}
}
}
</script>
<style scoped>
.add-role .new{
display: inline-block;
}
.add-role .new{
right: 220px;
}
.add-role .addVal{
/*width: 390px;*/
width: 710px;
display: flex;
font-size: 18px;
color: #666;
text-align: center;
margin-top: 40px;
}
.add-role .addVal>span{
width: 160px;
display: inline-block;
line-height: 34px;
text-align: right;
}
.add-role .line{
margin: 40px 30px 0 30px;
height: 1px;
background: rgba(72,119,230,0.2);
}
.add-role .buttonClick{
display: flex;
justify-content: space-evenly;
margin-top: 30px;
}
.add-role .company-content>>>.el-radio{
margin-right: 30px;
margin-bottom: 11px;
width: 49px;
}
.add-role .company-content>>>.el-input__inner, .add-role .company-content>>>.el-input{
width: 220px;
}
</style>
\ No newline at end of file
<template>
<div class="roleDispose">
<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="searchVal" size="medium" placeholder="请输入"></el-input>
</span>
<span class="button searchBtn" @change="search('search')">搜索</span>
<span class="button add" @click="addRole"><img src="../../assets/img/add.png"></span>
</p>
<div class="common-table">
<el-table
highlight-current-row
max-height="840"
:data="allData"
stripe
style="width: 100%;">
<el-table-column
prop="technologyName"
label="关键技术"
align="center">
</el-table-column>
<el-table-column
prop="target"
label="关键字"
align="center">
</el-table-column>
<el-table-column
prop="suffix"
label="范围"
align="center">
</el-table-column>
<el-table-column
prop="technologyName"
label="操作"
align="center">
<template>
<span class="change revise"><span class="img-revise"></span>修改</span>
<span class="change delete"><span class="img"><img src="./img/role-delete.png"/></span>删除</span>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-size="pageSize"
background
layout="prev, pager, next, jumper"
:total="totalLength">
</el-pagination>
</div>
<!-- 分页 -->
</div>
</el-col>
</el-row>
<!-- 新增 / 编辑 公用弹窗 -->
<el-dialog :visible.sync="openModel" class="model">
<span class="closeModel" @click="reset()"></span>
<component :is="components" @on-cancel="reset"></component>
</el-dialog>
</div>
</template>
<script>
import addRole from './addRole';
export default {
name: 'roleDispose',
data () {
return {
searchVal: '',
allData: [{technologyName: '1'}],
totalLength: 0,
currentPage: 1, // 分页第一页
pageSize: 8, // 每页个数
openModel: false,
components: ''
}
},
methods: {
// 新建规则
addRole() {
this.openModel = true;
this.components = 'addRole';
},
// 点击分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
// 当前页数
handleCurrentChange(val) {
console.log(val)
},
// 关闭弹框
reset() {
this.openModel = false;
this.components = '';
},
},
components: {
addRole
}
}
</script>
<style scoped>
.roleDispose{
background: #ebf0f8;
width: 100%;
}
.roleDispose .content{
margin: 40px;
height: 841px;
background: #fff;
overflow: hidden;
}
.roleDispose .content .title{
padding: 30px 0 0 60px;
font-size: 20px;
color: #233b6e;
}
.roleDispose .content .search{
position: relative;
margin-top: 36px;
padding: 0px 70px 0px 70px;
display: flex;
}
.roleDispose .content .searchVal{
width: 280px;
display: flex;
font-size: 18px;
color: #4663a6;
}
.roleDispose .content .searchVal>span{
width: 75px;
display: inline-block;
line-height: 34px;
}
.roleDispose .content .button{
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
background: #4877e6;
cursor: pointer;
margin-left: 100px;
border-radius: 4px;
color: #fff;
font-size: 18px;
}
.roleDispose .content .button:hover{
background: rgba(72,119,230,.6);
}
.roleDispose .content .add{
right: 72px;
position: absolute;
width: 50px;
}
.roleDispose .revise{
color: #4877e6;
margin-right: 10px;
}
.roleDispose .delete{
color: #ff9a3c;
}
.roleDispose .img-revise{
width: 17px;
height: 17px;
display: inline-block;
vertical-align: middle;
background-image: url("./img/role-revise.png");
margin-right: 5px;
}
/*表格按钮hover*/
.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped:hover td .img-revise{
width: 19px;
height: 19px;
background-image: url("./img/role-revise-h.png");
/*表格双行hover样式*/
}
.el-table--enable-row-hover .el-table__body tr:hover>td .img-revise{
width: 19px;
height: 19px;
background-image: url("./img/role-revise-h.png");
/*表格单行hover样式*/
}
.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped:hover td .revise{
color: #ffffff;
/*表格双行hover样式*/
}
.el-table--enable-row-hover .el-table__body tr:hover>td .revise{
color: #ffffff;
/*表格单行hover样式*/
}
</style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论