Web/src/pages/system/config/form.vue

@@ -0,0 +1,114 @@
+<template>
+  <a-form-model :model="form" :rules="rules" class="yo-form" ref="form">
+    <div class="yo-form-group">
+      <a-form-model-item label="角色名" prop="name">
+        <a-input placeholder="请输入角色名" v-model="form.name" />
+      </a-form-model-item>
+      <a-form-model-item label="唯一编码" prop="code" :disabled="editDisabled">
+        <a-input placeholder="请输入唯一编码" v-model="form.code" />
+      </a-form-model-item>
+      <a-form-model-item label="系统参数" prop="sysFlag">
+        <a-radio-group v-model="form.sysFlag" :disabled="editDisabled">
+          <a-radio-button value="Y">
+            <a-icon :style="{ color: '#1890ff' }" />是
+          </a-radio-button>
+          <a-radio-button value="N">
+            <a-icon :style="{ color: '#eb2f96' }" />否
+          </a-radio-button>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item label="所属分类" prop="groupCode">
+        <a-select placeholder="请选择所属分类" v-model="form.groupCode" :disabled="editDisabled">
+            <a-select-option
+                  :key="i"
+                  :value="item.code"
+                  v-for="(item, i) in groupCode"
+                >{{ item.value }}</a-select-option>
+              </a-select>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="参数值" prop="name">
+        <a-input placeholder="请输入参数值 " v-model="form.value" />
+      </a-form-model-item>
+      <a-form-model-item label="备注" prop="remark">
+        <a-input placeholder="请输入备注" v-model="form.remark" />
+      </a-form-model-item>
+    </div>
+  </a-form-model>
+</template>
+<script>
+import moment from 'moment';
+export default {
+  data() {
+    return {
+        editDisabled:false,
+    groupCode:[],
+      form: {
+        active: "N",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入应用名称" }],
+        code: [{ required: true, message: "请输入唯一编码" }],
+        sysFlag: [{ required: true, message: "请选择参数类型" }],
+        groupCode: [{ required: true, message: "请选择所属分类" }],
+        value: [{ required: true, message: "请输入参数值" }],
+      },
+    };
+  },
+  methods: {
+      moment,
+    /**
+     * 必要的方法
+     * 在打开编辑页时允许填充数据
+     */
+    onFillData(record) {
+      this.form = this.$_.cloneDeep(record);
+      if(record.sysFlag == 'Y')
+      {
+          this.editDisabled = true
+      }else
+      {
+           this.editDisabled = false
+      }
+    },
+
+    async onInit() {
+      this.loading = true;
+      this.groupCode = await this.onLoadgroupCodeData();
+      this.loading = false;
+    },
+
+
+    /**
+     * 必要的方法
+     * 在外部窗口进行保存时调用表单验证
+     */
+    onValidate(callback) {
+      this.$refs.form.validate(callback);
+    },
+    
+    /**
+     * 
+     * 获取所属分类字典表的内容
+     */
+    
+    onLoadgroupCodeData() {
+      return this.$api.sysDictTypeDropDown({ code: 'consts_type' }).then(({ data }) => {
+        return data;
+      });
+    },
+
+    /**
+     * 必要的方法
+     * 在外部窗口关闭或重置时对表单验证进行初始化
+     */
+    onResetFields() {
+      setTimeout(() => {
+        this.form = {};
+        this.$refs.form.resetFields();
+      }, 300);
+    },
+
+  },
+};
+</script>