lxp
2024-08-08 103d02733dba8942af2df34bcab948a10773b6be
src/components/do/a6-device/files.vue
@@ -1,8 +1,307 @@
<!--
 * @Author: licp lichunping@guanfang.com.cn
 * @Date: 2024-07-29 15:43:42
 * @LastEditors: licp lichunping@guanfang.com.cn
 * @LastEditTime: 2024-07-29 15:43:48
 * @FilePath: \center-lims-before\src\components\do\a6-device\files.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="page">
    <div class="page-header">
      <h4><span class="line"></span><span>设备档案</span></h4>
      <div class="btns">
        <el-button type="primary" size="small">修订档案</el-button>
        <el-button type="primary" size="small">添加附件</el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-image src="" fit="fill" style="width: 200px;height: 300px;border: 1px solid #000;border-radius: 10px;margin-left: 30px;margin-top: 20px;">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" style="font-size: 40px;"></i>
          </div>
        </el-image>
      </el-col>
      <el-col :span="8">
        <div class="form-item">
          <label>设备名称</label>
          <p>{{ handleData('扫描电镜(带能谱)') }}</p>
        </div>
        <div class="form-item">
          <label>大类</label>
          <p>{{ handleData('分析仪器') }}</p>
        </div>
        <div class="form-item">
          <label>内部编号</label>
          <p>{{ handleData('扫描电镜(带能谱)') }}</p>
        </div>
        <div class="form-item">
          <label>生产厂家</label>
          <p>{{ handleData('扫描电镜(带能谱)') }}</p>
        </div>
        <div class="form-item">
          <label>资产编码</label>
          <p>{{ handleData('扫描电镜(带能谱)') }}</p>
        </div>
        <div class="form-item">
          <label>出厂日期</label>
          <p>{{ handleData('2024-7-20') }}</p>
        </div>
        <div class="form-item">
          <label>启用日期</label>
          <p>{{ handleData('2024-7-20') }}</p>
        </div>
        <div class="form-item">
          <label>核准周期(月)</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>检测类型</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>报废时间</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>准确度量值</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>被授权人</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>维修记录</label>
          <p>{{ handleData('12') }}</p>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="form-item">
          <label>规格型号</label>
          <p>{{ handleData('JSM-6010LA') }}</p>
        </div>
        <div class="form-item">
          <label>细类</label>
          <p>{{ handleData('分析仪器') }}</p>
        </div>
        <div class="form-item">
          <label>设备状态</label>
          <el-radio-group v-model="form.value1" disabled>
            <el-radio :label="0" style="width: 40px;">合格</el-radio>
            <el-radio :label="1" style="width: 40px;">维修</el-radio>
            <el-radio :label="2" style="width: 40px;">停用</el-radio>
            <el-radio :label="3" style="width: 40px;">报废</el-radio>
          </el-radio-group>
        </div>
        <div class="form-item">
          <label>出厂编号</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>存放点</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>购置日期</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>产地</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>最近溯源日期</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>采购费用(元)</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>停用时间</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>设备负责人</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>验收记录</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>核准证书</label>
          <p>{{ handleData() }}</p>
        </div>
      </el-col>
    </el-row>
    <h4 style="margin-bottom: 10px;margin-top: 10px;"><span class="line"></span><span>附件和相关文档</span></h4>
    <div class="tables">
      <ValueTable ref="ValueTable"
            :url="$api.auxiliaryWorkingHoursDay.selectAuxiliaryWorkingHoursDay"
            :delUrl="$api.auxiliaryWorkingHoursDay.deleteAuxiliaryWorkingHoursDay" :componentData="componentData" :key="upIndex" style="min-height: 400px;"/>
    </div>
  </div>
</template>
<script>
import ValueTable from '../../tool/value-table.vue'
export default {
  components: {
    ValueTable
  },
  data(){
    return{
      componentData: {
        entity: {
          week: null,
          weekDay: null,
          dateTime: null,
          name:null,
          orderBy: {
            field: 'id',
            order: 'desc'
          }
        },
        isIndex: true,
        showSelect: false,
        select: false,
        isPage:false,
        do: [{
          id: 'getFile',
          font: '附件',
          type: 'text',
          method: 'getFile'
        }, {
          id: 'handleLook',
          font: '查看',
          type: 'text',
          method: 'handleLook'
        },{
          id: 'delete',
          font: '删除',
          type: 'text',
          method: 'doDiy',
          disabFun: (row, index) => {
            return row.state === '已审核' || row.state === '已批准'
          }
        }],
        tagField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        linkEvent: {},
        selectField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        requiredAdd: [],
        requiredUp: []
         },
      upIndex:0,
      form: {
        value1:''
      }
    }
  },
  methods: {
    handleData(m){
      if(m){
        return m
      }else{
        return '-'
      }
    }
  }
}
</script>
<style scoped>
.page{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.page-header{
  display: flex;
  justify-content: space-between;
}
h4{
  display: flex;
  align-items: center;
}
h4 .line{
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}
.tables{
  width: calc(100vw - 390px);
}
.el-image {
  position: relative;
}
.el-icon-picture-outline{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.form-item{
  line-height: 34px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.form-item label{
  width: 110px;
  display: inline-block;
  text-align: right;
  margin-right: 20px;
  color: #999;
}
</style>