elseif
2 years ago
parent
8084dab1f9
commit
6a50a92ed0
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
@ -0,0 +1,183 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, onBeforeMount, ref } from 'vue'
|
||||||
|
import { useDictionary } from '@/store/modules/dictonary'
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'commit', value: any, isOther: boolean)
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const dictonaryStore = useDictionary()
|
||||||
|
|
||||||
|
const show = ref(false)
|
||||||
|
const cardStyle = {
|
||||||
|
'width': '520px',
|
||||||
|
'--n-padding-bottom': '10px',
|
||||||
|
'--n-padding-left': '0px',
|
||||||
|
}
|
||||||
|
|
||||||
|
function showModal() {
|
||||||
|
show.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal() {
|
||||||
|
show.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
showModal,
|
||||||
|
})
|
||||||
|
|
||||||
|
const backOptions = ref<any[]>([])
|
||||||
|
const reasonOptions = ref<any[]>([])
|
||||||
|
const selectBackId = ref(null)
|
||||||
|
const selectRejectId = ref(null)
|
||||||
|
const otherValue = ref(null)
|
||||||
|
const showOther = computed(() => {
|
||||||
|
return selectRejectId.value === 'other'
|
||||||
|
})
|
||||||
|
|
||||||
|
const comomitValue = computed(() => {
|
||||||
|
return selectRejectId.value === 'other' ? otherValue.value : selectRejectId.value
|
||||||
|
})
|
||||||
|
|
||||||
|
async function handleSumbit(e: MouseEvent) {
|
||||||
|
e.preventDefault()
|
||||||
|
closeModal()
|
||||||
|
emit('commit', comomitValue, selectRejectId.value === 'other')
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
const tfList = await dictonaryStore.fetchTFList()
|
||||||
|
|
||||||
|
reasonOptions.value = tfList.map((item) => {
|
||||||
|
return {
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 添加其他选项
|
||||||
|
reasonOptions.value.push({
|
||||||
|
label: '其他',
|
||||||
|
value: 'other',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<n-modal v-model:show="show" transform-origin="center">
|
||||||
|
<n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="wrapper-header">
|
||||||
|
<span class="wrapper-left">选择不通过原因</span>
|
||||||
|
<div class="wrapper-right">
|
||||||
|
<div class="wrapper-right-close" @pointerdown="closeModal">
|
||||||
|
<div class="wrapper-right-icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="wrapper-content">
|
||||||
|
<span>处理方式</span>
|
||||||
|
<n-select v-model:value="selectBackId" style="margin-top: 10px;" :options="backOptions" />
|
||||||
|
</div>
|
||||||
|
<div class="wrapper-content">
|
||||||
|
<span>不通过原因</span>
|
||||||
|
<n-select v-model:value="selectRejectId" style="margin-top: 10px;" :options="reasonOptions" />
|
||||||
|
<n-input v-show="showOther" v-model:value="otherValue" type="textarea" placeholder="备注内容" style="margin-top: 10px;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<div class="wrapper-footer">
|
||||||
|
<n-button type="info" @click="handleSumbit">
|
||||||
|
确认
|
||||||
|
</n-button>
|
||||||
|
<n-button secondary style="margin-left:15px" @click="closeModal">
|
||||||
|
取消
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</n-card>
|
||||||
|
</n-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.wrapper {
|
||||||
|
&-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-left {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-right {
|
||||||
|
&-close {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-icon {
|
||||||
|
background: #000;
|
||||||
|
display: inline-block;
|
||||||
|
width: 18px;
|
||||||
|
height: 1px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 18px;
|
||||||
|
height: 1px;
|
||||||
|
background: #000;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
-webkit-transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
padding: 18px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-info {
|
||||||
|
font-weight: bold;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
background-color: #1980ff;
|
||||||
|
content: '';
|
||||||
|
width: 5px;
|
||||||
|
border-radius: 2px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.n-card > .n-card-header) {
|
||||||
|
--n-padding-top: 0px;
|
||||||
|
--n-padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.n-divider:not(.n-divider--vertical)) {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { onBeforeMount, ref } from 'vue'
|
||||||
|
import type { FormItemRule, FormRules } from 'naive-ui'
|
||||||
|
import { useDictionary } from '@/store/modules/dictonary'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
value: string[] | null
|
||||||
|
label: string
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:value', value: string[]): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
plans: props.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
plans: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
type: 'array',
|
||||||
|
validator(rule: FormItemRule, value: string[]) {
|
||||||
|
if (value == null || value.length === 0)
|
||||||
|
return new Error('请选择拜访客户级别')
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
trigger: ['blur', 'change'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = ref([])
|
||||||
|
const configStore = useDictionary()
|
||||||
|
const labStyle = {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
const list = await configStore.fetchIzcustomlevelList()
|
||||||
|
options.value = list
|
||||||
|
})
|
||||||
|
|
||||||
|
function onChange(value: Array<string>) {
|
||||||
|
emit('update:value', value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<n-form :model="formValue" style="padding: 0px 10px;" :rules="rules">
|
||||||
|
<n-form-item :label="label" path="plans" :label-style="labStyle">
|
||||||
|
<n-select
|
||||||
|
v-model:value="formValue.plans" :max-tag-count="2" placeholder="请选择拜访客户级别" multiple
|
||||||
|
:options="options" @update:value="onChange"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { onBeforeMount, ref } from 'vue'
|
||||||
|
import type { FormItemRule, FormRules } from 'naive-ui'
|
||||||
|
import { useDictionary } from '@/store/modules/dictonary'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
value: string[] | null
|
||||||
|
label: string
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:value', value: string[]): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
plans: props.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
plans: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
type: 'array',
|
||||||
|
validator(rule: FormItemRule, value: string[]) {
|
||||||
|
if (value == null || value.length === 0)
|
||||||
|
return new Error('请选择拜访客户名称')
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
trigger: ['blur', 'change'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = ref([])
|
||||||
|
const configStore = useDictionary()
|
||||||
|
const labStyle = {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
const list = await configStore.fetchizcustomnameList()
|
||||||
|
options.value = list
|
||||||
|
})
|
||||||
|
|
||||||
|
function onChange(value: Array<string>) {
|
||||||
|
emit('update:value', value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<n-form :model="formValue" style="padding: 0px 10px;" :rules="rules">
|
||||||
|
<n-form-item :label="label" path="plans" :label-style="labStyle">
|
||||||
|
<n-select
|
||||||
|
v-model:value="formValue.plans" :max-tag-count="2" placeholder="请选择拜访客户名称" multiple
|
||||||
|
:options="options" @update:value="onChange"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { onBeforeMount, ref } from 'vue'
|
||||||
|
import type { FormItemRule, FormRules } from 'naive-ui'
|
||||||
|
import { useDictionary } from '@/store/modules/dictonary'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
value: string[] | null
|
||||||
|
label: string
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:value', value: string[]): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
plans: props.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
plans: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
type: 'array',
|
||||||
|
validator(rule: FormItemRule, value: string[]) {
|
||||||
|
if (value == null || value.length === 0)
|
||||||
|
return new Error('请选择拜访客户类型')
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
trigger: ['blur', 'change'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = ref([])
|
||||||
|
const configStore = useDictionary()
|
||||||
|
const labStyle = {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
const list = await configStore.fetchIzCustomtypeList()
|
||||||
|
options.value = list
|
||||||
|
})
|
||||||
|
|
||||||
|
function onChange(value: Array<string>) {
|
||||||
|
emit('update:value', value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<n-form :model="formValue" style="padding: 0px 10px;" :rules="rules">
|
||||||
|
<n-form-item :label="label" path="plans" :label-style="labStyle">
|
||||||
|
<n-select
|
||||||
|
v-model:value="formValue.plans" :max-tag-count="2" placeholder="请选择拜访客户类型" multiple
|
||||||
|
:options="options" @update:value="onChange"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { onBeforeMount, ref } from 'vue'
|
||||||
|
import type { FormItemRule, FormRules } from 'naive-ui'
|
||||||
|
import { useDictionary } from '@/store/modules/dictonary'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
value: string[] | null
|
||||||
|
label: string
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:value', value: string[]): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
plans: props.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
plans: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
type: 'array',
|
||||||
|
validator(rule: FormItemRule, value: string[]) {
|
||||||
|
if (value == null || value.length === 0)
|
||||||
|
return new Error('请选择拜访项目类别')
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
trigger: ['blur', 'change'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = ref([])
|
||||||
|
const configStore = useDictionary()
|
||||||
|
const labStyle = {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
const list = await configStore.fetchizizprojecttypeList()
|
||||||
|
options.value = list
|
||||||
|
})
|
||||||
|
|
||||||
|
function onChange(value: Array<string>) {
|
||||||
|
emit('update:value', value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<n-form :model="formValue" style="padding: 0px 10px;" :rules="rules">
|
||||||
|
<n-form-item :label="label" path="plans" :label-style="labStyle">
|
||||||
|
<n-select
|
||||||
|
v-model:value="formValue.plans" :max-tag-count="2" placeholder="请选择拜访项目类别" multiple
|
||||||
|
:options="options" @update:value="onChange"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { onBeforeMount, ref } from 'vue'
|
||||||
|
import type { FormItemRule, FormRules } from 'naive-ui'
|
||||||
|
import { useDictionary } from '@/store/modules/dictonary'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
value: string[] | null
|
||||||
|
label: string
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:value', value: string[]): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const formValue = ref({
|
||||||
|
plans: props.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules: FormRules = {
|
||||||
|
plans: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
type: 'array',
|
||||||
|
validator(rule: FormItemRule, value: string[]) {
|
||||||
|
if (value == null || value.length === 0)
|
||||||
|
return new Error('请选择发布地区')
|
||||||
|
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
trigger: ['blur', 'change'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = ref([])
|
||||||
|
const configStore = useDictionary()
|
||||||
|
const labStyle = {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}
|
||||||
|
|
||||||
|
onBeforeMount(async () => {
|
||||||
|
const list = await configStore.fetchizvisitcityList()
|
||||||
|
options.value = list
|
||||||
|
})
|
||||||
|
|
||||||
|
function onChange(value: Array<string>) {
|
||||||
|
emit('update:value', value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<n-form :model="formValue" style="padding: 0px 10px;" :rules="rules">
|
||||||
|
<n-form-item :label="label" path="plans" :label-style="labStyle">
|
||||||
|
<n-select
|
||||||
|
v-model:value="formValue.plans" :max-tag-count="2" placeholder="请选择发布地区" multiple
|
||||||
|
:options="options" @update:value="onChange"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@ -0,0 +1,528 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, onBeforeMount, onMounted, onUpdated, reactive, ref, watch } from 'vue'
|
||||||
|
import Masonry from 'masonry-layout'
|
||||||
|
import { useInfiniteScroll } from '@vueuse/core'
|
||||||
|
import { debounce } from 'lodash-es'
|
||||||
|
import imagesloaded from 'imagesloaded'
|
||||||
|
import { timeOptions, viewOptions } from '@/config/home'
|
||||||
|
import { off, on } from '@/utils/domUtils'
|
||||||
|
import img1 from '@/assets/images/1.jpg'
|
||||||
|
import img2 from '@/assets/images/2.jpg'
|
||||||
|
import img3 from '@/assets/images/3.jpg'
|
||||||
|
import img4 from '@/assets/images/4.jpg'
|
||||||
|
import img5 from '@/assets/images/5.jpg'
|
||||||
|
import { useTask } from '@/store/modules/task'
|
||||||
|
import { getTaskDetailPictureList } from '@/api/work/work'
|
||||||
|
import type { PictureSortParam } from '/#/api'
|
||||||
|
|
||||||
|
const cardStyle = {
|
||||||
|
'--n-padding-bottom': '40px',
|
||||||
|
'--n-padding-left': '120px',
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeRange = ref('all')
|
||||||
|
const timeLabel = computed(() => {
|
||||||
|
const item = timeOptions.find((option) => {
|
||||||
|
return option.value === timeRange.value
|
||||||
|
})
|
||||||
|
|
||||||
|
return item?.label
|
||||||
|
})
|
||||||
|
|
||||||
|
const viewMode = ref('masonry')
|
||||||
|
|
||||||
|
const viewLabel = computed(() => {
|
||||||
|
const item = viewOptions.find((option) => {
|
||||||
|
return option.value === viewMode.value
|
||||||
|
})
|
||||||
|
|
||||||
|
return item?.label
|
||||||
|
})
|
||||||
|
|
||||||
|
const taskStore = useTask()
|
||||||
|
const masonryRef = ref<ComponentRef>(null)
|
||||||
|
const el = ref<HTMLDivElement | null>(null)
|
||||||
|
const listData = ref<any[]>([])
|
||||||
|
const pagination = reactive({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 30,
|
||||||
|
})
|
||||||
|
let loading = false
|
||||||
|
let _masonry: null | Masonry = null
|
||||||
|
const show = ref(false)
|
||||||
|
const sortBy: PictureSortParam = {
|
||||||
|
orderbyname: 'asc',
|
||||||
|
orderbyvalue: 'fromuptime',
|
||||||
|
}
|
||||||
|
|
||||||
|
const layout = debounce(() => {
|
||||||
|
if (!show.value)
|
||||||
|
return
|
||||||
|
|
||||||
|
if (_masonry !== null)
|
||||||
|
(_masonry as any).destroy()
|
||||||
|
|
||||||
|
_masonry = new Masonry(masonryRef.value as any, {
|
||||||
|
itemSelector: '.grid-item',
|
||||||
|
columnWidth: 214,
|
||||||
|
percentPosition: true,
|
||||||
|
stagger: 10,
|
||||||
|
})
|
||||||
|
|
||||||
|
imagesloaded('.grid-item', () => {
|
||||||
|
(_masonry as any).layout()
|
||||||
|
const scrollHeight = el.value!.scrollHeight
|
||||||
|
const clientHeight = el.value!.clientHeight
|
||||||
|
const top = scrollHeight - clientHeight - 20
|
||||||
|
el.value!.scrollTo({ top, behavior: 'instant' })
|
||||||
|
loading = false
|
||||||
|
})
|
||||||
|
}, 300)
|
||||||
|
|
||||||
|
watch(viewMode, () => {
|
||||||
|
layout()
|
||||||
|
})
|
||||||
|
|
||||||
|
let canloadMore = true
|
||||||
|
|
||||||
|
useInfiniteScroll(
|
||||||
|
el as any,
|
||||||
|
() => {
|
||||||
|
loadMore()
|
||||||
|
},
|
||||||
|
{ distance: 10, canLoadMore: () => canloadMore },
|
||||||
|
)
|
||||||
|
|
||||||
|
async function featchList() {
|
||||||
|
loading = true
|
||||||
|
try {
|
||||||
|
const packageid = taskStore.getPackageid
|
||||||
|
const taskId = taskStore.getActiveId
|
||||||
|
|
||||||
|
const res = await getTaskDetailPictureList(packageid, taskId, { ...pagination, ...sortBy })
|
||||||
|
|
||||||
|
const { data, pageCount } = res
|
||||||
|
pagination.pageNo += 1
|
||||||
|
canloadMore = pageCount >= pagination.pageNo
|
||||||
|
|
||||||
|
const list = data.map((item) => {
|
||||||
|
return {
|
||||||
|
imgUrl: item.imgurl,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return list
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadMore() {
|
||||||
|
if (loading || el.value == null)
|
||||||
|
return
|
||||||
|
|
||||||
|
const packageid = taskStore.getPackageid
|
||||||
|
const taskId = taskStore.getActiveId
|
||||||
|
|
||||||
|
if (!packageid || !taskId)
|
||||||
|
return
|
||||||
|
|
||||||
|
const more = await featchList()
|
||||||
|
listData.value.push(...more)
|
||||||
|
}
|
||||||
|
|
||||||
|
onUpdated(() => {
|
||||||
|
layout()
|
||||||
|
})
|
||||||
|
|
||||||
|
let start: { x: number, y: number } | null = null
|
||||||
|
let selectionBox: HTMLDivElement | null
|
||||||
|
const selectIds = ref<string[]>([])
|
||||||
|
|
||||||
|
function downHandler(event: MouseEvent) {
|
||||||
|
if (!selectionBox)
|
||||||
|
return
|
||||||
|
|
||||||
|
selectIds.value.length = 0
|
||||||
|
|
||||||
|
start = { x: event.clientX, y: event.clientY }
|
||||||
|
selectionBox.style.width = '0'
|
||||||
|
selectionBox.style.height = '0'
|
||||||
|
selectionBox.style.left = `${start.x}px`
|
||||||
|
selectionBox.style.top = `${start.y}px`
|
||||||
|
selectionBox.style.display = 'block'
|
||||||
|
selectionBox.style.zIndex = '9999'
|
||||||
|
}
|
||||||
|
|
||||||
|
function imUpdateSelectIds(x: number, y: number, w: number, h: number) {
|
||||||
|
const items = document.querySelectorAll('.grid-item')
|
||||||
|
|
||||||
|
items.forEach((item: HTMLDivElement) => {
|
||||||
|
const rect = item.getBoundingClientRect()
|
||||||
|
const index = selectIds.value.indexOf(item.dataset.id!)
|
||||||
|
|
||||||
|
if (rect.right > x && rect.bottom > y && rect.left < x + w && rect.top < y + h)
|
||||||
|
index === -1 && selectIds.value.push(item.dataset.id!)
|
||||||
|
else index !== -1 && selectIds.value.splice(index, 1)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSelected(id: number) {
|
||||||
|
return selectIds.value.includes(String(id))
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveHandler(e: MouseEvent) {
|
||||||
|
if (!selectionBox || !start)
|
||||||
|
return
|
||||||
|
|
||||||
|
const x = Math.min(e.clientX, start.x)
|
||||||
|
const y = Math.min(e.clientY, start.y)
|
||||||
|
const w = Math.abs(e.clientX - start.x)
|
||||||
|
const h = Math.abs(e.clientY - start.y)
|
||||||
|
|
||||||
|
selectionBox.style.width = `${w}px`
|
||||||
|
selectionBox.style.height = `${h}px`
|
||||||
|
selectionBox.style.left = `${x}px`
|
||||||
|
selectionBox.style.top = `${y}px`
|
||||||
|
|
||||||
|
imUpdateSelectIds(x, y, w, h)
|
||||||
|
}
|
||||||
|
|
||||||
|
function upHandler(event: MouseEvent) {
|
||||||
|
if (!selectionBox)
|
||||||
|
return
|
||||||
|
|
||||||
|
selectionBox.style.display = 'none'
|
||||||
|
start = null
|
||||||
|
}
|
||||||
|
|
||||||
|
const gridHeight = computed(() => {
|
||||||
|
return viewMode.value !== 'masonry' ? '157px' : ''
|
||||||
|
})
|
||||||
|
|
||||||
|
function addListeners() {
|
||||||
|
selectionBox = document.querySelector('.selection-box') as HTMLDivElement
|
||||||
|
|
||||||
|
on(el.value!, 'mousedown', downHandler)
|
||||||
|
on(el.value!, 'mousemove', moveHandler)
|
||||||
|
on(document, 'mouseup', upHandler)
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeListeners() {
|
||||||
|
off(el.value!, 'mousedown', downHandler)
|
||||||
|
on(el.value!, 'mousemove', moveHandler)
|
||||||
|
on(document, 'mouseup', upHandler)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function afterEnter() {
|
||||||
|
addListeners()
|
||||||
|
|
||||||
|
const list = await featchList()
|
||||||
|
listData.value = list
|
||||||
|
}
|
||||||
|
|
||||||
|
function afterLeave() {
|
||||||
|
removeListeners()
|
||||||
|
|
||||||
|
pagination.pageNo = 1
|
||||||
|
pagination.pageSize = 30
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
show.value && addListeners()
|
||||||
|
})
|
||||||
|
|
||||||
|
function showModal() {
|
||||||
|
show.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeModal(event: MouseEvent) {
|
||||||
|
show.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
showModal,
|
||||||
|
})
|
||||||
|
|
||||||
|
function forwardHandler() {
|
||||||
|
taskStore.forward()
|
||||||
|
}
|
||||||
|
|
||||||
|
function backHandler() {
|
||||||
|
taskStore.back()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<n-modal
|
||||||
|
v-model:show="show" :mask-closable="false" style="position: relative;" transform-origin="center"
|
||||||
|
@after-enter="afterEnter" @after-leave="afterLeave"
|
||||||
|
>
|
||||||
|
<n-card
|
||||||
|
:style="cardStyle" class="card" style="position: fixed;top:64px" :bordered="false" size="huge"
|
||||||
|
role="dialog" aria-modal="true"
|
||||||
|
>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="wrapper-m32">
|
||||||
|
<SvgIcon name="recycle" size="16" />
|
||||||
|
<span style="margin-left: 8px;">任务审批</span>
|
||||||
|
</div>
|
||||||
|
<div class="wrapper-title wrapper-m32">
|
||||||
|
<span>可疑图片文件夹</span>
|
||||||
|
<SvgIcon size="22" class="forward" name="arrow-left" @click="backHandler" />
|
||||||
|
<SvgIcon size="22" class="back" name="arrow-right" @click="forwardHandler" />
|
||||||
|
</div>
|
||||||
|
<div class="wrapper-statistic wrapper-m32">
|
||||||
|
<table style="width: 100%;">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">
|
||||||
|
创建人
|
||||||
|
</th>
|
||||||
|
<th scope="col">
|
||||||
|
状态
|
||||||
|
</th>
|
||||||
|
<th scope="col">
|
||||||
|
创建时间
|
||||||
|
</th>
|
||||||
|
<th scope="col">
|
||||||
|
图片来源
|
||||||
|
</th>
|
||||||
|
<th scope="col">
|
||||||
|
相似匹配
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
张三丰
|
||||||
|
</td>
|
||||||
|
<td>待审批</td>
|
||||||
|
<td>2023-12-02 14:20:11</td>
|
||||||
|
<td>网络截图</td>
|
||||||
|
<td>15</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="wrapper-content">
|
||||||
|
<div class="wrapper-content-form wrapper-m32">
|
||||||
|
<div>
|
||||||
|
<n-popselect v-model:value="timeRange" :options="timeOptions" trigger="click">
|
||||||
|
<div class="wrapper-content-form-dropdown">
|
||||||
|
<span>{{ timeLabel || '时间模式' }}</span>
|
||||||
|
<SvgIcon class="wrapper-content-form-dropdown-gap" name="arrow-botton" size="14" />
|
||||||
|
</div>
|
||||||
|
</n-popselect>
|
||||||
|
<n-popselect v-model:value="viewMode" :options="viewOptions" trigger="click">
|
||||||
|
<div class="wrapper-form-dropdown">
|
||||||
|
<span>{{ viewLabel || '视图模式' }}</span>
|
||||||
|
<SvgIcon class="wrapper-content-form-gap" name="arrow-botton" size="14" />
|
||||||
|
</div>
|
||||||
|
</n-popselect>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>移除可疑文件夹</div>
|
||||||
|
<div class="wrapper-content-form-button">
|
||||||
|
<SvgIcon style="margin-right: 6px;" size="14" name="tf" />
|
||||||
|
批量审批
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div ref="el" class="scroll">
|
||||||
|
<!-- <n-scrollbar :on-scroll="scrollHandler"> -->
|
||||||
|
<div ref="masonryRef" class="grid">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in listData" :key="index" :data-id="index"
|
||||||
|
:class="{ 'grid-item-selected': isSelected(index) }" :style="{ height: gridHeight }"
|
||||||
|
class="grid-item"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="wrapper-content-item-img"
|
||||||
|
:class="{ 'wrapper-content-item-img-fit': viewMode !== 'masonry' }" :src="item.imgUrl"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="position:absolute;left: 0px;top: 0px;display: flex;justify-content: space-between;width: 100%;padding: 16px;"
|
||||||
|
>
|
||||||
|
<n-checkbox v-model:checked="item.checked" @click.stop />
|
||||||
|
<div class="percent">
|
||||||
|
30%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- </n-scrollbar> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="close" @pointerdown="closeModal">
|
||||||
|
<div class="icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</n-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.card {
|
||||||
|
width: 100vw;
|
||||||
|
height: calc(100vh - 64px);
|
||||||
|
user-select: none;
|
||||||
|
/* Standard syntax */
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
right: -90px;
|
||||||
|
top: -70px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
background: #FFF;
|
||||||
|
display: inline-block;
|
||||||
|
width: 18px;
|
||||||
|
height: 1px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 18px;
|
||||||
|
height: 1px;
|
||||||
|
background: #FFF;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
-webkit-transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 21px;
|
||||||
|
padding: 24px 0px 12px 0px;
|
||||||
|
|
||||||
|
.forward {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-statistic {
|
||||||
|
background-color: #fafbfc;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 3px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
th {
|
||||||
|
color: #d7d7d7;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-m32 {
|
||||||
|
margin-left: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
&-form {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&-dropdown {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 24px;
|
||||||
|
|
||||||
|
&-gap {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-button {
|
||||||
|
width: 118px;
|
||||||
|
height: 36px;
|
||||||
|
background: linear-gradient(135deg, #5b85f8, #3c6cf0);
|
||||||
|
border-radius: 17px;
|
||||||
|
box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.30);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #FFF;
|
||||||
|
margin-left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
&-img {
|
||||||
|
border-radius: 7px;
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-img-fit {
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
width: 214px;
|
||||||
|
padding: 16px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.percent {
|
||||||
|
text-align: center;
|
||||||
|
width: 35px;
|
||||||
|
height: 18px;
|
||||||
|
opacity: 0.9;
|
||||||
|
background: #6f92fd;
|
||||||
|
border-radius: 6px 0px 6px 0px;
|
||||||
|
z-index: 5;
|
||||||
|
right: 12px;
|
||||||
|
top: 2px;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item-selected {
|
||||||
|
background-color: #dae3ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
overflow-y: scroll;
|
||||||
|
height: calc(100vh - 282px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue