提交 ba1ebd06 authored 作者: CRS's avatar CRS

new

上级 a09097bb
<template>
<div class="addTechnical">
<p class="dialog-header">
<span>新增技术路线</span>
</p>
<div style="margin-left: 140px; margin-top: 45px;">
<p>
<span>路线名称:</span>
<el-input v-model="addVal" size="medium" placeholder="请输入"></el-input>
</p>
<p class="select">
<span>产品组合:</span>
<el-select v-model="product1" placeholder="请选择" clearable>
<el-option
v-for="item in product1List"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="product2" placeholder="请选择" clearable style="margin-left: 20px;">
<el-option
v-for="item in product2List"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<img src="./img/delN.png" class="del">
</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 {
props: [],
data () {
return {
addVal: '',
product1: '',
product2: '',
product1List: [
{
value: 1,
label: '服务器'
}, {
value: 2,
label: 'CPU'
}, {
value: 3,
label: '操作系统'
}, {
value: 4,
label: '数据库'
}, {
value: 5,
label: '中间件'
},
{
value: 6,
label: '其他'
}
],
product2List: []
}
},
created() {
},
mounted(){
},
methods: {
// 保存
save() {
},
// 取消
cancel() {
this.$emit('on-cancel')
}
},
components: {
},
watch: {
'product1':function (val) {
console.log(val);
this.$server.getFindByForm(val).then((res) => { // 数据请求
console.log(res.data.data)
if (res.data.code === 200) {
this.product2List = res.data.data;
}
})
}
}
}
</script>
<style scoped>
.addTechnical >>>.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: 200px;
}
.addTechnical >>>.el-input{
display: inline;
}
.addTechnical .line{
margin: 150px 30px 0 30px;
height: 1px;
background: rgba(72,119,230,0.2);
}
.addTechnical .buttonClick{
display: flex;
justify-content: space-evenly;
margin-top: 20px;
}
.addTechnical .del:hover{
content: url("./img/del.png");
cursor: pointer;
}
.addTechnical .select{
margin-top: 10px;
}
.addTechnical .select img{
margin-left: 10px;
}
</style>
<template>
<div class="technical">
<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="technicalVal" size="medium" placeholder="请输入"></el-input>
</span>
<span class="searchVal">
<span style="width: 130px;">产品名称:</span>
<el-input v-model="productVal" size="medium" placeholder="请输入"></el-input>
</span>
<span class="button" @click="search">搜索</span>
<span class="button new" @click="addperson">新增技术路线</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
prop="roleName"
label="应用项目"
align="center">
<template slot-scope="scope">
<span class="change">查看项目</span>
</template>
</el-table-column>
<el-table-column
prop="num"
label="应用次数"
align="center">
</el-table-column>
<el-table-column
prop="number"
label="产品组合"
align="center">
<template slot-scope="scope">
<span class="change" @click="product(scope.row)">产品管理</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"
:total="totleLength">
</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" @on-cancel="reset"></component>
</el-dialog>
</div>
</template>
<script>
import add from './addTechnical'
export default {
data () {
return {
currentPage: 1, // 分页第一页
pagesize: 8, // 每页个数
totleLength: 0, // 获取后台传的所有数据的长度
openModel: false, // 弹框开关
components: '', // 当前弹框内容
technicalVal: '', // 技术路线名称
productVal: '', // 产品名称
allData:[], // 列表内容
}
},
created() {
},
mounted(){
this.init();
},
methods: {
// 初始请求
init() {
let val;
if (this.technicalVal !== '' || this.productVal !== '') {
val = {
'page': this.currentPage,
'pageSize': this.pagesize,
't': {
}
}
} else {
val = {
'page': this.currentPage,
'pageSize': this.pagesize
}
}
console.log(val);
this.$server.postTechSearch(val).then((res) => { // 数据请求
console.log(res.data.data)
if (res.data.code === 200) {
this.allData = res.data.data.rows;
this.totleLength = res.data.data.total;
}
})
},
// 搜索栏
search() {
this.init();
},
// 点击分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
// 当前页数
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
this.currentPage = val;
this.init();
},
// 关闭弹框
reset() {
this.init();
this.openModel = false;
},
// 新增技术路线
addperson() {
this.openModel = true;
this.components = 'add';
},
// 查看产品管理
product(row) {
console.log(row);
}
},
components: {
add
},
watch: {
}
}
</script>
<style scoped>
.technical{
background: #ebf0f8;
width: 100%;
}
.technical .content{
margin: 40px;
height: 841px;
background: #fff;
overflow: hidden;
cursor: default;
}
.technical .content .title{
padding: 30px 0 0 60px;
font-size: 20px;
color: #233b6e;
}
.technical .content .search{
position: relative;
margin-top: 36px;
padding: 0px 70px 0px 70px;
display: flex;
}
.technical .content .searchVal{
width: 335px;
display: flex;
font-size: 18px;
color: #4663a6;
}
.technical .content .searchVal>span{
width: 200px;
display: inline-block;
line-height: 34px;
}
.technical .content .searchVal:nth-child(2),.technical .content .searchVal:nth-child(3){
margin-left: 4%;
}
.technical .content .change{
color: #4877e6;
cursor: pointer;
}
.technical .content .change>img{
margin-right: 3px;
}
.technical .content>>>.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;
}
.technical>>>.el-select .el-input .el-select__caret{
line-height: 25px;
}
.technical .content .button{
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
text-align: center;
background: #4877e6;
cursor: pointer;
margin-left: 30px;
border-radius: 2px;
color: #fff;
font-size: 18px;
}
.technical .content .button:hover{
background: rgba(72,119,230,.6);
}
.technical .content .new{
position: absolute;
right: 70px;
width: 128px;
}
</style>
...@@ -183,7 +183,7 @@ export default { ...@@ -183,7 +183,7 @@ export default {
}, },
{ {
name: '技术路线', name: '技术路线',
path: '' path: 'technical'
} }
] ]
}, },
......
...@@ -133,6 +133,12 @@ export default new Router({ ...@@ -133,6 +133,12 @@ export default new Router({
name: 'addComplaintManagement', name: 'addComplaintManagement',
component: resolve => require(['../components/complaint/complaintManagement/addComplaintManagement.vue'], resolve) component: resolve => require(['../components/complaint/complaintManagement/addComplaintManagement.vue'], resolve)
}, },
// 技术路线管理
{
path: '/technical',
name: 'technical',
component: resolve => require(['../components/admittance/technical/technical.vue'], resolve)
},
] ]
} }
] ]
......
...@@ -136,5 +136,16 @@ const server = { ...@@ -136,5 +136,16 @@ const server = {
data: data data: data
}); });
}, },
postTechSearch(data) { // 技术路线列表
return axios('/tech/search', {
method: 'post',
data: data
});
},
getFindByForm(id) { // 根据产品类型获取产品组合
return axios('/produce/findByForm/' + id, {
method: 'get'
});
},
} }
export default server; export default server;
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论