大型优化

src/assets/styles/mixin.less

@@ -1527,6 +1527,7 @@
     align-items: center;
     width      : calc(100% - 3px);
     background : @m-black35;
+    padding    : 6px;
 }
 
 .ant-row.dialogRowTitle {
@@ -2498,22 +2499,13 @@ input:-internal-autofill-selected {
     background-color: @m-black1;
 
     .buy-sell-market-title {
-        width         : 100%;
-        height        : 40px;
-        background    : @m-black1;
-        display       : inline-flex;
-        font-size     : 14px;
-        position      : relative;
-        line-height   : 40px;
-        border-bottom : 1PX solid @m-blue0;
-        padding-bottom: 2px;
-
-        div {
-            align-self    : center;
-            align-items   : center;
-            // height: 40px;
-            // line-height: 40px;
-        }
+        height       : 40px;
+        background   : @m-black1;
+        display      : flex;
+        align-items  : center;
+        font-size    : 14px;
+        position     : relative;
+        border-bottom: 1PX solid @m-blue0;
 
         .backIcon {
             width      : 52px;
@@ -3680,17 +3672,19 @@ input:-internal-autofill-selected {
         }
 
         .anticon-minus {
-            position: absolute;
-            top     : 0;
-            left    : 0;
-            z-index : 1;
+            position   : absolute;
+            top        : 0;
+            left       : 0;
+            z-index    : 1;
+            user-select: none;
         }
 
         .anticon-plus {
-            position: absolute;
-            top     : 0;
-            right   : 0;
-            z-index : 1;
+            position   : absolute;
+            top        : 0;
+            right      : 0;
+            z-index    : 1;
+            user-select: none;
         }
 
         .anticon-calendar {

src/common/components/capitalInfo/index.vue

@@ -7,7 +7,7 @@
         <span>({{getPayCurrencyTypeEnumItemName(tradeAccount.currencyid)}})</span>
       </div>
       <div class="capital-info__header-icon">
-        <i class="iconfont icon-zhengyan" @click="showAction"></i>
+        <i :class="['iconfont', show ? 'icon-zhengyan' : 'icon-biyan']" @click="showAction"></i>
       </div>
     </div>
     <table class="capital-info__table">

src/common/components/filter/index.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="filter-custom-table">
+    <slot name="before"></slot>
     <a-select class="conditionSelect" v-for="item in selectList" :key="item.key" v-model:value="item.selectedValue" @change="item.onChange">
       <a-select-option v-for="(option, i) in item.options" :key="i" :value="option.value">{{option.label}}</a-select-option>
     </a-select>
     <a-input class="tableConditionInput" v-for="(item,i) in inputList" :key="i" :placeholder="item.placeholder" v-model:value="item.value" />
+    <slot name="after"></slot>
     <a-button class="selectBtn" v-for="(item, i) in buttonList" :key="i" @click="item.event">{{item.lable}}</a-button>
+    <slot></slot>
   </div>
 </template>
 
@@ -44,7 +47,6 @@ export default defineComponent({
 .filter-custom-table {
     display: inline-flex;
     align-items: center;
-    padding: 6px;
     .btnDeafault.ant-btn,
     .operBtn.ant-btn {
         height: 26px !important;
@@ -91,8 +93,11 @@ export default defineComponent({
     .conditionSelect {
         max-width: 120px;
         min-width: 120px;
-        &:not(:first-child) {
-            margin-left: 10px;
+    }
+    > * {
+        margin: 0 !important;
+        &:not(:last-child) {
+            margin-right: 10px !important;
         }
     }
 }

src/common/components/filter/interface.ts

@@ -1,5 +1,5 @@
 /**
- * 表格列过滤
+ * 表格列过滤，参考https://2x.antdv.com/components/table-cn
  */
 export interface FilterColumn<T = unknown> {
     key: string,
@@ -8,11 +8,11 @@ export interface FilterColumn<T = unknown> {
 }
 
 /**
- * 过滤选择器
+ * 过滤选择框
  */
 export interface FilterSelect<T = unknown> {
     key: keyof T,
-    alias?: string, // key的别名，数据的字段名可能和key不一样
+    alias?: string, // key的别名，查询字段名可能和key不一样
     selectedValue: string | number,
     options: {
         label: string,
@@ -26,7 +26,7 @@ export interface FilterSelect<T = unknown> {
  */
 export interface FilterInput<T = unknown> {
     keys: (keyof T)[],
-    alias?: string, // key的别名，数据的字段名可能和key不一样
+    alias?: string, // key的别名，查询字段名可能和key不一样
     value: string,
     placeholder: string
 }

src/common/components/filter/old.vue

@@ -1,101 +0,0 @@
-<template>
-  <!-- 过滤客户资料表格 -->
-  <div class="filter-custom-table">
-    <slot name="selectBefore"></slot>
-    <a-select label-in-value class="conditionSelect" v-for="(item, i) in selectList" :key="i + '11'" style="width: 120px" v-model:value="item.value" :placeholder="item.placeholder" @change="item.change">
-      <a-select-option v-for="(option, j) in item.list" :key="j + '22'" :value="option.value">{{option.lable}}</a-select-option>
-    </a-select>
-    <slot name="selectAfter"></slot>
-    <a-input v-model:value="item.value" v-for="(item,i) in inputList" :key="i + '33'" class="tableConditionInput" :placeholder="item.placeholder" />
-    <slot name="inputAfter"></slot>
-    <a-button class="selectBtn" v-for="(item, i) in fixedBtnList" :key="i + 'fixed'" @click="item.event">{{item.lable}}</a-button>
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import * as type from '@/common/setup/filter/interface';
-
-export default defineComponent({
-  name: 'filter-table',
-  components: {},
-  props: {
-    selectList: {
-      type: Array as PropType<type.SelectList[]>,
-      default: [],
-    },
-    inputList: {
-      type: Array as PropType<type.InputList[]>,
-      default: [],
-    },
-    fixedBtnList: {
-      type: Array as PropType<type.FixedBtnList[]>,
-      default: [],
-    },
-  },
-});
-</script>
-
-<style lang="less">
-.btnDeafault.ant-btn {
-    margin-left: 0;
-}
-.ant-select + .btnDeafault.ant-btn {
-    margin-left: 10px;
-}
-.ant-space.ant-space-vertical + .btnDeafault.ant-btn {
-    margin-left: 0;
-}
-.filter-custom-table {
-    display: inline-flex;
-    align-items: center;
-    padding: 7px 0;
-    .btnDeafault.ant-btn,
-    .operBtn.ant-btn {
-        height: 26px !important;
-        line-height: 26px !important;
-    }
-    ant-btn operBtn .ant-select-single:not(.ant-select-customize-input) + .ant-select-single:not(.ant-select-customize-input),
-    .ant-select + .ant-space.ant-space-vertical {
-        margin-left: 10px;
-        margin-top: 0px;
-    }
-    .ant-select-single:not(.ant-select-customize-input) {
-        .ant-select-selector {
-            height: 30px;
-            border-color: @m-grey46 !important;
-            background: @m-grey47;
-            .rounded-corners(3px);
-            .ant-select-selection-item {
-                line-height: 26px;
-            }
-            .ant-select-selection-search {
-                height: 26px;
-                .ant-select-selection-search-input {
-                    height: 26px;
-                    line-height: 27px !important;
-                }
-            }
-            .ant-select-selection-placeholder {
-                line-height: 26px;
-            }
-        }
-    }
-
-    .allDatePicker.ant-calendar-picker {
-        height: 26px !important;
-        border: 1px solid @m-grey46 !important;
-        .ant-calendar-picker-input.ant-input {
-            height: 26px;
-            line-height: 26px;
-            &::placeholder {
-                color: @m-grey10 !important;
-            }
-        }
-    }
-    .conditionSelect + .conditionSelect {
-        margin-left: 10px;
-    }
-}
-</style>

src/common/components/filter/setup.ts

@@ -1,43 +1,48 @@
-import { SetupContext, ref } from 'vue'
+import { SetupContext, ref, reactive, toRefs } from 'vue'
 import { FilterColumn, FilterSelect, FilterInput, FilterButton } from './interface'
 
-// 参考https://2x.antdv.com/components/table-cn
+/**
+ * 参考https://2x.antdv.com/components/table-cn
+ */
 export function useFilter<T>(context: SetupContext) {
-    const selectList = ref<FilterSelect<T>[]>([]);
-    const inputList = ref<FilterInput<T>[]>([]);
+    const state: { selectList: FilterSelect<T>[], inputList: FilterInput<T>[] } = reactive({
+        selectList: [],
+        inputList: [],
+    })
 
-    // 表格过滤查询
+    // 表格过滤查询，支持多条件查询
     const search = () => {
         const filters: FilterColumn<T>[] = [];
 
-        selectList.value.forEach((item) => {
-            if (Number(item.selectedValue)) {
-                const key = item.alias ?? item.key;
+        state.selectList.forEach((item) => {
+            const { key, alias, selectedValue } = item;
+            if (selectedValue) {
                 filters.push({
-                    key: key.toString(),
-                    filteredValue: [item.selectedValue.toString()],
-                    onFilter: (value, record) => String(record[key as keyof T]).indexOf(value) === 0
+                    key: (alias ?? key).toString(),
+                    filteredValue: [selectedValue.toString()],
+                    onFilter: (value, record) => String(record[key]).indexOf(value) === 0
                 })
             }
         })
 
-        inputList.value.forEach((item) => {
-            if (item.value) {
-                if (item.alias) {
+        state.inputList.forEach((item) => {
+            const { keys, alias, value } = item;
+            if (value) {
+                if (alias) {
                     filters.push({
-                        key: item.alias,
-                        filteredValue: [item.value],
+                        key: alias,
+                        filteredValue: [value],
                         onFilter: (value, record) => {
-                            return item.keys.some((key) => {
+                            return keys.some((key) => {
                                 return String(record[key])?.toLowerCase().indexOf(value.toLowerCase()) >= 0
                             })
                         }
                     })
                 } else {
-                    item.keys.forEach((key) => {
+                    keys.forEach((key) => {
                         filters.push({
                             key: key.toString(),
-                            filteredValue: [item.value],
+                            filteredValue: [value],
                             onFilter: (value, record) => {
                                 return String(record[key])?.toLowerCase().indexOf(value.toLowerCase()) >= 0
                             }
@@ -52,8 +57,10 @@ export function useFilter<T>(context: SetupContext) {
 
     // 重置查询
     const reset = () => {
-        selectList.value.forEach((e) => (e.selectedValue = 0));
-        inputList.value.forEach((e) => (e.value = ''));
+        state.selectList.forEach((e) => {
+            e.selectedValue = typeof e.selectedValue === 'string' ? '' : 0;
+        });
+        state.inputList.forEach((e) => (e.value = ''));
         search();
     }
 
@@ -63,8 +70,7 @@ export function useFilter<T>(context: SetupContext) {
     ]);
 
     return {
-        selectList,
-        inputList,
+        ...toRefs(state),
         buttonList,
         search,
         reset

src/common/setup/table/button.ts

@@ -17,7 +17,7 @@ export function getClassName(val: string): BtnClassName {
     // 红色按钮
     const btnDanger = ['disable', 'cancle', 'cancel', 'delete', 'logout', 'locked', 'refuse']
     // 蓝色按钮
-    const operBtn = ['add', 'close', 'modify', 'check', 'reset', 'credit', 'payment', 'confirm_withdrawal', 'complete_stocking', 'upload_logistics', 'buy', 'listed', 'delisting',
+    const operBtn = ['add', 'close', 'modify', 'recover', 'check', 'reset', 'resubmit', 'credit', 'payment', 'confirm_withdrawal', 'complete_stocking', 'upload_logistics', 'buy', 'listed', 'delisting',
         'receipt', 'confirm_pickup']
     const map = new Map<BtnClassName, string[]>([
         ['btnDanger', btnDanger],

src/services/go/ermcp/goodsInfo/interface/middlegoodsdetail.ts

@@ -1,82 +1,54 @@
 /**
  * 查询套保品种详情
  */
- export interface Ermcp3MiddleGoodsDetail {
-    areauserid:number //机构用户ID
-    enumdicname:string//单位名称
-    goodsunitid:number//套保品种单位id
-    gplst:TBGoodsGroup[]//期货品种列表
-    middlegoodscode:string//套保品种代码
-    middlegoodsid:number//套保品种ID(SEQ_ERMS_MIDDLEGOODS)
-    middlegoodsnam:string//套保品种名称
-    needarbitrageratio:number//套利比率
-    needhedgeratio:number//套保比率
-    wdlst:TBWrstandard[]//商品信息列表(现货品类)
-    mg:ErmcpMiddleGoodsModel//套保品种
+export interface Ermcp3MiddleGoodsDetail {
+    areauserid: number //机构用户ID
+    enumdicname: string//单位名称
+    goodsunitid: number//套保品种单位id
+    GPLST: TBGoodsGroup[]//期货品种列表
+    middlegoodscode: string//套保品种代码
+    middlegoodsid: number//套保品种ID(SEQ_ERMS_MIDDLEGOODS)
+    middlegoodsname: string//套保品种名称
+    needarbitrageratio: number//套利比率
+    needhedgeratio: number//套保比率
+    WDLST: TBWrstandard[]//商品信息列表(现货品类)
 }
 
-
-
-/**
- * 套保品种
- */
- export interface ErmcpMiddleGoodsModel {
-    areauserid: number;//机构用户ID
-    createtime: string;//修改时间
-    enumdicname: string;//单位名称
-    evaluateratio: number;//估价系数
-    goodsgroupid: number;//关联期货品种ID
-    goodsunitid: number;//单位ID
-    isvalid: number;//状态 number;
-    //-无效(停用) 1-有效(正常)
-    middlegoodscode: string;//套保品种代码
-    middlegoodsid: number;//套保品种ID(SEQ_ERMS_MIDDLEGOODS)
-    middlegoodsname: string;//套保品种名称
-    modifytime: string;//修改时间
-    needhedgeratio: number;//套保比率
-    qtydecimalplace: number;//数量小数位
-    relatedgoodsid: number;//关联交易商品ID
-    relatedgoodstype: number;//关联商品类型 - 1:期货合约 2:现货品种
-    remark: string;//备注
-}
-
-
-
 /**
  * 商品信息列表(现货品类)
  */
- interface TBWrstandard{
-    convertratio:number//折算系数
-    deliverygoodsname:string//品种名称
-    enumdicname:string//单位名称
-    vatrate:number//增值税率
-    wrstandardcode:string//现货商品代码
-    wrstandardid:number//现货商品ID(SEQ_WRSTANDARD)
-    wrstandardname:string//现货商品名称
+interface TBWrstandard {
+    convertratio: number//折算系数
+    deliverygoodsname: string//品种名称
+    enumdicname: string//单位名称
+    vatrate: number//增值税率
+    wrstandardcode: string//现货商品代码
+    wrstandardid: number//现货商品ID(SEQ_WRSTANDARD)
+    wrstandardname: string//现货商品名称
 }
 
 /**
  * 期货品种列表
  */
- interface TBGoodsGroup{
-    convertratio:number//折算系数
-    enumdicname:string//单位名称
-    exexchangecode:string//交易所代码
-    exexchangename:string//交易所名称
-    gdlst:TBGoods[]//商品列表
-    goodsgroupid:Number//商品组ID(自增ID)
-    goodsgroupname:string//商品组名称
-    goodunitid:number//报价单位ID
+interface TBGoodsGroup {
+    convertratio: number//折算系数
+    enumdicname: string//单位名称
+    exexchangecode: string//交易所代码
+    exexchangename: string//交易所名称
+    GDLST: TBGoods[]//商品列表
+    goodsgroupid: Number//商品组ID(自增ID)
+    goodsgroupname: string//商品组名称
+    goodunitid: number//报价单位ID
 }
 
 /**
  * 商品列表
  */
- interface TBGoods{
-    agreeunit:number//合约乘数
-    enumdicname:string//单位名称
-    goodscode:string//商品代码(内部)
-    goodsid:number//商品ID(自增ID SEQ_GOODS)
-    goodsname:string//商品名称
+interface TBGoods {
+    agreeunit: number//合约乘数
+    enumdicname: string//单位名称
+    goodscode: string//商品代码(内部)
+    goodsid: number//商品ID(自增ID SEQ_GOODS)
+    goodsname: string//商品名称
 
 }

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

@@ -1,25 +0,0 @@
-<template>
-  <!-- 过滤客户资料表格 -->
-  <div class="filterTable">
-    <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';
-
-export default defineComponent({
-  name: 'sell-filter-table',
-  components: { FilterOption },
-  setup(props, context) {
-    const select: SelectList[] = [];
-    const input: InputList[] = [{ value: '', placeholder: '模糊搜索套保品种', key: 'MiddleGoodsName' }];
-    return {
-      ...handleFilter(select, input, context),
-    };
-  },
-});
-</script>

src/views/business/exposure/list/futures/filter.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="filterTable">
+    <FilterOption :inputList="inputList" :buttonList="buttonList" />
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ErmcpHedgePosition } from '@/services/go/ermcp/exposure/interface';
+import { useFilter } from '@/common/components/filter/setup';
+import FilterOption from '@/common/components/filter/index.vue';
+
+export default defineComponent({
+  name: 'sell-filter-table',
+  components: {
+    FilterOption
+  },
+  setup(props, context) {
+    const { inputList, buttonList } = useFilter<ErmcpHedgePosition>(context);
+
+    inputList.value = [
+      { keys: ['goodsname', 'goodscode'], alias: 'goodsid', value: '', placeholder: '模糊搜索期货合约' },
+    ]
+
+    return {
+      inputList,
+      buttonList,
+    }
+  },
+})
+</script>

src/views/business/exposure/list/futures/index.vue

@@ -5,11 +5,11 @@
       <filterCustomTable @search="updateColumn"></filterCustomTable>
     </template>
     <template #default="{ scroll }">
-      <a-table :columns="getColumns()" class="srcollYTable" :scroll="scroll" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :pagination="false" :rowKey="(record,index)=>index" :data-source="tableList"></a-table>
+      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :pagination="false" :rowKey="(record,index)=>index" :data-source="tableList"></a-table>
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <mtp-table-detail :columns="getColumnsDetail()" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab">
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab">
     <!-- 买卖方向 -->
     <template #buyorsell="{ record }">
       <span>{{ getBuyOrSellName(record.buyorsell) }}</span>
@@ -24,7 +24,7 @@
 <script lang="ts">
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { defineComponent, watch, ref } from 'vue';
-import filterCustomTable from '../../components/filterTable/index.vue';
+import filterCustomTable from './filter.vue';
 import { QueryExposureHedgePositionDetail, QueryExposureHedgePosition } from '@/services/go/ermcp/exposure/index';
 import { ErmcpHedgePosition } from '@/services/go/ermcp/exposure/interface';
 import { queryTableList } from '@/common/setup/table';
@@ -34,7 +34,7 @@ import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { getBuyOrSellName, getChannelBuildName } from '@/common/constants/enumsName';
 import { getTableButton } from '@/common/setup/table/button';
-import { getColumns, getColumnsDetail } from './setup';
+import { useColumn } from './setup';
 import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 import moment from 'moment';
 
@@ -62,7 +62,6 @@ export default defineComponent({
       menuType: EnumRouterName.exposure_futures, // 当前tab页对应的code
     };
     const {
-      updateColumn, //  表头数据
       registerColumnDetail,
       detailTableList, // 明细表头数据
       expandedRowKeys,
@@ -102,7 +101,7 @@ export default defineComponent({
         changeTab(tabIndex.value);
       }
     })
-    return { loading, tableList, visible, changeTab, updateColumn, getColumns, getColumnsDetail, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, getBuyOrSellName, getChannelBuildName };
+    return { ...useColumn(), loading, tableList, visible, changeTab, detailTableList, expandedRowKeys, selectedRow, Rowclick, tabList, getBuyOrSellName, getChannelBuildName };
   },
 });
 </script>

src/views/business/exposure/list/futures/setup.ts

@@ -1,10 +1,13 @@
+import { ref } from 'vue'
 import { ErmcpHedgePosition, ErmcpHedgePositionDetail } from '@/services/go/ermcp/exposure/interface';
+import { ColumnType } from '@/common/methods/table';
+import { FilterColumn } from '@/common/components/filter/interface';
 
 /**
  * 表头对应字段
  */
-export function getColumns() {
-    const columns = [
+function getColumns() {
+    const columns: ColumnType[] = [
         {
             title: '期货合约/代码',
             key: 'goodsid',
@@ -46,7 +49,7 @@ export function getColumns() {
 /**
  * 明细表头对应字段
  */
-export function getColumnsDetail() {
+function getColumnsDetail() {
     const columns = [
         {
             title: '期货合约/代码',
@@ -85,4 +88,27 @@ export function getColumnsDetail() {
             ...el
         }
     })
+}
+
+export function useColumn() {
+    const columns = ref(getColumns());
+    const columnsDetail = ref(getColumnsDetail());
+
+    const updateColumn = (filters: FilterColumn[]) => {
+        columns.value.forEach((item) => {
+            const f = filters.find((e) => e.key === item.key);
+            if (f) {
+                item.filteredValue = f.filteredValue;
+                item.onFilter = f.onFilter;
+            } else {
+                item.filteredValue = [];
+            }
+        })
+    }
+
+    return {
+        columns,
+        columnsDetail,
+        updateColumn,
+    }
 }

src/views/business/exposure/list/realTime/filter.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="filterTable">
+    <FilterOption :inputList="inputList" :buttonList="buttonList" />
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ErmcpRealExposureModel } from '@/services/go/ermcp/exposure/interface';
+import { useFilter } from '@/common/components/filter/setup';
+import FilterOption from '@/common/components/filter/index.vue';
+
+export default defineComponent({
+  name: 'sell-filter-table',
+  components: {
+    FilterOption
+  },
+  setup(props, context) {
+    const { inputList, buttonList } = useFilter<ErmcpRealExposureModel>(context);
+
+    inputList.value = [
+      { keys: ['MiddleGoodsName'], value: '', placeholder: '模糊搜索套保品种' },
+    ]
+
+    return {
+      inputList,
+      buttonList,
+    }
+  },
+})
+</script>

src/views/business/exposure/list/realTime/index.vue

@@ -43,7 +43,7 @@
 <script lang="ts">
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { defineComponent, onUnmounted, ref, watch } from 'vue';
-import filterCustomTable from '../../components/filterTable/index.vue';
+import filterCustomTable from './filter.vue';
 import { QueryActualExposure, QueryActualExposureDetail, QueryAutualExposurePosition } from '@/services/go/ermcp/exposure/index';
 import { ErmcpRealExposureModel } from '@/services/go/ermcp/exposure/interface';
 import { queryTableList } from '@/common/setup/table';

src/views/business/exposure/list/spot/filter.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="filterTable">
+    <FilterOption :inputList="inputList" :buttonList="buttonList" />
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { Ermcp3AreaSpot } from '@/services/go/ermcp/exposure/interface';
+import { useFilter } from '@/common/components/filter/setup';
+import FilterOption from '@/common/components/filter/index.vue';
+
+export default defineComponent({
+  name: 'sell-filter-table',
+  components: {
+    FilterOption
+  },
+  setup(props, context) {
+    const { inputList, buttonList } = useFilter<Ermcp3AreaSpot>(context);
+
+    inputList.value = [
+      { keys: ['wrstandardname'], value: '', placeholder: '模糊搜索现货商品' },
+    ]
+
+    return {
+      inputList,
+      buttonList,
+    }
+  },
+})
+</script>

src/views/business/exposure/list/spot/index.vue

@@ -5,11 +5,11 @@
       <filterCustomTable @search="updateColumn"> </filterCustomTable>
     </template>
     <template #default="{ scroll }">
-      <a-table :columns="getColumns()" class="srcollYTable" :scroll="scroll" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :pagination="false" :rowKey="(record,index)=>index" :data-source="tableList"></a-table>
+      <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :pagination="false" :rowKey="(record,index)=>index" :data-source="tableList"></a-table>
     </template>
   </mtp-table-scroll>
   <!-- 明细 -->
-  <mtp-table-detail :columns="getColumnsDetail()" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab">
+  <mtp-table-detail :columns="columnsDetail" :data-source="detailTableList" :tabs="tabList" v-model:visible="visible" @change="changeTab">
     <!-- 类型 -->
     <template #logtype="{ record }">
       <span>{{ getLogType(record.logtype) }}</span>
@@ -20,7 +20,7 @@
 <script lang="ts">
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { defineComponent, ref, watch } from 'vue';
-import filterCustomTable from '../../components/filterTable/index.vue';
+import filterCustomTable from './filter.vue';
 import { QuerySpotPosition, QuerySpotPositionDetail } from '@/services/go/ermcp/exposure/index';
 import { Ermcp3AreaSpot } from '@/services/go/ermcp/exposure/interface';
 import { ComposeTableDetailParam, handleComposeTable_detail } from '@/common/setup/table/compose';
@@ -29,7 +29,7 @@ import { queryResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
 import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { getLogType } from '@/common/constants/enumsName';
 import { getTableButton } from '@/common/setup/table/button';
-import { getColumns, getColumnsDetail } from './setup';
+import { useColumn } from './setup';
 import MtpTableDetail from '@/common/components/tableDetail/index.vue';
 
 export default defineComponent({
@@ -56,7 +56,6 @@ export default defineComponent({
       menuType: EnumRouterName.exposure_spot, // 当前tab页对应的code
     };
     const {
-      updateColumn, //  表头数据
       registerColumnDetail,
       detailTableList, // 明细表头数据
       expandedRowKeys,
@@ -96,19 +95,17 @@ export default defineComponent({
       }
     })
     return {
+      ...useColumn(),
       loading,
       tableList,
       visible,
       changeTab,
-      updateColumn,
       detailTableList,
       expandedRowKeys,
       selectedRow,
       Rowclick,
       tabList,
       getLogType,
-      getColumns,
-      getColumnsDetail,
     };
   },
 });

src/views/business/exposure/list/spot/setup.ts

@@ -1,11 +1,14 @@
+import { ref } from 'vue'
 import { Ermcp3AreaSpot, Ermcp3AreaSpotDetail } from '@/services/go/ermcp/exposure/interface';
 import { getContractTypeName } from '@/common/constants/enumsName';
+import { ColumnType } from '@/common/methods/table';
+import { FilterColumn } from '@/common/components/filter/interface';
 
 /**
  * 表头对应字段
  */
-export function getColumns() {
-    const columns = [
+function getColumns() {
+    const columns: ColumnType[] = [
         {
             title: '现货商品',
             key: 'wrstandardname',
@@ -45,7 +48,7 @@ export function getColumns() {
 /**
  * 明细表头对应字段
  */
-export function getColumnsDetail() {
+function getColumnsDetail() {
     const columns = [
         {
             title: '合同(计划)编号',
@@ -79,4 +82,27 @@ export function getColumnsDetail() {
             ...el
         }
     })
+}
+
+export function useColumn() {
+    const columns = ref(getColumns());
+    const columnsDetail = ref(getColumnsDetail());
+
+    const updateColumn = (filters: FilterColumn[]) => {
+        columns.value.forEach((item) => {
+            const f = filters.find((e) => e.key === item.key);
+            if (f) {
+                item.filteredValue = f.filteredValue;
+                item.onFilter = f.onFilter;
+            } else {
+                item.filteredValue = [];
+            }
+        })
+    }
+
+    return {
+        columns,
+        columnsDetail,
+        updateColumn,
+    }
 }

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

@@ -1,16 +1,16 @@
 <template>
   <!-- 过滤客户资料表格 -->
   <div class="filterTable">
-    <FilterOption :selectList="selectList" :inputList="inputList" :fixedBtnList="fixedBtnList" />
+    <FilterOption :selectList="selectList" :inputList="inputList" :buttonList="buttonList" />
     <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 { useRoute } from 'vue-router';
+import { Ermcp3HedgePlan } from '@/services/go/ermcp/plan/interface';
+import { useFilter } from '@/common/components/filter/setup';
+import FilterOption from '@/common/components/filter/index.vue';
 
 export default defineComponent({
   name: 'filter-plan-table',
@@ -18,44 +18,31 @@ export default defineComponent({
     FilterOption
   },
   setup(props, context) {
-    const { name: routeName } = useRoute();
+    const { selectList, inputList, buttonList, search } = useFilter<Ermcp3HedgePlan>(context);
 
-    const select: SelectList[] = [
+    selectList.value = [
       {
-        value: undefined,
         key: 'contracttype',
-        placeholder: '全部计划类型',
-        list: [
-          { value: 1, lable: '采购' },
-          { value: -1, lable: '销售' },
+        selectedValue: 0,
+        options: [
+          { label: '全部计划类型', value: 0 },
+          { label: '采购', value: 1 },
+          { label: '销售', value: -1 }
         ],
+        onChange: search
       },
-    ];
-
-    const input: InputList[] = [
-      { value: '', placeholder: '模糊搜索计划', key: 'hedgeplanno' },
-      { value: '', placeholder: '模糊搜索现货品种', key: 'deliverygoodsname' },
-    ];
+    ]
 
-    if (routeName === 'plan_performance') {
-      select.push({
-        value: undefined,
-        key: 'hedgeplanstatus',
-        placeholder: '全部状态',
-        list: [
-          { value: 1, lable: '待审核' },
-          { value: 2, lable: '执行中' },
-          { value: 3, lable: '正常完结' },
-          { value: 4, lable: '审核拒绝' },
-          { value: 5, lable: '异常完结' },
-          { value: 6, lable: '已撤回' },
-        ],
-      })
-    }
+    inputList.value = [
+      { keys: ['hedgeplanno'], value: '', placeholder: '模糊搜索计划' },
+      { keys: ['wrstandardname'], value: '', placeholder: '模糊搜索商品' }
+    ]
 
     return {
-      ...handleFilter(select, input, context),
-    };
+      selectList,
+      inputList,
+      buttonList,
+    }
   },
-});
+})
 </script>

src/views/business/search/plan/components/filter/index.vue

@@ -1,36 +1,47 @@
 <template>
-    <div class="filterTable">
-        <FilterOption :selectList="selectList" :inputList="inputList" :fixedBtnList="fixedBtnList" />
-        <slot></slot>
-    </div>
+  <div class="filterTable">
+    <FilterOption :selectList="selectList" :inputList="inputList" :buttonList="buttonList" />
+    <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 { Ermcp3HedgePlan } from '@/services/go/ermcp/plan/interface';
+import { useFilter } from '@/common/components/filter/setup';
+import FilterOption from '@/common/components/filter/index.vue';
+
 export default defineComponent({
-    name: 'filter-spot-contract-search',
-    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 {
-            ...handleFilter(select, input, context),
-        };
-    },
-});
+  name: 'filter-spot-contract-search',
+  components: {
+    FilterOption
+  },
+  setup(props, context) {
+    const { selectList, inputList, buttonList, search } = useFilter<Ermcp3HedgePlan>(context);
+
+    selectList.value = [
+      {
+        key: 'contracttype',
+        selectedValue: 0,
+        options: [
+          { label: '全部计划类型', value: 0 },
+          { label: '采购', value: 1 },
+          { label: '销售', value: -1 }
+        ],
+        onChange: search
+      },
+    ]
+
+    inputList.value = [
+      { keys: ['hedgeplanno'], value: '', placeholder: '模糊搜索计划' },
+      { keys: ['wrstandardname'], value: '', placeholder: '模糊搜索商品' },
+    ]
+
+    return {
+      selectList,
+      inputList,
+      buttonList,
+    }
+  },
+})
 </script>

src/views/business/search/plan/index.vue

@@ -5,7 +5,7 @@
       <filterCustomTable @search="updateColumn"></filterCustomTable>
     </template>
     <template #default="{ scroll }">
-      <a-table :columns="getColumns()" class="srcollYTable" :pagination="false" :rowKey="(record,index)=>index" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :data-source="tableList" :scroll="scroll">
+      <a-table :columns="columns" class="srcollYTable" :pagination="false" :rowKey="(record,index)=>index" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :data-source="tableList" :scroll="scroll">
         <template #index="{ index }">
           <span>{{ index + 1 }}</span>
         </template>
@@ -20,10 +20,9 @@ import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { queryTableList, MtpTableButton, defineComponent, handleComposeTable, ComposeTableParam } from '@/common/export/commonTable';
 import filterCustomTable from './components/filter/index.vue';
 import { formatTime, formatValue } from '@/common/methods';
-import { getColumns } from './setup';
+import { useColumn } from './setup';
 import { Ermcp3HedgePlan } from '@/services/go/ermcp/plan/interface';
 import { QueryHedgePlan } from '@/services/go/ermcp/plan';
-import { EnumRouterName } from '@/common/constants/enumRouterName';
 import moment from 'moment';
 
 export default defineComponent({
@@ -57,12 +56,12 @@ export default defineComponent({
 
     return {
       ...handleComposeTable<Ermcp3HedgePlan>(param),
+      ...useColumn(),
       loading,
       tableList,
       queryTable,
       formatTime,
       formatValue,
-      getColumns,
     };
   },
 });

src/views/business/search/plan/setup.ts

@@ -1,7 +1,10 @@
+import { ref } from 'vue'
 import { getPlanContractType, getPlanStatusName } from '@/views/business/plan/setup';
+import { ColumnType } from '@/common/methods/table';
+import { FilterColumn } from '@/common/components/filter/interface';
 
-export function getColumns() {
-    const columns = [
+function getColumns() {
+    const columns: ColumnType[] = [
         {
             title: '计划名称',
             key: 'hedgeplanno',
@@ -42,4 +45,25 @@ export function getColumns() {
             ...el
         }
     })
+}
+
+export function useColumn() {
+    const columns = ref(getColumns());
+
+    const updateColumn = (filters: FilterColumn[]) => {
+        columns.value.forEach((item) => {
+            const f = filters.find((e) => e.key === item.key);
+            if (f) {
+                item.filteredValue = f.filteredValue;
+                item.onFilter = f.onFilter;
+            } else {
+                item.filteredValue = [];
+            }
+        })
+    }
+
+    return {
+        columns,
+        updateColumn,
+    }
 }

src/views/business/search/spot/components/filter/index.vue

@@ -1,37 +1,48 @@
 <template>
-    <div class="filterTable">
-        <FilterOption :selectList="selectList" :inputList="inputList" :fixedBtnList="fixedBtnList" />
-        <slot></slot>
-    </div>
+  <div class="filterTable">
+    <FilterOption :selectList="selectList" :inputList="inputList" :buttonList="buttonList" />
+    <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 { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
+import { useFilter } from '@/common/components/filter/setup';
+import FilterOption from '@/common/components/filter/index.vue';
+
 export default defineComponent({
-    name: 'filter-spot-contract-search',
-    components: { FilterOption },
-    setup(props, context) {
-        const select: SelectList[] = [
-            {
-                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 {
-            ...handleFilter(select, input, context),
-        };
-    },
-});
+  name: 'filter-spot-contract-search',
+  components: {
+    FilterOption
+  },
+  setup(props, context) {
+    const { selectList, inputList, buttonList, search } = useFilter<Ermcp3ContractRsp>(context);
+
+    selectList.value = [
+      {
+        key: 'pricetype',
+        selectedValue: 0,
+        options: [
+          { label: '全部定价类型', value: 0 },
+          { label: '一口价', value: 1 },
+          { label: '点价', value: 2 },
+          { label: '暂定价', value: 3 }
+        ],
+        onChange: search
+      },
+    ]
+
+    inputList.value = [
+      { keys: ['contractno'], value: '', placeholder: '模糊搜索合同编号' },
+      { keys: ['sellusername', 'buyusername'], alias: 'negative', value: '', placeholder: '模糊搜索对手方' },
+    ]
+
+    return {
+      selectList,
+      inputList,
+      buttonList,
+    }
+  },
+})
 </script>

src/views/business/search/spot/index.vue

@@ -5,7 +5,7 @@
       <filterCustomTable @search="updateColumn"></filterCustomTable>
     </template>
     <template #default="{ scroll }">
-      <a-table :columns="getColumns()" class="srcollYTable" :pagination="false" :rowKey="(record,index)=>index" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :data-source="tableList" :scroll="scroll">
+      <a-table :columns="columns" class="srcollYTable" :pagination="false" :rowKey="(record,index)=>index" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :data-source="tableList" :scroll="scroll">
         <template #expandedRowRender="{ record }">
           <mtp-table-button class="btn-list-sticky" :buttons="buttons" :record="record" @click="openComponent" />
         </template>
@@ -22,10 +22,9 @@ import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { queryTableList, MtpTableButton, contextMenu, defineComponent, defineAsyncComponent, handleComposeTable, ComposeTableParam } from '@/common/export/commonTable';
 import filterCustomTable from './components/filter/index.vue';
 import { formatTime, formatValue } from '@/common/methods';
-import { getColumns } from './setup';
+import { useColumn } from './setup';
 import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
 import { QuerySpotContract } from '@/services/go/ermcp/spot-contract';
-import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { getTableButton } from '@/common/setup/table/button';
 import { useRoute } from 'vue-router';
 import moment from 'moment';
@@ -80,13 +79,13 @@ export default defineComponent({
 
     return {
       ...handleComposeTable<Ermcp3ContractRsp>(param),
+      ...useColumn(),
       loading,
       tableList,
       buttons,
       queryTable,
       formatTime,
       formatValue,
-      getColumns,
     };
   },
 });

src/views/business/search/spot/setup.ts

@@ -1,9 +1,12 @@
+import { ref } from 'vue'
 import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
 import { getBizTypeName, getContractStatusName, getPriceTypeName } from '@/common/constants/enumsName';
 import { formatTime, formatValue } from '@/common/methods';
+import { ColumnType } from '@/common/methods/table';
+import { FilterColumn } from '@/common/components/filter/interface';
 
-export function getColumns() {
-    const columns = [
+function getColumns() {
+    const columns: ColumnType[] = [
         {
             title: '合同编号',
             key: 'contractno',
@@ -11,7 +14,7 @@ export function getColumns() {
         },
         {
             title: '对手方',
-            key: 'username',
+            key: 'negative',
             customRender: ({ record }: { record: Ermcp3ContractRsp }) => {
                 // 根据合同类型显示对手方
                 if (record.contracttype === 1) {
@@ -104,4 +107,25 @@ export function getColumns() {
             ...el
         }
     })
+}
+
+export function useColumn() {
+    const columns = ref(getColumns());
+
+    const updateColumn = (filters: FilterColumn[]) => {
+        columns.value.forEach((item) => {
+            const f = filters.find((e) => e.key === item.key);
+            if (f) {
+                item.filteredValue = f.filteredValue;
+                item.onFilter = f.onFilter;
+            } else {
+                item.filteredValue = [];
+            }
+        })
+    }
+
+    return {
+        columns,
+        updateColumn,
+    }
 }

src/views/business/spotmarket/components/filter/index.vue

@@ -1,64 +1,102 @@
 <template>
-  <!-- 过滤客户资料表格 -->
   <div class="filterTable">
-    <FilterOption :selectList="selectList" :fixedBtnList="fixedBtnList" />
+    <FilterOption :selectList="selectList" />
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import FilterOption from '@/common/components/filter/index.vue';
-import { defineComponent, reactive } from 'vue';
-import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
+import { defineComponent } from 'vue';
 import { initData } from '@/common/export/table';
-import { ErmcpDeliveryGoodsDetailEx } from '@/services/go/ermcp/goodsInfo/interface';
-import APP from '@/services';
+import { Ermcp3SpotGoodsPrice } from '@/services/go/ermcp/qhj/interface';
+import { GetDeliveryGoodsDetail } from "@/services/go/ermcp/goodsInfo";
+import { Ermcp3DeliveryGoodsDetail } from '@/services/go/ermcp/goodsInfo/interface/deliverygoodsdetail'
+import { useFilter } from '@/common/components/filter/setup';
+import FilterOption from '@/common/components/filter/index.vue';
 
 export default defineComponent({
-    name: 'spotmarket_price-filter-table',
-    components: { FilterOption },
-    setup(props, context) {
-        const select = reactive<SelectList[]>([
-            {
-                value: undefined,
-                key: 'deliverygoodsid',
-                placeholder: '全部现货品种',
-                list: [],
-            },
-            {
-                value: undefined,
-                key: 'wrstandardid',
-                placeholder: '全部商品',
-                list: [],
-            },
-            {
-                value: undefined,
-                key: 'brandid',
-                placeholder: '全部品牌',
-                list: [],
-            },
-        ]);
-        const input: InputList[] = [];
+  name: 'spotmarket_price-filter-table',
+  components: {
+    FilterOption
+  },
+  setup(props, context) {
+    // 现货品种列表
+    const deliveryGoodsList: Ermcp3DeliveryGoodsDetail[] = [];
+    const { selectList, search } = useFilter<Ermcp3SpotGoodsPrice>(context);
+
+    selectList.value = [
+      {
+        key: 'deliverygoodsid',
+        alias: 'deliverygoodsname',
+        selectedValue: 0,
+        options: [
+          { label: '全部现货品种', value: 0 },
+        ],
+        onChange: (value: string | number) => {
+          selectList.value[1].selectedValue = 0;
+          selectList.value[1].options = [{ label: '全部商品', value: 0 }];
 
-        initData(() => {
-            const goodsList: ErmcpDeliveryGoodsDetailEx[] = APP.get('DeliveryGoodsList');
-            goodsList.forEach((el) => {
-                select[0].list.push({
-                    value: el.data.deliverygoodsid,
-                    lable: el.data.deliverygoodsname,
-                });
+          selectList.value[2].selectedValue = '';
+          selectList.value[2].options = [{ label: '全部品牌', value: '' }];
 
-                const gm = el.gmlist.map((item) => ({ value: item.wrstandardid, lable: item.wrstandardname }));
-                select[1].list.push(...gm);
+          deliveryGoodsList.forEach((item) => {
+            if (item.deliverygoodsid === value) {
+              // 商品列表
+              item.wdlst.forEach((e) => {
+                selectList.value[1].options.push({
+                  label: e.wrstandardname,
+                  value: e.wrstandardid,
+                })
+              })
+              // 品牌列表
+              item.bdlst.forEach((e) => {
+                if (e.isvalid) {
+                  selectList.value[2].options.push({
+                    label: e.brandname,
+                    value: e.brandname,
+                  })
+                }
+              })
+            }
+          })
+          search();
+        },
+      },
+      {
+        key: 'wrstandardid',
+        alias: 'wrstandardname',
+        selectedValue: 0,
+        options: [
+          { label: '全部商品', value: 0 },
+        ],
+        onChange: search,
+      },
+      {
+        key: 'brandname',
+        selectedValue: '',
+        options: [
+          { label: '全部品牌', value: '' },
+        ],
+        onChange: search,
+      },
+    ]
 
-                const gb = el.gblist.map((item) => ({ value: item.brandid, lable: item.brandname }));
-                select[2].list.push(...gb);
-            });
-        });
+    // 数据初始化
+    initData(() => {
+      GetDeliveryGoodsDetail().then((res) => {
+        deliveryGoodsList.push(...res.filter((item) => item.isvalid));
+        deliveryGoodsList.forEach((item) => {
+          selectList.value[0].options.push({
+            label: item.deliverygoodsname,
+            value: item.deliverygoodsid
+          })
+        })
+      })
+    })
 
-        return {
-            ...handleFilter(select, input, context),
-        };
-    },
+    return {
+      selectList,
+    }
+  }
 });
 </script>

src/views/business/spotmarket/list/price/index.vue

@@ -21,11 +21,10 @@
 <script lang="ts">
 import MtpTableScroll from '@/common/components/tableScroll/index.vue';
 import { queryTableList, MtpTableButton, contextMenu, defineAsyncComponent, defineComponent, handleComposeTable, ComposeTableParam } from '@/common/export/commonTable';
-import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { Ermcp3SpotGoodsPrice } from '@/services/go/ermcp/qhj/interface';
 import { querySpotGoodsPrice } from '@/services/go/ermcp/qhj';
 import { getTableButton } from '@/common/setup/table/button';
-import { columns } from './setup';
+import { useColumn } from './setup';
 import MtpTableFilter from '../../components/filter/index.vue';
 
 export default defineComponent({
@@ -56,11 +55,11 @@ export default defineComponent({
 
     return {
       ...handleComposeTable<Ermcp3SpotGoodsPrice>(param),
+      ...useColumn(),
       loading,
       tableList,
       queryTable,
       buttons,
-      columns,
     };
   },
 });

src/views/business/spotmarket/list/price/setup.ts

@@ -1,39 +1,58 @@
+import { ref } from 'vue'
 import { Ermcp3SpotGoodsPrice } from '@/services/go/ermcp/qhj/interface';
 import { ColumnType } from '@/common/methods/table';
+import { FilterColumn } from '@/common/components/filter/interface';
 
-/**
- * 表头对应字段
- */
-export const columns: ColumnType[] = [
-    {
-        title: '现货品种',
-        dataIndex: 'deliverygoodsname',
-        key: 'deliverygoodsname',
-        align: 'center',
-        width: 120,
-    },
-    {
-        title: '商品',
-        dataIndex: 'wrstandardname',
-        key: 'wrstandardname',
-        align: 'center',
-        width: 120,
-    },
-    {
-        title: '品牌',
-        dataIndex: 'brandname',
-        key: 'brandname',
-        align: 'center',
-        width: 120,
-    },
-    {
-        title: '价格',
-        dataIndex: 'spotgoodsprice',
-        key: 'spotgoodsprice',
-        align: 'center',
-        width: 120,
-        customRender: ({ text, record }: { text: Number, record: Ermcp3SpotGoodsPrice }) => {
-            return `${text + record.currencyname}/${record.gbenumdicname}`;
+function getColumns() {
+    const columns: ColumnType[] = [
+        {
+            title: '现货品种',
+            key: 'deliverygoodsname',
+        },
+        {
+            title: '商品',
+            key: 'wrstandardname'
+        },
+        {
+            title: '品牌',
+            key: 'brandname',
+        },
+        {
+            title: '价格',
+            key: 'spotgoodsprice',
+            customRender: ({ text, record }: { text: Number, record: Ermcp3SpotGoodsPrice }) => {
+                return `${text} ${record.currencyname}/${record.gbenumdicname}`;
+            }
+        },
+    ];
+
+    return columns.map(el => {
+        return {
+            dataIndex: el.key,
+            width: 100,
+            align: 'center',
+            ...el
         }
-    },
-];
+    })
+}
+
+export function useColumn() {
+    const columns = ref(getColumns());
+
+    const updateColumn = (filters: FilterColumn[]) => {
+        columns.value.forEach((item) => {
+            const f = filters.find((e) => e.key === item.key);
+            if (f) {
+                item.filteredValue = f.filteredValue;
+                item.onFilter = f.onFilter;
+            } else {
+                item.filteredValue = [];
+            }
+        })
+    }
+
+    return {
+        columns,
+        updateColumn,
+    }
+}

src/views/information/custom/compoments/filterTable/index.vue

@@ -14,7 +14,9 @@ import FilterOption from '@/common/components/filter/index.vue';
 
 export default defineComponent({
   name: 'filter-custom-table',
-  components: { FilterOption },
+  components: {
+    FilterOption
+  },
   setup(props, context) {
     const { selectList, inputList, buttonList, search } = useFilter<QhjCustomer>(context);
 
@@ -41,7 +43,7 @@ export default defineComponent({
       selectList,
       inputList,
       buttonList,
-    };
+    }
   },
-});
+})
 </script>

src/views/information/goods/list/hedging-variety/setup.ts

@@ -8,35 +8,16 @@ import { getInitMenuData } from '../../setup';
 
 export function initMG(): Ermcp3MiddleGoodsDetail {
     return {
-        areauserid:0, //机构用户ID
-        enumdicname:'',//单位名称
-        goodsunitid:0,//套保品种单位id
-        gplst:[],//期货品种列表
-        middlegoodscode:'',//套保品种代码
-        middlegoodsid:0,//套保品种ID(SEQ_ERMS_MIDDLEGOODS)
-        middlegoodsnam:'',//套保品种名称
-        needarbitrageratio:0,//套利比率
-        needhedgeratio:0,//套保比率
-        wdlst:[],//商品信息列表(现货品类)
-        mg:{
-            areauserid: 0,//机构用户ID
-            createtime: '',//修改时间
-            enumdicname: '',//单位名称
-            evaluateratio: 0,//估价系数
-            goodsgroupid: 0,//关联期货品种ID
-            goodsunitid: 0,//单位ID
-            isvalid: 0,//状态 number;
-            //-无效(停用) 1-有效(正常)
-            middlegoodscode: '',//套保品种代码
-            middlegoodsid: 0,//套保品种ID(SEQ_ERMS_MIDDLEGOODS)
-            middlegoodsname: '',//套保品种名称
-            modifytime: '',//修改时间
-            needhedgeratio: 0,//套保比率
-            qtydecimalplace: 0,//数量小数位
-            relatedgoodsid: 0,//关联交易商品ID
-            relatedgoodstype: 0,//关联商品类型 - 1:期货合约 2:现货品种
-            remark: ''//备注
-            }
+        areauserid: 0, //机构用户ID
+        enumdicname: '',//单位名称
+        goodsunitid: 0,//套保品种单位id
+        GPLST: [],//期货品种列表
+        middlegoodscode: '',//套保品种代码
+        middlegoodsid: 0,//套保品种ID(SEQ_ERMS_MIDDLEGOODS)
+        middlegoodsname: '',//套保品种名称
+        needarbitrageratio: 0,//套利比率
+        needhedgeratio: 0,//套保比率
+        WDLST: [],//商品信息列表(现货品类)
     }
 }
 
@@ -75,19 +56,13 @@ export function handleMG() {
             }
         });
         MGList.value.forEach(e => {
-            const { isvalid, middlegoodsname, middlegoodsid } = e.mg
-            const normal = 'goods_info_hedge_normal', disable = 'goods_info_hedge_disable';
+            const { middlegoodsname, middlegoodsid } = e
+            const normal = 'goods_info_hedge_normal';
             const result = { key: middlegoodsid.toString(), title: middlegoodsname }
-            if (isvalid) { //1-有效(正常)
-                if (menuMap.has(normal)) {
-                    const index = menuMap.get(normal) as number;
-                    menuList.value[index].children?.push(result)
-                }
-            } else {    // 0:无效(停用)
-                if (menuMap.has(disable)) {
-                    const index = menuMap.get(disable) as number;
-                    menuList.value[index].children?.push(result)
-                }
+
+            if (menuMap.has(normal)) {
+                const index = menuMap.get(normal) as number;
+                menuList.value[index].children?.push(result)
             }
         })
     }
@@ -106,7 +81,7 @@ export function handleMG() {
     // 选择某条现货数据
     function chooseDG({ key, is }: Value) {
         isNormal.value = is
-        const obj = MGList.value.find(e => e.mg.middlegoodsid === Number(key))
+        const obj = MGList.value.find(e => e.middlegoodsid === Number(key))
         if (obj) {
             mergeObj(selctedMG, obj)
         }
@@ -117,7 +92,7 @@ export function handleMG() {
     function updateDG(param?: number) {
         getMG(param).then(() => {
             classfiyMG()
-            const findResult = MGList.value.find(e => e.mg.middlegoodsid === selctedMG.mg.middlegoodsid)
+            const findResult = MGList.value.find(e => e.middlegoodsid === selctedMG.middlegoodsid)
             findResult && mergeObj(selctedMG, findResult)
         })
     }

src/views/information/spot-contract/components/filterTable/index.vue

@@ -8,6 +8,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { useRoute } from 'vue-router';
 import { Ermcp3ContractRsp } from '@/services/go/ermcp/spot-contract/interface';
 import { useFilter } from '@/common/components/filter/setup';
 import FilterOption from '@/common/components/filter/index.vue';
@@ -17,20 +18,11 @@ export default defineComponent({
     FilterOption
   },
   setup(props, context) {
+    const { name: routeName } = useRoute();
     const { selectList, inputList, buttonList, search } = useFilter<Ermcp3ContractRsp>(context);
 
     selectList.value = [
       {
-        key: 'contracttype',
-        selectedValue: 0,
-        options: [
-          { label: '全部合同类型', value: 0 },
-          { label: '采购', value: 1 },
-          { label: '销售', value: -1 }
-        ],
-        onChange: search
-      },
-      {
         key: 'pricetype',
         selectedValue: 0,
         options: [
@@ -43,6 +35,21 @@ export default defineComponent({
       },
     ]
 
+    if (routeName === 'contract_checkpending' || routeName === 'contract_performance') {
+      selectList.value.unshift(
+        {
+          key: 'contracttype',
+          selectedValue: 0,
+          options: [
+            { label: '全部合同类型', value: 0 },
+            { label: '采购', value: 1 },
+            { label: '销售', value: -1 }
+          ],
+          onChange: search
+        }
+      )
+    }
+
     inputList.value = [
       { keys: ['contractno'], value: '', placeholder: '模糊搜索合同编号' },
       { keys: ['sellnickname', 'buynickname'], alias: 'negative', value: '', placeholder: '模糊搜索对手方' },

src/views/manage/business-review/components/filterTable/index.vue

@@ -1,38 +1,48 @@
 <template>
-  <!-- 过滤客户资料表格 -->
   <div class="filterTable">
-    <FilterOption :selectList="selectList" :inputList="inputList" :fixedBtnList="fixedBtnList" />
+    <FilterOption :selectList="selectList" :inputList="inputList" :buttonList="buttonList" />
     <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 { QryBusinessDjRsp } from '@/services/go/ermcp/business-review/interface';
+import { useFilter } from '@/common/components/filter/setup';
+import FilterOption from '@/common/components/filter/index.vue';
+
 export default defineComponent({
   name: 'business-review-filter-table',
-  components: { FilterOption },
+  components: {
+    FilterOption
+  },
   setup(props, context) {
-    const select: SelectList[] = [
+    const { selectList, inputList, buttonList, search } = useFilter<QryBusinessDjRsp>(context);
+
+    selectList.value = [
       {
-        value: undefined,
         key: 'contracttype',
-        placeholder: '全部合同类型',
-        list: [
-          { value: 1, lable: '采购' },
-          { value: -1, lable: '销售' },
+        selectedValue: 0,
+        options: [
+          { label: '全部合同类型', value: 0 },
+          { label: '采购', value: 1 },
+          { label: '销售', value: -1 }
         ],
+        onChange: search
       },
-    ];
-    const input: InputList[] = [
-      { value: '', placeholder: '模糊搜索对手方', key: 'buyusernameOrsellusername' },
-      { value: '', placeholder: '模糊搜索合同编号', key: 'contractno' },
-      { value: '', placeholder: '模糊搜索现货品种', key: 'deliverygoodsname' },
-    ];
+    ]
+
+    inputList.value = [
+      { keys: ['buyusername', 'sellusername'], alias: 'buyusernameOrsellusername', value: '', placeholder: '模糊搜索对手方' },
+      { keys: ['contractno'], value: '', placeholder: '模糊搜索合同编号' },
+      { keys: ['goodsname'], value: '', placeholder: '模糊搜索商品' },
+    ]
+
     return {
-      ...handleFilter(select, input, context),
-    };
+      selectList,
+      inputList,
+      buttonList,
+    }
   },
-});
+})
 </script>

src/views/manage/business-review/components/settlementAudit/index.vue

@@ -2,7 +2,7 @@
   <!-- 交收审核-->
   <a-modal class="add-custom custom-detail" title="交收审核" v-model:visible="visible" centered :maskClosable="false" @cancel="cancel" width="890px">
     <template #footer>
-      <a-button type="primary" :loading="loading" @click="submit">关闭</a-button>
+      <a-button type="primary" :loading="loading" @click="cancel">关闭</a-button>
       <a-button v-if="isShowContractCheck(selectedRow.applystatus)" type="primary" :loading="loading" @click="pass">审核通过
       </a-button>
       <a-button v-if="isShowContractCheck(selectedRow.applystatus)" type="primary" :loading="loading" @click="refuse">审核拒绝

src/views/manage/business-review/components/settlementCancel/index.vue

@@ -2,12 +2,12 @@
   <!-- 撤销交收登记-->
   <a-modal class="add-custom custom-detail" title="撤销交收登记" v-model:visible="visible" centered :maskClosable="false" @cancel="cancel" width="890px">
     <template #footer>
-      <a-button key="submit" type="primary" :loading="loading" @click="submit">关闭
+      <a-button type="primary" :loading="loading" @click="cancel">关闭
       </a-button>
-      <a-button key="submit" type="primary" :loading="loading" @click="back">撤销
+      <a-button type="primary" :loading="loading" @click="back">撤销
       </a-button>
     </template>
-    <a-form class="inlineForm" :form="form" @submit="handleSearch">
+    <a-form class="inlineForm">
       <fieldset class="formFieldSet">
         <legend>合同基本信息</legend>
         <a-row :gutter="24">

src/views/manage/business-review/components/settlementDetail/index.vue

@@ -2,7 +2,7 @@
   <!-- 交收记录详情-->
   <a-modal class="add-custom custom-detail" title="交收记录详情" v-model:visible="visible" centered :maskClosable="false" @cancel="cancel" width="890px">
     <template #footer>
-      <a-button key="submit" type="primary" :loading="loading" @click="cancel">关闭</a-button>
+      <a-button type="primary" :loading="loading" @click="cancel">关闭</a-button>
     </template>
     <a-form class="inlineForm">
       <fieldset class="formFieldSet">

src/views/manage/business-review/components/somepriceAudit/index.vue

@@ -9,7 +9,7 @@
       <a-button key="submit" v-if="isShowContractCheck(selectedRow.applystatus)" type="primary" :loading="loading" @click="refuse">审核拒绝
       </a-button>
     </template>
-    <a-form class="inlineForm" :form="form" @submit="handleSearch">
+    <a-form class="inlineForm">
       <fieldset class="formFieldSet">
         <legend>合同基本信息</legend>
         <a-row :gutter="24">

src/views/manage/business-review/components/somepriceCancel/index.vue

@@ -6,7 +6,7 @@
 
       <a-button key="submit" type="primary" :loading="loading" @click="back">撤销 </a-button>
     </template>
-    <a-form class="inlineForm" :form="form" @submit="handleSearch">
+    <a-form class="inlineForm">
       <fieldset class="formFieldSet">
         <legend>合同基本信息</legend>
         <a-row :gutter="24">

src/views/manage/business-review/list/someprice/index.vue

@@ -41,7 +41,6 @@ import { getPriceTypeName, getContractStatusName, getContractTypeName, getApplyS
 import { getAnalogueName } from '@/views/information/spot-contract/setup';
 import { Column, ColumnType } from '@/common/setup/table';
 import { BtnListType } from '@/common/components/btnList/interface';
-import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { getTableButton } from '@/common/setup/table/button';
 import { QueryBusinessDj } from '@/services/go/ermcp/business-review';
 import { QryBusinessDjRsp } from '@/services/go/ermcp/business-review/interface';

src/views/manage/finance-review/components/filterTable/index.vue

@@ -1,38 +1,48 @@
 <template>
-  <!-- 过滤客户资料表格 -->
   <div class="filterTable">
-    <FilterOption :selectList="selectList" :inputList="inputList" :fixedBtnList="fixedBtnList" />
+    <FilterOption :selectList="selectList" :inputList="inputList" :buttonList="buttonList" />
     <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 { QryBussinessFpRsp } from '@/services/go/ermcp/finance-review/interface';
+import { useFilter } from '@/common/components/filter/setup';
+import FilterOption from '@/common/components/filter/index.vue';
+
 export default defineComponent({
   name: 'finace-review-filter-table',
-  components: { FilterOption },
+  components: {
+    FilterOption
+  },
   setup(props, context) {
-    const select: SelectList[] = [
+    const { selectList, inputList, buttonList, search } = useFilter<QryBussinessFpRsp>(context);
+
+    selectList.value = [
       {
-        value: undefined,
         key: 'contracttype',
-        placeholder: '全部合同类型',
-        list: [
-          { value: 1, lable: '采购' },
-          { value: -1, lable: '销售' },
+        selectedValue: 0,
+        options: [
+          { label: '全部合同类型', value: 0 },
+          { label: '采购', value: 1 },
+          { label: '销售', value: -1 }
         ],
+        onChange: search
       },
-    ];
-    const input: InputList[] = [
-      { value: '', placeholder: '模糊搜索对手方', key: 'buyusernameOrsellusername' },
-      { value: '', placeholder: '模糊搜索合同编号', key: 'contractno' },
-      { value: '', placeholder: '模糊搜索现货品种', key: 'deliverygoodsname' },
-    ];
+    ]
+
+    inputList.value = [
+      { keys: ['buyusername', 'sellusername'], alias: 'buyusernameOrsellusername', value: '', placeholder: '模糊搜索对手方' },
+      { keys: ['contractno'], value: '', placeholder: '模糊搜索合同编号' },
+      { keys: ['goodsname'], value: '', placeholder: '模糊搜索商品' },
+    ]
+
     return {
-      ...handleFilter(select, input, context),
-    };
+      selectList,
+      inputList,
+      buttonList,
+    }
   },
-});
+})
 </script>

src/views/manage/finance-review/list/invoice/index.vue

@@ -44,7 +44,6 @@ import { queryTableList, MtpTableButton, contextMenu, defineAsyncComponent, defi
 import { Filter } from '../../components';
 import { Column, ColumnType } from '@/common/setup/table';
 import { getContractTypeName, getApplyStatusName, getReceiptName, getPriceTypeName } from '@/common/constants/enumsName';
-import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { getTableButton } from '@/common/setup/table/button';
 import { QueryBusinessFp } from '@/services/go/ermcp/finance-review';

src/views/manage/inventory-review/components/filterTable/index.vue

@@ -1,62 +1,60 @@
 <template>
-  <!-- 过滤客户资料表格 -->
   <div class="filterTable">
-    <FilterOption :selectList="selectList" :inputList="inputList" :fixedBtnList="fixedBtnList" />
+    <FilterOption :selectList="selectList" :inputList="inputList" :buttonList="buttonList" />
     <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 { Ermcp3AreaStockApply } from '@/views/manage/inventory-review/list/setup';
+import { useFilter } from '@/common/components/filter/setup';
+import FilterOption from '@/common/components/filter/index.vue';
+
 export default defineComponent({
   name: 'check-out-in-filter-table',
   components: {
     FilterOption,
   },
-  props: {
-    inOrOut: {
-      type: String,
-      default: 'in',
-    },
-  },
   setup(props, context) {
-    // 入库过滤类型
-    const inList = [
-      { value: 5, lable: '采购入库' },
-      { value: 7, lable: '生产入库' },
-    ];
-    // 出库过滤类型
-    const outList = [
-      { value: 6, lable: '销售出库' },
-      { value: 8, lable: '生产出库' },
-    ];
-    const select: SelectList[] = [
+    const { selectList, inputList, buttonList, search } = useFilter<Ermcp3AreaStockApply>(context);
+
+    selectList.value = [
       {
-        value: undefined,
         key: 'contracttype',
-        placeholder: '全部合同类型',
-        list: [
-          { value: 1, lable: '采购' },
-          { value: -1, lable: '销售' },
+        selectedValue: 0,
+        options: [
+          { label: '全部合同类型', value: 0 },
+          { label: '采购', value: 1 },
+          { label: '销售', value: -1 }
         ],
+        onChange: search
       },
       {
-        value: undefined,
         key: 'inouttype',
-        placeholder: props.inOrOut === 'in' ? '全部入库类型' : '全部出库类型',
-        list: props.inOrOut === 'in' ? inList : outList,
-      },
-    ];
-    const input: InputList[] = [
-      { value: '', placeholder: '模糊搜索对手方', key: 'buyusernameOrsellusername' },
-      { value: '', placeholder: '模糊搜索合同编号', key: 'contractno' },
-      { value: '', placeholder: '模糊搜索现货品种', key: 'deliverygoodsname' },
-    ];
+        selectedValue: 0,
+        options: [
+          { label: '全部出入库类型', value: 0 },
+          { label: '采购入库', value: 5 },
+          { label: '销售出库', value: 6 },
+          { label: '生产入库', value: 7 },
+          { label: '生产出库', value: 8 }
+        ],
+        onChange: search
+      }
+    ]
+
+    inputList.value = [
+      { keys: ['buyusername', 'sellusername'], alias: 'buyusernameOrsellusername', value: '', placeholder: '模糊搜索对手方' },
+      { keys: ['contractno'], value: '', placeholder: '模糊搜索合同编号' },
+      { keys: ['wrstandardname'], value: '', placeholder: '模糊搜索商品' },
+    ]
+
     return {
-      ...handleFilter(select, input, context),
-    };
+      selectList,
+      inputList,
+      buttonList,
+    }
   },
-});
+})
 </script>

src/views/manage/inventory-review/list/audit/index.vue

@@ -2,7 +2,7 @@
   <!-- 库存审核 入库-->
   <mtp-table-scroll>
     <template #header>
-      <Filter @search="updateColumn" :inOrOut="'in'"></Filter>
+      <Filter @search="updateColumn"></Filter>
     </template>
     <template #default="{ scroll }">
       <a-table :columns="columns" class="srcollYTable" :scroll="scroll" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList">
@@ -48,7 +48,6 @@ import { getContractTypeName, getPriceTypeName, getApplyStatusName } from '@/com
 import { operateApplyTypeName } from '@/views/manage/finance-review/setup';
 import { InOutTypeName } from '@/views/manage/inventory-review/setup';
 import { Column, ColumnType } from '@/common/setup/table';
-import { EnumRouterName } from '@/common/constants/enumRouterName';
 import { BtnListType } from '@/common/components/btnList/interface';
 import { getTableButton } from '@/common/setup/table/button';
 import { useRoute } from 'vue-router';

src/views/market/futures/index.vue

@@ -103,63 +103,4 @@ export default defineComponent({
     };
   },
 });
-</script>
-<style lang="less">
-.noData {
-    .position(absolute, 28px, 0, 0, 0);
-}
-.filter-custom-table {
-    display: inline-flex;
-    align-items: center;
-    padding: 7px 0;
-    .conditionSelect:first-child {
-        margin-right: 10px;
-    }
-    .btnDeafault.ant-btn,
-    .operBtn.ant-btn {
-        height: 26px !important;
-        line-height: 26px !important;
-    }
-
-    .ant-select-single:not(.ant-select-customize-input) + .ant-select-single:not(.ant-select-customize-input),
-    .ant-select + .ant-space.ant-space-vertical {
-        margin-left: 10px;
-    }
-    .ant-select-single:not(.ant-select-customize-input) {
-        .ant-select-selector {
-            height: 26px;
-            border-color: @m-grey46 !important;
-            background: @m-grey47;
-            .rounded-corners(3px);
-            .ant-select-selection-item {
-                line-height: 26px;
-            }
-            .ant-select-selection-search {
-                height: 26px;
-                .ant-select-selection-search-input {
-                    height: 26px;
-                    line-height: 27px !important;
-                }
-            }
-            .ant-select-selection-placeholder {
-                line-height: 26px;
-            }
-        }
-    }
-
-    .allDatePicker.ant-calendar-picker {
-        height: 26px !important;
-        border: 1px solid @m-grey46 !important;
-        .ant-calendar-picker-input.ant-input {
-            height: 26px;
-            line-height: 26px;
-            &::placeholder {
-                color: @m-grey10 !important;
-            }
-        }
-    }
-    .conditionSelect + .conditionSelect {
-        margin-left: 10px;
-    }
-}
-</style>
+</script>

src/views/market/market-spot/goods-chart/index.vue

@@ -12,38 +12,30 @@
       <div class="inlineBar">
         <div class="valNums bdf1 ml10">
           <!-- 最新价 -->
-          <div class="firstNum start" :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ handleNoneValue(selectedRow.last) }}</div>
-          <div class="lastNum start">
+          <div class="firstNum" :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ handleNoneValue(selectedRow.last) }}</div>
+          <div class="lastNum">
             <!-- 涨跌值 -->
-            <div :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteChange(selectedRow, selectedRow.decimalplace) }}</div>
+            <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteChange(selectedRow, selectedRow.decimalplace) }}</span>
             <!-- 涨跌幅 -->
-            <div class="ml20" :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow, selectedRow.decimalplace) }}</div>
+            <span :class="handleQuotePriceColor(selectedRow.last, selectedRow.presettle)">{{ quoteAmplitude(selectedRow, selectedRow.decimalplace) }}</span>
           </div>
         </div>
         <div class="priceBar ml20">
-          <div class="inlineBar start">
-            <div class="greenBar">
-              <div class="numBlock ml15">
-                <div class="first grey">卖价</div>
-                <div class="last" :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)">{{ handleNoneValue(selectedRow.ask) }}</div>
-              </div>
-              <div class="numBlock">
-                <div class="first grey">卖量</div>
-                <div class="last" :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)">{{ selectedRow.askvolume }}</div>
-              </div>
-            </div>
+          <div class="numBlock">
+            <div class="first grey">卖价</div>
+            <div class="last" :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)">{{ handleNoneValue(selectedRow.ask) }}</div>
           </div>
-          <div class="inlineBar start">
-            <div class="redBar">
-              <div class="numBlock">
-                <div class="first grey">买价</div>
-                <div class="last" :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">{{ handleNoneValue(selectedRow.bid) }}</div>
-              </div>
-              <div class="numBlock">
-                <div class="first grey">买量</div>
-                <div class="last" :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">{{ selectedRow.bidvolume }}</div>
-              </div>
-            </div>
+          <div class="numBlock">
+            <div class="first grey">买价</div>
+            <div class="last" :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">{{ handleNoneValue(selectedRow.bid) }}</div>
+          </div>
+          <div class="numBlock">
+            <div class="first grey">卖量</div>
+            <div class="last" :class="handleQuotePriceColor(selectedRow.ask, selectedRow.presettle)">{{ selectedRow.askvolume }}</div>
+          </div>
+          <div class="numBlock">
+            <div class="first grey">买量</div>
+            <div class="last" :class="handleQuotePriceColor(selectedRow.bid, selectedRow.presettle)">{{ selectedRow.bidvolume }}</div>
           </div>
         </div>
       </div>
@@ -132,38 +124,39 @@ export default defineComponent({
 });
 </script>
 <style lang="less">
-.valNums {
-    .flex;
-    flex-direction: column;
-    padding-left: 20px;
-    .firstNum {
-        font-size: 18px;
-        line-height: 18px;
-        font-weight: 400;
-    }
-    .lastNum {
-        margin-top: 2px;
+.buy-sell-market-title .inlineBar {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+
+    .valNums {
         display: inline-flex;
-        font-size: 12px;
-        line-height: 12px;
-        font-weight: 300;
+        align-items: center;
+        padding-left: 20px;
+
+        .firstNum {
+            font-size: 18px;
+            font-weight: 400;
+        }
+
+        .lastNum {
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            font-weight: 300;
+            span {
+                margin-left: 10px;
+            }
+        }
     }
-}
-.inlineBar {
-    display: inline-flex;
-}
-.priceBar {
-    .flex;
-    flex-direction: column;
-    height: 32px;
-    .greenBar,
-    .redBar {
-        height: 16px;
-        line-height: 16px;
+
+    .priceBar {
+        display: inline-flex;
+        align-items: center;
+
+        .numBlock {
+            min-width: auto;
+        }
     }
 }
-.start {
-    align-self: flex-start !important;
-    align-items: flex-start !important;
-}
 </style>

src/views/order/commodity_contract/components/commodity_contract_summary/components/commodity_contract_summary_settlement/index.vue

@@ -332,9 +332,11 @@ export default defineComponent({
                             }
                             .anticon-minus {
                                 .position(absolute, 0, auto, 0, 10px);
+                                user-select: none;
                             }
                             .anticon-plus {
                                 .position(absolute, 0, 10px, 0, auto);
+                                user-select: none;
                             }
                         }
                         .disabled {

src/views/report/components/filter/index.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 报表通用过滤 -->
-  <div class="filterTable">
-    <div class="filter-custom-table">
+  <FilterOption>
+    <template #before>
       <a-select label-in-value class="conditionSelect" style="width: 120px" v-model:value="selectedReportType" @change="reportTypeChange" placeholder="请选择报表类型">
         <a-select-option v-for="item in reportType" :key="item.value">
           {{ item.lable }}
@@ -16,9 +16,9 @@
           {{ item.lable }}
         </a-select-option>
       </a-select>
-      <slot :reset="reset" :search="search"></slot>
-    </div>
-  </div>
+    </template>
+    <slot :reset="reset"></slot>
+  </FilterOption>
 </template>
 
 <script lang="ts">
@@ -53,14 +53,8 @@ export default defineComponent({
       selectedReportType.value = oldSelectedReportType
       selectedUser.value = oldSelectedUser
       time.value = oldTime
-      userChange()
-      timeChange()
       reportTypeChange()
     }
-    function search() {
-
-
-    }
 
     initData(() => {
       // 处理刷新
@@ -95,9 +89,8 @@ export default defineComponent({
       isMonth,
       time,
       userList,
-      reset,
-      search
-    };
+      reset
+    }
   },
-});
+})
 </script>

src/views/report/exposure-report/components/filterTable/index.vue

@@ -1,51 +1,68 @@
 <template>
-  <!-- 过滤客户资料表格 -->
-  <Filter @update="update">
-    <a-select label-in-value class="conditionSelect ml10" style="width: 120px" v-model:value="selectedMd" @change="mdChange" placeholder="全部套保品种">
-      <a-select-option v-for="item in middleGoods" :key="item.lable">
-        {{ item.lable }}
-      </a-select-option>
-    </a-select>
-    <a-button class="selectBtn">查询</a-button>
-    <a-button class="selectBtn" @click="reset">重置</a-button>
-  </Filter>
+  <div class="filterTable">
+    <Filter @update="update" :selectList="selectList">
+      <template #default="{ reset }">
+        <a-button class="selectBtn" @click="resetAction(reset)">重置</a-button>
+      </template>
+    </Filter>
+  </div>
 </template>
 
 <script lang="ts">
-import FilterOption from '@/common/components/filter/index.vue';
 import { defineComponent } from 'vue';
-import { ref } from 'vue';
+import { TypeAndTime } from '@/views/report/interface';
+import { initData } from '@/common/export/table';
+import { QueryMiddleGoodsDetail } from '@/services/go/ermcp/goodsInfo'
+import { Ermcp3ExpourseReport } from '@/services/go/ermcp/report/interface';
+import { useFilter } from '@/common/components/filter/setup';
 import Filter from '../../../components/filter/index.vue';
-import { handlMiddleGoods } from '@/views/report/setup';
-import { initData } from '@/common/methods';
 
 export default defineComponent({
   name: 'exposure-filter-table',
-  emits: ['update', 'filter'],
-  components: { FilterOption, Filter },
+  components: {
+    Filter
+  },
   setup(props, context) {
-    const { middleGoods, getTBList } = handlMiddleGoods();
-    function update(value: any) {
-      context.emit('update', value);
-    }
-    const selectedMd = ref(undefined);
-    function mdChange(id: any) {
-      context.emit('filter', { middlegoodsname: [id.key ? String(id.key) : ''] });
+    const { selectList, search, reset } = useFilter<Ermcp3ExpourseReport>(context);
+
+    selectList.value = [
+      {
+        key: 'middlegoodsid',
+        alias: 'middlegoodsname',
+        selectedValue: 0,
+        options: [
+          { label: '全部套保品种', value: 0 },
+        ],
+        onChange: search,
+      },
+    ]
+
+    // 数据初始化
+    initData(() => {
+      QueryMiddleGoodsDetail().then((res) => {
+        res.forEach((item) => {
+          selectList.value[0].options.push({
+            label: item.middlegoodsname,
+            value: item.middlegoodsid
+          })
+        })
+      })
+    })
+
+    function resetAction(parentReset: () => void) {
+      parentReset();
+      reset();
     }
-    function reset() {
-      selectedMd.value = undefined;
-      mdChange('');
+
+    function update(value: TypeAndTime) {
+      context.emit('update', value);
     }
-    initData(() => {
-      getTBList();
-    });
+
     return {
-      mdChange,
-      reset,
-      middleGoods,
+      selectList,
       update,
-      selectedMd,
-    };
+      resetAction,
+    }
   },
-});
+})
 </script>

src/views/report/exposure-report/list/exposure_report/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filter @update="search" @filter="updateColumn"></Filter>
+  <Filter @update="search" @search="updateColumn"></Filter>
   <!-- 敞口报表 -->
   <mtp-table-scroll>
     <template #default="{ scroll }">

src/views/report/finance-report/components/filterTable/index.vue

@@ -1,33 +1,31 @@
 <template>
-  <!-- 过滤客户资料表格 -->
-  <Filter @update="update" v-slot="{search,reset}">
-    <a-button class="selectBtn">查询</a-button>
-    <a-button class="selectBtn" @click="resetAction(search,reset)">重置</a-button>
-  </Filter>
+  <div class="filterTable">
+    <Filter @update="update">
+      <template #default="{ reset }">
+        <a-button class="selectBtn" @click="reset">重置</a-button>
+      </template>
+    </Filter>
+  </div>
 </template>
 
 <script lang="ts">
-import FilterOption from '@/common/components/filter/index.vue';
 import { defineComponent } from 'vue';
-import Filter from '../../../components/filter/index.vue';
 import { TypeAndTime } from '@/views/report/interface';
+import Filter from '../../../components/filter/index.vue';
 
 export default defineComponent({
   name: 'exposure-filter-table',
-  components: { FilterOption, Filter },
+  components: {
+    Filter
+  },
   setup(props, context) {
     function update(value: TypeAndTime) {
       context.emit('update', value);
     }
 
-    function resetAction(search: Function, Nreset: Function) {
-      Nreset()
-    }
-
     return {
-      resetAction,
       update,
-    };
+    }
   },
-});
+})
 </script>

src/views/report/future_report/components/filterTable/index.vue

@@ -1,33 +1,31 @@
 <template>
-  <!-- 过滤客户资料表格 -->
-  <Filter @update="update" v-slot="{search,reset}">
-    <a-button class="selectBtn">查询</a-button>
-    <a-button class="selectBtn" @click="resetAction(search,reset)">重置</a-button>
-  </Filter>
+  <div class="filterTable">
+    <Filter @update="update">
+      <template #default="{ reset }">
+        <a-button class="selectBtn" @click="reset">重置</a-button>
+      </template>
+    </Filter>
+  </div>
 </template>
 
 <script lang="ts">
-import FilterOption from '@/common/components/filter/index.vue';
 import { defineComponent } from 'vue';
-import Filter from '../../../components/filter/index.vue';
 import { TypeAndTime } from '@/views/report/interface';
+import Filter from '../../../components/filter/index.vue';
 
 export default defineComponent({
   name: 'inventory-filter-table',
-  components: { FilterOption, Filter },
+  components: {
+    Filter
+  },
   setup(props, context) {
     function update(value: TypeAndTime) {
       context.emit('update', value);
     }
 
-    function resetAction(search: Function, Nreset: Function) {
-      Nreset()
-    }
-
     return {
-      resetAction,
       update,
-    };
+    }
   },
-});
+})
 </script>

src/views/report/inventory-report/components/filterTable/index.vue

@@ -1,53 +1,97 @@
 <template>
-  <!-- 过滤客户资料表格 -->
-  <Filter @update="update" :showUser="false">
-    <a-select label-in-value class="conditionSelect ml10" style="width: 120px" v-model:value="selectedDG" @change="DGChange" placeholder="全部现货品种">
-      <a-select-option v-for="item in DGList" :key="item.data.deliverygoodsname">
-        {{ item.data.deliverygoodsname }}
-      </a-select-option>
-    </a-select>
-    <a-select label-in-value class="conditionSelect ml10" style="width: 120px" v-model:value="selectedGM" @change="GBOrGMChange" placeholder="全部品类">
-      <a-select-option v-for="item in gmlist" :key="item.wrstandardname">
-        {{ item.wrstandardname }}
-      </a-select-option>
-    </a-select>
-    <a-button class="selectBtn">查询</a-button>
-    <a-button class="selectBtn" @click="reset">重置</a-button>
-  </Filter>
+  <div class="filterTable">
+    <Filter @update="update" :showUser="false" :selectList="selectList">
+      <template #default="{ reset }">
+        <a-button class="selectBtn" @click="resetAction(reset)">重置</a-button>
+      </template>
+    </Filter>
+  </div>
 </template>
 
 <script lang="ts">
-import FilterOption from '@/common/components/filter/index.vue';
 import { defineComponent } from 'vue';
-import { ref } from 'vue';
-import { handleFilter, SelectList } from '@/common/setup/filter';
-import { handlerManagerList } from '@/common/setup/user';
-import { QueryMiddleGoodsDetail } from '@/services/go/ermcp/goodsInfo';
-import { SelectOption } from '@/common/setup/filter/interface';
-import Filter from '../../../components/filter/index.vue';
 import { TypeAndTime } from '@/views/report/interface';
-import { handleDG } from '@/views/report/setup';
+import { initData } from '@/common/export/table';
+import { GetDeliveryGoodsDetail } from "@/services/go/ermcp/goodsInfo";
+import { Ermcp3DeliveryGoodsDetail } from '@/services/go/ermcp/goodsInfo/interface/deliverygoodsdetail'
+import { Ermcp3AreaSpotPLReport } from '@/services/go/ermcp/report/interface';
+import { useFilter } from '@/common/components/filter/setup';
+import Filter from '../../../components/filter/index.vue';
 
 export default defineComponent({
   name: 'inventory-filter-table',
-  components: { FilterOption, Filter },
+  components: {
+    Filter
+  },
   setup(props, context) {
+    // 现货品种列表
+    const deliveryGoodsList: Ermcp3DeliveryGoodsDetail[] = [];
+    const { selectList, search, reset } = useFilter<Ermcp3AreaSpotPLReport>(context);
+
+    selectList.value = [
+      {
+        key: 'deliverygoodsid',
+        alias: 'deliverygoodsname',
+        selectedValue: 0,
+        options: [
+          { label: '全部现货品种', value: 0 },
+        ],
+        onChange: (value: string | number) => {
+          selectList.value[1].selectedValue = 0;
+          selectList.value[1].options = [{ label: '全部商品', value: 0 }];
+
+          deliveryGoodsList.forEach((item) => {
+            if (item.deliverygoodsid === value) {
+              // 商品列表
+              item.wdlst.forEach((e) => {
+                selectList.value[1].options.push({
+                  label: e.wrstandardname,
+                  value: e.wrstandardid,
+                })
+              })
+            }
+          })
+          search();
+        },
+      },
+      {
+        key: 'wrstandardid',
+        alias: 'wrstandardname',
+        selectedValue: 0,
+        options: [
+          { label: '全部商品', value: 0 },
+        ],
+        onChange: search,
+      }
+    ]
+
+    // 数据初始化
+    initData(() => {
+      GetDeliveryGoodsDetail().then((res) => {
+        deliveryGoodsList.push(...res.filter((item) => item.isvalid));
+        deliveryGoodsList.forEach((item) => {
+          selectList.value[0].options.push({
+            label: item.deliverygoodsname,
+            value: item.deliverygoodsid
+          })
+        })
+      })
+    })
+
+    function resetAction(parentReset: () => void) {
+      parentReset();
+      reset();
+    }
+
     function update(value: TypeAndTime) {
       context.emit('update', value);
     }
-    const { DGList, gblist, gmlist, selectedDG, selectedGB, selectedGM, DGChange, GBOrGMChange, reset } = handleDG(context);
+
     return {
-      DGList,
-      gblist,
-      gmlist,
-      DGChange,
-      GBOrGMChange,
-      reset,
-      selectedDG,
-      selectedGB,
-      selectedGM,
+      selectList,
       update,
-    };
+      resetAction,
+    }
   },
-});
+})
 </script>

src/views/report/inventory-report/list/category/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filter @update="search" @filter="updateColumn"></Filter>
+  <Filter @update="search" @search="updateColumn"></Filter>
   <!-- 库存报表(品类) -->
   <mtp-table-scroll>
     <template #default="{ scroll }">

src/views/report/inventory-report/list/warehouse/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filter @update="search" @filter="updateColumn"></Filter>
+  <Filter @update="search" @search="updateColumn"></Filter>
   <!-- 库存报表(仓库) -->
   <mtp-table-scroll>
     <template #default="{ scroll }">

src/views/report/setup.ts

@@ -11,15 +11,12 @@ import { Value } from "./interface"
 
 export function handleReprotType(context: SetupContext) {
     // 选中的周期类型
-    // 
     const selectedReportType = ref<Value>({ key: reportCycleType.day })
     // 时间格式化类型
     const dateFormat = ref<reportCyleTimeType>(reportCyleTimeType.day)
     // 时间
-    // 
     const time = ref<Moment>(getInitTime());
     // 交易用户
-    // 
     const selectedUser = ref<Value>({ key: getUserId() })
     // 周期类型与时间类型 一对一的关系
     const timeMap = new Map([
@@ -88,17 +85,15 @@ export function handleInitTypeAndTime() {
     return { getInitTime, getInitType }
 }
 
-// 获取套保品种
+// 获取套保品种-------------------------------待优化确认是否删除
 export function handlMiddleGoods() {
     const middleGoods = ref<SelectOption[]>([])
     function getTBList() {
         return QueryMiddleGoodsDetail().then((res) => {
             const result: SelectOption[] = [];
             res.forEach((e) => {
-                const { isvalid, middlegoodsname, middlegoodsid } = e.mg;
-                if (isvalid) {
-                    result.push({ value: middlegoodsid, lable: middlegoodsname });
-                }
+                const { middlegoodsname, middlegoodsid } = e;
+                result.push({ value: middlegoodsid, lable: middlegoodsname });
             });
             middleGoods.value = result
         })
@@ -106,6 +101,7 @@ export function handlMiddleGoods() {
     return { middleGoods, getTBList }
 }
 
+// -------------------------------待优化确认是否删除
 export function handleDG(context: SetupContext) {
     // 现货品种
     const DGList = ref<ErmcpDeliveryGoodsDetailEx[]>([])
@@ -148,6 +144,4 @@ export function handleDG(context: SetupContext) {
         filterAction()
     }
     return { DGList, gblist, gmlist, selectedDG, selectedGB, selectedGM, DGChange, reset, GBOrGMChange }
-}
-
-// 获取品种数据
+}

src/views/report/spot-report/components/filterTable/index.vue

@@ -1,57 +1,97 @@
 <template>
-  <!-- 过滤客户资料表格 -->
-  <Filter @update="update" ref="filter" v-slot="{search,reset}">
-    <a-select label-in-value class="conditionSelect ml10" style="width: 120px" v-model:value="selectedDG" @change="DGChange" placeholder="全部现货品种">
-      <a-select-option v-for="item in DGList" :key="item.data.deliverygoodsname">
-        {{ item.data.deliverygoodsname }}
-      </a-select-option>
-    </a-select>
-    <a-select label-in-value class="conditionSelect ml10" style="width: 120px" v-model:value="selectedGM" placeholder="全部商品">
-      <a-select-option v-for="item in gmlist" :key="item.wrstandardname">
-        {{ item.wrstandardname }}
-      </a-select-option>
-    </a-select>
-    <a-button class="selectBtn">查询</a-button>
-    <a-button class="selectBtn" @click="resetAction(search,reset)">重置</a-button>
-  </Filter>
+  <div class="filterTable">
+    <Filter @update="update" :selectList="selectList">
+      <template #default="{ reset }">
+        <a-button class="selectBtn" @click="resetAction(reset)">重置</a-button>
+      </template>
+    </Filter>
+  </div>
 </template>
 
 <script lang="ts">
-import FilterOption from '@/common/components/filter/index.vue';
 import { defineComponent } from 'vue';
-import { ref, onMounted } from 'vue';
-import Filter from '../../../components/filter/index.vue';
 import { TypeAndTime } from '@/views/report/interface';
-import { handleDG } from '@/views/report/setup';
+import { initData } from '@/common/export/table';
+import { GetDeliveryGoodsDetail } from "@/services/go/ermcp/goodsInfo";
+import { Ermcp3DeliveryGoodsDetail } from '@/services/go/ermcp/goodsInfo/interface/deliverygoodsdetail'
+import { Ermcp3AreaSpotPLReport } from '@/services/go/ermcp/report/interface';
+import { useFilter } from '@/common/components/filter/setup';
+import Filter from '../../../components/filter/index.vue';
 
 export default defineComponent({
   name: 'exposure-filter-table',
-  components: { FilterOption, Filter },
+  components: {
+    Filter
+  },
   setup(props, context) {
+    // 现货品种列表
+    const deliveryGoodsList: Ermcp3DeliveryGoodsDetail[] = [];
+    const { selectList, search, reset } = useFilter<Ermcp3AreaSpotPLReport>(context);
+
+    selectList.value = [
+      {
+        key: 'deliverygoodsid',
+        alias: 'deliverygoodsname',
+        selectedValue: 0,
+        options: [
+          { label: '全部现货品种', value: 0 },
+        ],
+        onChange: (value: string | number) => {
+          selectList.value[1].selectedValue = 0;
+          selectList.value[1].options = [{ label: '全部商品', value: 0 }];
+
+          deliveryGoodsList.forEach((item) => {
+            if (item.deliverygoodsid === value) {
+              // 商品列表
+              item.wdlst.forEach((e) => {
+                selectList.value[1].options.push({
+                  label: e.wrstandardname,
+                  value: e.wrstandardid,
+                })
+              })
+            }
+          })
+          search();
+        },
+      },
+      {
+        key: 'wrstandardid',
+        alias: 'wrstandardname',
+        selectedValue: 0,
+        options: [
+          { label: '全部商品', value: 0 },
+        ],
+        onChange: search,
+      }
+    ]
+
+    // 数据初始化
+    initData(() => {
+      GetDeliveryGoodsDetail().then((res) => {
+        deliveryGoodsList.push(...res.filter((item) => item.isvalid));
+        deliveryGoodsList.forEach((item) => {
+          selectList.value[0].options.push({
+            label: item.deliverygoodsname,
+            value: item.deliverygoodsid
+          })
+        })
+      })
+    })
+
+    function resetAction(parentReset: () => void) {
+      parentReset();
+      reset();
+    }
+
     function update(value: TypeAndTime) {
       context.emit('update', value);
     }
 
-    let filter = ref(null);
-    onMounted(() => {
-      console.log(filter.value)
-    });
-    const { DGList, gmlist, selectedDG, selectedGM, DGChange, reset } = handleDG(context);
-    function resetAction(search: Function, Nreset: Function) {
-      Nreset()
-      reset()
-    }
     return {
-      filter,
-      DGList,
-      gmlist,
-      DGChange,
-      reset,
-      selectedDG,
-      selectedGM,
+      selectList,
       update,
       resetAction,
-    };
+    }
   },
-});
+})
 </script>

src/views/report/spot-report/list/spot_report/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Filter @update="search" @filter="updateColumn" :tableList="tableList"></Filter>
+  <Filter @update="search" @search="updateColumn" :tableList="tableList"></Filter>
   <!-- 现货报表 -->
   <mtp-table-scroll>
     <template #default="{ scroll }">

src/views/report/sum_pl_report/components/filterTable/index.vue

@@ -1,33 +1,31 @@
 <template>
-  <!-- 过滤客户资料表格 -->
-  <Filter @update="update">
-    <a-button class="selectBtn">查询</a-button>
-    <a-button class="selectBtn" @click="resetAction(search,reset)">重置</a-button>
-  </Filter>
+  <div class="filterTable">
+    <Filter @update="update">
+      <template #default="{ reset }">
+        <a-button class="selectBtn" @click="reset">重置</a-button>
+      </template>
+    </Filter>
+  </div>
 </template>
 
 <script lang="ts">
-import FilterOption from '@/common/components/filter/index.vue';
 import { defineComponent } from 'vue';
-import Filter from '../../../components/filter/index.vue';
 import { TypeAndTime } from '@/views/report/interface';
+import Filter from '../../../components/filter/index.vue';
 
 export default defineComponent({
   name: 'exposure-filter-table',
-  components: { FilterOption, Filter },
+  components: {
+    Filter
+  },
   setup(props, context) {
     function update(value: TypeAndTime) {
       context.emit('update', value);
     }
 
-    function resetAction(search: Function, Nreset: Function) {
-      Nreset()
-    }
-
     return {
-      resetAction,
       update,
-    };
+    }
   },
-});
+})
 </script>

src/views/search/inventory/components/filterTable/index.vue

@@ -1,85 +1,117 @@
 <template>
-  <!-- 过滤客户资料表格 -->
   <div class="filterTable">
-    <FilterOption :selectList="selectList" :inputList="inputList" :fixedBtnList="fixedBtnList" />
+    <FilterOption :selectList="selectList" />
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
-import FilterOption from '@/common/components/filter/index.vue';
-import { defineComponent, ref } from 'vue';
-import { handleFilter, InputList, SelectList } from '@/common/setup/filter';
-import { initData } from '@/common/methods';
-import APP from '@/services';
-import { Ermcp3Brand, Ermcp3Wrstandard, ErmcpDeliveryGoodsDetailEx } from '@/services/go/ermcp/goodsInfo/interface';
+import { defineComponent } from 'vue';
+import { initData } from '@/common/export/table';
+import { Ermcp3AreaStock } from '@/services/go/ermcp/search-inventory/interface';
+import { Ermcp3DeliveryGoodsDetail } from '@/services/go/ermcp/goodsInfo/interface/deliverygoodsdetail'
 import { getWarehouseTypeEnumList } from '@/common/constants/enumsList';
+import { GetDeliveryGoodsDetail } from "@/services/go/ermcp/goodsInfo";
+import { useFilter } from '@/common/components/filter/setup';
+import FilterOption from '@/common/components/filter/index.vue';
 
 export default defineComponent({
   name: 'filter-spot-contract-table',
   components: { FilterOption },
   setup(props, context) {
-    const select = ref<SelectList[]>([
+    // 现货品种列表
+    const deliveryGoodsList: Ermcp3DeliveryGoodsDetail[] = [];
+    const { selectList, search } = useFilter<Ermcp3AreaStock>(context);
+
+    selectList.value = [
       {
-        value: undefined,
         key: 'deliverygoodsid',
-        placeholder: '全部现货品种',
-        list: [],
-        change: DGChange,
+        alias: 'deliverygoodsname',
+        selectedValue: 0,
+        options: [
+          { label: '全部现货品种', value: 0 },
+        ],
+        onChange: (value: string | number) => {
+          selectList.value[1].selectedValue = 0;
+          selectList.value[1].options = [{ label: '全部商品', value: 0 }];
+
+          selectList.value[2].selectedValue = '';
+          selectList.value[2].options = [{ label: '全部品牌', value: '' }];
+
+          deliveryGoodsList.forEach((item) => {
+            if (item.deliverygoodsid === value) {
+              // 商品列表
+              item.wdlst.forEach((e) => {
+                selectList.value[1].options.push({
+                  label: e.wrstandardname,
+                  value: e.wrstandardid,
+                })
+              })
+              // 品牌列表
+              item.bdlst.forEach((e) => {
+                if (e.isvalid) {
+                  selectList.value[2].options.push({
+                    label: e.brandname,
+                    value: e.brandname,
+                  })
+                }
+              })
+            }
+          })
+          search();
+        },
       },
       {
-        value: undefined,
         key: 'wrstandardid',
-        placeholder: '全部商品',
-        list: [],
+        alias: 'wrstandardname',
+        selectedValue: 0,
+        options: [
+          { label: '全部商品', value: 0 },
+        ],
+        onChange: search,
       },
       {
-        value: undefined,
-        key: 'spotgoodsbrandid',
-        placeholder: '全部品牌',
-        list: [],
+        key: 'brandname',
+        selectedValue: '',
+        options: [
+          { label: '全部品牌', value: '' },
+        ],
+        onChange: search,
       },
       {
-        value: undefined,
-        key: 'warehouseinfoid',
-        placeholder: '全部仓库',
-        list: [],
+        key: 'warehousetype',
+        alias: 'warehousecode',
+        selectedValue: 0,
+        options: [
+          { label: '全部仓库类型', value: 0 },
+        ],
+        onChange: search,
       },
-    ]);
-    const input: InputList[] = [];
+    ]
+
+    // 数据初始化
     initData(() => {
-      // 现货品种列表
-      select.value[0].list = APP.get('DeliveryGoodsList')
-        .filter((e: ErmcpDeliveryGoodsDetailEx) => {
-          return e.data.isvalid === 1;
+      GetDeliveryGoodsDetail().then((res) => {
+        deliveryGoodsList.push(...res.filter((item) => item.isvalid));
+        deliveryGoodsList.forEach((item) => {
+          selectList.value[0].options.push({
+            label: item.deliverygoodsname,
+            value: item.deliverygoodsid
+          })
         })
-        .map((el: ErmcpDeliveryGoodsDetailEx) => {
-          const { deliverygoodsid, deliverygoodsname } = el.data;
-          return { value: deliverygoodsid, lable: deliverygoodsname };
-        });
-    });
-    function DGChange(id: number) {
-      select.value[1].value = undefined;
-      select.value[2].value = undefined;
-      const temp = APP.get('DeliveryGoodsList').find((el: ErmcpDeliveryGoodsDetailEx) => el.data.deliverygoodsid === id);
-      if (temp) {
-        select.value[1].list = temp.gmlist.map((e: Ermcp3Wrstandard) => {
-          const { wrstandardid, wrstandardname } = e;
-          return { value: wrstandardid, lable: wrstandardname };
-        });
-        select.value[2].list = temp.gblist.map((e: Ermcp3Brand) => {
-          const { brandid, brandname } = e;
-          return { value: brandid, lable: brandname };
-        });
-      }
-    }
-    select.value[3].list = getWarehouseTypeEnumList().map((e) => {
-      const { enumitemname, enumdicname } = e;
-      return { value: enumitemname, lable: enumdicname };
-    });
+      })
+
+      getWarehouseTypeEnumList().map((item) => {
+        selectList.value[3].options.push({
+          label: item.enumdicname,
+          value: item.enumitemname,
+        })
+      })
+    })
+
     return {
-      ...handleFilter(select, input, context),
-    };
+      selectList,
+    }
   },
-});
+})
 </script>