|
@@ -0,0 +1,410 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <zj-form-container ref="formRef" :formData="formData" :formRules="formRules">
|
|
|
+ <zj-form-module title="保险基础信息" label-width="110px" :formData="formData" :formItems="formItems" :column="3">
|
|
|
+ </zj-form-module>
|
|
|
+ <zj-form-module title="保单内容" label-width="100px" :formData="formData" :formItems="formItems2" :column="3">
|
|
|
+ </zj-form-module>
|
|
|
+ </zj-form-container>
|
|
|
+ <div v-if="type === 0 || type === 1">
|
|
|
+ <el-button size="mini" @click="submit">提交</el-button>
|
|
|
+ <el-button size="mini" @click="reset">重置</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { insureDetail, insureSave } from '@/api/InsuranceManagement.js'
|
|
|
+import { dateFormat } from '@/utils/util'
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ type: {
|
|
|
+ type: Number,
|
|
|
+ default: null
|
|
|
+ },
|
|
|
+ item: {
|
|
|
+ type: Object,
|
|
|
+ default: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ disabled: this.type === 2,
|
|
|
+ // 表单数据
|
|
|
+ formData: {
|
|
|
+ content: '',
|
|
|
+ typeName: '',
|
|
|
+ name: '',
|
|
|
+ number: '',
|
|
|
+ amount: '',
|
|
|
+ startTime: '',
|
|
|
+ endTime: '',
|
|
|
+ insureCompany: '',
|
|
|
+ isSync: '',
|
|
|
+ isEmail: '',
|
|
|
+ insureTax1: '',
|
|
|
+ insureTax2: '',
|
|
|
+ insureTax3: '',
|
|
|
+ insureTax4: '',
|
|
|
+ insureTax5: '',
|
|
|
+ insureTax6: '',
|
|
|
+ insureTax7: '',
|
|
|
+ insureTax8: '',
|
|
|
+ insureTax9: '',
|
|
|
+ insureTax10: '',
|
|
|
+ insureTax11: '',
|
|
|
+ insureTax12: '',
|
|
|
+ insureRangeList: [{ name: '', content: '' }]
|
|
|
+ },
|
|
|
+ formRules: {
|
|
|
+ content: [{ required: true, message: '请输入', trigger: 'blur' }],
|
|
|
+ typeName: [{ required: true, message: '请输入', trigger: 'blur' }],
|
|
|
+ name: [{ required: true, message: '请输入', trigger: 'blur' }],
|
|
|
+ number: [{ required: true, message: '请输入', trigger: 'blur' }],
|
|
|
+ amount: [{ required: true, message: '请输入', trigger: 'blur' }],
|
|
|
+ startTime: [{ required: true, message: '请输入', trigger: 'blur' }],
|
|
|
+ endTime: [{ required: true, message: '请输入', trigger: 'blur' }],
|
|
|
+ insureCompany: [{ required: true, message: '请输入', trigger: 'blur' }],
|
|
|
+ insureTax1: [
|
|
|
+ { required: true, message: '全部必填', trigger: 'blur' },
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请输入'))
|
|
|
+ } else if (value > 100 || value < 0) {
|
|
|
+ callback(new Error('百分比必须为0到100的数值'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ insureTaxKeys: [
|
|
|
+ 'insureTax1',
|
|
|
+ 'insureTax2',
|
|
|
+ 'insureTax3',
|
|
|
+ 'insureTax4',
|
|
|
+ 'insureTax5',
|
|
|
+ 'insureTax6',
|
|
|
+ 'insureTax7',
|
|
|
+ 'insureTax8',
|
|
|
+ 'insureTax9',
|
|
|
+ 'insureTax10',
|
|
|
+ 'insureTax11',
|
|
|
+ 'insureTax12'
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ formItems() {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ attributes: { disabled: this.disabled },
|
|
|
+ formItemAttributes: { label: '保险类型', prop: 'typeName' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ attributes: { disabled: this.disabled },
|
|
|
+ formItemAttributes: { label: '保单名称', prop: 'name' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ attributes: { disabled: this.disabled },
|
|
|
+ formItemAttributes: { label: '保单编号', prop: 'number' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ attributes: { disabled: this.disabled },
|
|
|
+ formItemAttributes: { label: '保单金额', prop: 'amount' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-date-picker',
|
|
|
+ attributes: { disabled: this.disabled, type: 'datetime', style: { width: '100%' } },
|
|
|
+ formItemAttributes: { label: '生效时间', prop: 'startTime' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-date-picker',
|
|
|
+ attributes: { disabled: this.disabled, type: 'datetime', style: { width: '100%' } },
|
|
|
+ formItemAttributes: { label: '失效时间', prop: 'endTime' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-radio',
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: '是',
|
|
|
+ value: 'YES'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '否',
|
|
|
+ value: 'NO'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ attributes: {
|
|
|
+ disabled: this.disabled
|
|
|
+ },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '是否发送邮件',
|
|
|
+ prop: 'isEmail',
|
|
|
+ rules: [{ required: true, message: '请选择', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-radio',
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ label: '是',
|
|
|
+ value: 'YES'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '否',
|
|
|
+ value: 'NO'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ attributes: {
|
|
|
+ disabled: this.disabled
|
|
|
+ },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '是否上传格力',
|
|
|
+ prop: 'isSync',
|
|
|
+ rules: [{ required: true, message: '请选择', trigger: 'blur' }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'slot-component',
|
|
|
+ md: 24,
|
|
|
+ attributes: { disabled: this.disabled },
|
|
|
+ formItemAttributes: { label: '保费率', prop: 'insureTax1' },
|
|
|
+ render: (h, { props }) => {
|
|
|
+ var { formData } = props
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <zj-table
|
|
|
+ columns={[
|
|
|
+ {
|
|
|
+ columnAttributes: {
|
|
|
+ label: '保险期间(个月)',
|
|
|
+ width: '110px'
|
|
|
+ },
|
|
|
+ render: (h, { row }) => {
|
|
|
+ return <div style="box-sizing: border-box;padding: 0 6px;">年费率百分比</div>
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ...(keys => {
|
|
|
+ var list = []
|
|
|
+ for (let i = 0; i < keys.length; i++) {
|
|
|
+ list.push({
|
|
|
+ columnAttributes: {
|
|
|
+ label: i + 1 + ''
|
|
|
+ },
|
|
|
+ render: (h, { row }) => {
|
|
|
+ return (
|
|
|
+ <el-form-item
|
|
|
+ prop={keys[i]}
|
|
|
+ rules={this.formRules.insureTax1}
|
|
|
+ label-width="0px"
|
|
|
+ style="margin:0"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ disabled={this.disabled}
|
|
|
+ type="number"
|
|
|
+ min={0}
|
|
|
+ max={100}
|
|
|
+ value={formData[keys[i]]}
|
|
|
+ onInput={val => {
|
|
|
+ formData[keys[i]] = val
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <span slot="suffix">%</span>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return list
|
|
|
+ })(this.insureTaxKeys)
|
|
|
+ ]}
|
|
|
+ tableData={[{}]}
|
|
|
+ ></zj-table>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'slot-component',
|
|
|
+ md: 24,
|
|
|
+ attributes: { disabled: this.disabled },
|
|
|
+ formItemAttributes: {
|
|
|
+ label: '保障范围',
|
|
|
+ prop: 'insureRangeList',
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ let bool = false
|
|
|
+ for (let item of value) {
|
|
|
+ if (!item.name || !item.content) {
|
|
|
+ bool = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (bool) {
|
|
|
+ callback(new Error('全部必填'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ render: (h, { props }) => {
|
|
|
+ var { formData } = props
|
|
|
+ return (
|
|
|
+ <zj-table
|
|
|
+ columns={[
|
|
|
+ ...(list => {
|
|
|
+ return list.map(item => {
|
|
|
+ return {
|
|
|
+ columnAttributes: {
|
|
|
+ label: item.name,
|
|
|
+ prop: item.prop,
|
|
|
+ width: item.prop === 'options' ? '80px' : ''
|
|
|
+ },
|
|
|
+ render: (h, { row, column, index }) => {
|
|
|
+ return column.columnAttributes.prop === 'options' ? (
|
|
|
+ this.type == 1 || this.type == 0 ? (
|
|
|
+ <div style="box-sizing: border-box;padding: 0 6px;">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ onClick={() => {
|
|
|
+ formData.insureRangeList.push({ name: '', content: '' })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 添加
|
|
|
+ </el-button>
|
|
|
+ {formData.insureRangeList.length > 1 ? (
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ onClick={() => {
|
|
|
+ formData.insureRangeList.splice(index, 1)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ ) : null}
|
|
|
+ </div>
|
|
|
+ ) : null
|
|
|
+ ) : (
|
|
|
+ <el-form-item label-width="0px" style="margin:0">
|
|
|
+ <el-input
|
|
|
+ disabled={this.disabled}
|
|
|
+ value={row[item.prop]}
|
|
|
+ onInput={val => {
|
|
|
+ row[item.prop] = val
|
|
|
+ }}
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })([
|
|
|
+ { name: '名称', prop: 'name' },
|
|
|
+ { name: '内容', prop: 'content' },
|
|
|
+ { name: '操作', prop: 'options' }
|
|
|
+ ])
|
|
|
+ ]}
|
|
|
+ tableData={formData.insureRangeList}
|
|
|
+ ></zj-table>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ formItems2() {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ name: 'slot-component',
|
|
|
+ md: 24,
|
|
|
+ attributes: { disabled: this.disabled },
|
|
|
+ formItemAttributes: { label: '保单内容', prop: 'content' },
|
|
|
+ render: (h, { props }) => {
|
|
|
+ var { formData } = props
|
|
|
+ return (
|
|
|
+ <v-quill-editor
|
|
|
+ disabled={this.disabled}
|
|
|
+ value={formData.content}
|
|
|
+ onInput={val => {
|
|
|
+ formData.content = val
|
|
|
+ }}
|
|
|
+ ></v-quill-editor>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'el-input',
|
|
|
+ md: 24,
|
|
|
+ attributes: { disabled: this.disabled },
|
|
|
+ formItemAttributes: { label: '承保公司', prop: 'insureCompany' }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 获取详情
|
|
|
+ if (this.type !== 0) {
|
|
|
+ insureDetail({
|
|
|
+ id: this.item.id
|
|
|
+ }).then(res => {
|
|
|
+ for (var key in res.data) {
|
|
|
+ if (~this.insureTaxKeys.indexOf(key)) {
|
|
|
+ this.formData[key] = res.data[key] * 100
|
|
|
+ } else if (key == 'insureRangeList') {
|
|
|
+ this.formData[key] = res?.data[key]?.length ? res.data[key] : [{ name: '', content: '' }]
|
|
|
+ } else {
|
|
|
+ this.formData[key] = res.data[key]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submit() {
|
|
|
+ this.$refs['formRef'].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ insureSave({
|
|
|
+ ...this.formData,
|
|
|
+ startTime: dateFormat('YYYY-mm-dd HH:MM:SS', new Date(this.formData.startTime)),
|
|
|
+ endTime: dateFormat('YYYY-mm-dd HH:MM:SS', new Date(this.formData.endTime)),
|
|
|
+ ...(() => {
|
|
|
+ var obj = {}
|
|
|
+ for (var key of this.insureTaxKeys) {
|
|
|
+ obj[key] = this.formData[key] / 100
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ })()
|
|
|
+ }).then(res => {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: `保存成功!`
|
|
|
+ })
|
|
|
+ this.$emit('success')
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ Object.assign(this.$data, this.$options.data())
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped></style>
|