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

<template>
  <div>
    <a-drawer
      :title="title"
      placement="right"
      :closable="true"
      @close="onClose"
      :visible="drawerVisible"
      :width="950">
      <a-form @submit="handleSubmit" :form="form" class="form">
        <a-row class="form-row" :gutter="16">
          <a-col :lg="24" :md="12" :sm="24">
            <a-form-item label="finderUin">
              <a-input
                placeholder="请输入作者 finderUin"
                v-decorator="['finderUin', { rules: [{ required: true, message: '请输入作者 finderUin', whitespace: true }] }]"
              />
            </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-select size="default" style="width: 200px" v-decorator="['fromChannelName',{ rules: [{ required: true, message: '请选择来源渠道', whitespace: true }] }]" @change="handleSelectChange">
                <a-select-option v-for="item in fromChannelNameList" :key="String(item.name)" :value="String(item.name)">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="作者是否有站外账号">
              <a-select size="default" style="width: 200px" v-decorator="['outSideAccountFlag']">
                <a-select-option value="1">是</a-select-option>
                <a-select-option value="0">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>


          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="作者等级">
              <a-select size="default" style="width: 200px" v-decorator="['level',{ rules: [{ required: true, message: '请选择作者等级', whitespace: true }] }]">
                <a-select-option v-for="item in authorLevelList" :key="String(item.name)" :value="String(item.name)">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </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="['weChatAccount', { rules: [{ required: true, message: '请输入作者微信号', whitespace: true }] }]"
              />
            </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="['videoAccount', { rules: [{ required: false, message: '请输入作者视频号账户名', whitespace: true }] }]"
              />
            </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-cascader :options="categoryNameList" placeholder="请选择作者分类" @change="onChange" v-decorator="['categoryName',{ rules: [{ required: true }] }]" />
            </a-form-item>
          </a-col>

          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="拟定认证信息">
              <a-cascader :options="authInfoList" placeholder="请选择拟定认证信息" @change="onChange" v-decorator="['authInfo',{ rules: [{ required: true }] }]" />
            </a-form-item>
          </a-col>

          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="是否本地作者">
              <a-radio-group v-decorator="['isLocal', { initialValue: 1 }]">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</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="影响力描述">
              <a-input
                placeholder="作者影响力证明，用于认证申请或流量包申请审核"
                v-decorator="['prove', { rules: [{ required: true, message: '请输入作者影响力描述', whitespace: true }] }]"
              />
            </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-model="isSend" v-decorator="['isSend', {initialValue:0, rules: [{ required: true}] }]">
                <a-radio :value="1">是</a-radio>
                <a-radio :value="0">否</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :lg="8" :md="12" :sm="24" v-show="isSend">
            <a-form-item label="下发流量包限额">
              <a-select size="default" style="width: 200px" v-decorator="['sendCount',{ rules: [{ required: false}] }]">
                <a-select-option v-for="item in sendCountList" :key="String(item.count)" :value="String(item.count)">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="8" :md="12" :sm="24" v-show="isSend">
            <a-form-item label="发放原因">
              <a-radio-group
                v-decorator="['sendReason', {initialValue:1, rules: [{ required: false}] }]">
                <a-radio :value="1">新入驻作者</a-radio>
                <a-radio :value="0">作者首条发文</a-radio>
              </a-radio-group>
            </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 { saveAuthor,fetchAuthor } from '@/api/author'

export default {
  name: 'CreateAuthorForm',
  components: {
  },
  props: {
    formType: {
      type: String,
      default: 'create'
    },
    visible: {
      type: Boolean
    }
  },
  data () {
    return {
      title: '新增作者',
      isSend: 0,
      id: null,
      drawerVisible: false,
      form: this.$form.createForm(this, { name: 'create_author' }),

      // 下放流量信息
      sendCountList: [
        { 'count': 50000, name: '50000点流量券/人' },
        { 'count': 5000, name: '5000点流量券/人' },
        { 'count': 2500, name: '2500点流量券/人' },
        { 'count': 500, name: '500点流量券/人' }
      ],

      // 作者等级信息
      authorLevelList: [
        { 'id': 1, name: '顶流作者' },
        { 'id': 2, name: '头部作者' },
        { 'id': 3, name: '腰部作者' },
        { 'id': 4, name: '尾部作者' }
      ],

      // 来源渠道信息
      fromChannelNameList: [
        { 'id': 1, name: '市场部-垂类' },
        { 'id': 2, name: '市场部-城市' },
        { 'id': 3, name: '市场部-社区' },
        { 'id': 4, name: '市场部-学生' },
        { 'id': 5, name: '市场部-海外' },
        { 'id': 6, name: '公关中心' },
        { 'id': 7, name: 'IEG项目组' },
        { 'id': 8, name: 'TME' },
        { 'id': 9, name: '基础合作' },
        { 'id': 10, name: '其他' }
      ],

      // 作者认证分类信息
      authInfoList: [
        {
          value: '兴趣认证',
          label: '兴趣认证',
          children: [
            {
              value: '主播',
              label: '主播',
              children: [
                { value: '体育主播', label: '体育主播' },
                { value: '动漫主播', label: '动漫主播' },
                { value: '美食主播', label: '美食主播' },
                { value: '游戏主播', label: '游戏主播' },
                { value: '音乐主播', label: '音乐主播' },
                { value: '娱乐主播', label: '娱乐主播' }
              ]
            },
            {
              value: '自媒体',
              label: '自媒体',
              children: [
                { value: '美妆自媒体', label: '美妆自媒体' },
                { value: '教育自媒体', label: '教育自媒体' },
                { value: '房产自媒体', label: '房产自媒体' },
                { value: '汽车自媒体', label: '汽车自媒体' },
                { value: '科普自媒体', label: '科普自媒体' },
                { value: '游戏自媒体', label: '游戏自媒体' },
                { value: '三农自媒体', label: '三农自媒体' },
                { value: '航空自媒体', label: '航空自媒体' },
                { value: '法律自媒体', label: '法律自媒体' },
                { value: '设计美学自媒体', label: '设计美学自媒体' },
                { value: '军事自媒体', label: '军事自媒体' },
                { value: '音乐自媒体', label: '音乐自媒体' },
                { value: '运动自媒体', label: '运动自媒体' },
                { value: '舞蹈自媒体', label: '舞蹈自媒体' },
                { value: '文学自媒体', label: '文学自媒体' },
                { value: '宠物自媒体', label: '宠物自媒体' },
                { value: '互联网自媒体', label: '互联网自媒体' },
                { value: '生活自媒体', label: '生活自媒体' },
                { value: '户外自媒体', label: '户外自媒体' },
                { value: '艺术自媒体', label: '艺术自媒体' },
                { value: '动漫自媒体', label: '动漫自媒体' }
              ]
            },
            {
              value: '博主',
              label: '博主',
              children: [
                { value: '美妆博主', label: '美妆博主' },
                { value: '教育博主', label: '教育博主' },
                { value: '房产博主', label: '房产博主' },
                { value: '汽车博主', label: '汽车博主' },
                { value: '科普博主', label: '科普博主' },
                { value: '游戏博主', label: '游戏博主' },
                { value: '三农博主', label: '三农博主' },
                { value: '航空博主', label: '航空博主' },
                { value: '法律博主', label: '法律博主' },
                { value: '设计美学博主', label: '设计美学博主' },
                { value: '军事博主', label: '军事博主' },
                { value: '运动博主', label: '运动博主' },
                { value: '舞蹈博主', label: '舞蹈博主' },
                { value: '文学博主', label: '文学博主' },
                { value: '宠物博主', label: '宠物博主' },
                { value: '音乐博主', label: '音乐博主' },
                { value: '互联网博主', label: '互联网博主' },
                { value: '生活博主', label: '生活博主' },
                { value: '户外博主', label: '户外博主' },
                { value: '艺术博主', label: '艺术博主' },
                { value: '动漫博主', label: '动漫博主' }
              ]
            }
          ]
        },
        {
          value: '职业认证',
          label: '职业认证',
          children: [
            {
              value: '建筑工程',
              label: '建筑工程',
              children: [
                { value: '建造造价', label: '建造造价' },
                { value: '设计勘察', label: '设计勘察' }
              ]
            },
            {
              value: '游戏动漫',
              label: '游戏动漫',
              children: [
                { value: '电子竞技', label: '电子竞技' },
                { value: '动漫绘画', label: '动漫绘画' }
              ]
            },
            {
              value: '科学科普',
              label: '科学科普',
              children: [
                { value: '地理', label: '地理' },
                { value: '化学', label: '化学' },
                { value: '数学', label: '数学' },
                { value: '气候', label: '气候' },
                { value: '物理', label: '物理' },
                { value: '天文', label: '天文' },
                { value: '生物', label: '生物' },
                { value: '其他', label: '其他' }
              ]
            },
            {
              value: 'IT通信',
              label: 'IT通信',
              children: [
                { value: '产品', label: '产品' },
                { value: '架构', label: '架构' },
                { value: '软件', label: '软件' },
                { value: '硬件', label: '硬件' },
                { value: '设计', label: '设计' }
              ]
            },
            {
              value: '财经',
              label: '财经',
              children: [
                { value: '财经', label: '财经' },
                { value: '会计', label: '会计' },
                { value: '保险', label: '保险' },
                { value: '金融', label: '金融' },
                { value: '经济', label: '经济' }
              ]
            },
            {
              value: '教育',
              label: '教育',
              children: [
                { value: '校长', label: '校长' },
                { value: '院士', label: '院士' },
                { value: '教授', label: '教授' },
                { value: '教师', label: '教师' }
              ]
            },
            {
              value: '传媒',
              label: '传媒',
              children: [
                { value: '记者', label: '记者' },
                { value: '主持人', label: '主持人' },
                { value: '编辑', label: '编辑' },
                { value: '评论员', label: '评论员' }
              ]
            },
            {
              value: '法律',
              label: '法律',
              children: [
                { value: '律师', label: '律师' }
              ]
            },
            {
              value: '生活服务',
              label: '生活服务',
              children: [
                { value: '健身教练', label: '健身教练' },
                { value: '宠物医生', label: '宠物医生' },
                { value: '翻译官', label: '翻译官' },
                { value: '导游', label: '导游' },
                { value: '紧急救助员', label: '紧急救助员' }
              ]
            },
            {
              value: '体育',
              label: '体育',
              children: [
                { value: '极限运动', label: '极限运动' },
                { value: '健身', label: '健身' },
                { value: '瑜伽', label: '瑜伽' },
                { value: '休闲运动', label: '休闲运动' },
                { value: '水上运动', label: '水上运动' },
                { value: '冰雪项目', label: '冰雪项目' },
                { value: '空手道', label: '空手道' },
                { value: '举重', label: '举重' },
                { value: '武术', label: '武术' },
                { value: '柔道', label: '柔道' },
                { value: '羽毛球', label: '羽毛球' },
                { value: '中国象棋', label: '中国象棋' },
                { value: '定向越野', label: '定向越野' },
                { value: '台球', label: '台球' },
                { value: '马术', label: '马术' }
              ]
            }
          ]
        },
        {
          value: '暂不认证',
          label: '暂不认证',
          children: [
            { value: '无认证意愿/必要', label: '无认证意愿/必要' },
            { value: '作者自主认证', label: '作者自主认证' },
            { value: '机构主体认证', label: '机构主体认证' }
          ]
        }
      ],

      // 作者分类信息
      categoryNameList: [
        {
          value: '生活',
          label: '生活',
          children: [
            { value: '职场生活', label: '职场生活' },
            { value: '农村生活', label: '农村生活' },
            { value: '校园生活', label: '校园生活' },
            { value: '趣事', label: '趣事' },
            { value: '奇闻猎奇', label: '奇闻猎奇' },
            { value: '纪实现场', label: '纪实现场' },
            { value: 'vlog', label: 'vlog' },
            { value: 'DIY', label: 'DIY' },
            { value: '公益', label: '公益' },
            { value: '随拍', label: '随拍' },
            { value: '生活技巧', label: '生活技巧' }
          ]
        },
        {
          value: '情感',
          label: '情感',
          children: [
            { value: '两性情感', label: '两性情感' },
            { value: '亲情', label: '亲情' },
            { value: '友情', label: '友情' },
            { value: '心灵鸡汤', label: '心灵鸡汤' },
            { value: '情感微剧', label: '情感微剧' },
            { value: '情感语录', label: '情感语录' }
          ]
        },
        {
          value: '新闻资讯',
          label: '新闻资讯',
          children: [
            { value: '时政外交', label: '时政外交' },
            { value: '财经新闻', label: '财经新闻' },
            { value: '法制新闻', label: '法制新闻' },
            { value: '交通资讯', label: '交通资讯' },
            { value: '社会民生', label: '社会民生' },
            { value: '其他', label: '其他' }
          ]
        },
        {
          value: '知识',
          label: '知识',
          children: [
            { value: '科学知识', label: '科学知识' },
            { value: '语言学习', label: '语言学习' },
            { value: '口才/演讲', label: '口才/演讲' },
            { value: '职场', label: '职场' },
            { value: '营销', label: '营销' },
            { value: '星座', label: '星座' },
            { value: '科技产品科普', label: '科技产品科普' },
            { value: '文化历史', label: '文化历史' },
            { value: '冷知识', label: '冷知识' },
            { value: '教育考试', label: '教育考试' },
            { value: '法律', label: '法律' }
          ]
        },
        {
          value: '运动',
          label: '运动',
          children: [
            { value: '健身', label: '健身' },
            { value: '瑜伽', label: '瑜伽' },
            { value: '极限运动', label: '极限运动' },
            { value: '冰雪运动', label: '冰雪运动' },
            { value: '足球', label: '足球' },
            { value: '高尔夫', label: '高尔夫' },
            { value: '其他球类', label: '其他球类' },
            { value: '武术搏击', label: '武术搏击' },
            { value: '水上运动', label: '水上运动' },
            { value: '滑板轮滑', label: '滑板轮滑' },
            { value: '休闲运动', label: '休闲运动' }
          ]
        },
        {
          value: '才艺',
          label: '才艺',
          children: [
            { value: '绘画', label: '绘画' },
            { value: '唱歌', label: '唱歌' },
            { value: '舞蹈', label: '舞蹈' },
            { value: '演奏', label: '演奏' },
            { value: '书法', label: '书法' },
            { value: '杂技', label: '杂技' },
            { value: '特效炫技', label: '特效炫技' },
            { value: '魔术', label: '魔术' },
            { value: '手工艺', label: '手工艺' },
            { value: '戏曲', label: '戏曲' },
            { value: '话剧', label: '话剧' }
          ]
        },
        {
          value: '旅行风景',
          label: '旅行风景',
          children: [
            { value: '人文景观', label: '人文景观' },
            { value: '历史古迹', label: '历史古迹' },
            { value: '自然风景', label: '自然风景' },
            { value: '旅行攻略', label: '旅行攻略' },
            { value: '当地特色见闻', label: '当地特色见闻' },
            { value: '旅行vlog', label: '旅行vlog' }
          ]
        },
        {
          value: '明星名人',
          label: '明星名人',
          children: [
            { value: '娱乐明星', label: '娱乐明星' },
            { value: '网红', label: '网红' },
            { value: '体育明星', label: '体育明星' },
            { value: '知名人士', label: '知名人士' }
          ]
        },
        {
          value: '时尚',
          label: '时尚',
          children: [
            { value: '美妆', label: '美妆' },
            { value: '美甲', label: '美甲' },
            { value: '美发', label: '美发' },
            { value: '仿妆', label: '仿妆' },
            { value: '护肤', label: '护肤' },
            { value: '穿搭', label: '穿搭' },
            { value: '美拍/修图技巧', label: '美拍/修图技巧' },
            { value: '时尚活动', label: '时尚活动' },
            { value: '整形整容', label: '整形整容' }
          ]
        },
        {
          value: '二次元',
          label: '二次元',
          children: [
            { value: '动漫/番剧', label: '动漫/番剧' },
            { value: '表情包壁纸', label: '表情包壁纸' },
            { value: '宅舞', label: '宅舞' },
            { value: 'cosplay', label: 'cosplay' },
            { value: '虚拟人物', label: '虚拟人物' },
            { value: '周边', label: '周边' }
          ]
        },
        {
          value: '美食',
          label: '美食',
          children: [
            { value: '探店攻略', label: '探店攻略' },
            { value: '吃播', label: '吃播' },
            { value: '美食秀', label: '美食秀' },
            { value: '烹饪教学', label: '烹饪教学' },
            { value: '酒类', label: '酒类' },
            { value: '茶道', label: '茶道' }
          ]
        },
        {
          value: '动物',
          label: '动物',
          children: [
            { value: '猫', label: '猫' },
            { value: '狗', label: '狗' },
            { value: '鱼类', label: '鱼类' },
            { value: '鸟类', label: '鸟类' },
            { value: '鼠类', label: '鼠类' },
            { value: '爬行动物', label: '爬行动物' },
            { value: '昆虫', label: '昆虫' },
            { value: '其他动物', label: '其他动物' }
          ]
        }
      ]
    }
  },
  watch: {
    visible (val) {
      this.drawerVisible = val
    },
    formType (val) {
      this.title = (val === 'create' ? '新增作者' : '更新作者')
    }
  },
  created () {
  },
  methods: {
    onChange (value) {
      console.log(value)
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          const createParams = { ...values }

          if (createParams.categoryName !== undefined) {
            createParams.categoryName = createParams.categoryName[createParams.categoryName.length - 1]
          }

          if (createParams.authInfo !== undefined) {
            createParams.authInfo = createParams.authInfo[createParams.authInfo.length - 1]
          }

          createParams.outSideAccountFlag = createParams.outSideAccountFlag === '是' ? 1 : 0

          if (this.formType === 'create') {
            saveAuthor(createParams)
              .then(response => {
                this.$notification.success({
                  message: response.message
                })
                this.$emit('refreshTable')
              })
              .catch(err => {
                console.log(err)
              })
          } else {
            createParams['id'] = this.id
            saveAuthor(createParams)
              .then(response => {
                this.$notification.success({
                  message: response.message
                })
                this.$emit('refreshTable')
              })
              .catch(err => {
                console.log(err)
              })
          }

          this.content = ''
          this.form.resetFields()
          this.drawerVisible = false
          this.$emit('resetData', false)
        }
      })
    },
    handleEdit (record) {
      this.id = record.id
      fetchAuthor(record.id)
        .then(response => {
          const postForm = response.model
          console.log(postForm)
          this.isSend = postForm.isSend

          this.form.resetFields()
          this.form = this.$form.createForm(this, {
            onFieldsChange: (_, changedFields) => {},
            mapPropsToFields: () => {
              return {
                finderUin: this.$form.createFormField({
                  value: postForm.finderUin
                }),
                fromChannelName: this.$form.createFormField({
                  value: postForm.fromChannelName
                }),
                outSideAccountFlag: this.$form.createFormField({
                  value: postForm.outSideAccountFlag === 1 ? '是' : '否'
                }),
                level: this.$form.createFormField({
                  value: postForm.level
                }),
                weChatAccount: this.$form.createFormField({
                  value: postForm.weChatAccount
                }),
                videoAccount: this.$form.createFormField({
                  value: postForm.videoAccount
                }),
                isLocal: this.$form.createFormField({
                  value: postForm.isLocal
                }),
                isSend: this.$form.createFormField({
                  value: postForm.isSend
                }),
                sendCount: this.$form.createFormField({
                  value: postForm.sendCount
                }),
                sendReason: this.$form.createFormField({
                  value: postForm.sendReason
                }),
                prove: this.$form.createFormField({
                  value: postForm.prove
                })
              }
            },
            onValuesChange: (_, values) => {
              console.log(values)
            }
          })
        })
        .catch(err => {
          console.log(err)
        })
      this.drawerVisible = true
    },
    onClose () {
      this.resetForm()
      this.drawerVisible = false
      this.$emit('resetData', false)
    },
    resetForm () {
      this.isSend = 0
      this.form.resetFields()
    },
    handleChange ({ fileList }) {
      console.log(fileList)
    },
    handleSelectChange (value) {
      console.log(`Selected: ${value}`)
    }
  }
}
</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>