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

<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>