tuanfeng-pc-mer/src/views/mealManagement/mealOrders/components/OrderDishes.vue

<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions">
    <div>
      <div style="display: flex;justify-content: flex-end;padding: 0 0 10px;">
        <el-button
          v-if="!listLoading && list && list.length"
          type="danger" size="medium"
          @click="handleEmptyDishes()"
        >
          菜品清空
        </el-button>
      </div>

      <!-- 查询结果 -->
      <div>
        <el-table
          v-loading="listLoading" max-height="600" element-loading-text="正在查询中。。。" :data="list"
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark"
          v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
        >
          <el-table-column align="center" min-width="80" prop="id" label="ID" />
          <el-table-column align="center" width="120" prop="orderId" label="订单ID" show-overflow-tooltip />
          <el-table-column align="center" min-width="120" label="菜品ID" prop="dishId">
            <template slot-scope="{ row }">
              <div>
                <span>{{ row.dishId }}</span>
                <el-button
                  v-if="row.productId"
                  style="margin-left: 14px;"
                  type="warning" size="mini"
                  @click="$refs.DetailModal && $refs.DetailModal.handleOpen({ productId: row.productId })"
                >
                  详情
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="120" prop="quantity" label="商品数量" show-overflow-tooltip />
          <el-table-column align="center" min-width="100" prop="amount" label="商品金额" show-overflow-tooltip />
          <el-table-column align="center" width="150" label="创建时间" prop="createTime" />
          <el-table-column label="操作" width="140" fixed="right" class-name="small-padding fixed-width">
            <template slot-scope="{ row }">
              <el-button
                type="warning" size="mini" @click="handleAddDishes(row)"
              >
                菜品+1
              </el-button>
              <el-button
                v-if="row.quantity"
                type="danger" size="mini" @click="handleSubtractDishes(row)"
              >
                菜品-1
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 查看详情 -->
      <DetailModal ref="DetailModal" />
    </div>
  </el-dialog>
</template>

<script>
import { getDishShopLaOrders, dishIncShopLaOrdersDish, dishDecShopLaOrdersDish, toEmptyShopLaOrdersDish } from '@/api/mealManagement/mealOrders'
import DetailModal from '../../../commodity/commoditySystem/components/DetailModal'

export default {
  name: 'OrderDishes',
  components: {
    DetailModal
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '1000px',
        title: '查看点餐订单详情'
      },
      visible: false,
      formData: {
        id: ''
      },
      list: [],
      // total: 0,
      listLoading: true,
      listQuery: {
        // page: 1,
        // pageSize: 10,
        id: ''
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      this.listQuery.id = params.id
      if (params.id) {
        // this.getInfo(params.id)
        this.getList()
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await xxx({ id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          xxx: res.data.xxx || ''
        })
      } finally {
        loading.close()
      }
    },
    async getList() {
      this.listLoading = true
      try {
        const res = await getDishShopLaOrders(this.listQuery)
        this.list = res.data.list
        // this.total = res.data.total
      } finally {
        this.listLoading = false
      }
    },

    handleEmptyDishes() {
      this.$confirm('确定尝试菜品清空？', '菜品清空')
        .then(async () => {
          await toEmptyShopLaOrdersDish({ id: this.formData.id })
          this.$message({ message: '操作成功！', type: 'success' })
          this.getList()
          // this.$emit('success')
          // this.visible = false
        })
        .catch(() => { })
    },
    handleAddDishes(row) {
      this.$confirm('确定将该菜品数量+1？')
        .then(async () => {
          await dishIncShopLaOrdersDish({ id: row.dishId })
          this.$message({ message: '+1成功！', type: 'success' })
          this.getList()
        })
        .catch(() => { })
    },
    handleSubtractDishes(row) {
      this.$confirm('确定将该菜品数量-1？')
        .then(async () => {
          await dishDecShopLaOrdersDish({ id: row.dishId })
          this.$message({ message: '-1成功！', type: 'success' })
          this.getList()
        })
        .catch(() => { })
    }
  }
}
</script>

<style lang="scss" scoped>
.small-padding {
	.cell {
		padding-left: 5px;
		padding-right: 5px;
	}
}

.fixed-width {
	.el-button--mini {
		padding: 7px 10px;
	}
}
</style>