feature/生产履历在线表格

src/api/process/traceability.ts

@@ -75,3 +75,10 @@ export function media(data: any) {
     data,
   });
 }
+export function excel(data: any) {
+  return request({
+    url: "/api/v1/ProcessFormData/page",
+    method: "post",
+    data,
+  });
+}

src/views/traceability/components/excel.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="collapseStyle">
+    <el-scrollbar
+      v-loading="loading"
+      style="border: 1px solid #ebeef5"
+      :height="tableHeight"
+    >
+      <el-collapse accordion v-model="activeNames">
+        <el-collapse-item
+          v-for="(item, index) in materialsData"
+          :key="item"
+          :title="item.operationName"
+          :name="index"
+        >
+          <el-table :data="item.children" border>
+            <el-table-column prop="formName" label="表格名称" />
+            <el-table-column prop="formType" label="表格类型">
+              <template #default="scope">
+                {{ dictS.getLableByValue("excel_type", scope.row.formType) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" prop="operation">
+              <template #default="{ row }">
+                <el-button
+                  style="font-size: 18px; color: black"
+                  link
+                  @click="showExcelDialog(row)"
+                  >查看</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-collapse-item>
+      </el-collapse>
+      <Empty v-if="materialsData.length < 1" />
+    </el-scrollbar>
+    <Pagination
+      position="right"
+      :page="page"
+      :limit="limit"
+      :total="total"
+      @pagination="getPagination"
+    />
+    <el-dialog
+      v-model="excelDialogVisible"
+      title="查看表单"
+      :append-to-body="true"
+      :destroy-on-close="true"
+      width="70%"
+      height="80%"
+      @close="excelDialogVisible = true"
+    >
+      <TaskExcel v-if="excelDialogVisible" :data="excelData" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { useProcessStore } from "@/store";
+import { excel } from "@/api/process/traceability";
+import { useDictionaryStore } from "@/store";
+import TaskExcel from "./taskExcel.vue";
+const dictS = useDictionaryStore();
+const store = useProcessStore();
+const activeNames = ref([0]);
+const updataShow = ref(false);
+const updateTitle = ref("表格数据");
+const page = ref(1);
+const limit = ref(10);
+const total = ref(10);
+const materialsData = ref([]);
+const tableHeight = ref(null);
+const loading = ref(false);
+//  查看excel相关
+const excelDialogVisible = ref(false);
+const showExcelDialog = async (row) => {
+  excelData.value = row;
+  excelDialogVisible.value = true;
+};
+const excelData = ref(null);
+const getPagination = async () => {
+  loading.value = true;
+  try {
+    const { data } = await excel({
+      pageNo: page.value,
+      pageSize: limit.value,
+      seqNo: store.useSeqNo,
+      workOrderCode: store.odersData.workOrderCode,
+    });
+    // total.value = data.totalCount;
+    materialsData.value = data;
+  } catch {
+  } finally {
+    loading.value = false;
+  }
+};
+//动态控制高度
+const setTableHeight = () => {
+  tableHeight.value =
+    Number(document.getElementById("tabBox").offsetHeight) - 70;
+};
+onMounted(() => {
+  getPagination();
+  setTableHeight();
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/traceability/components/taskExcel.vue

@@ -0,0 +1,342 @@
+<template>
+  <div class="dialogBody">
+    <div class="exView" :key="excelKey1">
+      <ExcelView
+        ref="excelViewRef"
+        :option="options"
+        @confirm="confirm"
+        v-model:data="exceldata"
+        :checkStatus="true"
+        :verifications="setting"
+      />
+    </div>
+    <!--    <div class="btns" v-if="options.edit !== false">-->
+    <!--      <el-button class="btn" type="success" @click="submit">确 定 </el-button>-->
+    <!--      <el-button class="btn" @click="reset">重 置 </el-button>-->
+    <!--      <el-button class="btn" type="info" @click="cancel">取 消 </el-button>-->
+    <!--    </div>-->
+    <!--    <div class="btns" v-else>-->
+    <!--      <el-button class="btn" type="info" @click="cancel">返 回 </el-button>-->
+    <!--    </div>-->
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import ExcelView from "@/components/ExcelView/index.vue";
+const setting = ref([]);
+const props = defineProps({
+  data: {
+    type: Object,
+  },
+});
+const rowData = ref({});
+const emits = defineEmits(["update:modelValue", "close", "refresh"]);
+const excelKey1 = ref(false);
+
+const reset = () => {
+  exceldata.value = JSON.parse(rowData.value.excelData);
+  excelKey1.value = !excelKey1.value;
+};
+const cancel = () => {
+  excelKey1.value = !excelKey1.value;
+  options.value.edit = true;
+  emits("close");
+};
+// 存放操作表格相关业务代码
+const useAddTemplateHook = () => {
+  //excelView 组件实例
+  const excelViewRef = ref(null);
+  //表格配置项
+  const options = ref({
+    //头部操作区域
+    opreaState: true,
+    //导入按钮展示
+    in: false,
+    //导出按钮展示
+    out: false,
+    print: true,
+    //编辑状态 false：为查看状态
+    edit: false,
+    //当前操作表格名称
+    inName: "",
+    opreaTitle: false,
+  });
+  //双向绑定表格data变量
+  const exceldata = ref(null);
+  //控制表格组件展示界面变量（包括表格展示页面和操作页面）
+  const excelStatus = ref(true);
+
+  //获取组件内实时数据赋值到外层
+  const confirm = (data: any) => {
+    exceldata.value = data;
+  };
+  return {
+    excelStatus,
+    options,
+    confirm,
+    exceldata,
+    excelViewRef,
+  };
+};
+const { options, confirm, exceldata, excelViewRef } = useAddTemplateHook();
+const useFormHook = () => {
+  //KEY告知组件刷新
+  const excelKey = ref(1);
+  //表单data
+  const formVlaue = reactive({ formType: null, formName: null, state: null });
+  //表单是否为编辑状态变量
+  const operaEditStatus = ref(false);
+  //选中的行id
+  const selectId = ref(null);
+  //表单ref实例
+  const formRef = ref(null);
+  //表单校验规则
+  const rules = reactive({
+    formName: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+    formType: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+    state: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+  });
+  //新增模版
+  const submitForm = async (formEl: any) => {
+    //@ts-ignore;
+    excelViewRef.value.confirm();
+    if (exceldata.value == null) return ElMessage.error("请提供表格数据！");
+    if (!formEl) return;
+    await formEl.validate(async (valid: any, fields: any) => {
+      if (valid) {
+        const { data, code } = await addExcel({
+          ...formVlaue,
+          excelData: exceldata.value,
+        });
+        if (code == "200") {
+          ElMessage.success("添加成功！");
+          resetData();
+          dataEditList();
+          editTep(data);
+        }
+      }
+    });
+  };
+  //更新行内信息
+  const updateExForm = async (formEl: any) => {
+    //@ts-ignore;
+    excelViewRef.value.saveCellData();
+    //@ts-ignore;
+    excelViewRef.value.confirm();
+    if (exceldata.value == null) return ElMessage.error("请提供表格数据！");
+    if (!formEl) return;
+    await formEl.validate(async (valid: any, fields: any) => {
+      if (valid) {
+        const { data, code } = await updateExcel({
+          ...formVlaue,
+          excelData: exceldata.value,
+          id: selectId.value,
+          settings: settings.value,
+        });
+        if (code == "200") {
+          ElMessage.success("修改成功！");
+          resetData();
+          dataEditList();
+        }
+      }
+    });
+  };
+  //表达数据重置
+  const resetForm = (formEl: any) => {
+    if (!formEl) return;
+    formEl.resetFields();
+  };
+  return {
+    formVlaue,
+    formRef,
+    rules,
+    selectId,
+    excelKey,
+    operaEditStatus,
+    submitForm,
+    resetForm,
+    updateExForm,
+  };
+};
+
+const {
+  formVlaue,
+  formRef,
+  rules,
+  selectId,
+  excelKey,
+  operaEditStatus,
+  submitForm,
+  resetForm,
+  updateExForm,
+} = useFormHook();
+//表格新增 分页
+const useAddFormHook = () => {
+  const formRef1 = ref(null);
+  const settings = ref([]);
+  const searchForm = ref({
+    pageNo: 1,
+    pageSize: 5,
+    totalPages: 0,
+  });
+  const addForm = ref({
+    paramName: "",
+    position: "",
+  });
+  const addPage = () => {
+    searchForm.value.pageNo = searchForm.value.pageNo + 1;
+    getSettingData();
+  };
+  const deletePage = () => {
+    searchForm.value.pageNo = searchForm.value.pageNo - 1;
+    getSettingData();
+  };
+  const getSettingData = async () => {
+    const { data } = await getSettingsData({
+      excelFormId: selectId.value,
+      ...searchForm.value,
+    });
+    settings.value = data.records;
+    if (settings.value.length == 0 && searchForm.value.pageNo > 1) {
+      deletePage();
+    }
+    searchForm.value.totalPages = data.totalPages;
+  };
+  const addSettings = async () => {
+    const { data, code } = await addSettingsData({
+      excelFormId: selectId.value,
+      ...addForm.value,
+    });
+    if (code == "200") {
+      ElMessage.success("添加成功");
+      resetAddForm();
+      getSettingData();
+    }
+  };
+  const deleteSettings = async (id: any) => {
+    const { data, code } = await deleteSettingsData({ id: id });
+    if (code == "200") {
+      ElMessage.success("删除成功");
+      getSettingData();
+    }
+  };
+
+  const resetAddForm = () => {
+    addForm.value = {
+      paramName: "",
+      position: "",
+    };
+    searchForm.value = {
+      pageNo: 1,
+      pageSize: 5,
+      totalPages: 0,
+    };
+    settings.value = [];
+  };
+  const creatAddForm = async () => {
+    await formRef1.value.validate(async (valid: any, fields: any) => {
+      if (valid) {
+        addSettings();
+      }
+    });
+  };
+  const addRules = reactive({
+    paramName: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+    position: [
+      {
+        required: true,
+        trigger: "blur",
+      },
+    ],
+  });
+  return {
+    formRef1,
+    addForm,
+    searchForm,
+    settings,
+    addRules,
+    creatAddForm,
+    resetAddForm,
+    getSettingData,
+    addSettings,
+    addPage,
+    deleteSettings,
+    deletePage,
+  };
+};
+
+const {
+  formRef1,
+  addForm,
+  searchForm,
+  settings,
+  addRules,
+  creatAddForm,
+  deletePage,
+  addPage,
+  resetAddForm,
+  getSettingData,
+  deleteSettings,
+} = useAddFormHook();
+watch(
+  () => props.data,
+  () => {
+    //@ts-ignore
+    rowData.value = props.data;
+    exceldata.value = JSON.parse(rowData.value.excelData);
+    excelKey1.value = !excelKey1.value;
+    if (rowData.value.lookStatus == true) {
+      options.value.edit = false;
+    }
+    setting.value = rowData.value.settings;
+  },
+  { immediate: true }
+);
+</script>
+<style lang="scss" scoped>
+.dialogBody {
+  width: 100%;
+  height: 68vh;
+  display: flex;
+  position: relative;
+  .exView {
+    width: 100%;
+    height: 68vh;
+    //width: 1330px;
+    display: flex;
+    position: relative;
+  }
+  .btns {
+    width: 200px;
+    height: 560px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 40px 0 0 20px;
+    .btn {
+      width: 100%;
+      margin: 10px;
+    }
+  }
+}
+</style>

src/views/traceability/index.vue

@@ -199,6 +199,20 @@
               </template>
             </keep-alive>
           </el-tab-pane>
+          <el-tab-pane name="f8">
+            <template #label>
+              <el-badge
+                :type="activeName == 'f8' ? 'warning' : 'danger'"
+                :value="tabCountData.excel"
+                >在线表格
+              </el-badge>
+            </template>
+            <keep-alive>
+              <template v-if="activeName == 'f8'">
+                <Excel />
+              </template>
+            </keep-alive>
+          </el-tab-pane>
         </el-tabs>
       </div>
     </div>
@@ -218,6 +232,7 @@ const Check = defineAsyncComponent(() => import("./components/check.vue"));
 const Equit = defineAsyncComponent(() => import("./components/equit.vue"));
 const Fault = defineAsyncComponent(() => import("./components/fault.vue"));
 const Media = defineAsyncComponent(() => import("./components/media.vue"));
+const Excel = defineAsyncComponent(() => import("./components/excel.vue"));
 const store = useProcessStore();
 const router = useRouter();
 const activeName = ref("f1");