r
/
hangtag
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化 修复表中图片预览层级错乱问题

This commit is contained in:
YuanFeng 2024-10-10 20:42:26 +08:00
parent 20c6ca8beb
commit 018f89c050
8 changed files with 78 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
hangtag-ui/hangtag-ui-admin/src/styles/index.scss
View File

@ -34,3 +34,13 @@
border-left-color: var(--el-color-primary);
}
}
// 单元格样式
.el-table__cell {
position: static !important; // 解决el-image 和 el-table冲突层级冲突问题
}
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}

61
hangtag-ui/hangtag-ui-admin/src/views/oms/brand/BrandForm.vue
View File

@ -1,5 +1,8 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<Dialog
:title="dialogTitle"
width="60vw"
v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
@ -15,34 +18,48 @@
</div>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称" />
</el-form-item>
<el-row>
<el-col :span="12">
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="品牌领域" prop="brandField">
<el-select v-model="formData.brandField" placeholder="请选择品牌领域">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.BRAND_INDUSTRY_FIELD)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="logo" prop="logo">
<UploadImg v-model="formData.logo" />
</el-form-item>
<el-form-item label="品牌领域" prop="brandField">
<el-select v-model="formData.brandField" placeholder="请选择品牌领域">
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.BRAND_INDUSTRY_FIELD)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="官网" prop="website">
<el-input v-model="formData.website" placeholder="请输入官网" />
</el-form-item>
<el-form-item label="品牌介绍 富文本内容" prop="intro">
<el-row>
<el-col :span="12">
<el-form-item label="官网" prop="website">
<el-input v-model="formData.website" placeholder="请输入官网" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="品牌介绍" prop="intro">
<Editor v-model="formData.intro" height="150px" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>

9
hangtag-ui/hangtag-ui-admin/src/views/oms/brand/index.vue
View File

@ -79,12 +79,17 @@
<!-- 列表 -->
<ContentWrap>
<el-table border v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="id" align="center" prop="id" />
<el-table-column label="系统编码" align="center" prop="code" width="200"/>
<el-table-column label="名称" align="center" prop="name" />
<el-table-column label="logo" align="center" prop="logo" >
<template #default="scope">
<img v-if="scope.row.logo" :src="scope.row.logo" width="50" height="50" />
<el-image
v-if="scope.row.logo"
style="width: 50px; height: 50px"
:src="scope.row.logo"
:preview-src-list="[scope.row.logo]"
/>
<span v-else>-</span>
</template>
</el-table-column>>

22
hangtag-ui/hangtag-ui-admin/src/views/oms/draftdesigndata/index.vue
View File

@ -37,21 +37,7 @@
class="!w-240px"
/>
</el-form-item>
<el-form-item label="语言标识" prop="locale">
<el-select
v-model="queryParams.locale"
placeholder="请选择语言"
clearable
class="!w-240px"
>
<el-option
v-for="dict in getStrDictOptions(DICT_TYPE.LANGUAGE_LOCALE)"
:key="`${dict.value}`"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="启用状态" prop="enabled">
<el-select
v-model="queryParams.enabled"
@ -102,13 +88,11 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table border v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="id" align="center" prop="id" />
<el-table-column label="编码" align="center" prop="code" />
<el-table-column label="编码" align="center" prop="code" width="200" />
<el-table-column label="设计稿名称" align="center" prop="name" />
<el-table-column label="作者" align="center" prop="author" />
<el-table-column label="版本" align="center" prop="version" />
<el-table-column label="启用状态" align="center" prop="enabled">
<template #default="scope">
<el-tag :type="scope.row.enabled ? 'success' : 'danger'">

8
hangtag-ui/hangtag-ui-admin/src/views/oms/productcareitem/index.vue
View File

@ -90,13 +90,7 @@
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button

24
hangtag-ui/hangtag-ui-admin/src/views/oms/productinfo/ProductInfoForm.vue
View File

@ -129,7 +129,7 @@
<template #header>
<div>
<span class="color-red">*</span>
<span>风格主色名称</span>
<span>主色名称</span>
</div>
</template>
<template #default="scope">
@ -270,9 +270,9 @@ const formData = ref({
enabled: true,
remark: undefined,
details: undefined,
specSizeWidth: 1,
specSizeHeight: 1,
specSizeThk: 1,
specSizeWidth: 0,
specSizeHeight: 0,
specSizeThk: 0,
specMaterial: '',
})
const that = reactive({
@ -343,10 +343,10 @@ const formRules = reactive({
name: [{required: true, message: '产品名称不能为空', trigger: 'blur'}],
brandId: [{required: true, message: '产品类型选择品牌', trigger: 'blur'}],
productTypeId: [{required: true, message: '请选择产品类型', trigger: 'blur'}],
specSizeWidth: [{required: true, message: '请填写规格的宽度', trigger: 'blur'}],
specSizeHeight: [{required: true, message: '请填写规格的高(长)度', trigger: 'blur'}],
specSizeThk: [{required: true, message: '请填写厚度', trigger: 'blur'}],
specMaterial: [{required: true, message: '请填写材质说明', trigger: 'blur'}],
specSizeWidth: [{required: false, message: '请填写规格的宽度', trigger: 'blur'}],
specSizeHeight: [{required: false, message: '请填写规格的高(长)度', trigger: 'blur'}],
specSizeThk: [{required: false, message: '请填写厚度', trigger: 'blur'}],
specMaterial: [{required: false, message: '请填写材质说明', trigger: 'blur'}],
})
const formRef = ref() // 表单 Ref
@ -502,14 +502,14 @@ const resetForm = () => {
enabled: true,
remark: undefined,
details: undefined,
specSizeWidth: 1,
specSizeHeight: 1,
specSizeThk: 1,
specSizeWidth: 0,
specSizeHeight: 0,
specSizeThk: 0,
specMaterial: '',
}
that.draftDesignList = [{
remark: '',
label: '',
label: '默认',
id: ''
}]
that.processInfoList =[{

11
hangtag-ui/hangtag-ui-admin/src/views/oms/productinfo/index.vue
View File

@ -27,13 +27,7 @@
/>
</el-form-item>
<el-form-item label="品牌" prop="brandId">
<el-input
v-model="queryParams.brandId"
placeholder="请输入品牌"
clearable
@keyup.enter="handleQuery"
class="!w-240px"
/>
<BrandDataListDialog v-model="queryParams.brandId" placeholder="请选择品牌"/>
</el-form-item>
<el-form-item label="产品类型" prop="productTypeId">
@ -113,14 +107,13 @@
<ContentWrap>
<DesignPreviewDialog ref="designPreviewDialogRef"/>
<el-table border v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="id" align="center" prop="id"/>
<el-table-column label="产品编码" align="center" prop="code" width="200"/>
<el-table-column label="产品名称" align="center" prop="name"/>
<el-table-column label="封面" align="center" prop="cover">
<template #default="scope">
<el-image
v-if="scope.row.cover"
style="width: 64px; height: 64px"
style="width: 50px; height: 50px"
:src="scope.row.cover"
:preview-src-list="[scope.row.cover]"
/>

5
hangtag-ui/hangtag-ui-front/src/styles/index.scss
View File

@ -35,7 +35,10 @@
}
}
// 单元格样式
.el-table__cell {
position: static !important; // 解决el-image 和 el-table冲突层级冲突问题
}
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;