zc_saas_admin/src/views/Marketing/goods/spec/index.vue

<template>
  <div id="spec">
    <search-box-new
      ref="searchBox"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <table-list
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      :loading="loading"
    >
      <el-button
        size="medium"
        type="primary"
        slot="customize"
        @click="handleClick"
        >添加商品规格模板</el-button
      >
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="handleEdit(props.scope.row)"
          >修改</el-button
        >
        <el-button type="text" @click="handleDel(props.scope.row)"
          >删除</el-button
        >
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize="formData.pageSize"
      :currentPage="formData.pageNum"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
import searchBoxNew from "@/components/searchBoxNew";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
import { getSpecList, delSpec } from "@/api/resource/good";
export default {
  name:"Spec",
  data() {
    return {
      loading: false,
      //搜索
      formList: [
        {
          prop: "educationTypeId",
          placeholder: "教育类型",
          scope: "educationType",
        },
        {
          prop: "businessId",
          placeholder: "业务层次",
          scope: "businessLevel",
          edu: "educationTypeId",
        },
        {
          prop: "name",
          placeholder: "关联商品模板名称",
        },
      ],
      formData: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 10,
      navText: {
        title: "商品规格列表",
        index: 0,
        ch: "条",
        num: false,
        changeWidth: "150px",
        border: true,
        choice: false,
        addHide: true,
        custom: false,
        backFatherBtn: {
          status: false,
          title: "未定义",
        },
      },
      // 表单
      tableSet: [
        {
          label: "教育类型",
          prop: "educationName",
          hidden: true,
        },
        {
          label: "业务层次",
          prop: "businessName",
          hidden: true,
        },
        {
          label: "商品规格模板名称",
          prop: "name",
          hidden: true,
        },
        {
          label: "商品规格数量",
          prop: "specNumber",
          hidden: true,
        },
      ],
      tableData: [],
    };
  },
  mounted() {
    this.search();
  },
  activated() {
    this.search();
  },
  methods: {
    search(i) {
      this.loading = true;
      getSpecList(this.formData)
        .then(({ rows, total }) => {
          this.tableData = rows;
          this.total = total;
          this.navText.index = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    init() {
      this.formData = {
        pageSize: 10,
        pageNum: 1,
      };
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleEdit({ specTemplateId }) {
      this.$router.push({
        path: "specEdit",
        query: {
          id: specTemplateId,
        },
      });
    },
    handleClick(e) {
      this.$router.push({
        path: "specAdd",
      });
    },
    handleDel({ specTemplateId }) {
      this.$confirm("此操作将永久删除该规格模板, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delSpec(specTemplateId).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.search();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  components: { searchBoxNew, tableList, pagination },
};
</script>

<style>
</style>