更新展示形式，升级到2.4.5

jero-web/src/views/system/DepartUserList.vue

@@ -25,7 +25,7 @@
           <div style="margin-top: 24px;" v-else-if="userIdentity === '2' && departTree.length==0">
             <h3><span>您的部门下暂无有效部门信息</span></h3>
           </div>
-          <div style="margin-top: 24px;" v-else><h3>普通员工暂此权限</h3></div>
+          <div style="margin-top: 24px;" v-else><h3>普通员工暂无此权限</h3></div>
         </div>
       </a-card>
     </a-col>
@@ -49,8 +49,8 @@
 <script>
   import DeptBaseInfo from './modules/DeptBaseInfo'
   import DeptUserInfo from './modules/DeptUserInfo'
-  import {queryMyDepartTreeList, searchByKeywords} from '@/api/api'
-  import {JeroListMixin} from '@/mixins/JeroListMixin'
+  import { queryMyDepartTreeList, searchByKeywords } from '@/api/api'
+  import { JeroListMixin } from '@/mixins/JeroListMixin'
   import DeptRoleInfo from './modules/DeptRoleInfo'
 
   export default {

jero-web/src/views/system/QuartzJobList.vue

@@ -3,22 +3,22 @@
 
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
+      <a-form-model layout="inline" :model="queryParam" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
 
           <a-col :md="6" :sm="10">
-            <a-form-item label="任务类名">
+            <a-form-model-item label="任务类名" prop="jobClassName">
               <a-input placeholder="请输入任务类名" v-model="queryParam.jobClassName"></a-input>
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
           <a-col :md="6" :sm="10">
-            <a-form-item label="任务状态">
+            <a-form-model-item label="任务状态" prop="status">
               <a-select style="width: 220px" v-model="queryParam.status" placeholder="请选择状态">
                 <a-select-option value="">全部</a-select-option>
                 <a-select-option value="0">正常</a-select-option>
                 <a-select-option value="-1">停止</a-select-option>
               </a-select>
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
 
           <a-col :md="6" :sm="10" >
@@ -29,7 +29,7 @@
           </a-col>
 
         </a-row>
-      </a-form>
+      </a-form-model>
     </div>
 
     <!-- 操作按钮区域 -->
@@ -225,7 +225,7 @@
           title:"确认暂停",
           content:"是否暂停选中任务?",
           onOk: function(){
-            getAction(that.url.pause,{jobClassName:record.jobClassName}).then((res)=>{
+            getAction(that.url.pause,{id:record.id}).then((res)=>{
               if(res.success){
                 that.$message.success(res.message);
                 that.loadData();
@@ -245,7 +245,7 @@
           title:"确认启动",
           content:"是否启动选中任务?",
           onOk: function(){
-            getAction(that.url.resume,{jobClassName:record.jobClassName}).then((res)=>{
+            getAction(that.url.resume,{id:record.id}).then((res)=>{
               if(res.success){
                 that.$message.success(res.message);
                 that.loadData();

jero-web/src/views/system/SysAnnouncementList.vue

@@ -102,6 +102,12 @@
 
     <!-- 表单区域 -->
     <sysAnnouncement-modal ref="modalForm" @ok="modalFormOk"></sysAnnouncement-modal>
+
+    <!-- 查看详情 -->
+    <j-modal class="detail-modal" title="查看详情" :visible.sync="detailModal.visible" :top="50" :width="600" switchFullscreen :footer="null">
+      <iframe v-if="detailModal.url" class="detail-iframe" :src="detailModal.url"/>
+    </j-modal>
+
   </a-card>
 </template>
 
@@ -110,6 +116,7 @@
   import {doReleaseData, doReovkeData} from '@/api/api'
   import {getAction} from '@/api/manage'
   import {JeroListMixin} from '@/mixins/JeroListMixin'
+  import { ACCESS_TOKEN } from '@/store/mutation-types'
 
   export default {
     name: "SysAnnouncementList",
@@ -237,6 +244,7 @@
             scopedSlots: {customRender: 'action'},
           }
         ],
+        detailModal: {visible: false, url: '',},
         url: {
           list: "/sys/annountCement/page",
           delete: "/sys/annountCement/delete",
@@ -284,14 +292,42 @@
         getAction("sys/annountCement/syncNotic",{anntId:anntId})
       },
       handleDetail:function(record){
-        this.$refs.modalForm.edit(record);
-        this.$refs.modalForm.title="详情";
-        this.$refs.modalForm.disableSubmit = true;
-        this.$refs.modalForm.disabled = true;
+        const domain = window._CONFIG['domianURL']
+        const token = this.$ls.get(ACCESS_TOKEN)
+        this.detailModal.url = `${domain}/sys/annountCement/show/${record.id}?token=${token}`
+        this.detailModal.visible = true
       },
     }
   }
 </script>
-<style scoped>
-  @import '~@assets/less/common.less'
+<style scoped lang="less">
+@import '~@assets/less/common.less';
+
+/** 查看详情弹窗的样式 */
+.detail-modal {
+  .detail-iframe {
+    border: 0;
+    width: 100%;
+    height: 88vh;
+    min-height: 600px;
+  }
+
+  &.fullscreen .detail-iframe {
+    height: 100%;
+  }
+}
+
+.detail-modal /deep/ .ant-modal {
+  top: 30px;
+
+  .ant-modal-body {
+    font-size: 0;
+    padding: 0;
+  }
+}
+
+.detail-modal.fullscreen /deep/ .ant-modal {
+  top: 0;
+}
+
 </style>

jero-web/src/views/system/SysCheckRuleList.vue

@@ -3,18 +3,18 @@
 
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
+      <a-form-model layout="inline" :model="queryParam" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
 
           <a-col :md="6" :sm="8">
-            <a-form-item label="规则名称">
+            <a-form-model-item label="规则名称" prop="ruleName">
               <a-input placeholder="请输入规则名称" v-model="queryParam.ruleName"/>
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
           <a-col :md="6" :sm="8">
-            <a-form-item label="规则Code">
+            <a-form-model-item label="规则Code" prop="ruleCode">
               <a-input placeholder="请输入规则Code" v-model="queryParam.ruleCode"/>
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
           <template v-if="toggleSearchStatus">
           </template>
@@ -30,7 +30,7 @@
           </a-col>
 
         </a-row>
-      </a-form>
+      </a-form-model>
     </div>
 
     <!-- 操作按钮区域 -->

jero-web/src/views/system/SysFillRuleList.vue

@@ -3,17 +3,17 @@
 
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="searchQuery">
+      <a-form-model layout="inline" :model="queryParam" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
           <a-col :md="6" :sm="8">
-            <a-form-item label="规则名称">
+            <a-form-model-item label="规则名称" prop="ruleName">
               <a-input placeholder="请输入规则名称" v-model="queryParam.ruleName"></a-input>
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
           <a-col :md="6" :sm="8">
-            <a-form-item label="规则Code">
+            <a-form-model-item label="规则Code" prop="ruleCode">
               <a-input placeholder="请输入规则Code" v-model="queryParam.ruleCode"></a-input>
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
           <a-col :md="6" :sm="8">
             <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
@@ -22,7 +22,7 @@
             </span>
           </a-col>
         </a-row>
-      </a-form>
+      </a-form-model>
     </div>
 
     <!-- 操作按钮区域 -->

jero-web/src/views/system/UserList.vue

@@ -64,7 +64,7 @@
 
     <!-- 操作按钮区域 -->
     <div class="table-operator" style="border-top: 5px">
-      <a-button @click="handleAdd" type="primary" icon="plus">添加用户</a-button>
+      <a-button @click="handleAdd" type="primary" icon="plus" >添加用户</a-button>
       <a-button type="primary" icon="download" @click="handleExportXls('用户信息')">导出</a-button>
       <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
         <a-button type="primary" icon="import">导入</a-button>
@@ -119,9 +119,9 @@
         </template>
 
         <span slot="action" slot-scope="text, record">
-          <a @click="handleEdit(record)">编辑</a>
+          <a @click="handleEdit(record)" >编辑</a>
 
-          <a-divider type="vertical"/>
+          <a-divider type="vertical" />
 
           <a-dropdown>
             <a class="ant-dropdown-link">

jero-web/src/views/system/modules/AddressListRight.vue

@@ -1,20 +1,20 @@
 <template>
   <a-card class="j-address-list-right-card-box" :loading="cardLoading" :bordered="false">
     <div class="table-page-search-wrapper">
-      <a-form layout="inline">
+      <a-form-model layout="inline" :model="queryParam">
         <a-row :gutter="10">
 
           <a-col :md="6" :sm="12">
-            <a-form-item label="姓名" style="margin-left:8px">
+            <a-form-model-item label="姓名" prop="realname" style="margin-left:8px">
               <a-input placeholder="请输入姓名查询" v-model="queryParam.realname"></a-input>
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
 
 
           <a-col :md="6" :sm="12">
-            <a-form-item label="工号" style="margin-left:8px">
+            <a-form-model-item label="工号" prop="workNo" style="margin-left:8px">
               <a-input placeholder="请输入工号查询" v-model="queryParam.workNo"></a-input>
-            </a-form-item>
+            </a-form-model-item>
           </a-col>
 
           <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
@@ -24,7 +24,7 @@
             </a-col>
           </span>
         </a-row>
-      </a-form>
+      </a-form-model>
     </div>
 
     <a-table

jero-web/src/views/system/modules/DeptBaseInfo.vue

@@ -1,33 +1,33 @@
 <template>
   <a-card :visible="visible">
-    <a-form :form="form">
-      <a-form-item
+    <a-form-model ref="form" :model="model">
+      <a-form-model-item
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
         label="机构名称">
-        <a-input style="border:0px;" placeholder="" v-decorator="['departName', {}]"/>
-      </a-form-item>
-      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
+        <a-input style="border:0;" placeholder="" v-model="model.departName"/>
+      </a-form-model-item>
+      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门">
         <a-tree-select
           disabled
-          style="width:100%;border: 0px;border: none;outline:none;"
+          style="width:100%;border: 0;border: none;outline:none;"
           :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
           :treeData="treeData"
           v-model="model.parentId"
           placeholder="无">
         </a-tree-select>
-      </a-form-item>
-      <a-form-item
+      </a-form-model-item>
+      <a-form-model-item
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
         label="机构编码">
-        <a-input style="border:0px;" placeholder="" v-decorator="['orgCode', {}]"/>
-      </a-form-item>
-      <a-form-item
+        <a-input style="border:0;" placeholder="" v-model="model.orgCode"/>
+      </a-form-model-item>
+      <a-form-model-item
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
         label="机构类型">
-          <a-radio-group :disabled="true" v-decorator="['orgCategory',{}]" placeholder="请选择机构类型">
+          <a-radio-group :disabled="true" v-model="model.orgCategory" read-only>
             <a-radio value="1">
               公司
             </a-radio>
@@ -38,36 +38,35 @@
               岗位
             </a-radio>
           </a-radio-group>
-      </a-form-item>
-      <a-form-item
+      </a-form-model-item>
+      <a-form-model-item
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
         label="排序">
-        <a-input-number style="border:0px;" v-decorator="[ 'departOrder',{}]"/>
-      </a-form-item>
-      <a-form-item
+        <a-input-number style="border:0;" v-model="model.departOrder"/>
+      </a-form-model-item>
+      <a-form-model-item
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
         label="手机号">
-        <a-input style="border:0px;" placeholder="" v-decorator="['mobile', {}]"/>
-      </a-form-item>
-      <a-form-item
+        <a-input style="border:0;" placeholder="" v-model="model.mobile"/>
+      </a-form-model-item>
+      <a-form-model-item
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
         label="地址">
-        <a-input style="border:0px;" placeholder="" v-decorator="['address', {}]"/>
-      </a-form-item>
-      <a-form-item
+        <a-input style="border:0;" placeholder="" v-model="model.address"/>
+      </a-form-model-item>
+      <a-form-model-item
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
         label="备注">
-        <a-textarea style="border:0px;" placeholder="" v-decorator="['memo', {}]"/>
-      </a-form-item>
-    </a-form>
+        <a-textarea style="border:0;" placeholder="" v-model="model.memo"/>
+      </a-form-model-item>
+    </a-form-model>
   </a-card>
 </template>
 <script>
-  import pick from 'lodash.pick'
   import {queryIdTree} from '@/api/api'
 
   export default {
@@ -81,7 +80,6 @@
         visible: false,
         disable: true,
         treeData: [],
-        form: this.$form.createForm(this),
         labelCol: {
           xs: {span: 24},
           sm: {span: 3}
@@ -108,17 +106,14 @@
         })
       },
       open(record) {
-        this.form.resetFields();
-        this.model = Object.assign({}, record);
         this.visible = true;
-        console.log("record:");
-        console.log(record);
         this.$nextTick(() => {
-          this.form.setFieldsValue(pick(record, 'orgCategory','departName', 'parentId', 'orgCode', 'departOrder', 'mobile', 'fax', 'address', 'memo'));
-        });
+          this.$refs.form.resetFields()
+          this.model = Object.assign({}, record)
+        })
       },
       clearForm() {
-        this.form.resetFields();
+        this.$refs.form.resetFields();
         this.treeData = [];
       },
     }

jero-web/src/views/system/modules/QuartzJobModal.vue

@@ -10,60 +10,37 @@
     cancelText="关闭">
 
     <a-spin :spinning="confirmLoading">
-      <a-form :form="form">
+      <a-form-model ref="form" :model="model" :rules="validatorRules">
 
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="任务类名"
-          hasFeedback >
-          <a-input placeholder="请输入任务类名" v-decorator="['jobClassName', {rules: [{ required: true, message: '请输入任务类名!' }]}]" />
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="cron表达式">
-<!--                    <a-input placeholder="请输入cron表达式" v-decorator="['cronExpression', {'initialValue':'0/1 * * * * ?',rules: [{ required: true, message: '请输入任务类名!' }]}]" />-->
-<!--                    <a target="_blank" href="http://cron.qqe2.com/">-->
-<!--                      <a-icon type="share-alt" />-->
-<!--                      在线cron表达式生成-->
-<!--                    </a>-->
-<!--          <j-cron ref="innerVueCron" v-decorator="['cronExpression', {'initialValue':'0/1 * * * * ?',rules: [{ required: true, message: '请输入cron表达式!' }]}]"  @change="setCorn"></j-cron>-->
-          <j-cron ref="innerVueCron" v-decorator="['cronExpression', { initialValue: '* * * * * ? *' }]" @change="setCorn"></j-cron>
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="参数">
-          <a-textarea placeholder="请输入参数" :rows="5" v-decorator="['parameter', {}]" />
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="描述">
-          <a-textarea placeholder="请输入描述" :rows="3" v-decorator="['description', {}]" />
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="状态">
-          <j-dict-select-tag type="radioButton"  v-decorator="[ 'status', {'initialValue':0}]" :trigger-change="true" dictCode="quartz_status"/>
-        </a-form-item>
-      </a-form>
+        <a-form-model-item :labelCol="labelCol"  :wrapperCol="wrapperCol" label="任务类名" prop="jobClassName" hasFeedback >
+          <a-input placeholder="请输入任务类名" v-model="model.jobClassName" />
+        </a-form-model-item>
+        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="Cron表达式" prop="cronExpression">
+          <!-- <j-cron v-model="model.cronExpression"/>-->
+          <j-easy-cron v-model="model.cronExpression" />
+        </a-form-model-item>
+        <a-form-model-item  :labelCol="labelCol" :wrapperCol="wrapperCol" label="参数" prop="parameter" >
+          <a-textarea placeholder="请输入参数" :rows="5" v-model="model.parameter" />
+        </a-form-model-item>
+        <a-form-model-item :labelCol="labelCol"  :wrapperCol="wrapperCol" label="描述" prop="description">
+          <a-textarea placeholder="请输入描述" :rows="3" v-model="model.description" />
+        </a-form-model-item>
+        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol"  label="状态" prop="status">
+          <j-dict-select-tag type="radioButton" v-model="model.status" dictCode="quartz_status"/>
+        </a-form-model-item>
+      </a-form-model>
     </a-spin>
   </a-modal>
 </template>
 
 <script>
   import { httpAction } from '@/api/manage'
-  import JCron from "@/components/jero/JCron";
-  import pick from 'lodash.pick'
-  // import moment from "moment"
+  import cronValidator from "@/components/jeecg/JEasyCron/validator";
 
   export default {
     name: "QuartzJobModal",
     components: {
-      JCron
+
     },
     data () {
       return {
@@ -86,11 +63,11 @@
         confirmLoading: false,
         form: this.$form.createForm(this),
         validatorRules: {
-          cron: {
-            rules: [{
-              required: true, message: '请输入cron表达式!'
-            }]
-          }
+          cronExpression: [
+            {required: true, message: '请输入cron表达式!'},
+            {validator: cronValidator,}
+          ],
+          jobClassName: [{required: true, message: '请输入任务类名!'}]
         },
         url: {
           add: "/sys/quartzJob/add",
@@ -101,19 +78,19 @@
     created () {
     },
     methods: {
-      add () {
-        this.edit({});
+      add() {
+        // 统一设置默认值
+        this.edit({
+          cronExpression: '* * * * * ? *',
+          status: 0,
+        })
       },
       edit (record) {
-        let that = this;
-        that.form.resetFields();
-        this.model = Object.assign({},record);
-        console.log(this.model)
         this.visible = true;
         this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model,'jobClassName','cronExpression','parameter','description','status'));
-        });
-
+          this.$refs.form.resetFields()
+          this.model = Object.assign({}, record)
+        })
       },
       close () {
         this.$emit('close');
@@ -122,14 +99,8 @@
       handleOk () {
         const that = this;
         // 触发表单验证
-        this.form.validateFields((err, values) => {
-          console.log('values',values)
-          if (!err) {
-            if (typeof values.cronExpression == "undefined" || Object.keys(values.cronExpression).length==0 ) {
-              this.$message.warning('请输入cron表达式!');
-              return false;
-            }
-
+        this.$refs.form.validate((ok, err) => {
+          if (ok) {
             that.confirmLoading = true;
             let httpurl = '';
             let method = '';
@@ -140,20 +111,18 @@
               httpurl+=this.url.edit;
               method = 'put';
             }
-            let formData = Object.assign(this.model, values);
-            //时间格式化
 
-            console.log('提交参数',formData)
-            httpAction(httpurl,formData,method).then((res)=>{
+            console.log('提交参数',this.model)
+            httpAction(httpurl,this.model,method).then((res)=>{
               if(res.success){
                 that.$message.success(res.message);
                 that.$emit('ok');
+                that.close();
               }else{
                 that.$message.warning(res.message);
               }
             }).finally(() => {
               that.confirmLoading = false;
-              that.close();
             })
 
           }
@@ -162,25 +131,6 @@
       handleCancel () {
         this.close()
       },
-      setCorn(data){
-        console.log('data)',data);
-        this.$nextTick(() => {
-          this.model.cronExpression = data;
-        })
-
-        // console.log(Object.keys(data).length==0);
-        if (Object.keys(data).length==0) {
-          this.$message.warning('请输入cron表达式!');
-        }
-      },
-      validateCron(rule, value, callback){
-        if(!value){
-          callback()
-        }else if (Object.keys(value).length==0) {
-          callback("请输入cron表达式!");
-        }
-      },
-
     }
   }
 </script>

jero-web/src/views/system/modules/SysCheckRuleModal.vue

@@ -9,41 +9,24 @@
     cancelText="关闭">
 
     <a-spin :spinning="confirmLoading">
-      <a-form :form="form">
+      <a-form-model ref="form" :model="model" :rules="validatorRules">
 
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="规则名称">
-          <a-input placeholder="请输入规则名称" v-decorator="['ruleName', validatorRules.ruleName]"/>
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="规则Code">
-          <a-input placeholder="请输入规则Code" v-decorator="['ruleCode', validatorRules.ruleCode]"/>
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="规则描述">
-          <a-textarea placeholder="请输入规则描述" v-decorator="['ruleDescription', {}]"/>
-        </a-form-item>
+        <a-form-model-item :labelCol="labelCol"  :wrapperCol="wrapperCol" label="规则名称" prop="ruleName" >
+          <a-input placeholder="请输入规则名称" v-model="model.ruleName"/>
+        </a-form-model-item>
+        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规则Code" prop="ruleCode">
+          <a-input placeholder="请输入规则Code" v-model="model.ruleCode"/>
+        </a-form-model-item>
+        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规则描述" prop="ruleDescription">
+          <a-textarea placeholder="请输入规则描述" v-model="model.ruleDescription"/>
+        </a-form-model-item>
 
-      </a-form>
+      </a-form-model>
       <!-- 规则设计 -->
       <a-tabs v-model="tabs.activeKey">
         <a-tab-pane tab="局部规则" :key="tabs.design.key" forceRender>
           <a-alert type="info" showIcon message="局部规则按照你输入的位数有序的校验。"/>
-          <j-editable-table
-            ref="designTable"
-            dragSort
-            rowNumber
-            :maxHeight="240"
-            :columns="tabs.design.columns"
-            :dataSource="tabs.design.dataSource"
-            style="margin-top: 8px;"
-          >
+          <j-editable-table ref="designTable" dragSort rowNumber  :maxHeight="240" :columns="tabs.design.columns" :dataSource="tabs.design.dataSource" style="margin-top: 8px;">
 
             <template #action="props">
               <my-action-button :rowEvent="props"/>
@@ -51,16 +34,9 @@
 
           </j-editable-table>
         </a-tab-pane>
+
         <a-tab-pane tab="全局规则" :key="tabs.global.key" forceRender>
-          <j-editable-table
-            ref="globalTable"
-            dragSort
-            rowNumber
-            actionButton
-            :maxHeight="240"
-            :columns="tabs.global.columns"
-            :dataSource="tabs.global.dataSource"
-          >
+          <j-editable-table ref="globalTable" dragSort rowNumber actionButton :maxHeight="240" :columns="tabs.global.columns"  :dataSource="tabs.global.dataSource">
 
             <template #actionButtonAfter>
               <a-alert type="info" showIcon message="全局规则可校验用户输入的所有字符；全局规则的优先级比局部规则的要高。" style="margin-bottom: 8px;"/>
@@ -146,15 +122,12 @@
           sm: { span: 16 },
         },
         confirmLoading: false,
-        form: this.$form.createForm(this),
         validatorRules: {
-          ruleName: { rules: [{ required: true, message: '请输入规则名称!' },] },
-          ruleCode: {
-            rules: [
-              { required: true, message: '请输入规则Code!' },
-              { validator: (rule, value, callback) => validateDuplicateValue('sys_check_rule', 'rule_code', value, this.model.id, callback) }
-            ]
-          },
+          ruleName: [{required: true, message: '请输入规则名称!'}],
+          ruleCode: [
+            {required: true, message: '请输入规则Code!'},
+            {validator: (rule, value, callback) => validateDuplicateValue('sys_check_rule', 'rule_code', value, this.model.id, callback)}
+          ],
         },
         tabs: {
           activeKey: 'design',
@@ -272,14 +245,14 @@
         this.edit({})
       },
       edit(record) {
-        this.form.resetFields()
         this.tabs.activeKey = this.tabs.design.key
         this.tabs.global.dataSource = []
         this.tabs.design.dataSource = [{ digits: '', pattern: '', message: '' }]
-        this.model = Object.assign({}, record)
         this.visible = true
         this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model, 'ruleName', 'ruleCode', 'ruleDescription'))
+          this.$refs.form.resetFields()
+          this.model = Object.assign({}, record)
+
           // 子表数据
           let ruleJson = this.model.ruleJson
           if (ruleJson) {
@@ -307,7 +280,7 @@
         Promise.all([
           // 主表单校验
           alwaysResolve(new Promise((resolve, reject) => {
-            this.form.validateFields((error, values) => error ? reject(error) : resolve(values))
+            this.$refs.form.validate((ok, err) => ok ? resolve(this.model) : reject(err))
           })),
           // 局部规则子表校验
           alwaysResolve(this.$refs.designTable.getValuesPromise),

jero-web/src/views/system/modules/SysFillRuleModal.vue

@@ -10,40 +10,27 @@
     cancelText="关闭">
 
     <a-spin :spinning="confirmLoading">
-      <a-form :form="form">
+      <a-form-model ref="form" :model="model" :rules="validatorRules">
 
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="规则名称">
-          <a-input placeholder="请输入规则名称" v-decorator="['ruleName', validatorRules.ruleName]"/>
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="规则Code">
-          <a-input placeholder="请输入规则Code" :disabled="disabledCode" v-decorator="['ruleCode', validatorRules.ruleCode]"/>
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="规则实现类">
-          <a-input placeholder="请输入规则实现类" v-decorator="['ruleClass', validatorRules.ruleClass]"/>
-        </a-form-item>
-        <a-form-item
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-          label="规则参数">
-          <a-textarea placeholder="请输入规则参数" :rows="5" v-decorator="['ruleParams', validatorRules.ruleParams]"/>
-        </a-form-item>
+        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规则名称" prop="ruleName">
+          <a-input placeholder="请输入规则名称" v-model="model.ruleName"/>
+        </a-form-model-item>
+        <a-form-model-item :labelCol="labelCol"  :wrapperCol="wrapperCol" label="规则Code"  prop="ruleCode" >
+          <a-input placeholder="请输入规则Code" :disabled="disabledCode" v-model="model.ruleCode"/>
+        </a-form-model-item>
+        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规则实现类" prop="ruleClass" >
+          <a-input placeholder="请输入规则实现类" v-model="model.ruleClass"/>
+        </a-form-model-item>
+        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="规则参数" prop="ruleParams">
+          <a-textarea placeholder="请输入规则参数" :rows="5" v-model="model.ruleParams"/>
+        </a-form-model-item>
 
-      </a-form>
+      </a-form-model>
     </a-spin>
   </a-modal>
 </template>
 
 <script>
-  import pick from 'lodash.pick'
   import { httpAction } from '@/api/manage'
   import { validateDuplicateValue } from '@/utils/util'
 
@@ -59,35 +46,30 @@
         wrapperCol: { xs: { span: 24 }, sm: { span: 16 } },
 
         confirmLoading: false,
-        form: this.$form.createForm(this),
         validatorRules: {
-          ruleName: { rules: [{ required: true, message: '规则名称不能为空' }] },
-          ruleCode: {
-            rules: [
-              { required: true, message: '规则Code不能为空' },
-              { validator: (rule, value, callback) => validateDuplicateValue('sys_fill_rule', 'rule_code', value, this.model.id, callback) }
-            ]
-          },
-          ruleClass: { rules: [{ required: true, message: '规则实现类不能为空' }] },
-          ruleParams: {
-            rules: [{
-              validator: (rule, value, callback) => {
+          ruleName: [{ required: true, message: '规则名称不能为空' }],
+          ruleCode: [
+            { required: true, message: '规则Code不能为空' },
+            { validator: (rule, value, callback) => validateDuplicateValue('sys_fill_rule', 'rule_code', value, this.model.id, callback) }
+          ],
+          ruleClass: [{ required: true, message: '规则实现类不能为空' }],
+          ruleParams: [{
+            validator: (rule, value, callback) => {
 
-                try {
-                  let json = JSON.parse(value)
-                  if (json instanceof Array) {
-                    callback('只能传递JSON对象，不能传递JSON数组')
-                  } else if (json instanceof Object) {
-                    callback()
-                  } else {
-                    callback('请输入JSON字符串')
-                  }
-                } catch {
+              try {
+                let json = JSON.parse(value)
+                if (json instanceof Array) {
+                  callback('只能传递JSON对象，不能传递JSON数组')
+                } else if (json instanceof Object) {
+                  callback()
+                } else {
                   callback('请输入JSON字符串')
                 }
+              } catch {
+                callback('请输入JSON字符串')
               }
-            }]
-          },
+            }
+          }],
         },
         url: {
           add: '/sys/fillRule/add',
@@ -107,11 +89,10 @@
         this.edit({})
       },
       edit(record) {
-        this.form.resetFields()
-        this.model = Object.assign({}, record)
         this.visible = true
         this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model, 'ruleName', 'ruleCode', 'ruleClass', 'ruleParams'))
+          this.$refs.form.resetFields()
+          this.model = Object.assign({}, record)
         })
       },
       close() {
@@ -121,8 +102,8 @@
       handleOk() {
         const that = this
         // 触发表单验证
-        this.form.validateFields((err, values) => {
-          if (!err) {
+        this.$refs.form.validate((ok, err) => {
+          if (ok) {
             that.confirmLoading = true
             let httpUrl = this.url.add, method = 'post'
             if (this.model.id) {
@@ -130,17 +111,16 @@
               method = 'put'
             }
 
-            let formData = Object.assign(this.model, values)
-            httpAction(httpUrl, formData, method).then((res) => {
+            httpAction(httpUrl, this.model, method).then((res) => {
               if (res.success) {
                 that.$message.success(res.message)
                 that.$emit('ok')
+                that.close()
               } else {
                 that.$message.warning(res.message)
               }
             }).finally(() => {
               that.confirmLoading = false
-              that.close()
             })
           }
         })