封裝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.pswp.cn/news/41756.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/41756.shtml
英文地址，請注明出處：http://en.pswp.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