shell导入导出

src/views/scriptDevelopment/shellDevelopment/index.vue

@@ -56,6 +56,7 @@
 <script lang="ts" setup>
   import { reactive, onMounted } from 'vue';
   import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { getRoleListByPage, deleteById, exportRoleList } from '@/api/system/role/role';
   import { PageWrapper } from '@/components/Page';
   import { useModal } from '@/components/Modal';
   import DataTree from './DataTree.vue';
@@ -69,6 +70,7 @@
   import MoveFile from './handleMove/moveFile.vue';
   import importModal from './importModal/importModal.vue';
   import { useMessage } from '@/hooks/web/useMessage';
+  import { downloadByData } from '@/utils/file/download';
 
   defineOptions({ name: 'AccountManagement' });
 
@@ -180,7 +182,12 @@
     });
   }
   /** 导出按钮*/
-  async function handleExport() {}
+  async function handleExport() {
+    console.log('导出----');
+    const params = Object.assign({}, getForm().getFieldsValue());
+    const data = await exportRoleList(params);
+    downloadByData(data, 'shell文件' + '.sh');
+  }
   /** 导入成功*/
   function handleImportSuccess() {
     reload();

src/views/scriptDevelopment/shellDevelopment/shellExecute/shellExecute.vue

@@ -102,6 +102,7 @@
     <PreviewModal @register="registerPreviewModal" />
     <RecordModal @register="registerRecordModal" />
     <SubmitModal @register="registerSubmitModal" />
+    <versionManagementModal @register="registerVersionManagementModal" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -123,6 +124,7 @@
   import RecordModal from './executeRecordModal.vue';
   import SubmitModal from './handleSubmit/submitModal.vue';
   import { schema } from '@/views/dataIntegration/taskOM/taskOM.data';
+  import versionManagementModal from './versionManagementModal.vue';
 
   defineOptions({ name: 'AccountManagement' });
 
@@ -140,6 +142,7 @@
   const [registerSubmitModal, { openModal: openSubmitModal }] = useModal();
   const [registerResultModal, { openModal: openResultModal }] = useModal();
   const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
+  const [registerVersionManagementModal, { openModal: openVersionManagementModal }] = useModal();
   const [registerRecordModal, { openModal: openRecordModal }] = useModal();
   const [registerForm] = useForm({
     labelWidth: 100,
@@ -174,9 +177,12 @@
       title: '提交版本',
     });
   }
+
   //编辑版本
   function handleVersion() {
-    createMessage.success('编辑版本成功');
+    openVersionManagementModal(true, {
+      title: '版本管理',
+    });
   }
   function handleChange() {
     createMessage.success('格式化成功');

src/views/scriptDevelopment/shellDevelopment/shellExecute/version.data.ts

+import { BasicColumn, FormSchema } from '@/components/Table';
+import { DescItem } from '@/components/Description';
+
+export const versionColumns: BasicColumn[] = [
+  {
+    title: '版本标题',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '上传日期',
+    dataIndex: 'uploadDate',
+    width: 120,
+  },
+  {
+    title: '副标题',
+    dataIndex: 'subTitle',
+    width: 120,
+  },
+];
+export const versionSchema = [
+  {
+    name: 'V1',
+    uploadDate: '2022/01/01 12:24:22',
+    subTitle: 'v21',
+  },
+  {
+    name: 'V2',
+    uploadDate: '2022/01/02 13:30:00',
+    subTitle: 'v22',
+  },
+];

src/views/scriptDevelopment/shellDevelopment/shellExecute/versionManagementModal.vue

+<template>
+  <BasicModal
+    width="40%"
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    @ok="handleSubmit"
+  >
+    <div style="display: flex">
+      <div class="w-full">
+        <BasicTable @register="registerTable">
+          <template #toolbar> </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <TableAction
+                :actions="[
+                  {
+                    icon: 'ant-design:eye-outlined',
+                    tooltip: '查看详情',
+                    onClick: handleDetail,
+                  },
+                  {
+                    icon: 'ant-design:edit-outlined',
+                    tooltip: '编辑',
+                    onClick: modEdit,
+                  },
+                  {
+                    icon: 'ant-design:rollback-outlined',
+                    tooltip: '回退版本',
+                    popConfirm: {
+                      title: '是否确认回退版本',
+                      confirm: handleVersionRollback,
+                    },
+                  },
+                ]"
+              />
+            </template>
+          </template>
+        </BasicTable>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { versionColumns, versionSchema } from './version.data';
+  import { message } from 'ant-design-vue';
+
+  const title = ref();
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+    title.value = data.title;
+  });
+  const [registerTable] = useTable({
+    dataSource: versionSchema,
+    columns: versionColumns,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+    },
+
+    showIndexColumn: false,
+  });
+  function handleDetail() {
+    console.log('查看详情');
+    closeModal();
+  }
+  function modEdit() {
+    console.log('编辑');
+    closeModal();
+  }
+  function handleVersionRollback() {
+    message.success('回退成功');
+    closeModal();
+  }
+  async function handleSubmit() {
+    closeModal();
+  }
+  onMounted(() => {});
+</script>