<template>
|
<div class="app-container">
|
<el-form
|
class="responsive-form"
|
:model="queryParams"
|
ref="queryRef"
|
:inline="true"
|
label-width="68px"
|
>
|
<el-row type="flex" justify="left">
|
<el-col :span="6">
|
<el-form-item label="选择月份" prop="description">
|
<el-date-picker
|
clearable
|
v-model="queryParams.date"
|
type="month"
|
value-format="YYYY-MM"
|
placeholder="选择月份"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="18" style="text-align: right">
|
<el-form-item class="column-with-margin">
|
<el-button type="primary" icon="Search" @click="handleQuery"
|
>查询</el-button
|
>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div class="box_container">
|
<div class="title_text">管路规划产能</div>
|
<div class="tabel_container">
|
<!-- <HxlhTable
|
style="width: 100%"
|
:columns="columns"
|
:data="routePlanList"
|
:loading="loading"
|
:height="height"
|
:editConfig="editConfig"
|
>
|
<template #edit_role="{ row }">
|
<vxe-select
|
v-model="row.dayProduceType"
|
:options="dayProduceTypeOptions"
|
filterable
|
></vxe-select>
|
</template>
|
</HxlhTable> -->
|
<vxe-table
|
border
|
ref="xTable"
|
show-overflow
|
:loading="loading"
|
:height="height"
|
:edit-config="{ mode: 'row', trigger: 'click', showStatus: true }"
|
:data="routePlanList"
|
@cell-click="cellClickEvent"
|
>
|
<vxe-column field="processName" title="标准工序名称" min-width="150">
|
</vxe-column>
|
<!-- :edit-render="sexEditRender" -->
|
<vxe-column
|
field="dayProduceType"
|
title="日产出类型"
|
min-width="160"
|
:edit-render="{ }"
|
>
|
<template #edit="{ row }">
|
<vxe-select v-model="row.dayProduceType" :options="dayProduceTypeOptions"></vxe-select>
|
</template>
|
<template #default="{ row }">
|
<span>{{ formatTypeLabel([row.dayProduceType]) }}</span>
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="dayProduceNum"
|
title="日产出数量"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input-number
|
v-model="row.dayProduceNum"
|
size="mini"
|
/>
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="dayProduceUnit"
|
title="日产出单位"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input v-model="row.dayProduceUnit" />
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="personnelNumber"
|
title="人员数量"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input-number
|
v-model="row.personnelNumber"
|
/>
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="dayProduceAllNum"
|
title="日产出总数量"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input-number
|
v-model="row.dayProduceAllNum"
|
disabled
|
/>
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="days"
|
title="天数"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input-number v-model="row.days" />
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="monthProduceAllNum"
|
title="月产出数量"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input-number v-model="row.monthProduceAllNum" disabled/>
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="remark"
|
title="备注"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input type="textarea" v-model="row.remark" />
|
</template>
|
</vxe-column>
|
</vxe-table>
|
</div>
|
</div>
|
<div class="box_container">
|
<div class="title_text">气柜规划产能</div>
|
<div class="tabel_container">
|
<!-- <HxlhTable
|
style="width: 100%"
|
:columns="columns"
|
:data="gasPlanList"
|
:loading="loading"
|
:height="height"
|
>
|
</HxlhTable> -->
|
<vxe-table
|
border
|
ref="xTable"
|
show-overflow
|
:loading="loading"
|
:height="height"
|
:edit-config="{ mode: 'row', trigger: 'click', showStatus: true }"
|
:data="gasPlanList"
|
@cell-click="cellClickEvent"
|
>
|
<vxe-column field="processName" title="标准工序名称" min-width="150">
|
</vxe-column>
|
<!-- :edit-render="sexEditRender" -->
|
<vxe-column
|
field="dayProduceType"
|
title="日产出类型"
|
min-width="160"
|
:edit-render="{ }"
|
>
|
<template #edit="{ row }">
|
<vxe-select v-model="row.dayProduceType" :options="dayProduceTypeOptions"></vxe-select>
|
</template>
|
<template #default="{ row }">
|
<span>{{ formatTypeLabel([row.dayProduceType]) }}</span>
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="dayProduceNum"
|
title="日产出数量"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input-number
|
v-model="row.dayProduceNum"
|
size="mini"
|
/>
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="dayProduceUnit"
|
title="日产出单位"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input v-model="row.dayProduceUnit" />
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="personnelNumber"
|
title="人员数量"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input-number
|
v-model="row.personnelNumber"
|
/>
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="dayProduceAllNum"
|
title="日产出总数量"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input-number
|
v-model="row.dayProduceAllNum"
|
/>
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="days"
|
title="天数"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input-number v-model="row.days" />
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="monthProduceAllNum"
|
title="月产出数量"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input-number v-model="row.monthProduceAllNum" />
|
</template>
|
</vxe-column>
|
<vxe-column
|
field="remark"
|
title="备注"
|
min-width="200"
|
:edit-render="{ autoFocus: 'input' }"
|
>
|
<template #edit="{ row }">
|
<el-input type="textarea" v-model="row.remark" />
|
</template>
|
</vxe-column>
|
</vxe-table>
|
<div class="btn_center">
|
<el-button type="primary" @click="handleSave">保存</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- -->
|
</template>
|
<script setup>
|
import HxlhTable from "@/components/HxlhTable";
|
import { ElMessage } from "element-plus";
|
import { listGasPlan, getGasPlanSave } from "@/api/mainPlan/gasPlanning";
|
const height = ref(document.documentElement.clientHeight - 400 + "px;");
|
const loading = ref(false);
|
const data = reactive({
|
queryParams: {
|
date: "",
|
},
|
});
|
const { queryParams } = toRefs(data);
|
const gasPlanList = ref([]);
|
const routePlanList = ref([]);
|
const dayProduceTypeOptions = ref([
|
{ label: "单人日产出", value: "1" },
|
{ label: "固定日产出", value: "2" },
|
]);
|
const formatTypeLabel = (list) => {
|
if (list) {
|
return list.map(type => {
|
const item = dayProduceTypeOptions.value.find(item => item.value === type)
|
return item ? item.label : type
|
}).join(',')
|
}
|
return ''
|
}
|
// 表格配置
|
// const columns = ref([
|
// // {
|
// // title: "规划年份",
|
// // field: "year",
|
// // width: 150,
|
// // },
|
// // {
|
// // title: "规划月份",
|
// // field: "month",
|
// // },
|
// // {
|
// // title: "专业",
|
// // field: "major",
|
// // width: 100,
|
// // },
|
// {
|
// title: "标准工序名称",
|
// field: "processName",
|
// width: 100,
|
// },
|
// {
|
// title: "日产出类型",
|
// field: "dayProduceType",
|
// width: 140,
|
// editRender: {},
|
// slots: { edit: "edit_role", default: "default_role" },
|
// },
|
// {
|
// title: "日产出数量",
|
// field: "dayProduceNum",
|
// width: 140,
|
// // editRender: { autoFocus: "input" },
|
// // slots: { edit: "edit_name", default: "default_name" },
|
// },
|
// {
|
// title: "日产出数量单位",
|
// field: "dayProduceUnit",
|
// width: 140,
|
// },
|
// {
|
// title: "人员数量",
|
// field: "personnelNumber",
|
// width: 140,
|
// type: "html",
|
// },
|
// {
|
// title: "日产出总数量",
|
// field: "dayProduceAllNum",
|
// width: 140,
|
// type: "html",
|
// },
|
// {
|
// title: "天数",
|
// field: "days",
|
// width: 120,
|
// // format: 'YYYY-MM-DD'
|
// },
|
// {
|
// title: "月产出总数量",
|
// field: "monthProduceAllNum",
|
// width: 140,
|
// type: "html",
|
// },
|
// {
|
// title: "备注",
|
// field: "remark",
|
// width: 140,
|
// type: "html",
|
// },
|
// ]);
|
async function getRouteList(year, month) {
|
const res = await listGasPlan({
|
major: "管路",
|
year,
|
month,
|
});
|
console.log(res.rows, "getList");
|
routePlanList.value = res.rows;
|
routePlanList.value = routePlanList.value.map((item, index) => {
|
return {
|
...item,
|
dayProduceType: item.dayProduceType == null ? "" : item.dayProduceType,
|
dayProduceNum: item.dayProduceNum == null ? "0" : item.dayProduceNum,
|
dayProduceUnit: item.dayProduceUnit == null ? "个" : item.dayProduceUnit,
|
personnelNumber:
|
item.personnelNumber == null ? "1" : item.personnelNumber,
|
dayProduceAllNum:
|
item.dayProduceAllNum == null ? "0" : item.dayProduceNum*item.personnelNumber,
|
days: item.days == null ? "22" : item.days,
|
monthProduceAllNum:
|
item.monthProduceAllNum == null ? "0" : item.dayProduceAllNum*item.days,
|
};
|
});
|
loading.value = false;
|
}
|
async function getGasList(year, month) {
|
const res = await listGasPlan({
|
major: "气体",
|
year,
|
month,
|
});
|
console.log(res.rows, "getList");
|
gasPlanList.value = res.rows;
|
gasPlanList.value = gasPlanList.value.map((item, index) => {
|
return {
|
...item,
|
dayProduceType: item.dayProduceType == null ? "" : item.dayProduceType,
|
dayProduceNum: item.dayProduceNum == null ? "0" : item.dayProduceNum,
|
dayProduceUnit: item.dayProduceUnit == null ? "个" : item.dayProduceUnit,
|
personnelNumber:
|
item.personnelNumber == null ? "1" : item.personnelNumber,
|
dayProduceAllNum:
|
item.dayProduceAllNum == null ? "0" : item.dayProduceNum*item.personnelNumber,
|
days: item.days == null ? "22" : item.days,
|
monthProduceAllNum:
|
item.monthProduceAllNum == null ? "0" : item.dayProduceAllNum*item.days,
|
};
|
});
|
loading.value = false;
|
}
|
function cellClickEvent ({ row, column }){
|
console.log(column,row)
|
row.dayProduceAllNum = row.dayProduceNum*row.personnelNumber
|
row.monthProduceAllNum = row.dayProduceAllNum*row.days
|
}
|
function handleQuery() {
|
console.log(queryParams.value.date, "scsciciisc");
|
const year = queryParams.value.date.split("-")[0];
|
const month = parseInt(queryParams.value.date.split("-")[1]);
|
getRouteList(year, month);
|
getGasList(year, month);
|
}
|
async function handleSave() {
|
const year = queryParams.value.date.split("-")[0];
|
const month = parseInt(queryParams.value.date.split("-")[1]);
|
gasPlanList.value = gasPlanList.value.map((item)=>{
|
return {
|
...item,
|
major: "气体",
|
year,
|
month
|
}
|
})
|
routePlanList.value = routePlanList.value.map((item)=>{
|
return {
|
...item,
|
major: "管路",
|
year,
|
month
|
}
|
})
|
const res = await getGasPlanSave([
|
...gasPlanList.value,
|
...routePlanList.value
|
])
|
ElMessage({
|
message: "数据保存成功",
|
type: "success",
|
});
|
handleQuery()
|
console.log(res,"akiwjciwj")
|
}
|
onMounted(() => {
|
// getRouteList();
|
// getGasList();
|
});
|
</script>
|
<style lang="scss" scoped>
|
.box_container {
|
width: 100%;
|
margin: 20px auto;
|
background: #fff;
|
border-radius: 5px;
|
box-shadow: 1px 1px 1px 4px#f1f1f1;
|
.title_text {
|
padding-top: 20px;
|
margin-left: 20px;
|
}
|
.tabel_container {
|
width: 98%;
|
margin: 20px auto;
|
}
|
}
|
.btn_center{
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-top:20px;
|
padding-bottom:20px;
|
}
|
</style>
|
