<template>
|
<div class="rc-cont">
|
<flexbox
|
v-if="!isSeas"
|
class="rc-head"
|
direction="row-reverse">
|
<!--<el-button
|
class="rc-head-item"
|
type="primary"
|
@click.native="addFile">上传附件</el-button>-->
|
<input
|
id="file"
|
type="file"
|
class="rc-head-file"
|
accept="*/*"
|
multiple
|
@change="uploadFile">
|
</flexbox>
|
<el-table
|
:data="list"
|
:height="tableHeight"
|
:header-cell-style="headerRowStyle"
|
:cell-style="cellStyle"
|
align="center"
|
header-align="center"
|
style="width: 100%;border: 1px solid #E6E6E6;"
|
@row-click="handleRowClick">
|
<el-table-column
|
v-for="(item, index) in fieldList"
|
:key="index"
|
:prop="item.prop"
|
:label="item.label"
|
:formatter="fieldFormatter"
|
show-overflow-tooltip/>
|
<!--<el-table-column
|
label="操作"
|
width="150">
|
<template slot-scope="scope">
|
<flexbox justify="center">
|
<el-button
|
type="text"
|
@click.native="handleFile('preview', scope)">预览</el-button>
|
<el-button
|
type="text"
|
@click.native="handleFile('edit', scope)">重命名</el-button>
|
<el-button
|
type="text"
|
@click.native="handleFile('delete', scope)">删除</el-button>
|
</flexbox>
|
</template>
|
</el-table-column> -->
|
</el-table>
|
<div class="p-contianer" v-show='total>0'>
|
<el-pagination
|
:current-page="currentPage"
|
:page-sizes="pageSizes"
|
:page-size.sync="pageSize"
|
:total="total"
|
class="p-bar"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"/>
|
</div>
|
<el-dialog
|
:append-to-body="true"
|
:visible.sync="editDialog"
|
title="编辑"
|
width="30%">
|
<el-form :model="editForm">
|
<el-form-item
|
label="新名称"
|
label-width="100">
|
<el-input
|
v-model="editForm.name"
|
autocomplete="off"/>
|
</el-form-item>
|
</el-form>
|
<div
|
slot="footer"
|
class="dialog-footer">
|
<el-button @click="editDialog = false">取 消</el-button>
|
<el-button
|
type="primary"
|
@click="confirmEdit">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script type="text/javascript">
|
import loading from '../mixins/loading'
|
import { GetCustomerDocumentFileList } from '@/api/customermanagement/customerManage'
|
import { GetSalesDocumentFileList } from '@/api/customermanagement/business'
|
import { GetContacterDocumentFileList } from '@/api/customermanagement/contacts'
|
// import {
|
// crmFileSave,
|
// crmFileIndex,
|
// crmFileDelete,
|
// crmFileUpdate
|
// } from '@/api/common'
|
|
export default {
|
name: 'RelativeFiles', // 相关附件 可能再很多地方展示 放到客户管理目录下
|
components: {},
|
mixins: [loading],
|
props: {
|
/** 模块ID */
|
id: [String, Number],
|
/** 联系人人下 新建商机 需要联系人里的客户信息 合同下需要客户和商机信息 */
|
detail: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
/** 没有值就是全部类型 有值就是当个类型 */
|
crmType: {
|
type: String,
|
default: ''
|
},
|
/** 是公海 默认是客户 */
|
isSeas: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data () {
|
return {
|
list: [],
|
fieldList: [],
|
tableHeight: '400px',
|
/** 重命名 弹窗 */
|
editDialog: false,
|
/** 编辑信息 */
|
editForm: { name: '', data: {} },
|
total: 0,
|
currentPage: 1,
|
pageSize: 10,
|
pageSizes: [10, 30, 60, 100]
|
}
|
},
|
computed: {},
|
watch: {
|
id: function (val) {
|
this.list = []
|
this.getDetail()
|
}
|
},
|
mounted () {
|
this.fieldList.push(
|
{ prop: 'DocumentName', label: '附件名称', width: '300' },
|
{ prop: 'Comment', label: '备注', width: '400' },
|
{ prop: 'DocumentFileName', label: '文档文件名', width: '400' },
|
{ prop: 'FileExtensionName', label: '扩展名', width: '200' },
|
// { prop: 'DocumentType', label: '文档所属业务类型', width: '200' },
|
{ prop: 'FileType', label: '文档附件类型', width: '100' },
|
{ prop: 'CreateTime', label: '创建时间', width: '200' }
|
)
|
|
this.getDetail()
|
},
|
activated: function () {},
|
deactivated: function () {},
|
methods: {
|
handleSizeChange (newSize) {
|
this.pageSize = newSize
|
this.getDetail()
|
},
|
handleCurrentChange (newPage) {
|
this.currentPage = newPage
|
this.getDetail()
|
},
|
getDetail () {
|
this.loading = true
|
const request = {
|
customer: GetCustomerDocumentFileList,
|
business: GetSalesDocumentFileList,
|
contacts: GetContacterDocumentFileList
|
}[this.crmType]
|
const params = {}
|
params['Id'] = this.id
|
params['PageSize'] = this.pageSize
|
params['PageIndex'] = this.currentPage
|
request(params)
|
.then(res => {
|
this.loading = false
|
this.list = res.data.Result
|
this.total = res.data.Result.length
|
})
|
.catch(() => {
|
this.loading = false
|
})
|
},
|
/** 格式化字段 */
|
fieldFormatter (row, column) {
|
// 如果需要格式化
|
if (column.property === 'FileType') {
|
return this.getStatusName(row.FileType)
|
}
|
return row[column.property] || '--'
|
},
|
getStatusName (status) {
|
if (status === 1) {
|
return '附件'
|
} else if (status === 2) {
|
return '图片'
|
}
|
return '暂无'
|
},
|
addFile () {
|
document.getElementById('file').click()
|
},
|
/** 图片选择出发 */
|
uploadFile (event) {
|
var files = event.target.files
|
for (let index = 0; index < files.length; index++) {
|
const file = files[index]
|
// if (file.type.indexOf('image') !== -1) {
|
var params = {}
|
params.batchId = this.detail.batchId
|
params.file = file
|
// crmFileSave(params)
|
// .then(res => {
|
// this.getDetail()
|
// })
|
// .catch(() => {})
|
// }
|
}
|
|
event.target.value = ''
|
},
|
// 当某一行被点击时会触发该事件
|
handleRowClick (row, column, event) {},
|
/** 编辑删除cell */
|
handleFile (type, item) {
|
if (type === 'preview') {
|
var previewList = this.list.map(element => {
|
element.url = element.DocumentFileName
|
return element
|
})
|
this.$bus.emit('preview-image-bus', {
|
index: item.$index,
|
data: previewList
|
})
|
} else if (type === 'delete') {
|
this.$confirm('您确定要删除该文件吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
// crmFileDelete({
|
// id: item.row.fileId
|
// })
|
// .then(res => {
|
// this.list.splice(item.$index, 1)
|
// this.$message.success('操作成功')
|
// })
|
// .catch(() => {})
|
})
|
.catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消操作'
|
})
|
})
|
} else {
|
this.editForm.data = item
|
this.editForm.name = item.row.name
|
this.editDialog = true
|
}
|
},
|
confirmEdit () {
|
if (this.editForm.name) {
|
// crmFileUpdate({
|
// fileId: this.editForm.data.row.fileId,
|
// name: this.editForm.name
|
// })
|
// .then(res => {
|
// this.$message.success('编辑成功')
|
// this.editDialog = false
|
// var item = this.list[this.editForm.data.$index]
|
// item.name = this.editForm.name
|
// })
|
// .catch(() => {})
|
}
|
},
|
/** 通过回调控制表头style */
|
headerRowStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
},
|
/** 通过回调控制style */
|
cellStyle ({ row, column, rowIndex, columnIndex }) {
|
return { textAlign: 'left' }
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
@import '../styles/relativecrm.scss';
|
.h-item {
|
font-size: 13px;
|
color: #409eff;
|
margin: 0 5px;
|
cursor: pointer;
|
}
|
|
.rc-head-file {
|
position: absolute;
|
top: 0;
|
right: 0;
|
height: 98px;
|
width: 98px;
|
opacity: 0;
|
z-index: -1;
|
cursor: pointer;
|
}
|
</style>
|
