文件共享-界面提交

src/views/vent/performance/comment/DeviceModal.vue

@@ -0,0 +1,58 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    width="900px"
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    :footer="null"
+    destroyOnClose
+  >
+    <FormModal :record="record" @saveOrUpdate="(values) => emit('saveOrUpdate', values)" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { computed, unref, inject, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import FormModal from './FormModal.vue';
+
+  // 声明Emits
+  const emit = defineEmits(['saveOrUpdate', 'register']);
+  const isUpdate = inject('isUpdate');
+  const record = reactive({ strtype: '', strname: '' });
+
+  //表单赋值
+  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
+    //重置表单
+    setModalProps({ confirmLoading: false });
+    Object.assign(record, data.record);
+  });
+
+  //设置标题
+  const title = computed(
+    () => {
+      if (!unref(isUpdate)) {
+        if (record.strname || record.systemname) {
+          return `新增（${record.strname || record.systemname}）`;
+        }
+        return `新增`;
+      } else {
+        if (record.strname || record.systemname) {
+          return `编辑（${record.strname || record.systemname}）`;
+        }
+        return `编辑`;
+      }
+    }
+
+    // !unref(isUpdate) ? `新增（${record.strname || record.systemname}）` : `编辑（${record.strname || record.systemname}）`
+  );
+</script>
+<style scoped lang="less">
+  ::v-deep .suffix {
+    height: 32px;
+    line-height: 32px;
+    margin-left: 5px;
+    color: #fff;
+  }
+</style>

src/views/vent/performance/comment/FormModal.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="vent-form">
+    <BasicForm @register="registerForm" />
+    <div class="j-box-bottom-button offset-20" style="margin-top: 30px">
+      <div class="j-box-bottom-button-float">
+        <a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
+        <a-button type="primary" preIcon="ant-design:save-filled" @click="handleSubmit">保存</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { inject, nextTick, watch } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form/index';
+  // 声明Emits
+  const emit = defineEmits(['saveOrUpdate']);
+  const testData = inject('formData') as any;
+  //表单配置
+  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+    schemas: inject('formSchema'),
+    showActionButtonGroup: false,
+  });
+
+  watch(
+    testData,
+    (newV) => {
+      nextTick(() => {
+        setFieldsValue({ ...newV });
+      });
+    },
+    { immediate: true }
+  );
+
+  // 重置表单
+  async function onReset() {
+    await resetFields();
+    await setFieldsValue({ ...testData });
+  }
+  //表单提交事件
+  async function handleSubmit(v) {
+    try {
+      let values = await validate();
+      emit('saveOrUpdate', values);
+    } finally {
+      // setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+<style lang="less" scoped>
+  @ventSpace: zxm;
+  .j-box-bottom-button-float {
+    border: none !important;
+    padding-bottom: 30px;
+    left: 0px !important;
+    right: 0px !important;
+    bottom: 0px !important;
+  }
+  .vent-form {
+    .@{ventSpace}-select-selection-item {
+      color: rgba(255, 255, 255, 1) !important;
+    }
+  }
+</style>

src/views/vent/comment/fileTable.vue → src/views/vent/performance/comment/NormalTable.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
     <BasicTable @register="registerTable">
+      <template #tableTitle>
+        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
+      </template>
       <template #action="{ record }">
         <TableAction :actions="getActions(record)" :dropDownActions="getDropDownAction(record)" />
       </template>
@@ -8,7 +11,7 @@
         <slot name="filterCell" v-bind="{ column, record }"></slot>
       </template>
     </BasicTable>
-    <DeviceModal @register="registerModal" @saveOrUpdate="saveOrUpdateHandler" :showTab="showTab" :deviceType="deviceType" />
+    <DeviceModal @register="registerModal" @saveOrUpdate="saveOrUpdateHandler" :deviceType="deviceType" />
   </div>
 </template>
 
@@ -17,9 +20,7 @@
   import { ref, provide, reactive, toRaw, defineExpose } from 'vue';
   import { BasicTable, TableAction } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
-  import DeviceModal from '../deviceManager/comment/DeviceModal.vue';
-  // import { getToken } from '/@/utils/auth';
-  // import { useGlobSetting } from '/@/hooks/setting';
+  import DeviceModal from './DeviceModal.vue';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   import { useListPage } from '/@/hooks/system/useListPage';
 
@@ -33,11 +34,11 @@
       // required: true,
       default: () => [],
     },
-    // searchFormSchema: {
-    //   type: Array,
-    //   required: true,
-    //   default: () => [],
-    // },
+    searchFormSchema: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
     formSchema: {
       type: Array,
       required: true,
@@ -46,22 +47,22 @@
       type: Function,
       required: true,
     },
-    getImportUrl: {
-      type: String,
-      required: true,
-    },
-    getExportUrl: {
-      type: String,
-      required: true,
-    },
+    // getImportUrl: {
+    //   type: String,
+    //   required: true,
+    // },
+    // getExportUrl: {
+    //   type: String,
+    //   required: true,
+    // },
     deleteById: {
       type: Function,
       required: true,
     },
-    batchDelete: {
-      type: Function,
-      // required: true,
-    },
+    // batchDelete: {
+    //   type: Function,
+    //   // required: true,
+    // },
     saveOrUpdate: {
       type: Function,
       required: true,
@@ -70,10 +71,6 @@
       type: Function,
       // required: true,
     },
-    showTab: {
-      type: Boolean,
-      default: false,
-    },
     designScope: {
       type: String,
     },
@@ -99,17 +96,15 @@
   console.log('aaa', columnList);
 
   // 列表页面公共参数、方法
-  const { prefixCls, tableContext, onExportXls, onImportXls, doRequest } = useListPage({
+  const { tableContext, doRequest } = useListPage({
     designScope: props.designScope,
     tableProps: {
       title: props.title,
       api: props.list,
       columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
-      showIndexColumn: true,
       // size: 'small',
       // bordered: false,
       formConfig: {
-        showActionButtonGroup: false,
         // labelWidth: 100,
         labelAlign: 'left',
         labelCol: {
@@ -120,23 +115,24 @@
           xl: 7,
           xxl: 5,
         },
-        // schemas: props.searchFormSchema as any[],
+        schemas: props.searchFormSchema as any[],
       },
       striped: true,
+      showIndexColumn: true, //是否显示序列号
       actionColumn: {
-        width: 270,
+        width: 300,
       },
       beforeFetch: (params) => {
         return Object.assign({ column: 'createTime', order: 'desc' }, params);
       },
     },
-    exportConfig: {
-      name: props.title,
-      url: props.getExportUrl,
-    },
-    importConfig: {
-      url: props.getImportUrl,
-    },
+    // exportConfig: {
+    //   name: props.title,
+    //   url: props.getExportUrl,
+    // },
+    // importConfig: {
+    //   url: props.getImportUrl,
+    // },
   });
 
   //注册table数据
@@ -145,7 +141,7 @@
   const saveOrUpdateHandler = async (params) => {
     try {
       await props.saveOrUpdate(params, isUpdate.value);
-      !props.showTab ? closeModal() : '';
+      closeModal();
       await doRequest(props.list, { confirm: false });
     } catch (error) {
       message.error('保存失败，请联系管理员');
@@ -181,12 +177,12 @@
     await props.deleteById({ id: record }, reload);
   }
 
-  /**
-   * 批量删除事件
-   */
-  async function batchHandleDelete() {
-    doRequest(() => props.batchDelete({ ids: selectedRowKeys.value }));
-  }
+  // /**
+  //  * 批量删除事件
+  //  */
+  // async function batchHandleDelete() {
+  //   doRequest(() => props.batchDelete({ ids: selectedRowKeys.value }));
+  // }
   /**
    * 查看
    */
@@ -201,22 +197,13 @@
   function getActions(record) {
     return [
       {
-        label: '编辑',
-        onClick: handleEdit.bind(null, record),
-      },
-      {
         label: '详情',
         onClick: handleEdit.bind(null, record),
       },
       {
-        label: '下载',
-        onClick: handleEdit.bind(null, record),
-      },
-      {
-        label: '审批流',
+        label: '编辑',
         onClick: handleEdit.bind(null, record),
       },
-
       {
         label: '删除',
         popConfirm: {
@@ -224,6 +211,14 @@
           confirm: handleDelete.bind(null, record),
         },
       },
+      {
+        label: '下载',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '审批',
+        onClick: handleEdit.bind(null, record),
+      },
       // {
       //   label: '查看',
       //   onClick: handleDetail.bind(null, record),
@@ -324,7 +319,4 @@
   //     }
   //   }
   // }
-  ::v-deep .zxm-table-title {
-    display: none;
-  }
 </style>

src/views/vent/performance/comment/fileMenuModal.vue

@@ -0,0 +1,30 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    :title="title"
+    width="900px"
+    :showCancelBtn="false"
+    :showOkBtn="false"
+    :footer="null"
+    destroyOnClose
+  >
+    <fileModal @saveOrUpdate="(values) => emit('saveOrUpdate', values)" />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import fileModal from './fileModal.vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ref } from 'vue';
+  const emit = defineEmits(['saveOrUpdate', 'register']);
+  //弹窗标题
+  let title = ref('编辑目录');
+  //弹窗赋值
+  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
+    //重置弹窗
+    setModalProps({ confirmLoading: false });
+    // Object.assign(record, data.record);
+  });
+</script>
+
+<style lang="less" scoped></style>

src/views/vent/performance/comment/fileModal.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="title">目录类型 : </div>
+  <div class="content">
+    <template v-for="(tag, index) in state.tags" :key="tag">
+      <a-tag :closable="index !== 0" @close="handleClose(tag)">
+        {{ tag }}
+      </a-tag>
+    </template>
+    <a-input
+      v-if="state.inputVisible"
+      ref="inputRef"
+      v-model:value="state.inputValue"
+      type="text"
+      size="small"
+      :style="{ width: '78px' }"
+      @blur="handleInputConfirm"
+      @keyup.enter="handleInputConfirm"
+    />
+    <a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
+      <plus-outlined />
+      新增目录
+    </a-tag>
+  </div>
+  <div class="footer">
+    <a-button style="margin-right: 10px" type="primary" @click="handleSubmit">保存</a-button>
+    <a-button type="primary" @click="handleSubmit">取消</a-button>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, toRefs, nextTick } from 'vue';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  components: {
+    PlusOutlined;
+  }
+  // 声明Emits
+  const emit = defineEmits(['saveOrUpdate']);
+  const inputRef = ref();
+  const state = reactive({
+    tags: ['台账类文件', '法律法规', '其他', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17'],
+    inputVisible: false,
+    inputValue: '',
+  });
+  const handleClose = (removedTag: string) => {
+    const tags = state.tags.filter((tag) => tag !== removedTag);
+    console.log(tags);
+    state.tags = tags;
+  };
+  const showInput = () => {
+    state.inputVisible = true;
+    nextTick(() => {
+      inputRef.value.focus();
+    });
+  };
+  const handleInputConfirm = () => {
+    const inputValue = state.inputValue;
+    let tags = state.tags;
+    if (inputValue && tags.indexOf(inputValue) === -1) {
+      tags = [...tags, inputValue];
+    }
+    console.log(tags);
+    Object.assign(state, {
+      tags,
+      inputVisible: false,
+      inputValue: '',
+    });
+  };
+  //表单提交事件
+  async function handleSubmit(v) {
+    try {
+      //   emit('saveOrUpdate', values);
+      emit('saveOrUpdate', false);
+    } finally {
+      // setModalProps({ confirmLoading: false });
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .title {
+    margin-bottom: 10px;
+  }
+  .footer {
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
+  }
+  ::v-deep .zxm-tag {
+    margin-bottom: 10px;
+    border-color: #3ad8ff77;
+    background-color: #ffffff00 !important;
+    color: #fff;
+  }
+  ::v-deep .zxm-tag-close-icon {
+    color: #fff;
+  }
+</style>

src/views/vent/performance/fileDetail/fileDetail.data.ts

@@ -15,6 +15,14 @@ export const treeData: TreeItem[] = [
     ],
   },
 ];
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '文件名称',
+    field: 'fileName',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
 
 export const columns: BasicColumn[] = [
   {
@@ -102,6 +110,6 @@ export const formSchema: FormSchema[] = [
   {
     label: '文件路径',
     field: 'fileServerPath',
-    component: 'Upload',
+    component: 'Input',
   },
 ];

src/views/vent/performance/fileDetail/index.vue

@@ -3,56 +3,59 @@
     <div class="title">文件共享中心</div>
     <div class="content">
       <div class="left-box">
-        <a-button type="primary" style="margin-bottom: 15px">编辑目录</a-button>
+        <a-button type="primary" style="margin-bottom: 15px" @click="editMenu">编辑目录</a-button>
         <BasicTree :expandedKeys="expandedKeys" :treeData="treeData" />
       </div>
       <div class="right-box">
-        <div>
-          <a-input v-model:value="fileName" placeholder="请输入你需要搜索的文件名称" style="width: 320px; margin-right: 15px">
-            <template #suffix>
-              <a-tooltip title="Extra information">
-                <search-outlined />
-              </a-tooltip>
-            </template>
-          </a-input>
-          <a-button preIcon="ant-design:plus-outlined" type="primary">查询</a-button>
-          <a-button preIcon="ant-design:plus-outlined" type="primary" style="margin: 0px 15px">文件上传</a-button>
-          <a-button preIcon="ant-design:plus-outlined" type="primary">新建在线文档</a-button>
-        </div>
-        <!-- table -->
-        <fileTable
+        <NormalTable
           :columns="columns"
+          :searchFormSchema="searchFormSchema"
           :list="list"
           :formSchema="formSchema"
           :deleteById="deleteById"
           :saveOrUpdate="saveOrUpdate"
           designScope="file-detail"
-          title="文件共享详情"
+          title="文件详情"
           :showTab="false"
         />
       </div>
     </div>
+    <!-- 编辑目录 -->
+    <fileMenuDialog @register="registerModal" @saveOrUpdate="saveOrUpdateHandler" />
   </div>
 </template>
 <script lang="ts" setup name="system-user">
+  import { useModal } from '/@/components/Modal';
+  import fileMenuDialog from '../comment/fileMenuModal.vue';
   import { ref, onMounted } from 'vue';
   import { BasicTree } from '/@/components/Tree/index';
   import { treeData } from './fileDetail.data';
   import { CollapseContainer } from '/@/components/Container/index';
-  import { SearchOutlined } from '@ant-design/icons-vue';
-  import fileTable from '../../comment/fileTable.vue';
-  import { columns, formSchema } from './fileDetail.data';
+  import NormalTable from '../comment/NormalTable.vue';
+  import { columns, searchFormSchema, formSchema } from './fileDetail.data';
+  import { getTree, list, deleteById, saveOrUpdate } from './fileDetail.api';
 
-  import { list, deleteById, saveOrUpdate } from './fileDetail.api';
   components: {
     CollapseContainer;
   }
+
   const expandedKeys = ref<string[]>(['0-0']); //默认展开树节点
   let fileName = ref('');
   // let getTreeList = async () => {
   //   let data = await getTree({ parentId: '' });
   //   console.log(data, 'data');
   // };
+
+  //注册弹窗
+  const [registerModal, { openModal, closeModal }] = useModal();
+  //编辑目录
+  let editMenu = () => {
+    openModal(true);
+  };
+  //关闭目录弹窗
+  let saveOrUpdateHandler = () => {
+    closeModal();
+  };
   onMounted(() => {
     // getTreeList();
   });
@@ -92,7 +95,7 @@
       .right-box {
         width: 85%;
         height: calc(100% - 20px);
-        padding: 10px 0px 0px 15px;
+        padding: 0px 0px 0px 15px;
         box-sizing: border-box;
       }
     }
@@ -104,6 +107,6 @@
     opacity: 0;
   }
   ::v-deep .jeecg-basic-table-form-container {
-    padding: 10px 0px;
+    padding: 0px 0px;
   }
 </style>