Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
5c4fe127 by 任超
Options

style:业务报文

1 parent 6a94d1b2
Inline Side-by-side
Showing 9 changed files with 109 additions and 120 deletions
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
20 "nprogress": "0.2.0", 20 "nprogress": "0.2.0",
21 "vue": "2.6.10", 21 "vue": "2.6.10",
22 "vue-awesome": "^4.5.0", 22 "vue-awesome": "^4.5.0",
23 "vue-json-editor": "^1.4.3",
23 "vue-router": "3.0.2", 24 "vue-router": "3.0.2",
24 "vuex": "3.1.0" 25 "vuex": "3.1.0"
25 }, 26 },
......
1 <template>
2 <vue-json-editor v-model="resultInfo" :showBtns="false" :mode="'code'" lang="zh" @json-change="onJsonChange"
3 @json-save="onJsonSave" />
4 </template>
5 <script>
6 // 引入json编译器
7 import vueJsonEditor from 'vue-json-editor'
8 export default {
9 components: {
10 vueJsonEditor
11 },
12 data () {
13 return {
14 myValue: this.value,
15 resultInfo: {
16 "userId": "1111111129ac7325-30da-4e6a-8a00-9699820fc04a",
17 "realName": "小雪18",
18 "gradeCode": "166",
19 "provinceCode": "110000",
20 "cityCode": {
21 "test1": "test1",
22 "test2": "test2"
23 },
24 "schoolId": 21,
25 "schoolLevel": 1,
26 "schoolName": "北京第二实验小学朝阳学校"
27 },
28 }
29 },
30 methods: {
31 onJsonChange (value) {
32 console.log('value:', value);
33 },
34 onJsonSave (value) {
35 console.log('value:', value);
36 }
37 }
38 }
39
40 </script>
41
42 <style>
43 /* jsoneditor右上角默认有一个链接,加css去掉了 */
44 .jsoneditor-poweredBy {
45 display: none;
46 }
47
48 .jsoneditor-vue {
49 height: 300px;
50 }
51 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -119,7 +119,6 @@ export default { ...@@ -119,7 +119,6 @@ export default {
119 // 单选 119 // 单选
120 singleElection (row) { 120 singleElection (row) {
121 this.selected = this.data.indexOf(row); 121 this.selected = this.data.indexOf(row);
122 console.log(this.selected);
123 }, 122 },
124 123
125 tableRowClassName ({ row, rowIndex }) { 124 tableRowClassName ({ row, rowIndex }) {
......
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Popup from './index.vue' 2 import Popup from './index.vue'
3
4 const PopupBox = Vue.extend(Popup) 3 const PopupBox = Vue.extend(Popup)
5 Popup.install = function (title, editItem, data, formData) { 4 let popuping = undefined
5
6 PopupBox.prototype.close = function () {
7 // 如果Popup 有引用，则去掉引用
8 if (popuping) {
9 popuping = undefined
10 }
11 // 先将组件隐藏
12 this.isShow = false
13 // 延迟300毫秒，等待Popup关闭动画执行完之后销毁组件
14 setTimeout(() => {
15 // 移除挂载的dom元素
16 if (this.$el && this.$el.parentNode) {
17 this.$el.parentNode.removeChild(this.$el)
18 }
19 }, 300)
20 }
21
22 const Popup1 = (title, editItem, data, formData) => {
23 // 如果组件已渲染，则返回即可
24 if (popuping) {
25 return popuping
26 }
6 data.title = title 27 data.title = title
7 data.editItem = editItem 28 data.editItem = editItem
8 if (formData) { 29 if (formData) {
9 data.formData = formData 30 data.formData = formData
10 } 31 }
32 // 通过构造函数初始化组件 相当于 new Vue()
11 let instance = new PopupBox({ 33 let instance = new PopupBox({
12 data 34 data
13 }).$mount() 35 }).$mount()
...@@ -15,6 +37,8 @@ Popup.install = function (title, editItem, data, formData) { ...@@ -15,6 +37,8 @@ Popup.install = function (title, editItem, data, formData) {
15 Vue.nextTick(() => { 37 Vue.nextTick(() => {
16 instance.isShow = true 38 instance.isShow = true
17 }) 39 })
40 // 将组件实例赋值给loading
41 popuping = instance
42 return instance
18 } 43 }
19 44 export default Popup1
20 export default Popup
......
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
21 </transition> 21 </transition>
22 </template> 22 </template>
23 <script> 23 <script>
24 import Popup1 from './index'
24 export default { 25 export default {
25 name: 'index', 26 name: 'index',
26 data () { 27 data () {
...@@ -74,8 +75,7 @@ export default { ...@@ -74,8 +75,7 @@ export default {
74 }, 75 },
75 methods: { 76 methods: {
76 onCancel () { 77 onCancel () {
77 this.isShow = false 78 Popup1().close()
78 this.cancel()
79 }, 79 },
80 onConfirm () { 80 onConfirm () {
81 this.loading = true 81 this.loading = true
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
93 loadViewFn (view) { 93 loadViewFn (view) {
94 return (r) => 94 return (r) =>
95 require.ensure([], () => 95 require.ensure([], () =>
96 r(require(`@/views/${view}.vue`)) 96 r(require(`@/${view}.vue`))
97 ) 97 )
98 } 98 }
99 }, 99 },
...@@ -108,7 +108,7 @@ export default { ...@@ -108,7 +108,7 @@ export default {
108 .ls-mask { 108 .ls-mask {
109 width: 100%; 109 width: 100%;
110 height: 100%; 110 height: 100%;
111 z-index: 100; 111 z-index: 2000;
112 position: fixed; 112 position: fixed;
113 left: 0; 113 left: 0;
114 top: 0; 114 top: 0;
...@@ -131,10 +131,15 @@ export default { ...@@ -131,10 +131,15 @@ export default {
131 padding-left: 5px; 131 padding-left: 5px;
132 } 132 }
133 133
134 /deep/.closeStyle {
135 top: 7px !important;
136 }
137
134 .ls-title { 138 .ls-title {
135 padding: 16px; 139 padding: 10px;
136 color: #ffffff; 140 color: #ffffff;
137 background: linear-gradient(3deg, #409EFF, #a7cbee); 141 background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
142 font-size: 16px;
138 } 143 }
139 144
140 .ls-title .svg-icon { 145 .ls-title .svg-icon {
...@@ -142,11 +147,11 @@ export default { ...@@ -142,11 +147,11 @@ export default {
142 } 147 }
143 148
144 .mask-content { 149 .mask-content {
145 padding: 20px; 150 padding: 15px;
146 width: 100%; 151 width: 100%;
147 min-height: 30%; 152 min-height: 20%;
148 max-height: 95%; 153 max-height: 95%;
149 overflow-y: scroll; 154 // overflow-y: scroll;
150 } 155 }
151 156
152 .ls-mask-footer { 157 .ls-mask-footer {
...@@ -182,4 +187,3 @@ export default { ...@@ -182,4 +187,3 @@ export default {
182 width: 75px; 187 width: 75px;
183 } 188 }
184 </style> 189 </style>
185
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -22,6 +22,12 @@ import 'vue-awesome/icons/align-left.js'; ...@@ -22,6 +22,12 @@ import 'vue-awesome/icons/align-left.js';
22 Vue.prototype.$startLoading = startLoadingAddCount 22 Vue.prototype.$startLoading = startLoadingAddCount
23 Vue.prototype.$endLoading = endLoadingSubCount 23 Vue.prototype.$endLoading = endLoadingSubCount
24 24
25 // 弹框
26 import { popupDialog, popupCacel } from "@/utils/popup.js";
27 // 全局加载
28 Vue.prototype.$popupDialog = popupDialog
29 Vue.prototype.$popupCacel = popupCacel
30
25 import { theme } from "@/directive/theme.js" 31 import { theme } from "@/directive/theme.js"
26 Vue.directive("theme", theme) 32 Vue.directive("theme", theme)
27 Vue.directive('fo', { 33 Vue.directive('fo', {
......
1 import Popup from '@/components/Popup/index' 1 import Popup from '@/components/Popup/index'
2 export function popupDialog (title, url, params, width = '75%', height, btnShow = false, callback) { 2 export function popupDialog (title, url, params, width = '75%', height, btnShow = false, callback) {
3 Popup.install(title, url, { 3 // Popup.install
4 Popup(title, url, {
4 height: height, 5 height: height,
5 width: width, 6 width: width,
6 formData: params, 7 formData: params,
...@@ -13,3 +14,7 @@ export function popupDialog (title, url, params, width = '75%', height, btnShow ...@@ -13,3 +14,7 @@ export function popupDialog (title, url, params, width = '75%', height, btnShow
13 } 14 }
14 }) 15 })
15 } 16 }
17
18 export function popupCacel () {
19 Popup1().close()
20 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <template>
2 <!-- 编辑 -->
3 <dialogBox title="详情" @closeDialog="closeDialog" @submitForm="handleSubmit" v-model="myValue">
4 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
5 <el-row>
6 <el-col :span="6">
7 <el-form-item label="行政区代码" prop="xzqdm">
8 <el-input v-model="ruleForm.xzqdm" placeholder="行政区代码"></el-input>
9 </el-form-item>
10 </el-col>
11 <el-col :span="6">
12 <el-form-item label="行政区名称" prop="xzqmc">
13 <el-input v-model="ruleForm.xzqmc" placeholder="行政区名称"></el-input>
14 </el-form-item>
15 </el-col>
16 <el-col :span="6">
17 <el-form-item label="不动产单元号" prop="bdcdyh">
18 <el-input v-model="ruleForm.bdcdyh" placeholder="不动产单元号"></el-input>
19 </el-form-item>
20 </el-col>
21 <el-col :span="6">
22 <el-form-item label="业务名称" prop="ywmc">
23 <el-input v-model="ruleForm.ywmc" placeholder="业务名称"></el-input>
24 </el-form-item>
25 </el-col>
26 </el-row>
27 <el-row>
28 <el-col :span="6">
29 <el-form-item label="操作时间" prop="czsj">
30 <el-date-picker v-model="ruleForm.czsj" class="width100" type="datetime" placeholder="操作时间">
31 </el-date-picker>
32 </el-form-item>
33 </el-col>
34 </el-row>
35 </el-form>
36 </dialogBox>
37 </template>
38
39 <script>
40 export default {
41 props: {
42 value: { type: Boolean, default: false },
43 },
44 data () {
45 return {
46 myValue: this.value,
47 ruleForm: {
48 xzqdm: '',
49 xzqmc: '',
50 bdcdyh: '',
51 ywmc: '',
52 czsj: ''
53 },
54 rules: {
55 xzqdm: [
56 { required: true, message: '行政区代码', trigger: 'blur' }
57 ],
58 xzqmc: [
59 { required: true, message: '行政区名称', trigger: 'blur' }
60 ],
61 bdcdyh: [
62 { required: true, message: '不动产单元号', trigger: 'blur' }
63 ],
64 ywmc: [
65 { required: true, message: '业务名称', trigger: 'blur' }
66 ],
67 czsj: [
68 { required: true, message: '操作时间', trigger: 'blur' }
69 ]
70 }
71 }
72 },
73 watch: {
74 value (val) {
75 this.myValue = val
76 }
77 },
78 methods: {
79 closeDialog () {
80 this.$emit('input', false)
81 },
82 handleSubmit () {
83 this.$emit('input', false)
84 }
85 }
86 }
87 </script>
...\ No newline at end of file ...\ No newline at end of file
...@@ -74,8 +74,6 @@ ...@@ -74,8 +74,6 @@
74 :data="tableData.data"> 74 :data="tableData.data">
75 </lb-table> 75 </lb-table>
76 </div> 76 </div>
77 <!-- 编辑 -->
78 <dataDetails ref="editLog" :bsmSjsb="bsmSjsb" :diaData="diaData" />
79 </div> 77 </div>
80 </template> 78 </template>
81 79
...@@ -85,18 +83,11 @@ ...@@ -85,18 +83,11 @@
85 import data from "./data" 83 import data from "./data"
86 // 引入table混入方法 84 // 引入table混入方法
87 import tableMixin from '@/mixins/tableMixin.js' 85 import tableMixin from '@/mixins/tableMixin.js'
88 // 引入详情组件
89 import dataDetails from '@/components/dataDetails/edit-dialog'
90 export default { 86 export default {
91 name: "jsbwcx", 87 name: "jsbwcx",
92 mixins: [tableMixin], 88 mixins: [tableMixin],
93 components: {
94 dataDetails
95 },
96 data () { 89 data () {
97 return { 90 return {
98 diaData: {},
99 bsmSjsb: '',
100 // 开始结束日期限制 91 // 开始结束日期限制
101 pickerOptionsStart: { 92 pickerOptionsStart: {
102 disabledDate: (time) => { 93 disabledDate: (time) => {
...@@ -220,16 +211,11 @@ export default { ...@@ -220,16 +211,11 @@ export default {
220 resetForm () { 211 resetForm () {
221 this.$refs.ruleForm.resetFields(); 212 this.$refs.ruleForm.resetFields();
222 }, 213 },
223 async featchData () { 214 featchData () {
224 }, 215 },
225 // 详情 216 // 详情
226 handleEdit (row) { 217 handleEdit () {
227 this.diaData.list = [{ 218 this.$popupDialog('业务报文', 'components/JsonEditor/index', {}, '50%', '320px')
228 chineseTable: '测试',
229 dataTable: '222',
230 soleUrl: 'acceptanceInfo'
231 }]
232 this.$refs.editLog.isShow()
233 } 219 }
234 } 220 }
235 } 221 }
......