index.html 3.46 KB
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../../../js/lib/element-ui/index.css">
  <link rel="stylesheet" href="../../../css/common.css">
  <title>参数配置</title>
</head>

<body>
  <div id="app" class="container">
    <el-row class="parame">
      <el-col :span="14" :offset="4">
        <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="rule-form">
          <el-form-item label="logo" prop="logo">
            <el-input v-model="formData.logo"></el-input>
          </el-form-item>
          <el-form-item label="是否门户" prop="isGateway">
            <el-select v-model="formData.isGateway" class="db">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主题风格" prop="themeStyle">
            <el-select v-model="formData.themeStyle" class="db">
              <el-option v-for="item in skins" :key="item.id" :label="item.label" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" v-text="'立即创建'"></el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
  <script src="../../../js/lib/jquery.min.js"></script>
  <script src="../../../js/lib/vue.min.js"></script>
  <script src="../../../js/lib/element-ui/index.js"></script>
  <script src="../../../js/util/index.js"></script>
  <!-- 数据处理 -->
  <script src="../../../js/lib/mock.js"></script>
  <script src="../../../mock/index.js"></script>
  <script src="../../../mock/system/parame.js"></script>
  <!-- 数据处理 -->
  <script>
    var app = new Vue({
      el: '#app',
      data: function () {
        return {
          formData: {
            logo: '',
            isGateway: '',
            themeStyle: ''
          },
          rules: {
            logo: [
              { required: true, message: '不能为空', trigger: 'blur' }
            ],
            isGateway: [
              { required: true, message: '不能为空', trigger: 'change' }
            ],
            themeStyle: [
              { required: true, message: '不能为空', trigger: 'change' }
            ]
          },
          skins: [],
          documentClientHeight: document.clientHeight,
        }
      },
      created: function () {
        this.getData()
        this.getSkin()
      },
      methods: {
        onSubmit: function () {
          let data = clonedeep(this.formData)
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              console.log('submit!', data)
            } else {
              return false
            }
          })
        },
        getSkin: function () {
          var self = this
          api({
            url: '/sys/parame/skin',
            type: 'get',
            successFuc: function (res) {
              self.skins = res.data
            }
          })
        },
        getData: function () {
          var self = this
          api({
            url: '/sys/parame/list',
            type: 'get',
            successFuc: function (res) {
              self.formData = res.data
            }
          })
        }
      }
    })
  </script>
</body>

</html>