hitch-sb-antd/src/views/custom/form/modules/CustomFormSelectModal.vue

<template>
    <a-modal
            :title="modalTitle"
            :width="1000"
            :visible="visible"
            :confirmLoading="confirmLoading"
            class="ant-modal2"
            @cancel="handleCancel"
    >
        <a-card :bordered="false">
            <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="48">
                        <a-col :md="6" :sm="24">
                            <a-form-item label="关键字">
                                <a-input v-model="queryParam.keyword" placeholder="请输入名称/类型名称"/>
                            </a-form-item>
                        </a-col>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <a-col :md="6 || 24" :sm="24">
                            <span class="table-page-search-submitButtons">
                                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                                <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
                                <a @click="()=>{ this.advanced = !this.advanced}" style="margin-left: 8px">
                                  {{ advanced ? '收起' : '展开' }}
                                  <a-icon :type="advanced ? 'up' : 'down'"/>
                                </a>
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>

            <div class="table-operator">
            </div>

            <s-table
                    ref="table"
                    size="default"
                    rowKey="id"
                    :columns="columns"
                    :data="loadData"
                    :alert="options.alert"
                    :customRow="options.customRow"
                    :rowSelection="options.rowSelection"
                    showPagination="auto"
            >
                <span slot="action" slot-scope="record1">
                  <template>
                    <a @click="handleView(record1)">查看</a>
                  </template>
                </span>
            </s-table>
            <detail ref="detailModal"/>
        </a-card>
        <template slot="footer">
            <a-button :loading="confirmLoading" type="primary" @click="handleCancel()">取消</a-button>
            <a-button :loading="confirmLoading" type="primary" @click="handleSelect()">确定</a-button>
        </template>
    </a-modal>
</template>

<script>
    import { STable, Ellipsis } from '@/components'
    import Detail from './Detail'
    import { getCustomFormPage, fetchCustomForm } from '@/api/custom/form'

    export default {
        name: 'CustomFormSelectModal',
        components: {
            STable,
            Ellipsis,
            Detail
        },
        props: {
            type: {
                type: String,
                default: 'radio'
            },
            selectedRowKey: {
                type: Array,
                default: () => {
                    return []
                }
            },
            selectedRow: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data () {
            return {
                advanced: false,
                confirmLoading: false,
                mdl: {},
                modalTitle: null,
                visible: false,
                record: null,
                // 查询参数
                queryParam: {
                },
                extraQueryParam: {
                },
                // 表头
                columns: [
                    {
                        title: '序号',
                        dataIndex: 'index',
                        customRender: (text, record, index) => {
                            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
                        }
                    },
                                                                                                                                                    {
                                    title: '报废单  调拨单。。。',
                                    dataIndex: 'type',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                        {
                                title: '表单json',
                                dataIndex: 'jsonString'
                            },
                                                                                                                                                        {
                                title: '流程ID',
                                dataIndex: 'flowId'
                            },
                                                                                                                                                        {
                                title: '备注',
                                dataIndex: 'remark'
                            },
                                                                                                                                                                                                    {
                                title: '创建人',
                                dataIndex: 'createdUserName'
                            },
                                                                                                                                                        {
                                title: '创建时间',
                                dataIndex: 'createdTime'
                            },
                                                                                                                                                                                                                                {
                        title: '操作',
                        key: 'action',
                        width: '200px',
                        align: 'center',
                        scopedSlots: { customRender: 'action' }
                    }
                ],
                // 下拉框map
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            // 加载数据方法 必须为 Promise 对象
                loadData: parameter => {
                    parameter = {
                        ...parameter,
                        ...this.queryParam,
                        ...this.extraQueryParam,
                        dataScope: {
                            sortBy: 'desc',
                            sortName: 'update_time'
                        }
                    }
                    return getCustomFormPage(Object.assign(parameter, this.queryParam))
                            .then(res => {
                                return res.data
                            })
                },
                selectedRowKeys: [],
                selectedRows: [],

                options: {
                    alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
                    rowSelection: {
                        selectedRowKeys: this.selectedRowKeys,
                        onChange: this.onSelectChange
                    }
                },
                optionAlertShow: false,
                isCreated: false
            }
        },
        created () {
            // 下拉框map
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        },
        methods: {
            tableOption () {
                if (!this.optionAlertShow) {
                    this.options = {
                        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
                        rowSelection: {
                            selectedRowKeys: this.selectedRowKeys,
                            onChange: this.onSelectChange,
                            type: this.type,
                            getCheckboxProps: record => ({
                                props: {
                                    disabled: false,
                                    name: record.id
                                }
                            })
                        },
                        customRow: (record) => {
                            return {
                                on: { // 事件
                                    click: (event) => { // 点击行
                                        // 选择对象
                                        this.mySelect([record.id], [record])
                                    },
                                    dblclick: (event) => {
                                        this.mySelect([record.id], [record])
                                        this.handleSelect()
                                    }
                                }
                            }
                        }
                    }
                    this.optionAlertShow = true
                } else {
                    this.options = {
                        alert: false,
                        rowSelection: null
                    }
                    this.optionAlertShow = false
                }
            },
            handleView (record) {
                fetchCustomForm({ id: record.id }).then(res => {
                    const modal = this.$refs.detailModal
                    modal.base(res.data)
                })
            },
            handleOk () {
                this.$refs.table.refresh()
            },
            onSelectChange (selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys
                this.selectedRows = selectedRows
            },
            resetSearchForm () {
                this.queryParam = {
                }
                this.$refs.table.refresh(true)
            },
            base (record, queryParam = {}) {
                this.visible = true
                this.modalTitle = '选择信息'
                this.extraQueryParam = queryParam
                this.record = record
                if (this.isCreated) {
                    this.$refs.table.clearSelected()
                    this.options.rowSelection.type = this.type
                    this.handleOk()
                } else {
                    this.tableOption()
                    this.isCreated = true
                }
            },
            handleCancel () {
                this.visible = false
                this.confirmLoading = false
            },
            handleSelect () {
                if (this.selectedRowKeys.length === 0) {
                    this.$message.warn('请至少选择一项信息')
                } else {
                    this.confirmLoading = true
                    this.$emit('selected', this.record, this.selectedRowKeys, this.selectedRows)
                    this.confirmLoading = false
                    this.visible = false
                }
            },
            mySelect(selectedRowKeys, selectedRows) {
                if (this.type === 'radio') {
                    this.$refs.table.updateSelect(selectedRowKeys, selectedRows)
                            this.$refs.table.rowSelection.onChange(selectedRowKeys, selectedRows)
                } else {
                    let mySelectedRowKeys
                    let mySelectedRows = this.selectedRows.filter(item => item.id !== selectedRowKeys[0])
                    if (this.selectedRowKeys.includes(selectedRowKeys[0])) {
                        mySelectedRowKeys = this.selectedRowKeys.filter(item => item !== selectedRowKeys[0])
                    } else {
                        mySelectedRowKeys = [...selectedRowKeys, ...this.selectedRowKeys]
                        mySelectedRows = [...mySelectedRows, ...selectedRows]
                    }
                    this.$refs.table.updateSelect(mySelectedRowKeys, mySelectedRows)
                            this.$refs.table.rowSelection.onChange(mySelectedRowKeys, mySelectedRows)
                }

            }
        }
    }
</script>