修改过滤

src/common/components/filter/index.vue

@@ -31,7 +31,7 @@ import { defineComponent, PropType } from 'vue';
 import * as type from '@/common/setup/filter/interface';
 
 export default defineComponent({
-    name: 'filter',
+    name: 'filter-table',
     components: {},
     props: {
         selectList: {

src/common/setup/filter/interface.ts

@@ -1,7 +1,3 @@
-export interface Value {
-    key: string;
-    value: string;
-}
 export interface SelectOption {
     value: number | string;
     lable: string;

src/views/business/exposure/components/filterTable/index.vue

@@ -1,107 +1,30 @@
 <template>
   <!-- 过滤客户资料表格 -->
-  <div class="filter-custom-table">
-    <a-input v-model:value="MiddleGoodsName"
-             class="tableConditionInput"
-             placeholder="模糊搜索套保品种" />
-    <a-button class="selectBtn"
-              @click="search">查询</a-button>
-    <a-button class="selectBtn"
-              @click="reset">重置</a-button>
+  <div>
+    <FilterOption :selectList="selectList"
+                  :inputList="inputList"
+                  :fixedBtnList="fixedBtnList" />
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, SetupContext } from 'vue';
-
-// 搜索
-function handleSearch(context: SetupContext) {
-    const MiddleGoodsName = ref<string>('');
-
-    function search() {
-        const result = {
-            MiddleGoodsName: [MiddleGoodsName.value],
-        };
-        context.emit('search', result);
-    }
-    function reset() {
-        MiddleGoodsName.value = '';
-        search();
-    }
-
-    return { MiddleGoodsName, search, reset };
-}
+import FilterOption from '@/common/components/filter/index.vue';
+import { defineComponent } from 'vue';
+import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
 
 export default defineComponent({
     name: 'sell-filter-table',
-    components: {},
+    components: { FilterOption },
     setup(props, context) {
+        const select: SelectList[] = [];
+        const input: InputList[] = [{ value: '', placeholder: '模糊搜索套保品种', key: 'MiddleGoodsName' }];
         return {
-            ...handleSearch(context),
+            ...handleFilter(select, input, 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/business/plan/components/filterTable/index.vue

@@ -1,103 +1,43 @@
 <template>
   <!-- 过滤客户资料表格 -->
-  <div class="filter-custom-table">
-    <a-select label-in-value
-              class="conditionSelect"
-              style="width: 120px"
-              v-model:value="contracttype"
-              placeholder="全部计划类型"
-              @change="handleChange">
-      <a-select-option value="1">采购</a-select-option>
-      <a-select-option value="-1">销售</a-select-option>
-    </a-select>
-    <a-input v-model:value="hedgeplanno"
-             class="tableConditionInput"
-             placeholder="模糊搜索计划" />
-    <a-input v-model:value="deliverygoodsname"
-             class="tableConditionInput"
-             placeholder="模糊搜索现货品种" />
-    <a-button class="selectBtn"
-              @click="search">查询</a-button>
-    <a-button class="selectBtn"
-              @click="reset">重置</a-button>
+  <div>
+    <FilterOption :selectList="selectList"
+                  :inputList="inputList"
+                  :fixedBtnList="fixedBtnList" />
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, SetupContext } from 'vue';
-
-// 搜索
-function handleSearch(context: SetupContext) {
-    const hedgeplanno = ref<string>('');
-    const deliverygoodsname = ref<string>('');
-    interface Value {
-        key: string;
-        value: string;
-    }
-    let useType = '';
-    const contracttype = ref<number | undefined>(undefined);
-    function handleChange(value: Value) {
-        useType = value.value;
-        search();
-    }
-    function search() {
-        const result = { hedgeplanno: [hedgeplanno.value], deliverygoodsname: [deliverygoodsname.value], contracttype: [useType] };
-        context.emit('search', result);
-    }
-    function reset() {
-        hedgeplanno.value = '';
-        deliverygoodsname.value = '';
-        contracttype.value = undefined;
-        useType = '';
-        search();
-    }
-
-    return { hedgeplanno, search, reset, contracttype, handleChange };
-}
+import FilterOption from '@/common/components/filter/index.vue';
+import { defineComponent } from 'vue';
+import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
 
 export default defineComponent({
-    name: 'filter-custom-table',
-    components: {},
+    name: 'filter-plan-table',
+    components: { FilterOption },
     setup(props, context) {
+        const select: SelectList[] = [
+            {
+                value: undefined,
+                key: 'contracttype',
+                placeholder: '全部合同类型',
+                list: [
+                    { value: 1, lable: '采购' },
+                    { value: -1, lable: '销售' },
+                ],
+            },
+        ];
+        const input: InputList[] = [
+            { value: '', placeholder: '模糊搜索计划', key: 'hedgeplanno' },
+            { value: '', placeholder: '模糊搜索现货品种', key: 'deliverygoodsname' },
+        ];
         return {
-            ...handleSearch(context),
+            ...handleFilter(select, input, 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;
-    }
-}
 </style>;

src/views/business/purchase/components/filterTable/index.vue

@@ -1,131 +1,36 @@
 <template>
   <!-- 过滤客户资料表格 -->
-  <div class="filter-custom-table">
-    <a-input v-model:value="accountname"
-             class="tableConditionInput"
-             placeholder="模糊搜索销售方" />
-    <a-input v-model:value="contractno"
-             class="tableConditionInput"
-             placeholder="模糊搜索合同编号" />
-    <a-input v-model:value="deliverygoodsname"
-             class="tableConditionInput"
-             placeholder="模糊搜索现货品种" />
-    <a-input v-model:value="convertfactor"
-             class="tableConditionInput"
-             placeholder="模糊搜索品类" />
-    <a-input v-model:value="goodsname"
-             class="tableConditionInput"
-             placeholder="模糊搜索点价合约" />
-    <a-button class="selectBtn"
-              @click="search">查询</a-button>
-    <a-button class="selectBtn"
-              @click="reset">重置</a-button>
+  <div>
+    <FilterOption :selectList="selectList"
+                  :inputList="inputList"
+                  :fixedBtnList="fixedBtnList" />
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, SetupContext } from 'vue';
-
-// 搜索
-function handleSearch(context: SetupContext) {
-    const accountname = ref<string>('');
-    const contractno = ref<string>('');
-    const deliverygoodsname = ref<string>('');
-    const convertfactor = ref<string>('');
-    const goodsname = ref<string>('');
-
-    function search() {
-        const result = {
-            accountname: [accountname.value],
-            contractno: [contractno.value],
-            deliverygoodsname: [deliverygoodsname.value],
-            convertfactor: [convertfactor.value],
-            goodsname: [goodsname.value],
-        };
-        context.emit('search', result);
-    }
-    function reset() {
-        accountname.value = '';
-        contractno.value = '';
-        deliverygoodsname.value = '';
-        convertfactor.value = '';
-        goodsname.value = '';
-        search();
-    }
-
-    return { accountname, contractno, convertfactor, goodsname, search, reset };
-}
+import FilterOption from '@/common/components/filter/index.vue';
+import { defineComponent } from 'vue';
+import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
 
 export default defineComponent({
     name: 'purchase_pending-filter-table',
-    components: {},
+    components: { FilterOption },
     setup(props, context) {
+        const select: SelectList[] = [];
+        const input: InputList[] = [
+            { value: '', placeholder: '模糊搜索销售方', key: 'accountname' },
+            { value: '', placeholder: '模糊搜索合同编号', key: 'contractno' },
+            { value: '', placeholder: '模糊搜索现货品种', key: 'deliverygoodsname' },
+            { value: '', placeholder: '模糊搜索品类', key: 'convertfactor' },
+            { value: '', placeholder: '模糊搜索点价合约', key: 'goodsname' },
+        ];
         return {
-            ...handleSearch(context),
+            ...handleFilter(select, input, 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/business/sell/components/filterTable/index.vue

@@ -1,131 +1,36 @@
 <template>
   <!-- 过滤客户资料表格 -->
-  <div class="filter-custom-table">
-    <a-input v-model:value="accountname"
-             class="tableConditionInput"
-             placeholder="模糊搜索销售方" />
-    <a-input v-model:value="contractno"
-             class="tableConditionInput"
-             placeholder="模糊搜索合同编号" />
-    <a-input v-model:value="deliverygoodsname"
-             class="tableConditionInput"
-             placeholder="模糊搜索现货品种" />
-    <a-input v-model:value="convertfactor"
-             class="tableConditionInput"
-             placeholder="模糊搜索品类" />
-    <a-input v-model:value="goodsname"
-             class="tableConditionInput"
-             placeholder="模糊搜索点价合约" />
-    <a-button class="selectBtn"
-              @click="search">查询</a-button>
-    <a-button class="selectBtn"
-              @click="reset">重置</a-button>
+  <div>
+    <FilterOption :selectList="selectList"
+                  :inputList="inputList"
+                  :fixedBtnList="fixedBtnList" />
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, SetupContext } from 'vue';
-
-// 搜索
-function handleSearch(context: SetupContext) {
-    const accountname = ref<string>('');
-    const contractno = ref<string>('');
-    const deliverygoodsname = ref<string>('');
-    const convertfactor = ref<string>('');
-    const goodsname = ref<string>('');
-
-    function search() {
-        const result = {
-            accountname: [accountname.value],
-            contractno: [contractno.value],
-            deliverygoodsname: [deliverygoodsname.value],
-            convertfactor: [convertfactor.value],
-            goodsname: [goodsname.value],
-        };
-        context.emit('search', result);
-    }
-    function reset() {
-        accountname.value = '';
-        contractno.value = '';
-        deliverygoodsname.value = '';
-        convertfactor.value = '';
-        goodsname.value = '';
-        search();
-    }
-
-    return { accountname, contractno, convertfactor, goodsname, search, reset };
-}
+import FilterOption from '@/common/components/filter/index.vue';
+import { defineComponent } from 'vue';
+import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
 
 export default defineComponent({
-    name: 'sell-filter-table',
-    components: {},
+    name: 'sell-filter',
+    components: { FilterOption },
     setup(props, context) {
+        const select: SelectList[] = [];
+        const input: InputList[] = [
+            { value: '', placeholder: '模糊搜索销售方', key: 'accountname' },
+            { value: '', placeholder: '模糊搜索合同编号', key: 'contractno' },
+            { value: '', placeholder: '模糊搜索现货品种', key: 'deliverygoodsname' },
+            { value: '', placeholder: '模糊搜索品类', key: 'convertfactor' },
+            { value: '', placeholder: '模糊搜索点价合约', key: 'goodsname' },
+        ];
         return {
-            ...handleSearch(context),
+            ...handleFilter(select, input, 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/custom/compoments/filterTable/index.vue

@@ -1,109 +1,47 @@
 <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-input v-model:value="phone"
-             class="tableConditionInput"
-             placeholder="模糊搜索手机号码" />
-    <a-button class="selectBtn"
-              @click="search">查询</a-button>
-    <a-button class="selectBtn"
-              @click="reset">重置</a-button>
+  <div>
+    <FilterOption :selectList="selectList"
+                  :inputList="inputList"
+                  :fixedBtnList="fixedBtnList" />
     <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>('');
-    const phone = ref<string>('');
-    interface Value {
-        key: string;
-        value: string;
-    }
-    let useType = '';
-    const userinfotype = ref<number | undefined>(undefined);
-    function handleChange(value: Value) {
-        useType = value.value;
-        search();
-    }
-    function search() {
-        const result = { nickname: [nickname.value], name: [name.value], mobile: [phone.value], userinfotype: [useType] };
-        context.emit('search', result);
-    }
-    function reset() {
-        nickname.value = '';
-        name.value = '';
-        phone.value = '';
-        userinfotype.value = undefined;
-        useType = '';
-        search();
-    }
-
-    return { nickname, name, phone, search, reset, userinfotype, handleChange };
-}
+import FilterOption from '@/common/components/filter/index.vue';
+import { defineComponent } from 'vue';
+import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
 
 export default defineComponent({
     name: 'filter-custom-table',
-    components: {},
+    components: { FilterOption },
     setup(props, context) {
+        const select: SelectList[] = [
+            {
+                value: undefined,
+                key: 'userinfotype',
+                placeholder: '全部客户类型',
+                list: [
+                    { value: 1, lable: '个人' },
+                    { value: 2, lable: '企业' },
+                ],
+            },
+        ];
+        const input: InputList[] = [
+            { value: '', placeholder: '模糊搜索客户简称', key: 'nickname' },
+            { value: '', placeholder: '模糊搜索客户名称', key: 'name' },
+            { value: '', placeholder: '模糊搜索手机号码', key: 'phone' },
+        ];
+        const { selectList, inputList, fixedBtnList } = handleFilter(select, input, context);
         return {
-            ...handleSearch(context),
+            selectList,
+            inputList,
+            fixedBtnList,
         };
     },
 });
 </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;
-    }
-    
-}
 </style>;

src/views/information/goods/components/filterTable/index.vue

@@ -1,123 +1,32 @@
 <template>
   <!-- 过滤现货品种表格 -->
-  <div class="filter-custom-table">
-    <a-input v-model:value="nickname"
-             class="tableConditionInput"
-             placeholder="模糊搜索现货品种" />
-    <a-button class="selectBtn"
-              @click="search">搜索</a-button>
-    <!-- <a-button class="selectBtn"
-              @click="reset">重置</a-button> -->
+  <div>
+    <FilterOption :selectList="selectList"
+                  :inputList="inputList"
+                  :fixedBtnList="fixedBtnList" />
     <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>('');
-    const phone = 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], mobile: [phone.value], userinfotype: [useType] };
-        context.emit('search', result);
-    }
-    function reset() {
-        nickname.value = '';
-        name.value = '';
-        phone.value = '';
-        userinfotype.value = 0;
-        useType = '';
-        search();
-    }
-
-    return { nickname, name, phone, search, reset, userinfotype, handleChange };
-}
+import FilterOption from '@/common/components/filter/index.vue';
+import { defineComponent } from 'vue';
+import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
 
 export default defineComponent({
-    name: 'filter-custom-table',
-    components: {},
+    name: 'filter-goods-table',
+    components: {
+        FilterOption,
+    },
     setup(props, context) {
+        const select: SelectList[] = [];
+        const input: InputList[] = [{ value: '', placeholder: '模糊搜索现货品种', key: 'nickname' }];
         return {
-            ...handleSearch(context),
+            ...handleFilter(select, input, context),
         };
     },
 });
 </script>
 
 <style lang="less">
-.filter-custom-table {
-    width: 100%;
-    display: inline-flex;
-    padding-top: 9px;
-    padding-bottom: 6px;
-}
-.tableConditionInput {
-    margin-left: 3px;
-}
-.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/spot-contract/components/filterTable/index.vue

@@ -1,154 +1,52 @@
 <template>
   <!-- 过滤客户资料表格 -->
-  <div class="filter-custom-table">
-    <a-select label-in-value
-              class="conditionSelect"
-              style="width: 120px"
-              v-model:value="contracttype"
-              placeholder="全部合同类型"
-              @change="handleChange">
-      <a-select-option value="1">采购</a-select-option>
-      <a-select-option value="-1">销售</a-select-option>
-    </a-select>
-    <a-select label-in-value
-              class="conditionSelect"
-              style="width: 120px"
-              v-model:value="pricetype"
-              placeholder="全部定价类型"
-              @change="handlePricetype">
-      <a-select-option value="1">一口价</a-select-option>
-      <a-select-option value="2">点价</a-select-option>
-      <a-select-option value="3">暂定价</a-select-option>
-    </a-select>
-    <a-input v-model:value="contractno"
-             class="tableConditionInput"
-             placeholder="模糊搜索合同编号" />
-    <a-input v-model:value="negative"
-             class="tableConditionInput"
-             placeholder="模糊搜索对手方" />
-    <a-button class="selectBtn"
-              @click="search">查询</a-button>
-    <a-button class="selectBtn"
-              @click="reset">重置</a-button>
+  <div>
+    <FilterOption :selectList="selectList"
+                  :inputList="inputList"
+                  :fixedBtnList="fixedBtnList" />
     <slot></slot>
-
-    <!-- 新增弹窗 -->
-
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, SetupContext } from 'vue';
-
-// 搜索
-function handleSearch(context: SetupContext) {
-    const contractno = ref<string>('');
-    const negative = ref<string>('');
-    interface Value {
-        key: string;
-        value: string;
-    }
-    // 全部合同类型
-    let useType = '';
-    const contracttype = ref<number | undefined>(undefined);
-    function handleChange(value: Value) {
-        useType = value.value;
-        search();
-    }
-    // 全部定价类型
-    const pricetype = ref<number | undefined>(undefined);
-    let cachePricetype = '';
-    function handlePricetype(value: Value) {
-        cachePricetype = value.value;
-        search();
-    }
-    function search() {
-        const result = { contractno: [contractno.value], negative: [negative.value], contracttype: [useType], pricetype: [cachePricetype] };
-        context.emit('search', result);
-    }
-    function reset() {
-        contractno.value = '';
-        negative.value = '';
-
-        contracttype.value = undefined;
-        useType = '';
-        pricetype.value = undefined;
-        cachePricetype = '';
-        search();
-    }
-
-    return { contractno, negative, search, reset, contracttype, handleChange, pricetype, handlePricetype };
-}
-
+import FilterOption from '@/common/components/filter/index.vue';
+import { defineComponent } from 'vue';
+import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
 export default defineComponent({
     name: 'filter-spot-contract-table',
-    components: {},
+    components: { FilterOption },
     setup(props, context) {
+        const select: SelectList[] = [
+            {
+                value: undefined,
+                key: 'contracttype',
+                placeholder: '全部合同类型',
+                list: [
+                    { value: 1, lable: '采购' },
+                    { value: -1, lable: '销售' },
+                ],
+            },
+            {
+                value: undefined,
+                key: 'pricetype',
+                placeholder: '全部定价类型',
+                list: [
+                    { value: 1, lable: '一口价' },
+                    { value: 2, lable: '点价' },
+                    { value: 3, lable: '暂定价' },
+                ],
+            },
+        ];
+        const input: InputList[] = [
+            { value: '', placeholder: '模糊搜索合同编号', key: 'contractno' },
+            { value: '', placeholder: '模糊搜索对手方', key: 'negative' },
+        ];
         return {
-            ...handleSearch(context),
+            ...handleFilter(select, input, 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: 30px;
-    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/compoments/filterTable/index.vue

@@ -1,131 +1,44 @@
 <template>
   <!-- 过滤仓库信息表格 -->
-  <div class="filter-custom-table">
-    <a-select label-in-value
-              class="conditionSelect"
-              style="width: 120px"
-              v-model:value="warehousetype"
-              placeholder="全部仓库类型"
-              @change="handleChange">
-      <a-select-option value="1">厂库</a-select-option>
-      <a-select-option value="2">自有库</a-select-option>
-      <a-select-option value="3">合作库</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>
+  <div>
+    <FilterOption :selectList="selectList"
+                  :inputList="inputList"
+                  :fixedBtnList="fixedBtnList" />
     <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 warehousetype = ref<number | undefined>(undefined);
-    function handleChange(value: Value) {
-        useType = value.value;
-        search();
-    }
-    function search() {
-        const result = { warehousename: [nickname.value], address: [name.value], warehousetype: [useType] };
-        context.emit('search', result);
-    }
-    function reset() {
-        nickname.value = '';
-        name.value = '';
-        warehousetype.value = undefined;
-        useType = '';
-        search();
-    }
-
-    return { nickname, name, search, reset, warehousetype, handleChange };
-}
+import FilterOption from '@/common/components/filter/index.vue';
+import { defineComponent } from 'vue';
+import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
 
 export default defineComponent({
-    name: 'filter-custom-table',
-    components: {},
+    name: 'filter-warehouse-table',
+    components: { FilterOption },
     setup(props, context) {
+        const select: SelectList[] = [
+            {
+                value: undefined,
+                key: 'warehousetype',
+                placeholder: '全部仓库类型',
+                list: [
+                    { value: 1, lable: '厂库' },
+                    { value: 2, lable: '自有库' },
+                    { value: 3, lable: '合作库' },
+                ],
+            },
+        ];
+        const input: InputList[] = [
+            { value: '', placeholder: '模糊搜索仓库名称', key: 'nickname' },
+            { value: '', placeholder: '模糊搜索仓库地址', key: 'name' },
+        ];
         return {
-            ...handleSearch(context),
+            ...handleFilter(select, input, 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/manage/business-review/components/filterTable/index.vue

@@ -1,141 +1,43 @@
 <template>
   <!-- 过滤客户资料表格 -->
-  <div class="filter-custom-table">
-    <a-select label-in-value
-              class="conditionSelect"
-              style="width: 120px"
-              v-model:value="contracttype"
-              placeholder="全部合同类型"
-              @change="handleChange">
-      <a-select-option value="1">采购</a-select-option>
-      <a-select-option value="-1">销售</a-select-option>
-    </a-select>
-    <a-input v-model:value="name"
-             class="tableConditionInput"
-             placeholder="模糊搜索对手方" />
-    <a-input v-model:value="contractno"
-             class="tableConditionInput"
-             placeholder="模糊搜索合同编号" />
-    <a-input v-model:value="deliverygoodsname"
-             class="tableConditionInput"
-             placeholder="模糊搜索现货品种" />
-    <a-button class="selectBtn"
-              @click="search">查询</a-button>
-    <a-button class="selectBtn"
-              @click="reset">重置</a-button>
+  <div>
+    <FilterOption :selectList="selectList"
+                  :inputList="inputList"
+                  :fixedBtnList="fixedBtnList" />
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, SetupContext } from 'vue';
-
-// 搜索
-function handleSearch(context: SetupContext) {
-    const contracttype = ref<string | undefined>(undefined);
-    const name = ref<string>('');
-    const contractno = ref<string>('');
-    const deliverygoodsname = ref<string>('');
-
-    interface Value {
-        key: string;
-        value: string;
-    }
-    let useType = '';
-    function handleChange(value: Value) {
-        useType = value.value;
-        search();
-    }
-
-    function search() {
-        const result = {
-            contracttype: [useType],
-            contractno: [contractno.value],
-            deliverygoodsname: [deliverygoodsname.value],
-            name: [name.value],
-        };
-        context.emit('search', result);
-    }
-    function reset() {
-        contracttype.value = undefined;
-        contractno.value = '';
-        name.value = '';
-        deliverygoodsname.value = '';
-        search();
-    }
-
-    return { contracttype, name, contractno, deliverygoodsname, search, reset, handleChange };
-}
-
+import FilterOption from '@/common/components/filter/index.vue';
+import { defineComponent } from 'vue';
+import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
 export default defineComponent({
-    name: 'purchase_pending-filter-table',
-    components: {},
+    name: 'business-review-filter-table',
+    components: { FilterOption },
     setup(props, context) {
+        const select: SelectList[] = [
+            {
+                value: undefined,
+                key: 'contracttype',
+                placeholder: '全部合同类型',
+                list: [
+                    { value: 1, lable: '采购' },
+                    { value: -1, lable: '销售' },
+                ],
+            },
+        ];
+        const input: InputList[] = [
+            { value: '', placeholder: '模糊搜索对手方', key: 'buyusernameOrsellusername' },
+            { value: '', placeholder: '模糊搜索合同编号', key: 'contractno' },
+            { value: '', placeholder: '模糊搜索现货品种', key: 'deliverygoodsname' },
+        ];
         return {
-            ...handleSearch(context),
+            ...handleFilter(select, input, 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/manage/finance-review/components/filterTable/index.vue

@@ -1,141 +1,43 @@
 <template>
   <!-- 过滤客户资料表格 -->
-  <div class="filter-custom-table">
-    <a-select label-in-value
-              class="conditionSelect"
-              style="width: 120px"
-              v-model:value="contracttype"
-              placeholder="全部合同类型"
-              @change="handleChange">
-      <a-select-option value="1">采购</a-select-option>
-      <a-select-option value="-1">销售</a-select-option>
-    </a-select>
-    <a-input v-model:value="name"
-             class="tableConditionInput"
-             placeholder="模糊搜索对手方" />
-    <a-input v-model:value="contractno"
-             class="tableConditionInput"
-             placeholder="模糊搜索合同编号" />
-    <a-input v-model:value="deliverygoodsname"
-             class="tableConditionInput"
-             placeholder="模糊搜索现货品种" />
-    <a-button class="selectBtn"
-              @click="search">查询</a-button>
-    <a-button class="selectBtn"
-              @click="reset">重置</a-button>
+  <div>
+    <FilterOption :selectList="selectList"
+                  :inputList="inputList"
+                  :fixedBtnList="fixedBtnList" />
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, SetupContext } from 'vue';
-
-// 搜索
-function handleSearch(context: SetupContext) {
-    const contracttype = ref<string | undefined>(undefined);
-    const name = ref<string>('');
-    const contractno = ref<string>('');
-    const deliverygoodsname = ref<string>('');
-
-    interface Value {
-        key: string;
-        value: string;
-    }
-    let useType = '';
-    function handleChange(value: Value) {
-        useType = value.value;
-        search();
-    }
-
-    function search() {
-        const result = {
-            contracttype: [useType],
-            contractno: [contractno.value],
-            deliverygoodsname: [deliverygoodsname.value],
-            name: [name.value],
-        };
-        context.emit('search', result);
-    }
-    function reset() {
-        contracttype.value = undefined;
-        contractno.value = '';
-        name.value = '';
-        deliverygoodsname.value = '';
-        search();
-    }
-
-    return { contracttype, name, contractno, deliverygoodsname, search, reset, handleChange };
-}
-
+import FilterOption from '@/common/components/filter/index.vue';
+import { defineComponent } from 'vue';
+import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
 export default defineComponent({
-    name: 'purchase_pending-filter-table',
-    components: {},
+    name: 'finace-review-filter-table',
+    components: { FilterOption },
     setup(props, context) {
+        const select: SelectList[] = [
+            {
+                value: undefined,
+                key: 'contracttype',
+                placeholder: '全部合同类型',
+                list: [
+                    { value: 1, lable: '采购' },
+                    { value: -1, lable: '销售' },
+                ],
+            },
+        ];
+        const input: InputList[] = [
+            { value: '', placeholder: '模糊搜索对手方', key: 'buyusernameOrsellusername' },
+            { value: '', placeholder: '模糊搜索合同编号', key: 'contractno' },
+            { value: '', placeholder: '模糊搜索现货品种', key: 'deliverygoodsname' },
+        ];
         return {
-            ...handleSearch(context),
+            ...handleFilter(select, input, 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/manage/inventory-review/components/filterTable/index.vue

@@ -1,22 +1,21 @@
 <template>
   <!-- 过滤客户资料表格 -->
   <div>
-    <Filter :selectList="selectList"
-            :inputList="inputList"
-            :fixedBtnList="fixedBtnList" />
+    <FilterOption :selectList="selectList"
+                  :inputList="inputList"
+                  :fixedBtnList="fixedBtnList" />
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
+import FilterOption from '@/common/components/filter/index.vue';
 import { defineComponent } from 'vue';
 import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
-import Filter from '@/common/components/filter/index.vue';
-
 export default defineComponent({
     name: 'check-out-in-filter-table',
     components: {
-        Filter,
+        FilterOption,
     },
     props: {
         inOrOut: {