|
@@ -1,37 +1,68 @@
|
|
|
<template>
|
|
|
<Page :title='`${queryParameters?.name}列表`'>
|
|
|
<template v-slot:body>
|
|
|
- <template v-if="listData?.records && listData.records.length">
|
|
|
- <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)">
|
|
|
- <ElementLongPress :row="item" :popUpWindowArray="popUpWindowArray" @longPress="longPress">
|
|
|
- <div class="p-[10px] bg-white my-[8px]">
|
|
|
- <!-- 商机 -->
|
|
|
- <template v-if="queryParameters?.key == 'business'">{{ item.name }}</template>
|
|
|
- <!-- 线索 -->
|
|
|
- <template v-if="queryParameters?.key == 'thread'">{{ item.clueName }}</template>
|
|
|
- <!-- 客户 -->
|
|
|
- <template v-if="queryParameters?.key == 'customer'">{{ item.customName }}</template>
|
|
|
- <!-- 联系人 -->
|
|
|
- <template v-if="queryParameters?.key == 'contacts'">{{ item.name }}</template>
|
|
|
- <!-- 任务 -->
|
|
|
- <template v-if="queryParameters?.key == 'tasks'">{{ item.taskName }}</template>
|
|
|
- <!-- 产品 -->
|
|
|
- <template v-if="queryParameters?.key == 'product'">{{ item.productName }}</template>
|
|
|
- <!-- 合同 -->
|
|
|
- <template v-if="queryParameters?.key == 'contract'">{{ item.name }}</template>
|
|
|
- <!-- 销售 -->
|
|
|
- <template v-if="queryParameters?.key == 'order'">{{ item.orderName }}</template>
|
|
|
+ <div class="flex flex-col h-full">
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <div class="mx-1">
|
|
|
+ <van-search v-model="searchVal" background="#F8F8F8" :placeholder="`请输入${queryParameters?.name}关键词`">
|
|
|
+ <template v-slot:left-icon>
|
|
|
+ <van-icon name="search" class="themeTextColor font-bold" />
|
|
|
+ </template>
|
|
|
+ </van-search>
|
|
|
+ </div>
|
|
|
+ <!-- 主题内容 -->
|
|
|
+ <div class="flex-1 overflow-y-auto">
|
|
|
+ <template v-if="listData?.records && listData.records.length">
|
|
|
+ <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]">
|
|
|
+ 图片
|
|
|
+ </div>
|
|
|
+ <div class="flex-1 h-full">
|
|
|
+ <!-- 商机 -->
|
|
|
+ <template v-if="queryParameters?.key == 'business'">{{ item.name }}</template>
|
|
|
+ <!-- 线索 -->
|
|
|
+ <template v-if="queryParameters?.key == 'thread'">{{ item.clueName }}</template>
|
|
|
+ <!-- 客户 -->
|
|
|
+ <template v-if="queryParameters?.key == 'customer'">{{ item.customName }}</template>
|
|
|
+ <!-- 联系人 -->
|
|
|
+ <template v-if="queryParameters?.key == 'contacts'">{{ item.name }}</template>
|
|
|
+ <!-- 任务 -->
|
|
|
+ <template v-if="queryParameters?.key == 'tasks'">{{ item.taskName }}</template>
|
|
|
+ <!-- 产品 -->
|
|
|
+ <template v-if="queryParameters?.key == 'product'">{{ item.productName }}</template>
|
|
|
+ <!-- 合同 -->
|
|
|
+ <template v-if="queryParameters?.key == 'contract'">{{ item.name }}</template>
|
|
|
+ <!-- 销售 -->
|
|
|
+ <template v-if="queryParameters?.key == 'order'">{{ item.orderName }}</template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <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>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-swipe-cell>
|
|
|
</div>
|
|
|
- </ElementLongPress>
|
|
|
- </div>
|
|
|
- </van-list>
|
|
|
- </van-pull-refresh>
|
|
|
- </template>
|
|
|
+ </van-list>
|
|
|
+ </van-pull-refresh>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- 可拖拽添加 -->
|
|
|
<DragBox>
|
|
|
- <van-button type="primary" @click="toAddEditor()">添加</van-button>
|
|
|
+ <div class="addButton backgroundThemeColor rounded-full flex items-center justify-center text-white" @click="toAddEditor">
|
|
|
+ 添加
|
|
|
+ </div>
|
|
|
</DragBox>
|
|
|
</template>
|
|
|
</Page>
|
|
@@ -55,14 +86,14 @@ const TOP_MOUNTED = 'topMounted';
|
|
|
|
|
|
const router = useRouterStore()
|
|
|
const fixedData = useFixedData()
|
|
|
+const searchVal = ref()
|
|
|
const queryParameters = ref()
|
|
|
const popUpWindowArray = ref([
|
|
|
- { text: '转移', event: TRANSFER, removeModule: ['contacts', 'tasks', 'product', 'contract', 'order'] },
|
|
|
- { text: '删除', event: DELETE, removeModule: [] },
|
|
|
- { text: '编辑', event: EDIT, removeModule: [] },
|
|
|
- { text: '顶置', event: TOP_MOUNTED, removeModule: [] },
|
|
|
+ { 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: [] },
|
|
|
])
|
|
|
-
|
|
|
const refreshing = ref(false);
|
|
|
const isLoading = ref(false);
|
|
|
const finished = ref(false);
|
|
@@ -74,7 +105,7 @@ const listData = ref({
|
|
|
totalPage: 0,
|
|
|
});
|
|
|
|
|
|
-// 长按触发的事件: row 为当前点击的行数据, item 为当前点击的按钮
|
|
|
+// 按钮触发的事件: row 为当前点击的行数据, item 为当前点击的按钮
|
|
|
function longPress(row, item) {
|
|
|
switch (item.event) {
|
|
|
case EDIT:
|
|
@@ -200,7 +231,7 @@ function reloadListData(data) {
|
|
|
finished.value = false
|
|
|
listData.value = { records: [], pageIndex: 0, pageSize: 20, total: 0, totalPage: 0 }
|
|
|
popUpWindowArray.value = popUpWindowArray.value.filter(item => !item.removeModule.includes(queryParameters.value?.key))
|
|
|
- if(!fixedData.formJson[queryParameters.value.key]) {
|
|
|
+ if (!fixedData.formJson[queryParameters.value.key]) {
|
|
|
getFormJson(queryParameters.value)
|
|
|
}
|
|
|
onLoad()
|
|
@@ -230,5 +261,32 @@ useLifecycle({
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
-/* 样式代码 */
|
|
|
+.buttonCircle {
|
|
|
+ width: 37px;
|
|
|
+ height: 37px;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.addButton {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.listContent {
|
|
|
+ border: 1px solid #F6F6FA;
|
|
|
+
|
|
|
+ .listOfImages {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .van-search__content {
|
|
|
+ background: #fff !im\portant;
|
|
|
+ height: 42px;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 6px;
|
|
|
+}
|
|
|
</style>
|