| | |
| | | :confirm-working="isWorking" |
| | | @confirm="confirm" |
| | | > |
| | | <el-alert title="如果从平台选择商品进行直播,建议类别选择从平台库选择,系统已做数据关联;" type="warning" effect="dark" :closable="false"></el-alert> |
| | | <h3 style="margin: 20px 0 10px 0;">基本信息</h3> |
| | | <el-form :model="form" ref="form" :rules="rules"> |
| | | <el-form-item label="类别来源" prop="type"> |
| | | <el-radio-group v-model="form.type" @change="changeRadio"> |
| | | <el-radio :label="1">从平台库选择</el-radio> |
| | | <el-radio :label="0">企业自建</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="选择类别" prop="platCateId" v-if="form.type == 1"> |
| | | <el-select v-model="form.platCateId" placeholder="请选择" @change="changeCategory"> |
| | | <el-option |
| | | v-for="item in categoryList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="类别名称" prop="name"> |
| | | <el-input v-model="form.name" placeholder="请输入类别名称,不超过6个字" maxlength="6" v-trim/> |
| | | </el-form-item> |
| | |
| | | :action="action" |
| | | :class="{ hide: hideUpload }" |
| | | :file-list="form.fileList" |
| | | :data="{ folder: 'projects' }" |
| | | :data="{ folder: 'category_img' }" |
| | | list-type="picture-card" |
| | | :limit="1" |
| | | :on-success="fileSuccess" |
| | |
| | | <i class="el-icon-plus"></i> |
| | | <div slot="tip" class="el-upload__tip">只能上传图片格式,png格式,建议尺寸120*120px</div> |
| | | </el-upload> |
| | | <!-- <el-input v-model="form.imgurl" placeholder="请输入图标" v-trim/> --> |
| | | </el-form-item> |
| | | <el-form-item label="排序码(升序)" prop="sortnum"> |
| | | <el-input v-model="form.sortnum" placeholder="请输入排序码" v-trim/> |
| | | </el-form-item> |
| | | |
| | | <el-form-item label="筛选属性1名称" prop="attrFirst"> |
| | | <div style="margin: 20px 0 10px 0; height: 30px; display: flex; justify-content: space-between;"> |
| | | <h3 style="display: flex; align-items: flex-end;">参数属性配置<h6 style="margin-left: 10px;">配置当前类别的产品参数名</h6></h3> |
| | | <el-button style="display: inline-block;" type="primary" v-if="form.type == 0" @click="addItem">+ 新增</el-button> |
| | | </div> |
| | | <el-table |
| | | :data="form.tableData" |
| | | border |
| | | style="width: 100%"> |
| | | <el-table-column label="参数名"> |
| | | <template slot-scope="scope"> |
| | | <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="设置为选项"> |
| | | <template slot-scope="scope"> |
| | | <el-switch |
| | | v-model="scope.row.isselect" |
| | | active-color="#13ce66" |
| | | inactive-color="#ff4949" |
| | | :active-value="1" |
| | | :inactive-value="0"> |
| | | </el-switch> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="是否显示"> |
| | | <template slot-scope="scope"> |
| | | <el-switch |
| | | v-model="scope.row.isshow" |
| | | active-color="#13ce66" |
| | | inactive-color="#ff4949" |
| | | :active-value="1" |
| | | :inactive-value="0"> |
| | | </el-switch> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" v-if="form.type == 0"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | size="mini" |
| | | type="danger" |
| | | @click="handleDelete(scope.$index)">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- <el-form-item label="筛选属性1名称" prop="attrFirst"> |
| | | <el-input v-model="form.attrFirst" maxlength="6" placeholder="请输入筛选属性名称,不超过6个字" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="筛选属性1的值" prop="attrFirst"> |
| | |
| | | <div style="display: flex; align-items: center; flex-wrap: wrap;"> |
| | | <el-tag style="margin-right: 10px; margin-top: 10px;" @close="close(index, 3)" closable v-for="(item, index) in form.paramList" :key="index">{{ item.name }}</el-tag> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form-item> --> |
| | | |
| | | <h3 style="margin: 20px 0 10px 0; display: flex; align-items: flex-end;">预算区间配置<h6 style="margin-left: 10px;">配置当前类别的预算区间筛选值,上限和下限不能同时为空</h6></h3> |
| | | <el-form-item label="预算区间" prop="attrSecond"> |
| | | <div style="display: flex; align-items: center; margin-bottom: 10px;" v-for="(item, index) in form.budgetList" :key="index"> |
| | | <el-input v-model="item.minamount" type="number" @input="changeInput(1, index)" placeholder="下限" v-trim/> |
| | |
| | | <script> |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import { create, updateById } from '@/api/business/category.js' |
| | | import { create, updateById, baseCategoryList, companyCreate, companyUpdateById } from '@/api/business/category.js' |
| | | export default { |
| | | name: 'OperaCategoryWindow', |
| | | extends: BaseOpera, |
| | | components: { GlobalWindow }, |
| | | data () { |
| | | return { |
| | | action: process.env.VUE_APP_API_PREFIX + '/public/uploadLocal', |
| | | action: process.env.VUE_APP_API_PREFIX + '/public/upload', |
| | | |
| | | hideUpload: false, |
| | | categoryList: [], |
| | | |
| | | // 表单数据 |
| | | form: { |
| | | id: null, |
| | | type: 1, |
| | | platCateId: '', |
| | | name: '', |
| | | attrFirst: '', |
| | | attrFirst1: '', |
| | | attrFirstList: [], |
| | | attrSecond: '', |
| | | attrSecond1: '', |
| | | attrSecondList: [], |
| | | // attrFirst: '', |
| | | // attrFirst1: '', |
| | | // attrFirstList: [], |
| | | // attrSecond: '', |
| | | // attrSecond1: '', |
| | | // attrSecondList: [], |
| | | sortnum: '', |
| | | parameter: '', |
| | | // parameter: '', |
| | | paramList: [], |
| | | imgurl: '', |
| | | tableData: [], |
| | | budgetList: [ |
| | | { |
| | | maxamount: '', |
| | |
| | | } |
| | | ], |
| | | fileList: [], |
| | | attributeValueOne: [] |
| | | // attributeValueOne: [] |
| | | }, |
| | | // 验证规则 |
| | | rules: { |
| | |
| | | }) |
| | | }, |
| | | methods: { |
| | | addItem() { |
| | | this.form.tableData.push({ name: '', isselect: 0, isshow: 1 }) |
| | | }, |
| | | handleDelete(index) { |
| | | this.form.tableData.splice(index, 1) |
| | | }, |
| | | changeRadio(e) { |
| | | this.form.name = '' |
| | | this.form.platCateId = '' |
| | | this.form.sortnum = '' |
| | | this.form.tableData = [] |
| | | this.form.imgurl = '' |
| | | this.form.fileList = [] |
| | | this.form.budgetList = [{ |
| | | maxamount: '', |
| | | minamount: '' |
| | | }] |
| | | }, |
| | | confirm() { |
| | | this.$refs.form.validate((valid) => { |
| | | if (!valid) return |
| | | // 调用新建接口 |
| | | this.isWorking = true |
| | | if (!this.form.id) { |
| | | companyCreate({ |
| | | paramList: this.form.tableData, |
| | | type: this.form.type, |
| | | sortnum: this.form.sortnum, |
| | | platCateId: this.form.platCateId, |
| | | name: this.form.name, |
| | | imgurl: this.form.imgurl, |
| | | budgetList: this.form.budgetList |
| | | }) |
| | | .then(() => { |
| | | this.visible = false |
| | | this.$tip.apiSuccess('新建成功') |
| | | this.$emit('success') |
| | | }) |
| | | .catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | .finally(() => { |
| | | this.isWorking = false |
| | | }) |
| | | } else { |
| | | companyUpdateById({ |
| | | id: this.form.id, |
| | | paramList: this.form.tableData, |
| | | type: this.form.type, |
| | | sortnum: this.form.sortnum, |
| | | platCateId: this.form.platCateId, |
| | | name: this.form.name, |
| | | imgurl: this.form.imgurl, |
| | | budgetList: this.form.budgetList |
| | | }) |
| | | .then(() => { |
| | | this.visible = false |
| | | this.$tip.apiSuccess('编辑成功') |
| | | this.$emit('success') |
| | | }) |
| | | .catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | .finally(() => { |
| | | this.isWorking = false |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | // 切换分类 |
| | | changeCategory(id) { |
| | | this.categoryList.forEach(item => { |
| | | if (item.id === id) { |
| | | this.form.name = item.name |
| | | this.form.sortnum = item.sortnum |
| | | let arr = [] |
| | | item.baseCateParamList.forEach((row, index) => { |
| | | arr.push({ name: row.name, isselect: index <= 1 ? 1 : 0, isshow: 1 }) |
| | | }) |
| | | this.form.tableData = arr |
| | | this.form.imgurl = item.imgurl |
| | | this.form.fileList = [{ url: item.imgfullurl }] |
| | | } |
| | | }) |
| | | }, |
| | | changeInput(type, index) { |
| | | if (type === 1) { |
| | | if (!this.form.budgetList[index].minamount) return |
| | |
| | | message: '只能上传一个图标' |
| | | }) |
| | | }, |
| | | confirm() { |
| | | this.$refs.form.validate((valid) => { |
| | | if (valid) { |
| | | this.isWorking = true |
| | | if (!this.form.id) { |
| | | create(this.form) |
| | | .then(() => { |
| | | this.visible = false |
| | | this.$tip.apiSuccess('新建成功') |
| | | this.$emit('success') |
| | | }) |
| | | .catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | .finally(() => { |
| | | this.isWorking = false |
| | | }) |
| | | } else { |
| | | updateById(this.form) |
| | | .then(() => { |
| | | this.visible = false |
| | | this.$tip.apiSuccess('编辑成功') |
| | | this.$emit('success') |
| | | }) |
| | | .catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | .finally(() => { |
| | | this.isWorking = false |
| | | }) |
| | | } |
| | | } else { |
| | | return false; |
| | | } |
| | | }); |
| | | }, |
| | | // confirm() { |
| | | // this.$refs.form.validate((valid) => { |
| | | // if (valid) { |
| | | // this.isWorking = true |
| | | // if (!this.form.id) { |
| | | // create(this.form) |
| | | // .then(() => { |
| | | // this.visible = false |
| | | // this.$tip.apiSuccess('新建成功') |
| | | // this.$emit('success') |
| | | // }) |
| | | // .catch(e => { |
| | | // this.$tip.apiFailed(e) |
| | | // }) |
| | | // .finally(() => { |
| | | // this.isWorking = false |
| | | // }) |
| | | // } else { |
| | | // updateById(this.form) |
| | | // .then(() => { |
| | | // this.visible = false |
| | | // this.$tip.apiSuccess('编辑成功') |
| | | // this.$emit('success') |
| | | // }) |
| | | // .catch(e => { |
| | | // this.$tip.apiFailed(e) |
| | | // }) |
| | | // .finally(() => { |
| | | // this.isWorking = false |
| | | // }) |
| | | // } |
| | | // } else { |
| | | // return false; |
| | | // } |
| | | // }); |
| | | // }, |
| | | close(index, type) { |
| | | if (type === 1) { |
| | | this.form.attrFirstList.splice(index, 1) |
| | |
| | | this.form = { |
| | | id: null, |
| | | name: '', |
| | | attrFirst: '', |
| | | attrFirst1: '', |
| | | attrFirstList: [], |
| | | attrSecond: '', |
| | | attrSecond1: '', |
| | | attrSecondList: [], |
| | | type: 1, |
| | | platCateId: '', |
| | | tableData: [], |
| | | // attrFirst: '', |
| | | // attrFirst1: '', |
| | | // attrFirstList: [], |
| | | // attrSecond: '', |
| | | // attrSecond1: '', |
| | | // attrSecondList: [], |
| | | sortnum: '', |
| | | parameter: '', |
| | | paramList: [], |
| | | // parameter: '', |
| | | // paramList: [], |
| | | imgurl: '', |
| | | budgetList: [ |
| | | { |
| | |
| | | } |
| | | ], |
| | | fileList: [], |
| | | attributeValueOne: [] |
| | | // attributeValueOne: [] |
| | | } |
| | | } else { |
| | | // 获取分类列表 |
| | | baseCategoryList({}) |
| | | .then(res => { |
| | | this.categoryList = res |
| | | }) |
| | | } |
| | | } |
| | | } |