Skip to content

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

editGrid

parent 39bec43f
Hide whitespace changes
Inline Side-by-side
Showing with 1286 additions and 1215 deletions
components/page/dataGrid.vue
View file @ 780421a2
...@@ -653,7 +653,7 @@ export default { ...@@ -653,7 +653,7 @@ export default {
// ); // );
// }); // });
tempCol.forEach((elem) => { tempCol.forEach((elem) => {
if (e[elem.key] && e[elem.key] != "" && e[elem.key] != null) { if ((e[elem.key] && e[elem.key] != "" && e[elem.key] != null) || e[elem.key] == 0) {
//如果数据字典项对应的DirName字段存在，通过name查询到对应的code，然后赋值。 //如果数据字典项对应的DirName字段存在，通过name查询到对应的code，然后赋值。
let codeArr = []; let codeArr = [];
let keyValue = e[elem.key]; let keyValue = e[elem.key];
......
components/page/treeGrid/EditGrid.vue
View file @ 780421a2
<template> <template>
<div class="table-content1"> <div class="table-content1">
<div class="table-tools"> <div class="table-tools">
<div class="table-search"> <div class="table-search">
<slot name="easySearch"></slot> <slot name="easySearch"></slot>
</div> </div>
<div class="btns"> <div class="btns">
<slot name="buttons"></slot> <slot name="buttons"></slot>
<!-- <Button @click="config=!config"> <!-- <Button @click="config=!config">
<Icon type="md-build" class="table-set" size="14" title="列设置" /> <Icon type="md-build" class="table-set" size="14" title="列设置" />
</Button>--> </Button>-->
</div> </div>
</div> </div>
<div class="table-main" ref="main"> <div class="table-main" ref="main">
<div> <div>
<table class="table-head"> <table class="table-head">
<thead> <thead>
<tr> <tr>
<th <th v-for="(column, index) in columns" :key="index" :style="tdStyle(column)">
v-for="(column, index) in columns" <label v-if="column.type === 'selection'">
:key="index" <Checkbox v-model="checkAll" @on-change="checked" :indeterminate="indeterminate"></Checkbox>
:style="tdStyle(column)" </label>
> <label v-else>
<label v-if="column.type === 'selection'"> {{ renderHeader(column, index) }}
<Checkbox <span class="ivu-table-sort" v-if="column.sortable">
v-model="checkAll" <Icon type="arrow-up-b" :class="{ on: column._sortType === 'asc' }" @click.native="handleSort(index, 'asc')" />
@on-change="checked" <Icon type="arrow-down-b" :class="{ on: column._sortType === 'desc' }" @click.native="handleSort(index, 'desc')" />
:indeterminate="indeterminate" </span>
></Checkbox> </label>
</label> </th>
<label v-else> </tr>
{{ renderHeader(column, index) }} </thead>
<span class="ivu-table-sort" v-if="column.sortable"> <tbody>
<Icon <tr v-for="(item, index) in trs" :key="item.id" class="treetr" :id="'tr' + index" v-show="show(item)" :draggable="drag && !item._drag" @dragstart="dragstart($event, index, item)" @drop="dragdrop($event, index, item)" @dragenter="dragenter($event, index, item)" @dragover="dragover($event, index, item)" @dragleave="dragleave($event, index, item)">
type="arrow-up-b" <!-- -->
:class="{ on: column._sortType === 'asc' }" <td v-for="(column, snum) in columns" :key="column.key" :style="tdStyle(column)">
@click.native="handleSort(index, 'asc')" <!-- 多选 -->
/> <label v-if="column.type === 'selection'" @click="rowChecked(item, index, $event)">
<Icon <Checkbox v-model="item._checked" :indeterminate="item._indeterminate"></Checkbox>
type="arrow-down-b" </label>
:class="{ on: column._sortType === 'desc' }"
@click.native="handleSort(index, 'desc')"
/>
</span>
</label>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in trs"
:key="item.id"
class="treetr"
:id="'tr' + index"
v-show="show(item)"
:draggable="drag && !item._drag"
@dragstart="dragstart($event, index, item)"
@drop="dragdrop($event, index, item)"
@dragenter="dragenter($event, index, item)"
@dragover="dragover($event, index, item)"
@dragleave="dragleave($event, index, item)"
>
<!-- -->
<td
v-for="(column, snum) in columns"
:key="column.key"
:style="tdStyle(column)"
>
<!-- 多选 -->
<label
v-if="column.type === 'selection'"
@click="rowChecked(item, index, $event)"
>
<Checkbox
v-model="item._checked"
:indeterminate="item._indeterminate"
></Checkbox>
</label>
<Icon <Icon v-if="column.type === 'drag'" type="md-more" class="drag" />
v-if="column.type === 'drag'" <DTSpan v-if="column.type == 'date'" :value="item[column.key]" />
type="md-more" <User v-if="column.type == 'user'" :value="item[column.key]" />
class="drag" <div v-if="
/>
<DTSpan
v-if="column.type == 'date'"
:value="item[column.key]"
/>
<div v-if="column.type == 'user'">
<User :value="item[column.key]" />
</div>
<div
v-if="
column.type == 'users' && column.type == 'users' &&
item[column.key] && item[column.key] &&
item[column.key].length > 0 item[column.key].length > 0
" ">
> <User v-for="li in item[column.key]" :value="li" :key="li" class="ml10" />
<User </div>
v-for="li in item[column.key]" <state v-if="column.code" :code="column.code" :value="item[column.key]" />
:value="li" <!-- 树图标 -->
:key="li" <span @click="toggle(index, item)" v-if="snum == treeColumn()">
class="ml10" <span class="ib" v-width="spaceWidth * item._level"></span>
/> <a v-if="item._count > 0" class="expand">
</div> <Icon :type="!item._expanded ? 'ios-add' : 'ios-remove'" />
<state </a><i v-else class="ms-tree-space"></i>
v-if="column.code" </span>
:code="column.code" <!-- 菜单名称、排序、请求地址 -->
:value="item[column.key]" <label v-if="
/>
<!-- 树图标 -->
<span @click="toggle(index, item)" v-if="snum == treeColumn()">
<span class="ib" v-width="spaceWidth * item._level"></span>
<a v-if="item._count > 0" class="expand"
><Icon
:type="!item._expanded ? 'ios-add' : 'ios-remove'"
/> </a
><i v-else class="ms-tree-space"></i>
</span>
<!-- 菜单名称、排序、请求地址 -->
<label
v-if="
!column.type && !column.type &&
!column.code && !column.code &&
!column.render && !column.render &&
!column.slot !column.slot
" ">
> {{ renderBody(item, column) }}
{{ renderBody(item, column) }} </label>
</label> <table-expand v-if="column.render && !column.type && !column.solt" :row="item" :column="column" :index="snum" :render="column.render"></table-expand>
<table-expand <column-slot v-if="column.slot" :row="item" :column="column" :index="snum"></column-slot>
v-if="column.render && !column.type && !column.solt" </td>
:row="item" </tr>
:column="column" </tbody>
:index="snum" </table>
:render="column.render" </div>
></table-expand>
<column-slot
v-if="column.slot"
:row="item"
:column="column"
:index="snum"
></column-slot>
</td>
</tr>
</tbody>
</table>
</div>
</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 <Modal v-if="high" v-model="modalSearch" title="高级搜索" draggable width="800" ref="search">
v-if="high" <slot name="searchForm"></slot>
v-model="modalSearch" <div slot="footer">
title="高级搜索" <Button @click="modalSearch = false" class="mr20">取消</Button>
draggable <Button @click="complexSearch" type="primary" class="mr20">查询</Button>
width="800" </div>
ref="search"
>
<slot name="searchForm"></slot>
<div slot="footer">
<Button @click="modalSearch = false" class="mr20">取消</Button>
<Button @click="complexSearch" type="primary" class="mr20">查询</Button>
</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" 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>
import TableExpand from "./expand"; import TableExpand from "./expand";
import ColumnSlot from "./columnSolt"; import ColumnSlot from "./columnSolt";
export default { export default {
name: "treeGrid", name: "treeGrid",
components: { TableExpand, ColumnSlot }, components: {
props: { TableExpand,
mode: { ColumnSlot
type: [String, Number], },
default: 0, props: {
validator: (v) => { mode: {
var modes = ["read", "column", "row"]; type: [String, Number],
if (/^\d+/.test(v)) { default: 0,
return v >= 0 && v < modes.length; validator: (v) => {
} var modes = ["read", "column", "row"];
return modes.indexOf(v) > -1; if (/^\d+/.test(v)) {
}, return v >= 0 && v < modes.length;
}, }
border: { return modes.indexOf(v) > -1;
//是否显示边框 },
type: Boolean, },
default: true, border: {
}, //是否显示边框
batch: { type: Boolean,
//是否批量操作 default: true,
type: Boolean, },
default: true, batch: {
}, //是否批量操作
format: { type: Boolean,
type: Function, default: true,
default: null, },
}, format: {
initsearch: { type: Function,
type: Function, default: null,
default: null, },
}, initsearch: {
lazy: { type: Function,
//懒加载设置，设置为真时候，默认不加载数据。 default: null,
type: Boolean, },
default: false, lazy: {
}, //懒加载设置，设置为真时候，默认不加载数据。
placeholder: { type: Boolean,
type: String, default: false,
default: "请输入关键字", },
}, placeholder: {
height: { type: String,
type: Number, default: "请输入关键字",
default: 0, },
}, height: {
tool: { type: Number,
//是否显示工具栏 default: 0,
type: Boolean, },
default: true, tool: {
}, //是否显示工具栏
easy: { type: Boolean,
//是否显示简单搜索 default: true,
type: Boolean, },
default: true, easy: {
}, //是否显示简单搜索
high: { type: Boolean,
//是否显示高级搜索 default: true,
type: Boolean, },
default: true, high: {
}, //是否显示高级搜索
draggable: { type: Boolean,
//是否可以拖拽 default: true,
type: Boolean, },
default: false, draggable: {
}, //是否可以拖拽
set: { type: Boolean,
//是否显示列设置 default: false,
type: Boolean, },
default: true, set: {
}, //是否显示列设置
page: { type: Boolean,
//是否分页
type: Boolean,
default: false,
},
columns: Array,
items: {
//接收树形数据
type: Array,
default() {
return [];
},
},
data: {
//接收UpId型数据
type: Array,
default() {
return [];
},
},
keyname: {
//默认行主键
type: [String],
default: "id",
},
upname: {
// 父级字段名称
type: String,
default: "upId",
},
root: {
// 根级UpId的值.
type: [String, Number],
default: 0,
},
action: {
//接口地址
type: String,
default: "",
},
conditions: {
//查询条件
type: Object,
default: function () {
return {
keys: {
op: "name",
value: "",
default: true, default: true,
}, },
page: {
//是否分页
type: Boolean,
default: false,
},
columns: Array,
items: {
//接收树形数据
type: Array,
default () {
return [];
},
},
data: {
//接收UpId型数据
type: Array,
default () {
return [];
},
},
keyname: {
//默认行主键
type: [String],
default: "id",
},
upname: {
// 父级字段名称
type: String,
default: "upId",
},
root: {
// 根级UpId的值.
type: [String, Number],
default: 0,
},
action: {
//接口地址
type: String,
default: "",
},
conditions: {
//查询条件
type: Object,
default: function () {
return {
keys: {
op: "name",
value: "",
default: true,
},
};
},
},
iconName: false,
drag: {
//拖拽
type: Boolean,
default: false,
},
spaceWidth: {
//树形表格缩进距离
type: Number,
default: 20,
},
exportTitle: {
type: String,
default: "",
},
},
provide() {
return {
tableRoot: this.slots,
}; };
},
},
iconName: false,
drag: {
//拖拽
type: Boolean,
default: false,
},
spaceWidth: {
//树形表格缩进距离
type: Number,
default: 20,
},
exportTitle: {
type: String,
default: "",
}, },
}, data() {
provide() { return {
return { color: "#19be6b",
tableRoot: this.slots, checkAll: false,
}; keys: "",
}, selectItems: [],
data() { modalSearch: false,
return { footerToolbar: false,
color: "#19be6b", search: {
checkAll: false, pageIndex: 1,
keys: "", pageSize: 20,
selectItems: [], sortBy: "id",
modalSearch: false, isDesc: true,
footerToolbar: false, conditions: [],
search: { },
pageIndex: 1, searchConditions: this.search,
pageSize: 20, pageSizeOpts: [20, 50, 100],
sortBy: "id", tableHeight: 0,
isDesc: true, firstY: 0,
conditions: [], config: false,
}, logs: [],
searchConditions: this.search, trs: [], // 处理后数据数组
pageSizeOpts: [20, 50, 100], columnsCur: [], // 处理后的表头数据
tableHeight: 0, checkGroup: [], // 复选框数组
firstY: 0, checks: false, // 全选
config: false, tdsWidth: 0, // td总宽
logs: [], timer: false, // 控制监听时长
trs: [], // 处理后数据数组 dataLength: 0, // 树形数据长度
columnsCur: [], // 处理后的表头数据 dragIndex: -1, //拖拽开始的序号
checkGroup: [], // 复选框数组 allUser: [], //所有user
checks: false, // 全选 };
tdsWidth: 0, // td总宽
timer: false, // 控制监听时长
dataLength: 0, // 树形数据长度
dragIndex: -1, //拖拽开始的序号
};
},
computed: {
indeterminate() {
var checkeds = this.trs.filter((u) => {
return u._checked;
}).length;
return 0 < checkeds && checkeds < this.trs.length;
}, },
}, computed: {
watch: { indeterminate() {
items() { var checkeds = this.trs.filter((u) => {
if (this.items) { return u._checked;
this.trs = this.treeToList(this.items); }).length;
this.checkGroup = this.renderCheck(this.items); return 0 < checkeds && checkeds < this.trs.length;
if (this.checkGroup.length == this.dataLength) { },
this.checks = true; },
} else { watch: {
this.checks = false; items() {
if (this.items) {
this.trs = this.treeToList(this.items);
this.checkGroup = this.renderCheck(this.items);
if (this.checkGroup.length == this.dataLength) {
this.checks = true;
} else {
this.checks = false;
}
}
},
data(v) {},
columns: {
handler() {
this.columnsCur = this.makeColumns();
},
deep: true,
},
checkGroup(data) {
this.checkAllGroupChange(data);
},
exportTitle(v) {
this.exportTitle = v
} }
}
},
data(v) {},
columns: {
handler() {
this.columnsCur = this.makeColumns();
},
deep: true,
},
checkGroup(data) {
this.checkAllGroupChange(data);
},
},
mounted() {
if (this.items && this.items.length > 0) {
this.trs = this.treeToList(this.items);
this.columnsCur = this.makeColumns();
this.checkGroup = this.renderCheck(this.items);
if (this.checkGroup.length == this.dataLength) {
this.checks = true;
} else {
this.checks = false;
}
}
},
methods: {
load() {},
complexSearch() {
var search = this.$refs.search.$children.filter((u) => {
return u.condition;
});
if (search) {
var conditions = search[0].condition;
this.reload(conditions);
}
},
slots() {
return this.$scopedSlots;
},
//拖拽开始
dragstart(e, index, row) {
this.dragIndex = index;
console.log(index);
},
//进入
dragenter(e, index, row) {
var tr = document.getElementById("tr" + index);
if (this.dragIndex > index) {
tr.className += " move";
} else if (this.dragIndex < index) {
tr.className += " sort";
}
},
// 悬浮
dragover(e, index, row) {
e.preventDefault();
// 鼠标Y
var my = e.offsetY;
var h = e.toElement.clientHeight;
var tr = document.getElementById("tr" + index);
if (this.dragIndex > index && my / h < 0.5) {
tr.className = tr.className.replace(" move", " sort");
}
if (this.dragIndex < index && my / h > 0.5) {
tr.className = tr.className.replace(" sort", " move");
}
},
// 离开
dragleave(e, index, row) {
var tr = document.getElementById("tr" + index);
tr.className = tr.className.replace(" move", "").replace(" sort", "");
},
//放下
dragdrop(e, index, row) {
event.preventDefault();
var tr = document.getElementById("tr" + index);
tr.className = tr.className.replace(" move", "").replace(" sort", "");
if (index != this.dragIndex) {
this.$emit("on-drag-drop", this.dragIndex, index, this.trs, e);
}
}, },
/** mounted() {
* @dragover="dragover($event, index, item)" this.getAllUser(); //获取所有用户
@dragleave="dragleave($event,index,item)" if (this.items && this.items.length > 0) {
*/ this.trs = this.treeToList(this.items);
// 有无多选框折叠位置优化 this.columnsCur = this.makeColumns();
treeColumn() { this.checkGroup = this.renderCheck(this.items);
var num = 0; if (this.checkGroup.length == this.dataLength) {
for (let i = 0, len = this.columns.length; i < len; i++) { this.checks = true;
if (this.columns[i].tree) { } else {
num = i; this.checks = false;
}
} }
}
return num;
}, },
methods: {
load() {},
complexSearch() {
var search = this.$refs.search.$children.filter((u) => {
return u.condition;
});
if (search) {
var conditions = search[0].condition;
this.reload(conditions);
}
},
slots() {
return this.$scopedSlots;
},
//拖拽开始
dragstart(e, index, row) {
this.dragIndex = index;
console.log(index);
},
//进入
dragenter(e, index, row) {
var tr = document.getElementById("tr" + index);
if (this.dragIndex > index) {
tr.className += " move";
} else if (this.dragIndex < index) {
tr.className += " sort";
}
},
// 悬浮
dragover(e, index, row) {
e.preventDefault();
// 鼠标Y
var my = e.offsetY;
var h = e.toElement.clientHeight;
var tr = document.getElementById("tr" + index);
if (this.dragIndex > index && my / h < 0.5) {
tr.className = tr.className.replace(" move", " sort");
}
if (this.dragIndex < index && my / h > 0.5) {
tr.className = tr.className.replace(" sort", " move");
}
},
// 离开
dragleave(e, index, row) {
var tr = document.getElementById("tr" + index);
tr.className = tr.className.replace(" move", "").replace(" sort", "");
},
//放下
dragdrop(e, index, row) {
event.preventDefault();
var tr = document.getElementById("tr" + index);
tr.className = tr.className.replace(" move", "").replace(" sort", "");
if (index != this.dragIndex) {
this.$emit("on-drag-drop", this.dragIndex, index, this.trs, e);
}
},
/**
* @dragover="dragover($event, index, item)"
@dragleave="dragleave($event,index,item)"
*/
// 有无多选框折叠位置优化
treeColumn() {
var num = 0;
for (let i = 0, len = this.columns.length; i < len; i++) {
if (this.columns[i].tree) {
num = i;
}
}
return num;
},
// 设置td宽度,td的align // 设置td宽度,td的align
tdStyle(column) { tdStyle(column) {
const style = {}; const style = {};
if (column.align) { if (column.align) {
style["text-align"] = column.align; style["text-align"] = column.align;
} }
if (column.width) { if (column.width) {
style["width"] = `${column.width}px`; style["width"] = `${column.width}px`;
} }
return style; if (column.hide) {
}, style["display"] = `none`;
// 排序事件 }
handleSort(index, type) { return style;
this.columnsCur.forEach((col) => (col._sortType = "normal")); },
if (this.columnsCur[index]._sortType === type) { // 排序事件
this.columnsCur[index]._sortType = "normal"; handleSort(index, type) {
} else { this.columnsCur.forEach((col) => (col._sortType = "normal"));
this.columnsCur[index]._sortType = type; if (this.columnsCur[index]._sortType === type) {
} this.columnsCur[index]._sortType = "normal";
this.$emit( } else {
"on-sort-change", this.columnsCur[index]._sortType = type;
this.columnsCur[index].key, }
this.columnsCur[index]._sortType this.$emit(
); "on-sort-change",
}, this.columnsCur[index].key,
// 点击某一行事件 this.columnsCur[index]._sortType
RowClick(data, event, index, text) { );
this.$emit("on-row-click", data, event, index, text); },
}, // 点击某一行事件
// 点击事件 返回数据处理 RowClick(data, event, index, text) {
// 处理表头数据 this.$emit("on-row-click", data, event, index, text);
makeColumns() { },
const columns = this.$u.clone(this.columns); // 点击事件 返回数据处理
this.tdsWidth = 0; // 处理表头数据
columns.forEach((column, index) => { makeColumns() {
column._index = index; const columns = this.$u.clone(this.columns);
column._width = column.width ? column.width : ""; this.tdsWidth = 0;
column._sortType = "normal"; columns.forEach((column, index) => {
this.tdsWidth += column.width ? parseFloat(column.width) : 0; column._index = index;
}); column._width = column.width ? column.width : "";
return columns; column._sortType = "normal";
}, this.tdsWidth += column.width ? parseFloat(column.width) : 0;
// // 隐藏显示 });
return columns;
toggle(index, item) { },
if (item._count > 0) { // // 隐藏显示
this.$set(this.trs[index], "_expanded", !item._expanded);
this.trs.forEach((u, i) => {
if (u[this.upname] === item.id) {
this.$set(this.trs[i], "_show", !item._expanded);
}
});
}
console.warn(index, item._expanded, item);
},
show(item) {
if (item._level == 0) {
return true;
} else {
var parents = this.getRoots(item);
return (
parents.filter((u) => {
return !u._expanded;
}).length == 0
);
}
},
getRoots(item) {
var parents = [];
var root = this.trs.filter((u) => {
return u[this.keyname] == item[this.upname];
});
while (root.length == 1) {
parents.push(root[0]);
root = this.trs.filter((u) => {
return u[this.keyname] === root[0][this.upname];
});
}
return parents;
},
open(index, item) {
if (item.children) {
item.children.forEach((child, childIndex) => {
child.isShow = true;
if (child.children && child.expanded) {
this.open(index + childIndex + 1, child);
}
});
}
},
close(index, item) {
if (item.children) {
item.children.forEach((child, childIndex) => {
child.isShow = false;
child.expanded = false;
if (child.children) {
this.close(index + childIndex + 1, child);
}
});
}
},
// 点击check勾选框,判断是否有children节点 如果有就一并勾选
rowChecked(data, index, event) {
var boys = this.getChildrens(data);
this.trs.forEach((u, i) => {
var items = boys.filter((b) => {
return b[this.keyname] == u[this.keyname];
});
if (items.length == 1) {
this.$set(this.trs[i], "_checked", !data._checked);
}
});
this.checkAll =
this.trs.length >
this.trs.filter((u) => {
return !u._checked;
}).length;
},
getChildrens(data) {
var childrens = [];
var that = this;
getChildren(data);
function getChildren(f) {
that.trs.forEach((u) => {
if (u[that.upname] == f[that.keyname]) {
childrens.push(u);
getChildren(u);
}
});
}
return childrens;
},
// checkbox 全选 选择事件
checked(v) {
this.trs.forEach((u, i) => {
this.$set(this.trs[i], "_checked", v);
});
// this.$emit('on-selection-change', this.checkGroup)
},
// 数组去重
getArray(a) {
const hash = {};
const len = a.length;
const result = [];
for (let i = 0; i < len; i++) {
if (!hash[a[i]]) {
hash[a[i]] = true;
result.push(a[i]);
}
}
return result;
},
checkAllGroupChange(data) {
if (this.dataLength > 0 && data.length === this.dataLength) {
this.checks = true;
} else {
this.checks = false;
}
this.$emit("on-selection-change", this.checkGroup);
},
All(data) {
let arr = [];
data.forEach((item) => {
arr.push(item.id);
if (item.children && item.children.length > 0) {
arr = arr.concat(this.All(item.children));
}
});
return arr;
},
// 返回表头 toggle(index, item) {
renderHeader(column, $index) { if (item._count > 0) {
if ("renderHeader" in this.columns[$index]) { this.$set(this.trs[index], "_expanded", !item._expanded);
return this.columns[$index].renderHeader(column, $index); this.trs.forEach((u, i) => {
} if (u[this.upname] === item.id) {
return column.title || "#"; this.$set(this.trs[i], "_show", !item._expanded);
}, }
treeToList(tree) { });
var that = this; }
let list = []; console.warn(index, item._expanded, item);
function treeToList(data, level) { },
data.map((u) => { show(item) {
let copy = that.$u.clone(u); if (item._level == 0) {
copy._count = 0; return true;
copy._level = level; } else {
copy._expanded = copy._expanded || that.level > level; var parents = this.getRoots(item);
copy._show = true; return (
copy._indeterminate = false; parents.filter((u) => {
copy._checked = copy._checked || false; return !u._expanded;
list.push(copy); }).length == 0
);
if (u.children) { }
treeToList(u.children, level + 1); },
copy._count = u.children.length; getRoots(item) {
delete copy.children; var parents = [];
} var root = this.trs.filter((u) => {
}); return u[this.keyname] == item[this.upname];
} });
treeToList(tree, 0); while (root.length == 1) {
return list; parents.push(root[0]);
}, root = this.trs.filter((u) => {
return u[this.keyname] === root[0][this.upname];
});
}
return parents;
},
open(index, item) {
if (item.children) {
item.children.forEach((child, childIndex) => {
child.isShow = true;
if (child.children && child.expanded) {
this.open(index + childIndex + 1, child);
}
});
}
},
close(index, item) {
if (item.children) {
item.children.forEach((child, childIndex) => {
child.isShow = false;
child.expanded = false;
if (child.children) {
this.close(index + childIndex + 1, child);
}
});
}
},
// 点击check勾选框,判断是否有children节点 如果有就一并勾选
rowChecked(data, index, event) {
var boys = this.getChildrens(data);
this.trs.forEach((u, i) => {
var items = boys.filter((b) => {
return b[this.keyname] == u[this.keyname];
});
if (items.length == 1) {
this.$set(this.trs[i], "_checked", !data._checked);
}
});
this.checkAll =
this.trs.length >
this.trs.filter((u) => {
return !u._checked;
}).length;
},
getChildrens(data) {
var childrens = [];
var that = this;
getChildren(data);
// 返回内容 function getChildren(f) {
renderBody(row, column, index) { that.trs.forEach((u) => {
return row[column.key]; if (u[that.upname] == f[that.keyname]) {
}, childrens.push(u);
// 默认选中 getChildren(u);
renderCheck(data) { }
let arr = []; });
data.forEach((item) => { }
if (item._checked) { return childrens;
arr.push(item.id); },
} // checkbox 全选 选择事件
if (item.children && item.children.length > 0) { checked(v) {
arr = arr.concat(this.renderCheck(item.children)); this.trs.forEach((u, i) => {
} this.$set(this.trs[i], "_checked", v);
}); });
return arr; // this.$emit('on-selection-change', this.checkGroup)
}, },
//分页选择 // 数组去重
pageChange(page) { getArray(a) {
this.search.page = page; const hash = {};
this.search.pageIndex = page; const len = a.length;
this.load(); const result = [];
}, for (let i = 0; i < len; i++) {
pageSizeChange(size) { if (!hash[a[i]]) {
this.search.pageSize = size; hash[a[i]] = true;
this.search.pageIndex = 1; result.push(a[i]);
this.load(); }
}, }
columnChange(item, i) { return result;
item.hide = !item.hide; },
this.$set(this.columnsCur, item, i); checkAllGroupChange(data) {
this.saveUserconfig(); if (this.dataLength > 0 && data.length === this.dataLength) {
}, this.checks = true;
selectionChange(items) { } else {
this.$emit("on-selection-change", items); this.checks = false;
this.selectItems = items; }
this.footerToolbar = items.length > 0; this.$emit("on-selection-change", this.checkGroup);
}, },
onSelect(rows, row) { All(data) {
this.$emit("on-change", rows, row); let arr = [];
}, data.forEach((item) => {
allChange(items) { arr.push(item.id);
this.$emit("all-change", items); if (item.children && item.children.length > 0) {
}, arr = arr.concat(this.All(item.children));
undoConfig() { }
//列设置恢复初始化 });
this.columnsCur = this.$u.clone(this.columns); return arr;
// this.saveUserconfig(); },
},
// 返回表头
renderHeader(column, $index) {
if ("renderHeader" in this.columns[$index]) {
return this.columns[$index].renderHeader(column, $index);
}
return column.title || "#";
},
treeToList(tree) {
var that = this;
let list = [];
function treeToList(data, level) {
data.map((u) => {
let copy = that.$u.clone(u);
copy._count = 0;
copy._level = level;
copy._expanded = copy._expanded || that.level > level;
copy._show = true;
copy._indeterminate = false;
copy._checked = copy._checked || false;
list.push(copy);
if (u.children) {
treeToList(u.children, level + 1);
copy._count = u.children.length;
delete copy.children;
}
});
}
treeToList(tree, 0);
return list;
},
// 返回内容
renderBody(row, column, index) {
return row[column.key];
},
// 默认选中
renderCheck(data) {
let arr = [];
data.forEach((item) => {
if (item._checked) {
arr.push(item.id);
}
if (item.children && item.children.length > 0) {
arr = arr.concat(this.renderCheck(item.children));
}
});
return arr;
},
//分页选择
pageChange(page) {
this.search.page = page;
this.search.pageIndex = page;
this.load();
},
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-change", rows, row);
},
allChange(items) {
this.$emit("all-change", items);
},
undoConfig() {
//列设置恢复初始化
this.columnsCur = this.$u.clone(this.columns);
// this.saveUserconfig();
},
//批量取消 //批量取消
cancelBatch() { cancelBatch() {
this.footerToolbar = false; this.footerToolbar = false;
this.$refs.table.selectAll(false); this.$refs.table.selectAll(false);
}, },
//导出excel
export2Excel() {
//当前显示数据
let list = [];
list = this.trs;
const tHeader = []; // 设置Excel的表格第一行的标题
const filterVal = []; //list里对象的属性
var tempCol = [];
var tempCol1 = []; //存放物料相关表头
var tempCol2 = []; //存放工艺规程相关表头
var tempColUser = []; //存放type=user的表头
var tempColUsers = []; //存放type=users的表头
var columnsCur = this.$u.clone(this.columns); //导出列标题信息griddata this.$refs.grid.columnsCur
columnsCur.forEach((el) => {
if (el.export) {
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列
}
if (el.type && el.type == "users") {
tempColUsers.push({
key: el.key,
code: el.type,
}); //临时存放user列
}
tHeader.push(el.title);
filterVal.push(el.key);
}
});
list.forEach((e) => {
tempCol.forEach((elem) => {
if ((e[elem.key] && e[elem.key] != "" && e[elem.key] != null) || e[elem.key] == 0) {
//如果数据字典项对应的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 (Array.isArray(e[eluser.key]) && e[eluser.key].length > 0) {
let temUsers = this.$u.clone(e[eluser.key])
let temUserName = ''
temUsers.forEach(u => {
temUserName = temUserName + this.getUserName(u);
})
e[eluser.key] = temUserName
}
if (e[eluser.key] && typeof (e[eluser.key]) == 'string' && e[eluser.key] != "" && e[eluser.key] != null) {
e[eluser.key] = this.getUserName(e[eluser.key]);
}
});
tempColUsers.forEach((elusers) => {
if (e[elusers.key].length > 0) {
let temUsers = this.$u.clone(e[elusers.key])
let temUserName = ''
temUsers.forEach(u => {
temUserName = temUserName + this.getUserName(u) + ',';
})
e[elusers.key] = temUserName.substr(0, temUserName.length - 1)
}
});
});
}, let nowDate = this.$u.getNowTime(); //年月日时分秒yyyyMMddhhmmss
//获取导出数据结束
this.$nextTick(() => {
this.$u.outExcel(
this.exportTitle + "(" + nowDate + ")",
tHeader,
filterVal,
list
);
})
},
//获取所有用户信息
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);
});
}
});
},
getUserName(id) {
let name = "";
this.allUser.forEach((ele) => {
if (id == ele.userId) {
name = ele.name;
}
});
return name;
},
},
}; };
</script> </script>
<style lang="less"> <style lang="less">
@import "../../../assets/css/custom.less"; @import "../../../assets/css/custom.less";
@table_theme: #2680eb; @table_theme: #2680eb;
...@@ -779,103 +860,120 @@ export default { ...@@ -779,103 +860,120 @@ export default {
@table_line_height: 50px; @table_line_height: 50px;
@table_hover: #f2f8fe; @table_hover: #f2f8fe;
@table_border: #accef7; @table_border: #accef7;
.table-content1 { .table-content1 {
position: relative; position: relative;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.table-tools { .table-tools {
line-height: 40px; line-height: 40px;
background: @right-header-bg; background: @right-header-bg;
.table-search {
float: left; .table-search {
line-height: 40px; float: left;
min-width: 300px; line-height: 40px;
} min-width: 300px;
.btns { }
float: right;
line-height: 40px; .btns {
} float: right;
tr:hover { line-height: 40px;
background: #f7f7f7; }
}
} tr:hover {
.icon-set { background: #f7f7f7;
font-size: 17px; }
margin-left: 5px;
display: inline-block;
}
.icon-set .ivu-icon {
cursor: pointer;
}
table {
border-spacing: 0;
border-collapse: collapse;
margin: 0 auto;
width: 100%;
border: 1px solid @table_border;
th {
background: @table_head;
} }
td,
th { .icon-set {
border-left: @table_border solid 1px; font-size: 17px;
border-right: @table_border solid 1px; margin-left: 5px;
border-bottom: #e8e9eb solid 1px;
line-height: 50px;
padding: 0 5px;
.drag:hover {
cursor: move;
}
.expand {
width: 18px;
height: 18px;
border: 1px solid @table_border;
text-align: center;
padding: 0 1px;
font-size: 14px;
font-weight: bold;
}
.expand:hover {
background: @table_theme;
color: white;
}
.ib {
display: inline-block; display: inline-block;
}
}
th {
border-top: @table_border solid 1px;
}
tr.treetr:hover td {
background: @table_hover;
}
tr.move {
td {
background-color: #d3e6fb;
}
} }
tr.sort {
td { .icon-set .ivu-icon {
border-top: 2px solid #3b8ded; cursor: pointer;
}
}
tbody {
border-bottom: @table_border solid 1px;
} }
.ms-tree-space {
position: relative; table {
top: 1px; border-spacing: 0;
display: inline-block; border-collapse: collapse;
font-style: normal; margin: 0 auto;
font-weight: 400; width: 100%;
line-height: 1; border: 1px solid @table_border;
width: 14px;
height: 14px; th {
background: @table_head;
}
td,
th {
border-left: @table_border solid 1px;
border-right: @table_border solid 1px;
border-bottom: #e8e9eb solid 1px;
line-height: 50px;
padding: 0 5px;
.drag:hover {
cursor: move;
}
.expand {
width: 18px;
height: 18px;
border: 1px solid @table_border;
text-align: center;
padding: 0 1px;
font-size: 14px;
font-weight: bold;
}
.expand:hover {
background: @table_theme;
color: white;
}
.ib {
display: inline-block;
}
}
th {
border-top: @table_border solid 1px;
}
tr.treetr:hover td {
background: @table_hover;
}
tr.move {
td {
background-color: #d3e6fb;
}
}
tr.sort {
td {
border-top: 2px solid #3b8ded;
}
}
tbody {
border-bottom: @table_border solid 1px;
}
.ms-tree-space {
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
width: 14px;
height: 14px;
}
} }
}
} }
</style> </style>
pages/project/plan/index.vue
View file @ 780421a2
<template> <template>
<div> <div>
<Card> <Card>
<EditGrid <EditGrid :columns="columns" ref="grid" :items="list" :level="8" :drag="true" :exportTitle="exportTl">
:columns="columns" <template slot="easySearch">
ref="grid" <Form ref="formInline" :model="easySearch" inline>
:items="list" <FormItem prop="keys"><Input placeholder="请输入关键字标题" v-model="easySearch.keys.value" />
:level="8" </FormItem>
:drag="true" <FormItem><Button type="primary" @click="search">查询</Button>
> </FormItem>
<template slot="easySearch" </Form>
><Form ref="formInline" :model="easySearch" inline </template>
><FormItem prop="keys" <!-- <template slot="searchForm">
><Input
placeholder="请输入关键字标题"
v-model="easySearch.keys.value"
/>
</FormItem>
<FormItem
><Button type="primary" @click="search">查询</Button>
</FormItem>
</Form></template
>
<!-- <template slot="searchForm">
<Search /> <Search />
</template> --> </template> -->
<template slot="buttons"> <template slot="buttons">
<Button type="primary" @click="add(null)">新增</Button> <Button type="primary" @click="add(null)">新增</Button>
<Dropdown @on-click="show"> <Dropdown @on-click="show">
<Button shape="circle" icon="md-settings"></Button> <Button shape="circle" icon="md-settings"></Button>
<DropdownMenu slot="list"> <DropdownMenu slot="list">
<DropdownItem name="saveTemplate">存为模版</DropdownItem> <DropdownItem name="saveTemplate">存为模版</DropdownItem>
<DropdownItem name="useTemplate">导入模版</DropdownItem> <DropdownItem name="useTemplate">导入模版</DropdownItem>
<DropdownItem name="down" disabled> <DropdownItem name="down">
<Icon <Icon type="md-cloud-download" class="mr10" />导出Excel
type="md-cloud-download" </DropdownItem>
class="mr10" <DropdownItem name="importExcel" disabled>
<Icon type="md-cloud-upload" class="mr10" />导入Excel
/>导出Excel</DropdownItem </DropdownItem>
> </DropdownMenu>
<DropdownItem name="importExcel" </Dropdown>
disabled </template>
><Icon </EditGrid>
type="md-cloud-upload"
class="mr10"
/>导入Excel</DropdownItem
>
</DropdownMenu>
</Dropdown>
</template>
</EditGrid>
</Card> </Card>
<Modal v-model="modal" :title="title" width="1200" footer-hide> <Modal v-model="modal" :title="title" width="1200" footer-hide>
<component <component :is="detail" :eid="curId" :v="row" @on-close="cancel" @on-ok="ok" />
:is="detail"
:eid="curId"
:v="row"
@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: "project_plan 10/19/2020 10:23:07 AM", description: "project_plan 10/19/2020 10:23:07 AM",
}, },
props: { props: {
eid: { eid: {
type: String, type: String,
},
data: {
type: Object,
default: () => {
return {
id: "33930562-a9f7-bd95-88ab-d01eb1c4c369",
title: "示例项目",
};
},
},
}, },
data: { data() {
type: Object,
default: () => {
return { return {
id: "33930562-a9f7-bd95-88ab-d01eb1c4c369", entity: {},
title: "示例项目", row: {},
action: Api.index,
easySearch: {
keys: {
op: "title",
value: null
},
},
modal: false,
title: "新增",
exportTl: '项目目录',
detail: null,
curId: null,
list: [],
columns: [{
key: "drag",
type: "drag",
width: 50,
align: 'center'
},
{
key: "upId",
width: 50,
type: "selection",
align: 'center'
},
{
key: "title",
title: this.l("title"),
align: "left",
tree: true,
easy: true,
high: true,
export: true,
},
{
key: "type",
width: 90,
title: this.l("type"),
align: "center",
high: true,
code: "mes.project_plan.Type",
attr: {
type: "icon",
},
export: true,
},
{
key: "direction",
title: this.l("direction"),
align: "center",
code: "mes.project_plan.direction",
width: 80,
easy: true,
high: true,
export: true,
},
{
key: "status",
title: this.l("status"),
align: "center",
width: 80,
high: true,
code: "mes.project_plan.Status",
export: true,
},
{
key: "startDate",
title: "计划开始日期",
hide: true,
export: true,
},
{
key: "endDate",
title: "计划结束日期",
hide: true,
export: true,
},
{
key: "dateRange",
width: 250,
title: "计划日期",
align: "center",
render(h, param) {
return h("DateRange", {
attrs: {
value: param.row,
},
});
},
},
{
key: "executor",
title: this.l("executor"),
align: "left",
high: true,
type: "users",
export: true,
},
{
key: "deliverable",
title: this.l("deliverable"),
code: "mes.project_plan.deliverable",
width: 80,
align: "center",
easy: true,
high: true,
export: true,
},
{
title: "操作",
key: "action",
width: 150,
align: "center",
render: (h, params) => {
return h("div", {
class: "action"
}, [
h("op", {
attrs: {
icon: "md-arrow-dropright-circle",
type: "icon",
title: "派发",
oprate: "edit",
disable: params.row.status != 0,
},
on: {
click: () => this.send(params.row)
},
}),
h("op", {
attrs: {
icon: "md-add",
type: "icon",
title: "新增子任务",
disable: params.row.status > 1,
oprate: "edit",
},
on: {
click: () => this.add(params.row)
},
}),
h("op", {
attrs: {
icon: "md-create",
type: "icon",
title: "编辑",
oprate: "edit",
disable: params.row.status !== 0,
},
on: {
click: () => this.edit(params.row)
},
}),
h("op", {
attrs: {
icon: "ios-trash",
type: "icon",
title: "删除",
oprate: "delete",
disable: params.row.status !== 0,
msg: "确认要删除吗？",
},
on: {
click: () => this.remove(params.row.id)
},
}),
]);
},
},
],
}; };
},
}, },
}, mounted() {
data() { console.log(this);
return { this.search();
entity: {}, },
row: {}, async fetch({
action: Api.index, store,
easySearch: { params
keys: { op: "title", value: null }, }) {
}, await store.dispatch("loadDictionary"); // 加载数据字典
modal: false, },
title: "新增", methods: {
detail: null, ok() {
curId: null, this.search();
list: [], this.modal = false;
columns: [ this.curId = null;
// { key:"id",title:this.$t("id") ,hide:true ,align:"left" ,high:true },
// { key:"creationTime",title:this.l("creationTime") ,align:"left" ,high:true },
// { key:"creatorUserId",title:this.l("creatorUserId") ,align:"left" ,high:true },
// { key:"lastModificationTime",title:this.l("lastModificationTime") ,align:"left" ,high:true },
// { key:"lastModifierUserId",title:this.l("lastModifierUserId") ,align:"left" ,high:true },
// { key:"isDeleted",title:this.l("isDeleted") ,align:"left" ,high:true },
// { key:"deletionTime",title:this.l("deletionTime") ,align:"left" ,high:true },
// { key:"deleterUserId",title:this.l("deleterUserId") ,align:"left" ,high:true },
// { key:"projectId",title:this.l("projectId") ,align:"left" ,high:true },
// { key:"upId",title:this.l("upId") ,align:"left" ,high:true },
// { type: "selection", width: 80, align: "center" },
{
key:"drag",
type:"drag",
width:50,
align:'center'
}, },
{ search() {
key: "upId", // this.$refs.grid.reload(this.easySearch);
width: 50, var params = {
type:"selection", conditions: [{
align:'center' fieldName: "projectId",
conditionalType: "Equal",
fieldValue: this.eid,
}, ],
// conditions: []
};
Api.list(params).then((r) => {
let res = r.result;
var data = this.$u.toTree(
res,
null,
(u) => {
// console.log(u);
u.expanded = true;
u.selected = false;
u.checked = false;
},
"upId"
);
this.list = data;
});
}, },
{ add(row) {
key: "title", if (row) {
title: this.l("title"), this.curId = row.id;
align: "left", this.row = row;
tree: true, } else {
easy: true, this.curId = null;
high: true, this.row = {
projectId: this.data.id,
};
}
this.title = "新增";
this.detail = () => import("./add");
this.modal = true;
}, },
{ send(row) {
key: "type", console.log(row);
width: 90, if (!row.startDate) {
title: this.l("type"), this.$Message.error("未设置开始时间");
align: "center", return;
high: true, }
code: "mes.project_plan.Type", if (!row.endDate) {
attr: { this.$Message.error("未设置结束时间");
type: "icon", return;
}, }
if (row.executor.length == 0) {
this.$Message.error("请设置执行人");
return;
}
delete row.chlidren;
delete row.parent;
console.warn(row);
row.status = 1;
Api.sendtask({
id: row.id,
status: 1,
}).then((r) => {
if (r.success) {
this.$Message.info("任务派发成功！");
this.search();
}
});
}, },
{ copy(id) {
key: "direction", this.curId = id;
title: this.l("direction"), this.title = "克隆";
align: "center", this.detail = () => import("./add");
code: "mes.project_plan.direction", this.modal = true;
width: 80,
easy: true,
high: true,
}, },
view(id) {
{ this.curId = id;
key: "status", this.title = "详情";
title: this.l("status"), this.detail = () => import("./detail");
align: "center", this.modal = true;
width: 80,
high: true,
code: "mes.project_plan.Status",
}, },
// { edit(row) {
// key: "startDate", this.curId = row.id;
// title: this.l("startDate"), this.row = row;
// align: "left", this.title = "编辑";
// high: true this.detail = () => import("./edit");
// ,type:"date" this.modal = true;
// },
// { key: "endDate", title: this.l("endDate"), align: "left", high: true,type:"date" },
{
key: "endDate",
width: 250,
title: "计划日期",
align: "center",
render(h, param) {
return h("DateRange", {
attrs: {
value: param.row,
},
});
},
}, },
// { remove(id) {
// key: "attachment", Api.delete(id).then((r) => {
// title: this.l("attachment"), if (r.success) {
// align: "left", this.search();
// high: true, this.$Message.success("删除成功");
// }, }
{ });
key: "executor",
title: this.l("executor"),
align: "left",
high: true,
type: "users",
}, },
{ cancel() {
key: "deliverable", this.curId = null;
title: this.l("deliverable"), this.modal = false;
code: "mes.project_plan.deliverable",
width: 80,
align: "center",
easy: true,
high: true,
}, },
{ show(name) {
title: "操作", var that = this;
key: "action", var m = {
width: 150, saveTemplate(name) {
align: "center", that.curId = that.eid;
// render:(h,params)=>{ that.row = that.data;
// return h("Actions" that.title = "保存模版";
// ,{ that.detail = () => import("./saveTemplate");
// attrs:{ that.modal = true;
// row:params,
// },
// on:{
// 'on-click':this.rowclick
// }
// }
// )
// }
render: (h, params) => {
return h("div", { class: "action" }, [
h("op", {
attrs: {
icon: "md-arrow-dropright-circle",
type: "icon",
title: "派发",
oprate: "edit",
disable: params.row.status != 0,
},
on: { click: () => this.send(params.row) },
}),
h("op", {
attrs: {
icon: "md-add",
type: "icon",
title: "新增子任务",
disable: params.row.status > 1,
oprate: "edit",
}, },
on: { click: () => this.add(params.row) }, useTemplate(name) {
}), that.curId = that.eid;
h("op", { that.row = that.data;
attrs: { that.title = "导入模版";
icon: "md-create", that.detail = () => import("./importTemplate");
type: "icon", that.modal = true;
title: "编辑",
oprate: "edit",
disable: params.row.status !== 0,
}, },
on: { click: () => this.edit(params.row) }, }
}), if (name == 'down') {
h("op", { this.exportTl = '项目目录-' + this.data.title;
attrs: { this.$refs.grid.export2Excel()
icon: "ios-trash", }
type: "icon", m[name] && m[name](name);
title: "删除",
oprate: "delete",
disable: params.row.status !== 0,
msg: "确认要删除吗？",
},
on: { click: () => this.remove(params.row.id) },
}),
]);
},
},
],
};
},
mounted() {
console.log(this);
this.search();
},
async fetch({ store, params }) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
methods: {
ok() {
this.search();
this.modal = false;
this.curId = null;
},
search() {
// this.$refs.grid.reload(this.easySearch);
var params = {
conditions: [
{
fieldName: "projectId",
conditionalType: "Equal",
fieldValue: this.eid,
},
],
// conditions: []
};
Api.list(params).then((r) => {
let res = r.result;
var data = this.$u.toTree(
res,
null,
(u) => {
// console.log(u);
u.expanded = true;
u.selected = false;
u.checked = false;
},
"upId"
);
this.list = data;
});
},
add(row) {
if (row) {
this.curId = row.id;
this.row = row;
} else {
this.curId = null;
this.row = {
projectId: this.data.id,
};
}
this.title = "新增";
this.detail = () => import("./add");
this.modal = true;
},
send(row) {
console.log(row);
if (!row.startDate) {
this.$Message.error("未设置开始时间");
return;
}
if (!row.endDate) {
this.$Message.error("未设置结束时间");
return;
}
if (row.executor.length == 0) {
this.$Message.error("请设置执行人");
return;
}
delete row.chlidren;
delete row.parent;
console.warn(row);
row.status = 1;
Api.sendtask({
id: row.id,
status: 1,
}).then((r) => {
if (r.success) {
this.$Message.info("任务派发成功！");
this.search();
}
});
},
copy(id) {
this.curId = id;
this.title = "克隆";
this.detail = () => import("./add");
this.modal = true;
},
view(id) {
this.curId = id;
this.title = "详情";
this.detail = () => import("./detail");
this.modal = true;
},
edit(row) {
this.curId = row.id;
this.row = row;
this.title = "编辑";
this.detail = () => import("./edit");
this.modal = true;
},
remove(id) {
Api.delete(id).then((r) => {
if (r.success) {
this.search();
this.$Message.success("删除成功");
}
});
},
cancel() {
this.curId = null;
this.modal = false;
},
show(name){
var that=this;
var m= {
saveTemplate(name){
that.curId = that.eid;
that.row = that.data;
that.title = "保存模版";
that.detail = () => import("./saveTemplate");
that.modal = true;
}, },
useTemplate(name){ l(key) {
that.curId = that.eid; let vkey = "project_plan" + "." + key;
that.row = that.data; return this.$t(vkey) || key;
that.title = "导入模版"; },
that.detail = () => import("./importTemplate");
that.modal = true;
}
}
m[name]&&m[name](name);
},
l(key) {
let vkey = "project_plan" + "." + key;
return this.$t(vkey) || key;
}, },
},
}; };
</script> </script>
<style lang="less"> <style lang="less">
</style> </style>
\ No newline at end of file
pages/test/test2.vue
View file @ 780421a2
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</div> </div>
<div class="mt50 pl10"> <div class="mt50 pl10">
<h2>Bmenu</h2> <h2>Bmenu</h2>
<div @contextmenu="showBmenu" class="tc" style="width:120px;height:40px;line-height:40px;background:#f5f5f5;border:#ccc solid 1px; border-radius: 5px;">{{message}}</div> <div @contextmenu="onCon" class="tc" style="width:120px;height:40px;line-height:40px;background:#f5f5f5;border:#ccc solid 1px; border-radius: 5px;">{{message}}</div>
</div> </div>
</div> </div>
</template> </template>
......
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