123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256 |
- <template>
- <a-card size="small" :bordered="false" class="shoppingManagementList-wrap">
- <a-spin :spinning="spinning" tip="Loading...">
- <!-- 操作按钮 -->
- <div ref="tableSearch" class="table-operator" style="border: 0;">
- <a-button id="shoppingManagementList-addType" type="primary" @click="addCategory('add')">新增类目</a-button>
- </div>
- <!-- 列表 -->
- <a-table
- class="sTable fixPagination"
- ref="table"
- :style="{ height: tableHeight+70+'px'}"
- size="small"
- :rowKey="(record) => record.id"
- :columns="columns"
- :pagination="false"
- :dataSource="loadDataList"
- :scroll="{ y: tableHeight }"
- @expand="expandChild"
- bordered>
- <!-- 图片 -->
- <template slot="imgs" slot-scope="text, record">
- <div class="addType-img">
- <img :src="record.iconUrl" alt="图片走丢啦" width="60" height="60" :id="'shoppingManagementList-img-'+record.id"/>
- </div>
- </template>
- <!-- 状态 -->
- <template slot="enabledFlag" slot-scope="text, record">
- <a-switch
- :id="'shoppingManagementList-enableFlag-'+record.id"
- v-if="$hasPermissions('B_supplierInfo_enabled')"
- checkedChildren="启用"
- unCheckedChildren="禁用"
- v-model="record.enableFlag"
- @click="e=>changeFlagHandle(e,record)"/>
- <span v-else :style="{color:(record.enableFlag?'#00aa00':'#999')}"> {{ record.enableFlag? '已启用': '已禁用' }} </span>
- </template>
- <!-- 操作 -->
- <template slot="action" slot-scope="text, record">
- <a-button
- size="small"
- type="link"
- class="button-info"
- @click="handleEdit(record,'edit')"
- :id="'shoppingManagementList-edit-btn'+record.id">编辑</a-button>
- <a-button
- size="small"
- type="link"
- class="button-info"
- v-if="record.type && record.type == 'root'"
- @click="handleEdit(record,'addChild')"
- :id="'shoppingManagementList-addChild-btn'+record.id">添加子类目</a-button>
- <a-button
- size="small"
- type="link"
- class="button-success"
- v-else
- @click="handleAddProduct(record)"
- :id="'shoppingManagementList-addProduct-btn'+record.id">添加产品</a-button>
- <a-button
- size="small"
- type="link"
- class="button-error"
- @click="handleDel(record)"
- :id="'shoppingManagementList-del-btn'+record.id">删除</a-button>
- </template>
- </a-table>
- </a-spin>
- <!-- 新增类目 -->
- <addCategoryModal
- v-drag
- ref="categoryModal"
- :pageType="pageType"
- :openModal="openCategoryModal"
- :parentData="parentData"
- @ok="$refs.table.refresh()"
- @close="openCategoryModal=false"></addCategoryModal>
- </a-card>
- </template>
- <script>
- import { commonMixin } from '@/utils/mixin'
- // 组件
- import { VSelect } from '@/components'
- import addCategoryModal from './addCategoryModal.vue'
- // 接口
- import { shopCategoryList, getChildList, shopCategoryUpdateStatus, shopCategoryDel } from '@/api/shopCategory'
- export default {
- name: 'ShoppingManagementList',
- mixins: [commonMixin],
- components: { VSelect, addCategoryModal },
- data () {
- return {
- spinning: false,
- tableHeight: 0, // 表格高度
- openCategoryModal: false, // 打开新增类目弹窗
- // 表头
- columns: [
- { title: '类目名称', dataIndex: 'categoryName', width: '20%', align: 'left', customRender: function (text) { return text || '--' } },
- { title: '图片', scopedSlots: { customRender: 'imgs' }, width: '15%', align: 'center' },
- { title: '优先级', dataIndex: 'sort', width: '15%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
- { title: '创建时间', dataIndex: 'createDate', width: '15%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
- { title: '状态', scopedSlots: { customRender: 'enabledFlag' }, width: '15%', align: 'center' },
- { title: '操作', scopedSlots: { customRender: 'action' }, width: '20%', align: 'center' }
- ],
- parentData: null, // 父级类目一行数据
- loadDataList: [], // 表格数据
- pageType: null// 按钮类型
- }
- },
- methods: {
- // 展开子级 获取子级数据
- expandChild (expanded, record) {
- if (expanded) {
- const _this = this
- _this.spinning = true
- getChildList({ categorySn: record.categorySn }).then(res => {
- if (res.status == 200) {
- const pos = this.loadDataList.findIndex(item => item.categorySn === record.categorySn)
- _this.loadDataList[pos].children = pos != -1 ? (res.data.shopCategoryList && res.data.shopCategoryList.length > 0) ? res.data.shopCategoryList : [] : []
- }
- _this.spinning = false
- })
- }
- },
- // 新增类目
- addCategory (typeVal) {
- this.pageType = typeVal
- this.openCategoryModal = true
- },
- // 编辑 添加子类目
- handleEdit (row, typeVal) {
- this.pageType = typeVal
- this.openCategoryModal = true
- this.parentData = row
- if (typeVal === 'edit') {
- this.$refs.categoryModal.getDetailData({ categorySn: row.categorySn })
- }
- },
- // 更新状态
- changeFlagHandle (e, row) {
- const _this = this
- const tipWord = row.status == 1 ? '禁用后,关联的产品会同步下架,确认禁用吗?' : '启用后,关联的产品不会同步上架,确认启用吗?'
- this.$confirm({
- title: '提示',
- content: tipWord,
- centered: true,
- onOk () {
- _this.spinning = true
- const params = { sn: row.categorySn }
- params.status = row.status == 1 ? '0' : '1'
- shopCategoryUpdateStatus(params).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- _this.spinning = false
- } else {
- _this.spinning = false
- }
- })
- },
- onCancel () {
- }
- })
- },
- // 添加产品
- handleAddProduct (row) {
- this.$router.push({ name: 'chooseProductList', params: { sn: row.shopProductSn } })
- },
- // 删除
- handleDel (row) {
- const _this = this
- this.$confirm({
- title: '提示',
- content: '删除后,关联的产品会同步删除,确认删除吗?',
- centered: true,
- onOk () {
- _this.spinning = true
- shopCategoryDel({ categorySn: row.categorySn }).then(res => {
- if (res.status == 200) {
- _this.$message.success(res.message)
- _this.$refs.table.refresh()
- _this.spinning = false
- } else {
- _this.spinning = false
- }
- })
- }
- })
- },
- // 获取表格数据
- getTabData () {
- this.spinning = true
- shopCategoryList({}).then(res => {
- let data
- if (res.status == 200) {
- data = res.data
- for (var i = 0; i < data.length; i++) {
- data[i].enableFlag = data[i].status === 1
- data[i].children = []
- data[i].type = 'root'
- }
- }
- this.loadDataList = res.data
- this.spinning = false
- })
- },
- // 初始化
- pageInit () {
- const _this = this
- _this.getTabData()
- this.$nextTick(() => { // 页面渲染完成后的回调
- _this.setTableH()
- })
- },
- // 计算表格高度
- setTableH () {
- const tableSearchH = this.$refs.tableSearch.offsetHeight
- this.tableHeight = window.innerHeight - tableSearchH - 230
- }
- },
- watch: {
- '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
- this.setTableH()
- }
- },
- mounted () {
- if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
- this.pageInit()
- }
- },
- activated () {
- // 如果是新页签打开,则重置当前页面
- if (this.$store.state.app.isNewTab) {
- this.pageInit()
- }
- // 仅刷新列表,不重置页面
- if (this.$store.state.app.updateList) {
- this.pageInit()
- }
- },
- beforeRouteEnter (to, from, next) {
- next(vm => {})
- }
- }
- </script>
- <style lang="less">
- .shoppingManagementList-wrap{
- height: 100%;
- .addType-img{
- img{
- object-fit: cover;
- }
- }
- }
- </style>
|