JeecgBoot2.4.3版本发布——企业级低代码平台

ant-design-vue-jeecg/src/views/system/modules/SysCategoryModal.vue

@@ -9,36 +9,25 @@
     :destroyOnClose="true"
     cancelText="关闭">
     <a-spin :spinning="confirmLoading">
-      <a-form :form="form">
+      <a-form-model ref="form" :model="model" :rules="validatorRules">
 
-        <a-form-item label="父级节点" :labelCol="labelCol" :wrapperCol="wrapperCol">
+        <a-form-model-item label="父级节点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pid">
           <j-tree-select
             ref="treeSelect"
             placeholder="请选择父级节点"
-            v-decorator="['pid', validatorRules.pid]"
+            v-model="model.pid"
             dict="sys_category,name,id"
             pidField="pid"
-            pidValue="0">
+            pidValue="0"
+           :disabled="disabled">
           </j-tree-select>
-        </a-form-item>
+        </a-form-model-item>
           
-        <a-form-item label="分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-input v-decorator="[ 'name', validatorRules.name]" placeholder="请输入分类名称"></a-input>
-        </a-form-item>
+        <a-form-model-item label="分类名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
+          <a-input v-model="model.name" placeholder="请输入分类名称"></a-input>
+        </a-form-model-item>
           
-        <!--<a-form-item label="类型编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-input v-decorator="[ 'code', validatorRules.code]" placeholder="请输入类型编码"></a-input>
-        </a-form-item>-->
-
-        <!--<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <span style="font-size: 12px;color:red" slot="label">编码规则(注)</span>
-          <span style="font-size: 12px;color:red">
-            编码值前缀需和父节点保持一致,比如父级节点编码是A01则当前编码必须以A01开头
-          </span>
-        </a-form-item>-->
-          
-        
-      </a-form>
+      </a-form-model>
     </a-spin>
   </a-modal>
 </template>
@@ -46,7 +35,6 @@
 <script>
 
   import { httpAction,getAction } from '@/api/manage'
-  import pick from 'lodash.pick'
   import JTreeSelect from '@/components/jeecg/JTreeSelect'
   
   export default {
@@ -56,7 +44,6 @@
     },
     data () {
       return {
-        form: this.$form.createForm(this),
         title:"操作",
         width:800,
         visible: false,
@@ -72,15 +59,8 @@
 
         confirmLoading: false,
         validatorRules:{
-          code:{
-            rules: [{
-              required: true, message: '请输入类型编码!'
-            },{
-              validator: this.validateMyCode
-            }]
-          },
           pid:{},
-          name:{rules: [{ required: true, message: '请输入类型名称!' }]}
+          name: [{ required: true, message: '请输入类型名称!' }]
         },
         url: {
           add: "/sys/category/add",
@@ -95,27 +75,29 @@
     },
     created () {
     },
+    computed : {
+      disabled() {
+          return this.model.id?true : false;
+      }
+    },
     methods: {
       add () {
         this.edit({});
       },
       edit (record) {
-        this.form.resetFields();
         this.model = Object.assign({}, record);
         this.visible = true;
-        this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model,'pid','name','code'))
-        })
       },
       close () {
         this.$emit('close');
         this.visible = false;
+        this.$refs.form.resetFields();
       },
       handleOk () {
         const that = this;
         // 触发表单验证
-        this.form.validateFields((err, values) => {
-          if (!err) {
+        this.$refs.form.validate(valid => {
+          if (valid) {
             that.confirmLoading = true;
             let httpurl = '';
             let method = '';
@@ -126,12 +108,10 @@
               httpurl+=this.url.edit;
                method = 'put';
             }
-            let formData = Object.assign(this.model, values);
-            console.log("表单提交数据",formData)
-            httpAction(httpurl,formData,method).then((res)=>{
+            httpAction(httpurl,this.model,method).then((res)=>{
               if(res.success){
                 that.$message.success(res.message);
-                that.submitSuccess(formData)
+                that.submitSuccess(this.model)
               }else{
                 that.$message.warning(res.message);
               }
@@ -139,6 +119,8 @@
               that.confirmLoading = false;
               that.close();
             })
+          }else{
+            return false;
           }
          
         })
@@ -146,9 +128,6 @@
       handleCancel () {
         this.close()
       },
-      popupCallback(row){
-        this.form.setFieldsValue(pick(row,'pid','name','code'))
-      },
       submitSuccess(formData){
         if(!formData.id){
           let treeData = this.$refs.treeSelect.getCurrTreeData()
@@ -174,21 +153,7 @@
           }
         }
       },
-      validateMyCode(rule, value, callback){
-        let params = {
-          pid: this.form.getFieldValue('pid'),
-          code: value
-        }
-        getAction(this.url.checkCode,params).then((res) => {
-          if (res.success) {
-            callback()
-          } else {
-            callback(res.message)
-          }
-        })
-      },
-      
-      
+
     }
   }
 </script>