order-ui-pc/src/views/sellOut/project/components/backGoodShow.vue

<template>
  <div class="project-backGoodShow" v-loading="loading">
    <div
      v-for="(item, index) in allList"
      :key="item.title + index"
      class="project-backGoodShow-main"
    >
      <div class="project-backGoodShow-title">商品要求{{ index + 1 }}</div>
      <div class="project-backGoodShow-ask-table">
        <template v-if="item.ladder">
          <el-table
            :data="item.ladder"
            :size="'mini'"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column prop="good_type" label="商品类型" width="80px">
              <template slot-scope="scope">
                <el-tag
                  :size="'mini'"
                  v-text="
                    (
                      statusOptions.find(
                        (item) => item.value == scope.row.good_type
                      ) || {}
                    ).label || '--'
                  "
                ></el-tag
              ></template>
            </el-table-column>
            <el-table-column prop="budget_price" label="预算单价" width="110" />
            <el-table-column prop="num" label="购买数量" width="110" />
            <el-table-column prop="cat_name" label="商品分类" />
            <el-table-column prop="good_img" label="图片" width="50">
              <template slot-scope="scope">
                <div
                  v-if="scope.row.good_img"
                  style="width: 20px; height: 20px"
                  class="hover"
                  v-viewer
                >
                  <img
                    :src="scope.row.good_img"
                    style="display: inline-block; width: 100%; height: 100%"
                    alt=""
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="good_name" label="商品名称" />
          </el-table>
        </template>
      </div>
      <div class="project-backGoodShow-title">
        商品反馈情况
        <el-tooltip
          effect="dark"
          class="fr"
          content="添加线上商品"
          style="margin: 16px 10px 0 0"
          placement="top"
        >
          <i class="el-icon-zoom-in tb-icon" @click="addId(index)"></i>
        </el-tooltip>
      </div>
      <div class="project-backGoodShow-backGood-table">
        <template v-if="item.tableData">
          <ex-table
            v-loading="item.loading"
            :table="table"
            :data="item.tableData"
            :columns="columns"
            :page="item.pageInfo"
            :size="'mini'"
            @page-curr-change="handlePageChange($event, index)"
            @page-size-change="handleSizeChange($event, index)"
            @screen-reset="
              item.pageInfo.curr = 1;
              item.page = 1;
              searchList(index);
            "
            @screen-submit="
              item.pageInfo.curr = 1;
              item.page = 1;
              searchList(index);
            "
          >
            <template #operation="{ scope }">
              <el-tooltip
                effect="dark"
                content="删除"
                placement="top"
                v-if="scope.row.data_source === '1' && status==='1'"
              >
                <i
                  class="el-icon-delete tb-icon"
                  @click="deleteId(scope.row.id, index)"
                ></i>
              </el-tooltip>
            </template>
          </ex-table>
        </template>
      </div>
    </div>
    <search-good-online-table-modal
      :showModel="showModel"
      :sitem="searchItem"
      @cancel="showModel = false"
      @submitRes="resetFormData"
    />
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/sellOut/project";
import resToken from "@/mixins/resToken";
import columnsForm from "./columnsForm";
import searchGoodOnlineTableModal from "./search-good-online-table-modal";
export default {
  name: "backGoodShow",
  props: ["showModel", "sitem", "id", "type"],
  mixins: [resToken],
  components: {
    searchGoodOnlineTableModal,
  },
  watch: {
    // showModel: function (val) {
    //   this.showModelThis = val;
    //   if (val) {
    //     this.initForm();
    //   }
    // },
    // showModelThis(val) {
    //   if (!val) {
    //     this.$emit("cancel");
    //   }
    // },
  },
  data() {
    return {
      showModel: false,
      searchItem: {},
      loading: false,
      allList: [],
      status: "",
      projectNo: "",
      statusOptions: [
        { value: "1", label: "竞品" },
        { value: "2", label: "竞聘" },
      ],
      table: {
        stripe: true,
        border: true,
        // _defaultHeader_: ["setcol"],
      },
      // 表格 - 列参数
      columns: columnsForm,
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    //初始化整个组件
    async initForm() {
      this.loading = true;
      await this.initListData();
      this.loading = false;
      console.log(this.allList);
      await this.allSearchList();
    },
    async resetFormData(index) {
      this.allList[index].pageInfo = {
        size: 15,
        curr: 1,
        total: 0,
      };
      this.allList[index].loading = true;
      this.allList[index].tableData = [];
      await this.searchList(index);
    },
    //初始化整个组件
    async initListData() {
      console.log(this.sitem);
      this.allList = [];
      const { projectNo, ladder, status } = this.sitem;
      this.status = status;
      this.projectNo = projectNo;
      if (ladder && ladder.length > 0) {
        ladder.forEach((e) => {
          let item = JSON.parse(JSON.stringify(e));
          console.log(item);
          let model = {
            ladder: [item],
            pageInfo: {
              size: 15,
              curr: 1,
              total: 0,
            },
            pgNo: item.pgNo,
            loading: false,
            tableData: [],
          };
          this.allList.push(model);
        });
      }
    },
    async allSearchList() {
      if (this.allList && this.allList.length > 0) {
        this.allList.forEach(async (e, i) => {
          await this.searchList(i);
        });
      }
    },
    //页数选择
    async handlePageChange(e, index) {
      this.allList[index].pageInfo.curr = e;
      await this.searchList(index);
    },
    //页面条数选择
    async handleSizeChange(e, index) {
      this.allList[index].pageInfo.curr = 1;
      this.allList[index].pageInfo.size = e;
      await this.searchList(index);
    },
    async searchList(index) {
      const { pageInfo, pgNo } = this.allList[index];
      const { size, curr } = pageInfo;
      this.allList[index].loading = true;
      let model = {
        page: curr,
        size: size,
        zxNo: "",
        infoNo: "",
        bidNo: "",
        pgNo: pgNo,
        projectNo: this.projectNo,
      };
      const { code, data } = await asyncRequest.back_good_list(model);
      if (code === 0) {
        const { list, count } = data;
        this.allList[index].tableData = list;
        //  this.allList[index].tableData.map((v) => {
        //     v.class_cat = "";
        //     if (v.can && v.can.length > 0) {
        //       v.can.forEach((x, i) => {
        //         v.class_cat += i === 0 ? x.name : "/" + x.name;
        //       });
        //     }
        //     return v;
        //   });
        this.allList[index].pageInfo.total = Number(count);
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.allList[index].tableData = [];
        this.allList[index].pageInfo.total = 0;
      }
      this.allList[index].loading = false;
    },
    addId(index) {
      let ladder = JSON.parse(JSON.stringify(this.allList[index].ladder));
      this.searchItem = ladder[0];
      this.searchItem.platform_code = this.sitem.platform_code;
      this.searchItem.platform_id = this.sitem.platform_id;
      this.searchItem.platform_name = this.sitem.platform_name;
      this.searchItem.company = this.sitem.company;
      this.searchItem.companyNo = this.sitem.companyNo;
      this.searchItem.pgNo_index = index;
      this.showModel = true;
    },
    async deleteId(id, index) {
      await this.$confirm("确定要删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const model = {
            id: [id],
          };
          const res = await asyncRequest.project_online_good_del(model);
          if (res && res.code === 0) {
            this.$notify.success({
              title: "删除成功",
              message: "",
            });
            this.searchList(index);
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        })
        .catch(() => {
          console.log("取消");
        });
    },
  },
};
</script>

   <style lang="scss" scoped>
.project-backGoodShow {
  box-sizing: border-box;
  width: 100%;

  .project-backGoodShow-main {
    padding: 2px 16px 16px 16px;
    // background: #fefefe;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    margin: 0 0 16px 0;
    .project-backGoodShow-title {
      height: 48px;
      line-height: 48px;
      color: #676767;
    }
  }
}
</style>