Skip to content

P
patzn-cloud-web-back-soil
Commit b097a930 by lichengming
Options

修改了委托单的附件按钮

parent 932355e4
Showing with 2320 additions and 11 deletions
components/base/ModalConfirm.vue 0 → 100644
<template>
<div>
<Modal
:title="modalTitle"
v-model="showModalConfirm"
:closable="false"
:mask-closable="false"
:width="420"
class="modal-confirm zIndex-1200">
<div class="modal-confirm-flex">
<div><i class="ivu-icon ivu-icon-help-circled"></i></div>
<div><p class='content-p'>{{content}}</p></div>
</div>
<div slot="footer">
<Button :type="item.type === '' ? 'text' : 'primary' " v-for="(item,index) in btnModalList" :key="index"
@click="_btnModal(item.name,index)" :loading="isLoading !== undefined &&loading === true && currentIndex === index"
style="margin:0 3px;" size="large">
{{item.name}}
</Button>
</div>
</Modal>
</div>
</template>
<script>
/**
* modal 确认弹框提示（底部多个按钮）
*
**/
export default {
name: 'ModalConfirm',
props: {
btnModalList: null,
content: null,
isLoading: null // 是否显示loading
},
data() {
return {
showModalConfirm: false,
modalTitle: '提示',
// 用于区别modal
modalName: '',
// 临时数据存储
tempObj: {},
loading: false,
currentIndex: -1
}
},
methods: {
_openModal(name, tempObj) {
this.showModalConfirm = true
this.currentIndex = -1
this._isLoading(false)
this.loading = false
if (name === undefined) {
this.modalName = 'confirmModal'
} else {
this.modalName = name
}
this.tempObj = tempObj || {}
},
_closeModal() {
this.showModalConfirm = false
this._isLoading(false)
},
// loading 显示与否
_isLoading(msg) {
if (this.isLoading !== undefined) {
this.loading = msg
}
},
_btnModal(name, index) {
this.currentIndex = index
if (name === '取消') {
this._closeModal()
}
this.$emit('on-result-change', name, this.modalName, this.tempObj)
},
// 取消loading
_cancelLoading() {
this.isLoading = false
}
}
}
</script>
<style>
.modal-confirm .ivu-modal-header {
border-bottom: none !important;
}
.modal-confirm .ivu-modal-body {
padding: 20px !important;
}
.modal-confirm .ivu-modal-footer {
border-top: none !important;
}
.modal-confirm i {
color: #f90 !important;
}
.modal-confirm i {
font-size: 36px !important;
}
.modal-confirm .modal-confirm-flex {
display: flex;
justify-content: start;
text-align: center;
}
.modal-confirm-flex div {
margin-right: 10px;
}
.content-p {
margin-top: 5px;
margin-bottom: 0;
}
</style>
components/file/file-manage-sample-view/FileManageSampleView.vue 0 → 100644
<template>
<div>
<div>
<!--内容-->
<Row>
<!--查询-->
<Col span="24" style="margin-bottom: -10px">
<Form :label-width="70" inline onsubmit="return false">
<label class="label-sign"></label>
<Form-item label="文件名称:">
<Input v-model="fileName" @on-enter="_pageChange(1)" placeholder="请输入文件名称" style="width:200px" clearable></Input>
</Form-item>
<Form-item class="search-btn">
<Button @click="_search" type="primary">搜索</Button>
</Form-item>
</Form>
</Col>
<Col span="24">
<FilesListView ref="fileModal" @on-result-change="_fileData"></FilesListView>
</Col>
</Row>
</div>
</div>
</template>
<script>
import global from '../../../api/config'
import FilesListView from './FilesListView'
export default {
components: {
FilesListView
},
data() {
return {
selectIds: [],
getPage: {},
pageParams: {
page: 1,
rows: 20
},
downloadFileUrl: '',
fileName: '',
// id
salesId: '',
contractId: '',
sampleId: '',
subcontractorId: '',
// 用于区分是哪种附件（合同、委托、样品）
idKey: ''
}
},
methods: {
_open(data, key) {
this.fileName = ''
switch (key) {
case 'contractId':
this.salesId = ''
this.contractId = data.id
this.sampleId = ''
this.subcontractorId = ''
this.idKey = 'contractId'
break
}
this.$emit('on-result-change')
this.downloadFileUrl = data.downloadFileUrl
this.$refs.fileModal._fileViewData(data, this.idKey)
},
_openFile(pageData) {
this.getPage = pageData
this.$refs.fileModal._open(pageData, '300')
},
_page(uri) {
this.$store.dispatch(uri, this._searchParams()).then(() => {
this.$emit('on-result-change', 'file-page', '')
})
},
_pageChange(page) {
this.pageParams.page = page
this.$emit('on-result-change')
},
_pageSizeChange(rows) {
this.pageParams.rows = rows
this.$emit('on-result-change')
},
_search() {
this.$emit('on-result-change')
},
_searchParams() {
const data = {
page: this.pageParams.page,
rows: this.pageParams.rows
}
if (this.fileName) {
Object.assign(data, { fileName: this.fileName })
}
// 委托id
if (this.contractId) {
Object.assign(data, { contractId: this.contractId })
}
return data
},
// 下载
_download(id) {
window.open(global.baseURL + this.downloadFileUrl + id, '_blank')
},
_fileData(msg, data) {
switch (msg) {
case 'down':
this._download(data)
break
case 'page':
this._pageChange(data)
break
case 'rows':
this._pageSizeChange(data)
break
}
}
}
}
</script>
components/file/file-manage-sample-view/FilesListView.vue 0 → 100644
<template>
<div>
<Row>
<!--操作-->
<Col span="24" style="margin-bottom: 10px">
<div class="btns-menu">
<!--表格-->
<Button v-for="item in menusList" :key="item.name" @click="_tableChange(item.value)"
v-if="viewStyle === 1" type="ghost" style="margin-right: 5px">&nbsp;{{item.name}}
</Button>
</div>
</Col>
<Col span="24">
<!-- 默认是详细模式 -->
<div v-if="viewStyle === 1">
<el-table
ref="moveTable"
:data="getPage.records"
:height="tableHeight"
v-loading="loading"
@select-all="_selectAll"
@selection-change="_selectRowChange"
@cell-click="_cellClick"
:row-class-name="_tableRowClassName"
stripe
border
size="small"
style="width: 100%"
>
<el-table-column
type="selection"
width="55"
fixed="left"
align="center">
</el-table-column>
<el-table-column
:prop="item.key"
:label="item.title"
:width="item.width"
:min-width="200"
v-for="item in pageColumns"
:key="item.key" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="item.dateTime">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM:ss'):''}}</span>
<span v-else>{{scope.row[item.key]}}</span>
</template>
</el-table-column>
<el-table-column
title="操作"
align="center"
width="100"
fixed="right">
<template slot-scope="scope">
<IconList :msg="(scope.row['type'] === 'jpg' || scope.row['type'] === 'png')?iconMsg:iconMsgDis"
@on-result-change="_iconClick" :rowData="scope.row"></IconList>
</template>
</el-table-column>
</el-table>
<Page :total="getPage.total" :page-size="getPage.size" :current="getPage.current" @on-change="_pageChange"
@on-page-size-change='_pageSizeChange'
placement="top" show-elevator show-total show-sizer style="margin-top: 10px;"></Page>
</div>
<!--/-->
<!--缩略图 模式-->
<div v-else-if="viewStyle === 2">
<ul :style="{ 'height': tableHeight + 'px' }" class="thumbnailStyle">
<CheckboxGroup @on-change="_chkVal" v-model="selectIds">
<li v-for="item in getPage.records" :key="item.id">
<div class="thumbnailStyleImg">
<Tooltip placement="top">
<img :src=" bigUrl+item.type+'.png' "/>
<div slot="content" style="white-space: normal">
<p>名称：{{item.fileName}}</p>
</div>
</Tooltip>
</div>
<div class="thumbnailStyleCheck clearCheck">
<Checkbox :label="item.id"><span class="inline-span" style="display: inline">{{item.fileName}}</span>
</Checkbox>
</div>
</li>
</CheckboxGroup>
</ul>
<div style="margin-top: 10px">共 {{getPage.total}} 条</div>
</div>
<!--/-->
<!--列表 模式-->
<div v-else="viewStyle === 3">
<ul :style="{ 'height': tableHeight + 'px' }" class="listStyle">
<CheckboxGroup @on-change="_chkVal" v-model="selectIds">
<li v-for="item in getPage.records" :key="item.id">
<div class="listStyleCheck clearCheck">
<Tooltip placement="top">
<span class="spanImg">
<img :src=" smallUrl+item.type+'.png' "/>
</span>
<span>
<Checkbox :label="item.id"><span>{{item.fileName}}</span></Checkbox>
</span>
<div slot="content" style="white-space: normal">
<p>名称：{{item.fileName}}</p>
</div>
</Tooltip>
</div>
</li>
</CheckboxGroup>
</ul>
<div style="margin-top: 10px">共 {{getPage.total}} 条</div>
</div>
<!--/-->
</Col>
</Row>
<!--图片预览-->
<div>
<vue-gallery-slideshow :images="imgViewList" :index="imgViewIndex"
@close="imgViewIndex = null"></vue-gallery-slideshow>
</div>
</div>
</template>
<script>
import VueGallerySlideshow from 'vue-gallery-slideshow'
import ElementTable from '../../table/ElementTable'
import IconList from '../../base/IconList'
import global from '../../../api/config'
import { http } from '../../../api/http'
/* 样品附件--只读-附属 */
export default {
components: { ElementTable, IconList, VueGallerySlideshow },
data() {
return {
loading: false,
iconMsg: [
{ type: 'ios-download', id: '', name: '下载' },
{ type: 'images', id: '', name: '预览' }
],
iconMsgDis: [
{ type: 'ios-download', id: '', name: '下载' },
{ type: 'images', id: '', name: '预览', disabled: true }
],
selectIds: [],
getPage: {},
pageParams: {
rows: 20
},
pageColumns: [
{ title: '文件名', key: 'fileName' },
{ title: '类型', key: 'type', width: 120 },
{ title: '上传时间', key: 'ctime', width: 140, dateTime: true }
// {title: '上传人', key: 'cname', width: 120},
],
viewVal: 1,
viewStyle: 1,
menusList: [{ name: '下载', value: 'down' }],
checkList: [
{ name: '详细模式', value: 1 },
{ name: '缩略图模式', value: 2 },
{ name: '列表模式', value: 3 }
],
Ids: [],
smallUrl: global.staticURL + '/img/smallfile/',
bigUrl: global.staticURL + '/img/bigfile/',
imgViewList: [],
imgViewIndex: null,
id: '',
objectKey: [],
idKey: '', // 判断是哪种附件（合同、委托、样品）
checkData: []
}
},
computed: {
tableHeight: function() {
return this.$tableHeight('tableModal')
}
},
methods: {
// 点击单元格触发
_cellClick(row, event, column) {
if (event.label !== '操作') {
this.checkData = [row]
this.$refs.moveTable.toggleRowSelection(row)
}
},
_iconClick(res, data) {
switch (res) {
case '下载':
this._download(data.id)
break
case '预览':
this._viewImg(data)
break
}
},
// 预览图片（该合同下所有的）
_viewImg(data) {
const uri = 'FoodSampleAttachment/getPicByContractId'
const viewUri = 'sample_attachment/view'
this.$store.dispatch(uri, this.id).then(() => {
const result = this.$store.state.FoodSampleAttachment.list
const imgViewList = []
for (let i = 0; i < result.length; i++) {
imgViewList.push(
global.baseURL +
'/food/v1/' +
viewUri +
'?id=' +
result[i].id +
'&objectKey=' +
result[i].objectKey
)
}
this.imgViewList = imgViewList
// 打开的是当前第几张图片
const salesUri =
global.baseURL +
'/food/v1/' +
viewUri +
'?id=' +
data.id +
'&objectKey=' +
data.objectKey
const index = this.imgViewList.findIndex(item => item === salesUri)
if (index === -1) {
this.imgViewIndex = 0
} else {
this.imgViewIndex = index
}
})
},
_fileViewData(data, idKey) {
this.idKey = idKey
this.id = data.id
},
_open(data, height) {
this.getPage = data
this.tableHeight = height
this.selectIds = []
this.imgViewIndex = null
},
_pageChange(page) {
this.$emit('on-result-change', 'page', page)
},
_selectRowChange(data) {
this.checkData = data
const idList = []
const objectKey = []
for (let i = 0; i < data.length; i++) {
idList.push(data[i].id)
objectKey.push(data[i].objectKey)
}
this.Ids = idList
this.objectKey = objectKey
},
_selectAll: function(data) {
this._selectRowChange(data)
},
_pageSizeChange(rows) {
this.$emit('on-result-change', 'rows', rows)
},
// 下载
_download(id) {
this.$emit('on-result-change', 'down', id)
},
// 查看方式改变
_view(val) {
this.viewStyle = val
this.selectIds = []
},
_chkVal(val) {
this.selectIds = val
},
// 一系列操作返回的值
_tableChange(val) {
if (val == 'down') {
if (this.objectKey.length === 0) {
this.$Message.warning('请选择一条数据!')
} else {
this._downloadAll(this.objectKey)
}
}
},
// 批量打包下载
_downloadAll(ids) {
const uri = '/food/v1/sample_attachment/download_batch'
window.open(global.baseURL + uri + '?objectKeys=' + ids)
}
}
}
</script>
components/file/file-manage-view/FileManageView.vue 0 → 100644
<template>
<div>
<Modal v-model="showUploadModal" :width="800" class="modal-footer-none zIndex-1100">
<p slot="header">{{modalTitle}}</p>
<div>
<!--内容-->
<Row>
<!--查询-->
<Col span="24" style="margin-bottom: -10px">
<Form :label-width="70" inline onsubmit="return false">
<label class="label-sign"></label>
<Form-item label="文件名称:">
<Input v-model="fileName" @on-enter="_pageChange(1)" placeholder="请输入文件名称" style="width:200px" clearable></Input>
</Form-item>
<Form-item class="search-btn">
<Button @click="_search" type="primary">搜索</Button>
</Form-item>
</Form>
</Col>
<Col span="24">
<FilesListView ref="fileModal" @on-result-change="_fileData"></FilesListView>
</Col>
</Row>
</div>
</Modal>
</div>
</template>
<script>
import global from '../../../api/config'
import FilesListView from './FilesListView'
export default {
components: {
FilesListView
},
data() {
return {
showUploadModal: false,
modalTitle: '查看附件',
selectIds: [],
getPage: {},
pageParams: {
page: 1,
rows: 20
},
downloadFileUrl: '',
fileName: '',
// id
salesId: '',
contractId: '',
sampleId: '',
subcontractorId: '',
// 用于区分是哪种附件（合同、委托、样品）
idKey: ''
}
},
methods: {
_open(data, key) {
this.showUploadModal = true
this.fileName = ''
switch (key) {
case 'contractId':
this.salesId = ''
this.contractId = data.id
this.sampleId = ''
this.subcontractorId = ''
this.idKey = 'contractId'
break
case 'sampleId':
this.salesId = ''
this.contractId = ''
this.sampleId = data.id
this.subcontractorId = ''
this.idKey = 'sampleId'
break
}
this.$emit('on-result-change')
this.downloadFileUrl = data.downloadFileUrl
this.$refs.fileModal._fileViewData(data, this.idKey)
},
_openFile(pageData) {
this.getPage = pageData
this.$refs.fileModal._open(pageData, '300')
},
_page(uri) {
this.$store.dispatch(uri, this._searchParams()).then(() => {
this.$emit('on-result-change', 'file-page', '')
})
},
_pageChange(page) {
this.pageParams.page = page
this.$emit('on-result-change')
},
_pageSizeChange(rows) {
this.pageParams.rows = rows
this.$emit('on-result-change')
},
_search() {
this.$emit('on-result-change')
},
_searchParams() {
const data = {
page: this.pageParams.page,
rows: this.pageParams.rows
}
if (this.fileName) {
Object.assign(data, { fileName: this.fileName })
}
// 委托id
if (this.contractId) {
Object.assign(data, { contractId: this.contractId })
}
// 样品id
if (this.sampleId) {
Object.assign(data, { sampleId: this.sampleId })
}
return data
},
// 下载
_download(id) {
window.open(global.baseURL + this.downloadFileUrl + id, '_blank')
},
_fileData(msg, data) {
switch (msg) {
case 'down':
this._download(data)
break
case 'page':
this._pageChange(data)
break
case 'rows':
this._pageSizeChange(data)
break
}
}
}
}
</script>
components/file/file-manage-view/FilesListView.vue 0 → 100644
<template>
<div>
<Row>
<!--操作-->
<Col span="24" style="margin-bottom: 10px">
<div class="btns-menu">
<!--查看方式-->
<Select v-model="viewVal" @on-change="_view" style="width:150px" placeholder="请选择查看方式">
<Option v-for="item in checkList" :key="item.value" :value="item.value">{{ item.name }}</Option>
</Select>
<!--表格-->
<Button v-for="item in menusList" :key="item.name" @click="_tableChange(item.value)"
v-if="viewStyle === 1" type="ghost" style="margin-right: 5px">&nbsp;{{item.name}}
</Button>
</div>
</Col>
<Col span="24">
<!-- 默认是详细模式 -->
<div v-if="viewStyle === 1">
<el-table
:data="getPage.records"
:height="tableHeight"
v-loading="loading"
@select-all="_selectAll"
@selection-change="_selectRowChange"
:row-class-name="_tableRowClassName"
stripe
border
size="small"
style="width: 100%"
>
<el-table-column
type="selection"
width="55"
fixed="left"
align="center">
</el-table-column>
<el-table-column
:prop="item.key"
:label="item.title"
:width="item.width"
:min-width="200"
v-for="item in pageColumns"
:key="item.key" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="item.dateTime">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM:ss'):''}}</span>
<span v-else>{{scope.row[item.key]}}</span>
</template>
</el-table-column>
<el-table-column
title="操作"
align="center"
width="100"
fixed="right">
<template slot-scope="scope">
<IconList :msg="(scope.row['type'] === 'jpg' || scope.row['type'] === 'png')?iconMsg:iconMsgDis"
@on-result-change="_iconClick" :rowData="scope.row"></IconList>
</template>
</el-table-column>
</el-table>
<Page :total="getPage.total" :page-size="getPage.size" :current="getPage.current" @on-change="_pageChange"
@on-page-size-change='_pageSizeChange'
placement="top" show-elevator show-total show-sizer style="margin-top: 10px;"></Page>
</div>
<!--/-->
<!--缩略图 模式-->
<div v-else-if="viewStyle === 2">
<ul :style="{ 'height': tableHeight + 'px' }" class="thumbnailStyle">
<CheckboxGroup @on-change="_chkVal" v-model="selectIds">
<li v-for="item in getPage.records" :key="item.id">
<div class="thumbnailStyleImg">
<Tooltip placement="top">
<img :src=" bigUrl+item.type+'.png' "/>
<div slot="content" style="white-space: normal">
<p>名称：{{item.fileName}}</p>
</div>
</Tooltip>
</div>
<div class="thumbnailStyleCheck clearCheck">
<Checkbox :label="item.id"><span class="inline-span" style="display: inline">{{item.fileName}}</span>
</Checkbox>
</div>
</li>
</CheckboxGroup>
</ul>
<div style="margin-top: 10px">共 {{getPage.total}} 条</div>
</div>
<!--/-->
<!--列表 模式-->
<div v-else="viewStyle === 3">
<ul :style="{ 'height': tableHeight + 'px' }" class="listStyle">
<CheckboxGroup @on-change="_chkVal" v-model="selectIds">
<li v-for="item in getPage.records" :key="item.id">
<div class="listStyleCheck clearCheck">
<Tooltip placement="top">
<span class="spanImg">
<img :src=" smallUrl+item.type+'.png' "/>
</span>
<span>
<Checkbox :label="item.id"><span>{{item.fileName}}</span></Checkbox>
</span>
<div slot="content" style="white-space: normal">
<p>名称：{{item.fileName}}</p>
</div>
</Tooltip>
</div>
</li>
</CheckboxGroup>
</ul>
<div style="margin-top: 10px">共 {{getPage.total}} 条</div>
</div>
<!--/-->
</Col>
</Row>
<!--图片预览-->
<div>
<vue-gallery-slideshow :images="imgViewList" :index="imgViewIndex"
@close="imgViewIndex = null"></vue-gallery-slideshow>
</div>
</div>
</template>
<script>
import VueGallerySlideshow from 'vue-gallery-slideshow'
import ElementTable from '../../table/ElementTable'
import IconList from '../../base/IconList'
import global from '../../../api/config'
import { http } from '../../../api/http'
export default {
components: { ElementTable, IconList, VueGallerySlideshow },
data() {
return {
loading: false,
iconMsg: [
{ type: 'ios-download', id: '', name: '下载' },
{ type: 'images', id: '', name: '预览' }
],
iconMsgDis: [
{ type: 'ios-download', id: '', name: '下载' },
{ type: 'images', id: '', name: '预览', disabled: true }
],
selectIds: [],
getPage: {},
pageParams: {
rows: 20
},
pageColumns: [
{ title: '文件名', key: 'fileName' },
{ title: '类型', key: 'type', width: 120 },
{ title: '上传时间', key: 'ctime', width: 140, dateTime: true }
// {title: '上传人', key: 'cname', width: 120},
],
viewVal: 1,
viewStyle: 1,
menusList: [{ name: '下载', value: 'down' }],
checkList: [
{ name: '详细模式', value: 1 },
{ name: '缩略图模式', value: 2 },
{ name: '列表模式', value: 3 }
],
Ids: [],
smallUrl: global.staticURL + '/img/smallfile/',
bigUrl: global.staticURL + '/img/bigfile/',
imgViewList: [],
imgViewIndex: null,
id: '',
objectKey: [],
idKey: '', // 判断是哪种附件（合同、委托、样品）
checkData: []
}
},
computed: {
tableHeight: function() {
return this.$tableHeight('tableModal')
}
},
methods: {
_iconClick(res, data) {
switch (res) {
case '下载':
this._download(data.id)
break
case '预览':
this._viewImg(data)
break
}
},
// 预览图片（该合同下所有的）
_viewImg(data) {
let uri = ''
let viewUri = ''
switch (this.idKey) {
case 'contractId':
uri = 'FoodContractAttachment/getByContractId'
viewUri = 'contract_attachment/view'
break
case 'sampleId':
uri = 'FoodSampleAttachment/getBySampleId'
viewUri = 'sample_attachment/view'
break
}
this.$store.dispatch(uri, this.id).then(() => {
let result = ''
if (this.idKey === 'contractId') {
// 委托
result = this.$store.state.FoodContractAttachment.list
} else if (this.idKey === 'sampleId') {
// 样品
result = this.$store.state.FoodSampleAttachment.list
} else {
}
const imgViewList = []
for (let i = 0; i < result.length; i++) {
imgViewList.push(
global.baseURL +
'/food/v1/' +
viewUri +
'?id=' +
result[i].id +
'&objectKey=' +
result[i].objectKey
)
}
this.imgViewList = imgViewList
// 打开的是当前第几张图片
const salesUri =
global.baseURL +
'/food/v1/' +
viewUri +
'?id=' +
data.id +
'&objectKey=' +
data.objectKey
const index = this.imgViewList.findIndex(item => item === salesUri)
if (index === -1) {
this.imgViewIndex = 0
} else {
this.imgViewIndex = index
}
})
},
_fileViewData(data, idKey) {
this.idKey = idKey
this.id = data.id
},
_open(data, height) {
this.getPage = data
this.tableHeight = height
this.selectIds = []
this.imgViewIndex = null
},
_pageChange(page) {
this.$emit('on-result-change', 'page', page)
},
_selectRowChange(data) {
this.checkData = data
const idList = []
const objectKey = []
for (let i = 0; i < data.length; i++) {
idList.push(data[i].id)
objectKey.push(data[i].objectKey)
}
this.Ids = idList
this.objectKey = objectKey
},
_selectAll: function(data) {
this._selectRowChange(data)
},
_pageSizeChange(rows) {
this.$emit('on-result-change', 'rows', rows)
},
// 下载
_download(id) {
this.$emit('on-result-change', 'down', id)
},
// 查看方式改变
_view(val) {
this.viewStyle = val
this.selectIds = []
},
_chkVal(val) {
this.selectIds = val
},
// 一系列操作返回的值
_tableChange(val) {
if (val == 'down') {
if (this.objectKey.length === 0) {
this.$Message.warning('请选择一条数据!')
} else {
this._downloadAll(this.objectKey)
}
}
},
// 批量打包下载
_downloadAll(ids) {
let uri = ''
switch (this.idKey) {
case 'contractId':
uri = '/food/v1/contract_attachment/download_batch'
break
case 'sampleId':
uri = '/food/v1/sample_attachment/download_batch'
break
}
window.open(global.baseURL + uri + '?objectKeys=' + ids)
}
}
}
</script>
components/file/file-manage/FileManage.vue 0 → 100644
<template>
<div>
<Modal v-model="showModal" :width="900" v-drag class="modal-footer-none zIndex-1100">
<p slot="header">{{modalTitle}}</p>
<div>
<FileManageCont ref="fileCont" :flag="flag"></FileManageCont>
</div>
</Modal>
</div>
</template>
<script>
import FileManageCont from './FileManageCont'
export default {
components: {
FileManageCont
},
props: {
// 只能删除自己的标识
flag: null
},
data() {
return {
showModal: false,
modalTitle: '附件'
}
},
methods: {
_open(id, key) {
this.showModal = true
this.$refs.fileCont._open(id, key)
}
}
}
</script>
components/file/file-manage/FileManageCont.vue 0 → 100644
<template>
<div>
<!--内容-->
<Row>
<!--查询-->
<Col span="24" style="margin-bottom: -10px">
<Form :label-width="70" inline onsubmit="return false">
<label class="label-sign"></label>
<Form-item label="文件名称:">
<Input v-model="fileName" @on-enter="_search" placeholder="请输入文件名称"
style="width:200px" clearable/>
</Form-item>
<Form-item class="search-btn">
<Button @click="_search" type="primary">搜索</Button>
</Form-item>
</Form>
</Col>
<!--列表-->
<Col span="24">
<FilesList ref="fileModal" :fileName="fileName" @on-result-change="_fileData"></FilesList>
</Col>
</Row>
<!--删除提示框-->
<ModalConfirm ref="confirmModal" :content="modalContent" :btnModalList="btnModalList"
@on-result-change="_modalResult"></ModalConfirm>
</div>
</template>
<script>
import ModalConfirm from '../../base/ModalConfirm'
import FilesList from './FilesList'
export default {
components: {
FilesList,
ModalConfirm
},
props: {
// 只能删除自己的标识
flag: null
},
data() {
return {
fileName: '',
selectIds: [],
getPage: {},
// ids
contractId: '',
sampleId: '',
subcontractorId: '',
originalRecordId: '',
curveId: '',
// 用于区分是哪种附件（合同、委托、样品）
idKey: '',
// 弹框的内容
modalContent: '',
btnModalList: [
{ type: '', name: '取消' },
{ type: 'primary', name: '确定' }
],
//
deleteId: [],
urlData: {}
}
},
methods: {
/**
* msg:表示是哪种附件（委托，样品，分包商）
* pageUrl:page 请求地址
* deleteUrl：删除请求地址
* uploadFileUrl：上传地址
* downloadFileUrl：下载地址
* uri：预览请求地址
* viewUri：预览图片地址
* downloadBatch:批量打包下载
*/
_open(id, key) {
this.fileName = ''
this.showModal = true
this.contractId = ''
this.sampleId = ''
this.subcontractorId = ''
this.originalRecordId = ''
this.curveId = ''
this.idKey = key
switch (key) {
// 委托
case 'contractId':
this.contractId = id
this.urlData = {
msg: 'FoodContractAttachment',
pageUrl: 'FoodContractAttachment/page',
deleteUrl: 'FoodContractAttachment/deleteByIds',
uploadFileUrl: '/food/v1/contract_attachment/',
downloadFileUrl: '/food/v1/contract_attachment/download/',
downloadBatch: '/food/v1/contract_attachment/download_batch',
uri: 'FoodContractAttachment/getByContractId',
viewUri: '/food/v1/contract_attachment/view'
}
break
case 'sampleId':
// 样品
this.sampleId = id
this.urlData = {
msg: 'FoodSampleAttachment',
pageUrl: 'FoodSampleAttachment/page',
deleteUrl: 'FoodSampleAttachment/deleteByIds',
uploadFileUrl: '/food/v1/sample_attachment/upload/',
downloadFileUrl: '/food/v1/sample_attachment/download/',
downloadBatch: '/food/v1/sample_attachment/download_batch',
uri: 'FoodSampleAttachment/getBySampleId',
viewUri: '/food/v1/sample_attachment/view'
}
break
case 'subcontractorId':
// 分包商
this.subcontractorId = id
this.urlData = {
msg: 'FoodSubContractAttachment',
pageUrl: 'FoodSubContractAttachment/page',
deleteUrl: 'FoodSubContractAttachment/deleteByIds',
uploadFileUrl: '/food/v1/subcontractor_attachment/upload_',
downloadFileUrl: '/food/v1/subcontractor_attachment/download/',
downloadBatch: '/food/v1/subcontractor_attachment/download_batch',
uri: 'FoodSubContractAttachment/getBySubcontractorId',
viewUri: '/food/v1/subcontractor_attachment/view'
}
break
case 'originalRecordId':
// 原始记录
this.originalRecordId = id
this.urlData = {
msg: 'FoodOriginalRecordAttachment',
pageUrl: 'FoodOriginalRecordAttachment/page',
deleteUrl: 'FoodOriginalRecordAttachment/deleteByIds',
uploadFileUrl: '/food/v1/original_attachment/',
downloadFileUrl: '/food/v1/original_attachment/download/',
downloadBatch: '/food/v1/original_attachment/download_batch',
uri: 'FoodOriginalRecordAttachment/getByOriginalRecordId',
viewUri: '/food/v1/original_attachment/preview'
}
break
case 'curveId':
// 采样记录
this.curveId = id
this.urlData = {
msg: 'ElnCurveAttachment',
pageUrl: 'ElnCurveAttachment/page',
deleteUrl: 'ElnCurveAttachment/deleteByIds',
uploadFileUrl: '/print/v1/curve_attachment/',
downloadFileUrl: '/print/v1/curve_attachment/download/',
downloadBatch: '/print/v1/curve_attachment/download_batch',
uri: 'ElnCurveAttachment/getById',
viewUri: '/print/v1/curve_attachment/view'
}
break
}
const idsObj = {
contractId: this.contractId,
sampleId: this.sampleId,
subcontractorId: this.subcontractorId,
originalRecordId: this.originalRecordId,
curveId: this.curveId
}
this.$refs.fileModal._setUploadData(
Object.assign({ id: id }, this.urlData),
idsObj
)
},
_deleteById(ids) {
this.deleteId = ids
this.modalContent = '确定要删除这 ' + ids.length + ' 个附件？'
this.$refs.confirmModal._openModal()
},
_delPage(data) {
this.$store.dispatch(this.urlData.deleteUrl, data).then(() => {
const status = this.$store.state[this.urlData.msg].success
if (status) {
this.$Message.success('删除成功！')
this.$refs.fileModal._page()
}
this.$refs.confirmModal._closeModal()
this.deleteId = []
})
},
// 删除提示框返回
_modalResult(msg) {
if (msg === '确定') {
// 删除一条记录
if (this.flag === undefined) {
// 只能删除自己上传的
this._delPage({ id: this.deleteId, flag: 1 })
} else {
// 可以删除全部
this._delPage({ id: this.deleteId })
}
}
},
_fileData(msg, data) {
switch (msg) {
case 'delete':
this._deleteById(data)
break
}
},
// 搜索
_search() {
this.$refs.fileModal._page()
}
}
}
</script>
components/file/file-manage/FilesList.vue 0 → 100644
<template>
<div>
<Row>
<!--操作-->
<Col span="24" style="margin-bottom: 10px">
<div class="btns-menu">
<!--查看方式-->
<Select v-model="viewVal" @on-change="_view" style="width:150px;float: left" placeholder="请选择查看方式">
<Option v-for="item in checkList" :key="item.value" :value="item.value">{{ item.name }}</Option>
</Select>
<!--上传-->
<label>
<Upload
:action="action"
:on-success="_handelsuccess"
:before-upload="_beupload"
:on-progress="_handelprogress"
:data="dataObj"
:with-credentials="true"
:show-upload-list="false"
style="float: left">
<Button>上传</Button>
</Upload>
</label>
<!--一系列操作-->
<!--非表格-->
<Button v-for="item in menusListA" :key="item.name" @click="_radioChange(item.value)" v-if="viewStyle === 2 || viewStyle === 3"
>{{item.name}}
</Button>
<!--表格-->
<Button v-for="item in menusList" :key="item.name" @click="_tableChange(item.value)"
v-if="viewStyle === 1" style="margin-right: 5px">{{item.name}}
</Button>
</div>
</Col>
<Col span="24" style="margin-bottom: 10px">
<!-- 默认是详细模式 -->
<div v-show="viewStyle === 1">
<PTVXETable ref="pageTable" :pageColumns="pageColumns" :tableHeight="tableHeight"
@on-result-change="_tableResultChange" :getPage="getPage" select-data>
<vxe-table-column
:field="item.key"
:title="item.title"
:min-width="item.width?item.width:200"
:fixed="item.fixed?item.fixed:undefined"
v-for="item in pageColumns"
:key="item.key" sortable>
<template slot-scope="scope">
<span v-if="item.dateTime">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM'):''}}</span>
<span v-else>{{scope.row[item.key]}}</span>
</template>
</vxe-table-column>
<vxe-table-column
title="操作"
align="center"
width="100"
fixed="right">
<template slot-scope="scope">
<VXEIconList
:msg="$fileFormat(scope.row.type,'img')?iconMsg:iconMsgDis"
@on-result-change="_iconClick" :rowData="scope.row"></VXEIconList>
</template>
</vxe-table-column>
</PTVXETable>
</div>
<!--/-->
<!--缩略图 模式-->
<div v-show="viewStyle === 2">
<ul :style="{ 'height': tableHeight + 'px' }" class="thumbnailStyle">
<CheckboxGroup @on-change="_chkVal" v-model="selectIds">
<li v-for="item in getPage.records" :key="item.id">
<div class="thumbnailStyleImg">
<Tooltip placement="top">
<img :src=" bigUrl+item.type+'.png' "/>
<div slot="content" style="white-space: normal">
<p>名称：{{item.fileName}}</p>
</div>
</Tooltip>
</div>
<div class="thumbnailStyleCheck clearCheck">
<Checkbox :label="item.id"><span class="inline-span" style="display: inline">{{item.fileName}}</span>
</Checkbox>
</div>
</li>
</CheckboxGroup>
</ul>
<div style="margin-top: 10px">共 {{getPage.total}} 条</div>
</div>
<!--/-->
<!--列表 模式-->
<div v-show="viewStyle === 3">
<ul :style="{ 'height': tableHeight + 'px' }" class="listStyle">
<CheckboxGroup @on-change="_chkVal" v-model="selectIds">
<li v-for="item in getPage.records" :key="item.id">
<div class="listStyleCheck clearCheck">
<Tooltip placement="top">
<span class="spanImg">
<img :src=" smallUrl+item.type+'.png' "/>
</span>
<span>
<Checkbox :label="item.id"><span>{{item.fileName}}</span></Checkbox>
</span>
<div slot="content" style="white-space: normal">
<p>名称：{{item.fileName}}</p>
</div>
</Tooltip>
</div>
</li>
</CheckboxGroup>
</ul>
<div style="margin-top: 10px">共 {{getPage.total}} 条</div>
</div>
<!--/-->
</Col>
</Row>
<!--上传loading-->
<div v-show="isLoad">
<Spin fix>
<Icon type="load-c" size=18 class="file-spin-icon-load"></Icon>
<div>正在上传,请稍后...</div>
</Spin>
</div>
<!--图片预览-->
<div>
<vue-gallery-slideshow :images="imgViewList" :index="imgViewIndex"
@close="imgViewIndex = null"></vue-gallery-slideshow>
</div>
</div>
</template>
<script>
import VueGallerySlideshow from 'vue-gallery-slideshow'
import global from '../../../api/config'
/**
* 公共组件modal 弹框（支持上传，下载，预览，删除附件等操作）
*/
export default {
components: { VueGallerySlideshow },
props: {
fileName: null
},
data() {
return {
imgViewList: [],
imgViewIndex: null,
iconMsg: [
{ type: 'trash-a', id: '', name: '删除' },
{ type: 'ios-download', id: '', name: '下载' },
{ type: 'images', id: '', name: '预览' }
],
iconMsgDis: [
{ type: 'trash-a', id: '', name: '删除' },
{ type: 'ios-download', id: '', name: '下载' },
{ type: 'images', id: '', name: '预览', disabled: true }
],
selectIds: [],
getPage: {},
pageColumns: [
{ title: '文件名', key: 'fileName' },
{ title: '类型', key: 'type', width: 120 },
{ title: '上传时间', key: 'ctime', width: 140, dateTime: true }
// {title: '上传人', key: 'cname', width: 120},
],
viewVal: 1,
viewStyle: 1,
menusList: [
{ name: '下载', value: 'down' },
{ name: '删除', value: 'delete' }
],
menusListA: [{ name: '删除', value: 'delete' }],
checkList: [
{ name: '详细模式', value: 1 },
{ name: '缩略图模式', value: 2 },
{ name: '列表模式', value: 3 }
],
Ids: [],
smallUrl: global.staticURL + '/img/smallfile/',
bigUrl: global.staticURL + '/img/bigfile/',
action: '',
dataObj: {
file: ''
// contractId: ''
},
isLoad: false, // 是否显示loading...
id: '', // 合同、委托、样品id
objectKey: [],
urlData: {},
idsObj: {}
}
},
computed: {
tableHeight: function() {
return this.$tableHeight('tableModal')
}
},
methods: {
_setUploadData(data, idsObj) {
this.selectIds = []
this.imgViewIndex = null
this.isLoad = false
this.id = data.id
// 各个ids
this.idsObj = idsObj
this.urlData = data
this.action = global.baseURL + data.uploadFileUrl + data.id
// this.$nextTick(() => {
// this._page()
// })
},
// _page: async function() {
// Object.assign(this.formObj, this.$refs.pageTable._searchParams())
// console.log('this.formObj', this.formObj)
// const result = await meterEntrust.pageSendEntrust(this.formObj)
// if (result) {
// this.$refs.pageTable._hideLoading()
// this.getPage = result
// }
// },
_formSearch() {
this.$refs.pageTable._pageChange(1)
},
_searchParams() {
const data = {}
Object.assign(data, { fileName: this.fileName }, this.idsObj)
return data
},
_tableResultChange(msg, data) {
switch (msg) {
case 'page':
this.Ids = []
this.objectKey = []
this.getPage = this.$store.state[this.urlData.msg].page
break
case 'selectData':
const idList = []
const objectKey = []
for (let i = 0; i < data.length; i++) {
idList.push(data[i].id)
objectKey.push(data[i].objectKey)
}
this.Ids = idList
this.objectKey = objectKey
break
case 'iconClick':
this._iconClick(data.name, data.rowData)
break
case 'changeSize':
this._page()
break
}
},
_iconClick(res, data) {
switch (res) {
case '下载':
window.open(
global.baseURL + this.urlData.downloadFileUrl + data.id,
'_blank'
)
break
case '删除':
this._deleteById([data.id])
break
case '预览':
this._viewImg(data)
break
}
},
// 预览图片（该合同下所有的）
_viewImg(data) {
this.$store.dispatch(this.urlData.uri, this.id).then(() => {
const viewUri = this.urlData.viewUri
const result = this.$store.state[this.urlData.msg].list
const imgViewList = []
for (let i = 0; i < result.length; i++) {
imgViewList.push(
global.baseURL +
viewUri +
'?id=' +
result[i].id +
'&objectKey=' +
result[i].objectKey
)
}
this.imgViewList = imgViewList
// 打开的是当前第几张图片
const salesUri =
global.baseURL +
viewUri +
'?id=' +
data.id +
'&objectKey=' +
data.objectKey
const index = this.imgViewList.findIndex(item => item === salesUri)
if (index === -1) {
this.imgViewIndex = 0
} else {
this.imgViewIndex = index
}
})
},
// 删除
_deleteById(id) {
this.$emit('on-result-change', 'delete', id)
},
// 查看方式改变
_view(val) {
this.viewStyle = val
this.selectIds = []
if (val === 1) {
this._formSearch()
}
},
_chkVal(val) {
this.selectIds = val
},
// 一系列操作返回的值
_radioChange(val) {
if (val === 'down') {
if (this.objectKey.length === 0) {
this.$Message.warning('请至少选择一条数据!')
} else {
this._downloadAll(this.objectKey)
}
}
if (val === 'delete') {
if (this.selectIds.length === 0) {
this.$Message.warning('请至少选择一条数据!')
} else {
this._deleteById(this.selectIds)
}
}
},
_tableChange(val) {
if (val === 'down') {
if (this.objectKey.length === 0) {
this.$Message.warning('请至少选择一条数据!')
} else {
this._downloadAll(this.objectKey)
}
}
if (val === 'delete') {
if (this.Ids.length === 0) {
this.$Message.warning('请至少选择一条数据!')
} else {
this._deleteById(this.Ids)
}
}
},
// 批量打包下载
_downloadAll(ids) {
window.open(
global.baseURL + this.urlData.downloadBatch + '?objectKeys=' + ids
)
},
_beupload(file) {
this.dataObj.file = file.name
},
_handelprogress(event, file, fileList) {
this.isLoad = true
},
_handelsuccess(response, file, fileList) {
// 上传成功
if (response.success) {
this.isLoad = false
this.$Message.success('上传成功！')
this._page()
} else {
this.isLoad = true
this.$Message.error(response.msg)
}
}
}
}
</script>
<style>
.radio-display.ivu-radio-group-button .ivu-radio-wrapper:first-child {
border-radius: 4px !important;
margin-right: 5px !important;
}
.radio-display. .ivu-radio-wrapper:last-child {
border-radius: 4px !important;
border-left: 1px solid #dddee1 !important;
}
</style>
components/file/file-upload/FileManage.vue 0 → 100644
<template>
<div>
<Modal v-model="showUploadModal" :width="800" class="modal-footer-none zIndex-1200">
<p slot="header">{{modalTitle}}</p>
<div>
<!--内容-->
<Row>
<!--查询-->
<Col span="24" style="margin-bottom: -10px">
<Form id="search-form-upload" :label-width="70" inline onsubmit="return false">
<label class="label-sign"></label>
<Form-item label="文件名称:" class="search-item">
<Input v-model="fileName" @on-enter="_pageChange(1)" name="fileName" placeholder="请输入文件名称" clearable/>
<input name="contractId" type="hidden">
<input name="originalId" type="hidden">
<input name="salesId" type="hidden">
</Form-item>
<Form-item class="search-btn">
<Button @click="_search" type="primary">搜索</Button>
</Form-item>
</Form>
</Col>
<!--列表-->
<Col span="24">
<FilesList ref="fileModal" @on-result-change="_fileData"></FilesList>
</Col>
</Row>
</div>
</Modal>
</div>
</template>
<script>
import global from '../../../api/config'
import FilesList from './FilesList'
import UploadFile from './UploadFile'
export default {
components: {
FilesList,
UploadFile
},
data() {
return {
showUploadModal: false,
modalTitle: '附件',
fileName: '',
selectIds: [],
uri: '',
getPage: {},
pageParams: {
rows: 20
},
downloadFileUrl: ''
}
},
methods: {
_open(data, key, title) {
console.log('data', data)
this.fileName = ''
this.showUploadModal = true
this.downloadFileUrl = data.downloadFileUrl
this.modalTitle = title
this.url = data.pageUrl
$('input[name=' + key + ']').val(data.id)
this._page()
this.$emit('on-result-change')
this.$refs.fileModal._setUploadData(data)
},
_openFile(pageData) {
this.getPage = pageData
this.$refs.fileModal._open(pageData, '300')
},
_delPage(url, data) {
this.$store.dispatch(url, data).then(() => {
this.$emit('on-result-change', 'success', '')
})
},
_page() {
this.$store
.dispatch('FoodOriginalDataFile/page', this._searchParams())
.then(() => {
this.$emit('on-result-change', 'file-page', '')
})
},
_pageChange(page) {
this.pageParams.page = page
this.$emit('on-result-change')
},
_pageSizeChange(rows) {
this.pageParams.rows = rows
this.$emit('on-result-change')
},
_search() {
this.$emit('on-result-change')
},
_searchParams() {
const data = this.$serialize('search-form-upload')
return this.$extend(data, this.pageParams)
},
_deleteById(id) {
// 删除一条记录
this.$emit('on-result-change', 'delete-page', id)
},
// 下载
_download(id) {
this.$Modal.confirm({
title: '提示',
content: '确定要下载？',
onOk: () => {
window.open(global.baseURL + this.downloadFileUrl + id, '_blank')
}
})
},
_fileData(msg, data) {
switch (msg) {
case 'delete':
this._deleteById(data)
break
case 'down':
this._download(data)
break
case 'page':
this._pageChange(data)
break
case 'rows':
this._pageSizeChange(data)
break
case 'refresh':
this._search()
break
}
}
}
}
</script>
components/file/file-upload/FilesList.vue 0 → 100644
<template>
<div>
<Row>
<!--操作-->
<Col span="24" style="margin-bottom: 10px">
<div class="btns-menu">
<!--查看方式-->
<Select v-model="viewVal" @on-change="_view" style="width:150px" placeholder="请选择查看方式">
<Option v-for="item in checkList" :key="item.value" :value="item.value">{{ item.name }}</Option>
</Select>
<Button type="ghost">
<Upload
:action="action"
:on-success="_handelsuccess"
:before-upload="_beupload"
:on-progress="_handelprogress"
:data="dataObj"
:with-credentials="true"
:show-upload-list="false"
>&nbsp;上传
</Upload>
</Button>
<!--一系列操作-->
<RadioGroup @on-change="_radioChange" v-if="viewStyle === 2 || viewStyle === 3" type="button"
class="radio-display">
<Radio :label="item.value" v-for="item in menusList" :key="item.name">&nbsp;{{item.name}}
</Radio>
</RadioGroup>
<RadioGroup @on-change="_tableChange" v-if="viewStyle === 1" type="button" class="radio-display">
<Radio :label="item.value" v-for="item in menusList" :key="item.name">&nbsp;{{item.name}}
</Radio>
</RadioGroup>
</div>
</Col>
<Col span="24" style="margin-bottom: 10px">
<!-- 默认是详细模式 -->
<div v-if="viewStyle === 1">
<el-table
ref="moveTable"
:data="getPage.records"
:height="tableHeight"
v-loading="loading"
@select-all="_selectAll"
@selection-change="_selectRowChange"
@cell-click="_cellClick"
:row-class-name="_tableRowClassName"
stripe
border
size="small"
style="width: 100%"
>
<el-table-column
type="selection"
width="55"
fixed="left"
align="center">
</el-table-column>
<el-table-column
:prop="item.key"
:label="item.title"
:width="item.width"
v-for="item in pageColumns"
:key="item.id"
show-overflow-tooltip sortable>
</el-table-column>
<el-table-column
title="操作"
align="center"
width="100"
fixed="right">
<template slot-scope="scope">
<IconList :msg="(scope.row['type'] === 'jpg' || scope.row['type'] === 'png')?iconMsg:iconMsgDis"
@on-result-change="_iconClick" :rowData="scope.row"></IconList>
</template>
</el-table-column>
</el-table>
<Page :total="getPage.total" :page-size="getPage.size" :current="getPage.current" @on-change="_pageChange"
@on-page-size-change='_pageSizeChange'
placement="top" show-elevator show-total show-sizer style="margin-top: 10px;"></Page>
</div>
<!--/-->
<!--缩略图 模式-->
<div v-else-if="viewStyle === 2">
<ul :style="{ 'height': tableHeight + 'px' }" class="thumbnailStyle">
<CheckboxGroup @on-change="_chkVal" v-model="selectIds">
<li v-for="item in getPage.records" :key="item.id">
<div class="thumbnailStyleImg">
<Tooltip placement="top">
<img :src=" bigUrl+item.type+'.png' "/>
<div slot="content" style="white-space: normal">
<p>名称：{{item.fileName}}</p>
</div>
</Tooltip>
</div>
<div class="thumbnailStyleCheck clearCheck">
<Checkbox :label="item.id"><span class="inline-span" style="display: inline">{{item.fileName}}</span>
</Checkbox>
</div>
</li>
</CheckboxGroup>
</ul>
<div style="margin-top: 10px">共 {{getPage.total}} 条</div>
</div>
<!--/-->
<!--列表 模式-->
<div v-else="viewStyle === 3">
<ul :style="{ 'height': tableHeight + 'px' }" class="listStyle">
<CheckboxGroup @on-change="_chkVal" v-model="selectIds">
<li v-for="item in getPage.records" :key="item.id">
<div class="listStyleCheck clearCheck">
<Tooltip placement="top">
<span class="spanImg">
<img :src=" smallUrl+item.type+'.png' "/>
</span>
<span>
<Checkbox :label="item.id"><span>{{item.fileName}}</span></Checkbox>
</span>
<div slot="content" style="white-space: normal">
<p>名称：{{item.fileName}}</p>
</div>
</Tooltip>
</div>
</li>
</CheckboxGroup>
</ul>
<div style="margin-top: 10px">共 {{getPage.total}} 条</div>
</div>
<!--/-->
</Col>
</Row>
<!--上传loading-->
<div v-show="isLoad">
<Spin fix>
<Icon type="load-c" size=18 class="file-spin-icon-load"></Icon>
<div>正在上传,请稍后...</div>
</Spin>
</div>
<!--图片预览-->
<div>
<vue-gallery-slideshow :images="imgViewList" :index="imgViewIndex"
@close="imgViewIndex = null"></vue-gallery-slideshow>
</div>
</div>
</template>
<script>
import VueGallerySlideshow from 'vue-gallery-slideshow'
import ElementTable from '../../table/ElementTable'
import IconList from '../../base/IconList'
import global from '../../../api/config'
export default {
components: { ElementTable, IconList, VueGallerySlideshow },
data() {
return {
imgViewList: [],
imgViewIndex: null,
loading: false,
iconMsg: [
{ type: 'trash-a', id: '', name: '删除' },
{ type: 'ios-download', id: '', name: '下载' },
{ type: 'images', id: '', name: '预览' }
],
iconMsgDis: [
{ type: 'trash-a', id: '', name: '删除' },
{ type: 'ios-download', id: '', name: '下载' },
{ type: 'images', id: '', name: '预览', disabled: true }
],
heightSearch: '',
selectIds: [],
getPage: {},
pageParams: {
rows: 20
},
pageColumns: [
{ title: '文件名', key: 'fileName' },
{ title: '类型', key: 'type', width: 120 }
],
viewVal: 1,
viewStyle: 1,
menusList: [
{ name: '下载', value: 'down' },
{ name: '删除', value: 'delete' }
],
checkList: [
{ name: '详细模式', value: 1 },
{ name: '缩略图模式', value: 2 },
{ name: '列表模式', value: 3 }
],
Ids: [],
smallUrl: global.staticURL + '/img/smallfile/',
bigUrl: global.staticURL + '/img/bigfile/',
action: '',
dataObj: {
file: '',
contractId: ''
},
isLoad: false, // 是否显示loading...
contractId: '', // 合同id
checkData: []
}
},
computed: {
tableHeight: function() {
return this.$tableHeight('tableModal')
}
},
methods: {
// 整行变色
_tableRowClassName({ row, rowIndex }) {
if (this.checkData.length !== 0) {
/* 选中的进行高亮显示 */
const index = this.checkData.indexOf(row)
if (index !== -1) {
return 'high-light-row'
}
} else {
/* 没选中的根据页面逻辑变色 */
}
},
// 点击单元格触发
_cellClick(row, event, column) {
if (event.label !== '操作') {
this.checkData = [row]
this.$refs.moveTable.toggleRowSelection(row)
}
},
_iconClick(res, data) {
switch (res) {
case '下载':
this._download(data.id)
break
case '删除':
this._deleteById(data.id)
break
case '预览':
this._viewImg(data)
break
}
},
// 预览图片（该合同下所有的）
_viewImg(data) {
this.$store
.dispatch('EnvContractAttachment/getByContractId', this.contractId)
.then(() => {
const result = this.$store.state.EnvContractAttachment.list
const imgViewList = []
for (let i = 0; i < result.length; i++) {
imgViewList.push(
global.baseURL +
'/env/v1/env_contract_attachment/view?id=' +
result[i].id +
'&objectKey=' +
result[i].objectKey
)
}
this.imgViewList = imgViewList
// 打开的是当前第几张图片
const salesUri =
global.baseURL +
'/env/v1/env_contract_attachment/view?id=' +
data.id +
'&objectKey=' +
data.objectKey
const index = this.imgViewList.findIndex(item => item === salesUri)
if (index === -1) {
this.imgViewIndex = 0
} else {
this.imgViewIndex = index
}
})
},
_open(data, height) {
this.getPage = data
this.tableHeight = height
this.selectIds = []
this.imgViewIndex = null
},
_setUploadData(data) {
this.isLoad = false
this.contractId = data.id
this.action = global.baseURL + data.uploadFileUrl + data.id
},
_pageChange(page) {
this.$emit('on-result-change', 'page', page)
},
_selectRowChange(data) {
this.checkData = data
const idList = []
for (let i = 0; i < data.length; i++) {
idList.push(data[i].id)
}
this.Ids = idList
},
_selectAll: function(data) {
this._selectRowChange(data)
},
_pageSizeChange(rows) {
this.$emit('on-result-change', 'rows', rows)
},
// 删除
_deleteById(id) {
this.$emit('on-result-change', 'delete', id)
},
// 下载
_download(id) {
this.$emit('on-result-change', 'down', id)
},
// 查看方式改变
_view(val) {
this.viewStyle = val
this.selectIds = []
},
_chkVal(val) {
this.selectIds = val
},
// 一系列操作返回的值
_radioChange(val) {
if (val == 'down') {
if (this.selectIds.length === 0) {
this.$Message.warning('请选择一条数据!')
} else if (this.selectIds.length > 1) {
this.$Message.warning('只能选择一条数据下载!')
} else {
this._download(this.selectIds[0])
}
}
if (val == 'delete') {
if (this.selectIds.length === 0) {
this.$Message.warning('请选择一条数据!')
} else {
this._deleteById(this.selectIds)
}
}
},
_tableChange(val) {
if (val == 'down') {
if (this.Ids.length === 0) {
this.$Message.warning('请选择一条数据!')
} else if (this.Ids.length > 1) {
this.$Message.warning('只能选择一条数据下载!')
} else {
this._download(this.Ids[0])
}
}
if (val == 'delete') {
if (this.Ids.length === 0) {
this.$Message.warning('请选择一条数据!')
} else {
this._deleteById(this.Ids)
}
}
},
_beupload(file) {
this.dataObj.file = file.name
},
_handelprogress(event, file, fileList) {
this.isLoad = true
},
_handelsuccess(response, file, fileList) {
// 上传成功
if (response.success) {
this.isLoad = false
this.$Message.success('上传成功！')
this.$emit('on-result-change', 'refresh')
} else {
this.isLoad = true
this.$Message.error(response.msg)
}
}
}
}
</script>
<style>
.radio-display.ivu-radio-group-button .ivu-radio-wrapper:first-child {
border-radius: 4px !important;
margin-right: 5px !important;
}
.radio-display.ivu-radio-group-button .ivu-radio-wrapper:last-child {
border-radius: 4px !important;
border-left: 1px solid #dddee1 !important;
}
</style>
components/file/file-upload/UploadFile.vue 0 → 100644
<template>
<div>
<div>
<Upload
:action="action"
:on-success="_handelsuccess"
:before-upload="_beupload"
:on-progress="_handelprogress"
:data="dataObj"
:with-credentials="true"
:show-upload-list="false"
>
<Button type="success">导入文件</Button>
</Upload>
</div>
<div v-show="isLoad">
<Spin fix>
<Icon type="load-c" size=18 class="file-spin-icon-load"></Icon>
<div>正在上传,请稍后...</div>
</Spin>
</div>
</div>
</template>
<script>
/**
* 添加编辑文件夹表
*/
import global from '../../../api/config'
export default {
data() {
return {
action: '',
dataObj: {
file: '',
contractId: ''
},
isLoad: false, // 是否显示loading...
contractId: '' // 合同id
}
},
methods: {
_open(data) {
this.isLoad = false
this.contractId = data.id
this.action = global.baseURL + data.uploadFileUrl + this.contractId
},
_beupload(file) {
this.dataObj.file = file.name
},
_handelprogress(event, file, fileList) {
this.isLoad = true
},
_handelsuccess(response, file, fileList) {
// 上传成功
if (response.success) {
this.isLoad = false
this.$Message.success('上传成功！')
this.$emit('on-result-change')
} else {
this.isLoad = false
this.$Message.error(response.msg)
}
}
}
}
</script>
pages/meter-entrust/send-test/MeterSendEntrust.vue
......@@ -45,6 +45,7 @@
</Row>
</div>
</div>
<FileManage ref="FileManage"></FileManage>
<MeterSendOperation ref="operationModal"></MeterSendOperation>
<MeterSubcontractorEdit ref="editSubcontractorModal" @on-result-change="_formSearch"></MeterSubcontractorEdit>
</div>
......@@ -256,7 +257,7 @@ export default {
_upload(id) {
// 上传文件
this.$refs.refModal._open(id, 'subcontractorId')
this.$refs.FileManage._open(id, 'subcontractorId')
},
_getById: async function(id) {
const result = await meterEntrust.getVOById(id)
......
plugins/common.js
......@@ -26,19 +26,53 @@ Vue.prototype.$extend = extend
* 表单序列化
* https://www.npmjs.com/package/form-serialize
*/
// Vue.prototype.$serialize = function(formId) {
// const form = document.querySelector('#' + formId)
//
// // 通用方法去除输入框前后空格
// $(document).ready(function() {
// $('form').on('change', function() {
// $('form input[type=text]').each(function() {
// this.value = $.trim(this.value)
// })
// })
// })
//
// return serialize(form, { hash: true })
// }
Vue.prototype.$serialize = function(formId) {
const form = document.querySelector('#' + formId)
if (formId) {
const form = document.querySelector('#' + formId)
// 通用方法去除输入框前后空格
$(document).ready(function() {
$('form').on('change', function() {
$('form input[type=text]').each(function() {
this.value = $.trim(this.value)
// 通用方法去除输入框前后空格
$(document).ready(function() {
$('form').on('change', function() {
$('form input[type=text]').each(function() {
this.value = $.trim(this.value)
})
})
})
})
return serialize(form, { hash: true })
return serialize(form, { hash: true })
}
}
Vue.prototype.$serializeFormSearch = function(formObj) {
const newFormObj = {}
for (const key in formObj) {
// 不为空的时候传值
if (
formObj[key] !== '' &&
formObj[key] !== undefined &&
formObj[key] !== null
) {
if (typeof formObj[key] === 'string') {
newFormObj[key] = formObj[key].trim() // 为字符串，则去掉前后空格
} else {
newFormObj[key] = formObj[key]
}
}
}
return newFormObj
}
/**
*table默认展示多少条数据
......@@ -685,13 +719,77 @@ Vue.prototype.$sysMenus = function() {
]
return result
}
// Vue.prototype.$uniqueArrayItem = function(arr, item) {
// for (let i = 0; i < arr.length - 1; i++) {
// const arri = arr[i]
// for (let j = i + 1; j < arr.length; j++) {
// const arrj = arr[j]
// if (arri[item] === arrj[item]) {
// arr.splice(j, 1)
// j--
// }
// }
// }
// return arr
// }
/**
* pageoffice(可编辑)
* objectKey,id,isReport(1是报告，可编辑;0是不可编辑)
* 地址栏需要对中文进行编码处理
*
*/
Vue.prototype.$platform = function() {
let isWin = false
if (navigator.platform === 'Win32' || navigator.platform === 'Windows') {
isWin = true
}
return isWin
}
// Vue.prototype.$openWindowModeless = function(data) {
// if (this.$platform()) {
// // windows系统
//
// // id 为报告id或者委托id
// const noMark = data.noMark
// const realname = encodeURI(encodeURI(global.getUserInfo().realname))
// const companyId = global.getUserInfo().companyId
// const userId = global.getUserInfo().id
//
// const uri =
// global.baseURL +
// '/print/v1/word?key=' +
// data.objectKey +
// '&sysMark=' +
// (noMark ? '' : global.getCode()) +
// '&businessId=' +
// data.id +
// '&isReport=' +
// (data.isReport ? data.isReport : 0) +
// '&userId=' +
// userId +
// '&userName=' +
// realname +
// '&companyId=' +
// companyId +
// '&noParam=no'
// console.log(uri)
// return POBrowser.openWindowModeless(uri, 'width=1200px;height=800px;')
// } else {
// // 其他系统
//
// window.open(
// global.baseURL + '/print/v1/oos?key=' + data.objectKey + '&edit=true',
// '',
// 'height=' +
// (screen.availHeight - 50) +
// ',' +
// 'width=' +
// (screen.availWidth - 10) +
// ',top=0,left=0,toolbar=no,menubar=no,scrollbars=auto,resizeable=no,' +
// 'location=no,status=no'
// )
// }
// }
Vue.prototype.$openWindowModeless = function(data) {
// id 为样品id或者委托id
const realname = encodeURI(encodeURI(global.getUserInfo().realname))
......@@ -709,7 +807,7 @@ Vue.prototype.$openWindowModeless = function(data) {
global.getUserInfo().id +
'&userName=' +
realname
/* eslint-disable no-undef */
// eslint-disable-next-line no-undef
return POBrowser.openWindowModeless(uri, 'width=1200px;height=800px;')
}
/**
......@@ -728,6 +826,7 @@ Vue.prototype.$pageofficePrint = function(data) {
data.type +
'&businessIds=' +
data.id
// eslint-disable-next-line no-undef
return POBrowser.openWindowModeless(uri, 'width=350px;height=300px;')
}
......
plugins/global.js
......@@ -10,6 +10,7 @@ import elementTable from '../components/table/elementTable'
import modalFooter from '../components/base/modalFooter'
import PTVXETable from '../components/table/PTVXETable'
import VXEIconList from '../components/base/VXEIconList'
import FileManage from '../components/file/file-manage/FileManage'
Vue.use(VXETable)
Vue.component('btn-list', btnList)
......@@ -18,3 +19,4 @@ Vue.component('element-table', elementTable)
Vue.component('modal-footer', modalFooter)
Vue.component('PTVXETable', PTVXETable)
Vue.component('VXEIconList', VXEIconList)
Vue.component('FileManage', FileManage)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment