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

添加全选功能select下拉组件，代码整理，样式调整

Browse Source
This commit is contained in:
renpy 2023-07-04 17:26:41 +08:00 committed by orgin
parent 7cff7774de
commit 64ff2710e8
12 changed files with 189 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/CustomAllSelect/index.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<a-select v-bind="$attrs" v-model="innerValue" show-arrow @change="onChange">
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
<div slot="dropdownRender" slot-scope="menu">
<v-nodes :vnodes="menu" />
<a-divider style="margin: 0;" />
<div
style="padding: 4px 12px; cursor: pointer;"
@mousedown="e => e.preventDefault()"
>
<a-checkbox v-model="allVal" @change="checkedAll"><span @click.prevent="handleClick">ALL</span></a-checkbox>
</div>
</div>
</a-select>
</template>
<script>
export default {
props: {
value: {
type: [String, Number, Array],
},
allChecked: {
type: Boolean,
default:false
}
},
components: {
VNodes: {
functional: true,
render: (h, ctx) => ctx.props.vnodes,
},
},
data() {
return {
innerValue: this.value,
allVal:this.allChecked
}
},
methods: {
checkedAll(val) {
this.$emit('changeAll', val.target.checked)
},
handleClick(e) {
console.log("dfasdfasfad", e);
this.allVal = !this.allVal
this.$emit('changeAll', this.allVal)
},
onChange(val) {
this.$emit('input', val)
this.$emit('change', val)
}
},
watch: {
value: {
handler(val) {
this.innerValue = val
},
deep: true
},
allChecked: {
handler(val) {
this.allVal = val
}
}
}
}
</script>
<style lang="less" scoped>
.ant-select {
width: 100%;
.ant-select-arrow-icon {
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
&-open {
.ant-select-arrow-icon {
transform: rotate(180deg);
}
}
}
.ant-select-dropdown-content{
position: relative;
background: #03353f;
}
</style>

10
src/components/SearchForm/index.vue
View File

@ -66,9 +66,15 @@ export default {
}
},
watch: {
value(val) {
this.formModel = val
value: {
handler(val) {
this.formModel = val
},
deep: true
},
// value(val) {
// this.formModel = val
// },
formModel: {
handler(val) {
this.$emit('input', val)

2
src/main.js
View File

@ -52,6 +52,7 @@ import { rules } from '@/utils/rules'
import SearchForm from '@/components/SearchForm'
import CustomSelect from '@/components/CustomSelect'
import CustomAllSelect from '@/components/CustomAllSelect'
import CustomTable from '@/components/CustomTable'
import CustomModal from '@/components/CustomModal'
import CustomDatePicker from '@/components/CustomDatePicker'
@ -82,6 +83,7 @@ Vue.use(JeecgComponents);
Vue.use(VueAreaLinkage);
Vue.component('search-form', SearchForm)
Vue.component('custom-select', CustomSelect)
Vue.component('custom-all-select', CustomAllSelect)
Vue.component('custom-table', CustomTable)
Vue.component('custom-modal', CustomModal)
Vue.component('custom-date-picker', CustomDatePicker)

13
src/mixins/JeecgListMixin.js
View File

@ -53,7 +53,7 @@ export const JeecgListMixin = {
}
},
created() {
if(!this.disableMixinCreated){
if(!this.disableMixinCreated&&!this.isImmediate){
console.log(' -- mixin created -- ')
this.loadData();
//初始化字典配置 在自己页面定义
@ -73,12 +73,10 @@ export const JeecgListMixin = {
},
methods:{
loadData(arg) {
// if(!this.url.list){
// this.$message.error("请设置url.list属性!")
// return
// }
if (this.url.list) {
if(!this.url.list){
this.$message.error("请设置url.list属性!")
return
}
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1;
@ -103,7 +101,6 @@ export const JeecgListMixin = {
}).finally(() => {
this.loading = false
})
}
},
initDictConfig(){
console.log("--这是一个假的方法!")

64
src/views/statistics/blankphd.vue
View File

@ -97,22 +97,26 @@ export default {
},
data() {
return {
isImmediate:true,
isDetail:false,
columns,
queryParam: {
dataType: 'B',
startTime: dateFormat(new Date(), 'yyyy-MM-dd'),
endTime: dateFormat(new Date(), 'yyyy-MM-dd'),
stationIds:[]
},
url: {
listPage: '/webStatistics/findParticulatePage',
list: '/webStatistics/findParticulatePage',
delete: '/gardsSampleData/deleteById',
findStationList: '/webStatistics/findStationList',
findParticulatePage: '/jeecg-web-statistics/webStatistics/findParticulatePage',
},
stationList: [],
dataSource: [],
detailJson:{}
detailJson: {},
strIds: "",
allChecked:false
}
},
// mounted() {
@ -136,29 +140,29 @@ export default {
// },
methods: {
searchQueryData() {
this.queryParam = {
dataType: "S",
startTime: "2023-05-01",
endTime:"2023-05-07",
}
console.log("查询数据", this.queryParam);
this.isImmediate = false
// this.queryParam = {
// dataType: "S",
// startTime: "2023-05-01",
// endTime: "2023-05-07",
// stationIds: [209, 211, 213]
// }
let params = {
...this.queryParam,
pageNo: 1,
pageSize: 10,
stationIds: ["209", "211", "213"]
pageSize: 10
}
getAction(this.url.listPage, params).then((res) => {
console.log("查询数据结果", res);
getAction(this.url.list, params).then((res) => {
if (res.success) {
this.ipagination.current = res.result.current
this.ipagination.pageSize = res.result.size
this.ipagination.total = res.result.total
this.dataSource = res.result.records
}
})
},
handleDetail(record) {
console.log("点击行信息", record);
getAction("webStatistics/findGeneratedReport", { sampleId: "1523651" }).then(res => {
console.log(res);
if (res.success) {
this.detailJson = res.result
this.detailJson = JSON.parse(JSON.stringify(this.detailJson))
@ -171,12 +175,8 @@ export default {
handleBack(flag) {
this.isDetail = flag
},
handleTableChange(pagination, filters, sorter, { currentDataSource }) {
console.log(pagination, filters, sorter, { currentDataSource });
},
findStationList() {
getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
console.log("resdsfsdf", res);
if (res.result.length>0) {
this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
} else {
@ -184,6 +184,23 @@ export default {
}
})
},
handleSelectChange(val) {
console.log(val);
let length = this.stationList.length
if (val.length === length) {
this.allChecked = true
} else {
this.allChecked = false
}
},
handleSelectChangeAll(val) {
this.allChecked = val
if (val) {
this.queryParam.stationIds = this.stationList.map(item => item.value)
} else {
this.queryParam.stationIds =[]
}
}
},
computed: {
formItems() {
@ -203,24 +220,25 @@ export default {
},
},
{
type: 'custom-select',
type: 'custom-all-select',
label: 'Stations',
name: 'stationIds',
props: {
allChecked:this.allChecked,
placeholder: 'select stations',
mode: 'multiple',
maxTagCount: 1,
options: [
{
label: 'ALL',
value: '',
},
...this.stationList,
],
style: {
width: '200px',
},
},
on: {
change: this.handleSelectChange,
changeAll: this.handleSelectChangeAll
},
style: {
width: 'auto',
},

9
src/views/statistics/calibphd.vue
View File

@ -61,6 +61,12 @@ const columns = [
width: 120,
dataIndex: 'acquisitionStop',
},
{
title: 'CALIB REPORTS',
align: 'left',
width: 120,
dataIndex: 'calibreports',
},
]
export default {
components: {
@ -69,10 +75,7 @@ export default {
data() {
return {
url: {
listPage: '/webStatistics/findParticulatePage',
delete: '/gardsSampleData/deleteById',
findStationList: '/webStatistics/findStationList',
findParticulatePage: '/jeecg-web-statistics/webStatistics/findParticulatePage',
},
stationList: [],
columns,

20
src/views/statistics/detail.vue
View File

@ -2,24 +2,24 @@
<a-card :bordered="false" style="margin-left: 20px;height: 100%;">
<div class="detail-top">
<div class="top-back" @click="handleback">
<img src="../../assets/images/web-statistics/return.png" alt="">
<img class="icon-back" src="../../assets/images/web-statistics/return.png" alt="">
<span style="margin-left: 10px;">return</span>
</div>
<div class="top-actions">
<div class="right-btn">
<img class="icon-download" src="../../assets/images/web-statistics/download.png" alt=""><span>ZIP</span>
<img class="icon-download" src="../../assets/images/web-statistics/download.png" alt=""><span style="margin-left: 10px;">ZIP</span>
</div>
<div class="right-btn">
<img class="icon-download" src="../../assets/images/web-statistics/download.png" alt=""><span>TXT</span>
<img class="icon-download" src="../../assets/images/web-statistics/download.png" alt=""><span style="margin-left: 10px;">TXT</span>
</div>
<div class="right-btn">
<img class="icon-view" src="../../assets/images/web-statistics/view.png" alt=""><span>View Report</span>
<img class="icon-view" src="../../assets/images/web-statistics/view.png" alt=""><span style="margin-left: 10px;">View Report</span>
</div>
</div>
</div>
<a-tabs default-active-key="info" @change="handleTabChange">
<a-tab-pane key="info" tab="INFO" v-if="allData.headerBlock===null?false:true">
<templete>
<template>
<div class="pane-title">GENERAL INFORMATION</div>
<a-row>
<a-col :span="12" class="info-key">Site Code:</a-col>
@ -61,7 +61,7 @@
<a-col :span="12" class="info-key">Transmit Time:</a-col>
<a-col :span="12" class="info-val">{{ allData.headerBlock.transmitDate }}</a-col>
</a-row>
</templete>
</template>
<template v-if="allData.commentBlock && allData.commentBlock.text">
<div class="pane-title">COMMENT</div>
<a-row style="height: auto;">
@ -291,7 +291,6 @@ export default {
}
},
mounted () {
console.log(this.allData);
this.commentText = this.allData.commentBlock && this.allData.commentBlock.text?this.allData.commentBlock.text.replace(/\n/g, "<br />"):""
this.dataSourceEnergy=this.allData.genergyBlock
this.dataSourceResulution=this.allData.gresolutionBlock
@ -300,7 +299,6 @@ export default {
this.dataSourceSpectrumX = this.allData.gspectrumBlock.gspectrumSubBlock.map((item, index) => {
return index
})
console.log(this.dataSourceSpectrumX);
this.dataSourceCertificate = this.allData.certificateBlock?this.allData.certificateBlock.certificateSubBlock:[]
},
methods: {
@ -309,7 +307,6 @@ export default {
this.spectrumChart.setOption({
yAxis: {
type: this.yAxisType,
// type: 'log',
splitLine: {
show: true,
lineStyle: {
@ -420,6 +417,11 @@ export default {
font-stretch: normal;
letter-spacing: 0px;
color: #69a19f;
cursor: pointer;
.icon-back{
width: 28px;
height: 24px;
}
}
.top-actions{
.right-btn{

4
src/views/statistics/detbkphd.vue
View File

@ -69,10 +69,7 @@ export default {
data() {
return {
url: {
listPage: '/webStatistics/findParticulatePage',
delete: '/gardsSampleData/deleteById',
findStationList: '/webStatistics/findStationList',
findParticulatePage: '/jeecg-web-statistics/webStatistics/findParticulatePage',
},
stationList: [],
columns,
@ -86,7 +83,6 @@ export default {
methods: {
findStationList() {
getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
console.log("resdsfsdf", res);
if (res.result.length>0) {
this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
} else {

53
src/views/statistics/list.vue
View File

@ -57,11 +57,13 @@ export default {
},
data() {
return {
isImmediate:true,
isDetail:false,
queryParam: {
dataType: this.dataType,
startTime: dateFormat(new Date(), 'yyyy-MM-dd'),
endTime: dateFormat(new Date(), 'yyyy-MM-dd'),
stationIds:[]
},
url: {
list: '/webStatistics/findParticulatePage',
@ -70,38 +72,33 @@ export default {
findParticulatePage: '/jeecg-web-statistics/webStatistics/findParticulatePage',
},
dataSource: [],
detailJson:{}
detailJson: {},
allChecked:false
}
},
methods: {
searchQueryData() {
console.log("查询数据", this.queryParam);
console.log(this.dataType);
this.isImmediate = false
let params = {
dataType: "S",
startTime: "2023-05-01",
endTime: "2023-05-07",
...this.queryParam,
pageNo: 1,
pageSize: 10,
stationIds: ["209", "211", "213"]
// dataType: this.queryParam.dataType||"S",
// startTime: this.queryParam.startTime,
// endTime:this.queryParam.endTime,
pageSize: 10
}
getAction(this.url.list, params).then((res) => {
console.log("查询数据结果", res);
if (res.success) {
this.ipagination.current = res.result.current
this.ipagination.pageSize = res.result.size
this.ipagination.total = res.result.total
this.dataSource = res.result.records
}
})
},
handleDetail(record) {
// this.isDetail = true
console.log("点击行信息", record);
// 测试接口数据 record.sampleId
getAction("webStatistics/findGeneratedReport", { sampleId: "1523651" }).then(res => {
console.log(res);
if (res.success) {
if (res.success){
this.detailJson = res.result
this.detailJson = JSON.parse(JSON.stringify(this.detailJson))
this.isDetail = true
@ -113,8 +110,21 @@ export default {
handleBack(flag) {
this.isDetail = flag
},
handleTableChange(pagination, filters, sorter, { currentDataSource }) {
console.log(pagination, filters, sorter, { currentDataSource });
handleSelectChange(val) {
let length = this.stationList.length
if (val.length === length) {
this.allChecked = true
} else {
this.allChecked = false
}
},
handleSelectChangeAll(val) {
this.allChecked = val
if (val) {
this.queryParam.stationIds = this.stationList.map(item => item.value)
} else {
this.queryParam.stationIds =[]
}
}
},
computed: {
@ -135,24 +145,25 @@ export default {
},
},
{
type: 'custom-select',
type: 'custom-all-select',
label: 'Stations',
name: 'stationIds',
props: {
allChecked:this.allChecked,
placeholder: 'select stations',
mode: 'multiple',
maxTagCount: 1,
options: [
{
label: 'ALL',
value: '',
},
...this.stationList,
],
style: {
width: '200px',
},
},
on: {
change: this.handleSelectChange,
changeAll: this.handleSelectChangeAll
},
style: {
width: 'auto',
},

4
src/views/statistics/qcphd.vue
View File

@ -69,10 +69,7 @@ export default {
data() {
return {
url: {
listPage: '/webStatistics/findParticulatePage',
delete: '/gardsSampleData/deleteById',
findStationList: '/webStatistics/findStationList',
findParticulatePage: '/jeecg-web-statistics/webStatistics/findParticulatePage',
},
stationList: [],
columns,
@ -86,7 +83,6 @@ export default {
methods: {
findStationList() {
getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
console.log("resdsfsdf", res);
if (res.result.length>0) {
this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
} else {

4
src/views/statistics/sphdf.vue
View File

@ -69,10 +69,7 @@ export default {
data() {
return {
url: {
listPage: '/webStatistics/findParticulatePage',
delete: '/gardsSampleData/deleteById',
findStationList: '/webStatistics/findStationList',
findParticulatePage: '/jeecg-web-statistics/webStatistics/findParticulatePage',
},
stationList: [],
columns,
@ -86,7 +83,6 @@ export default {
methods: {
findStationList() {
getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
console.log("resdsfsdf", res);
if (res.result.length>0) {
this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
} else {

4
src/views/statistics/sphdp.vue
View File

@ -69,10 +69,7 @@ export default {
data() {
return {
url: {
listPage: '/webStatistics/findParticulatePage',
delete: '/gardsSampleData/deleteById',
findStationList: '/webStatistics/findStationList',
findParticulatePage: '/jeecg-web-statistics/webStatistics/findParticulatePage',
},
stationList: [],
columns,
@ -86,7 +83,6 @@ export default {
methods: {
findStationList() {
getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
console.log("resdsfsdf", res);
if (res.result.length>0) {
this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
} else {