Merge branch 'main' into shen

bak
Dragon 1 year ago
commit 5fe486d490

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

@ -46,7 +46,7 @@ export const useWorkOrderStore = defineStore({
async fetchOrderList(pagination, keyword) {
const res = await getPackageList(pagination, keyword)
if (res.data.length > 0) {
if (res.data&&res.data.length > 0) {
this.packageList.push(...res.data)
if (!this.activeId)
this.setActive(0)

@ -1,289 +1,309 @@
<script lang="ts" setup>
import { defineOptions, h, nextTick, onUnmounted, reactive, ref, unref } from 'vue'
import { NDataTable } from 'naive-ui'
import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
import type { SortableEvent } from 'sortablejs'
import Sortable from 'sortablejs'
import { debounce } from 'lodash-es'
import Action from '../Action.vue'
import { deleteCondition, getConditionList, sort } from '@/api/home/filter'
import type { FilterSearchParam } from '/#/api'
defineOptions({ name: 'FilterModal' })
import { defineOptions, h, nextTick, onUnmounted, reactive, ref, unref } from "vue";
import { NDataTable } from "naive-ui";
import type { DataTableColumns, DataTableRowKey } from "naive-ui";
import type { SortableEvent } from "sortablejs";
import Sortable from "sortablejs";
import { debounce } from "lodash-es";
import Action from "../Action.vue";
import { deleteCondition, getConditionList, sort } from "@/api/home/filter";
import type { FilterSearchParam } from "/#/api";
defineOptions({ name: "FilterModal" });
const emit = defineEmits<{
(e: 'showNewFilter'): void
(e: 'editFilter', filter: any): void
}>()
(e: "showNewFilter"): void;
(e: "editFilter", filter: any): void;
}>();
const show = ref(false)
const show = ref(false);
const cardStyle = {
'width': '800px',
'height': '800px',
'--n-padding-bottom': '10px',
'--n-padding-left': '10px',
}
width: "800px",
height: "800px",
"--n-padding-bottom": "10px",
"--n-padding-left": "10px",
};
interface RowData {
id: string
searchname: string
createby: string
createtime: string
updateby: string
updatetime: string
id: string;
searchname: string;
createby: string;
createtime: string;
updateby: string;
updatetime: string;
}
const columns: DataTableColumns<RowData> = [
{
type: 'selection',
type: "selection",
},
{
title: '操作',
key: 'action',
title: "操作",
key: "action",
render(row) {
return h(
Action,
{
options: [
{ label: '编辑', key: 1 },
{ label: '删除', key: 2 },
],
id: row.id,
select,
},
)
return h(Action, {
options: [
{ label: "编辑", key: 1 },
{ label: "删除", key: 2 },
],
id: row.id,
select,
});
},
},
{
title: '名称',
key: 'searchname',
title: "名称",
key: "searchname",
},
{
title: '创建者',
key: 'createby',
title: "创建者",
key: "createby",
},
{
title: '创建时间',
key: 'createtime',
title: "创建时间",
key: "createtime",
},
{
title: '更新者',
key: 'updateby',
title: "更新者",
key: "updateby",
},
{
title: '更新时间',
key: 'updatetime',
title: "更新时间",
key: "updatetime",
},
]
];
const loading = ref(true)
const loading = ref(true);
const pagination = reactive({
page: 1,
pageCount: 1,
pageSize: 10,
})
const tableData = ref<Array<RowData>>([])
const keyword = ref('')
});
const tableData = ref<Array<RowData>>([]);
const keyword = ref("");
async function query(page: number, pageSize: number) {
const searchParam: FilterSearchParam = { search_searchname: { value: keyword.value, op: 'like', type: 'string' } }
const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 0)
const { data, pageCount } = result
tableData.value = data
pagination.page = page
pagination.pageCount = pageCount
loading.value = false
const searchParam: FilterSearchParam = {
search_searchname: { value: keyword.value, op: "like", type: "string" },
};
const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 0);
const { data, pageCount } = result;
tableData.value = data;
pagination.page = page;
pagination.pageCount = pageCount;
loading.value = false;
}
function afterLeave() {
pagination.page = 1
pagination.pageCount = 1
pagination.pageSize = 10
pagination.page = 1;
pagination.pageCount = 1;
pagination.pageSize = 10;
}
const selectionIds = ref<DataTableRowKey[]>([])
const selectionIds = ref<DataTableRowKey[]>([]);
const rowKey = (row: RowData) => row.id
const rowKey = (row: RowData) => row.id;
function rowProps(row: RowData) {
return {
'data-id': row.id,
}
"data-id": row.id,
};
}
function handleCheck(rowKeys: DataTableRowKey[]) {
selectionIds.value = rowKeys
selectionIds.value = rowKeys;
}
function select(key: number) {
switch (key) {
case 1:
editSelection()
break
editSelection();
break;
case 2:
deleteSelection()
break
deleteSelection();
break;
default:
break
break;
}
}
function editSelection() {
// eslint-disable-next-line dot-notation
const $message = window['$message']
const $message = window["$message"];
if (selectionIds.value.length === 0 || selectionIds.value.length > 1) {
$message.error('请选中一条过滤')
return
$message.error("请选中一条过滤");
return;
}
const selectedId = selectionIds.value[0]
const selectedId = selectionIds.value[0];
const selectedFilter = tableData.value.find((item: any) => {
return item.id === selectedId
})
return item.id === selectedId;
});
emit('editFilter', selectedFilter)
closeModal()
emit("editFilter", selectedFilter);
closeModal();
}
function deleteSelection() {
// eslint-disable-next-line dot-notation
const $message = window['$message']
const $message = window["$message"];
if (selectionIds.value.length === 0) {
$message.error('至少选中一条过滤')
return
$message.error("至少选中一条过滤");
return;
}
deleteCondition({ ids: selectionIds.value.join(',') }).then(() => {
query(pagination.page, pagination.pageSize)
})
deleteCondition({ ids: selectionIds.value.join(",") }).then(() => {
query(pagination.page, pagination.pageSize);
});
}
async function handlePageChange(currentPage) {
if (loading.value)
return
if (loading.value) return;
const { pageSize } = pagination
await query(currentPage, pageSize)
const { pageSize } = pagination;
await query(currentPage, pageSize);
}
function handleClick() {
emit('showNewFilter')
show.value = false
emit("showNewFilter");
show.value = false;
}
let sortTable: Sortable | null = null
const tableRef = ref<InstanceType<typeof NDataTable>>()
let sortTable: Sortable | null = null;
const tableRef = ref<InstanceType<typeof NDataTable>>();
async function showModal() {
show.value = true
show.value = true;
const { page, pageSize } = pagination
await query(page, pageSize)
const { page, pageSize } = pagination;
await query(page, pageSize);
nextTick(() => {
if (sortTable !== null)
destory()
const el: HTMLDivElement = tableRef.value?.$el
const tbody: HTMLElement | null = el.querySelector('tbody.n-data-table-tbody')!
if (tbody)
sortTable = Sortable.create(tbody, { onEnd, onMove })
})
if (sortTable !== null) destory();
const el: HTMLDivElement = tableRef.value?.$el;
const tbody: HTMLElement | null = el.querySelector("tbody.n-data-table-tbody")!;
if (tbody) sortTable = Sortable.create(tbody, { onEnd, onMove });
});
}
let relatedId = ''
let insertafter = false
let relatedId = "";
let insertafter = false;
// TODO: bug
function onEnd(event: SortableEvent) {
const data = unref(tableData)
const oldElem = data[event.oldIndex!]
data.splice(event.oldIndex!, 1)
data.splice(event.newIndex!, 0, oldElem)
const data = unref(tableData);
const oldElem = data[event.oldIndex!];
data.splice(event.oldIndex!, 1);
data.splice(event.newIndex!, 0, oldElem);
const dragId = oldElem.id
const dragId = oldElem.id;
const index = data.findIndex((item) => {
return item.id === relatedId
})
return item.id === relatedId;
});
// -1+1
const order = insertafter ? index - 1 : index + 1
const order = insertafter ? index - 1 : index + 1;
// console.log('dragid:', dragId, 'order:', order)
sort(dragId, order)
sort(dragId, order);
}
function onMove(evt: any) {
relatedId = evt.related?.dataset?.id
insertafter = evt.willInsertAfter
relatedId = evt.related?.dataset?.id;
insertafter = evt.willInsertAfter;
// console.log(`${evt.dragged.dataset.id},${evt.related}`, 'insertafter', evt.willInsertAfter)
}
function destory() {
sortTable && sortTable.destroy()
sortTable = null
sortTable && sortTable.destroy();
sortTable = null;
}
onUnmounted(() => {
destory()
})
destory();
});
function closeModal() {
show.value = false
show.value = false;
}
defineExpose({
showModal,
})
});
const inputHandler = debounce((word) => {
keyword.value = word
query(1, 5)
}, 300)
keyword.value = word;
query(1, 5);
}, 300);
</script>
<template>
<div>
<n-modal
v-model:show="show" transform-origin="center" display-directive="if"
v-model:show="show"
transform-origin="center"
display-directive="if"
@after-leave="afterLeave"
>
<n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
<n-card
:style="cardStyle"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<div class="wrapper">
<span class="wrapper-title">全部筛选值</span>
<span class="wrapper-title">全部过滤条件</span>
<div class="wrapper-bar">
<div class="wrapper-info">
<span :style="{ 'margin-left': '18px' }">基本信息</span>
<span
:style="{ 'margin-left': '18px', 'font-size': '16px' }"
class="wrapper-info-title"
>基本信息</span
>
</div>
</div>
<div class="wrapper-form">
<n-input :style="{ width: '360px', border: '1px solid #cad2dd' }" placeholder="请输入过滤条件名称搜索" @input="inputHandler">
<n-input
:style="{ width: '360px', border: '1px solid #cad2dd' }"
placeholder="请输入过滤条件名称搜索"
@input="inputHandler"
>
<template #suffix>
<SvgIcon size="14px" name="magnifying-1" />
<SvgIcon size="14px" name="magnifying-1" color="#fff" />
</template>
</n-input>
<n-button type="info" @click="handleClick">
<n-button type="info" style="background:#507AFD" @click="handleClick">
创建
<template #icon>
<SvgIcon size="14px" name="magnifying-1" />
<img
src="../../../../../assets/images/addIcon.png"
style="width: 16px; height: 16px"
/>
</template>
</n-button>
</div>
<div class="wrapper-table">
<NDataTable
ref="tableRef" remote :row-props="rowProps as any" :columns="columns" :data="tableData" :loading="loading"
:pagination="pagination" :row-key="rowKey" @update:page="handlePageChange"
ref="tableRef"
remote
:row-props="rowProps as any"
:columns="columns"
:data="tableData"
:loading="loading"
:pagination="pagination"
:row-key="rowKey"
@update:page="handlePageChange"
@update:checked-row-keys="handleCheck"
/>
</div>
</div>
<template #footer>
<div class="wrapper-footer">
<n-button type="info" @click="closeModal">
确认
</n-button>
<n-button secondary style="margin-left:15px" @click="closeModal">
<n-button type="info" @click="closeModal"> </n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal">
取消
</n-button>
</div>
@ -297,10 +317,11 @@ const inputHandler = debounce((word) => {
.wrapper {
display: flex;
flex-direction: column;
padding: 20px;
&-title {
font-weight: bold;
font-size: 16px;
font-size: 20px;
}
&-bar {
@ -316,7 +337,7 @@ const inputHandler = debounce((word) => {
.n-input {
width: 300px;
border: 1px solid gray
border: 1px solid gray;
}
}
@ -334,14 +355,23 @@ const inputHandler = debounce((word) => {
position: relative;
&:before {
background-color: #1980FF;
background-color: #1980ff;
content: "";
width: 5px;
border-radius: 2px;
top: 0;
left: 3px;
bottom: 0;
position: absolute;
}
&-title {
font-size: 16px;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: Medium;
text-align: left;
color: #333333;
line-height: 22px;
}
}
}
</style>

@ -31,19 +31,21 @@ const backOptions = ref<any[]>([])
const reasonOptions = ref<any[]>([])
const selectBackId = ref(null)
const selectRejectId = ref(null)
const selectItem = ref(null)
const otherValue = ref(null)
const showOther = computed(() => {
return selectRejectId.value === 'other'
return (selectItem.value as any)?.label === '其他'
})
const comomitValue = computed(() => {
return selectRejectId.value === 'other' ? otherValue.value : selectRejectId.value
return (selectItem.value as any)?.label === '其他' ? otherValue.value : selectRejectId.value
})
async function handleSumbit(e: MouseEvent) {
e.preventDefault()
closeModal()
emit('commit', unref(comomitValue), unref(selectBackId), selectRejectId.value === 'other')
// selectRejectId.value === 'other'
emit('commit', unref(comomitValue), unref(selectBackId), showOther.value)
}
onBeforeMount(async () => {
@ -53,12 +55,21 @@ onBeforeMount(async () => {
reasonOptions.value = rejectList
backOptions.value = backList
// TODO name=
//
reasonOptions.value.push({
label: '其他',
value: 'other',
})
// reasonOptions.value.push({
// label: '',
// value: 'other',
// })
})
async function selectChange(id){
console.log(id,'selectChange')
selectItem.value = reasonOptions.value.find(v=>v.id == id);
}
</script>
<template>
@ -79,9 +90,18 @@ onBeforeMount(async () => {
</div>
<div class="wrapper-content">
<span>不通过原因</span>
<n-select v-model:value="selectRejectId" style="margin-top: 10px;" :options="reasonOptions" />
<n-select v-model:value="selectRejectId" @change="selectChange" style="margin-top: 10px;" :options="reasonOptions" />
<n-input v-show="showOther" v-model:value="otherValue" type="textarea" placeholder="备注内容" style="margin-top: 10px;" />
</div>
<!-- <div class="wrapper-content">
<n-input
type="textarea"
placeholder="备注内容" v-model="showOther"></n-input>
</div> -->
</div>
<template #footer>
<div class="wrapper-footer">

@ -12,6 +12,7 @@ const activeId = ref("");
const el = ref<HTMLDivElement | null>(null);
const keyword = ref("");
const canloadMore = ref(true);
const isLoading = ref(false);
defineProps({
showFieldList: {
@ -28,27 +29,27 @@ function selectHandler(id: string, index: number) {
workStore.setActive(index);
}
const { isLoading } = useInfiniteScroll(
useInfiniteScroll(
el as any,
() => {
loadMore();
},
{
distance: 10,
interval: 800,
canLoadMore: () => {
// console.log('canloadmore excuted!')
return canloadMore.value;
},
interval: 1500,
canLoadMore: () => canloadMore.value
}
);
async function loadMore() {
if (isLoading.value || el.value == null) return;
// console.log('loadmore')
const more = await fetchList();
data.value.push(...more);
isLoading.value = true;
try {
const more = await fetchList();
data.value.push(...more);
} finally {
isLoading.value = false;
}
}
async function fetchList() {
@ -56,7 +57,11 @@ async function fetchList() {
pagination.pageNo += 1;
const result = await workStore.fetchOrderList(pagination, keyword.value);
const { data, pageCount } = result;
canloadMore.value = pageCount >= pagination.pageNo && pageCount !== 0;
if(pageCount !== 0){
canloadMore.value = pageCount >= pagination.pageNo ;
}else{
canloadMore.value = false;
}
return data || [];
} catch (error) {
canloadMore.value = false;

Loading…
Cancel
Save