style:业务报文

@@ -20,6 +20,7 @@
     "nprogress": "0.2.0",
     "vue": "2.6.10",
     "vue-awesome": "^4.5.0",
+    "vue-json-editor": "^1.4.3",
     "vue-router": "3.0.2",
     "vuex": "3.1.0"
   },
@@ -74,4 +75,4 @@
     "type": "git",
     "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
   }
-}
\ No newline at end of file
+}

+<template>
+  <vue-json-editor v-model="resultInfo" :showBtns="false" :mode="'code'" lang="zh" @json-change="onJsonChange"
+    @json-save="onJsonSave" />
+</template>
+<script>
+// 引入json编译器
+import vueJsonEditor from 'vue-json-editor'
+export default {
+  components: {
+    vueJsonEditor
+  },
+  data () {
+    return {
+      myValue: this.value,
+      resultInfo: {
+        "userId": "1111111129ac7325-30da-4e6a-8a00-9699820fc04a",
+        "realName": "小雪18",
+        "gradeCode": "166",
+        "provinceCode": "110000",
+        "cityCode": {
+          "test1": "test1",
+          "test2": "test2"
+        },
+        "schoolId": 21,
+        "schoolLevel": 1,
+        "schoolName": "北京第二实验小学朝阳学校"
+      },
+    }
+  },
+  methods: {
+    onJsonChange (value) {
+      console.log('value:', value);
+    },
+    onJsonSave (value) {
+      console.log('value:', value);
+    }
+  }
+}
+
+</script>
+
+<style>
+/* jsoneditor右上角默认有一个链接,加css去掉了 */
+.jsoneditor-poweredBy {
+  display: none;
+}
+
+.jsoneditor-vue {
+  height: 300px;
+}
+</style>
\ No newline at end of file

@@ -119,7 +119,6 @@ export default {
     // 单选
     singleElection (row) {
       this.selected = this.data.indexOf(row);
-      console.log(this.selected);
     },
 
     tableRowClassName ({ row, rowIndex }) {

 import Vue from 'vue'
 import Popup from './index.vue'
-
 const PopupBox = Vue.extend(Popup)
-Popup.install = function (title, editItem, data, formData) {
+let popuping = undefined
+
+PopupBox.prototype.close = function () {
+  // 如果Popup 有引用，则去掉引用
+  if (popuping) {
+    popuping = undefined
+  }
+  // 先将组件隐藏
+  this.isShow = false
+  // 延迟300毫秒，等待Popup关闭动画执行完之后销毁组件
+  setTimeout(() => {
+    // 移除挂载的dom元素
+    if (this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el)
+    }
+  }, 300)
+}
+
+const Popup1 = (title, editItem, data, formData) => {
+  // 如果组件已渲染，则返回即可
+  if (popuping) {
+    return popuping
+  }
   data.title = title
   data.editItem = editItem
   if (formData) {
     data.formData = formData
   }
+  // 通过构造函数初始化组件 相当于 new Vue()
   let instance = new PopupBox({
     data
   }).$mount()
@@ -15,6 +37,8 @@ Popup.install = function (title, editItem, data, formData) {
   Vue.nextTick(() => {
     instance.isShow = true
   })
+  // 将组件实例赋值给loading
+  popuping = instance
+  return instance
 }
-
-export default Popup
+export default Popup1

@@ -21,6 +21,7 @@
   </transition>
 </template>
 <script>
+import Popup1 from './index'
 export default {
   name: 'index',
   data () {
@@ -74,8 +75,7 @@ export default {
   },
   methods: {
     onCancel () {
-      this.isShow = false
-      this.cancel()
+      Popup1().close()
     },
     onConfirm () {
       this.loading = true
@@ -93,7 +93,7 @@ export default {
     loadViewFn (view) {
       return (r) =>
         require.ensure([], () =>
-          r(require(`@/views/${view}.vue`))
+          r(require(`@/${view}.vue`))
         )
     }
   },
@@ -108,7 +108,7 @@ export default {
 .ls-mask {
   width: 100%;
   height: 100%;
-  z-index: 100;
+  z-index: 2000;
   position: fixed;
   left: 0;
   top: 0;
@@ -131,10 +131,15 @@ export default {
   padding-left: 5px;
 }
 
+/deep/.closeStyle {
+  top: 7px !important;
+}
+
 .ls-title {
-  padding: 16px;
+  padding: 10px;
   color: #ffffff;
-  background: linear-gradient(3deg, #409EFF, #a7cbee);
+  background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
+  font-size: 16px;
 }
 
 .ls-title .svg-icon {
@@ -142,11 +147,11 @@ export default {
 }
 
 .mask-content {
-  padding: 20px;
+  padding: 15px;
   width: 100%;
-  min-height: 30%;
+  min-height: 20%;
   max-height: 95%;
-  overflow-y: scroll;
+  // overflow-y: scroll;
 }
 
 .ls-mask-footer {
@@ -182,4 +187,3 @@ export default {
   width: 75px;
 }
 </style>
-  
\ No newline at end of file

@@ -22,6 +22,12 @@ import 'vue-awesome/icons/align-left.js';
 Vue.prototype.$startLoading = startLoadingAddCount
 Vue.prototype.$endLoading = endLoadingSubCount
 
+// 弹框
+import { popupDialog, popupCacel } from "@/utils/popup.js";
+// 全局加载
+Vue.prototype.$popupDialog = popupDialog
+Vue.prototype.$popupCacel = popupCacel
+
 import { theme } from "@/directive/theme.js"
 Vue.directive("theme", theme)
 Vue.directive('fo', {

 import Popup from '@/components/Popup/index'
 export function popupDialog (title, url, params, width = '75%', height, btnShow = false, callback) {
-  Popup.install(title, url, {
+  // Popup.install
+  Popup(title, url, {
     height: height,
     width: width,
     formData: params,
@@ -12,4 +13,8 @@ export function popupDialog (title, url, params, width = '75%', height, btnShow
       callback
     }
   })
+}
+
+export function popupCacel () {
+  Popup1().close()
 }
\ No newline at end of file

-<template>
-  <!-- 编辑 -->
-  <dialogBox title="详情" @closeDialog="closeDialog" @submitForm="handleSubmit" v-model="myValue">
-    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
-      <el-row>
-        <el-col :span="6">
-          <el-form-item label="行政区代码" prop="xzqdm">
-            <el-input v-model="ruleForm.xzqdm" placeholder="行政区代码"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="行政区名称" prop="xzqmc">
-            <el-input v-model="ruleForm.xzqmc" placeholder="行政区名称"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="不动产单元号" prop="bdcdyh">
-            <el-input v-model="ruleForm.bdcdyh" placeholder="不动产单元号"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="6">
-          <el-form-item label="业务名称" prop="ywmc">
-            <el-input v-model="ruleForm.ywmc" placeholder="业务名称"></el-input>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="6">
-          <el-form-item label="操作时间" prop="czsj">
-            <el-date-picker v-model="ruleForm.czsj" class="width100" type="datetime" placeholder="操作时间">
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-  </dialogBox>
-</template>
-
-<script>
-export default {
-  props: {
-    value: { type: Boolean, default: false },
-  },
-  data () {
-    return {
-      myValue: this.value,
-      ruleForm: {
-        xzqdm: '',
-        xzqmc: '',
-        bdcdyh: '',
-        ywmc: '',
-        czsj: ''
-      },
-      rules: {
-        xzqdm: [
-          { required: true, message: '行政区代码', trigger: 'blur' }
-        ],
-        xzqmc: [
-          { required: true, message: '行政区名称', trigger: 'blur' }
-        ],
-        bdcdyh: [
-          { required: true, message: '不动产单元号', trigger: 'blur' }
-        ],
-        ywmc: [
-          { required: true, message: '业务名称', trigger: 'blur' }
-        ],
-        czsj: [
-          { required: true, message: '操作时间', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  watch: {
-    value (val) {
-      this.myValue = val
-    }
-  },
-  methods: {
-    closeDialog () {
-      this.$emit('input', false)
-    },
-    handleSubmit () {
-      this.$emit('input', false)
-    }
-  }
-}
-</script>
\ No newline at end of file

@@ -74,8 +74,6 @@
         :data="tableData.data">
       </lb-table>
     </div>
-    <!-- 编辑 -->
-    <dataDetails ref="editLog" :bsmSjsb="bsmSjsb" :diaData="diaData" />
   </div>
 </template>
 
@@ -85,18 +83,11 @@
 import data from "./data"
 // 引入table混入方法
 import tableMixin from '@/mixins/tableMixin.js'
-// 引入详情组件
-import dataDetails from '@/components/dataDetails/edit-dialog'
 export default {
   name: "jsbwcx",
   mixins: [tableMixin],
-  components: {
-    dataDetails
-  },
   data () {
     return {
-      diaData: {},
-      bsmSjsb: '',
       // 开始结束日期限制
       pickerOptionsStart: {
         disabledDate: (time) => {
@@ -220,16 +211,11 @@ export default {
     resetForm () {
       this.$refs.ruleForm.resetFields();
     },
-    async featchData () {
+    featchData () {
     },
     // 详情
-    handleEdit (row) {
-      this.diaData.list = [{
-        chineseTable: '测试',
-        dataTable: '222',
-        soleUrl: 'acceptanceInfo'
-      }]
-      this.$refs.editLog.isShow()
+    handleEdit () {
+      this.$popupDialog('业务报文', 'components/JsonEditor/index', {}, '50%', '320px')
     }
   }
 }