feat: 来票登记添加编辑功能

曹睿

5 天以前 759f30a6e3afc8289a0b3c341cccbbd6ade39a2d

feat: 来票登记添加编辑功能

 src/api/procurementManagement/procurementInvoiceLedger.js

@@ -74,3 +74,19 @@
    data: data,
  });
}

export function getProductRecordById(params) {
  return request({
    url: "/purchase/registration/getProductRecordById",
    method: "get",
    params: params,
  });
}

export function updateRegistration(data) {
  return request({
    url: "/purchase/registration/updateRegistration",
    method: "post",
    data: data,
  });
}

 src/views/equipmentManagement/ledger/Modal.vue

@@ -48,8 +48,8 @@
};

const close = () => {
  closeModal();
  formRef.value.resetForm();
  closeModal();
};

const loadForm = async (id) => {

 src/views/procurementManagement/procurementInvoiceLedger/Form/EditForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,87 @@
<template>
  <el-form :model="form">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="采购合同号：">
          <el-tag size="large">{{ form.purchaseContractNumber }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="销售合同号：">
          <el-text>{{ form.salesContractNo }}</el-text>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="来票金额：">
          <el-text type="primary">{{ form.taxInclusiveTotalPrice }}</el-text>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="创建时间：">
          <el-text>{{ form.createdAt }}</el-text>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="发票号：">
          <el-input v-model="form.invoiceNumber" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="来票数：">
          <el-input v-model="form.ticketsNum" @input="inputTicketsNum" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="来票金额：">
          <el-text type="success">{{ form.ticketsAmount }}</el-text>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import useFormData from "@/hooks/useFormData";
import { getProductRecordById } from "@/api/procurementManagement/procurementInvoiceLedger";

defineOptions({
  name: "来票台账表单",
});

const { form, resetForm } = useFormData({
  id: undefined,
  purchaseContractNumber: undefined, // é‡‡è´­åˆåŒå·
  salesContractNo: undefined, // é”€å”®åˆåŒå·
  createdAt: undefined, // åˆ›å»ºæ—¶é—´
  invoiceNumber: undefined, // å‘票号
  ticketsNum: undefined, // æ¥ç¥¨æ•°
  ticketsAmount: undefined, // æ¥ç¥¨é‡‘额
  taxInclusiveTotalPrice: undefined, // å«ç¨Žæ€»ä»·
});

const load = async (id) => {
  const { code, data } = await getProductRecordById({ id });
  if (code === 200) {
    form.id = data.id;
    form.purchaseContractNumber = data.purchaseContractNumber;
    form.salesContractNo = data.salesContractNo;
    form.createdAt = data.createdAt;
    form.invoiceNumber = data.invoiceNumber;
    form.ticketsNum = data.ticketsNum;
    form.ticketsAmount = data.ticketsAmount.toFixed(2);
    form.taxInclusiveTotalPrice = data.taxInclusiveTotalPrice;
  }
};

const inputTicketsNum = (val) => {
  form.ticketsAmount = (val * form.taxInclusiveTotalPrice).toFixed(2);
};

defineExpose({
  load,
  form,
  resetForm,
});
</script>

<style lang="scss" scoped></style>

 src/views/procurementManagement/procurementInvoiceLedger/Modal/EditModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,59 @@
<template>
  <el-dialog :title="modalOptions.title" v-model="visible" @close="close">
    <EditForm ref="editFormRef" />
    <template #footer>
      <el-button @click="closeModal">{{ modalOptions.cancelText }}</el-button>
      <el-button type="primary" :loading="loading" @click="sendForm">
        {{ modalOptions.confirmText }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useModal } from "@/hooks/useModal";
import EditForm from "../Form/EditForm.vue";
import { updateRegistration } from "@/api/procurementManagement/procurementInvoiceLedger";
import { ElMessage } from "element-plus";

defineOptions({
  name: "来票台账编辑",
});
const emits = defineEmits(["success"]);

const editFormRef = ref();
const {
  id,
  visible,
  loading,
  openModal,
  modalOptions,
  handleConfirm,
  closeModal,
} = useModal({ title: "来票台账" });

const open = async (id) => {
  openModal(id);
  await nextTick();
  editFormRef.value.load(id);
};

const close = () => {
  editFormRef.value.resetForm();
  closeModal();
};

const sendForm = async () => {
  const form = editFormRef.value.form;
  const { code } = await updateRegistration(form);
  if (code === 200) {
    emits("success");
    ElMessage({ message: "操作成功", type: "success" });
    close();
  }
};

defineExpose({
  open,
});
</script>

 src/views/procurementManagement/procurementInvoiceLedger/index.vue

@@ -77,29 +77,49 @@
            </template>
          </el-dropdown>
        </template>
        <template #operation="{ row }">
          <el-button
            type="primary"
            text
            :icon="EditPen"
            @click="openEdit(row.id)"
          >
            ç¼–辑
          </el-button>
        </template>
      </PIMTable>
    </div>
    <Modal ref="modalRef" @uploadSuccess="uploadSuccess"></Modal>
    <UploadModal ref="modalRef" @uploadSuccess="uploadSuccess"></UploadModal>
    <EditModal ref="editmodalRef" @success="getTableData"></EditModal>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { Files, Download, Search, Upload } from "@element-plus/icons-vue";
import {
  Files,
  Download,
  Search,
  Upload,
  EditPen,
} from "@element-plus/icons-vue";
import {
  productRecordPage,
  productUploadFile,
} from "@/api/procurementManagement/procurementInvoiceLedger.js";
import { onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import Modal from "./Modal/UploadModal.vue";
import UploadModal from "./Modal/UploadModal.vue";
import EditModal from "./Modal/EditModal.vue";

defineOptions({
  name: "来票台账",
});

const modalRef = ref();
const editmodalRef = ref();

const { proxy } = getCurrentInstance();
const multipleVal = ref([]);
const {
@@ -191,14 +211,14 @@
      slot: "commonFilesRef",
      width: 150,
    },
    // {
    //   fixed: "right",
    //   width: 120,
    //   label: "操作",
    //   dataType: "slot",
    //   slot: "operation",
    //   align: "center",
    // },
    {
      fixed: "right",
      width: 120,
      label: "操作",
      dataType: "slot",
      slot: "operation",
      align: "center",
    },
  ],
  {},
  {
@@ -263,15 +283,19 @@
      break;
    case "upload":
      console.log(row.commonFiles);
      openModal(row.ticketRegistrationId);
      openUoload(row.ticketRegistrationId);
      break;
  }
};

const openModal = (id) => {
const openUoload = (id) => {
  modalRef.value.handleImport(id);
};

const openEdit = (id) => {
  editmodalRef.value.open(id);
};

// ä¸Šä¼ æˆåŠŸåŽåšä»€ä¹ˆ
const uploadSuccess = async (data) => {
  const { code } = await productUploadFile({