step1.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <div id="handsonStep1">
  3. <div class="btns-view">
  4. <el-button>获取原始点位当前值</el-button>
  5. <el-button>导出Excel模板</el-button>
  6. <el-button>导入Excel</el-button>
  7. <el-button @click="addRow">新增行</el-button>
  8. <el-button @click="saveData">保存</el-button>
  9. <el-checkbox v-model="checked">只显示使用的原始点位</el-checkbox>
  10. </div>
  11. <div id="handsontableSteps1">
  12. <handsontable-component ref="handsontable" @change="changeHand"></handsontable-component>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. import handsontableComponent from "components/common/handsontable"
  18. import getHeaderSetting from "utils/point_edit/handson_header"
  19. import {
  20. mapGetters,
  21. mapActions
  22. } from "vuex";
  23. import {
  24. changeHeader,
  25. showTypes
  26. } from "utils/handsontable/delType"
  27. import {
  28. queryPoint,
  29. updatePoint,
  30. createPoint
  31. } from "fetch/point_http"
  32. export default {
  33. data() {
  34. return {
  35. checked: false,
  36. settings: {},
  37. hot: null,
  38. changeFlag: true, //是否发生修改
  39. }
  40. },
  41. computed: {
  42. ...mapGetters("project", [
  43. "projectId",
  44. "datasourceId",
  45. "protocolType"
  46. ])
  47. },
  48. created() {
  49. if (!this.protocolType) {
  50. this.$router.push({
  51. path: "/configPoint"
  52. })
  53. }
  54. },
  55. mounted() {
  56. console.log(this.datasourceId, this.protocolType)
  57. this.getData()
  58. },
  59. methods: {
  60. addRow(){
  61. let data = this.hot.getSourceData()
  62. data.unshift({})
  63. this.hot.loadData(data)
  64. this.hot.updateSettings({
  65. maxRows: data.length
  66. })
  67. console.log(data,this.hot,"data")
  68. },
  69. getData() {
  70. let header, width, param, settings
  71. header = getHeaderSetting(this.protocolType)
  72. width = (document.getElementById("app").clientWidth - 50) / header.length
  73. param = {
  74. type: this.protocolType,
  75. data: {
  76. Filters: {
  77. DatasourceId: this.datasourceId,
  78. },
  79. "PageNumber": 1,
  80. "PageSize": 50,
  81. }
  82. }
  83. queryPoint(param, res => {
  84. console.log(res)
  85. settings = {
  86. data: res.Content,
  87. colHeaders: changeHeader(header),
  88. columns: showTypes(header),
  89. colWidths: width,
  90. rowHeights: 30,
  91. maxRows: res.Content.length
  92. }
  93. this.hot = this.$refs.handsontable.init(settings)
  94. console.log(this.hot)
  95. })
  96. },
  97. //修改提示
  98. changeHand(changeData, source) {
  99. if(!!changeData){
  100. this.changeFlag = false
  101. }
  102. return false
  103. },
  104. //保存
  105. saveData() {
  106. if (!!this.hot) {
  107. console.log(this.hot.getSourceData())
  108. let data = this.hot.getSourceData(),updateList = [],createList = [];
  109. data.map(item => {
  110. if(!!item.Id){
  111. delete item.CreateTime
  112. delete item.LastUpdate
  113. updateList.push(item)
  114. }else{
  115. createList.push(item)
  116. }
  117. })
  118. console.log(updateList,"updateList")
  119. if(updateList.length){
  120. this.update(updateList)
  121. }
  122. if(createList.length){
  123. this.createList(createList)
  124. }
  125. } else {
  126. this.$message.error("请确保存在数据")
  127. }
  128. },
  129. async createList(createList){
  130. console.log(createList)
  131. let i = 0;
  132. for(i;i < createList.length;i++){
  133. if(createList[i].hasOwnProperty("Description")){
  134. await this.create(createList[i])
  135. }
  136. }
  137. this.changeFlag = true
  138. },
  139. async create(obj){
  140. console.log(obj)
  141. obj.DatasourceId = this.datasourceId
  142. obj.ProjectId = this.projectId
  143. await createPoint({
  144. data:obj,
  145. type: this.protocolType
  146. },res => {
  147. console.log(res)
  148. obj.Id = res.Id
  149. })
  150. },
  151. /**
  152. * @param {更新list} updateList
  153. *
  154. * 更新点位
  155. */
  156. update(updateList){
  157. updatePoint({
  158. data:{Content:updateList},
  159. type: this.protocolType
  160. },res => {
  161. console.log(res)
  162. })
  163. },
  164. //没有保存的时候弹窗
  165. noSaveData() {
  166. return this.changeFlag
  167. }
  168. },
  169. components: {
  170. handsontableComponent
  171. },
  172. }
  173. </script>
  174. <style lang="scss" scoped>
  175. #handsonStep1 {
  176. height: 100%;
  177. .btns-view {
  178. height: 50px;
  179. vertical-align: middle;
  180. }
  181. #handsontableSteps1 {
  182. height: calc(100% - 50px);
  183. overflow: hidden;
  184. position: relative;
  185. }
  186. }
  187. </style>