You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
329 lines
9.1 KiB
329 lines
9.1 KiB
<template>
|
|
<el-dialog :modal-append-to-body="false"
|
|
:close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" title="设置表格栏位"
|
|
:visible.sync="visible"
|
|
class="cl"
|
|
width="958px" v-drag>
|
|
<el-select @change="getTableUserList()" v-model="queryTable.tableId">
|
|
<el-option :value="item.tableId" :label="item.tableName" v-for="(item,index) in tableList" :key="index">
|
|
|
|
</el-option>
|
|
</el-select>
|
|
<el-table
|
|
:height="height"
|
|
:data="userColumnList"
|
|
border
|
|
v-loading="dataListLoading"
|
|
highlight-current-row
|
|
:row-style="{height: '20px'}"
|
|
style="width: 100%;">
|
|
<el-table-column
|
|
width="120"
|
|
label="栏位名称">
|
|
<template slot-scope="scope">
|
|
<el-input readonly v-model="scope.row.columnLabel"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="80"
|
|
label="显示顺序">
|
|
<template slot-scope="scope">
|
|
<el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="scope.row.sortLv" :min="0"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="140"
|
|
label="显示状态">
|
|
<template slot-scope="scope">
|
|
<el-switch
|
|
v-model="scope.row.status"
|
|
active-text="显示"
|
|
inactive-text="隐藏">
|
|
</el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="120"
|
|
label="固定位置">
|
|
<template slot-scope="scope">
|
|
<el-select style="width: 100px" v-model="scope.row.fixed">
|
|
<el-option label="不固定" value=""></el-option>
|
|
<el-option label="左固定" value="left"></el-option>
|
|
<el-option label="右固定" value="right"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="160"
|
|
label="排序">
|
|
<template slot-scope="scope">
|
|
<el-switch
|
|
v-model="scope.row.columnSortable"
|
|
active-text="排序"
|
|
inactive-text="不排序">
|
|
</el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="100"
|
|
label="宽度">
|
|
<template slot-scope="scope">
|
|
<el-input oninput="value=value.replace(/[^\d]/g, '')" v-model="scope.row.columnWidth" :min="0"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="100"
|
|
label="类型">
|
|
<template slot-scope="scope">
|
|
<el-select v-model="scope.row.columnType">
|
|
<el-option value="string" label="string"></el-option>
|
|
<el-option value="number" label="number"></el-option>
|
|
<el-option value="date" label="date"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="100"
|
|
label="位置">
|
|
<template slot-scope="scope">
|
|
<el-select v-model="scope.row.align">
|
|
<el-option value="left" label="居左"></el-option>
|
|
<el-option value="center" label="居中"></el-option>
|
|
<el-option value="right" label="居右"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="updateColumnList()">确定</el-button>
|
|
<el-button @click="visible = false" type="primary">取消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
|
|
import {
|
|
saveTableUser,
|
|
getTableDefaultListLanguage,
|
|
getTableUserListLanguage,
|
|
getMenuTableList
|
|
} from "@/api/table.js"
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
height: 400,
|
|
// 展示列集
|
|
columnList: [
|
|
{
|
|
columnLabel: "显示顺序",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
columnWidth: null,
|
|
format: null,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
serialNumber: null,
|
|
columnType: null,
|
|
align: null
|
|
},
|
|
{
|
|
columnLabel: "显示状态",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
columnWidth: null,
|
|
format: null,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
serialNumber: null,
|
|
columnType: null,
|
|
align: null
|
|
},
|
|
{
|
|
columnLabel: "排序",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
columnWidth: null,
|
|
format: null,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
serialNumber: null,
|
|
columnType: null,
|
|
align: null
|
|
},
|
|
{
|
|
columnLabel: "固定状态",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
columnWidth: null,
|
|
format: null,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
serialNumber: null,
|
|
columnType: null,
|
|
align: null
|
|
},
|
|
{
|
|
columnLabel: "宽度",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
columnWidth: null,
|
|
format: null,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
serialNumber: null,
|
|
columnType: null,
|
|
align: null
|
|
},
|
|
{
|
|
columnLabel: "类型",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
columnWidth: null,
|
|
format: null,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
serialNumber: null,
|
|
columnType: null,
|
|
align: null
|
|
},
|
|
{
|
|
columnLabel: "位置",
|
|
columnHidden: false,
|
|
columnImage: false,
|
|
columnSortable: false,
|
|
columnWidth: null,
|
|
format: null,
|
|
sortLv: 0,
|
|
status: true,
|
|
fixed: '',
|
|
serialNumber: null,
|
|
columnType: null,
|
|
align: null
|
|
},
|
|
|
|
],
|
|
tableList: [],
|
|
dataList: [],
|
|
dataListLoading: false,
|
|
// 用户table 配置集合
|
|
userColumnList: [],
|
|
queryTable: {
|
|
userId: '',
|
|
functionId: '',
|
|
languageCode: '',
|
|
tableId: '',
|
|
},
|
|
visible: false,
|
|
fullscreenLoading: false
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
// 获取 用户的配置
|
|
async init(queryTable) {
|
|
if (!queryTable.functionId) return;
|
|
this.visible = true
|
|
this.queryTable = queryTable
|
|
|
|
// 先获取功能下的所有tableId 和tableName
|
|
await getMenuTableList(queryTable).then(({data}) => {
|
|
if (data && data.code == 0) {
|
|
this.tableList = data.data
|
|
this.queryTable.tableId = data.data.length>0?data.data[0].tableId:'-1'
|
|
}
|
|
})
|
|
await this.getTableUserList()
|
|
},
|
|
async getTableUserList(){
|
|
this.dataListLoading = true
|
|
await getTableUserListLanguage(this.queryTable).then(({data}) => {
|
|
if (data.code == 0) {
|
|
this.dataListLoading = false
|
|
this.userColumnList = data.rows
|
|
if (data.rows.length <= 0) {
|
|
getTableDefaultListLanguage(this.queryTable).then(({data}) => {
|
|
this.userColumnList = data.rows
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 修改 table 列
|
|
updateColumnList() {
|
|
const loading = this.$loading({
|
|
lock: true,
|
|
text: '正在保存用户设置',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
let userColumns = []
|
|
for (let column of this.userColumnList) {
|
|
let userColumn = {
|
|
userId: this.$store.state.user.name,
|
|
functionId: column.functionId,
|
|
tableId: column.tableId,
|
|
tableName: column.tableName,
|
|
columnProp: column.columnProp,
|
|
headerAlign: column.headerAlign,
|
|
align: column.align,
|
|
columnWidth: column.columnWidth,
|
|
columnLabel: column.columnLabel,
|
|
columnHidden: column.columnHidden,
|
|
columnImage: column.columnImage,
|
|
columnSortable: column.columnSortable,
|
|
format: column.format,
|
|
sortLv: column.sortLv,
|
|
status: column.status,
|
|
fixed: column.fixed,
|
|
serialNumber: column.serialNumber,
|
|
columnType: column.columnType
|
|
}
|
|
userColumns.push(userColumn)
|
|
this.$emit("refreshData");
|
|
}
|
|
saveTableUser(userColumns).then(({data}) => {
|
|
if (data.code == 0) {
|
|
this.$message.success(data.msg)
|
|
loading.close();
|
|
this.visible = false
|
|
this.$emit("refreshData", this.queryTable.tableId);
|
|
} else {
|
|
this.$message.error(data.msg)
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.cl .el-table .cell {
|
|
line-height: 20px;
|
|
font-size: 12px;
|
|
height: 20px;
|
|
}
|
|
|
|
.cl .el-switch__label * {
|
|
line-height: 1;
|
|
font-size: 12px;
|
|
display: inline-block;
|
|
}
|
|
|
|
</style>
|