live-telecast-ui-pc/src/views/mobile/stock/editRecord.vue

<template>
  <el-dialog
    v-loading="loading"
    title="库存变动记录"
    :center="true"
    align="left"
    top="18vh"
    width="750px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @close="closeModel"
  >
    <el-card style="margin-top: -25px">
      <ex-table
        :table="table"
        :data="tableData"
        :columns="columns"
        :page="pageInfo"
        :size="size"
        @page-curr-change="handlePageChange"
        @page-size-change="handleSizeChange"
        @screen-reset="
          pageInfo.curr = 1;
          searchList();
        "
        @screen-submit="
          pageInfo.curr = 1;
          searchList();
        "
      >
        <template #type="{ scope }">
          <el-tag
            :size="tablebtnSize"
            v-text="
              (statusList.find((item) => item.id == scope.row.type) || {})
                .label || '--'
            "
          ></el-tag>
        </template>
      </ex-table>
    </el-card>
  </el-dialog>
</template>
<script>
import asyncRequest from "@/apis/service/mobile/stock";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import ExTable from "@/components/ExTableNew.vue";
import mixinPage from "@/mixins/elPaginationHandle";
export default {
  name: "stock",
  props: ["showModel", "id"],
  mixins: [mixinPage,resToken],
  components: {
    ExTable,
  },
  computed: {
    //组件SIZE设置
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
  },
  data() {
    return {
      loading: false,
      title: "添加可用库存",
      showModelThis: this.showModel,
      parmValue: {
        id: "", // 账户名
        page: 1, // 页码
        size: 15, // 每页显示条数
      },
      // 状态
      statusList: [
        { id: "1", label: "运营新增" },
        { id: "2", label: "运营减少" },
        { id: "3", label: "用户订购" },
      ],
      // 表格 - 数据
      tableData: [],
      // 表格 - 参数
      table: {
        stripe: true,
        border: true,
        // _defaultHeader_: ["setcol"]
      },
      // 表格 - 分页
      pageInfo: {
        size: 15,
        curr: 1,
        total: 0,
      },
      // 表格 - 列参数
      columns: [
        {
          prop: "id",
          label: "记录ID",
          width: "80",
        },

        {
          prop: "username",
          label: "账户名",
        },
        {
          prop: "nickname",
          label: "用户名",
        },
        {
          prop: "type",
          label: "变动类型",
          _slot_: "type",
          width: "90",
        },

        {
          prop: "run_stock",
          label: "变动数量",
          width: "90",
        },
        {
          prop: "before_stock",
          label: "变动前库存",
          width: "90",
        },
        {
          prop: "after_stock",
          label: "变动后库存",
          width: "90",
        },

        {
          prop: "addtime",
          label: "库存更新时间",
          sortable: true,
          width: "140",
        },
      ],
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        console.log('cancel')
        this.$emit("cancel");
      }
    },
  },
  methods: {
    closeModel() {
      console.log("closeModel!!");
    },
    async initForm() {
      this.loading = true;
        this.tableData= [];
      await this.searchList();
      this.loading = false;
    },

    async searchList() {
      this.loading = true;
      this.parmValue.id = this.id;
      const {code,data,message} = await asyncRequest.log(this.parmValue);
      if (code === 0 ) {
        const {list,count}=data
        this.tableData = list;
        this.pageInfo.total = Number(count);
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },
  },
};
</script>

   <style lang="scss" scoped>
.stock {
  .stock-edit {
    width: 100%;
    display: flex;
    li {
      &:first-child {
        width: 100px;
        position: relative;
      }
      &:last-child {
        width: calc(100% - 100px);
      }
    }
  }
}
</style>