|
@@ -1,244 +1,256 @@
|
|
|
<template>
|
|
|
- <a-card :bordered="false" class="goodsClass-page-info">
|
|
|
- <!-- 搜索框 -->
|
|
|
- <div class="goodsClass-search">
|
|
|
- <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
|
|
|
- <a-row :gutter="20">
|
|
|
- <a-col :md="6" :sm="24">
|
|
|
- <a-form-item label="商品分类名称" :label-col="{ span:8 }" :wrapper-col="{ span: 16 }">
|
|
|
- <a-input allowClear v-model="searchData.name" :maxLength="30" placeholder="请输入" id="goodsClass-name" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :md="6" :sm="24">
|
|
|
- <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)" id="goodsClass-refresh">查询</a-button>
|
|
|
- <a-button type="" @click="resetForm" id="goodsClass-resetForm">重置</a-button>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- <div class="add">
|
|
|
- <a-button
|
|
|
- type="primary"
|
|
|
- icon="plus"
|
|
|
- class="addBtn"
|
|
|
- @click="showModal"
|
|
|
- id="goodsClass-showModal"
|
|
|
- v-hasPermission="'B_goodsClass_add'">新增</a-button>
|
|
|
- </div>
|
|
|
- <!-- table列表 -->
|
|
|
- <s-table
|
|
|
- ref="table"
|
|
|
- size="default"
|
|
|
- :rowKey="(record) => record.id"
|
|
|
- :columns="columns"
|
|
|
- :data="loadData"
|
|
|
- bordered>
|
|
|
- <span slot="action" slot-scope="text, record">
|
|
|
- <a-icon
|
|
|
- v-hasPermission="'B_goodsClass_edit'"
|
|
|
- type="edit"
|
|
|
- id="goodsClass-handleEdit"
|
|
|
- title="编辑"
|
|
|
- class="actionBtn icon-blues"
|
|
|
- @click="handleEdit(record)" />
|
|
|
- <span v-if="!$hasPermissions('B_goodsClass_edit')">--</span>
|
|
|
- </span>
|
|
|
- <span slot="state" slot-scope="text, record">
|
|
|
- <a-switch
|
|
|
- v-hasPermission="'B_goodsClass_enable'"
|
|
|
- checkedChildren="启用"
|
|
|
- unCheckedChildren="禁用"
|
|
|
- id="goodsClass-changeFlagHandle"
|
|
|
- :checked="record.state == 1 ? true : false"
|
|
|
- @change="changeFlagHandle(text, record)" />
|
|
|
- <span v-if="!$hasPermissions('B_goodsClass_enable')">--</span>
|
|
|
- </span>
|
|
|
- </span></s-table>
|
|
|
- <add-goodsClass-modal
|
|
|
- :itemId="itemId"
|
|
|
- :itemData="itemData"
|
|
|
- :openGoodClassModal="openGoodClassModal"
|
|
|
- @refresh="$refs.table.refresh(true)"
|
|
|
- @close="cancel"></add-goodsClass-modal>
|
|
|
- </a-card>
|
|
|
+ <a-card :bordered="false" class="goodsClass-page-info">
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <div class="goodsClass-search">
|
|
|
+ <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
|
|
|
+ <a-row :gutter="20">
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-form-item label="商品分类名称" :label-col="{ span:8 }" :wrapper-col="{ span: 16 }">
|
|
|
+ <a-input allowClear v-model="searchData.name" :maxLength="30" placeholder="请输入" id="goodsClass-name" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)" id="goodsClass-refresh">查询</a-button>
|
|
|
+ <a-button type="" @click="resetForm" id="goodsClass-resetForm">重置</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <div class="add">
|
|
|
+ <a-button type="primary" icon="plus" class="addBtn" @click="showModal" id="goodsClass-showModal" v-hasPermission="'B_goodsClass_add'">新增</a-button>
|
|
|
+ </div>
|
|
|
+ <!-- table列表 -->
|
|
|
+ <s-table ref="table" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
+ <a-icon v-hasPermission="'B_goodsClass_edit'" type="edit" id="goodsClass-handleEdit" title="编辑" class="actionBtn icon-blues"
|
|
|
+ @click="handleEdit(record)" />
|
|
|
+ <span v-if="!$hasPermissions('B_goodsClass_edit')">--</span>
|
|
|
+ </span>
|
|
|
+ <span slot="state" slot-scope="text, record">
|
|
|
+ <a-switch v-hasPermission="'B_goodsClass_enable'" checkedChildren="启用" unCheckedChildren="禁用" id="goodsClass-changeFlagHandle"
|
|
|
+ :checked="record.state == 1 ? true : false" @change="changeFlagHandle(text, record)" />
|
|
|
+ <span v-if="!$hasPermissions('B_goodsClass_enable')">--</span>
|
|
|
+ </span>
|
|
|
+ <!-- 排序 -->
|
|
|
+ <template slot="sort" slot-scope="text, record, index">
|
|
|
+ <span v-hasPermission="'B_goodsClass_changeSort'">
|
|
|
+ <a-icon title="下移" v-if="index != list.length-1" :style="{ fontSize: '18px', color: '#1891FF', cursor: 'pointer',padding:'0 10px' }"
|
|
|
+ @click="changeSort(index,record,0)" type="arrow-down" />
|
|
|
+ <a-icon title="上移" v-if="index != 0" :style="{ fontSize: '18px', color: '#1891FF',cursor: 'pointer', padding:'0 10px' }"
|
|
|
+ @click="changeSort(index,record,1)" type="arrow-up" />
|
|
|
+ <span v-if="list.length===1">--</span>
|
|
|
+ </span>
|
|
|
+ <span v-if="!$hasPermissions('B_goodsClass_changeSort')">--</span>
|
|
|
+ </template>
|
|
|
+ </s-table>
|
|
|
+ <add-goodsClass-modal :itemId="itemId" :itemData="itemData" :openGoodClassModal="openGoodClassModal" @refresh="$refs.table.refresh(true)"
|
|
|
+ @close="cancel"></add-goodsClass-modal>
|
|
|
+ </a-card>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {
|
|
|
- Upload,
|
|
|
- STable,
|
|
|
- VSelect
|
|
|
-} from '@/components'
|
|
|
-import addGoodsClassModal from './addGoodsClassModal.vue'
|
|
|
-import {
|
|
|
- getGoodsClassList,
|
|
|
- changeGoodsStatus
|
|
|
-} from '@/api/shopSetting.js'
|
|
|
+ import {
|
|
|
+ Upload,
|
|
|
+ STable,
|
|
|
+ VSelect
|
|
|
+ } from '@/components'
|
|
|
+ import addGoodsClassModal from './addGoodsClassModal.vue'
|
|
|
+ import {
|
|
|
+ getGoodsClassList,
|
|
|
+ changeGoodsStatus,
|
|
|
+ goodsChangeSort
|
|
|
+ } from '@/api/shopSetting.js'
|
|
|
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- STable,
|
|
|
- Upload,
|
|
|
- VSelect,
|
|
|
- addGoodsClassModal
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- searchData: {
|
|
|
- name: ''
|
|
|
- },
|
|
|
- openGoodClassModal: false, // 默认关闭弹窗
|
|
|
- itemId: null, // 编辑行id
|
|
|
- itemData: {}, // 编辑行数据
|
|
|
- formLayout: 'horizontal',
|
|
|
- form: this.$form.createForm(this),
|
|
|
- // 表头
|
|
|
- columns: [{
|
|
|
- title: '序号',
|
|
|
- dataIndex: 'no',
|
|
|
- width: 60,
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '商品分类名称',
|
|
|
- width: 100,
|
|
|
- dataIndex: 'name',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '订单起购金额',
|
|
|
- width: 100,
|
|
|
- dataIndex: 'goldLimit',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '商城主页显示数量',
|
|
|
- width: 100,
|
|
|
- dataIndex: 'popularizeGoodsLimit',
|
|
|
- align: 'center'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '状态',
|
|
|
- width: 100,
|
|
|
- dataIndex: 'state',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'state'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '备注',
|
|
|
- width: 100,
|
|
|
- dataIndex: 'remarks',
|
|
|
- align: 'center',
|
|
|
- customRender: (text) => {
|
|
|
- return text || '--'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- align: 'center',
|
|
|
- width: 100,
|
|
|
- scopedSlots: {
|
|
|
- customRender: 'action'
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- // 加载数据方法 必须为 Promise 对象
|
|
|
- loadData: parameter => {
|
|
|
- return getGoodsClassList(
|
|
|
- Object.assign(parameter, this.searchData)
|
|
|
- ).then(res => {
|
|
|
- const no = (res.data.pageNo - 1) * res.data.pageSize
|
|
|
- if (res.status == 200) {
|
|
|
- for (let i = 0; i < res.data.list.length; i++) {
|
|
|
- const _item = res.data.list[i]
|
|
|
- _item.no = no + i + 1
|
|
|
- }
|
|
|
- return res.data
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- beforeCreate () {
|
|
|
- this.form = this.$form.createForm(this, {
|
|
|
- name: 'validate_other'
|
|
|
- })
|
|
|
- },
|
|
|
- methods: {
|
|
|
- showModal () {
|
|
|
- console.log('---新增')
|
|
|
- this.itemId = null
|
|
|
- this.itemData = {}
|
|
|
- this.openGoodClassModal = true
|
|
|
- },
|
|
|
- // 编辑
|
|
|
- handleEdit (record) {
|
|
|
- this.itemId = record.id
|
|
|
- this.itemData = record
|
|
|
- console.log(this.itemId, '-------编辑')
|
|
|
- this.openGoodClassModal = true
|
|
|
- },
|
|
|
- // 重置
|
|
|
- resetForm () {
|
|
|
- this.searchData.name = ''
|
|
|
- this.$refs.table.refresh(true)
|
|
|
- },
|
|
|
- //
|
|
|
- cancel () {
|
|
|
- this.itemId = null
|
|
|
- this.openGoodClassModal = false
|
|
|
- },
|
|
|
- // 更改启用禁用状态
|
|
|
- changeFlagHandle (text, record) {
|
|
|
- console.log(text)
|
|
|
- const _this = this
|
|
|
- const _data = {
|
|
|
- id: record.id,
|
|
|
- flag: record.state == 1 ? '0' : '1'
|
|
|
- }
|
|
|
- if (record.state == 1) {
|
|
|
- this.$confirm({
|
|
|
- title: '提示',
|
|
|
- centered: true,
|
|
|
- content: '商品分类被禁用后,该分类将不在显示给用户,确定禁用吗?',
|
|
|
- okText: '确定',
|
|
|
- cancelText: '取消',
|
|
|
- onOk () {
|
|
|
- changeGoodsStatus(_data).then(res => {
|
|
|
- if (res.status == 200) {
|
|
|
- _this.$message.success(res.message)
|
|
|
- _this.$refs.table.refresh()
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- changeGoodsStatus(_data).then(res => {
|
|
|
- if (res.status == 200) {
|
|
|
- _this.$message.success(res.message)
|
|
|
- _this.$refs.table.refresh()
|
|
|
- } else {
|
|
|
- record.state = !record.state
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- beforeRouteEnter (to, from, next) {
|
|
|
- next(vm => {
|
|
|
- vm.resetForm()
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ STable,
|
|
|
+ Upload,
|
|
|
+ VSelect,
|
|
|
+ addGoodsClassModal
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ searchData: {
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ openGoodClassModal: false, // 默认关闭弹窗
|
|
|
+ itemId: null, // 编辑行id
|
|
|
+ itemData: {}, // 编辑行数据
|
|
|
+ formLayout: 'horizontal',
|
|
|
+ list: [], // 列表数据
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ // 表头
|
|
|
+ columns: [{
|
|
|
+ title: '序号',
|
|
|
+ dataIndex: 'no',
|
|
|
+ width: 60,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '商品分类名称',
|
|
|
+ width: 100,
|
|
|
+ dataIndex: 'name',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '订单起购金额',
|
|
|
+ width: 100,
|
|
|
+ dataIndex: 'goldLimit',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '商城主页显示数量',
|
|
|
+ width: 100,
|
|
|
+ dataIndex: 'popularizeGoodsLimit',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ width: 100,
|
|
|
+ dataIndex: 'state',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'state'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '备注',
|
|
|
+ width: 100,
|
|
|
+ dataIndex: 'remarks',
|
|
|
+ align: 'center',
|
|
|
+ customRender: (text) => {
|
|
|
+ return text || '--'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '排序',
|
|
|
+ width: 200,
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'sort'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ align: 'center',
|
|
|
+ width: 100,
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'action'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 加载数据方法 必须为 Promise 对象
|
|
|
+ loadData: parameter => {
|
|
|
+ return getGoodsClassList(
|
|
|
+ Object.assign(parameter, this.searchData)
|
|
|
+ ).then(res => {
|
|
|
+ this.list = res.data.list || []
|
|
|
+ const no = (res.data.pageNo - 1) * res.data.pageSize
|
|
|
+ if (res.status == 200) {
|
|
|
+ for (let i = 0; i < res.data.list.length; i++) {
|
|
|
+ const _item = res.data.list[i]
|
|
|
+ _item.no = no + i + 1
|
|
|
+ }
|
|
|
+ return res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeCreate() {
|
|
|
+ this.form = this.$form.createForm(this, {
|
|
|
+ name: 'validate_other'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showModal() {
|
|
|
+ console.log('---新增')
|
|
|
+ this.itemId = null
|
|
|
+ this.itemData = {}
|
|
|
+ this.openGoodClassModal = true
|
|
|
+ },
|
|
|
+ // 编辑
|
|
|
+ handleEdit(record) {
|
|
|
+ this.itemId = record.id
|
|
|
+ this.itemData = record
|
|
|
+ console.log(this.itemId, '-------编辑')
|
|
|
+ this.openGoodClassModal = true
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ resetForm() {
|
|
|
+ this.searchData.name = ''
|
|
|
+ this.$refs.table.refresh(true)
|
|
|
+ },
|
|
|
+ //
|
|
|
+ cancel() {
|
|
|
+ this.itemId = null
|
|
|
+ this.openGoodClassModal = false
|
|
|
+ },
|
|
|
+ // 更改启用禁用状态
|
|
|
+ changeFlagHandle(text, record) {
|
|
|
+ console.log(text)
|
|
|
+ const _this = this
|
|
|
+ const _data = {
|
|
|
+ id: record.id,
|
|
|
+ flag: record.state == 1 ? '0' : '1'
|
|
|
+ }
|
|
|
+ if (record.state == 1) {
|
|
|
+ this.$confirm({
|
|
|
+ title: '提示',
|
|
|
+ centered: true,
|
|
|
+ content: '商品分类被禁用后,该分类将不在显示给用户,确定禁用吗?',
|
|
|
+ okText: '确定',
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk() {
|
|
|
+ changeGoodsStatus(_data).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ _this.$message.success(res.message)
|
|
|
+ _this.$refs.table.refresh()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ changeGoodsStatus(_data).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ _this.$message.success(res.message)
|
|
|
+ _this.$refs.table.refresh()
|
|
|
+ } else {
|
|
|
+ record.state = !record.state
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 上移 下移 排序 index:下标 item:数据 type:类型 0 下移 1 上移
|
|
|
+ changeSort(index, item, type) {
|
|
|
+ const indexThat = type === 0 ? index + 1 : index - 1
|
|
|
+ const params = {
|
|
|
+ 'currentId': item.id,
|
|
|
+ 'id': this.list[indexThat].id,
|
|
|
+ }
|
|
|
+ goodsChangeSort(params).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ this.$refs.table.refresh()
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeRouteEnter(to, from, next) {
|
|
|
+ next(vm => {
|
|
|
+ vm.resetForm()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|
|
|
- .goodsClass-page-info{
|
|
|
- .goodsClass-search{
|
|
|
+ .goodsClass-page-info {
|
|
|
+ .goodsClass-search {
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
+
|
|
|
.w-e-toolbar {
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
@@ -247,5 +259,4 @@ export default {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
</style>
|