From 0411e9f7b2cc909bcdd0b8ef07f11fae804e3f1e Mon Sep 17 00:00:00 2001 From: Mr.Zhang <710666463@qq.com> Date: 星期五, 15 九月 2023 18:39:17 +0800 Subject: [PATCH] 平台端 --- platform/src/components/business/OperaGoodsWindow.vue | 672 ++++++++++++++++++++++++++++--------------------------- 1 files changed, 341 insertions(+), 331 deletions(-) diff --git a/platform/src/components/business/OperaGoodsWindow.vue b/platform/src/components/business/OperaGoodsWindow.vue index e22ce7f..440f444 100644 --- a/platform/src/components/business/OperaGoodsWindow.vue +++ b/platform/src/components/business/OperaGoodsWindow.vue @@ -1,340 +1,350 @@ <template> - <GlobalWindow - :title="title" - :visible.sync="visible" - :confirm-working="isWorking" - @confirm="confirm" - > - <el-form :model="form" ref="form" :rules="rules"> - <div style="font-size: 18px;font-weight: bold;">鍩烘湰淇℃伅</div> - <el-form-item label="鍟嗗搧鍚嶇О" prop="name"> - <el-input v-model="form.name" maxlength="50" placeholder="璇疯緭鍏ュ晢鍝佸悕绉帮紝涓嶈秴杩�50涓瓧" v-trim/> - </el-form-item> - <el-form-item label="鍟嗗搧鍝佺墝" prop="brandId"> - <el-select v-model="form.brandId" placeholder="璇烽�夋嫨锛屽崟閫�"> - <el-option - v-for="item in brandList" - :key="item.id" - :label="item.name" - :value="item.id"> - </el-option> - </el-select> - </el-form-item> - <el-form-item label="鍟嗗搧绫诲埆" prop="categoryId"> - <!-- @change="changeCategory(form.categoryId)" --> - <el-select v-model="form.categoryId" placeholder="璇烽�夋嫨锛屽崟閫�"> - <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="name1" prop="attrFirstIds" v-if="name1"> - <el-select v-model="form.attrFirstIds" multiple placeholder="璇烽�夋嫨锛屾敮鎸佸閫�"> - <el-option - v-for="item in form.attrFirstList" - :key="item.id" - :label="item.name" - :value="item.id"> - </el-option> - </el-select> - </el-form-item> - <el-form-item :label="name2" prop="attrSecodIds" v-if="name2"> - <el-select v-model="form.attrSecodIds" multiple placeholder="璇烽�夋嫨锛屾敮鎸佸閫�"> - <el-option - v-for="item in form.attrSecodList" - :key="item.id" - :label="item.name" - :value="item.id"> - </el-option> - </el-select> - </el-form-item> - <el-form-item label="鎸囧浠凤紙鍏冿級" prop="zdPrice"> - <el-input v-model="form.zdPrice" @input="priceCHANEG(form.zdPrice, 1)" type="number" placeholder="寤鸿褰曞叆鏁存暟锛屽崟浣嶅厓" v-trim/> - </el-form-item> - <el-form-item label="鍏ユ墜浠凤紙鍏冿級" prop="price"> - <el-input v-model="form.price" @input="priceCHANEG(form.price, 2)" type="number" placeholder="寤鸿褰曞叆鏁存暟锛屽崟浣嶅厓" v-trim/> - </el-form-item> - <el-form-item label="鍟嗗搧涓诲浘"> - <el-upload - :action="action" - :file-list="form.ztList" - :data="{ folder: 'projects' }" - list-type="picture-card" - :limit="1" - :on-success="fileSuccess" - :on-exceed="exceed" - :on-remove="handleRemove"> - <i class="el-icon-plus"></i> - <div slot="tip" class="el-upload__tip">鍙兘涓婁紶鍥剧墖鏍煎紡锛宲ng鏍煎紡锛屽缓璁昂瀵�140*140px</div> - </el-upload> - </el-form-item> - <el-form-item label="鍟嗗搧鍥剧墖"> - <el-upload - :action="action" - :file-list="form.files" - :multiple="true" - :data="{ folder: 'projects' }" - list-type="picture-card" - :on-success="fileSuccess1" - :on-remove="handleRemove1"> - <i class="el-icon-plus"></i> - <div slot="tip" class="el-upload__tip">鍙兘涓婁紶鍥剧墖鏍煎紡锛宲ng鏍煎紡锛屽缓璁昂瀵�600*600px</div> - </el-upload> - </el-form-item> + <GlobalWindow + :title="title" + :visible.sync="visible" + :confirm-working="isWorking" + @confirm="confirm" + width="800px" + > + <el-form :model="form" ref="form" label-width="120px" :rules="rules"> + <div style="font-size: 18px;font-weight: bold;">鍩烘湰淇℃伅</div> + <el-form-item label="鍟嗗搧鍚嶇О" prop="name"> + <el-input v-model="form.name" maxlength="50" placeholder="璇疯緭鍏ュ晢鍝佸悕绉帮紝涓嶈秴杩�50涓瓧" v-trim/> + </el-form-item> + <el-form-item label="鍟嗗搧鍝佺墝" prop="brandId"> + <el-select v-model="form.brandId" placeholder="璇烽�夋嫨锛屽崟閫�"> + <el-option + v-for="item in brandList" + :key="item.id" + :label="item.name" + :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <el-form-item label="鍟嗗搧绫诲埆" prop="categoryId"> + <!-- @change="changeCategory(form.categoryId)" --> + <el-select v-model="form.categoryId" placeholder="璇烽�夋嫨锛屽崟閫�"> + <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="name1" prop="attrFirstIds" v-if="name1"> + <el-select v-model="form.attrFirstIds" multiple placeholder="璇烽�夋嫨锛屾敮鎸佸閫�"> + <el-option + v-for="item in form.attrFirstList" + :key="item.id" + :label="item.name" + :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <el-form-item :label="name2" prop="attrSecodIds" v-if="name2"> + <el-select v-model="form.attrSecodIds" multiple placeholder="璇烽�夋嫨锛屾敮鎸佸閫�"> + <el-option + v-for="item in form.attrSecodList" + :key="item.id" + :label="item.name" + :value="item.id"> + </el-option> + </el-select> + </el-form-item> --> + <el-form-item label="鎸囧浠凤紙鍏冿級" prop="zdPrice"> + <el-input v-model="form.zdPrice" @input="priceCHANEG(form.zdPrice, 1)" type="number" placeholder="寤鸿褰曞叆鏁存暟锛屽崟浣嶅厓" v-trim/> + </el-form-item> + <el-form-item label="鍏ユ墜浠凤紙鍏冿級" prop="price"> + <el-input v-model="form.price" @input="priceCHANEG(form.price, 2)" type="number" placeholder="寤鸿褰曞叆鏁存暟锛屽崟浣嶅厓" v-trim/> + </el-form-item> + <el-form-item label="鍟嗗搧涓诲浘"> + <el-upload + :action="action" + :file-list="form.ztList" + :data="{ folder: 'goods_img' }" + list-type="picture-card" + :limit="1" + :on-success="fileSuccess" + :on-exceed="exceed" + :on-remove="handleRemove"> + <i class="el-icon-plus"></i> + <div slot="tip" class="el-upload__tip">鍙兘涓婁紶鍥剧墖鏍煎紡锛宲ng鏍煎紡锛屽缓璁昂瀵�140*140px</div> + </el-upload> + </el-form-item> + <el-form-item label="鍟嗗搧鍥剧墖"> + <el-upload + :action="action" + :file-list="form.files" + :multiple="true" + :data="{ folder: 'goods_img' }" + list-type="picture-card" + :on-success="fileSuccess1" + :on-remove="handleRemove1"> + <i class="el-icon-plus"></i> + <div slot="tip" class="el-upload__tip">鍙兘涓婁紶鍥剧墖鏍煎紡锛宲ng鏍煎紡锛屽缓璁昂瀵�600*600px</div> + </el-upload> + </el-form-item> + <template v-if="form.goodsParamList && form.goodsParamList.length > 0"> <div style="font-size: 18px;font-weight: bold;">鍙傛暟灞炴�у�奸厤缃� <span style="font-size: 13px; font-weight: 500;">鎸夐渶閰嶇疆褰撳墠鍟嗗搧鐨勪骇鍝佸弬鏁板�硷紝鍗曚釜鍙傛暟鍊间笉瓒呰繃30涓瓧</span></div> <el-form-item :label="item.name" v-for="(item, index) in form.goodsParamList" :key="index"> <el-input v-model="item.val" maxlength="30" type="text" placeholder="璇疯緭鍏�" v-trim/> </el-form-item> - </el-form> - </GlobalWindow> - </template> - - <script> - import BaseOpera from '@/components/base/BaseOpera' - import GlobalWindow from '@/components/common/GlobalWindow' - import { brand } from '@/api/system/common.js' - import { findListForGoodsId, create, updateById } from '@/api/business/goods.js' - export default { - name: 'OperaGoodsWindow', - extends: BaseOpera, - components: { GlobalWindow }, - data () { - return { - action: process.env.VUE_APP_API_PREFIX + '/public/uploadLocal', - name1: '', - name2: '', - // 琛ㄥ崟鏁版嵁 - form: { - id: null, - name: '', - categoryId: '', - brandId: '', - zdPrice: '', - price: '', - attrFirstIds: [], - attrFirstNames: '', - attrSecodIds: [], - attrSecodNames: '', - imgurl: '', - multifileList: [], - files: [], - ztList: [], - goodsParamList: [], - attrFirstList: [], - attrSecodList: [] - }, - // 楠岃瘉瑙勫垯 - rules: { - name: [ - { required: true, message: '涓嶈兘涓虹┖', trigger: 'blur' } - ], - categoryId: [ - { required: true, message: '璇烽�夋嫨', trigger: 'change' } - ], - brandId: [ - { required: true, message: '璇烽�夋嫨', trigger: 'change' } - ], - zdPrice: [ - { required: true, message: '涓嶈兘涓虹┖', trigger: 'blur' } - ], - price: [ - { required: true, message: '涓嶈兘涓虹┖', trigger: 'blur' } - ] - }, - options: [], - categoryList: [], - brandList: [] - } - }, - created () { - this.config({ - api: '/business/goods', - 'field.id': 'id' - }) - this.getbrand() - this.getcategory() - }, - watch: { - 'form.categoryId': { - immediate: true, - handler(news, old) { - if (news) { - this.name1 = '' - this.name2 = '' - if (old) { - this.form.attrFirstIds = [] - this.form.attrSecodIds = [] - this.form.goodsParamList = [] - } - this.categoryList.forEach(item => { - if (item.id === news) { - this.name1 = item.attrFirst - this.name2 = item.attrSecond - this.form.attrFirstList = item.attrFirstList.length > 0 ? item.attrFirstList : [] - this.form.attrSecodList = item.attrSecondList.length > 0 ? item.attrSecondList : [] - this.form.goodsParamList = JSON.parse(JSON.stringify(item.paramList)) - this.form.goodsParamList.forEach(item => { - item.pramaId = item.id - }) - console.log(this.form.goodsParamList) - } - }) - this.getcategory(1) - } - } + </template> + </el-form> + </GlobalWindow> +</template> + +<script> +import BaseOpera from '@/components/base/BaseOpera' +import GlobalWindow from '@/components/common/GlobalWindow' +import { brand } from '@/api/system/common.js' +import { findListForGoodsId, create, updateById, companyCreate, companyUpdateById } from '@/api/business/goods.js' +export default { + name: 'OperaGoodsWindow', + extends: BaseOpera, + components: { GlobalWindow }, + data () { + return { + action: process.env.VUE_APP_API_PREFIX + '/public/upload', + name1: '', + name2: '', + // 琛ㄥ崟鏁版嵁 + form: { + id: null, + name: '', + categoryId: '', + brandId: '', + zdPrice: '', + price: '', + attrFirstIds: [], + attrFirstNames: '', + attrSecodIds: [], + attrSecodNames: '', + imgurl: '', + multifileList: [], + files: [], + ztList: [], + goodsParamList: [], + attrFirstList: [], + attrSecodList: [] }, - visible: { - handler(news, old) { - if (!news) { - this.name1 = '' - this.name2 = '' - this.form = { - id: null, - name: '', - categoryId: '', - brandId: '', - zdPrice: '', - price: '', - attrFirstIds: [], - attrFirstNames: '', - attrSecodIds: [], - attrSecodNames: '', - imgurl: '', - multifileList: [], - files: [], - ztList: [], - goodsParamList: [], - attrFirstList: [], - attrSecodList: [] - } - } - } - } - }, - methods: { - priceCHANEG(val, type) { - if (!/^[1-9]+[0-9]*$/.test(val)) { - this.$message.warning('鍙兘杈撳叆姝f暣鏁�') - if (type === 1) { - this.form.zdPrice = '' - } else { - this.form.price = '' - } - } + // 楠岃瘉瑙勫垯 + rules: { + name: [ + { required: true, message: '涓嶈兘涓虹┖', trigger: 'blur' } + ], + categoryId: [ + { required: true, message: '璇烽�夋嫨', trigger: 'change' } + ], + brandId: [ + { required: true, message: '璇烽�夋嫨', trigger: 'change' } + ], + zdPrice: [ + { required: true, message: '涓嶈兘涓虹┖', trigger: 'blur' } + ], + price: [ + { required: true, message: '涓嶈兘涓虹┖', trigger: 'blur' } + ] }, - confirm() { - this.$refs.form.validate((valid) => { - if (valid) { - if (this.form.attrFirstIds.length > 0) { - let arr = [] - this.form.attrFirstIds.forEach(element => { - this.form.attrFirstList.forEach(item => { - if (element === item.id) { - arr.push(item.name) - } - }) - }) - this.form.attrFirstNames = arr.join(',') - this.form.attrFirstIds = this.form.attrFirstIds.join(',') - } else { - this.form.attrFirstNames = '' - this.form.attrFirstIds = '' - } - if (this.form.attrSecodIds.length > 0) { - let arr = [] - this.form.attrSecodIds.forEach(element => { - this.form.attrSecodList.forEach(item => { - if (element === item.id) { - arr.push(item.name) - } - }) - }) - this.form.attrSecodNames = arr.join(',') - this.form.attrSecodIds = this.form.attrSecodIds.join(',') - } else { - this.form.attrSecodNames = '' - this.form.attrSecodIds = '' - } - 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; - } - }); - }, - exceed() { - this.$message.warning({ - message: '鍙兘涓婁紶涓�涓浘鏍�' - }) - }, - fileSuccess1(response, file, fileList) { - this.form.files = fileList - this.form.multifileList.push({ fileurl: response.data.imgaddr, name: response.data.imgname, url: response.data.url }) - }, - handleRemove1(file, fileList) { - this.form.files = fileList - this.form.multifileList = fileList - }, - fileSuccess(response) { - this.form.ztList.push({ imgaddr: response.data.imgaddr, url: response.data.url }) - this.form.imgurl = response.data.imgaddr - }, - handleRemove() { - this.form.ztList = [] - this.form.imgurl = '' - }, - getbrand() { - brand({}) - .then(res => { - this.brandList = res - }) - }, - getcategory(type) { - findListForGoodsId(this.form.id || '') - .then(res => { - this.categoryList = res - if (type === 1) { - this.categoryList.forEach(item => { - if (item.id === this.form.categoryId) { - this.form.goodsParamList = JSON.parse(JSON.stringify(item.paramList)) - this.form.goodsParamList.forEach(item => { - item.pramaId = item.id - }) - console.log(this.form.goodsParamList) - } - }) - } - }) - } + options: [], + categoryList: [], + brandList: [] } + }, + created () { + this.config({ + api: '/business/goods', + 'field.id': 'id' + }) + this.getbrand() + this.getcategory() + }, + watch: { + 'form.categoryId': { + immediate: true, + handler(news, old) { + if (news) { + this.name1 = '' + this.name2 = '' + if (old) { + this.form.attrFirstIds = [] + this.form.attrSecodIds = [] + this.form.goodsParamList = [] + } + this.categoryList.forEach(item => { + if (item.id === news) { + this.name1 = item.attrFirst + this.name2 = item.attrSecond + this.form.attrFirstList = item.attrFirstList.length > 0 ? item.attrFirstList : [] + this.form.attrSecodList = item.attrSecondList.length > 0 ? item.attrSecondList : [] + this.form.goodsParamList = JSON.parse(JSON.stringify(item.paramList)) + this.form.goodsParamList.forEach(item => { + item.pramaId = item.id + }) + console.log(this.form.goodsParamList) + } + }) + this.getcategory(1) + } + } + }, + visible: { + handler(news, old) { + if (!news) { + this.name1 = '' + this.name2 = '' + this.form = { + id: null, + name: '', + categoryId: '', + brandId: '', + zdPrice: '', + price: '', + attrFirstIds: [], + attrFirstNames: '', + attrSecodIds: [], + attrSecodNames: '', + imgurl: '', + multifileList: [], + files: [], + ztList: [], + goodsParamList: [], + attrFirstList: [], + attrSecodList: [] + } + } + } + } + }, + methods: { + priceCHANEG(val, type) { + if (!/^[1-9]+[0-9]*$/.test(val)) { + this.$message.warning('鍙兘杈撳叆姝f暣鏁�') + if (type === 1) { + this.form.zdPrice = '' + } else { + this.form.price = '' + } + } + }, + confirm() { + this.$refs.form.validate((valid) => { + if (valid) { + if (this.form.attrFirstIds.length > 0) { + let arr = [] + this.form.attrFirstIds.forEach(element => { + this.form.attrFirstList.forEach(item => { + if (element === item.id) { + arr.push(item.name) + } + }) + }) + this.form.attrFirstNames = arr.join(',') + this.form.attrFirstIds = this.form.attrFirstIds.join(',') + } else { + this.form.attrFirstNames = '' + this.form.attrFirstIds = '' + } + if (this.form.attrSecodIds.length > 0) { + let arr = [] + this.form.attrSecodIds.forEach(element => { + this.form.attrSecodList.forEach(item => { + if (element === item.id) { + arr.push(item.name) + } + }) + }) + this.form.attrSecodNames = arr.join(',') + this.form.attrSecodIds = this.form.attrSecodIds.join(',') + } else { + this.form.attrSecodNames = '' + this.form.attrSecodIds = '' + } + if (!this.form.id) { + companyCreate({...this.form, type: 0}) + .then(() => { + this.visible = false + this.$tip.apiSuccess('鏂板缓鎴愬姛') + this.$emit('success') + }) + .catch(e => { + this.$tip.apiFailed(e) + }) + .finally(() => { + this.isWorking = false + }) + } else { + companyUpdateById({...this.form, type: 0}) + .then(() => { + this.visible = false + this.$tip.apiSuccess('缂栬緫鎴愬姛') + this.$emit('success') + }) + .catch(e => { + this.$tip.apiFailed(e) + }) + .finally(() => { + this.isWorking = false + }) + } + } else { + return false; + } + }); + }, + exceed() { + this.$message.warning({ + message: '鍙兘涓婁紶涓�涓浘鏍�' + }) + }, + fileSuccess1(response, file, fileList) { + this.form.files = fileList + this.form.multifileList.push({ fileurl: response.data.imgaddr, name: response.data.imgname, url: response.data.url }) + }, + handleRemove1(file, fileList) { + this.form.files = fileList + this.form.multifileList = fileList + }, + fileSuccess(response) { + this.form.ztList.push({ imgaddr: response.data.imgaddr, url: response.data.url }) + this.form.imgurl = response.data.imgaddr + }, + handleRemove() { + this.form.ztList = [] + this.form.imgurl = '' + }, + getbrand() { + brand({}) + .then(res => { + this.brandList = res + }) + }, + getcategory(type) { + findListForGoodsId(this.form.id || '') + .then(res => { + this.categoryList = res + if (type === 1) { + this.categoryList.forEach(item => { + if (item.id === this.form.categoryId) { + this.form.goodsParamList = JSON.parse(JSON.stringify(item.paramList)) + this.form.goodsParamList.forEach(item => { + item.pramaId = item.id + }) + console.log(this.form.goodsParamList) + } + }) + } + }) + } } - </script> - \ No newline at end of file +} +</script> + +<style lang="scss" scoped> +::v-deep .el-form-item__content { + .el-input { + width: 400px; + } +} +</style> -- Gitblit v1.9.3