| | |
| | | <!-- |
| | | * @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> |