计量器台账-应该是叫编辑而不是查看

zhangwencui

8 天以前 feddaa9bbeef8b41c34eab67ab2a9f69a32db348

计量器台账-应该是叫编辑而不是查看

 src/views/equipmentManagement/measurementEquipment/index.vue

@@ -1,320 +1,354 @@
<template>
    <div class="app-container">
        <div class="search_form mb20">
            <div>
                <span class="search_title">录入日期：</span>
                <el-date-picker
                    v-model="searchForm.recordDate"
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                    type="date"
                    placeholder="请选择"
                    clearable
                    style="width: 160px"
                    @change="handleQuery"
                />
                <span class="search_title ml10">计量器具编号：</span>
                <el-input v-model="searchForm.code" placeholder="请输入编号" clearable style="width: 240px" @change="handleQuery"/>
                <span class="search_title ml10">状态：</span>
                <el-select v-model="searchForm.status" placeholder="请选择状态" @change="handleQuery" style="width: 160px" clearable>
                    <el-option label="有效" :value="1"></el-option>
                    <el-option label="逾期" :value="2"></el-option>
                </el-select>
                <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
                >搜索</el-button
                >
                <el-button @click="handleReset" style="margin-left: 10px">重置</el-button>
            </div>
            <div>
                <el-button type="primary" @click="openForm('add')">新增计量器具</el-button>
                <el-button type="danger" plain @click="handleDelete">删除</el-button>
                <el-button @click="handleOut">导出</el-button>
            </div>
        </div>
        <div class="table_list">
            <PIMTable
                rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"
        :dbRowClick="dbRowClick"
        :rowClassName="rowClassName"
            ></PIMTable>
        </div>
        <form-dia ref="formDia" @close="handleQuery"></form-dia>
        <calibration-dia ref="calibrationDia" @close="handleQuery"></calibration-dia>
  <div class="app-container">
    <div class="search_form mb20">
      <div>
        <span class="search_title">录入日期：</span>
        <el-date-picker v-model="searchForm.recordDate"
                        value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        type="date"
                        placeholder="请选择"
                        clearable
                        style="width: 160px"
                        @change="handleQuery" />
        <span class="search_title ml10">计量器具编号：</span>
        <el-input v-model="searchForm.code"
                  placeholder="请输入编号"
                  clearable
                  style="width: 240px"
                  @change="handleQuery" />
        <span class="search_title ml10">状态：</span>
        <el-select v-model="searchForm.status"
                   placeholder="请选择状态"
                   @change="handleQuery"
                   style="width: 160px"
                   clearable>
          <el-option label="有效"
                     :value="1"></el-option>
          <el-option label="逾期"
                     :value="2"></el-option>
        </el-select>
        <el-button type="primary"
                   @click="handleQuery"
                   style="margin-left: 10px">搜索</el-button>
        <el-button @click="handleReset"
                   style="margin-left: 10px">重置</el-button>
      </div>
      <div>
        <el-button type="primary"
                   @click="openForm('add')">新增计量器具</el-button>
        <el-button type="danger"
                   plain
                   @click="handleDelete">删除</el-button>
        <el-button @click="handleOut">导出</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"
                :dbRowClick="dbRowClick"
                :rowClassName="rowClassName"></PIMTable>
    </div>
    <form-dia ref="formDia"
              @close="handleQuery"></form-dia>
    <calibration-dia ref="calibrationDia"
                     @close="handleQuery"></calibration-dia>
    <files-dia ref="filesDia"></files-dia>
    <rowClickDataForm ref="rowClickData"></rowClickDataForm>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, reactive, toRefs, getCurrentInstance, nextTick} from "vue";
import FormDia from "@/views/equipmentManagement/measurementEquipment/components/formDia.vue";
import {ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user.js";
import CalibrationDia from "@/views/equipmentManagement/measurementEquipment/components/calibrationDia.vue";
import {
  measuringInstrumentDelete,
  measuringInstrumentListPage,
} from "@/api/equipmentManagement/measurementEquipment.js";
import FilesDia from "./filesDia.vue";
import rowClickDataForm from "./components/rowClickData.vue"
const { proxy } = getCurrentInstance();
const userStore = useUserStore()
  import {
    onMounted,
    ref,
    reactive,
    toRefs,
    getCurrentInstance,
    nextTick,
  } from "vue";
  import FormDia from "@/views/equipmentManagement/measurementEquipment/components/formDia.vue";
  import { ElMessageBox } from "element-plus";
  import useUserStore from "@/store/modules/user.js";
  import CalibrationDia from "@/views/equipmentManagement/measurementEquipment/components/calibrationDia.vue";
  import {
    measuringInstrumentDelete,
    measuringInstrumentListPage,
  } from "@/api/equipmentManagement/measurementEquipment.js";
  import FilesDia from "./filesDia.vue";
  import rowClickDataForm from "./components/rowClickData.vue";
  const { proxy } = getCurrentInstance();
  const userStore = useUserStore();

const data = reactive({
    searchForm: {
        recordDate: "",
        code: "",
        status: "",
    },
});
const { searchForm } = toRefs(data);
  const data = reactive({
    searchForm: {
      recordDate: "",
      code: "",
      status: "",
    },
  });
  const { searchForm } = toRefs(data);

const tableColumn = ref([
    {
        label: "出厂编号",
        prop: "code",
    minWidth:150,
    align:"center"
    },
  {
    label: "计量器具名称",
    prop: "name",
    width: '160px',
    align: "center",
  },
    {
        label: "检定单位",
        prop: "unit",
        width: 200,
    align:"center"
    },
    {
        label: "证书编号",
        prop: "model",
        width:200,
    align:"center"
    },
    {
        label: "最新鉴定日期",
        prop: "mostDate",
        width: 130,
    align:"center"
    },
    {
        label: "录入人",
        prop: "userName",
        width: 130,
    align:"center"
    },
    {
        label: "录入日期",
        prop: "recordDate",
    align:"center",
    minWidth: 130
    },
    {
        label: "有效日期",
        prop: "valid",
        width: 130,
    align:"center"
    },
  {
    label: "状态",
    prop: "status",
    width: 130,
    align: "center",
    formatData: (params) => {
      if (params === 1) {
        return "有效";
      } else if (params === 2) {
        return "逾期";
      } else {
        return null;
      }
    }
  },
    {
        dataType: "action",
        label: "操作",
        align: "center",
        width: '130',
        fixed: 'right',
        operation: [
      {
          name: "附件",
          type: "text",
          clickFun: (row) => {
          openFilesFormDia(row);
          },
  const tableColumn = ref([
    {
      label: "出厂编号",
      prop: "code",
      minWidth: 150,
      align: "center",
    },
    {
      label: "计量器具名称",
      prop: "name",
      width: "160px",
      align: "center",
    },
    {
      label: "检定单位",
      prop: "unit",
      width: 200,
      align: "center",
    },
    {
      label: "证书编号",
      prop: "model",
      width: 200,
      align: "center",
    },
    {
      label: "最新鉴定日期",
      prop: "mostDate",
      width: 130,
      align: "center",
    },
    {
      label: "录入人",
      prop: "userName",
      width: 130,
      align: "center",
    },
    {
      label: "录入日期",
      prop: "recordDate",
      align: "center",
      minWidth: 130,
    },
    {
      label: "有效日期",
      prop: "valid",
      width: 130,
      align: "center",
    },
    {
      label: "状态",
      prop: "status",
      width: 130,
      align: "center",
      formatData: params => {
        if (params === 1) {
          return "有效";
        } else if (params === 2) {
          return "逾期";
        } else {
          return null;
        }
      },
            {
                name: "查看",
                type: "text",
                clickFun: (row) => {
                    openCalibrationDia("verifying", row);
                },
            },
        ],
    },
]);
const tableData = ref([]);
const tableLoading = ref(false);
const rowClickData = ref([])
const filesDia = ref()
const page = reactive({
    current: 1,
    size: 100,
    total: 0,
});
const selectedRows = ref([]);
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      width: "130",
      fixed: "right",
      operation: [
        {
          name: "附件",
          type: "text",
          clickFun: row => {
            openFilesFormDia(row);
          },
        },
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openCalibrationDia("verifying", row);
          },
        },
      ],
    },
  ]);
  const tableData = ref([]);
  const tableLoading = ref(false);
  const rowClickData = ref([]);
  const filesDia = ref();
  const page = reactive({
    current: 1,
    size: 100,
    total: 0,
  });
  const selectedRows = ref([]);

// 打开附件弹框
const openFilesFormDia = (row) => {
    filesDia.value?.openDialog(row,'measuring_instrument_ledger')
};
  // 打开附件弹框
  const openFilesFormDia = row => {
    filesDia.value?.openDialog(row, "measuring_instrument_ledger");
  };

const dbRowClick = (row)=>{
  rowClickData.value?.openDialog(row)
}
  const dbRowClick = row => {
    rowClickData.value?.openDialog(row);
  };

// 行样式：快到期（7天内）或逾期标红
const rowClassName = ({ row }) => {
  console.log('rowClassName called:', row);
  // valid 是有效天数，mostDate 是最新检定日期
  if (row.valid && row.mostDate) {
    const mostDate = new Date(row.mostDate);
    // 计算到期日期 = 检定日期 + 有效天数
    const validDays = parseInt(row.valid) || 0;
    const expireDate = new Date(mostDate);
    expireDate.setDate(expireDate.getDate() + validDays);
    
    const now = new Date();
    const diffDays = Math.ceil((expireDate - now) / (1000 * 60 * 60 * 24));
    console.log('row:', row.code, 'validDays:', validDays, 'expireDate:', expireDate, 'diffDays:', diffDays);
    // 7天内到期或已逾期都标红
    if (diffDays <= 7) {
      console.log('return warning-row');
      return 'warning-row';
  // 行样式：快到期（7天内）或逾期标红
  const rowClassName = ({ row }) => {
    console.log("rowClassName called:", row);
    // valid 是有效天数，mostDate 是最新检定日期
    if (row.valid && row.mostDate) {
      const mostDate = new Date(row.mostDate);
      // 计算到期日期 = 检定日期 + 有效天数
      const validDays = parseInt(row.valid) || 0;
      const expireDate = new Date(mostDate);
      expireDate.setDate(expireDate.getDate() + validDays);

      const now = new Date();
      const diffDays = Math.ceil((expireDate - now) / (1000 * 60 * 60 * 24));
      console.log(
        "row:",
        row.code,
        "validDays:",
        validDays,
        "expireDate:",
        expireDate,
        "diffDays:",
        diffDays
      );
      // 7天内到期或已逾期都标红
      if (diffDays <= 7) {
        console.log("return warning-row");
        return "warning-row";
      }
    } else {
      console.log("row missing valid or mostDate:", row.valid, row.mostDate);
    }
  } else {
    console.log('row missing valid or mostDate:', row.valid, row.mostDate);
  }
  return '';
}
    return "";
  };

// 表格选择数据
const handleSelectionChange = (selection) => {
    selectedRows.value = selection;
};
const formDia = ref()
const calibrationDia = ref()
  // 表格选择数据
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };
  const formDia = ref();
  const calibrationDia = ref();

// 查询列表
/** 搜索按钮操作 */
const handleQuery = () => {
    page.current = 1;
    getList();
};
  // 查询列表
  /** 搜索按钮操作 */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };

// 重置搜索条件
const handleReset = () => {
    searchForm.value.recordDate = "";
    searchForm.value.code = "";
    searchForm.value.status = "";
    page.current = 1;
    getList();
};
const pagination = (obj) => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
};
const getList = () => {
    tableLoading.value = true;
    measuringInstrumentListPage({ ...searchForm.value, ...page }).then((res) => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
    }).catch((err) => {
        tableLoading.value = false;
    })
};
  // 重置搜索条件
  const handleReset = () => {
    searchForm.value.recordDate = "";
    searchForm.value.code = "";
    searchForm.value.status = "";
    page.current = 1;
    getList();
  };
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  const getList = () => {
    tableLoading.value = true;
    measuringInstrumentListPage({ ...searchForm.value, ...page })
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
      })
      .catch(err => {
        tableLoading.value = false;
      });
  };

// 打开弹框
const openForm = (type, row) => {
    nextTick(() => {
        formDia.value?.openDialog(type, row)
    })
};
// 打开检定校准弹框
const openCalibrationDia = (type, row) => {
    nextTick(() => {
        calibrationDia.value?.openDialog(type, row)
    })
}
  // 打开弹框
  const openForm = (type, row) => {
    nextTick(() => {
      formDia.value?.openDialog(type, row);
    });
  };
  // 打开检定校准弹框
  const openCalibrationDia = (type, row) => {
    nextTick(() => {
      calibrationDia.value?.openDialog(type, row);
    });
  };

const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
        ids = selectedRows.value.map((item) => item.id);
    } else {
        proxy.$modal.msgWarning("请选择数据");
        return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            tableLoading.value = true;
            measuringInstrumentDelete(ids)
                .then((res) => {
                    proxy.$modal.msgSuccess("删除成功");
                    getList();
                })
                .finally(() => {
                    tableLoading.value = false;
                });
        })
        .catch(() => {
            proxy.$modal.msg("已取消");
        });
};
// 导出
const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            proxy.download("/measuringInstrumentLedger/export", {}, "计量器具台账.xlsx");
        })
        .catch(() => {
            proxy.$modal.msg("已取消");
        });
};
onMounted(() => {
    getList();
});
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map(item => item.id);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        tableLoading.value = true;
        measuringInstrumentDelete(ids)
          .then(res => {
            proxy.$modal.msgSuccess("删除成功");
            getList();
          })
          .finally(() => {
            tableLoading.value = false;
          });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  // 导出
  const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        proxy.download(
          "/measuringInstrumentLedger/export",
          {},
          "计量器具台账.xlsx"
        );
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  onMounted(() => {
    getList();
  });
</script>

<style scoped>
:deep(.el-table .warning-row) {
  background-color: #fef0f0 !important;
}
:deep(.el-table .warning-row:hover > td) {
  background-color: #f9d5d5 !important;
}
:deep(.el-table .el-table__body tr.warning-row td) {
  background-color: #fef0f0 !important;
}
  :deep(.el-table .warning-row) {
    background-color: #fef0f0 !important;
  }
  :deep(.el-table .warning-row:hover > td) {
    background-color: #f9d5d5 !important;
  }
  :deep(.el-table .el-table__body tr.warning-row td) {
    background-color: #fef0f0 !important;
  }
</style>