Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
1ab48d09 by renchao@pashanhoo.com
Options

style:登记薄模块功跳转材料信息模

1 parent f2140c02
Inline Side-by-side
Showing 13 changed files with 351 additions and 653 deletions
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-14 17:11:15
* @LastEditTime: 2023-09-19 09:30:13
-->
<template>
<transition name="msgbox-fade">
......@@ -160,7 +160,7 @@
.mask-content {
padding: 5px 20px 30px 20px;
width: 100%;
min-height: 253px;
min-height: 360px;
max-height: 90vh;
overflow-y: scroll;
}
......
<!-- 这是补录的业务流程模块 -->
\ No newline at end of file
这是登记薄材料明细
补录数据和临时数据
\ No newline at end of file
<!-- 这是补录信息的材料文件 -->
\ No newline at end of file
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-18 16:49:25
* @LastEditTime: 2023-09-18 17:04:46
-->
<template>
<dialogBox title="新建材料信息" width="20%" isMain v-model="myValue" @closeDialog="closeDialog" @submitForm="handleSubmit"
......@@ -47,7 +47,8 @@
ruleForm: {
cllx: "",
clmc: "",
clbm: ""
clbm: "",
sfggcl: "0"
},
rules: {
cllx: [
......@@ -77,7 +78,8 @@
this.ruleForm = {
cllx: "",
clmc: "",
clbm: ""
clbm: "",
sfggcl: "0"
}
},
/**
......@@ -91,7 +93,8 @@
this.ruleForm = {
cllx: "",
clmc: "",
clbm: ""
clbm: "",
sfggcl: "0"
}
this.$emit("input", false);
} else {
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-14 11:14:54
* @LastEditTime: 2023-09-19 08:53:58
-->
<template>
<div class="clmlmx-box">
<lb-table :column="column" :key="key" row-key="bsmMaterial" ref="listTable" :heightNumSetting="true" :calcHeight="500" :pagination="false"
:data="tableData">
<lb-table :column="column" :key="key" row-key="bsmSj" ref="listTable" :heightNumSetting="true" :calcHeight="600"
:pagination="false" :data="tableData">
</lb-table>
<div class="text-center">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleSubmit" :loading="loading">保存</el-button>
<el-button @click="$popupCacel">取消</el-button>
<el-button type="primary" @click="handleSubmit" v-if="formData.ableOperation && tableData.length>0" :loading="loading">保存</el-button>
</div>
</div>
</template>
<script>
import store from '@/store/index.js'
import Vue from 'vue'
import Sortable from 'sortablejs'
import store from '@/store/index.js'
import { ywPopupCacel } from "@/utils/popup.js";
import { editCompanyMaterialList } from "@/api/company.js";
import { InitClml, updateClml } from "@/api/clxx.js";
export default {
props: {
formData: {
......@@ -34,11 +35,41 @@
sortable: null,
column: [
{
prop: "isrequired",
label: "是否必选",
width: "80",
render: (h, scope) => {
if (scope.row.isrequired === "1") {
return (
<div>
<span>必选</span>
</div>
);
}
else {
return (
<div>
<span>可选</span>
</div>
)
}
}
},
{
label: "材料名称",
render: (h, scope) => {
return (
(scope.row.sfxjcl == '1') ?
<el-input value={scope.row.clmc} onInput={(val) => { scope.row.clmc = val }}></el-input> : <span>{scope.row.clmc}</span>
(this.formData.ableOperation && scope.row.sfxjcl == '1') ?
<el-input value={scope.row.sjmc} onInput={(val) => { scope.row.sjmc = val }}></el-input> : <span>{scope.row.sjmc}</span>
)
}
},
{
label: "材料编码",
render: (h, scope) => {
return (
(this.formData.ableOperation && scope.row.sfxjcl == '1') ?
<el-input value={scope.row.sjbm} onInput={(val) => { scope.row.sjbm = val }}></el-input> : <span>{scope.row.sjbm}</span>
)
}
},
......@@ -47,27 +78,50 @@
width: "110",
render: (h, scope) => {
return (
<el-select value={scope.row.cllx}
onChange={(val) => { scope.row.cllx = val }}>
{
store.getters.dictData['A40'].map(option => {
return (
<el-option label={option.dname} value={option.dcode}></el-option>
)
})
}
</el-select>
this.formData.ableOperation ?
<el-select value={scope.row.sjlx}
onChange={(val) => { scope.row.sjlx = val }}>
{
store.getters.dictData['A40'].map(option => {
return (
<el-option label={option.dname} value={option.dcode}></el-option>
)
})
}
</el-select> : <span>{this.dicStatus(scope.row.sjlx, "A40")}</span>
)
}
},
{
label: "页数",
prop: "sjsl",
label: "收件数量",
width: "80",
render: (h, scope) => {
if (scope.row.count && scope.row.count > 0) {
return (
(this.formData.ableOperation) ?
<el-input value={scope.row.sjsl} onInput={(val) => { scope.row.sjsl = val }}></el-input> : <span>{
scope.row.sjsl
}</span>
)
}
},
{
label: "扫描时间",
width: "140",
render: (h, scope) => {
return (
<span>{scope.row.sjsj}</span>
)
}
},
{
label: "页数",
width: "60",
render: (h, scope) => {
if (scope.row.ys && scope.row.ys > 0) {
return (
<div>
<span>{scope.row.count}</span>
<span>{scope.row.ys}</span>
</div>
);
} else {
......@@ -80,6 +134,21 @@
},
},
{
label: "是否新建材料",
width: "80",
render: (h, scope) => {
if (scope.row.sfxjcl && scope.row.sfxjcl == '1') {
return (
<span>是</span>
);
} else {
return (
<span>否</span>
);
}
},
},
{
label: "操作",
width: "100",
render: (h, scope) => {
......@@ -87,7 +156,7 @@
<el-button
type="text"
icon="el-icon-delete"
disabled={scope.row.count != 0}
disabled={!(scope.row.ys == 0 && scope.row.sfxjcl == '1') || !this.formData.ableOperation}
onClick={() => {
this.handleDelete(scope.$index, scope.row);
}}
......@@ -102,15 +171,6 @@
tableData: []
}
},
mounted () {
this.initSort()
this.tableData = _.cloneDeep(this.formData.data)
},
beforeDestroy () {
if (this.sortable) {
this.sortable.destroy();
}
},
watch: {
'formData.data': {
handler: function (val, oldVal) {
......@@ -120,32 +180,61 @@
deep: true
}
},
mounted () {
this.initSort()
},
beforeDestroy () {
if (this.sortable) {
this.sortable.destroy();
}
},
methods: {
handleCancel () {
ywPopupCacel()
},
handleSubmit () {
this.loading = true
store.dispatch('user/reWorkFresh', false)
editCompanyMaterialList(this.tableData, this.formData.bsmCompany).then(res => {
updateClml(this.tableData, this.formData.bsmSldy, Vue.prototype.$currentRoute.query.bsmSlsq).then(res => {
this.loading = false
if (res.code == 200) {
this.$message({
message: '保存成功',
type: 'success'
})
store.dispatch('user/reWorkFresh', true)
ywPopupCacel()
store.dispatch('user/reWorkFresh', true)
}
}).catch(() => {
this.loading = false
})
},
/**
* @description: 材料目录明细初始化
* @author: renchao
*/
clmlInitList () {
return new Promise(resolve => {
this.unitData = this.$parent.unitData;
var formdata = new FormData();
formdata.append("bsmSlsq", Vue.prototype.$currentRoute.query.bsmSlsq);
formdata.append("bsmSldy", this.formData.bsmRepair);
formdata.append("clfl", 3);
InitClml(formdata).then((res) => {
if (res.code == 200) {
resolve(res.code)
if (res.result && res.result.length > 0) {
this.tableData = res.result;
} else {
this.tableData = []
}
} else {
this.$message.error(res.message)
}
})
})
},
/**
* @description: 材料目录删除
* @param {*} index
* @param {*} row
* @author: renchao
*/
handleDelete (index, row) {
this.$confirm('此操作将永久删除该 是否继续?', '提示', {
......@@ -173,7 +262,19 @@
this.tableData.splice(evt.newIndex, 0, targetRow);
}
})
}
},
dicStatus (val, code) {
let data = store.getters.dictData[code],
name = '暂无'
if (data) {
data.map((item) => {
if (item.dcode == val) {
name = item.dname
}
})
return name
}
},
}
}
</script>
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-14 16:24:07
* @LastEditTime: 2023-09-18 17:11:37
-->
<template>
<div class="rlPopup">
......@@ -14,7 +14,7 @@
<div class="img-list-wrap" v-Loading="loading">
<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.fileurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
<photo-zoom :url="img.fjurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
overlayStyle="width: 100%;height:100%">
</photo-zoom>
</div>
......@@ -41,7 +41,7 @@
<ul>
<li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active: previewImg.index === index }"
@click="showCurrent(index)">
<img :src="img.fileurl">
<img :src="img.fjurl">
</li>
</ul>
</div>
......@@ -53,7 +53,7 @@
<script>
import PhotoZoom from '@/components/PhotoZoom'
import { getAltimeterInfo, getUuid } from '@/utils/operation.js'
import { uploadBatch, deleteFile, move } from "@/api/company.js"
import { uploadBatch, deleteClmx, move } from "@/api/clxx.js";
import publicPicture from '@/components/publicPicture/index.vue'
export default {
name: 'PreviewImage',
......@@ -86,7 +86,7 @@
// 缩略图
thumbnailImages: [],
showViewer: false,
initialIndex: 0,
initialIndex: undefined,
allLi: [],
}
},
......@@ -94,7 +94,7 @@
previewImg: {
handler (newValue, oldValue) {
if (newValue.imgList && newValue.imgList.length > 0) {
this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fileurl)
this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fjurl)
this.thumbnailImages = newValue.imgList
} else {
this.allLi = []
......@@ -134,18 +134,14 @@
setTimeout(() => {
this.scanTitle = '关闭高拍仪'
this.loading = false
}, 3000)
}, 4000)
} else {
this.scanTitle = '打开高拍仪'
}
},
/**
* @description: 左右移动
* @param {*} direction
* @author: renchao
*/
// 左右移动
handleMove (direction) {
move(this.previewImg.imgList[this.previewImg.index].bsmFile, direction).then(res => {
move(direction, this.previewImg.imgList[this.previewImg.index].bsmClmx).then(res => {
if (res.code == 200) {
if (direction == 'left') {
this.previewImg.index = this.previewImg.index - 1
......@@ -153,7 +149,7 @@
this.previewImg.index = this.previewImg.index + 1
}
this.initialIndex = this.previewImg.index
this.$emit('updateList', { children: res.result, bsmMaterial: this.previewImg.bsmMaterial })
this.$emit('updateList', { children: res.result, bsmSj: this.previewImg.bsmSj })
this.$message({
message: '移动成功!',
type: 'success'
......@@ -195,7 +191,7 @@
let file = blobToFile(blob);
var formData = new FormData();
formData.append('file', file)
formData.append("bsmMaterial ", this.previewImg.bsmMaterial);
formData.append("bsmSj", this.previewImg.bsmSj);
formData.append("bsmSlsq", this.previewImg.bsmSlsq);
uploadSjClmx(formData).then((res) => {
if (res.code == 200) {
......@@ -292,13 +288,14 @@
this.key++
return;
}
formData.append("bsmMaterial", this.previewImg.bsmMaterial);
formData.append("bsmSj", this.previewImg.bsmSj);
formData.append("bsmSlsq", this.previewImg.bsmSlsq);
if (this.previewImg.imgList.length > 0) {
formData.append("index", this.previewImg.imgList[this.previewImg.index].sxh);
}
uploadBatch(formData).then((res) => {
if (res.code == 200) {
this.$emit('updateList', { children: res.result, bsmMaterial: this.previewImg.bsmMaterial })
this.$emit('updateList', { children: res.result, bsmSj: this.previewImg.bsmSj })
this.$message({
message: '上传成功!',
type: 'success'
......@@ -320,12 +317,12 @@
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
let bsmFile = this.previewImg.imgList[this.previewImg.index].bsmFile
let bsmMaterial = this.previewImg.imgList[this.previewImg.index].bsmMaterial
this.previewImg.imgList = this.previewImg.imgList.filter(item => item.bsmFile != bsmFile)
deleteFile(bsmFile).then(res => {
let bsmClmx = this.previewImg.imgList[this.previewImg.index].bsmClmx
let bsmSj = this.previewImg.imgList[this.previewImg.index].bsmSj
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.$emit('updateList', { children: this.previewImg.imgList, bsmSj: bsmSj })
that.$message({
message: '删除成功!',
type: 'success'
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-18 16:57:31
* @LastEditTime: 2023-09-19 09:28:13
-->
<template>
<div class="clxx">
......@@ -29,12 +29,12 @@
</div>
<div
v-for="(item, index) in tableData"
:key="item.bsmMaterial"
:class="['child', treeCheckId == item.bsmMaterial ? 'checked' : '']"
:key="item.bsmSj"
:class="['child', treeCheckId == item.bsmSj ? 'checked' : '']"
@click="treeClick(item, index)">
{{ item.clmc }}
<span class="cl_number" :key="key" v-if="item.count">({{ item.count }})</span>
<span class="cl_number" :key="key" v-else>(0)</span>
<span v-if="item.isrequired == 1" class="required">必选</span>
{{ item.sjmc }}
<span class="cl_number" :key="key">({{ item.ys ? item.ys : 0 }})</span>
</div>
</div>
</div>
......@@ -62,7 +62,7 @@
import imagePreview from "./dialog/imagePreview.vue";
import clxxAddDialog from "./dialog/clxxAddDialog.vue";
import clxxDetailDialog from "./dialog/clxxDetailDialog.vue";
import { repairInitClml, saveClml } from "@/api/clxx.js";
import { repairInitClml, saveClml, getClmxList } from "@/api/clxx.js";
export default {
components: { clxxAddDialog, imagePreview, clxxDetailDialog },
props: {
......@@ -83,7 +83,7 @@
key: 0,
tableData: [],
previewImg: {
bsmMaterial: "",
bsmSj: "",
index: 0,
selectedIndex: 0,
imgList: []
......@@ -116,19 +116,19 @@
if (this.treeCheckIndex < this.tableData.length) {
this.treeCheckIndex++;
if (this.tableData[this.treeCheckIndex]) {
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj;
// 判断页数
let ys = this.tableData[this.treeCheckIndex].ys
this.previewImg.index = 0;
// 获取材料明细
if (ys > 0) {
getFileListByBsmMaterial(this.treeCheckId).then(res => {
getClmxList(this.treeCheckId).then(res => {
this.previewImg.imgList = res.result ? res.result : []
})
} else {
this.previewImg.imgList = []
}
this.previewImg.bsmMaterial = this.tableData[this.treeCheckIndex].bsmMaterial;
this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj;
} else {
this.$message.error('没有最后一张了');
}
......@@ -141,11 +141,11 @@
prevPriview () {
if (this.treeCheckIndex >= 1) {
this.treeCheckIndex--;
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj;
// 判断页数
let ys = this.tableData[this.treeCheckIndex].ys
if (ys > 0) {
getFileListByBsmMaterial(this.treeCheckId).then(res => {
getClmxList(this.treeCheckId).then(res => {
this.previewImg.imgList = res.result ? res.result : []
this.previewImg.index = this.previewImg.imgList.length - 1;
})
......@@ -153,7 +153,7 @@
this.previewImg.imgList = [];
this.previewImg.index = 0
}
this.previewImg.bsmMaterial = this.tableData[this.treeCheckIndex].bsmMaterial;
this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj;
} else {
this.$message.error('没有第一张了');
}
......@@ -193,12 +193,12 @@
* @author: renchao
*/
setChecked (item) {
this.treeCheckId = item.bsmMaterial;
this.treeCheckId = item.bsmSj;
this.title = item.sjmc;
this.titleYs = 1;
this.titleNum = item.children.length;
this.previewImg.imgList = item.children;
this.previewImg.bsmMaterial = item.bsmMaterial;
this.previewImg.bsmSj = item.bsmSj;
},
/**
* @description: updateList
......@@ -210,7 +210,7 @@
if (val.children.length != 0) {
//删除最后一张图片时 val=null
this.tableData.forEach((item) => {
if (item.bsmMaterial == val.bsmMaterial) {
if (item.bsmSj == val.bsmSj) {
item.count = val.children.length
}
});
......@@ -222,7 +222,7 @@
} else {
this.previewImg.imgList = [];
this.tableData.forEach((item, index) => {
if (this.treeCheckId == item.bsmMaterial) {
if (this.treeCheckId == item.bsmSj) {
item.count = 0;
that.treeCheckIndex = index;
}
......@@ -242,16 +242,35 @@
* @author: renchao
*/
addSave (data) {
saveClml({ ...data, bsmSldy: this.$parent.bsmRepair, bsmSlsq: this.$parent.bsmSlsq }).then(async (res) => {
let obj = {
bsmSlsq: this.$parent.bsmSlsq,
isrequired: "1",
sjmc: data.clmc,
sjsl: 0,
smzt: "",
ys: 0,
sjlx: data.cllx,
sjbm: data.clbm,
sfxjcl: "1", // 是否必选
sfggcl: data.sfggcl,
};
//是否公共材料
if (data.sfggcl == "0") {
obj["bsmSldy"] = this.$parent.currentSelectProps.bsmSldy;
}
if (this.$route.query.sqywbm == "DJBBL") {
obj.bsmSldy = this.$parent.bsmRepair
}
saveClml(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: 材料目录点击选中
......@@ -261,12 +280,12 @@
*/
treeClick (item, index) {
this.previewImg.index = 0;
this.treeCheckId = item?.bsmMaterial;
this.treeCheckId = item?.bsmSj;
this.treeCheckIndex = index;
getFileListByBsmMaterial(item.bsmMaterial).then(res => {
getClmxList(item.bsmSj).then(res => {
this.previewImg.imgList = res.result ? res.result : []
})
this.previewImg.bsmMaterial = item?.bsmMaterial;
this.previewImg.bsmSj = item?.bsmSj;
},
/**
* @description: 小图片点击
......@@ -281,7 +300,7 @@
//查看明细
viewDetail () {
store.dispatch("user/reWorkFresh", false);
ywPopupDialog("申请材料目录", "xxba/components/clxx/dialog/clxxDetailDialog", {
ywPopupDialog("申请材料目录", "djbworkflow/components/clxx/dialog/clxxDetailDialog", {
data: this.tableData,
}, "60%", true, false)
},
......@@ -393,6 +412,7 @@
line-height: 20px;
transition: all 0.3s;
padding: 8px 0;
overflow: hidden;
}
.child:hover {
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-15 15:38:53
-->
<template>
<div class="clmlmx-box">
<lb-table :column="column" :key="key" row-key="bsmMaterial" ref="listTable" :heightNumSetting="true" :calcHeight="500" :pagination="false"
:data="tableData">
</lb-table>
<div class="text-center">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleSubmit" :loading="loading">保存</el-button>
</div>
</div>
</template>
<script>
import store from '@/store/index.js'
import Sortable from 'sortablejs'
import { ywPopupCacel } from "@/utils/popup.js";
import { editCompanyMaterialList } from "@/api/company.js";
export default {
props: {
formData: {
type: Object,
default: () => {
return {}
}
}
},
data () {
return {
loading: false,
sortable: null,
column: [
{
label: "材料名称",
render: (h, scope) => {
return (
<el-input value={scope.row.clmc} onInput={(val) => { scope.row.clmc = val }}></el-input>
)
}
},
{
label: "材料编码",
render: (h, scope) => {
return (
<el-input value={scope.row.clbm} onInput={(val) => { scope.row.clbm = val }}></el-input>
)
}
},
{
label: "材料类型",
width: "110",
render: (h, scope) => {
return (
<el-select value={scope.row.cllx}
onChange={(val) => { scope.row.cllx = val }}>
{
store.getters.dictData['A40'].map(option => {
return (
<el-option label={option.dname} value={option.dcode}></el-option>
)
})
}
</el-select>
)
}
},
{
label: "页数",
width: "80",
render: (h, scope) => {
if (scope.row.count && scope.row.count > 0) {
return (
<div>
<span>{scope.row.count}</span>
</div>
);
} else {
return (
<div>
<span>0</span>
</div>
);
}
},
},
{
label: "操作",
width: "100",
render: (h, scope) => {
return (
<el-button
type="text"
icon="el-icon-delete"
disabled={scope.row.count != 0}
onClick={() => {
this.handleDelete(scope.$index, scope.row);
}}
>
删除
</el-button>
)
}
}
],
key: 0,
tableData: []
}
},
mounted () {
this.initSort()
this.tableData = _.cloneDeep(this.formData.data)
},
beforeDestroy () {
if (this.sortable) {
this.sortable.destroy();
}
},
watch: {
'formData.data': {
handler: function (val, oldVal) {
this.tableData = _.cloneDeep(val)
},
immediate: true,
deep: true
}
},
methods: {
handleCancel () {
ywPopupCacel()
},
handleSubmit () {
this.loading = true
store.dispatch('user/reWorkFresh', false)
editCompanyMaterialList(this.tableData, this.formData.bsmCompany).then(res => {
this.loading = false
if (res.code == 200) {
this.$message({
message: '保存成功',
type: 'success'
})
store.dispatch('user/reWorkFresh', true)
ywPopupCacel()
}
}).catch(() => {
this.loading = false
})
},
/**
* @description: 材料目录删除
* @param {*} index
* @param {*} row
* @author: renchao
*/
handleDelete (index, row) {
this.$confirm('此操作将永久删除该 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.tableData.splice(index, 1);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
initSort () {
const el = this.$refs.listTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost',
setData: function (dataTransfer) {
dataTransfer.setData('Text', '')
},
onEnd: evt => {
const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
this.tableData.splice(evt.newIndex, 0, targetRow);
}
})
}
}
}
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
.clmlmx-box {
margin: 0 auto;
.title {
text-align: center;
height: 60px;
line-height: 60px;
border: 1px solid #dfe6ec;
font-size: 20px;
background: #81d3f81a;
margin-bottom: -1px;
}
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-14 16:24:07
* @LastEditTime: 2023-09-19 09:55:41
-->
<template>
<div class="rlPopup">
......@@ -12,9 +12,9 @@
<i class="el-icon-arrow-right"></i>
</div>
<div class="img-list-wrap" v-Loading="loading">
<img src="http://127.0.0.1:38088/video=stream&camidx=0" v-if="isScan" alt="高拍仪">
<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.fileurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
<photo-zoom :url="img.fjurl" :bigWidth="165" v-if="i === previewImg.index" :scale="2"
overlayStyle="width: 100%;height:100%">
</photo-zoom>
</div>
......@@ -23,25 +23,24 @@
<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"
<!-- <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"
</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" :loading="loading">{{scanTitle}}</el-button>
<el-button type="primary" @click="handleViewScan" v-if="isScan && ableOperation">拍照</el-button>
</div>
</div> -->
</div>
<ul>
<li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active: previewImg.index === index }"
@click="showCurrent(index)">
<img :src="img.fileurl">
<img :src="img.fjurl">
</li>
</ul>
</div>
......@@ -52,8 +51,6 @@
</template>
<script>
import PhotoZoom from '@/components/PhotoZoom'
import { getAltimeterInfo, getUuid } from '@/utils/operation.js'
import { uploadBatch, deleteFile, move } from "@/api/company.js"
import publicPicture from '@/components/publicPicture/index.vue'
export default {
name: 'PreviewImage',
......@@ -94,7 +91,7 @@
previewImg: {
handler (newValue, oldValue) {
if (newValue.imgList && newValue.imgList.length > 0) {
this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fileurl)
this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fjurl)
this.thumbnailImages = newValue.imgList
} else {
this.allLi = []
......@@ -119,99 +116,6 @@
}
},
methods: {
/**
* @description: 打开高拍仪
* @author: renchao
*/
handleOpenScan () {
this.isScan = !this.isScan
if (this.isScan) {
this.loading = true
this.$message({
message: '正在启动程序请稍等',
type: 'success'
})
setTimeout(() => {
this.scanTitle = '关闭高拍仪'
this.loading = false
}, 3000)
} else {
this.scanTitle = '打开高拍仪'
}
},
/**
* @description: 左右移动
* @param {*} direction
* @author: renchao
*/
handleMove (direction) {
move(this.previewImg.imgList[this.previewImg.index].bsmFile, direction).then(res => {
if (res.code == 200) {
if (direction == 'left') {
this.previewImg.index = this.previewImg.index - 1
} else {
this.previewImg.index = this.previewImg.index + 1
}
this.initialIndex = this.previewImg.index
this.$emit('updateList', { children: res.result, bsmMaterial: this.previewImg.bsmMaterial })
this.$message({
message: '移动成功!',
type: 'success'
})
} else {
this.$message.error(res.message);
}
})
},
/**
* @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) {
......@@ -254,90 +158,6 @@
*/
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);
if (this.previewImg.imgList.length > 0) {
formData.append("index", this.previewImg.imgList[this.previewImg.index].sxh);
}
uploadBatch(formData).then((res) => {
if (res.code == 200) {
this.$emit('updateList', { children: res.result, bsmMaterial: this.previewImg.bsmMaterial })
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 bsmFile = this.previewImg.imgList[this.previewImg.index].bsmFile
let bsmMaterial = this.previewImg.imgList[this.previewImg.index].bsmMaterial
this.previewImg.imgList = this.previewImg.imgList.filter(item => item.bsmFile != bsmFile)
deleteFile(bsmFile).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: '已取消删除'
})
})
}
}
}
......@@ -378,14 +198,14 @@
}
.next {
right: 1%;
right: 5%;
}
.img-list-wrap {
width: 100%;
width: calc(100% - 30px);
display: flex;
justify-content: center;
height: calc(100% - 80px);
height: calc(100% - 150px);
align-items: center;
background: rgba(194, 190, 190, 0.1);
overflow: scroll;
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-18 16:14:31
* @LastEditTime: 2023-09-19 09:47:05
-->
<template>
<div class="clxx">
<div class="right">
<!-- 材料预览 -->
<div class="clyl-box">
<div class="menu-tree">
<el-button
type="primary"
native-type="submit"
@click="viewDetail"
style="width: 100%; margin-top: 10px" v-if="tableData.length > 0">申请材料目录</el-button>
<div class="item">
材料目录({{ tableData.length }})
<div style="margin-top: 10px">
<div
style="
<!-- 材料预览 -->
<div class="clyl-box">
<div class="menu-tree">
<!-- <el-button
type="primary"
native-type="submit"
@click="viewDetail"
style="width: 100%; margin-top: 10px" v-if="tableData.length > 0">申请材料目录</el-button> -->
<div class="item">
材料目录({{ tableData.length }})
<div style="margin-top: 10px">
<div
style="
text-align: center;
line-height: 20px;
color: black;
font-size: 14px;
"
v-if="tableData.length == 0">
暂无数据
</div>
<div
v-for="(item, index) in tableData"
:key="item.bsmMaterial"
:class="['child', treeCheckId == item.bsmMaterial ? 'checked' : '']"
@click="treeClick(item, index)">
{{ item.clmc }}
<span class="cl_number" :key="key" v-if="item.count">({{ item.count }})</span>
<span class="cl_number" :key="key" v-else>(0)</span>
</div>
v-if="tableData.length == 0">
暂无数据
</div>
<div
v-for="(item, index) in tableData"
:key="item.bsmSj"
:class="['child', treeCheckId == item.bsmSj ? 'checked' : '']"
@click="treeClick(item, index)">
<span v-if="item.isrequired == 1" class="required">必选</span>
{{ item.sjmc }}
<span class="cl_number" :key="key">({{ item.ys ? item.ys : 0 }})</span>
</div>
</div>
<el-button
type="primary"
native-type="submit"
style="width: 100%"
@click="handleAdd()">新增</el-button>
</div>
<image-preview
ref="imageRef"
v-if="tableData.length > 0"
:previewImg="previewImg"
@updateList="updateList"
@nextPriview="nextPriview"
@prevPriview="prevPriview" />
</div>
<image-preview
ref="imageRef"
v-if="tableData.length > 0"
:previewImg="previewImg"
@nextPriview="nextPriview"
@prevPriview="prevPriview" />
</div>
</div>
</template>
<script>
import store from '@/store/index.js'
import { ywPopupDialog } from "@/utils/popup.js";
import imagePreview from "./dialog/imagePreview.vue";
import clxxDetailDialog from "./dialog/clxxDetailDialog.vue";
import { repairInitClml, saveClml, getClmxList } from "@/api/clxx.js";
import { repairInitClml, getClmxList } from "@/api/clxx.js";
export default {
components: { imagePreview, clxxDetailDialog },
components: { imagePreview },
props: {
formData: {
type: Object,
......@@ -80,7 +70,7 @@
key: 0,
tableData: [],
previewImg: {
bsmMaterial: "",
bsmSj: "",
index: 0,
selectedIndex: 0,
imgList: []
......@@ -113,19 +103,19 @@
if (this.treeCheckIndex < this.tableData.length) {
this.treeCheckIndex++;
if (this.tableData[this.treeCheckIndex]) {
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj;
// 判断页数
let ys = this.tableData[this.treeCheckIndex].ys
this.previewImg.index = 0;
// 获取材料明细
if (ys > 0) {
getFileListByBsmMaterial(this.treeCheckId).then(res => {
getClmxList(this.treeCheckId).then(res => {
this.previewImg.imgList = res.result ? res.result : []
})
} else {
this.previewImg.imgList = []
}
this.previewImg.bsmMaterial = this.tableData[this.treeCheckIndex].bsmMaterial;
this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj;
} else {
this.$message.error('没有最后一张了');
}
......@@ -138,11 +128,11 @@
prevPriview () {
if (this.treeCheckIndex >= 1) {
this.treeCheckIndex--;
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmSj;
// 判断页数
let ys = this.tableData[this.treeCheckIndex].ys
if (ys > 0) {
getFileListByBsmMaterial(this.treeCheckId).then(res => {
getClmxList(this.treeCheckId).then(res => {
this.previewImg.imgList = res.result ? res.result : []
this.previewImg.index = this.previewImg.imgList.length - 1;
})
......@@ -150,7 +140,7 @@
this.previewImg.imgList = [];
this.previewImg.index = 0
}
this.previewImg.bsmMaterial = this.tableData[this.treeCheckIndex].bsmMaterial;
this.previewImg.bsmSj = this.tableData[this.treeCheckIndex].bsmSj;
} else {
this.$message.error('没有第一张了');
}
......@@ -190,41 +180,12 @@
* @author: renchao
*/
setChecked (item) {
this.treeCheckId = item.bsmMaterial;
this.treeCheckId = item.bsmSj;
this.title = item.sjmc;
this.titleYs = 1;
this.titleNum = item.children.length;
this.previewImg.imgList = item.children;
this.previewImg.bsmMaterial = item.bsmMaterial;
},
/**
* @description: updateList
* @param {*} val
* @author: renchao
*/
updateList (val) {
let that = this;
if (val.children.length != 0) {
//删除最后一张图片时 val=null
this.tableData.forEach((item) => {
if (item.bsmMaterial == val.bsmMaterial) {
item.count = val.children.length
}
});
this.previewImg.imgList = _.cloneDeep(val.children);
if (this.previewImg.index == this.previewImg.imgList.length) {
this.previewImg.index = this.previewImg.index - 1;
}
this.key++
} else {
this.previewImg.imgList = [];
this.tableData.forEach((item, index) => {
if (this.treeCheckId == item.bsmMaterial) {
item.count = 0;
that.treeCheckIndex = index;
}
})
}
this.previewImg.bsmSj = item.bsmSj;
},
/**
* @description: 材料目录点击选中
......@@ -234,12 +195,12 @@
*/
treeClick (item, index) {
this.previewImg.index = 0;
this.treeCheckId = item?.bsmMaterial;
this.treeCheckId = item?.bsmSj;
this.treeCheckIndex = index;
getClmxList(item.bsmMaterial).then(res => {
getClmxList(item.bsmSj).then(res => {
this.previewImg.imgList = res.result ? res.result : []
})
this.previewImg.bsmMaterial = item?.bsmMaterial;
this.previewImg.bsmSj = item?.bsmSj;
},
/**
* @description: 小图片点击
......@@ -251,14 +212,6 @@
this.showImg = item;
this.titleYs = index + 1;
},
//查看明细
viewDetail () {
store.dispatch("user/reWorkFresh", false);
ywPopupDialog("申请材料目录", "xxba/components/clxx/dialog/clxxDetailDialog", {
data: this.tableData,
bsmCompany: this.formData.bsmCompany
}, "50%", true, false)
},
//设置tableData
setTableData (tableData) {
this.$nextTick((res) => {
......@@ -287,10 +240,8 @@
.clxx {
width: 100%;
height: 94%;
min-height: 360px;
display: flex;
padding-left: 5px;
height: 100%;
min-height: 600px;
.left {
display: flex;
flex-direction: column;
......@@ -312,83 +263,80 @@
}
}
.right {
.clmlmx-box {
margin: 0 auto;
.title {
text-align: center;
height: 60px;
line-height: 60px;
border: 1px solid #dfe6ec;
font-size: 20px;
background: #81d3f81a;
margin-bottom: -1px;
}
}
.clyl-box {
width: 100%;
height: 100%;
display: flex;
position: absolute;
.clmlmx-box {
margin: 0 auto;
.menu-tree {
width: 20%;
min-width: 160px;
height: 100%;
margin-right: 10px;
border-right: 1px dotted #d9d9d9;
padding: 0 15px;
.title {
.item {
line-height: 30px;
padding-top: 5px;
border-bottom: 1px solid #e8e8e8;
font-size: 16px;
text-align: center;
height: 60px;
line-height: 60px;
border: 1px solid #dfe6ec;
font-size: 20px;
background: #81d3f81a;
margin-bottom: -1px;
}
}
.clyl-box {
width: 100%;
height: 100%;
display: flex;
color: $light-blue;
.menu-tree {
width: 20%;
min-width: 160px;
height: 100%;
margin-right: 10px;
border-right: 1px dotted #d9d9d9;
padding: 0 15px;
.itemIcon {
float: right;
line-height: 60px;
cursor: pointer;
}
.item {
line-height: 30px;
padding-top: 5px;
.child {
line-height: 32px;
border-bottom: 1px solid #e8e8e8;
font-size: 16px;
text-align: center;
color: $light-blue;
.itemIcon {
float: right;
line-height: 60px;
cursor: pointer;
}
.child {
line-height: 32px;
border-bottom: 1px solid #e8e8e8;
padding-left: 10px;
color: #6b6b6b;
cursor: pointer;
box-sizing: border-box;
border-radius: 6px;
line-height: 20px;
transition: all 0.3s;
padding: 8px 0;
}
padding-left: 10px;
color: #6b6b6b;
cursor: pointer;
box-sizing: border-box;
border-radius: 6px;
line-height: 20px;
transition: all 0.3s;
padding: 8px 0;
overflow: hidden;
}
.child:hover {
color: $light-blue;
transform: scale(1.1);
}
.child:hover {
color: $light-blue;
transform: scale(1.1);
}
.checked {
border: 1px solid $light-blue;
color: $light-blue;
}
.checked {
border: 1px solid $light-blue;
color: $light-blue;
}
}
}
.clyl-img {
width: 75%;
height: 100%;
background: #f3f4f7;
margin: 0 auto;
position: relative;
}
.clyl-img {
width: 75%;
height: 100%;
background: #f3f4f7;
margin: 0 auto;
position: relative;
}
}
}
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-18 15:48:15
* @LastEditTime: 2023-09-19 09:12:32
-->
<template>
<div class="tableBox">
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-18 16:28:16
* @LastEditTime: 2023-09-18 17:22:36
-->
<template>
<div class="clxx">
......@@ -261,6 +261,7 @@
smzt: "",
ys: 0,
sjlx: data.cllx,
sjbm: data.clbm,
sfxjcl: "1", // 是否必选
sfggcl: data.sfggcl,
};
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-15 10:04:28
* @LastEditTime: 2023-09-18 17:21:36
-->
<template>
<div class="clmlmx-box">
......@@ -64,6 +64,15 @@
}
},
{
label: "材料编码",
render: (h, scope) => {
return (
(this.formData.ableOperation && scope.row.sfxjcl == '1') ?
<el-input value={scope.row.sjbm} onInput={(val) => { scope.row.sjbm = val }}></el-input> : <span>{scope.row.sjbm}</span>
)
}
},
{
label: "材料类型",
width: "110",
render: (h, scope) => {
......