order-client-ui-pc/src/views/workbench/detail.vue

<template>
  <div class="workbenchdetail">
    <div class="page-main clear">
      <div v-if="status !== '1'">
        <search-not :placeholder="'招标任务已结束！'" />
      </div>
      <div v-else>
        <div class="left">
          <div class="left-main">
            <div class="left-card" v-if="sitem">
              <div class="page-main-title">招标任务信息</div>
              <ul class="page-main-ul clear">
                <li>任务单号：</li>
                <li>{{ queryId }}</li>
                <li>截止时间：</li>
                <li>{{ sitem.endtime }}</li>
                <!-- <li>剩余时间：</li>
                <li>2020-09-20 17:00:00</li> -->
                <li>购买数量：</li>
                <li>{{ sitem.num }}{{ sitem.unit_name }}</li>
                <li>预算单价：</li>
                <li>{{ sitem.original_price }}元</li>
                <li>竞价人：</li>
                <li>{{ sitem.salesman }}</li>
                <li>到货时间：</li>
                <li>{{ sitem.arrival_time }}</li>
                <li>客户名称：</li>
                <li>{{ sitem.khname }}</li>
              </ul>
            </div>
            <div class="left-card" v-if="sitem">
              <div class="page-main-title">商品要求</div>
              <ul class="page-main-ul clear">
                <li>商品名称：</li>
                <li>{{ sitem.good_name }}</li>
                <li v-if="sitem.good_img">商品图片：</li>
                <li v-if="sitem.good_img">
                  <img
                    v-viewer
                    :src="sitem.good_img"
                    class="hover"
                    style="width: 20px; height: 20px; display: inline-block"
                  />
                </li>
                <li>商品分类：</li>
                <li>{{ sitem.can_name }}</li>
                <li>商品品牌：</li>
                <li>{{ sitem.brand ? sitem.brand : "无要求" }}</li>
                <li>商品规格：</li>
                <li>
                  <el-table
                    :data="sitem.specinfo"
                    border
                    stripe
                    :size="'mini'"
                    style="width: 100%"
                  >
                    <el-table-column
                      prop="spec_name"
                      label="类型：值"
                      show-overflow-tooltip
                    >
                      <template slot-scope="scope">
                        {{ scope.row.spec_name }}：{{ scope.row.spec_value_name }}
                      </template></el-table-column
                    >
                  </el-table>
                </li>
                <li>总重量：</li>
                <li>{{ sitem.total_weight }}g</li>
                <li>是否多地：</li>
                <li>{{ sitem.is_addrs === "1" ? "多地" : "一地" }}</li>
                <li>是否定制：</li>
                <li>{{ sitem.is_custom === "1" ? "定制" : "非定制" }}</li>

                <li v-if="sitem.is_metal">启用金价：</li>
                <li v-if="sitem.is_metal">
                  {{ sitem.is_gold_price === "1" ? "启用" : "不启用" }}
                </li>
                <li v-if="sitem.is_metal">配置要求：</li>
                <li v-if="sitem.is_metal">{{ sitem.config }}</li>

                <li v-if="sitem.is_metal">金属克重：</li>
                <li v-if="sitem.is_metal">{{ sitem.specs_weight }}g</li>
                <li v-if="sitem.is_metal">其他要求：</li>
                <li v-if="sitem.is_metal">
                  {{ sitem.other_config }}
                </li>
                <li v-if="sitem.is_metal">金属种类：</li>
                <li v-if="sitem.is_metal">
                  {{ sitem.metal_name }}
                </li>

                <li v-if="sitem && sitem.cost_desc">工艺说明：</li>
                <li v-if="sitem && sitem.cost_desc">{{ sitem.cost_desc }}</li>
                <li>产品用途：</li>
                <li>{{ sitem.use_desc }}</li>
                <li>商品备注：</li>
                <li>{{ sitem.remark }}</li>
                <li>商品附件：</li>
                <li v-if="sitem && sitem.enclosure_file">
                  <a :href="sitem.enclosure_file" download="附件" class="fl"
                    >点击下载附件</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="p-right">
          <div v-if="editType == '' || editType == 'wait'" class="right-mian-wait">
            <div class="title">采返工作台</div>
            <div class="main">暂无工作数据！</div>
          </div>
          <template v-else>
            <base-form
              :id="queryId"
              :editId="editId"
              :type="editType"
              :askItem="sitem"
              :sitem="baseSitem"
              :newTime="newTime"
              @refresh="(editType = 'wait'), searchList()"
              @cancel="editType = 'wait'"
              v-if="newTime !== ''"
            />
          </template>
        </div>
        <div class="bottom">
          <el-table :data="tableData" border stripe :size="'mini'" style="width: 100%">
            <!-- <el-table-column
              prop="good_img"
              label="图片"
              width="48"
              show-overflow-tooltip
            >
              <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="商品名称"
              min-width="120"
              show-overflow-tooltip
            />
            <el-table-column
              prop="total_fee"
              label="成本合计"
              width="110"
              show-overflow-tooltip
            />
            <el-table-column
              prop="bargain_status"
              label="采返信息状态"
              width="100"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tag
                  type="''"
                  :size="'mini'"
                  v-if="scope.row.bargain_status === '0' && scope.row.status == '1'"
                  >新建信息</el-tag
                >
                <el-tag type="danger" :size="'mini'" v-else>待确认</el-tag>
              </template></el-table-column
            >

            <el-table-column
              prop="specinfo"
              label="规格"
              width="100"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span v-for="(item, ii) in scope.row.specinfo" :key="item + ii"
                  ><span v-if="ii !== 0">--</span>{{ item.spec_name }}[{{
                    item.spec_value_name
                  }}]</span
                >
              </template></el-table-column
            >

            <el-table-column prop="unit" label="单位" width="45" show-overflow-tooltip />
            <el-table-column
              prop="brand_name"
              label="品牌"
              width="80"
              show-overflow-tooltip
            />

            <el-table-column prop="supplierName" label="供应商" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" width="80">
              <template slot="header" slot-scope="scope">
                <span>操作</span>
                <el-tooltip effect="dark" content="添加反馈商品" placement="top">
                  <i
                    class="el-icon-circle-plus-outline tb-icon fr"
                    @click="openModal('add', 'add')"
                  ></i>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <el-tooltip effect="dark" content="详情" placement="top">
                  <i
                    class="el-icon-view tb-icon"
                    @click="openModal(scope.row.bidNo, 'view')"
                  ></i>
                </el-tooltip>
                <el-tooltip effect="dark" content="修改" placement="top">
                  <i
                    class="el-icon-edit tb-icon"
                    @click="openModal(scope.row.bidNo, 'edit')"
                  ></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import asyncRequest from "@/apis/workbench";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import baseForm from "./components/baseForm";
export default {
  name: "workbenchDetail",
  components: {
    baseForm,
  },

  mixins: [resToken],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
  },
  data() {
    return {
      num: 60,
      timer: null,
      loading: false,
      showModel: false,
      tableData: [],
      baseSitem: {},
      isDetail: false,
      modelId: 0,
      queryId: "",
      status: "",
      sitem: {},
      newTime: "",
      editId: "add",
      editType: "wait",
      parmValue: {
        page: 1,
        size: 100,
        zxNo: "",
        infoNo: "",
        bidNo: "",
        projectNo: "",
        is_own: "1",
      },
    };
  },
  mounted() {
    this.initForm();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    async initForm() {
      this.editType = "wait";
      const { id } = this.$route.query;
      this.queryId = id;
      console.log(this.queryId);
      this.loading = true;

      await this.initData();
      await this.searchList();

      this.loading = false;
    },

    async initData() {
      const { code, message, data } = await asyncRequest.detail({
        infoNo: this.queryId,
      });
      if (code === 0) {
        const { status } = data;
        this.status = status;
        this.sitem = JSON.parse(JSON.stringify(data));

        const { can } = this.sitem;
        this.sitem.is_metal = "";
        this.sitem.can_id_arr = [];
        this.sitem.can_name = "";
        let can_name = "",
          can_id_arr = [],
          is_metal = false;
        can.forEach((e, i) => {
          can_name += i == 0 ? e.name : `_${e.name}`;
          can_id_arr.push(e.id);
          if (e.id === "6") {
            is_metal = true;
          }
        });
        this.sitem.is_metal = is_metal;
        this.sitem.can_id_arr = can_id_arr;
        this.sitem.can_name = can_name;
        this.getNewTime();
        await this.well_timer();
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
    },
    async well_timer() {
      this.timer = setInterval(async () => {
        if (this.num !== 0) {
          this.num--;
        } else {
          if (this.timer) {
            const { code, status, message } = await this.repeat_initData();
            if (code === 0 && status === "1") {
              this.num = 60;
            } else if (code === 0 && status !== "1") {
              this.status = status;
              this.clearTime();
            } else if (code >= 100 && code <= 104) {
              this.clearTime();
              await this.logout();
            } else {
              this.clearTime();
              this.$message.warning(message);
            }
          }
        }
      }, 1000);
    },
    clearTime() {
      if (this.timer) {
        clearInterval(this.timer);
        this.num = 0;
      }
    },
    async repeat_initData() {
      const { code, message, data } = await asyncRequest.detail({
        infoNo: this.queryId,
      });
      const { status } = data;
      const res = { code, status, message };

      return res;
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
    openModal(bidNo, type) {
      const { id } = this.$route.query;
      this.queryId = id;
      this.editId = bidNo;
      this.editType = type;
      this.getNewTime();
    },
    // 刷新表格
    async searchList() {
      this.loading = true;
      this.parmValue.infoNo = this.queryId;

      const { code, data, message } = await asyncRequest.good_list(this.parmValue);
      if (code === 0) {
        const { list } = data;
        this.tableData = list;
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.tableData = [];
      }
      this.loading = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.workbenchdetail {
  //
  position: relative;
  width: 100%;
  height: calc(100vh - 50px);
  box-sizing: border-box;
  overflow: hidden;

  .page-main {
    position: relative;
    background: #f2f2f2;
    width: 100%;
    height: calc(100vh - 50px);
    box-sizing: border-box;
    // padding:16px;
    .left {
      position: absolute;
      top: 16px;
      left: 16px;
      width: 220px;
      overflow: hidden;
      height: calc(100vh - 82px);
      .left-main {
        background: rgba(242, 242, 242, 1);
        width: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
        // background: #fff;
        height: calc(100vh - 82px);
        @include scrollBar();
      }
    }
    .p-right {
      top: 16px;
      right: 16px;
      width: calc(100% - 258px);
      height: calc(100vh - 276px);
      overflow-y: scroll;
      background: #fff;
      overflow-x: hidden;
      position: absolute;
      @include scrollBar();
      .right-mian-wait {
        .title {
          height: 45px;
          font-size: 17px;
          line-height: 45px;
          box-sizing: border-box;
          padding: 0 16px;
          border-bottom: 1px solid rgba(242, 242, 242, 1);
        }
        .main {
          text-align: center;
          line-height: 180px;
        }
      }
    }
    .bottom {
      position: absolute;
      bottom: 16px;
      right: 16px;
      background: #fff;
      width: calc(100% - 258px);
      height: 180px;
      min-height: 180px;
      overflow-y: scroll;
      overflow-x: hidden;
      @include scrollBar();
      padding: 16px;
    }
    .left-card,
    .right-card,
    .bottom-card {
      background: #fff;
      font-size: 12px;
      // padding:16px;
      line-height: 18px;
      margin: 8px 0 0 0;
      &:first-child {
        margin: 0;
      }
      .page-main-title {
        height: 45px;
        font-size: 17px;
        line-height: 45px;
        box-sizing: border-box;
        padding: 0 16px;
        border-bottom: 1px solid rgba(242, 242, 242, 1);
      }
      .page-main-ul {
        padding: 10px 16px 16px 16px;
        li {
          float: left;
          font-size: 12px;
          line-height: 25px;

          &:nth-child(2n + 1) {
            width: 60px;
            text-align: right;
          }
          &:nth-child(2n + 2) {
            width: calc(100% - 60px);
          }
        }
      }
    }
  }
}
</style>