[update] 清单编辑

This commit is contained in:
zhaomeijing
2022-05-30 16:17:56 +08:00
parent 9cb36ed31a
commit ff09bccd95
4 changed files with 470 additions and 24 deletions
@@ -418,7 +418,7 @@
}
this.loadData()
}else{
this.$message.warning(this.$t('operationFailed'));
this.$message.warning(res.message);
}
})
}
@@ -1,9 +1,9 @@
<template>
<a-card :bordered="false">
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :md="6" :sm="8">
<a-form layout="inline" @keyup.enter.native="searchQuery" >
<a-row :gutter="24" class='add-padding'>
<a-col :md="7" :sm="8">
<div class="box-title-text">
<div class="title-text" :title="$t('title')">
<span>{{$t('title')}}</span>
@@ -91,6 +91,14 @@
:selectedRowKeyS='selectedRowKeys' :rowId='rowId' :version='version'
:projectId='this.$route.query.id'></parameter-template-cody>
</a-modal>
<!-- 项目收集参数-->
<a-modal class="show-drawer" :title="titleTag" placement="right" width="700px" @close="drawerVisible = false"
:visible="drawerVisible" :footer="null">
<project-collection-parameters v-if='drawerVisible' @areaVisible='drawerhandleCancel' :templateTitle='templatetitle'
:selectedRowKeyS='selectedRowKeys' :rowId='rowId' :version='version' :url='url'
:projectId='this.$route.query.id'></project-collection-parameters>
</a-modal>
</a-card>
</template>
@@ -98,6 +106,7 @@
import ImportFile from '@/components/ImportFile/index'
import ParameterTemplateAdd from '../dialog/ParameterTemplateAdd'
import ParameterTemplateCody from '../dialog/ParameterTemplateCody'
import ProjectCollectionParameters from '../dialog/ProjectCollectionParameters'
import HistoricalVersion from '../dialog/historicalVersion'
import { getAction, postAction } from '../../../api/manage'
import Configure from '../dialog/configure'
@@ -112,7 +121,8 @@
ParameterTemplateAdd,
Configure,
HistoricalVersion,
ParameterTemplateCody
ParameterTemplateCody,
ProjectCollectionParameters
},
data() {
return {
@@ -189,7 +199,10 @@
itemId: '',
historicalVisible: false,
historicalRow: {}, // 历史版本得数据
areaVisibleCody: false // 复制参数清单得弹框
areaVisibleCody: false, // 复制参数清单得弹框
drawerVisible: false,
drawerVisibleitem: false,
titleTag: ''
}
},
mounted() {
@@ -237,6 +250,10 @@
this.areaVisible = val
this.getlist()
},
// 项目收集参数
drawerhandleCancel(val) {
this.drawerhandleCancel = val
},
searchQuery() {
this.pageNo = 1
this.getlist()
@@ -337,8 +354,8 @@
}
},
handleCody() {
console.log('复制')
// this.areaVisibleCody = true
this.drawerVisible = true
this.titleTag = '项目收集参数'
},
pageOnChange(page, pageSize) {
this.pageNo = page
@@ -489,6 +506,9 @@
cursor: pointer;
border-radius: 4px;
}
/deep/.add-padding{
margin-left: -89px!important;
}
</style>
<style>
.box-input .ant-select-selection {
@@ -55,7 +55,7 @@
:pagination='false'
:loading='loading'
:scroll='{x: 600}'
:rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: onGetCheckboxProps}'
:rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
@change='handleTableChange'>
</a-table>
<div class="page" style='display: flex;justify-content: flex-end;'>
@@ -185,21 +185,34 @@ export default {
handleCancel() {
this.$emit('areaVisible', false)
},
onGetCheckboxProps(val,value) {
console.log(val)
return({
props: {
// console.log(value,'value')
// // 全部默认禁止选中
// // disabled: true,
// // 某几项默认禁止选中(R: 当state等于1时)
disabled: val.id === 'ce879dab56a243fd99119553d3899e62'
// // 某几项默认选中(R: 当state等于1时)
// // defaultChecked: record.state == 1,
}
})
},
// onGetCheckboxProps(val,value) {
// let _val = {}
// // 新增时没有
// if(this.formData.id === undefined) {
// props : {}
// } else {
// // 编辑
// props : {
// disabled: val.id === 'ce879dab56a243fd99119553d3899e62'
// }
// }
// console.log(this.formData.id,'this.formData.id')
// console.log(val)
// return(_val
// // {
// // props: {
// //
// // // console.log(value,'value')
// // // // 全部默认禁止选中
// // // // disabled: true,
// // // // 某几项默认禁止选中(R: 当state等于1时)
// // disabled: val.id === 'ce879dab56a243fd99119553d3899e62'
// // // // 某几项默认选中(R: 当state等于1时)
// // // // defaultChecked: record.state == 1,
// // }
// // }
// )
// },
onSelectChange(selectedRowKeys, selectedRowKeysDate) {
this.selectedRowKeysDate = selectedRowKeysDate
this.selectedRowKeys = selectedRowKeys
@@ -0,0 +1,413 @@
<template>
<div class='diolag-area'>
<a-spin :spinning='spinLoading'>
<a-form-model
class='tag-module'
ref='ruleForm'
:model='formData'
:rules='rules'
:label-col='labelCol'
:wrapper-col='wrapperCol'
>
<a-row :gutter='24'>
<a-col :span='9'>
<a-form-model-item :label="$t('title')" prop='title'>
<a-input style='width: 420px'
:placeholder="$t('PleaseEnter')+$t('title')"
v-model='formData.title' />
</a-form-model-item>
</a-col>
<a-col :span='9'>
</a-col>
<a-col :span='6'>
</a-col>
</a-row>
<a-row :gutter='24'>
<a-col :span='9'>
<a-form-model-item :label="$t('entryName')" prop='entryName'>
<a-input style='width: 420px'
:placeholder="$t('PleaseEnter')+$t('entryName')"
v-model='formData.title' />
</a-form-model-item>
</a-col>
<a-col :span='9'>
</a-col>
<a-col :span='6' style='margin-top: 4px;'>
<a-button class='box-button' type='primary' @click='searchQuery'>{{ $t('query') }}</a-button>
<a-button class='box-button' style='margin-left: 8px' @click='searchReset'>{{ $t('reset') }}</a-button>
</a-col>
</a-row>
</a-form-model>
</a-spin>
<a-table
class='table-area'
ref='table'
size='middle'
rowKey='id'
:columns='columns'
:dataSource='areaTable'
:pagination='false'
:loading='loading'
:scroll='{x: 600}'
:rowSelection='{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}'
@change='handleTableChange'>
</a-table>
<div class="page" style='display: flex;justify-content: flex-end;'>
<a-pagination
:show-total="total => $t('total')+` ${total} `+$t('strip')"
show-quick-jumper
show-size-changer
:page-size.sync="pageSize"
:total="total"
@change="pageOnChange"
@showSizeChange="SizeChange"
/>
</div>
<div class='drawer-bootom-button'>
<a-button style='margin-right: .8rem' @click='handleCancel'>{{ $t('cancel') }}</a-button>
<a-button @click='handleSubmit' type='primary' :loading='confirmLoading'>{{ $t('submit') }}</a-button>
</div>
</div>
</template>
<script>
import { putAction, postAction, getAction, deleteAction } from '@/api/manage'
import axios from 'axios'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
name: 'diolagArea',
components: {},
data() {
return {
token:Vue.ls.get(ACCESS_TOKEN),
title: this.$t('add'),
total: 0,
selectedRowKeysDate: {},
loading: false,
editId: '',
columns: [
{
title: this.$t('entryName'),
dataIndex: 'region_dictText',
key: 'showArea',
align: 'center',
ellipsis: true
},
{
title: this.$t('ListTitle'),
align: 'center',
dataIndex: 'paramsTemplateName',
ellipsis: true
},
{
title: this.$t('parameterTemplate'),
align: 'center',
dataIndex: 'paramsTemplateName',
ellipsis: true
}
],
newVisible: false,
labelCol: {
xs: { span: 24 },
sm: { span: 7 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 14 }
},
form: {},
formData: {},
rules: {
title: [
{ required: true, message: this.$t('enterTitle'), trigger: 'blur' }
]
},
areaTable: [],
flag: false, //表单提交标识
spinLoading: false,
confirmLoading: false,
selectedRowKeys: [],
pageNo: 1,
pageSize: 10
}
},
props: {
version: {
type: Number,
default: '',
required: false
},
projectId: {
type: String,
default: '',
require: true
},
url: {
type: Object,
default: '',
require: true
}
},
mounted() {
this.loadData()
},
methods: {
pageOnChange(page, pageSize) {
this.pageNo = page
this.loadData()
},
SizeChange(page, pageSize) {
this.pageNo = 1
this.pageSize = pageSize
this.loadData()
},
loadData() {
// this.loading = true
// let params = {
// pageNo: this.pageNo,
// pageSize: this.pageSize,
// ...this.form
// }
// getAction(`params/manifest/getParamsTemplatePage`, params).then(res => {
// if (res.success) {
// this.areaTable = [...res.result.records]
// this.total = res.result.total
// }
// }).finally(() => {
// this.loading = false
// })
let _this = this
axios({
url: `/jero-boot/params/manifest/getAllManifest?projectName=${this.$route.query.id}`,
method: 'get',
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Access-Token':_this.token
}
})
.then( (res) =>{
if (res.data.success) {
_this.$message.success(res.data.result)
}else{
_this.$message.warning(res.data.result)
}
})
.catch( (error) =>{
console.log(error);
});
},
searchQuery() {
this.loadData()
},
searchReset() {
this.form = {}
this.loadData()
},
handleCancel() {
this.$emit('areaVisible', false)
},
// onGetCheckboxProps(val,value) {
// let _val = {}
// // 新增时没有
// if(this.formData.id === undefined) {
// props : {}
// } else {
// // 编辑
// props : {
// disabled: val.id === 'ce879dab56a243fd99119553d3899e62'
// }
// }
// console.log(this.formData.id,'this.formData.id')
// console.log(val)
// return(_val
// // {
// // props: {
// //
// // // console.log(value,'value')
// // // // 全部默认禁止选中
// // // // disabled: true,
// // // // 某几项默认禁止选中(R: 当state等于1时)
// // disabled: val.id === 'ce879dab56a243fd99119553d3899e62'
// // // // 某几项默认选中(R: 当state等于1时)
// // // // defaultChecked: record.state == 1,
// // }
// // }
// )
// },
onSelectChange(selectedRowKeys, selectedRowKeysDate) {
this.selectedRowKeysDate = selectedRowKeysDate
this.selectedRowKeys = selectedRowKeys
},
handleTableChange(val) {
console.log(',,,')
},
showModal() {
this.title = this.$t('add')
this.newVisible = true
this.form = {}
},
editData(edit) {
this.formData = {...edit}
this.selectedRowKeys = edit.paramsTemplateId.split(',')
},
//新增
handleSubmit() {
if (this.selectedRowKeys.length == 0) {
this.$message.warning(this.$t('pleaseSelectData'))
} else if (this.selectedRowKeys.length > 1) {
this.$message.warning(this.$t('OnlyOneSelected'))
} else {
this.$refs.ruleForm.validate(valid => {
if (valid) {
this.flag = true
this.spinLoading = true
// 新增編輯之前 判断 标题唯一
getAction(`params/manifest/verifyTitle?projectId=${this.$route.query.id}
&title=${this.formData.title}`, {})
.then(res => {
if (res.result) {
let postDate = {
title: this.formData.title,
paramsTemplateId: this.paramsTemplateId || this.selectedRowKeys[0],
paramsTemplatePublishVersion: this.version,
projectId: this.projectId
}
if (this.formData.id) {
//编辑
postDate = {
id : this.formData.id,
...postDate
}
postAction(`params/manifest/edit`, postDate).then(res => {
if (res.success) {
this.newVisible = false
this.$emit('areaVisible', false)
this.$message.success(this.$t('OperationSuccessful'))
} else {
this.$message.warning(res.message)
}
}
).finally(() => {
this.flag = false
this.spinLoading = false
this.newVisible = false
})
} else {
//新增
postAction(`params/manifest/add`, postDate).then(res => {
if (res.success) {
this.newVisible = false
this.$emit('areaVisible', false)
this.$message.success(this.$t('OperationSuccessful'))
} else {
this.$message.warning(res.message)
}
}
).finally(() => {
this.flag = false
this.spinLoading = false
this.newVisible = false
})
}
} else {
this.$message.warning(this.$t('changeTheTitle'))
this.spinLoading = false
}
}).finally(() => {
this.loading = false
})
} else {
return false
}
})
}
},
cancelModel() {
this.newVisible = false
this.$refs.ruleForm.resetFields()
},
//删除按钮
deleteArea(val) {
this.$confirm({
title: this.$t('confirmDeletion'),
content: '',
onOk:
async () => {
getAction(`tag/onlCgformArea/delete`, { id: val }).then((res) => {
if (res.success) {
this.$message.success(this.$t('OperationSuccessful'))
if (this.areaTable.length == 1 && this.queryParams.pageNo != 1) {
this.queryParams.pageNo = this.queryParams.pageNo - 1
}
this.loadData()
} else {
// this.$message.warning(res.message)
if (res.message == '该展示区域有关联数据,无法删除!') {
this.$message.warning(this.$t('noDelete'))
} else {
this.$message.warning(this.$t('operationFailed'))
}
}
})
}
})
},
// 编辑
},
watch: {
selectedRowKeyS(val) {
this.selectedRowKeys = val
}
}
}
</script>
<style lang='less' scoped>
@import '~@assets/less/common.less';
.diolag-area {
.table-area {
margin: 20px 0;
.action-edit {
margin-right: 10px;
}
}
.table-del {
color: red;
}
}
.drawer-bootom-button{
display: flex;
justify-content: center;
}
.Required {
color: red;
margin-right: 4px;
}
</style>
<style lang='less'>
.area-module {
.ant-modal-wrap {
.ant-modal {
.ant-modal-content {
.ant-modal-footer {
text-align: center;
}
}
}
}
}
</style>