|
@@ -1,12 +1,195 @@
|
|
|
<template>
|
|
|
- <div>add</div>
|
|
|
+ <div class="inline-16">
|
|
|
+ <el-button type="primary" size="small" @click="dialogTableVisible=true" v-if="type == 'add'">新增产品组</el-button>
|
|
|
+ <el-button type="text" size="small" @click="editBtn" v-else>编辑</el-button>
|
|
|
+ <el-dialog title="新增产品" :visible.sync="dialogTableVisible" width="30%">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-form label-position="right" ref="form" :rules="rules" inline label-width="100px" :model="form" size="small">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="产品组名称" prop="groupname">
|
|
|
+ <el-input v-model="form.groupname" placeholder="请输入商品组名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="品牌" prop="sa_brandid">
|
|
|
+ <el-select v-model="form.sa_brandid" placeholder="请选择品牌">
|
|
|
+ <el-option
|
|
|
+ v-for="item in brandData"
|
|
|
+ :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">
|
|
|
+ <el-form-item label="商品" prop="itemno">
|
|
|
+ <el-select v-model="form.itemno" placeholder="请选择商品">
|
|
|
+ <el-option
|
|
|
+ v-for="item in productData"
|
|
|
+ :key="item.itemno"
|
|
|
+ :label="item.itemname"
|
|
|
+ :value="item.itemno"
|
|
|
+ size="small">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="自定义标签" prop="tag" style="margin-bottom:0px; !important">
|
|
|
+ <el-tag
|
|
|
+ :key="tag"
|
|
|
+ v-for="tag in form.tag"
|
|
|
+ closable
|
|
|
+ :disable-transitions="false"
|
|
|
+ @close="handleClose(tag)">
|
|
|
+ {{tag}}
|
|
|
+ </el-tag>
|
|
|
+ <el-input
|
|
|
+ class="input-new-tag"
|
|
|
+ v-if="inputVisible"
|
|
|
+ v-model="inputValue"
|
|
|
+ ref="saveTagInput"
|
|
|
+ size="small"
|
|
|
+ @keyup.enter.native="handleInputConfirm"
|
|
|
+ @blur="handleInputConfirm"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New 标签</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <div>
|
|
|
+ <el-button @click="dialogTableVisible = false" size="small">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submit" size="small">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
-
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ dialogTableVisible:false,
|
|
|
+ /* 当前选择的组 */
|
|
|
+ seleteGroup:'',
|
|
|
+ inputVisible: false,
|
|
|
+ inputValue: '',
|
|
|
+ form:{
|
|
|
+ sa_brandid:'',
|
|
|
+ groupname:'',
|
|
|
+ itemno:'',
|
|
|
+ tag:[]
|
|
|
+ },
|
|
|
+ rules:{
|
|
|
+ sa_brandid: [
|
|
|
+ { required: true, message: '请选择品牌', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ groupname: [
|
|
|
+ { required: true, message: '请输入商品组名称', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ itemno: [
|
|
|
+ { required: true, message: '请选择商品', trigger: 'blur' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props:['type','brandData','productData','groupData'],
|
|
|
+ watch: {
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submit() {
|
|
|
+ this.$refs.form.validate(async val => {
|
|
|
+ if(val) {
|
|
|
+ let res = await this.$api.requested({
|
|
|
+ "id": "20220922164303",
|
|
|
+ "version":1,
|
|
|
+ "content": {
|
|
|
+ "sa_itemgroupid":this.type == 'add' ? 0 : this.groupData.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('addSuccess')
|
|
|
+ this.dialogTableVisible = false
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ editBtn() {
|
|
|
+ this.dialogTableVisible = true
|
|
|
+ this.seleteGroup = this.groupData
|
|
|
+ let temp = JSON.parse(JSON.stringify(this.seleteGroup))
|
|
|
+ this.form = {
|
|
|
+ sa_brandid:temp.sa_brandid,
|
|
|
+ groupname:temp.groupname,
|
|
|
+ itemno:temp.itemno,
|
|
|
+ tag:temp.tag1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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 = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
-<style>
|
|
|
+<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;
|
|
|
+}
|
|
|
+/deep/.el-form-item {
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+.input-new-tag {
|
|
|
+ width: 90px;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
</style>
|