Initial commit

src/views/oa/order/components/search.vue

@@ -0,0 +1,101 @@
+<template>
+  <div style="display: flex; justify-content: space-between">
+    <a-space style="flex-wrap: wrap">
+      <a-button type="primary" class="ele-btn-icon" @click="add">
+        <template #icon>
+          <PlusOutlined />
+        </template>
+        <span>新增</span>
+      </a-button>
+      <a-radio-group v-model:value="where.status" @change="search">
+        <a-radio-button>订单类型</a-radio-button>
+        <a-radio-button value="0">待处理</a-radio-button>
+        <a-radio-button value="1">已完成</a-radio-button>
+      </a-radio-group>
+      订单状态：
+      <a-radio-group v-model:value="where.status" @change="search">
+        <a-radio-button value="0">待支付</a-radio-button>
+        <a-radio-button value="1">待发货</a-radio-button>
+        <a-radio-button value="2">待收货</a-radio-button>
+        <a-radio-button value="3">已完成</a-radio-button>
+      </a-radio-group>
+      <a-button
+        danger
+        v-if="selection?.length"
+        class="ele-btn-icon"
+        @click="removeBatch"
+      >
+        <template #icon>
+          <DeleteOutlined />
+        </template>
+        <span>批量删除</span>
+      </a-button>
+    </a-space>
+    <a-space :size="10" style="flex-wrap: wrap; margin-right: 20px">
+      <DictSelect
+        dict-code="productType"
+        v-model:value="where.categoryId"
+        :placeholder="`选择分类`"
+        style="width: 200px"
+        @change="search"
+      />
+      <a-input-search
+        allow-clear
+        placeholder="产品名称"
+        v-model:value="where.keywords"
+        @pressEnter="search"
+        @search="search"
+      />
+      <a-button @click="reset">重置</a-button>
+    </a-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ProductParam } from '@/api/oa/product/model';
+  import useSearch from '@/utils/use-search';
+  import {DeleteOutlined, PlusOutlined} from '@ant-design/icons-vue';
+  import DictSelect from '@/components/DictSelect/index.vue';
+
+  const props = defineProps<{
+    // 勾选的项目
+    selection?: [];
+    status?: number;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'search', where: ProductParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+  }>();
+
+  // 表单数据
+  const { where, resetFields } = useSearch<ProductParam>({
+    keywords: '',
+    status: undefined
+  });
+
+  const removeBatch = () => {
+    emit('remove');
+  };
+
+  // 发布应用
+  const add = () => {
+    emit('add');
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
+  };
+
+  if (props.status == undefined) {
+    where.status = '1';
+  }
+</script>