网站建设与维护技术浅谈论文,新乡+网站建设,wordpress 漫画网站,网站管理包括记录一下页面搭建记录#xff0c;利用vue2组件化开发的思想。这个页面适合于大部分信息管理系统~。模板固定#xff0c;每次使用#xff0c;直接修改表单表格参数#xff0c;api接口等。 以上图页面为例#xff0c;一个基础数据信息页面可以分为#xff0c;分类#xff… 记录一下页面搭建记录利用vue2组件化开发的思想。这个页面适合于大部分信息管理系统~。模板固定每次使用直接修改表单表格参数api接口等。 以上图页面为例一个基础数据信息页面可以分为分类左侧)数据信息右侧搜索表单右上数据表格右下新增或编辑表单对话框。 全局css样式部分 .top_box {// min-height: 10vh;width: 100%;border-radius: 5px;background-color: #fff; /* 背景色为白色 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 添加投影效果 */padding: 10px 10px 10px;margin-bottom: 10px;
}.down_box {min-height: 10vh;width: 100%;border-radius: 5px;background-color: #fff; /* 背景色为白色 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 添加投影效果 */
}.left_box {float: left;width: 20%;border-radius: 5px;background-color: #fff; /* 背景色为白色 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); /* 添加投影效果 */padding-bottom: 5%;
}.right_box {float: left;min-height: 90vh;width: 79%;margin-left: 1%;border-radius: 5px;background-color: #fff; /* 背景色为白色 */
}
index.vue主页面 templatediv classapp-containerdiv classleft_boxCategoryMenu selectNodeselectNode //divdiv classright_boxdiv classtop_boxsearch-form:searchFormsearchForm:sizesizesearchperformSearchresetresetSearch/div stylefloat: left; margin: 5px 0 0 20pxel-button:disabledcurrentCategoryId null || currentCategoryId typeprimaryplain:sizesizeiconel-icon-circle-plus-outlineclicktoAdd新增/el-buttonel-buttontypesuccessplain:sizesizeiconel-icon-document-copydisabled迭代/el-button/divdiv styleclear: both/div/divdiv classdown_boxdiv stylepadding: 20px 20px 10px 20pxel-breadcrumb separator-classel-icon-arrow-rightel-breadcrumb-itemv-for(item, index) in currentCategory:keyindex{{ item }}/el-breadcrumb-item/el-breadcrumb/divdiv stylepadding: 10px; min-height: 400pxcustomTable :listlist toEdittoEdit toDeletetoDelete //divdiv stylepadding-bottom: 10pxel-pagination:page-sizes[10, 20, 40, 100]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totalcounts:current-page.syncpagesize-change(val) handleSizeChange(val, this)current-change(val) handleCurrentChange(val, this)aligncenter/el-pagination/div/div/diveditForm:edit-viseditVis:edit-statuseditStatus:edit-formeditForm:rulesrules:userOptionuserOptionsubmitsubmitFormcancelcancel//div
/templatescript
import {addStorageWarehouse,pageStorageWarehouse,updateStorageWarehouse,deleteStorageWarehouse,
} from /api/storage/storage-warehouse;
import { list } from /api/system/user;
import {confirmAction,submitWithConfirmation,
} from /utils/confirmationHelper;
import paginationMethods from /utils/pagination.js;
import searchForm from ./components/searchForm.vue;
import customTable from ./components/customTable.vue;
import editForm from ./components/editForm.vue;
import CategoryMenu from ./components/CategoryMenu.vue;
export default {name: bom,components: {searchForm,customTable,editForm,CategoryMenu,},data() {return {content: BOM信息,size: small,list: [],searchForm: {},currentCategoryId: ,currentCategoryName: ,currentCategory: [],counts: 0,page: 1,pageSize: 10,userOption: [],editVis: false,editStatus: false,editForm: {},rules: {code: [{ required: true, message: BOM编码不能为空, trigger: blur }],},};},watch: {},created() {this.init();},mounted() {document.addEventListener(keyup, this.handleKeyUp);},beforeDestroy() {document.removeEventListener(keyup, this.handleKeyUp);},methods: {init() {list().then((res) {this.userOption res.data.list.map((item) {return {value: item.id,label: item.name,};});});this.fetchData();},handleKeyUp(event) {if (event.key Enter) {this.fetchData();}},fetchData() {var vm this;const params {page: vm.page,pageSize: vm.pageSize,categoryId: vm.currentCategoryId ? vm.currentCategoryId : undefined,code: vm.searchForm.code ? vm.searchForm.code : undefined,productCode: vm.searchForm.productCode? vm.searchForm.productCode: undefined,};// pageStorageWarehouse(params).then((res) {// vm.list res.data.page.records;// vm.counts res.data.page.total;// });},...paginationMethods, // 导入分页方法performSearch(searchForm) {this.searchForm searchForm;this.handleClickSearch(this);},resetSearch() {this.pageSize 10;this.currentCategoryId ;this.currentCategoryName ;this.currentCategory [];this.resetTable(this);},toAdd() {this.editForm {};this.editStatus false;this.editVis true;},toEdit(row) {this.editForm { ...row };this.editStatus true;this.editVis true;},toDelete(row) {const message 是否删除 this.content ?;const action () deleteStorageWarehouse(row.id);confirmAction(this, message, action);},cancel() {this.editVis false;this.editForm {};},// 提交submitForm(editForm) {this.editForm.bomCategoryId this.currentCategoryId;const action this.editStatus? () updateStorageWarehouse(editForm): () addStorageWarehouse(editForm);submitWithConfirmation(this, action);},selectNode(id, name, category) {this.currentCategoryId id;this.currentCategoryName name;this.currentCategory category.split(,);this.fetchData();},},
};
/scriptstyle langless scoped
/style
分类菜单(左侧)
templatediv stylepadding: 5pxdivh3 stylemargin: 8px 0; color: rgb(111, 111, 111); text-align: centerBOM分类spanstylefloat: right; margin-right: 10px; cursor: pointerclickeditVis truei classel-icon-edit-outline //span/h3/divdiv stylemargin-bottom: 10pxel-input placeholder输入BOM分类 v-modelfilterText sizemini/el-input/divel-tree:datadatadefault-expand-all:filter-node-methodfilterNode:expand-on-click-nodefalsereftreespan slot-scope{ data }span stylefont-size: 14px clicktoFind(data)i classel-icon-folder /nbsp; {{ data.code }} -{{ data.name }}/span/span/el-treeel-dialogtitleBOM分类:visible.synceditViswidth1280pxtop56pxappend-to-bodyCategoryEdit //el-dialog/div
/templatescript
import { getBomCategoryList } from /api/product/bom-category;
import CategoryEdit from ./CategoryEdit.vue;
export default {components: {CategoryEdit,},data() {return {filterText: ,data: [],editVis: false,};},watch: {filterText(val) {this.$refs.tree.filter(val);},},created() {this.fetchData();},methods: {fetchData() {getBomCategoryList().then((res) {this.data res.data.list;});},filterNode(value, data) {if (!value) return true;return data.name.indexOf(value) ! -1;},toFind(data) {// 返回目录id和目录分级this.$parent.selectNode(data.id, data.name, this.findParentById(data.id));},findParentById(id) {const findParentRecursive (data, id, path []) {for (let item of data) {if (item.id id) {return path.concat(item);} else if (item.children) {const result findParentRecursive(item.children,id,path.concat(item));if (result) {return result;}}}return null;};const result findParentRecursive(this.data, id);if (result) {return result.map((item) item.name).join(,);} else {return 未找到父级元素;}},},
};
/script
搜索表单
templateel-form label-width100px v-modelsearchFormel-form-item :sizesize labelBOM编码 classsearchItemel-inputv-modelsearchForm.codeplaceholder请输入classsearchInputclearable//el-form-itemel-form-item :sizesize label产品编码 classsearchItemel-inputv-modelsearchForm.productCodeplaceholder请输入classsearchInputclearable//el-form-itemdiv classsearchItemel-buttontypeprimary:sizesizeiconel-icon-searchclickhandleClickSearch()搜索/el-buttonel-buttoniconel-icon-refresh-right:sizesizeclick() resetTable()重置/el-button/divdiv styleclear: both/div!-- 清除浮动 --/el-form
/templatescript
export default {name: SearchForm,props: {searchForm: {type: Object,required: true,},size: {type: String,default: mini,},},methods: {handleClickSearch() {this.$emit(search, this.searchForm);},resetTable() {this.$emit(reset);},},
};
/scriptstyle scoped
.searchItem {float: left;margin-left: 20px;
}
.searchInput {width: 160px;
}
/style
数据表格
templatedivel-table :datalist fit highlight-current-rowel-table-column typeselection width55 /el-table-columnel-table-column labelBOM编码 aligncenter propcode width230template slot-scopescopespanel-link:underlinefalsetypeprimaryclicktoEdit(scope.row){{ scope.row.code }}/el-link/span/template/el-table-columnel-table-columnlabel关联产品aligncenterpropproductCodewidth230/el-table-column label版本号 aligncenter propversion /el-table-column label状态 aligncenter propstatus /!-- 操作栏 --el-table-columnlabel操作aligncenterwidth230fixedrightpropoperationtemplate slot-scope{ row, $index }el-button sizemini typesuccess clicktoCopy(row)迭代/el-buttonel-button sizemini typesuccess v-ifrow.status 1提交/el-buttonel-button sizemini typewarning v-ifrow.status 2审核/el-buttonel-button sizemini typeprimary clicktoEdit(row)查看/el-buttonel-button sizemini typedanger clicktoDelete(row)删除/el-button/template/el-table-column/el-table/div
/templatescript
export default {name: custom-table,props: {list: {type: Array,required: true,},},data() {return {size: small,};},watch: {list(newVal, oldVal) {},},methods: {toEdit(row) {this.$emit(toEdit, row);},toCopy(row) {},toDelete(row) {this.$emit(toDelete, row);},},
};
/scriptstyle
/style
新增或编辑表单对话框
templateel-dialog:titleeditStatus ? 查看BOM信息 : 新增BOM信息:visibleviswidth730pxtop56pxappend-to-body:before-closehandleCloseel-formrefeditForm:modeleditForm:rulesruleslabel-width115pxsizesmallel-form-item:sizesizelabelBOM编码propcodestylefloat: leftel-inputv-modeleditForm.codeclasseditItemplaceholder请输入//el-form-itemel-form-item:sizesizelabel产品信息propnamestylefloat: leftel-inputv-modeleditForm.nameclasseditItemplaceholder请输入//el-form-itemdiv styleclear: both/divel-form-item label备注 propremark stylefloat: leftel-inputv-modeleditForm.remarktypetextareaplaceholder请输入备注stylewidth: 515px//el-form-itemdiv styleclear: both/div/el-formdiv slotfooter classdialog-footerdiv stylemargin-right: 60pxel-buttonv-ifeditStatustypeprimarysizeminiclicksubmitForm(editForm)保 存/el-buttonel-buttonv-if!editStatustypeprimarysizeminiclicksubmitForm(editForm)新 增/el-buttonel-button sizemini clickcancel取 消/el-button/div/div/el-dialog
/templatescript
export default {name: edit,props: {editVis: {type: Boolean,required: true,},editStatus: {type: Boolean,required: true,},editForm: {type: Object,required: true,},rules: {type: Object,required: true,},userOption: {type: Array,required: true,},},data() {return {size: small,vis: false,};},watch: {editVis(newVal, oldVal) {this.vis this.editVis;},},methods: {handleClose(done) {this.$confirm(您确定要关闭吗, 确认, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning,}).then(() {this.cancel();done();}).catch(() {// 用户点击取消时的处理});},submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {this.$emit(submit, this.editForm);} else {console.log(error submit!!);return false;}});},cancel() {this.$refs[editForm].resetFields();this.$emit(cancel);},},
};
/scriptstyle langless scoped
.editItem {width: 200px;
}/deep/ .el-collapse-item__header {padding-left: 50px;
}
/style
