saas_member/src/views/storeMag/index.vue

<template>
  <container title="店铺管理">
    <template v-slot:btn>
      <el-button type="primary" @click="handelEdit('')"
        >添加店铺</el-button
      >
      <el-button @click="batchDel">批量删除</el-button>
    </template>
    <search-box-new
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <table-list
      ref="tableList"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      rowKey="id"
      :loading="loading"
    >
      <template slot="status" slot-scope="props">
        <el-switch
          v-model="props.scope.row.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
          @change="statusChange($event, props.scope.row)"
        >
        </el-switch>
      </template>
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="handelEdit(props.scope.row.storeId)"
          >编辑</el-button
        >
        <el-button type="text" @click="handelDel(props.scope.row.storeId)"
          >删除</el-button
        >
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize.sync="formData.pageSize"
      :currentPage.sync="formData.pageNum"
      @search="search"
    />
    <Store-set-dlg
      :storeId="storeId"
      :dialogVisible.sync="dialogVisible"
    ></Store-set-dlg>
  </container>
</template>

<script>
import StoreSetDlg from "./components/StoreSetDlg.vue";
import { getStoreList } from "../../api/store/index";
export default {
  name: "SaasMemberRecord",

  data() {
    return {
      loading: false,
      navText: {
        index: 0,
        num: true,
        choice: true,
        addHide: true,
        openCheckMore: true,
        custom: false,
      },
      formData: {},
      tableSet: [
        {
          label: "店铺简称",
          prop: "storeName",
        },
        {
          label: "店铺地址",
          prop: "address",
        },
        {
          label: "启动状态",
          prop: "status",
          scope: "solt",
          soltName: "status",
        },
        {
          label: "创建时间",
          prop: "createTime",
          scope: "aTimeList",
        },
      ],
      tableData: [],
      total: 0,
      formList: [
        {
          prop: "storeName",
          placeholder: "请输入店铺简称",
        },
      ],
      dialogVisible: false,
      storeId: "",
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.search(2);
    },
    search(v) {
      if (v === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
          storeName: undefined,
        };
      }
      this.loading = true;
      getStoreList(this.formData)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    del(id) {
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {});
    },
    handelEdit(storeId) {
      this.storeId = storeId;
      this.dialogVisible = true;
    },
    batchDel() {
      let len = this.$refs.tableList.allCheckData.length;
      if (!len) {
        return this.$message.warning("请先勾选店员");
      }
      this.$confirm(`此操作将永久删除所勾选的${len}条店员, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const ids = this.$refs.tableList.allCheckData.map(
            (item) => item.moduleExamId
          );
          moduleVolumeBatchDel({
            status: -1,
            ids,
          }).then((res) => {
            this.$message.success("批量删除成功");
            this.$refs.tableList.clearMoreActive();
            this.search(1);
          });
        })
        .catch(() => {});
    },
    statusChange(e, row) {
      //   this.$api
      //     .editmallstore({ storeId: row.storeId, status: e })
      //     .then((res) => {
      //       this.$message.success("操作成功");
      //       row.status = e;
      //     })
      //     .catch(() => {
      //       return (row.status = e ? 0 : 1);
      //     });
    },
  },
  components: { StoreSetDlg },
};
</script>

<style lang="scss" scoped></style>