|
|
@@ -0,0 +1,471 @@
|
|
|
+<template>
|
|
|
+ <div class="project-task-file">
|
|
|
+
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <Row class="sreachBox">
|
|
|
+ <div class="item">
|
|
|
+ <div class="item-2">
|
|
|
+ <sreachTitle :val="keys.name">文件名</sreachTitle>
|
|
|
+ <Input v-model="keys.name" placeholder="关键词"/>
|
|
|
+ </div>
|
|
|
+ <div class="item-2">
|
|
|
+ <sreachTitle :val="keys.username">上传者</sreachTitle>
|
|
|
+ <Input v-model="keys.username" placeholder="用户名"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item item-button">
|
|
|
+ <Button type="text" v-if="$A.objImplode(keys)!=''" @click="sreachTab(true)">取消筛选</Button>
|
|
|
+ <Button type="primary" icon="md-search" :loading="loadIng > 0" @click="sreachTab">搜索</Button type="primary">
|
|
|
+ </div>
|
|
|
+ </Row>
|
|
|
+
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <Row class="butBox" style="float:left;margin-top:-32px;">
|
|
|
+ <Upload
|
|
|
+ name="files"
|
|
|
+ ref="upload"
|
|
|
+ :action="actionUrl"
|
|
|
+ :data="params"
|
|
|
+ multiple
|
|
|
+ :format="uploadFormat"
|
|
|
+ :show-upload-list="false"
|
|
|
+ :max-size="10240"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :on-format-error="handleFormatError"
|
|
|
+ :on-exceeded-size="handleMaxSize">
|
|
|
+ <Button :loading="loadIng > 0" type="primary" icon="ios-cloud-upload-outline" @click="">上传文件</Button>
|
|
|
+ </Upload>
|
|
|
+ </Row>
|
|
|
+
|
|
|
+ <!-- 列表 -->
|
|
|
+ <Table class="tableFill" ref="tableRef" :columns="columns" :data="lists" :loading="loadIng > 0" :no-data-text="noDataText" @on-sort-change="sortChange" stripe></Table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <Page class="pageBox" :total="listTotal" :current="listPage" :disabled="loadIng > 0" @on-change="setPage" @on-page-size-change="setPageSize" :page-size-opts="[10,20,30,50,100]" placement="top" show-elevator show-sizer show-total transfer></Page>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .project-task-file {
|
|
|
+ margin: 0 12px;
|
|
|
+ .tableFill {
|
|
|
+ margin: 12px 0 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import Vue from 'vue'
|
|
|
+ import VueClipboard from 'vue-clipboard2'
|
|
|
+ import WLoading from '../../../components/WLoading'
|
|
|
+
|
|
|
+ Vue.use(VueClipboard)
|
|
|
+ Vue.component('WLoading', WLoading);
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'ProjectTaskFiles',
|
|
|
+ props: {
|
|
|
+ projectid: {
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ canload: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ keys: {},
|
|
|
+ sorts: {key:'', order:''},
|
|
|
+
|
|
|
+ loadYet: false,
|
|
|
+
|
|
|
+ loadIng: 0,
|
|
|
+
|
|
|
+ columns: [],
|
|
|
+
|
|
|
+ lists: [],
|
|
|
+ listPage: 1,
|
|
|
+ listTotal: 0,
|
|
|
+ noDataText: "数据加载中.....",
|
|
|
+
|
|
|
+ uploadFormat: ['jpg', 'jpeg', 'png', 'gif', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt'],
|
|
|
+ actionUrl: $A.aUrl('project/files/upload'),
|
|
|
+ params: {'token': $A.token(), projectid:this.projectid},
|
|
|
+ uploadList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.columns = [{
|
|
|
+ "title": "",
|
|
|
+ "width": 60,
|
|
|
+ render: (h, params) => {
|
|
|
+ if (!params.row.thumb) {
|
|
|
+ return h('WLoading', {
|
|
|
+ style: {
|
|
|
+ width: "24px",
|
|
|
+ height: "24px",
|
|
|
+ verticalAlign: "middle",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return h('img', {
|
|
|
+ style: {
|
|
|
+ width: "28px",
|
|
|
+ height: "28px",
|
|
|
+ verticalAlign: "middle",
|
|
|
+ },
|
|
|
+ attrs: {
|
|
|
+ src: params.row.thumb
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ "title": "文件名",
|
|
|
+ "key": 'name',
|
|
|
+ "minWidth": 100,
|
|
|
+ "tooltip": true,
|
|
|
+ "sortable": true,
|
|
|
+ render: (h, params) => {
|
|
|
+ let arr = [h('span', params.row.name)];
|
|
|
+ if (params.row.showProgress === true) {
|
|
|
+ arr.push(h('Progress', {
|
|
|
+ style: {
|
|
|
+ display: 'block',
|
|
|
+ marginTop: '-3px'
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ percent: params.row.percentage || 100,
|
|
|
+ },
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ return h('div', arr);
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ "title": "大小",
|
|
|
+ "key": 'size',
|
|
|
+ "minWidth": 90,
|
|
|
+ "maxWidth": 120,
|
|
|
+ "align": "right",
|
|
|
+ "sortable": true,
|
|
|
+ render: (h, params) => {
|
|
|
+ return h('span', $A.bytesToSize(params.row.size));
|
|
|
+ },
|
|
|
+ }, {
|
|
|
+ "title": "下载次数",
|
|
|
+ "key": 'download',
|
|
|
+ "align": "center",
|
|
|
+ "sortable": true,
|
|
|
+ "width": 100,
|
|
|
+ }, {
|
|
|
+ "title": "上传者",
|
|
|
+ "key": 'username',
|
|
|
+ "minWidth": 90,
|
|
|
+ "maxWidth": 130,
|
|
|
+ "sortable": true,
|
|
|
+ }, {
|
|
|
+ "title": "上传时间",
|
|
|
+ "key": 'indate',
|
|
|
+ "width": 160,
|
|
|
+ "sortable": true,
|
|
|
+ render: (h, params) => {
|
|
|
+ return h('span', $A.formatDate("Y-m-d H:i:s", params.row.indate));
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ "title": " ",
|
|
|
+ "key": 'action',
|
|
|
+ "align": 'right',
|
|
|
+ "width": 120,
|
|
|
+ render: (h, params) => {
|
|
|
+ if (!params.row.id) {
|
|
|
+ return null;
|
|
|
+ }
|
|
|
+ return h('div', [
|
|
|
+ h('Tooltip', {
|
|
|
+ props: { content: '下载', transfer: true, delay: 600 },
|
|
|
+ style: { position: 'relative' },
|
|
|
+ }, [h('Icon', {
|
|
|
+ props: { type: 'md-arrow-down' },
|
|
|
+ style: { margin: '0 3px', cursor: 'pointer' },
|
|
|
+ }), h('a', {
|
|
|
+ style: { position: 'absolute', top: '0', left: '0', right: '0', bottom: '0', 'zIndex': 1 },
|
|
|
+ attrs: { href: $A.aUrl('project/files/download?fileid=' + params.row.id), target: '_blank' },
|
|
|
+ on: {
|
|
|
+ click: () => {
|
|
|
+ if (params.row.yetdown) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ params.row.yetdown = 1;
|
|
|
+ this.$set(params.row, 'download', params.row.download + 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })]),
|
|
|
+ h('Tooltip', {
|
|
|
+ props: { content: '重命名', transfer: true, delay: 600 }
|
|
|
+ }, [h('Icon', {
|
|
|
+ props: { type: 'md-create' },
|
|
|
+ style: { margin: '0 3px', cursor: 'pointer' },
|
|
|
+ on: {
|
|
|
+ click: () => {
|
|
|
+ this.renameFile(params.row);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })]),
|
|
|
+ h('Tooltip', {
|
|
|
+ props: { content: '复制链接', transfer: true, delay: 600 }
|
|
|
+ }, [h('Icon', {
|
|
|
+ props: { type: 'md-link' },
|
|
|
+ style: { margin: '0 3px', cursor: 'pointer', transform: 'rotate(-45deg)' },
|
|
|
+ on: {
|
|
|
+ click: () => {
|
|
|
+ this.$copyText($A.aUrl('project/files/download?fileid=' + params.row.id)).then(() => {
|
|
|
+ this.$Message.success(this.$L('复制成功！'));
|
|
|
+ }, () => {
|
|
|
+ this.$Message.error(this.$L('复制失败！'));
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })]),
|
|
|
+ h('Tooltip', {
|
|
|
+ props: { content: '删除', transfer: true, delay: 600 }
|
|
|
+ }, [h('Icon', {
|
|
|
+ props: { type: 'md-trash' },
|
|
|
+ style: { margin: '0 3px', cursor: 'pointer' },
|
|
|
+ on: {
|
|
|
+ click: () => {
|
|
|
+ this.deleteFile(params.row);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })]),
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ }];
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ if (this.canload) {
|
|
|
+ this.loadYet = true;
|
|
|
+ this.getLists(true);
|
|
|
+ }
|
|
|
+ this.uploadList = this.$refs.upload.fileList;
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ projectid() {
|
|
|
+ if (this.loadYet) {
|
|
|
+ this.getLists(true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ canload(val) {
|
|
|
+ if (val && !this.loadYet) {
|
|
|
+ this.loadYet = true;
|
|
|
+ this.getLists(true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadList(files) {
|
|
|
+ files.forEach((file) => {
|
|
|
+ if (typeof file.username === "undefined") {
|
|
|
+ file.username = $A.getUserName();
|
|
|
+ file.indate = Math.round(new Date().getTime()/1000);
|
|
|
+ this.lists.unshift(file)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ sreachTab(clear) {
|
|
|
+ if (clear === true) {
|
|
|
+ this.keys = {};
|
|
|
+ }
|
|
|
+ this.getLists(true);
|
|
|
+ },
|
|
|
+
|
|
|
+ sortChange(info) {
|
|
|
+ this.sorts = {key:info.key, order:info.order};
|
|
|
+ this.getLists(true);
|
|
|
+ },
|
|
|
+
|
|
|
+ setPage(page) {
|
|
|
+ this.listPage = page;
|
|
|
+ this.getLists();
|
|
|
+ },
|
|
|
+
|
|
|
+ setPageSize(size) {
|
|
|
+ if (Math.max($A.runNum(this.listPageSize), 10) != size) {
|
|
|
+ this.listPageSize = size;
|
|
|
+ this.getLists();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getLists(resetLoad) {
|
|
|
+ if (resetLoad === true) {
|
|
|
+ this.listPage = 1;
|
|
|
+ }
|
|
|
+ if (this.projectid == 0) {
|
|
|
+ this.lists = [];
|
|
|
+ this.listTotal = 0;
|
|
|
+ this.noDataText = "没有相关的数据";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.loadIng++;
|
|
|
+ let whereData = $A.cloneData(this.keys);
|
|
|
+ whereData.page = Math.max(this.listPage, 1);
|
|
|
+ whereData.pagesize = Math.max($A.runNum(this.listPageSize), 10);
|
|
|
+ whereData.projectid = this.projectid;
|
|
|
+ whereData.sorts = this.sorts;
|
|
|
+ $A.aAjax({
|
|
|
+ url: 'project/files/lists',
|
|
|
+ data: whereData,
|
|
|
+ complete: () => {
|
|
|
+ this.loadIng--;
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (res.ret === 1) {
|
|
|
+ this.lists = res.data.lists;
|
|
|
+ this.listTotal = res.data.total;
|
|
|
+ } else {
|
|
|
+ this.lists = [];
|
|
|
+ this.listTotal = 0;
|
|
|
+ this.noDataText = res.msg;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ renameFile(item) {
|
|
|
+ this.renameValue = "";
|
|
|
+ this.$Modal.confirm({
|
|
|
+ render: (h) => {
|
|
|
+ return h('div', [
|
|
|
+ h('div', {
|
|
|
+ style: {
|
|
|
+ fontSize: '16px',
|
|
|
+ fontWeight: '500',
|
|
|
+ marginBottom: '20px',
|
|
|
+ }
|
|
|
+ }, '重命名文件名'),
|
|
|
+ h('Input', {
|
|
|
+ props: {
|
|
|
+ value: this.renameValue,
|
|
|
+ autofocus: true,
|
|
|
+ placeholder: item.name || '请输入新的文件名称'
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ input: (val) => {
|
|
|
+ this.renameValue = val;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ loading: true,
|
|
|
+ onOk: () => {
|
|
|
+ if (this.renameValue) {
|
|
|
+ let oldName = item.name;
|
|
|
+ let newName = this.renameValue;
|
|
|
+ if (!$A.rightExists(newName, '.' + item.ext)) {
|
|
|
+ newName += '.' + item.ext;
|
|
|
+ }
|
|
|
+ this.$set(item, 'name', newName);
|
|
|
+ $A.aAjax({
|
|
|
+ url: 'project/files/rename',
|
|
|
+ data: {
|
|
|
+ fileid: item.id,
|
|
|
+ name: newName,
|
|
|
+ },
|
|
|
+ error: () => {
|
|
|
+ this.$Modal.remove();
|
|
|
+ this.$set(item, 'name', oldName);
|
|
|
+ alert(this.$L('网络繁忙，请稍后再试！'));
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ this.$Modal.remove();
|
|
|
+ if (res.ret === 1) {
|
|
|
+ this.$set(item, 'name', res.data.name);
|
|
|
+ } else {
|
|
|
+ this.$Modal.error({title: this.$L('温馨提示'), content: res.msg});
|
|
|
+ this.$set(item, 'name', oldName);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$Modal.remove();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ deleteFile(item) {
|
|
|
+ this.$Modal.confirm({
|
|
|
+ title: '删除文件',
|
|
|
+ content: '你确定要删除此文件吗？',
|
|
|
+ loading: true,
|
|
|
+ onOk: () => {
|
|
|
+ $A.aAjax({
|
|
|
+ url: 'project/files/delete',
|
|
|
+ data: {
|
|
|
+ fileid: item.id,
|
|
|
+ },
|
|
|
+ error: () => {
|
|
|
+ this.$Modal.remove();
|
|
|
+ alert(this.$L('网络繁忙，请稍后再试！'));
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ this.$Modal.remove();
|
|
|
+ this.lists.some((temp, index) => {
|
|
|
+ if (temp.id == item.id) {
|
|
|
+ this.lists.splice(index, 1);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ if (res.ret === 1) {
|
|
|
+ this.$Message.success(res.msg);
|
|
|
+ } else {
|
|
|
+ this.$Modal.error({title: this.$L('温馨提示'), content: res.msg });
|
|
|
+ }
|
|
|
+ }, 350);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSuccess (res, file) {
|
|
|
+ //上传完成
|
|
|
+ if (res.ret === 1) {
|
|
|
+ for (let key in res.data) {
|
|
|
+ if (res.data.hasOwnProperty(key)) {
|
|
|
+ file[key] = res.data[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$Modal.warning({
|
|
|
+ title: '上传失败',
|
|
|
+ content: '文件 ' + file.name + ' 上传失败，' + res.msg
|
|
|
+ });
|
|
|
+ this.$refs.upload.fileList.pop();
|
|
|
+ }
|
|
|
+ this.uploadList = this.$refs.upload.fileList;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleFormatError (file) {
|
|
|
+ //上传类型错误
|
|
|
+ this.$Modal.warning({
|
|
|
+ title: '文件格式不正确',
|
|
|
+ content: '文件 ' + file.name + ' 格式不正确，仅支持上传：' + this.uploadFormat.join(',') + '。'
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handleMaxSize (file) {
|
|
|
+ //上传大小错误
|
|
|
+ this.$Modal.warning({
|
|
|
+ title: '超出文件大小限制',
|
|
|
+ content: '文件 ' + file.name + ' 太大，不能超过 2M。'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
kuaifan