销项发票页面新增录入发票功能

zouyu

12 小时以前 6570b36a352edd87532dcf13a124181d4d815a39

 src/views/equipmentManagement/repair/index.vue

@@ -1,97 +1,203 @@
<template>
  <div class="app-container">
    <el-form :model="filters"
             :inline="true">
      <el-form-item label="设备名称">
        <el-input v-model="filters.deviceName"
                  style="width: 240px"
                  placeholder="请输入设备名称"
                  clearable
                  :prefix-icon="Search"
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input v-model="filters.deviceModel"
                  style="width: 240px"
                  placeholder="请选择规格型号"
                  clearable
                  :prefix-icon="Search"
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="故障现象">
        <el-input v-model="filters.remark"
                  style="width: 240px"
                  placeholder="请输入故障现象"
                  clearable
                  :prefix-icon="Search"
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="维修人">
        <el-input v-model="filters.maintenanceName"
                  style="width: 240px"
                  placeholder="请输入维修人"
                  clearable
                  :prefix-icon="Search"
                  @change="getTableData" />
      </el-form-item>
      <el-form-item label="报修日期">
        <el-date-picker v-model="filters.repairTimeStr"
                        type="date"
                        placeholder="请选择报修日期"
                        size="default"
                        @change="(date) => handleDateChange(date,2)" />
      </el-form-item>
      <el-form-item label="维修日期">
        <el-date-picker v-model="filters.maintenanceTimeStr"
                        type="date"
                        placeholder="请选择维修日期"
                        size="default"
                        @change="(date) => handleDateChange(date,1)" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="getTableData">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_list">
      <div class="actions">
        <el-text class="mx-1" size="large">设备报修</el-text>
        <el-text class="mx-1"
                 size="large">设备报修</el-text>
        <div>
          <el-button
            type="primary"
            icon="Plus"
            :disabled="multipleList.length !== 1"
            @click="addMaintain"
          >
            新增维修
          </el-button>
          <el-button type="success" icon="Van" @click="addRepair">
          <el-button type="success"
                     icon="Van"
                     @click="addRepair">
            新增报修
          </el-button>
          <el-button
            type="danger"
            icon="Delete"
            :disabled="multipleList.length <= 0"
            @click="delRepairByIds(multipleList.map((item) => item.id))"
          >
          <el-button @click="handleOut">
            导出
          </el-button>
          <el-button type="danger"
                     icon="Delete"
                     :disabled="multipleList.length <= 0 || hasFinishedStatus"
                     @click="delRepairByIds(multipleList.map((item) => item.id))">
            批量删除
          </el-button>
        </div>
      </div>
      <PIMTable
        rowKey="id"
        isSelection
        :column="columns"
        :tableData="dataList"
        :page="{
      <PIMTable rowKey="id"
                isSelection
                :column="columns"
                :tableData="dataList"
                :page="{
          current: pagination.currentPage,
          size: pagination.pageSize,
          total: pagination.total,
        }"
        @selection-change="handleSelectionChange"
      >
                @selection-change="handleSelectionChange"
                @pagination="changePage">
        <template #statusRef="{ row }">
          <el-tag v-if="row.status === 1" type="success">完结</el-tag>
          <el-tag v-if="row.status === 0" type="error">待维修</el-tag>
          <el-tag v-if="row.status === 2"
                  type="danger">失败</el-tag>
          <el-tag v-if="row.status === 1"
                  type="success">完结</el-tag>
          <el-tag v-if="row.status === 3"
                  type="info">待验收</el-tag>
          <el-tag v-if="row.status === 0"
                  type="warning">待维修</el-tag>
        </template>
        <template #operation="{ row }">
          <el-button
            type="primary"
            text
            icon="editPen"
            @click="editRepair(row.id)"
          >
          <el-button type="primary"
                     link
                     @click="viewRepair(row.id)">
            详情
          </el-button>
          <el-button type="primary"
                     link
                     :disabled="row.status === 1 || row.status === 3"
                     @click="editRepair(row.id)">
            编辑
          </el-button>
          <el-button
            type="danger"
            text
            icon="delete"
            @click="delRepairByIds(row.id)"
          >
          <el-button type="success"
                     link
                     :disabled="row.status !== 0"
                     @click="addMaintain(row)">
            维修
          </el-button>
          <el-button type="warning"
                     link
                     :disabled="row.status !== 3"
                     @click="openAcceptance(row)">
            验收
          </el-button>
          <el-button type="danger"
                     link
                     :disabled="row.status === 1 || row.status === 3"
                     @click="delRepairByIds(row.id)">
            删除
          </el-button>
          <el-button type="primary"
                     link
                     @click="openFileDialog(row)">
            附件
          </el-button>
        </template>
      </PIMTable>
    </div>
    <RepairModal ref="repairModalRef" @ok="getTableData" />
    <MaintainModal ref="maintainModalRef" @ok="getTableData" />
    <RepairModal ref="repairModalRef"
                 @ok="getTableData" />
    <MaintainModal ref="maintainModalRef"
                   @ok="getTableData" />
    <AcceptanceModal ref="acceptanceModalRef"
                     @ok="getTableData" />
    <FileList v-if="fileDialogVisible"
              v-model:visible="fileDialogVisible"
              :record-type="'device_repair'"
              :record-id="recordId" />
  </div>
</template>

<script setup>
import { usePaginationApi } from "@/hooks/usePaginationApi";
import { getRepairPage, delRepair } from "@/api/equipmentManagement/repair";
import { onMounted } from "vue";
import RepairModal from "./Modal/RepairModal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import dayjs from "dayjs";
import MaintainModal from "./Modal/MaintainModal.vue";
  import {
    onMounted,
    getCurrentInstance,
    computed,
    ref,
    defineAsyncComponent,
  } from "vue";
  import { usePaginationApi } from "@/hooks/usePaginationApi";
  import { getRepairPage, delRepair } from "@/api/equipmentManagement/repair";
  import RepairModal from "./Modal/RepairModal.vue";
  import { ElMessageBox, ElMessage } from "element-plus";
  import dayjs from "dayjs";
  import MaintainModal from "./Modal/MaintainModal.vue";
  import AcceptanceModal from "./Modal/AcceptanceModal.vue";
  const FileList = defineAsyncComponent(() =>
    import("@/components/Dialog/FileList.vue")
  );

defineOptions({
  name: "设备报修",
});
  defineOptions({
    name: "设备报修",
  });

// 模态框实例
const repairModalRef = ref();
const maintainModalRef = ref();
  const { proxy } = getCurrentInstance();

// 表格多选框选中项
const multipleList = ref([]);
  // 模态框实例
  const repairModalRef = ref();
  const maintainModalRef = ref();
  const acceptanceModalRef = ref();

// 表格钩子
const { filters, columns, dataList, pagination, getTableData, resetFilters } =
  usePaginationApi(
  // 表格多选框选中项
  const multipleList = ref([]);

  // 表格钩子
  const {
    filters,
    columns,
    dataList,
    pagination,
    getTableData,
    resetFilters,
    onCurrentChange,
  } = usePaginationApi(
    getRepairPage,
    {
      searchText: undefined,
      deviceName: undefined,
      deviceModel: undefined,
      remark: undefined,
      maintenanceName: undefined,
      repairTimeStr: undefined,
      maintenanceTimeStr: undefined,
    },
    [
      {
@@ -108,33 +214,12 @@
        label: "报修日期",
        align: "center",
        prop: "repairTime",
        formatData: (cell) => dayjs(cell).format("YYYY-MM-DD"),
        formatData: cell => dayjs(cell).format("YYYY-MM-DD"),
      },
      {
        label: "报修人",
        align: "center",
        prop: "repairName",
      },
      {
        label: "故障现象",
        align: "center",
        prop: "remark",
      },
      {
        label: "维修人",
        align: "center",
        prop: "maintenanceName",
      },
      {
        label: "维修结果",
        align: "center",
        prop: "maintenanceResult",
      },
      {
        label: "维修日期",
        align: "center",
        prop: "maintenanceTime",
        formatData: (cell) => (cell ? dayjs(cell).format("YYYY-MM-DD") : ""),
      },
      {
        label: "状态",
@@ -149,59 +234,132 @@
        dataType: "slot",
        slot: "operation",
        align: "center",
        width: "200px",
        width: "320px",
      },
    ]
  );

// 多选后做什么
const handleSelectionChange = (selectionList) => {
  multipleList.value = selectionList;
};

// 新增报修
const addRepair = () => {
  repairModalRef.value.openModal();
};

// 编辑报修
const editRepair = (id) => {
  repairModalRef.value.openEdit(id);
};

// 新增维修
const addMaintain = () => {
  const row = multipleList.value[0];
  maintainModalRef.value.open(row.id, row);
};

// 单行删除
const delRepairByIds = async (ids) => {
  ElMessageBox.confirm("确认删除报修数据, 此操作不可逆?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { code } = await delRepair(ids);
    if (code === 200) {
      ElMessage.success("删除成功");
      getTableData();
  // type === 1 维修 2报修间
  const handleDateChange = (value, type) => {
    filters.maintenanceTimeStr = null;
    filters.c = null;
    if (type === 1) {
      if (value) {
        filters.maintenanceTimeStr = dayjs(value).format("YYYY-MM-DD");
      }
    } else {
      if (value) {
        filters.repairTimeStr = dayjs(value).format("YYYY-MM-DD");
      }
    }
  });
};
    getTableData();
  };

onMounted(() => {
  getTableData();
});
  // 打开附件弹窗
  const recordId = ref(0);
  const fileDialogVisible = ref(false);

  const openFileDialog = async row => {
    recordId.value = row.id;
    fileDialogVisible.value = true;
  };

  // 多选后做什么
  const handleSelectionChange = selectionList => {
    multipleList.value = selectionList;
  };

  // 检查选中的记录中是否有完结状态的
  const hasFinishedStatus = computed(() => {
    return multipleList.value.some(item => item.status === 1);
  });

  // 新增报修
  const addRepair = () => {
    repairModalRef.value.openAdd();
  };

  // 详情查看
  const viewRepair = id => {
    repairModalRef.value.openView(id);
  };

  // 编辑报修
  const editRepair = id => {
    repairModalRef.value.openEdit(id);
  };

  // 新增维修
  const addMaintain = row => {
    maintainModalRef.value.open(row.id, row);
  };

  // 打开验收弹窗
  const openAcceptance = row => {
    acceptanceModalRef.value.open(row);
  };

  const changePage = ({ page, limit }) => {
    pagination.currentPage = page;
    pagination.pageSize = limit;
    onCurrentChange(page);
  };

  // 单行删除
  const delRepairByIds = async ids => {
    // 检查是否有完结状态的记录
    const idsArray = Array.isArray(ids) ? ids : [ids];
    const hasFinished = idsArray.some(id => {
      const record = dataList.value.find(item => item.id === id);
      return record && record.status === 1;
    });

    if (hasFinished) {
      ElMessage.warning("不能删除状态为完结的记录");
      return;
    }

    ElMessageBox.confirm("确认删除报修数据, 此操作不可逆?", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      const { code } = await delRepair(ids);
      if (code === 200) {
        ElMessage.success("删除成功");
        getTableData();
      }
    });
  };

  // 导出
  const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        proxy.download("/device/repair/export", {}, "设备报修.xlsx");
      })
      .catch(() => {
        ElMessage.info("已取消");
      });
  };

  onMounted(() => {
    getTableData();
  });
</script>

<style lang="scss" scoped>
.table_list {
  margin-top: unset;
}
.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
  .table_list {
    margin-top: unset;
  }

  .actions {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
</style>