commit

src/views/information/warehouse-info/compoments/filterTable/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <!-- 过滤仓库信息表格 -->
+  <div class="filter-custom-table">
+    <a-select label-in-value
+              class="conditionSelect"
+              style="width: 120px"
+              v-model:value="userinfotype"
+              placeholder="全部仓库类型"
+              @change="handleChange">
+      <a-select-option value="1">仓库类型一</a-select-option>
+      <a-select-option value="2">仓库类型二</a-select-option>
+    </a-select>
+    <a-input v-model:value="nickname"
+             class="tableConditionInput"
+             placeholder="模糊搜索仓库名称" />
+    <a-input v-model:value="name"
+             class="tableConditionInput"
+             placeholder="模糊搜索仓库地址" />
+    <a-button class="selectBtn"
+              @click="search">查询</a-button>
+    <a-button class="selectBtn"
+              @click="reset">重置</a-button>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, SetupContext } from 'vue';
+
+// 搜索
+function handleSearch(context: SetupContext) {
+    const nickname = ref<string>('');
+    const name = ref<string>('');
+    interface Value {
+        key: string;
+        value: string;
+    }
+    let useType = '';
+    const userinfotype = ref<number>(0);
+    function handleChange(value: Value) {
+        useType = value.value;
+        search();
+    }
+    function search() {
+        const result = { nickname: [nickname.value], name: [name.value], userinfotype: [useType] };
+        context.emit('search', result);
+    }
+    function reset() {
+        nickname.value = '';
+        name.value = '';
+        userinfotype.value = 0;
+        useType = '';
+        search();
+    }
+
+    return { nickname, name, search, reset, userinfotype, handleChange };
+}
+
+export default defineComponent({
+    name: 'filter-custom-table',
+    components: {},
+    setup(props, context) {
+        return {
+            ...handleSearch(context),
+        };
+    },
+});
+</script>
+
+<style lang="less">
+.filter-custom-table {
+    width: 100%;
+    display: inline-flex;
+    padding-top: 9px;
+    padding-bottom: 6px;
+}
+.ant-select-single:not(.ant-select-customize-input) {
+    margin-right: 10px;
+    // background: #252D34;
+    // .rounded-corners(3px);
+    .ant-select-selector {
+        height: 30px;
+        padding: 0 8px;
+        background: @m-grey9;
+        border: none;
+        .rounded-corners(3px);
+        color: @m-grey10;
+        .ant-select-arrow {
+            right: 8px;
+            color: @m-grey1;
+        }
+    }
+    .ant-select-arrow {
+        color: @m-grey1;
+    }
+    .ant-select-selection-item {
+        color: @m-white1;
+    }
+}
+.conditionSelect + .conditionSelect {
+    margin-left: 10px;
+}
+.selectBtn.ant-btn {
+    margin-left: 10px;
+    width: 80px;
+    height: 30px;
+    line-height: 31px;
+    text-align: center;
+    background: linear-gradient(0deg, @m-grey15 0%, @m-grey16 98%);
+    border: 0;
+    color: @m-white0;
+    font-size: 14px;
+    .rounded-corners(3px);
+    &:hover,
+    &:focus {
+        background: linear-gradient(0deg, @m-grey15-hover 0%, @m-grey16-hover 98%);
+        color: rgba(@m-white0, 0.8);
+        border: 0;
+    }
+}
+.operBtn.ant-btn:extend(.selectBtn.ant-btn) {
+    background: linear-gradient(0deg, @m-blue6 0%, @m-blue7 99%);
+    &:hover,
+    &:focus {
+        background: linear-gradient(0deg, @m-blue6-hover 0%, @m-blue7-hover 99%);
+        color: rgba(@m-white0, 0.8);
+        border: 0;
+    }
+}
+</style>;

src/views/information/warehouse-info/list/normal-use/index.vue

@@ -1,13 +1,12 @@
 <template>
   <!-- 仓库信息: 正常 -->
   <div class="warehouse-info-normal">
-    仓库信息: 正常
-    <div class="table-operations">
-      <a-button>查询</a-button>
-      <a-button>重置</a-button>
-      <a-button>新增</a-button>
-    </div>
-    <a-table :columns="columns"
+    <filterCustomTable @search="search">
+        <a-button class="operBtn" @click="openAction">新增</a-button>
+    </filterCustomTable>
+    <a-table 
+             class="topTable"
+             :columns="columns"
              :pagination="false"
              rowKey="key"
              :data-source="wareHouseInfos" />
@@ -18,6 +17,7 @@
 import { computed, defineComponent, ref } from 'vue';
 
 import { initData } from '@/setup/methods/index';
+import filterCustomTable from '@/views/information/warehouse-info/compoments/filterTable/index.vue';
 import { QueryWareHouse } from '@/goServiceAPI/ermcp/warehouse-info/index';
 import { ErmcpWareHouseInfo } from '@/goServiceAPI/ermcp/warehouse-info/interface';
 import { message } from 'ant-design-vue';
@@ -94,7 +94,9 @@ function add() {
 
 export default defineComponent({
     name: 'warehouse-info-normal',
-    components: {},
+    components: {
+        filterCustomTable
+    },
     setup() {
         const { wareHouseInfos, actionQuery, columns, getColumns, search } = getWarehouseInfoList();
         initData(() => {