Browse Source

后台的随工单、筛选单、归档归档申请、归档审核的查看表单窗口 增加最大化功能。

jxq 2 months ago
parent
commit
9126a3fce2

+ 2 - 1
src/views/base/apply/apply.vue

@@ -127,7 +127,8 @@
       v-model="excelShow"
       title="详情"
       @close="excelShow = false"
-      width="1600"
+      append-to-body
+      fullscreen
       destroy-on-close
     >
       <ExcelDataBbox :data="ExDataObj" @close="excelShow = false" />

+ 13 - 53
src/views/base/apply/excelDataBbox.vue

@@ -1,30 +1,19 @@
 <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 class="exView" :key="excelKey1">
+    <ExcelView
+      ref="excelViewRef"
+      :option="options"
+      @confirm="confirm"
+      v-model:data="exceldata"
+      :checkStatus="true"
+      :verifications="setting"
+    />
   </div>
 </template>
 <script setup>
 import { ref } from "vue";
 import { updateProExcel } from "@/api/excel/index.ts";
 import ExcelView from "@/components/ExcelView/index.vue";
-import { uploadExcelBlob } from "@/api/apply/index";
 const setting = ref([]);
 const props = defineProps({
   data: {
@@ -320,41 +309,12 @@ watch(
   },
   { immediate: true }
 );
-
-onMounted(() => {
-  if(props.data.state === '3'){
-    setTimeout(() => {
-      let blobPromese = excelViewRef.value.toGetExcelBlob();
-      blobPromese.then((res) => {
-        console.log("=========", res);
-        uploadExcelBlob(res, props.data.id);
-      });
-    }, 1000);
-  }
-});
 </script>
 <style lang="scss" scoped>
-.dialogBody {
-  width: 1560px;
-  height: 560px;
+.exView {
+  width: 100%;
+  height: calc(100vh - 120px);
   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;
-    }
-  }
+  position: relative;
 }
 </style>

+ 2 - 1
src/views/base/check/check.vue

@@ -152,7 +152,8 @@
       v-model="excelShow"
       title="详情"
       @close="excelShow = false"
-      width="1600"
+      fullscreen
+      destroy-on-close
     >
       <ExcelDataBbox :data="ExDataObj" @close="excelShow = false" />
     </el-dialog>

+ 320 - 0
src/views/plan/filtersheet/components/ExcelShowing.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="exView" :key="excelKey1">
+    <ExcelView
+      ref="excelViewRef"
+      :option="options"
+      @confirm="confirm"
+      v-model:data="exceldata"
+      :checkStatus="true"
+      :verifications="setting"
+    />
+  </div>
+</template>
+<script setup>
+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) => {
+    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) => {
+    //@ts-ignore;
+    excelViewRef.value.confirm();
+    if (exceldata.value == null) return ElMessage.error("请提供表格数据!");
+    if (!formEl) return;
+    await formEl.validate(async (valid, fields) => {
+      if (valid) {
+        const { data, code } = await addExcel({
+          ...formVlaue,
+          excelData: exceldata.value,
+        });
+        if (code == "200") {
+          ElMessage.success("添加成功!");
+          resetData();
+          dataEditList();
+          editTep(data);
+        }
+      }
+    });
+  };
+  //更新行内信息
+  const updateExForm = async (formEl) => {
+    //@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, fields) => {
+      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) => {
+    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) => {
+    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, fields) => {
+      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>
+.exView {
+  width: 100%;
+  height: calc(100vh - 120px);
+  display: flex;
+  position: relative;
+}
+</style>

+ 22 - 23
src/views/plan/filtersheet/index.vue

@@ -63,7 +63,7 @@
       v-model="dialog.visible"
       :title="dialog.title"
       width="950px"
-      :before-close="(checkAll = false)"
+      :before-close="checkAll = false"
       @close="dialog.visible = false"
       style="padding-bottom: 40px"
     >
@@ -125,11 +125,12 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item
-          label="签章人员"
-          prop="signatureId"
-        >
-          <el-select  v-model="form.signatureId" placeholder="请选择签章人员" clearable>
+        <el-form-item label="签章人员" prop="signatureId">
+          <el-select
+            v-model="form.signatureId"
+            placeholder="请选择签章人员"
+            clearable
+          >
             <el-option
               v-for="item in signature"
               :key="item.id"
@@ -156,9 +157,10 @@
       v-model="workOderShow"
       :title="updateTitle"
       @close="workOderShow = false"
-      width="1600"
+      append-to-body
+      fullscreen
     >
-      <proWorkOrderExcel :data="ExDataObj" @close="closeShow" />
+      <ExcelShowing :data="ExDataObj" @close="closeShow" />
     </el-dialog>
     <el-dialog
       v-model="dialog8.visible"
@@ -195,6 +197,7 @@
 import { ref } from "vue";
 import dictDataUtil from "@/common/configs/dictDataUtil";
 import ButtonPermKeys from "@/common/configs/buttonPermission";
+import ExcelShowing from "./components/ExcelShowing.vue";
 import {
   filterList,
   getSeqList,
@@ -203,10 +206,8 @@ import {
   delFilter,
   getProExcel,
 } from "@/api/plan";
-import {
-  signatureList,
-} from "@/api/signature";
-import {useDictionaryStore} from "@/store";
+import { signatureList } from "@/api/signature";
+import { useDictionaryStore } from "@/store";
 const updateTitle = ref("筛选单详情");
 const tableData = ref([]);
 const formRef = ref(null);
@@ -263,13 +264,13 @@ const submit = async () => {
     }
   });
 };
-const queryDict = (dictValue) =>{
-  for(var i = 0;i<dicts.quality_grade.length;i++){
-    if(dicts.quality_grade[i].dictValue===dictValue){
-         return  dicts.quality_grade[i].dictLabel;
+const queryDict = (dictValue) => {
+  for (var i = 0; i < dicts.quality_grade.length; i++) {
+    if (dicts.quality_grade[i].dictValue === dictValue) {
+      return dicts.quality_grade[i].dictLabel;
     }
   }
-}
+};
 const closeShow = () => {
   workOderShow.value = false;
 };
@@ -388,13 +389,11 @@ const signatureSearch = ref({});
 onMounted(() => {
   getList();
   signatureSearch.value.signatureType = 3;
-  signatureList(signatureSearch.value).then(
-    (data)=>{
-      if(data.code==='200'){
-        signature.value=data.data;
-      }
+  signatureList(signatureSearch.value).then((data) => {
+    if (data.code === "200") {
+      signature.value = data.data;
     }
-  );
+  });
 });
 </script>
 

+ 320 - 0
src/views/plan/workOrder/components/ExcelShowingSGD.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="exView" :key="excelKey1">
+    <ExcelView
+      ref="excelViewRef"
+      :option="options"
+      @confirm="confirm"
+      v-model:data="exceldata"
+      :checkStatus="true"
+      :verifications="setting"
+    />
+  </div>
+</template>
+<script setup>
+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) => {
+    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) => {
+    //@ts-ignore;
+    excelViewRef.value.confirm();
+    if (exceldata.value == null) return ElMessage.error("请提供表格数据!");
+    if (!formEl) return;
+    await formEl.validate(async (valid, fields) => {
+      if (valid) {
+        const { data, code } = await addExcel({
+          ...formVlaue,
+          excelData: exceldata.value,
+        });
+        if (code == "200") {
+          ElMessage.success("添加成功!");
+          resetData();
+          dataEditList();
+          editTep(data);
+        }
+      }
+    });
+  };
+  //更新行内信息
+  const updateExForm = async (formEl) => {
+    //@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, fields) => {
+      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) => {
+    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) => {
+    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, fields) => {
+      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>
+.exView {
+  width: 100%;
+  height: calc(100vh - 120px);
+  display: flex;
+  position: relative;
+}
+</style>

+ 4 - 2
src/views/plan/workOrder/index.vue

@@ -295,9 +295,10 @@
       v-model="workOderShow"
       :title="updateTitle"
       @close="workOderShow = false"
-      width="1600"
+      append-to-body
+      fullscreen
     >
-      <proWorkOrderExcel :data="ExDataObj" @close="closeShow" />
+      <ExcelShowingSGD :data="ExDataObj" @close="closeShow" />
     </el-dialog>
 
     <el-dialog
@@ -318,6 +319,7 @@
 import { ref, getCurrentInstance } from "vue";
 import { useCrud } from "@/hooks/userCrud";
 import buttonPermission from "@/common/configs/buttonPermission";
+import ExcelShowingSGD from "./components/ExcelShowingSGD.vue";
 import {
   apsWorkOrder,
   distributeWorkOrder,