order-ui-pc/src/views/good-share/components/changeBackGood.vue

<template>
  <div class="choice-goods">
    <div class="top">
      <div v-if="allList[index]">
        <div class="project-backGoodShow" v-loading="allList[index].loading">
          <div class="project-backGoodShow-main">
            <div class="project-backGoodShow-title">
              商品要求{{ index + 1 }}
              <el-button-group
                :size="'mini'"
                class="fr"
                style="margin: 8px 0 0 0"
              >
                <el-button
                  class="fr"
                  v-if="index !== 0"
                  type="primary"
                  :size="'mini'"
                  icon="el-icon-arrow-left"
                  @click="index--"
                  >上一个</el-button
                >
                <el-button
                  type="primary"
                  class="fr"
                  v-if="index + 1 !== allList.length"
                  @click="next()"
                  :size="'mini'"
                  >下一个<i
                    class="el-icon-arrow-right el-icon--right"
                    :size="'mini'"
                  ></i
                ></el-button>
                <el-button
                  type="primary"
                  class="fr"
                  @click="next()"
                  v-if="index + 1 === allList.length"
                  :size="'mini'"
                  >提交<i class="el-icon-upload el-icon--right"></i>
                </el-button>
              </el-button-group>
            </div>
            <div class="project-backGoodShow-ask-table">
              <template v-if="allList[index].ladder">
                <el-table
                  :data="allList[index].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(
                              (items) => items.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">商品反馈情况</div>
            <div class="project-backGoodShow-backGood-table">
              <template v-if="allList[index].tableData">
                <!-- allList[index].pageInfo.curr = 1;
                searchList(index); 
                
              -->
                <ex-table
                  v-loading="allList[index].loading"
                  :table="table"
                  :data="allList[index].tableData"
                  :columns="columns"
                  :page="allList[index].pageInfo"
                  :size="'mini'"
                  @page-curr-change="handlePageChange($event, index)"
                  @page-size-change="handleSizeChange($event, index)"
                  @screen-reset="
                    allList[index].pageInfo.curr = 1;
                    searchList(index);
                  "
                  @screen-submit="
                    allList[index].pageInfo.curr = 1;
                    searchList(index);
                  "
                  @selection="selection_change"
                  
                >
                  <template #good_img="{ 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>
                </ex-table>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="table-main clear">
        <div class="table-main-index" style="padding-top: 40px">
          已选中的商品
        </div>
        <div class="table-main-last">
          <el-table
            :data="tableData"
            border
            height="168px"
            :size="'mini'"
            style="width: 100%"
          >
            <el-table-column label="商品要求" property="noIndex" width="80">
            </el-table-column>
            <el-table-column property="date" label="商品名称" width="145" />
            <el-table-column property="name" label="图片" width="120">
            </el-table-column>
            <el-table-column
              prope="class_cat"
              label="分类"
              show-overflow-tooltip
            />
            <el-table-column
              prope="work_day"
              label="制作工期"
              show-overflow-tooltip
            />
            <el-table-column
              prope="delivery_day"
              label="物流时间"
              show-overflow-tooltip
            />
            <el-table-column fixed="right" label="操作" width="50">
              <template slot-scope="scope">
                <el-tooltip
                  v-if="powers.some((item) => item == '006')"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <i
                    class="el-icon-delete tb-icon"
                    @click="deleteItem(scope.$index)"
                  ></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/good-share";
import resToken from "@/mixins/resToken";
import columnsForm from "./columnsForm";
export default {
  name: "changeBackGood",
  props: ["showModel", "sitem", "id", "type", "newTime"],
  mixins: [resToken],
  watch: {
    // showModel: function (val) {
    //   this.showModelThis = val;
    //   if (val) {
    //     this.initForm();
    //   }
    // },
    // showModelThis(val) {
    //   if (!val) {
    //     this.$emit("cancel");
    //   }
    // },
  },
  data() {
    return {
      loading: false,
      allList: [],
      index: 0,
      projectNo: "",
      status: "",
      statusOptions: [
        { value: "1", label: "竞品" },
        { value: "2", label: "竞聘" },
      ],
      sitemStatusoptions: [
        { value: "1", label: "待商品反馈" },
        { value: "2", label: "待项目反馈商品选择" },
        { value: "3", label: "待项目方案制定" },
        { value: "4", label: "待方案选择" },
        { value: "5", label: "项目结束" },
      ],
      table: {
        stripe: true,
        border: true,
        // _defaultHeader_: ["setcol"],
      },
      // 表格 - 列参数
      columns: columnsForm,
      tableData: [],
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    //初始化整个组件
    async initForm() {
      this.loading = true;
      this.tableData = [];
      await this.initListData();
      console.log(this.allList);
      this.loading = false;
      // console.log(this.allList);
      await this.searchList(this.index);
    },
    async next() {
      const { selection } = this.allList[this.index];
      if (selection.length === 0) {
        this.$message.warning("至少选择一个商品！");
        return;
      }
      if (this.index + 1 !== this.allList.length) {
        this.index++;
        await this.searchList(this.index);
      } else {
        await this.$confirm("确定要保存么？", "商品只能选择一次！", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            await this.submitForm();
          })
          .catch(() => {
            console.log("取消");
          });
      }
    },
    deleteItem(index) {
      let list = JSON.parse(JSON.stringify(this.allList[this.index].selection));
      list.forEach((e, i) => {
        if (e.spuCode === this.tableData[index].spuCode) {
          this.allList[this.index].selection.splice(i, 1);
        }
      });
      this.tableData.splice(index, 1);
    },
    async submitForm() {
      if (!this.loading) {
        this.loading = true;
        let list = JSON.parse(JSON.stringify(this.tableData));
        const model = {
          feedid: [],
        };
        list.forEach((e) => {
          model.feedid.push(e.id);
        });
        let res = await asyncRequest.back_good_submit(model);
        this.loading = false;
        if (res && res.code === 0) {
          this.$notify.success({
            title: "保存成功！",
            message: "",
          });
          this.$emit("refresh");
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(res.message);
        }
      }
    },
    selection_change(e) {
      const { list } = e;
      this.allList[this.index].selection = JSON.parse(JSON.stringify(list));
      let change_all_list = [];
      this.allList.forEach((a, ai) => {
        const { selection } = a;
        if (selection && selection.length > 0) {
          selection.forEach((b) => {
            let item = JSON.parse(JSON.stringify(b));
            item.noIndex = ai + 1;
            change_all_list.push(item);
          });
        }
      });
      this.tableData = JSON.parse(JSON.stringify(change_all_list));
    },

    //初始化整个组件
    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: true,
            selection: [],
            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;
      console.log(pgNo);
      this.allList[index].loading = true;
      let model = {
        page: curr,
        size: size,
        zxNo: "",
        infoNo: "",
        bidNo: "",
        pgNo: pgNo,
        status: this.status === "3" ? "1" : "",
        projectNo: this.projectNo,
      };
      const { code, data } = await asyncRequest.back_good_list(model);
      if (code === 0) {
        const { list, count } = data;
        this.allList[index].tableData = list;
        // 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;
    },
  },
};
</script>

   <style lang="scss" scoped>
.choice-goods {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
  .top {
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 1;
    background: #fff;
    width: 100%;
    min-height: calc(100% - 248px);
    height: calc(100% - 248px);
    box-sizing: border-box;
    padding: 0 16px 16px 16px;
    .project-backGoodShow {
      box-sizing: border-box;
      width: 100%;
      // padding: 2px 16px 16px 16px;

      .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;
        }
      }
    }
  }
  .bottom {
    position: absolute;
    bottom: 16px;
    right: 0;
    z-index: 1;
    background: #fff;
    width: 100%;
    min-height: calc(200px);
    height: calc(200px);
    box-sizing: border-box;
    // padding: 16px;

    .title {
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      font-weight: bold;
      box-sizing: border-box;
      color: #565656;
      padding: 0 16px;
      border-right: 1px solid #f2f2f2;
    }
    .table-main {
      // padding: 16px;
      width: 100%;
      box-sizing: border-box;
      .table-main-index {
        float: left;
        width: 45px;
        padding: 16px;
        text-align: center;
      }
      .table-main-last {
        float: left;
        width: calc(100% - 45px);
        padding: 16px;
        border-left: 1px solid #f2f2f2;
      }
    }
  }
}
</style>