初始化
This commit is contained in:
aixianling
244
packages/2.0.5/AppForm/components/FormConfig.vue
vendored
Normal file
244
packages/2.0.5/AppForm/components/FormConfig.vue
vendored
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="basicInfo">
|
||||
<ai-card title="搜索字段" class="search-wrapper">
|
||||
<template #content>
|
||||
<el-checkbox-group v-model="queryFields">
|
||||
<el-checkbox
|
||||
:label="`${item.fieldDbName}~${item.fieldName}`"
|
||||
v-for="(item, index) in tableInfos"
|
||||
:key="index">
|
||||
{{ item.fieldName }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="表格字段">
|
||||
<template #content>
|
||||
<div class="ai-table">
|
||||
<div class="el-table el-table--border ai-header__border">
|
||||
<el-scrollbar>
|
||||
<table cellspacing="0" cellpadding="0" border="0" class="el-table__body">
|
||||
<draggable element="thead" animation="500" class="el-table__header is-leaf ai-table__header" :sort="true" v-model="showFields">
|
||||
<th v-for="(item, index) in showFields" style="background: #f3f4f5; text-align: center;" class="ai-table__header" :key="index">{{ item.fieldName }}</th>
|
||||
</draggable>
|
||||
<tbody element="tbody">
|
||||
<tr>
|
||||
<td @click="handleShow(index, item.isShow)" v-for="(item, index) in showFields" :key="index">{{ item.isShow ? '已显示' : '已隐藏' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-card title="排序和操作按钮">
|
||||
<template #content>
|
||||
<el-form ref="form" class="ai-form" :model="form" label-width="110px" label-position="right">
|
||||
<el-form-item label="排序字段" prop="field">
|
||||
<el-select
|
||||
size="small"
|
||||
placeholder="默认按创建时间排序"
|
||||
clearable
|
||||
v-model="form.field">
|
||||
<el-option
|
||||
v-for="(filed, index) in tableInfos"
|
||||
:key="index"
|
||||
:label="filed.fieldName"
|
||||
:value="`${filed.fieldDbName}~${filed.fieldName}`">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序类型" prop="orderType" :rules="[{ required: true, message: '请输入排序类型', trigger: 'change' }]">
|
||||
<el-radio-group v-model="form.orderType">
|
||||
<el-radio label="asc">升序</el-radio>
|
||||
<el-radio label="desc">降序</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="按钮配置" prop="btns" style="width: 100%;" :rules="[{ required: true, message: '请输入按钮配置', trigger: 'change' }]">
|
||||
<el-checkbox-group v-model="form.btns">
|
||||
<el-checkbox label="insertEnable">添加</el-checkbox>
|
||||
<el-checkbox label="importEnable">导入</el-checkbox>
|
||||
<el-checkbox label="exportEnalbe">导出</el-checkbox>
|
||||
<el-checkbox label="editEnable">编辑</el-checkbox>
|
||||
<el-checkbox label="deleteEnable">删除</el-checkbox>
|
||||
<el-checkbox label="batchDelEnable">批量删除</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</ai-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
export default {
|
||||
name: 'configForm',
|
||||
|
||||
props: {
|
||||
tableInfos: Array,
|
||||
btns: Array,
|
||||
showListFields: Array,
|
||||
orderFields: Array,
|
||||
fuzzyQueryFields: Array
|
||||
},
|
||||
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
queryFields: [],
|
||||
tableData: [{}],
|
||||
btnKeys: ['insertEnable', 'importEnable', 'exportEnalbe', 'editEnable', 'deleteEnable', 'batchDelEnable'],
|
||||
form: {
|
||||
btns: [],
|
||||
orderType: 'asc',
|
||||
field: ''
|
||||
},
|
||||
showFields: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
const showIds = this.showListFields.map(v => v.fieldDbName)
|
||||
this.showFields = JSON.parse(JSON.stringify(this.tableInfos)).map(item => {
|
||||
item.isShow = showIds.indexOf(item.fieldDbName) > -1 ? true : false
|
||||
|
||||
return item
|
||||
})
|
||||
|
||||
if (!this.showListFields.length) {
|
||||
this.showFields.map(v => {
|
||||
v.isShow = true
|
||||
return v
|
||||
})
|
||||
}
|
||||
|
||||
this.tableInfos.map(item => {
|
||||
this.tableData[0][item.fieldDbName] = '删除'
|
||||
})
|
||||
|
||||
if (this.btns.length) {
|
||||
this.form.btns = this.btns
|
||||
}
|
||||
|
||||
const tableInfosIds = this.tableInfos.map(v => v.fieldDbName)
|
||||
|
||||
if (this.orderFields.length) {
|
||||
let arr = this.orderFields.filter(v => {
|
||||
return tableInfosIds.indexOf(v.fieldDbName) > -1
|
||||
}).map(item => {
|
||||
return `${item.fieldDbName}~${item.fieldName}`
|
||||
})
|
||||
|
||||
if (arr.length) {
|
||||
this.form.field = arr[0]
|
||||
}
|
||||
}
|
||||
if (this.fuzzyQueryFields.length) {
|
||||
this.queryFields = this.fuzzyQueryFields.filter(v => {
|
||||
return tableInfosIds.indexOf(v.fieldDbName) > -1
|
||||
}).map(item => {
|
||||
return `${item.fieldDbName}~${item.fieldName}`
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
validate () {
|
||||
let result = false
|
||||
this.$refs.form.validate(valid => {
|
||||
result = valid
|
||||
})
|
||||
|
||||
if (!result) {
|
||||
return false
|
||||
}
|
||||
|
||||
const btns = {}
|
||||
this.btnKeys.forEach(item => {
|
||||
btns[item] = this.form.btns.indexOf(item) > -1 ? 1 : 0
|
||||
})
|
||||
|
||||
return {
|
||||
btns,
|
||||
orderFields: [{
|
||||
fieldName: this.form.field.split('~')[1],
|
||||
fieldDbName: this.form.field.split('~')[0],
|
||||
orderType: this.form.orderType
|
||||
}],
|
||||
showListFields: this.showFields.filter(v => v.isShow).map((v, index) => {
|
||||
return {
|
||||
fieldName: v.fieldName,
|
||||
fieldDbName: v.fieldDbName,
|
||||
showListIndex: index
|
||||
}
|
||||
}),
|
||||
fuzzyQueryFields: this.queryFields.map(v => {
|
||||
return {
|
||||
fieldName: v.split('~')[1],
|
||||
fieldDbName: v.split('~')[0]
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
handleShow (index, isShow) {
|
||||
const total = this.showFields.map(v => v.isShow).filter(v => !!v)
|
||||
if (total.length <= 1 && isShow) {
|
||||
return this.$message.error('表格列数不能小于1')
|
||||
}
|
||||
|
||||
this.$set(this.showFields[index], 'isShow', !isShow)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.basicInfo {
|
||||
.search-wrapper {
|
||||
::v-deep .el-checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.el-checkbox {
|
||||
width: 16.66%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ai-table {
|
||||
.el-table--border {
|
||||
border: 1px solid #d0d4dc;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
}
|
||||
table {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
th, tr {
|
||||
min-width: 100px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
tr {
|
||||
td {
|
||||
cursor: pointer;
|
||||
color: #26f;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user