apt-nl/src/pages/modules/systemmanage/system.vue

<template>
  <div class="right_side">
    <div class="buttons_wrapper">
      <div class="row">
        <button class="button button--primary" @click="showDialog('1')">添加参数</button>
      </div>
    </div>
    <div class="grid_wrapper">
      <table>
        <tr>
          <th>序号</th>
          <th>编码</th>
          <th>名称</th>
          <th>值</th>
          <th>备注</th>
          <th>操作</th>
        </tr>
        <tr v-for="(e, i) in datalist" :key="i">
          <td>{{i+1}}</td>
          <td>platform</td>
          <td>平台名称</td>
          <td>智能搬运车系统</td>
          <td></td>
          <td>
            <div class="row">
              <button class="button button--primary grid_button" @click="showDialog('2')">修改</button>
              <button class="button button--primary grid_button" @click="showDialog('3')">删除</button>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <jxDialog
    ref="child"
    :title="title"
    :type="type"
    @toSure="toSureDialog"
    >
    <div v-if="type === '1' || type === '2'" class="form_wraper">
      <div class="form">
        <div class="form_item">
          <div class="form_item__label"><i>*</i>编码</div>
          <div class="form_item__content">
            <input type="text" class="form_item__input" v-model="code">
          </div>
        </div>
        <div class="form_item">
          <div class="form_item__label"><i>*</i>名字</div>
          <div class="form_item__content">
            <input type="text" class="form_item__input" v-model="name">
          </div>
        </div>
      </div>
      <div class="form">
        <div class="form_item">
          <div class="form_item__label"><i>*</i>数值</div>
          <div class="form_item__content">
            <input type="text" class="form_item__input" v-model="number">
          </div>
        </div>
      </div>
      <div class="form">
        <div class="form_item allwidth">
          <div class="form_item__label">备注</div>
          <div class="form_item__content">
            <textarea v-model="remark" style="resize:none;" class="form_item__input form_item__textarea"></textarea>
          </div>
        </div>
      </div>
    </div>
    <div v-if="type === '3'" class="form_wraper">确定删除吗？</div>
    </jxDialog>
  </div>
</template>

<script>
import jxDialog from '@components/dialog.vue'
export default {
  components: {
    jxDialog
  },
  data () {
    return {
      datalist: [{name: ''}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}, {name: 'a'}],
      active: false,
      type: '',
      title: '',
      code: '',
      name: '',
      number: '',
      remark: ''
    }
  },
  watch: {
    type (val) {
      switch (val) {
        case '1':
          this.title = '添加参数'
          break
        case '2':
          this.title = '修改参数'
          break
        case '3':
          this.title = ''
          break
        default:
          this.title = ''
      }
    }
  },
  methods: {
    showDialog (type) {
      this.type = type
      this.$refs.child.active = true
    },
    toSureDialog (type) {
      switch (type) {
        case '1':
          console.log(type)
          break
        case '2':
          console.log(type)
          break
        case '3':
          console.log(type)
          break
        default:
          console.log(type)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.grid_wrapper
  height calc(100% - 50px)
  overflow-y auto
</style>