Skip to content

M
mes-ui
Commit 4f114e5e authored by 仇晓婷's avatar 仇晓婷
Browse files
Options

卡片列表无数据提醒

parent b0829f67
Hide whitespace changes
Inline Side-by-side
Showing with 932 additions and 855 deletions
components/page/dataGrid.vue
View file @ 4f114e5e
<template> <template>
<div class="table-content"> <div class="table-content">
<div class="table-tools" v-if="tool"> <div class="table-tools" v-if="tool">
<div class="table-search"> <div class="table-search">
<slot name="easySearch" v-if="easy"> <slot name="easySearch" v-if="easy">
<Form inline> <Form inline>
<FormItem> <FormItem>
<Input search enter-button :placeholder="placeholder" @on-search="easySearch" v-width="300" v-model="keys" /> <Input
</FormItem> search
<FormItem> enter-button
<Button v-if="high" @click="modalSearch=true" type="text"> :placeholder="placeholder"
<Icon type="md-search" />高级 @on-search="easySearch"
</Button> v-width="300"
</FormItem> v-model="keys"
</Form> />
</slot> </FormItem>
</div> <FormItem>
<Button v-if="high" @click="modalSearch = true" type="text">
<Icon type="md-search" />高级
</Button>
</FormItem>
</Form>
</slot>
</div>
<div class="searchBack"> <div class="searchBack">
<slot name="searchBack"></slot> <slot name="searchBack"></slot>
</div> </div>
<div class="btns"> <div class="btns">
<slot name="buttons"></slot> <slot name="buttons"></slot>
<Button @click="export2Excel" v-if="exportTitle.length>0">导出</Button> <Button @click="export2Excel" v-if="exportTitle.length > 0"
<Button v-if="set&&type=='table'" @click="config=!config"> >导出</Button
<Icon type="md-build" title="列设置" /> >
</Button> <Button v-if="set && type == 'table'" @click="config = !config">
</div> <Icon type="md-build" title="列设置" />
</Button>
</div>
</div> </div>
<div class="table-main" ref="main"> <div class="table-main" ref="main">
<Row v-if="type=='card'" :gutter="40"> <Row v-if="type == 'card'" :gutter="40">
<Col :span="span" v-for="(row,i) in list" :key="i"> <Col :span="span" v-for="(row, i) in list" :key="i">
<slot name="card" :row="row"> <slot name="card" :row="row">
<span>{{row.id}}</span> <span>{{ row.id }}</span>
</slot> </slot>
</Col> </Col>
</Row> <Col v-if="list.length == 0" span="24" class="zan-wu">
<Table v-else :border="border" :columns="columnsNow" :data="list" :height="tableHeight" :draggable="draggable" ref="table" class="tableCommon" @on-expand="expand" @on-drag-drop="onDragDrop" @on-selection-change="selectionChange" @on-select="onSelect" @on-select-all="allChange" :row-key="rowKey" stripe></Table> <h4>暂无数据</h4>
</Col>
</Row>
<Table
v-else
:border="border"
:columns="columnsNow"
:data="list"
:height="tableHeight"
:draggable="draggable"
ref="table"
class="tableCommon"
@on-expand="expand"
@on-drag-drop="onDragDrop"
@on-selection-change="selectionChange"
@on-select="onSelect"
@on-select-all="allChange"
:row-key="rowKey"
stripe
></Table>
</div> </div>
<div class="table-footer"> <div class="table-footer">
<slot name="footer"></slot> <slot name="footer"></slot>
<Page v-if="page" :total="search.total" :current="search.page" class="fr" show-total size="small" show-elevator show-sizer :page-size="search.pageSize" :page-size-opts="pageSizeOpts" @on-change="pageChange" @on-page-size-change="pageSizeChange" /> <Page
v-if="page"
:total="search.total"
:current="search.page"
class="fr"
show-total
size="small"
show-elevator
show-sizer
:page-size="search.pageSize"
:page-size-opts="pageSizeOpts"
@on-change="pageChange"
@on-page-size-change="pageSizeChange"
/>
</div> </div>
<Modal v-if="high" v-model="modalSearch" title="高级搜索" draggable width="800" ref="search"> <Modal
<slot name="searchForm"></slot> v-if="high"
<div slot="footer"> v-model="modalSearch"
<Button @click="modalSearch=false" style="margin-left:20px;">取消</Button> title="高级搜索"
<Button @click="complexSearch" type="primary" style="margin-left:10px;">查询</Button> draggable
</div> width="800"
ref="search"
>
<slot name="searchForm"></slot>
<div slot="footer">
<Button @click="modalSearch = false" style="margin-left: 20px"
>取消</Button
>
<Button @click="complexSearch" type="primary" style="margin-left: 10px"
>查询</Button
>
</div>
</Modal> </Modal>
<Drawer title="列设置" v-if="set" v-model="config" :scrollable="true" placement="left" :mask="false"> <Drawer
<div slot="header"> title="列设置"
列设置 v-if="set"
<a @click="undoConfig" class="ml50"> v-model="config"
<Icon type="md-refresh" title="恢复初始设置" /> :scrollable="true"
</a> placement="left"
</div> :mask="false"
<ul class="table-columns"> >
<li v-for="(li,index) in columnsCur" :key="index" v-dragging="{ item: li, list: columnsCur, group: 'li' }"> <div slot="header">
<label @click="columnChange(li,index)" :class="{dis:li.hide}"> 列设置
<Icon :type="li.hide?'md-eye-off':'md-eye'" size="16" class="mr10" /> <a @click="undoConfig" class="ml50">
<span>{{li.title}}</span> <Icon type="md-refresh" title="恢复初始设置" />
</label> </a>
<Icon type="ios-move" class="move" size="18" /> </div>
</li> <ul class="table-columns">
</ul> <li
v-for="(li, index) in columnsCur"
:key="index"
v-dragging="{ item: li, list: columnsCur, group: 'li' }"
>
<label @click="columnChange(li, index)" :class="{ dis: li.hide }">
<Icon
:type="li.hide ? 'md-eye-off' : 'md-eye'"
size="16"
class="mr10"
/>
<span>{{ li.title }}</span>
</label>
<Icon type="ios-move" class="move" size="18" />
</li>
</ul>
</Drawer> </Drawer>
<FooterToolbar v-if="batch" v-show="footerToolbar" class="ftball"> <FooterToolbar v-if="batch" v-show="footerToolbar" class="ftball">
<div class="tip">已选{{selectItems.length}}项</div> <div class="tip">已选{{ selectItems.length }}项</div>
<slot name="batch"></slot> <slot name="batch"></slot>
<Button @click="cancelBatch">取消</Button> <Button @click="cancelBatch">取消</Button>
</FooterToolbar> </FooterToolbar>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "DataGrid", name: "DataGrid",
data() { data() {
return {
keys: "",
selectItems: [],
footerToolbar: false,
modalSearch: false,
search: {
pageIndex: 1,
pageSize: 20,
conditions: [],
},
searchConditions: this.search,
pageSizeOpts: [20, 50, 100],
tableHeight: 0,
firstY: 0,
config: false,
list: [],
columnsCur: [],
configLoad: false,
userConfig: null, //用户页面配置信息。,
// userId: 1
userId: this.$store.state.userInfo.userId,
treeData: [], //物料数据
codeRuleData: [], //物料编码
routingHeaderData: [], //工艺规程
allUser: [], //所有user
};
},
props: {
border: {
//是否显示边框
type: Boolean,
default: true,
},
batch: {
//是否批量操作
type: Boolean,
default: true,
},
format: {
type: Function,
default: null,
},
initsearch: {
type: Function,
default: null,
},
lazy: {
//懒加载设置，设置为真时候，默认不加载数据。
type: Boolean,
default: false,
},
placeholder: {
type: String,
default: "请输入关键字",
},
height: {
type: Number,
default: 0,
},
tool: {
//是否显示工具栏
type: Boolean,
default: true,
},
easy: {
//是否显示简单搜索
type: Boolean,
default: true,
},
high: {
//是否显示高级搜索
type: Boolean,
default: true,
},
draggable: {
//是否可以拖拽
type: Boolean,
default: false,
},
set: {
//是否显示列设置
type: Boolean,
default: true,
},
page: {
//是否分页
type: Boolean,
default: true,
},
data: {
// 当作table使用，直接显示数据
type: Array,
default: function () {
return [];
},
},
columns: {
//要显示的字段
type: Array,
default: [],
},
action: {
//接口地址
type: String,
default: "",
},
conditions: {
//查询条件
type: Object,
default: function () {
return { return {
keys: "", keys: {
selectItems: [], op: "name",
footerToolbar: false, value: "",
modalSearch: false, default: true,
search: { },
pageIndex: 1,
pageSize: 20,
conditions: [],
},
searchConditions: this.search,
pageSizeOpts: [20, 50, 100],
tableHeight: 0,
firstY: 0,
config: false,
list: [],
columnsCur: [],
configLoad: false,
userConfig: null, //用户页面配置信息。,
// userId: 1
userId: this.$store.state.userInfo.userId,
treeData: [], //物料数据
codeRuleData: [], //物料编码
routingHeaderData: [], //工艺规程
allUser: [] //所有user
}; };
},
}, },
props: { type: {
border: { type: String,
//是否显示边框 default: "table",
type: Boolean, validator: function (value) {
default: true, // 这个值必须匹配下列字符串中的一个
}, return ["table", "card", "list"].indexOf(value) !== -1;
batch: { },
//是否批量操作 },
type: Boolean, span: {
default: true, //栅格数
}, type: Number,
format: { default: 24,
type: Function, },
default: null, //table控件children子数据控制功能
}, rowKey: {
initsearch: { type: [String, Number],
type: Function, },
default: null, gutter: {
}, //间距
lazy: { type: Number,
//懒加载设置，设置为真时候，默认不加载数据。 default: 40,
type: Boolean, },
default: false, exportTitle: {
}, type: String,
placeholder: { default: "",
type: String, },
default: "请输入关键字", },
}, created() {
height: { this.columns.forEach((u) => {
type: Number, if (!u.hide) {
default: 0, u.hide = false;
}, }
tool: { });
//是否显示工具栏 this.columnsCur = this.$u.clone(this.columns);
type: Boolean, },
default: true, mounted() {
}, if (this.data && this.data.length > 0) {
easy: { this.list = this.data;
//是否显示简单搜索 return;
type: Boolean, }
default: true, this.keys = "";
}, this.intY();
high: { if (this.lazy == true) {
//是否显示高级搜索 return;
type: Boolean, }
default: true, if (this.userId > 0 && this.set) {
}, this.loadUserConfig();
draggable: { } else {
//是否可以拖拽 this.easySearch();
type: Boolean, }
default: false, if (this.height === 0) {
}, this.$nextTick(() => {
set: { this.tableHeight = this.$refs.main.offsetHeight;
//是否显示列设置 if (this.tableHeight < 300) {
type: Boolean, this.tableHeight =
default: true, window.screen.availHeight - this.$refs.main.offsetTop - 200;
}, }
page: { window.onresize = () => {
//是否分页 ///浏览器窗口大小变化
type: Boolean, return (() => {
default: true, if (this.$refs.main && this.$refs.main.offsetHeight) {
}, this.tableHeight = this.$refs.main.offsetHeight;
data: { if (this.tableHeight < 300) {
// 当作table使用，直接显示数据 this.tableHeight =
type: Array, window.screen.availHeight - this.$refs.main.offsetTop - 150;
default: function () { }
return [];
},
},
columns: {
//要显示的字段
type: Array,
default: [],
},
action: {
//接口地址
type: String,
default: "",
},
conditions: {
//查询条件
type: Object,
default: function () {
return {
keys: {
op: "name",
value: "",
default: true,
},
};
},
},
type: {
type: String,
default: "table",
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ["table", "card", "list"].indexOf(value) !== -1;
},
},
span: {
//栅格数
type: Number,
default: 24,
},
//table控件children子数据控制功能
rowKey: {
type: [String, Number],
},
gutter: {
//间距
type: Number,
default: 40,
},
exportTitle: {
type: String,
default: "",
},
},
created() {
this.columns.forEach((u) => {
if (!u.hide) {
u.hide = false;
} }
})();
};
});
} else {
this.tableHeight = this.height;
}
//注册拖拽事件。
this.$dragging.$on("dragend", (e) => {
this.saveUserconfig();
});
//物料加载类型数据
this.getTreeData();
this.getcodeRuleData();
this.getRoutingHeaderData();
this.getAllUser(); //获取所有用户
},
methods: {
//数据加载
load() {
if (this.action) {
//条件初始化处理。
if (this.initsearch) {
this.initsearch(this.search);
}
this.$api.post(this.action, this.search).then((r) => {
if (this.format) {
this.list = this.format(r.result.items);
} else {
this.list = r.result.items;
}
this.search.total = r.result.totalCount || r.result.count;
}); });
this.columnsCur = this.$u.clone(this.columns); }
}, },
mounted() { columnInit() {
if (this.data && this.data.length > 0) { if (this.userConfig) {
this.list = this.data; var curColumns = [];
return; var config = JSON.parse(this.userConfig.content);
} if (config.length == this.columnsCur.length) {
this.keys = ""; config.map((u) => {
this.intY(); var item = this.columnsCur.filter((c) => {
if (this.lazy == true) { return c.key == u.key;
return; });
if (item[0]) {
item[0].hide = u.hide;
curColumns.push(item[0]);
}
});
this.columnsCur = curColumns;
} }
if (this.userId > 0 && this.set) { }
this.loadUserConfig(); },
} else { loadUserConfig() {
var query = {
conditions: [
{
fieldName: "creatorUserId",
fieldValue: this.userId,
conditionalType: "Equal",
},
{
fieldName: "component",
fieldValue: "Grid",
conditionalType: "Equal",
},
{
fieldName: "page",
fieldValue: window.location.pathname,
conditionalType: "Equal",
},
],
pageSize: 1,
};
this.$api.post(`${window.systemUrl}/config/list`, query).then((r) => {
if (r.success) {
if (r.result.length == 1) {
this.userConfig = r.result[0];
this.columnInit();
}
if (!this.configLoad) {
this.easySearch(); this.easySearch();
}
this.configLoad = true;
} }
if (this.height === 0) { });
this.$nextTick(() => { },
this.tableHeight = this.$refs.main.offsetHeight; saveUserconfig() {
if (this.tableHeight < 300) { let url = `${window.systemUrl}/config/update`;
this.tableHeight = var content = [];
window.screen.availHeight - this.$refs.main.offsetTop - 200; this.columnsCur.map((u) => {
} content.push({
window.onresize = () => { key: u.key,
///浏览器窗口大小变化 hide: u.hide,
return (() => { });
if (this.$refs.main && this.$refs.main.offsetHeight) { });
this.tableHeight = this.$refs.main.offsetHeight; if (!this.userConfig) {
if (this.tableHeight < 300) { url = `${window.systemUrl}/config/create`;
this.tableHeight = var data = {
window.screen.availHeight - this.$refs.main.offsetTop - 150; page: window.location.pathname,
} component: "Grid",
} key: this.$u.guid(),
})(); content: JSON.stringify(content),
}; };
}); this.$api.post(url, data).then((r) => {
} else { this.loadUserConfig();
this.tableHeight = this.height;
}
//注册拖拽事件。
this.$dragging.$on("dragend", (e) => {
this.saveUserconfig();
}); });
//物料加载类型数据 } else {
this.getTreeData(); this.userConfig.content = JSON.stringify(content);
this.getcodeRuleData(); this.$api.post(url, this.userConfig);
this.getRoutingHeaderData(); }
this.getAllUser(); //获取所有用户 },
}, //展开
methods: { expand(row, status) {
//数据加载 this.$emit("on-expand", row, status);
load() { },
if (this.action) { //拖拽
//条件初始化处理。 onDragDrop(a, b) {
if (this.initsearch) { this.$emit("on-drag-drop", a, b);
this.initsearch(this.search); },
easySearch() {
if (
this.conditions &&
this.conditions.keys &&
this.conditions.keys.default
) {
//判断没有传入条件的用默认的查询
this.conditions.keys.value = this.keys;
}
this.reload(this.conditions);
},
undoConfig() {
//列设置恢复初始化
this.columnsCur = this.$u.clone(this.columns);
this.saveUserconfig();
},
complexSearch() {
var search = this.$refs.search.$children.filter((u) => {
return u.condition;
});
if (search) {
var conditions = search[0].condition;
this.reload(conditions);
}
},
reload(conditions) {
var where = [];
this.searchConditions = conditions;
if (conditions) {
Object.keys(conditions).forEach((u) => {
let v = conditions[u].value;
let op = conditions[u].op;
if (!this.$u.isNull(v)) {
if (op == "Range" && Array.isArray(v)) {
let times = [];
v.map((u) => {
if (!this.$u.isNull(u)) {
times.push(this.$u.toTime(u));
} }
this.$api.post(this.action, this.search).then((r) => { });
if (this.format) { v = times.join(",");
this.list = this.format(r.result.items); } else if (op.indexOf("In") > -1 && Array.isArray(v)) {
} else { v = v.join(",");
this.list = r.result.items;
}
this.search.total = r.result.totalCount || r.result.count;
});
} }
}, if (!this.$u.isNull(v)) {
columnInit() { where.push({
if (this.userConfig) { fieldName: u,
var curColumns = []; fieldValue: v,
var config = JSON.parse(this.userConfig.content); conditionalType: op,
if (config.length == this.columnsCur.length) { });
config.map((u) => {
var item = this.columnsCur.filter((c) => {
return c.key == u.key;
});
if (item[0]) {
item[0].hide = u.hide;
curColumns.push(item[0]);
}
});
this.columnsCur = curColumns;
}
} }
}, }
loadUserConfig() { });
var query = { }
conditions: [{ this.search.pageIndex = 1;
fieldName: "creatorUserId", this.search.conditions = where;
fieldValue: this.userId, this.load();
conditionalType: "Equal", },
}, pageChange(page) {
{ this.search.page = page;
fieldName: "component", this.search.pageIndex = page;
fieldValue: "Grid", this.load();
conditionalType: "Equal", },
}, pageSizeChange(size) {
{ this.search.pageSize = size;
fieldName: "page", this.search.pageIndex = 1;
fieldValue: window.location.pathname, this.load();
conditionalType: "Equal", },
}, columnChange(item, i) {
], item.hide = !item.hide;
pageSize: 1, this.$set(this.columnsCur, item, i);
}; this.saveUserconfig();
this.$api.post(`${window.systemUrl}/config/list`, query).then((r) => { },
if (r.success) { selectionChange(items) {
if (r.result.length == 1) { this.$emit("on-selection-change", items);
this.userConfig = r.result[0]; this.selectItems = items;
this.columnInit(); this.footerToolbar = items.length > 0;
} },
if (!this.configLoad) { onSelect(rows, row) {
this.easySearch(); this.$emit("on-change", rows, row);
} },
this.configLoad = true; allChange(items) {
} this.$emit("all-change", items);
}); },
}, intY() {
saveUserconfig() { if (this.$refs.table != undefined) {
let url = `${window.systemUrl}/config/update`; this.firstY = this.$refs.table.$el.getBoundingClientRect().top;
var content = []; }
this.columnsCur.map((u) => { },
content.push({ selectAll(status) {
key: u.key, this.$refs.table.selectAll(status);
hide: u.hide, },
}); //获取所有用户信息
getAllUser() {
this.$api
.post(`${systemUrl}/user/paged`, {
conditions: [],
pageIndex: 1,
pageSize: 100000,
})
.then((r) => {
if (r.success) {
let tempUserInfo = r.result.items;
tempUserInfo.forEach((ele) => {
let temObj = {
userId: ele.id,
name: ele.userName,
};
this.allUser.push(temObj);
}); });
if (!this.userConfig) { }
url = `${window.systemUrl}/config/create`; });
var data = { },
page: window.location.pathname, getUserName(id) {
component: "Grid", let name = "";
key: this.$u.guid(), this.allUser.forEach((ele) => {
content: JSON.stringify(content), if (id == ele.userId) {
}; name = ele.name;
this.$api.post(url, data).then((r) => { }
this.loadUserConfig(); });
}); return name;
} else { },
this.userConfig.content = JSON.stringify(content); //批量取消
this.$api.post(url, this.userConfig); cancelBatch() {
this.footerToolbar = false;
this.$refs.table.selectAll(false);
},
//导出excel
export2Excel() {
//当前显示数据
var where = [];
var conditions = this.searchConditions;
if (conditions) {
Object.keys(conditions).forEach((u) => {
let v = conditions[u].value;
let op = conditions[u].op;
if (!this.$u.isNull(v)) {
if (op == "Range") {
let times = [];
v.map((u) => {
if (!this.$u.isNull(u)) {
times.push(this.$u.toTime(u));
}
});
v = times.join(",");
} else if (op.indexOf("In") > -1 && Array.isArray(v)) {
v = v.join(",");
} }
}, if (!this.$u.isNull(v)) {
//展开 where.push({
expand(row, status) { fieldName: u,
this.$emit("on-expand", row, status); fieldValue: v,
}, conditionalType: op,
//拖拽 });
onDragDrop(a, b) {
this.$emit("on-drag-drop", a, b);
},
easySearch() {
if (
this.conditions &&
this.conditions.keys &&
this.conditions.keys.default
) {
//判断没有传入条件的用默认的查询
this.conditions.keys.value = this.keys;
} }
this.reload(this.conditions); }
}, });
undoConfig() { }
//列设置恢复初始化 let searchs = {
this.columnsCur = this.$u.clone(this.columns); pageIndex: 1,
this.saveUserconfig(); conditions: where,
}, pageSize: 1000,
complexSearch() { };
var search = this.$refs.search.$children.filter((u) => { this.$api.post(this.action, searchs).then((r) => {
return u.condition; let list = [];
}); list = r.result.items;
if (search) { const tHeader = []; // 设置Excel的表格第一行的标题
var conditions = search[0].condition; const filterVal = []; //list里对象的属性
this.reload(conditions); var tempCol = [];
var tempCol1 = []; //存放物料相关表头
var tempCol2 = []; //存放工艺规程相关表头
var tempColUser = []; //存放type=user的表头
var columnsCur = this.$u.clone(this.columnsCur); //导出列标题信息griddata this.$refs.grid.columnsCur
columnsCur.forEach((el) => {
if (
(el.hide && el.import) ||
(!el.hide &&
el.key != "action" &&
el.type != "selection" &&
el.key != "ico")
) {
if (el.code) {
tempCol.push({
key: el.key,
code: el.code,
}); //临时存放code数据字典的字段及对应的数据字典code
} }
}, if (el.materialKey) {
reload(conditions) { tempCol1.push({
var where = []; key: el.key,
this.searchConditions = conditions; code: el.materialKey,
if (conditions) { }); //临时存放物料管理大类和子类列表
Object.keys(conditions).forEach((u) => {
let v = conditions[u].value;
let op = conditions[u].op;
if (!this.$u.isNull(v)) {
if (op == "Range" && Array.isArray(v)) {
let times = [];
v.map((u) => {
if (!this.$u.isNull(u)) {
times.push(this.$u.toTime(u));
}
});
v = times.join(",");
} else if (op.indexOf("In") > -1 && Array.isArray(v)) {
v = v.join(",");
}
if (!this.$u.isNull(v)) {
where.push({
fieldName: u,
fieldValue: v,
conditionalType: op,
});
}
}
});
} }
this.search.pageIndex = 1; if (el.techKey) {
this.search.conditions = where; tempCol2.push({
this.load(); key: el.key,
}, code: el.techKey,
pageChange(page) { }); //临时存放工艺规程相关转换
this.search.page = page; }
this.search.pageIndex = page; if (el.type && el.type == "user") {
this.load(); tempColUser.push({
}, key: el.key,
pageSizeChange(size) { code: el.type,
this.search.pageSize = size; }); //临时存放user列
this.search.pageIndex = 1;
this.load();
},
columnChange(item, i) {
item.hide = !item.hide;
this.$set(this.columnsCur, item, i);
this.saveUserconfig();
},
selectionChange(items) {
this.$emit("on-selection-change", items);
this.selectItems = items;
this.footerToolbar = items.length > 0;
},
onSelect(rows, row) {
this.$emit("on-change", rows, row);
},
allChange(items) {
this.$emit("all-change", items);
},
intY() {
if (this.$refs.table != undefined) {
this.firstY = this.$refs.table.$el.getBoundingClientRect().top;
} }
},
selectAll(status) {
this.$refs.table.selectAll(status);
},
//获取所有用户信息
getAllUser() {
this.$api.post(`${systemUrl}/user/paged`, {
conditions: [],
pageIndex: 1,
pageSize: 100000,
})
.then((r) => {
if (r.success) {
let tempUserInfo = r.result.items
tempUserInfo.forEach(ele => {
let temObj = {
userId: ele.id,
name: ele.userName
}
this.allUser.push(temObj)
})
} tHeader.push(el.title);
}) filterVal.push(el.key);
}, }
getUserName(id) { });
let name = '' list.forEach((e) => {
this.allUser.forEach(ele => { //给导出数据增加数据字典对应的name
if (id == ele.userId) { // tempCol.forEach((ele) => {
name = ele.name // e[ele.key] = this.$u.dirName(
// this.$store.getters.dictionaryByKey(ele.code),
// e[ele.key]
// );
// });
tempCol.forEach((elem) => {
if (e[elem.key] && e[elem.key] != "" && e[elem.key] != null) {
//如果数据字典项对应的DirName字段存在，通过name查询到对应的code，然后赋值。
let codeArr = [];
let keyValue = e[elem.key];
if (
keyValue.length > 0 &&
(keyValue.indexOf(",") > -1 || keyValue.indexOf("，") > -1)
) {
//如果对应的数据包含多个数据字典项，比如包含“，”或“,”
if (keyValue.indexOf(",") > -1) {
codeArr = keyValue.split(",");
} }
}) if (keyValue.indexOf > -1) {
return name codeArr = keyValue.split("，");
}, }
//批量取消 }
cancelBatch() { if (codeArr.length <= 1) {
this.footerToolbar = false; //对应的数据包含一个数据字典项
this.$refs.table.selectAll(false); e[elem.key] = this.$u.dirName(
}, this.$store.getters.dictionaryByKey(elem.code),
e[elem.key]
//导出excel );
export2Excel() { } else {
//当前显示数据 //对应的数据包含多个数据字典项
var where = []; let codeInfo = "";
var conditions = this.searchConditions; codeArr.forEach((el) => {
if (conditions) { codeInfo =
Object.keys(conditions).forEach((u) => { codeInfo +
let v = conditions[u].value; this.$u.dirName(
let op = conditions[u].op; this.$store.getters.dictionaryByKey(elem.code),
if (!this.$u.isNull(v)) { el
if (op == "Range") { ) +
let times = []; ",";
v.map((u) => {
if (!this.$u.isNull(u)) {
times.push(this.$u.toTime(u));
}
});
v = times.join(",");
} else if (op.indexOf("In") > -1 && Array.isArray(v)) {
v = v.join(",");
}
if (!this.$u.isNull(v)) {
where.push({
fieldName: u,
fieldValue: v,
conditionalType: op,
});
}
}
}); });
e[elem.key] = codeInfo.substr(0, codeInfo.length - 1);
}
} }
let searchs = { });
pageIndex: 1, //导出数据增加对应的物料管理信息 code： 1【rootCategoryId 大类】 2【categoryId 大类】 3【codeRuleId 编码名称】
conditions: where, tempCol1.forEach((elcol1) => {
pageSize: 1000, if (elcol1.code == 1) {
}; e[elcol1.key] = this.getType1(e[elcol1.key]);
this.$api.post(this.action, searchs).then((r) => { } else if (elcol1.code == 2) {
let list = []; e[elcol1.key] = this.getType2(e[elcol1.key]);
list = r.result.items; } else if (elcol1.code == 3) {
const tHeader = []; // 设置Excel的表格第一行的标题 e[elcol1.key] = this.getType3(e[elcol1.key]);
const filterVal = []; //list里对象的属性 }
var tempCol = []; });
var tempCol1 = []; //存放物料相关表头 //导出工艺规程相关转换表头信息
var tempCol2 = []; //存放工艺规程相关表头 tempCol2.forEach((elcol2) => {
var tempColUser = []; //存放type=user的表头 if (elcol2.code == 1) {
var columnsCur = this.$u.clone(this.columnsCur); //导出列标题信息griddata this.$refs.grid.columnsCur e[elcol2.key] = this.getRoutingHeaderName(e[elcol2.key]);
columnsCur.forEach((el) => { }
if ( });
(el.hide && el.import) || //导出username相关信息
(!el.hide && tempColUser.forEach((eluser) => {
el.key != "action" && if (e[eluser.key] && e[eluser.key] != "" && e[eluser.key] != null) {
el.type != "selection" && e[eluser.key] = this.getUserName(e[eluser.key]);
el.key != "ico") }
) { });
if (el.code) { });
tempCol.push({
key: el.key,
code: el.code,
}); //临时存放code数据字典的字段及对应的数据字典code
}
if (el.materialKey) {
tempCol1.push({
key: el.key,
code: el.materialKey,
}); //临时存放物料管理大类和子类列表
}
if (el.techKey) {
tempCol2.push({
key: el.key,
code: el.techKey,
}); //临时存放工艺规程相关转换
}
if (el.type && el.type == "user") {
tempColUser.push({
key: el.key,
code: el.type,
}); //临时存放user列
}
tHeader.push(el.title);
filterVal.push(el.key);
}
});
list.forEach((e) => {
//给导出数据增加数据字典对应的name
// tempCol.forEach((ele) => {
// e[ele.key] = this.$u.dirName(
// this.$store.getters.dictionaryByKey(ele.code),
// e[ele.key]
// );
// });
tempCol.forEach((elem) => {
if (
e[elem.key] &&
e[elem.key] != "" &&
e[elem.key] != null
) {
//如果数据字典项对应的DirName字段存在，通过name查询到对应的code，然后赋值。
let codeArr = []
let keyValue = e[elem.key]
if (keyValue.length > 0 && (keyValue.indexOf(',') > -1 || keyValue.indexOf('，') > -1)) { //如果对应的数据包含多个数据字典项，比如包含“，”或“,”
if (keyValue.indexOf(',') > -1) {
codeArr = keyValue.split(',')
}
if (keyValue.indexOf > -1) {
codeArr = keyValue.split('，')
}
}
if (codeArr.length <= 1) { //对应的数据包含一个数据字典项
e[elem.key] = this.$u.dirName(
this.$store.getters.dictionaryByKey(elem.code),
e[elem.key]
);
} else { //对应的数据包含多个数据字典项
let codeInfo = ''
codeArr.forEach(el => {
codeInfo = codeInfo + this.$u.dirName(this.$store.getters.dictionaryByKey(elem.code), el) + ",";
})
e[elem.key] = codeInfo.substr(0, codeInfo.length - 1)
}
}
});
//导出数据增加对应的物料管理信息 code： 1【rootCategoryId 大类】 2【categoryId 大类】 3【codeRuleId 编码名称】
tempCol1.forEach((elcol1) => {
if (elcol1.code == 1) {
e[elcol1.key] = this.getType1(e[elcol1.key]);
} else if (elcol1.code == 2) {
e[elcol1.key] = this.getType2(e[elcol1.key]);
} else if (elcol1.code == 3) {
e[elcol1.key] = this.getType3(e[elcol1.key]);
}
});
//导出工艺规程相关转换表头信息
tempCol2.forEach((elcol2) => {
if (elcol2.code == 1) {
e[elcol2.key] = this.getRoutingHeaderName(e[elcol2.key]);
}
});
//导出username相关信息
tempColUser.forEach(eluser => {
if (
e[eluser.key] &&
e[eluser.key] != "" &&
e[eluser.key] != null
) {
e[eluser.key] = this.getUserName(e[eluser.key])
}
})
});
let nowDate = this.$u.getNowTime(); //年月日时分秒yyyyMMddhhmmss let nowDate = this.$u.getNowTime(); //年月日时分秒yyyyMMddhhmmss
//获取导出数据结束 //获取导出数据结束
this.$u.outExcel( this.$u.outExcel(
this.exportTitle + "(" + nowDate + ")", this.exportTitle + "(" + nowDate + ")",
tHeader, tHeader,
filterVal, filterVal,
list list
); );
}); });
}, },
//物料大类和子类的解析start //物料大类和子类的解析start
getTreeData() { getTreeData() {
let data = { let data = {
conditions: [], conditions: [],
}; };
this.$api.post(`${material}/category/list`, data).then((r) => { this.$api.post(`${material}/category/list`, data).then((r) => {
this.treeData = r.result; this.treeData = r.result;
}); });
}, },
getType1(val) { getType1(val) {
let tempTreeList = this.$u.clone(this.treeData); let tempTreeList = this.$u.clone(this.treeData);
let rootName = ""; let rootName = "";
tempTreeList.forEach((ele) => { tempTreeList.forEach((ele) => {
if (ele.upId == 0 && ele.id == val) { if (ele.upId == 0 && ele.id == val) {
rootName = ele.name; rootName = ele.name;
} }
}); });
return rootName; return rootName;
}, },
getType2(val) { getType2(val) {
let tempTreeList = this.$u.clone(this.treeData); let tempTreeList = this.$u.clone(this.treeData);
let childrenName = ""; let childrenName = "";
tempTreeList.forEach((ele) => { tempTreeList.forEach((ele) => {
if (ele.upId > 0 && ele.id == val) { if (ele.upId > 0 && ele.id == val) {
childrenName = ele.name; childrenName = ele.name;
} }
}); });
return childrenName; return childrenName;
}, },
//获取编码名称 //获取编码名称
getcodeRuleData() { getcodeRuleData() {
let data = { let data = {
conditions: [], conditions: [],
}; };
this.$api.post(`${material}/coderule/paged`, data).then((r) => { this.$api.post(`${material}/coderule/paged`, data).then((r) => {
if (r.success) { if (r.success) {
this.codeRuleData = r.result.items || []; this.codeRuleData = r.result.items || [];
} }
}); });
}, },
getType3(val) { getType3(val) {
let codeRuleDataList = this.$u.clone(this.codeRuleData); let codeRuleDataList = this.$u.clone(this.codeRuleData);
let codeRuleName = ""; let codeRuleName = "";
codeRuleDataList.forEach((ele) => { codeRuleDataList.forEach((ele) => {
if (ele.id == val) { if (ele.id == val) {
codeRuleName = ele.name; codeRuleName = ele.name;
} }
}); });
return codeRuleName; return codeRuleName;
}, },
//物料大类和子类的解析end //物料大类和子类的解析end
//工艺规程的解析start //工艺规程的解析start
//获取工艺规程名称 //获取工艺规程名称
getRoutingHeaderData() { getRoutingHeaderData() {
let data = { let data = {
conditions: [], conditions: [],
}; };
this.$api.post(`${technologyUrl}routingheader/list`, data).then((r) => { this.$api.post(`${technologyUrl}routingheader/list`, data).then((r) => {
if (r.success) { if (r.success) {
this.routingHeaderData = r.result || []; this.routingHeaderData = r.result || [];
} }
}); });
}, },
getRoutingHeaderName(val) { getRoutingHeaderName(val) {
let routingHeaderDataList = this.$u.clone(this.routingHeaderData); let routingHeaderDataList = this.$u.clone(this.routingHeaderData);
let routingHeaderName = ""; let routingHeaderName = "";
routingHeaderDataList.forEach((ele) => { routingHeaderDataList.forEach((ele) => {
if (ele.id == val) { if (ele.id == val) {
routingHeaderName = ele.name; routingHeaderName = ele.name;
} }
}); });
return routingHeaderName; return routingHeaderName;
}, },
//工艺规程的解析end //工艺规程的解析end
}, },
computed: { computed: {
columnsNow() { columnsNow() {
var cols = this.columnsCur.filter((u) => { var cols = this.columnsCur.filter((u) => {
if (u.code) { if (u.code) {
u.render = (h, params) => { u.render = (h, params) => {
let values = u.key; let values = u.key;
let type = "text"; let type = "text";
if (u.category) { if (u.category) {
type = u.category; type = u.category;
} }
return h("state", { return h("state", {
props: { props: {
code: u.code, code: u.code,
type: type, type: type,
value: params.row[values] + "", value: params.row[values] + "",
}, },
});
};
}
if (u.type == "user") {
u.render = (h, params) => {
let values = u.key;
if (params.row[values]) {
return h("User", {
props: {
value: params.row[values],
},
});
}
};
}
if (u.type == "workShopName") {
u.render = (h, params) => {
let values = u.key;
if (params.row[values]) {
return h("WorkShopName", {
props: {
value: params.row[values],
},
});
}
};
}
if (u.type == "date" || u.type == "dateTime") {
u.render = (h, params) => {
let values = u.key;
return h("DTSpan", {
props: {
type: u.type,
value: params.row[values],
},
});
};
}
return !u.hide;
}); });
return cols; };
}, }
}, if (u.type == "user") {
watch: { u.render = (h, params) => {
data() { let values = u.key;
this.list = this.data; if (params.row[values]) {
}, return h("User", {
height() { props: {
this.tableHeight = this.height; value: params.row[values],
}, },
columns() { });
this.columns.forEach((u) => { }
if (!u.hide) { };
u.hide = false; }
} if (u.type == "workShopName") {
u.render = (h, params) => {
let values = u.key;
if (params.row[values]) {
return h("WorkShopName", {
props: {
value: params.row[values],
},
});
}
};
}
if (u.type == "date" || u.type == "dateTime") {
u.render = (h, params) => {
let values = u.key;
return h("DTSpan", {
props: {
type: u.type,
value: params.row[values],
},
}); });
this.columnsCur = this.$u.clone(this.columns); };
}, }
return !u.hide;
});
return cols;
}, },
},
watch: {
data() {
this.list = this.data;
},
height() {
this.tableHeight = this.height;
},
columns() {
this.columns.forEach((u) => {
if (!u.hide) {
u.hide = false;
}
});
this.columnsCur = this.$u.clone(this.columns);
},
},
}; };
</script> </script>
...@@ -827,111 +899,116 @@ export default { ...@@ -827,111 +899,116 @@ export default {
@import "../../assets/css/custom.less"; @import "../../assets/css/custom.less";
.table-content { .table-content {
position: relative; position: relative;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.tip { .tip {
display: inline; display: inline;
} }
form { form {
display: inline-block; display: inline-block;
.ivu-form-item { .ivu-form-item {
margin: 0; margin: 0;
vertical-align: middle; vertical-align: middle;
}
} }
}
.table-main { .table-main {
width: 100%; width: 100%;
text-align: left; text-align: left;
padding: 0; padding: 0;
display: block; display: block;
overflow-y: auto; overflow-y: auto;
flex-grow: 1; flex-grow: 1;
tr td .ivu-table-cell {
padding: 0 5px;
}
overflow-x: hidden; tr td .ivu-table-cell {
padding: 0 5px;
} }
.table-tools { overflow-x: hidden;
display: flex; .zan-wu {
line-height: 50px; height: 600px;
background: @right-header-bg; line-height: 600px;
text-align: center;
}
}
.table-search { .table-tools {
flex-grow: 1; display: flex;
} line-height: 50px;
background: @right-header-bg;
.btns { .table-search {
min-width: 200px; flex-grow: 1;
text-align: right;
}
} }
.table-footer { .btns {
line-height: 45px; min-width: 200px;
text-align: right;
} }
}
.ivu-footer-toolbar { .table-footer {
text-align: left; line-height: 45px;
background: rgba(0, 0, 0, 0.7); }
color: #fff;
} .ivu-footer-toolbar {
text-align: left;
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
} }
.table-columns { .table-columns {
max-height: calc(100% - 50px); max-height: calc(100% - 50px);
overflow: auto; overflow: auto;
li { li {
list-style: none; list-style: none;
line-height: 40px; line-height: 40px;
cursor: move; cursor: move;
border-bottom: 1px dotted #249e91; border-bottom: 1px dotted #249e91;
color: #249e91; color: #249e91;
span { span {
cursor: pointer; cursor: pointer;
} }
.mr10 { .mr10 {
cursor: pointer; cursor: pointer;
} }
.move { .move {
float: right; float: right;
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
cursor: move; cursor: move;
} }
.dis { .dis {
color: #aaa; color: #aaa;
}
} }
}
} }
.searchBack { .searchBack {
display: inline; display: inline;
margin-left: 20px; margin-left: 20px;
button { button {
margin-left: 10px; margin-left: 10px;
} }
a { a {
margin-left: 20px; margin-left: 20px;
color: #2680eb; color: #2680eb;
} }
a:hover { a:hover {
color: #249e91; color: #249e91;
} }
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment