修改

dsk-operate-ui/src/views/detail/party-a/qualification/qualification.vue

 <template>
-    <div>
-      资质资格
+  <div class="qualification-container">
+    <div class="title_wrap">
+      <div class="enterprise_title">
+        资质资格
+      </div>
     </div>
+    <div class="label-item">
+      <span class="color">建筑业企业资质 31</span>
+      <span>工程设计资质 31</span>
+    </div>
+    <div class="table-item">
+      <el-table
+        v-if="!isSkeleton"
+        element-loading-text="Loading"
+        :data="tableData"
+        row-key="id"
+        :span-method="objectSpanMethod"
+        default-expand-all
+        border
+        highlight-current-row
+      >
+        <el-table-column label="序号" width="60" align="left" type="index" fixed="left"></el-table-column>
+        <el-table-column label="资质编号" width="150" prop="code"></el-table-column>
+        <el-table-column label="资质名称" min-width="200" prop="expenseName"></el-table-column>
+        <el-table-column label="发证日期" width="150" prop="date"></el-table-column>
+        <el-table-column label="有效期" width="150" prop="time"></el-table-column>
+        <el-table-column label="发证机关" min-width="200" prop="fzjg"></el-table-column>
+      </el-table>
+    </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: "qualification"
+  import skeleton from '../component/skeleton';
+  export default {
+    name: "qualification",
+    components: {
+      skeleton,
+    },
+    data() {
+      return {
+        tableData:[
+          {
+            code:'D123456489',
+            expenseName:'冶金工程施工总承包一级',
+            date:'2020-08-01',
+            time:'2020-08-01',
+            fzjg:'住房和城乡建设部',
+          },
+          {
+            code:'D123456489',
+            expenseName:'冶金工程施工总承包二级',
+            date:'2020-08-01',
+            time:'2020-08-01',
+            fzjg:'住房和城乡建设部',
+          },
+          {
+            code:'D123456489',
+            expenseName:'冶金工程施工总承包san级',
+            date:'2020-08-01',
+            time:'2020-08-01',
+            fzjg:'住房和城乡建设部',
+          },
+          {
+            code:'D323156489',
+            expenseName:'冶金工程施工总承包san级',
+            date:'2020-08-01',
+            time:'2020-08-01',
+            fzjg:'住房和城乡建设部',
+          },
+        ],
+        isSkeleton:false,
+      }
+    },
+    created() {
+
+    },
+    //计算集
+    computed: {
+
+    },
+    //方法集
+    methods: {
+      handleSearch(){
+
+      },
+      flitterData(arr) {
+        let spanOneArr = []
+        let concatOne = 0
+        arr.forEach((item, index) => {
+          if (index === 0) {
+            spanOneArr.push(1)
+          } else {
+            if (item.code === arr[index - 1].code) {
+              spanOneArr[concatOne] += 1
+              spanOneArr.push(0)
+            } else {
+              spanOneArr.push(1)
+              concatOne = index
+            }
+          }
+        })
+        return {
+          one: spanOneArr
+        }
+      },
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.flitterData(this.tableData).one[rowIndex]
+          console.log(_row,"||||||||")
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      },
     }
+  }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+  .qualification-container{
+    .title_wrap{
+      border-bottom: 0;
+    }
+    .label-item{
+      padding: 0 16px;
+      span{
+        display: inline-block;
+        height: 38px;
+        border-radius: 4px;
+        line-height: 38px;
+        border: 1px solid #DCDFE6;
+        color: #232323;
+        font-size: 14px;
+        margin-right: 8px;
+        padding: 0 12px;
+      }
+      .color{
+        background: rgba(0, 129, 255, 0.1);
+        color: #0081FF;
+      }
+    }
+  }
 </style>

dsk-operate-ui/src/views/projectCostLedger/detail/components/MeasureItems/index.vue

@@ -217,6 +217,14 @@
   } from '@/api/projectCostLedger'
   import { cloneDeep } from 'lodash-es'
   import DskSkeleton from "@/components/DskSkeleton";
+
+  // 可编辑字段
+  const editPropNames = [
+    "projectVolume",
+    "monthCostRate",
+    "costEffective",
+  ];
+
   export default {
   name: "MeasureItems",
   props: {
@@ -276,6 +284,7 @@
       id: 0,
       expenseDate: '',
       tableData: [],
+      originTableDataList: [],  //源数据列表
       isall: true,//是否汇总
       dialogVisible: false,
       queryParam: {},//推送工程量数据
@@ -389,8 +398,10 @@
           if(item == thismonth){
             hasmonth = true
           }
-          let li = {value:item,label:item.substring(0, 4) + '-' + item.substring(4, 6)}
-          arr.push(li)
+          if(item){
+            let li = {value:item,label:item.substring(0, 4) + '-' + item.substring(4, 6)}
+            arr.push(li)
+          }
         });
         if(!hasmonth){
           let li = {value:thismonth,label:thismonth.substring(0, 4) + '-' + thismonth.substring(4, 6)}
@@ -431,7 +442,8 @@
           // this.tableData = res.data;
         }
         const res = await getCostMeasureslist(param);
-        this.tableData = res.data;
+        this.tableData = cloneDeep(res.data);
+        this.originTableDataList =cloneDeep(res.data);
         this.isinput = false
         // await this.$nextTick()
         this.$nextTick(()=>{
@@ -445,6 +457,16 @@
         this.tableLoading = false;
       }
     },
+    async getListData(menuPath){
+      let param = {
+        projectId: this.projectId,
+        id: this.id,
+        month: this.expenseDate
+      };
+      const res = await getCostMeasureslist(param);
+      this.tableData = cloneDeep(res.data);
+      this.originTableDataList =cloneDeep(res.data);
+    },
     async init(detail = '') {
       try {
         const projectId = detail;
@@ -525,36 +547,62 @@
     addcost() {
       this.cbVisible = true
     },
-    getTreeData(data){
-      for(var i=0;i<data.length;i++){
-        //projectVolume/monthCostRate/costEffective
-        if(data[i].projectVolume || data[i].monthCostRate || data[i].costEffective){
-          data[i].planMeasureId = data[i].id
-          data[i].actualId = data[i].id
-          data[i].month = this.expenseDate
-          data[i].monthCostRate = data[i].monthCostRate?parseInt(data[i].monthCostRate.replace('%','')):null
-        }
-        if(data[i].children){
-          this.getTreeData(data[i].children);
-        }else {
-          data[i].children=undefined;
-        }
-
-      }
-      return data;
+    // 差异化比对
+    differentCompare() {
+      const originData = this.originTableDataList;
+      /**
+       * @type {Array<object>}
+       */
+      let data = cloneDeep(this.tableData);
+      // 差异数据
+      const different = this.getDeepDifferentData(data, originData);
+      return cloneDeep(different);
     },
-    addinputs(){
-      let tables = JSON.parse(JSON.stringify(this.tableData))
-      let params=this.getTreeData(tables)
-      saveBatch(JSON.stringify(params)).then(res=>{
-        if(res.code == 200){
-          this.$message.success(res.msg)
-          this.isinput = false
-          this.getDatas(this.id)
-        }else{
-          this.$message.error(res.msg)
+      // 深度差异化对比
+    getDeepDifferentData(data = [], originData = [], tempArray = []) {
+        const len = data.length;
+        for (let index = 0; index < len; index++) {
+          const item = data[index];
+          // 源数据
+          const originItem = originData[index];
+          // 查看可编辑字段是否存在任意一处 数据不同
+          const hasDifferent = editPropNames.some(prop => {
+            // 两个皆为无效值 返回false
+            if (!parseFloat(item[prop]) && !parseFloat(originItem[prop])) return false;
+            return item[prop] != originItem[prop];
+          });
+          console.log(hasDifferent,"hasDifferenthasDifferenthasDifferent")
+          // 浅层级
+          if (hasDifferent) {
+            tempArray.push({
+              ...item,
+              id: item.actualId,
+              planMeasureId: item.id,
+              monthCostRate: item.monthCostRate?parseInt(item.monthCostRate.replace('%','')):null,
+              month: this.expenseDate
+            });
+          }
+          // 递归深层级
+          if (item?.children?.length) {
+            this.getDeepDifferentData(item.children, originItem.children, tempArray);
+          }
         }
-      })
+        return tempArray;
+      },
+    addinputs(){
+      let resultData = this.differentCompare();
+      // 有差异
+      if (resultData.length) {
+        saveBatch(resultData).then(res=>{
+          if(res.code == 200){
+            this.$message.success(res.msg)
+            this.isinput = false
+            this.getDatas(this.id);
+          }else{
+            this.$message.error(res.msg)
+          }
+        })
+      }
     },
     changeDate(){
       let choseDate = this.chooseDate.replace('-','')
@@ -570,6 +618,7 @@
         this.expenseDate = choseDate
         //   arr.unshift(li)
       }
+      this.getListData(this.id);
     },
     inputnum(){
       this.cbVisible = false