import { uuid10 } from '@/utils' import { getMonthlyReport, updateMonthlyReport, delMonthlyReport, getAllSubReportCatalog, getSubReport, // getReportDependence, getDeptArch, sendConfirm, returnReport, sendSubConfirm, publishReport, getSubReportInfo, updateSubReport, pullDataAgain } from '@/api/qualityMonthlyReport/edit' import { getAvaliableInfo } from '@/api/qualityMonthlyReport' import { reportDataBack, setReportData, setTabActive, setDeptArch, setIndexTitle, arrToObj, objToArr, setTableHeader } from './utils' import { message } from '@/utils/mesDebounce' import _ from 'lodash' export default { /* 月报编辑 */ namespaced: true, state: { pageDate: null, // 页面的完整数据 tabsList: [ '上月问题跟进', '本月重点问题', '服务端详情', '客户端详情', '硬件详情', '本月优秀&持续改进' ], tabsActive: '', // 最上层tabs焦点 tabPageData: null, // 单个标签页数据 reportData: [], // 所有标签页数据 editKeys: [], // 存放需要编辑的区域的 domKey(唯一) subTabsActive: [], // 当前页签中所有已切换的数据 domKeys: [], // 记录所有元素区域的唯一标识 selectEnum: [], // 部门数据 userNames: [], // 人员数据 subTitle: '新建月报', subReportName: '', subReportInfo: null, // 为回退时,当前页面为查看完整时,无法获取子月报数据情况设置 offsetList: [], /** * 用户身份权限编号 * 100 月报发起人 * 50 确认人 * 30 用户 * 0 管理员 */ roleCode: 50, // 默认为用户 reportList: [], // 默认为用户 pageType: 'edit', // edit:(月报编辑和新建); readAll:(查看月报详情) loading: false, clientTypeList: [], // 单业务线编辑时,数据迁移 saveAsTargetList: [] // saveAsData: { // tableRow: '', // targetSubReportId: '' // } }, mutations: { // 页面基础数据赋值 INIT_PAGE_DATA(state, params) { const { pageType } = state if (pageType === 'read' || pageType === 'edit') return if (pageType === 'readAll') { // 设置tabs数据 state.tabsList = state.tabsList.map((elm) => ({ label: elm, name: `tab_${elm}` })) state.tabsActive = 'tab_上月问题跟进' return } state.pageDate = { ...params } delete state.pageDate.subReports // state.subTitle = state.pageDate.reportName const subReports = [...params.subReports] // 设置部门数据 // state.selectEnum = [...params.dependence.deptArch.children] // setDeptArch(state.selectEnum) // 设置端数据 if (params.dependence.clientType) { state.clientTypeList = [...params.dependence.clientType] } setDeptArch(state.clientTypeList) if (subReports.length) { state.tabsList = [] subReports.forEach((elm, index) => { // 设置tabs数据 state.tabsList.push({ label: elm.reportName, reportName: elm.reportName, id: elm.id, name: `tab_${elm.id}` }) }) state.subReportInfo = _.cloneDeep(state.tabsList) // 设置tabs数据 state.tabsActive = state.tabsList[0].name // table页签 state.reportData = [...subReports] } }, // 设置页面的是否为编辑页面 SET_PAGE_TYPE(state, key) { state.pageType = key }, // 单个tab页面数据初始化设置 INIT_TAB_PAGE_DATA(state, tabsActive = '') { const { pageType } = state const setKey = (arr, depth) => { if (arr && arr.length) { arr.forEach((elm) => { elm.domKey = uuid10() elm.depth = depth if (arr.children && arr.children.length) { setKey(arr.children, depth + 1) } if (arr.content && arr.content.length) { setKey(arr.content, depth + 1) } }) } } if (pageType === 'readAll') { state.tabsActive = tabsActive || state.tabsActive return } state.reportData.forEach((elm) => { setKey(elm.reportCatalog.children, 0) }) // 从其他页面跳转过来 const [tabPageData] = state.reportData.filter((elm) => { return ( `${elm.id}` === setTabActive('tab_', tabsActive || state.tabsActive) ) }) if (tabsActive) { state.tabsActive = `tab_${tabsActive}` } // state.tabPageData = setReportData(tabPageData) const { newObj, domKeys } = setReportData( tabPageData ? tabPageData.reportCatalog : state.reportData[0].reportCatalog ) state.tabPageData = newObj state.domKeys = domKeys }, // 切换页面之后数据维护 TAB_ACTIVE_CHANGE(state, tabsActive) { // 获取原来页签的选中对象的id const newTabsActive = setTabActive('tab_', tabsActive) // tabPageData => 后台源数据结构 const oldTabPageData = reportDataBack({ ...state.tabPageData }) // console.log(oldTabPageData) let newTabPageData = {} const reportData = state.reportData.map((elm) => { // 找出新页面的数据 && newTabsActive !== oldTabPageData.id if (newTabsActive === `${elm.id}`) { newTabPageData = { ...elm } } // 将上一个被选中的页签数据赋值给源数据(reportData) if (`${elm.reportName}` === `${oldTabPageData.title}`) { return { ...elm, reportCatalog: { ...oldTabPageData } } } return elm }) state.reportData = [...reportData] // console.log(state.reportData) // 对新数据进行转换 const { newObj, domKeys } = setReportData( newTabPageData.reportCatalog, 108 ) state.tabsActive = `tab_${newTabsActive}` state.tabPageData = newObj state.domKeys = domKeys // 页面恢复待编辑状态 state.editKeys = [] // 子页面页签切换,清空原来的tabs选中状态 state.subTabsActive = [] }, // 添加行 ADD_EDIT_KEYS(state, key) { state.editKeys.push(key) // const index = state.editKeys.indexOf(key) // if (index < 0) { // state.editKeys.push(key) // } }, INIT_EDIT_KEYS(state) { state.editKeys = [] }, // 获取子页面所有距离顶部的集合基础信息 GET_ALL_OFFSETTOP(state) { const getOffsetTop = (id) => { const dom = document.getElementById(id) if (!dom) return 0.9527 return dom.getBoundingClientRect().top } const list = [] state.domKeys.forEach((elm) => { const top = getOffsetTop(elm) if (top > 0 && top !== 0.9527) { list.push({ domKey: elm, top: getOffsetTop(elm) }) } }) state.offsetList = [...list] }, // 子页签数据切换 SUB_TABS_ACTIVE(state, { key, oldKey }) { const index = state.subTabsActive.indexOf(oldKey) if (index < 0) { state.subTabsActive.push(key) } else { state.subTabsActive.splice(index, 1, key) } }, // 删除行 /** * @param params.domKey String 当前表格唯一标识 * @param params.btnItem Object 点击按钮的基础数据 * @param params.scope Object 当前行的数据 * @constructor */ DELETE_TABLE_LINE(state, params) { // const { btnItem, scope } = params // // const deepDeleteArray = (arr, key) =>{ // arr.forEach(elm=>{ // if(elm.content && elm.content.length){ // elm.content.forEach(item ) // } // }) // } // // state.tabPageData.children.forEach((elm) => { // elm.content.forEach((item) => { // item.domKey = uuid10(4) // if (item.type === 'table') { // setTableHeader(item.tableHeaders) // item.tableRows = arrToObj(item.tableRows, item.tableHeaders) // } // }) // }) }, // 切换tabs之后,重新生成左侧树 CREATE_TREE_DATA(state) {}, // 菜单添加子项setInit ADD_MENU_CHILDREN(state, params) {}, // 删除某一条数据 DELETE_ITEM(state, domKey) { const tabPageData = [...state.tabPageData.children] const delDom = (arr, key) => { if (arr && _.isArray(arr) && arr.length) { for (let i = 0; i < arr.length; i++) { if (arr[i].domKey === key) { arr.splice(i, 1) return } if (arr[i].content && arr[i].content.length) { delDom(arr[i].content, key) } if (arr[i].children && arr[i].children.length) { delDom(arr[i].children, key) } } } } delDom(tabPageData, domKey) state.tabPageData.children = [...tabPageData] }, /** * 添加同级或者子集 * @param state Object 数据源 * @param domKey String 当前点击元素的唯一标识 * @param params Object 要添加的内容 * @param isSub Boolean 要添加的内容(true:添加子项|false:添加同级) * @constructor */ ADD_ITEM(state, { domKey, params, isSub = false }) { if (domKey && params) { const tabPageData = [...state.tabPageData.children] const addItem = (arr, key) => { if (arr && _.isArray(arr) && arr.length) { for (let i = 0; i < arr.length; i++) { if (arr[i].domKey === key) { // 添加子项 if (isSub) { // params.domIndexKey = arr[i].children arr[i].children = [...arr[i].children, { ...params }] } // 添加同级 if (!isSub) { // params.domIndexKey = i + 1 arr.splice(i + 1, 0, params) } return } if (arr[i].content && arr[i].content.length) { addItem(arr[i].content, key) } if (arr[i].children && arr[i].children.length) { addItem(arr[i].children, key) } } } } addItem(tabPageData, domKey) state.tabPageData.children = [...tabPageData] } }, // 数据初始化 INIT_STATE_DATA(state) { state.pageDate = null // 页面的完整数据 state.tabsList = [ '上月问题跟进', '本月重点问题', '服务端详情', '客户端详情', '硬件详情', '本月优秀&持续改进' ] state.tabsActive = '' // 最上层tabs焦点 state.tabPageData = null // 单个标签页数据 state.reportData = [] // 所有标签页数据 state.editKeys = [] // 存放需要编辑的区域的 domKey(唯一) state.subTabsActive = [] // 当前页签中所有已切换的数据 state.domKeys = [] // 记录所有元素区域的唯一标识 state.selectEnum = [] // 部门数据 state.userNames = [] // 人员数据 state.subTitle = '新建月报' state.subReportName = '' state.subReportInfo = null // 为回退时,当前页面为查看完整时,无法获取子月报数据情况设置 state.offsetList = [] /** * 用户身份权限编号 * 100 月报发起人 * 50 确认人 * 30 用户 * 0 管理员 */ state.roleCode = 50 // 默认为用户 state.reportList = [] // 默认为用户 state.pageType = 'edit' // edit:(月报编辑和新建); readAll:(查看月报详情) state.loading = false state.clientTypeList = [] // 单业务线编辑时,数据迁移 state.saveAsTargetList = [] }, // tabPageData SET_TAB_PAGE_DATA(state, { data, id, tabsActive }) { // 对新数据进行转换 const { newObj, domKeys } = setReportData( { children: _.cloneDeep(data) }, 108 ) // state.tabPageData = { // children: _.cloneDeep(data) // } // console.log(365, state.tabPageData) state.tabPageData = newObj state.domKeys = domKeys // 页面恢复待编辑状态 state.editKeys = [] // 子页面页签切换,清空原来的tabs选中状态 state.subTabsActive = [] state.tabsActive = '' + tabsActive }, // 设置人员数据,避免重复请求 userNames SET_USER_NAME(state, { key, value }) { if (!state.userNames.hasOwnProperty(key) && !state.userNames[key]) { state.userNames[key] = value } }, // 获取部门数据 SET_SELECT_ENUM(state, params) { console.log(params) state.selectEnum = params console.log(state.selectEnum) // setDeptArch(state.selectEnum) }, // 标记为本月重点问题 MARK_ISSUES(state, { cascaderValue, normalAreaName, multiplePeople }) { let isAdd = true const run = (arr) => { arr.forEach((elm) => { if ( isAdd && elm.title === '本月重点问题' && elm.content && elm.content.length ) { elm.content.forEach((item) => { if (item.type === 'Table') { const row = { analyticFeedback: null } item.tableHeaders.forEach((subItem) => { if (subItem.name === '归属团队') { row[subItem.headerKey] = cascaderValue } if (subItem.name === '问题') { row[subItem.headerKey] = normalAreaName } if (subItem.name === '责任人') { row[subItem.headerKey] = multiplePeople } }) if (!item.tableRows) { item.tableRows = [] } item.tableRows.push(row) isAdd = false } }) } if (isAdd && elm.children && elm.children.length) { run(elm.children) } }) } run(state.tabPageData.children) }, // 设置右侧树的提示内容 SET_HEADER_TITLE(state, { domKey, headerTitle }) { let isAdd = true const run = (arr) => { arr.forEach((elm) => { if (isAdd && elm.domKey === domKey) { elm.headerTitle = headerTitle isAdd = false } if (isAdd && elm.content && elm.content.length) { run(elm.content) } if (isAdd && elm.children && elm.children.length) { run(elm.children) } }) } run(state.tabPageData.children) }, // 获取用户月报操作区域权限 GET_USER_PERMISSION(state, { roleCode, reportList }) { state.roleCode = roleCode state.reportList = reportList }, // 设置月报子标题 // 设置月报子标题 parentId: 163 // 设置月报标题 // (state, name) { // state.subTitle = name // }, SET_SUB_TITLE(state, { id, name }) { // commit('SET_SUB_TITLE', { // parentId: res.data.parentId, // name: res.data.reportName // }) state.reportList && state.reportList.forEach((elm) => { if (`${elm.id}` === `${id}`) { if (!name) { state.pageDate = { status: elm.status } } // console.log(elm.reportName) // 如果是 if (elm.status === 10) { state.subTitle = `确认月报|${elm.reportName}` } else if (elm.status === 20) { state.subTitle = `发布月报|${elm.reportName}` } else if (elm.status === 30) { state.subTitle = `查看|${elm.reportName}` } else { state.subTitle = `${elm.statueStr}|${elm.reportName}` } } }) // 如果是单业务线查看 if (name) { state.subReportName = `${name}` state.subTitle += `|${name}` } }, // 设置页面基础数据 SET_PAGE_DATA(state, params) { state.pageDate = _.cloneDeep(params) delete state.pageDate.reportCatalog delete state.pageDate.reportContent }, // 设置子月报数据 SET_REPORT_INFO(state, params) { state.subReportInfo = params }, // 设置页面状态 SET_LOADING(state, isShow) { state.loading = isShow }, // 设置 页面区域 下标 SET_INDEX_TITLE(state) { state.tabPageData = setIndexTitle(state.tabPageData) }, // 设置拉取之后的页面数据 tabPageData // 设置`端数据` SET_CLIENT_TYPE_LIST(state, list) { state.clientTypeList = list setDeptArch(state.clientTypeList) }, /** * 数据另存为 * */ SAVE_AS(state, { tableHeaders, tableRows, subReportid, key = 'only' }) { // setTableHeader(data.tableHeaders) const rowData = objToArr( [tableRows], tableHeaders ) const find = (arr) => { arr.forEach(elm => { if (elm.title === '线上问题') { // console.log(532, elm, rowData) // console.log(elm.content[0].tableRows, rowData) elm.content[0].tableRows.push(rowData[0]) } if (elm.children && elm.children.length) { find(elm.children) } }) } // 多业务线转移 if (state.pageType === 'editAll') { for (let i = state.reportData.length - 1; i >= 0; i--) { const elm = state.reportData[i] if (elm.id === subReportid) { find(elm.reportCatalog.children) } } } else { // 单业务线转移 // 判断数据是否存在,不存在,就插入 if (state.saveAsTargetList.filter(elm => elm.targetSubReportId === subReportid).length) { state.saveAsTargetList.forEach(elm => { if (elm.targetSubReportId === subReportid) { if (!elm.tableRow) { elm.tableRow = [] } elm.tableRow.push(rowData[0]) } }) } else { state.saveAsTargetList.push({ targetSubReportId: subReportid, tableRow: [rowData[0]] }) } } } }, actions: { // 月报数据获取 async initPageData( { commit, state, dispatch }, { id, subReportId, subActive } ) { dispatch('setSubReportInfo', id) const { pageType } = state if ( pageType === 'readAll' || pageType === 'read' || pageType === 'edit' ) { commit('INIT_PAGE_DATA') dispatch('getSubReportData', { id, subReportId, tabsActive: `tab_${subActive || '上月问题跟进'}` }) } else { const res = await getMonthlyReport(id) // 设置月报子标题 commit('SET_SUB_TITLE', { id: id }) if (res.code === 200 && res.data) { commit('INIT_PAGE_DATA', { ...res.data }) commit('INIT_TAB_PAGE_DATA', subActive && `tab_${subActive}`) } } }, // 页面切换 TAB_ACTIVE_CHANGE tabActiveChange({ commit, state, dispatch }, { id, tabsActive }) { const { pageType } = state if (pageType === 'editAll') { return commit('TAB_ACTIVE_CHANGE', tabsActive) } if (pageType === 'readAll') { dispatch('getSubReportData', { id, tabsActive }) } }, // 获取查看月报数据 async getSubReportData({ commit, state }, { id, subReportId, tabsActive }) { const { pageType } = state let params = {} const method = pageType === 'readAll' ? getAllSubReportCatalog : getSubReport if (pageType === 'read' || pageType === 'edit') { params = { subReportId } } if (pageType === 'readAll') { // state.pageDate = { // status: 10 // } params = { reportId: id, catalogTitle: setTabActive('tab_', tabsActive) } } const res = await method(params) if (res.code === 200) { // 单个月报与完整月报数据梳理 if (pageType === 'read' || pageType === 'edit') { commit('SET_CLIENT_TYPE_LIST', res.data.dependence.clientType) // commit('SET_SELECT_ENUM', res.data.dependence.deptArch.children) commit('SET_PAGE_DATA', res.data) } console.log(res) if (pageType === 'readAll' && params.catalogTitle.search(/服务端详情|客户端详情/) > -1) { res.data.splice(0, 0, { depth: 1, fromUser: false, hiddenAncestor: null, isVisible: true, subTitles: null, title: '整体概览', type: 'Head1', content: [{ type: 'overallOverviewo' }] }) console.log(params) } commit('SET_TAB_PAGE_DATA', { data: pageType === 'readAll' ? res.data : res.data.reportCatalog.children, id, tabsActive }) // 设置月报子标题 setTimeout(() => { commit('SET_SUB_TITLE', { id: pageType.search(/All/) > -1 ? `${id}` : `${res.data.parentId}`, name: pageType.search(/All/) > -1 ? '' : res.data.reportName }) }, 700) } }, // 子月报更新 async upDateSubReport({ state }, callback) { const params = _.cloneDeep(state.pageDate) params.reportCatalog = { children: _.cloneDeep(state.tabPageData.children), content: [], depth: 0, fromUser: false, hiddenAncestor: null, isVisible: true, subTitles: null, title: params.reportName, type: 'Tag' } params.reportCatalog = reportDataBack(params.reportCatalog) if (state.saveAsTargetList.length) { params.saveAsTargetList = _.cloneDeep(state.saveAsTargetList) } params.dependence = null const res = await updateSubReport(params) if (res.code === 200) { callback() } }, // 月报更新 async upDateReport({ dispatch, state }, callback) { const params = _.cloneDeep(state.pageDate) const tabPageData = _.cloneDeep(state.tabPageData) const tabsActive = setTabActive('tab_', state.tabsActive) params.subReports = state.reportData.map((elm) => { // 将上一个被选中的页签数据赋值给源数据(reportData) if (`${elm.id}` === tabsActive) { return { ...elm, dependence: null, reportCatalog: { ...reportDataBack({ ...tabPageData }) } } } return elm }) // 转换数据结构 const res = await updateMonthlyReport(params) if (res.code === 200) { callback() } }, // 获取部门数据 async setSelectEnum({ commit }, reportId) { const depth = JSON.parse(window.localStorage.getItem('depth')) console.log(depth) if (!depth) { const res = await getDeptArch({ reportId }) if (res.code === 200) { window.localStorage.setItem('depth', JSON.stringify(res.data.children)) commit('SET_SELECT_ENUM', res.data.children) } } else { commit('SET_SELECT_ENUM', depth) } }, // 删除月报 async deleteReport( { commit, state, context }, { key, callback, isMsg = true } ) { const res = await delMonthlyReport(state.pageDate.id) if (res.code === 200) { if (isMsg) { message.success('删除成功!') } callback && callback() } }, // 月报发送确认 async sendReport({ commit, state, context }, { id, callback }) { const params = _.cloneDeep(state.pageDate) const tabPageData = _.cloneDeep(state.tabPageData) const tabsActive = setTabActive('tab_', state.tabsActive) params.subReports = state.reportData.map((elm) => { // 将上一个被选中的页签数据赋值给源数据(reportData) if (`${elm.id}` === tabsActive) { return { ...elm, dependence: null, reportCatalog: { ...reportDataBack({ ...tabPageData }) } } } return elm }) const res = await sendConfirm({ ...params, id }) if (res.code === 200) { message.success('发送成功!') callback() } }, // 月报发布 async publishAllReport({ commit, state, context }, { id, callback }) { const res = await publishReport({ id }) if (res.code === 200) { message.success('发布成功!') callback() } }, // 月报确认 async confirmReport({ state }, { id, callback }) { const res = await sendSubConfirm({ subReportId: id }) if (res.code === 200) { callback() } }, // 月报回退 async returnReport({ commit, state, context }, { data, callback }) { const res = await returnReport(data) if (res.code === 200) { callback() } }, // 获取用户月报操作区域权限 async getUserPermission({ commit }) { const res = await getAvaliableInfo() if (res.code === 200) { commit('GET_USER_PERMISSION', res.data) } }, // 获取子月报列表数据 async setSubReportInfo({ commit }, id) { const res = await getSubReportInfo(id) if (res.code === 200) { commit('SET_REPORT_INFO', res.data) } }, // 重新拉取数据 async refreshReport( { commit, state }, { domKey, title, subReportId, callback } ) { const tabPageData = _.cloneDeep(state.tabPageData) // console.log('refreshReport', domKey, title) const [tabKey, subTabKey] = state.subTabsActive const tabDataObj = { tabKey: '', subTabKey: '' } const setValue = (item, key, value) => { if (item.domKey === value) { tabDataObj[key] = item } } const find = (arr) => { arr && arr.length && arr.forEach((elm) => { setValue(elm, 'tabKey', tabKey) setValue(elm, 'subTabKey', subTabKey) if (elm.content && elm.content.length) { elm.content.forEach((item) => { setValue(elm, 'tabKey', tabKey) setValue(elm, 'subTabKey', subTabKey) }) } if (elm.children && elm.children.length) { find(elm.children) } }) } const params = { subReportId: '', catalogTitle: title, isServer: false, clientType: '' } if (title !== '上月问题跟进') { find(tabPageData.children) if (tabDataObj.tabKey.title === '服务端') { params.isServer = true } if (!params.isServer) { params.clientType = tabDataObj.subTabKey.title } } if (state.pageType.search(/All/) > -1) { // console.log(state, setTabActive('tab_', state.tabsActive)) params.subReportId = setTabActive('tab_', state.tabsActive) } if (state.pageType === 'edit') { params.subReportId = subReportId } // console.log(params) /** * 线上问题、 */ const res = await pullDataAgain(params) if (title !== '上月问题跟进' && title !== '线下缺陷' && title !== '线上问题') { if (res.data.type.search(/Table|TableAndRichText/) > -1) { setTableHeader(res.data.tableHeaders) res.data.tableRows = arrToObj( res.data.tableRows, res.data.tableHeaders ) } } if (title.search(/上月问题跟进|发布&回滚|线上问题/) > -1) { setTableHeader(res.data.content[0].tableHeaders) res.data.content[0].tableRows = arrToObj( res.data.content[0].tableRows, res.data.content[0].tableHeaders ) } const setDomData = (arr) => { arr && arr.length && arr.forEach((elm) => { if (elm.domKey === domKey) { // console.log(elm, res.data) if (title.search(/上月问题跟进|发布&回滚|线上问题|线上问题/) > -1) { elm.content = [{ ...res.data.content[0] }] } else if (title.search(/线下缺陷/) > -1) { elm.content = [{ ...res.data.content[0] }] elm.subTitles = [...res.data.subTitles] } else { elm.content = [{ ...res.data }] } } if (elm.content && elm.content.length) { elm.content.forEach((item) => { if (title.search(/上月问题跟进|发布&回滚|线上问题/) > -1) { item.content = [{ ...res.data.content[0] }] } else { item.content = [{ ...res.data }] } }) } if (elm.children && elm.children.length) { setDomData(elm.children) } }) } setDomData(tabPageData.children) state.tabPageData = tabPageData // console.log(res.data, tabPageData) if (res.code === 200) { callback && callback() } // setTimeout(() => { // callback && callback() // }, 5000) } } }