Skip to content

M
mes-ui
Commit e4fed9fa authored by renjintao's avatar renjintao
Browse files
Options

importimport

parent c511ba38
Hide whitespace changes
Inline Side-by-side
Showing with 1724 additions and 1549 deletions
components/page/dataGrid.vue
View file @ e4fed9fa
<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 <Input search enter-button :placeholder="placeholder" @on-search="easySearch" v-width="300" v-model="keys" />
search </FormItem>
enter-button <FormItem>
:placeholder="placeholder" <Button v-if="high" @click="modalSearch=true" type="text">
@on-search="easySearch" <Icon type="md-search" />高级
v-width="300" </Button>
v-model="keys" </FormItem>
/> </Form>
</FormItem> </slot>
<FormItem> </div>
<Button v-if="high" @click="modalSearch=true" type="text"> <div class="searchBack">
<Icon type="md-search" />高级 <slot name="searchBack"></slot>
</Button> </div>
</FormItem> <div class="btns">
</Form> <slot name="buttons"></slot>
</slot> <Button v-if="set&&type=='table'" @click="config=!config">
</div> <Icon type="md-build" title="列设置" />
<div class="searchBack"> </Button>
<slot name="searchBack"></slot> </div>
</div>
<div class="btns">
<slot name="buttons"></slot>
<Button v-if="set&&type=='table'" @click="config=!config">
<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> </Row>
<Table <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" :row-key="rowKey"></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"
:row-key="rowKey"
></Table>
</div> </div>
<div class="table-footer"> <div class="table-footer">
<slot name="footer"></slot> <slot name="footer"></slot>
<Page <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" />
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 v-if="high" v-model="modalSearch" title="高级搜索" draggable width="800" ref="search">
<slot name="searchForm"></slot> <slot name="searchForm"></slot>
<div slot="footer"> <div slot="footer">
<Button @click="modalSearch=false" style="margin-left:20px;">取消</Button> <Button @click="modalSearch=false" style="margin-left:20px;">取消</Button>
<Button @click="complexSearch" type="primary" style="margin-left:10px;">查询</Button> <Button @click="complexSearch" type="primary" style="margin-left:10px;">查询</Button>
</div> </div>
</Modal> </Modal>
<Drawer <Drawer title="列设置" v-if="set" v-model="config" :scrollable="true" placement="left" :mask="false">
title="列设置" <div slot="header">
v-if="set" 列设置
v-model="config" <a @click="undoConfig" class="ml50">
:scrollable="true" <Icon type="md-refresh" title="恢复初始设置" />
placement="left" </a>
:mask="false" </div>
> <ul class="table-columns">
<div slot="header"> <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}">
<a @click="undoConfig" class="ml50"> <Icon :type="li.hide?'md-eye-off':'md-eye'" size="16" class="mr10" />
<Icon type="md-refresh" title="恢复初始设置" /> <span>{{li.title}}</span>
</a> </label>
</div> <Icon type="ios-move" class="move" size="18" />
<ul class="table-columns"> </li>
<li </ul>
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"> <FooterToolbar v-if="batch" v-show="footerToolbar">
<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: [],
},
pageSizeOpts: [20, 50, 100],
tableHeight: 0,
firstY: 0,
config: false,
list: [],
columnsCur: [],
configLoad: false,
userConfig: null, //用户页面配置信息。,
// userId: 1
userId: this.$store.state.userInfo.userId,
};
},
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: { op: "name", value: "", default: true }, keys: "",
selectItems: [],
footerToolbar: false,
modalSearch: false,
search: {
pageIndex: 1,
pageSize: 20,
conditions: [],
},
pageSizeOpts: [20, 50, 100],
tableHeight: 0,
firstY: 0,
config: false,
list: [],
columnsCur: [],
configLoad: false,
userConfig: null, //用户页面配置信息。,
// userId: 1
userId: this.$store.state.userInfo.userId,
}; };
},
},
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: { props: {
//间距 border: {
type: Number, //是否显示边框
default: 40, type: Boolean,
}, default: true,
}, },
created() { batch: {
this.columns.forEach((u) => { //是否批量操作
if (!u.hide) { type: Boolean,
u.hide = false; default: true,
} },
}); format: {
this.columnsCur = this.$u.clone(this.columns); type: Function,
}, default: null,
mounted() { },
if (this.data && this.data.length > 0) { initsearch: {
this.list = this.data; type: Function,
return; default: null,
} },
this.keys = ""; lazy: {
this.intY(); //懒加载设置，设置为真时候，默认不加载数据。
if (this.lazy == true) { type: Boolean,
return; default: false,
} },
if (this.userId > 0 && this.set) { placeholder: {
this.loadUserConfig(); type: String,
} else { default: "请输入关键字",
this.easySearch(); },
} height: {
if (this.height === 0) { type: Number,
this.$nextTick(() => { default: 0,
this.tableHeight = this.$refs.main.offsetHeight; },
if (this.tableHeight < 300) { tool: {
this.tableHeight = //是否显示工具栏
window.screen.availHeight - this.$refs.main.offsetTop - 200; type: Boolean,
} default: true,
window.onresize = () => { },
///浏览器窗口大小变化 easy: {
return (() => { //是否显示简单搜索
if (this.$refs.main && this.$refs.main.offsetHeight) { type: Boolean,
this.tableHeight = this.$refs.main.offsetHeight; default: true,
if (this.tableHeight < 300) { },
this.tableHeight = high: {
window.screen.availHeight - this.$refs.main.offsetTop - 150; //是否显示高级搜索
} 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 {
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,
},
},
created() {
this.columns.forEach((u) => {
if (!u.hide) {
u.hide = false;
} }
})();
};
});
} else {
this.tableHeight = this.height;
}
//注册拖拽事件。
this.$dragging.$on("dragend", (e) => {
this.saveUserconfig();
});
},
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);
}, },
columnInit() { mounted() {
if (this.userConfig) { if (this.data && this.data.length > 0) {
var curColumns = []; this.list = this.data;
var config = JSON.parse(this.userConfig.content); return;
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;
} }
} this.keys = "";
}, this.intY();
loadUserConfig() { if (this.lazy == true) {
var query = { return;
conditions: [ }
{ if (this.userId > 0 && this.set) {
fieldName: "creatorUserId", this.loadUserConfig();
fieldValue: this.userId, } else {
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(() => {
saveUserconfig() { this.tableHeight = this.$refs.main.offsetHeight;
let url = `${window.systemUrl}/config/update`; if (this.tableHeight < 300) {
var content = []; this.tableHeight =
this.columnsCur.map((u) => { window.screen.availHeight - this.$refs.main.offsetTop - 200;
content.push({ }
key: u.key, window.onresize = () => {
hide: u.hide, ///浏览器窗口大小变化
}); return (() => {
}); if (this.$refs.main && this.$refs.main.offsetHeight) {
if (!this.userConfig) { this.tableHeight = this.$refs.main.offsetHeight;
url = `${window.systemUrl}/config/create`; if (this.tableHeight < 300) {
var data = { this.tableHeight =
page: window.location.pathname, window.screen.availHeight - this.$refs.main.offsetTop - 150;
component: "Grid", }
key: this.$u.guid(), }
content: JSON.stringify(content), })();
}; };
this.$api.post(url, data).then((r) => { });
this.loadUserConfig(); } else {
this.tableHeight = this.height;
}
//注册拖拽事件。
this.$dragging.$on("dragend", (e) => {
this.saveUserconfig();
}); });
} else {
this.userConfig.content = JSON.stringify(content);
this.$api.post(url, this.userConfig);
}
},
//展开
expand(row, status) {
this.$emit("on-expand", row, status);
},
//拖拽
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() { methods: {
//列设置恢复初始化 //数据加载
this.columnsCur = this.$u.clone(this.columns); load() {
this.saveUserconfig(); if (this.action) {
}, //条件初始化处理。
complexSearch() { if (this.initsearch) {
var search = this.$refs.search.$children.filter((u) => { this.initsearch(this.search);
return u.condition; }
}); this.$api.post(this.action, this.search).then((r) => {
if (search) { if (this.format) {
var conditions = search[0].condition; this.list = this.format(r.result.items);
this.reload(conditions); } else {
} this.list = r.result.items;
}, }
reload(conditions) { this.search.total = r.result.totalCount || r.result.count;
var where = []; });
if (conditions) { }
Object.keys(conditions).forEach((u) => { },
let v = conditions[u].value; columnInit() {
let op = conditions[u].op; if (this.userConfig) {
if (!this.$u.isNull(v)) { var curColumns = [];
if (op == "Range" && Array.isArray(v)) { var config = JSON.parse(this.userConfig.content);
let times = []; if (config.length == this.columnsCur.length) {
v.map((u) => { config.map((u) => {
if (!this.$u.isNull(u)) { var item = this.columnsCur.filter((c) => {
times.push(this.$u.toTime(u)); return c.key == u.key;
});
if (item[0]) {
item[0].hide = u.hide;
curColumns.push(item[0]);
}
});
this.columnsCur = curColumns;
} }
});
v = times.join(",");
} else if (op.indexOf("In") > -1 && Array.isArray(v)) {
v = v.join(",");
} }
if (!this.$u.isNull(v)) { },
where.push({ loadUserConfig() {
fieldName: u, var query = {
fieldValue: v, conditions: [{
conditionalType: op, 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.configLoad = true;
}
});
},
saveUserconfig() {
let url = `${window.systemUrl}/config/update`;
var content = [];
this.columnsCur.map((u) => {
content.push({
key: u.key,
hide: u.hide,
});
});
if (!this.userConfig) {
url = `${window.systemUrl}/config/create`;
var data = {
page: window.location.pathname,
component: "Grid",
key: this.$u.guid(),
content: JSON.stringify(content),
};
this.$api.post(url, data).then((r) => {
this.loadUserConfig();
});
} else {
this.userConfig.content = JSON.stringify(content);
this.$api.post(url, this.userConfig);
} }
} },
}); //展开
} expand(row, status) {
this.search.pageIndex = 1; this.$emit("on-expand", row, status);
this.search.conditions = where; },
this.load(); //拖拽
}, onDragDrop(a, b) {
pageChange(page) { this.$emit("on-drag-drop", a, b);
this.search.page = page; },
this.search.pageIndex = page; easySearch() {
this.load(); if (
}, this.conditions &&
pageSizeChange(size) { this.conditions.keys &&
this.search.pageSize = size; this.conditions.keys.default
this.search.pageIndex = 1; ) {
this.load(); //判断没有传入条件的用默认的查询
}, this.conditions.keys.value = this.keys;
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-selection-change", rows, row);
},
intY() {
if (this.$refs.table != undefined) {
this.firstY = this.$refs.table.$el.getBoundingClientRect().top;
}
},
selectAll(status) {
this.$refs.table.selectAll(status);
},
//批量取消
cancelBatch() {
this.footerToolbar = false;
this.$refs.table.selectAll(false);
},
},
computed: {
columnsNow() {
var cols = this.columnsCur.filter((u) => {
if (u.code) {
u.render = (h, params) => {
let values = u.key;
let type = "text";
if (u.category) {
type = u.category;
} }
return h("state", { this.reload(this.conditions);
props: { },
code: u.code, undoConfig() {
type: type, //列设置恢复初始化
value: params.row[values] + "", 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;
if (u.type == "user") { this.reload(conditions);
u.render = (h, params) => {
let values = u.key;
if (params.row[values]) {
return h("User", {
props: {
value: params.row[values],
},
});
} }
}; },
} reload(conditions) {
if (u.type == "workShopName") { var where = [];
u.render = (h, params) => { if (conditions) {
let values = u.key; Object.keys(conditions).forEach((u) => {
if (params.row[values]) { let v = conditions[u].value;
return h("WorkShopName", { let op = conditions[u].op;
props: { if (!this.$u.isNull(v)) {
value: params.row[values], 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;
} this.search.conditions = where;
if (u.type == "date" || u.type == "dateTime") { this.load();
u.render = (h, params) => { },
let values = u.key; pageChange(page) {
return h("DTSpan", { this.search.page = page;
props: { this.search.pageIndex = page;
type: u.type, this.load();
value: params.row[values], },
}, pageSizeChange(size) {
this.search.pageSize = size;
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-selection-change", rows, row);
},
intY() {
if (this.$refs.table != undefined) {
this.firstY = this.$refs.table.$el.getBoundingClientRect().top;
}
},
selectAll(status) {
this.$refs.table.selectAll(status);
},
//批量取消
cancelBatch() {
this.footerToolbar = false;
this.$refs.table.selectAll(false);
},
},
computed: {
columnsNow() {
var cols = this.columnsCur.filter((u) => {
if (u.code) {
u.render = (h, params) => {
let values = u.key;
let type = "text";
if (u.category) {
type = u.category;
}
return h("state", {
props: {
code: u.code,
type: type,
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;
} },
return !u.hide; },
}); watch: {
return cols; "data"() {
}, this.list = this.data;
}, },
watch: { height() {
"data.length"() { this.tableHeight = this.height;
this.list = this.data; },
}, "columns"() {
height() { this.columns.forEach((u) => {
this.tableHeight = this.height; if (!u.hide) {
}, u.hide = false;
"columns.length"() { }
this.columns.forEach((u) => { });
if (!u.hide) { this.columnsCur = this.$u.clone(this.columns);
u.hide = false; },
}
});
this.columnsCur = this.$u.clone(this.columns);
}, },
},
}; };
</script> </script>
<style lang="less"> <style lang="less">
.table-content { .table-content {
position: relative; position: relative;
height: 100%; height: 100%;
display: flex;
flex-direction: column;
.tip {
display: inline;
}
form {
display: inline-block;
.ivu-form-item {
margin: 0;
vertical-align: middle;
}
}
.table-main {
width: 100%;
text-align: left;
padding: 0;
display: block;
overflow-y: auto;
flex-grow: 1;
tr td .ivu-table-cell {
padding: 0 5px;
}
overflow-x: hidden;
}
.table-tools {
display: flex; display: flex;
line-height: 50px; flex-direction: column;
.table-search {
flex-grow: 1; .tip {
display: inline;
} }
.btns {
min-width: 200px; form {
text-align: right; display: inline-block;
.ivu-form-item {
margin: 0;
vertical-align: middle;
}
} }
}
.table-footer { .table-main {
line-height: 45px; width: 100%;
} text-align: left;
.ivu-footer-toolbar { padding: 0;
text-align: left; display: block;
background: rgba(0, 0, 0, 0.7); overflow-y: auto;
color: #fff; flex-grow: 1;
}
} tr td .ivu-table-cell {
.table-columns { padding: 0 5px;
max-height: calc(100% - 50px); }
overflow: auto;
li { overflow-x: hidden;
list-style: none;
line-height: 40px;
cursor: move;
border-bottom: 1px dotted #249e91;
color: #249e91;
span {
cursor: pointer;
} }
.mr10 {
cursor: pointer; .table-tools {
display: flex;
line-height: 50px;
.table-search {
flex-grow: 1;
}
.btns {
min-width: 200px;
text-align: right;
}
}
.table-footer {
line-height: 45px;
} }
.move {
float: right; .ivu-footer-toolbar {
margin: 10px 10px 0 0; text-align: left;
cursor: move; background: rgba(0, 0, 0, 0.7);
color: #fff;
} }
.dis { }
color: #aaa;
.table-columns {
max-height: calc(100% - 50px);
overflow: auto;
li {
list-style: none;
line-height: 40px;
cursor: move;
border-bottom: 1px dotted #249e91;
color: #249e91;
span {
cursor: pointer;
}
.mr10 {
cursor: pointer;
}
.move {
float: right;
margin: 10px 10px 0 0;
cursor: move;
}
.dis {
color: #aaa;
}
} }
}
} }
.searchBack { .searchBack {
display: inline; display: inline;
margin-left: 20px;
button {
margin-left: 10px;
}
a {
margin-left: 20px; margin-left: 20px;
color: #2680eb;
} button {
a:hover { margin-left: 10px;
color: #249e91; }
}
a {
margin-left: 20px;
color: #2680eb;
}
a:hover {
color: #249e91;
}
} }
</style> </style>
\ No newline at end of file
pages/import/add.vue
View file @ e4fed9fa
<template> <template>
<Form ref="form" :model="entity" :rules="rules" :label-width="90"> <Form ref="form" :model="entity" :rules="rules" :label-width="90">
<Row> <Row>
<Col :span="12"> <Col :span="12">
<FormItem :label="l('name')" prop="name"> <FormItem :label="l('name')" prop="name">
<Input v-model="entity.name"></Input> <Input v-model="entity.name"></Input>
</FormItem> </FormItem>
</Col> </Col>
<Col :span="24"> <Col :span="24">
<FormItem :label="l('file')" prop="file"> <FormItem :label="l('file')" prop="file">
<InputExcel v-model="imgName" :parms="parms" :showButton="false" /> <InputExcel v-model="imgName" :parms="parms" :showButton="false" />
</FormItem> </FormItem>
</Col> </Col>
<Col :span="24"> <Col :span="24">
<FormItem :label="l('remark')" prop="remark"> <FormItem :label="l('remark')" prop="remark">
<Input v-model="entity.remark" type="textarea" :rows="5"></Input> <Input v-model="entity.remark" type="textarea" :rows="5"></Input>
</FormItem> </FormItem>
</Col> </Col>
</Row> </Row>
<FormItem> <FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button> <Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button> <Button @click="handleClose" class="ml20">取消</Button>
</FormItem> </FormItem>
</Form> </Form>
</template> </template>
<script>
<script>
import Api from "./api"; import Api from "./api";
import InputExcel from "@/components/page/inputExcel.vue"; import InputExcel from "@/components/page/inputExcel.vue";
export default { export default {
name: "Add", name: "Add",
components: { components: {
InputExcel InputExcel
},
data() {
return {
disabled: false,
parms: "app=import&eid="+this.$u.guid()+"&name=excel",
imgName: "",
entity: {
name: "",
file: "",
filePath:"",
remark: "",
},
rules: {
name: [{ required: true, message: "必填", trigger: "blur" }],
file:[{ required: true, message: "请上传文件", trigger: "change" }]
},
};
},
props: {
v: Object,
eid: Number,
},
mounted() {
if (this.eid > 0) {
this.load(this.eid);
}
},
methods: {
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
this.disabled = true;
Api.create(this.entity)
.then((r) => {
this.disabled = false;
if (r.success) {
this.$Message.success("保存成功");
this.$emit("on-ok");
} else {
this.$Message.error("保存失败");
}
})
.catch((err) => {
this.disabled = false;
this.$Message.error("保存失败");
console.warn(err);
});
}
});
},
handleClose() {
this.$emit("on-close");
},
load(v) {
Api.get({ id: v }).then((r) => {
this.entity = r.result;
this.entity.id = 0;
});
}, },
getEid() { data() {
this.parms.eid = this.$u.guid() return {
this.parms.app = 'import' disabled: false,
this.$refs.refFile.intFiles() parms: "app=import&eid=" + this.$u.guid() + "&name=excel",
imgName: "",
entity: {
name: "",
file: "",
path: "",
remark: "",
},
rules: {
name: [{
required: true,
message: "必填",
trigger: "blur"
}],
file: [{
required: true,
message: "请上传文件",
trigger: "change"
}]
},
};
}, },
l(key) { props: {
key = "import_center" + "." + key; v: Object,
return this.$t(key); eid: Number,
}, },
}, mounted() {
watch: { if (this.eid > 0) {
imgName(newName, oldName) { this.load(this.eid);
const imgPathsArr = JSON.parse(newName); }
this.entity.file=imgPathsArr[0].fileName
this.entity.filePath=imgPathsArr[0].filePath
}, },
v() { methods: {
this.entity = this.$u.clone(this.v); handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
this.disabled = true;
Api.create(this.entity)
.then((r) => {
this.disabled = false;
if (r.success) {
this.$Message.success("保存成功");
this.$emit("on-ok");
} else {
this.$Message.error("保存失败");
}
})
.catch((err) => {
this.disabled = false;
this.$Message.error("保存失败");
console.warn(err);
});
}
});
},
handleClose() {
this.$emit("on-close");
},
load(v) {
Api.get({
id: v
}).then((r) => {
this.entity = r.result;
this.entity.id = 0;
});
},
getEid() {
this.parms.eid = this.$u.guid()
this.parms.app = 'import'
this.$refs.refFile.intFiles()
},
l(key) {
key = "import_center" + "." + key;
return this.$t(key);
},
}, },
eid(v) { watch: {
if (v > 0) { imgName(newName, oldName) {
this.load(v); const imgPathsArr = JSON.parse(newName);
} this.entity.file = imgPathsArr[0].fileName
this.entity.path = imgPathsArr[0].filePath
},
v() {
this.entity = this.$u.clone(this.v);
},
eid(v) {
if (v > 0) {
this.load(v);
}
},
}, },
},
}; };
</script> </script>
pages/import/api.js
View file @ e4fed9fa
...@@ -24,5 +24,8 @@ export default { ...@@ -24,5 +24,8 @@ export default {
deletes(params) { deletes(params) {
return Api.post(`${systemUrl}/importcenter/batchdelete`, params); return Api.post(`${systemUrl}/importcenter/batchdelete`, params);
}, },
openExcel(params) {//处理时打开以前上传的excel返回数据
return Api.post(`${systemUrl}/importcenter/open`, params);
},
} }
pages/import/detail.vue
View file @ e4fed9fa
<template> <template>
<div class="detail"> <div class="detail">
<Row> <Row>
<Filed :span="12" :name="l('name')">{{entity.name}}</Filed>
<Filed :span="12" :name="l('name')">{{entity.name}}</Filed> <Filed :span="12" :name="l('file')">
<Filed :span="12" :name="l('file')"><a @click="downFile(entity.filePath)">{{entity.file}}</a></Filed> <a @click="downFile(entity.path)">{{entity.file}}</a>
<Filed :span="12" :name="l('status')">{{entity.status}}</Filed> </Filed>
<Filed :span="24" :name="l('remark')">{{entity.remark}}</Filed> <Filed :span="12" :name="l('status')">
<Filed :span="12" :name="l('creationTime')">{{entity.creationTime}}</Filed> <state code="improt.im.status" :value="entity.status" type="text"></state>
<Filed :span="12" :name="l('creatorUserId')">{{entity.creatorUserId}}</Filed> </Filed>
<Filed :span="12" :name="l('lastModificationTime')">{{entity.lastModificationTime}}</Filed> <Filed :span="24" :name="l('remark')">{{entity.remark}}</Filed>
<Filed :span="12" :name="l('lastModifierUserId')">{{entity.lastModifierUserId}}</Filed> <Filed :span="12" :name="l('creationTime')">{{entity.creationTime}}</Filed>
<Filed :span="12" :name="l('isDeleted')">{{entity.isDeleted}}</Filed> <Filed :span="12" :name="l('creatorUserId')">
<Filed :span="12" :name="l('deletionTime')">{{entity.deletionTime}}</Filed> <User :value="entity.creatorUserId"></User>
<Filed :span="12" :name="l('deleterUserId')">{{entity.deleterUserId}}</Filed> </Filed>
<Filed :span="12" :name="l('creator')">{{entity.creator}}</Filed> <!--
<Filed :span="12" :name="l('lastModifier')">{{entity.lastModifier}}</Filed> <Filed :span="12" :name="l('lastModificationTime')">{{entity.lastModificationTime}}</Filed>
<Filed :span="12" :name="l('lastModifierUserId')">
{{entity.lastModifierUserId}}
<User :value="entity.lastModifierUserId"></User>
</Filed>
<Filed :span="12" :name="l('isDeleted')">{{entity.isDeleted}}</Filed>
<Filed :span="12" :name="l('deletionTime')">{{entity.deletionTime}}</Filed>
<Filed :span="12" :name="l('deleterUserId')">
{{entity.deleterUserId}}
<User :value="entity.deleterUserId"></User>
</Filed>
<Filed :span="12" :name="l('creator')">{{entity.creator}}</Filed>
<Filed :span="12" :name="l('lastModifier')">{{entity.lastModifier}}</Filed>
-->
</Row> </Row>
</div> </div>
</template> </template>
<script> <script>
import Api from "./api"; import Api from "./api";
export default { export default {
name: "Add", name: "Add",
data() { data() {
return { return {
entity: {}, entity: {},
downUrl: fileUrlDown, downUrl: fileUrlDown,
fileUrlPath: "", fileUrlPath: "",
rules: { rules: {
name: [{ required: true, message: "必填", trigger: "blur" }], name: [{
code: [{ required: true, message: "必填", trigger: "blur" }], required: true,
}, message: "必填",
}; trigger: "blur",
}, }, ],
props: { code: [{
eid: Number, required: true,
}, message: "必填",
mounted() { trigger: "blur",
if (this.eid > 0) { }, ],
this.load(this.eid); },
} };
},
methods: {
load(v) {
Api.get({ id: v }).then((r) => {
this.entity = r.result;
this.$emit("on-load");
});
}, },
handleClose() { props: {
this.$emit("on-close"); eid: Number,
}, },
downFile(path) { mounted() {
alert(path) if (this.eid > 0) {
let truePath = path.trim(); this.load(this.eid);
if (truePath.length > 2) {
if (
truePath.substring(0, 7).toLowerCase() == "http://" ||
truePath.substring(0, 8).toLowerCase() == "https://"
) {
window.open(truePath, "_blank");
} else {
this.fileUrlPath = this.downUrl + path;
window.open(this.fileUrlPath, "_blank");
} }
}
}, },
l(key) { methods: {
key = "import_center" + "." + key; load(v) {
return this.$t(key); Api.get({
id: v,
}).then((r) => {
this.entity = r.result;
this.$emit("on-load");
});
},
handleClose() {
this.$emit("on-close");
},
downFile(path) {
//alert(path)
let truePath = path;
if (truePath.length > 2) {
if (
truePath.substring(0, 7).toLowerCase() == "http://" ||
truePath.substring(0, 8).toLowerCase() == "https://"
) {
window.open(truePath, "_blank");
} else {
this.fileUrlPath = this.downUrl + path;
window.open(this.fileUrlPath, "_blank");
}
}
},
l(key) {
key = "import_center" + "." + key;
return this.$t(key);
},
}, },
}, watch: {
watch: { eid(v) {
eid(v) { if (v > 0) {
if (v > 0) { this.load(v);
this.load(v); }
} },
}, },
},
}; };
</script> </script>
pages/import/index.vue
View file @ e4fed9fa
<template> <template>
<div> <div>
<DataGrid :columns="columns" ref="grid" :action="action"> <DataGrid :columns="columns" ref="grid" :action="action">
<template slot="easySearch"> <template slot="easySearch">
<Form ref="formInline" :model="easySearch" inline> <Form ref="formInline" :model="easySearch" inline>
<FormItem prop="keys"> <FormItem prop="keys">
<Input placeholder="请输入名称查询" v-model="easySearch.keys.value" /> <Input placeholder="请输入名称查询" v-model="easySearch.keys.value" />
</FormItem> </FormItem>
<FormItem> <FormItem>
<Button type="primary" @click="search">查询</Button> <Button type="primary" @click="search">查询</Button>
</FormItem> </FormItem>
</Form> </Form>
</template> </template>
<template slot="searchForm"> <template slot="searchForm">
<Search /> <Search />
</template> </template>
<template slot="buttons"> <template slot="buttons">
<Button type="primary" @click="add">新增</Button> <Button type="primary" @click="add">新增</Button>
</template> </template>
</DataGrid> </DataGrid>
<Modal v-model="modal" :title="title" width="1200" :fullscreen="full" footer-hide> <Modal v-model="modal" :title="title" width="1200" :fullscreen="full" footer-hide>
<component :is="detail" :eid="curId" @on-close="cancel" @on-ok="ok" /> <component :is="detail" :eid="curId" @on-close="cancel" @on-ok="ok" />
</Modal> </Modal>
</div> </div>
</template> </template>
<script> <script>
import Api from "./api"; import Api from "./api";
import Search from "./search"; import Search from "./search";
export default { export default {
name: "list", name: "list",
components: { components: {
Search, Search,
}, },
head: { head: {
title: "导入中心", title: "导入中心",
author: "henq", author: "henq",
description: "import_center 8/20/2020 3:45:58 PM", description: "import_center 8/20/2020 3:45:58 PM",
}, },
data() { data() {
return { return {
action: Api.index, action: Api.index,
easySearch: { easySearch: {
keys: { op: "name", value: null }, keys: {
}, op: "name",
modal: false, value: null
full:false, },
title: "新增", },
detail: null, modal: false,
curId: 0, full: false,
columns: [ title: "新增",
{ detail: null,
key: "id", curId: 0,
title: this.$t("id"), columns: [{
hide: true, key: "id",
align: "left", title: this.$t("id"),
high: true, hide: true,
}, align: "left",
{ high: true,
key: "name", },
title: this.l("name"), {
align: "left", key: "name",
easy: true, title: this.l("name"),
high: true, align: "left",
}, easy: true,
{ high: true,
key: "file", },
title: this.l("file"), {
align: "left", key: "file",
easy: true, title: this.l("file"),
high: true, align: "left",
}, easy: true,
{ high: true,
key: "creationTime", },
title: this.l("creationTime"), {
align: "center", key: "creationTime",
width:"180", title: this.l("creationTime"),
high: true, align: "center",
width: "180",
high: true,
},
{
key: "creatorUserId",
title: this.l("creatorUserId"),
align: "left",
high: true,
type: "user",
width: "180",
},
// {
// key: "lastModificationTime",
// title: this.l("lastModificationTime"),
// align: "left",
// high: true,
// hide: true,
// },
// {
// key: "lastModifierUserId",
// title: this.l("lastModifierUserId"),
// align: "left",
// high: true,
// hide: true,
// },
// {
// key: "isDeleted",
// title: this.l("isDeleted"),
// align: "left",
// high: true,
// hide: true,
// },
// {
// key: "deletionTime",
// title: this.l("deletionTime"),
// align: "left",
// high: true,
// hide: true,
// },
// {
// key: "deleterUserId",
// title: this.l("deleterUserId"),
// align: "left",
// high: true,
// hide: true,
// },
// {
// key: "creator",
// title: this.l("creator"),
// align: "left",
// high: true,
// hide: true,
// },
// {
// key: "lastModifier",
// title: this.l("lastModifier"),
// align: "left",
// high: true,
// hide: true,
// },
{
key: "status",
title: this.l("status"),
align: "center",
high: true,
code: "improt.im.status",
width: "150",
},
{
title: "操作",
key: "action",
width: 140,
align: "center",
render: (h, params) => {
return h("div", {
class: "action"
}, [
h(
"op", {
attrs: {
oprate: "detail"
},
on: {
click: () => this.view(params.row.id)
},
},
"查看"
),
h(
"op", {
attrs: {
oprate: "delete"
},
on: {
click: () => this.remove(params.row.id)
},
},
"删除"
),
h(
"op", {
attrs: {
oprate: "edit"
},
on: {
click: () => this.process(params.row)
},
},
"处理"
),
]);
},
},
],
};
},
mounted() {
console.log(this);
},
async fetch({
store,
params
}) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
methods: {
ok() {
this.$refs.grid.load();
this.modal = false;
this.curId = 0;
}, },
{ search() {
key: "creatorUserId", this.$refs.grid.reload(this.easySearch);
title: this.l("creatorUserId"),
align: "left",
high: true,
type:"user",
width:"180",
}, },
{ add() {
key: "lastModificationTime", this.curId = 0;
title: this.l("lastModificationTime"), this.full = false;
align: "left", this.title = "新增";
high: true, this.detail = () => import("./add");
hide: true, this.modal = true;
}, },
{ copy(id) {
key: "lastModifierUserId", this.curId = id;
title: this.l("lastModifierUserId"), this.title = "克隆";
align: "left", this.detail = () => import("./add");
high: true, this.modal = true;
hide: true,
}, },
{ view(id) {
key: "isDeleted", this.curId = id;
title: this.l("isDeleted"), this.title = "详情";
align: "left", this.full = false;
high: true, this.detail = () => import("./detail");
hide: true, this.modal = true;
}, },
{ edit(id) {
key: "deletionTime", this.curId = id;
title: this.l("deletionTime"), this.title = "编辑";
align: "left", this.full = false;
high: true, this.detail = () => import("./edit");
hide: true, this.modal = true;
}, },
{ process(row) {
key: "deleterUserId", this.curId = row.id;
title: this.l("deleterUserId"), this.title = "处理文件：" + row.name;
align: "left", this.full = true;
high: true, this.detail = () => import("./process");
hide: true, this.modal = true;
}, },
{ key: "creator", title: this.l("creator"), align: "left", high: true,hide: true, }, remove(id) {
{ Api.delete(id).then((r) => {
key: "lastModifier", if (r.success) {
title: this.l("lastModifier"), this.$refs.grid.load();
align: "left", this.$Message.success("删除成功");
high: true, }
hide: true, });
}, },
{ cancel() {
key: "status", this.curId = 0;
title: this.l("status"), this.modal = false;
align: "center",
high: true,
code: "mimprot.im.status",
width:"150",
}, },
{ l(key) {
title: "操作", let vkey = "import_center" + "." + key;
key: "action", return this.$t(vkey) || key;
width: 140,
align: "center",
render: (h, params) => {
return h("div", { class: "action" }, [
h(
"op",
{
attrs: { oprate: "detail" },
on: { click: () => this.view(params.row.id) },
},
"查看"
),
h(
"op",
{
attrs: { oprate: "delete" },
on: { click: () => this.remove(params.row.id) },
},
"删除"
),
h(
"op",
{
attrs: { oprate: "edit" },
on: { click: () => this.process(params.row) },
},
"处理"
),
]);
},
}, },
],
};
},
mounted() {
console.log(this);
},
async fetch({ store, params }) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
methods: {
ok() {
this.$refs.grid.load();
this.modal = false;
this.curId = 0;
},
search() {
this.$refs.grid.reload(this.easySearch);
},
add() {
this.curId = 0;
this.full=false;
this.title = "新增";
this.detail = () => import("./add");
this.modal = true;
},
copy(id) {
this.curId = id;
this.title = "克隆";
this.detail = () => import("./add");
this.modal = true;
},
view(id) {
this.curId = id;
this.title = "详情";
this.full=false;
this.detail = () => import("./detail");
this.modal = true;
},
edit(id) {
this.curId = id;
this.title = "编辑";
this.full=false;
this.detail = () => import("./edit");
this.modal = true;
},
process(row) {
this.curId = row.id;
this.title = "处理文件："+row.name;
this.full=true;
this.detail = () => import("./process");
this.modal = true;
},
remove(id) {
Api.delete(id).then((r) => {
if (r.success) {
this.$refs.grid.load();
this.$Message.success("删除成功");
}
});
},
cancel() {
this.curId = 0;
this.modal = false;
},
l(key) {
let vkey = "import_center" + "." + key;
return this.$t(vkey) || key;
}, },
},
}; };
</script> </script>
<style lang="less"> <style lang="less">
</style> </style>
\ No newline at end of file
pages/import/process.vue
View file @ e4fed9fa
<template> <template>
<div class="content"> <div class="content">
<DataGrid <TablePaste hide-table :input-props="inputProps" @on-success="handleSuccess" @on-error="handleError" v-show="showTablePaste" />
border <DataGrid border :height="tdHeightExcel" :columns="columnsImport" :data="excelData" :page="false" :set="false">
:height="tdHeightExcel" <template slot="easySearch">
:columns="columnsImport" <Form inline>
:data="excelData" <FormItem>
:page="false" <span>导入到</span>
:set="false" </FormItem>
> <FormItem>
<template slot="easySearch"> <dictionary code="import.im.page" style="width:160px" @on-change="pageChange" v-model="pageType"></dictionary>
<Form inline> </FormItem>
<FormItem> <FormItem>
<span>导入到</span> <div class="tip mr20">共{{excelData.length}}条数据</div>
</FormItem> </FormItem>
<FormItem> <FormItem>
<dictionary code="import.im.page" style="width:160px" @on-change="pageChange"></dictionary> <Button type="primary">导入</Button>
</FormItem> </FormItem>
<FormItem> </Form>
<div class="tip mr20">共{{excelData.length}}条数据</div> </template>
</FormItem> <template slot="buttons">
<FormItem> <Form inline>
<Button type="primary">导入</Button> <FormItem>
</FormItem> <Button @click="downFile">下载原始文件</Button>
</Form> </FormItem>
</template> <FormItem>
<template slot="buttons"> <div style="height:34px;overflow: hidden;padding:0">
<Form inline> <Upload action :before-upload="beforeUpload" ref="uploadfile" :format="formatList">
<FormItem> <Button icon="ios-cloud-upload-outline" @click="resetParms">重新上传</Button>
<Button>下载文件</Button> </Upload>
</FormItem> </div>
<FormItem> </FormItem>
<div style="height:34px;overflow: hidden;padding:0"> <FormItem>
<Upload action :before-upload="beforeUpload" ref="uploadfile" :format="formatList"> <Button @click="openPaste" :type="btnType" :ghost="ghostStatus">{{btnTxt}}</Button>
<Button icon="ios-cloud-upload-outline">重新上传</Button> </FormItem>
</Upload> <FormItem>
</div> <Button @click="resetTable">还原到原始文件</Button>
</FormItem> </FormItem>
<FormItem> </Form>
<Button>粘贴excel</Button> </template>
</FormItem>
</Form>
</template>
</DataGrid> </DataGrid>
<FooterToolbar v-if="excelData.length>0&&sheetNames.length>1"> <FooterToolbar v-if="excelData.length>0&&sheetNames.length>1">
<Form inline> <Form inline>
<FormItem> <FormItem>
<Tabs :animated="false" :value="0" @on-click="sheetClick"> <Tabs :animated="false" :value="0" @on-click="sheetClick">
<TabPane :label="item" v-for="(item,index) in sheetNames"></TabPane> <TabPane :label="item" v-for="(item,index) in sheetNames"></TabPane>
</Tabs> </Tabs>
</FormItem> </FormItem>
</Form> </Form>
</FooterToolbar> </FooterToolbar>
</div> </div>
</template> </template>
<script> <script>
import Api from "./api"; import Api from "./api";
import XLSX from "xlsx"; import XLSX from "xlsx";
import { Switch } from "view-design"; import {
Switch
} from "view-design";
export default { export default {
name: "Edit", name: "Edit",
data() { data() {
return { return {
disabled: false, pageType: undefined,
columns: [ entity: {},
{ downUrl: fileUrlDown,
key: "userName", fileUrlPath: "",
title: this.l("userName"), disabled: false,
align: "left", columns0: [{
easy: true, key: "userName",
high: true, title: this.l("userName"),
render: (h, params) => { align: "left",
return h("div", { class: "action" }, [ easy: true,
h( high: true,
"op", render: (h, params) => {
return h(
"div", {
class: "action",
},
[
h(
"op", {
attrs: {
oprate: "detail",
},
on: {
click: () => this.detail(params.row.id),
},
},
params.row.userName
),
]
);
},
},
{ {
attrs: { oprate: "detail" }, key: "cardNo",
on: { click: () => this.detail(params.row.id) }, title: this.l("cardNo"),
align: "left",
easy: true,
high: true,
},
{
key: "gender",
title: this.l("gender"),
align: "center",
high: true,
code: "User.base.gender",
},
{
key: "birthday",
title: this.l("birthday"),
align: "center",
high: true,
type: "date",
},
{
key: "degreeId",
title: this.l("degreeId"),
align: "left",
high: true,
code: "User.base.degree",
},
{
key: "status",
title: this.l("status"),
align: "center",
high: true,
code: "User.base.status",
},
{
key: "departmentId",
title: this.l("departmentId"),
align: "right",
easy: true,
high: true,
},
{
key: "departmentTitle",
title: this.l("departmentTitle"),
align: "left",
easy: true,
high: true,
}, },
params.row.userName
),
]);
},
},
// {
// key: 'cardTypeId',
// title: this.l('cardTypeId'),
// align: 'left',
// high: true,
// hide: true
// },
{
key: "cardNo",
title: this.l("cardNo"),
align: "left",
easy: true,
high: true,
},
{
key: "gender",
title: this.l("gender"),
align: "center",
high: true,
code: "User.base.gender",
},
{
key: "birthday",
title: this.l("birthday"),
align: "center",
high: true,
type: "date",
},
{
key: "degreeId",
title: this.l("degreeId"),
align: "left",
high: true,
code: "User.base.degree",
},
{
key: "status",
title: this.l("status"),
align: "center",
high: true,
code: "User.base.status",
},
{
key: "departmentId",
title: this.l("departmentId"),
align: "right",
easy: true,
high: true,
},
{
key: "departmentTitle",
title: this.l("departmentTitle"),
align: "left",
easy: true,
high: true,
},
{
key: "roleTitles",
title: this.l("roleTitles"),
align: "left",
easy: true,
high: true,
hide: true,
render: (h, params) => {
return h("div", { class: "action" }, [
h(
"op",
{ {
attrs: { key: "roleTitles",
oprate: "detail", title: this.l("roleTitles"),
class: align: "left",
params.row.roleTitles == null || easy: true,
params.row.roleTitles == "" high: true,
? "empower" hide: true,
: "detail", render: (h, params) => {
}, return h(
on: { click: () => this.authorize(params.row.id) }, "div", {
class: "action",
},
[
h(
"op", {
attrs: {
oprate: "detail",
class: params.row.roleTitles == null ||
params.row.roleTitles == "" ?
"empower" : "detail",
},
on: {
click: () => this.authorize(params.row.id),
},
},
params.row.roleTitles == null || params.row.roleTitles == "" ?
"授权" :
params.row.roleTitles
),
]
);
},
}, },
params.row.roleTitles == null || params.row.roleTitles == ""
? "授权"
: params.row.roleTitles
),
]);
},
},
{
key: "accountId",
title: this.l("accountId"),
hide: true,
align: "left",
},
// {
// key: 'userType',
// title: this.l('userType'),
// hide: true,
// align: 'left'
// },
{
key: "phone",
title: this.l("phone"),
align: "left",
easy: true,
high: true,
},
{
key: "email",
title: this.l("email"),
align: "left",
easy: true,
high: true,
},
{
key: "licensedToWork",
title: this.l("licensedToWork"),
align: "left",
},
{
key: "positionId",
title: this.l("positionId"),
align: "left",
high: true,
code: "User.base.position",
},
{
key: "titleId",
title: this.l("titleId"),
align: "left",
high: true,
code: "User.base.jobtitle",
},
{
key: "creatorUserId",
title: this.l("creatorUserId"),
align: "left",
import: false,
hide: true,
},
{
key: "creationTime",
title: this.l("creationTime"),
align: "left",
import: false,
hide: true,
},
{
key: "lastModifierUserId",
title: this.l("lastModifierUserId"),
align: "left",
import: false,
hide: true,
},
{
key: "lastModificationTime",
title: this.l("lastModificationTime"),
align: "left",
import: false,
hide: true,
},
{
title: "操作",
key: "action",
width: 180,
align: "right",
import: false,
render: (h, params) => {
return h("div", { class: "action" }, [
h(
"op",
{ {
attrs: { key: "accountId",
oprate: "detail", title: this.l("accountId"),
class: "empower", hide: true,
}, align: "left",
on: { click: () => this.syncAccount(params.row) },
}, },
params.row.accountId == 0 ? "同步" : "" // {
), // key: 'userType',
h( // title: this.l('userType'),
"op", // hide: true,
// align: 'left'
// },
{ {
attrs: { oprate: "edit" }, key: "phone",
on: { click: () => this.edit(params.row.id) }, title: this.l("phone"),
align: "left",
easy: true,
high: true,
}, },
"编辑"
),
h(
"op",
{ {
attrs: { oprate: "remove" }, key: "email",
on: { click: () => this.remove(params.row) }, title: this.l("email"),
align: "left",
easy: true,
high: true,
}, },
"删除"
),
h(
"op",
{ {
attrs: { key: "licensedToWork",
oprate: "detail", title: this.l("licensedToWork"),
}, align: "left",
on: { click: () => this.openReset(params.row) },
}, },
"重置密码"
),
]);
},
},
],
columns1: [
{
key: "userName",
title: this.l("userName"),
align: "left",
easy: true,
high: true,
render: (h, params) => {
return h("div", { class: "action" }, [
h(
"op",
{ {
attrs: { oprate: "detail" }, key: "positionId",
on: { click: () => this.detail(params.row.id) }, title: this.l("positionId"),
align: "left",
high: true,
code: "User.base.position",
}, },
params.row.userName {
), key: "titleId",
]); title: this.l("titleId"),
}, align: "left",
}, high: true,
code: "User.base.jobtitle",
},
{
key: "creatorUserId",
title: this.l("creatorUserId"),
align: "left",
import: false,
hide: true,
},
{
key: "creationTime",
title: this.l("creationTime"),
align: "left",
import: false,
hide: true,
},
{
key: "lastModifierUserId",
title: this.l("lastModifierUserId"),
align: "left",
import: false,
hide: true,
},
{
key: "lastModificationTime",
title: this.l("lastModificationTime"),
align: "left",
import: false,
hide: true,
},
{
title: "操作",
key: "action",
width: 180,
align: "right",
import: false,
render: (h, params) => {
return h(
"div", {
class: "action",
},
[
h(
"op", {
attrs: {
oprate: "detail",
class: "empower",
},
on: {
click: () => this.syncAccount(params.row),
},
},
params.row.accountId == 0 ? "同步" : ""
),
h(
"op", {
attrs: {
oprate: "edit",
},
on: {
click: () => this.edit(params.row.id),
},
},
"编辑"
),
h(
"op", {
attrs: {
oprate: "remove",
},
on: {
click: () => this.remove(params.row),
},
},
"删除"
),
h(
"op", {
attrs: {
oprate: "detail",
},
on: {
click: () => this.openReset(params.row),
},
},
"重置密码"
),
]
);
},
},
],
columns1: [{
key: "userName",
title: this.l("userName"),
align: "left",
easy: true,
high: true,
render: (h, params) => {
return h(
"div", {
class: "action",
},
[
h(
"op", {
attrs: {
oprate: "detail",
},
on: {
click: () => this.detail(params.row.id),
},
},
params.row.userName
),
]
);
},
},
{
key: "status",
title: this.l("status"),
align: "center",
high: true,
code: "User.base.status",
},
],
tdHeightExcel: "",
excelData: [],
formatList: ["xlsx"],
columnsImport: [],
departArr: [], //部门list
sheetNames: [], //excel的表明
workBook: {},
openDatas: [],
dataType: 0,
//粘贴excel内容start
btnType: 'default',
ghostStatus: false,
btnTxt: "打开粘贴Excel",
showTablePaste: false,
inputProps: {
rows: 10,
placeholder: "请从Excel复制一段表格数据，粘贴在这里",
},
value: "",
};
},
props: {
eid: Number,
},
created() {
this.tdHeightExcel = window.innerHeight - 180;
//导出对列表头进行预加载start
this.loadColum(this.columns0);
this.$api.get(`${systemUrl}/Department/GetDepartments`).then((r) => {
this.departArr = r.result.items;
});
{ //导出对列表头进行预加载end
key: "status", },
title: this.l("status"), mounted() {
align: "center", if (this.eid > 0) {
high: true, this.load(this.eid);
code: "User.base.status", }
window.onresize = () => {
///浏览器窗口大小变化
return (() => {
window.screenHeight = window.innerHeight;
this.tdHeightExcel = window.innerHeight - 240;
})();
};
},
methods: {
load(v) {
Api.get({
id: v,
}).then((r) => {
this.entity = r.result;
});
this.dataType = 0;
this.sheetNames = [];
this.excelData = [];
Api.openExcel({
id: v,
}).then((res) => {
if (res.success) {
this.openDatas = res.result;
this.dealOpenTable(0);
//获取excel sheetname
if (res.result.length > 0) {
res.result.forEach((el) => {
this.sheetNames.push(el.title);
});
}
}
});
}, },
], //加载原文件列表
excelData: [ dealOpenTable(val) {
{ this.excelData = this.openDatas[val].dataTable;
userName: "测试人员001", var tempCos = Object.keys(this.openDatas[val].dataTable[0]);
cardNo: "", this.columnsImport = [];
gender: "0", var headersNow = [];
birthday: "1990-09-26 00:00:00", tempCos.forEach((el) => {
degreeId: "3", let headObj = {};
status: "1", headObj.title = el;
departmentId: "197", headObj.key = el;
departmentTitle: "整备", headersNow.push(headObj);
creatorUserId: "", });
creationTime: "2020-08-19 11:43:33", this.columnsImport = headersNow;
lastModifierUserId: "",
lastModificationTime: "",
phone: "13745781247",
email: "LZ@outlook.com",
licensedToWork: "3",
positionId: "2",
titleId: "1",
}, },
{ handleSubmit() {
userName: "测试人员002", this.$refs.form.validate((v) => {
cardNo: "11011", if (v) {
gender: "1", this.disabled = true;
birthday: "1981-07-17 00:00:00", Api.update(this.entity)
degreeId: "3", .then((r) => {
status: "1", this.disabled = false;
departmentId: "196", if (r.success) {
departmentTitle: "乘务", this.$Message.success("保存成功");
creatorUserId: "", this.$emit("on-ok");
creationTime: "2020-08-19 11:43:33", } else {
lastModifierUserId: "", this.$Message.error("保存失败");
lastModificationTime: "", }
phone: "14761586449", })
email: "1594289563@qq.com", .catch((err) => {
licensedToWork: "3", this.disabled = false;
positionId: "3", this.$Message.error("保存失败");
titleId: "4", console.warn(err);
});
}
});
}, },
{ //重新处理colum
userName: "测试人员003", loadColum(columns) {
cardNo: "11012", let tempCol = this.$u.clone(columns);
gender: "0", tempCol.forEach((ele, index) => {
birthday: "1996-07-01 00:00:00", if (ele.key == "action") {
degreeId: "3", ele.hide = true;
status: "1", }
departmentId: "198", });
departmentTitle: "物料库房", this.columnsImport = tempCol;
creatorUserId: "",
creationTime: "2020-08-19 11:43:33",
lastModifierUserId: "",
lastModificationTime: "",
phone: "19254832512",
email: "1228562934@qq.com",
licensedToWork: "3",
positionId: "1",
titleId: "1",
}, },
], //下载原excel文件
formatList: ["xlsx"], downFile() {
columnsImport: [], //alert(path)
departArr: [], //部门list let truePath = this.entity.path;
sheetNames: [], //excel的表明 if (truePath.length > 2) {
workBook: {}, if (
}; truePath.substring(0, 7).toLowerCase() == "http://" ||
}, truePath.substring(0, 8).toLowerCase() == "https://"
props: { ) {
eid: Number, window.open(truePath, "_blank");
}, } else {
created() { this.fileUrlPath = this.downUrl + this.entity.path;
this.tdHeightExcel = window.innerHeight - 180; window.open(this.fileUrlPath, "_blank");
//导出对列表头进行预加载start }
this.loadColum(this.columns); }
this.$api.get(`${systemUrl}/Department/GetDepartments`).then((r) => { },
this.departArr = r.result.items; //导入excel文件
}); //打开传时初始化
resetParms() {
this.pageType = undefined;
this.btnTxt = "打开粘贴Excel";
this.showTablePaste = false;
this.btnType = 'default';
this.ghostStatus = false;
},
async beforeUpload(file) {
//初始化
this.sheetNames = [];
this.workBook = {};
this.$refs.uploadfile.clearFiles(); //清除上一次上传文件列表
//上传成功后的读取到excel信息
this.workBook = await this.$u.readXLSX(file);
this.sheetNames = this.workBook.SheetNames; //execel里的表明
this.dealSheet(0); //默认显示第一个表
return false;
},
//对上传的excel表信息进行处理，不对表头进行处理
dealSheet(index) {
this.dataType = 1;
this.columnsImport = [];
this.excelData = [];
const sheet2JSONOpts = {
defval: "", //给defval赋值为空的字符串
};
var csv = XLSX.utils.sheet_to_csv(
this.workBook.Sheets[this.workBook.SheetNames[index]],
sheet2JSONOpts
);
//导出对列表头进行预加载end var lines = csv.split("\n"); //第一行标题
}, var headers = lines[0].split(",");
mounted() { var headersNow = [];
window.onresize = () => { headers.forEach((elHead) => {
///浏览器窗口大小变化 let headObj = {};
return (() => { headObj.title = elHead;
window.screenHeight = window.innerHeight; headObj.key = elHead;
this.tdHeightExcel = window.innerHeight - 240; headersNow.push(headObj);
})();
};
},
methods: {
load(v) {
Api.get({ id: v }).then((r) => {
this.entity = r.result;
});
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
this.disabled = true;
Api.update(this.entity)
.then((r) => {
this.disabled = false;
if (r.success) {
this.$Message.success("保存成功");
this.$emit("on-ok");
} else {
this.$Message.error("保存失败");
}
})
.catch((err) => {
this.disabled = false;
this.$Message.error("保存失败");
console.warn(err);
}); });
} this.columnsImport = headersNow;
});
},
//重新处理colum
loadColum(columns) {
let tempCol = this.$u.clone(columns);
tempCol.forEach((ele, index) => {
if (ele.key == "action") {
ele.hide = true;
}
});
this.columnsImport = tempCol;
},
//导入excel文件
async beforeUpload(file) {
this.workBook = {};
this.$refs.uploadfile.clearFiles(); //清除上一次上传文件列表
//上传成功后的读取到excel信息
this.workBook = await this.$u.readXLSX(file);
this.sheetNames = this.workBook.SheetNames; //execel里的表明
this.dealSheet(0); //默认显示excel第一张表
//console.log(workbook);
return false;
},
dealSheet(index) {
//对表信息进行处理
this.excelData = [];
var tempColums = this.$u.clone(this.columnsImport);
const sheet2JSONOpts = {
defval: "", //给defval赋值为空的字符串
};
var csv = XLSX.utils.sheet_to_csv(
this.workBook.Sheets[this.workBook.SheetNames[index]],
sheet2JSONOpts
);
var lines = csv.split("\n"); //第一行标题 var result = [];
var headers = lines[0].split(","); for (var i = 1; i < lines.length - 1; i++) {
var arrTi = []; var obj = {};
//转换到colum后的list表头start var currentline = lines[i].split(",");
headers.forEach((elHead) => { for (var j = 0; j < headers.length; j++) {
tempColums.forEach((elCol) => { obj[headers[j]] = currentline[j];
if (elHead == elCol.title) { }
//elHead=elCol.key result.push(obj);
arrTi.push(elCol.key); }
} this.excelData = result;
}); },
}); //对已选择了功能模块的列表信息进行处理，对表头也处理
headers = arrTi; dealSheet1(index) {
//转换到colum后的list表头end this.excelData = [];
var result = []; var tempColums = this.$u.clone(this.columnsImport);
for (var i = 1; i < lines.length - 1; i++) { const sheet2JSONOpts = {
var obj = {}; defval: "", //给defval赋值为空的字符串
var currentline = lines[i].split(","); };
for (var j = 0; j < headers.length; j++) { var csv = XLSX.utils.sheet_to_csv(
obj[headers[j]] = currentline[j]; this.workBook.Sheets[this.workBook.SheetNames[index]],
} sheet2JSONOpts
result.push(obj); );
}
//对读取的excel文件数据进行处理
var arrTitleUse = []; //使用数据字典的字段 var lines = csv.split("\n"); //第一行标题
tempColums.forEach((elCode) => { var headers = lines[0].split(",");
if (elCode.code) {
arrTitleUse.push({ key: elCode.key, code: elCode.code });
}
});
result.forEach((ele) => { var arrTi = [];
//如果导入文件没有departmentid，但存在departmentTitle的话，通过title获取id //转换到colum后的list表头start
if ( headers.forEach((elHead) => {
ele.departmentTitle && tempColums.forEach((elCol) => {
ele.departmentTitle != "" && if (elHead == elCol.title) {
(!ele.departmentId || ele.departmentId == "") //elHead=elCol.key
) { arrTi.push(elCol.key);
this.departArr.forEach((e) => { }
if (ele.departmentTitle && ele.departmentTitle == e.name) { });
ele.departmentId = e.id; });
headers = arrTi;
//转换到colum后的list表头end
var result = [];
for (var i = 1; i < lines.length - 1; i++) {
var obj = {};
var currentline = lines[i].split(",");
for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}
//对读取的excel文件数据进行处理
var arrTitleUse = []; //使用数据字典的字段
tempColums.forEach((elCode) => {
if (elCode.code) {
arrTitleUse.push({
key: elCode.key,
code: elCode.code,
});
}
});
result.forEach((ele) => {
//如果导入文件没有departmentid，但存在departmentTitle的话，通过title获取id
if (
ele.departmentTitle &&
ele.departmentTitle != "" &&
(!ele.departmentId || ele.departmentId == "")
) {
this.departArr.forEach((e) => {
if (ele.departmentTitle && ele.departmentTitle == e.name) {
ele.departmentId = e.id;
}
});
} else if (
//如果导入文件没有departmentTitle，但存在departmentid的话，通过id获取departmentTitle
ele.departmentId &&
ele.departmentId + "" != "" &&
(!ele.departmentTitle || ele.departmentTitle == "")
) {
this.departArr.forEach((e) => {
if (ele.departmentId && ele.departmentId == e.id) {
ele.departmentTitle = e.name;
}
});
}
//对列表里的数据字典项进行处理
arrTitleUse.forEach((elem) => {
if (ele[elem.key] && ele[elem.key] != "" && ele[elem.key] != null) {
//如果数据字典项对应的DirName字段存在，通过name查询到对应的code，然后赋值
ele[elem.key] = this.$u.dirCode(
this.$store.getters.dictionaryByKey(elem.code),
ele[elem.key]
);
}
});
});
this.excelData = result;
},
//切换sheet表重新加载
sheetClick(val) {
if (this.dataType == 0) {
this.dealOpenTable(val);
} else {
this.dealSheet(val);
} }
}); },
} else if ( //选择导入的模块 0：用户管理
//如果导入文件没有departmentTitle，但存在departmentid的话，通过id获取departmentTitle pageChange(val) {
ele.departmentId && switch (val) {
ele.departmentId + "" != "" && case 0:
(!ele.departmentTitle || ele.departmentTitle == "") this.loadColum(this.columns0);
) { break;
this.departArr.forEach((e) => { case 1:
if (ele.departmentId && ele.departmentId == e.id) { this.loadColum(this.columns1);
ele.departmentTitle = e.name; break;
default:
this.loadColum(this.columns0);
} }
}); },
} handleClose() {
this.$emit("on-close");
},
cancelExcel() {
this.excelData = [];
this.$refs.uploadfile.clearFiles();
this.$emit("on-close");
},
//粘贴excel相关start
openPaste() {
if (this.btnTxt == "打开粘贴Excel") {
this.btnType = 'primary';
this.ghostStatus = true;
this.showTablePaste = true;
this.btnTxt = "关闭粘贴Excel";
} else {
this.btnType = 'default';
this.ghostStatus = false;
this.showTablePaste = false;
this.btnTxt = "打开粘贴Excel";
}
},
handleSuccess(tableData) {
this.excelData = [];
this.columnsImport = [];
this.sheetNames = [];
//console.log(tableData);
this.columnsImport = tableData.columns;
this.excelData = tableData.data;
},
handleError(tableData, errorIndex) {
//console.log(tableData, errorIndex);
this.$Message.error("表格数据有误");
},
//粘贴excel相关end
//重新加载excel
resetTable() {
this.pageType = undefined;
this.btnTxt = "打开粘贴Excel";
this.showTablePaste = false;
this.btnType = 'default';
this.ghostStatus = false;
this.load(this.eid);
},
//对列表里的数据字典项进行处理 l(key) {
arrTitleUse.forEach((elem) => { key = "user" + "." + key;
if (ele[elem.key] && ele[elem.key] != "" && ele[elem.key] != null) { return this.$t(key);
//如果数据字典项对应的DirName字段存在，通过name查询到对应的code，然后赋值 },
ele[elem.key] = this.$u.dirCode(
this.$store.getters.dictionaryByKey(elem.code),
ele[elem.key]
);
}
});
});
this.excelData = result;
},
//切换sheet表重新加载
sheetClick(val) {
this.dealSheet(val);
},
pageChange(val) {
switch (val) {
case 0:
this.loadColum(this.columns);
break;
case 1:
this.loadColum(this.columns1);
break;
default:
this.loadColum(this.columns);
}
},
handleClose() {
this.$emit("on-close");
},
cancelExcel() {
this.excelData = [];
this.$refs.uploadfile.clearFiles();
this.$emit("on-close");
},
l(key) {
key = "user" + "." + key;
return this.$t(key);
}, },
}, watch: {
watch: { eid(v) {
eid(v) { if (v != 0) {
if (v != 0) { this.load(v);
this.load(v); }
} },
}, },
},
}; };
</script> </script>
<style lang="less">
<style lang="less">
.content { .content {
.table-footer { .table-footer {
line-height: 45px; line-height: 45px;
background: #f5f5f5; background: #f5f5f5;
} }
.ivu-footer-toolbar {
text-align: left; .ivu-footer-toolbar {
.ivu-footer-toolbar-right { text-align: left;
float: left;
.ivu-footer-toolbar-right {
float: left;
}
}
.demo-split {
border: 1px solid #dcdee2;
}
.demo-split-pane {
padding: 10px;
} }
}
} }
</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