|
|
@@ -0,0 +1,349 @@
|
|
|
+<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>
|
|
|
+import { ref } from "vue";
|
|
|
+import { addProExcel } 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 addProExcel({
|
|
|
+ excelData: JSON.stringify(exceldata.value),
|
|
|
+ excelFormId: props.data.excelFormId,
|
|
|
+ recordId: props.data.recordId,
|
|
|
+ formName: props.data.formName,
|
|
|
+ formType: props.data.formType,
|
|
|
+ });
|
|
|
+ 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>
|
|
|
+.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>
|
