index.vue

<template lang='pug'>
    el-container(style="padding:0px;height:77.6vh;")
        el-header(style='height:42px;line-height:42px;border: 1px solid rgba(195, 195, 195, 1);background: #f4f4f4;')
            span.title-bold.title-left-color() 参数列表
            //- el-button(style="float:right;transform:translateY(6px);margin-right:20px;" size='mini' type="primary" icon='el-icon-refresh' @click="refresh") 刷新
            //- <el-popover placement="bottom" width="150" >
            //-         <el-button slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)'> 筛选</el-button>
            //-         <el-checkbox-group v-model="checkList">
            //-             <el-col :span="24">
            //-                 <el-checkbox v-for="(item,index) in tableHeader" :label="item" :key="index"  >
            //-                   span {{item.label}}
            //-                 </el-checkbox>
            //-             </el-col>
            //-         </el-checkbox-group>
            //- </el-popover>
        el-main.box_main
            el-card()
                div.tableCard()
                    el-table( :data="tableData" @sort-change='sortChange' @cell-dblclick="tableDbEdit" style="width: 100%;" :stripe="true" :header-cell-style="{background:'#EEF8FF',color:'#333333'}")
                        el-table-column(header-align="center" align="center"  prop="name" label="参数名称" sortable='custom' )
                        el-table-column(header-align="center" align="center"  prop="remark" label="参数描述"  sortable='custom' width="700")
                        el-table-column(header-align="center" align="center"  prop="value" label="当前值(双击修改)" sortable='custom')
                        el-table-column(header-align="center" align="center"  prop="introduction" label="参数说明"   sortable='custom')

                    //- drag-table( :data="tableData" :header="checkList" :option="tableOption"  @getDataList="getDataList"   )
                    //-     template( slot='value' slot-scope="scope")
                    //-       div( @dblclick='tableDbEdit(scope.row)') {{scope.row.value}}

        el-footer.box_footer
            el-pagination(background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage")
            el-dialog( width="35%" :append-to-body="true" :visible.sync="visible"  :modal-append-to-body="false"  @close="closeForm()")
                div.title-bold(slot='title') {{title}}
                div(style="margin:0 auto; width:60%;padding:0;")
                  el-form(:model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" @submit.native.prevent)
                    el-form-item(label="当前值:" prop="value")
                       el-input(v-model="ruleForm.value" placeholder="请输入内容" clearable)
                div(slot="footer" align="center")
                    el-button(type='primary' size='medium' @click="cancel") 取 消
                    el-button(type='primary' size='medium' @click="addsave" v-if="isAuth('sys:parameter:save')" v-prevent-re-click) 保存
</template>
<script>
import dragTable from '../../components/tab'

//正则表达式，判断修改当前值是否在范围内
export default {
  data () {
    return {
      checkList: [], //筛选数据
      tableHeader: [
        { label: '参数名称', prop: 'name' }, //是否插槽
        { label: '参数描述', prop: 'remark' },
        { label: '当前值(双击修改)', prop: 'value', slot: true },
        { label: '参数说明', prop: 'introduction' }
      ],
      tableOption: {
        border: false, //是否边框
        maxHeight: 500 //高度
      },
      visible: false,
      title: null,
      tableData: [
      ],
      currentPage: 1,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      ruleForm: {},
      rules: null //添加规则
    }
  },
      components: {
    dragTable
  },
  watch: {
    totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
      //总页数小于当前页数则重新加载列表数据
      if (pages < this.pageIndex) {
          this.pageIndex = pages || 1
          this.getDataList()//获取表格数据的方法
      }
    }
  },
  mounted () {
    this.getDataList()
    this.checkList = [...this.tableHeader]
  },
  methods: {
    //排序
    sortChange (column) {
      if (column.order === 'descending') {
        this.order = 'desc'
      } else {
        this.order = 'asc'
      }
      if (column.column.columnKey) {
        this.sort = column.column.columnKey
      } else {
        this.sort = column.prop
      }
      this.getDataList()
    },
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/sysParams/paramsAllList'),
        method: 'post',
        params: {
          stationId: localStorage.getItem('stationId'),
          page: this.pageIndex,
          limit: this.pageSize,
          sort: this.sort,
          order: this.order
        }
      }).then(data => {
        if (data) {
          this.tableData = data.page.records
          this.totalPage = data.page.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    tableDbEdit (row) {
      this.visible = true
      this.rules = null
      if (row) {
        //深度拷贝
        this.ruleForm = JSON.parse(JSON.stringify(row))
        this.title =
          '修改当前值(只能在' +
          this.ruleForm.byx1 +
          '和' +
          this.ruleForm.byx2 +
          '之间) '
        let min = Number(this.ruleForm.byx1)
        let max = Number(this.ruleForm.byx2)
        this.rules = {
          value: [
            { required: true, message: '当前值不能为空', trigger: 'blur' },
            {
              validator: (rule, value, callback) => {
                const age = /^[0-9]*$/
                if (!age.test(value)) {
                  callback(
                    new Error(
                      '当前值只能为数字，并在' + min + '到' + max + '之间'
                    )
                  )
                } else {
                  if (value < min || value > max) {
                    callback(
                      new Error(
                        '当前值只能为数字，并在' + min + '到' + max + '之间'
                      )
                    )
                  } else {
                    callback()
                  }
                }
              },
              trigger: 'blur'
            }
          ]
        }
      } else {
        this.ruleForm = {}
        this.ruleForm.id = row.id
        this.ruleForm.value = row.value
      }
    },
    // 提交
    addsave () {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.closeForm()
          this.$http({
            url: this.$http.adornUrl(`/sysParams/update`),
            method: 'post',
            data: this.ruleForm
          }).then(data => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data)
            }
          })
        }
      })
    },
    closeForm () {
      this.visible = false
    },
    refresh () {
      this.getDataList()
    },
    // 每页数
    handleSizeChange (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    handleCurrentChange (val) {
      this.pageIndex = val
      this.getDataList()
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', '参数列表', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.closeForm()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    }
  }
}
</script>