deliver-admin/src/views/social/modules/CreateForm.vue

<template>
  <div>
    <a-drawer
      :title="title"
      placement="right"
      :closable="true"
      @close="onClose"
      :visible="drawerVisible"
      :width="950">
      <a-form @submit="handleSubmit" :form="socialFrom" class="form">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="24" :md="12" :sm="24">
            <a-form-item label="code">
              <a-row class="form-row" :gutter="16" justify="space-between">
                <a-col :lg="22" :md="12" :sm="24">
                  <a-select placeholder="请选择code" v-show="!isAddCode" v-decorator="['code', { rules: [{ required: true, message: '请输入code', whitespace: true }] }]" >
                    <a-select-option value="byteblogs">ByteBlogs</a-select-option>
                    <a-select-option value="QQ">QQ</a-select-option>
                    <a-select-option value="CSDN">CSDN</a-select-option>
                    <a-select-option value="reward">打赏</a-select-option>
                    <a-select-option value="qrCode">二维码</a-select-option>
                    <a-select-option value="email">邮箱</a-select-option>
                    <a-select-option value="sifou">思否</a-select-option>
                    <a-select-option value="oschina">开源中国</a-select-option>
                  </a-select>
                  <a-input
                    placeholder="请输入code"
                    v-show="isAddCode"
                    v-decorator="['code', { rules: [{ required: true, message: '请输入code', whitespace: true }] }]"
                  />
                </a-col>
                <a-col :lg="2" :md="12" :sm="24">
                  <a-button
                    type="primary"
                    :icon="isAddCode?'select':'plus-circle'"
                    size="small"
                    shape="circle"
                    @click="handlerAddCode"></a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="16">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="展示类型">
              <a-radio-group v-decorator="['showType', { initialValue: 1 }]" @change="changeShowType">
                <a-radio :value="1">图片</a-radio>
                <a-radio :value="2">文本信息</a-radio>
                <a-radio :value="3">跳转链接</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="16">
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="是否启用">
              <a-radio-group v-decorator="['isEnabled', { initialValue: 0 }]">
                <a-radio :value="0">否</a-radio>
                <a-radio :value="1">是</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="是否主页社交信息">
              <a-radio-group v-decorator="['isHome', { initialValue: 0 }]">
                <a-radio :value="0">否</a-radio>
                <a-radio :value="1">是</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="16">
          <a-col :lg="24" :md="12" :sm="24">
            <a-form-item label="图标">
              <UpLoadImage
                @getImageUrl="getIcon"
                :placeholder="`请选择图标`"
                ref="handlerIconRef"
                :imageUrl="this.icon"
              ></UpLoadImage>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="16">
          <a-col :lg="24" :md="12" :sm="24">
            <a-form-item label="备注">
              <a-input
                placeholder="请输入备注"
                v-decorator="['remark']"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="16">
          <a-col :lg="24" :md="12" :sm="24">
            <a-form-item label="社交内容">
              <a-input v-show="!show" placeholder="请输入社交内容" v-decorator="['content']"/>
              <UpLoadImage
                v-show="show"
                @getImageUrl="getContent"
                ref="handlerContentRef"
                :placeholder="`请输入社交内容`"
                :imageUrl="this.content"
                :style="show?'':'display: none'"></UpLoadImage>
            </a-form-item>
          </a-col>
        </a-row>
        <div
          :style="{
            position: 'absolute',
            left: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: '10'
          }"
        >
          <a-button :style="{marginRight: '8px'}" @click="onClose">取消</a-button>
          <a-button type="primary" @click="handleSubmit">提交</a-button>
        </div>
      </a-form>
    </a-drawer>
  </div>
</template>

<script>
import { fetchSocial, updateSocial } from '@/api/social'
import { createSocial } from '../../../api/social'
import UpLoadImage from '@/components/UpLoadImageAndFillInput/UpLoadImage'
export default {
  name: 'CreateSocialForm',
  components: {
    UpLoadImage
  },
  props: {
    formType: {
      type: String,
      default: 'create'
    },
    visible: {
      type: Boolean
    }
  },
  data () {
    return {
      title: '新增社交信息',
      id: null,
      drawerVisible: false,
      socialFrom: this.$form.createForm(this, { name: 'create_social' }),
      content: null,
      icon: null,
      show: true,
      iconShow: true,
      isAddCode: false
    }
  },
  watch: {
    visible (val) {
      this.drawerVisible = val
    },
    formType (val) {
      this.title = (val === 'create' ? '新增社交信息' : '更新社交信息')
    }
  },
  beforeCreate () {},
  created () {},
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.socialFrom.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          const createParams = { ...values }
          if (createParams['showType'] === 1) {
            createParams['content'] = this.content
          }
          createParams['icon'] = this.icon

          if (this.formType === 'create') {
            createSocial(createParams)
              .then(res => {
                this.$notification.success({
                  message: '新增社交信息成功'
                })
                this.$emit('refreshTable')
              })
              .catch(err => {
                console.log(err)
              })
          } else {
            createParams['id'] = this.id
            updateSocial(createParams)
              .then(res => {
                this.$notification.success({
                  message: '编辑社交信息成功'
                })
                this.$emit('refreshTable')
              })
              .catch(err => {
              })
          }
          this.resetForm()
          this.drawerVisible = false
          this.$emit('resetData', false)
        }
      })
    },
    handleEdit (record) {
      this.id = record.id
      fetchSocial(record.id)
        .then(response => {
          const postForm = response.model
          if (postForm.showType === 1) {
            this.show = true
            this.$refs.handlerContentRef.handleUrl(postForm.content)
          } else {
            this.show = false
          }
          this.$refs.handlerIconRef.handleUrl(postForm.icon)
          this.socialFrom.resetFields()
          this.socialFrom = this.$form.createForm(this, {
            onFieldsChange: (_, changedFields) => {},
            mapPropsToFields: () => {
              return {
                content: this.$form.createFormField({
                  value: postForm.content
                }),
                showType: this.$form.createFormField({
                  value: postForm.showType
                }),
                remark: this.$form.createFormField({
                  value: postForm.remark
                }),
                icon: this.$form.createFormField({
                  value: postForm.icon
                }),
                isEnabled: this.$form.createFormField({
                  value: postForm.isEnabled
                }),
                isHome: this.$form.createFormField({
                  value: postForm.isHome
                }),
                code: this.$form.createFormField({
                  value: postForm.code
                })
              }
            },
            onValuesChange: (_, values) => {
              console.log(values)
            }
          })
        })
        .catch(err => {
          console.log(err)
        })
      this.drawerVisible = true
    },
    getContent (content) {
      this.content = content
    },
    getIcon (icon) {
      this.icon = icon
    },
    onClose () {
      this.resetForm()
      this.drawerVisible = false
      this.$emit('resetData', false)
    },
    resetForm () {
      this.show = true
      this.socialFrom.resetFields()
      this.$refs.handlerContentRef.handleUrl(null)
      this.$refs.handlerIconRef.handleUrl(null)
    },
    handleSelectChange (value) {
      console.log(`Selected: ${value}`)
    },
    changeShowType (e) {
      if (e.target.value === 1) {
        this.show = true
      } else {
        this.show = false
      }
    },
    handlerAddCode () {
      this.isAddCode = !this.isAddCode
    }
  }
}
</script>
<style>
  .edit-input {
    padding-right: 100px;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>