cv-table-editor 商品表格

简要

• 商品开单用

示例

::: demo

<template>
  <div>
    <div style="margin: 20px auto">
      <cvTableEditor v-model="tableEditData" :tableConfig="tableEditConfig" show-summary :summary-method="getSummaries">
        <cvTbColumnIndex />
        <cvTbEditOpt :tableData="tableEditData" />
        <cvTbEditSearch label="商品" prop="row_name" width="250" @apiFunc="searchApiFunc">
          <template v-slot="{ item }">
            <div class="droplist-item">
              <div class="name">
                {{ item.row_name }}
                <div class="attr" v-if="item.row_attr">[ {{ item.row_attr }}]</div>
              </div>
              <div class="price">¥ {{ item.row_price }}</div>
              <div class="rest">{{ item.attr_stock }}</div>
            </div>
          </template>
        </cvTbEditSearch>
        <cvTbColumnText label="仓库" prop="row_store" width="80" align="center" />
        <cvTbColumnText label="计量单位" prop="unit_name" width="80" align="center" />
        <cvTbEditText label="单价" prop="row_price" width="90" align="right" toFixed="2" />
        <cvTbEditText label="数量" prop="row_num" width="80" align="right" sortable="true" />
        <cvTbEditText label="赠送数量" prop="row_givenum" width="70" align="right" />
        <cvTbColumnText label="金额" prop="row_amount" width="105" align="right" />
        <cvTbEditText label="商品折扣" prop="row_discount" width="75" align="right" />
        <cvTbColumnText label="折扣额" prop="row_disamount" width="105" align="right" />
        <cvTbEditText label="商品优惠金额" prop="row_youhui" width="120" align="right" />
        <cvTbEditText label="税率(%)" prop="row_tax" width="75" align="right" />
        <cvTbColumnText label="税额" prop="row_taxrate" width="100" align="right" />
        <cvTbColumnText label="合计" prop="row_heji" width="105" align="right" fixed="right" />
      </cvTableEditor>
      <div style="height: 20px"></div>
      <cv-form-inline label-width="120px">
        <cv-row>
          <cv-form-item label="订单折扣">
            <cv-input-number v-model="ftfData.pay_discount">
              <template #append>%</template>
            </cv-input-number>
          </cv-form-item>
          <cv-form-item label="订单折扣金额">
            <cv-input-number v-model="ftfData.pay_zhekou">
              <template #prepend>¥</template>
            </cv-input-number>
          </cv-form-item>
          <cv-form-item label="订单优惠金额">
            <cv-input-number v-model="ftfData.pay_youhui">
              <template #prepend>¥</template>
            </cv-input-number>
          </cv-form-item>
        </cv-row>
        <cv-row>
          <cv-form-item label="订单税率">
            <cv-input-number>
              <template #append>%</template>
            </cv-input-number>
          </cv-form-item>
          <cv-form-item label="订单税额">
            <cv-input-number>
              <template #prepend>¥</template>
            </cv-input-number>
          </cv-form-item>
        </cv-row>
        <!-- htmls += '<div class="item-warp cto-clear">';
      htmls += ' <div class="item" style="width:170px"><label>：</label>';
      var initData = this.settings.payInitData;
      var pay_discount = initData.pay_discount || 0;
      pay_discount = parseFloat(pay_discount).toFixed(2);
      var pay_youhui = initData.pay_youhui || 0;
      pay_youhui = parseFloat(pay_youhui).toFixed(2); -->

        <!-- 总报价、总折扣、总优惠 -->
        <cv-form-item label="总报价金额">
          <cv-input-number :value="ftfData.pay_allbaojia" disabled>
            <template #prepend>¥</template>
          </cv-input-number>
        </cv-form-item>
        <cv-form-item label="总折扣金额">
          <cv-input-number :value="ftfData.pay_allzhekou" disabled>
            <template #prepend>¥</template>
          </cv-input-number>
        </cv-form-item>
        <cv-form-item label="总优惠金额">
          <cv-input-number :value="ftfData.pay_allyouhui" disabled>
            <template #prepend>¥</template>
          </cv-input-number>
        </cv-form-item>
        <cv-form-item label="最终合计">
          <cv-input-number :value="ftfData.pay_total" disabled>
            <template #prepend>¥</template>
          </cv-input-number>
        </cv-form-item>
      </cv-form-inline>
    </div>
  </div>
</template>
<script>
var testList = {
  msg: '请求mock数据成功',
  status: 200,
  pagesize: 10,
  page: 1,
  pagemax: 5,
  total: 50,
  data: [
    { row_name: '商品名称', row_store: '仓库A', unit_name: '个', row_price: '12.00', row_num: '3' },
    { row_name: '物料1', row_store: '仓库B', unit_name: '个' },
    { row_name: '物料2', row_store: '仓库C', unit_name: '片' },
    { row_name: '物料3', row_store: '仓库D', unit_name: '条' },
    { row_name: '物料4', row_store: '仓库E', unit_name: '箱' },
    { row_name: '物料5', row_store: '仓库C', unit_name: '个' },
    { row_name: '物料6', row_store: '仓库B', unit_name: '个' }
  ]
};
export default {
  data() {
    return {
      //折上折开启,开启总报价，订单据折扣，订单优惠
      openPayAllCalc: true,
      // 折上折
      ftfData: {
        pay_discount: '0.00',
        pay_zhekou: '0.00',
        pay_youhui: '0.00',
        pay_allbaojia: '0.00',
        pay_allzhekou: '0.00',
        pay_allyouhui: '0.00',
        pay_total: '0.00'
      },

      formData: {},
      tableEditData: testList.data,
      tableEditConfig: {
        apiUrl: '',
        where: {},
        priceOpen: true,
        // 修改价格
        priceFunc: '/comgoods/goodsapi/getAjaxGoodsHistoryPrice',
        priceParam: {
          order_allsign: 'StoreBuy',
          price_type: 'goods_price_cost'
        },
        priceChangeUrl: '/comgoods/goodsapi/pricechangeupdate'
      },
      // searchFunc: this.$request.flagGet('BV4_GOODS_ATTRSKU'),
      searchParam: {},
      searchField: {
        row_price: 'attr_price_market',
        row_stock: 'attr_stock',
        row_unit: 'units_name',
        row_attr: 'attr_value',
        row_name: 'goods_name',
        row_id: 'attr_id',
        row_sn: 'goods_sn'
      }
    };
  },
  watch: {
    tableEditData(newVal) {
      console.log('----tableEditData-----最后的数据:', newVal);
      // this.parseData();
    }
  },
  created() {
    // if (initData != "") {
    //   initData = $.parseJSON(initData);
    // }
  },
  methods: {
    searchApiFunc() {
      // this.$request.flagGet()
    },
    /**
     * 商品合计
     */
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      //   console.log(data);
      columns.forEach((column, index) => {
        let columnProp = column.property || '';
        const values = data.map((item) => Number(item[column.property]));
        switch (columnProp) {
          case 'row_name':
            sums[index] = '总计：';
            break;
          case 'row_num':
            sums[index] = this.doJisuanDantiao(values);
            break;
          case 'row_amount':
          case 'row_disamount':
          case 'row_youhui':
          case 'row_taxrate':
          case 'row_heji':
            sums[index] = this.doJisuanDantiao(values);
            sums[index] = parseFloat(sums[index]).toFixed(2);
            break;
          default:
            sums[index] = '';
            break;
        }
      });
      return sums;
    },
    doJisuanDantiao(values) {
      let jieguo = '';
      if (!values.every((value) => isNaN(value))) {
        jieguo = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        // jieguo += ' 元';
      } else {
        jieguo = 'N/A';
      }
      return jieguo;
    },
    parseData() {
      let lastData = [];
      let newData = [];
      for (let i in this.localTableData) {
        let newItem = this.localTableData[i];
        newItem['row_num'] = parseInt(newItem['row_num']);
        let row_amount = parseFloat(newItem['row_num'] * newItem['row_price']).toFixed(2);
        newItem['row_amount'] = row_amount;
        let row_youhui = 0;
        let row_disamount = 0;
        newItem['row_heji'] = parseFloat(row_amount - row_youhui - row_disamount).toFixed(2);

        newData.push(newItem);
        console.log(newItem.row_id);
        if (newItem.row_id) {
          lastData.push(newItem);
        }
      }
      this.localTableData = newData;
    }
  }
};
</script>

:::