kd-aiot-frontend/src/views/factoryModel/station/components/AssetSelection.vue

<template>
  <div class="container">
    <!-- 单据弹窗 -->
    <el-dialog
      title="选择设备"
      :before-close="handleClose"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="60%"
    >
      <el-form label-width="60px">
        <el-row>
          <el-col :span="6">
             <el-form-item label="编码：">
               <el-input
                 clearable
                 placeholder="请输入"
                 v-model.trim="search.code"
               ></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="名称：">
               <el-input
                 clearable
                 v-model="search.name"
                 placeholder="请输入"
               ></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item label="型号：">
               <el-input
                 clearable
                 v-model="search.model"
                 placeholder="请输入"
               ></el-input>
             </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item  label-width="20px">
                <el-button type="primary" @click="getList">搜索</el-button>
                <el-button @click="reset">重置</el-button>
             </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
         :data="tableData"
         height="450"
         highlight-current-row
         @row-click="single"
       >
         <el-table-column label="设备编码" prop="code" width="200"></el-table-column>
         <el-table-column label="设备分类" prop="name"></el-table-column>
         <el-table-column label="设备名称" prop="remark"></el-table-column>
         <el-table-column label="型号" prop="name"></el-table-column>
         <el-table-column label="供应商" prop="remark"></el-table-column>
         <el-table-column label="选择" align="center">
            <template slot-scope="scope">
         	 <el-radio class="radio" v-model="radio" :label="scope.row.id"><i></i></el-radio>
            </template>
         </el-table-column>
       </el-table>
      <div class="pagination">
         <el-pagination
           background
           layout="total, sizes, prev, pager, next, jumper"
           :total="total"
           :page-sizes="[10, 20, 50, 100]"
           :page-size="pagination.size"
           :current-page.sync="pagination.pageNum"
           @current-change="handleCurrent"
           @size-change="handleSize"
         >
         </el-pagination>
       </div>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">关 闭</el-button>
        <el-button size="small" @click="sumbit" type="primary">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import { getAssetList } from '@/api/ledgerAssets';
export default {
  data() {
    return {
      tableData:[],
      search:{},
      pagination: {
        pageNum: 1,
        size: 10,
      },
      total: 0,
      radio: '',
      current:null,
      dialogVisible: false
    };
  },
  created() {},
  methods: {
    // 单击获取id
    single (row) {
        this.current = row
        this.radio = row.id
    },
    open() {
      this.dialogVisible = true;
      this.getList();
    },
    getList(){
       let params = {
          rootCategoryLevelId:'1666337718796607490',
          ...this.search,
          ...this.pagination
        }
       getAssetList(params).then(res=>{
           console.log('rrr',res)
       })
    },
    reset(){
       this.search={}
       this.getList()
    },
    handleCurrent (page) {
      this.pagination.pageNum = page
      this.getList()
    },
    handleSize (size) {
      this.pagination.pageNum = 1
      this.pagination.size = size
      this.getList()
    },
    //保存
    sumbit() {
      if (this.selectStafflist.length === 0) {
        this.$message.warning('请选择设备');
      } else {
        this.$emit('confirm', JSON.parse(JSON.stringify(this.selectStafflist)));
        this.handleClose();
      }
    },
    handleClose() {
      this.staffList = [];
      this.selectStafflist = [];
      this.dialogVisible = false;
    }
  }
};
</script>

  <style lang='scss' scoped>
.container {
  padding: 10px 0;
}
.zw-container {
  height: 500px;
}
.zw-header-title {
  display: inline-block;
  margin-right: 10px;
  font-weight: 600;
}
.details-title {
  line-height: 32px;
  height: 32px;
}
.zw-page-list-p {
  font-size: 14px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  // align-items: center;
  .zw-page-list-right {
    display: flex;
  }
}
.zw-page {
  background: #fff;
  //   padding: 20px 0;
  .zw-page-left {
    padding: 0 10px;
  }
  .zw-page-main {
    padding: 0 10px;
    .zw-page-main-list {
      span {
        margin-right: 10px;
      }
      .zw-page-span-num {
        font-size: 12px;
        color: #157a2c;
      }
      .zw-page-p-operation {
        text-align: right;
        // width: 200px;
      }
      .zw-page-operation-num {
        width: 100px;
        margin: 0 10px;
      }
    }
    .zw-page-list-more {
      text-align: center;
    }
  }
  .zw-page-right {
    .zw-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 32px;
    }
    span {
      margin-right: 10px;
    }
    .zw-page-span-num {
      font-size: 12px;
      color: #157a2c;
    }
  }
}
.notes {
  font-size: 12px;
  color: #909090;
}
</style>