Skip to content

F
factory_front
Commit 7b436e4b by qinjianhui
Options

fix: 打版管理小图加hover查看大图

parent f0b880d1
Showing with 125 additions and 93 deletions
src/views/typesetting/reviewModel.vue
......@@ -13,6 +13,7 @@
v-for="(val, index) in imageList"
:key="index"
class="color-image-item"
@mouseover="setMainImage(val.imagePath)"
>
<!-- <button class="remove" type="button">
<i class="el-icon-close"></i>
......@@ -26,102 +27,100 @@
</li> -->
</ul>
<div class="main-image">
<img :src="row?.mainImage" />
<img :src="mainImageUrl || row?.mainImage" />
</div>
</div>
<div class="review-from">
<ElForm
ref="reviewFormRef"
:model="reviewForm"
label-width="120px"
inline
>
<ElFormItem label="编码" prop="sku">
<ElInput
v-model="reviewForm.sku"
disabled
placeholder="编码"
style="width: 200px"
/>
</ElFormItem>
<ElFormItem label="负责人" prop="personInChargeId">
<ElSelect
v-model="reviewForm.personInChargeId"
style="width: 200px"
clearable
disabled
placeholder="请选择负责人"
>
<ElOption
v-for="item in userList"
:key="item.id"
:label="item.account"
:value="item.id"
></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem label="紧急程度" prop="urgentLevel">
<el-radio-group
v-model="reviewForm.urgentLevel"
style="width: 200px"
>
<el-radio
v-for="(item, index) in emergencyLevel"
:key="index"
<div>
<ElForm
ref="reviewFormRef"
:model="reviewForm"
label-width="120px"
inline
>
<ElFormItem label="编码" prop="sku">
<ElInput
v-model="reviewForm.sku"
disabled
placeholder="编码"
style="width: 200px"
/>
</ElFormItem>
<ElFormItem label="负责人" prop="personInChargeId">
<ElSelect
v-model="reviewForm.personInChargeId"
style="width: 200px"
clearable
disabled
:label="item.value"
placeholder="请选择负责人"
>
<svg
t="1627697200171"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="629"
width="18"
height="18"
<ElOption
v-for="item in userList"
:key="item.id"
:label="item.account"
:value="item.id"
></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem label="紧急程度" prop="urgentLevel">
<el-radio-group
v-model="reviewForm.urgentLevel"
style="width: 200px"
>
<el-radio
v-for="(item, index) in emergencyLevel"
:key="index"
disabled
:label="item.value"
>
<path
:fill="setColor(index)"
d="M444.970667 850.090667l151.978666-64.512a85.290667 85.290667 0 0 1-151.978666 64.512z m231.765333-760.746667c89.002667 48.597333 155.818667 111.018667 199.765333 187.178667 43.946667 76.117333 64.64 165.205333 62.250667 266.581333a32 32 0 0 1-64-1.536c2.133333-90.069333-15.872-167.552-53.674667-233.045333-37.802667-65.536-95.957333-119.850667-175.018666-163.029334a32 32 0 1 1 30.72-56.192z m-390.4 188.629333a248.490667 248.490667 0 0 1 324.266667 117.162667l4.181333 8.917333 54.954667 123.392 72.448 62.72c3.968 3.413333 7.381333 7.381333 11.349333 13.824l2.517333 4.906667a53.333333 53.333333 0 0 1-27.178666 70.357333L288.213333 874.24A53.333333 53.333333 0 0 1 213.333333 825.472l-0.042666-99.968-52.992-119.082667A248.405333 248.405333 0 0 1 286.293333 277.973333z m380.288-34.986666c41.258667 22.442667 74.325333 55.210667 98.816 97.621333 24.490667 42.453333 36.309333 87.466667 35.157333 134.442667a32 32 0 1 1-64-1.578667c0.853333-35.029333-7.893333-68.437333-26.581333-100.864-18.688-32.384-43.264-56.661333-74.026667-73.472a32 32 0 0 1 30.634667-56.192z"
p-id="630"
></path>
</svg>
</el-radio>
</el-radio-group>
</ElFormItem>
<ElFormItem label="期望完成日期" prop="expectCompleteTime">
<ElDatePicker
v-model="reviewForm.expectCompleteTime"
disabled
placeholder="期望完成日期"
style="width: 200px"
></ElDatePicker>
</ElFormItem>
<ElFormItem
label="承诺完成日期"
prop="promiseCompleteTime"
:rules="[
{
required: true,
message: '请选择承诺完成日期',
},
]"
>
<ElDatePicker
v-model="reviewForm.promiseCompleteTime"
style="width: 200px"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="承诺完成日期"
></ElDatePicker>
</ElFormItem>
<p
v-dompurify-html="reviewForm.requirement"
style="height: 470px"
class="requirement"
></p>
</ElForm>
<svg
t="1627697200171"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="629"
width="18"
height="18"
>
<path
:fill="setColor(index)"
d="M444.970667 850.090667l151.978666-64.512a85.290667 85.290667 0 0 1-151.978666 64.512z m231.765333-760.746667c89.002667 48.597333 155.818667 111.018667 199.765333 187.178667 43.946667 76.117333 64.64 165.205333 62.250667 266.581333a32 32 0 0 1-64-1.536c2.133333-90.069333-15.872-167.552-53.674667-233.045333-37.802667-65.536-95.957333-119.850667-175.018666-163.029334a32 32 0 1 1 30.72-56.192z m-390.4 188.629333a248.490667 248.490667 0 0 1 324.266667 117.162667l4.181333 8.917333 54.954667 123.392 72.448 62.72c3.968 3.413333 7.381333 7.381333 11.349333 13.824l2.517333 4.906667a53.333333 53.333333 0 0 1-27.178666 70.357333L288.213333 874.24A53.333333 53.333333 0 0 1 213.333333 825.472l-0.042666-99.968-52.992-119.082667A248.405333 248.405333 0 0 1 286.293333 277.973333z m380.288-34.986666c41.258667 22.442667 74.325333 55.210667 98.816 97.621333 24.490667 42.453333 36.309333 87.466667 35.157333 134.442667a32 32 0 1 1-64-1.578667c0.853333-35.029333-7.893333-68.437333-26.581333-100.864-18.688-32.384-43.264-56.661333-74.026667-73.472a32 32 0 0 1 30.634667-56.192z"
p-id="630"
></path>
</svg>
</el-radio>
</el-radio-group>
</ElFormItem>
<ElFormItem label="期望完成日期" prop="expectCompleteTime">
<ElDatePicker
v-model="reviewForm.expectCompleteTime"
disabled
placeholder="期望完成日期"
style="width: 200px"
></ElDatePicker>
</ElFormItem>
<ElFormItem
label="承诺完成日期"
prop="promiseCompleteTime"
:rules="[
{
required: true,
message: '请选择承诺完成日期',
},
]"
>
<ElDatePicker
v-model="reviewForm.promiseCompleteTime"
style="width: 200px"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD HH:mm:ss"
placeholder="承诺完成日期"
></ElDatePicker>
</ElFormItem>
</ElForm>
</div>
<p v-dompurify-html="reviewForm.requirement" class="requirement"></p>
</div>
</div>
<template #footer>
......@@ -136,7 +135,11 @@
</template>
<script setup lang="ts">
import { TypesettingListData, EmergencyLevel,ImageListData } from '@/types/api/typesetting'
import {
TypesettingListData,
EmergencyLevel,
ImageListData,
} from '@/types/api/typesetting'
import {
computed,
defineEmits,
......@@ -144,6 +147,7 @@ import {
PropType,
ref,
onMounted,
watch,
} from 'vue'
import { saveTypesettingReviewApi } from '@/api/typesetting'
import { getUserListApi } from '@/api/common'
......@@ -167,6 +171,11 @@ const visible = computed({
emit('update:modelValue', val)
},
})
watch(visible, (val) => {
if (val) {
mainImageUrl.value = reviewForm.value?.mainImage || ''
}
})
const reviewForm = computed({
get() {
return props.row
......@@ -175,6 +184,7 @@ const reviewForm = computed({
emit('update:modelValue', val)
},
})
const mainImageUrl = ref('')
const emergencyLevel = ref<EmergencyLevel[]>([])
emergencyLevel.value = [
{
......@@ -251,6 +261,9 @@ const getUserList = async () => {
console.error(e)
}
}
const setMainImage = (url: string | undefined) => {
mainImageUrl.value = url || ''
}
onMounted(() => {
getUserList()
})
......@@ -265,7 +278,8 @@ const imageList = computed<ImageListData[]>(() => {
</script>
<style lang="scss" scoped>
ul,li {
ul,
li {
margin: 0;
padding: 0;
}
......@@ -284,6 +298,7 @@ ul,li {
.detail-info {
display: flex;
gap: 10px;
height: 600px;
}
.review-image {
width: 40%;
......@@ -292,10 +307,15 @@ ul,li {
}
.review-from {
width: 60%;
display: flex;
flex-direction: column;
}
.requirement {
border: 1px solid #ddd;
overflow: auto;
flex: 1;
margin: 0;
}
.main-image {
......
src/views/typesetting/submitReviewModal.vue
......@@ -19,12 +19,13 @@
v-for="(item, index) of row?.imageList"
:key="index"
class="color-image-item"
@mouseover="onMouseover(item.imagePath)"
>
<img :src="item.imagePath" alt="" class="img-sign" />
</div>
</div>
<div class="modals-image-big">
<img :src="row?.mainImage" alt="" class="img-sign" />
<img :src="mainImageUrl || row?.imageList[0]?.imagePath" alt="" class="img-sign" />
</div>
</div>
</div>
......@@ -91,6 +92,7 @@
v-for="(item, index) of versionImageList"
:key="index"
class="color-image-item"
@mousemove="onRightMouseover(item?.imagePath)"
>
<img :src="item.imagePath" alt="" class="img-sign" />
<span
......@@ -407,6 +409,7 @@ watch(visible, (val) => {
} else {
activeName.value = 'first'
}
mainImageUrl.value = props.row?.mainImage
}
})
const opinion = ref('')
......@@ -631,6 +634,13 @@ const getPriceDetail = async (data: TypesettingListData) => {
console.error(e)
}
}
const mainImageUrl = ref<string>('')
const onMouseover = (url: string) => {
mainImageUrl.value = url
}
const onRightMouseover = (url: string | undefined) => {
versionImageUrl.value = url || ''
}
defineExpose({ getExamineInfo, reset, getPriceDetail })
</script>
......@@ -651,6 +661,8 @@ defineExpose({ getExamineInfo, reset, getPriceDetail })
width: 60px;
height: 60px;
border: 1px solid #eee;
margin-bottom: 5px;
cursor: pointer;
img {
width: 100%;
height: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment