设备点位——批量引入优化

src/views/module_ems/tpmTag/modulesPL/TpmTagFormPL1.vue

@@ -1,8 +1,89 @@
 <template>
-    
+    <div class="center">
+        <div class="left">
+            <a-card size="small" title="选择点位" style="width: 100%;">
+                <a slot="extra" @click="handleQR">确认</a>
+                <a-form layout="inline" @keyup.enter.native="getPointOptions">
+                    <a-form-item>
+                        <a-input v-model="queryParam.tagname" placeholder="输入点位名，回车查询"/>
+                    </a-form-item>
+                </a-form>
+                <a-table
+                ref="table"
+                size="small"
+                :scroll="{x:true}"
+                bordered
+                rowKey="id"
+                :columns="columns"
+                :dataSource="dataPoint"
+                :pagination="false"
+                :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+                class="j-table-force-nowrap">
+                </a-table>
+            </a-card>
+        </div>
+        <div class="right">
+            <j-form-container>
+                <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
+                    <div class="top">
+                        <a-card size="small" title="选择设备" style="width: 100%;">
+                            <div style="height: 100%;width:100%;display: flex;">
+                                <div style="height: 100%;width:95%;">
+                                    <!-- <j-form-container>
+                                        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail"> -->
+                                                <a-form-model-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentid">
+                                                    <!-- bug:不能搜索 （解决：a-form-model加上slot="detail"）-->
+                                                    <j-search-select-tag v-model="model.equipmentid" placeholder="请选择设备" dict="ems_tpm_equipment,equipmentname,id"  />
+                                                </a-form-model-item>
+                                        <!-- </a-form-model>
+                                    </j-form-container> -->
+                                </div>
+                                <div style="height: 100%;width:5%;padding-top:0.3%;">
+                                    <a-button type="primary" icon="search" />
+                                </div>
+                            </div>
+                        </a-card>
+                    </div>
+                    <div class="bottom">
+                        <a-card size="small" title="设置点位信息" style="width: 100%;">
+                            <a-table
+                            size="small"
+                            :columns="columnsR"
+                            :dataSource="model.data"
+                            :pagination="false"
+                            :rowKey="(record, index) => { return index }"
+                            bordered
+                            >
+                                <template slot="tagname" slot-scope="text, record,index">
+                                    <!--  -->
+                                    <a-form-model-item :prop="'data.'+index+'.tagname'" :rules="validatorRules.tagname">
+                                        <!-- <a-input v-model="record.tagname"></a-input> -->
+                                        {{ record.tagname }}
+                                    </a-form-model-item>
+                                </template>
+                                <template slot="tagaddress" slot-scope="text, record,index">
+                                    <a-form-model-item :prop="'data.'+index+'.tagaddress'" :rules="validatorRules.tagaddress">
+                                        <a-input v-model="record.tagaddress"></a-input>
+                                    </a-form-model-item>
+                                </template>
+                                <template slot="operation" slot-scope="text, record">
+                                    <span>
+                                        <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
+                                            <a>删除</a>
+                                        </a-popconfirm>
+                                        </span>
+                                </template>
+                            </a-table>
+                        </a-card>
+                    </div>
+                </a-form-model>
+            </j-form-container>
+        </div>
+    </div>
 </template>
 
 <script>
+import { httpAction, getAction } from '@/api/manage'
 
 export default {
     name: 'TpmTagFormPL1',
@@ -10,8 +91,262 @@ export default {
     },
     data () {
         return {
-            
+            queryParam: {},
+            // 左侧表格表头
+            columns: [
+                {
+                    title:'点位名',
+                    align:"center",
+                    dataIndex: 'tagname'
+                },
+            ],
+            // 右侧表格表头
+            columnsR: [
+                // {
+                // title: '样品名称',
+                // dataIndex: 'sampleName',
+                // key: 'sampleName',
+                // align: 'center',
+                // scopedSlots: { customRender: 'sampleName' }
+                // },
+                {
+                title: '点位名称',
+                dataIndex: 'tagname',
+                key: 'tagname',
+                align: 'center',
+                scopedSlots: { customRender: 'tagname' }
+                },
+                {
+                title: '点位地址',
+                dataIndex: 'tagaddress',
+                key: 'tagaddress',
+                align: 'center',
+                scopedSlots: { customRender: 'tagaddress' }
+                },
+                {
+                title: '点位类型',
+                dataIndex: 'tagtype',
+                key: 'tagtype',
+                align: 'center',
+                scopedSlots: { customRender: 'tagtype' }
+                },
+                {
+                title: '能源分类',
+                dataIndex: 'energytypeid',
+                key: 'energytypeid',
+                align: 'center',
+                scopedSlots: { customRender: 'energytypeid' }
+                },
+                {
+                title: '能源分项',
+                dataIndex: 'energyitemid',
+                key: 'energyitemid',
+                align: 'center',
+                scopedSlots: { customRender: 'energyitemid' }
+                },
+                {
+                title: '下限',
+                dataIndex: 'min',
+                key: 'min',
+                align: 'center',
+                scopedSlots: { customRender: 'min' }
+                },
+                {
+                title: '上限',
+                dataIndex: 'max',
+                key: 'max',
+                align: 'center',
+                scopedSlots: { customRender: 'max' }
+                },
+                {
+                title: '报警延时(分钟)',
+                dataIndex: 'delay',
+                key: 'delay',
+                align: 'center',
+                scopedSlots: { customRender: 'delay' }
+                },
+                {
+                title: '其他值1',
+                dataIndex: 'param1',
+                key: 'param1',
+                align: 'center',
+                scopedSlots: { customRender: 'param1' }
+                },
+                {
+                title: '其他值2',
+                dataIndex: 'param2',
+                key: 'param2',
+                align: 'center',
+                scopedSlots: { customRender: 'param2' }
+                },
+                {
+                title: '当前点位值',
+                dataIndex: 'tagvalue',
+                key: 'tagvalue',
+                align: 'center',
+                scopedSlots: { customRender: 'tagvalue' }
+                },
+                {
+                title: '获得时间',
+                dataIndex: 'logtime',
+                key: 'logtime',
+                align: 'center',
+                scopedSlots: { customRender: 'logtime' }
+                },
+                {
+                title: '操作',
+                key: 'action',
+                align: 'center',
+                scopedSlots: { customRender: 'operation' }
+                }
+            ],
+            /* table选中keys*/
+            selectedRowKeys: [],
+            /* table选中records*/
+            selectionRows: [],
+            url: {
+                add: "/tpmTag/tpmTag/saveBatch",
+                getPoint: "/tpmIoserverTag/tpmIoserverTag/tagList"
+            },
+            // 点位数据
+            dataPoint: [],
+            count: 1,
+            model:{
+                data: []
+            },
+            labelCol: {
+                xs: { span: 24 },
+                sm: { span: 2 },
+            },
+            wrapperCol: {
+                xs: { span: 24 },
+                sm: { span: 22 },
+            },
+            validatorRules: {
+                equipmentid: [
+                    { required: true, message: '请选择设备!'},
+                ],
+            },
         }
+    },
+    created () {
+      // 获取点位数据
+      this.getPointOptions()
+    },
+    methods: {
+        getPointOptions() {
+            getAction(this.url.getPoint, this.queryParam).then((res) => {
+                this.dataPoint = res.result.map(item => {
+                    return {
+                    id: item.id,
+                    tagname: item.tagname
+                    }
+                })
+            })
+        },
+        onSelectChange(selectedRowKeys, selectionRows) {
+            console.log(selectedRowKeys, selectionRows)
+            this.selectedRowKeys = selectedRowKeys;
+            this.selectionRows = selectionRows;
+        },
+        onClearSelected() {
+            this.selectedRowKeys = [];
+            this.selectionRows = [];
+        },
+        handleQR() {
+            console.log(77,this.selectionRows)
+            this.model.data = []
+            for (let i = 0; i < this.selectionRows.length; i++) {
+                const element = this.selectionRows[i];
+                console.log(88,element)
+                this.model.data.push({
+                    key: this.count + '',
+                    tagname: element.tagname,
+                })
+                this.count++
+            }
+            console.log(99,this.model.data)
+        },
+        remove(key) {
+            console.log(key)
+            const newData = this.model.data.filter(item => item.key !== key)
+            this.model.data = newData
+        },
+        submitForm () {
+            const that = this;
+            // 触发表单验证
+            this.$refs.form.validate(valid => {
+            if (valid) {
+                console.log(this.model)
+                let httpurl = '';
+                let method = '';
+                const a = this.model.data.map(item=>{
+                    var obj = item
+                    obj.equipmentid = this.model.equipmentid
+                    return obj
+                    // return {
+                    //     tagname: item.tagname,
+                    //     tagaddress: item.tagaddress,
+                    //     equipmentid: this.model.equipmentid
+                    // }
+                })
+                console.log(a)
+                httpurl+=this.url.add;
+                method = 'post';
+                httpAction(httpurl,a,method).then((res)=>{
+                    if(res.success){
+                        that.$message.success(res.message);
+                        that.$emit('ok');
+                    }else{
+                        that.$message.warning(res.message);
+                    }
+                })
+            }
+            
+            })
+        },
     }
 }
 </script>
+
+<style scoped>
+.center{
+    height: 100%;
+    width: 100%;
+    display: flex;
+}
+.left{
+    height: 100%;
+    width: 25%;
+    /* border: 2px solid red; */
+}
+.right{
+    height: 100%;
+    width: 75%;
+    padding-left: 1%;
+    /* border: 2px solid red; */
+}
+.top{
+    height: 18%;
+    width: 100%;
+    display: flex;
+    padding-bottom: 1%;
+    /* border: 2px solid red; */
+}
+.bottom{
+    height: 80%;
+    width: 100%;
+    display: flex;
+    /* border: 2px solid red; */
+}
+/* 更改a-input样式 */
+::v-deep .a-input .ant-form-inline .ant-form-item{
+    width: 100% !important;
+}
+::v-deep .ant-row{
+    width: 100% !important;
+}
+::v-deep .ant-form-inline .ant-form-item > .ant-form-item-control-wrapper, .ant-form-inline .ant-form-item > .ant-form-item-label{
+    width: 100% !important;
+}
+</style>

src/views/module_ems/tpmTag/modulesPL/TpmTagModalPL.vue

@@ -9,7 +9,7 @@
     :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
     @cancel="handleCancel"
     cancelText="关闭">
-    <TpmTagFormPL1 ref="realForm" @ok="submitCallback"></TpmTagFormPL1>
+    <TpmTagFormPL1 ref="realForm"></TpmTagFormPL1>
   </j-modal>
 </template>
 
@@ -23,30 +23,18 @@
     data () {
       return {
         title:'',
-        width:1800,
+        width:1400,
         visible: false,
         disableSubmit: false
       }
     },
     methods: {
-      // add () {
-      //   this.visible=true
-      //   this.$nextTick(()=>{
-      //     this.$refs.realForm.add();
-      //   })
-      // },
-      // edit (record) {
-      //   this.visible=true
-      //   this.$nextTick(()=>{
-      //     this.$refs.realForm.edit(record);
-      //   })
-      // },
       close () {
         this.$emit('close');
         this.visible = false;
       },
       handleOk () {
-        
+        this.$refs.realForm.submitForm();
       },
       // submitCallback(){
       //   this.$emit('ok');