dy-admin-manager/src/views/liveClassManager/liveShopControl.vue

<template>
  <div class="m-container">
    <h2>
      <el-page-header
        @back="onCancel"
        :content="detail.roomTitle || ''"
      ></el-page-header>
    </h2>
    <div class="m-core">
      <el-alert title="直播课信息" :closable="false" type="info"> </el-alert>
      <descriptions :column="4">
        <descriptions-item label="直播课标题：">{{
          detail.roomTitle || ""
        }}</descriptions-item>
        <descriptions-item label="主讲人：">{{
          detail.speakerName || ""
        }}</descriptions-item>
        <descriptions-item label="直播开始时间：">{{
          detail.liveStartTime | dateForMinFormat
        }}</descriptions-item>
        <descriptions-item label="状态：">{{
          detail.liveState | liveState
        }}</descriptions-item>
      </descriptions>
      <el-alert
        title="直播商品"
        :closable="false"
        type="info"
        style="margin: 20px 0"
      >
      </el-alert>
      <save-form
        :inline="true"
        :model="searchForm"
        @submit="search"
        @reset="onReSet"
        ref="searchForm"
      >
        <el-form-item>
          <el-input
            v-model.trim="searchForm.search"
            clearable
            @keyup.enter.native="
              e => {
                e.target.blur();
                $refs.searchForm.save();
                search();
              }
            "
            placeholder="商品编号/名称"
          ></el-input>
        </el-form-item>
        <el-form-item prop="status">
          <el-select
            v-model.trim="searchForm.status"
            clearable
            filterable
            placeholder="状态"
          >
            <el-option label="上架" :value="1"></el-option>
            <el-option label="下架" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="primary">搜索</el-button>
          <el-button native-type="reset" type="danger">重置</el-button>
        </el-form-item>
      </save-form>
      <auth auths="liveGoodsMapper/add">
        <el-button
          @click="addShop"
          type="primary"
          style="margin-bottom: 20px"
          :disabled="detail.liveState == 2"
          >添加</el-button
        >
      </auth>
      <div class="tableWrap">
        <el-table
          style="width: 100%"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          :data="tableList"
        >
          <el-table-column
            align="center"
            prop="id"
            label="商品编号"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="商品名称"
          ></el-table-column>
          <el-table-column align="center" prop="originalPrice" label="原价">
            <template slot-scope="scope">
              <div>
                {{ scope.row.originalPrice | moneyFormat(true) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="currentPrice" label="直播价">
            <template slot-scope="scope">
              <div>
                {{ scope.row.currentPrice | moneyFormat(true) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="stockCount"
            label="库存"
          ></el-table-column>
          <el-table-column align="center" prop="status" label="状态">
            <template slot-scope="scope">
              <div>
                {{ scope.row.status ? "上架" : "下架" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="studentId" label="操作">
            <template slot-scope="scope">
              <div>
                <auth auths="liveGoodsMapper/updateStatus">
                  <el-button type="text" @click="resetShop(scope.row)">
                    {{ !scope.row.status ? "上架" : "下架" }}</el-button
                  >
                </auth>
                <!-- <auth auths="liveGoods/delete">
                  <el-button type="text" @click="deteleShop(scope.row)"
                    >删除</el-button
                  >
                </auth> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          sync
          :total.sync="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <addLiveShop ref="addLiveShop" @getList="getList" />
  </div>
</template>
<script>
import { getToken, getTenantId } from "@/utils/auth";
import {
  getRoomInfo,
  getLiveGoodsMapper,
  updateLiveGoodsMapperStatus
} from "./api";
import pagination from "@/components/Pagination/index";
import addLiveShop from "./modals/addLiveShop";
export default {
  components: { pagination, addLiveShop },
  data() {
    return {
      detail: {
        roomTitle: "",
        speakerName: "",
        liveStartTime: "",
        liveState: ""
      },
      searchForm: {
        search: "",
        status: ""
      },

      tableList: [],
      organList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    };
  },
  mounted() {
    this.getDetail();
    this.getList();
  },
  methods: {
    async getList() {
      let params = {
        ...this.searchForm,
        page: this.rules.page,
        rows: this.rules.limit,
        liveId: this.$route.query.roomUid
      };
      try {
        const res = await getLiveGoodsMapper({ ...params });
        this.tableList = res.data.rows;
        this.rules.total = res.data.total;
      } catch (e) {
        console.log(e);
      }
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm.search = "";
      this.searchForm.status = "";
      this.search();
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push("/liveClassManager");
    },
    async getDetail() {
      try {
        let obj = {
          roomUid: this.$route.query.roomUid
        };

        const res = await getRoomInfo(obj);
        this.detail = { ...res.data };
      } catch (e) {
        console.log(e);
      }
    },
    addShop() {
      this.$refs.addLiveShop.openDioag({ roomUid: this.$route.query.roomUid });
    },
    resetShop(row) {
      let str = "";
      if (row.status) {
        str = "下架";
      } else {
        str = "上架";
      }
      this.$confirm(`您是否${str}商品"${row.name}"`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await updateLiveGoodsMapperStatus({
            liveGoodsId: row.id,
            liveId: this.$route.query.roomUid,
            status: row.status ? 0 : 1
          }).then(res => {
            this.$message.success(`${str}成功`);
            this.getList();
          });
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .description-tr {
  border-bottom: none !important;
}
</style>