Skip to content

bdc / bdcdj-web

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

Merge branch 'dev'

2 parents 46032fe9 d164eca5
Inline Side-by-side
Showing 24 changed files with 2093 additions and 144 deletions
/*
* @Description: 信息备案
* @Autor:
* @LastEditTime: 2023-09-11 11:25:22
*/
import request from '@/utils/request'
let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl'))
/**
* @description: cstj
* @author:
* @param params
*/
export function cstj (params) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/xn/cstj?startAt='+params.startAt + '&endAt=' + params.endAt,
method: 'post'
})
}
/**
* @description: exportCstj
* @author:
* @param params
*/
export function exportCstj (params) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/xn/exportCstj?startAt='+params.startAt + '&endAt=' + params.endAt,
method: 'post',
responseType: 'blob'
})
}
/**
* @description: tjtj
* @author:
* @param data
*/
export function tjtj (data) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/xn/tjtj',
method: 'post',
data
})
}
/**
* @description: exportTjtj
* @author:
* @param data
*/
export function exportTjtj (data) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/xn/exportTjtj',
method: 'post',
data,
responseType: 'blob'
})
}
/**
* @description: getDjlxStatistic
* @author:
* @param data
*/
export function getDjlxStatistic (data) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/djqkfx/getDjlxStatistic',
method: 'post',
data
})
}
/**
* @description: getPrintBdcqzStatistic
* @author:
* @param data
*/
export function getPrintBdcqzStatistic (data) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/djqkfx/getPrintBdcqzStatistic',
method: 'post',
data
})
}
/**
* @description: getSlryStatistic
* @author:
* @param data
*/
export function getSlryStatistic (data) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/djqkfx/getSlryStatistic',
method: 'post',
data
})
}
/**
* @description: getAcceptMonthStatistic
* @author:
* @param data
*/
export function getAcceptMonthStatistic (data) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/djqkfx/getAcceptMonthStatistic',
method: 'post',
data
})
}
/**
* @description: getAcceptDayStatistic
* @author:
* @param data
*/
export function getAcceptDayStatistic (data) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/djqkfx/getAcceptDayStatistic',
method: 'post',
data
})
}
/**
* @description: getAcceptAreaStatistic
* @author:
* @param data
*/
export function getAcceptAreaStatistic (data) {
return request({
url: SERVER.SERVERAPI + '/rest/tjfx/djqkfx/getAcceptAreaStatistic',
method: 'post',
data
})
}
......@@ -86,6 +86,7 @@
</template>
<script>
import * as echarts from "echarts";
import { getDjlxStatistic } from "@/api/tjfx.js";
import { mapGetters } from "vuex";
import { getdatamonth } from "@/utils/util";
export default {
......@@ -97,27 +98,51 @@ export default {
return {
queryForm: {
sj: [],
qy: ''
},
tableList: [
{ name: "首次登记", value: "2" },
{ name: "变更登记", value: "12" },
{ name: "抵押登记", value: "23" },
{ name: "转移登记", value: "33" },
{ name: "预告登记", value: "13" },
{ name: "注销登记", value: "3" },
{ name: "查封登记", value: "4" },
{ name: "其他登记", value: "26" },
// { name: "首次登记", value: "2" },
// { name: "变更登记", value: "12" },
// { name: "抵押登记", value: "23" },
// { name: "转移登记", value: "33" },
// { name: "预告登记", value: "13" },
// { name: "注销登记", value: "3" },
// { name: "查封登记", value: "4" },
// { name: "其他登记", value: "26" },
],
};
},
mounted() {
this.setdata();
},
methods: {
getDjlxStatistic() {
getDjlxStatistic(
{
startDate: this.queryForm.sj[0],
endDate: this.queryForm.sj[1],
qxdm: this.queryForm.qy
}
).then(res => {
if (res.code === 200) {
this.tableList = []
let dicList = this.dictData['A21']
res.result.forEach(it=>{
const matchingObject = dicList.find(obj => obj.dcode === it.DJLX);
const djlxmc = matchingObject != null ? matchingObject.dname : it.DJLX;
let obj = {
name: djlxmc,
value: it.SJCOUNT
}
this.tableList.push(obj)
})
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
}
})
},
methods: {
getOption() {
return {
title: {
......@@ -171,10 +196,12 @@ export default {
setdata() {
this.queryForm.sj = getdatamonth();
console.log("this.queryForm", this.queryForm);
this.getDjlxStatistic()
},
handleSearch() {
console.log(" this.queryForm", this.queryForm);
this.getDjlxStatistic()
},
},
};
......
......@@ -68,28 +68,56 @@
<script>
import * as echarts from "echarts";
import { getdatamonth } from "@/utils/util";
import { getAcceptAreaStatistic } from "@/api/tjfx.js";
import {mapGetters} from "vuex";
export default {
components: {},
computed: {
...mapGetters(["dictData"]),
},
data() {
return {
queryForm: {},
tableList: [
{ name: "浐灞", value: "2" },
{ name: "长安", value: "12" },
{ name: "莲湖", value: "23" },
{ name: "高新", value: "33" },
{ name: "高新", value: "33" },
// { name: "浐灞", value: "2" },
// { name: "长安", value: "12" },
// { name: "莲湖", value: "23" },
// { name: "高新", value: "33" },
// { name: "高新", value: "33" },
],
};
},
mounted() {
this.setdata();
},
methods: {
getAcceptAreaStatistic() {
getAcceptAreaStatistic({
startDate: this.queryForm.sj[0],
endDate: this.queryForm.sj[1],
qxdm: this.queryForm.qy
}).then(res => {
if (res.code === 200) {
this.tableList = []
let dicList = this.dictData['A20']
res.result.forEach(it=>{
const matchingObject = dicList.find(obj => obj.dcode === it.QXDM);
const qxmc = matchingObject != null ? matchingObject.dname : it.QXDM;
let obj = {
name: qxmc,
value: it.SJCOUNT
}
this.tableList.push(obj)
})
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
}
})
},
methods: {
getOption() {
return {
title: {
......@@ -143,9 +171,11 @@ export default {
setdata() {
this.queryForm.sj = getdatamonth();
console.log("this.queryForm", this.queryForm);
this.getAcceptAreaStatistic()
},
handleSearch() {
console.log(" this.queryForm", this.queryForm);
this.getAcceptAreaStatistic()
},
},
};
......
......@@ -87,6 +87,7 @@
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { getdatamonth } from "@/utils/util";
import { getSlryStatistic } from "@/api/tjfx.js";
export default {
components: {},
computed: {
......@@ -94,22 +95,46 @@ export default {
},
data() {
return {
queryForm: {},
queryForm: {
qy: ''
},
tableList: [
{ name: "小红", value: "2" },
{ name: "小张", value: "12" },
{ name: "小王", value: "23" },
// { name: "小红", value: "2" },
// { name: "小张", value: "12" },
// { name: "小王", value: "23" },
],
};
},
mounted() {
this.setdata();
},
methods: {
getSlryStatistic() {
getSlryStatistic({
startDate: this.queryForm.sj[0],
endDate: this.queryForm.sj[1],
qxdm: this.queryForm.qy
}).then(res => {
if (res.code === 200) {
this.tableList = []
res.result.forEach(it=>{
let obj = {
name: it.SLRY,
value: it.SJCOUNT
}
this.tableList.push(obj)
})
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
}
})
},
methods: {
getOption() {
return {
title: {
......@@ -163,9 +188,11 @@ export default {
setdata() {
this.queryForm.sj = getdatamonth();
console.log("this.queryForm", this.queryForm);
this.getSlryStatistic()
},
handleSearch() {
console.log(" this.queryForm", this.queryForm);
this.getSlryStatistic()
},
},
};
......
......@@ -56,8 +56,27 @@
</div>
</template>
<script>
function getFirstAndLastDayOfMonth(dateString) {
const date = new Date(dateString);
const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
const lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
// 将日期格式化为 "yyyy-MM-dd"
const formatDate = (d) => {
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
};
return {
firstDay: formatDate(firstDay),
lastDay: formatDate(lastDay)
};
}
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { getAcceptDayStatistic } from "@/api/tjfx.js";
export default {
components: {},
computed: {
......@@ -66,23 +85,11 @@ export default {
data() {
return {
queryForm: {
monthValue:""
},
datas: [12, 23, 15, 28, 37, 11, 13, 32, 34, 56, 12, 15],
datatime: [
"1日",
"2日",
"4日",
"5日",
"7日",
"10日",
"14日",
"15日",
"17日",
"19日",
"20日",
"21日",
],
monthValue:"",
qy: ''
},
datas: [],
datatime: [],
};
},
......@@ -101,16 +108,13 @@ export default {
console.log("this.queryForm",this.queryForm);
},
mounted() {
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
this.handleSearch()
},
methods: {
getOption() {
return {
title: {
text: "2023年11月收件情况 ", // 主标题名称
text: "收件情况统计(月) ", // 主标题名称
textStyle: {
//主标题文本设置
......@@ -168,7 +172,20 @@ export default {
};
},
handleSearch() {},
handleSearch() {
const { firstDay, lastDay } = getFirstAndLastDayOfMonth(this.queryForm.monthValue);
getAcceptDayStatistic({startDate: firstDay, endDate: lastDay, qxdm: this.queryForm.qy}).then(res => {
if (res.code === 200) {
let dataSource = res.result
this.datas = dataSource.map(item => item.SJCOUNT)
this.datatime = dataSource.map(item => item.SJDAY)
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
}
})
},
},
};
</script>
......
......@@ -14,6 +14,7 @@
class="width100"
v-model="queryForm.sj"
type="year"
@change="chooseDateRange"
placeholder="选择年"
>
</el-date-picker>
......@@ -58,7 +59,7 @@
<script>
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { getAcceptMonthStatistic } from "@/api/tjfx.js";
export default {
components: {},
computed: {
......@@ -67,50 +68,44 @@ export default {
data() {
return {
queryForm: {
sj:""
sj:"",
year: "",
qy: ''
},
datetime: [],
datas: []
};
},
created() {
var tempDate = new Date();
this.queryForm.sj = tempDate
var year = tempDate.getFullYear();
console.log("year", year);
// 默认当月
this.$set(this.queryForm, "sj", year.toString());
this.$set(this.queryForm, "year", year.toString());
console.log("this.queryForm",this.queryForm);
},
mounted() {
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
this.handleSearch()
},
methods: {
chooseDateRange() {
var year = this.queryForm.sj.getFullYear();
this.$set(this.queryForm, "year", year.toString());
this.handleSearch()
},
getOption() {
return {
xAxis: {
type: "category",
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
data: this.datatime,
},
yAxis: {
type: "value",
},
title: {
text: "2023年收件情况 ", // 主标题名称
text: "收件情况统计(年) ", // 主标题名称
textStyle: {
//主标题文本设置
......@@ -149,7 +144,7 @@ export default {
},
series: [
{
data: [38, 42, 50, 157, 40, 45, 60, 140, 36, 47, 54, 143],
data: this.datas,
barWidth: 40,
type: "bar",
},
......@@ -157,7 +152,22 @@ export default {
};
},
handleSearch() {},
handleSearch() {
console.log(this.queryForm)
let startAt = this.queryForm.year + '-01-01'
let endAt = this.queryForm.year + '-12-31'
getAcceptMonthStatistic({startDate: startAt, endDate: endAt, qxdm: this.queryForm.qy}).then(res => {
if (res.code === 200) {
let dataSource = res.result
this.datas = dataSource.map(item => item.SJCOUNT)
this.datatime = dataSource.map(item => item.SJMONTH)
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
}
})
},
},
};
</script>
......
......@@ -84,6 +84,7 @@
</div>
</template>
<script>
import { getPrintBdcqzStatistic } from "@/api/tjfx.js";
import * as echarts from "echarts";
import { mapGetters } from "vuex";
import { getdatamonth } from "@/utils/util";
......@@ -94,7 +95,9 @@ export default {
},
data() {
return {
queryForm: {},
queryForm: {
qy: ''
},
tableList: [
{ name: "单一版不动产权证书", value: "459" },
{ name: "不动产登记证明", value: "164" },
......@@ -110,6 +113,48 @@ export default {
this.chart.setOption(this.getOption());
},
methods: {
getPrintBdcqzStatistic() {
getPrintBdcqzStatistic({
startDate: this.queryForm.sj[0],
endDate: this.queryForm.sj[1],
qxdm: this.queryForm.qy
}).then(res => {
if (res.code === 200) {
this.tableList = []
res.result.forEach(it=>{
let obj = {
name: it.BDCQZLX == '1' ? '单一版不动产权证书' : '不动产登记证明',
ky: it.BDCQZLX,
value: it.SJCOUNT
}
this.tableList.push(obj)
})
const hasBdclx1 = this.tableList.some(item => item.ky === '1');
if (!hasBdclx1) {
let obj1 = {
name: '单一版不动产权证书',
ky: '1',
value: 0
}
this.tableList.push(obj1)
}
const hasBdclx2 = this.tableList.some(item => item.ky === '2');
if (!hasBdclx2) {
let obj2 = {
name: '不动产登记证明',
ky: '2',
value: 0
}
this.tableList.push(obj2)
}
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
}
})
},
getOption() {
return {
title: {
......@@ -163,9 +208,11 @@ export default {
setdata() {
this.queryForm.sj = getdatamonth();
console.log("this.queryForm", this.queryForm);
this.getPrintBdcqzStatistic()
},
handleSearch() {
console.log(" this.queryForm", this.queryForm);
this.getPrintBdcqzStatistic()
},
},
};
......
......@@ -50,6 +50,7 @@
</template>
<script>
import * as echarts from "echarts";
import {cstj, exportCstj} from "@/api/tjfx.js";
import XLSX from "xlsx";
export default {
components: {},
......@@ -69,50 +70,62 @@ export default {
chooseIndex: 0, // 日期快捷选择项索引
dateRange: [], // 自定义列表 - 日期范围
queryForm: {},
data1: [12, 10, 15, 12, 15, 19, 15],
data2: [1, 2, 2, 3, 2, 3, 2],
data1: [],
data2: [],
data3: [],
selectDate : {
startAt:'2020-01-03 02:57:57',
endAt:'2025-01-03 02:57:57'
},
xAxisData: [
"赵龙龙",
"刘刚",
"任启亮",
"梁亚博",
"李含",
"周路",
],
};
},
mounted() {
this.setdata();
},
methods: {
cstj () {
cstj(this.selectDate).then(res => {
if (res.code == 200) {
let dataSource = res.result;
if (dataSource != null) {
this.xAxisData = dataSource.map(item => item.assignee)
this.data1 = dataSource.map(item => item.total)
this.data2 = dataSource.map(item => item.count)
this.data3 = dataSource.map(item => item.cumulativeTimeout)
}
console.log(this.xAxisData)
console.log(this.data1)
console.log(this.data2)
console.log(this.data3)
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
this.chooseDateQuick(0);
}
})
},
methods: {
setdata() {
for (let i = 0; i < this.data1.length; i++) {
let sum = (this.data2[i] / this.data1[i]) * 100;
this.data3.push(Number(sum).toFixed(0));
}
this.chooseDateQuick(7)
this.cstj()
},
// 导出
derive() {
this.exdata = [["受理人员", "收件数", "退件数", "推荐率"]];
this.xAxisData.forEach((item, index) => {
console.log("this.exdata[index+1]", this.exdata[index + 1]);
this.exdata.push([]);
this.exdata[index + 1].push(item);
this.exdata[index + 1].push(this.data1[index]);
this.exdata[index + 1].push(this.data2[index]);
this.exdata[index + 1].push(this.data3[index]);
});
console.log("this.exdata", this.exdata);
const ws = XLSX.utils.aoa_to_sheet(this.exdata);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "收件与超时统计情况.xlsx");
exportCstj(this.selectDate).then(res => {
const link=document.createElement("a");
let blob=new Blob([res], { type: "application/vnd.ms-excel" }); //类型excel
link.style.display="none";
link.href=URL.createObjectURL(blob);
link.setAttribute("download", this.dateRange[0]+'~'+ this.dateRange[1] +'超时统计');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
},
// 查询
chchch() {
......@@ -140,15 +153,21 @@ export default {
},
// 如果需要自定义 tooltip样式，需要使用formatter
formatter: (params) => {
console.log("paramsssssssssssssssssss", params);
if (params.seriesName == '超时时间') {
return `<div font-size: 14px;line-height: 24px>
${params.seriesName}
<br>
<span font-size: 16px; font-weight: 600;"> ${params.name}: ${
Number(params.value).toFixed(2) + "%"
Number(params.value).toFixed(2) + "小时"
} </span>
</div>`;
}
return `<div font-size: 14px;line-height: 24px>
${params.seriesName}
<br>
<span font-size: 16px; font-weight: 600;"> ${params.name}: ${
Number(params.value).toFixed(2) + "件"
} </span>
</div>`;
},
},
......@@ -279,6 +298,9 @@ export default {
this.formatDate(new Date(year - 1, 11, 31))
);
}
this.selectDate.startAt = this.dateRange[0] + " 00:00:00"
this.selectDate.endAt = this.dateRange[1] + " 00:00:00"
this.cstj()
},
// 日期范围选择器事件
chooseDateRange() {
......
......@@ -53,6 +53,7 @@
</template>
<script>
import * as echarts from "echarts";
import {tjtj, exportTjtj} from "@/api/tjfx.js";
import XLSX from 'xlsx';
export default {
components: {},
......@@ -69,62 +70,68 @@ export default {
{ code: "7", name: "今年" },
{ code: "8", name: "去年" },
],
selectDate : {
startAt:'2020-01-03 02:57:57',
endAt:'2025-01-03 02:57:57'
},
chooseIndex: 0, // 日期快捷选择项索引
dateRange: [], // 自定义列表 - 日期范围
queryForm: {},
data1: [23, 45, 23, 11, 15, 19, 35],
data2: [1, 4, 1, 3, 2, 3, 4],
data1: [],
data2: [],
data3: [],
xAxisData: [
"任超",
"杨威",
"魏娜",
"张祎旋",
"苗菁",
"王文刚",
"单帅旗",
],
xAxisData: [],
};
},
mounted() {
this.setdata();
},
methods: {
tjtj () {
tjtj(this.selectDate).then(res => {
if (res.code == 200) {
let dataSource = res.result;
if (dataSource != null) {
this.xAxisData = dataSource.map(item => item.assignee)
this.data1 = dataSource.map(item => item.sj)
this.data2 = dataSource.map(item => item.tj)
this.data3 = dataSource.map(item => item.tjl)
}
console.log(this.xAxisData)
console.log(this.data1)
console.log(this.data2)
console.log(this.data3)
// 创建一个 ECharts 实例
this.chart = echarts.init(this.$refs.chart);
// 在 ECharts 实例中配置图表
this.chart.setOption(this.getOption());
this.chooseDateQuick(0);
}
})
},
methods: {
setdata() {
for (let i = 0; i < this.data1.length; i++) {
let sum = (this.data2[i] / this.data1[i]) * 100;
this.data3.push(Number(sum).toFixed(0));
}
this.chooseDateQuick(7)
this.tjtj()
},
// 导出
// 导出
derive() {
this.exdata = [
['受理人员', '收件数','退件数','推荐率']
];
this.xAxisData.forEach((item,index) => {
console.log("this.exdata[index+1]",this.exdata[index+1]);
this.exdata.push([])
this.exdata[index+1].push(item)
this.exdata[index+1].push(this.data1[index])
this.exdata[index+1].push(this.data2[index])
this.exdata[index+1].push(this.data3[index])
})
console.log("this.exdata",this.exdata);
const ws = XLSX.utils.aoa_to_sheet(this.exdata);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, '收件与退件统计情况.xlsx');
exportTjtj(this.selectDate).then(res => {
const link=document.createElement("a");
let blob=new Blob([res], { type: "application/vnd.ms-excel" }); //类型excel
link.style.display="none";
link.href=URL.createObjectURL(blob);
link.setAttribute("download", this.dateRange[0]+'~'+ this.dateRange[1] +'收件退件统计');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
},
// 查询
chchch() {
console.log("dateRange", this.dateRange);
this.setdata()
},
getOption() {
return {
......@@ -148,6 +155,7 @@ console.log("this.exdata",this.exdata);
},
// 如果需要自定义 tooltip样式，需要使用formatter
formatter: (params) => {
if (params.seriesName == '退件率') {
return `<div font-size: 14px;line-height: 24px>
${params.seriesName}
<br>
......@@ -155,6 +163,14 @@ console.log("this.exdata",this.exdata);
Number(params.value).toFixed(2) + "%"
} </span>
</div>`;
}
return `<div font-size: 14px;line-height: 24px>
${params.seriesName}
<br>
<span font-size: 16px; font-weight: 600;"> ${params.name}: ${
Number(params.value).toFixed(2) + "件"
} </span>
</div>`;
},
},
......@@ -284,6 +300,9 @@ console.log("this.exdata",this.exdata);
this.formatDate(new Date(year - 1, 11, 31))
);
}
this.selectDate.startAt = this.dateRange[0] + " 00:00:00"
this.selectDate.endAt = this.dateRange[1] + " 00:00:00"
this.tjtj()
},
// 日期范围选择器事件
chooseDateRange() {
......
......@@ -65,10 +65,18 @@
}
})
} else {
getPrintTemplateByCode({ tmpno: Vue.prototype.BASE_API.adapter + '-2' }).then(res => {
// getPrintTemplateByCode({ tmpno: Vue.prototype.BASE_API.adapter + '-2' }).then(res => {
getPrintTemplateByCode({ tmpno: 'dysqs-bz-2' }).then(res => {
if (res.code === 200) {
getPrintApplicationForm(this.formData.bsmSldy).then(infoRes => {
if (infoRes.code === 200) {
if (infoRes.result.fileList && infoRes.result.fileList.length > 0) {
infoRes.result.fileList.forEach((it, index) => {
let key = index + 1
this.$set(infoRes.result, "file" + key, it.sjmc)
})
}
console.log(infoRes.result)
let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
// 装载第一个模板并设置数据
......
......@@ -113,6 +113,10 @@
label: "收费人员",
},
{
prop: "sfkmmc",
label: "收费科目名称",
},
{
prop: "sjffr",
label: "实际付费人",
},
......
......@@ -99,7 +99,7 @@
}
};
import store from '@/store/index.js'
import { addQy, update } from "@/api/xxba.js"
import { addQy, update, addYh } from "@/api/xxba.js"
import clxx from './clxx/index.vue'
export default {
props: {
......@@ -215,6 +215,7 @@
that.$refs['ruleForm'].validate((valid) => {
if (valid) {
store.dispatch("user/refreshPage", false);
if (this.formData.QyYh == 1) {
addQy(this.ruleForm).then(res => {
if (res.code == 200) {
that.$message.success('保存成功')
......@@ -229,6 +230,22 @@
}
})
} else {
addYh(this.ruleForm).then(res => {
if (res.code == 200) {
that.$message.success('保存成功')
that.$emit("input", false);
that.$refs['ruleForm'].resetFields();
that.resetTableFields();
that.closeDialog();
//刷新列表
store.dispatch("user/refreshPage", true);
} else {
that.$message.error(res.message);
}
})
}
} else {
this.$message.error('请完善表单');
return false;
}
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-15 15:41:36
* @LastEditTime: 2024-01-17 09:04:11
-->
<template>
<div class="from-clues">
......@@ -106,7 +106,7 @@
* @author: renchao
*/
handleAdd () {
this.$popupDialog("添加企业", "xxba/components/addDialog", { isAdd: 1 }, "75%")
this.$popupDialog("添加企业", "xxba/qyxxba/components/addDialog", { isAdd: 1, QyYh: 1 }, "75%")
},
/**
* @description: handleDelete
......
<template>
<div style="height:650px">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="银行信息" name="1"></el-tab-pane>
<el-tab-pane label="材料信息" v-if="formData.isAdd==2" name="2"></el-tab-pane>
</el-tabs>
<el-form ref="ruleForm" :model="ruleForm" label-width="100px" style="height:90%" v-if="activeName==1" :rules="rules">
<div style="height:90%">
<el-row>
<el-col :span="12">
<el-form-item label="银行名称:" prop="qymc">
<el-input v-model="ruleForm.qymc"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电话:" prop="dh">
<el-input v-model.number="ruleForm.dh" maxlength="11"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="证件种类:" prop="zjzl">
<el-select
clearable
v-model="ruleForm.zjzl"
class="width100"
placeholder="请选择">
<el-option
v-for="item in zjzlList"
:key="item.dcode"
:label="item.dname"
:value="item.dcode">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="证件号:" prop="zjh">
<el-input v-model="ruleForm.zjh" maxlength="18"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="法人名称:" prop="frmc">
<el-input v-model="ruleForm.frmc"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="法人电话:" prop="frdh">
<el-input v-model="ruleForm.frdh" maxlength="11"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="单位地址:" prop="dwdz">
<el-input v-model="ruleForm.dwdz"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮编:" prop="yb">
<el-input v-model="ruleForm.yb"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
<el-form-item style="text-align:center">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="submitForm">保存</el-button>
</el-form-item>
</el-form>
<clxx v-if="activeName==2" :formData="formData" />
</div>
</template>
<script>
const checkPhone = (rule, value, callback) => {
let regPone = null
let mobile = /^(1[3456789]\d{9})$/ //手机号
let tel = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/ // 座机
if (value && value[0] === '0') {// 检查 value 是否存在并且不是 null 或者 undefined
regPone = tel
} else if (value && value[0] !== '0') {
regPone = mobile
}
if (regPone === null) {
return callback(
new Error('请输入电话')
)
} else if (!regPone.test(value)) {
return callback(
new Error("请输入正确的电话格式,其中座机格式'区号-座机号码'")
)
} else {
callback()
}
};
import store from '@/store/index.js'
import { addQy, update, addYh } from "@/api/xxba.js"
import clxx from './clxx/index.vue'
export default {
props: {
formData: {
type: Object,
default: () => { },
},
},
components: {
clxx
},
data () {
return {
zjzlList: store.getters.dictData['A30'],
activeName: "1",
DJJGLIST: store.getters.dictData['ywly'],
readOnly: false,
//表单提交数据
ruleForm: {
batchno: '',
djjg: '',
operationtime: '',
bz: '',
zsstarno: '',
zsendno: '',
zsnum: '',
zmstarno: '',
zmendno: '',
zmnum: ''
},
//表格数据
tableForm: [
{
name: '不动产权证书',
ksysxlh: '',
jsysxlh: '',
bs: 0,
zslx: 1
},
{
name: '不动产登记证明',
ksysxlh: '',
jsysxlh: '',
bs: 0,
zslx: 2
}
],
rules: {
qymc: [
{ required: true, message: '银行名称不能为空', trigger: 'blur' }
],
dh: [
{ required: true, validator: checkPhone, trigger: ["blur"] },
],
zjzl: [
{ required: true, message: '请选择证件种类', trigger: 'change' }
],
zjh: [
{ required: true, message: '请输入证件号', trigger: 'blur' }
],
frmc: [
{ required: true, message: '请输入法人名称', trigger: 'blur' }
],
frdh: [
{ required: true, validator: checkPhone, trigger: ["blur"] },
],
dwdz: [
{ required: true, message: '请输入单位地址', trigger: 'blur' }
]
}
}
},
mounted () {
if (this.formData.bsmBatch) {
this.tableForm[0].bs = null;
this.tableForm[1].bs = null;
this.getDetailInfo(this.formData.bsmBatch)
}
let list = Object.keys(this.formData).length
if (list > 0) {
this.ruleForm = this.formData
}
},
methods: {
handleClick () { },
/**
* @description: 表单提交
* @author: renchao
*/
submitForm () {
let that = this
this.tableForm.forEach((item, index) => {
if (item.bs < 0) {
return;
}
})
if (this.formData.isAdd != 1) {
store.dispatch("user/refreshPage", false);
update(this.ruleForm).then(res => {
if (res.code == 200) {
this.$message.success('保存成功')
this.$emit("input", false);
this.$refs['ruleForm'].resetFields();
this.resetTableFields();
this.closeDialog();
//刷新列表
store.dispatch("user/refreshPage", true);
} else {
this.$message.error(res.message);
}
})
} else {
that.$refs['ruleForm'].validate((valid) => {
if (valid) {
store.dispatch("user/refreshPage", false);
if (this.formData.QyYh == 1) {
addQy(this.ruleForm).then(res => {
if (res.code == 200) {
that.$message.success('保存成功')
that.$emit("input", false);
that.$refs['ruleForm'].resetFields();
that.resetTableFields();
that.closeDialog();
//刷新列表
store.dispatch("user/refreshPage", true);
} else {
that.$message.error(res.message);
}
})
} else {
addYh(this.ruleForm).then(res => {
if (res.code == 200) {
that.$message.success('保存成功')
that.$emit("input", false);
that.$refs['ruleForm'].resetFields();
that.resetTableFields();
that.closeDialog();
//刷新列表
store.dispatch("user/refreshPage", true);
} else {
that.$message.error(res.message);
}
})
}
} else {
this.$message.error('请完善表单');
return false;
}
})
}
},
/**
* @description: 获取详情信息
* @param {*} bsmBatch
* @author: renchao
*/
getDetailInfo (bsmBatch) {
getZsglInfo({ "bsmBatch": bsmBatch }).then(res => {
if (res.code == 200) {
this.ruleForm = res.result;
this.readOnly = false;
this.tableForm[0].ksysxlh = res.result.zsstarno;
this.tableForm[0].jsysxlh = res.result.zsendno;
this.tableForm[0].bs = res.result.zsnum;
this.tableForm[1].ksysxlh = res.result.zmstarno;
this.tableForm[1].jsysxlh = res.result.zmendno;
this.tableForm[1].bs = res.result.zmnum;
}
})
},
/**
* @description: resetTableFields
* @author: renchao
*/
resetTableFields () {
this.tableForm = [
{
name: '不动产权证书',
ksysxlh: '',
jsysxlh: '',
bs: 0,
zslx: 1
},
{
name: '不动产权登记证明',
ksysxlh: '',
jsysxlh: '',
bs: 0,
zslx: 2
}
]
},
/**
* @description: closeDialog
* @author: renchao
*/
closeDialog () {
this.$popupCacel()
this.$refs['ruleForm'].resetFields();
this.resetTableFields();
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBoxheader.scss";
.font-red {
color: red;
}
.middle-margin-bottom {
margin-top: 20px;
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-09-15 15:50:26
-->
<template>
<dialogBox title="新建材料信息" width="20%" isMain v-model="myValue" @closeDialog="closeDialog" @submitForm="handleSubmit"
:isFullscreen="false">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
<el-row>
<el-col :span="24">
<el-form-item label="材料类型" prop="cllx">
<el-select v-model="ruleForm.cllx" class="width100" placeholder="请选择">
<el-option v-for="item in cllxList" :key="item.dcode" :label="item.dname" :value="item.dcode">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="材料名称" prop="clmc">
<el-input v-model="ruleForm.clmc"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="材料编码" prop="clbm">
<el-input v-model="ruleForm.clbm"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</dialogBox>
</template>
<script>
import store from '@/store/index.js'
export default {
props: {
value: { type: Boolean, default: false },
},
data () {
return {
cllxList: store.getters.dictData['A40'],
myValue: this.value,
ruleForm: {
cllx: "",
clmc: "",
clbm: ""
},
rules: {
cllx: [
{ required: true, message: '请选择材料类型', trigger: 'change' }
],
clmc: [
{ required: true, message: '请输入材料名称', trigger: 'blur' }
],
clbm: [
{ required: true, message: '请输入材料编码', trigger: 'blur' }
],
}
}
},
watch: {
value (val) {
this.myValue = val;
},
},
methods: {
/**
* @description: closeDialog
* @author: renchao
*/
closeDialog () {
this.$emit("input", false);
this.ruleForm = {
cllx: "",
clmc: "",
}
},
/**
* @description: handleSubmit
* @author: renchao
*/
handleSubmit () {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
this.$parent.addSave(this.ruleForm);
this.ruleForm = {
cllx: "",
clmc: "",
}
this.$emit("input", false);
} else {
return false;
}
})
}
}
};
</script>
<style scoped lang="scss">
.submit-button {
text-align: center;
height: 52px;
padding-top: 10px;
background-color: #fff;
}
</style>
<!--
* @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-12-15 14:42:21
-->
<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" v-Loading="loading">
<img id="photo" src="" v-show="isScan && this.BASE_API.gaopaiyi=='jy'" alt="高拍仪捷宇">
<img src="http://127.0.0.1:38088/video=stream&camidx=0" v-if="isScan && this.BASE_API.gaopaiyi=='lt'" 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"
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" :loading="upDateloading" v-if="ableOperation">上传</el-button>
</el-upload>
<!-- 左移右移 -->
<el-button type="primary" @click="handleMove('left')" v-if="ableOperation && thumbnailImages.length>0">左移</el-button>
<el-button type="primary" @click="handleMove('right')" v-if="ableOperation && thumbnailImages.length>0">右移</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>
<ul>
<li v-for="(img, index) in thumbnailImages" :key="index" :class="{ active: previewImg.index === index }"
@click="showCurrent(index)">
<img :src="img.fileurl">
</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, deleteFile, move, uploadSjClmx } 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 {
upDateloading: false,
loading: false,
key: 0,
isScan: false,
// 打开高拍仪
scanTitle: '打开高拍仪',
transform: {
scale: 1,
degree: 0
},
maxFileLength: 0,
// 缩略图
thumbnailImages: [],
showViewer: false,
initialIndex: 0,
allLi: [],
webSocket: null
}
},
watch: {
previewImg: {
handler (newValue, oldValue) {
if (newValue.imgList && newValue.imgList.length > 0) {
this.allLi = _.cloneDeep(newValue.imgList).map(item => item.fileurl)
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 () {
let that = this
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 = '打开高拍仪'
}
if (this.BASE_API.gaopaiyi == 'jy') {
let webSocket = new WebSocket('ws://localhost:1818');
this.webSocket = webSocket
webSocket.onopen = function (event) {
webSocket.send('bStartPlay')
webSocket.send('vSetPreviewRect(1600,1200)')
}
webSocket.onmessage = function (event) {
let begin_data = "data:image/jpeg;base64,";
document.getElementById('photo').src = begin_data + event.data;
if (event.data.indexOf('BeginsGetBase64') >= 0) {
let blob = that.dataURLtoBlob('data:image/png;base64,' + event.data.replace('BeginsGetBase64', '').replace('EndsGetBase64', ''));
let file = that.blobToFile(blob);
var formData = new FormData();
formData.append('file', file)
if (that.previewImg.imgList.length > 0) {
formData.append("index", that.previewImg.imgList[that.previewImg.index].sxh);
}
uploadSjClmx(formData, that.previewImg.bsmMaterial).then((res) => {
if (res.code == 200) {
that.$emit('updateList', { children: res.result, bsmMaterial: that.previewImg.bsmMaterial })
that.$message({
message: '上传成功!',
type: 'success'
})
}
})
}
}
}
},
/**
* @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
*/
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 });
},
blobToFile (blob) {
let name = getUuid(8) + '.jpg'
const file = new File([blob], name);
return file;
},
handleViewScan () {
if (this.BASE_API.gaopaiyi == 'jy') {
this.webSocket.send('sGetBase64');
return
}
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)
if (this.previewImg.imgList.length > 0) {
formData.append("index", this.previewImg.imgList[this.previewImg.index].sxh);
}
uploadSjClmx(formData, this.previewImg.bsmMaterial).then((res) => {
if (res.code == 200) {
this.$emit('updateList', { children: res.result, bsmMaterial: this.previewImg.bsmMaterial })
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
this.initialIndex = 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;
}
this.upDateloading = true
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.upDateloading = false
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.initialIndex = that.previewImg.index
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: #ccc;
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;
width: 100%;
height: 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-10-24 17:18:02
-->
<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="
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>
</div>
</div>
<el-button
type="primary"
native-type="submit"
style="width: 100%"
@click="handleAdd()">新增</el-button>
</div>
<image-preview
ref="imageRef"
:key="imgKey"
v-if="tableData.length > 0"
:previewImg="previewImg"
@updateList="updateList"
@nextPriview="nextPriview"
@prevPriview="prevPriview" />
</div>
</div>
<clxxAddDialog v-model="isDialog" />
</div>
</template>
<script>
import store from '@/store/index.js'
import { ywPopupDialog } from "@/utils/popup.js";
import imagePreview from "./dialog/imagePreview.vue";
import clxxAddDialog from "./dialog/clxxAddDialog.vue";
import clxxDetailDialog from "./dialog/clxxDetailDialog.vue";
import { getCompanyMaterialList, addCompanyMaterial, getFileListByBsmMaterial } from "@/api/company.js";
export default {
components: { clxxAddDialog, imagePreview, clxxDetailDialog },
props: {
formData: {
type: Object,
default: () => {
return {}
}
}
},
data () {
return {
imgKey: 0,
isDialog: false,
iclass: "",
// 材料目录选中
treeCheckIndex: 0,
treeCheckId: "",
key: 0,
tableData: [],
previewImg: {
bsmMaterial: "",
index: 0,
selectedIndex: 0,
imgList: []
}
}
},
computed: {
workFresh () {
return store.state.user.workFresh
}
},
watch: {
workFresh: {
handler (newValue, oldValue) {
this.clmlInitList(1)
},
deep: true,
immediate: true
}
},
created () {
this.clmlInitList(1)
},
methods: {
/**
* @description: 自动预览
* @author: renchao
*/
nextPriview () {
if (this.treeCheckIndex < this.tableData.length) {
this.treeCheckIndex++;
if (this.tableData[this.treeCheckIndex]) {
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
// 判断页数
let ys = this.tableData[this.treeCheckIndex].ys
this.previewImg.index = 0;
// 获取材料明细
if (ys > 0) {
getFileListByBsmMaterial(this.treeCheckId).then(res => {
this.previewImg.imgList = res.result ? res.result : []
})
} else {
this.previewImg.imgList = []
}
this.previewImg.bsmMaterial = this.tableData[this.treeCheckIndex].bsmMaterial;
} else {
this.$message.error('没有最后一张了');
}
}
},
/**
* @description: prevPriview
* @author: renchao
*/
prevPriview () {
if (this.treeCheckIndex >= 1) {
this.treeCheckIndex--;
this.treeCheckId = this.tableData[this.treeCheckIndex].bsmMaterial;
// 判断页数
let ys = this.tableData[this.treeCheckIndex].ys
if (ys > 0) {
getFileListByBsmMaterial(this.treeCheckId).then(res => {
this.previewImg.imgList = res.result ? res.result : []
this.previewImg.index = this.previewImg.imgList.length - 1;
})
} else {
this.previewImg.imgList = [];
this.previewImg.index = 0
}
this.previewImg.bsmMaterial = this.tableData[this.treeCheckIndex].bsmMaterial;
} else {
this.$message.error('没有第一张了');
}
},
/**
* @description: 材料目录明细初始化
* @param {*} type
* @author: renchao
*/
clmlInitList (type) {
// 1：列表初始化 2：新增材料
return new Promise((resolve) => {
getCompanyMaterialList(this.formData.bsmCompany).then((res) => {
if (res.code == 200) {
resolve(res.code);
if (res.result && res.result.length > 0) {
this.tableData = res.result;
if (type == 1) {
this.treeClick(this.tableData[0], 0);
} else if (type == 2) {
//新增材料后刷新列表焦点置于新增的对象上
this.treeClick(
this.tableData[this.tableData.length - 1],
this.tableData.length - 1
);
}
}
} else {
this.$message.error(res.message);
}
})
})
},
/**
* @description: setChecked
* @param {*} item
* @author: renchao
*/
setChecked (item) {
this.treeCheckId = item.bsmMaterial;
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;
}
})
}
},
/**
* @description: 添加材料目录
* @author: renchao
*/
handleAdd () {
this.isDialog = true;
},
/**
* @description: 新增弹窗保存
* @param {*} data
* @author: renchao
*/
addSave (data) {
let obj = {
bsmCompany: this.formData.bsmCompany,
clmc: data.clmc,
cllx: data.cllx
};
addCompanyMaterial(obj).then(async (res) => {
if (res.code == 200) {
let res = await this.clmlInitList(2);
if (res == 200)
this.$message({
message: "新增成功",
type: "success"
})
}
})
},
/**
* @description: 材料目录点击选中
* @param {*} item
* @param {*} index
* @author: renchao
*/
treeClick (item, index) {
this.previewImg.index = 0;
this.treeCheckId = item?.bsmMaterial;
this.treeCheckIndex = index;
getFileListByBsmMaterial(item.bsmMaterial).then(res => {
this.previewImg.imgList = res.result ? res.result : []
})
this.previewImg.bsmMaterial = item?.bsmMaterial;
if (this.$refs.imageRef) {
this.$refs.imageRef.initialIndex = 0
}
this.imgKey++
},
/**
* @description: 小图片点击
* @param {*} item
* @param {*} index
* @author: renchao
*/
imgClick (item, index) {
this.showImg = item;
this.titleYs = index + 1;
},
//查看明细
async viewDetail () {
await this.clmlInitList();
store.dispatch("user/reWorkFresh", false);
ywPopupDialog("申请材料目录", "xxba/components/clxx/dialog/clxxDetailDialog", {
data: this.tableData,
bsmCompany: this.formData.bsmCompany
}, "60%", true, false)
},
//设置tableData
setTableData (tableData) {
this.$nextTick((res) => {
this.tableData = tableData;
})
}
}
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.active {
background: $light-blue !important;
color: #fff;
}
.required {
font-size: 12px;
color: $pink;
float: left;
}
.cl_number {
float: right;
}
.clxx {
width: 100%;
height: 94%;
display: flex;
padding-left: 5px;
.left {
display: flex;
flex-direction: column;
justify-content: space-between;
.item {
width: 28px;
height: 49%;
@include flex-center;
background-color: #e4e7ed;
border-bottom-right-radius: 10px;
padding: 5px;
cursor: pointer;
transition: all 0.3s;
&:hover {
@extend .active;
}
}
}
.right {
width: 100%;
height: 100%;
.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;
.menu-tree {
width: 20%;
min-width: 160px;
height: 100%;
margin-right: 10px;
border-right: 1px dotted #d9d9d9;
padding: 0 15px;
.item {
line-height: 30px;
padding-top: 5px;
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;
}
.child:hover {
color: $light-blue;
transform: scale(1.1);
}
.checked {
border: 1px solid $light-blue;
color: $light-blue;
}
}
}
.clyl-img {
width: 75%;
height: 100%;
background: #f3f4f7;
margin: 0 auto;
position: relative;
}
}
}
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-11-10 13:43:21
* @LastEditTime: 2024-01-17 09:03:56
-->
<template>
<div class="from-clues">
......@@ -54,13 +54,14 @@
this.queryClick()
},
computed: {
...mapGetters(['workFresh'])
...mapGetters(['isRefresh'])
},
watch: {
workFresh: {
isRefresh: {
handler (newVal, oldVal) {
if (newVal) this.queryClick()
}
},
immediate: true
}
},
data () {
......@@ -105,7 +106,7 @@
* @author: renchao
*/
handleAdd () {
this.$popupDialog("添加银行", "xxba/components/addDialog", { isAdd: 1 }, "75%")
this.$popupDialog("添加银行", "xxba/yhjgba/components/addDialog", { isAdd: 1, QyYh: 2 }, "75%")
},
/**
* @description: handleDelete
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-10-24 15:00:35
* @LastEditTime: 2024-01-17 08:43:05
-->
<template>
<div class="from-clues">
......@@ -183,6 +183,17 @@
}
},
methods: {
resetForm () {
this.queryzrzForm = {
zddm: '',
bdcqzh: '',
zl: '',
zrzh: '',
xmmc: '',
jzwmc: ''
}
this.queryClick()
},
/**
* @description: queryClick
* @author: renchao
......