1.引入
本次框架是Ruoyi-plus+vue2+element组合。
2.样式
由于是后台项目，样式要求统一，不可以有的输入框长有的短。着重几点：
1.关于form表单应该如何水平布局
在element中，form有个属性叫：:inline="true"时候就会水平。但是有问题有的输入框比较长，像日期选择器和普通输入框大小就不一致。此时就不应该使用这个属性。应该用el-row,el-col。因为输入框默认是独占一行的就像div
代码如下
查询 重置
2.当form表单过多时，如何布局
添加一个模板 利用advanced去控制遮住还是隐藏
查询 重置 {{ advanced ? "收起" : "展开" }}
3.业务逻辑
重点！！！先说说详情，编辑，行复制，删除，导入，导出，多选框的表格，单选框的表格，时间搜索，vue2数组和表单数据的渲染，文件的回显，图片的回显，还有es6语法，js逻辑。
1.详情
详情的话可以取决于你的页面是否和新增长的一样，如果长的一样，可以表单控制一个disabled属性来控制禁止输入
例子
2.新增
外层的新增和编辑我会使用一个页面，没啥好说的。重点是内层新增她还可以编辑这个重点。如何编辑完可以拿到回调的值，这个难。
在编辑的页面增加一个标识符判断编辑还是新增
save() {
console.log("this.form", this.form);
// this.$emit("getList", this.form);
this.$emit("getList", {
...this.form,
addType: this.title === "新增考评指标" ? "add" : "edit",
time: new Date().getTime(),
});
this.innerVisible = false;
}, 在新增的页面判断是新增还是编辑
getList(value) {
let newAddData = [];
console.log("我收到了子组件新增标准的值", value);
if (value.addType === "edit") {
// 创建一个与this.tableData相同结构和内容的新数组
// 使用JSON.parse(JSON.stringify(object))来深拷贝对象，避免直接修改原对象
let marr = JSON.parse(JSON.stringify(this.tableData));
// marr.forEach((item, index) => {
// if (index == value.index) {
// item = value;
// }
// });
marr[value.index] = value;
console.log(marr);
this.tableData = marr;
console.log(marr);
} else {
if (Array.isArray(value)) {
newAddData = [...this.tableData, ...value];
} else {
// 若 res.data 不是数组，将其包装成数组再进行合并
newAddData = [...this.tableData, value];
}
// const newList = [...this.tableData, value];
this.tableData = newAddData;
// this.tableData.sort((a, b) => {
// // 先按照sort字段降序排序
// if (a.sort !== b.sort) {
// return a.sort - b.sort;
// } // 如果sort相同，则按照time字段升序排序（转换为毫秒）
// else {
// return b.time - a.time;
// }
// });
}
// const newList = [...this.tableData, value];
// this.tableData = newList;
console.log("this.tableData", this.tableData);
console.log("this.deptOptions", this.deptOptions);
// 遍历tableData数组，根据deptId查找对应的label
this.tableData = this.tableData.map((item) => {
const deptName = this.findLabelById(item.deptId, this.deptOptions);
const userIds = item.userIds?.split(",");
if (userIds) {
const userNames = userIds
.map((item2) => {
const user = this.userList.find(
(item3) => item3.userId === item2
);
// console.log("userNames", userNames);
return user ? user.nickName : null;
})
.join(",");
return { ...item, deptName, userNames };
} else {
return { ...item, deptName };
}
});
console.log("this.tableData", this.tableData);
}, 这边要注意什么是浅拷贝和深拷贝，我之前都是浅拷贝，这边要改成深拷贝，深拷贝的话避免直接修改原对象。
3.编辑
编辑的话，通常后台需要传当前行的数据进去，后端会提供一个id,去查找数据，数据回显就好了。主要是文件和图片的回显看下面
4.行复制
代码如下 深拷贝一个对象这样不会影响原对象， delete copy.createTime;删除对象属性 es6语法，这边的逻辑就是复制一个和原对象无关的对象，然后用接口新增。 这边重点是es6语法和深浅拷贝的了解与引用
1.深拷贝
const copy = JSON.parse(JSON.stringify(row));
2. 浅拷贝
const copy = Object.assign({}, row); - 如果修改的是第一层（直接）属性且它们是原始类型，row 不受影响；
- 如果修改的是第一层（直接）属性且它们是引用类型（如其他对象或数组），实际上是在修改共享的嵌套对象，此时 row 会相应地发生改变。
- 例子如下
-
const row = { name: 'John', address: { street: 'Main St.', number: 123, }, }; const copy = Object.assign({}, row); // 修改第一层属性（字符串），不影响 row copy.name = 'Jane'; // row.name仍然是'John' // 修改嵌套对象的属性，会影响 row copy.address.street = 'New St.'; // row.address.street现在也是'New St.'async copyRow(row) { console.log("row", row); // this.loading = true; const copy = JSON.parse(JSON.stringify(row)); delete copy.createTime; copy.dutyAppraisalId = null; copy.status = null copy.isRead = 0 copy.progress = 0 console.log("copy", copy); await this.getDetail(row.dutyAppraisalId); addDemo({ status: 0, type: 0, ...copy, dutyItems: this.tableData, }).then((res) => { if (res.code == 200) { this.$message({ message: "新建成功", type: "success", }); this.loading = false; this.getList(); } }); // .finally(() => { // this.loading = false; // }); },5.删除
在这个项目中有3中删除
第一种：利用接口拿到id，接口删除
del(No, data) { // console.log("No", No, "DATA", data); if (data.workItemId) { delDetailList(data.workItemId).then((res) => { if (res.code == 200) { this.$message({ message: "删除成功", type: "success", }); this.deleteFuc(No, data); } }); } else { this.deleteFuc(No, data); } },第二种：不需要调用接口时候，利用filter es6的语法
// 使用数组的filter方法，传入一个回调函数作为筛选条件 // 回调函数接受当前遍历项（item）作为参数，检查其"No"属性是否与传入的No参数相异 // 若相异则保留该项，否则过滤掉 const filterData = this.originalData.filter((item) => { return item.No !== No; });第三种：直接用数组splice
this.fileList.splice(index, 1);
6.导入
三部曲
第一步：
导入 第二步：定义， id不存在，存在，不确定存不存在的写法都在下方
import { getToken } from "@/utils/auth"; export default { components: { contentSet, editStandard }, data() { return { activeName: "first", activeName2: "first", form: {}, title: "", dialogVisible: false, // 接收数据 tableData: [], updatedData: [], // 字典值 List: [], showData: [], //展示数据 originalData: [], //真正的数据 // rowData: {}, //行数据 uploadFileUrl: `${process.env.VUE_APP_BASE_API}/epb/workItem/importData${ this.form && this.form.id ? "?workId=" + this.form.id : "" }`, // uploadFileUrl: `${process.env.VUE_APP_BASE_API}/epb/workItem/importData?workId=${this.form.id}`, // 上传文件服务器地址 // uploadFileUrl: process.env.VUE_APP_BASE_API + "/epb/workItem/importData", // 上传文件服务器地址 headers: { Authorization: "Bearer " + getToken(), }, show: false, workList: [], loading: false, }; },第三步：
// 导入文件 handleUploadSuccess(res, file) { // console.log("res", res, "file", file); if (res.code == 200) { //深拷贝 let mArr = JSON.parse(JSON.stringify(tableData)); // 页面操作 concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。 mArr = mArr.concat(res.data.workItemVos); mArr = mArr.map((item, index) => { return { ...item, sort: item.sort + 1, //一开始就遍历加上序号 markTime: new Date().getTime(), }; }); // console.log("mArr", mArr); this.getContentList(mArr); // this.workList = []; this.workList = this.workList.concat(res.data.workLabelVos); console.log("this.workList", this.workList); } },7.导出
导出 /** 导出按钮操作 */ handleExport() { this.download( "/epb/dutyFulfill/export", { ...this.queryParams, }, `责任落实档案列表.xlsx` ); },8.多选框的表格
9.单选框的表格
10.时间搜索
getList() { // this.getTime(); let mData = Object.assign( { pageNum: this.pagination.current, pageSize: this.pagination.pageSize, }, // this.queryParams { ...this.queryParams, startTime: this.queryParams?.date?.length ? dayjs(this.queryParams.date[0]).format("YYYY-MM-DD") : undefined, endTime: this.queryParams?.date?.length > 1 ? dayjs(this.queryParams.date[1]).format("YYYY-MM-DD") : undefined, } ); mData.createUserId = store.getters.userId; this.loading = true; listDemo(mData) .then((res) => { if (res.code == 200) { console.log("res", res); this.remindersList = res.rows; console.log("this.remindersList", this.remindersList); this.pagination.total = res.total; this.loading = false; } }) .finally(() => { this.loading = false; }); },11.对象的键名
// const obj = { // a: 1, // b: 2, // c: [] // } // obj['c']就是数组，拿到的是obj.c的值，可以用pushgroupAndMergeData(arr) { // console.log("a2222", arr); let groupedData = {}; // 遍历newAddData，按workContent字段分类 arr.forEach((item) => { // const obj = { // a: 1, // b: 2, // c: [] // } // obj['c']就是数组，拿到的是obj.c的值，可以用push if (!groupedData[item.workContent]) { // [item.workContent]表示键名 groupedData[item.workContent] = [item]; } else { groupedData[item.workContent].push(item); // groupedData[item.workContent].sort((a, b) => a.sort - b.sort); groupedData[item.workContent].sort((a, b) => { // 先按照sort字段降序排序 if (a.sort !== b.sort) { return a.sort - b.sort; } // 如果sort相同，则按照time字段升序排序（转换为毫秒） else { return b.markTime - a.markTime; } }); } }); // console.log("arr11111", arr); // console.log("groupedData", groupedData); // 合并所有子数组 let mergedData = []; for (let category in groupedData) { mergedData = [...mergedData, ...groupedData[category]]; } // console.log("mergedData", mergedData); // 全部数据保存到这个真正的数据里 const sortData = [...mergedData].map((item, index) => { return { ...item, No: index + 1, //一开始就遍历加上序号 }; }); return sortData; },分组 一种是对象的分组，一种的数组的分组
数组的分组
let classifyWorkContentList = []; //类别数组 [...sourceData].forEach((item) => { // .includes()方法返回一个布尔值（true或false） if (classifyWorkContentList.indexOf(item.workContent) === -1) { classifyWorkContentList.push(item.workContent); } });12.文件的回显
const fileArr = data?.fileUrl?.split(",")?.map((item, index) => { return { fileUrl: item, fileName: data?.fileName?.split(",")[index], }; }) || []; this.form = data; this.$set(this.form, "fileList", fileArr);{{ item.fileName }}, 这边的index因为fileUrl和fileName不是一个数组里的,俩个本来是俩个字符串，然后用split分隔成俩个数组，这边的操作就是把它们弄到一个数组里
13.图片的回显
父组件
14.es6语法
map,filter
15.js逻辑关于党务工作清单的
第一步：要先判断是编辑还是新增。第二步：要确定传给后端的格式。第三步：展示数据的格式。第四步：删除的排序要判断是有id的还是直接删除。第五步：当导入进来的时候，相当于新增，要进行，说明新增的时候要进行判断，如果是数据还是对象。第六步：对于这种提交数据和展示数据不一样数据格式时候要注意操作。
第一步：
getContentList(value) { // console.log("我收到子组件传递的值", value); let newData = []; let newAddData = []; if (value.addType === "edit") { // console.log("this.originalData", this.originalData); newData = this.originalData.map((item) => { if (item.No === value.No) { return value; } return item; }); } else { if (Array.isArray(value)) { newData = [...this.originalData, ...value]; } else { // 若 res.data 不是数组，将其包装成数组再进行合并 newData = [...this.originalData, value]; } } // console.log("value111", value); // console.log("更新后的newData:", newData); const sortData = this.groupAndMergeData(newData); // 赋值给真正的数组 this.originalData = sortData; // console.log("sortData时间字段", sortData); // 赋值给展示数据 this.showData = this.handleData(sortData); },数据分类
// 分类排序 groupAndMergeData(arr) { // console.log("a2222", arr); let groupedData = {}; // 遍历newAddData，按workContent字段分类 arr.forEach((item) => { // const obj = { // a: 1, // b: 2, // c: [] // } // obj['c']就是数组，拿到的是obj.c的值，可以用push if (!groupedData[item.workContent]) { // [item.workContent]表示键名 groupedData[item.workContent] = [item]; } else { groupedData[item.workContent].push(item); // groupedData[item.workContent].sort((a, b) => a.sort - b.sort); groupedData[item.workContent].sort((a, b) => { // 先按照sort字段降序排序 if (a.sort !== b.sort) { return a.sort - b.sort; } // 如果sort相同，则按照time字段升序排序（转换为毫秒） else { return b.markTime - a.markTime; } }); } }); // console.log("arr11111", arr); // console.log("groupedData", groupedData); // 合并所有子数组 let mergedData = []; for (let category in groupedData) { mergedData = [...mergedData, ...groupedData[category]]; } // console.log("mergedData", mergedData); // 全部数据保存到这个真正的数据里 const sortData = [...mergedData].map((item, index) => { return { ...item, No: index + 1, //一开始就遍历加上序号 }; }); return sortData; },重点是对象键名 变数组
// const obj = { // a: 1, // b: 2, // c: [] // } // obj['c']就是数组，拿到的是obj.c的值，可以用push展示数据处理
// 处理数据 handleData(sourceData) { // 分类 let classifyWorkContentList = []; //类别数组 [...sourceData].forEach((item) => { // .includes()方法返回一个布尔值（true或false） if (classifyWorkContentList.indexOf(item.workContent) === -1) { classifyWorkContentList.push(item.workContent); } }); console.log("classifyWorkContentList", classifyWorkContentList); // 按照表格样式修改数据结构 // 例如[{workContent: 'xxx', workNormList: [{workItemId: 1111,workId: 11111 ,workContent:'xxx',sort: 1,workNorm:'xxx',No: 1,isDone: 0}] const handleData = classifyWorkContentList.map((item) => { return { workContent: item, workNormList: sourceData.filter( (item2) => item2.workContent === item ), }; }); return handleData; },删除数据
deleteFuc(No, data) { const filterData = this.originalData.filter((item) => { return item.No !== No; }); const sortData = filterData.map((item, index) => { return { ...item, No: index + 1, //一开始就遍历加上序号 }; }); this.originalData = sortData; // 赋值给展示数据 this.showData = this.handleData(sortData); }, // 删除 del(No, data) { // console.log("No", No, "DATA", data); if (data.workItemId) { delDetailList(data.workItemId).then((res) => { if (res.code == 200) { this.$message({ message: "删除成功", type: "success", }); this.deleteFuc(No, data); } }); } else { this.deleteFuc(No, data); } },导入文件
// 导入文件 handleUploadSuccess(res, file) { // console.log("res", res, "file", file); if (res.code == 200) { const tableData = []; let mArr = JSON.parse(JSON.stringify(tableData)); // 页面操作 concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。 mArr = mArr.concat(res.data.workItemVos); mArr = mArr.map((item, index) => { return { ...item, sort: item.sort + 1, //一开始就遍历加上序号 markTime: new Date().getTime(), }; }); // console.log("mArr", mArr); this.getContentList(mArr); // this.workList = []; this.workList = this.workList.concat(res.data.workLabelVos); console.log("this.workList", this.workList); } },16.树形下拉框
子组件
父组件
17.时间的回显
this.$set(this.form, "date", [ dayjs(data.startTime).format("YYYY-MM-DD"), dayjs(data.endTime).format("YYYY-MM-DD"), ]);18.富文本去除标签 富文本组件事Editor
// 提交数据时去除 标签 const processedRequirement = that.form.requirement?.replace( /<\/?p>/g, "" );
19.props接收兼容性写法
props: { value: { // 如果希望value可以接收int类型的值而不报错，可以将type类型修改为可以兼容字符串和整数的类型 type: [String, Number], default: "", }, disabled: { type: Boolean, default: false, }, replaceFields: { type: Object, default: () => { return { children: "children", title: "label", key: "id", value: "id", }; }, }, },20.文本的总体代码
选取文件 请上传 大小不超过 {{ fileSize }}MB 格式为 {{ fileType.join("/") }} 的文件{{ getFileName(file.name) }} 删除 父组件