|
|
|
export default {
|
|
|
|
name: 'configmanager',
|
|
|
|
template: '',
|
|
|
|
components: {
|
|
|
|
'property-edit': Vue.defineAsyncComponent(
|
|
|
|
() => myImport('components/page/assets/propertyedit/index')
|
|
|
|
),
|
|
|
|
},
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const { proxy } = Vue.getCurrentInstance()
|
|
|
|
|
|
|
|
let columns = Vue.ref([]);
|
|
|
|
let tableList = Vue.ref([]);
|
|
|
|
let emptyText = Vue.ref('数据加载中...');
|
|
|
|
let resTypeArr = Vue.ref([]);
|
|
|
|
let machineRoom = Vue.ref('');
|
|
|
|
let centerDialogVisible = Vue.ref(false);
|
|
|
|
let loadHead = Vue.ref(false);
|
|
|
|
let initFlag = Vue.ref(false);
|
|
|
|
|
|
|
|
let height = Vue.ref(window.innerHeight - 130);
|
|
|
|
|
|
|
|
|
|
|
|
// 分页信息
|
|
|
|
const pageInfo = Vue.reactive({
|
|
|
|
total: 0,
|
|
|
|
limit: 50,
|
|
|
|
page: 1,
|
|
|
|
keyWords:''
|
|
|
|
})
|
|
|
|
// 编辑信息
|
|
|
|
const row = Vue.ref({})
|
|
|
|
let tabDelete = Vue.ref({});
|
|
|
|
|
|
|
|
// 属性列表属性宽度
|
|
|
|
let widths = Vue.ref({
|
|
|
|
resName: '350',
|
|
|
|
admin: "150",
|
|
|
|
ip: "120",
|
|
|
|
maintenanceBegin: "180",
|
|
|
|
maintenanceEnd: "180",
|
|
|
|
resourceSN: "200",
|
|
|
|
cabinetPosition: "120",
|
|
|
|
parentResName:'300',
|
|
|
|
ULocation: "200"
|
|
|
|
});
|
|
|
|
|
|
|
|
// 筛选列选中的 TODO
|
|
|
|
let checkList = Vue.ref({})
|
|
|
|
// 活跃页签
|
|
|
|
let activeName = Vue.ref('jbxx');
|
|
|
|
let edits = Vue.ref({})
|
|
|
|
let editKey = Vue.ref({})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 搜索
|
|
|
|
let onSearch = () => {
|
|
|
|
if(initFlag.value){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
initFlag.value = true;
|
|
|
|
// // 加载列表
|
|
|
|
// proxy.$http.get("/api-web/home/getUserProperties", {
|
|
|
|
// resTypes: resTypeArr.value
|
|
|
|
// }, function (res) {
|
|
|
|
// if (res && res.data) {
|
|
|
|
// columns.value = res.data;
|
|
|
|
// emptyText.value = '数据加载中...'
|
|
|
|
// loadHead.value = true;
|
|
|
|
// }
|
|
|
|
// });
|
|
|
|
//
|
|
|
|
// // 加载数据
|
|
|
|
// var params = {
|
|
|
|
// page: pageInfo.page,
|
|
|
|
// limit: pageInfo.limit,
|
|
|
|
// resName: pageInfo.keyWords,
|
|
|
|
// sortKey: '',
|
|
|
|
// resType: resTypeArr.value.join(','),
|
|
|
|
// resPositon: machineRoom.value,
|
|
|
|
// addr: '',
|
|
|
|
// maintenanceTimeEnd: '',
|
|
|
|
// maintenanceTimeStart: '',
|
|
|
|
// resCategory: 'assets'
|
|
|
|
// };
|
|
|
|
// proxy.$http.get("/api-web/home/assets/page/all", params, function (res) {
|
|
|
|
// if (res && res.data) {
|
|
|
|
// tableList.value = res.data;
|
|
|
|
// emptyText.value = "加载完成";
|
|
|
|
// pageInfo.total = res.count;
|
|
|
|
// } else {
|
|
|
|
// emptyText.value = "暂无数据";
|
|
|
|
// }
|
|
|
|
// initFlag.value = false;
|
|
|
|
// })
|
|
|
|
// 加载数据
|
|
|
|
var params = {
|
|
|
|
page: pageInfo.page,
|
|
|
|
limit: pageInfo.limit,
|
|
|
|
resName: pageInfo.keyWords,
|
|
|
|
sortKey: '',
|
|
|
|
resType: resTypeArr.value.join(','),
|
|
|
|
resPositon: machineRoom.value,
|
|
|
|
addr: '',
|
|
|
|
maintenanceTimeEnd: '',
|
|
|
|
maintenanceTimeStart: '',
|
|
|
|
resCategory: 'assets'
|
|
|
|
};
|
|
|
|
proxy.$http.get("/api-web/assets/configmanager/list", params, function (res) {
|
|
|
|
if (res && res.data) {
|
|
|
|
columns.value = res.map.header;
|
|
|
|
tableList.value = res.data;
|
|
|
|
emptyText.value = "加载完成";
|
|
|
|
pageInfo.total = res.count;
|
|
|
|
} else {
|
|
|
|
emptyText.value = "暂无数据";
|
|
|
|
tableList.value = [];
|
|
|
|
proxy.$global.showMsg('暂无数据！');
|
|
|
|
}
|
|
|
|
initFlag.value = false;
|
|
|
|
},function (){
|
|
|
|
proxy.$global.showMsg('没有查询到记录！');
|
|
|
|
initFlag.value = false;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// 点击按钮搜索
|
|
|
|
let onBtnSearch = () =>{
|
|
|
|
pageInfo.page = 1;
|
|
|
|
onSearch();
|
|
|
|
}
|
|
|
|
|
|
|
|
let getResType = (arr) => {
|
|
|
|
console.log(arr);
|
|
|
|
var types = arr.map(function (v) {
|
|
|
|
return v.id;
|
|
|
|
});
|
|
|
|
resTypeArr.value = types;
|
|
|
|
|
|
|
|
onSearch();
|
|
|
|
}
|
|
|
|
|
|
|
|
let getMachineRoom = (code) => {
|
|
|
|
console.log(code);
|
|
|
|
machineRoom.value = code;
|
|
|
|
|
|
|
|
onSearch();
|
|
|
|
}
|
|
|
|
|
|
|
|
// 每页展示多少条
|
|
|
|
let handleSizeChange = (val) => {
|
|
|
|
console.log(`每页 ${val} 条`)
|
|
|
|
pageInfo.limit = val;
|
|
|
|
onSearch();
|
|
|
|
}
|
|
|
|
|
|
|
|
// 切换页码
|
|
|
|
let handleCurrentChange = (val) => {
|
|
|
|
console.log(`当前页: ${val}`)
|
|
|
|
pageInfo.page = val;
|
|
|
|
onSearch();
|
|
|
|
}
|
|
|
|
|
|
|
|
// 切换页码
|
|
|
|
let prePage = (val) => {
|
|
|
|
console.log(`当前页: ${val}`)
|
|
|
|
pageInfo.page = val - 1;
|
|
|
|
onSearch();
|
|
|
|
}
|
|
|
|
|
|
|
|
// 切换页码
|
|
|
|
let nextPage = (val) => {
|
|
|
|
console.log(`当前页: ${val}`)
|
|
|
|
pageInfo.page = val + 1;
|
|
|
|
onSearch();
|
|
|
|
}
|
|
|
|
|
|
|
|
// 打开详情页配置
|
|
|
|
let openDetailPage = (rowDetail) => {
|
|
|
|
|
|
|
|
edits.value['jbxx'] = false;
|
|
|
|
|
|
|
|
if(row.value.detail && row.value.detail.name){
|
|
|
|
row.value.detail.name.forEach(function (v) {
|
|
|
|
edits.value[v] = false;
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
let resId = rowDetail.resId;
|
|
|
|
|
|
|
|
// 默认基本信息
|
|
|
|
activeName.value = 'jbxx';
|
|
|
|
row.value['title'] = rowDetail.resName + '_' + rowDetail.ip;
|
|
|
|
row.value['resId'] = resId;
|
|
|
|
|
|
|
|
let id = encodeURIComponent(resId);
|
|
|
|
|
|
|
|
// 获取配置信息
|
|
|
|
proxy.$http.get(`/api-web/assets/configmanager/resource/assets?resId=${id}`, {}, function (res) {
|
|
|
|
if (res && res.map) {
|
|
|
|
row.value['detail'] = res.map;
|
|
|
|
|
|
|
|
// 清空其他页签得数据
|
|
|
|
if(res.map.name){
|
|
|
|
res.map.name.forEach(function(tab) {
|
|
|
|
delete row.value[tab.parentPropKey];
|
|
|
|
})
|
|
|
|
}
|
|
|
|
centerDialogVisible.value = true;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
// 加载其他页签数据
|
|
|
|
let handleClick = (tab, event) => {
|
|
|
|
let tabName = tab.props.name;
|
|
|
|
let resId = row.value['resId'];
|
|
|
|
|
|
|
|
// 已加载
|
|
|
|
if (row.value[tabName]) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
let id = encodeURIComponent(resId);
|
|
|
|
// 查询其他页签信息
|
|
|
|
proxy.$http.get(`/api-web/assets/configmanager/tab/detail?resId=${id}&parentKey=${tabName}`, {}, function (
|
|
|
|
res) {
|
|
|
|
if (res && res.map) {
|
|
|
|
edits.value[tabName] = false;
|
|
|
|
row.value[tabName] = res.map;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
// 二维表格添加
|
|
|
|
let addTabDetail = (tabName) => {
|
|
|
|
tabDelete.value[tabName] = true;
|
|
|
|
// // 设置取消状态
|
|
|
|
// tabDelete.value[tabName] = false;
|
|
|
|
// 设置编辑状态
|
|
|
|
edits.value[tabName] = false;
|
|
|
|
let val = row.value[tabName];
|
|
|
|
if(val && val.map && val.data){
|
|
|
|
let rowData = val.map;
|
|
|
|
|
|
|
|
let keys = Object.keys(rowData);
|
|
|
|
let propGroup = (new Date()).getTime();
|
|
|
|
|
|
|
|
let arr = [];
|
|
|
|
keys.forEach(function (k) {
|
|
|
|
var newProp = Object.create({});
|
|
|
|
Object.assign(newProp,rowData[k]);
|
|
|
|
newProp.propGroup = propGroup;
|
|
|
|
newProp.addItem = 1;
|
|
|
|
arr.push(newProp);
|
|
|
|
});
|
|
|
|
|
|
|
|
val.data.push(arr);
|
|
|
|
}
|
|
|
|
|
|
|
|
console.log(val);
|
|
|
|
}
|
|
|
|
|
|
|
|
// 点击编辑按钮
|
|
|
|
let editConfig = (tabName) => {
|
|
|
|
edits.value[tabName] = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 点击取消
|
|
|
|
let cancelConfig = (tabName) => {
|
|
|
|
edits.value[tabName] = false;
|
|
|
|
|
|
|
|
// 还原数据
|
|
|
|
let detail = row.value.detail[tabName];
|
|
|
|
if(detail){
|
|
|
|
// 基本信息
|
|
|
|
detail.forEach(function (v) {
|
|
|
|
var e = editKey.value[v.propKey];
|
|
|
|
if(e){
|
|
|
|
detail.propValue = e.oldValue;
|
|
|
|
detail.propValueText = e.propValueText;
|
|
|
|
e.edit = false;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
// 二维列表信息
|
|
|
|
detail = row.value[tabName];
|
|
|
|
if(detail && detail.data){
|
|
|
|
tabDelete.value[tabName] = false;
|
|
|
|
let newArr = [];
|
|
|
|
detail.data.forEach(function (v,i) {
|
|
|
|
let addItem = detail.data[i][0].addItem;
|
|
|
|
if(addItem && addItem == 1){
|
|
|
|
//detail.data.splice(i, 1);
|
|
|
|
} else {
|
|
|
|
if(v && v.length > 0){
|
|
|
|
v.forEach(function(configItem){
|
|
|
|
var e = editKey.value[configItem.propKey];
|
|
|
|
if(e){
|
|
|
|
configItem.propValue = e.oldValue;
|
|
|
|
configItem.propValueText = e.propValueText;
|
|
|
|
e.edit = false;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
newArr.push(v);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
detail.data = newArr;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 点击保存
|
|
|
|
let saveConfig = (tabName) => {
|
|
|
|
let resId = row.value['resId'];
|
|
|
|
let arr = [];
|
|
|
|
let detail = row.value.detail[tabName];
|
|
|
|
if(detail){
|
|
|
|
detail.forEach(function (v) {
|
|
|
|
arr.push({
|
|
|
|
resId:resId,
|
|
|
|
key:v.propKey,
|
|
|
|
val:v.propValue,
|
|
|
|
type:v.propType,
|
|
|
|
parentKey:v.parentPropKey,
|
|
|
|
parentGroup:v.propGroup,
|
|
|
|
sort:v.sort
|
|
|
|
})
|
|
|
|
});
|
|
|
|
proxy.$http.post(`/api-web/assets/configmanager/saveConfig`, arr, function (res) {
|
|
|
|
proxy.$global.showMsg('保存成功！');
|
|
|
|
editKey.value = {};
|
|
|
|
centerDialogVisible.value = false;
|
|
|
|
onSearch();
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 保存二维属性
|
|
|
|
let saveTabConfig = (tabName) => {
|
|
|
|
let resId = row.value['resId'];
|
|
|
|
let arr = [];
|
|
|
|
let detail = row.value[tabName];
|
|
|
|
if(detail && detail.data){
|
|
|
|
detail.data.forEach(function (v) {
|
|
|
|
if(v && v.length > 0){
|
|
|
|
v.forEach(function(configItem){
|
|
|
|
arr.push({
|
|
|
|
resId:resId,
|
|
|
|
key:configItem.propKey,
|
|
|
|
val:configItem.propValue,
|
|
|
|
type:configItem.propType,
|
|
|
|
parentKey:configItem.parentPropKey,
|
|
|
|
parentGroup:configItem.propGroup,
|
|
|
|
sort:configItem.sort
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
proxy.$http.post(`/api-web/assets/configmanager/saveConfig`, arr, function (res) {
|
|
|
|
proxy.$global.showMsg('保存成功！');
|
|
|
|
editKey.value = {};
|
|
|
|
centerDialogVisible.value = false;
|
|
|
|
onSearch();
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 二维删除新增得选项
|
|
|
|
let deleConfigItem = (list,index,tabName) =>{
|
|
|
|
let detail = row.value[tabName];
|
|
|
|
if(detail && detail.data){
|
|
|
|
detail.data.splice(index,1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
let callback = ( key, propValue,oldValue,propValueText) => {
|
|
|
|
let resId = row.value['resId'];
|
|
|
|
console.log("回调", resId, key, propValue,oldValue)
|
|
|
|
if(propValue == null || propValue == '' || propValue == oldValue){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
editKey.value[key] = {
|
|
|
|
edit:true,
|
|
|
|
val:propValue,
|
|
|
|
oldValue: oldValue,
|
|
|
|
propValueText:propValueText == undefined ? oldValue : propValueText
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
// 挂载完
|
|
|
|
Vue.onMounted(() => {
|
|
|
|
onSearch();
|
|
|
|
console.log('onMounted');
|
|
|
|
})
|
|
|
|
|
|
|
|
return {
|
|
|
|
loadHead,
|
|
|
|
columns,
|
|
|
|
tableList,
|
|
|
|
pageInfo,
|
|
|
|
emptyText,
|
|
|
|
resTypeArr,
|
|
|
|
machineRoom,
|
|
|
|
widths,
|
|
|
|
onSearch,
|
|
|
|
getResType,
|
|
|
|
getMachineRoom,
|
|
|
|
openDetailPage,
|
|
|
|
centerDialogVisible,
|
|
|
|
row,
|
|
|
|
checkList,
|
|
|
|
activeName,
|
|
|
|
handleClick,
|
|
|
|
edits,
|
|
|
|
editConfig,
|
|
|
|
cancelConfig,
|
|
|
|
saveConfig,
|
|
|
|
callback,
|
|
|
|
editKey,
|
|
|
|
addTabDetail,
|
|
|
|
deleConfigItem,
|
|
|
|
saveTabConfig,
|
|
|
|
tabDelete,
|
|
|
|
handleSizeChange,
|
|
|
|
initFlag,
|
|
|
|
handleCurrentChange,
|
|
|
|
height,
|
|
|
|
onBtnSearch
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
