Browse Source

完善附件清单管理

zhanglei
yunuo970428 2 years ago
parent
commit
1bc2647674
  1. 49
      anrui-base/anrui-base-ui/src/api/accessorieslist/accessorieslist.js
  2. 231
      anrui-base/anrui-base-ui/src/components/uploadFile/uploadImg.vue
  3. 15
      anrui-base/anrui-base-ui/src/router/index.js
  4. 321
      anrui-base/anrui-base-ui/src/views/accessorieslist/accessorieslist.vue
  5. 229
      anrui-base/anrui-base-ui/src/views/accessorieslist/accessorieslistAdd.vue

49
anrui-base/anrui-base-ui/src/api/accessorieslist/accessorieslist.js

@ -0,0 +1,49 @@
import request from '@/utils/request'
export default {
// 查询分页列表
listPage: function(params) {
return request({
url: '/base/v1/basefiles/listPage',
method: 'post',
data: params,
headers: { 'Content-Type': 'application/json' }
})
},
saveOrUpdate: function(data) {
return request({
url: '/base/v1/basefiles/saveOrUpdate',
method: 'post',
data: data,
headers: { 'Content-Type': 'application/json' }
})
},
fetchBySid: function(data) {
return request({
url: '/base/v1/basefiles/details/' + data,
method: 'get'
})
},
deleteBySids: function(data) {
return request({
url: '/base/v1/basefiles/deleteBySids',
method: 'DELETE',
data: data,
headers: { 'Content-Type': 'application/json' }
})
},
createFileNo: function(data) {
return request({
url: '/base/v1/basefiles/createFileNo',
method: 'get',
params: data
})
},
hideOrShow: function(data) {
return request({
url: '/base/v1/basefiles/hideOrShow',
method: 'post',
params: data
})
}
}

231
anrui-base/anrui-base-ui/src/components/uploadFile/uploadImg.vue

@ -0,0 +1,231 @@
<template>
<div>
<el-upload ref="imgUpload" v-loading="loadding" class="avatar-uploader" :headers="accessToken"
:action="uploadFile" accept="accept" list-type="picture-card"
:file-list="files" :on-remove="removeImage" :on-preview="handlePictureCardPreview"
:on-progress="uploadProgrees"
:on-error="uploadError" :on-success="uploadImgSuccess_FuJian">
<i class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :append-to-body="true" title="查看图片">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
import { uploadFile } from '@/api/portal/Upload'
import { getStorage } from '@/utils/auth.js'
export default {
model: {
prop: 'name',
event: 'change'
},
props: {
placeholder: {
type: String,
default: ''
},
bucket: {
type: String,
default: 'abc'
},
//
width: {
type: String,
default: '270px'
},
limit: {
type: Number,
default: 1
},
accept: {
type: String,
default:
'.jpg,.jpeg,.png,.bmp,.pdf,.JPG,.JPEG,.BMP,.PDF,.xls,.docx,.xlsx,.ppt,.pptx'
},
//
name: {
type: Array,
required: true
},
uploadData: {
type: Object,
default: {}
}
},
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
accessToken: null,
uploadFile: uploadFile,
fileList_FuJian: [],
enclosure: '',
file_add: '',
file_catch: '',
files: [],
files_list: [],
filedUrl: '',
// fileUrl: fileUrl,
// showpicture:false,
isview: false,
nameArr: '',
loadding: false,
stateName: ''
}
},
watch: {
name: {
deep: true,
immediate: true,
handler(newVal, oldVal) {
console.log('aaaa1', newVal)
console.log('aaaa2', oldVal)
this.files = newVal
console.log('aaaa2this.files', this.files)
}
}
},
mounted() {
this.$nextTick(() => {
this.Init()
})
},
created() {
this.uploadFile = uploadFile //
this.accessToken = {
token: getStorage()
}
},
methods: {
showImg(imgList) {
this.stateName = 'xunidingjinAdd'
this.files = imgList
console.log('回显图片', this.files)
},
view() {
// window.open(this.filedUrl)
},
//
Init() {
if (this.name !== undefined) {
this.files = []
for (var i = 0; i < this.name.length; i++) {
this.files.push({
name: this.name[i],
url: this.name[i]
})
}
}
},
// --
uploadImgSuccess_FuJian(response, file, fileList) {
console.log('您选择的file:', file)
if (file.response.code === '200') {
this.loadding = false
//
this.filedUrl = this.fileUrl + file.response.data
// var uid = file.response.data
this.files.push({
name: file.response.data.sourceFileName,
url: file.response.data.fullUrl,
filePath: file.response.data.filePath,
size: file.response.data.size
})
this.$emit('change', this.files)
this.$emit('eett', this.files)
}
},
removeImage(file, ImageFileList) {
this.files.splice(this.files.indexOf(file), 1)
const imgFiles = []
this.files.forEach((o) => {
imgFiles.push(o.url)
})
this.$emit('fileChange', this.files)
},
handleRemove(file, fileList) {
console.log('file:' + JSON.stringify(file))
console.log('fileList:' + JSON.stringify(fileList))
this.enclosure = ''
// 1. id(this.file_add)
this.getNewFileId(fileList)
// 2. id(this.file_catch)
this.getCatchFileId(file)
// 3. id
this.getFileId()
// 4. id
this.$emit('change', this.enclosure)
},
// this.file_add(id)
getNewFileId(fileList) {
// debugger
this.file_add = ''
for (var i = 0; i < fileList.length; i++) {
if (fileList[i].response && fileList[i].response.code === '200') {
this.file_add = this.file_add + fileList[i].response.data + ','
}
}
if (this.file_add !== '') {
this.file_add = this.file_add.substring(0, this.file_add.length - 1)
}
// console.log('1. this.file_add: ' + this.file_add)
},
// this.file_catchid
getCatchFileId(file) {
for (var i = 0; i < this.files_list.length; i++) {
if (this.file_catch !== '') {
// 1. id
if (this.files_list[i].name === file.name) {
// 2. file_catchfils_arry
var fils_arry = this.file_catch.split(',')
// 3. fils_arry this.files_list[i].id
var arry = []
fils_arry.forEach((element) => {
//
if (element !== this.files_list[i].id) {
arry.push(element)
}
})
// 4. file_catch
this.file_catch = arry.join(',')
}
}
}
// console.log('2. this.file_catch:' + this.file_catch)
},
// id
getFileId() {
// console.log('3. this.file_catch:' + this.file_catch + ',this.file_add:' + this.file_add)
if (this.file_catch !== '') {
if (this.file_add !== '') {
this.enclosure = this.file_catch + ',' + this.file_add
} else {
this.enclosure = this.file_catch
}
} else {
this.enclosure = this.file_add
}
},
handlePictureCardPreview(file) {
this.dialogVisible = true
this.dialogImageUrl = file.url
},
//
uploadError() {
this.loadding = false
},
uploadProgrees(event, file, fileList) {
if (Number(event.percent) > 0) {
this.loadding = true
}
}
}
}
</script>
<style lang="scss" scoped></style>

15
anrui-base/anrui-base-ui/src/router/index.js

@ -214,6 +214,21 @@ export const constantRoutes = [
}
]
},
{
path: '/accessorieslist',
component: Layout,
redirect: '/accessorieslist',
meta: { title: '附件清单管理' },
children: [
{
path: '/accessorieslist/accessorieslist',
component: () =>
import('@/views/accessorieslist/accessorieslist.vue'),
name: 'AccessoriesList',
meta: { title: '附件清单管理', noCache: true }
}
]
},
// 流程审批
// 经销商备案--编辑
{

321
anrui-base/anrui-base-ui/src/views/accessorieslist/accessorieslist.vue

@ -0,0 +1,321 @@
<template>
<div class="app-container">
<!--列表页面-->
<div v-show="viewState == 1">
<button-bar view-title="附件清单管理" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/>
<!--Start查询列表部分-->
<div class="main-content">
<div class="searchcon">
<el-button size="small" class="searchbtn" @click="clicksearchShow">{{ searchxianshitit }}</el-button>
<div v-show="isSearchShow" class="search">
<el-form ref="listQueryform" :inline="true" :model="listQuery" label-width="100px" class="tab-header">
<el-form-item label="业务类型">
<el-select v-model="listQuery.params.busTypeKey" placeholder="请选择" clearable filterable>
<el-option v-for="item in busType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
</el-select>
</el-form-item>
<el-form-item label="文件名称">
<el-input v-model="listQuery.params.fileName" placeholder="" clearable/>
</el-form-item>
<el-form-item label="是否必传">
<el-input v-model="listQuery.params.isUpload" placeholder="" clearable/>
</el-form-item>
</el-form>
<div class="btn" style="text-align: center;">
<el-button type="primary" icon="el-icon-search" size="small" @click="handleFilter">查询</el-button>
<el-button type="primary" icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button>
</div>
</div>
</div>
<!--End查询列表部分-->
<div class="listtop">
<div class="tit">附件列表</div>
<pageye v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<!--Start 主页面主要部分 -->
<div class="">
<el-table :key="tableKey" v-loading="listLoading" :data="list" :border="true" style="width: 100%;" @selection-change="handleSelectionChange">
<el-table-column type="selection" align="center" width="50"/>
<el-table-column label="序号" type="index" width="80" :index="indexMethod" align="center"/>
<el-table-column prop="busTypeValue" label="业务类型" align="center"/>
<el-table-column prop="fileName" label="文件名称" align="center"/>
<el-table-column prop="count" label="上传份数" align="center"/>
<el-table-column label="是否必传" align="center">
<template slot-scope="scope">
<span>{{ scope.row.isUpload == '1' ? '是' : '否' }}</span>
</template>
</el-table-column>
<el-table-column prop="remarks" label="备注" align="center"/>
<el-table-column label="示例" align="center">
<template slot-scope="scope">
<span class="bluezi" v-show="scope.row.files.length > 0" @click="lookFile(scope.row.files)">查看</span>
</template>
</el-table-column>
<el-table-column label="隐藏/显示" align="center">
<template slot-scope="scope">
<el-switch v-model="scope.row.state" active-value='1' inactive-value='0' active-color="#13ce66" inactive-color="#ff4949" @change="enabledChange($event,scope.row)"/>
</template>
</el-table-column>
</el-table>
</div>
<!--End 主页面主要部分-->
<div class="pages">
<div class="tit"/>
<!-- 翻页 -->
<pagination v-show="list.length > 0" :total="listQuery.total" :page.sync="listQuery.current" :limit.sync="listQuery.size" class="pagination" @pagination="getList"/>
</div>
<!--End查询列表部分-->
</div>
</div>
<!--新增及修改 -->
<accessorieslistAdd v-show="viewState == 2 || viewState == 3" ref="divAdd" @doback="resetState" @reloadlist="getList"/>
<!-- 照片弹窗 -->
<el-dialog title="" :visible.sync="dialogImgVisible" :append-to-body="true">
<el-image style="width: 178px;height: 178px;" v-for="(item, index) in url_list" :key="index" :src="item" :preview-src-list="url_list"/>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/pagination'
import pageye from '@/components/pagination/pageye'
import ButtonBar from '@/components/ButtonBar'
import req from '@/api/accessorieslist/accessorieslist'
import { getOrgSidByPath, typeValues } from '@/api/jichuxinxi/dictcommons'
import accessorieslistAdd from './accessorieslistAdd'
export default {
name: 'Capital',
components: {
Pagination,
pageye,
ButtonBar,
accessorieslistAdd
},
data() {
return {
dialogImgVisible: false,
url_list: [],
btndisabled: false,
btnList: [
{
type: 'primary',
size: 'small',
icon: 'plus',
btnKey: 'toAdd',
btnLabel: '新增'
},
{
type: 'primary',
size: 'small',
icon: 'edit',
btnKey: 'toEdit',
btnLabel: '编辑'
},
{
type: 'danger',
size: 'small',
icon: 'del',
btnKey: 'doDel',
btnLabel: '删除'
},
{
type: 'info',
size: 'small',
icon: 'cross',
btnKey: 'doClose',
btnLabel: '关闭'
}
],
busType_list: [],
isSearchShow: false,
searchxianshitit: '显示查询条件',
viewState: 1, // 1 2 3 4
tableKey: 0,
list: [],
sids: [], // SIDs
FormLoading: false,
listLoading: false,
//
listQuery: {
current: 1,
size: 10,
total: 0,
params: {
userSid: '',
busTypeKey: '',
isUpload: '',
useOrgSid: '',
fileName: ''
}
}
}
},
created() {
//
this.init()
},
mounted() {
this.$refs['btnbar'].setButtonList(this.btnList)
},
methods: {
//
clicksearchShow() {
this.isSearchShow = !this.isSearchShow
if (this.isSearchShow) {
this.searchxianshitit = '隐藏查询条件'
} else {
this.searchxianshitit = '显示查询条件'
}
},
btnHandle(btnKey) {
console.log('XXXXXXXXXXXXXXX ' + btnKey)
switch (btnKey) {
case 'toAdd':
this.toAdd()
break
case 'toEdit':
this.toEdit()
break
case 'doDel':
this.doDel()
break
case 'doClose':
this.doClose()
break
default:
break
}
},
init() {
typeValues({ type: 'businessType' }).then((res) => {
if (res.success) {
this.busType_list = res.data
}
})
getOrgSidByPath({ orgPath: window.sessionStorage.getItem('defaultOrgPath') }).then((resp) => {
if (resp.success) {
this.listQuery.params.useOrgSid = resp.data
this.getList()
}
})
},
// sid
handleSelectionChange(row) {
const aa = []
row.forEach(element => {
aa.push(element.sid)
})
this.sids = aa
},
//
indexMethod(index) {
var pagestart = (this.listQuery.current - 1) * this.listQuery.size
var pageindex = index + 1 + pagestart
return pageindex
},
//
getList() {
this.listLoading = true
req.listPage(this.listQuery).then(response => {
this.listLoading = false
if (response.success) {
this.list = response.data.records
this.listQuery.total = response.data.total
} else {
this.list = []
this.listQuery.total = 0
}
})
},
//
handleFilter() {
this.listQuery.current = 1
if (this.listQuery.params.isUpload == '是') {
this.listQuery.params.isUpload = '1'
} else if (this.listQuery.params.isUpload == '否') {
this.listQuery.params.isUpload = '0'
}
this.getList()
},
//
handleReset() {
this.listQuery = {
current: 1,
size: 10,
total: 0,
params: {
userSid: '',
busTypeKey: '',
isUpload: '',
useOrgSid: '',
fileName: ''
}
}
this.init()
},
toAdd() {
this.viewState = 2
this.$refs['divAdd'].showAdd(this.listQuery.params.useOrgSid)
},
toEdit(row) {
if (this.sids.length === 1) {
this.viewState = 3
this.$refs['divAdd'].showEdit(this.sids[0])
} else {
this.$message({ showClose: true, type: 'error', message: '请选择一条记录进行编辑操作' })
}
},
doDel() {
if (this.sids.length === 0) {
this.$message({ showClose: true, type: 'error', message: '请选择至少一条记录进行删除操作' })
return
}
const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?'
this.$confirm(tip, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
req.deleteBySids(this.sids).then(resp => {
if (resp.success) {
this.$message({ type: 'success', message: resp.msg, showClose: true })
}
this.getList()
loading.close()
}).catch(e => {
loading.close()
})
}).catch(() => {
})
},
lookFile(row) {
this.dialogImgVisible = true
this.url_list = row
},
enabledChange(val, row) {
req.hideOrShow({ sid: row.sid, state: row.state }).then((res) => {
if (res.success) {
this.$message({ showClose: true, type: 'success', message: '操作成功' })
}
})
},
//
resetState() {
this.viewState = 1
},
doClose() {
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.go(-1)
}
}
}
</script>
<style scoped>
</style>

229
anrui-base/anrui-base-ui/src/views/accessorieslist/accessorieslistAdd.vue

@ -0,0 +1,229 @@
<template>
<div class="app-container">
<div class="tab-header webtop">
<div>{{ viewTitle }}</div>
<div>
<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate()">保存</el-button>
<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
</div>
</div>
<div class="listconadd">
<el-form ref="form_obj" :model="formobj" :rules="rules" class="formaddcopy02">
<el-row style="border-top: 1px solid #e0e3eb">
<el-col :span="12">
<div class="span-sty"><span>业务类型</span></div>
<el-form-item>
<el-select class="addinputInfo" v-model="formobj.busTypeValue" placeholder="请选择" clearable filterable @change="busTypeChange">
<el-option v-for="item in busType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty"><span>文件编号</span></div>
<el-form-item><span class="addinputInfo">{{ formobj.fileNo }}</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty"><span>文件名称</span></div>
<el-form-item><el-input v-model="formobj.fileName" class="addinputInfo addinputw" clearable placeholder=""/></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty"><span>文件格式</span></div>
<el-form-item>
<el-select class="addinputInfo" v-model="formobj.fileType" placeholder="请选择" clearable filterable @change="fileTypeChange">
<el-option v-for="item in fileType_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="span-sty"><span>上传份数</span></div>
<el-form-item><el-input v-model="formobj.count" class="addinputInfo addinputw" clearable placeholder=""/></el-form-item>
</el-col>
<el-col :span="12">
<div class="span-sty"><span>是否必传</span></div>
<el-form-item>
<el-radio-group class="addinputInfo" style="font-size: 1px" v-model="formobj.isUpload">
<el-radio label="1"></el-radio>
<el-radio label="0"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="span-sty"><span>示例</span></div>
<el-form-item>
<upload-img ref="uploadImg" class="addinputInfo" v-model="image_list1" :limit="50" bucket="map" :upload-data="{ type: '0001' }"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="span-sty"><span>备注</span></div>
<el-form-item><el-input v-model="formobj.remarks" class="addinputInfo addinputw" clearable placeholder=""/></el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
</template>
<script>
import req from '@/api/accessorieslist/accessorieslist'
import { typeValues } from '@/api/jichuxinxi/dictcommons'
import uploadImg from '@/components/uploadFile/uploadImg'
export default {
name: 'CapitalAdd',
components: {
uploadImg
},
data() {
return {
viewTitle: '',
submitdisabled: false,
busType_list: [],
fileType_list: [],
image_list1: [],
formobj: {
sid: '',
userSid: '',
busTypeKey: '',
busTypeValue: '',
fileName: '',
fileNo: '',
fileType: '',
fileTypeKey: '',
count: '',
isUpload: '',
useOrgSid: '',
remarks: '',
files: []
},
rules: {}
}
},
methods: {
init() {
typeValues({ type: 'businessType' }).then((resp) => {
if (resp.success) {
this.busType_list = resp.data
}
})
typeValues({ type: 'fileType' }).then((resp) => {
if (resp.success) {
this.fileType_list = resp.data
}
})
},
showAdd(useOrgSid) {
this.viewTitle = '【新增】附件'
this.init()
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
this.formobj.userSid = window.sessionStorage.getItem('userSid')
this.formobj.count = '1'
this.formobj.isUpload = '1'
this.formobj.useOrgSid = useOrgSid
},
showEdit(sid) {
this.viewTitle = '【编辑】附件'
this.$nextTick(() => {
this.$refs['form_obj'].clearValidate()
})
req.fetchBySid(sid).then((res) => {
if (res.success) {
this.formobj = res.data
this.formobj.isUpload = res.data.isUpload.toString()
if (this.formobj.files.length > 0) {
this.formobj.files.forEach((e) => {
this.image_list1.push({
name: '',
url: e
})
})
}
}
})
},
busTypeChange(value) {
const choose = this.busType_list.filter((item) => item.dictValue === value)
if (choose.length > 0 && choose !== null) {
this.formobj.busTypeKey = choose[0].dictKey
req.createFileNo({ busTypeKey: this.formobj.busTypeKey }).then((res) => {
if (res.success) {
this.formobj.fileNo = res.data
}
})
} else {
this.formobj.busTypeKey = ''
this.formobj.fileNo = ''
}
},
fileTypeChange(value) {
const choose = this.fileType_list.filter((item) => item.dictValue === value)
if (choose.length > 0 && choose !== null) {
this.formobj.fileTypeKey = choose[0].dictKey
} else {
this.formobj.fileTypeKey = ''
}
},
saveOrUpdate() {
this.$refs['form_obj'].validate((valid) => {
if (valid) {
if (this.image_list1.length > 0) {
this.image_list1.forEach((e) => {
this.formobj.files.push(e.url)
})
}
this.submitdisabled = true
req.saveOrUpdate(this.formobj).then((res) => {
if (res.success) {
this.$message({ showClose: true, type: 'success', message: '保存成功' })
this.handleReturn('true')
} else {
this.submitdisabled = false
}
}).catch(() => {
this.submitdisabled = false
})
}
})
},
handleReturn(isreload) {
if (isreload === 'true') this.$emit('reloadlist')
this.formobj = {
sid: '',
userSid: '',
busTypeKey: '',
busTypeValue: '',
fileName: '',
fileNo: '',
fileType: '',
fileTypeKey: '',
count: '',
isUpload: '',
useOrgSid: '',
remarks: '',
files: []
}
this.image_list1 = []
this.submitdisabled = false
this.$emit('doback')
}
}
}
</script>
<style scoped>
.span-sty {
width: 130px !important;
}
.addinputInfo {
margin-left: 120px !important;
}
</style>
Loading…
Cancel
Save