crm_front_v3/src/views/contract_manage/components/FiccServiceTable.vue

<script setup>
import { ref,watch } from "vue";
const props = defineProps({
  serviceData: {
    type:Array,
    default:()=>[]
  },
  hasSercive: {
    type:Array,
    default:()=>[]
  },
  canEdit: false,
  editValue: {},
  contractType:null,
  isEdit:false // 是新增合同还是修改合同
});
const emits=defineEmits(['handleShowService'])

const tableData=ref([])

watch(()=>props.editValue,(nval, oval)=>{
  if (nval.ServiceTemplateId) {
    tableData.value.forEach((item) => {
      if (item.ServiceTemplateId === nval.ServiceTemplateId) {
        item.Value = nval.Value;
        // item 表格数据 nval 更新的数据
        // 更新表头 item.Detail[0]
        console.log([nval.tableHeadData,...nval.tableData]);
        let arr=[nval.tableHeadData,...nval.tableData].map((item2,index2)=>{
          
          let obj={}
          item2.forEach((item3,index3)=>{
            let key=`Col${index3+1}`
            obj={...obj,[key]:JSON.stringify(item3)}
          })
          return obj
        })
        console.log(arr);
        item.Detail=arr


        
      }
    });
  }
})

// 初始化数据
const initTableData=()=>{
  if (props.serviceData.length === 0) return;
  let arr = props.serviceData.map((item, index) => {
    return {
      ...item,
      selected: false,
      disable: false,
      text1: item.Detail ? "选择品种" : "查看报价单",
      text2: "下载报价单",
    };
  });
  // 合同详情或者是需要编辑情况下
  if (props.hasSercive.length !== 0) {
  arr.forEach((item) => {
    props.hasSercive.forEach((e) => {
      if (e.ServiceTemplateId === item.ServiceTemplateId) {
        item.Value = e.Value;
        item.Detail = e.DetailList || e.Detail;
        item.selected = true;
        item.disable = false;
      }

      if (item.SelectType === "radio" && e.ServiceTemplateId !== item.ServiceTemplateId) {
        if (!item.selected) {
          item.disable = false;
        }
      }
    });
  });

  // 合同详情 全部禁用
  if (!props.canEdit) {
    arr.forEach((item) => {
      item.disable = true;
      // 如果是小套餐类型 即存在Detail 则将选择品种改为查看报价单
      if (item.Detail) {
        item.text1 = "查看报价单";
      }
    });
  }
  // this.tableData = arr;
  } else {
    // 新增 默认选择第一个
    // arr.forEach((item, index) => {
    //   if (index === 0) {
    //     item.selected = true;
    //   }
    // });
    //如果第一个是单选的 则将其他的禁用
    // if (arr[0] && arr[0].SelectType === "radio") {
    //   arr.forEach((item) => {
    //     if (item.ServiceTemplateId !== arr[0].ServiceTemplateId && item.SelectName === arr[0].SelectName) {
    //       item.disable = true;
    //       item.selected = false;
    //     }
    //   });
    // }
  }

  if(props.contractType==='补充协议'){
    arr.forEach(item=>{
      //大套餐 禁用
      if(item.ServiceTemplateId===1){
        item.disable=true
        item.selected=false
      }else{
        item.disable=false
      }
    })
  }

  tableData.value = arr;
}

// 一开始进来 serviceData数据为空数组
watch(()=>props.serviceData,()=>{
  initTableData();
},
{immediate:true,deep:true})

watch(()=>props.contractType,(nval)=>{
  initTableData();
  if(nval==='补充协议'){
    tableData.value.forEach(item=>{
      //大套餐 禁用
      if(item.ServiceTemplateId===1){
        item.disable=true
        item.selected=false
      }else{
        item.disable=false
      }
      // 需求更改，新增合同类型为"补充协议的时候"，不默认勾选宏观经济
      // 将默认的勾选的宏观经济去除
      if(item.ServiceTemplateId===2 && !props.isEdit){
        for (let i = 0; i < item.Detail.slice(3,6).length; i++) {
          let temp = JSON.parse(item.Detail.slice(3,6)[i].Col2)
          temp.ValueId.length=0
          temp.Value=""
          item.Detail.slice(3,6)[i].Col2 = JSON.stringify(temp)
        }
      }
    })
  }else{
    // 如果一个都没选中过 则重置都为非禁用
    let flag=0
    tableData.value.forEach(item=>{
      if(item.selected){
        flag++
      }
    // "补充协议"切换会其他合同类型时，恢复默认，即勾选宏观经济的状态
      if(item.ServiceTemplateId===2 && !props.isEdit){
        for (let i = 0; i < item.Detail.slice(3,6).length; i++) {
          let temp = JSON.parse(item.Detail.slice(3,6)[i].Col2)
          if(temp.ValueId.length===0){
            temp.ValueId[0]=1
            temp.Value="宏观经济"
            item.Detail.slice(3,6)[i].Col2 = JSON.stringify(temp) 
          }
        }
      }
    })
    if(flag==0){
      tableData.value.forEach(item=>{
        item.disable=false
      })
    }
  }
})

// 选项切换
const handleChange=(e)=>{
  if (e.SelectType === "radio") {
    if (e.selected) {
      tableData.value.forEach((item) => {
        if (item.ServiceTemplateId !== e.ServiceTemplateId && item.SelectName === e.SelectName) {
          item.disable = true;
          item.selected = false;
        }
      });
      // 如果是小套餐则 主动展示弹窗
      if(e.Detail&&e.Detail.length){
        handleShow(e)
      }
    } else {
      tableData.value.forEach((item) => {
        if (item.ServiceTemplateId !== e.ServiceTemplateId && item.SelectName === e.SelectName) {
          // 如果选择了补充协议 则大套餐仍然不可选
          if(props.contractType==='补充协议'&&item.ServiceTemplateId===1){
            item.disable=true
            item.selected=false
          }else{
            item.disable = false;
            item.selected = false;
          }
        }
      });
    }
  }
}

//下载报价单
const handleDownloadImg=(e)=>{
  let link = document.createElement("a");

  //判断e.Value是否以 http开头
  if (e.Value.startsWith("http")) {
    link.href = e.Value + "?response-content-type=application/octet-stream"; //下载链接
  } else {
    link.href = e.Value;
  }
  link.setAttribute("download", e.Title);
  link.style.display = "none"; //a标签隐藏
  document.body.appendChild(link);
  link.click();
}

const handleShow=(e)=>{
  emits("handleShowService", e);
}
defineExpose({
  tableData
})

</script>

<template>
  <el-table border :data="tableData" style="width: 601px">
    <el-table-column label="套餐类型" width="200" align="center">
      <template #default="scope">
        <el-checkbox
          @change="handleChange(scope.row)"
          :label="scope.row.Title"
          v-model="scope.row.selected"
          :disabled="scope.row.disable"
          style="width: 100%; text-align: left; padding-left: 50px"
        ></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column width="200">
      <template #default="scope">
        <span style="cursor: pointer; color: #409eff; padding-left: 50px" v-if="scope.row.selected" @click="handleShow(scope.row)">{{ scope.row.text1 }}</span>
      </template>
    </el-table-column>
    <el-table-column width="200" align="center">
      <template #default="scope">
        <span style="cursor: pointer; color: #409eff" v-if="scope.row.selected && scope.row.Value" @click="handleDownloadImg(scope.row)">{{ scope.row.text2 }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<style></style>