dy-admin-manager/src/views/resetTeaming/goodsModal/payGoodsInfo.vue

<template>
  <div class="teamCourseList">
    <p class="coreTitle" style="margin-top: 0">商品采购</p>

    <div style="padding: 10px 20px">
      <el-table
        class="courseTable"
        :data="form.calenderGoodsList"
        style="width: 100% !important; background: #f9f9f9;"
        :header-cell-style="{ background: '#F9F9F9', color: '#444' }"
      >
        <el-table-column width="170px" label="商品名称">
          <template slot-scope="scope">
            <tooltip :content="scope.row.goodsName" />
          </template>
        </el-table-column>
        <el-table-column width="170px" label="商品货号" prop="goodsSn">
        </el-table-column>
        <el-table-column width="170px" label="采购价格" prop="singlePrice">
          <template slot-scope="scope">
            {{ scope.row.singlePrice | moneyFormat }}
          </template>
        </el-table-column>
        <el-table-column width="170px" label="采购数量">
          <template slot-scope="scope">
            <el-form-item
              :prop="'calenderGoodsList.' + scope.$index + '.num'"
              :rules="{
                required: true,
                message: '请输入采购数量',
                trigger: 'change'
              }"
            >
              <el-input-number
                style="width: 90% !important"
                class="number-input"
                v-model="form.calenderGoodsList[scope.$index].num"
                :controls="false"
                :precision="0"
                :min="0"
                placeholder="请输入采购数量"
                @change="onChangeNum(scope.$index)"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column width="170px" label="总价格" prop="totalPrice">
          <template slot-scope="scope">
            {{ scope.row.totalPrice | moneyFormat }}
          </template>
        </el-table-column>
        <el-table-column width="170px" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click.prevent="removeGoodsList(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button
        icon="el-icon-circle-plus-outline"
        plain
        type="info"
        style="width: 100%;margin: 10px 0 10px;"
        @click="addGoodsList"
        >添加商品</el-button
      >
    </div>

    <el-dialog
      title="添加商品"
      :visible.sync="recordStatus"
      :close-on-click-modal="false"
      width="1200px"
      append-to-body
      v-if="recordStatus"
    >
      <addShopGoods
        :courseViewType="courseViewType"
        :organId="organId"
        :disabledIds="disabledIds"
        @close="recordStatus = false"
        @confirm="onConfirm"
        :categoryList="categoryList"
        :goodsBrand="goodsBrand"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  api_queryGoodsCategoryList,
  api_queryGoodsBrandList
} from "@/api/businessManager";
import addShopGoods from "./addShopGoods";
export default {
  components: {
    addShopGoods
  },
  props: ["form", "courseViewType", "organId"],
  data() {
    return {
      disabledIds: [],
      recordStatus: false,
      categoryList: [],
      goodsBrand: []
    };
  },
  mounted() {
    this.getCategory();
    this.getGoodsBrand();
  },
  methods: {
    removeGoodsList(item) {
      const index = this.form.calenderGoodsList.indexOf(item);
      if (index !== -1) {
        this.form.calenderGoodsList.splice(index, 1);
      }
    },
    onChangeNum(index) {
      const form = this.form.calenderGoodsList[index];
      this.form.calenderGoodsList[index].totalPrice =
        Number(form.singlePrice) * Number(form.num);
    },
    /** 商品分类 */
    async getCategory() {
      let params = {
        // delFlag: 0,
        rows: 9999
      };
      try {
        const { data } = await api_queryGoodsCategoryList(params);
        console.log(data, "data");
        const result = data || [];
        let tempArray = [];
        result.forEach(row => {
          tempArray.push({
            label: row.name,
            value: row.id
          });
        });
        this.categoryList = tempArray;
      } catch {}
    },
    /** 商品品牌 */
    async getGoodsBrand() {
      try {
        const { data } = await api_queryGoodsBrandList({ rows: 999 });

        const result = data || [];
        let tempArray = [];
        result.forEach(row => {
          tempArray.push({
            label: row.name,
            value: row.id
          });
        });
        this.goodsBrand = tempArray;
      } catch {}
    },
    async addGoodsList() {
      // 添加商品
      const ids = [];
      this.form.calenderGoodsList.forEach(goods => {
        ids.push(goods.id);
      });
      this.disabledIds = ids;
      this.recordStatus = true;
    },
    onConfirm(list) {
      const goodsList = [];
      console.log(list, this.form.calenderGoodsList, "list");
      (list || []).forEach(item => {
        const index = this.form.calenderGoodsList.findIndex(
          goods => goods.id == item.id
        );
        if (index == -1) {
          goodsList.push({
            id: item.id,
            goodsName: item.name,
            goodsId: item.id,
            goodsSn: item.sn,
            num: 0,
            singlePrice: item.discountPrice,
            totalPrice: 0
          });
        }
      });
      this.form.calenderGoodsList.push(...goodsList);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/views/resetTeaming/modals/pay.scss";
::v-deep .infoWrap {
  padding: 10px;
  .el-form-item__label {
    display: block !important;
    text-align: left;
    padding-left: 10px;
  }
  .vertical {
    margin-top: 0px !important;
  }
  .el-input-number {
    width: 180px;
    .el-input__inner {
      text-align: left;
    }
  }
}
.number-input {
  ::v-deep .el-input__inner {
    text-align: left;
  }

  width: 100%;
}
.memoWrap {
  width: 860px;
  .memoWrapItem {
    display: block;
    ::v-deep .el-form-item__content {
      display: inline-block;
      width: calc(100% - 140px);
    }
  }
}
</style>