278 lines
9.5 KiB
Vue
278 lines
9.5 KiB
Vue
<template>
|
|
<j-modal
|
|
:title="title"
|
|
:maskClosable="true"
|
|
:width="800"
|
|
:closable="true"
|
|
switchFullscreen
|
|
@cancel="handleCancel"
|
|
@ok="handleOk"
|
|
:visible="visible">
|
|
|
|
<a-spin :spinning="confirmLoading">
|
|
<a-form :form="form">
|
|
<a-row :gutter="24">
|
|
<!-- 分类 -->
|
|
<a-col :span="12">
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('businessSupport.questionAnswer.classify')">
|
|
<a-select :placeholder="$t('pleaseSelect') + $t('businessSupport.questionAnswer.classify')"
|
|
allowClear
|
|
@change="typeChange"
|
|
v-decorator.trim="[ 'type', validatorRules.type]">
|
|
<a-select-option :value="null" :key="-1">请选择</a-select-option>
|
|
<a-select-option value="1">国内标准</a-select-option>
|
|
<a-select-option value="2">海外标准</a-select-option>
|
|
<a-select-option value="3">企业标准</a-select-option>
|
|
<a-select-option value="4">其他问题</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<!-- 标准编号 -->
|
|
<a-col :span="12">
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardNumber')">
|
|
<standard-selection
|
|
v-decorator.trim="[ 'standardNumber', validatorRules.standardNumber]"
|
|
:placeholder="$t('pleaseSelect') + $t('standardNumber')"
|
|
:source="['1', '2', '3'].includes(form.getFieldValue('type')) ? form.getFieldValue('type') : undefined"
|
|
:disabledSourceSearch="['1', '2', '3'].includes(form.getFieldValue('type'))"
|
|
:selectOnly="true"
|
|
type="radio"
|
|
@nameChange="standardNameChange"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<!-- 标准名称 -->
|
|
<a-col :span="12">
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardName')">
|
|
<a-input disabled :placeholder="$t('pleaseEnter') + $t('standardName')"
|
|
v-decorator.trim="[ 'standardName', validatorRules.standardName]"/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<!-- 标题 -->
|
|
<a-col :span="12">
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('title')">
|
|
<a-input v-decorator.trim="[ 'title', validatorRules.title]"
|
|
:maxLength="50"
|
|
:placeholder="$t('pleaseEnter') + $t('title')"/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<!-- 项目 -->
|
|
<a-col :span="12">
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('project')">
|
|
<a-select :placeholder="$t('pleaseSelect') + $t('project')"
|
|
allowClear
|
|
show-search
|
|
:filter-option="filterOption"
|
|
v-decorator="[ 'project', validatorRules.project]">
|
|
<a-select-option :value="undefined" :key="-1">请选择</a-select-option>
|
|
<a-select-option v-for="item in projectList" :value="item.id" :key="item.id" :title="item.projectName">{{ item.projectName }}</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<!-- 提问时间 -->
|
|
<a-col :span="12">
|
|
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('businessSupport.questionAnswer.quizTime')">
|
|
<a-date-picker
|
|
style="width: 100%"
|
|
v-decorator.trim="[ 'quizTime', validatorRules.quizTime]"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
showTime
|
|
></a-date-picker>
|
|
</a-form-item>
|
|
</a-col>
|
|
<!-- 问题描述 -->
|
|
<a-col :span="24">
|
|
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('businessSupport.questionAnswer.questionDesc')">
|
|
<a-textarea
|
|
v-decorator="[ 'problemDescription', validatorRules.problemDescription]"
|
|
:placeholder="$t('pleaseEnter')+$t('businessSupport.questionAnswer.questionDesc')"
|
|
:maxLength="500"
|
|
:rows="4" />
|
|
<j-upload v-decorator.trim="[ 'file', validatorRules.file]"
|
|
returnId
|
|
isDownload>
|
|
</j-upload>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</a-spin>
|
|
|
|
</j-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import { postAction } from '@/api/manage'
|
|
import { getCarTypeProjectList } from '@/api/projectLibraryApi.js'
|
|
// 双向绑定的标准选择器
|
|
import StandardSelection from '@/components/selection/StandardSelection'
|
|
import pick from 'lodash.pick'
|
|
import moment from 'moment'
|
|
|
|
export default {
|
|
name: 'QuizModal',
|
|
components: { StandardSelection },
|
|
data () {
|
|
return {
|
|
title: '',
|
|
visible: false,
|
|
confirmLoading: false,
|
|
form: this.$form.createForm(this),
|
|
model: {},
|
|
labelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 6 }
|
|
},
|
|
wrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 18 }
|
|
},
|
|
longLabelCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 3 }
|
|
},
|
|
longWrapperCol: {
|
|
xs: { span: 24 },
|
|
sm: { span: 21 }
|
|
},
|
|
validatorRules: {
|
|
type: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseSelect') + this.$t('businessSupport.questionAnswer.classify') }
|
|
],
|
|
validateTrigger: 'change'
|
|
},
|
|
standardNumber: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseSelect') + this.$t('standardNumber') }
|
|
],
|
|
validateTrigger: 'change'
|
|
},
|
|
standardName: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseEnter') + this.$t('standardName') }
|
|
],
|
|
validateTrigger: 'blur'
|
|
},
|
|
title: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseEnter') + this.$t('title') }
|
|
],
|
|
validateTrigger: 'blur'
|
|
},
|
|
project: {
|
|
rules: [
|
|
{ required: false, message: this.$t('pleaseSelect') + this.$t('project') }
|
|
],
|
|
validateTrigger: 'change'
|
|
},
|
|
quizTime: {
|
|
rules: [
|
|
{ required: false, message: this.$t('pleaseSelect') + this.$t('businessSupport.questionAnswer.quizTime') }
|
|
],
|
|
validateTrigger: 'change'
|
|
},
|
|
problemDescription: {
|
|
rules: [
|
|
{ required: true, message: this.$t('pleaseEnter') + this.$t('businessSupport.questionAnswer.questionDesc') }
|
|
],
|
|
validateTrigger: 'blur'
|
|
},
|
|
file: {
|
|
rules: [
|
|
{ required: false, message: this.$t('pleaseSelect') + this.$t('businessSupport.questionAnswer.attach') }
|
|
],
|
|
validateTrigger: 'change'
|
|
}
|
|
},
|
|
url: {
|
|
quiz: '/laws/library/lawsProblemLibrary/addProblem'
|
|
},
|
|
projectList: [] // 项目下拉框数据
|
|
}
|
|
},
|
|
created () {
|
|
this.getCarTypeProjectList()
|
|
},
|
|
methods: {
|
|
open () {
|
|
this.visible = true
|
|
this.form.resetFields()
|
|
const param = {}
|
|
param.quizTime = moment().format('YYYY-MM-DD HH:mm:ss')
|
|
this.$nextTick(() => {
|
|
this.form.setFieldsValue(pick(param, 'quizTime'))
|
|
})
|
|
},
|
|
// 获取项目下拉框数据
|
|
getCarTypeProjectList () {
|
|
getCarTypeProjectList({ column: 'createTime', order: 'desc' }).then(res => {
|
|
if (res.success) {
|
|
this.projectList = res.result
|
|
} else {
|
|
this.projectList = []
|
|
}
|
|
})
|
|
},
|
|
// 分类改变
|
|
typeChange (value) {
|
|
// 清空标准,否则分类可以和标准类型不一致
|
|
this.form.resetFields(['standardNumber', 'standardName'])
|
|
if (value) {
|
|
if (value === '4') {
|
|
// 是其他问题，标准编号和标准名称不必填
|
|
this.validatorRules.standardNumber.rules[0].required = false
|
|
this.validatorRules.standardName.rules[0].required = false
|
|
} else {
|
|
// 标准编号和标准名称必填
|
|
this.validatorRules.standardNumber.rules[0].required = true
|
|
this.validatorRules.standardName.rules[0].required = true
|
|
}
|
|
}
|
|
},
|
|
// 标准选择名称改变的回调
|
|
standardNameChange (value) {
|
|
const param = { standardName: value }
|
|
this.$nextTick(() => {
|
|
this.form.setFieldsValue(pick(param, 'standardName'))
|
|
})
|
|
},
|
|
handleCancel () {
|
|
this.close()
|
|
},
|
|
handleOk () {
|
|
if (this.confirmLoading) return
|
|
this.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
this.confirmLoading = true
|
|
const param = Object.assign({}, values)
|
|
postAction(this.url.quiz, param).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
this.$emit('ok')
|
|
this.close()
|
|
} else {
|
|
this.$message.warning(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.confirmLoading = false
|
|
})
|
|
}
|
|
})
|
|
},
|
|
close () {
|
|
this.visible = false
|
|
},
|
|
filterOption (input, option) {
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|