|
@@ -1,9 +1,10 @@
|
|
|
<script setup>
|
|
|
import { apiETAChartUser } from '@/api/etaChart'
|
|
|
import { SearchIcon } from 'tdesign-icons-vue-next'
|
|
|
+import { MessagePlugin } from 'tdesign-vue-next'
|
|
|
|
|
|
const show = defineModel('show', { type: Boolean, default: false })
|
|
|
-
|
|
|
+const emits=defineEmits(['change'])
|
|
|
|
|
|
const props=defineProps({
|
|
|
classifyOpts:{
|
|
@@ -16,6 +17,10 @@ const props=defineProps({
|
|
|
const selectClassify = ref('')
|
|
|
const keyword = ref('')
|
|
|
const checkAll = ref(false)
|
|
|
+const indeterminate=computed(()=>{
|
|
|
+ if(checkAll.value) return false
|
|
|
+ if(selectedRowKeys.value.length>0) return true
|
|
|
+})
|
|
|
|
|
|
const columns=[
|
|
|
{
|
|
@@ -38,14 +43,14 @@ const columns=[
|
|
|
]
|
|
|
const tableData=ref([])
|
|
|
const pagination = ref({
|
|
|
- defaultPageSize: 20,
|
|
|
+ pageSize: 10,
|
|
|
total: 0,
|
|
|
current: 1,
|
|
|
showPageSize:false
|
|
|
});
|
|
|
async function getChartList(){
|
|
|
const res=await apiETAChartUser.chartCollectList({
|
|
|
- CollectClassifyIds:selectClassify.value,
|
|
|
+ CollectClassifyIds:selectClassify.value?selectClassify.value.join(','):'',
|
|
|
Keyword:keyword.value,
|
|
|
PageSize:pagination.value.defaultPageSize,
|
|
|
CurrentIndex:pagination.value.current
|
|
@@ -54,28 +59,77 @@ async function getChartList(){
|
|
|
const arr=res.Data.List||[]
|
|
|
pagination.value.total=res.Data.Paging.Totals
|
|
|
tableData.value=arr
|
|
|
+ if(checkAll.value){
|
|
|
+ handleClickCheckAll(checkAll.value)
|
|
|
+ }
|
|
|
}
|
|
|
watch(
|
|
|
()=>show.value,
|
|
|
(n)=>{
|
|
|
if(n){
|
|
|
- getChartList()
|
|
|
+ keyword.value=''
|
|
|
+ selectClassify.value=''
|
|
|
+ newClassify.value=''
|
|
|
+ handleRefreshList()
|
|
|
}
|
|
|
}
|
|
|
)
|
|
|
|
|
|
-function onPageChange(){
|
|
|
-
|
|
|
+function onPageChange(pageInfo){
|
|
|
+ pagination.value.current = pageInfo.current
|
|
|
+ getChartList()
|
|
|
+}
|
|
|
+function handleRefreshList() {
|
|
|
+ pagination.value.current = 1
|
|
|
+ checkAll.value=false
|
|
|
+ selectedRowKeys.value=[]
|
|
|
+ getChartList()
|
|
|
}
|
|
|
|
|
|
const selectedRowKeys = ref([]);
|
|
|
function handleTableSelectChange(value, ctx){
|
|
|
- selectedRowKeys.value=value
|
|
|
+ selectedRowKeys.value = value
|
|
|
+ if(ctx.type==="uncheck"&&checkAll.value){
|
|
|
+ checkAll.value=false
|
|
|
+ }
|
|
|
+ if(ctx.type==='check'&&selectedRowKeys.value.length===pagination.value.total){
|
|
|
+ checkAll.value=true
|
|
|
+ }
|
|
|
+}
|
|
|
+function handleClickCheckAll(check) {
|
|
|
+ if(check){
|
|
|
+ // 全选
|
|
|
+ selectedRowKeys.value=[]
|
|
|
+ tableData.value.forEach(item=>{
|
|
|
+ selectedRowKeys.value.push(item.ChartInfoId)
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ selectedRowKeys.value=[]
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const newClassify=ref('')
|
|
|
async function handleSave() {
|
|
|
-
|
|
|
+ if(!newClassify.value){
|
|
|
+ MessagePlugin.warning('请选择要移动至的分类')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!checkAll.value&&selectedRowKeys.value===0){
|
|
|
+ MessagePlugin.warning('请选择要移动的图表')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const params={
|
|
|
+ SelectAll:checkAll.value,
|
|
|
+ CollectClassifyIds:selectClassify.value?selectClassify.value.join(','):'',
|
|
|
+ Keyword:keyword.value,
|
|
|
+ ChartInfoIds:selectedRowKeys.value.join(','),
|
|
|
+ CollectClassifyId:newClassify.value,
|
|
|
+ }
|
|
|
+ const res=await apiETAChartUser.chartCollectBatchMove(params)
|
|
|
+ if(res.Ret!==200) return
|
|
|
+ MessagePlugin.success('操作成功')
|
|
|
+ show.value=false
|
|
|
+ emits('change')
|
|
|
}
|
|
|
|
|
|
|
|
@@ -95,7 +149,11 @@ async function handleSave() {
|
|
|
<t-select
|
|
|
v-model="selectClassify"
|
|
|
placeholder="图表分类"
|
|
|
+ multiple
|
|
|
+ :min-collapsed-num="1"
|
|
|
+ clearable
|
|
|
style="max-width: 235px"
|
|
|
+ @change="handleRefreshList"
|
|
|
>
|
|
|
<t-option
|
|
|
v-for="item in props.classifyOpts"
|
|
@@ -104,22 +162,26 @@ async function handleSave() {
|
|
|
:value="item.CollectClassifyId"
|
|
|
></t-option>
|
|
|
</t-select>
|
|
|
- <t-input placeholder="请输入图表名称" style="max-width: 600px">
|
|
|
+ <t-input placeholder="请输入图表名称" v-model="keyword" @change="handleRefreshList" style="max-width: 600px">
|
|
|
<template #prefixIcon>
|
|
|
<SearchIcon />
|
|
|
</template>
|
|
|
</t-input>
|
|
|
- <t-checkbox style="flex-shrink: 0" v-model="checkAll">全选</t-checkbox>
|
|
|
+ <t-checkbox
|
|
|
+ style="flex-shrink: 0"
|
|
|
+ v-model="checkAll"
|
|
|
+ :indeterminate="indeterminate"
|
|
|
+ @change="handleClickCheckAll"
|
|
|
+ >全选</t-checkbox>
|
|
|
</div>
|
|
|
<t-table
|
|
|
- row-key="ChartCollectId"
|
|
|
+ row-key="ChartInfoId"
|
|
|
:data="tableData"
|
|
|
:columns="columns"
|
|
|
bordered
|
|
|
- hover
|
|
|
- max-height="500"
|
|
|
+ max-height="600"
|
|
|
resizable
|
|
|
- :selected-row-keys="selectedRowKeys"
|
|
|
+ v-model:selectedRowKeys="selectedRowKeys"
|
|
|
:pagination="pagination"
|
|
|
@page-change="onPageChange"
|
|
|
@select-change="handleTableSelectChange"
|