From 34223b096cf6ad9d92c3702bb9529e764f523b11 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 02 Mar 2022 21:44:40 +0800 Subject: [PATCH] 调整查询 --- _web/src/views/main/blogarticle/editForm.vue | 340 ++++++++++++++++++-------------------------------------- 1 files changed, 110 insertions(+), 230 deletions(-) diff --git a/_web/src/views/main/blogarticle/editForm.vue b/_web/src/views/main/blogarticle/editForm.vue index 1ae1364..0e63eb9 100644 --- a/_web/src/views/main/blogarticle/editForm.vue +++ b/_web/src/views/main/blogarticle/editForm.vue @@ -1,166 +1,59 @@ <template> - <a-modal - title="编辑blog文章主体" - :width="900" - :visible="visible" - :confirmLoading="confirmLoading" - @ok="handleSubmit" - @cancel="handleCancel" - > + <a-modal title="编辑blog文章" :width="900" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit" + @cancel="handleCancel"> <a-spin :spinning="confirmLoading"> <a-form :form="form"> - <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item> - <a-form-item - label="文章标题" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > + <a-form-item v-show="false"> + <a-input v-decorator="['id']" /> + </a-form-item> + <a-form-item label="文章标题" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> <a-input placeholder="请输入文章标题" v-decorator="['title', {rules: [{required: true, message: '请输入文章标题!'}]}]" /> </a-form-item> - <a-form-item - label="文章文件id" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入文章文件id" v-decorator="['articleFileId', {rules: [{required: true, message: '请输入文章文件id!'}]}]" /> + <a-form-item label="文章文件id" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> + <a-input placeholder="请输入文章文件id" + v-decorator="['articleFileId', {rules: [{required: true, message: '请输入文章文件id!'}]}]" /> </a-form-item> - <a-form-item - label="文件类型 1:markdown 2:html" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入文件类型 1:markdown 2:html" v-decorator="['articleFileType', {rules: [{required: true, message: '请输入文件类型 1:markdown 2:html!'}]}]" /> + <a-form-item label="文件类型" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-radio-group placeholder="请选择文件类型" v-decorator="['articleFileType']"> + <a-radio v-for="(item,index) in articleFileTypeData" :key="index" :value="item.code">{{ item.name }} + </a-radio> + </a-radio-group> </a-form-item> - <a-form-item - label="文章分类id 0:没有分类" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入文章分类id 0:没有分类" v-decorator="['articleTypeId', {rules: [{required: true, message: '请输入文章分类id 0:没有分类!'}]}]" /> + <a-form-item label="文章分类" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> + <a-input placeholder="请输入文章分类" + v-decorator="['articleTypeId', {rules: [{required: true, message: '请输入文章分类!'}]}]" /> </a-form-item> - <a-form-item - label="文章引言" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入文章引言" v-decorator="['introduce', {rules: [{required: true, message: '请输入文章引言!'}]}]" /> + <a-form-item label="文章引言" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> + <a-textarea placeholder="请输入文章引言" v-decorator="['introduce']" :auto-size="{ minRows: 3, maxRows: 6 }" /> </a-form-item> - <a-form-item - label="封面文件地址(id)" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入封面文件地址(id)" v-decorator="['coverFileId', {rules: [{required: true, message: '请输入封面文件地址(id)!'}]}]" /> + <a-form-item label="封面文件" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> + <a-input placeholder="请输入封面文件" v-decorator="['coverFileId']" /> </a-form-item> - <a-form-item - label="上次编辑时间" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-date-picker style="width: 100%" placeholder="请选择上次编辑时间" v-decorator="['lastEditorDate',{rules: [{ required: true, message: '请选择上次编辑时间!' }]}]" @change="lastEditorDateOnChange"/> + <a-form-item label="是否置顶" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-select style="width: 100%" placeholder="请选择是否置顶" + v-decorator="['isTop', {rules: [{ required: true, message: '请选择是否置顶!' }]}]"> + <a-select-option v-for="(item,index) in isTopData" :key="index" :value="item.code">{{ item.name }} + </a-select-option> + </a-select> </a-form-item> - <a-form-item - label="发布时间" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-date-picker style="width: 100%" placeholder="请选择发布时间" v-decorator="['publishDate',{rules: [{ required: true, message: '请选择发布时间!' }]}]" @change="publishDateOnChange"/> + <a-form-item label="置顶值" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> + <a-input placeholder="请输入置顶值" v-decorator="['topValue']" /> </a-form-item> - <a-form-item - label="是否置顶 0:否 1:是" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入是否置顶 0:否 1:是" v-decorator="['isTop', {rules: [{required: true, message: '请输入是否置顶 0:否 1:是!'}]}]" /> + <a-form-item label="公开状态" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-radio-group placeholder="请选择公开状态" v-decorator="['authStatus']"> + <a-radio v-for="(item,index) in authStatusData" :key="index" :value="item.code">{{ item.name }}</a-radio> + </a-radio-group> </a-form-item> - <a-form-item - label="置顶值(越小越靠前)" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入置顶值(越小越靠前)" v-decorator="['topValue', {rules: [{required: true, message: '请输入置顶值(越小越靠前)!'}]}]" /> + <a-form-item label="授权密码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> + <a-input placeholder="请输入授权密码" v-decorator="['authPassword']" /> </a-form-item> - <a-form-item - label="公开状态 1:公开 2:私密 3:密码授权" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入公开状态 1:公开 2:私密 3:密码授权" v-decorator="['authStatus', {rules: [{required: true, message: '请输入公开状态 1:公开 2:私密 3:密码授权!'}]}]" /> + <a-form-item label="编辑状态" :labelCol="labelCol" :wrapperCol="wrapperCol"> + <a-radio-group placeholder="请选择编辑状态" v-decorator="['editorStatus']"> + <a-radio v-for="(item,index) in editorStatusData" :key="index" :value="item.code">{{ item.name }}</a-radio> + </a-radio-group> </a-form-item> - <a-form-item - label="授权密码(在密码授权状态时)" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入授权密码(在密码授权状态时)" v-decorator="['authPassword', {rules: [{required: true, message: '请输入授权密码(在密码授权状态时)!'}]}]" /> - </a-form-item> - <a-form-item - label="编辑状态 0:草稿 1:发布" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入编辑状态 0:草稿 1:发布" v-decorator="['editorStatus', {rules: [{required: true, message: '请输入编辑状态 0:草稿 1:发布!'}]}]" /> - </a-form-item> - <a-form-item - label="归档年份(以初次发布时间为准)" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入归档年份(以初次发布时间为准)" v-decorator="['separateYear', {rules: [{required: true, message: '请输入归档年份(以初次发布时间为准)!'}]}]" /> - </a-form-item> - <a-form-item - label="归档月份" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入归档月份" v-decorator="['separateMonth', {rules: [{required: true, message: '请输入归档月份!'}]}]" /> - </a-form-item> - <a-form-item - label="归档日" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入归档日" v-decorator="['separateDay', {rules: [{required: true, message: '请输入归档日!'}]}]" /> - </a-form-item> - <a-form-item - label="是否启用 0:否 1:是" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-input placeholder="请输入是否启用 0:否 1:是" v-decorator="['isEnable', {rules: [{required: true, message: '请输入是否启用 0:否 1:是!'}]}]" /> - </a-form-item> - <a-form-item - label="更新时间" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-date-picker style="width: 100%" placeholder="请选择更新时间" v-decorator="['updateDate',{rules: [{ required: true, message: '请选择更新时间!' }]}]" @change="updateDateOnChange"/> - </a-form-item> - <a-form-item - label="创建时间" - :labelCol="labelCol" - :wrapperCol="wrapperCol" - has-feedback - > - <a-date-picker style="width: 100%" placeholder="请选择创建时间" v-decorator="['createDate',{rules: [{ required: true, message: '请选择创建时间!' }]}]" @change="createDateOnChange"/> + <a-form-item label="是否启用" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback> + <a-input placeholder="请输入是否启用" v-decorator="['isEnable']" /> </a-form-item> </a-form> </a-spin> @@ -168,90 +61,97 @@ </template> <script> - import moment from 'moment' - import { blogArticleEdit } from '@/api/modular/main/blogarticle/blogArticleManage' + import { + blogArticleEdit + } from '@/api/modular/main/blogarticle/blogArticleManage' export default { - data () { + data() { return { labelCol: { - xs: { span: 24 }, - sm: { span: 5 } + xs: { + span: 24 + }, + sm: { + span: 5 + } }, wrapperCol: { - xs: { span: 24 }, - sm: { span: 15 } + xs: { + span: 24 + }, + sm: { + span: 15 + } }, - lastEditorDateDateString: '', - publishDateDateString: '', - updateDateDateString: '', - createDateDateString: '', + articleFileTypeData: [], + isTopData: [], + authStatusData: [], + editorStatusData: [], visible: false, confirmLoading: false, form: this.$form.createForm(this) } }, methods: { - moment, // 初始化方法 - edit (record) { + edit(record) { this.visible = true + const articleFileTypeOption = this.$options + this.articleFileTypeData = articleFileTypeOption.filters['dictData']('blog_file_type') + const isTopOption = this.$options + this.isTopData = isTopOption.filters['dictData']('blog_yes_or_no') + const authStatusOption = this.$options + this.authStatusData = authStatusOption.filters['dictData']('blog_auth_status') + const editorStatusOption = this.$options + this.editorStatusData = editorStatusOption.filters['dictData']('blog_editor_status') + + this.form.getFieldDecorator('articleFileType', { + valuePropName: 'checked', + initialValue: record.articleFileType.toString() + }) + this.form.getFieldDecorator('authStatus', { + valuePropName: 'checked', + initialValue: record.authStatus.toString() + }) + this.form.getFieldDecorator('editorStatus', { + valuePropName: 'checked', + initialValue: record.editorStatus.toString() + }) + setTimeout(() => { - this.form.setFieldsValue( - { - id: record.id, - title: record.title, - articleFileId: record.articleFileId, - articleFileType: record.articleFileType, - articleTypeId: record.articleTypeId, - introduce: record.introduce, - coverFileId: record.coverFileId, - isTop: record.isTop, - topValue: record.topValue, - authStatus: record.authStatus, - authPassword: record.authPassword, - editorStatus: record.editorStatus, - separateYear: record.separateYear, - separateMonth: record.separateMonth, - separateDay: record.separateDay, - isEnable: record.isEnable - } - ) + this.form.setFieldsValue({ + id: record.id, + title: record.title, + articleFileId: record.articleFileId, + // articleFileType: record.articleFileType, + articleTypeId: record.articleTypeId, + introduce: record.introduce, + coverFileId: record.coverFileId, + isTop: record.isTop, + topValue: record.topValue, + // authStatus: record.authStatus, + authPassword: record.authPassword, + // editorStatus: record.editorStatus, + isEnable: record.isEnable + }) + + }, 100) - // 时间单独处理 - if (record.lastEditorDate) { - this.form.getFieldDecorator('lastEditorDate', { initialValue: moment(record.lastEditorDate, 'YYYY-MM-DD') }) - this.lastEditorDateDateString = moment(record.lastEditorDate).format('YYYY-MM-DD') - } - // 时间单独处理 - if (record.publishDate) { - this.form.getFieldDecorator('publishDate', { initialValue: moment(record.publishDate, 'YYYY-MM-DD') }) - this.publishDateDateString = moment(record.publishDate).format('YYYY-MM-DD') - } - // 时间单独处理 - if (record.updateDate) { - this.form.getFieldDecorator('updateDate', { initialValue: moment(record.updateDate, 'YYYY-MM-DD') }) - this.updateDateDateString = moment(record.updateDate).format('YYYY-MM-DD') - } - // 时间单独处理 - if (record.createDate) { - this.form.getFieldDecorator('createDate', { initialValue: moment(record.createDate, 'YYYY-MM-DD') }) - this.createDateDateString = moment(record.createDate).format('YYYY-MM-DD') - } }, - handleSubmit () { - const { form: { validateFields } } = this + handleSubmit() { + const { + form: { + validateFields + } + } = this this.confirmLoading = true validateFields((errors, values) => { if (!errors) { for (const key in values) { - if (typeof (values[key]) === 'object' && values[key] != null) { + if (typeof(values[key]) === 'object' && values[key] != null) { values[key] = JSON.stringify(values[key]) } } - values.lastEditorDate = this.lastEditorDateDateString || null - values.publishDate = this.publishDateDateString || null - values.updateDate = this.updateDateDateString || null - values.createDate = this.createDateDateString || null blogArticleEdit(values).then((res) => { if (res.success) { this.$message.success('编辑成功') @@ -259,7 +159,7 @@ this.$emit('ok', values) this.handleCancel() } else { - this.$message.error('编辑失败')// + res.message + this.$message.error('编辑失败') // + res.message } }).finally((res) => { this.confirmLoading = false @@ -269,27 +169,7 @@ } }) }, - lastEditorDateOnChange(date, dateString) { - this.lastEditorDateDateString = dateString - }, - publishDateOnChange(date, dateString) { - this.publishDateDateString = dateString - }, - updateDateOnChange(date, dateString) { - this.updateDateDateString = dateString - }, - createDateOnChange(date, dateString) { - this.createDateDateString = dateString - }, - handleCancel () { - this.lastEditorDateDateString ='' - this.form.getFieldDecorator('lastEditorDate', { initialValue: null }) - this.publishDateDateString ='' - this.form.getFieldDecorator('publishDate', { initialValue: null }) - this.updateDateDateString ='' - this.form.getFieldDecorator('updateDate', { initialValue: null }) - this.createDateDateString ='' - this.form.getFieldDecorator('createDate', { initialValue: null }) + handleCancel() { this.form.resetFields() this.visible = false } -- Gitblit v1.9.1