hitch-sb-antd/src/views/purchase/purchase-contract-main-list/PurchaseContractMainList.vue

<template>
    <a-card :bordered="false">
        <div class="table-page-search-wrapper"  @keyup.enter="handleEnter">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="关键字">
                            <a-input v-model="queryParam.keyword" placeholder="请输入名称/类型名称"/>
                        </a-form-item>
                    </a-col>
                    <a-col :md="8 || 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>
            </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <div class="table-operator" style="margin-bottom: 8px;">
            <a-button v-if="$auth('purchase-purchase-contract-main-lists-add')" type="primary" icon="plus" @click="$refs.baseModal.base()">新增</a-button>
            <a-button style="margin-left: 8px" v-if="$auth('purchase-purchase-contract-main-lists-export')" type="primary" icon="download" @click="doExport">导出</a-button>
            <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0 && $auth('purchase-purchase-contract-main-lists-del')">
                <a-menu slot="overlay">
                    <a-popconfirm title="是否要删除所选数据？" @confirm="batchDelete()">
                        <a-menu-item key="1"><a-icon type="delete" /><a>删除</a></a-menu-item>
                    </a-popconfirm>
                </a-menu>
                <a-button style="margin-left: 8px">
                    批量操作 <a-icon type="down" />
                </a-button>
            </a-dropdown>
        </div>

        <s-table
                ref="table"
                size="small"
                rowKey="id"
                :columns="columns"
                :data="loadData"
                :alert="options.alert"
                :rowSelection="options.rowSelection"
                showPagination="auto"
        >
            <span slot="action" slot-scope="record">
              <template>
                <a @click="handleView(record)">查看</a>
                <operation-button
                        v-if="$auth('purchase-purchase-contract-main-lists-edit')" @click="handleEdit(record)"
                      >修改</operation-button>
                <operation-button
                        v-if="$auth('purchase-purchase-contract-main-lists-del')"
                        :type="2"
                        title="是否要删除该条数据？"
                        @confirm="batchDelete(record.id)">删除</operation-button>
              </template>
            </span>
        </s-table>
        <base-form ref="baseModal" @ok="handleOk"/>
        <detail ref="detailModal"/>
    </a-card>
</template>

<script>
    import { STable, Ellipsis } from '@/components'
    import BaseForm from './modules/BaseForm'
    import Detail from './modules/Detail'
    import { getPurchaseContractMainListPage, deletePurchaseContractMainLists, fetchPurchaseContractMainList, exportPurchaseContractMainList } from '@/api/purchase/purchase-contract-main-list'

    export default {
        name: 'PurchaseContractMainListList',
        components: {
            STable,
            Ellipsis,
            BaseForm,
            Detail
        },
        data () {
            return {
                // 查询参数
                queryParam: {
                },
                // 表头
                columns: [
                    {
                        title: '序号',
                        dataIndex: 'index',
                        customRender: (text, record, index) => {
                            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
                        }
                    },
                                                                                                                                                {
                                title: '总需求计划主键',
                                dataIndex: 'demandPlanId'
                            },
                                                                                                                                                        {
                                title: '采购计划主键',
                                dataIndex: 'purchasePlanId'
                            },
                                                                                                                                                        {
                                title: '采购申请ID',
                                dataIndex: 'purchaseApplyId'
                            },
                                                                                                                                                        {
                                title: '采购单ID',
                                dataIndex: 'purchaseOrderId'
                            },
                                                                                                                                                        {
                                title: '发运单ID',
                                dataIndex: 'dispatchOrderId'
                            },
                                                                                                                                                        {
                                title: '名称',
                                dataIndex: 'name'
                            },
                                                                                                                                                        {
                                title: '型号',
                                dataIndex: 'model'
                            },
                                                                                                                                                        {
                                title: '整机编号',
                                dataIndex: 'machineNo'
                            },
                                                                                                                                                        {
                                title: '发动机型号',
                                dataIndex: 'engineModel'
                            },
                                                                                                                                                        {
                                title: '发动机编号',
                                dataIndex: 'engineNo'
                            },
                                                                                                                                                            {
                                    title: '数量',
                                    dataIndex: 'quantity',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '单位',
                                    dataIndex: 'unit',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Table.getMapText(this.unitMap, text)
                                    }                  ,
                                },
                                                                                                                                                            {
                                    title: '单价',
                                    dataIndex: 'price',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                            {
                                    title: '总价',
                                    dataIndex: 'totalMoney',
                                    customRender: (text, record, index) => {
                                        return this.BaseTool.Amount.formatter(text)
                                    }                                ,
                                },
                                                                                                                                                        {
                                title: '备注',
                                dataIndex: 'remark'
                            },
                                                                                                                                                        {
                                title: '删除标志',
                                dataIndex: 'delFlag'
                            },
                                                                                                                                                                                                    {
                                title: '创建人名称',
                                dataIndex: 'createdUserName'
                            },
                                                                                                                                                        {
                                title: '创建时间',
                                dataIndex: 'createdTime'
                            },
                                                                                                                                                                                                                                {
                        title: '操作',
                        key: 'action',
                        width: '200px',
                        align: 'center',
                        scopedSlots: { customRender: 'action' }
                    }
                ],
                // 下拉框map
                                    unitMap: {},
                                // 加载数据方法 必须为 Promise 对象
                loadData: parameter => {
                    parameter = {
                        ...parameter,
                        ...this.queryParam,
                        dataScope: {
                            sortBy: 'desc',
                            sortName: 'update_time'
                        }
                    }
                    return getPurchaseContractMainListPage(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
            }
        },
        created () {
            // 下拉框map
                            this.unitMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_CONTRACT_MAIN_LIST_UNIT)
                        this.tableOption()
        },
        methods: {
            tableOption () {
                if (!this.optionAlertShow) {
                    this.options = {
                        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
                        rowSelection: {
                            selectedRowKeys: this.selectedRowKeys,
                            onChange: this.onSelectChange,
                            getCheckboxProps: record => ({
                                props: {
                                    disabled: false,
                                    name: record.id
                                }
                            })
                        }
                    }
                    this.optionAlertShow = true
                } else {
                    this.options = {
                        alert: false,
                        rowSelection: null
                    }
                    this.optionAlertShow = false
                }
            },
            batchDelete (id) {
                let ids = []
                if (this.BaseTool.String.isBlank(id)) {
                    const length = this.selectedRows.length
                    if (length === 0) {
                        this.$message.info('请选择要删除的记录')
                                return
                    }
                    ids = this.selectedRows.map(item => item.id)
                } else {
                    ids = [id]
                }
                deletePurchaseContractMainLists(ids).then(res => {
                    this.$message.info('删除成功')
                    this.handleOk()
                    this.$refs.table.clearSelected()
                })
            },
            handleEdit (record) {
                fetchPurchaseContractMainList({ id: record.id }).then(res => {
                    const modal = this.$refs.baseModal
                    modal.base(res.data)
                })
            },
            handleView (record) {
                fetchPurchaseContractMainList({ 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)
            },
            doExport () {
                const parameter = {
                    ...this.queryParam
                }
                exportPurchaseContractMainList(parameter).then(file => {
                    this.BaseTool.UPLOAD.downLoadExportExcel(file)
                })
            },
            handleEnter () {
                this.$refs.table.refresh(true)
            }
        }
    }
</script>