Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
5d6395d4 by xiaomiao
Options

登记簿打印

1 parent 4daf6578
Expand all
Inline Side-by-side
Showing 20 changed files with 827 additions and 194 deletions
......@@ -23,6 +23,7 @@
"node-sass": "^4.14.1",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"print-js": "^1.6.0",
"qrcode": "^1.5.3",
"vue": "2.6.10",
"vue-json-editor": "^1.4.3",
......
......@@ -16,6 +16,7 @@ import Loading from '@/components/Loading/index.js';
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { startLoadingAddCount, endLoadingSubCount } from './utils/requestLoading'
import Print from 'vue-print-nb'
import printJS from 'print-js'
Vue.use(Print);
Vue.mixin(mixin);
Vue.use(Loading.directive);
......@@ -27,7 +28,6 @@ Vue.prototype.$x2js = new x2js()
// 全局加载
Vue.prototype.$startLoading = startLoadingAddCount
Vue.prototype.$endLoading = endLoadingSubCount
// 弹框
import { popupDialog, popupCacel } from "./utils/popup.js";
// 全局加载
......
......@@ -6,12 +6,14 @@
<template>
<div class="djxxTable">
<div v-show="false">
<printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
<printTemplate id="boxcfdj" :propsParam="propsParam" :tableData="tableData" :render="render"/>
</div>
<div class="tableBox">
<div class="title">
{{ title }}
<el-button class="print" v-show="shows" v-print="printObj">打印</el-button>
<el-button class="print" v-show="shows" @click="openPrint()"
>打印</el-button
>
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox
......@@ -125,6 +127,7 @@ export default {
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: datas.columns().CFDJ,
render: false,
};
},
created() {
......@@ -132,6 +135,35 @@ export default {
},
methods: {
/**
* @description: openPrint
* @author: miaofang
*/
openPrint() {
this.render = true;
setTimeout(() => {
this.prinsss();
}, 100);
},
/**
* @description: prinsss
* @author: miaofang
*/
prinsss() {
printJS({
printable: "boxcfdj", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: "html",
maxWidth: 800, // 最大宽度
font_size: "", // 不设置则使用默认字体大小
style: `@font-face {
font-family: "STZHONGS";
src: url(${window.ttf}) format("truetype");
}`,
// 继承原来的所有样式
targetStyles: ["*"],
});
this.render=false
},
/**
* @description: loadData
* @author: renchao
*/
......
......@@ -5,18 +5,27 @@
-->
<template>
<div id="box">
<div class="tbalede" v-for="(el, indexx) in datass" :key="indexx" style="page-break-after: always">
<div
class="tbalede"
v-for="(el, indexx) in datass"
:key="indexx"
style="page-break-after: always"
>
<div class="title">{{ title }}</div>
<table class="xxTable">
<tr v-for="(item) in columns" :key="item.name">
<tr v-for="item in columns" :key="item.name">
<td>
{{ item.despriction }}
</td>
<td v-for="(row, index) in el" :key="index+'2'">
<td v-for="(row, index) in el" :key="index + '2'">
{{ row[item.name] }}
</td>
<td v-show="el.emptycolNum" v-for="count in emptycolNum" :key="count"></td>
<td
v-show="el.emptycolNum"
v-for="count in emptycolNum"
:key="count"
></td>
</tr>
</table>
</div>
......@@ -32,13 +41,12 @@ export default {
data() {
return {
title: this.$parent.title,
checkList: datas.columns().checkList,
//列表数据
//空列值个数
emptycolNum:3,
emptycolNum: 4,
//列名称对象
columns: [],
datass:[],
datass: [],
};
},
props: {
......@@ -50,46 +58,51 @@ export default {
type: Array,
default: () => [],
},
render:{
type: Boolean,
default: false,
}
},
created() {
},
created() {},
watch: {
tableData: {
handler (newValue, oldValue) {
this.tableData=newValue
this.loadData()
handler(newValue, oldValue) {
this.tableData = newValue;
},
}
},
render: {
handler(newValue, oldValue) {
this.loadData();
},
},
immediate: true,
deep: true,
},
methods: {
/**
* @description: loadData
* @author: renchao
* @author: miaofang
*/
loadData() {
getFieldListByQlxx({
qllx: this.propsParam.qllx
qllx: this.propsParam.qllx,
}).then((res) => {
if (res.code === 200) {
this.columns = res.result;
}
});
this.tableData.forEach((item) => {
item.sjlx = getSjlx(item.sjlx);
})
for (let i = 0; i < this.tableData.length; i+=3) {
this.datass.push(this.tableData.slice(i,i+3))
if (this.tableData.length&&this.datass.length==0) {
for (let i = 0; i < this.tableData.length; i += 4) {
this.datass.push(this.tableData.slice(i, i + 4));
}
let num=this.datass[this.datass.length-1].length
if (num < 3) {
this.emptycolNum =
3 - num;
this.datass[this.datass.length-1].emptycolNum=true
let num = this.datass[this.datass.length - 1].length;
if (num < 4) {
this.emptycolNum = 4 - num;
this.datass[this.datass.length - 1].emptycolNum = true;
} else {
this.emptycolNum = 0;
}
}
},
},
};
......@@ -97,7 +110,7 @@ export default {
<style lang="scss" scoped>
.tbalede {
width: 794px;
width: 100%;
// height: 1123px;
margin: auto;
.title {
......@@ -124,6 +137,17 @@ export default {
min-width: 80px;
padding: 5px;
}
td {
width: 20px!important;
word-break: break-all;
// /* 方法一：使用 word-break */
// word-break: break-all;
// // /* 方法二：使用 white-space */
// // white-space: pre-wrap;
// // /* 方法三：使用 overflow-wrap */
// // overflow-wrap: break-word;
}
}
}
</style>
......
......@@ -6,12 +6,14 @@
<template>
<div class="djxxTable">
<div v-show="false">
<printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
<printTemplate id="boxdiyaq" :propsParam="propsParam" :tableData="tableData" :render="render"/>
</div>
<div class="tableBox">
<div class="title">
{{ title }}
<el-button class="print" v-show="shows" v-print="printObj">打印</el-button>
<el-button class="print" v-show="shows" @click="openPrint()"
>打印</el-button
>
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox
......@@ -127,6 +129,7 @@ export default {
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: datas.columns().DYAQ,
render: false,
};
},
created() {
......@@ -134,6 +137,35 @@ export default {
},
methods: {
/**
* @description: openPrint
* @author: miaofang
*/
openPrint() {
this.render = true;
setTimeout(() => {
this.prinsss();
}, 100);
},
/**
* @description: prinsss
* @author: miaofang
*/
prinsss() {
printJS({
printable: "boxdiyaq", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: "html",
maxWidth: 800, // 最大宽度
font_size: "", // 不设置则使用默认字体大小
style: `@font-face {
font-family: "STZHONGS";
src: url(${window.ttf}) format("truetype");
}`,
// 继承原来的所有样式
targetStyles: ["*"],
});
this.render=false
},
/**
* @description: loadData
* @author: renchao
*/
......
<!--
* @Description:
* @Autor: renchao
* @Autor: miaofang
* @LastEditTime: 2023-08-23 15:54:12
-->
<template>
<div class="djxxTable">
<div v-show="false">
<printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
<printTemplate id="boxdiyiq" :propsParam="propsParam" :tableData="tableData" :render="render"/>
</div>
<div class="tableBox">
<div class="title">
{{ title }}
<el-button class="print" v-show="shows" v-print="printObj">打印</el-button>
<el-button class="print" v-show="shows" @click="openPrint()"
>打印</el-button
>
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox
......@@ -127,15 +129,44 @@ export default {
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: datas.columns().DYIQ,
render: false,
};
},
created() {
this.loadData();
},
methods: {
methods: { /**
* @description: openPrint
* @author: miaofang
*/
openPrint() {
this.render = true;
setTimeout(() => {
this.prinsss();
}, 100);
},
/**
* @description: prinsss
* @author: miaofang
*/
prinsss() {
printJS({
printable: "boxdiyiq", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: "html",
maxWidth: 800, // 最大宽度
font_size: "", // 不设置则使用默认字体大小
style: `@font-face {
font-family: "STZHONGS";
src: url(${window.ttf}) format("truetype");
}`,
// 继承原来的所有样式
targetStyles: ["*"],
});
this.render=false
},
/**
* @description: loadData
* @author: renchao
* @author: miaofang
*/
loadData() {
if (this.$parent.addRepairRecord) {
......@@ -164,7 +195,7 @@ export default {
},
/**
* @description: checkChange
* @author: renchao
* @author: miaofang
*/
checkChange() {
if (this.checkList.length === 0) {
......@@ -177,7 +208,7 @@ export default {
/**
* @description: getQsztName
* @param {*} code
* @author: renchao
* @author: miaofang
*/
getQsztName(code) {
let name = "";
......@@ -194,7 +225,7 @@ export default {
* @description: 新增一条补录信息
* @param {*} row
* @param {*} del
* @author: renchao
* @author: miaofang
*/
editDialog(row, del) {
this.$confirm("此操作将新增一条补录信息, 是否继续?", "提示", {
......
<!--
* @Description:
* @Autor: renchao
* @Autor: miaofang
* @LastEditTime: 2023-08-23 15:54:12
-->
<template>
<div class="djxxTable">
<div v-show="false">
<printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
<printTemplate
id="boxfdcq"
:propsParam="propsParam" :tableData="tableData" :render="render"/>
</div>
<div class="tableBox">
<div class="title">
{{ title }}
<el-button class="print" v-show="shows" v-print="printObj">打印</el-button>
<el-button class="print" v-show="shows" @click="openPrint()"
>打印</el-button
>
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox
......@@ -121,7 +125,7 @@
</template>
<script>
import printJS from "print-js";
import { datas } from "./qlxxFormData.js";
import { getSjlx } from "@/utils/dictionary.js";
import { getFdcq1List } from "@/api/djbDetail.js";
......@@ -136,7 +140,7 @@ export default {
id: "box",
//其他配置项，
},
shows:false,
shows: false,
title: "房地产权登记信息（多幢）",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
......@@ -144,10 +148,13 @@ export default {
propsParam: this.$attrs,
//列表数据
tableData: [],
// 异步传值
datalist: [],
//空列值个数
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: datas.columns().FDCQ1,
render: false,
};
},
created() {
......@@ -155,8 +162,37 @@ export default {
},
methods: {
/**
* @description: openPrint
* @author: miaofang
*/
openPrint() {
this.render = true;
setTimeout(() => {
this.prinsss();
}, 100);
},
/**
* @description: prinsss
* @author: miaofang
*/
prinsss() {
printJS({
printable: "boxfdcq", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: "html",
maxWidth: 800, // 最大宽度
font_size: "", // 不设置则使用默认字体大小
style: `@font-face {
font-family: "STZHONGS";
src: url(${window.ttf}) format("truetype");
}`,
// 继承原来的所有样式
targetStyles: ["*"],
});
this.render=false
},
/**
* @description: loadData
* @author: renchao
* @author: miaofang
*/
loadData() {
if (this.$parent.addRepairRecord) {
......@@ -169,7 +205,7 @@ export default {
}).then((res) => {
if (res.code === 200) {
this.tableData = res.result;
this.shows=this.tableData.length>0
this.shows = this.tableData.length > 0;
this.tableData.forEach((item) => {
item.sjlx = getSjlx(item.sjlx);
});
......@@ -184,7 +220,7 @@ export default {
},
/**
* @description: checkChange
* @author: renchao
* @author: miaofang
*/
checkChange() {
if (this.checkList.length === 0) {
......@@ -197,7 +233,7 @@ export default {
/**
* @description: getQsztName
* @param {*} code
* @author: renchao
* @author: miaofang
*/
getQsztName(code) {
let name = "";
......@@ -212,7 +248,7 @@ export default {
/**
* @description: judge
* @param {*} lable
* @author: renchao
* @author: miaofang
*/
judge(label) {
if (
......@@ -230,7 +266,7 @@ export default {
* @description: 新增一条补录信息
* @param {*} row
* @param {*} del
* @author: renchao
* @author: miaofang
*/
editDialog(row, del) {
this.$confirm("此操作将新增一条补录信息, 是否继续?", "提示", {
......
<!--
* @Description:
* @Autor: renchao
* @Autor: miaofang
* @LastEditTime: 2023-08-23 15:54:12
-->
<template>
<div class="djxxTable">
<div v-show="false">
<printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
<div>
<printTemplate
id="boxfdcq"
:propsParam="propsParam"
:tableData="tableData"
:render="render"
/>
</div>
<div class="tableBox">
<div class="title">
{{ title }}
<el-button class="print" v-show="shows" v-print="printObj">打印</el-button>
<el-button class="print" v-show="shows" @click="openPrint()"
>打印</el-button
>
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox
......@@ -111,11 +118,8 @@ export default {
},
data() {
return {
printObj: {
id: "box",
//其他配置项，
},
shows:false,
shows: false,
title: "房地产权登记信息（独幢、层、套、间房屋）",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
......@@ -127,6 +131,7 @@ export default {
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: datas.columns().FDCQ2,
render: false,
};
},
created() {
......@@ -134,8 +139,37 @@ export default {
},
methods: {
/**
* @description: openPrint
* @author: miaofang
*/
openPrint() {
this.render = true;
setTimeout(() => {
this.prinsss();
}, 100);
},
/**
* @description: prinsss
* @author: miaofang
*/
prinsss() {
printJS({
printable: "boxfdcq", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: "html",
maxWidth: 800, // 最大宽度
font_size: "", // 不设置则使用默认字体大小
style: `@font-face {
font-family: "STZHONGS";
src: url(${window.ttf}) format("truetype");
}`,
// 继承原来的所有样式
targetStyles: ["*"],
});
this.render = false
},
/**
* @description: loadData
* @author: renchao
* @author: miaofang
*/
loadData() {
if (this.$parent.addRepairRecord) {
......@@ -148,8 +182,7 @@ export default {
}).then((res) => {
if (res.code === 200) {
this.tableData = res.result;
this.shows=this.tableData.length>0
console.log("this.tableData111",this.tableData);
this.shows = this.tableData.length > 0;
this.tableData.forEach((item) => {
item.sjlx = getSjlx(item.sjlx);
});
......@@ -164,7 +197,7 @@ export default {
},
/**
* @description: checkChange
* @author: renchao
* @author: miaofang
*/
checkChange() {
if (this.checkList.length === 0) {
......@@ -177,7 +210,7 @@ export default {
/**
* @description: getQsztName
* @param {*} code
* @author: renchao
* @author: miaofang
*/
getQsztName(code) {
let name = "";
......@@ -194,7 +227,7 @@ export default {
* @description: 新增一条补录信息
* @param {*} row
* @param {*} del
* @author: renchao
* @author: miaofang
*/
editDialog(row, del) {
this.$confirm("此操作将新增一条补录信息, 是否继续?", "提示", {
......
<!--
* @Description:
* @Autor: renchao
* @Autor: miaofang
* @LastEditTime: 2023-08-23 15:54:12
-->
<template>
<div class="djxxTable">
<div v-show="false">
<printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
<printTemplate
id="boxjsydsyq"
:propsParam="propsParam"
:tableData="tableData"
:render="render"
/>
</div>
<div class="tableBox">
<div class="title">
{{ title }}
<el-button class="print" v-show="shows" v-print="printObj">打印</el-button>
<el-button class="print" v-show="shows" @click="openPrint()"
>打印</el-button
>
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox
......@@ -115,7 +122,7 @@ export default {
id: "box",
//其他配置项，
},
shows:false,
shows: false,
title: "建设用地使用权、宅基地使用权登记信息",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
......@@ -127,6 +134,7 @@ export default {
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: datas.columns().JSYDSYQ,
render: false,
};
},
created() {
......@@ -134,11 +142,39 @@ export default {
},
methods: {
/**
* @description: openPrint
* @author: miaofang
*/
openPrint() {
this.render = true;
setTimeout(() => {
this.prinsss();
}, 100);
},
/**
* @description: prinsss
* @author: miaofang
*/
prinsss() {
printJS({
printable: "boxjsydsyq", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: "html",
maxWidth: 800, // 最大宽度
font_size: "", // 不设置则使用默认字体大小
style: `@font-face {
font-family: "STZHONGS";
src: url(${window.ttf}) format("truetype");
}`,
// 继承原来的所有样式
targetStyles: ["*"],
});
this.render=false
},
/**
* @description: loadData
* @author: renchao
* @author: miaofang
*/
loadData() {
getJsydsyqList({
bdcdyid: this.propsParam.bdcdyid,
qllx: this.propsParam.qllx,
......@@ -146,7 +182,7 @@ export default {
}).then((res) => {
if (res.code === 200) {
this.tableData = res.result;
this.shows=this.tableData.length>0
this.shows = this.tableData.length > 0;
this.tableData.forEach((item) => {
item.sjlx = getSjlx(item.sjlx);
});
......@@ -161,7 +197,7 @@ export default {
},
/**
* @description: checkChange
* @author: renchao
* @author: miaofang
*/
checkChange() {
if (this.checkList.length === 0) {
......@@ -174,7 +210,7 @@ export default {
/**
* @description: getQsztName
* @param {*} code
* @author: renchao
* @author: miaofang
*/
getQsztName(code) {
let name = "";
......@@ -191,7 +227,7 @@ export default {
* @description: 新增一条补录信息
* @param {*} row
* @param {*} del
* @author: renchao
* @author: miaofang
*/
editDialog(row, del) {
this.$confirm("此操作将新增一条补录信息, 是否继续?", "提示", {
......@@ -220,7 +256,7 @@ export default {
<style lang="scss" scoped>
@import "./qlxxCommon.scss";
.title {
.title {
position: relative;
.print {
// background-color: #0079fe;
......
<!--
* @Description:
* @Autor: renchao
* @Autor: miaofang
* @LastEditTime: 2023-08-23 15:54:12
-->
<template>
<div class="djxxTable">
<div v-show="false">
<printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
<printTemplate
id="boxldsyq"
:propsParam="propsParam"
:tableData="tableData"
:render="render"
/>
</div>
<div class="tableBox">
<div class="title">
{{ title }}
<el-button class="print" v-show="shows" v-print="printObj">打印</el-button>
<el-button class="print" v-show="shows" @click="openPrint()"
>打印</el-button
>
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox
......@@ -113,7 +120,7 @@ export default {
id: "box",
//其他配置项，
},
shows:false,
shows: false,
title: "林权登记信息",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
......@@ -125,6 +132,7 @@ export default {
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: datas.columns().LDSYQ,
render: false,
};
},
created() {
......@@ -132,8 +140,37 @@ export default {
},
methods: {
/**
* @description: openPrint
* @author: miaofang
*/
openPrint() {
this.render = true;
setTimeout(() => {
this.prinsss();
}, 100);
},
/**
* @description: prinsss
* @author: miaofang
*/
prinsss() {
printJS({
printable: "boxldsyq", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: "html",
maxWidth: 800, // 最大宽度
font_size: "", // 不设置则使用默认字体大小
style: `@font-face {
font-family: "STZHONGS";
src: url(${window.ttf}) format("truetype");
}`,
// 继承原来的所有样式
targetStyles: ["*"],
});
this.render=false
},
/**
* @description: loadData
* @author: renchao
* @author: miaofang
*/
loadData() {
if (this.$parent.addRepairRecord) {
......@@ -149,7 +186,7 @@ export default {
}).then((res) => {
if (res.code === 200) {
this.tableData = res.result;
this.shows=this.tableData.length>0
this.shows = this.tableData.length > 0;
this.tableData.forEach((item) => {
item.sjlx = getSjlx(item.sjlx);
item.ldsyqxz = getDictLeabel(item.ldsyqxz, "A45");
......@@ -167,7 +204,7 @@ export default {
},
/**
* @description: checkChange
* @author: renchao
* @author: miaofang
*/
checkChange() {
if (this.checkList.length === 0) {
......@@ -180,7 +217,7 @@ export default {
/**
* @description: getQsztName
* @param {*} code
* @author: renchao
* @author: miaofang
*/
getQsztName(code) {
let name = "";
......@@ -197,7 +234,7 @@ export default {
* @description: 新增一条补录信息
* @param {*} row
* @param {*} del
* @author: renchao
* @author: miaofang
*/
editDialog(row, del) {
this.$confirm("此操作将新增一条补录信息, 是否继续?", "提示", {
......
<!--
* @Description:
* @Autor: renchao
* @Autor: miaofang
* @LastEditTime: 2023-08-23 15:54:12
-->
<template>
<div class="djxxTable">
<div v-show="false">
<printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
<printTemplate
id="boxnydsyq"
:propsParam="propsParam"
:tableData="tableData"
:render="render"
/>
</div>
<div class="tableBox">
<div class="title">
{{ title }}
<el-button class="print" v-show="shows" v-print="printObj">打印</el-button>
<el-button class="print" v-show="shows" @click="openPrint()"
>打印</el-button
>
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox
......@@ -162,7 +169,7 @@ export default {
id: "box",
//其他配置项，
},
shows:false,
shows: false,
title: "农用地使用权登记信息",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
......@@ -174,6 +181,7 @@ export default {
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: datas.columns().NYDSYQ,
render: false,
};
},
created() {
......@@ -187,8 +195,37 @@ export default {
},
methods: {
/**
* @description: openPrint
* @author: miaofang
*/
openPrint() {
this.render = true;
setTimeout(() => {
this.prinsss();
}, 100);
},
/**
* @description: prinsss
* @author: miaofang
*/
prinsss() {
printJS({
printable: "boxnydsyq", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: "html",
maxWidth: 800, // 最大宽度
font_size: "", // 不设置则使用默认字体大小
style: `@font-face {
font-family: "STZHONGS";
src: url(${window.ttf}) format("truetype");
}`,
// 继承原来的所有样式
targetStyles: ["*"],
});
this.render=false
},
/**
* @description: loadData
* @author: renchao
* @author: miaofang
*/
loadData() {
if (this.$parent.addRepairRecord) {
......@@ -204,7 +241,7 @@ export default {
}).then((res) => {
if (res.code === 200) {
this.tableData = res.result;
this.shows=this.tableData.length>0
this.shows = this.tableData.length > 0;
this.tableData.forEach((item) => {
item.sjlx = getSjlx(item.sjlx);
});
......@@ -219,7 +256,7 @@ export default {
},
/**
* @description: checkChange
* @author: renchao
* @author: miaofang
*/
checkChange() {
if (this.checkList.length === 0) {
......@@ -231,7 +268,7 @@ export default {
},
/**
* @description: getQsztName
* @author: renchao
* @author: miaofang
*/
getQsztName(code) {
let name = "";
......@@ -248,7 +285,7 @@ export default {
* @description: 新增一条补录信息
* @param {*} row
* @param {*} del
* @author: renchao
* @author: miaofang
*/
editDialog(row, del) {
this.$confirm("此操作将新增一条补录信息, 是否继续?", "提示", {
......
......@@ -10,24 +10,33 @@
-->
<!--
* @Description:
* @Autor: renchao
* @Autor: miaofang
* @LastEditTime: 2023-08-11 15:33:53
-->
<template>
<div class="djxxTable">
<div v-show="false">
<printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
<printTemplate
id="boxsllmsyq"
:propsParam="propsParam"
:tableData="tableData"
:render="render"
/>
</div>
<div class="tableBox">
<div class="title">
{{ title }}
<el-button class="print" v-show="shows" v-print="printObj">打印</el-button>
<el-button class="print" v-show="shows" @click="openPrint()"
>打印</el-button
>
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox
v-for="item in qsztList"
:key="item.value"
:label="item.value">{{ item.label }}</el-checkbox>
:label="item.value"
>{{ item.label }}</el-checkbox
>
</el-checkbox-group>
</div>
</div>
......@@ -47,33 +56,60 @@
item.prop == 'qszt' && row.qlzt == '3' ? 'linshiIcon' : '',
item.prop == 'qszt' && row.qlzt == '2' ? 'linshiIcon' : '',
item.prop == 'qszt' && row.qlzt == '1' ? 'xianshiIcon' : '',
item.prop == 'qszt' && row.qlzt == '4' ? 'zhuxiaoIcon' : ''
]">
<div class="setbut" v-if="item.prop == 'cz'&&row.sjlx !='系统数据'">
<el-button type="text" icon="el-icon-edit-outline" @click="editDialog(row)">编辑</el-button>
<el-button type="text" icon="el-icon-edit-outline" @click="editDialog(row,'D')">删除</el-button>
item.prop == 'qszt' && row.qlzt == '4' ? 'zhuxiaoIcon' : '',
]"
>
<div
class="setbut"
v-if="item.prop == 'cz' && row.sjlx != '系统数据'"
>
<el-button
type="text"
icon="el-icon-edit-outline"
@click="editDialog(row)"
>编辑</el-button
>
<el-button
type="text"
icon="el-icon-edit-outline"
@click="editDialog(row, 'D')"
>删除</el-button
>
</div>
<div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '1'">
有效
</div>
<div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '2'">
正在补录
</div>
<div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '3'">
正在申请
</div>
<div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '4'">
正在注销
</div>
<div class="icon" v-if="item.prop == 'qszt' &&row.qlzt == '1'">有效</div>
<div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '2'">正在补录</div>
<div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '3'">正在申请</div>
<div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '4'">正在注销</div>
<!-- <span v-if="item.prop == 'qszt'">{{ getQsztName(row[item.prop]) }}</span>
<span v-else>{{ row[item.prop] }}</span> -->
<p v-if="!['djyy','fj'].includes(item.prop)">
<p v-if="!['djyy', 'fj'].includes(item.prop)">
<span v-if="item.prop == 'qszt'">
{{ getQsztName(row[item.prop]) }}
</span>
<span v-else>{{ row[item.prop] }}</span>
</p>
<el-tooltip v-else effect="dark" :content="row[item.prop]" placement="top" popper-class="tooltip-width">
<el-tooltip
v-else
effect="dark"
:content="row[item.prop]"
placement="top"
popper-class="tooltip-width"
>
<span class="ellipsis-line">
{{ row[item.prop] }}
</span>
</el-tooltip>
</td>
<td v-for="count in emptycolNum" :key="~count"></td>
</tr>
......@@ -84,9 +120,9 @@
</template>
<script>
import { datas } from "./qlxxFormData.js";
import { getSjlx } from "@/utils/dictionary.js";
import { getLqList } from "@/api/djbDetail.js";
import { datas } from "./qlxxFormData.js";
import { getSjlx } from "@/utils/dictionary.js";
import { getLqList } from "@/api/djbDetail.js";
import printTemplate from "./components/printTemplate.vue";
export default {
components: {
......@@ -98,7 +134,7 @@ export default {
id: "box",
//其他配置项，
},
shows:false,
shows: false,
title: "林权登记信息",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
......@@ -110,17 +146,47 @@ export default {
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: datas.columns().LDSYQ,
render: false,
};
},
created () {
created() {
this.loadData();
},
methods: {
/**
* @description: openPrint
* @author: miaofang
*/
openPrint() {
this.render = true;
setTimeout(() => {
this.prinsss();
}, 100);
},
/**
* @description: prinsss
* @author: miaofang
*/
prinsss() {
printJS({
printable: "boxsllmsyq", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: "html",
maxWidth: 800, // 最大宽度
font_size: "", // 不设置则使用默认字体大小
style: `@font-face {
font-family: "STZHONGS";
src: url(${window.ttf}) format("truetype");
}`,
// 继承原来的所有样式
targetStyles: ["*"],
});
this.render=false
},
/**
* @description: loadData
* @author: renchao
* @author: miaofang
*/
loadData () {
loadData() {
if (this.$parent.addRepairRecord) {
this.columns.unshift({
prop: "cz",
......@@ -134,7 +200,7 @@ export default {
}).then((res) => {
if (res.code === 200) {
this.tableData = res.result;
this.shows=this.tableData.length>0
this.shows = this.tableData.length > 0;
this.tableData.forEach((item) => {
item.sjlx = getSjlx(item.sjlx);
});
......@@ -149,9 +215,9 @@ export default {
},
/**
* @description: checkChange
* @author: renchao
* @author: miaofang
*/
checkChange () {
checkChange() {
if (this.checkList.length === 0) {
this.tableData = [];
this.emptycolNum = datas.columns().emptycolNum;
......@@ -162,9 +228,9 @@ export default {
/**
* @description: getQsztName
* @param {*} code
* @author: renchao
* @author: miaofang
*/
getQsztName (code) {
getQsztName(code) {
let name = "";
for (let item of this.qsztList) {
if (item.value == code) {
......@@ -179,9 +245,9 @@ export default {
* @description: 新增一条补录信息
* @param {*} row
* @param {*} del
* @author: renchao
* @author: miaofang
*/
editDialog (row, del) {
editDialog(row, del) {
this.$confirm("此操作将新增一条补录信息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
......@@ -203,12 +269,12 @@ export default {
});
},
},
};
};
</script>
<style lang="scss" scoped>
@import "./qlxxCommon.scss";
.title {
<style lang="scss" scoped>
@import "./qlxxCommon.scss";
.title {
position: relative;
.print {
// background-color: #0079fe;
......
<!--
* @Description:
* @Autor: renchao
* @Autor: miaofang
* @LastEditTime: 2023-08-23 15:54:12
-->
<template>
<div class="djxxTable">
<div v-show="false">
<printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
<printTemplate id="boxtdsyq" :propsParam="propsParam" :tableData="tableData" :render="render"/>
</div>
<div class="tableBox">
<div class="title">
{{ title }}
<el-button class="print" v-show="shows" v-print="printObj">打印</el-button>
<el-button class="print" v-show="shows" @click="openPrint()">打印</el-button>
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox v-for="item in qsztList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
......@@ -100,15 +100,37 @@ export default {
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: datas.columns().TDSYQ,
render:false
};
},
created () {
this.loadData();
},
methods: {
openPrint(){
this.render=true
setTimeout(() => {
this.prinsss()
}, 100)
},
prinsss(){
printJS({
printable: "boxtdsyq", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: "html",
maxWidth: 800, // 最大宽度
font_size: "", // 不设置则使用默认字体大小
style: `@font-face {
font-family: "STZHONGS";
src: url(${window.ttf}) format("truetype");
}`,
// 继承原来的所有样式
targetStyles: ["*"]
});
this.render=false
},
/**
* @description: loadData
* @author: renchao
* @author: miaofang
*/
loadData () {
......@@ -140,7 +162,7 @@ export default {
},
/**
* @description: checkChange
* @author: renchao
* @author: miaofang
*/
checkChange () {
if (this.checkList.length === 0) {
......@@ -153,7 +175,7 @@ export default {
/**
* @description: getQsztName
* @param {*} code
* @author: renchao
* @author: miaofang
*/
getQsztName (code) {
let name = "";
......@@ -170,7 +192,7 @@ export default {
* @description: 新增一条补录信息
* @param {*} row
* @param {*} del
* @author: renchao
* @author: miaofang
*/
editDialog (row, del) {
this.$confirm('此操作将新增一条补录信息, 是否继续?', '提示', {
......
<!--
* @Description:
* @Autor: renchao
* @Autor: miaofang
* @LastEditTime: 2023-08-23 15:54:12
-->
<template>
<div class="djxxTable">
<div v-show="false">
<printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
<printTemplate id="boxygdj" :propsParam="propsParam" :tableData="tableData" :render="render"/>
</div>
<div class="tableBox">
<div class="title">
{{ title }}
<el-button class="print" v-show="shows" v-print="printObj">打印</el-button>
<el-button class="print" v-show="shows" @click="openPrint()">打印</el-button>
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox
......@@ -108,10 +108,10 @@ export default {
},
data() {
return {
printObj: {
id: "box",
//其他配置项，
},
// printObj: {
// id: "box",
// //其他配置项，
// },
shows:false,
title: "预告登记信息",
qsztList: datas.columns().qsztList,
......@@ -124,15 +124,37 @@ export default {
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: datas.columns().YGDJ,
render:false
};
},
created() {
this.loadData();
},
methods: {
openPrint(){
this.render=true
setTimeout(() => {
this.prinsss()
}, 100)
},
prinsss(){
printJS({
printable: "boxygdj", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: "html",
maxWidth: 800, // 最大宽度
font_size: "", // 不设置则使用默认字体大小
style: `@font-face {
font-family: "STZHONGS";
src: url(${window.ttf}) format("truetype");
}`,
// 继承原来的所有样式
targetStyles: ["*"]
});
this.render=false
},
/**
* @description: loadData
* @author: renchao
* @author: miaofang
*/
loadData() {
// 判断是否在登记簿补录调的子页面
......@@ -165,7 +187,7 @@ export default {
},
/**
* @description: checkChange
* @author: renchao
* @author: miaofang
*/
checkChange() {
if (this.checkList.length === 0) {
......@@ -178,7 +200,7 @@ export default {
/**
* @description: getQsztName
* @param {*} code
* @author: renchao
* @author: miaofang
*/
getQsztName(code) {
let name = "";
......@@ -195,7 +217,7 @@ export default {
* @description: 新增一条补录信息
* @param {*} row
* @param {*} del
* @author: renchao
* @author: miaofang
*/
editDialog(row, del) {
this.$confirm("此操作将新增一条补录信息, 是否继续?", "提示", {
......
<!--
* @Description:
* @Autor: renchao
* @Autor: miaofang
* @LastEditTime: 2023-08-23 15:54:12
-->
<template>
<div class="djxxTable">
<div v-show="false">
<printTemplate id="box" :propsParam="propsParam" :tableData="tableData"/>
<printTemplate
id="boxyydj"
:propsParam="propsParam"
:tableData="tableData"
:render="render"
/>
</div>
<div class="tableBox">
<div class="title">
{{ title }}
<el-button class="print" v-show="shows" v-print="printObj">打印</el-button>
<el-button class="print" v-show="shows" @click="openPrint()"
>打印</el-button
>
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox v-for="item in qsztList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
<el-checkbox
v-for="item in qsztList"
:key="item.value"
:label="item.value"
>{{ item.label }}</el-checkbox
>
</el-checkbox-group>
</div>
</div>
......@@ -24,7 +36,10 @@
<td>
{{ item.label }}
</td>
<td v-for="(row, index) in tableData" :key="index" :class="[
<td
v-for="(row, index) in tableData"
:key="index"
:class="[
row.qszt == '2' ? 'lishi' : '',
row.qszt == '0' ? 'linshi' : '',
row.qlzt == '4' ? 'linshi' : '',
......@@ -32,13 +47,24 @@
item.prop == 'qszt' && row.qlzt == '3' ? 'linshiIcon' : '',
item.prop == 'qszt' && row.qlzt == '2' ? 'linshiIcon' : '',
item.prop == 'qszt' && row.qlzt == '1' ? 'xianshiIcon' : '',
item.prop == 'qszt' && row.qlzt == '4' ? 'zhuxiaoIcon' : ''
]">
item.prop == 'qszt' && row.qlzt == '4' ? 'zhuxiaoIcon' : '',
]"
>
<div class="setbut" v-if="item.prop == 'cz'">
<el-button type="text" icon="el-icon-edit-outline" @click="editDialog(row)">编辑</el-button>
<el-button type="text" icon="el-icon-edit-outline" @click="editDialog(row,'D')">删除</el-button>
<el-button
type="text"
icon="el-icon-edit-outline"
@click="editDialog(row)"
>编辑</el-button
>
<el-button
type="text"
icon="el-icon-edit-outline"
@click="editDialog(row, 'D')"
>删除</el-button
>
</div>
<div class="icon" v-if="item.prop == 'qszt' &&row.qlzt == '1'">
<div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '1'">
有效
</div>
<div class="icon" v-if="item.prop == 'qszt' && row.qlzt == '2'">
......@@ -51,14 +77,20 @@
正在注销
</div>
<p v-if="!['djyy','fj'].includes(item.prop)">
<p v-if="!['djyy', 'fj'].includes(item.prop)">
<span v-if="item.prop == 'qszt'">
{{ getQsztName(row[item.prop]) }}
</span>
<span v-else>{{ row[item.prop] }}</span>
</p>
<el-tooltip v-else effect="dark" :content="row[item.prop]" placement="top" popper-class="tooltip-width">
<el-tooltip
v-else
effect="dark"
:content="row[item.prop]"
placement="top"
popper-class="tooltip-width"
>
<span class="ellipsis-line">
{{ row[item.prop] }}
</span>
......@@ -73,9 +105,9 @@
</template>
<script>
import { datas } from "./qlxxFormData.js";
import { getYydjList } from "@/api/djbDetail.js";
import { getSjlx, getDictLeabel } from "@/utils/dictionary.js";
import { datas } from "./qlxxFormData.js";
import { getYydjList } from "@/api/djbDetail.js";
import { getSjlx, getDictLeabel } from "@/utils/dictionary.js";
import printTemplate from "./components/printTemplate.vue";
export default {
components: {
......@@ -87,7 +119,7 @@ export default {
id: "box",
//其他配置项，
},
shows:false,
shows: false,
title: "异议登记信息",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
......@@ -99,22 +131,44 @@ export default {
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: datas.columns().YYDJ,
render: false,
};
},
created () {
created() {
this.loadData();
},
methods: {
openPrint() {
this.render = true;
setTimeout(() => {
this.prinsss();
}, 100);
},
prinsss() {
printJS({
printable: "boxyydj", // // 文档来源：pdf或图像的url，html元素的id或json数据的对象
type: "html",
maxWidth: 800, // 最大宽度
font_size: "", // 不设置则使用默认字体大小
style: `@font-face {
font-family: "STZHONGS";
src: url(${window.ttf}) format("truetype");
}`,
// 继承原来的所有样式
targetStyles: ["*"],
});
this.render=false
},
/**
* @description: loadData
* @author: renchao
* @author: miaofang
*/
loadData () {
loadData() {
if (this.$parent.addRepairRecord) {
this.columns.unshift({
prop: "cz",
label: "操作"
})
label: "操作",
});
}
getYydjList({
bdcdyid: this.propsParam.bdcdyid,
......@@ -123,10 +177,10 @@ export default {
}).then((res) => {
if (res.code === 200) {
this.tableData = res.result;
this.shows=this.tableData.length>0
this.shows = this.tableData.length > 0;
this.tableData.forEach((item) => {
item.sjlx = getSjlx(item.sjlx);
item.dybdclx = getDictLeabel(item.dybdclx, 'A27')
item.dybdclx = getDictLeabel(item.dybdclx, "A27");
});
if (this.tableData.length < datas.columns().emptycolNum) {
this.emptycolNum =
......@@ -139,9 +193,9 @@ export default {
},
/**
* @description: checkChange
* @author: renchao
* @author: miaofang
*/
checkChange () {
checkChange() {
if (this.checkList.length === 0) {
this.tableData = [];
this.emptycolNum = datas.columns().emptycolNum;
......@@ -152,9 +206,9 @@ export default {
/**
* @description: getQsztName
* @param {*} code
* @author: renchao
* @author: miaofang
*/
getQsztName (code) {
getQsztName(code) {
let name = "";
for (let item of this.qsztList) {
if (item.value == code) {
......@@ -169,35 +223,36 @@ export default {
* @description: 新增一条补录信息
* @param {*} row
* @param {*} del
* @author: renchao
* @author: miaofang
*/
editDialog (row, del) {
this.$confirm('此操作将新增一条补录信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$parent.addRepairRecord(row, del)
editDialog(row, del) {
this.$confirm("此操作将新增一条补录信息, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$parent.addRepairRecord(row, del);
this.$message({
type: 'success',
message: '补录成功!'
type: "success",
message: "补录成功!",
});
}).catch(() => {
})
.catch(() => {
this.$message({
type: 'info',
message: '取消编辑'
type: "info",
message: "取消编辑",
});
});
},
},
};
};
</script>
<style lang="scss" scoped>
@import "./qlxxCommon.scss";
.title {
@import "./qlxxCommon.scss";
.title {
position: relative;
.print {
// background-color: #0079fe;
......
<!--
* @Description:
* @Autor: miaofang
* @LastEditTime: 2023-07-19 09:52:42
-->
<template>
<div class="fm" id="boxaaa">
<div class="title">不动产登记簿</div>
<div class="title">(回执)</div>
<p class="bian">
编号: <span>{{ Receiptdata.sldyList[0].ybdcqzsh||"" }}</span>
</p>
<div class="texts">
<p class="jsjg">{{ Receiptdata.cfdjList[0].cfjg }}:</p>
<p class="concent">
<span>{{ sj }}</span> ，你院协助执行通知书订单号为:<font>{{
Receiptdata.qlxxList[0].ywh||""
}}</font
>收悉，具体执行情况如下。
</p>
</div>
<p class="bian">{{ Receiptdata.user.organizationName }}</p>
<p class="bian">{{ sj }}（盖章）</p>
<table class="xxTable">
<tr>
<td>序号</td>
<td>坐落</td>
<td>控制反馈</td>
<td>控制措施</td>
</tr>
<tr v-for="(item, index) in Receiptdata.sldyList" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.zl }}</td>
<td>已控</td>
<td>{{ item.djlxmc }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
props: {
Receiptdata: {
type: Object,
default: {},
},
},
data() {
return {
sj: "",
data:false
};
},
mounted() {
this.loadData();
},
watch: {
Receiptdata: {
handler(newValue, oldValue) {
this.$nextTick(() => {
this.Receiptdata = newValue;
this.loadData();
});
},
},
},
methods: {
/**
* @description: loadData
* @author: miaofang
*/
loadData() {
let dateTime = new Date(this.Receiptdata.slsq.slsj);
let y = dateTime.getFullYear();
let m = dateTime.getMonth() + 1;
m = m < 10 ? "0" + m : m;
let d = dateTime.getDate();
d = d < 10 ? "0" + d : d;
let h = dateTime.getHours();
h = h < 10 ? "0" + h : h;
let M = dateTime.getMinutes();
M = M < 10 ? "0" + M : M;
let s = dateTime.getSeconds();
s = s < 10 ? "0" + s : s;
this.sj = y + "年" + m + "月" + d + "日";
},
},
};
</script>
<style lang="scss" scoped>
#boxaaa{
font {
border-bottom: 1px solid #000;
display: inline-block;
padding: 0 15px;
line-height: 16px;
}
.title {
height: 60px;
display: flex;
font-size: 32px;
color: #000;
justify-content: center;
align-items: center;
}
.bian {
text-align: right;
}
.texts{
margin-top: 40px;
margin-bottom: 40px;
}
.jsjg {
text-align: left;
}
.concent {
width: 100%;
line-height: 40px;
text-align: left;
text-indent: 2em;
}
p {
font-family: serif;
}
.xxTable {
width: 100%;
border-collapse: collapse;
font-family: serif;
margin-top: 20px;
tr td {
border: 1px solid #000;
text-align: center;
height: 40px;
line-height: 17px;
font-size: 13px;
min-width: 80px;
z-index: 1;
min-width: 80px;
padding: 5px;
}
}
}
.fm {
background: #fff;
font-size: 18px;
margin: auto;
}
</style>
......@@ -17,8 +17,10 @@ import {
unClaimTask,
getZdInfo
} from "@/api/workFlow.js";
import { getZrzbsmList } from "@/api/search.js";
import { ywPopupDialog } from "@/utils/popup.js";
export default {
data () {
return {
......@@ -73,7 +75,7 @@ export default {
* @author: renchao
*/
operation (item) {
//按钮 B0:选择不动产单元 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6：打印申请书 B7:证书领取 B8:楼盘表 B9:登簿
//按钮 B0:选择不动产单元 B1:流程图 B2:材料分屏 B3:材料导入 B4:登记簿 B5:证书预览 B6：打印申请书 B7:证书领取 B8:楼盘表 B9:登簿,B10:打印回执
//操作按钮 登簿：record 转件：transfer 退回：back 退出：signout
let that = this;
switch (item.value) {
......@@ -237,6 +239,8 @@ export default {
})
})
break;
case "B10":
break;
case "rm":
this.del()
break;
......
......@@ -210,7 +210,15 @@
box-sizing: border-box;
width: 70px;
margin: 0 5px;
div{
@include flex-center;
cursor: pointer;
flex-direction: column;
margin-right: 15px;
box-sizing: border-box;
width: 70px;
margin: 0 5px;
}
.icon {
font-size: 10px;
}
......