巷道管理新增add、编辑edit，父子组件通信控制显隐model弹框

src/plugins/antd.js

@@ -21,6 +21,7 @@ import {
     Popconfirm,
     Tooltip,
     Drawer,
+    Divider
 } from "ant-design-vue";
 Vue.use(Layout);
 Vue.use(Input);
@@ -42,6 +43,7 @@ Vue.use(Select);
 Vue.use(Popconfirm)
 Vue.use(Tooltip)
 Vue.use(Drawer)
+Vue.use(Divider)
 Vue.prototype.$message = message;
 Vue.prototype.$info = Modal.info;
 Vue.prototype.$success = Modal.success;

src/views/roadwayManage/index.vue

@@ -1,4 +1,8 @@
 <template>
+    <div>
+        <a-button type="primary" class="add" @click="showModal('add','')">
+            新增
+        </a-button>
         <a-table
             :columns="columns"
             :row-key="record => record.id"
@@ -20,22 +24,30 @@
             </template>
           </span>
           <span slot="action" slot-scope="text, record">
-            <a @click="editModal(1,record)" v-action="'dosage_edit'">
+          <a @click="showModal('edit',record)">
             编辑
           </a>
-            <a-divider type="vertical" v-action="'dosage_edit'"/>
+          <a-divider type="vertical"/>
           <a-popconfirm
               title="是否删除?"
               @confirm="() => delDosage(record)"
-                v-action="'dosage_delete'"
           >
             <a>删除</a>
           </a-popconfirm>
           </span>
         </a-table>
+        <Model
+            :visible.sync="visible"
+            :modelTitle="modelTitle"
+            @sure="submit"
+            @close="closeModel"
+        />
+    </div>
 </template>
+
+
 <script>
-// import reqwest from 'reqwest';
+import Model from "./model.vue";
 const columns = [
     {
         title: '巷道名称',
@@ -57,7 +69,7 @@ const columns = [
     },
     {
         title: '对应球机',
-        scopedSlots: { customRender: 'actions' },
+        scopedSlots: { customRender: 'actions' }
     },
     {
         title: '修改时间',
@@ -78,6 +90,8 @@ export default {
             pagination: {},
             loading: false,
             columns,
+            visible:false,
+            modelTitle:''
         };
     },
     mounted() {
@@ -93,11 +107,35 @@ export default {
                     }
                 })
                 .then(res => {
-                    // res.data[1].mediaPath =
-                    //     "http://gitlab.zhehekeji.com/security_check/security_front/raw/1.0.0/src/assets/video/video2.mp4";
                     this.data = res.data.list;
                 });
+        },
+        showModal(type,data){
+            this.visible = true
+            console.log(type)
+            if(type=='add'){
+                this.modelTitle = "新增巷道"
+            }else if(type=='edit'){
+                this.modelTitle = "编辑巷道"
+                this.modelData = data
+            }
+        },
+        submit(visible){
+            this.visible = visible
+        },
+        closeModel(visible){
+            this.visible = visible
         }
     },
+    components:{
+        Model
+    }
 };
 </script>
+<style lang="scss">
+    .add{
+        position: absolute;
+        top:0;
+        right: 20px;
+    }
+</style>

src/views/roadwayManage/model.vue

@@ -0,0 +1,47 @@
+<template>
+    <div v-if="visible">
+        <a-modal
+            :title="modelTitle"
+            :visible="visible"
+            :confirm-loading="confirmLoading"
+            @ok="handleOk"
+            @cancel="handleCancel"
+            ok-text="确认" cancel-text="取消"
+        >
+            <p>gfgdfgdfgdf</p>
+        </a-modal>
+    </div>
+</template>
+<script>
+export default {
+    props:{
+        visible:{
+            type:Boolean
+        },
+        modelTitle:{
+            type:String
+        }
+    },
+    data() {
+        return {
+            confirmLoading: false,
+        };
+    },
+    mounted() {
+
+    },
+    methods: {
+        handleOk() {
+            this.confirmLoading = true;
+            setTimeout(() => {
+                this.$emit('sure',false)
+                this.confirmLoading = false;
+            }, 500);
+        },
+        handleCancel() {
+            console.log('Clicked cancel button');
+            this.$emit('close',false)
+        },
+    },
+};
+</script>