|
@@ -1,10 +1,11 @@
|
|
|
<template>
|
|
|
- <Page :title='`${queryParameters?.name}列表`'>
|
|
|
+ <Page :title='`${queryParameters.name}列表`'>
|
|
|
<template v-slot:body>
|
|
|
<div class="flex flex-col h-full">
|
|
|
<!-- 搜索 -->
|
|
|
- <div class="mx-1">
|
|
|
- <van-search v-model="searchVal" background="#F8F8F8" :placeholder="`请输入${queryParameters?.name}关键词`">
|
|
|
+ <div class="mx-1 headerModeuleList">
|
|
|
+ <van-search v-model.trim="searchVal" background="#F8F8F8" :placeholder="`请输入${queryParameters?.name}关键词`"
|
|
|
+ @search="onRefresh(true)" @clear="onRefresh(true)">
|
|
|
<template v-slot:left-icon>
|
|
|
<van-icon name="search" class="themeTextColor font-bold" />
|
|
|
</template>
|
|
@@ -12,14 +13,14 @@
|
|
|
</div>
|
|
|
<!-- 主题内容 -->
|
|
|
<div class="flex-1 overflow-y-auto">
|
|
|
- <template v-if="listData?.records && listData.records.length">
|
|
|
+ <template v-if="listData?.records && listData.records.length && !loadingList">
|
|
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
|
|
<van-list v-model:loading="isLoading" :finished="finished" finished-text="没有更多了" @load="onLoad">
|
|
|
<div v-for="item in listData.records" :key="item.id" @click="toDetail(item)">
|
|
|
<van-swipe-cell>
|
|
|
<div class="bg-white px-5 py-5 flex items-center flex-row w-full listContent">
|
|
|
<div class="listOfImages items-justify-center rounded-full overflow-hidden bg-[#FFEEEC]">
|
|
|
- 图片
|
|
|
+ <img :src="queryParameters.homeImage" class="w-full h-full">
|
|
|
</div>
|
|
|
<div class="flex-1 h-full">
|
|
|
<!-- 商机 -->
|
|
@@ -43,9 +44,8 @@
|
|
|
<template #right>
|
|
|
<div class="flex items-center h-full bg-white">
|
|
|
<template v-for="subItem in popUpWindowArray">
|
|
|
- <div class="buttonCircle rounded-full items-justify-center text-white"
|
|
|
- :style="`background-color: ${subItem.bg}`" @click="longPress(item, subItem)">
|
|
|
- 按钮
|
|
|
+ <div class="buttonCircle rounded-full items-justify-center text-white" @click="longPress(item, subItem)">
|
|
|
+ <img :src="subItem.icon" class="w-full h-full">
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
@@ -55,28 +55,49 @@
|
|
|
</van-list>
|
|
|
</van-pull-refresh>
|
|
|
</template>
|
|
|
+ <template v-else>
|
|
|
+ <van-skeleton title :row="20" class="w-full h-full" />
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 可拖拽添加 -->
|
|
|
<DragBox>
|
|
|
- <div class="addButton backgroundThemeColor rounded-full flex items-center justify-center text-white" @click="toAddEditor">
|
|
|
- 添加
|
|
|
+ <div class="addButton" @click="toAddEditor()">
|
|
|
+ <img src="/src/assets/image/add.png" class="w-full h-full" />
|
|
|
</div>
|
|
|
</DragBox>
|
|
|
+
|
|
|
+ <!-- 转移弹窗 -->
|
|
|
+ <van-dialog v-model:show="showDialog" :title="`转移${queryParameters?.name || ''}`" show-cancel-button
|
|
|
+ @confirm="confirmTransfer" :before-close="dialogCloseBefo">
|
|
|
+ <van-cell title="转移至" is-link @click="showSelect = true">
|
|
|
+ <template #value>
|
|
|
+ {{ dialogSelection.label }}
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <div class="themeTextColor text-size-small pl-4 pt-2 pb-2">转移后,将看不到此{{ queryParameters?.name || '' }}</div>
|
|
|
+ </van-dialog>
|
|
|
+
|
|
|
+ <!-- select 选择器 -->
|
|
|
+ <van-popup v-model:show="showSelect" destroy-on-close position="bottom" :style="{ height: '80%' }">
|
|
|
+ <PullDownSelector @change="selectChange" />
|
|
|
+ </van-popup>
|
|
|
</template>
|
|
|
</Page>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, onActivated } from 'vue';
|
|
|
+import { showConfirmDialog } from 'vant';
|
|
|
import { useLifecycle } from '@hooks/useCommon.js';
|
|
|
import { resetListData, getListFieldKey } from '@components/common/formForm/formCorrespondenceProcessing'
|
|
|
+import useShowToast from '@hooks/useToast'
|
|
|
import { GET_CUSTOM_FORM_JSON } from '@hooks/useApi'
|
|
|
import requests from "@common/requests";
|
|
|
import useRouterStore from "@store/useRouterStore.js";
|
|
|
import useFixedData from "@store/useFixedData.js"
|
|
|
-import ElementLongPress from "@components/common/elementLongPress.vue";
|
|
|
+// import ElementLongPress from "@components/common/elementLongPress.vue";
|
|
|
import DragBox from '@components/common/dragBox.vue';
|
|
|
|
|
|
const TRANSFER = 'transfer';
|
|
@@ -84,16 +105,20 @@ const DELETE = 'delete';
|
|
|
const EDIT = 'edit';
|
|
|
const TOP_MOUNTED = 'topMounted';
|
|
|
|
|
|
+const { toastSuccess, toastFail, toastText } = useShowToast()
|
|
|
const router = useRouterStore()
|
|
|
const fixedData = useFixedData()
|
|
|
const searchVal = ref()
|
|
|
-const queryParameters = ref()
|
|
|
+const queryParameters = ref({})
|
|
|
+const loadingList = ref(false)
|
|
|
const popUpWindowArray = ref([
|
|
|
- { text: '转移', event: TRANSFER, bg: '#FFA359', removeModule: ['contacts', 'tasks', 'product', 'contract', 'order'] },
|
|
|
- { text: '顶置', event: TOP_MOUNTED, bg: '#075985', removeModule: [] },
|
|
|
- { text: '编辑', event: EDIT, bg: '#07C160', removeModule: [] },
|
|
|
- { text: '删除', event: DELETE, bg: '#FF6A6A', removeModule: [] },
|
|
|
+ { text: '转移', event: TRANSFER, icon: '/src/assets/image/transfer.png', removeModule: ['contacts', 'tasks', 'product', 'contract', 'order'] },
|
|
|
+ { text: '顶置', event: TOP_MOUNTED, icon: '/src/assets/image/topMounted.png', removeModule: [] },
|
|
|
+ { text: '编辑', event: EDIT, icon: '/src/assets/image/edit.png', removeModule: [] },
|
|
|
+ { text: '删除', event: DELETE, icon: '/src/assets/image/delete.png', removeModule: [] },
|
|
|
])
|
|
|
+const showSelect = ref(false)
|
|
|
+const showDialog = ref(false)
|
|
|
const refreshing = ref(false);
|
|
|
const isLoading = ref(false);
|
|
|
const finished = ref(false);
|
|
@@ -104,6 +129,8 @@ const listData = ref({
|
|
|
total: 0,
|
|
|
totalPage: 0,
|
|
|
});
|
|
|
+const excessiveData = ref({});
|
|
|
+const dialogSelection = ref({});
|
|
|
|
|
|
// 按钮触发的事件: row 为当前点击的行数据, item 为当前点击的按钮
|
|
|
function longPress(row, item) {
|
|
@@ -136,12 +163,38 @@ function edit(row) {
|
|
|
|
|
|
// 转移事件
|
|
|
function transfer(row) {
|
|
|
- console.log(row, '<======= 转移事件')
|
|
|
+ dialogSelection.value = {}
|
|
|
+ excessiveData.value = row
|
|
|
+ showDialog.value = true
|
|
|
+}
|
|
|
+
|
|
|
+function confirmTransfer() {
|
|
|
+ if(!dialogSelection.value.label) {
|
|
|
+ return toastText('请选择要转移的人员')
|
|
|
+ }
|
|
|
+ const { id } = excessiveData.value
|
|
|
+ const { value } = dialogSelection.value
|
|
|
+ requests.post(queryParameters?.value.transferInterface, { ids: id, inchargerId: value }).then((res) => {
|
|
|
+ toastSuccess('转移成功')
|
|
|
+ onRefresh(true)
|
|
|
+ showDialog.value = false
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
// 删除事件
|
|
|
function deleteRow(row) {
|
|
|
- console.log(row, '<======= 删除事件')
|
|
|
+ const { name = '', searchFiled = {}, deteleFiled = '' } = queryParameters.value
|
|
|
+ showConfirmDialog({
|
|
|
+ title: `删除${name}`,
|
|
|
+ message: `确定删除【${row[searchFiled?.search]}】${name}吗?`,
|
|
|
+ }).then(() => {
|
|
|
+ requests.post(deteleFiled, { ids: row.id }).then((res) => {
|
|
|
+ toastSuccess('删除成功')
|
|
|
+ onRefresh(true)
|
|
|
+ }).catch((err) => {
|
|
|
+ toastFail(err.msg ? err.msg : '删除失败')
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
// 顶置事件
|
|
@@ -173,11 +226,11 @@ function toAddEditor(value) {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-function onRefresh() {
|
|
|
+function onRefresh(flag = false) {
|
|
|
finished.value = false;
|
|
|
isLoading.value = true;
|
|
|
listData.value.pageIndex = 1;
|
|
|
- fetchListData();
|
|
|
+ fetchListData(flag);
|
|
|
}
|
|
|
|
|
|
function onLoad() {
|
|
@@ -186,7 +239,7 @@ function onLoad() {
|
|
|
fetchListData()
|
|
|
}
|
|
|
|
|
|
-async function fetchListData() {
|
|
|
+async function fetchListData(flag = false) {
|
|
|
console.log(listData.value.totalPage, listData.value.pageIndex)
|
|
|
if (
|
|
|
// 如果总页数小于等于现页数,并且不是第一次加载, 或者正在加载数据 直接跳出不请求
|
|
@@ -196,7 +249,7 @@ async function fetchListData() {
|
|
|
finished.value = true;
|
|
|
return;
|
|
|
}
|
|
|
- const res = await getListData()
|
|
|
+ const res = await getListData(flag)
|
|
|
if (res.code === 'ok') {
|
|
|
const list = res.data.data || res.data.records || res.data.record
|
|
|
const total = res.data.total
|
|
@@ -214,12 +267,20 @@ async function fetchListData() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-async function getListData() {
|
|
|
+async function getListData(flag = false) {
|
|
|
const url = queryParameters.value.listUrl
|
|
|
+ if (flag) {
|
|
|
+ loadingList.value = true
|
|
|
+ }
|
|
|
const res = await requests.post(url, {
|
|
|
pageIndex: listData.value.pageIndex,
|
|
|
pageSize: listData.value.pageSize,
|
|
|
- pageFrom: listData.value.pageSize
|
|
|
+ pageFrom: listData.value.pageSize,
|
|
|
+ [queryParameters.value?.searchFiled?.search]: searchVal.value
|
|
|
+ }).finally(() => {
|
|
|
+ if (flag) {
|
|
|
+ loadingList.value = false
|
|
|
+ }
|
|
|
})
|
|
|
return res
|
|
|
}
|
|
@@ -249,6 +310,21 @@ function getFormJson(info = {}) {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+function selectChange(value, label) {
|
|
|
+ dialogSelection.value = {
|
|
|
+ value, label
|
|
|
+ }
|
|
|
+ showSelect.value = false
|
|
|
+}
|
|
|
+
|
|
|
+function dialogCloseBefo(val) {
|
|
|
+ if(val == 'confirm' && showDialog.value) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ return true
|
|
|
+}
|
|
|
+
|
|
|
useLifecycle({
|
|
|
load: () => {
|
|
|
router.on('moduleListDetailParameter', (data) => {
|
|
@@ -265,6 +341,10 @@ useLifecycle({
|
|
|
width: 37px;
|
|
|
height: 37px;
|
|
|
margin-left: 10px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.addButton {
|
|
@@ -283,7 +363,7 @@ useLifecycle({
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-::v-deep .van-search__content {
|
|
|
+.headerModeuleList :deep(.van-search__content) {
|
|
|
background: #fff !im\portant;
|
|
|
height: 42px;
|
|
|
align-items: center;
|