网站推广计划包括哪些,网络app制作网站有哪些内容,网站要怎么做的吗,做汽车精品的网站写在前面#xff0c;博主是个在北京打拼的码农#xff0c;从事前端工作5年了#xff0c;做过十多个大大小小不同类型的项目#xff0c;最近心血来潮在这儿写点东西#xff0c;欢迎大家多多指教。 对于文章中出现的任何错误请大家批评指出#xff0c;一定及时修改。有任何… 写在前面博主是个在北京打拼的码农从事前端工作5年了做过十多个大大小小不同类型的项目最近心血来潮在这儿写点东西欢迎大家多多指教。 对于文章中出现的任何错误请大家批评指出一定及时修改。有任何想要讨论和学习的问题可联系我13287946835139.com。发布文章的风格因专栏而异均自成体系不足之处请大家指正。
本文关键字vuedom元素、页面中的模块随意换位置、通过拖拽改变元素位置、通过拖拽交换元素位置 基本思路
1.写成渲染函数比较麻烦一个又一个模块比较复杂还是用template模版语法渲染比较好
2.所以决定分成多个组件使用动态组件进行渲染
批量引入探索
批量引入文件夹下的vue文件 created() {this.requireSvgs();},methods: {// 将引入资源的动作定义成了函数requireSvgs () {const requireAll requireContext requireContext.keys().map(requireContext)const req require.context(./hintSetChild, false, /\.less$/);console.log(req.keys() : , req.keys());requireAll(req)}, 报错 This relative module was not found: * ./common.less in ./src/components/orgOffice/statisticAnalysis/hintSetChild nonrecursive \.less$ 项目技术栈版本 vue: ^2.6.11, webpack: ^3.12.0, 老项目开发起来很难受很难受web自动导入探索失败目前认定是webpack版本太低不支持至少到5版本比较好 所以最后我并没有进行自动引入 定位跳转
动态组件引入组件后通过定位跳转到指定位置
divv-foritem of modelSortList:keyitem.codeclickgotoView(item.code){{ item.shortName }}/divtemplate v-foritem of modelSortListcomponent:createTimecreateTime:keyitem.code:isChart item.code:refChart item.code/component/templategotoView(code) {this.$nextTick(() {const index Chart code;if (this.$refs[index][0]) {this.$refs[index][0].$el.scrollIntoView();}});},
父组件点击后所有子组件刷新
vue 点击父组件刷新子组件_AB教程网
排序接口返回内容
[{id: 1,code: 1,name: 单位统计分析,shortName: 单位,sortNum: 7,delFlag: 0},{id: 7,code: 1,name: 舆情处置情况统计报表,shortName: 处置,sortNum: 6,delFlag: 0},{id: 2,code: 1,name: 舆情事件,shortName: 舆情,sortNum: 5,delFlag: 0},{id: 3,code: 1,name: 媒体来源top20,shortName: 媒体,sortNum: 4,delFlag: 0},{id: 4,code: 1,name: 舆情所属条线分析,shortName: 条线,sortNum: 3,delFlag: 0},{id: 5,code: 1,name: 负面类别,shortName: 类别,sortNum: 2,delFlag: 0},{id: 6,code: 1,name: 长期悬而未决事件,shortName: 长期,sortNum: 1,delFlag: 0}
]
全部代码
templatedivclassextractCommont extractSearch userControl extractDataMaintenanceSearch specialHidcontainerdiv classwith90 stylewidth:98%divdiv classcommentInformationSearchBoxdiv classtitleLabel set-style-1div classtitleLabel col-3label classfont-weight时间范围/labelnbsp;nbsp;el-cascaderplaceholder请选择:optionstimeOptionfilterableclearablechange-on-selectv-modeltimeRange:props{emitPath: true}change(timeRangeStart ), (timeRangeEnd )/el-cascaderel-radio-groupstylewidth: 120px;v-modelrangeSetsizeminiel-radio-button label自定义/el-radio-button/el-radio-groupel-date-picker:picker-optionspickerOptionsEndv-ifrangeSet 自定义value-formatyyyy-MM-dd HH:mm:ssv-modeltimeRangeStarttypedatetimeplaceholder开始日期changetimeRange /el-date-pickernbsp;el-date-picker:picker-optionspickerOptionsEndv-ifrangeSet 自定义value-formatyyyy-MM-dd HH:mm:ssv-modeltimeRangeEndtypedatetimeplaceholder结束日期changetimeRange /el-date-pickerlabel事发单位/labelel-cascader:optionsorganizationfilterableclearablechange-on-selectv-modelsendOrgId:props{label: name,value: id,children: childrenList,emitPath: false,expandTrigger: hover}:show-all-levelsfalse/el-cascadernbsp;button classblue styleheight:30px clicksearch()img srcimages/search.png /查询/button/div/div/divdiv classfixedTab noUnfold v-if!isUnfolddivv-foritem of modelSortList:keyitem.nameclickgotoView(item.id){{ item.shortName }}/divdiv stylefont-size:25px clickisUnfold !isUnfoldi classel-icon-arrow-right/i/div/divdiv classfixedTab unfold v-elsediv v-for(item, index) of modelSortList :keyitem.shortNamespan clickgotoView(item.id){{ item.name }}/spantemplate v-ifsetSortNownbsp;iv-ifindex ! modelSortList.length - 1clicksetIt(下移, index)classel-icon-bottom/iiv-ifindex ! 0clicksetIt(上移, index)classel-icon-top/iemsp;/template/divdiv stylefont-size:25pxi clickisUnfold !isUnfold classel-icon-arrow-left/ibuttonv-if!setSortNowclassbluestyleheight:30pxclicksetSortNow true排序设置/buttonbuttonv-elseclassbluestyleheight:30pxclicksetSortNow false,setSortList()保存/button/div/div!-- div classtabdivspan:classtype Table ? checked : clicktype Table统计报表/span|emsp;span:classtype Chart ? checked : clicktype Chart图表分析/span/div/div --template v-foritem of modelSortListcomponent:createTimecreateTime:keyitem.id timer:isChart item.id:refChart item.id/component/template!--div v-showtype Charthint-set-chart :createTimecreateTime //div --/div/div/div
/templatescript
// import checkMixin from /js/checkMisIn.js;
// import hintSetChart from ./hintSetChart.vue;
import { removeEmptyChildren, treeToList } from /js/common.js;
import Component from ../../common/cwDialog/src/component.vue;
import Chart1 from ./hintSetChild/chart1.vue;
import Chart2 from ./hintSetChild/chart2.vue;
import Chart3 from ./hintSetChild/chart3.vue;
import Chart4 from ./hintSetChild/chart4.vue;
import Chart5 from ./hintSetChild/chart5.vue;
import Chart6 from ./hintSetChild/chart6.vue;
import Chart7 from ./hintSetChild/chart7.vue;
const month new Date().getMonth() 1;
export default {components: {// hintSetChart,Component,Chart1,Chart2,Chart3,Chart4,Chart5,Chart6,Chart7},// mixins: [checkMixin],data() {return {setSortNow:false,timer: ,limitObj: {},limitTimeStr: ,modelSortList: [],isUnfold: false,sendOrgId: ,organization: [], //组织机构树organizationList: [], //组织机构列表pickerOptionsEnd: {disabledDate: time {// if (this.timeRangeStart) {// return (// time.getTime() Date.now() - 8.64e6 ||// //结束日期要在选择的开始日期之后,小于开始时间的日期不能选// time.getTime() new Date(this.timeRangeStart).getTime()// );// }return (time.getTime() Date.now() - 8.64e6 ||time.getTime() new Date(this.limitTimeStr).getTime()); //今天及之前}},timeRangeStart: ,timeRangeEnd: ,rangeSet: ,timeRange: , //默认当年当季当月defaultObj: {value: ,label: ,children: [{value: 1,label: 第一季度,children: [{value: 1,label: 1月},{value: 2,label: 2月},{value: 3,label: 3月}]},{value: 2,label: 第二季度,children: [{value: 4,label: 4月},{value: 5,label: 5月},{value: 6,label: 6月}]},{value: 3,label: 第三季度,children: [{value: 7,label: 7月},{value: 8,label: 8月},{value: 9,label: 9月}]},{value: 4,label: 第四季度,children: [{value: 10,label: 10月},{value: 11,label: 11月},{value: 12,label: 12月}]}]},timeOption: [],type: Table,sortObj: {},createTime:new Date().getFullYear() (month 10 ? -0 month : - month),expireTimeOption: {disabledDate(time) {return time.getTime() Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的}},//旧importlogShow: false,header: {Authorization: localStorage.getItem(header)},editBtnFlag: false,loginRole: JSON.parse(localStorage.getItem(loginUl)),isRole: false, //打开岗位组loading: true,missionList: [],cur: 1, //分页all: 0,rows: 15, //条数totalCount: 0, //总条数list: {},//searchVal: , //搜索gridData: [],options: , //地域value: ,optionsUnit: , //单位名称valueStation: ,optionsStation: [],valueUnit: ,optionsSubordinate: , //下级单位valueSubordinate: ,checked: false, //全选框状态checkeds: false,isHint: false, //删除deleteId: ,item: {name: 确定删除选中的数据吗},saveLoading: false,tradeSetting: {},editSHow: false,addressId: ,orgId: ,deleteIds: ,editList: {},addListsj: ,uploadLoading: false,addxz: ,orderBy: create_time,depList: [],orgNewName: ,depNewId: ,createdDep: false,createdDepNameText: ,newUnit: ,departmentList: [],unitXID: ,radio: ,isHidden: false};},watch: {},created() {this.getNowTimeRange();this.getDateDic();this.getModelSortList();},async mounted() {this.setBgStyleNow();this.getLimitTimeInfo();},methods: {setIt(type, index) {switch (type) {case 上移:[this.modelSortList[index], this.modelSortList[index - 1]] [this.modelSortList[index - 1],this.modelSortList[index]];// this.modelSortList[index - 1].isVisible false;this.$forceUpdate();break;case 下移:[this.modelSortList[index], this.modelSortList[index 1]] [this.modelSortList[index 1],this.modelSortList[index]];// this.modelSortList[index 1].isVisible false;this.$forceUpdate();break;}},gotoView(id) {this.$nextTick(() {const index Chart id;if (this.$refs[index][0]) {this.$refs[index][0].$el.scrollIntoView();}});},getLimitTimeInfo() {this.timeOption [];const year new Date().getFullYear() ;this.$http({method: GET,url: /cbrc/work/statistics/module/startDate}).then(res {this.limitObj res.data.data;this.limitTimeStr this.limitObj[时间];for (var i this.limitObj[年] * 1; i year * 1; i) {let obj this.defaultObj;obj.value i ;obj.label i 年;obj.children.forEach((a, index) {if (a.value this.limitObj[季度]) {obj.children obj.children.slice(index, obj.children.length);}a.children.forEach((b, index2) {if (b.value this.limitObj[月]) {a.children a.children.slice(index2, a.children.length);}});});this.timeOption.push(obj);}console.log(this.timeOption : , this.timeOption);});this.$forceUpdate();},getModelSortList() {this.$http({method: GET,url: /cbrc/work/statistics/moduleSort/query?code 1}).then(res {this.modelSortList res.data.data;});},async setSortList(){this.modelSortList.forEach((i,index){i.sortNumthis.modelSortList.length-index;})console.log(this.modelSortList : , this.modelSortList);await this.$http({method: POST,url: /cbrc/work/statistics/moduleSort/save,data: this.modelSortList}).then(res {if (res res.data) {if(res.data.code200){this.$message.success(保存成功);}else{this.$message.warning(保存失败);}}})},getDateDic() {this.$http({method: GET,url: /cbrc/user_center/organization/query/children?levelNum 4}).then(res {this.organization res.data.data;if (this.organization) {this.organizationList treeToList(this.organization);removeEmptyChildren(this.organization);this.$forceUpdate();}});},getNowTimeRange() {//获取当前年const year new Date().getFullYear() ;// 获取当前季度var currMonth new Date().getMonth() 1;var currQuarter Math.floor(currMonth % 3 0 ? currMonth / 3 : currMonth / 3 1) ;// const info {// 1: 第一季度,// 2: 第二季度,// 3: 第三季度,// 4: 第四季度// };// const quarter info[currQuarter];//获取当前月const monthNum new Date().getMonth() 1;const nowMonth monthNum ;this.timeRange [year, currQuarter, nowMonth];},setBgStyleNow() {const that this;if (this.missionList this.missionList.length 0) {this.$nextTick(() {that.missionList.forEach((item, index) {if (index % 2 ! 0) {that.$refs[setBgStyle index][0].style.backgroundColor #f8f8f8;}});});}},//搜索search() {if (this.timeRange this.timeRange.length) {// if (this.timeRange.length 2) {// return this.$message.warning(请选择季度);// }this.timeRangeStart ;this.timeRangeEnd ;} else {if (!this.timeRangeStart ! !this.timeRangeEnd) {if (!this.timeRangeStart) {return this.$message.warning(请选择开始日期);} else {return this.$message.warning(请选择结束日期);}}}this.timer new Date().getTime();}}
};
/script
style langless scoped
.commonStyle() {cursor: pointer;min-width: 80px;color: #fff;font-size: 14px;border-radius: 6px !important;
}
.col {display: inline !important;
}
.blue {.commonStyle;
}
.blues {height: 38px;.commonStyle();
}.green {float: right !important;
}
.fl {width: 100% !important;margin: 10px 0 !important;
}
.popRed {color: red;
}
.el-cascader {width: 100%;
}
.extractDataMaintenanceSearch .odd .fl button {margin-bottom: 0px;
}
.lead {position: relative;img {position: absolute;width: 25px;bottom: 25px;cursor: pointer;}
}
.styleSet {.item {height: 40px;line-height: 40px;display: flex;justify-content: space-between;.el-input,.el-select,.el-cascader,.col-1-1 {width: 80%;}}
}
.buttonStyle {cursor: pointer;display: inline-block;width: 20px;height: 20px;margin: 0px 5px;margin-top: 10px;vertical-align: middle;cursor: pointer;background-size: contain;
}
.item {margin-top: 4px;padding-top: 4px;
}
.order {vertical-align: middle;cursor: pointer;width: 18px;
}
.tab {margin-top: 20px;margin-bottom: 20px;padding-left: 20px;font-size: 16px;display: flex;align-items: center;justify-content: flex-end;span {margin-right: 20px;cursor: pointer;}.checked {font-weight: bold;color: var(--mainColor);}
}
.fixedTab {z-index: 1000;position: fixed;top: 350px;background: #fff;left: 40px;border-radius: 10px;font-size: 16px;line-height: 30px;border: 1px solid var(--mainColor);text-align: center;div {padding: 5px;cursor: pointer;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
}
.noUnfold {width: 50px;div {:hover {color: var(--mainColor);}}
}
.unfold {width: 250px;i,span {:hover {color: var(--mainColor);}}
}
/style
style
import common.css;
/style
