176 lines
7.8 KiB
Vue
176 lines
7.8 KiB
Vue
<template>
|
|
<div v-if="usercolumn.length>0" class="setting-column" v-loading="isSave">
|
|
<div class="setting-column__title">
|
|
<span class="move_b"></span>
|
|
<span class="show_b">显示</span>
|
|
<span class="name_b">名称</span>
|
|
<span class="width_b">宽度</span>
|
|
<span class="sortable_b">排序</span>
|
|
<span class="tabletype">表格类型</span>
|
|
<span class="tabletype">表单类型</span>
|
|
<span class="tablespan">表单跨度</span>
|
|
<span class="fixed_b">固定</span>
|
|
</div>
|
|
<div class="setting-column__list" ref="list">
|
|
<ul>
|
|
<li v-for="item in usercolumn" :key="item.prop">
|
|
<span class="move_b">
|
|
<el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
|
|
</span>
|
|
<span class="show_b">
|
|
<el-switch v-model="item.hide" :active-value="false" :inactive-value="true"></el-switch>
|
|
</span>
|
|
<span class="name_b" :title="item.prop">
|
|
<el-input v-model="item.label" placeholder="名称" size="small"></el-input>
|
|
</span>
|
|
<span class="width_b">
|
|
<el-input v-model="item.width" placeholder="auto" size="small"></el-input>
|
|
</span>
|
|
<span class="sortable_b">
|
|
<el-switch v-model="item.sortable"></el-switch>
|
|
</span>
|
|
<span class="tabletype">
|
|
<el-select v-model="item.columntype" size="small" :teleported="false" placeholder="选择">
|
|
<el-option value="" key="" label=""> 请选择 </el-option>
|
|
<el-option value="avatar" key="avatar" label="用户"> 用户 </el-option>
|
|
<el-option value="badge" key="badge" label="徽章"> 徽章 </el-option>
|
|
<el-option value="imagegroup" key="imagegroup" label="图组"> 图组 </el-option>
|
|
<el-option value="image" key="image" label="单图"> 单图 </el-option>
|
|
<el-option value="status" key="status" label="状态"> 状态 </el-option>
|
|
<el-option value="input" key="input" label="Input"> Input </el-option>
|
|
<el-option value="select" key="select" label="下拉选择"> 下拉选择 </el-option>
|
|
<el-option value="tag" key="tag" label="时间组件"> 时间组件 </el-option>
|
|
<el-option value="components" key="components" label="自定义组件"> 自定义组件 </el-option>
|
|
</el-select>
|
|
</span>
|
|
<span class="tabletype">
|
|
<el-select v-model="item.component" size="small" :teleported="false" placeholder="选择">
|
|
<el-option value="" key="" label=""> 请选择 </el-option>
|
|
<el-option value="input" key="input" label="Input"> Input </el-option>
|
|
<el-option value="title" key="title" label="标题占位"> 标题占位 </el-option>
|
|
<el-option value="checkbox" key="checkbox" label="复选框"> 复选框 </el-option>
|
|
<el-option value="radio" key="radio" label="单选"> 单选 </el-option>
|
|
<el-option value="select" key="select" label="下拉"> 下拉 </el-option>
|
|
<el-option value="checkboxGroup" key="checkboxGroup" label="复组组合"> 复组组合 </el-option>
|
|
<el-option value="upload" key="upload" label="文件上传"> 文件上传 </el-option>
|
|
<el-option value="updatemultiple" key="updatemultiple" label="多文件上传"> 多文件上传 </el-option>
|
|
<el-option value="switch" key="switch" label="开关"> 开关 </el-option>
|
|
<el-option value="cascader" key="cascader" label="级联选择器"> 级联选择器 </el-option>
|
|
<el-option value="date" key="date" label="日期选择"> 日期选择 </el-option>
|
|
<el-option value="number" key="number" label="数字"> 数字 </el-option>
|
|
<el-option value="color" key="color" label="颜色选择"> 颜色选择 </el-option>
|
|
<el-option value="rate" key="rate" label="评分"> 评分 </el-option>
|
|
<el-option value="slider" key="slider" label="滑块"> 滑块 </el-option>
|
|
<el-option value="tableselect" key="tableselect" label="表格选择"> 表格选择 </el-option>
|
|
<el-option value="editor" key="editor" label="编辑器"> 编辑器 </el-option>
|
|
<el-option value="text" key="text" label="文本"> 文本 </el-option>
|
|
<el-option value="avatar" key="avatar" label="头像"> 头像 </el-option>
|
|
<el-option value="formtable" key="formtable" label="表单表格"> 表单表格 </el-option>
|
|
</el-select>
|
|
</span>
|
|
<span class="tablespan">
|
|
<el-input v-model="item.span" :disabled="!item.component" size="small" placeholder="表单跨度"></el-input>
|
|
</span>
|
|
<span class="fixed_b">
|
|
<el-radio-group v-model="item.fixed" size="small">
|
|
<el-radio-button label="left">左</el-radio-button>
|
|
<el-radio-button label="">NO</el-radio-button>
|
|
<el-radio-button label="right">右</el-radio-button>
|
|
</el-radio-group>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="setting-column__bottom">
|
|
<!-- <el-button @click="Rendering" type="warning" :disabled="isSave">渲染</el-button> -->
|
|
<el-button @click="backDefaul" :disabled="isSave">重置</el-button>
|
|
<el-button @click="save" type="primary">保存</el-button>
|
|
</div>
|
|
</div>
|
|
<el-empty v-else description="暂无可配置的列" :image-size="80"></el-empty>
|
|
</template>
|
|
|
|
<script>
|
|
import Sortable from 'sortablejs'
|
|
|
|
export default {
|
|
components: {
|
|
Sortable
|
|
},
|
|
props: {
|
|
column: { type: Object, default: () => {} }
|
|
},
|
|
data() {
|
|
return {
|
|
isSave: false,
|
|
usercolumn: this.column || []
|
|
}
|
|
},
|
|
watch:{
|
|
// usercolumn: {
|
|
// handler(){
|
|
// this.$emit('userChange', this.usercolumn)
|
|
// },
|
|
// deep: true
|
|
// }
|
|
},
|
|
mounted() {
|
|
this.usercolumn.length>0 && this.rowDrop()
|
|
},
|
|
methods: {
|
|
rowDrop(){
|
|
const _this = this
|
|
const tbody = this.$refs.list.querySelector('ul')
|
|
Sortable.create(tbody, {
|
|
handle: ".move",
|
|
animation: 300,
|
|
ghostClass: "ghost",
|
|
onEnd({ newIndex, oldIndex }) {
|
|
const tableData = _this.usercolumn
|
|
const currRow = tableData.splice(oldIndex, 1)[0]
|
|
tableData.splice(newIndex, 0, currRow)
|
|
}
|
|
})
|
|
},
|
|
Rendering(){
|
|
this.$emit('userChange', this.usercolumn)
|
|
},
|
|
backDefaul(){
|
|
this.$emit('back', this.usercolumn)
|
|
},
|
|
save(){
|
|
this.$emit('save', this.usercolumn)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.setting-column {}
|
|
.setting-column__title {border-bottom: 1px solid #EBEEF5;padding-bottom:15px;}
|
|
.setting-column__title span {display: inline-block;font-weight: bold;color: #909399;font-size: 12px;}
|
|
.setting-column__title span.move_b {width: 30px;margin-right:15px;}
|
|
.setting-column__title span.show_b {width: 58px;}
|
|
.setting-column__title span.name_b {width: 138px;}
|
|
.setting-column__title span.width_b {width: 72px;}
|
|
.setting-column__title span.tablespan {width: 100px;}
|
|
.setting-column__title span.sortable_b {width: 60px;}
|
|
.setting-column__title span.tabletype {width: 120px;}
|
|
.setting-column__title span.fixed_b {width: 80px;}
|
|
.setting-column__list {max-height:314px;overflow: auto;}
|
|
.setting-column__list li {list-style: none;margin:10px 0;display: flex;align-items: center;}
|
|
.setting-column__list li>span {display: inline-block;font-size: 12px;}
|
|
.setting-column__list li span.move_b {width: 30px;margin-right:15px;}
|
|
.setting-column__list li span.show_b {width: 60px;}
|
|
.setting-column__list li span.name_b {width: 140px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;cursor:default; padding-right:10px }
|
|
.setting-column__list li span.width_b {width: 60px;margin-right:15px;}
|
|
.setting-column__list li span.tablespan {width: 80px;margin-right:15px;}
|
|
.setting-column__list li span.sortable_b {width: 60px;}
|
|
.setting-column__list li span.tabletype {width: 120px; padding-right:20px;}
|
|
.setting-column__list li span.fixed_b {width: 120px;}
|
|
.setting-column__list li.ghost {opacity: 0.3;}
|
|
.setting-column__bottom {border-top: 1px solid #EBEEF5;padding-top:15px;text-align: right;}
|
|
.dark .setting-column__title {border-color: var(--el-border-color-light);}
|
|
.dark .setting-column__bottom {border-color: var(--el-border-color-light);}
|
|
</style>
|