kc-table-form v0.0.4

TOC

同类型产品

优势对比

对比对象

小科爱牧5.0 （爱佳-供应商管理）

种猪测定站 （系统管理-测定中心管理）

页面模板代码量对比

小科爱牧5.0：357行

种猪测定站 ：7行

业务逻辑代码量对比

小科爱牧5.0：725行

种猪测定站 ：150行

对比总结

KcTable使用文档

功能介绍&案例演示

可选类型

复杂搭配

<!--模板配置-->
<kc-table-dialog ref="measureDialog" :form='data.form' :field-list="data.formFields" width="700px" :submit="submit">
<template #header="{formData}">
  <div class="mb20 flex align-items-center justify-content-between">
    <span>商品代集中测定可测定的性状为：生长性状、胴体性状！</span>
    <el-button :disabled="!formData.linkMeasureId" class="pointer" @click="measureCalendar(formData.linkMeasureId)" type="primary" link>测定中心日程查看</el-button>
  </div>
</template>
<template #footer>
  <span>已选样本：{{ selectedList.length }}只</span>
  <span class="ml20">公猪{{ selectedMaleList }}只</span>
  <span class="ml20">母猪{{ selectedFemaleList }}只</span>
  <kc-table class="w-100" style="height: 50vh;" selection :index="false" ref="pigSelectListTable"
            :columns="data.pigSelectListColumns" :api="data.pigSelectListApi" :api-filters="data.pigSelectListApiFilters" :pagerCount="5"/>
</template>
</kc-table-dialog>

<script>
const data = reactive({
  ...,
  // Form字段配置
  formFields: [
    {
      label: '拟测日期', prop: 'planDate', span: 12, form: {
        component: {name: 'el-date-picker', valueFormat: 'YYYY-MM-DD',},
        formItem: {rules: [{required: true, trigger: ['blur', 'change'], message: '请选择拟测日期'},]}
      }
    },
  ],
  // 表格字段配置
  pigSelectListApi: listAnimals,
  pigSelectListApiFilters: {orgId: useUserStore().orgInfo.orgId, groupType: 2},//集中测定只测定示范场商品代
  pigSelectListColumns: [
    {label: '猪只编号', prop: 'pigCode', width: '170px', align: 'center'},
    {
      label: '性别', prop: 'gender', width: 'auto', align: 'center',
      formatter: (row) => row.gender === GENDER_MALE ? '公猪' : '母猪'
    },
    {label: '猪场', prop: 'linkFarmName', width: 'auto', align: 'center'},
    {label: '品种', prop: 'linkSeriesName', width: 'auto', align: 'center'},
    {label: '初生日期', prop: 'birthDate', width: 'auto', align: 'center'},
  ],
  ...
})

//打开弹框
const handleMeasure = (row) => {
  data.form = {planDate: row?.planDate,id:row?.id, entrustCode: row?.entrustCode, comLicence: useUserStore().orgInfo.comLicence}
  measureDialog.value.open(row ? 'edit' : 'add', '示范场商品代委托测定')
}

// 提交逻辑
const submit = (type, formRef, formData) => {
    // 先提交委托，再提交200头猪
    proxy.simpleCall(formData, type === 'add' ? addTask : editTask, loading, table, proxy, (res) => {
      formData.entrustCode = formData.entrustCode || res?.data
      formData.pigList = selectedList.value.map(item => ({id: item.id, pigCode: item.pigCode}))
      proxy.simpleCall(formData, sendEntrust, loading, table, proxy)
    })
  }
</script>

配置&使用

模板配置

<kc-table style="height: 100%" ref="table"
<!--新增按钮权限-->
permissions="system:breedingfarm:add"
<!--table的列-->
:columns="tableColumns"
<!--table操作列-->
:handle="tableHandle"
<!--table数据列表的筛选条件-->
:filters="tableFilters"

<!--获取table数据列表的api接口-->
:api="getDataListReq"
<!--api接口请求默认携带的参数-->
:api-filters="{orgId:1}"
<!--将要渲染的数据，配置data时api将失效-->
:data="[]"

<!--返回按钮，返回上一级页面-->
back-btn
<!--分页按钮数量-->
:pager-count="5"
<!--表格是否为索引类型，默认为true。-->
index
<!--表格是否为可选类型，默认为false。配置selection时index将失效-->
selection
<!--表格数据是否分页，默认为false-->
noPage
<!--单元格合并方法，接收一个Function-->
spanMethod
>
    
    <!--筛选区域的插槽，data为表格原始数据-->
    <template #filter="{data}"></template>
    <!--添加按钮区域插槽-->
    <template #action></template>
    <!--表格顶部区域插槽-->
    <template #header></template>


</kc-table>

配置参数

插槽

具体配置

api && api-filters

const data = reactive({
    ...,
    //   列表请求接口
    api: listOrg,
    //   列表请求接口固定拼接的参数 相当于listOrg({farmType: FARM_TYPE_BREEDING}).then(res=>{...})
    apiFilters: {farmType: FARM_TYPE_BREEDING},
    ...
})

export function listOrg(query) {
    // axios对象实例
    return request({
        url: '/system/org/pageInfo',
        method: 'get',
        params: query
    })
}

columns

注意：el-table的原生属性也可以写在columns里面，如：fixed、show-overflow-tooltip等

const data = reactive({
    ...,
    //   表格显示的列
    tableColumns: [
        // 普通数据渲染
        {label: '功能ID', prop: 'id', width: 'auto', align: 'center'},
        {label: '功能名称', prop: 'title', width: '100px', align: 'center'},
        // 行内编辑模式
        {label: '功能名称', prop: 'title', width: '100px', align: 'center', editor: {is: 'el-input'}},
        // 多层级prop数据渲染
        {label: '操作员年龄', prop: 'user.age', width: 'auto', align: 'center'},
        {label: '操作员性别', prop: 'user.gender', width: 'auto', align: 'center'},
        // el-table的原生属性使用
        {label: '备注', prop: 'reamark', width: 'auto', align: 'center', showOverflowTooltip: true},
        // 数据格式化（只改变内容）
        {
            label: '测试类型', prop: 'test', width: 'auto', align: 'center',
            formatter: (row) => COM_TYPE.find(item => item.value == row.comType).label
        },
        {
            label: '测试时间', prop: 'createTime', width: 'auto', align: 'center',
            formatter: (row) => proxy.parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}')
        },
        // 点击事件处理
        {
            label: '测试历史数据1', prop: 'breedSeriesCount', width: 'auto', align: 'center',
            click: (row) => router.push({name: 'BreedSeries', query: {breedId: row.id}})
        },
        // 数据格式化 +点击事件处理
        {
            label: '测试历史数据2', prop: 'pigCount', width: 'auto', align: 'center',
            click: (row) => router.push({name: 'PigDemo', query: {breedId: row.id}}),
            formatter: (row) => row.pigCount > 0 ? row.pigCount : undefined
        },
        // 个性化组件渲染
        {
            label: '操作类型', prop: 'businessTypes', width: 'auto', align: 'center',
            render: (h, {row}) => h(ElTag, {innerText: row.businessTypes, type: 'success'})
        },
        // 个性化组件渲染，复杂情况处理。涉及数据交互
        {
            label: '状态', prop: 'status', width: 'auto', align: 'center',
            render: (h, {row}) => {
                return h(ElSwitch, {
                    modelValue: Number(row.status), activeValue: STATUS_NORMAL, inactiveValue: STATUS_ABNORMAL,
                    'onUpdate:modelValue': value => {
                        row.status = value;
                        // 处理状态改变逻辑
                        handleStatusChange(row);
                    },
                })
            }
        },
    ],
    ...
})

handle

const data = reactive({
    ...,
    //   操作区域
    tableHandle: [
        {
            label: row => row.checkState === '2' ? '查看' : '编辑',
            permissions: 'system:breedingfarm:edit',
            disabled: (row) => row.batchStatus == 1,
            attrs: {link: true, plain: true, type: 'primary', size: 'small', icon: 'Edit'},
            method: row => editItem(row)
        },
        {
            permissions: 'system:breedingfarm:remove',
            visible: (row) => row.batchStatus == 1,
            attrs: {link: true, plain: true, type: 'danger', size: 'small', icon: 'Delete'},
            isPop: true,
            method: row => deleteItem(row)
        }
    ],
    ...
})

filters

const data = reactive({
    ...,
    tableFilters: [
        {
            is: 'el-input',
            prop: 'nickName',
            title: '操作人员',
            attrs: {placeholder: '请输入操作人员', style: 'width: 200px;', class: 'mr10', clearable: true}
        },
        {
            is: 'el-select', prop: 'status', defaultFirst: true, title: '状态',
            attrs: {placeholder: '请选择状态', style: {width: '90px'}, class: 'mr10'},
            dict: wrapDefaultAll(STATUS)
        },
        {
            is: 'el-date-picker',
            prop: 'default',//default
            params: true,
            title: '日期范围',
            // value: [proxy.parseTime(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30), '{y}-{m}-{d}'), proxy.parseTime(new Date(), '{y}-{m}-{d}')],
            attrs: {
                startPlaceholder: '开始日期',
                valueFormat: 'YYYY-MM-DD',
                endPlaceholder: '结束日期',
                type: 'daterange',
                rangeSeparator: '-',
                style: {width: '250px'},
                class: 'mr10 w-100',
            },
        },
        // 复杂筛选组件
        {
            is: 'el-date-picker',
            //  请求时候会自动拼接begin和end，如：beginCreateTime、endCreateTime，注意开头字母大小写
            //  如果prop为default，会为：beginTime、endTime
            //  切记，default只可以设置一个,否则会多个组件使用同一个响应数据
            prop: 'CreateTime',//default
            //  是否要放到params里面  如：params[beginTime]、params[endTime]
            params: true,
            title: '日期范围',
            // 默认值
            value: [proxy.parseTime(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30), '{y}-{m}-{d}'), proxy.parseTime(new Date(), '{y}-{m}-{d}')],
            //   快速选取时间区域
            shortcuts: [
                {
                    text: '昨天',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24)
                        return [start, end]
                    },
                },

                {
                    text: '上周',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        return [start, end]
                    },
                },
                {
                    text: '本周',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime())
                        return [start, end]
                    },
                },
                {
                    text: '上月',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        return [start, end]
                    },
                },
                {
                    text: '本月',
                    value: () => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        start.setDate(1)
                        return [start, end]
                    },
                },
            ],

            attrs: {
                'start-placeholder': '开始日期',
                'value-format': 'YYYY-MM-DD',
                'end-placeholder': '结束日期',
                type: 'daterange',
                'range-separator': '-',
                style: {width: '250px'},
                class: 'mr10 w-100',
            },
        },
    ],
    ...
})

selection

// 使用 selectedList获取当前选中内容
tableRef.value.selectedList

KCTableDialog使用示例

配置&使用

模板配置

<kc-table-dialog ref="dialog"
<!--dialog的宽度-->
width='400px'
<!--dialog的高度，不包括 slot #footer-->
height='400px'
<!--编辑的时候需要传入Form的数据，可用做默认值-->
:form='form'
<!--Form字段列表-->
:field-list="formFields"
<!--el-upload的header-->
:headers="headers"
<!--el-upload的action-->
:action="action"
<!--点击确定按钮，通过表单验证的回调 submit(form, type, fileList)-->
@submit="submit"
<!--点击按钮回调，会覆盖@submit-->
:submit="submit"
>
    
    <!--form上方区域，formData为当前form内数据-->
    <template #header="{formData}"></template>
    <template #footer></template>
    <!--form下方区域-->

</kc-table-dialog>

配置参数

插槽

具体配置

field-list

const data = reactive({
    ...,
    formFields: [
        // 分割符的使用
        {label: '示范场商品代', span: 24, style: {color: '#1A66FF', fontWeight: '600'}, form: {component: {name: 'div'},}},
        // el-date-picker使用
        {
            label: '结测日期', prop: 'endDate', span: 12, form: {
                component: {name: 'el-date-picker', valueFormat: 'YYYY-MM-DD',},
                formItem: {rules: [{required: true, trigger: ['blur', 'change'], message: '请选择结测日期'},]}
            }
        },
        // el-input使用
        {
            label: '结测体重', prop: 'endWeight', span: 12, form: {
                component: {name: 'el-input',},
                formItem: {rules: [{required: true, message: '请输入结测体重', trigger: ['blur', 'change']},]}
            }
        },
        // visible使用
        {
            label: '进场胎次', prop: 'inParity', span: 12, visible: (formData) => formData.gender === GENDER_FEMALE,
            form: {
                component: {name: 'el-input',},
                formItem: {
                    rules: [
                        {required: true, trigger: ['blur', 'change'], message: '请输入进场胎次'},
                        {pattern: /^^[0-9]+(\.[0-9]+)?$/, message: '请输入正确的进场胎次', trigger: ['blur', 'change']}
                    ]
                }
            }
        },
        // editHide使用
        {
            label: '账号', prop: 'userName', width: 80, editHide: true, form: {
                component: {name: 'el-input',}, formItem: {rules: [{required: true, message: '请输入登录账号', trigger: ['blur', 'change']},]}
            }
        },
        // change使用
        {
            label: '负责人', prop: 'linkLeaderId', span: 12, style: {width: 'calc(100% - 30px)'}, form: {
                component: {name: 'el-select'},
                change: (value) => {
                    const phone = userOptions.value.find(item => item.value === value)?.phone
                    if (phone) {
                        // 通过dialog.value.updateForm更新表单数据
                        dialog.value.updateForm({leaderPhone: phone})
                    }
                },
                formItem: {dict: userOptions, rules: [{required: true, message: '请选则负责人', trigger: ['blur', 'change']},]}
            }
        },
    ],
    ...,
})

内部方法

内部变量