cashier-web/src/views/shop/branchStore/index.vue

<template>
  <div class="app-container">
    <div class="head-container">
      <el-card shadow="never">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-input v-model="state.query.name" clearable placeholder="请输入分店名称" style="width: 100%" class="filter-item"
              @keyup.enter="getTableData" />
          </el-col>
          

          <el-col :span="16">
            <el-button type="primary" @click="getTableData">查询</el-button>
            <el-button @click="resetHandle">重置</el-button>

            <span style="margin-left: 30px;">设置同步方式：</span>
            <el-select v-model="state.par.dataSyncMethod" @change="setDataSync" placeholder="请设置同步方式"
              style="width: 200px">
              <el-option v-for="item in state.status" :key="item.type" :label="item.label" :value="item.type" />
            </el-select>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="head-container">
      <el-card shadow="never">
        <el-table v-loading="state.tableData.loading" :data="state.tableData.list">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column label="店铺信息">
            <template v-slot="scope">
              <div>{{ scope.row.shopName }}{{ scope.row.shopType == 'chain' ? '（连锁店）' : scope.row.shopType == 'join' ? '（加盟店）' : '' }}</div>
              <div>账号：{{ scope.row.account }}</div>
              <div>联系电话：{{ scope.row.phone }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="isEnableProdSync" label="商品同步" width="120">
            <template v-slot="scope">
              <el-tag :type="scope.row.isEnableProdSync == 1 ? 'success' : 'error'" effect="dark"> {{ scope.row.isEnableProdSync == 1 ? '启用' : '禁用' }} </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isEnableVipSync" label="会员同步" width="120">
            <template v-slot="scope">
              <el-tag :type="scope.row.isEnableVipSync == 1 ? 'success' : 'error'" effect="dark"> {{ scope.row.isEnableVipSync == 1 ? '启用' : '禁用' }} </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isEnableConsSync" label="耗材同步" width="120">
            <template v-slot="scope">
              <el-tag :type="scope.row.isEnableConsSync == 1 ? 'success' : 'error'" effect="dark"> {{ scope.row.isEnableConsSync == 1 ? '启用' : '禁用' }} </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="isAllowAccountLogin" label="账号状态" width="120">
            <template v-slot="scope">
              <el-tag :type="scope.row.isAllowAccountLogin == 1 ? 'success' : 'error'" effect="dark"> {{ scope.row.isAllowAccountLogin == 1 ? '启用' : '禁用' }} </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="备注" />
          <el-table-column label="操作" width="200">
            <template v-slot="scope">
              <el-button v-if="!scope.row.isEnableProdSync || !scope.row.isEnableVipSync || !scope.row.isEnableConsSync"
                type="primary" size="small" link icon="edit" @click="handleSync(scope.row)">
                同步启用
              </el-button>
              <el-button type="primary" size="small" link icon="edit" @click="handleAccount(scope.row)">
                {{ scope.row.isAllowAccountLogin ? '账号禁用' : '账号启用' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

    </div>
    <div class="head-container">
      <el-pagination v-model:current-page="state.tableData.page" v-model:page-size="state.tableData.size"
        :total="state.tableData.total" :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes , prev, pager ,next, jumper " @current-change="paginationChange" />
    </div>
  </div>
</template>

<script setup>
import dayjs from "dayjs";
import ShopBranchApi from "@/api/account/shopBranch";
import { ElNotification, ElMessageBox } from "element-plus";

const state = reactive({
  query: {
    name: "",
  },
  par: {
    dataSyncMethod: '',
  },
  status: [
    { type: 'auto', label: "实时自动同步", },
    { type: 'manual', label: "手动同步", }
  ],
  tableData: {
    list: [],
    page: 1,
    size: 10,
    loading: false,
    total: 0,
  },
});
onMounted(() => {
  getTableData();
  getDataSync()
});
async function getDataSync () {
  let res = await ShopBranchApi.getDataSync()
  state.par.dataSyncMethod = res
}

// 获取分店列表
async function getTableData() {
  state.tableData.loading = true;
  try {
    const res = await ShopBranchApi.getList({
      page: state.tableData.page,
      size: state.tableData.size,
      branchShopName: state.query.name,
    });
    state.tableData.loading = false;
    state.tableData.list = res.records;
    state.tableData.total = res.totalRow * 1;
  } catch (error) {
    console.log(error);
  }
}
// 设置数据同步
async function setDataSync() {
  await ShopBranchApi.setDataSync(state.par.dataSyncMethod);
  ElMessage({
    type: "success",
    message: "设置成功",
  });
}

// 开启同步
function handleSync(e) {
  console.log(e)
  ElMessageBox.confirm(`同步功能开启后不能关闭，请确认是否给${e.shopName}开启同步?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await ShopBranchApi.dataSync(e.id)
    ElMessage({
      type: "success",
      message: "同步成功",
    });
    getTableData();
  }).catch(() => { });
}

// 账号启用/禁用
async function handleAccount(row) {
  if (row.isAllowAccountLogin) {
    await ShopBranchApi.disable(row.id);

  } else {
    await ShopBranchApi.enable(row.id);
  }
  getTableData();
}
// 重置查询
function resetHandle() {
  state.query.name = "";
  getTableData();
}
// 分页回调
function paginationChange(e) {
  state.tableData.page = e;
  getTableData();
}

</script>

<style scoped lang="scss">
.head-container {
  margin-bottom: 20px;
}

.shop_info {
  display: flex;

  .info {
    flex: 1;
    padding-left: 4px;
  }
}

.el-link {
  min-height: 23px;
  margin: 0 5px;
}
</style>