|
|
@@ -0,0 +1,513 @@
|
|
|
+<template>
|
|
|
+ <div v-loading="paging.loading" class="table-wrapper">
|
|
|
+ <span @click.stop>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%; margin-top: 10px"
|
|
|
+ highlight-current-row
|
|
|
+ row-key="rowKey"
|
|
|
+ :expand-row-keys="expandRowKeys"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: '#F7F7F7',
|
|
|
+ color: '#4a4a4a',
|
|
|
+ 'font-size': '14px',
|
|
|
+ 'font-weight': '500'
|
|
|
+ }"
|
|
|
+ :cell-style="{ 'font-size': '14px', color: 'rgb(102,102,102)' }"
|
|
|
+ size="small"
|
|
|
+ show-overflow-tooltip="true"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in setColumns(columns)"
|
|
|
+ :key="item.headerKey"
|
|
|
+ :data-index="index"
|
|
|
+ :prop="item.headerKey"
|
|
|
+ :align="item.align"
|
|
|
+ :label="item.name"
|
|
|
+ :type="item.type"
|
|
|
+ :min-width="setMinWidth(item)"
|
|
|
+ :fixed="isFixed(item, index, columns)"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 展开 -->
|
|
|
+ <div v-if="item.type === 'expand'">
|
|
|
+ <!-- <div @click="showItem(item, scope)">item</div>-->
|
|
|
+ <TableExpandRowList
|
|
|
+ v-if="scope.row.analyticFeedbackList"
|
|
|
+ :columns="columns"
|
|
|
+ :row="scope.row"
|
|
|
+ :analytic-feedback-list="scope.row.analyticFeedbackList"
|
|
|
+ />
|
|
|
+ <TableExpandRow
|
|
|
+ v-if="scope.row.analyticFeedback && !scope.row.analyticFeedbackList"
|
|
|
+ :columns="columns"
|
|
|
+ :row="scope.row"
|
|
|
+ :analytic-feedback="scope.row.analyticFeedback"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- 操作列 -->
|
|
|
+ <div v-else-if="item.name === '操作'">
|
|
|
+ <span v-for="(btnItem, btnIndex) in item.defaultValue" :key="btnIndex">
|
|
|
+ <el-button
|
|
|
+ style="margin-right: 10px"
|
|
|
+ type="text"
|
|
|
+ @click.stop="btnFun(btnItem, scope)"
|
|
|
+ >
|
|
|
+ {{ btnItem.value }}
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <!-- 其他操作区域 -->
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ class="edit-wrapper"
|
|
|
+ :style="{ cursor: pageDate && pageDate.status < 20 ? 'pointer' : 'auto' }"
|
|
|
+ >
|
|
|
+ <!-- 编辑区域 -->
|
|
|
+ <div v-if="editKeys.indexOf(domKey) > -1 && item.displayType === 'Texterea'">
|
|
|
+ <!-- 文本域 -->
|
|
|
+ <el-input
|
|
|
+ v-model="scope.row[item.headerKey]"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请输入"
|
|
|
+ :maxlength="item.name.search(/天数/) > -1 ? 10 : ''"
|
|
|
+ :autosize="{ minRows: item.name.search(/天数/) > -1 ? 1 : 2, maxRows: 30 }"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- <div v-else class="edit-cell" @click.stop="editLine(scope.row, index)"> -->
|
|
|
+ <!-- 文本展示 -->
|
|
|
+ <div v-else class="edit-cell" @click.stop="editLine(scope.row, index)">
|
|
|
+ <div v-if="item.displayType === 'Cascader'">
|
|
|
+ <CascaderInfo :team-data="scope.row[item.headerKey]" />
|
|
|
+ </div>
|
|
|
+ <div v-else-if="item.displayType === 'CascaderSingle'">
|
|
|
+ <CascaderSingleInfo :team-data="scope.row[item.headerKey]" />
|
|
|
+ </div>
|
|
|
+ <div v-else-if="item.displayType === 'Select'">
|
|
|
+ <!-- 单个人员选择 -->
|
|
|
+ <div v-if="item.selectType && item.selectType === 'SinglePeople'">
|
|
|
+ <MultiplePeopleInfo :team-data="scope.row[item.headerKey]" />
|
|
|
+ </div>
|
|
|
+ <!-- 多个人员选择 -->
|
|
|
+ <div v-else-if=" item.selectType && item.selectType === 'MultiplePeople'">
|
|
|
+ <MultiplePeopleInfo :team-data="scope.row[item.headerKey]" />
|
|
|
+ </div>
|
|
|
+ <!-- 多个人员选择 -->
|
|
|
+ <div v-else-if="item.selectType && item.selectType === 'people'">
|
|
|
+ <MultiplePeopleInfo :team-data="scope.row[item.headerKey]" />
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ {{ scope.row[item.headerKey] }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-else-if="item.displayType === 'Texterea'"
|
|
|
+ :style="{
|
|
|
+ cursor: item.name.search(/需求名称|问题/) > -1 && scope.row.operationTarget ? 'pointer' : 'auto',
|
|
|
+ color: item.name.search(/需求名称|问题/) > -1 && scope.row.operationTarget ? '#1890ff':'#666'
|
|
|
+ }"
|
|
|
+ @click.stop="item.name.search(/需求名称|问题/) > -1 && pageType.search(/edit/) < 0 && goto(scope.row.operationTarget) || editLine(scope.row, index)"
|
|
|
+ >
|
|
|
+ <TextInfo :text-align="item.name" :text="scope.row[item.headerKey]" />
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <span v-html="scope.row[item.headerKey]" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div v-if="false" class="pagination-wrapper">
|
|
|
+ <el-pagination
|
|
|
+ :current-page.sync="paging.curIndex"
|
|
|
+ :page-size="paging.pageSize"
|
|
|
+ :pager-count="5"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :page-sizes="[10, 15, 20, 30]"
|
|
|
+ :total="paging.pageTotal"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import _ from 'lodash'
|
|
|
+import { uuid10 } from '@/utils'
|
|
|
+import CascaderInfo from '../CascaderInfo'
|
|
|
+import TextInfo from '../TextInfo'
|
|
|
+import MultiplePeopleInfo from '../MultiplePeopleInfo'
|
|
|
+import TableExpandRow from './TableExpandRow'
|
|
|
+import TableExpandRowList from './TableExpandRowList'
|
|
|
+import CascaderSingleInfo from '../CascaderSingleInfo'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'MrTable',
|
|
|
+ components: {
|
|
|
+ CascaderInfo,
|
|
|
+ MultiplePeopleInfo,
|
|
|
+ TableExpandRow,
|
|
|
+ TableExpandRowList,
|
|
|
+ TextInfo,
|
|
|
+ CascaderSingleInfo
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ plusTableDataBottom: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: () => '18px'
|
|
|
+ },
|
|
|
+ domKey: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: () => ''
|
|
|
+ },
|
|
|
+ subTitles: {
|
|
|
+ type: Object,
|
|
|
+ required: false,
|
|
|
+ default: () => null
|
|
|
+ },
|
|
|
+ columns: {
|
|
|
+ type: Array,
|
|
|
+ required: false,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ // 分析反馈时使用的数据
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: () => ''
|
|
|
+ },
|
|
|
+ tableData: {
|
|
|
+ type: Array,
|
|
|
+ required: false,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ baseDataDomKey: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: () => ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ analyticFeedback: '',
|
|
|
+ expandRowKeys: [],
|
|
|
+ feedbackIndex: null,
|
|
|
+ username: localStorage.getItem('username'),
|
|
|
+ paging: {
|
|
|
+ tableData: [],
|
|
|
+ curIndex: 1,
|
|
|
+ pageTotal: 0,
|
|
|
+ pageSize: 10,
|
|
|
+ loading: false,
|
|
|
+ timer: 1200
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ isExpand() {
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ selectEnum() {
|
|
|
+ return this.$store.state.monthlyReportEdit.selectEnum
|
|
|
+ },
|
|
|
+ tabPageData() {
|
|
|
+ return this.$store.state.monthlyReportEdit.tabPageData
|
|
|
+ },
|
|
|
+ pageType() {
|
|
|
+ return this.$store.state.monthlyReportEdit.pageType
|
|
|
+ },
|
|
|
+ tabsActive() {
|
|
|
+ return this.$store.state.monthlyReportEdit.tabsActive
|
|
|
+ },
|
|
|
+ pageDate() {
|
|
|
+ return this.$store.state.monthlyReportEdit.pageDate
|
|
|
+ },
|
|
|
+ roleCode() {
|
|
|
+ return this.$store.state.monthlyReportEdit.roleCode
|
|
|
+ },
|
|
|
+ subReportName() {
|
|
|
+ return this.$store.state.monthlyReportEdit.subReportName
|
|
|
+ },
|
|
|
+ subReportInfo() {
|
|
|
+ return this.$store.state.monthlyReportEdit.subReportInfo
|
|
|
+ },
|
|
|
+ editKeys() {
|
|
|
+ return this.$store.state.monthlyReportEdit.editKeys
|
|
|
+ },
|
|
|
+ isLoading() {
|
|
|
+ return this.$store.state.monthlyReportEdit.isLoading
|
|
|
+ },
|
|
|
+ version() {
|
|
|
+ return this.$store.state.monthlyReportEdit.version
|
|
|
+ },
|
|
|
+ isHistory() {
|
|
|
+ return this.$store.state.monthlyReportEdit.isHistory
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.init()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.paging.curIndex = 1
|
|
|
+ this.paging.pageSize = 10
|
|
|
+ // console.log(this.isLoading, this.domKey)
|
|
|
+ this.paging.loading = this.isLoading.indexOf(this.domKey) > -1
|
|
|
+ this.paging.tableData = [...this.tableData].splice((this.paging.curIndex - 1 || 0) * this.paging.pageSize, this.paging.pageSize)
|
|
|
+ this.paging.pageTotal = this.tableData.length
|
|
|
+ // console.log('init', this.paging)
|
|
|
+ setTimeout(() => {
|
|
|
+ this.paging.loading = false
|
|
|
+ this.setExpandRowKeys()
|
|
|
+ }, this.paging.timer)
|
|
|
+ },
|
|
|
+ setMinWidth(item) {
|
|
|
+ let width = 80
|
|
|
+ if (item.name === '操作') {
|
|
|
+ if (item.defaultValue.length) {
|
|
|
+ width = item.defaultValue.length * (item.defaultValue.length > 2 ? 20 : 30)
|
|
|
+ }
|
|
|
+ if (this.isExpand) {
|
|
|
+ width = 50
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (item.name === '定级') {
|
|
|
+ width = 70
|
|
|
+ }
|
|
|
+
|
|
|
+ if (item.name === '原因') {
|
|
|
+ width = 150
|
|
|
+ }
|
|
|
+
|
|
|
+ if (item.name === '影响') {
|
|
|
+ width = 100
|
|
|
+ }
|
|
|
+ if (item.name.search(/团队/) > -1) {
|
|
|
+ width = 50
|
|
|
+ }
|
|
|
+ if (item.name.search(/问题/) > -1 && ((this.tabsActive.search(/本月重点问题/) > -1 &&
|
|
|
+ this.pageType === 'readAll') ||
|
|
|
+ (this.pageType === 'read' && this.title === '本月重点问题'))) {
|
|
|
+ width = 300
|
|
|
+ }
|
|
|
+
|
|
|
+ if (item.name.search(/改进项/) > -1) {
|
|
|
+ width = 200
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.pageType.search(/read/) > -1) {
|
|
|
+ if (item.name.search(/标签|影响/) > -1) {
|
|
|
+ width = 150
|
|
|
+ }
|
|
|
+ if (item.name.search(/定级|天数|类型/) > -1) {
|
|
|
+ width = 35
|
|
|
+ }
|
|
|
+ if (item.name.search(/原因|描述/) > -1) {
|
|
|
+ width = 250
|
|
|
+ }
|
|
|
+ if (item.name.search(/改进项/) > -1) {
|
|
|
+ width = 200
|
|
|
+ }
|
|
|
+ if (item.name.search(/责任人|负责人|模块|团队|是否/) > -1) {
|
|
|
+ width = 40
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return `${width}px`
|
|
|
+ },
|
|
|
+ isFixed(item, index, columns) {
|
|
|
+ if (item.name === '操作') return 'right'
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ editLine(row, index) {
|
|
|
+ // console.log(this.pageDate.status, this.domKey, this.editKeys)
|
|
|
+ if (this.pageDate.status < 20) {
|
|
|
+ this.$store.commit('monthlyReportEdit/ADD_EDIT_KEYS', this.domKey)
|
|
|
+ }
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ btnFun(btnItem, scope) {
|
|
|
+ this.$store.commit('monthlyReportEdit/INIT_EDIT_KEYS')
|
|
|
+ if (btnItem.value === '删除') {
|
|
|
+ this.tableData.splice(scope.$index, 1)
|
|
|
+ }
|
|
|
+ if (btnItem.value === '链接') {
|
|
|
+ // console.log(scope)
|
|
|
+ this.$refs['LinkEdit'].open(scope.row.operationTarget || '', scope.$index)
|
|
|
+ // console.log(btnItem, scope, this.columns)
|
|
|
+ }
|
|
|
+ if (btnItem.value === '标记') {
|
|
|
+ this.$refs.markingIssues.modalShow = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.markingIssues.openModal({
|
|
|
+ title: '标记为重点问题',
|
|
|
+ scope,
|
|
|
+ headerTitle: this.title,
|
|
|
+ columns: this.columns
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (btnItem.value === '分析反馈') {
|
|
|
+ // console.log(293, btnItem, scope)
|
|
|
+ this.$refs.Analysis.open(scope.row.analyticFeedbackList, scope.$index, scope.row, this.columns)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加插入
|
|
|
+ setColumns(columns) {
|
|
|
+ let newColumns = _.cloneDeep(columns)
|
|
|
+ if (this.isExpand) {
|
|
|
+ newColumns = [
|
|
|
+ {
|
|
|
+ dataType: 'Single',
|
|
|
+ defaultValue: null,
|
|
|
+ displayType: 'Cascader',
|
|
|
+ name: '',
|
|
|
+ align: 'left',
|
|
|
+ type: 'expand',
|
|
|
+ selectEnum: null,
|
|
|
+ selectType: null,
|
|
|
+ headerKey: uuid10(6)
|
|
|
+ },
|
|
|
+ ...newColumns
|
|
|
+ ]
|
|
|
+ newColumns[1].align = 'left'
|
|
|
+ }
|
|
|
+ newColumns.forEach((elm) => {
|
|
|
+ if (!elm.align) {
|
|
|
+ elm.align = 'center'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // if (this.pageDate.status > 10 && this.tabsActive.indexOf('本月重点问题') < 0) {
|
|
|
+ const { isHistory } = this.$route.query
|
|
|
+ // 非编辑状态，并且不是·本月重点问题·，删除操作按钮
|
|
|
+ if (this.pageDate && this.pageDate.status > 10 && !this.isExpand || isHistory) {
|
|
|
+ newColumns.splice(newColumns.length - 1, 1)
|
|
|
+ }
|
|
|
+ return newColumns
|
|
|
+ },
|
|
|
+ setExpandRowKeys() {
|
|
|
+ if (this.isExpand && this.tableData && this.tableData.length) {
|
|
|
+ this.tableData.forEach((elm) => {
|
|
|
+ if (
|
|
|
+ elm.analyticFeedback &&
|
|
|
+ elm.analyticFeedback.hasOwnProperty('isCommitted') &&
|
|
|
+ elm.analyticFeedback.isCommitted &&
|
|
|
+ this.expandRowKeys.indexOf(elm.rowKey) < 0
|
|
|
+ ) {
|
|
|
+ this.expandRowKeys.push(elm.rowKey)
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ elm.analyticFeedbackList &&
|
|
|
+ elm.analyticFeedbackList.length &&
|
|
|
+ this.expandRowKeys.indexOf(elm.rowKey) < 0
|
|
|
+ ) {
|
|
|
+ this.expandRowKeys.push(elm.rowKey)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 页面跳转
|
|
|
+ goto(url) {
|
|
|
+ // console.log(url)
|
|
|
+ url && window.open(url, '_blank')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.table-wrapper {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .pagination-wrapper {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 5px;
|
|
|
+
|
|
|
+ .el-pagination {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.edit-wrapper {
|
|
|
+ .edit-cell {
|
|
|
+ min-height: 23px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.plus-table-data {
|
|
|
+ margin-top: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-table__expand-column {
|
|
|
+ border-right: 0;
|
|
|
+
|
|
|
+ .el-icon-arrow-right:before {
|
|
|
+ // 这是展开图标
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-table__expand-column .cell {
|
|
|
+ .el-table__expand-icon {
|
|
|
+ .el-icon-arrow-right:before {
|
|
|
+ // 这是展开图标
|
|
|
+ content: '\e6d9';
|
|
|
+ //content: "\e6d8";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-table__expand-icon--expanded {
|
|
|
+ // 这是点击后的旋转角度
|
|
|
+ //transform: rotate(180deg);
|
|
|
+ transform: rotate(0deg);
|
|
|
+
|
|
|
+ .el-icon-arrow-right:before {
|
|
|
+ // 这是展开图标
|
|
|
+ //content: "\e6d9";
|
|
|
+ content: '\e6d8' !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .svg-icon {
|
|
|
+ width: 1em;
|
|
|
+ height: 1em;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-table__expanded-cell {
|
|
|
+ padding-bottom: 0;
|
|
|
+ padding-left: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-button {
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .red {
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .green {
|
|
|
+ color: green;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .yellow {
|
|
|
+ color: yellow;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
洪海涛