hotel-saas-tenant-frontend/src/views/settings/components/roomModules/goodList.vue

<template>
    <div class="back">
        <div class="back-left">
            <a-button @click="handleStockTypeModelManager(undefined,1)">添加分类</a-button>
            <a-button style="margin-left: 30px;">单位设置</a-button>
            <a-tree class="draggable-tree" :tree-data="treeData" blockNode style="width: 400px;"
                :replaceFields="{ children: 'children', title: 'name', key: 'id' }">
                <div slot="title" slot-scope="item,key,children" style="display:flex; align-items: center; height: 100%; overflow: hidden;">
                    <a-button style="font-size: 12px" type="link" @click="() => { $message.success(item.name) }">{{ item.name}}</a-button>
                    <div style="flex:1;height:1px;"></div>
                    <a-button style="font-size: 12px; padding: 0 5px;" type="link" v-show="item.parentId == 0" @click="handleStockTypeModelManager(item,1)">添加分类</a-button>
                    <a-button style="font-size: 12px; padding: 0 5px;" type="link" @click="handleStockTypeModelManager(item,2)">编辑</a-button>
                    <a-button style="font-size: 12px; padding: 0 5px;" type="link" @click="() => { $message.success('删除--' + item.id) }">删除</a-button>
                </div>
            </a-tree>
        </div>
        <div class="back-right" style="margin-top: -28px; margin-left: 10px;">
            <a-card :bordered="false">
                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <a-form layout="inline" @keyup.enter.native="searchQuery">
                        <a-row :gutter="24">
                            <a-col :span="4">
                                <a-form-item label="">
                                    <j-input placeholder="商品名称" v-model="queryParam.name" style="width: 200px"></j-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="13" :sm="8" style="display: flex; justify-content: space-around;">
                                <span style="float:left; overflow: hidden" class="table-page-search-submitButtons">
                                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                                </span>
                                <span style="float:left; overflow: hidden; line-height: 32px">【全部】房间属性</span>
                                <span style="float:left; overflow: hidden">
                                    <a-button type="primary" @click="handleAdd">新增商品</a-button>
                                </span>
                                <span style="float:left; overflow: hidden">
                                    <a-button type="danger" @click="searchQuery">批量删除</a-button>
                                </span>
                                <span style="float:left; overflow: hidden;">
                                    <a-button type="primary" style="background-color:coral;border: none"
                                        @click="searchQuery">进退货</a-button>
                                </span>
                                <span style="float:left; overflow: hidden">
                                    <a-button type="primary" style="background-color:seagreen;border: none"
                                        @click="searchQuery">导入商品</a-button>
                                </span>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <!-- 查询区域-END -->
                <div>
                    <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
                        :dataSource="dataSource" :pagination="ipagination" :loading="false" :rowSelection="{
                            selectedRowKeys: selectedRowKeys,
                            onChange: onSelectChange,
                        }" class="j-table-force-nowrap" @change="handleTableChange">

                    </a-table>
                </div>
                <!-- <room-layout-form ref="modalForm" @ok="modalFormOk"></room-layout-form> -->
                <stock-type-model ref="stockTypeModel" @ok="onSave"></stock-type-model>
            </a-card>
        </div>
    </div>

</template>
<script>
import { tree } from '@/api/good'
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import stockTypeModel from './stockTypeModel.vue'
export default {
    name: "goodList",
    mixins: [JeecgListMixin],
    components: {
        stockTypeModel
      },
    data() {
        return {
            treeData: [
                {
                    t: '111',
                    k: '1',
                    c: [
                        {
                            t: '222',
                            k: '2',
                            c: [
                                { t: 'leaf', k: '333', disableCheckbox: true },
                                { t: 'leaf', k: '444' },
                            ],
                        },
                        {
                            t: '555',
                            k: '555',
                            c: [{ k: '666', t: 'sb' }],
                        },
                    ],
                },],
            checkedKeys: [''],
            selectedKeys: [],
            queryParam: {},
            // 分页参数
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ["10", "20", "30"],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条";
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0,
            },
            // 表头
            columns: [
                {
                    title: "商家",
                    align: "center",
                    dataIndex: "hotelName",
                },
                {
                    title: "分类",
                    align: "center",
                    dataIndex: "cover",

                },
                {
                    title: "单位",
                    align: "center",
                    dataIndex: "name",

                },
                {
                    title: "条码",
                    align: "center",
                    dataIndex: "marketPrice",
                },
                {
                    title: "名称",
                    align: "center",
                    dataIndex: "canLivePersonNum",
                },
                {
                    title: "进价",
                    align: "center",
                    dataIndex: "num",
                },
                {
                    title: "售价",
                    align: "center",
                    dataIndex: "state",

                },

                {
                    title: "进货量",
                    align: "center",
                    dataIndex: "appState",

                },
                {
                    title: "销售量",
                    align: "center",
                    dataIndex: "appState2",

                },
                {
                    title: "库存量",
                    align: "center",
                    dataIndex: "storeNum",

                },
                {
                    title: "排序",
                    align: "center",
                    dataIndex: "appState3",

                },
                {
                    title: "操作",
                    dataIndex: "action",
                    align: "center",
                    fixed: "right",
                    width: 147,
                },
            ],
            url: {
                // list: 'org.jeecg.modules.business/busMarketMember/list',
                list: "/rooms/cesRoomLayout/list?hotelId",
                delete: "/rooms/cesRoomLayout/remove",
                deleteBatch: "/rooms/cesRoomLayout/deleteBatch",
                exportXlsUrl: "/rooms/cesRoomLayout/exportXls",
                importExcelUrl:"rooms/cesRoomLayout/importExcel",
            },
            dictOptions: {},
            superFieldList: [],
            selectedRowKeys: [],
            isorter: {
                column: "createTime",
                order: "desc",
            },
            stockTypeVisible:false,
        };
    },
    computed: {

    },
    watch: {

    },
    created() {
        this.loadTree();
    },
    methods: {
        handleStockTypeModelManager(item,type) {
            console.log(item, type)
            this.$refs.stockTypeModel.title = type === 1 ?"新增":"修改"
            this.$refs.stockTypeModel.visible = true
        },
        loadTree() {
            var that = this
            tree().then((res) => {
                if (res.success) {
                    this.treeData = res.result;
                }
            })
        },
        onExpand(expandedKeys) {
            console.log('onExpand', expandedKeys);
            // if not set autoExpandParent to false, if children expanded, parent can not collapse.
            // or, you can remove all expanded children keys.
        },
        onSelect(selectedKeys, info) {
            console.log('onSelect', info);
            this.selectedKeys = selectedKeys;
        },
    },
};
</script>
<style scoped>
.back {
    display: flex;
    justify-content: space-between;
}

.back-left {
    flex: 10
}

.back-right {
    flex: 38;
}

.ant-tree li .ant-tree-node-content-wrapper {
    height: auto !important;
}

.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: #bae7ff33;
}</style>