ezhizao_dms_vue/src/views/business/inventoryCheck/index.vue

<template>
    <div class="page-container row-container">
        <!-- 左侧区域 -->
        <section class="list-part-container" style="flex: 3">
            <!-- 搜索区 -->
            <el-form class="list-search-container" :model="queryParams" ref="queryRef" :inline="true"
                style="margin-right: 0px">
                <el-form-item class="section-title" label="盘点" />
                <el-form-item label="创建时间：">
                    <el-date-picker v-model="queryParams.createStartTime" type="date" value-format="YYYY-MM-DD"
                        :editable="false" clearable placeholder="请选择" style="width: 130px" />
                    <span>到</span>
                    <el-date-picker v-model="queryParams.createEndTime" type="date" value-format="YYYY-MM-DD"
                        :editable="false" clearable placeholder="请选择" style="width: 130px" />
                </el-form-item>
                <el-form-item label="开始时间：">
                    <el-date-picker v-model="queryParams.startTimeStr" type="date" value-format="YYYY-MM-DD"
                        :editable="false" clearable placeholder="请选择" style="width: 130px" />
                    <span>到</span>
                    <el-date-picker v-model="queryParams.startTimeEnd" type="date" value-format="YYYY-MM-DD"
                        :editable="false" clearable placeholder="请选择" style="width: 130px" />
                </el-form-item>
                <el-form-item label="结束时间：">
                    <el-date-picker v-model="queryParams.endTimeStr" type="date" value-format="YYYY-MM-DD"
                        :editable="false" clearable placeholder="请选择" style="width: 130px" />
                    <span>到</span>
                    <el-date-picker v-model="queryParams.endTimeEnd" type="date" value-format="YYYY-MM-DD"
                        :editable="false" clearable placeholder="请选择" style="width: 130px" />
                </el-form-item>
                <el-form-item label="状态：">
                    <el-select v-model="queryParams.status" clearable placeholder="请选择盘点状态" style="width: 145px">
                        <el-option v-for="dict in take_stock_status" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注：">
                    <el-input placeholder="请输入备注" v-model.trim="queryParams.remark" @keydown.enter.prevent clearable
                        style="width: 120px" />
                </el-form-item>
                <el-form-item style="margin-left: 0">
                    <el-button type="info" icon="Search" @click="handleQuery">搜索
                    </el-button>
                    <el-button v-show="!hasAlreadyAddTakeStock && !hasAlreadyTakeStock"
                        v-hasPermi="['business:inventoryCheck:add']" type="primary" icon="Plus"
                        @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
            <div class="el-table-container">
                <div class="el-table-inner-container">
                    <el-table ref="takeStockPeriodTable" :data="takeStockPeriodList" v-loading="loading"
                        highlight-current-row height="100%">
                        <el-table-column type="index" label="行号" width="50" align="center" />
                        <el-table-column label="创建时间" prop="createTime" width="200" align="center" />
                        <el-table-column label="开始时间" prop="startTime" width="200" align="center" />
                        <el-table-column label="结束时间" prop="endTime" width="200" align="center" />
                        <el-table-column label="盘点年月" prop="stockTime" width="150" align="center">
                            <template #default="scope">
                                <el-date-picker v-if="scope.row.selectDateStatus" v-model="scope.row.stockTime"
                                    type="month" value-format="YYYY-M" :editable="false" clearable placeholder="请选择"
                                    style="width: 130px" />
                                <div v-else>{{ scope.row.stockTime }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="盘点状态" prop="status" width="80" align="center">
                            <template #default="scope">
                                <dict-tag :options="take_stock_status" :value="scope.row.status" />
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" prop="remark" align="center">
                            <template #default="scope">
                                <div v-if="scope.row.editStatus">
                                    <el-input v-model.trim="scope.row.remark" placeholder="请输入备注" />
                                </div>
                                <div v-else>{{ scope.row.remark }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="300">
                            <template #default="scope">
                                <el-button v-show="!scope.row.editStatus" v-hasPermi="['business:inventoryCheck:edit']"
                                    link type="warning" icon="Edit" @click="handleUpdate(scope.row)">
                                    编辑
                                </el-button>
                                <el-button
                                    v-show="!scope.row.editStatus && (scope.row.status == 1 || scope.row.status == 2)"
                                    v-hasPermi="['business:inventoryCheck:view']" link type="primary" icon="View"
                                    @click="handleView(scope.row)">
                                    查看
                                </el-button>
                                <el-button v-show="!scope.row.editStatus && scope.row.status == 0"
                                    v-hasPermi="['business:inventoryCheck:start']" link type="success" icon="Open"
                                    @click="handleStartTakeStock(scope.row)">
                                    开始盘点
                                </el-button>
                                <el-button v-show="!scope.row.editStatus && scope.row.status == 1" link
                                    v-hasPermi="['business:inventoryCheck:end']" type="danger" icon="TurnOff"
                                    @click="handleEndTakeStock(scope.row)">
                                    结束盘点
                                </el-button>
                                <el-button link v-if="scope.row.editStatus" icon="Close" type="danger"
                                    @click="handleCancel(scope.row, scope.$index)">取消</el-button>
                                <el-button link icon="Check" v-if="scope.row.editStatus" type="success"
                                    @click="handleSave(scope.row)">保存</el-button>
                                <el-button v-if="scope.row.status == 2"
                                    v-hasPermi="['business:inventoryCheck:downLoad']" link type="primary"
                                    icon="Download" @click="handleExport(scope.row)">导出
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- 分页 -->
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getTakeStockPeriodList" />
        </section>
        <!-- 盘点详情 -->
        <inventory-check-form ref="inventoryCheckFormRef" />

    </div>
</template>

<script setup name="inventoryCheck">
import { listTakeStockPeriod, addTakeStockPeriod, updateTakeStockPeriod } from "@/api/business/takeStockPeriod";

import inventoryCheckForm from "./form.vue";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
/** 字典 */
const { take_stock_status } = proxy.useDict("take_stock_status");

/** 盘点 */
const takeStockPeriodTable = ref(null);
const takeStockPeriodList = ref([])
//列表中是否已经存在开始盘点的数据
const hasAlreadyTakeStock = ref(false);
//列表中已经存在新增的盘点
const hasAlreadyAddTakeStock = ref(false);
const loading = ref(false);
const total = ref(0);

const queryParams = ref({
    status: null,
    createStartTime: null,
    createEndTime: null,
    startTimeStr: null,
    startTimeEnd: null,
    endTimeStr: null,
    endTimeEnd: null,
    remark: null,
    pageNum: 1,
    pageSize: 10,
});

/***********************  工段相关事件  ****************************/

function getTakeStockPeriodList() {
    loading.value = true;
    listTakeStockPeriod(queryParams.value).then(res => {
        takeStockPeriodList.value = res.rows;
        hasAlreadyTakeStock.value = res.others.hasAddTakeStockStatus
        hasAlreadyAddTakeStock.value = res.others.hasTakeStockStatus
        total.value = res.total;
    })
    loading.value = false
}
//新增
function handleAdd() {
    takeStockPeriodList.value.unshift({ createTime: proxy.moment().format("YYYY-MM-DD HH:mm:ss"), startTime: null, stockTime: null, endTime: null, status: "0", remark: null, editStatus: true, selectDateStatus: true })
    hasAlreadyAddTakeStock.value = true
}
//保存按钮
function handleSave(row) {
    if (row.stockTime == null) {
        proxy.$modal.msgError("请选择盘点时间")
        return
    }
    row.stockYear = row.stockTime.substring(0, 4)
    row.stockMonth = row.stockTime.substring(5, 7)
    console.log(row)
    addTakeStockPeriod(row).then(res => {
        if (res.code === 200) {
            getTakeStockPeriodList()
        }
    })
}
function handleExport(data) {
    console.log(data)
    proxy.download('/ezhizao-dms-production/business/taksStockLot/download', {
        id: data.id
    }, `盘点汇总${new Date().getTime()}.xlsx`)
}
//查看按钮
function handleView(row) {
    proxy.$refs.inventoryCheckFormRef.open(row);
}
//结束盘点
function handleEndTakeStock(row) {
    proxy.$modal
        .confirm("是否确认结束盘点？")
        .then(function () {
            row.endTime = proxy.moment().format("YYYY-MM-DD HH:mm:ss")
            row.status = 2
            updateTakeStockPeriod(row).then(res => {
                if (res.code === 200) {
                    proxy.$modal.msgSuccess("已成功结束盘点");
                    getTakeStockPeriodList()
                }
            })
        })
}
//编辑按钮
function handleUpdate(row) {
    row.editStatus = true
}
//开始盘点
function handleStartTakeStock(row) {
    proxy.$modal
        .confirm("是否确认开始盘点？")
        .then(function () {
            row.startTime = proxy.moment().format("YYYY-MM-DD HH:mm:ss")
            row.flag = 0
            updateTakeStockPeriod(row).then(res => {
                if (res.code === 200) {
                    proxy.$modal.msgSuccess("已成功开始盘点");
                    getTakeStockPeriodList()
                }
            })
        })

}
/** 搜索按钮操作 */
function handleQuery() {
    getTakeStockPeriodList();
}
function handleCancel(row, index) {
    if (row.id) {
        takeStockPeriodList.value[index].editStatus = false
    }
    getTakeStockPeriodList()



}
onMounted(() => {
    getTakeStockPeriodList();
});
</script>
<style scoped>
.el-form--inline .el-form-item {
    margin-right: 20px;
}
</style>