<template>
|
<div class="app-container">
|
<el-form
|
class="responsive-form"
|
:model="queryParams"
|
ref="queryRef"
|
:inline="true"
|
label-position="left"
|
>
|
<el-row type="flex" justify="left">
|
<el-col :span="8">
|
<el-form-item
|
:style="{ width: '100%' }"
|
:label="$t('plan.query.selectMonth')"
|
prop="description"
|
>
|
<el-date-picker
|
clearable
|
v-model="queryParams.date"
|
type="month"
|
value-format="YYYY-MM"
|
:placeholder="$t('plan.query.selectMonth')"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item :label="$t('basic.table.applicableFactories')" style="width: 100%" prop="plant">
|
<el-select
|
clearable
|
v-model="queryParams.applicableFactory"
|
:placeholder="$t('basic.table.applicableFactories')"
|
>
|
<el-option
|
v-for="item in aps_factory"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8" style="text-align: right">
|
<el-form-item class="column-with-margin">
|
<el-button type="primary" icon="Search" @click="handleQuery">{{
|
$t("common.common.query")
|
}}</el-button>
|
<el-button icon="Refresh" @click="resetQuery">{{
|
$t("common.common.reset")
|
}}</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<!-- <div class="box_container"> -->
|
<el-row v-if="!clickedTableRef">
|
<!-- <el-col :span="!clickedTableRef?22:20">
|
<div class="title_text">{{$t('plan.title.pipePlanCapacity')}}</div>
|
</el-col> -->
|
<el-col
|
:span="24"
|
style="text-align: right; margin-bottom: 10px"
|
>
|
<el-button class="title_btn" type="default" @click="editRowEvent">{{
|
$t("common.common.edit")
|
}}</el-button>
|
</el-col>
|
</el-row>
|
<el-row v-if="clickedTableRef">
|
<el-col :span="24" style="text-align: right; margin-bottom: 10px" >
|
<el-button
|
class="title_btn"
|
type="primary"
|
@click="saveRowEvent"
|
v-hasPermi="['aps:gasPipelineCapacityPlan:add']"
|
>
|
{{ $t("common.common.save") }}
|
</el-button>
|
<el-button
|
class="title_btn ml20"
|
type="default"
|
@click="handleCancleStaus"
|
>{{ $t("common.common.cancel") }}</el-button
|
>
|
</el-col>
|
</el-row>
|
<vxe-table
|
border
|
ref="tableRef"
|
show-overflow
|
:loading="loading"
|
:height="height"
|
:column-config="{ resizable: true, useKey: true }"
|
:data="routePlanList"
|
size="small"
|
>
|
<vxe-column
|
field="processName"
|
:width="locale === 'zh' ? '150px' : '200px'"
|
:title="$t('plan.table.satndardProcessName')"
|
fixed="left"
|
>
|
</vxe-column>
|
<vxe-column
|
field="orgCode"
|
:width="locale === 'zh' ? '150px' : '200px'"
|
:title="$t('plan.table.applicableFactories')"
|
fixed="left"
|
>
|
<template #default="{ row }">
|
{{ formatTypeLabelPlant([row.orgCode]) }}
|
</template>
|
</vxe-column>
|
<vxe-column
|
:width="locale === 'zh' ? '150px' : '200px'"
|
field="dayProduceType"
|
:title="$t('plan.table.dayProduceType')"
|
>
|
<!-- <template #edit="{ row }">
|
<el-select
|
clearable
|
v-model="row.dayProduceType"
|
style="width: 140px"
|
>
|
<el-option
|
v-for="type in dayProduceTypeOptions"
|
:key="type.value"
|
:label="type.label"
|
:value="type.value"
|
>
|
</el-option>
|
</el-select>
|
</template> -->
|
<template #default="{ row }">
|
<div v-if="!clickedTableRef">
|
<span>{{ formatTypeLabel([row.dayProduceType]) }}</span>
|
</div>
|
<div v-else>
|
<el-select
|
clearable
|
v-model="row.dayProduceType"
|
style="width: 140px"
|
@change="handlechangeDayproduceType($event, row)"
|
>
|
<el-option
|
v-for="type in dayProduceTypeOptions"
|
:key="type.value"
|
:label="type.label"
|
:value="type.value"
|
>
|
</el-option>
|
</el-select>
|
</div>
|
</template>
|
</vxe-column>
|
<vxe-column
|
:width="locale === 'zh' ? '180px' : '200px'"
|
field="dayProduceNum"
|
:title="$t('plan.table.dayProduceNum')"
|
>
|
<!-- <template #edit="{ row }">
|
<el-input-number v-model="row.dayProduceNum" size="mini" />
|
</template> -->
|
<template #default="{ row }">
|
<div v-if="!clickedTableRef">
|
<span>{{ row.dayProduceNum }}</span>
|
</div>
|
<div v-else>
|
<el-input-number
|
@change="cellClickEvent($event, row)"
|
v-model="row.dayProduceNum"
|
size="mini"
|
/>
|
</div>
|
</template>
|
</vxe-column>
|
<vxe-column
|
:width="locale === 'zh' ? '150px' : '200px'"
|
field="dayProduceUnit"
|
:title="$t('plan.table.dayProduceUnit')"
|
>
|
<!-- <template #edit="{ row }">
|
<el-input v-model="row.dayProduceUnit" />
|
</template> -->
|
<template #default="{ row }">
|
<div v-if="!clickedTableRef">
|
<span>{{ row.dayProduceUnit }}</span>
|
</div>
|
<div v-else>
|
<el-input v-model="row.dayProduceUnit" />
|
</div>
|
</template>
|
</vxe-column>
|
<vxe-column
|
:width="locale === 'zh' ? '180px' : '200px'"
|
field="personnelNumber"
|
:title="$t('plan.table.personnelNumber')"
|
>
|
<!-- <template #edit="{ row }">
|
<el-input-number v-model="row.personnelNumber" />
|
</template> -->
|
<template #default="{ row }">
|
<div v-if="!clickedTableRef">
|
<span>{{ row.personnelNumber }}</span>
|
</div>
|
<div v-else>
|
<el-input-number
|
@change="cellClickEvent($event, row)"
|
v-model="row.personnelNumber"
|
/>
|
</div>
|
</template>
|
</vxe-column>
|
<vxe-column
|
:width="locale === 'zh' ? '180px' : '200px'"
|
field="dayProduceAllNum"
|
:title="$t('plan.table.dayProduceAllNum')"
|
>
|
<!-- <template #edit="{ row }">
|
<el-input-number v-model="row.dayProduceAllNum" disabled />
|
</template> -->
|
<template #default="{ row }">
|
<div v-if="!clickedTableRef">
|
<span>{{ row.dayProduceAllNum }}</span>
|
</div>
|
<div v-else>
|
<el-input-number v-model="row.dayProduceAllNum" disabled />
|
</div>
|
</template>
|
</vxe-column>
|
<vxe-column
|
:width="locale === 'zh' ? '180px' : '200px'"
|
field="days"
|
:title="$t('plan.table.days')"
|
>
|
<!-- <template #edit="{ row }">
|
<el-input-number v-model="row.days" />
|
</template> -->
|
<template #default="{ row }">
|
<div v-if="!clickedTableRef">
|
<span>{{ row.days }}</span>
|
</div>
|
<div v-else>
|
<el-input-number
|
@change="cellClickEvent($event, row)"
|
v-model="row.days"
|
/>
|
</div>
|
</template>
|
</vxe-column>
|
<vxe-column
|
:width="locale === 'zh' ? '180px' : '200px'"
|
field="monthProduceAllNum"
|
:title="$t('plan.table.monthProduceAllNum')"
|
>
|
<!-- <template #edit="{ row }">
|
<el-input-number v-model="row.monthProduceAllNum" disabled />
|
</template> -->
|
<template #default="{ row }">
|
<div v-if="!clickedTableRef">
|
<span>{{ row.monthProduceAllNum }}</span>
|
</div>
|
<div v-else>
|
<el-input-number v-model="row.monthProduceAllNum" disabled />
|
</div>
|
</template>
|
</vxe-column>
|
<vxe-column
|
:width="locale === 'zh' ? '150px' : '200px'"
|
field="remark"
|
:title="$t('plan.table.remark')"
|
>
|
<!-- :edit-render="{ autoFocus: 'input' }" -->
|
<!-- <template #edit="{ row }">
|
<el-input
|
type="text"
|
v-model="row.remark"
|
/>
|
</template> -->
|
<template #default="{ row }">
|
<div v-if="!clickedTableRef">
|
<span>{{ row.remark }}</span>
|
</div>
|
<div v-else>
|
<el-input type="text" v-model="row.remark" />
|
</div>
|
</template>
|
</vxe-column>
|
<!-- <vxe-column title="操作" width="200" fixed="right">
|
<template #default="{ row }">
|
<template v-if="hasEditStatus(row)">
|
<el-button
|
@click="saveRowEvent(row)"
|
v-hasPermi="['aps:gasPipelineCapacityPlan:add']"
|
>保存</el-button
|
>
|
<el-button @click="cancelRowEvent()">取消</el-button>
|
</template>
|
<template v-else>
|
<el-button @click="editRowEvent(row)">编辑</el-button>
|
</template>
|
</template>
|
</vxe-column> -->
|
</vxe-table>
|
<!-- </div> -->
|
<!-- </div> -->
|
</div>
|
</template>
|
<script setup name="GasPlanning">
|
// import { ElMessage } from "element-plus";
|
import { listGasPlan, getGasPlanSave } from "@/api/mainPlan/gasPlanning";
|
const height = ref(document.documentElement.clientHeight - 230 + "px;");
|
import { useI18n } from "vue-i18n"; //要在js中使用国际化
|
const { t, locale } = useI18n();
|
const { proxy } = getCurrentInstance();
|
const { aps_factory } = proxy.useDict("aps_factory");
|
const loading = ref(false);
|
const clickedQuery = ref(false);
|
const clickedQuery2 = ref(false);
|
const data = reactive({
|
queryParams: {
|
date: "",
|
applicableFactory:""
|
},
|
});
|
const tableRef = ref();
|
const tableRef1 = ref();
|
const { queryParams } = toRefs(data);
|
const gasPlanList = ref([]);
|
const routePlanList = ref([]);
|
const dayProduceTypeOptions = ref([
|
{ label: "单人日产出", value: "1" },
|
{ label: "固定日产出", value: "2" },
|
]);
|
const clickedTableRef = ref(false);
|
const clickedTableRefGas = ref(false);
|
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 formatTypeLabelPlant = (list) => {
|
if (list) {
|
return list
|
.map((type) => {
|
const item = aps_factory.value.find(
|
(item) => item.value === type
|
);
|
return item ? item.label : type;
|
})
|
.join("");
|
}
|
return "";
|
};
|
const editRowEvent = () => {
|
clickedTableRef.value = true;
|
};
|
const saveRowEvent = (row) => {
|
if (!queryParams.value.date) {
|
ElMessage({
|
message: "请选择年月",
|
type: "error",
|
});
|
return;
|
}
|
const $table = tableRef.value;
|
if ($table) {
|
$table.clearEdit().then(() => {
|
loading.value = true;
|
// setTimeout(() => {
|
// loading.value = false
|
// VxeUI.modal.message({ content: `保存成功！name=${row.name}`, status: 'success' })
|
// }, 300)
|
handleSave("管路");
|
clickedTableRef.value = false;
|
});
|
}
|
};
|
// const handleCancelAllStatus = () => {
|
// handleCancleStaus();
|
// handleCancleStausGas();
|
// };
|
const handleCancleStaus = () => {
|
clickedTableRef.value = false;
|
if (!clickedQuery.value) {
|
return;
|
}
|
const year = queryParams.value.date.split("-")[0];
|
const month = parseInt(queryParams.value.date.split("-")[1]);
|
getRouteList(year, month);
|
};
|
// const handleCancleStausGas = () => {
|
// clickedTableRefGas.value = false;
|
// if (!clickedQuery2.value) {
|
// return;
|
// }
|
// const year = queryParams.value.date.split("-")[0];
|
// const month = parseInt(queryParams.value.date.split("-")[1]);
|
// getGasList(year, month);
|
// };
|
async function getRouteList(year, month) {
|
loading.value = true;
|
const res = await listGasPlan({
|
major: "管路",
|
year,
|
month,
|
orgCode:queryParams.value.applicableFactory
|
});
|
routePlanList.value = res.rows;
|
routePlanList.value = routePlanList.value.map((item, index) => {
|
return {
|
...item,
|
dayProduceType: item.dayProduceType == null ? "1" : 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(row,column,"cellClickEvent")
|
// if(row.dayProduceType==="1"){
|
// row.dayProduceAllNum = row.dayProduceNum * row.personnelNumber;
|
// }else{
|
|
// row.dayProduceAllNum = row.dayProduceNum
|
// }
|
// row.monthProduceAllNum = row.dayProduceAllNum * row.days;
|
// }
|
function cellClickEvent(e, row) {
|
if (row.dayProduceType === "1") {
|
row.dayProduceAllNum = row.dayProduceNum * row.personnelNumber;
|
} else {
|
row.dayProduceAllNum = row.dayProduceNum;
|
}
|
row.monthProduceAllNum = row.dayProduceAllNum * row.days;
|
}
|
function handlechangeDayproduceType(e, row) {
|
row.dayProduceAllNum = "0";
|
row.monthProduceAllNum = "0";
|
if (e == "1") {
|
row.dayProduceAllNum = row.dayProduceNum * row.personnelNumber;
|
} else if (e == "2") {
|
row.dayProduceAllNum = row.dayProduceNum;
|
}
|
row.monthProduceAllNum = row.dayProduceAllNum * row.days;
|
}
|
function handleQuery() {
|
if (!queryParams.value.date) {
|
ElMessage({
|
message: "请选择年月",
|
type: "error",
|
});
|
return;
|
}
|
const year = queryParams.value.date.split("-")[0];
|
const month = parseInt(queryParams.value.date.split("-")[1]);
|
getRouteList(year, month);
|
// getGasList(year, month);
|
clickedQuery.value = true;
|
// clickedQuery2.value = true;
|
}
|
function resetQuery() {
|
queryParams.value.date = "";
|
queryParams.value.applicableFactory = "";
|
clickedQuery.value = false;
|
// clickedQuery2.value = false;
|
gasPlanList.value = [];
|
routePlanList.value = [];
|
}
|
async function handleSave(major) {
|
const year = queryParams.value.date.split("-")[0];
|
const month = parseInt(queryParams.value.date.split("-")[1]);
|
if (major === "管路") {
|
routePlanList.value = routePlanList.value.map((item) => {
|
return {
|
...item,
|
major: "管路",
|
year,
|
month,
|
orgCode: queryParams.value.applicableFactory,
|
};
|
});
|
const res = await getGasPlanSave([...routePlanList.value]);
|
if(res.code == 200){
|
ElMessage({
|
message: "数据保存成功",
|
type: "success",
|
});
|
loading.value = false;
|
handleQuery();
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.column-with-margin {
|
margin-right: 0px;
|
}
|
.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;
|
}
|
.title_btn {
|
margin-top: 20px;
|
&.ml20 {
|
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>
|
