kd-aiot-frontend-eom/src/views/financialManage/invoiceManage/components/tableInfo.vue

<template>
  <div>
    <el-form ref="form" :model="tableForm">
      <ele-pro-table
        ref="table"
        :needPage="false"
        :columns="columns"
        :datasource="tableForm.detailList"
        row-key="id"
        class="time-form"
      >
        <template v-slot:toolbar>
          <el-button type="text" @click="addRow">新增</el-button>
          <el-button type="text" @click="removeRow(scope.row)">选择商品</el-button>
          <el-button type="text" @click="removeRow(scope.row)">批量设置税率</el-button>
          <el-button type="text" @click="removeRow(scope.row)">批量设置单价</el-button>
          <el-button type="text" @click="removeRow(scope.row)">批量设置折让比例</el-button>
        </template>
        
        <template v-slot:totalCount="scope">
        <el-form-item
          style="width: 100%;"
          :prop="'detailList.' + scope.$index + '.totalCount'"
          :rules="[
            {
              required: true,
              message: '请输入数量',
              trigger: 'blur'
            },
            {
              validator: (rule, value, callback) => {
                if (value === undefined || value === null || value === '') {
                  callback('请输入数量');
                } else if (parseFloat(value) <= 0) {
                  callback('数量必须大于0');
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }
          ]"
        > 
          <span v-if="dialogType === 'view'">{{ scope.row.totalCount }}</span>
          <el-input v-else v-model="scope.row.totalCount" type="number" @input="updateTotalPrice(scope.row)"></el-input>
        </el-form-item>
      </template>

      </ele-pro-table>
    </el-form>
  </div>
</template>
<script>
  export default {
    name: 'tableInfo',
    components: {},
    props: {
      form: {
        type: Object,
        default: () => {
          return {
            detailList: []
          };
        }
      },
      dialogType: {
        type: String,
        default: ''
      },
      isOtherSourceFlag: {
        type: Boolean,
        default: false
      },
      contactData: {
        type: Object,
        default: () => {
          return {};
        }
      },
      invoiceAmount: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        columns: [
          {
            width: 45,
            type: 'index',
            columnKey: 'index',
            align: 'center',
            fixed: 'left'
          },

          // {
          //   width: 100,
          //   prop: 'typeName',
          //   label: '类型',
          //   slot: 'typeName',
          //   align: 'center'
          // },
          // {
          //   minWidth: 100,
          //   prop: 'sourceCode',
          //   label: '类型编码',
          //   slot: 'sourceCode',
          //   align: 'center'
          // },
          // {
          //   width: 100,
          //   prop: 'productCategoryName',
          //   label: '分类',
          //   slot: 'productCategoryName',
          //   align: "center"
          // },
          {
            width: 100,
            prop: 'productCode',
            label: '产品编码',
            align: "center"
          },
          {
            minWidth: 100,
            prop: 'productName',
            label: '产品名称',
            align: 'center'
          },
          {
            minWidth: 100,
            prop: 'batchNo',
            label: '批次号',
            align: 'center'
          },
          {
            minWidth: 100,
            prop: 'specification',
            label: '规格',
            align: 'center'
          },
          {
            minWidth: 100,
            prop: 'modelType',
            label: '型号',
            align: 'center'
          },
          {
            minWidth: 100,
            prop: 'colorKey',
            label: '颜色',
            align: 'center'
          },
          {
            width: 100,
            prop: 'totalCount',
            label: '数量',
            slot: 'totalCount',
            align: 'center',
          },

          {
            width: 100,
            prop: 'measuringUnit',
            label: '计量单位',
            slot: 'measuringUnit',
            align: 'center'
          },
          {
            width: 80,
            prop: 'singleWeight',
            label: '重量',
            align: 'center'
          },
          {
            width: 80,
            prop: 'singleWeight',
            label: '重量单位',
            align: 'center'
          },
          {
            width: 150,
            prop: 'pricingWay',
            label: '计价方式',
            formatter: (row, column) => {
              return row.pricingWay == 1
                ? '按数量计价'
                : row.pricingWay == 2
                ? '按重量计价'
                : '';
            },
            align: 'center'
          },
          {
            minWidth: 80,
            prop: 'singlePrice',
            label: '工艺路线',
            slot: 'singlePrice',
            align: 'center'
          },
          {
            minWidth: 80,
            prop: 'singlePrice',
            label: '单价',
            slot: 'singlePrice',
            align: 'center'
          },
          
          {
            minWidth: 80,
            prop: 'taxRate',
            slot: 'taxRate',
            label: '税率',
            align: 'center',
            formatter: (_row, _column, cellValue) => {
              return _row.taxRate
                ? _row.taxRate+'%'
                : '';
            },
          },
          {
            minWidth: 80,
            prop: 'singlePrice',
            label: '不含税单价',
            slot: 'singlePrice',
            align: 'center'
          },
          {
            minWidth: 80,
            prop: 'totalPrice',
            label: '合计',
            slot: 'totalPrice',
            align: 'center'
          },
          {
            minWidth: 80,
            prop: 'totalPrice',
            label: '折让比例',
            slot: 'totalPrice',
            align: 'center'
          },
          {
            minWidth: 80,
            prop: 'totalPrice',
            label: '折让单价',
            slot: 'totalPrice',
            align: 'center'
          },
          {
            minWidth: 80,
            prop: 'totalPrice',
            label: '折让合计',
            slot: 'totalPrice',
            align: 'center'
          },
          {
            minWidth: 80,
            prop: 'action',
            label: '操作',
            slot: 'action',
            align: 'center'
          },
          // {
          //   width: 100,
          //   prop: 'sourceType',
          //   label: '来源类型',
          //   slot: 'sourceType',
          //   align: "center",
          //   formatter: (row, column) => {
          //     return row.sourceType == 2 ? '对账销售订单' : '对账采购订单';
          //   }
          // },
        ],
        tableForm: {
          detailList: [],
          link: []
        },
        typeList: [
          {
            label: '销售发货',
            value: '10'
          },
          {
            label: '销售退货',
            value: '11'
          },
          {
            label: '采购收货',
            value: '20'
          },
          {
            label: '采购退货',
            value: '21'
          }
        ],
      };
    },
    mounted() {
      this.tableForm = this.form;
    },
    watch: {
      form(val) {
        this.tableForm = this.form;
      }
    },
    methods: {
      //获取选择的对账单数据
      async getAccountData(params) {
        if (params.children.orderType == 6) {
          this.tableForm.detailList = params.children.detailList;
          this.tableForm.detailList.forEach((item, index) => {
            item.sourceCode = params.children.orderNo;
            item.sourceId = params.children.id;
            item.sourceType = params.type == 1 ? 2 : 3;
            item.type = 12;
            item.singlePrice = item.discountSinglePrice;
            item.totalPrice = item.discountTotalPrice;
            item.typeName = '销售赔付';
          });
        } else {
          this.tableForm.detailList = [];
          params.children.subList.forEach((item, index) => {
            item.detailList.forEach((i, n) => {
              i.sourceCode = item.statementSubOrderCode;
              i.sourceId = params.children.id;
              i.sourceType = params.type == 1 ? 2 : 3;
              i.type = item.subType;
              console.log(item.subType);
              i.typeName = this.typeList.find(
                (i) => i.value == item.subType
              ).label;
              // i.singlePrice = item.discountSinglePrice
              i.totalPrice = i.discountTotalPrice;
            });
            this.tableForm.detailList.push(...item.detailList);
          });
          this.$refs.table.reload();
        }
        this.$emit(
          'setPrice',
          params.children.amountTotalPrice - this.invoiceAmount
        );
        let row = {
          id: params.id,
          name: params.statementNo,
          code: params.statementNo,
          linkType: params.type == 1 ? 190 : 290,
          linkTypeName: params.type == 1 ? '销售对账单' : '采购对账单'
        };
        this.setSelectData(row);
      },
      setValue(data) {
        this.tableForm.detailList = data;
      },
      clearTable() {
        this.tableForm = {
          detailList: [],
          link: []
        };
      },
      // 当数量变化时更新金额
      updateTotalPrice(row) {
        if (row.totalCount && row.singlePrice) {
          row.totalPrice = (parseFloat(row.totalCount) * parseFloat(row.singlePrice)).toFixed(2);
        }
      },
      getTableValidate() {
        return new Promise((resolve, reject) => {
          if (
            this.tableForm.detailList.length == 0 &&
            ![4, 5].includes(this.form.sourceType)
          )
            return this.$message.warning('请选择关联信息');
          resolve(this.tableForm);
        });
      },
      validateForm(callback) {
        //开始表单校验
        this.$refs.form.validate((valid, obj) => {
          if (obj) {
            let messages = Object.keys(obj).map((key) => obj[key][0]);
            if (messages.length > 0) {
              this.$message.warning(messages[0].message);
            }
          }
          callback(valid);
        });
      },
      setSelectData(val) {
        this.tableForm.link = [{}];
        this.$set(this.tableForm.link[0], 'linkId', val.id);
        this.$set(this.tableForm.link[0], 'linkName', val.name);
        this.$set(this.tableForm.link[0], 'linkCode', val.code);
        this.$set(this.tableForm.link[0], 'linkType', val.linkType);
        this.$set(this.tableForm.link[0], 'linkTypeName', val.linkTypeName);
      },
      getTableData() {}
    }
  };
</script>

<style scoped lang="scss">
.time-form .el-form-item {
  margin-bottom: 0 !important;
}
</style>