page-form v1.0.6

使用方法：

示例：

<!--
 * @Description: In User Settings Edit
 * @Author:
 your name
 * @Date: 2019-09-23 18:18:22
 * @LastEditTime: 2020-03-08 14:11:39
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div>
    <CommonPageForm
      ref="CommonPageForm"
      :title="formData.id ? '编辑资源' : '新增资源'"
      :visible="true"
      :form-list="formList"
      :form-data="formData"
      :rules="rules"
      :labelWidth="labelWidth"
    >
      <template v-slot:addonAfter="scope">
        <span class="pointer" @click="handleSelectMenu(scope)">选择</span>
      </template>
    </CommonPageForm>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
  components: {},
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {
        resourceGroupId: [{ required: true, message: '请选择导入分组' }],
        resourceName: [{ required: true, message: '请填写资源名称' }]
        // reqType: [{ required: true, message: '请选择请求方式' }]
      },
      labelWidth: '100px'
    }
  },
  computed: {
    ...mapState('index', [
      'curResourceType',
      'curApp',
      'resurceGroups',
      'curResourceType',
      'formLength',
      'reqTypes'
    ]),
    formList() {
      return [
        {
          label: '菜单名称',
          dom: 'input',
          prop: 'menuName',
          placeholder: '请选择菜单名称',
          labelBind: {
            width: '200px'
          },
          bind: {
            disabled: true,
          },
          span: 24,
          slots: ['addonAfter']
        },
        {
          label: '选择导入分组',
          dom: 'select',
          prop: 'resourceGroupId',
          placeholder: '请选择导入分组',
          list: this.resurceGroups,
          bind: {
            labelInValue: true,
            emptySelect: true
          },
          listeners: {
            change: value => {
              // this.handleResourceTypeChange(value)
            }
          },
          span: 24
        },
        {
          label: '资源名称',
          dom: 'input',
          prop: 'resourceName',
          placeholder: '请填写资源名称',
          bind: {
            disabled: false,
            maxLength: this.formLength.resource.name
          },
          span: 24
        },
        {
          label: '资源编码',
          dom: 'input',
          prop: 'resourceCode',
          placeholder: '请填写资源编码',
          bind: {
            maxLength: this.formLength.resource.code
          },
          span: 24
        },
        {
          label: '资源路径',
          dom: 'textarea',
          prop: 'resourceUrl',
          placeholder: '资源路径',
          span: 24,
          bind: {
            maxLength: this.formLength.resource.url
          }
        },
        {
          label: '请求方式',
          dom: 'select',
          prop: 'reqType',
          placeholder: '请选择请求方式',
          list: this.reqTypes,
          bind: {
            labelInValue: true,
            emptySelect: false
          },
          listeners: {
            change: value => {
              // this.handleResourceTypeChange(value)
            }
          },
          span: 24
        },
        {
          label: '物流付款方式',
          dom: 'select',
          prop: 'wlPayMethod',
          placeholder: '请选择物流付款方式',
          render: (h, params) => {
            const label =
              (
                payMethods.find(
                  item => item.value === this.sFormData.wlPayMethod
                ) || {}
              ).label || ''
            return h('span', {
              domProps: {
                innerHTML: label
              }
            })
          },
        {
          label: '物流付款方式2',
          dom: 'select',
          prop: 'wlPayMethod2',
          render: (h, params) => {
            const { row, index } = params
            const btnArr = []
            return h(
              'a-row',
              {
                attrs: {
                  'data-json': JSON.stringify(row),
                  'data-index': index,
                  gutter: 20
                },
                on: {}
              },
              [
                h(
                  'a-col',
                  {
                    attrs: {
                      span: 24
                    },
                    domProps: {}
                  },
                  [
                    h(
                      'a-checkbox',
                      {
                        attrs: {
                          indeterminate: that.indeterminate,
                          checked: that.checkAll
                        },
                        on: {
                          click: that.onCheckAllChange
                        }
                      },
                      [
                        h('span', {
                          attrs: {},
                          domProps: {
                            innerHTML: '全选'
                          }
                        })
                      ]
                    )
                  ]
                ),
                h(
                  'a-col',
                  {
                    attrs: {
                      span: 24
                    }
                  },
                  [
                    h('a-checkbox-group', {
                      attrs: {
                        options: that.plainOptions
                      },
                      props: {
                        value: that.checkedList
                      },
                      on: {
                        change: that.onChange
                      }
                    })
                  ]
                ),
                ...btnArr
              ]
            )
          }
        }
        },
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    ...mapActions('index', ['addResourceList', 'getResourceGroups']),
    getData() {
      this.getResourceGroups({
        query: this.otoHump(
          {
            page: 1,
            size: 990000,
            appCode: this.curApp.appCode,
            resourceType: this.curResourceType
          },
          false
        )
      }).then(res => {
        if (res[this.errcodeName] === 0 && res.total > 990000) {
          this.getResourceGroups({
            query: this.otoHump(
              {
                page: 1,
                size: res.total,
                appCode: this.curApp.appCode
              },
              false
            )
          })
        }
      })
    },
    handleOk(values) {
      this.$refs.CommonPageForm &&
        this.$refs.CommonPageForm.handleOk((err, values) => {
          if (!err) {
            if (this.formData.id) {
              this.$emit('ok', {
                id: this.formData.id,
                ...values,
                reqType: values.reqType && values.reqType.key
              })
            } else {
              this.$emit('ok', {
                ...values,
                reqType: values.reqType && values.reqType.key
              })
            }
          }
        })
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>