Files
income_payments_client/src/views/dataNetworkDiskManagement/committee/modules/CommitteeModule.vue
T
2021-10-12 10:12:26 +08:00

142 lines
3.7 KiB
Vue

<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-row>
<a-col>
<a-form-item label="分标委名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-input placeholder="请输入分标委名称"
v-decorator="['name',validatorRules.name]"
:maxLength='50'
@change="e => {e.target.value = (e.target.value + '').trim()}"></a-input>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col>
<a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-textarea
placeholder="请输入备注"
v-decorator="['remarks']"
:auto-size="{ minRows: 3, maxRows: 6 }"
:maxLength='200'
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
</j-modal>
</template>
<script>
import pick from 'lodash.pick'
import { httpAction } from '@api/manage'
export default {
name: 'CommitteeModule',
data() {
return {
title: '操作',
width: 800,
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
model: {},
labelCol: {
xs: { span: 24 },
sm: { span: 3 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 21 }
},
validatorRules: {
name: {
rules: [{ required: true, message: '请输入分标委名称' }],
validateTrigger: 'blur'
}
},
url: {
add: '/payCaseCommittee/payCaseCommittee/add',
edit: '/payCaseCommittee/payCaseCommittee/edit'
}
}
},
methods: {
add() {
this.edit({})
},
edit(record) {
this.form.resetFields()
this.model = Object.assign({}, record)
this.visible = true
this.$nextTick(() => {
this.form.setFieldsValue(pick(this.model, 'name', 'remark'))
})
},
close() {
this.$emit('close')
this.visible = false
},
handleOk() {
if (this.confirmLoading) {
return
}
this.confirmLoading = true
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
let httpurl = ''
let method = 'post'
if (!this.model.id) {
httpurl += this.url.add
} else {
httpurl += this.url.edit
}
console.log(values, '============')
const formData = Object.assign(this.model, values)
console.log('表单提交数据', formData)
httpAction(httpurl, formData, method).then((res) => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
that.close()
} else {
that.$message.warning(res.message)
}
}).finally(() => {
setTimeout(() => {
this.confirmLoading = false
}, 1000)
})
} else {
this.confirmLoading = false
}
})
},
handleCancel() {
this.close()
},
// 下拉框的搜索
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
)
},
}
}
</script>
<style scoped>
</style>