feat: 适配相关需求 #7

Merged
liushilong merged 5 commits from al into test 1 year ago

@ -8,6 +8,7 @@ import {
reactive, reactive,
ref, ref,
unref, unref,
computed,
} from "vue"; } 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";
@ -26,6 +27,7 @@ const emit = defineEmits<{
}>(); }>();
const show = ref(false); const show = ref(false);
const checkedRowKeys = ref([]);
const cardStyle = { const cardStyle = {
width: "800px", width: "800px",
@ -109,7 +111,7 @@ const pagination = reactive({
}, },
], ],
showQuickJumper: true, showQuickJumper: true,
prefix:()=>`${total.value} 条数据` prefix: () => `${total.value} 条数据`,
}); });
const tableData = ref<Array<RowData>>([]); const tableData = ref<Array<RowData>>([]);
const keyword = ref(""); const keyword = ref("");
@ -119,8 +121,8 @@ async function query(page: number, pageSize: number) {
search_searchname: { value: keyword.value, op: "like", type: "string" }, search_searchname: { value: keyword.value, op: "like", type: "string" },
}; };
const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 1); const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 1);
const { data, pageCount,total } = result; const { data, pageCount, total: totalCount } = result;
total.value = total; total.value = totalCount;
tableData.value = data; tableData.value = data;
pagination.page = page; pagination.page = page;
pagination.pageCount = pageCount; pagination.pageCount = pageCount;
@ -209,7 +211,7 @@ async function handlePageSizeChange(currentPageSize) {
function handleClick() { function handleClick() {
emit("showNewFilter"); emit("showNewFilter");
show.value = false; // show.value = false;
} }
let sortTable: Sortable | null = null; let sortTable: Sortable | null = null;
@ -283,6 +285,10 @@ const inputHandler = debounce((word) => {
keyword.value = word; keyword.value = word;
query(1, 5); query(1, 5);
}, 300); }, 300);
const showSearch = computed(() => {
return selectionIds.value.length > 0;
});
</script> </script>
<template> <template>
@ -307,7 +313,7 @@ const inputHandler = debounce((word) => {
<span :style="{ 'margin-left': '18px' }">基本信息</span> <span :style="{ 'margin-left': '18px' }">基本信息</span>
</div> </div>
</div> </div>
<div class="wrapper-form"> <div class="wrapper-form" v-if="!showSearch">
<n-input <n-input
:style="{ width: '360px', border: '1px solid #cad2dd' }" :style="{ width: '360px', border: '1px solid #cad2dd' }"
placeholder="请输入过滤条件名称搜索" placeholder="请输入过滤条件名称搜索"
@ -324,6 +330,21 @@ const inputHandler = debounce((word) => {
</template> </template>
</n-button> </n-button>
</div> </div>
<div class="wrapper-form" v-else>
<div class="del_btn">
<n-button icon-placement="left" size="medium">
<template #icon>
<SvgIcon name="delete-history" size="16" />
</template>
删除</n-button>
</div>
<div class="msg">
<span>已选中 <span style="color:#507afd;font-size:16px">{{ selectionIds.length }}</span> </span>
<a @click="selectionIds = []">清空</a>
</div>
</div>
<div class="wrapper-table"> <div class="wrapper-table">
<NDataTable <NDataTable
ref="tableRef" ref="tableRef"
@ -337,6 +358,7 @@ const inputHandler = debounce((word) => {
@update:page="handlePageChange" @update:page="handlePageChange"
@update-page-size="handlePageSizeChange" @update-page-size="handlePageSizeChange"
@update:checked-row-keys="handleCheck" @update:checked-row-keys="handleCheck"
:checked-row-keys="selectionIds"
/> />
</div> </div>
</div> </div>
@ -378,6 +400,16 @@ const inputHandler = debounce((word) => {
width: 300px; width: 300px;
border: 1px solid gray; border: 1px solid gray;
} }
.del_btn{
}
.msg{
a{
margin-left: 30px;
cursor: pointer;
color: #507afd;
}
}
} }
&-table { &-table {

@ -308,7 +308,7 @@ defineExpose({
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button type="info" @click="handleSumbit"> <n-button type="info" @click="handleSumbit">
确认 保存
</n-button> </n-button>
<n-button secondary style="margin-left:15px" @click="closeModal"> <n-button secondary style="margin-left:15px" @click="closeModal">
取消 取消

@ -1,5 +1,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineOptions, h, nextTick, onUnmounted, reactive, ref, unref } from "vue"; import {
computed,
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";
@ -111,10 +120,10 @@ async function query(page: number, pageSize: number) {
search_searchname: { value: keyword.value, op: "like", type: "string" }, search_searchname: { value: keyword.value, op: "like", type: "string" },
}; };
const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 0); const result = await getConditionList({ pageNo: page, pageSize }, searchParam, 0);
const { data, pageCount, total } = result; const { data, pageCount, total: totalCount } = result;
tableData.value = data; tableData.value = data;
pagination.page = page; pagination.page = page;
total.value = total; total.value = totalCount;
pagination.pageCount = pageCount; pagination.pageCount = pageCount;
loading.value = false; loading.value = false;
} }
@ -201,7 +210,7 @@ async function handlePageSizeChange(currentPageSize) {
function handleClick() { function handleClick() {
emit("showNewFilter"); emit("showNewFilter");
show.value = false; // show.value = false;
} }
let sortTable: Sortable | null = null; let sortTable: Sortable | null = null;
@ -265,6 +274,7 @@ defineExpose({
showModal, showModal,
}); });
const inputHandler = debounce((word) => { const inputHandler = debounce((word) => {
keyword.value = word; keyword.value = word;
query(1, 5); query(1, 5);
@ -317,6 +327,7 @@ const inputHandler = debounce((word) => {
</template> </template>
</n-button> </n-button>
</div> </div>
<div class="wrapper-table"> <div class="wrapper-table">
<NDataTable <NDataTable
ref="tableRef" ref="tableRef"
@ -331,6 +342,7 @@ const inputHandler = debounce((word) => {
@update:page="handlePageChange" @update:page="handlePageChange"
@update-page-size="handlePageSizeChange" @update-page-size="handlePageSizeChange"
@update:checked-row-keys="handleCheck" @update:checked-row-keys="handleCheck"
/> />
</div> </div>
</div> </div>

@ -341,7 +341,7 @@ defineExpose({
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button type="info" @click="handleSumbit"> <n-button type="info" @click="handleSumbit">
确认 保存
</n-button> </n-button>
<n-button secondary style="margin-left:15px" @click="closeModal"> <n-button secondary style="margin-left:15px" @click="closeModal">
取消 取消

@ -228,7 +228,7 @@ function switchTab(type: number) {
} }
function computedForm() { function computedForm() {
return !formInline.enterprisecode || !formInline.username || !formInline.password; return !formForget.phonecode || !formForget.phone || !formForget.loginname || !formForget.agentcode;
} }
function computedFormSure() { function computedFormSure() {

@ -1,32 +1,32 @@
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue' import { reactive, ref, toRefs } from "vue";
import { format } from 'date-fns' import { format } from "date-fns";
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from "vue-router";
import { getMessageList, readAllMsg, readMsg } from '@/api/message/message' import { getMessageList, readAllMsg, readMsg } from "@/api/message/message";
import iconApproveActive from '@/assets/images/message/approve-active.png' import iconApproveActive from "@/assets/images/message/approve-active.png";
import iconApprove from '@/assets/images/message/approve.png' import iconApprove from "@/assets/images/message/approve.png";
import iconSystemActive from '@/assets/images/message/system-active.png' import iconSystemActive from "@/assets/images/message/system-active.png";
import iconSystem from '@/assets/images/message/system.png' import iconSystem from "@/assets/images/message/system.png";
import iconArrowActive from '@/assets/images/message/arrow-active.png' import iconArrowActive from "@/assets/images/message/arrow-active.png";
import iconArrow from '@/assets/images/message/arrow.png' import iconArrow from "@/assets/images/message/arrow.png";
import iconClear from '@/assets/images/message/clear.png' import iconClear from "@/assets/images/message/clear.png";
import iconArrowDown from '@/assets/images/message/arrow-down.png' import iconArrowDown from "@/assets/images/message/arrow-down.png";
const emit = defineEmits(['goDetail']) const emit = defineEmits(["goDetail"]);
const router = useRouter() const router = useRouter();
const route = useRoute() const route = useRoute();
const hasNextPage = ref(false) const hasNextPage = ref(false);
const state = reactive({ const state = reactive({
tabList: [ tabList: [
{ {
name: '审批通知', name: "审批通知",
icon: iconApprove, icon: iconApprove,
activeIcon: iconApproveActive, activeIcon: iconApproveActive,
value: 1, value: 1,
}, },
{ {
name: '系统消息', name: "系统消息",
icon: iconSystem, icon: iconSystem,
activeIcon: iconSystemActive, activeIcon: iconSystemActive,
value: 2, value: 2,
@ -34,112 +34,147 @@ const state = reactive({
], ],
list: [] as any, list: [] as any,
pageNo: 1, pageNo: 1,
}) });
const { list, tabList } = toRefs(state) const { list, tabList } = toRefs(state);
const tab = ref(1) const tab = ref(1);
async function getList() { async function getList(type = "") {
const res = await getMessageList({ let res = await getMessageList({
pageNo: state.pageNo, pageNo: state.pageNo,
pageSize: '7', pageSize: "7",
msgCategory: tab.value, msgCategory: tab.value,
}) });
if (res.code === 'OK') { if (type == "more") {
hasNextPage.value = res.data.hasNextPage while (res.data.endRow > 0) {
if (res.code == "OK") {
if (tab.value === 1) { if (tab.value === 1) {
res.data.list.forEach((item) => { res.data.list.forEach((item) => {
item.tag = JSON.parse(item.busJson) item.tag = JSON.parse(item.busJson);
}) });
}
state.list = state.list.concat(res.data.list);
state.pageNo++;
res = await getMessageList({
pageNo: state.pageNo,
pageSize: "7",
msgCategory: tab.value,
});
}
}
hasNextPage.value = res.data.hasNextPage;
} else {
if (res.code === "OK") {
hasNextPage.value = res.data.hasNextPage;
if (tab.value === 1) {
res.data.list.forEach((item) => {
item.tag = JSON.parse(item.busJson);
});
}
state.list = state.list.concat(res.data.list);
} }
console.log(res.data.list)
state.list = state.list.concat(res.data.list)
} }
} }
getList() getList();
async function clearMsg() { async function clearMsg() {
const res = await readAllMsg({ msgCategory: tab.value }) const res = await readAllMsg({ msgCategory: tab.value });
if (res.code === 'OK') { if (res.code === "OK") {
state.list = [] state.list = [];
state.pageNo = 1 state.pageNo = 1;
getList() getList();
} }
} }
function switchTab(type: number) { function switchTab(type: number) {
tab.value = type tab.value = type;
state.list = [] state.list = [];
state.pageNo = 1 state.pageNo = 1;
getList() getList();
} }
function goFinalDetail(row) { function goFinalDetail(row) {
console.log(row) console.log(row);
router.push({ name: 'final-detail', query: { id: row.tag.taskId, packageid: row.packageid } }) router.push({
name: "final-detail",
query: { id: row.tag.taskId, packageid: row.packageid },
});
} }
function goDetail(item) { function goDetail(item) {
if (tab.value === 1) { if (tab.value === 1) {
clearMsgOne(item.id) clearMsgOne(item.id);
goFinalDetail(item) goFinalDetail(item);
} }
else
// emit('goDetail', item.id) // emit('goDetail', item.id)
{ router.push({ name: 'message-detail', query: { id: item.id } }) } else {
router.push({ name: "message-detail", query: { id: item.id } });
}
} }
async function clearMsgOne(id) { async function clearMsgOne(id) {
const res = await readMsg({ msgid: id }) const res = await readMsg({ msgid: id });
} }
function getMore() { function getMore() {
state.pageNo += 1 state.pageNo += 1;
getList() getList("more");
} }
</script> </script>
<template> <template>
<div class="wrapper-message"> <div class="wrapper-message">
<div class="flex justify-between header"> <div class="flex justify-between header">
<div class="header-title"> <div class="header-title">消息通知</div>
消息通知
</div>
<div class="clear" @click="clearMsg"> <div class="clear" @click="clearMsg">
<img class="icon-clear" :src="iconClear" alt=""> <img class="icon-clear" :src="iconClear" alt="" />
清除未读 清除未读
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="slider"> <div class="slider">
<div <div
v-for="(item) in tabList" v-for="item in tabList"
:key="item.value" :key="item.value"
:class="{ 'item-active': tab === item.value }" :class="{ 'item-active': tab === item.value }"
class="flex item" class="flex item"
@click="switchTab(item.value)" @click="switchTab(item.value)"
> >
<div class="flex item-left align-center"> <div class="flex item-left align-center">
<img class="icon" :src="tab === item.value ? item.activeIcon : item.icon" alt=""> <img
class="icon"
:src="tab === item.value ? item.activeIcon : item.icon"
alt=""
/>
<div :class="{ 'text-active': tab === item.value }" class="text"> <div :class="{ 'text-active': tab === item.value }" class="text">
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div>
<img class="icon-arrow" :src="tab === item.value ? iconArrowActive : iconArrow" alt=""> <img
class="icon-arrow"
:src="tab === item.value ? iconArrowActive : iconArrow"
alt=""
/>
<div v-if="tab === item.value" class="line" /> <div v-if="tab === item.value" class="line" />
</div> </div>
</div> </div>
<div class="list"> <div class="list">
<div v-for="(item, index) in list" :key="item.id" :class="{ 'pt0': index === 0, 'item-disabled': item.readFlag }" class="item" @click="goDetail(item)"> <div
v-for="(item, index) in list"
:key="item.id"
:class="{ pt0: index === 0, 'item-disabled': item.readFlag }"
class="item"
@click="goDetail(item)"
>
<div class="left"> <div class="left">
<div class="num"> <div class="num">
{{ format(item.sendTime, 'dd') }} {{ format(item.sendTime, "dd") }}
<div v-if="!item.readFlag" class="point" /> <div v-if="!item.readFlag" class="point" />
</div> </div>
<div class="date"> <div class="date">
{{ format(item.sendTime, 'yyyy-MM') }} {{ format(item.sendTime, "yyyy-MM") }}
</div> </div>
</div> </div>
<div class="middle"> <div class="middle">
@ -150,29 +185,25 @@ function getMore() {
{{ item.titile }} {{ item.titile }}
</div> </div>
<div v-if="tab === 1" class="status"> <div v-if="tab === 1" class="status">
<div class="tag tag-blue"> <div class="tag tag-blue">审批节点{{ item.tag.nodeName }}</div>
审批节点{{ item.tag.nodeName }}
</div>
<div :class="item.tag.states === 5 ? 'tag-red' : 'tag-green'" class="tag"> <div :class="item.tag.states === 5 ? 'tag-red' : 'tag-green'" class="tag">
审批状态{{ item.tag.states }} 审批状态{{ item.tag.states }}
</div> </div>
</div> </div>
<div v-if="tab === 1" class="subtitle"> <div v-if="tab === 1" class="subtitle">
<span class="name">{{ item.tag.sendUserName }}</span> <span class="name">{{ item.tag.sendUserName }}</span>
<span class="time">{{ format(item.sendTime, 'yyyy-MM-dd HH:mm:ss') }}</span> <span class="time">{{ format(item.sendTime, "yyyy-MM-dd HH:mm:ss") }}</span>
</div> </div>
<div v-else class="subtitle"> <div v-else class="subtitle">
<span class="name">{{ item.userName }}</span> <span class="name">{{ item.userName }}</span>
<span class="time">{{ format(item.sendTime, 'yyyy-MM-dd HH:mm:ss') }}</span> <span class="time">{{ format(item.sendTime, "yyyy-MM-dd HH:mm:ss") }}</span>
</div> </div>
</div> </div>
<div class="look"> <div class="look">查看</div>
查看
</div>
</div> </div>
<div v-if="hasNextPage" class="more" @click="getMore"> <div v-if="hasNextPage" class="more" @click="getMore">
查看更多<img class="icon-more" :src="iconArrowDown" alt=""> 查看更多<img class="icon-more" :src="iconArrowDown" alt="" />
</div> </div>
</div> </div>
</div> </div>
@ -185,7 +216,7 @@ function getMore() {
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
background: #FFF; background: #fff;
border-radius: 3px; border-radius: 3px;
height: calc(100vh - 88px); height: calc(100vh - 88px);
position: relative; position: relative;
@ -241,7 +272,7 @@ function getMore() {
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
&-active { &-active {
background: rgba(80,122,253,.1); background: rgba(80, 122, 253, 0.1);
} }
} }
@ -256,7 +287,7 @@ function getMore() {
color: #333333; color: #333333;
margin-left: 12px; margin-left: 12px;
&-active { &-active {
color: #507AFD; color: #507afd;
} }
} }
@ -385,18 +416,18 @@ function getMore() {
} }
.tag-blue { .tag-blue {
background: rgba(80,122,253,0.10); background: rgba(80, 122, 253, 0.1);
color: #507afd; color: #507afd;
} }
.tag-red { .tag-red {
color: #ff4e4f; color: #ff4e4f;
background: rgba(255,78,79,0.10); background: rgba(255, 78, 79, 0.1);
} }
.tag-green { .tag-green {
color: #3EE199; color: #3ee199;
background: rgba(62,225,153,0.10); background: rgba(62, 225, 153, 0.1);
} }
.title { .title {
@ -430,7 +461,6 @@ function getMore() {
cursor: pointer; cursor: pointer;
} }
} }
} }
} }

Loading…
Cancel
Save