|
@@ -7,50 +7,43 @@
|
|
* @LastEditTime: 2020-08-11 17:27:00
|
|
* @LastEditTime: 2020-08-11 17:27:00
|
|
-->
|
|
-->
|
|
<template>
|
|
<template>
|
|
- <div class="indexPage">
|
|
|
|
|
|
+<div class="indexPage">
|
|
<v-input :btn="btn" :list="list" @add="add"></v-input>
|
|
<v-input :btn="btn" :list="list" @add="add"></v-input>
|
|
- <v-table
|
|
|
|
- :table="table"
|
|
|
|
- :tableList="tableList"
|
|
|
|
- :sortType="true"
|
|
|
|
- :queryData="queryData"
|
|
|
|
- @details="details"
|
|
|
|
- @editor="editor"
|
|
|
|
- @del="del"
|
|
|
|
- ></v-table>
|
|
|
|
|
|
+ <v-table :table="table" :tableList="tableList" :sortType="true" :queryData="queryData" @details="details" @editor="editor" @del="del"></v-table>
|
|
<v-pager @page="callPage" :total="totalrecords"></v-pager>
|
|
<v-pager @page="callPage" :total="totalrecords"></v-pager>
|
|
<el-dialog :visible.sync="dialogFormVisible" width="650px" :before-close="close" :close-on-click-modal="false">
|
|
<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>
|
|
|
|
- <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>
|
|
|
|
- <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">
|
|
|
|
- <div v-for="item in formConfigList" :key="item.id" >
|
|
|
|
- <el-checkbox :label="item.id">{{item.configName + ' ' + (item.type === 0 ? '单行输入框' : item.type === 1 ? '多行输入框' : '下拉选择框')}}</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">
|
|
|
|
- <el-input class="p10" v-if="item.type === 0" :placeholder="'请输入' + item.configName"></el-input>
|
|
|
|
- <el-input class="p10" v-else-if="item.type === 1" type="textarea" :rows="4" resize="none" :placeholder="'请输入' + item.configName"></el-input>
|
|
|
|
- <el-select class="p10" v-else :placeholder="'请选择' + item.configName"></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>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <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>
|
|
|
|
+ <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>
|
|
|
|
+ <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">
|
|
|
|
+ <div v-for="item in formConfigList" :key="item.id">
|
|
|
|
+ <el-checkbox :label="item.id">{{item.configName + ' ' + (item.type === 0 ? '单行输入框' : item.type === 1 ? '多行输入框' : '下拉选择框')}}</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" v-if="item.type === 0" :placeholder="'请输入' + item.configName"></el-input>
|
|
|
|
+ <el-input class="p10" v-else-if="item.type === 1" type="textarea" :rows="4" resize="none" :placeholder="'请输入' + item.configName"></el-input>
|
|
|
|
+ <el-select class="p10" v-else :placeholder="'请选择' + item.configName"></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>
|
|
|
|
+ </div>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
- </div>
|
|
|
|
|
|
+</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
@@ -77,55 +70,56 @@ export default {
|
|
totalrecords: 0,
|
|
totalrecords: 0,
|
|
pickList: [],
|
|
pickList: [],
|
|
rules: {
|
|
rules: {
|
|
- formName: [
|
|
|
|
- { required: true, message: '请选择活动区域', trigger: 'blur' }
|
|
|
|
- ],
|
|
|
|
- formIntroduce: [
|
|
|
|
- { required: true, message: '请选择活动区域', trigger: 'blur' }
|
|
|
|
- ],
|
|
|
|
- checkList: [
|
|
|
|
- { validator: validcodeName, trigger: 'blur' }
|
|
|
|
- ]
|
|
|
|
|
|
+ formName: [{
|
|
|
|
+ required: true,
|
|
|
|
+ message: '请选择活动区域',
|
|
|
|
+ trigger: 'blur'
|
|
|
|
+ }],
|
|
|
|
+ formIntroduce: [{
|
|
|
|
+ required: true,
|
|
|
|
+ message: '请选择活动区域',
|
|
|
|
+ trigger: 'blur'
|
|
|
|
+ }],
|
|
|
|
+ checkList: [{
|
|
|
|
+ validator: validcodeName,
|
|
|
|
+ trigger: 'blur'
|
|
|
|
+ }]
|
|
},
|
|
},
|
|
list: [],
|
|
list: [],
|
|
- btn: [
|
|
|
|
|
|
+ btn: [{
|
|
|
|
+ name: '添加',
|
|
|
|
+ type: 'success',
|
|
|
|
+ method: 'add'
|
|
|
|
+ }],
|
|
|
|
+ table: {
|
|
|
|
+ column: [{
|
|
|
|
+ label: '编号',
|
|
|
|
+ props: 'id'
|
|
|
|
+ },
|
|
{
|
|
{
|
|
- name: '添加',
|
|
|
|
- type: 'success',
|
|
|
|
- method: 'add'
|
|
|
|
|
|
+ label: '表单名称',
|
|
|
|
+ props: 'formName'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '说明',
|
|
|
|
+ props: 'formIntroduce'
|
|
}
|
|
}
|
|
- ],
|
|
|
|
- table: {
|
|
|
|
- column: [
|
|
|
|
- {
|
|
|
|
- label: '编号',
|
|
|
|
- props: 'id'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: '表单名称',
|
|
|
|
- props: 'formName'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- label: '说明',
|
|
|
|
- props: 'formIntroduce'
|
|
|
|
- }
|
|
|
|
],
|
|
],
|
|
- handle: [
|
|
|
|
- {
|
|
|
|
- title: '查看',
|
|
|
|
- method: 'details',
|
|
|
|
- type: 'info'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '编辑',
|
|
|
|
- method: 'editor',
|
|
|
|
- type: 'warning'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '删除',
|
|
|
|
- method: 'del',
|
|
|
|
- type: 'danger'
|
|
|
|
- }
|
|
|
|
|
|
+ handle: [{
|
|
|
|
+ title: '查看',
|
|
|
|
+ method: 'details',
|
|
|
|
+ type: 'info'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '编辑',
|
|
|
|
+ method: 'editor',
|
|
|
|
+ type: 'warning'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '删除',
|
|
|
|
+ method: 'del',
|
|
|
|
+ type: 'danger'
|
|
|
|
+ }
|
|
]
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -164,7 +158,9 @@ export default {
|
|
this.state = 0
|
|
this.state = 0
|
|
},
|
|
},
|
|
getDetails (row) {
|
|
getDetails (row) {
|
|
- let reqdata = { id: row.id }
|
|
|
|
|
|
+ let reqdata = {
|
|
|
|
+ id: row.id
|
|
|
|
+ }
|
|
this.$api
|
|
this.$api
|
|
.post('/form/queryFormDetail', {
|
|
.post('/form/queryFormDetail', {
|
|
reqdata
|
|
reqdata
|
|
@@ -189,7 +185,9 @@ export default {
|
|
cancelButtonText: '取消',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
type: 'warning'
|
|
}).then(() => {
|
|
}).then(() => {
|
|
- let reqdata = { id: row.id }
|
|
|
|
|
|
+ let reqdata = {
|
|
|
|
+ id: row.id
|
|
|
|
+ }
|
|
this.$api
|
|
this.$api
|
|
.post('/form/deleteForm', {
|
|
.post('/form/deleteForm', {
|
|
reqdata
|
|
reqdata
|
|
@@ -260,12 +258,13 @@ export default {
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
- .dialog-footer {
|
|
|
|
|
|
+.dialog-footer {
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
- }
|
|
|
|
- .p10 {
|
|
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.p10 {
|
|
padding: 8px;
|
|
padding: 8px;
|
|
- }
|
|
|
|
|
|
+}
|
|
</style>
|
|
</style>
|