图鉴审批样式修复
fix/modifyStyle
zhouxiaoan 1 year ago
parent f6c442a7e5
commit f59ac652db

@ -1,24 +1,26 @@
<script lang="ts" setup> <script lang="ts" setup>
import { getAllfieldList, getfieldList } from "@/api/home/filter"; import { debounce } from 'lodash-es'
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
import { useUser } from "@/store/modules/user";
import { useWorkOrder } from "@/store/modules/workOrder";
import { getViewportOffset } from "@/utils/domUtils";
import { debounce } from 'lodash-es';
import { import {
computed, defineEmits, defineOptions, computed,
inject, defineEmits,
nextTick, defineOptions,
onMounted, inject,
ref, nextTick,
unref, onMounted,
watch ref,
} from "vue"; unref,
import CustomFieldModalVue from "../modal/CustomFieldModal.vue"; watch,
import WorkSheetList from "./WorkSheetList.vue"; } from 'vue'
import CustomFieldModalVue from '../modal/CustomFieldModal.vue'
import WorkSheetList from './WorkSheetList.vue'
import { getAllfieldList, getfieldList } from '@/api/home/filter'
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
import { useUser } from '@/store/modules/user'
import { useWorkOrder } from '@/store/modules/workOrder'
import { getViewportOffset } from '@/utils/domUtils'
defineOptions({ name: "AsideContent" }); defineOptions({ name: 'AsideContent' })
const emit = defineEmits(["ApprovalOver"]); const emit = defineEmits(['ApprovalOver'])
const collapse = ref(false) const collapse = ref(false)
const workStore = useWorkOrder() const workStore = useWorkOrder()
@ -149,11 +151,11 @@ function setShowSearch(value: boolean) {
const inputHandler = debounce((word) => { const inputHandler = debounce((word) => {
searchKeyword.value = word; searchKeyword.value = word;
(packageListRef.value as any).search(word); (packageListRef.value as any).search(word)
}, 500); }, 500)
const ApprovalOver = (packageId)=>{ function ApprovalOver(packageId) {
emit('ApprovalOver',packageId) emit('ApprovalOver', packageId)
} }
</script> </script>
@ -215,9 +217,9 @@ const ApprovalOver = (packageId)=>{
class="work-sheet-list" class="work-sheet-list"
:show-field-list="showFieldList" :show-field-list="showFieldList"
:dicts="dicts" :dicts="dicts"
@ApprovalOver="ApprovalOver" @approval-over="ApprovalOver"
/> />
<CustomFieldModalVue ref="filterModalRef" :review-type="1" @onOk="getshowFieldList" /> <CustomFieldModalVue ref="filterModalRef" :review-type="1" @on-ok="getshowFieldList" />
</div> </div>
</template> </template>

@ -1,7 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import { format } from 'date-fns' import { format } from 'date-fns'
import { computed, onMounted, ref } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import type { PackageListItem } from '/#/workorder' import type { PackageListItem } from '/#/workorder'
import { useDialog } from 'naive-ui'
defineOptions({ name: 'ListItem' }) defineOptions({ name: 'ListItem' })
const props = defineProps({ const props = defineProps({
@ -22,13 +23,12 @@ const props = defineProps({
default: () => [], default: () => [],
}, },
mouseOverTask: { mouseOverTask: {
type: Array, type: Object,
default: () => [], default: () => [],
}, },
}) })
const emit = defineEmits(['dismisClick']) const emit = defineEmits(['dismisClick'])
const dialog = useDialog()
const svgName = computed(() => { const svgName = computed(() => {
return props.selected ? 'taskpack-select' : 'taskpack' return props.selected ? 'taskpack-select' : 'taskpack'
}) })
@ -37,9 +37,29 @@ const popconfirmTarget: any = ref(null)
const popconfirmRef: any = ref(null) const popconfirmRef: any = ref(null)
function handleDismissTask() { function handleDismissTask() {
emit('dismisClick', props.mouseOverTask.id) dialog.warning({
title: '确认提示',
content: '确认解散该任务包吗?',
positiveText: '取消',
negativeText: '确定',
negativeButtonProps: {
type: 'info',
ghost: false,
},
positiveButtonProps: {
type: 'default',
},
onPositiveClick: () => {
},
onNegativeClick: () => {
emit('dismisClick', props.mouseOverTask.id)
},
})
popconfirmRef.value[0]?.setShow(false) // popconfirm popconfirmRef.value[0]?.setShow(false) // popconfirm
} }
watch(() => props.mouseOverTask, (value) => {
console.log(props)
})
onMounted(async () => { onMounted(async () => {
}) })
@ -61,7 +81,8 @@ onMounted(async () => {
placement="bottom" trigger="click" placement="bottom" trigger="click"
> >
<template #trigger> <template #trigger>
<span v-show="mouseOverTask?.id" class="dismiss-task-pack" style="cursor: pointer;">...</span>
<span v-show="mouseOverTask?.id === listItem.id" class="dismiss-task-pack" style="cursor: pointer;">...</span>
</template> </template>
<template #action> <template #action>
<span style="cursor: pointer;" @click="handleDismissTask"></span> <span style="cursor: pointer;" @click="handleDismissTask"></span>
@ -85,17 +106,25 @@ onMounted(async () => {
</li> </li>
<li v-else-if="item.id === 'createdate'"> <li v-else-if="item.id === 'createdate'">
提交时间<n-ellipsis style="max-width: 170px"> 提交时间<n-ellipsis style="max-width: 170px">
{{ listItem.createdate && format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }} {{ listItem.createdate && format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") || '全部' }}
</n-ellipsis> </n-ellipsis>
</li> </li>
<li v-else-if="item.id === 'createTime'"> <li v-else-if="item.id === 'createTime'">
生成时间<n-ellipsis style="max-width: 170px"> 生成时间<n-ellipsis style="max-width: 170px">
{{ listItem.createTime && format(listItem.createTime, "yyyy-MM-dd HH:mm:ss") }} {{ listItem.createTime && format(listItem.createTime, "yyyy-MM-dd HH:mm:ss") || '全部' }}
</n-ellipsis>
</li>
<li v-else-if="item.id === 'submit_date_timestamp'">
筛选日期<n-ellipsis style="max-width: 170px">
<!-- {{ listItem.submit_date_timestamp && format(listItem.submit_date_timestamp.split('-')[0], "yyyy年MM月dd日") || '全部' }} -->
{{ listItem.submit_date_timestamp && format(new Date(listItem.submit_date_timestamp?.split('-')[0]), "yyyy年MM月dd日") }}
{{ listItem.submit_date_timestamp && format(new Date(listItem.submit_date_timestamp?.split('-')[1]), "yyyy年MM月dd日") }}
</n-ellipsis> </n-ellipsis>
</li> </li>
<li v-else class="ellipsis"> <li v-else class="ellipsis">
<span class="label">{{ item.name }}</span><n-ellipsis style="max-width: 170px"> <span class="label">{{ item.name }}</span><n-ellipsis style="max-width: 170px">
{{ listItem[item.id] }} {{ listItem[item.id] || '全部' }}
</n-ellipsis> </n-ellipsis>
</li> </li>
</ul> </ul>

@ -1,16 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { deletePackage } from "@/api/home/main"; import { deletePackage } from '@/api/home/main'
import NotPassed from "@/components/NotPassed.vue"; import NotPassed from '@/components/NotPassed.vue'
import { useWorkOrder } from "@/store/modules/workOrder"; import { useWorkOrder } from '@/store/modules/workOrder'
import { isEmpty } from "@/utils"; import { isEmpty } from '@/utils'
import { useInfiniteScroll } from "@vueuse/core"; import { useInfiniteScroll } from '@vueuse/core'
import { useMessage } from "naive-ui"; import { useMessage } from 'naive-ui'
import { reactive, ref, watch } from "vue"; import { reactive, ref, watch } from 'vue'
import ApprovalModal from "../modal/ApprovalModal.vue"; import ApprovalModal from '../modal/ApprovalModal.vue'
import ListItem from "./ListItem.vue"; import ListItem from './ListItem.vue'
import type { PackageListItem } from "/#/workorder"; import type { PackageListItem } from '/#/workorder'
const emit = defineEmits(["ApprovalOver"]);
defineProps({ defineProps({
showFieldList: { showFieldList: {
@ -21,130 +19,137 @@ defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
}); })
const workStore = useWorkOrder();
const data = ref<PackageListItem[]>([]); const emit = defineEmits(['ApprovalOver'])
const activeId = ref("");
const el = ref<HTMLDivElement | null>(null); const workStore = useWorkOrder()
const keyword = ref(""); const data = ref<PackageListItem[]>([])
const canloadMore = ref(true); const activeId = ref('')
const isLoading = ref(false); const el = ref<HTMLDivElement | null>(null)
const keyword = ref('')
const canloadMore = ref(true)
const isLoading = ref(false)
const pagination = reactive({ const pagination = reactive({
pageNo: 0, pageNo: 0,
pageSize: 10, pageSize: 10,
}); })
const approvalModalRef: any = ref(null); const approvalModalRef: any = ref(null)
const notPassedRef: any = ref(null); const notPassedRef: any = ref(null)
const overTask = ref<any>(null); const overTask = ref<any>(null)
function selectHandler(id: string, index: number) { function selectHandler(id: string, index: number) {
// console.log('selectHandler',id) // console.log('selectHandler',id)
workStore.setActive(index); workStore.setActive(index)
// showModal(approvalModalRef, id) // showModal(approvalModalRef, id)
} }
useInfiniteScroll( useInfiniteScroll(
el as any, el as any,
() => { () => {
loadMore(); loadMore()
}, },
{ {
distance: 10, distance: 10,
interval: 1500, interval: 1500,
canLoadMore: () => canloadMore.value, canLoadMore: () => canloadMore.value,
} },
); )
async function loadMore() { async function loadMore() {
if (isLoading.value || el.value == null) return; if (isLoading.value || el.value == null)
isLoading.value = true; return
isLoading.value = true
try { try {
const more = await fetchList(); const more = await fetchList()
more.forEach((ele) => { more.forEach((ele) => {
ele.search = JSON.parse(ele.search); ele.search = JSON.parse(ele.search)
// ele.search.createTime = ele.search.submit_date_timestamp // ele.search.createTime = ele.search.submit_date_timestamp
}); })
data.value.push(...more); data.value.push(...more)
} finally { }
isLoading.value = false; finally {
isLoading.value = false
} }
} }
async function fetchList() { async function fetchList() {
try { try {
pagination.pageNo += 1; pagination.pageNo += 1
const result = await workStore.fetchOrderList(pagination, keyword.value); const result = await workStore.fetchOrderList(pagination, keyword.value)
const { data, pageCount } = result; const { data, pageCount } = result
if (pageCount !== 0) canloadMore.value = pageCount >= pagination.pageNo; if (pageCount !== 0)
else canloadMore.value = false; canloadMore.value = pageCount >= pagination.pageNo
else canloadMore.value = false
return data || [];
} catch (error) { return data || []
canloadMore.value = false; }
return []; catch (error) {
canloadMore.value = false
return []
} }
} }
watch( watch(
() => workStore.activeId, () => workStore.activeId,
(newVal) => { (newVal) => {
if (isEmpty(newVal)) return; if (isEmpty(newVal))
activeId.value = newVal; return
approvalModalRef.value.showModal(workStore.dataId); activeId.value = newVal
} approvalModalRef.value.showModal(workStore.dataId)
); },
)
function reset() { function reset() {
pagination.pageNo = 0; pagination.pageNo = 0
pagination.pageSize = 10; pagination.pageSize = 10
canloadMore.value = true; canloadMore.value = true
data.value.length = 0; data.value.length = 0
workStore.reset(); workStore.reset()
} }
function notPass(value) { function notPass(value) {
notPassedRef.value.showModal(value); notPassedRef.value.showModal(value)
} }
async function search(word: string) { async function search(word: string) {
keyword.value = word; keyword.value = word
reset(); reset()
useInfiniteScroll( useInfiniteScroll(
el as any, el as any,
() => { () => {
loadMore(); loadMore()
}, },
{ distance: 10, canLoadMore: () => canloadMore.value } { distance: 10, canLoadMore: () => canloadMore.value },
); )
} }
function overTaskHandelr(item: any) { function overTaskHandelr(item: any) {
overTask.value = item; overTask.value = item
} }
function leaveTaskHandler(event) { function leaveTaskHandler(event) {
if (event?.relatedTarget?.id !== "taskPopconfirmRef") { if (event?.relatedTarget?.id !== 'taskPopconfirmRef')
overTask.value = null; overTask.value = null
}
} }
const message = useMessage(); const message = useMessage()
function dismisClick(packageId: string) { function dismisClick(packageId: string) {
deletePackage({ packageId: packageId }).then((res) => { deletePackage({ packageId }).then((res) => {
if (res.code === "OK") { if (res.code === 'OK') {
message.success("解散任务包成功"); message.success('解散任务包成功')
reset(); reset()
loadMore(); loadMore()
} }
}); })
}
function ApprovalOver(packageId) {
emit('ApprovalOver', packageId)
} }
const ApprovalOver = (packageId) => {
emit("ApprovalOver",packageId);
};
defineExpose({ defineExpose({
search, search,
}); })
</script> </script>
<template> <template>
@ -163,7 +168,7 @@ defineExpose({
@click="selectHandler(item.id, index)" @click="selectHandler(item.id, index)"
@mouseover="overTaskHandelr(item)" @mouseover="overTaskHandelr(item)"
@mouseleave="leaveTaskHandler" @mouseleave="leaveTaskHandler"
@dismisClick="dismisClick" @dismis-click="dismisClick"
/> />
</div> </div>
</n-spin> </n-spin>

Loading…
Cancel
Save