feature/填充添加

src/views/device/allocate/components/proWorkOrderExcel.vue

@@ -0,0 +1,347 @@
+<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" 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 { updateProExcel } from "@/api/excel/index.ts";
+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 submit = async () => {
+  //@ts-ignore
+  excelViewRef.value.confirm();
+  const { data, code } = await updateProExcel({
+    excelData: JSON.stringify(exceldata.value),
+    id: rowData.value.id,
+  });
+  if (code == "200") {
+    ElMessage.success("修改成功！");
+    cancel();
+  }
+};
+const cancel = () => {
+  excelKey1.value = !excelKey1.value;
+  emits("close");
+};
+// 存放操作表格相关业务代码
+const useAddTemplateHook = () => {
+  //excelView 组件实例
+  const excelViewRef = ref(null);
+  //表格配置项
+  const options = ref({
+    //头部操作区域
+    opreaState: true,
+    //导入按钮展示
+    in: false,
+    //导出按钮展示
+    out: true,
+    print: true,
+    //编辑状态 false：为查看状态
+    edit: true,
+    //当前操作表格名称
+    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: 1560px;
+  height: 560px;
+  display: flex;
+  .exView {
+    width: 1330px;
+    height: 560px;
+    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/device/allocate/index.vue

@@ -45,6 +45,13 @@
           :size="size"
           >记录</el-button
         >
+        <el-button
+          icon="el-icon-setting"
+          text
+          @click="showProExcel('153')"
+          type="primary"
+          >表格填充</el-button
+        >
         <!--        <el-button
           @click="handleExport(row)"
           icon="el-icon-download"
@@ -64,7 +71,14 @@
     >
       <device-page @device-info="deviceInfo" :operate="operate" />
     </el-dialog>
-
+    <el-dialog
+      v-model="workOderShow"
+      :title="updateTitle"
+      @close="workOderShow = false"
+      width="1600"
+    >
+      <proWorkOrderExcel :data="ExDataObj" @close="closeShow" />
+    </el-dialog>
     <el-dialog
       v-model="dialog1.visible"
       :title="dialog1.title"
@@ -519,9 +533,25 @@ import { checkPerm } from "@/directive/permission";
 import { getUserList } from "@/api/system/user";
 import { allocateAudit, allocateExport } from "@/api/device/index";
 import { useCommonStoreHook } from "@/store";
+import { getProExcel } from "@/api/excel";
+import proWorkOrderExcel from "./components/proWorkOrderExcel.vue";
 import dictDataUtil from "@/common/configs/dictDataUtil";
 const { isShowTable, tableType } = toRefs(useCommonStoreHook());
-
+const ExDataObj = ref({});
+const workOderShow = ref(false);
+const closeShow = () => {
+  workOderShow.value = false;
+};
+const showProExcel = async (id) => {
+  const { data, code } = await getProExcel(id);
+  if (code == "200") {
+    ExDataObj.value = data;
+    workOderShow.value = true;
+  } else {
+    ExDataObj.value = {};
+    workOderShow.value = false;
+  }
+};
 const showItem = ref(false);
 const test = () => {
   isShowTable.value = true;

src/views/device/disable/components/proWorkOrderExcel.vue

@@ -0,0 +1,347 @@
+<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" 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 { updateProExcel } from "@/api/excel/index.ts";
+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 submit = async () => {
+  //@ts-ignore
+  excelViewRef.value.confirm();
+  const { data, code } = await updateProExcel({
+    excelData: JSON.stringify(exceldata.value),
+    id: rowData.value.id,
+  });
+  if (code == "200") {
+    ElMessage.success("修改成功！");
+    cancel();
+  }
+};
+const cancel = () => {
+  excelKey1.value = !excelKey1.value;
+  emits("close");
+};
+// 存放操作表格相关业务代码
+const useAddTemplateHook = () => {
+  //excelView 组件实例
+  const excelViewRef = ref(null);
+  //表格配置项
+  const options = ref({
+    //头部操作区域
+    opreaState: true,
+    //导入按钮展示
+    in: false,
+    //导出按钮展示
+    out: true,
+    print: true,
+    //编辑状态 false：为查看状态
+    edit: true,
+    //当前操作表格名称
+    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: 1560px;
+  height: 560px;
+  display: flex;
+  .exView {
+    width: 1330px;
+    height: 560px;
+    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/device/disable/index.vue

@@ -52,9 +52,23 @@
           size="small"
           >删除</el-button
         >
+        <el-button
+          icon="el-icon-setting"
+          text
+          @click="showProExcel('153')"
+          type="primary"
+          >表格填充</el-button
+        >
       </template>
     </avue-crud>
-
+    <el-dialog
+      v-model="workOderShow"
+      :title="updateTitle"
+      @close="workOderShow = false"
+      width="1600"
+    >
+      <proWorkOrderExcel :data="ExDataObj" @close="closeShow" />
+    </el-dialog>
     <el-dialog
       v-model="dialog1.visible"
       :title="dialog1.title"
@@ -307,7 +321,24 @@ import { useCrud } from "@/hooks/userCrud";
 import ButtonPermKeys from "@/common/configs/buttonPermission";
 import { useCommonStoreHook } from "@/store";
 import { disableAudit } from "@/api/device";
+import { getProExcel } from "@/api/excel";
+import proWorkOrderExcel from "./components/proWorkOrderExcel.vue";
 const { isShowTable, tableType } = toRefs(useCommonStoreHook());
+const ExDataObj = ref({});
+const workOderShow = ref(false);
+const closeShow = () => {
+  workOderShow.value = false;
+};
+const showProExcel = async (id) => {
+  const { data, code } = await getProExcel(id);
+  if (code == "200") {
+    ExDataObj.value = data;
+    workOderShow.value = true;
+  } else {
+    ExDataObj.value = {};
+    workOderShow.value = false;
+  }
+};
 const dialog1 = reactive({
   title: "设备停用申请",
   visible: false,

src/views/device/maintenance/components/proWorkOrderExcel.vue

@@ -0,0 +1,347 @@
+<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" 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 { updateProExcel } from "@/api/excel/index.ts";
+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 submit = async () => {
+  //@ts-ignore
+  excelViewRef.value.confirm();
+  const { data, code } = await updateProExcel({
+    excelData: JSON.stringify(exceldata.value),
+    id: rowData.value.id,
+  });
+  if (code == "200") {
+    ElMessage.success("修改成功！");
+    cancel();
+  }
+};
+const cancel = () => {
+  excelKey1.value = !excelKey1.value;
+  emits("close");
+};
+// 存放操作表格相关业务代码
+const useAddTemplateHook = () => {
+  //excelView 组件实例
+  const excelViewRef = ref(null);
+  //表格配置项
+  const options = ref({
+    //头部操作区域
+    opreaState: true,
+    //导入按钮展示
+    in: false,
+    //导出按钮展示
+    out: true,
+    print: true,
+    //编辑状态 false：为查看状态
+    edit: true,
+    //当前操作表格名称
+    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: 1560px;
+  height: 560px;
+  display: flex;
+  .exView {
+    width: 1330px;
+    height: 560px;
+    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/device/maintenance/index.vue

@@ -65,6 +65,13 @@
           :size="size"
           >记录</el-button
         >
+        <el-button
+          icon="el-icon-setting"
+          text
+          @click="showProExcel('153')"
+          type="primary"
+          >表格填充</el-button
+        >
       </template>
     </avue-crud>
     <el-dialog
@@ -75,7 +82,14 @@
     >
       <device-page @device-info="deviceInfo" :operate="operate" />
     </el-dialog>
-
+    <el-dialog
+      v-model="workOderShow"
+      :title="updateTitle"
+      @close="workOderShow = false"
+      width="1600"
+    >
+      <proWorkOrderExcel :data="ExDataObj" @close="closeShow" />
+    </el-dialog>
     <el-dialog
       v-model="dialog1.visible"
       :title="dialog1.title"
@@ -207,8 +221,16 @@ import { maintenanceUpdate } from "@/api/device/index";
 import { useCommonStoreHook } from "@/store";
 import dictDataUtil from "@/common/configs/dictDataUtil";
 import RecordPage from "./components/record-page.vue";
+import { getProExcel } from "@/api/excel";
 import { checkPerm } from "@/directive/permission";
+import proWorkOrderExcel from "./components/proWorkOrderExcel.vue";
 const { isShowTable, tableType } = toRefs(useCommonStoreHook());
+const ExDataObj = ref({});
+const workOderShow = ref(false);
+const closeShow = () => {
+  workOderShow.value = false;
+};
+
 const test = () => {
   isShowTable.value = true;
   tableType.value = tableType.value == 1 ? 2 : 1;
@@ -232,6 +254,16 @@ const dialog2 = reactive({
   title: "设备保养记录",
   visible: false,
 });
+const showProExcel = async (id) => {
+  const { data, code } = await getProExcel(id);
+  if (code == "200") {
+    ExDataObj.value = data;
+    workOderShow.value = true;
+  } else {
+    ExDataObj.value = {};
+    workOderShow.value = false;
+  }
+};
 const userList = ref([]);
 // 传入一个url，后面不带/
 const { form, data, option, search, page, toDeleteIds, Methords, Utils } =

src/views/device/repair/components/proWorkOrderExcel.vue

@@ -0,0 +1,347 @@
+<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" 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 { updateProExcel } from "@/api/excel/index.ts";
+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 submit = async () => {
+  //@ts-ignore
+  excelViewRef.value.confirm();
+  const { data, code } = await updateProExcel({
+    excelData: JSON.stringify(exceldata.value),
+    id: rowData.value.id,
+  });
+  if (code == "200") {
+    ElMessage.success("修改成功！");
+    cancel();
+  }
+};
+const cancel = () => {
+  excelKey1.value = !excelKey1.value;
+  emits("close");
+};
+// 存放操作表格相关业务代码
+const useAddTemplateHook = () => {
+  //excelView 组件实例
+  const excelViewRef = ref(null);
+  //表格配置项
+  const options = ref({
+    //头部操作区域
+    opreaState: true,
+    //导入按钮展示
+    in: false,
+    //导出按钮展示
+    out: true,
+    print: true,
+    //编辑状态 false：为查看状态
+    edit: true,
+    //当前操作表格名称
+    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: 1560px;
+  height: 560px;
+  display: flex;
+  .exView {
+    width: 1330px;
+    height: 560px;
+    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/device/repair/index.vue

@@ -36,6 +36,13 @@
           :size="size"
           >流程</el-button
         >
+        <el-button
+          icon="el-icon-setting"
+          text
+          @click="showProExcel('153')"
+          type="primary"
+          >表格填充</el-button
+        >
         <!--        <el-button @click="maintenance(row,1)"
                    icon="el-icon-fold"
                    text
@@ -509,6 +516,14 @@
         </el-timeline-item>
       </el-timeline>
     </el-dialog>
+    <el-dialog
+      v-model="workOderShow"
+      :title="updateTitle"
+      @close="workOderShow = false"
+      width="1600"
+    >
+      <proWorkOrderExcel :data="ExDataObj" @close="closeShow" />
+    </el-dialog>
   </div>
 </template>
 <script setup>
@@ -519,8 +534,25 @@ import { checkPerm } from "@/directive/permission";
 import { getUserList } from "@/api/system/user";
 import { repair, audit } from "@/api/device/index";
 import { useCommonStoreHook } from "@/store";
+import { getProExcel } from "@/api/excel";
 import dictDataUtil from "@/common/configs/dictDataUtil";
+import proWorkOrderExcel from "./components/proWorkOrderExcel.vue";
 const { isShowTable, tableType } = toRefs(useCommonStoreHook());
+const ExDataObj = ref({});
+const workOderShow = ref(false);
+const closeShow = () => {
+  workOderShow.value = false;
+};
+const showProExcel = async (id) => {
+  const { data, code } = await getProExcel(id);
+  if (code == "200") {
+    ExDataObj.value = data;
+    workOderShow.value = true;
+  } else {
+    ExDataObj.value = {};
+    workOderShow.value = false;
+  }
+};
 const test = () => {
   isShowTable.value = true;
   tableType.value = tableType.value == 1 ? 2 : 1;