1

src/api/operate/index.ts

@@ -57,6 +57,11 @@ enum Api {
   checkDownLoad = '/service/manage/scene/checkDownLoad',
   downloadProcess = '/service/manage/scene/downloadProcess',
   rebuildScene = '/service/manage/scene/rebuildScene',
+  //案件
+  caseCheckDown = '/service/manage/offlinePackage/checkDown',
+  caseProcess = '/service/manage/offlinePackage/process',
+  caseDown = '/service/manage/offlinePackage/down',
+
   overallList = '/service/manage/overall/list',
   overallDelete = '/service/manage/overall/delete',
   agentAuditList = '/service/manage/agentAudit/list',
@@ -435,6 +440,37 @@ export const downloadProcess = (params: sceneControlParams) =>
       ignoreCancelToken: true,
     },
   });
+
+export const caseCheckDown = (params) =>
+  defHttp.get<checkDownLoadResult>({
+    url: Api.caseCheckDown,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+export const caseDown = (params) =>
+  defHttp.get<sceneDownloadResult>({
+    url: Api.caseDown,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+export const caseProcess = (params) =>
+  defHttp.get<sceneDownloadResult>({
+    url: Api.caseProcess,
+    params: params,
+    // data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
 export const sceneCopy = (params: sceneControlParams) =>
   defHttp.post<Result>({
     url: Api.sceneCopy,

src/components/Table/src/components/settings/ColumnSetting.vue

@@ -6,7 +6,7 @@
     <Popover
       placement="bottomLeft"
       trigger="click"
-      @visibleChange="handleVisibleChange"
+      @visible-change="handleVisibleChange"
       :overlayClassName="`${prefixCls}__cloumn-list`"
       :getPopupContainer="getPopupContainer"
     >
@@ -43,7 +43,7 @@
           <CheckboxGroup v-model:value="checkedList" @change="onChange" ref="columnListRef">
             <template v-for="item in plainOptions" :key="item.value">
               <div :class="`${prefixCls}__check-item`" v-if="!('ifShow' in item && !item.ifShow)">
-                <DragOutlined class="table-coulmn-drag-icon" />
+                <DragOutlined class="table-column-drag-icon" />
                 <Checkbox :value="item.value">
                   {{ item.label }}
                 </Checkbox>
@@ -111,19 +111,23 @@
     computed,
   } from 'vue';
   import { Tooltip, Popover, Checkbox, Divider } from 'ant-design-vue';
+  import type { CheckboxChangeEvent } from 'ant-design-vue/lib/checkbox/interface';
   import { SettingOutlined, DragOutlined } from '@ant-design/icons-vue';
-  import { Icon } from '/@/components/Icon';
+  import Icon from '/@/components/Icon/src/Icon.vue';
   import { ScrollContainer } from '/@/components/Container';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useTableContext } from '../../hooks/useTableContext';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import { useSortable } from '/@/hooks/web/useSortable';
+  // import { useSortable } from '/@/hooks/web/useSortable';
   import { isFunction, isNullAndUnDef } from '/@/utils/is';
   import { getPopupContainer as getParentContainer } from '/@/utils';
-  import { omit } from 'lodash-es';
+  import { cloneDeep, omit } from 'lodash-es';
+  import Sortablejs from 'sortablejs';
+  import type Sortable from 'sortablejs';
 
   interface State {
     checkAll: boolean;
+    isInit?: boolean;
     checkedList: string[];
     defaultCheckList: string[];
   }
@@ -157,11 +161,11 @@
       let inited = false;
 
       const cachePlainOptions = ref<Options[]>([]);
-      const plainOptions = ref<Options[]>([]);
+      const plainOptions = ref<Options[] | any>([]);
 
       const plainSortOptions = ref<Options[]>([]);
 
-      const columnListRef = ref<ComponentRef>(null);
+      const columnListRef = ref(null);
 
       const state = reactive<State>({
         checkAll: true,
@@ -180,9 +184,11 @@
 
       watchEffect(() => {
         const columns = table.getColumns();
-        if (columns.length) {
-          init();
-        }
+        setTimeout(() => {
+          if (columns.length && !state.isInit) {
+            init();
+          }
+        }, 0);
       });
 
       watchEffect(() => {
@@ -193,7 +199,7 @@
 
       function getColumns() {
         const ret: Options[] = [];
-        table.getColumns({ ignoreIndex: true, ignoreAction: false }).forEach((item) => {
+        table.getColumns({ ignoreIndex: true, ignoreAction: true }).forEach((item) => {
           ret.push({
             label: (item.title as string) || (item.customTitle as string),
             value: (item.dataIndex || item.title) as string,
@@ -207,7 +213,7 @@
         const columns = getColumns();
 
         const checkList = table
-          .getColumns({ ignoreAction: true })
+          .getColumns({ ignoreAction: true, ignoreIndex: true })
           .map((item) => {
             if (item.defaultHidden) {
               return '';
@@ -233,11 +239,12 @@
             }
           });
         }
+        state.isInit = true;
         state.checkedList = checkList;
       }
 
       // checkAll change
-      function onCheckAllChange(e: ChangeEvent) {
+      function onCheckAllChange(e: CheckboxChangeEvent) {
         const checkList = plainOptions.value.map((item) => item.value);
         if (e.target.checked) {
           state.checkedList = checkList;
@@ -250,16 +257,15 @@
 
       const indeterminate = computed(() => {
         const len = plainOptions.value.length;
-        let checkdedLen = state.checkedList.length;
-        unref(checkIndex) && checkdedLen--;
-        return checkdedLen > 0 && checkdedLen < len;
+        let checkedLen = state.checkedList.length;
+        // unref(checkIndex) && checkedLen--;
+        return checkedLen > 0 && checkedLen < len;
       });
 
       // Trigger when check/uncheck a column
       function onChange(checkedList: string[]) {
-        const len = plainOptions.value.length;
+        const len = plainSortOptions.value.length;
         state.checkAll = checkedList.length === len;
-
         const sortList = unref(plainSortOptions).map((item) => item.value);
         checkedList.sort((prev, next) => {
           return sortList.indexOf(prev) - sortList.indexOf(next);
@@ -267,6 +273,8 @@
         setColumns(checkedList);
       }
 
+      let sortable: Sortable;
+      let sortableOrder: string[] = [];
       // reset columns
       function reset() {
         state.checkedList = [...state.defaultCheckList];
@@ -274,6 +282,7 @@
         plainOptions.value = unref(cachePlainOptions);
         plainSortOptions.value = unref(cachePlainOptions);
         setColumns(table.getCacheColumns());
+        sortable.sort(sortableOrder);
       }
 
       // Open the pop-up window for drag and drop initialization
@@ -282,18 +291,21 @@
         nextTick(() => {
           const columnListEl = unref(columnListRef);
           if (!columnListEl) return;
-          const el = columnListEl.$el as any;
+          const el = (columnListEl as any).$el;
           if (!el) return;
           // Drag and drop sort
-          const { initSortable } = useSortable(el, {
-            handle: '.table-coulmn-drag-icon ',
+          sortable = Sortablejs.create(unref(el), {
+            animation: 500,
+            delay: 400,
+            delayOnTouchOnly: true,
+            handle: '.table-column-drag-icon ',
             onEnd: (evt) => {
               const { oldIndex, newIndex } = evt;
               if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
                 return;
               }
               // Sort column
-              const columns = getColumns();
+              const columns = cloneDeep(plainSortOptions.value);
 
               if (oldIndex > newIndex) {
                 columns.splice(newIndex, 0, columns[oldIndex]);
@@ -304,24 +316,29 @@
               }
 
               plainSortOptions.value = columns;
-              plainOptions.value = columns;
-              setColumns(columns);
+
+              setColumns(
+                columns
+                  .map((col: Options) => col.value)
+                  .filter((value: string) => state.checkedList.includes(value)),
+              );
             },
           });
-          initSortable();
+          // 记录原始order 序列
+          sortableOrder = sortable.toArray();
           inited = true;
         });
       }
 
       // Control whether the serial number column is displayed
-      function handleIndexCheckChange(e: ChangeEvent) {
+      function handleIndexCheckChange(e: CheckboxChangeEvent) {
         table.setProps({
           showIndexColumn: e.target.checked,
         });
       }
 
       // Control whether the check box is displayed
-      function handleSelectCheckChange(e: ChangeEvent) {
+      function handleSelectCheckChange(e: CheckboxChangeEvent) {
         table.setProps({
           rowSelection: e.target.checked ? defaultRowSelection : undefined,
         });
@@ -330,7 +347,9 @@
       function handleColumnFixed(item: BasicColumn, fixed?: 'left' | 'right') {
         if (!state.checkedList.includes(item.dataIndex as string)) return;
 
-        const columns = getColumns() as BasicColumn[];
+        const columns = getColumns().filter((c: BasicColumn) =>
+          state.checkedList.includes(c.dataIndex as string),
+        ) as BasicColumn[];
         const isFixed = item.fixed === fixed ? false : fixed;
         const index = columns.findIndex((col) => col.dataIndex === item.dataIndex);
         if (index !== -1) {
@@ -341,13 +360,13 @@
         if (isFixed && !item.width) {
           item.width = 100;
         }
-        table.setCacheColumnsByField?.(item.dataIndex, { fixed: isFixed });
+        table.setCacheColumnsByField?.(item.dataIndex as string, { fixed: isFixed });
         setColumns(columns);
       }
 
       function setColumns(columns: BasicColumn[] | string[]) {
         table.setColumns(columns);
-        const data: ColumnChangeParam[] = unref(plainOptions).map((col) => {
+        const data: ColumnChangeParam[] = unref(plainSortOptions).map((col) => {
           const visible =
             columns.findIndex(
               (c: BasicColumn | string) =>
@@ -390,15 +409,15 @@
 <style lang="less">
   @prefix-cls: ~'@{namespace}-basic-column-setting';
 
-  .table-coulmn-drag-icon {
+  .table-column-drag-icon {
     margin: 0 5px;
     cursor: move;
   }
 
   .@{prefix-cls} {
     &__popover-title {
-      position: relative;
       display: flex;
+      position: relative;
       align-items: center;
       justify-content: space-between;
     }
@@ -462,4 +481,4 @@
       }
     }
   }
-</style>
+</style>

src/views/case/DownLoadModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="系统正在为您打包数据"
+    :minHeight="0"
+    @visible-change="handleVisibleChange"
+    @cancel="hundleCancel"
+    @ok="handleSubmit"
+  >
+    <div class="pt-2px pr-3px">
+      <div class="warp">
+        <p>正在打包场景离线数据{{ downloadPercent }}</p>
+        <span>{{ modelRef.sceneName }}.zip</span>
+        <Progress :percent="downloadOption.percent" />
+        <p>* 打包完成后将关闭弹窗自动下载。</p>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, nextTick, onMounted, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { Progress } from 'ant-design-vue';
+  const { t } = useI18n();
+
+  export default defineComponent({
+    components: { BasicModal, Progress },
+    props: {
+      userData: { type: Object },
+      downloadOption: { type: Object },
+    },
+    emits: ['update', 'register', 'cancelDownload'],
+    setup(props, { emit }) {
+      const modelRef = ref({});
+
+      const { createMessage } = useMessage();
+
+      onMounted(() => {});
+      let addListFunc = () => {};
+      const [register, { closeModal }] = useModalInner((data) => {
+        // data && onDataReceive(data);
+        modelRef.value = data;
+      });
+
+      const handleSubmit = async () => {
+        console.log(props.downloadOption);
+        if (props.downloadOption.url) {
+          window.open(props.downloadOption.url);
+        }
+      };
+      const hundleCancel = async () => {
+        emit('cancelDownload');
+      };
+
+      return {
+        register,
+        modelRef,
+        handleSubmit,
+        hundleCancel,
+        addListFunc,
+        t,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped>
+  .pt-2px {
+  }
+  .warp {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    flex-flow: column;
+  }
+</style>

src/views/case/list.vue

@@ -30,7 +30,7 @@
                 {
                   label: '编辑',
                   //disabled: !(record.status == 1 || record.status == -2),
-                  ifShow: getTypeCheckPerm('scenes-edit') && tableType != 3 && record.isEdit,
+                  ifShow: getTypeCheckPerm('scenes-edit'),
                   onClick: handlegotoEdit.bind(null, record),
                 },
                 {
@@ -94,7 +94,7 @@
   } from '/@/components/Table';
   import { PageWrapper } from '/@/components/Page';
   import AddModal from './addCaseModal.vue'
-  import DownLoadModal from '/@/views/productOperation/modal/DownLoadModal.vue';
+  import DownLoadModal from './DownLoadModal.vue';
   import MoveModal from '/@/views/productOperation/modal/MoveModal.vue';
   import PowersModal from '/@/views/productOperation/modal/PowersModal.vue';
   import { Time } from '/@/components/Time';
@@ -108,7 +108,7 @@
     sceneDelete,
     sceneReset,
     sceneDownload,
-    checkDownLoad,
+    caseCheckDown,
     downloadProcess,
     sceneCopy,
     rebuildScene,
@@ -117,6 +117,8 @@
     sceneCount,
     caseDelApi,
     caseListApi,
+    caseProcess,
+    caseDown,
   } from '/@/api/operate';
   import { message } from 'ant-design-vue';
   import { usePermissionStore } from '/@/store/modules/permission';
@@ -392,11 +394,11 @@
         console.log('handleDownload', record, canDownload.value);
         canDownload.value = true;
         let isObj = tableType.value == 5 || tableType.value == 7 ? 1 : 0;
-        checkDownLoad({ num: record.num, isObj }).then((res) => {
+        caseCheckDown({ caseId: record.caseId }).then((res) => {
           console.log(res);
           if (res.downloadStatus != 3) {
             // 未下载过，需要打包
-            sceneDownload({ num: record.num, isObj }).then((res) => {
+            caseDown({ caseId: record.caseId }).then((res) => {
               console.log(res);
               openDownModal(true, {
                 ...record,
@@ -406,7 +408,7 @@
                   afterClose();
                 }
                 timer.value = setInterval(() => {
-                  downloadProcess({ num: record.num, isObj }).then((res) => {
+                  caseProcess({ caseId: record.caseId, }).then((res) => {
                     if (res.status == '1003') {
                       createMessage.error('下载失败');
                       afterClose();