提交设备管理模块

zhang_12370

2025-07-02 1a5d32ee47a086247dec5cd7f3fde28700c6b187

 src/views/equipment/management/mould/managementDialog.vue

@@ -2,135 +2,118 @@
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="600"
      :title="addOrEdit === 'edit' ? '编辑' : '新增' + '设备'"
      width="800"
      :title-style="{ textAlign: 'center' }"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form
        ref="formRef"
        style="max-width: 400px; margin: 0 auto"
        :model="formData"
        :rules="rules"
        label-width="auto"
      >        <el-form-item
          label="供应商名称"
          prop="supplierName"
        >
          <el-input
            v-model="formData.supplierName"
            placeholder="请输入供货商名称"
            :disabled="isViewMode"
          />
        </el-form-item>
        <el-form-item
          label="纳税人识别号"
          prop="taxpayerId"
        >
          <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"
            :disabled="isViewMode"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item
          label="详细地址"
          prop="businessAddress"
        >
          <el-input
            v-model="formData.businessAddress"
            placeholder="请输入客户详细地址"
            :disabled="isViewMode"
          />
        </el-form-item>
        <el-form-item
          label="开户行"
          prop="bankAccount"
        >
          <el-input 
            v-model="formData.bankAccount" 
            placeholder="请输入开户行" 
            :disabled="isViewMode"
          />
        </el-form-item>
        <el-form-item
          label="银行账户"
          prop="bankName"
        >
          <el-input 
            v-model="formData.bankName" 
            placeholder="请输入银行账户" 
            :disabled="isViewMode"
          />
        </el-form-item>
        <el-form-item
          label="联系人"
          prop="contactPerson"
        >
          <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="请输入联系人电话"
            :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"
            :disabled="isViewMode"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item
          label="联系人详细地址"
          prop="contactAddress"
        >
          <el-input
            v-model="formData.contactAddress"
            placeholder="请输入联系人地址"
            :disabled="isViewMode"
          />
        </el-form-item>
      >
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="设备编号" prop="equipmentId">
              <el-input
                v-model="formData.equipmentId"
                placeholder="请输入设备编号"
                :disabled="isViewMode"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="设备名称" prop="equipmentName">
              <el-input
                v-model="formData.equipmentName"
                placeholder="请输入设备名称"
                :disabled="isViewMode"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="数量" prop="quantity">
              <el-input
                v-model="formData.quantity"
                placeholder="请输入数量"
                :disabled="isViewMode"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="规格型号" prop="specification">
              <el-input
                v-model="formData.specification"
                placeholder="请输入规格型号"
                :disabled="isViewMode"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="使用状态" prop="usageStatus">
              <el-select
                v-model="formData.usageStatus"
                placeholder="请选择使用状态"
                :disabled="isViewMode"
              >
                <el-option label="启用" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="使用部门" prop="usingDepartment">
              <el-input
                v-model="formData.usingDepartment"
                placeholder="请输入使用部门"
                :disabled="isViewMode"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="存放位置" prop="storageLocation">
              <el-input
                v-model="formData.storageLocation"
                placeholder="请输入存放位置"
                :disabled="isViewMode"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="采购价格" prop="purchasePrice">
              <el-input
                v-model="formData.purchasePrice"
                placeholder="请输入采购价格"
                :disabled="isViewMode"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="采购日期" prop="purchaseDate">
              <el-date-picker
                v-model="formData.purchaseDate"
                type="date"
                placeholder="请选择采购日期"
                size="default"
                :value-format="'YYYY-MM-DD'"
                style="width: 100%;"
                :disabled="isViewMode"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="dialog-footer">
          <el-button v-if="addOrEdit === 'edit'" @click="resetForm"
            >重置</el-button
          >
          <el-button v-if="addOrEdit !== 'edit'||addOrEdit.includes('viewRow')" @click="cancelForm"
            >取消</el-button
          >
          <el-button type="primary" @click="submitForm" v-if="!isViewMode"> 确定</el-button>
          <el-button v-if="!isViewMode" @click="cancelForm">取消</el-button>
          <el-button v-if="!isViewMode" type="primary" @click="submitForm">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
@@ -138,9 +121,8 @@
</template>

<script setup>
import { ref, watch, defineProps, onMounted, computed, reactive } from "vue";
import { addOrEditSupply } from "@/api/basicInformation/supplier";
import { getAreaOptions } from "@/api/system/area.js";
import { ref, watch, computed, reactive } from "vue";
import { addOrEditEquipment } from "@/api/equipment/management/index.js";

const props = defineProps({
  beforeClose: {
@@ -161,121 +143,83 @@
  },
});

// 计算属性：统一控制是否禁用
const isViewMode = computed(() => props.addOrEdit === 'viewRow');

const emit = defineEmits(["submit", "handleBeforeClose"]);

// 计算属性：统一控制是否禁用
const isViewMode = computed(() => props.addOrEdit === "viewRow");

// 表单引用和数据
const formRef = ref(null);
const formData = ref({});
const copyForm = defineModel("copyForm", {
  required: true,
  type: Object,
});
onMounted(() => {
  fetchAreaOptions();
  default: () => ({}),
});

// 修改树形选择的映射
const cascaderProps = ref({
  value: "id", // 指定value字段为id
  label: "label", // 指定label字段
  children: "children", // 指定子节点字段
});

// 地址选择数据
const addressSelectOptions = ref([]);
const fetchAreaOptions = async () => {
  addressSelectOptions.value = [];

  const res = await getAreaOptions();
  if (res.code === 200) {
    addressSelectOptions.value = res.data;
  }
};

// 处理地址数据转换
function mapAddress(list) {
  return list.map((item) => ({
    value: item.id,
    label: item.name,
    children: item.children ? mapAddress(item.children) : undefined,
  }));
}

// 表单引用
const formRef = ref(null);
// 表单数据
const formData = ref({ ...props.form });
// 弹窗可见性
const dialogVisible = defineModel("supplierDialogFormVisible", {
const dialogVisible = defineModel("managementFormDialog", {
  required: true,
  type: Boolean,
});
// 监听外部传入的表单数据变化
watch(
  () => props.form,
  (newVal) => {
    formData.value = { ...newVal };
  },
  { deep: true }
);

// 监听内部弹窗状态变化
// 监听外部传入的表单数据变化，合并监听逻辑
watch(
  () => dialogVisible.value,
  (newVal) => {
    emit("update:supplierDialogFormVisible", newVal);
  }
  [() => props.form, () => props.addOrEdit],
  ([newForm, newAddOrEdit]) => {
    formData.value = { ...newForm };
  },
  { deep: true, immediate: true }
);
// 处理地址选择变化
const handleChange = (value) => {
  console.log(value);
};
// 提交表单
const submitForm = async () => {
  if (!formRef.value) return;
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      const obj = ref({});
      if (props.title.includes("新增")) {
        let result = await addOrEditSupply({
          ...formData.value,
        });
        obj.value = {
          title: "新增",
          ...formData.value,
          result,
        };
  
  await formRef.value.validate(async (valid) => {
    if (!valid) return;
    
    try {
      const result = await addOrEditEquipment({ ...formData.value });
      const title = props.title.includes("新增") ? "新增" : "编辑";
      
      if (result.code === 200 && result.msg) {
        ElMessage.success(`${title}成功：${result.msg}`);
        emit("submit", { title, ...formData.value, result });
        closeDialog();
      } else {
        let result = await addOrEditSupply({
          ...formData.value,
        });
        obj.value = {
          title: "编辑",
          ...formData.value,
          result,
        };
        ElMessage.error(`${title}失败：${result.msg}`);
      }
      emit("submit", obj.value);
    } catch (error) {
      console.error("提交失败:", error);
      ElMessage.error("提交失败，请重试");
    }
  });
};
// 取消表单
const cancelForm = () => {
  emit("update:supplierDialogFormVisible", false);

// 关闭弹窗的统一方法
const closeDialog = () => {
  emit("update:managementFormDialog", false);
  formData.value = {};
};

// 取消表单
const cancelForm = () => {
  closeDialog();
};

// 重置表单
const resetForm = () => {
  if (!formRef.value) return;
  formData.value = JSON.parse(JSON.stringify(copyForm.value));
};

// 关闭弹窗
const handleClose = () => {
  // 触发父组件的关闭函数
  emit("handleBeforeClose");
  emit("update:supplierDialogFormVisible", false);
  closeDialog();
};
const rules = reactive({
  supplierName: [
  equipmentId: [
    { required: true, message: "请输入供货商名称", trigger: "blur" },
  ],
});
@@ -287,4 +231,11 @@
  margin-top: 20px;
  flex-direction: column;
}

// 只为dialog头部加下划线
:deep(.el-dialog__header) {
  border-bottom: 1px solid #e8eaec;
  padding: 0 20px 10px 0;
  margin-bottom: 14px;
}
</style>