SwmAdd.vue

<template>
  <div class="eibs-tab">
    <c-col :span="12" class="col-left">
      <c-col :span="24">
        <el-form-item label="报文格式" prop="mt">
          <c-input v-model="model.mt" placeholder="请输入报文格式" style="width:100%" :code="getCodesByKey('mt')"/> 
        </el-form-item>
      </c-col>    
      <c-col :span="24">
        <el-form-item label="映射交易" prop="frm">
          <c-select v-model="model.frm" placeholder="请选择映射交易" dbCode="ATPTXT"/>
        </el-form-item>
      </c-col>
    </c-col>
    <c-col :span="12" class="col-right">
      <c-col :span="24">
        <el-form-item label="报文类型" prop="fmt">
          <c-select v-model="model.fmt" placeholder="请选择报文类型" dbCode="FMTTXT" style="width:100%"/>
        </el-form-item>
      </c-col>
    </c-col>
    <c-col :span="24">
          <c-col :span="24" style="text-align: left">
            <el-button type="primary" size="small" icon="el-icon-delete" @click="deleteSelected()">删除</el-button>
          </c-col>
        </c-col>
    <c-col :span="24" style="">
      <c-table style="text-align: center" :list="dataList" :paginationShow="true" :border="true"
        @selection-change="handleSelectionChangeDepartment">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="报文元素" width="auto">
          <template slot-scope="scope">
            <c-input v-model="scope.row.tag" style="width: 100%" placeholder="请输入报文元素"/>
          </template>
        </el-table-column>
        <el-table-column label="报文元素id" width="auto">
          <template slot-scope="scope">
            <c-input v-model="scope.row.subtag" style="width: 100%" placeholder="请输入报文元素id"/>
          </template>
        </el-table-column>
        <el-table-column label="映射模型组" prop="dstgrp" width="auto">
          <template slot-scope="scope">
            <c-select v-model="scope.row.dstgrp">
              <el-option v-for="item in dstData" :key="item.dstgrp" :label="item.dstgrp" :value="item.dstgrp"/>
            </c-select>
          </template>
        </el-table-column>
        <el-table-column label="映射字段" width="auto">
          <template slot-scope="scope">
            <c-input v-model="scope.row.dst" style="width: 100%" placeholder="请输入映射字段"/>
          </template>
        </el-table-column>
        <el-table-column label="覆盖标识" prop="ovwflg" width="auto">
          <template slot-scope="scope">
            <c-select v-model="scope.row.ovwflg">
              <el-option v-for="item in ovwflg" :key="item.value" :label="item.label" :value="item.value"/>
            </c-select>
          </template>
        </el-table-column>
        <el-table-column label="附加映射方法" prop="met" width="auto">
          <template slot-scope="scope">
            <c-select v-model="scope.row.met" dbCode="METTXT" :isCache="false"/>
          </template>
        </el-table-column>
        <el-table-column label="指示" width="auto">
          <template slot-scope="scope">
            <c-input v-model="scope.row.ins" style="width: 100%" placeholder="请输入指示"/>
          </template>
        </el-table-column>
         <el-table-column label="合并标志" width="auto">
          <template slot-scope="scope">
            <c-select v-model="scope.row.jonflg" style="width: 100%" placeholder="请输入指示">
              <el-option v-for="item in jonflg" :key="item.value" :label="item.label" :value="item.value"/>
            </c-select>
          </template>
        </el-table-column>
        <el-table-column label="" prop="det" width="auto" fixed="right">
          <template slot-scope="scope" slot="header">
            <c-button circle style="padding: 4px" class="el-icon-plus" size="mini" @click="addRowSetfol(scope)"/>
            <c-button style="padding: 4px" circle class="el-icon-minus" size="mini" @click="removeRowSetfol(scope)"/>
          </template>
          <template slot-scope="scope">
            <c-button style="margin-left: 0" size="small" type="primary" icon="el-icon-delete" 
            @click="deleteDepartmentRow(scope.$index, scope.row)">删除</c-button>
          </template>
        </el-table-column>
      </c-table>
    </c-col>
  </div>
</template>

<script>
import { selectAlldst } from '~/service/manage/swm.js';
import codes from "~/config/CodeTable";
import Utils from "~/utils"
export default {
  props:{
    model:Object,
    codes:Object,
    swmFn:Function
  },
  data(){
    return{
      ovwflg: [
        {label:"是", value:"0"},
        {label:"否", value:"N"},
      ],
      jonflg: [
        {label:"是", value:"X"}
      ],
      dstModel: {},
      dstData: [],
      multipleSelectionDepartment: [],
      dataList:[],
      dataModel:{
        fmt:'',
        mt:'',
        frm:'',
        tag:'',
        subtag:'',
        dst:'',
        ins:'',
        met:'',
        cpyflg:'',
        ovwflg:'',
        dstgrp:'',
        altmapflg:'',
        jonflg:'',
        swmUuid: Utils.generateUUID()
      }
    }
  },
  methods:{
    onSearch(){
      selectAlldst(this.dstModel).then((res) => {
        if(res.respCode == SUCCESS) {
          const list = res.data.list
          this.dstData = list
        }
      })
    },
    getCodesByKey(key) { 
      this.onSearch()
      return codes[key] || [];
    },
    addRowSetfol() {  
      let newRow = { ...this.newdialog };
      this.dataModel=newRow
      this.dataModel.fmt=this.model.fmt
      this.dataModel.mt=this.model.mt
      this.dataModel.frm=this.model.frm
      this.dataList.push(this.dataModel);
      this.swmFn(this.dataModel)
    },
    removeRowSetfol() {
      this.dataList.pop();
    },
    deleteDepartmentRow(index) {
      this.$confirm("此操作将删除信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
      .then(() => {
        this.dataList.splice(index, 1);
        this.$message({
          type: "success",
           message: "删除成功!"
        });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    handleSelectionChangeDepartment(val) {
      this.multipleSelectionDepartment = val;
    },
    deleteSelected(){
      this.$confirm('此操作将批量删除信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let val = this.multipleSelectionDepartment     
        if (val!="") {
          console.log("AAA"+val)
          val.forEach((val, index) => {                 
            this.dataList.forEach((v, i) => {   
              if (val.deptName === v.deptName) {
                this.dataList.splice(i, 1)
              }
            })
          })
          this.$notify.success("删除成功")
        }else{
          this.$notify.error("请选择数据")
        }
        
      })
    },
  }
}
</script>
<style >

</style>