巷道管理新增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,41 +1,53 @@
 <template>
-    <a-table
+    <div>
-        :columns="columns"
+        <a-button type="primary" class="add" @click="showModal('add','')">
-        :row-key="record => record.id"
+            新增
-        :data-source="data"
+        </a-button>
-        :pagination="pagination"
+        <a-table
-        @change="handleGetStreetList"
+            :columns="columns"
-    >
+            :row-key="record => record.id"
-         <span slot="leftType" slot-scope="text">
+            :data-source="data"
-              {{ text === 0 ? '单伸' : '双伸' }}
+            :pagination="pagination"
-         </span>
+            @change="handleGetStreetList"
-        <span slot="rightType" slot-scope="text">
+        >
-              {{ text === 0 ? '单伸' : '双伸' }}
+          <span slot="leftType" slot-scope="text">
-         </span>
+               {{ text === 0 ? '单伸' : '双伸' }}
-        <span slot="actions" slot-scope="text">
-              <template>
-                  <span v-if="text.camera1Name">{{text.camera1Name}}</span>
-                  <span v-if="text.camera2Name">{{text.camera2Name}}</span>
-                  <span v-if="text.camera1Name && text.camera2Name">{{text.camera1Name}}/{{text.camera2Name}}</span>
-              </template>
-         </span>
-        <span slot="action" slot-scope="text, record">
-            <a @click="editModal(1,record)" v-action="'dosage_edit'">
-              编辑
-            </a>
-            <a-divider type="vertical" v-action="'dosage_edit'"/>
-            <a-popconfirm
-                title="是否删除?"
-                @confirm="() => delDosage(record)"
-                v-action="'dosage_delete'"
-            >
-              <a>删除</a>
-            </a-popconfirm>
           </span>
-    </a-table>
+             <span slot="rightType" slot-scope="text">
+               {{ text === 0 ? '单伸' : '双伸' }}
+          </span>
+          <span slot="actions" slot-scope="text">
+            <template>
+                <span v-if="text.camera1Name">{{text.camera1Name}}</span>
+                <span v-if="text.camera2Name">{{text.camera2Name}}</span>
+                <span v-if="text.camera1Name && text.camera2Name">{{text.camera1Name}}/{{text.camera2Name}}</span>
+            </template>
+          </span>
+          <span slot="action" slot-scope="text, record">
+          <a @click="showModal('edit',record)">
+            编辑
+          </a>
+          <a-divider type="vertical"/>
+          <a-popconfirm
+              title="是否删除?"
+              @confirm="() => delDosage(record)"
+          >
+            <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>