thridLargeScreen/src/views/myShop/Store.vue

<template>
  <div>
    <el-card shadow="never">
      <div class="flex justify-between w-full">
        <el-button type="primary" @click="handleAdd" v-if="!state.total">
          新建店铺
        </el-button>
        <div v-else></div>
        <div class="text-right flex items-center">
          <el-select placeholder="全部店铺类型" v-model="state.query.type">
            <el-option label="全部状态类型" :value="-1" />
            <el-option
              :label="item.k"
              :value="item.v"
              v-for="item in typeList"
              :key="item.v"
            />
          </el-select>
          <el-select
            class="ml-2"
            placeholder="全部店铺可用状态"
            v-model="state.query.status"
          >
            <el-option label="所有状态" :value="-1" />
            <el-option label="可用" :value="0" />
            <el-option label="禁用" :value="1" />
          </el-select>
          <el-input
            v-model="state.query.name"
            placeholder="输入店铺名称"
            clearable
            class="w-1/3 ml-2"
          ></el-input>
          <el-button class="ml-2" type="primary" @click="onSearch"
            >搜索</el-button
          >
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="mt-2">
      <el-table :data="state.list" style="width: 100%">
        <el-table-column
          label="店铺名称"
          prop="name"
          width=""
        ></el-table-column>
        <el-table-column
          label="店铺类型"
          prop="type"
          width=""
          :formatter="v => typeList[v.type]?.k"
        ></el-table-column>
        <el-table-column
          label="店铺所属"
          prop="belongTo"
          width=""
        ></el-table-column>
        <el-table-column label="可用状态" prop="status" width="">
          <template #default="{ row }">
            <el-button v-if="row.status === 0" link type="success"
              >可用</el-button
            >
            <el-button v-else link type="danger">禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="商品数量"
          prop="goodsCount"
          width=""
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createdAt"
          width=""
        ></el-table-column>

        <el-table-column label="操作">
          <template #default="{ row }">
            <!-- <el-button type="primary" link @click="handleEdit(row)">{{
              row.type == 1 ? "查看" : "编辑"
            }}</el-button> -->
            <el-button type="primary" link @click="handleEdit(row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="mt-4 justify-end"
        background
        layout="prev, pager, next"
        :total="state.total"
        @current-change="changePage"
      />
    </el-card>
    <ComponentDialogEditStore
      v-model:show="state.visibleStore"
      :id="state.rowData?.id"
      @success="onSearch"
    ></ComponentDialogEditStore>
    <ComponentDialogSettingStoreStatus
      v-model:show="state.visibleSetting"
      :id="state.rowData?.id"
      @success="getList"
    ></ComponentDialogSettingStoreStatus>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import ComponentDialogEditStore from "./components/DialogEditStore.vue";
import ComponentDialogSettingStoreStatus from "./components/DialogSettingStoreStatus.vue";
import { useUserStoreHook } from "@/store/modules/user";
const channelId = useUserStoreHook()?.profile.id;
const state = reactive({
  visibleStore: false,
  visibleSetting: false,
  rowData: {},
  query: {
    page: 1,
    pageSize: 10, //
    type: -1, //  -1:所有；0:自营；1:第三方
    status: -1, // -1:所有状态；0:可用；1:不可用
    name: undefined
  },
  list: [],
  total: 0
});
const staffInfo = ref({});
const typeList = [
  {
    k: "自营",
    v: 0
  },
  {
    k: "第三方",
    v: 1
  }
];
const changePage = page => {
  state.query.page = page;
  getList();
};
const getList = () => {
  request
    .get("/articleService/serviceProvider/staff/shop/paginate", {
      params: state.query
    })
    .then(resp => {
      state.list = resp.data.list;
      state.total = resp.data.total;
    });
};
const handleAdd = () => {
  state.rowData = {};
  state.visibleStore = true;
};
const handleEdit = rowData => {
  state.rowData = rowData;
  state.visibleStore = true;
};
const handleDelete = id => {
  request
    .post("/articleService/serviceProvider/shop/delete", {
      id
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getList();
    });
};
const getStaff = () => {
  request
    .get("/articleService/serviceProvider/staff", {
      params: {
        mechanismId: channelId
      }
    })
    .then(resp => {
      staffInfo.value = resp.data;
    });
};
const onSearch = () => {
  state.query.page = 1;
  getList();
};
const init = () => {
  getList();
  getStaff();
};
init();
</script>