多页面添加查看功能

zhang_12370

6 天以前 0ce559e6195a189ccc777b0fa439906bffb12b55

多页面添加查看功能

 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);
};


// ===== 生命周期钩子 =====

/**

 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,

 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,

 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,

 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);
};

 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 {

 src/views/procureMent/index.vue

@@ -36,6 +36,10 @@
        :show-selection="true"
        :border="true"
        style="width: 100%;height: calc(100vh - 26em)"
        @viewRow="handleView"
        :operations="['edit', 'viewRow']"
        :operationsWidth="200"
        :show-overflow-tooltip="false"
      />
      <pagination
        v-if="total > 0"
@@ -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("请选择要删除的数据");

 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 进行双向绑定

 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);

 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
    };
}

 src/views/production/index.vue

@@ -22,10 +22,16 @@
        <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"
@@ -34,9 +40,13 @@
          :current-page="queryParams.current"
          :page-size="queryParams.size"
          @selection-change="handleSelectionChange"
          @edit="row => openDialog('edit', row)"
        @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 }">
@@ -55,7 +65,8 @@
            <span v-else class="no-data">--</span>
          </div>
        </template>
      </ETable>      <!-- 分页组件 -->
      </ETable>
      <!-- 分页组件 -->
      <Pagination
          :layout="'total, prev, pager, next, jumper'"
          :total="total"
@@ -116,7 +127,7 @@
  handleReset,
  handlePageChange,
  handleSelectionChange,
  deleteSelected
  deleteSelected,
} = useTableData(getProductionMasterList, {pageSize: 10});

// 使用对话框组合式函数
@@ -125,7 +136,8 @@
  dialogType,
  dialogRef,
  openDialog,
  handleDialogSuccess: onDialogSuccess
  viewRow,
  handleDialogSuccess: onDialogSuccess,
} = useDialog();

// 使用煤种数据组合式函数
@@ -138,7 +150,7 @@
  
  // 如果没有找到，尝试从 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;
  }
  
@@ -147,7 +159,7 @@

// 处理生产数据更新
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};
  }
@@ -172,13 +184,13 @@
        if (res.code === 200) {
          coalInfoList.value = res.data;
        }
      })()
      })(),
    ]);
    
    // 加载表格数据
    getList();
  } catch (error) {
    ElMessage.error('数据加载失败，请刷新页面重试');
    ElMessage.error("数据加载失败，请刷新页面重试");
  }
});
</script>