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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/41756.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AQS的原理及应用

AQS的原理及应用

文章目录 AQS引言AQS 的原理AQS 应用举例1：Semaphore举例2：ReentrantLockAQS 的案例分析问题背景解决方案AQS 引言 在我们的日常生活和工作中，往往需要协调各个线程之间的执行顺序和资源使用，而AQS（AbstractQueuedSynchronizer）即为 Java 并发包中提供的一种解决办法。…
阅读更多...
ubuntu 部署 ChatGLM-6B 完整流程 模型量化 Nvidia

ubuntu 部署 ChatGLM-6B 完整流程 模型量化 Nvidia

ubuntu 部署 ChatGLM-6B 完整流程 模型量化 Nvidia 初环境与设备环境准备克隆模型代码部署 ChatGLM-6B完整代码 ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#x…
阅读更多...
力扣 322. 零钱兑换

力扣 322. 零钱兑换

题目来源&#xff1a;https://leetcode.cn/problems/coin-change/description/ C题解&#xff08;来源代码随想录&#xff09;&#xff1a;题目中说每种硬币的数量是无限的&#xff0c;可以看出是典型的完全背包问题。动规五部曲分析如下&#xff1a; 确定dp数组以及下标的含义…
阅读更多...
深入理解设计模式-创建型之建造者模式（与工厂区别）

深入理解设计模式-创建型之建造者模式（与工厂区别）

什么是建造者设计模式&#xff1f;和工厂设计模式有什么区别 建造者设计模式&#xff08;Builder Design Pattern&#xff09;和工厂设计模式&#xff08;Factory Design Pattern&#xff09;都是面向对象设计中的创建型模式&#xff0c;但它们解决的问题和应用场景有所不同。…
阅读更多...
原码、反码、补码，进制转换，有符号数和无符号数转换

原码、反码、补码，进制转换，有符号数和无符号数转换

计算机底层存储数据时&#xff0c;存储的是数据对应的二进制数字。对于整型数据&#xff0c;其二进制表示形式有三种&#xff0c;分别是&#xff1a;原码、反码、补码&#xff0c;而实际存储的是整型数据的补码。 原码、反码以及补码都是有符号的&#xff0c;其中最高位存放符…
阅读更多...
带你掌握Stable Diffution商业级玩法

带你掌握Stable Diffution商业级玩法

课程介绍 学习地址 《Stable Diffusion商业级玩法》通过详细讲解AI绘画技巧、实操演示和个性化指导&#xff0c;帮助您从零基础成为绘画高手&#xff0c;帮助您有效推广产品或服务&#xff0c;提升市场份额。教您掌握稳定扩散绘画技巧&#xff0c;开启艺术创作新篇章。
阅读更多...
Opencv 之ORB特征提取与匹配API简介及使用例程

Opencv 之ORB特征提取与匹配API简介及使用例程

Opencv 之ORB特征提取与匹配API简介及使用例程 ORB因其速度较快常被用于视觉SLAM中的位姿估计、视觉里程、图像处理中的特征提取与匹配及图像拼接等领域本文将详细给出使用例程及实现效果展示 1. API 简介 创建 static Ptr<ORB> cv::ORB::create (int nfeatures 500…
阅读更多...
无涯教程-Perl - use函数

无涯教程-Perl - use函数

描述 此函数将MODULE导出的所有功能(或仅LIST引用的功能)导入当前包的名称空间。有效等效于- BEGIN { require "Module.pm"; Module->import(); }也用于在当前脚本上强加编译器指令(编译指示),尽管从本质上讲它们只是模块。 请注意,use语句在编译时进行判断。在…
阅读更多...
springcloud3 hystrix实现服务熔断的案例配置3

springcloud3 hystrix实现服务熔断的案例配置3

一 hystrix的熔断原理 1.1 hystrix的熔断原理 在springcloud的框架里&#xff0c;熔断机制是通过hystrix实现&#xff0c;hystrix会监控服务之间的调用。当失败调用达到一定的阈值&#xff0c;默认是5s内失败20次&#xff0c;就会启用hystrix的熔断机制&#xff0c;使用命Hy…
阅读更多...
神经网络基础-神经网络补充概念-44-minibatch梯度下降法

神经网络基础-神经网络补充概念-44-minibatch梯度下降法

概念 小批量梯度下降法&#xff08;Mini-Batch Gradient Descent&#xff09;是梯度下降法的一种变体&#xff0c;它结合了批量梯度下降&#xff08;Batch Gradient Descent&#xff09;和随机梯度下降&#xff08;Stochastic Gradient Descent&#xff09;的优点。在小批量梯…
阅读更多...
Apache Doris大规模数据使用指南

Apache Doris大规模数据使用指南

目录 发展历史 架构介绍 弹性MPP架构-极简架构 逻辑架构 基本访问架构 分区 创建单分区表
阅读更多...
【C++ 记忆站】缺省参数

【C++ 记忆站】缺省参数

文章目录 缺省参数的概念缺省参数的分类1、全缺省参数2、半缺省参数 缺省参数实际应用场景 缺省参数的概念 缺省参数是声明或定义函数时为函数的参数指定一个缺省值。在调用该函数时&#xff0c;如果没有指定实参则采用该形参的缺省值&#xff0c;否则使用指定的实参 正常调用一…
阅读更多...
音频解码及如何在Java实现

音频解码及如何在Java实现

本人并不干这个&#xff0c;但是被迫下水了解了一下这个&#xff0c;稍微做了一下整理。再就是感觉现在网上以及ChatGPT在这方面给出的答案太水了&#xff0c;在此开辟一篇。无意放出代码&#xff0c;这里只介绍一些可能重要的点。 本来以为有了ChatGPT写这些就没有必要了&…
阅读更多...
Docker部署ES服务，canal全量同步的时候内存爆炸，ES/Canal Adapter自动关闭，CPU100%

Docker部署ES服务，canal全量同步的时候内存爆炸，ES/Canal Adapter自动关闭，CPU100%

文章目录 问题解决方案1. 对ES的限制2. 对Canal-Adapter的限制 问题 使用canal-adapter全量同步&#xff08;参考Canal Adapter1.1.5版本API操作服务&#xff0c;手动同步数据&#xff08;4&#xff09;&#xff09;的时候 小批量数据可以正常运行&#xff08;几千条&#xf…
阅读更多...
Llama 2免费托管及API提供

Llama 2免费托管及API提供

Llama 2 是 Meta 最新的文本生成模型&#xff0c;目前其性能优于所有开源替代方案。 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 1、强大的Llama 2 它击败了 Falcon-40B&#xff08;之前最好的开源基础模型&#xff09;&#xff0c;与 GPT-3.5 相当&#xff0c;仅低…
阅读更多...
【uni-app】 .sync修饰符与$emit(update:xxx)实现数据双向绑定

【uni-app】 .sync修饰符与$emit(update:xxx)实现数据双向绑定

最近在看uni-app文档&#xff0c;看到.sync修饰符的时候&#xff0c;觉得很有必要记录一下 其实uni-app是一个基于Vue.js和微信小程序开发框架的跨平台开发工具 所以经常会听到这样的说法&#xff0c;只要你会vue&#xff0c;uni-app就不难上手 在看文档的过程中&#xff0c;发…
阅读更多...
.netcore grpc客户端工厂及依赖注入使用

.netcore grpc客户端工厂及依赖注入使用

一、客户端工厂概述 gRPC 与 HttpClientFactory 的集成提供了一种创建 gRPC 客户端的集中方式。可以通过依赖包Grpc.Net.ClientFactory中的AddGrpcClient进行gRPC客户端依赖注入AddGrpcClient函数提供了许多配置项用于处理一些其他事项&#xff1b;例如AOP、重试策略等 二、案…
阅读更多...
miniExcel 生成excel

miniExcel 生成excel

一、nuget dotnet add package MiniExcel --version 1.31.2 二、新建表及数据 ExampleProducts 三、这里我用了Dapper.Query方法 读取excel public virtual async Task<IActionResult> Anonymous(){try{//using (var connection _dbContext.GetDbConnection())//{//…
阅读更多...
linux中的ifconfig和ip addr

linux中的ifconfig和ip addr

在linux操作系统中ifconfig和ip addr都是显示网卡配置信息的命令&#xff0c;好多人有疑惑它们有什么区别呢 区别1&#xff1a;对于linux发行的版本不一样 ip addr是对新发行版本的linux使用会比较多&#xff1b;而ifconfig是老版本遇到使用的会比较多。 区别2&#xff1a;显…
阅读更多...
神经网络基础-神经网络补充概念-32-神经网络与大脑

神经网络基础-神经网络补充概念-32-神经网络与大脑

概念 神经网络&#xff08;Neural Networks&#xff09;是受到生物神经系统启发而设计的机器学习模型&#xff0c;用于处理和学习复杂的数据模式。尽管神经网络的设计和工作原理与大脑有一些相似之处&#xff0c;但它们并不完全相同&#xff0c;以下是神经网络和大脑之间的一些…
阅读更多...
最新文章

Copyright @ 2022~2023