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

<template>
  <div class="project-setPlan" v-loading="loading">
    <div class="project-setPlan-main">
      <div class="project-setPlan-title">商品要求</div>
      <div class="project-setPlan-ask-table">
        <template v-if="ladder">
          <el-table
            :data="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-setPlan-title">客户反馈商品情况</div>
      <div class="project-setPlan-backGood-table">
        <template v-if="tableData">
          <ex-table
            v-loading="loading"
            :table="table"
            :data="tableData"
            :columns="columns"
            :page="pageInfo"
            :size="'mini'"
            @page-curr-change="handlePageChange($event)"
            @page-size-change="handleSizeChange($event)"
            @screen-reset="
              pageInfo.curr = 1;
              page = 1;
              searchList();
            "
            @screen-submit="
              pageInfo.curr = 1;
              page = 1;
              searchList();
            "
          >
            <template #operation="{ scope }">
              <el-tooltip
                effect="dark"
                content="删除"
                placement="top"
                v-if="scope.row.data_source === '1'"
              >
                <i
                  class="el-icon-delete tb-icon"
                  @click="deleteId(scope.row.id)"
                ></i>
              </el-tooltip>
            </template>
          </ex-table>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/sellOut/project";
import resToken from "@/mixins/resToken";
import columnsForm from "./columnsForm";
export default {
  name: "setPlan",
  props: ["showModel", "sitem", "id", "type"],
  mixins: [resToken],
  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,
      ladder: [],
      //   allList: [],
      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;
    },
    async resetFormData() {
      this.pageInfo = {
        size: 15,
        curr: 1,
        total: 0,
      };
      this.loading = true;
      this.tableData = [];
      await this.searchList();
    },
    //初始化整个组件
    async initListData() {
      console.log(this.sitem);
      const { projectNo, ladder } = this.sitem;
      this.projectNo = projectNo;
      this.ladder = JSON.parse(JSON.stringify(ladder));
      this.pageInfo = {
        size: 15,
        curr: 1,
        total: 0,
      };
      this.tableData = [];
      await  this.searchList()
    },
    //页数选择
    async handlePageChange(e) {
      this.pageInfo.curr = e;
      await this.searchList();
    },
    //页面条数选择
    async handleSizeChange(e) {
      this.pageInfo.curr = 1;
      this.pageInfo.size = e;
      await this.searchList();
    },
    async searchList() {
      const { size, curr } = this.pageInfo;
      this.loading = true;
      let model = {
        page: curr,
        size: size,
        zxNo: "",
        infoNo: "",
        bidNo: "",
        status: "1",
        pgNo: "",
        projectNo: this.projectNo,
      };
      const { code, data } = await asyncRequest.back_good_list(model);
      if (code === 0) {
        const { list, count } = data;
        this.tableData = list;
        this.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.pageInfo.total = Number(count);
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
      }
      this.loading = false;
    },
  },
};
</script>

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

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