[add] 参数项收集清单

This commit is contained in:
zhaomeijing
2022-05-10 11:32:47 +08:00
parent 5da8cb2e43
commit ba0f28da59
3 changed files with 433 additions and 191 deletions
@@ -0,0 +1,268 @@
<template>
<div style="height: 100%">
<div class="box">
<a-table
class="table"
rowKey="id"
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:pagination="false"
:scroll="{x: true}"
:data-source="dataSource"
:loading="loading"
:columns="columns"
@change="tableOnChange"
>
<span slot="operation" slot-scope="record">
<a v-for="(ol,index) in OperationList"
@click="OperationClick(ol,record)">
<span v-if="ol.text == $t('CancelCollection')" v-has="ol.has" class="text">
{{!record.collectFlag || record.collectFlag == 0 ? $t('Collection') :$t('CancelCollection')}}
</span>
<span v-else-if="ol.text == $t('CancelSubscribe')" v-has="ol.has" class="text">
{{!record.subscribeFlag || record.subscribeFlag == 0 ? $t('subscribe') :$t('CancelSubscribe')}}
</span>
<span v-else v-has="ol.has" class="text">
{{ol.text}}
</span>
</a>
</span>
<span slot="detailClick" slot-scope="text,record">
<a class="text" :title="text" @click="detailClick(record)">
{{text && text.length > 18?text.slice(0,17)+'...':text}}
</a>
</span>
<span slot="urlClick" slot-scope="text,record">
<a class="text" :title="text" @click="urlClick(text)">
{{text && text.length > 18?text.slice(0,17)+'...':text}}
</a>
</span>
<span slot="detailText" slot-scope="text,record">
<span class="text" :title="text">
{{text && text.length > 18?text.slice(0,17)+'...':text}}
</span>
</span>
</a-table>
</div>
<div class="page" v-if="dataSource.length > 0">
<a-pagination
:show-total="total => $t('total')+` ${total} `+$t('strip')"
show-quick-jumper
show-size-changer
:page-size.sync="pageSize"
:total="total"
@change="onChange"
@showSizeChange="SizeChange"
/>
</div>
</div>
</template>
<script>
import eventBUs from '../../common/event'
import { getAction, postAction } from '@/api/manage'
export default {
name: 'index',
props: {
//接口
url: {
type: Object,
default: {}
},
// 详细列表得一条数据
paramsManifest: {
type: Object,
default: {},
require: true
},
// flag: {
// type: String,
// default: ''
// },
// //是否显示操作;默认不显示
// showAction: {
// type: Boolean,
// default: false
// }
},
data() {
return {
jsonBody: [],
checkboxList: [],
tableAll: false,
indeterminate: false,
columns: [],
selectedRowKeys: [],
dataSource: [],
pageNo: 1,
pageSize: 10,
total: 0,
searchParmes: {},
loading: false,
orderBy: '1',
orderByField: ''
}
},
mounted() {
// eventBUs.$on('searchQuery', search => {
// Object.keys(search).forEach(res => {
// if (search[res] instanceof Array) {
// search[res] = search[res].join(',')
// }
// })
// this.searchParmes = search
// this.getData()
// this.getTableList()
// })
// eventBUs.$on('searchReset', target => {
// this.searchParmes = {}
// this.selectedRowKeys = []
// this.getData()
// this.getTableList()
// })
// this.getData()
// this.getTableList()
},
methods: {
getTextWith(text, fontStyle) {
// var canvas = document.createElement('canvas')
// var context = canvas.getContext('2d')
// context.font = fontStyle || '14px' // 设置字体样式
// var dimension = context.measureText(text)
// return dimension.width + 40
},
getData() {
let params = {
paramsManifestId: this.paramsManifest.id,
flag: '7'
}
console.log(params,'paramsparams')
getAction(this.url.tableHeader, params).then((res) => {
if (res.success) {
console.log(res,'res...头部')
var jsonHead = res.result
this.columns = []
// res.db_field_txt
jsonHead.forEach((res, index) => {
this.columns.push({
title: res.db_field_txt,
dataIndex: res.db_field_name,
align: 'center',
ellipsis: true,
sorter: res.sort
})
// if (res.click) {
// this.columns[index].scopedSlots = {
// customRender: 'detailClick'
// }
// } else if (res.urlClick) {
// this.columns[index].scopedSlots = {
// customRender: 'urlClick'
// }
// } else {
// this.columns[index].scopedSlots = {
// customRender: 'detailText'
// }
// }
})
// let width = 0
// if (this.OperationList.length > 0) {
// for (let i = 0; i < this.OperationList.length; i++) {
// width += this.getTextWith(this.OperationList[i].text)
// }
// }
if (this.showAction) {
this.columns.push({
title: this.$t('operation'),
align: 'center',
fixed: 'right',
width: width,
scopedSlots: { customRender: 'operation' }
})
}
}
})
},
tableOnChange(pagination, filters, sorter) {
},
getTableList() {
let params = {
paramsManifestId: this.paramsManifest.id,
}
console.log(params,'paykkkkk')
this.loading = true
getAction(this.url.tableList, params).then((res) => {
if (res.success) {
console.log(res,'res...list')
// if (res.result.current > 1 && res.result.records.length == 0) {
// this.pageNo = res.result.current - 1
// this.getTableList()
// return
// }
// this.dataSource = res.result.records
// this.total = res.result.total
this.loading = false
} else {
this.loading = false
}
})
},
onChange(page, pageSize) {
// this.pageNo = page
// this.getTableList()
},
SizeChange(page, pageSize) {
// this.pageNo = 1
// this.pageSize = pageSize
// this.getTableList()
},
onSelectChange(value) {
// this.selectedRowKeys = value
// this.$emit('onSelectChange', value)
},
OperationClick(ol, item) {
// this.$emit(ol.ClickEvent, item)
},
detailClick(item, index) {
// this.$emit('detailClick', item)
},
urlClick(item) {
// window.open(item)
}
},
watch: {
paramsManifest(newVal, oldVal) {
this.getData()
this.getTableList()
}
}
}
</script>
<style>
.table .ant-table-column-title {
font-weight: bold;
}
.ant-table td {
white-space: nowrap;
}
</style>
<style scoped>
.box {
width: 100%;
height: calc(100% - 100px);
overflow: auto;
}
.text {
margin-right: 10px;
}
.page {
text-align: right;
margin-top: 20px;
}
</style>
@@ -392,7 +392,7 @@ export default {
val.forEach((item) => {
_tt.push({
textVal: item.text, // tab
certCategory: '', // 所属认证类别
certCategory: item.value, // 所属认证类别
paramsNumber: '', // 编号
paramsName: '', // 参数名称
description: ''// 参数说明
@@ -60,46 +60,25 @@
</a-row>
</div>
<div class="table-operator">
<div @click="handleAdd" class="operator-text">
<a-icon type="plus"/>
{{$t('add')}}{{ $t('detailedList') }}
</div>
<div @click="handleModule" class="operator-text">
<a-icon type="bulb"/>
{{$t('changeExtension')}}
</div>
<div @click="handleCody" class="operator-text">
<a-icon type="copy"/>
{{$t('copy')}}{{$t('parameter')}}{{ $t('detailedList') }}
</div>
<div @click="handleDel" class="operator-text" v-has="'document:deleteBatch'">
<a-icon type="delete"/>
{{$t('BatchDelete')}}
</div>
<!-- <div @click="handleAdd" class="operator-text">-->
<!-- <a-icon type="plus"/>-->
<!-- {{$t('add')}}{{ $t('detailedList') }}-->
<!-- </div>-->
<!-- <div @click="handleModule" class="operator-text">-->
<!-- <a-icon type="bulb"/>-->
<!-- {{$t('changeExtension')}}-->
<!-- </div>-->
<!-- <div @click="handleCody" class="operator-text">-->
<!-- <a-icon type="copy"/>-->
<!-- {{$t('copy')}}{{$t('parameter')}}{{ $t('detailedList') }}-->
<!-- </div>-->
<!-- <div @click="handleDel" class="operator-text" v-has="'document:deleteBatch'">-->
<!-- <a-icon type="delete"/>-->
<!-- {{$t('BatchDelete')}}-->
<!-- </div>-->
</div>
<div style="width: 100%">
<a-table
class='table-area'
ref='table'
size='middle'
rowKey='id'
:columns='columns'
:dataSource='dataSource'
:pagination='false'
:loading='loading'
:scroll='{x: 600}'
:rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
@change='handleTableChange'>
<span slot="paramsManifestClick" slot-scope="text,record">
<a @click="paramsManifestClick(record)">{{text}}</a>
</span>
<span slot="operation" slot-scope="text,record">
<a class="text-operation" @click="configure(record)">{{$t('configure')}}</a>
<a class="text-operation" @click="edit(record)">{{$t('edit')}}</a>
<a class="text-operation" @click="deleteLib(record)">{{$t('deleteLib')}}</a>
<a class="text-operation" @click="historicalVersion(record)">{{$t('historicalVersion')}}</a>
</span>
</a-table>
<table-collection ref="CollectionTabel" :url='url' :paramsManifest='paramsManifest'/>
</div>
<div class="page">
<a-pagination
@@ -113,27 +92,19 @@
/>
</div>
<a-modal v-model="areaVisible" :title="$t('parameterTemplate')" width='750px' :footer="null">
<!-- <parameter-template v-if='areaVisible' @areaVisible='handleCancel' :templateTitle='templatetitle'-->
<!-- :selectedRowKeyS='selectedRowKeys' :rowId='rowId' :version='version'></parameter-template>-->
</a-modal>
<!-- <configure ref="configureRef" :url='url' :itemId='itemId'/>-->
</a-card>
</template>
<script>
// import ImportFile from '@/components/ImportFile/index'
// import ParameterTemplate from '../dialog/ParameterTemplate'
import TableCollection from '@/components/tableCollection/index'
import { getAction,postAction } from '../../../api/manage'
// import Configure from '../dialog/configure'
import axios from 'axios'
export default {
name: 'ParameterItemCollectionList',
// components:{
// ImportFile,
// ParameterTemplate,
// Configure
// },
components:{
TableCollection
},
data(){
return{
columns:[
@@ -184,8 +155,8 @@ export default {
selectedRowKeys: [],
queryParam: {},
url: {
getHeader: 'params/collectManifest/getHeader',
list: 'params/collectManifest/list',
tableHeader: 'params/collectManifest/getHeader',
tableList: 'params/collectManifest/list',
// add: 'params/manifest/add',
// edit: 'params/manifest/edit',
// queryById: 'params/manifest/queryById',
@@ -219,158 +190,161 @@ export default {
mounted() {
},
methods:{
paramsManifestClick(item) {
// let newUrl = this.$router.resolve({
// path: '/ParameterItemCollection',
// query: item
// })
// window.open(newUrl.href, '_blank')
},
deleteLib(val) {
let _this = this
this.$confirm({
content: _this.$t('ConfirmDelete'),
onOk() {
// getAction(_this.url.deleteBatch, { id: val.id }).then((res) => {
// if (res.success) {
// _this.$message.success(_this.$t('OperationSuccessful'))
// _this.getlist()
// } else {
// _this.$message.warning(_this.$t('operationFailed'))
// }
// })
}
})
},
handleTableChange() {
},
// paramsManifestClick(item) {
// // let newUrl = this.$router.resolve({
// // path: '/ParameterItemCollection',
// // query: item
// // })
// // window.open(newUrl.href, '_blank')
// },
// deleteLib(val) {
// let _this = this
// this.$confirm({
// content: _this.$t('ConfirmDelete'),
// onOk() {
// // getAction(_this.url.deleteBatch, { id: val.id }).then((res) => {
// // if (res.success) {
// // _this.$message.success(_this.$t('OperationSuccessful'))
// // _this.getlist()
// // } else {
// // _this.$message.warning(_this.$t('operationFailed'))
// // }
// // })
// }
// })
// },
// handleTableChange() {
//
historicalVersion() {
},
// 配置
configure(item) {
this.itemId = item.id
this.$refs.configureRef.addModel(item.id)
},
handleCancel(val) {
this.areaVisible = val
this.getlist()
},
// },
// //
// historicalVersion() {
//
// },
// // 配置
// configure(item) {
// this.itemId = item.id
// this.$refs.configureRef.addModel(item.id)
// },
// handleCancel(val) {
// this.areaVisible = val
// // this.getlist()
// },
searchQuery() {
this.pageNo = 1
this.getlist()
// this.getlist()
},
searchReset() {
this.queryParam = {}
this.pageNo = 1
this.getlist()
},
onSelectChange(val) {
this.selectedRowKeys = val
this.selectedRowKeysArray = val.join(',')
},
edit(edit){
this.areaVisible = true
let _this = this
let query = {
paramsManifestId: this.paramsManifest.id
}
getAction(_this.url.getHeader, query).then((res) => {
if (res.success) {
console.log(res,'res..')
this.templatetitle = res.result.title
this.selectedRowKeys = res.result.paramsTemplateId.split(',')
this.rowId = res.result.id
this.version = res.result.paramsTemplatePublishVersion
console.log(this.selectedRowKeys,'this.selectedRowKeys')
console.log(typeof this.version)
} else {
}
})
},
handleAdd(){
this.areaVisible = true
},
handleModule(){
},
handleDel(){
let param={
ids: this.selectedRowKeysArray
}
if (this.selectedRowKeys.length > 0) {
let _this = this
this.$confirm({
content: _this.$t('ConfirmBatchDeletion'),
onOk() {
postAction(_this.url.deleteAll, param).then((res) => {
if (res.success) {
_this.$message.success(_this.$t('OperationSuccessful'))
_this.getlist()
} else {
_this.$message.warning(_this.$t('operationFailed'))
}
})
}
})
} else {
this.$message.warning(this.$t('selectLeastOne'))
}
},
handleCody() {
},
getPersonnelList(){
// this.pageNo = 1
// this.getlist()
},
// onSelectChange(val) {
// this.selectedRowKeys = val
// this.selectedRowKeysArray = val.join(',')
// },
// edit(edit){
// this.areaVisible = true
// let _this = this
// let query = {
// paramsManifestId: this.paramsManifest.id
// }
// getAction(_this.url.getHeader, query).then((res) => {
// if (res.success) {
// console.log(res,'res..')
// this.templatetitle = res.result.title
// this.selectedRowKeys = res.result.paramsTemplateId.split(',')
// this.rowId = res.result.id
// this.version = res.result.paramsTemplatePublishVersion
// console.log(this.selectedRowKeys,'this.selectedRowKeys')
// console.log(typeof this.version)
// } else {
// }
// })
// },
// handleAdd(){
// this.areaVisible = true
// },
// handleModule(){
//
// },
// handleDel(){
// let param={
// ids: this.selectedRowKeysArray
// }
// if (this.selectedRowKeys.length > 0) {
// let _this = this
// this.$confirm({
// content: _this.$t('ConfirmBatchDeletion'),
// onOk() {
// postAction(_this.url.deleteAll, param).then((res) => {
// if (res.success) {
// _this.$message.success(_this.$t('OperationSuccessful'))
// // _this.getlist()
// } else {
// _this.$message.warning(_this.$t('operationFailed'))
// }
// })
// }
// })
// } else {
// this.$message.warning(this.$t('selectLeastOne'))
// }
// },
// handleCody() {
//
// },
// getPersonnelList(){
//
// },
pageOnChange() {
},
SizeChange() {
},
getlist() {
let query = {
paramsManifestId: this.paramsManifest.id,
flag: '7'
}
console.log(this.paramsManifest,'this.paramsManifestthis.paramsManifestthis.paramsManifest')
getAction(this.url.getHeader, query).then((res) => {
if(res.success) {
console.log(res,'头部,,,')
// this.total = res.result.total
// this.dataSource = res.result.records || []
this.loading = false
} else {
this.loading = false
}
})
// let query = {
// pageSize: this.pageSize,
// pageNo: this.pageNo,
// ...this.queryParam
// }
// console.log(this.paramsManifest,'this.paramsManifestthis.paramsManifest')
// // console.log(this.$route.query,'this.query')
getAction(this.url.list, {}).then((res) => {
if(res.success) {
console.log(res,'oooo')
// this.total = res.result.total
// this.dataSource = res.result.records || []
this.loading = false
} else {
this.loading = false
}
})
}
// // getlist() {
// // let query = {
// // paramsManifestId: this.paramsManifest.id,
// // }
// // let flag = {
// // flag: '7'
// // }
// // let getquery = {...query,...flag}
// // console.log(this.paramsManifest,'this.paramsManifestthis.paramsManifestthis.paramsManifest')
// // getAction(this.url.getHeader, getquery).then((res) => {
// // if(res.success) {
// // console.log(res,'头部,,,')
// // // this.total = res.result.total
// // // this.dataSource = res.result.records || []
// // this.loading = false
// // } else {
// // this.loading = false
// // }
// // })
// // // let query = {
// // // pageSize: this.pageSize,
// // // pageNo: this.pageNo,
// // // ...this.queryParam
// // // }
// // // console.log(this.paramsManifest,'this.paramsManifestthis.paramsManifest')
// // // // console.log(this.$route.query,'this.query')
// // getAction(this.url.list, query).then((res) => {
// // if(res.success) {
// // console.log(res,'oooo')
// // // this.total = res.result.total
// // // this.dataSource = res.result.records || []
// // this.loading = false
// // } else {
// // this.loading = false
// // }
// // })
// // }
},
watch: {
paramsManifest(newVal, oldVal) {
this.getlist()
}
}
// watch: {
// paramsManifest(newVal, oldVal) {
// this.getlist()
// }
// }
}
</script>