firm.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  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. <el-select v-model="value" style="margin-left:10px;" @change="handleChangeType" placeholder="请选择">
  18. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  19. </el-select>
  20. </div>
  21. <el-radio-group v-model="radio" style="width:100%;">
  22. <el-table class="data-table" border :data="tableData" style="width: 100%" height="300px">
  23. <el-table-column header-align='center' label="生产厂家">
  24. <template slot-scope="scope">
  25. <el-radio v-model="radio" :label="scope.row">{{scope.row.venderName || "--"}}</el-radio>
  26. </template>
  27. </el-table-column>
  28. <el-table-column header-align='center' prop="brandName" label="品牌"></el-table-column>
  29. <el-table-column header-align='center' prop="name" label="型号"></el-table-column>
  30. <el-table-column header-align='center' label="技术参数">
  31. <template slot-scope="scope">
  32. <el-button :disabled="scope.row.specificationId?false:true" type="text" @click="lookParam(scope.row)">技术参数</el-button>
  33. </template>
  34. </el-table-column>
  35. </el-table>
  36. </el-radio-group>
  37. <div class="right" style="background: #fff;">
  38. <p style="height:40px;line-height:40px;text-align:center;color:#9E9E9E; float: left;">
  39. 找不到想要的型号? 赶快去
  40. <i style="color:#46B0FF;cursor: pointer;">厂家库</i>维护吧
  41. </p>
  42. <my-pagination :page="page" @change="changed" style="margin-top:10px;"></my-pagination>
  43. </div>
  44. </div>
  45. </div>
  46. <param-details :isLoad="isLoad" :data="data"></param-details>
  47. <div slot="footer">
  48. <el-button
  49. type="primary"
  50. @click="getChange"
  51. >确 定</el-button>
  52. </div>
  53. </el-dialog>
  54. </template>
  55. <script>
  56. import myPagination from "@/components/common/myPagination";
  57. import paramDetails from "@/components/business_space/dialogs/list/paramDetails"
  58. import { getSpecList, getBrandList, getManufacturerList } from "@/api/scan/request"
  59. export default {
  60. components: {
  61. myPagination,
  62. paramDetails
  63. },
  64. props: {
  65. dialog: {
  66. type: Object,
  67. default: function () {
  68. return {
  69. firm: false
  70. };
  71. }
  72. },
  73. mess: {
  74. type: [Object, String]
  75. }
  76. },
  77. data() {
  78. return {
  79. search: "", //搜索文案
  80. radio: "",
  81. value: "specification",//当前选择的查看类型
  82. options: [{
  83. value: 'specification',
  84. label: '选型号'
  85. }, {
  86. value: 'brand',
  87. label: '选生产厂家-品牌'
  88. }, {
  89. value: 'manufacturer',
  90. label: '选生产厂家'
  91. }],
  92. tableData: [],
  93. data: {},
  94. isLoad: {
  95. paramShow: false
  96. },
  97. page: {
  98. size: 50,
  99. sizes: [10, 30, 50, 100, 150, 200],
  100. total: 0,
  101. currentPage: 1
  102. },
  103. };
  104. },
  105. created() { },
  106. mounted() { },
  107. methods: {
  108. changed() {
  109. this.getData()
  110. },
  111. //查询技术参数
  112. lookParam(data) {
  113. this.data = data
  114. this.isLoad.paramShow = true
  115. },
  116. getChange() {
  117. if (!!this.radio) {
  118. this.$emit("changeFirm", this.radio)
  119. this.dialog.firm = false
  120. } else {
  121. this.$message("请选择型号")
  122. }
  123. },
  124. searchKey() {
  125. this.changePage()
  126. },
  127. changePage() {
  128. this.page = {
  129. size: 50,
  130. sizes: [10, 30, 50, 100, 150, 200],
  131. total: 0,
  132. currentPage: 1
  133. }
  134. this.getData()
  135. },
  136. handleChangeType(item) {
  137. this.page.total = 0
  138. this.tableData = []
  139. this.getData()
  140. },
  141. getData() {
  142. if(this.value == 'specification') {//型号
  143. getSpecList({
  144. limit: {
  145. skip: this.page.size * (this.page.currentPage - 1),
  146. count: this.page.size
  147. },
  148. eqFamily: this.mess.deviceId,
  149. name: this.search
  150. }, res => {
  151. this.page.total = res.totalCount
  152. this.tableData = res.content
  153. })
  154. } else if(this.value == 'brand') {//生产厂家-品牌
  155. getBrandList({
  156. limit: {
  157. skip: this.page.size * (this.page.currentPage - 1),
  158. count: this.page.size
  159. },
  160. name: this.search
  161. }, res => {
  162. this.page.total = res.totalCount
  163. this.tableData = res.content
  164. })
  165. } else if(this.value == 'manufacturer') {//生产厂家
  166. getManufacturerList({
  167. limit: {
  168. skip: this.page.size * (this.page.currentPage - 1),
  169. count: this.page.size
  170. },
  171. name: this.search
  172. }, res => {
  173. this.page.total = res.totalCount
  174. this.tableData = res.content
  175. })
  176. }
  177. console.log(this.tableData)
  178. }
  179. },
  180. watch: {
  181. dialog: {
  182. deep: true,
  183. handler: function () {
  184. if (this.dialog.firm) {
  185. this.value = 'specification'
  186. this.changePage()
  187. }
  188. }
  189. }
  190. }
  191. };
  192. </script>
  193. <style lang="less">
  194. #firm {
  195. height: 455px;
  196. overflow-y: auto;
  197. .el-table thead {
  198. tr {
  199. th {
  200. background-color: #f5f7fa;
  201. }
  202. }
  203. }
  204. }
  205. </style>