JG-CLIENT-TEMP/src/views/pro-steps/components/excel.vue

<template>
  <div v-if="!excelViewStatus">
    <el-table :data="tableData" class="tableView">
      <el-table-column fixed prop="formName" label="表格名称" align="center" />
      <el-table-column prop="formType" label="表格类型" align="center">
        <template #default="scope">
          {{ dictS.getLableByValue("excel_type", scope.row.formType) }}
        </template>
      </el-table-column>
      <el-table-column prop="writeData" align="center" label="是否已填报">
        <template #default="scope">
          <span
            :class="{
              'red-text': scope.row.writeData === '',
              'green-text': scope.row.writeData !== '',
            }"
          >
            {{ scope.row.writeData === "" ? "否" : "是" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template #default="scope">
          <el-button
            link
            v-if="scope.row.writeData !== ''"
            class="btnText"
            type="primary"
            @click="handleLook(scope.row)"
          >
            查看
          </el-button>
          <el-button
            link
            class="btnText"
            type="primary"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>

          <el-popconfirm
            v-if="scope.row.writeData !== ''"
            :visible="scope.row.dialogVisible"
            title="您确认重置吗？（重置此操作不可逆）"
            width="200"
            @cancel="scope.row.dialogVisible = false"
            @confirm="reset(scope.row)"
          >
            <el-button> 取消 </el-button>
            <el-button type="primary"> 确认 </el-button>
            <template #reference>
              <el-button
                link
                class="btnText"
                type="primary"
                @click="scope.row.dialogVisible = true"
                >重置</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="excelView" v-else>
    <div class="view">
      <ExcelView
        v-model:data="excelData"
        :option="excelOptions"
        ref="excelViewRef"
      />
    </div>
    <div class="opeara">
      <div>
        <el-button
          v-if="excelOptions.edit"
          type="primary"
          class="btn"
          @click="submitData"
          >提交</el-button
        >
        <el-button class="btn" @click="resetData">{{
          excelOptions.edit ? "取消" : "返回"
        }}</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
defineOptions({
  name: "Excel",
});
import { getExcelData, setExcelData } from "@/api/prosteps/excel";
import { useProcessStore } from "@/store";
import { useDictionaryStore } from "@/store";
const dictS = useDictionaryStore();
const store = useProcessStore();
const tableData = ref([]);
const dataList = async () => {
  const { data } = await getExcelData(store.scanInfo.id);
  tableData.value = data;
};
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;
  };
  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,
    });
    if (code == "200") {
      ElMessage.success("操作成功！");
      resetData();
      dataList();
    }
  };
  return {
    excelViewStatus,
    excelOptions,
    excelData,
    excelViewRef,
    resetData,
    handleEdit,
    submitData,
    handleLook,
    reset,
  };
};
const {
  excelViewStatus,
  excelOptions,
  excelData,
  excelViewRef,
  resetData,
  handleEdit,
  submitData,
  handleLook,
  reset,
} = useExcelHook();
onMounted(() => {
  dataList();
});
</script>
<style lang="scss" scoped>
.btnText {
  font-size: $f20;
  color: black;
}
.excelView {
  width: 100%;
  height: calc(100vh - 260px);
  padding: 20px;
  display: flex;
  background-color: white;
  border-radius: 16px;
  .view {
    position: relative;
    flex: 1;
    height: calc(100vh - 300px);
  }
  .opeara {
    width: 200px;
    height: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
  }
}
.tableView {
  width: 100%;
  height: calc(100vh - 260px);
  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;
}
</style>