liebao-website/src/views/management/shop/shop.vue

<script setup lang='ts'>
import { onMounted, reactive, ref } from 'vue'
import { shopList, deleteShop, getShopList } from '@/api'
import { message } from 'ant-design-vue';
let shopListSearch = reactive({ arr: [{ id: 0, name: '' }] })
interface FormState {
  cityName: string;
  shopId?: Number;
  mobile?: number;
}
const formState = reactive<FormState>({
  cityName: '',
});
const columns = reactive([
  {
    title: '门店编号',
    dataIndex: 'code',
    align: 'center',
  },
  {
    title: '店铺名称',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '联系人',
    dataIndex: 'contactName',
    align: 'center',
  },
  {
    title: '联系电话',
    dataIndex: 'mobile',
    align: 'center',
  },
  {
    title: '城市',
    dataIndex: 'cityName',
    align: 'center',
  },
  {
    title: '地址',
    dataIndex: 'address',
    align: 'center',
  },
  {
    title: '已获运力',
    dataIndex: 'deliveries',
    width: '25%',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    width: '10%',
    align: 'center',
  }
])
const data = reactive({ arr: [] })
const handleShopList = () => {
  shopList(formState).then((res: any) => {
    console.log('res', res);
    if (res.code) {
      data.arr = res.data
    } else {
      message.error(res.msg)
    }
  })
}
handleShopList()
const handleGetShopList = () => {
  getShopList().then((res: any) => {
    console.log('res', res);
    if (res.code) {
      shopListSearch.arr = res.data
    } else {
      message.error(res.msg)
    }
  })
}
handleGetShopList()
const onDelete = (shopId: number) => {
  deleteShop({ shopId }).then((res: any) => {
    if (res.code === 200) {
      message.success('已经成功删除！')
      handleShopList()
    } else {
      message.error(res.msg)
    }
  })
}
onMounted(() => {

})
</script>
<template>
  <div class="text-20px text-[#222222] font-bold mb-30px">店铺管理</div>
  <a-form :model="formState" name="horizontal_login" layout="inline" autocomplete="off" class="mb-20px">
    <a-form-item label="城市" name="cityName">
      <a-input v-model:value="formState.cityName" placeholder="请输入要查询的城市">
      </a-input>
    </a-form-item>
    <a-form-item label="店铺名称" name="name">
      <a-select v-model:value="formState.shopId" style="width: 200px" placeholder="请选择要查询的店铺名称" allowClear>
        <a-select-option v-for="(v, i) in shopListSearch.arr" :key="i" :value="v.id">{{ v.name }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="联系人电话" name="mobile">
      <a-input v-model:value="formState.mobile" placeholder="请输入要查询的联系人电话">
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button class="ml-20px" type="primary" @click="handleShopList">查 询</a-button>
      <!-- <a-button class="ml-20px" type="primary" ghost html-type="submit">导 出</a-button> -->
      <a-button class="ml-20px" type="primary" ghost html-type="submit">+新建门店</a-button>
    </a-form-item>
  </a-form>
  <a-table :columns="columns" :data-source="data.arr" :pagination="false" bordered :scroll="true">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'deliveries'">
        <div class="flex flex-wrap justify-center">
          <img :src="v.logo" alt="" v-for="(v, i) in text" :key="i" class="w-20px h-20px mr-10px">
        </div>
      </template>
      <template v-if="column.dataIndex === 'operation'">
        <a class="text-blue-500">编辑</a>
        <a-popconfirm v-if="data.arr.length" title="确定删除该店铺?" ok-text="确定" cancel-text="取消" @confirm="onDelete(record.id)">
          <a class="text-blue-500 ml-20px">删除</a>
        </a-popconfirm>
      </template>
    </template>
  </a-table>

</template>
<style lang='scss' scoped>
</style>