Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
122f85c6 by renchao@pashanhoo.com
Options

style:编辑企业

1 parent 80fa1fe7
Inline Side-by-side
Showing 5 changed files with 518 additions and 55 deletions
/*
* @Description: 企业银行接口
* @Autor: renchao
* @LastEditTime: 2023-09-07 14:42:19
* @LastEditTime: 2023-09-07 16:53:25
*/
import request from '@/utils/request'
let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl'))
......@@ -20,4 +20,44 @@ export function getCompanyMaterialList (bsmCompany) {
bsmCompany: bsmCompany
}
})
}
\ No newline at end of file
}
/**
* @description: 添加材料目录
* @param {*} bsmCompany
* @author: renchao
*/
export function addCompanyMaterial (data) {
return request({
url: SERVER.SERVERAPI + '/rest/sys/company/addCompanyMaterial',
method: 'post',
data
})
}
/**
* @description: 获取文件材料列表
* @param {*} bsmCompany
* @author: renchao
*/
export function getFileListByBsmMaterial (bsmMaterial) {
return request({
url: SERVER.SERVERAPI + '/rest/sys/company/getFileListByBsmMaterial',
method: 'get',
params: {
bsmMaterial: bsmMaterial
}
})
}
/**
* @description: 批量上传材料目录
* @param {*} bsmCompany
* @author: renchao
*/
export function uploadBatch (data) {
return request({
url: SERVER.SERVERAPI + '/rest/sys/company/uploadBatch',
method: 'post',
data
})
}
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-03 14:50:08
* @LastEditTime: 2023-09-07 16:28:14
-->
<template>
<transition name="msgbox-fade">
......@@ -167,6 +167,7 @@
min-height: 30%;
max-height: 90vh;
overflow-y: scroll;
box-sizing: border-box;
}
.ls-mask-footer {
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-08-15 09:43:46
* @LastEditTime: 2023-09-07 16:13:07
-->
<template>
<div class="clmlmx-box">
......@@ -209,13 +209,6 @@
this.unitData = this.$parent.unitData;
var formdata = new FormData();
formdata.append("bsmSlsq", Vue.prototype.$currentRoute.query.bsmSlsq);
if (Vue.prototype.$currentRoute.query.sqywbm == "DJBBL") {
formdata.append("bsmSldy", this.formData.bsmRepair);
formdata.append("clfl", 3);
} else {
formdata.append("bsmSldy", this.formData.unitData[0]?.bsmSldy);
formdata.append("clfl", 2);
}
InitClml(formdata).then((res) => {
if (res.code == 200) {
resolve(res.code)
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-07 16:54:37
-->
<template>
<div class="rlPopup">
<div class="prev handle-btn" v-if="!isScan" @click="prev()">
<i class="el-icon-arrow-left"></i>
</div>
<div class="next handle-btn" v-if="!isScan" @click="next()">
<i class="el-icon-arrow-right"></i>
</div>
<div class="img-list-wrap">
<img src="http://127.0.0.1:38088/video=stream&camidx=0" v-if="isScan" alt="高拍仪">
<div v-for="(img, i) in previewImg.imgList" :key="i" v-else>
<photo-zoom :url="img.fjurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
overlayStyle="width: 100%;height:100%">
</photo-zoom>
</div>
</div>
<!--缩略图-->
<div class="thumb-wrap">
<div class="thumb-wrap-button">
<el-button type="primary" @click="clickImage" v-if="previewImg.imgList.length>0">（放大） 显示（缩小）</el-button>
<el-upload class="fileUpdate" ref="upload" :key="key" action="" :show-file-list="false" :multiple="true" :auto-upload="false"
:on-change="handleChange"
accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg">
<el-button icon="el-icon-upload" type="primary" v-if="ableOperation">上传</el-button>
</el-upload>
<!-- 左移右移 -->
<el-button type="primary" @click="handleMove('left')" v-if="ableOperation">左移</el-button>
<el-button type="primary" @click="handleMove('right')" v-if="ableOperation">右移</el-button>
<el-button type="primary" icon="el-icon-delete-solid" @click="handleDelete"
v-if="thumbnailImages.length>0 && ableOperation">删除</el-button>
<div v-if="ableOperation" class="pl-5">
<el-button type="primary" @click="handleOpenScan" v-if="ableOperation">{{scanTitle}}</el-button>
<el-button type="primary" @click="handleViewScan" v-if="isScan && ableOperation">拍照</el-button>
</div>
</div>
<ul>
<li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active: previewImg.index === index }"
@click="showCurrent(index)">
<img :src="img.fjurl">
</li>
</ul>
</div>
<!-- 点开后的视图 -->
<publicPicture v-if="showViewer" :url-list="allLi" :initialIndex="initialIndex" @close-viewer="closeViewer">
</publicPicture>
</div>
</template>
<script>
import PhotoZoom from '@/components/PhotoZoom'
import { getAltimeterInfo, getUuid } from '@/utils/operation.js'
import { uploadBatch, deleteClmx } from "@/api/company.js"
import publicPicture from '@/components/publicPicture/index.vue'
export default {
name: 'PreviewImage',
props: {
previewImg: {
type: Object,
default: () => { }
},
ableOperation: {
type: Boolean,
default: true
}
},
components: {
PhotoZoom,
publicPicture
},
data () {
return {
key: 0,
isScan: false,
// 打开高拍仪
scanTitle: '打开高拍仪',
transform: {
scale: 1,
degree: 0
},
maxFileLength: 0,
// 缩略图
thumbnailImages: [],
showViewer: false,
initialIndex: undefined,
allLi: [],
}
},
watch: {
previewImg: {
handler (newValue, oldValue) {
if (newValue.imgList && newValue.imgList.length > 0) {
this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fjurl)
this.thumbnailImages = newValue.imgList
} else {
this.allLi = []
this.thumbnailImages = []
}
},
deep: true,
immediate: true
}
},
created () {
this.maxLength = 0;
this.allLi = _.cloneDeep(this.previewImg.imgList).map(item => item.fjurl)
this.thumbnailImages = this.previewImg.imgList
},
computed: {
isFirst () {
return this.previewImg.index === 0
},
isLast () {
return this.previewImg.index === this.previewImg.imgList.length - 1
}
},
methods: {
/**
* @description: 打开高拍仪
* @author: renchao
*/
handleOpenScan () {
this.isScan = !this.isScan
if (this.isScan) {
this.$message({
message: '正在启动程序请稍等',
type: 'success'
})
setTimeout(() => {
this.scanTitle = '关闭高拍仪'
}, 4000)
} else {
this.scanTitle = '打开高拍仪'
}
},
// 左右移动
handleMove (direction) {
},
/**
* @description: 拍照
* @author: renchao
*/
handleViewScan () {
function dataURLtoBlob (base64String) {
const arr = base64String.split(',');
if (arr.length !== 2) {
throw new Error('Invalid Base64 format');
}
const mime = arr[0].match(/:(.*?);/)[1];
if (!mime) {
throw new Error('Cannot retrieve MIME type');
}
const bstr = atob(arr[1]);
const n = bstr.length;
const u8arr = new Uint8Array(n);
for (let i = 0; i < n; i++) {
u8arr[i] = bstr.charCodeAt(i);
}
return new Blob([u8arr], { type: mime });
}
function blobToFile (blob) {
let name = getUuid(8) + '.jpg'
const file = new File([blob], name);
return file;
}
getAltimeterInfo().then(res => {
let blob = dataURLtoBlob('data:image/png;base64,' + res.data.photoBase64);
let file = blobToFile(blob);
var formData = new FormData();
formData.append('file', file)
formData.append("bsmMaterial ", this.previewImg.bsmMaterial);
formData.append("bsmSlsq", this.previewImg.bsmSlsq);
uploadSjClmx(formData).then((res) => {
if (res.code == 200) {
this.$emit('updateList', res.result)
this.$message({
message: '上传成功!',
type: 'success'
})
}
})
})
},
/**
* @description: prev
* @author: renchao
*/
prev () {
let len = this.previewImg.imgList.length
if (this.isFirst || len == 0) {
this.$emit('prevPriview')
} else {
this.$parent.previewImg.index = (this.$parent.previewImg.index - 1 + len) % len
}
},
/**
* @description: next
* @author: renchao
*/
next () {
let len = this.previewImg.imgList.length
if (this.isLast || len == 0) {
this.$emit('nextPriview')
} else {
this.$parent.previewImg.index = (this.$parent.previewImg.index + 1) % len
}
},
/**
* @description: showCurrent
* @param {*} index
* @author: renchao
*/
showCurrent (index) {
this.previewImg.index = index
},
/**
* @description: closeViewer
* @author: renchao
*/
closeViewer () {
this.showViewer = false
},
/**
* @description: clickImage
* @author: renchao
*/
clickImage () {
this.showViewer = true
},
/**
* @description: handleChange
* @param {*} file
* @param {*} files
* @author: renchao
*/
async handleChange (file, fileList) {
let length = fileList.length;
this.maxFileLength = Math.max(length, this.maxFileLength)
var formData = new FormData();
setTimeout(() => {
if (this.maxFileLength !== length) {
return
}
let num = 0, max = 0;
const isLt5M = file.size / 1024 / 1024 < 5;
fileList.forEach(item => {
if (!isLt5M) {
max++
}
if (!['image/jpeg', 'image/png', 'image/jpg', 'image/gif'].includes(item.raw.type)) {
num++
} else {
formData.append('file', item.raw)
}
})
if (num >= 1) {
this.$message.error("请选择jpeg/png/jpg/bmp/gif格式的图片后重试")
// 移除不支持的文件类型
this.key++
return;
}
if (max >= 1) {
this.$message.error('上传图片大小不能超过 5MB!');
this.key++
return;
}
formData.append("bsmMaterial ", this.previewImg.bsmMaterial);
uploadBatch(formData).then((res) => {
if (res.code == 200) {
this.$emit('updateList', res.result)
this.$message({
message: '上传成功!',
type: 'success'
})
this.$refs.upload.clearFiles();
this.maxFileLength = 0
}
})
}, 0)
},
/**
* @description: handleDelete
* @author: renchao
*/
handleDelete () {
let that = this
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
let bsmClmx = this.previewImg.imgList[this.previewImg.index].bsmClmx
let bsmMaterial = this.previewImg.imgList[this.previewImg.index].bsmMaterial
this.previewImg.imgList = this.previewImg.imgList.filter(item => item.bsmClmx != bsmClmx)
deleteClmx(bsmClmx).then(res => {
if (res.code == 200) {
that.$emit('updateList', { children: this.previewImg.imgList, bsmMaterial: bsmMaterial })
that.$message({
message: '删除成功!',
type: 'success'
})
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
<style lang="scss" scoped>
// 查看大图
.rlPopup {
position: relative;
width: 100%;
text-align: center;
height: 100%;
.handle-btn {
position: absolute;
top: 50%;
transform: translateY(-100%);
width: 66px;
height: 66px;
line-height: 75px;
color: #fff;
background-color: rgb(239, 239, 239);
border-radius: 50%;
cursor: pointer;
text-align: center;
transition: all 0.3s;
i {
font-size: 24px;
}
}
.handle-btn:hover {
background-color: rgb(185, 183, 183);
}
.prev {
left: 1%;
}
.next {
right: 1%;
}
.img-list-wrap {
width: 100%;
display: flex;
justify-content: center;
height: calc(100% - 80px);
align-items: center;
background: rgba(194, 190, 190, 0.1);
overflow: scroll;
img {
display: block;
object-fit: scale-down;
transition: all 0.3s;
max-width: 100%;
}
}
.thumb-wrap {
&-button {
display: flex;
justify-content: center;
.fileUpdate {
margin: 0 10px;
}
}
li {
float: left;
width: 60px;
height: 45px;
border: solid 1px #ececec;
position: relative;
margin-right: 5px;
cursor: pointer;
&:last-child {
margin-right: 0;
}
img {
max-width: 57px;
max-height: 42px;
display: block;
object-fit: scale-down;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.active {
border-color: #409eff;
}
}
}
</style>
<style>
.zoom-on-hover {
position: relative;
overflow: hidden;
}
.zoom-on-hover .normal {
width: 100%;
}
.zoom-on-hover .zoom {
position: absolute;
opacity: 0;
transform-origin: top left;
}
.zoom-on-hover.zoomed .zoom {
opacity: 1;
}
.zoom-on-hover.zoomed .normal {
opacity: 0;
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-07 15:06:42
* @LastEditTime: 2023-09-07 16:54:32
-->
<template>
<div class="clxx">
......@@ -29,12 +29,11 @@
</div>
<div
v-for="(item, index) in tableData"
:key="item.bsmSj"
:class="['child', treeCheckId == item.bsmSj ? 'checked' : '']"
:key="item.bsmMaterial"
:class="['child', treeCheckId == item.bsmMaterial ? 'checked' : '']"
@click="treeClick(item, index)">
<span v-if="item.isrequired == 1" class="required">必选</span>
{{ item.sjmc }}
<span class="cl_number" :key="key">({{ item.children ? item.children.length : 0 }})</span>
{{ item.clmc }}
<span class="cl_number" :key="key">({{ item.sxh }})</span>
</div>
</div>
</div>
......@@ -60,8 +59,8 @@
import store from '@/store/index.js'
import clxxAddDialog from "./dialog/clxxAddDialog.vue";
import clxxDetailDialog from "./dialog/clxxDetailDialog.vue";
import imagePreview from "@/views/components/imagePreview.vue";
import { getCompanyMaterialList } from "@/api/company.js";
import imagePreview from "./dialog/imagePreview.vue";
import { getCompanyMaterialList, addCompanyMaterial, getFileListByBsmMaterial } from "@/api/company.js";
export default {
components: { clxxAddDialog, imagePreview, clxxDetailDialog },
props: {
......@@ -82,9 +81,7 @@
key: 0,
tableData: [],
previewImg: {
// 收件标识码
bsmSj: "",
bsmSlsq: this.$parent.bsmSlsq,
bsmMaterial: "",
index: 0,
selectedIndex: 0,
imgList: [],
......@@ -102,10 +99,10 @@
nextPriview () {
if (this.treeCheckIndex < this.tableData.length) {
this.treeCheckIndex++;
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj;
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
this.previewImg.index = 0;
this.previewImg.imgList = this.tableData[this.treeCheckIndex].children;
this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj;
this.previewImg.bsmMaterial = this.tableData[this.treeCheckIndex].bsmMaterial;
}
},
/**
......@@ -115,10 +112,10 @@
prevPriview () {
if (this.treeCheckIndex >= 1) {
this.treeCheckIndex--;
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj;
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
this.previewImg.index = this.previewImg.imgList.length;
this.previewImg.imgList = this.tableData[this.treeCheckIndex].children;
this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj;
this.previewImg.bsmMaterial = this.tableData[this.treeCheckIndex].bsmMaterial;
}
},
/**
......@@ -156,12 +153,12 @@
* @author: renchao
*/
setChecked (item) {
this.treeCheckId = item.bsmSj;
this.treeCheckId = item.bsmMaterial;
this.title = item.sjmc;
this.titleYs = 1;
this.titleNum = item.children.length;
this.previewImg.imgList = item.children;
this.previewImg.bsmSj = item.bsmSj;
// this.previewImg.imgList = item.children;
this.previewImg.bsmMaterial = item.bsmMaterial;
},
/**
* @description: updateList
......@@ -173,7 +170,7 @@
if (val.children.length != 0) {
//删除最后一张图片时 val=null
this.tableData.forEach((item) => {
if (item.bsmSj === val.bsmSj) {
if (item.bsmMaterial === val.bsmMaterial) {
item.children = val.children;
}
});
......@@ -185,11 +182,11 @@
} else {
this.previewImg.imgList = [];
this.tableData.forEach((item, index) => {
if (this.treeCheckId == item.bsmSj) {
if (this.treeCheckId == item.bsmMaterial) {
item.children = [];
that.treeCheckIndex = index;
}
});
})
}
},
/**
......@@ -206,28 +203,20 @@
*/
addSave (data) {
let obj = {
bsmSlsq: this.$parent.bsmSlsq,
isrequired: "1",
sjmc: data.clmc,
sjsl: 0,
smzt: "",
ys: 0,
sjlx: data.cllx,
sfxjcl: "1", // 是否必选
bsmCompany: this.formData.bsmCompany,
clmc: data.clmc,
cllx: data.cllx
};
if (this.$route.query.sqywbm == "DJBBL") {
obj.bsmSldy = this.$parent.bsmRepair
}
saveClml(obj).then(async (res) => {
addCompanyMaterial(obj).then(async (res) => {
if (res.code == 200) {
let res = await this.clmlInitList(2);
if (res == 200)
this.$message({
message: "新增成功",
type: "success",
});
type: "success"
})
}
});
})
},
/**
* @description: 材料目录点击选中
......@@ -237,10 +226,12 @@
*/
treeClick (item, index) {
this.previewImg.index = 0;
this.treeCheckId = item?.bsmSj;
this.treeCheckId = item?.bsmMaterial;
this.treeCheckIndex = index;
this.previewImg.imgList = item.children ? item.children : [];
this.previewImg.bsmSj = item?.bsmSj;
getFileListByBsmMaterial(item.bsmMaterial).then(res => {
this.previewImg.imgList = res.result ? res.result : []
})
this.previewImg.bsmMaterial = item?.bsmMaterial;
},
/**
* @description: 小图片点击
......@@ -269,14 +260,13 @@
setTableData (tableData) {
this.$nextTick((res) => {
this.tableData = tableData;
});
},
},
};
})
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.active {
background: $light-blue !important;
color: #fff;
......@@ -294,6 +284,7 @@
.clxx {
width: 100%;
height: 94%;
display: flex;
padding-left: 5px;
.left {
......