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 @@ ...@@ -13,6 +13,7 @@
v-for="(val, index) in imageList" v-for="(val, index) in imageList"
:key="index" :key="index"
class="color-image-item" class="color-image-item"
@mouseover="setMainImage(val.imagePath)"
> >
<!-- <button class="remove" type="button"> <!-- <button class="remove" type="button">
<i class="el-icon-close"></i> <i class="el-icon-close"></i>
...@@ -26,102 +27,100 @@ ...@@ -26,102 +27,100 @@
</li> --> </li> -->
</ul> </ul>
<div class="main-image"> <div class="main-image">
<img :src="row?.mainImage" /> <img :src="mainImageUrl || row?.mainImage" />
</div> </div>
</div> </div>
<div class="review-from"> <div class="review-from">
<ElForm <div>
ref="reviewFormRef" <ElForm
:model="reviewForm" ref="reviewFormRef"
label-width="120px" :model="reviewForm"
inline label-width="120px"
> inline
<ElFormItem label="编码" prop="sku"> >
<ElInput <ElFormItem label="编码" prop="sku">
v-model="reviewForm.sku" <ElInput
disabled v-model="reviewForm.sku"
placeholder="编码" disabled
style="width: 200px" placeholder="编码"
/> style="width: 200px"
</ElFormItem> />
<ElFormItem label="负责人" prop="personInChargeId"> </ElFormItem>
<ElSelect <ElFormItem label="负责人" prop="personInChargeId">
v-model="reviewForm.personInChargeId" <ElSelect
style="width: 200px" v-model="reviewForm.personInChargeId"
clearable style="width: 200px"
disabled clearable
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"
disabled disabled
:label="item.value" placeholder="请选择负责人"
> >
<svg <ElOption
t="1627697200171" v-for="item in userList"
class="icon" :key="item.id"
viewBox="0 0 1024 1024" :label="item.account"
version="1.1" :value="item.id"
xmlns="http://www.w3.org/2000/svg" ></ElOption>
p-id="629" </ElSelect>
width="18" </ElFormItem>
height="18" <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 <svg
:fill="setColor(index)" t="1627697200171"
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" class="icon"
p-id="630" viewBox="0 0 1024 1024"
></path> version="1.1"
</svg> xmlns="http://www.w3.org/2000/svg"
</el-radio> p-id="629"
</el-radio-group> width="18"
</ElFormItem> height="18"
<ElFormItem label="期望完成日期" prop="expectCompleteTime"> >
<ElDatePicker <path
v-model="reviewForm.expectCompleteTime" :fill="setColor(index)"
disabled 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"
placeholder="期望完成日期" p-id="630"
style="width: 200px" ></path>
></ElDatePicker> </svg>
</ElFormItem> </el-radio>
<ElFormItem </el-radio-group>
label="承诺完成日期" </ElFormItem>
prop="promiseCompleteTime" <ElFormItem label="期望完成日期" prop="expectCompleteTime">
:rules="[ <ElDatePicker
{ v-model="reviewForm.expectCompleteTime"
required: true, disabled
message: '请选择承诺完成日期', placeholder="期望完成日期"
}, style="width: 200px"
]" ></ElDatePicker>
> </ElFormItem>
<ElDatePicker <ElFormItem
v-model="reviewForm.promiseCompleteTime" label="承诺完成日期"
style="width: 200px" prop="promiseCompleteTime"
format="YYYY-MM-DD" :rules="[
value-format="YYYY-MM-DD HH:mm:ss" {
placeholder="承诺完成日期" required: true,
></ElDatePicker> message: '请选择承诺完成日期',
</ElFormItem> },
<p ]"
v-dompurify-html="reviewForm.requirement" >
style="height: 470px" <ElDatePicker
class="requirement" v-model="reviewForm.promiseCompleteTime"
></p> style="width: 200px"
</ElForm> 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>
</div> </div>
<template #footer> <template #footer>
...@@ -136,7 +135,11 @@ ...@@ -136,7 +135,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { TypesettingListData, EmergencyLevel,ImageListData } from '@/types/api/typesetting' import {
TypesettingListData,
EmergencyLevel,
ImageListData,
} from '@/types/api/typesetting'
import { import {
computed, computed,
defineEmits, defineEmits,
...@@ -144,6 +147,7 @@ import { ...@@ -144,6 +147,7 @@ import {
PropType, PropType,
ref, ref,
onMounted, onMounted,
watch,
} from 'vue' } from 'vue'
import { saveTypesettingReviewApi } from '@/api/typesetting' import { saveTypesettingReviewApi } from '@/api/typesetting'
import { getUserListApi } from '@/api/common' import { getUserListApi } from '@/api/common'
...@@ -167,6 +171,11 @@ const visible = computed({ ...@@ -167,6 +171,11 @@ const visible = computed({
emit('update:modelValue', val) emit('update:modelValue', val)
}, },
}) })
watch(visible, (val) => {
if (val) {
mainImageUrl.value = reviewForm.value?.mainImage || ''
}
})
const reviewForm = computed({ const reviewForm = computed({
get() { get() {
return props.row return props.row
...@@ -175,6 +184,7 @@ const reviewForm = computed({ ...@@ -175,6 +184,7 @@ const reviewForm = computed({
emit('update:modelValue', val) emit('update:modelValue', val)
}, },
}) })
const mainImageUrl = ref('')
const emergencyLevel = ref<EmergencyLevel[]>([]) const emergencyLevel = ref<EmergencyLevel[]>([])
emergencyLevel.value = [ emergencyLevel.value = [
{ {
...@@ -251,6 +261,9 @@ const getUserList = async () => { ...@@ -251,6 +261,9 @@ const getUserList = async () => {
console.error(e) console.error(e)
} }
} }
const setMainImage = (url: string | undefined) => {
mainImageUrl.value = url || ''
}
onMounted(() => { onMounted(() => {
getUserList() getUserList()
}) })
...@@ -265,7 +278,8 @@ const imageList = computed<ImageListData[]>(() => { ...@@ -265,7 +278,8 @@ const imageList = computed<ImageListData[]>(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
ul,li { ul,
li {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
...@@ -284,6 +298,7 @@ ul,li { ...@@ -284,6 +298,7 @@ ul,li {
.detail-info { .detail-info {
display: flex; display: flex;
gap: 10px; gap: 10px;
height: 600px;
} }
.review-image { .review-image {
width: 40%; width: 40%;
...@@ -292,10 +307,15 @@ ul,li { ...@@ -292,10 +307,15 @@ ul,li {
} }
.review-from { .review-from {
width: 60%; width: 60%;
display: flex;
flex-direction: column;
} }
.requirement { .requirement {
border: 1px solid #ddd; border: 1px solid #ddd;
overflow: auto;
flex: 1;
margin: 0;
} }
.main-image { .main-image {
......
src/views/typesetting/submitReviewModal.vue
...@@ -19,12 +19,13 @@ ...@@ -19,12 +19,13 @@
v-for="(item, index) of row?.imageList" v-for="(item, index) of row?.imageList"
:key="index" :key="index"
class="color-image-item" class="color-image-item"
@mouseover="onMouseover(item.imagePath)"
> >
<img :src="item.imagePath" alt="" class="img-sign" /> <img :src="item.imagePath" alt="" class="img-sign" />
</div> </div>
</div> </div>
<div class="modals-image-big"> <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> </div>
</div> </div>
...@@ -91,6 +92,7 @@ ...@@ -91,6 +92,7 @@
v-for="(item, index) of versionImageList" v-for="(item, index) of versionImageList"
:key="index" :key="index"
class="color-image-item" class="color-image-item"
@mousemove="onRightMouseover(item?.imagePath)"
> >
<img :src="item.imagePath" alt="" class="img-sign" /> <img :src="item.imagePath" alt="" class="img-sign" />
<span <span
...@@ -407,6 +409,7 @@ watch(visible, (val) => { ...@@ -407,6 +409,7 @@ watch(visible, (val) => {
} else { } else {
activeName.value = 'first' activeName.value = 'first'
} }
mainImageUrl.value = props.row?.mainImage
} }
}) })
const opinion = ref('') const opinion = ref('')
...@@ -631,6 +634,13 @@ const getPriceDetail = async (data: TypesettingListData) => { ...@@ -631,6 +634,13 @@ const getPriceDetail = async (data: TypesettingListData) => {
console.error(e) 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 }) defineExpose({ getExamineInfo, reset, getPriceDetail })
</script> </script>
...@@ -651,6 +661,8 @@ defineExpose({ getExamineInfo, reset, getPriceDetail }) ...@@ -651,6 +661,8 @@ defineExpose({ getExamineInfo, reset, getPriceDetail })
width: 60px; width: 60px;
height: 60px; height: 60px;
border: 1px solid #eee; border: 1px solid #eee;
margin-bottom: 5px;
cursor: pointer;
img { img {
width: 100%; width: 100%;
height: 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