From 27fac4e6af40ec26eb6d4da94e86b0a7600e69b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E9=91=AB?= <zhangxin@zhehekeji.com>
Date: Tue, 5 Jan 2021 14:25:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=93=81=E8=A7=84=E7=AE=A1=E7=90=86=E5=8F=8Amo?=
 =?UTF-8?q?del=E9=A1=B5=E5=B8=83=E5=B1=80=E6=9E=84=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/http/http-api.js              |   7 +-
 src/router/index.js                   |   9 ++
 src/views/cameraManage/ioTable.vue    |   5 +-
 src/views/cameraManage/model.vue      |   2 +-
 src/views/productSpecManage/index.vue | 200 +++++++++++++++++++++++++
 src/views/productSpecManage/model.vue | 207 ++++++++++++++++++++++++++
 6 files changed, 419 insertions(+), 11 deletions(-)
 create mode 100644 src/views/productSpecManage/index.vue
 create mode 100644 src/views/productSpecManage/model.vue

diff --git a/src/api/http/http-api.js b/src/api/http/http-api.js
index eece7bf..87b058b 100644
--- a/src/api/http/http-api.js
+++ b/src/api/http/http-api.js
@@ -74,12 +74,7 @@ export default  {
     writeInCameraIoptz: {
         method: "POST",
         url: "/camera/io/ptz",
-        name: "球机IO指令写入"
-    },
-    coverageCameraIo: {
-        method: "PUT",
-        url: "/camera/io",
-        name: "球机IO指令覆盖"
+        name: "球机IO指令写入/覆盖（调同一个接口）"
     },
     cameraIoToPtz: {
         method: "POST",
diff --git a/src/router/index.js b/src/router/index.js
index da0c0b6..66d5288 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -112,6 +112,15 @@ const routes = [{
             },
             component: () => import('@/views/cameraManage/index')
         },
+        {
+            path: 'productSpecManage',
+            name: 'productSpecManage',
+            meta: {
+                icon: 'pushpin',
+                name: '品规管理'
+            },
+            component: () => import('@/views/productSpecManage/index')
+        },
         {
             path: 'cameraManage/ioTable',
             name: 'ioTable',
diff --git a/src/views/cameraManage/ioTable.vue b/src/views/cameraManage/ioTable.vue
index 65ee7ba..58093d0 100644
--- a/src/views/cameraManage/ioTable.vue
+++ b/src/views/cameraManage/ioTable.vue
@@ -13,7 +13,7 @@
                 @change="handleChange"
                 ref="table"
             >
-                <a-button type="primary" class="plc" @click="goIo">
+                <a-button type="primary" class="plc">
                     导入
                 </a-button>
             </a-upload>
@@ -175,9 +175,6 @@ export default {
 
             })
         },
-        goIo(){
-            this.$router.push({ name: "ioTable" });
-        }
     },
     components:{
         Model
diff --git a/src/views/cameraManage/model.vue b/src/views/cameraManage/model.vue
index b4d34cd..dbb57e0 100644
--- a/src/views/cameraManage/model.vue
+++ b/src/views/cameraManage/model.vue
@@ -419,7 +419,7 @@ export default {
             console.log(this.id)
             console.log(data.id)
             console.log(type)
-            this.$api.httpApi.coverageCameraIo({
+            this.$api.httpApi.writeInCameraIoptz({
                 data: {
                     cameraId:this.id,
                     cameraIOId:data.id,
diff --git a/src/views/productSpecManage/index.vue b/src/views/productSpecManage/index.vue
new file mode 100644
index 0000000..4a0721e
--- /dev/null
+++ b/src/views/productSpecManage/index.vue
@@ -0,0 +1,200 @@
+<template>
+    <div>
+        <div class="button-box">
+            <a-button type="primary" class="add" @click="showModel('add','')">
+                新增
+            </a-button>
+            <a-upload
+                name="file"
+                :multiple="true"
+                accept=".xlsx"
+                :action="uploadProps.action"
+                :showUploadList = 'false'
+                @change="handleChange"
+                ref="table"
+            >
+                <a-button type="primary" class="plc" >
+                    导入
+                </a-button>
+            </a-upload>
+        </div>
+        <a-table
+            :columns="columns"
+            :row-key="record => record.id"
+            :data-source="data"
+            :pagination="pagination"
+            @change="handleGetCameraIoList"
+        >
+          <span slot="action" slot-scope="text, record">
+          <a-divider type="vertical"/>
+          <a @click="showModel('edit',record)">
+            编辑
+          </a>
+          <a-divider type="vertical"/>
+          <a-popconfirm
+              title="是否删除?"
+              @confirm="() => delDosage(record)"
+          >
+            <a>删除</a>
+          </a-popconfirm>
+          </span>
+        </a-table>
+        <Model
+            :visible.sync="visible"
+            :modelType="modelType"
+            :modelData.sync="modelData"
+            @sure="submit"
+            @close="closeModel"
+        />
+    </div>
+</template>
+
+
+<script>
+import Model from "./model.vue"
+import { importExcelUrl } from "@/api/importExcel";
+const columns = [
+    {
+        title: '序号',
+        // dataIndex: 'id',
+        customRender: (text, record, index) => {
+            return (
+                (record.pageNumber - 1) * 10 + index + 1
+            )
+        }
+    },
+    {
+        title: '品类',
+        dataIndex: 'name',
+    },
+    {
+        title: '子类',
+        dataIndex: 'child',
+    },
+    {
+        title: '修改时间',
+        dataIndex: 'updateTime',
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        scopedSlots: { customRender: 'action' }
+    },
+];
+export default {
+    data() {
+        return {
+            pageNum:1,
+            pageSize:10,
+            data: [],
+            pagination:{
+                total:0,
+                current:1,
+                defaultPageSize:10, // 默认每页显示数量
+                showTotal: total => `共 ${total} 条数据`, // 显示总数
+                showSizeChanger:true, // 显示可改变每页数量
+                pageSizeOptions: ['10', '20', '30'],
+                onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
+            },
+            loading: false,
+            columns,
+            visible:false,
+            modelType:'',
+            modelData:[],
+        };
+    },
+    computed:{
+        uploadProps() {
+            return {
+                action: 'dddddd'//上传Excel文件的路径
+            }
+        }
+    },
+    mounted() {
+        this.handleGetCameraIoList()
+    },
+    methods: {
+        handleChange(data) {
+            console.log(data)
+            // if (data.file.status == "done") { // 导入表格之后成功的回调
+            //     this.$message.success(data.file.response.message)
+            //     this.handleGetCameraIoList();
+            // } else if(data.file.status == 'error'){ // 导入表格之后失败的回调
+            //     this.$message.error(data.file.response.message)
+            // }
+        },
+        handleGetCameraIoList(pagination) {
+            console.log(pagination)
+            if(pagination){
+                this.pagination.current = pagination.current;
+                this.pagination.pageSize = pagination.pageSize;
+                this.pageNum = pagination.current;
+                this.pageSize = pagination.pageSize;
+            }
+            this.request();
+        },
+        request(){
+            // this.$api.httpApi.getCameraIoList({
+            //     data: {
+            //         page:this.pageNum,
+            //         size:this.pageSize,
+            //     }
+            // }).then(res => {
+            //     const pagination = { ...this.pagination };
+            //     pagination.total = res.data.total;
+            //     this.data = res.data.list;
+            //     this.pagination = pagination;
+            //     res.data.list.forEach((value,index) => {
+            //         value.pageNumber = this.pagination.current
+            //     });
+            // }).catch(err => {
+            //
+            // });
+        },
+        showModel(type,data){
+            this.visible = true
+            console.log(type)
+            this.modelType = type
+            this.modelData = data
+        },
+        submit(visible){
+            this.visible = visible
+            this.handleGetCameraIoList()
+        },
+        closeModel(visible,data){
+            this.visible = visible
+            this.modelData=data
+        },
+        delDosage(data){
+            // console.log(data.id)
+            // var id=data.id
+            // this.$axios.delete('/camera/config/'+id, {
+            //     data: {}
+            // }).then(res => {
+            //     if(res.code==200){
+            //         this.$message.success('删除球机IO成功');
+            //         this.handleGetCameraIoList()
+            //     }
+            // }).catch(err => {
+            //
+            // })
+        },
+    },
+    components:{
+        Model
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .button-box{
+        position: absolute;
+        top:0;
+        right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .add{
+            margin-right: 20px;
+        }
+    }
+</style>
diff --git a/src/views/productSpecManage/model.vue b/src/views/productSpecManage/model.vue
new file mode 100644
index 0000000..018c8a6
--- /dev/null
+++ b/src/views/productSpecManage/model.vue
@@ -0,0 +1,207 @@
+<template>
+    <div v-if="isShow">
+        <template v-if="type=='add' || type=='edit'">
+            <a-modal
+                v-model="isShow"
+                :title="[type =='add' ? '新增品规':'编辑品规']"
+                :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>
+            </a-modal>
+        </template>
+    </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', 'modelType', 'modelData'],
+    watch: {
+        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
+        visible: function(newVal){
+            this.isShow = newVal;  //newVal即是visible
+            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
+        },
+        modelType: function(newVal){
+            this.type = newVal;
+        },
+        modelData: function(newVal){
+            // console.log(newVal)
+            this.mdata=newVal
+            console.log(this.type)
+            if(newVal.id && this.type=='edit'){
+                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
+                    })
+                })
+            }else{
+
+            }
+        },
+    },
+    data() {
+        return {
+            isShow:false,
+            type:'',
+            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.type=='add'){
+            //                 this.$api.httpApi.addCameraIo({
+            //                     data:values
+            //                 }).then(res => {
+            //                     if(res.code==200){
+            //                         this.$emit('sure',false)
+            //                         this.$message.success('新增品规成功');
+            //                     }
+            //                 }).catch(err => {
+            //
+            //                 });
+            //             }else if(this.type=='edit'){
+            //                 values.id = this.id
+            //                 this.$api.httpApi.editCameraIo({
+            //                     data:values
+            //                 }).then(res => {
+            //                     if(res.code==200){
+            //                         this.$emit('sure',false)
+            //                         this.$message.success('编辑品规成功');
+            //                     }
+            //                 }).catch(err => {
+            //
+            //                 });
+            //             }
+            //         }
+            //     });
+            //     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;
+        }
+    }
+    .video-mask{
+        position:fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color:rgba(0,0,0,0.5);
+        z-index:1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        #video-test{
+
+        }
+        .video-close{
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            color: #ffffff;
+            font-size: 24px;
+            width: 32px;
+            height: 32px;
+            background: rgba(0,0,0,0.5);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 10;
+        }
+        .operation-list{
+            position: absolute;
+            right: 200px;
+            bottom: 20px;
+            /*width: 150px;*/
+            /*border: solid 1px blue;*/
+            z-index: 10;
+            .operation-item{
+                img{
+                    width: 42px;
+                }
+                span{
+                    padding: 5px 10px;
+                    background: rgba(0,0,0,0.5);
+                    font-size: 18px;
+                    color: #ffffff;
+                }
+            }
+        }
+        .direction-list{
+            position: absolute;
+            right: 30px;
+            bottom: 20px;
+            width: 150px;
+            z-index: 10;
+            /*border: solid 1px blue;*/
+            .direction-item{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                img{
+                    width: 42px;
+                }
+            }
+        }
+        img{
+            cursor: pointer;
+        }
+    }
+</style>