haoxuan
2024-04-28 3bd59622961f569ac181a0f17aeffd44858efa4f
src/views/supplierManage/supplier/DetailSupplier.vue
@@ -1,6 +1,6 @@
<template>
  <div class="detail-view">
    <el-drawer :visible.sync="detailConfig.visible" size="80%" :before-close="handleClose" :wrapperClosable="false">
    <el-drawer :visible.sync="detailConfig.visible" size="80%" :before-close="handleClose" :append-to-body="true">
      <template slot="title">
        <div class="header">
          <span class="header-label">供应商名称</span>
@@ -37,7 +37,9 @@
              </ul>
              <div class="business_scope">
                <div class="content-title">{{ "详细地址" }}</div>
                <div class="content-data">{{ record ? record : "--" }}</div>
                <div class="content-data">
                  {{ detailConfig.infomation.detailAddress ? detailConfig.infomation.detailAddress : "--" }}
                </div>
              </div>
            </div>
          </div>
@@ -63,17 +65,29 @@
              </ul>
              <div class="business_scope">
                <div class="content-title">{{ "合同附件" }}</div>
                <div class="content-data">{{ record ? record : "--" }}</div>
                  <div class="content-data downFlie" @click="downLoadFiles">
                    {{ detailConfig.infomation.contract.fileName ? detailConfig.infomation.contract.fileName : "--" }}
                  </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'second'" class="second">
          <!-- <FollowupRecords
            :isDetail="true"
            :follow-record="detailConfig.infomation.FollowRecord"
            :add-config="addConfig"
          /> -->
        <div v-if="activeName === 'second'" class="detail">
          <!-- 采购订单-基本信息 -->
          <!-- 产品信息 -->
          <div class="basic-info">
            <div class="basic-info-content" >
              <el-button type="primary" size="mini" @click="toPurchaseBtn"><i class="el-icon-plus"></i>   新建</el-button>
              <TableCommonView
                style="margin-top: 2px"
                class="content-table"
                ref="tableListRef"
                :table-list="tableList"
                @selTableCol="selTableCol"
              >
              </TableCommonView>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
@@ -81,6 +95,7 @@
</template>
<script>
import download from "downloadjs"
export default {
  name: "DetailSupplier",
  props: {
@@ -89,7 +104,8 @@
      default: () => {
        return {
          visible: false,
          infomation: {}
          infomation: {},
          productListInfo:[]
        }
      }
    }
@@ -107,10 +123,23 @@
      addConfig: {},
      record: "", // 最新进展
      noContactDays: 0,
      newContactDays: ""
      newContactDays: "",
      tableList:{},
      showCol: ['采购单号', '采购单名称', '单据类型', '供应商名称', '采购数量', '收货仓库','经办人','制单人'],
      tableColumn: [
        { label: "单据类型", prop: "orderType", min: 130 },
        { label: "采购单号", prop: "number", min: 150,default:true},
        { label: "采购单名称", prop: "name", min: 130 },
        { label: "供应商名称", prop: "supplierName", min: 130 },
        { label: "采购数量", prop: "quantity", min: 130 },
        { label: "收货仓库", prop: "warehouse", min: 130 },
        { label: "经办人", prop: "handledBy", min: 130 },
        { label: "制单人", prop: "creator", min: 130 }
      ],
    }
  },
  created() {
    console.log(this.commonDetail,"抽屉组件props")
    this.setData(this.detailConfig.infomation)
    this.addConfig = {
      id_name: "sales_leads_id",
@@ -162,20 +191,81 @@
          rightValue: ""
        }
      ]
      this.purchaseList = [
        {
          leftStr: "采购单号",
          leftValue: item.number,
          rightStr: "采购单名称",
          rightValue: item.name
        },
        {
          leftStr: "供应商类型",
          leftValue: item.supplierType,
          rightStr: "所属行业",
          rightValue: item.industry
        },
        {
          leftStr: "单据类型",
          leftValue: item.contact,
          rightStr: "供应商名称",
          rightValue: item.phone
        },
        {
          leftStr: "采购数量",
          leftValue: item.responsiblePersonName,
          rightStr: "收货仓库",
          rightValue: item.url
        },
        {
          leftStr: "经办人",
          leftValue: item.email,
          rightStr: "制单人",
          rightValue: ""
        },
        {
          leftStr: "状态",
          leftValue: item.email,
          rightStr: "",
          rightValue: ""
        },
      ]
      this.dynamicInfoList = [
        {
          leftStr: "户名",
          leftValue: this.noContactDays,
          leftValue: item.accountName,
          rightStr: "开户行",
          rightValue: this.newContactDays
          rightValue: item.bank
        },
        {
          leftStr: "账号",
          leftValue: "",
          leftValue: item.account,
          rightStr: "",
          rightValue: ""
        }
      ]
      this.detailConfig.productListInfo.map((item)=>{
        item.supplierName=item.supplier.name
      })
      this.tableList = {
        tableInfomation: this.detailConfig.productListInfo?this.detailConfig.productListInfo:[],
        selectIndex: true,
        showcol: this.showCol,
        allcol:[],
        tableColumn:this.setColumnVisible(this.showCol),
      };
      this.tableList.allcol = this.tableList.tableColumn.filter(ele=>!ele.default).map(ele=>ele.label);
    },
    selTableCol(val) {
      this.showcol = val;
      this.tableList.tableColumn = this.setColumnVisible(val);
    },
    setColumnVisible(showCol){
      return  this.tableColumn.map(ele=>{
        return {
          ...ele,
          isShowColumn:showCol.includes(ele.label)
        }
      })
    },
    handleClose() {
      this.detailConfig.visible = false
@@ -205,6 +295,22 @@
      // console.log(totalDays)
      return totalDays // 相差的天数
    },
    toPurchaseBtn(){
      this.$router.push({
        name: 'purchase',
        params: {
          supplierId:this.commonDetail.infomation.ID,
          supplierName:this.commonDetail.infomation.name
        }
      });
    },
    // 下载合同附件
    downLoadFiles(){
      if(this.detailConfig.infomation.contract.fileName){
        let url = "/api-srm/downloadContract?id=" + this.commonDetail.infomation.fileId
        download(url, "", "")
      }
    }
  }
}
@@ -212,7 +318,7 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.detail-view {
::v-deep {
  .header {
    height: 56px;
    display: flex;
@@ -257,6 +363,7 @@
          font-size: 14px;
        }
        .basic-info-content {
          margin-top: 10px;
          background: #fff;
          ul {
            padding-inline-start: 0;
@@ -318,8 +425,7 @@
      }
    }
  }
}
::v-deep {
  .el-drawer__header {
    padding: 0;
    margin-bottom: 0px;
@@ -340,4 +446,8 @@
    margin: 0;
  }
}
  .downFlie{
    color: blue !important;
    cursor: pointer;
  }
</style>