firm.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <!--
  2. firm 厂商
  3. -->
  4. <template>
  5. <el-dialog title="选择型号" :visible.sync="dialog.firm" width="600px">
  6. <div>
  7. <div id="firm">
  8. <div class="title-search" style="margin-bottom: 10px;">
  9. <el-input
  10. placeholder="输入厂家名称、品牌名、型号进行查找"
  11. v-model="search"
  12. size="small"
  13. style="width:400px;"
  14. clearable
  15. ></el-input>
  16. <el-button @click="searchKey" size="small">查找</el-button>
  17. </div>
  18. <el-radio-group v-model="radio" style="width:100%;">
  19. <el-table :data="tableData" style="width: 100%" height="300px">
  20. <el-table-column label="生产厂家">
  21. <template slot-scope="scope">
  22. <el-radio v-model="radio" :label="scope.row">{{scope.row.venderName || "--"}}</el-radio>
  23. </template>
  24. </el-table-column>
  25. <el-table-column prop="brand" label="品牌"></el-table-column>
  26. <el-table-column prop="name" label="型号"></el-table-column>
  27. <el-table-column label="技术参数">
  28. <template slot-scope="scope">
  29. <el-button type="text" @click="lookParam(scope.row)">技术参数</el-button>
  30. </template>
  31. </el-table-column>
  32. </el-table>
  33. </el-radio-group>
  34. <my-pagination :page="page" @change="changed" style="margin-top:10px;"></my-pagination>
  35. <p style="height:40px;line-height:40px;text-align:center;color:#9E9E9E;">
  36. 找不到想要的型号? 赶快去
  37. <i style="color:#46B0FF;cursor: pointer;">厂家库</i>维护吧
  38. </p>
  39. <div class="footer">
  40. <el-button
  41. type="primary"
  42. @click="getChange"
  43. style="display:block;margin: 10px auto 0;"
  44. >确 定</el-button>
  45. </div>
  46. </div>
  47. </div>
  48. <param-details :isLoad="isLoad" :data="data"></param-details>
  49. </el-dialog>
  50. </template>
  51. <script>
  52. import myPagination from "@/components/common/myPagination";
  53. import paramDetails from "@/components/business_space/dialogs/list/paramDetails"
  54. import { getSpecList } from "@/api/scan/request"
  55. export default {
  56. components: {
  57. myPagination,
  58. paramDetails
  59. },
  60. props: {
  61. dialog: {
  62. type: Object,
  63. default: function () {
  64. return {
  65. firm: false
  66. };
  67. }
  68. },
  69. mess: {
  70. type: [Object, String]
  71. }
  72. },
  73. data() {
  74. return {
  75. search: "", //搜索文案
  76. radio: "",
  77. tableData: [
  78. ],
  79. data: {},
  80. isLoad: {
  81. paramShow: false
  82. },
  83. page: {
  84. size: 10,
  85. sizes: [10, 30, 50, 100, 150, 200],
  86. total: 0,
  87. currentPage: 1
  88. },
  89. };
  90. },
  91. created() { },
  92. mounted() { },
  93. methods: {
  94. changed() {
  95. this.getData()
  96. },
  97. //查询技术参数
  98. lookParam(data) {
  99. this.data = data
  100. this.isLoad.paramShow = true
  101. },
  102. getChange() {
  103. if (!!this.radio) {
  104. this.$emit("changeFirm", this.radio)
  105. this.dialog.firm = false
  106. } else {
  107. this.$message("请选择型号")
  108. }
  109. },
  110. searchKey() {
  111. this.changePage()
  112. },
  113. changePage() {
  114. this.page = {
  115. size: 10,
  116. sizes: [10, 30, 50, 100, 150, 200],
  117. total: 0,
  118. currentPage: 1
  119. }
  120. this.getData()
  121. },
  122. getData() {
  123. getSpecList({
  124. limit: {
  125. skip: this.page.size * (this.page.currentPage - 1),
  126. count: this.page.size
  127. },
  128. eqFamily: this.mess.deviceId,
  129. name: this.search
  130. }, res => {
  131. this.page.total = res.totalCount
  132. this.tableData = res.content
  133. console.log(this.tableData)
  134. })
  135. }
  136. },
  137. watch: {
  138. dialog: {
  139. deep: true,
  140. handler: function () {
  141. if (this.dialog.firm) {
  142. console.log(this.mess)
  143. this.changePage()
  144. }
  145. }
  146. }
  147. }
  148. };
  149. </script>
  150. <style lang="less">
  151. #firm {
  152. .el-table thead {
  153. tr {
  154. th {
  155. background-color: #f5f7fa;
  156. }
  157. }
  158. }
  159. }
  160. </style>