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) { async fetchOrderList(pagination, keyword) {
const res = await getPackageList(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) this.packageList.push(...res.data)
if (!this.activeId) if (!this.activeId)
this.setActive(0) this.setActive(0)

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

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

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

Loading…
Cancel
Save