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
parent c69d7e9b0d
commit 56bb7d48e5
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 {