封装form表单

目录

1. 源码

2. 其他页面引用

---

ps：请看完看明白再复用 

1. 源码

<template><div style="width: 100%; height: 100%" class="form-condition"><!-- 普通表单 --><el-card shadow="hover" class="cardheight"><div class="form-content"><el-form ref="FormRef" label-width="auto" :model="FormRef"><el-rowv-for="(formType, indexs) in formTypeArray":key="indexs":gutter="20"><!-- <el-button @click="Text(formTypeArray[indexs])"></el-button> --><el-col:span="formTypeArray[indexs].length < 2 ? 24 : span"v-for="(data, index) in formTypeArray[indexs]":key="index"><!-- 关于Id相关的均不显示，此处需要后台进行配合完成 --><!-- &&(data.label? data.label.includes('ID')? false: true: false) --><el-form-itemv-if="data.type !== 'allCheckBox' &&data.type !== 'checkbox' &&(data.label? data.label.includes('ID')? false: true: false)":label="data.label":prop="data.prop":rules="rules(data)"><!-- :label="data.label.includes('ID') ? '序号' : data.label" --><!-- active-text="打开" --><!-- inactive-text="关闭" --><el-switchv-if="data.type == 'switch'"v-model="FormRef[data.prop]"class="mb-2"style="--el-switch-on-color: #13ce66;--el-switch-off-color: #ff4949;":active-value="1":inactive-value="0":disabled="data.disabled"@change="SwitchChang($event,formTypeArray[indexs][index],indexs,index)"/><!-- 输入框类型 --><!-- 修改点  去除 v-model.number="FormRef[data.prop]"  202302002--><el-inputv-if="data.type == 'input'"v-model="FormRef[data.prop]":placeholder="data.placeholder":disabled="data.disabled"suffix-icon="xxxx"></el-input><!-- 时间类型 --><el-date-pickerpopper-class="date-style"v-if="data.type == 'date'"type="datetime":placeholder="data.placeholder"v-model="FormRef[data.prop]"format="YYYY/MM/DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"style="width: 100%":disabled="data.disabled"></el-date-picker><!-- 下拉框类型 --><el-select:popper-append-to-body="false"v-if="data.type == 'select'":multiple="data.multiple":clearable="data.clearable"v-model="FormRef[data.prop]":placeholder="data.placeholder":change="SelectChange(FormRef[data.prop], data.label)"style="width: 100%":disabled="data.disabled"><el-optionv-for="(item, i) in data.option":key="item.value":label="item.label":value="item.value"></el-option></el-select><!-- lu 文本域--><!-- 输入框类型 --><el-inputv-if="data.type == 'inputText'"type="textarea"v-model="FormRef[data.prop]":placeholder="data.placeholder":disabled="data.disabled"suffix-icon="xxxx"></el-input><el-checkboxv-if="data.type == 'Radio'":true-label="1":false-label="0"v-model="FormRef[data.prop]":label="'点击激活此项为' + data.label + '产品售后信息'"border/><!-- 显示带有“check-on-click-node”的复选框:树形下拉框 --><el-tree-selectv-if="data.type == 'treeSelect'"v-model="FormRef[data.prop]":data="data.option"check-strictly:render-after-expand="false"show-checkboxcheck-on-click-nodestyle="width: 100%":disabled="data.disabled":multiple="data.multiple"/><!-- 上传控件 --><el-uploadv-if="data.type == 'upload'"action="#"multiple:auto-upload="true"accept="jpg,jpeg,png,PNG"list-type="picture-card":file-list="files":http-request="uploadFile":before-upload="beforeUpload":on-preview="handlePictureCardPreview":on-change="ChangeImage":on-remove="handleRemove"><el-icon><Plus /></el-icon></el-upload><!-- <el-button @click="SubPicForm">提交上传</el-button> --><el-dialog v-model="dialogVisible"><img style="width: 100%" :src="dialogImageUrl" alt="" /></el-dialog></el-form-item><el-rowv-if="data.type == 'allCheckBox' &&JSON.stringify(data.childList) !== '{}'"class="allcheckBoxOther"><el-form-item label-width="auto" label="随带资料"><div v-for="(checkBoxData, key) in data.childList" :key="key"><el-form-item label-width="auto"><el-checkboxborder:true-label="1":false-label="0":label="checkBoxData.label"v-model="FormRef[checkBoxData.prop]"></el-checkbox></el-form-item></div></el-form-item></el-row></el-col></el-row><el-row style="width: 100%; height: 32px; padding-top: 10px"><el-col :span="span" style="width: 100%; margin: 0 auto"><el-form-item style="width: 100%"><div class="content-btn" style="margin: auto"><el-buttonplaintype="danger"style="float: left; margin-right: 15px"@click="cleanFormValue"><el-icon><FolderRemove /></el-icon>&ensp; 清 空</el-button><el-buttonplaintype="primary"style="float: left"@click="getCondition()"><el-icon><Search /></el-icon>&ensp;{{isOpenSonDataTable || isOpenSonTransfer ? "保存" : "提 交"}}</el-button></div></el-form-item></el-col></el-row></el-form></div></el-card><!-- 是否存在明细附表 --><div v-if="isOpenSonDataTable"><!-- 表单 --><el-card shadow="hover"><!-- 表单按钮组件 --><div style="margin-bottom: 10px"><ButtonView ref="ButtonRef" @ButtonMessage="GetBtnClick"></ButtonView></div><!-- 数据表格组件 --><div class="aa"><TableDialogref="tableSonDataRef"@getPage="GetDataFenYeWath"@tableMessage="GetTableMessage"></TableDialog></div></el-card></div><!-- 抽屉，明细表编辑处 :before-close="drawerCloseSonForm"--><el-drawer:key="itemKey":title="dialogTitle"v-model="dialog"direction="ltr":size="drawerSize"custom-class="demo-drawer"ref="drawer"destroy-on-close><div class="demo-drawer__content"><!-- 表单组件 --><FromViewref="SonfromView"@conditionParams="GetCondition"@conditionFormData="GetConditionFormData"@SonSelectChange="GetSonSelectChange"></FromView></div></el-drawer><!-- 是否存在其他组件 --><div v-if="isOpenSonTransfer"><el-card shadow="hover" style="height: 439px"><p style="text-align: center; margin: 0 0 20px">请选择左侧的数据项，点击中间“>”按钮添加数据项</p><div style="text-align: center"><div><el-transferstyle="text-align: left; display: inline-block"v-model="transferValue":data="transferDatas":props="{label: 'title',}"filterable:titles="['待选数据', '已选数据']":button-texts="['取消', '选择']"></el-transfer></div><el-button plain class="squan" type="success" @click="Authorization()">绑 定</el-button></div></el-card></div></div>
</template><script>
import { computed, provide, inject, ref } from "@vue/runtime-core";
import { watchEffect, getCurrentInstance, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";export default {name: "FromView",emits: ["conditionParams"],setup(props, context) {let FormRefTest = reactive({});let span = ref(6); //6let formTypeArray = ref(new Array());//用于接收父组件传递的Form表单配置const formTypeConfig = inject("formTypeConfig");//行数let formRowsCount = inject("formRowsCount");let checkBoxList = [{type: "allCheckBox",label: "allCheckBox",childList: {},},];//移位，将特定的元素移到最后function moveArray(arr, sourceIndex, targetIndex) {// splice 将目标元素替换并将原结果扔回来赋值给它arr[sourceIndex] = arr.splice(targetIndex, 1, arr[sourceIndex])[0];}/*** 设置表单类型* @param array 表单配置* @param col 每行表单项个数*/const setFormType = (oldArray, col) => {formTypeArray = ref(new Array());//console.log("进入FormView组件中的方法", formTypeArray);//console.log(oldArray, col);let array = [];oldArray.map((item) => {if (item.type == "checkbox") {checkBoxList[0].childList[item.prop] = item;array.push(item);} else {array.push(item);}});//console.log("checkBoxList====", checkBoxList);//console.log("array====", array);//#region 移动 checkbox 参数位置//移动var sourceIndexes = [];array.forEach((item, index) => {if (item.type && item.type == "checkbox") {sourceIndexes.push(index);}});// 遍历索引数组，移动元素sourceIndexes.forEach((sourceIndex) => {moveArray(array, sourceIndex, array.length);});//过滤undefinedarray = array.filter((item) => {return item !== undefined || !!item;});//#endregionif (col == null || col == "" || array == null || array == "") {col = 4; // 默认分4列}span.value = 24 / col;if (array != null) {array.map((item) => {FormRefTest[item.prop] = item.value;});//console.log("==========FormRef=====", FormRefTest);// 只有一行if (col >= array.length) {formTypeArray.value.push(array);} else {// 超过一行let deb = col;let i = 0;while (i < array.length) {let item = []; //nullvar isFlag = false; //当它为True时，下方将不再Pushwhile (i < deb) {if (array[i].label.indexOf("后台自增ID") !== -1) {item.push(array[i]);i++;break;} else if (array[i].label.indexOf("备注") !== -1 ||array[i].label.indexOf("概述") !== -1 ||array[i].label.indexOf("附件") !== -1 ||array[i].type.indexOf("inputText") !== -1) {//说明在此之前已有数据if (item.length > 0) {isFlag = true;formTypeArray.value.push(item);item = [];}item.push(array[i]);i++;break;} else {item.push(array[i]);//console.log(deb);i++;}}if (!isFlag) {formTypeArray.value.push(item);}if (array.length - i < col) {deb = array.length;} else {deb = i + col;}}formTypeArray.value.push(checkBoxList);}}//console.log("---------表单配置数据 SUCCESS----------");};//#region 明细表配置//用于监听子表表单数据let FatherisOk = ref(false);//用于父表单保存后的Idlet FatherIds = ref(0);//用于监听子表单中的数据let SonConfigCondition = ref([]);//用于监听子表一行几个let SonformRowsCount = ref(1);//明细表单配置const ConfigurationCondition = () => {provide("formTypeConfig", SonConfigCondition);provide("formRowsCount", SonformRowsCount);};//#endregion//#region 穿梭框配置//#endregion// 监听表单配置数据 数据变化时, 更新配置watchEffect(() => {//console.log("-------监听formTypeConfig--------");//console.log("=formTypeConfig==========", formTypeConfig);//console.log(formRowsCount);var rowlCount = formRowsCount == undefined ? 1 : formRowsCount.value;setFormType(formTypeConfig.value, rowlCount);});return {formTypeArray,span,//cleanFormValue,setFormType,ConfigurationCondition, //明细表单配置SonConfigCondition,FatherisOk, //用于子表判断附表是否已经保存FatherIds, //若主表已经保存，此字段不为0且同时可以获取主表新增数据后的IdformRowsCount, //行数//#region 穿梭框配置FormRefTest,//#endregion};},data() {return {FormRef: {},checkBoxList: {},isOpenSonDataTable: false, //是否存在明细表格isOpenSonTransfer: false, //是否存在其他组件listData: [], //此处我子表单中选择的数据，用于对其修改、删除使用GetDataFenYe: null, //分页查询数据GetDataHanderAndFrom: null, //明细表表头查询数据dialog: false,dialogTitle: "",itemKey: "",transferValue: [], //穿梭框选中的transferDatas: [], //穿梭框数据源//上传如下：files: [],dialogVisible: false,dialogImageUrl: "",deleteFiles: [],//抽屉大小drawerSize: "22%",};},created() {//默认初始化明细表单配置this.ConfigurationCondition();this.FormRef = this.FormRefTest;//console.log("this.FormRef====", this.FormRef);//console.log("this.FormRefTest====", this.FormRefTest);},methods: {Text(val) {},rules(data) {//#region 自定义验证校验if (data.isRules) {//校验数值类型if (data.propTypes == "INT") {var validatorTel = (rule, value, callback) => {if (!value) {return callback(new Error(data.label + "不能为空"));}var numReg = /^[0-9]+$/;var numRe = new RegExp(numReg);if (!numRe.test(value)) {callback(new Error("请输入数字值"));} else {callback();}};return [{required: true,validator: validatorTel,trigger: "blur",},];}}//#endregion//校验手机号 regMobile//暂时屏蔽校验手机号，此处不完善，目前只打开校验是否为空//20230202留// const regMobile =//   /^((\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14})|([1][3,4,5,6,7,8,9][0-9]{9})$/;// if (data.prop.includes("Tel")) {//   var validatorTel = (rule, value, callback) => {//     if (!value) {//       return callback(new Error(data.label + "不能为空"));//     }//     var numReg = /^[0-9]+$/;//     var numRe = new RegExp(numReg);//     if (!numRe.test(value)) {//       callback(new Error("请输入数字值"));//     } else {//       if (!regMobile.test(value)) {//         callback(new Error("请输入正确的号码"));//       } else {//         callback();//       }//     }//   };//   return [//     {//       required: true,//       validator: validatorTel,//       trigger: "blur",//     },//   ];// } elseif (data.prop == "LoginAccount" ||data.prop == "Password" ||data.prop.includes("Eqipment") ||data.prop == "ProductID" ||data.prop == "PartID" ||data.prop == "WorkNo" ||data.prop == "QualityCode") {if (data.type === "select") {return [{ required: true, message: "此处为必填项", trigger: "change" },];}if (data.type === "input") {return [{ required: true, message: "此处为必填项", trigger: "blur" }];}}},SwitchChang(data, formData, indexs, index) {// this.FormRef[data.prop] = data ? 1 : 0;//},//实时监听子组件发送的信息GetDataFenYeWath(Msg) {//重新赋值，避免新增、修改、删除操作this.pageSize = Msg.pageSize;this.pageNum = Msg.pageNum;let param = {params: Msg,};if (this.GetDataFenYe != null) {this.GetDataFenYe(param);}this.$emit("SongetPage", { pageSize: this.pageSize, pageNum: this.pageNum });},//获取表格组件传递的信息GetTableMessage(msg) {//获取listDatas值this.listData =msg.type === "列表选择"? msg.listData: msg.type === "页码切换"? null: null;//console.log("组件：表格发送信息：" + this.listData);},//选择框事件SelectChange(data, labels) {console.log(labels);var linsDatas = { value: data, label: labels };//匹配新格式var datas = {data: linsDatas,type: "选择",};//选择框事件，回传给父组件this.$emit("SonSelectChange", datas);},/*** 获取父组件传递过来的数据信息链，这里指isOpenSonTransfer 穿梭框的数据*/SetDataSonTransfer(SonDataTransFer) {this.isOpenSonTransfer = SonDataTransFer.isOpenSonTransfer; //是否开启穿梭框var tData = SonDataTransFer.SonTransfer; //穿梭框左侧数据//为True的情况下，进行渲染明细if (this.isOpenSonTransfer) {//每次选择后清空，重新触发this.transferDatas = [];this.transferDatas = tData;}},/*** 获取父组件传递过来的数据信息链，这里指isOpenSonTransfer 穿梭框的数据*/SetDataSonTransferDatas(SonDataTransFer) {this.isOpenSonTransfer = SonDataTransFer.isOpenSonTransfer; //是否开启穿梭框var SonTransferValue = SonDataTransFer.SonTransferValue; //穿梭框右侧数据//为True的情况下，进行渲染明细if (this.isOpenSonTransfer) {//每次选择后清空，重新触发this.transferValue = [];var ChangeLst = [];SonTransferValue.forEach((element) => {ChangeLst.push(element.PartID.toString());});this.transferValue = ChangeLst;}},//绑定按钮Authorization() {// 优先判断在新增的情况下，主表是否已经完成了保存 多用于子表进行新增操作if (!this.FatherisOk) {//警告this.$message({message:"在新建明细信息的情况下，请优先添加主表信息，再对其明细表进行新增编辑操作",type: "warning",});return;}this.formTypeArray;this.transferValue;var datas = {form: this.formTypeArray,transDatas: this.transferDatas,trans: this.transferValue,FatherIds: this.FatherIds,type: "绑定",};this.$emit("SonSelectChange", datas);},/*** 获取父组件传递过来的数据信息链，不包含明细表数据* @param {} GetDataLists*/SetData(SonDataTableDatas) {this.isOpenSonDataTable = SonDataTableDatas.isOpenSonDataTable;//为True的情况下，进行渲染明细if (this.isOpenSonDataTable) {//渲染 —— 延迟加载this.$nextTick(() => {this.$nextTick(() => {//自动高度this.$refs.tableSonDataRef.heights = "auto";});//普通表格this.$refs.tableSonDataRef.SetTableType(true);//组件渲染表头表单this.$refs.tableSonDataRef.SetDataTableHeader(SonDataTableDatas.GetDataHanderAndFrom);//添加子表表单数据this.SonConfigCondition =SonDataTableDatas.GetDataHanderAndFrom.lstSubset[0].Froms;//渲染明细按钮this.$refs.ButtonRef.SetButtonConfigDatas(SonDataTableDatas.PartButtonList);});}},//接收父组件传递的明细表数据，通过此方法作为媒介进行对孙组件传值SetDataSonTable(GetDataFenYe) {this.$nextTick(() => {//若编辑一条装备主表数据时，存在部件表，此处需要赋值this.$refs.tableSonDataRef.SetDataTable(GetDataFenYe);// this.dialog = false;});},//获取按钮组件消息————————用于明细表单GetBtnClick(val) {//拿到组件信息后，新增、修改弹出Dalodif (val.search("新增") != -1) {// 优先判断在新增的情况下，主表是否已经完成了保存 多用于子表进行新增操作if (!this.FatherisOk) {//警告this.$message({message:"在新建明细信息的情况下，请优先添加主表信息，再对其明细表进行新增编辑操作",type: "warning",});return;}// 优先添加this.dialog = true;this.dialogTitle = val;// //优先清空// this.$refs.SonfromView.CloseSonForm();var parm = { type: "新增" };this.$emit("GrandsonFormArr", parm);}if (val.search("编辑") != -1) {//仅支持单条编辑if (JSON.parse(JSON.stringify(this.listData)).length != 1) {//警告this.$message({message: "请选择一条数据进行编辑操作！",type: "warning",});return;}//结构剖析var newListData = JSON.parse(JSON.stringify(this.listData));//循环表单this.SonConfigCondition.forEach((item) => {newListData.forEach((dataitem) => {//循环找Keyfor (let key in dataitem) {if (item.prop == key) {item.value = dataitem[key];}}});});//先打开this.dialog = true;this.dialogTitle = val;if (newListData[0].Files !== undefined &&newListData[0].Files !== null) {//剔除特殊字符var newFilesString = newListData[0].Files.replace(/"/g, "");//分割数组var newFilesArr = newFilesString.replace(/"/g, "").split("|");//删除最后一位，总是多出的空 ''newFilesArr.pop();//此处延迟加载会帮你解决一切this.$nextTick(() => {var newFiles = [];//构建回显所需要的参数值newFilesArr.forEach((element) => {var file = { url: this.$FWurl + element };newFiles.push(file);});//组件渲染this.$refs.SonfromView.SetFilesData(newFiles);});}var parm = { type: "编辑", Ids: newListData[0].ID };this.$emit("GrandsonFormArr", parm);}if (val.search("删除") != -1) {this.$nextTick(() => {var _this = this;//仅支持单条编辑if (JSON.parse(JSON.stringify(this.listData)).length != 1) {//警告this.$message({message: "请选择一条数据进行删除操作！",type: "warning",});return;}//结构剖析var newListData = JSON.parse(JSON.stringify(this.listData));//此参数在删除时无需传递delete newListData[0].id;ElMessageBox.confirm("确认删除这条信息吗?", "警告", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {let dataParam = { data: newListData[0], type: "删除" };this.$emit("SonFormArr", dataParam);}).catch(() => {});});}},//给孙组件的抽屉添加宽度SetDrawerSize(value) {//渲染 —— 延迟加载this.$nextTick(() => {//重新渲染，itemKey用于处理Table不渲染的问题this.drawerSize = value;});},//孙组件获取父组件传递的File信息GetConditionFormData(datas) {// Ids虽然是从父级得来，但是此处可能会丢失Ids，所以需要将孙级位面中Ids获取，也就是明细Id//先删后加，垃圾FormData特性datas.delete("Ids");datas.append("Ids", this.FatherIds); //属于哪条明细表数据this.$emit("conditionFormData", datas);},//获取表单组件传递的信息，此处接收的表单乃是数据表格对应的表单————————用于明细表单GetCondition(datas) {//console.log("组件：表单组件发送信息：" + datas);var formDatas = {};formDatas = datas;// datas.forEach((e, index) => {//   for (let i = 0; i < e.length; i++) {//     var keys = datas[index][i].prop;//     var values = datas[index][i].value;//     formDatas[keys] = values;//   }// });const param = formDatas;//获取表单组件后，判断是新增/修改if (this.dialogTitle.search("新增") != -1) {//将新增后的主表Id拿到后进行新增操作，此处需要回传到最外层的组件中param.FatherIds = this.FatherIds;let dataParam = { data: param, type: "新增" };this.$emit("SonFormArr", dataParam);}if (this.dialogTitle.search("编辑") != -1) {param.FatherIds = this.FatherIds;let dataParam = { data: param, type: "编辑" };this.$emit("SonFormArr", dataParam);}},//清空子表表单数据CloseSonForm() {//清空选择this.cleanFormValue();},//抽屉回调，关闭前清空表单数据drawerCloseSonForm(done) {//清空选择this.$refs.SonfromView.CloseSonForm();done();},/*** 清空表单内容*/cleanFormValue() {for (let key in this.FormRef) {this.FormRef[key] = "";}},//#region 关于图片组上传uploadFile(file) {//console.log(file);},//删除事件handleRemove(file, fileList) {var obj = file.url.split("upLoad/").slice(-1)[0];//添加 需要删除的附件this.deleteFiles.push(obj);//console.log(file, fileList);},//预览事件handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},//添加图片ChangeImage(file, filelist) {this.files = filelist;//console.log("-----------" + JSON.stringify(file));},/*** 给父组件返回表单输入的内容*//// lugetCondition() {this.$refs.FormRef.validate((valid) => {//console.log("valid===", valid);if (valid) {var formData = new FormData();this.files.forEach((item) => {if (!(!item.raw && item.url.indexOf("blob") === -1)) {formData.append("file", item.raw);}});formData.append("Ids", this.FatherIds); //属于哪条主表数据this.deleteFiles.forEach((item) => {formData.append("fileByDelete", item); //删除的集合});// //console.log(333333, this.formTypeArray);this.$emit("conditionParams", this.FormRef);this.$emit("conditionFormData", formData);} else {// this.$message("请输入内容");return false;}});},/*** 回显*/SetFilesData(FilesList) {//渲染 —— 延迟加载this.$nextTick(() => {this.files = [];this.files = FilesList;});},//#endregion//子组件中选择框事件GetSonSelectChange(datas) {if (datas.type == "选择") {this.$emit("GrandsonSelectChange", datas);}if (datas.type == "绑定") {this.$emit("GrandsonSelectChange", datas);}},},
};
</script>
<style lang="scss" scoped>
.allcheckBoxOther div:not(:first-child) {margin-left: 1% !important;:deep(.el-form-item__label-wrap) {margin-bottom: 20% !important;margin-left: 1% !important;}
}
.aa ::v-deep .el-scrollbar {height: 100px;
}
//卡片与“新增”字样之间的距离，卡片的padding-top 为0
.el-dialog--center .el-dialog__body {text-align: initial;padding: 0px calc(var(--el-dialog-padding-primary) + 5px) 30px !important;
}
</style>

2. 其他页面引用

<template><el-row :gutter="20"><el-col :span="4"><div><!-- 树形列表组件 --><el-collapse v-model="activeNames" @change="handleChange"><el-collapse-item style="text-align: center" title="字典项" name="1"><TreeViewref="TreeRef"@TreeViewMessage="GetTreeMessage":defaultSelected="defaultSelected"nodeKey="DictID"></TreeView></el-collapse-item></el-collapse></div></el-col><el-divider direction="vertical">分割线</el-divider><el-col :span="19"><div><!-- 表单按钮组件 --><div style="margin-bottom: 10px"><ButtonView @ButtonMessage="GetBtnClick"></ButtonView></div><!-- 数据表格组件 --><div style="width: 103%"><TableDialogref="tableRef"@getPage="GetDataFenYeWath"@tableMessage="GetTableMessage"@treeMessage="GetTreeMessage1"></TableDialog></div></div></el-col></el-row><!-- 弹出框，用于新增、修改 --><el-dialogv-model="dialogVisible":title="dialogTitle"width="30%"centerdraggabledestroy-on-close><!-- 表单组件 --><FromViewstyle="margin-top: -25px"ref="fromViewRef"@conditionParams="GetCondition"></FromView></el-dialog><!-- <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop> -->
</template><script>
import { provide, reactive, ref } from "@vue/runtime-core";
import { ElMessage, ElMessageBox } from "element-plus";export default {name: "Sys_DictTable",data() {return {activeNames: ["1"], //左侧的折叠用户，默认展开dialogVisible: false, //用于控制新增、编辑dialogTitle: "", //用于控制新增、编辑标题listData: [], //已选择的数据Dictid: "",defaultSelected: "",selectedDictIDs: "", //左侧树勾选的id（多选）};},setup() {//默认页大小let pageSize = 20;let pageNum = 1;let total = 0;//用于监听选中的数据列表let ConfigCondition = ref([]);//表单配置const ConfigurationCondition = () => {provide("formTypeConfig", ConfigCondition);};//表格配置const ConfigurationTable = () => {var tableHeader = []; // 设置表头 [fieldName字段名, label列名, width列宽, sortable排序]var tableDatas = []; // 表格数据// 设置表头 [fieldName字段名, label列名, width列宽, sortable排序]// 配置表头数据provide("tableHeaderConfig", tableHeader);// 配置单元格数据及属性/ 分页配置默认值provide("tableDataConfig", {tableData: tableDatas,});};//树形列表配置const ConfigurationTree = () => {provide("TreeConfig", { isTreeSeleteOrBtn: 1 });};//按钮配置const ConfigurationButton = () => {let CfgButtonDatas = [];CfgButtonDatas = [{btnName: "新增",btnType: "success",plain: true, //简约按钮类型，与UI相关SvgIconName: "Insert",},{btnName: "编辑",btnType: "primary",plain: true,SvgIconName: "Update",},{btnName: "删除",btnType: "danger",plain: true,SvgIconName: "Delete",},];provide("ButtonTypes", { type: 1 }); // 通常使用默认 1 按钮provide("ButtonConfig", { CfgButtonDatas: CfgButtonDatas });};//注册高级筛选查询配置、表单配置return {pageSize,pageNum,total,ConfigCondition, //表单数据，实时传递回ConfigurationCondition,ConfigurationTable,ConfigurationTree,ConfigurationButton,};},created() {//初始化配置this.ConfigurationCondition();this.ConfigurationTable();this.ConfigurationTree();this.ConfigurationButton();//加载表单、表格列头this.GetColDataList();// Get请求下，必须要在对象内添加params 参数，再嵌套一层，否则无法识别const param = {params: {pageSize: this.pageSize,pageNum: this.pageNum,},};// this.GetDataFenYe(param);//获取部门树形列表this.GetDepartMentGetDataTree();},mounted() {},methods: {//实时监听子组件发送的信息GetDataFenYeWath(Msg) {//重新赋值，避免新增、修改、删除操作this.pageSize = Msg.pageSize;this.pageNum = Msg.pageNum;let param = {params: Msg,};this.GetDataFenYe(param);},//获取用户数据，用户数据绑定在某个模块节点下，默认查询所有GetDepartMentGetDataTree() {//Get请求下，必须要在对象内添加params 参数，再嵌套一层，否则无法识别const param = {params: {},};this.$API.DicGetDataTree(param).then((res) => {//组件渲染// console.log("树", res.data.Data.lstSubset[0].DictID);this.defaultSelected = [res.data.Data.lstSubset[0].DictID];this.selectedDictIDs = [res.data.Data.lstSubset[0]];this.$refs.TreeRef.SetTreeDatas(res.data.Data.lstSubset);const param = {params: {pageSize: this.pageSize,pageNum: this.pageNum,DictIDs: res.data.Data.lstSubset[0].DictID,},};this.GetDataFenYe(param);}).catch((err) => {// this.$notify.error({//   title: "消息提示",//   message: err,// });});},//获取用户数据，用户数据绑定在某个模块节点下，默认查询所有GetColDataList() {//Get请求下，必须要在对象内添加params 参数，再嵌套一层，否则无法识别const param = {params: { param: "1" },};this.$API.DicGetColDataList(param).then((res) => {//组件渲染this.$refs.tableRef.SetDataTableHeader(res.data.Data);//直接将此数据类型贯通至组件中this.ConfigCondition = res.data.Data.lstSubset[0].Froms;}).catch((err) => {// this.$notify.error({//   title: "消息提示",//   message: err,// });});},//查询分页数据GetDataFenYe(param) {this.$API.DicGetDataFenYe(param).then((res) => {//组件渲染console.log("数据", res.data.Data);this.$refs.tableRef.SetDataTable(res.data.Data);}).catch((err) => {// this.$notify.error({//   title: "消息提示",//   message: err,// });});},/*** 新增* @param {*} data*/InsertFormDatas(data) {this.$API.DicInsertData(data).then((res) => {ElMessage({type: "success",message: res.data.Msg,});this.CloseForm();this.dialogVisible = false;const param = {params: {pageSize: this.pageSize,pageNum: this.pageNum,DictIDs: data.DictID,},};this.GetDataFenYe(param);}).catch((err) => {this.$notify.error({title: "消息提示",message: err,});});},/*** 修改* @param {} data*/UpdateFormDatas(data) {this.$API.DicUpdateData(data).then((res) => {ElMessage({type: "success",message: res.data.Msg,});this.CloseForm();this.dialogVisible = false;const param = {params: {pageSize: this.pageSize,pageNum: this.pageNum,DictIDs: data.DictID,},};this.GetDataFenYe(param);}).catch((err) => {this.$notify.error({title: "消息提示",message: err,});});},/*** 删除* @param {*} data*/DeleteFormDatas(data) {this.$API.DicDeletData(data).then((res) => {ElMessage({type: "success",message: res.data.Msg,});this.CloseForm();this.dialogVisible = false;const param = {params: {pageSize: this.pageSize,pageNum: this.pageNum,DictIDs: data.DictID,},};this.GetDataFenYe(param);}).catch((err) => {this.$notify.error({title: "消息提示",message: err,});});},//获取表单组件传递的信息，此处接收的表单乃是数据表格对应的表单GetCondition(datas) {console.log("组件：表单组件发送信息：" + datas);var formDatas = {};// datas.forEach((e, index) => {//   for (let i = 0; i < e.length; i++) {//     var keys = datas[index][i].prop;//     var values = datas[index][i].value;//     formDatas[keys] = values;//   }// });const param = datas;//获取表单组件后，判断是新增/修改if (this.dialogTitle.search("新增") != -1) {this.InsertFormDatas(param);}if (this.dialogTitle.search("编辑") != -1) {console.log("param===========", param);this.UpdateFormDatas(param);}},//获取表格组件传递的信息GetTableMessage(msg) {//获取listDatas值this.listData =msg.type === "列表选择"? msg.listData: msg.type === "页码切换"? null: null;console.log("组件：表格发送信息：" + this.listData);},//获取树形组件传递的信息GetTreeMessage(val) {console.log("valaaa", val.data);let NodeList = JSON.parse(JSON.stringify(val.data));this.selectedDictIDs = val.data;let newParam = "";NodeList.forEach((element) => {newParam = newParam + element.DictID + ",";});//去掉最后一个逗号(如果不需要去掉，就不用写)if (newParam.length > 0) {newParam = newParam.substr(0, newParam.length - 1);}console.log("--------组件：树形列表解析后：" + newParam);const param = {params: {pageSize: this.pageSize,pageNum: this.pageNum,DictIDs: newParam,},};this.GetDataFenYe(param);},//折叠面板用户handleChange(val) {},//获取按钮组件消息GetBtnClick(val) {//拿到组件信息后，新增、修改弹出Dalodif (val.search("新增") != -1) {// this.CloseForm();this.$nextTick(() => {this.$refs.tableRef.ClearSelect();});//luif (JSON.parse(JSON.stringify(this.selectedDictIDs)).length != 1) {//警告this.$message({message: "请选择一条字典项进行新增操作！",type: "warning",});return;}//循环表单var newSelectData = JSON.parse(JSON.stringify(this.selectedDictIDs));this.ConfigCondition.forEach((item) => {newSelectData.forEach((dataitem) => {//循环找Keyfor (let key in dataitem) {if (item.prop == key && key == "DictID") {item.value = dataitem[key];}}// item[0].value = defaultSelected;});});console.log("ConfigCondition===", this.ConfigCondition);this.dialogVisible = true;this.dialogTitle = val + "字典项";}if (val.search("编辑") != -1) {//仅支持单条编辑if (JSON.parse(JSON.stringify(this.listData)).length != 1) {//警告this.$message({message: "请选择一条数据进行编辑操作！",type: "warning",});return;}//结构剖析var newListData = JSON.parse(JSON.stringify(this.listData));//循环表单this.ConfigCondition.forEach((item) => {newListData.forEach((dataitem) => {//循环找Keyfor (let key in dataitem) {if (item.prop == key) {item.value = dataitem[key];}}});});this.dialogVisible = true;this.dialogTitle = val + "字典项";}if (val.search("删除") != -1) {this.$nextTick(() => {var _this = this;//仅支持单条编辑if (JSON.parse(JSON.stringify(this.listData)).length != 1) {//警告this.$message({message: "请选择一条数据进行删除操作！",type: "warning",});return;}//结构剖析var newListData = JSON.parse(JSON.stringify(this.listData));ElMessageBox.confirm("确认删除这条信息吗?", "警告", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {_this.DeleteFormDatas(newListData[0]);}).catch(() => {});});}},//清空表单数据，解决选中某行时，点击新增按钮，响应ConfigCondition参数的清空以及取消选择CloseForm() {this.$nextTick(() => {//循环表单清空this.ConfigCondition.forEach((item) => {item.value = "";});//清空选择this.$refs.tableRef.ClearSelect();});},},
};
</script><style lang="scss" scoped>
.el-divider--vertical {display: inline-block;width: 1px;height: 53em;margin: 0 8px;vertical-align: middle;position: relative;border-left: 1px var(--el-border-color) var(--el-border-style);
}
</style>