ibms/src/components/business_space/dialogs/list/firm.vue

<!--
    firm 厂商
-->
<template>
  <el-dialog title="选择型号" :visible.sync="dialog.firm" width="900px">
    <div>
      <div id="firm">
        <div class="title-search query-form" style="padding: 10px;margin-bottom: 10px;">
          <el-input
            placeholder="输入厂家名称、品牌名、型号进行查找"
            v-model="search"
            size="small"
            style="width:300px;margin-right: 10px;"
            clearable
          ></el-input>
          <el-button @click="searchKey" size="small">查找</el-button>
          <el-select v-model="value" style="margin-left:10px;" @change="handleChangeType" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <el-radio-group v-model="radio" style="width:100%;">
          <el-table class="data-table" border :data="tableData" style="width: 100%" height="300px">
            <el-table-column header-align='center' label="生产厂家">
              <template slot-scope="scope">
                <el-radio v-model="radio" :label="scope.row">{{scope.row.venderName || "--"}}</el-radio>
              </template>
            </el-table-column>
            <el-table-column header-align='center' prop="brandName" label="品牌"></el-table-column>
            <el-table-column header-align='center' prop="name" label="型号"></el-table-column>
            <el-table-column header-align='center' label="技术参数">
              <template slot-scope="scope">
                <el-button type="text"  @click="lookParam(scope.row)">技术参数</el-button>
                <el-button :disabled="scope.row.specificationId?false:true" type="text" @click="lookParam(scope.row)">技术参数</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-radio-group>
        <div class="right" style="background: #fff;">
            <p style="height:40px;line-height:40px;text-align:center;color:#9E9E9E; float: left;">
                找不到想要的型号？ 赶快去
                <i style="color:#46B0FF;cursor: pointer;">厂家库</i>维护吧
            </p>
            <my-pagination :page="page" @change="changed" style="margin-top:10px;"></my-pagination>
        </div>

      </div>
    </div>
    <param-details :isLoad="isLoad" :data="data"></param-details>
    <div slot="footer">
          <el-button
            type="primary"
            @click="getChange"
          >确 定</el-button>
        </div>
  </el-dialog>
</template>
<script>

import myPagination from "@/components/common/myPagination";
import paramDetails from "@/components/business_space/dialogs/list/paramDetails"
import { getSpecList, getBrandList, getManufacturerList } from "@/api/scan/request"

    export default {
  components: {
    myPagination,
    paramDetails
  },
  props: {
    dialog: {
      type: Object,
      default: function () {
        return {
          firm: false
        };
      }
    },
    mess: {
      type: [Object, String]
    }
  },
  data() {
    return {
      search: "", //搜索文案
      radio: "",
      value: "specification",//当前选择的查看类型
      options: [{
          value: 'specification',
          label: '选型号'
        }, {
          value: 'brand',
          label: '选生产厂家-品牌'
        }, {
          value: 'manufacturer',
          label: '选生产厂家'
      }],
      tableData: [],
      data: {},
      isLoad: {
        paramShow: false
      },
      page: {
        size: 50,
        sizes: [10, 30, 50, 100, 150, 200],
        total: 0,
        currentPage: 1
      },
    };
  },
  created() { },
  mounted() { },
  methods: {
    changed() {
      this.getData()
    },
    //查询技术参数
    lookParam(data) {
      this.data = data
      this.isLoad.paramShow = true
    },
    getChange() {
      if (!!this.radio) {
        this.$emit("changeFirm", this.radio)
        this.dialog.firm = false
      } else {
        this.$message("请选择型号")
      }
    },
    searchKey() {
      this.changePage()
    },
    changePage() {
      this.page = {
        size: 50,
        sizes: [10, 30, 50, 100, 150, 200],
        total: 0,
        currentPage: 1
      }
      this.getData()
    },
    handleChangeType(item) {
      this.page.total = 0
      this.tableData = []
      this.getData()
    },
    getData() {
      if(this.value == 'specification') {//型号
        getSpecList({
          limit: {
            skip: this.page.size * (this.page.currentPage - 1),
            count: this.page.size
          },
          eqFamily: this.mess.deviceId,
          name: this.search
        }, res => {
          this.page.total = res.totalCount
          this.tableData = res.content
        })
      } else if(this.value == 'brand') {//生产厂家-品牌
        getBrandList({
          limit: {
            skip: this.page.size * (this.page.currentPage - 1),
            count: this.page.size
          },
          name: this.search
        }, res => {
          this.page.total = res.totalCount
          this.tableData = res.content
        })
      } else if(this.value == 'manufacturer') {//生产厂家
        getManufacturerList({
          limit: {
            skip: this.page.size * (this.page.currentPage - 1),
            count: this.page.size
          },
          name: this.search
        }, res => {
          this.page.total = res.totalCount
          this.tableData = res.content
        })
      }
      console.log(this.tableData)
    }
  },
  watch: {
    dialog: {
      deep: true,
      handler: function () {
        if (this.dialog.firm) {
          this.value = 'specification'
          this.changePage()
        }
      }
    }
  }
};
</script>

<style lang="less">
#firm {
    height: 455px;
    overflow-y: auto;
  .el-table thead {
    tr {
      th {
        background-color: #f5f7fa;
      }
    }
  }
}
</style>