xiaoshi_system/src/views/report/avoid/components/splitPage.vue

<template>
  <!-- 权要拆分类型等 -->
  <div>
    <div style="display: flex; justify-content: space-between;margin:20px 0px 20px 0 ;">
      <el-button-group>
        <el-button @click="merge">合并</el-button>
        <el-button @click="split">拆分</el-button>
      </el-button-group>
      <div>
        <el-select placeholder="请选择拆分类型" v-model="splitType" style="margin-left: 50px;" @change="splitTypeSelect($event)">
          <el-option label="仅拆主权要" value="0"></el-option>
          <el-option label="全部拆分" value="1"></el-option>
        </el-select>
        <el-select placeholder="请选择拆分符号" v-model="splitBy" style="margin-left: 10px;" @change="splitBySelect($event)">
          <el-option label="逗号拆分" value="0"></el-option>
          <el-option label="分号拆分" value="1"></el-option>
          <el-option label="逗号和分号拆分" value="2"></el-option>
        </el-select>
        <el-select placeholder="请选择显示类型" v-model="showType" style="margin-left: 10px;" @change="typeSelect($event)">
          <el-option label="全部显示" value="0"></el-option>
          <el-option label="仅显示主权要" value="1"></el-option>
        </el-select>
      </div>
      <div>
        <el-button @click="keep" type="primary">保存</el-button>
      </div>
    </div>

    <template>
      <el-table :data="tableData" border ref="table" :span-method="objectSpanMethod" v-loading="loading"
        style="width: 100%" :height="tableHeight">
        <el-table-column prop="pRightName" label="权要" width="180" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.pContent" placement="top">
              <span>{{ scope.row.pRightName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="特征" width="300" align="center">
          <template slot-scope="scope">
            <el-checkbox-group v-model="checkList">
              <el-checkbox :label="scope.row.id" @change="getRow(scope)" style="display: flex;align-items: center;">
                <el-input type="textarea" style="width:250px" autosize v-model="scope.row.content">
                  {{ scope.row.content.trim() }}</el-input>
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>
        <el-table-column prop="explainText" label="解释(可粘贴图片)" align="center">
          <template slot-scope="scope">
            <div style="width:100%;outline: #dcdfe6;border:1px solid #DCDFE6;border-radius:5px" id="preview"
              contenteditable="true" v-html="scope.row.explainText" @input="saveValue($event.target.innerHTML)"
              @click="saveValue($event.target.innerHTML)" @blur="getValue(scope.row, 'explainText')"
              v-on:paste="handlePaste($event, scope.row, 'explainText')">

            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="littleDirection" label="回避设计方向(可粘贴图片)" align="center">
          <template slot-scope="scope">
            <div style="width:100%;outline: #dcdfe6;border:1px solid #DCDFE6;border-radius:5px" id="preview"
              contenteditable="true" v-html="scope.row.littleDirection" @input="saveValue($event.target.innerHTML)"
              @click="saveValue($event.target.innerHTML)" @blur="getValue(scope.row, 'littleDirection')"
              v-on:paste="handlePaste($event, scope.row, 'littleDirection')">

            </div>

          </template>
        </el-table-column> -->
      </el-table>
    </template>

  </div>
</template>

<script>
export default {
  props: {
    // 数据源
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 是否可读
    isRead: {
      type: Boolean,
      default: true
    },
    //拆分下拉框的数据
    splitSelect: {
      type: Object,
      default: () => {
        return {
          splitType: 0,
          splitBy: 2,
          showType: 0,
        }
      }
    },
    // 栏位参数 
    column: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      splitType: "0",//拆分类型0仅拆主权要，1全部拆分
      splitBy: "2",//拆分符号0逗号拆分，1分号拆分，2逗号和分号拆分
      showType: "0",//显示类型0全部显示1仅显示主权要
      typeArr: [1],//显示权要还是全部显示
      // 表格的loading
      loading: false,
      // 表格的高度
      tableHeight: 0,
      // 勾选中的特征
      checkList:[],
    }
  },
  mounted() {

  },
  methods: {
    // 
    // 保存
    keep(){},
    // 选择拆分类型
    splitTypeSelect(val) {
      this.splitType = val
    },
    // 选择拆分符号
    splitBySelect(val) {
      this.splitBy = val
    },
    // 选择显示类型
    typeSelect(val) {
      this.typeArr = []
      if (val == 1) {
        this.typeArr.push(1)
      } else {
        this.typeArr.push(1, 0)
      }
      // this.tableData = this.tableData1.filter(item => {
      //   return this.typeArr.includes(item.pType)
      // })
      // this.getSpanArr(this.tableData)
      // this.keep()
    },
    // 特征等合并
    merge() {
      // console.log(this.checkList,this.row);
      if (this.row.length > 1) {
        var str = ''
        var str1 = ''
        var str2 = ''
        var str3 = ''
        for (let i = 0; i < this.row.length - 1; i++) {
          if (this.row[i].rightId != this.row[i + 1].rightId) {
            this.$alert("不能跨权要合并特征", "提示", {
              type: 'warning',
              confirmButtonText: '确定',
            })
            return false
          } else {
            let Index_rowArr = this.row.sort((a, b) => {
              return a.$index - b.$index
            })
            // console.log(this.Index_row,Index_rowArr);
            if (Index_rowArr[i + 1].$index - Index_rowArr[i].$index != 1) {
              this.$alert("非相邻不能合并特征", "提示", {
                type: 'warning',
                confirmButtonText: '确定',
              })
              return false
            }
          }
        }
        this.row.forEach((rowItem, rowIndex) => {
          // console.log(rowItem,rowIndex);
          if (rowIndex < this.row.length - 1) {
            str = str + rowItem.content.trim()
            str1 = str1 + rowItem.contentOut.trim()
            str2 = str2 + rowItem.littleDirection
            str3 = str3 + rowItem.explainText
            let Index1 = this.tableData1.findIndex(item => { return rowItem.id == item.id })
            if (Index1 != -1) {
              this.tableData1.splice(Index1, 1)
            }
          } else if (rowIndex == this.row.length - 1) {
            str = str + rowItem.content.trim()
            str1 = str1 + rowItem.contentOut.trim()
            str2 = str2 + rowItem.littleDirection
            str3 = str3 + rowItem.explainText
          }
          let Index2 = this.tableData1.findIndex(item => { return item.id == rowItem.id })
          if (Index2 != -1) {
            this.tableData1[Index2].content = str
            this.tableData1[Index2].contentOut = str1
            this.tableData1[Index2].littleDirection = str2
            this.tableData1[Index2].explainText = str3
          }

        })
        this.TypeSelect(this.Type)
        this.row = []
        this.checkList = []
      }
    },
    // 拆分
    split() {
      //不能同时拆分
      if (this.row.length > 0) {
        if (this.row.length > 1) {
          this.$alert("不能同时拆分多个特征", "提示", {
            type: 'warning',
            confirmButtonText: '确定',
          })
          return false
        }
        var rowId = Math.floor((Math.random() * 9999) + 1000);
        this.row.forEach((rowItem, rowIndex) => {
          var splitAdd = {
            id: rowItem.id + rowId + "a",
            content: '',
            contentOut: '',
            littleDirection: '',
            explainText: '',
            rightName: rowItem.rightName,
            featuresOrder: rowItem.featuresOrder,
            splitBy: rowItem.splitBy,
            splitType: rowItem.splitType,
            signPatentNo: rowItem.signPatentNo,
            rightId: rowItem.rightId,
            rightType: rowItem.rightType,
            isFinal: rowItem.isFinal,
            partnerId: rowItem.partnerId,
            reportId: rowItem.reportId,

            pRightName: rowItem.pRightName,
            pSignPatentNo: rowItem.pSignPatentNo,
            pContentOut: rowItem.pContentOut,
            pContent: rowItem.pContent,
            pReportId: rowItem.pReportId,
            pPatentId: rowItem.pPatentId,
            pType: rowItem.pType,
            pSort: rowItem.pSort,

          }
          let Index2 = this.tableData1.findIndex(item => { return rowItem.id == item.id })
          this.tableData1.splice(Index2 + 1, 0, splitAdd)
        })
        this.TypeSelect(this.Type)
        this.row = []
        this.checkList = []
      }
    },
  },
}
</script>

<style lang="scss" scoped></style>