• 下拉框赋默认值

 		  <a-form-item label="催单状态："><a-selectv-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>//<!-- 1、:footer="null" 去掉弹窗底部的确定取消按钮 --><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>//<!-- 2、带搜索的下拉框 show-search :filter-option --><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"borderedstyle="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-paginationv-if="data.length != 0"show-quick-jumperv-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 = truecuidanList(//  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 = falseif (data.code === 0) {this.pageTotal = data.totaldata.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 = pageNumberthis.search()},toDetail(info, type) {this.$nextTick(() => {this.$refs.result.init(info, type)})},// 催单reminderOrder(record) {this.$nextTick(() => {this.visibleCuidan = truethis.orderId = record.orderIdthis.orderNo = record.orderNothis.id = record.id})},reminder() {cuidan({orderId: this.orderId,orderNo: this.orderNo,reminderRemark: this.cuidanRemark,id: this.id}).then(res => {this.$message.success('催单成功')this.visibleCuidan = falsethis.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: '', // 修改的idrow: '', // 修改传过来的// 封面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.trainIdthis.row = rowthis.visible = truegetInfo(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 = falsethis.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>