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