fix: $dialog and table-list modal

src/api/manage.js

@@ -60,3 +60,11 @@ export function saveService (parameter) {
     data: parameter
   })
 }
+
+export function saveSub (sub) {
+  return request({
+    url: '/sub',
+    method: sub.id === 0 ? 'post' : 'put',
+    data: sub
+  })
+}

src/components/Table/index.js

@@ -85,6 +85,10 @@ export default {
           pageNo: val
         })
       })
+      // change pagination, reset total data
+      this.needTotalList = this.initTotalList(this.columns)
+      this.selectedRowKeys = []
+      this.selectedRows = []
     },
     pageNum (val) {
       Object.assign(this.localPagination, {
@@ -110,7 +114,6 @@ export default {
       pageSize: this.pageSize,
       showSizeChanger: this.showSizeChanger
     }) || false
-    console.log('this.localPagination', this.localPagination)
     this.needTotalList = this.initTotalList(this.columns)
     this.loadData()
   },
@@ -149,7 +152,6 @@ export default {
         ...filters
       }
       )
-      console.log('parameter', parameter)
       const result = this.data(parameter)
       // 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.totalCount, r.data
       // eslint-disable-next-line
@@ -178,7 +180,6 @@ export default {
           } catch (e) {
             this.localPagination = false
           }
-          console.log('loadData -> this.localPagination', this.localPagination)
           this.localDataSource = r.data // 返回结果中的数组数据
           this.localLoading = false
         })
@@ -280,7 +281,6 @@ export default {
       if (k === 'rowSelection') {
         if (showAlert && this.rowSelection) {
           // 如果需要使用alert，则重新绑定 rowSelection 事件
-          console.log('this.rowSelection', this.rowSelection)
           props[k] = {
             ...this.rowSelection,
             selectedRows: this.selectedRows,

src/core/lazy_use.js

@@ -50,6 +50,7 @@ import Viser from 'viser-vue'
 
 // ext library
 import VueCropper from 'vue-cropper'
+import Dialog from '@/components/Dialog'
 import MultiTab from '@/components/MultiTab'
 import PageLoading from '@/components/PageLoading'
 import PermissionHelper from '@/utils/helper/permission'
@@ -106,6 +107,7 @@ Vue.prototype.$error = Modal.error
 Vue.prototype.$warning = Modal.warning
 
 Vue.use(Viser)
+Vue.use(Dialog) // this.$dialog func
 Vue.use(MultiTab)
 Vue.use(PageLoading)
 Vue.use(PermissionHelper)

src/locales/index.js

@@ -17,6 +17,7 @@ const messages = {
 }
 
 const i18n = new VueI18n({
+  silentTranslationWarn: true,
   locale: defaultLang,
   fallbackLocale: defaultLang,
   messages

src/mock/services/auth.js

@@ -4,7 +4,7 @@ import { builder, getBody } from '../util'
 const username = ['admin', 'super']
 // 强硬要求 ant.design 相同密码
 // '21232f297a57a5a743894a0e4a801fc3',
-const password = ['8914de686ab28dc22f30d3d8e107ff6c'] // admin, ant.design
+const password = ['8914de686ab28dc22f30d3d8e107ff6c', '21232f297a57a5a743894a0e4a801fc3'] // admin, ant.design
 
 const login = (options) => {
   const body = getBody(options)

src/permission.js

@@ -25,6 +25,7 @@ router.beforeEach((to, from, next) => {
     } else {
       // check login user.roles is null
       if (store.getters.roles.length === 0) {
+        // request login userInfo
         store
           .dispatch('GetInfo')
           .then(res => {

src/views/list/BasicList.vue

@@ -29,7 +29,7 @@
       </div>
 
       <div class="operate">
-        <a-button type="dashed" style="width: 100%" icon="plus" @click="$refs.taskForm.add()">添加</a-button>
+        <a-button type="dashed" style="width: 100%" icon="plus" @click="add">添加</a-button>
       </div>
 
       <a-list size="large" :pagination="{showSizeChanger: true, showQuickJumper: true, pageSize: 5, total: 50}">
@@ -70,6 +70,7 @@
 </template>
 
 <script>
+// 演示如何使用 this.$dialog 封装 modal 组件
 import TaskForm from './modules/TaskForm'
 import Info from './components/Info'
 
@@ -139,15 +140,48 @@ export default {
     }
   },
   methods: {
+    add () {
+      this.$dialog(TaskForm,
+        // component props
+        {
+          record: {},
+          on: {
+            ok () {
+              console.log('ok 回调')
+            },
+            cancel () {
+              console.log('cancel 回调')
+            },
+            close () {
+              console.log('modal close 回调')
+            }
+          }
+        },
+        // modal props
+        {
+          title: '新增',
+          width: 700,
+          centered: true,
+          maskClosable: false
+        })
+    },
     edit (record) {
       console.log('record', record)
-      // mockdata
-      record.taskName = '测试'
-      // mockend
       this.$dialog(TaskForm,
         // component props
         {
-          record
+          record,
+          on: {
+            ok () {
+              console.log('ok 回调')
+            },
+            cancel () {
+              console.log('cancel 回调')
+            },
+            close () {
+              console.log('modal close 回调')
+            }
+          }
         },
         // modal props
         {

src/views/list/TableList.vue

@@ -51,7 +51,7 @@
             <a-col :md="!advanced && 8 || 24" :sm="24">
               <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                 <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
+                <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>
                 <a @click="toggleAdvanced" style="margin-left: 8px">
                   {{ advanced ? '收起' : '展开' }}
                   <a-icon :type="advanced ? 'up' : 'down'"/>
@@ -63,8 +63,7 @@
       </div>
 
       <div class="table-operator">
-        <a-button type="primary" icon="plus" @click="$refs.createModal.add()">新建</a-button>
-        <a-button type="dashed" @click="tableOption">{{ optionAlertShow && '关闭' || '开启' }} alert</a-button>
+        <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
         <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0">
           <a-menu slot="overlay">
             <a-menu-item key="1"><a-icon type="delete" />删除</a-menu-item>
@@ -83,8 +82,8 @@
         rowKey="key"
         :columns="columns"
         :data="loadData"
-        :alert="options.alert"
-        :rowSelection="options.rowSelection"
+        :alert="true"
+        :rowSelection="rowSelection"
         showPagination="auto"
       >
         <span slot="serial" slot-scope="text, record, index">
@@ -105,7 +104,15 @@
           </template>
         </span>
       </s-table>
-      <create-form ref="createModal" @ok="handleOk" />
+
+      <create-form
+        ref="createModal"
+        :visible="visible"
+        :loading="confirmLoading"
+        :model="mdl"
+        @cancel="handleCancel"
+        @ok="handleOk"
+      />
       <step-by-step-modal ref="modal" @ok="handleOk"/>
     </a-card>
   </page-header-wrapper>
@@ -114,9 +121,49 @@
 <script>
 import moment from 'moment'
 import { STable, Ellipsis } from '@/components'
+import { getRoleList, getServiceList } from '@/api/manage'
+
 import StepByStepModal from './modules/StepByStepModal'
 import CreateForm from './modules/CreateForm'
-import { getRoleList, getServiceList } from '@/api/manage'
+
+const columns = [
+  {
+    title: '#',
+    scopedSlots: { customRender: 'serial' }
+  },
+  {
+    title: '规则编号',
+    dataIndex: 'no'
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+    scopedSlots: { customRender: 'description' }
+  },
+  {
+    title: '服务调用次数',
+    dataIndex: 'callNo',
+    sorter: true,
+    needTotal: true,
+    customRender: (text) => text + ' 次'
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    scopedSlots: { customRender: 'status' }
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updatedAt',
+    sorter: true
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: '150px',
+    scopedSlots: { customRender: 'action' }
+  }
+]
 
 const statusMap = {
   0: {
@@ -146,71 +193,27 @@ export default {
     StepByStepModal
   },
   data () {
+    this.columns = columns
     return {
-      mdl: {},
+      // create model
+      visible: false,
+      confirmLoading: false,
+      mdl: null,
       // 高级搜索 展开/关闭
       advanced: false,
       // 查询参数
       queryParam: {},
-      // 表头
-      columns: [
-        {
-          title: '#',
-          scopedSlots: { customRender: 'serial' }
-        },
-        {
-          title: '规则编号',
-          dataIndex: 'no'
-        },
-        {
-          title: '描述',
-          dataIndex: 'description',
-          scopedSlots: { customRender: 'description' }
-        },
-        {
-          title: '服务调用次数',
-          dataIndex: 'callNo',
-          sorter: true,
-          needTotal: true,
-          customRender: (text) => text + ' 次'
-        },
-        {
-          title: '状态',
-          dataIndex: 'status',
-          scopedSlots: { customRender: 'status' }
-        },
-        {
-          title: '更新时间',
-          dataIndex: 'updatedAt',
-          sorter: true
-        },
-        {
-          title: '操作',
-          dataIndex: 'action',
-          width: '150px',
-          scopedSlots: { customRender: 'action' }
-        }
-      ],
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
-        console.log('loadData.parameter', parameter)
-        return getServiceList(Object.assign(parameter, this.queryParam))
+        const requestParameters = Object.assign({}, parameter, this.queryParam)
+        console.log('loadData request parameters:', requestParameters)
+        return getServiceList(requestParameters)
           .then(res => {
             return res.result
           })
       },
       selectedRowKeys: [],
-      selectedRows: [],
-
-      // custom table alert & rowSelection
-      options: {
-        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
-        rowSelection: {
-          selectedRowKeys: this.selectedRowKeys,
-          onChange: this.onSelectChange
-        }
-      },
-      optionAlertShow: false
+      selectedRows: []
     }
   },
   filters: {
@@ -222,38 +225,74 @@ export default {
     }
   },
   created () {
-    this.tableOption()
     getRoleList({ t: new Date() })
   },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectChange
+      }
+    }
+  },
   methods: {
-    tableOption () {
-      if (!this.optionAlertShow) {
-        this.options = {
-          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
-          rowSelection: {
-            selectedRowKeys: this.selectedRowKeys,
-            onChange: this.onSelectChange,
-            getCheckboxProps: record => ({
-              props: {
-                disabled: record.no === 'No 2', // Column configuration not to be checked
-                name: record.no
-              }
+    handleAdd () {
+      this.mdl = null
+      this.visible = true
+    },
+    handleEdit (record) {
+      this.visible = true
+      this.mdl = { ...record }
+    },
+    handleOk () {
+      const form = this.$refs.createModal.form
+      this.confirmLoading = true
+      form.validateFields((errors, values) => {
+        if (!errors) {
+          console.log('values', values)
+          if (values.id > 0) {
+            // 修改 e.g.
+            new Promise((resolve, reject) => {
+              setTimeout(() => {
+                resolve()
+              }, 1000)
+            }).then(res => {
+              this.visible = false
+              this.confirmLoading = false
+              // 重置表单数据
+              form.resetFields()
+              // 刷新表格
+              this.$refs.table.refresh()
+
+              this.$message.info('修改成功')
+            })
+          } else {
+            // 新增
+            new Promise((resolve, reject) => {
+              setTimeout(() => {
+                resolve()
+              }, 1000)
+            }).then(res => {
+              this.visible = false
+              this.confirmLoading = false
+              // 重置表单数据
+              form.resetFields()
+              // 刷新表格
+              this.$refs.table.refresh()
+
+              this.$message.info('新增成功')
             })
           }
+        } else {
+          this.confirmLoading = false
         }
-        this.optionAlertShow = true
-      } else {
-        this.options = {
-          alert: false,
-          rowSelection: null
-        }
-        this.optionAlertShow = false
-      }
+      })
     },
+    handleCancel () {
+      this.visible = false
 
-    handleEdit (record) {
-      console.log(record)
-      this.$refs.modal.edit(record)
+      const form = this.$refs.createModal.form
+      form.resetFields() // 清理表单数据（可不做）
     },
     handleSub (record) {
       if (record.status !== 0) {
@@ -262,9 +301,6 @@ export default {
         this.$message.error(`${record.no} 订阅失败，规则已关闭`)
       }
     },
-    handleOk () {
-      this.$refs.table.refresh()
-    },
     onSelectChange (selectedRowKeys, selectedRows) {
       this.selectedRowKeys = selectedRowKeys
       this.selectedRows = selectedRows

src/views/list/modules/CreateForm.vue

@@ -3,18 +3,18 @@
     title="新建规则"
     :width="640"
     :visible="visible"
-    :confirmLoading="confirmLoading"
-    @ok="handleSubmit"
-    @cancel="handleCancel"
+    :confirmLoading="loading"
+    @ok="() => { $emit('ok') }"
+    @cancel="() => { $emit('cancel') }"
   >
-    <a-spin :spinning="confirmLoading">
-      <a-form :form="form">
-        <a-form-item
-          label="描述"
-          :labelCol="labelCol"
-          :wrapperCol="wrapperCol"
-        >
-          <a-input v-decorator="['desc', {rules: [{required: true, min: 5, message: '请输入至少五个字符的规则描述！'}]}]" />
+    <a-spin :spinning="loading">
+      <a-form :form="form" v-bind="formLayout">
+        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
+        <a-form-item v-show="model && model.id > 0" label="主键ID">
+          <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
+        </a-form-item>
+        <a-form-item label="描述">
+          <a-input v-decorator="['description', {rules: [{required: true, min: 5, message: '请输入至少五个字符的规则描述！'}]}]" />
         </a-form-item>
       </a-form>
     </a-spin>
@@ -22,9 +22,28 @@
 </template>
 
 <script>
+import pick from 'lodash.pick'
+
+// 表单字段
+const fields = ['description', 'id']
+
 export default {
+  props: {
+    visible: {
+      type: Boolean,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: () => false
+    },
+    model: {
+      type: Object,
+      default: () => null
+    }
+  },
   data () {
-    return {
+    this.formLayout = {
       labelCol: {
         xs: { span: 24 },
         sm: { span: 7 }
@@ -32,36 +51,22 @@ export default {
       wrapperCol: {
         xs: { span: 24 },
         sm: { span: 13 }
-      },
-      visible: false,
-      confirmLoading: false,
-
+      }
+    }
+    return {
       form: this.$form.createForm(this)
     }
   },
-  methods: {
-    add () {
-      this.visible = true
-    },
-    handleSubmit () {
-      const { form: { validateFields } } = this
-      this.confirmLoading = true
-      validateFields((errors, values) => {
-        if (!errors) {
-          console.log('values', values)
-          setTimeout(() => {
-            this.visible = false
-            this.confirmLoading = false
-            this.$emit('ok', values)
-          }, 1500)
-        } else {
-          this.confirmLoading = false
-        }
-      })
-    },
-    handleCancel () {
-      this.visible = false
-    }
+  created () {
+    console.log('custom modal created')
+
+    // 防止表单未注册
+    fields.forEach(v => this.form.getFieldDecorator(v))
+
+    // 当 model 发生改变时，为表单设置值
+    this.$watch('model', () => {
+      this.model && this.form.setFieldsValue(pick(this.model, fields))
+    })
   }
 }
 </script>

src/views/list/modules/TaskForm.vue

@@ -5,14 +5,18 @@
       :labelCol="labelCol"
       :wrapperCol="wrapperCol"
     >
-      <a-input v-decorator="['taskName', {rules:[{required: true, message: '请输入任务名称'}]}]" />
+      <a-input v-decorator="['title', {rules:[{required: true, message: '请输入任务名称'}]}]" />
     </a-form-item>
     <a-form-item
       label="开始时间"
       :labelCol="labelCol"
       :wrapperCol="wrapperCol"
     >
-      <a-date-picker style="width: 100%" v-decorator="['startTime', {rules:[{required: true, message: '请选择开始时间'}]}]" />
+      <a-date-picker
+        style="width: 100%"
+        valueFormat="YYYY-MM-DD HH:mm"
+        v-decorator="['startAt', {rules:[{required: true, message: '请选择开始时间'}]}]"
+      />
     </a-form-item>
     <a-form-item
       label="任务负责人"
@@ -29,7 +33,7 @@
       :labelCol="labelCol"
       :wrapperCol="wrapperCol"
     >
-      <a-textarea v-decorator="['desc']"></a-textarea>
+      <a-textarea v-decorator="['description']"></a-textarea>
     </a-form-item>
   </a-form>
 </template>
@@ -37,6 +41,8 @@
 <script>
 import pick from 'lodash.pick'
 
+const fields = ['title', 'startAt', 'owner', 'description']
+
 export default {
   name: 'TaskForm',
   props: {
@@ -59,18 +65,17 @@ export default {
     }
   },
   mounted () {
-    console.log('this.', this.record)
-    if (this.record) {
-      this.form.setFieldsValue(pick(this.record, ['taskName']))
-    }
+    this.record && this.form.setFieldsValue(pick(this.record, fields))
   },
   methods: {
     onOk () {
+      console.log('监听了 modal ok 事件')
       return new Promise(resolve => {
         resolve(true)
       })
     },
     onCancel () {
+      console.log('监听了 modal cancel 事件')
       return new Promise(resolve => {
         resolve(true)
       })