<template>
|
<div style="margin-top: -40px;">
|
<el-form ref="formData" :model="formData" label-width="100px">
|
<div style="padding: 10px; ">
|
<el-button type="primary" size="small" @click="handleCheckAll">全选</el-button>
|
<el-button type="primary" size="small" @click="handleClearBill">全清</el-button>
|
<el-button type="primary" size="small" @click="handleCenter">全居中</el-button>
|
<el-button type="primary" size="small" @click="handleMoveRowUp(selRowData[0])">上一行</el-button>
|
<el-button type="primary" size="small" @click="handleMoveRowDown(selRowData[0])">下一行</el-button>
|
<el-button type="primary" size="small" @click="handleSave">保存</el-button>
|
<el-button type="primary" size="small" @click="handleExit">退出</el-button>
|
<el-button type="primary" size="small" @click="handleDel">删除</el-button>
|
</div>
|
<el-table v-loading="loading" :data="rowTitleData" ref="rowTitleTable" max-height="540"
|
@selection-change="handleSelectionChange" :row-class-name="rowSysIndex" border>
|
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column align="center" label="序号" type="index" sortable width="55" />
|
<el-table-column align="center" prop="ColumnName" label="列名" width="150">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.ColumnName" />
|
</template>
|
</el-table-column>
|
<el-table-column align="center" prop="IsHide" label="是否隐藏" width="90">
|
<template slot-scope="scope">
|
<el-checkbox v-model="scope.row.IsHide"></el-checkbox>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" prop="Alignment" label="对齐方式" width="110">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row.Alignment" placeholder="请选择">
|
<el-option label="左对齐" value="L"></el-option>
|
<el-option label="居中" value="M"></el-option>
|
<el-option label="右对齐" value="R"></el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" prop="ColumnWidth" label="列宽" width="100">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.ColumnWidth" />
|
</template>
|
</el-table-column>
|
<el-table-column align="center" prop="ColumnName_Other" label="别名" width="120">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row.ColumnName_Other" />
|
</template>
|
</el-table-column>
|
<!-- <el-table-column align="center" prop="ColumnName_real" label="别名对应列名" width="120"></el-table-column> -->
|
<el-table-column align="center" prop="IsTotalRow" label="是否统计" width="90">
|
<template slot-scope="scope">
|
<el-checkbox v-model="scope.row.IsTotalRow"></el-checkbox>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="layui-collapse">
|
<div class="layui-colla-item">
|
<div class="layui-form-item" style="padding-top: 10px;">
|
<table class="layui-hide" id="mainTable" lay-filter="mainTable"></table>
|
</div>
|
</div>
|
</div>
|
<div>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="冻结列" prop="HFixCols">
|
<el-input v-model="formData.HFixCols" placeholder="请输入冻结列" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="字体大小" prop="HFontSize">
|
<el-input v-model="formData.HFontSize" placeholder="请输入字体大小" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="列宽" prop="HColumnWidth">
|
<el-input v-model="formData.HColumnWidth" placeholder="请输入列宽" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="默认分页" prop="HPageSize">
|
<el-select v-model="formData.HPageSize" placeholder="请选择">
|
<el-option v-for="(item, index) in pageSizesList" :key="index" :label="item" :value="item">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="点击排序" prop="HSortFlag">
|
<el-select v-model="formData.HSortFlag" placeholder="请选择" clearable>
|
<el-option value="是">是</el-option>
|
<el-option value="否">否</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="选中行合计" prop="HSelTotal">
|
<el-select v-model="formData.HSelTotal" placeholder="请选择" clearable>
|
<el-option value="是">是</el-option>
|
<el-option value="否">否</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
import axios from 'axios'
|
|
export default {
|
name: 'RowSettings',
|
props: {
|
colName: { type: Array, },
|
HModName: { type: String, }
|
},
|
data() {
|
return {
|
pageSizesList:[50, 100, 500, 5000, 50000],
|
selRowData: [],
|
baseURL: 'http://47.96.97.237/API',
|
user: 'admin',//登录用户名
|
// 表格数据
|
rowTitleData: [],
|
// 选中数组index
|
selIndex: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 遮罩层
|
loading: true,
|
formData: {
|
HFixCols: '',
|
HFontSize: '',
|
HColumnWidth: '',
|
HPageSize: '',
|
HSortFlag: '',
|
HSelTotal: ''
|
},
|
colTitleName: '',
|
tableIns: null,
|
option: {},
|
tableData: []
|
}
|
},
|
created() {
|
this.getDisplay()
|
},
|
methods: {
|
getDisplay() {
|
|
this.loading = true
|
// this.HModName = "Kf_SellOutBillList"
|
axios.get(this.baseURL + '/Xt_grdAlignment_WMES/grdAlignmentWMESList', {
|
params: { "HModName": this.HModName, "user": this.user },
|
}).then(response => {
|
var data1 = response.data
|
var colNames = [];//相对单据传过来的列名
|
var cols = [];//要传进表格的数据
|
var dataCol = [];
|
if (data1.data.length !== 0) {
|
dataCol = data1.data[0].HGridString.split(',')
|
}
|
colNames = this.colName
|
if (data1.data.length != 0 && dataCol.length == colNames.length) {
|
this.formData.HFixCols = data1.data[0].HFixCols//冻结列
|
this.formData.HFontSize = data1.data[0].HFontSize//字体大小
|
this.formData.HColumnWidth = data1.data[0].HColumnWidth//列宽
|
this.formData.HPageSize = data1.data[0].HPageSize//默认分页
|
this.formData.HSortFlag = data1.data[0].HSortFlag//是否排序
|
//表格的数据填充
|
for (var i = 0; i < colNames.length; i++) {
|
var dataCols = dataCol[i].split('|');
|
var ColumnName_Other = dataCols[4] == dataCols[5] ? "" : dataCols[4];
|
cols.push({ "ColumnName": dataCols[5], "IsHide": dataCols[1] == 1 ? true : false, "Alignment": dataCols[2], "ColumnWidth": dataCols[3], "ColumnName_Other": ColumnName_Other, "ColumnName_real": dataCols[5], "IsTotalRow": dataCols[6] == 1 ? true : false })
|
}
|
this.rowTitleData = cols
|
} else {
|
|
var colTitleNames = this.colName
|
console.log(this.colName)
|
//默认不选中 显示字体居左 表格的数据填充
|
for (var i = 0; i < colNames.length; i++) {
|
cols.push({ "ColumnName": colNames[i].ColmCols, "IsHide": false, "Alignment": "L", "ColumnWidth": 120, "ColumnName_Other": colTitleNames[i].ColmCols, "IsTotalRow": false })
|
}
|
this.rowTitleData = cols;
|
}
|
this.loading = false
|
}).catch(error => {
|
console.log(error)
|
this.$modal.msgError("接口请求失败!");
|
});
|
},
|
//上一行
|
handleMoveRowUp(row) {
|
if (this.selRowData.length != 1) {
|
this.$modal.msgError("请选择一行数据！")
|
} else {
|
let num = row.index - 1
|
if (num == 0) {
|
this.$modal.msgError("第一行数据无法上移");
|
} else { // 确保不是第一行
|
const record = this.rowTitleData.splice(num, 1)[0];
|
this.rowTitleData.splice(num - 1, 0, record);
|
}
|
}
|
console.log(this.rowTitleData)
|
},
|
//下一行
|
handleMoveRowDown(row) {
|
if (this.selRowData.length != 1) {
|
this.$modal.msgError("请选择一行数据")
|
} else {
|
let num = row.index - 1
|
if (num == this.rowTitleData.length - 1) {
|
this.$modal.msgError("最后一行数据无法下移");
|
} else { // 确保不是第一行
|
const record = this.rowTitleData.splice(num, 1)[0];
|
this.rowTitleData.splice(num + 1, 0, record);
|
}
|
}
|
},
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.selIndex = selection.map(item => item.index)
|
this.selRowData = selection
|
this.single = selection.length != 1
|
this.multiple = !selection.length
|
},
|
//表格行索引
|
rowSysIndex({ row, rowIndex }) {
|
row.index = rowIndex + 1;
|
},
|
//全选
|
handleCheckAll() {
|
for (var i = 0; i < this.rowTitleData.length; i++) {
|
this.rowTitleData[i].IsHide = true;
|
}
|
},
|
//全清
|
handleClearBill() {
|
for (var i = 0; i < this.rowTitleData.length; i++) {
|
this.rowTitleData[i].IsHide = false;
|
}
|
},
|
//全居中
|
handleCenter() {
|
for (var i = 0; i < this.rowTitleData.length; i++) {
|
this.rowTitleData[i].Alignment = 'M';
|
}
|
},
|
//保存
|
handleSave() {
|
const cache = this.rowTitleData
|
const num = cache.filter(item => item !== "").map((item, i) => {
|
item.LAY_TABLE_INDEX = i
|
return item
|
})
|
// 验证分页参数
|
const HPageSize = this.formData.HPageSize
|
if (HPageSize && !/^[0-9]+$/.test(HPageSize)) {
|
this.$modal.msgError("默认分页不为正整数!")
|
return
|
}
|
const sMainStr = JSON.stringify(this.formData)
|
const sSubStr = JSON.stringify(num)
|
const OperationType = "1"
|
const sMainSub = `${sMainStr};${sSubStr};${this.HModName};${OperationType};${this.user}`
|
axios({
|
method: 'post',
|
url: this.baseURL + "/Xt_grdAlignment_WMES/AddgrdAlignmentWMES",
|
data: {
|
'sMainSub': sMainSub
|
},
|
}).then(response => {
|
console.log(1, response)
|
if (response.data.count == 1) {
|
this.$modal.msgSuccess("提交成功")
|
} else {
|
this.$modal.msgError(response.data.Message);
|
}
|
}).catch(error => {
|
console.log(2, error)
|
|
this.$modal.msgError("接口请求失败!");
|
});
|
},
|
//退出
|
handleExit() {
|
this.$emit('rowEditClose', false)
|
},
|
// 删除
|
handleDel() {
|
this.$modal.confirm('确认要删除吗，删除后不能恢复').then(() => {
|
axios.get(this.baseURL + "/Xt_grdAlignment_WMES/DelgrdAlignmentWMES", {
|
params: { "HModName": this.HModName, "user": this.user }
|
}).then(response => {
|
console.log(response)
|
let result = response.data
|
if (response.data.count == 1) {
|
this.$modal.msgSuccess(result.Message)
|
} else {
|
this.$modal.msgError("错误:" + result.code + result.Message);
|
}
|
}).catch(error => {
|
console.log(error)
|
this.$modal.msgError("接口请求失败!");
|
});
|
}).catch(() => { })
|
},
|
}
|
}
|
</script>
|
