|
|
@ -7,96 +7,267 @@ |
|
|
|
:vLoading="formLoading" |
|
|
|
> |
|
|
|
<div style="max-height: 60vh; overflow-y: auto; padding: 0px 20px"> |
|
|
|
<Form ref="formRefMain" :schema="formAllSchemasMain" :is-col="true" /> |
|
|
|
<div class="tab-pane"> |
|
|
|
<div class="left"> |
|
|
|
<div class="plus"> |
|
|
|
<Icon icon="ep:plus" size="14" color="black" @click="addProcess" |
|
|
|
/></div> |
|
|
|
|
|
|
|
<div class="left-list" v-for="(item, index) in data.list" :key="index"> |
|
|
|
<div class="left-item" :class="chooseIndex == index ? 'active' : ''"> |
|
|
|
<el-input |
|
|
|
v-model="item.description" |
|
|
|
style="width: 120px; margin: 0px 10px" |
|
|
|
v-if="item.isEdit" |
|
|
|
placeholder="请输入工序名称" |
|
|
|
/> |
|
|
|
<div class="name" v-else @click="chooseItem(item, index)">{{ item.description }}</div> |
|
|
|
<Icon |
|
|
|
icon="ep:select" |
|
|
|
class="mr-5px ml-5px" |
|
|
|
v-if="item.isEdit" |
|
|
|
@click="editName(item)" |
|
|
|
/> |
|
|
|
<Icon icon="ep:edit" class="mr-5px ml-5px" v-else @click="editName(item)" /> |
|
|
|
<Icon icon="ep:close" class="mr-5px" @click="delProcess(index)" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<div class="small-title">检验工序</div> |
|
|
|
<Form |
|
|
|
ref="formRefProcess" |
|
|
|
:schema="formAllSchemasProcess" |
|
|
|
:is-col="true" |
|
|
|
labelWidth="150px" |
|
|
|
/> |
|
|
|
<div class="small-title">检验特性</div> |
|
|
|
<Form |
|
|
|
ref="formRefFeatures" |
|
|
|
:schema="formAllSchemasFeatures" |
|
|
|
:is-col="true" |
|
|
|
labelWidth="150px" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <el-tabs |
|
|
|
<!-- <Form ref="formRefMain" :schema="formAllSchemasMain" :is-col="true" :rules="rules" /> --> |
|
|
|
<el-form :model="data" label-width="auto"> |
|
|
|
<el-row> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="编码"> |
|
|
|
<el-input v-model="data.code" placeholder="根据系统生成" :disabled="true"/> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="描述"> |
|
|
|
<el-input v-model="data.description" placeholder="请填写描述"/> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="版本"> |
|
|
|
<el-input v-model="data.version" placeholder="请填写版本"/> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
<el-tabs |
|
|
|
v-model="editableTabsValue" |
|
|
|
editable |
|
|
|
class="demo-tabs" |
|
|
|
@edit="handleTabsEdit" |
|
|
|
type="border-card" |
|
|
|
tab-position="left" |
|
|
|
:stretch="false" |
|
|
|
> |
|
|
|
<el-tab-pane |
|
|
|
v-for="item in editableTabs" |
|
|
|
<el-tab-pane |
|
|
|
v-for="item in data.process" |
|
|
|
:key="item.name" |
|
|
|
:label="item.title" |
|
|
|
:label="item.description" |
|
|
|
:name="item.name" |
|
|
|
> |
|
|
|
<template #label> |
|
|
|
<span class="custom-tabs-label"> |
|
|
|
<el-icon><calendar /></el-icon> |
|
|
|
<span>Route</span> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
<div class="small-title">检验工序</div> |
|
|
|
<Form |
|
|
|
ref="formRefProcess" |
|
|
|
<!-- <Form |
|
|
|
:ref="`formRefProcess`+index" |
|
|
|
:schema="formAllSchemasProcess" |
|
|
|
:is-col="true" |
|
|
|
labelWidth="150px" |
|
|
|
/> |
|
|
|
:rules="rules" |
|
|
|
/> --> |
|
|
|
<el-form :model="item" label-width="auto"> |
|
|
|
<el-row :gutter="20"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="编码"> |
|
|
|
<el-input v-model="item.code" placeholder="根据系统生成" :disabled="true"/> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="检验方案模板编码"> |
|
|
|
<el-input v-model="item.inspectionCode" placeholder="根据系统生成" :disabled="true"/> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="描述"> |
|
|
|
<el-input v-model="item.description" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="顺序号"> |
|
|
|
<el-input v-model="item.sequenceCode" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="检验特性编码"> |
|
|
|
<el-input v-model="item.inspectionCharCode" placeholder="根据系统生成" :disabled="true"/> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
<div class="small-title">检验特性</div> |
|
|
|
<Form |
|
|
|
ref="formRefFeatures" |
|
|
|
:schema="formAllSchemasFeatures" |
|
|
|
:is-col="true" |
|
|
|
labelWidth="150px" |
|
|
|
/> |
|
|
|
<el-form :model="item" label-width="auto"> |
|
|
|
<el-row :gutter="20"> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="编码"> |
|
|
|
<el-input v-model="item.inspectionCharacteristicsBaseVO.code" placeholder="根据系统生成" :disabled="true"/> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="描述"> |
|
|
|
<el-input v-model="item.inspectionCharacteristicsBaseVO.description" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="检验方法编码"> |
|
|
|
<el-select v-model="item.inspectionCharacteristicsBaseVO.inspectionMethodCode" placeholder="请选择检验方法编码"> |
|
|
|
<el-option |
|
|
|
v-for="item in inspectionProcessList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.description" |
|
|
|
:value="item.id" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="采样过程编码"> |
|
|
|
<el-select v-model="item.inspectionCharacteristicsBaseVO.inspectionProcessPage" placeholder="请选择采样过程编码"> |
|
|
|
<el-option |
|
|
|
v-for="item in inspectionProcessList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.description" |
|
|
|
:value="item.id" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="动态修改规则编码"> |
|
|
|
<el-select v-model="item.inspectionCharacteristicsBaseVO.inspectionMethod" placeholder="请选择动态修改规则编码"> |
|
|
|
<el-option |
|
|
|
v-for="item in inspectionProcessList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.description" |
|
|
|
:value="item.id" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="是否允许修改特征值"> |
|
|
|
<el-select v-model="item.inspectionCharacteristicsBaseVO.isCanUpdate" placeholder="请选择是否允许修改特征值"> |
|
|
|
<el-option |
|
|
|
v-for="item in isYesList" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="结果录入方式"> |
|
|
|
<el-select v-model="item.inspectionCharacteristicsBaseVO.resultEntryMethod" placeholder="请选择结果录入方式"> |
|
|
|
<el-option |
|
|
|
v-for="dict in getStrDictOptions(DICT_TYPE.INSPECTION_CHARACTERISTICS_RESULT_ENTRY)" |
|
|
|
:key="dict.value" |
|
|
|
:label="dict.label" |
|
|
|
:value="dict.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="特征类型"> |
|
|
|
<!-- <el-input v-model="item.featureType" /> --> |
|
|
|
<el-select v-model="item.inspectionCharacteristicsBaseVO.featureType" placeholder="请选择特征类型"> |
|
|
|
<el-option |
|
|
|
v-for="dict in getStrDictOptions(DICT_TYPE.INSPECTION_CHARACTERISTICS_FEATURE_TYPE)" |
|
|
|
:key="dict.value" |
|
|
|
:label="dict.label" |
|
|
|
:value="dict.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
|
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="是否设定上限"> |
|
|
|
<el-select v-model="item.inspectionCharacteristicsBaseVO.quantifyIsCapping" placeholder="请选择是否设定上限"> |
|
|
|
<el-option |
|
|
|
v-for="item in isYesList" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="是否设定下限"> |
|
|
|
<el-select v-model="item.inspectionCharacteristicsBaseVO.quantifyIsLowlimit" placeholder="请选择是否设定下限"> |
|
|
|
<el-option |
|
|
|
v-for="item in isYesList" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="目标值"> |
|
|
|
<el-input v-model="item.inspectionCharacteristicsBaseVO.quantifyTarget" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="上限值"> |
|
|
|
<el-input v-model="item.inspectionCharacteristicsBaseVO.quantifyCapping" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="下限值"> |
|
|
|
<el-input v-model="item.inspectionCharacteristicsBaseVO.quantifyLowlimit" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="计量单位"> |
|
|
|
<el-input v-model="item.inspectionCharacteristicsBaseVO.quantifyUom" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="小数位"> |
|
|
|
<el-input v-model="item.inspectionCharacteristicsBaseVO.quantifyDecimal" /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-form-item label="选择集编码"> |
|
|
|
<el-select v-model="item.inspectionCharacteristicsBaseVO.quantifyQuantifyCode" placeholder="请选择集编码"> |
|
|
|
<el-option |
|
|
|
v-for="item in inspectionProcessList" |
|
|
|
:key="item.id" |
|
|
|
:label="item.description" |
|
|
|
:value="item.id" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> --> |
|
|
|
</el-tabs> |
|
|
|
</div> |
|
|
|
<template #footer> |
|
|
|
<ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" /> |
|
|
|
</template> |
|
|
|
</Dialog> |
|
|
|
<Dialog title="修改名称" v-model="dialogVisibleName" width="500px" :close-on-click-modal="false"> |
|
|
|
<div style="padding: 0px 20px"> |
|
|
|
<el-input v-model="name" style="width: 240px" placeholder="请输入名称" /> |
|
|
|
</div> |
|
|
|
<template #footer> |
|
|
|
<ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick1" /> |
|
|
|
</template> |
|
|
|
</Dialog> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import * as defaultButtons from '@/utils/disposition/defaultButtons' |
|
|
|
import { json } from 'stream/consumers' |
|
|
|
import { getCurrentInstance } from 'vue' |
|
|
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' |
|
|
|
import * as InspectionProcessPageApi from '@/api/qms/inspectionTemplate' |
|
|
|
const inspectionProcessList = ref([]) |
|
|
|
const isYesList = ref([]) |
|
|
|
onMounted(async()=>{ |
|
|
|
let inspectionProcessPage = await InspectionProcessPageApi.getInspectionProcessPage() |
|
|
|
inspectionProcessList.value = inspectionProcessPage.list |
|
|
|
console.log(inspectionProcessList) |
|
|
|
|
|
|
|
isYesList.value =[{ |
|
|
|
value:0, |
|
|
|
label:'是' |
|
|
|
},{ |
|
|
|
value:1, |
|
|
|
label:'否' |
|
|
|
}] |
|
|
|
}) |
|
|
|
const props = defineProps({ |
|
|
|
// 显示窗口宽度设置 |
|
|
|
basicFormWidth: { |
|
|
@ -126,6 +297,12 @@ const props = defineProps({ |
|
|
|
type: Array, |
|
|
|
required: false, |
|
|
|
default: null |
|
|
|
}, |
|
|
|
// 校验rules |
|
|
|
rules: { |
|
|
|
type: Object, |
|
|
|
required: true, |
|
|
|
default: null |
|
|
|
} |
|
|
|
}) |
|
|
|
const { t } = useI18n() // 国际化 |
|
|
@ -135,25 +312,16 @@ const dialogTitle = ref('') // 弹窗的标题 |
|
|
|
const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 |
|
|
|
const formType = ref('') // 表单的类型:create - 新增;update - 修改 |
|
|
|
const dialogWidth = ref() |
|
|
|
const form = reactive({ |
|
|
|
name: '', |
|
|
|
region: '', |
|
|
|
date1: '', |
|
|
|
date2: '', |
|
|
|
delivery: false, |
|
|
|
type: [], |
|
|
|
resource: '', |
|
|
|
desc: '' |
|
|
|
const data = ref({ |
|
|
|
code: '', |
|
|
|
description:'', |
|
|
|
version:'', |
|
|
|
process:[] |
|
|
|
}) |
|
|
|
const chooseIndex = ref(0) |
|
|
|
const formAllSchemasFeatures = ref(props.formAllSchemasFeatures?.formSchema) |
|
|
|
const formAllSchemasProcess = ref(props.formAllSchemasProcess?.formSchema) |
|
|
|
const formAllSchemasMain = ref(props.formAllSchemasMain?.formSchema) |
|
|
|
|
|
|
|
const formRefMain = ref('') |
|
|
|
const formRefProcess = ref('') |
|
|
|
const formRefFeatures = ref('') |
|
|
|
|
|
|
|
const dialogVisibleName = ref(false) |
|
|
|
const name = ref('') |
|
|
|
const onSubmit = () => { |
|
|
|
console.log('submit!') |
|
|
|
} |
|
|
@ -170,40 +338,96 @@ const open = async (type: string, row?: any, masterParmas?: any, titleName?: any |
|
|
|
} else { |
|
|
|
dialogTitle.value = t('action.' + type) |
|
|
|
} |
|
|
|
try { |
|
|
|
nextTick(() => { |
|
|
|
formRefMain.value.setValues(data.value) |
|
|
|
formRefProcess.value.setValues(data.value.list[0]) |
|
|
|
}) |
|
|
|
} finally { |
|
|
|
formLoading.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
defineExpose({ open, dialogVisible, formLoading }) // 提供 open 方法,用于打开弹窗 |
|
|
|
import type { TabPaneName } from 'element-plus' |
|
|
|
|
|
|
|
const data = ref({ |
|
|
|
code: '', |
|
|
|
description: '', |
|
|
|
version: '', |
|
|
|
list: [ |
|
|
|
{ |
|
|
|
description: '哈哈哈', |
|
|
|
code: '', |
|
|
|
sequenceCode: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
description: '呵呵呵', |
|
|
|
isEdit: false, |
|
|
|
code: '555', |
|
|
|
sequenceCode: '6666' |
|
|
|
}, |
|
|
|
{ |
|
|
|
description: '哈呵呵', |
|
|
|
isEdit: false |
|
|
|
let tabIndex = 1 |
|
|
|
const editableTabsValue = ref('1') |
|
|
|
// const editableTabs = ref([]) |
|
|
|
|
|
|
|
const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' | 'add') => { |
|
|
|
if (action === 'add') { |
|
|
|
name.value = '' |
|
|
|
dialogVisibleName.value = true |
|
|
|
} else if (action === 'remove') { |
|
|
|
const tabs = data.value.process |
|
|
|
let activeName = editableTabsValue.value |
|
|
|
if (activeName === targetName) { |
|
|
|
tabs.forEach((tab, index) => { |
|
|
|
if (tab.name === targetName) { |
|
|
|
const nextTab = tabs[index + 1] || tabs[index - 1] |
|
|
|
if (nextTab) { |
|
|
|
activeName = nextTab.name |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
] |
|
|
|
}) |
|
|
|
editableTabsValue.value = activeName |
|
|
|
data.value.process = tabs.filter((tab) => tab.name !== targetName) |
|
|
|
} |
|
|
|
} |
|
|
|
/** 修改名称时间 */ |
|
|
|
const buttonBaseClick1 = (val) => { |
|
|
|
// 保存 |
|
|
|
console.log(val) |
|
|
|
if (val == 'save') { |
|
|
|
const newTabName = `${++tabIndex}` |
|
|
|
data.value.process.push({ |
|
|
|
description: name.value, |
|
|
|
name: newTabName, |
|
|
|
inspectionCode: '', |
|
|
|
sequenceCode: '', |
|
|
|
inspectionCharCode: '', |
|
|
|
inspectionCharacteristicsBaseVO:{ |
|
|
|
describe: '', |
|
|
|
inspectionMethodCode: '', |
|
|
|
dynamicUpdateCode: '', |
|
|
|
inspectionMethod: '', |
|
|
|
isCanUpdate: '', |
|
|
|
isDestructionInspection: '', |
|
|
|
resultEntryMethod: '', |
|
|
|
featureType: '', |
|
|
|
quantifyIsCapping: '', |
|
|
|
quantifyIsLowlimit: '', |
|
|
|
quantifyTarget: '', |
|
|
|
quantifyCapping: '', |
|
|
|
quantifyLowlimit: '', |
|
|
|
quantifyUom: '', |
|
|
|
quantifyDecimal: '', |
|
|
|
quantifyQuantifyCode: '' |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
console.log( data.value.process) |
|
|
|
|
|
|
|
editableTabsValue.value = newTabName |
|
|
|
dialogVisibleName.value = false |
|
|
|
} |
|
|
|
// 关闭 |
|
|
|
else if (val == 'close') { |
|
|
|
dialogVisibleName.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
const buttonBaseClick = (val) => { |
|
|
|
// 保存 |
|
|
|
if (val == 'save') { |
|
|
|
submitForm() |
|
|
|
} |
|
|
|
// 关闭 |
|
|
|
else if (val == 'close') { |
|
|
|
dialogVisible.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
const submitForm = async () => { |
|
|
|
// const data1= unref(formRefMain)?.formModel |
|
|
|
// const data2= unref(formRefProcess)?.formModel |
|
|
|
// const data3= unref(formRefFeatures)?.formModel |
|
|
|
// console.log(data1) |
|
|
|
// console.log(data2) |
|
|
|
console.log(data.list) |
|
|
|
emit('submitForm', formType.value, data) |
|
|
|
} |
|
|
|
/** 弹窗按钮 */ |
|
|
|
let Butttondata: any = [] |
|
|
|
if (props.footButttondata) { |
|
|
@ -214,91 +438,21 @@ if (props.footButttondata) { |
|
|
|
defaultButtons.formCloseBtn(null) // 关闭 |
|
|
|
] |
|
|
|
} |
|
|
|
// 编辑名字 |
|
|
|
const editName = (item) => { |
|
|
|
if(!item.description){ |
|
|
|
p |
|
|
|
return; |
|
|
|
} |
|
|
|
item.isEdit = !item.isEdit |
|
|
|
} |
|
|
|
// 添加工序 |
|
|
|
const addProcess = () => { |
|
|
|
data.value.list.push({ |
|
|
|
name: '哈哈哈', |
|
|
|
isEdit: true |
|
|
|
}) |
|
|
|
} |
|
|
|
// 删除工序 |
|
|
|
const delProcess = (index) => { |
|
|
|
data.value.list.splice(index, 1) |
|
|
|
} |
|
|
|
|
|
|
|
const chooseItem = (item, index) => { |
|
|
|
const data1 = JSON.parse(JSON.stringify(unref(formRefProcess)?.formModel)) |
|
|
|
data.value.list.forEach((element,index) => { |
|
|
|
if (element.code == data1.code) { |
|
|
|
data.value.list[index] =JSON.parse(JSON.stringify( data1)) |
|
|
|
} |
|
|
|
}) |
|
|
|
chooseIndex.value = index |
|
|
|
formRefProcess.value.setValues(item) |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
<style scoped> |
|
|
|
.small-title { |
|
|
|
font-weight: bold; |
|
|
|
padding: 0px 10px 10px; |
|
|
|
color: #1a8bfc; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style> |
|
|
|
.el-tabs--left .el-tabs__header.is-left { |
|
|
|
min-height: 700px !important; |
|
|
|
min-width: 150px !important; |
|
|
|
} |
|
|
|
.tab-pane { |
|
|
|
border: 1px solid #dcdfe6; |
|
|
|
display: flex; |
|
|
|
.left { |
|
|
|
background: #f5f7fa; |
|
|
|
width: 200px; |
|
|
|
border-right: 1px solid #dcdfe6; |
|
|
|
position: relative; |
|
|
|
.plus { |
|
|
|
position: absolute; |
|
|
|
right: 0px; |
|
|
|
border: 1px solid #dcdfe6; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 2px; |
|
|
|
top: 8px; |
|
|
|
border-radius: 4px; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
.left-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
height: 36px; |
|
|
|
margin-bottom: 10px; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
.name { |
|
|
|
width: 120px; |
|
|
|
overflow: hidden; |
|
|
|
padding: 0px 10px; |
|
|
|
height: 36px; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
line-height: 36px; |
|
|
|
} |
|
|
|
} |
|
|
|
.active { |
|
|
|
background: white; |
|
|
|
} |
|
|
|
} |
|
|
|
.right { |
|
|
|
flex: 1; |
|
|
|
padding: 20px; |
|
|
|
} |
|
|
|
.el-tabs--left.el-tabs--border-card .el-tabs__item.is-left { |
|
|
|
min-width: 120px !important; |
|
|
|
} |
|
|
|
</style> |
|
|
|