bonus-ui/src/views/material/purchase/goodsBind/component/home.vue

<template>
    <!-- 新购验收绑定主页列表 -->
    <div>
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="100px"
        >
            <el-form-item label="日期">
                <el-date-picker
                    type="daterange"
                    v-model="queryTime"
                    range-separator="-"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    end-placeholder="结束日期"
                    start-placeholder="开始日期"
                    @change="onTimeChange"
                ></el-date-picker>
            </el-form-item>

            <el-form-item label="设备状态" prop="status">
                <el-select
                    clearable
                    filterable
                    style="width: 240px"
                    placeholder="请选择设备状态"
                    v-model="queryParams.status"
                >
                    <el-option
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                        v-for="dict in dict.type.purchase_task_status"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="关键字" prop="keyWord">
                <el-input
                    v-model="queryParams.keyWord"
                    placeholder="请输入关键字"
                    clearable
                    maxlength="50"
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                    >导出数据</el-button
                >
            </el-col>
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row>

        <el-table
            border
            :data="bindList"
            v-loading="loading"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column align="center" label="序号" type="index" />
            <el-table-column
                align="center"
                label="到货时间"
                prop="arrivalTime" width="150"
                show-overflow-tooltip
            />
            <el-table-column
                label="采购单号"
                align="center"
                prop="code" width="150"
                show-overflow-tooltip
            />
            <el-table-column
                label="采购物资"
                align="center"
                prop="purchaseMaTypeName"
                show-overflow-tooltip
            />
            <el-table-column
                label="采购数量"
                align="center"
                prop="purchaseMaNumber"
                show-overflow-tooltip
            />
            <el-table-column
                label="创建人"
                align="center"
                prop="createBy"
                show-overflow-tooltip
            />
            <el-table-column
                label="创建时间"
                align="center"
                prop="createTime" width="150"
                show-overflow-tooltip
            />
            <el-table-column label="状态" align="center" show-overflow-tooltip>
                <template slot-scope="{ row }">
                    <dict-tag
                        :value="row.taskStatus"
                        :options="dict.type.purchase_task_status"
                    />
                </template>
            </el-table-column>

            <el-table-column
                label="备注"
                align="center"
                prop="remark"
                show-overflow-tooltip
            />

            <el-table-column label="操作" align="center" width="400">
                <template slot-scope="{ row }">
                    <el-button
                        plain
                        size="mini"
                        type="primary"
                        icon="el-icon-zoom-in"
                        @click="handleView(row)"
                        >查看</el-button
                    >
                    <el-button
                        plain
                        size="mini"
                        type="warning"
                        @click="handleBind(row)"
                    >
                        <svg-icon icon-class="bind-icon" />
                        编码绑定
                    </el-button>
                    <el-button
                        plain
                        size="mini"
                        type="danger"
                        icon="el-icon-close"
                        @click="handleNotice(row)"
                        >驳回</el-button
                    >
                    <el-button
                        plain
                        size="mini"
                        type="success"
                        @click="onDownloadQr(row)"
                    >
                        <svg-icon icon-class="qr-icon" />
                        下载
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            :total="total"
            v-show="total > 0"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import { getNewBuyBindListApi } from '@/api/purchase/goodsBind'

export default {
    name: 'Home',
    dicts: ['purchase_task_status'],
    data() {
        return {
            total: 0, //                总条数
            loading: true, //           遮罩层
            showSearch: true, //        显示搜索条件
            bindList: [], //            列表数据源
            queryTime: [], //           日期数据源
            selectList: [], //          列表选中数据
            // 列表查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                status: '',
                endTime: '',
                keyWord: '',
                startTime: '',
                // taskStatus: 3,
            },
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 日期change
        onTimeChange(val) {
            if (val.length > 0) {
                const [time_1, time_2] = val
                this.queryParams.startTime = time_1
                this.queryParams.endTime = time_2
            } else {
                this.queryParams.startTime = ''
                this.queryParams.endTime = ''
            }
        },
        // 获取列表
        async getList() {
            this.loading = true
            this.queryParams.statusList=[3,13]
            const res = await getNewBuyBindListApi(this.queryParams)
            this.bindList = res.rows
            this.total = res.total
            this.loading = false
        },
        // 搜索按钮
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        // 重置按钮
        resetQuery() {
            this.queryTime = []
            this.resetForm('queryForm')
            this.queryParams.pageNum = 1
            this.queryParams.endTime = ''
            this.queryParams.pageSize = 10
            this.queryParams.startTime = ''
            this.getList()
        },
        // 查看
        handleView(row) {
            this.$emit('openBindTools', row.taskId, row.id, 1)
        },
        // 绑定
        handleBind(row) {
            this.$emit('openBindTools', row.taskId, row.id, 2)
        },
        // 驳回
        handleNotice(row) {
            this.$confirm('是否确定驳回', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {})
                .catch(() => {})
        },
        // 下载二维码
        onDownloadQr() {
            console.log('二维码下载')
        },
        // 导出数据
        handleExport() {
            console.log('数据导出')
        },
        // 列表复选框
        handleSelectionChange(list) {
            this.selectList = list
        },
    },
}
</script>