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.
 
 
 
 
 

789 lines
22 KiB

<template>
<div class="mod-config">
<!-- <div>-->
<!-- <span @click="favoriteFunction()">-->
<!-- <icon-svg :name="favorite?'xiangqufill':'xiangqu'" class="sl-svg"></icon-svg>-->
<!-- </span>-->
<!-- </div>-->
<el-form :inline="true" :model="querySysLanguagePack" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input filterable v-model="querySysLanguagePack.key" clearable>
</el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()" type="primary">{{ buttons.search }}</el-button>
<el-button v-if="isAuth('sys:setting')" @click="saveColumnList()" type="primary">{{ buttons.defaultTable }}
</el-button>
<el-button @click="userSetting" type="primary">{{ buttons.settingTable }}</el-button>
<download-excel
:fields="fields()"
:data="exportData"
type="xls"
:name="exportName"
:header="exportHeader"
:footer="exportFooter"
:defaultValue="exportDefaultValue"
:fetch="createExportData"
:before-generate="startDownload"
:before-finish="finishDownload"
worksheet="导出信息"
class="el-button el-button--primary el-button--medium">
{{ buttons.download }}
</download-excel>
</el-form-item>
<el-form-item>
<el-select filterable v-model="querySysLanguagePack.languageCode" clearable>
<el-option :label="item.languageName" :value="item.languageCode" v-for="(item,index) in languageList "
:key="index"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addLanguageFun()">{{ buttons.add }}
</el-button>
</el-form-item>
</el-form>
<el-table
id="commmon"
:height="height"
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column
v-for="(item,index) in columnList" :key="index"
:sortable="item.columnSortable"
:prop="item.columnProp"
:header-align="item.headerAlign"
:show-overflow-tooltip="item.showOverflowTooltip"
:align="item.align"
:fixed="item.fixed==''?false:item.fixed"
:min-width="item.columnWidth"
:label="item.columnLabel">
<template slot-scope="scope">
<span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
style="width: 100px; height: 80px"/></span>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[20, 50, 200, 500]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 动态列 -->
<column v-if="visible" ref="column" @refreshData="getTableUserColumn"></column>
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" v-drag
:title="'设置语言一'+querySysLanguagePack.languageCode" :visible.sync="addLanguage" width="1000px">
<el-form :inline="true" :model="addQuery" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input filterable v-model="addQuery.functionId" clearable>
</el-input>
</el-form-item>
<el-form-item>
<el-button @click="getAddOrUpdateList()" type="primary">{{ buttons.search }}</el-button>
</el-form-item>
<el-form-item>
<el-button @click="addListLanguage()" :disabled="dataListSelections.length <= 0" type="primary">
{{ buttons.addList }}
</el-button>
</el-form-item>
</el-form>
<el-table
height="450"
:data="languageDataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column
type="selection"
header-align="center"
width="40"
align="center">
</el-table-column>
<el-table-column
v-for="(item,index) in languageColumnList" :key="index"
:sortable="item.columnSortable"
:prop="item.columnProp"
:width="item.columnWidth"
:label="item.columnLabel">
<template slot-scope="scope">
<span v-if="item.columnProp!='languageValue'"> {{ scope.row[item.columnProp] }}</span>
<span v-if="item.columnProp=='languageValue'"><input
class="sl-input"
v-model="scope.row[item.columnProp]" type="text"
clearable></input></span>
</template>
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
:label="buttons.cz">
<template slot-scope="scope">
<a type="text" size="small" @click="saveLanguageList(scope.row)">添加</a>
</template>
</el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
import column from "../common/column";
import {
searchSysLanguagePackList,
searchSysLanguageParam,
searchFunctionButtonList,
saveButtonList,
searchSysLanguage,
searchLanguageListByLanguageCode,
saveSysLanguageOne,
searchPageLanguageData,
removerLanguage,
saveSysLanguageList
} from "@/api/sysLanguage.js"
import {
saveTableDefaultList,
getTableDefaultListLanguage,
getTableUserListLanguage,
removerDefault,
removerUser
} from "@/api/table.js"
import {userFavoriteList, saveUserFavorite, removeUserFavorite} from '@/api/userFavorite.js'
export default {
components: {
column
},
data() {
return {
listShow: false,
// table高度
height: 450,
// 是否收藏
favorite: false,
addLanguage: false,
functionId: 9001,
tableId: "common1001",
value1: true,
visible: false,
showDefault: false,
// 默认table 查询参数
queryTable: {
functionId: 9001,
tableId: "common1001",
languageCode: this.$i18n.locale
},
// 用户table 查询参数
queryTableUser: {
userId: this.$store.state.user.name,
functionId: 9001,
tableId: "common1001",
status: true,
languageCode: this.$i18n.locale
},
// 语言词典查询参数
querySysLanguageParam: {
languageCode: this.$i18n.locale
},
// 语言词典集合
sysLanguageParams: [],
// 用户table 配置集合
userColumnList: [],
// 展示列集
columnList: [
{
"tableId": "common1001",
"tableName": "common",
"columnProp": "functionId",
"columnLabel": "功能编码",
"columnHidden": false,
"columnImage": false,
"columnSortable": false,
"columnWidth": null,
"format": null,
"functionId": "9001",
"sortLv": 0,
"status": true,
"fixed": false,
"serialNumber": null,
"columnType": null,
"align": null
},
{
"tableId": "common1001",
"tableName": "common",
"columnProp": "objectId",
"columnLabel": "序列化编码",
"columnHidden": false,
"columnImage": false,
"columnSortable": false,
"columnWidth": null,
"format": null,
"functionId": "9001",
"sortLv": 0,
"status": true,
"fixed": false,
"serialNumber": null,
"columnType": null,
"align": null
},
{
"tableId": "common1001",
"tableName": "common",
"columnProp": "objectType",
"columnLabel": "类型",
"columnHidden": false,
"columnImage": false,
"columnSortable": false,
"columnWidth": null,
"format": null,
"functionId": "9001",
"sortLv": 0,
"status": true,
"fixed": false,
"serialNumber": null,
"columnType": null,
"align": null
},
{
"tableId": "common1001",
"tableName": "common",
"columnProp": "languageValue",
"columnLabel": "语言值",
"columnHidden": false,
"columnImage": false,
"columnSortable": false,
"columnWidth": null,
"format": null,
"functionId": "9001",
"sortLv": 0,
"status": true,
"fixed": false,
"serialNumber": null,
"columnType": null,
"align": null
}
],
// 展示列集
columnList1: [
{
"tableId": "common1002",
"tableName": "commonLanguage",
"columnProp": "functionId",
"columnLabel": "功能编码",
"columnHidden": false,
"columnImage": false,
"columnSortable": false,
"columnWidth": null,
"format": null,
"functionId": "9001",
"sortLv": 0,
"status": true,
"fixed": false,
"serialNumber": null,
"columnType": null,
"align": null
},
{
"tableId": "common1002",
"tableName": "commonLanguage",
"columnProp": "languageCode",
"columnLabel": "语言编码",
"columnHidden": false,
"columnImage": false,
"columnSortable": false,
"columnWidth": null,
"format": null,
"functionId": "9001",
"sortLv": 0,
"status": true,
"fixed": false,
"serialNumber": null,
"columnType": null,
"align": null
},
{
"tableId": "common1002",
"tableName": "commonLanguage",
"columnProp": "objectId",
"columnLabel": "序列化编码",
"columnHidden": false,
"columnImage": false,
"columnSortable": false,
"columnWidth": null,
"format": null,
"functionId": "9001",
"sortLv": 1,
"status": true,
"fixed": false,
"serialNumber": null,
"columnType": null,
"align": null
},
{
"tableId": "common1002",
"tableName": "commonLanguage",
"columnProp": "objectType",
"columnLabel": "类型",
"columnHidden": false,
"columnImage": false,
"columnSortable": false,
"columnWidth": null,
"format": null,
"functionId": "9001",
"sortLv": 1,
"status": true,
"fixed": false,
"serialNumber": null,
"columnType": null,
"align": null
},
{
"tableId": "common1002",
"tableName": "commonLanguage",
"columnProp": "languageValue",
"columnLabel": "语言值",
"columnHidden": false,
"columnImage": false,
"columnSortable": false,
"columnWidth": null,
"format": null,
"functionId": "9001",
"sortLv": 2,
"status": true,
"fixed": false,
"serialNumber": null,
"columnType": null,
"align": null
}
],
// 数据集
dataList: [],
queryButton: {
functionId: 9001,
table_id: 'common1001',
languageCode: this.$i18n.locale,
objectType: 'button'
},
buttons: {
add: '添加',
edit: '编辑',
delete: '删除',
deleteList: '批量删除',
cz: '操作',
search: '查询',
download: '导出',
settingTable: '设置列表',
defaultTable: '设置默认配置',
list: "列表",
addList: '批量添加'
},
// 导出 start
exportData: [],
exportName: "页面功能语言",
exportHeader: ["页面功能语言"],
exportFooter: [],
exportDefaultValue: "这一行这一列没有数据",
// 导出 end
buttonList: [
{
functionId: "9001",
languageValue: '添加',
objectId: 'add',
objectType: "button",
tableId: "common1001"
},
{
functionId: "9001",
languageValue: '编辑',
objectId: 'edit',
objectType: "button",
tableId: "common1001"
},
{
functionId: "9001",
languageValue: '删除',
objectId: 'delete',
objectType: "button",
tableId: "common1001"
},
{
functionId: "9001",
languageValue: '批量删除',
objectId: 'deleteList',
objectType: "button",
tableId: "common1001"
},
{
functionId: "9001",
languageValue: '操作',
objectId: 'cz',
objectType: "button",
tableId: "common1001"
},
{
functionId: "9001",
languageValue: '查询',
objectId: 'search',
objectType: "button",
tableId: "common1001"
},
{
functionId: "9001",
languageValue: '导出',
objectId: 'download',
objectType: "button",
tableId: "common1001"
},
{
functionId: "9001",
languageValue: '设置列表',
objectId: 'settingTable',
objectType: "button",
tableId: "common1001"
},
{
functionId: "9001",
languageValue: '设置默认配置',
objectId: 'defaultTable',
objectType: "button",
tableId: "common1001"
},
{
functionId: "9001",
languageValue: '列表',
objectId: 'list',
objectType: "button",
tableId: "common1001"
}
],
languageList: [],
languageColumnList: [],
languageDataList: [],
queryLanguage: {},
// 数据集条件
querySysLanguagePack: {
key: '',
page: 1,
limit: 1,
languageValue: '',
objectType: '',
objectId: ''
},
addQuery: {
functionId: '',
languageCode: ''
},
// 批量选中对象
// 分页
pageIndex: 1,
pageSize: 20,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
mounted() {
this.$nextTick(() => {
this.height = window.innerHeight - 175;
})
},
activated() {
this.getDataList()
this.getLanguageList()
},
methods: {
// 校验用户是否收藏
favoriteIsOk() {
let userFavorite = {
userId: this.$store.state.user.id,
languageCode: this.$i18n.locale
}
userFavoriteList(userFavorite).then(({data}) => {
let size = data.list.filter(item => item.menuId == this.$route.meta.menuId).length;
if (size > 0) {
this.favorite = true
} else {
this.favorite = false
}
})
},
// 收藏 OR 取消收藏
favoriteFunction() {
let userFavorite = {
userId: this.$store.state.user.id,
functionId: this.$route.meta.menuId,
}
if (this.favorite) {
// 取消收藏
this.$confirm(`确定取消收藏`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
removeUserFavorite(userFavorite).then(({data}) => {
this.$message.success(data.msg)
this.favorite = false
})
})
} else {
// 收藏
saveUserFavorite(userFavorite).then(({data}) => {
this.$message.success(data.msg)
this.favorite = true
})
}
},
// 保存语言编辑
saveLanguageList(val) {
saveSysLanguageOne(val).then(({data}) => {
if (data.code == 0) {
this.$message.success(data.msg)
} else {
this.$message.error(data.msg)
}
})
},
// 批量保存
addListLanguage() {
saveSysLanguageList(this.dataListSelections).then(({data}) => {
if (data.code == 0) {
this.$message.success(data.msg)
} else {
this.$message.error(data.msg)
}
})
},
// 查询可编辑语言列表
getAddOrUpdateList() {
searchLanguageListByLanguageCode(this.addQuery).then(({data}) => {
this.languageDataList = data.rows
})
},
// 编辑语言
addLanguageFun() {
if (this.querySysLanguagePack.languageCode) {
this.addLanguage = true
this.languageColumnList = []
let query = {
functionId: 9001,
tableId: "common1002",
languageCode: this.$i18n.locale
}
getTableDefaultListLanguage(query).then(({data}) => {
if (data.rows.length > 0) {
this.languageColumnList = data.rows
}
})
this.languageColumnList = this.columnList
this.addQuery.languageCode = this.querySysLanguagePack.languageCode
this.getAddOrUpdateList()
} else {
this.$message("请选中一种语言")
}
},
// 获取多语言列表
getLanguageList() {
searchSysLanguage(this.queryLanguage).then(({data}) => {
this.languageList = data.rows
})
},
// 获取页面多语言
getMsgLanguage() {
this.dataListLoading = true
let queryLang = {
functionId: 9001,
table_id: 'common1001',
languageCode: this.$i18n.locale
}
searchPageLanguageData(queryLang).then((data) => {
if (data.code == 0) {
this.pageLanguageData = data.data
} else {
}
})
this.dataListLoading = false
},
// 获取button的词典
getFunctionButtonList() {
searchFunctionButtonList(this.queryButton).then(({data}) => {
if (data.code == 0) {
this.buttons = data.data
} else {
// saveButtonList(this.buttonList).then(({data}) => {
// })
}
})
},
// 获取语言词典
getSysLanguageParamList() {
searchSysLanguageParam(this.querySysLanguageParam).then(({data}) => {
this.sysLanguageParams = data.rows
})
},
// 打开页面设置
userSetting() {
this.visible = true;
let queryTable = {
userId: this.$store.state.user.name,
functionId: 9001,
tableId: "common1001",
languageCode: this.$i18n.locale
}
this.$nextTick(() => {
this.$refs.column.init(queryTable);
});
},
// 获取 用户保存的 格式列
getTableUserColumn() {
getTableUserListLanguage(this.queryTableUser).then(({data}) => {
if (data.rows.length > 0) {
//this.columnList = []
this.columnList = data.rows
} else {
this.getColumnList()
}
})
},
// 保存 默认配置 列
saveColumnList() {
// 删除所有的该页面下保存的数据
if (this.userColumnList) {
//删除 user自定义的数据
removerUser(this.queryTable)
}
// 删除默认配置
removerDefault(this.queryTable)
// 删除语言
removerLanguage(this.queryTable)
// 保存页面 table属性
let sumColumnList = this.columnList.concat(this.columnList1);
saveTableDefaultList(sumColumnList).then(({data}) => {
})
// 保存页面 button label title 属性
saveButtonList(this.buttonList).then(({data}) => {
})
this.getFunctionButtonList()
this.getColumnList()
},
// 获取 tableDefault 列
getColumnList() {
getTableDefaultListLanguage(this.queryTable).then(({data}) => {
if (!data.rows.length == 0) {
// this.showDefault = false
this.columnList = data.rows
} else {
// this.showDefault = true
}
})
},
// 获取数据列表
getDataList() {
this.dataListLoading = true
this.querySysLanguagePack.limit = this.pageSize
this.querySysLanguagePack.page = this.pageIndex
searchSysLanguagePackList(this.querySysLanguagePack).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle(val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle(val) {
this.dataListSelections = val
},
// 导出
fields() {
let json = "{"
this.columnList.forEach((item, index) => {
if (index == this.columnList.length - 1) {
json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\""
} else {
json += "\"" + item.columnLabel + "\"" + ":" + "\"" + item.columnProp + "\"" + ","
}
})
json += "}"
let s = eval("(" + json + ")")
return s
},
createExportData() {
// 点击导出按钮之后,开始导出数据之前的执行函数,返回值为需要下载的数据
return this.dataList;
},
startDownload() {
},
finishDownload() {
}
},
created() {
this.getTableUserColumn()
this.getSysLanguageParamList()
this.getFunctionButtonList()
this.favoriteIsOk()
this.getMsgLanguage()
}
}
</script>
<style scoped>
.wrapper {
height: calc(100% - 40px);
}
.sl-input {
background-color: transparent;
border: 0 !important;
font-size: 12px !important;
height: 12px !important;
line-height: 14px !important;
background-color: transparent !important;
width: 140px;
}
.sl-input:focus, textarea:focus {
outline: none;
}
.sl-svg {
overflow: hidden;
float: right;
}
</style>