firm.vue 5.2 KB

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