253 lines
6.7 KiB
Vue
253 lines
6.7 KiB
Vue
<template>
|
|
<div class="page-body">
|
|
|
|
<!-- 搜索区 -->
|
|
<vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch">
|
|
</vxe-form>
|
|
|
|
<!-- 表格区 -->
|
|
<vxe-grid ref='xGrid' v-bind="gridOptions" ></vxe-grid>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BASE_URL from '@/services/mes/api.js';
|
|
import { toDateString } from 'xe-utils'
|
|
|
|
export default {
|
|
i18n: require('./i18n'),
|
|
props: {
|
|
pageMode: {
|
|
type: String,
|
|
default: "edit"
|
|
}
|
|
},
|
|
data() {
|
|
|
|
// 页面数据变量
|
|
var pageData = {
|
|
|
|
keyName: 'ID',
|
|
tabKey: '1',
|
|
actions: {
|
|
getList: `${BASE_URL.BASE_URL}/MoldComponent/v1/mold/component/list`,
|
|
},
|
|
detailDataFieldName: "MoldComponent",
|
|
currentRowId: 0,
|
|
|
|
start_time: 0,
|
|
end_time: 0,
|
|
|
|
table1Height: 300,
|
|
downHeight: 0,
|
|
|
|
detailsData:[],
|
|
|
|
//搜索区
|
|
searchFormData: {
|
|
code: '',
|
|
},
|
|
searchRules: [
|
|
{ key: "code", mode: "like" },
|
|
{ key: "name", mode: "like" },
|
|
],
|
|
|
|
|
|
searchFormItems: [
|
|
{ field: 'code', title: '编码', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入编码' } } },
|
|
{ field: 'name', title: '名称', span: 6, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
|
|
|
|
|
|
{ span: 4, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] } }
|
|
],
|
|
|
|
|
|
//数据区
|
|
gridOptions: {
|
|
height: 600,
|
|
id: 'datagrid_1',
|
|
rowConfig: {
|
|
isCurrent: true
|
|
},
|
|
checkboxConfig: {
|
|
|
|
},
|
|
radioConfig: {
|
|
},
|
|
|
|
proxyConfig: {
|
|
sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
|
|
filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
|
|
props: {
|
|
result: 'MoldComponent', // 配置响应结果列表字段
|
|
total: 'total' // 配置响应结果总页数字段
|
|
},
|
|
// 接收Promise
|
|
ajax: {
|
|
// 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
|
|
query: (options) => {
|
|
const { page, sorts } = options; // 获取当前页码、每页条数、排序信息
|
|
var params = {}; // 定义请求参数
|
|
params.page = page.currentPage; // 当前页码
|
|
params.limit = page.pageSize; // 每页条数
|
|
params.order_bys = []; // 排序信息
|
|
params.search_rules = this.getSearchParms(); // 搜索信息
|
|
if (sorts) { // 如果有排序信息
|
|
sorts.forEach((v) => { // 遍历排序信息
|
|
params.order_bys.push({ // 添加排序信息
|
|
column: v.property, // 字段名
|
|
order: v.order // 排序方式
|
|
})
|
|
});
|
|
}
|
|
return this.loadData({ params }); // 返回请求结果
|
|
}
|
|
}
|
|
},
|
|
columns: [
|
|
{ field: 'code', sortable: true, title: '编码', width: 250 },
|
|
|
|
{ field: 'name', sortable: true, title: '名称', width: 250 },
|
|
|
|
{ field: 'create_time', formatter: 'formatDate', width: 100, sortable: true, title: '创建时间', showHeaderOverflow: true }, // 创建时间
|
|
{ field: 'update_time', formatter: 'formatDate', width: 100, sortable: true, title: '更新时间', showHeaderOverflow: true }, // 更新时间
|
|
|
|
|
|
]
|
|
},
|
|
|
|
|
|
|
|
};
|
|
|
|
pageData.gridOptions = Object.assign({}, this.$mk.config.defaults.gridOptions, pageData.gridOptions);
|
|
|
|
return pageData;
|
|
},
|
|
computed: {
|
|
desc() {
|
|
return this.$t('pageDesc')
|
|
}
|
|
},
|
|
created() {
|
|
this.heightInit();
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
// 函数
|
|
methods: {
|
|
heightInit() {
|
|
this.$nextTick(() => {
|
|
|
|
this.gridOptions.height = (this.$mk.getWindowSize().height - this.$mk.getOffsetTop(this.$refs.xGrid.$el) - 150) ;
|
|
|
|
this.table1Height = this.gridOptions.height - 20;
|
|
|
|
});
|
|
},
|
|
getConfirmData() {
|
|
return this.getSelectdRow();
|
|
},
|
|
|
|
onDateChange(date) {
|
|
|
|
if (date && date.length) {
|
|
this.start_time = toDateString(date[0]._d, 'yyyy/MM/dd') + ' 00:00';
|
|
this.end_time = toDateString(date[1]._d, 'yyyy/MM/dd') + ' 23:59:59';
|
|
} else {
|
|
this.start_time = null;
|
|
this.end_time = null;
|
|
}
|
|
|
|
},
|
|
getSearchParms() {
|
|
var rules = []; // 定义搜索参数
|
|
let findMode = k => { // 查找搜索模式
|
|
for (let i in this.searchRules) { // 遍历搜索规则
|
|
if (this.searchRules[i].key == k) return this.searchRules[i].mode; // 如果找到了就返回搜索模式
|
|
}
|
|
return "="; // 如果没有找到就返回等于
|
|
};
|
|
|
|
for (let key in this.searchFormData) { // 遍历搜索表单数据
|
|
let value = this.searchFormData[key]; // 获取值
|
|
if (value) { // 如果有值
|
|
let mode = findMode(key); // 获取搜索模式
|
|
if (mode == "like") { // 如果是模糊搜索
|
|
value = "%" + value + "%"; // 如果是模糊搜索就在两边加上%
|
|
}
|
|
if (typeof (value) == "object" && value.id) {
|
|
value = value.id;
|
|
}
|
|
rules.push({ // 添加搜索参数
|
|
column: key, // 字段名
|
|
mode: mode, // 搜索模式
|
|
value: value // 值
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
return rules; // 返回搜索参数
|
|
},
|
|
getSelectdRow() {
|
|
let row1 = this.$refs.xGrid.getCurrentRecord();
|
|
|
|
return {row1};
|
|
},
|
|
loadData({ params }) {
|
|
|
|
params.start_time = this.start_time; // 开始时间
|
|
params.end_time = this.end_time; // 结束时间
|
|
return this.$mk.getPagedData({
|
|
url: this.actions.getList,
|
|
data: params
|
|
});
|
|
},
|
|
|
|
//add / log / setting
|
|
toolbarClick(e) {
|
|
if (e.name == "add") {
|
|
/*
|
|
this.$mk.dialog.open({
|
|
page: addPage,
|
|
title: "新增编号信息",
|
|
pageMode: "add",
|
|
dataId: 0,
|
|
callback: ({ success }) => {
|
|
success && this.$refs.xGrid.commitProxy('query')
|
|
}
|
|
})
|
|
*/
|
|
|
|
this.$openPage('/tCode/tAttributeEdit')
|
|
}
|
|
else if (e.name == "delete") {
|
|
this.pageDelete();
|
|
}
|
|
},
|
|
|
|
|
|
onSearch() {
|
|
this.$refs.xGrid.commitProxy('query')
|
|
}
|
|
},
|
|
// 监听属性
|
|
watch: {
|
|
|
|
}
|
|
};
|
|
|
|
</script>
|
|
<style>
|
|
.page-body {
|
|
padding: 10px 10px;
|
|
background: white;
|
|
}
|
|
|
|
.gridPanel {
|
|
height: calc(100vh - 300px);
|
|
}
|
|
</style> |