DLBWG_CK/src/views/statistics/statistics2_look.vue

<!--  -->
<template>
  <div class="holdingAdd">
    <TabList :ind="2" />
    <div class="right">
      <div class="top">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item to="">首页</el-breadcrumb-item>
          <el-breadcrumb-item to="">库房管理</el-breadcrumb-item>
          <el-breadcrumb-item>藏品移库</el-breadcrumb-item>
          <el-breadcrumb-item id="mytitle">查看</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
            <!-- 后面追加的功能-tab栏切换 -->
      <ul class="topTab">
        <li :class="{ active: topTabInd === 0 }" @click="topTabInd = 0">
          移库信息
        </li>
        <li :class="{ active: topTabInd === 1 }" @click="topTabInd = 1">
          审核信息
        </li>
      </ul>
      <div class="conten" v-if="topTabInd === 0">
        <div class="info">
          <div class="row">
            <div><span>藏品名称：</span>{{myObj.name}}</div>
            <div><span>总登记号：</span>{{myObj.num}}</div>
          </div>
        <div class="row">
          <div><span>登记人：</span>{{myObj.realName}}</div>
          <div><span>登记时间：</span>{{myObj.updateTime}}</div>
        </div>
        </div>
        <div class="con_edit">
          <div class="title">移库记录
                        <el-button size="small" @click="look">藏品信息</el-button>
          </div>
          <div class="editChange">
            <div style="width:50%">原来位置</div>
            <div style="width:50%">移库位置</div>
          </div>
          <div class="father">
          <div class="con_txt" >
            <div style="width:50%">
                <el-cascader
                  disabled
                  style="width:100%"
                  :props="{ value: 'id', label: 'name' }"
                  v-model="oldLocation"
                  :options="options"
                ></el-cascader>
            </div>
            <div style="width:50%">
                <el-cascader
                  disabled
                  style="width:100%"
                  :props="{ value: 'id', label: 'name' }"
                  v-model="newLocation"
                  :options="options"
                ></el-cascader>
            </div>
          </div>
          </div>
        </div>
        <!-- 最下面的按钮 -->
        <div class="button">
          <el-button @click="$router.push('/layout/statistics2')">返回</el-button>
        </div>
      </div>
            <!-- 后面追加的审核信息 -->
      <div class="conten conten2" v-else>
        <div class="conten2_head">
          <div style="width:200px">类型</div>
          <div  style="width:300px">审核结果</div>
          <div>审核说明</div>
        </div>
        <div class="conten2_head conten2_con">
          <div style="width:200px">主任审核</div>
          <div  style="width:300px">{{myObj.status1}}</div>
          <div>{{myObj.reason}}</div>
        </div>
        <div class="conten2_head conten2_con last">
          <div style="width:200px">馆长审核</div>
          <div  style="width:300px">{{myObj.status2}}</div>
          <div>{{myObj.reasonCurator?myObj.reasonCurator:'-'}}</div>
        </div>
        <!-- 最下面的按钮 -->
          <div class="button">
              <el-button @click="$router.push('/layout/statistics2')">返回</el-button>
          </div>
      </div>

    </div>
        <!-- 点击查看显示弹窗 -->
    <Statistics2Look :dialogFormVisible.sync='isShow' :myObj='myObjLook'  ref="mylook"/>
  </div>
</template>

<script>
import { detailsById } from '../../apis/holding'
import { getTreeList } from '@/apis/statistics0'
import Statistics2Look from '../holding/holding0_audit_Dia.vue'
import { getDetailById } from '@/apis/statistics2'
import TabList from '@/components/tabLeft3.vue'
export default {
  name: 'statistics2Look2',
  // import引入的组件需要注入到对象中才能使用
  components: { TabList, Statistics2Look },
  data () {
    // 这里存放数据
    return {
      topTabInd: 0,
      options: [],
      oldLocation: '',
      newLocation: '',
      // 位置
      fujianLook: [],
      myObjLook: {},
      isShow: false,
      myObj: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async look () {
      const res = await detailsById(this.myObj.goodsId)
      const obj = res.data
      // console.log(999, obj)
      // obj.goodsTypeName = val.goodsTypeId // 修改文物类别
      if (typeof (obj.level) === 'number') obj.level = this.myWwjb(obj.level) // 修改文物级别
      if (obj.textureType === 0) obj.textureType = '单一质地'
      else if (obj.textureType === 1) obj.textureType = '复合质地'// 修改质地类型
      if (obj.amountType === 0) obj.amountType = '单件'
      else if (obj.amountType === 1) obj.amountType = '一套多件'// 修改数量类型
      obj.numTypeId = this.mycategory(obj.numTypeId)// 编号类型
      obj.goodsTypeName = this.category(obj.goodsTypeId)// 文物类别
      obj.integrity = this.spoil(obj.integrity)// 完残程度
      obj.repair = this.mySave(obj.repair)// 保存状态
      this.myObjLook = obj
      this.isShow = true
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created () {
    this.myObj = this.$route.query
    if (this.myObj.status === '馆长审核中') {
      this.myObj.status1 = '主任通过'
      this.myObj.status2 = '审核中'
    } else if (this.myObj.status === '主任不通过') {
      this.myObj.status1 = '主任不通过'
      this.myObj.status2 = '-'
    } else if (this.myObj.status === '馆长不通过') {
      this.myObj.status1 = '主任通过'
      this.myObj.status2 = '馆长不通过'
    } else if (this.myObj.status === '已完成') {
      this.myObj.status1 = '主任通过'
      this.myObj.status2 = '馆长通过'
    }

    // 获取上个页面传递的数据
    const res = await getDetailById(this.myObj.id)
    this.oldLocation = res.data.storageId.split(',')
    this.oldLocation = this.oldLocation.map(Number)
    this.newLocation = res.data.updateStorageId.split(',')
    this.newLocation = this.newLocation.map(Number)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  async mounted () {
    // 获取位置信息
    const res1 = await getTreeList()
    this.options = res1.data
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.holdingAdd {
  /deep/#mytitle > span {
    font-weight: 800;
  }
  display: flex;
  .right {
    width: 100%;
    display: flex;
    flex-direction: column;
   .top {
      padding-left: 18px;
      display: flex;
      align-items: center;
      margin-left: 2px;
      height: 40px;
    }
    .topTab {
      display: flex;
      align-items: center;
      margin: 0 20px;
      height: 80px;
      background-color: #fff;
      padding: 0 35px;
      li {
        padding: 0 10px 5px;
        margin-right: 20px;
        font-weight: 700;
        cursor: pointer;
        color: black;
      }
      .active {
        color: #3e5eb3;
        border-bottom: 2px solid #3e5eb3;
      }
    }
  }
  .conten {
    position: relative;
    padding:0 24px 24px;
    color: black;
    flex: 1;
    background-color: #fff;
    margin: 0 20px 40px;
    .info{
      .row{
        display: flex;
        &>div{
          flex: 1;
          border: 1px solid #ccc;
          padding: 15px 18px;
          &>span {
            font-weight: 700;
          }
        }
      }
    }
    .con_edit{
      color: black;
      margin: 24px 0;
      max-height: 460px;
      // background-color: cadetblue;
      .title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:0 38px;
        height: 50px;
        font-weight: 700;
        border: 1px solid #ccc;
      }
      .editChange{
        font-weight: 700;
        height: 50px;
        display: flex;
        &>div {
          background-color: #fafafa;
          padding-left: 18px;
          border: 1px solid #ccc;
          height: 100%;
          line-height: 50px;
        }
      }
      .father{
        max-height: 320px;
        overflow: auto;
      }
    .con_txt{
      /deep/.el-input__inner {
        display: flex;
        align-items: center;
        padding: 0;
        background-color: transparent;
        border: none;
        font-size: 16px;
        color: black;
      }
      /deep/.el-input__suffix-inner {
        display: none;
      }
       display: flex;
      &>div {
        border: 1px solid #ccc;
        padding: 8px 0;
        padding-left: 18px;
      }
    }
    }
            .button {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      width: 240px;
      display: flex;
      justify-content: center;
    }

  }
    .conten2 {
      .conten2_head{
      display: flex;
      border: 1px solid #ccc;
      border-bottom: none;
      border-right: none;
      display: flex;
      color: black;
      height: 50px;
      font-weight: 700;
      background-color: #d8dff0;
      &>div {
        padding-left: 15px;
        line-height: 49px;
        height: 100%;
        border-right: 1px solid #ccc;
      }
      &>div:nth-of-type(3) {
        flex: 1;
      }
    }
    .conten2_con{
      font-weight: 400;
      background-color: #fff;
      height: auto;
      &>div{
        height: auto;
      }
    }
      .last{
        border-bottom: 1px solid #ccc !important;
      }
    }
}
</style>