取消analysis 模块中所有的弹窗点击蒙层关闭的功能

This commit is contained in:
任珮宇 2023-11-01 10:57:18 +08:00
parent d2838ebb12
commit cc8e027322
5 changed files with 577 additions and 619 deletions

View File

@ -138,7 +138,7 @@
</template> </template>
<!-- 底部按钮结束 --> <!-- 底部按钮结束 -->
</custom-modal> </custom-modal>
<a-modal v-model="visible_file" :width="1200" title="File List" @cancel="cancelFileModale"> <a-modal v-model="visible_file" :width="1200" title="File List" :maskClosable="false" @cancel="cancelFileModale">
<a-spin :spinning="loading_file"> <a-spin :spinning="loading_file">
<div style="position: relative; padding-bottom: 40px; height: 460px; overflow: hidden"> <div style="position: relative; padding-bottom: 40px; height: 460px; overflow: hidden">
<a-row type="flex" style="margin-bottom: 15px"> <a-row type="flex" style="margin-bottom: 15px">
@ -445,7 +445,9 @@ export default {
}) })
if (findFile) { if (findFile) {
const regExp = new RegExp(`(${otherFilePrefix}${fileType}_${qualify}_\\d{1,}\\.{0,}\\d{0,}).*?(\\.PHD)`) const regExp = new RegExp(
`(${otherFilePrefix}${fileType}_${qualify}_\\d{1,}\\.{0,}\\d{0,}).*?(\\.PHD)`
)
record[nameKeys[index]] = { record[nameKeys[index]] = {
file: findFile, file: findFile,
fileName: findFile.name.replace(regExp, '$1$2'), fileName: findFile.name.replace(regExp, '$1$2'),

View File

@ -3,185 +3,167 @@
:title="title" :title="title"
:width="800" :width="800"
:visible="visible" :visible="visible"
:maskClosable="false"
:confirmLoading="confirmLoading" :confirmLoading="confirmLoading"
@ok="handleOk" @ok="handleOk"
@cancel="handleCancel" @cancel="handleCancel"
:cancelButtonProps="{ props: { type: 'warn' } }" :cancelButtonProps="{ props: { type: 'warn' } }"
> >
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<a-form-model ref="form" :model="model" :rules="validatorRules"> <a-form-model ref="form" :model="model" :rules="validatorRules">
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="itemText" label="Name">
<a-form-model-item <a-input placeholder="Please Enter Name" v-model="model.itemText" />
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="itemText"
label="Name">
<a-input placeholder="Please Enter Name" v-model="model.itemText"/>
</a-form-model-item> </a-form-model-item>
<a-form-model-item <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="itemValue" label="Item Value">
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="itemValue"
label="Item Value">
<a-input placeholder="Please Enter Item Value" v-model="model.itemValue" /> <a-input placeholder="Please Enter Item Value" v-model="model.itemValue" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="Description">
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="Description">
<a-input v-model="model.description" /> <a-input v-model="model.description" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="Sort">
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="Sort">
<a-input-number :min="1" v-model="model.sortOrder" /> <a-input-number :min="1" v-model="model.sortOrder" />
The Smaller The Value, the More Advanced The Smaller The Value, the More Advanced
</a-form-model-item> </a-form-model-item>
<a-form-model-item <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="Enable" hasFeedback>
:labelCol="labelCol" <a-switch checkedChildren="Enable" unCheckedChildren="Disable" @change="onChose" v-model="visibleCheck" />
:wrapperCol="wrapperCol"
label="Enable"
hasFeedback>
<a-switch checkedChildren="Enable" unCheckedChildren="Disable" @change="onChose" v-model="visibleCheck"/>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</a-spin> </a-spin>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import pick from 'lodash.pick' import pick from 'lodash.pick'
import {addDictItem, editDictItem} from '@/api/api' import { addDictItem, editDictItem } from '@/api/api'
import { getAction } from '@api/manage' import { getAction } from '@api/manage'
export default { export default {
name: "DictItemModal", name: 'DictItemModal',
data() { data() {
return { return {
title: "操作", title: '操作',
visible: false, visible: false,
visibleCheck: true, visibleCheck: true,
model: {}, model: {},
dictId: "", dictId: '',
status: 1, status: 1,
labelCol: { labelCol: {
xs: {span: 24}, xs: { span: 24 },
sm: {span: 5}, sm: { span: 5 },
},
wrapperCol: {
xs: {span: 24},
sm: {span: 16},
},
confirmLoading: false,
validatorRules: {
itemText: [{required: true, message: 'Please Enter Name'}],
itemValue: [{required: true, message: 'Please Enter Item Value'},{validator: this.validateItemValue}],
},
}
},
created() {
},
methods: {
add(dictId) {
this.dictId = dictId;
//
this.edit({sortOrder:1,status:1});
}, },
edit(record) { wrapperCol: {
if (record.id) { xs: { span: 24 },
this.dictId = record.dictId; sm: { span: 16 },
}
this.status = record.status;
this.visibleCheck = (record.status == 1) ? true : false;
this.model = Object.assign({}, record);
this.model.dictId = this.dictId;
this.model.status = this.status;
this.visible = true;
}, },
onChose(checked) { confirmLoading: false,
if (checked) { validatorRules: {
this.status = 1; itemText: [{ required: true, message: 'Please Enter Name' }],
this.visibleCheck = true; itemValue: [{ required: true, message: 'Please Enter Item Value' }, { validator: this.validateItemValue }],
} else {
this.status = 0;
this.visibleCheck = false;
}
}, },
//
handleOk() {
const that = this;
//
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
this.model.itemText = (this.model.itemText || '').trim()
this.model.itemValue = (this.model.itemValue || '').trim()
this.model.description = (this.model.description || '').trim()
this.model.status = this.status;
let obj;
if (!this.model.id) {
obj = addDictItem(this.model);
} else {
obj = editDictItem(this.model);
}
obj.then((res) => {
if (res.success) {
that.$message.success(res.message);
that.$emit('ok');
} else {
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
that.close();
})
}else{
return false;
}
})
},
//
handleCancel() {
this.close();
},
close() {
this.$emit('close');
this.visible = false;
this.$refs.form.resetFields();
},
validateItemValue(rule, value, callback){
let param = {
itemValue:value,
dictId:this.dictId,
}
if(this.model.id){
param.id = this.model.id
}
if(value){
let reg=new RegExp("[`~!@#$^&*()=|{}'.<>《》/?!¥()—【】‘;:”“。,、?]")
if(reg.test(value)){
callback("Cannot Have Special Charactors")
}else{
//update--begin--autor:lvdandan-----date:20201203------forJT-27 -
getAction("/sys/dictItem/dictItemCheck",param).then((res)=>{
if(res.success){
callback()
}else{
callback(res.message);
}
});
//update--end--autor:lvdandan-----date:20201203------forJT-27 -
}
}else{
callback()
}
}
} }
} },
created() {},
methods: {
add(dictId) {
this.dictId = dictId
//
this.edit({ sortOrder: 1, status: 1 })
},
edit(record) {
if (record.id) {
this.dictId = record.dictId
}
this.status = record.status
this.visibleCheck = record.status == 1 ? true : false
this.model = Object.assign({}, record)
this.model.dictId = this.dictId
this.model.status = this.status
this.visible = true
},
onChose(checked) {
if (checked) {
this.status = 1
this.visibleCheck = true
} else {
this.status = 0
this.visibleCheck = false
}
},
//
handleOk() {
const that = this
//
this.$refs.form.validate((valid) => {
if (valid) {
that.confirmLoading = true
this.model.itemText = (this.model.itemText || '').trim()
this.model.itemValue = (this.model.itemValue || '').trim()
this.model.description = (this.model.description || '').trim()
this.model.status = this.status
let obj
if (!this.model.id) {
obj = addDictItem(this.model)
} else {
obj = editDictItem(this.model)
}
obj
.then((res) => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
} else {
that.$message.warning(res.message)
}
})
.finally(() => {
that.confirmLoading = false
that.close()
})
} else {
return false
}
})
},
//
handleCancel() {
this.close()
},
close() {
this.$emit('close')
this.visible = false
this.$refs.form.resetFields()
},
validateItemValue(rule, value, callback) {
let param = {
itemValue: value,
dictId: this.dictId,
}
if (this.model.id) {
param.id = this.model.id
}
if (value) {
let reg = new RegExp("[`~!@#$^&*()=|{}'.<>《》/?!¥()—【】‘;:”“。,、?]")
if (reg.test(value)) {
callback('Cannot Have Special Charactors')
} else {
//update--begin--autor:lvdandan-----date:20201203------forJT-27 -
getAction('/sys/dictItem/dictItemCheck', param).then((res) => {
if (res.success) {
callback()
} else {
callback(res.message)
}
})
//update--end--autor:lvdandan-----date:20201203------forJT-27 -
}
} else {
callback()
}
},
},
}
</script> </script>

View File

@ -3,6 +3,7 @@
:title="title" :title="title"
:width="600" :width="600"
:visible="visible" :visible="visible"
:maskClosable="false"
:confirmLoading="confirmLoading" :confirmLoading="confirmLoading"
@ok="handleOk" @ok="handleOk"
@cancel="handleCancel" @cancel="handleCancel"
@ -10,141 +11,125 @@
> >
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<a-form-model ref="form" :model="model" :rules="validatorRules"> <a-form-model ref="form" :model="model" :rules="validatorRules">
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dictName" required label="Dict Name">
<a-form-model-item <a-input placeholder="Please Enter Dict Name" v-model="model.dictName" />
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="dictName"
required
label="Dict Name">
<a-input placeholder="Please Enter Dict Name" v-model="model.dictName"/>
</a-form-model-item> </a-form-model-item>
<a-form-model-item <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dictCode" required label="Dict Code">
:labelCol="labelCol" <a-input placeholder="Please Enter Dict Code" v-model="model.dictCode" />
:wrapperCol="wrapperCol"
prop="dictCode"
required
label="Dict Code">
<a-input placeholder="Please Enter Dict Code" v-model="model.dictCode"/>
</a-form-model-item> </a-form-model-item>
<a-form-model-item <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="Description">
:labelCol="labelCol" <a-input v-model="model.description" />
:wrapperCol="wrapperCol"
label="Description">
<a-input v-model="model.description"/>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</a-spin> </a-spin>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import pick from 'lodash.pick' import pick from 'lodash.pick'
import { addDict, editDict, duplicateCheck } from '@/api/api' import { addDict, editDict, duplicateCheck } from '@/api/api'
export default { export default {
name: 'DictModal', name: 'DictModal',
data() { data() {
return { return {
value: 1, value: 1,
title: '操作', title: '操作',
visible: false, visible: false,
model: {}, model: {},
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 5 } sm: { span: 5 },
}, },
wrapperCol: { wrapperCol: {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 16 } sm: { span: 16 },
}, },
confirmLoading: false, confirmLoading: false,
validatorRules: { validatorRules: {
dictName: [{ required: true, message: 'Please Enter Dict Name' }], dictName: [{ required: true, message: 'Please Enter Dict Name' }],
dictCode: [ dictCode: [{ required: true, message: 'Please Enter Dict Code' }, { validator: this.validateDictCode }],
{ required: true, message: 'Please Enter Dict Code' }, },
{ validator: this.validateDictCode }] }
} },
created() {},
methods: {
validateDictCode(rule, value, callback) {
//
var params = {
tableName: 'sys_dict',
fieldName: 'dict_code',
fieldVal: value,
dataId: this.model.id,
} }
}, duplicateCheck(params).then((res) => {
created() { if (res.success) {
}, callback()
methods: {
validateDictCode(rule, value, callback) {
//
var params = {
tableName: 'sys_dict',
fieldName: 'dict_code',
fieldVal: value,
dataId: this.model.id
}
duplicateCheck(params).then((res) => {
if (res.success) {
callback()
} else {
callback(res.message)
}
})
},
handleChange(value) {
this.model.status = value
},
add() {
this.edit({})
},
edit(record) {
if (record.id) {
this.visiblekey = true
} else { } else {
this.visiblekey = false callback(res.message)
} }
this.model = Object.assign({}, record) })
this.visible = true },
}, handleChange(value) {
// this.model.status = value
handleOk() { },
const that = this add() {
// this.edit({})
this.$refs.form.validate(valid => { },
if (valid) { edit(record) {
that.confirmLoading = true if (record.id) {
this.model.dictName = (this.model.dictName || '').trim() this.visiblekey = true
this.model.dictCode = (this.model.dictCode || '').trim() } else {
this.model.description = (this.model.description || '').trim() this.visiblekey = false
let obj }
if (!this.model.id) { this.model = Object.assign({}, record)
obj = addDict(this.model) this.visible = true
} else { },
obj = editDict(this.model) //
} handleOk() {
obj.then((res) => { const that = this
//
this.$refs.form.validate((valid) => {
if (valid) {
that.confirmLoading = true
this.model.dictName = (this.model.dictName || '').trim()
this.model.dictCode = (this.model.dictCode || '').trim()
this.model.description = (this.model.description || '').trim()
let obj
if (!this.model.id) {
obj = addDict(this.model)
} else {
obj = editDict(this.model)
}
obj
.then((res) => {
if (res.success) { if (res.success) {
that.$message.success(res.message) that.$message.success(res.message)
that.$emit('ok') that.$emit('ok')
} else { } else {
that.$message.warning(res.message) that.$message.warning(res.message)
} }
}).finally(() => { })
.finally(() => {
that.confirmLoading = false that.confirmLoading = false
that.close() that.close()
}) })
}else{ } else {
return false; return false
} }
}) })
}, },
// //
handleCancel() { handleCancel() {
this.close() this.close()
}, },
close() { close() {
this.$emit('close') this.$emit('close')
this.visible = false this.visible = false
this.$refs.form.resetFields(); this.$refs.form.resetFields()
} },
} },
} }
</script> </script>

View File

@ -3,171 +3,161 @@
:title="title" :title="title"
:width="1000" :width="1000"
:visible="visible" :visible="visible"
:maskClosable="false"
:confirmLoading="confirmLoading" :confirmLoading="confirmLoading"
@ok="handleOk" @ok="handleOk"
@cancel="handleCancel" @cancel="handleCancel"
:cancelButtonProps="{ props: { type: 'warn' } }" :cancelButtonProps="{ props: { type: 'warn' } }"
cancelText="Cancel"> cancelText="Cancel"
>
<a-spin :spinning="confirmLoading"> <a-spin :spinning="confirmLoading">
<a-form-model ref="form" :model="model" :rules="validatorRules"> <a-form-model ref="form" :model="model" :rules="validatorRules">
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ruleName" label="Rule Name">
<a-form-model-item <a-input placeholder="Please Enter Rule Name" v-model="model.ruleName" />
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="ruleName"
label="Rule Name">
<a-input placeholder="Please Enter Rule Name" v-model="model.ruleName"/>
</a-form-model-item> </a-form-model-item>
<a-form-model-item <a-form-model-item
v-show="showRuleColumn" v-show="showRuleColumn"
:labelCol="labelCol" :labelCol="labelCol"
:wrapperCol="wrapperCol" :wrapperCol="wrapperCol"
prop="ruleColumn" prop="ruleColumn"
label="Rule Column"> label="Rule Column"
<a-input placeholder="Please Enter Rule Column" v-model.trim="model.ruleColumn"/> >
<a-input placeholder="Please Enter Rule Column" v-model.trim="model.ruleColumn" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ruleConditions" label="Rule Conditions">
:labelCol="labelCol" <j-dict-select-tag
:wrapperCol="wrapperCol" @input="handleChangeRuleCondition"
prop="ruleConditions" v-model="model.ruleConditions"
label="Rule Conditions"> placeholder="Please Enter Rule Conditions"
<j-dict-select-tag @input="handleChangeRuleCondition" v-model="model.ruleConditions" placeholder="Please Enter Rule Conditions" dictCode="rule_conditions"/> dictCode="rule_conditions"
/>
</a-form-model-item> </a-form-model-item>
<a-form-model-item <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ruleValue" label="Rule Value">
:labelCol="labelCol" <a-input placeholder="Please Enter Rule Value" v-model="model.ruleValue" />
:wrapperCol="wrapperCol"
prop="ruleValue"
label="Rule Value">
<a-input placeholder="Please Enter Rule Value" v-model="model.ruleValue"/>
</a-form-model-item> </a-form-model-item>
<a-form-model-item <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="Status">
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label="Status">
<a-radio-group buttonStyle="solid" v-model="model.status"> <a-radio-group buttonStyle="solid" v-model="model.status">
<a-radio-button value="1">Valid</a-radio-button> <a-radio-button value="1">Valid</a-radio-button>
<a-radio-button value="0">Invalid</a-radio-button> <a-radio-button value="0">Invalid</a-radio-button>
</a-radio-group> </a-radio-group>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</a-spin> </a-spin>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { httpAction } from '@/api/manage' import { httpAction } from '@/api/manage'
export default { export default {
name: 'PermissionDataRuleModal', name: 'PermissionDataRuleModal',
data() { data() {
return { return {
queryParam: {}, queryParam: {},
title: '操作', title: '操作',
visible: false, visible: false,
model: {}, model: {},
ruleConditionList: [], ruleConditionList: [],
labelCol: { labelCol: {
xs: {span: 24}, xs: { span: 24 },
sm: {span: 5} sm: { span: 5 },
}, },
wrapperCol: { wrapperCol: {
xs: {span: 24}, xs: { span: 24 },
sm: {span: 16} sm: { span: 16 },
}, },
confirmLoading: false, confirmLoading: false,
permissionId: '', permissionId: '',
validatorRules: { validatorRules: {
ruleConditions: [{required: true, message: '请选择条件!'}], ruleConditions: [{ required: true, message: '请选择条件!' }],
ruleName:[{required: true, message: '请输入规则名称!'}], ruleName: [{ required: true, message: '请输入规则名称!' }],
ruleValue: [{required: true, message: '请输入规则值!'}], ruleValue: [{ required: true, message: '请输入规则值!' }],
ruleColumn: [] ruleColumn: [],
}, },
url: { url: {
list: '/sys/dictItem/list', list: '/sys/dictItem/list',
add: '/sys/permission/addPermissionRule', add: '/sys/permission/addPermissionRule',
edit: '/sys/permission/editPermissionRule' edit: '/sys/permission/editPermissionRule',
}, },
showRuleColumn:true showRuleColumn: true,
}
},
created() {},
methods: {
add(permId) {
this.permissionId = permId
//
this.edit({ status: '1' })
},
edit(record) {
this.model = Object.assign({}, record)
if (record.permissionId) {
this.model.permissionId = record.permissionId
} else {
this.model.permissionId = this.permissionId
} }
this.visible = true
this.initRuleCondition()
}, },
created() { close() {
this.$emit('close')
this.visible = false
this.$refs.form.resetFields()
}, },
methods: { handleOk() {
add(permId) { const that = this
this.permissionId = permId //
// this.$refs.form.validate((valid) => {
this.edit({status:'1'}) if (valid) {
}, that.confirmLoading = true
edit(record) { let httpurl = ''
this.model = Object.assign({}, record) let method = ''
if (record.permissionId) { if (!this.model.id) {
this.model.permissionId = record.permissionId httpurl += this.url.add
} else { method = 'post'
this.model.permissionId = this.permissionId } else {
} httpurl += this.url.edit
this.visible = true method = 'put'
this.initRuleCondition() }
}, httpAction(httpurl, this.model, method)
close() { .then((res) => {
this.$emit('close')
this.visible = false
this.$refs.form.resetFields()
},
handleOk() {
const that = this
//
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true
let httpurl = ''
let method = ''
if (!this.model.id) {
httpurl += this.url.add
method = 'post'
} else {
httpurl += this.url.edit
method = 'put'
}
httpAction(httpurl, this.model, method).then((res) => {
if (res.success) { if (res.success) {
that.$message.success(res.message) that.$message.success(res.message)
that.$emit('ok') that.$emit('ok')
} else { } else {
that.$message.warning(res.message) that.$message.warning(res.message)
} }
}).finally(() => { })
.finally(() => {
that.confirmLoading = false that.confirmLoading = false
that.close() that.close()
}) })
}else{ } else {
return false; return false
}
})
},
handleCancel() {
this.close()
},
initRuleCondition(){
if(this.model.ruleConditions && this.model.ruleConditions=='USE_SQL_RULES'){
this.showRuleColumn = false
}else{
this.showRuleColumn = true
}
},
handleChangeRuleCondition(val){
if(val=='USE_SQL_RULES'){
this.model.ruleColumn=''
this.showRuleColumn = false
}else{
this.showRuleColumn = true
} }
})
},
handleCancel() {
this.close()
},
initRuleCondition() {
if (this.model.ruleConditions && this.model.ruleConditions == 'USE_SQL_RULES') {
this.showRuleColumn = false
} else {
this.showRuleColumn = true
} }
} },
} handleChangeRuleCondition(val) {
if (val == 'USE_SQL_RULES') {
this.model.ruleColumn = ''
this.showRuleColumn = false
} else {
this.showRuleColumn = true
}
},
},
}
</script> </script>
<style scoped> <style scoped>
</style> </style>

View File

@ -5,29 +5,27 @@
:title="title" :title="title"
:width="1000" :width="1000"
:visible="visible" :visible="visible"
:maskClosable="false"
@ok="handleOk" @ok="handleOk"
@cancel="handleCancel" @cancel="handleCancel"
:cancelButtonProps="{ props: { type: 'warn' } }" :cancelButtonProps="{ props: { type: 'warn' } }"
cancelText="Cancel"> cancelText="Cancel"
>
<!-- 查询区域 --> <!-- 查询区域 -->
<div class="table-page-search-wrapper"> <div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery"> <a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24"> <a-row :gutter="24">
<a-col :span="10"> <a-col :span="10">
<a-form-item label="User Name"> <a-form-item label="User Name">
<a-input v-model="queryParam.username"></a-input> <a-input v-model="queryParam.username"></a-input>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :span="8"> <a-col :span="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery" icon="search">Search</a-button> <a-button type="primary" @click="searchQuery" icon="search">Search</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">Reset</a-button> <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">Reset</a-button>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
</div> </div>
@ -42,248 +40,249 @@
:pagination="ipagination" :pagination="ipagination"
:loading="loading" :loading="loading"
:scroll="{ y: 240 }" :scroll="{ y: 240 }"
:rowSelection="{selectedRowKeys: selectedRowKeys,onSelectAll:onSelectAll,onSelect:onSelect,onChange: onSelectChange}" :rowSelection="{
@change="handleTableChange"> selectedRowKeys: selectedRowKeys,
onSelectAll: onSelectAll,
onSelect: onSelect,
onChange: onSelectChange,
}"
@change="handleTableChange"
>
</a-table> </a-table>
</div> </div>
<!-- table区域-end --> <!-- table区域-end -->
</a-modal> </a-modal>
</div> </div>
</template> </template>
<script> <script>
import {filterObj} from '@/utils/util' import { filterObj } from '@/utils/util'
import {getAction} from '@/api/manage' import { getAction } from '@/api/manage'
export default { export default {
name: "SelectUserModal", name: 'SelectUserModal',
data() { data() {
return { return {
title: "Add From List", title: 'Add From List',
names: [], names: [],
visible: false, visible: false,
placement: 'right', placement: 'right',
description: '', description: '',
// //
queryParam: {}, queryParam: {},
// //
columns1: [ columns1: [
{ {
title: '#', title: '#',
dataIndex: '', dataIndex: '',
key: 'rowIndex', key: 'rowIndex',
width: 50, width: 50,
align: "center", align: 'center',
customRender: function (t, r, index) { customRender: function (t, r, index) {
return parseInt(index) + 1; return parseInt(index) + 1
}
}, },
{
title: 'User Name',
align: "center",
width: 100,
dataIndex: 'username'
},
{
title: 'Real Name',
align: "center",
width: 100,
dataIndex: 'realname'
},
{
title: 'Gender',
align: "center",
width: 100,
dataIndex: 'sex_dictText'
},
{
title: 'Phone',
align: "center",
width: 100,
dataIndex: 'phone'
},
{
title: 'Org',
align: "center",
width: 150,
dataIndex: 'orgCode'
}
],
columns2: [
{
title: 'User Name',
align: "center",
dataIndex: 'username',
},
{
title: 'Real Name',
align: "center",
dataIndex: 'realname',
},
{
title: 'Action',
dataIndex: 'action',
align: "center",
width: 100,
scopedSlots: {customRender: 'action'},
}
],
//
dataSource1: [],
dataSource2: [],
//
ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
const { current, pageSize } = this.ipagination
return `Total ${total} items Page ${current} / ${Math.ceil(total / pageSize)}`
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
}, },
isorter: { {
column: 'createTime', title: 'User Name',
order: 'desc', align: 'center',
width: 100,
dataIndex: 'username',
}, },
loading: false, {
selectedRowKeys: [], title: 'Real Name',
selectedRows: [], align: 'center',
url: { width: 100,
list: "/sys/user/list", dataIndex: 'realname',
} },
} {
}, title: 'Gender',
created() { align: 'center',
this.loadData(); width: 100,
}, dataIndex: 'sex_dictText',
methods: { },
searchQuery() { {
this.loadData(1); title: 'Phone',
align: 'center',
width: 100,
dataIndex: 'phone',
},
{
title: 'Org',
align: 'center',
width: 150,
dataIndex: 'orgCode',
},
],
columns2: [
{
title: 'User Name',
align: 'center',
dataIndex: 'username',
},
{
title: 'Real Name',
align: 'center',
dataIndex: 'realname',
},
{
title: 'Action',
dataIndex: 'action',
align: 'center',
width: 100,
scopedSlots: { customRender: 'action' },
},
],
//
dataSource1: [],
dataSource2: [],
//
ipagination: {
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
const { current, pageSize } = this.ipagination
return `Total ${total} items Page ${current} / ${Math.ceil(total / pageSize)}`
},
showQuickJumper: true,
showSizeChanger: true,
total: 0,
}, },
searchReset() { isorter: {
this.queryParam = {}; column: 'createTime',
this.loadData(1); order: 'desc',
}, },
handleCancel() { loading: false,
this.visible = false; selectedRowKeys: [],
selectedRows: [],
url: {
list: '/sys/user/list',
}, },
handleOk() {
this.dataSource2 = this.selectedRowKeys;
console.log("data:" + this.dataSource2);
this.$emit("selectFinished", this.dataSource2);
this.visible = false;
},
add() {
this.visible = true;
},
loadData(arg) {
// 1
if (arg === 1) {
this.ipagination.current = 1;
}
var params = this.getQueryParams();//
getAction(this.url.list, params).then((res) => {
if (res.success) {
this.dataSource1 = res.result.records;
this.ipagination.total = res.result.total;
}
})
},
getQueryParams() {
var param = Object.assign({}, this.queryParam, this.isorter);
param.field = this.getQueryField();
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
return filterObj(param);
},
getQueryField() {
//TODO
},
onSelectAll(selected, selectedRows, changeRows) {
if (selected === true) {
for (var a = 0; a < changeRows.length; a++) {
this.dataSource2.push(changeRows[a]);
}
} else {
for (var b = 0; b < changeRows.length; b++) {
this.dataSource2.splice(this.dataSource2.indexOf(changeRows[b]), 1);
}
}
// console.log(selected, selectedRows, changeRows);
},
onSelect(record, selected) {
if (selected === true) {
this.dataSource2.push(record);
} else {
var index = this.dataSource2.indexOf(record);
//console.log();
if (index >= 0) {
this.dataSource2.splice(this.dataSource2.indexOf(record), 1);
}
}
},
onSelectChange(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys;
this.selectionRows = selectedRows;
},
onClearSelected() {
this.selectedRowKeys = [];
this.selectionRows = [];
},
handleDelete: function (record) {
this.dataSource2.splice(this.dataSource2.indexOf(record), 1);
},
handleTableChange(pagination, filters, sorter) {
//
console.log(sorter);
//TODO
if (Object.keys(sorter).length > 0) {
this.isorter.column = sorter.field;
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
}
this.ipagination = pagination;
this.loadData();
}
} }
} },
created() {
this.loadData()
},
methods: {
searchQuery() {
this.loadData(1)
},
searchReset() {
this.queryParam = {}
this.loadData(1)
},
handleCancel() {
this.visible = false
},
handleOk() {
this.dataSource2 = this.selectedRowKeys
console.log('data:' + this.dataSource2)
this.$emit('selectFinished', this.dataSource2)
this.visible = false
},
add() {
this.visible = true
},
loadData(arg) {
// 1
if (arg === 1) {
this.ipagination.current = 1
}
var params = this.getQueryParams() //
getAction(this.url.list, params).then((res) => {
if (res.success) {
this.dataSource1 = res.result.records
this.ipagination.total = res.result.total
}
})
},
getQueryParams() {
var param = Object.assign({}, this.queryParam, this.isorter)
param.field = this.getQueryField()
param.pageNo = this.ipagination.current
param.pageSize = this.ipagination.pageSize
return filterObj(param)
},
getQueryField() {
//TODO
},
onSelectAll(selected, selectedRows, changeRows) {
if (selected === true) {
for (var a = 0; a < changeRows.length; a++) {
this.dataSource2.push(changeRows[a])
}
} else {
for (var b = 0; b < changeRows.length; b++) {
this.dataSource2.splice(this.dataSource2.indexOf(changeRows[b]), 1)
}
}
// console.log(selected, selectedRows, changeRows);
},
onSelect(record, selected) {
if (selected === true) {
this.dataSource2.push(record)
} else {
var index = this.dataSource2.indexOf(record)
//console.log();
if (index >= 0) {
this.dataSource2.splice(this.dataSource2.indexOf(record), 1)
}
}
},
onSelectChange(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectionRows = selectedRows
},
onClearSelected() {
this.selectedRowKeys = []
this.selectionRows = []
},
handleDelete: function (record) {
this.dataSource2.splice(this.dataSource2.indexOf(record), 1)
},
handleTableChange(pagination, filters, sorter) {
//
console.log(sorter)
//TODO
if (Object.keys(sorter).length > 0) {
this.isorter.column = sorter.field
this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
}
this.ipagination = pagination
this.loadData()
},
},
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.ant-card-body .table-operator { .ant-card-body .table-operator {
margin-bottom: 18px; margin-bottom: 18px;
} }
.ant-table-tbody .ant-table-row td { .ant-table-tbody .ant-table-row td {
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
} }
.anty-row-operator button { .anty-row-operator button {
margin: 0 5px margin: 0 5px;
} }
.ant-btn-danger { .ant-btn-danger {
background-color: #ffffff background-color: #ffffff;
} }
.ant-modal-cust-warp { .ant-modal-cust-warp {
height: 100% height: 100%;
} }
.ant-modal-cust-warp .ant-modal-body { .ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important; height: calc(100% - 110px) !important;
overflow-y: auto overflow-y: auto;
} }
.ant-modal-cust-warp .ant-modal-content { .ant-modal-cust-warp .ant-modal-content {
height: 90% !important; height: 90% !important;
overflow-y: hidden overflow-y: hidden;
} }
</style> </style>