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.
332 lines
9.2 KiB
332 lines
9.2 KiB
<template>
|
|
<el-dialog :modal-append-to-body="false"
|
|
:close-on-click-modal="false" :show-close="false" :close-on-press-escape="false" :title="titleDesc"
|
|
:visible.sync="visible"
|
|
class="cl"
|
|
width="958px" v-drag>
|
|
<el-select v-show="false" @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="Field Caption">
|
|
<template slot-scope="scope">
|
|
<el-input readonly v-model="scope.row.columnLabel"></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="100"
|
|
label="Display Seq">
|
|
<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="Display State">
|
|
<template slot-scope="scope">
|
|
<el-switch
|
|
v-model="scope.row.status"
|
|
active-text="Show"
|
|
inactive-text="Hide">
|
|
</el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="120"
|
|
label="Freeze Column">
|
|
<template slot-scope="scope">
|
|
<el-select style="width: 100px" v-model="scope.row.fixed">
|
|
<el-option label="Not Fixed" value=""></el-option>
|
|
<el-option label="Left Fixed" value="left"></el-option>
|
|
<el-option label="Right Fixed" value="right"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="160"
|
|
label="Sort">
|
|
<template slot-scope="scope">
|
|
<el-switch
|
|
v-model="scope.row.columnSortable"
|
|
active-text="Sort"
|
|
inactive-text="Not Sorted">
|
|
</el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
width="100"
|
|
label="Column Width">
|
|
<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="Type">
|
|
<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="Align">
|
|
<template slot-scope="scope">
|
|
<el-select v-model="scope.row.align">
|
|
<el-option value="left" label="Left"></el-option>
|
|
<el-option value="center" label="Center"></el-option>
|
|
<el-option value="right" label="Right"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="updateColumnList()">Save</el-button>
|
|
<el-button @click="visible = false" type="primary">Close</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
|
|
import {
|
|
saveTableUser,
|
|
getTableDefaultListLanguage,
|
|
getTableUserListLanguage,
|
|
getMenuTableList
|
|
} from "@/api/table.js"
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
height: 400,
|
|
titleDesc: 'Set Table Fields',
|
|
// 展示列集
|
|
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;
|
|
//设置标题
|
|
this.titleDesc = 'Set Table Fields --'+ data.menuName;
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 修改 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>
|