index.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. <template>
  2. <div class="table-container">
  3. <!-- <vab-query-form> -->
  4. <!-- <vab-query-form-left-panel> -->
  5. <el-row>
  6. <el-button @click="getBack" style="float: right; margin:0 0 10px 0">返回</el-button>
  7. </el-row>
  8. <el-form ref="form" :model="queryForm" :inline="true" @submit.native.prevent>
  9. <el-form-item label="编码"><el-input placeholder="请输入" v-model="form.code"></el-input></el-form-item>
  10. <el-form-item label="名称"><el-input placeholder="请输入" v-model="form.name"></el-input></el-form-item>
  11. <el-form-item label="型号"><el-input placeholder="请输入" v-model="form.model"></el-input></el-form-item>
  12. <el-form-item label="统一编码"><el-input placeholder="请输入" v-model="form.uniformcode"></el-input></el-form-item>
  13. <el-form-item label="场站编号"><el-input placeholder="请输入" v-model="form.windpowerstationid"></el-input></el-form-item>
  14. <!-- <el-form-item label="类型">
  15. <el-select v-model="form.type" placeholder="请选择">
  16. <el-option
  17. v-for="item in typeOptions"
  18. :key="item.value"
  19. :label="item.label"
  20. :value="item.value">
  21. </el-option>
  22. </el-select>
  23. </el-form-item> -->
  24. <el-form-item>
  25. <el-button icon="el-icon-search" type="primary" native-type="submit" @click="fetchData">查询</el-button>
  26. </el-form-item>
  27. <el-form-item style="float: right;">
  28. <el-button icon="el-icon-plus" type="primary" @click="handleAdd">添加</el-button>
  29. <el-button icon="el-icon-delete" type="danger" @click="handleDelete">删除</el-button>
  30. </el-form-item>
  31. </el-form>
  32. <!-- </vab-query-form-left-panel> -->
  33. <!-- <vab-query-form-right-panel> -->
  34. <!-- <UploadExcel style="margin-left: 10px;" @getResult="getMyExcelData"></UploadExcel>
  35. <ExportExcel :exportList="exportExcel" partsName="公司"></ExportExcel> -->
  36. <!-- </vab-query-form-right-panel> -->
  37. <!-- </vab-query-form> -->
  38. <el-table ref="tableSort" v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText"
  39. :height="height" @selection-change="setSelectRows">
  40. <el-table-column show-overflow-tooltip type="selection" width="55"></el-table-column>
  41. <el-table-column show-overflow-tooltip label="id" prop="id" align="center" sortable></el-table-column>
  42. <el-table-column show-overflow-tooltip label="统一编码" prop="code" align="center" sortable></el-table-column>
  43. <el-table-column show-overflow-tooltip label="名称" prop="name" align="center" sortable></el-table-column>
  44. <el-table-column show-overflow-tooltip label="型号" prop="model" align="center" sortable></el-table-column>
  45. <el-table-column show-overflow-tooltip label="统一编码" prop="uniformcode" align="center" sortable></el-table-column>
  46. <el-table-column show-overflow-tooltip label="场站编号" prop="windpowerstationid" align="center" sortable></el-table-column>
  47. <el-table-column show-overflow-tooltip label="操作" width="180px">
  48. <template #default="{ row }">
  49. <el-button type="text" @click="handleEdit(row)">编辑</el-button>
  50. <el-button type="text" @click="handleDelete(row)">删除</el-button>
  51. <!-- <el-button type="text" @click="handleDelete(row)">设备点表配置</el-button>
  52. <el-button type="text" @click="handleDelete(row)">场站点表配置</el-button> -->
  53. </template>
  54. </el-table-column>
  55. </el-table>
  56. <el-pagination :background="background" :current-page="queryForm.pageNo" :layout="layout"
  57. :page-size="queryForm.pageSize" :total="total" @current-change="handleCurrentChange"
  58. @size-change="handleSizeChange"></el-pagination>
  59. <table-edit ref="edit" :options="options" @save-success="fetchData"></table-edit>
  60. </div>
  61. </template>
  62. <script>
  63. // import UploadExcel from '@/components/UploadExcel/index'
  64. // import ExportExcel from '@/components/ExportExcel/index'
  65. import TableEdit from './components/TableEdit'
  66. import api from '@/api/pointConfiguration'
  67. export default {
  68. props: {
  69. showValue: {
  70. type: Object,
  71. default: {}
  72. },
  73. },
  74. components: {
  75. // UploadExcel,
  76. // ExportExcel,
  77. TableEdit,
  78. },
  79. data() {
  80. return {
  81. typeOptions: [
  82. {value: '风机计算', label:'风机计算'},
  83. {value: '场站计算', label:'场站计算'},
  84. {value: '风机基础点', label:'风机基础点'},
  85. ],
  86. form :{
  87. code: '',
  88. name: '',
  89. model: '',
  90. uniformcode: '',
  91. windpowerstationid: '',
  92. },
  93. //
  94. // fuzzyQuery: '',
  95. listLoading: true,
  96. list: [],
  97. options: [],
  98. exportExcel: [],
  99. elementLoadingText: '正在加载...',
  100. selectRows: '',
  101. layout: 'total, sizes, prev, pager, next, jumper',
  102. total: 0,
  103. background: true,
  104. exportList: [],
  105. queryForm: {
  106. pageNo: 1,
  107. pageSize: 20,
  108. },
  109. };
  110. },
  111. created() {
  112. this.fetchData()
  113. this.form.code = this.showValue.code
  114. this.form.name = this.showValue.name
  115. },
  116. computed: {
  117. height() {
  118. return this.$baseTableHeight() + 50
  119. },
  120. },
  121. methods: {
  122. getBack(){
  123. this.$emit("cutState" , 1)
  124. },
  125. getMyExcelData(val) {
  126. val.forEach(item => {
  127. api.addCompanys(item).then(res => {
  128. if (res.code == 200) {
  129. this.$message({
  130. type: 'success',
  131. message: '添加成功!'
  132. });
  133. this.fetchData()
  134. }
  135. })
  136. })
  137. },
  138. fetchData() {
  139. this.listLoading = true
  140. api.windpowerstationpointnewList({
  141. id: '',
  142. code: this.form.code ? this.form.code : this.showValue.code,
  143. name: this.form.name ? this.form.name : this.showValue.name,
  144. model: this.form.model,
  145. uniformcode: this.form.uniformcode,
  146. windpowerstationid: this.form.windpowerstationid,
  147. pageNum: this.queryForm.pageNo,
  148. pageSize: this.queryForm.pageSize,
  149. }).then(res => {
  150. if (res.data) {
  151. this.listLoading = false
  152. this.total = res.data.total
  153. this.list = res.data.records
  154. let exportExcel = []
  155. res.data.records.forEach(item => {
  156. exportExcel.push({
  157. id: item.id,
  158. name: item.name,
  159. rid: item.rid,
  160. })
  161. })
  162. this.exportExcel = exportExcel
  163. }
  164. })
  165. },
  166. handleSizeChange(val) {
  167. this.queryForm.pageSize = val
  168. this.fetchData()
  169. },
  170. handleCurrentChange(val) {
  171. this.queryForm.pageNo = val
  172. this.fetchData()
  173. },
  174. handleAdd() {
  175. this.$refs['edit'].showEdit()
  176. },
  177. handleEdit(row) {
  178. this.$refs['edit'].showEdit(row)
  179. },
  180. handleDelete(row) {
  181. if (row.id || this.selectRows.length > 0) {
  182. this.$baseConfirm('你确定要删除吗', null, async () => {
  183. let ids = ''
  184. if (this.selectRows.length > 0) {
  185. ids = this.selectRows.map((item) => item.id).join()
  186. }
  187. api.deleteWindpowerstationpointnew({
  188. id: row.id || ids
  189. }).then(res => {
  190. if (res.data) {
  191. this.$baseMessage('删除成功', 'success')
  192. this.fetchData()
  193. }
  194. })
  195. })
  196. } else {
  197. this.$baseMessage('未选中任何行', 'error')
  198. return false
  199. }
  200. },
  201. setSelectRows(val) {
  202. this.selectRows = val
  203. },
  204. },
  205. }
  206. </script>
  207. <style lang="less" scoped>
  208. a{
  209. float: right;
  210. }
  211. </style>