xiaoshi_system/src/views/report/InvalidResponse/components/dialog/addInvalidResponse.vue

<template>
  <div>
    <el-dialog  :title="title" :visible.sync="showDialog" width="600px" :close-on-click-modal="false"  :before-close="handleClose" append-to-body>
        <el-form :model="form" :rules="rules" ref="form" label-width="80px" label-position="left">
            <template  v-if="type == 1">
                <div>
                    <el-form-item  label="无效理由" prop="name">
                        <el-select v-model="form.statutesId" placeholder="请选择" style="width:100%">
                            <el-option
                                v-for="item in provisions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="['5','4','8'].indexOf(form.statutesId) !=-1" label="涉及内容" prop="name">
                        <div v-if="form.statutesId == 5">说明书</div>
                        <div v-else>附图</div>
                    </el-form-item>
                    <el-form-item v-else label="权要" prop="name">
                        <el-select v-model="form.claimIds" multiple placeholder="请选择" style="width:100%">
                            <el-option
                                v-for="item in claims"
                                :key="item.sysOrder"
                                :label="`权要${Number(item.sysOrder)+1}`"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </template>
            <template v-if="type == 2">
                <div>
                    <el-form-item  label="无效理由" prop="name">
                        <el-select v-model="form.statutesId" @change="changeStatutes" placeholder="请选择" style="width:100%">
                            <el-option
                                v-for="item in provisions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="['5','4','8'].indexOf(form.statutesId) ==-1" label="权要" prop="name">
                        <el-select v-model="form.claimId" placeholder="请选择" style="width:100%">
                            <el-option
                                v-for="item in hasClaims"
                                :key="item.claimSort"
                                :label="`权要${Number(item.claimSort)+1}`"
                                :value="item.claimId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div class="proofGroup">
                        <div style="display:flex;justify-content:space-between;padding-bottom:10px">
                            <div>{{ifSecondInvalid?'第二次':'第一次'}}证据组合</div>
                            <div>
                                <el-button type="primary" size="small" @click="add">添加</el-button>
                            </div>
                        </div>
                        <div style="width:100%">
                            <table class="table">
                                <tr v-for="item in form.proofGroups" :key="item.sysOrder">
                                    <td>组合{{ item.sysOrder }}</td>
                                    <td>
                                        <el-input type="textarea" style="width:100%" v-model="item.descriptions"></el-input>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </template>
        </el-form>
        
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" :loading="btnLoading" @click="submit" >确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    projectId:{
        default:0
    },
    tableData:{
        default:()=>{
            return []
        }
    },
    ifSecondInvalid:{
        default:false
    }
  },
  data() {
    return {
        type:null,
        form:{},
        title:'',
        showDialog:false,
        claims:[],
        rules:{},
        btnLoading:false,
        hasClaims:[]
    };
  },
  watch: {},
  computed: {
    provisions(){
        return this.$store.state.dictMessage.dictMessage.STATUTE || []
    }
  },
  created() {},
  mounted() {
    // this.getClaims()
  },
  methods: {
    
    //切换无效法条
    changeStatutes(val){
        var obj = {}
        for(var i =0;i<this.tableData.length;i++){
            if(this.tableData[i].statutesId == val){
                obj[this.tableData[i].claimSort] = this.tableData[i]
            }
        }
        this.hasClaims = Object.values(obj)
    },
    //添加证据组合
    add(){
        var order = 0
        if(this.form.proofGroups && this.form.proofGroups.length>0){
            order = this.form.proofGroups[this.form.proofGroups.length-1].sysOrder
        }
        this.form.proofGroups.push(
            {
                sysOrder:Number(order) + 1,
                content:''
            }
        )
    },
    //获取权要
    getClaims(){
        var params = {
            projectId:this.projectId
        }
        this.$api.queryClaim(params).then(response=>{
            if(response.code == 200){
                this.claims = response.data.data
            }
        }).catch(error=>{
            this.claims = []
        })
    },
    //打开弹窗
    open(type,title,data,claims){
        this.type = type
        this.title = title
        this.form = data
        this.claims = claims
        this.showDialog = true
    },
    //关闭弹窗
    handleClose(){
        this.showDialog = false
    },
    //提交
    submit(){
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.btnLoading = true
            switch(this.type){
                case '1':
                    this.addInvalidStatutes()
                    break;
                case '2':
                    this.addProofGroup()
                    break;
            }
          }
        })
        
    },
    //添加无效理由
    addInvalidStatutes(){
        this.form.projectId = this.projectId
        if(this.form.statutesId == 5){
            this.form.relatedContent = 0
        }else if(this.form.statutesId == 4 || this.form.statutesId == 8){
            this.form.relatedContent = 2
        }else{
            this.form.relatedContent = 1
        }
        this.$api.addInvalidStatutes(this.form).then(response=>{
            if(response.code == 200){
                this.btnLoading = false
                this.handleClose()
                this.$emit('save',true)
            }
        }).catch(error=>{
            this.btnLoading = false
        })
    },
    //添加证据组合
    addProofGroup(){
        this.form.descriptions = this.form.proofGroups.map(item=>{
            if(this.ifSecondInvalid){
                return {
                    description2: item.descriptions
                }
            }else{
                return {
                    description1: item.descriptions
                }
            }
        })
        this.form.projectId = this.projectId
        this.$api.addProofGroup(this.form).then(response=>{
            if(response.code == 200){
                this.btnLoading = false
                this.handleClose()
                this.$emit('save',true)
            }
        }).catch(error=>{
            this.btnLoading = false
        })
    }
  },
};
</script>
<style lang="scss" scoped>
.proofGroup{
    font-family: var(--fm);
    color: var(--color2);
    font-weight: bold;
}
.table {
  width: 100%;
  border-top: 1px solid #ebeef5;
  border-left: 1px solid #ebeef5;
  border-spacing: 0;
}

.table td {
  padding: 10px 30px;
  border-bottom: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}
</style>