xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 台站增加搜索功能

Browse Source
This commit is contained in:
Xu Zhimeng 2023-11-07 15:40:22 +08:00
parent da9257e81b
commit 4e9304ec9d
1 changed files with 103 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
src/views/system/Scheduling.vue
View File

@ -4,9 +4,7 @@
<a-card class="scheduling-list">
<!-- 标题 -->
<template slot="title">
<div class="card-title">
Scheduling
</div>
<div class="card-title">Scheduling</div>
<div class="line"></div>
</template>
<!-- 标题结束 -->
@ -50,7 +48,7 @@
<!-- 右侧边框结束 -->
</div>
</div>
<custom-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px;"></custom-empty>
<custom-empty v-if="!schedulingInfo || !schedulingInfo.length" style="margin-top: 40px"></custom-empty>
</div>
<!-- 内容结束 -->
</a-card>
@ -116,9 +114,30 @@
<custom-modal :title="isAdd ? 'Add' : 'Edit'" :width="845" v-model="visible" :okHandler="submit" destroy-on-close>
<a-spin :spinning="isGettingDetail">
<div class="account-assign">
<div class="search">
<!-- 穿梭框左上方搜索 -->
<div class="station-search">
<label>Station Name</label>
<a-input type="text" placeholder="Enter Station Name" v-model="stationName" />
</div>
<!-- 穿梭框左上方搜索结束 -->
<!-- 穿梭框右上方搜索 -->
<div class="account-search">
<label>User Name</label>
<custom-popover-search
placeholder="Enter User Name"
:options="accountList"
:keyword.sync="keyword"
:remote-method="getAccountList"
@add="onAddToList"
></custom-popover-search>
</div>
<!-- 穿梭框右上方搜索结束 -->
</div>
<!-- 穿梭框开始 -->
<a-transfer
:target-keys="targetKeys"
:render="item => item.title"
:render="(item) => item.title"
:operations="['Assign', 'Remove']"
:titles="['Particulate Station', 'Roster personnel']"
:show-select-all="false"
@ -169,19 +188,7 @@
</a-tree>
</template>
</a-transfer>
<!-- 穿梭框右上方搜索 -->
<div class="account-search">
<label>User Name</label>
<custom-popover-search
placeholder="Enter User Name"
:options="accountList"
:keyword.sync="keyword"
:remote-method="getAccountList"
@add="onAddToList"
></custom-popover-search>
</div>
<!-- 穿梭框右上方搜索结束 -->
<!-- 穿梭框结束 -->
</div>
</a-spin>
</custom-modal>
@ -203,9 +210,9 @@ export default {
components: {
VNodes: {
functional: true,
render: (_, ctx) => ctx.props.vnodes
render: (_, ctx) => ctx.props.vnodes,
},
CustomPopoverSearch
CustomPopoverSearch,
},
data() {
this.dateFormat = dateFormat
@ -222,7 +229,6 @@ export default {
isGettingDetail: false, // 编辑时正在获取详情
originalTreeData: [], // 站点的树状结构
targetKeys: [],
isGettingStationList: false,
@ -238,7 +244,8 @@ export default {
isChanging: false,
dragItem: null,
fromUserId: ''
fromUserId: '',
stationName: '',
}
},
created() {
@ -265,20 +272,7 @@ export default {
this.isGettingStationList = true
const { success, result, message } = await getAction('/gardsStations/findPage?pageIndex=1&pageSize=1000')
if (success) {
const records = result.records
const set = new Set(records.map(item => item.countryCode))
this.originalTreeData = Array.from(set).map((countryCode, index) => {
return {
title: countryCode,
key: index.toString(),
disabled: true,
children: records
.filter(item => item.countryCode == countryCode)
.map(item => ({ title: item.stationCode, key: item.stationId.toString(), children: [] }))
}
})
this.stationList = records
this.stationList = result.records
} else {
this.$message.error(message)
}
@ -296,9 +290,9 @@ export default {
)
if (success) {
const records = result.records
this.accountList = records.map(item => ({
this.accountList = records.map((item) => ({
label: item.username,
value: item.id
value: item.id,
}))
} else {
this.$message.error(message)
@ -331,20 +325,20 @@ export default {
if (success) {
const selectedStations = [] // 找出已经被选中的站点
const accountTree = [] // 构建右侧的树
result.forEach(item => {
result.forEach((item) => {
const accountItem = {
title: item.userName,
key: item.userId,
children: []
children: [],
}
accountTree.push(accountItem)
item.stationList.forEach(station => {
item.stationList.forEach((station) => {
selectedStations.push(station.stationId)
accountItem.children.push({
title: station.stationName,
key: station.stationId,
isLeaf: true
isLeaf: true,
})
})
})
@ -365,7 +359,7 @@ export default {
try {
const { success } = await deleteAction('/sysTask/deleteById', {
taskId,
userId
userId,
})
if (success) {
this.$message.success('Delete Success')
@ -389,10 +383,7 @@ export default {
this.targetKeys = []
this.accountTreeData = []
this.rightAccountChildSelectedKeys = []
this.rightAccountChildExpandedKeys = []
this.checkedAccount = ''
this.resetModalState()
},
onEdit() {
@ -402,13 +393,17 @@ export default {
}
this.isAdd = false
this.visible = true
this.resetModalState()
this.getScheduleDetail()
},
resetModalState() {
this.rightAccountChildSelectedKeys = []
this.rightAccountChildExpandedKeys = []
this.checkedAccount = ''
this.stationName = ''
this.keyword = ''
this.getScheduleDetail()
},
async onImport({ file }) {
@ -449,7 +444,7 @@ export default {
day: this.currentDate.format('YYYY-MM-DD'),
fromUserId: this.fromUserId,
toUserId,
stationIds: [this.dragItem.stationId]
stationIds: [this.dragItem.stationId],
})
if (success) {
this.$message.success('Change Success')
@ -471,7 +466,7 @@ export default {
this.$message.warn('Person List Is Empty')
return Promise.reject()
}
if (!this.accountTreeData.some(accountTreeItem => accountTreeItem.children.length)) {
if (!this.accountTreeData.some((accountTreeItem) => accountTreeItem.children.length)) {
this.$message.warn('Every Person Has No Station Assigned')
return Promise.reject()
}
@ -487,16 +482,16 @@ export default {
failMsg = 'Add Fail'
}
const params = []
this.accountTreeData.forEach(accountTreeItem => {
this.accountTreeData.forEach((accountTreeItem) => {
if (accountTreeItem.children.length) {
params.push({
schedulingDate: this.currentDate.format('YYYY-MM-DD HH:mm:ss'),
stationList: accountTreeItem.children.map(child => {
stationList: accountTreeItem.children.map((child) => {
return {
stationId: child.key
stationId: child.key,
}
}),
userId: accountTreeItem.key
userId: accountTreeItem.key,
})
}
})
@ -528,7 +523,7 @@ export default {
// 处理station列表
handleTreeData(data, targetKeys = [], level) {
data.forEach(item => {
data.forEach((item) => {
if (level !== 0) {
item.disabled = targetKeys.includes(item.key)
}
@ -542,13 +537,13 @@ export default {
// 将选中的账号加入到右侧穿梭框
onAddToList(selectedAccount) {
const addedAccounts = selectedAccount
.filter(id => !this.accountTreeData.find(account => account.key == id)) // 如果之前没有加过，才加进去
.map(id => {
const find = this.accountList.find(account => account.value == id)
.filter((id) => !this.accountTreeData.find((account) => account.key == id)) // 如果之前没有加过，才加进去
.map((id) => {
const find = this.accountList.find((account) => account.value == id)
return {
title: find.label,
key: id,
children: []
children: [],
}
})
this.accountTreeData.push(...addedAccounts)
@ -563,7 +558,7 @@ export default {
// 将所有右侧的穿梭状态重置
const allChildKeys = this.accountTreeData.reduce(
(prev, curr) => prev.concat(curr.children.map(child => child.key)),
(prev, curr) => prev.concat(curr.children.map((child) => child.key)),
[]
)
itemSelectAll(allChildKeys, false)
@ -584,14 +579,14 @@ export default {
this.$message.warning('Please Select A Person To Assign')
return
}
const findAccount = this.accountTreeData.find(account => account.key == this.checkedAccount)
const findAccount = this.accountTreeData.find((account) => account.key == this.checkedAccount)
if (findAccount) {
const children = moveKeys.map(key => {
const findStation = this.stationList.find(station => station.stationId == key)
const children = moveKeys.map((key) => {
const findStation = this.stationList.find((station) => station.stationId == key)
return {
isLeaf: true,
title: findStation.stationCode,
key
key,
}
})
findAccount.children.push(...children)
@ -605,7 +600,7 @@ export default {
for (const pIndex in this.accountTreeData) {
// 找到要移除的Station在右侧列表中的位置
const account = this.accountTreeData[pIndex]
const cIndex = account.children.findIndex(child => child.key == moveKey)
const cIndex = account.children.findIndex((child) => child.key == moveKey)
if (-1 !== cIndex) {
parentIndex = pIndex
childIndex = cIndex
@ -615,19 +610,33 @@ export default {
this.accountTreeData[parentIndex].children.splice(childIndex, 1)
}
this.targetKeys = targetKeys
}
},
},
computed: {
treeData() {
return this.handleTreeData(cloneDeep(this.originalTreeData), this.targetKeys, 0)
}
const filterData = this.stationList.filter((station) =>
station.stationCode.toLowerCase().includes(this.stationName.toLowerCase())
)
const set = new Set(filterData.map((item) => item.countryCode))
const originalTreeData = Array.from(set).map((countryCode, index) => {
return {
title: countryCode,
key: index.toString(),
disabled: true,
children: filterData
.filter((item) => item.countryCode == countryCode)
.map((item) => ({ title: item.stationCode, key: item.stationId.toString(), children: [] })),
}
})
return this.handleTreeData(cloneDeep(originalTreeData), this.targetKeys, 0)
},
},
watch: {
currentMonth() {
this.currentDate = this.currentMonth.clone()
this.getList()
}
}
},
},
}
</script>
<style lang="less" scoped>
@ -857,15 +866,37 @@ export default {
}
.account-assign {
position: relative;
width: 672px;
margin: 0 auto;
.search {
display: flex;
justify-content: space-between;
.station-search,
.account-search {
width: 282px;
display: flex;
align-items: center;
label {
color: #5b9cba;
font-size: 16px;
flex-shrink: 0;
margin-right: 10px;
user-select: none;
}
}
}
.ant-transfer {
margin-top: 15px;
margin-bottom: 10px;
::v-deep {
.ant-transfer-list {
width: 282px;
height: 411px;
height: 364px;
&-header {
height: 37px;
&-selected {
@ -884,12 +915,6 @@ export default {
}
}
}
&:last-child {
height: 364px;
position: relative;
top: 47px;
}
}
.ant-transfer-operation {
@ -932,21 +957,6 @@ export default {
}
}
}
.account-search {
position: absolute;
top: 0;
right: 0;
width: 282px;
display: flex;
align-items: center;
label {
color: #5b9cba;
font-size: 16px;
flex-shrink: 0;
margin-right: 10px;
user-select: none;
}
}
}
.ant-select-dropdown-content::before {
top: 2px;