admin_operation/src/views/channel/channel.vue

<template>
  <div class="app-container">
      <div class="flex">
          <div class="w_input">
            <span  class="textSpan">通道名称:</span>
            <el-input v-model="body.channelName" style="width:200px" placeholder="通道名称" size="small" clearable />
            <el-button class="filter-item"  icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
            <el-button class="classitem" style="marginRight:50px" type="primary" plain icon="el-icon-plus" @click="dataFormAdd">新增</el-button>
          </div>
          <!-- <div class="w_input">
            <span  class="textSpan">　　通道ID:</span>
            <el-input v-model="body.channelId" style="width:200px" placeholder="通道ID" size="small" clearable />
          </div> -->
      </div>



      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">

            <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>

          <el-table-column label="通道名称" align="center" show-overflow-tooltip>
              <template slot-scope="scope" @click="hookLook(scope.row)">
                  <el-button type="text" @click="hookLook(scope.row)">{{ scope.row.channelName }}</el-button>
              </template>
          </el-table-column>

          <el-table-column label="折扣（%）" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span>{{ scope.row.discount }}</span>
              </template>
          </el-table-column>

          <el-table-column label="运营商"  align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span v-if="scope.row.operator==1">移动</span>
                  <span v-if="scope.row.operator==3">电信</span>
                  <span v-if="scope.row.operator==2">联通</span>
              </template>
          </el-table-column>

          <el-table-column label="是否有效" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <el-tag v-if="scope.row.isValid==0" type="danger" size="warning">无效</el-tag>
                  <el-tag v-if="scope.row.isValid==1" size="small">有效</el-tag>
              </template>
          </el-table-column>

          <el-table-column label="供应商名称" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span>{{ scope.row.supplierName }}</span>
              </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="280" align="center">
              <template slot-scope="scope">
                <el-button style="margin:5px" v-if="scope.row.isValid === 1" size="small" icon="el-icon-close" plain type="info" @click="ModifyStatus(scope.row,0)">无效</el-button>
                <el-button style="margin:5px" v-if="scope.row.isValid === 0" size="small" icon="el-icon-check" plain type="success" @click="ModifyStatus(scope.row,1)">有效</el-button>
                <el-button size="small" icon="el-icon-edit" type="warning" plain  @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" icon="el-icon-delete" type="danger" plain @click="ModifyDelete(scope.row,$event)">删除</el-button>
              </template>
          </el-table-column>
        
      </el-table>
        <!-- 分页 -->
      <div class="pagination">
      <el-pagination
        current-page.sync="body.current"
        :current-page="body.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="body.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    
     <!-- 新增与修改 -->
    <el-dialog :title="operation?'新增通道':'编辑通道'" :visible.sync="dialogFormVisible" width="85%" center>
      <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="通道名称" prop="channelName" :label-width="formLabelWidth"  >
              <el-input v-model="dataForm.channelName" placeholder="请输入通道名称" />
            </el-form-item>
          </el-col>
          
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="运营商" prop="operator" :label-width="formLabelWidth">
                <el-select size="small" :disabled="!operation" v-model="dataForm.operator" clearable placeholder="请选择运营商" style="width: 100%" >
                    <el-option
                    v-for="item in mobileOperator"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    />
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
             <el-form-item label="是否有效" :label-width="formLabelWidth" prop="isValid" >
                  <el-select size="small" v-model="dataForm.isValid"  placeholder="请选择是否有效" style="width: 100%" >
                  <el-option
                  v-for="item in status"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  />
                  </el-select>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                 <el-form-item label="供应商" prop="supplierId" :label-width="formLabelWidth">
                <el-select size="small" :disabled="!operation"  value-key="relationId" filterable v-model="dataForm.supplierId" clearable placeholder="请选择供应商" style="width: 100%" >
                    <el-option
                    v-for="item in listSupplier"
                    :key="item.supplierId"
                    :label="item.supplierName"
                    :value="item.supplierId"
                    />
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="折扣(%)" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.discount" placeholder="请输入折扣" @change="clicklong(dataForm.discount)" />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="备注" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.remark" placeholder="请输入备注" />
              </el-form-item>
          </el-col>
        </el-row>
      
      <!-- 添加产品 -->
       <el-card  shadow="hover" v-if="!operation">
        <div slot="header" class="clearfix">
          <span class="topClass">通道产品信息</span>
          <el-button style="float: right;" type="primary" plain @click="addprice(dataForm.operator)">添加通道产品</el-button>
          <el-button style="marginRight:20px;float: right;" type="success" plain @click="editpricing">结算价格批量定价</el-button>
        </div>
        <div>
          <!-- 添加 -->
          <el-table  ref="multipleTable" :data="dataForm.channelProductInfos"  @selection-change="handleSelectionChange">
             <el-table-column
                type="selection"
                width="55">
              </el-table-column>

          <el-table-column label="产品Id" align="center" width="100"  show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <el-input v-model="scope.row.packageId"></el-input> -->
              <span>{{ scope.row.packageId }}</span>
            </template>
          </el-table-column>
<!-- 
          <el-table-column label="通道产品ID" width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model="scope.row.channelProductId"></el-input>
            </template>
          </el-table-column> -->

          <el-table-column label="通道产品名称" align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <el-input  v-model="scope.row.channelProductName"></el-input> -->
              <span >{{ scope.row.productName }}</span>  
            </template>
          </el-table-column>

          <el-table-column label="面额"  width="100" align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <el-input  v-model="scope.row.price"></el-input> -->
              <span >{{ scope.row.facePrice }}</span>  
            </template>
          </el-table-column>
          <el-table-column label="结算价格"  align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <el-input  v-model="scope.row.price "></el-input>
              <!-- <span >{{ scope.row.account }}</span>   -->
            </template>
          </el-table-column>

          <el-table-column label="折扣"  align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <div v-if="scope.row.discount" >{{ parseFloat(scope.row.discount * 100).toFixed(4)}}  %</div>  
              <div v-else>{{ parseFloat(scope.row.price / scope.row.facePrice * 100).toFixed(4)}}  %</div>  
              <!-- <el-input  v-model="scope.row.price"></el-input> -->
            </template>
          </el-table-column>

          <el-table-column label="是否有效"  align="center" show-overflow-tooltip >
            <template slot-scope="scope" >
               <el-select size="small" v-model="scope.row.isValid"  placeholder="请选择是否有效" style="width: 90%" >
                  <el-option
                  v-for="item in status"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  />
                  </el-select>
              <!-- <span >{{ scope.row.aaa }}</span> -->
            </template>
          </el-table-column>

          <el-table-column label="操作"  width="165" min-width="150" align="center">
              <template slot-scope="scope">
                <el-button type="danger" plain icon="el-icon-delete" @click="priceDelete(scope.row,scope.$index,$event)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        </div>
       </el-card>
 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 结算价格批量定价 -->
    <el-dialog
    title="结算价格批量定价"
    :visible.sync="pricingVisible"
    width="40%"
    modal
    :close-on-click-modal="false"
    center
    >
      <div style="text-align:center;">
        <el-input v-model="morePricing" @keyup.enter.native="pricingClike" style="width:200px"></el-input>
        <span>
          %
        </span>
      </div>
    <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="">取 消</el-button> -->
        <el-button type="primary" @click="pricingClike">确 定</el-button>
    </span>
    </el-dialog>

    <!-- 产品选择 -->
    <el-dialog
    title="添加产品"
    :visible.sync="dialogVisible"
    width="58%"
    >
         <div class="edit_dev">

            <el-transfer
                v-model="value"
                filterable
                :props="{
                key: 'productId',
                label: 'productName'
                }"
                :format="{
                  noChecked: '${total}',
                  hasChecked: '${checked}/${total}'
                }"
                    :titles="['话费','话费']"
                :data="data">
            </el-transfer>
         </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickeAddprice">确 定</el-button>
    </span>
    </el-dialog>

     <!-- 查看 -->
    <el-dialog title="详情" :visible.sync="dialogFormLook" width="85%" center>
          <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="通道名称" prop="channelName" :label-width="formLabelWidth"  >
              <el-input v-model="dataForm.channelName" disabled placeholder="请输入供应商ID" />
            </el-form-item>
          </el-col>
          
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="运营商" prop="operator" :label-width="formLabelWidth">
                <el-select size="small"  disabled v-model="dataForm.operator" clearable placeholder="请选择运营商" style="width: 100%" >
                    <el-option
                    v-for="item in mobileOperator"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    />
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
             <el-form-item label="是否有效" :label-width="formLabelWidth" prop="isValid" >
                  <el-select size="small" disabled v-model="dataForm.isValid"  placeholder="请选择是否有效" style="width: 100%" >
                  <el-option
                  v-for="item in status"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  />
                  </el-select>
              </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                 <el-form-item label="供应商" prop="supplierId" :label-width="formLabelWidth">
                <el-select size="small" disabled value-key="relationId" filterable v-model="dataForm.supplierId" clearable placeholder="请选择供应商" style="width: 100%" >
                    <el-option
                    v-for="item in listSupplier"
                    :key="item.supplierId"
                    :label="item.supplierName"
                    :value="item.supplierId"
                    />
                </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="折扣(%)" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.discount" disabled placeholder="请输入折扣" @change="clicklong(dataForm.discount)" />
              </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item label="备注" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.remark" disabled placeholder="请输入备注" />
              </el-form-item>
          </el-col>
        </el-row>
      
      <!-- 添加产品 -->
       <el-card  shadow="hover" v-if="!operation">
        <div slot="header" class="clearfix">
          <span class="topClass">通道产品信息</span>
        </div>
        <div>
          <!-- 添加 -->
          <el-table  ref="multipleTable" :data="dataForm.channelProductInfos"  @selection-change="handleSelectionChange">
             <el-table-column
                type="selection"
                width="55">
              </el-table-column>

          <el-table-column label="产品Id" align="center" width="100"  show-overflow-tooltip>
            <template slot-scope="scope" >
              <span>{{ scope.row.packageId }}</span>
            </template>
          </el-table-column>

          <el-table-column label="通道产品名称" align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <span >{{ scope.row.productName }}</span>  
            </template>
          </el-table-column>

          <el-table-column label="面额"  width="100" align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <span >{{ scope.row.facePrice }}</span>  
            </template>
          </el-table-column>
          <el-table-column label="结算价格"  align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <span >{{ scope.row.price }}</span>  
            </template>
          </el-table-column>

          <el-table-column label="折扣"  align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <div v-if="scope.row.disCount" >{{ ((scope.row.disCount ) * 100).toFixed(2)}}  </div>   -->
              <div  >{{ parseFloat(scope.row.price / scope.row.facePrice * 100).toFixed(4)}}  %</div>  
              <!-- <div  >{{ parseFloat(scope.row.discount * 100).toFixed(4)}}  %</div>   -->
              <!-- <el-input  v-model="scope.row.price"></el-input> -->
            </template>
          </el-table-column>

          <el-table-column label="是否有效"  align="center" show-overflow-tooltip >
            <template slot-scope="scope" >
              <span v-if=" scope.row.isValid == 0">无效</span>
              <span v-if=" scope.row.isValid == 1">有效</span>
            </template>
          </el-table-column>
        </el-table>
        </div>
       </el-card>
 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormLook = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormLook = false">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import api from '@/api/channel.js'
import Vue from 'vue'
export default {
    data() {
        return {
            body:{
                channelId:"",
                size:10,
                current:1,
                channelName:""
            },
            data:[],
            value: [],
            tableData:[],
            total:0,
            operation: false, // true:新增, false:编辑
            dialogVisible:false,   //新增产品
            dialogFormVisible: false, // 控制弹出框
            dialogFormLook:false,   //查看弹出框
            pricingVisible:false,    //结算价格批量定价弹出框
            formLabelWidth: '100px',   //新增宽度
            loading:false,
            dataForm:{

            },
             mobileOperator:[
                {id:1,name:"移动"},
                {id:2,name:"联通"},
                {id:3,name:"电信"},
            ],
            listSupplier:[],
            rules2:{
              supplierId: [{ required: true, message: '请选择供应商名称', trigger: 'blur' }], 
              channelName: [{ required: true, message: '请输入通道名称', trigger: 'blur' }], 
              isValid: [{ required: true, message: '请选择是否有效', trigger: 'blur' }],
              operator: [{ required: true, message: '请选择运营商', trigger: 'blur' }],
            },
            status:[{
                id:1,
                name:"有效"
            },{
                id:0,
                name:"无效"
            }],
            morePricing:"",    //结算价格批量定价
            batch:[]          //批量所选的数据
        }
    },
    created(){
        this.reLoad()
        this.onsupplier()
    },
    methods: {
      onsupplier(){
        api.supplierInfo().then((res)=>{
          this.listSupplier =res.data.data
        })
      },
        // 重载数据
        reLoad(){
            this.loading = true
            api.channel(this.body).then((res) => {
                this.loading = false
                let list = res.data.data.records
                list.map((res)=>{
                  // console.log(res)
                  res.channelProductInfos.map((res=>{
                    res.price = (res.price / 10000).toFixed(4)
                    return res
                  }))
                  return res
                })
                // console.log(data)
                this.tableData = list
                this.total = res.data.data.total
            })
        },
        //新增弹框
        dataFormAdd(){
            this.operation = true // true:新增, false:编辑
            this.dialogFormVisible = true // 控制弹出框
            this.dataForm = {}
            if(this.$refs['dataForm']){
               this.$refs['dataForm'].resetFields();
           }
        },
        //编辑弹框
        handleEdit(row){
           this.operation = false // true:新增, false:编辑
           this.dialogFormVisible = true // 控制弹出框 
           this.dataForm = JSON.parse(JSON.stringify(row)) 
           this.batch == []
           this.morePricing = ""
           if(this.$refs['dataForm']){
               this.$refs['dataForm'].resetFields();
           }
        },
        //文本框折扣编辑
        clicklong(row){
          let code = this.dataForm.channelProductInfos
          let info = []
          let arry= code.forEach((res)=>{
            //结算价格 * 折扣(%) * 0.01
                res.price=(res.facePrice * row * 0.01).toFixed(4)
                  info.push(res)
              })
          this.dataForm.channelProductInfos = info    
              console.log(info)
            // console.log(number)
        },
        //折扣批量
        pricingClike(){
          // console.log(this.batch)
          let morePricing = this.morePricing
          let code = this.batch
          if(!morePricing){
            this.$message({
                type: 'error',
                message: "请输入结算价格批量定价"
              })
          }else{
            let info = []
            let data = this.dataForm.channelProductInfos
            let arry= code.forEach((res)=>{
              //结算价格 * 折扣(%) * 0.01
               res.price=(res.facePrice * morePricing * 0.01).toFixed(4)
                    // info.push(res)
                    return res
              //  let iscode =  data.forEach(item=>{
              //     if(res.productId == item.productId){

              //     }
              //  })
             
            })
             this.pricingVisible = false
             
            }
            this.$refs.multipleTable.clearSelection();
        },
        //删除API
        ModifyDelete(row,e){
            const that = this
            let target=e.target;
            if(target.nodeName == 'SPAN' || target.nodeName == 'I'){
                  target = e.target.parentNode;
            }
            target.blur();
            that.$confirm('此操作将删除通道：' + row.channelName, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                api.channelDelete(row.channelId).then((res)=>{
                     if (res.status === 200) {
                        that.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                        that.reLoad()
                     } else {
                        that.$message({
                            type: 'error',
                            message: res.msg
                        })
                     }
                })
            })    
        },
        //查看弹框
        hookLook(row){
             console.log(row)
            this.dialogFormLook = true
            this.dataForm={

            }
            let newObj=JSON.parse(JSON.stringify(row))
            this.dataForm = newObj
        },
        //通道产品删除
        priceDelete(row,index,e){
          console.log(e)
          let target=e.target;
          if(target.nodeName == 'SPAN' || target.nodeName == 'I'){
                target = e.target.parentNode;
          }
          target.blur();
          if(row.channelProductId){
            api.productDelete(row.channelProductId).then((res)=>{
              this.dataForm.channelProductInfos.splice(index,1)
              this.$message({
                  type: 'success',
                  message: '删除成功'
                })
            })
          }else{
            this.dataForm.channelProductInfos.splice(index,1)
          }
          console.log(this.dataForm.channelProductInfos)
        },
        //新增和修改API
        submitForm(){
         
          this.$refs['dataForm'].validate((valid) => {
                  if (valid) {
                    if (!this.operation) {
                        let dataForm = this.dataForm
                        let data=dataForm.channelProductInfos.map((res)=>{
                          if(res.price > 10000){
                            return res
                          }else{
                            res.price = res.price * 10000
                            return res
                          }
                        })
                        console.log(dataForm)
                      // 编辑
                      api.update(dataForm).then(response => {
                        if (response.status === 200) {
                          this.$message({
                            type: 'success',
                            message: '操作成功'
                          })
                          this.dialogFormVisible = false
                          this.reLoad()
                        } else {
                          this.$message({
                            type: 'error',
                            message: response.data.msg
                          })
                        }
                      })
                    } else {
                      console.log(this.dataForm)
                    //   // 添加
                      api.axiosAdd(this.dataForm).then(response => {
                        if (response.status === 200) {
                          this.$message({
                            type: 'success',
                            message: '操作成功'
                          })
                          this.dialogFormVisible = false
                          this.reLoad()
                        } else {
                          this.$message({
                            type: 'error',
                            message: response.data.msg
                          })
                        }
                      })
                    }
                  }
                })
        },
        //结算价格批量定价
        editpricing(){
          console.log(this.batch)
          if(this.batch.length == 0){
              this.$message({
                type: 'error',
                message: "请至少选择一项"
              })
          }else{
             this.pricingVisible = true
          }
        },
        //新增产品
        addprice(row){
          if(this.dataForm.operator == null || this.dataForm.operator == ""){
            this.$message({
                type: 'error',
                message: "无产品"
              })
          }else{
            api.productAdd(row).then(res=>{
              let dataForm=this.dataForm.channelProductInfos
              let code = res.data.data
              if(dataForm.length == 0){
                this.data=code
              }else{
                // 去重产品            
                  var set=dataForm.map(item=>item.productName)
                  var resArr=code.filter(item=>!set.includes(item.productName))
                  this.data=resArr
                  console.log(resArr)
              }
              // console.log(code)
              this.dialogVisible = true
            })
          }
        },
        //确认产品
        clickeAddprice(){
           let channelId=this.dataForm.channelId
           let value = this.value;
           let data =this.data;
           let code= value.map(item1=>{
            let arry=  data.map(item2=>{
              console.log(item1)
                  if(item1 == item2.productId){
                    let form = {
                      channelId:channelId,
                       price : item2.productPrice,
                       facePrice : item2.productPrice,
                       productName:item2.productName,
                       packageId:item2.packageId,
                       isValid:1,
                    }
                    //  console.log(form)
                      this.dataForm.channelProductInfos.push(form)
                  }
                  //  return info
              })
            })
            this.dialogVisible = false
            this.value = []
        },
        //是否有效
         ModifyStatus(row,i){
          this.$confirm('是否修改 '+row.channelName+' 的状态', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(()=>{
            let code = JSON.parse(JSON.stringify(row))
            code.isValid = i   // 2:暂停   1：有效
            let info = {
              isValid:code.isValid,
              channelId:code.channelId
            }
            api.update(info).then(response => {
            if (response.status == "200") {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.reLoad()
            } else {
              this.$message({
                type: 'error',
                message: response.data.msg
              })
            }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });          
          });
          
    },
        // 搜索
        Search(){
            this.body.current = 1
            this.reLoad()
        },
        // 修改状态
        ModifyState(operator){
            operator.isValid ^= 1
        },
        //多选
        handleSelectionChange(rows){
          this.batch = rows
        },
        
        ///分页
        handleSizeChange: function(val) {
            this.body.size = val
            this.reLoad()
        },
        handleCurrentChange: function(val) {
            this.body.current = val
            this.reLoad()
        }
    },
}
</script>

<style scoped>
.flex{
     width: 90%;
     display: flex;
     flex-direction: row;
     margin-bottom: 10px;
     /* flex-wrap: wrap; */
     justify-content: flex-start;
}

.flexend{
   display: flex;
   justify-content: flex-end;
   /* padding-right: 2rem; */
   width: 100%;
   /* margin: 0 auto; */
   padding-bottom: 20px;
}
.el-card {
    border: 0px solid #e6ebf5;
    margin-top: 20px;
}
.edit_dev >>> .el-transfer-panel {
     width:250px;
   }
</style>