|
@@ -13,54 +13,79 @@
|
|
|
<v-pager @page="callPage" :total="totalrecords"></v-pager>
|
|
|
<el-dialog :visible.sync="dialogFormVisible" width="650px" :before-close="close" :close-on-click-modal="false">
|
|
|
<el-form :model="form" ref="form" label-width="140px" :rules="state!==2 ? rules : {}" label-position="left">
|
|
|
- <el-form-item label="表单名称" prop="formName">
|
|
|
- <el-input v-if="state!==2" v-model="form.formName" placeholder="请输入表单名称" autocomplete="off"></el-input>
|
|
|
+ <el-form-item :label="$t('title.formName')" prop="formName">
|
|
|
+ <el-input v-if="state!==2" v-model="form.formName" :placeholder="$t('message.pleaseEnter') + $t('title.formName')" autocomplete="off"></el-input>
|
|
|
<div v-else>{{form.formName}}</div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="说明" prop="formIntroduce">
|
|
|
- <el-input v-if="state!==2" type="textarea" :rows="4" resize="none" placeholder="请输入说明" v-model="form.formIntroduce"></el-input>
|
|
|
+ <el-form-item :label="$t('title.description')" prop="formIntroduce">
|
|
|
+ <el-input v-if="state!==2" type="textarea" :rows="4" resize="none" :placeholder="$t('message.pleaseEnter') + $t('title.description')" v-model="form.formIntroduce"></el-input>
|
|
|
<div v-else>{{form.formIntroduce}}</div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item :label="state!==2?'选择需要的表单项':'已选择的表单项'" prop="checkList">
|
|
|
- <div v-if="state!==2">勾选需要的表单选项,点击生成表单即可</div>
|
|
|
- <el-checkbox-group v-if="state!==2" v-model="form.checkList">
|
|
|
+ <el-form-item :label="state!==2?$t('message.selectTheRequiredFormItem'):$t('message.selectedFormItem')" prop="checkList">
|
|
|
+ <div v-if="state!==2">{{$t('message.longFormMessage')}}</div>
|
|
|
+ <el-checkbox v-if="state!==2" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{$t('button.selectAll')}}</el-checkbox>
|
|
|
+ <div v-if="state!==2" style="margin: 15px 0;"></div>
|
|
|
+ <el-checkbox-group v-if="state!==2" v-model="form.checkList" @change="handleCheckedCitiesChange">
|
|
|
<div v-for="item in formConfigList" :key="item.id">
|
|
|
- <el-checkbox :label="item.id">{{item.configName + ' ' + (item.type === 0 ? '单行输入框' : item.type === 1 ? '多行输入框' : '下拉选择框')}}</el-checkbox>
|
|
|
+ <el-checkbox :label="item.id">{{item.configName + ' ' + (item.type === 0 ? $t('info.singleLineInputBox') : item.type === 1 ? $t('info.multiLineInputBox') : $t('info.dropDownSelectionBox'))}}</el-checkbox>
|
|
|
</div>
|
|
|
</el-checkbox-group>
|
|
|
<div v-else>
|
|
|
<div v-for="item in formConfigList.filter(i => form.checkList.includes(i.id))" :key="item.id">
|
|
|
<div>{{item.configName}}</div>
|
|
|
- <el-input class="p10" disabled v-if="item.type === 0" :placeholder="'请输入' + item.configName"></el-input>
|
|
|
- <el-input class="p10" disabled v-else-if="item.type === 1" type="textarea" :rows="4" resize="none" :placeholder="'请输入' + item.configName"></el-input>
|
|
|
- <el-select class="p10" disabled v-else :placeholder="'请选择' + item.configName"></el-select>
|
|
|
+ <el-input class="p10" v-if="item.type === 0" v-model="info[item.fieldName]" :placeholder="$t('message.pleaseEnter') + item.configName"></el-input>
|
|
|
+ <el-input class="p10" v-else-if="item.type === 1" v-model="info[item.fieldName]" type="textarea" :rows="4" resize="none" :placeholder="$t('message.pleaseEnter') + item.configName"></el-input>
|
|
|
+ <el-select class="p10" v-else-if="item.type === 2" v-model="info[item.fieldName]" :placeholder="$t('message.pleaseChoose') + item.configName">
|
|
|
+ <el-option label="男" value="男"></el-option>
|
|
|
+ <el-option label="女" value="女"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-date-picker class="p10" v-else-if="item.type === 3" v-model="info[item.fieldName]" type="date" :placeholder="$t('message.pleaseChoose') + item.configName"></el-date-picker>
|
|
|
+ <el-cascader class="p10" v-else-if="item.type === 4" :props="{value: 'name', label: 'name'}" v-model="info[item.fieldName]" :options="options" :placeholder="$t('message.pleaseChoose') + item.configName"></el-cascader>
|
|
|
+ <el-cascader class="p10" v-else-if="item.type === 5" :props="{value: 'name', label: 'name'}" v-model="info[item.fieldName]" :options="city" :placeholder="$t('message.pleaseChoose') + item.configName"></el-cascader>
|
|
|
+ <!-- <el-button class="p10" v-else-if="item.type === 8" type="success" v-model="info[item.fieldName]">{{$t('message.pleaseUpload') + item.configName}}</el-button> -->
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ action=""
|
|
|
+ v-else-if="item.type === 8"
|
|
|
+ :before-upload="()=>false"
|
|
|
+ multiple
|
|
|
+ :limit="3">
|
|
|
+ <el-button size="small" type="primary">{{$t('button.clickUpload')}}</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <el-select class="p10" v-else-if="item.type === 9" v-model="info[item.fieldName]" :placeholder="$t('message.pleaseChoose') + item.configName">
|
|
|
+ <el-option v-for="item in educationList" :key="item.name" :label="item.name" :value="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="close">取 消</el-button>
|
|
|
- <el-button type="primary" v-if="state!==2" @click="determine">生成表单</el-button>
|
|
|
+ <el-button @click="close">{{$t('button.cancel')}}</el-button>
|
|
|
+ <el-button type="primary" v-if="state!==2" @click="determine">{{$t('button.generateForm')}}</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import addr from '../../common/addr'
|
|
|
export default {
|
|
|
data () {
|
|
|
let validcodeName = (rule, value, callback) => {
|
|
|
if (!value.length) {
|
|
|
- callback(new Error('请选择需要的表单项'))
|
|
|
+ callback(new Error(this.$t('message.selectTheRequiredFormItem')))
|
|
|
} else {
|
|
|
callback()
|
|
|
}
|
|
|
}
|
|
|
return {
|
|
|
tableList: [],
|
|
|
+ educationList: [{ name: this.$t('button.juniorCollege') }, { name: this.$t('button.undergraduate') }, { name: this.$t('button.masterSDegree') }, { name: this.$t('button.phD') }, { name: this.$t('button.other') }],
|
|
|
dialogFormVisible: false,
|
|
|
page: 1,
|
|
|
state: 0,
|
|
|
+ checkAll: false,
|
|
|
+ isIndeterminate: true,
|
|
|
form: {
|
|
|
formName: '',
|
|
|
formIntroduce: '',
|
|
@@ -72,12 +97,12 @@ export default {
|
|
|
rules: {
|
|
|
formName: [{
|
|
|
required: true,
|
|
|
- message: '请选择活动区域',
|
|
|
+ message: this.$t('message.pleaseEnter') + this.$t('title.formName'),
|
|
|
trigger: 'blur'
|
|
|
}],
|
|
|
formIntroduce: [{
|
|
|
required: true,
|
|
|
- message: '请选择活动区域',
|
|
|
+ message: this.$t('message.pleaseEnter') + this.$t('title.description'),
|
|
|
trigger: 'blur'
|
|
|
}],
|
|
|
checkList: [{
|
|
@@ -85,38 +110,40 @@ export default {
|
|
|
trigger: 'blur'
|
|
|
}]
|
|
|
},
|
|
|
+ options: addr.addr,
|
|
|
+ info: {},
|
|
|
list: [],
|
|
|
btn: [{
|
|
|
- name: '添加',
|
|
|
+ name: this.$t('button.addTo'),
|
|
|
type: 'success',
|
|
|
method: 'add'
|
|
|
}],
|
|
|
table: {
|
|
|
column: [{
|
|
|
- label: '编号',
|
|
|
+ label: this.$t('field.numbering'),
|
|
|
props: 'id'
|
|
|
},
|
|
|
{
|
|
|
- label: '表单名称',
|
|
|
+ label: this.$t('field.formName'),
|
|
|
props: 'formName'
|
|
|
},
|
|
|
{
|
|
|
- label: '说明',
|
|
|
+ label: this.$t('field.description'),
|
|
|
props: 'formIntroduce'
|
|
|
}
|
|
|
],
|
|
|
handle: [{
|
|
|
- title: '查看',
|
|
|
+ title: this.$t('button.view'),
|
|
|
method: 'details',
|
|
|
type: 'info'
|
|
|
},
|
|
|
{
|
|
|
- title: '编辑',
|
|
|
+ title: this.$t('button.edit'),
|
|
|
method: 'editor',
|
|
|
type: 'warning'
|
|
|
},
|
|
|
{
|
|
|
- title: '删除',
|
|
|
+ title: this.$t('button.delete'),
|
|
|
method: 'del',
|
|
|
type: 'danger'
|
|
|
}
|
|
@@ -124,7 +151,20 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ city () {
|
|
|
+ let options = JSON.parse(JSON.stringify(this.options))
|
|
|
+ return options.map(item => {
|
|
|
+ item.children = item.children.map(item => {
|
|
|
+ delete item.children
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
created () {
|
|
|
+ console.log(this.options)
|
|
|
this.queryData()
|
|
|
this.queryFormConfigList()
|
|
|
},
|
|
@@ -146,7 +186,7 @@ export default {
|
|
|
this.$api
|
|
|
.post('/formConfig/queryFormConfigList', {
|
|
|
reqdata: {},
|
|
|
- rows: 20
|
|
|
+ rows: 50
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.formConfigList = res.list
|
|
@@ -180,9 +220,9 @@ export default {
|
|
|
this.state = 1
|
|
|
},
|
|
|
del (row) {
|
|
|
- this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
+ this.$confirm(this.$t('message.confirmMessage') + '?', this.$t('info.prompt'), {
|
|
|
+ confirmButtonText: this.$t('info.determine'),
|
|
|
+ cancelButtonText: this.$t('info.cancel'),
|
|
|
type: 'warning'
|
|
|
}).then(() => {
|
|
|
let reqdata = {
|
|
@@ -194,7 +234,7 @@ export default {
|
|
|
})
|
|
|
.then((res) => {
|
|
|
this.$message({
|
|
|
- message: '删除成功',
|
|
|
+ message: this.$t('message.successfullyModified') + '!',
|
|
|
type: 'success'
|
|
|
})
|
|
|
this.queryData()
|
|
@@ -202,11 +242,12 @@ export default {
|
|
|
}).catch(() => {
|
|
|
this.$message({
|
|
|
type: 'info',
|
|
|
- message: '已取消删除'
|
|
|
+ message: this.$t('message.undeleted') + '!'
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
determine () {
|
|
|
+ console.log(this.form)
|
|
|
let a
|
|
|
this.$refs['form'].validate((valid) => {
|
|
|
a = valid
|
|
@@ -239,10 +280,20 @@ export default {
|
|
|
formIntroduce: '',
|
|
|
checkList: []
|
|
|
}
|
|
|
+ this.info = {}
|
|
|
},
|
|
|
callPage (val) {
|
|
|
this.page = val
|
|
|
this.queryData()
|
|
|
+ },
|
|
|
+ handleCheckAllChange (val) {
|
|
|
+ this.$set(this.form, 'checkList', val ? this.formConfigList.map(item => item.id) : [])
|
|
|
+ this.isIndeterminate = false
|
|
|
+ },
|
|
|
+ handleCheckedCitiesChange (value) {
|
|
|
+ let checkedCount = value.length
|
|
|
+ this.$set(this.$data, 'checkAll', checkedCount === this.formConfigList.length)
|
|
|
+ this.isIndeterminate = checkedCount > 0 && checkedCount < this.formConfigList.length
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -252,6 +303,10 @@ export default {
|
|
|
this.$refs['form'].resetFields()
|
|
|
}
|
|
|
}
|
|
|
+ },
|
|
|
+ 'form.checkList' (val) {
|
|
|
+ this.$set(this.$data, 'checkAll', val.length === this.formConfigList.length)
|
|
|
+ this.isIndeterminate = !!val.length && val.length !== this.formConfigList.length
|
|
|
}
|
|
|
}
|
|
|
}
|