JG-CLIENT-TEMP/src/views/pro-operation/check-out/roll-check.vue

<template>
  <div v-if="!excelViewStatus">
    <el-table :data="tableData" class="tableView">
      <el-table-column align="center" fixed label="管号" prop="seqNo" />
      <el-table-column align="center" fixed label="操作人" prop="checkUser" />
      <el-table-column
        align="center"
        label="是否破坏性检验"
        prop="isDestruction"
      >
        <template #default="scope">
          {{ scope.row.isDestruction ? "是" : "否" }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        label="是否破坏性检验"
        prop="isDestruction"
      >
        <template #default="scope">
          {{ dictS.getLableByValue("excel_type", scope.row.formType) }}
        </template>
      </el-table-column> -->
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <!-- <el-button
            v-if="scope.row.writeData !== ''"
            class="btnText"
            link
            type="primary"
            @click="handleLook(scope.row)"
          >
            查看
          </el-button> -->
          <!-- <el-button
            class="btnText"
            link
            type="primary"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button> -->
          <el-button
            class="btnText"
            link
            type="primary"
            @click="del(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-model:limit="page.pageSize"
      v-model:page="page.pageNo"
      :total="page.total"
      size="large"
      @pagination="dataList"
      position="right"
    />
  </div>
  <!-- <div v-else class="excelView">
    <div class="view">
      <ExcelView
        ref="excelViewRef"
        v-model:data="excelData"
        :checkStatus="true"
        :option="excelOptions"
        :verifications="setting"
      />
    </div>
    <div class="opeara">
      <div>
        <el-button
          v-if="excelOptions.edit"
          class="btn"
          type="primary"
          @click="submitData"
          >提交
        </el-button>
        <el-button class="btn" @click="resetData"
          >{{ excelOptions.edit ? "取消" : "返回" }}
        </el-button>
      </div>
    </div>
  </div> -->
</template>
<script setup>
import { shoujianList, seqList, delItem } from "@/api/prosteps/dianjian";
import { setExcelData } from "@/api/prosteps/excel";
import { useDictionaryStore, useProcessStore } from "@/store";

const props = defineProps({
  userName: String,
});
const page = reactive({
  pageSize: 10,
  pageNo: 1,
  total: 0,
});
const emits = defineEmits(["editOpen"]);
const del = async (id) => {
  const { code } = await delItem({
    id: id,
  });
  if (code == "200") {
    ElMessage.success("操作成功！");
    dataList();
  }
};
const handleEdit = (row) => {
  emits("editOpen", 1, row);
};
const setting = ref([]);
const dictS = useDictionaryStore();
const store = useProcessStore();
const tableData = ref([]);
const dataList = async () => {
  const { data } = await shoujianList({
    checkType: 2,
    pageNo: page.pageNo,
    pageSize: page.pageSize,
    processId: store.scanInfo.id,
  });
  tableData.value = data.records;
  page.total = data.totalCount;
};
const useExcelHook = () => {
  const excelViewStatus = ref(false);
  const excelData = ref(null);
  const excelViewRef = ref(null);
  const excelSelectRow = ref(null);
  const excelOptions = ref({
    opreaState: true,
    in: true,
    out: true,
    print: true,
    edit: true,
    inName: "",
  });
  const resetData = () => {
    if (excelViewRef.value) {
      excelViewRef.value.saveCellData();
      excelViewRef.value.reset();
    }
    excelViewStatus.value = false;
    excelData.value = null;
    excelSelectRow.value = null;
    excelOptions.value = {
      opreaState: true,
      in: true,
      out: true,
      print: true,
      edit: true,
      inName: "",
    };
  };
  const reset = async (row) => {
    excelData.value = "";
    const { data, code } = await setExcelData({
      excelData: excelData.value,
      formName: row.formName,
      excelFormId: row.excelFormId,
      formType: row.formType,
      processId: store.scanInfo.id,
    });
    if (code == "200") {
      ElMessage.success("操作成功！");
      row.dialogVisible = false;
      resetData();
      dataList();
    }
  };
  // const handleEdit = (row) => {
  //   excelSelectRow.value = row;
  //   if (row.writeData == "") {
  //     excelData.value = JSON.parse(row.excelData);
  //   } else {
  //     excelData.value = JSON.parse(row.writeData);
  //   }
  //   excelOptions.value.inName = row.formName;
  //   excelViewStatus.value = true;
  //   setting.value = row.settings;
  // };
  const handleLook = (row) => {
    excelOptions.value.edit = false;
    excelData.value = JSON.parse(row.writeData);
    excelOptions.value.inName = row.formName;
    excelViewStatus.value = true;
  };
  const submitData = async () => {
    excelData.value = excelViewRef.value.getData();
    const { data, code } = await setExcelData({
      excelData: excelData.value,
      excelFormId: excelSelectRow.value.excelFormId,
      formName: excelSelectRow.value.formName,
      formType: excelSelectRow.value.formType,
      processId: store.scanInfo.id,
      workOrderId: store.scanInfo.workOrderId,
      userName: props.userName,
    });
    if (code === "200") {
      ElMessage.success("操作成功！");
      resetData();
      dataList();
    }
  };
  return {
    excelViewStatus,
    excelOptions,
    excelData,
    excelViewRef,
    resetData,
    submitData,
    handleLook,
    reset,
  };
};
const {
  excelViewStatus,
  excelOptions,
  excelData,
  excelViewRef,
  resetData,
  submitData,
  handleLook,
  reset,
} = useExcelHook();
onMounted(() => {
  dataList();
});
defineExpose({
  dataList,
});
</script>
<style lang="scss" scoped>
.btnText {
  font-size: $f20;
  color: black;
}

.excelView {
  width: 100%;
  height: calc(100vh - 275px);
  padding: 20px;
  display: flex;
  background-color: white;
  border-radius: 16px;

  .view {
    position: relative;
    flex: 1;
    height: calc(100vh - 325px);
  }

  .opeara {
    width: 200px;
    height: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
  }
}

.tableView {
  width: 100%;
  height: calc(100vh - 370px);
  padding: 20px 0px;
  border-radius: 16px;
}

.btn {
  width: 180px;
  border-radius: 16px;
  height: 40px;
  font-size: 16px;
  margin: 10px 0;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

:deep(.el-table__inner-wrapper::before) {
  display: none;
}
</style>