ipfcst-mts/ipfcst/ipfcst-reportquery/src/main/frontend/views/parameterConfiguration/windSpeedPointInfo1/index.vue

<template>
  <div className="app-container">
    <div className="xTable">
      <vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      gridOptions: {
        border: true,
        resizable: true,
        showHeaderOverflow: true,
        showOverflow: true,
        highlightHoverRow: true,
        keepSource: true,
        id: 'full_edit_1',
        height: 600,
        rowId: 'id',
        customConfig: {
          storage: true,
          checkMethod: this.checkColumnMethod
        },
        printConfig: {
          columns: [
            {field: 'name'},
            {field: 'email'},
            {field: 'nickname'},
            {field: 'age'},
            {field: 'amount'}
          ]
        },
        sortConfig: {
          trigger: 'cell',
          remote: true
        },
        filterConfig: {
          remote: true
        },
        pagerConfig: {
          pageSize: 10,
          pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
        },
        formConfig: {
          titleWidth: 100,
          titleAlign: 'right',
          items: [
            {
              field: 'name',
              title: '风机编号',
              span: 8,
              titlePrefix: {message: 'app.body.valid.rName', icon: 'fa fa-exclamation-circle'},
              itemRender: {name: '$input', props: {placeholder: '请输入风机编号'}}
            },
            {field: 'wind', title: '风向', span: 8, itemRender: {name: '$select', options: [
                  {}
                ]}},
            {field: 'speed', title: '风速', span: 8, itemRender: {name: '$input', props: {placeholder: '请输入风速'}}},
            {
              field: 'unitBelong',
              title: '所属机组',
              span: 8,
              itemRender: {name: '$input', props: {placeholder: '请输入所属机组'}}
            },
            {field: 'belong', title: '所属行', span: 8, itemRender: {name: '$input', props: {placeholder: '请输入所属行'}}},
            // { field: 'unitBelong', title: '所属机组', span: 8, folding: true, itemRender: { name: '$input', props: { placeholder: '请输入所属机组' } } },
            // { field: 'belong', title: '所属行', span: 8, folding: true, titleSuffix: { message: '注意，必填信息！', icon: 'fa fa-info-circle' }, itemRender: { name: '$select', options: [] } },
            // { field: 'age', title: '年龄', span: 8, folding: true, itemRender: { name: '$input', props: { type: 'number', min: 1, max: 120, placeholder: '请输入年龄' } } },
            {
              span: 24,
              align: 'center',
              itemRender: {
                name: '$buttons',
                children: [{props: {type: 'submit', content: '提交', status: 'primary'}}, {
                  props: {
                    type: 'reset',
                    content: '重置'
                  }
                }]
              }
            }
          ]
        },
        toolbarConfig: {
          buttons: [
            {code: 'insert_actived', name: '新增', icon: 'fa fa-plus'},
            {code: 'delete', name: '直接删除', icon: 'fa fa-trash-o'},
            {code: 'mark_cancel', name: '删除/取消', icon: 'fa fa-trash-o'},
            {code: 'save', name: '保存', icon: 'fa fa-save', status: 'success'}
          ],
          refresh: true,
          import: true,
          export: true,
          print: true,
          zoom: true,
          custom: true
        },
        proxyConfig: {
          seq: true, // 启用动态序号代理
          sort: true, // 启用排序代理
          filter: true, // 启用筛选代理
          form: true, // 启用表单代理
          props: {
            result: 'result',
            total: 'page.total'
          },
          ajax: {
            // // 接收 Promise 对象
            // query: ({ page, sorts, filters, form }) => {
            //   const queryParams = Object.assign({}, form)
            //   // 处理排序条件
            //   const firstSort = sorts[0]
            //   if (firstSort) {
            //     queryParams.sort = firstSort.property
            //     queryParams.order = firstSort.order
            //   }
            //   // 处理筛选条件
            //   filters.forEach(({ property, values }) => {
            //     queryParams[property] = values.join(',')
            //   })
            //   return XEAjax.get(`${this.serveApiUrl}/api/pub/page/list/${page.pageSize}/${page.currentPage}`, queryParams)
            // },
            delete: ({body}) => XEAjax.post(`${this.serveApiUrl}/api/pub/save`, body),
            save: ({body}) => XEAjax.post(`${this.serveApiUrl}/api/pub/save`, body)
          }
        },
        columns: [
          {type: 'checkbox', title: 'ID', width: 120},
          {field: 'id', title: 'ID', sortable: true, editRender: {name: 'input'}},
          {field: 'fanNumber', title: '风机编号', sortable: true, editRender: {name: 'input'}},
          {field: 'wind', title: '风向', sortable: true, editRender: {name: 'input'}},
          {field: 'speed', title: '风速', sortable: true, editRender: {name: 'input'}},
          {field: 'unitBelongs', title: '所属机组', sortable: true, editRender: {name: 'input'}},
          {field: 'belong', title: '所属行', sortable: true, editRender: {name: 'input'}},

        ],
        importConfig: {
          remote: true,
          importMethod: this.importMethod,
          types: ['xlsx'],
          modes: ['insert']
        },
        exportConfig: {
          remote: true,
          exportMethod: this.exportMethod,
          types: ['xlsx'],
          modes: ['current', 'selected', 'all']
        },
        checkboxConfig: {
          labelField: 'id',
          reserve: true,
          highlight: true,
          range: true
        },
        editRules: {},
        editConfig: {
          trigger: 'click',
          mode: 'row',
          showStatus: true
        }
      }
    }
  },
  computed: {
    // ...mapState([
    //   'serveApiUrl'
    // ])
  },
  created() {
    this.findSexList()
  },
  methods: {
    async findSexList() {
      // const sexList = await XEAjax.get('/api/conf/sex/list')
      // // 异步更新下拉选项
      // this.sexList = sexList
      // const xGrid = this.$refs.xGrid
      // if (xGrid) {
      //   const sexColumn = xGrid.getColumnByField('sex')
      //   sexColumn.editRender.options = sexList
      //   const sexItem = xGrid.getFormItems(4)
      //   sexItem.itemRender.options = sexList
      // }
    },
    formatAmount({cellValue}) {
      // return cellValue ? `$${XEUtils.commafy(XEUtils.toNumber(cellValue), { digits: 2 })}` : ''
    },
    formatDate({cellValue}) {
      // return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
    },
    checkColumnMethod({column}) {
      // if (['nickname', 'role'].includes(column.property)) {
      //   return false
      // }
      // return true
    },
    importMethod({file}) {
      // const formBody = new FormData()
      // formBody.append('file', file)
      // return XEAjax.post(`${this.serveApiUrl}/api/pub/import`, formBody).then(data => {
      //   this.$XModal.message({ message: `成功导入 ${data.result.insertRows} 条记录！`, status: 'success' })
      //   // 导入完成，刷新表格
      //   this.$refs.xGrid.commitProxy('query')
      // }).catch(() => {
      //   this.$XModal.message({ message: '导入失败，请检查数据是否正确！', status: 'error' })
      // })
    },
    exportMethod({options}) {
      // const proxyInfo = this.$refs.xGrid.getProxyInfo()
      // // 传给服务端的参数
      // const body = {
      //   filename: options.filename,
      //   sheetName: options.sheetName,
      //   isHeader: options.isHeader,
      //   original: options.original,
      //   mode: options.mode,
      //   pager: proxyInfo.pager,
      //   ids: options.mode === 'selected' ? options.data.map(item => item.id) : [],
      //   fields: options.columns.map(column => {
      //     return {
      //       field: column.property,
      //       title: column.title
      //     }
      //   })
      // }
      // // 开始服务端导出
      // return XEAjax.post(`${this.serveApiUrl}/api/pub/export`, body).then(data => {
      //   if (data.id) {
      //     this.$XModal.message({ message: '导出成功，开始下载', status: 'success' })
      //     // 读取路径，请求文件流 => 开始下载
      //     location.href = `${this.serveApiUrl}/api/pub/export/download/${data.id}`
      //   }
      // }).catch(() => {
      //   this.$XModal.message({ message: '导出失败！', status: 'error' })
      // })
    }
  }
}
</script>

<style scoped>

</style>