From e5899fae150d2e4f7da276af5509b6d399296e86 Mon Sep 17 00:00:00 2001 From: "qianhao.xu" Date: Thu, 27 Jun 2024 11:47:07 +0800 Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E6=96=99=E4=BB=BB=E5=8A=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../materialManagement/MmIngredientTask.vue | 386 ++++++++++++------ 1 file changed, 267 insertions(+), 119 deletions(-) diff --git a/src/views/materialManagement/MmIngredientTask.vue b/src/views/materialManagement/MmIngredientTask.vue index f9477ea..dc4d23e 100644 --- a/src/views/materialManagement/MmIngredientTask.vue +++ b/src/views/materialManagement/MmIngredientTask.vue @@ -40,14 +40,28 @@ - 搜索 - 重置 + 搜索 + 重置 - 新增 @@ -75,7 +89,10 @@ >删除 - + @@ -85,25 +102,61 @@ ref="table" border highlight-current-row + :span-method="objectSpanMethod" @sort-change="sortChange" @selection-change="handleSelectionChange" > - - - - - - - - + + + + + + - - + + - + - + - + {{ form.id }} @@ -138,13 +203,19 @@ - + - + @@ -174,20 +245,31 @@ - {{ item.dictLabel }} + {{ item.dictLabel }} - + - + @@ -206,45 +288,45 @@ import { delMmIngredientTask, updateMmIngredientTask, getMmIngredientTask, -} from '@/api/materialManagement/mmIngredientTask.js' +} from "@/api/materialManagement/mmIngredientTask.js"; export default { - name: 'mmingredienttask', + name: "mmingredienttask", data() { return { pickerOptions: { shortcuts: [ { - text: '最近一周', + text: "最近一周", onClick(picker) { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) - picker.$emit('pick', [start, end]) + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); + picker.$emit("pick", [start, end]); }, }, { - text: '最近一个月', + text: "最近一个月", onClick(picker) { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) - picker.$emit('pick', [start, end]) + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); + picker.$emit("pick", [start, end]); }, }, { - text: '最近三个月', + text: "最近三个月", onClick(picker) { - const end = new Date() - const start = new Date() - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) - picker.$emit('pick', [start, end]) + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); + picker.$emit("pick", [start, end]); }, }, ], }, - labelWidth: '100px', - formLabelWidth: '100px', + labelWidth: "100px", + formLabelWidth: "100px", // 选中id数组 ids: [], // 非单个禁用 @@ -258,39 +340,54 @@ export default { // 查询参数 queryParams: { workorder: null, - timeperiod: [new Date().setHours(0, 0, 0, 0), new Date().setHours(23, 59, 59, 0)], + timeperiod: [ + new Date().setHours(0, 0, 0, 0), + new Date().setHours(23, 59, 59, 0), + ], pageNum: 1, pageSize: 10, sort: undefined, sortType: undefined, }, // 弹出层标题 - title: '', + title: "", // 操作类型 1、add 2、edit opertype: 0, // 是否显示弹出层 open: false, // 表单参数 - form: { - - }, + form: {}, columns: [ - { index: 0, key: 'id', label: `id`, checked: true }, - { index: 1, key: 'agvPosition', label: `起点站点`, checked: true }, - { index: 2, key: 'agvPositionEnd', label: `终点站点`, checked: true }, - { index: 3, key: 'taskId', label: `配料任务id`, checked: true }, - { index: 4, key: 'workorder', label: `工单id`, checked: true }, - { index: 5, key: 'blanknumber', label: `毛坯号`, checked: true }, - { index: 6, key: 'isfinal', label: `是否完成（0是未完成，1是完成）`, checked: true }, - { index: 7, key: 'previousNumber', label: `需要上件数`, checked: true }, - { index: 8, key: 'previousNumbered', label: `已经上件数`, checked: true }, - { index: 9, key: 'createdBy', label: `创建人`, checked: false }, - { index: 10, key: 'createdTime', label: `创建时间`, checked: false }, - { index: 11, key: 'updatedBy', label: `更新人`, checked: false }, - { index: 12, key: 'updatedTime', label: `更新时间`, checked: false }, + { index: 0, key: "id", label: `id`, checked: true }, + { index: 1, key: "agvPosition", label: `起点站点`, checked: true }, + { index: 2, key: "agvPositionEnd", label: `终点站点`, checked: true }, + { index: 3, key: "taskId", label: `配料任务id`, checked: true }, + { index: 4, key: "workorder", label: `工单id`, checked: true }, + { index: 5, key: "blanknumber", label: `毛坯号`, checked: true }, + { + index: 6, + key: "isfinal", + label: `是否完成（0是未完成，1是完成）`, + checked: true, + }, + { index: 7, key: "previousNumber", label: `需要上件数`, checked: true }, + { + index: 8, + key: "previousNumbered", + label: `已经上件数`, + checked: true, + }, + { index: 9, key: "createdBy", label: `创建人`, checked: false }, + { index: 10, key: "createdTime", label: `创建时间`, checked: false }, + { index: 11, key: "updatedBy", label: `更新人`, checked: false }, + { index: 12, key: "updatedTime", label: `更新时间`, checked: false }, ], // 是否完成（0是未完成，1是完成）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'} - isfinalOptions: [], + isfinalOptions: [ + { label: "未知", value: null, cssClass: "color:'#909399'" }, + { label: "进行中", value: 0, cssClass: "color:'red'" }, + { label: "完成", value:1, cssClass: "color:'#67C23A'" }, + ], // 数据列表 dataList: [], // 总记录数 @@ -299,37 +396,43 @@ export default { btnSubmitVisible: true, // 表单校验 rules: { - taskId: [{ required: true, message: '配料任务id不能为空', trigger: 'blur' }], + taskId: [ + { required: true, message: "配料任务id不能为空", trigger: "blur" }, + ], }, - } + spanArr: [], // 需要合并的行数 + + pos: 0, // 索引 + }; }, created() { // 列表数据查询 - this.getList() + this.getList(); - var dictParams = [] + var dictParams = []; }, methods: { // 查询数据 getList() { - this.loading = true - let query={...this.queryParams}; + this.loading = true; + let query = { ...this.queryParams }; - query.starttime=new Date(query.timeperiod[0]); - query.endtime= new Date(query.timeperiod[1]); + query.starttime = new Date(query.timeperiod[0]); + query.endtime = new Date(query.timeperiod[1]); delete query.timeperiod; listMmIngredientTask(query).then((res) => { if (res.code == 200) { - this.dataList = res.data.result - this.total = res.data.totalNum - this.loading = false + this.dataList = res.data.result; + this.getSpanArr(this.dataList); + this.total = res.data.totalNum; + this.loading = false; } - }) + }); }, // 取消按钮 cancel() { - this.open = false - this.reset() + this.open = false; + this.reset(); }, // 重置数据表单 reset() { @@ -347,110 +450,155 @@ export default { createdTime: undefined, updatedBy: undefined, updatedTime: undefined, - } - this.resetForm('form') + }; + this.resetForm("form"); }, // 重置查询操作 resetQuery() { - this.timeRange = [] - this.resetForm('queryForm') - this.handleQuery() + this.timeRange = []; + this.resetForm("queryForm"); + this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { - this.ids = selection.map((item) => item.id) - this.single = selection.length != 1 - this.multiple = !selection.length + this.ids = selection.map((item) => item.id); + this.single = selection.length != 1; + this.multiple = !selection.length; }, // 自定义排序 sortChange(column) { if (column.prop == null || column.order == null) { - this.queryParams.sort = undefined - this.queryParams.sortType = undefined + this.queryParams.sort = undefined; + this.queryParams.sortType = undefined; } else { - this.queryParams.sort = column.prop - this.queryParams.sortType = column.order + this.queryParams.sort = column.prop; + this.queryParams.sortType = column.order; } - this.handleQuery() + this.handleQuery(); }, /** 搜索按钮操作 */ handleQuery() { - this.queryParams.pageNum = 1 - this.getList() + this.queryParams.pageNum = 1; + this.getList(); }, /** 新增按钮操作 */ handleAdd() { - this.reset() - this.open = true - this.title = '添加' - this.opertype = 1 + this.reset(); + this.open = true; + this.title = "添加"; + this.opertype = 1; }, /** 删除按钮操作 */ handleDelete(row) { - const Ids = row.id || this.ids + const Ids = row.id || this.ids; this.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？') .then(function () { - return delMmIngredientTask(Ids) + return delMmIngredientTask(Ids); }) .then(() => { - this.handleQuery() - this.msgSuccess('删除成功') + this.handleQuery(); + this.msgSuccess("删除成功"); }) - .catch(() => {}) + .catch(() => {}); }, /** 修改按钮操作 */ handleUpdate(row) { - this.reset() - const id = row.id || this.ids + this.reset(); + const id = row.id || this.ids; getMmIngredientTask(id).then((res) => { - const { code, data } = res + const { code, data } = res; if (code == 200) { - this.open = true - this.title = '修改数据' - this.opertype = 2 + this.open = true; + this.title = "修改数据"; + this.opertype = 2; this.form = { ...data, - } + }; } - }) + }); }, // 是否完成（0是未完成，1是完成）字典翻译 isfinalFormat(row, column) { - return this.selectDictLabel(this.isfinalOptions, row.isfinal) + return this.selectDictLabel(this.isfinalOptions, row.isfinal); }, /** 提交按钮 */ submitForm: function () { - this.$refs['form'].validate((valid) => { + this.$refs["form"].validate((valid) => { if (valid) { - console.log(JSON.stringify(this.form)) + console.log(JSON.stringify(this.form)); if (this.form.id != undefined && this.opertype === 2) { updateMmIngredientTask(this.form) .then((res) => { - this.msgSuccess('修改成功') - this.open = false - this.getList() + this.msgSuccess("修改成功"); + this.open = false; + this.getList(); }) .catch((err) => { //TODO 错误逻辑 - }) + }); } else { addMmIngredientTask(this.form) .then((res) => { - this.msgSuccess('新增成功') - this.open = false - this.getList() + this.msgSuccess("新增成功"); + this.open = false; + this.getList(); }) .catch((err) => { //TODO 错误逻辑 - }) + }); } } - }) + }); + }, + // 合并单元格 + // 列表数据处理函数 + getSpanArr(data) { + //页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱 + this.spanArr = []; + this.pos = 0; + //遍历数据 + data.forEach((item, index) => { + //判断是否是第一项 + if (index === 0) { + this.spanArr.push(1); + this.pos = 0; + } else { + //不是第一项时，就根据标识去存储 + if (data[index].taskId === data[index - 1].taskId) { + // 查找到符合条件的数据时每次要把之前存储的数据+1 + this.spanArr[this.pos] += 1; + this.spanArr.push(0); + } else { + // 没有符合的数据时，要记住当前的index + this.spanArr.push(1); + this.pos = index; + } + } + }); + console.log(this.spanArr, this.pos); + }, + + // 指定合并的单元格函数 + objectSpanMethod({ row, column, rowIndex, columnIndex }) { + // 页面列表上 表格合并行 -> 第几列(从0开始) + // 需要合并多个单元格时 依次增加判断条件即可 + if (columnIndex === 0 || columnIndex === 1) { + // 二维数组存储的数据 取出 + const _row = this.spanArr[rowIndex]; + const _col = _row > 0 ? 1 : 0; + return { + rowspan: _row, + colspan: _col, + }; + //不可以return {rowspan：0， colspan: 0} 会造成数据不渲染， 也可以不写else，eslint过不了的话就返回false + } else { + return false; + } }, }, -} +};