Skip to content

M
mes-ui
Commit 736da3b1 authored by 骆瑛's avatar 骆瑛
Browse files
Options

页面组件化

parent 4bd186e6
Hide whitespace changes
Inline Side-by-side
Showing with 2009 additions and 1211 deletions
components/page/treeGrid/columnSolt.js 0 → 100644
View file @ 736da3b1
export default {
name: 'ColumnSlot',
functional: true,
inject: ['tableRoot'],
props: {
row: Object,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, ctx) => {
return h('span', ctx.injections.tableRoot()[ctx.props.column.slot]({
row: ctx.props.row,
column: ctx.props.column,
index: ctx.props.index
}));
}
};
\ No newline at end of file
components/page/treeGrid/index.vue
View file @ 736da3b1
<template> <template>
<div class="treeTbale"> <div class="treeTbale">
<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>
<table> <table>
<thead> <thead>
<tr> <tr>
<th v-for="(column,index) in cloneColumns" :key="index" v-if="column.hide!=true"> <th v-for="(column, index) in cloneColumns" :key="index">
<label v-if="column.type === 'selection'"> <label v-if="column.type === 'selection'">
<input type="checkbox" v-model="checks" @click="handleCheckAll" />全选 <Checkbox v-model="all"></Checkbox>
</label> </label>
<label v-else> <label v-else>
{{ renderHeader(column, index) }} {{ renderHeader(column, index) }}
<span class="ivu-table-sort" v-if="column.sortable"> <span class="ivu-table-sort" v-if="column.sortable">
<Icon type="arrow-up-b" :class="{on: column._sortType === 'asc'}" @click.native="handleSort(index, 'asc')" /> <Icon
<Icon type="arrow-down-b" :class="{on: column._sortType === 'desc'}" @click.native="handleSort(index, 'desc')" /> type="arrow-up-b"
</span> :class="{ on: column._sortType === 'asc' }"
</label> @click.native="handleSort(index, 'asc')"
</th> />
</tr> <Icon
</thead> type="arrow-down-b"
<tbody> :class="{ on: column._sortType === 'desc' }"
<tr v-for="(item,index) in initItems" :key="item.id" v-show="show(item)" class="treetr" :class="{'child-tr':item.parent}"> @click.native="handleSort(index, 'desc')"
<td v-for="(column,snum) in columns" :key="column.key" :style="tdStyle(column)"> />
<!-- <label> </span>
<input </label>
v-if="column.type === 'selection'" </th>
type="checkbox" </tr>
:value="item.id" </thead>
v-model="checkGroup" <tbody>
@click="handleCheckClick(item,$event,index)" <tr
/> v-for="(item, index) in initItems"
</label>--> :key="item.id"
<!-- 图标 --> v-show="show(item)"
<div v-if="column.type === 'icon'"> class="treetr"
<i class="icon-set" size="small" @click="RowClick(item,$event,index,action.text)" v-for="action in (column.actions)" :key="action.text"> :draggable="drag"
<Icon :type="action.type" :title="action.text" :style="action.style" /> @dragstart="dragstart($event, index, item)"
</i> @dragover="dragover($event, index, item)"
</div> @drop="dragdrop($event, index, item)"
<div v-if="column.type === 'icons'"> >
<Icon :type="item[column.key]" size="20" /> <td
</div> v-for="(column, snum) in columns"
<state v-if="column.code" :code="column.code" :value="item[column.key]" /> :key="column.key"
<!-- 操作 --> :style="tdStyle(column)"
<div v-if="column.type === 'action'" class="action" style="text-align:left;"> >
<op v-for="action in (column.actions)" :key="action.text" @click="RowClick(item,$event,index,action.text)" :type="action.type" size="small" style=" margin:0 5px;" :class="action.text=='删除'? 'remove' : (action.text=='新增' ? 'add': (action.text=='编辑' ?'edit':''))" v-show="(item.type=='3'&&action.text=='新增')||(item.children.length>0&&action.text=='删除')?false:true">{{action.text}}</op> <!-- 多选 -->
</div> <label v-if="column.type === 'selection'" @click="handleCheckClick(item, $event, index)">
<!-- 类型 --> <Checkbox v-model="item.checked" ></Checkbox>
<div v-if="column.type === 'menuRender'" style="text-align:center;"> </label>
<Button :ghost="item[column.key] ==0 ?false:true" size="small" :type="item[column.key] ==0 ? 'default' :item[column.key] == 1 ? 'info' :item[column.key] == 2?'error':'warning'">{{item[column.key] == 0 ? '子系统':item[column.key] == 1 ? '目录': item[column.key] == 2 ? '菜单' : '按钮'}}</Button> <!-- 图标 -->
</div> <div v-if="column.type === 'icon'">
<!-- 状态 --> <i
<div v-if="column.type === 'menuIsshow'" style="text-align:center;"> class="icon-set"
<Button :ghost="item[column.key] == 1 ? true :false" :disabled="item[column.key] == 1 ? false :true" size="small" :type="item[column.key] == 1 ? 'info' :'default'">{{item[column.key] == 1 ? '显示': '隐藏'}}</Button> size="small"
</div> @click="RowClick(item, $event, index, action.text)"
<!-- 打开方式 --> v-for="action in column.actions"
<div v-if="column.type === 'menuTarget'"> :key="action.text"
<span :style="item[column.key] == 0?'color:#006699':item[column.key] == 1?'color:black':''">{{item[column.key] == 0 ? '本页面': item[column.key] == 1?'新页面':''}}</span> >
</div> <Icon
<!-- 菜单名称、排序、请求地址 --> :type="action.type"
<label @click="toggle(index,item)" v-if="!column.type&&!column.code&&!column.render"> :title="action.text"
<span v-if="snum==iconRow()"> :style="action.style"
<i v-html="item.spaceHtml"></i> />
<a v-if="item.children&&item.children.length>0"> </i>
<i class="ivu-icon" :class="{'ivu-icon-ios-arrow-forward':!item.expanded,'ivu-icon-ios-arrow-down':item.expanded }"></i> </div>
</a> <div v-if="column.type === 'icons'">
<Icon :type="item[column.key]" size="20" />
<i v-else class="ms-tree-space"></i> </div>
</span> <state
{{renderBody(item,column) }} v-if="column.code"
</label> :code="column.code"
<table-expand v-if="column.render&&!column.type" :row="item" :column="column" :index="snum" :render="column.render"></table-expand> :value="item[column.key]"
</td> />
</tr> <!-- 操作 -->
</tbody> <div
v-if="column.type === 'action'"
class="action"
style="text-align: left"
>
<op
v-for="action in column.actions"
:key="action.text"
@click="RowClick(item, $event, index, action.text)"
:type="action.type"
size="small"
style="margin: 0 5px"
:class="
action.text == '删除'
? 'remove'
: action.text == '新增'
? 'add'
: action.text == '编辑'
? 'edit'
: ''
"
v-show="
(item.type == '3' && action.text == '新增') ||
(item.children.length > 0 && action.text == '删除')
? false
: true
"
>{{ action.text }}</op
>
</div>
<!-- 类型 -->
<div v-if="column.type === 'menuRender'" style="text-align: center">
<Button
:ghost="item[column.key] == 0 ? false : true"
size="small"
:type="
item[column.key] == 0
? 'default'
: item[column.key] == 1
? 'info'
: item[column.key] == 2
? 'error'
: 'warning'
"
>{{
item[column.key] == 0
? "子系统"
: item[column.key] == 1
? "目录"
: item[column.key] == 2
? "菜单"
: "按钮"
}}</Button
>
</div>
<!-- 状态 -->
<div v-if="column.type === 'menuIsshow'" style="text-align: center">
<Button
:ghost="item[column.key] == 1 ? true : false"
:disabled="item[column.key] == 1 ? false : true"
size="small"
:type="item[column.key] == 1 ? 'info' : 'default'"
>{{ item[column.key] == 1 ? "显示" : "隐藏" }}</Button
>
</div>
<!-- 打开方式 -->
<div v-if="column.type === 'menuTarget'">
<span
:style="
item[column.key] == 0
? 'color:#006699'
: item[column.key] == 1
? 'color:black'
: ''
"
>{{
item[column.key] == 0
? "本页面"
: item[column.key] == 1
? "新页面"
: ""
}}</span
>
</div>
<!-- 树图标 -->
<span @click="toggle(index, item)" v-if="snum == iconRow()">
<i v-html="item.spaceHtml"></i>
<a v-if="item.children && item.children.length > 0">
<i
class="ivu-icon"
:class="{
'ivu-icon-ios-arrow-forward': !item.expanded,
'ivu-icon-ios-arrow-down': item.expanded,
}"
></i> </a
><i v-else class="ms-tree-space"></i>
</span>
<!-- 菜单名称、排序、请求地址 -->
<label
v-if="
!column.type && !column.code && !column.render && !column.slot
"
>
{{ renderBody(item, column) }}
</label>
<table-expand
v-if="column.render && !column.type && !column.solt"
:row="item"
:column="column"
:index="snum"
:render="column.render"
></table-expand>
<column-slot
v-if="column.slot"
:row="item"
:column="column"
:index="snum"
></column-slot>
</td>
</tr>
</tbody>
</table> </table>
</div> </div>
</template> </template>
<script> <script>
import TableExpand from './expand' import TableExpand from "./expand";
import ColumnSlot from "./columnSolt";
export default { export default {
name: 'treeGrid', name: "treeGrid",
components: { components: { TableExpand, ColumnSlot },
TableExpand props: {
}, columns: Array,
props: { items: {
columns: Array, type: Array,
items: { default() {
type: Array, return [];
default () { },
return []
}
},
iconName: false
},
data() {
return {
color: '#19be6b',
initItems: [], // 处理后数据数组
cloneColumns: [], // 处理后的表头数据
checkGroup: [], // 复选框数组
checks: false, // 全选
screenWidth: document.body.clientWidth, // 自适应宽
tdsWidth: 0, // td总宽
timer: false, // 控制监听时长
dataLength: 0 // 树形数据长度
}
}, },
computed: { iconName: false,
tableWidth() { drag:{
return this.tdsWidth > this.screenWidth && this.screenWidth > 0 ? type:Boolean,
`${this.screenWidth}px` : default:false
'100%'
}
}, },
watch: { spaceWidth:{
screenWidth(val) { type:Number,
if (!this.timer) { default:20
this.screenWidth = val }
this.timer = true },
setTimeout(() => { provide() {
this.timer = false return {
}, 400) tableRoot: this.slots,
} };
}, },
items() { data() {
if (this.items) { return {
this.initItems = [] color: "#19be6b",
this.dataLength = this.Length(this.items) all:true,
this.initData(this.deepCopy(this.items), 1, null) initItems: [], // 处理后数据数组
this.checkGroup = this.renderCheck(this.items) cloneColumns: [], // 处理后的表头数据
if (this.checkGroup.length == this.dataLength) { checkGroup: [], // 复选框数组
this.checks = true checks: false, // 全选
} else { screenWidth: document.body.clientWidth, // 自适应宽
this.checks = false tdsWidth: 0, // td总宽
} timer: false, // 控制监听时长
} dataLength: 0, // 树形数据长度
}, dragIndex:-1,//拖拽开始的序号
columns: { };
handler() { },
this.cloneColumns = this.makeColumns() computed: {
}, tableWidth() {
deep: true return this.tdsWidth > this.screenWidth && this.screenWidth > 0
}, ? `${this.screenWidth}px`
checkGroup(data) { : "100%";
this.checkAllGroupChange(data) },
},
watch: {
screenWidth(val) {
if (!this.timer) {
this.screenWidth = val;
this.timer = true;
setTimeout(() => {
this.timer = false;
}, 400);
}
},
items() {
if (this.items) {
this.initItems = [];
this.dataLength = this.Length(this.items);
this.initData(this.deepCopy(this.items), 1, null);
this.checkGroup = this.renderCheck(this.items);
if (this.checkGroup.length == this.dataLength) {
this.checks = true;
} else {
this.checks = false;
} }
}
}, },
mounted() { columns: {
if (this.items) { handler() {
this.dataLength = this.Length(this.items) this.cloneColumns = this.makeColumns();
this.initData(this.deepCopy(this.items), 1, null) },
this.cloneColumns = this.makeColumns() deep: true,
this.checkGroup = this.renderCheck(this.items) },
if (this.checkGroup.length == this.dataLength) { checkGroup(data) {
this.checks = true this.checkAllGroupChange(data);
} else { },
this.checks = false },
} mounted() {
console.warn("treegrid", this.$scopedSlots);
if (this.items) {
this.dataLength = this.Length(this.items);
this.initData(this.deepCopy(this.items), 1, null);
this.cloneColumns = this.makeColumns();
this.checkGroup = this.renderCheck(this.items);
if (this.checkGroup.length == this.dataLength) {
this.checks = true;
} else {
this.checks = false;
}
}
// 绑定onresize事件 监听屏幕变化设置宽
this.$nextTick(() => {
this.screenWidth = document.body.clientWidth;
});
window.onresize = () =>
(() => {
window.screenWidth = document.body.clientWidth;
this.screenWidth = window.screenWidth;
})();
},
methods: {
slots() {
return this.$scopedSlots;
},
//拖拽
dragstart(e,index, row ) {
this.dragIndex=index;
console.log(index)
},
dragover(e,index, row ) {
e.preventDefault();
},
dragdrop(e,index, row ) {
event.preventDefault();
this.$emit("on-drag-drop",this.dragIndex,index,this.initItems)
},
// 有无多选框折叠位置优化
iconRow() {
var num = 0;
for (let i = 0, len = this.columns.length; i < len; i++) {
if (this.columns[i].tree) {
num = i;
} }
// 绑定onresize事件 监听屏幕变化设置宽 }
this.$nextTick(() => { return num;
this.screenWidth = document.body.clientWidth },
}) // 设置td宽度,td的align
window.onresize = () => tdStyle(column) {
(() => { const style = {};
window.screenWidth = document.body.clientWidth if (column.align) {
this.screenWidth = window.screenWidth style["text-align"] = column.align;
})() }
}, if (column.width) {
methods: { style["width"] = `${column.width}px`;
// 有无多选框折叠位置优化 }
iconRow() { return style;
for (let i = 0, len = this.columns.length; i < len; i++) { },
if (this.columns[i].type == 'selection') {
return 1
}
}
return 0
},
// 设置td宽度,td的align
tdStyle(column) {
const style = {}
if (column.align) {
style['text-align'] = column.align
}
if (column.width) {
style['width'] = `${column.width}px`
}
if (column.hide == true) {
style['display'] = `none`
}
return style
},
// 排序事件
handleSort(index, type) {
this.cloneColumns.forEach((col) => (col._sortType = 'normal'))
if (this.cloneColumns[index]._sortType === type) {
this.cloneColumns[index]._sortType = 'normal'
} else {
this.cloneColumns[index]._sortType = type
}
this.$emit(
'on-sort-change',
this.cloneColumns[index].key,
this.cloneColumns[index]._sortType
)
},
// 点击某一行事件
RowClick(data, event, index, text) {
// this.iconName = true;
const result = this.makeData(data)
this.$emit('on-row-click', result, event, index, text)
},
//点击图标
RowClickIcon(event, index, text) {
this.$emit('on-icon-click', event, index, text)
},
//修改排序
updataOrderNum(data, event, index, text) {
//console.log(event.id + "kkkkkkkkkk");
// console.log(event.orderNum + "nnnnnnnn");
var data = {
id: event.id,
orderNum: event.orderNum
}
this.updata(data)
},
//修改颜色
updataColor(data, event, index, text) {
//console.log(event.id + "kkkkkkkkkk");
//console.log(event.color + "nnnnnnnn");
var data = {
id: event.id,
color: event.color
}
this.updata(data)
},
//修改单个字段
updata(data) {
this.$http.dic
.dicUpdate(data)
.then((res) => {
this.$Message.success(res.msg)
this.$parent.getInfo()
})
.catch((error) => {
this.$Message.error(error.msg)
})
},
// 点击事件 返回数据处理
makeData(data) {
const t = this.type(data)
let o
if (t === 'array') {
o = []
} else if (t === 'object') {
o = {}
} else {
return data
}
if (t === 'array') { // 排序事件
for (let i = 0; i < data.length; i++) { handleSort(index, type) {
o.push(this.makeData(data[i])) this.cloneColumns.forEach((col) => (col._sortType = "normal"));
} if (this.cloneColumns[index]._sortType === type) {
} else if (t === 'object') { this.cloneColumns[index]._sortType = "normal";
for (const i in data) { } else {
if ( this.cloneColumns[index]._sortType = type;
i != 'spaceHtml' && }
i != 'parent' && this.$emit(
i != 'level' && "on-sort-change",
i != 'expanded' && this.cloneColumns[index].key,
i != 'isShow' && this.cloneColumns[index]._sortType
i != 'load' );
) { },
o[i] = this.makeData(data[i]) // 点击某一行事件
} RowClick(data, event, index, text) {
} // this.iconName = true;
} const result = this.makeData(data);
return o this.$emit("on-row-click", result, event, index, text);
}, },
// 处理表头数据 //点击图标
makeColumns() { RowClickIcon(event, index, text) {
const columns = this.deepCopy(this.columns) this.$emit("on-icon-click", event, index, text);
this.tdsWidth = 0 },
columns.forEach((column, index) => { //修改排序
column._index = index updataOrderNum(data, event, index, text) {
column._width = column.width ? column.width : '' //console.log(event.id + "kkkkkkkkkk");
column._sortType = 'normal' // console.log(event.orderNum + "nnnnnnnn");
this.tdsWidth += column.width ? parseFloat(column.width) : 0 var data = {
}) id: event.id,
return columns orderNum: event.orderNum,
}, };
// 数据处理 增加自定义属性监听 this.updata(data);
initData(items, level, parent) { },
// this.initItems = [] //修改颜色
let spaceHtml = '' updataColor(data, event, index, text) {
for (let i = 1; i < level; i++) { //console.log(event.id + "kkkkkkkkkk");
spaceHtml += //console.log(event.color + "nnnnnnnn");
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class='ms-tree-space'></i>" var data = {
} id: event.id,
items.forEach((item, index) => { color: event.color,
item = Object.assign({}, item, { };
parent, this.updata(data);
level, },
spaceHtml //修改单个字段
}) updata(data) {
if (typeof item.expanded === 'undefined') { this.$http.dic
item = Object.assign({}, item, { .dicUpdate(data)
expanded: true .then((res) => {
}) this.$Message.success(res.msg);
} this.$parent.getInfo();
if (typeof item.show === 'undefined') { })
item = Object.assign({}, item, { .catch((error) => {
isShow: true this.$Message.error(error.msg);
}) });
} },
if (typeof item.isChecked === 'undefined') { // 点击事件 返回数据处理
item = Object.assign({}, item, { makeData(data) {
isChecked: false const t = this.type(data);
}) let o;
} if (t === "array") {
item = Object.assign({}, item, { o = [];
load: !!item.expanded } else if (t === "object") {
}) o = {};
this.initItems.push(item) } else {
if (item.children && item.expanded) { return data;
this.initData(item.children, level + 1, item) }
}
items.splice(index, 1, item)
})
},
// 隐藏显示
show(item) {
return (
item.level == 1 || (item.parent && item.parent.expanded && item.isShow)
)
},
toggle(index, item) {
const level = item.level + 1
let spaceHtml = ''
for (let i = 1; i < level; i++) {
spaceHtml += "<i class='ms-tree-space'></i>"
}
if (item.children) {
if (item.expanded) {
item.expanded = !item.expanded
this.close(index, item)
} else {
item.expanded = !item.expanded
if (item.load) {
this.open(index, item)
} else {
item.load = true
item.children.forEach((child, childIndex) => {
this.initItems.splice(index + childIndex + 1, 0, child)
// 设置监听属性
this.$set(this.initItems[index + childIndex + 1], 'parent', item)
this.$set(this.initItems[index + childIndex + 1], 'level', level)
this.$set(
this.initItems[index + childIndex + 1],
'spaceHtml',
spaceHtml
)
this.$set(this.initItems[index + childIndex + 1], 'isShow', true)
this.$set(
this.initItems[index + childIndex + 1],
'expanded',
false
)
})
}
}
}
},
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节点 如果有就一并勾选
handleCheckClick(data, event, index) {
data.isChecked = !data.isChecked
const arr = data.children
if (arr) {
if (data.isChecked) {
this.checkGroup.push(data.id)
for (let i = 0; i < arr.length; i++) {
this.checkGroup.push(arr[i].id)
}
} else {
for (let i = 0; i < this.checkGroup.length; i++) {
if (this.checkGroup[i] == data.id) {
this.checkGroup.splice(i, 1)
}
for (let j = 0; j < arr.length; j++) {
if (this.checkGroup[i] == arr[j].id) {
this.checkGroup.splice(i, 1)
}
}
}
}
}
},
// checkbox 全选 选择事件
handleCheckAll() {
this.checks = !this.checks
if (this.checks) {
this.checkGroup = this.getArray(
this.checkGroup.concat(this.All(this.items))
)
} else {
this.checkGroup = []
}
// 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
},
// 返回树形数据长度
Length(data) {
let {
length
} = data
data.forEach((child) => {
if (child.children) {
length += this.Length(child.children)
}
})
return length
},
// 返回表头
renderHeader(column, $index) {
if ('renderHeader' in this.columns[$index]) {
return this.columns[$index].renderHeader(column, $index)
}
return column.title || '#'
},
// 返回内容 if (t === "array") {
renderBody(row, column, index) { for (let i = 0; i < data.length; i++) {
return row[column.key] o.push(this.makeData(data[i]));
}, }
// 默认选中 } else if (t === "object") {
renderCheck(data) { for (const i in data) {
let arr = [] if (
data.forEach((item) => { i != "spaceHtml" &&
if (item._checked) { i != "parent" &&
arr.push(item.id) i != "level" &&
} i != "expanded" &&
if (item.children && item.children.length > 0) { i != "isShow" &&
arr = arr.concat(this.renderCheck(item.children)) i != "load"
} ) {
}) o[i] = this.makeData(data[i]);
return arr }
}, }
// 深度拷贝函数 }
deepCopy(data) { return o;
const t = this.type(data) },
let o // 处理表头数据
let i makeColumns() {
let ni const columns = this.deepCopy(this.columns);
if (t === 'array') { this.tdsWidth = 0;
o = [] columns.forEach((column, index) => {
} else if (t === 'object') { column._index = index;
o = {} column._width = column.width ? column.width : "";
} else { column._sortType = "normal";
return data this.tdsWidth += column.width ? parseFloat(column.width) : 0;
} });
if (t === 'array') { return columns;
for (i = 0, ni = data.length; i < ni; i++) { },
o.push(this.deepCopy(data[i])) // 数据处理 增加自定义属性监听
} initData(items, level, parent) {
return o // this.initItems = []
} let spaceHtml = "<i class='ms-tree-space' style='width:"+this.spaceWidth*level+"px'></i>";
if (t === 'object') { items.forEach((item, index) => {
for (i in data) { item = Object.assign({}, item, {
o[i] = this.deepCopy(data[i]) parent,
} level,
return o spaceHtml,
});
if (typeof item.expanded === "undefined") {
item = Object.assign({}, item, {
expanded: true,
});
}
if (typeof item.show === "undefined") {
item = Object.assign({}, item, {
isShow: true,
});
}
if (typeof item.isChecked === "undefined") {
item = Object.assign({}, item, {
isChecked: false,
});
}
item = Object.assign({}, item, {
load: !!item.expanded,
});
this.initItems.push(item);
if (item.children && item.expanded) {
this.initData(item.children, level + 1, item);
}
items.splice(index, 1, item);
});
},
// 隐藏显示
show(item) {
return (
item.level == 1 || (item.parent && item.parent.expanded && item.isShow)
);
},
toggle(index, item) {
const level = item.level + 1;
let spaceHtml = "";
for (let i = 1; i < level; i++) {
spaceHtml += "<i class='ms-tree-space'></i>";
}
if (item.children) {
if (item.expanded) {
item.expanded = !item.expanded;
this.close(index, item);
} else {
item.expanded = !item.expanded;
if (item.load) {
this.open(index, item);
} else {
item.load = true;
item.children.forEach((child, childIndex) => {
this.initItems.splice(index + childIndex + 1, 0, child);
// 设置监听属性
this.$set(this.initItems[index + childIndex + 1], "parent", item);
this.$set(this.initItems[index + childIndex + 1], "level", level);
this.$set(
this.initItems[index + childIndex + 1],
"spaceHtml",
spaceHtml
);
this.$set(this.initItems[index + childIndex + 1], "isShow", true);
this.$set(
this.initItems[index + childIndex + 1],
"expanded",
false
);
});
}
}
}
},
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节点 如果有就一并勾选
handleCheckClick(data, event, index) {
data.isChecked = !data.isChecked;
const arr = data.children;
if (arr) {
if (data.isChecked) {
this.checkGroup.push(data.id);
for (let i = 0; i < arr.length; i++) {
this.checkGroup.push(arr[i].id);
}
} else {
for (let i = 0; i < this.checkGroup.length; i++) {
if (this.checkGroup[i] == data.id) {
this.checkGroup.splice(i, 1);
} }
}, for (let j = 0; j < arr.length; j++) {
type(obj) { if (this.checkGroup[i] == arr[j].id) {
const { this.checkGroup.splice(i, 1);
toString }
} = Object.prototype
const map = {
'[object Boolean]': 'boolean',
'[object Number]': 'number',
'[object String]': 'string',
'[object Function]': 'function',
'[object Array]': 'array',
'[object Date]': 'date',
'[object RegExp]': 'regExp',
'[object Undefined]': 'undefined',
'[object Null]': 'null',
'[object Object]': 'object'
} }
return map[toString.call(obj)] }
} }
}
}, },
beforeDestroy() { // checkbox 全选 选择事件
window.onresize = null handleCheckAll() {
} this.checks = !this.checks;
} if (this.checks) {
</script> this.checkGroup = this.getArray(
this.checkGroup.concat(this.All(this.items))
<style lang="less"> );
.treeTbale { } else {
overflow: 0 auto; this.checkGroup = [];
width: 100% !important; }
// this.$emit('on-selection-change', this.checkGroup)
.table-tools { },
line-height: 40px; // 数组去重
getArray(a) {
.table-search { const hash = {};
float: left; const len = a.length;
line-height: 40px; const result = [];
min-width: 300px; for (let i = 0; i < len; i++) {
if (!hash[a[i]]) {
hash[a[i]] = true;
result.push(a[i]);
} }
}
.btns { return result;
float: right; },
line-height: 40px; 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));
} }
});
tr:hover { return arr;
background: #f7f7f7; },
// 返回树形数据长度
Length(data) {
let { length } = data;
data.forEach((child) => {
if (child.children) {
length += this.Length(child.children);
} }
} });
return length;
.icon-set { },
font-size: 17px; // 返回表头
margin-left: 5px; renderHeader(column, $index) {
display: inline-block; if ("renderHeader" in this.columns[$index]) {
} return this.columns[$index].renderHeader(column, $index);
}
.icon-set .ivu-icon { return column.title || "#";
cursor: pointer; },
}
table {
border-spacing: 0;
border-collapse: collapse;
margin: 0 auto;
width: 100%;
th { // 返回内容
background: #f8f8f9; 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) {
td, arr = arr.concat(this.renderCheck(item.children));
th {
border: #dcdee2 solid 1px;
line-height: 40px;
padding: 0 5px;
} }
});
tr.treetr:hover td { return arr;
background: #f7f7f7; },
// 深度拷贝函数
deepCopy(data) {
const t = this.type(data);
let o;
let i;
let ni;
if (t === "array") {
o = [];
} else if (t === "object") {
o = {};
} else {
return data;
}
if (t === "array") {
for (i = 0, ni = data.length; i < ni; i++) {
o.push(this.deepCopy(data[i]));
} }
return o;
.ms-tree-space { }
position: relative; if (t === "object") {
top: 1px; for (i in data) {
display: inline-block; o[i] = this.deepCopy(data[i]);
font-style: normal;
font-weight: 400;
line-height: 1;
width: 14px;
height: 14px;
} }
return o;
}
},
type(obj) {
const { toString } = Object.prototype;
const map = {
"[object Boolean]": "boolean",
"[object Number]": "number",
"[object String]": "string",
"[object Function]": "function",
"[object Array]": "array",
"[object Date]": "date",
"[object RegExp]": "regExp",
"[object Undefined]": "undefined",
"[object Null]": "null",
"[object Object]": "object",
};
return map[toString.call(obj)];
},
},
beforeDestroy() {
window.onresize = null;
},
};
</script>
<style lang="less">
.treeTbale {
overflow: 0 auto;
width: 100% !important;
.table-tools {
line-height: 40px;
// background: @right-header-bg;
.table-search {
float: left;
line-height: 40px;
min-width: 300px;
}
.btns {
float: right;
line-height: 40px;
}
tr:hover {
background: #f7f7f7;
}
}
.icon-set {
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%;
th {
background: #f8f8f9;
}
td,
th {
border: #dcdee2 solid 1px;
line-height: 40px;
padding: 0 5px;
}
tr.treetr:hover td {
background: #f7f7f7;
}
.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/system/project/atom/add.vue
View file @ 736da3b1
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<Input v-model="entity.englishName"> </Input> <Input v-model="entity.englishName"> </Input>
</FormItem> </FormItem>
</Col> </Col>
<Col :span="12" <Col :span="12"
><FormItem :label="l('code')" prop="code"> ><FormItem :label="l('code')" prop="code">
<Input v-model="entity.code"> </Input> </FormItem <Input v-model="entity.code"> </Input> </FormItem
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
><FormItem :label="l('version')" prop="version"> ><FormItem :label="l('version')" prop="version">
<InputNumber v-model="entity.version"></InputNumber> </FormItem <InputNumber v-model="entity.version"></InputNumber> </FormItem
></Col> ></Col>
<Col :span="12"> <Col :span="12">
<FormItem :label="l('status')" prop="status"> <FormItem :label="l('status')" prop="status">
<Dictionary <Dictionary
code="base.project_atom.status" code="base.project_atom.status"
...@@ -54,25 +54,27 @@ ...@@ -54,25 +54,27 @@
></Input> </FormItem ></Input> </FormItem
></Col> ></Col>
</Row> </Row>
<Col :span="24"> <Row>
<Row type="flex" justify="center" align="middle"> <Col :span="24">
<div class="textIcon" @click="upClick(upDrop)"> <Row type="flex" justify="center" align="middle">
<Icon :type="iconType" />{{ textUp }} <div class="textIcon" @click="upClick(upDrop)">
</div> <Icon :type="iconType" />{{ textUp }}
</Row> </div>
<Row style="margin-top: 10px"> <Divider orientation="left">扩展属性</Divider>
<Tabs> </Row>
<TabPane label="实体定义" name="base"> </TabPane> <Row style="margin-top: 10px">
<TabPane <Tabs>
v-for="tab in content.dtos" <TabPane label="实体定义" name="base"> </TabPane>
:key="tab.code" <!-- <TabPane
:label="tab.name" v-for="tab in dtos"
> :key="tab.code"
</TabPane> :label="tab.name"
<!-- <Button @click="modal1 = true" size="small" slot="extra" >
</TabPane> -->
<!-- <Button @click="modal1 = true" size="small" slot="extra"
>增加</Button >增加</Button
> --> > -->
<!-- <Modal <!-- <Modal
v-model="modal1" v-model="modal1"
title="增加" title="增加"
@on-ok="okModal('formline')" @on-ok="okModal('formline')"
...@@ -102,203 +104,178 @@ ...@@ -102,203 +104,178 @@
</p> </p>
</Form> </Form>
</Modal> --> </Modal> -->
</Tabs> </Tabs>
</Row>
<Row>
<Row style="margin-bottom: 10px" :gutter="10">
<Col :span="6">
<AutoComplete
v-model="completeValue"
icon="ios-search"
placeholder="请搜索"
style="width: 100%"
>
<Option
v-for="option in completeList"
:value="option.name"
:key="option.id"
>
<span class="demo-auto-complete-title">{{
option.name
}}</span>
<span class="demo-auto-complete-count" style="float: right">{{
option.code
}}</span>
</Option>
</AutoComplete>
</Col>
<Col :span="2">
<Button type="primary" @click="importColumns">导入</Button>
</Col>
</Row> </Row>
<Table <Row>
:columns="columns1" <Row style="margin-bottom: 10px" :gutter="10">
:data="checkList" <Col :span="6">
border <AutoComplete
:draggable="true" v-model="completeValue"
@on-drag-drop="onDragDrop" icon="ios-search"
> placeholder="请搜索"
<template slot-scope="{ row, index }" slot="columnDescription"> style="width: 100%"
<Input >
v-on:input="onIpnt(row, index)" <Option
v-model="row.columnDescription" v-for="option in completeList"
@on-change="setRow(row, index)" :value="option.name"
placeholder="请输入" :key="option.id"
/> >
</template> <span class="demo-auto-complete-title">{{
<template slot-scope="{ row, index }" slot="dataType"> option.name
<Dictionary }}</span>
@on-change="setRow(row, index)" <span
v-model="row.dataType" class="demo-auto-complete-count"
code="materail.category.dataType" style="float: right"
type="select" >{{ option.code }}</span
:value="row.dataType" >
:key="row.dataType" </Option>
></Dictionary> </AutoComplete>
</template> </Col>
<template slot-scope="{ row, index }" slot="propertyName"> <Col :span="2">
<Input <Button type="primary" @click="importColumns">导入</Button>
v-on:input="onIpnt(row, index)" </Col>
v-model="row.propertyName" </Row>
@on-change="setRow(row, index)" <Table
placeholder="请输入" :columns="columns1"
/> :data="checkList"
</template> border
<template slot-scope="{ row, index }" slot="code"> :draggable="true"
<Input @on-drag-drop="onDragDrop"
@on-change="setRow(row, index)" >
v-model="row.code" <template slot-scope="{ row, index }" slot="columnDescription">
:disabled="row.dataType != 3 && row.dataType != 10" <Input
placeholder="请输入" v-model="row.columnDescription"
/> @on-change="setRow(row, index)"
</template> placeholder="请输入"
<template slot-scope="{ row, index }" slot="isNullable"> />
<Checkbox </template>
v-model="row.isNullable" <template slot-scope="{ row, index }" slot="dataType">
@on-change="setRow(row, index)" <Dictionary
></Checkbox> @on-change="setRow(row, index)"
</template> v-model="row.dataType"
<template slot-scope="{ row, index }" slot="unit"> code="materail.category.dataType"
<Dictionary type="select"
:disabled="row.dataType != 1 && row.dataType != 2" :value="row.dataType"
@on-change="setRow(row, index)" :key="row.dataType"
v-model="row.unit" ></Dictionary>
code="materail.category.dataType" </template>
type="select" <template slot-scope="{ row, index }" slot="propertyName">
:value="row.dataType" <Input
:key="row.dataType" v-model="row.propertyName"
></Dictionary> @on-change="setRow(row, index)"
</template> placeholder="请输入"
<template slot-scope="{ row, index }" slot="length"> />
<Input </template>
v-model="row.length" <template slot-scope="{ row, index }" slot="dbColumnName">
@on-change="setRow(row, index)" <Input
placeholder="请输入" v-model="row.dbColumnName"
/> @on-change="setRow(row, index)"
</template> placeholder="请输入"
/>
</template>
<template slot-scope="{ row, index }" slot="code">
<Input
@on-change="setRow(row, index)"
v-model="row.code"
:disabled="row.dataType != 3 && row.dataType != 10"
placeholder="请输入"
/>
</template>
<template slot-scope="{ row, index }" slot="isNullable">
<Checkbox
v-model="row.isNullable"
@on-change="setRow(row, index)"
></Checkbox>
</template>
<template slot-scope="{ row, index }" slot="unit">
<Dictionary
:disabled="row.dataType != 0 && row.dataType != 8"
@on-change="setRow(row, index)"
v-model="row.unit"
code="materail.category.dataType"
type="select"
:value="row.dataType"
:key="row.dataType"
></Dictionary>
</template>
<template slot-scope="{ row, index }" slot="length">
<Input
:disabled="row.dataType != 0 && row.dataType != 8"
v-model="row.length"
@on-change="setRow(row, index)"
placeholder="请输入"
/>
</template>
<template slot-scope="{ row, index }" slot="link"> <!-- <template slot-scope="{ row, index }" slot="link">
<Input <Input
v-model="row.link" v-model="row.link"
@on-change="setRow(row, index)" @on-change="setRow(row, index)"
placeholder="请输入" placeholder="请输入"
number number
/> />
</template> </template> -->
<template slot-scope="{ row, index }" slot="systemName"> <template slot-scope="{ row, index }" slot="systemName">
<state code="project.main.systemName" :value="row.systemName" /> <state code="project.main.systemName" :value="row.systemName" />
</template> </template>
<template slot-scope="{ row, index }" slot="list"> <template slot-scope="{ row, index }" slot="list">
<Checkbox v-model="row.list" @on-change="setRow(row, index)"> <Checkbox v-model="row.list" @on-change="setRow(row, index)">
</Checkbox> </Checkbox>
</template> </template>
<template slot-scope="{ row, index }" slot="add"> <template slot-scope="{ row, index }" slot="add">
<Checkbox v-model="row.add" @on-change="setRow(row, index)"> <Checkbox v-model="row.add" @on-change="setRow(row, index)">
</Checkbox> </Checkbox>
</template> </template>
<template slot-scope="{ row, index }" slot="uniqueness"> <template slot-scope="{ row, index }" slot="uniqueness">
<Checkbox <Checkbox
v-model="row.uniqueness" v-model="row.uniqueness"
@on-change="setRow(row, index)" @on-change="setRow(row, index)"
></Checkbox> ></Checkbox>
</template> </template>
<template slot-scope="{ row, index }" slot="defaultValue"> <template slot-scope="{ row, index }" slot="defaultValue">
<Input v-model="row.defaultValue" placeholder="请输入" /> <Input v-model="row.defaultValue" placeholder="请输入" />
</template> </template>
<template slot-scope="{ row, index }" slot="action"> <template slot-scope="{ row, index }" slot="action">
<a <a
@click="remove(index, row)" @click="remove(index, row)"
style="color: #ff7a8b" style="color: #ff7a8b"
v-if="row.fieldType > 1" v-if="row.fieldType > 1"
>删除</a >删除</a
> >
</template> </template>
</Table> </Table>
<Button type="dashed" long @click="addNew(0, '{}')" class="mt10" <Button type="dashed" long @click="addNew(0, '{}')" class="mt10"
>新增属性</Button >新增属性</Button
> >
</Row> </Row>
</Col> </Col>
<Col :span="24" class="tr mt10"> <Col :span="24" class="tr mt10">
<FormItem> <FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled" <Button type="primary" @click="handleSubmit" :disabled="disabled"
>保存</Button >保存</Button
> >
<Button @click="handleClose" class="ml20">取消</Button> <Button @click="handleClose" class="ml20">取消</Button>
</FormItem> </FormItem>
</Col> </Col>
</Row>
</Row> </Row>
</Form> </Form>
</template> </template>
<script> <script>
import Dtos from "./dtos"
import Api from "./api"; import Api from "./api";
export default { export default {
name: "Add", name: "Add",
data() { data() {
return { return {
formline: {
name: "",
code: "",
},
ruleInline: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
code: [{ required: true, message: "请输入编码", trigger: "blur" }],
},
// modal1: false,
iconType: "ios-arrow-up", iconType: "ios-arrow-up",
textUp: "收起", textUp: "收起",
upDrop: true, upDrop: true,
completeValue: "", completeValue: "",
completeList: [], completeList: [],
codeList: [], codeList: [],
checkList: [ checkList: [],
// { systemValue: 0,
// // mid: maxId + 1,
// // field: "c" + maxId,
// systemName: 0,
// columnDescription: "", // 中文名称
// dbColumnName: "", // 字段名称
// dataType: 0, // 数据库中字段类型
// propertyName: "", //程序中的字段名称
// propertyType: "", // 程序中的字段类型
// code: "", // 数据字典编码
// isNullable: false, // 是否可空
// isKey: false, // 是否主键
// unit: 0, // 单位
// length: 0, //
// decimalDigits: 0, // 精度
// link: 0, //外键 表的
// defaultValue: "", // 默认值
// control: 0,
// add: 0,
// uniqueness: 0, // 唯一性 0 不限制 1 表内唯一 2 表内某条件下唯一
// ruleType: "", // 邮箱 ，电话，等,
// busType: 0, // 0 系统字段 1 业务字段 2 自定义字段
// fieldType: 3,
// action: 1,
// add: 0 //新增标识
// }
],
columns1: [ columns1: [
{ {
title: "序号", title: "序号",
...@@ -328,6 +305,21 @@ export default { ...@@ -328,6 +305,21 @@ export default {
width: 150, width: 150,
high: true, high: true,
}, },
{
title: "字段名称",
key: "dbColumnName",
align: "center",
slot: "dbColumnName",
width: 150,
high: true,
renderHeader: (h, params) => {
return h("div", [
h("span", "字段名称("),
h("span", { style: { color: "red" } }, "*"),
h("span", ")"),
]);
},
},
{ {
title: "属性(*)", title: "属性(*)",
align: "center", align: "center",
...@@ -342,6 +334,7 @@ export default { ...@@ -342,6 +334,7 @@ export default {
]); ]);
}, },
}, },
{ {
title: "关联", title: "关联",
key: "code", key: "code",
...@@ -367,11 +360,6 @@ export default { ...@@ -367,11 +360,6 @@ export default {
align: "center", align: "center",
slot: "systemName", slot: "systemName",
width: 190, width: 190,
// render: (h, params) => {
// return h("div", [
// h("span", {}, this.sysDist(params.row.systemName)),
// ]);
// },
}, },
{ {
title: "是否可空", title: "是否可空",
...@@ -442,42 +430,26 @@ export default { ...@@ -442,42 +430,26 @@ export default {
name: [{ required: true, message: "必填", trigger: "blur" }], name: [{ required: true, message: "必填", trigger: "blur" }],
code: [{ required: true, message: "必填", trigger: "blur" }], code: [{ required: true, message: "必填", trigger: "blur" }],
}, },
content: { // content:{
base: [], // base:[]
dtos: [], // },
}, dtos:[]
}; };
}, },
components:{
Dtos
},
props: { props: {
v: Object, v: Object,
eid: Number, eid: Number,
}, },
mounted() { mounted() {
this.seachChange();
if (this.eid > 0) { if (this.eid > 0) {
this.load(this.eid); this.load(this.eid);
this.seachChange();
} }
}, },
methods: { methods: {
// okModal(name) {
// this.$refs[name].validate((valid) => {
// if (valid) {
// let obj = {
// name: this.formline.name,
// code: this.formline.code,
// list: [],
// };
// this.content.dtos.push(obj);
// console.log(this.content.dtos);
// this.$refs[name].resetFields();
// this.modal1 = false;
// }
// });
// },
// cancelModal(name) {
// this.$refs[name].resetFields();
// this.modal1 = false;
// },
onDragDrop(a, b) { onDragDrop(a, b) {
this.checkList.splice(b, 0, ...this.checkList.splice(a, 1)); this.checkList.splice(b, 0, ...this.checkList.splice(a, 1));
}, },
...@@ -521,12 +493,12 @@ export default { ...@@ -521,12 +493,12 @@ export default {
if (row.add == 0) { if (row.add == 0) {
//新增的删除，直接删 //新增的删除，直接删
this.checkList.splice(index, 1); this.checkList.splice(index, 1);
let objArr = { // let objArr = {
name: row.columnDescription, // name: row.columnDescription,
code: row.code, // code: row.code,
id: row.id, // id: row.id,
}; // };
this.completeList.push(objArr); // this.completeList.push(objArr);
} else { } else {
row.action = 2; //返回的默认删除，删除后保存在arr数组中，添加标识action = 2，然后点击保存的时候，一起传给后台 row.action = 2; //返回的默认删除，删除后保存在arr数组中，添加标识action = 2，然后点击保存的时候，一起传给后台
this.$set(this.checkList, index, row); this.$set(this.checkList, index, row);
...@@ -534,36 +506,19 @@ export default { ...@@ -534,36 +506,19 @@ export default {
this.checkList.splice(index, 1); this.checkList.splice(index, 1);
} }
}, },
onIpnt(a, b) {
console.log(a, b);
},
setRow(row, index) { setRow(row, index) {
// if (index >= 1) {
// console.log(this.checkList.length)
// for(var i=1;i<this.checkList.length;i++){
// if (this.checkList[0].columnDescription == this.checkList[i].columnDescription) {
// this.$Message.error("表格名称重复!");
// row.columnDescription = "";
// return;
// }
// if (this.checkList[0].propertyName == this.checkList[i].propertyName) {
// this.$Message.error("表格属性重复!");
// row.propertyName = "";
// return;
// }
// }
// }
if (row.dataType == 0 || row.dataType == 8) { if (row.dataType == 0 || row.dataType == 8) {
row.length = 50; row.length = 50;
} else { }else{
row.length = 0; row.length = 0;
} }
if (row.dbColumnName=="") {
row.propertyName = row.dbColumnName;
}
this.$set(this.checkList, index, row); this.$set(this.checkList, index, row);
}, },
addNew(index, e) { addNew(index, e) {
let id = "", let name = "",
code = "",
name = "",
flag = false; flag = false;
if (index == 0 && e == "{}") { if (index == 0 && e == "{}") {
this.checkList.forEach((s, index) => { this.checkList.forEach((s, index) => {
...@@ -579,42 +534,32 @@ export default { ...@@ -579,42 +534,32 @@ export default {
if (flag == true) { if (flag == true) {
return; return;
} }
let obj = {
dbColumnName: "",
systemName: this.systemValue,
columnDescription: name,
defaultValue: "",
isNullable: false,
unit: 0,
link: 0,
dataType: 0,
isKey: false, // 是否主键
length: 50,
propertyName: "", //程序中的字段名称
propertyType: "", // 程序中的字段类型
fieldType: 3,
action: 1,
add: 0, //新增标识
};
this.checkList.push(obj);
} else if (index == 1 && JSON.stringify(e) != "{}") { } else if (index == 1 && JSON.stringify(e) != "{}") {
id = e.id; JSON.parse(e.content).map((item) => {
code = e.code; this.checkList.push(item);
name = e.name; });
} else { } else {
this.$Message.warning("请选择导入字段！"); this.$Message.warning("请选择导入字段！");
return; return;
} }
// let maxId = 0;
// this.checkList.map((u) => {
// if (u.mid > maxId) {
// maxId = u.mid;
// }
// });
let obj = {
id: id,
code: code,
// mid: maxId + 1,
// field: "c" + maxId,
systemName: 0,
columnDescription: name,
defaultValue: "",
isNullable: false,
unit: 0,
link: 0,
dataType: 0,
isKey: false, // 是否主键
length: 50,
propertyName: "", //程序中的字段名称
propertyType: "", // 程序中的字段类型
fieldType: 3,
// categoryId: 0,
action: 1,
add: 0, //新增标识
};
this.checkList.push(obj);
}, },
handleSubmit() { handleSubmit() {
let keys = false; let keys = false;
...@@ -629,6 +574,23 @@ export default { ...@@ -629,6 +574,23 @@ export default {
return (keys = true); return (keys = true);
} }
}); });
if (this.checkList.length >= 2) {
for (var i = 1; i < this.checkList.length; i++) {
if (
this.checkList[0].columnDescription ==
this.checkList[i].columnDescription
) {
this.$Message.error("表格名称重复!");
return (keys = true);
}
if (
this.checkList[0].propertyName == this.checkList[i].propertyName
) {
this.$Message.error("表格属性重复!");
return (keys = true);
}
}
}
if (keys == true) { if (keys == true) {
return; return;
} }
...@@ -659,7 +621,7 @@ export default { ...@@ -659,7 +621,7 @@ export default {
load(v) { load(v) {
Api.get({ id: v }).then((r) => { Api.get({ id: v }).then((r) => {
this.entity = r.result; this.entity = r.result;
this.content.base = this.checkList; this.content = this.checkList;
this.entity.id = 0; this.entity.id = 0;
}); });
}, },
...@@ -669,6 +631,13 @@ export default { ...@@ -669,6 +631,13 @@ export default {
}, },
}, },
watch: { watch: {
"entity.type": function (newVal, oldVal) {
if (newVal == 0) {
this.systemValue = 0;
} else if (newVal == 1) {
this.systemValue = 1;
}
},
v() { v() {
this.entity = this.$u.clone(this.v); this.entity = this.$u.clone(this.v);
}, },
......
pages/system/project/atom/dtos/index.vue 0 → 100644
View file @ 736da3b1
<template>
<div>
<Row style="margin-bottom: 10px" :gutter="10">
<Col :span="6">
<AutoComplete
v-model="completeValue"
icon="ios-search"
placeholder="请搜索"
style="width: 100%"
>
<Option
v-for="option in completeList"
:value="option.name"
:key="option.code"
>
<span class="demo-auto-complete-title">
{{ option.name }}
</span>
<span class="demo-auto-complete-count" style="float: right">{{
option.code
}}</span>
</Option>
</AutoComplete>
</Col>
<Col :span="2">
<Button type="primary" @click="importColumns">导入</Button>
</Col>
</Row>
<Table
:columns="columns1"
:data="checkList"
border
:draggable="true"
@on-drag-drop="onDragDrop"
>
<template slot-scope="{ row, index }" slot="columnDescription">
<Input
v-model="row.columnDescription"
@on-change="setRow(row, index)"
placeholder="请输入"
/>
</template>
<template slot-scope="{ row, index }" slot="dataType">
<Dictionary
@on-change="setRow(row, index)"
v-model="row.dataType"
code="materail.category.dataType"
type="select"
:value="row.dataType"
:key="row.dataType"
></Dictionary>
</template>
<template slot-scope="{ row, index }" slot="propertyName">
<Input
v-model="row.propertyName"
@on-change="setRow(row, index)"
placeholder="请输入"
/>
</template>
<template slot-scope="{ row, index }" slot="dbColumnName">
<Input
v-model="row.dbColumnName"
@on-change="setRow(row, index)"
placeholder="请输入"
/>
</template>
<template slot-scope="{ row, index }" slot="code">
<Input
@on-change="setRow(row, index)"
v-model="row.code"
:disabled="row.dataType != 3 && row.dataType != 10"
placeholder="请输入"
/>
</template>
<template slot-scope="{ row, index }" slot="isNullable">
<Checkbox
v-model="row.isNullable"
@on-change="setRow(row, index)"
></Checkbox>
</template>
<template slot-scope="{ row, index }" slot="unit">
<Dictionary
:disabled="row.dataType != 0 && row.dataType != 8"
@on-change="setRow(row, index)"
v-model="row.unit"
code="materail.category.dataType"
type="select"
:value="row.dataType"
:key="row.dataType"
></Dictionary>
</template>
<template slot-scope="{ row, index }" slot="length">
<Input
:disabled="row.dataType != 0 && row.dataType != 8"
v-model="row.length"
@on-change="setRow(row, index)"
placeholder="请输入"
/>
</template>
<!--
<template slot-scope="{ row, index }" slot="link">
<Input
v-model="row.link"
@on-change="setRow(row, index)"
placeholder="请输入"
number
/>
</template> -->
<template slot-scope="{ row, index }" slot="systemName">
<state code="project.main.systemName" :value="row.systemName" />
</template>
<template slot-scope="{ row, index }" slot="list">
<Checkbox v-model="row.list" @on-change="setRow(row, index)">
</Checkbox>
</template>
<template slot-scope="{ row, index }" slot="add">
<Checkbox v-model="row.add" @on-change="setRow(row, index)"> </Checkbox>
</template>
<template slot-scope="{ row, index }" slot="uniqueness">
<Checkbox
v-model="row.uniqueness"
@on-change="setRow(row, index)"
></Checkbox>
</template>
<template slot-scope="{ row, index }" slot="defaultValue">
<Input v-model="row.defaultValue" placeholder="请输入" />
</template>
<template slot-scope="{ row, index }" slot="action">
<a
@click="remove(index, row)"
style="color: #ff7a8b"
v-if="row.fieldType > 1"
>删除</a
>
</template>
</Table>
<Button type="dashed" long @click="addNew(0, '{}')" class="mt10"
>新增属性</Button
>
</div>
</template>
<script>
export default {
// name: '',
data() {
return {
checkList: this.list,
completeValue: "",
completeList: [],
columns1: [
{
title: "序号",
type: "index",
width: 70,
align: "center",
},
{
title: "名称(*)",
align: "center",
key: "columnDescription",
slot: "columnDescription",
width: 150,
renderHeader: (h, params) => {
return h("div", [
h("span", "名称("),
h("span", { style: { color: "red" } }, "*"),
h("span", ")"),
]);
},
},
{
title: "类型",
key: "dataType",
align: "center",
slot: "dataType",
width: 150,
high: true,
},
{
title: "字段名称",
key: "dbColumnName",
align: "center",
slot: "dbColumnName",
width: 150,
high: true,
renderHeader: (h, params) => {
return h("div", [
h("span", "字段名称("),
h("span", { style: { color: "red" } }, "*"),
h("span", ")"),
]);
},
},
{
title: "属性(*)",
align: "center",
key: "propertyName",
slot: "propertyName",
high: false,
renderHeader: (h, params) => {
return h("div", [
h("span", "属性("),
h("span", { style: { color: "red" } }, "*"),
h("span", ")"),
]);
},
},
{
title: "关联",
key: "code",
align: "center",
slot: "code",
},
{
title: "单位",
key: "unit",
align: "center",
slot: "unit",
},
{
title: "长度",
key: "length",
align: "center",
slot: "length",
},
{
title: "业务类型",
key: "systemName",
align: "center",
slot: "systemName",
width: 190,
},
{
title: "是否可空",
key: "isNullable",
align: "center",
slot: "isNullable",
width: 100,
},
{
title: "业务设置",
align: "center",
children: [
{
title: "列表",
key: "list",
align: "center",
slot: "list",
width: 70,
},
{
title: "新增",
key: "add",
align: "center",
slot: "add",
width: 70,
},
{
title: "唯一",
key: "uniqueness",
align: "center",
slot: "uniqueness",
width: 70,
},
{
title: "默认值",
key: "defaultValue",
align: "center",
slot: "defaultValue",
},
],
},
{
width: 80,
title: "操作",
slot: "action",
align: "center",
},
],
};
},
props: {
list: Array,
default:()=>{
return []
}
},
created() {
},
methods: {
importColumns() {
//导入
let changeId = {};
if (this.completeList.length > 0) {
this.completeList.map((e, index) => {
if (e.name == this.completeValue) {
changeId = e;
this.completeList.splice(index, 1);
this.completeValue = "";
}
});
this.addNew(1, changeId);
}
},
onDragDrop(a, b) {
this.checkList.splice(b, 0, ...this.checkList.splice(a, 1));
},
remove(index, row) {
if (row.add == 0) {
//新增的删除，直接删
this.checkList.splice(index, 1);
let objArr = {
name: row.title,
code: row.code,
id: row.id,
};
this.completeList.push(objArr);
} else {
row.action = 2; //返回的默认删除，删除后保存在arr数组中，添加标识action = 2，然后点击保存的时候，一起传给后台
this.$set(this.checkList, index, row);
this.arr.push(row);
this.checkList.splice(index, 1);
}
},
setRow(row, index) {
console.log(row.list);
if (row.list == true) {
this.dtos[0].list.push(row);
} else {
this.dtos[0].list.map((q, i) => {
if (q.propertyName == row.propertyName) {
this.dtos[0].list.splice(i, 1);
}
});
}
console.log(this.dtos[0].list);
if (row.dataType == 0 || row.dataType == 8) {
row.length = 50;
} else {
row.length = 0;
}
if (row.dbColumnName == "") {
row.propertyName = row.dbColumnName;
}
this.$set(this.checkList, index, row);
},
addNew(index, e) {
let name = "",
flag = false;
if (index == 0 && e == "{}") {
this.checkList.forEach((s, index) => {
if (s.columnDescription == "") {
this.$Message.warning("请填写表格名称!");
return (flag = true);
}
if (s.propertyName == "") {
this.$Message.warning("请填写表格属性！");
return (flag = true);
}
});
if (flag == true) {
return;
}
let obj = {
dbColumnName: "",
systemName: this.systemValue,
columnDescription: name,
defaultValue: "",
isNullable: false,
unit: 0,
link: 0,
dataType: 0,
isKey: false, // 是否主键
length: 50,
propertyName: "", //程序中的字段名称
propertyType: "", // 程序中的字段类型
fieldType: 3,
action: 1,
add: 0, //新增标识
};
this.checkList.push(obj);
} else if (index == 1 && JSON.stringify(e) != "{}") {
JSON.parse(e.content).map((item) => {
this.checkList.push(item);
});
} else {
this.$Message.warning("请选择导入字段！");
return;
}
},
},
watch:{
list(v){
this.checkList=v;
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
pages/system/project/atom/edit.vue
View file @ 736da3b1
...@@ -22,14 +22,7 @@ ...@@ -22,14 +22,7 @@
><FormItem :label="l('englishName')" prop="englishName"> ><FormItem :label="l('englishName')" prop="englishName">
<Input v-model="entity.englishName"> </Input> </FormItem <Input v-model="entity.englishName"> </Input> </FormItem
></Col> ></Col>
<Col :span="12">
<FormItem :label="l('status')" prop="status">
<Dictionary
code="base.project_atom.status"
v-model="entity.status"
></Dictionary>
</FormItem>
</Col>
<Col :span="12" <Col :span="12"
><FormItem :label="l('code')" prop="code"> ><FormItem :label="l('code')" prop="code">
<Input v-model="entity.code"> </Input> </FormItem <Input v-model="entity.code"> </Input> </FormItem
...@@ -42,6 +35,15 @@ ...@@ -42,6 +35,15 @@
><FormItem :label="l('version')" prop="version"> ><FormItem :label="l('version')" prop="version">
<InputNumber v-model="entity.version"></InputNumber> </FormItem <InputNumber v-model="entity.version"></InputNumber> </FormItem
></Col> ></Col>
<Col :span="12">
<FormItem :label="l('status')" prop="status">
<Dictionary
type="radio"
code="base.project_atom.status"
v-model="entity.status"
></Dictionary>
</FormItem>
</Col>
<Col :span="24" <Col :span="24"
><FormItem :label="l('description')" prop="description"> ><FormItem :label="l('description')" prop="description">
<Input <Input
...@@ -56,9 +58,50 @@ ...@@ -56,9 +58,50 @@
<div class="textIcon" @click="upClick(upDrop)"> <div class="textIcon" @click="upClick(upDrop)">
<Icon :type="iconType" />{{ textUp }} <Icon :type="iconType" />{{ textUp }}
</div> </div>
<Divider orientation="left">扩展属性</Divider>
</Row> </Row>
<Divider orientation="left">扩展属性</Divider> <Row style="margin-top: 10px">
<Row style="margin-bottom: 10px" :gutter="10"> <Tabs type="card" v-model="currTab" @on-click="handleContextMenu" >
<TabPane label="实体定义" name="base" > </TabPane>
<TabPane v-for="tab in dtos" :key="tab.code" :label="tab.name" :name="tab.code" ></TabPane>
<Button @click="modal1 = true" size="small" slot="extra" style="margin-right: 10px;"
>增加</Button>
<Button size="small" slot="extra"
>默认增加</Button>
<Modal
v-model="modal1"
title="增加"
@on-ok="okModal('formline')"
@on-cancel="cancelModal('formline')"
>
<Form
:model="formline"
ref="formline"
:rules="ruleInline"
:label-width="80"
>
<p>
<FormItem label="名称：" prop="name">
<Input
v-model="formline.name"
placeholder="请输入名称"
></Input>
</FormItem>
</p>
<p>
<FormItem label="编码：" prop="code">
<Input
v-model="formline.code"
placeholder="请输入编码"
></Input>
</FormItem>
</p>
</Form>
</Modal>
</Tabs>
</Row>
<!-- <Row style="margin-bottom: 10px" :gutter="10">
<Col :span="6"> <Col :span="6">
<AutoComplete <AutoComplete
v-model="completeValue" v-model="completeValue"
...@@ -84,34 +127,19 @@ ...@@ -84,34 +127,19 @@
<Button type="primary" @click="importColumns">导入</Button> <Button type="primary" @click="importColumns">导入</Button>
</Col> </Col>
</Row> </Row>
<Table :columns="columns" :data="checkList" border> <Table
<template slot-scope="{ row, index }" slot="title"> :columns="columns1"
<div v-if="row.fieldType == 1 || row.fieldType == 2"> :data="checkList"
{{ row.title }} border
</div> :draggable="true"
@on-drag-drop="onDragDrop"
>
<template slot-scope="{ row, index }" slot="columnDescription">
<Input <Input
v-model="row.title" v-model="row.columnDescription"
placeholder="请输入名称"
@on-blur="setRow(row, index)"
v-if="row.fieldType == 3"
/>
</template>
<template slot-scope="{ row, index }" slot="note">
<Select
v-if="row.dataType == 3"
v-model="row.note"
clearable
transfer
@on-change="setRow(row, index)" @on-change="setRow(row, index)"
> placeholder="请输入"
<Option />
v-for="item in codeList"
:value="item.code"
:key="item.code"
>{{ item.name }}</Option
>
</Select>
<span v-else>{{ row.note }}</span>
</template> </template>
<template slot-scope="{ row, index }" slot="dataType"> <template slot-scope="{ row, index }" slot="dataType">
<Dictionary <Dictionary
...@@ -123,48 +151,99 @@ ...@@ -123,48 +151,99 @@
:key="row.dataType" :key="row.dataType"
></Dictionary> ></Dictionary>
</template> </template>
<template slot-scope="{ row, index }" slot="unitName"> <template slot-scope="{ row, index }" slot="propertyName">
<Input
v-model="row.propertyName"
@on-change="setRow(row, index)"
placeholder="请输入"
/>
</template>
<template slot-scope="{ row, index }" slot="dbColumnName">
<Input
v-model="row.dbColumnName"
@on-change="setRow(row, index)"
placeholder="请输入"
/>
</template>
<template slot-scope="{ row, index }" slot="code">
<Input
@on-change="setRow(row, index)"
v-model="row.code"
:disabled="row.dataType != 3 && row.dataType != 10"
placeholder="请输入"
/>
</template>
<template slot-scope="{ row, index }" slot="isNullable">
<Checkbox
v-model="row.isNullable"
@on-change="setRow(row, index)"
></Checkbox>
</template>
<template slot-scope="{ row, index }" slot="unit">
<Dictionary <Dictionary
v-if="row.dataType == 1 || row.dataType == 2" :disabled="row.dataType != 0 && row.dataType != 8"
@on-change="setRow(row, index)" @on-change="setRow(row, index)"
v-model="row.unitName" v-model="row.unit"
code="material.main.unitName" code="materail.category.dataType"
type="select" type="select"
placeholder="请选择单位" :value="row.dataType"
:value="row.unitName" :key="row.dataType"
:key="row.unitName"
></Dictionary> ></Dictionary>
</template> </template>
<template slot-scope="{ row, index }" slot="required"> <template slot-scope="{ row, index }" slot="length">
<Checkbox <Input
v-model="row.required" :disabled="row.dataType != 0 && row.dataType != 8"
v-model="row.length"
@on-change="setRow(row, index)" @on-change="setRow(row, index)"
></Checkbox> placeholder="请输入"
/>
</template>
<template slot-scope="{ row, index }" slot="link">
<Input
v-model="row.link"
@on-change="setRow(row, index)"
placeholder="请输入"
number
/>
</template> </template>
<template slot-scope="{ row, index }" slot="isUnique"> <template slot-scope="{ row, index }" slot="systemName">
<state code="project.main.systemName" :value="row.systemName" />
</template>
<template slot-scope="{ row, index }" slot="list">
<Checkbox v-model="row.list" @on-change="setRow(row, index)">
</Checkbox>
</template>
<template slot-scope="{ row, index }" slot="add">
<Checkbox v-model="row.add" @on-change="setRow(row, index)">
</Checkbox>
</template>
<template slot-scope="{ row, index }" slot="uniqueness">
<Checkbox <Checkbox
v-model="row.isUnique" v-model="row.uniqueness"
@on-change="setRow(row, index)" @on-change="setRow(row, index)"
></Checkbox> ></Checkbox>
</template> </template>
<template slot-scope="{ row, index }" slot="defaultValue">
<Input v-model="row.defaultValue" placeholder="请输入" />
</template>
<template slot-scope="{ row, index }" slot="action"> <template slot-scope="{ row, index }" slot="action">
<a <a
@click="remove(index, row)" @click="remove(index, row)"
style="color: #ff7a8b" style="color: #ff7a8b"
v-if="row.fieldType > 1" v-if="row.fieldType > 1"
>删除</a> >删除</a
>
</template> </template>
</Table> </Table>
<Button type="dashed" long @click="addNew(0,'{}')" class="mt10" <Button type="dashed" long @click="addNew(0, '{}')" class="mt10" >新增属性</Button> -->
>新增属性</Button <!-- <Dtos :list="checkList"></Dtos> -->
> <component :is="detail" :list="checkList" />
</Col> </Col>
<Col :span="24" class="tr mt10"> <Col :span="24" class="tr mt10">
<FormItem> <FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled" <Button type="primary" @click="handleSubmit" :disabled="disabled"
>保存</Button >保存</Button>
>
<Button @click="handleClose" class="ml20">取消</Button> <Button @click="handleClose" class="ml20">取消</Button>
</FormItem> </FormItem>
</Col> </Col>
...@@ -177,6 +256,48 @@ export default { ...@@ -177,6 +256,48 @@ export default {
name: "Edit", name: "Edit",
data() { data() {
return { return {
currTab:'base',
detail:null,
contextData: null,
formline: {
name: "",
code: "",
},
ruleInline: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }],
code: [{ required: true, message: "请输入编码", trigger: "blur" }],
},
modal1: false,
content: {
base: [],
},
dtos: [
{
name: "列表",
code: "list",
type: 0,
list: [],
},
{
name: "新增",
code: "Add",
type: 1,
list: [],
},
{
name: "编辑",
code: "Edit",
type: 1,
list: [],
},
{
name: "查询",
code: "Search",
type: 1,
list: [],
},
],
systemValue: 0,
iconType: "ios-arrow-up", iconType: "ios-arrow-up",
textUp: "收起", textUp: "收起",
upDrop: true, upDrop: true,
...@@ -184,52 +305,132 @@ export default { ...@@ -184,52 +305,132 @@ export default {
completeList: [], completeList: [],
codeList: [], codeList: [],
checkList: [], checkList: [],
columns: [ columns1: [
{ {
title: "序号", title: "序号",
type: "index", type: "index",
width: 80, width: 70,
align: "center", align: "center",
}, },
{ {
title: "属性名称", title: "名称(*)",
key: "title", align: "center",
slot: "title", key: "columnDescription",
slot: "columnDescription",
width: 150,
renderHeader: (h, params) => {
return h("div", [
h("span", "名称("),
h("span", { style: { color: "red" } }, "*"),
h("span", ")"),
]);
},
}, },
{ {
title: "属性类型", title: "类型",
key: "dataType", key: "dataType",
align: "center", align: "center",
slot: "dataType", slot: "dataType",
width: 200, width: 150,
high: true,
}, },
{ {
title: "设置", title: "字段名称",
key: "note", key: "dbColumnName",
align: "center",
slot: "dbColumnName",
width: 150,
high: true,
renderHeader: (h, params) => {
return h("div", [
h("span", "字段名称("),
h("span", { style: { color: "red" } }, "*"),
h("span", ")"),
]);
},
},
{
title: "属性(*)",
align: "center",
key: "propertyName",
slot: "propertyName",
high: false,
renderHeader: (h, params) => {
return h("div", [
h("span", "属性("),
h("span", { style: { color: "red" } }, "*"),
h("span", ")"),
]);
},
},
{
title: "关联",
key: "code",
align: "center", align: "center",
slot: "note", slot: "code",
}, },
{ {
title: "单位", title: "单位",
key: "unitName", key: "unit",
align: "center", align: "center",
slot: "unitName", slot: "unit",
width: "150",
}, },
{ {
title: "必填", title: "长度",
key: "required", key: "length",
align: "center", align: "center",
slot: "required", slot: "length",
width: 80,
}, },
{ {
title: "唯一", title: "业务类型",
key: "isUnique", key: "systemName",
align: "center", align: "center",
slot: "isUnique", slot: "systemName",
width: 80, width: 190,
},
{
title: "是否可空",
key: "isNullable",
align: "center",
slot: "isNullable",
width: 100,
},
{
title: "业务设置",
align: "center",
children: [
{
title: "列表",
key: "list",
align: "center",
slot: "list",
width: 70,
},
{
title: "新增",
key: "add",
align: "center",
slot: "add",
width: 70,
},
{
title: "唯一",
key: "uniqueness",
align: "center",
slot: "uniqueness",
width: 70,
},
{
title: "默认值",
key: "defaultValue",
align: "center",
slot: "defaultValue",
},
],
}, },
{ {
width: 80, width: 80,
title: "操作", title: "操作",
...@@ -248,27 +449,52 @@ export default { ...@@ -248,27 +449,52 @@ export default {
props: { props: {
eid: Number, eid: Number,
}, },
mounted() { mounted() {
if (this.eid > 0) { if (this.eid > 0) {
this.load(this.eid); this.load(this.eid);
this.seachChange(); this.seachChange();
} }
this.detail=()=>import('./dtos')
}, },
methods: { methods: {
importColumns() { handleContextMenu(data) {console.log("+=========================")
//导入 console.log(data)
let changeId = {}; this.contextData = data;
if (this.completeList.length > 0) {
this.completeList.map((e, index) => {
if (e.name == this.completeValue) {
changeId = e;
this.completeList.splice(index, 1);
this.completeValue = "";
}
});
this.addNew(1,changeId);
}
}, },
okModal(name) {
this.$refs[name].validate((valid) => {
if (valid) {
let obj = {
name: this.formline.name,
code: this.formline.code,
list: [],
};
this.dtos.push(obj);
console.log(this.dtos);
this.$refs[name].resetFields();
this.modal1 = false;
}
});
},
cancelModal(name) {
this.$refs[name].resetFields();
this.modal1 = false;
},
// importColumns() {
// //导入
// let changeId = {};
// if (this.completeList.length > 0) {
// this.completeList.map((e, index) => {
// if (e.name == this.completeValue) {
// changeId = e;
// this.completeList.splice(index, 1);
// this.completeValue = "";
// }
// });
// this.addNew(1, changeId);
// }
// },
upClick(value) { upClick(value) {
this.upDrop = !value; this.upDrop = !value;
if (value) { if (value) {
...@@ -293,71 +519,98 @@ export default { ...@@ -293,71 +519,98 @@ export default {
}) })
.catch((err) => {}); .catch((err) => {});
}, },
// onDragDrop(a, b) {
remove(index, row) { // this.checkList.splice(b, 0, ...this.checkList.splice(a, 1));
if (row.add == 0) { // },
//新增的删除，直接删 // remove(index, row) {
this.checkList.splice(index, 1); // if (row.add == 0) {
let objArr = { // //新增的删除，直接删
name: row.title, // this.checkList.splice(index, 1);
code: row.code, // let objArr = {
id: row.id, // name: row.title,
}; // code: row.code,
this.completeList.push(objArr); // id: row.id,
} else { // };
row.action = 2; //返回的默认删除，删除后保存在arr数组中，添加标识action = 2，然后点击保存的时候，一起传给后台 // this.completeList.push(objArr);
this.$set(this.checkList, index, row); // } else {
this.arr.push(row); // row.action = 2; //返回的默认删除，删除后保存在arr数组中，添加标识action = 2，然后点击保存的时候，一起传给后台
this.checkList.splice(index, 1); // this.$set(this.checkList, index, row);
} // this.arr.push(row);
}, // this.checkList.splice(index, 1);
setRow(row, index) { // }
this.$set(this.checkList, index, row); // },
}, // setRow(row, index) {
addNew(index,e) { // console.log(row.list)
let id = "", // if(row.list==true){
code = "", // this.dtos[0].list.push(row)
name = ""; // }else{
if (index == 0 && e=='{}') { // this.dtos[0].list.map((q,i)=>{
id = ""; // if(q.propertyName==row.propertyName){
code = ""; // this.dtos[0].list.splice(i,1)
name = ""; // }
} else if(index == 1 && JSON.stringify(e)!='{}'){ // })
id = e.id; // }
code = e.code; // console.log(this.dtos[0].list)
name = e.name; // if (row.dataType == 0 || row.dataType == 8) {
}else{ // row.length = 50;
this.$Message.warning("请选择导入字段！"); // } else {
return; // row.length = 0;
} // }
let maxId = 0; // if (row.dbColumnName == "") {
this.checkList.map((u) => { // row.propertyName = row.dbColumnName;
if (u.mid > maxId) { // }
maxId = u.mid; // this.$set(this.checkList, index, row);
} // },
}); // addNew(index, e) {
let obj = { // let name = "",
id: id, // flag = false;
code: code, // if (index == 0 && e == "{}") {
mid: maxId + 1, // this.checkList.forEach((s, index) => {
field: "c" + maxId, // if (s.columnDescription == "") {
title: name, // this.$Message.warning("请填写表格名称!");
note: "", // return (flag = true);
unitName: "", // }
dataType: 0, // if (s.propertyName == "") {
required: false, // this.$Message.warning("请填写表格属性！");
isunique: false, // return (flag = true);
fieldType: 3, // }
categoryId: 0, // });
action: 1, // if (flag == true) {
add: 0, //新增标识 // return;
}; // }
this.checkList.push(obj); // let obj = {
}, // dbColumnName: "",
// systemName: this.systemValue,
// columnDescription: name,
// defaultValue: "",
// isNullable: false,
// unit: 0,
// link: 0,
// dataType: 0,
// isKey: false, // 是否主键
// length: 50,
// propertyName: "", //程序中的字段名称
// propertyType: "", // 程序中的字段类型
// fieldType: 3,
// action: 1,
// add: 0, //新增标识
// };
// this.checkList.push(obj);
// } else if (index == 1 && JSON.stringify(e) != "{}") {
// JSON.parse(e.content).map((item) => {
// this.checkList.push(item);
// });
// } else {
// this.$Message.warning("请选择导入字段！");
// return;
// }
// },
load(v) { load(v) {
Api.get({ id: v }).then((r) => { Api.get({ id: v }).then((r) => {
this.entity = r.result; this.entity = r.result;
this.checkList = JSON.parse(r.result.content); this.checkList = JSON.parse(r.result.content);
console.log(this.checkList)
this.checkList.map((v) => { this.checkList.map((v) => {
if (v.fieldType > 1) { if (v.fieldType > 1) {
v.fieldType = 1; v.fieldType = 1;
...@@ -368,6 +621,7 @@ export default { ...@@ -368,6 +621,7 @@ export default {
} }
}); });
}); });
}); });
}, },
handleSubmit() { handleSubmit() {
...@@ -401,11 +655,18 @@ export default { ...@@ -401,11 +655,18 @@ export default {
}, },
}, },
watch: { watch: {
eid(v) { "entity.type": function (newVal, oldVal) {
if (v != 0) { if (newVal == 0) {
this.load(v); this.systemValue = 0;
} else if (newVal == 1) {
this.systemValue = 1;
} }
}, },
// eid(v) {
// if (v != 0) {
// this.load(v);
// }
// },
}, },
}; };
</script> </script>
......
pages/system/project/atom/index.vue
View file @ 736da3b1
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</template> </template>
</DataGrid> </DataGrid>
<!-- fullscreen --> <!-- fullscreen -->
<Modal v-model="modal" :title="title" width="1200" footer-hide fullscreen > <Modal v-model="modal" :title="title" width="1200" footer-hide fullscreen>
<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>
...@@ -58,48 +58,6 @@ export default { ...@@ -58,48 +58,6 @@ export default {
align: "left", align: "left",
high: true, 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: "name", key: "name",
title: this.l("name"), title: this.l("name"),
...@@ -114,16 +72,20 @@ export default { ...@@ -114,16 +72,20 @@ export default {
easy: true, easy: true,
high: true, high: true,
}, },
{ key: "status", title: this.l("status"), align: "left", high: true , code:'base.project_atom.status'}, {
// { key: "upId", title: this.l("upId"), align: "left", high: true }, key: "status",
// { key: "level", title: this.l("level"), align: "left", high: true }, title: this.l("status"),
// { align: "left",
// key: "tenantId", high: true,
// title: this.l("tenantId"), code: "base.project_atom.status",
// align: "left", },
// high: true, {
// }, key: "type",
{ key: "type", title: this.l("type"), align: "left", high: true , code:'base.project_atom.type'}, title: this.l("type"),
align: "left",
high: true,
code: "base.project_atom.type",
},
{ {
key: "englishFullName", key: "englishFullName",
title: this.l("englishFullName"), title: this.l("englishFullName"),
...@@ -138,22 +100,9 @@ export default { ...@@ -138,22 +100,9 @@ export default {
easy: true, easy: true,
high: true, high: true,
}, },
// {
// key: "inheritCategoryId",
// title: this.l("inheritCategoryId"),
// align: "left",
// high: true,
// },
{ key: "module", title: this.l("module"), align: "left", high: true }, { key: "module", title: this.l("module"), align: "left", high: true },
{ key: "version", title: this.l("version"), align: "left", high: true }, { key: "version", title: this.l("version"), align: "left", high: true },
// {
// key: "projectId",
// title: this.l("projectId"),
// align: "left",
// high: true,
// },
{ {
title: "操作", title: "操作",
key: "action", key: "action",
...@@ -169,7 +118,6 @@ export default { ...@@ -169,7 +118,6 @@ export default {
}, },
"查看" "查看"
), ),
//h('op', { attrs: { oprate: 'copy' }, on: { click: () => this.copy(params.row.id) } }, '克隆'),
h( h(
"op", "op",
{ {
...@@ -192,9 +140,7 @@ export default { ...@@ -192,9 +140,7 @@ export default {
], ],
}; };
}, },
mounted() { mounted() {},
console.log(this);
},
async fetch({ store, params }) { async fetch({ store, params }) {
await store.dispatch("loadDictionary"); // 加载数据字典 await store.dispatch("loadDictionary"); // 加载数据字典
}, },
...@@ -276,5 +222,3 @@ export default { ...@@ -276,5 +222,3 @@ export default {
}, },
}; };
</script> </script>
<style lang="less">
</style>
\ No newline at end of file
pages/system/project/atom/search.vue
View file @ 736da3b1
<template> <template>
<Form ref="form" :model="condition" :label-width="90"> <Form ref="form" :model="condition" :label-width="90">
<Row> <Row>
<Col :span="12" :v-if="condition.id.show"><FormItem :label="$t('id')" prop="id"> <Input v-model="condition.id.value"> </Input> <Col :span="12" :v-if="condition.id.show"
</FormItem></Col> ><FormItem :label="$t('id')" prop="id">
<Col :span="12" :v-if="condition.creationTime.show"><FormItem :label="l('creationTime')" prop="creationTime"> <DatePicker type="daterange" v-model="condition.creationTime.value"></DatePicker> <Input v-model="condition.id.value" number> </Input> </FormItem
</FormItem></Col> ></Col>
<Col :span="12" :v-if="condition.creatorUserId.show"><FormItem :label="l('creatorUserId')" prop="creatorUserId"> <Input v-model="condition.creatorUserId.value"> </Input> <Col :span="12" :v-if="condition.creationTime.show"
</FormItem></Col> ><FormItem :label="l('creationTime')" prop="creationTime">
<Col :span="12" :v-if="condition.lastModificationTime.show"><FormItem :label="l('lastModificationTime')" prop="lastModificationTime"> <DatePicker type="daterange" v-model="condition.lastModificationTime.value"></DatePicker> <DatePicker
</FormItem></Col> type="daterange"
<Col :span="12" :v-if="condition.lastModifierUserId.show"><FormItem :label="l('lastModifierUserId')" prop="lastModifierUserId"> <Input v-model="condition.lastModifierUserId.value"> </Input> v-model="condition.creationTime.value"
</FormItem></Col> ></DatePicker> </FormItem
<Col :span="12" :v-if="condition.deletionTime.show"><FormItem :label="l('deletionTime')" prop="deletionTime"> <DatePicker type="daterange" v-model="condition.deletionTime.value"></DatePicker> ></Col>
</FormItem></Col> <Col :span="12" :v-if="condition.creatorUserId.show"
<Col :span="12" :v-if="condition.name.show"><FormItem :label="l('name')" prop="name"> <Input v-model="condition.name.value"> </Input> ><FormItem :label="l('creatorUserId')" prop="creatorUserId">
</FormItem></Col> <Input v-model="condition.creatorUserId.value"> </Input> </FormItem
<Col :span="12" :v-if="condition.upId.show"><FormItem :label="l('upId')" prop="upId"> <Input v-model="condition.upId.value"> </Input> ></Col>
</FormItem></Col> <Col :span="12" :v-if="condition.lastModificationTime.show"
<Col :span="12" :v-if="condition.level.show"><FormItem :label="l('level')" prop="level"> <Input v-model="condition.level.value"> </Input> ><FormItem
</FormItem></Col> :label="l('lastModificationTime')"
<Col :span="12" :v-if="condition.tenantId.show"><FormItem :label="l('tenantId')" prop="tenantId"> <Input v-model="condition.tenantId.value"> </Input> prop="lastModificationTime"
</FormItem></Col> >
<Col :span="12" :v-if="condition.type.show"><FormItem :label="l('type')" prop="type"> <Input v-model="condition.type.value"> </Input> <DatePicker
</FormItem></Col> type="daterange"
<Col :span="12" :v-if="condition.englishFullName.show"><FormItem :label="l('englishFullName')" prop="englishFullName"> <Input v-model="condition.englishFullName.value"> </Input> v-model="condition.lastModificationTime.value"
</FormItem></Col> ></DatePicker> </FormItem
<Col :span="12" :v-if="condition.englishName.show"><FormItem :label="l('englishName')" prop="englishName"> <Input v-model="condition.englishName.value"> </Input> ></Col>
</FormItem></Col> <Col :span="12" :v-if="condition.lastModifierUserId.show"
<Col :span="12" :v-if="condition.status.show"><FormItem :label="l('status')" prop="status"> <Input v-model="condition.status.value"> </Input> ><FormItem :label="l('lastModifierUserId')" prop="lastModifierUserId">
</FormItem></Col> <Input v-model="condition.lastModifierUserId.value">
<Col :span="24" :v-if="condition.description.show"><FormItem :label="l('description')" prop="description"> <Input v-model="condition.description.value"> </Input> </Input> </FormItem
</FormItem></Col> ></Col>
<Col :span="12" :v-if="condition.inheritCategoryId.show"><FormItem :label="l('inheritCategoryId')" prop="inheritCategoryId"> <Input v-model="condition.inheritCategoryId.value"> </Input> <Col :span="12" :v-if="condition.deletionTime.show"
</FormItem></Col> ><FormItem :label="l('deletionTime')" prop="deletionTime">
<Col :span="12" :v-if="condition.code.show"><FormItem :label="l('code')" prop="code"> <Input v-model="condition.code.value"> </Input> <DatePicker
</FormItem></Col> type="daterange"
<Col :span="12" :v-if="condition.module.show"><FormItem :label="l('module')" prop="module"> <Input v-model="condition.module.value"> </Input> v-model="condition.deletionTime.value"
</FormItem></Col> ></DatePicker> </FormItem
<Col :span="12" :v-if="condition.version.show"><FormItem :label="l('version')" prop="version"> <Input v-model="condition.version.value"> </Input> ></Col>
</FormItem></Col> <Col :span="12" :v-if="condition.name.show"
<Col :span="12" :v-if="condition.projectId.show"><FormItem :label="l('projectId')" prop="projectId"> <Input v-model="condition.projectId.value"> </Input> ><FormItem :label="l('name')" prop="name">
</FormItem></Col> <Input v-model="condition.name.value"> </Input> </FormItem
</Row> ></Col>
</Form> <Col :span="12" :v-if="condition.upId.show"
><FormItem :label="l('upId')" prop="upId">
<Input v-model="condition.upId.value"> </Input> </FormItem
></Col>
<Col :span="12" :v-if="condition.level.show"
><FormItem :label="l('level')" prop="level">
<Input v-model="condition.level.value"> </Input> </FormItem
></Col>
<Col :span="12" :v-if="condition.tenantId.show"
><FormItem :label="l('tenantId')" prop="tenantId">
<Input v-model="condition.tenantId.value"> </Input> </FormItem
></Col>
<Col :span="12" :v-if="condition.type.show"
><FormItem :label="l('type')" prop="type">
<Input v-model="condition.type.value"> </Input> </FormItem
></Col>
<Col :span="12" :v-if="condition.englishFullName.show"
><FormItem :label="l('englishFullName')" prop="englishFullName">
<Input v-model="condition.englishFullName.value"> </Input> </FormItem
></Col>
<Col :span="12" :v-if="condition.englishName.show"
><FormItem :label="l('englishName')" prop="englishName">
<Input v-model="condition.englishName.value"> </Input> </FormItem
></Col>
<Col :span="12" :v-if="condition.status.show"
><FormItem :label="l('status')" prop="status">
<Input v-model="condition.status.value"> </Input> </FormItem
></Col>
<Col :span="24" :v-if="condition.description.show"
><FormItem :label="l('description')" prop="description">
<Input v-model="condition.description.value"> </Input> </FormItem
></Col>
<Col :span="12" :v-if="condition.inheritCategoryId.show"
><FormItem :label="l('inheritCategoryId')" prop="inheritCategoryId">
<Input v-model="condition.inheritCategoryId.value">
</Input> </FormItem
></Col>
<Col :span="12" :v-if="condition.code.show"
><FormItem :label="l('code')" prop="code">
<Input v-model="condition.code.value"> </Input> </FormItem
></Col>
<Col :span="12" :v-if="condition.module.show"
><FormItem :label="l('module')" prop="module">
<Input v-model="condition.module.value"> </Input> </FormItem
></Col>
<Col :span="12" :v-if="condition.version.show"
><FormItem :label="l('version')" prop="version">
<Input v-model="condition.version.value"> </Input> </FormItem
></Col>
<Col :span="12" :v-if="condition.projectId.show"
><FormItem :label="l('projectId')" prop="projectId">
<Input v-model="condition.projectId.value"> </Input> </FormItem
></Col>
</Row>
</Form>
</template> </template>
<script> <script>
import Api from './api' import Api from "./api";
export default { export default {
name: 'Add', name: "Add",
data() { data() {
return { return {
condition: { condition: {
id:{op:"Equal",value:null,show:true}, id: { op: "Equal", value: null, show: true },
creationTime:{op:"Range",value:null,show:true}, creationTime: { op: "Range", value: null, show: true },
creatorUserId:{op:"Equal",value:null,show:true}, creatorUserId: { op: "Equal", value: null, show: true },
lastModificationTime:{op:"Range",value:null,show:true}, lastModificationTime: { op: "Range", value: null, show: true },
lastModifierUserId:{op:"Equal",value:null,show:true}, lastModifierUserId: { op: "Equal", value: null, show: true },
deletionTime:{op:"Range",value:null,show:true}, deletionTime: { op: "Range", value: null, show: true },
name:{op:"Equal",value:null,show:true}, name: { op: "Equal", value: null, show: true },
upId:{op:"Equal",value:null,show:true}, upId: { op: "Equal", value: null, show: true },
level:{op:"Equal",value:null,show:true}, level: { op: "Equal", value: null, show: true },
tenantId:{op:"Equal",value:null,show:true}, tenantId: { op: "Equal", value: null, show: true },
type:{op:"Equal",value:null,show:true}, type: { op: "Equal", value: null, show: true },
englishFullName:{op:"Equal",value:null,show:true}, englishFullName: { op: "Equal", value: null, show: true },
englishName:{op:"Equal",value:null,show:true}, englishName: { op: "Equal", value: null, show: true },
status:{op:"Equal",value:null,show:true}, status: { op: "Equal", value: null, show: true },
description:{op:"Equal",value:null,show:true}, description: { op: "Equal", value: null, show: true },
inheritCategoryId:{op:"Equal",value:null,show:true}, inheritCategoryId: { op: "Equal", value: null, show: true },
code:{op:"Equal",value:null,show:true}, code: { op: "Equal", value: null, show: true },
module:{op:"Equal",value:null,show:true}, module: { op: "Equal", value: null, show: true },
version:{op:"Equal",value:null,show:true}, version: { op: "Equal", value: null, show: true },
projectId:{op:"Equal",value:null,show:true}, projectId: { op: "Equal", value: null, show: true },
}, },
} };
}, },
methods: { methods: {
handleClose() { handleClose() {
this.$emit('on-close') this.$emit("on-close");
}, },
l(key) { l(key) {
key = "project_atom" + "." + key; key = "project_atom" + "." + key;
return this.$t(key) return this.$t(key);
} },
} },
} };
</script> </script>
\ No newline at end of file
pages/system/project/project/add.vue
View file @ 736da3b1
...@@ -9,11 +9,11 @@ ...@@ -9,11 +9,11 @@
<FormItem :label="l('code')" prop="code"> <FormItem :label="l('code')" prop="code">
<Input v-model="entity.code"> </Input> </FormItem> <Input v-model="entity.code"> </Input> </FormItem>
</Col> </Col>
<Col :span="12"> <!-- <Col :span="12">
<FormItem :label="l('type')" prop="type"> <FormItem :label="l('type')" prop="type">
<Dictionary code="base.project.type" v-model="entity.type" ></Dictionary> <Dictionary code="base.project.type" v-model="entity.type" ></Dictionary>
</FormItem> </FormItem>
</Col> </Col> -->
<Col :span="12" <Col :span="12"
><FormItem :label="l('englishFullName')" prop="englishFullName"> ><FormItem :label="l('englishFullName')" prop="englishFullName">
<Input v-model="entity.englishFullName"> </Input> </FormItem <Input v-model="entity.englishFullName"> </Input> </FormItem
...@@ -75,8 +75,10 @@ export default { ...@@ -75,8 +75,10 @@ export default {
props: { props: {
v: Object, v: Object,
eid: Number, eid: Number,
typeValue:Number
}, },
mounted() { mounted() {
this.entity.type=this.typeValue;
// if (this.eid > 0) { // if (this.eid > 0) {
// this.load(this.eid); // this.load(this.eid);
// } // }
......
pages/system/project/project/index.vue
View file @ 736da3b1
...@@ -18,11 +18,17 @@ ...@@ -18,11 +18,17 @@
<Search /> <Search />
</template> </template>
<template slot="buttons"> <template slot="buttons">
<Button type="primary" @click="add">新增</Button> <Button type="primary" @click="add()">新增</Button>
</template> </template>
</TreeGrid> </TreeGrid>
<Modal v-model="modal" :title="title" width="1200" footer-hide> <Modal v-model="modal" :title="title" width="1200" footer-hide>
<component :is="detail" :eid="curId" @on-close="cancel" @on-ok="ok" /> <component
:is="detail"
:typeValue="typeValue"
:eid="curId"
@on-close="cancel"
@on-ok="ok"
/>
</Modal> </Modal>
</div> </div>
</template> </template>
...@@ -47,16 +53,12 @@ export default { ...@@ -47,16 +53,12 @@ export default {
easySearch: { easySearch: {
keys: { op: "name,englishFullName,englishName,code", value: null }, keys: { op: "name,englishFullName,englishName,code", value: null },
}, },
typeValue: 0,
modal: false, modal: false,
title: "新增", title: "新增",
detail: null, detail: null,
curId: 0, curId: 0,
columns: [ columns: [
{
key: "label",
title: "分类名称",
align: "left",
},
{ {
key: "name", key: "name",
title: this.l("name"), title: this.l("name"),
...@@ -64,6 +66,7 @@ export default { ...@@ -64,6 +66,7 @@ export default {
hide: true, hide: true,
easy: true, easy: true,
high: true, high: true,
tree: true,
}, },
{ {
...@@ -162,6 +165,7 @@ export default { ...@@ -162,6 +165,7 @@ export default {
Api.treepaged(data).then((r) => { Api.treepaged(data).then((r) => {
this.treeData = []; this.treeData = [];
this.treeData = r.result; this.treeData = r.result;
this.treeList=r.result;
this.treeData = this.$u.toTree( this.treeData = this.$u.toTree(
r.result, r.result,
0, 0,
...@@ -178,18 +182,20 @@ export default { ...@@ -178,18 +182,20 @@ export default {
this.curId = 0; this.curId = 0;
}, },
search() { search() {
console.log(this.easySearch); // console.log(this.easySearch);
console.log(this.$refs.grid); // console.log(this.$refs.grid);
// this.init(); this.init();
// this.$refs.grid.reload(this.easySearch); // this.$refs.grid.reload(this.easySearch);
}, },
add() { add() {
this.typeValue = 0;
this.curId = 0; this.curId = 0;
this.title = "新增"; this.title = "新增";
this.detail = () => import("./add"); this.detail = () => import("./add");
this.modal = true; this.modal = true;
}, },
rowadd(id) { rowadd(id) {
this.typeValue = 1;
this.curId = id; this.curId = id;
this.title = "新增"; this.title = "新增";
this.detail = () => import("./add"); this.detail = () => import("./add");
...@@ -208,7 +214,14 @@ export default { ...@@ -208,7 +214,14 @@ export default {
this.modal = true; this.modal = true;
}, },
remove(id) { remove(id) {
Api.delete(id).then((r) => { var len=this.treeList.filter(u=>{
return u.upId==id
}).length;
if(len>0){
this.$Message.warning("包含子对象，不能删除！")
return;
}
Api.delete(id).then((r) => {
if (r.success) { if (r.success) {
this.init(); this.init();
this.$Message.success("删除成功"); this.$Message.success("删除成功");
......
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