Skip to content

E
ElectricitySheep
Commit e1a1b079 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 74013aab
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 196 deletions
src/components/CommodityMan/SpecificationTemplate.vue
View file @ e1a1b079
<template>
<div class="SpeTemplate">
<div class="head-title">
规格模板
<el-button @click="openDig" style="float:right;margin-top: -5px;margin-left:20px;" size="small" type="primary">新增模板管理</el-button>
规格模板
<el-button @click="openDig" style="float:right;margin-top: -5px;margin-left:20px;" size="small" type="primary">
新增模板管理</el-button>
</div>
<div class="content">
<div>
<div class="searchInput" style="width:250px">
<el-input style="display:inline-block;width:225px;height:30px"
placeholder="请输入规格名搜索"
@keyup.enter.native="msg.pageIndex=1,getList()"
v-model="msg.Name"
@clear="msg.pageIndex=1,getList()"
size="small"
clearable>
</el-input>
<span @click="msg.pageIndex=1,getList()" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
</div>
<div>
<div class="searchInput" style="width:250px">
<el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入规格名搜索"
@keyup.enter.native="msg.pageIndex=1,getList()" v-model="msg.Name" @clear="msg.pageIndex=1,getList()"
size="small" clearable>
</el-input>
<span @click="msg.pageIndex=1,getList()" class="el-icon-search"
style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
</div>
<el-table
:data="tableData"
v-loading="loading"
border
style="width: 100%;margin:20px 0">
<el-table-column
prop="Name"
width="300"
label="规格名">
</el-table-column>
<el-table-column
prop="address"
label="规格值">
<template slot-scope="scope">
<el-tag size="small" v-for="(item,index) in scope.row.SpecList" :key="index" style="margin:0 5px" type="info">{{item}}</el-tag>
</template>
</el-table-column>
<el-table-column
prop="address"
width="200"
label="操作">
<template slot-scope="scope">
<img @click="Edit(scope.row)" style="width:32px;height:32px" src="../../assets/img/userman/edit.png" alt="">
<img @click="Delete(scope.row)" style="width:32px;height:32px;margin:0 10px" src="../../assets/img/userman/del.png" alt="">
</template>
</el-table-column>
</el-table>
<el-pagination style="text-align:right"
background
@current-change="handleCurrentChange"
:page-size="msg.pageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
<el-table :data="tableData" v-loading="loading" border style="width: 100%;margin:20px 0">
<el-table-column prop="Name" width="300" label="规格名">
</el-table-column>
<el-table-column prop="address" label="规格值">
<template slot-scope="scope">
<el-tag size="small" v-for="(item,index) in scope.row.SpecList" :key="index" style="margin:0 5px"
type="info">{{item}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="address" width="200" label="操作">
<template slot-scope="scope">
<img @click="Edit(scope.row)" style="width:32px;height:32px" src="../../assets/img/userman/edit.png" alt="">
<img @click="Delete(scope.row)" style="width:32px;height:32px;margin:0 10px"
src="../../assets/img/userman/del.png" alt="">
</template>
</el-table-column>
</el-table>
<el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
layout="prev, pager, next" :total="total">
</el-pagination>
</div>
<!-- 新增规格模板 -->
<el-dialog custom-class="attr-template" title="充值" :visible.sync="ggmbDig" width="960px">
<el-dialog custom-class="attr-template" title="规格" :visible.sync="ggmbDig" width="960px">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
<el-form-item label="规格名" prop="Name">
<el-input size="small" v-model="addMsg.Name" style="width:330px"></el-input>
</el-form-item>
<el-form-item label="规格值" prop="SpecList">
<div flex="dir:left" style="flex-wrap: wrap;">
<div v-for="(item,index) in SpecList" :key="index" class="attr-list">
<el-input size="small" v-model="item.num" style="width:152px"></el-input>
<i @click="deleteGgz(item,index)" class="el-icon-error close"></i>
</div>
<span @click="addGgz" class="point blue">添加规格值</span>
<div flex="dir:left" style="flex-wrap: wrap;">
<div v-for="(item,index) in SpecList" :key="index" class="attr-list">
<el-input size="small" v-model="item.num" style="width:152px"></el-input>
<i @click="deleteGgz(item,index)" class="el-icon-error close"></i>
</div>
<span @click="addGgz" class="point blue">添加规格值</span>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
......@@ -74,188 +58,202 @@
<el-button size="small" type="primary" @click="submitForm('addMsg')">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
export default {
name: "SpeTemplate",
data(){
return{
ggmbDig:false,
msg:{
pageIndex:1,
pageSize:15,
Name:'',
Id:0,
Content:'',
},
total:0,
tableData:[
{Name:'11'}
],
loading:false,
addMsg:{
Id:0,
Name:'',
SpecList:[],
},
rules:{
SpecList: [],
Name: [
{ required: true, message: '规格名不能为空', trigger: 'blur' }
],
},
SpecList:[],
data() {
return {
ggmbDig: false,
msg: {
pageIndex: 1,
pageSize: 15,
Name: '',
Id: 0,
Content: '',
},
total: 0,
tableData: [{
Name: '11'
}],
loading: false,
addMsg: {
Id: 0,
Name: '',
SpecList: [],
},
rules: {
SpecList: [],
Name: [{
required: true,
message: '规格名不能为空',
trigger: 'blur'
}],
},
SpecList: [],
}
}
},
created(){
this.getList();
created() {
this.getList();
},
methods:{
Delete(item){
let that=this;
that.$confirm('是否删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.apipost('/api/product/DelProductSpecificationInfo',{SpecificationId:item.Id},
res => {
if (res.data.resultCode === 1) {
this.getList();
this.Success(res.data.message)
methods: {
Delete(item) {
let that = this;
that.$confirm('是否删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.apipost('/api/product/DelProductSpecificationInfo', {
SpecificationId: item.Id
},
res => {
if (res.data.resultCode === 1) {
this.getList();
this.Success(res.data.message)
} else {
this.Error(res.data.message);
}
},
null
);
}).catch(() => {
});
},
Edit(row){
this.addMsg=row;
this.SpecList=[];
row.SpecList.forEach(item=>{
let obj={
num:item
}
this.SpecList.push(obj)
})
this.ggmbDig=true;
} else {
this.Error(res.data.message);
}
},
null
);
}).catch(() => {
},
deleteGgz(item,index){
this.SpecList.splice(index,1);
},
addGgz(){
let obj={num:''}
this.SpecList.push(obj);
},
openDig(){
this.addMsg={
Id:0,
Name:'',
SpecList:[],
});
},
Edit(row) {
this.addMsg = row;
this.SpecList = [];
row.SpecList.forEach(item => {
let obj = {
num: item
}
this.SpecList.push(obj)
})
this.ggmbDig = true;
},
deleteGgz(item, index) {
this.SpecList.splice(index, 1);
},
addGgz() {
let obj = {
num: ''
}
this.SpecList.push(obj);
},
openDig() {
this.addMsg = {
Id: 0,
Name: '',
SpecList: [],
}
this.SpecList = [];
this.ggmbDig = true;
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
for (let i = 0; i < this.SpecList.length; i++) {
if (this.SpecList[i].num == "") {
this.Error("规格值不能为空");
return;
}
}
this.SpecList=[];
this.ggmbDig=true;
},
submitForm(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
for(let i=0;i<this.SpecList.length;i++){
if(this.SpecList[i].num==""){
this.Error("规格值不能为空");
return;
}
}
this.addMsg.SpecList=[];
this.SpecList.forEach(item=>{
this.addMsg.SpecList.push(item.num);
})
this.apipost('/api/product/SetProductSpecificationInfo',this.addMsg,
res => {
if (res.data.resultCode === 1) {
this.getList();
this.Success(res.data.message)
this.ggmbDig=false;
this.addMsg.SpecList = [];
this.SpecList.forEach(item => {
this.addMsg.SpecList.push(item.num);
})
this.apipost('/api/product/SetProductSpecificationInfo', this.addMsg,
res => {
if (res.data.resultCode === 1) {
this.getList();
this.Success(res.data.message)
this.ggmbDig = false;
} else {
this.Error(res.data.message);
}
},
null
);
} else {
return false;
this.Error(res.data.message);
}
});
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
getList(){
this.loading=true;
this.apipost("/api/product/GetProductSpecificationPageList", this.msg, res => {
this.loading=false;
if(res.data.resultCode==1){
this.total=res.data.data.count;
let pageData=res.data.data.pageData;
this.tableData=pageData;
}
})
},
},
null
);
} else {
return false;
}
});
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
getList() {
this.loading = true;
this.apipost("/api/product/GetProductSpecificationPageList", this.msg, res => {
this.loading = false;
if (res.data.resultCode == 1) {
this.total = res.data.data.count;
let pageData = res.data.data.pageData;
this.tableData = pageData;
}
})
},
},
};
};
</script>
<style>
.attr-template .attr-list {
.attr-template .attr-list {
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
cursor: move;
}
.attr-template .close {
}
.attr-template .close {
position: absolute;
top: -4px;
right: -4px;
font-size: 16px;
cursor: pointer;
background: #ffffff;
}
.SpeTemplate .content .searchInput{
}
.SpeTemplate .content .searchInput {
border: 1px solid #DCDFE6;
border-radius: 4px;
}
.SpeTemplate .content .searchInput .el-input__inner{
border:none;outline:none;
}
.SpeTemplate .content .searchInput .el-input__inner {
border: none;
outline: none;
height: 30px;
line-height: 30px;
}
.SpeTemplate .content .searchInput{
}
.SpeTemplate .content .searchInput {
line-height: normal;
display: inline-table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
width:250px;
width: 250px;
margin-right: 20px;
}
.SpeTemplate .content{
}
.SpeTemplate .content {
background: #fff;
margin-top:10px;
margin-top: 10px;
padding: 20px;
box-sizing: border-box;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment