step1.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391
  1. <template>
  2. <div id="handsonStep1">
  3. <div class="btns-view">
  4. <el-button style="float:right;margin-top:4px;margin-left:10px;" type="primary" @click="saveData">保存</el-button>
  5. <el-button style="float:right;margin-top:4px;" type="primary" @click="addRow">新增行</el-button>
  6. <el-button style="float:right;margin-top:4px;" type="primary" @click="downData">下载数据</el-button>
  7. <el-button style="float:right;margin-top:4px;" type="primary" @click="updateExcel = true">导入Excel</el-button>
  8. <el-button style="float:right;margin-top:4px;" type="primary" @click="downloadExcel = true">导出Excel模板</el-button>
  9. <el-checkbox style="float:right;line-height:40px;" v-model="checked">只显示使用的原始点位</el-checkbox>
  10. <el-button type="primary">获取原始点位当前值</el-button>
  11. </div>
  12. <div id="handsontableSteps1" v-loading="isLoading">
  13. <handsontable-component v-if="!!allData.length" ref="handsontable" @mouseDown="clickTable" @change="changeHand"></handsontable-component>
  14. <div v-else class="center">暂无数据</div>
  15. </div>
  16. <own-dialog :width="'580px'" :index="true" title="位置标签" :dialogVisible="localtionDialog" @cancel="close">
  17. <localtion-falg :renderData="renderData"></localtion-falg>
  18. </own-dialog>
  19. <own-dialog :width="'580px'" :index="true" title="导出excel模板" :dialogVisible="downloadExcel" @cancel="close">
  20. <div class="center">
  21. <el-button type="text" @click="download">下载模板</el-button>
  22. </div>
  23. </own-dialog>
  24. <own-dialog :width="'580px'" :index="true" title="导出excel模板" :dialogVisible="updateExcel" @cancel="close">
  25. </own-dialog>
  26. <div class="center">
  27. <pagination :page="pages" @change="changePage"></pagination>
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. import handsontableComponent from "@/components/common/handsontable"
  33. import getHeaderSetting from "@/utils/point_edit/handson_header"
  34. import ownDialog from "@/components/el_pack/dialog"
  35. import localtionFalg from "@/components/config_point/location_flag"
  36. import pagination from "@/components/common/myPagination"
  37. import {
  38. mapGetters,
  39. mapActions
  40. } from "vuex";
  41. import {
  42. changeHeader,
  43. showTypes
  44. } from "@/utils/handsontable/delType"
  45. import {
  46. queryPoint,
  47. updatePoint,
  48. createPoint,
  49. downloadTemplete
  50. } from "@/fetch/point_http"
  51. import axios from 'axios'
  52. export default {
  53. data() {
  54. return {
  55. checked: false,
  56. settings: {},
  57. hot: null,
  58. changeFlag: true, //是否发生修改
  59. localtionDialog: false,
  60. renderData: {},
  61. allData: [],
  62. pages: {
  63. size: 10,
  64. sizes: [10, 30, 50, 100],
  65. total: 0,
  66. currentPage: 0
  67. },
  68. oldPage: {
  69. currentPage: 0,
  70. size: 10
  71. },
  72. downloadExcel: false,
  73. isLoading: false,
  74. updateExcel: false,
  75. }
  76. },
  77. computed: {
  78. ...mapGetters("project", [
  79. "projectId",
  80. "datasourceId",
  81. "protocolType"
  82. ])
  83. },
  84. created() {},
  85. mounted() {
  86. if (!this.protocolType) {
  87. this.$router.push({
  88. path: "/configPoint"
  89. })
  90. } else {
  91. this.getData()
  92. }
  93. },
  94. methods: {
  95. //关闭弹窗
  96. close() {
  97. this.localtionDialog = false
  98. this.downloadExcel = false
  99. this.updateExcel = false
  100. },
  101. downData() {
  102. axios({
  103. method: 'post',
  104. url: `/pointconfig/point/${this.protocolType}/pointlist-export`,
  105. data: {DataSourceId: this.datasourceId},
  106. responseType: 'blob',
  107. headers:{ProjectId: this.projectId}
  108. }).then(function(res) {
  109. var blob = new Blob([res.data], {
  110. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
  111. });
  112. var fileName = res.headers['content-disposition'];
  113. if (fileName)
  114. fileName = fileName.substring(fileName.indexOf('=') + 1);
  115. if ('download' in document.createElement('a')) { // 非IE下载
  116. const elink = document.createElement('a')
  117. elink.download = fileName
  118. elink.style.display = 'none'
  119. elink.href = URL.createObjectURL(blob)
  120. document.body.appendChild(elink)
  121. elink.click()
  122. URL.revokeObjectURL(elink.href) // 释放URL 对象
  123. document.body.removeChild(elink)
  124. } else { // IE10+下载
  125. navigator.msSaveBlob(blob, fileName)
  126. }
  127. }).catch(function(err) {
  128. console.dirxml(err);
  129. })
  130. },
  131. //下载excel模板
  132. download() {
  133. axios({
  134. method: 'post',
  135. url: `/pointconfig/point/${this.protocolType}/template-export`,
  136. data: {},
  137. responseType: 'blob'
  138. }).then(function(res) {
  139. var blob = new Blob([res.data], {
  140. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
  141. });
  142. var fileName = res.headers['content-disposition'];
  143. if (fileName)
  144. fileName = fileName.substring(fileName.indexOf('=') + 1);
  145. if ('download' in document.createElement('a')) { // 非IE下载
  146. const elink = document.createElement('a')
  147. elink.download = fileName
  148. elink.style.display = 'none'
  149. elink.href = URL.createObjectURL(blob)
  150. document.body.appendChild(elink)
  151. elink.click()
  152. URL.revokeObjectURL(elink.href) // 释放URL 对象
  153. document.body.removeChild(elink)
  154. } else { // IE10+下载
  155. navigator.msSaveBlob(blob, fileName)
  156. }
  157. }).catch(function(err) {
  158. console.dirxml(err);
  159. })
  160. // downloadTemplete({
  161. // data: {
  162. // DataSourceId: this.datasourceId,
  163. // },
  164. // type: this.protocolType
  165. // },{
  166. // responseType: 'blob'
  167. // },res => {
  168. // var blob = new Blob([res.data], {
  169. // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
  170. // });
  171. // var fileName = res.headers['content-disposition'];
  172. // if (fileName)
  173. // fileName = fileName.substring(fileName.indexOf('=') + 1);
  174. // if ('download' in document.createElement('a')) { // 非IE下载
  175. // const elink = document.createElement('a')
  176. // elink.download = fileName
  177. // elink.style.display = 'none'
  178. // elink.href = URL.createObjectURL(blob)
  179. // document.body.appendChild(elink)
  180. // elink.click()
  181. // URL.revokeObjectURL(elink.href) // 释放URL 对象
  182. // document.body.removeChild(elink)
  183. // } else { // IE10+下载
  184. // navigator.msSaveBlob(blob, fileName)
  185. // }
  186. // })
  187. },
  188. //点击表格
  189. clickTable(info, row) {
  190. let activeCell = this.hot.getActiveEditor()
  191. this.renderData = info
  192. console.log(activeCell,'activeCell')
  193. if (activeCell.prop == "LocationFlag") {
  194. this.localtionDialog = true
  195. }
  196. },
  197. addRow() {
  198. if (!!this.allData.length) {
  199. let data = this.hot.getSourceData()
  200. data.unshift({})
  201. this.hot.loadData(data)
  202. this.hot.updateSettings({
  203. maxRows: data.length
  204. })
  205. } else {
  206. this.allData = [{}]
  207. this.createHot()
  208. }
  209. },
  210. //页面发生更改
  211. changePage() {
  212. if (!this.changeFlag) {
  213. //发生更改,提示是否保存
  214. this.$confirm('存在数据未保存, 是否继续?', '提示', {
  215. confirmButtonText: '确定',
  216. cancelButtonText: '取消',
  217. type: 'warning'
  218. }).then(() => {
  219. this.getData()
  220. }).catch(() => {
  221. this.pages.currentPage = this.oldPage.currentPage
  222. this.pages.size = this.oldPage.size
  223. return false
  224. });
  225. } else {
  226. this.getData()
  227. }
  228. },
  229. getData() {
  230. // width = (document.getElementById("app").clientWidth - 50) / header.length
  231. this.isLoading = true
  232. let param = {
  233. type: this.protocolType,
  234. data: {
  235. Filters: {
  236. DatasourceId: this.datasourceId,
  237. },
  238. "PageNumber": this.pages.currentPage || 1,
  239. "PageSize": this.pages.size,
  240. }
  241. }
  242. this.oldPage = {
  243. size: this.pages.size,
  244. currentPage: this.pages.currentPage
  245. }
  246. queryPoint(param, res => {
  247. console.log(res)
  248. this.isLoading = false
  249. this.changeFlag = true
  250. this.allData = res.Content || []
  251. this.pages.total = res.Total
  252. this.createHot()
  253. })
  254. },
  255. //创建实例
  256. createHot() {
  257. let header, width, settings
  258. header = getHeaderSetting(this.protocolType)
  259. settings = {
  260. data: this.allData,
  261. colHeaders: changeHeader(header),
  262. columns: showTypes(header),
  263. // colWidths: width,
  264. rowHeights: 30,
  265. maxRows: this.allData.length
  266. }
  267. if (!this.allData.length) {
  268. return false
  269. }
  270. this.$nextTick(_ => {
  271. this.hot = this.$refs.handsontable.init(settings)
  272. console.log(this.hot)
  273. })
  274. },
  275. //修改提示
  276. changeHand(changeData, source) {
  277. if (!!changeData) {
  278. this.changeFlag = false
  279. }
  280. return false
  281. },
  282. //保存
  283. saveData() {
  284. if (!!this.hot) {
  285. console.log(this.hot.getSourceData())
  286. let data = this.hot.getSourceData(),
  287. updateList = [],
  288. arr1 = [],
  289. createList = [];
  290. data.map(item => {
  291. // console.log(item.LocationFlag,1111)
  292. if (!!item.Id) {
  293. // if(!item.LocationFlag){
  294. // item.LocationFlag = []
  295. // }
  296. console.log(item)
  297. delete item.CreateTime
  298. delete item.LastUpdate
  299. console.log(item)
  300. arr1.push(item)
  301. updateList.push(item)
  302. } else {
  303. createList.push(item)
  304. }
  305. })
  306. console.log(updateList, arr1, "updateList")
  307. if (updateList.length) {
  308. this.update(updateList)
  309. }
  310. if (createList.length) {
  311. this.createList(createList)
  312. }
  313. } else {
  314. this.$message.error("请确保存在数据")
  315. }
  316. },
  317. async createList(createList) {
  318. console.log(createList)
  319. let i = 0;
  320. for (i; i < createList.length; i++) {
  321. if (createList[i].hasOwnProperty("Description")) {
  322. await this.create(createList[i])
  323. }
  324. }
  325. this.changeFlag = true
  326. },
  327. async create(obj) {
  328. console.log(obj)
  329. for (let key in obj) {
  330. if (key == "LocationFlag" && obj[key] == "") {
  331. obj[key] = []
  332. }
  333. if (obj[key] === "") {
  334. obj[key] = null
  335. }
  336. }
  337. obj.DatasourceId = this.datasourceId
  338. obj.ProjectId = this.projectId
  339. await createPoint({
  340. data: obj,
  341. type: this.protocolType
  342. }, res => {
  343. console.log(res)
  344. obj.Id = res.Id
  345. })
  346. },
  347. /**
  348. * @param {更新list} updateList
  349. *
  350. * 更新点位
  351. */
  352. update(updateList) {
  353. updatePoint({
  354. data: {
  355. Content: updateList
  356. },
  357. type: this.protocolType
  358. }, res => {
  359. console.log(res)
  360. })
  361. },
  362. //没有保存的时候弹窗
  363. noSaveData() {
  364. return this.changeFlag
  365. }
  366. },
  367. components: {
  368. handsontableComponent,
  369. ownDialog,
  370. localtionFalg,
  371. pagination
  372. },
  373. }
  374. </script>
  375. <style lang="scss" scoped>
  376. #handsonStep1 {
  377. flex: 1;
  378. display: flex;
  379. flex-flow:column;
  380. .btns-view {
  381. height: 40px;
  382. line-height: 40px;
  383. margin-bottom: 10px;
  384. }
  385. #handsontableSteps1 {
  386. flex: 1;
  387. overflow: hidden;
  388. position: relative;
  389. }
  390. }
  391. </style>