yxk-storeroom-system/src/views/storeManage/deviceManage/module/bindParams.vue

<template>
  <!--表单组件-->
  <!-- :before-close="crud.cancelCU" -->
  <el-dialog class="binding-params-dialog" :close-on-click-modal="false" :visible.sync="bingParamsVisible" title="绑定参数" @closed="handleClose">
    <span class="dialog-right-top" />
    <span class="dialog-left-bottom" />
    <div class="setting-dialog">
      <div class="head-container">
        <el-form ref="form" :model="form" inline :rules="rules" size="small" label-width="80px">
          <el-form-item label="参数ID" prop="paramId">
            <el-input v-model="form.paramId" style="width: 150px;" />
          </el-form-item>
          <el-form-item label="参数名称" prop="paramName">
            <el-input v-model="form.paramName" style="width: 150px;" />
          </el-form-item>
          <el-form-item label="单位值" prop="unit">
            <el-input v-model="form.unit" style="width: 150px;" />
          </el-form-item>
          <el-button class="filter-item" size="mini" type="primary" @click="add">添加</el-button>
        </el-form>
      </div>
      <el-table ref="table" :loading="loading" :data="params" height="calc(100vh - 582px)">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="paramId" label="参数ID" align="center" />
        <el-table-column prop="paramName" label="参数名称" align="center" />
        <el-table-column prop="unit" label="单位值" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" icon="el-icon-delete" class="delete-btn" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import crudMethod from '@/api/storeManage/deviceManage/param'

export default {
  name: 'BingParams',
  data() {
    return {
      rules: {
        paramId: [
          { required: true, message: '请输入参数ID', trigger: 'blur' }
        ],
        paramName: [
          { required: true, message: '请输入参数名称', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请输入单位值', trigger: 'blur' }
        ]
      },
      params: [],
      form: {},
      deviceInfoId: null,
      loading: false,
      bingParamsVisible: false
    }
  },
  methods: {
    handleDelete(index, row) {
      crudMethod.del(row.id).then((res) => {
        this.params.splice(index, 1)
      })
    },
    add() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.deviceInfoId = this.deviceInfoId
          this.form.sequence = this.params.reduce((prev, cur) => { return { sequence: Math.max(prev.sequence, cur.sequence) } }, { sequence: 0 }).sequence + 1
          crudMethod.add(this.form).then((res) => {
            this.loading = true
            crudMethod.getParams({ deviceInfoId: this.deviceInfoId }).then((data) => {
              this.params.splice(0, this.params.length, ...data)
              this.resetForm()
              this.loading = false
            })
          })
        } else {
          return false
        }
      })
    },
    handleClose() {
      this.resetForm()
      this.$refs.form.clearValidate()
    },
    resetForm() {
      this.form.paramId = ''
      this.form.paramName = ''
      this.form.unit = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.binding-params-dialog {
  ::v-deep .el-dialog{
    width: 950px !important;
  }
  ::v-deep .el-dialog__body{
    padding: 0;
  }
  ::v-deep form{
    display: flex;
    justify-content: space-around;
  }
  ::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
}
.delete-btn{
  background-color: #F65163;
  border-color: #F65163;
}
.head-container .filter-item {
  width: 76px;
  height: 32px;
  display: inline-block;
  vertical-align: middle;
  background-color: #3a99fd;
}
</style>