整合前端

This commit is contained in:
砂糖
2026-04-13 17:04:38 +08:00
parent 69609a2cb1
commit 5d4794c9bd
915 changed files with 144259 additions and 0 deletions

View File

@@ -0,0 +1,641 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="操作时间" prop="signTime">
<el-date-picker v-model="searchTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']">
</el-date-picker>
</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="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
v-hasPermi="['oa:oaOutWarehouse:remove']">删除
</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="TaskList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" type="index" />
<el-table-column label="采购单编号" align="center" prop="masterNum">
<template slot-scope="scope">
<el-input v-model="scope.row.masterNum" size="mini" placeholder="请输入采购单编号"
@blur="updateMasterRemark(scope.row)" />
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<el-tag :type="scope.row.status === 1 ? 'success' : 'warning'">{{
scope.row.status === 1 ? "完成" : "未完成"
}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="最近截止日期" align="center" prop="nearestEndTime">
<template slot-scope="scope" v-if="scope.row.nearestEndTime != null && scope.row.status !== 1">
<template v-if="dayDiff(scope.row.nearestEndTime) > 3">
<!-- 超过 3 正常显示 -->
<span>{{ parseTime(scope.row.nearestEndTime, '{y}-{m}-{d}') }}</span>
</template><template v-else-if="dayDiff(scope.row.nearestEndTime) > 0">
<!-- 未来 13 -->
<el-tag type="warning" effect="plain">
剩余{{ dayDiff(scope.row.nearestEndTime) }}
</el-tag>
</template><template v-else-if="dayDiff(scope.row.nearestEndTime) === 0">
<!-- 今天到期 -->
<el-tag type="danger" effect="plain">
<i class="el-icon-warning-outline"></i> 今日过期
</el-tag>
</template><template v-else>
<!-- 已过期 -->
<el-tag type="danger" effect="plain">
逾期{{ Math.abs(dayDiff(scope.row.endTime)) }}
</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="操作时间" align="center" prop="signTime">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.signTime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column>
<el-table-column label="操作人" align="center" prop="signUser" />
<el-table-column label="备注" align="center" prop="remark">
<template slot-scope="scope">
<el-input v-model="scope.row.remark" size="mini" type="textarea" placeholder="请输入备注"
@blur="updateMasterRemark(scope.row)" />
</template>
</el-table-column>
<el-table-column label="需求编号" align="center" prop="requirementNum">
<template slot-scope="scope">
<el-select v-model="scope.row.requirementId" placeholder="请选择需求编号" filterable clearable
@change="updateMasterRemark(scope.row)">
<el-option v-for="item in requirementList" :key="item.requirementId" :label="item.title"
:value="item.requirementId" />
</el-select>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-search" @click="showDetail(scope.row)">查看
</el-button>
<el-button size="mini" type="text" icon="el-icon-finished" v-if="scope.row.status === 0"
@click="handleIn(scope.row)">执行入库
</el-button>
<el-button size="mini" type="text" icon="el-icon-check" v-if="scope.row.status === 0"
@click="handComplete(scope.row)">完成
</el-button>
<el-button size="mini" type="text" icon="el-icon-download" @click="handleExport(scope.row)">导出
</el-button>
<el-button size="mini" type="text" icon="el-icon-remove" @click="handleDelete(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<el-drawer size="70%" :title="parseTime(searchItem.signTime) + '-采购单'" :visible.sync="drawer">
<el-table v-loading="loading" :data="warehouseTaskList">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" type="index" />
<el-table-column label="物料名" align="center" prop="name" />
<el-table-column label="采购数量" align="center" prop="taskInventory" />
<el-table-column label="单位" align="center" prop="unit" />
<el-table-column label="品牌" align="center" prop="brand" />
<el-table-column label="型号" align="center" prop="model" />
<el-table-column label="规格" align="center" prop="specifications" />
<el-table-column label="操作" align="center" prop="remark">
<template slot-scope="scope">
<el-button type="text" icon="el-icon-edit" @click="handleRemoveTask(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-drawer>
<el-drawer size="70%" :title="parseTime(searchItem.signTime, '{y}_{m}_{d}') + '_采购单'"
:visible.sync="completeDrawer">
<!-- 工具栏 -->
<div style="display:flex;justify-content:space-between;margin-bottom:10px">
<!-- 模式切换 -->
<el-radio-group v-model="mode" size="mini">
<el-radio-button label="single">单个入库</el-radio-button>
<el-radio-button label="batch">批量操作</el-radio-button>
</el-radio-group>
</div>
<el-table v-loading="loading" :data="warehouseTaskList" ref="warehouseTable">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" type="index" />
<el-table-column label="物料名" align="center" prop="name" />
<el-table-column label="截止日期" align="center" prop="endTime">
<template slot-scope="scope" v-if="scope.row.endTime != null">
<template v-if="dayDiff(scope.row.endTime) > 3">
<!-- 超过 3 正常显示 -->
<span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
</template><template v-else-if="dayDiff(scope.row.endTime) > 0">
<!-- 未来 13 -->
<el-tag type="warning" effect="plain">
剩余{{ dayDiff(scope.row.endTime) }}
</el-tag>
</template><template v-else-if="dayDiff(scope.row.endTime) === 0">
<!-- 今天到期 -->
<el-tag type="danger" effect="plain">
<i class="el-icon-warning-outline"></i> 今日过期
</el-tag>
</template><template v-else>
<!-- 已过期 -->
<el-tag type="danger" effect="plain">
逾期{{ Math.abs(dayDiff(scope.row.endTime)) }}
</el-tag>
</template>
</template>
</el-table-column>
<el-table-column label="采购数量" align="center" prop="taskInventory" />
<el-table-column label="采购价格" align="center" prop="price">
<template slot-scope="scope">
<el-input v-model="scope.row.price" v-if="scope.row.taskStatus !== 2" type="number"></el-input>
<span v-else>
已经操作入库录入价格请前往入库明细查看
</span>
</template>
</el-table-column>
<el-table-column label="品牌" align="center" prop="brand" />
<el-table-column label="规格" align="center" prop="specifications" />
<el-table-column label="备注" align="center" prop="remark">
<template slot-scope="scope">
<el-input v-model="scope.row.remark" size="mini" placeholder="请输入备注" :disabled="scope.row.taskStatus === 2"
@blur="updateRemark(scope.row)" />
</template>
</el-table-column>
<!-- 操作列单行按钮 -->
<!-- 新增状态列 -->
<el-table-column label="状态" prop="taskStatus" width="140" align="center">
<template slot-scope="scope">
<!-- 单个模式可编辑 -->
<el-tag type="success" v-if="scope.row.taskStatus === 2">完成</el-tag>
<!-- 单个模式下可编辑动态过滤选项 -->
<el-select v-else-if="mode === 'single'" v-model="scope.row.taskStatus" size="mini" placeholder="状态"
@change="handleUpdateTask(scope.row)">
<el-option v-for="s in filteredStatusOptions(scope.row)" :key="s.value" :value="s.value"
:label="s.label" />
</el-select>
<!-- 批量模式只显示 -->
<span v-else>{{ statusLabel(scope.row.taskStatus) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button size="mini" type="danger" v-if="scope.row.taskStatus !== 2"
@click="handleBatchDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="display: flex; justify-content: flex-end; margin: 20px">
<!-- 批量模式下才显示 -->
<div v-if="mode === 'batch'">
<el-select v-model="batchStatus" size="mini" placeholder="选择批量状态">
<el-option v-for="s in statusOptions" :key="s.value" :value="s.value" :label="s.label" />
</el-select>
</div>
<el-button @click="submitComplete" v-if="mode === 'batch'" size="mini" type="success">执行入库</el-button>
<el-button @click="completeDrawer = false" size="mini">关闭</el-button>
</div>
</el-drawer>
</div>
</template>
<script>
import { listRequirements } from "@/api/oa/requirement";
import {
addOaWarehouseMaster,
delOaWarehouseMaster, listOaWarehouseMaster,
updateOaWarehouseMaster,
} from "@/api/oa/warehouse/warehouseMaster";
import {
delOaWarehouseTask,
getOaWarehouseTaskByMasterId,
updateOaWarehouseTask,
updateOaWarehouseTaskBatch,
updateOaWarehouseTaskStatus,
updateTaskRemark
} from "@/api/oa/warehouse/warehouseTask";
export default {
name: "OaOutWarehouse",
data () {
return {
completeDrawer: false,
mode: 'single',
batchStatus: null, // 批量入库时选择的状态
searchTime: [], // 搜索时间范围
// 细节数据
detailData: {},
// 抽屉
drawer: false,
// 选中项目名称
selectedProject: "",
// 查看详情弹窗
outDetail: {},
// 弹窗标志
detail: false,
// 绑定项目详情
projectDetail: {},
// 物料信息详情
warehouseDetail: {},
// 入库列表
TaskList: [],
// 按钮loading
buttonLoading: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
selectedRows: [],
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 弹出层标题
title: "",
// 选择对象
searchItem: {},
// 是否显示弹出层
open: false,
warehouseTaskList: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 50,
type: 2,
},
// 导出参数
exportParams: {
pageNum: 1,
pageSize: 10,
},
statusOptions: [
{ value: 0, label: '未采购' },
{ value: 1, label: '在途' },
{ value: 2, label: '完成' },
{ value: 3, label: '作废' }
],
// 表单参数
form: {},
currentMasterId: null,
requirementList: [],
};
},
created () {
this.getList();
this.getRequirementList();
},
methods: {
// 获取需求列表
getRequirementList () {
listRequirements({
pageNum: 1,
pageSize: 1000,
}).then((res) => {
this.requirementList = res.rows;
});
},
// 返回 endTime 与今天(不含时分秒)的差值(单位:天)
dayDiff (endTime) {
const end = new Date(endTime)
const now = new Date()
end.setHours(0, 0, 0, 0)
now.setHours(0, 0, 0, 0)
// 正数 = future days 0 = today 负数 = past days
return Math.floor((end - now) / (1000 * 60 * 60 * 24))
},
// 根据 price 动态过滤:如果行 price 为空,就干掉 value===2
filteredStatusOptions (row) {
if (row.price == null || row.price === '') {
return this.statusOptions.filter(opt => opt.value !== 2);
}
return this.statusOptions;
},
/** 单个入库接口 */
handleUpdateTask (row) {
this.loading = true;
// 这里如果用户选了“完成”但 price 还是空,你也可以额外做下兜底校验
if (row.taskStatus === 2 && (row.price == null || row.price === '')) {
this.$message.error('请先填写价格,才能标记为完成');
row.taskStatus = 0; // 或者恢复到之前的状态
return;
}
updateOaWarehouseTaskStatus(row).then(response => {
getOaWarehouseTaskByMasterId(row.masterId).then((res) => {
this.currentMasterId = row.masterId;
this.warehouseTaskList = res.data;
this.loading = false;
this.$modal.msgSuccess("操作成功")
this.getList();
});
})
},
/** 状态值 → 文字 */
statusLabel (val) {
const item = this.statusOptions.find(s => s.value === val)
return item ? item.label : ''
},
handleRemoveTask (row) {
this.$confirm('确定删除该物料吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.loading = true;
delOaWarehouseTask(row.taskId).then((res) => {
getOaWarehouseTaskByMasterId(this.currentMasterId).then((res) => {
this.warehouseTaskList = res.data;
this.$message.success('删除成功')
})
})
.finally(() => {
this.loading = false;
})
})
},
/** 批量删除 */
handleBatchDelete (row) {
let rows = this.$refs.warehouseTable.selection
if (!rows.length) {
rows = [row]
}
if (!rows.length) return this.$message.warning('请先勾选物料')
const taskIds = rows.map(row => row.taskId)
this.$confirm(`确认删除 ${rows.length} 条记录?`, '提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
delOaWarehouseTask(taskIds).then((res) => {
this.getList();
this.drawer = false;
this.$message.success('删除成功')
})
})
},
/** 单行删除 */
handleDeleteTask (index) {
this.warehouseTaskList.splice(index, 1)
this.$message.success('删除成功')
},
submitComplete () {
const rows = this.$refs.warehouseTable.selection || []
if (!rows.length) {
return this.$message.warning('请先勾选物料')
}
if (this.batchStatus === null) {
return this.$message.warning('请选择批量状态')
}
// 前端直接设值(实际项目可调用接口)
rows.forEach(r => { r.taskStatus = this.batchStatus })
// 批量入库采购单
updateOaWarehouseTaskBatch(rows).then(res => {
this.getList();
this.drawer = false;
this.$message.success(`已批量入库 ${rows.length}`)
})
},
/** 执行入库操作 */
handleIn (row) {
// 更新采购单情况
this.completeDrawer = true;
this.searchItem = row;
this.form = row;
this.loading = true;
this.currentMasterId = row.masterId;
getOaWarehouseTaskByMasterId(row.masterId).then((res) => {
this.currentMasterId = row.masterId;
this.warehouseTaskList = res.data;
this.loading = false;
});
},
/** 执行完成操作, 这里只是把状态改为1 */
handComplete (row) {
this.form = row;
this.form.status = 1;
updateOaWarehouseMaster(this.form).then((res) => {
this.$modal.msgSuccess("操作成功");
this.getList();
});
},
getDateStr (date) {
if (!date) {
return ''
}
return this.parseTime(date, '{y}-{m}-{d} {h}:{i}:{s}')
},
/** 查询仓库入库列表 */
getList () {
this.loading = true;
// 处理日期范围查询参数
if (this.searchTime && this.searchTime.length === 2) {
this.queryParams.startTime = this.getDateStr(this.searchTime[0]);
this.queryParams.endTime = this.getDateStr(this.searchTime[1]);
} else {
this.queryParams.startTime = '';
this.queryParams.endTime = '';
}
listOaWarehouseMaster(this.queryParams).then((res) => {
this.TaskList = res.rows;
this.total = res.total;
this.loading = false;
});
},
// 取消按钮
cancel () {
this.open = false;
this.reset();
},
// 表单重置
reset () {
this.form = {
projectId: undefined,
warehouseList: [],
remark: ''
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery () {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery () {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange (selection) {
this.ids = selection.map((item) => item.masterId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd () {
this.reset();
this.open = true;
if (this.drawer) {
// 如果抽屉是打开的说明是从项目处进入的新增从而加入projectId
this.projectFlag = true;
this.form.projectId = this.selectedProject.projectId;
this.form.masterId = this.searchItem.masterId;
this.form.projectName = this.searchItem.projectName;
this.form.masterNum = this.searchItem.masterNum;
}
this.title = "添加仓库入库";
this.form.remark = '';
},
/** 修改按钮操作 */
handleUpdate (row) {
this.loading = true;
this.reset();
const id = row.masterId || this.ids;
},
/** 提交按钮 */
submitForm () {
this.$refs["form"].validate((valid) => {
if (valid) {
this.buttonLoading = true;
if (this.form.masterId != null) {
updateOaWarehouseMaster(this.form)
.then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.drawer = false;
this.getList();
})
.finally(() => {
this.buttonLoading = false;
});
} else {
this.form.type = 1;
addOaWarehouseMaster(this.form)
.then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
// this.getList();
})
.finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 删除按钮操作 */
handleDelete (row) {
const ids = row.masterId || this.ids;
this.$modal
.confirm('是否确认删除仓库入库编号为"' + ids + '"的数据项?')
.then(() => {
this.loading = true;
return delOaWarehouseMaster(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
this.open = false;
this.drawer = false;
})
.catch(() => {
})
.finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport (row) {
this.exportParams.masterId = row.masterId;
this.download(
"oa/oaWarehouseTask/export",
{
...this.exportParams,
},
`采购单_${new Date().getTime()}.xlsx`
);
},
// 查看入库单独条目详情
showDetail (row) {
this.drawer = true;
this.searchItem = row;
this.loading = true;
getOaWarehouseTaskByMasterId(row.masterId).then((res) => {
this.currentMasterId = row.masterId;
this.warehouseTaskList = res.data;
this.loading = false;
});
},
// 修改采购单详情的备注
updateRemark (row) {
// 只提交remark字段避免无关字段被覆盖
updateOaWarehouseTask({
taskId: row.taskId,
remark: row.remark
}).then(() => {
this.$message.success('备注已保存');
});
},
// 修改采购单据的备注
updateMasterRemark (row) {
updateTaskRemark({
masterId: row.masterId,
remark: row.remark,
masterNum: row.masterNum,
requirementId: row.requirementId ? row.requirementId : 0,
}).then(() => {
this.$message.success('已保存');
});
},
},
};
</script>