hgwms-2098 fix 策略参数弹窗修改

src/view/config/modal/addConfig.vue

@@ -1,20 +1,52 @@
 <template>
-  <a-modal :open="visible" title="新增配置信息" cancelText="取消" okText="提交" @ok="submit" @cancel="cancel">
+  <a-modal
-    <a-form ref="formRef" :model="formState" :rules="formRules" v-bind="formItemLayoutWithOutLabel"
+    :open="visible"
-      :label-col="labelCol" :wrapper-col="wrapperCol">
+    title="新增配置信息"
+    cancelText="取消"
+    okText="提交"
+    @ok="submit"
+    @cancel="cancel"
+  >
+    <a-form
+      ref="formRef"
+      :model="formState"
+      :rules="formRules"
+      layout="vertical"
+    >
+      <a-row :gutter="[16, 0]">
+        <a-col :span="24">
           <a-form-item ref="name" label="描述" name="name">
             <a-textarea v-model:value="formState.name" />
           </a-form-item>
+        </a-col>
+        <a-col :span="24">
           <a-form-item ref="code" label="编号" name="code">
             <a-input v-model:value="formState.code" />
           </a-form-item>
-      <a-form-item ref="collectionType" label="集合类型" name="collectionType">
+        </a-col>
-        <a-select v-model:value="formState.collectionType" :options="configCollectionType"
+        <a-col :span="24">
-          @change="configCollectionTypeChanged" />
+          <a-form-item
+            ref="collectionType"
+            label="集合类型"
+            name="collectionType"
+          >
+            <a-select
+              v-model:value="formState.collectionType"
+              :options="configCollectionType"
+              @change="configCollectionTypeChanged"
+            />
           </a-form-item>
+        </a-col>
+        <a-col :span="24">
           <a-form-item ref="valueType" label="值类型" name="valueType">
-        <a-select v-model:value="formState.valueType" :options="configValueType" @change="valueTypeChanged" />
+            <a-select
+              v-model:value="formState.valueType"
+              :options="configValueType"
+              @change="valueTypeChanged"
+            />
           </a-form-item>
+        </a-col>
+
         <template v-if="formState.collectionType === 'Single'">
           <p>Single</p>
           <!-- 单值-Interage：代表 数字框-->
@@ -51,13 +83,18 @@
           <!-- 单值-日期：代表 时间选择器-->
           <template v-if="formState.valueType === 'INT'">
             <p>INT</p>
-          <a-form-item v-for="(domain, index) in formState.domains" :key="domain.key"
+            <a-form-item
-            v-bind="index === 0 ? formItemLayout : {}" :label="index === 0 ? 'Domains' : 'Domains'"
+              v-for="(domain, index) in formState.domains"
-            :name="['domains', index, 'value']" :rules="{
+              :key="domain.key"
+              v-bind="index === 0 ? formItemLayout : {}"
+              :label="index === 0 ? 'Domains' : 'Domains'"
+              :name="['domains', index, 'value']"
+              :rules="{
                 required: true,
                 message: 'domain can not be null',
                 trigger: 'change',
-               }">
+              }"
+            >
               <a-row>
                 <a-col :span="6">
                   <a-input v-model:value="domain.name" placeholder="name" />
@@ -82,13 +119,18 @@
           <template v-else-if="formState.valueType === 'BOOLEAN'">
             <p>BOOLEAN</p>
             <!-- <p>BOOLEAN {{formState.valueType}}</p> -->
-          <a-form-item v-for="(domain, index) in formState.domains" :key="domain.key"
+            <a-form-item
-            v-bind="index === 0 ? formItemLayout : {}" :label="index === 0 ? 'Domains' : 'Domains'"
+              v-for="(domain, index) in formState.domains"
-            :name="['domains', index, 'value']" :rules="{
+              :key="domain.key"
+              v-bind="index === 0 ? formItemLayout : {}"
+              :label="index === 0 ? 'Domains' : 'Domains'"
+              :name="['domains', index, 'value']"
+              :rules="{
                 required: true,
                 message: 'domain can not be null',
                 trigger: 'change',
-               }">
+              }"
+            >
               <a-row>
                 <a-col :span="8">
                   <a-input v-model:value="domain.name" placeholder="name" />
@@ -112,13 +154,18 @@
           </template>
           <template v-else-if="formState.valueType === 'DATE'">
             <p>DATE</p>
-          <a-form-item v-for="(domain, index) in formState.domains" :key="domain.key"
+            <a-form-item
-            v-bind="index === 0 ? formItemLayout : {}" :label="index === 0 ? 'Domains' : 'Domains'"
+              v-for="(domain, index) in formState.domains"
-            :name="['domains', index, 'value']" :rules="{
+              :key="domain.key"
+              v-bind="index === 0 ? formItemLayout : {}"
+              :label="index === 0 ? 'Domains' : 'Domains'"
+              :name="['domains', index, 'value']"
+              :rules="{
                 required: true,
                 message: 'domain can not be null',
                 trigger: 'change',
-               }">
+              }"
+            >
               <a-row>
                 <a-col :span="8">
                   <a-input v-model:value="domain.name" placeholder="name" />
@@ -142,13 +189,18 @@
           </template>
           <template v-else>
             <p>STRING</p>
-          <a-form-item v-for="(domain, index) in formState.domains" :key="domain.key"
+            <a-form-item
-            v-bind="index === 0 ? formItemLayout : {}" :label="index === 0 ? 'Domains' : 'Domains'"
+              v-for="(domain, index) in formState.domains"
-            :name="['domains', index, 'value']" :rules="{
+              :key="domain.key"
+              v-bind="index === 0 ? formItemLayout : {}"
+              :label="index === 0 ? 'Domains' : 'Domains'"
+              :name="['domains', index, 'value']"
+              :rules="{
                 required: true,
                 message: 'domain can not be null',
                 trigger: 'change',
-               }">
+              }"
+            >
               <a-row>
                 <a-col :span="8">
                   <a-input v-model:value="domain.name" placeholder="name" />
@@ -179,13 +231,18 @@
           <!-- 单值-日期：代表 时间选择器-->
           <template v-if="formState.valueType === 'STRING'">
             <p>STRING</p>
-          <a-form-item v-for="(domain, index) in formState.domains" :key="domain.key"
+            <a-form-item
-            v-bind="index === 0 ? formItemLayout : {}" :label="index === 0 ? 'Domains' : 'Domains'"
+              v-for="(domain, index) in formState.domains"
-            :name="['domains', index, 'value']" :rules="{
+              :key="domain.key"
+              v-bind="index === 0 ? formItemLayout : {}"
+              :label="index === 0 ? 'Domains' : 'Domains'"
+              :name="['domains', index, 'value']"
+              :rules="{
                 required: true,
                 message: 'domain can not be null',
                 trigger: 'change',
-                 }">
+              }"
+            >
               <a-row>
                 <a-col :span="8">
                   <a-input v-model:value="domain.name" placeholder="name" />
@@ -209,13 +266,18 @@
           </template>
           <template v-else-if="formState.valueType === 'INT'">
             <p>INT</p>
-          <a-form-item v-for="(domain, index) in formState.domains" :key="domain.key"
+            <a-form-item
-            v-bind="index === 0 ? formItemLayout : {}" :label="index === 0 ? 'Domains' : 'Domains'"
+              v-for="(domain, index) in formState.domains"
-            :name="['domains', index, 'value']" :rules="{
+              :key="domain.key"
+              v-bind="index === 0 ? formItemLayout : {}"
+              :label="index === 0 ? 'Domains' : 'Domains'"
+              :name="['domains', index, 'value']"
+              :rules="{
                 required: true,
                 message: 'domain can not be null',
                 trigger: 'change',
-                 }">
+              }"
+            >
               <a-row>
                 <a-col :span="8">
                   <a-input v-model:value="domain.name" placeholder="name" />
@@ -240,13 +302,18 @@
 
           <template v-else-if="formState.valueType === 'BOOLEAN'">
             <p>BOOLEAN</p>
-          <a-form-item v-for="(domain, index) in formState.domains" :key="domain.key"
+            <a-form-item
-            v-bind="index === 0 ? formItemLayout : {}" :label="index === 0 ? 'Domains' : 'Domains'"
+              v-for="(domain, index) in formState.domains"
-            :name="['domains', index, 'value']" :rules="{
+              :key="domain.key"
+              v-bind="index === 0 ? formItemLayout : {}"
+              :label="index === 0 ? 'Domains' : 'Domains'"
+              :name="['domains', index, 'value']"
+              :rules="{
                 required: true,
                 message: 'domain can not be null',
                 trigger: 'change',
-                }">
+              }"
+            >
               <a-row>
                 <a-col :span="8">
                   <a-input v-model:value="domain.name" placeholder="name" />
@@ -270,13 +337,18 @@
           </template>
           <template v-else-if="formState.valueType === 'DATE'">
             <p>DATE</p>
-          <a-form-item v-for="(domain, index) in formState.domains" :key="domain.key"
+            <a-form-item
-            v-bind="index === 0 ? formItemLayout : {}" :label="index === 0 ? 'Domains' : 'Domains'"
+              v-for="(domain, index) in formState.domains"
-            :name="['domains', index, 'value']" :rules="{
+              :key="domain.key"
+              v-bind="index === 0 ? formItemLayout : {}"
+              :label="index === 0 ? 'Domains' : 'Domains'"
+              :name="['domains', index, 'value']"
+              :rules="{
                 required: true,
                 message: 'domain can not be null',
                 trigger: 'change',
-                }">
+              }"
+            >
               <a-row>
                 <a-col :span="8">
                   <a-input v-model:value="domain.name" placeholder="name" />
@@ -298,7 +370,6 @@
               </a-row>
             </a-form-item>
           </template>
-
         </template>
         <template v-else>
           <!-- 单值-Interage：代表 数字框-->
@@ -336,33 +407,23 @@
         </a-row>
       </a-form-item> -->
 
-
         <!-- <a-form-item label="状态" name="enable">
         <a-switch v-model:checked="formState.enable" />
       </a-form-item> -->
+        <a-col :span="24">
           <a-form-item label="备注" name="remark">
             <a-textarea v-model:value="formState.remark" />
           </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
   </a-modal>
 </template>
 <script>
-    import {
+import { message } from "@hwork/ant-design-vue";
-    message
+import { addConfig } from "@/api/module/config";
-  } from '@hwork/ant-design-vue';
+import { defineComponent, reactive, ref, toRaw } from "vue";
-  import {
+import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons-vue";
-    addConfig
-  } from "@/api/module/config";
-  import {
-    defineComponent,
-    reactive,
-    ref,
-    toRaw
-  } from "vue";
-  import {
-    MinusCircleOutlined,
-    PlusOutlined
-  } from '@ant-design/icons-vue';
 
 export default defineComponent({
   props: {
@@ -372,7 +433,6 @@
   },
   emit: ["close"],
   setup(props, context) {
-
     const formRef = ref();
 
     const formState = reactive({
@@ -382,26 +442,34 @@
     });
 
     const formRules = {
-        name: [{
+      name: [
+        {
           required: true,
-          message: '请输入名称',
+          message: "请输入名称",
-          trigger: 'blur'
+          trigger: "blur",
-        }, ],
+        },
-        code: [{
+      ],
+      code: [
+        {
           required: true,
-          message: '请输入键',
+          message: "请输入键",
-          trigger: 'blur'
+          trigger: "blur",
-        }, ],
+        },
-        valueType: [{
+      ],
+      valueType: [
+        {
           required: true,
-          message: '请选择值类型',
+          message: "请选择值类型",
-          trigger: 'blur'
+          trigger: "blur",
-        }, ],
+        },
-        collectionType: [{
+      ],
+      collectionType: [
+        {
           required: true,
-          message: '请选择集合类型',
+          message: "请选择集合类型",
-          trigger: 'blur'
+          trigger: "blur",
-        }, ]
+        },
+      ],
     };
     const formItemLayout = {
       labelCol: {
@@ -434,7 +502,7 @@
       },
     };
 
-      const removeDomain = item => {
+    const removeDomain = (item) => {
       let index = formState.domains.indexOf(item);
       if (index !== -1) {
         formState.domains.splice(index, 1);
@@ -442,12 +510,17 @@
     };
 
     const configCollectionTypeChanged = function (e) {
-        formState.domain = []
+      formState.domain = [];
-      }
+    };
     const valueTypeChanged = function (e) {
-        formState.domain = []
+      formState.domain = [];
-        if (formState.collectionType === "" || formState.collectionType === undefined) return;
+      if (
-        if (formState.valueType === "" || formState.valueType === undefined) return;
+        formState.collectionType === "" ||
+        formState.collectionType === undefined
+      )
+        return;
+      if (formState.valueType === "" || formState.valueType === undefined)
+        return;
       // switch(formState.collectionType){
       //  case "Single": break;
       //  case "Map":
@@ -464,78 +537,84 @@
       //     case "List":break;
       //   default:break;
       // }
-        if (formState.domains)
+      if (formState.domains) console.log("valueTypeChanged", e);
-          console.log("valueTypeChanged", e)
+      console.log("valueTypeChanged", e.value);
-        console.log("valueTypeChanged", e.value)
+    };
-      }
 
     const addDomain = () => {
-
       formState.domains.push({
-          value: '',
+        value: "",
-          name: '',
+        name: "",
         key: Date.now(),
       });
     };
 
-      const configValueType = ref([{
+    const configValueType = ref([
-          value: 'STRING',
+      {
-          label: '字符串类型',
+        value: "STRING",
-        }, {
+        label: "字符串类型",
-          value: 'BOOLEAN',
-          label: 'boolean类型',
       },
       {
-          value: 'INT',
+        value: "BOOLEAN",
-          label: 'Int数据类型',
+        label: "boolean类型",
       },
       {
-          value: 'DATE',
+        value: "INT",
-          label: '日期类型',
+        label: "Int数据类型",
+      },
+      {
+        value: "DATE",
+        label: "日期类型",
       },
     ]);
 
-      const configCollectionType = ref([{
+    const configCollectionType = ref([
-          value: 'Single',
+      {
-          label: '单个值对象',
+        value: "Single",
-        }, {
+        label: "单个值对象",
-          value: 'Map',
-          label: 'Map数据字典',
       },
       {
-          value: 'List',
+        value: "Map",
-          label: 'list集合',
+        label: "Map数据字典",
-        }
+      },
+      {
+        value: "List",
+        label: "list集合",
+      },
     ]);
 
     const key = "addConfig";
     const submit = (e) => {
-        console.log("提交", e)
+      console.log("提交", e);
       let row = toRaw(formState);
-        console.log("提交的数据", row)
+      console.log("提交的数据", row);
       formRef.value
         .validate()
         .then(() => {
           addConfig(toRaw(formState)).then((response) => {
             if (response.success) {
-                message.success({
+              message
-                  content: '保存成功',
+                .success({
-                  duration: 1
+                  content: "保存成功",
-                }).then(() => {
+                  duration: 1,
+                })
+                .then(() => {
                   cancel();
                 });
             } else {
-                message.success({
+              message
-                  content: '保存失败',
+                .success({
-                  duration: 1
+                  content: "保存失败",
-                }).then(() => {
+                  duration: 1,
+                })
+                .then(() => {
                   cancel();
                 });
             }
           });
         })
-          .catch(error => {
+        .catch((error) => {
-            console.log('error', error);
+          console.log("error", error);
         });
     };
 
@@ -544,8 +623,6 @@
       context.emit("close", false);
     };
 
-
-
     return {
       submit,
       cancel,
@@ -560,13 +637,12 @@
       formItemLayoutWithOutLabel,
       configCollectionTypeChanged,
       labelCol: {
-          span: 8
+        span: 8,
       },
       wrapperCol: {
-          span: 12
+        span: 12,
       },
     };
-
   },
 });
 </script>

src/view/config/modal/edit.vue

@@ -11,28 +11,40 @@
       ref="formRef"
       :model="formState"
       :rules="formRules"
-      :label-col="labelCol"
+      layout="vertical"
-      :wrapper-col="wrapperCol">
+    >
+      <a-row :gutter="[16, 0]">
+        <a-col :span="24">
           <a-form-item ref="name" label="描述" name="name">
             <a-textarea v-model:value="formState.name" />
           </a-form-item>
+        </a-col>
+        <a-col :span="24">
           <a-form-item ref="code" label="编号" name="code">
             <a-input v-model:value="formState.code" />
           </a-form-item>
+        </a-col>
+        <a-col :span="24">
           <a-form-item ref="value" label="值" name="value">
             <a-textarea v-model:value="formState.value" />
           </a-form-item>
+        </a-col>
+        <a-col :span="24">
           <a-form-item label="状态" name="enable">
             <a-switch v-model:checked="formState.enable" />
           </a-form-item>
+        </a-col>
+        <a-col :span="24">
           <a-form-item label="备注" name="remark">
             <a-textarea v-model:value="formState.remark" />
           </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
   </a-modal>
 </template>
 <script>
-import { message } from '@hwork/ant-design-vue';
+import { message } from "@hwork/ant-design-vue";
 import { edit } from "@/api/module/config";
 import { defineComponent, reactive, ref, toRaw, watch } from "vue";
 
@@ -44,29 +56,28 @@ export default defineComponent({
     },
     record: {
       type: Object,
-    }
+    },
   },
   emit: ["close"],
   setup(props, context) {
-
     const formRef = ref();
 
     let formState = reactive({});
 
     const formRules = {
-        name: [{ required: true, message: '请输入配置描述', trigger: 'blur'}],
+      name: [{ required: true, message: "请输入配置描述", trigger: "blur" }],
-      code: [{ required: true, message: '请输入配置编号', trigger: 'blur'}],
+      code: [{ required: true, message: "请输入配置编号", trigger: "blur" }],
-      value: [{ required: true, message: '请输入配置值', trigger: 'blur'}]
+      value: [{ required: true, message: "请输入配置值", trigger: "blur" }],
     };
 
     watch(props, (props) => {
-        formState.id = props.record.id
+      formState.id = props.record.id;
-        formState.name = props.record.name
+      formState.name = props.record.name;
-        formState.code = props.record.code
+      formState.code = props.record.code;
-        formState.value = props.record.value
+      formState.value = props.record.value;
-        formState.remark = props.record.remark
+      formState.remark = props.record.remark;
-        formState.enable = props.record.enable
+      formState.enable = props.record.enable;
-    })
+    });
 
     const submit = (e) => {
       message.loading({
@@ -78,19 +89,23 @@ export default defineComponent({
         .then(() => {
           edit(toRaw(formState)).then((response) => {
             if (response.success) {
-              message.success({
+              message
+                .success({
                   content: "保存成功",
                   key,
                   duration: 1,
-              }).then(()=>{
+                })
+                .then(() => {
                   cancel();
                 });
             } else {
-              message.error({
+              message
+                .error({
                   content: "保存失败",
                   key,
                   duration: 1,
-              }).then(()=>{
+                })
+                .then(() => {
                   cancel();
                 });
             }

src/view/config/modal/info.vue

@@ -11,23 +11,35 @@
       ref="formRef"
       :model="formState"
       :rules="formRules"
-      :label-col="labelCol"
+      layout="vertical"
-      :wrapper-col="wrapperCol">
+    >
+      <a-row :gutter="[16, 0]">
+        <a-col :span="24">
           <a-form-item ref="name" label="描述" name="name">
             <a-textarea v-model:value="formState.name" />
           </a-form-item>
+        </a-col>
+        <a-col :span="24">
           <a-form-item ref="code" label="编号" name="code">
             <a-input v-model:value="formState.code" />
           </a-form-item>
+        </a-col>
+        <a-col :span="24">
           <a-form-item ref="value" label="值" name="value">
             <a-textarea v-model:value="formState.value" />
           </a-form-item>
+        </a-col>
+        <a-col :span="24">
           <a-form-item label="状态" name="enable">
             <a-switch v-model:checked="formState.enable" />
           </a-form-item>
+        </a-col>
+        <a-col :span="24">
           <a-form-item label="备注" name="remark">
             <a-textarea v-model:value="formState.remark" />
           </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
   </a-modal>
 </template>
@@ -42,29 +54,28 @@ export default defineComponent({
     },
     record: {
       type: Object,
-    }
+    },
   },
   emit: ["close"],
   setup(props, context) {
-
     const formRef = ref();
 
     let formState = reactive({});
 
     const formRules = {
-      name: [{ required: true, message: '请输入配置描述', trigger: 'blur'}],
+      name: [{ required: true, message: "请输入配置描述", trigger: "blur" }],
-      code: [{ required: true, message: '请输入配置编号', trigger: 'blur'}],
+      code: [{ required: true, message: "请输入配置编号", trigger: "blur" }],
-      value: [{ required: true, message: '请输入配置值', trigger: 'blur'}]
+      value: [{ required: true, message: "请输入配置值", trigger: "blur" }],
     };
 
     watch(props, (props) => {
-        formState.id = props.record.id
+      formState.id = props.record.id;
-        formState.name = props.record.name
+      formState.name = props.record.name;
-        formState.code = props.record.code
+      formState.code = props.record.code;
-        formState.value = props.record.value
+      formState.value = props.record.value;
-        formState.remark = props.record.remark
+      formState.remark = props.record.remark;
-        formState.enable = props.record.enable
+      formState.enable = props.record.enable;
-    })
+    });
 
     const submit = (e) => {
       formRef.value.resetFields();

src/view/config/modal/save.vue

@@ -11,24 +11,35 @@
       ref="formRef"
       :model="formState"
       :rules="formRules"
-      :label-col="labelCol"
+      layout="vertical"
-      :wrapper-col="wrapperCol"
     >
+      <a-row :gutter="[16, 0]">
+        <a-col :span="12">
           <a-form-item ref="name" label="名称" name="name">
             <a-input v-model:value="formState.name" />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="code" label="编号" name="code">
             <a-input v-model:value="formState.code" />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item ref="value" label="值" name="value">
             <a-input v-model:value="formState.value" />
           </a-form-item>
+        </a-col>
+        <a-col :span="12">
           <a-form-item label="状态" name="enable">
             <a-switch v-model:checked="formState.enable" />
           </a-form-item>
+        </a-col>
+        <a-col :span="24">
           <a-form-item label="备注" name="remark">
             <a-textarea v-model:value="formState.remark" />
           </a-form-item>
+        </a-col>
+      </a-row>
     </a-form>
   </a-modal>
 </template>
@@ -53,9 +64,9 @@ export default defineComponent({
     });
 
     const formRules = {
-        name: [{ required: true, message: '请输入配置描述', trigger: 'blur'}],
+      name: [{ required: true, message: "请输入配置描述", trigger: "blur" }],
-      code: [{ required: true, message: '请输入配置编号', trigger: 'blur'}],
+      code: [{ required: true, message: "请输入配置编号", trigger: "blur" }],
-      value: [{ required: true, message: '请输入配置值', trigger: 'blur'}]
+      value: [{ required: true, message: "请输入配置值", trigger: "blur" }],
     };
 
     const submit = (e) => {
@@ -68,19 +79,23 @@ export default defineComponent({
         .then(() => {
           save(toRaw(formState)).then((response) => {
             if (response.success) {
-              message.success({
+              message
+                .success({
                   content: "保存成功",
                   key,
                   duration: 1,
-              }).then(()=>{
+                })
+                .then(() => {
                   cancel();
                 });
             } else {
-              message.error({
+              message
+                .error({
                   content: response.msg,
                   key,
                   duration: 1,
-              }).then(()=>{
+                })
+                .then(() => {
                   cancel();
                 });
             }