feat: 弹框样式调整及细节调整

pull/1/head
刘释隆 1 year ago
parent 31f04b7ee1
commit aca010ccd1

@ -134,10 +134,10 @@ const options = computed(() => {
.container {
.header{
.user-name{
font-size: 21px;
font-size: 16px;
}
.depart-name{
font-size: 16px;
font-size: 12px;
}
}
}

@ -25,7 +25,7 @@ const offList = ref<any[]>([]);
const onList = ref<any[]>([]);
const allCount = computed(() => {
return `全部筛选(共${offList.value.length - 1}个)`;
return `全部筛选(共${offList.value.length}个)`;
});
const selectCount = computed(() => {
@ -389,6 +389,7 @@ const rightInputHandler = debounce((keyword) => {
&-info {
font-weight: bold;
position: relative;
font-size: 14px;
&:before {
background-color: #1980ff;
@ -446,9 +447,13 @@ const rightInputHandler = debounce((keyword) => {
--n-padding-bottom: 12px;
}
::v-deep(.n-card > .n-card-header .n-card-header__main){
font-weight: bolder !important;
font-weight: lighter !important;
font-size: 14px;
}
::v-deep(.n-scrollbar){
border-top: none !important;
}
::v-deep(.n-button--info-type){
background: #507AFD !important;
}
</style>

@ -64,7 +64,6 @@ onMounted(async () => {
}
offList.value.push(item);
});
});
const allCount = computed(() => {
@ -344,7 +343,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
<SvgIcon size="14px" name="magnifying-1" />
</template>
</n-input>
<div class="draggable-ul">
<div class="draggable-ul left-wrap">
<div class="draggable-li">
<n-checkbox
v-model:checked="checkAll"
@ -403,15 +402,12 @@ function removeHandler(id: string, type: "fix" | "unfix") {
:class="{ fix: item.fix }"
class="cursor-move draggable-item"
>
<SvgIcon name="drag" size="24" />
<span class="ml-2">{{ item.name }}</span>
<SvgIcon
v-if="!item.fix"
size="16px"
style="
display: block;
margin-left: auto;
cursor: pointer;
"
style="display: block; margin-left: auto; cursor: pointer"
name="clear"
@click="removeHandler(item.id, 'fix')"
/>
@ -430,15 +426,12 @@ function removeHandler(id: string, type: "fix" | "unfix") {
:class="{ fix: item.fix }"
class="cursor-move draggable-item"
>
<SvgIcon name="drag" size="24" />
<span class="ml-2">{{ item.name }}</span>
<SvgIcon
v-if="!item.fix"
size="16px"
style="
display: block;
margin-left: auto;
cursor: pointer;
"
style="display: block; margin-left: auto; cursor: pointer"
name="clear"
@click="removeHandler(item.id, 'unfix')"
/>
@ -467,6 +460,8 @@ function removeHandler(id: string, type: "fix" | "unfix") {
.wrapper {
display: flex;
flex-direction: column;
border-bottom: 1px solid #e8e8e8;
padding-bottom: 32px;
&-title {
font-weight: bold;
@ -474,7 +469,6 @@ function removeHandler(id: string, type: "fix" | "unfix") {
}
&-bar {
background-color: #e8e8e8;
width: 100%;
margin-top: 20px;
}
@ -487,6 +481,8 @@ function removeHandler(id: string, type: "fix" | "unfix") {
&-info {
font-weight: bold;
position: relative;
color: #333333;
font-size: 14px;
&:before {
background-color: #1980ff;
@ -507,8 +503,11 @@ function removeHandler(id: string, type: "fix" | "unfix") {
.cardstyle {
width: 820px;
--n-padding-bottom: 20px;
// --n-padding-bottom: 20px;
--n-padding-left: 24px;
--n-padding-right: 24px;
--n-padding-top: 20px;
// padding: 20px 24px 0 24px !important
}
.textbtnStyle {
@ -540,10 +539,11 @@ function removeHandler(id: string, type: "fix" | "unfix") {
}
.draggable-item {
padding: 10px 16px;
padding: 11px 16px;
color: #333;
display: flex;
align-items: center;
border-bottom: 1px solid #e8e8e8;
}
.disable-check {
@ -551,9 +551,7 @@ function removeHandler(id: string, type: "fix" | "unfix") {
}
}
::v-deep(
.n-card.n-card--content-segmented > .n-card__content:not(:first-child)
) {
::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
border: 0px;
}
@ -561,10 +559,20 @@ function removeHandler(id: string, type: "fix" | "unfix") {
--n-padding-top: 0px;
--n-padding-bottom: 12px;
}
::v-deep(.n-card > .n-card-header .n-card-header__main){
font-weight: bolder !important;
::v-deep(.n-card > .n-card-header .n-card-header__main) {
font-weight: lighter !important;
font-size: 14px;
}
::v-deep(.n-scrollbar){
::v-deep(.n-scrollbar) {
border-top: none !important;
}
::v-deep(.n-button--info-type) {
background: #507afd !important;
}
.left-wrap{
border: 1px solid #cbd3de;
}
// ::v-deep(.n-card__content){
// padding: 20px 24px 0 24px !important;
// }
</style>

@ -88,7 +88,7 @@ const pagination = reactive({
page: 1,
pageCount: 1,
pageSize: 10,
showSizePicker:true,
showSizePicker: true,
pageSizes: [
{
label: "10 每页",
@ -108,6 +108,7 @@ const pagination = reactive({
},
],
showQuickJumper: true,
itemCount:100
});
const tableData = ref<Array<RowData>>([]);
const keyword = ref("");
@ -204,7 +205,6 @@ async function handlePageSizeChange(currentPageSize) {
await query(page, currentPageSize);
}
function handleClick() {
emit("showNewFilter");
show.value = false;
@ -333,9 +333,8 @@ const inputHandler = debounce((word) => {
:pagination="pagination"
:row-key="rowKey"
@update:page="handlePageChange"
@update-page-size="handlePageSizeChange"
@update-page-size="handlePageSizeChange"
@update:checked-row-keys="handleCheck"
/>
</div>
</div>

@ -1,108 +1,105 @@
<script lang="ts" setup>
import { computed, h, reactive, ref, unref } from 'vue'
import { NDataTable, useDialog } from 'naive-ui'
import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
import Action from '../comp/Action.vue'
import { RejectModal } from './index'
import type { RowData } from '@/config/final'
import { getFinalList } from '@/api/final'
import type { ApprovalParam } from '/#/api'
import { audit } from '@/api/task/task'
import { computed, h, reactive, ref, unref } from "vue";
import { NDataTable, useDialog } from "naive-ui";
import type { DataTableColumns, DataTableRowKey } from "naive-ui";
import Action from "../comp/Action.vue";
import { RejectModal } from "./index";
import type { RowData } from "@/config/final";
import { getFinalList } from "@/api/final";
import type { ApprovalParam } from "/#/api";
import { audit } from "@/api/task/task";
const emit = defineEmits<{
(e: 'commit', columns: any[])
}>()
(e: "commit", columns: any[]);
}>();
const show = ref(false)
const show = ref(false);
function showModal() {
show.value = true
show.value = true;
}
function closeModal() {
show.value = false
show.value = false;
}
async function handleSumbit(e: MouseEvent) {
e.preventDefault()
closeModal()
e.preventDefault();
closeModal();
}
defineExpose({
showModal,
})
});
const columns: DataTableColumns<RowData> = [
{
type: 'selection',
fixed: 'left',
type: "selection",
fixed: "left",
width: 50,
},
{
title: '任务Id',
key: 'id',
fixed: 'left',
title: "任务Id",
key: "id",
fixed: "left",
width: 100,
},
{
title: '任务名称',
key: 'fromtaskname',
fixed: 'left',
title: "任务名称",
key: "fromtaskname",
fixed: "left",
width: 200,
},
{
title: '审批节点',
key: 'approvalnode',
title: "审批节点",
key: "approvalnode",
width: 100,
},
{
title: '审批状态',
key: 'states',
title: "审批状态",
key: "states",
width: 100,
},
{
title: '图片相似度',
key: 'similarity',
title: "图片相似度",
key: "similarity",
width: 100,
},
{
title: '提报时间',
key: 'fromuptime',
title: "提报时间",
key: "fromuptime",
width: 200,
},
{
title: '更新时间',
key: 'updatetime',
title: "更新时间",
key: "updatetime",
width: 200,
},
{
title: '操作',
key: 'actions',
title: "操作",
key: "actions",
width: 200,
fixed: 'right',
fixed: "right",
render(row) {
return h(
Action,
{
return h(Action, {
id: row.id,
status: row.states,
trigger: actionHandler,
},
)
});
},
},
]
];
const rejectModalRef = ref(null)
const columnsRef = ref(columns)
const tableRef = ref<InstanceType<typeof NDataTable>>()
const rowKey = (row: RowData) => row.id
const loading = ref(true)
const rejectModalRef = ref(null);
const columnsRef = ref(columns);
const tableRef = ref<InstanceType<typeof NDataTable>>();
const rowKey = (row: RowData) => row.id;
const loading = ref(true);
const pagination = reactive({
page: 1,
pageCount: 1,
pageSize: 10,
showSizePicker:true,
showSizePicker: true,
pageSizes: [
{
label: "10 每页",
@ -122,31 +119,36 @@ const pagination = reactive({
},
],
showQuickJumper: true,
})
const tableData = ref<Array<RowData>>([])
const selectionIds = ref<DataTableRowKey[]>([])
itemCount:100
});
const tableData = ref<Array<RowData>>([]);
const selectionIds = ref<DataTableRowKey[]>([]);
const deviceHeight = ref(600)
const deviceHeight = ref(600);
const maxHeight = computed(() => {
return tableData.value.length ? `${unref(deviceHeight)}px` : 'auto'
})
return tableData.value.length ? `${unref(deviceHeight)}px` : "auto";
});
async function query(page: number, pageSize: number) {
const result = await getFinalList({ sortorder: 'asc', pageSize: 10, currPage: 1, sortname: '' })
const { data, pageCount } = result
tableData.value = data
pagination.page = page
pagination.pageCount = pageCount
loading.value = false
const result = await getFinalList({
sortorder: "asc",
pageSize: 10,
currPage: 1,
sortname: "",
});
const { data, pageCount } = result;
tableData.value = data;
pagination.page = page;
pagination.pageCount = pageCount;
loading.value = false;
}
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);
}
async function handlePageSizeChange(currentPageSize) {
if (loading.value) return;
@ -158,56 +160,55 @@ async function handlePageSizeChange(currentPageSize) {
}
function handleCheck(rowKeys: DataTableRowKey[]) {
selectionIds.value = rowKeys
selectionIds.value = rowKeys;
}
function actionHandler(action: any) {
const { key } = action
const { key } = action;
switch (key) {
case 'view':
break
case 'reset':
resetHandler()
break
case 'approval':
approvalHandler()
break
case 'reject':
(rejectModalRef.value as any).showModal()
break
case "view":
break;
case "reset":
resetHandler();
break;
case "approval":
approvalHandler();
break;
case "reject":
(rejectModalRef.value as any).showModal();
break;
default:
break
break;
}
}
const dialog = useDialog()
const dialog = useDialog();
function resetHandler() {
dialog.info({
title: '确认提示',
content: '确认重置当前选中的任务的审批吗?',
positiveText: '确定',
negativeText: '取消',
title: "确认提示",
content: "确认重置当前选中的任务的审批吗?",
positiveText: "确定",
negativeText: "取消",
onPositiveClick: async () => {
// TODO
// const result = await resetApproval()
},
onNegativeClick: () => { },
})
onNegativeClick: () => {},
});
}
function approvalHandler() {
dialog.info({
title: '确认提示',
content: '确认给该任务审批为【通过】吗?',
positiveText: '确定',
negativeText: '取消',
title: "确认提示",
content: "确认给该任务审批为【通过】吗?",
positiveText: "确定",
negativeText: "取消",
onPositiveClick: () => {
// TODO
},
onNegativeClick: () => { },
})
onNegativeClick: () => {},
});
}
function rejectHandler(idOrDesc: string, isOther: boolean) {
@ -218,22 +219,26 @@ function rejectHandler(idOrDesc: string, isOther: boolean) {
// approvd: false,
// taskComment: '',
// }
// if (isOther)
// param.taskComment = idOrDesc
// else
// param.taskComment = idOrDesc
// audit(param)
}
query(pagination.page, pagination.pageSize)
query(pagination.page, pagination.pageSize);
</script>
<template>
<div>
<n-modal v-model:show="show" transform-origin="center">
<n-card class="cardstyle" :bordered="false" size="huge" role="dialog" aria-modal="true">
<n-card
class="cardstyle"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<div class="wrapper">
<span class="wrapper-title">重复任务</span>
<div class="wrapper-bar">
@ -243,19 +248,25 @@ query(pagination.page, pagination.pageSize)
</div>
<div class="wrapper-content">
<NDataTable
ref="tableRef" remote :columns="columnsRef" :scroll-x="1250" :max-height="maxHeight" :data="tableData"
:loading="loading" :pagination="pagination" :row-key="rowKey" @update:page="handlePageChange"
@update-page-size="handlePageSizeChange"
ref="tableRef"
remote
:columns="columnsRef"
:scroll-x="1250"
:max-height="maxHeight"
:data="tableData"
:loading="loading"
:pagination="pagination"
:row-key="rowKey"
@update:page="handlePageChange"
@update-page-size="handlePageSizeChange"
@update:checked-row-keys="handleCheck"
/>
</div>
</div>
<template #footer>
<div class="wrapper-footer">
<n-button type="info" @click="handleSumbit">
确认
</n-button>
<n-button secondary style="margin-left:15px" @click="closeModal">
<n-button type="info" @click="handleSumbit"> </n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal">
取消
</n-button>
</div>
@ -284,7 +295,7 @@ query(pagination.page, pagination.pageSize)
&-content {
flex: auto;
background: #FFF;
background: #fff;
margin-top: 20px;
}
@ -299,7 +310,7 @@ query(pagination.page, pagination.pageSize)
&:before {
background-color: #1980ff;
content: '';
content: "";
width: 5px;
border-radius: 2px;
top: 0;

@ -407,6 +407,7 @@ onMounted(() => {
&-info {
font-weight: bold;
position: relative;
font-size: 14px;
&:before {
background-color: #1980FF;
@ -468,7 +469,8 @@ onMounted(() => {
--n-padding-bottom: 12px;
}
::v-deep(.n-card > .n-card-header .n-card-header__main){
font-weight: bolder !important;
font-weight: lighter !important;
font-size: 14px;
}
::v-deep(.n-scrollbar){
border-left: 1px solid #cad2dd !important;
@ -491,5 +493,7 @@ onMounted(() => {
height: 44px !important;
}
}
::v-deep(.n-button--info-type){
background: #507AFD !important;
}
</style>

@ -43,7 +43,7 @@ const tab = ref(1)
async function getList() {
const res = await getMessageList({
pageNo: state.pageNo,
pageSize: '10',
pageSize: '7',
msgCategory: tab.value,
})
if (res.code === 'OK') {

@ -221,7 +221,7 @@ function removeHandler(id: string) {
});
if (index !== -1) onList.value.splice(index, 1);
index = offList.value.findIndex(v=>v.id==id);
index = offList.value.findIndex((v) => v.id == id);
offList.value[index].checked = false;
}
@ -249,8 +249,8 @@ onMounted(async () => {
fix: v.isrequired == 2,
checked:
v.isrequired == 2 ||
Boolean(userFieldFixed?.find(v2=>v2==v.name)) ||
Boolean(userFieldUnFixed?.find(v2=>v2==v.name))
Boolean(userFieldFixed?.find((v2) => v2 == v.name)) ||
Boolean(userFieldUnFixed?.find((v2) => v2 == v.name)),
};
if (item.fix) {
fixList.value.push(item);
@ -274,8 +274,8 @@ onMounted(async () => {
}
}
});
console.log(offList.value,'offList.value');
console.log(useList, 'useList');
console.log(offList.value, "offList.value");
console.log(useList, "useList");
});
</script>
@ -377,6 +377,7 @@ onMounted(async () => {
:class="{ fix: item.fix }"
class="cursor-move draggable-item"
>
<SvgIcon name="drag" size="24" />
<span class="ml-2">{{ item.name }}</span>
<SvgIcon
v-if="!item.fix"
@ -408,14 +409,14 @@ onMounted(async () => {
.wrapper {
display: flex;
flex-direction: column;
border-bottom: 1px solid #e8e8e8;
padding-bottom: 32px;
&-title {
font-weight: bold;
font-size: 16px;
}
&-bar {
background-color: #e8e8e8;
width: 100%;
margin-top: 20px;
}
@ -428,6 +429,7 @@ onMounted(async () => {
&-info {
font-weight: bold;
position: relative;
color: #333333;
&:before {
background-color: #1980ff;
@ -476,10 +478,11 @@ onMounted(async () => {
}
.draggable-item {
padding: 10px 16px;
padding: 11px 16px;
color: #333;
display: flex;
align-items: center;
border-bottom: 1px solid #E8E8E8;
}
.disable-check {
@ -487,9 +490,7 @@ onMounted(async () => {
}
}
::v-deep(
.n-card.n-card--content-segmented > .n-card__content:not(:first-child)
) {
::v-deep(.n-card.n-card--content-segmented > .n-card__content:not(:first-child)) {
border: 0px;
}
@ -497,10 +498,11 @@ onMounted(async () => {
--n-padding-top: 0px;
--n-padding-bottom: 12px;
}
::v-deep(.n-card > .n-card-header .n-card-header__main){
::v-deep(.n-card > .n-card-header .n-card-header__main) {
font-weight: bolder !important;
}
::v-deep(.n-scrollbar){
::v-deep(.n-scrollbar) {
border-top: none !important;
}
</style>

@ -215,6 +215,8 @@ function onCheckChange(checked: any, item: any) {
.wrapper {
display: flex;
flex-direction: column;
border-bottom: 1px solid #e8e8e8;
padding-bottom: 32px;
&-title {
font-weight: bold;
@ -222,7 +224,6 @@ function onCheckChange(checked: any, item: any) {
}
&-bar {
background-color: #e8e8e8;
width: 100%;
margin-top: 20px;
}
@ -235,6 +236,7 @@ function onCheckChange(checked: any, item: any) {
&-info {
font-weight: bold;
position: relative;
color: #333333;
&:before {
background-color: #1980ff;
@ -282,10 +284,11 @@ function onCheckChange(checked: any, item: any) {
}
.draggable-item {
padding: 10px 16px;
padding: 11px 16px;
color: #333;
display: flex;
align-items: center;
border-bottom: 1px solid #E8E8E8;
}
.disable-check {
@ -303,4 +306,5 @@ function onCheckChange(checked: any, item: any) {
--n-padding-top: 0px;
--n-padding-bottom: 12px;
}
</style>

@ -266,5 +266,5 @@ const inputHandler = debounce((word) => {
z-index: 10;
}
}
</style>
../types

@ -363,6 +363,7 @@ onMounted(async () => {
:class="{ fix: item.fix }"
class="cursor-move draggable-item"
>
<SvgIcon name="drag" size="24" />
<span class="ml-2">{{ item.name }}</span>
<SvgIcon
v-if="!item.fix"
@ -394,6 +395,8 @@ onMounted(async () => {
.wrapper {
display: flex;
flex-direction: column;
border-bottom: 1px solid #e8e8e8;
padding-bottom: 32px;
&-title {
font-weight: bold;
@ -401,7 +404,6 @@ onMounted(async () => {
}
&-bar {
background-color: #e8e8e8;
width: 100%;
margin-top: 20px;
}
@ -414,6 +416,8 @@ onMounted(async () => {
&-info {
font-weight: bold;
position: relative;
color: #333333;
font-size: 14px;
&:before {
background-color: #1980ff;
@ -462,10 +466,11 @@ onMounted(async () => {
}
.draggable-item {
padding: 10px 16px;
padding: 11px 16px;
color: #333;
display: flex;
align-items: center;
border-bottom: 1px solid #E8E8E8;
}
.disable-check {
@ -484,9 +489,13 @@ onMounted(async () => {
--n-padding-bottom: 12px;
}
::v-deep(.n-card > .n-card-header .n-card-header__main){
font-weight: bolder !important;
font-weight: lighter !important;
font-size: 14px;
}
::v-deep(.n-scrollbar){
border-top: none !important;
}
::v-deep(.n-button--info-type){
background: #507AFD !important;
}
</style>

@ -377,6 +377,7 @@ onMounted(async () => {
:class="{ fix: item.fix }"
class="cursor-move draggable-item"
>
<SvgIcon name="drag" size="24" />
<span class="ml-2">{{ item.name }}</span>
<SvgIcon
v-if="!item.fix"
@ -408,6 +409,8 @@ onMounted(async () => {
.wrapper {
display: flex;
flex-direction: column;
border-bottom: 1px solid #e8e8e8;
padding-bottom: 32px;
&-title {
font-weight: bold;
@ -415,7 +418,6 @@ onMounted(async () => {
}
&-bar {
background-color: #e8e8e8;
width: 100%;
margin-top: 20px;
}
@ -428,6 +430,8 @@ onMounted(async () => {
&-info {
font-weight: bold;
position: relative;
color: #333333;
font-size: 14px;
&:before {
background-color: #1980ff;
@ -476,10 +480,11 @@ onMounted(async () => {
}
.draggable-item {
padding: 10px 16px;
padding: 11px 16px;
color: #333;
display: flex;
align-items: center;
border-bottom: 1px solid #E8E8E8;
}
.disable-check {
@ -498,9 +503,14 @@ onMounted(async () => {
--n-padding-bottom: 12px;
}
::v-deep(.n-card > .n-card-header .n-card-header__main){
font-weight: bolder !important;
font-weight: lighter !important;
font-size: 14px;
}
::v-deep(.n-scrollbar){
border-top: none !important;
}
::v-deep(.n-button--info-type){
background: #507AFD !important;
}
</style>

Loading…
Cancel
Save