feat 新增、编辑门店

src/api/index.ts

@@ -48,6 +48,16 @@ export const shopList = (params: any) => {
   return get('app/shop/list', params)
 }
 
+// 获取类型列表
+export const getProductList = () => {
+  return get('app/product/list')
+}
+
+// 获取店铺详情
+export const getShopDetail = (params: any) => {
+  return get('app/shop/detail', params)
+}
+
 // 删除店铺
 export const deleteShop = (params: any) => {
   return post('app/shop/delete', params)

src/views/management/shop/shop.vue

@@ -1,16 +1,55 @@
 <script setup lang='ts'>
 import { onMounted, reactive, ref } from 'vue'
-import { shopList, deleteShop, getShopList } from '@/api'
+import { shopList, deleteShop, getShopDetail, getProductList } from '@/api'
 import { message } from 'ant-design-vue';
-let shopListSearch = reactive({ arr: [{ id: 0, name: '' }] })
+let visible = ref<Boolean>(false)
+let title = ref<String>('新增门店')
+let deliveries = reactive({
+  arr: [{
+    bindStatus: 0,
+    logo: '',
+    name: '',
+    authMsg: '',
+  }]
+})
+let revieweds = reactive({
+  arr: [{
+    bindStatus: 0,
+    logo: '',
+    name: '',
+    authMsg: '',
+  }]
+})
+let productList = reactive({ arr: [{ id: 0, name: '' }] })
 interface FormState {
   cityName: string;
-  shopId?: Number;
-  mobile?: number;
+  shopName: String;
+  mobile?: String;
 }
 const formState = reactive<FormState>({
   cityName: '',
+  shopName: ''
 });
+interface formType {
+  id?: Number;
+  name: String;
+  categoryId?: Number;
+  username: String;
+  contactName: String;
+  mobile: String;
+  address: String;
+  poiAddress: String;
+  street: String;
+}
+let form = reactive<formType>({
+  name: '',
+  username: '',
+  contactName: '',
+  mobile: '',
+  address: '',
+  poiAddress: '',
+  street: '',
+})
 const columns = reactive([
   {
     title: '门店编号',
@@ -68,17 +107,16 @@ const handleShopList = () => {
   })
 }
 handleShopList()
-const handleGetShopList = () => {
-  getShopList().then((res: any) => {
-    console.log('res', res);
-    if (res.code) {
-      shopListSearch.arr = res.data
+const handleGetProductList = () => {
+  getProductList().then((res: any) => {
+    if (res.code === 200) {
+      productList.arr = res.data
     } else {
       message.error(res.msg)
     }
   })
 }
-handleGetShopList()
+handleGetProductList()
 const onDelete = (shopId: number) => {
   deleteShop({ shopId }).then((res: any) => {
     if (res.code === 200) {
@@ -89,6 +127,66 @@ const onDelete = (shopId: number) => {
     }
   })
 }
+const addShop = () => {
+  title.value = '新增门店'
+  visible.value = true
+  let obj = {
+    id: '',
+    name: '',
+    username: '',
+    contactName: '',
+    mobile: '',
+    address: '',
+    poiAddress: '',
+    street: '',
+  }
+  Object.assign(form, obj)
+}
+const editShop = (id: Number) => {
+  title.value = '编辑门店'
+  getShopDetail({ shopId: id }).then((res: any) => {
+    if (res.code === 200) {
+      Object.assign(form, res.data)
+      deliveries.arr = res.data.deliveries.filter((v: { bindStatus: number; type: number; }) => {
+        return v.bindStatus === 1 && v.type !== 3;
+      });
+      revieweds.arr = res.data.deliveries.filter((v: { type: number; }) => {
+        return v.type === 3;
+      });
+      visible.value = true
+    } else {
+      message.error(res.msg)
+    }
+  })
+}
+const showStatus = (bindStatus: Number, authMsg: String) => {
+  let name = "";
+  switch (bindStatus) {
+    case 0:
+      if (authMsg) {
+        name = "审核失败";
+      } else {
+        name = "未绑定";
+      }
+      break;
+    case 1:
+      name = "已通过";
+      break;
+    case 2:
+      name = "审核中";
+      break;
+    case 3:
+      name = "审核失败";
+      break;
+
+    default:
+      break;
+  }
+  return name;
+}
+const confirm = () => {
+
+}
 onMounted(() => {
 
 })
@@ -97,22 +195,21 @@ onMounted(() => {
   <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 v-model:value="formState.cityName" placeholder="请输入要查询的城市" allowClear>
       </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 label="店铺名称" name="shopName">
+      <a-input v-model:value="formState.shopName" placeholder="请输入要查询的店铺名称" allowClear>
+      </a-input>
     </a-form-item>
     <a-form-item label="联系人电话" name="mobile">
-      <a-input v-model:value="formState.mobile" placeholder="请输入要查询的联系人电话">
+      <a-input v-model:value="formState.mobile" placeholder="请输入要查询的联系人电话" allowClear>
       </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-button class="ml-20px" type="primary" ghost @click="addShop">+新增门店</a-button>
     </a-form-item>
   </a-form>
   <a-table :columns="columns" :data-source="data.arr" :pagination="false" bordered :scroll="true">
@@ -123,14 +220,162 @@ onMounted(() => {
         </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" @click="editShop(record.id)">编辑</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>
-
+  <!-- 新增、编辑 -->
+  <a-modal v-model:visible="visible" :title="title" @ok="confirm" okText="确认" cancelText="取消" width="700px">
+    <a-form :model="form" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off">
+      <a-form-item label="门店名称" name="name">
+        <a-input v-model:value="form.name" placeholder="请输入门店名称" allowClear />
+      </a-form-item>
+      <a-form-item label="主营类别" name="categoryId">
+        <div class="category_box">
+          <div class="item" :class="form.categoryId === item.id ? 'active' : ''" v-for="(item, i) in productList.arr"
+            :key="i" @click="form.categoryId = item.id">
+            {{ item.name }}
+          </div>
+        </div>
+      </a-form-item>
+      <a-form-item label="联系人" name="contactName">
+        <a-input v-model:value="form.contactName" placeholder="请输入联系人" allowClear />
+      </a-form-item>
+      <a-form-item label="联系电话" name="mobile">
+        <a-input v-model:value="form.mobile" placeholder="请输入联系电话" allowClear />
+      </a-form-item>
+      <a-form-item label="详细地址" name="address">
+        <!-- <a-input v-model:value="form.address" /> -->
+        <a-input-group compact>
+          <a-input v-model:value="address" style="width: calc(100% - 200px)" />
+          <a-tooltip title="copy git url">
+            <a-button>
+              <template #icon>
+                <CopyOutlined />
+              </template>
+            </a-button>
+          </a-tooltip>
+        </a-input-group>
+      </a-form-item>
+      <a-form-item label="门牌号" name="street">
+        <a-input v-model:value="form.street" placeholder="请输入门牌号" allowClear />
+      </a-form-item>
+      <a-form-item label="已获运力" label-width="103px" v-if="form.id">
+        <div class="logo_box">
+          <div v-for="(item, i) in deliveries.arr" :key="i">
+            <img v-if="item.bindStatus === 1" :src="item.logo" alt="">
+          </div>
+        </div>
+        <div class="line"></div>
+      </a-form-item>
+      <a-form-item label="审核中运力" label-width="103px" v-if="form.id && revieweds.arr.length">
+        <div class="reviewed-item">
+          <div class="item" v-for="(item, i) in revieweds.arr" :key="i">
+            <div class="left-wrap">
+              <div class="left">
+                <img class="logo" :src="item.logo">
+                <span class="label">{{ item.name }}</span>
+              </div>
+              <div class="tip">{{ showStatus(item.bindStatus, item.authMsg) }}</div>
+            </div>
+            <div v-show="item.authMsg && item.bindStatus !== 1 && item.bindStatus !== 2" class="reason">
+              原因：{{ item.authMsg }}</div>
+          </div>
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
 </template>
 <style lang='scss' scoped>
+.category_box {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-top: -10px;
+
+  .item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100px;
+    height: 40px;
+    margin: 10px 10px 0 0;
+    background: #f4f4f4;
+    border-radius: 2px;
+    cursor: pointer;
+
+    &.active {
+      background: #edf6ff;
+      border-radius: 4px;
+      border: 1px solid;
+      color: #1B8DFF;
+    }
+  }
+}
+
+.logo_box {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  line-height: 0;
+
+  img {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+}
+
+.reviewed-item {
+  .item {
+    .reason {
+      font-size: 12px;
+      color: crimson;
+    }
+
+    .left-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+
+      .left {
+        display: flex;
+        align-items: center;
+        line-height: 0;
+
+        .logo {
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+
+        .label {
+          font-size: 14px;
+          color: #000000;
+        }
+      }
+    }
+
+    .tip {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 22px;
+      border-radius: 22px;
+      background: #f74141;
+      font-size: 12px;
+      color: #ffffff;
+    }
+  }
+}
 </style>