xiaoshi_system/src/views/report/InvalidResponse/components/powerManage/powerManage.vue

<template>
  <div class="height_100">
    <el-container>
        <el-header>
            <div class="head">
                <el-button type="primary" size="small" v-if="isEdit" @click="cancel" class="margin-right_10">取消编辑</el-button>
                <el-button type="primary" size="small" v-if="isEdit" @click="save" class="margin-right_10">保存</el-button>
                <el-button type="primary" size="small" v-else @click="edit" class="margin-right_10">编辑</el-button>
            </div>
        </el-header>
        <el-main v-DivHeight="getDivHeight">
            <el-table v-loading="loading" :data="tableData" :maxHeight="tableHeight - 45" border :header-cell-style="{'text-align':'center'}" style="width: 100%">
                <el-table-column prop="sysOrder"  label="序号" width="100" align="center">
                    <template slot-scope="scope">
                        <div>
                            权要{{ scope.row.sysOrder+1 }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="原权要内容" > 
                    <template slot-scope="scope">
                        <div>
                            <el-input type="textarea" v-model="scope.row.content" v-if="isEdit" @blur="changeClaimOptionType($event,scope.row)"></el-input>
                            <span v-else>{{ scope.row.content }}</span> 
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="parentOrder" label="父权要" align="center"> 
                    <template slot-scope="scope">
                        <div>
                            <el-select  v-if="isEdit" v-model="scope.row.parentOrderIds" multiple placeholder="请选择" @change="changeParentOrder($event,scope.row)" style="width:100%">
                                <el-option
                                    v-for="item in tableData"
                                    :key="item.sysOrder"
                                    :label="`权要${Number(item.sysOrder)+1}`"
                                    :value="item.sysOrder+''">
                                </el-option>
                                <el-option
                                    label="主权要"
                                    value="-1">
                                </el-option>
                            </el-select>
                            <span v-else>{{ getParentOrder(scope.row) }}</span> 
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="claimType" label="权要类型" align="center"> 
                    <template slot-scope="scope">
                        <div>
                            <el-select  v-if="isEdit" v-model.number="scope.row.claimType" placeholder="请选择" @change="changeClaimOptionType($event,scope.row)" style="width:100%">
                                <el-option
                                    v-for="item in claimType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <span v-else>{{ getClaimData(scope.row) }}</span> 
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" v-if="isEdit" @click="del(scope)">删除</el-button>
                            <el-button type="text" v-if="isEdit" @click="add(scope)">在下方增加一行</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>

    
  </div>
</template>

<script>
import { getTableHeight } from '@/views/components/mixins'
export default {
  components: {},
  mixins:[getTableHeight],
  props: {
    projectId:{
        default:0
    }
  },
  data() {
    return {
        tableData:[],
        loading:false,
        isEdit:false,
        claimType:[
            {
                value:1,
                label:'主权利要求'
            },
            {
                value:0,
                label:'附属权利要求'
            }
        ]
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.getList()
  },
  methods: {
    //获取权要
    getList(){
        var params = {
            projectId:this.projectId
        }
        this.loading = true
        this.$api.queryClaim(params).then(response=>{
            if(response.code == 200){
                this.tableData = response.data.data
                this.loading = false
            }
        }).catch(error=>{
            this.tableData = []
            this.loading = false
        })
    },
    //编辑
    edit(){
        this.isEdit = true
    },
    //保存
    save(){
        var params = {
            addClaimDTOs:this.tableData,
            projectId:this.projectId
        }
        this.$api.addClaim(params).then(response=>{
            if(response.code == 200){
                this.isEdit = false
                this.$message.success('保存成功')
                this.getList()
            }
        }).catch(error=>{
            this.$message.error('保存失败')
        })
    },
    //取消编辑
    cancel(){
        this.isEdit = false
        this.getList()
    },
    //删除当前一行
    del(scope){
        var index = scope.$index
        this.tableData.splice(index,1)
        this.updateClaimOrder(index-1,1)
    },
    //在下方新增一行
    add(scope){
        var index = scope.$index
        var data = JSON.parse(JSON.stringify(scope.row))
        data.sysOrder = Number(data.sysOrder) + 1
        data.optionType = 2
        data.content = ''
        this.tableData.splice(index+1,0,data)
        this.updateClaimOrder(index+1,2)
    },
    //更新权要序号
    updateClaimOrder(index,type){
        for(var i = index+1;i<this.tableData.length;i++){
            if(type == 1){
                this.tableData[i].sysOrder = Number(this.tableData[i].sysOrder) - 1
            }else if(type == 2){
                this.tableData[i].sysOrder = Number(this.tableData[i].sysOrder) + 1
            }
            if(this.tableData[i].optionType != 2){
                this.tableData[i].optionType = 1
            }
        }
    },
    //切换父权要
    changeParentOrder(value,row){
        this.changeClaimOptionType()
        row.parentOrder = row.parentOrderIds.join(',')
    },
    changeClaimOptionType(value,row){
        if(row.optionType != 2){
            row.optionType = 1
        }
    },
    //获取父权要
    getParentOrder(row){
        if(row.claimType == 1){
            this.$set(row,'parentOrderIds',['-1'])
            return '主权要'
        }
        var arr = row.parentOrder.split(/,|，/)
        this.$set(row,'parentOrderIds',arr)
        // row.parentOrderIds = arr
        var parentOrder = ''
        arr.forEach((item,index) => {
            var num = Number(item)+1
            parentOrder = parentOrder + `权要${num}`
            if(index != arr.length - 1){
                parentOrder = parentOrder + '、'
            }
        });
        return parentOrder
    },
    //获取权利要求类型
    getClaimData(row){
        var obj = this.claimType.find(item=>{
            return item.value == row.claimType
        })
        if(obj){
            return obj.label
        }
        return ''
    }
  },
};
</script>
<style lang="scss" scoped>
.head{
    width:100%;
    display: flex;
    flex-direction: row-reverse;
}
</style>