Commit 1d3e3871 authored by 周远喜's avatar 周远喜

ok

parent f21ee430
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="90">
<Row>
<Col span="24">
<FormItem :label="l('title')" prop="title">
<Input v-model="entity.title"></Input>
</FormItem>
</Col>
<Col span="24">
<FormItem :label="l('startendTime')" prop="startTime">
<TimePicker
type="timerange"
format="HH:mm"
v-model="entity.startendTime"
placeholder="请选择时间段"
></TimePicker>
</FormItem>
</Col>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
disabled: false,
entity: {},
rules: {
title: [{ required: true, message: '请填写班次名称', trigger: 'blur' }]
}
}
},
props: {
v: Object
},
methods: {
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
this.disabled = true
// let parmes = {
// pageIndex: 1,
// pageSize: 20,
// conditions: [
// {
// fieldName: 'keys',
// fieldValue: this.entity.title,
// conditionalType: 'title'
// }
// ],
// total: 4
// }
// Api.paged(parmes).then((r) => {
// console.log(r.success)
// if(r.success){
// this.$Message.error("该班次名称已存在!")
// this.disabled = true
// return
// }else{
let pames = {
title: this.entity.title,
startendTime: this.entity.startendTime.join('-')
}
Api.create(pames)
.then((r) => {
if (r.success) {
// this.disabled = false
this.$Message.success('保存成功')
this.entity = {}
this.$emit('on-ok')
} else {
this.$Message.error('保存失败')
}
})
.catch((err) => {
this.$Message.error('保存失败')
console.warn(err)
})
}
})
// }
// })
},
handleClose() {
this.entity = {}
this.disabled = true
this.$emit('on-close')
},
l(key) {
key = 'calendar_class' + '.' + key
return this.$t(key)
}
},
watch: {
v() {
this.entity = this.$u.clone(this.v)
}
}
}
</script>
\ No newline at end of file
import Api from '@/plugins/request'
export default {
index:`${systemUrl}/calendarclass/paged`,
paged(params){
return Api.post(`${systemUrl}/calendarclass/paged`,params);
},
get(params){
return Api.get(`${systemUrl}/calendarclass/get`,params);
},
create(params){
return Api.post(`${systemUrl}/calendarclass/create`,params);
},
update(params){
return Api.post(`${systemUrl}/calendarclass/update`,params);
},
//删除:
delete(params) {
return Api.delete(`${systemUrl}/calendarclass/delete`,{params:params});
},
}
\ No newline at end of file
<template>
<div class="detail">
<Row>
<Filed :span="12" :name="l('title')">{{entity.title}}</Filed>
<Filed :span="12" :name="l('startTime')">{{entity.startTime}}</Filed>
<Filed :span="12" :name="l('endTime')">{{entity.endTime}}</Filed>
<Filed :span="12" :name="l('workHours')">{{entity.workHours}}</Filed>
</Row>
</div>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
entity: {},
rules: {
name: [{ required: true, message: '必填', trigger: 'blur' }],
code: [{ required: true, message: '必填', trigger: 'blur' }]
}
}
},
props: {
eid: Number
},
methods: {
load(v) {
Api.get({ id: v }).then(r => {
this.entity = r.result;
this.$emit('on-load')
})
},
handleClose() {
this.$emit('on-close')
},
l(key) {
key = "calendar_class" + "." + key;
return this.$t(key)
}
},
watch: {
eid(v) {
if (v != 0) {
this.load(v);
}
}
}
}
</script>
\ No newline at end of file
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="90">
<Row>
<Col span="24">
<FormItem :label="l('title')" prop="title">
<Input v-model="entity.title"></Input>
</FormItem>
</Col>
<Col span="24">
<!-- prop="startendTime" -->
<FormItem :label="l('startendTime')">
<TimePicker type="timerange" format="HH:mm" v-model="entity.startendTime" placeholder="请选择时间段"></TimePicker>
</FormItem>
</Col>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import Api from './api'
export default {
name: 'Edit',
data() {
return {
disabled: false,
entity: {},
rules: {
title: [{ required: true, message: '请填写班次名称', trigger: 'blur' }],
// startendTime: [{ required: true, message: '请选择时间段', trigger: 'blur' }],
}
}
},
props: {
eid: Number
},
methods: {
load(v) {
Api.get({ id: v }).then((r) => {
r.result.startendTime=r.result.startendTime.split('-')
this.entity = r.result
this.$emit('on-load')
})
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
let startendTime = this.entity.startendTime
let pames={
title: this.entity.title,
startendTime: startendTime.join('-'),
workHours: this.entity.workHours,
creationTime: this.entity.creationTime,
creatorUserId: this.entity.creatorUserId,
id: this.entity.id,
}
Api.update(pames)
.then((r) => {
this.disabled = false
if (r.success) {
this.$Message.success('保存成功')
this.$emit('on-ok')
} else {
this.$Message.error('保存失败')
}
})
.catch((err) => {
this.disabled = false
this.$Message.error('保存失败')
console.warn(err)
})
}
})
},
handleClose() {
this.$emit('on-close')
},
l(key) {
key = 'calendar_class' + '.' + key
return this.$t(key)
}
},
watch: {
eid(v) {
if (v != 0) {
this.load(v)
}
}
}
}
</script>
\ No newline at end of file
<template>
<div class="classview">
<DataGrid :columns="columns" ref="grid" :action="action" :height="tableHeight"
@on-selection-change="selectionChange" :high="false">
<!-- :height="tabheight" -->
<template slot="easySearch">
<Form ref="formInline" :model="easySearch" inline>
<FormItem prop="keys">
<Input placeholder="请输入关键字班次名称" v-model="easySearch.keys.value" />
</FormItem>
<FormItem>
<Button type="primary" @click="search">查询</Button>
</FormItem>
</Form>
</template>
<template slot="searchForm">
<Search />
</template>
<template slot="buttons">
<Button type="primary" @click="addModal=true">新增</Button>
</template>
</DataGrid>
<div class="footer02" v-if="footerModel">
<span class="span">
已选择
<b class="span02">{{selectedRows.length}}</b>
</span>
<Button @click="deleteMore" class="span ml20"><Icon type="md-close"/>批量删除</Button>
</div>
<Modal v-model="addModal" title="新增" footer-hide>
<Add @on-close="cancel" @on-ok="addOk" />
</Modal>
<Modal v-model="editModal" title="编辑" footer-hide>
<Edit :eid="curId" @on-close="cancel" @on-ok="addOk" />
</Modal>
<Modal v-model="deletelModal" title="删除" @on-ok="removeOk" @on-cancel="cancel">
<p>确定删除?</p>
</Modal>
<Modal v-model="deletelMore" title="批量删除"@on-ok="cancel" @on-cancel="cancel">
<p>确定删除这{{selectedRows.length}}项么?</p>
</Modal>
</div>
</template>
<script>
import Api from './api'
import Add from './add'
import Edit from './edit'
import Detail from './detail'
import Search from './search'
export default {
name: 'list',
components: {
Add,
Edit,
Detail,
Search
},
data() {
return {
action: Api.index,
easySearch: {
keys: { op: 'title', value: null }
},
addModal: false,
editModal: false,
deletelModal: false,
selectedRows: [], //表格选中项
footerModel: false,
deletelMore: false,
tableHeight: '',
curId: 0,
columns: [
// { type: 'selection', width: 70, align: 'center'},
{ key: 'id', title: this.l('id'), hide: true, align: 'left' },
{
key: 'creationTime',
title: this.l('creationTime'),
hide: true,
align: 'left'
},
{
key: 'creatorUserId',
title: this.l('creatorUserId'),
hide: true,
align: 'left'
},
{
key: 'lastModificationTime',
title: this.l('lastModificationTime'),
hide: true,
align: 'left'
},
{
key: 'lastModifierUserId',
title: this.l('lastModifierUserId'),
hide: true,
align: 'left'
},
{
key: 'isDeleted',
title: this.l('isDeleted'),
hide: true,
align: 'left'
},
{
key: 'deletionTime',
title: this.l('deletionTime'),
hide: true,
align: 'left'
},
{
key: 'deleterUserId',
title: this.l('deleterUserId'),
hide: true,
align: 'left'
},
{
key: 'title',
title: this.l('title'),
align: 'left',
easy: true,
high: true
},
{
key: 'startendTime',
title: this.l('startendTime'),
align: 'left',
high: true,
},
{
key: 'startTime',
title: this.l('startTime'),
align: 'left',
hide: true,
high: true
},
{ key: 'endTime', title: this.l('endTime'), align: 'left',
hide: true, high: true },
{
key: 'workHours',
title: this.l('workHours'),
align: 'left',
high: true
},
{
title: '操作',
key: 'id',
width: 140,
align: 'center',
render: (h, params) => {
return h('div', { class: 'action' }, [
h(
'op',
{
attrs: { oprate: 'edit' },
on: { click: () => this.edit(params.row.id) }
},
'编辑'
),
h(
'op',
{
attrs: { oprate: 'remove' },
on: { click: () => this.remove(params.row.id) }
},
'删除'
)
])
}
}
]
}
},
created(){
this.tableHeight = window.innerHeight - 230
},
mounted() {
window.onresize = () => {///浏览器窗口大小变化
return (() => {
window.screenHeight = window.innerHeight
this.tableHeight = window.screenHeight - 230
})()
}
},
async fetch({ store, params }) {
await store.dispatch('loadDictionary') // 加载数据字典
},
methods: {
addOk() {
this.$refs.grid.load()
this.addModal = false
this.editModal = false
this.curId = 0
},
search() {
this.$refs.grid.reload(this.easySearch)
},
edit(id) {
this.editModal = true
this.curId = id
},
remove(id) {
this.deletelModal = true
this.curId = id
},
removeOk() {
Api.delete({ id: this.curId }).then((r) => {
if (r.success) {
this.$refs.grid.load()
this.deletelModal = false
this.$Message.success('删除成功')
}
})
},
removeCancel() {
this.deletelModal = false
},
cancel() {
this.curId = 0
this.addModal = false
this.editModal = false
this.deletedlModal = false
this.deletelMore = false
},
//多选处理--表格选择项变化方法
selectionChange(selection) {
this.selectedRows = selection
this.footerModel = selection.length > 0
},
deleteMore(){
this.deletelMore = true
},
l(key) {
/*
calendar_class:{
id:'',
creationTime:'创建时间',
creatorUserId:'创建人',
lastModificationTime:'更新时间',
lastModifierUserId:'更新人',
isDeleted:'删除人',
deletionTime:'删除时间',
deleterUserId:'删除人',
title:'班次名称',
startTime:'开始时间',
endTime:'结束时间',
workHours:'工作时长',
}
*/
let vkey = 'calendar_class' + '.' + key
return this.$t(vkey) || key
}
}
}
</script>
<style lang="less">
.classview{
height: 100%;
.footer02 {
background: #4c5968;
opacity: 0.9;
position: absolute;
bottom: 9px;
box-shadow: 0px -5px 6px rgba(0,0,0,0.3);
width: 86%;
z-index: 99;
padding: 10px;
color: #fff;
margin: 10px 0 10px 0;
}
}
</style>
\ No newline at end of file
<template>
<Form ref="form" :model="condition" :label-width="90">
<Row>
<Col :span="12" :v-if="condition.id.show"><FormItem :label="l('id')" prop="id"> <Input v-model="condition.id.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.creationTime.show"><FormItem :label="l('creationTime')" prop="creationTime"> <DatePicker type="daterange" v-model="condition.creationTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.creatorUserId.show"><FormItem :label="l('creatorUserId')" prop="creatorUserId"> <Input v-model="condition.creatorUserId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.lastModificationTime.show"><FormItem :label="l('lastModificationTime')" prop="lastModificationTime"> <DatePicker type="daterange" v-model="condition.lastModificationTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.lastModifierUserId.show"><FormItem :label="l('lastModifierUserId')" prop="lastModifierUserId"> <Input v-model="condition.lastModifierUserId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.isDeleted.show"><FormItem :label="l('isDeleted')" prop="isDeleted"> <Input v-model="condition.isDeleted.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.deletionTime.show"><FormItem :label="l('deletionTime')" prop="deletionTime"> <DatePicker type="daterange" v-model="condition.deletionTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.deleterUserId.show"><FormItem :label="l('deleterUserId')" prop="deleterUserId"> <Input v-model="condition.deleterUserId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.title.show"><FormItem :label="l('title')" prop="title"> <Input v-model="condition.title.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.startTime.show"><FormItem :label="l('startTime')" prop="startTime"> <DatePicker type="daterange" v-model="condition.startTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.endTime.show"><FormItem :label="l('endTime')" prop="endTime"> <DatePicker type="daterange" v-model="condition.endTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.workHours.show"><FormItem :label="l('workHours')" prop="workHours"> <Input v-model="condition.workHours.value"> </Input>
</FormItem></Col>
</Row>
</Form>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
condition: {
id:{op:"Equal",value:null,show:false},
creationTime:{op:"Range",value:null,show:false},
creatorUserId:{op:"Equal",value:null,show:false},
lastModificationTime:{op:"Range",value:null,show:false},
lastModifierUserId:{op:"Equal",value:null,show:false},
isDeleted:{op:"Equal",value:null,show:false},
deletionTime:{op:"Range",value:null,show:false},
deleterUserId:{op:"Equal",value:null,show:false},
title:{op:"Equal",value:null,show:true},
startTime:{op:"Range",value:null,show:true},
endTime:{op:"Range",value:null,show:true},
workHours:{op:"Equal",value:null,show:true},
},
}
},
methods: {
handleClose() {
this.$emit('on-close')
},
l(key) {
key = "calendar_class" + "." + key;
return this.$t(key)
}
}
}
</script>
\ No newline at end of file
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="90">
<Row>
<Col :span="24">
<FormItem :label="l('title')" prop="title">
<Input v-model="entity.title"></Input>
</FormItem>
</Col>
<Col :span="24">
<FormItem :label="l('startTime')" prop="startTime">
<DatePicker type="date" v-model="entity.startTime"></DatePicker>
</FormItem>
</Col>
<Col :span="24">
<FormItem :label="l('endTime')" prop="endTime">
<DatePicker type="date" v-model="entity.endTime"></DatePicker>
</FormItem>
</Col>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
disabled: false,
entity: {},
rules: {
name: [{ required: true, message: '必填', trigger: 'blur' }]
}
}
},
props: {
v: Object
},
methods: {
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
this.disabled = true
Api.create(this.entity)
.then((r) => {
this.disabled = false
if (r.success) {
this.$Message.success('保存成功')
this.$emit('on-ok')
} else {
this.$Message.error('保存失败')
}
})
.catch((err) => {
this.disabled = false
this.$Message.error('保存失败')
console.warn(err)
})
}
})
},
handleClose() {
this.$emit('on-close')
},
l(key) {
key = 'calendar_holiday' + '.' + key
return this.$t(key)
}
},
watch: {
v() {
this.entity = this.$u.clone(this.v)
}
}
}
</script>
\ No newline at end of file
import Api from '@/plugins/request'
export default {
index:`${systemUrl}/calendarholiday/paged`,
paged(params){
return Api.post(`${systemUrl}/calendarholiday/paged`,params);
},
get(params){
return Api.get(`${systemUrl}/calendarholiday/get`,params);
},
create(params){
return Api.post(`${systemUrl}/calendarholiday/create`,params);
},
update(params){
return Api.post(`${systemUrl}/calendarholiday/update`,params);
},
//删除:
delete(params) {
return Api.delete(`${systemUrl}/calendarholiday/delete`,{params:params});
},
}
\ No newline at end of file
<template>
<div class="detail">
<Row>
<Filed :span="12" :name="l('title')">{{entity.title}}</Filed>
<Filed :span="12" :name="l('startTime')">{{entity.startTime}}</Filed>
<Filed :span="12" :name="l('days')">{{entity.days}}</Filed>
<Filed :span="12" :name="l('endTime')">{{entity.endTime}}</Filed>
</Row>
</div>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
entity: {},
rules: {
name: [{ required: true, message: '必填', trigger: 'blur' }],
code: [{ required: true, message: '必填', trigger: 'blur' }]
}
}
},
props: {
eid: Number
},
methods: {
load(v) {
Api.get({ id: v }).then(r => {
this.entity = r.result;
this.$emit('on-load')
})
},
handleClose() {
this.$emit('on-close')
},
l(key) {
key = "calendar_holiday" + "." + key;
return this.$t(key)
}
},
watch: {
eid(v) {
if (v != 0) {
this.load(v);
}
}
}
}
</script>
\ No newline at end of file
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="90">
<Row>
<Col :span="24">
<FormItem :label="l('title')" prop="title">
<Input v-model="entity.title"></Input>
</FormItem>
</Col>
<Col :span="24">
<FormItem :label="l('startTime')" prop="startTime">
<DatePicker type="date" v-model="entity.startTime"></DatePicker>
</FormItem>
</Col>
<Col :span="24">
<FormItem :label="l('endTime')" prop="endTime">
<DatePicker type="date" v-model="entity.endTime"></DatePicker>
</FormItem>
</Col>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import Api from './api'
export default {
name: 'Edit',
data() {
return {
disabled: false,
entity: {},
rules: {
name: [{ required: true, message: '必填', trigger: 'blur' }]
}
}
},
props: {
eid: Number
},
methods: {
load(v) {
Api.get({ id: v }).then((r) => {
this.entity = r.result
this.$emit('on-load')
})
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
this.disabled = true
Api.update(this.entity)
.then((r) => {
this.disabled = false
if (r.success) {
this.$Message.success('保存成功')
this.$emit('on-ok')
} else {
this.$Message.error('保存失败')
}
})
.catch((err) => {
this.disabled = false
this.$Message.error('保存失败')
console.warn(err)
})
}
})
},
handleClose() {
this.$emit('on-close')
},
l(key) {
key = 'calendar_holiday' + '.' + key
return this.$t(key)
}
},
watch: {
eid(v) {
if (v != 0) {
this.load(v)
}
}
}
}
</script>
\ No newline at end of file
<template>
<div class="holiday">
<DataGrid :columns="columns" ref="grid" :action="action" :high="false" :height="tableHeight"
@on-selection-change="selectionChange" >
<template slot="easySearch">
<Form ref="formInline" :model="easySearch" inline>
<FormItem prop="keys">
<Input placeholder="请输入关键字节日名称" v-model="easySearch.keys.value" />
</FormItem>
<FormItem>
<Button type="primary" @click="search">查询</Button>
</FormItem>
</Form>
</template>
<template slot="searchForm">
<Search />
</template>
<template slot="buttons">
<Button type="primary" @click="addModal=true">新增</Button>
</template>
</DataGrid>
<div class="footer02" v-if="footerModel">
<span class="span">
已选择
<b class="span02">{{selectedRows.length}}</b>
</span>
<Button @click="deleteMore" class="span ml20"><Icon type="md-close"/>批量删除</Button>
</div>
<Modal v-model="addModal" title="新增" footer-hide>
<Add @on-close="cancel" @on-ok="addOk" />
</Modal>
<Modal v-model="editModal" title="编辑" footer-hide>
<Edit :eid="curId" @on-close="cancel" @on-ok="addOk" />
</Modal>
<Modal v-model="deletelModal" title="删除" @on-ok="removeOk" @on-cancel="cancel">
<p>确定删除?</p>
</Modal>
<Modal v-model="deletelMore" title="批量删除"@on-ok="cancel" @on-cancel="cancel">
<p>确定删除这{{selectedRows.length}}项么?</p>
</Modal>
</div>
</template>
<script>
import Api from './api'
import Add from './add'
import Edit from './edit'
import Detail from './detail'
import Search from './search'
export default {
name: 'list',
components: {
Add,
Edit,
Detail,
Search
},
data() {
return {
action: Api.index,
easySearch: {
keys: { op: 'title', value: null }
},
addModal: false,
editModal: false,
deletelModal: false,
selectedRows: [], //表格选中项
footerModel: false,
deletelMore: false,
tableHeight: '',
curId: 0,
columns: [
// { type: 'selection', width: 70, align: 'center'},
{ key: 'id', title: this.l('id'), hide: true, align: 'left' },
{
key: 'creationTime',
title: this.l('creationTime'),
hide: true,
align: 'left'
},
{
key: 'creatorUserId',
title: this.l('creatorUserId'),
hide: true,
align: 'left'
},
{
key: 'lastModificationTime',
title: this.l('lastModificationTime'),
hide: true,
align: 'left'
},
{
key: 'lastModifierUserId',
title: this.l('lastModifierUserId'),
hide: true,
align: 'left'
},
{
key: 'isDeleted',
title: this.l('isDeleted'),
hide: true,
align: 'left'
},
{
key: 'deletionTime',
title: this.l('deletionTime'),
hide: true,
align: 'left'
},
{
key: 'deleterUserId',
title: this.l('deleterUserId'),
hide: true,
align: 'left'
},
{
key: 'title',
title: this.l('title'),
align: 'left',
easy: true,
high: true
},
{
key: 'startTime',
title: this.l('startTime'),
align: 'left',
high: true
},
{
key: 'days',
title: this.l('days'),
hide: true,
align: 'left',
high: true
},
{
key: 'status',
title: this.l('status'),
hide: true,
align: 'left',
high: true
},
{ key: 'endTime', title: this.l('endTime'), align: 'left', high: true },
{
title: '操作',
key: 'id',
width: 140,
align: 'center',
render: (h, params) => {
return h('div', { class: 'action' }, [
h(
'op',
{
attrs: { oprate: 'edit' },
on: { click: () => this.edit(params.row.id) }
},
'编辑'
),
h(
'op',
{
attrs: { oprate: 'remove' },
on: { click: () => this.remove(params.row.id) }
},
'删除'
)
])
}
}
]
}
},
created(){
this.tableHeight = window.innerHeight - 230
},
mounted() {
// console.log(this)
window.onresize = () => {///浏览器窗口大小变化
return (() => {
window.screenHeight = window.innerHeight
this.tableHeight = window.screenHeight - 230
})()
}
},
async fetch({ store, params }) {
await store.dispatch('loadDictionary') // 加载数据字典
},
methods: {
addOk() {
this.$refs.grid.load()
this.addModal = false
this.editModal = false
this.curId = 0
},
search() {
this.$refs.grid.reload(this.easySearch)
},
edit(id) {
this.editModal = true
this.curId = id
},
remove(id) {
this.deletelModal = true
this.curId = id
},
removeOk() {
Api.delete({ id: this.curId }).then((r) => {
if (r.success) {
this.$refs.grid.load()
this.deletelModal = false
this.$Message.success('删除成功')
}
})
},
removeCancel() {
this.deletelModal = false
},
cancel() {
this.curId = 0
this.addModal = false
this.editModal = false
this.deletedlModal = false
this.deletelMore = false
},
//多选处理--表格选择项变化方法
selectionChange(selection) {
this.selectedRows = selection
this.footerModel = selection.length > 0
},
deleteMore(){
this.deletelMore = true
},
l(key) {
/*
calendar_holiday:{
id:'',
creationTime:'创建时间',
creatorUserId:'创建人',
lastModificationTime:'更新时间',
lastModifierUserId:'更新人',
isDeleted:'删除人',
deletionTime:'删除时间',
deleterUserId:'删除人',
title:'节日名称',
startTime:'开始时间',
days:'工作时长(小时)',
status:'状态',
endTime:'结束时间',
}
*/
let vkey = 'calendar_holiday' + '.' + key
return this.$t(vkey) || key
}
}
}
</script>
<style lang="less">
.holiday{
.footer02{
background: #4c5968;
opacity: 0.9;
position: absolute;
bottom: 9px;
box-shadow: 0px -5px 6px rgba(0,0,0,0.3);
width: 86%;
z-index: 99;
padding: 10px;
color: #fff;
margin: 10px 0 10px 0;
}
}
</style>
\ No newline at end of file
<template>
<Form ref="form" :model="condition" :label-width="90">
<Row>
<Col :span="12" :v-if="condition.id.show"><FormItem :label="l('id')" prop="id"> <Input v-model="condition.id.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.creationTime.show"><FormItem :label="l('creationTime')" prop="creationTime"> <DatePicker type="daterange" v-model="condition.creationTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.creatorUserId.show"><FormItem :label="l('creatorUserId')" prop="creatorUserId"> <Input v-model="condition.creatorUserId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.lastModificationTime.show"><FormItem :label="l('lastModificationTime')" prop="lastModificationTime"> <DatePicker type="daterange" v-model="condition.lastModificationTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.lastModifierUserId.show"><FormItem :label="l('lastModifierUserId')" prop="lastModifierUserId"> <Input v-model="condition.lastModifierUserId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.isDeleted.show"><FormItem :label="l('isDeleted')" prop="isDeleted"> <Input v-model="condition.isDeleted.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.deletionTime.show"><FormItem :label="l('deletionTime')" prop="deletionTime"> <DatePicker type="daterange" v-model="condition.deletionTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.deleterUserId.show"><FormItem :label="l('deleterUserId')" prop="deleterUserId"> <Input v-model="condition.deleterUserId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.title.show"><FormItem :label="l('title')" prop="title"> <Input v-model="condition.title.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.startTime.show"><FormItem :label="l('startTime')" prop="startTime"> <DatePicker type="daterange" v-model="condition.startTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.days.show"><FormItem :label="l('days')" prop="days"> <Input v-model="condition.days.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.status.show"><FormItem :label="l('status')" prop="status"> <Dictionary v-model="condition.status.value"></Dictionary>
</FormItem></Col>
<Col :span="12" :v-if="condition.endTime.show"><FormItem :label="l('endTime')" prop="endTime"> <DatePicker type="daterange" v-model="condition.endTime.value"></DatePicker>
</FormItem></Col>
</Row>
</Form>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
condition: {
id:{op:"Equal",value:null,show:false},
creationTime:{op:"Range",value:null,show:false},
creatorUserId:{op:"Equal",value:null,show:false},
lastModificationTime:{op:"Range",value:null,show:false},
lastModifierUserId:{op:"Equal",value:null,show:false},
isDeleted:{op:"Equal",value:null,show:false},
deletionTime:{op:"Range",value:null,show:false},
deleterUserId:{op:"Equal",value:null,show:false},
title:{op:"Equal",value:null,show:true},
startTime:{op:"Range",value:null,show:true},
days:{op:"Equal",value:null,show:true},
status:{op:"Equal",value:null,show:true},
endTime:{op:"Range",value:null,show:true},
},
}
},
methods: {
handleClose() {
this.$emit('on-close')
},
l(key) {
key = "calendar_holiday" + "." + key;
return this.$t(key)
}
}
}
</script>
\ No newline at end of file
<template>
<classView></classView>
</template>
<script>
import classView from './class/index'
export default {
components:{classView},
}
</script>
<style lang="less">
.footer02 {
background: #4c5968;
opacity: 0.9;
position: absolute;
bottom: 9px;
box-shadow: 0px -5px 6px rgba(0,0,0,0.3);
width: 83%;
z-index: 99;
padding: 10px;
color: #fff;
margin: 10px 0 10px 0;
}
</style>
\ No newline at end of file
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<Row>
<Col :span="24">
<FormItem :label="l('title')" prop="title">
<Input v-model="entity.title"></Input>
</FormItem>
</Col>
<Col :span="24">
<FormItem :label="l('holidayTitle')" prop="holidayId">
<Select v-model="entity.holidayId" multiple @on-change="getItems">
<Option
v-for="item in orderCatList"
:value="item.id"
:key="item.index"
:label="item.title+'('+ item.startendTime +')'"
></Option>
</Select>
</FormItem>
</Col>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
disabled: false,
entity: {
id:[],
title:"",
holidayId:[],
holidayTitle:"",
selectItems:[],//选中的加班日历
},
orderCatList: [],
rules: {
title: [{ required: true, message: '请填写日历名称', trigger: 'blur' }],
holidayId: [
{ required: true, type: 'array', min: 1, message: '请选择关联假日', trigger: 'change' },
]
}
}
},
props: {
v: Object
},
created() {
this.selectAry()
},
methods: {
selectAry() {
Api.getlist().then((res) => {
this.orderCatList = res.result
})
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
this.disabled = true
let titles=[];
this.selectItems.map(u=>{
titles.push(u.title+"("+u.startendTime+")")
})
let parme = {
title:this.entity.title,
holidayTitle:titles.join(),
holidayId:this.entity.holidayId.join(),
}
Api.create(parme)
.then((r) => {
this.disabled = false
if (r.success) {
this.$Message.success('保存成功')
this.entity.holidayId=[];
this.$refs.form.resetFields();
this.$emit('on-ok')
} else {
this.$Message.error('保存失败')
}
})
.catch((err) => {
this.disabled = false
this.$Message.error('保存失败')
console.warn(err)
})
}
})
},
handleClose() {
this.$emit('on-close')
},
getItems(v){ //获取所有选中项;
var items=this.orderCatList.filter(u=>{
return v.indexOf(u.id)>-1
})
this.selectItems=items;
},
getHours(){ //获取工时
let sum=0;
this.selectItems.map(u=>{
sum+=u.workHours;
});
return sum;
},
l(key) {
key = 'calendar_overtime' + '.' + key
return this.$t(key)
}
},
watch: {
v() {
this.entity = this.$u.clone(this.v)
}
}
}
</script>
\ No newline at end of file
import Api from '@/plugins/request'
export default {
index: `${systemUrl}/calendarovertime/paged`,
paged (params) {
return Api.post(`${systemUrl}/calendarovertime/paged`, params)
},
getlist (params) {
return Api.get(`${systemUrl}/calendarovertime/getselectclass`, params)
},
getWeekTypeList (params) {
return Api.post(`${systemUrl}/calendarweektype/list`, params)
},
setweek (params) {
return Api.post(`${systemUrl}/calendarweektype/setweek`, params)
},
getsetweek (params) {
return Api.get(`${systemUrl}/calendarweektype/getcurrentset`, params)
},
get (params) {
return Api.get(`${systemUrl}/calendarovertime/get`, params)
},
create (params) {
return Api.post(`${systemUrl}/calendarovertime/create`, params)
},
update (params) {
return Api.post(`${systemUrl}/calendarovertime/update`, params)
},
//删除:
delete (params) {
return Api.delete(`${systemUrl}/calendarovertime/delete`, {
params: params
})
}
}
<template>
<div class="detail">
<Row>
<Filed :span="12" :name="l('title')">{{entity.title}}</Filed>
<Filed :span="12" :name="l('restType')">{{entity.restType}}</Filed>
<Filed :span="12" :name="l('holidayId')">{{entity.holidayId}}</Filed>
<Filed :span="12" :name="l('holidayTitle')">{{entity.holidayTitle}}</Filed>
<Filed :span="12" :name="l('holidayStartendTime')">{{entity.holidayStartendTime}}</Filed>
<Filed :span="12" :name="l('status')">{{entity.status}}</Filed>
</Row>
</div>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
entity: {},
rules: {
name: [{ required: true, message: '必填', trigger: 'blur' }],
code: [{ required: true, message: '必填', trigger: 'blur' }]
}
}
},
props: {
eid: Number
},
methods: {
load(v) {
Api.get({ id: v }).then(r => {
this.entity = r.result;
this.$emit('on-load')
})
},
handleClose() {
this.$emit('on-close')
},
l(key) {
key = "calendar_overtime" + "." + key;
return this.$t(key)
}
},
watch: {
eid(v) {
if (v != 0) {
this.load(v);
}
}
}
}
</script>
\ No newline at end of file
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<Row>
<Col :span="24">
<FormItem :label="l('title')" prop="title">
<Input v-model="entity.title"></Input>
</FormItem>
</Col>
<Col :span="24">
<FormItem :label="l('holidayTitle')" prop="classId">
<Select v-model="entity.classId" @on-change="getItems" multiple>
<Option
v-for="item in orderCatList"
:value="item.id"
:key="item.index"
:label="item.title+'('+ item.startendTime +')'"
></Option>
</Select>
</FormItem>
</Col>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import Api from './api'
export default {
name: 'Edit',
data() {
return {
disabled: false,
entity: {},
selectItems: [], //选中的加班日历
orderCatList: [],
rules: {
title: [{ required: true, message: '请填写日历名称', trigger: 'blur' }],
classId: [
{ required: true, type: 'array', min: 1, message: '请选择关联节日', trigger: 'change' },
]
}
}
},
props: {
eid: Number
},
created() {
this.selectAry()
},
methods: {
selectAry() {
Api.getlist().then((res) => {
this.orderCatList = res.result
})
},
load(v) {
Api.get({ id: v }).then((r) => {
let dataForm = r.result
if (dataForm.holidayId) {
let ids = dataForm.holidayId.split(',')
var uids = []
ids.map((u) => {
uids.push(parseInt(u))
})
this.getItems(uids)
dataForm.classId = uids
} else {
dataForm.classId = []
}
this.entity = dataForm
this.$emit('on-load')
})
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
this.disabled = true
let titles = []
this.selectItems.map((u) => {
titles.push(u.title + '(' + u.startendTime + ')')
})
this.entity.holidayTitle = titles.join()
var data = this.$u.clone(this.entity)
data.holidayId = this.entity.classId.join()
Api.update(data)
.then((r) => {
this.disabled = false
if (r.success) {
this.$Message.success('保存成功')
this.$emit('on-ok')
} else {
this.$Message.error('保存失败')
}
})
.catch((err) => {
this.disabled = false
this.$Message.error('保存失败')
console.warn(err)
})
}
})
},
getItems(v) {
var items = this.orderCatList.filter((u) => {
return v.indexOf(u.id) > -1
})
this.selectItems = items
},
handleClose() {
this.$emit('on-close')
},
l(key) {
key = 'calendar_overtime' + '.' + key
return this.$t(key)
}
},
watch: {
eid(v) {
if (v != 0) {
this.load(v)
}
}
}
}
</script>
\ No newline at end of file
<template>
<div class="overtime">
<DataGrid
:columns="columns"
ref="grid"
:height="tableHeight"
:action="action"
:high="false"
@on-selection-change="selectionChange"
>
<template slot="easySearch">
<Form ref="formInline" :model="easySearch" inline>
<FormItem prop="keys">
<Input placeholder="请输入关键字日历名称" v-model="easySearch.keys.value" />
</FormItem>
<FormItem>
<Button type="primary" @click="search">查询</Button>
</FormItem>
</Form>
</template>
<template slot="searchForm">
<Search />
</template>
<template slot="buttons">
<span>公休日设置:</span>
<RadioGroup v-model="weekType" @on-change="radioChange">
<Radio v-for="(item,index) in weekTypeList" :key="index" :label="item.title" border></Radio>
</RadioGroup>
</template>
<template slot="buttons">
<Button type="primary" @click="addModal=true">新增</Button>
</template>
</DataGrid>
<div class="footer02" v-if="footerModel">
<span class="span">
已选择
<b class="span02">{{selectedRows.length}}</b>
</span>
<Button @click="deleteMore" class="span ml20">
<Icon type="md-close" />批量删除
</Button>
</div>
<Modal v-model="addModal" title="新增" footer-hide>
<Add @on-close="cancel" @on-ok="addOk" />
</Modal>
<Modal v-model="editModal" title="编辑" footer-hide>
<Edit :eid="curId" @on-close="cancel" @on-ok="addOk" />
</Modal>
<Modal v-model="deletelModal" title="删除" @on-ok="removeOk" @on-cancel="cancel">
<p>确定删除?</p>
</Modal>
<Modal v-model="deletelMore" title="批量删除" @on-ok="cancel" @on-cancel="cancel">
<p>确定删除这{{selectedRows.length}}项么?</p>
</Modal>
</div>
</template>
<script>
import Api from './api'
import Add from './add'
import Edit from './edit'
import Detail from './detail'
import Search from './search'
export default {
name: 'list',
components: {
Add,
Edit,
Detail,
Search
},
data() {
return {
action: Api.index,
easySearch: {
keys: { op: 'title', value: null }
},
weekType: '',
weekTypeid: 0,
weekFlag: false,
weekTypeList: [],
tableHeight: '',
addModal: false,
editModal: false,
deletelModal: false,
selectedRows: [], //表格选中项
footerModel: false,
deletelMore: false,
curId: 0,
columns: [
// { type: 'selection', width: 70, align: 'center'},
{ key: 'id', title: this.l('id'), hide: true, align: 'left' },
{
key: 'creationTime',
title: this.l('creationTime'),
hide: true,
align: 'left'
},
{
key: 'creatorUserId',
title: this.l('creatorUserId'),
hide: true,
align: 'left'
},
{
key: 'lastModificationTime',
title: this.l('lastModificationTime'),
hide: true,
align: 'left'
},
{
key: 'lastModifierUserId',
title: this.l('lastModifierUserId'),
hide: true,
align: 'left'
},
{
key: 'isDeleted',
title: this.l('isDeleted'),
hide: true,
align: 'left'
},
{
key: 'deletionTime',
title: this.l('deletionTime'),
hide: true,
align: 'left'
},
{
key: 'deleterUserId',
title: this.l('deleterUserId'),
hide: true,
align: 'left'
},
{
key: 'title',
title: this.l('title'),
align: 'left',
easy: true,
high: true
},
{
key: 'restType',
title: this.l('restType'),
align: 'left',
hide: true,
high: true
},
{
key: 'holidayId',
title: this.l('holidayId'),
align: 'left',
hide: true,
high: true
},
{
key: 'holidayTitle',
title: this.l('holidayTitle'),
align: 'left',
high: true
},
{
key: 'status',
title: this.l('status'),
align: 'left',
hide: true,
high: true
},
{
title: '操作',
key: 'id',
width: 140,
align: 'center',
render: (h, params) => {
return h('div', { class: 'action' }, [
h(
'op',
{
attrs: { oprate: 'edit' },
on: { click: () => this.edit(params.row.id) }
},
'编辑'
),
h(
'op',
{
attrs: { oprate: 'remove' },
on: { click: () => this.remove(params.row.id) }
},
'删除'
)
])
}
}
]
}
},
created() {
this.getWeekTypeListFn()
this.tableHeight = window.innerHeight - 230
},
mounted() {
window.onresize = () => {
///浏览器窗口大小变化
return (() => {
window.screenHeight = window.innerHeight
this.tableHeight = window.screenHeight - 230
})()
}
},
async fetch({ store, params }) {
await store.dispatch('loadDictionary') // 加载数据字典
},
methods: {
getWeekTypeListFn() {
Api.getsetweek().then((res) => {
if (res.success) {
this.getweekList()
this.weekType = res.result.title
} else {
let parmse = {
conditions: [],
isDesc: true,
pageSize: 10
}
Api.getWeekTypeList(parmse).then((res) => {
this.weekTypeList = res.result
this.weekTypeList.map((v) => {
if ((v.isvalid = 1)) {
this.weekType = v.title
} else {
this.weekType = 0
}
})
})
}
})
},
//获取公休日数组
getweekList() {
let parmse = {
conditions: [],
isDesc: true,
pageSize: 10
}
Api.getWeekTypeList(parmse).then((res) => {
this.weekTypeList = res.result
})
},
//设置公休日
radioChange(a) {
let datArray = this.weekTypeList
datArray.map(u=>{
if(a== u.title){
this.weekTypeid = u.id
}
})
let id = this.weekTypeid
Api.setweek({ id: id }).then((res) => {
if (res.success) {
this.weekFlag = true
} else {
this.weekFlag = false
console.log('设置失败')
}
})
},
addOk() {
this.$refs.grid.load()
this.addModal = false
this.editModal = false
this.curId = 0
},
search() {
this.$refs.grid.reload(this.easySearch)
},
edit(id) {
this.editModal = true
this.curId = id
},
remove(id) {
this.deletelModal = true
this.curId = id
},
removeOk() {
Api.delete({ id: this.curId }).then((r) => {
if (r.success) {
this.$refs.grid.load()
this.deletelModal = false
this.$Message.success('删除成功')
}
})
},
removeCancel() {
this.deletelModal = false
},
cancel() {
this.curId = 0
this.addModal = false
this.editModal = false
this.deletedlModal = false
this.deletelMore = false
},
//多选处理--表格选择项变化方法
selectionChange(selection) {
this.selectedRows = selection
this.footerModel = selection.length > 0
},
deleteMore() {
this.deletelMore = true
},
l(key) {
/*
calendar_overtime:{
id:'',
creationTime:'创建时间',
creatorUserId:'创建人',
lastModificationTime:'更新时间',
lastModifierUserId:'更新人',
isDeleted:'删除人',
deletionTime:'删除时间',
deleterUserId:'删除人',
title:'日历名称',
restType:'关联节假日',
holidayId:'',
holidayTitle:'',
holidayStartendTime:'',
status:'',
}
*/
let vkey = 'calendar_overtime' + '.' + key
return this.$t(vkey) || key
}
}
}
</script>
<style lang="less">
.overtime {
.footer02 {
background: #4c5968;
opacity: 0.9;
position: absolute;
bottom: 9px;
box-shadow: 0px -5px 6px rgba(0, 0, 0, 0.3);
width: 86%;
z-index: 99;
padding: 10px;
color: #fff;
margin: 10px 0 10px 0;
}
}
</style>
\ No newline at end of file
<template>
<Form ref="form" :model="condition" :label-width="90">
<Row>
<Col :span="12" :v-if="condition.id.show"><FormItem :label="l('id')" prop="id"> <Input v-model="condition.id.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.creationTime.show"><FormItem :label="l('creationTime')" prop="creationTime"> <DatePicker type="daterange" v-model="condition.creationTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.creatorUserId.show"><FormItem :label="l('creatorUserId')" prop="creatorUserId"> <Input v-model="condition.creatorUserId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.lastModificationTime.show"><FormItem :label="l('lastModificationTime')" prop="lastModificationTime"> <DatePicker type="daterange" v-model="condition.lastModificationTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.lastModifierUserId.show"><FormItem :label="l('lastModifierUserId')" prop="lastModifierUserId"> <Input v-model="condition.lastModifierUserId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.isDeleted.show"><FormItem :label="l('isDeleted')" prop="isDeleted"> <Input v-model="condition.isDeleted.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.deletionTime.show"><FormItem :label="l('deletionTime')" prop="deletionTime"> <DatePicker type="daterange" v-model="condition.deletionTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.deleterUserId.show"><FormItem :label="l('deleterUserId')" prop="deleterUserId"> <Input v-model="condition.deleterUserId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.title.show"><FormItem :label="l('title')" prop="title"> <Input v-model="condition.title.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.restType.show"><FormItem :label="l('restType')" prop="restType"> <Input v-model="condition.restType.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.holidayId.show"><FormItem :label="l('holidayId')" prop="holidayId"> <Input v-model="condition.holidayId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.holidayTitle.show"><FormItem :label="l('holidayTitle')" prop="holidayTitle"> <Input v-model="condition.holidayTitle.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.holidayStartendTime.show"><FormItem :label="l('holidayStartendTime')" prop="holidayStartendTime"> <Input v-model="condition.holidayStartendTime.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>
</Row>
</Form>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
condition: {
id:{op:"Equal",value:null,show:false},
creationTime:{op:"Range",value:null,show:false},
creatorUserId:{op:"Equal",value:null,show:false},
lastModificationTime:{op:"Range",value:null,show:false},
lastModifierUserId:{op:"Equal",value:null,show:false},
isDeleted:{op:"Equal",value:null,show:false},
deletionTime:{op:"Range",value:null,show:false},
deleterUserId:{op:"Equal",value:null,show:false},
title:{op:"Equal",value:null,show:true},
restType:{op:"Equal",value:null,show:true},
holidayId:{op:"Equal",value:null,show:true},
holidayTitle:{op:"Equal",value:null,show:true},
holidayStartendTime:{op:"Equal",value:null,show:true},
status:{op:"Equal",value:null,show:true},
},
}
},
methods: {
handleClose() {
this.$emit('on-close')
},
l(key) {
key = "calendar_overtime" + "." + key;
return this.$t(key)
}
}
}
</script>
\ No newline at end of file
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="90">
<Row>
<Col span="24">
<FormItem :label="l('title')" prop="title">
<Input v-model="entity.title" placeholder="请填写日历名称"></Input>
</FormItem>
</Col>
<Col span="24">
<FormItem :label="l('calendarClassTitle')" prop="calendarClassId">
<Select v-model="entity.calendarClassId" multiple @on-change="getItems">
<Option
v-for="item in orderCatList"
:value="item.id"
:key="item.index"
:label="item.title+'('+ item.startendTime +')'"
></Option>
</Select>
</FormItem>
</Col>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
disabled: false,
orderCatList: [],
multipleFlag: false,
vlableLis : [],
sum: 0,
idList : [],
titleClass:'',
titleClass02:'',
entity: {
id:[],
title:"",
calendarClassId:[],
calendarClassTitle:"",
workHours:0
},
selectItems:[],//选中的加班日历
rules: {
title: [{ required: true, message: '请填写日历名称', trigger: 'blur' }],
calendarClassId: [
{ required: true, type: 'array', min: 1, message: '请选择关联班次', trigger: 'change' },
]
}
}
},
props: {
v: Object
},
created() {
this.selectAry()
},
methods: {
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
this.disabled = true
let titles=[];
this.selectItems.map(u=>{
titles.push(u.title+"("+u.startendTime+")")
})
let parme = {
title:this.entity.title,
calendarClassTitle:titles.join(),
calendarClassId:this.entity.calendarClassId.join(),
workHours:this.getHours()
}
Api.create(parme)
.then((r) => {
this.disabled = false
if (r.success) {
this.$Message.success('保存成功')
this.entity.calendarClassId=[];
this.$refs.form.resetFields();
this.$emit('on-ok')
} else {
this.$Message.error('保存失败')
}
})
.catch((err) => {
this.disabled = false
this.$Message.error('保存失败')
console.warn(err)
})
}
})
},
handleClose() {
this.orderCatList = []
this.$emit('on-close')
},
selectAry() {
let parmse = {
pageIndex: 0,
cont: 0,
conditions: [],
pageSize: 0
}
Api.getlist().then((res) => {
this.orderCatList = res.result
})
},
getItems(v){ //获取所有选中项;
var items=this.orderCatList.filter(u=>{
return v.indexOf(u.id)>-1
})
this.selectItems=items;
},
getHours(){ //获取工时
let sum=0;
this.selectItems.map(u=>{
sum+=u.workHours;
});
return sum;
},
l(key) {
key = 'calendar_work' + '.' + key
return this.$t(key)
}
},
watch: {
v() {
this.entity = this.$u.clone(this.v)
}
}
}
</script>
\ No newline at end of file
import Api from '@/plugins/request'
export default {
index:`${systemUrl}/calendarwork/paged`,
paged(params){
return Api.post(`${systemUrl}/calendarwork/paged`,params);
},
get(params){
return Api.get(`${systemUrl}/calendarwork/get`,params);
},
getlist(params){
return Api.get(`${systemUrl}/calendarwork/getselectclass`,params);
},
create(params){
return Api.post(`${systemUrl}/calendarwork/create`,params);
},
update(params){
return Api.post(`${systemUrl}/calendarwork/update`,params);
},
//删除:
delete(params) {
return Api.delete(`${systemUrl}/calendarwork/delete`,{params:params});
},
}
\ No newline at end of file
<template>
<div class="detail">
<Row>
<Filed :span="12" :name="l('title')">{{entity.title}}</Filed>
<Filed :span="12" :name="l('calendarClassId')">{{entity.calendarClassId}}</Filed>
<Filed :span="12" :name="l('calendarClassTitle')">{{entity.calendarClassTitle}}</Filed>
<Filed :span="12" :name="l('calendarClassStart')">{{entity.calendarClassStart}}</Filed>
<Filed :span="12" :name="l('calendarClassEnd')">{{entity.calendarClassEnd}}</Filed>
<Filed :span="12" :name="l('workHours')">{{entity.workHours}}</Filed>
</Row>
</div>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
entity: {},
rules: {
name: [{ required: true, message: '必填', trigger: 'blur' }],
code: [{ required: true, message: '必填', trigger: 'blur' }]
}
}
},
props: {
eid: Number
},
methods: {
load(v) {
Api.get({ id: v }).then(r => {
this.entity = r.result;
this.$emit('on-load')
})
},
handleClose() {
this.$emit('on-close')
},
l(key) {
key = "calendar_work" + "." + key;
return this.$t(key)
}
},
watch: {
eid(v) {
if (v != 0) {
this.load(v);
}
}
}
}
</script>
\ No newline at end of file
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="90">
<Row>
<Col span="24">
<FormItem :label="l('title')" prop="title">
<Input v-model="entity.title" placeholder="请填写日历名称"></Input>
</FormItem>
</Col>
<Col span="24">
<FormItem :label="l('calendarClassTitle')"prop="classId" >
<Select v-model="entity.classId" multiple @on-change="getItems">
<Option
v-for="item in orderCatList"
:value="item.id"
:key="item.index"
:label="item.title+'('+ item.startendTime +')'"
></Option>
</Select>
</FormItem>
</Col>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
import Api from './api'
export default {
name: 'Edit',
data() {
return {
disabled: false,
entity: {},
orderCatList: [],
selectItems: [], //选中的加班日历
rules: {
title: [{ required: true, message: '请填写日历名称', trigger: 'blur' }],
classId: [
{ required: true, type: 'array', min: 1, message: '请选择关联班次', trigger: 'change' },
]
}
}
},
props: {
eid: Number
},
created() {
this.selectList()
},
methods: {
load(v) {
Api.get({ id: v }).then((r) => {
let dataForm = r.result
if(dataForm.calendarClassId){
let ids = dataForm.calendarClassId.split(',')
var uids=[];
ids.map(u=>{
uids.push(parseInt(u))
})
this.getItems(uids);
dataForm.classId=uids;
}else{
dataForm.classId=[];
}
this.entity = dataForm
this.$emit('on-load')
})
},
selectList() {
Api.getlist().then((res) => {
this.orderCatList = res.result
})
},
getItems(v) {
//获取所有选中项;
var items = this.orderCatList.filter((u) => {
return v.indexOf(u.id) > -1
})
this.selectItems = items
},
getHours() {
let sum = 0
this.selectItems.map((u) => {
sum += u.workHours
})
return sum
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
this.disabled = true
let titles=[];
this.selectItems.map(u=>{
titles.push(u.title+"("+u.startendTime+")")
})
this.entity.calendarClassTitle=titles.join();
var data=this.$u.clone(this.entity);
data.calendarClassId=this.entity.classId.join();
data.workHours=this.getHours();
Api.update(data)
.then((r) => {
this.disabled = false
if (r.success) {
this.$Message.success('保存成功');
this.$emit('on-ok')
} else {
this.$Message.error('保存失败')
}
})
.catch((err) => {
this.disabled = false
this.$Message.error('保存失败')
console.warn(err)
})
}
})
},
handleClose() {
this.$emit('on-close')
},
l(key) {
key = 'calendar_work' + '.' + key
return this.$t(key)
}
},
watch: {
eid(v) {
if (v != 0) {
this.load(v)
}
}
}
}
</script>
\ No newline at end of file
<template>
<div class="workiview">
<DataGrid :columns="columns" ref="grid" :action="action" :high="false" :height="tableHeight"
@on-selection-change="selectionChange" >
<template slot="easySearch">
<Form ref="formInline" :model="easySearch" inline>
<FormItem prop="keys">
<Input placeholder="请输入关键字日历名称/" v-model="easySearch.keys.value" />
</FormItem>
<FormItem>
<Button type="primary" @click="search">查询</Button>
</FormItem>
</Form>
</template>
<template slot="searchForm">
<Search />
</template>
<template slot="buttons">
<Button type="primary" @click="addFn">新增</Button>
</template>
</DataGrid>
<div class="footer02" v-if="footerModel">
<span class="span">
已选择
<b class="span02">{{selectedRows.length}}</b>
</span>
<Button @click="deleteMore" class="span ml20"><Icon type="md-close"/>批量删除</Button>
</div>
<Modal v-model="addModal" ref="addmodal" title="新增" footer-hide>
<Add @on-close="cancel" @on-ok="addOk" />
</Modal>
<Modal v-model="editModal" title="编辑" footer-hide>
<Edit :eid="curId" @on-close="cancel" @on-ok="addOk" />
</Modal>
<Modal v-model="deletelModal" title="删除" @on-ok="removeOk" @on-cancel="cancel">
<p>确定删除?</p>
</Modal>
<Modal v-model="deletelMore" title="批量删除"@on-ok="cancel" @on-cancel="cancel">
<p>确定删除这{{selectedRows.length}}项么?</p>
</Modal>
</div>
</template>
<script>
import Api from './api'
import Add from './add'
import Edit from './edit'
import Detail from './detail'
import Search from './search'
export default {
name: 'list',
components: {
Add,
Edit,
Detail,
Search
},
data() {
return {
action: Api.index,
easySearch: {
keys: { op: 'title,calendarClassTitle', value: null }
},
addModal: false,
editModal: false,
deletelModal: false,
selectedRows: [], //表格选中项
tableHeight: '',
footerModel: false,
deletelMore: false,
curId: 0,
columns: [
// { type: 'selection', width: 70, align: 'center'},
{ key: 'id', title: this.l('id'), hide: true, align: 'left' },
{
key: 'creationTime',
title: this.l('creationTime'),
hide: true,
align: 'left'
},
{
key: 'creatorUserId',
title: this.l('creatorUserId'),
hide: true,
align: 'left'
},
{
key: 'lastModificationTime',
title: this.l('lastModificationTime'),
hide: true,
align: 'left'
},
{
key: 'lastModifierUserId',
title: this.l('lastModifierUserId'),
hide: true,
align: 'left'
},
{
key: 'isDeleted',
title: this.l('isDeleted'),
hide: true,
align: 'left'
},
{
key: 'deletionTime',
title: this.l('deletionTime'),
hide: true,
align: 'left'
},
{
key: 'deleterUserId',
title: this.l('deleterUserId'),
hide: true,
align: 'left'
},
{
key: 'title',
title: this.l('title'),
align: 'left',
easy: true,
high: true
},
{
key: 'calendarClassId',
title: this.l('calendarClassId'),
align: 'left',
hide: true,
high: true
},
{
key: 'calendarClassTitle',
title: this.l('calendarClassTitle'),
align: 'left',
easy: true,
high: true
},
{
key: 'calendarClassStart',
title: this.l('calendarClassStart'),
align: 'left',
hide: true,
high: true
},
{
key: 'calendarClassEnd',
title: this.l('calendarClassEnd'),
align: 'left',
hide: true,
high: true
},
{
key: 'workHours',
title: this.l('workHours'),
align: 'left',
high: true
},
{
title: '操作',
key: 'id',
width: 140,
align: 'center',
render: (h, params) => {
return h('div', { class: 'action' }, [
h(
'op',
{
attrs: { oprate: 'edit' },
on: { click: () => this.edit(params.row.id) }
},
'编辑'
),
h(
'op',
{
attrs: { oprate: 'remove' },
on: { click: () => this.remove(params.row.id) }
},
'删除'
)
])
}
}
]
}
},
created(){
this.tableHeight = window.innerHeight - 230
},
mounted() {
window.onresize = () => {///浏览器窗口大小变化
return (() => {
window.screenHeight = window.innerHeight
this.tableHeight = window.screenHeight - 230
})()
}
},
async fetch({ store, params }) {
await store.dispatch('loadDictionary') // 加载数据字典
},
methods: {
addOk() {
this.$refs.grid.load()
this.addModal = false
this.editModal = false
this.curId = 0
},
addFn(){
this.addModal=true
this.$refs.addmodal.entity = {}
},
search() {
this.$refs.grid.reload(this.easySearch)
},
edit(id) {
this.editModal = true
this.curId = id
},
remove(id) {
this.deletelModal = true
this.curId = id
},
removeOk() {
Api.delete({ id: this.curId }).then((r) => {
if (r.success) {
this.$refs.grid.load()
this.deletelModal = false
this.$Message.success('删除成功')
}
})
},
removeCancel() {
this.deletelModal = false
},
cancel() {
this.curId = 0
this.addModal = false
this.detailModal = false
this.editModal = false
this.deletedlModal = false
this.deletelMore = false
},
//多选处理--表格选择项变化方法
selectionChange(selection) {
this.selectedRows = selection
this.footerModel = selection.length > 0
},
deleteMore(){
this.deletelMore = true
},
l(key) {
/*
calendar_work:{
id:'',
creationTime:'创建时间',
creatorUserId:'创建人',
lastModificationTime:'更新时间',
lastModifierUserId:'更新人',
isDeleted:'删除人',
deletionTime:'删除时间',
deleterUserId:'删除人',
title:'日历名称',
calendarClassId:'关联班次',
calendarClassTitle:'',
calendarClassStart:'',
calendarClassEnd:'',
workHours:'工作时长',
}
*/
let vkey = 'calendar_work' + '.' + key
return this.$t(vkey) || key
}
}
}
</script>
<style lang="less">
.workiview{
.footer02{
background: #4c5968;
opacity: 0.9;
position: absolute;
bottom: 9px;
box-shadow: 0px -5px 6px rgba(0,0,0,0.3);
width: 86%;
z-index: 99;
padding: 10px;
color: #fff;
margin: 10px 0 10px 0;
}
}
</style>
\ No newline at end of file
<template>
<Form ref="form" :model="condition" :label-width="90">
<Row>
<Col :span="12" :v-if="condition.id.show"><FormItem :label="l('id')" prop="id"> <Input v-model="condition.id.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.creationTime.show"><FormItem :label="l('creationTime')" prop="creationTime"> <DatePicker type="daterange" v-model="condition.creationTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.creatorUserId.show"><FormItem :label="l('creatorUserId')" prop="creatorUserId"> <Input v-model="condition.creatorUserId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.lastModificationTime.show"><FormItem :label="l('lastModificationTime')" prop="lastModificationTime"> <DatePicker type="daterange" v-model="condition.lastModificationTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.lastModifierUserId.show"><FormItem :label="l('lastModifierUserId')" prop="lastModifierUserId"> <Input v-model="condition.lastModifierUserId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.isDeleted.show"><FormItem :label="l('isDeleted')" prop="isDeleted"> <Input v-model="condition.isDeleted.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.deletionTime.show"><FormItem :label="l('deletionTime')" prop="deletionTime"> <DatePicker type="daterange" v-model="condition.deletionTime.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.deleterUserId.show"><FormItem :label="l('deleterUserId')" prop="deleterUserId"> <Input v-model="condition.deleterUserId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.title.show"><FormItem :label="l('title')" prop="title"> <Input v-model="condition.title.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.calendarClassId.show"><FormItem :label="l('calendarClassId')" prop="calendarClassId"> <Input v-model="condition.calendarClassId.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.calendarClassTitle.show"><FormItem :label="l('calendarClassTitle')" prop="calendarClassTitle"> <Input v-model="condition.calendarClassTitle.value"> </Input>
</FormItem></Col>
<Col :span="12" :v-if="condition.calendarClassStart.show"><FormItem :label="l('calendarClassStart')" prop="calendarClassStart"> <DatePicker type="daterange" v-model="condition.calendarClassStart.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.calendarClassEnd.show"><FormItem :label="l('calendarClassEnd')" prop="calendarClassEnd"> <DatePicker type="daterange" v-model="condition.calendarClassEnd.value"></DatePicker>
</FormItem></Col>
<Col :span="12" :v-if="condition.workHours.show"><FormItem :label="l('workHours')" prop="workHours"> <Input v-model="condition.workHours.value"> </Input>
</FormItem></Col>
</Row>
</Form>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
condition: {
id:{op:"Equal",value:null,show:false},
creationTime:{op:"Range",value:null,show:false},
creatorUserId:{op:"Equal",value:null,show:false},
lastModificationTime:{op:"Range",value:null,show:false},
lastModifierUserId:{op:"Equal",value:null,show:false},
isDeleted:{op:"Equal",value:null,show:false},
deletionTime:{op:"Range",value:null,show:false},
deleterUserId:{op:"Equal",value:null,show:false},
title:{op:"Equal",value:null,show:true},
calendarClassId:{op:"Equal",value:null,show:true},
calendarClassTitle:{op:"Equal",value:null,show:true},
calendarClassStart:{op:"Range",value:null,show:true},
calendarClassEnd:{op:"Range",value:null,show:true},
workHours:{op:"Equal",value:null,show:true},
},
}
},
methods: {
handleClose() {
this.$emit('on-close')
},
l(key) {
key = "calendar_work" + "." + key;
return this.$t(key)
}
}
}
</script>
\ No newline at end of file
<template>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :show-message="false" :label-width="90">
<Row>
<FormItem label="类型" prop="typeid">
<Select v-model="formValidate.typeid" placeholder="请选择" style="width:240px;">
<Option v-for="(item,index) in alltype " :key="item.index" :value="item.value">{{item.label}}</Option>
</Select>
</FormItem>
</Row>
<Row>
<FormItem label="名称" prop="name">
<Input v-model="formValidate.name" style="width:240px;"></Input>
</FormItem>
</Row>
<Row>
<FormItem label="描述" prop="description">
<Input v-model="formValidate.description" style="width:240px;"></Input>
</FormItem>
</Row>
<!-- <FormItem label="编号" prop="number">
<Input v-model="formValidate.number" number></Input>
</FormItem> -->
</Form>
</template>
<script>
export default {
name:'addDictionary',
props:['alltype'],
data(){
return {
formValidate:{typeid:'',name:'',description:''},
ruleValidate:{
name:[{required: true}],
// number:[{required: true,type:'number'}],
typeid:[{required: true}]
}
}
}
}
</script>
<style scoped>
.ivu-form-item {width:48%;display:inline-block;}
.ivu-form-item:nth-child(odd) {
margin-left: 10px
}
</style>
\ No newline at end of file
<template>
<div>
<div class="contentRight">
<label>类型:</label>
<Select v-model="model1" @on-change="change" placeholder="请选择" style="width: 200px">
<Option v-for="(item,index) in selectdata" :key="item.index" :value="item.value">{{item.label}}</Option>
</Select>
<div style="float:right" class="paddingbtn">
<Button type="primary" @click="add('formValidate')">新增</Button>
<!-- <Button type="primary" @click="edit">编辑</Button>
<Button type="primary" @click="del">删除</Button> -->
</div>
<tb :tbPro="tbPro" ref="table" v-on:rowclick="rowclick" class="margin-top-10"></tb>
</div>
<Modal v-model="modal1" title="新增字典数据" :width="440" :mask-closable="false"
:loading="myloading"
ok-text="保存" cancel-text="取消" @on-ok="ok('formValidate')" @on-cancel='cancel'
>
<add-dictionary ref="datadictionary" :alltype="selectdata"></add-dictionary>
<!-- <div slot="footer" style="text-align:center">
<Button type="primary" @click="ok('formValidate')">保存</Button>
<Button
type="primary"
style="border-color: rgb(204, 204, 204);background-color:white;color:black"
@click="cancel"
>取消</Button>
</div> -->
</Modal>
<myconfirm ref="mysel" v-on:confirmok="okmysel" v-on:confirmcancel="cancelmysel"></myconfirm>
</div>
</template>
<script>
import tb from '../roleManagent/components/tb'
import addDictionary from './components/add'
import myconfirm from '../../processDesign/productTree/components/myconfirm'
import service from '@/plugins/request'
export default {
components:{tb,addDictionary,myconfirm},
data(){
return {
myloading:true,
model1:'',
modal1:false,
isEdit:false,
formValidate1:{},
keyid:0,
clickdata:{},
//xia la
selectdata:[
{
value:'产品类型',
label:'产品类型'
},
{
value:'产品分类',
label:'产品分类'
},
{
value:'工艺类型',
label:'工艺类型'
},
{
value:'工艺阶段',
label:'工艺阶段'
},
{
value:'产品型号',
label:'产品型号'
},
],
//表格数据和属性
tbPro:{
height:"",
isBorder: true,
stripe: true,//斑马纹
highlight:true,//高亮显示
columns: [
{
type: 'index',
width: 60,
align: 'center'
},
{
title: '名称',
key: 'name'
},
{
title: '描述',
key: 'description'
},
{
title: '编码',
key: 'code'
},
{
title: '操作',
key: 'action',
align: 'center',
width:400,
render: (h, params) => {
return h('div', [
h(
'span',
{
props: {
type: 'text',
ghost:true
},
style: {
color: '#249E91',
marginRight:"5px",
cursor:"pointer"
},
on: {
click: () => {
this.edit(params)
}
}
},
'编辑'
),
h(
'span',
{
props: {
type: 'text',
ghost:true
},
style: {
color: '#F56C6C',
marginRight:"5px",
cursor:"pointer"
},
on: {
click: () => {
this.del(params)
}
}
},
'删除'
)
])
}
}
],
data: [
]
}
}
},
created(){
var url=`${systemUrl}/DictionaryType/GetPaged`
service.get(`${url}`).then(response=>{
//console.log(response.result.items)
this.selectdata=response.result.items
this.model1=this.selectdata[0].value
this.loaddata(this.model1)
});
this.tbPro.height = window.innerHeight - 180;
},
mounted(){
window.onresize = () => {
return (() => {
this.tbPro.height = window.innerHeight - 180;
})()
}
},
computed:{
alldata:function(){
return this.tbPro.data
}
},
methods:{
loaddata(id){
var url=`${systemUrl}/Dictionary/GetPaged`
service.get(`${url}`,{params:{TypeId:id}}).then(response=>{
this.tbPro.data=response.result.items
})
},
change(data){
// console.log(data);
this.loaddata(data)
},
add:function(name){
this.isEdit=false;
var a = this.$refs.datadictionary;
a.$refs[name].resetFields();
this.modal1=true;
this.$refs.datadictionary.formValidate={typeid:'',description:'',name:''}
},
edit(params){
var a = this.$refs.datadictionary;
a.$refs['formValidate'].resetFields();
this.modal1=true;
this.isEdit=true;
let {typeId,name,description,id,code}=params.row;
// console.log(typeId)
// console.log(number);
this.$refs.datadictionary.formValidate={typeid:typeId,name:name,description:description,id:id,code:code}
},
del(params){
console.log(params)
this.keyid=params.row.id
console.log(this.keyid)
this.$refs.mysel.confirmmodal=true;
},
okmysel(bl){
var url=`${systemUrl}/Dictionary/Delete?id=${this.keyid}`
service.delete(`${url}`).then(response=>{
if(response.success)
{
this.$Message.success('删除成功')
this.loaddata(this.model1)
}
}).catch(error=>{
this.$Message.error('删除失败')
})
this.$refs.mysel.confirmmodal=bl
},
cancelmysel(bl){
this.$refs.mysel.confirmmodal=bl
},
//保存增加修改
ok(name){
var a = this.$refs.datadictionary;
var url=`${systemUrl}/Dictionary/CreateOrUpdate`
var ar=this.alldata.find((val)=>{
return (val.name==this.$refs.datadictionary.formValidate.name)
})
if(ar){
this.$Message.error('已存在字典项的名字');
setTimeout(() => {
this.myloading = false
this.$nextTick(() => {
this.myloading = true
})
}, 500)
return;
}
a.$refs[name].validate((valid) => {
if (valid) {
this.formValidate1 = this.$refs.datadictionary.formValidate
if (this.isedit)
{
//this.formValidate1.id=
}
service.post(`${url}`,JSON.stringify({Dictionary:this.formValidate1})).then(response=>{
if(response.success){
this.$Message.success('保存成功')
this.loaddata(this.model1)
this.modal1 = false
}
}).catch(error=>{
//console.log(123)
// console.log(error)
this.$Message.error('保存失败')
})
} else {
setTimeout(() => {
this.myloading = false
this.$nextTick(() => {
this.myloading = true
})
}, 500)
this.$Message.error('请输入必填项')
}
})
},
cancel(){
this.modal1=false;
},
rowclick(data,index){
console.log(typeof(data));
this.clickdata=data;
// console.log(this.clickdata);
}
}
}
</script>
<style scoped>
</style>
import api from '@/plugins/request'
const u=(path)=>`${systemUrl}/Dictionary/${path}`
export default {
getChildren(id) {
return api.get(u("GetChildren"), { id })
},
getTree(){
return api.get(u('GetTree'))
},
setColor(paras) {
return api.post(u("SetColor"), {Dictionary:paras})
},
setSort(paras) {
return api.post(u("SetSort"), paras)
},
save(paras) {
return api.post(u("CreateOrUpdate"), {Dictionary:paras})
},
}
\ No newline at end of file
<template>
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<Row class="rowTitle100">
<FormItem label="类别" prop="typeId">
<RadioGroup v-model="entity.typeId">
<Radio :label="0" disabled>系统</Radio>
<Radio :label="1" disabled>分类</Radio>
<Radio :label="2" disabled>字典</Radio>
<Radio :label="3" disabled>字典项</Radio>
</RadioGroup>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="名称" prop="name">
<Input v-model="entity.name">
<ColorPicker v-model="entity.color" slot="prepend" transfer size="small" transfer recommend />
</Input>
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="编码" prop="code">
<Input v-model="entity.code" />
</FormItem>
</Row>
<Row class="rowTitle100">
<FormItem label="图标" prop="icon">
<InputIcon v-model="entity.icon"></InputIcon>
</FormItem>
</Row>
<FormItem label="状态" prop="number">
<RadioGroup v-model="entity.status">
<Radio :label="0">启用</Radio>
<Radio :label="1">禁用(名称和值可以启用或禁用,但不能删除)</Radio>
</RadioGroup>
</FormItem>
<FormItem label="锁定" prop="number">
<RadioGroup v-model="entity.isStatic">
<Radio :label="0">不锁定</Radio>
<Radio :label="1">锁定(锁定后不可改变名称和值,不能删除)</Radio>
</RadioGroup>
</FormItem>
<Row class="rowTitle100">
<FormItem label="描述" prop="description">
<Input v-model="entity.description" type="textarea" :rows="3"></Input>
</FormItem>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</template>
<script>
export default {
name: 'Edit',
data() {
return {
entity: this.v,
rules: {
name: [{ required: true, message: '必填', trigger: 'blur' }],
code: [{ required: true, message: '必填', trigger: 'blur' }]
}
}
},
props: {
v: Object
},
methods: {
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
var url2 = `${systemUrl}/Dictionary/createorupdate`
this.$api.post(url2, { Dictionary: this.entity }).then((r) => {
if (r.success) {
this.$Message.success('保存成功')
this.$emit('on-ok')
}
})
}
})
},
handleClose() {
this.$emit('on-close')
}
},
watch: {
v(v) {
this.entity = this.v
console.info(this.entity)
}
}
}
</script>
<template>
<Layout class="full">
<Sider hide-trigger :style="{background: '#fff'}" class="menu" width="240" >
<h3 class="title">
数据字典
<ButtonGroup class="fr" size="small">
<Button>
<Icon
:type="expand?'md-arrow-dropright':'md-arrow-dropdown'"
size="16"
@click="toggle"
title="展开/合并"
/>
</Button>
<Button>
<Icon type="md-refresh" size="16" @click="loadTree" title="刷新" />
</Button>
</ButtonGroup>
</h3>
<div class="tree">
<Tree :data="tree" @on-select-change="change" />
</div>
</Sider>
<Content class="content">
<Tools>
<Breadcrumb style="display:inline-block">
<BreadcrumbItem v-for="(li,i) in names" :key="i">{{li}}</BreadcrumbItem>
</Breadcrumb>
<template slot="btns">
<span class="mr20" v-if="node.typeId==2">
索引:
<a
data-clipboard-action="copy"
:data-clipboard-text="node.code"
@click="copy"
id="code"
class="tag-read"
>{{node.code}}</a>
</span>
<Button type="default" @click="setRoot">返回顶级</Button>
</template>
</Tools>
<div class="auto">
<!-- <Dictionary code="system.dictionary.typeId" v-model="code" class="w200"/> {{code}}
<a @click="code='3'">up</a>-->
<Table
border
:columns="columns"
:data="data"
:draggable="edit==-1"
class="tableCommon"
@on-drag-drop="onDragDrop"
>
<template slot-scope="{ row, index }" slot="typeId">
<state code="system.dictionary.typeId" type="text" :value="row.typeId"></state>
</template>
<template slot-scope="{ row, index }" slot="status">
<state code="status" type="tag" :value="row.status"></state>
</template>
<template slot-scope="{ row, index }" slot="isStatic">
<state code="isStatic" type="tag" :value="row.isStatic"></state>
</template>
<template slot-scope="{ row, index }" slot="name">
<span v-if="edit!=index" v-text="row.name"></span>
<Input v-else type="text" v-model.trim="cur.name" />
</template>
<template slot-scope="{ row, index }" slot="color">
<div v-if="edit!=index">
<ColorPicker
:value="row.color||''"
transfer
recommend
@on-change="setColor($event,row,index)"
/>
</div>
<div v-else>
<ColorPicker v-model="cur.color" transfer recommend />
</div>
</template>
<template slot-scope="{ row, index }" slot="icon">
<div v-if="row.icon">
<Icon
:type="row.icon"
@on-change="setColor($event,row,index)"
/>
</div>
</template>
<template slot-scope="{ row, index }" slot="code">
<span v-if="edit!=index" v-text="row.code"></span>
<Input v-else type="text" v-model.trim="cur.code" />
</template>
<template slot-scope="{ row, index }" slot="action">
<div v-if="edit!=index" class="action">
<op class="edit" @click="editRow(row,index)">编辑</op>
<!-- <op class="remove" @click="delRow(row,index)">删除</op> -->
</div>
<div class="action" v-else>
<op class="edit" @click="save">保存</op>
<op class="remove" @click="remove">删除</op>
</div>
</template>
</Table>
<Button type="primary" :disabled="edit!=-1" long @click="addNew" class="mt10">添加</Button>
<Alert type="info" class="mt10" v-if="data.length>1&&edit==-1">提示: 支持拖拽排序,数据未保存时不可拖拽排序。</Alert>
</div>
<Modal v-model="editModal" :title="editTitle" footer-hide>
<Edit :v="editModel" @on-close="editModal=false" @on-ok="editOk" />
</Modal>
</Content>
</Layout>
</template>
<script>
import Edit from './components/edit'
import api from './api.js'
import Clipboard from 'clipboard'
const root = {
id: 0,
typeId: -1,
title: '顶级节点',
code: ''
}
export default {
data() {
return {
code: '2',
expand: false,
editModal: false,
editModel: {
color: ''
},
editTitle: '编辑',
node: root,
color4: '',
cur: null,
names: [root.title],
types: ['系统', '分类', '字典', '字典项'],
addName: '添加',
tree: [],
edit: -1,
data: [],
columns: [
{
type: 'index',
width: 60,
align: 'center'
},
{
title: '类别',
key: 'typeId',
width: 100,
align: 'center',
slot: 'typeId'
},
{
title: '颜色',
key: 'color',
width: 100,
align: 'center',
slot: 'color'
},
{
title: '名称',
key: 'name',
width: 150,
slot: 'name'
},
{
title: '编码',
key: 'code',
slot: 'code'
},
{
title: '图标',
key: 'icon',
slot: 'icon'
},
{
title: '描述',
key: 'description'
},
{
title: '状态',
key: 'status',
width: 100,
align: 'center',
slot: 'status'
},
{
title: '锁定',
key: 'isStatic',
width: 100,
align: 'center',
slot: 'isStatic'
},
{
title: '操作',
key: 'action',
width: 160,
align: 'center',
slot: 'action'
}
]
}
},
components: { Edit },
async fetch({ store, params }) {
await store.dispatch('loadDictionary') // 加载数据字典
},
created() {
this.load()
this.loadTree()
},
methods: {
copy() {
var clipboard = new Clipboard('.tag-read')
clipboard.on('success', (e) => {
this.$Message.success('复制成功:' + this.node.code)
clipboard.destroy()
})
clipboard.on('error', (e) => {
// 不支持复制
console.log('该浏览器不支持自动复制') // 释放内存
clipboard.destroy()
})
},
editRow(row, index) {
this.editTitle = '编辑'
this.editModal = true
this.editModel = row
},
toggle() {
this.expand = !this.expand
this.loadTree()
},
editOk() {
this.load()
this.editModal = false
},
delRow(row, index) {
var url = `${systemUrl}/Dictionary/Delete?id=${row.id}`
this.$Modal.confirm({
title: '操作确认',
content: '确定要删除吗?',
onOk: () => {
this.$api
.delete(`${url}`)
.then((r) => {
if (r.success) {
this.$Message.success('删除成功')
this.load()
}
})
.catch((error) => {
this.$Message.error('删除失败')
})
}
})
},
change(nodes, node) {
// console.warn(node,nodes)
this.node = {
id: node.id,
typeId: node.data.typeId,
title: node.title,
code: node.data.code
}
// this.names = [node.title]
let cur = node
let titles = []
while (cur) {
titles.push(cur.title)
cur = cur.parent
}
this.names = titles.reverse()
this.load(node.id)
},
setRoot() {
this.load(0)
this.loadTree()
this.node = root
},
async setColor(v, row, i) {
let r = await api.setColor({ id: row.id, color: v })
if (r.success) {
this.$Message.success('颜色设置成功!')
row.color = v
} else {
this.$Message.error('颜色设置失败!')
row.color = ''
}
},
async load() {
this.edit = -1
let r = await api.getChildren(this.node.id)
this.data = r.result
},
async loadTree() {
let r = await api.getTree(this.node.id)
if (r.success) {
let items = r.result
var expand = this.expand
setParent(null, items)
function setParent(parent, items) {
items.map((u) => {
u.parent = parent
u.expand = expand
if (u.children) {
setParent(u, u.children)
}
})
}
this.tree = items
}
},
onDragDrop(a, b) {
this.data.splice(b, 1, ...this.data.splice(a, 1, this.data[b]))
let ids = []
this.data.map((u) => {
ids.push(u.id)
})
if (ids.length > 1) {
api.setSort({ ids }).then((r) => {
if (!r.success) {
this.$Message.error('排序失败')
this.load()
}
})
}
},
addNew() {
this.edit = this.data.length
this.cur = {
upId: this.node.id,
name: '',
code: '',
color: '',
status: 0,
isStatic: 0,
typeId: this.node.typeId + 1,
priority: this.edit
}
this.data.push(this.cur)
},
remove() {
this.edit = -1
// this.load(this.node.id)
this.data.pop()
},
save() {
if (this.cur.name == '') {
this.$Message.error('名称不能为空')
return
}
if (this.cur.code == '') {
this.$Message.error('值不能为空')
return
}
api.save(this.cur).then((r) => {
console.warn(r)
if (r.success) {
this.$Message.success('添加成功')
this.load()
}
})
}
}
}
</script>
<style lang="less" scoped>
.full {
margin-top: 0;
}
.ivu-color-picker-confirm {
.ivu-input {
width: 130px;
height: 30px;
float: left;
}
.ivu-btn-small {
height: 30px !important;
}
}
</style>
<template>
<div>
<Modal
class="add-show-memu"
v-model="showMenu"
:title="title"
:width="width"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="saveOk"
@on-cancel="saveCancel"
>
<div class="body-memu">
<div class="memu-left" :class="{ active: isActive, memuLeft: hasError }">
<Form :model="addModel" :label-width="100" inline>
<FormItem label="类型">
<RadioGroup v-model="addModel.type">
<Radio label="1">目录</Radio>
<Radio label="2">菜单</Radio>
</RadioGroup>
</FormItem>
<FormItem label="上级">
<Input
disabled
style="width:300px;"
size="large"
v-model.trim="addModel.upName"
placeholder="请输入上级"
/>
</FormItem>
<FormItem label="名称">
<Input
style="width:300px;"
size="large"
v-model.trim="addModel.name"
placeholder="请输入名称"
/>
</FormItem>
<FormItem label="地址">
<Input
style="width:300px;"
size="large"
v-model.trim="addModel.url"
placeholder="请输入请求地址"
/>
</FormItem>
<FormItem label="排序">
<Input
style="width:300px;"
size="large"
v-model.trim="addModel.priority"
placeholder="请输入排序"
/>
</FormItem>
<FormItem label="打开方式">
<dictionary code="system.menu.target" v-model="addModel.target"></dictionary>
</FormItem>
<FormItem label="图标">
<!-- <Input
style="width:300px;"
size="large"
v-model.trim="addModel.icon"
placeholder="请输入图标"
/>-->
<Input
style="width:300px;"
size="large"
v-model.trim="addModel.icon"
placeholder="请输入图标"
>
<span slot="prepend">
<a @click="iconModals" class="setIcon">
<Icon :type="addModel.icon==''?'md-add':addModel.icon"></Icon>
</a>
</span>
</Input>
</FormItem>
<FormItem label="状态">
<RadioGroup v-model="addModel.status">
<Radio :label="1">显示</Radio>
<Radio :label="2">隐藏</Radio>
</RadioGroup>
</FormItem>
<FormItem label="备注">
<Input
:rows="4"
maxlength="50"
show-word-limit
type="textarea"
placeholder="请输入备注信息"
style="width:300px;"
size="large"
v-model.trim="addModel.remark"
/>
</FormItem>
</Form>
</div>
<div class="memu-right" v-show="memuRight">
<div class="tian-jia">添加权限按钮</div>
<div class="quan-xian">
<!-- <Button type="primary" icon="md-add" @click="addTutton">添加按钮</Button> -->
<Button @click="customButton">自定义按钮</Button>
</div>
<div class="an-niu" v-for="(item,index) in listData" :key="index">
<Row>
<Col :span="12">{{item.name}}</Col>
<Col :span="11">{{item.url}}</Col>
<Col :span="1" style=" text-align: right">
<div class="icon-close" @click="closeDelete(item.index)">
<Icon type="md-close" />
</div>
</Col>
</Row>
</div>
</div>
</div>
</Modal>
<Modal
v-model="showCatalog"
:title="titleEit"
:width="440"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="catalogOk"
@on-cancel="catalogCancel"
>
<div style="padding:20px 0">
<Form :model="catalogModel" :label-width="100" inline>
<FormItem label="类型">
<RadioGroup v-model="catalogModel.type">
<Radio :label="1">目录</Radio>
<Radio :label="2">菜单</Radio>
</RadioGroup>
</FormItem>
<FormItem label="上级">
<Input
disabled
style="width:240px;"
size="large"
v-model.trim="catalogModel.upName"
placeholder="请输入上级"
/>
</FormItem>
<FormItem label="名称">
<Input
style="width:240px;"
size="large"
v-model.trim="catalogModel.name"
placeholder="请输入名称"
/>
</FormItem>
<FormItem label="地址">
<Input
style="width:240px;"
size="large"
v-model.trim="catalogModel.url"
placeholder="请输入请求地址"
/>
</FormItem>
<FormItem label="排序">
<Input
style="width:240px;"
size="large"
v-model.trim="catalogModel.priority"
placeholder="请输入排序"
/>
</FormItem>
<FormItem label="图标">
<Input
style="width:240px;"
size="large"
v-model.trim="catalogModel.icon"
placeholder="请输入图标"
>
<span slot="prepend">
<a @click="iconModals" class="setIcon">
<Icon :type="catalogModel.icon==null?'md-add':catalogModel.icon"></Icon>
</a>
</span>
</Input>
</FormItem>
<FormItem label="状态">
<RadioGroup v-model="catalogModel.status">
<Radio :label="1">显示</Radio>
<Radio :label="2">隐藏</Radio>
</RadioGroup>
</FormItem>
<FormItem label="备注">
<Input
:rows="4"
maxlength="50"
show-word-limit
type="textarea"
placeholder="请输入备注信息"
style="width: 240px"
size="large"
v-model.trim="addModel.remark"
/>
</FormItem>
</Form>
</div>
</Modal>
<Modal
v-model="btnShow"
title="添加按钮"
:width="440"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="addSaveOk"
@on-cancel="addSaveCancel"
>
<div style="padding:15px 30px;">
<!-- <Input placeholder="请输入查询条件" style="width:340px">
<Icon type="ios-search" slot="suffix" @click="search" />
</Input>-->
<AutoComplete
v-model="value1"
:data="data1"
@on-search="search"
@on-select="loadActions"
placeholder="input here"
style="width:340px"
>
<Option
v-for="(item,index) in data1"
:value="item.title"
:key="item.index"
>{{ item.title }}</Option>
</AutoComplete>
<Tree :data="dataTree" show-checkbox></Tree>
</div>
</Modal>
<Modal
v-model="customShow"
:title="customTitle"
:width="440"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="customOk"
@on-cancel="customCancel"
>
<div style="height:250px;padding:20px 0">
<Form :model="customModel" :label-width="100" inline>
<FormItem label="名称">
<Input
style="width:240px;"
size="large"
v-model.trim="customModel.name"
placeholder="请输入名称"
/>
</FormItem>
<FormItem label="编码">
<Input
style="width:240px;"
size="large"
v-model.trim="customModel.url"
placeholder="编码"
/>
</FormItem>
<FormItem label="备注">
<Input
:rows="4"
maxlength="50"
show-word-limit
type="textarea"
placeholder="请输入备注信息"
style="width: 240px"
size="large"
v-model.trim="customModel.remark"
/>
</FormItem>
</Form>
</div>
</Modal>
<icons ref="iconsNew" @iconName="iconName"></icons>
</div>
</template>
<script>
import icons from './icons'
export default {
name: '',
components: {
icons
},
data() {
return {
customTitle: '自定义按钮',
titleEit: '编辑目录/菜单',
value1: '',
data1: [],
btnShow: false,
title: '新建菜单',
memuRight: false,
width: 1000,
isActive: false,
hasError: true,
listData: [],
addShow: false,
customShow: false,
showMenu: false,
showCatalog: false,
customModel: {
name: '',
url: '',
type: '3',
remark: ''
},
addModel: {
type: '1',
name: '',
icon: '',
priority: '',
upName: '',
up_id: '',
status: '1',
remark: '',
target: ''
},
id: '',
up_id: '',
catalogModel: {
type: '1',
name: '',
icon: 'md-add',
priority: '',
upName: '',
up_id: '',
status: '1',
remark: ''
},
dataTree: []
}
},
props: ['dataChild'],
created() {},
watch: {
addModel: {
handler(newName) {
if (newName.type == '1') {
this.memuRight = false
this.width = 500
this.isActive = false
this.hasError = true
this.title = '新建目录'
} else if (newName.type == '2') {
this.memuRight = true
this.width = 1000
this.isActive = true
this.hasError = false
this.title = '新建菜单'
}
},
// immediate: true,
deep: true
},
dataChild(v) {
this.id = v.id
this.up_id = v.id
this.catalogModel = v //将新得l赋值给catalogModel;
this.customModel = v
}
},
methods: {
iconModals() {
this.$refs.iconsNew.iconModal = true
},
iconName(name) {
this.addModel.icon = name
this.catalogModel.icon = name
},
//添加按钮
addTutton() {
this.btnShow = true
// this.$http.jurisdiction.listTreeBtn().then((res) => {
// this.dataTree = res.result
// })
},
//添加按钮确认
addSaveOk() {},
//添加按钮取消
addSaveCancel() {
this.btnShow = false
},
//异步加载树
loadData(item, callback) {
console.log(item)
let paras = {
loading: false,
name: item.title,
TypeName: item.typeName
}
console.info(item)
this.$http.jurisdiction.listTreeBtn(paras).then((res) => {
console.log(res)
res.result.map((ul) => {
ul.loading = false
ul.chidren = []
})
item.children = res.result
console.warn(res.result)
item.loading = true
callback()
})
},
treeSelect(val) {},
//自定义按钮
customButton() {
this.customModel = {}
this.customShow = true
this.customTitle = '自定义按钮'
},
//添加按钮搜索
search() {
if (this.value1.length > 2) {
this.$http.jurisdiction.getApis({ name: this.value1 }).then((r) => {
console.warn(r.result)
this.data1 = r.result
})
}
},
loadActions() {
this.$http.jurisdiction.getActions({ name: this.value1 }).then((r) => {
console.warn(r.result)
this.dataTree = r.result
})
},
//删除按钮列表每行
closeDelete(index) {
console.log(index)
},
//新增
saveOk() {
console.log(this.addModel)
let actions = []
if (this.addModel.type == '1') {
actions = []
} else if (this.addModel.type == '2') {
if (this.listData.length > 0) {
actions = this.listData
} else {
actions = []
}
}
this.addModel.up_id = this.id
delete this.addModel.id
var data = {
actions: actions,
privilege: this.addModel
}
this.$http.jurisdiction.add(data).then((res) => {
this.$nextTick(() => {
this.$emit('listTree')
})
})
},
saveCancel() {
this.showMenu = false
},
customOk() {
if (this.customTitle == '自定义按钮') {
let obj = {
name: this.customModel.name,
url: this.customModel.url,
type: this.customModel.type,
remark: this.customModel.remark
}
this.listData.push(obj)
}
if (this.customTitle == '编辑按钮') {
let actions = []
var data = {
actions: actions,
privilege: this.catalogModel
}
this.addModel.id = this.id
this.addModel.up_id = this.up_id
this.$http.jurisdiction.add(data).then((res) => {
this.$nextTick(() => {
this.$emit('listTree')
})
})
}
},
customCancel() {
this.customShow = false
},
//编辑取消
catalogCancel() {
this.showCatalog = false
},
//编辑目录或菜单
catalogOk() {
let actions = []
var data = {
actions: actions,
privilege: this.catalogModel
}
this.addModel.id = this.id
this.addModel.up_id = this.up_id
this.$http.jurisdiction.add(data).then((res) => {
this.$emit('listTree')
this.showCatalog = false
})
}
}
}
</script>
<style lang="less" scoped>
.body-memu {
width: 100%;
display: -webkit-flex;
display: flex;
.memu-left {
padding: 20px 0;
}
.active {
width: 45%;
border-right: 1px solid #e4e6ed;
}
.memuLeft {
width: 100%;
border: none;
}
.memu-right {
width: 55%;
margin: 0 30px;
padding: 30px 0;
.tian-jia {
border-left: 3px solid #515a6e;
padding-left: 5px;
height: 15px;
line-height: 15px;
}
.quan-xian {
width: 100%;
margin: 15px 0 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #e4e6ed;
}
.an-niu {
width: 100%;
height: 30px;
line-height: 30px;
// display: -webkit-flex;
// display: flex;
// justify-content: space-between;
.icon-close {
color: #ff7a8b;
font-size: 18px;
cursor: pointer;
}
}
}
}
</style>
<style>
.add-show-memu .ivu-modal-body {
padding: 0 !important;
}
</style>
\ No newline at end of file
<template>
<div>
<Modal v-model="iconModal" title="设置图标">
<div id="icons">
<a v-for="(icon,i) in iconList" :key="i" @click="setIcon(icon)" :title="icon">
<Icon :type="icon" size="36"></Icon>
</a>
</div>
<div slot="footer"></div>
</Modal>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
iconModal: false,
icons:
'ios-add,md-add,ios-add-circle,ios-add-circle-outline,md-add-circle,ios-alarm,ios-alarm-outline,md-alarm,ios-albums,ios-albums-outline,md-albums,ios-alert,ios-alert-outline,md-alert,ios-american-football,ios-american-football-outline,md-american-football,ios-analytics,ios-analytics-outline,md-analytics,logo-android,logo-angular,ios-aperture,ios-aperture-outline,md-aperture,logo-apple,ios-apps,ios-apps-outline,md-apps,ios-appstore,ios-appstore-outline,md-appstore,ios-archive,ios-archive-outline,md-archive,ios-arrow-back,md-arrow-back,ios-arrow-down,md-arrow-down,ios-arrow-dropdown,md-arrow-dropdown,ios-arrow-dropdown-circle,md-arrow-dropdown-circle,ios-arrow-dropleft,md-arrow-dropleft,ios-arrow-dropleft-circle,md-arrow-dropleft-circle,ios-arrow-dropright,md-arrow-dropright,ios-arrow-dropright-circle,md-arrow-dropright-circle,ios-arrow-dropup,md-arrow-dropup,ios-arrow-dropup-circle,md-arrow-dropup-circle,ios-arrow-forward,md-arrow-forward,ios-arrow-round-back,md-arrow-round-back,ios-arrow-round-down,md-arrow-round-down,ios-arrow-round-forward,md-arrow-round-forward,ios-arrow-round-up,md-arrow-round-up,ios-arrow-up,md-arrow-up,ios-at,ios-at-outline,md-at,ios-attach,md-attach,ios-backspace,ios-backspace-outline,md-backspace,ios-barcode,ios-barcode-outline,md-barcode,ios-baseball,ios-baseball-outline,md-baseball,ios-basket,ios-basket-outline,md-basket,ios-basketball,ios-basketball-outline,md-basketball,ios-battery-charging,md-battery-charging,ios-battery-dead,md-battery-dead,ios-battery-full,md-battery-full,ios-beaker,ios-beaker-outline,md-beaker,ios-beer,ios-beer-outline,md-beer,ios-bicycle,md-bicycle,logo-bitcoin,ios-bluetooth,md-bluetooth,ios-boat,ios-boat-outline,md-boat,ios-body,ios-body-outline,md-body,ios-bonfire,ios-bonfire-outline,md-bonfire,ios-book,ios-book-outline,md-book,ios-bookmark,ios-bookmark-outline,md-bookmark,ios-bookmarks,ios-bookmarks-outline,md-bookmarks,ios-bowtie,ios-bowtie-outline,md-bowtie,ios-briefcase,ios-briefcase-outline,md-briefcase,ios-browsers,ios-browsers-outline,md-browsers,ios-brush,ios-brush-outline,md-brush,logo-buffer,ios-bug,ios-bug-outline,md-bug,ios-build,ios-build-outline,md-build,ios-bulb,ios-bulb-outline,md-bulb,ios-bus,ios-bus-outline,md-bus,ios-cafe,ios-cafe-outline,md-cafe,ios-calculator,ios-calculator-outline,md-calculator,ios-calendar,ios-calendar-outline,md-calendar,ios-call,ios-call-outline,md-call,ios-camera,ios-camera-outline,md-camera,ios-car,ios-car-outline,md-car,ios-card,ios-card-outline,md-card,ios-cart,ios-cart-outline,md-cart,ios-cash,ios-cash-outline,md-cash,ios-chatboxes,ios-chatboxes-outline,md-chatboxes,ios-chatbubbles,ios-chatbubbles-outline,md-chatbubbles,ios-checkbox,ios-checkbox-outline,md-checkbox,md-checkbox-outline,ios-checkmark,md-checkmark,ios-checkmark-circle,ios-checkmark-circle-outline,md-checkmark-circle,md-checkmark-circle-outline,logo-chrome,ios-clipboard,ios-clipboard-outline,md-clipboard,ios-clock,ios-clock-outline,md-clock,ios-close,md-close,ios-close-circle,ios-close-circle-outline,md-close-circle,ios-closed-captioning,ios-closed-captioning-outline,md-closed-captioning,ios-cloud,ios-cloud-outline,md-cloud,ios-cloud-circle,ios-cloud-circle-outline,md-cloud-circle,ios-cloud-done,ios-cloud-done-outline,md-cloud-done,ios-cloud-download,ios-cloud-download-outline,md-cloud-download,md-cloud-outline,ios-cloud-upload,ios-cloud-upload-outline,md-cloud-upload,ios-cloudy,ios-cloudy-outline,md-cloudy,ios-cloudy-night,ios-cloudy-night-outline,md-cloudy-night,ios-code,md-code,ios-code-download,md-code-download,ios-code-working,md-code-working,logo-codepen,ios-cog,ios-cog-outline,md-cog,ios-color-fill,ios-color-fill-outline,md-color-fill,ios-color-filter,ios-color-filter-outline,md-color-filter,ios-color-palette,ios-color-palette-outline,md-color-palette,ios-color-wand,ios-color-wand-outline,md-color-wand,ios-compass,ios-compass-outline,md-compass,ios-construct,ios-construct-outline,md-construct,ios-contact,ios-contact-outline,md-contact,ios-contacts,ios-contacts-outline,md-contacts,ios-contract,md-contract,ios-contrast,md-contrast,ios-copy,ios-copy-outline,md-copy,ios-create,ios-create-outline,md-create,ios-crop,ios-crop-outline,md-crop,logo-css3,ios-cube,ios-cube-outline,md-cube,ios-cut,ios-cut-outline,md-cut,logo-designernews,ios-desktop,ios-desktop-outline,md-desktop,ios-disc,ios-disc-outline,md-disc,ios-document,ios-document-outline,md-document,ios-done-all,md-done-all,ios-download,ios-download-outline,md-download,logo-dribbble,logo-dropbox,ios-easel,ios-easel-outline,md-easel,ios-egg,ios-egg-outline,md-egg,logo-euro,ios-exit,ios-exit-outline,md-exit,ios-expand,md-expand,ios-eye,ios-eye-outline,md-eye,ios-eye-off,ios-eye-off-outline,md-eye-off,logo-facebook,ios-fastforward,ios-fastforward-outline,md-fastforward,ios-female,md-female,ios-filing,ios-filing-outline,md-filing,ios-film,ios-film-outline,md-film,ios-finger-print,md-finger-print,ios-flag,ios-flag-outline,md-flag,ios-flame,ios-flame-outline,md-flame,ios-flash,ios-flash-outline,md-flash,ios-flask,ios-flask-outline,md-flask,ios-flower,ios-flower-outline,md-flower,ios-folder,ios-folder-outline,md-folder,ios-folder-open,ios-folder-open-outline,md-folder-open,ios-football,ios-football-outline,md-football,logo-foursquare,logo-freebsd-devil,ios-funnel,ios-funnel-outline,md-funnel,ios-game-controller-a,ios-game-controller-a-outline,md-game-controller-a,ios-game-controller-b,ios-game-controller-b-outline,md-game-controller-b,ios-git-branch,md-git-branch,ios-git-commit,md-git-commit,ios-git-compare,md-git-compare,ios-git-merge,md-git-merge,ios-git-network,md-git-network,ios-git-pull-request,md-git-pull-request,logo-github,ios-glasses,ios-glasses-outline,md-glasses,ios-globe,ios-globe-outline,md-globe,logo-google,logo-googleplus,ios-grid,ios-grid-outline,md-grid,logo-hackernews,ios-hammer,ios-hammer-outline,md-hammer,ios-hand,ios-hand-outline,md-hand,ios-happy,ios-happy-outline,md-happy,ios-headset,ios-headset-outline,md-headset,ios-heart,ios-heart-outline,md-heart,md-heart-outline,ios-help,md-help,ios-help-buoy,ios-help-buoy-outline,md-help-buoy,ios-help-circle,ios-help-circle-outline,md-help-circle,ios-home,ios-home-outline,md-home,logo-html5,ios-ice-cream,ios-ice-cream-outline,md-ice-cream,ios-image,ios-image-outline,md-image,ios-images,ios-images-outline,md-images,ios-infinite,ios-infinite-outline,md-infinite,ios-information,md-information,ios-information-circle,ios-information-circle-outline,md-information-circle,logo-instagram,ios-ionic,ios-ionic-outline,md-ionic,ios-ionitron,ios-ionitron-outline,md-ionitron,logo-javascript,ios-jet,ios-jet-outline,md-jet,ios-key,ios-key-outline,md-key,ios-keypad,ios-keypad-outline,md-keypad,ios-laptop,md-laptop,ios-leaf,ios-leaf-outline,md-leaf,ios-link,ios-link-outline,md-link,logo-linkedin,ios-list,md-list,ios-list-box,ios-list-box-outline,md-list-box,ios-locate,ios-locate-outline,md-locate,ios-lock,ios-lock-outline,md-lock,ios-log-in,md-log-in,ios-log-out,md-log-out,ios-magnet,ios-magnet-outline,md-magnet,ios-mail,ios-mail-outline,md-mail,ios-mail-open,ios-mail-open-outline,md-mail-open,ios-male,md-male,ios-man,ios-man-outline,md-man,ios-map,ios-map-outline,md-map,logo-markdown,ios-medal,ios-medal-outline,md-medal,ios-medical,ios-medical-outline,md-medical,ios-medkit,ios-medkit-outline,md-medkit,ios-megaphone,ios-megaphone-outline,md-megaphone,ios-menu,ios-menu-outline,md-menu,ios-mic,ios-mic-outline,md-mic,ios-mic-off,ios-mic-off-outline,md-mic-off,ios-microphone,ios-microphone-outline,md-microphone,ios-moon,ios-moon-outline,md-moon,ios-more,ios-more-outline,md-more,ios-move,md-move,ios-musical-note,ios-musical-note-outline,md-musical-note,ios-musical-notes,ios-musical-notes-outline,md-musical-notes,ios-navigate,ios-navigate-outline,md-navigate,ios-no-smoking,ios-no-smoking-outline,md-no-smoking,logo-nodejs,ios-notifications,ios-notifications-outline,md-notifications,ios-notifications-off,ios-notifications-off-outline,md-notifications-off,md-notifications-outline,ios-nuclear,ios-nuclear-outline,md-nuclear,ios-nutrition,ios-nutrition-outline,md-nutrition,logo-octocat,ios-open,ios-open-outline,md-open,ios-options,ios-options-outline,md-options,ios-outlet,ios-outlet-outline,md-outlet,ios-paper,ios-paper-outline,md-paper,ios-paper-plane,ios-paper-plane-outline,md-paper-plane,ios-partly-sunny,ios-partly-sunny-outline,md-partly-sunny,ios-pause,ios-pause-outline,md-pause,ios-paw,ios-paw-outline,md-paw,ios-people,ios-people-outline,md-people,ios-person,ios-person-outline,md-person,ios-person-add,ios-person-add-outline,md-person-add,ios-phone-landscape,md-phone-landscape,ios-phone-portrait,md-phone-portrait,ios-photos,ios-photos-outline,md-photos,ios-pie,ios-pie-outline,md-pie,ios-pin,ios-pin-outline,md-pin,ios-pint,ios-pint-outline,md-pint,logo-pinterest,ios-pizza,ios-pizza-outline,md-pizza,ios-plane,ios-plane-outline,md-plane,ios-planet,ios-planet-outline,md-planet,ios-play,ios-play-outline,md-play,logo-playstation,ios-podium,ios-podium-outline,md-podium,ios-power,ios-power-outline,md-power,ios-pricetag,ios-pricetag-outline,md-pricetag,ios-pricetags,ios-pricetags-outline,md-pricetags,ios-print,ios-print-outline,md-print,ios-pulse,ios-pulse-outline,md-pulse,logo-python,ios-qr-scanner,md-qr-scanner,ios-quote,ios-quote-outline,md-quote,ios-radio,ios-radio-outline,md-radio,ios-radio-button-off,md-radio-button-off,ios-radio-button-on,md-radio-button-on,ios-rainy,ios-rainy-outline,md-rainy,ios-recording,ios-recording-outline,md-recording,logo-reddit,ios-redo,ios-redo-outline,md-redo,ios-refresh,md-refresh,ios-refresh-circle,ios-refresh-circle-outline,md-refresh-circle,ios-remove,md-remove,ios-remove-circle,ios-remove-circle-outline,md-remove-circle,ios-reorder,md-reorder,ios-repeat,md-repeat,ios-resize,md-resize,ios-restaurant,ios-restaurant-outline,md-restaurant,ios-return-left,md-return-left,ios-return-right,md-return-right,ios-reverse-camera,ios-reverse-camera-outline,md-reverse-camera,ios-rewind,ios-rewind-outline,md-rewind,ios-ribbon,ios-ribbon-outline,md-ribbon,ios-rose,ios-rose-outline,md-rose,logo-rss,ios-sad,ios-sad-outline,md-sad,logo-sass,ios-school,ios-school-outline,md-school,ios-search,ios-search-outline,md-search,ios-send,ios-send-outline,md-send,ios-settings,ios-settings-outline,md-settings,ios-share,ios-share-outline,md-share,ios-share-alt,ios-share-alt-outline,md-share-alt,ios-shirt,ios-shirt-outline,md-shirt,ios-shuffle,md-shuffle,ios-skip-backward,ios-skip-backward-outline,md-skip-backward,ios-skip-forward,ios-skip-forward-outline,md-skip-forward,logo-skype,logo-snapchat,ios-snow,ios-snow-outline,md-snow,ios-speedometer,ios-speedometer-outline,md-speedometer,ios-square,ios-square-outline,md-square,md-square-outline,ios-star,ios-star-outline,md-star,ios-star-half,md-star-half,md-star-outline,ios-stats,ios-stats-outline,md-stats,logo-steam,ios-stopwatch,ios-stopwatch-outline,md-stopwatch,ios-subway,ios-subway-outline,md-subway,ios-sunny,ios-sunny-outline,md-sunny,ios-swap,md-swap,ios-switch,ios-switch-outline,md-switch,ios-sync,md-sync,ios-tablet-landscape,md-tablet-landscape,ios-tablet-portrait,md-tablet-portrait,ios-tennisball,ios-tennisball-outline,md-tennisball,ios-text,ios-text-outline,md-text,ios-thermometer,ios-thermometer-outline,md-thermometer,ios-thumbs-down,ios-thumbs-down-outline,md-thumbs-down,ios-thumbs-up,ios-thumbs-up-outline,md-thumbs-up,ios-thunderstorm,ios-thunderstorm-outline,md-thunderstorm,ios-time,ios-time-outline,md-time,ios-timer,ios-timer-outline,md-timer,ios-train,ios-train-outline,md-train,ios-transgender,md-transgender,ios-trash,ios-trash-outline,md-trash,ios-trending-down,md-trending-down,ios-trending-up,md-trending-up,ios-trophy,ios-trophy-outline,md-trophy,logo-tumblr,logo-tux,logo-twitch,logo-twitter,ios-umbrella,ios-umbrella-outline,md-umbrella,ios-undo,ios-undo-outline,md-undo,ios-unlock,ios-unlock-outline,md-unlock,logo-usd,ios-videocam,ios-videocam-outline,md-videocam,logo-vimeo,ios-volume-down,md-volume-down,ios-volume-mute,md-volume-mute,ios-volume-off,md-volume-off,ios-volume-up,md-volume-up,ios-walk,md-walk,ios-warning,ios-warning-outline,md-warning,ios-watch,md-watch,ios-water,ios-water-outline,md-water,logo-whatsapp,ios-wifi,ios-wifi-outline,md-wifi,logo-windows,ios-wine,ios-wine-outline,md-wine,ios-woman,ios-woman-outline,md-woman,logo-wordpress,logo-xbox,logo-yahoo,logo-yen,logo-youtube,ios-loading'
}
},
computed: {
iconList() {
return this.icons.split(',')
}
},
methods: {
setIcon(name) {
this.$emit('iconName', name)
this.iconModal = false
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<div class="jurisdiction">
<div class="jurisdiction-form">
<!-- <Form :model="formItem" :label-width="70" inline>
<FormItem label="菜单名称">
<Input v-model="formItem.name" placeholder="请输入菜单名"></Input>
</FormItem>
<FormItem label="菜单状态">
<Select v-model="formItem.status" placeholder="请选择菜单状态">
<Option value="1">显示</Option>
<Option value="2">隐藏</Option>
</Select>
</FormItem>
<FormItem :label-width="0">
<Button type="primary" @click="listTree">查询</Button>
</FormItem>
</Form> -->
<div class="right-btn">
<Button type="primary" @click="add">新建系统</Button>
</div>
</div>
<div>
<div class="margin-top-10">
<tree-grid
:items="data"
ref="table"
:columns="columns"
@on-row-click="rowClick"
@on-selection-change="selectionClick"
@on-sort-change="sortClick"
></tree-grid>
</div>
</div>
<!-- 新增系统弹框 -->
<Modal
v-model="addShow"
:title=" titleAdd"
:width="440"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="saveOk"
@on-cancel="saveCancel"
>
<div style="height:250px;padding:20px 0">
<Form :model="addModel" :label-width="120" inline>
<FormItem label="系统名称">
<Input
style="width:240px;"
size="large"
v-model.trim="addModel.name"
placeholder="请输入系统名称"
/>
</FormItem>
<FormItem label="请求地址">
<Input
style="width:240px;"
size="large"
v-model.trim="addModel.url"
placeholder="请输入请求地址"
/>
</FormItem>
<FormItem label="备注">
<Input
:rows="4"
maxlength="50"
show-word-limit
type="textarea"
placeholder="请输入备注信息"
style="width: 240px"
size="large"
v-model.trim="addModel.remark"
/>
</FormItem>
</Form>
</div>
</Modal>
<!-- 新建菜单/目录弹框 -->
<add-Memu ref="showAdd" :dataChild="dataChild" @listTree="listTree"></add-Memu>
</div>
</template>
<script>
import addMemu from './componets/addMemu'
export default {
name: '',
components: {
addMemu
},
data() {
return {
dataChild: {},
addShow: false,
showMenu: false,
titleAdd: '',
formItem: {
status: '',
name: ''
},
addModel: {
name: '',
url: '',
remark: '',
type: '0'
},
data: [],
columns: [
{
title: '菜单名称',
key: 'name',
width: '150',
sortable: true
},
{
title: '排序',
key: 'priority'
},
{
title: '请求地址',
key: 'url',
width: '200',
align: 'left'
},
{
title: '类型',
key: 'type',
align: 'center',
// render: (h, params) => {
// return h('state', {
// props: {
// code: 'system.menu.target',
// type: 'text',
// value: params.row.type + ''
// }
// })
// },
type: 'menuRender'
},
{
title: '状态',
key: 'status',
align: 'center',
type: 'menuIsshow'
},
{
title: 'icon图标',
key: 'icon',
align: 'center',
width: '100',
type: 'icons'
},
{
title: '打开方式',
key: 'target',
width: '150',
align: 'center',
type: 'menuTarget'
},
{
title: '备注',
key: 'remark',
width: '150'
},
{
title: '操作',
type: 'action',
actions: [
{
type: 'primary',
text: '新增'
},
{
type: 'primary',
text: '编辑'
},
{
type: 'error',
text: '删除'
}
],
width: '150'
}
]
}
},
created() {
this.formItem = {}
this.listTree()
},
async fetch({ store, params }) {
await store.dispatch('loadDictionary') // 加载数据字典
},
methods: {
//查询
listTree() {
// name:this.formItem.name,status:this.formItem.status
this.$http.jurisdiction.getListTree(this.formItem).then((res) => {
// debugger
this.data = res.result
})
},
//新建
add() {
this.titleAdd = '新增系统'
this.addModel = {}
this.addShow = true
},
selectionClick(arr) {
//console.log('选中数据id数组:' + arr)
// this.checkids = arr
},
sortClick(key, type) {
//console.log('排序字段:' + key)
//console.log('排序规则:' + type)
},
rowClick(data, event, index, txt) {
this.dataChild = data
console.log(data)
if (txt == '新增') {
this.$refs.showAdd.showMenu = true
this.$refs.showAdd.addModel.type = '1'
this.$refs.showAdd.addModel.status = '1'
this.$refs.showAdd.addModel.up_id = data.id
this.$refs.showAdd.addModel.upName = data.name
this.$refs.showAdd.width = 500
this.$refs.showAdd.isActive = false
this.$refs.showAdd.hasError = true
this.$refs.showAdd.title = '新建目录'
this.$refs.showAdd.addModel.name = ''
this.$refs.showAdd.addModel.priority = ''
this.$refs.showAdd.addModel.remark = ''
}
if (txt == '编辑') {
if (data.type == '0') {
this.titleAdd = '编辑系统'
this.addShow = true
} else if (data.type == '3') {
//按钮
this.$refs.showAdd.customTitle = '编辑按钮'
this.$refs.showAdd.customShow = true
this.$refs.showAdd.customModel.status = data.status.toString()
this.$refs.showAdd.customModel.type = data.type.toString()
} else {
this.titleEit = '编辑目录/菜单'
this.$refs.showAdd.showCatalog = true
this.$refs.showAdd.catalogModel.status = data.status.toString()
this.$refs.showAdd.catalogModel.type = data.type.toString()
}
}
if (txt == '删除') {
this.$Modal.confirm({
title: '删除',
content: '<p>是否删除此条菜单,删除请选择确认,否则请取消</p>',
okText: '确认',
cancelText: '取消',
onOk: () => {
this.$http.jurisdiction.deleteRow(data.id).then((res) => {
this.$Message.success('删除成功')
this.listTree()
})
}
})
}
//console.log('当前行数据:' + data)
// console.log('点击行号:' + index)
// console.log('点击事件:' + event)
},
saveOk() {
if (this.titleAdd == '新增系统') {
this.addModel.type = '0'
} else if (this.titleAdd == '编辑系统') {
this.addModel.id = this.childId
}
this.$http.jurisdiction.add({ privilege: this.addModel }).then((res) => {
this.listTree()
})
},
saveCancel() {}
}
}
</script>
<style lang="less" scoped>
.jurisdiction-form {
margin-top: 10px;
// position: relative;
.right-btn {
text-align: right;
margin-bottom: 10px;
// position: absolute;
// top: 0px;
// right: 10px;
}
}
</style>
\ No newline at end of file
<template id="addPRi">
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :show-message="false" :label-width="80" >
<FormItem label="父权限" prop="up_id">
<Select v-model="formValidate.up_id" style="width:240px;">
<Option v-for="(item,index) in list " :key="index" :value="item.value" style="display:none">{{item.label}} </Option>
<Tree v-show="isShow" :data="seldata" @on-select-change="handleSelect"></Tree>
</Select>
</FormItem>
<FormItem label="权限名称" prop="name">
<Input v-model="formValidate.name" style="width:240px;"></Input>
</FormItem>
<FormItem label="系统" prop="from_system">
<Select v-model="formValidate.from_system" @on-change="selectSys" style="width:240px;">
<Option v-for="(item,index) in allsystem " :key="index+1" :value="item.value">{{item.label}}</Option>
</Select>
</FormItem>
<FormItem label="操作类型" prop="type">
<Select v-model="formValidate.type" placeholder="请选择" style="width:240px;">
<Option value=1>菜单</Option>
<Option value=2>系统</Option>
<Option value=3>页面</Option>
</Select>
</FormItem>
<FormItem label="地址" prop="url">
<Input v-model="formValidate.url" style="width:240px;"></Input>
<!-- <Select v-model="formValidate.url" placeholder="请选择">
<Option v-for="(item,index) in allpages " :key="item.value" :value="item.value">{{item.label}}</Option>
</Select> -->
</FormItem>
<!-- <FormItem label="密级" prop="secret_class">
<Select v-model="formValidate.secret_class" placeholder="请选择" style="width:240px;">
<Option v-for="(item,index) in mijis " :key="item.value" :value="item.value">{{item.label}}</Option>
</Select>
</FormItem> -->
<FormItem label="状态" prop="status">
<Select v-model="formValidate.status" placeholder="请选择" style="width:240px;">
<Option value=0>启用</Option>
<Option value=1>禁用</Option>
</Select>
</FormItem>
<!-- <FormItem label="打开方式" prop="target">
<Select v-model="formValidate.target" placeholder="请选择" style="width:240px;">
<Option value="系统内">系统内</Option>
<Option value="新页面">新页面</Option>
</Select>
</FormItem> -->
<FormItem label="排序" prop="priority">
<Input v-model="formValidate.priority" style="width:240px;"></Input>
</FormItem>
</Form>
</template>
<script>
import service from '@/plugins/request'
export default {
name:'addPrivilege',
tit:'',
props:[
'seldata'
],
data(){
return {
formValidate:{name:'',up_id:-1,from_system:'',type:'',url:'',status:'',target:'',priority:'',secret_class:''},
ruleValidate: {
up_id:[{required: true}],
name:[{required: true}],
from_system:[{required: true}],
type:[{required: true}],
url:[{required: true}]
// priority:[ { required: true, message: '排序不能为空' },
// { type: 'number', message: '请输入排序,只能填写数字' }]
},
list:[],
isShow:true,
allsystem:[
{
value:'0',
label:'三车间MES'
},
{
value:'1',
label:'机加MES'
}
],
allpages:[
{
value:'/a/index.html',
label:'/a/index.html'
},
{
value:'/a/port.html',
label:'/a/port.html'
},
{
value:'/a/default.html',
label:'/a/default.html'
}
],
mijis:[
{
value:'机密',
label:'机密'
},
{
value:'一般',
label:'一般'
},
{
value:'内部',
label:'内部'
}
]
}
},
created(){
this.formValidate.from_system=this.allsystem[0].value
//this.gettree(this.formValidate.from_system);
},
computed:{
},
methods:{
selectSys(){
this.$emit('selectSys',this.formValidate.from_system)
},
handleSelect(data){
this.list=[];
this.list.push({label:data[0].title,value:data[0].value});
console.log(this.list);
this.formValidate.up_id=data[0].value;
},
getdata(){
return this.formValidate
}
}
}
</script>
<style scoped>
.ivu-form-item {width:48%;display:inline-block;}
.ivu-form-item:nth-child(odd) {
margin-left: 10px
}
</style>
\ No newline at end of file
<!--
* @Author: 黄龙
* @pageName: 'tree-grid 树型表格'
* @Date: 2017-07-17 16:48:44
* @Last Modified by: 黄龙
* @Last Modified time: 2017-07-17 16:48:44
* @events @on-row-click 单击行或者单击操作按钮方法
@on-selection-change 多选模式下 选中项变化时触发
@on-sort-change 排序时有效,当点击排序时触发
@props items 显示的结构化数据
columns 表格列的配置描述 sortable:true 开启排序功能
type: 'selection'为多选功能 type: 'action' 为操作功能 actions:[{}] 操作按钮
-->
<template>
<div :style="{width:tableWidth,height:tableWidth}" class='autoTbale'>
<table class="table table-bordered" id='hl-tree-table' ref="hl-tree-table">
<thead>
<tr>
<th v-for="(column,index) in cloneColumns" :key="index" style="background:#F5F6FA">
<label v-if="column.type === 'selection'">
<input type="checkbox" v-model="checks" @click="handleCheckAll">
</label>
<label v-else>
{{ renderHeader(column, index) }}
<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 type="arrow-down-b" :class="{on: column._sortType === 'desc'}" @click.native="handleSort(index, 'desc')" />
</span>
</label>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in initItems" :key="item.index" v-show="show(item)" :class="{'child-tr':item.parent}" class="mytr noacitve" @click="clicktr(item,$event,index)">
<td v-for="(column,snum) in columns" :key="column.key" :style=tdStyle(column)>
<label v-if="column.type === 'selection'">
<input type="checkbox" :value="item.id" v-model="checkGroup" @click="handleCheckClick(item,$event,index)">
</label>
<div v-if="column.type === 'action'" class="action">
<op :oprate="action.oprate" :class="action.class" @click="RowClick(item,$event,index,action.text)" v-for='action in (column.actions)' :key="action.text">{{action.text}}</op>
</div>
<label @click="toggle(index,item)" v-if="!column.type">
<span v-if='snum==iconRow()'>
<i v-html='item.spaceHtml'></i>
<i v-if="item.children&&item.children.length>0" class="ivu-icon" style="font-size:20px" :class="{'ivu-icon-md-arrow-dropright':!item.expanded,'ivu-icon-md-arrow-dropdown':item.expanded }"></i>
<i v-else class="ms-tree-space"></i>
</span> {{renderBody(item,column) }}
</label>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'treeGrid',
props: {
columns: Array,
items: {
type: Array,
default: function() {
return [];
}
}
},
data() {
return {
initItems: [], //处理后数据数组
cloneColumns: [], //处理后的表头数据
checkGroup: [], //复选框数组
checks: false, //全选
screenWidth: document.body.clientWidth, //自适应宽
tdsWidth: 0, //td总宽
timer: false, //控制监听时长
dataLength: 0, //树形数据长度
isActive:false,
leftWidth:0
}
},
computed: {
tableWidth() {
return this.tdsWidth > this.screenWidth && this.screenWidth > 0 ? this.screenWidth + 'px' : '100%'
}
},
watch: {
screenWidth(val) {
if (!this.timer) {
this.screenWidth = val
this.timer = true
setTimeout(() => {
this.timer = false
}, 400)
}
},
items() {
if (this.items) {
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
}
}
},
columns: {
handler() {
this.cloneColumns = this.makeColumns();
},
deep: true
},
checkGroup(data) {
this.checkAllGroupChange(data)
},
},
mounted() {
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 = () => {
return (() => {
window.screenWidth = document.body.clientWidth;
this.screenWidth = window.screenWidth;
})()
}
},
methods: {
clicktr(data,e,i){
//console.log(e);
let result = this.makeData(data);
//console.log(result);
this.$emit('on-row-click', result, e, i)
var boxArr = document.querySelectorAll(".mytr");
// console.log(boxArr)
boxArr.forEach(function(item,index){
item.classList.remove('acitvetr');
if(i !==index){
item.classList.add('noacitve');
}
});
boxArr[i].classList.remove('noacitve');
boxArr[i].classList.add('acitvetr');
},
// 有无多选框折叠位置优化
iconRow() {
for (var i = 0, len = this.columns.length; i < len; i++) {
if (this.columns[i].type == 'selection') {
return 1
}
}
return 0
},
// 设置td宽度,td的align
tdStyle(column) {
var style = {}
if (column.align) {
style["text-align"] = column.align;
}
if (column.width) {
style["min-width"] = column.width + 'px';
}
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) {
let result = this.makeData(data)
this.$emit('on-row-click', result, event, index, text)
},
// 点击事件 返回数据处理
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++) {
o.push(this.makeData(data[i]));
}
} else if (t === 'object') {
for (let i in data) {
if (i != 'spaceHtml' && i != 'parent' && i != 'level' && i != 'expanded' && i != 'isShow' && i !=
'load') {
o[i] = this.makeData(data[i]);
}
}
}
return o;
},
// 处理表头数据
makeColumns() {
let columns = this.deepCopy(this.columns);
this.tdsWidth = 0
columns.forEach((column, index) => {
column._index = index;
column._width = column.width ? column.width : '';
column._sortType = 'normal';
this.tdsWidth += column.width ? parseFloat(column.width) : 0;
});
return columns;
},
// 数据处理 增加自定义属性监听
initData(items, level, parent) {
this.initItems = []
let spaceHtml = "";
for (var i = 1; i < level; i++) {
spaceHtml += "<i class='ms-tree-space'></i>"
}
items.forEach((item, index) => {
item = Object.assign({}, item, {
"parent": parent,
"level": level,
"spaceHtml": spaceHtml
});
if ((typeof item.expanded) == "undefined") {
item = Object.assign({}, item, {
"expanded": false
});
}
if ((typeof item.show) == "undefined") {
item = Object.assign({}, item, {
"isShow": false
});
}
if ((typeof item.isChecked) == "undefined") {
item = Object.assign({}, item, {
"isChecked": false
});
}
item = Object.assign({}, item, {
"load": (item.expanded ? true : false)
});
this.initItems.push(item);
if (item.children && item.expanded) {
this.initData(item.children, level + 1, item);
}
})
},
// 隐藏显示
show(item) {
return ((item.level == 1) || (item.parent && item.parent.expanded && item.isShow));
},
toggle(index, item) {
let level = item.level + 1;
let spaceHtml = "";
for (var 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;
var 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 (var i=0; i<this.checkGroup.length; i++){
if(this.checkGroup[i] == data.id){
this.checkGroup.splice(i,1)
}
for (var 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) {
var hash = {},
len = a.length,
result = [];
for (var 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.length
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);
} else {
return column.title || '#';
}
},
// 返回内容
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
},
// 深度拷贝函数
deepCopy(data) {
var t = this.type(data),
o, i, 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;
} else if (t === 'object') {
for (i in data) {
o[i] = this.deepCopy(data[i]);
}
return o;
}
},
type(obj) {
var toString = Object.prototype.toString;
var 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 scoped>
.autoTbale {
overflow: auto;
}
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.table-bordered {
border: 1px solid #EBEBEB;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
border-top: 1px solid #e7eaec;
line-height: 1.42857;
padding: 8px ;
vertical-align: middle;
text-align: center
}
.table>tbody>tr>td:nth-child(1){
padding: 8px 8px 8px 30px;
text-align: left;
}
.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
border: 1px solid #e7e7e7;
}
.table>thead>tr>th {
border-bottom: 1px solid #DDD;
}
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
background-color: #F5F5F6;
}
#hl-tree-table>tbody>tr {
height: 48px;
}
#hl-tree-table>tbody>tr:hover{
background-color: #ebf7ff;
}
.noacitve {
background-color: #fbfbfb;
}
.acitvetr {
background-color: #ebf7ff;
}
/deep/.ms-tree-space {
position: relative;
top: 1px;
display: inline-block;
font-style: normal;
font-weight: 400;
line-height: 1;
width: 14px;
height: 14px;
}
/deep/.ms-tree-space::before {
content: ""
}
#hl-tree-table th>label {
margin: 0;
}
</style>
<template>
<div>
<div class="contentRight " :style="{height:divHeihgt}">
<div style="height:32px;">
<div style="display:inline-block;">
<span class="margriht6">系统</span>
<Select
v-model="model1"
label-in-value
@on-change="model1Change"
style="width:240px"
placeholder="请选择"
>
<Option v-for="item in sysdata" :value="item.value" :key="item.value">{{item.label }}</Option>
</Select>
<span class="margriht6 marleft10">状态</span>
<Select v-model="model2" style="width:80px" placeholder="请选择">
<Option v-for="item in roleStatus" :value="item.value" :key="item.value">{{item.label }}</Option>
</Select>
<Button type="primary" @click="search">查询</Button>
</div>
<div style="float:right" class="paddingbtn">
<Button type="primary" @click="add">新增</Button>
<Button type="primary" @click="edit">编辑</Button>
<Button type="primary" @click="del">删除</Button>
</div>
</div>
<div class="margin-top-10">
<tree-grid
:items="data"
ref="table"
:columns="columns"
@on-row-click="rowClick"
@on-selection-change="selectionClick"
@on-sort-change="sortClick"
></tree-grid>
</div>
</div>
<Modal
v-model="modal1"
:mask-closable="false"
title="新增权限菜单"
:width="800"
:loading="myloading"
ok-text="保存"
cancel-text="取消"
@on-ok="ok('formValidate')"
@on-cancel="cancel"
>
<add-privilege :seldata="seldata" ref="addpri" v-on:selectSys="selectSys"></add-privilege>
<!-- <div slot="footer" style="text-align:center">
<Button type="primary" @click="ok('formValidate')">保存</Button>
<Button
type="primary"
style="border-color: rgb(204, 204, 204);background-color:white;color:black"
@click="cancel"
>取消</Button>
</div>-->
</Modal>
<myconfirm ref="mysel" v-on:confirmok="okmysel" v-on:confirmcancel="cancelmysel"></myconfirm>
</div>
</template>
<script>
import treeGrid from './components/treeGrid'
import addPrivilege from './components/add'
import myconfirm from '../../processDesign/productTree/components/myconfirm'
import service from '@/plugins/request'
export default {
components: {
treeGrid,
addPrivilege,
myconfirm
},
data() {
return {
model1: '',
model1Name: '',
model2: '',
modal1: false,
keyid: 0,
divHeihgt:"",
myloading:true,
//点击的行号
clickindex: -1,
clickdata: {},
checkids: [],
//添加还是编辑
isedit: false,
//添加时候表单数据
formValidate1: {},
sysdata: [
// {
// value: '-1',
// label: '全部'
// },
{
value: '0',
label: '3车间MES'
},
{
value: '1',
label: '机加MES'
}
],
roleStatus: [
{
value: '-1',
label: '不限'
},
{
value: '0',
label: '启用'
},
{
value: '1',
label: '禁用'
}
],
columns: [
// {
// type: 'selection'
// },
{
title: '权限名称',
key: 'name',
width: '150',
sortable: true
},
// {
// title: '父权限',
// key: 'up_id'
// },
{
title: '系统',
key: 'system_name',
align:"left",
},
{
title: '地址',
key: 'url',
width: '200',
align:"left",
},
// {
// title: '密级',
// key: 'secret_class'
// },
{
title: '状态',
key: 'status_name',
render: (h, params) => {
return h(
'span',
{
on: {
click: () => {}
}
},
params.status == '0' ? '启用' : '禁用'
)
}
},
{
title: '类型',
key: 'type_name'
},
// {
// title: '打开方式',
// key: 'target'
// },
{
title: '排序',
key: 'priority'
},
{
title: '创建时间',
key: 'creationTime',
width: '150',
},
{
title: '修改时间',
key: 'lastModificationTime',
width: '150',
}
// {
// title: '操作',
// type: 'action',
// actions: [{
// type: 'primary',
// text: '编辑'
// }, {
// type: 'error',
// text: '删除'
// }],
// width: '150',
// }
],
data: [],
//父权限菜单树
seldata: [],
//父权限名
parent_name: ''
}
},
methods: {
loaddata: function() {
var url = `${systemUrl}/Privilege/getprivileges`
var that = this
service.get(`${url}`, this.searchdata ).then((response) => {
// console.log(response)
that.data = response.result
})
},
lodataByid: function(data1) {
var url = `${systemUrl}/Privilege/GetById`
service
.get(`${url}`, { id: this.clickindex })
.then((response) => {
//console.log(response)
data1 = response.result
//console.log(data1)
this.gettree(data1.from_system, data1)
})
},
gettree(sid, data1) {
service
.get(`${systemUrl}/Privilege/getTree`, { from_system: sid,id:this.clickindex})
.then((response) => {
this.seldata = response.result
this.$refs.addpri.list = []
if (this.clickindex >= 0) {
if (data1) {
//下拉列表切换的时候
if (data1 == 'selectSys') {
//alert(1)
this.$refs.addpri.formValidate.up_id = 0
this.$refs.addpri.list.push({ label: '根节点', value: 0 })
this.setSelect(this.seldata, 0)
} else {
// alert(2)
console.log(data1)
if (this.isedit) {
// alert(12)
this.setSelect(this.seldata, data1.up_id)
this.$refs.addpri.list.push({
label: this.parent_name,
value: data1.up_id
})
this.$refs.addpri.formValidate = data1
this.$refs.addpri.formValidate.from_system=data1.from_system+''
this.$refs.addpri.formValidate.status = data1.status + ''
this.$refs.addpri.formValidate.type = data1.type + ''
} else {
// alert(13)
this.setSelect(this.seldata, data1.id)
this.$refs.addpri.formValidate={}
this.$refs.addpri.formValidate.up_id = data1.id
this.$refs.addpri.formValidate.from_system = data1.from_system+''
//this.$refs.addpri.formValidate.id=''
this.$refs.addpri.list.push({
label: this.parent_name,
value: data1.id
})
}
}
}
} else {
}
})
},
search: function() {
this.isedit = false
this.clickindex=-1
this.loaddata()
this.gettree(this.searchdata.from_system)
},
selectSys: function(val) {
this.gettree(val, 'selectSys')
},
setnoselect: function(data, val) {
data.forEach((item, index) => {
item.selected = false
if (item.children) {
this.setnoselect(item.children)
}
})
},
setSelect: function(data, val) {
//data=this.seldata;
this.setnoselect(data)
data.forEach((item, index) => {
item.selected = false
if (item.value == val) {
// alert(11)
item.selected = true
this.parent_name = item.title
} else {
if (item.children) {
this.setSelect(item.children, val)
}
}
})
//console.log(data)
},
add: function() {
// if(this.datacount>=1 && this.clickindex < 0){
// this.$Message.error("请选中一个根节点后再添加");
// return;
// }
this.isedit = false
this.setnoselect(this.seldata)
this.$refs.addpri.$refs['formValidate'].resetFields()
this.modal1 = true
this.$refs.addpri.list = []
if (this.clickindex < 0) {
this.$refs.addpri.formValidate.up_id = 0
this.$refs.addpri.list.push({ label: '根节点', value: 0 })
this.setSelect(this.seldata, 0)
console.log(this.searchdata.from_system)
this.$refs.addpri.formValidate.from_system = this.searchdata.from_system+''
}
//选中一行
else {
var data1 = {}
this.lodataByid(data1)
}
},
//新增,编辑保存
ok: function(name) {
var a = this.$refs.addpri
a.$refs[name].validate((valid) => {
if (valid) {
//this.$Message.success('Success!');
var url = `${systemUrl}/Privilege/CreateOrUpdate`
var that = this
if(!this.$refs.addpri.formValidate.status){
this.$refs.addpri.formValidate.status=0
}
if(!this.$refs.addpri.formValidate.priority){
this.$refs.addpri.formValidate.priority=0
}
if(this.$refs.addpri.formValidate.priority){
if(typeof(this.$refs.addpri.formValidate.priority) !='number'){
that.$Message.error('排序字段只能输入数字');
return;
}
}
this.formValidate1 = this.$refs.addpri.formValidate
//console.log(this.formValidate1)
service
.post(`${url}`, JSON.stringify({ Privilege: this.formValidate1 }))
.then((response) => {
if (response.success) {
that.$Message.success('保存成功')
that.loaddata()
// that.gettree();
this.modal1 = false
}
})
.catch((error) => {
that.$Message.error('保存失败')
})
//
} else {
setTimeout(() => {
this.myloading = false
this.$nextTick(() => {
this.myloading = true
})
}, 500)
this.$Message.error('请输入必填项')
}
})
},
edit: function() {
if (this.clickindex >= 0) {
this.modal1 = true
this.isedit = true
this.$refs.addpri.$refs['formValidate'].resetFields()
var data1 = {}
this.lodataByid(data1)
//编辑页面父权限下拉设置
// this.$refs.addpri.formValidate.up_id=data.up_id;
} else {
this.$Message.warning('请选中一行数据')
}
},
del: function() {
if (this.clickindex >= 0 || this.checkids.length > 0) {
var data = this.clickdata
this.keyid = data.id
this.$refs.mysel.confirmmodal = true
} else {
this.$Message.warning('请选中一行数据')
}
},
okmysel(bl) {
var url = `${systemUrl}/Privilege/Delete`
var that = this
service
.delete(`${url}?id=${this.keyid}`)
.then((response) => {
if (response.success) {
that.$Message.success('删除成功')
that.loaddata()
}
})
.catch((error) => {
that.$Message.error('删除失败')
})
that.$refs.mysel.confirmmodal = bl
},
cancelmysel(bl) {
this.$refs.mysel.confirmmodal = bl
},
cancel: function() {
this.isedit=false
this.modal1 = false
},
rowClick(data, event, index, txt) {
//console.log('当前行数据:' + data)
//console.log('点击行号:' + index)
//console.log('点击事件:' + event)
data = JSON.stringify(data)
data = JSON.parse(data)
this.clickindex = data.id
this.clickdata = data
},
selectionClick(arr) {
//console.log('选中数据id数组:' + arr)
this.checkids = arr
},
sortClick(key, type) {
//console.log('排序字段:' + key)
//console.log('排序规则:' + type)
},
model1Change: function(v) {
//console.log(v);
this.model1Name = v.label
}
},
created() {
this.model1 = this.sysdata[0].value
this.model1Name = this.sysdata[0].label
this.model2 = this.roleStatus[0].value
this.loaddata()
//this.gettree(this.model1)
this.divHeihgt= window.innerHeight - 100+"px";
},
mounted() {
// this.tbPro.height = window.innerHeight - this.$refs.table.$el.offsetTop - 70
window.onresize = () => {
return (() => {
this.divHeihgt = window.innerHeight - 100+"px";
})()
}
},
computed: {
searchdata: function() {
return {
from_system: this.model1,
status: this.model2,
system_name: this.model1Name
}
},
datacount:function(){
return this.data.length
}
}
}
</script>
<style scoped>
.margriht6 {
display: inline-block;
margin-right: 6px;
}
.marleft10 {
margin-left: 10px;
}
.marleft20 {
margin-left: 20px;
}
</style>
\ No newline at end of file
<template>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :show-message="false" :label-width="90" >
<Row >
<FormItem label="角色名称" prop="name">
<Input v-model="formValidate.name" style="width:240px;"></Input>
</FormItem>
</Row>
<Row >
<FormItem label="状态" prop="status">
<Select v-model="formValidate.status" placeholder="请选择" style="width:240px;">
<Option value="0">启用</Option>
<Option value="1">禁用</Option>
</Select>
</FormItem>
</Row>
<Row >
<FormItem label="角色描述" prop="description">
<Input v-model="formValidate.description" style="width:240px;"></Input>
</FormItem>
</Row>
<!-- <FormItem label="角色类型" prop="type">
<Select v-model="formValidate.type" placeholder="请选择">
<Option value="生产处调度员">生产处调度员</Option>
<Option value="库管">库管</Option>
<Option value="班组长">班组长</Option>
<Option value="操作工">操作工</Option>
</Select>
</FormItem> -->
</Form>
</template>
<script>
export default {
name:'addRole',
tit:'',
props:[
''
],
data(){
return {
formValidate:{name:'',status:'',description:''},
ruleValidate: {
name:[{required: true}],
status:[{required: true}]
},
isShow:true,
allsystem:[
{
value:'全部',
label:'全部'
},
{
value:'三车间MES',
label:'三车间MES'
},
{
value:'机加MES',
label:'机加MES'
}
],
}
},
created(){
},
methods:{
}
}
</script>
<style scoped>
.ivu-form-item {width:46%;display:inline-block;}
.ivu-form-item:nth-child(odd) {
margin-left: 10px
}
.ivu-form-item:nth-child(even) {
margin-left: 14px
}
</style>
\ No newline at end of file
<template>
<div>
<Input v-model="value1" placeholder="请输入角色名称" clearable style="width: 200px" />
<Select v-model="model1" style="width:200px" clearable placeholder="请选择">
<Option v-for="item in roleStatus" :value="item.value" :key="item.value">{{item.label }}</Option>
</Select>
<Button type="primary" @click="search">查询</Button>
<slot></slot>
</div>
</template>
<script>
export default {
name:'rolemain',
data(){
return {
value1:'',
model1: '',
roleStatus: [
{
value: '启用',
label: '启用'
},
{
value: '禁用',
label: '禁用'
}
]
}
},
methods:{
search:function(){
this.$emit('search',this.value1,this.model1)
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
<template>
<Select v-model="model1" style="width:200px">
<Option v-for="item in roleStatus" :value="item.value" :key="item.value">{{item.label}}</Option>
</Select>
</template>
<script>
export default {
name:'sel',
props:[
'model1','roleStatus'
]
}
</script>
\ No newline at end of file
<template>
<Table :border="tbPro.isBorder" stripe :columns="tbPro.columns" :stripe="tbPro.stripe"
:data="tbPro.data" :highlight-row="tbPro.highlight" :loading="tbPro.loading" :height="tbPro.height" :content="tbPro.cur" @on-row-click="rowclick" class="tableCommon"></Table>
</template>
<script>
export default {
name:'tb',
props:[
//'columns1','data1','isBorder'
'tbPro'
],
methods:{
rowclick(rowdata,index){
this.$emit('rowclick',rowdata,index)
}
}
}
</script>
\ No newline at end of file
<template>
<div>
<div class="contentRight">
<Tabs :animated="false" @on-click="tab">
<TabPane label="默认角色">
<div class="paddingbtn">
<rolemain v-on:search="search"></rolemain>
<tb :tb-pro="tbPro" ref="table" class="martop10"></tb>
</div>
</TabPane>
<TabPane label="自定义角色">
<div class="paddingbtn">
<rolemain v-on:search="search">
<div style="float:right">
<Button type="primary" @click="add">新增</Button>
</div>
</rolemain>
<tb :tb-pro="tbPro" ref="table1" class="martop10"></tb>
</div>
</TabPane>
</Tabs>
<template>
<Page
:total="this.total"
:current="this.current"
:page-size="this.pageSize"
show-sizer
show-elevator
:page-size-opts="this.showPagesize"
@on-change="pageChange"
@on-page-size-change="pagesizeChange"
/>
</template>
</div>
<Modal
v-model="menuModal"
:mask-closable="false"
:title="menuTitle"
:width="800"
footer-hide
>
<RoleMenu :role="menuRole" @menu-close="menuModal=false"></RoleMenu>
</Modal>
<Modal
v-model="modal2"
:mask-closable="false"
title="新增角色"
:width="440"
:loading="myloading"
ok-text="保存"
cancel-text="取消"
@on-ok="ok1('formValidate')"
@on-cancel="cancel1"
>
<add-role ref="role"></add-role>
<!-- <div slot="footer" style="text-align:center">
<Button type="primary" @click="ok1('formValidate')">保存</Button>
<Button
type="primary"
style="border-color: rgb(204, 204, 204);background-color:white;color:black"
@click="cancel1"
>取消</Button>
</div>-->
</Modal>
</div>
</template>
<script>
import rolemain from './components/rolemain'
import sel from './components/sel'
import tb from './components/tb'
import addRole from './addRole'
import RoleMenu from './roleMenu'
import service from '@/plugins/request'
import qs from 'qs'
export default {
components: {
rolemain,
sel,
tb,
addRole,
RoleMenu
},
data() {
return {
myloading: true,
pageHeight: '',
keyid: '', //z主键
tabIndex: 0,
model1: '',
modal1: false,
modal2: false,
isEdit: false,
formValidate1: {},
roleStatus: [
{
value: '启用',
label: '启用'
},
{
value: '禁用',
label: '禁用'
}
],
//弹出框
title1: 'aaa',
current: 1,
pageSize: 10,
showPagesize: [10, 20, 40],
menuModal:false,
menuTitle:"",
menuRole:null,
total: 0,
//表格列数据和属性
tbPro: {
// cur:this,
isBorder: true,
stripe: true,
loading: true,
height: '',
columns: [
{
type: 'index',
width: 60,
align: 'center'
},
// {
// title: 'id',
// key: 'id'
// },
{
title: '角色名',
key: 'name'
},
// {
// title: '角色类型',
// key: 'roletype'
// },
{
title: '状态',
key: 'status',
align: 'center',
width: 100,
render: (h, params) => {
return h('span', {}, params.row.status == 0 ? '启用' : '禁用')
}
},
{
title: '角色描述',
key: 'description'
},
{
title: '操作',
key: 'action',
align: 'center',
width: 180,
render: (h, params) => {
if (this.tabIndex == 0) {
return h('div', { class: 'action' },[
h(
'op',
{
attrs:{
oprate:'detail',
class:'empower'
} ,
on: { click: () => {
this.setRoleMenu(params.row);
}
}
},
'授权'
)
])
} else {
return h('div', { class: 'action' }, [
h(
'op',
{
attrs:{
oprate:'detail',
class:'empower'
} ,
on: {
click: () => {
this.setRoleMenu(params.row);
}
}
},
'授权'
),
h(
'op',
{
attrs:{
oprate:'detail',
class:'edit'
} ,
on: {
click: () => {
this.edit(params)
}
}
},
'编辑'
),
h(
'op',
{
attrs:{
oprate:'delete',
class:'remove'
},
on: {
click: () => {
this.del(params)
}
}
},
'删除'
)
])
}
}
}
],
data: []
},
//授权页面列表
data2: []
}
},
computed: {},
methods: {
//选项卡切换
tab: function(data) {
//console.log(data);
this.tabIndex = data
this.current = 1
this.loaddata()
},
//查询
search: function(data1, data2) {
var status = -1
if (data2 == '启用') {
status = 0
}
if (data2 == '禁用') {
status = 1
}
var searchdata = {
name: data1 ? data1 : null,
status: status,
isSelect: 'is',
role_type: this.tabIndex,
pageSize: this.pageSize,
page: this.current
}
this.loaddata(searchdata)
},
add: function() {
//alert("新增")
this.isEdit = false
this.$refs.role.$refs['formValidate'].resetFields()
this.modal2 = true
// this.$refs.role.formValidate={name:'',status:'',description:''}
},
setRoleMenu(row){
this.menuModal=true;
this.menuTitle="功能授权:"+row.name
this.menuRole=row
},
//编辑
edit: function(params) {
this.isEdit = true
this.modal2 = true
this.keyid = params.row.id
this.$refs.role.$refs['formValidate'].resetFields()
this.$refs.role.formValidate = {
name: params.row.name,
status: `${params.row.status}`,
description: params.row.description
}
},
//删除
del(params) {
this.keyid = params.row.id
var that = this
service
.delete(`${systemUrl}/MyRole/Delete?id=${this.keyid}`)
.then((response) => {
if (response.success) {
that.$Message.success('删除成功')
that.loaddata()
}
})
.catch((error) => {
this.$Message.error('删除失败')
})
},
cancelmysel(bl) {
this.$refs.mysel.confirmmodal = bl
},
//保存角色
ok1: function(name) {
var a = this.$refs.role
a.$refs[name].validate((valid) => {
if (valid) {
//this.$Message.success('Success!');
var that = this
this.formValidate1 = this.$refs.role.formValidate
this.formValidate1.GrantedPermissions = ['Pages.Roles'] //有角色模块新增的权限
this.formValidate1.DisplayName = this.formValidate1.name
this.formValidate1.role_type = this.tabIndex
if (this.isEdit) {
this.formValidate1.id = this.keyid
service
.put(
`${systemUrl}/MyRole/Update`,
JSON.stringify(this.formValidate1)
)
.then((response) => {
if (response.success) {
that.$Message.success('保存成功')
that.loaddata()
}
})
.catch((error) => {
this.$Message.error('保存失败')
})
} else {
service
.post(
`${systemUrl}/MyRole/Create`,
JSON.stringify(this.formValidate1)
)
.then((response) => {
if (response.success) {
this.$Message.success('保存成功')
that.loaddata()
}
//that.tbPro.data.push(this.formValidate1)
})
.catch((error) => {
this.$Message.error('保存失败')
})
}
var p = qs.stringify(this.formValidate1)
//console.log(p);
this.modal2 = false
} else {
setTimeout(() => {
this.myloading = false
this.$nextTick(() => {
this.myloading = true
})
}, 500)
this.$Message.error('请输入必填项')
}
})
},
cancel: function() {
this.modal1 = false
},
cancel1: function() {
this.modal2 = false
},
loaddata(searchdata) {
var url = systemUrl+'/MyRole/GetRolesAsync'
this.tbPro.loading = true
service
.get(`${url}`, searchdata
? searchdata
: {
role_type: this.tabIndex,
pageSize: this.pageSize,
page: this.current
})
.then((response) => {
this.tbPro.data = response.result.items
this.total = response.result.total
this.tbPro.loading = false
//console.log(this.tbPro.data)
})
},
pageChange(val) {
this.current = val
this.loaddata()
},
pagesizeChange(val) {
this.pageSize = val
this.loaddata()
}
},
created() {
this.loaddata()
// this.loadtree()
this.tbPro.height = window.innerHeight - 280
// this.pageHeight=document.querySelectorAll(".single-page-con")[0].offsetHeight ;
//console.log(this.pageHeight)
},
mounted() {
window.onresize = () => {
return (() => {
this.tbPro.height = window.innerHeight - 280
})()
}
}
}
</script>
<style scoped>
.martop10 {
margin-top: 10px;
}
.bt1:hover {
background-color: rgba(255, 181, 62, 1);
border-color: rgba(255, 181, 62, 1);
}
.ivu-page {
margin-top: 10px;
}
</style>
\ No newline at end of file
<template>
<div>
<div class="roleMenu">
<Tree v-if="show" :data="list" ref="mytree" show-checkbox check-directly ></Tree>
</div>
<div>
<Button type="primary" @click="commit">保存</Button>
<Button class="ml20" @click="$emit('menu-close')">取消</Button>
</div>
</div>
</template>
<script>
export default {
name: 'addRole',
tit: '',
props: {
role: Object
},
data() {
return {
show:false,
data: [],
list:[]
}
},
created() {
this.loadTree();
},
methods: {
loadTree() {
var url = `${systemUrl}/menu/list`
this.$api.post(`${url}`, { pageSize: 2000 ,conditions:[{"fieldName":"Type","fieldValue":3,"conditionalType":"LessThan"}]}).then((r) => {
r.result.sort(function(a,b){
return a.priority-b.priority;
})
this.data = r.result;
})
},
loadRole() {
var url = `${systemUrl}/roleMenu/GetRoleMenu`
//权限树
this.show=false
this.list=[]
this.$api.get(`${url}`, { id: this.role.id }).then((response) => {
let ids= response.result
var items=this.$u.clone(this.data);
console.info(ids,items);
this.list=this.$u.toTree(items,0,u=>{
u.title=u.name;
u.expand=true;
if(ids.indexOf(u.id)>-1){
u.checked=true;
}else{
delete u.checked
}
},"upId")
this.show=true
})
},
commit(){
var list=[];
this.$refs.mytree.getCheckedAndIndeterminateNodes().map(u=>{
list.push({id:u.id,methodId:u.methodId|0,status:u.checked?1:0})
});
var url = `${systemUrl}/RoleMenu/AddRoleMenu`
//权限树
this.$api.post(`${url}`, { id: this.role.id ,list:list}).then((r) => {
if(r.success){
this.$Message.success("权限设置成功!")
}
})
}
}
,
watch:{
"role.id"(v){
this.loadRole();
}
}
}
</script>
<style scoped>
.roleMenu{
height: 400px;
overflow: auto;
}
</style>
\ No newline at end of file
<template>
<Form ref="formValidate" :model="formValidate" :label-width="80">
<Row :gutter="24">
<Col span="12">
<FormItem label="操作者" prop="userName">
<Input v-model="formValidate.userName" style="width:240px;"></Input>
</FormItem>
</Col>
<Col span="12">
<FormItem label="操作坏境" prop="system">
<Input v-model="formValidate.system" style="width:240px;"></Input>
</FormItem>
</Col>
</Row>
<Row :gutter="24">
<Col span="12">
<FormItem label="浏览器" prop="look">
<Input v-model="formValidate.look" style="width:240px;"></Input>
</FormItem>
</Col>
<Col span="12">
<FormItem label="发起页面" prop="startpage">
<Input v-model="formValidate.startpage" style="width:240px;"></Input>
</FormItem>
</Col>
</Row>
<Row :gutter="24">
<Col span="12">
<FormItem label="请求时间 (毫秒)" prop="executionDuration">
<Input v-model="formValidate.executionDuration" style="width:240px;"></Input>
</FormItem>
</Col>
<Col span="12">
<FormItem label="模块名称" prop="serviceName">
<Input v-model="formValidate.serviceName" style="width:240px;"></Input>
</FormItem>
</Col>
</Row>
<Row :gutter="24">
<Col span="12">
<FormItem label="处理方法" prop="methodName">
<Input v-model="formValidate.methodName" style="width:240px;"></Input>
</FormItem>
</Col>
<Col span="12">
<FormItem label="操作说明" prop="note">
<Input v-model="formValidate.note" style="width:240px;"></Input>
</FormItem>
</Col>
</Row>
<Row :gutter="24">
<Col span="12">
<FormItem label="ip地址" prop="clientIpAddress">
<Input v-model="formValidate.clientIpAddress" style="width:240px;"></Input>
</FormItem>
</Col>
<Col span="12"></Col>
</Row>
<Row style="height:90px">
<FormItem label="表单数据" prop="parameters">
<Input
v-model="formValidate.parameters"
type="textarea"
:rows="3"
style="width:634px;"
></Input>
</FormItem>
</Row>
<Row style="height:75px">
<FormItem label="异常信息" prop="exception">
<Input
v-model="formValidate.exception"
type="textarea"
:rows="3"
style="width:634px;"
></Input>
</FormItem>
</Row>
</Form>
</template>
<script>
export default {
name: 'detail',
data() {
return {
formValidate: {
userName: '',
system: '',
look: '',
startpage: '',
executionDuration: '',
serviceName: '',
methodName: '',
note: '',
clientIpAddress: '',
parameters: '',
exception: ''
}
}
}
}
</script>
<style scoped>
.ivu-form-item {
width: 48%;
display: inline-block;
}
.ivu-form-item:nth-child(odd) {
margin-left: 10px;
}
</style>
\ No newline at end of file
<template>
<div class="paddingbtn">
<div class="contentRight">
<div style="height:32px;">
<div style="display:inline-block;">
<Select v-model="model1" @on-change="change" placeholder="操作类型" style="width: 240px">
<Option value="不限">不限</Option>
<Option value="新增/编辑">新增/编辑</Option>
<Option value="删除">删除</Option>
</Select>
<DatePicker
@on-change="changestart"
type="date"
placeholder="请求开始日期"
style="width: 240px"
></DatePicker>
<!-- <DatePicker @on-change="changeend" type="date" placeholder="结束日期" style="width: 200px"></DatePicker> -->
<Input v-model="model2" placeholder="用户账户/姓名" style="width: 240px"></Input>
<Button type="primary" @click="search">查询</Button>
</div>
<!-- <div style="float:right" class="paddingbtn">
<Button type="primary" @click="export2Excel" style="margin-left:6px">导出</Button>
</div> -->
</div>
<div class="mt10">
<tb :tbPro="tbPro" ref="table"></tb>
<Page
:total="this.total"
:current="this.current"
:page-size="this.pageSize"
show-sizer
show-elevator
:page-size-opts="this.showPagesize"
@on-change="pageChange"
@on-page-size-change="pagesizeChange"
/>
</div>
</div>
<Modal v-model="modal1" footer-hide title="详细日志" :width="800">
<detail ref="systemlog"></detail>
</Modal>
</div>
</template>
<script>
import tb from '../roleManagent/components/tb'
import detail from './components/detail'
import service from '@/plugins/request'
export default {
components: { tb, detail },
data() {
return {
model1: '',
model2: '',
modal1: false,
starttime: '',
endtime: '',
dt: [],
current: 1,
pageSize: 10,
showPagesize: [10, 20, 40],
total: 0,
tbPro: {
loading:false,
height: '',
isBorder: true,
stripe: true, //斑马纹
//highlight:true,//高亮显示
columns: [
{
type: 'index',
width: 60,
align: 'center'
},
{
title: '请求开始时间',
key: 'executionTime',
align: 'center',
width:200,
},
{
title: '操作者',
key: 'userName',
width:160,
},
{
title: '模块',
key: 'serviceName'
},
{
title: '操作类型',
key: 'methodName',
width:120,
render: (h, params) => {
return h('span', {}, this.myfun(params.row.methodName))
}
},
{
title: '说明',
key: 'note'
},
{
title: '操作',
key: 'action',
align: 'center',
render: (h, params) => {
return h('div', { class: 'action' }, [
h('op',
{
attrs:{
oprate:'detail'
},
on: { click: () => this.show(params) }
},'查看'
)
])
}
}
],
data: []
}
}
},
methods: {
change(data) {
console.log(data)
},
changestart(data) {
this.starttime = data
},
changeend(data) {
this.endtime = data
},
myfun(type) {
var a = ''
if (type == 'CreateOrUpdate') {
a = '新增/编辑'
} else if (type == 'Create') {
a = '新增'
} else if (type == 'Update') {
a = '编辑'
} else if (type == 'Delete') {
a = '删除'
} else {
a = '查询'
}
return a
},
show(data) {
this.modal1 = true
//console.log(data.row);
this.$refs.systemlog.formValidate = data.row
var info = data.row.browserInfo
if(info){
var look = info.substring(info.lastIndexOf(')') + 1)
var in1 = info.indexOf('(')
var in2 = info.indexOf(')')
// console.log(in1)
// console.log(in2)
var system = info.substring(in1 + 1, in2)
this.$refs.systemlog.formValidate.look = look
this.$refs.systemlog.formValidate.system = system
}
},
search() {
// var data={style:this.model1,UserName:this.model2,ExecutionTimeStart:this.starttime,pageSize:this.pageSize,page:this.current}
// console.log(data);
this.lodata()
},
lodata() {
this.tbPro.loading=true
var url = `${systemUrl}/AuditLog/GetAll`
service
.get(`${url}`, {
pageSize: this.pageSize,
page: this.current,
MethodName: this.model1,
UserName: this.model2,
ExecutionTimeStart: this.starttime
})
.then((response) => {
//console.log(response)
this.total = response.result.totalCount
this.tbPro.data = response.result.items
this.tbPro.loading=false
})
},
pageChange(val) {
this.current = val
this.lodata()
},
pagesizeChange(val) {
this.pageSize = val
this.lodata()
},
export2Excel() {
// require.ensure([], () => {
// const { export_json_to_excel } = require('@/vendor/Export2Excel')
// const tHeader = [
// '请求开始时间',
// '操作者',
// '操作环境',
// '浏览器',
// '请求时间',
// 'ip地址',
// '模块名称',
// '方法',
// '异常'
// ]
// const filterVal = [
// 'executionTime',
// 'userName',
// 'system',
// 'look',
// 'executionDuration',
// 'clientIpAddress',
// 'serviceName',
// 'methodName',
// 'exception'
// ]
// var url = `${systemUrl}/AuditLog/ExportGetAll`
// service
// .get(`${url}`, {
// params: {
// UserName: this.model2,
// ExecutionTimeStart: this.starttime
// }
// })
// .then((response) => {
// this.tb = response.result.items
// const list = this.tb
// list.forEach((item, i) => {
// var info = item.browserInfo
// var look = info.substring(info.lastIndexOf(')') + 1)
// item.look = look
// var in1 = info.indexOf('(')
// var in2 = info.indexOf(')')
// var system = info.substring(in1 + 1, in2)
// item.system = system
// })
// const data = this.formatJson(filterVal, list)
// export_json_to_excel(tHeader, data, '系统日志')
// })
// })
},
formatJson(filterVal, jsonData) {
return jsonData.map((v) => filterVal.map((j) => v[j]))
}
},
created() {
this.lodata()
this.tbPro.height = window.innerHeight - 235
},
mounted() {
// var a=document.querySelectorAll(".single-page-con")[0];
// this.pageHeight=a.offsetHeight-50-54
// this.tbPro.height=this.pageHeight+'px'
//console.log(window.innerHeight)
//console.log(this.$refs.table.$el.offsetTop)
window.onresize = () => {
return (() => {
this.tbPro.height = window.innerHeight - 235
})()
}
}
}
</script>
<style scoped>
.ivu-page {
margin-top: 10px;
}
</style>
\ No newline at end of file
<template>
<div class="addUser">
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<Row class="rowTitle100">
<Col :span="12">
<FormItem :label="l('userName')" prop="userName">
<Input v-model="entity.userName"></Input>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('cardNo')" prop="cardNo">
<Input v-model="entity.cardNo"></Input>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('status')" prop="status">
<Dictionary code="User.base.status" v-model="entity.status" type="radio"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('gender')" prop="gender">
<Dictionary code="User.base.gender" v-model="entity.gender" type="radio"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('birthday')" prop="birthday">
<DatePicker type="date" v-model="entity.birthday" placeholder="请选择"></DatePicker>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('degreeId')" prop="degreeId">
<Dictionary code="User.base.degree" v-model="entity.degreeId"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('departmentTitle')" prop="departmentTitle">
<DepartmentSelect v-model="entity.departmentId" @on-change="setDepartmentTitle" />
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('phone')" prop="phone">
<Input v-model="entity.phone" />
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('email')">
<Input v-model="entity.email" />
</FormItem>
</Col>
<!-- <Col :span="12">
<FormItem :label="l('enableEquip')" prop="enableEquip">
<Input v-model="entity.enableEquip"></Input>
</FormItem>
</Col>-->
<Col :span="12">
<FormItem :label="l('positionId')" prop="positionId">
<Dictionary code="User.base.position" v-model="entity.positionId"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('titleId')" prop="titleId">
<Dictionary code="User.base.jobtitle" v-model="entity.titleId"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('licensedToWork')" prop="licensedToWork">
<Dictionary code="User.base.workLicense" v-model="entity.licensedToWork"></Dictionary>
</FormItem>
</Col>
<Col :span="24">
<FormItem :label="l('remark')" prop="remark">
<Input v-model="entity.remark" type="textarea" :rows="3"></Input>
</FormItem>
</Col>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</div>
</template>
<script>
import Api from './api'
const valideTel = (rule, value, callback) => {
var re = /^1[3-9]{1}[0-9]{9}/
if (value === '' || value === null) {
callback(new Error('请输入手机号'))
} else if (!re.test(value)) {
callback(new Error('请输入正确手机号'))
} else {
callback()
}
}
export default {
name: 'Add',
components: {},
data() {
const validateCarNo = (rule, value, callback) => {
if (!value) {
return callback(new Error('员工编号不能为空'))
}
Api.list(value).then((r) => {
if (r.result.length > 0) {
return callback(new Error('员工编号已经存在'))
} else {
callback()
}
})
}
return {
disabled: false,
showDeptTree: false,
entity: {
gender: 1,
status: 1
},
rules: {
userName: [{ required: true, message: '必填', trigger: 'blur' }],
cardNo: [
{ required: true, message: '必填', trigger: 'blur' },
{ validator: validateCarNo, trigger: 'blur' }
],
departmentTitle: [
{ required: true, message: '必选', trigger: 'change' }
],
// email: [
// { required: true, message: '必填', trigger: 'blur', type: 'email' }
// ],
phone: [{ validator: valideTel, required: true, trigger: 'blur' }]
// degreeId: [
// { required: true, message: '必填', trigger: 'blur', type: 'number' }
// ],
// phone: [{ required: true, message: '必填', trigger: 'blur' }]
}
}
},
props: {
v: Object
},
methods: {
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
this.disabled = true
Api.create(this.entity)
.then((r) => {
this.disabled = false
if (r.success) {
this.$Message.success('保存成功')
//账户同步操作start
let parms = {
userId: r.result.id,
loginName: this.entity.phone, //用户电话
status:this.entity.status,//状态
tanantCode: this.$store.state.userInfo.tanantCode //商户号
}
Api.authAccount(parms).then((res) => {
if (res.success) {
this.$Message.success('账户同步成功')
//修改用户表的accountId start
let parms1 = {
userId: parms.userId,
accountId: res.result
}
Api.updateAccount(parms1).then((res1) => {
if (res1.success) {
this.$Message.success('操作成功')
this.$emit('on-ok')
}
else{
this.$Message.error('同步失败')
}
})
//修改用户表的accountId end
}
})
//账户同步操作end
} else {
this.$Message.error(r.error.message)
}
})
.catch((err) => {
// alert(JSON.stringify(err))
console.warn(err)
this.disabled = false
this.$Message.error(err.error.message)
})
}
})
},
handleClose() {
this.$emit('on-close')
},
l(key) {
key = 'user' + '.' + key
return this.$t(key)
},
setDepartmentTitle(v, item) {
this.entity.departmentTitle = item.name
},
selectDepart() {
this.showDeptTree = true
},
getBirthday(value) {
this.entity.birthday = value
}
},
watch: {
v() {
this.entity = this.$u.clone(this.v)
}
}
}
</script>
<style lang="less">
.addUser {
.ivu-radio-wrapper {
vertical-align: top;
}
}
</style>
import Api from '@/plugins/request'
export default {
index: `${systemUrl}/user/paged`,
paged(params) {
return Api.post(`${systemUrl}/user/paged`, params);
},
list(cardNo) {
var params={
"conditions": [
{
"fieldName": "cardNo",
"fieldValue": cardNo,
"conditionalType": "Equal"
}
],
"pageSize": 3
}
return Api.post(`${systemUrl}/user/list`, params);
},
get(params) {
return Api.get(`${systemUrl}/user/get`, params);
},
create(params) {
return Api.post(`${systemUrl}/user/create`, params);
},
update(params) {
return Api.post(`${systemUrl}/user/update`, params);
},
//在10010上更新用户信息//新增、修改、删除、修改密码
authAccount(params) {
return Api.post(`${authUrl}/api/services/app/useraccount/sync`, params);
},
//10010重置密码
authResetpassword(params) {
return Api.post(`${authUrl}/api/services/app/useraccount/resetpassword`, params);
},
//10010修改密码
authChangepassword(params) {
return Api.post(`${authUrl}/api/services/app/useraccount/changepassword`, params);
},
//在10020上更新用户AccountId信息
updateAccount(params) {
return Api.post(`${systemUrl}/user/updateaccountid`, params);
},
//删除:
delete(params) {
return Api.delete(`${systemUrl}/user/delete`, {
params: params
});
},
//重置密码
accountreset(params) {
return Api.post(`${systemUrl}/user/accountreset`, params);
},
}
\ No newline at end of file
<template>
<div class="addUser">
<Form ref="form" :model="entity" :label-width="90">
<Row>
<Col :span="12">
<FormItem :label="l('userName')" prop="userName">{{entity.userName}}</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('cardNo')" prop="cardNo">{{entity.cardNo}}</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('gender')" prop="gender">
<state code="User.base.gender" :value="entity.gender" type="text"></state>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('birthday')" prop="birthday">{{entity.birthday}}</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('degreeId')" prop="degreeId">
<state code="User.base.degree" :value="entity.degreeId" type="text"></state>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('departmentTitle')" prop="departmentTitle">{{entity.departmentTitle}}</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('status')" prop="status">
<state code="User.base.status" :value="entity.status" type="text"></state>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('phone')" prop="phone">{{entity.phone}}</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('email')" prop="email">{{entity.email}}</FormItem>
</Col>
<!-- <Col :span="12">
<FormItem :label="l('enableEquip')" prop="enableEquip">{{entity.enableEquip}}</FormItem>
</Col> -->
<Col :span="12">
<FormItem :label="l('positionId')" prop="positionId">
<state code="User.base.position" :value="entity.positionId" type="text"></state>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('titleId')" prop="titleId">
<state code="User.base.jobtitle" :value="entity.titleId" type="text"></state>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('licensedToWork')" prop="licensedToWork">
<state code="User.base.workLicense" :value="entity.licensedToWork" type="text"></state>
</FormItem>
</Col>
<Col :span="24">
<FormItem :label="l('remark')" prop="remark">{{entity.remark}}</FormItem>
</Col>
</Row>
</Form>
</div>
</template>
<script>
import Api from './api'
export default {
name: 'Add',
data() {
return {
entity: {}
}
},
props: {
eid: Number
},
methods: {
load(v) {
Api.get({ id: v }).then((r) => {
this.entity = r.result
this.$emit('on-load')
})
},
handleClose() {
this.$emit('on-close')
},
l(key) {
key = 'user' + '.' + key
return this.$t(key)
}
},
watch: {
eid(v) {
if (v != 0) {
this.load(v)
}
}
}
}
</script>
<style lang="less">
.addUser {
.ivu-radio-wrapper {
vertical-align: top;
}
}
</style>
<template>
<div class="addUser">
<Form ref="form" :model="entity" :rules="rules" :label-width="100">
<Row class="rowTitle100">
<Col :span="12">
<FormItem :label="l('userName')" prop="userName">
<Input v-model="entity.userName"></Input>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('cardNo')" prop="cardNo">
<span v-text="entity.cardNo"></span>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('status')" prop="status">
<Dictionary code="User.base.status" v-model="entity.status" type="radio"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('gender')" prop="gender">
<Dictionary code="User.base.gender" v-model="entity.gender" type="radio"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('birthday')" prop="birthday">
<DatePicker type="date" v-model="entity.birthday" style="width:100%" placeholder="请选择"></DatePicker>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('degreeId')" prop="degreeId">
<Dictionary code="User.base.degree" v-model="entity.degreeId"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('departmentTitle')" prop="departmentTitle">
<DepartmentSelect v-model="entity.departmentId" @on-change="setDepartmentTitle" />
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('phone')" prop="phone">
<Input v-model="entity.phone" />
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('email')">
<Input v-model="entity.email" />
</FormItem>
</Col>
<!-- <Col :span="12">
<FormItem :label="l('enableEquip')" prop="enableEquip">
<Input v-model="entity.enableEquip"></Input>
</FormItem>
</Col>-->
<Col :span="12">
<FormItem :label="l('positionId')" prop="positionId">
<Dictionary code="User.base.position" v-model="entity.positionId"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('titleId')" prop="titleId">
<Dictionary code="User.base.jobtitle" v-model="entity.titleId"></Dictionary>
</FormItem>
</Col>
<Col :span="12">
<FormItem :label="l('licensedToWork')" prop="licensedToWork">
<Dictionary code="User.base.workLicense" v-model="entity.licensedToWork"></Dictionary>
</FormItem>
</Col>
<Col :span="24">
<FormItem :label="l('remark')" prop="remark">
<Input v-model="entity.remark" type="textarea" :rows="3"></Input>
</FormItem>
</Col>
</Row>
<FormItem>
<Button type="primary" @click="handleSubmit" :disabled="disabled">保存</Button>
<Button @click="handleClose" class="ml20">取消</Button>
</FormItem>
</Form>
</div>
</template>
<script>
import Api from './api'
const valideTel = (rule, value, callback) => {
var re = /^1[3-9]{1}[0-9]{9}/
if (value === '' || value === null) {
callback(new Error('请输入手机号'))
} else if (!re.test(value)) {
callback(new Error('请输入正确手机号'))
} else {
callback()
}
}
export default {
name: 'Edit',
data() {
return {
disabled: false,
showDeptTree: false,
entity: {},
rules: {
userName: [{ required: true, message: '必填', trigger: 'blur' }],
departmentTitle: [{ required: true, message: '必选', trigger: 'blur' }],
//cardNo: [{ required: true, message: '必填', trigger: 'blur' }],
// birthday: [{ required: true, message: '必填', trigger: 'change' }],
// degreeId: [
// { required: true, message: '必填', trigger: 'blur', type: 'number' }
// ],
// email: [
// { required: true, message: '必填', trigger: 'blur', type: 'email' }
// ],
phone: [{ validator: valideTel, required: true, trigger: 'blur' }]
}
}
},
props: {
eid: Number
},
methods: {
load(v) {
Api.get({ id: v }).then((r) => {
this.entity = r.result
this.$emit('on-load')
})
},
handleSubmit() {
this.$refs.form.validate((v) => {
if (v) {
this.disabled = true
Api.update(this.entity)
.then((r) => {
this.disabled = false
if (r.success) {
this.$Message.success('保存成功')
//账户同步操作start
if (this.entity.accountId > 0) {
//账户已同步的情况下
let parms2 = {
accountId: this.entity.accountId,
userId: this.entity.id,
loginName: this.entity.phone, //用户电话
status: this.entity.status,
tanantCode: this.$store.state.userInfo.tanantCode //商户号
}
Api.authAccount(parms2).then((res) => {
//同步电话信息等
if (res.success) {
this.$Message.success('账户同步成功')
}
else
{
this.$Message.error('账户同步失败')
}
})
} else {
//账户新建后还未同步成功的情况下
let parms = {
userId: this.entity.id,
loginName: this.entity.phone, //用户电话
status: this.entity.status,
tanantCode: this.$store.state.userInfo.tanantCode //商户号
}
Api.authAccount(parms).then((res1) => {
if (res1.success) {
this.$Message.success('账户同步成功')
//修改用户表的accountId start
let parms1 = {
userId: parms.userId,
accountId: res1.result //账户同步成功后返回的accountId
}
Api.updateAccount(parms1).then((res2) => {
if (res2.success) {
this.$Message.success('操作成功')
} else {
this.$Message.error('操作失败')
}
})
//修改用户表的accountId end
}
})
}
//账户同步操作end
this.$emit('on-ok')
} else {
this.$Message.error('保存失败')
}
})
.catch((err) => {
this.disabled = false
this.$Message.error('保存失败')
console.warn(err)
})
}
})
},
handleClose() {
this.$emit('on-close')
},
l(key) {
key = 'user' + '.' + key
return this.$t(key)
},
setDepartmentTitle(v, item) {
if (item) {
this.entity.departmentTitle = item.name
}
},
getBirthday(value) {
this.entity.birthday = value
}
},
watch: {
eid(v) {
if (v != 0) {
this.load(v)
}
}
}
}
</script>
<style lang="less">
.addUser {
.ivu-radio-wrapper {
vertical-align: top;
}
}
</style>
<template>
<Layout class="full">
<Sider
hide-trigger
:style="{background: '#fff'}"
width="260"
class="menu"
style=" flex:0;border:none"
>
<div class="zh-tree" :style="{height:treeHeight+'px'}">
<h3 class="zh-title">部门结构</h3>
<div class="zh-box">
<Input search placeholder="请输入查询条件" v-model="treeInputSearch" />
<Tree :data="searchList" class="tree-content" @on-select-change="selectTreeNode"></Tree>
</div>
</div>
</Sider>
<Content class="content">
<DataGrid
:columns="columns"
ref="grid"
:action="action"
:conditions="easySearch"
placeholder="请输入姓名/员工编号"
:high="true"
:height="tdHeight"
>
<template slot="searchForm">
<Search />
</template>
<template slot="buttons">
<Button type="primary" @click="addModal=true">新增</Button>
</template>
</DataGrid>
<Modal v-model="addModal" title="新增" footer-hide width="800">
<Add @on-close="cancel" @on-ok="addOk" />
</Modal>
<Modal v-model="editModal" title="编辑" footer-hide width="800">
<Edit :eid="curId" @on-close="cancel" @on-ok="addOk" />
</Modal>
<Modal v-model="detailModal" title="详情" width="800">
<Detail :eid="curId" />
</Modal>
<Modal v-model="deletelModal" title="删除" @on-ok="removeOk" @on-cancel="cancel">
<p>确定删除?</p>
</Modal>
<!-- 重置密码 -->
<Modal
v-model="show7"
title="提示"
:mask-closable="false"
ok-text="确定"
cancel-text="取消"
@on-ok="reset"
>此操作将密码重置为初始密码, 是否继续?</Modal>
<!-- 授权 -->
<Modal
v-model="show3"
title="授权-当前用户"
:width="800"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="authOk"
@on-cancel="authCancle"
>
<div style="max-height:400px;overflow:auto">
<Form :model="authModel" :label-width="70">
<Row>
<Col span="24">
默认角色
<!-- <Input type="textarea" size="large" :rows="2" v-model="defaultRole" placeholder="暂无数据"/>
-->
<div style="width:750px;border:2px solid #E8EAEC;margin-top:10px">
<Row>
<CheckboxGroup v-model="authModel.default">
<Col
span="5"
offset="1"
v-for="(item,index) in authList1"
:key="index"
style="line-height:33px;font-size:14px;"
>
<Checkbox :label="item.id">{{item.name}}</Checkbox>
</Col>
</CheckboxGroup>
</Row>
</div>
</Col>
</Row>
<Row>
<Col span="24">
<div style="margin-top:10px;">
自定义角色
<div style="width:750px;border:2px solid #E8EAEC;margin-top:10px">
<Row>
<CheckboxGroup v-model="authModel.extra">
<Col
span="5"
offset="1"
v-for="(item,index) in authList"
:key="index"
style="line-height:33px;font-size:14px;"
>
<Checkbox :label="item.id">{{item.name}}</Checkbox>
</Col>
</CheckboxGroup>
</Row>
</div>
</div>
</Col>
</Row>
</Form>
</div>
</Modal>
<Modal v-model="syncAccountModal" title="同步账户" @on-ok="syncAccountOk" @on-cancel="cancel">
<p>确定同步账户?</p>
</Modal>
</Content>
</Layout>
</template>
<script>
import Api from "./api";
import Add from "./add";
import Edit from "./edit";
import Detail from "./detail";
import Search from "./search";
import service from "@/plugins/request";
import util from '@/libs/util';
export default {
name: "list",
components: {
Add,
Edit,
Detail,
Search
},
data() {
return {
action: Api.index,
easySearch: {
keys: {
op:
"userName,cardNo,national,phone,email,enableEquip,jobNo,remark,departmentTitle,roleTitles",
value: null,
default: true
},
departmentId: { op: "In", value: "" }
},
treeData: [],
tdHeight: "",
treeInputSearch: "",
treeHeight: "",
tableHeight: "",
show7: false, //重置密码
show3: false, //授权角色
authList: [],
authList1: [],
authModel: { default: [], extra: [] },
ids: [],
addModal: false,
editModal: false,
detailModal: false,
deletelModal: false,
syncAccountModal: false,
curId: 0,
columns: [
// {
// title: '序号',
// type: 'index',
// width: 80,
// align: 'center'
// },
{ key: "id", title: this.l("id"), hide: true, align: "left" },
{
key: "userName",
title: this.l("userName"),
align: "left",
easy: true,
high: true,
render: (h, params) => {
return h("div", { class: "action" }, [
h(
"op",
{
attrs: { oprate: "detail" },
on: { click: () => this.detail(params.row.id) }
},
params.row.userName
)
]);
}
},
// {
// key: 'cardTypeId',
// title: this.l('cardTypeId'),
// align: 'left',
// high: true,
// hide: true
// },
{
key: "cardNo",
title: this.l("cardNo"),
align: "left",
easy: true,
high: true
},
{
key: "gender",
title: this.l("gender"),
align: "center",
high: true,
code: "User.base.gender"
},
{
key: "birthday",
title: this.l("birthday"),
align: "center",
high: true,
hide: true,
type: "date"
},
{
key: "degreeId",
title: this.l("degreeId"),
align: "left",
high: true,
code: "User.base.degree",
hide: true
},
{
key: "status",
title: this.l("status"),
align: "center",
high: true,
code: "User.base.status"
},
{
key: "departmentTitle",
title: this.l("departmentTitle"),
align: "left",
easy: true,
high: true
},
{
key: "roleTitles",
title: this.l("roleTitles"),
align: "left",
easy: true,
high: true,
render: (h, params) => {
return h("div", { class: "action" }, [
h(
"op",
{
attrs: {
oprate: "detail",
class:
params.row.roleTitles == null ||
params.row.roleTitles == ""
? "empower"
: "detail"
},
on: { click: () => this.authorize(params.row.id) }
},
params.row.roleTitles == null || params.row.roleTitles == ""
? "授权"
: params.row.roleTitles
)
]);
}
},
{
key: "creatorUserId",
title: this.l("creatorUserId"),
hide: true,
align: "left"
},
{
key: "creationTime",
title: this.l("creationTime"),
hide: true,
align: "left"
},
{
key: "lastModifierUserId",
title: this.l("lastModifierUserId"),
hide: true,
align: "left"
},
{
key: "lastModificationTime",
title: this.l("lastModificationTime"),
hide: true,
align: "left"
},
{
key: "accountId",
title: this.l("accountId"),
hide: true,
align: "left"
},
// {
// key: 'userType',
// title: this.l('userType'),
// hide: true,
// align: 'left'
// },
{
key: "phone",
title: this.l("phone"),
align: "left",
easy: true,
high: true
},
{
key: "email",
title: this.l("email"),
align: "left",
easy: true,
high: true,
hide: true
},
{
key: "licensedToWork",
title: this.l("licensedToWork"),
align: "left",
hide: true
},
{
key: "positionId",
title: this.l("positionId"),
align: "left",
high: true,
code: "User.base.position",
hide: true
},
{
key: "titleId",
title: this.l("titleId"),
align: "left",
high: true,
code: "User.base.jobtitle",
hide: true
},
{
title: "操作",
key: "action",
width: 180,
align: "right",
render: (h, params) => {
return h("div", { class: "action" }, [
h(
"op",
{
attrs: {
oprate: "detail",
class: "empower"
},
on: { click: () => this.syncAccount(params.row) }
},
params.row.accountId == 0 ? "同步" : ""
),
h(
"op",
{
attrs: { oprate: "edit" },
on: { click: () => this.edit(params.row.id) }
},
"编辑"
),
h(
"op",
{
attrs: { oprate: "remove" },
on: { click: () => this.remove(params.row) }
},
"删除"
),
h(
"op",
{
attrs: {
oprate: "detail"
},
on: { click: () => this.openReset(params.row) }
},
"重置密码"
)
]);
}
}
],
selectRow: {} //删除时选中的行数据
};
},
created() {
this.treeHeight = window.innerHeight - 150
this.tdHeight = window.innerHeight - 240
},
mounted() {
window.onresize = () => {
///浏览器窗口大小变化
return (() => {
window.screenHeight = window.innerHeight
this.treeHeight = window.screenHeight - 150
this.tdHeight = window.screenHeight - 240
})();
}
this.initTree()
this.loadrole(0)
this.loadrole(1)
},
async fetch({ store, params }) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
methods: {
addOk() {
this.$refs.grid.load();
// this.$refs.grid.reload(this.easySearch)
this.addModal = false;
this.detailModal = false;
this.editModal = false;
this.curId = 0;
//this.$refs.grid.easySearch()
},
search() {
this.$refs.grid.reload(this.easySearch);
},
detail(id) {
this.detailModal = true;
this.curId = id;
},
edit(id) {
this.editModal = true;
this.curId = id;
},
remove(row) {
this.deletelModal = true;
this.curId = row.id;
this.selectRow = row;
},
removeOk() {
Api.delete({ id: this.curId }).then(r => {
if (r.success) {
this.$refs.grid.load();
this.deletelModal = false;
if (this.selectRow.accountId > 0) {
//删除成功后更新auth start
let parms = {
userId: this.curId,
accountId: this.selectRow.accountId,
tanantCode: util.cookies.get('tanantCode'),
isDeleted: true
};
Api.authAccount(parms).then(res => {
if (res.success) {
this.$Message.success("账户同步成功");
}
});
}
//删除成功后更新auth end
this.$Message.success("删除成功");
}
});
},
removeCancel() {
this.deletelModal = false;
},
cancel() {
this.curId = 0;
this.addModal = false;
this.detailModal = false;
this.editModal = false;
this.deletedlModal = false;
this.syncAccountModal = false;
},
l(key) {
let vkey = "user" + "." + key;
return this.$t(vkey) || key;
},
initTree() {
this.$http.department.getDepartmentTree(this.treeData);
},
selectTreeNode1(value) {
if (value != "") {
this.searchObj.departmentId = null;
this.searchObj.level_Desc = value[0].value;
this.mDatas.splice(0);
this.$http.sysUser.getSearchTable2(this.mDatas, this.searchObj);
}
},
selectTreeNode(value) {
if (value.length > 0) {
this.ids = [];
this.getAllIds(value);
if (this.ids.length > 0) {
this.easySearch.departmentId.value = this.ids;
} else {
this.easySearch.departmentId.value = [-1];
}
this.$refs.grid.easySearch();
}
},
getAllIds(trees) {
trees.forEach((data, index) => {
var that = this;
this.ids.push(data.value);
if (data.children.length > 0) {
this.getAllIds(data.children);
}
});
},
//重置密碼
openReset(row) {
this.show7 = true;
this.curId = row.id;
this.selectRow = row;
},
reset() {
let parms = {
userId: this.curId,
accountId: this.selectRow.accountId
};
Api.authResetpassword(parms).then(res => {
if (res.success) {
this.$Message.success("重置成功!");
} else {
this.$Message.error("重置失败!");
}
});
},
//授权角色
loadrole(type) {
var url = `${systemUrl}/MyRole/GetRolesAsync`;
var data = [];
service.get(`${url}`, { role_type: type } ).then(response => {
data = response.result.items;
if (type == 1) {
this.authList = data;
}
if (type == 0) {
this.authList1 = data;
}
});
},
authorize(id) {
//授权
this.authModel.default = [];
this.authModel.extra = [];
this.curId = id;
this.show3 = true;
var url = `${systemUrl}/MyUserRole/GetPaged`;
service.get(`${url}`, { userId: id }).then(response => {
var data = response.result.items;
var dt1 = data.filter(function(ite) {
return ite.role_type == 0;
});
var dt2 = data.filter(function(ite) {
return ite.role_type == 1;
});
dt1.forEach((item, i) => {
this.authModel.default.push(item.roleId);
});
dt2.forEach((item, i) => {
this.authModel.extra.push(item.roleId);
});
});
},
authOk() {
var url = `${systemUrl}/MyUserRole/CreateOrUpdate`;
service
.post(
`${url}`,
JSON.stringify({
myUserRole: {
userId: this.curId,
RoleIds: this.allChecked.join(",")
}
})
)
.then(response => {
if (response.success) {
this.$Message.success("保存成功");
this.authModel.extra = [];
this.authModel.default = [];
this.$refs.grid.easySearch();
}
})
.catch(error => {
this.$Message.error("保存失败");
});
},
authCancle() {},
//同步账户start
syncAccount(row) {
this.syncAccountModal = true;
this.selectRow = row;
},
syncAccountOk() {
let parms = {
userId: this.selectRow.id,
loginName: this.selectRow.phone,
status: this.selectRow.status,
tanantCode:util.cookies.get('tanantCode'),
};
if (this.selectRow.phone && this.selectRow.phone != "") {
Api.authAccount(parms).then(res => {
if (res.success) {
this.$Message.success("账户同步成功");
let parms1 = {
userId: parms.userId,
accountId: res.result
};
Api.updateAccount(parms1).then(res1 => {
if (res1.success) {
this.$Message.success("操作成功");
this.$refs.grid.easySearch();
} else {
this.$Message.error("同步失败");
}
});
}
});
} else {
this.$Message.error("请完善个人电话信息");
}
}
//同步账户end
},
computed: {
searchList() {
let nodeList = this.treeData;
var text = this.treeInputSearch;
var newNodeList = [];
function searchTree(nodeLists, value) {
for (let i = 0; i < nodeLists.length; i++) {
if (nodeLists[i].title.indexOf(value) != -1) {
newNodeList.push(nodeLists[i]);
} else if (nodeLists[i].children.length > 0) {
searchTree(nodeLists[i].children, value);
}
}
}
if (text != "") {
searchTree(nodeList, text);
} else {
return nodeList;
}
return newNodeList;
},
allChecked: function() {
return [...this.authModel.extra, ...this.authModel.default];
}
}
};
</script>
<style lang="less" scoped>
.full {
margin-top: 0;
.content {
margin-top: 10px;
}
}
</style>
\ No newline at end of file
<template>
<div class="addUser">
<Form ref="form" :model="condition" :label-width="100">
<Row class="rowTitle100">
<Col :span="12" v-if="condition.id.show">
<FormItem :label="l('id')" prop="id">
<Input v-model="condition.id.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.userName.show">
<FormItem :label="l('userName')" prop="userName">
<Input v-model="condition.userName.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.cardTypeId.show">
<FormItem :label="l('cardTypeId')" prop="cardTypeId">
<Input v-model="condition.cardTypeId.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.cardNo.show">
<FormItem :label="l('cardNo')" prop="cardNo">
<Input v-model="condition.cardNo.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.status.show">
<FormItem :label="l('status')" prop="status">
<Dictionary code="User.base.status" v-model="condition.status.value" type="radio"></Dictionary>
</FormItem>
</Col>
<Col :span="12" v-if="condition.gender.show">
<FormItem :label="l('gender')" prop="gender">
<Dictionary code="User.base.gender" v-model="condition.gender.value" type="radio"></Dictionary>
</FormItem>
</Col>
<Col :span="12" v-if="condition.birthday.show">
<FormItem :label="l('birthday')" prop="birthday">
<DTSearch v-model="condition.birthday.value" @on-change="setTime" :showFast="false" type="date"></DTSearch>
</FormItem>
</Col>
<Col :span="12" v-if="condition.departmentTitle.show">
<FormItem :label="l('departmentTitle')" prop="departmentTitle">
<DepartmentSelect
v-model="condition.departmentId.value"
@on-change="setDepartmentTitle"
/>
</FormItem>
</Col>
<Col :span="12" v-if="condition.national.show">
<FormItem :label="l('national')" prop="national">
<Input v-model="condition.national.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.creatorUserId.show">
<FormItem :label="l('creatorUserId')" prop="creatorUserId">
<Input v-model="condition.creatorUserId.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.creationTime.show">
<FormItem :label="l('creationTime')" prop="creationTime">
<DatePicker type="daterange" v-model="condition.creationTime.value"></DatePicker>
</FormItem>
</Col>
<Col :span="12" v-if="condition.lastModifierUserId.show">
<FormItem :label="l('lastModifierUserId')" prop="lastModifierUserId">
<Input v-model="condition.lastModifierUserId.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.lastModificationTime.show">
<FormItem :label="l('lastModificationTime')" prop="lastModificationTime">
<DatePicker type="daterange" v-model="condition.lastModificationTime.value"></DatePicker>
</FormItem>
</Col>
<Col :span="12" v-if="condition.accountId.show">
<FormItem :label="l('accountId')" prop="accountId">
<Input v-model="condition.accountId.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.isDeleted.show">
<FormItem :label="l('isDeleted')" prop="isDeleted">
<Dictionary v-model="condition.isDeleted.value"></Dictionary>
</FormItem>
</Col>
<Col :span="12" v-if="condition.userType.show">
<FormItem :label="l('userType')" prop="userType">
<Input v-model="condition.userType.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.phone.show">
<FormItem :label="l('phone')" prop="phone">
<Input v-model="condition.phone.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.email.show">
<FormItem :label="l('email')" prop="email">
<Input v-model="condition.email.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.degreeId.show">
<FormItem :label="l('degreeId')" prop="degreeId">
<Dictionary code="User.base.degree" v-model="condition.degreeId.value"></Dictionary>
</FormItem>
</Col>
<Col :span="12" v-if="condition.avatarUrl.show">
<FormItem :label="l('avatarUrl')" prop="avatarUrl">
<Input v-model="condition.avatarUrl.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.enableEquip.show">
<FormItem :label="l('enableEquip')" prop="enableEquip">
<Input v-model="condition.enableEquip.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.positionId.show">
<FormItem :label="l('positionId')" prop="positionId">
<Dictionary code="User.base.position" v-model="condition.positionId.value"></Dictionary>
</FormItem>
</Col>
<Col :span="12" v-if="condition.titleId.show">
<FormItem :label="l('titleId')" prop="titleId">
<Dictionary code="User.base.jobtitle" v-model="condition.titleId.value"></Dictionary>
</FormItem>
</Col>
<Col :span="12" v-if="condition.licensedToWork.show">
<FormItem :label="l('licensedToWork')" prop="licensedToWork">
<Dictionary code="User.base.workLicense" v-model="condition.licensedToWork.value"></Dictionary>
</FormItem>
</Col>
<Col :span="12" v-if="condition.jobNo.show">
<FormItem :label="l('jobNo')" prop="jobNo">
<Input v-model="condition.jobNo.value"></Input>
</FormItem>
</Col>
<Col :span="24" v-if="condition.remark.show">
<FormItem :label="l('remark')" prop="remark">
<Input v-model="condition.remark.value"></Input>
</FormItem>
</Col>
<Col :span="12" v-if="condition.roleTitles.show">
<FormItem :label="l('roleTitles')" prop="roleTitles">
<Input v-model="condition.roleTitles.value"></Input>
</FormItem>
</Col>
</Row>
</Form>
</div>
</template>
<script>
import Api from './api'
export default {
name: 'Search',
data() {
return {
showDeptTree: false,
values: ['2001-01-01', '2015-12-05'],
condition: {
id: { op: 'Equal', value: null, show: false },
userName: { op: 'Equal', value: null, show: true },
cardTypeId: { op: 'Equal', value: null, show: false },
cardNo: { op: 'Equal', value: null, show: true },
gender: { op: 'Equal', value: null, show: true },
birthday: { op: 'Range', value: null, show: true },
degreeId: { op: 'Equal', value: null, show: true },
departmentId: { op: 'Equal', value: null, show: false },
national: { op: 'Equal', value: null, show: false },
status: { op: 'Equal', value: null, show: true },
creatorUserId: { op: 'Equal', value: null, show: false },
creationTime: { op: 'Range', value: null, show: false },
lastModifierUserId: { op: 'Equal', value: null, show: false },
lastModificationTime: { op: 'Range', value: null, show: false },
accountId: { op: 'Equal', value: null, show: false },
isDeleted: { op: 'Equal', value: null, show: false },
userType: { op: 'Equal', value: null, show: false },
phone: { op: 'Equal', value: null, show: true },
email: { op: 'Equal', value: null, show: true },
avatarUrl: { op: 'Equal', value: null, show: false },
enableEquip: { op: 'Equal', value: null, show: false },
licensedToWork: { op: 'Equal', value: null, show: true },
positionId: { op: 'Equal', value: null, show: true },
titleId: { op: 'Equal', value: null, show: true },
jobNo: { op: 'Equal', value: null, show: false },
remark: { op: 'Equal', value: null, show: false },
departmentTitle: { op: 'Equal', value: null, show: true },
departmentId: { op: 'Equal', value: null, show: false },
roleTitles: { op: 'Equal', value: null, show: true }
}
}
},
methods: {
handleClose() {
this.$emit('on-close')
},
l(key) {
key = 'user' + '.' + key
return this.$t(key)
},
setDepartmentTitle(v, item) {
this.condition.departmentTitle.value = item.name
},
setTime(v) {
this.condition.birthday.value = v
},
},
watch: {}
}
</script>
<style lang="less">
.addUser {
.ivu-radio-wrapper {
vertical-align: top;
}
}
</style>
<template>
<div class="warm-content">
<!-- 左侧树 -->
<div class="zh-tree" :style="{height:treeHeight+'px'}">
<h3 class="zh-title">组织架构</h3>
<div class="zh-box">
<Input search placeholder="请输入查询条件" v-model="treeInputSearch" />
<Tree :data="searchList" class="tree-content" @on-select-change="selectTreeNode"></Tree>
</div>
</div>
<!-- 右侧内容 -->
<div class="content-right">
<div>
<!-- 搜索+按钮 -->
<div class="mb5">
<div style="display:inline-block;">
<Input
search
enter-button
v-model="searchObj.terms"
style="width:300px;"
:clearable="false"
placeholder="姓名、工号"
@on-search="tableSearch"
>
<!-- <Button icon="ios-search-outline" slot="append" style="width: 40px;background-color:#249E91;color:#FFF;" @click='tableSearch'></Button> -->
</Input>
</div>
<Button slot="preappend" @click="openAddModal" type="primary" style="float:right;">新增用户</Button>
</div>
<!-- 表格 -->
<div class="margin-top-10">
<Table
stripe
ref="table"
:height="tbHeight"
class="tableCommon"
border
:columns="mColumn"
:data="mDatas"
@on-row-click="(row,index)=>clickRow(row,index)"
></Table>
<Page
:total="searchObj.total"
:current="searchObj.current"
:page-size="searchObj.pageSize"
show-sizer
show-elevator
:page-size-opts="showPagesize"
@on-change="pageChange"
@on-page-size-change="pagesizeChange"
/>
</div>
</div>
</div>
<!-- 添加、编辑 -->
<Modal
v-model="show1"
:title="modalTitle"
:width="800"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="saveOk"
@on-cancel="saveCancel"
:loading="loading"
>
<div class="addModal">
<Form :model="openModel" :label-width="80" inline>
<Row>
<Col span="12">
<FormItem label="姓名" class="ivu-form-item-required">
<Input
style="width:240px;"
size="large"
v-model.trim="openModel.name"
placeholder="请输入..."
/>
</FormItem>
</Col>
<Col span="12">
<FormItem label="性别" class="ivu-form-item-required">
<Select style="width:240px;" v-model="openModel.gender" placeholder="请选择...">
<Option
v-for="(item,index) in genderList"
:key="index"
:value="item.value"
>{{item.label}}</Option>
</Select>
</FormItem>
</Col>
</Row>
<Row>
<Col span="12">
<FormItem label="出生年月" class="ivu-form-item-required">
<DatePicker
type="date"
style="width:240px;"
v-model="openModel.birthday"
placeholder="请选择"
></DatePicker>
</FormItem>
</Col>
<Col span="12">
<FormItem label="员工编号" class="ivu-form-item-required">
<Input
style="width:240px;"
size="large"
v-model.trim="openModel.employeeNo"
placeholder="请输入..."
/>
</FormItem>
</Col>
</Row>
<Row>
<Col span="12">
<FormItem label="职称">
<Select style="width:240px;" v-model="openModel.title" placeholder="请选择...">
<Option
v-for="(item,index) in titleList"
:key="index"
:value="item.value"
>{{item.label}}</Option>
</Select>
</FormItem>
</Col>
<Col span="12">
<FormItem label="学历" class="ivu-form-item-required">
<Select style="width:240px;" v-model="openModel.degree" placeholder="请选择...">
<Option
v-for="(item,index) in degreeList"
:key="index"
:value="item.value"
>{{item.label}}</Option>
</Select>
</FormItem>
</Col>
</Row>
<Row>
<Col span="12">
<FormItem label="上岗证">
<Select style="width:240px;" v-model="openModel.workLicense" placeholder="请选择...">
<Option
v-for="(item,index) in workLicenseList"
:key="index"
:value="item.value"
>{{item.label}}</Option>
</Select>
</FormItem>
</Col>
<Col span="12">
<FormItem label="邮箱">
<Input
style="width:240px;"
size="large"
v-model.trim="openModel.email"
placeholder="请输入..."
/>
</FormItem>
</Col>
</Row>
<Row>
<Col span="12">
<FormItem label="电话" class="ivu-form-item-required">
<Input
style="width:240px;"
size="large"
v-model.trim="openModel.phone"
placeholder="请输入..."
/>
</FormItem>
</Col>
<Col span="12">
<FormItem label="所属部门">
<Input
v-model="openModel.department"
readonly
placeholder="请选择..."
style="width:240px"
>
<Button slot="append" @click="selectDepart">选择</Button>
</Input>
</FormItem>
</Col>
</Row>
<Row>
<Col span="12">
<FormItem label="职位名称">
<Input
v-model="openModel.jobName"
readonly
placeholder="请选择..."
style="width:240px"
>
<Button slot="append" @click="selectOrgan">选择</Button>
</Input>
</FormItem>
</Col>
<Col span="12">
<FormItem label="状态">
<Select style="width:240px;" v-model="openModel.status" placeholder="请选择...">
<Option
v-for="(item,index) in statusList"
:key="index"
:value="item.value"
>{{item.label}}</Option>
</Select>
</FormItem>
</Col>
</Row>
<Row>
<FormItem label="备注">
<Input
type="textarea"
:rows="3"
style="width:620px;"
size="large"
v-model="openModel.remark"
placeholder
/>
</FormItem>
</Row>
</Form>
</div>
</Modal>
<!-- 重置密码 -->
<Modal
v-model="show7"
title="提示"
:mask-closable="false"
ok-text="确定"
cancel-text="取消"
@on-ok="reset"
>此操作将密码重置为初始密码, 是否继续?</Modal>
<!-- 授权 -->
<Modal
v-model="show3"
:title="'授权-当前用户:'+selectedRow.name"
:width="800"
:mask-closable="false"
ok-text="保存"
cancel-text="取消"
@on-ok="authOk"
@on-cancel="authCancle"
>
<div style="max-height:400px;overflow:auto">
<Form :model="authModel" :label-width="70">
<Row>
<Col span="24">
默认角色
<!-- <Input type="textarea" size="large" :rows="2" v-model="defaultRole" placeholder="暂无数据"/>
-->
<div style="width:750px;border:2px solid #E8EAEC;margin-top:10px">
<Row>
<CheckboxGroup v-model="authModel.default">
<Col
span="5"
offset="1"
v-for="(item,index) in authList1"
:key="index"
style="line-height:33px;font-size:14px;"
>
<Checkbox :label="item.id">{{item.name}}</Checkbox>
</Col>
</CheckboxGroup>
</Row>
</div>
</Col>
</Row>
<Row>
<Col span="24">
<div style="margin-top:10px;">
自定义角色
<div style="width:750px;border:2px solid #E8EAEC;margin-top:10px">
<Row>
<CheckboxGroup v-model="authModel.extra">
<Col
span="5"
offset="1"
v-for="(item,index) in authList"
:key="index"
style="line-height:33px;font-size:14px;"
>
<Checkbox :label="item.id">{{item.name}}</Checkbox>
</Col>
</CheckboxGroup>
</Row>
</div>
</div>
</Col>
</Row>
</Form>
</div>
</Modal>
<!-- 人员详情 -->
<Modal v-model="show6" title="人员详情" :width="800" :footer-hide="true">
<Tabs value="basic" style="height:440px;">
<TabPane label="基本信息" name="basic">
<div style="padding:1px;">
<Row>
<Col span="4" class="cellInfoTitle">姓名</Col>
<Col span="8" class="cellInfoContent">{{openModel.name}}</Col>
<Col span="4" class="cellInfoTitle">学历</Col>
<Col span="8" class="cellInfoContent">{{getDicLabel(degreeList,openModel.degree)}}</Col>
</Row>
<Row>
<Col span="4" class="cellInfoTitle">职称</Col>
<Col span="8" class="cellInfoContent">{{openModel.jobName}}</Col>
<Col span="4" class="cellInfoTitle">员工编号</Col>
<Col span="8" class="cellInfoContent">{{openModel.employeeNo}}</Col>
</Row>
<Row>
<Col span="4" class="cellInfoTitle">电话</Col>
<Col span="8" class="cellInfoContent">{{openModel.phone}}</Col>
<Col span="4" class="cellInfoTitle">邮箱</Col>
<Col span="8" class="cellInfoContent">{{openModel.email}}</Col>
</Row>
<Row>
<Col span="4" class="cellInfoTitle">性别</Col>
<Col span="8" class="cellInfoContent">{{getDicLabel(genderList,openModel.gender)}}</Col>
<Col span="4" class="cellInfoTitle">出生年月</Col>
<Col span="8" class="cellInfoContent">{{openModel.birthday}}</Col>
</Row>
<Row>
<Col span="4" class="cellInfoTitle">上岗证</Col>
<Col
span="8"
class="cellInfoContent"
>{{getDicLabel(workLicenseList,openModel.workLicense)}}</Col>
<Col span="4" class="cellInfoTitle">所属部门</Col>
<Col span="8" class="cellInfoContent">{{openModel.department}}</Col>
</Row>
<Row>
<Col span="4" class="cellInfoTitle">职位名称</Col>
<Col span="8" class="cellInfoContent">{{openModel.jobName}}</Col>
<Col span="4" class="cellInfoTitle">状态</Col>
<Col span="8" class="cellInfoContent">{{getDicLabel(statusList,openModel.status)}}</Col>
</Row>
<Row>
<Col span="4" class="cellInfoTitle">备注</Col>
<Col span="20" class="cellInfoContent1">{{openModel.remark}}</Col>
</Row>
</div>
</TabPane>
</Tabs>
</Modal>
<Department
:show.sync="showDeptTree"
:value.sync="openModel.depart_Id"
:text.sync="openModel.department"
:isAdd="false"
/>
<OrganizType
:show.sync="showOrganTree"
:value.sync="openModel.depart_Id"
:text.sync="openModel.jobName"
:isAdd="false"
/>
</div>
</template>
<script>
import Department from '@/components/modalTree/department.vue'
import OrganizType from '@/components/modalTree/organizType.vue'
import service from '@/plugins/request'
export default {
components: { Department, OrganizType },
data() {
return {
treeData: [],
treeHeight: '',
treeInputSearch: '',
show1: false,
show3: false,
show5: false,
show6: false,
show7: false,
showDeptTree: false,
showOrganTree: false,
isAddOperate: true, //标题是否切换为新增(注:编辑的标题动态属性)
lockReason: '',
emptyModel: {
id: 0,
name: '',
gender: 0,
birthday: '',
degree: 0,
titile: 0,
workLicense: 0,
employeeNo: '',
jobName: '',
phone: '',
email: '',
depart_Id: 0,
department: '',
status: 0,
remark: ''
},
authList: [],
authList1: [],
authModel: { default: [], extra: [] },
genderList: [{ value: 1, label: '男' }, { value: 2, label: '女' }],
titleList: [{ value: 1, label: '职称1' }, { value: 2, label: '职称2' }],
workLicenseList: [
{ value: 1, label: '上岗证1' },
{ value: 2, label: '上岗证2' }
],
degreeList: [
{ value: 1, label: '高中' },
{ value: 2, label: '大专' },
{ value: 3, label: '本科' },
{ value: 4, label: '硕士' },
{ value: 5, label: '博士' }
],
statusList: [{ value: 1, label: '启用' }, { value: 2, label: '禁用' }],
selectedRow: {},
tbHeight: 460,
mColumn: [
{
title: '序号',
type: 'index',
width: 80,
align: 'center',
fixed: 'left'
},
{
title: '姓名',
key: 'name',
width: 130,
fixed: 'left',
render: (h, params) => {
return h(
'a',
{
props: { href: 'javascript:void(0);' },
on: { click: () => this.openDetails(params.row.id) }
},
params.row.name
)
}
},
{
title: '姓别',
key: 'gender',
width: 80,
align: 'center',
render: (h, params) => {
let value = params.row.gender
let renderVal = this.getDicLabel(this.genderList, value)
return h('span', {}, renderVal)
}
},
{ title: '出生年月', key: 'birthday', width: 120, align: 'center' },
{
title: '学历',
key: 'degree',
width: 80,
align: 'center',
render: (h, params) => {
let value = params.row.degree
let renderVal = this.getDicLabel(this.degreeList, value)
return h('span', {}, renderVal)
}
},
{
title: '职称',
key: 'title',
width: 120,
align: 'center',
render: (h, params) => {
let value = params.row.title
let renderVal = this.getDicLabel(this.titleList, value)
return h('span', {}, renderVal)
}
},
{
title: '上岗证',
key: 'workLicense',
width: 120,
render: (h, params) => {
let value = params.row.workLicense
let renderVal = this.getDicLabel(this.workLicenseList, value)
return h('span', {}, renderVal)
}
},
{ title: '可操控设备', key: 'equipment', width: 120 },
{ title: '邮箱', key: 'email', width: 160 },
{ title: '电话', key: 'phone', width: 120 },
{ title: '所属部门', key: 'department', width: 120 },
{ title: '职位名称', key: 'jobName', width: 120 },
{ title: '角色', key: 'role', width: 80 },
{ title: '用户账号', key: 'account', width: 120 },
{ title: '员工编号', key: 'employeeNo', width: 120 },
{
title: '修改时间',
key: 'modifyTime',
width: 180,
align: 'center',
render: (h, params) => {
let value = params.row.modifyTime
let renderVal = ''
if (value.length >= 19) {
renderVal = value.substring(0, 19)
}
return h('span', {}, renderVal)
}
},
{
title: '状态',
key: 'status',
width: 80,
align: 'center',
render: (h, params) => {
let value = params.row.status
let renderVal = this.getDicLabel(this.statusList, value)
return h('span', {}, renderVal)
}
},
{
title: '备注',
key: 'remark',
width: 80,
tooltip: true
},
{
title: '操作',
key: 'action',
width: 250,
align: 'center',
render: (h, params) => {
return h('div', { class: 'action' }, [
h(
'op',
{
attrs:{
oprate:'detail',
class:'empower'
} ,
on: { click: () => this.authorize(params.row.id) }
},
'授权'
),
h(
'op',
{
attrs:{
oprate:'detail',
class:'edit'
} ,
on: { click: () => this.openEditModal() }
},
'编辑'
),
h(
'op',
{
attrs:{
oprate:'delete',
class:'remove'
},
on: {
click: () => { this.del() }
}
},
'删除'
),
h(
'op',
{
attrs:{
oprate:'detail',
} ,
on: { click: () => (this.show7 = true) }
},
'重置密码'
)
])
}
}
],
mDatas: [],
//分页栏:
showPagesize: [10, 20, 40],
//联合搜索:
searchObj: {
terms: '', //搜索条件
departmentId: null,
level_Desc:'',
//分页:
current: 1,
pageSize: 10,
total: 0
},
loading: true
}
},
created() {
this.openModel = this.emptyModel
this.treeHeight = window.innerHeight - 100
this.tbHeight = window.innerHeight - 220
},
mounted() {
this.initTree()
this.initTable()
this.loadrole(0)
this.loadrole(1)
// this.tbHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 60-66;
window.onresize = () => {
///浏览器窗口大小变化
return (() => {
window.screenHeight = window.innerHeight
this.treeHeight = window.screenHeight - 100
this.tbHeight = window.innerHeight - 220
})()
}
},
methods: {
//得到字符串长度,中文2,英文1
formatToLens(strs) {
var len = 0
for (var i = 0; i < strs.length; i++) {
if (strs.charCodeAt(i) > 127 || strs.charCodeAt(i) == 94) {
len += 2
} else {
len++
}
}
return len
},
loadrole(type) {
var url = `${systemUrl}/MyRole/GetRolesAsync`
var data = []
service
.get(`${url}`, { role_type: type })
.then((response) => {
data = response.result.items
if (type == 1) {
this.authList = data
}
if (type == 0) {
this.authList1 = data
}
})
},
initTree() {
this.$http.department.getDepartmentTree(this.treeData)
},
initTable() {
this.mDatas.splice(0)
//this.$http.sysUser.getTable(this.mDatas);
this.searchObj.departmentId = null
this.searchObj.level_Desc=''
this.$http.sysUser.getSearchTable2(this.mDatas, this.searchObj)
},
tableSearch() {
if (!this.terms) {
this.initTable()
} else {
this.mDatas.splice(0)
this.$http.sysUser.getSearchTable(this.mDatas, this.searchObj)
}
},
clickRow(row, index) {
this.selectedRow = row
},
openAddModal() {
this.isAddOperate = true
this.clearModel()
this.show1 = true
},
openEditModal() {
this.isAddOperate = false
this.clearModel()
this.show1 = true
},
openDetails() {
this.show6 = true
},
openLock() {
this.lockReason = ''
this.show5 = true
},
loaduserrole() {},
authorize(id) {
//授权
this.authModel.default = []
this.authModel.extra = []
this.show3 = true
var url = `${systemUrl}/MyUserRole/GetPaged`
service.get(`${url}`, { userId: id } ).then((response) => {
var data = response.result.items
var dt1 = data.filter(function(ite) {
return ite.role_type == 0
})
var dt2 = data.filter(function(ite) {
return ite.role_type == 1
})
dt1.forEach((item, i) => {
this.authModel.default.push(item.roleId)
})
dt2.forEach((item, i) => {
this.authModel.extra.push(item.roleId)
})
})
},
//测试阻止弹窗关闭:
messageWarningFn(text) {
this.$Message.warning(text)
setTimeout(() => {
this.loading = false
this.$nextTick(() => {
this.loading = true
})
}, 500)
},
saveOk() {
//新增+编辑的校验:
if (!this.validateOpenModel()) {
return false
}
//分开的保存逻辑:
if (this.isAddOperate) {
this.add()
} else {
this.update()
}
this.show1 = false
this.clearModel()
},
saveCancel() {},
validateOpenModel() {
if (!this.openModel.name) {
//this.$Message.info('名称不能为空!')
this.messageWarningFn('名称不能为空!')
return false
}
if (this.openModel.gender==0) {
//this.$Message.info('名称不能为空!')
this.messageWarningFn('性别不能为空!')
return false
}
if (!this.openModel.birthday) {
//this.$Message.info('名称不能为空!')
this.messageWarningFn('出生年月不能为空!')
return false
}
if (this.openModel.degree == 0) {
//this.$Message.info('所属部门不能为空!')
this.messageWarningFn('学历不能为空!')
return false
}
if (!this.openModel.employeeNo) {
//this.$Message.info('员工编号不能为空!')
this.messageWarningFn('员工编号不能为空!')
return false
}
if (!this.openModel.phone) {
//this.$Message.info('电话不能为空!')
this.messageWarningFn('电话不能为空!')
return false
}
return true
},
authOk() {
var url = `${systemUrl}/MyUserRole/CreateOrUpdate`
service
.post(
`${url}`,
JSON.stringify({
myUserRole: {
userId: this.selectedRow.id,
RoleIds: this.allChecked.join(',')
}
})
)
.then((response) => {
if (response.success) {
this.$Message.success('保存成功')
this.authModel.extra = []
this.authModel.default = []
}
})
.catch((error) => {
this.$Message.error('保存失败')
})
},
authCancle() {},
selectDepart() {
this.showDeptTree = true
},
selectOrgan() {
this.showOrganTree = true
},
clearModel() {
this.openModel.id = ''
this.openModel.name = ''
this.openModel.gender = 0
this.openModel.birthday = ''
this.openModel.degree = 0
this.openModel.title = 0
this.openModel.workLicense = 0
this.openModel.employeeNo = ''
this.openModel.jobName = ''
this.openModel.phone = ''
this.openModel.email = ''
this.openModel.depart_Id = 0
this.openModel.department = ''
this.openModel.status = 0
this.openModel.remark = ''
},
add() {
this.$http.sysUser.insert(this.openModel).then((res) => {
if (res.result) {
//刷新列表:
this.initTable()
this.$Message.info('新增成功!')
} else {
this.$Message.info('新增失败!')
}
})
},
update() {
this.$http.sysUser.update(this.openModel).then((res) => {
if (res.result) {
//刷新列表:
this.initTable()
this.$Message.info('编辑成功!')
} else {
this.$Message.info('编辑失败!')
}
})
},
del() {
this.$http.sysUser.del(this.selectedRow.id).then((res) => {
if (res.result == 1) {
//刷新列表:
this.initTable()
this.$Message.info('删除成功!')
} else if (res.result == 2) {
this.$Message.info('删除失败,找不到数据!')
} else {
this.$Message.info('删除失败!')
}
})
},
reset() {
this.$http.sysUser.reset(this.selectedRow.id).then((res) => {
if (res.result == 1) {
this.$Message.info('重置成功!')
} else {
this.$Message.info('重置失败!')
}
})
},
//分页:
pageChange(val) {
this.searchObj.current = val
this.initTable()
},
pagesizeChange(val) {
this.searchObj.pageSize = val
this.initTable()
},
//公用:查字典项:
getDicLabel(dic, value) {
let renderVal = ''
if (value > 0 && value <= dic.length) {
renderVal = dic[value - 1].label
}
return renderVal
},
selectTreeNode(value) {
if (value != "") {
this.searchObj.departmentId = null
this.searchObj.level_Desc=value[0].value
this.mDatas.splice(0)
this.$http.sysUser.getSearchTable2(this.mDatas, this.searchObj)
}
}
},
computed: {
openModel: {
get() {
let rrr = {}
;(rrr.id = this.selectedRow.id),
(rrr.name = this.selectedRow.name),
(rrr.gender = this.selectedRow.gender),
(rrr.birthday = this.selectedRow.birthday),
(rrr.degree = this.selectedRow.degree),
(rrr.title = this.selectedRow.title),
//rrr.jobNumber=this.selectedRow.jobNumber,
(rrr.workLicense = this.selectedRow.workLicense),
(rrr.email = this.selectedRow.email),
(rrr.phone = this.selectedRow.phone),
(rrr.depart_Id = this.selectedRow.depart_Id),
(rrr.department = this.selectedRow.department),
(rrr.jobName = this.selectedRow.jobName),
(rrr.employeeNo = this.selectedRow.employeeNo),
(rrr.job_Id = this.selectedRow.job_Id),
(rrr.jobName = this.selectedRow.jobName),
(rrr.status = this.selectedRow.status),
(rrr.remark = this.selectedRow.remark)
return rrr
},
set() {}
},
modalTitle: {
get() {
if (this.isAddOperate) return '新增员工'
return '编辑员工:' + this.selectedRow.name
},
set(value) {}
},
defaultRole: {
get() {
return this.selectedRow.role
},
set(value) {}
},
allChecked: function() {
return [...this.authModel.extra, ...this.authModel.default]
},
searchList() {
let nodeList = this.treeData
var text = this.treeInputSearch
var newNodeList = []
function searchTree(nodeLists, value) {
for (let i = 0; i < nodeLists.length; i++) {
if (nodeLists[i].title.indexOf(value) != -1) {
newNodeList.push(nodeLists[i])
} else if (nodeLists[i].children.length > 0) {
searchTree(nodeLists[i].children, value)
}
}
}
if (text != '') {
searchTree(nodeList, text)
} else {
return nodeList
}
return newNodeList
}
}
}
</script>
\ No newline at end of file
<template>
<div>
<Card style="width:350px;float:left">
<p slot="title">个人头像</p>
<div style="height:415px;">
<p style="text-align:center;padding-top:100px;">
<Avatar :src="avatorPath" size="150" />
</p>
<p style="text-align:center;padding:10px;">
<Button @click="openModalAvatar">修改头像</Button>
</p>
</div>
</Card>
<Card class="user_info_right">
<Tabs :animated="false">
<TabPane label="基本信息">
<div class="tabContent">
<Form :label-width="140">
<FormItem label="用户帐号:" class="ivu-form-itemNo">{{userInfo.cardNo}}</FormItem>
<FormItem label="用户姓名:" class="ivu-form-itemNo">{{userInfo.userName}}</FormItem>
<FormItem label="性别:" class="ivu-form-itemNo">
<state code="User.base.gender" :value="userInfo.gender" type="text"></state>
</FormItem>
<FormItem label="联系电话:" class="ivu-form-itemNo">{{userInfo.phone}}</FormItem>
<FormItem label="电子邮箱:" class="ivu-form-itemNo">{{userInfo.email}}</FormItem>
<FormItem label="学历:" class="ivu-form-itemNo">
<state code="User.base.degree" :value="userInfo.degreeId" type="text"></state>
</FormItem>
<FormItem label="职位名称:" class="ivu-form-itemNo">
<state code="User.base.position" :value="userInfo.positionId" type="text"></state>
{{userInfo.titleId}}
</FormItem>
<FormItem label="角色:" class="ivu-form-itemNo">{{userInfo.roleTitles}}</FormItem>
<FormItem label="所属部门:" class="ivu-form-itemNo">{{userInfo.departmentTitle}}</FormItem>
</Form>
</div>
</TabPane>
<TabPane label="修改密码">
<div class="tabContent">
<Form :model="pwdModel" :label-width="140">
<Row>
<FormItem label="原密码">
<Input
type="password"
style="width:240px;"
size="large"
v-model="pwdModel.oldPwd"
placeholder="请输入..."
/>
</FormItem>
<FormItem label="新密码">
<Input
type="password"
style="width:240px;"
size="large"
v-model="pwdModel.newPwd"
placeholder="请输入..."
/>
</FormItem>
<FormItem label="确认密码">
<Input
type="password"
style="width:240px;"
size="large"
v-model="pwdModel.confirmPwd"
placeholder="请输入..."
/>
</FormItem>
</Row>
<Row>
<FormItem label=" ">
<Button type="primary" @click="pwdOk">保存</Button>
</FormItem>
</Row>
</Form>
</div>
</TabPane>
</Tabs>
</Card>
<Modal v-model="modalAvatar" title="修改头像" :width="460">
<Form :model="imageModel">
<div class="imgBg">
<img :src="avatorPath" />
</div>
<inputFiles v-model="imgName" :parms="parms" />
</Form>
<div slot="footer">
<Button @click="cancelAvatar">取消</Button>
<Button type="primary" @click="upAvatar">确定</Button>
</div>
</Modal>
</div>
</template>
<script>
import Api from "../user/api";
import avatar from "@/assets/images/avatar.png";
import inputFiles from "@/components/page/inputFile.vue";
export default {
components: {
inputFiles
},
data() {
return {
parms: "app=user&eid=23&name=avatarUrl",
cardWidth: "600px",
userId: 0,
pwdModel: {
id: null,
oldPwd: "",
newPwd: "",
confirmPwd: ""
},
modalAvatar: false,
mid: "",
userInfo: {
id: 0,
cardNo: "",
userName: "",
gender: 0,
birthday: "",
degreeId: 0,
titile: 0,
workLicense: 0,
employeeNo: "",
jobName: "",
phone: "",
email: "",
departmentId: 0,
departmentTitle: "",
status: 0,
remark: "",
avatarUrl: ""
},
userInfos:{},
imageModel: {
id: null,
avatar_Url: "",
name: ""
},
imgName: "",
avatorPath: "",
oldImgName: ""
};
},
created() {
this.userId = this.$store.state.userInfo.userId;
this.cardWidth = window.innerWidth - 620 + "px";
},
async fetch({ store, params }) {
await store.dispatch("loadDictionary"); // 加载数据字典
},
methods: {
pwdOk() {
if (!this.pwdModel.oldPwd) {
this.$Message.warning("请输入初始密码!");
return;
}
if (!this.pwdModel.newPwd) {
this.$Message.warning("请输入新密码!");
return;
}
if (this.pwdModel.newPwd !== this.pwdModel.confirmPwd) {
this.$Message.warning("两次密码不一致!");
return;
}
if (this.pwdModel.newPwd === this.pwdModel.oldPwd) {
this.$Message.warning("新旧密码相同!");
return;
}
this.pwdModel.id = this.userId;
let params = {
accountId: this.userInfo.accountId,
userId: this.userInfo.id,
newPassword: this.pwdModel.newPwd,
oldPassword: this.pwdModel.oldPwd
};
Api.authChangepassword(params).then(res => {
if (res.success) {
this.$Message.success("修改成功!");
} else {
this.$Message.error("修改失败!");
}
});
},
pwdModelReset() {
this.pwdModel = {
oldPwd: "",
newPwd: "",
confirmPwd: ""
};
},
openModalAvatar() {
this.modalAvatar = true;
},
//单个文件选择后赋值方法
// inputChangedFile(val) {
// const imgPathsArr = JSON.parse(val)
// this.userInfo.avatar_Url = imgPathsArr[0].filePath
// this.imageModel.avatar_Url = imgPathsArr[0].filePath
// },
//获取用户基本信息
initUserInfo() {
let parma = {
Id: this.userId
};
this.$http.sysUser.getuserinfo(parma).then(res => {
if (res.result) {
this.userInfo = res.result;
this.userInfos=res.result;
this.imageModel.id = this.userInfo.id;
if (
res.result.avatarUrl &&
res.result.avatarUrl != "" &&
res.result.avatarUrl != null
) {
this.userInfo.avatarUrl = res.result.avatarUrl;
this.avatorPath = fileUrlDown + res.result.avatarUrl;
this.oldImgName = fileUrlDown + res.result.avatarUrl;
} else {
this.userInfo.avatarUrl = avatar;
}
} else {
this.$Message.error("查询失败!");
}
});
},
cancelAvatar() {
this.modalAvatar = false;
this.avatorPath = this.oldImgName;
},
upAvatar() {
if (this.imageModel.avatar_Url != "") {
this.$http.sysUser.changeavatar(this.imageModel).then(res => {
if (res.success) {
this.$Message.success("修改成功!");
this.modalAvatar = false;
this.userInfos.avatarUrl = fileUrlDown + this.imageModel.avatar_Url;
this.$store.commit("admin/user/setUserAvatar", this.userInfos);
} else {
this.$Message.error("修改失败!");
}
});
} else {
this.$Message.warning("请选择上传图片!");
}
},
reload() {
this.isRouterAlive = false; //先关闭,
this.$nextTick(function() {
this.isRouterAlive = true; //再打开
});
}
},
computed: {},
mounted() {
this.initUserInfo();
},
watch: {
imgName(newName, oldName) {
const imgPathsArr = JSON.parse(newName);
this.userInfo.avatarUrl = imgPathsArr[0].filePath;
this.imageModel.avatar_Url = imgPathsArr[0].filePath;
this.avatorPath = fileUrlDown + imgPathsArr[0].filePath;
}
}
};
</script>
<style lang="less" >
.ivu-card-body {
padding: 0px;
}
.ivu-tabs-nav-scroll {
background: #f5f6fa;
border-bottom: 2px solid #e8eaec;
}
.ivu-tabs-ink-bar {
height: 2px;
bottom: 0;
}
.ivu-tabs-nav .ivu-tabs-tab {
padding: 14px 16px;
}
.tabContent {
padding: 16px;
height: 400px;
}
.imgBg {
padding: 100px;
background: #ccc;
margin-bottom: 10px;
}
.imgBg img {
width: 100%;
border: #333 solid 1px;
}
.ivu-form-itemNo {
margin-bottom: 4px;
}
.user_info_right {
float: left;
margin-left: 20px;
width: calc(78% - 20px);
}
</style>
\ No newline at end of file
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