新增球机API配置、接口联调

src/api/http/http-api.js

@@ -24,6 +24,11 @@ export default  {
         url: "/camera/page",
         name: "获取球机列表"
     },
+    addCamera: {
+        method: "POST",
+        url: "/camera",
+        name: "新增球机"
+    },
     queryList: {
         url: '/order/list',
         name: '查询',

src/views/cameraManage/index.vue

@@ -115,9 +115,9 @@ export default {
             this.visible = true
             console.log(type)
             if(type=='add'){
-                this.modelTitle = "新增巷道"
+                this.modelTitle = "新增球机"
             }else if(type=='edit'){
-                this.modelTitle = "编辑巷道"
+                this.modelTitle = "编辑球机"
                 this.modelData = data
             }
         },
@@ -136,7 +136,7 @@ export default {
                 data: {}
             }).then(res => {
                 if(res.code==200){
-                    this.$message.success('删除巷道成功');
+                    this.$message.success('删除球机成功');
                     this.handleGetStreetList()
                 }
             })

src/views/cameraManage/model.vue

@@ -0,0 +1,151 @@
+<template>
+    <div v-if="isShow">
+        <a-modal
+            v-model="isShow"
+            :title="title"
+            :closable="closable"
+            @ok="handleOk"
+            @cancel="handleCancel"
+            ok-text="确认"
+            cancel-text="取消"
+            class="p-model"
+        >
+            <a-form
+                :form="form"
+                :wrapper-col="formItemAcrossLayout.wrapperCol"
+            >
+                <a-form-item label="球机名称" :label-col="formItemVerticalLayout.labelCol">
+                    <a-input
+                        v-decorator="['name', { rules: [{ required: true, message: '请输入球机名称!' }] }]"
+                    />
+                </a-form-item>
+                <a-form-item label="球机IP" :label-col="formItemVerticalLayout.labelCol">
+                    <a-select
+                        v-decorator="[
+                           'ip',
+                           { rules: [{ required: true, message: '请选择球机IP!' }] },
+                        ]"
+                        placeholder="选择球机IP"
+                        @change="handleSelectChangeLeft"
+                    >
+                        <a-select-option value="192.168.11.6">
+                            192.168.11.6
+                        </a-select-option>
+                        <a-select-option value="192.168.16.4">
+                            192.168.16.4
+                        </a-select-option>
+                    </a-select>
+                </a-form-item>
+                <a-form-item label="rtsp流地址" :label-col="formItemVerticalLayout.labelCol">
+                    <a-input
+                        v-decorator="['rtsp', { rules: [{ required: true, message: '请输入rtsp流地址!' }] }]"
+                    />
+                </a-form-item>
+            </a-form>
+        </a-modal>
+    </div>
+</template>
+<script>
+var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
+    labelCol: { span: 8 },    //lable长度
+    wrapperCol: { span: 14 },  //input长度
+};
+var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
+    labelCol: { span: 4 },
+    wrapperCol: { span: 8, offset: 4 },
+};
+export default {
+    props:[ 'visible', 'modelTitle', 'modelData'],
+    watch: {
+        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
+        visible: function(newVal){
+            this.isShow = newVal;  //newVal即是visible
+            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
+        },
+        modelTitle: function(newVal){
+            this.title = newVal;
+        },
+        modelData: function(newVal){
+            // console.log(newVal)
+            if(newVal.id){
+                this.mdata=newVal
+                this.id = newVal.id
+                // console.log('触发了watch，重新赋值')
+                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
+                        name:newVal.name,
+                        ip:newVal.ip,
+                        rtsp:newVal.rtsp
+                    })
+                })
+            }
+
+        },
+    },
+    data() {
+        return {
+            isShow:false,
+            title:'',
+            closable:false,//取消model模态框右上角的X号
+            formItemAcrossLayout,
+            formItemVerticalLayout,
+            confirmLoading: false,
+            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
+            id:'',
+            mdata:[]
+        };
+    },
+    mounted() {
+        console.log('mounted执行了')
+    },
+    methods: {
+        handleOk() {
+            this.confirmLoading = true;
+            setTimeout(() => {
+                this.form.validateFields((err, values) => {
+                    console.log(values)
+                    if (!err) {
+                        console.log(this.title)
+                        if(this.title=='新增球机'){
+                            this.$api.httpApi.addCamera({
+                                data:values
+                            }).then(res => {
+                                if(res.code==200){
+                                    this.$emit('sure',false)
+                                    this.$message.success('新增球机成功');
+                                }
+                            });
+                        }else if(this.title=='编辑球机'){
+                            values.id = this.id
+                            this.$api.httpApi.editStreet({
+                                data:values
+                            }).then(res => {
+                                if(res.code==200){
+                                    this.$emit('sure',false)
+                                    this.$message.success('编辑球机成功');
+                                }
+                            });
+                        }
+                    }
+                });
+                this.confirmLoading = false;
+            }, 500);
+        },
+        handleCancel() {
+            console.log('Clicked cancel button');
+            console.log(this.title);
+            this.$emit('close',false,{})
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+    .p-model{
+        .across-layout{
+            display: flex;
+        }
+        .ant-divider-horizontal{
+            margin:6px 0;
+        }
+    }
+</style>