Files
laws-sinotruk-client/src/views/documentTool/customComparison/modules/CustomComparisonCellDrawer.vue
T
2023-11-10 19:56:54 +08:00

117 lines
3.2 KiB
Vue

<template>
<a-drawer
:title="title"
:width="width"
placement="right"
:closable="true"
@close="handleCancel"
:visible="visible"
:maskClosable="false"
class="custom-drawer-style">
<div class="custom-drawer-style-scroll">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<!--文本-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('docTool.split.text')">
<a-input v-decorator="[`content`]"
:maxLength="50"
:disabled="!isEdit"
:placeholder="$t('pleaseEnter') + $t('docTool.split.text')"
@change="e => {e.target.value = (e.target.value + '').trim()}" />
</a-form-item>
<!--相关附件-->
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('docTool.customComparison.relatedAccessory')">
<j-upload return-id v-decorator="[`fileId`]" :disabled="!isEdit" v-if="isEdit" />
<file-echo :file-ids="model.fileId" v-else />
</a-form-item>
</a-form>
</a-spin>
</div>
<div class="custom-drawer-style-bottom-btn" v-if="isEdit">
<a-button @click="handleOk" type="primary" style="margin-bottom: 0;" :loading="confirmLoading">
{{ $t('preservation') }}
</a-button>
<a-button @click="handleCancel" style="margin-bottom: 0;" :loading="confirmLoading">{{ $t('close') }}</a-button>
</div>
</a-drawer>
</template>
<script>
import { editCell } from '../../../../api/documentToolApi'
import FileEcho from '../../../../components/FileEcho'
export default {
name: 'CustomComparisonCellDrawer',
components: { FileEcho },
data () {
return {
title: this.$t('edit'),
confirmLoading: false,
width: 600,
visible: false,
form: this.$form.createForm(this),
labelCol: {
xs: { span: 24 },
sm: { span: 4 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 }
},
model: {},
isEdit: true
}
},
methods: {
open (record, isEdit) {
this.visible = true
this.isEdit = isEdit
if (!this.isEdit) {
this.title = this.$t('details')
} else {
this.title = this.$t('edit')
}
this.model = Object.assign({}, record)
this.$nextTick(() => {
this.form.setFieldsValue(this.model)
})
},
handleOk () {
this.form.validateFields((errors, values) => {
if (!errors) {
this.confirmLoading = true
const formData = Object.assign(this.model, values)
editCell(formData).then(res => {
if (res.success) {
this.$message.success(res.message)
this.close()
this.$emit('ok')
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
}
})
},
handleCancel () {
this.close()
},
close () {
this.visible = false
this.model = {}
this.form.resetFields()
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
</style>