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/views/business/goods.vue | 496 +++++++++++++++++++++++++++--------------------------- 1 files changed, 245 insertions(+), 251 deletions(-) diff --git a/platform/src/views/business/goods.vue b/platform/src/views/business/goods.vue index 16d2c4f..c7e81df 100644 --- a/platform/src/views/business/goods.vue +++ b/platform/src/views/business/goods.vue @@ -1,260 +1,254 @@ <template> - <TableLayout :permissions="['business:goods:query']"> - <!-- 鎼滅储琛ㄥ崟 --> - <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline> - <el-form-item label="鍟嗗搧鍚嶇О" prop="name"> - <el-input v-model="searchForm.name" placeholder="璇疯緭鍏ュ晢鍝佸悕绉�" @keypress.enter.native="search"></el-input> - </el-form-item> - <el-form-item label="鍟嗗搧ID" prop="id"> - <el-input v-model="searchForm.id" placeholder="璇疯緭鍏ュ晢鍝両D" @keypress.enter.native="search"></el-input> - </el-form-item> - <el-form-item label="绫诲埆" prop="categoryId"> - <el-select v-model="searchForm.categoryId" clearable placeholder="璇烽�夋嫨"> - <el-option - v-for="item in categoryList" - :key="item.id" - :label="item.name" - :value="item.id"> - </el-option> - </el-select> - <!-- <el-input v-model="searchForm.categoryId" placeholder="璇疯緭鍏ユ墍灞炲搧绫荤紪鐮�" @keypress.enter.native="search"></el-input> --> - </el-form-item> - <el-form-item label="鍝佺墝" prop="brandId"> - <el-select v-model="searchForm.brandId" clearable placeholder="璇烽�夋嫨"> - <el-option - v-for="item in brandList" - :key="item.id" - :label="item.name" - :value="item.id"> - </el-option> - </el-select> - <!-- <el-input v-model="searchForm.brandId" placeholder="璇疯緭鍏ユ墍灞炲搧鐗岀紪鐮�" @keypress.enter.native="search"></el-input> --> - </el-form-item> - <el-form-item label="鐘舵��" prop="status"> - <el-select v-model="searchForm.status" clearable placeholder="璇烽�夋嫨"> - <el-option - v-for="item in statusList" - :key="item.id" - :label="item.name" - :value="item.id"> - </el-option> - </el-select> - <!-- <el-input v-model="searchForm.status" placeholder="璇疯緭鍏ョ姸鎬� 0鍚敤 1绂佺敤" @keypress.enter.native="search"></el-input> --> - </el-form-item> - <section> - <el-button type="primary" @click="search">鎼滅储</el-button> - - <el-button @click="reset">閲嶇疆</el-button> - </section> - </el-form> - <!-- 琛ㄦ牸鍜屽垎椤� --> - <template v-slot:table-wrap> - <ul class="toolbar" v-permissions="['business:goods:create', 'business:goods:delete']"> - <li><el-button type="primary" @click="$refs.operaGoodsWindow.open('鏂板缓鍟嗗搧')" icon="el-icon-plus" v-permissions="['business:goods:create']">鏂板缓</el-button></li> - <el-button type="primary" :loading="isWorking.export" v-permissions="['business:goods:exportExcel']" @click="importFile">瀵煎叆</el-button> - <el-button type="primary" :loading="isWorking.export" @click="downloadFile">涓嬭浇妯℃澘</el-button> - <!-- <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" v-permissions="['business:goods:delete']">鍒犻櫎</el-button></li> --> - </ul> - <el-table - v-loading="isWorking.search" - :data="tableData.list" - stripe - border - :header-cell-style="rowStyle" - :cell-style="rowStyle" - > - <el-table-column prop="id" label="鍟嗗搧ID" min-width="100px"></el-table-column> - <el-table-column prop="name" label="鍟嗗搧鍚嶇О/鍨嬪彿" min-width="200px"> - <template slot-scope="{row}"> - <div style="display: flex; align-items: center;"> - <div style="width: 70px; height: 70px; flex-shrink: 0;"> - <el-image - v-if="row.imgurl" - style="width: 70px; height: 70px" - :src="row.prefixUrl + row.imgurl" - :preview-src-list="[row.prefixUrl + row.imgurl]" - fit="cover"></el-image> - </div> - {{ row.name }} + <TableLayout :permissions="['business:goods:query']"> + <!-- 鎼滅储琛ㄥ崟 --> + <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline> + <el-form-item label="鍟嗗搧鍚嶇О" prop="name"> + <el-input v-model="searchForm.name" placeholder="璇疯緭鍏ュ晢鍝佸悕绉�" @keypress.enter.native="search"></el-input> + </el-form-item> + <el-form-item label="鍟嗗搧ID" prop="id"> + <el-input v-model="searchForm.id" placeholder="璇疯緭鍏ュ晢鍝両D" @keypress.enter.native="search"></el-input> + </el-form-item> + <el-form-item label="绫诲埆" prop="categoryId"> + <el-select v-model="searchForm.categoryId" clearable placeholder="璇烽�夋嫨"> + <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + <!-- <el-input v-model="searchForm.categoryId" placeholder="璇疯緭鍏ユ墍灞炲搧绫荤紪鐮�" @keypress.enter.native="search"></el-input> --> + </el-form-item> + <el-form-item label="鍝佺墝" prop="brandId"> + <el-select v-model="searchForm.brandId" clearable placeholder="璇烽�夋嫨"> + <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + <!-- <el-input v-model="searchForm.brandId" placeholder="璇疯緭鍏ユ墍灞炲搧鐗岀紪鐮�" @keypress.enter.native="search"></el-input> --> + </el-form-item> + <el-form-item label="鐘舵��" prop="status"> + <el-select v-model="searchForm.status" clearable placeholder="璇烽�夋嫨"> + <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id"> + </el-option> + </el-select> + <!-- <el-input v-model="searchForm.status" placeholder="璇疯緭鍏ョ姸鎬� 0鍚敤 1绂佺敤" @keypress.enter.native="search"></el-input> --> + </el-form-item> + <section> + <el-button type="primary" @click="search">鎼滅储</el-button> + <el-button @click="reset">閲嶇疆</el-button> + </section> + </el-form> + <!-- 琛ㄦ牸鍜屽垎椤� --> + <template v-slot:table-wrap> + <ul class="toolbar" v-permissions="['business:goods:create', 'business:goods:delete']"> + <li><el-button type="primary" @click="$refs.operaGoodsWindow.open('鏂板缓鍟嗗搧')" icon="el-icon-plus" + v-permissions="['business:goods:create']">鏂板缓</el-button></li> + <!-- <el-button type="primary" :loading="isWorking.export" + @click="$refs.selectProduct.open('閫夋嫨骞冲彴鍟嗗搧')">閫夋嫨骞冲彴鍟嗗搧</el-button> --> + <el-button type="primary" :loading="isWorking.export" v-permissions="['business:goods:exportExcel']" + @click="importFile">瀵煎叆</el-button> + <el-button type="primary" :loading="isWorking.export" @click="downloadFile">涓嬭浇妯℃澘</el-button> + + <el-button type="primary" :loading="isWorking.export" @click="bulkOperation(0)">鎵归噺涓婃灦</el-button> + <el-button type="primary" :loading="isWorking.export" @click="bulkOperation(1)">鎵归噺涓嬫灦</el-button> + <!-- <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" v-permissions="['business:goods:delete']">鍒犻櫎</el-button></li> --> + </ul> + <el-table v-loading="isWorking.search" :data="tableData.list" stripe border :header-cell-style="rowStyle" + :cell-style="rowStyle" @selection-change="handleSelectionChange"> + <el-table-column type="selection" width="55"></el-table-column> + <el-table-column prop="id" label="鍟嗗搧ID" min-width="100px"></el-table-column> + <el-table-column prop="name" label="鍟嗗搧鍚嶇О/鍨嬪彿" min-width="200px"> + <template slot-scope="{row}"> + <div style="display: flex; align-items: center;"> + <div style="width: 70px; height: 70px; flex-shrink: 0;"> + <el-image v-if="row.imgurl" style="width: 70px; height: 70px" :src="row.prefixUrl + row.imgurl" + :preview-src-list="[row.prefixUrl + row.imgurl]" fit="cover"></el-image> </div> - </template> - </el-table-column> - <el-table-column prop="brandName" label="鍝佺墝" min-width="100px"></el-table-column> - <el-table-column prop="categoryName" label="绫诲埆" min-width="100px"></el-table-column> - <el-table-column prop="attrFirstNames" label="灞炴��1" min-width="100px"></el-table-column> - <el-table-column prop="attrSecodNames" label="灞炴��2" min-width="100px"></el-table-column> - <el-table-column prop="zdPrice" label="鎸囧浠凤紙鍏冿級" min-width="100px"></el-table-column> - <el-table-column prop="price" label="鍏ユ墜浠凤紙鍏冿級" min-width="100px"></el-table-column> - <el-table-column prop="createDate" label="鍒涘缓鏃堕棿" min-width="100px"></el-table-column> - <el-table-column prop="status" label="鐘舵��" min-width="100px"> - <template slot-scope="{row}"> - <el-switch - v-model="row.status" - @change="changeStatus(row)" - active-color="#13ce66" - inactive-color="#ff4949" - :active-value="0" - :inactive-value="1"> - </el-switch> - </template> - </el-table-column> - <el-table-column - v-if="containPermissions(['business:goods:update', 'business:goods:delete'])" - label="鎿嶄綔" - min-width="120" - fixed="right" - > - <template slot-scope="{row}"> - <el-button type="text" @click="edit(row.id)" icon="el-icon-edit" v-permissions="['business:goods:update']">缂栬緫</el-button> - <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" v-permissions="['business:goods:delete']">鍒犻櫎</el-button> - </template> - </el-table-column> - </el-table> - <input type="file" ref="upload" style="display: none;" @change="uplaodFile" /> - <pagination - @size-change="handleSizeChange" - @current-change="handlePageChange" - :pagination="tableData.pagination" - > - </pagination> - </template> - <!-- 鏂板缓/淇敼 --> - <OperaGoodsWindow ref="operaGoodsWindow" @success="handlePageChange"/> - </TableLayout> - </template> - - <script> - import BaseTable from '@/components/base/BaseTable' - import TableLayout from '@/layouts/TableLayout' - import Pagination from '@/components/common/Pagination' - import OperaGoodsWindow from '@/components/business/OperaGoodsWindow' - import { brand, category, importExcel } from '@/api/system/common.js' - import { updateDisableById, queryById, exportDoc } from '@/api/business/goods.js' - export default { - name: 'Goods', - extends: BaseTable, - components: { TableLayout, Pagination, OperaGoodsWindow }, - data () { - return { - // 鎼滅储 - searchForm: { - id: '', - name: '', - status: '', - categoryId: '', - brandId: '' - }, - categoryList: [], - brandList: [], - statusList: [ - { name: '鍚敤', id: 0 }, - { name: '绂佺敤', id: 1 } - ] + {{ row.name }} + </div> + </template> + </el-table-column> + <el-table-column prop="brandName" label="鍝佺墝" min-width="100px"></el-table-column> + <el-table-column prop="categoryName" label="绫诲埆" min-width="100px"></el-table-column> + <el-table-column prop="baseZdPrice" label="鎸囧浠凤紙鍏冿級" min-width="100px"></el-table-column> + <el-table-column prop="basePrice" label="閲囪喘浠�(鍏�)" min-width="100px"></el-table-column> + <el-table-column prop="price" label="鍏ユ墜浠凤紙鍏冿級" min-width="100px"></el-table-column> + <el-table-column prop="createDate" label="鍒涘缓鏃堕棿" min-width="100px"></el-table-column> + <el-table-column prop="status" label="鐘舵��" min-width="100px"> + <template slot-scope="{row}"> + <el-switch v-model="row.status" @change="changeStatus(row)" active-color="#13ce66" inactive-color="#ff4949" + :active-value="0" :inactive-value="1"> + </el-switch> + </template> + </el-table-column> + <el-table-column v-if="containPermissions(['business:goods:update', 'business:goods:delete'])" label="鎿嶄綔" + min-width="120" fixed="right"> + <template slot-scope="{row}"> + <el-button type="text" @click="edit(row.id)" icon="el-icon-edit" + v-permissions="['business:goods:update']">缂栬緫</el-button> + <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" + v-permissions="['business:goods:delete']">鍒犻櫎</el-button> + </template> + </el-table-column> + </el-table> + <input type="file" ref="upload" style="display: none;" @change="uplaodFile" /> + <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination"> + </pagination> + </template> + <!-- 鏂板缓/淇敼 --> + <OperaGoodsWindow ref="operaGoodsWindow" @success="handlePageChange" /> + <!-- 閫夋嫨骞冲彴鍟嗗搧 --> + <selectProduct ref="selectProduct" @success="handlePageChange" @result="search" /> + </TableLayout> +</template> + +<script> +import BaseTable from '@/components/base/BaseTable' +import TableLayout from '@/layouts/TableLayout' +import Pagination from '@/components/common/Pagination' +import OperaGoodsWindow from '@/components/business/OperaGoodsWindow' +import selectProduct from '@/components/business/selectProduct' +import { brand, category, importExcel } from '@/api/system/common.js' +import { updateDisableById, queryById, exportDoc, batchUpdateDisableById } from '@/api/business/goods.js' +export default { + name: 'Goods', + extends: BaseTable, + components: { TableLayout, Pagination, OperaGoodsWindow, selectProduct }, + data() { + return { + // 鎼滅储 + searchForm: { + id: '', + name: '', + status: '', + categoryId: '', + brandId: '' + }, + ids: '', + categoryList: [], + brandList: [], + statusList: [ + { name: '鍚敤', id: 0 }, + { name: '绂佺敤', id: 1 } + ] + } + }, + created() { + this.config({ + module: '鍟嗗搧', + api: '/business/goods', + 'field.id': 'id', + 'field.main': 'name' + }) + this.search() + this.getbrand() + this.getcategory() + }, + methods: { + handleSelectionChange(e) { + let arr = e.map(item => item.id) + this.ids = arr.join(',') + console.log(this.ids) + }, + // 鎵归噺涓婁笅鏋� + bulkOperation(type) { + if (!this.ids) { + this.$message.warning({ message: '鑷冲皯閫夋嫨涓�椤瑰唴瀹�' }) + return } - }, - created () { - this.config({ - module: '鍟嗗搧', - api: '/business/goods', - 'field.id': 'id', - 'field.main': 'name' + batchUpdateDisableById({ + ids: this.ids, + status: type + }).then(res => { + this.$message.success({ message: res }) + this.search() }) - this.search() - this.getbrand() - this.getcategory() }, - methods: { - downloadFile() { - // window.open(`${process.env.VUE_APP_API_PREFIX}/business/goods/export`) - exportDoc({}) - .then(response => { - this.download(response) - }) - .catch(e => { - this.$tip.apiFailed(e) - }) - }, - rowStyle() { - return "text-align:center"; - }, - importFile() { - this.$refs.upload.click() - }, - uplaodFile(e) { - const FORMDATE = new FormData() - FORMDATE.append('file', e.target.files[0]) - // 璇锋眰鎺ュ彛 - importExcel(FORMDATE) - .then(res => { - console.log(res) - this.search() - }) - .catch ((err) => { - this.$message.error(err.message) - }) - this.$refs.upload.value = null - }, - edit(id) { - queryById(id) - .then(res => { - let obj = { - id: res.id, - name: res.name, - categoryId: res.categoryId, - brandId: res.brandId, - zdPrice: res.zdPrice, - price: res.price, - attrFirstIds: res.attrFirstIds ? this.turnNum(res.attrFirstIds.split(',')) : [], - attrFirstNames: res.attrFirstNames, - attrSecodIds: res.attrSecodIds ? this.turnNum(res.attrSecodIds.split(',')) : [], - attrSecodNames: res.attrSecodNames, - imgurl: res.imgurl, - multifileList: [], - files: [], - ztList: res.imgurl ? [{ url: res.prefixUrl + res.imgurl }] : [], - pzList: [], - attrFirstList: [], - attrSecodList: [] - } - if (res.multifileList.length > 0) { - res.multifileList.forEach(item => { - obj.multifileList.push({ fileurl: item.fileurl, name: item.name, url: res.prefixUrl + item.fileurl }) - obj.files.push({ fileurl: item.fileurl, name: item.name, url: res.prefixUrl + item.fileurl }) - }) - } - this.$refs.operaGoodsWindow.open('缂栬緫鍟嗗搧', obj) - }) - }, - changeStatus(item) { - updateDisableById({ - id: item.id, - status: item.status - }).then(res => { - this.$tip.apiSuccess('鏇存柊鎴愬姛') - }).finally(() => { - // this.search() + downloadFile() { + exportDoc({}) + .then(response => { + this.download(response) }) - }, - turnNum (nums) { - for(let i=0;i<nums.length;i++){ - nums[i] = parseInt(nums[i]) - } - return nums; - }, - getbrand() { - brand({}) - .then(res => { - this.brandList = res - }) - }, - getcategory() { - category({}) - .then(res => { - this.categoryList = res - }) - } + .catch(e => { + this.$tip.apiFailed(e) + }) + }, + rowStyle() { + return "text-align:center"; + }, + importFile() { + this.$refs.upload.click() + }, + uplaodFile(e) { + const FORMDATE = new FormData() + FORMDATE.append('file', e.target.files[0]) + // 璇锋眰鎺ュ彛 + importExcel(FORMDATE) + .then(res => { + console.log(res) + this.search() + }) + .catch((err) => { + this.$message.error(err.message) + }) + this.$refs.upload.value = null + }, + edit(id) { + queryById(id) + .then(res => { + let obj = { + id: res.id, + name: res.name, + categoryId: res.categoryId, + brandId: res.brandId, + zdPrice: res.zdPrice, + price: res.price, + attrFirstIds: res.attrFirstIds ? this.turnNum(res.attrFirstIds.split(',')) : [], + attrFirstNames: res.attrFirstNames, + attrSecodIds: res.attrSecodIds ? this.turnNum(res.attrSecodIds.split(',')) : [], + attrSecodNames: res.attrSecodNames, + imgurl: res.imgurl, + multifileList: [], + files: [], + ztList: res.imgurl ? [{ url: res.prefixUrl + res.imgurl }] : [], + pzList: [], + attrFirstList: [], + attrSecodList: [] + } + if (res.multifileList.length > 0) { + res.multifileList.forEach(item => { + obj.multifileList.push({ fileurl: item.fileurl, name: item.name, url: res.prefixUrl + item.fileurl }) + obj.files.push({ fileurl: item.fileurl, name: item.name, url: res.prefixUrl + item.fileurl }) + }) + } + this.$refs.operaGoodsWindow.open('缂栬緫鍟嗗搧', obj) + }) + }, + changeStatus(item) { + updateDisableById({ + id: item.id, + status: item.status + }).then(res => { + this.$tip.apiSuccess('鏇存柊鎴愬姛') + }).finally(() => { + // this.search() + }) + }, + turnNum(nums) { + for (let i = 0; i < nums.length; i++) { + nums[i] = parseInt(nums[i]) + } + return nums; + }, + getbrand() { + brand({}) + .then(res => { + this.brandList = res + }) + }, + getcategory() { + category({}) + .then(res => { + this.categoryList = res + }) } } - </script> - \ No newline at end of file +} +</script> -- Gitblit v1.9.3