|
|
@@ -1,7 +1,8 @@
|
|
|
<template>
|
|
|
- <div >
|
|
|
- <el-button size="mini" @click="editBtn" :disabled="!!disabled">编 辑</el-button>
|
|
|
- <el-dialog title="编辑商品组" :visible.sync="dialogTableVisible" width="30%" direction="rtl" append-to-body>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" size="mini" @click="editBtn">编 辑</el-button>
|
|
|
+ <el-drawer title="编辑商品组" :visible.sync="drawer" size="40%" direction="rtl" append-to-body @close="onCancel">
|
|
|
+ <div class="drawer__panel">
|
|
|
<el-row :gutter="20">
|
|
|
<el-form :model="form" :rules="rules" ref="form" size="small" label-position="right" label-width="100px">
|
|
|
<el-col :span="24">
|
|
|
@@ -11,67 +12,46 @@
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="品牌:" prop="sa_brandid">
|
|
|
- <el-select v-model="form.sa_brandid" placeholder="请选择品牌" @change="getProductList(params.content.pageNumber = 1,$refs.table.allArr=[])" style="width: 100%">
|
|
|
- <el-option v-for="item in brandList()" :key="item.sa_brandid" :label="item.brandname"
|
|
|
+ <el-select v-model="form.sa_brandid" placeholder="请选择品牌" style="width: 100%" :disabled="true">
|
|
|
+ <el-option v-for="item in brandList" :key="item.sa_brandid" :label="item.brandname"
|
|
|
:value="item.sa_brandid" size="small">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" style="margin-bottom: 20px;margin-top: 22px">
|
|
|
- <label class="inline-16" style="font-size: 14px">可选商品:</label>
|
|
|
- <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search" v-model="search" @input="queryClick" @keyup.native.enter="queryClick" @clear="clearData()" style="width:260px;float: right" size="small" class="input-with-select inline-16" clearable>
|
|
|
- </el-input>
|
|
|
</el-col>
|
|
|
<el-col :span="24">
|
|
|
- <Table ref="table" v-model="form.itemno" :layout="tablecols" :data="productList" :custom="false" height="500px" @upDateData="upDateData">
|
|
|
- </Table>
|
|
|
- <div class="container normal-panel" style="text-align:right">
|
|
|
- <el-pagination
|
|
|
- style="text-align:right"
|
|
|
- background
|
|
|
- small
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page="params.content.pageNumber"
|
|
|
- :page-sizes="[20, 50, 100, 200]"
|
|
|
- layout="total,sizes, prev, pager, next, jumper"
|
|
|
- :total="total">
|
|
|
- </el-pagination>
|
|
|
- </div>
|
|
|
+ <el-form-item label="序号:" prop="sequence">
|
|
|
+ <el-input type="text" size="small" v-model="form.sequence"></el-input>
|
|
|
+ </el-form-item>
|
|
|
</el-col>
|
|
|
</el-form>
|
|
|
</el-row>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button size="small" @click="dialogTableVisible = false">取 消</el-button>
|
|
|
- <el-button type="primary" size="small" @click="submit">确 定</el-button>
|
|
|
</div>
|
|
|
- </el-dialog>
|
|
|
+ <div class="fixed__btn__panel">
|
|
|
+ <el-button size="small" @click="onCancel" class="normal-btn-width">取 消</el-button>
|
|
|
+ <el-button size="small" type="primary" @click="submit" class="normal-btn-width">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Table from './table'
|
|
|
export default {
|
|
|
- components:{Table},
|
|
|
+ props: ['data', 'type'],
|
|
|
data () {
|
|
|
return {
|
|
|
- dialogTableVisible:false,
|
|
|
- /* 当前选择的组 */
|
|
|
- seleteGroup:'',
|
|
|
- inputVisible: false,
|
|
|
- inputValue: '',
|
|
|
- productList:[],
|
|
|
- tablecols:[],
|
|
|
- total:0,
|
|
|
- search:'',
|
|
|
- form:{
|
|
|
- sa_brandid:'',
|
|
|
- groupname:'',
|
|
|
- itemno:'',
|
|
|
- tag:[]
|
|
|
+ drawer:false,
|
|
|
+ col:0,
|
|
|
+ tableData:[],
|
|
|
+ brandList:[],
|
|
|
+ form: {
|
|
|
+ sa_brandid: '',
|
|
|
+ groupname: '',
|
|
|
+ itemno: '',
|
|
|
+ tag: [],
|
|
|
+ sequence:''
|
|
|
},
|
|
|
- rules:{
|
|
|
+ rules: {
|
|
|
sa_brandid: [
|
|
|
{ required: true, message: '请选择品牌', trigger: 'blur' },
|
|
|
],
|
|
|
@@ -81,155 +61,94 @@ export default {
|
|
|
itemno: [
|
|
|
{ required: true, message: '请选择商品', trigger: 'blur' },
|
|
|
]
|
|
|
- },
|
|
|
- params: {
|
|
|
- "id": "20220923112503",
|
|
|
- "version":1,
|
|
|
- "content": {
|
|
|
- "nocache":true,
|
|
|
- "sa_itemgroupid":"",
|
|
|
- "pageNumber":1,
|
|
|
- "pageSize":20,
|
|
|
- "where":{
|
|
|
- "condition":""
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- props:['data','disabled'],
|
|
|
- inject:['productList','brandList'],
|
|
|
- watch: {
|
|
|
-
|
|
|
},
|
|
|
created () {
|
|
|
- this.tablecols = this.tool.tabelCol(this.$route.name)['addProductTable'].tablecols
|
|
|
- if (this.brandList()) {
|
|
|
- this.form.sa_brandid = this.brandList()[0].sa_brandid
|
|
|
- }
|
|
|
- console.log(this.brandList());
|
|
|
-
|
|
|
- this.getProductList()
|
|
|
+ this.getBrandList()
|
|
|
},
|
|
|
methods: {
|
|
|
- submit() {
|
|
|
- this.$refs.form.validate(async val => {
|
|
|
- if(val) {
|
|
|
- let res = await this.$api.requested({
|
|
|
- "id": "20220922164303",
|
|
|
- "version":1,
|
|
|
- "content": {
|
|
|
- "sa_itemgroupid":this.data.sa_itemgroupid,
|
|
|
- "sa_brandid":this.form.sa_brandid,
|
|
|
- "groupname":this.form.groupname,
|
|
|
- "itemno":this.form.itemno,
|
|
|
- "tag": this.form.tag
|
|
|
- }
|
|
|
- })
|
|
|
- this.tool.showMessage(res,() => {
|
|
|
- this.$emit('onSuccess')
|
|
|
- this.$refs.form.resetFields()
|
|
|
- this.dialogTableVisible = false
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- editBtn() {
|
|
|
- this.dialogTableVisible = true
|
|
|
- this.seleteGroup = this.data
|
|
|
- let temp = JSON.parse(JSON.stringify(this.seleteGroup))
|
|
|
- this.form = {
|
|
|
- sa_brandid:temp.sa_brandid,
|
|
|
- groupname:temp.groupname,
|
|
|
- itemno:temp.itemno,
|
|
|
- tag:temp.tag1
|
|
|
- }
|
|
|
- console.log(this.form);
|
|
|
-
|
|
|
- },
|
|
|
- handleClose(tag) {
|
|
|
- this.form.tag.splice(this.form.tag.indexOf(tag), 1);
|
|
|
- },
|
|
|
- showInput() {
|
|
|
- this.inputVisible = true;
|
|
|
- this.$nextTick(_ => {
|
|
|
- this.$refs.saveTagInput.$refs.input.focus();
|
|
|
- });
|
|
|
- },
|
|
|
- handleInputConfirm() {
|
|
|
- let inputValue = this.inputValue;
|
|
|
- if (inputValue) {
|
|
|
- this.form.tag.push(inputValue);
|
|
|
- }
|
|
|
- this.inputVisible = false;
|
|
|
- this.inputValue = '';
|
|
|
+ editBtn () {
|
|
|
+ this.drawer=true
|
|
|
+ this.form = Object.assign({},this.form,this.data)
|
|
|
},
|
|
|
- upDateData (data) {
|
|
|
- if (data.length == 0) {
|
|
|
- this.form.itemno = ''
|
|
|
- } {
|
|
|
- this.form.itemno = true
|
|
|
- }
|
|
|
+ onCancel(){
|
|
|
+ this.drawer = false
|
|
|
+ this.form={
|
|
|
+ sa_brandid: '',
|
|
|
+ groupname: '',
|
|
|
+ itemno: '',
|
|
|
+ tag: []
|
|
|
+ },
|
|
|
+ this.tableData = []
|
|
|
},
|
|
|
- /* 可选择的商品列表 */
|
|
|
- async getProductList() {
|
|
|
- this.params.content.sa_brandid = this.form.sa_brandid
|
|
|
- let res = await this.$api.requested(this.params)
|
|
|
- this.productList = res.data
|
|
|
- this.total = res.total
|
|
|
- console.log(this.productList,'商品');
|
|
|
+ addProduct (row) {
|
|
|
+ this.tableData.push(row)
|
|
|
+ const res = new Map();
|
|
|
+ this.tableData = this.tableData.filter((item) => !res.has(item['itemid']) && res.set(item['itemid'], 1));
|
|
|
},
|
|
|
- handleSizeChange(val) {
|
|
|
- // console.log(`每页 ${val} 条`);
|
|
|
- this.params.content.pageSize = val
|
|
|
- this.getProductList()
|
|
|
+ deleteProduct (row) {
|
|
|
+ this.tableData = this.tableData.filter(e=>{
|
|
|
+ return e.itemid !== row.itemid
|
|
|
+ })
|
|
|
},
|
|
|
- handleCurrentChange(val) {
|
|
|
- // console.log(`当前页: ${val}`);
|
|
|
- this.params.content.pageNumber = val
|
|
|
- this.getProductList()
|
|
|
+ async submit() {
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "id": "20220922164303",
|
|
|
+ "content": this.form
|
|
|
+ })
|
|
|
+ this.tool.showMessage(res,() => {
|
|
|
+ this.$emit('onSuccess')
|
|
|
+ this.drawer = false
|
|
|
+ })
|
|
|
},
|
|
|
- clearData(){
|
|
|
- this.search = ""
|
|
|
+ /* 可选择的品牌列表 */
|
|
|
+ async getBrandList() {
|
|
|
+ let res = await this.$api.requested({
|
|
|
+ "id": "20220922085103",
|
|
|
+ "version":1,
|
|
|
+ "content": {
|
|
|
+ "nocache":true,
|
|
|
+ "where":{
|
|
|
+ "condition":""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.brandList = res.data
|
|
|
+ console.log(this.brandList,'品牌');
|
|
|
},
|
|
|
- queryClick(){
|
|
|
- this.params.content.where.condition = this.search
|
|
|
- this.getProductList()
|
|
|
+ async onSuccess () {
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "id": "20220922164303",
|
|
|
+ "content": {
|
|
|
+ "sa_itemgroupid":this.groupdata.sa_itemgroupid, //sa_itemgroupid<=0时 为新增
|
|
|
+ "sa_brandid":this.groupdata.sa_brandid,
|
|
|
+ "groupname":this.groupdata.groupname,
|
|
|
+ "itemno":this.tableData[0].itemno,
|
|
|
+ "tag": []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.$emit('onSuccess')
|
|
|
+ this.drawer = false
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
-/deep/.el-dialog__body {
|
|
|
- padding-top: 10px !important;
|
|
|
- padding-bottom: 0 !important;
|
|
|
-}
|
|
|
-/deep/.dialog-footer {
|
|
|
- margin-top: 10px !important;
|
|
|
-}
|
|
|
-/deep/.el-form-item__content {
|
|
|
- width: calc(100% - 100px) !important;
|
|
|
-}
|
|
|
-/deep/.el-select {
|
|
|
- width: 100% !important;
|
|
|
+.dialog-footer {
|
|
|
+ margin-top: 32px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
/deep/.el-form-item {
|
|
|
- width: 100% !important;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
-.el-tag + .el-tag {
|
|
|
- margin-left: 10px;
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-.button-new-tag {
|
|
|
- margin-left: 10px;
|
|
|
- height: 32px;
|
|
|
- line-height: 30px;
|
|
|
- padding-top: 0;
|
|
|
- padding-bottom: 0;
|
|
|
+/deep/.el-form-item__content {
|
|
|
+ width: calc(100% - 100px);
|
|
|
}
|
|
|
-.input-new-tag {
|
|
|
- width: 90px;
|
|
|
- margin-left: 10px;
|
|
|
+/deep/.el-pagination {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
</style>
|