antdesign-vue框架form表单布局

• 下拉框赋默认值

 		  <a-form-item label="催单状态：">
              <a-select
                v-decorator="[
                  'reminderStatus',
                  {
                    initialValue: $store.getters.enterpriseId ? '2' : '0'
                  }
                ]"
                style="width:100%;"
                allowClear
              >
                <a-select-option value="0">
                  待处理
                </a-select-option>
                <a-select-option value="1">
                  处理中
                </a-select-option>
                <a-select-option value="2">
                  处理完成
                </a-select-option>
              </a-select>
            </a-form-item>

<template>
  //
  <a-modal v-model="visible" title="催单列表" @ok="handleOk" :width="1200" :footer="null">
    <a-card :bordered="false">
      //
      <a-form layout="horizontal" :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="订单信息：">
              <a-input v-decorator="['orderNo']" placeholder="订单号/原始单号" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="客户信息：">
              <a-input v-decorator="['clientNameOrPhone']" placeholder="客户姓名/电话" allowClear />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="催单状态：">
              <a-select v-decorator="['reminderStatus']" style="width:100%;" allowClear>
                <a-select-option value="0">
                  待处理
                </a-select-option>
                <a-select-option value="1">
                  处理中
                </a-select-option>
                <a-select-option value="2">
                  处理完成
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="申请时间：">
              <a-range-picker v-decorator="['time']" allowClear @change="onChange" />
            </a-form-item>
          </a-col>
          //
          <a-col :span="8" v-if="!$store.getters.enterpriseId">
            <a-form-item label="企业名称：">
              <a-select v-decorator="['enterpriseId']" allowClear show-search :filter-option="filterOption">
                <a-select-option :value="item.enterpriseId" v-for="(item, i) in enterprise" :key="i">
                  {{ item.enterpriseName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="$store.getters.enterpriseId ? 16 : 8" style="text-align: right;">
            <a-button type="primary" html-type="submit" @click="search(1)"> 查询 </a-button>
          </a-col>
        </a-row>
      </a-form>
     // 
      <a-spin :spinning="spinning" delay="500">
        <a-table
          @change="handleTableChange"
          :pagination="false"
          :columns="columns"
          :data-source="data"
          bordered
          style="margin-top: 30px"
        >
          <span slot="action" slot-scope="text">
            <a v-if="$store.getters.enterpriseId" @click="toDetail(text)">查看反馈</a>
            <a-divider v-if="$store.getters.enterpriseId && text.reminderStatus == 2" type="vertical" />
            <a v-if="$store.getters.enterpriseId && text.reminderStatus == 2" @click="reminderOrder(text)">再次催单</a>
            <a v-if="!$store.getters.enterpriseId && text.reminderStatus != 2" @click="toDetail(text, 1)">处理</a>
            <a v-if="!$store.getters.enterpriseId && text.reminderStatus == 2" @click="toDetail(text)">查看</a>
          </span>
        </a-table>
      </a-spin>
      // 
      <a-row type="flex" justify="end" style="margin-top: 50px">
        <a-pagination
          v-if="data.length != 0"
          show-quick-jumper
          v-model="page"
          :total="pageTotal"
          @change="onChangePage"
          :show-total="a => `总共 ${a} 条`"
        />
      </a-row>
    </a-card>
    <result ref="result" @update="search(1)"></result>
    // 
    <a-modal v-model="visibleCuidan" title="催单申请" ok-text="确认" cancel-text="取消" @ok="reminder">
      <div class="flex_l mb-20">
        <div style="width:80px;text-align:right">订单编号：</div>
        <div>{{ orderNo }}</div>
      </div>
      <div class="flex_l flex-top">
        <div style="width:80px;text-align:right">添加备注：</div>
        <a-input class="flex-1" v-model="cuidanRemark" rows="4" placeholder="填写备注..." type="textarea" />
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
import { getSlectCombox } from '@/api/enterprise/accessory'
import { cuidanList, cuidan } from '@/api/order/orderList'
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    align: 'center'
  },
  {
    title: '订单号',
    dataIndex: 'orderNo',
    align: 'center'
  },
  {
    title: '订单状态',
    dataIndex: 'orderStatusName',
    align: 'center'
  },
  {
    title: '发起时间',
    dataIndex: 'createTime',
    align: 'center'
  },
  {
    title: '催单状态',
    dataIndex: 'reminderStatusName',
    align: 'center'
  },
  {
    title: '反馈结果',
    dataIndex: 'content',
    align: 'center',
    width: '20%'
  },
  {
    title: '操作',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  data() {
    return {
      visible: false,
      form: this.$form.createForm(this, { name: 'advanced_search' }),
      enterprise: [],
      startTime: '', // 开始时间
      endTime: '', // 结束时间
      data: [],
      columns,
      page: 1,
      pageTotal: '',
      spinning: false,
      visibleCuidan: false, // 再次催单
      id: '',
      orderId: '',
      orderNo: '',
      cuidanRemark: ''
    }
  },
  components: {
    result: () => import('./cuidanResult')
  },
  methods: {
    init() {
      this.visible = true
      // 企业列表
      getSlectCombox().then(res => {
        this.enterprise = res.data
      })
      this.search()
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 3、日期选择器获取时间赋值给变量
    onChange(date, dateString) {
      console.log(date, dateString)
      this.startTime = dateString[0]
      this.endTime = dateString[1]
    },
    search(page) {
      if (page) {
        this.page = 1
      }
      this.spinning = true
      cuidanList(
        //  4、获取form表单的数据
        Object.assign(
          this.form.getFieldsValue(),
          this.$store.getters.enterpriseId
            ? {
                pageNum: this.page,
                pageSize: 10,
                startTime: this.startTime,
                endTime: this.endTime,
                enterpriseId: this.$store.getters.enterpriseId
              }
            : {
                pageNum: this.page,
                pageSize: 10,
                startTime: this.startTime,
                endTime: this.endTime
              }
        )
      ).then(data => {
        this.spinning = false
        if (data.code === 0) {
          this.pageTotal = data.total
          data.rows.forEach((item, i) => {
            this.$set(item, 'index', (this.page * 1 - 1) * 10 + i + 1)
          })
          this.data = data.rows
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    onChangePage(pageNumber) {
      this.page = pageNumber
      this.search()
    },
    toDetail(info, type) {
      this.$nextTick(() => {
        this.$refs.result.init(info, type)
      })
    },
    // 催单
    reminderOrder(record) {
      this.$nextTick(() => {
        this.visibleCuidan = true
        this.orderId = record.orderId
        this.orderNo = record.orderNo
        this.id = record.id
      })
    },
    reminder() {
      cuidan({
        orderId: this.orderId,
        orderNo: this.orderNo,
        reminderRemark: this.cuidanRemark,
        id: this.id
      }).then(res => {
        this.$message.success('催单成功')
        this.visibleCuidan = false
        this.cuidanRemark = ''
      })
    }
  }
}
</script>
<style lang="less" scoped>
// 样式让form单在一行显示
/deep/.ant-form-item {
  display: flex !important;
}
/deep/.ant-form-item-control-wrapper {
  flex: 1 !important;
  width: 100% !important;
}
</style>

独立一行布局

<template>
  <div>
    <a-modal :title="id?'修改':'新增'" :visible="visible" @cancel="close" :footer="null" width="900px">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['title', { rules: [{ required: true, message: '请填写标题' }] }]" />
        </a-form-item>
        <a-form-item label="封面" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-upload :headers="headers" :action="uploadUrl" list-type="picture-card" :file-list="fileList"
            @preview="handlePreview" @change="handleChange">
            <div v-if="fileList.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                封面
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </a-form-item>
        <a-form-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-checkbox-group v-decorator="['type', { rules: [{ required: true, message: '请选择类型' }] }]">
            <a-checkbox v-for="item in trainType" :key="item.dictValue" :value="item.dictValue">
              {{ item.dictLabel }}
            </a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item label="关联品牌型号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-button type="primary" @click="link()">
            关联
          </a-button>
        </a-form-item>
        <a-form-item label="上传附件" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-upload :action="uploadUrl" :headers="headers" :multiple="false" :file-list="imgList"
            @change="handleChange1" :before-upload="beforeUpload">
            <a-button>
              <a-icon type="upload" /> 上传附件
            </a-button>
          </a-upload>
          <div style="color:red">支持上传视频和文档；支持扩展名：.doc .docx .pdf .xls .xlsx .ppt .pptx .jpg .png .mp4 .avi .wmv</div>
        </a-form-item>
        <a-form-item label="链接地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['outurl']" />
        </a-form-item>
        <editor id="tinymce" v-model="content" :init="init"></editor>
        <a-form-item :wrapper-col="{ span: 12, offset: 4 }">
          <a-button type="primary" html-type="submit">
            保存
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 关联 -->
    <treelink :modelIds="modelIds" ref="treelink" @ok="linkOk"></treelink>
  </div>
</template>

<script>
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getfinddictAll } from '@/api/order/orderList'
import treelink from './searchTree.vue'
import { imgUrl } from '@/utils/common'
import { trainEdit, getInfo, trainAdd } from '@/api/trainOverview/trainList'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/icons/default'
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      visible: false,
      id: '', // 修改的id
      row: '', // 修改传过来的
      // 封面
      uploadUrl: process.env.VUE_APP_API_BASE_URL + '/dfs/upload?type=train',
      headers: {
        token: Vue.ls.get(ACCESS_TOKEN)
      },
      previewVisible: false,
      previewImage: '',
      fileList: [
        // {
        // uid: '-1',
        // name: 'image.png',
        // status: 'done',
        // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        // },
      ],
      trainType: [],  // 类型
      modelIds: [], // 品牌型号
      // 上传附件
      imgList: [
        // {
        //   uid: '-1',
        //   name: 'xxx.png',
        //   status: 'done',
        //   url: 'http://www.baidu.com/xxx.png',
        // },
      ],
      // 富文本
      content: '',
      init: {
        language_url: '/tinymce/langs/zh_CN.js', //语言包的路径
        language: 'zh_CN', //语言
        skin_url: '/tinymce/skins/ui/oxide', //skin路径
        height: 300, //编辑器高度
        branding: false, //是否禁用“Powered by TinyMCE”
        menubar: false, //顶部菜单栏显示,
        automatic_uploads: true,
        paste_data_images: true,
        // plugins: 'advlist link image code textcolor paste textcolor colorpicker',
        file_picker_callback: function (callback, value, meta) {
          console.log('xxxxx: ' + value)
        },
        images_upload_handler: (blobInfo, success, failure) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        },
        video_template_callback: function (data) { },
        plugins:
          'advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste code help wordcount',
        toolbar:
          'undo redo | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify bullist numlist outdent indent blockquote | image code removeformat'
      },
    }
  },
  components: {
    Editor,
    treelink
  },
  mounted() {
    let dictTypes = ['train_type']
    getfinddictAll({ dictTypes: dictTypes.join() }).then(res => {
      this.trainType = res.train_type
    })
  },
  methods: {
    // 点击新增
    add() {
      console.log(111)
      this.visible = true
    },
    // 点击修改
    edit(row) {
      console.log(222)
      this.id = row.trainId
      this.row = row
      this.visible = true
      getInfo(this.id).then(res => {
        if (res.code == 0 && res.data) {
          setTimeout(() => {
            this.form.setFieldsValue({
              title: res.data.title,
              type: res.data.type.split(','),
              outurl: res.data.outurl
            });
          }, 0);
          if (res.data.imgurl) {
            this.fileList = [{
              uid: '-1',
              name: res.data.imgurl.split('/')[res.data.imgurl.split('/').length - 1],
              status: 'done',
              url: imgUrl + res.data.imgurl,
              url1: res.data.imgurl,
            }]
          }
          if (res.data.trainInfos.length) {
            this.imgList = res.data.trainInfos.map(item => {
              return {
                uid: '-1',
                name: item.matterUrl.split('/')[item.matterUrl.split('/').length - 1],
                status: 'done',
                url: imgUrl + item.matterUrl,
                url1: item.matterUrl,
                trainType: item.trainType,
              }
            })
          }

          this.modelIds = res.data.modelIds || []
          this.content = res.data.content || ''
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 新增和修改保存
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log('Received values of form: ', values);
          // console.log(this.fileList);
          // console.log(this.modelIds);
          // console.log(11, this.imgList);
          values.type = values.type.join(',')
          let arr = this.imgList.filter(item => item.url)
          let trainInfos = arr.length ? arr.map(item => {
            return { matterUrl: item.url1, trainType: item.trainType }
          }) : []
          console.log(22, trainInfos);
          let query = Object.assign(values,
            { modelIds: this.modelIds },
            { imgurl: this.fileList.length ? this.fileList[0].url1 : '' },
            { trainInfos: trainInfos },
            { content: this.content }
          );
          if (this.id) {
            query = Object.assign(query, {
              trainId: this.id,
              releaseStatus: this.row.releaseStatus
            })
            trainEdit(query).then(res => {
              if (res.code === 0) {
                this.$message.success('修改成功!')
                this.close()
                this.$emit('ok')
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            trainAdd(query).then(res => {
              if (res.code === 0) {
                this.$message.success('新增成功!')
                this.close()
                this.$emit('ok')
              } else {
                this.$message.error(res.msg)
              }
            })
          }

        }
      });
    },

    close() {
      this.visible = false
      this.form.resetFields()
      this.fileList = []
      this.modelIds = []
      this.imgList = []
      // 复选框选中表单重置报错，加上这个好了
      this.form.setFieldsValue({
        type: []
      });
      this.content = ''
    },
    // 封面
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      console.log(file)
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      fileList = fileList.map(file => {
        if (file.response) {
          file.url = imgUrl + file.response.url;
          file.url1 = file.response.url;
        }
        return file;
      });

      this.fileList = fileList;
    },
    // 关联品牌型号
    link() {
      this.$refs.treelink.init()
    },
    linkOk(list) {
      this.modelIds = list
    },
    // 上传附件
    beforeUpload(file) {
      let arr = ["doc", "docx", "pdf", "xls", "xlsx", "ppt", "pptx", "jpg", "png", "mp4", "avi", "wmv"]
      let type = file.name.split('.')[file.name.split('.').length - 1]
      if (!arr.includes(type)) {
        this.$message.error('不支持上传 .' + type + '格式');
      }
      return arr.includes(type);
    },
    handleChange1(info) {
      let fileList = [...info.fileList];
      let arr1 = ['mp4', "avi", "wmv"]
      fileList = fileList.map(file => {
        if (file.response) {
          file.url = imgUrl + file.response.url;
          file.url1 = file.response.url;
          file.trainType = arr1.includes(file.name.split('.')[file.name.split('.').length - 1]) ? 1 : 2
        }
        return file;
      });
      this.imgList = fileList;
    },
  },
}
</script>