feature/测试记录页面

package.json

@@ -68,7 +68,7 @@
     "uuid": "^9.0.1",
     "vue": "^3.4.21",
     "vue-i18n": "9.9.1",
-    "vue-pdf-embed": "^2.0.2",
+    "vue-pdf-embed": "2.0.2",
     "vue-router": "^4.3.0",
     "vue3-pdfjs": "^0.1.6",
     "xlsx": "^0.18.5"

src/api/prosteps/ceshijilu.ts

@@ -0,0 +1,31 @@
+import request from "@/utils/request";
+
+// 模版获取
+export function templateData(data: any) {
+  return request({
+    url: `/api/v1/operation/test/record/page`,
+    method: "post",
+    data,
+  });
+}
+export function getData(data: any) {
+  return request({
+    url: `/api/v1/process/test/record/page`,
+    method: "post",
+    data,
+  });
+}
+export function addData(data: any) {
+  return request({
+    url: `/api/v1/process/test/record/add`,
+    method: "post",
+    data,
+  });
+}
+export function delData(data: any) {
+  return request({
+    url: `/api/v1/process/test/record/del`,
+    method: "post",
+    data,
+  });
+}

src/router/modules/process.ts

@@ -104,6 +104,15 @@ export default {
             keepAlive: true,
           },
         },
+        {
+          path: "ceshijilu",
+          component: () => import("@/views/pro-steps/components/ceshijilu.vue"),
+          name: "Ceshijilu",
+          meta: {
+            back: true,
+            keepAlive: true,
+          },
+        },
       ],
     },
     {

src/views/pro-steps/components/ceshijilu.vue

@@ -0,0 +1,254 @@
+<template>
+  <div>
+    <div v-if="!addStatus">
+      <div class="stepsViewScrollH">
+        <div class="left">
+          <el-table :data="tpDatas" class="tableView">
+            <el-table-column
+              fixed
+              prop="fileName"
+              label="模版名称"
+              align="center"
+            />
+
+            <el-table-column label="操作" fixed="right">
+              <template #default="scope">
+                <el-button
+                  link
+                  v-if="scope.row.writeData !== ''"
+                  class="btnText"
+                  type="primary"
+                  @click="downLoad(scope.row.filePath, scope.row.fileName)"
+                >
+                  下载
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="right">
+          <div class="btns">
+            <el-button type="primary" class="btn" @click="addStatus = true"
+              >新增</el-button
+            >
+          </div>
+          <div style="border-radius: 16px">
+            <el-table :data="fileDatas" class="tableView">
+              <el-table-column
+                fixed
+                prop="fileName"
+                label="测试记录文件名称"
+                align="center"
+              />
+
+              <el-table-column label="操作" fixed="right" width="200">
+                <template #default="scope">
+                  <el-button
+                    link
+                    v-if="scope.row.writeData !== ''"
+                    class="btnText"
+                    type="primary"
+                    @click="downLoad(scope.row.filePath, scope.row.fileName)"
+                  >
+                    下载
+                  </el-button>
+                  <el-button
+                    link
+                    v-if="scope.row.writeData !== ''"
+                    class="btnText"
+                    type="primary"
+                    @click="delDatas(scope.row.id)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <div :key="addKey" class="addForm">
+        <div>
+          <el-form
+            :model="form"
+            label-width="100px"
+            ref="formRef"
+            :rules="rules"
+          >
+            <el-form-item label="文件" prop="filePath">
+              <FilesUpload
+                v-model:src="form.filePath"
+                ref="uploadRef"
+                v-model:src-list="srcList"
+                v-model:pdf-list="pdfUrlList"
+                v-model:file-name-list="fileNameList"
+                :limit="1"
+                :generate-pdf="true"
+                @finished="testFiles"
+              />
+            </el-form-item>
+          </el-form>
+          <div style="padding-left: 80px">
+            <el-button class="leftBtn" @click="resetAdd">取消</el-button>
+            <el-button class="rightBtn" @click="submit" type="primary"
+              >确认</el-button
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import {
+  templateData,
+  addData,
+  getData,
+  delData,
+} from "@/api/prosteps/ceshijilu";
+import { useProcessStore } from "@/store";
+import { downloadFile } from "@/utils/downLoad";
+
+defineOptions({
+  name: "Ceshijilu",
+});
+const addKey = ref(false);
+const addStatus = ref(false);
+const pdfUrlList = ref([]);
+const srcList = ref([]);
+const fileNameList = ref([]);
+const testFiles = () => {
+  form.value.filePath = srcList.value[0];
+};
+const form = ref({
+  fileName: "",
+});
+const formRef = ref(null);
+const rules = reactive({
+  filePath: [{ required: true, trigger: "change" }],
+});
+const resetAdd = () => {
+  addKey.value = !addKey.value;
+  addStatus.value = false;
+  form.value.filePath = "";
+  pdfUrlList.value = [];
+  srcList.value = [];
+  fileNameList.value = [];
+};
+const delDatas = async (id) => {
+  const { data, code } = await delData({
+    id,
+  });
+  if (code == "200") {
+    ElMessage.success("操作成功！");
+    getDatas();
+  }
+};
+//新增提交
+const submit = async () => {
+  await formRef.value.validate(async (valid) => {
+    if (valid) {
+      const { data, code } = await addData({
+        fileName: fileNameList.value[0],
+        filePath: srcList.value[0],
+        operationId: store.odersData.operationId,
+        // pdfPath: pdfUrlList.value[0],
+        pdfPath: srcList.value[0],
+        processId: store.scanInfo.id,
+        seqNo: store.scanInfo.seqNo,
+        workOrderCode: store.odersData.workOrderCode,
+      });
+      if (code == "200") {
+        ElMessage.success("新增成功！");
+        resetAdd();
+        getDatas();
+      }
+    } else {
+      ElMessage.error("请检查表单");
+    }
+  });
+};
+
+const store = useProcessStore();
+const tpDatas = ref([]);
+const fileDatas = ref([]);
+const downLoad = async (url, name) => {
+  let names = name.split(".")[0];
+  let resUrl = url;
+  await downloadFile(resUrl, names);
+};
+//模版数据获取
+const getTpDatas = async () => {
+  const { data } = await templateData({
+    pageNo: 1,
+    pageSize: 999,
+    processId: store.odersData.operationId,
+  });
+  tpDatas.value = data.records;
+};
+//数据列表获取
+const getDatas = async () => {
+  const { data } = await getData({
+    pageNo: 1,
+    pageSize: 999,
+    processId: store.scanInfo.id,
+  });
+  fileDatas.value = data.records;
+};
+onMounted(() => {
+  getTpDatas();
+  getDatas();
+});
+</script>
+<style lang="scss" scoped>
+.tableView {
+  width: 100%;
+  height: calc(100vh - 290px);
+  padding: 20px 0px;
+  border-radius: 16px;
+}
+.addForm {
+  width: 100%;
+  height: calc(100vh - 290px);
+  display: flex;
+  background-color: white;
+  border-radius: 16px;
+  justify-content: center;
+  align-items: center;
+}
+.stepsViewScrollH {
+  width: 100%;
+  height: calc(100vh - 270px);
+  display: flex;
+  padding: 20px;
+  padding-top: 0px;
+  .left {
+    width: 25%;
+    height: 100%;
+    border-radius: 16px;
+    background-color: white;
+  }
+  .right {
+    flex: 1;
+    border-radius: 16px;
+    margin-left: 20px;
+    .tableView {
+      width: 100%;
+      height: calc(100vh - 340px);
+      padding: 20px 0px;
+      border-radius: 16px !important;
+    }
+    .btns {
+      height: 50px;
+      display: flex;
+      align-items: center;
+      background-color: rgb(241, 243, 245);
+      .btn {
+        height: 30px;
+      }
+    }
+  }
+}
+</style>

src/views/pro-steps/components/excel.vue

@@ -0,0 +1,256 @@
+<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"
+        :checkStatus="true"
+        :verifications="setting"
+      />
+    </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 setting = ref([]);
+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;
+    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,
+    });
+    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>

src/views/pro-steps/index.vue

@@ -155,6 +155,12 @@ const defaultComponents = [
     path: "mingpaibangding",
     name: "Mingpaibangding",
   },
+  {
+    compentName: "测试记录",
+    iconName: "mingpai",
+    path: "ceshijilu",
+    name: "Ceshijilu",
+  },
 ];
 //当前路由在setpComponents中的index
 const selectIndex = ref(0);