order-ui-pc/src/views/good-share/index.vue

<template>
  <div class="good-share" v-loading="loading">
    <div class="left">
      <div class="title">项目信息</div>
      <ul class="clear" v-show="sitem">
        <li>总预算：</li>
        <li>{{ sitem.budget_total }}元</li>
        <li>要求到货日期：</li>
        <li>{{ sitem.arrtime }}</li>
        <li>业务员：</li>
        <li>{{ sitem.creater }}</li>
        <li>购买方：</li>
        <li>
          {{ sitem.company }}
        </li>
        <li>项目编号：</li>
        <li>{{ sitem.projectNo }}</li>
        <li>项目名称：</li>
        <li>{{ sitem.project_name }}</li>

        <li>项目用途：</li>
        <li>
          {{ sitem.use_desc }}
        </li>
      </ul>
    </div>
    <div class="right">
      <back-good-show
        v-if="newTime !== ''"
        :newTime="newTime"
        :sitem="sitem"
        @tableChange="tableChange"
      />
    </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
            max-height="170px"
            :size="'mini'"
            style="width: 100%"
          >
            <el-table-column label="商品要求" type="index" 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="address"
              label="分类"
              show-overflow-tooltip
            />
            <el-table-column
              prope="address"
              label="购买数量"
              show-overflow-tooltip
            />
            <el-table-column
              prope="address"
              label="预算单价"
              show-overflow-tooltip
            />
            <el-table-column
              prope="address"
              label="预算单价"
              show-overflow-tooltip
            />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/service/good-share";
import resToken from "@/mixins/resToken";
import backGoodShow from "./components/backGoodShow";
export default {
  name: "goodShare",
  mixins: [resToken],
  components: {
    backGoodShow,
  },
  data() {
    return {
      currentRow: null,
      loading: true,
      status: "",
      radio: "",
      sitem: {},
      queryId: "PROa8gi220310202256",
      multipleSelection: [],
      tableData: [],
      newTime: "",
    };
  },

  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      this.loading = true;
      const { code, message, data } = await asyncRequest.detail({
        projectNo: this.queryId,
      });
      this.loading = false;
      if (code === 0) {
        this.sitem = JSON.parse(JSON.stringify(data));
        const { status } = this.sitem;
        this.status = status;
        this.getNewTime();
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
    tableChange(e) {
      console.log(e);
      const { list } = e;
      this.tableData = JSON.parse(JSON.stringify(list));
    },
    async submitForm() {
      this.loading = true;

      let list = JSON.parse(JSON.stringify(this.tableData));
      let model = {
        feedid: [],
      };
      list.forEach((a) => {
        model.feedid.push(a.id);
      });

      let { code, data, message } = await asyncRequest.back_good_submit(model);
      console.log(res);
      this.loading = false;
      if (code === 0) {
        this.$notify.success({
          title: "提交成功！",
          message: "",
        });
        this.showModelThis = false;
        // 刷新
        this.$emit("refresh");
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.good-share {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 1200px;
  min-height: 100%;
  background: #f2f2f2;
  box-sizing: border-box;
  padding: 16px;
  .left {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    width: 240px;
    min-height: calc(100% - 32px);
    height: calc(100% - 32px);
    background: #fff;

    .title {
      height: 50px;
      line-height: 50px;
      font-size: 18px;
      font-weight: bold;
      box-sizing: border-box;
      color: #565656;
      padding: 0 16px;
      border-bottom: 1px solid #f2f2f2;
    }
    ul {
      padding: 16px;
      box-sizing: border-box;
      li {
        line-height: 32px;
        font-size: 14px;

        &:nth-child(2n + 1) {
          text-align: left;
          float: left;
        }
        &:nth-child(2n + 2) {
          width: 100%;
          text-align: right;
        }
      }
    }
  }
  .right {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    background: #fff;
    width: calc(100% - 288px);
    min-height: calc(100% - 288px);
    height: calc(100% - 248px);
    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-bottom: 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;
      }
      &:last-child {
        border-bottom: 1px solid #f2f2f2;
        // .table-main-index {

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

      // }
      // .table-main-last {
      //   border-bottom: 1px solid #f2f2f2;
      // }
      // }
    }
  }
}
</style>