|
|
@@ -0,0 +1,358 @@
|
|
|
+import { css } from "@linaria/core";
|
|
|
+
|
|
|
+import { RightOutlined, DownOutlined } from "@ant-design/icons-vue";
|
|
|
+import { Button, Checkbox, Tooltip } from "ant-design-vue";
|
|
|
+import { defineComponent, reactive, watch } from "vue";
|
|
|
+import { any, string } from "vue-types";
|
|
|
+import { cloneDeep } from "lodash";
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ props: {
|
|
|
+ options: any().isRequired,
|
|
|
+ value: any().isRequired,
|
|
|
+ },
|
|
|
+ emits: ["change"],
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const state = reactive({
|
|
|
+ overlayVisible: false,
|
|
|
+ selected: [] as any,
|
|
|
+ indeterminate: [] as any,
|
|
|
+ categoryMap: new Map<string, any>(),
|
|
|
+ value: {} as any,
|
|
|
+ });
|
|
|
+ function toggleFilter(visible: boolean) {
|
|
|
+ state.overlayVisible = visible;
|
|
|
+ }
|
|
|
+ watch(
|
|
|
+ () => props.options,
|
|
|
+ () => {
|
|
|
+ initCateMap(props.options);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ watch(
|
|
|
+ () => props.value,
|
|
|
+ () => {
|
|
|
+ state.value = cloneDeep(props.value);
|
|
|
+ state.indeterminate = [];
|
|
|
+ initIndeterminate(props.value);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ const initCateMap = (options: any, parent = "") => {
|
|
|
+ options.map((e: any) => {
|
|
|
+ if (e.children) {
|
|
|
+ state.categoryMap.set(e.id, {
|
|
|
+ parent: parent,
|
|
|
+ children: e.children,
|
|
|
+ });
|
|
|
+ initCateMap(e.children, e.id);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ initCateMap(props.options);
|
|
|
+ const initIndeterminate = (value: any) => {
|
|
|
+ const values = cloneDeep(value);
|
|
|
+ Object.keys(values).map((e: string) => {
|
|
|
+ const item = state.categoryMap.get(e);
|
|
|
+ if (!item || !item.children) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ initInChildren(item.parent, item.children, values[e]);
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const initInChildren = (parent: string, children: any, id: string) => {
|
|
|
+ for (let i = 0; i < children.length; i++) {
|
|
|
+ if (children[i].id == id) {
|
|
|
+ setIndeterminateVal(true, parent, id);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ children[i].children &&
|
|
|
+ initInChildren(children[i].id, children[i].children, id);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const getRootParent = (id: string): string => {
|
|
|
+ const item = state.categoryMap.get(id);
|
|
|
+ if (!item.parent) {
|
|
|
+ return id;
|
|
|
+ } else {
|
|
|
+ return getRootParent(item.parent);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ function reset() {
|
|
|
+ state.overlayVisible = false;
|
|
|
+ state.selected = [];
|
|
|
+ state.indeterminate = [];
|
|
|
+ state.value = {};
|
|
|
+ emit("change", undefined);
|
|
|
+ }
|
|
|
+
|
|
|
+ function submit() {
|
|
|
+ state.overlayVisible = false;
|
|
|
+ emit("change", state.value);
|
|
|
+ }
|
|
|
+ const selectItem = (id: string | null, index: number) => {
|
|
|
+ let selected = [...state.selected];
|
|
|
+ if (index > selected.length - 1) {
|
|
|
+ selected.push(id);
|
|
|
+ } else {
|
|
|
+ if (selected[index + 1]) {
|
|
|
+ selected.splice(index + 1, selected.length - 1);
|
|
|
+ }
|
|
|
+ selected.splice(index, 1, id);
|
|
|
+ }
|
|
|
+
|
|
|
+ state.selected = selected;
|
|
|
+ };
|
|
|
+ const changeSelectValue = (e: any, id: string, parent: string) => {
|
|
|
+ const checked = e.target?.checked;
|
|
|
+ const rootParent = getRootParent(parent);
|
|
|
+ if (checked) {
|
|
|
+ state.value[rootParent] = id;
|
|
|
+ } else {
|
|
|
+ state.value[rootParent] = undefined;
|
|
|
+ }
|
|
|
+ setIndeterminateVal(checked, parent, id);
|
|
|
+ };
|
|
|
+ const setIndeterminateVal = (add: boolean, parent: string, id: string) => {
|
|
|
+ if (add) {
|
|
|
+ const sameLevel = state.categoryMap.get(parent);
|
|
|
+ if (sameLevel && sameLevel.children) {
|
|
|
+ sameLevel.children.map((e: any) => {
|
|
|
+ const index = state.indeterminate.indexOf(e.id);
|
|
|
+ if (index != -1) {
|
|
|
+ state.indeterminate.splice(index, 1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const index = state.indeterminate.indexOf(id);
|
|
|
+ if (index != -1) {
|
|
|
+ state.indeterminate.splice(index, 1);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (state.indeterminate.includes(parent)) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ state.indeterminate.push(parent);
|
|
|
+ } else {
|
|
|
+ const index = state.indeterminate.indexOf(parent);
|
|
|
+ if (index == -1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ state.indeterminate.splice(index, 1);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ function renderOverlay() {
|
|
|
+ return (
|
|
|
+ <div class={OverlayStyle}>
|
|
|
+ <div class={"cate_wapper"}>
|
|
|
+ <div class={"wapper_item"}>
|
|
|
+ {props.options.map((category: any) => {
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ class="cate_item"
|
|
|
+ onMouseenter={() => {
|
|
|
+ selectItem(category.id, 0);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ "cate_text_item",
|
|
|
+ state.value[category.id] ? "active" : null,
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ {category.name}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ {state.selected.map((select: string, index: number) => {
|
|
|
+ const categories = state.categoryMap.get(select);
|
|
|
+ return categories ? (
|
|
|
+ <div class={"wapper_item"}>
|
|
|
+ {categories.children.map((item: any) => {
|
|
|
+ const rootParent = getRootParent(select);
|
|
|
+ return (
|
|
|
+ <div
|
|
|
+ class="cate_item"
|
|
|
+ onMouseenter={() => {
|
|
|
+ selectItem(item.id, index + 1);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Checkbox
|
|
|
+ checked={state.value[rootParent] == item.id}
|
|
|
+ indeterminate={state.indeterminate.includes(item.id)}
|
|
|
+ onChange={(e) => {
|
|
|
+ changeSelectValue(e, item.id, select);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {item.name}
|
|
|
+ {item.children && item.children.length > 0 && (
|
|
|
+ <RightOutlined class={"arrow"} />
|
|
|
+ )}
|
|
|
+ </Checkbox>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ ) : null;
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="overlay_footer">
|
|
|
+ <Button class={"reset"} onClick={reset}>
|
|
|
+ 重置
|
|
|
+ </Button>
|
|
|
+ <Button type="primary" onClick={submit}>
|
|
|
+ 确定
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ return () => {
|
|
|
+ return (
|
|
|
+ <div class={RootStyle}>
|
|
|
+ <Tooltip
|
|
|
+ visible={state.overlayVisible}
|
|
|
+ overlayClassName={OverlayClass}
|
|
|
+ destroyTooltipOnHide={true}
|
|
|
+ placement="rightTop"
|
|
|
+ trigger="click"
|
|
|
+ title={renderOverlay()}
|
|
|
+ onVisibleChange={toggleFilter}
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ BtnStyle,
|
|
|
+ Object.keys(state.value).length != 0 ? "active" : null,
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ 筛选 <DownOutlined style={{ fontSize: "12px" }} />
|
|
|
+ </div>
|
|
|
+ </Tooltip>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const RootStyle = css`
|
|
|
+ /* .ant-cascader-input.ant-input {
|
|
|
+ outline: none;
|
|
|
+ box-shadow: none;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ padding-top: 2px;
|
|
|
+ padding-bottom: 2px;
|
|
|
+ }
|
|
|
+ .ant-cascader-picker-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #4c4c4c;
|
|
|
+ }
|
|
|
+ .ant-cascader-picker-clear,
|
|
|
+ .ant-cascader-picker-arrow {
|
|
|
+ right: 10px;
|
|
|
+ } */
|
|
|
+`;
|
|
|
+const BtnStyle = css`
|
|
|
+ padding-left: 12px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ background-color: #303030;
|
|
|
+ &.active {
|
|
|
+ background-color: rgba(234, 158, 64, 0.2);
|
|
|
+ color: @inf-primary-color;
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+const OverlayClass = css`
|
|
|
+ max-width: 450px;
|
|
|
+ .ant-tooltip-arrow {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .ant-tooltip-inner {
|
|
|
+ padding: 0;
|
|
|
+ background-color: #303030;
|
|
|
+ }
|
|
|
+`;
|
|
|
+const OverlayStyle = css`
|
|
|
+ .cate_wapper {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ .wapper_item {
|
|
|
+ flex: auto;
|
|
|
+ width: 150px;
|
|
|
+ height: 280px;
|
|
|
+ overflow: auto;
|
|
|
+ border-left: 1px solid #1f1f1f;
|
|
|
+ &:first-child {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+ .cate_item {
|
|
|
+ .ant-checkbox-wrapper,
|
|
|
+ .cate_text_item {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ &:hover {
|
|
|
+ background-color: #404040;
|
|
|
+ }
|
|
|
+ .arrow {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cate_text_item {
|
|
|
+ &.active {
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 30px;
|
|
|
+ width: 5px;
|
|
|
+ height: 9px;
|
|
|
+ display: block;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-top: 0;
|
|
|
+ border-left: 0;
|
|
|
+ transform: rotate(45deg) scale(1) translateY(-9px);
|
|
|
+ opacity: 1;
|
|
|
+ transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
|
|
|
+ content: " ";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .overlay_footer {
|
|
|
+ text-align: right;
|
|
|
+ padding: 16px 20px;
|
|
|
+ border-top: 1px solid #1f1f1f;
|
|
|
+ .reset {
|
|
|
+ margin-right: 16px;
|
|
|
+ background-color: rgba(64, 64, 64, 1);
|
|
|
+ border-color: rgba(64, 64, 64, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(64, 64, 64, 0.8);
|
|
|
+ border-color: rgba(64, 64, 64, 0.8);
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ }
|
|
|
+ &:active {
|
|
|
+ background-color: rgba(64, 64, 64, 1);
|
|
|
+ border-color: rgba(64, 64, 64, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+`;
|
