YFrom的实战和增删改查方法

YTable的简单用法，在无分页排序时使用

   <YTable :columns="columns" :data="dialogList" border></YTable>
    
    created () {
        this.getList()
    },
    methods: {
        async getList () {
        const res = await api32081({})
        this.dialogList = res.data ? res.data : []
        },
    }

YQueryTable的简单用法 YQueryTable的serve不需要在create()调用

    <YQueryTable :columns="columns" :serve="serve" border >
    
    computed: {
        columns () {
            return [
                { type: 'y-index', align: 'center', width: '80px' },        添加列表序号
                { label: '账号', prop: 'loginName' },
                { label: '员工姓名', prop: 'bindUserName' },
                { label: '手机号码', prop: 'phone' },
                { label: '状态',
                  align: 'center',                                          表格默认为 align: 'left'
                  prop: 'status',
                  render: ({ row }) => {
                    return <el-tag type={row.status === true ? '' : 'info'}>{ row.status === true ? '启用' : '禁用'}</el-tag>
                  } },
                { label: '添加时间', align: 'center', prop: 'gmtCreate' },
                { label: '操作',
                  align: 'center',
                  render: ({ row }) => {
                    return (
                      <div>
                        <el-button type="text" onClick={() => this.editUser(row) }>编辑</el-button>
                        <el-button type="text" class="color-danger" onClick={() => this.deleteUser(row) }>删除</el-button>
                      </div>
                    )
                 } }
            ]
        }
    },
    
    获取数据的方法！
    
    async serve ({ params, formValues }) {
    const res = await api31640({
      // ...formData   看后台要求传递的数据进行填写
      pageIndex: params.currentPage,
      pageSize: params.pageSize
    })
    return {
      total: res.data.total,
      data: res.data.results
       }
    },

YForm和YField的简单用法

    <YForm ref="userForm" v-model="formData" label-width="100px">
        <YField name="bindUserId" label="选择员工" type="staff" :component="chooseSelect" :dataSource="sensitiveMonitorList" :componentStyle="{width:'360px'}"></YField>
        <YButton ref="serachButton" do='search' style="display:none"></YButton>
    </YForm>     
    
    formData值需要在data内声明
    
    componentStyle  输入框的长度
    dataSource      控制下拉菜单的数据
    name            绑定的数据名
    component       组件类名

当把YFrom用在弹窗中时，可以使用 @submit="saveUser"

    <el-dialog  :visible.sync="showDialog">
        <YForm ref="userForm" v-model="formData" label-width="100px" @submit="saveUser">
            <div>
                <YButton type="default" @click="showDialog = false">取 消</YButton>
                <YButton do="submit">确 定</YButton>
            </div>
        </YForm>  
    </el-dialog>

//保存

    async saveUser (params) {
        const reqData = {
          ...this.formData
         }
        const res = await api32011(reqData)
         if (res.code === 1) {
            this.$refs.serachButton.onClick()           在第一个YFrom表单中，用来刷新页面
            this.showDialog = false
            return Promise.resolve()
        } else {
            return Promise.reject(new Error(res.msg))
        }
    },

// 增加或者编辑

title = "dialogIsAdd ? 新增 : 修改"        dialogIsAdd默认为True 

editUser (row) {
  if (row) {
    this.dialogIsAdd = false
    this.dialogForm = row
  } else {
    this.dialogForm = {}
    this.dialogIsAdd = true
  }
  this.showDialog = true
},

<el-button onClick={() => {this.editUser(row)}></el-button>             这是在render内的写法

// 删除

deleteUser (row) {
  this.$confirm(`确定删除账号【${row.loginName}】?`, '提醒', {      row.loginName为你这一行绑定的值
    type: 'warning'
  }).then(() => {
    api32018({ id: row.id })
      .then((res) => {
        this.$refs.serachButton.onClick()
        this.$message.success('删除成功')
      })
  }).catch(() => {})
},