|
@@ -1,246 +1,158 @@
|
|
<template>
|
|
<template>
|
|
- <a-card :bordered="false">
|
|
|
|
- <a-row type="flex">
|
|
|
|
- <a-col span="4">
|
|
|
|
- <a-menu mode="inline" @click="handleClick">
|
|
|
|
- <a-menu-item v-for="item in menuList" :key="item.id" :title="item.name">
|
|
|
|
- {{item.name}}
|
|
|
|
- </a-menu-item>
|
|
|
|
- </a-menu>
|
|
|
|
- </a-col>
|
|
|
|
- <a-col span="1"></a-col>
|
|
|
|
- <!-- <a-divider style="{height: 100%;}" type="vertical" /> -->
|
|
|
|
- <a-col span="19">
|
|
|
|
- <div class="table-operator">
|
|
|
|
- <a-button type="primary" @click="openModal">选择商品</a-button>
|
|
|
|
- </div>
|
|
|
|
- <s-table ref="table" size="default" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
|
|
|
|
- <!-- 操作 -->
|
|
|
|
- <template slot="action" slot-scope="text, record">
|
|
|
|
- <a-icon title="编辑" type="edit" class="actionBtn icon-blues" @click="openModal(record)" />
|
|
|
|
- <!-- <a-icon title="删除" type="delete" class="actionBtn icon-red" v-if="record.status == '0'" @click="delect(record)" /> -->
|
|
|
|
- </template>
|
|
|
|
- <!-- 启用禁用 -->
|
|
|
|
- <template slot="enable" slot-scope="text, row">
|
|
|
|
- <span :class="[text==1 ? 'green' : 'red']">{{ text==1 ? '已启用' : '已禁用' }}</span>
|
|
|
|
- </template>
|
|
|
|
- </s-table>
|
|
|
|
- </a-col>
|
|
|
|
- </a-row>
|
|
|
|
- </a-card>
|
|
|
|
|
|
+ <a-card :bordered="false">
|
|
|
|
+ <a-row type="flex">
|
|
|
|
+ <a-col span="4">
|
|
|
|
+ <a-menu class="menu-cont" :defaultSelectedKeys="[menuList[0].id]" mode="inline" @click="handleClick">
|
|
|
|
+ <a-menu-item v-for="item in menuList" :key="item.id" :title="item.name">
|
|
|
|
+ {{ item.name }}
|
|
|
|
+ </a-menu-item>
|
|
|
|
+ </a-menu>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col span="1"></a-col>
|
|
|
|
+ <a-col span="19">
|
|
|
|
+ <div class="table-operator">
|
|
|
|
+ <a-button type="primary" @click="openModal">选择商品</a-button>
|
|
|
|
+ </div>
|
|
|
|
+ <a-table
|
|
|
|
+ ref="table"
|
|
|
|
+ size="default"
|
|
|
|
+ :rowKey="(record) => record.id"
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :data-source="loadData"
|
|
|
|
+ bordered>
|
|
|
|
+ <!-- 操作 -->
|
|
|
|
+ <template slot="action" slot-scope="text, record">
|
|
|
|
+ <a id="goodsShelves-del">删除</a>
|
|
|
|
+ </template>
|
|
|
|
+ </a-table>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ <!-- 选择商品 弹框 -->
|
|
|
|
+ <goods-choose-modal :itemId="itemId" :visible="isShowModal" @refresh="" @close="isShowModal=false"></goods-choose-modal>
|
|
|
|
+ </a-card>
|
|
|
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import {
|
|
|
|
- STable,
|
|
|
|
- VSelect
|
|
|
|
- } from '@/components'
|
|
|
|
- import {
|
|
|
|
- getTenantsList,
|
|
|
|
- tenantsDelete
|
|
|
|
- } from '@/api/tenants.js'
|
|
|
|
- import moment from 'moment'
|
|
|
|
- export default {
|
|
|
|
- name: 'GoodsList',
|
|
|
|
- components: {
|
|
|
|
- STable,
|
|
|
|
- VSelect
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- moment,
|
|
|
|
- pageNo: 1,
|
|
|
|
- pageSize: 10,
|
|
|
|
- menuList: [{
|
|
|
|
- id: 1,
|
|
|
|
- name: '人气零食'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- id: 12,
|
|
|
|
- name: '居家生活'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- id: 13,
|
|
|
|
- name: '个护清洁'
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
- openTenantsModal: false, // 打开授权弹窗
|
|
|
|
- itemId: '', // 要编辑的租户id
|
|
|
|
- // 查询参数
|
|
|
|
- queryParam: {
|
|
|
|
- name: '',
|
|
|
|
- contactPhone: '',
|
|
|
|
- status: '' // 状态
|
|
|
|
- },
|
|
|
|
- // 表头
|
|
|
|
- columns: [{
|
|
|
|
- title: '序号',
|
|
|
|
- dataIndex: 'no',
|
|
|
|
- width: '40',
|
|
|
|
- align: 'center'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '创建时间',
|
|
|
|
- dataIndex: 'createDate',
|
|
|
|
- width: '200',
|
|
|
|
- align: 'center'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '企业名称',
|
|
|
|
- dataIndex: 'name',
|
|
|
|
- align: 'center'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '负责人名称',
|
|
|
|
- dataIndex: 'contactName',
|
|
|
|
- width: '120',
|
|
|
|
- align: 'center',
|
|
|
|
- customRender: (text) => {
|
|
|
|
- return text || '--'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '负责人手机',
|
|
|
|
- width: '120',
|
|
|
|
- align: 'center',
|
|
|
|
- dataIndex: 'contactPhone'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '有效期至',
|
|
|
|
- width: '200',
|
|
|
|
- align: 'center',
|
|
|
|
- dataIndex: 'expireDate'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '启用状态',
|
|
|
|
- width: '200',
|
|
|
|
- align: 'center',
|
|
|
|
- dataIndex: 'status',
|
|
|
|
- scopedSlots: {
|
|
|
|
- customRender: 'enable'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '操作',
|
|
|
|
- width: '200',
|
|
|
|
- align: 'center',
|
|
|
|
- scopedSlots: {
|
|
|
|
- customRender: 'action'
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- ],
|
|
|
|
- // 加载数据方法 必须为 Promise 对象
|
|
|
|
- loadData: parameter => {
|
|
|
|
- return getTenantsList(Object.assign(parameter, this.queryParam)).then(res => {
|
|
|
|
- console.log(res, 'rrrrrrr')
|
|
|
|
- if (res.status == 200) {
|
|
|
|
- const no = (res.data.pageNo - 1) * res.data.pageSize
|
|
|
|
- for (let i = 0; i < res.data.list.length; i++) {
|
|
|
|
- const _item = res.data.list[i]
|
|
|
|
- _item.no = no + i + 1
|
|
|
|
- _item.status = _item.status + '' === '1'
|
|
|
|
- }
|
|
|
|
- return res.data
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- beforeRouteEnter(to, from, next) {
|
|
|
|
- next(vm => {
|
|
|
|
- vm.reset()
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- handleClick() {
|
|
|
|
|
|
+import {
|
|
|
|
+ STable,
|
|
|
|
+ VSelect
|
|
|
|
+} from '@/components'
|
|
|
|
+import {
|
|
|
|
+ getTenantsList,
|
|
|
|
+ tenantsDelete
|
|
|
|
+} from '@/api/tenants.js'
|
|
|
|
+import goodsChooseModal from './GoodsChooseModal.vue'
|
|
|
|
+export default {
|
|
|
|
+ name: 'GoodsList',
|
|
|
|
+ components: {
|
|
|
|
+ STable,
|
|
|
|
+ VSelect,
|
|
|
|
+ goodsChooseModal
|
|
|
|
+ },
|
|
|
|
+ data () {
|
|
|
|
+ return {
|
|
|
|
+ pageNo: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ isShowModal: false, // 是否显示选择弹框
|
|
|
|
+ menuList: [{
|
|
|
|
+ id: 1,
|
|
|
|
+ name: '人气零食'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 12,
|
|
|
|
+ name: '居家生活'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ id: 13,
|
|
|
|
+ name: '个护清洁'
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ itemId: '', // 要编辑的租户id
|
|
|
|
+ // 表头
|
|
|
|
+ columns: [{
|
|
|
|
+ title: '序号',
|
|
|
|
+ dataIndex: 'no',
|
|
|
|
+ width: 70,
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '商品名称',
|
|
|
|
+ dataIndex: 'createDate',
|
|
|
|
+ width: 200,
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '商品价格(乐豆)',
|
|
|
|
+ width: 200,
|
|
|
|
+ dataIndex: 'name',
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '库存数量',
|
|
|
|
+ dataIndex: 'contactName',
|
|
|
|
+ width: 120,
|
|
|
|
+ align: 'center',
|
|
|
|
+ customRender: (text) => {
|
|
|
|
+ return text || '--'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '操作',
|
|
|
|
+ width: 200,
|
|
|
|
+ align: 'center',
|
|
|
|
+ scopedSlots: {
|
|
|
|
+ customRender: 'action'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ loadData: []
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ beforeRouteEnter (to, from, next) {
|
|
|
|
+ next(vm => {
|
|
|
|
+ vm.reset()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ handleClick () {
|
|
|
|
|
|
- },
|
|
|
|
- // 打开新增/编辑 弹窗
|
|
|
|
- openModal(row) {
|
|
|
|
- this.itemId = row ? row.id : ''
|
|
|
|
- this.openTenantsModal = true
|
|
|
|
- },
|
|
|
|
- // 删除
|
|
|
|
- delect(row) {
|
|
|
|
- const _this = this
|
|
|
|
- this.$confirm({
|
|
|
|
- title: '警告',
|
|
|
|
- centered: true,
|
|
|
|
- content: '删除后原数据不可恢复,是否删除?',
|
|
|
|
- okText: '确定',
|
|
|
|
- cancelText: '取消',
|
|
|
|
- onOk() {
|
|
|
|
- tenantsDelete({
|
|
|
|
- id: row.id
|
|
|
|
- }).then(res => {
|
|
|
|
- if (res.status == 200) {
|
|
|
|
- _this.$message.success('res.message')
|
|
|
|
- _this.$refs.table.refresh()
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- // 重置
|
|
|
|
- reset() {
|
|
|
|
- this.queryParam = {
|
|
|
|
- name: '',
|
|
|
|
- contactPhone: '',
|
|
|
|
- status: '' // 状态
|
|
|
|
- }
|
|
|
|
- this.$refs.table.refresh(true)
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-</script>
|
|
|
|
-<style>
|
|
|
|
- .table-page-search-wrapper,
|
|
|
|
- .addButton {
|
|
|
|
- margin-bottom: 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .table-page-search-wrapper .ant-form-inline .ant-form-item {
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .textCount {
|
|
|
|
- border: 1px solid #91d5ff;
|
|
|
|
- background-color: #e6f7ff;
|
|
|
|
- padding: 10px 0;
|
|
|
|
- border-radius: 5px;
|
|
|
|
- padding-left: 20px;
|
|
|
|
- margin: 10px 0;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .action-button {
|
|
|
|
- line-height: 40px;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- padding: 5px 10px;
|
|
|
|
- background-color: #1890ff;
|
|
|
|
- border-radius: 4px;
|
|
|
|
- color: #fff;
|
|
|
|
- margin-right: 5px;
|
|
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+ // 打开新增/编辑 弹窗
|
|
|
|
+ openModal (row) {
|
|
|
|
+ this.itemId = row ? row.id : ''
|
|
|
|
+ this.isShowModal = true
|
|
|
|
+ },
|
|
|
|
+ // 删除
|
|
|
|
+ delect (row) {
|
|
|
|
+ const _this = this
|
|
|
|
+ this.$confirm({
|
|
|
|
+ title: '警告',
|
|
|
|
+ centered: true,
|
|
|
|
+ content: '删除后原数据不可恢复,是否删除?',
|
|
|
|
+ okText: '确定',
|
|
|
|
+ cancelText: '取消',
|
|
|
|
+ onOk () {
|
|
|
|
+ tenantsDelete({
|
|
|
|
+ id: row.id
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ _this.$message.success('res.message')
|
|
|
|
+ _this.$refs.table.refresh()
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 重置
|
|
|
|
+ reset () {
|
|
|
|
|
|
- .menu-text {
|
|
|
|
- background-color: #f90;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .actionBtn {
|
|
|
|
- font-size: 20px;
|
|
|
|
- padding: 0 10px;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .blue {
|
|
|
|
- color: #1890FF;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .green {
|
|
|
|
- color: #16b50e;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .red {
|
|
|
|
- color: red;
|
|
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style scoped="true">
|
|
|
|
+ .menu-cont{
|
|
|
|
+ height: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|