配置值修改

src/assets/styles/home.scss

@@ -326,6 +326,8 @@
     flex-shrink: 0;
     flex-grow: 0;
     margin-bottom: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
     li {
       padding: 10px 5px;
       line-height: 20px;
@@ -400,6 +402,7 @@
         color: $--color-text-gray-2;
         margin: 0 15px;
         font-weight: 300;
+        font-size: 14px;
       }
     }
   }

src/modules/admin/components/ModifyAppConfigItem.vue

@@ -47,11 +47,10 @@
         ></el-input>
       </el-form-item>
       <el-form-item prop="value" label="配置值：">
-        <el-input
-          v-model.trim="modalForm.value"
-          placeholder="请输入配置值"
-          clearable
-        ></el-input>
+        <value-modify
+          v-model="modalForm.value"
+          :available="available"
+        ></value-modify>
       </el-form-item>
 
       <el-form-item v-if="modalForm.comment" label="注释：">
@@ -69,6 +68,7 @@
 
 <script>
 import { appConfigItemUpdate } from "../api";
+import ValueModify from "./ValueModify.vue";
 
 const initModalForm = {
   appId: "",
@@ -82,6 +82,9 @@ const initModalForm = {
 
 export default {
   name: "modify-app-config-item",
+  components: {
+    ValueModify
+  },
   props: {
     instance: {
       type: Object,
@@ -167,19 +170,15 @@ export default {
         value: [
           {
             required: true,
-            message: "请输入配置值",
-            trigger: "change"
-          },
-          {
-            max: 200,
-            message: "配置值不能超过200字符",
+            message: "请设置配置值",
             trigger: "change"
           }
         ]
       },
+      available: null,
       selectAvailableKey: "",
       selectAvailable: {},
-      isStrictKey: true
+      isStrictKey: false
     };
   },
   computed: {
@@ -198,7 +197,8 @@ export default {
     visibleChange() {
       this.selectAvailableKey = "";
       this.selectAvailable = {};
-      this.isStrictKey = true;
+      this.isStrictKey = false;
+      this.available = this.instance.available;
       this.initData(this.instance);
     },
     cancel() {
@@ -213,8 +213,9 @@ export default {
       );
       this.isStrictKey = !this.selectAvailableKey.includes(".*.");
       this.modalForm.key = this.selectAvailableKey;
-      if (this.selectAvailable.defaultValue)
-        this.modalForm.value = this.selectAvailable.defaultValue;
+      this.modalForm.value = this.selectAvailable.defaultValue || null;
+      this.available = this.selectAvailable;
+      this.$refs.modalFormComp.validate().catch(() => {});
     },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate().catch(() => {});

src/modules/admin/components/ValueModify.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="value-modify">
+    <el-select
+      v-if="available.options && available.options.length"
+      v-model="inputValue"
+      clearable
+      @change="valChange"
+    >
+      <el-option
+        v-for="item in available.options"
+        :key="item"
+        :value="item"
+        :label="item"
+      >
+      </el-option>
+    </el-select>
+    <el-input-number
+      v-else-if="available.type === 'number'"
+      v-model="inputValue"
+      :controls="false"
+      @change="valChange"
+    ></el-input-number>
+    <el-switch
+      v-else-if="available.type === 'boolean'"
+      v-model="inputValue"
+      active-color="#13ce66"
+      inactive-color="#ff4949"
+      @change="valChange"
+    >
+    </el-switch>
+    <el-input
+      v-else
+      v-model="inputValue"
+      :maxlength="500"
+      @input="valChange"
+    ></el-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "value-modify",
+  props: {
+    value: {
+      type: [String, Number, Boolean, Array],
+      default: null
+    },
+    available: {
+      type: Object,
+      default() {
+        return {
+          type: "string",
+          defaultValue: "",
+          options: []
+        };
+      }
+    }
+  },
+  data() {
+    return {
+      inputValue: null
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.inputValue = val;
+      }
+    }
+  },
+  methods: {
+    valChange() {
+      this.$emit("input", this.inputValue);
+      this.$emit("change", this.inputValue);
+    }
+  }
+};
+</script>