fengdong777
2 years ago
5 changed files with 495 additions and 195 deletions
@ -1,200 +1,257 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
<div class="tab-header webtop"> |
|||
<!-- 标题 --> |
|||
<div>商品品牌</div> |
|||
<!-- start 添加修改按钮 --> |
|||
<div> |
|||
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button> |
|||
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
|||
</div> |
|||
<div> |
|||
|
|||
<div class="tab-header webtop"> |
|||
<!-- 标题 --> |
|||
<div>商品品牌</div> |
|||
<!-- start 添加修改按钮 --> |
|||
<div> |
|||
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button> |
|||
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button> |
|||
</div> |
|||
|
|||
<div class="listconadd"> |
|||
|
|||
<el-card class="box-card"> |
|||
<div class="item"> |
|||
<span class="item_text">品牌名称：</span> |
|||
<el-select v-model="form.name" placeholder="请选择品牌名称" class="item_input" @change="getType"> |
|||
<el-option v-for="(item,i) in crudeList" :key="i" :label="item.name" :value="item.number" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">品牌编号：</span> |
|||
<el-input v-model="form.number" placeholder="" :readonly="true" class="item_input" clearable /> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">产品名称：</span> |
|||
<el-select v-model="form.prodSid" placeholder="请选择产品名称" class="item_input" > |
|||
<el-option v-for="(item,i) in sidlist" :key="i" :label="item.name" :value="item.prodSid" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">类别名称：</span> |
|||
<el-input v-model="form.typeList.name" placeholder="" class="item_input" clearable /> |
|||
</div> |
|||
</el-card> |
|||
|
|||
</div> |
|||
|
|||
<div class="listconadd"> |
|||
|
|||
<el-card class="box-card" > |
|||
<div class="item"> |
|||
<span class="item_text">商品名称：</span> |
|||
<el-input v-model="form.name" placeholder="" class="item_input" clearable /> |
|||
</div> |
|||
|
|||
<div class="item"> |
|||
<span class="item_text">名称编号：</span> |
|||
<el-input v-model="form.number" placeholder="" class="item_input" clearable /> |
|||
</div> |
|||
<div class="item"> |
|||
<span class="item_text">品牌名称：</span> |
|||
<el-select v-model="form.prodSid" placeholder="" class="item_input" > |
|||
<el-option v-for="(item,i) in sidlist" :key="i" :label="item.name" :value="item.sid" /> |
|||
</el-select> |
|||
</div> |
|||
|
|||
<div class="item" > |
|||
<span style="font-size: 18px;margin-left: 90px;padding-right: 10px;">添加类别：</span> |
|||
<el-button @click="caozuo" type="primary">操作</el-button> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/api/baseInfo/commodityBrand/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
submitdisabled: false, |
|||
crudeList: [], |
|||
crudeLists: [], |
|||
flowmeterLists: [], |
|||
flowmeterList: [], |
|||
sidlist: [], |
|||
form: { |
|||
<el-dialog title="添加商品类别" :visible.sync="entry" width="60%"> |
|||
<el-form ref="form" :inline="true" :model="form" label-width="80px"> |
|||
<div v-for="(item, index) in form.typeList" :key="index"> |
|||
<el-form-item |
|||
label="类别名称" |
|||
:prop="'typeList.' + index + '.name'" |
|||
for="inputID" |
|||
> |
|||
<el-input id="inputID" v-model="item.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="类别编码" |
|||
:prop="'typeList.' + index + '.number'" |
|||
for="inputIDs" |
|||
> |
|||
<el-input id="inputIDs" v-model="item.number"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button v-if="index+1 == form.typeList.length" @click="addItem(item,index)" size="small" type="primary">增加</el-button> |
|||
<el-button v-if="index !== 0" @click="deleteItem(item, index)" size="small" type="danger">删除</el-button> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
<div style="margin-top: 20px;margin-left: 40px; "> |
|||
<el-button type="primary" @click="trues()">确定</el-button> |
|||
</div> |
|||
</el-form> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import req from '@/api/baseInfo/commodityBrand/index.js' |
|||
export default { |
|||
data() { |
|||
return { |
|||
submitdisabled: false, |
|||
entry: false, |
|||
sidlist: [], |
|||
form: { |
|||
name: "", |
|||
number: "", |
|||
prodSid:'', |
|||
typeList:[{ |
|||
name: "", |
|||
number: "", |
|||
prodSid:'', |
|||
typeList:[ |
|||
{ |
|||
name:'', |
|||
number:'' |
|||
} |
|||
] |
|||
}, |
|||
listQuery: { |
|||
current: 1, |
|||
size: 100, |
|||
params: { |
|||
name:'' |
|||
}, |
|||
number: "" |
|||
}] |
|||
}, |
|||
arry: { |
|||
name:'', |
|||
number:'' |
|||
}, |
|||
listQuery: { |
|||
current: 1, |
|||
size: 100, |
|||
params: { |
|||
name:'' |
|||
}, |
|||
} |
|||
}, |
|||
created() { |
|||
this.getlist() |
|||
this.getSid() |
|||
}, |
|||
methods: { |
|||
saveOrUpdate() { |
|||
// req.save(this.formobj) |
|||
// .then(resp => { |
|||
// if (resp.success) { |
|||
// this.$message({ |
|||
// showClose: true, |
|||
// type: 'success', |
|||
// message: resp.msg |
|||
// }) |
|||
// this.handleReturn("true") |
|||
// } else { |
|||
// // 根据resp.code进行异常情况处理 |
|||
// } |
|||
// }) |
|||
// .catch(() => {}) |
|||
console.log(this.form) |
|||
|
|||
}, |
|||
handleReturn(isreload) { |
|||
if (isreload === 'true') this.$emit('reloadlist') |
|||
this.form = { |
|||
} |
|||
}, |
|||
created() { |
|||
this.getlist() |
|||
}, |
|||
methods: { |
|||
saveOrUpdate() { |
|||
let arrlist=this.form.typeList |
|||
let lastlist=arrlist.slice(-1) |
|||
if(this.form.name && this.form.number && this.form.prodSid){ |
|||
if(lastlist[0].name && lastlist[0].number){ |
|||
req.saveList(this.form) |
|||
.then(resp => { |
|||
if (resp.success) { |
|||
this.$message({ |
|||
showClose: true, |
|||
type: 'success', |
|||
message: resp.msg |
|||
}) |
|||
this.handleReturn("true") |
|||
} else { |
|||
// 根据resp.code进行异常情况处理 |
|||
} |
|||
}) |
|||
.catch(() => {}) |
|||
this.form= { |
|||
name: "", |
|||
number: "", |
|||
} |
|||
this.$emit('doback') |
|||
}, |
|||
getlist(){ |
|||
req.selectList().then((res)=>{ |
|||
if (res.success) { |
|||
this.crudeLists = res.data |
|||
for (var i = 0; i < this.crudeLists.length; i++) { |
|||
|
|||
let item = { |
|||
name: this.crudeLists[i].name, |
|||
number: this.crudeLists[i].number, |
|||
|
|||
} |
|||
this.crudeList.push(item) |
|||
prodSid:'', |
|||
typeList:[{ |
|||
name: "", |
|||
number: "" |
|||
}] |
|||
} |
|||
|
|||
}else{ |
|||
this.$alert('检测到您未输入类别内容，请输入或删除', '提示信息', { |
|||
confirmButtonText: '确定', |
|||
callback: action => { |
|||
this.entry=true |
|||
} |
|||
}) |
|||
}, |
|||
getType(value) { |
|||
const choose = this.crudeLists.filter((item) => item.number === value) |
|||
this.form.name = choose[0].name |
|||
this.form.number = value |
|||
console.log(this.form); |
|||
}, |
|||
getSid(){ |
|||
req.listPages(this.listQuery).then((res)=>{ |
|||
this.sidlist = res.data.records |
|||
}) |
|||
}); |
|||
} |
|||
}else{ |
|||
this.$message({ |
|||
message: '请检查内容是否填写', |
|||
type: 'warning' |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.box-card { |
|||
margin-left: 60px; |
|||
margin-right: 60px; |
|||
min-width: 70%; |
|||
margin-top: 20px; |
|||
|
|||
.item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
margin-top: 15px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
|
|||
.item_text { |
|||
flex: 0.8; |
|||
font-size: 18px; |
|||
text-align: right; |
|||
}, |
|||
handleReturn(isreload) { |
|||
if (isreload === 'true') this.$emit('reloadlist') |
|||
this.$emit('doback') |
|||
}, |
|||
getlist(){ |
|||
req.selectList().then((res)=>{ |
|||
if (res.success) { |
|||
this.sidlist = res.data |
|||
} |
|||
|
|||
.item_input { |
|||
flex: 4; |
|||
font-size: 16px; |
|||
margin-left: 10px; |
|||
margin-right: 80px; |
|||
}) |
|||
}, |
|||
addItem(item) { |
|||
if(item.name && item.number){ |
|||
this.form.typeList.push({ |
|||
name: "", |
|||
number: "" |
|||
}); |
|||
}else{ |
|||
this.$message({ |
|||
message: '请输入内容后在添加', |
|||
type: 'warning' |
|||
}); |
|||
} |
|||
|
|||
.item_left_input { |
|||
width: 20%; |
|||
|
|||
}, |
|||
sure(form) { |
|||
console.log(this.form.typeList.length, "length"); |
|||
this.$refs[form].validate(valid => { |
|||
if (valid) { |
|||
alert("submit!"); |
|||
} else { |
|||
console.log("error submit!!"); |
|||
return false; |
|||
} |
|||
|
|||
.item_left_text { |
|||
height: 30px; |
|||
margin-left: 20px; |
|||
line-height: 30px; |
|||
color: #018AD2; |
|||
padding: 0px 15px; |
|||
border: 1.5px solid #018AD2; |
|||
border-radius: 5px; |
|||
|
|||
}); |
|||
}, |
|||
deleteItem(item, index) { |
|||
this.form.typeList.splice(index, 1); |
|||
console.log(this.form.typeList, "删除"); |
|||
}, |
|||
caozuo(){ |
|||
this.entry=true |
|||
}, |
|||
trues(){ |
|||
this.entry=false |
|||
console.log(this.form); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.box-card { |
|||
margin-left: 60px; |
|||
margin-right: 60px; |
|||
min-width: 70%; |
|||
margin-top: 20px; |
|||
|
|||
.item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
margin-top: 15px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
.item_text { |
|||
flex: 0.8; |
|||
font-size: 18px; |
|||
text-align: right; |
|||
} |
|||
|
|||
.item_input { |
|||
flex: 4; |
|||
font-size: 16px; |
|||
margin-left: 10px; |
|||
margin-right: 80px; |
|||
} |
|||
|
|||
.item_left_input { |
|||
width: 20%; |
|||
} |
|||
|
|||
.item_left_text { |
|||
height: 30px; |
|||
margin-left: 20px; |
|||
line-height: 30px; |
|||
color: #018AD2; |
|||
padding: 0px 15px; |
|||
border: 1.5px solid #018AD2; |
|||
border-radius: 5px; |
|||
|
|||
} |
|||
|
|||
.item_right { |
|||
flex: 1; |
|||
justify-items: center; |
|||
|
|||
.item_right_list_text { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.item_right { |
|||
flex: 1; |
|||
justify-items: center; |
|||
|
|||
.item_right_list_text { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.item_right_list_delect { |
|||
color: #5E94FF; |
|||
margin-left: 20px; |
|||
font-size: 16px; |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
.item_right_list_delect { |
|||
color: #5E94FF; |
|||
margin-left: 20px; |
|||
font-size: 16px; |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
} |
|||
</style> |
|||
|
|||
|
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue