dy-admin-manager/src/views/categroyManager/generalSettings/overallManager.vue

<template>
  <div class='m-container'>
    <!-- <h2>参数设置</h2> -->
    <div class="m-core">
      <!-- 列表 -->
      <el-row>
        <el-col :span="12" v-for="(config, index) in configList" :key="config.id">
          {{ config.description[0] }}
          <el-input type="number" v-model="input[index]">
            <template slot="append" v-if="config.description[1]">{{ config.description[1] }}</template>
          </el-input>
          <el-button @click="onSave(config, index)" type="primary">保存</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import store from '@/store'
import { sysConfigList, sysConfigUpdate } from '@/api/generalSettings'
export default {
  components: { pagination },
  name: 'musicalManager',
  data () {
    return {
      organId: store.getters.organ,
      configList: [],
      input: []
    }
  },
  mounted() {
    this.__init()
  },
  methods: {
    __init() {
      sysConfigList({ group: 'default' }).then(res => {
        if(res.code == 200 && res.data.length > 0) {
          res.data.forEach((item, index) => {
            this.input[index] = item.paranValue
            this.configList.push({
              id: item.id,
              paramName: item.paramName,
              paranValue: item.paranValue,
              description: item.description.split('{}')
            })
          })
        }
      })
    },
    onSave (row, index) { 
      let params = {
        id: row.id,
        paranValue: this.input[index],
        paramName: row.paramName,
        description: row.description.join('{}')
      }
      sysConfigUpdate(params).then(res => {
        if(res.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-input-group__append {
  background: #DCDFE6;
  border-color: #DCDFE6;
  &:hover, &:active, &:focus {
    background: #DCDFE6;
    border-color: #DCDFE6;
    color: #FFF;
  }
}
.el-button--primary {
  background: #14928a;
  border-color: #14928a;
  color: #fff;
  &:hover, &:active, &:focus {
    background: #14928a;
    border-color: #14928a;
    color: #FFF;
  }
}
.el-row {
  margin-top: 40px;
}
.el-col {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: flex-end;
  margin-right: 50%;
}
.el-input-group, .el-input {
  width: 200px;
  margin: 0 20px;
}

</style>