|
|
@@ -0,0 +1,154 @@
|
|
|
+<template>
|
|
|
+ <!-- 过滤 -->
|
|
|
+ <div class="filterTable">
|
|
|
+ <a-range-picker v-model:value="date"
|
|
|
+ class="commonPicker"
|
|
|
+ style="width: 200px"
|
|
|
+ :show-time="{hideDisabledOptions: true}"
|
|
|
+ format="YYYY-MM-DD" />
|
|
|
+ <FilterOption :selectList="selectList"
|
|
|
+ :inputList="inputList"
|
|
|
+ :fixedBtnList="fixedBtnList">
|
|
|
+ <template #selectAfter>
|
|
|
+ <a-select label-in-value
|
|
|
+ class="conditionSelect"
|
|
|
+ style="width: 120px"
|
|
|
+ v-model:value="goodsid"
|
|
|
+ placeholder="选择商品">
|
|
|
+ <a-select-option v-for="(option, j) in goodsList"
|
|
|
+ :key="j + '22'"
|
|
|
+ :value="option.value">
|
|
|
+ {{option.lable}}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-checkbox v-model:checked="isOverTime"
|
|
|
+ class="filter-check">过滤超时单</a-checkbox>
|
|
|
+ <a-select label-in-value
|
|
|
+ class="conditionSelect"
|
|
|
+ style="width: 120px"
|
|
|
+ v-model:value="userid"
|
|
|
+ placeholder="选择商品">
|
|
|
+ <a-select-option v-for="(option, j) in areaList"
|
|
|
+ :key="j + '22'"
|
|
|
+ :value="option.value">
|
|
|
+ {{option.lable}}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <a-checkbox v-model:checked="includesub"
|
|
|
+ class="filter-check">包含子级</a-checkbox>
|
|
|
+ </template>
|
|
|
+ </FilterOption>
|
|
|
+ <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 { handleSelectOption } from '../../../../setup';
|
|
|
+import { getGoodsList } from '@/services/bus/goods';
|
|
|
+import { queryTableList } from '@/common/setup/table';
|
|
|
+import { QhjParentAreaList } from '@/services/go/ermcp/qhj/interface';
|
|
|
+import { queryParentAreaList } from '@/services/go/ermcp/qhj';
|
|
|
+import { SelectOption } from '@/common/setup/filter/interface';
|
|
|
+import { Moment } from 'moment';
|
|
|
+import { getRangeTime } from '@/utils/time';
|
|
|
+
|
|
|
+interface Value {
|
|
|
+ key?: string;
|
|
|
+ label?: string;
|
|
|
+}
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'filter-platinum_pick_query',
|
|
|
+ components: { FilterOption },
|
|
|
+ setup(props, context) {
|
|
|
+ const select = ref<SelectList[]>([
|
|
|
+ {
|
|
|
+ value: undefined,
|
|
|
+ key: 'userinfotype',
|
|
|
+ placeholder: '账号类型',
|
|
|
+ list: [
|
|
|
+ { value: 1, lable: '个人' },
|
|
|
+ { value: 2, lable: '企业' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+ // 商品
|
|
|
+ const goodsid = ref<Value | undefined>();
|
|
|
+ const goodsList = ref<SelectOption[]>([]);
|
|
|
+ const isOverTime = ref<boolean>(false);
|
|
|
+ // 机构列表
|
|
|
+ const userid = ref<Value | undefined>();
|
|
|
+ const areaList = ref<SelectOption[]>([]);
|
|
|
+ // 是否包含子级 1-包含
|
|
|
+ const includesub = ref<boolean>(false);
|
|
|
+ const input: InputList[] = [{ value: '', placeholder: '模糊搜索账号', key: 'filtername' }];
|
|
|
+
|
|
|
+ const date = ref<Moment[]>([]);
|
|
|
+
|
|
|
+ const param = {
|
|
|
+ search(result: any) {
|
|
|
+ result.includesub = includesub.value ? 1 : 0;
|
|
|
+ result.isOverTime = isOverTime.value;
|
|
|
+ result.goodsid = goodsid.value ? [goodsid.value.key] : [''];
|
|
|
+ result.userid = userid.value ? [userid.value.key] : [''];
|
|
|
+ // 处理范围时间内搜索
|
|
|
+ const time = date.value;
|
|
|
+ const temp = time.length > 1 ? getRangeTime(time[0], time[1]) : [''];
|
|
|
+ result.ordertime = temp;
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ includesub.value = false;
|
|
|
+ isOverTime.value = false;
|
|
|
+ goodsid.value = undefined;
|
|
|
+ userid.value = undefined;
|
|
|
+ date.value = [];
|
|
|
+ },
|
|
|
+ };
|
|
|
+ const { selectList, inputList, fixedBtnList } = handleFilter(select, input, context, param);
|
|
|
+ const { queryTable } = queryTableList<QhjParentAreaList>();
|
|
|
+ initData(() => {
|
|
|
+ goodsList.value = getGoodsList().map((e) => {
|
|
|
+ return { value: e.goodsid, lable: e.goodsname };
|
|
|
+ });
|
|
|
+
|
|
|
+ // 机构列表
|
|
|
+ queryTable(queryParentAreaList).then((res) => {
|
|
|
+ areaList.value = res.map((e) => {
|
|
|
+ return { value: e.userid, lable: e.accountname };
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ date,
|
|
|
+ isOverTime,
|
|
|
+ goodsid,
|
|
|
+ userid,
|
|
|
+ goodsList,
|
|
|
+ areaList,
|
|
|
+ includesub,
|
|
|
+ selectList,
|
|
|
+ inputList,
|
|
|
+ fixedBtnList,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.filterTable {
|
|
|
+ .commonPicker.ant-calendar-picker {
|
|
|
+ display: inline-flex;
|
|
|
+ padding-top: 9px;
|
|
|
+ padding-bottom: 6px;
|
|
|
+ margin-right: 10px;
|
|
|
+ .ant-input {
|
|
|
+ border: 0;
|
|
|
+ background: @m-grey9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>;
|
yu jie