<!-- 标准装置台账信息 基本信息 -->
<script name="StandardBookBasic" lang="ts" setup>
import type { Ref } from 'vue'
import dayjs from 'dayjs'
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import type { FormRules } from 'element-plus'
import type { IAccessory, IForm, Itech } from '../testEquipment-interface'
import { useCheckList } from '@/commonMethods/useCheckList'
import { useDoubleClickTableRow, useSetAllRowReadable } from '@/commonMethods/useSetAllRowReadable'
import { getDictByCode } from '@/api/system/dict'
import selectCustomer from '@/views/dialog/selectCustomer.vue'
import countries from '@/components/AddressSelect/country-code.json'
import { getAllDeptList, getDeptTreeList } from '@/api/system/dept'
import type { deptType, dictType } from '@/global'
import { UploadFile } from '@/api/file'
import showPhoto from '@/components/showPhoto/index.vue'
import useUserStore from '@/store/modules/user'
import { SCHEDULE } from '@/utils/scheduleDict'
import { getStaffList } from '@/api/resource/register'
import FilterSysUser from '@/views/resource/common/filterSysUser.vue'
import selectUser from '@/views/dialog/selectUser.vue'
import { addTestEquipment, getTestEquipmentDetail, updateTestEquipment } from '@/api/resource/testEquipment'
const props = defineProps({
pageType: { // 页面类型 add新建 edit编辑 detail详情
type: String,
require: true,
default: 'detail',
},
id: {
type: String,
require: true,
},
})
const emits = defineEmits(['submitSuccess', 'addSuccess', 'saveSuccess', 'giveEquipmentNo'])
const user = useUserStore() // 用户信息
const $route = useRoute()
const changeFormItem = ref<string[]>([]) // 有变化的字段标红
const fromPage = ref('') // 来源页面
const countryList = ref(countries) // 国家列表
const $router = useRouter() // 路由实例
const infoId = ref('') // id
const detailOriginData = ref() as any
const deptList = ref([]) as any
const form: Ref<IForm> = ref({ // 基本信息表单
id: '',
createUserId: '', // 创建人id
createUserName: '', // 创建人名称
createTime: '', // 创建时间
equipmentNo: '', // 统一编号
equipmentName: '', // 设备名称
model: '', // 规格型号
companyId: '', // 委托方id
companyName: '', // 委托方名称
customerName: '', // 委托方名称
productCountry: '', // 生产国家
manufacturer: '', // 生产厂家
manufactureNo: '', // 出厂编号
produceDate: '', // 生产日期
// equipmentType: '', // 专业分类
// category: '', // 业务类型
checkCycle: 12, // 检定周期
certificateValid: '', // 检定校准时间
unitPrice: 0, // 计量价格
// remarkExt: '', // 是否现场
remark: '', // 备注
instructionsFile: [], // 说明书
})
const rules = reactive<FormRules>({ // 表单验证规则
equipmentName: [{ required: true, message: '设备名称不能为空', trigger: ['blur', 'change'] }],
model: [{ required: true, message: '规格型号不能为空', trigger: ['blur', 'change'] }],
companyId: [{ required: true, message: '委托方名称不能为空', trigger: ['blur', 'change'] }],
productCountry: [{ required: true, message: '生产国家不能为空', trigger: ['blur', 'change'] }],
manufacturer: [{ required: true, message: '生产厂家不能为空', trigger: ['blur', 'change'] }],
manufactureNo: [{ required: true, message: '出厂编号不能为空', trigger: ['blur', 'change'] }],
produceDate: [{ required: true, message: '生产日期不能为空', trigger: ['blur', 'change'] }],
// equipmentType: [{ required: true, message: '专业分类不能为空', trigger: ['blur', 'change'] }],
// category: [{ required: true, message: '业务类型不能为空', trigger: ['blur', 'change'] }],
checkCycle: [{ required: true, message: '检定周期不能为空', trigger: ['blur', 'change'] }],
certificateValid: [{ required: true, message: '检定校准时间不能为空', trigger: ['blur', 'change'] }],
// remarkExt: [{ required: true, message: '是否现场不能为空', trigger: ['blur', 'change'] }],
})
// ----------------------------------------------选择委托方----------------------------------------------
const selectCustomerRef = ref()
const handleClickSelectCustomer = () => {
selectCustomerRef.value.initDialog(false)
}
// 选好委托方
const selectCustomerConfirm = (value: any) => {
if (Array.isArray(value) && value.length) {
form.value.companyId = value[0].id
form.value.companyName = value[0].customerName
form.value.customerName = value[0].customerName
}
}
// -----------------------------------------技术指标\主附件信息-------------------------------------------
const technicalTargetList: any = ref([]) // 技术指标列表
const techRef = ref() // 技术指标表格ref
const checkoutTechList = ref([]) as any // 技术指标表格选中
const checkoutAttachmentList = ref([]) as any // 主附件表格选中
const checkoutInspectList = ref([]) as any // 核查点表格选中
const addTechObj = { // 技术指标对象
id: '',
equipmentId: '', // 设备id
measureRange: '', // 测量范围
uncertainty: '', // 不确定度或允许误差极限或准确度等级
basedDocuments: '', // 依据的技术文件
}
const technicalIndexColumns = [ // 技术指标表头
{ text: '测量范围', value: 'measureRange', required: true },
{ text: '不确定度或允许误差极限或准确度等级', value: 'uncertainty', required: true },
{ text: '依据的技术文件', value: 'basedDocuments', required: true },
]
const accessoryRef = ref() // 主附件信息表格ref
const attachmentList = ref<IAccessory[]>([]) // 主附件信息
const addAccessoryObj: IAccessory = { // 主附件信息对象
id: '', // 主键
equipmentNo: '', // 设备编号
name: '', // 名称
information: '', // 数量
location: '', // 位置
// editable: true,
}
const accessoryColumns = [ // 主附件信息
{ text: '名称', value: 'name', required: true },
{ text: '数量', value: 'information', required: true },
{ text: '位置', value: 'location', required: true },
]
/**
* 点击增加行
* @param val 操作的表格类型 tech技术指标、accessory主附件信息、inspect核查点
*/
const addRow = (val: string) => {
if (val === 'tech') { // 技术指标
if (useCheckList(technicalTargetList.value, technicalIndexColumns, '技术指标')) {
useSetAllRowReadable(technicalTargetList.value)
technicalTargetList.value.push({ ...addTechObj })
}
}
if (val === 'accessory') { // 主附件信息
if (useCheckList(attachmentList.value, accessoryColumns, '主附件信息')) {
useSetAllRowReadable(attachmentList.value)
attachmentList.value.push({ ...addAccessoryObj })
}
}
}
/**
* 点击删除行
* @param val 操作的表格类型 tech技术指标、accessory主附件信息、inspect核查点
*/
const deleteRow = (val: string) => {
if ((val === 'tech' && technicalTargetList.value.length <= 0) || (val === 'accessory' && checkoutAttachmentList.value.length <= 0) || (val === 'inspect' && checkoutInspectList.value.length <= 0)) {
ElMessage({
message: '请选中要删除的行',
type: 'warning',
})
return false
}
if (val === 'tech') { // 技术指标
technicalTargetList.value = technicalTargetList.value.filter((item: Itech) => {
return !checkoutTechList.value.includes(item)
})
}
if (val === 'accessory') { // 主附件信息
attachmentList.value = attachmentList.value.filter((item: IAccessory) => {
return !checkoutAttachmentList.value.includes(item)
})
}
}
// 技术指标选中
const handleTechSelectionChange = (e: any) => {
checkoutTechList.value = e
}
// 主附件信息选中
const handleAccessorySelectionChange = (e: any) => {
checkoutAttachmentList.value = e
}
// -------------------------------------------文件上传--------------------------------------
const fileRef = ref() // 文件上传input
const uploadIndex = ref(0) // 要上传文件到第几行
const isUploadTable = ref(false) // 是否上传至表格
/**
* 删除附件
* @param index 索引
*/
const delFile = (index: number) => {
// form.value.fileList.splice(index, 1)
// form.value.instructionsFile = form.value.fileList.map((item: any) => {
// return item.instructionsFile
// })
form.value.instructionsFile.splice(index, 1)
}
const onFileChange = (event: any) => {
// 原生上传
const files = event.target.files // 上传的文件列表
if (event.target.files[0].type !== 'application/pdf') {
ElMessage.warning('请上传pdf文件')
return false
}
if (files.length !== 0) {
// 创建formdata对象
const fd = new FormData()
for (var i = 0; i < files.length; i++) {
fd.append('multipartFile', files[i])
}
const loading = ElLoading.service({
lock: true,
background: 'rgba(255, 255, 255, 0.8)',
})
UploadFile(fd).then((res) => {
if (res.code === 200) {
if (!isUploadTable.value) { // 表单说明书上传
res.data.forEach((item: string) => {
// form.value.fileList.push({
// instructionsFile: item,
// })
form.value.instructionsFile.push(item)
})
// form.value.instructionsFile = form.value.fileList.map((item: any) => {
// return item.instructionsFile
// })
// form.value.instructionsFile.push(item)
}
else { // 表格依据的技术文件上传
technicalTargetList.value[uploadIndex.value].basedDocuments = res.data[0]
}
ElMessage.success('文件上传成功')
event.target.value = null
loading.close()
}
else {
event.target.value = null
loading.close()
ElMessage.error(res.message)
}
})
}
}
const upload = () => {
isUploadTable.value = false
fileRef.value.click()
}
// 表格中附件上传
const uploadTable = (index: number) => {
isUploadTable.value = true
uploadIndex.value = index
fileRef.value.click()
}
// ------------------------------------------字典----------------------------------------------
const majorTypeList = ref<deptType[]>([]) // 专业分类
const businessTypeList = ref<deptType[]>([]) // 业务类型
// 查询字典
const getDict = async () => {
// 专业分类
getDictByCode('bizGroupCodeEquipment').then((response) => {
majorTypeList.value = response.data
})
// 业务类型
getDictByCode('businessType').then((response) => {
businessTypeList.value = response.data
})
}
// ----------------------------------------------- 保存---------------------------------------
const ruleFormRef = ref() // 基本信息表单ref
const sourceFormRef = ref()// 溯源表单ref
/**
* 点击保存
* @param ruleFormRef 基本信息表单ref
* @param sourceFormRef 溯源表单ref
*/
function saveForm() {
if (!useCheckList(technicalTargetList.value, technicalIndexColumns, '技术指标')) {
return false
}
if (!technicalTargetList.value.length) {
ElMessage.warning('技术指标不能为空')
return false
}
// if (!useCheckList(attachmentList.value, accessoryColumns, '主附件信息')) {
// return false
// }
// if (!attachmentList.value.length) {
// ElMessage.warning('主附件信息不能为空')
// return false
// }
ruleFormRef.value.validate((valid: boolean) => {
if (valid) { // 基本信息表单通过校验
ElMessageBox.confirm(
'确认保存吗？',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
},
).then(() => {
const params = {
// attachmentList: attachmentList.value.map((item) => { return { ...item, equipmentNo: form.value.equipmentNo } }), // 主附件信息
technicalTargetList: technicalTargetList.value.map((item: any) => { return { ...item, equipmentId: form.value.id || infoId.value } }), // 技术指标
...form.value,
id: form.value.id || infoId.value,
checkCycle: `${form.value.checkCycle}`,
instructionsFile: Array.isArray(form.value.instructionsFile) ? form.value.instructionsFile?.join(',') : form.value.instructionsFile, // 说明书
certificateValid: dayjs(form.value.certificateValid).format('YYYY-MM-DD HH:mm:ss'),
}
detailOriginData.value = params
const loading = ElLoading.service({
lock: true,
text: '加载中...',
background: 'rgba(255, 255, 255, 0.6)',
})
if (props.pageType === 'add') { // 新建
addTestEquipment(params).then((res) => {
loading.close()
form.value.equipmentNo = res.data.equipmentNo // 设备编号
infoId.value = res.data.id // id
emits('addSuccess', form.value.equipmentNo, infoId.value)
ElMessage.success('已保存')
}).catch(() => {
loading.close()
})
}
else if (props.pageType === 'edit') { // 编辑
updateTestEquipment(params).then((res) => {
loading.close()
ElMessage.success('已保存')
emits('saveSuccess')
}).catch(() => {
loading.close()
})
}
})
}
})
}
// -------------------------------------------获取详情信息----------------------------------------
/**
* 获取详情
*/
function fetchInfo() {
const loading = ElLoading.service({
lock: true,
background: 'rgba(255, 255, 255, 0.8)',
})
getTestEquipmentDetail({ equipmentId: infoId.value! }).then((res) => {
// attachmentList.value = res.data.attachmentList // 主附件信息
technicalTargetList.value = res.data.technicalTargetList // 技术指标
form.value = res.data
form.value.produceDate = dayjs(res.data.produceDate).format('YYYY-MM-DD')
form.value.instructionsFile = res.data.instructionsFile.split(',') // 说明书
// form.value.fileList = form.value.instructionsFile
form.value.certificateValid = dayjs(res.data.certificateValid).format('YYYY-MM-DD')
loading.close()
}).catch(() => {
loading.close()
})
}
// ---------------------------------------------钩子----------------------------------------------
watch(() => props.id, (newValue) => {
infoId.value = newValue!
}, { immediate: true })
onMounted(async () => {
// getDict().then(() => {
form.value.createUserId = user.id// 创建人id
form.value.createUserName = user.name // 创建人
form.value.createTime = dayjs().format('YYYY-MM-DD HH-mm:ss')// 申请时间
if (props.pageType !== 'add') {
fetchInfo() // 获取详情信息
}
else { // 新建
}
// }) // 获取字典
})
defineExpose({ saveForm, fetchInfo })
</script>
<template>
<div class="equipment-book-basic">
<detail-block title="">
<el-form
ref="ruleFormRef"
:model="form"
:label-width="120"
label-position="right"
:rules="rules"
>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="创建人:">
<el-input v-model="form.createUserName" disabled />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="创建时间:">
<el-date-picker
v-model="form.createTime"
type="datetime"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
disabled
class="full-width-input"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="6">
<el-form-item label="统一编号:" prop="equipmentNo">
<el-input v-model="form.equipmentNo" disabled placeholder="系统自动生成" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="设备名称:" prop="equipmentName">
<el-input
v-model.trim="form.equipmentName"
:placeholder="pageType === 'detail' ? '' : '请输入设备名称'"
:disabled="pageType === 'detail' || fromPage === 'unpack'"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="型号规格" prop="model">
<el-input
v-model.trim="form.model"
:placeholder="pageType === 'detail' ? '' : '请输入型号规格'"
:disabled="pageType === 'detail' || fromPage === 'unpack'"
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="委托方名称:" prop="customerName">
<el-input
v-model.trim="form.customerName"
:placeholder="pageType === 'detail' ? ' ' : '请选择委托方'"
disabled
class="full-width-input"
clearable
>
<template v-if="pageType !== 'detail'" #append>
<el-button
size="small"
@click="handleClickSelectCustomer"
>
选择
</el-button>
</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="生产国家:" prop="productCountry">
<el-select
v-model="form.productCountry"
filterable
:placeholder="pageType === 'detail' ? ' ' : '请选择生产国家'"
:disabled="pageType === 'detail'"
class="full-width-input"
>
<el-option v-for="country of countryList" :key="country.code" :label="country.CNName" :value="country.code" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="生产厂家:" prop="manufacturer">
<el-input
v-model.trim="form.manufacturer"
:placeholder="pageType === 'detail' ? '' : '请输入生产厂家'"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail' || fromPage === 'unpack'"
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出厂编号:" prop="manufactureNo">
<el-input
v-model.trim="form.manufactureNo"
:placeholder="pageType === 'detail' ? '' : '请输入出厂编号'"
:class="{ 'detail-input': pageType === 'detail' }"
:disabled="pageType === 'detail' || fromPage === 'unpack'"
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="生产日期:" prop="produceDate">
<el-date-picker
v-model="form.produceDate"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:placeholder="pageType === 'detail' ? ' ' : '请选择生产日期'"
:disabled="pageType === 'detail'"
class="full-width-input"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="6">
<el-form-item label="专业分类" prop="equipmentType">
<el-select
v-model.trim="form.equipmentType"
placeholder="请选择专业分类"
filterable
:disabled="pageType === 'detail'"
class="full-width-input"
>
<el-option v-for="item in majorTypeList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</el-col> -->
<!-- <el-col :span="6">
<el-form-item label="业务类型" prop="category">
<el-select
v-model.trim="form.category"
placeholder="请选择业务类型"
filterable
:disabled="pageType === 'detail'"
class="full-width-input"
>
<el-option v-for="item in businessTypeList" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</el-col> -->
<el-col :span="6">
<el-form-item label="检定周期(月)" prop="checkCycle">
<el-input-number
v-model="form.checkCycle"
:placeholder="pageType === 'detail' ? '' : '请输入检定周期'"
:disabled="pageType === 'detail'"
class="full-width-input"
:min="0"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="检定校准时间:" prop="certificateValid">
<el-date-picker
v-model="form.certificateValid"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:placeholder="pageType === 'detail' ? ' ' : '请选择检定校准时间'"
:disabled="pageType === 'detail'"
class="full-width-input"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="计量价格" prop="unitPrice">
<el-input-number
v-model="form.unitPrice"
:placeholder="pageType === 'detail' ? '' : '请输入计量价格'"
:disabled="pageType === 'detail'"
class="full-width-input"
:min="0"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="6">
<el-form-item label="是否现场" prop="remarkExt">
<el-select
v-model.trim="form.remarkExt"
placeholder="请选择是否现场"
filterable
:disabled="pageType === 'detail'"
class="full-width-input"
>
<el-option v-for="item in [{ id: '1', name: '是', value: '1' }, { id: '2', name: '否', value: '2' }]" :key="item.id" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
</el-col> -->
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="12">
<el-form-item label="备注:" :class="changeFormItem.includes('remark') ? 'changedLabel' : ''">
<el-input
v-model="form.remark"
type="textarea"
autosize
:placeholder="pageType === 'detail' ? '' : '请输入备注'"
:disabled="pageType === 'detail'"
:class="{ 'detail-input': pageType === 'detail' }"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" class="marg">
<el-col :span="24">
<el-form-item label="说明书:" :class="changeFormItem.includes('instructionsFile') ? 'changedLabel' : ''">
<!-- <show-photo :minio-file-name="form.instructionsFile" width="100%" height="125px" />
<el-button v-if="pageType !== 'detail'" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': form.instructionsFile === '' ? '0px' : '20px' }" @click="upload">
{{ form.instructionsFile === '' ? '上传' : '更换附件' }}
</el-button>
<input v-show="pageType === ''" ref="fileRef" type="file" name="upload" multiple @change="onFileChange"> -->
<el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-right': '20px' }" @click="upload">
{{ !form.instructionsFile.length ? '上传' : '上传' }}
</el-button>
<div v-for="(item, index) in form.instructionsFile" :key="index" style="display: flex;">
<show-photo :minio-file-name="item">
<span v-if="pageType !== 'detail' && item" class="photo-close" @click="delFile(index)">×</span>
</show-photo>
</div>
<span v-if="pageType === 'detail' && !form.instructionsFile.length">无</span>
<input v-show="pageType === ''" ref="fileRef" type="file" name="upload" multiple @change="onFileChange">
</el-form-item>
</el-col>
</el-row>
</el-form>
</detail-block>
<!-- 技术指标 -->
<detail-block title="技术指标">
<template v-if="pageType !== 'detail'" #btns>
<el-button type="primary" @click="addRow('tech')">
增加行
</el-button>
<el-button type="info" @click="deleteRow('tech')">
删除行
</el-button>
</template>
<el-table
ref="techRef"
:data="technicalTargetList"
border
style="width: 100%;"
@selection-change="handleTechSelectionChange"
>
<el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
<el-table-column align="center" label="序号" width="80" type="index" />
<el-table-column
v-for="item in technicalIndexColumns"
:key="item.value"
:prop="item.value"
:label="item.text"
align="center"
>
<template #header>
<span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
</template>
<template #default="scope">
<span v-if="pageType === 'detail' && item.value !== 'basedDocuments'">{{ scope.row[item.value] }}</span>
<el-input v-if="pageType !== 'detail' && item.value !== 'basedDocuments'" v-model="scope.row[item.value]" :placeholder="`${item.text}`" class="input" />
<show-photo v-if="item.value === 'basedDocuments'" :minio-file-name="scope.row[item.value]" width="100%" height="125px" />
<el-button v-if="item.value === 'basedDocuments' && pageType !== 'detail'" type="primary" :disabled="pageType === 'detail'" @click="uploadTable(scope.$index)">
{{ scope.row[item.value] === '' ? '上传' : '更换附件' }}
</el-button>
</template>
</el-table-column>
</el-table>
</detail-block>
<!-- 主附件信息 -->
<!-- <detail-block title="主附件信息">
<template v-if="pageType !== 'detail'" #btns>
<el-button type="primary" @click="addRow('accessory')">
增加行
</el-button>
<el-button type="info" @click="deleteRow('accessory')">
删除行
</el-button>
</template>
<el-table
ref="accessoryRef"
:data="attachmentList"
border
style="width: 100%;"
@selection-change="handleAccessorySelectionChange"
@row-dblclick="rowDblclickAccessory"
>
<el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
<el-table-column align="center" label="序号" width="80" type="index" />
<el-table-column
v-for="item in accessoryColumns"
:key="item.value"
:prop="item.value"
:label="item.text"
align="center"
>
<template #header>
<span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
</template>
<template #default="scope">
<span v-if="pageType === 'detail'">{{ scope.row[item.value] }}</span>
<el-input v-else v-model="scope.row[item.value]" :placeholder="`${item.text}`" class="input" />
</template>
</el-table-column>
</el-table>
</detail-block> -->
<!-- 选择委托方 -->
<select-customer ref="selectCustomerRef" @confirm="selectCustomerConfirm" />
</div>
</template>
<style lang="scss" scoped>
::v-deep .changedLabel .el-form-item__label {
color: #f56c6c;
}
.link {
text-decoration: underline;
color: #3d7eff;
cursor: pointer;
}
.file-area {
// display: flex;
// align-items: center;
font-size: 14px;
color: #60627f;
margin-bottom: 10px;
margin-left: 40px;
width: 100%;
flex-wrap: wrap;
.tech-file {
display: flex;
align-items: center;
// margin-left: 20px;
flex-wrap: wrap;
white-space: nowrap;
.file-text {
margin-right: 10px;
}
}
}
</style>
<style lang="scss">
.equipment-book-basic {
.el-radio__label {
display: block !important;
}
}
</style>
