style: 修改工厂建模中产品BOM的新增/编辑弹框样式

main
zhongwenkai 2 weeks ago
parent 56a959bdd1
commit 39ca00a09c

@ -1,53 +1,62 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="1200px" :close-on-click-modal="false">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" v-loading="formLoading">
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogCodeLabel')" prop="code">
<el-input v-model="formData.code" :placeholder="t('FactoryModeling.ProductBOM.dialogCodePlaceholder')"
:disabled="formType === 'update'" />
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogVersionLabel')" prop="version">
<el-input v-model="formData.version" :placeholder="t('FactoryModeling.ProductBOM.dialogVersionPlaceholder')" />
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogProductLabel')" prop="productId">
<el-select v-model="formData.productId" clearable filterable
:placeholder="t('FactoryModeling.ProductBOM.dialogProductPlaceholder')" class="!w-1/1">
<el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogUnitLabel')" prop="unitId">
<el-select v-model="formData.unitId" clearable
:placeholder="t('FactoryModeling.ProductBOM.dialogUnitPlaceholder')" class="w-1/1">
<el-option v-for="unit in unitList" :key="unit.id" :label="unit.name" :value="unit.id" />
</el-select>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogYieldRateLabel')" prop="yieldRate">
<el-input-number v-model="formData.yieldRate" :min="0" :max="100" :precision="2" class="!w-1/1"
:placeholder="t('FactoryModeling.ProductBOM.dialogYieldRatePlaceholder')" />
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogRemarkLabel')" prop="remark">
<el-input type="textarea" v-model="formData.remark"
:placeholder="t('FactoryModeling.ProductBOM.dialogRemarkPlaceholder')" />
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogEnableLabel')" prop="isEnable">
<el-radio-group v-model="formData.isEnable">
<el-radio v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" :key="dict.value"
:label="dict.value">
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<!-- 子表的表单 -->
<el-tabs v-model="subTabsName">
<el-tab-pane :label="t('FactoryModeling.ProductBOM.detailTabLabel')" name="bomDetail">
<BomDetailForm ref="bomDetailFormRef" :bom-id="formData.id" />
</el-tab-pane>
</el-tabs>
<template #footer>
<div class="dv-repair-panel">
<div class="dv-repair-panel__header">
<div class="dv-repair-panel__title">{{ dialogTitle }}</div>
<el-button text @click="closeForm">
<Icon icon="ep:close" />
</el-button>
</div>
<div class="dv-repair-dialog" v-loading="formLoading">
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogCodeLabel')" prop="code">
<el-input v-model="formData.code" :placeholder="t('FactoryModeling.ProductBOM.dialogCodePlaceholder')"
:disabled="formType === 'update'" />
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogVersionLabel')" prop="version">
<el-input v-model="formData.version" :placeholder="t('FactoryModeling.ProductBOM.dialogVersionPlaceholder')" />
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogProductLabel')" prop="productId">
<el-select v-model="formData.productId" clearable filterable
:placeholder="t('FactoryModeling.ProductBOM.dialogProductPlaceholder')" class="!w-1/1">
<el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogUnitLabel')" prop="unitId">
<el-select v-model="formData.unitId" clearable
:placeholder="t('FactoryModeling.ProductBOM.dialogUnitPlaceholder')" class="w-1/1">
<el-option v-for="unit in unitList" :key="unit.id" :label="unit.name" :value="unit.id" />
</el-select>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogYieldRateLabel')" prop="yieldRate">
<el-input-number v-model="formData.yieldRate" :min="0" :max="100" :precision="2" class="!w-1/1"
:placeholder="t('FactoryModeling.ProductBOM.dialogYieldRatePlaceholder')" />
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogRemarkLabel')" prop="remark">
<el-input type="textarea" v-model="formData.remark"
:placeholder="t('FactoryModeling.ProductBOM.dialogRemarkPlaceholder')" />
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.dialogEnableLabel')" prop="isEnable">
<el-radio-group v-model="formData.isEnable">
<el-radio v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" :key="dict.value"
:label="dict.value">
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<!-- 子表的表单 -->
<el-tabs v-model="subTabsName">
<el-tab-pane :label="t('FactoryModeling.ProductBOM.detailTabLabel')" name="bomDetail">
<BomDetailForm ref="bomDetailFormRef" :bom-id="formData.id" />
</el-tab-pane>
</el-tabs>
</div>
<div class="dv-repair-footer">
<el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
<el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
<el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
</template>
</Dialog>
</div>
</div>
</template>
<script setup lang="ts">
import { getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
@ -56,19 +65,18 @@ import BomDetailForm from './components/BomDetailForm.vue'
import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
import { ProductApi, ProductVO } from '@/api/erp/product/product'
const productList = ref<ProductVO[]>([]) //
const unitList = ref<ProductUnitVO[]>([]) //
const productList = ref<ProductVO[]>([])
const unitList = ref<ProductUnitVO[]>([])
/** 产品BOM 表单 */
defineOptions({ name: 'BomForm' })
const { t } = useI18n() //
const message = useMessage() //
const { t } = useI18n()
const message = useMessage()
const dialogVisible = ref(false) //
const dialogTitle = ref('') //
const formLoading = ref(false) // 12
const formType = ref('') // create - update -
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')
const formData = ref({
id: undefined,
code: undefined,
@ -86,19 +94,20 @@ const formRules = reactive({
unitId: [{ required: true, message: t('FactoryModeling.ProductBOM.validatorUnitRequired'), trigger: 'blur' }],
isEnable: [{ required: true, message: t('FactoryModeling.ProductBOM.validatorEnableRequired'), trigger: 'blur' }]
})
const formRef = ref() // Ref
const formRef = ref()
/** 子表的表单 */
const subTabsName = ref('bomDetail')
const bomDetailFormRef = ref()
let openRequestId = 0
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
const currentOpenId = ++openRequestId
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
//
if (id) {
formLoading.value = true
try {
@ -107,33 +116,35 @@ const open = async (type: string, id?: number) => {
formLoading.value = false
}
}
if (type === 'detail') {
}
//
unitList.value = await ProductUnitApi.getProductUnitSimpleList()
//
productList.value = await ProductApi.getMesProductSimpleList()
}
defineExpose({ open }) // open
defineExpose({ open })
const emit = defineEmits(['success', 'closed'])
const closeForm = () => {
openRequestId++
emit('closed')
}
onBeforeUnmount(() => {
openRequestId++
})
/** 提交表单 */
const emit = defineEmits(['success']) // success
const submitForm = async () => {
//
await formRef.value.validate()
//
try {
await bomDetailFormRef.value.validate()
} catch (e) {
subTabsName.value = 'bomDetail'
return
}
//
formLoading.value = true
try {
const data = formData.value as unknown as BomVO
//
data.bomDetails = bomDetailFormRef.value.getData()
if (formType.value === 'create') {
await BomApi.createBom(data)
@ -143,9 +154,8 @@ const submitForm = async () => {
await BomApi.updateBom(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
//
emit('success')
closeForm()
} finally {
formLoading.value = false
}
@ -166,3 +176,58 @@ const resetForm = () => {
formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.dv-repair-panel {
background: #fff;
border-radius: 12px;
box-shadow: var(--el-box-shadow-light);
}
.dv-repair-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #ebeef5;
}
.dv-repair-panel__title {
color: #1f2937;
font-size: 18px;
font-weight: 600;
}
.dv-repair-dialog {
max-height: calc(100vh - 220px);
padding: 20px 20px 0;
padding-right: 16px;
overflow-y: auto;
}
.dv-repair-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
width: 100%;
padding: 16px 20px 20px;
border-top: 1px solid #ebeef5;
}
@media (max-width: 768px) {
.dv-repair-panel__header {
padding: 14px 16px;
}
.dv-repair-dialog {
max-height: none;
padding: 16px 16px 0;
overflow-y: visible;
}
.dv-repair-footer {
padding: 16px;
}
}
</style>

@ -1,155 +1,158 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
min-label-width="80px"
>
<el-form-item :label="t('FactoryModeling.ProductBOM.searchCodeLabel')" prop="code">
<el-input
v-model="queryParams.code"
:placeholder="t('FactoryModeling.ProductBOM.searchCodePlaceholder')"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.searchProductLabel')" prop="productId">
<el-select v-model="queryParams.productId" @change="handleQuery" clearable filterable :placeholder="t('FactoryModeling.ProductBOM.searchProductPlaceholder')" class="!w-240px">
<el-option
v-for="item in productList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.searchRemarkLabel')" prop="remark">
<el-input
v-model="queryParams.remark"
:placeholder="t('FactoryModeling.ProductBOM.searchRemarkPlaceholder')"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.searchEnableLabel')" prop="isEnable" v-show="showAllFilters">
<el-select
v-model="queryParams.isEnable"
:placeholder="t('FactoryModeling.ProductBOM.searchEnablePlaceholder')"
clearable
@change="handleQuery"
class="!w-240px"
>
<el-option
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item v-if="filterCount > 3">
<el-button type="text" class="text-primary" @click="toggleFilters">
<Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
{{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') : t('FactoryModeling.FactoryStructure.expandText') }}
</el-button>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.searchButtonText') }}</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.resetButtonText') }}</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['mes:bom:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.addButtonText') }}
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['mes:bom:export']"
<div class="dv-repair-page">
<template v-if="!formVisible">
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
min-label-width="80px"
>
<Icon icon="ep:download" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.exportButtonText') }}
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<el-form-item :label="t('FactoryModeling.ProductBOM.searchCodeLabel')" prop="code">
<el-input
v-model="queryParams.code"
:placeholder="t('FactoryModeling.ProductBOM.searchCodePlaceholder')"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.searchProductLabel')" prop="productId">
<el-select v-model="queryParams.productId" @change="handleQuery" clearable filterable :placeholder="t('FactoryModeling.ProductBOM.searchProductPlaceholder')" class="!w-240px">
<el-option
v-for="item in productList"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<!-- 子表的列表 -->
<el-table-column type="expand">
<template #default="scope">
<el-tabs model-value="bomDetail">
<el-tab-pane :label="t('FactoryModeling.ProductBOM.detailTabLabel')" name="bomDetail">
<BomDetailList :bom-id="scope.row.id" />
</el-tab-pane>
</el-tabs>
</template>
</el-table-column>
<!-- <el-table-column label="ID" align="center" prop="id" /> -->
<el-table-column :label="t('FactoryModeling.ProductBOM.tableCodeColumn')" align="center" prop="code" sortable/>
<el-table-column :label="t('FactoryModeling.ProductBOM.tableVersionColumn')" align="center" prop="version" />
<el-table-column :label="t('FactoryModeling.ProductBOM.tableProductColumn')" align="center" prop="productName" sortable />
<el-table-column :label="t('FactoryModeling.ProductBOM.tableUnitColumn')" align="center" prop="unitName" sortable />
<el-table-column :label="t('FactoryModeling.ProductBOM.tableYieldRateColumn')" align="center" prop="yieldRate" sortable/>
<el-table-column :label="t('FactoryModeling.ProductBOM.tableRemarkColumn')" align="center" prop="remark" />
<el-table-column :label="t('FactoryModeling.ProductBOM.tableEnableColumn')" align="center" prop="isEnable">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isEnable" />
</template>
</el-table-column>
<el-table-column
:label="t('FactoryModeling.ProductBOM.tableCreateTimeColumn')"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
sortable
/>
<el-table-column :label="t('FactoryModeling.ProductBOM.tableOperateColumn')" align="center" fixed="right" width="150">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['mes:bom:update']"
>
{{ t('FactoryModeling.ProductBOM.tableEditAction') }}
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['mes:bom:delete']"
>
{{ t('FactoryModeling.ProductBOM.tableDeleteAction') }}
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<el-form-item :label="t('FactoryModeling.ProductBOM.searchRemarkLabel')" prop="remark">
<el-input
v-model="queryParams.remark"
:placeholder="t('FactoryModeling.ProductBOM.searchRemarkPlaceholder')"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item :label="t('FactoryModeling.ProductBOM.searchEnableLabel')" prop="isEnable" v-show="showAllFilters">
<el-select
v-model="queryParams.isEnable"
:placeholder="t('FactoryModeling.ProductBOM.searchEnablePlaceholder')"
clearable
@change="handleQuery"
class="!w-240px"
>
<el-option
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item v-if="filterCount > 3">
<el-button type="text" class="text-primary" @click="toggleFilters">
<Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
{{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') : t('FactoryModeling.FactoryStructure.expandText') }}
</el-button>
</el-form-item>
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.searchButtonText') }}</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.resetButtonText') }}</el-button>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['mes:bom:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.addButtonText') }}
</el-button>
<el-button
type="success"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['mes:bom:export']"
>
<Icon icon="ep:download" class="mr-5px" /> {{ t('FactoryModeling.ProductBOM.exportButtonText') }}
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<!-- 子表的列表 -->
<el-table-column type="expand">
<template #default="scope">
<el-tabs model-value="bomDetail">
<el-tab-pane :label="t('FactoryModeling.ProductBOM.detailTabLabel')" name="bomDetail">
<BomDetailList :bom-id="scope.row.id" />
</el-tab-pane>
</el-tabs>
</template>
</el-table-column>
<!-- <el-table-column label="ID" align="center" prop="id" /> -->
<el-table-column :label="t('FactoryModeling.ProductBOM.tableCodeColumn')" align="center" prop="code" sortable/>
<el-table-column :label="t('FactoryModeling.ProductBOM.tableVersionColumn')" align="center" prop="version" />
<el-table-column :label="t('FactoryModeling.ProductBOM.tableProductColumn')" align="center" prop="productName" sortable />
<el-table-column :label="t('FactoryModeling.ProductBOM.tableUnitColumn')" align="center" prop="unitName" sortable />
<el-table-column :label="t('FactoryModeling.ProductBOM.tableYieldRateColumn')" align="center" prop="yieldRate" sortable/>
<el-table-column :label="t('FactoryModeling.ProductBOM.tableRemarkColumn')" align="center" prop="remark" />
<el-table-column :label="t('FactoryModeling.ProductBOM.tableEnableColumn')" align="center" prop="isEnable">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isEnable" />
</template>
</el-table-column>
<el-table-column
:label="t('FactoryModeling.ProductBOM.tableCreateTimeColumn')"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
sortable
/>
<el-table-column :label="t('FactoryModeling.ProductBOM.tableOperateColumn')" align="center" fixed="right" width="150">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['mes:bom:update']"
>
{{ t('FactoryModeling.ProductBOM.tableEditAction') }}
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['mes:bom:delete']"
>
{{ t('FactoryModeling.ProductBOM.tableDeleteAction') }}
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
</template>
<!-- 表单弹窗添加/修改 -->
<BomForm ref="formRef" @success="getList" />
<BomForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
</div>
</template>
<script setup lang="ts">
@ -161,16 +164,16 @@ import BomForm from './BomForm.vue'
import BomDetailList from './components/BomDetailList.vue'
import { ProductApi, ProductVO } from '@/api/erp/product/product'
const productList = ref<ProductVO[]>([]) //
const productList = ref<ProductVO[]>([])
/** 产品BOM 列表 */
defineOptions({ name: 'Bom' })
const message = useMessage() //
const { t } = useI18n() //
const message = useMessage()
const { t } = useI18n()
const loading = ref(true) //
const list = ref<BomVO[]>([]) //
const total = ref(0) //
const loading = ref(true)
const list = ref<BomVO[]>([])
const total = ref(0)
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
@ -183,10 +186,11 @@ const queryParams = reactive({
isEnable: undefined,
createTime: []
})
const queryFormRef = ref() //
const exportLoading = ref(false) //
const showAllFilters = ref(false) //
const filterCount = 4 // codeproductIdremarkisEnable
const queryFormRef = ref()
const exportLoading = ref(false)
const showAllFilters = ref(false)
const filterCount = 4
const formVisible = ref(false)
/** 切换筛选框展开/折叠 */
const toggleFilters = () => {
@ -220,18 +224,18 @@ const resetQuery = () => {
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
formVisible.value = true
nextTick(() => {
formRef.value.open(type, id)
})
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
//
await message.delConfirm()
//
await BomApi.deleteBom(id)
message.success(t('common.delSuccess'))
//
await getList()
} catch {}
}
@ -239,9 +243,7 @@ const handleDelete = async (id: number) => {
/** 导出按钮操作 */
const handleExport = async () => {
try {
//
await message.exportConfirm()
//
exportLoading.value = true
const data = await BomApi.exportBom(queryParams)
download.excel(data, '产品BOM.xls')
@ -254,7 +256,6 @@ const handleExport = async () => {
/** 初始化 **/
onMounted(async () => {
await getList()
//
productList.value = await ProductApi.getMesProductSimpleList()
})
</script>

Loading…
Cancel
Save