From 0ce559e6195a189ccc777b0fa439906bffb12b55 Mon Sep 17 00:00:00 2001
From: zhang_12370 <z2864490065@outlook.com>
Date: 星期三, 25 六月 2025 17:58:31 +0800
Subject: [PATCH] 多页面添加查看功能
---
src/views/basicInformation/index.vue | 38 +++++++
src/views/procureMent/index.vue | 17 ++
src/views/production/components/ProductionDetailsTable.vue | 16 ++
src/views/production/components/useDialog.js | 14 ++
src/views/basicInformation/mould/coalMeiZhiZiDuanWeiHu.vue | 6 +
src/views/procureMent/components/ProductionDialog.vue | 14 ++
src/views/basicInformation/mould/coal.vue | 2
src/views/production/index.vue | 126 +++++++++++++-----------
src/views/basicInformation/mould/coalQualityMaintenance.vue | 7
src/views/basicInformation/mould/customer.vue | 23 ++--
src/views/production/components/ProductionDialog.vue | 27 +++--
11 files changed, 189 insertions(+), 101 deletions(-)
diff --git a/src/views/basicInformation/index.vue b/src/views/basicInformation/index.vue
index 4f47266..7e36228 100644
--- a/src/views/basicInformation/index.vue
+++ b/src/views/basicInformation/index.vue
@@ -56,11 +56,9 @@
@edit="handleEdit"
@viewRow="handleView"
@selection-change="handleSelectionChange"
- :showOperations="true"
- :showIndex="true"
- :showPagination="false"
:operations="['edit', 'viewRow']"
:operationsWidth="200"
+ :show-overflow-tooltip="false"
>
<!-- 瀛楁鍚嶇О鍒楃殑鑷畾涔夋彃妲� - 鏄剧ず涓烘爣绛� -->
<template
@@ -865,6 +863,40 @@
}
};
+const handleView = (row) => {
+ form.value = JSON.parse(JSON.stringify(row));
+ // 鏋勫缓渚涘簲鍟嗕笟鍔″湴鍧�鏁扮粍
+ if (form.value.bprovinceId && form.value.bdistrictId && form.value.bcityId) {
+ form.value.bids = [row.bprovinceId, row.bcityId, row.bdistrictId];
+ }
+
+ // 鏋勫缓渚涘簲鍟嗚仈绯诲湴鍧�鏁扮粍
+ if (form.value.cprovinceId && form.value.cdistrictId && form.value.ccityId) {
+ form.value.cids = [row.cprovinceId, row.ccityId, row.cdistrictId];
+ }
+
+ // 鏋勫缓瀹㈡埛涓氬姟鍦板潃鏁扮粍
+ if (
+ form.value.businessCityId &&
+ form.value.businessDistrictId &&
+ form.value.businessProvinceId
+ ) {
+ form.value.bids = [
+ row.businessProvinceId,
+ row.businessCityId,
+ row.businessDistrictId,
+ ];
+ }
+
+ // 鏋勫缓瀹㈡埛鑱旂郴鍦板潃鏁扮粍
+ if (form.value.cityId && form.value.districtId && form.value.provinceId) {
+ form.value.cids = [row.provinceId, row.cityId, row.districtId];
+ }
+ addOrEdit.value = "viewRow";
+ handleAddEdit(tabName.value);
+};
+
+
// ===== 鐢熷懡鍛ㄦ湡閽╁瓙 =====
/**
diff --git a/src/views/basicInformation/mould/coal.vue b/src/views/basicInformation/mould/coal.vue
index 36e599e..a8197c2 100644
--- a/src/views/basicInformation/mould/coal.vue
+++ b/src/views/basicInformation/mould/coal.vue
@@ -18,6 +18,7 @@
<el-input
v-model="formData.coal"
placeholder="璇疯緭鍏ョ叅绉嶅悕绉�"
+ :disabled="isViewMode"
/>
</el-form-item>
<el-form-item label="缁存姢浜哄鍚�" prop="maintainerId">
@@ -73,6 +74,7 @@
default: ''
},
})
+const isViewMode = computed(() => props.addOrEdit.includes("viewRow"));
const copyForm = defineModel("copyForm", {
required: true,
type: Object,
diff --git a/src/views/basicInformation/mould/coalMeiZhiZiDuanWeiHu.vue b/src/views/basicInformation/mould/coalMeiZhiZiDuanWeiHu.vue
index 8dddf2b..6a43441 100644
--- a/src/views/basicInformation/mould/coalMeiZhiZiDuanWeiHu.vue
+++ b/src/views/basicInformation/mould/coalMeiZhiZiDuanWeiHu.vue
@@ -18,10 +18,11 @@
<el-input
v-model="formData.fieldName"
placeholder="璇疯緭鍏ュ瓧娈靛悕绉�"
+ :disabled="isViewMode"
/>
</el-form-item>
<el-form-item label="瀛楁鎻忚堪" prop="fieldDescription">
- <el-input v-model="formData.fieldDescription" type="textarea" placeholder="璇疯緭鍏ュ瓧娈垫弿杩�"/>
+ <el-input v-model="formData.fieldDescription" type="textarea" placeholder="璇疯緭鍏ュ瓧娈垫弿杩�" :disabled="isViewMode"/>
</el-form-item>
<el-form-item class="dialog-footer">
<el-button v-if="addOrEdit === 'edit'" @click="resetForm"
@@ -57,6 +58,9 @@
default: "",
},
});
+const isViewMode = computed(() => {
+ return props.addOrEdit.includes("view");
+});
const copyForm = defineModel("copyForm", {
required: true,
type: Object,
diff --git a/src/views/basicInformation/mould/coalQualityMaintenance.vue b/src/views/basicInformation/mould/coalQualityMaintenance.vue
index 1b3d911..cb66226 100644
--- a/src/views/basicInformation/mould/coalQualityMaintenance.vue
+++ b/src/views/basicInformation/mould/coalQualityMaintenance.vue
@@ -7,20 +7,20 @@
style="max-width: 400px; margin: 0 auto">
<!-- 鏂规鍚嶇О杈撳叆妗� -->
<el-form-item label="鐓よ川鏂规鍚嶇О" prop="plan">
- <el-input v-model="formData.plan" placeholder="璇疯緭鍏ョ叅璐ㄦ柟妗堝悕绉�" clearable/>
+ <el-input v-model="formData.plan" placeholder="璇疯緭鍏ョ叅璐ㄦ柟妗堝悕绉�" clearable :disabled="isViewMode"/>
</el-form-item>
<!-- 鐓よ川瀛楁澶氶�変笅鎷夋 -->
<el-form-item label="鐓よ川鏂规绫诲瀷" prop="coalFieldList">
<el-select v-model="formData.coalFieldList" placeholder="璇烽�夋嫨鐓よ川鏂规绫诲瀷" style="width: 100%" clearable
- multiple>
+ multiple :disabled="isViewMode">
<el-option v-for="item in fieldOptions" :key="item.id" :label="item.label" :value="item"/>
</el-select>
</el-form-item>
<!-- 鏂规鎻忚堪鏂囨湰鍩� -->
<el-form-item label="鐓よ川鏂规鎻忚堪" prop="schemeDesc">
- <el-input v-model="formData.schemeDesc" type="textarea" placeholder="璇疯緭鍏ョ叅璐ㄦ柟妗堟弿杩�" :rows="3"/>
+ <el-input v-model="formData.schemeDesc" type="textarea" placeholder="璇疯緭鍏ョ叅璐ㄦ柟妗堟弿杩�" :rows="3" :disabled="isViewMode"/>
</el-form-item>
<!-- 鎿嶄綔鎸夐挳鍖哄煙 -->
@@ -60,6 +60,7 @@
default: "",
},
});
+const isViewMode = computed(() => props.addOrEdit.includes("view"));
const copyForm = defineModel("copyForm", {
required: true,
type: Object,
diff --git a/src/views/basicInformation/mould/customer.vue b/src/views/basicInformation/mould/customer.vue
index db4d96b..7202287 100644
--- a/src/views/basicInformation/mould/customer.vue
+++ b/src/views/basicInformation/mould/customer.vue
@@ -5,41 +5,41 @@
<el-form ref="formRef" style="max-width: 400px; margin: 0 auto" :model="formData" :rules="rules"
label-width="auto">
<el-form-item label="瀹㈡埛鍚嶇О" prop="customerName">
- <el-input v-model="formData.customerName" placeholder="璇疯緭鍏ュ鎴峰悕绉�"/>
+ <el-input v-model="formData.customerName" placeholder="璇疯緭鍏ュ鎴峰悕绉�" :disabled="isViewMode"/>
</el-form-item>
<el-form-item label="绾崇◣浜鸿瘑鍒彿" prop="taxpayerId">
- <el-input v-model="formData.taxpayerId" placeholder="璇疯緭鍏ョ撼绋庝汉璇嗗埆鍙�"/>
+ <el-input v-model="formData.taxpayerId" placeholder="璇疯緭鍏ョ撼绋庝汉璇嗗埆鍙�" :disabled="isViewMode"/>
</el-form-item>
<el-form-item label="缁忚惀鍦板潃" prop="bids">
<el-cascader placeholder="璇烽�夋嫨缁忚惀鍦板潃" size="default" :options="addressSelectOptions"
v-model="formData.bids"
- :props="cascaderProps" @change="handleChange">
+ :props="cascaderProps" @change="handleChange" :disabled="isViewMode">
</el-cascader>
</el-form-item>
<el-form-item label="缁忚惀璇︾粏鍦板潃" prop="businessAddress">
- <el-input v-model="formData.businessAddress" placeholder="璇疯緭鍏ョ粡钀ヨ缁嗗湴鍧�"/>
+ <el-input v-model="formData.businessAddress" placeholder="璇疯緭鍏ョ粡钀ヨ缁嗗湴鍧�" :disabled="isViewMode"/>
</el-form-item>
<el-form-item label="寮�鎴疯" prop="bankName">
- <el-input v-model="formData.bankName" placeholder="璇疯緭鍏ュ紑鎴疯"/>
+ <el-input v-model="formData.bankName" placeholder="璇疯緭鍏ュ紑鎴疯" :disabled="isViewMode"/>
</el-form-item>
<el-form-item label="閾惰璐︽埛" prop="bankAccount">
- <el-input v-model="formData.bankAccount" placeholder="璇疯緭鍏ラ摱琛岃处鎴�"/>
+ <el-input v-model="formData.bankAccount" placeholder="璇疯緭鍏ラ摱琛岃处鎴�" :disabled="isViewMode"/>
</el-form-item>
<el-form-item label="鑱旂郴浜�" prop="contactPerson">
- <el-input v-model="formData.contactPerson" placeholder="璇疯緭鍏ヨ仈绯讳汉"/>
+ <el-input v-model="formData.contactPerson" placeholder="璇疯緭鍏ヨ仈绯讳汉" :disabled="isViewMode"/>
</el-form-item>
<el-form-item label="鑱旂郴鐢佃瘽" prop="contactPhone">
- <el-input v-model="formData.contactPhone" placeholder="璇疯緭鍏ヨ仈绯荤數璇�"/>
+ <el-input v-model="formData.contactPhone" placeholder="璇疯緭鍏ヨ仈绯荤數璇�" :disabled="isViewMode"/>
</el-form-item>
<el-form-item label="鑱旂郴浜哄湴鍧�" prop="cids">
<el-cascader placeholder="璇烽�夋嫨鑱旂郴浜哄湴鍧�" size="default" :options="addressSelectOptions"
v-model="formData.cids"
- :props="cascaderProps" @change="handleChange">
+ :props="cascaderProps" @change="handleChange" :disabled="isViewMode">
</el-cascader>
</el-form-item>
<el-form-item label="鑱旂郴浜鸿缁�" prop="contactAddress">
- <el-input v-model="formData.contactAddress" placeholder="璇疯緭鍏ヨ仈绯讳汉璇︾粏鍦板潃"/>
+ <el-input v-model="formData.contactAddress" placeholder="璇疯緭鍏ヨ仈绯讳汉璇︾粏鍦板潃" :disabled="isViewMode"/>
</el-form-item>
<el-form-item class="dialog-footer">
<el-button v-if="addOrEdit === 'edit'" @click="resetForm">閲嶇疆</el-button>
@@ -56,7 +56,6 @@
<script setup>
import {ref, watch, onMounted} from "vue";
import {getAreaOptions} from "@/api/system/area.js";
-import addressList from "@/api/jsonApi/areaList.json";
import {addOrEditCustomer} from "@/api/basicInformation/customer";
const props = defineProps({
@@ -78,7 +77,7 @@
default: "",
},
});
-
+const isViewMode = computed(() => props.addOrEdit.includes("viewRow"));
const handleChange = (value) => {
console.log(value);
};
diff --git a/src/views/procureMent/components/ProductionDialog.vue b/src/views/procureMent/components/ProductionDialog.vue
index 3c03cbb..677eba9 100644
--- a/src/views/procureMent/components/ProductionDialog.vue
+++ b/src/views/procureMent/components/ProductionDialog.vue
@@ -17,12 +17,12 @@
style="max-width: 400px; margin: 0 auto"
>
<el-form-item label="渚涘簲鍟嗗悕绉�" prop="supplierId">
- <el-select v-model="form.supplierId" placeholder="璇烽�夋嫨渚涘簲鍟�">
+ <el-select v-model="form.supplierId" placeholder="璇烽�夋嫨渚涘簲鍟�" :disabled="isViewMode">
<el-option :label="item.label" v-for="item in supplyList" :key="item.value" :value="item.value"/>
</el-select>
</el-form-item>
<el-form-item label="鐓ょ" prop="coalId">
- <el-select v-model="form.coalId" placeholder="璇烽�夋嫨鐓ょ">
+ <el-select v-model="form.coalId" placeholder="璇烽�夋嫨鐓ょ" :disabled="isViewMode">
<el-option :label="item.label" v-for="item in coalList" :key="item.value" :value="item.value"/>
</el-select>
</el-form-item>
@@ -31,18 +31,19 @@
v-model.number="form.purchaseQuantity"
placeholder="璇疯緭鍏�"
@blur="handleQuantityBlur"
+ :disabled="isViewMode"
>
<template v-slot:suffix>
<i style="font-style: normal">鍚�</i>
</template>
</el-input>
- </el-form-item
- >
+ </el-form-item>
<el-form-item label="绋庣巼" prop="taxRate">
<el-input
v-model.number="form.taxRate"
placeholder="璇疯緭鍏ョ◣鐜�"
@blur="handleTaxRateBlur"
+ :disabled="isViewMode"
>
<template v-slot:suffix>
<i style="font-style: normal">%</i>
@@ -54,6 +55,7 @@
v-model.number="form.priceExcludingTax"
placeholder="璇疯緭鍏�"
@blur="handlePriceBlur"
+ :disabled="isViewMode"
>
<template v-slot:suffix>
<i style="font-style: normal">鍏�</i>
@@ -64,6 +66,7 @@
<el-input
v-model.number="form.priceIncludingTax"
placeholder="鑷姩璁＄畻"
+ :disabled="isViewMode"
>
<template v-slot:suffix>
<i style="font-style: normal">鍏�</i>
@@ -74,6 +77,7 @@
<el-input
v-model.number="form.totalPriceExcludingTax"
placeholder="鑷姩璁＄畻"
+ :disabled="isViewMode"
>
<template v-slot:suffix>
<i style="font-style: normal">鍏�</i>
@@ -84,6 +88,7 @@
<el-input
v-model.number="form.totalPriceIncludingTax"
placeholder="鑷姩璁＄畻"
+ :disabled="isViewMode"
>
<template v-slot:suffix>
<i style="font-style: normal">鍏�</i>
@@ -149,6 +154,7 @@
});
const supplyList = ref([]);
const coalList = ref([]);
+const isViewMode = computed(() => props.title.includes("鏌ョ湅"));
// 鑾峰彇渚涘簲鍟嗕笅鎷夊拰鐓ょ涓嬫媺
const getDropdownData = async () => {
try {
diff --git a/src/views/procureMent/index.vue b/src/views/procureMent/index.vue
index 2949e2b..f692780 100644
--- a/src/views/procureMent/index.vue
+++ b/src/views/procureMent/index.vue
@@ -35,7 +35,11 @@
@delete="handleDeleteSuccess"
:show-selection="true"
:border="true"
- style="width: 100%;height: calc(100vh - 26em)"
+ style="width: 100%; height: calc(100vh - 26em)"
+ @viewRow="handleView"
+ :operations="['edit', 'viewRow']"
+ :operationsWidth="200"
+ :show-overflow-tooltip="false"
/>
<pagination
v-if="total > 0"
@@ -150,7 +154,7 @@
const MatchQuery = (data, name) => {
const list = name === "supplyRes" ? supplyRes.value.data : coalRes.value.data;
const item = list.find((items) => items.id == data);
- return item ? item.coal || item.supplierName : "";
+ return item ? item.coal || item.supplierName : "";
};
// 鑾峰彇渚涘簲鍟嗗垪琛�
const supplyRes = ref([]);
@@ -177,13 +181,13 @@
const productionDialogs = ref(null); // 娣诲姞ref澹版槑
const handleAddEdit = () => {
- addOrEdit.value == "add" ? (title.value = "鏂板") : (title.value = "缂栬緫");
+ addOrEdit.value == "add" ? (title.value = "鏂板") : addOrEdit.value == "viewRow" ? (title.value = "鏌ョ湅") : (title.value = "缂栬緫");
title.value = title.value + "閲囪喘淇℃伅";
openDialog();
};
// 鎵撳紑寮圭獥
const openDialog = () => {
- if (addOrEdit.value === "edit") {
+ if (addOrEdit.value === "edit" || addOrEdit.value === "viewRow") {
// 纭繚澶嶅埗涓�浠芥暟鎹紝閬垮厤鐩存帴寮曠敤
copyForm.value = JSON.parse(JSON.stringify(form.value));
dialogFormVisible.value = true;
@@ -229,6 +233,11 @@
addOrEdit.value = "edit";
handleAddEdit();
};
+const handleView = (row) => {
+ form.value = JSON.parse(JSON.stringify(row));
+ addOrEdit.value = "viewRow";
+ handleAddEdit();
+};
const handleDelete = () => {
if (selectedRows.value.length === 0) {
ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
diff --git a/src/views/production/components/ProductionDetailsTable.vue b/src/views/production/components/ProductionDetailsTable.vue
index 8331deb..dd89b4b 100644
--- a/src/views/production/components/ProductionDetailsTable.vue
+++ b/src/views/production/components/ProductionDetailsTable.vue
@@ -9,6 +9,7 @@
@change="(value) => handleCoalSelectChange(row, value)"
filterable
:key="`coalId-select-${$index}-${weekList.length}`"
+ :disabled="isViewMode"
>
<el-option
v-for="(item, index) of weekList"
@@ -26,6 +27,7 @@
placeholder="璇疯緭鍏ョ敓浜ф暟閲�"
type="number"
@input="handleInput('productionQuantity', $index, $event)"
+ :disabled="isViewMode"
/>
</template>
</el-table-column>
@@ -37,6 +39,7 @@
placeholder="璇疯緭鍏ヤ汉宸ユ垚鏈�"
type="number"
@input="handleInput('laborCost', $index, $event)"
+ :disabled="isViewMode"
>
<template #suffix>
<i style="font-style: normal">鍏�</i>
@@ -52,6 +55,7 @@
placeholder="璇疯緭鍏ヨ兘鑰楁垚鏈�"
type="number"
@input="handleInput('energyConsumptionCost', $index, $event)"
+ :disabled="isViewMode"
>
<template #suffix>
<i style="font-style: normal">鍏�</i>
@@ -67,6 +71,7 @@
placeholder="璇疯緭鍏ヨ澶囨姌鏃�"
type="number"
@input="handleInput('equipmentDepreciation', $index, $event)"
+ :disabled="isViewMode"
>
<template #suffix>
<i style="font-style: normal">鍏�</i>
@@ -82,6 +87,7 @@
placeholder="璇疯緭鍏ラ噰璐崟浠�"
type="number"
@input="handleInput('purchasePrice', $index, $event)"
+ :disabled="isViewMode"
>
<template #suffix>
<i style="font-style: normal">鍏�</i>
@@ -99,6 +105,7 @@
type="number"
:readonly="autoCalculate"
@input="handleInput('totalCost', $index, $event)"
+
>
<template #suffix>
<i style="font-style: normal">鍏�</i>
@@ -115,6 +122,7 @@
@change="(value) => handleUserSelectChange(row, value)"
filterable
:key="`producer-select-${$index}-${userList.length}`"
+ :disabled="isViewMode"
>
<el-option
v-for="(item, index) of userList"
@@ -126,10 +134,10 @@
</template>
</el-table-column>
<el-table-column
- v-if="showOperations"
label="鎿嶄綔"
width="120"
fixed="right"
+ v-if="dialogType !== 'viewRow'"
>
<template #default="{ $index }">
<el-button
@@ -169,8 +177,12 @@
type: Boolean,
default: true,
},
+ dialogType:{
+ type: String,
+ default:'add'
+ }
});
-
+const isViewMode = computed(() => props.dialogType === "viewRow");
const emit = defineEmits(["update:modelValue", "input-change", "delete-row"]);
// 浣跨敤 v-model 杩涜鍙屽悜缁戝畾
diff --git a/src/views/production/components/ProductionDialog.vue b/src/views/production/components/ProductionDialog.vue
index 8c16696..955a1aa 100644
--- a/src/views/production/components/ProductionDialog.vue
+++ b/src/views/production/components/ProductionDialog.vue
@@ -1,12 +1,12 @@
<template>
<el-dialog
v-model="dialogVisible"
- :title="dialogType === 'add' ? '鏂板鐢熶骇鍔犲伐' : '缂栬緫鐢熶骇鍔犲伐'"
+ :title="dialogType === 'add' ? '鏂板鐢熶骇鍔犲伐' : dialogType === 'viewRow' ? '鏌ョ湅鐢熶骇鍔犲伐' : '缂栬緫鐢熶骇鍔犲伐'"
width="1200px"
:close-on-click-modal="false"
@close="handleClose"
>
- <el-row :gutter="10" style="margin-bottom: 10px">
+ <el-row :gutter="10" style="margin-bottom: 10px" v-if="dialogType !== 'viewRow'">
<el-col :span="3">
<el-button type="primary" @click="handlData"
>
@@ -40,20 +40,21 @@
</el-row>
<ETableModify
:columns="columns"
- :showOperations="false"
+ :showOperations="dialogType !== 'viewRow'"
height="200"
@cell-edit="handleCellEdit"
:tableData="tableData"
:showOverflowTooltip="false"
@row-click="handleRowClick"
- :editableColumns="['usedQuantity']"
+ :editableColumns="dialogType === 'viewRow' ? [] : ['usedQuantity']"
+ :editableCells="dialogType !== 'viewRow'"
@delete="handleRemoveItem"
/>
<div class="empty-table">
<h1>鐢熶骇鏄庣粏</h1>
<el-row :gutter="10">
<el-col :span="2">
- <el-button type="primary" @click="addNewRow">
+ <el-button type="primary" @click="addNewRow" v-if="dialogType !== 'viewRow'">
<el-icon>
<Plus/>
</el-icon>
@@ -72,10 +73,11 @@
<ProductionDetailsTable
v-model="detailsTableData"
:border="false"
- :show-operations="true"
+ :show-operations="dialogType !== 'viewRow'"
:auto-calculate="true"
@input-change="handleDetailsChange"
@delete-row="handleDeleteRow"
+ :dialogType="dialogType"
/>
</div>
@@ -83,14 +85,17 @@
<div class="dialog-footer">
<el-button
@click="handleClose"
- v-if="dialogType === 'add' || dialogType === 'edit'"
- >鍙� 娑�
+ >{{ dialogType === 'viewRow' ? '鍏� 闂�' : '鍙� 娑�' }}
</el-button
>
<!-- <el-button @click="handleReset" v-if="dialogType === 'edit'"
>閲� 缃�</el-button
> -->
- <el-button type="primary" :loading="loading" @click="handleSubmit"
+ <el-button
+ v-if="dialogType !== 'viewRow'"
+ type="primary"
+ :loading="loading"
+ @click="handleSubmit"
>纭� 瀹�
</el-button
>
@@ -298,11 +303,11 @@
dialogType.value = "add";
};
-const editInitialization = (data) => {
+const editInitialization = (type,data) => {
copyForm.value = deepClone(data);
tableData.value = data.productionInventoryList || [];
detailsTableData.value = data.productionList || [];
- dialogType.value = "edit";
+ dialogType.value = type;
const existingOfficialIds = tableData.value
.map((item) => item.officialId)
.filter((id) => id);
diff --git a/src/views/production/components/useDialog.js b/src/views/production/components/useDialog.js
index 23eb8ad..42e4546 100644
--- a/src/views/production/components/useDialog.js
+++ b/src/views/production/components/useDialog.js
@@ -20,12 +20,17 @@
if (dialogRef.value) {
if (type === 'add') {
dialogRef.value.Initialization?.();
- } else if (type === 'edit' && rowData) {
- dialogRef.value.editInitialization?.(rowData);
+ } else if ((type === 'edit' || type === 'viewRow') && rowData) {
+ dialogRef.value.editInitialization?.(type,rowData);
}
}
};
-
+ const viewRow = (type,rowData) => {
+ dialogType.value = type;
+ currentRowData.value = rowData;
+ dialogVisible.value = true;
+ openDialog('viewRow', rowData);
+ };
// 鍏抽棴瀵硅瘽妗�
const closeDialog = () => {
dialogVisible.value = false;
@@ -51,6 +56,7 @@
// 鏂规硶
openDialog,
closeDialog,
- handleDialogSuccess
+ handleDialogSuccess,
+ viewRow
};
}
diff --git a/src/views/production/index.vue b/src/views/production/index.vue
index 1003361..79c305b 100644
--- a/src/views/production/index.vue
+++ b/src/views/production/index.vue
@@ -4,9 +4,9 @@
<el-form :inline="true" :model="queryParams" class="search-form">
<el-form-item label="鎼滅储">
<el-input
- v-model="queryParams.searchAll"
- placeholder="璇疯緭鍏ュ叧閿瘝"
- clearable
+ v-model="queryParams.searchAll"
+ placeholder="璇疯緭鍏ュ叧閿瘝"
+ clearable
/>
</el-form-item>
<el-form-item>
@@ -22,29 +22,39 @@
<el-button type="success" :icon="Plus" @click="openDialog('add')">
鏂板鍔犲伐
</el-button>
- <el-button type="danger" :icon="Delete" :disabled="!selectedRows.length" @click="() => deleteSelected(delPM)">
+ <el-button
+ type="danger"
+ :icon="Delete"
+ :disabled="!selectedRows.length"
+ @click="() => deleteSelected(delPM)"
+ >
鍒犻櫎
</el-button>
- </div> <!-- 鏁版嵁琛ㄦ牸 -->
+ </div>
+ <!-- 鏁版嵁琛ㄦ牸 -->
<ETable
- :showOverflowTooltip="false"
- :loading="loading"
- :table-data="tableData"
- :columns="columns"
- :current-page="queryParams.current"
- :page-size="queryParams.size"
- @selection-change="handleSelectionChange"
- @edit="row => openDialog('edit', row)"
- :show-selection="true"
- :border="true"
- style="width: 100%;height: calc(100vh - 26em)"
+ :showOverflowTooltip="false"
+ :loading="loading"
+ :table-data="tableData"
+ :columns="columns"
+ :current-page="queryParams.current"
+ :page-size="queryParams.size"
+ @selection-change="handleSelectionChange"
+ @edit="(row) => openDialog('edit', row)"
+ :show-selection="true"
+ :border="true"
+ @viewRow="(row) => (viewRow('viewRow', row))"
+ :operations="['edit', 'viewRow']"
+ :operationsWidth="200"
+ :show-overflow-tooltip="false"
+ style="width: 100%; height: calc(100vh - 26em)"
>
<template #coalId="{ row }">
<div class="coal-tags">
<template v-if="row.coalId">
- <el-tag
- v-for="coal in parseCoalArray(row.coalId)"
- :key="coal"
+ <el-tag
+ v-for="coal in parseCoalArray(row.coalId)"
+ :key="coal"
size="small"
type="primary"
class="coal-tag"
@@ -55,53 +65,54 @@
<span v-else class="no-data">--</span>
</div>
</template>
- </ETable> <!-- 鍒嗛〉缁勪欢 -->
+ </ETable>
+ <!-- 鍒嗛〉缁勪欢 -->
<Pagination
- :layout="'total, prev, pager, next, jumper'"
- :total="total"
- v-model:page="queryParams.current"
- :limit="queryParams.size"
- @pagination="handlePageChange"
+ :layout="'total, prev, pager, next, jumper'"
+ :total="total"
+ v-model:page="queryParams.current"
+ :limit="queryParams.size"
+ @pagination="handlePageChange"
/>
</el-card>
<!-- 鐢熶骇瀵硅瘽妗� -->
<!-- handleProductionAndProcessing -->
<ProductionDialog
- v-model:visible="dialogVisible"
- ref="dialogRef"
- :type="dialogType"
- @update:productionAndProcessing="handleProductionAndProcessing"
- @success="handleDialogSuccess"
+ v-model:visible="dialogVisible"
+ ref="dialogRef"
+ :type="dialogType"
+ @update:productionAndProcessing="handleProductionAndProcessing"
+ @success="handleDialogSuccess"
/>
</div>
</template>
<script setup>
-import {onMounted, ref} from "vue";
-import {ElMessage} from "element-plus";
-import {Plus, Delete} from "@element-plus/icons-vue";
+import { onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { Plus, Delete } from "@element-plus/icons-vue";
import ProductionDialog from "./components/ProductionDialog.vue";
import ETable from "@/components/Table/ETable.vue";
import Pagination from "@/components/Pagination/index.vue";
-import {getProductionMasterList, delPM} from "@/api/production";
-import {parseCoalArray} from "@/utils/production";
-import {useTableData} from "./components/useTableData.js";
-import {useDialog} from "./components/useDialog.js";
-import {useCoalData} from "./components/useCoalData.js";
-import {getCoalInfoList} from "@/api/production";
+import { getProductionMasterList, delPM } from "@/api/production";
+import { parseCoalArray } from "@/utils/production";
+import { useTableData } from "./components/useTableData.js";
+import { useDialog } from "./components/useDialog.js";
+import { useCoalData } from "./components/useCoalData.js";
+import { getCoalInfoList } from "@/api/production";
// 鐓ょ淇℃伅鍒楄〃
const coalInfoList = ref([]);
// 琛ㄦ牸鍒楅厤缃�
const columns = [
- {prop: "coalId", label: "鐓ょ", minWidth: 150, slot: true},
- {prop: "productionQuantity", label: "鐢熶骇鏁伴噺", minWidth: 120},
- {prop: "laborCost", label: "浜哄伐鎴愭湰", minWidth: 150},
- {prop: "energyConsumptionCost", label: "鑳借�楁垚鏈�", minWidth: 120},
- {prop: "equipmentDepreciation", label: "璁惧鎶樻棫", minWidth: 143},
- {prop: "totalCost", label: "鎬绘垚鏈�", minWidth: 150},
+ { prop: "coalId", label: "鐓ょ", minWidth: 150, slot: true },
+ { prop: "productionQuantity", label: "鐢熶骇鏁伴噺", minWidth: 120 },
+ { prop: "laborCost", label: "浜哄伐鎴愭湰", minWidth: 150 },
+ { prop: "energyConsumptionCost", label: "鑳借�楁垚鏈�", minWidth: 120 },
+ { prop: "equipmentDepreciation", label: "璁惧鎶樻棫", minWidth: 143 },
+ { prop: "totalCost", label: "鎬绘垚鏈�", minWidth: 150 },
];
// 浣跨敤琛ㄦ牸鏁版嵁缁勫悎寮忓嚱鏁�
@@ -116,8 +127,8 @@
handleReset,
handlePageChange,
handleSelectionChange,
- deleteSelected
-} = useTableData(getProductionMasterList, {pageSize: 10});
+ deleteSelected,
+} = useTableData(getProductionMasterList, { pageSize: 10 });
// 浣跨敤瀵硅瘽妗嗙粍鍚堝紡鍑芥暟
const {
@@ -125,31 +136,32 @@
dialogType,
dialogRef,
openDialog,
- handleDialogSuccess: onDialogSuccess
+ viewRow,
+ handleDialogSuccess: onDialogSuccess,
} = useDialog();
// 浣跨敤鐓ょ鏁版嵁缁勫悎寮忓嚱鏁�
-const {getCoalNameById, getCoalData} = useCoalData();
+const { getCoalNameById, getCoalData } = useCoalData();
// 鑾峰彇鐓ょ鏄剧ず鍚嶇О锛堝甫澶囩敤閫昏緫锛�
const getDisplayCoalName = (coalId) => {
// 浼樺厛浣跨敤 useCoalData 鐨勬柟娉�
let name = getCoalNameById(coalId);
-
+
// 濡傛灉娌℃湁鎵惧埌锛屽皾璇曚粠 coalInfoList 涓煡鎵�
if (name === coalId && coalInfoList.value.length > 0) {
- const found = coalInfoList.value.find(item => item.id == coalId);
+ const found = coalInfoList.value.find((item) => item.id == coalId);
name = found ? found.coal : coalId;
}
-
+
return name || coalId;
};
// 澶勭悊鐢熶骇鏁版嵁鏇存柊
const handleProductionAndProcessing = (row, rows) => {
- const index = tableData.value.findIndex(item => item.id === rows.id);
+ const index = tableData.value.findIndex((item) => item.id === rows.id);
if (index !== -1) {
- tableData.value[index] = {...tableData.value[index], ...row};
+ tableData.value[index] = { ...tableData.value[index], ...row };
}
};
@@ -172,13 +184,13 @@
if (res.code === 200) {
coalInfoList.value = res.data;
}
- })()
+ })(),
]);
-
+
// 鍔犺浇琛ㄦ牸鏁版嵁
getList();
} catch (error) {
- ElMessage.error('鏁版嵁鍔犺浇澶辫触锛岃鍒锋柊椤甸潰閲嶈瘯');
+ ElMessage.error("鏁版嵁鍔犺浇澶辫触锛岃鍒锋柊椤甸潰閲嶈瘯");
}
});
</script>
--
Gitblit v1.9.3