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

<template>
  <div class="workbenchdetail">
    <div
      class="page-main clear"
      v-if="powers && powers.length > 0 && powers.some((item) => item == '007')"
    >
      <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.budget_price }}元</li>
              <li>到货时间：</li>
              <li>{{ sitem.arrival_time }}</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>工艺说明：</li>
              <li>{{ sitem.cost_desc }}</li>
              <li>产品用途：</li>
              <li>{{ sitem.use_desc }}</li>
              <li>商品备注：</li>
              <li>{{ sitem.remark }}</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="sale_price"
            label="成本合计"
            width="110"
            show-overflow-tooltip
          />
          <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
                v-if="powers.some((item) => item == '007')"
                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 v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
   <script>
import asyncRequest from "@/apis/service/purchaseIn/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"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "workbenchDetail"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      loading: false,
      showModel: false,
      tableData: [],
      baseSitem: {},
      isDetail: false,
      modelId: 0,
      queryId: "",
      sitem: {},
      newTime: "",
      editId: "add",
      editType: "wait",
      parmValue: {
        page: 1,
        size: 100,
        zxNo: "",
        infoNo: "",
        bidNo: "",
        projectNo: "",
      },
    };
  },
  mounted() {
    this.initForm();
  },

  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() {
      this.loading = true;
      const { code, message, data } = await asyncRequest.detail({
        infoNo: this.queryId,
      });
      this.loading = false;
      console.log(data);
      if (code === 0) {
        this.sitem = JSON.parse(JSON.stringify(data));
        const { status, can } = this.sitem;
        if (can && can.length > 0) {
          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;
        } else {
          this.sitem.can_id_arr = [];
          this.sitem.can_name = "";
        }
        // console.log(this.sitem.can_id_arr);
        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();
    },
    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>