JG-CLIENT-TEMP/src/views/traceability/components/taskExcel.vue

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