@kengic/vue 0.30.1-beta.93 → 0.30.1-beta.95

package/component/KgVarConfig/components/search/KgVarConfig.Modal.Search.VarProfileMaster.service.tsx

@@ -0,0 +1,408 @@
+import { Icon } from '@iconify/vue';
+import { Checkbox, Select } from 'ant-design-vue';
+import { ColumnsType } from 'ant-design-vue/es/table';
+import { toCanvas } from 'html-to-image';
+import { compact, debounce, filter } from 'lodash-es';
+import { nextTick, onBeforeUnmount, Ref, UnwrapRef, watch } from 'vue';
+import { VarProfileDetail } from '../../../../api/WMS/models';
+import { useKg } from '../../../../config';
+import { KG__VAR_BUTTON__TYPE } from '../../../../model';
+import { KgUtil } from '../../../../util';
+import { useKgVar } from '../../../KgVar';
+import { FORM_ID__SEARCH__VAR_PROFILE_MASTER } from '../../KgVarConfig.model';
+
+/**
+ * 字段表格的列:左侧.
+ *
+ * @param hostFid 宿主界面标识.
+ */
+export function leftVarProfileDetailColumns(hostFid: string): ColumnsType<any> {
+    const kgVar = useKgVar(FORM_ID__SEARCH__VAR_PROFILE_MASTER);
+    const kgVar$Host = useKgVar(hostFid);
+
+    return [
+        {
+            dataIndex: 'index',
+            width: 40,
+            fixed: 'left',
+            align: 'center',
+            title: '#',
+            className: 'ant-table-cell--index',
+            customRender: ({ index }: { index: number }) => index + 1,
+        },
+        {
+            title: kgVar.t('var_nam').value,
+            dataIndex: 'var_nam',
+            width: 'auto',
+        },
+        {
+            dataIndex: 'var_nam',
+            width: 'auto',
+            title: kgVar.t('var_text').value,
+            customRender: ({ value }: { value: any }) => kgVar$Host.t(value).value,
+        },
+    ];
+}
+
+/**
+ * 字段表格的列:右侧.
+ *
+ * @param hostFid 宿主界面标识.
+ */
+export function rightVarProfileDetailColumns(hostFid: string): ColumnsType<any> {
+    const kg = useKg();
+
+    const kgVar = useKgVar(FORM_ID__SEARCH__VAR_PROFILE_MASTER);
+    const kgVar$Host = useKgVar(hostFid);
+
+    return compact([
+        {
+            dataIndex: 'index',
+            width: 40,
+            fixed: 'left',
+            align: 'center',
+            title: '#',
+            className: 'ant-table-cell--index',
+            customRender: ({ index }: { index: number }) => index + 1,
+        },
+        {
+            dataIndex: 'handler',
+            width: 32,
+            fixed: 'left',
+            align: 'center',
+            className: 'handler',
+            customCell: () => {
+                return { draggable: true };
+            },
+            customRender: () => <Icon icon="ant-design:holder-outlined" />,
+        },
+        {
+            dataIndex: 'var_nam',
+            width: 'auto',
+            fixed: 'left',
+            title: kgVar.t('var_nam').value,
+        },
+        {
+            dataIndex: 'var_nam',
+            width: 300,
+            title: kgVar.t('var_text').value,
+            customRender: ({ value }: { value: any }) => kgVar$Host.t(value).value,
+        },
+        {
+            dataIndex: 'exclude_from_where_sql_flag',
+            width: 220,
+            title: kgVar.t('exclude_from_where_sql_flag').value,
+            className: 'input',
+            customRender: ({ record }: { record: VarProfileDetail }) => {
+                return (
+                    <Checkbox
+                        checked={record.exclude_from_where_sql_flag === 1}
+                        onUpdate:checked={(value) => (record.exclude_from_where_sql_flag = value ? 1 : 0)}
+                        class="kg-not-clickable"
+                    />
+                );
+            },
+        },
+
+        // 只有在启用高级查询时, 才启用
+        kg.option.KgSearch?.dynamicQuery?.on !== true
+            ? null
+            : {
+                  dataIndex: 'use_underscore_when_dynamic_query_flag',
+                  width: 280,
+                  title: kgVar.t('use_underscore_when_dynamic_query_flag').value,
+                  className: 'input',
+                  customRender: ({ record }: { record: VarProfileDetail }) => {
+                      return (
+                          <Checkbox
+                              checked={record.use_underscore_when_dynamic_query_flag === 1}
+                              onUpdate:checked={(value) => (record.use_underscore_when_dynamic_query_flag = value ? 1 : 0)}
+                              disabled={kgVar.kgSubmit.formModel.value?.dyn_flg !== 1}
+                              class="kg-not-clickable"
+                          />
+                      );
+                  },
+              },
+
+        // 只有在启用高级查询时, 才启用
+        kg.option.KgSearch?.dynamicQuery?.on !== true
+            ? null
+            : {
+                  dataIndex: 'dft_dyn_op',
+                  width: 150,
+                  title: kgVar.t('dft_dyn_op').value,
+                  className: 'input',
+                  customRender: ({ record }: { record: VarProfileDetail }) => {
+                      const kgVar$Host = useKgVar(record.frm_id);
+                      const controlType = kgVar$Host.getVarConfigControl({ varName: record.var_nam, buttonType: KG__VAR_BUTTON__TYPE.SEARCH })?.ctrl_typ;
+
+                      return (
+                          <Select
+                              value={record.dft_dyn_op ?? undefined}
+                              onUpdate:value={(value) => (record.dft_dyn_op = value as any)}
+                              allowClear={true}
+                              disabled={kgVar.kgSubmit.formModel.value?.dyn_flg !== 1}
+                              class="kg-not-clickable kg-var-config--modal--search--var-profile-master--dynamic-operator-select"
+                              dropdownClassName="kg-var-config--modal--search--var-profile-master--dynamic-operator-select--dropdown"
+                          >
+                              {{
+                                  default: () => KgUtil.getDynamicQueryOperatorSelectOptions(controlType as any),
+                                  suffixIcon: () => <Icon icon="ant-design:caret-down-outlined" />,
+                              }}
+                          </Select>
+                      );
+                  },
+              },
+    ]);
+}
+
+//region _useDragToSortRow 拖拽修改行的顺序
+//----------------------------------------------------------------------------------------------------
+export type IUseDragRow = {};
+
+export function _useDragToSortRow(hostFid: string | null | undefined, varProfileDetails: Ref<UnwrapRef<Array<VarProfileDetail>>>, transferRightRows: Ref<UnwrapRef<Array<VarProfileDetail>>>): IUseDragRow {
+    /** 所有的行. */
+    let trs: Array<HTMLTableRowElement> | null | undefined = null;
+    /** 所有拖拽手柄. */
+    let tds: Array<HTMLTableCellElement> | null | undefined = null;
+    /** 正在被拖拽的行. */
+    let trDrag: HTMLTableRowElement | null = null;
+
+    /**
+     * 注册事件.
+     */
+    function addEventListeners() {
+        tds = filter(document.querySelectorAll<HTMLTableCellElement>(`tr[kg-host-frm_id="${hostFid}"] > td.handler`), () => true);
+        if (tds) {
+            for (let td of tds) {
+                // ------------------------------------------------------------ dragstart
+                // @ts-ignore
+                td.__kg__dragstart__ = async (event: DragEvent) => {
+                    trDrag = td.parentElement as HTMLTableRowElement;
+
+                    td.classList.add('dragging');
+                    td.parentElement!.classList.add('dragging');
+
+                    const span = document.createElement('span');
+                    span.setAttribute('id', '__kg_var_config__modal__search__var_profile_master__kg_submit__fields__drag_image__');
+
+                    const { width, height } = td.parentElement!.getBoundingClientRect();
+                    if (width && height) {
+                        span.style.width = `${width + 2}px`;
+                        span.style.height = `${height + 2}px`;
+                    }
+
+                    event.dataTransfer?.setDragImage(span, -10, (height + 2) / 2);
+
+                    const canvas = await toCanvas(td.parentElement!);
+
+                    span.appendChild(canvas);
+                    document.body.appendChild(span);
+
+                    event.dataTransfer?.setDragImage(span, -10, (height + 2) / 2);
+                };
+                // @ts-ignore
+                td.addEventListener('dragstart', td.__kg__dragstart__);
+
+                // ------------------------------------------------------------ dragend
+                // @ts-ignore
+                td.__kg__dragend__ = (event: DragEvent) => {
+                    td.classList.remove('dragging');
+                    td.parentElement!.classList.remove('dragging');
+
+                    const span = document.querySelector<HTMLSpanElement>('#__kg_var_config__modal__search__var_profile_master__kg_submit__fields__drag_image__');
+                    if (span) {
+                        document.body.removeChild(span);
+                    }
+                };
+                // @ts-ignore
+                td.addEventListener('dragend', td.__kg__dragend__);
+
+                // ------------------------------------------------------------ drag
+                // @ts-ignore
+                td.__kg__drag__ = (event: DragEvent) => {
+                    event.preventDefault();
+
+                    const span = document.querySelector<HTMLSpanElement>('#__kg_var_config__modal__search__var_profile_master__kg_submit__fields__drag_image__');
+                    if (span) {
+                        span.style.left = `${event.clientX + 10}px`;
+                        span.style.top = `${event.clientY - span.getBoundingClientRect().height / 2}px`;
+                    }
+                };
+                // @ts-ignore
+                td.addEventListener('drag', td.__kg__drag__, false);
+            }
+        }
+
+        trs = filter(document.querySelectorAll<HTMLTableRowElement>(`tr[kg-host-frm_id="${hostFid}"]`), () => true);
+        if (trs) {
+            for (let tr of trs) {
+                // ------------------------------------------------------------ dragover
+                // @ts-ignore
+                tr.__kg__dragover__ = (event: DragEvent) => {
+                    event.preventDefault();
+
+                    if (tr.rowIndex > (trDrag?.rowIndex ?? -1)) {
+                        tr.classList.add('dragover', 'dragover-right');
+                    } else if (tr.rowIndex < (trDrag?.rowIndex ?? -1)) {
+                        tr.classList.add('dragover', 'dragover-left');
+                    }
+                };
+                // @ts-ignore
+                tr.addEventListener('dragover', tr.__kg__dragover__, false);
+
+                // ------------------------------------------------------------ dragenter
+                // @ts-ignore
+                tr.__kg__dragenter__ = (event: DragEvent) => {
+                    if (tr.rowIndex > (trDrag?.rowIndex ?? -1)) {
+                        tr.classList.add('dragover', 'dragover-right');
+                    } else if (tr.rowIndex < (trDrag?.rowIndex ?? -1)) {
+                        tr.classList.add('dragover', 'dragover-left');
+                    }
+                };
+                // @ts-ignore
+                tr.addEventListener('dragenter', tr.__kg__dragenter__);
+
+                // ------------------------------------------------------------ dragleave
+                // @ts-ignore
+                tr.__kg__dragleave__ = (event: DragEvent) => {
+                    tr.classList.remove('dragover', 'dragover-right', 'dragover-left');
+                };
+                // @ts-ignore
+                tr.addEventListener('dragleave', tr.__kg__dragleave__);
+
+                // ------------------------------------------------------------ drop
+                // @ts-ignore
+                tr.__kg__drop__ = (event: DragEvent) => {
+                    event.preventDefault();
+
+                    const span = document.querySelector<HTMLSpanElement>('#__kg_var_config__modal__search__var_profile_master__kg_submit__fields__drag_image__');
+                    if (span) {
+                        document.body.removeChild(span);
+                    }
+
+                    tr.classList.remove('dragover', 'dragover-right', 'dragover-left');
+
+                    const fromVname = trDrag?.getAttribute('kg-var-name');
+                    const toVname = tr.getAttribute('kg-var-name');
+
+                    if (fromVname !== toVname) {
+                        KgUtil.showLoading();
+                        sort(fromVname, toVname);
+                    }
+                };
+                // @ts-ignore
+                tr.addEventListener('drop', tr.__kg__drop__);
+            }
+        }
+    }
+
+    /**
+     * 移除事件.
+     */
+    function removeEventListeners() {
+        if (tds) {
+            for (let td of tds) {
+                ['dragstart', 'dragend', 'drag'].forEach((event) => {
+                    const listener = `__kg__${event}__`;
+                    // @ts-ignore
+                    if (td[listener]) {
+                        // @ts-ignore
+                        td.removeEventListener(event, td[listener]);
+                        // @ts-ignore
+                        delete td[listener];
+                    }
+                });
+            }
+        }
+        if (trs) {
+            for (let tr of trs) {
+                ['dragover', 'dragenter', 'dragleave', 'drop'].forEach((event) => {
+                    const listener = `__kg__${event}__`;
+                    // @ts-ignore
+                    if (tr[listener]) {
+                        // @ts-ignore
+                        tr.removeEventListener(event, tr[listener]);
+                        // @ts-ignore
+                        delete tr[listener];
+                    }
+                });
+            }
+        }
+    }
+
+    /**
+     * 重新排序.
+     * @param fromVarName 被拽起的变量名称
+     * @param toVarName 被放下的变量名称.
+     */
+    function sort(fromVarName: string | null | undefined, toVarName: string | null | undefined) {
+        setTimeout(() => {
+            const fromIndex = varProfileDetails.value.findIndex((i) => i.var_nam === fromVarName);
+            const toIndex = varProfileDetails.value.findIndex((i) => i.var_nam === toVarName);
+            if (fromIndex === -1 || toIndex === -1) {
+                return;
+            }
+
+            const fromVarProfileDetail = varProfileDetails.value.find((i) => i.var_nam === fromVarName)!;
+
+            const newVarProfileDetails: Array<VarProfileDetail> = [];
+            varProfileDetails.value.forEach((value, index) => {
+                // 往前拖
+                if (fromIndex > toIndex) {
+                    if (index < toIndex) {
+                        newVarProfileDetails.push(value);
+                    } else if (index === toIndex) {
+                        newVarProfileDetails.push(fromVarProfileDetail);
+                        newVarProfileDetails.push(value);
+                    } else if (index > toIndex && index !== fromIndex) {
+                        newVarProfileDetails.push(value);
+                    }
+                }
+                // 往后拖
+                else if (fromIndex < toIndex) {
+                    if (index < fromIndex) {
+                        newVarProfileDetails.push(value);
+                    } else if (index === fromIndex) {
+                    } else {
+                        if (index === toIndex) {
+                            newVarProfileDetails.push(value);
+                            newVarProfileDetails.push(fromVarProfileDetail);
+                        } else {
+                            newVarProfileDetails.push(value);
+                        }
+                    }
+                }
+            });
+
+            newVarProfileDetails.forEach((value, index) => {
+                value.srtseq = index + 1;
+            });
+
+            varProfileDetails.value = newVarProfileDetails;
+
+            nextTick().finally(() => {
+                KgUtil.hideLoading();
+            });
+        });
+    }
+
+    const watchCb = debounce(
+        async () => {
+            removeEventListeners();
+            await nextTick();
+            addEventListeners();
+        },
+        200,
+        { leading: false, trailing: true },
+    );
+
+    watch(transferRightRows, watchCb);
+
+    onBeforeUnmount(() => {
+        removeEventListeners();
+    });
+
+    return {};
+}
+//endregion