elink-star
/
epmet-work-pc-chengyang
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

常用功能菜单

dev
luyan 11 months ago
parent
8e596407b2
commit
a81a89fe62
4 changed files with 550 additions and 653 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 292
      src/views/modules/workPc/customer-add-or-update.vue
  2. 514
      src/views/modules/workPc/menu-add-or-update.vue
  3. 178
      src/views/modules/workPc/menu.vue
  4. 219
      src/views/modules/workPc/setpwd.vue

292
src/views/modules/workPc/customer-add-or-update.vue
View File

@ -1,35 +1,26 @@
<template>
<el-dialog :visible.sync="visible"
:title="'选择客户'"
:close-on-click-modal="false"
:close-on-press-escape="false"
:top="diaTop">
<el-dialog :visible.sync="visible" :title="'选择客户'" :close-on-click-modal="false" :close-on-press-escape="false"
:top="diaTop">
<div class="customerDiv"
:style="{height:diaHeight+'px'}">
<div class="customerDiv" :style="{ height: diaHeight + 'px' }">
<el-checkbox :indeterminate="isIndeterminate"
v-model.trim="checkAll"
@change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox :indeterminate="isIndeterminate" v-model.trim="checkAll"
@change="handleCheckAllChange">全选</el-checkbox>
<el-checkbox-group v-model.trim="menuListShow"
@change="handleCheckedCitiesChange">
<el-checkbox-group v-model.trim="menuListShow" @change="handleCheckedCitiesChange">
<el-checkbox v-for="(item,index) in customerList "
:key="index"
class="customerItem"
:label="item.customerId">{{item.customerName}}</el-checkbox>
<el-checkbox v-for="(item, index) in customerList " :key="index" class="customerItem"
:label="item.customerId">{{ item.customerName }}</el-checkbox>
</el-checkbox-group>
</el-checkbox-group>
</div>
</div>
<template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary"
@click="saveMenuList()">{{ $t('confirm') }}</el-button>
</template>
</el-dialog>
<template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="saveMenuList()">{{ $t('confirm') }}</el-button>
</template>
</el-dialog>
</template>
<script>
@ -39,166 +30,167 @@ import { mapGetters } from 'vuex'
let loading // 加载动画
export default {
data () {
return {
visible: false,
tableId: "",//选中的表单id，从父组件传过来
customerList: [],//客户列表
customerIdList: [],//客户列表
menuList: [],//客户选中的菜单列表（会存在手动删除的客户的垃圾数据）
menuListShow: [],//客户选中的菜单列表(去除垃圾数据)
// deptList: [],
checkCustomerList: [],
isIndeterminate: true,
checkAll: false,
data() {
return {
visible: false,
tableId: "",//选中的表单id，从父组件传过来
customerList: [],//客户列表
customerIdList: [],//客户列表
menuList: [],//客户选中的菜单列表（会存在手动删除的客户的垃圾数据）
menuListShow: [],//客户选中的菜单列表(去除垃圾数据)
// deptList: [],
checkCustomerList: [],
isIndeterminate: true,
checkAll: false,
}
},
computed: {
}
},
computed: {
diaWidth () {
diaWidth() {
return this.resolution === 'small' ? 60 : 50
},
diaHeight () {
return this.resolution === 'small' ? 60 : 50
},
diaHeight() {
return this.resolution === 'small' ? 350 : 600
},
diaTop () {
return this.resolution === 'small' ? 350 : 600
},
diaTop() {
return this.resolution === 'small' ? '30px' : '100px'
},
...mapGetters(['clientHeight', 'resolution']),
},
methods: {
handleCheckAllChange (val) {
// debugger
this.menuListShow = val ? this.customerIdList : [];
this.isIndeterminate = false;
return this.resolution === 'small' ? '30px' : '100px'
},
...mapGetters(['clientHeight', 'resolution']),
},
handleCheckedCitiesChange (value) {
methods: {
let checkedCount = value.length;
this.checkAll = checkedCount === this.customerIdList.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.customerIdList.length;
},
async init (tableId) {
this.visible = true
this.tableId = tableId
this.startLoading()
handleCheckAllChange(val) {
// debugger
this.menuListShow = val ? this.customerIdList : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
this.customerList = []
this.customerIdList = []
this.menuList = []
this.menuListShow = []
let checkedCount = value.length;
this.checkAll = checkedCount === this.customerIdList.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.customerIdList.length;
},
async init(tableId) {
this.visible = true
this.tableId = tableId
this.startLoading()
await this.getCustomerList()
this.customerList = []
this.customerIdList = []
this.menuList = []
this.menuListShow = []
this.endLoading()
await this.getCustomerList()
},
this.endLoading()
// 获取已经配置当前菜单的客户列表
async getMenuList () {
// const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/access/govcustomermenu/getcustomerids"
const url = "/gov/access/govcustomermenu/getcustomerids"
const params = {
tableId: this.tableId
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.menuList = data
this.menuList.forEach(element => {
if (this.customerIdList.indexOf(element) > -1) {
this.menuListShow.push(element)
}
});
this.handleCheckedCitiesChange(this.menuListShow)
} else {
this.$message.error(msg)
}
},
},
// 获取已经配置当前菜单的客户列表
async getMenuList() {
// const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/access/govcustomermenu/getcustomerids"
const url = "/gov/access/govcustomermenu/getcustomerids"
const params = {
tableId: this.tableId
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.menuList = data
this.menuList.forEach(element => {
if (this.customerIdList.indexOf(element) > -1) {
this.menuListShow.push(element)
}
});
this.handleCheckedCitiesChange(this.menuListShow)
} else {
this.$message.error(msg)
}
},
//获取所有客户列表
async getCustomerList () {
window.app.ajax.get(
"/oper/crm/customer/getvalidcustomerlist",
{},
(data, rspMsg) => {
this.customerList = data;
this.customerList.forEach(element => {
this.customerIdList.push(element.customerId)
//获取所有客户列表
async getCustomerList() {
window.app.ajax.get(
"/oper/crm/customer/getvalidcustomerlist",
{},
(data, rspMsg) => {
this.customerList = data;
this.customerList.forEach(element => {
this.customerIdList.push(element.customerId)
});
});
this.getMenuList()
this.getMenuList()
},
(rspMsg, data) => {
this.$message.error(rspMsg)
}
)
},
(rspMsg, data) => {
this.$message.error(rspMsg)
}
)
},
async saveMenuList () {
this.checkCustomerList = []
// const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/access/govcustomermenu/addcustomermenu"
const url = "/gov/access/govcustomermenu/addcustomermenu"
const parmas = {
tableId: this.tableId,
customerIds: this.menuListShow
}
async saveMenuList() {
this.checkCustomerList = []
// const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/gov/access/govcustomermenu/addcustomermenu"
const url = "/gov/access/govcustomermenu/addcustomermenu"
const parmas = {
tableId: this.tableId,
customerIds: this.menuListShow
}
const { data, code, msg } = await requestPost(url, parmas)
const { data, code, msg } = await requestPost(url, parmas)
if (code === 0) {
this.$message.success("保存成功")
this.visible = false
if (code === 0) {
this.$message.success("保存成功")
this.visible = false
} else {
this.$message.error(msg)
}
} else {
this.$message.error(msg)
}
},
// 开启加载动画
startLoading () {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading () {
// clearTimeout(timer);
if (loading) {
loading.close()
}
}
},
// 开启加载动画
startLoading() {
loading = Loading.service({
lock: true, // 是否锁定
text: '正在加载……', // 加载中需要显示的文字
background: 'rgba(0,0,0,.7)' // 背景颜色
})
},
// 结束加载动画
endLoading() {
// clearTimeout(timer);
if (loading) {
loading.close()
}
}
}
}
}
</script>
<style scoped>
.customerDiv {
margin-left: 100px;
overflow-y: scroll;
margin-left: 100px;
overflow-y: scroll;
}
.customerItem {
display: block;
margin: 20px;
font-size: 15px;
display: block;
margin: 20px;
font-size: 15px;
}
.item_span {
margin-left: 20px;
margin-left: 20px;
}
</style>

514
src/views/modules/workPc/menu-add-or-update.vue
View File

@ -1,272 +1,282 @@
<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
<el-form-item prop="type" :label="$t('menu.type')" size="mini">
<el-radio-group v-model.trim="dataForm.type" :disabled="!!dataForm.id">
<el-radio :label="0">{{ $t('menu.type0') }}</el-radio>
<el-radio :label="1">{{ $t('menu.type1') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="name" :label="$t('menu.name')">
<el-input v-model.trim="dataForm.name" :placeholder="$t('menu.name')"></el-input>
</el-form-item>
<el-form-item prop="parentName" :label="$t('menu.parentName')" class="menu-list">
<el-popover v-model.trim="menuListVisible" ref="menuListPopover" placement="bottom-start" trigger="click">
<el-tree
:data="menuList"
:props="{ label: 'name', children: 'children' }"
node-key="id"
ref="menuListTree"
:highlight-current="true"
:expand-on-click-node="false"
accordion
@current-change="menuListTreeCurrentChangeHandle">
</el-tree>
</el-popover>
<el-input v-model.trim="dataForm.parentName" v-popover:menuListPopover :readonly="true" :placeholder="$t('menu.parentName')">
<i v-if="dataForm.pid !== '0'" slot="suffix" @click.stop="deptListTreeSetDefaultHandle()" class="el-icon-circle-close el-input__icon"></i>
</el-input>
</el-form-item>
<el-form-item v-if="dataForm.type === 0" prop="url" :label="$t('menu.url')">
<el-input v-model.trim="dataForm.url" :placeholder="$t('menu.url')"></el-input>
</el-form-item>
<el-form-item prop="showFlag" :label="$t('menu.showFlag')" size="mini">
<el-radio-group v-model.trim="dataForm.showFlag">
<el-radio :label="1">{{ $t('menu.show1') }}</el-radio>
<el-radio :label="0">{{ $t('menu.show2') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="sort" :label="$t('menu.sort')">
<el-input-number v-model.trim="dataForm.sort" controls-position="right" :min="0" :label="$t('menu.sort')"></el-input-number>
</el-form-item>
<el-form-item v-if="dataForm.type === 0" prop="icon" :label="$t('menu.icon')" class="icon-list">
<el-popover v-model.trim="iconListVisible" ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-sys__menu-icon-popover">
<div class="mod-sys__menu-icon-inner">
<div class="mod-sys__menu-icon-list">
<el-button
v-for="(item, index) in iconList"
:key="index"
@click="iconListCurrentChangeHandle(item)"
:class="{ 'is-active': dataForm.icon === item }">
<svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${item}`"></use></svg>
</el-button>
</div>
</div>
</el-popover>
<el-input v-model.trim="dataForm.icon" v-popover:iconListPopover :readonly="true" :placeholder="$t('menu.icon')"></el-input>
</el-form-item>
<el-form-item v-if="dataForm.type === 1" prop="permissions" :label="$t('menu.permissions')">
<el-input v-model.trim="dataForm.permissions" :placeholder="$t('menu.permissionsTips')"></el-input>
</el-form-item>
<el-form-item
v-for="(item, index) in dataForm.resourceList"
:key="item.key"
:prop="`resourceList.${index}.resourceUrl`"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"
:label="index === 0 ? $t('menu.resource') : ''"
class="resource-list">
<el-row>
<el-col :span="22">
<el-input v-model.trim="item.resourceUrl" :placeholder="$t('menu.resourceUrl')">
<el-select v-model.trim="item.resourceMethod" slot="prepend" :placeholder="$t('menu.resourceMethod')">
<el-option label="GET" value="GET"></el-option>
<el-option label="POST" value="POST"></el-option>
<el-option label="PUT" value="PUT"></el-option>
<el-option label="DELETE" value="DELETE"></el-option>
</el-select>
</el-input>
</el-col>
<el-col :span="2" class="text-center">
<el-button @click="resourceDeleteHandle(item)" size="small" type="text">{{ $t('delete') }}</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item :label="dataForm.resourceList==null || dataForm.resourceList.length <= 0 ? $t('menu.resource') : ''">
<el-button @click="resourceAddHandle()" class="aui-button--dashed w-percent-100">{{ $t('menu.resourceAddItem') }}</el-button>
</el-form-item>
</el-form>
<template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
</template>
</el-dialog>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
:close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
label-width="120px">
<el-form-item prop="type" :label="$t('menu.type')" size="mini">
<el-radio-group v-model.trim="dataForm.type" :disabled="!!dataForm.id">
<el-radio :label="0">{{ $t('menu.type0') }}</el-radio>
<el-radio :label="1">{{ $t('menu.type1') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="name" :label="$t('menu.name')">
<el-input v-model.trim="dataForm.name" :placeholder="$t('menu.name')"></el-input>
</el-form-item>
<el-form-item prop="parentName" :label="$t('menu.parentName')" class="menu-list">
<el-popover v-model.trim="menuListVisible" ref="menuListPopover" placement="bottom-start"
trigger="click">
<el-tree :data="menuList" :props="{ label: 'name', children: 'children' }" node-key="id"
ref="menuListTree" :highlight-current="true" :expand-on-click-node="false" accordion
@current-change="menuListTreeCurrentChangeHandle">
</el-tree>
</el-popover>
<el-input v-model.trim="dataForm.parentName" v-popover:menuListPopover :readonly="true"
:placeholder="$t('menu.parentName')">
<i v-if="dataForm.pid !== '0'" slot="suffix" @click.stop="deptListTreeSetDefaultHandle()"
class="el-icon-circle-close el-input__icon"></i>
</el-input>
</el-form-item>
<el-form-item v-if="dataForm.type === 0" prop="url" :label="$t('menu.url')">
<el-input v-model.trim="dataForm.url" :placeholder="$t('menu.url')"></el-input>
</el-form-item>
<el-form-item prop="showFlag" :label="$t('menu.showFlag')" size="mini">
<el-radio-group v-model.trim="dataForm.showFlag">
<el-radio :label="1">{{ $t('menu.show1') }}</el-radio>
<el-radio :label="0">{{ $t('menu.show2') }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item prop="sort" :label="$t('menu.sort')">
<el-input-number v-model.trim="dataForm.sort" controls-position="right" :min="0"
:label="$t('menu.sort')"></el-input-number>
</el-form-item>
<el-form-item v-if="dataForm.type === 0" prop="icon" :label="$t('menu.icon')" class="icon-list">
<el-popover v-model.trim="iconListVisible" ref="iconListPopover" placement="bottom-start"
trigger="click" popper-class="mod-sys__menu-icon-popover">
<div class="mod-sys__menu-icon-inner">
<div class="mod-sys__menu-icon-list">
<el-button v-for="(item, index) in iconList" :key="index"
@click="iconListCurrentChangeHandle(item)"
:class="{ 'is-active': dataForm.icon === item }">
<svg class="icon-svg" aria-hidden="true">
<use :xlink:href="`#${item}`"></use>
</svg>
</el-button>
</div>
</div>
</el-popover>
<el-input v-model.trim="dataForm.icon" v-popover:iconListPopover :readonly="true"
:placeholder="$t('menu.icon')"></el-input>
</el-form-item>
<el-form-item v-if="dataForm.type === 1" prop="permissions" :label="$t('menu.permissions')">
<el-input v-model.trim="dataForm.permissions" :placeholder="$t('menu.permissionsTips')"></el-input>
</el-form-item>
<el-form-item v-for="(item, index) in dataForm.resourceList" :key="item.key"
:prop="`resourceList.${index}.resourceUrl`"
:rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }"
:label="index === 0 ? $t('menu.resource') : ''" class="resource-list">
<el-row>
<el-col :span="22">
<el-input v-model.trim="item.resourceUrl" :placeholder="$t('menu.resourceUrl')">
<el-select v-model.trim="item.resourceMethod" slot="prepend"
:placeholder="$t('menu.resourceMethod')">
<el-option label="GET" value="GET"></el-option>
<el-option label="POST" value="POST"></el-option>
<el-option label="PUT" value="PUT"></el-option>
<el-option label="DELETE" value="DELETE"></el-option>
</el-select>
</el-input>
</el-col>
<el-col :span="2" class="text-center">
<el-button @click="resourceDeleteHandle(item)" size="small" type="text">{{ $t('delete')
}}</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item
:label="dataForm.resourceList == null || dataForm.resourceList.length <= 0 ? $t('menu.resource') : ''">
<el-button @click="resourceAddHandle()" class="aui-button--dashed w-percent-100">{{
$t('menu.resourceAddItem') }}</el-button>
</el-form-item>
</el-form>
<template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
</template>
</el-dialog>
</template>
<script>
import debounce from 'lodash/debounce'
import { getIconList } from '@/utils'
export default {
data () {
return {
visible: false,
menuList: [],
menuListVisible: false,
iconList: [],
iconListVisible: false,
dataForm: {
id: '',
type: 0,
name: '',
pid: '0',
parentName: '',
url: '',
showFlag: 1,
resourceList: [],
permissions: '',
sort: 0,
icon: ''
}
}
},
computed: {
dataRule () {
return {
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
parentName: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
]
}
}
},
watch: {
'dataForm.type' (val) {
this.$refs['dataForm'].clearValidate()
}
},
methods: {
init () {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.iconList = getIconList()
this.dataForm.parentName = this.$t('menu.parentNameDefault')
this.dataForm.resourceList = []
this.getMenuList().then(() => {
if (this.dataForm.id) {
this.getInfo()
}
})
})
},
// 获取菜单列表
getMenuList () {
return this.$http.get('/gov/access/menu/list?type=0').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
data() {
return {
visible: false,
menuList: [],
menuListVisible: false,
iconList: [],
iconListVisible: false,
dataForm: {
id: '',
type: 0,
name: '',
pid: '0',
parentName: '',
url: '',
showFlag: 1,
resourceList: [],
permissions: '',
sort: 0,
icon: ''
}
}
this.menuList = res.data
}).catch(() => {})
},
// 获取信息
getInfo () {
this.$http.get(`/gov/access/menu/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
if (this.dataForm.pid === '0') {
return this.deptListTreeSetDefaultHandle()
computed: {
dataRule() {
return {
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
parentName: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
]
}
}
this.$refs.menuListTree.setCurrentKey(this.dataForm.pid)
}).catch(() => {})
},
// 上级菜单树, 设置默认值
deptListTreeSetDefaultHandle () {
this.dataForm.pid = '0'
this.dataForm.parentName = this.$t('menu.parentNameDefault')
},
// 上级菜单树, 选中
menuListTreeCurrentChangeHandle (data) {
this.dataForm.pid = data.id
this.dataForm.parentName = data.name
this.menuListVisible = false
},
// 图标, 选中
iconListCurrentChangeHandle (icon) {
this.dataForm.icon = icon
this.iconListVisible = false
},
// 菜单资源, 添加
resourceAddHandle () {
this.dataForm.resourceList.push({
key: new Date().getTime(),
resourceMethod: 'GET',
resourceUrl: ''
})
},
// 菜单资源, 删除
resourceDeleteHandle (resource) {
this.dataForm.resourceList = this.dataForm.resourceList.filter(item => item.key !== resource.key)
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
watch: {
'dataForm.type'(val) {
this.$refs['dataForm'].clearValidate()
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/gov/access/menu', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false })
}
},
methods: {
init() {
this.visible = true
this.$nextTick(() => {
this.$refs['dataForm'].resetFields()
this.iconList = getIconList()
this.dataForm.parentName = this.$t('menu.parentNameDefault')
this.dataForm.resourceList = []
this.getMenuList().then(() => {
if (this.dataForm.id) {
this.getInfo()
}
})
})
},
// 获取菜单列表
getMenuList() {
return this.$http.get('/gov/access/menu/list?type=0').then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.menuList = res.data
}).catch(() => { })
},
// 获取信息
getInfo() {
this.$http.get(`/gov/access/menu/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
if (this.dataForm.pid === '0') {
return this.deptListTreeSetDefaultHandle()
}
this.$refs.menuListTree.setCurrentKey(this.dataForm.pid)
}).catch(() => { })
},
// 上级菜单树, 设置默认值
deptListTreeSetDefaultHandle() {
this.dataForm.pid = '0'
this.dataForm.parentName = this.$t('menu.parentNameDefault')
},
// 上级菜单树, 选中
menuListTreeCurrentChangeHandle(data) {
this.dataForm.pid = data.id
this.dataForm.parentName = data.name
this.menuListVisible = false
},
// 图标, 选中
iconListCurrentChangeHandle(icon) {
this.dataForm.icon = icon
this.iconListVisible = false
},
// 菜单资源, 添加
resourceAddHandle() {
this.dataForm.resourceList.push({
key: new Date().getTime(),
resourceMethod: 'GET',
resourceUrl: ''
})
},
// 菜单资源, 删除
resourceDeleteHandle(resource) {
this.dataForm.resourceList = this.dataForm.resourceList.filter(item => item.key !== resource.key)
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/gov/access/menu', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
}).catch(() => { })
})
}, 1000, { 'leading': true, 'trailing': false })
}
}
</script>
<style lang="scss">
.mod-sys__menu {
.resource-list {
.el-select .el-input__inner {
min-width: 110px;
text-align: center;
.resource-list {
.el-select .el-input__inner {
min-width: 110px;
text-align: center;
}
}
}
.menu-list,
.icon-list {
.el-input__inner,
.el-input__suffix {
cursor: pointer;
.menu-list,
.icon-list {
.el-input__inner,
.el-input__suffix {
cursor: pointer;
}
}
&-icon-popover {
width: 458px;
overflow: hidden;
}
&-icon-inner {
width: 478px;
max-height: 258px;
overflow-x: hidden;
overflow-y: auto;
}
}
&-icon-popover {
width: 458px;
overflow: hidden;
}
&-icon-inner {
width: 478px;
max-height: 258px;
overflow-x: hidden;
overflow-y: auto;
}
&-icon-list {
width: 458px;
padding: 0;
margin: -8px 0 0 -8px;
> .el-button {
padding: 8px;
margin: 8px 0 0 8px;
> span {
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
font-size: 18px;
}
&-icon-list {
width: 458px;
padding: 0;
margin: -8px 0 0 -8px;
>.el-button {
padding: 8px;
margin: 8px 0 0 8px;
>span {
display: inline-block;
vertical-align: middle;
width: 18px;
height: 18px;
font-size: 18px;
}
}
}
}
}
</style>

178
src/views/modules/workPc/menu.vue
View File

@ -1,91 +1,51 @@
<template>
<el-card shadow="never"
class="aui-card--fill">
<div class="mod-sys__menu">
<el-form :inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()">
<el-form-item>
<el-button type="primary"
@click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading"
:data="dataList"
row-key="id"
border
:height="tableHeight"
<el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__menu">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" row-key="id" border :height="tableHeight"
style="width: 100%;">
<el-table-column prop="name"
:label="$t('menu.name')"
header-align="center"
min-width="150"></el-table-column>
<el-table-column prop="icon"
:label="$t('menu.icon')"
header-align="center"
align="center">
<template slot-scope="scope">
<svg class="icon-svg"
aria-hidden="true">
<use :xlink:href="`#${scope.row.icon}`"></use>
</svg>
</template>
</el-table-column>
<el-table-column prop="type"
:label="$t('menu.type')"
header-align="center"
align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.type === 0"
size="small">{{ $t('menu.type0') }}</el-tag>
<el-tag v-else
size="small"
type="info">{{ $t('menu.type1') }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="sort"
:label="$t('menu.sort')"
header-align="center"
align="center"></el-table-column>
<el-table-column prop="url"
:label="$t('menu.url')"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="permissions"
:label="$t('menu.permissions')"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column :label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150">
<template slot-scope="scope">
<el-button type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
<el-button type="text"
size="small"
@click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
<el-button type="text"
size="small"
@click="showCustomerMenu(scope.row.id)">{{ '客户配置' }}</el-button>
</template>
</el-table-column>
</el-table>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"></add-or-update>
<!-- 客户菜单配置 -->
<customer-add-or-update ref="customerForm"
@refreshDataList="getDataList"></customer-add-or-update>
</div>
</el-card>
<el-table-column prop="name" :label="$t('menu.name')" header-align="center"
min-width="150"></el-table-column>
<el-table-column prop="icon" :label="$t('menu.icon')" header-align="center" align="center">
<template slot-scope="scope">
<svg class="icon-svg" aria-hidden="true">
<use :xlink:href="`#${scope.row.icon}`"></use>
</svg>
</template>
</el-table-column>
<el-table-column prop="type" :label="$t('menu.type')" header-align="center" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.type === 0" size="small">{{ $t('menu.type0') }}</el-tag>
<el-tag v-else size="small" type="info">{{ $t('menu.type1') }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="sort" :label="$t('menu.sort')" header-align="center"
align="center"></el-table-column>
<el-table-column prop="url" :label="$t('menu.url')" header-align="center" align="center" width="150"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="permissions" :label="$t('menu.permissions')" header-align="center" align="center"
width="150" :show-overflow-tooltip="true"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update')
}}</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete')
}}</el-button>
<el-button type="text" size="small" @click="showCustomerMenu(scope.row.id)">{{ '客户配置'
}}</el-button>
</template>
</el-table-column>
</el-table>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<!-- 客户菜单配置 -->
<customer-add-or-update ref="customerForm" @refreshDataList="getDataList"></customer-add-or-update>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
@ -93,30 +53,30 @@ import AddOrUpdate from './menu-add-or-update'
import { mapGetters } from 'vuex'
import CustomerAddOrUpdate from './customer-add-or-update'
export default {
mixins: [mixinViewModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/gov/access/menu/list',
deleteURL: '/gov/access/menu'
},
customerFormVisible: false
}
},
components: {
AddOrUpdate, CustomerAddOrUpdate
},
computed: {
tableHeight () {
// return this.resolution === 'small' ? this.clientHeight - 210 : this.clientHeight - 220
return this.clientHeight - 210
mixins: [mixinViewModule],
data() {
return {
mixinViewModuleOptions: {
getDataListURL: '/gov/access/menu/list',
deleteURL: '/gov/access/menu'
},
customerFormVisible: false
}
},
components: {
AddOrUpdate, CustomerAddOrUpdate
},
computed: {
tableHeight() {
// return this.resolution === 'small' ? this.clientHeight - 210 : this.clientHeight - 220
return this.clientHeight - 210
},
...mapGetters(['clientHeight', 'resolution']),
},
...mapGetters(['clientHeight', 'resolution']),
},
methods: {
showCustomerMenu (tableId) {
this.$refs['customerForm'].init(tableId)
methods: {
showCustomerMenu(tableId) {
this.$refs['customerForm'].init(tableId)
}
}
}
}
</script>

219
src/views/modules/workPc/setpwd.vue
View File

@ -1,122 +1,57 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__menu">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-button type="primary" @click="addOrUpdateHandle()">{{
$t('add')
}}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
row-key="id"
border
:height="tableHeight"
style="width: 100%"
>
<el-table-column
prop="name"
:label="$t('menu.name')"
header-align="center"
min-width="150"
></el-table-column>
<el-table-column
prop="icon"
:label="$t('menu.icon')"
header-align="center"
align="center"
>
<template slot-scope="scope">
<svg class="icon-svg" aria-hidden="true">
<use :xlink:href="`#${scope.row.icon}`"></use>
</svg>
</template>
</el-table-column>
<el-table-column
prop="type"
:label="$t('menu.type')"
header-align="center"
align="center"
>
<template slot-scope="scope">
<el-tag v-if="scope.row.type === 0" size="small">{{
$t('menu.type0')
}}</el-tag>
<el-tag v-else size="small" type="info">{{
$t('menu.type1')
}}</el-tag>
</template>
</el-table-column>
<el-table-column
prop="sort"
:label="$t('menu.sort')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="url"
:label="$t('menu.url')"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="permissions"
:label="$t('menu.permissions')"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)"
>{{ $t('update') }}</el-button
>
<el-button
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>{{ $t('delete') }}</el-button
>
<el-button
type="text"
size="small"
@click="showCustomerMenu(scope.row.id)"
>{{ '客户配置' }}</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
<!-- 客户菜单配置 -->
<customer-add-or-update
ref="customerForm"
@refreshDataList="getDataList"
></customer-add-or-update>
</div>
</el-card>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-sys__menu">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-button type="primary" @click="addOrUpdateHandle()">{{
$t('add')
}}</el-button>
</el-form-item>
</el-form>
<el-table v-loading="dataListLoading" :data="dataList" row-key="id" border :height="tableHeight"
style="width: 100%">
<el-table-column prop="name" :label="$t('menu.name')" header-align="center"
min-width="150"></el-table-column>
<el-table-column prop="icon" :label="$t('menu.icon')" header-align="center" align="center">
<template slot-scope="scope">
<svg class="icon-svg" aria-hidden="true">
<use :xlink:href="`#${scope.row.icon}`"></use>
</svg>
</template>
</el-table-column>
<el-table-column prop="type" :label="$t('menu.type')" header-align="center" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.type === 0" size="small">{{
$t('menu.type0')
}}</el-tag>
<el-tag v-else size="small" type="info">{{
$t('menu.type1')
}}</el-tag>
</template>
</el-table-column>
<el-table-column prop="sort" :label="$t('menu.sort')" header-align="center"
align="center"></el-table-column>
<el-table-column prop="url" :label="$t('menu.url')" header-align="center" align="center" width="150"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="permissions" :label="$t('menu.permissions')" header-align="center" align="center"
width="150" :show-overflow-tooltip="true"></el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update')
}}</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete')
}}</el-button>
<el-button type="text" size="small" @click="showCustomerMenu(scope.row.id)">{{ '客户配置'
}}</el-button>
</template>
</el-table-column>
</el-table>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
<!-- 客户菜单配置 -->
<customer-add-or-update ref="customerForm" @refreshDataList="getDataList"></customer-add-or-update>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
@ -124,31 +59,31 @@ import AddOrUpdate from './menu-add-or-update'
import { mapGetters } from 'vuex'
import CustomerAddOrUpdate from './customer-add-or-update'
export default {
mixins: [mixinViewModule],
data() {
return {
mixinViewModuleOptions: {
getDataListURL: '/gov/access/menu/list',
deleteURL: '/gov/access/menu'
},
customerFormVisible: false
}
},
components: {
AddOrUpdate,
CustomerAddOrUpdate
},
computed: {
tableHeight() {
// return this.resolution === 'small' ? this.clientHeight - 210 : this.clientHeight - 220
return this.clientHeight - 210
mixins: [mixinViewModule],
data() {
return {
mixinViewModuleOptions: {
getDataListURL: '/gov/access/menu/list',
deleteURL: '/gov/access/menu'
},
customerFormVisible: false
}
},
components: {
AddOrUpdate,
CustomerAddOrUpdate
},
computed: {
tableHeight() {
// return this.resolution === 'small' ? this.clientHeight - 210 : this.clientHeight - 220
return this.clientHeight - 210
},
...mapGetters(['clientHeight', 'resolution'])
},
...mapGetters(['clientHeight', 'resolution'])
},
methods: {
showCustomerMenu(tableId) {
this.$refs['customerForm'].init(tableId)
methods: {
showCustomerMenu(tableId) {
this.$refs['customerForm'].init(tableId)
}
}
}
}
</script>

Write Preview
Loading…
Cancel
Save