feat 添加自定义下拉列表

admin-fe/src/components/icon/ArrowDown.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg :style="sizeStyle" class="icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+    <path fill="currentColor"
+          d="M500.8 604.779L267.307 371.392l-45.227 45.27 278.741 278.613L779.307 416.66l-45.248-45.248z"></path>
+  </svg>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import iconComponent from "./iconComponent";
+
+export default defineComponent({
+  name: "ArrowDown",
+  props: iconComponent.props,
+  setup: iconComponent.setup
+})
+</script>

admin-fe/src/components/input/input.vue

@@ -57,6 +57,8 @@ const value = computed({
 </script>
 
 <style lang="less">
+@height: 30px;
+
 .p-input-box-focus {
 
   border-color: #2a7dc9;
@@ -81,6 +83,7 @@ const value = computed({
   border: 1px solid #d9d9d9;
   border-radius: 2px;
   transition: all .3s;
+  height: @height;
 
   &::-moz-placeholder {
     opacity: 1
@@ -142,6 +145,7 @@ const value = computed({
   border: 1px solid #d9d9d9;
   border-radius: var(--border-radius);
   transition: all .3s;
+  height: @height;
 
   &:hover {
     border-color: #2a7dc9;

admin-fe/src/components/select/Option.vue

@@ -0,0 +1,15 @@
+<template>
+  <li><slot></slot></li>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+
+export default defineComponent({
+  name: "POption"
+})
+</script>
+
+<style scoped>
+
+</style>

admin-fe/src/components/select/Select.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="select-wrapper">
+    <div class="select-box-wrapper">
+      <span class="select-value">{{ selectValue }}</span>
+      <span class="icon-arrow">
+        <ArrowDown class="icon-select-arrow"/>
+      </span>
+    </div>
+    <ul>
+      <slot></slot>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import ArrowDown from "../icon/ArrowDown.vue";
+import {ref} from "vue";
+export interface OptionItemType {
+  label: string;
+  value?: any;
+}
+
+// declare var OptionItemArray: OptionItemType[];
+
+export default {
+  name: "PSelect",
+  components: {ArrowDown},
+  props: {},
+  setup(props) {
+    const selectValue = ref(props.modelValue)
+    return {
+      selectValue
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

admin-fe/src/views/goods/index.vue

@@ -3,18 +3,23 @@
   <div class="table-wrapper">
     <div class="table-toolbar">
       <div class="search-form">
-        <span>标题：<PInput v-model="param.title" placeholder="要查询的商品标题"/></span>
+        <span>标题：<PInput style="width:200px" v-model="param.title" placeholder="要查询的商品标题"/></span>
         <span>
           分类：
           <select v-model="param.category">
             <option v-for="(text,value) in CategoryEnum" :key="value" :value="value">{{ text }}</option>
           </select>
+          <PSelect>
+            <POption v-for="op in options" :key="op.value">{{op.label}}</POption>
+          </PSelect>
         </span>
+        <span>
           <PButton type="default" @click="onReset">重置</PButton>
-        <PButton :disabled="true" :loading="searching" @click="onSearch">搜索</PButton>
+        </span>
+        <span><PButton :disabled="true" :loading="searching" @click="onSearch">搜索</PButton></span>
       </div>
       <div class="toolbar-extra">
-        <button @click="onEditData({id:0})">新增</button>
+        <PButton @click="onEditData({id:0})">新增</PButton>
       </div>
     </div>
     <table>
@@ -49,7 +54,7 @@
         <td>
           <span @click="onEditData(it)">编辑</span>
           <span>禁用</span>
-          <span @click="removeUser(it.id)">删除</span>
+          <span @click="removeData(it.id)">删除</span>
         </td>
       </tr>
     </table>
@@ -134,7 +139,7 @@
           <PInput placeholder="请输入下架时间" v-model="editData.offlineTime"/>
         </p>
       </div>
-      <button @click="saveGoodsData">提交</button>
+      <PButton @click="saveGoodsData">提交</PButton>
     </div>
   </Modal>
 
@@ -148,6 +153,8 @@ import Modal from "../../components/modal/modal.vue";
 import Pager from "../../components/pager/Pager.vue";
 import Uploader from "../../components/uploader/uploader.vue";
 import PButton from "../../components/button/Index.vue";
+import PSelect, {OptionItemType} from "../../components/select/Select.vue";
+import POption from "../../components/select/Option.vue";
 
 //
 //商品类别(1:普通 2:精选 3:秒杀 4:抽奖)
@@ -163,6 +170,18 @@ const TypeEnum = {
   2: '虚拟'
 }
 
+const options: OptionItemType[] = [
+  {
+    label: '普通', value: 1
+  },
+  {
+    label: '精选', value: 2
+  },
+  {
+    label: '秒杀', value: 3
+  }
+]
+
 const StatusEnum = {
   1: '正常',
   2: '禁用',
@@ -182,6 +201,7 @@ const editData = reactive<GoodsModel>({
 });
 const totalCount = ref(0)
 const searching = ref(false)
+const saving = ref(false)
 
 function onPageChange(currentPage: number) {
   param.page = currentPage;
@@ -235,7 +255,7 @@ function onEditData(data: GoodsModel) {
 
 async function saveGoodsData() {
   try {
-    console.log(editData)
+    saving.value = true
     if (editData.id <= 0) {
       await http.post('/admin/goods', editData)
     } else {
@@ -246,6 +266,8 @@ async function saveGoodsData() {
     loadDataList();
   } catch (e) {
     message.toast(e.message || '保存失败')
+  } finally {
+    saving.value = false
   }
 }
 
@@ -253,7 +275,7 @@ async function saveGoodsData() {
  * 删除用户
  * @param id 要删除的用户id
  */
-async function removeUser(id: number) {
+async function removeData(id: number) {
   if (!confirm('是否删除?')) {
     return;
   }
@@ -270,5 +292,8 @@ onMounted(loadDataList)
 </script>
 
 <style scoped>
-
+.search-form span {
+  display: inline-block;
+  margin-right: 10px;
+}
 </style>