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="editStore(props.scope.row.storeId, $event)"
        >
        </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="del(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"
      @search="search"
      :dialogVisible.sync="dialogVisible"
    ></Store-set-dlg>
  </container>
</template>

<script>
import StoreSetDlg from "./components/StoreSetDlg.vue";
import { getStoreList, editStore, storeBatchDel } 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 = {
          status: "0,1",
          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(storeId) {
      this.$confirm("确定删除该店铺吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.editStore(storeId, -1);
        })
        .catch(() => {});
    },
    editStore(storeId, status) {
      editStore({ storeId, status, merId: "1" }).then((res) => {
        status == -1 && this.$message.success("删除成功");
        this.$store.commit("EDICSTORELIST");
        this.search();
      });
    },
    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.storeId
          );
          storeBatchDel({
            status: -1,
            storeIds: ids,
          }).then((res) => {
            this.$message.success("批量删除成功");
            this.$refs.tableList.clearMoreActive();
            this.$store.commit("EDICSTORELIST");
            this.search();
          });
        })
        .catch(() => {});
    },
  },
  components: { StoreSetDlg },
};
</script>

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