productFactory.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. <template>
  2. <div>
  3. <el-dialog
  4. title="生产厂家选择"
  5. width="1000px"
  6. :close-on-click-modal="false"
  7. :append-to-body="true"
  8. v-dialogDrag
  9. class="userDialog"
  10. :visible.sync="visible"
  11. >
  12. <el-container style="height: 500px">
  13. <el-container>
  14. <el-header style="text-align: left; font-size: 12px; height: 30px">
  15. <el-form
  16. size="small"
  17. :inline="true"
  18. ref="searchForm"
  19. :model="searchForm"
  20. @keyup.enter.native="refreshList()"
  21. @submit.native.prevent
  22. >
  23. <el-form-item prop="param" label="名称/编号" >
  24. <el-input
  25. size="small"
  26. v-model="searchForm.param"
  27. placeholder="输入名称/编号查询"
  28. clearable
  29. ></el-input>
  30. </el-form-item>
  31. <!-- <el-form-item prop="name">
  32. <el-input
  33. size="small"
  34. v-model="searchForm.name"
  35. placeholder="名称"
  36. clearable
  37. ></el-input>
  38. </el-form-item> -->
  39. <el-form-item>
  40. <el-button
  41. type="primary"
  42. @click="refreshList()"
  43. size="small"
  44. icon="el-icon-search"
  45. >查询</el-button
  46. >
  47. <el-button
  48. @click="resetSearch()"
  49. size="small"
  50. icon="el-icon-refresh-right"
  51. >重置</el-button>
  52. </el-form-item>
  53. </el-form>
  54. </el-header>
  55. <el-main>
  56. <el-table
  57. :data="dataList"
  58. v-loading="loading"
  59. size="small"
  60. border
  61. ref="contractTable"
  62. @row-click="rowSelect"
  63. @select="handleSelectionChange"
  64. height="calc(100% - 40px)"
  65. style="width: 100%"
  66. >
  67. <el-table-column
  68. type="selection"
  69. header-align="center"
  70. align="center"
  71. width="50"
  72. >
  73. </el-table-column>
  74. <el-table-column
  75. prop="code"
  76. header-align="center"
  77. align="center"
  78. sortable="custom"
  79. min-width="90"
  80. label="code"
  81. >
  82. </el-table-column>
  83. <el-table-column
  84. prop="name"
  85. header-align="center"
  86. align="left"
  87. sortable="custom"
  88. min-width="90"
  89. label="名称"
  90. >
  91. </el-table-column>
  92. </el-table>
  93. <el-pagination
  94. @size-change="sizeChangeHandle"
  95. @current-change="currentChangeHandle"
  96. :current-page="searchForm.pageNo"
  97. :page-sizes="[5, 10, 15, 20]"
  98. :page-size="searchForm.pageSize"
  99. :total="total"
  100. layout="total, sizes, prev, pager, next, jumper"
  101. >
  102. </el-pagination>
  103. </el-main>
  104. </el-container>
  105. </el-container>
  106. <span slot="footer">
  107. <el-button
  108. size="small"
  109. @click="visible = false"
  110. icon="el-icon-circle-close"
  111. >关闭</el-button
  112. >
  113. <el-button
  114. size="small"
  115. type="primary"
  116. icon="el-icon-circle-check"
  117. @click="doSubmit()"
  118. >确定</el-button
  119. >
  120. </span>
  121. </el-dialog>
  122. </div>
  123. </template>
  124. <script>
  125. import { getProductFactory } from '@/api/changeApply/basic'
  126. export default {
  127. data() {
  128. return {
  129. searchForm: {
  130. // code: '',
  131. // name: '',
  132. param: '',
  133. pageNo: 1,
  134. pageSize: 10,
  135. },
  136. dataListAllSelections: [], // 所有选中的数据包含跨页数据
  137. idKey: "id", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
  138. dataList: [],
  139. total: 0,
  140. orders: [],
  141. loading: false,
  142. visible: false,
  143. };
  144. },
  145. props: {
  146. selectData: {
  147. type: Array,
  148. default: () => {
  149. return [];
  150. },
  151. },
  152. // 是否启用单选
  153. single: {
  154. type: Boolean,
  155. default: false
  156. }
  157. },
  158. methods: {
  159. init() {
  160. this.visible = true;
  161. this.$nextTick(() => {
  162. this.dataListAllSelections = JSON.parse(JSON.stringify(this.selectData));
  163. this.resetSearch();
  164. });
  165. },
  166. // 获取数据列表
  167. refreshList() {
  168. this.loading = true;
  169. // axios({
  170. // url: "http://172.16.62.241:8000/drp-admin/system/material/list", // 自己的接口路径
  171. // method: "post",
  172. // data: {
  173. // // current: this.pageNo,
  174. // size: this.pageSize,
  175. // // orders: this.orders,
  176. // // ...this.searchForm,
  177. // },
  178. getProductFactory(this.searchForm).then(({ data }) => {
  179. console.log('data',data)
  180. this.dataList = data.tableBody;
  181. this.total = data.total;
  182. this.loading = false;
  183. this.$nextTick(() => {
  184. this.setSelectRow();
  185. });
  186. });
  187. },
  188. // 每页数
  189. sizeChangeHandle(val) {
  190. this.searchForm.pageSize = val;
  191. this.refreshList();
  192. },
  193. // 当前页
  194. currentChangeHandle(val) {
  195. this.searchForm.pageNo = val;
  196. this.refreshList();
  197. },
  198. // 排序
  199. resetSearch() {
  200. this.$refs['searchForm'].resetFields();
  201. this.searchForm.pageNo = 1;
  202. this.refreshList();
  203. },
  204. // 表格选中数据
  205. rowSelect(row, column, event) {
  206. this.$refs.contractTable.clearSelection();
  207. this.$refs.contractTable.toggleRowSelection(row);
  208. this.dataListAllSelections = this.single ? [row] : selection
  209. },
  210. // 选中数据
  211. handleSelectionChange(selection, row) {
  212. if (this.single && selection.length > 1) {
  213. this.$refs.contractTable.clearSelection();
  214. this.$refs.contractTable.toggleRowSelection(row);
  215. }
  216. this.dataListAllSelections = this.single ? [row] : selection
  217. },
  218. // 设置选中的方法
  219. setSelectRow() {
  220. this.$refs.contractTable.clearSelection();
  221. if (!this.dataListAllSelections || this.dataListAllSelections.length <= 0) {
  222. return;
  223. }
  224. for (let i = 0; i < this.dataList.length; i++) {
  225. if (this.dataListAllSelections.some(item => item[this.idKey] == this.dataList[i][this.idKey])) {
  226. // 设置选中,记住table组件需要使用ref="table"
  227. this.$refs.contractTable.toggleRowSelection(this.dataList[i], true);
  228. }
  229. }
  230. },
  231. doSubmit() {
  232. this.visible = false;
  233. console.log('选择的数据?',this.dataListAllSelections)
  234. this.$emit("doSubmit", this.dataListAllSelections);
  235. },
  236. },
  237. };
  238. </script>
  239. <style lang="scss">
  240. .userDialog {
  241. .el-dialog__body {
  242. padding: 10px 0px 0px 10px;
  243. color: #606266;
  244. font-size: 14px;
  245. word-break: break-all;
  246. }
  247. .el-main {
  248. padding: 20px 20px 5px 20px;
  249. .el-pagination {
  250. margin-top: 5px;
  251. }
  252. }
  253. }
  254. </style>