el-table从后台获取统计值

<!--
  动态表格 用于批量填入数据
 -->
<template>
  <div :id="record.model" :name="record.model" class="form-table-index">
    <el-table
      :class="[
        'form-table',
        record.options.customClass ? record.options.customClass : '',
      ]"
      :style="record.options.customStyle"
      :show-summary="record.options.issummary"
      :key = "keya"
      :summary-method="getSummaries"
      :rowKey="(record) => record.key"
      :data="models[record.model]"
      :border="record.options.showBorder"
      :scroll="{
        x:
          record.list.length * 190 +
          80 +
          (!record.options.hideSequence ? 60 : 0),
        y: record.options.scrollY,
      }"
    >
      <template v-if="isVisible">
        <el-table-column
          v-if="!record.options.hideSequence"
          label="序号"
          align="center"
          type="index"
          width="50"
        >
        </el-table-column>
        <template v-for="(item, index) in record.list">
          <el-table-column
            v-if="
              record.options.addType != 'dialog' ||
              (record.options.showItem &&
                record.options.showItem.includes(item.model))
            "
            :key="index"
            :label="item.label"
            :prop="item.model"
            :width="
              record.options.colWidth && record.options.colWidth[item.model]
                ? record.options.colWidth[item.model]
                : undefined
            "
            align="center"
          >
            <template slot-scope="scope">
              <!-- 这里就要判断类型了 -->
              <!-- 2021-03-14 判断新增数据方式，如果是怎加航 这里就不能预览了 -->
              <TableItem
                :record="item"
                :renderPreview="
                  renderPreview || record.options.addType == 'dialog'
                "
                :domains="models[record.model][scope.$index]"
              />
            </template>
          </el-table-column>
        </template>
        <el-table-column
          id="but"
          label="操作"
          align="center"
          v-if="!renderPreview || record.options.addType == 'dialog'"
          :width="controlWidth"
        >
          <template slot-scope="scope">
            <el-button
              id="but"
              type="success"
              v-if="renderPreview && record.options.addType == 'dialog'"
              @click="updateDomain(scope.row)"
            >
              <i class="el-icon-eye"/>查看
            </el-button>
            <el-button
              id="but"
              type="primary"
              v-if="!renderPreview && record.options.addType == 'dialog'"
              @click="updateDomain(scope.row)"
            >
              <i class="el-icon-edit"/>修改
            </el-button>
            <el-button
              id="but"
              type="primary"
              v-if="!renderPreview && record.options.copyRow"
              @click="copyDomain(scope.row)"
            >
              <i class="el-icon-copy-document"/>复制
            </el-button>
            <el-button
              id="but"
              type="danger"
              v-if="!renderPreview"
              @click="removeDomain(scope.$index)"
            >
              <i class="el-icon-delete"/>删除
            </el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-button
      id="but"
      v-if="!renderPreview"
      type="dashed"
      :disabled="disabled"
      @click="addDomain"
    >
      <i class="el-icon-circle-plus-outline"/>增加
    </el-button>
    <!-- <el-button
      id="but"
      v-if="!renderPreview"
      type="dashed"
      :disabled="disabled"
    >
      <i class="el-icon-circle-plus-outline"/>增加合计
    </el-button> -->
    <AddOrUpdate
      ref="addOrUpdate"
      v-if="addOrUpdateVisible"
      :formConfig="config"
      :formTemplate="templateData"
      :renderPreview="renderPreview"
      @formAdd="formAdd"
      @formUpdate="formUpdate"
    />
  </div>
</template>

<script>
//import TableFormItem from "./table-form-item";
import TableItem from "./table-item";
import store from '@/store'
import AddOrUpdate from "./add-or-update";
import {formCalculation} from "@/api/form/form";
import request from "@/utils/request.js";
export default {
  name: "TableBatch",
  props: {
    record: {
      type: Object,
      required: true
    },
    value: {
      type: [Object, Array],
      required: false
    },
    models: {
      type: Object,
      required: true
    },
    config: {
      type: Object,
      required: false
    },
    parentDisabled: {
      type: Boolean,
      default: false
    },
    // 是否预览结果表单
    renderPreview: {
      type: Boolean,
      default: false
    }
  },
  components: {
    TableItem,
    AddOrUpdate
  },
  watch: {
    value: {
      // value 需要深度监听及默认先执行handler函数
      handler(val) {
        if (val instanceof Array) {
          this.models[this.record.model] = val || [];
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      addOrUpdateVisible: false,
      isVisible: true,
      suma:[],
      keya: 0
    };
  },
  computed: {
    disabled() {
      return this.record.options.disabled || this.parentDisabled;
    },
    templateData() {
      return {
        list: this.record.list,
        config: {
          labelPosition: this.record.options.labelPosition
            ? this.record.options.labelPosition
            : "right",
          labelWidth: this.record.options.labelWidth,
          size: "mini",
          hideRequiredMark: false
        }
      };
    },
    controlWidth() {
      let w = 100;

      if (this.renderPreview) {
        return w;
      }
      if (this.record.options.copyRow) {
        w += 80;
      }
      if (this.record.options.addType == "dialog") {
        w += 80;
      }

      return w;
    }
  },
  mounted() {
    // 2021-05-10 lyf 只要没有默认值都先给回填一个  这个可以处理初始化么有值，导致后面很多联动没法做，必须要通过v-if刷新
    if (!Object.prototype.hasOwnProperty.call(this.models, this.record.model)) {
      this.$set(this.models, this.record.model, []);
    }
  },
  methods: {
   getSummaries(param) {
     let tableList  = JSON.parse(JSON.stringify(this.record.list))
     let field_type_data = {}
     if(tableList.length>0){
       tableList.forEach(it=>{
         if(it.model.indexOf('_id')===-1){
            field_type_data[it.model] = parseInt(it.dictValue)
         }
       })
     }
         const { columns, data } = param;
         const sums = [];
         let requestData = JSON.parse(JSON.stringify(data))
       requestData.forEach(item=>{
          delete item.seq
         delete item._id
       for(let ke in item){
         if(ke.indexOf('_label')!==-1||ke.indexOf('_id')!==-1){
           delete item[ke]
         }
       }
        })
        columns.forEach((column, index) => {
         if (index === 0) {
                    sums[index] = '合计';
                    return;
               }else {
                 sums[index] = <p class="count_row"><div ref={this.record.model+index}></div></p>
                 return
               }
        })
        var _this = this
        setTimeout(function(){
          _this.$nextTick(() => {
            if(requestData.length>0){
              const params = {
                field_type_data: field_type_data,
                batch_data: requestData
              }
              formCalculation(params).then(res=>{
                 if(res?.status==='success'){
                   var arr = []
                   var obj = JSON.parse(JSON.stringify(res.data))
                  for(let key  in obj) {
                    arr.push(obj[key])
                   }
                   arr.forEach((item,index)=>{
                      let refkey = _this.record.model+(index+1)
                      _this.$refs[refkey].innerHTML = item
                   })
                 }
                let batchStringmessage = _this.$store.getters.batchTableSum
                if(batchStringmessage){
                 if(batchStringmessage.hasOwnProperty(_this.record.model)){
                   batchStringmessage[_this.record.model] = obj
                   _this.$store.dispatch('savebatchTableSum', batchStringmessage)
                 }else{
                   _this.$set(batchStringmessage,_this.record.model,obj)
                   _this.$store.dispatch('savebatchTableSum', batchStringmessage)
                 }
                }else{
                  let batchObjmessage = {}
                  _this.$set(batchObjmessage,_this.record.model,obj)
                   _this.$store.dispatch('savebatchTableSum', batchObjmessage)
                }
              })
            }
          })
        },0)
             return sums
     },
    validationSubform() {
      return true;
    },
    resetForm() {
      this.$refs.dynamicValidateForm.resetFields();
    },
    removeDomain(index) {
      // this.$confirm(`确定删除此数据?`, "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // }).then(() => {
      let domains = this.models[this.record.model];
      if (domains) {
        if (index !== -1) {
          domains.splice(index, 1);

          // this.$message({
          //   message: "删除成功",
          //   type: "success",
          //   duration: 1000
          // });
        }
      }
      // });
    },
    updateDomain(data) {
      this.addOrUpdateVisible = true;
      console.log('dataaa',data)
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(data);
        this.$refs.addOrUpdate.sendModle(this.models);
      });
    },
    // 行复制 2021-02-17 lyf
    copyDomain(data) {
      let copyData = { ...data };
      copyData._id = null;
      if (this.record.options.addType == "dialog") {
        this.addOrUpdateVisible = true;

        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(copyData);
        });
      } else {
        // 直接添加一行数据
        this.isVisible = false;

        let domains = this.models[this.record.model];

        domains.push(copyData);
        this.isVisible = true;
      }
    },
    addDomain() {
      if (this.record.options.addType == "dialog") {
        this.addOrUpdateVisible = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init();
          this.$refs.addOrUpdate.sendModle(this.models);
        });
      } else {
        // 直接添加一行数据
        this.isVisible = false;
        const items = this.record.list;

        const itemObject = {};
        items.forEach((t) => {
          itemObject[t.model] = "";
        });

        let domains = this.models[this.record.model];
        if (!domains) {
          const ds = [itemObject];

          domains = ds;
        } else {
          domains.push(itemObject);
        }

        this.$set(this.models, this.record.model, domains);
        this.$emit("update:models",this.models)
        this.isVisible = true;
      }
    },
    formAdd(form) {
      console.log('form',form)
      this.isVisible = false;
      for(var mkey in form){
           console.log('_id',mkey)
        if(mkey.indexOf("_id") !== -1){
            console.log('_idd',mkey)
          form[mkey] = form._id
        }
      }
      console.log('mkey',form)
      let domains = this.models[this.record.model];
      if (!domains) {
        const ds = [form];
        this.models[this.record.model] = ds;
        domains = this.models[this.record.model];

      } else {
        domains.push(form);
      }
       console.log('domains',domains)

      // 排序
      domains.sort(function(a, b) {
        return a.seq - b.seq;
      });
      this.isVisible = true;
      this.$message({
        message: "添加成功",
        type: "success",
        duration: 1000
      });
    },
    formUpdate(form) {
       console.log('formup',form, this.models[this.record.model])
      let domains = this.models[this.record.model];

      for (var i in this.models[this.record.model]) {
        if (this.models[this.record.model][i]._id == form._id) {
          this.models[this.record.model].splice(i, 1, form);
          break;
        }
      }
      console.log('更新后的dom',form, this.models[this.record.model])
      this.models[this.record.model].sort(function(a, b) {
        return a.seq - b.seq;
      });
      this.$message({
        message: "更新成功",
        type: "success",
        duration: 1000
      });
    },
    handleInput() {
      this.$emit("change", this.models);
    }
  }
};
</script>