| | |
| | | </HxlhTable> --> |
| | | <vxe-table |
| | | border |
| | | ref="xTable" |
| | | ref="tableRef" |
| | | show-overflow |
| | | :loading="loading" |
| | | :height="height" |
| | | :edit-config="{ mode: 'row', trigger: 'click', showStatus: true }" |
| | | :edit-config="{ trigger: 'manual', mode: 'row', showStatus: true }" |
| | | :data="routePlanList" |
| | | @cell-click="cellClickEvent" |
| | | > |
| | |
| | | field="dayProduceType" |
| | | title="日产出类型" |
| | | min-width="160" |
| | | :edit-render="{ }" |
| | | :edit-render="{}" |
| | | > |
| | | <template #edit="{ row }"> |
| | | <vxe-select v-model="row.dayProduceType" :options="dayProduceTypeOptions"></vxe-select> |
| | | <vxe-select |
| | | v-model="row.dayProduceType" |
| | | :options="dayProduceTypeOptions" |
| | | ></vxe-select> |
| | | </template> |
| | | <template #default="{ row }"> |
| | | <span>{{ formatTypeLabel([row.dayProduceType]) }}</span> |
| | |
| | | :edit-render="{ autoFocus: 'input' }" |
| | | > |
| | | <template #edit="{ row }"> |
| | | <el-input-number |
| | | v-model="row.dayProduceNum" |
| | | size="mini" |
| | | /> |
| | | <el-input-number v-model="row.dayProduceNum" size="mini" /> |
| | | </template> |
| | | </vxe-column> |
| | | <vxe-column |
| | |
| | | :edit-render="{ autoFocus: 'input' }" |
| | | > |
| | | <template #edit="{ row }"> |
| | | <el-input-number |
| | | v-model="row.personnelNumber" |
| | | /> |
| | | <el-input-number v-model="row.personnelNumber" /> |
| | | </template> |
| | | </vxe-column> |
| | | <vxe-column |
| | |
| | | :edit-render="{ autoFocus: 'input' }" |
| | | > |
| | | <template #edit="{ row }"> |
| | | <el-input-number |
| | | v-model="row.dayProduceAllNum" |
| | | disabled |
| | | /> |
| | | <el-input-number v-model="row.dayProduceAllNum" disabled /> |
| | | </template> |
| | | </vxe-column> |
| | | <vxe-column |
| | |
| | | :edit-render="{ autoFocus: 'input' }" |
| | | > |
| | | <template #edit="{ row }"> |
| | | <el-input-number v-model="row.monthProduceAllNum" disabled/> |
| | | <el-input-number v-model="row.monthProduceAllNum" disabled /> |
| | | </template> |
| | | </vxe-column> |
| | | <vxe-column |
| | |
| | | <template #edit="{ row }"> |
| | | <el-input type="textarea" v-model="row.remark" /> |
| | | </template> |
| | | </vxe-column> |
| | | <vxe-column title="操作" width="200" fixed="right"> |
| | | <!-- <template #default="{ row }"> |
| | | <vxe-button @click="handleSave(row)" :loading="row.loading" |
| | | >保存</vxe-button |
| | | > --> |
| | | <template #default="{ row }"> |
| | | <template v-if="hasEditStatus(row)"> |
| | | <el-button @click="saveRowEvent(row)" size="small">保存</el-button> |
| | | <el-button @click="cancelRowEvent()" size="small">取消</el-button> |
| | | </template> |
| | | <template v-else> |
| | | <el-button @click="editRowEvent(row)" size="small">编辑</el-button> |
| | | </template> |
| | | </template> |
| | | <!-- </template> --> |
| | | </vxe-column> |
| | | </vxe-table> |
| | | </div> |
| | |
| | | :height="height" |
| | | > |
| | | </HxlhTable> --> |
| | | <vxe-table |
| | | <vxe-table |
| | | border |
| | | ref="xTable" |
| | | ref="tableRef1" |
| | | show-overflow |
| | | :loading="loading" |
| | | :loading="loading2" |
| | | :height="height" |
| | | :edit-config="{ mode: 'row', trigger: 'click', showStatus: true }" |
| | | :data="gasPlanList" |
| | |
| | | field="dayProduceType" |
| | | title="日产出类型" |
| | | min-width="160" |
| | | :edit-render="{ }" |
| | | :edit-render="{}" |
| | | > |
| | | <template #edit="{ row }"> |
| | | <vxe-select v-model="row.dayProduceType" :options="dayProduceTypeOptions"></vxe-select> |
| | | <vxe-select |
| | | v-model="row.dayProduceType" |
| | | :options="dayProduceTypeOptions" |
| | | ></vxe-select> |
| | | </template> |
| | | <template #default="{ row }"> |
| | | <span>{{ formatTypeLabel([row.dayProduceType]) }}</span> |
| | |
| | | :edit-render="{ autoFocus: 'input' }" |
| | | > |
| | | <template #edit="{ row }"> |
| | | <el-input-number |
| | | v-model="row.dayProduceNum" |
| | | size="mini" |
| | | /> |
| | | <el-input-number v-model="row.dayProduceNum" size="mini" /> |
| | | </template> |
| | | </vxe-column> |
| | | <vxe-column |
| | |
| | | :edit-render="{ autoFocus: 'input' }" |
| | | > |
| | | <template #edit="{ row }"> |
| | | <el-input-number |
| | | v-model="row.personnelNumber" |
| | | /> |
| | | <el-input-number v-model="row.personnelNumber" /> |
| | | </template> |
| | | </vxe-column> |
| | | <vxe-column |
| | |
| | | :edit-render="{ autoFocus: 'input' }" |
| | | > |
| | | <template #edit="{ row }"> |
| | | <el-input-number |
| | | v-model="row.dayProduceAllNum" |
| | | /> |
| | | <el-input-number v-model="row.dayProduceAllNum" /> |
| | | </template> |
| | | </vxe-column> |
| | | <vxe-column |
| | |
| | | :edit-render="{ autoFocus: 'input' }" |
| | | > |
| | | <template #edit="{ row }"> |
| | | <el-input-number v-model="row.days" /> |
| | | <el-input-number v-model="row.days" /> |
| | | </template> |
| | | </vxe-column> |
| | | <vxe-column |
| | |
| | | <el-input type="textarea" v-model="row.remark" /> |
| | | </template> |
| | | </vxe-column> |
| | | <vxe-column title="操作" width="200" fixed="right"> |
| | | <!-- <template #default="{ row }"> |
| | | <el-button @click="handleSave(row)" :loading="row.loading" |
| | | >保存</el-button |
| | | > --> |
| | | <template #default="{ row }"> |
| | | <template v-if="hasEditStatus1(row)"> |
| | | <el-button @click="saveRowEvent1(row)" size="small">保存</el-button> |
| | | <el-button @click="cancelRowEvent1()" size="small">取消</el-button> |
| | | </template> |
| | | <template v-else> |
| | | <el-button @click="editRowEvent1(row)" size="small">编辑</el-button> |
| | | </template> |
| | | </template> |
| | | <!-- </template> --> |
| | | </vxe-column> |
| | | </vxe-table> |
| | | <div class="btn_center"> |
| | | <el-button type="primary" @click="handleSave">保存</el-button> |
| | | </div> |
| | | <!-- <div class="btn_center"> |
| | | <el-button type="primary" @click="handleSave2">保存</el-button> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import { listGasPlan, getGasPlanSave } from "@/api/mainPlan/gasPlanning"; |
| | | const height = ref(document.documentElement.clientHeight - 400 + "px;"); |
| | | const loading = ref(false); |
| | | const loading2 = ref(false); |
| | | const data = reactive({ |
| | | queryParams: { |
| | | date: "", |
| | | }, |
| | | }); |
| | | const tableRef = ref() |
| | | const tableRef1 = ref() |
| | | const { queryParams } = toRefs(data); |
| | | const gasPlanList = ref([]); |
| | | const routePlanList = ref([]); |
| | |
| | | ]); |
| | | 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 list |
| | | .map((type) => { |
| | | const item = dayProduceTypeOptions.value.find( |
| | | (item) => item.value === type |
| | | ); |
| | | return item ? item.label : type; |
| | | }) |
| | | .join(","); |
| | | } |
| | | return '' |
| | | } |
| | | return ""; |
| | | }; |
| | | // 表格配置 |
| | | // const columns = ref([ |
| | | // // { |
| | |
| | | // type: "html", |
| | | // }, |
| | | // ]); |
| | | const hasEditStatus = (row) => { |
| | | const $table = tableRef.value |
| | | if ($table) { |
| | | return $table.isEditByRow(row) |
| | | } |
| | | } |
| | | const editRowEvent = (row) => { |
| | | const $table = tableRef.value |
| | | if ($table) { |
| | | $table.setEditRow(row) |
| | | } |
| | | } |
| | | const saveRowEvent = (row) => { |
| | | 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(row) |
| | | }) |
| | | } |
| | | } |
| | | const cancelRowEvent = () => { |
| | | const $table = tableRef.value |
| | | if ($table) { |
| | | $table.clearEdit() |
| | | } |
| | | } |
| | | const hasEditStatus1 = (row) => { |
| | | const $table = tableRef1.value |
| | | if ($table) { |
| | | return $table.isEditByRow(row) |
| | | } |
| | | } |
| | | const editRowEvent1 = (row) => { |
| | | const $table = tableRef1.value |
| | | if ($table) { |
| | | $table.setEditRow(row) |
| | | } |
| | | } |
| | | const saveRowEvent1 = (row) => { |
| | | const $table = tableRef1.value |
| | | if ($table) { |
| | | $table.clearEdit().then(() => { |
| | | // loading.value = true |
| | | // setTimeout(() => { |
| | | // loading.value = false |
| | | // VxeUI.modal.message({ content: `保存成功!name=${row.name}`, status: 'success' }) |
| | | // }, 300) |
| | | handleSave2(row) |
| | | }) |
| | | } |
| | | } |
| | | const cancelRowEvent1 = () => { |
| | | const $table = tableRef1.value |
| | | if ($table) { |
| | | $table.clearEdit() |
| | | } |
| | | } |
| | | async function getRouteList(year, month) { |
| | | const res = await listGasPlan({ |
| | | major: "管路", |
| | |
| | | personnelNumber: |
| | | item.personnelNumber == null ? "1" : item.personnelNumber, |
| | | dayProduceAllNum: |
| | | item.dayProduceAllNum == null ? "0" : item.dayProduceNum*item.personnelNumber, |
| | | item.dayProduceAllNum == null |
| | | ? "0" |
| | | : item.dayProduceNum * item.personnelNumber, |
| | | days: item.days == null ? "22" : item.days, |
| | | monthProduceAllNum: |
| | | item.monthProduceAllNum == null ? "0" : item.dayProduceAllNum*item.days, |
| | | item.monthProduceAllNum == null |
| | | ? "0" |
| | | : item.dayProduceAllNum * item.days, |
| | | }; |
| | | }); |
| | | loading.value = false; |
| | |
| | | personnelNumber: |
| | | item.personnelNumber == null ? "1" : item.personnelNumber, |
| | | dayProduceAllNum: |
| | | item.dayProduceAllNum == null ? "0" : item.dayProduceNum*item.personnelNumber, |
| | | item.dayProduceAllNum == null |
| | | ? "0" |
| | | : item.dayProduceNum * item.personnelNumber, |
| | | days: item.days == null ? "22" : item.days, |
| | | monthProduceAllNum: |
| | | item.monthProduceAllNum == null ? "0" : item.dayProduceAllNum*item.days, |
| | | item.monthProduceAllNum == null |
| | | ? "0" |
| | | : item.dayProduceAllNum * item.days, |
| | | }; |
| | | }); |
| | | loading.value = false; |
| | | loading2.value = false; |
| | | } |
| | | function cellClickEvent ({ row, column }){ |
| | | console.log(column,row) |
| | | row.dayProduceAllNum = row.dayProduceNum*row.personnelNumber |
| | | row.monthProduceAllNum = row.dayProduceAllNum*row.days |
| | | function cellClickEvent({ row, column }) { |
| | | console.log(column, row); |
| | | row.dayProduceAllNum = row.dayProduceNum * row.personnelNumber; |
| | | row.monthProduceAllNum = row.dayProduceAllNum * row.days; |
| | | } |
| | | function handleQuery() { |
| | | if(!queryParams.value.date){ |
| | | ElMessage({ |
| | | message: "请选择年月", |
| | | type: "error", |
| | | }); |
| | | return; |
| | | } |
| | | 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() { |
| | | function resetQuery() { |
| | | queryParams.value.date = "" |
| | | } |
| | | async function handleSave(row) { |
| | | 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, |
| | | console.log(row, "baocun"); |
| | | // 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([ |
| | | { |
| | | ...row, |
| | | major: "管路", |
| | | year, |
| | | month |
| | | } |
| | | }) |
| | | const res = await getGasPlanSave([ |
| | | ...gasPlanList.value, |
| | | ...routePlanList.value |
| | | ]) |
| | | ElMessage({ |
| | | month, |
| | | }, |
| | | ]); |
| | | ElMessage({ |
| | | message: "数据保存成功", |
| | | type: "success", |
| | | }); |
| | | handleQuery() |
| | | console.log(res,"akiwjciwj") |
| | | handleQuery(); |
| | | console.log(res, "akiwjciwj"); |
| | | } |
| | | async function handleSave2(row) { |
| | | const year = queryParams.value.date.split("-")[0]; |
| | | const month = parseInt(queryParams.value.date.split("-")[1]); |
| | | console.log(row, "baocun"); |
| | | // 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([ |
| | | { |
| | | ...row, |
| | | major: "气体", |
| | | year, |
| | | month, |
| | | }, |
| | | ]); |
| | | ElMessage({ |
| | | message: "数据保存成功", |
| | | type: "success", |
| | | }); |
| | | handleQuery(); |
| | | console.log(res, "akiwjciwj"); |
| | | } |
| | | onMounted(() => { |
| | | // getRouteList(); |
| | |
| | | margin: 20px auto; |
| | | } |
| | | } |
| | | .btn_center{ |
| | | .btn_center { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | margin-top:20px; |
| | | padding-bottom:20px; |
| | | margin-top: 20px; |
| | | padding-bottom: 20px; |
| | | } |
| | | </style> |