LiaoNingDangAn/src/views/cosmeticsFile/samplingDetail.vue

<template>
  <div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="75%"
      :close-on-click-modal="true"
      :destroy-on-close="true"
      :append-to-body="true"
    >
      <div slot="title" class="headerText">详情</div>
      <div>
        <div class="header--title">
          <div class="title--left">
            <div class="line"></div>
            <div class="title">基本信息</div>
          </div>
        </div>
        <el-descriptions class="margin-top" :column="2"   border>
          <el-descriptions-item>
            <template slot="label"> 计划名称 </template>
            tracyonePlanA
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 抽样单号编号 </template>
            903434034934
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 抽样时间 </template>
            2021-01-01
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 任务来源 </template>
            省级监督检查
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 抽样地点性质 </template>
            生产环境：其他.....
            <br />
            经营环节：小商店
          </el-descriptions-item>
        </el-descriptions>
        <div class="header--title">
          <div class="title--left">
            <div class="line"></div>
            <div class="title">被抽样单位信息</div>
          </div>
        </div>
        <el-descriptions class="margin-top" :column="2"   border>
          <el-descriptions-item>
            <template slot="label"> 被抽样单位名称 </template>
            大石桥市天泽精制滑石粉厂
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 统一社会信用代码 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 地区（市、州、盟） </template>
            沈阳市
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 县 (市、区) </template>
            省级监督检查
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 详细地址 </template>
            永安大道116号
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 联系人 </template>
            xxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 电话 </template>
            177777777777
          </el-descriptions-item>
        </el-descriptions>
        <div class="header--title">
          <div class="title--left">
            <div class="line"></div>
            <div class="title">样品基本信息</div>
          </div>
        </div>
        <el-descriptions class="margin-top" :column="2"   border>
          <el-descriptions-item>
            <template slot="label"> 样品通用名称</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 样品类别 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 样品批号</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 生产日期 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 有效期限</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 抽样数量 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 包装规格</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 保质期 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 注册证编号/备案编号</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 进口包装企业 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 进口分包装批号</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 现场结算 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 单价</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 总价 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 实际总价</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 保存条件 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 是否进口</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 原产地</template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 生产/进货数量</template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
        </el-descriptions>
        <div class="header--title">
          <div class="title--left">
            <div class="line"></div>
            <div class="title">标示注册人/备案人/受托生产企业等信息</div>
          </div>
        </div>
        <el-descriptions class="margin-top" :column="2"   border>
          <el-descriptions-item>
            <template slot="label"> 注册人/备案人所属省份</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 注册人/备案人名称 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 注册/备案人地址</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 境内责任人所属省份 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 境内责任人名称</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 境内责任人地址 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 受托生产企业所属省份</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 受托生产企业名称 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 受托生产企业地址</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">委托单位所属省份 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 委托单位名称</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 委托单位地址 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">生产企业/代理商所属省份</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 生产企业/代理商名称 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 生产企业/代理商地址</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 是否进口 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 样品进口地区</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
        </el-descriptions>
        <div class="header--title">
          <div class="title--left">
            <div class="line"></div>
            <div class="title">抽样单位信息</div>
          </div>
        </div>
        <el-descriptions class="margin-top" :column="2"   border>
          <el-descriptions-item :span="2">
            <template slot="label"> 抽样单位名称</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item :span="2">
            <template slot="label"> 地区（市、州、盟） </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 抽样人</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 电话 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 抽样人</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 电话 </template>
            xxxxxxxxxxxxx
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 备注</template>
            xxxxxxxxxxxxxxx
          </el-descriptions-item>
        </el-descriptions>
        <div class="header--title">
          <div class="title--left">
            <div class="line"></div>
            <div class="title">检验信息</div>
          </div>
        </div>
        <div class="lastBox">
          <el-descriptions class="margin-top" :column="2"   border>
            <el-descriptions-item :span="2">
              <template slot="label"> 检验机构名称</template>
              xxxxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 是否合格 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 不合格项目类型 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label"> 不合格项目详情 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">检验结果 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">结果单位 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">判定依据 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">检验依据 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">限值规定 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">检验报告 </template>
              <div class="fileBox">
                <span>
                  <i class="el-icon-s-marketing"></i>
                </span>
                <div>A项目检验报告.doc</div>
                <div class="file-icon">
                  <i class="el-icon-download"></i>
                  下载
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">备注 </template>
              xxxxxxxxxxxxx
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background: #f8f9fa;
}
.headerText {
  color: #333333;
}
.header--title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title--left {
    display: flex;
    align-items: center;
    .line {
      width: 4px;
      height: 16px;
      background: #1e80eb;
      margin-right: 8px;
    }
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #1e80eb;
    }
  }
}
.margin-top {
  margin: 15px 0;
}
::v-deep .el-descriptions-row > th {
  width: 18%;
  background: #f5f7fa;
  color: #292f38;
  font-weight: 500;
}
::v-deep .el-descriptions-row > td {
  width: 32%;
}
::v-deep .lastBox .el-descriptions-row > td {
  width: 82%;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-bottom: 1vh !important;
}
.fileBox {
  margin-top: 8px;
  display: flex;
  color: #333;
  cursor: pointer;
  & > span {
    font-size: 14px;
  }
  .file-icon {
    color: #02d1a6;
    margin-left: 40px;
  }
}
</style>