guoxiangbin
/
ocr-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Merge pull request 'fix: 样式bug处理' (#90) from fix/styleProblem into test

Browse Source 
Reviewed-on: #90
pull/95/head
wangyanjun 1 year ago
parent 057ebb8db6 49c2fe1b8e
commit 2e477c9bcf
12 changed files with 790 additions and 693 deletions
Show Stats Download Patch File Download Diff File

12
src/layout/components/Header/ShortcutModal.vue
Unescape View File

@ -9,6 +9,7 @@ const cardStyle = {
'width': '800px',
'--n-padding-bottom': '10px',
'--n-padding-left': '10px',
'padding-bottom':'100px'
}
function showModal() {
@ -130,9 +131,9 @@ defineExpose({
</table>
</div>
</div>
<n-divider />
<!-- <n-divider /> -->
<template #footer>
<!-- <template #footer>
<div class="wrapper-footer">
<n-button type="info" @click="closeModal">
确认
@ -141,7 +142,7 @@ defineExpose({
取消
</n-button>
</div>
</template>
</template> -->
</n-card>
</n-modal>
</div>
@ -253,6 +254,11 @@ defineExpose({
tr td:first-child{
text-align: right;
padding-right: 10px;
color: #515457;
}
tr td{
color: #333333;
}
tr span{
padding: 0 10px;

253
src/views/final/comp/CustomFilterModalVue.vue
Unescape View File

@ -1,239 +1,250 @@
<script lang="ts" setup>
import { setFilter } from "@/api/home/filter";
import { asideMap } from "@/config/final";
import { useFinal } from "@/store/modules/final";
import { debounce, difference } from "lodash-es";
import { computed, ref, watch } from "vue";
import { VueDraggable } from "vue-draggable-plus";
const show = ref(false);
const checkAll = ref(false);
const selectIds = ref<string[]>([]);
const finalStore = useFinal();
import { debounce, difference } from 'lodash-es'
import { computed, ref, watch } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import { setFilter } from '@/api/home/filter'
import { asideMap } from '@/config/final'
import { useFinal } from '@/store/modules/final'
const show = ref(false)
const checkAll = ref(false)
const selectIds = ref<string[]>([])
const finalStore = useFinal()
function showModal() {
show.value = true;
show.value = true
}
function closeModal() {
show.value = false;
show.value = false
}
// 左侧隐藏列表
const offList = ref<any[]>([]);
const offList = ref<any[]>([])
// 右侧显示列表
const onList = ref<any[]>([]);
const onList = ref<any[]>([])
const allCount = computed(() => {
return `全部筛选(共${offList.value.length}个)`;
});
return `全部筛选(共${offList.value.length}个)`
})
const selectCount = computed(() => {
return `已选筛选(共${onList.value.length}个)`;
});
return `已选筛选(共${onList.value.length}个)`
})
defineExpose({
showModal,
});
})
function generateDefaultList() {
return Object.keys(asideMap).reduce((acc, key) => {
const { label, isDefaultFilter } = asideMap[key];
const { label, isDefaultFilter } = asideMap[key]
// 默认开启配置
if (isDefaultFilter) {
const config = {
id: key,
name: label || "未配置",
name: label || '未配置',
fix: isDefaultFilter,
checked: true,
};
return [...acc, config];
} else {
return acc;
}
return [...acc, config]
}
else {
return acc
}
}, []);
}, [])
}
function generatList(customConfig) {
const keys = Object.keys(asideMap);
let onList: object[] = [];
const offList: object[] = [];
const showKeys = customConfig.map((key: string) => key.toLowerCase());
const keys = Object.keys(asideMap)
let onList: object[] = []
const offList: object[] = []
const showKeys = customConfig.map((key: string) => key.toLowerCase())
for (const key of keys) {
if (!key.startsWith("iz") || asideMap[key] === undefined) continue;
if (!key.startsWith('iz') || asideMap[key] === undefined)
continue
const name = asideMap[key]?.label;
const isDefaultFilter = asideMap[key]?.isDefaultFilter;
const name = asideMap[key]?.label
const isDefaultFilter = asideMap[key]?.isDefaultFilter
// 不是默认配置
const isChecked = asideMap[key].isDefaultFilter || showKeys.includes(key);
const isChecked = asideMap[key].isDefaultFilter || showKeys.includes(key)
offList.push({
id: key,
name: name || "未配置",
name: name || '未配置',
fix: isDefaultFilter,
checked: isChecked,
});
})
isChecked && selectIds.value.push(key);
isChecked && selectIds.value.push(key)
}
onList = showKeys.reduce((acc, key) => {
const isDefaultFilter = asideMap[key]?.isDefaultFilter;
const isDefaultFilter = asideMap[key]?.isDefaultFilter
// 把默认显示的过滤掉(理论上不会出现这种情况)
if (isDefaultFilter === false) {
const config = {
id: key,
name: asideMap[key].label || "未配置",
name: asideMap[key].label || '未配置',
fix: asideMap[key].isDefaultFilter,
};
return [...acc, config];
} else {
return acc;
}
return [...acc, config]
}
else {
return acc
}
}, []);
}, [])
const fixedList = generateDefaultList();
onList.unshift(...fixedList);
return { showList: onList, hideList: offList };
const fixedList = generateDefaultList()
onList.unshift(...fixedList)
return { showList: onList, hideList: offList }
}
finalStore.$subscribe(() => {
const customConfig = finalStore.getCustomConfig;
const customConfig = finalStore.getCustomConfig
if (customConfig === null) return;
if (customConfig === null)
return
const { showList, hideList } = generatList(customConfig);
onList.value = showList;
offList.value = hideList;
});
const { showList, hideList } = generatList(customConfig)
onList.value = showList
offList.value = hideList
})
async function handleSumbit(e: MouseEvent) {
e.preventDefault();
e.preventDefault()
const param = onList.value
.filter((item) => !asideMap[item.id].isDefaultFilter)
.filter(item => !asideMap[item.id].isDefaultFilter)
.map((item) => {
return item.id;
return item.id
})
.join(",");
.join(',')
await setFilter({ searchcount: param, type: 1 });
finalStore.fetchCustomConfig();
closeModal();
await setFilter({ searchcount: param, type: 1 })
finalStore.fetchCustomConfig()
closeModal()
}
function onCheckAllChange(value) {
const ids: string[] = [];
const ids: string[] = []
for (const item of offList.value) {
if (!item.fix) {
item.checked = value;
ids.push(item.id);
item.checked = value
ids.push(item.id)
}
}
selectIds.value = value ? ids : [];
selectIds.value = value ? ids : []
}
function onCheckChange(checked: any, item: any) {
const index = selectIds.value.indexOf(item.id);
item.checked = checked;
let currentIndex = offList.value.findIndex((v) => v.id == item.id);
offList.value[currentIndex].checked = item.checked;
if (index === -1 && checked) selectIds.value.push(item.id);
else selectIds.value.splice(index, 1);
const index = selectIds.value.indexOf(item.id)
item.checked = checked
const currentIndex = offList.value.findIndex(v => v.id == item.id)
offList.value[currentIndex].checked = item.checked
if (index === -1 && checked)
selectIds.value.push(item.id)
else selectIds.value.splice(index, 1)
}
const showIds = computed(() => {
return onList.value.map((item) => {
return item.id;
});
});
return item.id
})
})
watch(
() => selectIds.value.length,
(newVal, oldVal) => {
if (newVal === oldVal) return;
if (newVal === oldVal)
return
const action = newVal > oldVal ? "add" : "remove";
const diff =
action === "add"
const action = newVal > oldVal ? 'add' : 'remove'
const diff
= action === 'add'
? difference(selectIds.value, showIds.value)
: difference(showIds.value, selectIds.value);
: difference(showIds.value, selectIds.value)
if (diff.length === 0) return;
if (diff.length === 0)
return
if (action === "add") {
if (action === 'add') {
for (const item of offList.value) {
if (!item.fix && diff.includes(item.id)) {
onList.value.push({
id: item.id,
name: item.name || "未配置",
name: item.name || '未配置',
fix: item.fix || false,
});
})
}
}
} else {
const list = onList.value;
}
else {
const list = onList.value
for (let index = 0; index < list.length; index++) {
const item = list[index];
const item = list[index]
if (!item.fix && diff.includes(item.id)) {
list.splice(index, 1);
index--;
list.splice(index, 1)
index--
}
}
}
}
);
},
)
watch(
() => showIds.value.length,
(newVal, oldVal) => {
if (newVal === oldVal) return;
if (newVal === oldVal)
return
const diff = difference(selectIds.value, showIds.value);
const diff = difference(selectIds.value, showIds.value)
if (diff.length === 0) return;
if (diff.length === 0)
return
for (const item of offList.value) {
if (!item.fix && diff.includes(item.id)) {
const index = selectIds.value.indexOf(item.id);
item.checked = false;
selectIds.value.splice(index, 1);
const index = selectIds.value.indexOf(item.id)
item.checked = false
selectIds.value.splice(index, 1)
}
}
}
);
},
)
function clearDragSource() {
onList.value = onList.value.filter((item) => {
return item.fix === true;
});
return item.fix === true
})
}
function removeHandler(id: string) {
const index = onList.value.findIndex((item) => {
return item.id === id;
});
return item.id === id
})
if (index !== -1) onList.value.splice(index, 1);
if (index !== -1)
onList.value.splice(index, 1)
}
const offKeyword = ref("");
const onKeyword = ref("");
const offKeyword = ref('')
const onKeyword = ref('')
const leftInputHandler = debounce((keyword) => {
offKeyword.value = keyword;
}, 300);
offKeyword.value = keyword
}, 300)
const rightInputHandler = debounce((keyword) => {
onKeyword.value = keyword;
}, 300);
onKeyword.value = keyword
}, 300)
</script>
<template>
@ -246,10 +257,10 @@ const rightInputHandler = debounce((keyword) => {
aria-modal="true"
>
<div class="wrapper">
<span class="wrapper-title">自定义筛选</span>
<span class="wrapper-title" style="color: #333333;">自定义筛选</span>
<div class="wrapper-bar">
<div class="wrapper-info">
<span :style="{ 'margin-left': '18px' }">筛选项信息</span>
<div class="wrapper-info" style="background-color: #F8F8F8;">
<span :style="{ 'margin-left': '18px' ,'color':'#333333'}">筛选项信息</span>
</div>
</div>
@ -263,7 +274,7 @@ const rightInputHandler = debounce((keyword) => {
:bordered="false"
>
<div>
<n-input placeholder="搜索关键字" @input="leftInputHandler">
<n-input placeholder="搜索关键词" @input="leftInputHandler">
<template #suffix>
<SvgIcon size="14px" name="magnifying-1" color="#999999" />
</template>
@ -313,7 +324,8 @@ const rightInputHandler = debounce((keyword) => {
<span class="textbtnStyle" @click="clearDragSource">清空</span>
</template>
<div>
<n-input placeholder="搜索关键字" @input="rightInputHandler">
<!-- j -->
<n-input placeholder="搜索关键词" @input="rightInputHandler">
<template #suffix>
<SvgIcon size="14px" name="magnifying-1" color="#999999" />
</template>
@ -337,8 +349,8 @@ const rightInputHandler = debounce((keyword) => {
:class="{ fix: item.fix }"
class="cursor-move draggable-li"
>
<!-- v-show="!item.fix" 判断是否为固定值 -->
<SvgIcon name="drag" size="14" />
<!-- v-show="!item.fix" 判断是否为固定值 -->
<SvgIcon name="drag" size="14" />
<span class="ml-2">{{ item.name }}</span>
<SvgIcon
v-if="!item.fix"
@ -357,7 +369,9 @@ const rightInputHandler = debounce((keyword) => {
</div>
<template #footer>
<div class="wrapper-footer">
<n-button type="info" @click="handleSumbit"> 确定 </n-button>
<n-button type="info" @click="handleSumbit">
确定
</n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal">
取消
</n-button>
@ -414,7 +428,7 @@ const rightInputHandler = debounce((keyword) => {
.cardstyle {
width: 620px;
height: 800px;
--n-padding-bottom: 20px;
--n-padding-bottom: 16px;
--n-padding-left: 24px;
--n-padding-right: 24px;
--n-padding-top: 20px;
@ -455,6 +469,7 @@ const rightInputHandler = debounce((keyword) => {
::v-deep(.n-card > .n-card-header .n-card-header__main) {
font-weight: lighter !important;
font-size: 14px;
color: #666666;
}
::v-deep(.n-scrollbar) {
border-top: none !important;

12
src/views/home/aside/comp/AdvanceFilter.vue
Unescape View File

@ -323,14 +323,16 @@ const moveEnd = () => {
v-if="item.favorite && !item.isDefaultFilter"
name="favorite-fill"
color="#fd9b0a"
size="18"
width="13"
height="12"
style="margin-right: 3px"
@click="unFavoriteHandler($event, item)"
/>
<SvgIcon
v-else-if="!item.favorite && !item.isDefaultFilter"
name="favorite-unfill"
size="18"
width="13"
height="12"
style="margin-right: 3px"
@click="favoriteHandler($event, item)"
/>
@ -357,7 +359,8 @@ const moveEnd = () => {
v-if="item.favorite && !item.isDefaultFilter"
name="favorite-fill"
color="#fd9b0a"
size="18"
width="13"
height="12"
fill="#666666"
style="cursor: pointer !important; margin-right: 3px"
@click="unFavoriteHandler($event, item)"
@ -365,7 +368,8 @@ const moveEnd = () => {
<SvgIcon
v-else-if="!item.favorite && !item.isDefaultFilter"
name="favorite-unfill"
size="18"
width="13"
height="12"
fill="#666666"
style="cursor: pointer !important; margin-right: 3px"
@click="favoriteHandler($event, item)"

138
src/views/home/aside/comp/modals/CustomFilterModal.vue
Unescape View File

@ -1,12 +1,11 @@
<script lang="ts" setup>
import { cloneDeep, debounce, difference, isEqual } from 'lodash-es'
import { computed, defineOptions, onMounted, ref, watch } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import { getAllfieldList, getfieldList, setFilter } from '@/api/home/filter'
import { asideMap } from '@/config/aside'
import { useConfig } from '@/store/modules/asideConfig'
import { useUser } from "@/store/modules/user"
import { debounce, difference, cloneDeep, isEqual } from 'lodash-es'
import { computed, defineOptions, onMounted, ref, watch } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import { useUser } from '@/store/modules/user'
defineOptions({ name: 'CustomFilterModal' })
@ -17,7 +16,6 @@ const selectIds = ref<string[]>([])
const tempList = ref<string[]>([])
function showModal() {
show.value = true
// 重置左右列表数据
@ -26,19 +24,19 @@ function showModal() {
if (config == null || customConfig == null)
return
if(tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig)) {
if (tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig))
return
}
console.log("开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------", customConfig);
console.log('开启了啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦筛选条件----------------', customConfig)
const { showList, hideList } = generatList(config, customConfig)
tempList.value = cloneDeep(showList);
if(tempList.value.length > 0) {
tempList.value = cloneDeep(showList)
if (tempList.value.length > 0)
configStore.setFilterConfig(tempList.value)
}
onList.value = showList
offList.value = hideList
// 重置全选状态
checkAll.value = hideList.every(item => item.checked);
checkAll.value = hideList.every(item => item.checked)
// 重置输入框查询条件
offKeyword.value = ''
onKeyword.value = ''
@ -108,9 +106,8 @@ function generatList(config, customConfig) {
fix: isDefaultFilter,
checked: isChecked,
})
if (isChecked && selectIds.value.indexOf(key) === -1) {
if (isChecked && !selectIds.value.includes(key))
isChecked && selectIds.value.push(key)
}
}
}
@ -134,30 +131,31 @@ function generatList(config, customConfig) {
const fixedList = generateDefaultList(config)
offList.unshift(...fixedList)
onList.unshift(...fixedList)
console.log("原始筛选条件customConfig", customConfig);
console.log('原始筛选条件customConfig', customConfig)
// onList按照customConfig排序
let tempOnList = cloneDeep(onList);
console.log("原始筛选条件tempOnList", tempOnList);
let sortKeyList: any = [];
const tempOnList = cloneDeep(onList)
console.log('原始筛选条件tempOnList', tempOnList)
const sortKeyList: any = []
configStore.getFilterConfig.map((item: any) => {
sortKeyList.push(item.id);
});
console.log("原始筛选条件sortKeyList", sortKeyList);
let sortList: any = [];
if(sortKeyList.length > 0) {
sortKeyList.map(key => {
let tempItem = tempOnList.find(item => item.id == key);
sortList.push(tempItem);
});
}else {
customConfig.map(key => {
let tempItem = tempOnList.find(item => item.id == key);
sortList.push(tempItem);
});
sortKeyList.push(item.id)
})
console.log('原始筛选条件sortKeyList', sortKeyList)
const sortList: any = []
if (sortKeyList.length > 0) {
sortKeyList.map((key) => {
const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem)
})
}
console.log("原始筛选条件sortList", sortList );
console.log("原始筛选条件configStore.getFilterConfig", configStore.getFilterConfig, );
else {
customConfig.map((key) => {
const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem)
})
}
console.log('原始筛选条件sortList', sortList)
console.log('原始筛选条件configStore.getFilterConfig', configStore.getFilterConfig)
// return { showList: onList, hideList: offList }
return { showList: sortList, hideList: offList }
}
@ -168,17 +166,17 @@ configStore.$subscribe(() => {
if (config == null || customConfig == null)
return
console.log("tempList.value-----------", tempList.value);
console.log("configStore.getFilterConfig-----------", configStore.getFilterConfig);
if(tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig)) {
console.log('tempList.value-----------', tempList.value)
console.log('configStore.getFilterConfig-----------', configStore.getFilterConfig)
if (tempList.value.length > 0 && isEqual(tempList.value, configStore.getFilterConfig))
return
}
const { showList, hideList } = generatList(config, customConfig)
tempList.value = cloneDeep(showList);
console.log("克隆条件", tempList.value);
if(tempList.value.length > 0) {
tempList.value = cloneDeep(showList)
console.log('克隆条件', tempList.value)
if (tempList.value.length > 0)
configStore.setFilterConfig(tempList.value)
}
// setTimeout(() => {
// }, 500);
onList.value = showList
@ -193,19 +191,19 @@ async function handleSumbit(e: MouseEvent) {
await setFilter({ searchcount: param, type: 0 })
const obj = await configStore.fetchCustomConfig()
console.log("obj-------------------------------", obj);
let tempOnList = cloneDeep(onList.value);
console.log("原始筛选条件tempOnList", tempOnList);
let sortList: any = [];
obj.map(key => {
let tempItem = tempOnList.find(item => item.id == key);
sortList.push(tempItem);
});
console.log("configStore.sortList---------------", sortList);
console.log('obj-------------------------------', obj)
const tempOnList = cloneDeep(onList.value)
console.log('原始筛选条件tempOnList', tempOnList)
const sortList: any = []
obj.map((key) => {
const tempItem = tempOnList.find(item => item.id == key)
sortList.push(tempItem)
})
console.log('configStore.sortList---------------', sortList)
// setTimeout(() => {
if(sortList.length > 0) {
if (sortList.length > 0)
configStore.setFilterConfig(sortList)
}
// }, 500);
closeModal()
}
@ -232,8 +230,8 @@ function onCheckChange(checked: any, item: any) {
selectIds.value.push(item.id)
else
index !== -1 && selectIds.value.splice(index, 1)
checkAll.value = offList.value.every(item => item.checked);
checkAll.value = offList.value.every(item => item.checked)
}
const showIds = computed(() => {
@ -328,23 +326,21 @@ const rightInputHandler = debounce((keyword) => {
}, 300)
async function getfield() {
let res;
let res
res = await getAllfieldList(3)
const userStore = useUser();
const userInfo = userStore.getUserInfo;
const userStore = useUser()
const userInfo = userStore.getUserInfo
res = await getfieldList(3, userInfo.id)
}
function onMove(e) {
// 这里的e表示即将停靠的元素。
if (e?.related?.className?.indexOf('fix') !== -1) {
return false;
}
if (e?.related?.className?.indexOf('fix') !== -1)
return false
}
onMounted(() => {
getfield();
getfield()
})
</script>
<template>
@ -373,7 +369,7 @@ onMounted(() => {
<n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;">
<div class="draggable-ul">
<div class="draggable-li">
<n-checkbox v-model:checked="checkAll" label="全选" @update:checked="onCheckAllChange" :indeterminate="!checkAll"/>
<n-checkbox v-model:checked="checkAll" label="全选" :indeterminate="!checkAll" @update:checked="onCheckAllChange" />
</div>
<div
v-for="item in offList" v-show="item.name.includes(offKeyword)" :key="item.id" :class="{ 'disable-check': item.fix }"
@ -407,12 +403,14 @@ onMounted(() => {
</template>
</n-input>
<n-scrollbar style="max-height: 500px;border: 1px solid #cad2dd;border-radius: 2px;" class="scroll">
<VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared" >
<VueDraggable v-model="onList" class="draggable-ul" :animation="150" group="shared">
<div v-for="item in onList" v-show="item.name.includes(onKeyword)" :key="item.id" :draggable="true" class="cursor-move draggable-li">
<SvgIcon name="drag" size="24" />
<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;"
name="clear" @click="removeHandler(item.id)" />
<SvgIcon
v-if="!item.fix" size="16px" style="display:block;margin-left: auto;cursor: pointer;"
name="clear" @click="removeHandler(item.id)"
/>
</div>
</VueDraggable>
</n-scrollbar>

337
src/views/home/aside/comp/modals/FilterModal.vue
Unescape View File

@ -8,116 +8,122 @@ import {
reactive,
ref,
unref,
} from "vue";
import { NDataTable } from "naive-ui";
import type { DataTableColumns, DataTableRowKey } from "naive-ui";
import type { SortableEvent } from "sortablejs";
import Sortable from "sortablejs";
import { debounce } from "lodash-es";
import Action from "../Action.vue";
import { deleteCondition, getConditionList, sort } from "@/api/home/filter";
import type { FilterSearchParam } from "/#/api";
defineOptions({ name: "FilterModal" });
} from 'vue'
import { NDataTable } from 'naive-ui'
import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
import type { SortableEvent } from 'sortablejs'
import Sortable from 'sortablejs'
import { debounce } from 'lodash-es'
import Action from '../Action.vue'
import { deleteCondition, getConditionList, sort } from '@/api/home/filter'
import type { FilterSearchParam } from '/#/api'
defineOptions({ name: 'FilterModal' })
const props = defineProps({
type: {
type: Number,
default: () => 0,
},
});
})
const emit = defineEmits<{
(e: "showNewFilter"): void;
(e: "editFilter", filter: any): void;
}>();
(e: 'showNewFilter'): void
(e: 'editFilter', filter: any): void
}>()
const show = ref(false);
const show = ref(false)
const cardStyle = {
width: "800px",
height: "830px",
"--n-padding-bottom": "10px",
"--n-padding-left": "10px",
};
'width': '800px',
'height': '830px',
'--n-padding-bottom': '10px',
'--n-padding-left': '10px',
}
interface RowData {
id: string;
searchname: string;
createby: string;
createtime: string;
updateby: string;
updatetime: string;
id: string
searchname: string
createby: string
createtime: string
updateby: string
updatetime: string
}
const sortData = (row) => {
console.log("sortData", row);
if (row.order == "descend") {
function sortData(row) {
console.log('sortData', row)
if (row.order == 'descend') {
tableData.value.sort(
(a, b) =>
new Date(a[row.columnKey]).getTime() - new Date(b[row.columnKey]).getTime()
);
} else if (row.order == "ascend") {
new Date(a[row.columnKey]).getTime() - new Date(b[row.columnKey]).getTime(),
)
}
else if (row.order == 'ascend') {
tableData.value.sort(
(a, b) =>
new Date(b[row.columnKey]).getTime() - new Date(a[row.columnKey]).getTime()
);
} else {
new Date(b[row.columnKey]).getTime() - new Date(a[row.columnKey]).getTime(),
)
}
else {
tableData.value.sort(
(a, b) => Number((a as any).reorder) - Number((b as any).reorder)
);
(a, b) => Number((a as any).reorder) - Number((b as any).reorder),
)
}
};
}
const columns: DataTableColumns<RowData> = [
{
type: "selection",
type: 'selection',
},
{
title: "操作",
key: "action",
title: '操作',
key: 'action',
render(row) {
return h(Action, {
options: [
{ label: "编辑", key: 1 },
{ label: "删除", key: 2 },
{ label: '编辑', key: 1 },
{ label: '删除', key: 2 },
],
id: row.id,
select,
});
})
},
},
// j
{
title: "名称",
key: "searchname",
title: '名称',
key: 'searchname',
ellipsis: {
tooltip: true,
},
},
{
title: "创建者",
key: "createby",
title: '创建者',
key: 'createby',
},
{
title: "创建时间",
key: "createtime",
title: '创建时间',
key: 'createtime',
width: 180,
sorter: (row1, row2) => {
// tableData.value.sort(
// (a, b) => new Date(a?.createtime).getTime() - new Date(b?.createtime).getTime()
// );
return new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime();
return new Date(row1?.createtime).getTime() - new Date(row2?.createtime).getTime()
},
},
{
title: "更新者",
key: "updateby",
title: '更新者',
key: 'updateby',
},
{
title: "更新时间",
key: "updatetime",
title: '更新时间',
key: 'updatetime',
width: 180,
},
];
const total = ref(0);
const loading = ref(true);
]
const total = ref(0)
const loading = ref(true)
const pagination = reactive({
page: 1,
pageCount: 1,
@ -125,196 +131,198 @@ const pagination = reactive({
showSizePicker: true,
pageSizes: [
{
label: "10 每页",
label: '10 每页',
value: 10,
},
{
label: "15 每页",
label: '15 每页',
value: 15,
},
{
label: "30 每页",
label: '30 每页',
value: 30,
},
{
label: "50 每页",
label: '50 每页',
value: 50,
},
],
showQuickJumper: true,
prefix: () => `共 ${total.value} 条数据`,
});
const tableData = ref<Array<RowData>>([]);
const keyword = ref("");
})
const tableData = ref<Array<RowData>>([])
const keyword = ref('')
async function query(page: number, pageSize: number) {
const searchParam: FilterSearchParam = {
search_searchname: { value: keyword.value, op: "like", type: "string" },
};
const result = await getConditionList({ pageNo: page, pageSize }, searchParam, props.type);
const { data, pageCount, total: totalCount } = result;
tableData.value = data;
pagination.page = page;
total.value = totalCount;
pagination.pageCount = pageCount;
loading.value = false;
search_searchname: { value: keyword.value, op: 'like', type: 'string' },
}
const result = await getConditionList({ pageNo: page, pageSize }, searchParam, props.type)
const { data, pageCount, total: totalCount } = result
tableData.value = data
pagination.page = page
total.value = totalCount
pagination.pageCount = pageCount
loading.value = false
}
function afterLeave() {
pagination.page = 1;
pagination.pageCount = 1;
pagination.pageSize = 10;
pagination.page = 1
pagination.pageCount = 1
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) {
return {
"data-id": row.id,
};
'data-id': row.id,
}
}
function handleCheck(rowKeys: DataTableRowKey[]) {
selectionIds.value = rowKeys;
selectionIds.value = rowKeys
}
function select(key: number, id: string) {
switch (key) {
case 1:
editSelection(id);
break;
editSelection(id)
break
case 2:
deleteSelection(id);
break;
deleteSelection(id)
break
default:
break;
break
}
}
function editSelection(id) {
// eslint-disable-next-line dot-notation
// const $message = window["$message"];
// if (selectionIds.value.length === 0 || selectionIds.value.length > 1) {
// $message.error("请选中一条过滤");
// return;
// }
const selectedId = id;
const selectedId = id
const selectedFilter = tableData.value.find((item: any) => {
return item.id === selectedId;
});
return item.id === selectedId
})
emit("editFilter", selectedFilter);
emit('editFilter', selectedFilter)
// closeModal();
}
function deleteSelection(id = "") {
// eslint-disable-next-line dot-notation
function deleteSelection(id = '') {
if (selectionIds.value.length === 0) {
deleteCondition({ ids: id }).then(() => {
query(pagination.page, pagination.pageSize);
});
return;
query(pagination.page, pagination.pageSize)
})
return
}
deleteCondition({ ids: selectionIds.value.join(",") }).then(() => {
selectionIds.value = [];
query(pagination.page, pagination.pageSize);
});
deleteCondition({ ids: selectionIds.value.join(',') }).then(() => {
selectionIds.value = []
query(pagination.page, pagination.pageSize)
})
}
async function handlePageChange(currentPage) {
if (loading.value) return;
pagination.page = currentPage;
const { pageSize } = pagination;
await query(currentPage, pageSize);
if (loading.value)
return
pagination.page = currentPage
const { pageSize } = pagination
await query(currentPage, pageSize)
}
async function handlePageSizeChange(currentPageSize) {
if (loading.value) return;
if (loading.value)
return
const { page } = pagination;
pagination.pageSize = currentPageSize;
await query(page, currentPageSize);
const { page } = pagination
pagination.pageSize = currentPageSize
await query(page, currentPageSize)
}
function handleClick() {
emit("showNewFilter");
emit('showNewFilter')
// show.value = false;
}
let sortTable: Sortable | null = null;
const tableRef = ref<InstanceType<typeof NDataTable>>();
let sortTable: Sortable | null = null
const tableRef = ref<InstanceType<typeof NDataTable>>()
async function showModal() {
show.value = true;
show.value = true
const { page, pageSize } = pagination;
await query(page, pageSize);
const { page, pageSize } = pagination
await query(page, pageSize)
nextTick(() => {
if (sortTable !== null) destory();
const el: HTMLDivElement = tableRef.value?.$el;
const tbody: HTMLElement | null = el.querySelector("tbody.n-data-table-tbody")!;
if (tbody) sortTable = Sortable.create(tbody, { onEnd, onMove });
});
if (sortTable !== null)
destory()
const el: HTMLDivElement = tableRef.value?.$el
const tbody: HTMLElement | null = el.querySelector('tbody.n-data-table-tbody')!
if (tbody)
sortTable = Sortable.create(tbody, { onEnd, onMove })
})
}
let relatedId = "";
let insertafter = false;
let relatedId = ''
let insertafter = false
// TODO: 有bug，需跟后端联调
function onEnd(event: SortableEvent) {
const data = unref(tableData);
const oldElem = data[event.oldIndex!];
data.splice(event.oldIndex!, 1);
data.splice(event.newIndex!, 0, oldElem);
const data = unref(tableData)
const oldElem = data[event.oldIndex!]
data.splice(event.oldIndex!, 1)
data.splice(event.newIndex!, 0, oldElem)
const dragId = oldElem.id;
const dragId = oldElem.id
const index = data.findIndex((item) => {
return item.id === relatedId;
});
return item.id === relatedId
})
// 插入到元素后，索引-1；插入到元素前，索引+1
const order = insertafter ? index - 1 : index + 1;
const order = insertafter ? index - 1 : index + 1
// console.log('dragid:', dragId, 'order:', order)
sort(dragId, order);
sort(dragId, order)
}
function onMove(evt: any) {
relatedId = evt.related?.dataset?.id;
insertafter = evt.willInsertAfter;
relatedId = evt.related?.dataset?.id
insertafter = evt.willInsertAfter
// console.log(`你正在拖动：${evt.dragged.dataset.id},替换了：${evt.related}`, 'insertafter', evt.willInsertAfter)
}
function destory() {
sortTable && sortTable.destroy();
sortTable = null;
sortTable && sortTable.destroy()
sortTable = null
}
onUnmounted(() => {
destory();
});
destory()
})
function closeModal() {
show.value = false;
show.value = false
}
defineExpose({
showModal,
query,
pagination
});
pagination,
})
const inputHandler = debounce((word) => {
keyword.value = word;
query(1, 5);
}, 300);
keyword.value = word
query(1, 5)
}, 300)
const showSearch = computed(() => {
return selectionIds.value.length > 0;
});
return selectionIds.value.length > 0
})
</script>
<template>
@ -340,12 +348,11 @@ const showSearch = computed(() => {
<span
:style="{ 'margin-left': '18px', 'font-size': '16px' }"
class="wrapper-info-title"
>基本信息</span
>
>基本信息</span>
</div>
</div>
<div class="wrapper-form" v-if="!showSearch">
<div v-if="!showSearch" class="wrapper-form">
<n-input
:style="{ width: '360px', border: '1px solid #cad2dd' }"
placeholder="请输入过滤条件名称搜索"
@ -363,52 +370,50 @@ const showSearch = computed(() => {
</n-button>
</div>
<div class="wrapper-form" v-else>
<div v-else class="wrapper-form">
<div class="del_btn">
<n-button icon-placement="left" size="medium" @click="deleteSelection">
<template #icon>
<SvgIcon name="delete-history" size="16" />
</template>
删除</n-button
>
删除
</n-button>
</div>
<div class="msg">
<span
>已选中
<span>已选中
<span style="color: #507afd; font-size: 16px">{{
selectionIds.length
}}</span>
项</span
>
项</span>
<a @click="selectionIds = []">清空</a>
</div>
</div>
<div class="wrapper-table">
<NDataTable
ref="tableRef"
:max-height="480"
remote
:bordered="false"
:row-props="rowProps as any"
:columns="columns"
:data="tableData"
:loading="loading"
:pagination="pagination"
:row-key="rowKey"
:checked-row-keys="selectionIds"
@update:page="handlePageChange"
@update-page-size="handlePageSizeChange"
@update:checked-row-keys="handleCheck"
@update:sorter="sortData"
:checked-row-keys="selectionIds"
/>
</div>
</div>
<template #footer>
<div class="wrapper-footer">
<n-button type="info" @click="closeModal"> 确认 </n-button>
<n-button style="background-color: #507AFD;" type="info" @click="closeModal">
确定
</n-button>
<n-button secondary style="margin-left: 15px" @click="closeModal">
取消
</n-button>
@ -483,4 +488,12 @@ const showSearch = computed(() => {
::v-deep(.n-data-table .n-data-table-th) {
font-weight: bold !important;
}
::v-deep(table thead tr th) {
background-color: #FAFAFA !important;
}
::v-deep(.n-button--secondary) {
background-color: #fff;
border: 1px solid #cad2dd !important;
}
</style>

287
src/views/home/aside/comp/modals/NewFilterModal.vue
Unescape View File

@ -1,107 +1,107 @@
<script lang="ts" setup>
import type { FormInst, FormItemRule, FormRules } from "naive-ui";
import { computed, defineOptions, onBeforeMount, reactive, ref, unref, watch } from "vue";
import { asideMap } from "@/config/aside";
import { useDictionary } from "@/store/modules/dictonary";
import { useConfig } from "@/store/modules/asideConfig";
import type { FilterCondition } from "/#/api";
import { addCondition, updateCondition } from "@/api/home/filter";
import { formatToDate2, formatToDate3 } from "@/utils/dateUtil";
type Status = "edit" | "new";
const show = ref(false);
const configStore = useConfig();
const dicStore = useDictionary();
const currentStatus = ref<Status>("new");
let currentEditId: string | null = null;
const emit = defineEmits(["onOk"]);
import type { FormInst, FormItemRule, FormRules } from 'naive-ui'
import { computed, defineOptions, onBeforeMount, reactive, ref, unref, watch } from 'vue'
import { asideMap } from '@/config/aside'
import { useDictionary } from '@/store/modules/dictonary'
import { useConfig } from '@/store/modules/asideConfig'
import type { FilterCondition } from '/#/api'
import { addCondition, updateCondition } from '@/api/home/filter'
import { formatToDate2, formatToDate3 } from '@/utils/dateUtil'
type Status = 'edit' | 'new'
const emit = defineEmits(['onOk'])
const show = ref(false)
const configStore = useConfig()
const dicStore = useDictionary()
const currentStatus = ref<Status>('new')
let currentEditId: string | null = null
const modalTitle = computed(() => {
return currentStatus.value === "new" ? "新建过滤条件" : "编辑过滤条件";
});
return currentStatus.value === 'new' ? '新建过滤条件' : '编辑过滤条件'
})
const cardStyle = {
width: "800px",
"--n-padding-bottom": "10px",
"--n-padding-left": "10px",
};
'width': '800px',
'--n-padding-bottom': '10px',
'--n-padding-left': '10px',
}
const noBorderInput = {
"--n-border": "0px",
"--n-border-hover": "0px",
"--n-border-pressed": "0px",
};
'--n-border': '0px',
'--n-border-hover': '0px',
'--n-border-pressed': '0px',
}
const formItemStyle = {
"--n-label-height": "0px",
"--n-feedback-height": "8px",
};
'--n-label-height': '0px',
'--n-feedback-height': '8px',
}
interface FormType {
name: string | null;
logic: string | null;
conditions: Condition[];
name: string | null
logic: string | null
conditions: Condition[]
}
interface Condition {
type: string | null;
operator: string | null;
result: any;
type: string | null
operator: string | null
result: any
}
interface Option {
label: string;
value: string;
label: string
value: string
}
const rules: FormRules = {
name: {
required: true,
message: "请输入过滤条件名称",
trigger: "blur",
message: '请输入过滤条件名称',
trigger: 'blur',
},
logic: {
required: true,
message: "请选择逻辑关系",
trigger: "blur",
message: '请选择逻辑关系',
trigger: 'blur',
},
conditions: {
required: true,
validator(rule: FormItemRule, value: Condition[]) {
for (const item of value) {
const { type, operator, result } = item;
const { type, operator, result } = item
if (type === null || operator === null || result === null)
return new Error("请选择过滤条件");
return new Error('请选择过滤条件')
}
return true;
return true
},
trigger: ["input", "blur"],
trigger: ['input', 'blur'],
},
};
}
const formRef = ref<FormInst | null>(null);
const formRef = ref<FormInst | null>(null)
const formValue = reactive<FormType>({
name: null,
logic: "where",
logic: 'where',
conditions: [
{
type: null,
operator: "eq",
operator: 'eq',
result: null,
},
],
});
})
function handleSumbit(e: MouseEvent) {
e.preventDefault();
e.preventDefault()
formRef.value?.validate((errors) => {
if (errors) return;
if (errors)
return
const list = formValue.conditions.map((item, index) => {
const { type, operator, result } = item;
const { type, operator, result } = item
return {
searchfield: type!,
@ -109,84 +109,85 @@ function handleSumbit(e: MouseEvent) {
searchvalue: formatValue(type!, result),
searchRelationType: formValue.logic!,
orderNum: index + 1,
};
});
}
})
const param: FilterCondition = {
searchname: formValue.name!,
type: 0,
ocrUsersearchchildList: list,
};
}
if (currentStatus.value === "new") addCondition(param);
else updateCondition({ id: currentEditId!, ...param });
emit("onOk");
if (currentStatus.value === 'new')
addCondition(param)
else updateCondition({ id: currentEditId!, ...param })
emit('onOk')
setTimeout(() => {
closeModal();
}, 300);
});
closeModal()
}, 300)
})
}
// 调用接口前转换为服务端格式
function formatValue(searchfield: string, searchvalue: any) {
if (searchfield === "izyear") {
const start = formatToDate2(searchvalue[0]);
const end = formatToDate2(searchvalue[1]);
return `${start}-${end}`;
if (searchfield === 'izyear') {
const start = formatToDate2(searchvalue[0])
const end = formatToDate2(searchvalue[1])
return `${start}-${end}`
}
if (searchfield === "izsimilarity" && Array.isArray(searchvalue))
return searchvalue.join(",");
if (searchfield === 'izsimilarity' && Array.isArray(searchvalue))
return searchvalue.join(',')
return searchvalue;
return searchvalue
}
// 编辑前前转换为服务端格式
function unformatValue(searchfield: string, searchvalue: any) {
// 2022/01/03-2023/02/04
if (searchfield === "izyear") {
const dataStrs = searchvalue.split("-");
const start = formatToDate3(dataStrs[0]);
const end = formatToDate3(dataStrs[1]);
return [start, end];
if (searchfield === 'izyear') {
const dataStrs = searchvalue.split('-')
const start = formatToDate3(dataStrs[0])
const end = formatToDate3(dataStrs[1])
return [start, end]
}
// 80,90
// if (searchfield === "izsimilarity") return searchvalue.split(",");
return searchvalue;
return searchvalue
}
function createCondition() {
formValue.conditions.push({
type: null,
operator: "eq",
operator: 'eq',
result: null,
});
})
}
function removeCondition(index: number) {
formValue.conditions.splice(index, 1);
formValue.conditions.splice(index, 1)
}
function formLabel(index: number) {
return index === 0 ? "筛选条件" : "";
return index === 0 ? '筛选条件' : ''
}
const typeOptions = ref<Option[]>([]);
const typeOptions = ref<Option[]>([])
const operatorOptions = [
{
label: "等于",
value: "eq",
label: '等于',
value: 'eq',
},
{
label: "不等于",
value: "notEq",
label: '不等于',
value: 'notEq',
},
];
]
const logicOptions = ref([]);
const logicOptions = ref([])
const similarityOptions = [
{
@ -201,57 +202,58 @@ const similarityOptions = [
label: "100%-100%",
value: '100,100',
},
];
]
onBeforeMount(() => {
dicStore.fetchRelationTypeList();
});
dicStore.fetchRelationTypeList()
})
watch(
() => dicStore.relationTypeList,
(newval) => {
logicOptions.value = newval;
}
);
logicOptions.value = newval
},
)
function showModal() {
const list = generateAllData(configStore.systemConfig);
typeOptions.value = list;
show.value = true;
const list = generateAllData(configStore.systemConfig)
typeOptions.value = list
show.value = true
}
function closeModal() {
show.value = false;
show.value = false
}
function generateAllData(config): Option[] {
const initVal: Option[] = [];
const initVal: Option[] = []
const list = Object.keys(config).reduce((acc, value) => {
if (value.startsWith("iz") && asideMap[value]?.inFilterList !== false) {
const name = asideMap[value]?.label;
name &&
acc.push({
value,
label: name || "未配置",
});
if (value.startsWith('iz') && asideMap[value]?.inFilterList !== false) {
const name = asideMap[value]?.label
name
&& acc.push({
value,
label: name || '未配置',
})
}
return acc;
}, initVal);
return acc
}, initVal)
return list;
return list
}
watch(
() => configStore.systemConfig,
(newVal) => {
if (!newVal) return;
if (!newVal)
return
const list = generateAllData(newVal);
typeOptions.value = list;
}
);
const list = generateAllData(newVal)
typeOptions.value = list
},
)
function getOptions(key: string) {
if (key === "izsimilarity") return similarityOptions;
@ -261,17 +263,17 @@ function getOptions(key: string) {
}
function leaveHandler() {
currentStatus.value = "new";
currentEditId = null;
currentStatus.value = 'new'
currentEditId = null
formValue.name = null;
formValue.name = null
formValue.conditions = [
{
type: null,
operator: "eq",
operator: 'eq',
result: null,
},
];
]
}
function edit(editFilter: any) {
@ -285,14 +287,14 @@ function edit(editFilter: any) {
type: item.searchfield,
operator: item.searchtype,
result: unformatValue(item.searchfield, item.searchvalue),
};
});
}
})
}
defineExpose({
showModal,
edit,
});
})
</script>
<template>
@ -314,16 +316,18 @@ defineExpose({
<div class="wrapper-form">
<n-form ref="formRef" :model="formValue" :rules="rules">
<n-form-item path="name" label="标题">
<!-- j -->
<n-input
v-model:value="formValue.name"
:style="{ width: '780px' }"
maxlength="15"
@keydown.enter.prevent
/>
</n-form-item>
<n-form-item path="logic" label="逻辑关系" v-show="false">
<n-form-item v-show="false" path="logic" label="逻辑关系">
<n-select
filterable
v-model:value="formValue.logic"
filterable
placeholder="请选择逻辑关系"
:options="logicOptions"
/>
@ -336,14 +340,14 @@ defineExpose({
:label="formLabel(index)"
>
<n-select
filterable
v-model:value="item.type"
filterable
placeholder="请选择筛选项名称"
:options="typeOptions"
/>
<n-select
filterable
v-model:value="item.operator"
filterable
style="margin-left: 8px"
placeholder="请选择"
:options="operatorOptions"
@ -357,9 +361,9 @@ defineExpose({
/>
</n-space>
<n-select
filterable
v-else
v-model:value="item.result"
filterable
style="margin-left: 8px"
placeholder="请选择"
:options="getOptions(item.type!)"
@ -370,7 +374,19 @@ defineExpose({
@click="removeCondition(index)"
>
<template #icon>
<SvgIcon size="24" name="close" />
<!-- <SvgIcon size="24" name="close" color="#F00"/>
-->
<svg width="24px" height="24px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>清除</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="PrevailCloud-Design-图标集" transform="translate(-3040.000000, -3118.000000)" fill-rule="nonzero">
<g id="清除" transform="translate(3040.000000, 3118.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="64" height="64"></rect>
<path d="M32,4 C16.5619675,4 4,16.5600322 4,32 C4,47.4399678 16.5600322,60 32,60 C47.4380325,60 60,47.4399678 60,32 C60,16.5600322 47.4399678,4 32,4 Z M43.4220132,40.6240021 C44.2020159,41.4079827 44.1999731,42.6720064 43.4180353,43.4520091 C43.0280877,43.8400215 42.5180487,44.0360166 42.0060745,44.0360166 C41.4920576,44.0360166 40.9800834,43.8400214 40.5900283,43.4480311 L31.9900014,34.8219862 L23.3620213,43.3580432 C22.9720737,43.7420776 22.4639699,43.9360301 21.9559737,43.9360301 C21.4400215,43.9360301 20.9260046,43.7379922 20.5340143,43.3420239 C19.7579895,42.5560005 19.7640102,41.2919768 20.5500336,40.5140169 L29.1680151,31.9900013 L20.5819648,23.3759978 C19.8019621,22.5939524 19.8040049,21.3279935 20.5859428,20.5479908 C21.3679882,19.7659454 22.6319043,19.7700309 23.4139498,20.5519687 L32.0119339,29.1759709 L40.639914,20.6400214 C41.4238946,19.8620614 42.6918962,19.8700173 43.467921,20.6560407 C44.2458809,21.4420641 44.2379251,22.708023 43.4519016,23.4840477 L34.8340277,32.0079559 L43.4220132,40.6240021 Z" id="形状" fill="#DDDDDD"></path>
</g>
</g>
</g>
</svg>
</template>
</n-button>
</n-form-item>
@ -383,8 +399,10 @@ defineExpose({
</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 style="background-color: #507AFD;" type="info" @click="handleSumbit">
确定
</n-button>
<n-button secondary style="margin-left: 15px;background-color: #ffffff;border: 1px solid #cad2dd;color: #333333;" @click="closeModal">
取消
</n-button>
</div>
@ -451,4 +469,11 @@ defineExpose({
}
}
}
/*j */
// ::v-deep(.n-input .n-input-wrapper) {
// padding-left: 0;
// }
::v-deep(.n-input__suffix){
margin-right: -8px;
}
</style>

13
src/views/task/modal/CustomFieldModal.vue
Unescape View File

@ -27,11 +27,11 @@ const onShowList = ref<any[]>([]);
const fixShowList = ref<any[]>([]);
const allCount = computed(() => {
return `全部筛选(共${offList.value.length - 1}个)`;
return `全部字段(共${offList.value.length - 1}个)`;
});
const selectCount = computed(() => {
return `全部筛选(共${onList.value.length}个)`;
return `显示字段(共${onList.value.length}个)`;
});
function generatList() {
@ -389,7 +389,7 @@ const queryData = (value, type) => {
>
<div>
<n-input
placeholder="搜索关键字"
placeholder="搜索关键词"
@input="(value) => queryData(value, 'off')"
>
<template #suffix>
@ -400,7 +400,7 @@ const queryData = (value, type) => {
<div class="draggable-li" :class="{ checkAll: indeterminate }">
<n-checkbox
v-model:checked="checkAll"
label="全部"
label="全选"
@update:checked="onCheckAllChange"
:indeterminate="indeterminate"
/>
@ -438,7 +438,7 @@ const queryData = (value, type) => {
</template>
<div>
<n-input
placeholder="搜索关键字"
placeholder="搜索关键词"
@input="(value) => queryData(value, 'on')"
>
<template #suffix>
@ -487,7 +487,7 @@ const queryData = (value, type) => {
</div>
<template #footer>
<div class="wrapper-footer">
<n-button type="info" @click="handleSumbit"> 确认 </n-button>
<n-button type="info" @click="handleSumbit"> 确定 </n-button>
<n-button secondary style="margin-left: 15px" @click="getData();closeModal()">
取消
</n-button>
@ -628,5 +628,6 @@ const queryData = (value, type) => {
}
::v-deep(.n-button--default-type) {
border: 1px solid #cad2dd !important;
background-color: #fff;
}
</style>

158
src/views/task/modal/CustomSettingModal.vue
Unescape View File

@ -1,8 +1,8 @@
<script lang="ts" setup>
import { computed, defineEmits, defineProps, onMounted, ref } from "vue";
import { getAllfieldList, getfieldList, savefield } from "@/api/home/filter";
import { ReportInfoConfig } from "@/config/workorder";
import { useUser } from "@/store/modules/user";
import { computed, defineEmits, defineProps, onMounted, ref } from 'vue'
import { getAllfieldList, getfieldList, savefield } from '@/api/home/filter'
import { ReportInfoConfig } from '@/config/workorder'
import { useUser } from '@/store/modules/user'
const props = defineProps({
reviewType: {
@ -10,143 +10,145 @@ const props = defineProps({
default: () => 3,
require: true,
},
});
const emit = defineEmits(["onOk"]);
})
const emit = defineEmits(['onOk'])
onMounted(async () => {
const userStore = useUser();
const userInfo = userStore.getUserInfo;
let res;
res = await getAllfieldList(props.reviewType); // 所有筛选项目
const allList = res.data;
res = await getfieldList(props.reviewType, userInfo.id); // 当前用户选择的项目
const useList = res.data;
const userStore = useUser()
const userInfo = userStore.getUserInfo
let res
res = await getAllfieldList(props.reviewType) // 所有筛选项目
const allList = res.data
res = await getfieldList(props.reviewType, userInfo.id) // 当前用户选择的项目
const useList = res.data
/**
* name 标题
* id 键值
* fix 是否默认
* checked 是否选中
*/
const userFieldFixed = useList.userFieldFixed?.split(",");
const userFieldUnFixed = useList.userFieldUnFixed?.split(",");
const userFieldFixed = useList.userFieldFixed?.split(',')
const userFieldUnFixed = useList.userFieldUnFixed?.split(',')
allList.map((v) => {
const item = {
name: v.fieldDesc,
id: v.name,
fix: v.isrequired == 2,
checked:
v.isrequired == 2 ||
Boolean(userFieldFixed?.find((v2) => v2 == v.name)) ||
Boolean(userFieldUnFixed?.find((v2) => v2 == v.name)),
};
offList.value.push(item);
if(item.checked){
selectIds.value.push(item.id);
v.isrequired == 2
|| Boolean(userFieldFixed?.find(v2 => v2 == v.name))
|| Boolean(userFieldUnFixed?.find(v2 => v2 == v.name)),
}
});
});
offList.value.push(item)
if (item.checked)
selectIds.value.push(item.id)
})
})
const offList = ref<any[]>([]);
const offList = ref<any[]>([])
function generatList() {
const keys = Object.keys(ReportInfoConfig);
const hideList: object[] = [];
const keys = Object.keys(ReportInfoConfig)
const hideList: object[] = []
for (const key of keys) {
const name = ReportInfoConfig[key]?.label;
const isDefault = ReportInfoConfig[key]?.isDefault;
const name = ReportInfoConfig[key]?.label
const isDefault = ReportInfoConfig[key]?.isDefault
// 系统配置为Y且不是默认配置
if (!isDefault) {
hideList.push({
id: key,
name: name || "未配置",
name: name || '未配置',
fix: isDefault,
checked: ReportInfoConfig[key].isDefault,
});
})
}
}
const fixedList = generateDefaultList();
const fixedList = generateDefaultList()
hideList.unshift(...fixedList);
hideList.unshift(...fixedList)
offList.value = hideList;
return { hideList };
offList.value = hideList
return { hideList }
}
function generateDefaultList() {
return Object.keys(ReportInfoConfig).reduce((acc, key) => {
const { label, isDefault } = ReportInfoConfig[key];
const { label, isDefault } = ReportInfoConfig[key]
if (isDefault) {
const config = {
id: key,
name: label || "未配置",
name: label || '未配置',
fix: true,
checked: true,
};
return [...acc, config];
} else {
return acc;
}
return [...acc, config]
}
}, []);
else {
return acc
}
}, [])
}
const show = ref(false);
const show = ref(false)
const checkAll = computed(() => {
return offList.value.length == selectIds.value.length;
});
return offList.value.length == selectIds.value.length
})
function showModal() {
show.value = true;
show.value = true
}
function closeModal() {
show.value = false;
show.value = false
}
async function handleSumbit(e: MouseEvent) {
const userStore = useUser();
const userInfo = userStore.getUserInfo;
let userField = "";
const userStore = useUser()
const userInfo = userStore.getUserInfo
let userField = ''
offList.value.map((v) => {
if (v.checked) userField += `${v.id},`;
});
userField = userField.slice(0, userField.length - 1);
savefield(props.reviewType, userInfo.id, userField);
e.preventDefault();
closeModal();
emit("onOk");
if (v.checked)
userField += `${v.id},`
})
userField = userField.slice(0, userField.length - 1)
savefield(props.reviewType, userInfo.id, userField)
e.preventDefault()
closeModal()
emit('onOk')
}
defineExpose({
showModal,
});
})
// generatList();
const selectIds = ref<string[]>([]);
const selectIds = ref<string[]>([])
function onCheckAllChange(value) {
const ids: string[] = [];
const ids: string[] = []
for (const item of offList.value) {
if (!item.fix) {
item.checked = value;
ids.push(item.id);
item.checked = value
ids.push(item.id)
}
}
selectIds.value = value ? ids : [];
selectIds.value = value ? ids : []
}
function onCheckChange(checked: any, item: any) {
const index = selectIds.value.indexOf(item.id);
item.checked = checked;
if (index === -1 && checked) selectIds.value.push(item.id);
else selectIds.value.splice(index, 1);
const index = selectIds.value.indexOf(item.id)
item.checked = checked
if (index === -1 && checked)
selectIds.value.push(item.id)
else selectIds.value.splice(index, 1)
}
const indeterminate = computed(() => {
return selectIds.value.length > 0 && offList.value.length > selectIds.value.length;
});
return selectIds.value.length > 0 && offList.value.length > selectIds.value.length
})
</script>
<template>
@ -171,13 +173,14 @@ const indeterminate = computed(() => {
>
<div>
<div class="draggable-ul">
<div class="draggable-li" style="background: #f8f8f8">
<!-- j -->
<div class="draggable-li" style="background: #f8f8f8 !important">
<n-checkbox
v-model:checked="checkAll"
label="全选"
@update:checked="onCheckAllChange"
:class="{ checkAll: indeterminate }"
:indeterminate="indeterminate"
@update:checked="onCheckAllChange"
/>
</div>
<div class="content">
@ -204,8 +207,10 @@ const indeterminate = computed(() => {
</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 style="background-color: #507AFD;" type="info" @click="handleSumbit">
确定
</n-button>
<n-button class="style-btn" secondary style="margin-left: 15px;background-color: #ffffff" @click="closeModal">
取消
</n-button>
</div>
@ -307,4 +312,11 @@ const indeterminate = computed(() => {
--n-padding-top: 0px;
--n-padding-bottom: 12px;
}
::v-deep(.wrapper-title){
font-weight: 500;
color: #333333;
}
::v-deep(.style-btn){
border: 1px solid #CAD2DD !important;
}
</style>

127
src/views/worksheet/aside/Aside.vue
Unescape View File

@ -1,10 +1,5 @@
<script lang="ts" setup>
import { getAllfieldList, getfieldList } from "@/api/home/filter";
import { useWindowSizeFn } from "@/hooks/event/useWindowSizeFn";
import { useUser } from "@/store/modules/user";
import { useWorkOrder } from "@/store/modules/workOrder";
import { getViewportOffset } from "@/utils/domUtils";
import { debounce } from "lodash-es";
import { debounce } from 'lodash-es'
import {
computed,
defineOptions,
@ -23,16 +18,16 @@ import WorkSheetList from "./WorkSheetList.vue";
defineOptions({ name: "AsideContent" });
const emit = defineEmits(["ApprovalOver"]);
const collapse = ref(false);
const workStore = useWorkOrder();
const filterModalRef = ref(null);
const packageListRef = ref<HTMLDivElement | null>(null);
const collapse = ref(false)
const workStore = useWorkOrder()
const filterModalRef = ref(null)
const packageListRef = ref<HTMLDivElement | null>(null)
// 展示字段
const showFieldList = ref<any[]>([]);
const reviewType = 1;
const dicts = ref<any>([]);
const showFieldList = ref<any[]>([])
const reviewType = 1
const dicts = ref<any>([])
function collapseHandler() {
collapse.value = !collapse.value;
collapse.value = !collapse.value
}
const mousetrap = inject('mousetrap') as any
mousetrap.bind('[', collapseHandler)
@ -40,46 +35,46 @@ mousetrap.bind('[', collapseHandler)
const searchKeyword = ref('')
const asideWidth = computed(() => {
return collapse.value ? 0 : 308;
});
return collapse.value ? 0 : 308
})
const asideStyle = computed(() => {
return {
width: `${asideWidth.value}px`,
};
});
}
})
const collapseIcon = computed(() => {
return collapse.value ? "expand-cir" : "collapse-cir";
});
return collapse.value ? 'expand-cir' : 'collapse-cir'
})
const listHeight = ref(700);
const listHeight = ref(700)
function computeListHeight() {
const listEl = document.querySelector(".work-sheet-list")!;
const { bottomIncludeBody } = getViewportOffset(listEl);
const height = bottomIncludeBody;
listHeight.value = height - 25;
const listEl = document.querySelector('.work-sheet-list')!
const { bottomIncludeBody } = getViewportOffset(listEl)
const height = bottomIncludeBody
listHeight.value = height - 25
}
const listStyle = computed(() => {
return {
height: `${listHeight.value}px`,
};
});
}
})
useWindowSizeFn(computeListHeight, 280);
useWindowSizeFn(computeListHeight, 280)
async function getshowFieldList() {
showFieldList.value = [];
const userStore = useUser();
const userInfo = userStore.getUserInfo;
let res;
res = await getAllfieldList(reviewType); //所有筛选项目
const allList = res.data;
dicts.value = res.data;
res = await getfieldList(reviewType, userInfo.id); //当前用户选择的项目
const useList = res.data;
showFieldList.value = []
const userStore = useUser()
const userInfo = userStore.getUserInfo
let res
res = await getAllfieldList(reviewType) // 所有筛选项目
const allList = res.data
dicts.value = res.data
res = await getfieldList(reviewType, userInfo.id) // 当前用户选择的项目
const useList = res.data
/**
* name 标题
* id 键值
@ -87,64 +82,65 @@ async function getshowFieldList() {
* checked 是否选中
*/
if (useList.userFieldFixed) {
useList.userFieldFixed?.split(",").map((v) => {
let item = allList.find((v2) => v2.name == v);
useList.userFieldFixed?.split(',').map((v) => {
let item = allList.find(v2 => v2.name == v)
if (item) {
item = {
name: item.fieldDesc,
id: item.name,
fix: item.isrequired == 2,
checked: true,
};
showFieldList.value.push(item);
}
showFieldList.value.push(item)
}
});
} else {
})
}
else {
// 若为首次获取 则赋默认值
allList.map((v) => {
if (v.isrequired == 2) {
let item = {
const item = {
name: v.fieldDesc,
id: v.name,
fix: v.isrequired == 2,
checked: true,
};
showFieldList.value.push(item);
}
showFieldList.value.push(item)
}
});
})
}
}
onMounted(() => {
nextTick(() => {
computeListHeight();
getshowFieldList();
});
});
const asideEnter = ref(false);
computeListHeight()
getshowFieldList()
})
})
const asideEnter = ref(false)
const showCollapse = computed(() => {
return collapse.value ? true : asideEnter.value;
});
return collapse.value ? true : asideEnter.value
})
function showFilter() {
const modal = unref(filterModalRef)! as any;
modal.showModal();
const modal = unref(filterModalRef)! as any
modal.showModal()
}
watch(
() => workStore.immersion,
() => {
collapse.value = true;
}
);
collapse.value = true
},
)
const showSearch = ref(false);
const showSearch = ref(false)
function setShowSearch(value: boolean) {
showSearch.value = value;
showSearch.value = value
if (value === false) {
(packageListRef.value as any).search("");
(packageListRef.value as any).search('')
searchKeyword.value = ''
};
}
@ -175,7 +171,8 @@ const ApprovalOver = (packageId)=>{
<div v-show="!showSearch" class="warpper">
<div class="left">
<svg-icon name="all-worksheet" size="32" />
<span style="margin-left: 8px">所有任务包</span>
<!-- j -->
<span style="margin-left: 8px;color: #333333;">所有任务包</span>
</div>
<div class="right">
<SvgIcon
@ -194,10 +191,10 @@ const ApprovalOver = (packageId)=>{
</div>
<div v-show="showSearch" class="warpper">
<n-input
v-model:value="searchKeyword"
style="flex: 1; height: 32px"
placeholder="请输入你需要搜索的内容"
@input="inputHandler"
v-model:value="searchKeyword"
>
<template #suffix>
<SvgIcon size="14px" name="magnifying-1" />
@ -214,7 +211,7 @@ const ApprovalOver = (packageId)=>{
<WorkSheetList
ref="packageListRef"
class="work-sheet-list"
:showFieldList="showFieldList"
:show-field-list="showFieldList"
:dicts="dicts"
@ApprovalOver="ApprovalOver"
/>

72
src/views/worksheet/aside/ListItem.vue
Unescape View File

@ -1,11 +1,9 @@
<script lang="ts" setup>
import { format } from 'date-fns';
import { computed, onMounted, ref } from "vue";
import type { PackageListItem } from "/#/workorder";
defineOptions({ name: "ListItem" });
const emit = defineEmits(['dismisClick'])
import { format } from 'date-fns'
import { computed, onMounted, ref } from 'vue'
import type { PackageListItem } from '/#/workorder'
defineOptions({ name: 'ListItem' })
const props = defineProps({
selected: {
type: Boolean,
@ -27,17 +25,20 @@ const props = defineProps({
type: Array,
default: () => [],
},
});
})
const emit = defineEmits(['dismisClick'])
const svgName = computed(() => {
return props.selected ? "taskpack-select" : "taskpack";
});
return props.selected ? 'taskpack-select' : 'taskpack'
})
const popconfirmTarget: any = ref(null)
const popconfirmRef: any = ref(null)
function handleDismissTask() {
emit('dismisClick', props.mouseOverTask.id)
popconfirmRef.value[0]?.setShow(false); // 关闭 popconfirm
popconfirmRef.value[0]?.setShow(false) // 关闭 popconfirm
}
onMounted(async () => {
@ -45,23 +46,25 @@ onMounted(async () => {
</script>
<template>
<div class="list-item" :class="{ 'list-item-selected': selected }" ref="popconfirmTarget">
<div ref="popconfirmTarget" class="list-item" :class="{ 'list-item-selected': selected }">
<div v-for="(item, index) in showFieldList" :key="index">
<div v-if="item.id === 'name'" class="list-item-header">
<div class="id-wrap">
<SvgIcon :name="svgName" size="28" />
<span class="list-item-header-name" :class="{ 'list-item-header-selected': selected }">
<n-ellipsis style="max-width: 180px">
{{ listItem.name }}
#{{ listItem.name }}
</n-ellipsis>
<span class="list-item-header-selected">({{ listItem.pictureCount }})</span>
<n-popconfirm id="taskPopconfirmRef" ref="popconfirmRef" :show-icon="false" :show-arrow="false"
placement="bottom" trigger="click">
<n-popconfirm
id="taskPopconfirmRef" ref="popconfirmRef" :show-icon="false" :show-arrow="false"
placement="bottom" trigger="click"
>
<template #trigger>
<span class="dismiss-task-pack" v-show="mouseOverTask?.id" style="cursor: pointer;">...</span>
<span v-show="mouseOverTask?.id" class="dismiss-task-pack" style="cursor: pointer;">...</span>
</template>
<template #action>
<span @click="handleDismissTask" style="cursor: pointer;">解散任务包</span>
<span style="cursor: pointer;" @click="handleDismissTask">解散任务包</span>
</template>
</n-popconfirm>
</span>
@ -69,21 +72,31 @@ onMounted(async () => {
</div>
<ul v-else class="list-item-detail">
<li v-if="item.id === 'statshisText'">
审批状态：<n-ellipsis style="max-width: 170px"><span class="list-item-status" :class="listItem.statshisText === '通过'
? 'list-item-success'
: listItem.statshisText === '不通过'
? 'list-item-error'
: 'list-item-watting'
">{{ listItem.statshisText }}</span>
</n-ellipsis></li>
审批状态：<n-ellipsis style="max-width: 170px">
<span
class="list-item-status" :class="listItem.statshisText === '通过'
? 'list-item-success'
: listItem.statshisText === '不通过'
? 'list-item-error'
: 'list-item-watting'
"
>{{ listItem.statshisText }}</span>
</n-ellipsis>
</li>
<li v-else-if="item.id === 'createdate'">
提交时间：<n-ellipsis style="max-width: 170px">{{ listItem.createdate && format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}</n-ellipsis>
提交时间：<n-ellipsis style="max-width: 170px">
{{ listItem.createdate && format(listItem.createdate, "yyyy-MM-dd HH:mm:ss") }}
</n-ellipsis>
</li>
<li v-else-if="item.id === 'createTime'">
生成时间：<n-ellipsis style="max-width: 170px">{{ listItem.createTime && format(listItem.createTime, "yyyy-MM-dd HH:mm:ss") }}</n-ellipsis>
生成时间：<n-ellipsis style="max-width: 170px">
{{ listItem.createTime && format(listItem.createTime, "yyyy-MM-dd HH:mm:ss") }}
</n-ellipsis>
</li>
<li v-else class="ellipsis">
<span class="label">{{ item.name }}：</span><n-ellipsis style="max-width: 170px">{{ listItem[item.id] }}</n-ellipsis>
<span class="label">{{ item.name }}：</span><n-ellipsis style="max-width: 170px">
{{ listItem[item.id] }}
</n-ellipsis>
</li>
</ul>
</div>
@ -152,9 +165,9 @@ onMounted(async () => {
line-height: 22px;
margin: 0px 0px 8px 8px;
}
/*j*/
&-selected {
color: #507afd;
color: #507afd !important;
}
}
@ -185,5 +198,6 @@ onMounted(async () => {
position: absolute;
bottom: 0px;
}
}</style>
}
</style>
../types

43
src/views/worksheet/components/PictureInfo.vue
Unescape View File

@ -1,30 +1,32 @@
<script setup lang="ts">
import { fieldMap } from "@/config/workorder";
import { TASK_STATUS_OBJ } from '@/enums/index';
import { format } from 'date-fns';
import { pickBy } from "lodash-es";
import { computed, defineProps } from "vue";
import { format } from 'date-fns'
import { pickBy } from 'lodash-es'
import { computed, defineProps } from 'vue'
import { TASK_STATUS_OBJ } from '@/enums/index'
import { fieldMap } from '@/config/workorder'
const props = defineProps({
taskDetailInfo: {
type: Object,
default: () => ({}),
},
});
})
const propertys = computed(() => {
const { ocrPicture } = props.taskDetailInfo;
const { ocrPicture } = props.taskDetailInfo
const v = pickBy(ocrPicture, (value, key: string) => {
return key.startsWith("field") && value !== null;
});
return v;
});
return key.startsWith('field') && value !== null
})
return v
})
</script>
<template>
<div class="right">
<n-scrollbar style="max-height: 100%">
<n-ellipsis style="max-width: 350px">任务ID：{{ taskDetailInfo.taskname }}</n-ellipsis>
<n-ellipsis style="max-width: 350px">
任务ID：{{ taskDetailInfo.taskname }}
</n-ellipsis>
<div class="tags">
<div class="tag tag-submiting" v-if="taskDetailInfo.historyStates == 1">待审批</div>
<div class="tag tag-submited" v-else-if="taskDetailInfo.historyStates == 2 || taskDetailInfo.workStatus == 3">已审批</div>
@ -33,31 +35,32 @@ const propertys = computed(() => {
</div>
<n-divider class="divider-line" />
<div class="property">
<span class="property-name top" style="color: #666666">图片大小</span>
<!-- j -->
<span class="property-name top" style="color: #999999">图片大小</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgSize && (taskDetailInfo.pictureInfo.imgSize / 1000).toFixed(2) }}KB</span>
</div>
<div class="property">
<span class="property-name top" style="color: #666666">图片格式</span>
<span class="property-name top" style="color: #999999">图片格式</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgFormat }}</span>
</div>
<div class="property">
<span class="property-name top" style="color: #666666">图片尺寸</span>
<span class="property-name top" style="color: #999999">图片尺寸</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgMeasure }}</span>
</div>
<div class="property">
<span class="property-name top" style="color: #666666">色彩空间</span>
<span class="property-name top" style="color: #999999">色彩空间</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.imgSpace }}</span>
</div>
<div class="property">
<span class="property-name top" style="color: #666666">提报人</span>
<span class="property-name top" style="color: #999999">提报人</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.upname || "-" }}</span>
</div>
<div class="property">
<span class="property-name top" style="color: #666666">创建时间</span>
<span class="property-name top" style="color: #999999">创建时间</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.pictureInfo?.createTime }}</span>
</div>
<div class="property">
<span class="property-name top" style="color: #666666">提报时间</span>
<span class="property-name top" style="color: #999999">提报时间</span>
<span style="color: #333333; font-size: 16px">{{ taskDetailInfo?.submitDateTimestamp && format(taskDetailInfo.submitDateTimestamp, 'yyyy-MM-dd HH:mm:ss') || '-' }}</span>
</div>
<div v-for="(value, key) in propertys" :key="key" class="property">
@ -87,7 +90,6 @@ const propertys = computed(() => {
padding: 24px;
// background: lime;
.task-name {
display: inline-block;
width: 100%;
@ -175,7 +177,6 @@ const propertys = computed(() => {
}
}
::v-deep(.n-divider:not(.n-divider--vertical)) {
margin-top: 12px;
margin-bottom: 12px;

31
src/views/worksheet/modal/CustomFieldModal.vue
Unescape View File

@ -24,11 +24,11 @@ const onList = ref<any[]>([]);
const fixList = ref<any[]>([]);
const allCount = computed(() => {
return `全部筛选(共${offList.value.length - 1}个)`;
return `全部字段(共${offList.value.length - 1}个)`;
});
const selectCount = computed(() => {
return `全部筛选(共${onList.value.length}个)`;
return `显示字段(共${onList.value.length}个)`;
});
function generatList() {
@ -322,7 +322,7 @@ const indeterminate = computed(() => {
aria-modal="true"
>
<div class="wrapper">
<span class="wrapper-title">自定义任务包字段</span>
<span class="wrapper-title" style="color: #333;">自定义任务包字段</span>
<div class="wrapper-bar">
<div class="wrapper-info">
<span :style="{ 'margin-left': '18px' }">字段信息</span>
@ -338,7 +338,7 @@ const indeterminate = computed(() => {
:bordered="false"
>
<div>
<n-input placeholder="搜索关键字">
<n-input placeholder="搜索关键词">
<template #suffix>
<SvgIcon size="14px" name="magnifying-1" />
</template>
@ -347,7 +347,7 @@ const indeterminate = computed(() => {
<div class="draggable-li" :class="{ checkAll: indeterminate }">
<n-checkbox
v-model:checked="checkAll"
label="全部"
label="全选"
@update:checked="onCheckAllChange"
:indeterminate="indeterminate"
/>
@ -381,10 +381,10 @@ const indeterminate = computed(() => {
:bordered="false"
>
<template #header-extra>
<span class="textbtnStyle" @click="clearDragSource">清空</span>
<span class="textbtnStyle" @click="clearDragSource">恢复默认</span>
</template>
<div>
<n-input placeholder="搜索关键字">
<n-input placeholder="搜索关键词">
<template #suffix>
<SvgIcon size="14px" name="magnifying-1" />
</template>
@ -396,7 +396,7 @@ const indeterminate = computed(() => {
:class="{ fix: item.fix }"
class="cursor-move draggable-item"
>
<span class="ml-2">{{ item.name }}</span>
<span class="ml-2" style="color: #666;">{{ item.name }}</span>
</div>
</div>
<VueDraggable
@ -429,7 +429,7 @@ const indeterminate = computed(() => {
</div>
<template #footer>
<div class="wrapper-footer">
<n-button type="info" @click="handleSumbit"> 确认 </n-button>
<n-button type="info" @click="handleSumbit" style="background-color: #507AFD;"> 确定 </n-button>
<n-button secondary style="margin-left: 15px" @click="getData();closeModal();">
取消
</n-button>
@ -468,7 +468,7 @@ const indeterminate = computed(() => {
font-size: 14px;
&:before {
background-color: #1980ff;
background-color: #507AFD;
content: "";
width: 5px;
border-radius: 2px;
@ -558,4 +558,15 @@ const indeterminate = computed(() => {
::v-deep(.checkAll .n-checkbox-icon svg) {
display: none !important;
}
::v-deep(.n-card-header__main){
color: #666 !important;
}
::v-deep(.n-button--secondary) {
background-color: #fff;
border: 1px solid #cad2dd !important;
}
::v-deep(.n-button--secondary):hover {
background-color: #fff !important;
border: 1px solid #cad2dd !important;
}
</style>

Write Preview
Loading…
Cancel
Save