文件中心功能开发

src/api/sys/oss.js

@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+const ossApi = {
+  list: '/sys/oss/list'
+}
+
+export function ossList (params) {
+  return request({
+    url: ossApi.list,
+    method: 'get',
+    params: params
+  })
+}

src/config/router.config.js

@@ -62,6 +62,12 @@ export const asyncRouterMap = [
             name: 'DictionaryList',
             component: () => import('@/views/sys/dictionary/DictionaryList'),
             meta: { title: '数据词典', keepAlive: true }
+          },
+          {
+            path: '/sys/oss',
+            name: 'OssList',
+            component: () => import('@/views/sys/oss/OssList'),
+            meta: { title: '文件中心', keepAlive: true }
           }
         ]
       },

src/views/sys/oss/OssDetail.vue

@@ -0,0 +1,42 @@
+<template>
+  <a-drawer
+    title="文件详情"
+    width="640"
+    placement="right"
+    :visible="visible"
+    @close="onClose">
+    <a-descriptions :column="1">
+      <a-descriptions-item label="附件ID">{{ model.id }}</a-descriptions-item>
+      <a-descriptions-item label="来源ID">{{ model.sourceId }}</a-descriptions-item>
+      <a-descriptions-item label="附件名称">{{ model.fileName }}</a-descriptions-item>
+      <a-descriptions-item label="附件新名称">{{ model.newName }}</a-descriptions-item>
+      <a-descriptions-item label="附件类型">{{ model.fileType }}</a-descriptions-item>
+      <a-descriptions-item label="附件存放地址">{{ model.realPath }}</a-descriptions-item>
+      <a-descriptions-item label="URL地址">{{ model.url }}</a-descriptions-item>
+      <a-descriptions-item label="创建时间">{{ model.createTime | moment('YYYY-MM-DD HH:mm:ss') }}</a-descriptions-item>
+      <a-descriptions-item label="最近修改">{{ model.updateTime | moment('YYYY-MM-DD HH:mm:ss') }}</a-descriptions-item>
+    </a-descriptions>
+  </a-drawer>
+</template>
+
+<script>
+
+export default {
+  data () {
+    return {
+      model: {},
+      visible: false
+    }
+  },
+  methods: {
+    show (obj) {
+      this.visible = true
+      this.model = obj
+    },
+    onClose () {
+      this.model = {}
+      this.visible = false
+    }
+  }
+}
+</script>

src/views/sys/oss/OssList.vue

@@ -0,0 +1,122 @@
+<template>
+  <page-header-wrapper :title="false">
+    <a-card :bordered="false">
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline">
+          <a-row :gutter="48">
+            <a-col :md="6" :sm="24">
+              <a-form-item label="附件名称">
+                <a-input v-model="queryParam.fileName" placeholder="附件名称" @pressEnter="handleRefresh"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-button type="primary" @click="handleRefresh">查询</a-button>
+              <a-button @click="() => {queryParam = {}, handleRefresh()}">重置</a-button>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <s-table
+        ref="table"
+        size="default"
+        rowKey="id"
+        :columns="columns"
+        :data="loadData"
+      >
+        <template slot="createTime" slot-scope="text, record">
+          {{ record.createTime | moment('YYYY-MM-DD HH:mm:ss') }}
+        </template>
+        <template slot="updateTime" slot-scope="text, record">
+          {{ record.updateTime | moment('YYYY-MM-DD HH:mm:ss') }}
+        </template>
+        <template slot="action" slot-scope="text, record">
+          <a href="javascript:;" @click="handleDetail(record)">详情</a>
+        </template>
+      </s-table>
+      <oss-detail ref="detail" @ok="handleOk" />
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+import { ossList } from '@/api/sys/oss'
+import { STable } from '@/components'
+import OssDetail from './OssDetail'
+
+export default {
+  name: 'DictionaryItemList',
+  components: {
+    STable,
+    OssDetail
+  },
+  data () {
+    return {
+      queryParam: { name: '', value: '', dictionaryCode: this.$route.params.id },
+      selectedRowKeys: [], // 选中行的key 出选择框时需要配置
+      selectedRows: [], // 选中行的数据
+      columns: [
+        { title: '附件ID', width: 50, dataIndex: 'id', key: 'id' },
+        { title: '来源ID', width: 50, dataIndex: 'sourceId', key: 'sourceId' },
+        { title: '附件名称', width: 50, dataIndex: 'fileName', key: 'fileName' },
+        { title: '附件新名称', width: 50, dataIndex: 'newName', key: 'newName' },
+        { title: '附件类型', width: 20, dataIndex: 'fileType', key: 'fileType' },
+        { title: '附件存放地址', width: 80, dataIndex: 'realPath', key: 'realPath' },
+        { title: 'URL地址', width: 80, dataIndex: 'url', key: 'url' },
+        {
+          title: '创建时间',
+          width: 50,
+          key: 'createTime',
+          dataIndex: 'createTime',
+          scopedSlots: { customRender: 'createTime' }
+        },
+        {
+          title: '更新时间',
+          width: 50,
+          key: 'updateTime',
+          dataIndex: 'updateTime',
+          scopedSlots: { customRender: 'updateTime' }
+        },
+        {
+          title: '操作',
+          key: 'operation',
+          width: 10,
+          align: 'right',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        return ossList(Object.assign(parameter, this.queryParam))
+          .then(res => {
+            return res
+          })
+      }
+    }
+  },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectChange
+      }
+    }
+  },
+  methods: {
+    // 详情
+    handleDetail (record) {
+      this.$refs.detail.show(record)
+    },
+    // 编辑后回调
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+    handleRefresh () {
+      this.$refs.table.refresh(true)
+    },
+    // 选择行
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      this.selectedRows = selectedRows
+    }
+  }
+}
+</script>