123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- <template>
- <div id="handsonStep1">
- <div class="btns-view">
- <el-button>获取原始点位当前值</el-button>
- <el-button>导出Excel模板</el-button>
- <el-button>导入Excel</el-button>
- <el-button @click="addRow">新增行</el-button>
- <el-button @click="saveData">保存</el-button>
- <el-checkbox v-model="checked">只显示使用的原始点位</el-checkbox>
- </div>
- <div id="handsontableSteps1">
- <handsontable-component ref="handsontable" @change="changeHand"></handsontable-component>
- </div>
- </div>
- </template>
- <script>
- import handsontableComponent from "components/common/handsontable"
- import getHeaderSetting from "utils/point_edit/handson_header"
- import {
- mapGetters,
- mapActions
- } from "vuex";
- import {
- changeHeader,
- showTypes
- } from "utils/handsontable/delType"
- import {
- queryPoint,
- updatePoint,
- createPoint
- } from "fetch/point_http"
- export default {
- data() {
- return {
- checked: false,
- settings: {},
- hot: null,
- changeFlag: true, //是否发生修改
- }
- },
- computed: {
- ...mapGetters("project", [
- "projectId",
- "datasourceId",
- "protocolType"
- ])
- },
- created() {
- if (!this.protocolType) {
- this.$router.push({
- path: "/configPoint"
- })
- }
- },
- mounted() {
- console.log(this.datasourceId, this.protocolType)
- this.getData()
- },
- methods: {
- addRow(){
- let data = this.hot.getSourceData()
- data.unshift({})
- this.hot.loadData(data)
- this.hot.updateSettings({
- maxRows: data.length
- })
- console.log(data,this.hot,"data")
- },
- getData() {
- let header, width, param, settings
- header = getHeaderSetting(this.protocolType)
- width = (document.getElementById("app").clientWidth - 50) / header.length
- param = {
- type: this.protocolType,
- data: {
- Filters: {
- DatasourceId: this.datasourceId,
- },
- "PageNumber": 1,
- "PageSize": 50,
- }
- }
- queryPoint(param, res => {
- console.log(res)
- settings = {
- data: res.Content,
- colHeaders: changeHeader(header),
- columns: showTypes(header),
- colWidths: width,
- rowHeights: 30,
- maxRows: res.Content.length
- }
- this.hot = this.$refs.handsontable.init(settings)
- console.log(this.hot)
- })
- },
- //修改提示
- changeHand(changeData, source) {
- if(!!changeData){
- this.changeFlag = false
- }
- return false
- },
- //保存
- saveData() {
- if (!!this.hot) {
- console.log(this.hot.getSourceData())
- let data = this.hot.getSourceData(),updateList = [],createList = [];
- data.map(item => {
- if(!!item.Id){
- delete item.CreateTime
- delete item.LastUpdate
- updateList.push(item)
- }else{
- createList.push(item)
- }
- })
- console.log(updateList,"updateList")
- if(updateList.length){
- this.update(updateList)
- }
- if(createList.length){
- this.createList(createList)
- }
- } else {
- this.$message.error("请确保存在数据")
- }
- },
- async createList(createList){
- console.log(createList)
- let i = 0;
- for(i;i < createList.length;i++){
- if(createList[i].hasOwnProperty("Description")){
- await this.create(createList[i])
- }
- }
- this.changeFlag = true
- },
- async create(obj){
- console.log(obj)
- obj.DatasourceId = this.datasourceId
- obj.ProjectId = this.projectId
- await createPoint({
- data:obj,
- type: this.protocolType
- },res => {
- console.log(res)
- obj.Id = res.Id
- })
- },
- /**
- * @param {更新list} updateList
- *
- * 更新点位
- */
- update(updateList){
- updatePoint({
- data:{Content:updateList},
- type: this.protocolType
- },res => {
- console.log(res)
- })
- },
- //没有保存的时候弹窗
- noSaveData() {
- return this.changeFlag
- }
- },
- components: {
- handsontableComponent
- },
- }
- </script>
- <style lang="scss" scoped>
- #handsonStep1 {
- height: 100%;
- .btns-view {
- height: 50px;
- vertical-align: middle;
- }
- #handsontableSteps1 {
- height: calc(100% - 50px);
- overflow: hidden;
- position: relative;
- }
- }
- </style>
|