bonus-ui/src/views/material/back/component/home.vue

606 lines
22 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item prop="startTime">
<el-date-picker
v-model="queryParams.startTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="开始日期"
@change="() => queryParams.endTime = ''"
style="width: 130px"
/>
</el-form-item>
<el-form-item>-</el-form-item>
<el-form-item prop="endTime">
<el-date-picker
v-model="queryParams.endTime"
value-format="yyyy-MM-dd"
type="date"
placeholder="结束日期"
:picker-options="{ disabledDate: (t) => t.getTime() < new Date(queryParams.startTime).getTime() - 86400000}"
style="width: 130px"
/>
</el-form-item>
<el-form-item prop="keyWord">
<el-input
maxlength="50"
v-model="queryParams.keyWord"
placeholder="请输入关键字"
clearable
style="width: 240px"
/>
</el-form-item>
<el-form-item prop="status">
<el-select
v-model="queryParams.status"
clearable
filterable
style="width: 240px"
placeholder="请选择退料状态"
>
<el-option
v-for="dict in dict.type.back_task_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
<!-- <el-option
v-for="item in taskStatusList"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option> -->
</el-select>
</el-form-item>
<el-form-item prop="unitId">
<treeselect
v-model="queryParams.unitId"
:options="unitList" :normalizer="normalizer"
:show-count="true" style="width: 240px" :disable-branch-nodes="true"
noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
placeholder="请选择退料单位" @select="unitChange"
/>
</el-form-item>
<el-form-item prop="proId">
<treeselect
v-model="queryParams.proId"
:options="proList" :normalizer="normalizer"
:show-count="true" style="width: 240px" :disable-branch-nodes="true"
noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
placeholder="请选择退料工程" @select="proChange"
/>
</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="primary" icon="el-icon-plus" plain size="mini" @click="handleAdd">退料接收</el-button>
</el-col>
<el-col :span="1.5">
<el-button icon="el-icon-download" size="mini" @click="handleExport" >导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button icon="el-icon-download" size="mini" @click="handleExportDetails" >导出退料明细</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" ></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="typeList" border @selection-change="handleSelectionChange" :max-height="650">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<!-- <el-table-column label="序号" align="center" width="80" type="index">
<template scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column> -->
<el-table-column align="center" label="序号" type="index" >
<template slot-scope="scope">
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="分公司" align="center" prop="impUnitName" width="140" />
<el-table-column label="退料单位" align="center" prop="unitName" width="180"/>
<el-table-column label="退料工程" align="center" prop="proName" width="180"/>
<el-table-column label="退料单号" align="center" prop="code" :show-overflow-tooltip="true" width="150"/>
<el-table-column label="物资类型" align="center" prop="typeName" :show-overflow-tooltip="true" width="200"/>
<el-table-column label="退料人" align="center" prop="backPerson" :show-overflow-tooltip="true" width="100"/>
<el-table-column label="退料人电话" align="center" prop="phone" :show-overflow-tooltip="true" width="120"/>
<el-table-column label="创建时间" align="center" prop="createTime" width="100"/>
<el-table-column label="创建人" align="center" prop="createBy" :show-overflow-tooltip="true" width="100"/>
<!-- <el-table-column label="协议号" align="center" prop="agreementCode" :show-overflow-tooltip="true"/> -->
<el-table-column label="状态" align="center" :show-overflow-tooltip="true" prop="taskStatus" width="100">
<template slot-scope="scope">
<dict-tag :options="dict.type.back_task_status" :value="scope.row.taskStatus"/>
<!-- <el-button type="text" v-if="scope.row.taskStatus == '0'">未完成</el-button>
<el-button type="text" style="color: #67c23a" v-if="scope.row.taskStatus == '2'">已完成</el-button>
<el-button type="text" style="color: #67c23a" v-if="scope.row.taskStatus == '1'">已驳回</el-button> -->
</template>
</el-table-column>
<el-table-column label="打印状态" align="center" prop="printStatus" :show-overflow-tooltip="true" width="100">
<template slot-scope="scope">
<div v-if="scope.row.printStatus==1">已打印</div>
<div v-if="scope.row.printStatus==0">未打印</div>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240" fixed="right">
<template slot-scope="scope">
<el-button size="mini" plain icon="el-icon-zoom-in"
@click="handleSee(scope.row)"
>查看</el-button>
<el-button size="mini" type="primary" plain icon="el-icon-edit"
v-if="scope.row.taskStatus!=2&&scope.row.taskStatus!=1" @click="handleUpdate(scope.row)"
>编辑</el-button>
<el-button size="mini" type="success" plain icon="el-icon-refresh"
v-if="scope.row.taskStatus!=2&&scope.row.taskStatus!=1" @click="handleSubmit(scope.row)"
>提交</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete"
v-if="scope.row.taskStatus!=2&&scope.row.taskStatus!=1"
@click="handleDelete(scope.row)"
>删除</el-button>
<el-button size="mini" type="info" icon="el-icon-zoom-in"
@click="handlePrint(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"
/>
<!-- 退料单 -->
<dialogFormByCq :dialogTitle="title" :isShowFlag.sync="isShowOneFlag" :priKey="priKey" :rowObj="rowObj"></dialogFormByCq>
<!-- 提交 -->
<el-dialog v-loading.fullscreen.lock="fullscreenLoading" :title="title" :visible.sync="openOne" append-to-body width="400px">
<div class="submit_box">
<div>
<i class="el-icon-circle-check" style="color: #ff9900; font-size: 30px"></i>
</div>
<div class="submit_box_title">
<div>{{ openTextOne }}</div>
<div>{{ openTextTwo }}</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="openOne=false">返回</el-button>
<el-button type="primary" @click="submitOpenOneForm()"
>确定</el-button>
</div>
</el-dialog>
<el-dialog v-loading.fullscreen.lock="fullscreenLoading" :title="title" :visible.sync="openTwo" append-to-body width="400px">
<div class="submit_box_two">
<div>
<i
class="el-icon-circle-check"
style="color: #00c196; font-size: 30px"
></i>
</div>
<div class="submit_box_title">{{ openTextThree }}</div>
</div>
<div slot="footer" class="dialog-footer"></div>
</el-dialog>
</div>
</template>
<script>
import {
getBackApplyList,
backApplyRemove,
submitBackApply
} from '@/api/back/index.js'
import {
getProData,
getUnitData,
} from '@/api/lease/outbound.js'
// import { getInfo, h } from '@/api/login'
// import {
// getUnitData,
// getProData,
// getAgreementInfoById,
// // getUseNumByTypeId
// } from '@/api/claimAndRefund/receive.js'
import dialogFormByCq from '@/views/material/back/component/dialogFormByCq.vue'
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { formatTime } from '@/utils/bonus'
export default {
name: '',
dicts: ['back_task_status'],
components: { dialogFormByCq,Treeselect },
data() {
return {
fullscreenLoading: false,
type: '',
isShowOneFlag: false,
priKey: '',
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 字典表格数据
typeList: [],
// 弹出层标题
title: '',
// 是否显示弹出层
open: false,
// 日期范围
dateRange: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
keyWord: '', //关键字
unitId: null, //单位id
lotId: '', //工程id
status: '', //状态
typeId: '', //工机具类型
time: '',
agreementCode: '', //协议
startTime: '',
endTime: '',
proId: null,
startTime: '',
endTime: '',
},
selectTreeProps: {
children: 'children',
label: 'name',
// multiple: false,
value: 'id',
// multiple: true,
},
unitId: null,
projectId: null,
dialogQueryParams: {
pageNum: 1,
pageSize: 10,
},
// 表单参数
form: {},
// 表单校验
rules: {
dictName: [
{
required: true,
message: '字典名称不能为空',
trigger: 'blur',
},
],
dictType: [
{
required: true,
message: '字典类型不能为空',
trigger: 'blur',
},
],
},
openOne: false,
openTwo: false,
openTextOne: '',
openTextTwo: '',
openTextThree: '',
companyId: '',
unitList: [],
proList: [],
taskStatusList: [
{
name: '待退料',
id: '37',
},
{
name: '退料已提交',
id: '38',
}
],
rowObj: {},
loadingType: '',
loadingTotal: 0,
loadingList: [],
}
},
created() {
const end = new Date()
let start = new Date()
start.setMonth(start.getMonth() - 1)
this.queryParams.startTime = this.format(start)
this.queryParams.endTime = this.format(end)
// 不在这里直接调用getList等字典数据加载完成后再调用
this.initSelectData()
},
methods: {
// 字典数据加载完成后的回调
onDictReady(dict) {
// 获取back_task_status的所有选项
const validOptions = dict.type.back_task_status || []
// 如果有有效选项,设置第一个为默认值
if (validOptions.length > 0) {
this.queryParams.status = validOptions[0].value
}
// 执行查询
this.getList()
},
format(date) {
const y = date.getFullYear()
const m = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${y}-${m}-${day}`
},
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children;
}
return {
id: node.id,
label: node.name,
children: node.children,
};
},
initSelectData() {
this.GetUnitData()
this.GetProData()
},
// 获取 来往单位 列表数据
async GetUnitData() {
const params = {
// projectId: this.queryParams.proId /* */,
}
const res = await getUnitData(params)
this.unitList = res.data
},
unitChange(val){
setTimeout(()=>{
this.GetProData()
},500)
},
// 获取 工程名称 列表数据
async GetProData() {
const params = {
unitId: this.queryParams.unitId,
}
const res = await getProData(params)
this.proList = res.data;
this.queryParams.proId=null
},
proChange(val){
setTimeout(()=>{
this.GetUnitData()
},500)
},
/** 查询列表 startTime,结束日期endTime */
async getList() {
this.loading = true
// if (this.queryParams.time && this.queryParams.time.length > 0) {
// this.queryParams.startTime = this.queryParams.time[0]
// this.queryParams.endTime = this.queryParams.time[1]
// }else{
// this.queryParams.startTime=undefined
// this.queryParams.endTime=undefined
// }
try {
let params = {
companyId: this.companyId,
...this.queryParams,
}
const res = await getBackApplyList(params)
this.typeList = res.data.rows
this.total = res.data.total
this.loading = false
} catch (error) {}
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
const end = new Date()
let start = new Date()
start.setMonth(start.getMonth() - 1)
this.queryParams.startTime = this.format(start)
this.queryParams.endTime = this.format(end)
// this.resetForm("queryForm");
this.unitId=null;
this.projectId=null;
this.queryParams.unitId = ""
this.queryParams.proId = ""
this.$refs.queryForm.resetFields()
this.initSelectData()
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.dictId)
this.single = selection.length != 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.$emit('returnApply')
},
/** 修改按钮操作 */
handleUpdate(row) {
this.$emit("returnEdit",row.id);
},
/** 查看按钮操作 */
handleSee(row) {
this.$emit("queryReturn",row.id);
},
// 退料单
handleUpdateOrder() {
this.title = '查看'
this.isShowOneFlag = true
},
// // 提交
// handleSubmit() {
// this.title = '确认操作'
// this.openTextOne = '确认提交退料么?'
// this.openTextTwo = '确认提交退料么?'
// this.openOne = true
// },
// submitOpenOneForm() {
// this.openTextThree = '提交成功!'
// this.openTwo = true
// },
handleSubmit(row){
console.log(row)
this.$modal.confirm('是否确认提交所选择的退料任务?') .then(() => {
let param = {
id:row.id,
taskId:row.taskId,
proId:row.proId,
unitId:row.unitId,
}
submitBackApply(param).then((res) => {
this.getList()
this.$message.success('操作成功!')
})
}).catch(() => {
})
},
/** 删除按钮操作 */
handleDelete(row) {
// let param = {
// id:row.id+ '',
// }
this.$modal
.confirm('是否确认删除所选择的退料任务?')
.then(() => {
return backApplyRemove({id:row.id})
})
.then(() => {
this.getList()
this.$message.success('操作成功!')
})
.catch(() => {
})
},
handlePrint(row) {
this.isShowOneFlag = true
this.rowObj = row
},
/** 导出按钮操作 */
handleExport() {
// const formatTime = (date) => {
// const year = date.getFullYear();
// const month = String(date.getMonth() + 1).padStart(2, '0');
// const day = String(date.getDate()).padStart(2, '0');
// const hours = String(date.getHours()).padStart(2, '0');
// const minutes = String(date.getMinutes()).padStart(2, '0');
// const seconds = String(date.getSeconds()).padStart(2, '0');
// return `${year}${month}${day}_${hours}${minutes}${seconds}`;
// };
const currentTime = formatTime(new Date())
this.download(
'material/back_apply_info/export',
{
...this.queryParams,
// startTime: this.queryParams.time[0],
// endTime: this.queryParams.time[1]
},
`退料申请单_${currentTime}.xlsx`,
)
},
handleExportDetails() {
const currentTime = formatTime(new Date())
this.download(
'material/back_apply_info/exportBackDetailsList',
{
...this.queryParams,
// startTime: this.queryParams.time[0],
// endTime: this.queryParams.time[1]
},
`退料明细_${currentTime}.xlsx`,
)
},
},
}
</script>
<style lang="scss" scoped>
.submit_box {
display: flex;
justify-content: flex-start;
align-items: center;
.submit_box_title {
display: flex;
flex-direction: column;
margin-left: 15px;
:first-child {
font-size: 14px;
font-weight: 600;
}
:last-child {
margin-top: 6px;
font-size: 12px;
}
}
}
.submit_box_two {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
margin-left: 30%;
.submit_box_title {
display: flex;
flex-direction: column;
margin-left: 10px;
font-size: 18px;
font-weight: 600;
}
}
::v-deep.el-table .fixed-width .el-button--mini {
width: 60px !important;
margin-bottom: 10px;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
align-items: center;
}
</style>